html,
body {
  position: relative;
  width: 100vw;
  padding: 0;
  margin: 0;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
a {
  text-decoration: none;
}
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.bg,
.m-bg {
  position: relative;
  width: 100%;
  display: block;
}
.section-bg {
  display: block;
}
.m-bg,
.m-nav-bg,
.mb-cards,
.m-footer-bg {
  display: none;
}
section {
  width: 100%;
  position: relative;
}
img {
  display: block;
  width: 100%;
}
header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
header .logo {
  position: absolute;
  width: 12%;
  top: -20%;
  left: 18%;
  z-index: 1;
}
header ul {
  position: absolute;
  top: 52%;
  left: 38%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
header ul li {
  display: inline-block;
  margin: 0 2vw;
  vertical-align: middle;
}
header ul li a {
  display: block;
  font-size: 1vw;
  color: #f5e15e;
  cursor: pointer;
}
header ul li a img {
  width: 3.5vw;
  margin-top: -1vw;
}
header ul li:nth-child(4) a > img {
  margin-top: 1%;
}
header .email-box {
  position: absolute;
  width: 20%;
  top: 78%;
  left: 45%;
  background-color: #fff;
  font-size: 1.5vw;
  z-index: 9;
  text-align: center;
  line-height: 3;
  border-radius: 6%;
  display: none;
}
header .email-box::after {
  content: '';
  position: absolute;
  width: 2vw;
  height: 2vw;
  top: -8%;
  left: 50%;
  -webkit-transform: translateX(-50%) rotate(-45deg);
      -ms-transform: translateX(-50%) rotate(-45deg);
          transform: translateX(-50%) rotate(-45deg);
  background-color: #fff;
}
.first .btns-box {
  position: fixed;
  width: 14%;
  top: 30%;
  right: 0;
  text-align: center;
  z-index: 1;
}
.first .btns-box a {
  display: block;
  width: 100%;
  margin-bottom: 2vw;
}
.first .btns-box a img {
  width: 100%;
}
.down {
  position: absolute;
  width: 5%;
  left: 50%;
  bottom: 3vw;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-animation: downAnimation1 1s linear infinite;
          animation: downAnimation1 1s linear infinite;
  cursor: pointer;
}
@-webkit-keyframes downAnimation1 {
  0%,
  100% {
    opacity: 1;
    bottom: 3vw;
  }
  50% {
    opacity: 0.5;
    bottom: 4vw;
  }
}
@keyframes downAnimation1 {
  0%,
  100% {
    opacity: 1;
    bottom: 3vw;
  }
  50% {
    opacity: 0.5;
    bottom: 4vw;
  }
}
@-webkit-keyframes downAnimation2 {
  0%,
  100% {
    opacity: 1;
    bottom: 0vw;
  }
  50% {
    opacity: 0.5;
    bottom: 1vw;
  }
}
@keyframes downAnimation2 {
  0%,
  100% {
    opacity: 1;
    bottom: 0vw;
  }
  50% {
    opacity: 0.5;
    bottom: 1vw;
  }
}
.second .down {
  -webkit-animation: downAnimation2 1s linear infinite;
          animation: downAnimation2 1s linear infinite;
}
.second .video-box {
  position: absolute;
  width: 38%;
  top: 38.5%;
  left: 20%;
  text-align: center;
}
.second .video-box .video {
  width: 100%;
}
.second .video-box .play {
  position: absolute;
  width: 20%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
  cursor: pointer;
  -webkit-animation: rAnimation 1s linear infinite;
          animation: rAnimation 1s linear infinite;
}
@-webkit-keyframes rAnimation {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes rAnimation {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}
.three .cards {
  position: absolute;
  top: 13%;
  width: 68%;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.three .cards .card {
  width: 100%;
  margin-bottom: 10px;
}
.three .cards .card .title {
  cursor: pointer;
}
.three .cards .card .info {
  display: none;
  overflow: hidden;
}
.three .cards .card:first-child .info {
  display: block;
}
.four {
  bottom: 3%;
  height: 10vw;
  text-align: center;
}
.four a {
  display: inline-block;
  width: 6%;
  margin: 0 1%;
  margin-top: 2.7%;
  margin-bottom: 1vw;
}
.four a:nth-child(2) {
  width: 5%;
}
.four a img {
  width: 100%;
}
footer {
  position: relative;
}
footer .footer-logo {
  width: 12%;
  position: absolute;
  top: 30%;
  left: 17%;
}
footer a {
  color: #eac984;
  font-size: 1vw;
}
footer .user {
  height: 10%;
  line-height: 0.5;
  padding: 0 1vw;
  position: absolute;
  top: 47%;
  left: 35%;
  border-right: 1px solid #eac984;
}
footer .privacy {
  height: 10%;
  line-height: 0.5;
  padding: 0 1vw;
  position: absolute;
  top: 47%;
  left: 45%;
  border-right: 1px solid #eac984;
}
footer .email {
  display: inline-block;
  width: 7%;
  height: 40%;
  position: absolute;
  top: 30%;
  left: 49%;
  cursor: pointer;
}
footer p {
  height: 40%;
  position: absolute;
  top: 28%;
  left: 58%;
  color: #eac984;
  font-size: 1vw;
  vertical-align: middle;
}
.alert {
  position: fixed;
  padding: 1vw;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: #fff;
  display: none;
  z-index: 99;
  border-radius: 10px;
}
.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 99;
}
.mask video {
  width: 65%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media screen and (max-width: 750px) {
  .bg,
  .nav-bg,
  .logo,
  .section-bg,
  .down,
  .pc-cards,
  .footer-bg {
    display: none;
  }
  .m-bg,
  .m-nav-bg,
  .mb-cards,
  .m-footer-bg {
    display: block;
  }
  header ul {
    position: absolute;
    top: 28%;
    left: 28%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  header ul li a {
    font-size: 2.2vw;
  }
  header ul li a img {
    width: 6vw;
  }
  header .email-box {
    width: 30%;
    top: 53%;
    left: 45%;
    font-size: 2.2vw;
  }
  .first {
    position: absolute;
    top: 10vw;
    height: 85vw;
  }
  .first .btns-box {
    position: absolute;
    width: 55%;
    top: 85%;
    left: 50%;
    text-align: center;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .first .btns-box a {
    display: inline-block;
    width: 45%;
    margin-bottom: 2vw;
    margin: 1vw;
  }
  .second {
    position: absolute;
    top: 95vw;
    height: 80vw;
  }
  .second .down {
    display: none;
  }
  .second .video-box {
    width: 62%;
    top: 38.5%;
    left: 8%;
  }
  .three {
    position: absolute;
    top: 175vw;
    height: 175vw;
  }
  .three .cards {
    position: absolute;
    top: 10%;
    width: 88%;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .three .cards .card {
    width: 100%;
    margin-bottom: 10px;
  }
  .three .cards .card .title {
    cursor: pointer;
  }
  .three .cards .card .info {
    display: none;
    overflow: hidden;
  }
  .three .cards .card:first-child .info {
    display: block;
  }
  footer .footer-logo {
    width: 18%;
    top: 15%;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  footer a {
    font-size: 2.5vw;
  }
  footer .user {
    height: 10%;
    line-height: 0.8;
    padding: 0 2.6vw;
    position: absolute;
    top: 48%;
    left: 26%;
    border-right: 1px solid #eac984;
  }
  footer .privacy {
    height: 10%;
    line-height: 0.5;
    padding: 0 2.5vw;
    position: absolute;
    top: 50%;
    left: 48%;
    border-right: none;
  }
  footer p {
    width: 100%;
    height: 28%;
    top: 60%;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    font-size: 2vw;
    text-align: center;
  }
  .alert {
    width: 60%;
  }
  .mask video {
    width: 85%;
  }
}