@charset "UTF-8";
/* 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-size: 100%;
  font: inherit;
  font-family: "Noto Sans TC", "PingFang SC", "Microsoft Yahei", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  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 {
  color: #353535;
  overflow: auto;
  -webkit-overflow-scrolling: touch; }

* {
  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;
  -o-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; }

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

.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; }

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

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

.l-wrapper {
  width: 1200px;
  margin: 0 auto;
  position: relative; }

.l-padding-b5 {
  padding-bottom: 5px; }

.l-btn {
  display: inline-block;
  width: 100%;
  height: 100%;
  color: #fff;
  font-weight: bold; }

.l-btnStyle {
  display: inline-block;
  width: 100%;
  height: 100%; }

.l-btn-primary {
  background-color: #f4c8fe;
  color: #fff; }

.l-floatLeft {
  float: left; }

.l-floatRight {
  float: right; }

.l-clearfix:after {
  content: '';
  display: table;
  clear: both; }

.l-length {
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis; }

@-webkit-keyframes menuEffect {
  0% {
    right: -99%; }
  100% {
    right: 0; } }

@keyframes menuEffect {
  0% {
    right: -99%; }
  100% {
    right: 0; } }

.l-link__wrap {
  position: fixed;
  top: 15%;
  right: 0;
  z-index: 999; }
  .l-link__wrap .l-link {
    width: 78px;
    height: 78px;
    margin: 0 -8px -8px 0;
    background-image: url("../img/icon/fixed_icon_bg.png");
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    position: relative;
    cursor: pointer;
    font-weight: bold; }
    .l-link__wrap .l-link.active {
      -webkit-animation: menuEffect .1s linear ease-in;
      animation: menuEffect .1s linear ease-in; }
    .l-link__wrap .l-link a {
      display: inline-block;
      width: 100%;
      height: 100%; }
    .l-link__wrap .l-link--sign:after {
      content: '申請帳號';
      position: absolute;
      top: 43%;
      left: 55%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      pointer-events: none;
      line-height: 20px;
      color: #7a462c; }
    .l-link__wrap .l-link--download:after {
      content: '遊戲下載';
      position: absolute;
      top: 45%;
      left: 55%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      pointer-events: none;
      line-height: 20px;
      color: #7a462c; }
    .l-link__wrap .l-link--fb:after {
      content: '';
      position: absolute;
      background-image: url("../img/icon/icon_fb.svg");
      background-size: 100%;
      background-position: 0 0;
      background-repeat: no-repeat;
      width: 30%;
      height: 50%;
      top: 43%;
      left: 55%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      pointer-events: none; }
    .l-link__wrap .l-link--baha:after {
      content: '';
      position: absolute;
      background-image: url("../img/icon/icon_baha.svg");
      background-size: 100%;
      background-position: 0 0;
      background-repeat: no-repeat;
      width: 60%;
      height: 50%;
      top: 43%;
      left: 55%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      pointer-events: none; }
    .l-link__wrap .l-link:hover {
      -webkit-transform: translateX(8px);
      -ms-transform: translateX(8px);
      transform: translateX(8px); }

.l-title {
  font-size: 24px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 3px; }

.l-textCenter {
  text-align: center; }

@-webkit-keyframes musicEffect {
  0% {
    background-position: left 0; }
  15% {
    background-position: -1020px 0; }
  50%,
  75%,
  95% {
    background-position: -1020px 0; }
  100% {
    background-position: -1020px 0;
    opacity: 0; } }

@keyframes musicEffect {
  0% {
    background-position: left 0; }
  15% {
    background-position: -1020px 0; }
  50%,
  75%,
  95% {
    background-position: -1020px 0; }
  100% {
    background-position: -1020px 0;
    opacity: 0; } }

@-webkit-keyframes bubbleEffect {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0; }
  15% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 1; }
  50%,
  75%,
  95% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0; }
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0; } }

@keyframes bubbleEffect {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0; }
  15% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 1; }
  50%,
  75%,
  95% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0; }
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0; } }

@-webkit-keyframes shakeEffect {
  0% {
    -webkit-transform: translate(-5px, 0);
    transform: translate(-5px, 0); }
  20% {
    -webkit-transform: translate(2px, 0);
    transform: translate(2px, 0); }
  40% {
    -webkit-transform: translate(-5px, 0);
    transform: translate(-5px, 0); }
  60% {
    -webkit-transform: translate(2px, 0);
    transform: translate(2px, 0); } }

@keyframes shakeEffect {
  0% {
    -webkit-transform: translate(-5px, 0);
    transform: translate(-5px, 0); }
  20% {
    -webkit-transform: translate(2px, 0);
    transform: translate(2px, 0); }
  40% {
    -webkit-transform: translate(-5px, 0);
    transform: translate(-5px, 0); }
  60% {
    -webkit-transform: translate(2px, 0);
    transform: translate(2px, 0); } }

@-webkit-keyframes mainCenterEffect {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0); }
  50% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5); }
  80% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes mainCenterEffect {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0); }
  50% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5); }
  80% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@-webkit-keyframes mainRightEffect {
  0% {
    -webkit-transform: translate(999%, 0);
    transform: translate(999%, 0);
    opacity: 0; }
  100% {
    -webkit-transform: translate(-7%, 0) scale(1);
    transform: translate(-7%, 0) scale(1); } }

@keyframes mainRightEffect {
  0% {
    -webkit-transform: translate(999%, 0);
    transform: translate(999%, 0);
    opacity: 0; }
  100% {
    -webkit-transform: translate(-7%, 0) scale(1);
    transform: translate(-7%, 0) scale(1); } }

@-webkit-keyframes mainLeftEffect {
  0% {
    -webkit-transform: translate(-999%, 0);
    transform: translate(-999%, 0);
    opacity: 0; }
  100% {
    -webkit-transform: translate(-1%, 0) scale(1);
    transform: translate(-1%, 0) scale(1); } }

@keyframes mainLeftEffect {
  0% {
    -webkit-transform: translate(-999%, 0);
    transform: translate(-999%, 0);
    opacity: 0; }
  100% {
    -webkit-transform: translate(-1%, 0) scale(1);
    transform: translate(-1%, 0) scale(1); } }

@-webkit-keyframes mainSloganEffect {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0); }
  50% {
    -webkit-transform: translate(-50%, -50%) scale(0.8);
    transform: translate(-50%, -50%) scale(0.8); }
  70%,
  90% {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
    transform: translate(-50%, -50%) scale(0.5); }
  80%,
  95% {
    -webkit-transform: translate(-50%, -50%) scale(0.9);
    transform: translate(-50%, -50%) scale(0.9); }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1); } }

@keyframes mainSloganEffect {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0); }
  50% {
    -webkit-transform: translate(-50%, -50%) scale(0.8);
    transform: translate(-50%, -50%) scale(0.8); }
  70%,
  90% {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
    transform: translate(-50%, -50%) scale(0.5); }
  80%,
  95% {
    -webkit-transform: translate(-50%, -50%) scale(0.9);
    transform: translate(-50%, -50%) scale(0.9); }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1); } }

#troSideBtn.trobottom {
  bottom: 0; }

.wrapper {
  max-width: 1440px;
  width: 98%;
  margin: 0 auto;
  position: relative; }

.main__container {
  background-image: url("../img/header_bg.jpg");
  background-size: cover;
  background-position: 0 0;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden; }
  .main__container .acc__cookie {
    position: absolute;
    right: -8%;
    top: -7%; }
    .main__container .acc__cookie img {
      width: 100%;
      height: auto;
      display: block; }
  .main__container .acc__cloud {
    background-image: url("../img/header_bottom_bg.png");
    background-size: cover;
    background-position: center 0;
    background-repeat: no-repeat;
    width: 100%;
    height: 435px;
    position: absolute;
    top: 50%;
    z-index: 5; }
  .main__container .acc__ribbon {
    position: absolute;
    top: -10%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 120%;
    z-index: 6; }
  .main__container .logolink {
    background-image: url("../img/RO_logo.png");
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 15%;
    height: 29vh;
    z-index: 999;
    position: absolute;
    top: 3%;
    left: 0; }
    .main__container .logolink a {
      display: block;
      width: 100%;
      height: 100%; }
  @media screen and (max-width: 1280px) {
    .main__container .acc__cookie {
      right: -15%;
      top: -10%; } }
  @media screen and (max-width: 1024px) {
    .main__container .acc__cookie {
      right: -25%;
      top: -12%; } }
  @media screen and (max-width: 768px) {
    .main__container .acc__cloud {
      top: 40%; } }
  @media screen and (max-width: 425px) {
    .main__container .acc__cookie {
      right: -59%;
      top: -13%; }
    .main__container .logolink {
      width: 30%; }
    .main__container .acc__ribbon {
      width: 300%;
      top: -5%; } }

@media screen and (max-width: 1280px) {
  .main__container {
    padding: 0 0 2% 0; } }

@media screen and (max-width: 1024px) {
  .main__container {
    padding: 0 0 5% 0; } }

@media screen and (max-width: 1024px) {
  .main__container {
    padding: 0 0 0 0; } }

.main__vi__container {
  position: relative; }
  .main__vi__container .main__vi__center {
    width: 68%;
    margin: -5px 0 0 13%;
    position: relative;
    z-index: 5;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0); }
    .main__vi__container .main__vi__center.active {
      -webkit-animation: mainCenterEffect .2s forwards linear;
      animation: mainCenterEffect .2s forwards linear; }
  .main__vi__container .main__vi__left {
    position: absolute;
    width: 17%;
    top: 28%;
    left: 1%;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0); }
    .main__vi__container .main__vi__left.active {
      -webkit-animation: mainLeftEffect 1s .5s forwards linear;
      animation: mainLeftEffect 1s .5s forwards linear; }
    .main__vi__container .main__vi__left:after {
      content: '';
      position: absolute;
      width: 170px;
      height: 109px;
      background-image: url("../img/acc_bubble.png");
      background-size: cover;
      background-position: 0 0;
      background-repeat: no-repeat;
      top: 10%;
      left: -15%;
      -webkit-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0);
      opacity: 0;
      -webkit-animation: bubbleEffect 5s -0.5s infinite;
      animation: bubbleEffect 5s -0.5s infinite; }
    .main__vi__container .main__vi__left:before {
      content: '';
      position: absolute;
      width: 170px;
      height: 109px;
      background-image: url("../img/acc_music.png");
      background-size: cover;
      background-position: -1020px 0;
      background-repeat: no-repeat;
      top: 10%;
      left: -15%;
      -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
      transform: scale(0.8);
      -webkit-animation: musicEffect 5s steps(6) infinite;
      animation: musicEffect 5s steps(6) infinite;
      z-index: 1; }
  .main__vi__container .main__vi__rigth {
    position: absolute;
    top: 35%;
    right: -7%;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0); }
    .main__vi__container .main__vi__rigth.active {
      -webkit-animation: mainRightEffect 1s .6s forwards linear;
      animation: mainRightEffect 1s .6s forwards linear; }
    .main__vi__container .main__vi__rigth div {
      display: inline-block; }
    .main__vi__container .main__vi__rigth .vi__rigth__man {
      width: 66%; }
    .main__vi__container .main__vi__rigth .vi__rigth__monster {
      width: 23%;
      margin: 0 0 2% -5%; }
  .main__vi__container .main__slogan__container {
    width: 35%;
    position: absolute;
    z-index: 6;
    left: 52%;
    top: 69%;
    -webkit-transform: translate(-50%, -50%) scale(0);
    -ms-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0); }
    .main__vi__container .main__slogan__container.active {
      -webkit-animation: mainSloganEffect .5s 1.2s forwards linear;
      animation: mainSloganEffect .5s 1.2s forwards linear; }
    .main__vi__container .main__slogan__container .main__slogan__birthday {
      position: relative;
      z-index: 6;
      width: 85%;
      margin: 0 auto; }
    .main__vi__container .main__slogan__container .main__slogan__cream {
      position: absolute;
      z-index: 5;
      top: 15%;
      left: 0;
      width: 100%; }
    .main__vi__container .main__slogan__container .main__acc__cream {
      position: absolute;
      z-index: 4;
      width: 170%;
      top: 1%;
      left: -58%; }
    .main__vi__container .main__slogan__container .main__slogan__left {
      width: 239px;
      position: absolute;
      z-index: 3;
      left: -33%;
      top: 27%; }
      .main__vi__container .main__slogan__container .main__slogan__left:after {
        content: '';
        position: absolute;
        z-index: 3;
        width: 161px;
        height: 117px;
        background-image: url("../img/slogan_star_left.png");
        background-size: 100%;
        background-position: 0 0;
        background-repeat: no-repeat;
        top: 30%;
        left: -73%; }
      @media screen and (max-width: 768px) {
        .main__vi__container .main__slogan__container .main__slogan__left {
          width: 63%; } }
      @media screen and (max-width: 425px) {
        .main__vi__container .main__slogan__container .main__slogan__left {
          width: 58%;
          top: 27%; } }
    .main__vi__container .main__slogan__container .main__slogan__right {
      width: 158px;
      position: absolute;
      right: -45%;
      top: 35%; }
  @media screen and (max-width: 1280px) {
    .main__vi__container .main__vi__left {
      width: 17%;
      top: 33%; }
    .main__vi__container .main__slogan__container {
      width: 38%;
      margin: -5px 0 0 0%; } }
  @media screen and (max-width: 1024px) {
    .main__vi__container .main__vi__left {
      width: 20%;
      top: 39%;
      left: -1%; }
    .main__vi__container .main__slogan__container {
      width: 40%;
      top: 68%;
      margin: -5px 0 0 1%; }
    .main__vi__container .main__vi__center {
      width: 75%;
      margin: -5px 0 0 8%; }
    .main__vi__container .main__vi__rigth {
      right: -10%; } }
  @media screen and (max-width: 768px) {
    .main__vi__container .main__vi__center {
      width: 100%;
      margin: -5px auto; }
    .main__vi__container .main__vi__left {
      display: none; }
    .main__vi__container .main__vi__rigth {
      display: none; }
    .main__vi__container .main__slogan__right {
      right: -52%; } }
  @media screen and (max-width: 425px) {
    .main__vi__container .main__vi__center {
      width: 140%;
      padding: 10% 0 8%;
      margin: 0 0 0 -21%; }
    .main__vi__container .main__slogan__container {
      width: 79%;
      top: 72%; } }
  @media screen and (max-width: 360px) {
    .main__vi__container .main__vi__center {
      width: 156%;
      padding: 10% 0 6%;
      margin: 0 0 0 -29%; } }

.main__callaction__container {
  background: -webkit-gradient(linear, left top, left bottom, from(#b3f1ee), to(#a9f1ed));
  background: -webkit-linear-gradient(#b3f1ee, #a9f1ed);
  background: -o-linear-gradient(#b3f1ee, #a9f1ed);
  background: linear-gradient(#b3f1ee, #a9f1ed); }
  .main__callaction__container.active {
    position: fixed;
    top: 0;
    z-index: 998;
    width: 100%;
    -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); }
  .main__callaction__container .main__callaction__wrap {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 2% 0 3%; }
    .main__callaction__container .main__callaction__wrap .callforaction {
      width: 25%;
      height: 75px;
      line-height: 70px;
      border-radius: 50px;
      display: inline-block;
      border: 3px solid #3c3a76;
      position: relative;
      transition: all 0.2s linear;
      -webkit-transition: all 0.2s linear;
      -moz-transition: all 0.2s linear;
      -ms-transition: all 0.2s linear;
      -o-transition: all 0.2s linear; }
      .main__callaction__container .main__callaction__wrap .callforaction:after {
        content: '';
        position: absolute;
        background-image: url("../img/btn_line_top.png");
        background-size: 100%;
        background-position: 0 0;
        background-repeat: no-repeat;
        top: 9%;
        left: 5%;
        width: 22px;
        height: 22px;
        pointer-events: none; }
      .main__callaction__container .main__callaction__wrap .callforaction:before {
        content: '';
        position: absolute;
        background-image: url("../img/btn_line_bottom.png");
        background-size: 100%;
        background-position: 0 0;
        background-repeat: no-repeat;
        bottom: -5%;
        right: 4%;
        width: 22px;
        height: 22px;
        pointer-events: none; }
      .main__callaction__container .main__callaction__wrap .callforaction a {
        color: #3c3a76;
        font-weight: bold;
        width: 100%;
        height: 100%;
        display: block; }
      .main__callaction__container .main__callaction__wrap .callforaction--pink {
        background-image: url("../img/bg_material_pink.png");
        background-size: 11px;
        background-position: 0 0;
        background-repeat: repeat; }
      .main__callaction__container .main__callaction__wrap .callforaction--yellow {
        width: 280px;
        margin: 0 15px;
        background-image: url("../img/bg_material_yellow.png");
        background-size: 4%;
        background-position: 0 0;
        background-repeat: repeat; }
        .main__callaction__container .main__callaction__wrap .callforaction--yellow a {
          padding: 0 0 0 20px; }
      .main__callaction__container .main__callaction__wrap .callforaction--polly {
        background-image: url("../img/callforbtn_polly.png");
        background-size: 100%;
        background-position: 0 0;
        background-repeat: no-repeat;
        width: 70px;
        height: 118px;
        position: absolute;
        top: -16%;
        left: -2%;
        z-index: 1; }
      .main__callaction__container .main__callaction__wrap .callforaction:hover {
        -webkit-box-shadow: 0 2px 0 #84bebb;
        box-shadow: 0 2px 0 #84bebb; }
    @media screen and (max-width: 1280px) {
      .main__callaction__container .main__callaction__wrap .callforaction {
        width: 27%;
        height: 68px;
        line-height: 62px; }
        .main__callaction__container .main__callaction__wrap .callforaction:after {
          top: 8%;
          left: 4%; }
        .main__callaction__container .main__callaction__wrap .callforaction:before {
          bottom: -5%;
          right: 4%; }
        .main__callaction__container .main__callaction__wrap .callforaction--yellow {
          background-image: url("../img/bg_material_yellow.png");
          background-size: 4%;
          background-position: 0 0;
          background-repeat: repeat; }
        .main__callaction__container .main__callaction__wrap .callforaction--polly {
          top: -13x;
          left: -6px; } }
    @media screen and (max-width: 768px) {
      .main__callaction__container .main__callaction__wrap .callforaction {
        width: 20%; }
        .main__callaction__container .main__callaction__wrap .callforaction--yellow {
          width: 35%;
          background-image: url("../img/bg_material_yellow.png");
          background-size: 4%;
          background-position: 0 0;
          background-repeat: repeat; } }
    @media screen and (max-width: 425px) {
      .main__callaction__container .main__callaction__wrap .callforaction {
        width: 86%;
        margin: 3% auto;
        display: block; }
        .main__callaction__container .main__callaction__wrap .callforaction--yellow {
          width: 85%;
          background-image: url("../img/bg_material_yellow.png");
          background-size: 3%;
          background-position: 0 0;
          background-repeat: repeat; } }

.event__container {
  background-image: url("../img/main_bg_repeat.jpg");
  background-size: 100%;
  background-position: 0 0;
  background-repeat: repeat;
  width: 100%; }

.event__wrapper {
  max-width: 1000px;
  width: 90%;
  margin: 0 auto; }
  .event__wrapper .event__content .event__header {
    text-align: center;
    padding: 6% 0 0; }
  .event__wrapper .event__body--borderstyle {
    border: 3px solid #3c3a76;
    border-radius: 20px; }
  .event__wrapper .event__body--secondEvent {
    margin: 4% 0 0; }

.event__area {
  width: 100%;
  position: relative;
  overflow: hidden; }

.event__acc__first .acc__top__left {
  width: 10%;
  position: absolute;
  top: 5%;
  left: 10%; }
  @media screen and (max-width: 1280px) {
    .event__acc__first .acc__top__left {
      width: 15%;
      top: 3%;
      left: -1%; } }
  @media screen and (max-width: 425px) {
    .event__acc__first .acc__top__left {
      display: none; } }

.event__acc__first .acc__bottom__right {
  width: 23%;
  position: absolute;
  right: 0%;
  bottom: 0%; }
  @media screen and (max-width: 1280px) {
    .event__acc__first .acc__bottom__right {
      width: 27%;
      right: -7%;
      bottom: 1%; } }
  @media screen and (max-width: 1024px) {
    .event__acc__first .acc__bottom__right {
      display: none; } }

.event__acc__first .acc__top__right {
  width: 50%;
  position: absolute;
  right: -15%;
  top: -2%; }
  @media screen and (max-width: 425px) {
    .event__acc__first .acc__top__right {
      width: 80%; } }
  @media screen and (max-width: 375px) {
    .event__acc__first .acc__top__right {
      width: 90%;
      right: -25%; } }

.event__subarea {
  border: 3px solid #3c3a76;
  border-radius: 20px 20px 0px 0px;
  margin: -3px -3px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 1% 3.4%; }
  .event__subarea--left {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    .event__subarea--left span {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 100%;
      background-color: #fec8d6; }
      .event__subarea--left span:nth-child(2) {
        opacity: .8; }
      .event__subarea--left span:nth-child(3) {
        opacity: .5; }
  .event__subarea h6 {
    color: #3c3a76;
    font-weight: bold; }
  .event__subarea--right span {
    font-size: 18px;
    color: #fec8d6; }

.event__mainarea {
  padding: 3.6% 3.4%;
  color: #353535; }
  .event__mainarea--primary p {
    padding: 0 15px;
    letter-spacing: 1px; }
  .event__mainarea--secondary .event__introduce {
    text-align: center;
    border: 2px solid #f4c8fe; }
    .event__mainarea--secondary .event__introduce > h6 {
      margin: -1px 0 2.5%; }
    .event__mainarea--secondary .event__introduce:nth-child(3) {
      margin: 2.5% 0; }
    .event__mainarea--secondary .event__introduce--row {
      padding: 0 8.6% 2.5%;
      line-height: 1.8;
      letter-spacing: 2px;
      text-align: left; }
    .event__mainarea--secondary .event__introduce--regress h6 {
      display: inline-block;
      background-color: #f16173;
      color: #fff;
      padding: .2% 2%;
      margin: 2% 0 1%; }
    .event__mainarea--secondary .event__introduce--regress p {
      padding: 2%; }
      .event__mainarea--secondary .event__introduce--regress p:nth-child(2) {
        padding: 0% 2% 2% 2%;
        border-bottom: 1px dashed #fec8d6; }
      .event__mainarea--secondary .event__introduce--regress p:nth-child(3) {
        font-size: 14px; }
        @media screen and (max-width: 480px) {
          .event__mainarea--secondary .event__introduce--regress p:nth-child(3) {
            word-break: break-word; } }
    .event__mainarea--secondary .event__introduce--loyal h6 {
      display: inline-block;
      background-color: #eda0fe;
      padding: .2% 2%;
      margin: 2% 0 1%; }
    .event__mainarea--secondary .event__introduce--loyal p {
      padding: 0 2%; }
      @media screen and (max-width: 480px) {
        .event__mainarea--secondary .event__introduce--loyal p {
          word-break: break-word; } }
  @media screen and (max-width: 425px) {
    .event__mainarea--primary {
      line-height: 22px; } }

.event__turntable__body {
  padding: 6% 0 0; }

.event__signin__info {
  position: relative; }
  .event__signin__info .event__sign__left {
    width: 18%;
    margin: 0 0 1% 0;
    float: left;
    position: relative; }
    .event__signin__info .event__sign__left:before {
      content: '';
      position: absolute;
      border-style: solid;
      border-width: 0 0px 30px 100px;
      border-color: transparent transparent #f4c8fe transparent;
      -webkit-transform: rotate(-42deg);
      -ms-transform: rotate(-42deg);
      transform: rotate(-42deg);
      right: -35%;
      top: 45%; }
  .event__signin__info:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 20px;
    background-image: url("../img/bg_material_yellow.png");
    background-size: 1%;
    background-position: 0 0;
    background-repeat: repeat;
    bottom: 0;
    z-index: 1; }
  .event__signin__info:after {
    content: '';
    display: table;
    clear: both; }
  @media screen and (max-width: 1024px) {
    .event__signin__info .event__sign__left {
      margin: 30px 0 2% 0; } }
  @media screen and (max-width: 768px) {
    .event__signin__info .event__sign__left {
      position: absolute;
      bottom: 0; } }
  @media screen and (max-width: 425px) {
    .event__signin__info .event__sign__left {
      display: none; } }

@media screen and (max-width: 425px) {
  .event__signin__info {
    padding: 0 0 8% 0; } }

.event__sign__bubble .event__sign {
  float: right;
  width: 80%;
  height: 230px;
  padding: 3% 4%;
  border: 3px solid #f4c8fe;
  border-radius: 20px;
  position: relative;
  background-color: #fff; }
  .event__sign__bubble .event__sign--In {
    height: auto;
    padding: 3% 4% 2%; }
  .event__sign__bubble .event__sign--dayinfo {
    float: right;
    width: 80%;
    line-height: 44px;
    padding: 0 0 0 2%;
    margin: 1% 0; }
    .event__sign__bubble .event__sign--dayinfo .sign__day {
      float: left; }
      .event__sign__bubble .event__sign--dayinfo .sign__day p {
        font-weight: 700; }
        .event__sign__bubble .event__sign--dayinfo .sign__day p span {
          font-size: 30px; }
    .event__sign__bubble .event__sign--dayinfo .sign__btn {
      float: right;
      margin: 0; }
    .event__sign__bubble .event__sign--dayinfo:after {
      content: '';
      display: table;
      clear: both; }
  @media screen and (max-width: 1024px) {
    .event__sign__bubble .event__sign--dayinfo {
      margin: 3% 0 1%; } }
  @media screen and (max-width: 425px) {
    .event__sign__bubble .event__sign--dayinfo {
      float: none;
      width: 100%; } }

.event__sign__bubble:after {
  content: '';
  display: table;
  clear: both; }

@media screen and (max-width: 768px) {
  .event__sign__bubble {
    padding: 2% 0 3% 0; }
    .event__sign__bubble .event__sign {
      height: auto;
      padding: 8% 4%;
      margin: 0 0 2% 0; } }

@media screen and (max-width: 425px) {
  .event__sign__bubble .event__sign {
    float: none;
    width: 100%;
    text-align: center;
    padding: 8% 3%; }
  .event__sign__bubble .sign__btn {
    margin: 5% 0 1%; } }

.sign__server {
  letter-spacing: 1.2px; }
  .sign__server .sign__title {
    font-size: 16.8px;
    font-weight: 500; }
  .sign__server p {
    font-size: 14.4px;
    margin: 1.5% 0; }
  @media screen and (max-width: 425px) {
    .sign__server {
      line-height: 26px; } }

.server__wrap {
  position: relative;
  width: 440px;
  height: 40px;
  border: 2px solid #f4c8fe;
  -webkit-box-shadow: 0 2px 0 0 #f4c8fe;
  box-shadow: 0 2px 0 0 #f4c8fe;
  background-color: #fff;
  padding: 1%;
  font-size: 14.4px;
  color: #3c3a76;
  display: inline-block; }
  .server__wrap .server__show {
    display: inline-block;
    padding-left: 2%;
    vertical-align: sub;
    font-weight: 500; }
  .server__wrap .server__icon {
    position: absolute;
    right: 2%;
    z-index: 1; }
  .server__wrap .server__select {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 0 0 3%;
    opacity: 0; }
  @media screen and (max-width: 425px) {
    .server__wrap {
      width: 100%;
      font-size: 16px;
      line-height: 16px; } }

.server__button {
  border: 2px solid #f4c8fe;
  -webkit-box-shadow: 0 2px 0 0 #f4c8fe;
  box-shadow: 0 2px 0 0 #f4c8fe;
  background-color: #fff;
  padding: 1%;
  font-size: 14.4px;
  display: inline-block;
  vertical-align: top;
  width: 100px;
  height: 40px;
  color: #3c3a76;
  cursor: pointer;
  font-weight: 500; }
  .server__button:hover {
    -webkit-animation: shakeEffect .2s linear;
    animation: shakeEffect .2s linear; }
  @media screen and (max-width: 768px) {
    .server__button {
      margin: 2% 0; } }
  @media screen and (max-width: 425px) {
    .server__button {
      width: 100%;
      margin: 2% 0; } }

.sign__player__info {
  margin: 2.7% 0 0;
  letter-spacing: 1.2px; }
  .sign__player__info p:nth-child(1) {
    margin: 0 0 1% 0; }
  @media screen and (max-width: 425px) {
    .sign__player__info {
      line-height: 24px; } }

.event__turntable__main {
  position: relative; }
  .event__turntable__main .turntable__acc__right {
    width: 22%;
    position: absolute;
    right: -3%;
    bottom: -6.2%;
    z-index: 3; }
  @media screen and (max-width: 768px) {
    .event__turntable__main .turntable__acc__right {
      right: -4%;
      bottom: -8.2%; } }
  @media screen and (max-width: 425px) {
    .event__turntable__main .turntable__acc__right {
      width: 30%;
      right: -9%;
      bottom: -12.2%; } }

.event__turntable__note {
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  text-align: center; }
  .event__turntable__note p {
    margin: 4.5% 0; }
  @media screen and (max-width: 425px) {
    .event__turntable__note p {
      line-height: 25px; } }

.event__note {
  text-align: center; }
  .event__note .note__title {
    display: inline-block;
    background-image: url("../img/event/btn_note_bg.png");
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 120px;
    padding: 0 0 1% 0;
    line-height: 35px;
    font-size: 14.4px; }
  .event__note .note__list {
    background-color: #fff;
    border: 3px solid #ffe69b;
    border-radius: 15px;
    text-align: left;
    padding: 4% 15% 3%;
    margin: -25px auto 0;
    line-height: 1.8;
    counter-reset: i; }
    .event__note .note__list li:before {
      counter-increment: i;
      content: counter(i);
      display: inline-block;
      padding-right: 1%; }
  @media screen and (max-width: 425px) {
    .event__note .note__list {
      padding: 6% 8% 3%; } }
  @media screen and (max-width: 360px) {
    .event__note .note__list {
      padding: 10% 8% 3%; } }

.event__acc_third .acc__top__left {
  width: 38%;
  position: absolute;
  left: -5%;
  top: -1%;
  -webkit-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1); }

@media screen and (max-width: 425px) {
  .event__acc_third .acc__top__left {
    width: 75%;
    left: -38%; } }

.award__line {
  display: inline-block;
  width: 10px;
  height: 30px;
  background-color: #eda0fe;
  margin: 0 0 -1px 0; }
  .award__line--btnArea {
    margin: -22px 0 0 0; }

.award__title {
  width: 100%;
  padding: 2% 0;
  text-align: center;
  background-image: url("../img/title_bg_purple.png");
  background-size: 50%;
  background-position: 0 0;
  background-repeat: repeat;
  margin: -1px 0 0;
  border-radius: 20px 20px 0 0;
  color: #3c3a76;
  font-weight: 700;
  letter-spacing: 1.2px;
  font-size: 16.8px; }
  @media screen and (max-width: 425px) {
    .award__title {
      padding: 5% 0;
      background-size: 100%; } }

.award__content__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around; }
  .award__content__wrap .award__content {
    width: 200px;
    text-align: center;
    font-weight: 700;
    color: #3c3a76; }
    .award__content__wrap .award__content .award__content__title {
      padding: 5.9% 3.4%;
      margin-bottom: 5px; }
    .award__content__wrap .award__content .award__content__img {
      margin-bottom: 5px;
      padding: 4%; }
      .award__content__wrap .award__content .award__content__img img {
        width: 75px;
        margin: auto; }
    .award__content__wrap .award__content .award__content__info {
      margin-bottom: 5px;
      padding: 10%;
      background-color: #fff;
      font-size: 15px;
      min-height: 69px; }
    .award__content__wrap .award__content:nth-child(3) .award__content__info {
      padding: 5%;
      line-height: 22px; }

@media screen and (max-width: 768px) {
  .award__content__wrap {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    .award__content__wrap .award__content {
      width: 45%;
      margin: 2%; } }

@media screen and (max-width: 360px) {
  .award__content__wrap .award__content .award__content__info {
    padding: 1%;
    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;
    line-height: initial; } }

.award__head {
  position: relative;
  z-index: 2; }

.btn__area {
  position: relative;
  z-index: 1; }

.award__btn {
  max-width: 200px;
  width: 100%;
  height: 50px;
  text-align: center;
  margin: -6% 0 0 0;
  position: relative;
  z-index: 1; }
  .award__btn button {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    cursor: pointer; }
    .award__btn button:after {
      content: '';
      position: absolute;
      width: 10px;
      height: 5px;
      border-radius: 100%;
      background-color: #fff;
      top: 8px;
      left: 14px;
      -webkit-transform: rotate(-28deg);
      -ms-transform: rotate(-28deg);
      transform: rotate(-28deg);
      transition: all 0.3s linear;
      -webkit-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
      -ms-transition: all 0.3s linear;
      -o-transition: all 0.3s linear; }
    .award__btn button:hover:after {
      -webkit-transform: translate(-4px, 2px) rotate(-40deg);
      -ms-transform: translate(-4px, 2px) rotate(-40deg);
      transform: translate(-4px, 2px) rotate(-40deg); }
  .award__btn--disable {
    background-color: #ececec;
    border: 3px solid #c8c8c8;
    color: #c8c8c8;
    pointer-events: none; }
    .award__btn--disable.disable {
      display: none; }
    .award__btn--disable.active {
      -webkit-animation: .1s mainCenterEffect linear;
      animation: .1s mainCenterEffect linear; }
  .award__btn--onActive {
    background-color: #f4c8fe;
    border: 3px solid #eda0fe;
    color: #eda0fe;
    pointer-events: none; }
    .award__btn--onActive.disable {
      display: none; }
    .award__btn--onActive.active {
      -webkit-animation: .1s mainCenterEffect linear;
      animation: .1s mainCenterEffect linear; }
  .award__btn--active {
    background-color: #f16173;
    border: 3px solid #d55666;
    color: #fff; }
    .award__btn--active.disable {
      display: none; }
    .award__btn--active.active {
      -webkit-animation: .1s mainCenterEffect linear;
      animation: .1s mainCenterEffect linear; }
  @media screen and (max-width: 768px) {
    .award__btn {
      margin: -4% auto; } }

.lineStyle {
  border: 3px solid #eda0fe;
  border-radius: 5px; }

.award__player__wrap {
  width: 96%;
  max-width: 920px;
  margin: 2% auto; }
  .award__player__wrap .player__content {
    position: relative;
    border: 2px solid #eda0fe;
    margin: 2% 0;
    letter-spacing: 1.2px; }
    .award__player__wrap .player__content .player__head {
      display: inline-block;
      width: 15%;
      background-color: #eda0fe;
      padding: 6% 0;
      text-align: center;
      vertical-align: top;
      color: #3c3a76;
      font-weight: 700; }
    .award__player__wrap .player__content .player__body {
      width: 57%;
      display: inline-block;
      padding: 0 2%;
      border-right: 2px dashed #eda0fe;
      margin: 10px 0; }
      .award__player__wrap .player__content .player__body .player__img {
        vertical-align: middle;
        display: inline-block;
        width: 75px;
        border: 1px solid #eda0fe; }
      .award__player__wrap .player__content .player__body .player__info {
        vertical-align: middle;
        display: inline-block;
        color: #3c3a76;
        padding: 0 2.5%; }
        .award__player__wrap .player__content .player__body .player__info:nth-child(2) p {
          margin: 10px 0 0 0; }
    .award__player__wrap .player__content .btn__area {
      width: 100%;
      max-width: 200px;
      position: absolute;
      right: 20px;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      font-weight: 700; }
      .award__player__wrap .player__content .btn__area .award__btn {
        margin: 0; }
    @media screen and (max-width: 1024px) {
      .award__player__wrap .player__content .player__body {
        width: 55%; }
      .award__player__wrap .player__content .player__head {
        padding: 6.4% 0; } }
    @media screen and (max-width: 768px) {
      .award__player__wrap .player__content .player__head {
        padding: 0;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%; }
        .award__player__wrap .player__content .player__head h6 {
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-writing-mode: tb-rl;
          -ms-writing-mode: tb-rl;
          writing-mode: tb-rl;
          word-break: keep-all;
          -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
      .award__player__wrap .player__content .player__body {
        width: 68%;
        padding: 20px 0 20px 15%;
        margin: 0 0 0 2%; }
      .award__player__wrap .player__content .btn__area {
        width: 140px; } }
    @media screen and (max-width: 425px) {
      .award__player__wrap .player__content .player__head {
        display: block;
        width: 100%;
        height: 55px; }
        .award__player__wrap .player__content .player__head h6 {
          -webkit-writing-mode: horizontal-tb;
          -ms-writing-mode: lr-tb;
          writing-mode: horizontal-tb; }
      .award__player__wrap .player__content .player__body {
        width: 100%;
        border-bottom: 2px dashed #eda0fe;
        border-right: none;
        text-align: center;
        margin: 65px 0 0 0;
        padding: 4% 0; }
      .award__player__wrap .player__content .btn__area {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        position: static;
        display: block;
        margin: 4% auto; }
        .award__player__wrap .player__content .btn__area .award__btn {
          margin: 0 auto; } }

.award__player__note {
  width: 96%;
  max-width: 920px;
  margin: 0 auto; }
  .award__player__note h6 {
    background-color: #ffe69b;
    padding: 1% 2%;
    display: inline-block;
    margin: 0 0 1.5%; }
  .award__player__note .player__note__list {
    counter-reset: i; }
    .award__player__note .player__note__list li {
      line-height: 26px; }
      .award__player__note .player__note__list li:before {
        counter-increment: i;
        content: counter(i);
        padding-right: 1%; }
      .award__player__note .player__note__list li p {
        padding-left: 2%; }
  @media screen and (max-width: 425px) {
    .award__player__note {
      margin: 5% auto; } }

.luckyWheel-itemBox .mainWheel .itemBox9 .item .lucky__fontStyle {
  color: #3c3a76;
  font-size: 18px;
  font-weight: 500; }

@media screen and (max-width: 425px) {
  .luckyWheel-itemBox .mainWheel .itemBox9 .item .lucky__fontStyle {
    font-size: 12px; } }

.swal2-content img {
  width: 75px;
  margin: 0 auto; }

.event__area--four .title__style {
  background-image: url("../img/bg_material_pink.png");
  background-size: 5%;
  background-position: 0 0;
  background-repeat: repeat; }

.event__area--four .event__body--firstEvent .eventTitle {
  background-color: #fec8d6; }

.event__area--four .event__body--secondEvent .eventTitle {
  background-color: #f4c8fe; }

.event__area--four .event__body--secondEvent .list__coordinate {
  border-color: #f4c8fe;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start; }
  .event__area--four .event__body--secondEvent .list__coordinate .list__img {
    border-color: #f4c8fe; }
  .event__area--four .event__body--secondEvent .list__coordinate .event__sublist .sublist__title {
    background-color: #f4c8fe; }
  .event__area--four .event__body--secondEvent .list__coordinate .event__sublist li {
    border-bottom: 1px dashed #f4c8fe; }

.event__area--four .event__acc__four .acc__top__right {
  width: 42%;
  position: absolute;
  right: -5%;
  top: 0; }
  @media screen and (max-width: 1024px) {
    .event__area--four .event__acc__four .acc__top__right {
      top: -0.2%; } }
  @media screen and (max-width: 425px) {
    .event__area--four .event__acc__four .acc__top__right {
      top: -0.5%;
      width: 75%; } }

.event__area--four .event__acc__four .acc__top__left {
  width: 22%;
  position: absolute;
  left: -75px;
  top: 0; }
  @media screen and (max-width: 1280px) {
    .event__area--four .event__acc__four .acc__top__left {
      width: 27%;
      left: -12%;
      top: 0; } }
  @media screen and (max-width: 1024px) {
    .event__area--four .event__acc__four .acc__top__left {
      top: 1%;
      z-index: 2; } }
  @media screen and (max-width: 425px) {
    .event__area--four .event__acc__four .acc__top__left {
      display: none; } }

.event__area--four .event__acc__four .acc__centerLeft__ribbon {
  width: 8%;
  position: absolute;
  top: 14%;
  left: 12%; }
  @media screen and (max-width: 1280px) {
    .event__area--four .event__acc__four .acc__centerLeft__ribbon {
      top: 12%;
      left: -1%; } }
  @media screen and (max-width: 425px) {
    .event__area--four .event__acc__four .acc__centerLeft__ribbon {
      display: none; } }

.event__area--four .event__acc__four .acc__centerRight__ribbon {
  width: 8%;
  position: absolute;
  right: 10%;
  top: 24%; }
  @media screen and (max-width: 1280px) {
    .event__area--four .event__acc__four .acc__centerRight__ribbon {
      top: 14%;
      right: -1%; } }
  @media screen and (max-width: 425px) {
    .event__area--four .event__acc__four .acc__centerRight__ribbon {
      display: none; } }

.event__list {
  padding-left: 15px;
  counter-reset: i; }
  .event__list > li {
    line-height: 26px; }
    .event__list > li:before {
      counter-increment: i;
      content: counter(i);
      padding-right: 1%; }
  .event__list .list__coordinate {
    width: 45%;
    border: 2px solid #fec8d6;
    padding: 2%;
    margin: 2% 0 2% 2.4%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start; }
    .event__list .list__coordinate .list__img {
      max-width: 60%;
      width: 100%;
      display: inline-block;
      margin: 0 5% 0 0; }
    .event__list .list__coordinate .event__sublist {
      color: #3c3a76;
      font-size: 13.2px;
      width: 100%; }
      .event__list .list__coordinate .event__sublist li {
        border-bottom: 1px dashed #fec8d6; }
        .event__list .list__coordinate .event__sublist li:nth-child(6) {
          border-bottom: none; }
      .event__list .list__coordinate .event__sublist .sublist__title {
        display: inline-block;
        padding: 1% 10%;
        background-color: #fec8d6;
        border-bottom: none; }
  @media screen and (max-width: 768px) {
    .event__list .list__coordinate {
      width: 46%; } }
  @media screen and (max-width: 425px) {
    .event__list .list__coordinate {
      width: 90%;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start; } }

.challenge__wrap {
  margin: 2.5% 0;
  width: 100%; }

.common__title {
  background-image: url("../img/title_bg_pink.png");
  background-size: contain;
  background-position: 0 0;
  background-repeat: repeat;
  padding: 2% 0;
  text-align: center;
  color: #3c3a76;
  font-weight: 700; }

@media screen and (max-width: 425px) {
  .common__title {
    padding: 5% 0;
    margin: 0 0 2% 0; } }

.event__area--five .event__content {
  padding: 0 0 6.6%; }

.event__area--five .event__mainarea .eventTitle {
  background-color: #fec8d6; }

.event__area--five .event__mainarea .award__birthday__wrap {
  margin: 2% 0; }

.event__area--five .event__mainarea .award__common__info .award__common {
  width: 100%; }
  .event__area--five .event__mainarea .award__common__info .award__common .acc__common__right {
    right: -46px;
    bottom: 60px; }
    .event__area--five .event__mainarea .award__common__info .award__common .acc__common__right span {
      border-width: 0 9px 10px 8px; }

.event__area--five .event__note .note__list {
  padding: 4% 12% 3%; }

@media screen and (max-width: 425px) {
  .event__area--five .award__common__info .award__common {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    .event__area--five .award__common__info .award__common .daily__img {
      margin: 2% auto; }
    .event__area--five .award__common__info .award__common .daily__info {
      padding: 0 3%;
      text-align: center; }
    .event__area--five .award__common__info .award__common .acc__common__right {
      display: none; }
  .event__area--five .event__note .note__list {
    padding: 10% 7% 3%; } }

.reward__head {
  margin: 2% 0 0;
  padding: 3% 0 0;
  text-align: center;
  color: #3c3a76;
  font-weight: 700; }
  .reward__head h6 {
    font-size: 16.8px; }
  .reward__head span {
    color: #f4c8fe; }

.award__reward__wrap .reward__content {
  width: 100%;
  background-image: url("../img/reward_bg.jpg");
  background-size: 85%;
  background-position: 0 0;
  background-repeat: repeat; }

.reward__block__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;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .reward__block__wrap .reward__block {
    border: 3px solid #f4c8fe;
    width: 30%;
    margin: 2% 1%;
    text-align: center;
    background-color: #fff;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 215px; }
    .reward__block__wrap .reward__block .reward__img {
      max-width: 75px;
      width: 100%;
      margin: 4% auto 2%; }
    .reward__block__wrap .reward__block .reward__text {
      margin: 4.5% 0;
      width: 100%; }
    .reward__block__wrap .reward__block .reward__icon {
      width: 100%;
      background-image: url("../img/bg_material_purple.png");
      background-size: 2%;
      background-position: 0 0;
      background-repeat: repeat;
      color: #3c3a76; }
      .reward__block__wrap .reward__block .reward__icon span {
        cursor: pointer;
        display: inline-block;
        padding: 5.5%; }
    .reward__block__wrap .reward__block:hover {
      -webkit-box-shadow: 0 2px 0 0 #eda0fe;
      box-shadow: 0 2px 0 0 #eda0fe;
      -webkit-animation: shakeEffect .2s linear;
      animation: shakeEffect .2s linear; }
  @media screen and (max-width: 768px) {
    .reward__block__wrap {
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start; }
      .reward__block__wrap .reward__text {
        padding: 0 10%;
        line-height: 22px; } }
  @media screen and (max-width: 425px) {
    .reward__block__wrap .reward__block {
      width: 90%; } }

.event__acc__five .acc__top__right {
  width: 25%;
  position: absolute;
  right: 2%; }

.event__acc__five .acc__top__left {
  width: 40%;
  position: absolute;
  -webkit-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1);
  top: -0.2%; }

.event__acc__five .acc__center__left {
  width: 8%;
  position: absolute;
  left: 12%;
  top: 9%; }

@media screen and (max-width: 1280px) {
  .event__acc__five .acc__top__right {
    width: 30%;
    right: -11%; }
  .event__acc__five .acc__center__left {
    left: -1%; } }

@media screen and (max-width: 425px) {
  .event__acc__five .acc__top__left {
    width: 75%;
    left: -35%; }
  .event__acc__five .acc__top__right {
    display: none; }
  .event__acc__five .acc__center__left {
    display: none; } }

.award__daily__wrap {
  margin: 5% 0 2%; }
  @media screen and (max-width: 768px) {
    .award__daily__wrap .award__common__info {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
      .award__daily__wrap .award__common__info .award__common {
        width: 100%; } }

.award__common__info {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 0 2%;
  width: 100%;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }
  .award__common__info .award__common {
    width: 49%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 1% 0;
    padding: 2% 0 2% 2%;
    border: 2px solid #fec8d6;
    position: relative;
    overflow: hidden; }
    .award__common__info .award__common .daily__img {
      border: 2px solid #fec8d6;
      width: 75px;
      margin-right: 2%; }
    .award__common__info .award__common .buff__img {
      height: 100px; }
      .award__common__info .award__common .buff__img img {
        padding: 30% 0; }
    .award__common__info .award__common .daily__info {
      line-height: 22px; }
      .award__common__info .award__common .daily__info h6 {
        font-weight: 700;
        color: #353535; }
      .award__common__info .award__common .daily__info .font_subText {
        font-size: 14.4px;
        color: #3c3a76; }
    .award__common__info .award__common .acc__common__right {
      position: absolute;
      right: -49px;
      bottom: 65px;
      -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      transform: rotate(-90deg);
      -webkit-transform-origin: center;
      -ms-transform-origin: center;
      transform-origin: center; }
      .award__common__info .award__common .acc__common__right span {
        border-style: solid;
        border-width: 0 9px 11px 9px;
        border-color: transparent transparent #fec8d6 transparent; }
    @media screen and (max-width: 425px) {
      .award__common__info .award__common .acc__common__right {
        display: none; } }
    @media screen and (max-width: 360px) {
      .award__common__info .award__common {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
        .award__common__info .award__common .acc__common__right {
          display: none; }
        .award__common__info .award__common .daily__img {
          margin: 2% auto; }
        .award__common__info .award__common .daily__info {
          width: 100%;
          margin: 3% auto 0;
          text-align: center; } }

.award__reward__wrap {
  margin: 3% 0 2%; }
  .award__reward__wrap .common__title {
    background-image: url("../img/title_bg_purple.png");
    background-size: contain;
    background-position: 0 0;
    background-repeat: repeat; }

.reward__award__info {
  border: 2px solid #f4c8fe;
  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;
  margin: -20px 0 0 0;
  line-height: 22px;
  padding: 1.5%;
  width: 99.9%; }
  .reward__award__info .reward__img {
    width: 75px; }
  .reward__award__info .reward__info {
    padding: 0 0 0 2.5%; }
    .reward__award__info .reward__info h6 {
      font-weight: 700;
      color: #353535; }
  @media screen and (max-width: 1280px) {
    .reward__award__info {
      margin: -21px 0 0 0; } }
  @media screen and (max-width: 1024px) {
    .reward__award__info {
      margin: -19px 1px 0 0; } }
  @media screen and (max-width: 768px) {
    .reward__award__info {
      margin: -15px 0px 0 0; } }
  @media screen and (max-width: 425px) {
    .reward__award__info {
      width: 99.8%;
      padding: 5%;
      margin: -9px 0 0 0; } }
  @media screen and (max-width: 360px) {
    .reward__award__info {
      margin: -7px 0 0 0; } }

.event__body--firstEvent .reward__wrap {
  width: 100%;
  margin: 2% 0; }
  .event__body--firstEvent .reward__wrap .tableStyle th {
    background-color: #f4dffe;
    border: 2px solid #f4c8fe; }
    .event__body--firstEvent .reward__wrap .tableStyle th:nth-child(1) {
      width: 35%; }
    .event__body--firstEvent .reward__wrap .tableStyle th:nth-child(2) {
      width: 15%; }
    .event__body--firstEvent .reward__wrap .tableStyle th:nth-child(3) {
      width: 35%; }
    .event__body--firstEvent .reward__wrap .tableStyle th:nth-child(4) {
      width: 15%; }
  .event__body--firstEvent .reward__wrap .tableStyle td {
    border: 2px solid #f4c8fe; }

.event__body--secondEvent .reward__wrap {
  width: 100%;
  margin: 2% 0; }
  .event__body--secondEvent .reward__wrap .tableStyle th {
    background-color: #f4dffe;
    border: 2px solid #f4c8fe;
    vertical-align: middle; }
    .event__body--secondEvent .reward__wrap .tableStyle th:nth-child(1) {
      width: 15%; }
    .event__body--secondEvent .reward__wrap .tableStyle th:nth-child(2) {
      width: 25%; }
    .event__body--secondEvent .reward__wrap .tableStyle th:nth-child(3) {
      width: 10%; }
    .event__body--secondEvent .reward__wrap .tableStyle th:nth-child(4) {
      width: 15%; }
    .event__body--secondEvent .reward__wrap .tableStyle th:nth-child(5) {
      width: 25%; }
    .event__body--secondEvent .reward__wrap .tableStyle th:nth-child(6) {
      width: 10%; }
    .event__body--secondEvent .reward__wrap .tableStyle th span {
      display: block;
      line-height: 22px; }
  .event__body--secondEvent .reward__wrap .tableStyle td {
    border: 2px solid #f4c8fe; }
    .event__body--secondEvent .reward__wrap .tableStyle td span {
      display: block;
      line-height: 22px; }
  @media screen and (max-width: 425px) {
    .event__body--secondEvent .reward__wrap .tableStyle td {
      padding: 1.5%; } }

.font_sizeS {
  font-size: 13.2px; }

.font_subText {
  font-size: 14.4px;
  color: #3c3a76; }

.tableStyle {
  width: 100%;
  color: #3c3a76;
  text-align: center; }
  .tableStyle th {
    text-align: center;
    background-color: #fec8d6;
    padding: 1.5%;
    border: 2px solid #fec8d6;
    font-weight: 700; }
    .tableStyle th:nth-child(1) {
      width: 10%; }
    .tableStyle th:nth-child(2) {
      width: 45%; }
    .tableStyle th:nth-child(3) {
      width: 45%; }
  .tableStyle td {
    padding: 1.5%;
    vertical-align: middle;
    border: 2px solid #fec8d6; }
  .tableStyle tr:nth-child(odd) {
    background-color: #fef7ff; }
  @media screen and (max-width: 425px) {
    .tableStyle td {
      padding: 4.5%;
      line-height: 18px; } }

.title__style {
  width: 180px;
  height: 60px;
  margin: 0 auto;
  background-image: url("../img/bg_material_purple.png");
  background-size: 5%;
  background-position: 0 0;
  background-repeat: repeat;
  border-radius: 50px;
  border: 3px solid #3c3a76;
  color: #3c3a76;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  line-height: 52px; }
  .title__style:after {
    content: '';
    position: absolute;
    background-image: url("../img/btn_line_top.png");
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    top: 8%;
    left: 4%;
    width: 22px;
    height: 22px;
    pointer-events: none; }
  .title__style:before {
    content: '';
    position: absolute;
    background-image: url("../img/btn_line_bottom.png");
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    bottom: -5%;
    right: 4%;
    width: 22px;
    height: 22px;
    pointer-events: none; }

.subtitle__style {
  font-size: 36px;
  font-weight: bold;
  margin: 3.6% 0;
  color: #3c3a76; }
  .subtitle__style span {
    color: #fec8d6;
    -webkit-text-stroke: 1px #3c3a76;
    text-shadow: 1px 1px 0 #3c3a76, 1px 0px 0 #3c3a76; }
  @media screen and (max-width: 360px) {
    .subtitle__style span {
      display: block;
      margin: 2% auto; } }

.eventTitle {
  background-color: #f4c8fe;
  color: #3c3a76;
  font-weight: bold;
  display: inline-block;
  padding: 0.9% 2%;
  margin: 2% 0; }

@media screen and (max-width: 425px) {
  .eventTitle {
    margin: 5% 0;
    padding: 3% 2%; } }

.rhombicPurple {
  background-image: url("../img/title_bg_purple.png");
  background-size: contain;
  background-position: 0 0;
  background-repeat: repeat;
  padding: 1% 0;
  text-transform: uppercase;
  font-size: 25.2px;
  font-weight: 900;
  color: #3c3a76; }
  @media screen and (max-width: 425px) {
    .rhombicPurple {
      padding: 4% 0; } }

.noteTextColor {
  color: #f16173 !important; }

.pr-4 {
  padding-right: 4.8px; }

.ml-4 {
  margin-left: 4.8px; }

.addDaynote {
  padding: 10px 15px 0 !important;
  font-size: 13px;
  line-height: 22px; }

.sign__btn {
  width: 140px;
  height: 44px;
  margin: 2% 0 1%;
  display: inline-block;
  background-image: url("../img/bg_material_yellow.png");
  background-size: 5%;
  background-position: 0 0;
  background-repeat: repeat;
  border-radius: 50px;
  border: 3px solid #3c3a76;
  line-height: 35px;
  position: relative;
  text-align: center;
  transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  -o-transition: all 0.5s linear; }
  .sign__btn:after {
    content: '';
    position: absolute;
    background-image: url("../img/btn_line_top.png");
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    top: 8%;
    left: 4%;
    width: 20px;
    height: 20px;
    pointer-events: none; }
  .sign__btn:before {
    content: '';
    position: absolute;
    background-image: url("../img/btn_line_bottom.png");
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    bottom: -5%;
    right: 4%;
    width: 20px;
    height: 20px;
    pointer-events: none; }
  .sign__btn a {
    color: #3c3a76; }
  .sign__btn:hover {
    -webkit-box-shadow: 0 2px 0 #ffe69b;
    box-shadow: 0 2px 0 #ffe69b;
    -webkit-animation: shakeEffect .2s ease-in-out;
    animation: shakeEffect .2s ease-in-out; }

.formLink {
  display: inline-block;
  width: auto; }

.scrollupBtn {
  width: 50px;
  margin: 12% 0 0 15%;
  display: none; }
  .scrollupBtn.active {
    display: block; }

/*# sourceMappingURL=indexCommon.css.map */