@charset "UTF-8";
html {
  scroll-behavior: smooth;
}

body {
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
  background-color: black;
  overscroll-behavior: none;
}

:root {
  font-size: 16px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji, sans-serif;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  outline: none;
  border: none;
  padding: 0;
  margin: 0;
}

ul, li {
  border: none;
  padding: 0;
  margin: 0;
  list-style: none;
}

.btn {
  cursor: pointer;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}

.btn:active, .btn:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

.img-box > img {
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.img-box-h > img {
  height: 100%;
}

input {
  position: absolute;
  background: transparent;
  font-size: 1.3vw;
  padding: 0 1vw;
  height: 2.5vw;
}

@media screen and (max-width: 767px) {
  input {
    height: 5.5vw;
    font-size: 3vw;
  }
}

.absolute {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

.fit {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

main {
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

main .mb {
  display: none;
}

@media screen and (max-width: 767px) {
  main .pc {
    display: none !important;
  }
  main .mb {
    display: block;
  }
}

main section {
  width: 100%;
  position: relative;
  margin-bottom: -.3%;
  /* 或 padding-bottom: -1px 視情況 */
}

main section .bg {
  width: 100%;
}

main section.section_1 {
  z-index: 99;
}

main section.section_1 .nav-wrap {
  width: 100%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  z-index: 1000;
}

main section.section_1 .nav-wrap.hide {
  -webkit-transform: translateY(-110%);
          transform: translateY(-110%);
}

main section.section_1 .nav-wrap .bg {
  width: 100%;
  height: auto;
}

main section.section_1 .nav-wrap .btn-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

main section.section_1 .nav-wrap .btn-wrap .link-wrap {
  z-index: 1;
  width: 70%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1vw;
  margin: auto auto auto 14vw;
}

main section.section_1 .nav-wrap .btn-wrap > a {
  margin: auto;
}

main section.section_1 .nav-wrap .btn-wrap > a .btn-web {
  width: 65%;
  z-index: 1;
  margin: auto .5vw auto auto;
}

main section.section_1 .btn-store-wrap {
  width: 12vw;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: .3vw;
  top: unset;
  left: unset;
  right: 17%;
  bottom: 8%;
}

main section.section_1 .btn-line-big {
  width: 40vw;
  height: auto;
  top: unset;
  bottom: 6%;
}

main section.section_1 .btn-line {
  width: 10vw;
  height: 10vw;
  right: unset;
  top: 30%;
  left: 5%;
  position: fixed;
}

@media screen and (max-width: 767px) {
  main section.section_1 .nav-wrap {
    top: unset;
    bottom: 0;
  }
  main section.section_1 .nav-wrap.hide {
    -webkit-transform: unset;
            transform: unset;
  }
  main section.section_1 .nav-wrap .btn-wrap {
    padding: 0 0 0 2vw;
  }
  main section.section_1 .nav-wrap .btn-wrap .link-wrap {
    width: 82%;
    gap: .5vw;
    margin: auto;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
  main section.section_1 .nav-wrap .btn-wrap > a .btn-web {
    margin: auto;
  }
  main section.section_1 .btn-store-wrap {
    width: 30vw;
    gap: 1vw;
    left: 0;
    right: 0;
    bottom: 12%;
  }
  main section.section_1 .btn-line-big {
    width: 90vw;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    top: unset;
    bottom: 25%;
  }
  main section.section_1 .btn-line {
    width: 20vw;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    top: unset;
    left: 3%;
    bottom: 13%;
  }
}

main section.section_2 .content-wrap {
  width: 100%;
  height: 100%;
}

main section.section_2 .content-wrap .btn-more-detail {
  top: unset;
  left: unset;
  right: 11%;
  bottom: 11%;
  width: 25vw;
}

@media screen and (max-width: 767px) {
  main section.section_2 .content-wrap .btn-more-detail {
    right: 3%;
    bottom: 10.5%;
    width: 70vw;
  }
}

main section.section_3 .content-wrap {
  width: 100%;
  height: 100%;
}

main section.section_3 .content-wrap .btn-more-info {
  right: unset;
  top: unset;
  bottom: 7%;
  left: 28%;
  width: 18vw;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

main section.section_3 .content-wrap .btn-join {
  left: unset;
  top: unset;
  right: 9%;
  bottom: 17%;
  width: 20vw;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

main section.section_3 .content-wrap .btn-join .hand {
  width: 30%;
  top: unset;
  left: unset;
  -webkit-transform: translate(10%, 50%);
          transform: translate(10%, 50%);
  -webkit-animation: hand-move 1s linear infinite;
          animation: hand-move 1s linear infinite;
}

@-webkit-keyframes hand-move {
  0% {
    -webkit-transform: translate(10%, 50%);
            transform: translate(10%, 50%);
  }
  80% {
    -webkit-transform: translate(15%, 55%);
            transform: translate(15%, 55%);
  }
  100% {
    -webkit-transform: translate(10%, 50%);
            transform: translate(10%, 50%);
  }
}

@keyframes hand-move {
  0% {
    -webkit-transform: translate(10%, 50%);
            transform: translate(10%, 50%);
  }
  80% {
    -webkit-transform: translate(15%, 55%);
            transform: translate(15%, 55%);
  }
  100% {
    -webkit-transform: translate(10%, 50%);
            transform: translate(10%, 50%);
  }
}

@media screen and (max-width: 767px) {
  main section.section_3 .content-wrap .btn-more-info {
    right: 0;
    bottom: 14%;
    left: 24%;
    width: 46vw;
  }
  main section.section_3 .content-wrap .btn-join {
    left: 0;
    right: 0;
    bottom: 34%;
    width: 50vw;
  }
  main section.section_3 .content-wrap .btn-join .hand {
    width: 25%;
  }
}

main section.section_4 .content-wrap .animation-wrap {
  width: 43%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  right: unset;
  top: unset;
  left: 6%;
  bottom: 8%;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

main section.section_4 .content-wrap .animation-wrap .all {
  pointer-events: none;
  opacity: 0;
}

main section.section_4 .content-wrap .animation-wrap .half {
  width: 50%;
  position: relative;
  background: url(../images/section4/logo_top.png) no-repeat top;
  background-size: 100% 28%;
}

main section.section_4 .content-wrap .animation-wrap .half > div {
  pointer-events: none;
}

main section.section_4 .content-wrap .animation-wrap .left {
  right: unset;
  -webkit-transition: .3s ease-in;
  transition: .3s ease-in;
}

main section.section_4 .content-wrap .animation-wrap .right {
  left: unset;
  -webkit-transition: .3s ease-in;
  transition: .3s ease-in;
}

main section.section_4 .content-wrap .animation-wrap .all {
  -webkit-transition: .3s ease-in;
  transition: .3s ease-in;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: url(../images/section4/logo_top.png) no-repeat top;
  background-size: 88% 44%;
}

main section.section_4 .content-wrap .animation-wrap .all .info-wrap {
  width: 80%;
  height: 80%;
}

main section.section_4 .content-wrap .animation-wrap .all.left {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}

main section.section_4 .content-wrap .animation-wrap .all.right {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}

main section.section_4 .content-wrap .animation-wrap .info-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  pointer-events: none;
  width: 95%;
  gap: 3%;
  z-index: 1;
}

main section.section_4 .content-wrap .animation-wrap .info-wrap .item {
  width: 50%;
  position: relative;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 93%;
  -webkit-transform: translateX(1%);
          transform: translateX(1%);
  gap: 2%;
}

main section.section_4 .content-wrap .animation-wrap .info-wrap .item .logo {
  width: 90%;
  -webkit-transform: translateY(8%);
          transform: translateY(8%);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

main section.section_4 .content-wrap .animation-wrap .info-wrap .item .info {
  display: none;
}

main section.section_4 .content-wrap .animation-wrap .info-wrap .item .reward {
  top: unset;
  bottom: 12%;
  width: 100%;
}

main section.section_4 .content-wrap .animation-wrap .info-wrap .item .reward.r {
  width: 70%;
}

main section.section_4 .content-wrap .animation-wrap.show-left .right {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  opacity: 0;
}

main section.section_4 .content-wrap .animation-wrap.show-left .left {
  opacity: 0;
}

main section.section_4 .content-wrap .animation-wrap.show-left .all.left {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
  opacity: 1;
}

main section.section_4 .content-wrap .animation-wrap.show-left .info-wrap .info-left {
  -webkit-transform: translateX(50%) scale(1.15);
          transform: translateX(50%) scale(1.15);
}

main section.section_4 .content-wrap .animation-wrap.show-left .info-wrap .info-left .info {
  display: block;
  width: 170%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

main section.section_4 .content-wrap .animation-wrap.show-left .info-wrap .info-left .logo {
  width: 78%;
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}

main section.section_4 .content-wrap .animation-wrap.show-left .info-wrap .info-right {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  opacity: 0;
}

main section.section_4 .content-wrap .animation-wrap.show-left .info-wrap .reward {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}

main section.section_4 .content-wrap .animation-wrap.show-right .left {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  opacity: 0;
}

main section.section_4 .content-wrap .animation-wrap.show-right .right {
  opacity: 0;
}

main section.section_4 .content-wrap .animation-wrap.show-right .all.right {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
  opacity: 1;
}

main section.section_4 .content-wrap .animation-wrap.show-right .info-wrap .info-left {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  opacity: 0;
}

main section.section_4 .content-wrap .animation-wrap.show-right .info-wrap .info-right {
  -webkit-transform: translateX(-50%) scale(1.15);
          transform: translateX(-50%) scale(1.15);
}

main section.section_4 .content-wrap .animation-wrap.show-right .info-wrap .info-right .info {
  display: block;
  width: 170%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

main section.section_4 .content-wrap .animation-wrap.show-right .info-wrap .info-right .logo {
  width: 78%;
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}

main section.section_4 .content-wrap .animation-wrap.show-right .info-wrap .info-right .reward {
  -webkit-transform: translateY(5%) scale(0.85);
          transform: translateY(5%) scale(0.85);
}

main section.section_4 .content-wrap .notice {
  opacity: 0;
  top: unset;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  width: 30%;
  right: unset;
  left: 12.5%;
  bottom: 4%;
  -webkit-transform: translateY(5%);
          transform: translateY(5%);
}

main section.section_4 .content-wrap .notice.act {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
  opacity: 1;
}

main section.section_4 .content-wrap .input-container {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  left: unset;
  top: unset;
  right: 7%;
  bottom: 19%;
  width: 38%;
}

main section.section_4 .content-wrap .input-container input {
  width: 67%;
  height: 2.8vw;
  top: 14%;
}

main section.section_4 .content-wrap .input-container .error-message {
  color: #ff6d6d;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 80%;
  height: 2vw;
  top: 41%;
}

main section.section_4 .content-wrap .input-container .submit {
  top: unset;
  bottom: 9%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: 35%;
}

main section.section_4 .content-wrap .input-container .icon {
  width: 30%;
  top: unset;
  right: unset;
  left: -6%;
  bottom: -16%;
}

main section.section_4 .content-wrap .btn-more-info {
  width: 25vw;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  top: unset;
  left: unset;
  right: 14%;
  bottom: 4%;
}

@media screen and (max-width: 767px) {
  main section.section_4 .content-wrap .animation-wrap {
    width: 87vw;
    right: 0;
    top: 15%;
    left: 0;
    bottom: unset;
  }
  main section.section_4 .content-wrap .notice {
    top: 11%;
    width: 60%;
    bottom: 0;
    left: 0;
    right: 0;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }
  main section.section_4 .content-wrap .input-container {
    right: 3%;
    bottom: 19%;
    width: 72vw;
  }
  main section.section_4 .content-wrap .input-container input {
    width: 67%;
    height: 5.5vw;
    top: 14%;
  }
  main section.section_4 .content-wrap .input-container .error-message {
    width: 80%;
    height: 3vw;
    top: 40%;
    font-size: 2.8vw;
  }
  main section.section_4 .content-wrap .input-container .submit {
    top: unset;
    bottom: 8%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    width: 40%;
  }
  main section.section_4 .content-wrap .input-container .icon {
    right: -7%;
    left: unset;
    bottom: -18%;
  }
  main section.section_4 .content-wrap .btn-more-info {
    width: 60vw;
    right: 7%;
    bottom: 10%;
  }
}

main section.section_5 .animation-wrap {
  width: 39%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  right: unset;
  top: unset;
  left: 12%;
  bottom: 3%;
}

main section.section_5 .animation-wrap .half {
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

main section.section_5 .animation-wrap .half.left {
  height: 130%;
  top: unset;
}

main section.section_5 .animation-wrap .half.left .title {
  right: unset;
  bottom: unset;
  left: -18%;
  top: 6%;
  width: 82%;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

main section.section_5 .animation-wrap .half.left .info-wrap {
  width: 100%;
  height: 94%;
  overflow: hidden;
  -webkit-transform: translateX(-1.5%);
          transform: translateX(-1.5%);
}

main section.section_5 .animation-wrap .half.left .info-wrap .item-box {
  width: 20%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  pointer-events: none;
}

main section.section_5 .animation-wrap .half.left .info-wrap .item-box > img {
  pointer-events: none;
}

main section.section_5 .animation-wrap .half.left .info-wrap .item-box .name {
  width: 80%;
  top: unset;
  left: unset;
  -webkit-transform: translate(20%, 10%);
          transform: translate(20%, 10%);
  opacity: 0;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

main section.section_5 .animation-wrap .half.left .info-wrap .item-box.a {
  top: unset;
  -webkit-transform: translate(-200%, 14%);
          transform: translate(-200%, 14%);
}

main section.section_5 .animation-wrap .half.left .info-wrap .item-box.b {
  top: unset;
  -webkit-transform: translate(-100%, -21%);
          transform: translate(-100%, -21%);
}

main section.section_5 .animation-wrap .half.left .info-wrap .item-box.c {
  -webkit-transform: translate(0%, 4%);
          transform: translate(0%, 4%);
}

main section.section_5 .animation-wrap .half.left .info-wrap .item-box.d {
  bottom: unset;
  -webkit-transform: translate(100%, 29%);
          transform: translate(100%, 29%);
}

main section.section_5 .animation-wrap .half.left .info-wrap .item-box.e {
  bottom: unset;
  -webkit-transform: translate(200%, -1%);
          transform: translate(200%, -1%);
}

main section.section_5 .animation-wrap .half.left .info-wrap .item-box.e .name {
  -webkit-transform: translate(20%, 2%);
          transform: translate(20%, 2%);
}

main section.section_5 .animation-wrap .half.left .info-wrap .text-info {
  opacity: 0;
  top: unset;
  width: 80%;
  left: 10%;
  bottom: 15%;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

main section.section_5 .animation-wrap .half.right {
  position: relative;
  pointer-events: none;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

main section.section_5 .animation-wrap .half.right .bg {
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

main section.section_5 .animation-wrap .half.right .info-wrap {
  pointer-events: none;
}

main section.section_5 .animation-wrap .half.right .info-wrap .img-box {
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

main section.section_5 .animation-wrap .half.right .info-wrap .logo-red,
main section.section_5 .animation-wrap .half.right .info-wrap .logo {
  opacity: 0;
  -webkit-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}

main section.section_5 .animation-wrap .half.right .info-wrap .logo {
  width: 60%;
  right: unset;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  -webkit-transform: translate(-10%, -18%);
          transform: translate(-10%, -18%);
}

main section.section_5 .animation-wrap .half.right .info-wrap .main {
  left: unset;
  top: unset;
  right: 5%;
  bottom: 20%;
  width: 45%;
}

main section.section_5 .animation-wrap .half.right .info-wrap .title {
  left: unset;
  top: unset;
  width: 80%;
  bottom: 5%;
  right: -12%;
}

main section.section_5 .animation-wrap .half.right .info-wrap .text-info {
  left: unset;
  width: 40%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  bottom: 29%;
  right: 4%;
  opacity: 0;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}

main section.section_5 .animation-wrap .show-right-box {
  width: 100%;
  height: 100%;
  -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0);
          clip-path: polygon(0 100%, 100% 100%, 100% 0);
}

main section.section_5 .animation-wrap.show-left .half.left .title {
  -webkit-transform: translate(33%, 10%) scale(1.05);
          transform: translate(33%, 10%) scale(1.05);
}

main section.section_5 .animation-wrap.show-left .half.left .info-wrap {
  overflow: unset;
}

main section.section_5 .animation-wrap.show-left .half.left .info-wrap .a {
  -webkit-transform: translate(-220%, -58%);
          transform: translate(-220%, -58%);
}

main section.section_5 .animation-wrap.show-left .half.left .info-wrap .a .name {
  -webkit-transform: translate(20%, 15%);
          transform: translate(20%, 15%);
}

main section.section_5 .animation-wrap.show-left .half.left .info-wrap .b {
  -webkit-transform: translate(-110%, -56%);
          transform: translate(-110%, -56%);
}

main section.section_5 .animation-wrap.show-left .half.left .info-wrap .b .name {
  -webkit-transform: translate(20%, 20%);
          transform: translate(20%, 20%);
}

main section.section_5 .animation-wrap.show-left .half.left .info-wrap .c {
  -webkit-transform: translate(0%, 4%);
          transform: translate(0%, 4%);
}

main section.section_5 .animation-wrap.show-left .half.left .info-wrap .d {
  -webkit-transform: translate(110%, 64%);
          transform: translate(110%, 64%);
}

main section.section_5 .animation-wrap.show-left .half.left .info-wrap .e {
  -webkit-transform: translate(220%, 66%);
          transform: translate(220%, 66%);
}

main section.section_5 .animation-wrap.show-left .half.left .info-wrap .e .name {
  -webkit-transform: translate(20%, 15%);
          transform: translate(20%, 15%);
}

main section.section_5 .animation-wrap.show-left .half.left .info-wrap .name {
  opacity: 1;
}

main section.section_5 .animation-wrap.show-left .half.left .info-wrap .text-info {
  opacity: 1;
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}

main section.section_5 .animation-wrap.show-left .half.right {
  -webkit-transform: rotate(10deg) translate(30%, 50%);
          transform: rotate(10deg) translate(30%, 50%);
  opacity: 0;
}

main section.section_5 .animation-wrap.show-left .show-right-box {
  display: none;
}

main section.section_5 .animation-wrap.show-right .half.left {
  -webkit-transform: translate(-30%, -10%);
          transform: translate(-30%, -10%);
  opacity: 0;
}

main section.section_5 .animation-wrap.show-right .half.right .bg {
  opacity: 0;
}

main section.section_5 .animation-wrap.show-right .half.right .logo-red,
main section.section_5 .animation-wrap.show-right .half.right .logo {
  opacity: 1;
}

main section.section_5 .animation-wrap.show-right .half.right .main {
  -webkit-transform: translate(-118%, -60%) scale(1.4);
          transform: translate(-118%, -60%) scale(1.4);
}

main section.section_5 .animation-wrap.show-right .half.right .title {
  -webkit-transform: translate(-30%, -20%) scale(1.3);
          transform: translate(-30%, -20%) scale(1.3);
}

main section.section_5 .animation-wrap.show-right .half.right .text-info {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
  opacity: 1;
}

main section.section_5 .btn-join-line {
  top: unset;
  left: unset;
  right: 9%;
  bottom: 11%;
  width: 33%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

main section.section_5 .btn-join-line .hand {
  width: 20%;
  top: unset;
  left: unset;
  -webkit-transform: translate(30%, 80%);
          transform: translate(30%, 80%);
  -webkit-animation: hand-move-2 1s linear infinite;
          animation: hand-move-2 1s linear infinite;
}

@-webkit-keyframes hand-move-2 {
  0% {
    -webkit-transform: translate(30%, 80%);
            transform: translate(30%, 80%);
  }
  80% {
    -webkit-transform: translate(35%, 85%);
            transform: translate(35%, 85%);
  }
  100% {
    -webkit-transform: translate(30%, 80%);
            transform: translate(30%, 80%);
  }
}

@keyframes hand-move-2 {
  0% {
    -webkit-transform: translate(30%, 80%);
            transform: translate(30%, 80%);
  }
  80% {
    -webkit-transform: translate(35%, 85%);
            transform: translate(35%, 85%);
  }
  100% {
    -webkit-transform: translate(30%, 80%);
            transform: translate(30%, 80%);
  }
}

@media screen and (max-width: 767px) {
  main section.section_5 .animation-wrap {
    width: 74vw;
    right: 0;
    top: 0;
    left: 0;
    bottom: 7%;
  }
  main section.section_5 .btn-join-line {
    left: 11%;
    right: unset;
    bottom: 0;
    top: 40%;
    width: 27vw;
  }
  main section.section_5 .btn-join-line .hand {
    width: 40%;
    -webkit-animation: hand-move-2 1s linear infinite;
            animation: hand-move-2 1s linear infinite;
  }
  @-webkit-keyframes hand-move-2 {
    0% {
      -webkit-transform: translate(15%, 70%);
              transform: translate(15%, 70%);
    }
    80% {
      -webkit-transform: translate(20%, 75%);
              transform: translate(20%, 75%);
    }
    100% {
      -webkit-transform: translate(15%, 70%);
              transform: translate(15%, 70%);
    }
  }
  @keyframes hand-move-2 {
    0% {
      -webkit-transform: translate(15%, 70%);
              transform: translate(15%, 70%);
    }
    80% {
      -webkit-transform: translate(20%, 75%);
              transform: translate(20%, 75%);
    }
    100% {
      -webkit-transform: translate(15%, 70%);
              transform: translate(15%, 70%);
    }
  }
}

main section.section_6 .content-wrap {
  background: url(../images/section6/text_bg.png) no-repeat top;
  background-size: 100%;
  position: absolute;
  top: unset;
  bottom: 10%;
  width: 87%;
  height: 63%;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

main section.section_6 .content-wrap article {
  position: absolute;
  opacity: 0;
  width: 88%;
  height: 90%;
  margin: auto;
  -webkit-transform: translateX(1%);
          transform: translateX(1%);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  color: #fff;
  font-weight: 400;
  pointer-events: none;
  display: none;
}

main section.section_6 .content-wrap article.act {
  display: block;
  -webkit-animation: showArticle .3s ease-in forwards;
          animation: showArticle .3s ease-in forwards;
  pointer-events: all;
}

@-webkit-keyframes showArticle {
  0% {
    opacity: 0;
    -webkit-transform: translate(1%, 5%);
            transform: translate(1%, 5%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(1%, 0%);
            transform: translate(1%, 0%);
  }
}

@keyframes showArticle {
  0% {
    opacity: 0;
    -webkit-transform: translate(1%, 5%);
            transform: translate(1%, 5%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(1%, 0%);
            transform: translate(1%, 0%);
  }
}

main section.section_6 .content-wrap article.act.fit {
  width: 100%;
  height: 100%;
}

main section.section_6 .content-wrap article h1 {
  text-align: center;
}

main section.section_6 .content-wrap article .ranking-list {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
}

main section.section_6 .content-wrap article .ranking-list h2 {
  text-align: center;
  color: #fff;
  font-size: 24px;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

main section.section_6 .content-wrap article .ranking-container {
  border-radius: 10px;
  height: 24vw;
  overflow-y: auto;
}

main section.section_6 .content-wrap article .ranking-container::-webkit-scrollbar {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  width: 6px;
  height: 100%;
}

main section.section_6 .content-wrap article .ranking-container::-webkit-scrollbar-button {
  background: transparent;
}

main section.section_6 .content-wrap article .ranking-container::-webkit-scrollbar-track-piece {
  background: transparent;
}

main section.section_6 .content-wrap article .ranking-container::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 5px;
}

main section.section_6 .content-wrap article .ranking-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: .8vw 2vw;
  margin-bottom: 1vw;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  color: #fff;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
  font-size: 1.5vw;
}

main section.section_6 .content-wrap article .ranking-item:hover {
  background: rgba(255, 255, 255, 0.2);
}

main section.section_6 .content-wrap article .ranking-item .rank {
  font-weight: bold;
  width: 40px;
  text-align: center;
}

main section.section_6 .content-wrap article .ranking-item .name {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin: 0 15px;
  text-align: left;
}

main section.section_6 .content-wrap article .ranking-item .power {
  font-weight: bold;
  color: #ffcc00;
  min-width: 80px;
  text-align: right;
}

main section.section_6 .content-wrap article .ranking-item:nth-child(1) .rank {
  color: #ffd700;
}

main section.section_6 .content-wrap article .ranking-item:nth-child(2) .rank {
  color: #c7ca6f;
}

main section.section_6 .content-wrap article .ranking-item:nth-child(3) .rank {
  color: #cd7f32;
}

@media screen and (max-width: 767px) {
  main section.section_6 .content-wrap article .ranking-list {
    padding: 10px;
  }
  main section.section_6 .content-wrap article .ranking-list h2 {
    font-size: 18px;
  }
  main section.section_6 .content-wrap article .ranking-container {
    padding: 1vw;
    height: calc(101vw - 40px);
  }
  main section.section_6 .content-wrap article .ranking-item {
    padding: 6px 10px;
    font-size: 4vw;
  }
  main section.section_6 .content-wrap article .ranking-item .rank {
    width: 30px;
  }
  main section.section_6 .content-wrap article .ranking-item .name {
    margin: 0 10px;
  }
  main section.section_6 .content-wrap article .ranking-item .power {
    min-width: 60px;
  }
}

@media screen and (max-width: 767px) {
  main section.section_6 .content-wrap {
    background: url(../images/section6/text_bg_mo.png) no-repeat top;
    background-size: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    top: 11vw;
    right: 0vw;
    width: 100%;
    height: 115vw;
  }
}

main section.section_6 .btn-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1%;
  top: unset;
  bottom: 3%;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

main section.section_6 .btn-wrap .btn {
  position: relative;
  width: 15%;
}

main section.section_6 .btn-wrap .btn img:last-child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

main section.section_6 .btn-wrap .btn.act {
  pointer-events: none;
  cursor: none;
}

main section.section_6 .btn-wrap .btn.act img:last-child {
  display: none;
}

@media screen and (max-width: 767px) {
  main section.section_6 .btn-wrap {
    width: 75%;
    gap: 4%;
    bottom: 2%;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    left: unset;
  }
  main section.section_6 .btn-wrap .btn {
    width: 45%;
    margin-bottom: 2vw;
  }
}

main section.section_7 .content-wrap {
  width: 80%;
  height: 95%;
  -webkit-transform: translateY(8%);
          transform: translateY(8%);
}

main section.section_7 .content-wrap .text-wrap {
  color: #fff;
}

main section.section_7 .content-wrap .text-wrap::-webkit-scrollbar {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  width: 5px;
  height: 100%;
}

main section.section_7 .content-wrap .text-wrap::-webkit-scrollbar-button {
  background: transparent;
}

main section.section_7 .content-wrap .text-wrap::-webkit-scrollbar-track-piece {
  background: transparent;
}

main section.section_7 .content-wrap .text-wrap::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #636363;
}

main section.section_7 .content-wrap .text-wrap::-webkit-scrollbar-track {
  -webkit-box-shadow: transparent;
          box-shadow: transparent;
}

@media screen and (max-width: 767px) {
  main section.section_7 .content-wrap {
    width: 100%;
    height: 100%;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

.text-wrap {
  overflow: scroll;
  width: 90%;
  height: 75%;
  -webkit-transform: translateY(2.5rem);
          transform: translateY(2.5rem);
  scroll-behavior: smooth;
}

@media screen and (max-width: 1400px) {
  .text-wrap {
    -webkit-transform: translateY(6%);
            transform: translateY(6%);
  }
}

@media screen and (max-width: 767px) {
  .text-wrap {
    -webkit-transform: translateY(6.5vw);
            transform: translateY(6.5vw);
  }
}

.text-wrap::-webkit-scrollbar {
  background-color: rgba(100, 61, 44, 0.2);
  border-radius: 5px;
  width: 5px;
  height: 100%;
}

.text-wrap::-webkit-scrollbar-button {
  background: transparent;
}

.text-wrap::-webkit-scrollbar-track-piece {
  background: transparent;
}

.text-wrap::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(100, 61, 44, 0.3);
}

.text-wrap::-webkit-scrollbar-track {
  -webkit-box-shadow: transparent;
          box-shadow: transparent;
}

.text-wrap h2 {
  text-align: center;
  margin: 3rem;
}

@media screen and (max-width: 1400px) {
  .text-wrap h2 {
    margin: 4vh;
  }
}

@media screen and (max-width: 767px) {
  .text-wrap h2 {
    margin: 6vw;
  }
}

.text-wrap p {
  margin: 0.5em 0;
}

@media screen and (max-width: 1400px) {
  .text-wrap p {
    margin: 1vh 0;
  }
}

@media screen and (max-width: 767px) {
  .text-wrap p {
    margin: 1vw 0;
  }
}

.text-wrap p span {
  margin-left: -2.3em;
}

@media screen and (max-width: 1400px) {
  .text-wrap p span {
    margin-left: -4.5vh;
  }
}

@media screen and (max-width: 767px) {
  .text-wrap p span {
    margin-left: -2vw;
  }
}

.text-wrap ol {
  padding-left: 2.8em;
}

.text-wrap ol > li {
  margin-bottom: 1.5em;
}

.text-wrap ol > li ol {
  padding-left: 2.3em;
  list-style-type: decimal;
}

.text-wrap ol > li ol li {
  margin-bottom: 1.5em;
}

@media screen and (max-width: 1400px) {
  .text-wrap ol {
    padding-left: 6vh;
    padding-right: 1.5vh;
  }
  .text-wrap ol > li {
    margin-bottom: 1.5vh;
  }
  .text-wrap ol > li ol {
    padding-left: 4.5vh;
  }
  .text-wrap ol > li ol li {
    margin-bottom: 1.5vh;
  }
}

@media screen and (max-width: 767px) {
  .text-wrap ol {
    padding-left: 6vw;
    padding-right: 1.5vw;
  }
  .text-wrap ol > li {
    margin-bottom: 1.5vw;
  }
  .text-wrap ol > li ol {
    padding-left: 4.5vw;
  }
  .text-wrap ol > li ol li {
    margin-bottom: 1.5vw;
  }
}

.text-wrap .award-table {
  border-collapse: collapse;
  margin-top: 0.5em;
  margin-bottom: 1em;
}

.text-wrap .award-table th, .text-wrap .award-table td {
  border: 1px solid #000;
  padding: 6px 12px;
  text-align: left;
  white-space: nowrap;
}

.text-wrap .award-table th {
  font-weight: bold;
}

@media screen and (max-width: 1400px) {
  .text-wrap .award-table {
    margin-top: 0.5vh;
    margin-bottom: 1vh;
  }
  .text-wrap .award-table th, .text-wrap .award-table td {
    padding: 6px 12px;
  }
}

@media screen and (max-width: 767px) {
  .text-wrap .award-table {
    margin-top: 0.5vw;
    margin-bottom: 1vw;
  }
  .text-wrap .award-table th, .text-wrap .award-table td {
    padding: 6px 12px;
  }
}

footer {
  width: 100%;
  max-width: 100vw;
}

footer img {
  width: 100%;
}

footer img.mb {
  display: none;
}

@media screen and (max-width: 767px) {
  footer {
    padding-bottom: 17vw;
  }
  footer img {
    width: 100%;
  }
  footer img.mb {
    display: block;
  }
  footer img.pc {
    display: none;
  }
}

.pop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 100;
}

.pop.act {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.pop > div {
  width: 600px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
}

@media screen and (max-width: 1400px) {
  .pop > div {
    width: 70vh;
  }
}

@media screen and (max-width: 767px) {
  .pop > div {
    width: 95vw;
    max-width: 75vh;
  }
}

.pop > div > img {
  width: 100%;
  height: auto;
}

.pop > div > img.mb {
  display: none;
}

@media screen and (max-width: 767px) {
  .pop > div > img {
    width: 100%;
  }
  .pop > div > img.pc {
    display: none;
  }
  .pop > div > img.mb {
    display: block;
  }
}

.pop.input .text-wrap {
  padding-top: 20%;
  font-size: 1.5rem;
}

.pop.input .text-wrap .text {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin: auto;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .pop.input .text-wrap {
    font-size: 4vw;
  }
}

.pop .text-close-pop {
  margin-top: 2vw;
  color: #dcc792;
  font-weight: 400;
  font-size: 1.2rem;
  pointer-events: none;
}

@media screen and (max-width: 1400px) {
  .pop .text-close-pop {
    font-size: 1.6vw;
  }
}

@media screen and (max-width: 767px) {
  .pop .text-close-pop {
    font-size: 3vw;
    margin-top: 4vw;
  }
}

.pop.input > div {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.pop.input > div .input-wrap {
  position: absolute;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.1rem;
  -webkit-transform: translate(2rem, 5.4rem);
          transform: translate(2rem, 5.4rem);
  width: 11.2rem;
}

.pop.input > div .input-wrap input {
  position: relative;
  font-size: 1rem;
  padding: 0 10px;
  height: 1.5rem;
}

@media screen and (max-width: 1400px) {
  .pop.input > div .input-wrap {
    top: 0;
    gap: 1.3vw;
    -webkit-transform: translate(2.5vw, 6.7vw);
            transform: translate(2.5vw, 6.7vw);
    width: 14vw;
  }
  .pop.input > div .input-wrap input {
    height: 2vw;
    font-size: 1.5vw;
  }
}

@media screen and (max-width: 767px) {
  .pop.input > div .input-wrap {
    gap: 2.7vw;
    -webkit-transform: translate(5vw, 13.5vw);
            transform: translate(5vw, 13.5vw);
    width: 28vw;
  }
  .pop.input > div .input-wrap input {
    height: 4vw;
    font-size: 2.3vw;
  }
}

.pop.input > div .pop-error-message {
  position: absolute;
  bottom: 16rem;
  color: red;
  white-space: nowrap;
  font-size: 1.1rem;
}

@media screen and (max-width: 1400px) {
  .pop.input > div .pop-error-message {
    bottom: 20.5vw;
    font-size: 1.2vw;
  }
}

@media screen and (max-width: 767px) {
  .pop.input > div .pop-error-message {
    bottom: 41vw;
    font-size: 2.3vw;
  }
}

.pop.input > div .pop-submit-btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12.7rem;
  margin: auto;
  width: 12rem;
  height: auto;
  cursor: pointer;
}

@media screen and (max-width: 1400px) {
  .pop.input > div .pop-submit-btn {
    bottom: 16vw;
    width: 15vw;
  }
}

@media screen and (max-width: 767px) {
  .pop.input > div .pop-submit-btn {
    bottom: 33vw;
    width: 28vw;
  }
}

.pop.empty > div {
  text-align: center;
}

.pop.empty > div .pop-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 2rem;
  font-size: 2rem;
  color: #6d3c00;
  font-weight: 900;
}

@media screen and (max-width: 1400px) {
  .pop.empty > div .pop-text {
    height: 2.5vw;
    font-size: 2.5vw;
  }
}

@media screen and (max-width: 767px) {
  .pop.empty > div .pop-text {
    height: 5vw;
    font-size: 5vw;
  }
}

@media screen and (max-width: 360px) {
  .ts-fff {
    /* font shadow ------------------------------------ */
    text-shadow: 0.6928px 0.4px #fff, 0.4px 0.6928px #fff, 0px 0.8px #fff, -0.4px 0.6928px #fff, -0.6928px 0.4px #fff, -0.8px 0px #fff, -0.6928px -0.4px #fff, -0.4px -0.6928px #fff, 0px -0.8px #fff, 0.4px -0.6928px #fff, 0.6928px -0.4px #fff;
  }
}

@media screen and (max-width: 499px) and (min-width: 361px) {
  .ts-fff {
    text-shadow: 0.87744px 0.39072px #fff, 0.64224px 0.71328px #fff, 0.29664px 0.91296px #fff, -0.1008px 0.9552px #fff, -0.48px 0.83136px #fff, -0.77664px 0.56448px #fff, -0.93888px 0.19968px #fff, -0.93888px -0.19968px #fff, -0.77664px -0.56448px #fff, -0.48px -0.83136px #fff, -0.1008px -0.9552px #fff, 0.29664px -0.91296px #fff, 0.64224px -0.71328px #fff, 0.87744px -0.39072px #fff;
  }
}

@media screen and (max-width: 767px) and (min-width: 500px) {
  .ts-fff {
    text-shadow: 1.323104px 0.40828px #fff, 1.143184px 0.779192px #fff, 0.862232px 1.082288px #fff, 0.50516px 1.288504px #fff, 0.1038px 1.379848px #fff, -0.308632px 1.3494px #fff, -0.692px 1.198544px #fff, -1.014472px 0.94112px #fff, -1.246984px 0.600656px #fff, -1.368776px 0.206216px #fff, -1.368776px -0.206216px #fff, -1.246984px -0.600656px #fff, -1.014472px -0.94112px #fff, -0.692px -1.198544px #fff, -0.308632px -1.3494px #fff, 0.1038px -1.379848px #fff, 0.50516px -1.288504px #fff, 0.863616px -1.082288px #fff, 1.143184px -0.779192px #fff, 1.323104px -0.40828px #fff;
  }
}

@media screen and (min-width: 768px) {
  .ts-fff {
    text-shadow: 1.8174px 0.415672px #fff, 1.679464px 0.808976px #fff, 1.457648px 1.161272px #fff, 1.161272px 1.457648px #fff, 0.808976px 1.679464px #fff, 0.415672px 1.8174px #fff, 0px 1.864px #fff, -0.415672px 1.8174px #fff, -0.808976px 1.679464px #fff, -1.161272px 1.457648px #fff, -1.457648px 1.161272px #fff, -1.679464px 0.808976px #fff, -1.8174px 0.415672px #fff, -1.864px 0px #fff, -1.8174px -0.415672px #fff, -1.679464px -0.808976px #fff, -1.457648px -1.161272px #fff, -1.161272px -1.457648px #fff, -0.808976px -1.679464px #fff, -0.415672px -1.8174px #fff, 0px -1.864px #fff, 0.415672px -1.8174px #fff, 0.808976px -1.679464px #fff, 1.163136px -1.457648px #fff, 1.457648px -1.161272px #fff, 1.679464px -0.808976px #fff, 1.8174px -0.413808px #fff;
  }
}
/*# sourceMappingURL=main.css.map */