@charset "utf-8";
html{background: #fff;
  width: 100%;height: 100%;transition:all 0s ease 0s;-webkit-transition:all 0s ease 0s;-moz-transition:all 0s ease 0s;}
.swiper-slide-active *{ transition:all 2s ease 0s; -webkit-transition:all 2s ease 0s;-moz-transition:all 2s ease 0s;}

.body{position:fixed;left:0;top:0;width:100%;height:100%;}
.headerTop{position:absolute;width:100%;top: 0;display: flex;}
.headerTop .logo{display: flex;align-items: center;}
.headerTop .logo img{display:block;height: 48.4px;}

/* swiper */
.swiper-wrapper {transform-style: initial!important;}
.swiper-container{width:100%;height:100%;background:#fff;}
.swiper-slide{width:100%;height:100%;overflow:hidden;}
.swiper-slide1{background: rgb(61, 78, 238) url("../images/m1_bg.png") center bottom no-repeat;}
img{display:block;}

.swiperBox{width:1400px;margin:0 auto;height:100%;padding-top: 80px;display:flex;-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.swiperBox .header{display:flex;flex-direction:column-reverse;position:relative;z-index:100;}
.swiperBox .main{flex:1;width:100%;height:100%;background-repeat:no-repeat;background-position:center center;align-items:center;position:relative;z-index:10;}
.swiperBox .footer {width: 100%;height: 48px;line-height: 48px;background-color: #fff;position: fixed;bottom: 0;left: 0;z-index: 10;text-align: center;font-size: 14px;color: #333;}

/* 第一 */
.swiperBox .main_m1 {}
.swiperBox .main_m1 .m1 {position: absolute;top: 200px;z-index: 1;width: 721px;height: 432px;border: 1px solid #fff;background: rgba(255, 255, 255, 0.12) url("../images/waitting.svg") center center/661px 372px no-repeat;backdrop-filter: blur(20px);margin: 12px;}
.swiperBox .main_m1 .m1::before {content: '';position: absolute;right: 19px;top: -131px;width: 352px;height: 352px;background: url("../images/pollee.svg") center center/contain no-repeat;}
.swiperBox .main_m1 .m1::after {content: '';position: absolute;left: -12px;top: -12px;width: calc(100% + 24px);height: calc(100% + 24px);background: linear-gradient(45deg, #fff 0%, #fff 100%) top left/24px 24px no-repeat, linear-gradient(45deg, #fff 0%, #fff 100%) top right/24px 24px no-repeat, linear-gradient(45deg, #fff 0%, #fff 100%) bottom left/24px 24px no-repeat, linear-gradient(45deg, #fff 0%, #fff 100%) bottom right/24px 24px no-repeat;}
.swiperBox .main_m1 .m1_1 {position: absolute;bottom: 0;right: 33%;}
.swiperBox .main_m1 .m1_2 {position: absolute;bottom: 0;right: 15%;}
.swiperBox .main_m1 .m1_3 {position: absolute;bottom: 0;right: 0;}
@media screen and (max-width: 1620px) {
  .swiperBox {width: 1400px;}
}

@media screen and (max-width: 1440px) {
  .swiperBox {width: 1200px;}
}

@media screen and (max-width: 1300px) {
}

@media screen and (max-width: 1200px) {
  .swiperBox {width: 1000px;}
}

@media screen and (max-height: 800px) {
}

.swiper-top{position: fixed;right: 32px;bottom: 17%;z-index: 9999;display: none;}
.swiper-top a{display: block;width: 42px;height: 42px;background-image:url("../images/toTop.png");background-repeat:no-repeat;background-size:73% 73%;background-position:center center;transition:all 1s ease 0s; -webkit-transition:all 1s ease 0s;-moz-transition:all 1s ease 0s;border-radius: 4px;}
.swiper-top a:hover{background-color: rgba(0, 0, 0, 0.2);}

/* PC动画预留 */
/* M1-透明 */
.swiper-slide,
.swiperBox .main_m1 .m1,
.swiperBox .main_m1 img
{filter:alpha(opacity=0);opacity: 0.0; }

/* M1-位移 */
.swiperBox .main_m1 .m1 {
  transform: translate(0,-100%); -moz-transform: translate(0,-100%); -webkit-transform: translate(0,-100%); -o-transform: translate(0,-100%); -ms-transform: translate(0,-100%);
}
.swiperBox .main_m1 img {
  transform: translate(0,100%); -moz-transform: translate(0,100%); -webkit-transform: translate(0,100%); -o-transform: translate(0,100%); -ms-transform: translate(0,100%);
}

.swiper-slide-active 
{ transition:all 2s ease 0s; -webkit-transition:all 2s ease 0s;-moz-transition:all 2s ease 0s;}
/* M1-时间 */
.swiper-slide-active .swiperBox .main_m1 .m1
{ transition:all 0.3s ease 0.1s; -webkit-transition:all 0.3s ease 0.1s;-moz-transition:all 0.3s ease 0.1s;}
.swiper-slide-active .swiperBox .main_m1 .m1_1 { transition:all 0.8s ease 0.1s; -webkit-transition:all 0.8s ease 0.1s;-moz-transition:all 0.8s ease 0.1s;}
.swiper-slide-active .swiperBox .main_m1 .m1_2 { transition:all 0.8s ease 0.0.2s; -webkit-transition:all 0.8s ease 0.2s;-moz-transition:all 0.8s ease 0.2s;}
.swiper-slide-active .swiperBox .main_m1 .m1_3 { transition:all 0.8s ease 0.3s; -webkit-transition:all 0.8s ease 0.3s;-moz-transition:all 0.8s ease 0.3s;}
/* M1-恢复 */
.swiper-slide-active,
.swiper-slide-active .swiperBox .main_m1 .m1,
.swiper-slide-active .swiperBox .main_m1  img
{filter:alpha(opacity=100);opacity:1;transform: translate(0%,0%); -moz-transform: translate(0%,0%); -webkit-transform: translate(0%,0%); -o-transform: translate(0%,0%); -ms-transform: translate(0%,0%); }

/* 移动端 */
@media screen and (max-width: 1024px) { 
  html {min-width: 320px;font-size: calc(100vw / 7.5);font-size: -webkit-calc(100vw / 7.5); -webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: none;user-select: none;scroll-behavior: smooth;}
  .headerTop {left: 0.6rem;top: 0.8rem;}
  .headerTop .logo img{height: 0.484rem;}
  .swiper-slide1{background: rgb(61, 78, 238) url("../images/m1_bg_web.png") center bottom/100% no-repeat;}
  .swiperBox {width: 100%;padding-top: 0;}
  .swiperBox .footer {height: 0.48rem;line-height: 0.48rem;font-size: 0.2rem;}
  .swiperBox .main_m1 {}
  .swiperBox .main_m1 .m1 {top: 3.06rem;left: 50%;z-index: 1;width: 6.62rem;height: 4.98rem;background: rgba(255, 255, 255, 0.12) url("../images/waitting.svg") center center/6.02rem 4.38rem no-repeat;backdrop-filter: blur(0);margin: 0 0 0 -3.31rem;z-index: -1;}
  .swiperBox .main_m1 .m1::before {right: 0.1rem;top: -1.39rem;width: 3.52rem;height: 3.52rem;}
  .swiperBox .main_m1 .m1::after {left: -0.12rem;top: -0.12rem;width: calc(100% + 0.24rem);height: calc(100% + 0.24rem);background: linear-gradient(45deg, #fff 0%, #fff 100%) top left/0.24rem 0.24rem no-repeat, linear-gradient(45deg, #fff 0%, #fff 100%) top right/0.24rem 0.24rem no-repeat, linear-gradient(45deg, #fff 0%, #fff 100%) bottom left/0.24rem 0.24rem no-repeat, linear-gradient(45deg, #fff 0%, #fff 100%) bottom right/0.24rem 0.24rem no-repeat;}
  .swiperBox .main_m1 .m1_1 {width: 5.9rem;right: 38%;}
  .swiperBox .main_m1 .m1_2 {width: 5.1rem;right: 17%;}
  .swiperBox .main_m1 .m1_3 {width: 4rem;right: -3.5%;}
  .swiper-top {right: 14px;}
  .swiper-top a {width: 26px;height: 26px;}
}