/*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: 54px;height: 7px;background:#fff;}
.banner .lSSlideOuter .lSPager.lSpg > li.active a,.banner  .lSSlideOuter .lSPager.lSpg>li:hover a{background-color:#d4b367;}

.intro {max-width: 1200px;margin: 30px auto 80px;}
.intro ul {display: flex;align-items: center; justify-content: space-between;}
.intro li {width: 25%;  border: 1px solid #fff;text-align: center;padding: 60px 0;cursor: pointer;color: #666;}
.intro li:hover{border: 1px solid #d4b367;}
.intro li div{width: 40px;height: 6px;margin: 30px auto;border-radius: 3px;background-color: #b2b2b2;}
.intro li:hover div{background-color: #d4b367;}
.intro li h3 {font-size: 16px; font-weight: bold;margin-bottom: 10px;}
.intro li:hover h3, .intro li:hover h4 {color: #d4b367;}

/*title*/
.title {font-weight: bold;font-size: 1.8rem;line-height: 1.2;text-align: center;margin-top: 50px;}
.title h3{font-size: 2rem;font-weight: bold;color: #222;}
.title h4{display: block;color: #666;font-size: 1rem;font-weight: normal;margin-top: 15px;}
.title > p{margin: 40px auto;width: 55px;height: 4px;background-color: #d4b367;}
/* .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: #d4b367;color: #fff;border: 1px solid #d4b367;} */

/*about*/
.about{ position: relative;display: flex;align-items: center;background-color: #d4b367;}
.about .ship{width: 50%;}
.about .ship img {width: 100%;}
.about .text{max-width: 540px;width: 47%;margin-left: 3%;color: #fff;line-height: 1.6;}
.about .text h3 {font-size: 24px;margin-bottom: 10px;}
.about .text h4 {font-size: 18px;margin-bottom: 25px;}
.about .more {display: inline-block;padding: 10px 30px; margin: 25px 0 40px; background-color: #261f0e;color: #fff;}
.about .more:hover {background-color: #fff;color: #d4b367;}
.about .more .fa{margin-left: 15px;}
.about .text ul {display: flex;overflow: hidden;}
.about .text ul li:first-child{margin-left: -6%;}
.about .text ul li {width: 33%; border-left: 1px solid #fff;text-align: center;line-height: 3;}
.about .text li a{color: #fff;}
.about .text li a:hover {color: #666;}
/*product*/
.new {max-width: 1200px; margin: 0 auto;}
.product-tabs{display: flex; justify-content: center;align-items: center;max-width:900px; margin: 20px auto 45px;}
.product-tabs li, .new-tabs li {cursor: pointer;padding: 6px 30px;margin-right: 5px;border:1px solid #fff;}
.product-tabs li:hover, .product-tabs li.on, .new-tabs li:hover, .new-tabs li.on{border:1px solid #d4b367;color: #d4b367;}
.new-tabs{display: flex; justify-content: space-around;align-items: center;max-width:500px; margin: 20px auto 45px;}
.product {width: 100%;overflow: hidden;}
#product_hero { width: 1200px; height: 440px; margin: 0 auto; position: relative; }
#product_hero li {position: absolute; top: 0; left: 0; width: 1200px; height: 440px; overflow: hidden; left: 2400px; }
#product_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;}
#product_hero img { width: 1180px; height: 440px; margin-left: 10px;}
#product_hero .hero-wrap { overflow: visible; position: absolute; }
#product_hero .next, #product_hero .prev { position: absolute; top: 0;  width: 1200px; height: 440px;background:rgba(0,0,0,0.7);}
#product_hero .next:hover, #product_hero .prev:hover {background:rgba(0,0,0,0.8);}
#product_hero .prev { left: -1209px; }
#product_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;}

.case-list{max-width: 1200px;margin: 0 auto;}
.case-list ul {display: flex;flex-wrap: wrap;}
.case-list li {width: 32%;margin-right: 1.5%; margin-bottom: 1.5%;}
.case-list li:nth-child(3n){margin-right: 0;}
.case-list li a img {width: 100%;}
.case-list li p{padding: 20px 5px;border-bottom: 1px solid #fff;}
.case-list li:hover p {border-bottom: 1px solid #d4b367;background: url(../images/ico5.png) no-repeat right center;}

.new{margin-bottom: 50px;}
.new-list {display: none;}
.new-list.activedn{display: flex;justify-content: space-between;}
.new-img {width: 580px; position: relative;}
.new-img img{width: 100%;}
.new-img h3{position: absolute;bottom: 0;background-color: rgba(0,0,0,0.6);padding: 15px;}
.new-img h3 a{color: #fff;}
.new-img h3 a:hover{color: #d4b367;}
.new-list > ul {flex: 1;padding-left: 20px;}
.new-list > ul li{margin-bottom: 20px;}
.new-list > ul li a{display: flex; align-items: center;color: #666;padding: 10px;}
.new-list > ul li a:hover{background-color: #f1f1f1;}
.new-time {border-right: 1px #e8e8e8 solid;padding: 25px 0;font-family: 'Trebuchet MS', sans-serif;padding-left: 25px;
  line-height: 1.1; margin-right: 20px;width: 110px; color: #d4b367;}
.new-time span { font-size: 24px;font-weight: bold; display: block;letter-spacing: -2px;}
.new-time b{font-size: 12px;}
.new-text {flex: 1;}
.new-text p{color: #999; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; }

.qa > h3 {height: 48px;background-color: #efefef;font-size: 16px;width: 100%;}
.qa > h3 span{display: inline-block;line-height: 48px;background-color: #d4b367;color: #fff;padding: 0 30px;}
.qa > h3 a {float: right;line-height: 48px;padding-right: 15px;}
.qa > ul {width: 100%;display: flex;justify-content: space-between;flex-wrap: wrap;}
.qa > ul li {width: 49%; margin: 20px 0;}
.qa > ul li h4, .qa > ul li p{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: #d4b367;}

@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: #d4b367;}
  .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;}
}
@media (max-width: 991px) {
  .banner .lSPager.lSpg{bottom: 5px;}
  .banner .lSSlideOuter .lSPager.lSpg>li a{width: 8px;height: 8px;}
  .intro ul {flex-wrap: wrap;}
  .intro ul li {width: 50%; padding: 20px 0;}
  .intro ul li h3 {font-size: 14px;margin-bottom: 0;}
  .intro li div{margin: 15px auto 10px;height: 4px;}
  .about{ display: block;}
  .about .ship{width: 100%;}
  .about .text{max-width: 1000px;width:100%;}
  .about .text h3 {margin: 10px 0;}

  .case-list ul{padding: 0 10px;justify-content: space-between;}
  .case-list li {width: 48.5%;margin-bottom: 2%;margin-right: 0;}
  .case-list li p{line-height: 16px;padding: 10px 0;}
  .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;}
  .product{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; margin-bottom: 10px;}
  .new-tabs li {padding: 5px 15px;margin-right: 0;}


  .new {margin-bottom: 10px;}
  .new-list.activedn{display: block;}
  .new-img {width:100%; position: relative;}
  .new-list > ul {padding-left: 0;}
  .new-list > ul li {margin-bottom: 10px;}
  .new-time {padding-left: 10px;width:90px;}
  .about .more, .new .more{margin: 20px auto;}
  .qa > ul {width: 96%;margin: 0 auto;display: block;}
  .qa > ul li {width: 100%;}
}
@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%;}
}