/* 首页 */

main.index {

  padding-top: 0;

}

main.index .index-banner{

  position: relative;

}

main.index .index-banner .swiper-container{

  /* height: 774px; */
  height: 680px;
  /* height: calc(100vh - 550px - 116px); */

}
@media screen and (min-width: 2200px) {
  main.index .index-banner .swiper-container {
    height: calc(100vh - 550px - 116px);
  }
}
@media screen and (max-width: 1600px) {
  main.index .index-banner .swiper-container {
    height: 480px;
  }
}

main.index .index-banner .swiper-container .swiper-slide {

  position: relative;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

}

main.index .index-banner .swiper-container .swiper-slide img{

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  display: block;

  height: 100%;

}

main.index .index-banner .banner-notice{

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  z-index: 9;

  padding: 20px 0;

  font-size: 24px;

  font-family: Microsoft YaHei;

  font-weight: 400;

  color: #FFFFFF;

  line-height: 50px;

  background: rgba(0, 0, 0, 0.58);

  overflow: hidden;

}

main.index .index-banner .banner-notice .notice-wrapper{

  height: 50px;

  margin: 0 auto;

  white-space: nowrap;

  position: relative;

}

main.index .index-banner .banner-notice .notice-wrapper p{

  position: absolute;

  top: 0;

  left: 100%;

}

/* 定义第一个span的animation：时长 动画名字 匀速 循环 正常播放 */

.first-marquee{

  -webkit-animation: 45s first-marquee linear infinite normal;

  animation: 45s first-marquee linear infinite normal;

  padding-right: 70%;

}

@keyframes first-marquee {

  0% {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

  }

/* 向左移动 */

  100% {

    -webkit-transform: translate3d(-200%, 0, 0);

    transform: translate3d(-200%, 0, 0);

    display: none;

  }

}

.second-marquee{

/* 因为要在第一个span播完之前就得出现第二个span，所以就延迟12s才播放 */

  -webkit-animation: 45s first-marquee linear 21s infinite normal;

  animation: 45s first-marquee linear 21s infinite normal;

  padding-right: 53%;

}

@keyframes second-marquee {

  0% {

    -webkit-transform: translate3d(0%, 0, 0);

    transform: translate3d(0%, 0, 0);

  }

  100% {

    -webkit-transform: translate3d(-200%, 0, 0);

    transform: translate3d(-200%, 0, 0);

    display: none;

  }

}

main.index .index-box2{

  display: flex;

}

main.index .index-box2 .box2-item{

  width: 50%;

  display: block;

  height: 550px;

  position: relative;

  overflow: hidden;

  transition: all 0.5s;

}

main.index .index-box2 .box2-item .bg{

  display: block;

  width: 100.2%;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  transition: all 0.5s;

  z-index: 2;

  border: 0;

  padding: 0;

}

main.index .index-box2 .box2-item .mask{

  position: absolute;

  top: 0%;

  left: 0;

  background: rgba(0, 0, 0, 0.48);

  width: 100%;

  height: 100%;

  opacity: 0;

  z-index: 3;

  transition: all 0.5s;

}

main.index .index-box2 .box2-item .txt-box{

  z-index: 4;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  color: #ffffff;

}

main.index .index-box2 .box2-item .txt-box h4{

  font-size: 60px;

  font-family: Microsoft YaHei;

  font-weight: bold;

  color: #FFFFFF;

  text-align: center;

  white-space: nowrap;

  transition: all 0.5s;

}

main.index .index-box2 .box2-item .txt-box p{

  font-size: 28px;

  font-family: Microsoft YaHei;

  font-weight: 400;

  color: #FFFFFF;

  text-align: center;

  white-space: nowrap;

  transition: all 0.5s;

  margin-top: 20px;

}

main.index .index-box2 .box2-item.active{

  width: 53%;

}

main.index .index-box2 .box2-item.active .mask{

  opacity: 1;

}

main.index .index-box2 .box2-item.active .txt-box h4{

  font-size: 65px;

}

main.index .index-box2 .box2-item.active .txt-box p{

  font-size: 28px;

}

main.index .index-box2 .box2-item.no-active{

  width: 47%;

}

main.index .index-box2 .box2-item.no-active .mask{

  opacity: 0;

}

main.index .index-box2 .box2-item.no-active .txt-box h4{

  font-size: 55px;

}

main.index .index-box2 .box2-item.no-active .txt-box p{

  font-size: 28px;

}







main.index .index-box3{

  background: #42B2A7;

} 

main.index .index-box3 .box3-container{

  width: 1200px;

  margin: 0 auto;

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 20px 0;

}

main.index .index-box3 .box3-container .item{

  display: flex;

  align-items: center;

  margin-right: 115px;

}

main.index .index-box3 .box3-container .item:last-child{

  margin-right: 0;

}

main.index .index-box3 .box3-container .item .icon{

  display: block;

  width: 60px;

  height: 60px;

  margin-right: 12px;

}

main.index .index-box3 .box3-container .item .txt-box .top-t {

  font-size: 16px;

  font-weight: normal;

  font-style: italic;

  color: #ffffff;

}

main.index .index-box3 .box3-container .item .txt-box .top-t span {

  font-size: 40px;

  margin-right: 5px;

  font-weight: normal;

}
 
main.index .index-box3 .box3-container .item .txt-box .en{

  font-size: 18px;

  font-family: Microsoft YaHei;
 
  font-weight: 400;

  color: #ffffff;

}

main.index .index-box4 {

  background: url(/static/web/images/index-img3.jpg?v1) no-repeat center center;

  background-size: cover;

  padding: 100px 0;

}

main.index .index-box4 .box4-container{

  width: 1200px;

  margin: 0 auto;

  display: flex;

  justify-content: space-between;

}

main.index .index-box4 .box4-container .left {

  width: 50%;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}

main.index .index-box4 .box4-container .left .tit{}

main.index .index-box4 .box4-container .left .tit h2{

  font-size: 63px;

  font-family: Microsoft YaHei;

  font-weight: bold;

  color: #FFFFFF;

  margin-bottom: 20px;

}

main.index .index-box4 .box4-container .left .tit h4{

  font-size: 40px;

  font-family: Microsoft YaHei;

  font-weight: 400;

  color: #FFFFFF;

}

main.index .index-box4 .box4-container .left .txt-box{

  background: url(/static/web/images/index-img4.jpg) no-repeat center center;

  background-size: cover;

  width: 100%;

  padding: 55px;

  box-sizing: border-box;

  font-size: 18px;

  font-family: Microsoft YaHei;

  font-weight: 400;

  color: #662B00;

  line-height: 26px;

}

main.index .index-box4 .box4-container .right {

  width: 45%;

  display: flex;

  overflow: hidden;

}

main.index .index-box4 .box4-container .right img{

  display: block;

  /* width: 100%; */

  height: 450px;

}

main.index .index-box5 {

  background: #E2711D;

  padding: 20px 0;

}

main.index .index-box5 p{

  font-size: 22px;

  font-family: Microsoft YaHei;

  font-weight: 400;

  color: #FFFFFF;

  text-align: center;

}

main.index .index-box6{}

main.index .index-box6 .box6-container{

  display: flex;

}

main.index .index-box6 .box6-container .news{

  width: 50%;

  background: url(/static/web/images/index-img8.jpg) no-repeat center center;

  background-size: cover;

  display: flex;

  padding: 80px 100px 50px;

  box-sizing: border-box;

}

main.index .index-box6 .box6-container .news h4.en{

  font-size: 51px;

  font-family: Microsoft YaHei;

  font-weight: 400;

  color: #FFFFFF;

  text-transform: uppercase;

  margin-right: 50px;

}

main.index .index-box6 .box6-container .news h4.en img{

  display: block;

  width: 35px;

}

main.index .index-box6 .box6-container .news h4.cn{

  width: 50px;

  text-align: center;

  font-size: 50px;

  line-height: 54px;

  font-family: Microsoft YaHei;

  font-weight: bold;

  color: #FFFFFF;

}

main.index .index-box6 .box6-container .news .news-box{

  margin-left: 60px;

  flex: 1;

}

main.index .index-box6 .box6-container .news .news-box .more{

  text-align: right;

  margin-bottom: 10px;

}

main.index .index-box6 .box6-container .news .news-box .more a{

  display: inline-block;

  font-size: 20px;

  font-family: Microsoft YaHei;

  font-weight: 400;

  text-decoration: underline;

  color: #FFFFFF;

}

main.index .index-box6 .box6-container .news .news-box .news-item{

  display: flex;

  padding: 10px 0;

  border-bottom: 1px solid #492100;

  color: #ffffff;

  font-size: 20px;

  margin-bottom: 30px;

}

main.index .index-box6 .box6-container .news .news-box .news-item .tit{

  flex: 1;

  margin-right: 30px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

main.index .index-box6 .box6-container .info{

  width: 50%;

  background: url(/static/web/images/index-img9.jpg) no-repeat center center;

  background-size: cover;

}

main.index .index-box6 .box6-container .info .container{

  width: 70%;

  margin: 0 auto;

  padding: 80px 0 ;

}

main.index .index-box6 .box6-container .info h4.cn {

  font-size: 60px;

  font-family: Microsoft YaHei;

  font-weight: bold;

  color: #FFFFFF;

}

main.index .index-box6 .box6-container .info h4.en{

  font-size: 45px;

  font-family: Microsoft YaHei;

  font-weight: normal;

  color: #FFFFFF;

  text-transform: uppercase;

}

main.index .index-box6 .box6-container .info .txt{

  margin-top: 60px;

  font-size: 18px;

  font-family: Microsoft YaHei;

  font-weight: 400;

  color: #FFFFFF;

  text-indent: 2em;

  line-height: 30px;

}

main.index .index-box7 {

  background: url(/static/web/images/index-img10.jpg) no-repeat center center;

  background-size: cover;

}

main.index .index-box7 .container {

  width: 1200px;

  margin: 0 auto;

  padding: 80px 0;

}

main.index .index-box7 .container h4.cn{

  font-size: 60px;

  font-family: Microsoft YaHei;

  font-weight: bold;

  color: #FFFFFF;

}

main.index .index-box7 .container h4.en{

  font-size: 45px;

  font-family: Microsoft YaHei;

  font-weight: normal;

  color: #FFFFFF;

  margin-top: 10px;

  text-transform: uppercase;

}

main.index .index-box7 .container .contact-box{

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-top: 50px;

}

main.index .index-box7 .container .contact-box .item{

  display: flex;

  align-items: center;

  font-size: 22px;

  font-family: Microsoft YaHei;

  font-weight: bold;

  color: #FFFFFF;

  padding-right: 40px;

  white-space: nowrap;

}

main.index .index-box7 .container .contact-box .item.address{

  white-space: pre-wrap;

}

main.index .index-box7 .container .contact-box .item:last-child{

  padding-right: 0;

}

main.index .index-box7 .container .contact-box .item .icon{

  display: block;

  width: 40px;

  margin-right: 10px;

}



/* 联系我们 */

main.contact{}

main.contact .banner{

  margin-bottom: 40px;

  max-height: 680px;

  overflow: hidden;

}

main.contact .banner img{

  display: block;

  width: 100%;

}

main.contact .page-container{

  background: url(/static/web/images/about-bg.png) no-repeat center center;

  background-size: cover;

  padding: 80px 0;

}

main.contact .page-container .contact-box1{

  width: 1200px;

  margin: 0 auto;

  box-sizing: border-box;

  background: url(/static/web/images/about-img1.jpg) no-repeat center center;

  background-size: cover;

  border-radius: 10px;

  padding: 50px;

  display: flex;

  align-items: center;

}

main.contact .page-container .contact-box1 .left{

  flex: 1;

  margin-right: 40px;

}

main.contact .page-container .contact-box1 h4.cn{

  font-size: 60px;

  font-family: Microsoft YaHei;

  font-weight: bold;

  color: #FFFFFF;

}

main.contact .page-container .contact-box1 h4.en{

  font-size: 45px;

  font-family: Microsoft YaHei;

  font-weight: normal;

  color: #FFFFFF;

  margin-top: 10px;

  text-transform: uppercase;

}

main.contact .page-container .contact-box1 .contact-info{

  display: flex;

  flex-wrap: wrap;

  width: 100%;

}

main.contact .page-container .contact-box1 .contact-info .row{

  display: flex;

  width: 100%;

  margin-top: 40px;

}

main.contact .page-container .contact-box1 .contact-info .item.w50{

  width: 50%;

}

main.contact .page-container .contact-box1 .contact-info .item.w100{

  width: 100%;

}

main.contact .page-container .contact-box1 .contact-info .item{

  display: flex;

  align-items: center;

  font-size: 26px;

  font-family: Microsoft YaHei;

  font-weight: bold;

  color: #FFFFFF;

  padding-right: 40px;

  white-space: nowrap;

}

main.contact .page-container .contact-box1 .contact-info .item img{

  display: block;

  width: 45px;

  margin-right: 10px;

}



main.contact .page-container .contact-box1 .right{

  font-size: 20px;

  font-family: Microsoft YaHei;

  font-weight: 400;

  color: #FFFFFF;

  text-align: center;

}

main.contact .page-container .contact-box1 .right img{

  display: block;

  width: 250px;

  margin: 0 auto 20px;

}

main.contact .page-container .contact-box2{

  padding: 80px 0;

}

main.contact .page-container .contact-box2 .map{

  width: 100%;

  height: 500px;

}



/* 服务 */

main.service {

  background: url(/static/web/images/service-bg.png) no-repeat center center;

  background-size: 100% auto;

}

main.service .banner{

  width: 100%;

  margin-bottom: 40px;

}

main.service .banner img{

  display: block;

  width: 100%;

}

main.service .service-container{

  width: 1200px;

  margin: 0 auto;

  display: flex;

  padding-bottom: 80px;

}

main.service .service-container .left{

  width: 250px;

  margin-right: 50px;

}

main.service .service-container .left h4{

  background: #FF900E;

  display: flex;

  align-items: center;

}

main.service .service-container .left h4{

  height: 56px;

  background: #FF900E;

  display: flex;

  align-items: center;

  border-top-left-radius: 30px;

  padding: 0 25px;

  font-size: 18px;

  font-family: Microsoft YaHei;

  font-weight: bold;

  color: #FFFFFF;

}

main.service .service-container .left h4 .icon-menu{

  margin-right: 10px;

}

main.service .service-container .left .nav-list{

  background: #F7B716;

  padding: 0 25px;

}

main.service .service-container .left .nav-list .nav-item{

  display: block;

  padding: 20px 0;

  font-size: 18px;

  font-family: Microsoft YaHei;

  font-weight: bold;

  color: #FFFFFF;

  border-bottom: 1px solid #ffffff;

}

main.service .service-container .left .nav-list .nav-item.active{

  font-size: 24px;

}

main.service .service-container .left .nav-list .nav-item:last-child{

  border-bottom: none;

}

main.service .service-container .right{

  flex: 1;

  position: relative;

}

main.service .service-container .right h4{

  text-align: center;

  font-size: 32px;

  font-family: Microsoft YaHei;

  font-weight: bold;

  color: #000000;

  padding: 20px 0;

  border-bottom: 1px solid #E2711D;

}

main.service .service-container .right .box{

}

main.service .service-container .right .box .content{

  font-size: 20px;

  font-family: Microsoft YaHei;

  font-weight: 400;

  color: #000000;

  line-height: 40px;

  padding: 30px 0;

  text-indent: 2em;

}

main.service .service-container .right .box .img-box{

  display: block;

  width: 100%;

}

main.service .service-container .right .box .img-box img{

  display: block;

  width: 100%;

}

main.service .service-container .right .prev-btn{

  font-size: 120px;

  font-weight: bold;

  color: #FF900E;

  width: 120px;

  height: 120px;

  line-height: 105px;

  cursor: pointer;

  text-align: center;

  position: absolute;

  top: 430px;

  left: -150px;

}

main.service .service-container .right .next-btn{

  font-size: 120px;

  font-weight: bold;

  color: #FF900E;

  width: 120px;

  height: 120px;

  line-height: 105px;

  cursor: pointer;

  text-align: center;

  position: absolute;

  top: 430px;

  right: -150px;

}



/* 产品 */

main.product .product-bigBox{

  background: url(/static/web/images/product_bg.png) no-repeat center center;

  background-size: 100% auto;

}

main.product .banner{

  width: 100%;

  margin-bottom: 40px;

}

main.product .banner img{

  display: block;

  width: 100%;

}

main.product .product-container{

  width: 1200px;

  margin: 0 auto;

  display: flex;

}

main.product .product-container .left{

  width: 250px;

  margin-right: 50px;

}

main.product .product-container .left h4{

  background: #FF900E;

  display: flex;

  align-items: center;

}

main.product .product-container .left h4{

  height: 56px;

  background: #FF900E;

  display: flex;

  align-items: center;

  border-top-left-radius: 30px;

  padding: 0 25px;

  font-size: 18px;

  font-family: Microsoft YaHei;

  font-weight: bold;

  color: #FFFFFF;

}

main.product .product-container .left h4 .icon-menu{

  margin-right: 10px;

}

main.product .product-container .left .nav-list{

  background: #F7B716;

  padding: 0 25px;

}

main.product .product-container .left .nav-list .nav-item{

  display: block;

  padding: 20px 0;

  font-size: 18px;

  font-family: Microsoft YaHei;

  font-weight: bold;

  color: #FFFFFF;

  border-bottom: 1px solid #ffffff;

}

main.product .product-container .left .nav-list .nav-item.active{

  font-size: 24px;

}

main.product .product-container .left .nav-list .nav-item:last-child{

  border-bottom: none;

}

main.product .product-container .right{

  flex: 1;

}

main.product .product-container .right .nav-box .nav-container{

  width: 100%;

}

main.product .product-container .right .nav-box .nav-container .item{

  font-size: 18px;

  font-family: Microsoft YaHei;

  font-weight: 400;

  color: #333333;

  padding: 0;

  margin-right: 30px;

  line-height: 40px;

}

main.product .product-container .right .nav-box .nav-container .item:last-child{

  margin-right: 0;

}

main.product .product-container .right .nav-box .nav-container .item.active{

  font-size: 18px;

  font-family: Microsoft YaHei;

  font-weight: 400;

  color: #333333;

}

main.product .product-container .right .product-list{

  display: flex;

  flex-wrap: wrap;

  padding: 30px 0;

}

main.product .product-container .right .product-list .product-item{

  width: 23.5%;

  margin-right: 2%;

}

main.product .product-container .right .product-list .product-item:nth-child(4n){

  margin-right: 0;

}

main.product .product-container .right .product-list .product-item .img-box{

  width: 100%;
  height: 200px;
  overflow: hidden;
  margin-right: 0;

  border: 1px solid #ccc;
  position: relative;
}

main.product .product-container .right .product-list .product-item .img-box img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: block;
  width: 100%;
  height: auto;
}

main.product .product-container .right .product-list .product-item .title{

  padding: 10px 0;

  font-size: 14px;

  text-overflow: -o-ellipsis-lastline;

   overflow: hidden;

   text-overflow: ellipsis;

   display: -webkit-box;

   -webkit-line-clamp: 2;

   line-clamp: 2;

   -webkit-box-orient: vertical;

}

main.product .product-container .right .product-list .product-item .imgs{
  display: flex;
  padding: 10px 0 0;
}
main.product .product-container .right .product-list .product-item .imgs .imgs-item{
  display: block;

  width: 40px;
  height: 40px;

  margin-right: 10px;

  border: 2px solid transparent;

  border-radius: 4px;

  overflow: hidden;

  cursor: pointer;
  position: relative;
}
main.product .product-container .right .product-list .product-item .imgs img{
  display: block;
  width: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

main.product .product-container .right .product-list .product-item .imgs .imgs-item:last-child{
  margin-right: 0px;
}

main.product .product-container .right .product-list .product-item .imgs .imgs-item.active{

  border-color: #E2711D;

}





/* about */

main.about{

  background: url(/static/web/images/bg1.png) no-repeat center center;

  background-size: 100% auto;

}

main.about .banner{

  margin-bottom: 80px;

}

main.about .banner img{

  display: block;

  width: 100%;

}

main.about .page-container{

  width: 1200px;

  margin: 0 auto;

  padding-bottom: 0;

  position: relative;

}

main.about .page-container .img-box {}

main.about .page-container .img-box img{

  display: block;

  width: 700px;

}

main.about .page-container .txt-box{

  position: relative;
  top: -320px;
  left: 489px;
  width: 630px;

}

main.about .page-container .txt-box h2{

  font-size: 36px;

  margin-bottom: 10px;

  text-align: right;

  font-family: Microsoft YaHei;

  font-weight: bold;

  color: #FF9339;

}

main.about .page-container .txt-box h4{

  text-transform: uppercase;

  font-size: 16px;

  font-family: Microsoft YaHei;

  font-weight: 400;

  color: #FF9339;

  text-align: right;

}

main.about .page-container .txt-box .content{

  background: #ffffff;

  padding: 30px 0 20px 40px;

  font-size: 18px;

  font-family: Microsoft YaHei;

  font-weight: 400;

  color: #000000;

  line-height: 40px;

  text-indent: 2em;

  max-width: 590px;

  margin-top: -15px;

}



/* news */

main.news{

  background: url(/static/web/images/bg1.png) no-repeat center center;

  background-size: 100% auto;

}

main.news .banner{

  margin-bottom: 80px;

}

main.news .banner img{

  display: block;

  width: 100%;

}

main.news .page-container{

  width: 1200px;

  margin: 30px auto;

  padding-bottom: 80px;

}

main.news .page-container .news-list {

  display: flex;

  flex-wrap: wrap;

  padding: 40px 0 0;

}

main.news .page-container .news-list .news-item {

  display: block;

  width: 30%;

  margin-right: 5%;

  margin-bottom: 5%;

  font-size: 16px;

}

main.news .page-container .news-list .news-item:nth-child(3n) {

  margin-right: 0;

}

main.news .page-container .news-list .news-item .img-box {

  width: 100%;

}

main.news .page-container .news-list .news-item .img-box img{

  display: block;

  width: 100%;

}

main.news .page-container .news-list .news-item .text{

	padding: 10px;

	padding-top: 0px;

}

main.news .page-container .news-list .news-item .text .time{

	padding-top: 10px;

  display: block;

  font-size: 14px;

  font-family: Microsoft YaHei;

  font-weight: 400;

  color: #E2711D;

}

main.news .page-container .news-list .news-item .text .title {

  font-size: 20px;

  font-family: Microsoft YaHei;

  font-weight: 400;

  color: #E2711D;

  line-height: 30px;

  display: block;

}

main.news-details h2{}

main.news-details h2 p{

  font-size: 26px;

  padding: 5px 0;

  display: inline-block;

  border-bottom: 2px solid #333;

}

main.news-details h4 {

  text-align: center;

  font-size: 18px;

  margin: 20px 0 10px;

}

main.news-details h6 {

  text-align: center;

  font-size: 14px;

  font-weight: normal;

}

main.news-details .news-details-content {

  font-size: 16px;

}

main.news-details .news-details-content p{

}

main.news-details .back{

  display: block;

  width: 155px;

  height: 46px;

  line-height: 46px;

  background: linear-gradient(74deg, #6F4CD6 0%, #FF5B7A 100%);

  border-radius: 5px;

  text-align: center;

  color: #ffffff;

  font-size: 18px;

  transition: all 0.3s;

  margin: 30px auto 0;

  cursor: pointer;

}