@charset "utf-8";
/*.navfix-bg{position: fixed; top: 0; left: 0; z-index: 900; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); opacity: 0; visibility: hidden;}*/
/*.navfix-bg-active{ opacity: 1; visibility: visible;}*/
/*  */
/*.navfix{position: absolute; top: 90px; left: 0; width: 100%; z-index: 99;  background-color: #fff; display: none; overflow: hidden; transition: none;}*/
/*.navfix-active{ display: block; transform: translateY(0); opacity: 1; visibility: visible;}*/
/*  */
/*.navfix-wrap{ height: 560px;transition: none;}*/
/*  */
/*.navfix-left{ width: 18%; height: 100%;box-shadow: -1px 0 0 #eee inset;}*/
/*.navfix-left-title{position: relative; z-index: 2; margin-bottom: 24px; padding: 30px 30px 0 0; cursor: pointer;}*/
/*.navfix-left-title h3{font-size: 24px; color: var(--default);}*/

/*@media (max-width:1600px) {*/
/*	.navfix-left-title{ margin-bottom: 4px; padding: 10px 20px 0 0; }*/
/*	.navfix-left-title h3{font-size: 18px; }*/
/*}*/

/*@media (max-width:1400px) {*/
	
	
/*}*/

/*  */
/*.navfix-cates{padding-left: 60px; padding-right: 30px;  }*/
/*.navfix-cates>ul>li{ padding: 4px 0;}*/
/*.navfix-cates>ul>li>h3{position: relative; z-index: 2; padding-right:55px;}*/
/*.navfix-cates>ul>li>h3>a{display: block; padding: 5px 5px 5px 0 ; line-height: 1.4; font-size: 16px; color: var(--default) ;}*/
/*.navfix-cates>ul>li>h3 i{ position: absolute; top: 50%; right: 15px; margin-top: -7px; display: block; width: 10px; height: 10px; border-top: 1px solid var(--default); border-right: 1px solid var(--default) ; transform: rotate(45deg);}*/
/* actvie */
/*.navfix-cates-active {background-color: #EDF6FF;}*/
/*.navfix-cates>ul>li.on{ border-left: 4px solid var(--default); padding-left: 5px; background-color: #EFF6FE;}*/

/*@media (max-width:1600px) {*/
/*	.navfix-cates{padding-left: 30px; padding-right: 30px;}*/
/*	.navfix-cates>ul>li{ padding: 4px 0; margin: 5px 0;}*/
/*	.navfix-cates>ul>li>h3>a{ font-size: 14px; }*/
/*	.navfix-cates>ul>li>h3{padding-right:25px;}*/
/*}*/

/*@media (max-width:1400px) {*/
/*	.navfix-cates>ul>li{ padding: 4px 0; margin:0;}*/
/*}*/

/* poster */
/*.navfix-cates-poster{ position: absolute; top: 0; right: 0; z-index: 1; width: 82%; height: 560px; padding: 40px 60px; background-color: rgba(255,255,255,.9); display: none; transition: none;}*/
/*.navfix-cates-poster:before{position: absolute; top: 0; left: 0;content: ''; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .3);}*/
/*.navfix-cates>ul>li:first-child .navfix-cates-poster{display: block;}*/
/*.navfix-cates-poster-desc{ position: relative; z-index: 2; max-width: 1000px;}*/
/*.navfix-cates-poster-desc h3{font-size: 24px; color: #fff;}*/
/*.navfix-cates-poster-desc p{ margin: 15px 0 30px; font-size: 18px; line-height: 1.4; color: #fff;}*/
/*.navfix-cates-poster-desc a{ position: relative; z-index: 1; display: inline-block; line-height: 50px; padding: 0 35px; color: #fff; border: 1px solid #fff; border-radius: 50px; overflow: hidden;}*/
/*.navfix-cates-poster-desc a::before{position: absolute; top: 50%; left: 50%; z-index: -1; content: ''; width: 0; height: 100%; background-color: #fff; transform: translate(-50%,-50%); transition: .3s;}*/
/*.navfix-cates-poster-desc a:hover{color: var(--default);}*/
/*.navfix-cates-poster-desc a:hover::before{width: 100%;}*/
/* active */
/*.navfix-cates-poster-active{ display: block;}*/
/*.navfix-cates-poster-width{width: 64%;}*/


/* navfix-menus */
/*.navfix-menus-wrap{position: absolute; top: 0; left:  18%; z-index: 1; width: 100%; height: 100%; background-color: #fff; display: none; }*/
/*.navfix-menus{ padding: 20px 0; width: 18%; height: 100%; box-shadow: -1px 0 0 #eee inset;}*/
/*.navfix-menus dl dd{padding: 5px 0; }*/
/*.navfix-menus dl dd>h3 a{display: inline-block; line-height: 1.6; padding: 5px 5px 5px 0 ; font-size: 16px; color: var(--default);}*/
/*.navfix-menus dl dd.on{ border-left: 4px solid var(--default); padding-left: 5px; background-color: #EFF6FE;}*/
/* active */
/*.navfix-menus-wrap-active{ display: block; }*/
/*@media (max-width:1600px) {*/
/*	.navfix-menus{ padding: 0; width: 18%; height: 100%; box-shadow: -1px 0 0 #eee inset;}*/
/*	.navfix-menus dl dd{padding: 10px 0; margin:0 20px; }*/
/*	.navfix-menus dl dd>h3 a{ font-size: 14px; }*/
/*}*/
/*  */
/*.navfix-product{position: absolute; top: 0; left: 18%; width:64%; height: 100%; z-index: 1; background-color: #fff; display: none;}*/
/*.navfix-product-srcroll{ padding: 50px 60px; height: 100%; }*/
/*.navfix-product-item { height: 100%; padding-right: 15px; overflow: auto; }*/
/*.navfix-product-item ul{margin-left: -100px;}*/
/*.navfix-product-item ul li{width: 50%; padding: 20px 0 20px 100px;}*/
/*.navfix-product-item ul li a{align-items: center;}*/

/*.navfix-product-pic{width: 55%;}*/
/*.navfix-product-pic img{width: 100%;}*/
/*.navfix-product-desc{width: 45%;}*/
/*.navfix-product-desc h3{font-size: 18px; color: #333;}*/
/*.navfix-product-desc p{ margin-top: 15px; font-size: 16px; line-height: 1.4; color: #666;}*/
/*.navfix-product-desc a{display:inline-block;}*/
/* active */
/*.navfix-product-active{display: block;}*/

/*@media (max-width:1600px) {*/
/*	.navfix-product-srcroll{ padding: 50px 30px; height: 100%; }*/
/*}*/

/* right */
/* .navfix-right{ position: absolute; top: 0; right: 0; width: 82%; height: 100%; background-color: #fff;}
.navfix-right-active{ width: 64%;}

.navfix-poster{width: 100%; height: 100%;}
.navfix-poster-desc{max-width: 600px; padding: 40px 60px;}
.navfix-poster-desc h3{font-size: 24px; color: var(--default);}
.navfix-poster-desc p{ margin: 15px 0 30px; font-size: 18px; line-height: 1.4;}
.navfix-poster-desc a{ position: relative; z-index: 1; display: inline-block; line-height: 50px; padding: 0 35px; color: var(--default); border: 1px solid var(--default); border-radius: 50px; overflow: hidden;}
.navfix-poster-desc a::before{position: absolute; top: 50%; left: 50%; z-index: -1; content: ''; width: 0; height: 100%; background-color: var(--default); transform: translate(-50%,-50%); transition: .3s;}
.navfix-poster-desc a:hover{color: #fff;}
.navfix-poster-desc a:hover::before{width: 100%;} */



/* navigation */
.navigation>ul>li { margin: 0 40px;}
.navigation>ul>li>a{position: relative; display: block; line-height: 90px; font-size: 20px; color: var(--default);}
.navigation>ul>li>a::before{position: absolute; bottom: 0; left: 0; content: ""; width: 0; height: 4px; background-color: var(--default); transition: .3s;}
.navigation>ul>li.on>a::before{width: 100%;}
.navigation>ul>li:nth-child(3) .navfix{display: none;}
@media (max-width:1600px) {
	.navigation>ul>li {margin: 0 30px;}
	.navigation>ul>li>a{ font-size: 18px; }
}
@media (max-width:1460px) {
	.navigation>ul>li {margin: 0 20px;}
}

@media (max-width:1300px) {
	.navigation>ul>li {margin: 0 10px;}
}

@media (max-width:1200px) {
	.navigation {display: none;}
}

/* sub */
.navigation-sub{position: absolute; top: 90px; left: 50%; z-index: 9; margin-left: -100px; width: 200px; background-color: #fff; transform: translateY(-5px); opacity: 0; visibility: hidden;}
.navigation-sub ul li{border-bottom: 1px solid #eee;}
.navigation-sub ul li a{display: block; padding: 0 15px; line-height: 50px; font-size: 16px; text-align: center; color: var(--default); white-space: nowrap;}
.navigation-sub ul li a:hover{  background-color: #EFF6FE;}

.navigation>ul>li:hover .navigation-sub{ transform: translateY(0); opacity: 1; visibility: visible;}

@media (max-width:1400px) {
	.navigation .navigation-sub{margin-left: -70px; width: 140px;}
	.navigation .navigation-sub ul li a{ line-height: 50px; font-size: 14px;}
}


/* 
 */

.navfix-bg{position: fixed; top: 0; left: 0; z-index: 900; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); opacity: 0; visibility: hidden;}
.navfix-bg-active{ opacity: 1; visibility: visible;}
/*  */
.navfix{position: absolute; top: 90px; left: 0; width: 100%; z-index: 99;  background-color: #fff; display: none; overflow: hidden; transition: none;}
.navfix-active{ display: block; transform: translateY(0); opacity: 1; visibility: visible;}
/*  */
.navfix-wrap{ position: relative; height: 560px; transition: none;}
/*  */
.navfix-left{position: relative; z-index: 2;  width: 300px; height: 100%; background-color: #fff; }
.navfix-title{ padding: 30px 20px 30px 60px; cursor: pointer;}
.navfix-title h3{font-size: 24px; color: var(--default);}
/*  */
.navfix-cates{}
.navfix-cates ul li{ padding:  8px 30px 8px 56px; border-left: 4px solid transparent;}
.navfix-cates ul li h3{position: relative; z-index: 2;}
.navfix-cates ul li h3 a{display: block; line-height: 1.4; font-size: 16px; color: var(--default) ;}
.navfix-cates ul li h3 i{ position: absolute; top: 50%; right: 15px; margin-top: -7px; display: block; width: 10px; height: 10px; border-top: 1px solid var(--default); border-right: 1px solid var(--default) ; transform: rotate(45deg);}
/* actvie */
.navfix-cates-active {background-color: #EDF6FF;}
.navfix-cates ul li:hover{ border-left-color: var(--default); background-color: #EFF6FE;}
/*  */
.navfix-center{ position: absolute; top: 0; left: 0; z-index: 1; width: 240px; height: 100%; background-color: #fff; border-left: 1px solid #eee; border-right: 1px solid #eee; overflow: hidden;}
.navfix-menus{ padding: 20px 0; height: 100%;}
.navfix-menus dl dd{ margin: 0; padding: 5px 20px; border-left: 4px solid transparent; }
.navfix-menus dl dd>h3 a{display: inline-block; line-height: 1.6; font-size: 16px; color: var(--default);}
.navfix-menus dl dd:hover{border-left-color: var(--default); background-color: #EFF6FE;}
/* active */
.navfix-center-active{ left: 300px;}

/* poster */
.navfix-right{ position: relative; height: 100%; flex: 1; background-color: #fff;}
.navfix-poster{ position: absolute; top: 0; left: 0;content: ''; width: 100%; height: 100%; background-color: #fff; padding: 40px 60px; transition: none;}
.navfix-poster:before{position: absolute; top: 0; left: 0;content: ''; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .3);}

.navfix-poster-desc{ position: relative; z-index: 2; max-width: 1000px;}
.navfix-poster-desc h3{font-size: 24px; color: #fff;}
.navfix-poster-desc p{ margin: 15px 0 30px; font-size: 18px; line-height: 1.4; color: #fff;}
.navfix-poster-desc a{ position: relative; z-index: 1; display: inline-block; line-height: 50px; padding: 0 35px; color: #fff; border: 1px solid #fff; border-radius: 50px; overflow: hidden;}
.navfix-poster-desc a::before{position: absolute; top: 50%; left: 50%; z-index: -1; content: ''; width: 0; height: 100%; background-color: #fff; transform: translate(-50%,-50%); transition: .3s;}
.navfix-poster-desc a:hover{color: var(--default);}
.navfix-poster-desc a:hover::before{width: 100%;}
/* active */
.navfix-right-active{margin-left: 240px;}
/*  */
.navfix-product{ padding: 30px; height: 100%; z-index: 1; background-color: #fff; }
.navfix-product-lists { height: 100%; padding-right: 15px; overflow: auto; }
.navfix-product-lists ul{margin-left: -100px;}
.navfix-product-lists ul li{width: 50%; padding: 20px 0 20px 100px;}
.navfix-product-lists ul li a{align-items: center;}

.navfix-product-pic{width: 55%;}
.navfix-product-pic img{width: 100%;}
.navfix-product-desc{width: 45%;}
.navfix-product-desc h3{font-size: 18px; color: #333;}
.navfix-product-desc p{ margin-top: 15px; font-size: 16px; line-height: 1.4; color: #666;}
 
/* active */
.navfix-product-active{display: block;}
@media (max-width:1400px) {
	 .navfix-product{ padding: 20px; }
	 .navfix-product-lists ul{margin-left: -30px;}
	 .navfix-product-lists ul li{ padding: 20px 0 20px 30px;}
}