/* ========== Header / Navigation CSS ========== */
/* Used by ALL page templates via header.html */

/* Header Top Bar */
.h-overflow-hidden{overflow: hidden;}
.hedartop{position: fixed;left: 0;right: 0;top: 0;z-index: 999;transition: transform .3s linear;}
.hedartop:before{content: "";display: inline-block;height: 100%;left: 50%;position: absolute;top: 0;z-index: 1;-webkit-transform: translateX(-50%);transform: translateX(-50%);width: 100vw;background-image: -webkit-linear-gradient(left,#fff,#dbdcdd);
    background-image: -o-linear-gradient(left,#fff 0,#dbdcdd 100%);
    background-image: linear-gradient(90deg,#fff 0,#dbdcdd);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffffff",endColorstr="#ffdbdcdd",GradientType=1)
}
.hedartop.slider{transform: translateY(-100%);}
.header{height: 90px;position: relative;z-index: 100;}
.header .logo{width: 330px;display: inline-block;*display: inline;zoom:1;margin: 26px auto 0;}
.header .logo img{width: 100%;vertical-align: top;height: auto;}
.header ul li{float: left;padding-top: 26px;margin-left: 60px;text-align: center;}
.header ul li img{width: 20px;vertical-align: top;margin-bottom: 4px;}
.header ul li span{font-size: 14px;color: #555;cursor: pointer;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.header ul li .zm{display:block;}
.header ul li .fm{display:none;}
.header ul li .selected .zm{display:none;}
.header ul li .selected .fm{display:block;}

/* Navigation Mask */
.navmaskbg{position: fixed;z-index: 99;background:#737b82;left: 0;right: 0;bottom: 0;display: none;top: 0;}
.h-overflow-hidden .navmaskbg{display: block;}

/* Main Navigation */
.nav{position: relative;z-index: 100;}
.nav ul li{float: left}
.nav ul li.sec{position: relative;}
.nav ul li>span{font-size: 14px;color: #000000;height: 56px;line-height: 56px;padding: 0 40px;cursor: pointer;font-weight: 600;display: block;}
.nav ul li>a{font-size: 14px;color: #000000;height: 56px;line-height: 56px;padding: 0 40px;cursor: pointer;font-weight: 600;display: block;}
.nav ul li:first-child>span{padding-left: 0;}
.nav ul li:first-child>a{padding-left: 0;}
.nav ul li>a .arrow{margin-left: 4px;width: 12px;display: inline-block;*display: inline;zoom:1;background:url(../images/arrow-down.png) no-repeat center;background-size:100% auto;height: 10px;transition: all .3s;}
.nav ul li.selected>a{color: #c70000;}
.nav ul li.selected>a .arrow{margin-left: 4px;width: 12px;display: inline-block;*display: inline;zoom:1;background:url(../images/arrow-downf.png) no-repeat center;background-size:100% auto;transform: rotate(-180deg);}

/* Sub Navigation Dropdown */
.nav ul li .subnav{position: absolute;left: 0;top: 56px;font-size: 14px;color: #fff;z-index: 999;right: 0;box-sizing: border-box;background: #fff;border-radius: 0 0 2px 2px;transition: opacity .2s linear,visibility .2s;visibility: hidden;display: flex;opacity: 0;}
.nav ul li.selected .subnav{visibility: visible;opacity: 1;}
.subnav dl{float: left;text-align: left;width: 25%;padding: 6px 15px 6px 15px;box-sizing: border-box;border-right: 1px solid #d1d3d5;height: 100%;position: relative;}
.subnav dl dd .thrtitle{font-size: 14px;color: #555;display: flex;cursor: pointer;align-items: center;justify-content: space-between;}
.subnav dl dd .thrtitle a{font-size: 14px;color: #555;padding: 8px 0;}
.subnav dl dd .thrtitle .arrow{font-size: 14px;color: #555;}
.subnav dl dd.active .thrtitle a{color:#e51f26;}
.subnav dl dd.active .thrtitle .arrow{color:#e51f26;transform: translateX(5px);}
.subnav .wrapper{position: relative;}
.subnav .close{position: absolute;right: 0;top: 10px;background:url(../images/close.png) no-repeat center;background-size:100% 100%;cursor: pointer;width: 20px;height: 20px;}
.subnav .prev{font-size: 24px;color: #555;cursor: pointer;text-align: left;display: none;padding:16px;}

/* Search & Language Panel */
.searchmask,.lanhmask{position: absolute;left: 0;top: 146px;z-index: 99;right: 0;box-sizing: border-box;background: #fff;border-radius: 0 0 2px 2px;transition:all .3s;padding: 0;max-height: 0;overflow: hidden;}
.searchmask.selected,.lanhmask.selected{padding: 20px 0 40px;max-height: 99999px;}
.searchwrap{display: flex;align-items: center;justify-content: center;width: 800px;border-bottom: 1px solid #878d91;box-sizing: border-box;}
.searchwrap input{border: none;outline: none;font-size: 20px;color: #333;padding: 0 50px 0 20px;flex: 1;height:60px;line-height: 60px;}
.searchwrap .searchicon{width: 24px;height: 24px;background:url(../images/sear.png) no-repeat center;background-size:100% 100%;border: none;outline: none;cursor: pointer;}
.searchwrap .searchicon:hover{background:url(../images/searf.png) no-repeat center;background-size:100% 100%;}
.lanhmask{display: flex;justify-content: center;}
.languageitem{padding: 0 20px;}
.languageitem .tit{font-size:18px;color: #595d61;margin-bottom: 8px;}
.languageitem select{font-size:18px;color: #c70000;border: none;border-bottom: 1px solid #878d91;width: 250px;padding: 10px 0;}
.languageitem .tip{font-size:14px;color: #767676;}
.languageitem .laitem{margin-top: 15px;cursor: pointer;}
.languageitem .laitem a{font-size:18px;color: #595d61;display: block;}
.languageitem .laitem.active a,.languageitem .laitem:hover a{color: #c70000;}

/* Subnav Product Preview */
.pruductwrap{padding: 20px;border-right: 1px solid #d1d3d5;cursor: pointer;float: left;width: 25%;box-sizing: border-box;}
.pruductwrap .detail .ptitle{font-size: 14px;color: #555;line-height: 1.4;padding: 5px 0;}
.pruductwrap .detail .subptitle{font-size:14px;color: #555;margin-bottom: 4px;line-height: 1.4;}
.pruductwrap .detail i{font-size:14px;color: #c70000;}

/* Third-level Navigation */
.thrnav{position: absolute;left: 0;top: 0;bottom: 0;width: 100%;transform: translateX(0);transition: all .3s;padding: 6px 15px 6px 15px;display: none;box-sizing: border-box;}
.subnav dl dd.active .thrnav{transform: translateX(100%);display: flex;flex-wrap: wrap;flex-direction: column;}
.thrnav .thritem{font-size: 12px;color: #555;display: flex;cursor: pointer;align-items: center;justify-content: space-between;}
.thrnav .thritem a{padding: 8px 10px; color:#555}
.thrnav .thritem:hover{color: #c70000;}