html {
  /* font-size: 26.6666666666666667vw; */
  margin: 0 auto;
}
body {
  /* font-size: 0.14rem; */
}

/* 小屏幕 */
@media screen and (max-width:768px) {
  html {
    font-size: 26.6666666666666667vw;
  }

  .header {
  }
}

.wrap {
  position: relative;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  /* background-color: pink; */
}

.header {
  overflow: hidden;
  border-top: 1px solid #DEE9FF;
  border-bottom: 1px solid #F4F7FB;
  background: linear-gradient(133deg, #FFF5F6 0%, #F7E4EB 25%, #F2E3F3 54%, #D6E3FE 85%, #C6EFFF 100%);
}

.header .logo {
  position: relative;
  color: #256BF7;
  margin-bottom: 0;
}

.header .logo img {
  width: 100%;
}

.header .logo span {
  position: absolute;
  top: 0;
  left: -100vw;
}


.header .slogan {
  font-family: 'at-songti-black', 'at-songti-regular';
  /* font-family: STSongti-SC-Black, STSongti-SC; */
  font-weight: 900;
}

.header .publicity {
  border-radius: 20px;
  overflow: hidden;
  font-size: 0;
}

.header .publicity_video_clickLayer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.header .publicity_video_playButton {
  position: absolute;
  z-index: 5;
  border-radius: 50%;
  background-color: #fff;
  user-select: none;
}



.header .publicity_video_playButton img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  width: 35%;
}

.header .publicity video {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

.header .download {
}

.header .download_ios,.download_google  {
  display: inline-block;
}

.header .download_ios img,.download_google img {
  width: 100%;
}

.header .download_google {
}



.container {
  padding: 0;
}


/* main */
.main {
}

.main .title  {
  font-family: 'at-songti-black', 'at-songti-regular';
  font-weight: 900;
  color: #333;
}

.main .main_case {
  /* margin: 0 6.4vw 0 4.8vw; */
  display: flex;
  flex-wrap: wrap;
}


.main .main_case_item {
  display: flex;
  justify-content: center;
  align-items: start;
}

.main .main_case_item_img {
  flex-shrink: 0;
}

.main .main_case_item_scene {
}

.main .main_case_item_scene h3 {
  /* font-family: 'at-alipuhui-bold', 'at-alipuhui-regular'; */
  color: rgba(0,0,0,0.85);
  font-weight: 900;
}

.main .main_case_item_scene h4 {
  /* font-family: 'at-alipuhui-regular'; */
  margin: 0;
  color: #666666;
  font-weight: normal;
}


/* footer */


.main [text-obs-enter] {
  opacity: 0;
  transform: translateY(15px);
}

.head-enter {
  transform: translateY(15px);
  animation: head-enter-ani 1s 1 forwards;
}

.ani-delay-5 {
  animation-delay: 0.5s;
}

.ani-delay-7 {
  animation-delay: 0.7s;
}

.ani-delay-10 {
  animation-delay: 1s;
}

.ani-delay-15 {
  animation-delay: 1.5s;
}


@keyframes head-enter-ani {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}






/* >1200 */
@media screen and (min-width:1200px) {

}
/* > 960 < 1200 */
@media screen and (min-width:960px) and (max-width:1199px) {

}

@media screen and (min-width:768px) and (max-width:959px) {

}
/* @media only screen and(min-width:480px)and(max-width:767px) {

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

} */




/* 

@media screen and (min-width: 320px) {html{font-size:50px;}}

@media screen and (min-width: 360px) {html{font-size:56.25px;}}

@media screen and (min-width: 375px) {html{font-size:58.59375px;}}

@media screen and (min-width: 400px) {html{font-size:62.5px;}}

@media screen and (min-width: 414px) {html{font-size:64.6875px;}}

@media screen and (min-width: 440px) {html{font-size:68.75px;}}

@media screen and (min-width: 480px) {html{font-size:75px;}}

@media screen and (min-width: 520px) {html{font-size:81.25px;}}

@media screen and (min-width: 560px) {html{font-size:87.5px;}}

@media screen and (min-width: 600px) {html{font-size:93.75px;}}

@media screen and (min-width: 640px) {html{font-size:100px;}}

@media screen and (min-width: 680px) {html{font-size:106.25px;}}

@media screen and (min-width: 720px) {html{font-size:112.5px;}}

@media screen and (min-width: 760px) {html{font-size:118.75px;}}

@media screen and (min-width: 800px) {html{font-size:125px;}}

@media screen and (min-width: 960px) {html{font-size:150px;}} */