﻿.main .title_img {margin: 0 auto 30px auto;}

#box-1{background: url(../image/about_box1_bj.png) no-repeat center center;background-size: cover;position: relative;padding: 75px 0;}
#box-1 .box1>div{align-items: flex-start;}
#box-1 .box1 .left{width: 45%;padding: 55px 0;}
#box-1 .box1 .title_img{margin-left: 0;}
#box-1 .box1 .left .desc{font-size: 18px;line-height: 2;text-align: justify;}
#box-1 .box1 .left .number{margin-top: 60px;}
#box-1 .box1 .left .number .num{font-size: 58px;font-weight: bold;line-height: 1.2;position: relative;display: inline-block;padding: 0 10px;z-index: 2;}
#box-1 .box1 .left .number .num::after{content: '';width: 100%;height: 18px;background: #FFC723;position: absolute;left: 0;bottom: 7px;z-index: -1;}
#box-1 .box1 .left .number .sup{vertical-align: top;font-size: 20px;font-weight: bold;margin-left: -5px;}
#box-1 .box1 .left .number .num_desc{font-size: 16px;}
#box-1 .box1 .right{width: 50.5%;position: relative;margin-right: -3.5%;}

#box-1 .content_video{width:100%;position: relative;}
#box-1 .content_video .quan_img	{width: 100%;height: 100%;position: absolute;z-index: 2;pointer-events: none;}
#box-1 .content_video .quan_img img{width: 100%;height: 100%;object-fit: contain;}
#box-1 .content_video .video_img{border-radius: 25px;overflow: hidden;border: 1px solid #fff;transform: scale(0.86);}
#box-1 .content_video .video_img img{height: 100%;}
#box-1 .video_btn{position: absolute;left: calc(50% - 37px);top:calc(50% - 37px);width: 74px;height: 74px;display: flex;align-items: center;justify-content: center;}
#box-1 .video_btn img{width: 38%;cursor: pointer;transition: all .5s;}
#box-1 .video_btn span{width: 100%;height: 100%;position: absolute;top: 0;left: 0;border-radius: 50%;border: 1px solid rgba(255, 255, 255, .6);animation: circleScale 2.4s linear infinite;pointer-events: none;}
#box-1 .video_btn span:nth-child(2){animation-delay: 0.8s;}
#box-1 .video_btn span:nth-child(3){animation-delay: 1.6s;}
@keyframes circleScale{
	0% {opacity: 1;transform: scale(1);-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);}
	100% {opacity: 0;-webkit-transform: scale(1.8);-moz-transform: scale(1.8);-ms-transform: scale(1.8);transform: scale(1.8);}
}
#box-1 .fix_video {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 9999;display: none;}
#box-1 .fix_video .fix_bg {background: rgba(0, 0, 0, .7);position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 99;}
#box-1 .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%;}
#box-1 .fix_video .fix_text .video {width: 100%;max-width: 55%;margin: 0 auto;position: relative;margin-top: 50px;}
#box-1 .fix_video .fix_text .video video {width: 100%;position: relative;z-index: 100;}
#box-1 .fix_video i img{width: 45px;height: 45px;position: absolute;z-index: 999;cursor: pointer;top: -60px;right: -60px;filter: invert(1);}


#box-2{background: url(../image/about_box2_bj.jpg) no-repeat center center;background-size: cover;}
#box-2 .desc{width: 85%;margin: 0 auto 350px auto;}
#box-2 .desc p{font-size: 18px;text-align: left;line-height: 2;}


#box-3 .title_img{margin-left: 0;}
#box-3 .block01{background: url(../image/about_box3_bj.png) no-repeat top 20% center;background-size: contain;}
#box-3 .block01 .container{position: relative;}
#box-3 .box1{overflow: hidden;margin: 0 -35px;padding-top: 20px;}
#box-3 .box1 li>div{padding:0 35px;transition: 0.5s;}
#box-3 .box1 li>div:hover{transform: translateY(-15px);}
#box-3 .box1 li .content_img{position: relative;}
#box-3 .box1 li .content_img::after{content: '';width: 100%;height: 100%;background: #FFC723;border-radius: 20px;position: absolute;bottom: -8px;right: -8px;z-index: -1;}
#box-3 .box1 li .img{overflow: hidden;border-radius: 20px;}
#box-3 .box1 li .content{margin-top: 35px;}
#box-3 .box1 li .content .title{font-size: 20px;color: #d03233;font-weight: bold;}
#box-3 .box1 li .content .title span{font-size: 40px;}
#box-3 .box1 li .content .desc{margin-top: 10px;}
#box-3 .box1 li .content .desc p{font-size: 16px;padding: 2px 0;}
#box-3 .swiper-button-prev,#box-3 .swiper-button-next{top: 40%;}
#box-3 .swiper-button-prev{left: -80px;background: url(../image/about_jtL1.png) no-repeat center top;background-size: contain;}
#box-3 .swiper-button-next{right: -80px;background: url(../image/about_jtR1.png) no-repeat center top;background-size: contain;}



#box-4{background: url(../image/about_box4_bj.jpg) no-repeat center center;background-size: cover;position: relative;}
#box-4 .rect{width: 70vw;height: 70vw;position: absolute;left: -20vw;top: -8vw;background: rgb(209,49,51,0.8);border-radius: 47%;-webkit-animation: ro 20s linear infinite;}
@keyframes ro{
	0% {transform: rotate(0);}
	100% {transform: rotate(360deg);}
}
#box-4 .container{position: relative;z-index: 2;}
#box-4 .box1{width: 50%;padding-right: 7%;}
#box-4 .box1 .box4_title_img{width: 47%;padding: 20px 0;}
#box-4 .box1 .t1{font-size: 40px;color: #000;}
#box-4 .box1 .box_img{width: 80%;margin: 20px 0 50px 0;}
#box-4 .box1 .desc p{font-size: 22px;color: #000;padding: 5px 0;text-align: justify;position: relative;padding-left: 15px;}
#box-4 .box1 .desc p::before{content: "";width: 7px;height: 7px;background: #000000;display: inline-block;border-radius: 50%;position: absolute;left: 0;top: 20px;}


#box-5{background: url(../image/about_box5_bj.jpg) no-repeat center center;background-size: cover;}
#box-5 .block01{position: relative;margin: 45px -31% 0 -31%;}
#box-5 .box1 {position: relative;overflow: hidden;}
#box-5 .box1 li{padding: 0 1.7%;}
#box-5 .box1 li .img{transform: scale(0.75);transition: 0.5s;border-radius: 20px;overflow: hidden;position: relative;border: 4px solid transparent;}
#box-5 .box1 li.swiper-slide-next .img{border-color: #FFC723;}
#box-5 .box1 .swiper-slide-next .img{transform: scale(1);}
#box-5 .box1 .swiper-slide-next .img::after{opacity: 0;}
#box-5 .block01 .swiper-button-prev,#box-5 .block01 .swiper-button-next{top: 48%;}
#box-5 .block01 .swiper-button-prev{left: 30.3%;}
#box-5 .block01 .swiper-button-next{right: 30.3%;}


@media (min-width: 1199px){
	#box-1, #box-2, #box-3, #box-4, #box-5, #box-6{padding: 120px 0;}
	#box-4{padding: 100px 0;}
}

@media (min-width:1199px) and (max-width:1600px){
	#box-1 .box1>div{align-items: center;}
	#box-1 .box1 .left{padding:0px;}
	#box-1 .box1 .right{width: 50%;margin-right: -10px;}
	
	#box-3 .title_img {margin-left: 80px;}
	#box-3 .box1{margin: 0 40px;}
	#box-3 .swiper-button-prev{left: 15px;}
	#box-3 .swiper-button-next{right: 15px;}
	
	#box-4 .rect{width: 80vw;height: 80vw;position: absolute;left: -20vw;top: -5vw;}
	#box-4 .box1 {padding-right: 0%;width: 51%;}
	#box-4 .box1 .t1 {font-size: 33px;}
	#box-4 .box1 .box_img {width: 73%;margin: 20px 0 40px 0;}
	#box-4 .box1 .desc p {font-size: 20px;}
	#box-4 .box1 .desc p::before{top: 18px;}
	
}
@media (min-width: 1199px) and (max-width: 1500px){
	#box-5 .block01 .swiper-button-prev{left: 30%;}
	#box-5 .block01 .swiper-button-next{right: 30%;}
}
@media (min-width:767px) and (max-width:1199px){
	#box-1{padding: 85px 0;}
	#box-1 .box1>div{align-items: center;}
	#box-1 .box1 .left{padding:0px;}
	#box-1 .box1 .right{width: 50%;margin-right: -20px;}
	#box-1 .box1 .left .desc{font-size: 15px;}
	#box-1 .box1 .left .number {margin-top: 45px;}
	#box-1 .box1 .left .number .num{font-size: 38px;padding: 0 5px;}
	#box-1 .box1 .left .number .num::after {height: 13px;bottom: 3px;}
	#box-1 .box1 .left .number .sup{font-size: 18px;}
	#box-1 .box1 .left .number .num_desc{font-size: 15px;}
	
	#box-1 .fix_video .fix_text .video {max-width: 77%;margin-top: 5px;}
	#box-1 .video_btn {left: calc(50% - 32px);top: calc(50% - 32px);width: 64px;height: 64px;}
	/* #box-1 .content_video .video_img{height: 400px;border-radius: 20px;} */
	
	#box-2 .desc {width: 95%;margin: 0 auto 200px auto;}
	#box-2 .desc p{font-size: 15px;}
	
	#box-3 .title_img {margin-left: 50px;margin-bottom: 25px;}
	#box-3 .box1{margin: 0 25px;}
	#box-3 .box1 li>div {padding: 0 30px;}
	#box-3 .box1 li .img{border-radius: 15px;}
	#box-3 .box1 li .content_img::after{border-radius: 15px;}
	#box-3 .box1 li .content .title{font-size: 18px;}
	#box-3 .box1 li .content .title span{font-size: 36px;}
	#box-3 .box1 li .content .desc p {font-size: 16px;}
	#box-3 .swiper-button-prev{left: 15px;}
	#box-3 .swiper-button-next{right: 15px;}
	
	#box-4{padding: 80px 0;}
	#box-4 .rect {width: 88vw;height: 88vw;position: absolute;left: -21vw;top: -10vw;}
	#box-4 .box1 {padding-right: 0%;width: 55%;}
	#box-4 .box1 .t1 {font-size: 26px;}
	#box-4 .box1 .box_img {width: 66%;margin: 20px 0 40px 0;}
	#box-4 .box1 .desc p {font-size: 20px;}
	#box-4 .box1 .desc p::before{top: 18px;}
	
	#box-5 .block01 .swiper-button-prev{left: 30%;}
	#box-5 .block01 .swiper-button-next{right: 30%;}
	
}
@media (max-width: 850px){
	#box-1 .box1 .left{z-index: 2;padding: 0;}
	#box-1 .box1 .left,#box-1 .box1 .right{width: 100%;}
	#box-1 .box1 .left .desc{font-size: 18px;}
	#box-1 .box1 .left .number .num {font-size: 42px;}
	#box-1 .box1 .right{margin-top: 60px;}
	#box-2 .desc {width: 100%;}
	#box-2 .desc p{font-size: 18px;}
	#box-3 .box1 li>div {padding: 0 25px;}
	#box-3 .box1 li .content .desc p {font-size: 16px;}
	
	#box-4 .box1 {padding-right: 0%; width: 68%;}
	#box-4 .rect {width: 110vw;height: 110vw;position: absolute;left: -30vw;top: -10vw;}
		
	#box-5 .block01 .swiper-button-prev{left: 29%;}
	#box-5 .block01 .swiper-button-next{right: 29%;}
}
@media (max-width:767px){
	#box-1{padding: 60px 0;background: url(../image/about_box1_bjsj.jpg) no-repeat center center;background-size: cover;}
	#box-1 .box1 .left .desc{font-size: 15px;line-height: 1.7;}
	#box-1 .box1 .left .number {margin-top: 40px;}
	#box-1 .box1 .left .number .num {font-size: 30px;padding: 0 5px;}
	#box-1 .box1 .left .number .num::after {height: 10px;bottom: 2px;}
	#box-1 .box1 .left .number .sup{font-size: 15px;}
	#box-1 .box1 .left .number .num_desc{font-size: 13px;}
	#box-1 .box1 .right {margin-top: 50px;}
	#box-1 .content_video{width: 100%;}
	#box-1 .video_btn {left: calc(50% - 25px);top: calc(50% - 25px);width: 50px;height: 50px;}
	#box-1 .fix_video .fix_text .video {max-width: 88%;margin-top: -80px;}
	#box-1 .fix_video i img{top: auto;bottom: -80px;left: calc(50% - 22px);}
	
	#box-2{background: url(../image/about_box2_bjsj.jpg) no-repeat center center;background-size: cover;}
	#box-2 .desc {width: 100%;margin: 0 auto 120px auto;}
	#box-2 .desc p{font-size: 15px;line-height: 1.7;}
	
	#box-3 .title_img {margin-bottom: 15px;}
	#box-3 .box1{margin: 0 -15px;}
	#box-3 .box1 li>div {padding: 0 15px;}
	#box-3 .box1 li .img{border-radius: 15px;}
	#box-3 .box1 li .content_img::after{border-radius: 15px;}
	#box-3 .box1 li .content .title{font-size: 18px;line-height: 1.3;}
	#box-3 .box1 li .content .title span{font-size: 36px;}
	#box-3 .box1 li .content .desc p {font-size: 15px;}
	#box-3 .swiper-button-prev,#box-3 .swiper-button-next{display: none;}
	#box-3 .swiper-pagination{padding-top: 30px;}
	#box-3 .swiper-pagination span{background: rgba(255, 255, 255, 0);border: 1px solid #000;opacity: 1;}
	#box-3 .swiper-pagination .swiper-pagination-bullet-active{background: #000;}
	
	#box-4{padding: 20px 0 380px 0;background: url(../image/about_box4_bjsj.jpg) no-repeat center center;background-size: cover;}
	#box-4 .rect {width: 140vw;height: 140vw;position: absolute;left: -20vw;bottom: 65vw;top: auto;}
	#box-4 .box1 {width: 100%;padding-top: 25px;}
	#box-4 .box1 .box_img {width: 66%;margin: 20px 0 40px 0;}
	
	#box-5 .block01{margin: 35px -10px 0 -10px;}
	#box-5 .block01 li{padding: 0 10px;}
	#box-5 .block01 li .img{border-radius: 15px;transform: scale(1);border: 2px solid #FFC723;}
	#box-5 .block01 .swiper-button-prev,#box-5 .block01 .swiper-button-next{display: none;}
	#box-5 .swiper-pagination{padding-top: 30px;}
	#box-5 .swiper-pagination span{background: rgba(255, 255, 255, 0);border: 1px solid #000;opacity: 1;}
	#box-5 .swiper-pagination .swiper-pagination-bullet-active{background: #000;}
	
}

