@font-face{
    font-family: 'youshe';
    src: url("YouSheBiaoTiHei-2.ttf");
}

html,body{ width: 100%; height: 100%; overflow: hidden;font-size: 16px;color: #fff;}
header{ position: fixed; left: 0; top: 0; z-index: 99;}

#swiper2{ position: relative;}
.swiper-container{ width: 100%; height: 100%; float: left;}
.swiper-container .swiper-button-prev{ width: 20px; height: 34px; background: url(../images/jiantou1.png) no-repeat center center; outline:none; left: 100px;background-size: cover;}
.swiper-container .swiper-button-prev::after{ content: "";}
.swiper-container .swiper-button-next{ width: 20px; height: 34px; background: url(../images/jiantou2.png) no-repeat center center; outline:none; right: 100px;background-size: cover;}
.swiper-container .swiper-button-next::after{ content: "";}

.swiper-container .swiper-pagination-bullet{ width: 12px; height: 12px; background-color: #fff;opacity: 1; outline:none;}
.swiper-container .swiper-pagination-bullet-active{ background-color: #f68121;}

.index1{ ;}
.index2{ background: url(../images/index2.jpg) no-repeat center center;background-size: cover;}
.index3{ background: url(../images/index3.jpg) no-repeat center center;background-size: cover;}
.index4{ display: flex; align-items: center; overflow: hidden; position: relative;}
.index5{ background: url(../images/index5.jpg) no-repeat center center;background-size: cover;}
.index6{ background: url(../images/index6.jpg) no-repeat center center;background-size: cover;}
.index7{ background: url(../images/index7.jpg) no-repeat center center;background-size: cover;}
.index8{ }

.index1 .bj{ width: 100%; height: 100%; padding: 0 100px; float: left; box-sizing: border-box; }

.index4 .video{position: absolute; z-index: -1; top:0; left:0;}
.index4 .video video{top:0; left:0; position: relative;
    height: calc(100vh - var(--browser-address-bar, 0px));
    font-family: "object-fit:cover;object-position:calc(50% + var(--asset-x-offset-mobile)) calc(50% + var(--asset-y-offset-mobile))";
    object-fit: cover;
    object-position: 50% 50%;
    object-position: calc(50% + var(--asset-x-offset-desktop)) calc(50% + var(--asset-y-offset-desktop));
    width: 100%;
    z-index: -1;}
.index4  #playbj{ width: 100%; height: 100%; float: left;background-color: rgba(0, 0, 0, 0.5);position: absolute; z-index: 2;}
.index4 .modular1{ position: absolute; z-index: 99; left:0; top:0;}
.index4  #imgplay{ position: absolute;left: 50%;margin-left: -50px; top: 50%;margin-top: -50px; z-index: 4;}

.modular1{ width: 100%; height: 100%; float: left; box-sizing: border-box; padding:110px 10%;display: flex;flex-direction: column;justify-content: center;}
.modular1 .p1{ width: 100%; float: left; font-size: 70px; font-family: 'youshe'; color: #f68121;}
.modular1 .p2{ width: 100%; float: left;margin-top: 25px;}
.modular1 .more{ width: 160px; height: 40px; float: left; line-height: 40px; text-align: center;border: 1px solid #fff;border-radius: 20px;color: #fff;margin-top: 40px;}

.modular2{ width: 100%; height: 100%; float: left; box-sizing: border-box; padding:110px 100px;display: flex;flex-direction: column;justify-content: center;}
.modular2 .p1{ width: 100%; float: left; font-size: 70px; font-family: 'youshe'; color: #f68121;}
.modular2 .p1::after{  content: ""; display: block; width: 40px; height: 2px; background-color: #FFFFFF; margin-top: 10px;}
.modular2 .p2{ width: 100%; float: left; font-size: 36px;margin-top: 15px; font-family: 'youshe';}
.modular2 .more{ width: 160px; height: 40px; float: left; line-height: 40px; text-align: center;border: 1px solid #fff;border-radius: 20px;color: #fff;margin-top: 40px;font-size: 20px;}

.modular3{ width: 100%; float: left;  box-sizing: border-box; padding-top:110px;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.modular3 .title{ font-size: 70px;margin-top: 40px; font-family: 'youshe'; color: #f68121;}
.modular3 .box{ width: 100%; float: left;display: flex;justify-content: center;align-items: center;margin-top: 30px;}
.modular3 .box .text{ width: 420px; height: 380px; float: left;background-color: #f9f9f9;margin-right: -90px;position: relative; z-index: 2; padding: 30px;box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;}
.modular3 .box .text .p1{ font-size: 20px; color: #f68121;}
.modular3 .box .text .p1 a{ color: #f68121;}
.modular3 .box .text .p2{ font-size: 14px; color: #666;margin-top: 30px;line-height: 34px;}
.modular3 .box .img{ width: 684px; height: 480px; float: left; overflow: hidden;display: flex;justify-content: center;align-items: center;position: relative; z-index: 1;}
.modular3 .box .img a{ width: 100%; height: 100%; float: left;}
.modular3 .box .img img{ width: 100%; height: 100%;}


@media (max-width: 1200px) {
	#swiper3 .swiper-pagination{ bottom: 110px;} 
	/* .modular3 .title{ font-size: 0.7rem; margin-top: 0.4rem; font-family: 'youshe';}
	.modular3 .box{ width: 100%; float: left;display: flex;justify-content: center;align-items: center;margin-top: 0.3rem;}
	.modular3 .box .text{ width: 4.2rem; height: 3.8rem; float: left;background-color: #f9f9f9;margin-right: -0.9rem;position: relative; z-index: 2; padding: 0.3rem;box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;}
	.modular3 .box .text .p1{ font-size: 0.2rem; color: #333;}
	.modular3 .box .text .p2{ font-size: 0.14rem; color: #666;margin-top: 0.3rem;line-height: 0.34rem;}
	.modular3 .box .img{ width: 6.84rem; height: 4.8rem; float: left; overflow: hidden;display: flex;justify-content: center;align-items: center;position: relative; z-index: 1;}
	.modular3 .box .img img{ width: 100%;}
	#swiper3 .swiper-pagination{ bottom: 110px;} */
}

@media (max-width: 750px) {
	
	.modular1{  padding:3rem 1rem 0 1rem; display: block;}
	.modular1 .p1{ font-size: 0.7rem; }
	.modular1 .p2{ margin-top: 0.1rem;font-size: 0.26rem;}
	.modular1 .more{ width: 1.6rem; height: 0.4rem; line-height: 0.4rem; border-radius: 0.2rem; margin-top: 0.4rem;font-size: 0.2rem;}
	
	.index1 .bj{padding: 0 0.1rem; }
	.swiper-container .swiper-button-prev{ width: 0.2rem; height: 0.34rem; left: 0.1rem;}
	.swiper-container .swiper-button-next{ width: 0.2rem; height: 0.34rem; right: 0.1rem;}
	.modular2{ padding:3rem 1rem 0 1rem; display: block;}
	.modular2 .p1{ font-size: 0.7rem;}
	.modular2 .p1::after{ width: 0.4rem; height: 2px; margin-top: 0.1rem;}
	.modular2 .p2{ font-size: 0.36rem; margin-top: 0.15rem; }
	.modular2 .more{ width: 1.6rem; height: 0.4rem; line-height: 0.4rem; border-radius: 0.2rem; margin-top: 0.4rem;font-size: 0.2rem;}
	
	#swiper3 .swiper-pagination{ bottom: 1.1rem;} 
	.modular3 .title{ font-size: 0.7rem; margin-top: 0.4rem;}
	.modular3 .box{ display: block; padding: 0 20px;box-sizing: border-box;position: relative;margin-top: 0.2rem;}
	.modular3 .box .text{ width: 100%; height: auto; margin-right: 0; margin-top: 4.5rem; padding: 0.3rem 0.4rem;box-sizing: border-box;}
	.modular3 .box .text .p1{ font-size: 0.26rem;}
	.modular3 .box .text .p2{ font-size: 0.2rem; margin-top: 0.2rem; line-height: 0.36rem;}
	.modular3 .box .img{ width: 100%; height: 4.5rem;position: absolute;left: 0;top: 0; padding: 0 20px;box-sizing: border-box;}
}