html, body {
    height: 100%;
}
body {
    padding-top: 0 !important;
}
section.banner {
    overflow: hidden;
    height: 100%;
    position: relative;
}
section.banner .swiper-container {
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}
section.banner .swiper-container .swiper-slide {
    width: 100%;
    height: 100%;
    text-align: center;
    background: #333 no-repeat center / cover;
    position: relative;
}

section.banner .swiper-container .swiper-slide img{   width: 100%;height: 100%;
}

.pcban{display: block}
.shban{display: none}




section.banner .swiper-container .swiper-slide div.wrapper {
    position: absolute;
    left: 7.3%;
    top: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    overflow: hidden;
    width: 85.4%;
    text-align: left;
}
section.banner .swiper-container .swiper-slide div.wrapper h3 {
    font-size: 68px;
    font-family: 'manrope-light';
}
section.banner .swiper-container .swiper-slide div.wrapper p {
    font-size: 58px;
    line-height: 1.4;
    font-weight: normal;
    font-family: 'PingFangSC-Light';
}
section.banner .swiper-container .swiper-slide div.wrapper p span{
    display: block;
}
section.banner .swiper-container .swiper-slide div.wrapper .more {
    font-size: 18px;
    color: #fff;
    font-weight: normal;
    display: block;
    width: 190px;
    height: 70px;
    line-height: 70px;
    background: rgb(255, 255, 255, 0.1);
    position: relative;
    margin-top: 110px;
    text-align: center;
}
section.banner .swiper-container .swiper-slide div.wrapper .more::before {
    display: block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: #fff;
    transition: all 0.2s;
}
section.banner .swiper-container .swiper-slide div.wrapper .more:hover::before {
    width: 100%;
}
section.banner .swiper-container .swiper-slide div.wrapper .more:hover span {
    color: #333;
    position: relative;
    z-index: 10;
}
section.banner .swiper-container .info {
    position: absolute;
    right: 40px;
    bottom: 50px;
    z-index: 10;
    min-width: 110px;
}
section.banner .swiper-container .info .prev, section.banner .swiper-container .info .next {
    display: inline-block;
    width: 16px;
    height: 27px;
    line-height: 1;
    font-size: 30px;
    float: left;
    color: #fff;
}
section.banner .swiper-container .info .prev i.iconfont, section.banner .swiper-container .info .next i.iconfont {
    font-size: inherit;
    float: left;
    margin-top: -4px;
    opacity: 0.5;
    transition: all .2s;
}
section.banner .swiper-container .info .prev:hover i.iconfont,
section.banner .swiper-container .info .next:hover i.iconfont{
    opacity: 1; 
}
section.banner .swiper-container .info .pagination {
    float: left;
}
section.banner .swiper-pagination-bullet {
    background: none;
    font-size: 20px;
    color: #fff;
    width: auto;
    height: auto;
    border: none;
    margin: 0 8px;
    opacity: .5;
    line-height: 22px;
    outline: none;
    font-family: 'manrope-light';
}
section.banner .swiper-pagination-bullet:hover,
section.banner .swiper-pagination-bullet.swiper-pagination-bullet-active {
    /*display: none;*/
    opacity: 1;
}
section.banner .swiper-pagination-bullet:focus {}
.circleProgress_wrapper {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 40px;
    bottom: 50px;
    z-index: 10;
    transform: rotate(-45deg);
}
.circleProgress_wrapper .round {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -3px;
    margin-top: -3px;
}
.circleProgress_wrapper .wrapper {
    width: 20px;
    height: 40px;
    position: absolute;
    top: 0;
    overflow: hidden;
}
.circleProgress_wrapper .right {
    right: 0;
}
.circleProgress_wrapper .left {
    left: 0;
}
.circleProgress_wrapper .circleProgress {
    width: 40px;
    height: 40px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 0;
    -webkit-transform: rotate(45deg);
    box-sizing: border-box;
}
.circleProgress_wrapper .rightcircle {
    border-top: 2px solid #545965;
    border-right: 2px solid #545965;
    right: 0;
}
.circleProgress_wrapper .leftcircle {
    border-bottom: 2px solid #545965;
    border-left: 2px solid #545965;
    left: 0;
}
.circleProgress_wrapper.on .rightcircle {
    animation: circleProgressLoad_right 5s linear infinite;
    -webkit-animation: circleProgressLoad_right 5s linear infinite;
}
.circleProgress_wrapper.on .leftcircle {
    animation: circleProgressLoad_left 5s linear infinite;
    -webkit-animation: circleProgressLoad_left 5s linear infinite;
}
@-webkit-keyframes circleProgressLoad_right {
    0% {
        -webkit-transform: rotate(45deg);
    }
    50%, 100% {
        -webkit-transform: rotate(225deg);
    }
}
@-webkit-keyframes circleProgressLoad_left {
    0%, 50% {
        -webkit-transform: rotate(45deg);
    }
    100% {
        -webkit-transform: rotate(225deg);
    }
}
section.case_container {
    padding: 100px 0;
    background: url('../images/case_bg.jpg') no-repeat center / cover;
    color: #fff;
    background-attachment: fixed;margin-top: 100px
}
section.case_container a.more {
    display: block;
    width: 190px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border: 1px solid #969696;
    font-size: 18px;
    margin: 90px auto 0;
    color: #fff;
}
section.case_container a.more:hover {
    border-color: #333333;
    background: #333333;
    color: #fff;
}
div.case_banner {
    position: relative;
    max-width: 1640px;
    margin: 50px auto 0;
    width: 100%;
}




.tabs{ margin: 0px auto 0; width:100%; text-align: center; overflow: hidden;}
.tabs a{ display: inline-block; margin:2% 3% 1%;  font-size:12px; line-height: 24px; transition-duration: 1s; -webkit-transition-duration: 1s;}
.pro_zi	{color:#fff;margin-bottom: 10px;font-size:16px}

@media only screen and (min-width:1200px){.tabs a:hover{ color: #d86332
;}
.tabs a:hover .icon-box .status1{ margin-top: -48px;}
.tabs a:hover .nums{ width: 80%; opacity: 1;}
.tabs a:hover .pro_zi{ color: #d86332
;display:block;  }
	}
.tabs a.active{ color: #d86332
;font-size: 12px;}
.tabs a.active .pro_zi{ color: #d86332
;display:block; }
.tabs a.active .icon-box .status1{ margin-top: -48px;}
.tabs a.active .nums{ width: 80%;  opacity: 1;}
.tabs a.active .icon-box img:first{ margin-top: -48px;}
.tabs a .icon-box{ margin-bottom: 10px; height: 48px; line-height: 48px; text-align: center; overflow: hidden;}
.tabs a .icon-box .status1{ transition-duration: 1s; -webkit-transition-duration: 1s; height: 48px; overflow: hidden;}
.tabs a .icon-box .status2{ transition-duration: 1s; -webkit-transition-duration: 1s; height: 48px;}
.tabs a .icon-box img{ display: inline-block; vertical-align: middle;}
.tabs a .nums{ margin: 0 auto; width: 0; height: 0; overflow: hidden; opacity: 0; font-size: 1.8rem; border-top: 1px solid #d86332
; color: #d86332
; transition-duration: 1s; -webkit-transition-duration: 1s;}














.contact-box {
  padding-bottom: 80px;
  display: flex;
  justify-content: space-between;
}

.contact-box .contact-left {
  width: 37%;
  margin-top: 110px;
  background-size: auto;
  background-repeat: no-repeat;
  background-position: right bottom 90px;
  background-image: url("../images/quanlee.png");
}

.contact-box .contact-left .online-box {
  margin-top: 60px;
  margin-left: 35px;
}

.contact-box .contact-left .online-box .line-box {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
}

.contact-box .contact-left .online-box .line-box i {
  font-size: 18px;
  color: #333;
  display: inline-block;
}

.contact-box .contact-left .online-box .line-box .line {
  font-size: 16px;
  margin-left: 10px;
}

.contact-box .contact-left .online-box .line-box .line .t1 {
  font-family: 'Din';
}

.contact-box .contact-left .online-box .line-box .line .txt {
  line-height: 32px;margin-top: 20px
}

.contact-box .contact-map {
  width: 53%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
	margin-top: 110px;
}

.contact-box .contact-map img {
  width: 100%;
  opacity: 0;
}

.mail-box {
  padding: 80px 0 100px;
}
























.advantage-box {
  padding-top: 100px;
  padding-bottom: 40px;
}

.com-title {
  text-align: center;
}


.contact-box .contact-left .com-title {
  text-align: left;
}


.advantage-box .advantage-list {
  display: flex;
  align-items: flex-start;
  margin-top: 90px;
}

.advantage-box .advantage-list .item {
  width: calc(100%/6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.advantage-box .advantage-list .item .icon-box {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 1px dashed #ccc;
  padding: 10px;
}

.advantage-box .advantage-list .item .icon-box .inner {
  width: 100%;
  height: 100%;
  line-height: 115px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #333;
  transition: all 0.3s;
}

.advantage-box .advantage-list .item .icon-box .inner i {
  font-size: 40px;
  color: #333;
}

.advantage-box .advantage-list .item .num {
  font-size: 32px;
  line-height: 32px;
  color: #333;
  font-family: 'Din';
  margin-top: 25px;
}

.advantage-box .advantage-list .item .desc {
  text-align: center;
  margin-top: 20px;
}

.advantage-box .advantage-list .item .desc .cn {
  font-size: 24px;
  line-height: 32px;
  color: #333;
}

.advantage-box .advantage-list .item .desc .en {
  font-size: 12px;
  line-height: 14px;
  color: #999;
  margin-top: 10px;
}

.advantage-box .advantage-list .item:before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(50% - 50px);
  width: 1px;
  height: 100px;
  background-color: rgba(51, 46, 43, 0.1);
}

.advantage-box .advantage-list .item:last-child:after {
  content: '';
  position: absolute;
  right: 0;
  top: calc(50% - 50px);
  width: 1px;
  height: 100px;
  background-color: rgba(51, 46, 43, 0.1);
}

.advantage-box .advantage-list .item:hover .icon-box .inner {
  background-color: #333;
  transition: all 0.3s;
}

.advantage-box .advantage-list .item:hover .icon-box .inner i {
  color: #fff;
}







  .style-box {
    margin-top: 100px;
    padding-bottom: 20px;
	  margin-bottom: 80px;
  }


.style-box .style-list .item {
    width: 24%;
    margin-right: 1.333%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}


.style-box .style-list .item img{width: 100%}

.style-box .style-list {
    margin-top: 60px;
    display: flex;
}
  .style-box .style-list .item .title {
    left: 20px;
    top: 20px;
  }
  .style-box .style-list .item .title .cn {
    font-size: 24px;
    line-height: 24px;
  }
  .style-box .style-list .item .title .en {
    font-size: 16px;
    line-height: 16px;
	      margin-top: 10px;
  }
  .style-box .style-list .item .desc {
    left: 20px;
    font-size: 16px;
  }


.style-box .style-list .item .title {
    position: absolute;
    left: 30px;
    top: 30px;
    color: #fff;
}

.style-box .style-list .item .desc {
    font-size: 20px;
    color: #fff;
    position: absolute;
    bottom: 20px;
    left: 30px;
}
#join .style-box .style-list .item .desc {
    font-size: 20px;
    color: #fff;
    position: absolute;
    bottom: 20px;
    left: 30px;
}


@media screen and (max-width: 768px) {
	
	
	
	.style-box {
  margin-top: 70px;
  padding-bottom: 40px;
}

.style-box .com-title {
  text-align: center;
}

.style-box .style-list {
  margin-top: 60px;
  display: flex;
}

.style-box .style-list .item {
  width: 24%;
  margin-right: 1.333%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

.style-box .style-list .item img {
  width: 100%;
  opacity: 0;
}

.style-box .style-list .item .title {
  position: absolute;
  left: 30px;
  top: 30px;
  color: #fff;
}

.style-box .style-list .item .title .cn {
  font-size: 32px;
  line-height: 32px;
}

.style-box .style-list .item .title .en {
  font-size: 20px;
  line-height: 20px;
  margin-top: 10px;
}

.style-box .style-list .item .desc {
  font-size: 20px;
  color: #fff;
  position: absolute;
  bottom: 20px;
  left: 30px;
}

.style-box .style-list .item:last-child {
  margin-right: 0;
}

	
	
}

















.col-sm-4 {
    width: 49.33333333%;float: left;
}
.news-list{
    padding-bottom: 1.25rem;overflow: hidden;margin-top: 50px
}
.news-list .row a{
    display: block;
}
.news-list img{
    width: 100%;
}
.news-list .row{
    margin:0 -1.375rem;
}
.news-list .item{
    padding:12px 15px 26px;
    box-sizing: border-box;
    border-bottom: 1px solid #ededed;
    border-right: 1px solid #ededed;
}
.news-list .item:nth-child(3n){
    border-right: none;
}   
.news-list .con-box a{
    display: block;
}
.news-list .con-box .date{
    font-size: 0;
}
.news-list .con-box .d,
.news-list .con-box .ym{
    display: inline-block;
    *display: inline;
    zoom:1;
}
.news-list .con-box .d{
    font-size: 1.6rem;
    line-height: 1.7rem;
    color: #999;
    transition: all .2s;
}
.news-list .con-box .ym{
    font-size: 24px;
    line-height: 34px;
    margin-left: 5px;
    color: #999;
}
.news-list .con-box .text{
    margin-top: 25px;
}
.news-list .con-box .tit{
    font-size: 16px;
    line-height: 25px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all .2s;
}
.news-list .con-box .con{
    font-size: 14px;
    line-height: 25px;
    color: #999;
    margin-top: 5px;
    height: 60px;
    overflow: hidden;
}
.news-list .con-box .detail{
    width: 128px;
    height: 42px;
    font-size: 0;
    text-align: center;
    border:1px solid #ccc;
    border-radius: 50px;
    margin-top: 30px;
    transition: all .2s;
}
.news-list .con-box .detail span{
    display: inline-block;;
    *display: inline;
    zoom:1;
    font-size: 15px;
    line-height: 40px;
    color: #ccc;
    padding-right: 50px;
    background-repeat: no-repeat;
    background-position: right center;
    background-image: url('../images/news-detail.png');
    transition: all .2s;
}
.news-list .con-box .img{
    margin-top: 10px;
}
.news-list .page{
    margin-top: 1.25rem;
}


.news-list .con-box .detail:hover {
    border-color: #bca065;
    background-color: #bca065;
}


.news-list .con-box .detail:hover span {
    color: #fff;
    background-image: url(../images/news-detail2.png);
}

















.z20{font-size: 20px}

.z16{font-size: 16px}

.itit .itit-line {
    width: 130px;
    display: inline-block;
    height: 1px;
    background: rgb(159, 159, 159);
    vertical-align: middle;
    margin: 0px 26px;
}
.index-part3 {margin-top: 5%; margin-bottom:10%;overflow: hidden}
.index-part3 .index-part1-left{margin-top: 0; width: 48.14%;}
.index-part3 .index-part1-right{width:38%; margin-top: 8%}
.index-part3 .index-part1-right .part1-text{margin-top: 5%; margin-bottom: 5%;line-height: 30px}

.index-part3 .img{
  position: relative;
  width: 100%;
}
.index-part3 .img img{
  position: relative;
  width: 100%;
}
.index-part3 .img span{
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  -webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
  -webkit-animation-duration: 4s;/*动画持续时间*/
  -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
  -webkit-animation-delay: 0s;/*动画延迟时间*/
  -webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
  -webkit-animation-direction: normal;/*定义动画方式*/
  opacity: 0;
  /*-webkit-filter: blur(1px);
     -moz-filter: blur(1px);
     -o-filter: blur(1px);
     -ms-filter: blur(1px);
     filter: blur(1px); */

}
.index-part3 .img span.c1{
  background: #b4c75b; background: rgba(180,199,91,0.5);
  width: 26.2%;
  padding-bottom: 26.2%;
  top: 23%;
  left: 11.4%;
  animation-delay: 1s;
}
.index-part3 .img span.c2{
  background: #5bc762; background: rgba(91,199,98,0.5);
  width: 26.2%;
  padding-bottom: 26.2%;
  bottom: 6.7%;
    left: 39.39%;
  animation-delay: 2s;
}
.index-part3 .img span.c3{
  background: #5ba2c7; background: rgba(91,162,199,0.5);
  width: 20.06%;
  padding-bottom: 20.06%;
  top: 45%;
  left: 43.9%;
  animation-delay:3s;
}
.index-part3 .img span.c4{
  background: #c7a25b; background: rgba(199,162,91,0.5);
  width: 14%;
  padding-bottom: 14%;
  left: 62.6%;
  bottom: 8.4%;
  animation-delay: 1.5s;
}
.index-part3 .img span.c5{
  background: #c75b88; background: rgba(199,91,136,0.5);
  width: 26.2%;
  padding-bottom: 26.2%;
  right: 18.5%;
    bottom: 17.9%;
  animation-delay: 2.5s;
}
.index-part3 .img span.c6{
  background:#4ecf0f; background: rgba(78,207,15,0.5);
  width: 17.59%;
  padding-bottom: 17.59%;
  right: 31.7%;
  top: 32.7%;
  animation-delay: 0.5s;
}
.index-part3 .img span.c7{
  background: #098ae4; background: rgba(9,138,228,0.5);
  background-size: 100%;
  width: 13.2%;
  padding-bottom: 13.2%;
  right: 28.2%;
    top: 47.6%;
  animation-delay: 2s;
}
.index-part3 .img span.c8{
  background: #0be9e1; background: rgba(11,233,225,0.5);
  background-size: 100%;
  width: 13.2%;
  padding-bottom: 13.2%;
  left: 86%;
  top: 16%;
  animation-delay: 1.6s;
}
.index-part3 .img span.c9{
  background: #c7e90b; background: rgba(199,233,11,0.5);
  background-size: 100%;
  width: 9.2%;
  padding-bottom: 9.2%;
  left: 87.9%;
  top: 25.3%;
  animation-delay: 1.8s;
}

.index-part3 .lett{line-height: 30px;display: inline-block;color: #333;padding-left: 26px;position: relative;margin-top: 10px}

.index-part3 .lett1{background: url(../images/map_icon1.png) left center no-repeat;}



@keyframes ripple {
  0% {
    transform: scale(0);  
    opacity: 0; 
  }
  
  50% {
    transform: scale(1.5,1.5);
    opacity: 1; 
  }
  100% {
    
    opacity: 0; 
  }
}
@-webkit-keyframes ripple {
  0% {
    transform: scale(0);  
    opacity: 0; 
  }
  
  50% {
    transform: scale(1.5,1.5);
    opacity: 1; 
  }
  100% {
    
    opacity: 0; 
  }
}
@-moz-keyframes  ripple {
  0% {
    transform: scale(0);  
    opacity: 0; 
  }
  
  50% {
    transform: scale(1.5,1.5);
    opacity: 1; 
  }
  100% {
    
    opacity: 0; 
  }
}





























.indpro{
	width: 92%;
	max-width: 1400px;
	margin: 100px auto 60px;
}
.indpro .title{
	text-align: center;
	margin-bottom: 55px;
}
.indpro .title h2,.indsx .box .warp .title h2{
	font-size: 42px;
	line-height: 70px;
	color: #282828;
	text-transform:Uppercase;
	font-family: 'Open Sans','arial';
}
.indpro .title h2 span,.indsx .box .warp .title h2 span{
	font-size: 60px
}
.indpro .title  .fa{
	font-size: 36px;
	color: #282828;
	line-height: 45px;
	font-family: '微軟正黑體'
}
.indpro .pc-list{
  width:100%;
  color: #fff;
  padding-bottom: 50px;
  overflow: hidden;
}
.indpro .pc-list ul{
	width: 103%;
}
.indpro .pc-list li{
  width:30%;
  float: left;
  margin-right: 3.3%;
  text-align: center;
  box-sizing:border-box;
}
.indpro .pc-list li a{
  display: block;
  width:100%;
  height:100%;
  margin: 0 auto;
  cursor: pointer;
  border:1px solid #e5e5e5;
}
.indpro .pc-list li a .pic{
	width: 100%;
	overflow: hidden;
	background-color: #000;
}
.indpro .pc-list li a .pic img{
	display: inline-block;
	width: 100%;
	transition: all ease-in .3s;
    -webkit-transition: all ease-in .3s;
	transform: scale(1.12);
	opacity: 0.8;
	filter: alpha(opacity=80);
}
.indpro .pc-list li:hover a .pic img{
	transform: scale(1.02);
	opacity:1;
	filter: alpha(opacity=100);
}
.indpro .pc-list li a .box{
	padding:43px 3% 0;
	position: relative;
}
.indpro .pc-list li a .box h2{
	font-size: 22px;
	color: #282828;
	font-family: '微軟正黑體';
	line-height:30px;
	min-height: 60px;
	/*margin-bottom: 60px;*/
}
.indpro .pc-list li a .box .details,.indpro .pc-list li a .box .details p{
	font-size: 14px;
	color: #666666;
	line-height: 28px;
}
.indpro .pc-list li a .box .details{min-height:130px}
.indpro .pc-list li a .box .btn{
	width: 170px;
	height: 30px;
	line-height: 30px;
	background-color: #e5e5e5;
	font-size: 16px;
	color: #282828;
	margin:0 auto;
	display: block;
	transition: all ease-in .3s;
    -webkit-transition: all ease-in .3s;
}
.indpro .pc-list li a .box .btn:hover{
	color: #fff;
	background-color: #703e1e;
}


















.auto-1400 {
    max-width: 1400px;
    margin: auto;
    width: 92%;
}


.index-strength .list{position: relative; z-index: 1;}
.index-strength .slick-prev{left: 60px;}
.index-strength .slick-next{right: 60px;}
.index-strength .list li{position: relative;}
.index-strength .content{position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; color: #fff;}
.index-strength .list .txt{font-size: 26px; padding-top: 3%;}
.index-strength .list .txt1{font-size: 30px;}
.index-strength .list .txt2{line-height: 2;}
.index-strength .content ul{padding: 2.85% 0 4%;}
.index-strength .content li{display: inline-block; padding-right: 40px; margin-right: 40px;}
.index-strength .content li::before{content: ''; background-color: rgba(255, 255, 255, .2); width: 1px; height: 60px; right: 0; top: 50%; transform: rotate(15deg) translateY(-50%); position: absolute;}
.index-strength .content li:last-child{padding-right: 0; margin-right: 0;}
.index-strength .content li:last-child::before{content: none;}
.index-strength .big,
.index-strength .count{font-size: 40px; font-family: 'Oswald';}
.index-strength .itemtit{font-family: 'Light';}
.index-strength .count{padding-right: 5px;}
.index-strength .content .box{padding-left: 9.28%;}
.index-strength .wap{display: none;}
.index-strength .auto-1400.tr{text-align: right;}
.index-strength .box1{display: inline-block; text-align: left;}
.index-strength .box1 ul{padding: 8% 0 12%;}
.index-strength .list .star::after{content: '*'; position: absolute; left: -8px; top: 5px; font-size: 16px;}
.index-strength li .pic img{width: 100%;}

.index-strength .num-box{background-color: #f5f5f5; padding: 4.28% 0; margin-top: -50px; z-index: 5; position: relative;}
.index-strength .num-box li{width: 20%; float: left; text-align: center;}
.index-strength .num-box .box{display: inline-block; text-align: left;}
.index-strength .num-box .itemtit,
.index-strength .num-box span{font-family: 'Light'; color: #898989;}
.index-strength .num-box .big,
.index-strength .num-box .count{font-size: 40px; font-family: 'Oswald'; color: #333;}

.index-strength .aword{padding-top: 4px; margin: 0 -2px;}
.index-strength .aword li{width: 33.333%; float: left; position: relative;}
.index-strength .aword .pic{padding-top: 43.1%; background-repeat: no-repeat; background-position: center; background-size: 100%;margin: 0 2px}
.index-strength .content1{position: absolute; left: 40px; bottom: 40px; width: 100%;}
.index-strength .icon{position: relative; padding-bottom: 20px; margin-bottom: 18px;}
.index-strength .icon::before{content: ''; background-color: #ab1e21; width: 40px; height: 2px; position: absolute; left: 0; bottom: 0;}
.index-strength .tit{color: #fff; font-family: 'Light';font-size: 16px}
@media(max-width: 1400px){
    .index-strength .content1{left: 20px; bottom: 20px;}
    .index-strength .icon{padding-bottom: 10px; margin-bottom: 8px;}
	
	section.banner{height: 80%}
	
	
	
}
@media(max-width: 1200px){
    .index-strength .list .txt1{font-size: 24px;}
    .index-strength .content ul{padding: 2% 0;}
    .index-strength .list .txt2{line-height: 1.8;}
}
@media(max-width: 1024px){
    .index-strength .content{top: 40%;}
    .index-strength .itemtit,
    .index-strength .num-box .itemtit, .index-strength .num-box span{font-size: 12px;}
    .index-strength .count,
    .index-strength .num-box .big, .index-strength .num-box .count{font-size: 25px;}
    .index-strength .aword li{width: 50%; margin-bottom: 4px;}
}
@media(max-width: 640px){
    .index-strength .auto-1400.tr{text-align: left;}
    .index-strength .box1{display: block;}
    .index-strength .list .txt1{font-size: 18px;}
    .index-strength .list .txt2{font-size: 12px;}
    .index-strength .slick-prev{bottom: 13%; left: 4%; top: auto; transform: translateY(0);}
    .index-strength .slick-next{bottom: 13%; left: calc(4% + 50px); top: auto; transform: translateY(0);}
    .index-strength .num-box .big, .index-strength .num-box .count{font-size: 20px;}
    .index-strength .content .box{padding-left: 0;}
    .index-strength .content .box img{width: 50%;}
    .index-strength .list .txt{font-size: 14px;}
    .index-strength .content{top: auto; bottom: 25%; transform: translateY(0);}
    .index-strength .wap{display: block; opacity: 0.6;}
    .index-strength .pc{display: none;}
    .index-strength .aword li{width: 100%;}
    .index-strength .content ul{padding: 4% 0 6%;}
    .index-strength .content li{padding-right: 20px; margin-right: 20px;}
    .index-strength .content1{top: 50%; bottom: auto; left: 0; transform: translateY(-50%); padding-left: 40px;}
    .index-strength .icon{padding-bottom: 20px; margin-bottom: 18px;}
    .index-strength .num-box li{width: 33.333%; text-align: left; padding-left: 40px; margin-bottom: 20px;}
    .index-strength .num-box{padding-bottom: 0; padding-top: 20px;}
    .index-strength .list li .pic{background-color: #000;}
}
@media(max-width: 480px){
    .index-strength .icon {padding-bottom: 10px;margin-bottom: 8px;}
    .index-strength .num-box li,
    .index-strength .content1{padding-left: 20px;}
    .index-strength .content li{margin-right: 0; padding-right: 10px;}
}

















.index-hot{padding: 5.2% 0 6.25% 0; overflow: hidden;}
.index-hot ul{margin: 0 -2px;}
.index-hot li{float: left; width: 16.6%; padding: 0 2px; height: 100%; transition: width .3s;}
.index-hot li a{display: block; position: relative;}
.index-hot li.active{width: 50%;}
.index-hot li .pic{padding-top: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; width: 100%; overflow: hidden; opacity: .9;}
/* .index-hot li.active .pic{padding-top: 74.2%; opacity: 1;} */
.index-hot li .cover{background-color: rgba(0, 0, 0, .5); opacity: 1; transition: all .3s; position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.index-hot li.active .cover{opacity: 0;}
.index-hot .content{position: absolute; width: calc(100% - 80px); left: 0; bottom: 0; margin: 0 40px 40px 40px; color: #fff; overflow: hidden;}
.index-hot li .label{position: absolute; right: 0; bottom: 0; padding: 0 5px; line-height: 20px; background-color: #ab1e21; font-size: 10px; opacity: 0; transition: all .3s; text-transform: uppercase;}
.index-hot li.active .label{opacity: 1;}
.index-hot .tit{white-space: nowrap; font-size: 19px; font-family: 'Medium'; margin-bottom: 10px;}
.index-hot .txt{white-space: nowrap; font-size: 14px; font-family: 'Light';}
@media(max-width: 1024px){
    .index-hot .content{margin: 0 20px 20px 20px; width: calc(100% - 40px);}
    .index-hot li.active .pic{padding-top: 73.7%;}
    .index-hot .tit{font-size: 16px; margin-bottom: 5px;}
}
@media(max-width: 640px){
    .index-hot li{opacity: .5; transition: all .3s;}
    .index-hot li .pic{padding-top: 74.2%;}
    .index-hot li .cover{display: none;}
    .index-hot .slick-list{overflow: visible;}
    .index-hot li .label{opacity: 1;}
    .index-hot li.slick-current{opacity: 1;}
}




























.shpro{display: none}


.case_banner .swiper-slide {
   width: 25%;
    padding-top: 16.415%;
    overflow: hidden;
    position: relative;
    background: no-repeat center / cover;
    box-shadow: 0 4px 10px #000;
    transition: all .4s;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
}
.case_banner .swiper-slide a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.case_banner .swiper-slide .info {
    display: block;
    position: absolute;
    top: 12.7%;
    left: 4.8%;
    color: #fff;
    max-width: 80%;
    transition: all .4s;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
}
.case_banner .swiper-slide .info .tit {
    font-size: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'PingFangSC-Light';
    display: block;
}
.case_banner .swiper-slide .info .date {
    font-size: 40px;
    font-family: 'manrope-thin';
}
.case_banner .swiper-slide-next::after, .case_banner .swiper-slide-prev::after {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    left: 0;
}
.case_banner .prev, .case_banner .next {
    position: absolute;
    top: 52.7%;
    left: 21.34%;
    width: 16px;
    height: 26px;
    z-index: 100;
    background: #000;
}
.case_banner .prev {
    background: url(../images/prev.png) no-repeat;
    background-size: 100%;
}
.case_banner .next {
    background: url(../images/next.png) no-repeat;
    background-size: 100%;
    left: auto;
    right: 21.34%;
}
section.advantages_container {
    position: relative;
    padding-top: 55.2%;
}
div.advantages_banner {
    width: 100%;
    height: 100%;
}
.advantages_banner .swiper-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.advantages_banner .swiper-container .swiper-slide {
    background: no-repeat center / cover;
    color: #ffffff;
    padding: 110px 120px 0;
    box-sizing: border-box;
}
.advantages_banner .swiper-container .swiper-slide .left h3.title {
    text-align: left;
}
.advantages_banner .swiper-container .swiper-slide .right {
    position: relative;
}
.advantages_banner .swiper-container .swiper-slide .right .container {
    max-width: 580px;
    width: 100%;
    border-top: 6px solid #fff;
    margin-top: 50px;
    padding-top: 60px;
}
.advantages_banner .swiper-container .swiper-slide .right .container .one span {
    display: block;
    max-width: 250px;
    font-size: 48px;
    float: left;
}
.advantages_banner .swiper-container .swiper-slide .right .container .one i {
    display: block;
    float: right;
    font-size: 128px;
    font-style: normal;
    font-family: 'manrope';
}
.advantages_banner .swiper-container .swiper-slide .right .container p.con {
    font-size: 24px;
    line-height: 1.4;
}
.advantages_container .gallery-thumbs {
    position: absolute;
    width: 100%;
    height: 100px;
    line-height: 100px;
    bottom: 0;
    left: 0;
    color: #fff;
}
.advantages_container .gallery-thumbs .swiper-wrapper {
    display: flex;
    flex-wrap: wrap;
}
.advantages_container .gallery-thumbs .swiper-slide {
    width: 25%;
    padding: 0 30px;
    border-top: 1px solid #ffffff45;
    border-left: 1px solid #ffffff45;
    box-sizing: border-box;
    float: left;
    cursor: pointer;
    position: relative;
    transition:all .4s;
}
.advantages_container .gallery-thumbs .swiper-slide-thumb-active, 
.advantages_container .gallery-thumbs .swiper-slide:hover{
    background:#12121252;
}
.advantages_container .gallery-thumbs .swiper-slide:before{
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    position: absolute;
    left: 0;
    top: 5px;
    opacity: 0;
    transition: all .4s;
}
.advantages_container .gallery-thumbs .swiper-slide-thumb-active:before, 
.advantages_container .gallery-thumbs .swiper-slide:hover:before {
    opacity: 1;
    top: -1px;    
}
.advantages_container .gallery-thumbs .swiper-slide .num {
    float: left;
    font-size: 18px;
}
.advantages_container .gallery-thumbs .swiper-slide .tit {
    float: right;
    font-size: 16px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
section.realview {
    padding: 110px 0;
    background-color: #f2f2f2;
}
section.realview h3.title {
    color: #222;
}
section.realview h3 {
    position: relative;
}
section.realview h3 .jump {
    position: absolute;
    right: 0;
    font-size: 40px;
    color: #c7c7c7;
    top: 50%;
    transform: translateY(-50%);
}
section.realview a.more {
    display: block;
    width: 230px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    border: 1px solid #222;
    font-size: 18px;
    margin: 80px auto 0;
    color: #222;
    background: #f2f2f2;
}
section.realview a.more:hover {
    border-color: #0d0a08;
    background: #0d0a08;
    color: #fff;
}
section.realview .list .item {
    overflow: hidden;
    margin-top: 10px;
}
section.realview .list {
    margin-top: 40px;
}
section.realview .list .item .left a.top {
    display: block;
    width: 100%;
    height: 315px;
    background: no-repeat center /cover;
    overflow: hidden;
    position: relative;
}
section.realview .list .item .left a.top span.thumb{
    display: block;
    width: 100%;
    height: 100%;
    background: no-repeat center / cover;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    transition: all .8s;
}
section.realview .list .item .left a.top img {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity:1;
    transition: all .8s;
}
section.realview .list .item .left a.top:hover span.thumb {
    transform: scale(1.05);
}
section.realview .list .item .left div.info {
    height: 233px;
    background: #ffffff;
    padding: 30px 40px;
    box-sizing: border-box;
}
section.realview .list .item .left div.info .tit {
    display: block;
    font-size: 18px;
    line-height: 40px;
   margin-bottom: 20px;
    overflow: hidden;
}
section.realview .list .item .left div.info .desc {
    font-size: 18px;
    line-height: 30px;
    overflow: hidden;
    margin-top: 20px;
    color: #222222;
}
section.realview .list .item .left div.info a.pro-more {
    display: block;
    width: 26px;
    height: 14px;
    background: url('../images/jt.png') no-repeat center / 100%;
    margin-top: 30px;
}
section.realview .list .item .right.fr {
    float: right;
}
section.realview .list .item .right a.thumb {
    display: block;
    width: 100%;
    height: 548px;
    background: no-repeat center /cover;
    position: relative;
    overflow: hidden;
}
section.realview .list .item .right a.thumb span.thumb{
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: no-repeat center /cover;
    position: absolute;
    overflow: hidden;
    transition: all .8s;
}
section.realview .list .item .right a.thumb img {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    transition: all .8s;
}
section.realview .list .item .right a.thumb:hover span.thumb {
    transform: scale(1.05);
}
section.introduction {
    padding: 140px 140px 220px;
    color: #fff;
    background: no-repeat center / cover fixed;
}
section.introduction .wrapper .left h3.title {
    text-align: left;
}
section.introduction .wrapper .right .title {
    font-size: 16px;
    line-height: 2;
    /* max-height: 140px; */
    overflow: hidden;
}
section.introduction .wrapper .right .num {
    margin-top: 50px;
    font-size: 60px;
	font-weight: lighter
}


section.introduction .wrapper .right .num .item span{font-size: 14px}
section.introduction .wrapper .right .num .item p{font-size: 16px}





section.introduction .wrapper .right .desc {
    font-size: 16px;
    line-height: 2;
    margin-top: 60px;
    font-family: 'PingFangSC-Light';
}
section.introduction .more {
    font-size: 18px;
    color: #fff;
    font-weight: normal;
    display: block;
    width: 190px;
    height: 70px;
    line-height: 70px;
    position: relative;
    margin-top: 130px;
    text-align: center;
    border: 1px solid #fff;
    cursor: pointer;
}
section.introduction .more:hover {
    background: #fff;
    color: #222;
}
section.story {
    padding: 200px 0 160px 130px;
    position: relative;
    font-family: 'PingFangSC-Light';
	
	
	
}
section.story .story_top {
    position: absolute;
    top: 200px;
    left: 130px;
}
section.story .story_top h3 {
    font-size: 38px;
    text-transform: uppercase;
    font-family: Gotham, Helvetica Neue, Helvetica, Arial,' sans-serif';
	font-weight: bold
}
section.story .story_top .small_title {
    font-size: 28px;
}
section.story .story_wrapper .left {
    margin-top: 140px;
    float: left;
    box-sizing: border-box;
    width: 30.9%;
}
section.story .story_wrapper .left .item {}
section.story .story_wrapper .left .item h4 {
    font-size: 28px;
    line-height: 1.4;
    max-height: 160px;
    overflow: hidden;
    font-weight: normal;
}
section.story .story_wrapper .left .item small {
    display: block;
    font-size: 16px;
    margin-top: 10px;
}
section.story .story_wrapper .left .item .desc {
    font-size: 18px;
	color: #999;
    margin-top: 40px;
}
section.story .story_wrapper .left .item .detail {
    display: block;
    width: 220px;
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    border: 2px solid #666;
    text-align: center;
    margin-top: 80px;
}
section.story .story_wrapper .left .item .detail:hover {
    border-color: #0d0a08;
    background: #0d0a08;
    color: #fff;
}
section.story .story_wrapper .right {
    float: right;
    position: relative;
    width: 61.8%;
}
section.story .story_wrapper .right .item {
    width: 87.272%;
    padding-top: 58.727%;
    margin-right: 30px;
    background: no-repeat center / cover;
    position: relative;
}
section.story .story_wrapper .right .item div.info {
    position: absolute;
    left: 50px;
    bottom: 40px;
    color: #fff;
}
section.story .story_wrapper .right .item div.info span {
    display: block;
}
section.story .story_wrapper .right .item div.info span.title {
    font-size: 20px;
}
section.story .story_wrapper .right .item div.info span.name {
    font-size: 20px;
    margin-top: 10px;
}
section.story .story_wrapper .right .prev {
    display: block;
    content: '';
    width: 50px;
    height: 50px;
    background: url('../images/left.png') no-repeat center/100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 88%;
    z-index: 888;
}

@media screen and (min-width: 1600px) {
    section.advantages_container {
        padding-top: 50.2%;
    }
}