html,
body,
p,
div,
span,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 3.5vw;
}
.musicbtn {
  width: 6vw;
  height: 6vw;
  top: 2vw;
  right: 2vw;
  z-index: 2;
}
.warp {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  min-height: 177vw;
  margin: 0 auto;
  position: relative;
}
.warp .logo {
  position: absolute;
  top: 5vw;
  left: 5vw;
  width: 31.867vw;
  z-index: 99;
}
.warp .title2 {
  width: 50.133vw;
  position: absolute;
  top: 2vw;
  right: 2vw;
  z-index: 2;
}
.warp .page {
  width: 100%;
  height: 100%;
  position: relative;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.warp .page .main2 {
  flex-shrink: 0;
  width: 100vw;
  height: auto;
}
.mask {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 9;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.mask .popup {
  margin-top: -20vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.mask .popup .close {
  width: 5.0667vw;
  height: 5.0667vw;
  background: url(../img/close.png) no-repeat center bottom / 100% 100%;
  position: absolute;
  bottom: -15vw;
}
.mask .popup1 {
  width: 69.867vw;
  height: 30.667vw;
  background: #F4BD2C;
  border-radius: 5.333vw;
  color: #fff;
  padding-top: 5vw;
}