@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Changa+One:ital@0;1&family=Chiron+GoRound+TC:wght@200..900&display=swap");
/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: "Chiron GoRound TC", "Changa One", "Noto Sans TC", "PingFang SC", "微軟正黑體", sans-serif;
  font-weight: 500;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after {
  content: "";
  content: none;
}

q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*自訂*/
a {
  text-decoration: none;
  outline: none;
}

body {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  color: #000000;
  letter-spacing: 1px;
}

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

input {
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  background: none;
  outline: none;
  border-radius: none;
}

/*HTML5 tag*/
section, article, aside, footer, header, nav, main {
  display: block;
}

/*Input reset*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s; /*透明*/
}

input[type=submit], input[type=reset], input[type=button], input[type=text], input[type=password], textarea, select {
  -webkit-appearance: none;
  outline: none;
  -moz-appearance: none;
       appearance: none;
  background-color: #fff;
}

button {
  outline: none;
  border: none;
  background-color: none;
}

input[type=checkbox] {
  accent-color: #9fb0ff;
  -moz-appearance: auto;
       appearance: auto;
  -webkit-appearance: checkbox;
}

.codeBox.thin .gc-reset {
  top: -1px;
}

.codeBox .img {
  height: 75%;
  background-size: auto 125% !important;
  width: 100px !important;
  top: 12% !important;
}

.codeBox.thin.verify__box > div:nth-child(2) {
  height: 50px !important;
}

html {
  font-size: 16px;
}

main {
  max-width: 1920px;
  margin: 0 auto;
  width: 100%;
  background-color: #fff;
  position: relative;
}

body {
  background-color: #fff;
}

a {
  display: inline-block;
  width: 100%;
  height: 100%;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.l-wrapper {
  max-width: 1024px;
  margin: 0 auto;
}
@media screen and (max-width: 1024px) {
  .l-wrapper {
    width: 90%;
  }
}

.l-wrapperSub {
  max-width: 960px;
  margin: 0 auto;
}
@media screen and (max-width: 1024px) {
  .l-wrapperSub {
    width: 90%;
  }
}

.l-wrapperThird {
  max-width: 600px;
  margin: 0 auto;
}
@media screen and (max-width: 680px) {
  .l-wrapperThird {
    width: 90%;
  }
}

.l-overflowY {
  overflow-y: hidden;
}

.l-overflow {
  overflow: hidden;
}

.l-footerColor {
  background-color: #06090a;
  z-index: 1;
}

.l-link {
  display: inline-block;
}
.l-link a {
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
  color: #9d3cd0;
}
.l-link a:hover {
  opacity: 0.5;
}

.l-marginTb10 {
  margin: 10% 0;
}

.l-notice {
  color: #cd4350;
}

.l-posa {
  position: absolute;
}

.l-marginb2 {
  margin: 0 0 2%;
}

@-webkit-keyframes jumpFade {
  0% {
    right: -20%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  20% {
    bottom: 0;
    -webkit-transform: scale(1.2, 0.8);
            transform: scale(1.2, 0.8);
  }
  30% {
    bottom: 60px;
    -webkit-transform: scale(0.9, 1.1);
            transform: scale(0.9, 1.1);
  }
  45% {
    bottom: 0;
    -webkit-transform: scale(1.2, 0.8);
            transform: scale(1.2, 0.8);
  }
  55% {
    bottom: 60px;
    -webkit-transform: scale(0.9, 1.1);
            transform: scale(0.9, 1.1);
  }
  60% {
    opacity: 1;
    bottom: 0;
  }
  65% {
    bottom: 60px;
  }
  100% {
    right: 50%;
    opacity: 1;
    bottom: 0;
  }
}

@keyframes jumpFade {
  0% {
    right: -20%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  20% {
    bottom: 0;
    -webkit-transform: scale(1.2, 0.8);
            transform: scale(1.2, 0.8);
  }
  30% {
    bottom: 60px;
    -webkit-transform: scale(0.9, 1.1);
            transform: scale(0.9, 1.1);
  }
  45% {
    bottom: 0;
    -webkit-transform: scale(1.2, 0.8);
            transform: scale(1.2, 0.8);
  }
  55% {
    bottom: 60px;
    -webkit-transform: scale(0.9, 1.1);
            transform: scale(0.9, 1.1);
  }
  60% {
    opacity: 1;
    bottom: 0;
  }
  65% {
    bottom: 60px;
  }
  100% {
    right: 50%;
    opacity: 1;
    bottom: 0;
  }
}
@-webkit-keyframes jumpLeftFade {
  0% {
    left: -10%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  20% {
    bottom: 0;
    -webkit-transform: scale(1.2, 0.8);
            transform: scale(1.2, 0.8);
  }
  30% {
    bottom: 60px;
    -webkit-transform: scale(0.9, 1.1);
            transform: scale(0.9, 1.1);
  }
  45% {
    bottom: 0;
    -webkit-transform: scale(1.2, 0.8);
            transform: scale(1.2, 0.8);
  }
  55% {
    bottom: 60px;
    -webkit-transform: scale(0.9, 1.1);
            transform: scale(0.9, 1.1);
  }
  100% {
    left: -2%;
    opacity: 1;
    bottom: 0;
  }
}
@keyframes jumpLeftFade {
  0% {
    left: -10%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  20% {
    bottom: 0;
    -webkit-transform: scale(1.2, 0.8);
            transform: scale(1.2, 0.8);
  }
  30% {
    bottom: 60px;
    -webkit-transform: scale(0.9, 1.1);
            transform: scale(0.9, 1.1);
  }
  45% {
    bottom: 0;
    -webkit-transform: scale(1.2, 0.8);
            transform: scale(1.2, 0.8);
  }
  55% {
    bottom: 60px;
    -webkit-transform: scale(0.9, 1.1);
            transform: scale(0.9, 1.1);
  }
  100% {
    left: -2%;
    opacity: 1;
    bottom: 0;
  }
}
@-webkit-keyframes jumpMapFade {
  0% {
    left: -5%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  20% {
    -webkit-transform: scale(1.2, 0.8);
            transform: scale(1.2, 0.8);
  }
  30% {
    -webkit-transform: scale(0.9, 1.1);
            transform: scale(0.9, 1.1);
  }
  45% {
    -webkit-transform: scale(1.2, 0.8);
            transform: scale(1.2, 0.8);
  }
  55% {
    -webkit-transform: scale(0.9, 1.1);
            transform: scale(0.9, 1.1);
  }
  100% {
    left: -5%;
    opacity: 1;
  }
}
@keyframes jumpMapFade {
  0% {
    left: -5%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  20% {
    -webkit-transform: scale(1.2, 0.8);
            transform: scale(1.2, 0.8);
  }
  30% {
    -webkit-transform: scale(0.9, 1.1);
            transform: scale(0.9, 1.1);
  }
  45% {
    -webkit-transform: scale(1.2, 0.8);
            transform: scale(1.2, 0.8);
  }
  55% {
    -webkit-transform: scale(0.9, 1.1);
            transform: scale(0.9, 1.1);
  }
  100% {
    left: -5%;
    opacity: 1;
  }
}
@-webkit-keyframes jumpMapFadeRight {
  0% {
    right: -5%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  20% {
    -webkit-transform: scale(1.2, 0.8);
            transform: scale(1.2, 0.8);
  }
  30% {
    bottom: 60px;
    -webkit-transform: scale(0.9, 1.1);
            transform: scale(0.9, 1.1);
  }
  45% {
    -webkit-transform: scale(1.2, 0.8);
            transform: scale(1.2, 0.8);
  }
  55% {
    -webkit-transform: scale(0.9, 1.1);
            transform: scale(0.9, 1.1);
  }
  100% {
    right: -5%;
    opacity: 1;
  }
}
@keyframes jumpMapFadeRight {
  0% {
    right: -5%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  20% {
    -webkit-transform: scale(1.2, 0.8);
            transform: scale(1.2, 0.8);
  }
  30% {
    bottom: 60px;
    -webkit-transform: scale(0.9, 1.1);
            transform: scale(0.9, 1.1);
  }
  45% {
    -webkit-transform: scale(1.2, 0.8);
            transform: scale(1.2, 0.8);
  }
  55% {
    -webkit-transform: scale(0.9, 1.1);
            transform: scale(0.9, 1.1);
  }
  100% {
    right: -5%;
    opacity: 1;
  }
}
@-webkit-keyframes zoomEffect {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@keyframes zoomEffect {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@-webkit-keyframes zoomOutEffect {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.97);
            transform: scale(0.97);
  }
}
@keyframes zoomOutEffect {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.97);
            transform: scale(0.97);
  }
}
@-webkit-keyframes zoomOut {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
}
@keyframes zoomOut {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
}
@-webkit-keyframes zoomInshow {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes zoomInshow {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes shakeWindows {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  25% {
    -webkit-transform: translateX(5px);
            transform: translateX(5px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes shakeWindows {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  25% {
    -webkit-transform: translateX(5px);
            transform: translateX(5px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes shakeMap {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  25% {
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes shakeMap {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  25% {
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes squash-bounce {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0) scale(1, 1);
            transform: translate3d(0, 0, 0) scale(1, 1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: translate3d(0, -6px, 0) scale(1, 1.01);
            transform: translate3d(0, -6px, 0) scale(1, 1.01);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  75% {
    -webkit-transform: translate3d(0, 0, 0) scale(1, 0.99);
            transform: translate3d(0, 0, 0) scale(1, 0.99);
  }
}
@keyframes squash-bounce {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0) scale(1, 1);
            transform: translate3d(0, 0, 0) scale(1, 1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: translate3d(0, -6px, 0) scale(1, 1.01);
            transform: translate3d(0, -6px, 0) scale(1, 1.01);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  75% {
    -webkit-transform: translate3d(0, 0, 0) scale(1, 0.99);
            transform: translate3d(0, 0, 0) scale(1, 0.99);
  }
}
@-webkit-keyframes buzzing {
  from {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  to {
    -webkit-transform: translate(0, 5px);
            transform: translate(0, 5px);
  }
}
@keyframes buzzing {
  from {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  to {
    -webkit-transform: translate(0, 5px);
            transform: translate(0, 5px);
  }
}
.container {
  max-width: 1920px;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.container_gradient {
  background: #FB94D6;
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(251, 148, 214)), color-stop(47%, rgb(254, 168, 207)), to(rgb(250, 187, 187)));
  background: linear-gradient(180deg, rgb(251, 148, 214) 0%, rgb(254, 168, 207) 47%, rgb(250, 187, 187) 100%);
}
.container_yellow {
  background-image: url("../img/bg_yellow.jpg");
  background-size: 8%;
  background-position: 0 0;
  background-repeat: repeat;
}
.container_acc {
  top: 5%;
  right: 0;
  max-width: 570px;
  width: 100%;
  z-index: 2;
}
.container_acc--rLunatic {
  right: -188px;
  top: 23%;
}
.container_purple {
  background-color: #f879ff;
}
@media screen and (max-width: 1280px) {
  .container_acc {
    top: -9%;
    right: -160px;
  }
  .container_acc--rLunatic {
    right: -188px;
    top: 10%;
  }
}

.kv_container {
  max-width: 1366px;
  margin: 3.2% auto;
  height: auto;
  position: relative;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
  opacity: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  aspect-ratio: 1366/754;
  z-index: 2;
}
.kv_container.active {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}
.kv_container.active .kv_job {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}
.kv_container.active .kv_job--01 {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}
.kv_container.active .kv_job--02 {
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}
.kv_container.active .kv_job--03 {
  -webkit-transition-delay: 1.4s;
          transition-delay: 1.4s;
}
.kv_container.active .kv_slogan {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}
.kv_container.active .kv_behind_lunatic {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
  -webkit-transition-delay: 1.6s;
          transition-delay: 1.6s;
}
.kv_container.active .kv_left_bubble {
  -webkit-transform: scale(1) translateY(-50%);
          transform: scale(1) translateY(-50%);
  opacity: 1;
  -webkit-transition-delay: 1.8s;
          transition-delay: 1.8s;
}
@media screen and (max-width: 1280px) {
  .kv_container {
    margin: 8.2% auto;
  }
}

.kv_job {
  top: 0;
  opacity: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-transform: scale(0);
          transform: scale(0);
}
.kv_job--01.bounce {
  display: inline-block;
  -webkit-animation: squash-bounce 1.2s infinite;
          animation: squash-bounce 1.2s infinite;
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
}
.kv_job--02 {
  z-index: 1;
}
.kv_job--02.bounce {
  display: inline-block;
  -webkit-animation: squash-bounce 1.2s 0.1s infinite;
          animation: squash-bounce 1.2s 0.1s infinite;
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
}
.kv_job--03.bounce {
  display: inline-block;
  -webkit-animation: squash-bounce 1.2s 0.2s infinite;
          animation: squash-bounce 1.2s 0.2s infinite;
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
}
.kv_slogan {
  top: 0;
  opacity: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-transform: scale(0);
          transform: scale(0);
}
.kv_behind_lunatic {
  top: 47.4%;
  max-width: 244px;
  width: 19.06%;
  left: -2%;
  opacity: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
  -webkit-animation: jumpLeftFade 2.5s 0.2s forwards ease-in-out;
          animation: jumpLeftFade 2.5s 0.2s forwards ease-in-out;
}
.kv_left_bubble {
  max-width: 275px;
  width: 21.48%;
  top: 45%;
  right: -11%;
  z-index: 2;
  -webkit-transform: scale(0) translateY(-50%);
          transform: scale(0) translateY(-50%);
  opacity: 0;
  -webkit-transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
@media screen and (max-width: 860px) {
  .kv_job {
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
    width: 198%;
    top: 0%;
    right: -20%;
  }
  .kv_slogan {
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
    width: 200%;
    right: initial;
    z-index: 20;
    top: 35%;
  }
  .kv_behind_lunatic {
    display: none;
  }
}

@media screen and (max-width: 860px) {
  .kv_windows {
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
    width: 194%;
  }
}

.acc_line {
  width: 100%;
  height: 100%;
  background-image: url("../img/bg_line_pink.svg");
  background-size: cover;
  background-position: 0 center;
  background-repeat: no-repeat;
  top: 0;
  left: 0;
  -webkit-transform: scale(2);
          transform: scale(2);
  -webkit-transition: 0.7s;
  transition: 0.7s;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  pointer-events: none;
}
.acc_line.active {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.zoomIn {
  -webkit-animation: zoomEffect 20s alternate ease-in infinite;
          animation: zoomEffect 20s alternate ease-in infinite;
}

.zoomOut {
  -webkit-animation: zoomOutEffect 15s 0.1s alternate ease-in infinite;
          animation: zoomOutEffect 15s 0.1s alternate ease-in infinite;
}

.shaketive {
  animation: shakeWindows 2s alternate-reverse infinite;
}

.kv_front_container {
  width: 100%;
  position: relative;
  z-index: 3;
}
@media screen and (max-width: 860px) {
  .kv_front_container {
    z-index: initial;
  }
}

.kv_front_lunatic {
  max-width: 570px;
  width: 44.5%;
  right: 50%;
  bottom: 0;
  z-index: 1;
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
  -webkit-animation: jumpFade 2.5s forwards ease-in-out;
          animation: jumpFade 2.5s forwards ease-in-out;
}
.kv_front_ribbonLeft {
  max-width: 435px;
  width: 33.98%;
  left: -1vw;
  bottom: 0;
}
.kv_front_ribbonRight {
  max-width: 1175px;
  width: 91.7%;
  right: -6vw;
  bottom: 0;
  z-index: 2;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
@media screen and (max-width: 1280px) {
  .kv_front_ribbonRight {
    right: -20%;
  }
}
@media screen and (max-width: 860px) {
  .kv_front_lunatic {
    display: none;
  }
  .kv_front_ribbonLeft {
    width: 83.98%;
    left: -53%;
  }
  .kv_front_ribbonRight {
    width: 150%;
    right: -60%;
  }
}

.logo {
  max-width: 180px;
  width: 14.06%;
  z-index: 99;
  left: 2%;
  top: 1.5%;
}
@media screen and (max-width: 680px) {
  .logo {
    width: 30.06%;
  }
}

.kv_left_computer {
  max-width: 175px;
  width: 100%;
  position: absolute;
  top: 25%;
  left: 2.5%;
  z-index: 1;
}
@media screen and (max-width: 1466px) {
  .kv_left_computer {
    display: none;
  }
}

.logo {
  z-index: 10;
}

.computer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  margin: 5% 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.computer img {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.btn {
  cursor: pointer;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  position: relative;
}
.btn--ro img {
  position: relative;
  z-index: 1;
}
.btn:hover::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: #FB94D6;
  padding: 5%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.kv_right_text {
  right: 0;
  font-size: 12.7rem;
  top: -30px;
  text-align: right;
  color: #ffe0a5;
  z-index: 1;
}
.kv_right_text--green {
  color: #7dc6ab;
  font-size: 14rem;
}
.kv_right_text--green .text-main {
  font-size: 14rem;
}
.kv_right_text--green .text--sub {
  font-size: 13rem;
  margin: 10px 0 0 0;
}
.kv_right_text--purple {
  color: #f879ff;
}

.kv_left_text {
  left: -10px;
  font-size: 13.7rem;
  top: -30px;
  text-align: left;
  color: #ffe0a5;
  z-index: 1;
}
.kv_left_text--green {
  color: #7dc6ab;
  font-size: 14rem;
}
.kv_left_text--green .text-main {
  font-size: 14rem;
}
.kv_left_text--green .text--sub {
  font-size: 13rem;
  margin: 10px 0 0 0;
}

.text--main {
  text-transform: uppercase;
}
.text--sub {
  text-transform: uppercase;
  line-height: 87px;
  margin: 0 -10px 0 0;
  font-size: 12rem;
  white-space: nowrap;
}
.text_bubble {
  position: absolute;
  top: 0;
  left: 20px;
  width: 100%;
  height: 100%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.bar_line {
  position: relative;
  width: 100%;
  height: 60px;
  margin: -50px 0 0 0;
  z-index: 3;
}
.bar_line--pink {
  height: 73px;
  background-image: url("../img/bg_pink02.jpg");
  background-size: 10%;
  background-position: 0 0;
  background-repeat: repeat;
}
.bar_line--purple {
  height: 43px;
  background-image: url("../img/bg_pink04.jpg");
  background-size: contain;
  background-position: 0 0;
  background-repeat: repeat-x;
}

.event_info_container {
  margin: 5% 0;
  position: relative;
  z-index: 4;
}
.event_info_container--marginTop {
  margin: 5% 0 0;
}
@media screen and (max-width: 1024px) {
  .event_info_container {
    margin: 10% 0 10%;
  }
  .event_info_container--emoemo {
    margin: 10% 0 20%;
  }
  .event_info_container--notice {
    margin: 25% 0 5%;
  }
}
@media screen and (max-width: 680px) {
  .event_info_container--emoemo {
    margin: 10% 0 32%;
  }
}

.event_title {
  max-width: 325px;
  width: 85%;
  margin: 0 auto;
}
.event_title img {
  margin: 0 auto;
}

.event_block {
  background-color: #fff;
  overflow: hidden;
  border-radius: 5px;
  margin: 2% 0;
}

.event_head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 10px 20px;
}
.event_head img {
  width: 60px;
}

.event_body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 2%;
  color: #2a292d;
  position: relative;
}
.event_body--padding0 {
  padding: 0;
}
.event_body .icon {
  margin: 0 0.5% 0 0;
}
.event_body--mission {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 85%;
  margin: 0 auto;
  line-height: 24px;
}
.event_body--mission p {
  text-align: center;
}
.event_body--mission .text_bubble {
  position: static;
  top: 0;
  left: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 0 -3%;
}
.event_body--mission .text_bubble .arrow {
  left: 45%;
}
.event_body .img {
  max-width: 330px;
  width: 100%;
}
.event_body .img img {
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
  width: 100%;
}
@media screen and (max-width: 640px) {
  .event_body--date {
    padding: 5%;
    line-height: 26px;
    text-align: center;
  }
  .event_body--mission {
    width: 95%;
  }
}

.event_vt_block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.event_vt_block .event_block {
  width: calc(33.3333333333% - 10px);
}
.event_vt_block .event_head {
  min-height: 30px;
}
.event_vt_block .event_body {
  padding: 0;
}
@media screen and (max-width: 860px) {
  .event_vt_block {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
  .event_vt_block .task_vt_block {
    width: calc(50% - 10px);
  }
  .event_vt_block .event_block {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
@media screen and (max-width: 680px) {
  .event_vt_block .task_vt_block {
    width: 100%;
  }
}

.task_vt_block {
  width: calc(33.3333333333% - 10px);
}
.task_vt_block .event_block {
  width: 100%;
}
.task_vt_block .vtuber_name {
  right: 5px;
}
.task_vt_block .video_button {
  left: 10px;
  top: 10px;
}
.task_vt_block .video_button .l-btn {
  background-color: #f879ff;
  border-radius: 5px;
  min-height: 45px;
}
.task_vt_block .video_button a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  padding: 10px;
  color: #fff;
}
.task_vt_block .video_button a i {
  margin: 0 5px 0 0;
}
@media screen and (max-width: 860px) {
  .task_vt_block {
    width: calc(50% - 10px);
  }
}
@media screen and (max-width: 680px) {
  .task_vt_block {
    width: calc(100% - 10px);
  }
}

.support_number_wrap {
  padding: 1.5% 2%;
  background-image: url("../img/bg_pink02.jpg");
  background-size: 30%;
  background-position: 0 0;
  background-repeat: repeat;
  border-top: 2px solid #06090a;
}
.support_number_wrap .support_number {
  text-align: center;
  font-size: 2rem;
  color: #fff;
}

.support_button {
  cursor: pointer;
  max-width: 100%;
  width: 321px;
  height: 66px;
  margin: 0 auto;
  background-image: url("../img/btn_sup.png");
  background-size: contain;
  background-position: 0 0;
  background-repeat: no-repeat;
}
.support_button:hover {
  -webkit-animation: shakeWindows 0.2s infinite linear;
          animation: shakeWindows 0.2s infinite linear;
}
.support_button.active {
  background-image: url("../img/btn_sup_active.png");
  background-size: contain;
  background-position: 0 0;
  background-repeat: no-repeat;
}

.vtuber_name {
  bottom: 10px;
}

.kv_left_bubble--common {
  left: 0;
  top: 0;
  right: initial;
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  max-width: 100%;
  width: 100%;
  height: 100%;
}
.kv_left_bubble--common .text_bubble {
  top: 0;
  left: 0;
  width: 100%;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.kv_left_bubble--common .text_bubble .l-bubble {
  margin: -3% 3% 0;
}
.kv_left_bubble--common .text_bubble .bubble--marginTp {
  margin: 3% 3% 0;
}
@media screen and (max-width: 1280px) {
  .kv_left_bubble {
    display: none;
  }
}

.switch_button {
  margin: 2.92% 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}
.switch_button .l-btn {
  width: 150px;
  height: 45px;
  line-height: 35px;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  border: 2px solid #06090a;
  cursor: pointer;
}
.switch_button .l-btn::after {
  content: "";
  position: absolute;
  background-image: url("../img/bg_btn_line.png");
  background-size: contain;
  background-position: 0 0;
  background-repeat: repeat-x;
  width: 100%;
  height: 8px;
  left: 0;
  bottom: 0;
  pointer-events: none;
}
.switch_button .l-btn:hover {
  -webkit-animation: shakeWindows 0.2s infinite linear;
          animation: shakeWindows 0.2s infinite linear;
}
.switch_button .switch {
  background-color: #ffe0a5;
  margin: 0 1%;
}
.switch_button .switch.active {
  background-color: #fd5140;
  color: #fff;
}

.task_folder_button {
  margin: 2% 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.task_folder_button .l-btn {
  text-align: center;
  width: 150px;
  height: 45px;
  line-height: 35px;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  border: 2px solid #06090a;
  cursor: pointer;
}
.task_folder_button .l-btn::after {
  content: "";
  position: absolute;
  background-image: url("../img/bg_btn_line.png");
  background-size: contain;
  background-position: 0 0;
  background-repeat: repeat-x;
  width: 100%;
  height: 8px;
  left: 0;
  bottom: 0;
  pointer-events: none;
}
.task_folder_button .l-btn:hover {
  -webkit-animation: shakeWindows 0.2s infinite linear;
          animation: shakeWindows 0.2s infinite linear;
}
@media screen and (max-width: 640px) {
  .task_folder_button {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .task_folder_button .l-btn {
    width: 100%;
    height: 65px;
    line-height: 55px;
  }
}

.task_button--submit {
  background-color: #f879ff;
  color: #fff;
  margin: 0 2% 0 0;
}
.task_button--signout {
  background-color: #ffe0a5;
}
@media screen and (max-width: 640px) {
  .task_button--submit {
    margin: 4% 0;
  }
}

.event_switch_block {
  margin: 2% 0;
}

.switch_block_info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.switch_block_info .event_block {
  width: 42%;
  margin: 2% 0 0;
}
.switch_block_info .event_block--step01 {
  -webkit-transform: translateX(-5%);
          transform: translateX(-5%);
}
.switch_block_info .event_block--step02 {
  -webkit-transform: translate(-5px, -10px);
          transform: translate(-5px, -10px);
}
.switch_block_info .event_block--step03 {
  margin: 2% 2% 0 0;
}
.switch_block_info .event_block--step04 {
  -webkit-transform: translate(-5px, -10px);
          transform: translate(-5px, -10px);
}
@media screen and (max-width: 1024px) {
  .switch_block_info .event_block--victory {
    width: 100%;
  }
}
@media screen and (max-width: 860px) {
  .switch_block_info .event_block {
    width: 70%;
  }
  .switch_block_info .event_block--victory {
    width: 100%;
  }
}
@media screen and (max-width: 680px) {
  .switch_block_info {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .switch_block_info .event_block {
    width: 100%;
  }
  .switch_block_info .event_block--step01 {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  .switch_block_info .event_block--step02 {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  .switch_block_info .event_block--step03 {
    margin: 2% 0 0 0;
  }
  .switch_block_info .event_block--step04 {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

.progress_folder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.progress_folder .folder {
  margin: 2% 0 0;
}
.progress_folder .folder img {
  margin: 0 auto;
}
.progress_folder p {
  margin: 4% auto 0;
  width: 70%;
  line-height: 24px;
  text-align: center;
}
@media screen and (max-width: 860px) {
  .progress_folder p {
    width: 80%;
  }
}

.kv_fixed_map {
  background-image: url("../img/map_morocc.png");
  background-size: contain;
  background-position: left bottom;
  background-repeat: no-repeat;
  max-width: 674px;
  max-height: 737px;
  width: 100%;
  height: 100%;
  will-change: transform;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  top: 5%;
}
.kv_fixed_map--morocc {
  left: -10%;
  background-image: url("../img/map_morocc.png");
  background-size: contain;
  background-position: left bottom;
  background-repeat: no-repeat;
}
.kv_fixed_map--malangdo {
  left: -10%;
  background-image: url("../img/map_malangdo.png");
  background-size: contain;
  background-position: left bottom;
  background-repeat: no-repeat;
}
.kv_fixed_map--castle {
  left: -10%;
  background-image: url("../img/map_castle.png");
  background-size: contain;
  background-position: left bottom;
  background-repeat: no-repeat;
}
.kv_fixed_map--prt {
  left: -10%;
  background-image: url("../img/map_prt.png");
  background-size: contain;
  background-position: left bottom;
  background-repeat: no-repeat;
}
.kv_fixed_map--comodo {
  right: -10%;
  background-image: url("../img/map_comodo.png");
  background-size: contain;
  background-position: left bottom;
  background-repeat: no-repeat;
}
@media screen and (max-width: 1280px) {
  .kv_fixed_map--comodo {
    right: -20%;
  }
}
@media screen and (max-width: 1260px) {
  .kv_fixed_map {
    display: none;
  }
}

.acc--hunterfly {
  -webkit-animation: buzzing 0.1s infinite alternate;
          animation: buzzing 0.1s infinite alternate;
  -webkit-transform-origin: 0 bottom;
          transform-origin: 0 bottom;
}
.acc--lunatic {
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
  animation: buzzing 2.5s infinite alternate-reverse ease-in-out;
}
@media screen and (max-width: 1260px) {
  .acc--hunterfly {
    display: none;
  }
  .acc--lunatic {
    display: none;
  }
}

.chat_head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  width: 100%;
  padding: 2%;
  border-bottom: 2px solid #2a292d;
}
.chat_head p {
  margin: 0 0 0 2%;
}

.chat_footer {
  width: 100%;
  padding: 2% 4% 0%;
  border-top: 2px solid #eee;
}
.chat_footer p {
  color: rgba(182, 182, 182, 0.7176470588);
}

.chat_icon {
  padding: 10% 0 2%;
}

.chat_body {
  width: 100%;
  padding: 2%;
}

.chat_body_info {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.chat_body_info .text_bubble {
  position: relative;
  top: 0;
  left: 0;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.chat_block {
  text-transform: uppercase;
  margin: 0 0 0 2%;
}
.chat_block .l-bubble {
  margin: 0 0 1% 0;
}
.chat_block .l-bubble .arrow {
  bottom: 10px;
  left: -6px;
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
  border-bottom-right-radius: 4px;
}
.chat_block p {
  margin: 0 0 1% 0;
}
.chat_block .bubble {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.chat_block .bubble img {
  margin: 0 0 0 1%;
}
@media screen and (max-width: 640px) {
  .chat_block .bubble {
    white-space: break-spaces;
    line-height: 22px;
  }
}

.support_chat .chat_body {
  background-image: url("../img/bg_pink03.jpg");
  background-size: 30%;
  background-position: 0 0;
  background-repeat: repeat;
}
.support_chat .chat_block .bubble {
  white-space: break-spaces;
  line-height: 22px;
}
.support_chat .chat_block .l-bubble .arrow {
  bottom: initial;
  top: 16px;
}

.event_daily_container {
  position: relative;
}

.event_subtitle {
  max-width: 333px;
  margin: 0 auto;
}
.event_subtitle img {
  margin: 0 auto;
}

.line_divider {
  margin: -10px 0;
  position: relative;
  z-index: 2;
}
.line_divider img {
  margin: 0 auto;
}

.emoemo {
  max-width: 1366px;
  width: 100%;
  height: 100%;
  left: 50%;
  bottom: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
}
.emoemo--left {
  bottom: -15px;
  max-width: 21.15%;
  left: -20px;
}
.emoemo--left.active {
  -webkit-animation: shakeMap 0.1s infinite;
          animation: shakeMap 0.1s infinite;
}
.emoemo--right {
  bottom: -2px;
  max-width: 24.59%;
  right: -20px;
}
.emoemo--right.active {
  -webkit-animation: shakeMap 0.1s 0.2s infinite;
          animation: shakeMap 0.1s 0.2s infinite;
}
@media screen and (max-width: 1024px) {
  .emoemo--left {
    max-width: 90%;
  }
  .emoemo--right {
    max-width: 90%;
  }
}
@media screen and (max-width: 640px) {
  .emoemo--left {
    max-width: 45%;
  }
  .emoemo--right {
    max-width: 50%;
  }
}
@media screen and (max-width: 480px) {
  .emoemo--left {
    max-width: 60%;
  }
}

.event_sign_container {
  margin: 2% 0;
}

.button_sign {
  cursor: pointer;
  max-width: 100%;
  width: 402px;
  height: 75px;
  margin: 0 auto;
  background-image: url("../img/btn_sign.png");
  background-size: contain;
  background-position: 0 0;
  background-repeat: no-repeat;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.button_sign:hover {
  background-image: url("../img/btn_sign_hover.png");
  background-size: contain;
  background-position: 0 0;
  background-repeat: no-repeat;
}

.event_sign_wrap {
  background-color: #fff;
  padding: 2%;
  border-radius: 10px;
  margin: 2% 0;
}
@media screen and (max-width: 640px) {
  .event_sign_wrap {
    margin: 2% 0 6%;
  }
}

.task_folder {
  text-align: center;
  margin: 1% 0;
}
.task_folder--user {
  border-radius: 10px;
  padding: 1.5%;
}
.task_folder--tips {
  margin: 2% 0;
}
.task_folder--select {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  border-radius: 10px;
}
@media screen and (max-width: 680px) {
  .task_folder--select {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .task_folder--select img {
    margin: 5% auto 0;
  }
}

.task_switch {
  width: calc(50% - 10px);
  text-align: center;
  margin: 2% 0;
}
.task_switch img {
  margin: 0 auto;
  padding: 4% 0;
}
@media screen and (max-width: 680px) {
  .task_switch {
    width: calc(100% - 10px);
  }
}

.task_switch_select select {
  width: 80%;
  padding: 2%;
  border: 2px solid #06090a;
  background-color: #feedff;
  border-radius: 5px;
  color: #06090a;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
}
@media screen and (max-width: 640px) {
  .task_switch_select select {
    width: 100%;
    padding: 6%;
  }
}

.event_notice {
  margin: 3% 0 0;
  line-height: 28px;
}
@media screen and (max-width: 640px) {
  .event_notice {
    padding: 0 2%;
  }
}

.event_mission_reward {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 1.5% auto 2%;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 85%;
}
.event_mission_reward .mission_reward {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  border: 2px solid #06090a;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.event_mission_reward ul {
  padding: 10px;
  line-height: 22px;
  border-top: 2px solid #06090a;
}
.event_mission_reward--main {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.event_mission_reward--daily {
  border: 2px solid #06090a;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  border-radius: 5px;
  overflow: hidden;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
.event_mission_reward--daily .mission_reward {
  border: none;
  border-radius: 0;
  border-right: 2px solid #06090a;
}
.event_mission_reward--daily ul {
  padding: 10px;
  border-top: none;
}
@media screen and (max-width: 860px) {
  .event_mission_reward {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .event_mission_reward--daily {
    max-width: 330px;
    margin: 2% auto 10%;
  }
  .event_mission_reward--daily .mission_reward {
    border-right: none;
    border-bottom: 2px solid #06090a;
  }
}
@media screen and (max-width: 640px) {
  .event_mission_reward {
    width: 95%;
  }
}

.mission_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 1.5% auto 2%;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media screen and (max-width: 640px) {
  .mission_wrap .mission_category:nth-child(1) {
    margin: 0;
  }
}

.mission_category {
  max-width: 330px;
}
.mission_category:nth-child(1) {
  margin: 0 10px 0 0;
}
.mission_category .text_bubble {
  position: static;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.mission_category .l-bubble .arrow {
  left: 50%;
}

.scroll_button {
  width: 50px;
  height: 50px;
  position: fixed;
  border: 2px solid #06090a;
  z-index: 999;
  right: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  cursor: pointer;
  line-height: 35px;
  text-align: center;
  border-radius: 5px;
  background-color: #f879ff;
}
.scroll_button::after {
  content: "";
  position: absolute;
  background-image: url("../img/bg_btn_line.png");
  background-size: cover;
  background-position: 65%;
  background-repeat: repeat-x;
  width: 100%;
  height: 8px;
  left: 0;
  bottom: 0;
  pointer-events: none;
}

.l-bgYellow {
  background-color: #fff9ec;
}

.l-windowsPink {
  background-image: url("../img/bg_pink02.jpg");
  background-size: 10%;
  background-position: 0 0;
  background-repeat: repeat;
  border-bottom: 2px solid #2a292d;
}

.l-windowsGreen {
  background-image: url("../img/bg_green01.jpg");
  background-size: contain;
  background-position: 0 0;
  background-repeat: repeat;
  border-bottom: 2px solid #2a292d;
}

.l-windowsBody {
  background-image: url("../img/bg_pink01.jpg");
  background-size: 10%;
  background-position: 0 0;
  background-repeat: repeat;
}
@media screen and (max-width: 860px) {
  .l-windowsBody--vt01 {
    background-image: url("../img/vtuber01_b.jpg");
    background-size: 100%;
    background-position: 0 0;
    background-repeat: repeat;
  }
  .l-windowsBody--vt02 {
    background-image: url("../img/vtuber02_b.jpg");
    background-size: 100%;
    background-position: 0 0;
    background-repeat: repeat;
  }
  .l-windowsBody--vt03 {
    background-image: url("../img/vtuber03_b.jpg");
    background-size: 100%;
    background-position: 0 0;
    background-repeat: repeat;
  }
}

.l-border {
  border: 2px solid #2a292d;
}

.l-fontChanga {
  font-family: "Changa One", sans-serif;
}
.l-fontChanga p {
  font-family: "Changa One", sans-serif;
}

.l-backgroundWhite {
  background-color: #fff;
}

.l-bubble {
  position: relative;
  display: inline-block;
  padding: 8px 20px;
  background-color: #ffe0a5;
  color: white;
  border-radius: 5px;
  margin: 2% 0;
  color: #06090a;
  border: 2px solid #333333;
  white-space: nowrap;
}
.l-bubble .bubble {
  text-transform: uppercase;
  font-family: "Chiron GoRound TC";
}
.l-bubble .arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #ffe0a5;
  bottom: -6px;
  left: 10px;
  border-bottom-right-radius: 5px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  border-right: 2px solid #333333;
  border-bottom: 2px solid #333333;
}

.l-fontColorPurple {
  color: #c149ee;
}

.l-backgroundFixed {
  background-attachment: fixed;
}

.l-zindex2 {
  z-index: 2;
}

.l-title {
  font-weight: 800;
  font-size: 1.2rem;
  margin: 2% 0;
}

.l-margin0 {
  margin: 0;
}

.l-btn {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  border: 2px solid #06090a;
  cursor: pointer;
}
.l-btn::after {
  content: "";
  position: absolute;
  background-image: url("../img/bg_btn_line.png");
  background-size: contain;
  background-position: 0 0;
  background-repeat: repeat-x;
  width: 100%;
  height: 8px;
  left: 0;
  bottom: 0;
  pointer-events: none;
}
.l-btn:hover {
  -webkit-animation: shakeWindows 0.2s infinite linear;
          animation: shakeWindows 0.2s infinite linear;
}