﻿/*banner*/
#banner{position: relative;}
.banner{height: 100vh;overflow: hidden;width: 100%;}
.banner .swiper-wrapper{height: 100%;}
.banner .swiper-slide .bannerimg{display: flex;}
.banner .swiper-slide .bannerimg,.banner .swiper-slide .bannerimg img{width: 100%;height: 100%;object-fit: cover;}

.banner .swiper-slide.swiper-slide-active .bannerimg{-webkit-animation: scaleImg 2s forwards ease;animation: scaleImg 2s forwards ease;}
.banner .swiper-slide .content{height: 100%;width: 100%;position: absolute;top: 0;align-content: center;opacity: 0;}
.banner .swiper-slide .content .container {width: 100%;}
.banner .swiper-slide .content .img{width: 20%;}

.banner .swiper-slide.swiper-slide-active .content{opacity: 1; transform: scale(1.2);-webkit-animation: scaleDownFadeIn 1.4s forwards ease;animation: scaleDownFadeIn 1.4s forwards ease; -webkit-filter: blur(12px);filter: blur(12px);}
@-webkit-keyframes scaleDownFadeIn {
    0% {opacity: 0;transform: scale(1.2);}
    100% {opacity: 1;-webkit-filter: blur(0px);filter: blur(0px);transform: scale(1);}
}
@keyframes scaleImg {
    0% {transform: scale(1);}
    100% {transform: scale(1.05);}
}

#banner .banner_swiper_bottom{position: absolute!important;width: 100%;bottom: 35px;z-index: 3;display: flex;align-items: center;justify-content: center;}
#banner .banner_swiper_logo{margin: 0 35px;width: 100px;transition: 0.8s;}
#banner .banner_swiper_logo svg{display: block;vertical-align: middle;}
#banner .banner_swiper_logo.banner_swiper_logo1{transition: 0s;}
#banner .banner_swiper_logo #g1,#banner .banner_swiper_logo #g2,#banner .banner_swiper_logo #g3,#banner .banner_swiper_logo #g4{transition: 0.7s;}
#banner .banner_swiper_btn{width: 40px;height: 40px;cursor: pointer;}
#banner .banner_swiper_btnL{background: url(../image/banner_jt_left.png) no-repeat center top;background-size: contain;left: 30px;}
#banner .banner_swiper_btnR{background: url(../image/banner_jt_right.png) no-repeat center top;background-size: contain;right: 30px;}
.banner_swiper_logo .svg_t1{transform: translate(180px, 55px);}
.banner_swiper_logo .svg_t2{transform: translate(305px, 175px);}
.banner_swiper_logo .svg_t3{transform: translate(55px, 175px);}
.banner_swiper_logo .svg_t4{transform: translate(180px, 300px);}


#box-1{background: url(https://www.chenxianggui.com/view/img/beijin1.jpg) no-repeat center center;background-size: cover;position: relative;}
#box-1 .box1 .left{width: 43.5%;}
#box-1 .box1 .title_img{margin-left: 0;max-width: 560px;width: 36vw;margin-bottom: 45px;}
#box-1 .box1 .left .desc{font-size: 18px;line-height: 1.8;text-align: justify;}
#box-1 .box1 .left .number{margin: 60px 0 70px 0;}
#box-1 .box1 .left .number .num{font-size: 58px;font-weight: bold;line-height: 1.2;position: relative;display: inline-block;padding: 0 10px;}
#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: 53%;position: relative;}
#box-1 .box1 .right .dt_logo{width: 7.8%;position: absolute;right: 12.2%;bottom: 34%;animation: bt 1.5s infinite ease-in-out;}
@keyframes bt{
	0%{transform: translateY(0px);}
	50%{transform: translateY(-10px);}
	100%{transform: translateY(0px);}
}

#box-1 .box2 .content_video{width:100%;position: relative;margin-top: 60px;}
#box-1 .box2 .content_video .video_img{border-radius: 25px;overflow: hidden;border: 1px solid #fff;}
#box-1 .box2 .content_video .video_img img{height: 100%;}
#box-1 .box2 .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 .box2 .video_btn img{width: 38%;cursor: pointer;transition: all .5s;}
#box-1 .box2 .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 .box2 .video_btn span:nth-child(2){animation-delay: 0.8s;}
#box-1 .box2 .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 .box2 .fix_video {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 9999;display: none;}
#box-1 .box2 .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 .box2 .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 .box2 .fix_video .fix_text .video {width: 100%;max-width: 55%;margin: 0 auto;position: relative;margin-top: 50px;}
#box-1 .box2 .fix_video .fix_text .video video {width: 100%;position: relative;z-index: 100;}
#box-1 .box2 .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/index_box2_bj.png) no-repeat center center;background-size: cover;position: relative;padding-bottom: 0;}
#box-2 .box1{width: 93%;padding-right: 40px;margin-top: 50px;align-items: flex-end;}
#box-2 .box1 .left{width: 60%;}
#box-2 .box1 .right{width: 35%;padding-bottom: 90px;}
#box-2 .box1 .right ul{display: flex;flex-wrap: wrap;margin:0px -25px;}
#box-2 .box1 .right ul li{width: 50%;}
#box-2 .box1 .right ul li>div{padding: 30px 25px;transition: 0.5s;}
#box-2 .box1 .right ul li>div:hover{transform: translateY(-10px);}


#box-3{background: #F8F8F8;padding-bottom: 0;}
#box-3 .block01{position: relative;}
#box-3 .box1{margin-top: 45px;overflow: hidden;position: relative;}

#box-3 .box1 ul{transition: 0.01s!important;transition-duration: 0.01s!important;}
#box-3 .box1 li{width: 76.5%;transition: 0.01s!important;}
#box-3 .box1 li>div{transition: 0.5s;transform: scale(0.9);}
#box-3 .box1 li.swiper-slide-active>div{transform: scale(1);}

/*#box-3 .box1 li{width: 76%;transition: 0.2s;}*/
#box-3 .box1 li>div{position: relative;}
#box-3 .box1 li .img01{padding-bottom: 80px;margin-top: 50px;}
#box-3 .box1 li.swiper-slide-active .img01{margin-top: 0px;}
#box-3 .box1 li .img01 img{border-radius: 25px;overflow: hidden;-webkit-transform: translate3d(0, 0, 0);}
#box-3 .box1 li.swiper-slide-active img{filter: opacity(1);transition: 0.2s;}
#box-3 .box1 li .img img{width: 100%;}
#box-3 .box1 li .img02{position: absolute;width: 30%;left: -10%;bottom: -20px;z-index: 2;transform: scale(0);transition: 0.5s;}
#box-3 .box1 li.swiper-slide-active .img02{transform: scale(1);}
#box-3 .swiper-pagination3{bottom: 95px;}
#box-3 .swiper-pagination3 span{background:#000;border: 1px solid #000000;background: transparent;opacity: 1;}
#box-3 .swiper-pagination3 span.swiper-pagination-bullet-active{background: #000;}
#box-3 .swiper-button-prev3,#box-3 .swiper-button-next3{top: 45%;}
#box-3 .swiper-button-prev3{left: -6%;background: url(../image/btn_L1.png) no-repeat center center;background-size: contain;}
#box-3 .swiper-button-next3{right: -6%;background: url(../image/btn_R1.png) no-repeat center center;background-size: contain;}
#box-3 .swiper-button-prev3:hover {background: url(../image/btn_L2.png) no-repeat center center;background-size: contain;}
#box-3 .swiper-button-next3:hover {background: url(../image/btn_R2.png) no-repeat center center;background-size: contain;}

#box-4{background: #F8F8F8;padding-top: 30px;margin-top: -10px;}
#box-4 .box1{background: #fff;padding:50px 40px;border-radius: 25px;overflow: hidden;}
#box-4 .box1 ul{display: flex;flex-wrap: wrap;}
#box-4 .box1 ul li{width: 33.3%;padding:35px 45px;}
#box-4 .box1 ul li>div{display: flex;transition: 0.5s;}
#box-4 .box1 ul li>div:hover{transform: translateY(-10px);}
#box-4 .box1 ul li .title_num{font-size: 70px;width: 100px;}
#box-4 .box1 ul li .title_num span{font-size: 40px;padding-left: 5px;}
#box-4 .box1 ul li .content{width:calc(100% - 100px);}
#box-4 .box1 ul li .content .title p{font-size: 26px;font-weight: bold;line-height: 1.2;position: relative;display: inline-block;padding: 0 5px;z-index: 1;}
#box-4 .box1 ul li .content .title p::after{content: '';width: 100%;height: 14px;background: #d03233;position: absolute;left: 0;bottom: 0px;z-index: -1;}
#box-4 .box1 ul li .content .desc p{font-size: 16px;color: #666;padding-top: 10px;}
#box-4 .box1 .btn{margin: 20px 0;}


#box-5{background: url(../image/index_box5_bj1.jpg);background-size: cover;height: 966px;}
#box-5 .title_img {width: 30vw;max-width: 460px;}
#box-5 .box{width: 48%;border-radius: 20px;background: rgba(255, 255, 255, .4);padding: 50px 25px 35px 25px;}
#box-5 .box .title{text-align: center;padding-bottom: 30px;}
#box-5 .box .title p{font-size: 48px;display: inline-block;position: relative;z-index: 1;font-weight: bold;padding: 0 10px;}
#box-5 .box .title p::after{content: '';width: 100%;height: 18px;background: #FAC02A;position: absolute;left: 0;bottom: 7px;z-index: -1;}
#box-5 .box .title .img{width: 60%;margin: auto;max-width: 380px;}
#box-5 .box .content{height: 23.7vw;overflow: hidden;position: relative;max-height: 455px;}
#box-5 .box .content ul{flex-wrap: wrap;flex-direction: column;width: 100%!important;}
#box-5 .box .content ul li{height: auto;}
#box-5 .box li>div{padding: 15px;}
#box-5 .swiper-pagination span{background: rgba(255, 255, 255, 0);border: 1px solid #fff;opacity: 1;}
#box-5 .swiper-pagination .swiper-pagination-bullet-active{background: #fff;}


#box-6{padding-top: 140px;}
#box-6 .box1 {align-items: flex-end;padding-bottom: 10px;}
#box-6 .title_img{margin: 0;}


#box-6 #news_list ul li{padding-bottom: 0;}
#box-6 #news_list ul li a{border-radius: 0px;}
#box-6 #news_list ul li a .img{border-radius: 18px;overflow: hidden;}
#box-6 #news_list ul li .img::after{display: none;}
#box-6 #news_list ul li .content{padding:30px 0px 0px 0px}


@media (min-width: 1800px) and (max-width: 1880px){
	#box-5 .box .content{height: 25.7vw;}
}
@media (min-width: 1199px) and (max-width: 1800px){
	#box-2 .box1{width: 96%;}
	
	#box-3 .block01{padding: 0 6%;}
	#box-3 .box1 li .img01{margin-top: 20px;}
	#box-3 .box1 li .img02{bottom: 0px;}
	#box-3 .swiper-pagination3{bottom: 65px;}
	#box-3 .swiper-button-prev3{left: -0.5%;}
	#box-3 .swiper-button-next3{right: -0.5%;}
	#box-3 .swiper-button-prev3,#box-3 .swiper-button-next3{top: 43%;}
	
	#box-5 .box .content{height: 28vw;}
}
@media (min-width: 1199px) and (max-width: 1600px){
	#box-2 .box1{width: 100%;}
	#box-2 .box1 .right{padding-bottom: 60px;}
	#box-2 .box1 .right ul li>div {padding:25px 22px;}
	#box-4 .box1 ul li .content .title p {font-size: 28px;}
	#box-5 .box .title p {font-size: 43px;}
	#box-5 .box .title p::after{bottom: 5px;}
}
@media (min-width: 1199px) and (max-width: 1500px){
	#box-4 .box1{padding: 55px 40px;}
	#box-4 .box1 ul li {padding: 30px 30px;}
	#box-4 .box1 ul li .title_num {font-size: 56px;width: 78px;}
	#box-4 .box1 ul li .title_num span{font-size: 36px;}
	#box-4 .box1 ul li .content {width: calc(100% - 78px);}
}

@media (min-width: 768px) and (max-width: 1199px){
	.banner{height: 600px;}
	#banner .banner_swiper_bottom{bottom: 30px;}
	#banner .banner_swiper_logo{margin: 0 30px;width: 90px;}
	#banner .banner_swiper_btn{width: 35px;height: 35px;}
	
	#box-1 .box1 .title_img{margin-bottom: 35px;}
	#box-1 .box1 .left .desc{font-size: 16px;}
	#box-1 .box1 .left .number {margin: 45px 0 55px 0;}
	#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 .box2 .fix_video .fix_text .video {max-width: 77%;margin-top: 5px;}
	#box-1 .box2 .video_btn {left: calc(50% - 32px);top: calc(50% - 32px);width: 64px;height: 64px;}
	#box-1 .box2 .content_video .video_img{height: 400px;border-radius: 20px;}
	
	#box-2 .box1{width: 100%;margin-top: 45px;}
	#box-2 .box1 .right{padding-bottom: 55px;}
	#box-2 .box1 .right ul{margin: 0px -20px;}
	#box-2 .box1 .right ul li>div {padding: 15px 20px;}
	
	#box-3 .block01{padding: 0 6%;}
	#box-3 .box1 li .img01{margin-top: 0px;padding-bottom: 50px;}
	#box-3 .box1 li .img02{width: 28%;bottom: 0px;}
	#box-3 .swiper-pagination3{bottom: 20px;}
	#box-3 .swiper-button-prev3{left: -1%;}
	#box-3 .swiper-button-next3{right: -1%;}
	#box-3 .swiper-button-prev3,#box-3 .swiper-button-next3{top: 42%;}
	
	#box-4 {padding-top: 50px;margin-top: 0px;}
	#box-4 .box1{padding: 50px 35px;}
	#box-4 .box1 ul li {width: 50%;padding: 23px 35px;}
	#box-4 .box1 ul li .title_num {font-size: 62px;width: 90px;}
	#box-4 .box1 ul li .title_num span {font-size: 32px;}
	#box-4 .box1 ul li .content {width: calc(100% - 90px);}
	#box-4 .box1 ul li .content .title p {font-size: 26px;}
	#box-4 .box1 ul li .content .title p::after{height: 11px;}
	#box-4 .box1 ul li .content .desc p{font-size: 16px;}
	
	#box-5 .title_img {width: 32vw;}
	#box-5 .box {padding: 40px 25px 30px 25px;}
	#box-5 .box li>div {padding: 10px;}
	#box-5 .box .content {height: 27.3vw;}
	#box-5 .box .title{padding-bottom: 25px;}
	#box-5 .box .title p {font-size: 34px;}
	#box-5 .box .title p::after{bottom: 3px;height: 15px;}
	#box-5 .box .title .img {width: 65%;max-width: 255px;}
	
	#box-6{padding-top: 100px;}
	
}
@media (min-width: 768px) and (max-width: 850px){
	#box-2 .box1 .right{padding-bottom: 40px;}
	#box-2 .box1 .right ul{margin: 0px -10px;}
	#box-2 .box1 .right ul li>div {padding: 12px 10px;}
	#box-5 .box .content {height: 37.3vw;}
	#box-6 #news_list ul li:nth-child(3){display: none;}
}
@media (max-width: 850px){
	#box-1 .box1 .left{z-index: 2;}
	#box-1 .box1 .left,#box-1 .box1 .right{width: 100%;}
	#box-1 .box1 .title_img{width: 47vw;margin-bottom: 45px;}
	#box-1 .box1 .left .desc{font-size: 18px;}
	#box-1 .box1 .left .number .num {font-size: 42px;}
	#box-1 .btn{text-align: center;}
	#box-1 .box1 .right{margin-top: -50px;}
	
	#box-3{padding-bottom: 50px;}
	#box-3 .block01{padding: 0 10%;}
	#box-3 .box1 {margin: 45px -15px 0 -15px;padding-bottom: 20px;}
	#box-3 .box1 ul{transition: 0.3s!important;transition-duration: 0.3s!important;}
	#box-3 .box1 li{padding: 0 15px;}
	#box-3 .box1 li>div{transform: scale(1);}
	#box-3 .box1 li .img01{padding-bottom: 10px;}
	#box-3 .box1 li .img01 img{border-radius: 10px;}
	#box-3 .box1 li .img02{display: none;}
	#box-3 .swiper-pagination3{bottom: -20px;}
	#box-3 .swiper-button-prev3,#box-3 .swiper-button-next3{top: 45%;}
	
	#box-4 .box1 {padding: 40px 20px;}
	#box-4 .box1 ul li {padding: 23px 25px;}
	#box-4 .box1 ul li .title_num {font-size: 48px;width: 70px;}
	#box-4 .box1 ul li .content {width: calc(100% - 70px);}
	#box-4 .box1 ul li .content .title p {font-size: 24px;}
	#box-4 .box1 ul li .content .title p::after{height: 10px;}
	#box-4 .box1 ul li .content .desc p{font-size: 15px;}
	
	#box-5 .title_img {width: 40vw;}
	
}
@media (max-width: 767px){
	.banner{height: 425px;padding-top: 60px;}
	.banner .swiper-slide .content {align-content: flex-start;}
	.banner .swiper-slide .content .img {width: 100%;margin-top: 7vh;}
	.banner .sjbanner{width: 100%;height: 100%;}
	.banner .sjbanner img{width: 100%;height: 100%;object-fit: cover;}
	#banner .banner_swiper_logo svg{width: 70px;height: 70px;}
	#banner .banner_swiper_bottom{bottom: 20px;}
	#banner .banner_swiper_logo{margin: 0 20px;width: 70px;}
	#banner .banner_swiper_btn{width: 30px;height: 30px;}
	
	#box-1 .box1 .title_img{width: 68vw;margin-bottom: 30px;}
	#box-1 .box1 .left .desc{font-size: 15px;line-height: 1.7;}
	#box-1 .box1 .left .number {margin: 40px 0 50px 0;}
	#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 .btn{text-align: center;}
	#box-1 .box1 .right{margin-top: 20px;}
	@keyframes bt{
		0%{transform: translateY(0px);}
		50%{transform: translateY(-6px);}
		100%{transform: translateY(0px);}
	}
	
	#box-1 .box2 .content_video{width: 100%;margin-top: 40px;}
	#box-1 .box2 .content_video .video_img{height: 230px;border-radius: 15px;}
	#box-1 .box2 .video_btn {left: calc(50% - 25px);top: calc(50% - 25px);width: 50px;height: 50px;}
	#box-1 .box2 .fix_video .fix_text .video {max-width: 88%;margin-top: -80px;}
	#box-1 .box2 .fix_video i img{top: auto;bottom: -80px;left: calc(50% - 22px);}
	
	#box-2{background: url(../image/index_box2_bjsj1.jpg) no-repeat center center;background-size: cover;}
	#box-2 .box1,#box-2 .box1 .left,#box-2 .box1 .right{width: 100%;}
	#box-2 .box1{padding-right: 0;flex-direction: column-reverse;margin-top: 40px;}
	#box-2 .box1 .right{padding-bottom: 50px;}
	#box-2 .box1 .right ul{padding:0 35px;margin: -15px;}
	#box-2 .box1 .right ul li>div {padding: 15px;}
	
	
	#box-3 .block01 {padding: 0 0%;}
	#box-3 .box1{margin: 0 -15px;}
	#box-3 .box1 li .img01{margin: 0;}
	#box-3 .swiper-button-prev3, #box-3 .swiper-button-next3{display: none;}
	#box-3 .swiper-pagination3 {bottom: -15px;}
	
	
	#box-4 {padding-top: 20px;margin-top: -20px;}
	#box-4 .box1{padding: 30px 10px 20px 15px;border-radius: 15px;}
	#box-4 .box1 ul li {width: 100%;padding: 20px 15px;}
	#box-4 .box1 ul li .title_num {font-size: 38px;width: 58px;}
	#box-4 .box1 ul li .title_num span {font-size: 22px;padding-left: 3px;}
	#box-4 .box1 ul li .content {width: calc(100% - 58px);}
	#box-4 .box1 ul li .content .title p {font-size: 20px;}
	#box-4 .box1 ul li .content .title p::after{height: 8px;}
	#box-4 .box1 ul li .content .desc p{font-size: 15px;}
	
	#box-5 .title_img {width: 59vw;}
	#box-5 .box{width: 100%;padding: 40px 25px 35px 25px;border-radius: 15px;}
	#box-5 .box li>div {padding:10px;}
	#box-5 .box .content {height: 76.5vw;}
	#box-5 .box .title{padding-bottom: 20px;}
	#box-5 .box .title p {font-size: 28px;}
	#box-5 .box .title p::after{bottom: 3px;height: 12px;}
	#box-5 .box .title .img {width: 73%;max-width: 225px;}
	#box-5 .box2{margin-top: 30px;}
	
	#box-6 {padding-bottom: 50px;padding-top: 60px;}
	#box-6 .box1{justify-content: center;}
	#box-6 #news_list ul {margin: 10px 0px 0 0px;}
	#box-6 #news_list ul li {padding-bottom: 20px;}
	#box-6 #news_list ul li a .img {border-radius: 15px;}
	#box-6 .btn{margin-top: 20px;}
}

