@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: #412c2a;
  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: 1280px;
  width: 100%;
  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-posiAbsolute {
  position: absolute; }

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

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

@-webkit-keyframes btnEffect {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translateY(-5%);
    transform: translateY(-5%); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes btnEffect {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translateY(-5%);
    transform: translateY(-5%); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@-webkit-keyframes borderEffect {
  0% {
    -webkit-transform: scale(0) translate(-51%, -50%);
    transform: scale(0) translate(-51%, -50%);
    opacity: 0; }
  50% {
    -webkit-transform: scale(1.1) translate(-51%, -50%);
    transform: scale(1.1) translate(-51%, -50%);
    opacity: 1; }
  100% {
    -webkit-transform: scale(0) translate(-51%, -50%);
    transform: scale(0) translate(-51%, -50%);
    opacity: 0; } }

@keyframes borderEffect {
  0% {
    -webkit-transform: scale(0) translate(-51%, -50%);
    transform: scale(0) translate(-51%, -50%);
    opacity: 0; }
  50% {
    -webkit-transform: scale(1.1) translate(-51%, -50%);
    transform: scale(1.1) translate(-51%, -50%);
    opacity: 1; }
  100% {
    -webkit-transform: scale(0) translate(-51%, -50%);
    transform: scale(0) translate(-51%, -50%);
    opacity: 0; } }

@-webkit-keyframes scaleYEffect {
  0% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1); }
  100% {
    -webkit-transform: scaleY(1.1);
    transform: scaleY(1.1); } }

@keyframes scaleYEffect {
  0% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1); }
  100% {
    -webkit-transform: scaleY(1.1);
    transform: scaleY(1.1); } }

@-webkit-keyframes rotateEffect {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0); }
  5%, 25%, 15%, 35% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); }
  40% {
    -webkit-transform: rotate(0);
    transform: rotate(0); } }

@keyframes rotateEffect {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0); }
  5%, 25%, 15%, 35% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); }
  40% {
    -webkit-transform: rotate(0);
    transform: rotate(0); } }

@-webkit-keyframes starEffect {
  0% {
    zoom: 10%;
    opacity: 0; }
  50% {
    zoom: 100%;
    opacity: 1; } }

@keyframes starEffect {
  0% {
    zoom: 10%;
    opacity: 0; }
  50% {
    zoom: 100%;
    opacity: 1; } }

@-webkit-keyframes bottleEffect {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    -webkit-transform: translateY(4%);
    transform: translateY(4%); } }

@keyframes bottleEffect {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    -webkit-transform: translateY(4%);
    transform: translateY(4%); } }

@-webkit-keyframes devlEffect {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  90% {
    -webkit-transform: translateY(2%);
    transform: translateY(2%); }
  95% {
    -webkit-transform: translateY(4%);
    transform: translateY(4%); }
  100% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }

@keyframes devlEffect {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  90% {
    -webkit-transform: translateY(2%);
    transform: translateY(2%); }
  95% {
    -webkit-transform: translateY(4%);
    transform: translateY(4%); }
  100% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }

@-webkit-keyframes PeoLeftEffect {
  0% {
    -webkit-transform: translateX(-150%);
    transform: translateX(-150%); }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); } }

@keyframes PeoLeftEffect {
  0% {
    -webkit-transform: translateX(-150%);
    transform: translateX(-150%); }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); } }

@-webkit-keyframes PeoRightEffect {
  0% {
    -webkit-transform: translateX(150%);
    transform: translateX(150%); }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); } }

@keyframes PeoRightEffect {
  0% {
    -webkit-transform: translateX(150%);
    transform: translateX(150%); }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); } }

.wrapper {
  background-image: url("../img/bgRepeat.jpg");
  background-size: 12%;
  background-position: top center;
  background-repeat: repeat-x;
  position: relative; }
  @media screen and (max-width: 992px) {
    .wrapper {
      background-size: contain; } }

.roLogo {
  max-width: 192px;
  width: 9%;
  position: absolute;
  top: 20px;
  left: 30px;
  z-index: 99; }
  @media screen and (max-width: 1024px) {
    .roLogo {
      width: 12%; } }
  @media screen and (max-width: 768px) {
    .roLogo {
      width: 14%;
      top: 2%;
      left: 1%; } }
  @media screen and (max-width: 480px) {
    .roLogo {
      width: 20%;
      left: 2%; } }

.social {
  position: absolute;
  top: 1.8%;
  right: 1%;
  z-index: 99; }
  .social .btn {
    max-width: 85px;
    width: 5vw;
    height: 4.5vw;
    display: block;
    margin: 0 auto 4%;
    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; }
    .social .btn:hover {
      opacity: 0.8; }
    .social .btn--baha {
      background-image: url("../img/btn_baha.png");
      background-size: 100%;
      background-position: 0 0;
      background-repeat: no-repeat; }
    .social .btn--fb {
      background-image: url("../img/btn_fb.png");
      background-size: 100%;
      background-position: 0 0;
      background-repeat: no-repeat; }
    .social .btn--download {
      background-image: url("../img/btn_download.png");
      background-size: 100%;
      background-position: 0 0;
      background-repeat: no-repeat; }
  @media screen and (max-width: 1440px) {
    .social {
      top: 6.8%; } }
  @media screen and (max-width: 1280px) {
    .social .btn {
      height: 5vw; } }
  @media screen and (max-width: 1024px) {
    .social .btn {
      width: 6vw;
      height: 6vw; } }
  @media screen and (max-width: 992px) {
    .social {
      top: 0.8%; } }
  @media screen and (max-width: 480px) {
    .social .btn {
      width: 10vw;
      height: 10vw; } }

.footer-bgSet {
  background-color: #2e2827; }

.main-container {
  width: 100%;
  position: relative;
  z-index: 1;
  overflow: hidden; }
  .main-container .center-flower-wrap .acc-flower {
    position: absolute;
    z-index: 1; }
    .main-container .center-flower-wrap .acc-flower--01 {
      max-width: 96px;
      width: 12%;
      top: -1%;
      right: 18%; }
      .main-container .center-flower-wrap .acc-flower--01.active {
        -webkit-animation: rotateEffect 20s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
        animation: rotateEffect 20s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275); }
    .main-container .center-flower-wrap .acc-flower--02 {
      max-width: 196px;
      width: 14%;
      top: -2%;
      right: 3%; }
      .main-container .center-flower-wrap .acc-flower--02.active {
        -webkit-animation: rotateEffect 20s 0.2s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
        animation: rotateEffect 20s 0.2s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275); }
    .main-container .center-flower-wrap .acc-flower--03 {
      max-width: 81px;
      width: 6%;
      top: 20%;
      right: 1%; }
      .main-container .center-flower-wrap .acc-flower--03.active {
        -webkit-animation: rotateEffect 20s 0.3s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
        animation: rotateEffect 20s 0.3s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275); }
    .main-container .center-flower-wrap .acc-flower--04 {
      max-width: 81px;
      width: 8%;
      top: -1%;
      left: 21%; }
      .main-container .center-flower-wrap .acc-flower--04.active {
        -webkit-animation: rotateEffect 20s 0.4s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
        animation: rotateEffect 20s 0.4s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275); }
    @media screen and (max-width: 1680px) {
      .main-container .center-flower-wrap .acc-flower--01 {
        right: 22%; }
      .main-container .center-flower-wrap .acc-flower--02 {
        width: 12%;
        right: 9%; }
      .main-container .center-flower-wrap .acc-flower--03 {
        top: 16%;
        right: 6%; } }
    @media screen and (max-width: 1366px) {
      .main-container .center-flower-wrap .acc-flower--01 {
        width: 5%;
        right: 27%; }
      .main-container .center-flower-wrap .acc-flower--02 {
        width: 11%;
        right: 15%; }
      .main-container .center-flower-wrap .acc-flower--03 {
        right: 12%; } }
  @media screen and (max-width: 1280px) {
    .main-container .center-flower-wrap .acc-flower--04 {
      left: 23%; } }
  @media screen and (max-width: 1170px) {
    .main-container .center-flower-wrap .acc-flower--04 {
      left: 21%; } }
  @media screen and (max-width: 1024px) {
    .main-container .center-flower-wrap .acc-flower--04 {
      left: 20%; } }
  @media screen and (max-width: 992px) {
    .main-container .center-flower-wrap .acc-flower--01 {
      right: 24%; }
    .main-container .center-flower-wrap .acc-flower--02 {
      width: 13%;
      right: 9%; }
    .main-container .center-flower-wrap .acc-flower--03 {
      right: 8%; }
    .main-container .center-flower-wrap .acc-flower--04 {
      width: 6%;
      left: 17%; } }
  @media screen and (max-width: 768px) {
    .main-container .center-flower-wrap .acc-flower--01 {
      right: 28%; }
    .main-container .center-flower-wrap .acc-flower--02 {
      width: 18%;
      right: 8%; }
    .main-container .center-flower-wrap .acc-flower--04 {
      left: 7%;
      top: 13%; } }
  @media screen and (max-width: 480px) {
    .main-container .center-flower-wrap .acc-flower--01 {
      width: 11%;
      right: 38%; }
    .main-container .center-flower-wrap .acc-flower--02 {
      width: 24%;
      right: 11%; }
    .main-container .center-flower-wrap .acc-flower--03 {
      display: none; }
    .main-container .center-flower-wrap .acc-flower--04 {
      width: 15%;
      left: -5%;
      top: 14%; } }

.left-content {
  position: relative;
  max-width: 600px;
  width: 100%; }

.center-content {
  position: relative;
  margin: 0 0 0 30%;
  width: 60%;
  background-image: url("../img/mainBg.jpg");
  background-size: 10%;
  background-position: 0 0;
  background-repeat: repeat;
  border-style: solid;
  border-color: #fff178;
  border-width: 0 4px;
  -webkit-border-image: -webkit-gradient(linear, left bottom, left top, from(#db882e), color-stop(71%, #ffe367), to(#fff78b)) 1;
  -webkit-border-image: -webkit-linear-gradient(bottom, #db882e 0%, #ffe367 71%, #fff78b) 1;
  -o-border-image: -o-linear-gradient(bottom, #db882e 0%, #ffe367 71%, #fff78b) 1;
  border-image: -webkit-gradient(linear, left bottom, left top, from(#db882e), color-stop(71%, #ffe367), to(#fff78b)) 1;
  border-image: linear-gradient(0deg, #db882e 0%, #ffe367 71%, #fff78b) 1; }
  .center-content .center-wrap {
    width: 100%;
    overflow: hidden;
    position: relative; }
    .center-content .center-wrap:after {
      content: '';
      position: absolute;
      background-image: url("../img/mainBg02.png");
      background-size: 100%;
      background-position: 0 0;
      background-repeat: no-repeat;
      width: 80%;
      padding: 0 0 50% 0;
      bottom: 0;
      left: -45%;
      pointer-events: none; }
    .center-content .center-wrap:before {
      content: '';
      position: absolute;
      background-image: url("../img/mainBg02.png");
      background-size: 100%;
      background-position: 0 0;
      background-repeat: no-repeat;
      width: 50%;
      padding: 0 0 50% 0;
      top: 40%;
      right: -25%;
      pointer-events: none; }
  @media screen and (max-width: 1680px) {
    .center-content {
      width: 55%; } }
  @media screen and (max-width: 1366px) {
    .center-content {
      width: 50%; } }
  @media screen and (max-width: 992px) {
    .center-content {
      width: 67%;
      margin: 0 0 0 22%; } }
  @media screen and (max-width: 768px) {
    .center-content {
      margin: 0 auto; }
      .center-content .center-wrap {
        height: 100vw; } }
  @media screen and (max-width: 680px) {
    .center-content .center-wrap {
      height: 110vw; } }
  @media screen and (max-width: 480px) {
    .center-content {
      width: 83%;
      margin: 0 0 0 8%; }
      .center-content .center-wrap {
        height: auto; } }

.center-main {
  width: 80%;
  height: 100%;
  margin: 0 auto;
  padding: 5% 0 0; }
  .center-main .slogan {
    padding: 2% 0 8%;
    position: relative; }
    .center-main .slogan:before {
      content: '';
      position: absolute;
      background-image: url("../img/arrow.png");
      background-size: 100%;
      background-position: 0 0;
      background-repeat: no-repeat;
      width: 17px;
      height: 27px;
      left: 0;
      top: 10%; }
    .center-main .slogan:after {
      content: '';
      position: absolute;
      background-image: url("../img/arrow.png");
      background-size: 100%;
      background-position: 0 0;
      background-repeat: no-repeat;
      width: 17px;
      height: 27px;
      top: 94%;
      right: 13%; }
  .center-main .sub-slogan {
    margin: 0 0 0 10%; }
  .center-main .sub-polly {
    display: inline-block;
    width: 15%; }
  .center-main .sub-body {
    display: inline-block;
    padding: 0 0 2% 0; }
  .center-main .center-text {
    text-align: center;
    color: #db795e;
    font-family: "Noto Serif TC", serif;
    font-style: italic;
    letter-spacing: 1px;
    padding: 0 0 3% 0; }
  @media screen and (max-width: 1280px) {
    .center-main {
      width: 75%; }
      .center-main .sub-polly {
        width: 18%; } }
  @media screen and (max-width: 1170px) {
    .center-main .center-text {
      font-size: 0.4rem;
      padding: 6% 0; } }
  @media screen and (max-width: 1024px) {
    .center-main {
      width: 80%; }
      .center-main .sub-body {
        width: 63%; }
      .center-main .slogan:before {
        left: -4%;
        top: -5%; }
      .center-main .slogan:after {
        top: 87%;
        right: 3%; } }
  @media screen and (max-width: 992px) {
    .center-main {
      padding: 12% 0 0 0; } }
  @media screen and (max-width: 480px) {
    .center-main {
      width: 90%;
      padding: 19% 0 0 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
      .center-main .slogan {
        width: 100%;
        padding: 6% 0 8%; }
        .center-main .slogan .sub-polly {
          display: none; }
        .center-main .slogan .sub-body {
          display: block;
          margin: 0 0 0 14%; }
        .center-main .slogan:before {
          left: -1%;
          top: 8%; }
      .center-main .callto-wrap {
        width: 100%;
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        margin: 4% 0; }
      .center-main .event-btn-wrap {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
        padding: 0 0 3%; }
      .center-main .center-text {
        padding: 0 0 15% 0; } }

.main-slogan {
  position: relative; }
  .main-slogan .acc-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0; }
    .main-slogan .acc-wrap .acc {
      position: absolute; }
      .main-slogan .acc-wrap .acc--01 {
        top: -20%;
        left: -7%; }
        .main-slogan .acc-wrap .acc--01.active {
          animation: starEffect 1.8s alternate-reverse infinite; }
      .main-slogan .acc-wrap .acc--02 {
        top: 20%;
        right: 0%; }
        .main-slogan .acc-wrap .acc--02.active {
          animation: starEffect 1.8s 0.3s alternate-reverse infinite; }
      .main-slogan .acc-wrap .acc--03 {
        width: 8%;
        top: 55%;
        left: 11.3%;
        -webkit-transform-origin: center;
        -ms-transform-origin: center;
        transform-origin: center; }
        .main-slogan .acc-wrap .acc--03.active {
          -webkit-animation: rotateEffect 20s .5s alternate infinite;
          animation: rotateEffect 20s .5s alternate infinite; }
      .main-slogan .acc-wrap .acc--04 {
        width: 7%;
        top: 71%;
        right: 9%; }
      .main-slogan .acc-wrap .acc--05 {
        width: 8%;
        top: 0%;
        right: 3%; }
    @media screen and (max-width: 1024px) {
      .main-slogan .acc-wrap .acc--01 {
        width: 7%; }
      .main-slogan .acc-wrap .acc--02 {
        width: 10%; } }
    @media screen and (max-width: 480px) {
      .main-slogan .acc-wrap .acc--01 {
        top: 94%;
        left: -3%; } }

.callto-wrap {
  margin: -4% 0 0 0;
  position: relative; }
  .callto-wrap .callbtn {
    max-width: 320px;
    width: 100%;
    height: 68px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
    background-image: url("../img/signBg.png");
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat; }
    .callto-wrap .callbtn:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: url(../img/signBtnLight.png);
      background-position: 0 0;
      background-size: 100%;
      background-repeat: no-repeat;
      top: 0;
      left: 0;
      opacity: 0;
      animation: calltoEffect 1s alternate-reverse infinite;
      pointer-events: none; }
    .callto-wrap .callbtn:before {
      content: '';
      position: absolute;
      z-index: 2;
      background-image: url("../img/signText.png");
      background-size: 90%;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      max-width: 185px;
      width: 50%;
      height: 28px;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      pointer-events: none; }
    .callto-wrap .callbtn:hover {
      -webkit-animation: btnEffect .8s ease-in-out infinite;
      animation: btnEffect .8s ease-in-out infinite; }
      .callto-wrap .callbtn:hover:after {
        -webkit-animation: none;
        animation: none;
        opacity: 1; }
  .callto-wrap .acc-polly {
    max-width: 474px;
    width: 13%;
    margin: 0 auto -3%;
    position: relative;
    z-index: 6;
    animation: scaleYEffect 1s infinite alternate-reverse;
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom; }
  .callto-wrap .coin-wrap {
    position: absolute;
    width: 80%;
    height: 100%;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%); }
    .callto-wrap .coin-wrap .coin {
      position: absolute;
      width: 44px;
      height: 44px; }
      .callto-wrap .coin-wrap .coin--left {
        left: 0;
        background-image: url("../img/coin02.png");
        background-size: 80%;
        background-position: 0 0;
        background-repeat: no-repeat; }
      .callto-wrap .coin-wrap .coin--right {
        right: 0;
        bottom: -16%;
        background-image: url("../img/coin03.png");
        background-size: 80%;
        background-position: 0 0;
        background-repeat: no-repeat; }
  @media screen and (max-width: 1280px) {
    .callto-wrap .coin-wrap {
      width: 90%; }
      .callto-wrap .coin-wrap .coin--left {
        left: 3%; } }
  @media screen and (max-width: 1170px) {
    .callto-wrap .coin-wrap {
      width: 100%; }
    .callto-wrap .callbtn {
      width: 75%;
      height: 6vw; }
      .callto-wrap .callbtn:before {
        background-position: 50% 35%; } }
  @media screen and (max-width: 1024px) {
    .callto-wrap .coin-wrap {
      width: 103%; }
    .callto-wrap .callbtn:before {
      background-position: 50% -2%; } }
  @media screen and (max-width: 992px) {
    .callto-wrap .callbtn {
      height: 7vw; }
      .callto-wrap .callbtn:before {
        height: 3vw; }
    .callto-wrap .coin-wrap {
      width: 85%;
      top: 13%; }
      .callto-wrap .coin-wrap .coin--left {
        background-size: 60%; }
      .callto-wrap .coin-wrap .coin--right {
        background-size: 60%;
        background-position: 50% 50%; } }
  @media screen and (max-width: 820px) {
    .callto-wrap .callbtn {
      height: 8vw; } }
  @media screen and (max-width: 768px) {
    .callto-wrap .callbtn {
      height: 8vw; } }
  @media screen and (max-width: 680px) {
    .callto-wrap .coin-wrap {
      width: 95%; }
    .callto-wrap .callbtn {
      height: 8vw; }
      .callto-wrap .callbtn:before {
        height: 4vw; } }
  @media screen and (max-width: 480px) {
    .callto-wrap .callbtn {
      height: 12vw; }
      .callto-wrap .callbtn:before {
        height: 4.6vw; } }

.event-btn-wrap {
  text-align: center;
  padding: 5% 0 3%; }
  .event-btn-wrap .btn {
    position: relative;
    z-index: 5; }
    .event-btn-wrap .btn .acc-border-01 {
      position: absolute;
      background-image: url("../img/aniLine.png");
      background-size: 100%;
      background-position: 0 0;
      background-repeat: no-repeat;
      max-width: 188px;
      width: 100%;
      height: 100%;
      top: 50%;
      left: 52%;
      -webkit-transform: translate(-51%, -50%);
      -ms-transform: translate(-51%, -50%);
      transform: translate(-51%, -50%);
      -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
      transform-origin: 0 0;
      z-index: -1;
      pointer-events: none;
      animation: borderEffect 2s alternate-reverse infinite; }
    .event-btn-wrap .btn .acc-border-02 {
      position: absolute;
      background-image: url("../img/aniLine.png");
      background-size: 100%;
      background-position: 0 0;
      background-repeat: no-repeat;
      max-width: 188px;
      width: 100%;
      height: 100%;
      top: 48%;
      left: 52%;
      -webkit-transform: translate(-51%, -50%);
      -ms-transform: translate(-51%, -50%);
      transform: translate(-51%, -50%);
      -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
      transform-origin: 0 0;
      z-index: -1;
      pointer-events: none;
      animation: borderEffect 2s .2s alternate-reverse infinite; }
    .event-btn-wrap .btn:hover {
      -webkit-animation: btnEffect .8s ease-in-out infinite;
      animation: btnEffect .8s ease-in-out infinite; }
  @media screen and (max-width: 480px) {
    .event-btn-wrap {
      padding: 0 0 3%; } }

.btn-top {
  margin: 5% 0; }
  .btn-top .btn {
    max-width: 192px;
    width: 35%; }
    .btn-top .btn:nth-child(odd) {
      margin: 0 2% 0 0; }

.btn-bottom {
  margin: -8% 0 0 0; }
  .btn-bottom .btn {
    max-width: 166px;
    width: 30%; }
    .btn-bottom .btn:nth-child(2) {
      margin: 0 2%; }

.center-vi {
  position: absolute;
  width: 98%;
  height: 93%;
  left: 52%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 2; }
  .center-vi .acc-polly {
    width: 11%;
    position: absolute;
    top: 55%;
    left: 30%;
    z-index: 5; }
  .center-vi.active .vi-peo--01 {
    -webkit-animation: 1s PeoLeftEffect forwards ease-in-out;
    animation: 1s PeoLeftEffect forwards ease-in-out; }
  .center-vi.active .vi-peo--02 {
    -webkit-animation: 1s .4s PeoLeftEffect forwards ease-in-out;
    animation: 1s .4s PeoLeftEffect forwards ease-in-out; }
  .center-vi.active .vi-peo--03 {
    -webkit-animation: 1s .3s PeoLeftEffect forwards ease-in-out;
    animation: 1s .3s PeoLeftEffect forwards ease-in-out; }
  .center-vi.active .vi-peo--04 {
    -webkit-animation: 1s .5s PeoRightEffect forwards ease-in-out;
    animation: 1s .5s PeoRightEffect forwards ease-in-out; }
  .center-vi.active .vi-peo--05 {
    -webkit-animation: 1s .2s PeoRightEffect forwards ease-in-out;
    animation: 1s .2s PeoRightEffect forwards ease-in-out; }
  @media screen and (max-width: 1680px) {
    .center-vi .acc-polly {
      width: 11%;
      top: 53%;
      left: 31%; } }
  @media screen and (max-width: 1440px) {
    .center-vi {
      width: 95%; } }
  @media screen and (max-width: 1366px) {
    .center-vi {
      width: 90%; } }
  @media screen and (max-width: 1024px) {
    .center-vi {
      width: 100%; }
      .center-vi .acc-polly {
        display: none; } }
  @media screen and (max-width: 480px) {
    .center-vi .acc-polly {
      width: 16%;
      top: 44%;
      left: 41.2%;
      display: block; } }

.vi-peo {
  position: absolute; }
  .vi-peo--01 {
    max-width: 643px;
    width: 50%;
    top: 40%;
    left: -7%;
    z-index: 4;
    background-image: url("../img/peo01.png");
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    padding: 0 0 55% 0; }
  .vi-peo--02 {
    top: 12%;
    left: 6.2%;
    z-index: 2;
    background-image: url("../img/peo02.png");
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    max-width: 399px;
    width: 100%;
    padding: 0 0 50% 0; }
  .vi-peo--03 {
    top: 30%;
    left: -15%;
    z-index: 3;
    background-image: url("../img/peo03.png");
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    max-width: 429px;
    width: 100%;
    padding: 0 0 50% 0; }
  .vi-peo--04 {
    top: -1%;
    left: -3%;
    z-index: 1;
    background-image: url("../img/peo04.png");
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    max-width: 420px;
    width: 100%;
    padding: 0 0 50% 0; }
  .vi-peo--05 {
    max-width: 525px;
    width: 40%;
    right: -13%;
    bottom: -16%;
    z-index: 4;
    background-image: url("../img/peo05.png");
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    padding: 0 0 61% 0; }
  @media screen and (max-width: 1680px) {
    .vi-peo {
      width: 30%; }
      .vi-peo--01 {
        width: 46%;
        left: -2%; }
      .vi-peo--02 {
        left: 8.2%; }
      .vi-peo--03 {
        left: -7%; }
      .vi-peo--04 {
        left: 3%; }
      .vi-peo--05 {
        width: 38%;
        right: -8%;
        bottom: -20%; } }
  @media screen and (max-width: 1440px) {
    .vi-peo {
      width: 29%; }
      .vi-peo--01 {
        width: 46%;
        top: 45%; }
      .vi-peo--02 {
        top: 15%; }
      .vi-peo--03 {
        top: 32%;
        left: -3%; }
      .vi-peo--04 {
        left: 3%; }
      .vi-peo--05 {
        width: 38%; } }
  @media screen and (max-width: 1366px) {
    .vi-peo--04 {
      left: 3.5%; }
    .vi-peo--05 {
      right: -4%; } }
  @media screen and (max-width: 1280px) {
    .vi-peo--01 {
      width: 48%;
      top: 38%; }
    .vi-peo--02 {
      top: 10%; }
    .vi-peo--03 {
      top: 31%;
      left: -6%; } }
  @media screen and (max-width: 1170px) {
    .vi-peo {
      width: 30%; }
      .vi-peo--01 {
        width: 48%;
        top: 39%; }
      .vi-peo--02 {
        top: 12%;
        left: 7%; }
      .vi-peo--03 {
        top: 31%;
        left: -7%; }
      .vi-peo--04 {
        top: 3%;
        left: 2%; }
      .vi-peo--05 {
        width: 38%;
        bottom: -12%; } }
  @media screen and (max-width: 1024px) {
    .vi-peo {
      width: 28%; }
      .vi-peo--01 {
        width: 43%;
        top: 43%;
        left: 1%;
        -webkit-transform: translateX(-150%);
        -ms-transform: translateX(-150%);
        transform: translateX(-150%); }
      .vi-peo--02 {
        width: 27%;
        top: 8%;
        left: 9%;
        -webkit-transform: translateX(-150%);
        -ms-transform: translateX(-150%);
        transform: translateX(-150%); }
      .vi-peo--03 {
        top: 31%;
        left: -2%;
        -webkit-transform: translateX(-150%);
        -ms-transform: translateX(-150%);
        transform: translateX(-150%); }
      .vi-peo--04 {
        display: none; }
      .vi-peo--05 {
        width: 34%;
        top: 34.5%;
        right: -2%;
        -webkit-transform: translateX(150%);
        -ms-transform: translateX(150%);
        transform: translateX(150%); } }
  @media screen and (max-width: 992px) {
    .vi-peo {
      width: 32%; }
      .vi-peo--01 {
        width: 50%;
        top: 46.5%;
        left: -5%; }
      .vi-peo--02 {
        top: 11%;
        left: 3%; }
      .vi-peo--03 {
        left: -3.2%; }
      .vi-peo--05 {
        width: 39%;
        top: 38.5%;
        right: -6%; } }
  @media screen and (max-width: 960px) {
    .vi-peo--01 {
      top: 49.5%; }
    .vi-peo--02 {
      top: 13%;
      left: 0; }
    .vi-peo--03 {
      top: 35%;
      left: -6.2%; }
    .vi-peo--05 {
      top: 43.5%; } }
  @media screen and (max-width: 820px) {
    .vi-peo--01 {
      top: 56.5%; }
    .vi-peo--05 {
      top: 46.5%; } }
  @media screen and (max-width: 768px) {
    .vi-peo--01 {
      width: 54%;
      top: 48.5%;
      left: -10%;
      padding: 0 0 55% 0; }
    .vi-peo--02 {
      width: 33%;
      top: 21%;
      left: -6%; }
    .vi-peo--03 {
      display: none; }
    .vi-peo--04 {
      display: block;
      width: 36%;
      top: 16%;
      left: 73%;
      -webkit-transform: translateX(150%);
      -ms-transform: translateX(150%);
      transform: translateX(150%); }
    .vi-peo--05 {
      width: 44%;
      top: 40.5%;
      right: -8%; } }
  @media screen and (max-width: 680px) {
    .vi-peo--01 {
      width: 57%;
      top: 53.5%;
      left: -18%; }
    .vi-peo--02 {
      width: 36%;
      top: 21%;
      left: -6%; }
    .vi-peo--04 {
      width: 39%;
      top: 22%;
      left: 69%; }
    .vi-peo--05 {
      width: 47%;
      top: 45.5%;
      right: -10%; } }
  @media screen and (max-width: 480px) {
    .vi-peo--01 {
      width: 78%;
      top: 38%;
      left: -29%;
      padding: 0 0 88% 0; }
    .vi-peo--02 {
      display: none; }
    .vi-peo--04 {
      display: none; }
    .vi-peo--05 {
      width: 64%;
      top: 30.5%;
      right: -23%; } }

.acc-container .acc-bottom {
  background-image: url("../img/liquid.png");
  background-size: 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  width: 1920px;
  height: 348px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1; }
  .acc-container .acc-bottom:after {
    content: '';
    background-image: url("../img/liquid.png");
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1); }

.acc-container .acc-flower-wrap {
  position: absolute;
  top: 47%;
  left: -4%;
  width: 14%;
  height: 23%; }
  .acc-container .acc-flower-wrap--right {
    left: initial;
    top: 50%;
    right: -4%;
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1); }
  .acc-container .acc-flower-wrap .acc-flower {
    position: absolute; }
    .acc-container .acc-flower-wrap .acc-flower--big {
      max-width: 182px;
      width: 100%; }
    .acc-container .acc-flower-wrap .acc-flower--small {
      max-width: 96px;
      width: 100%;
      right: 0;
      bottom: 0; }
    @media screen and (max-width: 1680px) {
      .acc-container .acc-flower-wrap .acc-flower--big {
        width: 66%; } }
    @media screen and (max-width: 1280px) {
      .acc-container .acc-flower-wrap .acc-flower--small {
        right: -7%; } }

.acc-container .acc-bottle {
  width: 7%;
  padding: 0 0 12% 0;
  position: absolute;
  left: 0;
  bottom: -4%;
  background-image: url("../img/acc01.png");
  background-size: 90%;
  background-position: 0 0;
  background-repeat: no-repeat; }
  .acc-container .acc-bottle.active {
    animation: bottleEffect 2s alternate-reverse infinite; }

.acc-container .acc-devilng {
  max-width: 198px;
  width: 10%;
  height: 181px;
  position: absolute;
  background-image: url("../img/polly05.png");
  background-size: 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  right: 7%;
  top: -1%; }
  .acc-container .acc-devilng.active {
    animation: devlEffect .8s alternate-reverse infinite; }

.acc-container .acc-area {
  position: absolute;
  width: 9%; }
  .acc-container .acc-area .acc-coin {
    width: 87px;
    height: 88px;
    background-image: url("../img/coin04.png");
    background-size: 80%;
    background-position: 0 0;
    background-repeat: no-repeat;
    margin: 0 0 0 10%; }
  .acc-container .acc-area .acc-star {
    width: 35px;
    height: 54px;
    background-image: url("../img/starWhite01.png");
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    margin: 0 0 0 40%; }
  .acc-container .acc-area--top {
    top: 9%;
    left: 11%; }
    .acc-container .acc-area--top .acc-star {
      animation: starEffect 1.8s alternate-reverse infinite; }
  .acc-container .acc-area--center {
    top: 36%;
    left: 5%; }
    .acc-container .acc-area--center .acc-coin {
      width: 50px;
      height: 50px;
      background-image: url("../img/coin05.png");
      background-size: 80%;
      background-position: 0 0;
      background-repeat: no-repeat;
      margin: 0 0 5% 40%; }
      .acc-container .acc-area--center .acc-coin.active {
        animation: shakeEffect 1s .2s alternate-reverse infinite; }
    .acc-container .acc-area--center .acc-star {
      position: relative;
      animation: starEffect 1.8s .8s alternate-reverse infinite; }
      .acc-container .acc-area--center .acc-star:after {
        content: '';
        width: 18px;
        height: 28px;
        position: absolute;
        background-image: url("../img/starWhite02.png");
        background-size: 100%;
        background-position: 0 0;
        background-repeat: no-repeat;
        left: -24px; }

.acc-container .acc-poporing {
  max-width: 175px;
  width: 8%;
  height: 132px;
  position: absolute;
  background-image: url("../img/polly02.png");
  background-size: 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  top: 20%;
  left: 4%; }

.acc-container .acc-coin-ele {
  position: absolute; }
  .acc-container .acc-coin-ele--01 {
    background-image: url("../img/coin06.png");
    background-size: 80%;
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 58px;
    height: 42px;
    top: 76%;
    left: 6%; }
    .acc-container .acc-coin-ele--01.active {
      animation: shakeEffect 1s alternate-reverse infinite; }
  .acc-container .acc-coin-ele--02 {
    background-image: url("../img/coin05.png");
    background-size: 80%;
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
    top: 26%;
    right: 11%;
    -webkit-transform: rotate(-165deg);
    -ms-transform: rotate(-165deg);
    transform: rotate(-165deg); }
  .acc-container .acc-coin-ele--03 {
    background-image: url("../img/coin07.png");
    background-size: 80%;
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 87px;
    height: 98px;
    top: 73%;
    right: 10%; }

.acc-container .acc-star-ele {
  position: absolute; }
  .acc-container .acc-star-ele--01 {
    background-image: url("../img/starWhite01.png");
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 35px;
    height: 54px;
    top: 33%;
    right: 13%;
    animation: starEffect 1.8s .2s alternate-reverse infinite; }
  .acc-container .acc-star-ele--02 {
    background-image: url("../img/starWhite02.png");
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 18px;
    height: 28px;
    top: 56%;
    right: 8%;
    animation: starEffect 1.8s .8s alternate-reverse infinite; }

@media screen and (max-width: 1680px) {
  .acc-container .acc-devilng {
    right: 6%; }
  .acc-container .acc-poporing {
    top: 15%;
    left: 2%; }
  .acc-container .acc-coin-ele--02 {
    top: 29%;
    right: 6%; }
  .acc-container .acc-star-ele--01 {
    top: 30%;
    right: 15%; }
  .acc-container .acc-coin-ele--03 {
    top: 75%;
    right: 6%; }
  .acc-container .acc-area {
    width: 0; }
  .acc-container .acc-flower-wrap {
    top: 45%; } }

@media screen and (max-width: 1440px) {
  .acc-container .acc-devilng {
    right: 3%; }
  .acc-container .acc-area--top {
    display: none; }
  .acc-container .acc-poporing {
    top: 19%;
    left: 5%; } }

@media screen and (max-width: 1366px) {
  .acc-container .acc-devilng {
    right: 4%; }
  .acc-container .acc-area--center {
    top: 33%;
    left: 3%; }
  .acc-container .acc-poporing {
    left: 4%; }
  .acc-container .acc-coin-ele--02 {
    right: 9%; } }

@media screen and (max-width: 1280px) {
  .acc-container .acc-poporing {
    left: 2%; } }

@media screen and (max-width: 1170px) {
  .acc-container .acc-coin-ele--03 {
    right: 2%; }
  .acc-container .acc-area--center {
    top: 29%; } }

@media screen and (max-width: 1024px) {
  .acc-container .acc-bottom {
    background-size: 60%;
    background-position: left bottom; }
    .acc-container .acc-bottom:after {
      background-size: 60%;
      background-position: right bottom; }
  .acc-container .acc-flower-wrap {
    display: none; }
  .acc-container .acc-area--center {
    display: none; }
  .acc-container .acc-poporing {
    width: 10%;
    top: 17%;
    left: 4%; }
  .acc-container .acc-coin-ele--01 {
    background-size: 65%;
    top: 43%;
    left: -1%; }
  .acc-container .acc-coin-ele--03 {
    background-size: 65%;
    top: 67%;
    right: 1%; } }

@media screen and (max-width: 992px) {
  .acc-container .acc-devilng {
    display: none; }
  .acc-container .acc-star-ele--01 {
    right: 3%; }
  .acc-container .acc-bottle {
    max-width: 146px;
    width: 9%;
    bottom: 0;
    z-index: 2; }
  .acc-container .acc-poporing {
    left: 1%; } }

@media screen and (max-width: 768px) {
  .acc-container .acc-poporing {
    display: none; } }

@media screen and (max-width: 680px) {
  .acc-container .acc-coin-ele--01 {
    top: 18%;
    left: -1%; }
  .acc-container .acc-coin-ele--02 {
    top: 20%;
    right: 2%;
    background-size: 60%; } }

@media screen and (max-width: 480px) {
  .acc-container .acc-bottle {
    width: 15%;
    height: 19vw; }
  .acc-container .acc-coin-ele--01 {
    top: 71%;
    left: -2%; }
  .acc-container .acc-coin-ele--02 {
    background-size: 50%;
    right: 88%;
    top: 24%; }
  .acc-container .acc-bottom {
    pointer-events: none;
    z-index: 2;
    background-size: 30%;
    background-position: 0 100%; }
    .acc-container .acc-bottom:after {
      background-size: 35%;
      background-position: 110% 100%; } }