header{background: #fff;padding: 23px 0;}
header.fix{background: transparent;}

#banner{position: relative;}
.banner{height: 98vh;overflow: hidden;width: 100%;}
.banner .bannerimg{height: 100%;}
.banner .bannerimg img{width: 100%;height: 100%;object-fit: cover;}
.video_btn{position: absolute;left: calc(50% - 52px);top:calc(55% - 52px);width: 104px;height: 104px;}
.video_btn img{cursor: pointer;transition: all .5s;width: 100%;height: 100%;}
.video_btn img:hover{transform: scale(0.9);}
.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: 100%;max-width: 55%;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);}
#tipDown img{position: absolute;right: calc(50% - 9px);bottom: 50px;width: 18px;animation: tipDown2 2s infinite ease-in-out;}
@keyframes tipDown2{
  0% {transform: translateY(0%);}
  50% {transform: translateY(50%);}
  100% {transform: translateY(0%);}
}


.main_box{background: #FE027D;}
#box-1{position: relative;}
#box-1 .title_content{text-align: center;}
#box-1 .title_content .title p{font-size: 90px;color: #fff;line-height: 1.4;}
#box-1 .block01{width: 88%;margin: auto;}
#box-1 .box1{position: relative;margin: 0 -40px -40px -40px;overflow: hidden;padding-top: 60px;}
#box-1 .noEvent{pointer-events: none;}
#box-1 .box1 li>div{padding: 20px 65px;}
#box-1 .box1 li{transform: rotate(9deg);}
#box-1 .box1 li:nth-child(1)>div{transform: translateX(19vw) translateY(0px) translateZ(0px);}
#box-1 .box1 li:nth-child(2)>div{transform: translateX(6vw) translateY(0px) translateZ(0px);}
#box-1 .box1 li:nth-child(3)>div{transform: translateX(-7vw) translateY(0px) translateZ(0px);}
#box-1 .box1 li:nth-child(4)>div{transform: translateX(-20vw) translateY(0px) translateZ(0px);}


#box-2 {overflow: inherit;padding-top: 50px;}
#box-2 .box1{position: relative;display: flex;align-items: flex-start;width: 100%;justify-content: space-between;}
#box-2 .left{position: sticky;top: 50px;left: 11%;display: flex;color: #fff;}
#box-2 .left div{writing-mode: vertical-lr;}
#box-2 .left .t1{font-size: 85px;line-height: 1;}
#box-2 .left .t2{font-size: 180px;line-height: 1.4;}
#box-2 .right{width: 64.5%;margin-top: -20px;}
#box-2 .right li{padding: 20px 0;}
#box-2 .right li .img{border-radius: 10px 0px 0 10px;overflow: hidden;}



@media (min-width:1500px) and (max-width:1750px){#box-2 .left{left: 7%;}}
@media (min-width:1199px) and (max-width:1500px){
	#box-1 .title_content .title p{font-size: 78px;}
	#box-2 .left{left: 50px;}
	#box-2 .left .t1{font-size: 78px;line-height: 1;}
	#box-2 .left .t2{font-size: 158px;line-height: 1.43;}
}
@media (min-width:767px) and (max-width:1199px){
	.banner{height: 750px;}
	.video_btn{left: calc(50% - 40px);top:calc(50% - 40px);width: 80px;height: 80px;}
	.fix_video .fix_text .video {max-width: 77%;margin-top: 5px;}
	
	#box-1 .box1{padding-top: 50px;}
	#box-1 .title_content .title p{font-size: 53px;}
	#box-1 .box1 li>div{padding: 20px 30px;}
	
	#box-2 .left{left: 50px;}
	#box-2 .left .t1{font-size: 52px;line-height: 1;}
	#box-2 .left .t2{font-size: 100px;line-height: 1.43;}
}
@media (min-width: 767px) and (max-width: 850px){
	#box-1 .title_content .title p{font-size: 42px;}
	#box-2 .left{left: 40px;}
	#box-2 .left .t1{font-size: 42px;}
	#box-2 .left .t2{font-size: 80px;}
}
@media (max-width:767px){
	header{padding: 15px 0;}
	
	.banner{/* height: 325px; */height: 385px;}
	.video_btn{left: calc(50% - 25px);top:calc(53% - 25px);width: 50px;height: 50px;}
	.fix_video .fix_text .video {max-width: 88%;margin-top: -80px;}
	.fix_video i img{top: auto;bottom: -80px;left: calc(50% - 22px);}
	#tipDown img{right: calc(50% - 7px);bottom: 30px;width: 14px;}
	
	
	#box-1 .title_content .title p{font-size: 24px;line-height: 1.5;padding-bottom: 3px;}
	#box-1 .block01{width: 80%;}
	#box-1 .box1{padding-top: 35px;}
	#box-1 .box1 li>div{padding: 15px 15px;}
	#box-1 .box1 li{transform: rotate(6deg);}
	#box-1 .box1 li:nth-child(1)>div{transform: translateX(17vw) translateY(0px) translateZ(0px);}
	#box-1 .box1 li:nth-child(2)>div{transform: translateX(0vw) translateY(0px) translateZ(0px);}
	#box-1 .box1 li:nth-child(3)>div{transform: translateX(-17vw) translateY(0px) translateZ(0px);}
	#box-1 .box1 li:nth-child(4)>div{transform: translateX(0vw) translateY(0px) translateZ(0px);}
	
	#box-2 .box1{flex-wrap: wrap;padding: 0 20px;}
	#box-2 .left{left: 0px;position: relative;top: 0;text-align: center;flex-wrap: wrap;flex-direction: column-reverse;width: 100%;}
	#box-2 .left div {writing-mode: initial;width: 100%;}
	#box-2 .left .t1{font-size: 24px;line-height: 1.3;}
	#box-2 .left .t2{font-size: 56px;}
	#box-2 .right{width: 100%;margin-top: 30px;}
	#box-2 .right li {padding: 12px 0;}
	#box-2 .right li .img{border-radius: 8px;}
}