#box-1{padding-top: 230px;background: url(./about_box1_bj.jpg) no-repeat center center;background-size: cover;position: relative;}
#box-1 .container{position: relative;z-index: 2;}
#box-1 .pub_title:nth-child(1) p{color: #C78F6C;}
#box-1 .desc{width: 69%;margin:30px auto 0 auto;text-align: center;}
#box-1 .desc p{font-size: 24px;color: #666;}

#box-1 .box2{position: relative;margin-top: 65px;}
#box-1 .wz{position: absolute;width: 130%;top: 35%;z-index: 1;}
#box-1 .content_video{width:92%;position: relative;margin: auto;max-width: 1400px;}
#box-1 .content_video .video_img{overflow: hidden;border-radius: 20px;}
#box-1 .content_video .video_img img{height: 100%;}
.video_btn{position: absolute;left: calc(50% - 43px);top:calc(50% - 43px);}
.video_btn img{width: 85px;cursor: pointer;transition: all .5s;}
.video_btn img:hover {transform: scale(1.15);}
.video_btn p{font-size: 72px;color: #fff;width: 100%;text-align: center;margin-top: 20px;}
.fix_video {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 9999;display: none;}
.fix_video .fix_bg {background: rgba(0, 0, 0, .7);position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 99;}
.fix_video .fix_text {display: -ms-flexbox;display: flex;-ms-flex-pack: justify;justify-content: space-between;-ms-flex-align: center;align-items: center;overflow: hidden;height: 100%;}
.fix_video .fix_text .video {width: 68%;max-width: 1050px;margin: 0 auto;position: relative;margin-top: 50px;}
.fix_video .fix_text .video video {width: 100%;position: relative;z-index: 100;}
.fix_video i img{width: 45px;height: 45px;position: absolute;z-index: 999;cursor: pointer;top: -60px;right: -60px;filter: invert(1);}


#box-2{padding: 0;position: relative;background: #EFEFEF;}
#box-2 .box1{overflow: hidden;position: absolute;width: 100%;top: 0;z-index: 2;height: 100%;}
#box-2 .box1 li{position: relative;opacity: 1!important;}
/* #box-2 .box1 li.swiper-slide-active{z-index: 100!important;} */
#box-2 .box1 li .img{transform-origin: 50% 0%;overflow: hidden;height: 100%;}
#box-2 .box1 li.swiper-slide-active .img{animation: clip 1.6s forwards cubic-bezier(0.3, 0, 0.24, 1);}
@keyframes clip{
	0%{clip-path: ellipse(50% 50% at 50% 150%);}
	100%{clip-path: ellipse(100% 180% at 50% 150%);}
}
.fadeClip{-webkit-animation-name:clip;animation-name:clip;transform-origin: 50% 0%;overflow: hidden;height: 100%;animation-duration: 1.6s;animation-timing-function:cubic-bezier(0.3, 0, 0.24, 1);}
#box-2 .box1 li .img img{transform: scale(1.1);transition: all 3s ease;height: 100%;}
#box-2 .box1 li.swiper-slide-active .img img{transform: scale(1);}


#box-2 .box2{position: relative;z-index: 2;padding: 150px 0 160px 0;}
#box-2 .box2 .block_001{align-items: flex-start;}
#box-2 .pub_title *,#box-2 .pub_ftitle *{color: #fff;}

#box-2 .blcok{max-width: 65%;padding-top: 50px;}
#box-2 .blcok li{text-align: right;padding: 8px 0;position: relative;}
#box-2 .blcok li>div{padding-right: 80px;padding-bottom: 90px;cursor: pointer;}
#box-2 .blcok li:last-child>div{padding-bottom: 0px;}
#box-2 .blcok li .title{font-size: 60px;color: rgba(255, 255, 255, 0.3);line-height: 1.3;position: relative;overflow: hidden;}
#box-2 .blcok li .title span{display: block;width: 100%;}
#box-2 .blcok li .title span:nth-child(2) {opacity: 1;position: absolute;bottom: -100%;}
#box-2 .blcok li.on .title span:nth-child(1), #box-2 .blcok li:hover .title span:nth-child(1) {transform: translateY(-100%);opacity: 0;transition: 0.7s;}
#box-2 .blcok li.on .title span:nth-child(2), #box-2 .blcok li:hover .title span:nth-child(2) {bottom: 0%;color: #fff;opacity: 1;transition: 0.7s;}
#box-2 .blcok li .desc {opacity: 0;transition: 0.5s;transform: translateY(10px);}
#box-2 .blcok li.on .desc, #box-2 .blcok li:hover .desc{opacity: 1;transform: translateY(0px);}
#box-2 .blcok li .desc p{font-size: 30px;color: #fff;}
#box-2 .blcok li .line,#box-2 .blcok li .line::after{position: absolute;width: 1px;height: 100%;background: rgba(255, 255, 255, .2);top: 0;right: 3.5px;}
#box-2 .blcok li .line::after{content: '';background: #fff;left: 0;transition: 0.8s;}
#box-2 .blcok li.on .line::after{height: 100%;}
#box-2 .blcok li.on~li .line::after{height: 0;}
#box-2 .blcok li .dian,#box-2 .blcok li .dian::after{width: 8px;height: 8px;background: #FFFFFF;border-radius: 50%;position: absolute;right: 0;top: 0;}
#box-2 .blcok li .dian::after{content: '';width: 12px;height: 12px;border: 1px solid #fff;background: transparent;top: -2px;left: -2px;opacity: 0;}
@keyframes sc{
	0% {transform: scale(0);opacity: 0;}
	70% {transform: scale(1.1);opacity: 1;}
	100% {transform: scale(1.3);opacity: 0;}
}
#box-2 .blcok li.on .dian::after{opacity: 1;animation: sc 1.2s linear infinite;}


#box-3{background: url(./about_box3_bj.jpg) no-repeat center center;background-size: cover;position: relative;padding-bottom: 100px;}
#box-3 .colorMain *{color: #C78F6C;}
#box-3 .block01{align-items: flex-start;}
#box-3 .left{width: 50%;}
#box-3 .box1{padding-top:10px;margin-top: 290px;position: relative;overflow: hidden;}
#box-3 .box1 ul{transition: 0.5s;flex-wrap: wrap;height: 280px!important;}
#box-3 .box1 li{/* height: auto!important; */cursor: pointer;}
#box-3 .box1 li .title{font-size: 36px;color: #999;}
#box-3 .box1 li.swiper-slide-active .title{color: #000;transform: scale(2);transform-origin: left;}

#box-3 .right{width: 39%;}
#box-3 .box2{position: relative;overflow: hidden;margin: -35px 0;}
#box-3 .box2 ul{flex-wrap: wrap;}
#box-3 .box2 li{height: auto!important;}
#box-3 .box2 li>div{border-bottom: 1px solid rgba(0, 0, 0, 0.1);padding: 35px 0;}
#box-3 .box2 li.swiper-slide-prev>div{border: none;}
#box-3 .box2 li .title{font-size: 60px;color: #000;}
#box-3 .box2 li .desc{padding-left: 30px;padding-top: 10px;}
#box-3 .box2 li .desc p{font-size: 24px;color: #000;position: relative;padding-bottom: 10px;}
#box-3 .box2 li .desc p::after{content: '';width: 18px;height: 18px;background: url(../img/lunbodian.png) no-repeat center center;background-size: contain;position: absolute;left: -30px;top: 9px;}


#box-4{background: url(./about_box4_bj.jpg) no-repeat center center;background-size: cover;padding-top: 110px;}
#box-4 .block01{position: relative;margin: 0px -6.5% 0 -6.5%;}
#box-4 .box1 {position: relative;overflow: hidden;padding: 90px 0 5px 0;}
#box-4 .box1 li{padding: 0 3.8%;}
#box-4 .box1 li .img{transform: scale(0.7);transition: 0.5s;border-radius: 30px;overflow: hidden;position: relative;}
#box-4 .box1 .swiper-slide-next .img{transform: scale(1);}
#box-4 .box1 .swiper-slide-next .img::after{opacity: 0;}
#box-4 .block01 .swiper-button-prev,#box-4 .block01 .swiper-button-next{top: 50%;}
#box-4 .block01 .swiper-button-prev{left: 30.3%;}
#box-4 .block01 .swiper-button-next{right: 30.3%;}



@media (min-width:1199px) and (max-width:1500px){
	#box-1 .desc{width: 83%;}
	
	#box-2 .box2 {padding: 120px 0 130px 0;}
	#box-2 .blcok li>div {padding-right: 70px;}
	#box-2 .blcok li .title {font-size: 50px;}
	#box-2 .blcok li .desc p{font-size: 26px;}
	
	#box-3 .box2 li .desc p{font-size: 20px;}
	#box-3 .box2 li .desc p::after{width: 16px;height: 16px;left: -30px;top: 7px;}
	
	#box-4 .block01 .swiper-button-prev{left: 30%;}
	#box-4 .block01 .swiper-button-next{right: 30%;}
	#box-4 .swiper-button-prev,#box-4 .swiper-button-next {width: 63px;height: 63px;}
}
@media (min-width:767px) and (max-width:1199px){
	#box-1{padding-top: 160px;}
	#box-1 .desc{width: 85%;}
	#box-1 .desc p{font-size: 18px;}
	#box-1 .fix_video .fix_text .video {max-width: 77%;margin-top: 5px;}
	#box-1 .content_video .video_img{height: 400px;}
	.video_btn {left: calc(50% - 33px);top: calc(50% - 33px);}
	.video_btn img {width: 66px;}
	
	#box-2 .box2 {padding: 90px 0 100px 0;}
	#box-2 .blcok {padding-top: 30px;}
	#box-2 .blcok li>div {padding-right: 50px;padding-bottom: 60px}
	#box-2 .blcok li .title {font-size: 38px;}
	#box-2 .blcok li .desc p{font-size: 18px;}
	
	#box-3 .box1{margin-top: 230px;}
	#box-3 .box1 ul{height: 220px !important;}
	#box-3 .box1 li .title {font-size: 26px;}
	
	#box-3 .right {width: 42%;}
	#box-3 .box2 li .title{font-size: 38px;}
	#box-3 .box2 li .desc{padding-left: 25px;}
	#box-3 .box2 li .desc p{font-size: 16px;}
	#box-3 .box2 li .desc p::after{width: 13px;height: 13px;left: -25px;top: 5px;}
	
	#box-4{padding-top: 100px;}
	#box-4 .box1{padding: 60px 0 5px 0;}
	#box-4 .box1 li {padding: 0 2.2%;}
	#box-4 .box1 li .img{border-radius: 20px;}
	#box-4 .block01 .swiper-button-prev{left: 29%;}
	#box-4 .block01 .swiper-button-next{right: 29%;}
	#box-4 .block01 .swiper-button-prev, #box-4 .block01 .swiper-button-next{width: 50px;height: 50px;top: 51%;}
}
@media (max-width:850px){
	#box-2 .box3 {padding-bottom: 70px;}
	#box-2 .box3 .blcok{width: 100%;}
	#box-2 .box3 .controls{margin-top: 55px;}
	@keyframes clip{
		0%{clip-path: ellipse(90% 50% at 50% 150%);}
		100%{clip-path: ellipse(120% 180% at 50% 150%);}
	}
	
	#box-4 .block01{position: relative;margin: 0px -30% 0 -30%;}
	#box-4 .block01 .swiper-button-prev, #box-4 .block01 .swiper-button-next{top: 49%;}
}
@media (max-width: 767px){
	#box-1{padding-top: 130px;padding-bottom: 30px;}
	#box-1 .pub_title *{font-size: 24px;line-height: 1.5;}
	#box-1 .desc{width: 100%;margin: 25px auto 0 auto;}
	#box-1 .desc p{font-size: 16px;}
	#box-1 .box2{margin-top: 45px;}
	#box-1 .content_video{width: 100%;margin-top: 40px;}
	#box-1 .content_video .video_img{height: 230px;border-radius: 15px;}
	.video_btn {left: calc(50% - 25px);top: calc(50% - 25px);}
	.video_btn img {width: 50px;}
	.fix_video .fix_text .video {width: 88%;margin-top: -80px;}
	.fix_video i img{top: auto;bottom: -80px;left: calc(50% - 22px);}
	#box-1 .wz{width: 180%;}
	
	/* #box-2 .box-title{margin: auto;} */
	#box-2 .box-title p{text-align: left;}
	#box-2 .box2 {padding: 70px 0 80px 0;}
	#box-2 .blcok {padding-top: 50px;width: 100%;max-width: 100%;}
	#box-2 .blcok li{text-align: left;}
	#box-2 .blcok li>div {padding-right: 0px;padding-left: 0px;padding-bottom: 30px}
	#box-2 .blcok li .title {font-size: 28px;}
	#box-2 .blcok li .desc p{font-size: 15px;}
	#box-2 .blcok li .line,#box-2 .blcok li .dian{display: none;}
	/* #box-2 .blcok li .line, #box-2 .blcok li .line::after{left: 3.5px;right: auto;}
	#box-2 .blcok li .line::after{left: 0px;}
	#box-2 .blcok li .dian, #box-2 .blcok li .dian::after{left: 0;right: auto;}
	#box-2 .blcok li .dian::after{left:-2px;} */
	@keyframes clip{
		0%{clip-path: ellipse(100% 50% at 50% 150%);}
		100%{clip-path: ellipse(180% 180% at 50% 150%);}
	}
	
	#box-3{padding-bottom: 60px;}
	#box-3 .left .box1{display: none;}
	#box-3 .left,#box-3 .right {width: 100%;}
	#box-3 .box2{margin-top: 40px;margin-bottom: 0;}
	#box-3 .box2 li>div{padding: 20px 0;}
	#box-3 .box2 li .title{font-size: 32px;}
	#box-3 .box2 li .desc{padding-left: 18px;}
	#box-3 .box2 li .desc p{font-size: 15px;}
	#box-3 .box2 li .desc p::after{width: 11px;height: 11px;left: -18px;top: 6px;}
	
	#box-4{padding-top: 60px;}
	#box-4 .block01{margin: 0px 10px 0 10px;}
	#box-4 .box1{padding: 35px 0 0px 0;}
	#box-4 .block01 li{padding: 0 10px;}
	#box-4 .block01 li .img{border-radius: 15px;transform: scale(1);}
	#box-4 .block01 .swiper-button-prev,#box-4 .block01 .swiper-button-next{display: none;}
	
}