@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;400;500;600;700;800&display=swap');

@font-face {
  font-family: 'fontStyle1';
  src: url('../fonts/font1.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'fontStyle2';
  src: url('../fonts/font2.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'fontStyle3';
  src: url('../fonts/font3.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

html {
  font-family: "Helvetica", "Noto Serif TC", serif, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "spHelvetica Neue",
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

html {
  background: #ffffff;
  font-optical-sizing: auto;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Helvetica", "Noto Serif TC", serif, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "spHelvetica Neue",
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

body {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255);
  --tw-text-opacity: 1;
  color: rgba(209, 213, 219, var(--tw-text-opacity));
}

.wrapper {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  background-image: url("../img/kv_bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% auto;
}

a,
button {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}

a:hover,
button:hover {
  filter: brightness(1.5)
}

button {
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 2px;
  -webkit-tap-highlight-color: transparent;
}

.sp-block {
  display: none !important;
}

.sp-flex {
  display: none !important;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeUp {
  animation: fadeUp 1s forwards;
}

@media (max-width: 768px) {
  .wrapper {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    background-image: url("../img/kv_bg_mobile.jpg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-color: #f7f7f9;
  }

  .sp-block {
    display: block !important;
  }

  .sp-flex {
    display: flex !important;
  }

  .pc {
    display: none !important;
  }
}

@keyframes show {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toLeft {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

@keyframes scare-12 {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes run {
  0% {
    right: -200%;
    filter: brightness(1);
  }

  50% {
    right: 300%;
    filter: brightness(1.5);
  }

  100% {
    right: -200%;
    filter: brightness(1);
  }
}

@keyframes rightmove {
  0% {
    right: 6.5vw;
  }

  50% {
    right: 6vw;
  }

  100% {
    right: 6.5vw;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes wobble {
  0% {
    transform: translateX(0%);
  }

  15% {
    transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    transform: translateX(20%) rotate(3deg);
  }

  45% {
    transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    transform: translateX(10%) rotate(2deg);
  }

  75% {
    transform: translateX(-5%) rotate(-1deg);
  }

  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

@keyframes show-hidden {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes up-down-style {
  0% {
    top: 43vw;
  }

  50% {
    top: 44vw;
  }

  100% {
    top: 43vw;
  }
}

@keyframes up-down-style2 {
  0% {
    top: 143vw;
  }

  50% {
    top: 144vw;
  }

  100% {
    top: 143vw;
  }
}

@keyframes up-down-style3 {
  0% {
    top: 150vw;
  }

  50% {
    top: 152vw;
  }

  100% {
    top: 150vw;
  }
}


/* popup */
.popup {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 9999;
  background-color: rgb(0 0 0 / 85%);
}

/* Inner */
.popup-inner {
  max-width: 1100px;
  width: 90%;
  padding: 20px;
  position: absolute;
  top: 55%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: rgb(255 255 255 / 0%);
}

/* Close Button */
.popup-close {
  width: 30px;
  height: 30px;
  padding-top: 4px;
  display: inline-block;
  position: absolute;
  top: 0px;
  right: 0px;
  transition: ease 0.25s all;
  -webkit-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  border-radius: 1000px;
  background: rgba(0, 0, 0, 0.8);
  font-family: Arial, Sans-Serif;
  font-size: 20px;
  text-align: center;
  line-height: 100%;
  color: #fff;
}

.popup-close:hover {
  -webkit-transform: translate(50%, -50%) rotate(180deg);
  transform: translate(50%, -50%) rotate(180deg);
  background: rgba(0, 0, 0, 1);
  text-decoration: none;
}

.popup-scroll {
  /**
  overflow-y: scroll;
  max-height: 300px;
  **/
  padding: 0 0 0 0;
  display: block;
}

.popup-scroll_m {
  display: none;
}

.popup-scroll::-webkit-scrollbar {
  background-color: #EEE;
  width: 10px;
}

.popup-scroll::-webkit-scrollbar-thumb {
  border: 1px #EEE solid;
  border-radius: 2px;
  background: #777;
  -webkit-box-shadow: 0 0 8px #555 inset;
  box-shadow: 0 0 8px #555 inset;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

.popup-scroll::-webkit-scrollbar-track {
  -webkit-box-shadow: 0 0 2px #ccc;
  box-shadow: 0 0 2px #ccc;
}

/* popup */

header {
  position: fixed;
  top: 0px;
  z-index: 30;
  margin: auto;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  height: 4.9vw;

  & .hamburger,
  .header_game_icon {
    display: none;
  }
}

header .logo {
  position: absolute;
  left: 0;
  top: 0;
  width: 10vw;
}

header nav {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
  padding-left: 8vw;
}

header nav .link {
  display: flex;
  align-items: center;
  margin-right: 4vw;
}

header nav .link>a {
  position: relative;
  display: flex;
  align-items: center;
  font-weight: 500;
  margin-right: 3.7vw;
  color: #4f63d5;
}

header nav .link>a div img {
  width: 1.1vw;
}

header nav .link>a span {
  letter-spacing: 0.4vw;
  font-size: 1.1vw;
}

header nav .other-link {
  display: flex;
  align-items: center;
}

header nav .other-link a {
  margin-right: 0.6vw;
  width: 2.1vw;

  img {
    width: 100%;
  }
}

header nav .mobile_link {
  display: none;
}

@media (max-width: 768px) {
  header {
    height: 15vw;
  }

  header .logo {
    z-index: 20;
    width: 30vw;
  }

  header .header_game_icon {
    position: absolute;
    z-index: 10;
    display: block;
    width: 16vw;
    top: 1.7vw;
    left: 2vw;
  }

  header nav {
    position: fixed;
    z-index: 10;
    height: auto;
    align-items: flex-start;
    --tw-bg-opacity: 0.8;
  }

  header nav::before {
    content: none
  }

  header nav .hamburger {
    position: absolute;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    top: 5vw;
    right: 5vw;
    width: 20vw;
  }

  header nav .link {
    display: none;
    opacity: 0;
    left: 0px;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
    position: fixed;
    z-index: 10;
    height: 100%;
    width: 100%;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.9);
    padding-top: 21vw;
  }

  header nav .link.opacity-full {
    opacity: 1;
  }

  header nav .link.active-flex {
    display: flex;
  }

  header nav .link a {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin: 2.5vw 0;
  }

  header nav .link a span {
    font-size: 6vw;
  }

  header nav .link a::after {
    content: none
  }

  header nav .other-link {
    display: none;
    opacity: 0;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
    position: absolute;
    z-index: 10;
    top: 106vw;
    left: 0;
    right: 0;
    margin: auto;
    justify-content: center;
  }

  header nav .other-link.opacity-full {
    opacity: 1;
  }

  header nav .other-link.active-flex {
    display: flex;
  }

  header nav .other-link a {
    width: 9vw;
    margin-right: 1.5vw;
  }

  header nav .mobile_link {
    position: absolute;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 1.7vw;
    left: 5vw;
  }

  header nav .mobile_link .item {
    width: 24vw;
    margin: 0 0.5vw;
  }

  header nav .mobile_link .item img {
    width: 100%;
  }

  header nav .mobile_link .fb {
    width: 8vw;
    margin: 0 0.5vw;
  }

  header nav .mobile_link .fb img {
    width: 100%;
  }

  .popup-scroll {
    padding: 0 0 0 0;
    display: none;
  }

  .popup-scroll_m {
    display: block;
  }

}

.kv {
  position: relative;
  z-index: 10;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 49vw;
}

.kv .aside_video {
  position: absolute;
  top: 28vw;
  right: 2.5vw;
}

.kv .aside_video>img {
  cursor: pointer;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  width: 15vw;
  margin-bottom: 0.7vw;
}

.kv .aside_video>img:hover {
  filter: brightness(1.2)
}

.kv .aside_video .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.kv .aside_video .btn button {
  width: 7vw;
}

.kv .aside_video .btn button img {
  width: 100%;
}

.kv .kv_logo {
  position: absolute;
  z-index: 20;
  top: 4.2vw;
  left: 2.5vw;
  width: 6vw;
}

.kv .bg_video {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}

.kv .bg_video video {
  width: 100%;
}

.kv .kv_mask {
  position: absolute;
  z-index: 10;
  width: 100%;
  background: url("../img/middle_bg.png") no-repeat;
  background-size: 100% auto;
  top: 19vw;
  height: 98vw;
}

.kv .play_btn {
  position: absolute;
  left: 0px;
  right: 0px;
  z-index: 20;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  top: 31.5vw;
  width: 7vw;
}

.kv .play_btn img {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}

.kv .play_btn img:nth-child(1) {
  z-index: 1;
}

.kv .play_btn img:nth-child(2) {
  width: 5.7vw;
  transform-origin: center center;
  animation: rotate 3s linear infinite;
}

.kv .play_btn img:hover {
  filter: brightness(1.2)
}

.kv .kv_slogan {
  position: absolute;
  left: 0px;
  right: 0px;
  z-index: 10;
  margin-left: auto;
  margin-right: auto;
  top: 39vw;
  width: 35vw;
}

.kv .kv_sub_title {
  position: absolute;
  left: 0px;
  right: 0px;
  z-index: 10;
  margin-left: auto;
  margin-right: auto;
  top: 35.7vw;
  width: 21vw;
}

.kv .kv_app_box {
  position: absolute;
  z-index: 10;
  margin: auto;
  display: flex;
  height: auto;
  align-items: center;
  justify-content: center;
  opacity: 0;
  width: 39vw;
  top: 34vw;
  left: 0;
  right: 0;
  padding-bottom: 9.5vw;
  background: url("../img/download_bg.png") no-repeat;
  background-size: 100% auto;
  padding-top: 3.9vw;
}

.kv .kv_app_box .kv_icon {
  width: 8.7vw;
}

.kv .kv_app_box .kv_qr {
  width: 8.7vw;
}

.kv .kv_app_box .download {
  margin: 0 0.45vw;
}

.kv .kv_app_box .download .kv_apple_btn,
.kv .kv_app_box .download .kv_apk_btn,
.kv .kv_app_box .download .kv_google_btn {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
  width: 10.3vw;
}

.kv .kv_app_box .download .kv_apple_btn:hover,
.kv .kv_app_box .download .kv_apk_btn:hover,
.kv .kv_app_box .download .kv_google_btn:hover {
  opacity: 0.6;
}

.kv .kv_app_box .download .kv_google_btn {
  margin: 0.2vw 0;
}

.kv .kv_app_box .kv_apple_btn {
  top: 1.1vw;
  left: 14vw;
}

.kv .kv_app_box .kv_apk_btn {
  top: 1.1vw;
  left: 22.3vw;
}

.kv .kv_app_box .kv_google_btn {
  top: 3.85vw;
  left: 14vw;
}

.kv .kv_app_box .kv_fb_btn {
  top: 3.85vw;
  left: 22.3vw;
}

.kv .kv_bottom_bg {
  position: absolute;
  bottom: 0px;
  z-index: 10;
  width: 100%;
  background: url("../img/KV_cloud_sp.png") no-repeat;
  background-size: 100% auto;
  height: 13vw;
}

@media (max-width: 768px) {
  .kv {
    height: 107vw;
  }

  .kv .aside_video {
    display: none;
  }

  .kv .kv_slogan {
    width: 80%;
    top: 85vw;
  }

  .kv {
    .kv_sub_title {
      top: 140vw;
      width: 52vw;
    }
  }

  .kv .kv_app_box {
    display: none;
    width: 81vw;
    top: 148vw;
    left: 0;
    right: 0;
    padding-bottom: 21vw;
  }

  .kv .kv_app_box .kv_icon {
    top: 1.7vw;
    left: 3.5vw;
    width: 15vw;
    border-radius: 2.7vw;
  }

  .kv .kv_app_box .kv_qr {
    top: 1.7vw;
    left: 19.7vw;
    width: 15vw;
  }

  .kv .kv_app_box .kv_apple_btn,
  .kv .kv_app_box .kv_apk_btn,
  .kv .kv_app_box .kv_google_btn,
  .kv .kv_app_box .kv_fb_btn {
    width: 20.5vw;
  }

  .kv .kv_app_box .kv_apple_btn {
    top: 2.8vw;
    left: 36vw;
  }

  .kv .kv_app_box .kv_apk_btn {
    top: 2.8vw;
    left: 57.5vw;
  }

  .kv .kv_app_box .kv_google_btn {
    top: 9.8vw;
    left: 36vw;
  }

  .kv .kv_app_box .kv_fb_btn {
    top: 9.8vw;
    left: 57.5vw;
  }

  .kv .kv_bottom_bg {
    background: url("../img/ch_cloud_sp.png") no-repeat;
    background-size: 100% auto;
    height: 23.7vw;
  }
}

@keyframes scale2 {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

.main {
  position: relative;
  z-index: 20;
  margin: auto;
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.top_sp {
  display: none;
}

@media (max-width: 768px) {
  .main {
    /* margin-top: -147vw; */
  }

  .top_sp {
    position: fixed;
    z-index: 10;
    opacity: 0;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    bottom: 16vw;
    right: 1.5vw;
    width: 10vw;
  }

  .top_sp.active {
    opacity: 100;
  }

  .top_sp.visible {
    display: block;
  }
}

.register {
  position: relative;
  z-index: 30;
  margin: auto;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 1.3vw;
  letter-spacing: 0.1vw;
}

.register .info {
  margin-left: auto;
  margin-right: auto;
  font-weight: 600;
  width: 58vw;
  color: #6f6257;
  font-size: 1.4vw;
  line-height: 1.8vw;
}

.register .info h1 span {
  color: #de4d3d;
}

.register .box {
  position: relative;
  z-index: 10;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 54vw;
  height: 16.4vw;
  padding-top: 1.2vw;
  margin-top: 2.5vw;
  background: url("../img/register_bg.png") no-repeat;
  background-size: 100% auto;
}

.register .box .notice {
  position: absolute;
  cursor: pointer;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  width: 2.5vw;
  top: 12vw;
  left: 44vw;
}

.register .box .notice:hover {
  opacity: 0.5;
}

.register .box .title {
  width: 20.5vw;
  margin-bottom: 0.5vw;
}

.register .box h1 {
  font-weight: 600;
  color: #525252;
  font-size: 1.5vw;
  margin-bottom: 0.1vw;
}

.register .box .step_1 {
  width: 18.5vw;
  margin-bottom: 1.8vw;
}

.register .box .download {
  display: flex;
  align-items: center;
  justify-content: center;
}

.register .box .download a {
  width: 15vw;
}

.register .box .download a:hover {
  opacity: 0.5;
}

.register .box .download a img {
  width: 100%;
}

.register .box .download a:first-child {
  margin-right: 1.4vw;
}

.register .input_data {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 3vw;
}

.register .input_data h1 {
  font-weight: 600;
  color: #525252;
  font-size: 1.5vw;
  margin-bottom: 0.1vw;
}

.register .input_data .step_2 {
  margin-left: auto;
  margin-right: auto;
  width: 23vw;
  margin-bottom: 1.8vw;
}

.register .input_data .form .item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5858c1;
  margin-bottom: 1vw;
}

.item_agree {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5858c1;
  margin-bottom: 1vw;
}



@supports (-webkit-appearance: none) or (-moz-appearance: none) {

  input[type=checkbox],
  input[type=radio] {
    --active: #275EFE;
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, .3);
    --border: #BBC1E1;
    --border-hover: #275EFE;
    --background: #fff;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 21px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  }

  input[type=checkbox]:after,
  input[type=radio]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
  }

  input[type=checkbox]:checked,
  input[type=radio]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
  }

  input[type=checkbox]:disabled,
  input[type=radio]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }

  input[type=checkbox]:disabled:checked,
  input[type=radio]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }

  input[type=checkbox]:disabled+label,
  input[type=radio]:disabled+label {
    cursor: not-allowed;
  }

  input[type=checkbox]:hover:not(:checked):not(:disabled),
  input[type=radio]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }

  input[type=checkbox]:focus,
  input[type=radio]:focus {
    box-shadow: 0 0 0 var(--focus);
  }

  input[type=checkbox]:not(.switch),
  input[type=radio]:not(.switch) {
    width: 21px;
  }

  input[type=checkbox]:not(.switch):after,
  input[type=radio]:not(.switch):after {
    opacity: var(--o, 0);
  }

  input[type=checkbox]:not(.switch):checked,
  input[type=radio]:not(.switch):checked {
    --o: 1;
  }

  input[type=checkbox]+label,
  input[type=radio]+label {
    font-size: 1.3vw;
    line-height: 21px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4px;
  }

  input[type=checkbox]:not(.switch) {
    border-radius: 3px;
  }

  input[type=checkbox]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 7px;
    top: 4px;
    transform: rotate(var(--r, 20deg));
  }

  input[type=checkbox]:not(.switch):checked {
    --r: 43deg;
  }

  input[type=checkbox].switch {
    width: 38px;
    border-radius: 11px;
  }

  input[type=checkbox].switch:after {
    left: 2px;
    top: 2px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: var(--ab, var(--border));
    transform: translateX(var(--x, 0));
  }

  input[type=checkbox].switch:checked {
    --ab: var(--active-inner);
    --x: 17px;
  }

  input[type=checkbox].switch:disabled:not(:checked):after {
    opacity: 0.6;
  }

  input[type=radio] {
    border-radius: 50%;
  }

  input[type=radio]:after {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--active-inner);
    opacity: 0;
    transform: scale(var(--s, 0.7));
  }

  input[type=radio]:checked {
    --s: .5;
  }



  ul {
    margin: 12px;
    padding: 0;
    list-style: none;
    width: 100%;
    max-width: 320px;
  }

  ul li {
    margin: 16px 0;
    position: relative;
  }




  .register .input_data .form .item.arrow:after {
    position: absolute;
    content: "▼";
    left: 8vw;
    font-size: 1.2vw;
    color: #5858c1;
    pointer-events: none;
  }

  .register .input_data .form .item .title {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
    border: 1px solid #5858c1;
    padding-left: 1.3vw;
    padding-right: 1vw;
    height: 4vw;
    line-height: 4vw;
    font-size: 1.6vw;
    margin-right: 1vw;
  }

  .register .input_data .form .item input {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
    width: 27vw;
    font-size: 1.8vw;
    border: 1px solid #5858c1;
    height: 4vw;
    outline: none;
    padding: 0 1vw;
  }

  .register .input_data .form .item select {
    font-size: 1.6vw;
    border-radius: 0;
    background-color: #ffffff;
    border: 1px solid #5858c1;
    width: 11vw;
    height: 4vw;
    margin-right: 1vw;
    padding: 0 1.4vw;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  .register .reservation {
    margin: 1.3vw auto 5vw;
    width: 15vw;

    img {
      width: 100%;
    }
  }

  .register .reservation:hover {
    opacity: 0.5;
    filter: brightness(1);
  }

  @media (max-width: 768px) {

    input[type=checkbox]+label,
    input[type=radio]+label {
      font-size: 3.5vw;
      line-height: 21px;
      display: inline-block;
      vertical-align: top;
      cursor: pointer;
      margin-left: 4px;
    }

    .register {
      margin-top: 0vw;
      padding-bottom: 4vw;
    }

    .register .info {
      text-align: center;
      font-weight: 400;
      width: 85%;
      font-size: 3.5vw;
      line-height: 5.5vw;
      margin-bottom: 2.5vw;
    }

    .register .box {
      background: url("../img/register_bg_mobile.png") no-repeat;
      background-size: 100% auto;
      width: 92%;
      height: 33.1vw;
      padding-top: 2.5vw;
    }

    .register .box .title {
      width: 44vw;
      margin-bottom: 1vw;
    }

    .register .box .notice {
      width: 6vw;
      top: 23.5vw;
      left: 78vw;
    }

    .register .box h1 {
      font-size: 3.3vw;
      margin-bottom: 0.1vw;
    }

    .register .box .step_1 {
      width: 38.5vw;
      margin-bottom: 3vw;
    }

    .register .box .download a {
      width: 28vw;
    }

    .register .box .download a:first-child {
      margin-right: 3vw;
    }

    .register .input_data {
      margin-top: 6vw;
    }

    .register .input_data h1 {
      font-size: 4vw;
      margin-bottom: 0.1vw;
    }

    .register .input_data .step_2 {
      width: 58vw;
      margin-bottom: 3.2vw;
    }

    .register .input_data .form .item {
      margin-bottom: 2vw;
    }

    .register .input_data .form .item.arrow:after {
      left: 18vw;
      font-size: 3.2vw;
    }

    .register .input_data .form .item .title {
      padding-left: 3vw;
      padding-right: 3.2vw;
      height: 9vw;
      line-height: 9vw;
      font-size: 3.5vw;
      margin-right: 2vw;
    }

    .register .input_data .form .item input {
      width: 48vw;
      font-size: 3.5vw;
      height: 9vw;
      padding: 0 3vw;
    }

    .register .input_data .form .item select {
      font-size: 3.5vw;
      width: 24.7vw;
      height: 9vw;
      margin-right: 2vw;
      padding: 0 3vw;
    }

    .register .reservation {
      margin: 1.3vw auto 5vw;
      width: 33vw;
    }
  }

  .role {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 71vw;
    padding-bottom: 3vw;
  }

  .role .step {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-weight: 600;
    color: #525252;
    font-size: 1.5vw;
    margin-bottom: 0.1vw;
  }

  .role .step_3 {
    margin-left: auto;
    margin-right: auto;
    width: 18vw;
    margin-bottom: 1.8vw;
  }

  .role .menu {
    margin-top: 7vw;
  }

  .role .menu img {
    cursor: pointer;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    width: 16vw;
    margin-bottom: 0.8vw;
  }

  .role .menu img:hover {
    opacity: 0.5;
  }

  .role .role_swiper_wrapper {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    height: 100%;
    width: 100%;
    overflow: hidden;
    top: 2vw;
    left: 18.5vw;
  }

  .role .role_swiper_wrapper .swiper {
    width: 100%;
  }

  .role .role_swiper_wrapper .swiper .swiper-slide {
    width: 100%;
  }

  .role .role_swiper_wrapper .swiper .swiper-slide img {
    width: 100%;
  }

  .role .role_swiper_wrapper .content {
    position: absolute;
    top: 7.5vw;
    color: #4653c6;
    width: 20vw;
    height: 30vw;
  }

  .role .role_swiper_wrapper .content .bg {
    position: absolute;
    width: 10vw;
    top: -2.3vw;
  }

  .role .role_swiper_wrapper .content .cv {
    position: absolute;
    z-index: 20;
    display: flex;
    align-items: center;
    height: 3.90vw;
    padding-left: 6vw;
    top: 4.6vw;
  }

  .role .role_swiper_wrapper .content .cv span {
    font-family: 'fontStyle1', sans-serif;
    font-weight: 600;
    margin-right: 1vw;
    font-size: 1.1vw;
  }

  .role .role_swiper_wrapper .content .cv .sound {
    cursor: pointer;
    display: none;
  }

  .role .role_swiper_wrapper .content .cv img {
    width: 1.5vw;
  }

  .role .role_swiper_wrapper .content .info {
    position: absolute;
    z-index: 10;
    display: flex;
    align-items: center;
    top: 7.6vw;
    left: 9vw;
    height: 8.8vw;
  }

  .role .role_swiper_wrapper .content .info img {
    width: 7.8vw;
    margin-right: 1vw;
  }

  .role .role_swiper_wrapper .content .info .data {
    font-family: 'fontStyle2', sans-serif;
    font-weight: 400;
    color: #4653c6;
    font-size: 0.9vw;
    line-height: 1.4vw;
  }

  .role .role_swiper_wrapper .content .info .data span {
    display: block;
  }

  .role .role_swiper_wrapper .content .text {
    font-family: 'fontStyle3', sans-serif;
    color: #8491ad;
    font-size: 0.9vw;
    position: absolute;
    top: 17.3vw;
    left: 1vw;
    line-height: 1.7vw
  }

  .role .role_swiper_wrapper .photo {
    position: absolute;
    width: 37.5vw;
    top: 0;
    left: 15.5vw;
  }

  .role .swiper-button-prev-role,
  .role .swiper-button-next-role {
    position: absolute;
    z-index: 30;
    background-repeat: no-repeat;
    opacity: 0.5;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
    width: 2.5vw;
    height: 2.5vw;
    background: url("../img/arrow.png") no-repeat;
    background-size: 100% auto;
    background-position: top left;
    /* border-top: 2px solid #c3b0a5; */
    /* border-left: 2px solid #c3b0a5; */
    top: 20.5vw;
  }

  .role .swiper-button-prev-role:hover,
  .role .swiper-button-next-role:hover {
    opacity: 1;
    /* border-color: #624a3d; */
  }

  .role .swiper-button-prev-role {
    /* transform: rotate(-45deg); */
    left: 16.2vw;
  }

  .role .swiper-button-next-role {
    transform: rotate(180deg);
    left: 65.8vw;
  }

  .wrapper .gift .list .item .achieve {
    position: absolute;
    width: 8.5vw;
    margin-top: 8vw;
    margin-left: 10vw;
  }

  @media (max-width: 768px) {
    .wrapper .gift .list .item .achieve {
      width: 19.5vw;
      margin-top: 20vw;
      margin-left: 25vw;
    }

    .role {
      width: 100%;
      padding-bottom: 70vw;
    }

    .role .step {
      font-size: 4vw;
      margin-bottom: 0.1vw;
    }

    .role .step_3 {
      margin-left: auto;
      margin-right: auto;
      width: 45vw;
      margin-bottom: 0vw;
    }

    .role .menu {
      position: relative;
      z-index: 10;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      width: 97%;
      margin: 5vw auto 0;
    }

    .role .menu img {
      width: 33.33%;
      margin-bottom: 2vw;
      padding: 0 1vw;
    }

    .role .role_swiper_wrapper {
      left: 0;
    }

    .role .role_swiper_wrapper .content {
      top: 36.5vw;
      width: 54vw;
      height: 53vw;
      left: 3vw;
      z-index: 9;
    }

    .role .role_swiper_wrapper .content .cv {
      padding-left: 16vw;
      top: 19.6vw;
    }

    .role .role_swiper_wrapper .content .cv img {
      width: 3.5vw;
    }

    .role .role_swiper_wrapper .content .cv {
      span {
        margin-right: 3vw;
        font-size: 3.5vw;
      }
    }

    .role .role_swiper_wrapper .content .info {
      top: 23.6vw;
      left: 23vw;
      height: 22.8vw;
    }

    .role .role_swiper_wrapper .content .info .data {
      font-size: 2.3vw;
      line-height: 3.4vw;
    }

    .role .role_swiper_wrapper .content .text {
      font-size: 2.5vw;
      top: 51.3vw;
      left: 1vw;
      line-height: 3.7vw;
    }

    .role .role_swiper_wrapper .photo {
      width: 67vw;
      top: 27vw;
      left: 38.5vw;
    }

    .role .swiper-button-prev-role {
      left: 1vw;
    }

    .role .swiper-button-next-role {
      left: 93.8vw;
    }

    .role {

      & .swiper-button-prev-role,
      .swiper-button-next-role {
        width: 5vw;
        height: 5vw;
        top: 62.5vw;
      }
    }
  }

  .ch_1,
  .ch_2,
  .ch_3,
  .ch_4,
  .ch_5 {
    display: none;
    opacity: 0;
    transition: opacity 0.5s;
  }

  .ch_1.show,
  .ch_2.show,
  .ch_3.show,
  .ch_4.show,
  .ch_5.show {
    display: block;
    opacity: 1;
  }

  footer {
    position: relative;
    margin: auto;
    width: 100%;
    background: linear-gradient(to right, rgba(64, 112, 220, 1) 0%, rgba(41, 41, 159, 1) 100%);
    padding: 4vw 0;
  }

  footer .container {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  footer .container>img:nth-child(1) {
    width: 7vw;
    margin-right: 2vw;
    margin-top: 0.4vw;
  }

  footer .container>img:nth-child(2) {
    width: 10vw;
    margin-right: 4vw;
  }

  footer .container .cr {
    display: flex;
    align-items: center;
  }

  footer .container .cr img {
    width: 3vw;
    margin-right: 1vw;
  }

  footer .container .cr .text {
    font-size: 0.7vw;
  }

  @media (max-width: 768px) {
    footer {
      padding: 5vw 0 0;
      height: 40vw;
    }

    footer .container {
      position: relative;
    }

    footer .container>img:nth-child(1) {
      width: 22vw;
      margin-left: 7vw;
      margin-right: 7vw;
      margin-top: 2vw;
    }

    footer .container>img:nth-child(2) {
      width: 35vw;
      margin-right: 4vw;
    }

    footer .container .cr {
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
      top: 18vw;
      width: 90%;
    }

    footer .container .cr img {
      width: 13vw;
    }

    footer .container .cr .text {
      padding-left: 1vw;
      font-size: 2.5vw;
      line-height: 3.5vw;
    }
  }

  .gift {
    position: relative;
    z-index: 30;
    margin: auto;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: url("../img/bot_bg.jpg") no-repeat;
    background-size: 100% auto;
    padding-top: 11vw;
    padding-bottom: 4vw;
  }

  .gift .title {
    margin-left: auto;
    margin-right: auto;
    width: 44vw;
    margin-bottom: 3vw;
  }

  .gift .join {
    margin-left: auto;
    margin-right: auto;
    width: 20vw;
    margin-bottom: 2vw;
  }

  .gift .join img {
    width: 100%;
  }

  .gift .notice {
    position: absolute;
    cursor: pointer;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    width: 2.7vw;
    top: 22vw;
    left: 61.5vw;
  }

  .gift .notice:hover {
    opacity: 0.5;
  }

  .gift .list {
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 59vw;
  }

  .gift .list .item {
    width: 33.333333%;
    margin-bottom: 2vw;
    padding: 0 0.9vw;
  }

  .gift .count {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    background: url("../img/people_count.png") no-repeat;
    background-size: 100% auto;
    margin-top: 1vw;
    width: 39vw;
    height: 4.9vw;
    color: #172152;
    font-size: 2.4vw;
  }

  .gift .count .number {
    color: #982651;
    padding: 0 1vw;
  }

  @media (max-width: 768px) {
    .gift {
      background: url("../img/bot_bg_mobile.jpg") no-repeat;
      background-size: 100% auto;
      padding-bottom: 10vw;
      background-color: #d4d0e9;
    }

    .gift .title {
      width: 55%;
      margin-bottom: 3vw;
    }

    .gift .join {
      width: 49vw;
      margin-bottom: 14vw;
    }

    .gift .join img {
      width: 100%;
    }

    .gift .notice {
      width: 6.2vw;
      top: 39.5vw;
      left: 77.5vw;
    }

    .gift .list {
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      width: 97%;
    }

    .gift .list .item {
      width: 50%;
      margin-bottom: 4vw;
      padding: 0 2.5vw;
    }

    .gift .count {
      margin-top: 5vw;
      width: 91%;
      height: 11.9vw;
      font-size: 5vw;
    }

    .gift .count .number {
      padding: 0 3vw;
    }
  }
}