/*banner*/
.header{position: sticky;top: 0px;width: 100%;background-color: #fff;z-index: 9999;}
.banner {overflow: hidden;position: relative;}
.banner img{width: 100%;}
.banner .lSPager.lSpg{position: absolute;bottom: 5%;z-index: 998;left: 0;right: 0;}
.banner .lSSlideOuter .lSPager.lSpg > li a{width: 14px;height: 14px;background:#51d5cb;}
.banner .lSSlideOuter .lSPager.lSpg > li.active a,.banner  .lSSlideOuter .lSPager.lSpg>li:hover a{background-color:#fff;}
/*search*/
.search {width: 100%;border-bottom: 1px solid #ededed;}
.search > div {max-width: 1200px;display: flex;justify-content: space-between; align-items: center;margin: 0 auto;padding: 5px 0;}
.search > div p {font-size: 14px;}
.search-form {display: flex;justify-content: space-between; align-items: center;background-color: #eee;border:1px solid #d8d8d8;width: 230px;padding:5px 10px;border-radius: 20px;}
.search-form input{border: 0px;background: none;padding-left: 5px;}
/*title*/
.title {font-weight: bold;font-size: 1.8rem;line-height: 1.2;}
.title span{display: block;color: #ccc;font-size: 2rem;text-transform:uppercase;letter-spacing: -1px; font-family: 'Trebuchet MS', sans-serif;}
.title p{font-size: 14px;padding: 20px 0 10px;}
.more {margin: 30px 0 75px; width: 90px;border: 1px solid #999;text-align: center;color: #999;border-radius: 20px;cursor: pointer;}
.more:hover {background-color: #51d5cb;color: #fff;border: 1px solid #51d5cb;}

/*about*/
.about{max-width: 1200px;margin: 50px auto; position: relative;}
.about .title {padding: 50px 0;}
.about-img01 { position: absolute;right: 20px;top: 0;max-width: 384px; width: 40%;}
.about-img01 img{width:100%;} 
.about-img02 {padding: 50px;background-color: #f2f2f2;}
.about-img02 ul{display: flex;justify-content: space-between;align-items: center; width: 60%;}
.about-img02 li{border-right: 1px solid #ccc;width: 26%;cursor: pointer;}
.about-img02 li:nth-child(2){width: 35%;}
.about-img02 li:last-child{border-right:none}
.about-img02 li:hover h3 i {color: #f00;}
.about-img02 h3 i{font-size: 60px;font-family: Impact; font-weight: normal;line-height: 1.1;color: #51d5cb;font-style: normal;}
.about-img02 h3 span{margin-left: 5px;line-height: 2;font-size: 16px;display: inline-block;}
.about-img02 li p{width: 100%;}
/*product*/
.product, .new {max-width: 1200px; margin: 0 auto;}
.product .title, .new .title{text-align: center;}
.product-tabs, .new-tabs{display: flex; align-items: center;max-width: 880px; margin: 20px auto;flex-wrap: wrap;}
.product-tabs li, .new-tabs li {cursor: pointer;padding: 5px 30px;border-radius: 20px;min-width: 120px;text-align: center;}
.new-tabs {justify-content: center;}
.new-tabs li{margin-right: 30px;background-color: #e8e8e8;font-weight: bold;}
.product-tabs li:hover, .product-tabs li.on, .new-tabs li:hover, .new-tabs li.on{background-color: #51d5cb;color: #fff;}
.product-list {display: none;}
.product-list.activedn{display: block;}
.product-list ul {display: flex;flex-wrap: wrap;}
.product-list li {width: 32%;margin-right: 1.5%; margin-bottom: 1.5%; position: relative;overflow: hidden;}
.product-list li:nth-child(3n){margin-right: 0;}
.product-list li a img {width: 100%;}
.product-list li span{position: absolute;width: 100%;background: rgba(81,213,210,0.8);left: 0;color: #fff;z-index: 90;}

.case .title {margin: 50px auto;text-align: center;}
.case .title p{font-size: 14px;padding: 20px 0 10px;}
.case .more{margin: 30px auto 50px;}
.case { width:100%;  position: relative;  overflow: hidden; }

#case_hero { width: 1200px; height: 580px; margin: 0 auto; position: relative; }
#case_hero li {position: absolute; top: 0; left: 0; width: 1200px; height: 580px; overflow: hidden; left: 2400px; }
#case_hero li span{position: absolute;left: 10px;bottom: 0;background:rgba(0,0,0,0.6);width: 1180px;color: #fff;text-align: center;line-height: 45px;font-size: 16px;}
#case_hero img { width: 1180px; height: 580px; margin-left: 10px;}
#case_hero .hero-wrap { overflow: visible; position: absolute; }
#case_hero .next, #case_hero .prev { position: absolute; top: 0;  width: 1200px; height: 580px;background:rgba(0,0,0,0.7);}
#case_hero .next:hover, #case_hero .prev:hover {background:rgba(0,0,0,0.8);}
#case_hero .prev { left: -1209px; }
#case_hero .next { left: 1210px; }
.mask-left,.mask-right {position: absolute;height:38px; width:38px; top: 45%;}
.mask-left {background: url(../images/perv.png) no-repeat; right: 30px;}
.mask-right {background: url(../images/next.png) no-repeat; left: 30px;}

.advantage {background-color: #f8f8f8;margin-top: 200px;}
.advantage > div{max-width: 1200px;margin: 0px auto;}
.advantage .title {color: #51d5cb;margin-top: -120px;position: absolute;}
.advantage .title span {font-size: 28px;}
.advantage li {position: relative;clear: both;margin-bottom: 140px;}
.advantage li:last-child{margin-bottom: 60px;}
.advantage li::after {content: '';height: 0; display: block;clear: both;}
.advantage li .img img{ width: 100%;}
.advantage li .txt h2 {font-weight: bold;display: flex;align-items: center;}
.ul-icon{background-color: #51d5cb;}
.ul-icon ul{max-width: 1200px; margin: 0 auto;display: flex;align-items: center; justify-content: space-between;padding: 50px 0;flex-wrap: wrap;}
.ul-icon li {text-align: center;position: relative;margin-top: 20px;}
.ul-icon li a span {position: absolute;left: 50%;top: -20px;margin-left: -20px;
    width: 40px;height: 40px;border-radius: 20px;font-size: 22px;background-color: #ffb11b;color: #fff;font-family: 'Trebuchet MS', sans-serif;}
.ul-icon li a div{background-color: #fff;background-position: center;background-repeat: no-repeat;
  width: 120px;height: 120px;border-radius:60px; display: flex;align-items: center; justify-content: center;}
.ul-icon li:nth-child(1) a div{background-image: url(../images/icon1.png);}
.ul-icon li:nth-child(2) a div{background-image: url(../images/icon2.png);}
.ul-icon li:nth-child(3) a div{background-image: url(../images/icon3.png);}
.ul-icon li:nth-child(4) a div{background-image: url(../images/icon4.png);}
.ul-icon li:nth-child(5) a div{background-image: url(../images/icon5.png);}
.ul-icon li:nth-child(6) a div{background-image: url(../images/icon6.png);}
.ul-icon li:nth-child(1) a:hover div{background-image: url(../images/icon11.png);}
.ul-icon li:nth-child(2) a:hover div{background-image: url(../images/icon21.png);}
.ul-icon li:nth-child(3) a:hover div{background-image: url(../images/icon31.png);}
.ul-icon li:nth-child(4) a:hover div{background-image: url(../images/icon41.png);}
.ul-icon li:nth-child(5) a:hover div{background-image: url(../images/icon51.png);}
.ul-icon li:nth-child(6) a:hover div{background-image: url(../images/icon61.png);}
.ul-icon li a p {font-size: 16px;margin-top: 10px;color: #fff;}
.ul-icon li a:hover div {background-color: #089388;}
.ul-icon li a:hover p {font-size: 16px;margin-top: 10px;color: #089388;}
.new {margin: 30px auto;overflow: hidden;}
.new-list {display: none;}
.new-list.activedn{display: block;}
.new-list > ul {max-width: 1200px; min-height: 460px; width: 0 auto;position: relative;padding-left: 51%;}
.new-list > ul li{margin-bottom: 20px;}
.new-list > ul li:first-child{position: absolute;left: 0;width: 49%;}
.new-list > ul li a{display: flex; align-items: center;background-color: #f6f6f6;}
.new-list > ul li a:hover{background-color: #51d5cb; color: #fff;}
.new-list > ul li a:hover .new-time {border-right: 1px #74ddd5 solid;}
.new-time {border-right: 1px #e8e8e8 solid;padding: 25px 0;font-family: 'Trebuchet MS', sans-serif;line-height: 1.1; margin-right: 15px;width: 90px;text-align: center;}
.new-time span { font-size: 32px;font-weight: bold; display: block;text-align: center;letter-spacing: -2px;}
.new-time b{font-size: 12px;}
.new-text {width: 70%;}
.new-text p{color: #999; white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;}
.new-list > ul li a:hover .new-text p {color: #fff;}
.new-img {width: 100%;height: 360px;}
.new-img img{width: 100%;height: 100%;}
.new .more{margin: 30px auto 70px;}
.qa {display: flex;justify-content: space-between;flex-wrap: wrap;}

.qa > ul {width: 49%;}
.qa > ul h3 {height: 48px;background-color: #efefef;font-size: 16px;}
.qa > ul h3 span{display: inline-block;line-height: 48px;background-color: #74ddd5;color: #fff;padding: 0 30px;}
.qa > ul h3 a {float: right;line-height: 48px;padding-right: 15px;}
.qa > ul li {margin-top: 10px;margin-bottom: 30px;}
.qa > ul li h4, .qa > ul li p{margin-bottom: 10px; white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;width: 100%;}
.qa > ul li span {color: #fff;display: inline-block;padding: 3px 8px; margin-right: 10px;}
.qa > ul li h4 span {background-color: #999;}
.qa > ul li p span {background-color: #74ddd5;}

.gg{text-align: center;padding: 10px;background-color: #efefef;}
@media (min-width: 991px) {
  .advantage li .img{width: 49%; margin-top: -120px;position: relative;}
  .advantage li .img::after {content: '';height: 6px;width: 120px;border-radius: 3px;position: absolute;top: 60px; background-color: #51d5cb;}
  .advantage li .img.left {float: right; margin-left: 2%;}
  .advantage li .img.left::after{left: -100px;}
  .advantage li .img.right {float: left; margin-right: 2%;}
  .advantage li .img.right::after{right: -100px;}
  .advantage li h2 {padding-bottom: 20px; font-size: 24px;}
  .advantage li:first-child h2{padding-top: 70px;}
  .advantage li h2 img{margin-right: 10px;max-width: 34px;}
  .product-list li span{display: flex;align-items: center;justify-content: center;bottom: -10px;height: 0px;}
  .about .text {max-width: 720px;width:55%;position: relative;}
  .about .text p {position: absolute;bottom: -55px;right: 0;width: 100%;text-align: right;}
}
@media (max-width: 991px) {
  .banner .lSPager.lSpg{bottom: 5px;}
  .banner .lSSlideOuter .lSPager.lSpg>li a{width: 8px;height: 8px;}
  .search div p {font-size: 12px; }
  .search > div {display: block;}
  .search > div p {padding: 0 10px;}
  .search-form {width: calc(100% - 20px);margin: 8px auto;border-radius: 6px;border:0;}
  .product-list ul{padding: 0 10px;justify-content: space-between;}
  .product-list li {width: 48.5%;margin-bottom: 2%;margin-right: 0;}
  .product-list li span{bottom: 0px;height: 32px;line-height: 32px;}
  .advantage {margin-top: 120px;}
  .advantage .title {margin-top: -90px;margin-left: 20px;}
  .advantage ul{padding: 20px;}
  .advantage li {margin-bottom: 15px; display: flex;justify-content: space-between;align-items: center;}
  .advantage li .img{width: 40%;}
  .advantage li .txt{width: 56%;}
  .advantage li .txt h2 {padding-bottom: 20px; font-size: 20px;}
  .case{display: none;}
}
@media (max-width: 768px) {
  .about{margin: 0; padding: 10px;}
  .about .title {padding: 10px 0;}
  .about p {width:100%;}
  .about-more {margin: 10px 0;}
  .about-img01 { position: static;width: 100%;height: 180px;overflow: hidden;}
  .about-img02 {padding: 15px;text-align: center;}
  .about-img02 ul{width: 100%;}
  .about-img02 li {width: 32%;}
  .about-img02 h3 i{font-size: 32px;line-height: 1.2;}
  .about-img02 h3 span{font-size: 12px;line-height: 1.4;}
  .product-tabs li {padding: 5px 10px;}
  .advantage li {display: block;}
  .advantage li .img{width: 100%;}
  .advantage li .txt{width: 100%;}
  .advantage li .txt h2 {padding: 10px 0; font-size: 16px;}
  .advantage li h2 img{ margin-right: 10px;max-width: 24px;}
  .new-tabs {justify-content: space-around;}
  .new-tabs li {padding: 5px 15px;margin-right: 0;}
  .ul-icon ul{padding: 20px 0;}
  .ul-icon li {width: 30%;}
  .ul-icon li a span {top: -10px;margin-left: -10px;width: 24px;height: 24px;border-radius: 12px;font-size: 14px;line-height: 24px;}
  .ul-icon li a div{width: 80px;height: 80px;margin: 0 auto;background-size: 70%;}
  .ul-icon li a div img{width: 54px; }
  .ul-icon li p {font-size: 14px;}
  .new-list > ul {max-width: 1200px; width: 0 auto;padding-left: 0;}
  .new-list > ul > li {margin-bottom: 10px;}
  .new-list > ul > li:first-child{position: static;width:100%;}
  .new-time {padding: 15px 0;}
  .new-img {width: 100%;height: auto;}
  .about .more, .new .more{margin: 20px auto;}
  .qa > ul {width: 96%;margin: 0 auto;}
}
@media (max-width: 350px) {
  .product-tabs li {padding: 5px; font-size: 12px;}
  
  .about-img02 h3 span{font-size: 12px;}
  .about-img02 p{font-size:12px;}
}


@media (max-width: 1200px) {
  .mask-left {right: -10%;}
  .mask-right {left: -10%;}
}
@media (max-width: 1100px) {
  .mask-left {right: -10%;}
  .mask-right {left: -20%;}
}