.index_banner {width: 100%;height: 39vw;background: url(../images/bg1.jpg) no-repeat center/cover;}
.index_banner .wrapper{height: 100%;}
.index_banner .section{width: 1000px;max-width: 100%;}
.index_banner .section_search{margin: 40px 0 15px;}
.index_banner .p{text-align: center;font-size: 1.8em;}
.index_banner .p strong{font-size: 1.2em;color: var(--primary-color);}
.index_banner .hot{background-color: rgba(255, 255, 255, .8);padding: 10px;border-radius: 8px;}
.index_banner .hot .tit{color: red;font-size: 1.6em;line-height: 28px;display: flex;align-items: center;}
.index_banner .hot a{padding: 0 10px;border-right: 1px solid #9b9b9b;font-size: 1.4em;color: #555;line-height: 18px;margin: 5px 0;}
.index_banner .hot a:last-child{border-right: 0;}
.index_banner .hot a:hover{color: var(--primary-color);}

.section_search{width: 100%;height: 55px;display: flex;font-size: 1.4em;}
.section_search .layui-form-select{width: 180px;}
.section_search .layui-select-title{height: 100%;}
.section_search .layui-select-title input{height: 100%;border: none;background-color: var(--primary-color);color: #fff;border-radius: 6px 0 0 6px;}
.section_search .layui-select-title input::placeholder{color: inherit;}
.section_search .layui-form-select .layui-edge{border-top-color: #fff;}
.section_search .layui-form-select dl{top: 100%;}
.section_search .keyword{flex: 1;height: 100%;padding: 0 20px;color: #b4b4b4;}
.section_search .keyword::placeholder{color: inherit;}
.section_search .submit{width: 70px;height: 100%;background: #238887 url(../images/icon_search.svg) no-repeat center/ 24px;border-radius: 0 6px 6px 0;cursor: pointer;transition: all .3s ease-out;}
.section_search .submit:hover{background-color: var(--primary-color);}

.index_title .p1{font-size: 2.8em;font-weight: bold;}
.index_title .p2{font-size: 1.4em;}
.index_title .more{display: inline-flex;align-items: center;background-color: var(--primary-color);border-radius: 10px;padding: 10px 20px;font-size: 1.4em;color: #fff;transition: all .3s ease-out;}
.index_title .more .arrow{width: 34px;height: 20px;background: #238887 url(../images/arrow_right.svg) no-repeat center/14px;;border-radius: 6px;margin-left: 10px;transition: inherit;}
.index_title .more:hover{background-color: #238887;}
.index_title .more:hover .arrow{background-color: var(--primary-color);}

.index_products .swiper{padding-bottom: 50px;}
.index_products .swiper .pic{padding: 20px;background-color: #f8f8f8;border-radius: 10px;transition: all .3s ease-out;}
.index_products .swiper .pic_constant .inner::after{padding-top: 75%;}
.index_products .swiper .p1{font-size: 1.6em;font-weight: bold;margin: 15px 0 10px;transition: all .3s ease-out;}
.index_products .swiper .p2{font-size: 1.4em;color: #333;}
.index_products .swiper-slide:hover .pic{background-color: #d5f3e2;}
.index_products .swiper-slide:hover .pic img{transform: scale(1.02);}
.index_products .swiper-scrollbar{bottom: 0;left: calc(50% - 50px);width: 100px;}
.index_products .swiper-scrollbar-drag{background-color: var(--primary-color);}

.index_products_a .swiper{height: 381px;}
.index_products_a .swiper-slide{background-color: #f8f8f8;border-radius: 10px;transition: all .3s ease-out;}
.index_products_a .swiper-slide .p1{font-size: 1.6em;border-bottom: 1px solid #fff;padding: 10px 20px;}
.index_products_a .swiper-slide .p2{font-size: 1.4em;padding: 10px 20px;}
.index_products_a .swiper-slide:hover{background-color: var(--primary-color);}
.index_products_a .swiper-slide:hover .p1{color: #fff;}
.index_products_a .swiper-slide:hover .p2{color: #e9e9e9;}
.index_products_a .swiper-pagination{position: static;display: flex;align-items: center;justify-content: center;}
.index_products_a .swiper-pagination-bullet-active{width: 11px;height: 11px;}

.index_why{background-color: #fafafa;}
.index_why .txt{width: 50%;font-size: 1.6em;line-height: 1.8;color: #4b5563;}
.index_why .list{width: 45%;height: 386px;gap: 20px;}
.index_why .list li{width: calc(50% - 10px);background-color: #fff;border: 1px solid #eee;border-radius: 10px;padding: 20px;display: flex;flex-direction: column;justify-content: center;transition: all .3s ease-out;}
.index_why .list li .icon{width: 50px;height: 50px;border-radius: 10px;border: 2px solid #fff;background-color: #f3f4f6;display: flex;justify-content: center;align-items: center;}
.index_why .list li .icon img{height: 25px;}
.index_why .list li .p1{font-size: 1.8em;margin: 12px 0 10px;}
.index_why .list li .p2{font-size: 1.4em;color: #757b89;visibility: hidden;height: 0;opacity: 0;transition: inherit;}
.index_why .list li.on{border-color: var(--primary-color);background-color: #d5f3e2;}
.index_why .list li.on .icon{background-color: var(--primary-color);}
.index_why .list li.on .icon img{filter: brightness(0) invert(1);}
.index_why .list li.on .p2{height: 84px;visibility: visible;opacity: 1;}

.index_faq{background: url(../images/bg2.jpg) no-repeat center/cover;}
.index_faq .index_title{width: 48%;color: #fff;}
.index_faq .list{width: 50%;position: relative;z-index: 2;}
.index_faq .list li{background-color: #fff;border-radius: 50px;padding: 15px 30px;cursor: pointer;position: relative;overflow: hidden;z-index: -1;;transition: all .3s ease-out;}
.index_faq .list li + li{margin-top: 20px;}
.index_faq .list li::before{content: '';position: absolute;top: 100%;left: 0;width: 100%;height: 100%;background: linear-gradient(to right, #2fc16e, #00b7a5);z-index: -1;opacity: 0;transition: all .3s ease-out;}
.index_faq .list li .question{display: flex;justify-content: space-between;align-items: flex-start;}
.index_faq .list li .question p{width: calc(100% - 20px);font-size: 1.6em;font-weight: bold;line-height: 20px;}
.index_faq .list li .question .layui-icon{font-size: 15px;font-weight: bold;line-height: 20px;}
.index_faq .list li .answer{font-size: 1.4em;color: #636262;line-height: 1.8;margin-top: 10px;}
.index_faq .list li.on{border-radius: 30px;color: #fff;padding: 30px;}
.index_faq .list li.on::before{opacity: 1;top: 0;}
.index_faq .list li.on .answer{color: #fff;}
.index_faq .list li.on .question .layui-icon::before{content: '\e67e';}


.page_banner{padding: 150px 0 50px;background: url(../images/bg3.jpg) no-repeat center/cover;}
.page_banner .section_search{width: 1000px;max-width: 100%;margin: 0 auto;}

.page_type .p1{font-size: 3em;font-weight: bold;}
.page_type .p2{font-size: 1.8em;}
.page_type .p2 strong{font-size: 1.2em;color: var(--primary-color);}

.bar_open_filter,
.filters_section .top_bar{display: none;}
.filters_section{width: 100%;background-color: #fff;z-index: 2;}

.filters_section .layui-form-radio,
.filters_section .layui-form-checkbox{margin: 0;padding-right: 0;display: flex;align-items: flex-start;}
.filters_section .layui-form-radio>i{font-size: 14px;height: 14px;line-height: 14px;margin: 2px 5px 0 0;}
.filters_section .layui-form-radio>div,
.filters_section .layui-form-checkbox>div{line-height: 1.2;flex: 1;padding: 0;display: flex;justify-content: space-between;}
.filters_section .layui-form-radio .title,
.filters_section .layui-form-checkbox .title{white-space: pre-wrap;}

.serach_nav form{flex-wrap: wrap;}
.serach_nav form .layui-nav{width: 100%; background: #fff !important;color: #333;padding: 0;margin-top: 15px;}
/* .serach_nav form .layui-nav .layui-nav-child.items{ max-height: 300px; overflow-y: auto;background-color: #f4f4f4;padding: 10px 15px 15px; } */
.serach_nav form .layui-nav .layui-nav-child.items{max-height:300px;overflow-y:auto;background-color:#f4f4f4;padding:10px 15px 15px;scrollbar-width:thin;scrollbar-color:#cccccc transparent;}
.serach_nav form .layui-nav .layui-nav-child.items::-webkit-scrollbar{width:2px;}
.serach_nav form .layui-nav .layui-nav-child.items::-webkit-scrollbar-track{background:transparent;}
.serach_nav form .layui-nav .layui-nav-child.items::-webkit-scrollbar-thumb{background:#ccc;border-radius:1px;}
.serach_nav form .layui-nav .layui-nav-child.items::-webkit-scrollbar-thumb:hover{background:#999;}


.serach_nav form .layui-nav .item{margin: 10px 0;}
.serach_nav form .p1{line-height: 40px;color: #777;}
.serach_nav form .layui-nav .layui-nav-item>a span{width: 20px;height: 20px;line-height: 20px;border-radius: 20px;font-size: 12px;color: #fff;background-color: var(--primary-color);text-align: center;margin-left: 2px;display: inline-block;}
.serach_nav form .layui-form-select{width: 100%;}
.serach_nav form .layui-form-select .layui-input{height: 40px;font-size: 1.4em;}
.serach_nav form .layui-nav .layui-nav-item{line-height: 40px; background: #f4f4f4; display: block;width: 100%;margin-bottom: 15px;}
.serach_nav form .layui-nav .layui-nav-item.layui-nav-itemed,
.serach_nav form .layui-nav .layui-nav-child.items{background-color: #c0ecd3;}
.serach_nav form .layui-nav .layui-nav-item a{color: inherit !important;display: flex;align-items: center;padding: 5px 15px;}
.serach_nav form .layui-nav .layui-nav-item>a .layui-nav-more{padding: 0;}
.serach_nav form .layui-nav> *:nth-last-child(-n+2) .layui-nav-child{left: auto;right: 0;}

.search_tags{margin-bottom: 10px;display: flex;align-items: center;flex-wrap: wrap;gap: 6px 8px;}
.search_tags .layui-btn{background: none !important;}
.search_tags .layui-btn+.layui-btn{margin: 0;}
.search_tags i{font-size: 14px;}
.search_tags i:hover{color: red;font-weight: bold;}

.filters_section .search{display: flex;justify-content: space-between;width: 100%;height: 34px;}
.filters_section .search .keyword{width: calc(100% - 40px);height: 100%;padding: 0 10px 0 30px;background: #fff url(../images/icon_search_black.svg) no-repeat 10px center/14px;border-radius: 50px;}
.filters_section .search .keyword:focus{box-shadow: none;}
.filters_section .search .submit{width: 34px;height: 100%;border-radius: 50%;cursor: pointer;background: #fff url(../images/arrow_right_black.svg) no-repeat center/14px;transition: all .3s ease-out;}
.filters_section .search .submit:hover{background-color: #238887;background-image: url(../images/arrow_right.svg);}

.slide_left{width: 300px;}
.slide_right{width: calc(100% - 350px);}

.list_a li{background-color: #f8f8f8;padding: 20px;border-radius: 10px;display: flex;align-items: flex-start;flex-wrap: wrap;gap: 20px;margin-bottom: 20px;}
.list_a li .pic{width: 168px;}
.list_a li .pic img{border: 1px solid #ccc;}
.list_a li .pic:hover img{border-color: var(--primary-color);}
.list_a li .rt{flex: 1;}
.list_a li .top{align-items: center;padding-bottom: 10px;margin-bottom: 10px;border-bottom: 1px solid #fff;gap: 5px 20px;}
.list_a li .p1{font-size: 1.6em;font-weight: bold;}
.list_a li .p2{font-size: 1.5em;background-color: #c0ecd3;padding: 3px 12px;border-radius: 6px;}
.list_a li .p2 span{color: #878787;}
.list_a li .info{display: flex;flex-wrap: wrap;gap: 10px 20px;}
.list_a li .info .item{width: calc((100% - 60px) / 4);font-size: 1.5em;}
.list_a li .info span{color: #878787;}

.list_b{gap: 20px;}
.list_b li{width: calc((100% - 60px) / 4);background-color: #f8f8f8;border-radius: 10px;}
.list_b li .title{padding: 10px 20px;font-weight: bold;font-size: 1.6em;border-bottom: 1px solid #fff;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.list_b li .info{padding: 10px 20px;font-size: 1.5em;}

.list_c{gap: 20px;}
.list_c li{width: calc((100% - 40px) / 3);border-radius: 10px;padding: 20px;border: 1px solid #edebeb;}
.list_c li .title{font-weight: bold;font-size: 1.6em;}
.list_c li .desc{font-size: 1.5em;margin-top: 10px;}
.list_c li:hover{background-color: #edebeb;}

.list_faq{box-shadow: 0 0 10px #eee;padding: 20px;}
.list_faq .list li{border-radius: 10px;padding: 20px;font-size: 1.6em;}
.list_faq .list li:nth-of-type(odd){background-color: #f4f4f4;}
.list_faq .list li>div{display: flex;}
.list_faq .list li .question{margin-bottom: 10px;}
.list_faq .list li .question .cont{font-weight: bold;}
.list_faq .list li .label{font-weight: bold;margin-right: 10px;}
.list_faq .list li .cont{flex: 1;}
.list_faq .list li:hover *{color: var(--primary-color);}

.section_type_name{font-size: 18px;font-weight: bold;border-bottom: 2px solid var(--primary-color);padding-bottom: 10px;color: var(--primary-color);}

.page_about p{font-size: 1.6em;margin: 10px 0;}

.page_contact .contact .lf{width: 40%;}
.page_contact .contact .lf h1{font-size: 2.4em;color: var(--primary-color);}
.page_contact .contact .lf ul li{padding: 20px 0;border-bottom: 1px solid #dedede;display: flex;flex-wrap: wrap;gap: 10px 20px;}
.page_contact .contact .lf ul li:last-child{border-bottom: 0;}
.page_contact .contact .lf ul li .icon{width: 50px;height: 50px;padding: 10px;display: flex;justify-content: center;align-items: center;border: 1px solid #eee;}
.page_contact .contact .lf ul li .icon img{width: 100%;}
.page_contact .contact .lf ul li .tit{font-size: 1.8em;color: #979797;line-height: 1;}
.page_contact .contact .lf ul li .cont p{font-size: 1.6em;margin: 10px 0;}
.page_contact .contact .map{width: 56%;}
.page_contact .msg form{gap: 30px;font-size: 1.5em;}
.page_contact .msg .layui-input{width: calc(50% - 15px);height: 44px;background-color: #f7f9fc;border: none;}
.page_contact .msg .layui-textarea{background-color: #f7f9fc;border: none;padding: 10px;}
.page_contact .msg .submit{border-radius: 6px;width: 160px;}

.detail_product .type_name{font-size: 2.4em;font-weight: bold;}
.detail_product .product_imgs{width: 40%;margin: 0;border: 1px solid #eee;}
.detail_product .product_imgs .swiper-slide{display: flex;justify-content: center;align-items: center;padding: 10px;}
.detail_product .s_top .main{width: 56%;}
.detail_product .s_top .info .item{width: 33.333%;border-bottom: 1px solid #eee;padding: 10px 5px;display: flex;flex-wrap: wrap;gap: 5px;font-size: 1.5em;}
.detail_product .s_top .info .item span{color: #979797;}
.detail_product .s_top .info .item .dl{color: var(--primary-color);text-decoration: underline;margin-left: 5px;}
.detail_product .s_top .info .item .dl img{width: 18px;height: 18px;object-fit: contain;margin-right: 5px;}
.detail_product .s_top .price{font-size: 1.6em;font-weight: bold;}
.detail_product .s_top .price span{font-size: 1.3em;color: #ff0000;}
.detail_product .unit{display: flex;align-items: flex-start;gap: 15px;}
.detail_product .unit .layui-form-radio{margin: 0;position: relative;padding: 7px 10px;line-height: normal;background-color: #bfbfbf;border-radius: 4px;}
.detail_product .unit .layui-icon-radio,
.detail_product .unit .layui-icon-circle:before,
.detail_product .unit .layui-icon-radio:before{content: '';position: absolute;top: 0;left:0;width: 100%;height: 100%;z-index: -1;border-radius: 4px;}
.detail_product .unit .layui-form-radio>div{font-size: 14px;display: flex;align-items: center;color: #fff;}
.detail_product .unit .layui-form-radio>div i{font-size: 30px;margin: 0 5px;}
.detail_product .unit .layui-form-radio.layui-form-radioed{background-color: var(--primary-color);}

.detail_product .tb table{width: 100%;}
.detail_product .tb table tr:nth-of-type(odd){background-color: #e9e9e9;}
.detail_product .tb table td{padding: 15px;font-size: 1.5em;}
.detail_product .tb table .title{width: 150px;}
.detail_product .tb table .cont{color: #878787;}

.calculator .layui-form{font-size: 1.5em;margin-top: 80px;justify-content: center;}
.calculator .label{position: relative;}
.calculator .label .name{position: absolute;bottom: calc(100% + 8px);width: 100%;text-align: center;}
.calculator .keyword{width: 150px;}
.calculator .layui-form-select{width: 100px;}
.calculator .layui-btn+.layui-btn{margin: 0;}

.howtobuy ul li{width: calc(33.333% - 20px);padding: 20px;}
.howtobuy ul li:nth-child(1){background: url(../images/bg4.png) no-repeat center/cover;}
.howtobuy ul li:nth-child(2){background: url(../images/bg5.png) no-repeat center/cover;}
.howtobuy ul li:nth-child(3){background: url(../images/bg6.png) no-repeat center/cover;}
.howtobuy ul li .p1{font-size: 1.6em;color: var(--primary-color);font-weight: bold;}
.howtobuy ul li .p2{font-size: 1.6em;font-weight: bold;margin-top: 5px;}
.howtobuy ul li .p3{font-size: 1.4em;line-height: 1.8;}

.detail_product .list_b li{width: calc((100% - 80px)/5);}

.popup{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, .5);z-index: 999999;display: none;}
.popup .wrapper{height: 100%;display: flex;justify-content: center;align-items: center;}
.popup .section{width: 600px;max-width: 100%;max-height: 80vh;overflow-y: auto;background-color: #fff;border-radius: 15px;padding: 50px;position: relative;}
.popup .close{position: absolute;top: 10px;right: 10px;font-size: 20px;cursor: pointer;}
.popup .close:hover{color: #000;}
.popup form .item{margin-top: 20px;display: flex;flex-wrap: wrap;font-size: 1.5em;}
.popup form .label{width: 110px;height: 38px;display: flex;align-items: center;}
.popup form .block{width: calc(100% - 110px);}
.popup form .submit{width: 40%;}

.detail{font-size: 1.5em;line-height: 1.8;}

.pager-list{padding: 50px 0; width: 100%;}
.pager-list ul{ list-style-type:none; margin:0; padding:0; display:inline-block;}
.pager-list li{ float:left; padding:0 6px;}
.pager-list li>*{ display:inline-block; font-size:1.4em; color:#333 !important; height:35px; line-height:35px; padding:0 14px; border-radius:4px; border:1px solid #eee;}
.pager-list li a:hover{ background:var(--primary-color) !important; color:#fff !important;}
.pager-list li.active>*{ color:#fff !important; background:var(--primary-color) !important; border:none !important;}
.pager-list li.disabled>*{ cursor:auto; background:#eee; color:#ccc;}

@media screen and (max-width: 1440px){
	.list_a li .info .item{width: calc((100% - 40px)/3);}
	.list_a li .p2{font-size: 1.4em;}

	.list_b li{width: calc((100% - 40px)/3) !important}
}


@media screen and (max-width: 1366px){
	.page_banner{padding: 130px 0 50px}
	.list_a li .info .item{width: calc(50% - 10px);}
}

@media screen and (max-width: 1270px){
	.index_banner{height: auto;padding: 160px 0 100px;}
	
	.page_banner{padding: 110px 0 50px}
	.slide_left{width: 200px;}
	.slide_right{width: calc(100% - 230px);}
	
	.list_a li .info .item{width: 100%;}

	.calculator .layui-form{margin-top: 40px;}
	.calculator .label .name{display: none;}
	.calculator .row:last-child{width: 100%;justify-content: center;}

	.page_contact .contact .lf{width: 100%;}
	.page_contact .contact .map{width: 100%;height: 46vw;}

	.detail_product .product_imgs{width: 600px;padding-bottom: 30px;}
	.detail_product .s_top .main{width: 100%;margin-top: 30px;}
	
	.pager-list li> *,
	.pager-list li i,
	.pager-list li i::before{font-size: 12px;}
	.pager-list li>*{padding: 0 8px;height: 24px;line-height: 24px;}
	
}

@media screen and (max-width: 1024px){
	.list_b li{width: calc(50% - 10px) !important}
	.list_c li{width: calc(50% - 10px)}
	
	.detail_product .s_top .info .item{width: 50%;}

	.howtobuy ul li{width: 100%;}
}

@media screen and (max-width: 768px){
	.index_title .p1{font-size: 2.4em;}
	.page_type .p1{font-size: 2.4em;}
	
	.index_why .txt{width: 100%;margin-bottom: 20px;}
	.index_why .list{width: 100%;}

	.index_faq .index_title{width: 100%;margin-bottom: 40px;}
	.index_faq .list{width: 100%;}

	.slide_right{width: 100%;}

	.bar_open_filter{width: 100%;background-color: var(--primary-color);font-size: 1.4em;color: #fff;padding: 8px 20px;margin-top: 20px;display: block;}
	.filters_section{position: fixed;top: 0;left: 0;width: 100%;height: 100%;padding: 20px 4%;background-color: #fff;z-index: 999;display: none;}
	.filters_section .top_bar{font-size: 1.4em;display: block;margin-bottom: 20px;}
	.serach_nav{height: calc(100% - 50px);}
	.serach_nav form.flex{flex-wrap: wrap;height: 100%;}
	.serach_nav form .layui-form-select,
	.serach_nav form .layui-form-select .layui-input{width: 100% !important;font-size: 14px;}
	.serach_nav form .layui-form-select{margin: 10px 0;}
	.serach_nav form .layui-nav.layui-nav-tree{width: 100%;height: 100%;padding: 10px 0;overflow-y: auto;margin-top: 0;}
	.serach_nav form .layui-nav-tree .layui-nav-child{padding-left: 20px;}
	.serach_nav form .layui-nav .layui-nav-item>a span{vertical-align: text-bottom;}
	/* .search_tags{height: 90px;overflow-y: auto;} */
	
	.page_contact .contact .map{height: 60vh;}
	.page_contact .msg form{gap: 20px;}
	.page_contact .msg .layui-input{width: calc(50% - 10px);}

	.popup .section{padding: 30px 20px;}
	.popup form .item{margin-top: 10px;}
	.popup form .label{width: 100%;}
	.popup form .block{width: 100%;}
}

@media screen and (max-width: 525px){
	.section_search{height: 40px;}
	.section_search .keyword{padding: 0 10px;}
	.section_search .submit{background-size: 16px;width: 40px;}
	
	.list_a li .rt{width: 100%;flex: none;}
	
	.list_b li{width: 100% !important}
	.list_c li{width: 100%}
	
	.detail_product .s_top .info .item{width: 100%;}
	.detail_product .tb table td{font-size: 1.4em;padding: 5px;}
	.detail_product .tb table .title{width: auto;}
}