@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&family=Noto+Serif+TC:wght@600;700&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-size: 14px;
  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: #443728;
  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: 0; }

input:-internal-autofill-selected {
  background-color: none !important; }

/*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; }

input[type="checkbox"] {
  margin: 0; }

.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: 67px !important; }

.codeBox.thin.verify__box {
  min-height: 67px; }

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

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

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

.l-wrapperhidden {
  overflow: hidden; }

.l-wrapperSub {
  max-width: 1170px;
  width: 95%;
  margin: 0 auto;
  position: relative; }

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

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

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

.l-disinline {
  display: inline-block; }

.l-fontBold {
  font-weight: 700; }

.l-fontSizeL {
  font-size: 18px; }

.l-fontSizeS {
  font-size: 13px; }

.l-alignLeft {
  text-align: left; }
  @media screen and (max-width: 375px) {
    .l-alignLeft {
      text-align: center; } }

.l-tableBgColor {
  background-color: rgba(255, 243, 204, 0.8); }

.l-lightBgColor {
  background-color: rgba(255, 255, 255, 0.6); }

.l-noticeBgColor {
  background-color: #ffe094; }

.l-pointBgColor {
  background-color: #fccc3e; }

.menu_container {
  position: fixed;
  z-index: 999;
  top: 50px;
  right: 5px; }
  @media screen and (max-width: 680px) {
    .menu_container {
      top: 1%; } }
  .menu_container.active .menu_icon_wrap {
    width: 100%;
    border-radius: 5px 5px 0 0; }
    .menu_container.active .menu_icon_wrap .top {
      -webkit-transform: rotate(45deg) translate(-50%, -50%);
      -ms-transform: rotate(45deg) translate(-50%, -50%);
      transform: rotate(45deg) translate(-50%, -50%);
      top: 50%; }
    .menu_container.active .menu_icon_wrap .middle {
      display: none; }
    .menu_container.active .menu_icon_wrap .bottom {
      -webkit-transform: rotate(-45deg) translate(-50%, -50%);
      -ms-transform: rotate(-45deg) translate(-50%, -50%);
      transform: rotate(-45deg) translate(-50%, -50%);
      top: 50%;
      left: 57%; }
    .menu_container.active .menu_icon_wrap span {
      left: 44%; }
    .menu_container.active .menu_icon_wrap .menu_icon {
      left: 85%; }
  .menu_container.active .menu_link_wrap {
    display: block; }
  .menu_container .menu_icon_wrap {
    width: 50px;
    height: 44px;
    background-color: #25465a;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
    margin: 0 0 0 auto; }
    .menu_container .menu_icon_wrap .menu_icon {
      position: absolute;
      width: 30px;
      height: 23px;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
    .menu_container .menu_icon_wrap span {
      position: absolute;
      width: 100%;
      height: 5px;
      background-color: #fff;
      border: 1px solid #48f1f3;
      border-radius: 50px;
      left: 50%;
      -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
      transform: translate(-50%, 0);
      -webkit-transform-origin: 0;
      -ms-transform-origin: 0;
      transform-origin: 0;
      -webkit-transition: all .2s linear;
      -o-transition: all .2s linear;
      transition: all .2s linear; }
    .menu_container .menu_icon_wrap .top {
      top: 0; }
    .menu_container .menu_icon_wrap .middle {
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
    .menu_container .menu_icon_wrap .bottom {
      bottom: 0; }
  .menu_container .menu_link_wrap {
    width: 180px;
    background-color: #25465a;
    text-align: center;
    border-radius: 0 0 5px 5px;
    display: none;
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear; }
    .menu_container .menu_link_wrap a {
      font-size: 14px;
      color: #fff;
      padding: 8% 0;
      margin: 1px 0;
      background-color: rgba(72, 241, 243, 0.3);
      -webkit-transition: all .2s linear;
      -o-transition: all .2s linear;
      transition: all .2s linear; }
      .menu_container .menu_link_wrap a:hover {
        color: #25465a;
        background-color: #48f1f3; }
    .menu_container .menu_link_wrap .social_wrap {
      width: 100%;
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex; }
      .menu_container .menu_link_wrap .social_wrap a {
        padding: 4% 0; }
        .menu_container .menu_link_wrap .social_wrap a:nth-child(1) {
          margin: 1px 2px 0 0;
          border-radius: 0 0 0 5px; }
        .menu_container .menu_link_wrap .social_wrap a:nth-child(2) {
          border-radius: 0 0 5px 0; }
        .menu_container .menu_link_wrap .social_wrap a img {
          width: 40px;
          margin: 0 auto; }

.rtc_logo {
  max-width: 163px;
  width: 10%;
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 999; }
  @media screen and (max-width: 768px) {
    .rtc_logo {
      width: 12%; } }
  @media screen and (max-width: 680px) {
    .rtc_logo {
      width: 17%; } }
  @media screen and (max-width: 480px) {
    .rtc_logo {
      width: 17%; } }

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

.news_body {
  background-image: url("../img/bg_popup.png");
  background-size: 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  -webkit-box-shadow: 3px 3px 0 #f1cd3c;
  box-shadow: 3px 3px 0 #f1cd3c;
  border: 1px solid #fccc3e;
  height: 403px; }
  @media screen and (max-width: 992px) {
    .news_body {
      height: auto; } }
  .news_body .news_btn {
    width: 100%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding: 0 2%;
    color: #443728;
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
    height: calc(403px / 6);
    line-height: 450%; }
    .news_body .news_btn:nth-child(odd) {
      background-color: #fff1bb; }
    .news_body .news_btn:nth-child(even) {
      background-color: rgba(255, 241, 187, 0.4); }
    .news_body .news_btn .news_list {
      width: 70%; }
    .news_body .news_btn .news_time {
      width: 30%;
      text-align: right; }
    .news_body .news_btn:hover {
      background-color: #fccc3e; }
    @media screen and (max-width: 480px) {
      .news_body .news_btn {
        padding: 0 4%; } }
    @media screen and (max-width: 375px) {
      .news_body .news_btn .news_time {
        width: 35%; } }

.deepYellow {
  color: #f1cd3c; }

.title {
  font-size: 18px;
  font-weight: 700;
  color: #443728;
  margin: 1% 0;
  position: relative;
  z-index: 1; }
  @media screen and (max-width: 768px) {
    .title {
      margin: 2% 0; } }

.sub_title {
  padding: 0 0 0 5px; }
  .sub_title--head {
    font-weight: 700;
    margin: 1% 0; }
    @media screen and (max-width: 480px) {
      .sub_title--head {
        font-size: 18px; } }

.btnStyle {
  background-color: #fff1bb;
  border: 1px solid #fccc3e;
  font-weight: 500;
  font-size: 13px;
  color: #443728;
  padding: 9%;
  text-transform: uppercase;
  -webkit-box-shadow: 3px 3px 0 #f1cd3c;
  box-shadow: 3px 3px 0 #f1cd3c;
  -webkit-transition: all 0.4s cubic-bezier(0.63, 0.05, 0.22, 0.87);
  -o-transition: all 0.4s cubic-bezier(0.63, 0.05, 0.22, 0.87);
  transition: all 0.4s cubic-bezier(0.63, 0.05, 0.22, 0.87); }
  .btnStyle:hover {
    -webkit-box-shadow: none;
    box-shadow: none; }
  .btnStyle--org {
    text-align: center;
    color: #272623;
    background-color: #ffe5d0;
    border: 1px solid #ff8929;
    -webkit-box-shadow: 3px 3px 0 #ff8929;
    box-shadow: 3px 3px 0 #ff8929; }
    @media screen and (max-width: 768px) {
      .btnStyle--org {
        padding: 6%; } }
  .btnStyle--white {
    background-color: #fff; }
  .btnStyle--red {
    background-color: #e25534;
    color: #fff;
    border: 1px solid #b8452a;
    -webkit-box-shadow: 3px 3px 0 #b8452a;
    box-shadow: 3px 3px 0 #b8452a; }
  @media screen and (max-width: 540px) {
    .btnStyle {
      font-size: 15px; } }

.btn_area a {
  padding: 4.1% 0;
  color: #443728;
  font-weight: 500;
  font-size: 16px;
  background-color: rgba(252, 204, 62, 0.6);
  margin: 2px 0;
  -webkit-transition: all 0.1s cubic-bezier(0.63, 0.05, 0.22, 0.87);
  -o-transition: all 0.1s cubic-bezier(0.63, 0.05, 0.22, 0.87);
  transition: all 0.1s cubic-bezier(0.63, 0.05, 0.22, 0.87); }
  .btn_area a:hover {
    background-color: rgba(252, 204, 62, 0.2); }

@media screen and (max-width: 1024px) {
  .btn_area a {
    padding: 6.7% 0; } }

@media screen and (max-width: 768px) {
  .btn_area a {
    padding: 4% 0; } }

@media screen and (max-width: 540px) {
  .btn_area a {
    padding: 6% 0; } }

.acc_point_wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none; }
  .acc_point_wrap .acc_point {
    position: absolute;
    max-width: 409px;
    width: 25%; }
    .acc_point_wrap .acc_point--right {
      right: -50px;
      bottom: 0%;
      -webkit-transform: scaleX(-1);
      -ms-transform: scaleX(-1);
      transform: scaleX(-1);
      left: initial; }

.acc_post {
  position: absolute;
  width: 10%; }
  .acc_post--org {
    z-index: 1;
    left: -6%;
    top: 2%; }
  .acc_post--pink {
    top: 10%;
    left: -7%; }
  @media screen and (max-width: 768px) {
    .acc_post {
      width: 16%;
      max-width: 165px; }
      .acc_post--pink {
        top: 6%; } }
  @media screen and (max-width: 540px) {
    .acc_post {
      width: 22%; }
      .acc_post--org {
        top: -1%; }
      .acc_post--pink {
        top: 2%; } }

.acc_text {
  position: relative;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 25px;
  font-style: italic;
  color: #ffe094;
  z-index: 1;
  text-align: right; }
  @media screen and (max-width: 768px) {
    .acc_text {
      margin: 3% 0 0 0; } }
  @media screen and (max-width: 480px) {
    .acc_text {
      font-size: 20px; } }

.footer_bgSet {
  background-image: url("../img/acc_footer_repeat.png");
  background-size: 5%;
  background-position: 0 0;
  background-repeat: repeat; }

.fontNotice {
  color: #e25534; }

.fontExplan {
  color: #2d71c5; }

.form_box {
  margin: 2% 0; }
  .form_box label {
    display: block;
    padding: 0 2.2%;
    font-weight: 700; }
  .form_box--check {
    max-width: 500px;
    width: 100%;
    margin: 2% auto; }
  @media screen and (max-width: 540px) {
    .form_box {
      margin: 4% 0; } }

.input_area input {
  display: block;
  width: 100%;
  margin: 1.2% 0;
  border-radius: 50px;
  border: 1px solid #fccc3e;
  background-color: #fff;
  padding: 2.2% 2%;
  color: #443728;
  font-weight: 500;
  -webkit-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear; }
  .input_area input:focus {
    -webkit-box-shadow: 2px 2px #fccc3e;
    box-shadow: 2px 2px #fccc3e; }
  @media screen and (max-width: 540px) {
    .input_area input {
      padding: 3.2%;
      font-size: 16px; } }

.input_note {
  font-size: 14px;
  padding: 0 2%; }
  @media screen and (max-width: 540px) {
    .input_note {
      line-height: 1.4; } }

.select_wrap {
  width: 100%;
  margin: 1.2% 0;
  border-radius: 50px;
  border: 1px solid #fccc3e;
  background-color: #fff;
  padding: 2.2% 2%;
  color: #443728;
  position: relative;
  font-size: 14px; }
  .select_wrap .selectList {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50px;
    padding: 0 2%;
    opacity: 0; }
  .select_wrap .arrow_icon {
    position: absolute;
    top: 40%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 20px; }
  @media screen and (max-width: 540px) {
    .select_wrap {
      padding: 4%; } }

.form_submit {
  text-align: center; }
  .form_submit input {
    cursor: pointer;
    padding: 2% 8%; }
    @media screen and (max-width: 540px) {
      .form_submit input {
        padding: 4% 12%; } }

.tips_area {
  border: 2px solid #fac551;
  border-radius: 10px;
  padding: 1% 1.8%;
  margin: 1% 0; }

.tips_title {
  font-weight: 700;
  color: #f7a54d;
  text-transform: uppercase; }
  @media screen and (max-width: 375px) {
    .tips_title {
      display: block; } }

.line {
  width: 100%;
  height: 2px;
  background-color: #fac551;
  margin: 1% 0; }

.drawline {
  position: absolute; }
  .drawline.active .drawStroke {
    -webkit-animation: drawStroke 1s forwards;
    animation: drawStroke 1s forwards; }
  .drawline svg {
    fill: none;
    stroke: #ffe094;
    stroke-width: 10px;
    stroke-linejoin: round;
    stroke-linecap: round; }
    .drawline svg .drawStroke {
      stroke-dasharray: 580;
      stroke-dashoffset: -580; }

.card_area {
  width: 95%;
  margin: 0 auto;
  position: relative;
  padding: 4% 2%;
  z-index: 2; }
  .card_area:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #fff;
    border: 1px solid #fac551;
    -webkit-transform: rotate(-0.5deg);
    -ms-transform: rotate(-0.5deg);
    transform: rotate(-0.5deg); }
  @media screen and (max-width: 540px) {
    .card_area {
      width: 100%; } }

.team_notice {
  margin: 1% 0;
  font-size: 20px;
  font-weight: 700;
  position: relative;
  display: inline-block;
  z-index: 1;
  color: #25465a; }
  .team_notice:after {
    content: '';
    position: absolute;
    width: 110%;
    height: 16px;
    background-color: #ffe479;
    left: 50%;
    top: 50%;
    z-index: -1;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%); }
  @media screen and (max-width: 680px) {
    .team_notice {
      width: 75%;
      margin: 3% 0 1%;
      line-height: 1.3; }
      .team_notice:after {
        height: 60%;
        top: 25%; } }

.acc_title {
  font-size: 26px;
  font-weight: 700;
  color: #f7a54d;
  text-transform: uppercase;
  display: inline-block;
  vertical-align: text-bottom; }
  @media screen and (max-width: 540px) {
    .acc_title {
      display: block; } }

#cboxClose {
  background-image: url(../img/closeIcon.png) !important;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 30px;
  height: 30px;
  right: 70px;
  top: 25px;
  cursor: pointer;
  position: absolute; }
  @media screen and (max-width: 680px) {
    #cboxClose {
      right: 3%; } }

.main_container {
  background-image: url("../img/vi_bg_behind_m.png");
  background-size: 100%;
  background-position: 0 0;
  background-repeat: no-repeat; }
  @media screen and (max-width: 768px) {
    .main_container {
      padding: 5% 0 0 0; } }
  @media screen and (max-width: 425px) {
    .main_container {
      padding: 17% 0 0 0; } }

.vi_wrapper {
  width: 85%;
  margin: 0 auto;
  position: relative; }
  @media screen and (max-width: 1280px) {
    .vi_wrapper {
      width: 90%; } }
  @media screen and (max-width: 1024px) {
    .vi_wrapper {
      width: 95%; } }
  @media screen and (max-width: 768px) {
    .vi_wrapper {
      width: 100%; } }
  @media screen and (max-width: 540px) {
    .vi_wrapper {
      padding: 5% 0 0 0; } }

.vi_peo_area {
  padding: 0 0 70% 0;
  position: relative; }
  @media screen and (max-width: 1024px) {
    .vi_peo_area {
      padding: 0 0 65% 0; } }
  @media screen and (max-width: 768px) {
    .vi_peo_area {
      padding: 0 0 80% 0; } }
  @media screen and (max-width: 680px) {
    .vi_peo_area {
      padding: 0 0 90% 0; } }
  @media screen and (max-width: 540px) {
    .vi_peo_area {
      padding: 0 0 100% 0; } }
  .vi_peo_area.active .peo_center_shadow {
    -webkit-animation: peoCenter .5s forwards;
    animation: peoCenter .5s forwards; }
  .vi_peo_area.active .peo_right_sura {
    -webkit-animation: peoLeft .5s .2s forwards;
    animation: peoLeft .5s .2s forwards; }
  .vi_peo_area.active .peo_right_sorcerer {
    -webkit-animation: peoLeft .5s .4s forwards;
    animation: peoLeft .5s .4s forwards; }
  .vi_peo_area.active .peo_left_arch {
    -webkit-animation: peoRight .5s .2s forwards;
    animation: peoRight .5s .2s forwards; }
  .vi_peo_area.active .peo_left_minstrel {
    -webkit-animation: peoRight .5s .3s forwards;
    animation: peoRight .5s .3s forwards; }
  .vi_peo_area.active .peo_right_dancer {
    -webkit-animation: peoLeft .5s forwards;
    animation: peoLeft .5s forwards; }
  .vi_peo_area.active .peo_right_cross {
    -webkit-animation: peoLeft .5s .2s forwards;
    animation: peoLeft .5s .2s forwards; }
  .vi_peo_area.active .peo_right_crossGirl {
    -webkit-animation: peoLeft .5s forwards;
    animation: peoLeft .5s forwards; }
  .vi_peo_area.active .peo_center_sorcerer {
    -webkit-animation: peoLeft .5s forwards;
    animation: peoLeft .5s forwards; }
  .vi_peo_area.active .peo_left_suraBoy {
    -webkit-animation: peoLeft .5s .2s forwards;
    animation: peoLeft .5s .2s forwards; }
  .vi_peo_area.active .peo_right_rune {
    -webkit-animation: peoLeft .5s .3s forwards;
    animation: peoLeft .5s .3s forwards; }
  .vi_peo_area .vi_peo_set {
    width: 47%;
    position: absolute; }
  .vi_peo_area .peo_center_shadow {
    max-width: 640px;
    top: 4%;
    left: 52%;
    -webkit-transform: translate(-50%, 0%) scale(0);
    -ms-transform: translate(-50%, 0%) scale(0);
    transform: translate(-50%, 0%) scale(0);
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    z-index: 2; }
  .vi_peo_area .peo_right_sura {
    max-width: 783px;
    top: 3%;
    right: 10%;
    z-index: 1;
    opacity: 0; }
  .vi_peo_area .peo_right_sorcerer {
    max-width: 800px;
    top: -2%;
    right: -6%;
    opacity: 0; }
  .vi_peo_area .peo_left_arch {
    max-width: 795px;
    top: 2%;
    left: 4%;
    z-index: 1;
    opacity: 0; }
  .vi_peo_area .peo_left_minstrel {
    width: 38%;
    max-width: 670px;
    top: -5%;
    left: -3%;
    opacity: 0; }
  @media screen and (max-width: 768px) {
    .vi_peo_area .vi_peo_set {
      width: 55%; }
    .vi_peo_area .peo_right_sura {
      right: 4%; }
    .vi_peo_area .peo_right_sorcerer {
      right: -13%; }
    .vi_peo_area .peo_left_arch {
      top: 1%;
      left: 2%; }
    .vi_peo_area .peo_left_minstrel {
      width: 48%;
      top: -5%;
      left: -8%; }
    .vi_peo_area .peo_center_shadow {
      left: 53%; } }
  @media screen and (max-width: 680px) {
    .vi_peo_area .vi_peo_set {
      width: 72%; }
    .vi_peo_area .peo_right_sura {
      right: -16%;
      top: 10.5%; }
    .vi_peo_area .peo_right_sorcerer {
      display: none; }
    .vi_peo_area .peo_left_arch {
      top: 8%;
      left: -16%; }
    .vi_peo_area .peo_left_minstrel {
      display: none; }
    .vi_peo_area .peo_center_shadow {
      left: 55%;
      top: -4%; } }
  @media screen and (max-width: 425px) {
    .vi_peo_area .peo_center_shadow {
      top: -13%;
      left: 56%; }
    .vi_peo_area .peo_right_sura {
      right: -24%;
      top: 1.5%; }
    .vi_peo_area .peo_left_arch {
      top: 0;
      left: -24%; }
    .vi_peo_area .vi_peo_set {
      width: 80%; } }

.slogan_area {
  width: 38%;
  position: absolute;
  z-index: 3;
  top: 40%;
  left: 46%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }
  .slogan_area .slogan_head {
    position: relative;
    z-index: 1; }
  .slogan_area .slogan_body {
    width: 100%;
    background-image: url("../img/acc_brush.png");
    background-size: 110%;
    background-position: -25px 0;
    background-repeat: no-repeat;
    height: 6vw;
    margin: -5% 0 0 10%;
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
    color: #fff; }
    .slogan_area .slogan_body .sub_slogan {
      text-align: center;
      padding: 4% 0 0 17%;
      letter-spacing: 1.2px; }
  @media screen and (max-width: 1280px) {
    .slogan_area {
      top: 39%;
      left: 48%; } }
  @media screen and (max-width: 768px) {
    .slogan_area {
      width: 55%;
      top: 35%; } }
  @media screen and (max-width: 680px) {
    .slogan_area {
      top: 38%; }
      .slogan_area .slogan_body {
        background-position: -30px 0;
        background-size: 120%;
        padding: 0 0 3% 0;
        height: auto; } }
  @media screen and (max-width: 480px) {
    .slogan_area {
      width: 65%; } }
  @media screen and (max-width: 425px) {
    .slogan_area {
      width: 75%; }
      .slogan_area .slogan_body {
        background-position: -40px 0;
        padding: 0 0 8% 0;
        background-size: cover; }
        .slogan_area .slogan_body .sub_slogan {
          padding: 4% 0 0 23%;
          font-size: 17px; } }

.acc_ragnarok {
  width: 80%;
  position: absolute;
  top: 33%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 0.7; }
  .acc_ragnarok img {
    visibility: hidden; }
  .acc_ragnarok.active:after {
    animation: ragnarokLeftEffect .8s forwards, opacityEffect 1s 2.2s alternate-reverse infinite; }
  .acc_ragnarok.active:before {
    animation: ragnarokRightEffect .8s ease-in-out, boomEffect 1s 2s alternate-reverse infinite; }
  .acc_ragnarok:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 8.8vw;
    background-image: url("../img/acc_ragnarok.png");
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    top: 0;
    left: 0; }
  .acc_ragnarok:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 8.8vw;
    background-image: url("../img/acc_ragnarok.png");
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    top: 0;
    left: 0; }

@-webkit-keyframes ragnarokLeftEffect {
  0% {
    -webkit-transform: translate(-150%, -200%);
    transform: translate(-150%, -200%); }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); } }

@keyframes ragnarokLeftEffect {
  0% {
    -webkit-transform: translate(-150%, -200%);
    transform: translate(-150%, -200%); }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); } }

@-webkit-keyframes ragnarokRightEffect {
  0% {
    -webkit-transform: translate(150%, 200%);
    transform: translate(150%, 200%); }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); } }

@keyframes ragnarokRightEffect {
  0% {
    -webkit-transform: translate(150%, 200%);
    transform: translate(150%, 200%); }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); } }

@-webkit-keyframes peoCenter {
  0% {
    -webkit-transform: translate(-50%, 0%) scale(0);
    transform: translate(-50%, 0%) scale(0); }
  50% {
    -webkit-transform: translate(-50%, 0%) scale(1.5);
    transform: translate(-50%, 0%) scale(1.5); }
  100% {
    -webkit-transform: translate(-50%, 0%) scale(1);
    transform: translate(-50%, 0%) scale(1); } }

@keyframes peoCenter {
  0% {
    -webkit-transform: translate(-50%, 0%) scale(0);
    transform: translate(-50%, 0%) scale(0); }
  50% {
    -webkit-transform: translate(-50%, 0%) scale(1.5);
    transform: translate(-50%, 0%) scale(1.5); }
  100% {
    -webkit-transform: translate(-50%, 0%) scale(1);
    transform: translate(-50%, 0%) scale(1); } }

@-webkit-keyframes peoRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(25%);
    transform: translateX(25%);
    -ms-transform: translateX(25%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -ms-transform: translateX(0); } }

@keyframes peoRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(25%);
    transform: translateX(25%);
    -ms-transform: translateX(25%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -ms-transform: translateX(0); } }

@-webkit-keyframes peoLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-25%);
    transform: translateX(-25%);
    -ms-transform: translateX(-25%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -ms-transform: translateX(0%); } }

@keyframes peoLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-25%);
    transform: translateX(-25%);
    -ms-transform: translateX(-25%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -ms-transform: translateX(0%); } }

@-webkit-keyframes flyEffect {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }
  100% {
    -webkit-transform: translate(2px, -2px);
    transform: translate(2px, -2px); } }

@keyframes flyEffect {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }
  100% {
    -webkit-transform: translate(2px, -2px);
    transform: translate(2px, -2px); } }

@-webkit-keyframes shinyEffect {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes shinyEffect {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes drawStroke {
  0% {
    stroke-dashoffset: 580; }
  100% {
    stroke-dashoffset: 0; } }

@keyframes drawStroke {
  0% {
    stroke-dashoffset: 580; }
  100% {
    stroke-dashoffset: 0; } }

@-webkit-keyframes boomEffect {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0) scale(0);
    transform: translate(0, 0) scale(0); }
  50% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1); }
  60% {
    -webkit-transform: translate(0, 0) scale(1.1);
    transform: translate(0, 0) scale(1.1); }
  70% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1); }
  100% {
    opacity: 0.5; } }

@keyframes boomEffect {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0) scale(0);
    transform: translate(0, 0) scale(0); }
  50% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1); }
  60% {
    -webkit-transform: translate(0, 0) scale(1.1);
    transform: translate(0, 0) scale(1.1); }
  70% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1); }
  100% {
    opacity: 0.5; } }

@-webkit-keyframes pointForcus {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0); }
  100% {
    opacity: 0.8;
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes pointForcus {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0); }
  100% {
    opacity: 0.8;
    -webkit-transform: scale(1);
    transform: scale(1); } }

@-webkit-keyframes opacityEffect {
  0% {
    opacity: 0; }
  100% {
    opacity: 0.5; } }

@keyframes opacityEffect {
  0% {
    opacity: 0; }
  100% {
    opacity: 0.5; } }

@-webkit-keyframes hover3dEffect {
  0% {
    -webkit-transform: translateZ(25px);
    transform: translateZ(25px); }
  100% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0); } }

@keyframes hover3dEffect {
  0% {
    -webkit-transform: translateZ(25px);
    transform: translateZ(25px); }
  100% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0); } }

.calltoaction {
  max-width: 1170px;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 56%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 6; }
  @media screen and (max-width: 1024px) {
    .calltoaction {
      top: 59%; } }
  @media screen and (max-width: 480px) {
    .calltoaction {
      top: 63%; } }

.call_btn {
  width: 25%;
  display: inline-block;
  margin: 0 auto;
  color: #fff;
  line-height: 1.2;
  letter-spacing: 1.2px;
  font-weight: bold; }
  .call_btn:hover .call_btn_img {
    -webkit-animation: peoLeft 1s forwards;
    animation: peoLeft 1s forwards; }
  @media screen and (max-width: 1024px) {
    .call_btn:hover .call_btn_img {
      -webkit-animation: none;
      animation: none; } }
  .call_btn--bule {
    width: 28%;
    display: block;
    position: relative;
    margin: 0 auto 1%; }
    .call_btn--bule:after {
      content: '';
      position: absolute;
      background-image: url("../img/acc_polly_s.png");
      background-size: 100%;
      background-position: 0 0;
      background-repeat: no-repeat;
      width: 30%;
      padding: 0 0 30% 0;
      top: -56%;
      left: -10px;
      -webkit-animation: flyEffect .6s infinite alternate;
      animation: flyEffect .6s infinite alternate;
      z-index: 1; }
    @media screen and (max-width: 1024px) {
      .call_btn--bule:after {
        height: auto;
        padding: 0 0 30% 0; } }
  .call_btn .call_btn_img {
    position: relative;
    z-index: 1; }
    .call_btn .call_btn_img .call_text {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      width: 100%; }
    .call_btn .call_btn_img:after {
      content: '';
      position: absolute;
      width: 90%;
      height: 100%;
      border-radius: 100%;
      background-color: transparent;
      left: 50%;
      top: 0;
      -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
      transform: translate(-50%, 0);
      z-index: -1;
      -webkit-box-shadow: 0 0 15px #48f1f3;
      box-shadow: 0 0 15px #48f1f3;
      -webkit-animation: shinyEffect 1s infinite alternate;
      animation: shinyEffect 1s infinite alternate; }
    @media screen and (max-width: 425px) {
      .call_btn .call_btn_img {
        font-size: 14px; } }
  .call_btn--red .call_btn_img:after {
    -webkit-box-shadow: 0 0 15px #e25534;
    box-shadow: 0 0 15px #e25534; }
  .call_btn--green .call_btn_img:after {
    -webkit-box-shadow: 0 0 15px #36b4b5;
    box-shadow: 0 0 15px #36b4b5; }
  @media screen and (max-width: 768px) {
    .call_btn {
      width: 35%; }
      .call_btn--bule {
        width: 45%; } }
  @media screen and (max-width: 540px) {
    .call_btn {
      width: 42%; }
      .call_btn--bule {
        width: 50%; } }
  @media screen and (max-width: 425px) {
    .call_btn--bule {
      width: 65%;
      padding: 2% 0; }
      .call_btn--bule .call_text {
        width: 100%; }
        .call_btn--bule .call_text h5,
        .call_btn--bule .call_text p {
          display: inline-block; }
      .call_btn--bule:after {
        top: -35%;
        left: -25px; } }
  @media screen and (max-width: 320px) {
    .call_btn--bule {
      width: 70%; }
      .call_btn--bule:after {
        left: -40px; } }

.secondary_container {
  position: relative;
  z-index: 4; }
  .secondary_container .secondary_brush {
    margin: -27% 0 0 0; }
  .secondary_container .secondary_brush_bottom {
    margin: -3% 0 2%; }
  @media screen and (max-width: 768px) {
    .secondary_container .secondary_brush {
      margin: -42% 0 0 0; } }

.news_container {
  background-image: url("../img/bg_repeat_white_b.png");
  background-size: 30%;
  background-position: 0 0;
  background-repeat: repeat; }

.news_event_wrap {
  max-width: 1366px;
  width: 100%;
  margin: 0 auto; }
  @media screen and (max-width: 1280px) {
    .news_event_wrap {
      padding: 2% 0; } }
  @media screen and (max-width: 768px) {
    .news_event_wrap {
      padding: 12% 0; } }
  @media screen and (max-width: 425px) {
    .news_event_wrap {
      padding: 15% 0; } }

.news_event_area {
  width: 95%;
  margin: 0 auto;
  position: relative;
  padding: 4% 2%; }
  .news_event_area:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: 1px solid #fac551;
    top: 0;
    left: 0;
    -webkit-transform: rotate(-0.5deg);
    -ms-transform: rotate(-0.5deg);
    transform: rotate(-0.5deg); }
  .news_event_area .event_block_wrap {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    height: 403px;
    width: 100%; }
  .news_event_area .event_block_area {
    width: 100%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex; }
    .news_event_area .event_block_area:nth-child(1) {
      margin: 0 0 10px 0; }
    @media screen and (max-width: 375px) {
      .news_event_area .event_block_area:nth-child(1) {
        margin: 1% 0 3%; }
      .news_event_area .event_block_area:nth-child(2) {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; } }
  .news_event_area .main_btn_area {
    width: 100%;
    height: 100%; }
    .news_event_area .main_btn_area:nth-child(1) {
      height: 100%;
      margin: 0 10px 0 0; }
    .news_event_area .main_btn_area:nth-child(2) {
      width: 74%; }
    .news_event_area .main_btn_area .main_btn_link {
      height: 100%;
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-align: stretch;
      -ms-flex-align: stretch;
      align-items: stretch; }
  .news_event_area .btn_wrap {
    background-color: #fff1bb;
    background-image: url("../img/bg_rule.jpg");
    background-size: 100%;
    background-position: 0 0;
    background-repeat: repeat;
    -webkit-box-shadow: 3px 3px 0 #f1cd3c;
    box-shadow: 3px 3px 0 #f1cd3c;
    border: 1px solid #fccc3e;
    font-size: 16px;
    padding: 2%;
    position: relative;
    overflow: hidden; }
    .news_event_area .btn_wrap:before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: url("../img/bg_rule.jpg");
      background-size: 100%;
      background-position: 0 0;
      background-repeat: repeat;
      z-index: 2;
      top: 0;
      left: 0;
      -webkit-transition: all .2s linear;
      -o-transition: all .2s linear;
      transition: all .2s linear;
      cursor: pointer; }
    .news_event_area .btn_wrap:after {
      content: '';
      position: absolute;
      top: 50%;
      left: 30%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      z-index: 2;
      font-weight: 700;
      font-size: 22px; }
    .news_event_area .btn_wrap.active:before {
      -webkit-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0); }
    .news_event_area .btn_wrap.active:after {
      display: none; }
    .news_event_area .btn_wrap.active .acc_monster {
      display: none; }
    @media screen and (max-width: 1024px) {
      .news_event_area .btn_wrap.active .acc_monster {
        display: none; } }
    .news_event_area .btn_wrap--sign {
      width: 48%;
      margin: 0 10px 10px 0; }
      .news_event_area .btn_wrap--sign .sign_wrap {
        width: 100%; }
      .news_event_area .btn_wrap--sign .acc_monster {
        position: absolute;
        background-image: url("../img/acc_polly.png");
        background-size: 100%;
        background-position: 0 0;
        background-repeat: no-repeat;
        width: 70%;
        max-width: 217px;
        padding: 0 0 100% 0;
        top: 22%;
        right: -18%;
        z-index: 2; }
      .news_event_area .btn_wrap--sign:after {
        content: '報名專區';
        top: 50%;
        left: 25%; }
      @media screen and (max-width: 1024px) {
        .news_event_area .btn_wrap--sign .sign_wrap {
          margin: 0 auto; } }
    .news_event_area .btn_wrap--join {
      width: 49%;
      margin: 0 0 10px 0; }
      .news_event_area .btn_wrap--join .acc_monster {
        background-image: url("../img/acc_goblin.png");
        background-size: 100%;
        background-position: 0 0;
        background-repeat: no-repeat;
        position: absolute;
        left: -29%;
        bottom: -9%;
        width: 86%;
        padding: 0 0 98% 0;
        z-index: 2; }
      .news_event_area .btn_wrap--join:after {
        content: '入選隊伍';
        left: 73%;
        width: 50%;
        text-align: center; }
      .news_event_area .btn_wrap--join .sign_wrap {
        width: 100%;
        margin: 0 auto; }
      @media screen and (max-width: 768px) {
        .news_event_area .btn_wrap--join {
          width: 50%; } }
    .news_event_area .btn_wrap--newRule {
      position: relative;
      width: 48%;
      margin: 0 10px 0 0;
      background-image: url("../img/bg_newrule.jpg");
      background-size: 100%;
      background-position: 0 0;
      background-repeat: repeat;
      -webkit-box-shadow: 3px 3px 0 #ff8929;
      box-shadow: 3px 3px 0 #ff8929;
      border: 1px solid #ff8929;
      padding: 0;
      -webkit-transition: all .2s linear;
      -o-transition: all .2s linear;
      transition: all .2s linear; }
      .news_event_area .btn_wrap--newRule .acc_monster_newRule {
        position: absolute;
        background-image: url("../img/acc_newrule_monster.png");
        background-size: 100%;
        background-position: 0 0;
        background-repeat: no-repeat;
        width: 90%;
        padding: 0 0 100% 0;
        right: -37%;
        top: -8%; }
        @media screen and (max-width: 1200px) {
          .news_event_area .btn_wrap--newRule .acc_monster_newRule {
            display: none; } }
      .news_event_area .btn_wrap--newRule:before {
        display: none; }
      .news_event_area .btn_wrap--newRule:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
        border: 1px solid #e25534;
        -webkit-animation: pointForcus 1s cubic-bezier(0.63, 0.05, 0.57, 0.75) infinite;
        animation: pointForcus 1s cubic-bezier(0.63, 0.05, 0.57, 0.75) infinite; }
      .news_event_area .btn_wrap--newRule a {
        position: relative;
        color: #443728;
        font-weight: 700;
        padding: 4%; }
      .news_event_area .btn_wrap--newRule .text_change {
        position: absolute;
        top: 50%;
        left: 29%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
        line-height: 1.2;
        font-size: 18px; }
        @media screen and (max-width: 1200px) {
          .news_event_area .btn_wrap--newRule .text_change {
            font-size: 20px;
            width: 100%;
            left: 50%; } }
      .news_event_area .btn_wrap--newRule span {
        display: block; }
      .news_event_area .btn_wrap--newRule .icon_new {
        background-color: #e25534;
        display: inline-block;
        padding: 2% 3% 3%;
        color: #ffe5d0; }
      .news_event_area .btn_wrap--newRule:hover {
        -webkit-box-shadow: none;
        box-shadow: none; }
    .news_event_area .btn_wrap--gameRule {
      width: 49%; }
      .news_event_area .btn_wrap--gameRule .acc_monster {
        position: absolute;
        background-image: url("../img/acc_rule_monster.png");
        background-size: 100%;
        background-position: 0 0;
        background-repeat: no-repeat;
        width: 72%;
        padding: 0 0 100% 0;
        top: -3%;
        left: -10%;
        z-index: 2; }
      .news_event_area .btn_wrap--gameRule:after {
        content: '賽事說明';
        left: 74%;
        top: 50%;
        width: 50%;
        text-align: center; }
      .news_event_area .btn_wrap--gameRule .sign_wrap {
        width: 100%;
        margin: 0 auto; }
      .news_event_area .btn_wrap--gameRule .gamebtn {
        width: calc(100% / 2 - 10px);
        display: inline-block;
        vertical-align: top; }
  .news_event_area .btn_more {
    width: 15%;
    margin: 2% 2% 1% 22%;
    text-align: center;
    position: relative;
    z-index: 1; }
  @media screen and (max-width: 1200px) {
    .news_event_area {
      padding: 4% 2% 7%; }
      .news_event_area .main_btn_area {
        width: 70%; }
      .news_event_area .btn_wrap--join .acc_monster {
        left: -30%;
        padding: 0 0 105% 0; }
      .news_event_area .btn_wrap--gameRule .acc_monster {
        width: 78%;
        top: -1%;
        left: -15%; } }
  @media screen and (max-width: 1024px) {
    .news_event_area .main_btn_area {
      width: 100%; }
      .news_event_area .main_btn_area:nth-child(2) {
        width: 70%; }
    .news_event_area .btn_more {
      width: 20%;
      margin: 2% 2% 1% 20%; }
    .news_event_area .btn_wrap {
      width: calc(100% / 2 - 5px); }
      .news_event_area .btn_wrap--newRule {
        width: 43%; }
      .news_event_area .btn_wrap--gameRule {
        width: 54%; } }
  @media screen and (max-width: 992px) {
    .news_event_area {
      padding: 8% 2%; }
      .news_event_area .btn_more {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        width: 20%;
        margin: 2% 0 2% auto; }
      .news_event_area .event_block_wrap {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        height: 100%;
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3; }
      .news_event_area .main_btn_area:nth-child(1) {
        margin: 0; }
      .news_event_area .main_btn_area:nth-child(2) {
        width: 100%;
        margin: 2% 0; }
      .news_event_area .flexOrderSet {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
        .news_event_area .flexOrderSet .title {
          -webkit-box-ordinal-group: 2;
          -ms-flex-order: 1;
          order: 1; }
      .news_event_area .btn_wrap--gameRule {
        width: 55%; } }
  @media screen and (max-width: 680px) {
    .news_event_area .btn_wrap--newRule {
      width: 100%;
      margin: 0 0 3%; }
    .news_event_area .btn_wrap--gameRule {
      width: 100%; } }
  @media screen and (max-width: 540px) {
    .news_event_area {
      padding: 8% 2% 14%; }
      .news_event_area .btn_more {
        width: 25%; } }
  @media screen and (max-width: 480px) {
    .news_event_area {
      padding: 8% 4%; } }
  @media screen and (max-width: 375px) {
    .news_event_area .main_btn_area:nth-child(1) {
      margin: 4% 0; }
    .news_event_area .main_btn_area:nth-child(2) {
      margin: 0; }
    .news_event_area .btn_more {
      width: 35%;
      margin: 5% 0 0 auto; } }

.sign_wrap {
  width: 80%;
  text-align: center; }
  .sign_wrap.active {
    position: relative;
    left: 0;
    top: 0;
    right: 0;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0); }
  .sign_wrap .btn_area {
    margin: 5% 0 0 0; }
  .sign_wrap .title {
    width: 100%; }
  @media screen and (max-width: 1024px) {
    .sign_wrap {
      width: 90%; } }
  @media screen and (max-width: 768px) {
    .sign_wrap .title {
      font-size: 20px; } }

.reward_container {
  background-color: #fff3cc;
  margin: -10% 0 0 0;
  position: relative;
  padding: 3% 0 10% 0; }
  .reward_container .acc_cat {
    max-width: 353px;
    width: 100%;
    position: absolute;
    z-index: 5;
    top: -20%;
    left: -4%; }
    @media screen and (max-width: 1680px) {
      .reward_container .acc_cat {
        left: -3%; } }
    @media screen and (max-width: 1024px) {
      .reward_container .acc_cat {
        width: 30%;
        top: -20%;
        left: -7%; } }
    @media screen and (max-width: 768px) {
      .reward_container .acc_cat {
        width: 40%;
        top: -15%;
        left: -7%; } }
    @media screen and (max-width: 540px) {
      .reward_container .acc_cat {
        width: 50%;
        top: -21%;
        left: -11%; } }
    @media screen and (max-width: 375px) {
      .reward_container .acc_cat {
        display: none; } }
  .reward_container .acc_text_reward {
    color: #ffe094;
    text-transform: uppercase;
    font-style: italic;
    font-size: 95px;
    font-weight: 700;
    padding: 7% 0 0 67%;
    width: 40%;
    position: relative; }
    @media screen and (max-width: 1200px) {
      .reward_container .acc_text_reward {
        padding: 7% 0 0 57%; } }
    @media screen and (max-width: 768px) {
      .reward_container .acc_text_reward {
        padding: 7% 0 0 43%; } }
    @media screen and (max-width: 680px) {
      .reward_container .acc_text_reward {
        padding: 7% 0 0 34%; } }
    @media screen and (max-width: 540px) {
      .reward_container .acc_text_reward {
        padding-left: 29%; } }
    @media screen and (max-width: 480px) {
      .reward_container .acc_text_reward {
        font-size: 78px; } }
    @media screen and (max-width: 425px) {
      .reward_container .acc_text_reward {
        font-size: 64px;
        padding-left: 35%; } }
    @media screen and (max-width: 375px) {
      .reward_container .acc_text_reward {
        font-size: 70px;
        padding-left: 12%; } }
    .reward_container .acc_text_reward .drawline {
      left: 23%;
      bottom: 0;
      width: 80%;
      -webkit-transform: scaleX(-1);
      -ms-transform: scaleX(-1);
      transform: scaleX(-1); }
      .reward_container .acc_text_reward .drawline.active .drawStroke {
        -webkit-animation: drawStroke 1s forwards;
        animation: drawStroke 1s forwards; }
      .reward_container .acc_text_reward .drawline svg {
        fill: none;
        stroke: #ffe094;
        stroke-width: 10px;
        stroke-linejoin: round;
        stroke-linecap: round; }
        .reward_container .acc_text_reward .drawline svg .drawStroke {
          stroke-dasharray: 580;
          stroke-dashoffset: -580; }
      @media screen and (max-width: 768px) {
        .reward_container .acc_text_reward .drawline {
          bottom: initial;
          top: -7%;
          left: -9%;
          width: 140%;
          z-index: 4; } }
      @media screen and (max-width: 680px) {
        .reward_container .acc_text_reward .drawline {
          width: 175%;
          top: -16%;
          left: -52%; } }
      @media screen and (max-width: 540px) {
        .reward_container .acc_text_reward .drawline {
          width: 195%;
          top: -18%;
          left: 50%; } }
      @media screen and (max-width: 425px) {
        .reward_container .acc_text_reward .drawline {
          top: -14%;
          left: 54%; } }
      @media screen and (max-width: 375px) {
        .reward_container .acc_text_reward .drawline {
          width: 240%;
          left: -20%;
          top: -23%; } }

.reward_card {
  width: 100%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  margin: 2% auto 0;
  position: relative;
  z-index: 6; }
  @media screen and (max-width: 768px) {
    .reward_card {
      height: auto;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; } }

.reward_card_wrap {
  width: calc(95% / 2 - 10px);
  overflow: hidden;
  position: relative; }
  .reward_card_wrap.active:before {
    display: none; }
  .reward_card_wrap.active:after {
    display: none; }
  .reward_card_wrap.active .acc_ranger {
    z-index: 1; }
  .reward_card_wrap.active .acc_monk {
    z-index: 1; }
  .reward_card_wrap.active .sign_wrap {
    position: relative;
    z-index: 2; }
  .reward_card_wrap:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear; }
  .reward_card_wrap:after {
    content: '';
    position: absolute;
    width: 100%;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    z-index: 3;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
  .reward_card_wrap--reward {
    margin: 0 10px 0 0;
    border: 1px solid #4f613b;
    -webkit-box-shadow: 3px 3px rgba(132, 149, 80, 0.18);
    box-shadow: 3px 3px rgba(132, 149, 80, 0.18);
    background-image: url("../img/bg_reward_green.png");
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    position: relative; }
    .reward_card_wrap--reward .acc_ranger {
      position: relative;
      left: -15%;
      top: 0;
      z-index: 3;
      pointer-events: none; }
    .reward_card_wrap--reward:after {
      content: 'RTC\A傳奇藏寶庫';
      white-space: pre-line;
      left: 74%;
      color: #4f613b; }
    .reward_card_wrap--reward:before {
      background-image: url("../img/bg_reward_green.png");
      background-size: 100%;
      background-position: 0 0;
      background-repeat: no-repeat; }
    .reward_card_wrap--reward .reward_btn_wrap {
      width: 60%;
      position: absolute;
      top: 50%;
      left: 67%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      z-index: 1;
      margin: 0; }
    .reward_card_wrap--reward .reward_title {
      color: #4f613b; }
    .reward_card_wrap--reward .btn_area--award {
      width: calc(100% / 2 - 10px);
      display: inline-block; }
    @media screen and (max-width: 480px) {
      .reward_card_wrap--reward:after {
        top: 0;
        padding: 0 0 50% 0; } }
  .reward_card_wrap--board {
    background-image: url("../img/bg_reward_red.png");
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    border: 1px solid #e25534;
    -webkit-box-shadow: 3px 3px rgba(226, 85, 52, 0.2);
    box-shadow: 3px 3px rgba(226, 85, 52, 0.2);
    position: relative; }
    .reward_card_wrap--board .acc_monk {
      position: relative;
      pointer-events: none;
      top: 0;
      right: 0;
      z-index: 2; }
    .reward_card_wrap--board:after {
      content: 'RTC\A榮耀任務看板';
      white-space: pre-line;
      left: 28%;
      color: #e25534; }
    .reward_card_wrap--board:before {
      background-image: url("../img/bg_reward_red.png");
      background-size: 100%;
      background-position: 0 0;
      background-repeat: no-repeat; }
    .reward_card_wrap--board .reward_btn_wrap {
      width: 50%;
      position: absolute;
      top: 50%;
      left: 30%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      margin: 0;
      z-index: 1; }
    .reward_card_wrap--board .reward_title {
      color: #e25534; }
  @media screen and (max-width: 768px) {
    .reward_card_wrap {
      width: 90%; }
      .reward_card_wrap--reward {
        margin: 0 0 2% 0; } }
  @media screen and (max-width: 425px) {
    .reward_card_wrap {
      width: 100%; } }

.reward_btn_wrap {
  position: relative;
  margin: 0 0 0 50%; }
  .reward_btn_wrap .reward_title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear; }
    @media screen and (max-width: 425px) {
      .reward_btn_wrap .reward_title {
        font-size: 25px; } }
  .reward_btn_wrap .sign_wrap {
    width: 100%;
    margin: 0 auto;
    position: relative; }
    .reward_btn_wrap .sign_wrap a {
      padding: 4% 0;
      margin: 2% 0;
      color: #443728; }
    .reward_btn_wrap .sign_wrap--award {
      width: 100%; }
      .reward_btn_wrap .sign_wrap--award a {
        padding: 6% 0; }
  @media screen and (max-width: 768px) {
    .reward_btn_wrap {
      padding: 2% 0; } }
  @media screen and (max-width: 540px) {
    .reward_btn_wrap .sign_wrap {
      width: 100%; }
      .reward_btn_wrap .sign_wrap a {
        padding: 6% 0; } }
  @media screen and (max-width: 425px) {
    .reward_btn_wrap .sign_wrap a {
      padding: 8% 0; } }
  @media screen and (max-width: 375px) {
    .reward_btn_wrap {
      width: 60%;
      margin: 0 0 0 39%; }
      .reward_btn_wrap .sign_wrap a {
        padding: 6% 0; } }

.game_container {
  width: 100%;
  background-color: #ffdd8c;
  margin: 0 0 -2px 0; }

.org_brush {
  position: relative;
  margin: -8% 0 0 0; }

.game_event_wrap {
  width: 95%;
  margin: 0 auto;
  position: relative; }
  .game_event_wrap:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: 1px solid #fac551;
    top: 0%;
    left: -1%;
    opacity: 0.8;
    -webkit-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg); }
  .game_event_wrap .acc_chick {
    position: absolute;
    max-width: 118px;
    width: 8%;
    right: -2%;
    top: -15%;
    z-index: 2; }
    @media screen and (max-width: 768px) {
      .game_event_wrap .acc_chick {
        width: 12%;
        top: -9%; } }
    @media screen and (max-width: 425px) {
      .game_event_wrap .acc_chick {
        width: 17%; } }
  .game_event_wrap .game_event_container {
    padding: 2%;
    position: relative;
    z-index: 1;
    background-color: #fff;
    border: 1px solid #fac551; }
  .game_event_wrap .game_event_area {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 100%; }
  .game_event_wrap .game_review_info {
    width: 58%;
    margin: 0 1% 0 0;
    position: relative; }
  .game_event_wrap .game_live_info {
    width: 38%; }
  .game_event_wrap .game_livesteam_wrap {
    background-image: url("../img/bg_live_pur.png");
    background-size: 100%;
    background-position: 0 0;
    background-repeat: repeat;
    padding: 2.2%;
    border: 1px solid #fac551;
    -webkit-box-shadow: 3px 3px 0 #ffe094;
    box-shadow: 3px 3px 0 #ffe094;
    position: relative;
    overflow: hidden;
    -webkit-transition: all 0.4s cubic-bezier(0.63, 0.05, 0.22, 0.87);
    -o-transition: all 0.4s cubic-bezier(0.63, 0.05, 0.22, 0.87);
    transition: all 0.4s cubic-bezier(0.63, 0.05, 0.22, 0.87);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 500px;
    perspective: 500px; }
    .game_event_wrap .game_livesteam_wrap:hover {
      -webkit-box-shadow: none;
      box-shadow: none; }
      .game_event_wrap .game_livesteam_wrap:hover .acc_mechanic {
        animation: hover3dEffect 2s alternate-reverse linear forwards; }
    .game_event_wrap .game_livesteam_wrap .live_text {
      position: absolute;
      width: 100%;
      color: #25465a;
      font-size: 35px;
      font-weight: 700;
      text-align: center;
      line-height: 1.2;
      top: 40%;
      left: 70%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
      .game_event_wrap .game_livesteam_wrap .live_text span {
        display: block; }
    .game_event_wrap .game_livesteam_wrap .acc_mechanic {
      position: absolute;
      left: -44%;
      bottom: 0;
      pointer-events: none; }
    .game_event_wrap .game_livesteam_wrap:before {
      content: '';
      position: absolute;
      background-image: url("../img/acc_bruch_pur.png");
      background-size: 100%;
      background-position: 0 0;
      background-repeat: no-repeat;
      max-width: 606px;
      width: 90%;
      padding: 0 0 30% 0;
      bottom: 0;
      right: 0; }
    @media screen and (max-width: 1024px) {
      .game_event_wrap .game_livesteam_wrap {
        padding: 14.2%; }
        .game_event_wrap .game_livesteam_wrap .live_text {
          font-size: 33px; }
        .game_event_wrap .game_livesteam_wrap .acc_mechanic {
          width: 140%;
          left: -49%; } }
    @media screen and (max-width: 768px) {
      .game_event_wrap .game_livesteam_wrap .acc_mechanic {
        width: 110%;
        left: -27%;
        bottom: initial;
        top: -120%; } }
    @media screen and (max-width: 680px) {
      .game_event_wrap .game_livesteam_wrap .live_text {
        font-size: 30px;
        top: 50%; }
      .game_event_wrap .game_livesteam_wrap .acc_mechanic {
        left: -32%; } }
    @media screen and (max-width: 540px) {
      .game_event_wrap .game_livesteam_wrap .live_text {
        font-size: 26px; } }
    @media screen and (max-width: 480px) {
      .game_event_wrap .game_livesteam_wrap .live_text {
        font-size: 23px; } }
    @media screen and (max-width: 425px) {
      .game_event_wrap .game_livesteam_wrap .live_text {
        font-size: 20px; } }
    @media screen and (max-width: 375px) {
      .game_event_wrap .game_livesteam_wrap .live_text {
        font-size: 22px; }
      .game_event_wrap .game_livesteam_wrap .acc_mechanic {
        left: -26%; } }
  @media screen and (max-width: 768px) {
    .game_event_wrap .game_event_area {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
    .game_event_wrap .game_review_info {
      width: 100%; }
    .game_event_wrap .game_live_info {
      width: 100%;
      margin: 3% 0 0 0; }
    .game_event_wrap .game_livesteam_wrap:before {
      width: 60%;
      padding: 0 0 16% 0; }
    .game_event_wrap .game_livesteam_wrap .live_text span {
      display: inline-block; } }
  @media screen and (max-width: 680px) {
    .game_event_wrap .game_livesteam_wrap .live_text h6 {
      padding: 0 5%; } }
  @media screen and (max-width: 375px) {
    .game_event_wrap .game_livesteam_wrap .live_text span {
      display: block; } }

.game_review_wrap {
  background-color: #fff;
  border: 1px solid #fccc3e;
  -webkit-box-shadow: 3px 3px 0 #ffe094;
  box-shadow: 3px 3px 0 #ffe094;
  overflow: hidden; }
  .game_review_wrap .swiper-container {
    max-width: 700px;
    width: 100%; }
  .game_review_wrap .swiper-button-prev,
  .game_review_wrap .swiper-button-next {
    color: #fccc3e; }

.video_rwd {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden; }
  .video_rwd iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; }

.swiper-button-prev,
.swiper-button-next {
  cursor: pointer;
  font-size: 40px; }
  .swiper-button-prev:after,
  .swiper-button-next:after {
    display: none; }