﻿@charset "utf-8"; 
:root{--color:#097EB1;}
.prodetails-tabs .prodetails-tabs-item:nth-child(2){display: none;}
@media (min-width:1025px) {.prodetails-info{padding-left: 7%;}}
.pro-d-main .common-main{padding: 50px 0;}
.pro-d-main .page-main{padding: 0;}
.pro-d-main .porpageflex{display: flex;}
.pro-d-main .common-main .page-container {width: calc(100% - 390px);}
.pro-d-main .sidebar{width:340px;margin-right:50px}
.pro-d-main .sidebar .category{background-color:#FFFFFF;box-shadow:0px 2px 10px 0px rgba(0,0,0,.10);box-sizing:border-box;padding:15px;margin-bottom:30px;border-radius:var(--border)}
.pro-d-main .sidebar .title p{margin:0px;font-size:var(--fontsize24);color:var(--fontcolor);font-weight:var(--fontbold5);line-height:1;text-transform:capitalize}
.pro-d-main .sidebar .title::after{content:'';display:inline-block;width:80px;height:2px;background-color:var(--color)}
.pro-d-main .sidebar ul{padding:0px}
.pro-d-main .sidebar .category ul li{margin:1px 0px;background-color:#FCFCFC;position: relative;}
.pro-d-main .sidebar .category>ul>li>a{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;padding:10px;padding-right:40px;transition:all .2s linear}
.pro-d-main .sidebar .category ul li a.act{background-color:var(--color);color:#FFFFFF}
.pro-d-main .sidebar .category>ul>li:hover>a{background-color: var(--color);color: #FFFFFF;}
.pro-d-main .sidebar .category ul li ul li:hover a {color: var(--color);background-color: transparent;}
.pro-d-main .sidebar .sidebar-cate>li ul li.active a {color: var(--color);}
.pro-d-main .sidebar .category ul li:hover>a {background-color: var(--color);color: #FFFFFF;}
.pro-d-main .sidebar .category .sub-menu a {display: inline-block;width: 100%;box-sizing: border-box;padding: 10px 20px;}
.pro-d-main .sidebar .category .menu-item.active>a {color: #FFFFFF;background-color: var(--color);}
.pro-d-main .sidebar .category .menu-item.active>em {color: #FFFFFF;}
.pro-d-main .sidebar .category .menu-item>em {position: absolute;right: 0px;top: 0px;width: 40px;height: 48px;display: flex;align-items: center;justify-content: center;cursor: pointer;font-size: var(--fontsize14);}
.pro-d-main .sidebar .category .menu-item .sub-menu{display: none;}
.pro-d-main .sidebar .category .menu-item.active .sub-menu {display: block;}
.pro-d-main .sidebar .category .menu-item.active>em::before {transform: rotate(0);}
.pro-d-main .sidebar .category .menu-item>em::before {transform: rotate(-90deg);transition: all .2s linear;}
@media (max-width:1024px) {
.pro-d-main .sidebar{display: none;}
.pro-d-main .common-main .page-container{width: 100%;}
}
@media (min-width:1025px){.search-box .head-search button em{color:var(--color)}
.search-input{top:100%;right:0;}}
@media (min-width:1025px){footer .foot-item.foot-info{width:120px;}
footer .foot-item.foot-nav{width:27%;}
footer .foot-nav .foot-list li:nth-child(2n-1){width:35%;}
footer .foot-nav .foot-list li:nth-child(2n){width:65%;}}
@media (max-width:1024px){footer .foot-nav .foot-list li{width:100%;}}
.home-footintro{display:none;}
.singgle-main+.home-footintro{display:block;}
aside .side-feedback .wmkcfeedback .inquiry-form>*{width:100%;}
@media (min-width:1025px){body.pro-d-body{overflow-x:initial;}
aside .side-feedback{position: sticky;top:120px;}}
@media (min-width:769px){.pro-d-main .preview-container{flex-direction:column}
.preview-container .thumbnail-show{width:100%;}
.pro-d-main .preview-container .thumbnail-box{order:1;height:150px;display:flex;margin-right:0;width:100%;}
.pro-d-main .thumbnail-box .swiper-wrapper{display:flex;flex-direction:unset;align-items:stretch}
.pro-d-main .preview-container .thumbnail-box .item{height:100% !important}
.pro-d-main .preview-container .thumbnail-box .list{width:calc(100% - 25px)}
.pro-d-main .thumbnail-box .prodetails-button-prev em{transform:rotate(90deg)}
.pro-d-main .thumbnail-box .prodetails-button-next em{transform:rotate(-90deg)}
.pro-d-main .thumbnail-box .prodetails-button-next{margin-left:10px}
.pro-d-main .thumbnail-box .prodetails-button-prev{margin-right:10px}
.pro-d-main .thumbnail-box .prodetails-button-next,.pro-d-main .thumbnail-box .prodetails-button-prev{width:25px;height:100%;position:unset}}
@media (min-width:1025px) and (max-width:1440px){.pro-d-main .preview-container .thumbnail-box{height:130px;}}
@media (min-width:1025px) and (max-width:1366px){.pro-d-main .preview-container .thumbnail-box{height:125px;}}
.prodetails-text{font-size:15px;}
@media (min-width:1025px){.prodetails-name{font-size:var(--fontsize26)}}
@media (min-width:1025px) and (max-width:1440px){.prodetails-text{font-size:14px}}