@charset "utf-8"; #catalog{margin: 0 auto; padding: 100px 0;} #catalog .lists{margin: 0 auto;} #catalog .lists>ul{margin: 0 auto;} #catalog .lists>ul>li{ position: relative; float: left; width: 33.33%;box-sizing: border-box; display: list-item;--text-smaller: 0.833rem; line-height: 1.2; border-bottom: 1px solid #e6e6e6;border-right: 1px solid #e6e6e6; transition: all .35s;} #catalog .lists>ul>li:nth-child(3n){border-right: none;} #catalog .lists>ul>li:nth-child(3n+1):nth-last-child(-n+3), #catalog .lists>ul>li:last-child{border-bottom: none;} #catalog .lists>ul>li:nth-child(n+1):nth-last-child(-n+1), #catalog .lists>ul>li:nth-child(3n+2):nth-last-child(1), #catalog .lists>ul>li:nth-child(3n+2):nth-last-child(-n+3){ border-bottom: none; } #catalog .lists>ul>li>a{display: block; position: relative;padding: 60px;} #catalog .lists>ul>li>a:before, #catalog .lists>ul>li>a:after { content: ""; display: table; } #catalog .lists>ul>li>a:after { clear: both; } #catalog .lists>ul>li>a { zoom: 1; } #catalog .lists>ul>li>a .img{ display: none; width: 100%;} #catalog .lists>ul>li>a .img>img{max-height: 410px; transition: all 1s;} #catalog .lists>ul>li>a .box{ position: relative;z-index: 30; width: 100%;text-align: left; padding: 50px 120px 50px 0;} #catalog .lists>ul>li>a .box>.title{font-size: 2.4rem; height: 50px; font-weight: bold; color: #333;transition: all .35s;} #catalog .lists>ul>li>a .ico{position: absolute;z-index: 2;right: 30px;top: 50%; transform: translateY(-50%);} #catalog .lists>ul>li>a .ico>img{height: 150px;width: auto;opacity: .2;transition: all .35s;} #catalog .lists>ul>li>a .ico>img:nth-child(2){display: none;} #catalog .lists>ul>li:hover{ box-shadow: 0 8px 16px rgba(0,0,0,.1);} #catalog .lists>ul>li:hover .img>img{transform: scale(1.04);} #catalog .lists>ul>li:hover .box>.title{color: #0758ab;} #catalog .lists>ul>li:hover .ico>img{display: none;} #catalog .lists>ul>li:hover .ico>img:nth-child(2){display: inline-block;opacity: .9;} #advantage{margin: 50px auto;} #advantage .wrap{max-width: 1400px;} #advantage .tab-nav{text-align: left; border-bottom: 2px solid #0758ab;} #advantage .tab-nav>ul{margin: 0 auto; display: flex;align-content: center; align-items: center;} #advantage .tab-nav>ul>li{ position: relative; margin-bottom: -2px; margin-right: 20px; display: inline-block;vertical-align: top; cursor: pointer; height: 80px; line-height: 80px; border: 2px solid transparent; padding: 0 30px; border-radius: 20px 20px 0 0; transition: all .35s;} #advantage .tab-nav>ul>li>a{ font-size: 2.4rem; color: #333; } #advantage .tab-nav>ul>li.active:after{width: 100%;} #advantage .tab-nav>ul>li.active:before{opacity: 1;} #advantage .tab-nav>ul>li.active{ border-color: #0758ab; font-weight: bold;background: #f2f8ff; border-bottom: 3px solid #f2f8ff;} #advantage .tab-nav>ul>li.active a{color: #0758ab;} #advantage .tab-box{ margin: 0 auto; padding: 80px 10px;} #advantage .tab-box .tab-item{ display:none; text-align: left;} #advantage .tab-box .current{display: block;} #advantage .tab-box .tab-item .intro{width: 40%;} #advantage .tab-box .tab-item .intro>.slogan{ font-size: 2rem; color: #0758ab;} #advantage .tab-box .tab-item .intro>.title{font-weight: bold; color: #333; font-size: 4.2rem; padding: 10px 0 30px 0;} #advantage .tab-box .tab-item .intro>.text{font-size: 1.8rem; font-weight: 200; color: #666; line-height: 3rem; margin: 0 auto;} #advantage .tab-box .tab-item .content{width: 50%; text-align: left;} #advantage .tab-box .tab-item .content .certificate>ul{margin: 0 auto;} #advantage .tab-box .tab-item .content .certificate>ul>li{display: block; float: left;width: 25%; text-align: center;} #advantage .tab-box .tab-item .content .certificate>ul>li>img{ width: 70%;} #advantage .tab-box .tab-item .content .esg>a{ position: relative; display: block; border-radius: 16px; overflow: hidden;} #advantage .tab-box .tab-item .content .esg>a:after{position: absolute;z-index: 12; left: 50%;top: 50%; width: 60px;height: 60px; line-height: 60px; text-align: center; transform: translate(-50%,-50%); opacity: 0; box-shadow: 0 5px 15px rgba(0,0,0,.2); border-radius: 100%;background: rgba(18,71,155,1); font-family: iconfont; font-size: 2rem; color: #fff; content: '\e6bf'; transition: all .35s;} #advantage .tab-box .tab-item .content .esg>a:before{position: absolute;z-index: 1;left: 0;top: 0; width: 100%;height: 100%;background: #000;content: ''; opacity: 0; transition: all .35s;} #advantage .tab-box .tab-item .content .esg>a>img{position: relative;z-index: 2; width: 100%;height: auto; transition: all 1s;} #advantage .tab-box .tab-item .content .esg>a:hover img{ transform: scale(1.05);opacity: .6;} #advantage .tab-box .tab-item .content .esg>a:hover:after{opacity: 1;transform: translate(-50%,-40%);} #advantage .tab-box .tab-item .content .esg>a:hover:before{opacity: 1;} #advantage .tab-box .tab-item .content .factory>a{ position: relative; display: block; float: left; width: 47.5%; margin-bottom: 5%; border-radius: 16px; overflow: hidden;} #advantage .tab-box .tab-item .content .factory>a:nth-child(even){float: right;transform: translateY(30px);} #advantage .tab-box .tab-item .content .factory>a>img{position: relative;z-index: 2; width: 100%;height: auto; transition: all 1s;} #advantage .tab-box .tab-item .content .factory>a:after{position: absolute;z-index: 12; left: 50%;top: 50%; width: 60px;height: 60px; line-height: 60px; text-align: center; transform: translate(-50%,-50%); opacity: 0; box-shadow: 0 5px 15px rgba(0,0,0,.2); border-radius: 100%;background: #fff; font-family: iconfont; font-size: 2rem; color: #0758ab; content: '\e61e'; transition: all .35s;} #advantage .tab-box .tab-item .content .factory>a:before{position: absolute;z-index: 1;left: 0;top: 0; width: 100%;height: 100%;background: #0758ab;content: ''; opacity: 0; transition: all .35s;} #advantage .tab-box .tab-item .content .factory>a:hover img{ transform: scale(1.05);opacity: .3;} #advantage .tab-box .tab-item .content .factory>a:hover:after{opacity: 1;transform: translate(-50%,-40%);} #advantage .tab-box .tab-item .content .factory>a:hover:before{opacity: 1;} #solutions{margin: 50px auto 100px auto;} #solutions .wrap{max-width: 1400px;} #solutions .theme{font-size: 4.2rem; font-weight: bold; margin: 0 auto; text-align: center;} #solutions .container{ margin: 0 auto; display: flex;padding: 50px 0;} #solutions .container>.slide {flex: 1;position: relative;margin-right: 20px; border-radius: 26px;overflow: hidden; transition: .6s;} #solutions .container>.slide:last-child {margin-right: 0;} #solutions .container>.slide>a{display: block;} #solutions .container>.slide .img {width: 100%;} #solutions .container>.slide .img>img {width: 100%; height: 340px;object-fit: cover;} #solutions .container>.slide .box {position: absolute;z-index:12;top: 0;left: 0;width: 100%;height: 100%; padding: 40px 0; box-sizing: border-box; transition: .8s;} #solutions .container>.slide .box:after{position: absolute;z-index: 1; left: 0;top: 0;width: 100%;height: 60%; background-image: linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0)); content: '';} #solutions .container>.slide .box>.title{position: relative;z-index: 12; font-size: 2.2rem;text-align: center; color: #fff; transition: all .35s;} #solutions .container>.slide .box>.text{ display: none; padding-top: 20px; width: 90%; font-size: 1.8rem; line-height: 3rem; color: #666;transition: all .35s;} #solutions .container>.slide .box>.ico{ display: none; position: absolute;z-index: 12; left: 60px;bottom: 60px; width: 80px;height: 80px;overflow: hidden; } #solutions .container>.slide .box>.ico>img{position: absolute;z-index: 12; top: 0;left: 0;width: 100%;} #solutions .container>.slide:hover {flex: 2.48;} #solutions .container>.slide:hover .box{ background: transparent;} #solutions .container>.slide:hover .box>.title{font-size: 3rem} #solutions .container>.slide:hover .box>.text{color: rgba(255,255,255,.8);} #solutions .container>.slide:hover .box>.ico>img{top:-80px;} #products{position: relative; margin: 0 auto;} #products .display .layout{margin: 0 auto; padding: 50px 0 100px 0;} #products .display .layout>.layout-box-left{ width: 20%; min-width: 200px; box-sizing: border-box; text-align: left;} #products .display .layout>.layout-box-left>.categories{ position: relative; top: 0;padding: 20px;background: #ebf5ff; border-radius: 16px; } #products .display .layout>.layout-box-left>.categories .toggler{display: none; text-align: center; width: 40px; height: 120px; background-image: linear-gradient(45deg, rgba(110, 222, 100, 1), rgba(7, 88, 171, 1)); box-shadow: 0 5px 16px rgba(0,0,0,.2); border-radius:0 6px 6px 0;} #products .display .layout>.layout-box-left>.categories .toggler>a{ position: relative; display: block;color: #fff; padding-top: 16px;} #products .display .layout>.layout-box-left>.categories .toggler>a>i{display: block; font-size: 1.8rem;} #products .display .layout>.layout-box-left>.categories .toggler>a>span{ display: block; font-size: 1.4rem;text-transform: uppercase; transform: rotate(90deg) translateX(15px) translateY(2px);} #products .display .layout>.layout-box-left>.categories .nav>ul{margin: 0 auto;} #products .display .layout>.layout-box-left>.categories .nav>ul>li{display: block; position: relative; transition: all .35s;} #products .display .layout>.layout-box-left>.categories .nav>ul>li>.toggle{ display: block; top: 32px!important; right: 10px!important; } #products .display .layout>.layout-box-left>.categories .nav>ul>li>.toggle:after{} #products .display .layout>.layout-box-left>.categories .nav>ul>li>a{display: flex; align-content: center;align-items: center; position: relative; z-index: 10; padding: 20px 40px 20px 10px; font-size: 1.6rem;color: #333; transition: all .35s;} #products .display .layout>.layout-box-left>.categories .nav>ul>li>a>i{display: inline-block; margin-right: 10px;} #products .display .layout>.layout-box-left>.categories .nav>ul>li>a>i>img{ width: 40px;} #products .display .layout>.layout-box-left>.categories .nav>ul>li>a>i>img:nth-child(2){display: none;} #products .display .layout>.layout-box-left>.categories .nav>ul>li>a>p{display: inline-block;} #products .display .layout>.layout-box-left>.categories .nav>ul>li:hover, #products .display .layout>.layout-box-left>.categories .nav>ul>li.active{ color: #fff;} #products .display .layout>.layout-box-left>.categories .nav>ul>li>a:hover, #products .display .layout>.layout-box-left>.categories .nav>ul>li.active>a{color: #0758ab;} #products .display .layout>.layout-box-left>.categories .nav>ul>li>a:hover i>img{display: none;} #products .display .layout>.layout-box-left>.categories .nav>ul>li>a:hover i>img:nth-child(2){display: inline-block;} #products .display .layout>.layout-box-left>.categories .nav>ul>li>a.active{ position: relative;z-index: 10; } #products .display .layout>.layout-box-left>.categories .nav>ul>li>a.active>p{color: #0758ab;} #products .display .layout>.layout-box-left>.categories .nav>ul>li>a.active>i>img:nth-child(1), #products .display .layout>.layout-box-left>.categories .nav>ul>li.active>a>i>img:nth-child(1){display: none;} #products .display .layout>.layout-box-left>.categories .nav>ul>li>a.active>i>img:nth-child(2), #products .display .layout>.layout-box-left>.categories .nav>ul>li.active>a>i>img:nth-child(2){display: block;} #products .display .layout>.layout-box-left>.categories .nav>ul>li .toggle{position: absolute;z-index: 90; right:0; top: 0; cursor: pointer; border: 0; background: none; width: 16px;height: 16px; line-height: 16px; transition: all .35s;} #products .display .layout>.layout-box-left>.categories .nav>ul>li .toggle:after{position: absolute;z-index: 1; top: 0; right: 0; width: 100%;text-align: center; font-family: iconfont; font-size: 1.6rem!important; font-weight: bold; color: #0758ab; content: '\e62a'; transition: all .35s;} #products .display .layout>.layout-box-left>.categories .nav>ul>li .toggle.active:after{content: '\e63c';} #products .display .layout>.layout-box-left>.categories .nav>ul>li ul{display: none; padding:10px 20px;} #products .display .layout>.layout-box-left>.categories .nav>ul>li ul>li ul{padding:0;} #products .display .layout>.layout-box-left>.categories .nav>ul>li ul>li{ position: relative; display: block; text-align: left;} #products .display .layout>.layout-box-left>.categories .nav>ul>li ul>li>.toggle{ width: 40px; height: 22px; line-height: 22px;} #products .display .layout>.layout-box-left>.categories .nav>ul>li ul>li>.toggle:after{ font-size: 2rem; } #products .display .layout>.layout-box-left>.categories .nav>ul>li ul>li>a{ position: relative; display: block; padding: 0 16px 16px 16px; font-size: 1.5rem; line-height: 2.2rem;} #products .display .layout>.layout-box-left>.categories .nav>ul>li ul>li>a:after{ position: absolute;z-index: 2; left: -18px;top:0;width: 29px;height: 29px; background: url("../img/categories_son_arr.png") no-repeat; content: '';transition: all .35s;} #products .display .layout>.layout-box-left>.categories .nav>ul>li ul>li>a:before{position: absolute;z-index: 1; left: -18px;top:0;width: 29px;height: 100%; background: url("../img/categories_son_line.png") repeat-y; content: '';transition: all .35s;} #products .display .layout>.layout-box-left>.categories .nav>ul>li ul>li:last-child>a{padding-bottom: 10px;} #products .display .layout>.layout-box-left>.categories .nav>ul>li ul>li:last-child>a:after{background: url("../img/categories_son_arrLast.png") no-repeat!important;} #products .display .layout>.layout-box-left>.categories .nav>ul>li ul>li:last-child>a:before{display: none;} #products .display .layout>.layout-box-left>.categories .nav>ul>li ul>li>a:hover{color: #0758ab;} #products .display .layout>.layout-box-left>.categories .nav>ul>li a.active{color: #0758ab;} #products .display .layout>.layout-box-left>.categories .nav.layui-layer-wrap{ padding: 30px;} #products .display .layout>.layout-box-left>.consult{margin: 25px auto;} #products .display .layout>.layout-box-left>.consult>a{ position: relative; overflow: hidden; display: flex; align-items: center; align-content: center; justify-content: center; background-image: linear-gradient(45deg, #0758ab, rgba(110, 222, 100, 1)); color: #fff; border-radius: 10px; padding: 10px 0; text-align: center;} #products .display .layout>.layout-box-left>.consult>a:after{position: absolute;z-index: 1; right: -100%; top: -100%; width:100%;height: 240%; background: #0758ab;opacity: 0; border-radius: 100%; content: ''; transition: all .6s;} #products .display .layout>.layout-box-left>.consult>a i{ position: relative; z-index: 12; display: inline-block; font-size: 3rem; margin-right: 6px;} #products .display .layout>.layout-box-left>.consult>a span{position: relative;z-index: 12; display: inline-block; font-size: 1.6rem;} #products .display .layout>.layout-box-left>.consult>a:hover:after{ right: 0;opacity: 1; transform: scale(3);} #products .display .layout>.layout-box-right{position: relative;z-index: 0; width: 70%;box-sizing: border-box;} #products .display .layout>.layout-box-right>.type{ display: flex; align-items: center; align-content: center; position: relative; padding: 20px; text-align: left;font-size: 2.4rem; font-weight: bold; color: #0758ab; border-bottom: 1px solid #eee; } #products .display .layout>.layout-box-right>.type:after{position: absolute;z-index: 12; left: 0; top: 50%; width: 4px; height: 24px; transform: translateY(-50%); background: #0758ab; content: ''; } #products .display .layout>.layout-box-right>.type>a{display: inline-block;color: #0758ab;} #products .display .layout>.layout-box-right>.type>span{display: inline-block; margin: 0 8px;} #products .display .layout>.layout-box-right>.lists{margin: 0 auto; padding: 50px 0; } #products .display .layout>.layout-box-right>.lists>ul{margin: 0 auto;} #products .display .layout>.layout-box-right>.lists>ul>li{display: block;float: left;width:31.33%; margin-right: 3%; margin-bottom: 3%;overflow: hidden; background: #fff; border: 1px solid #eee; border-radius: 3px; position: relative; box-sizing: border-box; transition: all .35s; } #products .display .layout>.layout-box-right>.lists>ul>li:nth-child(3n){margin-right: 0;} #products .display .layout>.layout-box-right>.lists>ul>li .img{ position: relative;box-sizing: border-box;overflow: hidden; padding: 20px 0;} #products .display .layout>.layout-box-right>.lists>ul>li:after{position: absolute;z-index: 12; right: 0;bottom: 0; width: 40px;height: 40px; line-height: 40px; text-align: center; opacity: 0; border-radius: 6px 0 0 0;background: rgba(7,88,171,1); font-family: iconfont; font-size: 1.8rem; color: #fff; content: '\e6a9'; transition: all .35s;} #products .display .layout>.layout-box-right>.lists>ul>li .img>img{ width:100%; height: auto; transition: all .8s;} #products .display .layout>.layout-box-right>.lists>ul>li .box{text-align: left;padding: 30px; transition: all .35s;} #products .display .layout>.layout-box-right>.lists>ul>li .box>.model{ position: relative; color: #0758ab; height: 24px; font-size: 2rem; font-weight: bold; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; transition: all .3s; } #products .display .layout>.layout-box-right>.lists>ul>li .box>.title{ margin-top: 5px; padding: 0; height: 60px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 1.6rem; color: #333;} #products .display .layout>.layout-box-right>.lists>ul>li:hover{box-shadow: 0 0 20px rgba(0,0,0,.1);} #products .display .layout>.layout-box-right>.lists>ul>li:hover .img>img{ transform: scale(1.05)} #products .display .layout>.layout-box-right>.lists>ul>li:hover:after{opacity: 1;} #products>.view{ margin: 0 auto;} #products>.view .wrap{max-width: 1400px;} #products>.view .introduce{margin: 0 auto; padding: 80px 0;} #products>.view .introduce .picture{width: 50%; text-align: right; position: relative;} #products>.view .introduce .picture>.show{ width: 80%; box-sizing: border-box;} #products>.view .introduce .picture>.show .swiper{ width:100%; height:100%; margin: 0 auto;overflow: visible!important;} #products>.view .introduce .picture>.show .swiper-slide{ position: relative; text-align: center; margin: 0 auto;} #products>.view .introduce .picture>.show .swiper-slide>a{ position: relative;z-index: 100; display: block;} #products>.view .introduce .picture>.show .swiper-slide>a:after{position: absolute;z-index: 90; top: 0;left: 0; width: 100%;height: 100%; background: url("../img/mask.png") no-repeat; background-position: 50% 50%; content: '';} #products>.view .introduce .picture>.show .swiper-slide>a>img{max-width: 100% !important; vertical-align: center;} #products>.view .introduce .picture>.show .swiper-slide .play{ position: absolute;z-index: 50; left: 0;top: 50%; transform: translateY(-50%); width: 100%;} #products>.view .introduce .picture>.show .swiper-slide .play>iframe{ width: 100%; height: 450px; margin: 0 auto;} #products>.view .introduce .picture>.show .swiper-pagination{ display:none; text-align:center; position:relative; bottom:0;} #products>.view .introduce .picture>.show .swiper-pagination .swiper-pagination-bullet {width: 10px;height: 10px;margin:0 3px;} #products>.view .introduce .picture>.show .swiper-pagination .swiper-pagination-bullet-active{background:#666;} #products>.view .introduce .picture>.thumbs{position:absolute; right: 0;top: 0; width: 80px; height: 100%;} #products>.view .introduce .picture>.thumbs>.swiper{ width:100%; height: 100%;} #products>.view .introduce .picture>.thumbs>.swiper .swiper-slide{ text-align: center; border:1px solid #ddd; border-radius: 10px; overflow: hidden; cursor: pointer; box-sizing:border-box;} #products>.view .introduce .picture>.thumbs>.swiper img{ display: inline-block; width:auto;height:100%;box-sizing:border-box;} #products>.view .introduce .picture>.thumbs>.swiper .swiper-slide-thumb-active{border-color: #0758ab;} #products>.view .introduce .box{width: 42%; text-align: left; box-sizing: border-box;} #products>.view .introduce .box>.title{ padding: 20px 0;} #products>.view .introduce .box>.title>h3{font-size: 5rem; font-weight: bold;color: #333; } #products>.view .introduce .box>.title>span{display: block; font-size: 2.4rem; color: #888; margin-top: 10px;} #products>.view .introduce .box>.info{ margin: 20px auto; } #products>.view .introduce .box>.info>.rows{display: flex;align-content: center; justify-content: flex-start; margin: 10px auto; padding: 15px 5px; border-bottom: 1px dotted #ddd; } #products>.view .introduce .box>.info>.rows>strong{display: inline-block; font-size: 1.8rem;font-weight: normal; margin-right: 10px; color: #333;} #products>.view .introduce .box>.info>.rows>span{display: inline-block; font-size: 1.65rem; color: #999;} #products>.view .introduce .box>.btn{ margin-top: 50px;} #products>.view .introduce .box>.btn>a{ float: left; display: inline-flex;align-content: center; align-items: center; color: #0758ab;border: 2px solid #0758ab; border-radius: 50px; padding: 10px 30px; transition: all .35s;} #products>.view .introduce .box>.btn>a span{display: inline-block; font-size: 1.6rem;} #products>.view .introduce .box>.btn>a i{display: inline-block; font-size: 2.6rem; margin-left:10px; transition: all .35s;} #products>.view .introduce .box>.btn>a:hover i{transform: translateX(6px);} #products>.view .introduce .box>.btn>a.consult{ background: #0758ab; color: #fff; margin-right: 15px;} #products>.view .introduce .box>.btn>a.consult i{ margin-left: 0; margin-right: 10px;} #products>.view .introduce .box>.btn>a.consult:hover{background: #333; border-color: #333;} #products>.view .introduce .box>.btn>a.consult:hover i{transform: translateX(0);} #products>.view .details{ margin: 0 auto;} #products>.view .details .tab-nav{text-align: left;margin: 0 auto;} #products>.view .details .tab-nav ul{margin: 0 auto;} #products>.view .details .tab-nav ul>li{ position: relative; display: inline-block;vertical-align: top; cursor: pointer; margin-right: 50px; height: 80px; line-height: 80px; padding: 0 5px; transition: all .35s;} #products>.view .details .tab-nav ul>li:last-child{margin-right: 0;} #products>.view .details .tab-nav ul>li:after{position: absolute;z-index: 1; left: 0;bottom: 0; width: 0;height: 3px; border-radius: 5px; background: #0758ab;content: '';transition: all .35s;} #products>.view .details .tab-nav ul>li>a{ font-size: 2rem; color: #333; } #products>.view .details .tab-nav ul>li.active:after{width: 100%;} #products>.view .details .tab-nav ul>li.active:before{opacity: 1;} #products>.view .details .tab-nav ul>li.active{ font-weight: bold; } #products>.view .details .tab-nav ul>li.active:after{ width: 100%;} #products>.view .details .tab-nav ul>li.active a{color: #0758ab;} #products>.view .details .tab-box{ margin: 0 auto; padding: 80px 10px;background: #f7f7f7;} #products>.view .details .tab-box .tab-item{ display:none; text-align: left;} #products>.view .details .tab-box .current{display: block;} #products>.view .details .tab-box .tab-item>.theme{display: none;} #products>.view .details .tab-box .tab-item>.contents{ padding: 20px 0; font-size: 1.6rem; line-height: 2.8rem; color: #666;} #products>.view .details .tab-box .tab-item>.contents .overview>.item{ margin: 0 auto 30px auto; border-bottom: 1px dotted #ddd;} #products>.view .details .tab-box .tab-item>.contents .overview>.item:last-child{border-bottom: 0;} #products>.view .details .tab-box .tab-item>.contents .overview>.item>.title{font-size: 1.8rem; color: #0758ab;} #products>.view .details .tab-box .tab-item>.contents .overview>.item>.content{margin: 0 auto; padding: 10px 0 30px 0;} #products>.view .details .tab-box .tab-item>.contents .overview>.item>.content>p{margin-bottom: 15px;} #products>.view .details .tab-box .tab-item>.contents .overview>.item>.content .table-container{position: relative; padding-bottom: 30px; cursor: all-scroll;} #products>.view .details .tab-box .tab-item>.contents .overview>.item>.content .table-container>.table-wrapper{ position: relative; overflow:hidden; overflow-x:auto;} #products>.view .details .tab-box .tab-item>.contents .overview>.item>.content .table-container>.table-wrapper::-webkit-scrollbar {width:10px;height: 10px;} #products>.view .details .tab-box .tab-item>.contents .overview>.item>.content .table-container>.table-wrapper::-webkit-scrollbar-thumb {background:#666;} #products>.view .details .tab-box .tab-item>.contents .overview>.item>.content .table-container>.table-wrapper::-webkit-scrollbar-track {border-radius: 0;background: #ededed;} #products>.view .details .tab-box .tab-item>.contents .overview>.item>.content .table-container:after{ display: none; position: absolute;z-index: 10; right: 0; bottom: 10px; font-size: 1.1rem; color: #ccc; content: '拖动表格进行浏览';} #products>.view .details .tab-box .tab-item>.contents .overview>.item>.content table{ empty-cells: hide; box-sizing: border-box; width: 100%!important; min-width: 1400px; overflow: hidden; border: 1px solid #ddd;} #products>.view .details .tab-box .tab-item>.contents .overview>.item>.content table td{border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; color: #666; font-size: 1.6rem;padding:10px;} #products>.view .details .tab-box .tab-item>.contents .overview>.item>.content img{max-width: 100%;height: auto;} #products>.view .details .tab-box .tab-item>.contents .certificate>.rows{ display: block; float: left; width: 31.33%; margin-right: 3%;margin-bottom: 3%; border-bottom: 1px dotted #ddd; padding: 20px; transition: all .35s; } #products>.view .details .tab-box .tab-item>.contents .certificate>.rows:nth-child(3n){margin-right: 0;} #products>.view .details .tab-box .tab-item>.contents .certificate>.rows>a{display: flex; align-items: center; align-content: center; justify-content: space-between;} #products>.view .details .tab-box .tab-item>.contents .certificate>.rows>a .img{ display: inline-block; width: 10%; margin-right: 20px; text-align: left;} #products>.view .details .tab-box .tab-item>.contents .certificate>.rows>a .title{ display: inline-block; flex: 1; text-align: left; font-size: 1.6rem; line-height: 2rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;} #products>.view .details .tab-box .tab-item>.contents .certificate>.rows:hover .title{ color: #0758ab; } #products>.view .details .tab-box .tab-item>.contents .certificate>.rows:hover{background: rgba(255,255,255,.5); border-color: transparent; box-shadow: 0 6px 16px rgba(0,0,0,.062);} #products>.view .details .tab-box .tab-item>.contents .download>.rows{ display: block; border-bottom: 1px dotted #ddd;padding: 20px; transition: all .35s; } #products>.view .details .tab-box .tab-item>.contents .download>.rows>.title{padding: 0; display: inline-flex; align-content: center; align-items: center; width: 70%; text-align: left;} #products>.view .details .tab-box .tab-item>.contents .download>.rows>.title>i{font-size: 3rem; color: #ff0000; display: inline-block;vertical-align: middle; margin-right: 10px;} #products>.view .details .tab-box .tab-item>.contents .download>.rows>.title>span{display: inline-block;vertical-align: middle; font-size: 1.6rem; color: #666; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } #products>.view .details .tab-box .tab-item>.contents .download>.rows>.url{ display: flex;align-items: center; align-content: center; justify-content: flex-end; width: 20%;text-align: right;} #products>.view .details .tab-box .tab-item>.contents .download>.rows>.url>a{display: inline-block; margin-left: 20px; color: #999; transition: all .35s;} #products>.view .details .tab-box .tab-item>.contents .download>.rows>.url>a>i{font-size: 2.4rem;} #products>.view .details .tab-box .tab-item>.contents .download>.rows>.url>a:hover{color: #0758ab;} #products>.view .details .tab-box .tab-item>.contents .download>.rows:hover{background: rgba(255,255,255,.5); border-color: transparent; box-shadow: 0 6px 16px rgba(0,0,0,.062);} @media only screen and (max-width: 1680px){ #catalog .lists>ul>li>a .ico>img{height: 130px;} } @media only screen and (max-width: 1460px){ #catalog .lists>ul>li>a { padding:40px 50px; } #catalog .lists>ul>li>a .box { padding: 40px 110px 40px 0; } #catalog .lists>ul>li>a .box>.title{font-size: 2.2rem;} #catalog .lists>ul>li>a .ico>img{height: 110px;} #products .display .layout>.layout-box-left{ width: 24%;} #products .display .layout>.layout-box-right{width: 70%;} #advantage .tab-nav>ul>li>a{ font-size: 2.2rem; } #advantage .tab-box .tab-item .intro>.title { font-size: 3.6rem; } #advantage .tab-box .tab-item .intro>.text { font-size: 1.7rem;line-height: 2.6rem; } } @media only screen and (max-width: 1360px){ #products .display .layout>.layout-box-right{width: 68%;} #products .display .layout>.layout-box-right>.type { font-size: 2rem; } #products .display .layout>.layout-box-right>.lists>ul>li{width:48.5%; margin-right: 0; } #products .display .layout>.layout-box-right>.lists>ul>li:nth-child(even){ float: right;} #products>.view .introduce .box>.title>h3{font-size: 6rem;} #products>.view .introduce .box>.title>span{ font-size: 2rem;} } @media only screen and (max-width: 1280px) { #catalog .lists>ul>li{ width: 50%;} #catalog .lists>ul>li:nth-child(3n){border-right: 1px solid #e6e6e6;} #catalog .lists>ul>li:nth-child(3n+1):nth-last-child(-n+3){border-bottom: 1px solid #e6e6e6;} #catalog .lists>ul>li:nth-child(3n+2):nth-last-child(1), #catalog .lists>ul>li:nth-child(3n+2):nth-last-child(-n+3){ border-bottom: 1px solid #e6e6e6; } #catalog .lists>ul>li:nth-child(n+1):nth-last-child(-n+1){ border-bottom: none;} #catalog .lists>ul>li:nth-child(even){float:right; border-right: none;} #products .display .layout>.layout-box-left>.categories .nav>ul>li>.toggle{ top: 18px!important; right: 0!important; } #products .display .layout>.layout-box-left>.categories .nav>ul>li>a { padding: 10px 20px 10px 0; font-size: 1.5rem; } #products .display .layout>.layout-box-left>.categories .nav>ul>li ul>li>a { font-size: 1.4rem;line-height: 2rem; } #products>.view .introduce .box>.title>h3{font-size: 5rem;} #products>.view .introduce .box>.title>span{ font-size: 1.8rem;} #products>.view .introduce .box>.info{ margin: 10px auto; } #products>.view .introduce .box>.info>.rows{ padding: 10px 5px; } #products>.view .introduce .box>.info>.rows>strong{font-size: 1.7rem;} #products>.view .introduce .box>.info>.rows>span{font-size: 1.5rem; } #products>.view .details .tab-box .tab-item>.contents .overview>.item>.content table{ min-width: 1200px;} #advantage .tab-box .tab-item .intro>.title { font-size: 3rem; } #advantage .tab-box .tab-item .intro>.text { font-size: 1.6rem;line-height: 2.4rem; } #advantage .tab-box .tab-item .content .factory>a:after{width: 50px;height: 50px; line-height: 50px; font-size: 1.8rem; } #solutions .container>.slide .img>img {height: 300px; } } @media only screen and (max-width: 1080px) { #advantage .tab-box .tab-item .intro{width: 100%; float: none; padding-bottom: 30px;} #advantage .tab-box .tab-item .content{width: 100%; float: none; text-align: left;} #advantage .tab-box .tab-item .content .certificate>ul>li{width: 20%; } #advantage .tab-box .tab-item .content .certificate>ul>li>img{ width: auto;} #products .display .layout>.layout-box-left{ width: 100%; float: none; border: 0; padding: 0;} #products .display .layout>.layout-box-left>.categories{padding: 0; position: fixed; left: 0; top: 50%;z-index: 19991015; } #products .display .layout>.layout-box-left>.categories>.nav{display: none;} #products .display .layout>.layout-box-left>.categories .nav>ul>li>.toggle{ display: block;} #products .display .layout>.layout-box-left>.categories>.toggler{display: block;} #products .display .layout>.layout-box-left>.consult{display: none;} #products .display .layout>.layout-box-right{float: none; width: 100%;} #products>.view .introduce .box { width: 45%; } #products>.view .introduce .box>.title>h3 { font-size: 4.2rem; } #products>.view .introduce .box>.title>span { font-size: 1.6rem;} #products>.view .introduce .box>.btn>a{padding: 10px 20px;} #products>.view .introduce .box>.btn>a.consult{margin-right: 10px;} #products>.view .introduce .box>.btn>a i { font-size: 2rem; } #products>.view .introduce .box>.btn>a span { font-size: 1.5rem; } #products>.view .introduce .picture>.thumbs>.swiper .swiper-slide{border-radius: 6px;} #products>.view .details .tab-nav ul>li { margin-right: 30px; height: 70px; line-height: 70px; } #products>.view .details .tab-nav ul>li>a { font-size: 1.8rem; } #solutions .theme { font-size: 3.6rem;} #solutions .container>.slide .box>.title{font-size: 1.8rem;} #solutions .container>.slide .img>img {height: 280px; } } @media only screen and (max-width: 980px) { #catalog .lists>ul>li>a .box>.title { font-size: 2rem;} #products>.view .introduce .box { width: 100%; float: none; } #products>.view .introduce .picture{ width: 100%; float: none; } #products>.view .introduce .picture>.show { width: 100%; float: none;} #products>.view .introduce .picture>.show .swiper-pagination { display: block;} #products>.view .introduce .picture>.thumbs{display: none;} #products>.view .details .tab-box { padding: 50px 10px; } #products>.view .details .tab-box .tab-item>.contents .overview>.item>.title { font-size: 1.6rem;} #products>.view .details .tab-box .tab-item>.contents .overview>.item>.content table td{ font-size: 1.4rem;padding:6px 10px;} #advantage .tab-nav>ul>li { margin-right: 15px; height: 70px; line-height: 70px; padding: 0 20px;} #advantage .tab-nav>ul>li>a { font-size:1.8rem;} #advantage .tab-box .tab-item .intro>.slogan { font-size: 1.8rem;} #advantage .tab-box .tab-item .intro>.title { font-size: 2.6rem; } #advantage .tab-box .tab-item .content .certificate>ul>li>img { width: 70%;} #solutions .container>.slide:hover .box>.title{font-size: 2.4rem} } @media only screen and (max-width: 860px) { #solutions .theme { font-size: 3rem;} #solutions .container>.slide .box>.title{font-size: 1.6rem;} #solutions .container>.slide .img>img {height: 260px;} #products .display .layout>.layout-box-right>.lists>ul>li .box>.model { font-size: 1.8rem; } #products .display .layout>.layout-box-right>.lists>ul>li .box>.title { height: 52px; font-size: 1.4rem; } #products>.view .introduce .box>.info>.rows>strong{font-size: 1.6rem;} #products>.view .introduce .box>.info>.rows>span{font-size: 1.4rem; } #products>.view .details .tab-nav{display: none;} #products>.view .details .tab-box{ width: 100%;max-width: inherit; padding: 0;} #products>.view .details .tab-box .wrap { max-width: none; width: 100%; } #products>.view .details .tab-box .tab-item{ display:block;} #products>.view .details .tab-box .tab-item>.theme{ position: relative; display: block; box-sizing: border-box; border-bottom: 1px solid #eee; cursor: pointer; font-size: 1.6rem; padding: 20px 50px;} #products>.view .details .tab-box .tab-item:first-child>.theme{border-top: 1px solid #eee;} #products>.view .details .tab-box .tab-item>.theme>i{ position: absolute;z-index: 10; right: 30px; top: 50%; margin-top: -10px; width: 20px;height: 20px; line-height: 20px; font-size: 1.6rem; color: #ccc; margin-right: 10px; transition: all .35s;} #products>.view .details .tab-box .tab-item>.theme.active{background-image: linear-gradient(45deg, rgba(7, 88, 171, 1), rgba(110, 222, 100, 1)); color: #fff;} #products>.view .details .tab-box .tab-item>.theme.active>i{ transform: rotate(180deg); color: #fff;} #products>.view .details .tab-box .tab-item>.contents{display: none; padding: 50px; } #products>.view .details .tab-box .tab-item>.contents .certificate>.rows>a .title{font-size: 1.4rem;} #products>.view .details .tab-box .tab-item>.contents .certificate>.rows{ width: 48.5%; margin-right: 0; margin-bottom: 10px; padding: 15px; } #products>.view .details .tab-box .tab-item>.contents .certificate>.rows:nth-child(even){float: right;} #products>.view .details .tab-box .tab-item>.contents .download>.rows>.title>i { font-size: 2.4rem;} #products>.view .details .tab-box .tab-item>.contents .download>.rows>.title>span { font-size: 1.4rem; } #products>.view .details .tab-box .tab-item>.contents .download>.rows>.url>a>i { font-size: 2rem;} #products>.view .details .tab-box .tab-item>.contents { font-size: 1.4rem; line-height: 2rem; } } @media only screen and (max-width: 780px) { #catalog .lists>ul>li>a .box { padding: 20px 0; text-align: center; } #catalog .lists>ul>li>a .ico { position: relative;right: 0; top: 0; transform: translateY(0); text-align: center; margin: 0 auto; } #catalog .lists>ul>li>a .ico>img { height: 90px;} #advantage .tab-nav>ul>li { margin-right: 0; height: 60px; line-height: 60px; padding: 0 15px;} #advantage .tab-nav>ul>li>a { font-size: 1.6rem; } #advantage .tab-box { padding: 50px 10px; } #solutions .container>.slide .img>img {height: 240px;} #solutions .container>.slide:hover .box>.title{font-size: 2rem} } @media only screen and (max-width: 640px) { #catalog {padding: 50px 0;} #catalog .lists>ul>li>a { padding: 30px; } #catalog .lists>ul>li>a .box>.title { font-size: 1.8rem; } #products .display .layout>.layout-box-right>.type { padding: 10px; font-size: 1.6rem;} #products .display .layout>.layout-box-right>.type>span { margin: 0 5px; } #products .display .layout>.layout-box-right>.lists>ul>li .img {padding: 0; text-align: center;} #products .display .layout>.layout-box-right>.lists>ul>li .img>img{width: 70%;} #products>.view .introduce { padding: 50px 0; } #products>.view .introduce .box>.title>h3 { font-size: 3.6rem;} #products>.view .introduce .box>.title>span { font-size: 1.4rem;} #products>.view .introduce .box>.info>.rows>strong{font-size: 1.4rem;} #products>.view .introduce .box>.info>.rows>span{font-size: 1.2rem; } #products>.view .introduce .box>.btn>a i { font-size: 1.8rem;} #products>.view .introduce .box>.btn>a span { font-size: 1.3rem;} #products>.view .details .tab-nav ul>li { margin-right: 20px; } #products>.view .details .tab-nav ul>li>a { font-size: 1.7rem;} #products>.view .details .tab-box .tab-item>.theme {padding: 20px 30px;} #products>.view .details .tab-box .tab-item>.contents{padding: 40px 30px;} #products>.view .details .tab-box .tab-item>.contents .certificate>.rows>a .img { width: 16%; } #products>.view .details .tab-box .tab-item>.contents .certificate>.rows{ width: 100%; float: none; } #products>.view .details .tab-box .tab-item>.contents .certificate>.rows:nth-child(even){float: none;} #products>.view .details .tab-box .tab-item>.contents .download>.rows { padding: 20px 10px; } #advantage .tab-box .tab-item .intro>.slogan { font-size: 1.6rem;} #advantage .tab-box .tab-item .intro>.title { font-size: 2rem;} #advantage .tab-box .tab-item .intro>.text { font-size: 1.4rem; line-height: 2rem;} #solutions .theme { font-size: 2.4rem;} #solutions .container{ display: block;padding: 30px 0;} #solutions .container>.slide {flex: 0; float: left; width: 48.5%; position: relative;margin-right: 0; margin-bottom: 10px; border-radius: 6px;} #solutions .container>.slide:nth-child(even){float: right;} #solutions .container>.slide:first-child{ float: none; clear: both; width: 100%; margin-right: 0;} #solutions .container>.slide .img>img {height: 200px;} } @media only screen and (max-width: 520px) { #catalog .lists>ul>li>a { padding: 30px 20px; } #catalog .lists>ul>li>a .box>.title { font-size: 1.6rem; } #catalog .lists>ul>li>a .ico>img { height: 70px;} #products .display .layout>.layout-box-right>.type {font-size: 1.2rem;} #products .display .layout>.layout-box-right>.type>span { margin: 0 4px; } #products .display .layout>.layout-box-right>.lists>ul>li{float: none; width: 100%;margin-bottom: 20px;} #products .display .layout>.layout-box-right>.lists>ul>li:nth-child(even){float: none;} #advantage .tab-nav{ border-bottom: 0;} #advantage .tab-nav>ul{display: block;} #advantage .tab-nav>ul>li{display: block; height: 50px; line-height: 50px; margin-bottom:10px; padding: 0 10px; border-radius: 10px; border: 1px solid #e6e6e6; background: #f9f9f9;} #advantage .tab-nav>ul>li.active{ height: 70px; line-height: 70px; border: 1px solid #0758ab;} #advantage .tab-box .tab-item .content .esg>a { border-radius: 6px;} #advantage .tab-box .tab-item .content .factory>a { border-radius: 6px; } #advantage .tab-box .tab-item .content .factory>a:after { width: 32px; height: 32px; line-height: 32px; font-size: 1.6rem; } #solutions { margin: 50px auto;} #solutions .container>.slide .img>img {height: 180px;} }