@charset "UTF-8";
/*slick*/
@import url("../js/vendor/jquery-ui-1.12.1.custom/jquery-ui.min.css");
@import url("../js/vendor/jquery-ui-1.12.1.custom/jquery-ui.theme.min.css");
@import url("../js/vendor/plyr/dist/plyr.css");
/*font-size */
/*font-size */
/*transiton */
/*transiton */
/*keyframe */
/*keyframe */
@font-face {
  font-family: 'icoChris';
  src: url("../font/chrisIcon/fonts/icoChris.eot?ixfhyq");
  src: url("../font/chrisIcon/fonts/icoChris.eot?ixfhyq#iefix") format("embedded-opentype"), url("../font/chrisIcon/fonts/icoChris.ttf?ixfhyq") format("truetype"), url("../font/chrisIcon/fonts/icoChris.woff?ixfhyq") format("woff"), url("../font/chrisIcon/fonts/icoChris.svg?ixfhyq#icoChris") format("svg");
  font-weight: normal;
  font-style: normal; }

[class^="icon-chris"], [class*=" icon-chris"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icoChris' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-chrisline:before {
  content: "\ee868"; }

.icon-chrisshare:before {
  content: "\ee899"; }

.icon-chrismail:before {
  content: "\ee877"; }

.icon-chrisheart:before {
  content: "\ee878"; }

.icon-chrisvideo:before {
  content: "\ee883"; }

.icon-chrisaudio:before {
  content: "\ee884"; }

.icon-chrisintro:before {
  content: "\ee885"; }

.icon-chrisarrow-right:before {
  content: "\ee886"; }

.icon-chrisarrow-left:before {
  content: "\ee887"; }

.icon-chrisarrow-down:before {
  content: "\ee888"; }

.icon-chrisarrow-up:before {
  content: "\ee889"; }

.icon-chriscloseUp:before {
  content: "\ee896"; }

.icon-chriscross:before {
  content: "\ee897"; }

.icon-chrisagree:before {
  content: "\ee898"; }

.icon-chriskeyboard_arrow_up:before {
  content: "\ee900"; }

.icon-chriskeyboard_arrow_right:before {
  content: "\ee901"; }

.icon-chriskeyboard_arrow_left:before {
  content: "\ee902"; }

.icon-chriskeyboard_arrow_down:before {
  content: "\ee903"; }

.icon-chrismacRight:before {
  content: "\ee890"; }

.icon-chrismacLeft:before {
  content: "\ee891"; }

.icon-christriangle-up:before {
  content: "\ee892"; }

.icon-christriangle-right:before {
  content: "\ee893"; }

.icon-christriangle-left:before {
  content: "\ee894"; }

.icon-christriangle-down:before {
  content: "\ee895"; }

.icon-chrisbook_information:before {
  content: "\ee869";
  /* color: #595757 */ }

.icon-chrisminimize:before {
  content: "\ee870";
  color: #fff; }

.icon-chrissound2:before {
  content: "\ee871";
  color: #fff; }

.icon-chrissound1:before {
  content: "\ee872";
  color: #fff; }

.icon-chrisdownload:before {
  content: "\ee873"; }

.icon-chrispeople:before {
  content: "\ee874"; }

.icon-chrissphere:before {
  content: "\ee875"; }

.icon-christwitter:before {
  content: "\ee876"; }

.icon-chrisvideo_white:before {
  content: "\ee879";
  color: #fff; }

.icon-chrisaudio_white:before {
  content: "\ee880";
  color: #fff; }

.icon-chrispause:before {
  content: "\ee881"; }

.icon-chrisplay:before {
  content: "\ee882"; }

.cgAnimate {
  background-color: #fff;
  position: relative;
  z-index: 0; }

.cgBack {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  .cgBack .icon {
    max-width: 90%; }

.cgBack.wddEndBg {
  background-color: rgba(232, 52, 52, 0);
  z-index: 99;
  opacity: 0; }
  .cgBack.wddEndBg.showUp {
    background-color: #e83434;
    opacity: 1;
    -webkit-transition: background-color .7s ease, opacity .7s ease;
    -o-transition: background-color .7s ease, opacity .7s ease;
    transition: background-color .7s ease, opacity .7s ease; }
    .cgBack.wddEndBg.showUp .icon {
      opacity: 1;
      -webkit-transition: opacity .7s ease;
      -o-transition: opacity .7s ease;
      transition: opacity .7s ease; }
  .cgBack.wddEndBg .icon {
    opacity: 0; }

.cgBack.wddLoad {
  background-color: #e83434;
  z-index: 99;
  opacity: 1; }
  .cgBack.wddLoad.fadeOut {
    background-color: rgba(232, 52, 52, 0);
    opacity: 0;
    -webkit-transition: background-color .7s ease .1s, opacity .7s ease .1s;
    -o-transition: background-color .7s ease .1s, opacity .7s ease .1s;
    transition: background-color .7s ease .1s, opacity .7s ease .1s; }
    .cgBack.wddLoad.fadeOut .icon {
      opacity: 0;
      -webkit-transition: opacity .7s ease .1s;
      -o-transition: opacity .7s ease .1s;
      transition: opacity .7s ease .1s; }
  .cgBack.wddLoad.cgB {
    display: none; }
  .cgBack.wddLoad .icon {
    max-width: 90%; }

.cgBack.cgB.wddEndBg {
  background-color: rgba(255, 255, 255, 0); }
  .cgBack.cgB.wddEndBg.showUp {
    background-color: white;
    -webkit-transition: background-color .9s ease;
    -o-transition: background-color .9s ease;
    transition: background-color .9s ease; }

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

a {
  display: block; }

body {
  width: 100%;
  overflow-x: hidden;
  position: relative;
  -webkit-animation: none;
  animation: none; }

@-webkit-keyframes large {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes large {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

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

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

@-webkit-keyframes yoyoball {
  0% {
    -webkit-transform: translateX(-110%);
    transform: translateX(-110%); }
  40% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  60% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  100% {
    -webkit-transform: translateX(110%);
    transform: translateX(110%); } }

@keyframes yoyoball {
  0% {
    -webkit-transform: translateX(-110%);
    transform: translateX(-110%); }
  40% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  60% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  100% {
    -webkit-transform: translateX(110%);
    transform: translateX(110%); } }

@-webkit-keyframes momoball {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%); }
  40% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  60% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); } }

@keyframes momoball {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%); }
  40% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  60% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); } }

@-webkit-keyframes gogoball {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); }
  40% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%); }
  60% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%); }
  100% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%); } }

@keyframes gogoball {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); }
  40% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%); }
  60% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%); }
  100% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%); } }

@-webkit-keyframes nonoball {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%); }
  40% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%); }
  60% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%); }
  100% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); } }

@keyframes nonoball {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%); }
  40% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%); }
  60% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%); }
  100% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); } }

@-webkit-keyframes equalizer {
  0% {
    height: 10px; }
  10% {
    height: 12px; }
  20% {
    height: 15px; }
  30% {
    height: 18px; }
  40% {
    height: 22px; }
  50% {
    height: 25px; }
  60% {
    height: 22px; }
  70% {
    height: 18px; }
  80% {
    height: 15px; }
  90% {
    height: 12px; }
  100% {
    height: 10px; } }

@keyframes equalizer {
  0% {
    height: 10px; }
  10% {
    height: 12px; }
  20% {
    height: 15px; }
  30% {
    height: 18px; }
  40% {
    height: 22px; }
  50% {
    height: 25px; }
  60% {
    height: 22px; }
  70% {
    height: 18px; }
  80% {
    height: 15px; }
  90% {
    height: 12px; }
  100% {
    height: 10px; } }

/*mocaSNav*/
@-webkit-keyframes myMove {
  0% {
    top: -70px; }
  100% {
    top: 70px; } }
@keyframes myMove {
  0% {
    top: -70px; }
  100% {
    top: 70px; } }

@media (max-width: 1400px) {
  @-webkit-keyframes myMove {
    0% {
      top: -50px; }
    100% {
      top: 50px; } }
  @keyframes myMove {
    0% {
      top: -50px; }
    100% {
      top: 50px; } } }

.fakeArrow_m {
  padding-top: 20px; }
  .fakeArrow_m.black span {
    border-right: 1px #000 solid;
    border-bottom: 1px #000 solid; }
  .fakeArrow_m div {
    position: relative;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg); }
  .fakeArrow_m span {
    width: 15px;
    height: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-right: 1px #fff solid;
    border-bottom: 1px #fff solid; }

.mocaSNav {
  color: #aaa;
  background-color: #f4f4f4;
  height: 90px;
  margin: 0 0 100px 0;
  padding: 0 70px;
  position: relative; }
  .mocaSNav .secBox {
    height: 90px;
    width: 100%;
    background-color: #f4f4f4;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    .mocaSNav .secBox.fixed {
      position: fixed;
      top: -70px;
      left: 0;
      z-index: 3;
      -webkit-animation: myMove 1000ms both;
      animation: myMove 1000ms both; }
  .mocaSNav .titleArea {
    font-family: 'FuturaPT-Heavy','微軟正黑體';
    font-weight: 900;
    color: #000;
    position: absolute;
    left: 70px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); }
  .mocaSNav .scrollFrame {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 60%;
    height: auto;
    margin: 0 auto;
    position: relative; }
    .mocaSNav .scrollFrame.ps--active-x {
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start; }
  @media (max-width: 1023px) {
    .mocaSNav.fix {
      padding-top: 106px; } }
  .mocaSNav .navBar {
    font-size: 15px;
    font-size: 0.9375rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    margin: 0 auto; }
    .mocaSNav .navBar .link {
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      word-break: keep-all;
      padding: 15px 0; }
      @media (min-width: 768px) {
        .mocaSNav .navBar .link:hover .text {
          color: #000;
          font-weight: 900; } }
      .mocaSNav .navBar .link:after {
        content: '';
        display: block;
        background-color: #aaaaaa;
        width: 1px;
        height: 18px; }
      .mocaSNav .navBar .link:last-child:after {
        display: none; }
      .mocaSNav .navBar .link.now {
        color: #000;
        font-weight: bold; }
      .mocaSNav .navBar .link .text {
        padding: 0 25px;
        -webkit-transition: color .7s ease;
        -o-transition: color .7s ease;
        transition: color .7s ease;
        white-space: nowrap; }
  .mocaSNav .searchArea {
    cursor: pointer;
    font-size: 16px;
    font-size: 1rem;
    font-family: 'FuturaPT-Medium','微軟正黑體';
    position: absolute;
    top: 50%;
    right: 225px;
    z-index: 1;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    .mocaSNav .searchArea .icon {
      margin-right: 10px; }
  .mocaSNav .ps__rail-x, .mocaSNav .ps__thumb-x {
    max-height: 3px;
    opacity: 1; }
    .mocaSNav .ps__rail-x:hover, .mocaSNav .ps__thumb-x:hover {
      height: 3px; }
  .mocaSNav .searchBtn {
    color: #9a9a9a;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%;
    padding: 10px 0; }
    .mocaSNav .searchBtn .box {
      cursor: pointer;
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-transition: color .5s ease;
      -o-transition: color .5s ease;
      transition: color .5s ease; }
      .mocaSNav .searchBtn .box:hover {
        color: #000; }
    .mocaSNav .searchBtn .icon {
      margin-left: 10px; }
  @media (max-width: 1400px) {
    .mocaSNav .secBox.fixed {
      top: -50px; } }
  @media (max-width: 1200px) {
    .mocaSNav .scrollFrame {
      width: 45%; } }
  @media (max-width: 1023px) {
    .mocaSNav {
      height: auto; }
      .mocaSNav .secBox {
        height: auto;
        padding: 15px 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; }
      .mocaSNav .titleArea {
        position: relative;
        width: 100%;
        left: 0;
        top: 0;
        -webkit-transform: inherit;
        -ms-transform: inherit;
        transform: inherit;
        text-align: center; }
      .mocaSNav .scrollFrame {
        width: 100%;
        max-height: 52px; }
      .mocaSNav .searchArea {
        position: relative;
        left: 0;
        top: 0;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none; }
        .mocaSNav .searchArea .icon {
          margin: 0;
          padding: 10px; }
        .mocaSNav .searchArea .text {
          display: none; } }
  @media (max-width: 767px) {
    .mocaSNav {
      margin: 0 0 60px 0;
      padding: 0; }
      .mocaSNav .secBox {
        padding: 15px 20px 0 20px; }
      .mocaSNav .navBar .link:first-child .text {
        padding: 0 15px 0 0; }
      .mocaSNav .navBar .link .text {
        padding: 0 15px; } }

/*mocaSNav*/
/*mocaCtitle*/
.mocaCtitle {
  font-size: 36px;
  font-size: 2.25rem;
  font-family: 'FuturaPT-Heavy','微軟正黑體'; }

.mocaCsubTitle {
  font-size: 20px;
  font-size: 1.25rem;
  font-family: 'FuturaPT-Heavy','微軟正黑體'; }

/*mocaCtitle*/
/*mocaSBanner*/
.mocaSBanner {
  margin: 0;
  height: 500px;
  position: relative; }
  .mocaSBanner .bg {
    background-color: #d8d8d8;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%; }
  .mocaSBanner .titleSec {
    color: #fff;
    text-align: center;
    width: 100%;
    padding: 0 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: none;
    -webkit-animation: 1s fadeIn forwards;
    animation: 1s fadeIn forwards; }
    .mocaSBanner .titleSec .title {
      font-size: 48px;
      font-size: 3rem;
      font-family: 'FuturaPT-Heavy','微軟正黑體';
      line-height: 1;
      margin: 0 0 20px 0; }
    .mocaSBanner .titleSec .subTitle {
      font-size: 36px;
      font-size: 2.25rem;
      line-height: 1.1;
      font-family: 'FuturaPT-Heavy','微軟正黑體';
      font-weight: 900; }
  @media (max-width: 1200px) {
    .mocaSBanner {
      margin: 30px 0 0 0; } }
  @media (max-width: 767px) {
    .mocaSBanner {
      margin: 0; }
      .mocaSBanner .titleSec {
        display: block; } }

/*mocaTitleSec*/
#visit .mocaPageBody .category {
  opacity: 0; }

#visit .mocaPageBody.show .category {
  opacity: 1;
  -webkit-transition: opacity 1.5s ease .3s;
  -o-transition: opacity 1.5s ease .3s;
  transition: opacity 1.5s ease .3s; }

.mocaTitleSec {
  text-align: center;
  font-family: 'FuturaPT-Heavy','微軟正黑體';
  margin: 0 0 85px 0;
  padding: 0 5%; }
  .mocaTitleSec .title {
    font-size: 36px;
    font-size: 2.25rem;
    line-height: 1.5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
    .mocaTitleSec .title strong {
      font-size: 34px;
      font-size: 2.125rem;
      padding: 0 2.5px; }
    .mocaTitleSec .title span {
      padding: 0 2.5px; }
  .mocaTitleSec .subTitle {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.5;
    padding: 5px 0 0 0; }
  @media (max-width: 767px) {
    .mocaTitleSec {
      margin: 0 0 60px 0; }
      .mocaTitleSec .title {
        font-size: 26px;
        font-size: 1.625rem; }
        .mocaTitleSec .title strong {
          font-size: 24px;
          font-size: 1.5rem; }
      .mocaTitleSec .subTitle {
        font-size: 16px;
        font-size: 1rem; } }

/*btnStyle*/
button {
  font: inherit;
  background-color: unset;
  border: none; }

.btnStyle {
  cursor: pointer;
  font-size: 14px;
  font-size: 0.875rem;
  font-family: 'FuturaPT-Heavy','微軟正黑體';
  font-weight: 900;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  .btnStyle:hover .btn {
    color: #fff;
    background-color: #b8b8b8;
    border-color: #b8b8b8; }
  .btnStyle .btn {
    border: solid 2px #000;
    font-weight: inherit;
    width: 135px;
    height: 35px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: color .5s ease, background-color .5s ease, border-color .5s ease;
    -o-transition: color .5s ease, background-color .5s ease, border-color .5s ease;
    transition: color .5s ease, background-color .5s ease, border-color .5s ease; }
    .btnStyle .btn:hover {
      color: #fff;
      background-color: #000;
      border-color: #000; }
  .btnStyle .w50 {
    width: 50%; }
  .btnStyle .styleA {
    color: #fff;
    background-color: #000; }
  .btnStyle .styleB {
    color: #000;
    background-color: #fff; }
  .btnStyle .styleG {
    color: #c63434;
    background-color: #e5e5e5;
    border-color: #e5e5e5; }
  .btnStyle .styleR {
    color: #fff;
    background-color: #c63434;
    border-color: #c63434; }

/*agreeBtnArea*/
.agreeBtnArea {
  text-align: center;
  width: 70%;
  margin: 0 auto;
  padding: 22px 0 0 0; }
  .agreeBtnArea .agree {
    margin: 0 0 35px 0; }
    .agreeBtnArea .agree .text {
      font-size: 14px;
      font-size: 0.875rem;
      margin: 0 0 12px 0; }
    .agreeBtnArea .agree .icon {
      cursor: pointer; }
    .agreeBtnArea .agree .agreeBtn {
      color: #ff0000;
      background-color: #fff;
      border-radius: 50%;
      border: solid 2px #ff0000;
      width: 33px;
      height: 33px;
      margin: 0 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-transition: color .7s ease, background-color .7s ease;
      -o-transition: color .7s ease, background-color .7s ease;
      transition: color .7s ease, background-color .7s ease; }
      .agreeBtnArea .agree .agreeBtn:hover {
        color: #fff;
        border-color: #ff0000;
        background-color: #ff0000; }
      .agreeBtnArea .agree .agreeBtn.confirm {
        color: #fff;
        border-color: #ff0000;
        background-color: #ff0000; }
  .agreeBtnArea .btn {
    height: 40px; }
  @media (max-width: 767px) {
    .agreeBtnArea {
      width: 100%; } }

/*backTopBtn*/
.backTopBtn {
  cursor: pointer;
  font-size: 16px;
  font-size: 1rem;
  border-radius: 50%;
  border: solid 2px #000;
  width: 38px;
  height: 38px;
  margin: 50px auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  @media (max-width: 600px) {
    .backTopBtn {
      margin: 50px auto 100px; } }
  .backTopBtn .icon {
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg); }

/*wddCross*/
.wddCross {
  position: relative;
  width: 45px;
  height: 45px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  .wddCross:before, .wddCross:after {
    content: '';
    display: block;
    background-color: #656565;
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    top: 50%; }
  .wddCross:before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg); }
  .wddCross:after {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg); }

/*hide_lightbox*/
.discover .hide_lightbox, .visit .hide_lightbox {
  overflow-y: scroll; }

.hide_lightbox {
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100vw;
  height: 100vh; }
  .hide_lightbox .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; }

/*hide_lightbox*/
/*hideBagType*/
.hideBagType {
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  visibility: hidden;
  width: 100vw;
  height: 100vh; }
  .hideBagType.open {
    z-index: 10;
    visibility: visible; }
    .hideBagType.open .bg {
      width: 100%;
      -webkit-transition: width 0.8s ease;
      -o-transition: width 0.8s ease;
      transition: width 0.8s ease; }
    .hideBagType.open .titleInfoBox:after {
      width: 80%;
      -webkit-transition: width .8s ease .4s;
      -o-transition: width .8s ease .4s;
      transition: width .8s ease .4s; }
    .hideBagType.open .titleInfoBox .title {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1s ease .6s;
      -o-transition: opacity 1s ease .6s;
      transition: opacity 1s ease .6s; }
    .hideBagType.open .titleInfoBox .subTitle {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1s ease .8s;
      -o-transition: opacity 1s ease .8s;
      transition: opacity 1s ease .8s; }
    .hideBagType.open .textInfoBox {
      opacity: 1;
      -webkit-transition: opacity 1s ease .8s;
      -o-transition: opacity 1s ease .8s;
      transition: opacity 1s ease .8s; }
    .hideBagType.open .btnStyle {
      opacity: 1;
      -webkit-transition: opacity 1s ease 1s;
      -o-transition: opacity 1s ease 1s;
      transition: opacity 1s ease 1s; }
  .hideBagType.close .bg {
    width: 0;
    -webkit-transition: width 0.5s ease .4s;
    -o-transition: width 0.5s ease .4s;
    transition: width 0.5s ease .4s; }
  .hideBagType .bg {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 0;
    width: 0;
    height: 100%;
    min-height: 100vh;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%); }
  .hideBagType .for_scroll {
    position: relative;
    z-index: 1; }
  .hideBagType .container {
    margin: 0 auto;
    position: relative; }
  .hideBagType .titleInfoBox {
    font-weight: 900;
    font-family: 'FuturaPT-Heavy','微軟正黑體';
    text-align: center;
    padding: 95px 0 35px 0;
    position: relative; }
    .hideBagType .titleInfoBox:after {
      content: '';
      display: block;
      background-color: #e5e5e5;
      width: 0%;
      height: 6px;
      position: absolute;
      left: 50%;
      bottom: 0;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%); }
    .hideBagType .titleInfoBox .title {
      font-size: 36px;
      font-size: 2.25rem;
      opacity: 0; }
    .hideBagType .titleInfoBox .subTitle {
      font-size: 24px;
      font-size: 1.5rem;
      opacity: 0; }
  .hideBagType .textInfoBox {
    padding: 50px 0 60px 0;
    text-align: center;
    opacity: 0; }
    .hideBagType .textInfoBox .text {
      font-size: 16px;
      font-size: 1rem;
      padding: 0 0 15px 0; }
    .hideBagType .textInfoBox .name {
      font-size: 18px;
      font-size: 1.125rem;
      font-weight: 900; }
  .hideBagType .typeInfoBox {
    width: 100%;
    max-width: 430px;
    margin: 0 auto 85px auto; }
  .hideBagType .btnStyle {
    opacity: 0; }
    .hideBagType .btnStyle:hover .btn {
      color: #fff;
      background-color: #b8b8b8;
      border-color: #b8b8b8; }
    .hideBagType .btnStyle .btn {
      width: 100%;
      height: 50px; }
      .hideBagType .btnStyle .btn:hover {
        color: #fff;
        background-color: #000;
        border-color: #000; }
    .hideBagType .btnStyle .styleG {
      color: #fff;
      background-color: #333;
      border-color: #333; }

/*hideBagType*/
.ufoBallBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.ufoBall {
  font-size: 14px;
  font-size: 0.875rem;
  cursor: pointer;
  letter-spacing: initial;
  color: #fff;
  background-color: #000;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-transition: background-color .5s ease;
  -o-transition: background-color .5s ease;
  transition: background-color .5s ease; }
  .ufoBall:hover, .ufoBall.gray:hover {
    background-color: #e83434; }
  .ufoBall:after {
    content: '';
    display: block;
    border: dashed 2px #fff;
    border-radius: 50%;
    width: 85px;
    height: 85px;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
  .ufoBall.gray {
    background-color: #7d7d7d; }

.chrisAgreeBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  .chrisAgreeBox.agree .icon {
    color: #fff;
    background-color: #ff0000; }
  .chrisAgreeBox .icon {
    font-size: 12px;
    font-size: 0.75rem;
    cursor: pointer;
    color: #ff0000;
    border-radius: 50%;
    border: solid 2px #ff0000;
    width: 26px;
    height: 26px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: color .5s ease, background-color .5s ease;
    -o-transition: color .5s ease, background-color .5s ease;
    transition: color .5s ease, background-color .5s ease; }
    .chrisAgreeBox .icon:hover {
      color: #fff;
      background-color: #ff0000; }
  .chrisAgreeBox .text {
    font-size: 15px;
    font-size: 0.9375rem;
    font-weight: 900;
    padding: 0 0 0 10px; }

/*chrisSelect*/
.chrisSelect {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative; }
  .chrisSelect.open .dropShow .icon {
    -webkit-transform: rotateX(150deg);
    transform: rotateX(150deg); }
  .chrisSelect .dropShow {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
  .chrisSelect .dropList {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 1;
    border: solid 2px #000;
    width: 100%;
    max-height: 300px;
    overflow: hidden; }
    .chrisSelect .dropList .list {
      cursor: pointer;
      color: #000;
      background-color: #fff;
      border-top: solid 2px #000; }
      .chrisSelect .dropList .list:hover {
        color: #fff;
        background-color: #e83434; }
      .chrisSelect .dropList .list:first-child {
        border-top: none; }
      .chrisSelect .dropList .list.notAllow {
        color: #ccc; }
        .chrisSelect .dropList .list.notAllow:hover {
          color: #ccc;
          background-color: #fff; }
      .chrisSelect .dropList .list .character {
        width: 100%;
        padding: 15px 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center; }
  .chrisSelect .mCSB_container {
    margin: 0; }
  .chrisSelect .mCSB_scrollTools {
    width: 4px; }
    .chrisSelect .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
      background-color: #000; }
    .chrisSelect .mCSB_scrollTools .mCSB_draggerRail {
      opacity: 0; }

/*chrisSelect*/
/*chrisCloseBtn*/
.chrisCloseBtn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  .chrisCloseBtn:hover .iconBox:before {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg); }
  .chrisCloseBtn:hover .iconBox:after {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg); }
  .chrisCloseBtn .text {
    font-size: 14px;
    font-size: 0.875rem;
    font-family: 'FuturaPT-Light','微軟正黑體'; }
  .chrisCloseBtn .iconBox {
    position: relative; }
    .chrisCloseBtn .iconBox:before, .chrisCloseBtn .iconBox:after {
      content: '';
      display: block;
      background-color: #9a9a9a;
      width: 35px;
      height: 1px;
      margin-left: 12px;
      -webkit-transition: -webkit-transform .5s ease;
      transition: -webkit-transform .5s ease;
      -o-transition: transform .5s ease;
      transition: transform .5s ease;
      transition: transform .5s ease, -webkit-transform .5s ease; }
    .chrisCloseBtn .iconBox:before {
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg); }
    .chrisCloseBtn .iconBox:after {
      margin-top: -1px;
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg); }

/*chrisCloseBtn*/
/*chVideobox*/
.chVideobox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  .chVideobox.open {
    z-index: 10;
    opacity: 1;
    -webkit-transition: opacity .4s ease;
    -o-transition: opacity .4s ease;
    transition: opacity .4s ease; }
    .chVideobox.open iframe {
      opacity: 1;
      -webkit-transition: opacity 1s ease .5s;
      -o-transition: opacity 1s ease .5s;
      transition: opacity 1s ease .5s; }
    .chVideobox.open .chrisCloseBtn {
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: -webkit-transform 1s ease .4s;
      transition: -webkit-transform 1s ease .4s;
      -o-transition: transform 1s ease .4s;
      transition: transform 1s ease .4s;
      transition: transform 1s ease .4s, -webkit-transform 1s ease .4s; }
  .chVideobox.close {
    opacity: 0;
    -webkit-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease; }
    .chVideobox.close iframe {
      opacity: 0;
      -webkit-transition: opacity .5s ease;
      -o-transition: opacity .5s ease;
      transition: opacity .5s ease; }
    .chVideobox.close .chrisCloseBtn {
      -webkit-transform: translateY(-100px);
      -ms-transform: translateY(-100px);
      transform: translateY(-100px);
      -webkit-transition: -webkit-transform .5s ease;
      transition: -webkit-transform .5s ease;
      -o-transition: transform .5s ease;
      transition: transform .5s ease;
      transition: transform .5s ease, -webkit-transform .5s ease; }
  .chVideobox .bg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%; }
  .chVideobox .chrisCloseBtn {
    cursor: pointer;
    width: 50px;
    height: 50px;
    background-color: #e83434;
    position: absolute;
    right: calc(5% - 25px);
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    transform: translateY(-100px); }
    .chVideobox .chrisCloseBtn .iconBox:before, .chVideobox .chrisCloseBtn .iconBox:after {
      background-color: #fff;
      width: 25px;
      height: 2px;
      margin: 0; }
    .chVideobox .chrisCloseBtn .iconBox:after {
      margin-top: -2px; }
  .chVideobox iframe {
    width: 80%;
    height: 100%;
    opacity: 0; }
  @media (max-width: 1023px) {
    .chVideobox iframe {
      width: 80vw;
      height: calc(80vw * 0.5625); } }
  @media (max-width: 1023px) {
    .chVideobox iframe {
      width: 100vw;
      height: calc(100vw * 0.5625); } }

/*chVideobox*/
.waveBox {
  min-width: 66px;
  height: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end; }

.waveUp {
  -webkit-transition: all 0s;
  -o-transition: all 0s;
  transition: all 0s;
  -webkit-animation: equalizer 2200ms infinite;
  animation: equalizer 2200ms infinite;
  background-color: #000;
  width: 2px;
  height: 10px;
  margin-right: 6px;
  display: block; }
  .waveUp:last-child {
    margin-right: 0; }
  .waveUp.d100 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s; }
  .waveUp.d66 {
    -webkit-animation-delay: 0.66s;
    animation-delay: 0.66s; }
  .waveUp.d33 {
    -webkit-animation-delay: 0.33s;
    animation-delay: 0.33s; }

.mCSB_inside > .mCSB_container {
  margin: 0; }

#mCSB_1_scrollbar_vertical,
#mCSB_2_scrollbar_vertical {
  opacity: 0; }

/*custom radio button*/
/* Customize the label (the container) */
.customRadio {
  display: block;
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

/* Hide the browser's default radio button */
.customRadio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0; }

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%; }

/* On mouse-over, add a grey background color */
.customRadio:hover input ~ .checkmark {
  background-color: #ccc; }

/* When the radio button is checked, add a blue background */
.customRadio input:checked ~ .checkmark {
  background-color: #2196F3; }

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none; }

/* Show the indicator (dot/circle) when checked */
.customRadio input:checked ~ .checkmark:after {
  display: block; }

/* Style the indicator (dot/circle) */
.customRadio .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white; }

header {
  height: 160px; }
  @media (max-width: 1400px) {
    header {
      height: 140px; } }
  @media (max-width: 1160px) {
    header {
      height: 90px; } }
  header .hdContent .logo {
    z-index: 1; }
    header .hdContent .logo .title {
      width: 0;
      height: 0;
      opacity: 0;
      position: relative;
      left: 150vw;
      top: 150vh; }

header .hdContent .buttons .openExhibit.close p:nth-child(2) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

header .hdContent .exhibitLibox .open .date .box:after {
  left: calc(50% - 10px); }

header .hdContent .buttons .openExhibit.close {
  cursor: auto; }

header .hdContent .exhibitLibox .date .when {
  font-size: 15px;
  font-size: 0.9375rem; }
  header .hdContent .exhibitLibox .date .when span {
    margin-right: 6px; }
    header .hdContent .exhibitLibox .date .when span:last-child {
      margin: 0; }

@media (max-width: 1024px) {
  header .hdContent .exhibitLibox .open .date .box:after {
    left: 50%; } }

@media (max-width: 767px) {
  header {
    height: 100px; }
  header .hdContent .exhibitLibox .date .when {
    text-align: center; } }

.mocaMenu {
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  visibility: hidden;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  -webkit-overflow-scrolling: touch; }
  .mocaMenu.open {
    z-index: 10;
    visibility: visible; }
    .mocaMenu.open .bg {
      background-color: rgba(0, 0, 0, 0.5);
      -webkit-transition: background-color 1s ease;
      -o-transition: background-color 1s ease;
      transition: background-color 1s ease; }
    .mocaMenu.open .allBox {
      -webkit-transform: translateX(0%);
      -ms-transform: translateX(0%);
      transform: translateX(0%);
      -webkit-transition: -webkit-transform .4s ease .3s;
      transition: -webkit-transform .4s ease .3s;
      -o-transition: transform .4s ease .3s;
      transition: transform .4s ease .3s;
      transition: transform .4s ease .3s, -webkit-transform .4s ease .3s; }
      @media (max-width: 1024px) {
        .mocaMenu.open .allBox {
          -webkit-transition: -webkit-transform .4s ease;
          transition: -webkit-transform .4s ease;
          -o-transition: transform .4s ease;
          transition: transform .4s ease;
          transition: transform .4s ease, -webkit-transform .4s ease; } }
      .mocaMenu.open .allBox .chrisCloseBtn {
        -webkit-transform: translateY(0%);
        -ms-transform: translateY(0%);
        transform: translateY(0%);
        -webkit-transition: -webkit-transform 1s ease .6s;
        transition: -webkit-transform 1s ease .6s;
        -o-transition: transform 1s ease .6s;
        transition: transform 1s ease .6s;
        transition: transform 1s ease .6s, -webkit-transform 1s ease .6s; }
        @media (max-width: 1024px) {
          .mocaMenu.open .allBox .chrisCloseBtn {
            -webkit-transition: -webkit-transform 1s ease .2s;
            transition: -webkit-transform 1s ease .2s;
            -o-transition: transform 1s ease .2s;
            transition: transform 1s ease .2s;
            transition: transform 1s ease .2s, -webkit-transform 1s ease .2s; } }
    .mocaMenu.open .esArea {
      opacity: 1;
      -webkit-transition: opacity .4s ease .7s;
      -o-transition: opacity .4s ease .7s;
      transition: opacity .4s ease .7s; }
  .mocaMenu.close .allBox {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: -webkit-transform .4s ease .4s;
    transition: -webkit-transform .4s ease .4s;
    -o-transition: transform .4s ease .4s;
    transition: transform .4s ease .4s;
    transition: transform .4s ease .4s, -webkit-transform .4s ease .4s; }
    .mocaMenu.close .allBox .chrisCloseBtn {
      -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      transform: translateY(-100%);
      -webkit-transition: -webkit-transform .4s ease;
      transition: -webkit-transform .4s ease;
      -o-transition: transform .4s ease;
      transition: transform .4s ease;
      transition: transform .4s ease, -webkit-transform .4s ease; }
  .mocaMenu.close .logoImg {
    opacity: 0;
    -webkit-transition: opacity .4s ease;
    -o-transition: opacity .4s ease;
    transition: opacity .4s ease; }
  .mocaMenu.close .menuList {
    opacity: 0;
    -webkit-transition: opacity .4s ease;
    -o-transition: opacity .4s ease;
    transition: opacity .4s ease; }
  .mocaMenu.close .complexSec {
    opacity: 0;
    -webkit-transition: opacity .4s ease;
    -o-transition: opacity .4s ease;
    transition: opacity .4s ease; }
  .mocaMenu.close .knife {
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: -webkit-transform .4s ease;
    transition: -webkit-transform .4s ease;
    -o-transition: transform .4s ease;
    transition: transform .4s ease;
    transition: transform .4s ease, -webkit-transform .4s ease; }
  .mocaMenu.close .logSec {
    opacity: 0;
    -webkit-transition: opacity .4s ease;
    -o-transition: opacity .4s ease;
    transition: opacity .4s ease; }
  .mocaMenu.close .esArea {
    opacity: 0;
    -webkit-transition: opacity .4s ease;
    -o-transition: opacity .4s ease;
    transition: opacity .4s ease; }
  .mocaMenu .mCSB_inside > .mCSB_container {
    margin: 0; }
  .mocaMenu .mCSB_scrollTools {
    opacity: 0 !important; }
  .mocaMenu .bg {
    background-color: rgba(0, 0, 0, 0);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 100%; }
  .mocaMenu .allBox {
    color: #fff;
    background-color: #272727;
    width: 50%;
    min-width: 960px;
    min-height: 100vh;
    margin-left: auto;
    position: relative;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%); }
    .mocaMenu .allBox .chrisCloseBtn {
      cursor: pointer;
      width: 70px;
      height: 70px;
      background-color: #fff;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      position: fixed;
      right: 0;
      top: 0;
      z-index: 1;
      -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      transform: translateY(-100%); }
      .mocaMenu .allBox .chrisCloseBtn .iconBox {
        width: 100%;
        height: 100%; }
        .mocaMenu .allBox .chrisCloseBtn .iconBox:before, .mocaMenu .allBox .chrisCloseBtn .iconBox:after {
          margin: 0;
          position: absolute;
          left: 17.5px;
          top: 50%; }
  .mocaMenu .sword {
    min-height: calc(100vh - 185px);
    padding: 12vh 0 70px 0; }
  .mocaMenu .knife.show .logSec {
    opacity: 1;
    -webkit-transition: opacity 1.5s ease;
    -o-transition: opacity 1.5s ease;
    transition: opacity 1.5s ease; }
  .mocaMenu .knife .logSec {
    opacity: 0; }
  .mocaMenu .esArea {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto 9vh auto;
    opacity: 0; }
    .mocaMenu .esArea .box {
      cursor: pointer;
      color: #aeaeae;
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      padding: 10px 20px;
      -webkit-transition: color .5s ease;
      -o-transition: color .5s ease;
      transition: color .5s ease;
      position: relative; }
      .mocaMenu .esArea .box:last-child:after {
        display: none; }
      .mocaMenu .esArea .box:after {
        content: '';
        display: block;
        background-color: #aeaeae;
        width: 1px;
        height: 16px;
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
      .mocaMenu .esArea .box:hover {
        color: #fff; }
      .mocaMenu .esArea .box .icon {
        margin-right: 10px; }
  .mocaMenu .logoImg {
    width: 90%;
    max-width: 365px;
    margin: 0 auto 25px auto;
    opacity: 0; }
    .mocaMenu .logoImg.show {
      opacity: 1;
      -webkit-transition: opacity 1.2s ease .5s;
      -o-transition: opacity 1.2s ease .5s;
      transition: opacity 1.2s ease .5s; }
  .mocaMenu .menuList {
    font-size: 20px;
    font-size: 1.25rem;
    font-family: 'FuturaPT-Heavy','微軟正黑體';
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 780px;
    margin: 0 auto 8vh auto; }
    .mocaMenu .menuList .link {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      width: 25%;
      line-height: 1.6;
      margin: 0 0 55px 0;
      -webkit-transition: color .5s ease;
      -o-transition: color .5s ease;
      transition: color .5s ease;
      opacity: 0; }
      .mocaMenu .menuList .link.show {
        opacity: 1;
        -webkit-transition: opacity 1.2s ease .5s, color .5s ease;
        -o-transition: opacity 1.2s ease .5s, color .5s ease;
        transition: opacity 1.2s ease .5s, color .5s ease; }
      .mocaMenu .menuList .link:hover {
        color: #e83434; }
      .mocaMenu .menuList .link .en {
        margin: 0 0 3px 0; }
  .mocaMenu .complexSec {
    width: 780px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .mocaMenu .complexSec .lexBox {
      width: 50%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      opacity: 0; }
      .mocaMenu .complexSec .lexBox.show {
        opacity: 1;
        -webkit-transition: opacity 1.2s ease .5s;
        -o-transition: opacity 1.2s ease .5s;
        transition: opacity 1.2s ease .5s; }
      .mocaMenu .complexSec .lexBox .sony {
        padding: 0 17px; }
        .mocaMenu .complexSec .lexBox .sony .htc:hover {
          color: #fff; }
      .mocaMenu .complexSec .lexBox .htc {
        color: #7d7d7d;
        -webkit-transition: color .5s ease;
        -o-transition: color .5s ease;
        transition: color .5s ease; }
        .mocaMenu .complexSec .lexBox .htc span:first-child {
          margin-right: 5px; }
        .mocaMenu .complexSec .lexBox .htc span:last-child {
          margin: 0; }
    .mocaMenu .complexSec .community {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      padding-left: 10px; }
      .mocaMenu .complexSec .community .link {
        color: #7d7d7d;
        padding: 0 12px;
        -webkit-transition: color .5s ease;
        -o-transition: color .5s ease;
        transition: color .5s ease; }
        .mocaMenu .complexSec .community .link:hover {
          color: #fff; }
      .mocaMenu .complexSec .community .text {
        display: none; }
  .mocaMenu .logSec {
    background-color: #e83434;
    height: 185px;
    padding: 65px 0 0 0;
    position: relative; }
    .mocaMenu .logSec .avatar {
      background-color: #272727;
      border-radius: 50%;
      border: solid 5px #fff;
      width: 92px;
      height: 92px;
      margin: 0 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      position: absolute;
      left: 50%;
      top: -46px;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%); }
      .mocaMenu .logSec .avatar.showImg:before {
        opacity: 0; }
      .mocaMenu .logSec .avatar:before {
        content: attr(data-ask);
        display: block;
        font-size: 34px;
        font-size: 2.125rem;
        font-family: '微軟正黑體','Microsoft JhengHei', Arial, sans-serif;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
      .mocaMenu .logSec .avatar .img {
        border-radius: 50%;
        width: 100%;
        height: 100%; }
    .mocaMenu .logSec .logBox {
      opacity: 0;
      visibility: hidden;
      text-align: center;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
      .mocaMenu .logSec .logBox.open {
        opacity: 1;
        visibility: visible;
        position: relative;
        z-index: 0; }
    .mocaMenu .logSec .link {
      font-size: 18px;
      font-size: 1.125rem;
      font-family: 'FuturaPT-Medium','微軟正黑體';
      text-align: center;
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
  .mocaMenu .logicIcon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin: 0 auto;
    padding: 10px; }
    .mocaMenu .logicIcon .icon {
      width: 30px;
      height: 30px;
      margin: 0 auto; }
  @media (max-width: 1400px) {
    .mocaMenu .allBox .chrisCloseBtn {
      width: 50px;
      height: 50px; }
      .mocaMenu .allBox .chrisCloseBtn .iconBox:before, .mocaMenu .allBox .chrisCloseBtn .iconBox:after {
        left: 7.5px; } }
  @media (max-width: 1024px) {
    .mocaMenu .allBox {
      width: 100%;
      min-width: auto; }
    .mocaMenu .menuList {
      width: 90%; }
      .mocaMenu .menuList .link {
        width: 33.33%; }
    .mocaMenu .complexSec {
      width: 90%; } }
  @media (max-width: 767px) {
    .mocaMenu .logoImg {
      width: 80%; }
    .mocaMenu .menuList {
      width: 80%;
      margin: 0 auto; }
      .mocaMenu .menuList .link {
        width: 50%; }
    .mocaMenu .complexSec {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      .mocaMenu .complexSec .lexBox {
        width: 100%;
        margin: 0 0 25px 0; }
    .mocaMenu .logSec {
      height: 230px; } }
  @media (max-width: 560px) {
    .mocaMenu .sword {
      padding: 90px 0 70px 0; }
    .mocaMenu .logoImg {
      margin: 0 auto 55px auto; }
    .mocaMenu .menuList {
      width: 100%;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      .mocaMenu .menuList .link {
        width: auto;
        margin: 0 0 35px 0; }
    .mocaMenu .complexSec .mixB {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
      .mocaMenu .complexSec .mixB .sony {
        margin: 0 0 25px 0; }
        .mocaMenu .complexSec .mixB .sony:last-child {
          margin: 0; } }

footer .informatioin .left .address {
  font-style: normal; }

footer .linkList ul {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start; }

footer .socialMedia .text {
  opacity: 0;
  width: 0;
  height: 0; }

footer .letterInfo {
  font-size: 15px;
  font-size: 0.9375rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  footer .letterInfo .text {
    padding-right: 10px; }
  footer .letterInfo .link {
    font-size: 18px;
    font-size: 1.125rem;
    color: #fff;
    background-color: #e83434;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }

footer .openPrivacy {
  cursor: pointer; }

footer .copyright .text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

footer .copyright .link:hover {
  color: #fff; }

.privacyFakeBox {
  overflow: hidden;
  visibility: hidden;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh; }
  .privacyFakeBox.open {
    z-index: 10;
    visibility: visible; }
    .privacyFakeBox.open .bg {
      width: 100%;
      -webkit-transition: width .6s ease;
      -o-transition: width .6s ease;
      transition: width .6s ease; }
    .privacyFakeBox.open .chrisCloseBtn {
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: -webkit-transform 1.3s ease .9s;
      transition: -webkit-transform 1.3s ease .9s;
      -o-transition: transform 1.3s ease .9s;
      transition: transform 1.3s ease .9s;
      transition: transform 1.3s ease .9s, -webkit-transform 1.3s ease .9s; }
    .privacyFakeBox.open .priTitle {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1s ease .6s, -webkit-transform 1s ease .6s;
      transition: opacity 1s ease .6s, -webkit-transform 1s ease .6s;
      -o-transition: opacity 1s ease .6s, transform 1s ease .6s;
      transition: opacity 1s ease .6s, transform 1s ease .6s;
      transition: opacity 1s ease .6s, transform 1s ease .6s, -webkit-transform 1s ease .6s; }
    .privacyFakeBox.open .priSubTitle {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1s ease .9s, -webkit-transform 1s ease .9s;
      transition: opacity 1s ease .9s, -webkit-transform 1s ease .9s;
      -o-transition: opacity 1s ease .9s, transform 1s ease .9s;
      transition: opacity 1s ease .9s, transform 1s ease .9s;
      transition: opacity 1s ease .9s, transform 1s ease .9s, -webkit-transform 1s ease .9s; }
    .privacyFakeBox.open .goldCross .title {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1s ease .5s, -webkit-transform 1s ease .5s;
      transition: opacity 1s ease .5s, -webkit-transform 1s ease .5s;
      -o-transition: opacity 1s ease .5s, transform 1s ease .5s;
      transition: opacity 1s ease .5s, transform 1s ease .5s;
      transition: opacity 1s ease .5s, transform 1s ease .5s, -webkit-transform 1s ease .5s; }
    .privacyFakeBox.open .goldCross .crossInfo {
      opacity: 1;
      -webkit-transition: opacity 1s ease .9s;
      -o-transition: opacity 1s ease .9s;
      transition: opacity 1s ease .9s; }
    .privacyFakeBox.open .goldCross .crossWave {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1.2s ease 1.3s, -webkit-transform 1.2s ease 1.3s;
      transition: opacity 1.2s ease 1.3s, -webkit-transform 1.2s ease 1.3s;
      -o-transition: opacity 1.2s ease 1.3s, transform 1.2s ease 1.3s;
      transition: opacity 1.2s ease 1.3s, transform 1.2s ease 1.3s;
      transition: opacity 1.2s ease 1.3s, transform 1.2s ease 1.3s, -webkit-transform 1.2s ease 1.3s; }
  .privacyFakeBox.close .bg {
    width: 0%;
    -webkit-transition: width .5s ease .2s;
    -o-transition: width .5s ease .2s;
    transition: width .5s ease .2s; }
  .privacyFakeBox.close .chrisCloseBtn {
    opacity: 0;
    -webkit-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease; }
  .privacyFakeBox.close .containerBox {
    opacity: 0;
    -webkit-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease; }
  .privacyFakeBox .mCSB_inside > .mCSB_container {
    margin: 0; }
  .privacyFakeBox .for_scroll {
    position: relative; }
  .privacyFakeBox .bg {
    background-color: #fff;
    width: 0;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%); }
  .privacyFakeBox .chrisCloseBtn {
    cursor: pointer;
    position: absolute;
    right: 110px;
    top: 50px;
    padding: 20px 0;
    -webkit-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px); }
  .privacyFakeBox .container {
    padding: 110px;
    position: relative; }
  .privacyFakeBox .containerBox {
    max-width: 780px;
    margin: 0 auto; }
  .privacyFakeBox .priTitleBox {
    margin: 0 0 110px 0;
    text-align: center; }
  .privacyFakeBox .priTitle {
    font-size: 36px;
    font-size: 2.25rem;
    font-weight: 900;
    font-family: 'FuturaPT-Heavy','微軟正黑體';
    margin: 0 0 10px 0;
    opacity: 0;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px); }
  .privacyFakeBox .priSubTitle {
    font-size: 18px;
    font-size: 1.125rem;
    opacity: 0;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px); }
  .privacyFakeBox .goldCross {
    margin: 0 0 120px 0; }
    .privacyFakeBox .goldCross.show .title {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1s ease .5s, -webkit-transform 1s ease .5s;
      transition: opacity 1s ease .5s, -webkit-transform 1s ease .5s;
      -o-transition: opacity 1s ease .5s, transform 1s ease .5s;
      transition: opacity 1s ease .5s, transform 1s ease .5s;
      transition: opacity 1s ease .5s, transform 1s ease .5s, -webkit-transform 1s ease .5s; }
    .privacyFakeBox .goldCross.show .crossInfo {
      opacity: 1;
      -webkit-transition: opacity 1s ease .9s;
      -o-transition: opacity 1s ease .9s;
      transition: opacity 1s ease .9s; }
    .privacyFakeBox .goldCross.show .crossWave {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1.2s ease 1.3s, -webkit-transform 1.2s ease 1.3s;
      transition: opacity 1.2s ease 1.3s, -webkit-transform 1.2s ease 1.3s;
      -o-transition: opacity 1.2s ease 1.3s, transform 1.2s ease 1.3s;
      transition: opacity 1.2s ease 1.3s, transform 1.2s ease 1.3s;
      transition: opacity 1.2s ease 1.3s, transform 1.2s ease 1.3s, -webkit-transform 1.2s ease 1.3s; }
    .privacyFakeBox .goldCross:last-child {
      margin: 0; }
    .privacyFakeBox .goldCross .title {
      text-align: center;
      margin: 0 0 18px 0;
      opacity: 0;
      -webkit-transform: translateY(100px);
      -ms-transform: translateY(100px);
      transform: translateY(100px); }
      .privacyFakeBox .goldCross .title .name {
        font-size: 22px;
        font-size: 1.375rem;
        font-weight: 900; }
    .privacyFakeBox .goldCross .crossInfo {
      font-size: 15px;
      font-size: 0.9375rem;
      font-weight: 900;
      margin: 0 0 20px 0;
      opacity: 0; }
  .privacyFakeBox .crossWave {
    border-top: solid 3px #000;
    border-bottom: solid 3px #000;
    opacity: 0;
    -webkit-transform: translateY(150px);
    -ms-transform: translateY(150px);
    transform: translateY(150px); }
    .privacyFakeBox .crossWave .waveTitle {
      font-size: 17px;
      font-size: 1.0625rem;
      font-weight: 900;
      padding: 18px 0; }
    .privacyFakeBox .crossWave .list {
      border-bottom: solid 1px #b5b5b5;
      position: relative; }
      .privacyFakeBox .crossWave .list:last-child {
        border-bottom: none; }
      .privacyFakeBox .crossWave .list.openIt .open {
        opacity: 0; }
      .privacyFakeBox .crossWave .list .bar {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start; }
      .privacyFakeBox .crossWave .list .open {
        font-size: 30px;
        font-size: 1.875rem;
        cursor: pointer;
        padding: 14px 0;
        margin-left: auto; }
      .privacyFakeBox .crossWave .list .close {
        cursor: pointer;
        position: absolute;
        right: 0;
        bottom: 35px;
        padding: 10px 0; }
    .privacyFakeBox .crossWave .content {
      padding: 0 0 30px 0;
      position: relative;
      display: none; }
    .privacyFakeBox .crossWave .conText {
      font-size: 15px;
      font-size: 0.9375rem;
      line-height: 1.7;
      padding: 0 0 18px 0; }
  @media (max-width: 767px) {
    .privacyFakeBox .chrisCloseBtn {
      right: 7%; }
    .privacyFakeBox .container {
      padding: 110px 7%; } }

.searchFakeBox {
  color: #fff;
  overflow: hidden;
  visibility: hidden;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  -ms-input-placeholder-color: #ffd1d1;
  -ms-input-placeholder-font-family: 'FuturaPT-Book', '微軟正黑體'; }
  .searchFakeBox.open {
    z-index: 10;
    visibility: visible; }
    .searchFakeBox.open .bg {
      background-color: rgba(232, 52, 52, 0.95);
      -webkit-transition: background-color .5s ease;
      -o-transition: background-color .5s ease;
      transition: background-color .5s ease; }
    .searchFakeBox.open .srTitleBox {
      opacity: 1;
      -webkit-transition: opacity .5s ease .3s;
      -o-transition: opacity .5s ease .3s;
      transition: opacity .5s ease .3s; }
    .searchFakeBox.open .typeBtnArea {
      opacity: 1;
      -webkit-transition: opacity .5s ease .5s;
      -o-transition: opacity .5s ease .5s;
      transition: opacity .5s ease .5s; }
    .searchFakeBox.open .inputArea {
      opacity: 1;
      -webkit-transition: opacity .5s ease .5s;
      -o-transition: opacity .5s ease .5s;
      transition: opacity .5s ease .5s; }
      .searchFakeBox.open .inputArea:after {
        width: 100%;
        -webkit-transition: width 1s ease .5s;
        -o-transition: width 1s ease .5s;
        transition: width 1s ease .5s; }
    .searchFakeBox.open .searchTip {
      opacity: 1;
      -webkit-transition: opacity .5s ease .5s;
      -o-transition: opacity .5s ease .5s;
      transition: opacity .5s ease .5s; }
    .searchFakeBox.open .hightLightArea .name {
      opacity: 1;
      -webkit-transition: opacity .5s ease .7s;
      -o-transition: opacity .5s ease .7s;
      transition: opacity .5s ease .7s; }
    .searchFakeBox.open .hightLightArea .listFrame {
      opacity: 1;
      -webkit-transition: opacity .5s ease .9s;
      -o-transition: opacity .5s ease .9s;
      transition: opacity .5s ease .9s; }
  .searchFakeBox.close .bg {
    background-color: rgba(232, 52, 52, 0);
    -webkit-transition: background-color .5s ease .2s;
    -o-transition: background-color .5s ease .2s;
    transition: background-color .5s ease .2s; }
  .searchFakeBox.close .srTitleBox {
    opacity: 0;
    -webkit-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease; }
  .searchFakeBox.close .typeBtnArea {
    opacity: 0;
    -webkit-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease; }
  .searchFakeBox.close .inputArea {
    opacity: 0;
    -webkit-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease; }
  .searchFakeBox.close .searchTip {
    opacity: 0;
    -webkit-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease; }
  .searchFakeBox.close .hightLightArea {
    opacity: 0;
    -webkit-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease; }
  .searchFakeBox .mCSB_scrollTools {
    opacity: 0 !important; }
  .searchFakeBox .for_scroll {
    width: 100%;
    position: relative; }
  .searchFakeBox .bg {
    background-color: rgba(232, 52, 52, 0);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0; }
  .searchFakeBox .chrisCloseBtn {
    cursor: pointer;
    width: 34px;
    height: 34px;
    position: fixed;
    right: 38px;
    top: 38px; }
    .searchFakeBox .chrisCloseBtn .iconBox:before, .searchFakeBox .chrisCloseBtn .iconBox:after {
      background-color: #fff;
      margin: 0; }
  .searchFakeBox .container {
    min-height: 100vh;
    position: relative; }
  .searchFakeBox .containerBox {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    padding: 160px 0 0 0; }
  .searchFakeBox .searchTip {
    margin-top: 15px;
    font-size: 12px;
    padding-left: 10px;
    opacity: 0; }
  .searchFakeBox .srTitleBox {
    font-family: 'FuturaPT-Heavy','微軟正黑體';
    text-align: center;
    margin: 0 0 60px 0;
    opacity: 0; }
    .searchFakeBox .srTitleBox .title {
      font-size: 50px;
      font-size: 3.125rem; }
    .searchFakeBox .srTitleBox .subTitle {
      font-size: 30px;
      font-size: 1.875rem; }
  .searchFakeBox .typeBtnArea {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 0 85px 0;
    opacity: 0; }
    .searchFakeBox .typeBtnArea .btn {
      cursor: pointer;
      border-radius: 999px;
      border: solid 1px #fff;
      width: 120px;
      height: 46px;
      margin: 0 10px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      -webkit-transition: color .5s ease;
      -o-transition: color .5s ease;
      transition: color .5s ease; }
      .searchFakeBox .typeBtnArea .btn.choose {
        color: #000;
        background-color: #fff; }
      .searchFakeBox .typeBtnArea .btn:hover {
        color: #000;
        background-color: #fff;
        -webkit-animation-name: a-tilt;
        animation-name: a-tilt;
        -webkit-animation-duration: .4s;
        animation-duration: .4s;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out; }
  .searchFakeBox .inputArea {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 10px;
    opacity: 0; }
    .searchFakeBox .inputArea:after {
      content: '';
      display: block;
      background-color: #fff;
      width: 0%;
      height: 1px;
      position: absolute;
      left: 50%;
      bottom: 0;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%); }
    .searchFakeBox .inputArea input {
      color: #fff;
      background-color: rgba(0, 0, 0, 0);
      border: none;
      width: calc(100% - 40px);
      height: 35px;
      padding: 0 0 15px 0; }
    .searchFakeBox .inputArea .icon {
      cursor: pointer;
      font-size: 16px;
      position: relative;
      display: block;
      width: 40px;
      height: 38px;
      margin: 0 0 15px 0;
      -webkit-transition: -webkit-transform .5s ease;
      transition: -webkit-transform .5s ease;
      -o-transition: transform .5s ease;
      transition: transform .5s ease;
      transition: transform .5s ease, -webkit-transform .5s ease; }
      .searchFakeBox .inputArea .icon:before {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        display: inline-block;
        position: absolute;
        right: -10px;
        top: 50%;
        -webkit-transform: translateY(-50%) rotate(90deg);
        -ms-transform: translateY(-50%) rotate(90deg);
        transform: translateY(-50%) rotate(90deg); }
      .searchFakeBox .inputArea .icon:after {
        content: '';
        display: block;
        background-color: #fff;
        width: 40px;
        height: 1px;
        position: absolute;
        left: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
      .searchFakeBox .inputArea .icon:hover {
        -webkit-transform: translateY(-3px);
        -ms-transform: translateY(-3px);
        transform: translateY(-3px); }
  .searchFakeBox .hightLightArea {
    padding: 70px 10px 100px 10px; }
    .searchFakeBox .hightLightArea .name {
      font-size: 24px;
      font-size: 1.5rem;
      font-family: 'FuturaPT-Heavy','微軟正黑體';
      margin: 0 0 50px 0;
      opacity: 0; }
    .searchFakeBox .hightLightArea .listFrame {
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      opacity: 0; }
      .searchFakeBox .hightLightArea .listFrame .title {
        font-size: 18px;
        font-size: 1.125rem;
        color: #ffd1d1; }
      .searchFakeBox .hightLightArea .listFrame .subTitle {
        font-size: 13px;
        font-size: 0.8125rem;
        color: #ffadad; }
      .searchFakeBox .hightLightArea .listFrame .list {
        margin: 0 0 40px 0;
        -webkit-transition: -webkit-transform .5s ease;
        transition: -webkit-transform .5s ease;
        -o-transition: transform .5s ease;
        transition: transform .5s ease;
        transition: transform .5s ease, -webkit-transform .5s ease; }
        .searchFakeBox .hightLightArea .listFrame .list:last-child {
          margin: 0; }
        .searchFakeBox .hightLightArea .listFrame .list:hover {
          -webkit-transform: translateY(-3px);
          -ms-transform: translateY(-3px);
          transform: translateY(-3px); }
  .searchFakeBox ::-webkit-input-placeholder {
    color: #ffd1d1;
    font-family: 'FuturaPT-Book', '微軟正黑體';
    opacity: 1; }
  .searchFakeBox :-ms-input-placeholder {
    color: #ffd1d1;
    font-family: 'FuturaPT-Book', '微軟正黑體';
    opacity: 1; }
  .searchFakeBox ::-ms-input-placeholder {
    color: #ffd1d1;
    font-family: 'FuturaPT-Book', '微軟正黑體';
    opacity: 1; }
  .searchFakeBox ::placeholder {
    color: #ffd1d1;
    font-family: 'FuturaPT-Book', '微軟正黑體';
    opacity: 1; }
  .searchFakeBox ::-ms-input-placeholder {
    color: #ffd1d1;
    font-family: 'FuturaPT-Book', '微軟正黑體'; }
  @media (max-width: 767px) {
    .searchFakeBox .chrisCloseBtn {
      position: absolute; }
    .searchFakeBox .containerBox {
      width: 87%; }
    .searchFakeBox .srTitleBox .title {
      line-height: 1.2; } }
  @media (max-width: 500px) {
    .searchFakeBox .containerBox {
      padding: 50px 0 0; }
    .searchFakeBox .typeBtnArea {
      margin: 0 0 55px; }
    .searchFakeBox .chrisCloseBtn {
      right: 20px;
      top: 20px; }
    .searchFakeBox .srTitleBox {
      margin: 0 0 30px; }
      .searchFakeBox .srTitleBox .title {
        margin-bottom: 20px;
        font-size: 36px;
        font-size: 2.25rem; }
      .searchFakeBox .srTitleBox .subTitle {
        font-size: 24px;
        font-size: 1.5rem; } }

@-webkit-keyframes a-tilt {
  0%, 100% {
    -webkit-transform: rotate();
    transform: rotate(); }
  40% {
    -webkit-transform: rotate(1.6deg);
    transform: rotate(1.6deg); }
  75% {
    -webkit-transform: rotate(-2.4deg);
    transform: rotate(-2.4deg); } }

@keyframes a-tilt {
  0%, 100% {
    -webkit-transform: rotate();
    transform: rotate(); }
  40% {
    -webkit-transform: rotate(1.6deg);
    transform: rotate(1.6deg); }
  75% {
    -webkit-transform: rotate(-2.4deg);
    transform: rotate(-2.4deg); } }

#home .exhibition .masonry ul li .hoverBox ._text .time .fBox {
  position: relative; }

#home .exhibition .masonry ul li .hoverBox ._text .time .fBox .box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end; }

#home .exhibition .masonry ul li .hoverBox ._text .time h6 {
  top: -25px; }

@media (max-width: 500px) {
  #home .news .masonry ul li.big ._text,
  #home .news .masonry ul li.small ._text {
    text-shadow: none !important; } }

#home .exhibition .masonry ul li.show.in:before {
  display: none; }

#home .exhibition .masonry ul li.show picture,
#home .news .masonry ul li.show figure,
#home .advertisement.show.in ._img img {
  -webkit-animation: fadeInDown 1.2s both;
  animation: fadeInDown 1.2s both; }

#home .news .masonry ul li {
  overflow: hidden; }

#home .about ._title .in.show img,
#home .about .lines .in.show img,
#home .about ._title .bigImg.hasVideo:before,
#home .about .line .bigImg.hasVideo:before {
  -webkit-animation: fadeInDown 1.2s both !important;
  animation: fadeInDown 1.2s both !important; }

#home .about ._title .bigImg.hasVideo:before,
#home .about .line .bigImg.hasVideo:before {
  background-color: rgba(0, 0, 0, 0); }

#home .about ._title .bigImg.hasVideo.show:before,
#home .about .line .bigImg.hasVideo.show:before {
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: background-color .5s ease .5s;
  -o-transition: background-color .5s ease .5s;
  transition: background-color .5s ease .5s; }

#home .about ._title .bigImg.hasVideo:after,
#home .about .line .bigImg.hasVideo:after {
  color: #fff;
  border-color: #fff;
  opacity: 1;
  z-index: 2;
  -webkit-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1); }

#news .dateAndType {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

#news.detail .recommend ._title .words .ch {
  font-size: 22px;
  font-size: 1.375rem;
  font-size: 22px; }

#news.index .ajaxContent {
  padding: 0px 50px 80px; }

.a-media {
  margin: 0 0 130px 0; }

#support .a-ani.in .titleSec {
  padding-top: 0;
  margin: 0 0 85px 0; }

#support .a-ani.a-table.in .titleSec {
  padding-top: 50px;
  margin: 0 0 35px 0; }

.a-media-inner {
  padding: 20px 0;
  right: 23%; }

.a-media-inner__logo {
  width: 100%;
  max-width: 200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  .a-media-inner__logo img {
    max-height: 130px; }

.a-media-inner__title {
  width: 100%;
  max-width: 200px; }

.a-media-01 .slick-slider .slick-track, .a-media-01 .slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition-delay: 20ms;
  -o-transition-delay: 20ms;
  transition-delay: 20ms; }

.a-media-list:first-of-type {
  width: 83.33%; }

.a-media-list:last-of-type {
  width: 16.67%; }

.a-media-list--right .a-media-list__img {
  position: relative; }
  .a-media-list--right .a-media-list__img:after {
    content: '';
    display: block;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0; }

@media (max-width: 767px) {
  .a-media-list:first-of-type {
    width: 100%; }
  .a-media-list:last-of-type {
    display: none; } }

.a-card-inner__href .a-card-inner__img {
  padding: 10px; }

.a-card-inner__href img {
  max-width: 200px;
  max-height: 50px;
  padding: 0; }

.a-media-list__img--100 img {
  max-width: 1115px;
  max-height: 690px;
  margin: 0 auto; }

.a-list--bgImg .container {
  background-repeat: no-repeat;
  background-position: center; }

.a-media-div {
  position: absolute;
  right: 18%;
  bottom: 10px; }
  .a-media-div .a-btn-prev, .a-media-div .a-btn-next {
    cursor: pointer;
    bottom: 0; }
    .a-media-div .a-btn-prev span, .a-media-div .a-btn-next span {
      background-color: #000; }
      .a-media-div .a-btn-prev span:before, .a-media-div .a-btn-prev span:after, .a-media-div .a-btn-next span:before, .a-media-div .a-btn-next span:after {
        background-color: #000; }
  .a-media-div .a-btn-prev {
    width: 27px;
    margin-right: 5px; }
    .a-media-div .a-btn-prev span {
      width: 27px; }
  .a-media-div .a-btn-next {
    width: 55px;
    margin-left: 5px; }
    .a-media-div .a-btn-next span {
      width: 55px; }

#visit .mocaPageBody {
  margin: 0 auto 140px auto; }
  #visit .mocaPageBody .cateTitle .text {
    font-size: 22px;
    font-size: 1.375rem;
    font-family: 'FuturaPT-Heavy','微軟正黑體';
    font-weight: 900;
    letter-spacing: normal;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline; }
    #visit .mocaPageBody .cateTitle .text strong {
      margin: 0 5px 0 0; }
    #visit .mocaPageBody .cateTitle .text .sub {
      font-size: 20px;
      font-size: 1.25rem;
      margin: 0; }
  #visit .mocaPageBody .billboard {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -20px;
    padding: 35px 0 0 0; }
    #visit .mocaPageBody .billboard .imgBox {
      width: 64px;
      height: 64px;
      margin: 0 20px 40px 20px;
      overflow: hidden; }
  #visit .mocaPageBody .central {
    padding: 40px 40px 70px 40px; }
    #visit .mocaPageBody .central .cateTitle {
      text-align: center;
      margin: 0 0 40px 0; }
      #visit .mocaPageBody .central .cateTitle .text {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center; }
    #visit .mocaPageBody .central .macPro .list {
      line-height: 1.6;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
      #visit .mocaPageBody .central .macPro .list .word {
        display: block; }
    #visit .mocaPageBody .central .moreTextBox .text {
      font-size: 16px;
      font-size: 1rem;
      line-height: 1.6; }
  #visit .mocaPageBody .dragon .egg {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    #visit .mocaPageBody .dragon .egg:first-child .cateTitle {
      border-top: solid 5px #000; }
    #visit .mocaPageBody .dragon .egg:first-child .secBox {
      border-top: solid 5px #000; }
    #visit .mocaPageBody .dragon .egg:last-child .secBox {
      border-bottom: none; }
    #visit .mocaPageBody .dragon .egg .content {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
      #visit .mocaPageBody .dragon .egg .content .sub {
        padding-right: 32px;
        line-height: 1.6;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
        white-space: nowrap; }
        #visit .mocaPageBody .dragon .egg .content .sub:after {
          content: '';
          display: block;
          background-color: #000;
          width: 2px;
          height: 18px;
          position: absolute;
          right: 15px;
          top: 3px; }
      #visit .mocaPageBody .dragon .egg .content .box {
        width: 95%;
        max-width: 95%; }
        #visit .mocaPageBody .dragon .egg .content .box .list {
          margin: 0 0 14px 0; }
          #visit .mocaPageBody .dragon .egg .content .box .list .name {
            padding: 0 20px 0 0; }
          #visit .mocaPageBody .dragon .egg .content .box .list:last-child {
            margin: 0; }
      #visit .mocaPageBody .dragon .egg .content .list {
        line-height: 1.6;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start; }
      #visit .mocaPageBody .dragon .egg .content .note {
        font-size: 18px;
        font-size: 1.125rem;
        font-family: 'FuturaPT-Heavy','微軟正黑體'; }
  #visit .mocaPageBody .dragon .cateTitle {
    width: 27%;
    max-width: 285px;
    margin: 0 15px 0 0;
    padding: 40px 0 40px 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    #visit .mocaPageBody .dragon .cateTitle .imgFrame {
      width: 30px;
      height: 30px;
      margin-right: 10px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
      #visit .mocaPageBody .dragon .cateTitle .imgFrame .img {
        max-width: 100%;
        max-height: 100%; }
  #visit .mocaPageBody .dragon .secBox {
    border-bottom: solid 1px #000;
    width: 73%;
    max-width: 820px;
    padding: 40px 40px; }
    #visit .mocaPageBody .dragon .secBox .up {
      margin: 0 0 14px; }
    #visit .mocaPageBody .dragon .secBox .infoText {
      font-size: 16px;
      font-size: 1rem;
      line-height: 1.6; }
  #visit .mocaPageBody .dragon .imgArea {
    padding: 30px 0 0 0; }
    #visit .mocaPageBody .dragon .imgArea:first-child {
      padding: 0; }
  #visit .mocaPageBody .dragon .tipImgArea {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 30px 0 0 0; }
    #visit .mocaPageBody .dragon .tipImgArea:first-child {
      padding: 0; }
    #visit .mocaPageBody .dragon .tipImgArea .imgFrame {
      min-width: 54px;
      min-height: 54px;
      margin: 0 30px 0 0; }
  #visit .mocaPageBody .trans .mapFrame {
    border-top: solid 5px #000;
    padding: 40px 0; }
    #visit .mocaPageBody .trans .mapFrame .textBox {
      font-size: 1rem;
      font-family: 'FuturaPT-Medium','微軟正黑體';
      line-height: 1.6;
      width: 100%;
      max-width: 900px;
      margin: 0 auto;
      padding: 16px 0 0 0; }
      #visit .mocaPageBody .trans .mapFrame .textBox .text {
        margin: 0 0 8px 0; }
        #visit .mocaPageBody .trans .mapFrame .textBox .text:last-child {
          margin: 0; }
    #visit .mocaPageBody .trans .mapFrame iframe {
      width: 100%;
      max-width: 900px;
      height: 400px;
      margin: 0 auto; }
  #visit .mocaPageBody .trans .secBox {
    padding: 0; }
  #visit .mocaPageBody .macPro .dot {
    font-weight: 900;
    font-family: 'FuturaPT-Heavy'; }
  #visit .mocaPageBody .river {
    border-bottom: solid 1px #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 40px; }
    #visit .mocaPageBody .river:last-child {
      border-bottom: none; }
    #visit .mocaPageBody .river.vsCode {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
      #visit .mocaPageBody .river.vsCode .title {
        margin: 0 0 25px 0; }
      #visit .mocaPageBody .river.vsCode .textBox {
        padding: 0; }
        #visit .mocaPageBody .river.vsCode .textBox .dot {
          display: inline-block;
          background-color: #000;
          border-radius: 50%;
          width: 8px;
          height: 8px;
          margin: 0 6px 0 0; }
    #visit .mocaPageBody .river .headBox {
      display: inline-block; }
      #visit .mocaPageBody .river .headBox .way {
        font-size: 18px;
        font-size: 1.125rem;
        font-weight: 900;
        line-height: 1.6;
        margin: 0 0 10px 0;
        word-break: keep-all; }
      #visit .mocaPageBody .river .headBox .img {
        max-width: 40px;
        max-height: 40px; }
    #visit .mocaPageBody .river .textBox {
      padding: 0 0 0 60px; }
    #visit .mocaPageBody .river .listBox .text {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: baseline;
      -ms-flex-align: baseline;
      align-items: baseline; }
      #visit .mocaPageBody .river .listBox .text:before {
        content: '';
        display: block;
        background-color: #000;
        border-radius: 50%;
        min-width: 8px;
        min-height: 8px;
        margin: 0 6px 0 0; }
  @media (max-width: 1024px) {
    #visit .mocaPageBody .dragon .cateTitle {
      width: 30%; }
      #visit .mocaPageBody .dragon .cateTitle .text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; }
    #visit .mocaPageBody .dragon .secBox {
      width: 70%; } }
  @media (max-width: 767px) {
    #visit .mocaPageBody .billboard {
      display: none; }
    #visit .mocaPageBody .dragon {
      border-top: solid 5px #000; }
      #visit .mocaPageBody .dragon .eggRoll {
        border-top: solid 5px #000; }
        #visit .mocaPageBody .dragon .eggRoll:first-child {
          border-top: none; }
      #visit .mocaPageBody .dragon .egg {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
        #visit .mocaPageBody .dragon .egg:first-child .cateTitle {
          border-top: none; }
        #visit .mocaPageBody .dragon .egg:first-child .secBox {
          border-top: none; }
        #visit .mocaPageBody .dragon .egg .content .box .list .name {
          padding: 0; }
        #visit .mocaPageBody .dragon .egg .content .box .list .btnStyle {
          margin-top: 15px; }
        #visit .mocaPageBody .dragon .egg .content .list {
          -ms-flex-wrap: wrap;
          flex-wrap: wrap; }
      #visit .mocaPageBody .dragon .cateTitle {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 40px 18px 0 18px; }
        #visit .mocaPageBody .dragon .cateTitle .text {
          -webkit-box-orient: inherit;
          -webkit-box-direction: inherit;
          -ms-flex-direction: inherit;
          flex-direction: inherit;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center; }
          #visit .mocaPageBody .dragon .cateTitle .text strong {
            margin-left: 5px; }
      #visit .mocaPageBody .dragon .secBox {
        width: 100%;
        max-width: none;
        padding: 40px 20px; }
    #visit .mocaPageBody .central {
      padding: 40px 20px 70px 20px; }
    #visit .mocaPageBody .trans .mapFrame {
      border-top: none; }
    #visit .mocaPageBody .trans .secBox {
      padding: 0 20px; }
    #visit .mocaPageBody .trans .river {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
      #visit .mocaPageBody .trans .river .headBox {
        margin-bottom: 15px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center; }
        #visit .mocaPageBody .trans .river .headBox .way {
          -webkit-box-ordinal-group: 2;
          -ms-flex-order: 1;
          order: 1;
          padding-left: 15px; }
        #visit .mocaPageBody .trans .river .headBox .img {
          -webkit-box-ordinal-group: 1;
          -ms-flex-order: 0;
          order: 0; }
      #visit .mocaPageBody .trans .river .textBox {
        padding: 0; }
    #visit .mocaPageBody .river {
      padding: 40px 0; } }

.mocaPageBody[data-page=visit] {
  width: 1600px; }
  .mocaPageBody[data-page=visit]:after {
    content: '';
    display: block;
    clear: both; }
  .mocaPageBody[data-page=visit] .wallFrame {
    position: relative; }
  .mocaPageBody[data-page=visit] .wall {
    text-align: center;
    width: 50%;
    padding: 0 60px;
    opacity: 0; }
    .mocaPageBody[data-page=visit] .wall.show {
      opacity: 1;
      -webkit-transition: opacity 1.5s ease;
      -o-transition: opacity 1.5s ease;
      transition: opacity 1.5s ease; }
    .mocaPageBody[data-page=visit] .wall .imgFrame {
      height: 0;
      overflow: hidden;
      position: relative; }
    .mocaPageBody[data-page=visit] .wall:nth-child(4n+1) .imgFrame {
      padding-bottom: 112%; }
    .mocaPageBody[data-page=visit] .wall:nth-child(4n+4) .imgFrame {
      padding-bottom: 112%; }
    .mocaPageBody[data-page=visit] .wall:nth-child(4n+2) .imgFrame {
      padding-bottom: 63.5%; }
    .mocaPageBody[data-page=visit] .wall:nth-child(4n+3) .imgFrame {
      padding-bottom: 63.5%; }
    .mocaPageBody[data-page=visit] .wall .textBox {
      height: 255px;
      padding: 18px 0 0 0; }
      .mocaPageBody[data-page=visit] .wall .textBox .title {
        font-size: 24px;
        font-size: 1.5rem;
        margin: 0 0 5px 0; }
        .mocaPageBody[data-page=visit] .wall .textBox .title strong {
          font-family: 'FuturaPT-Heavy','微軟正黑體'; }
      .mocaPageBody[data-page=visit] .wall .textBox .subTitle {
        font-size: 22px;
        font-size: 1.375rem;
        margin: 0 0 25px 0; }
      .mocaPageBody[data-page=visit] .wall .textBox .text {
        font-size: 16px;
        font-size: 1rem;
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        word-break: break-all;
        -webkit-box-orient: vertical; }
    .mocaPageBody[data-page=visit] .wall .hoverArea {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
      .mocaPageBody[data-page=visit] .wall .hoverArea .bg {
        width: 70%;
        height: 70%;
        position: absolute;
        left: 50%;
        top: 50%;
        opacity: 0;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        -webkit-transition: all .6s ease;
        -o-transition: all .6s ease;
        transition: all .6s ease; }
      .mocaPageBody[data-page=visit] .wall .hoverArea .mathBox {
        width: 50%;
        position: relative;
        overflow: hidden; }
        .mocaPageBody[data-page=visit] .wall .hoverArea .mathBox span {
          display: block; }
      .mocaPageBody[data-page=visit] .wall .hoverArea .line {
        width: 1px;
        height: 0;
        position: relative; }
      .mocaPageBody[data-page=visit] .wall .hoverArea .num {
        font-size: 6.25rem;
        font-family: 'FuturaPT-Medium';
        margin: 0 0 20px 0;
        opacity: 0;
        -webkit-transform: translateY(100px);
        -ms-transform: translateY(100px);
        transform: translateY(100px); }
      .mocaPageBody[data-page=visit] .wall .hoverArea .text {
        font-size: 15px;
        font-size: 0.9375rem;
        opacity: 0; }
  .mocaPageBody[data-page=visit] .wall .imgFrame {
    cursor: pointer; }
    .mocaPageBody[data-page=visit] .wall .imgFrame:hover .hoverArea .bg {
      width: 100%;
      height: 100%;
      opacity: 1;
      -webkit-transition: all .6s ease;
      -o-transition: all .6s ease;
      transition: all .6s ease; }
    .mocaPageBody[data-page=visit] .wall .imgFrame:hover .hoverArea .line {
      height: 180px;
      -webkit-transition: height .5s ease .3s;
      -o-transition: height .5s ease .3s;
      transition: height .5s ease .3s; }
    .mocaPageBody[data-page=visit] .wall .imgFrame:hover .hoverArea .num {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
      -webkit-transition: opacity .7s ease, -webkit-transform 1s ease;
      transition: opacity .7s ease, -webkit-transform 1s ease;
      -o-transition: transform 1s ease, opacity .7s ease;
      transition: transform 1s ease, opacity .7s ease;
      transition: transform 1s ease, opacity .7s ease, -webkit-transform 1s ease; }
    .mocaPageBody[data-page=visit] .wall .imgFrame:hover .hoverArea .text {
      opacity: 1;
      -webkit-transition: opacity 1s ease .5s;
      -o-transition: opacity 1s ease .5s;
      transition: opacity 1s ease .5s; }
  @media (max-width: 1650px) {
    .mocaPageBody[data-page=visit] {
      width: 100%; } }
  @media (max-width: 1366px) {
    .mocaPageBody[data-page=visit] {
      padding: 0 30px; }
      .mocaPageBody[data-page=visit] .wall {
        padding: 0 30px; } }
  @media (max-width: 1023px) {
    .mocaPageBody[data-page=visit] {
      padding: 0 20px; }
      .mocaPageBody[data-page=visit] .wall {
        padding: 0 20px; }
        .mocaPageBody[data-page=visit] .wall .hoverArea .num {
          font-size: 60px;
          font-size: 3.75rem; }
        .mocaPageBody[data-page=visit] .wall .imgFrame:hover .hoverArea .line {
          height: 140px; } }
  @media (max-width: 767px) {
    .mocaPageBody[data-page=visit] .wall {
      width: 100%; } }
  @media (max-width: 374px) {
    .mocaPageBody[data-page=visit] .wall {
      padding: 0; } }

.ajaxVisitDetail.open .bg {
  opacity: 1;
  -webkit-transition: opacity 1s ease;
  -o-transition: opacity 1s ease;
  transition: opacity 1s ease; }

.ajaxVisitDetail.open .for_scroll {
  opacity: 1;
  -webkit-transition: opacity 1s ease .3s;
  -o-transition: opacity 1s ease .3s;
  transition: opacity 1s ease .3s; }

.ajaxVisitDetail.close .bg {
  opacity: 0;
  -webkit-transition: opacity .6s ease .2s;
  -o-transition: opacity .6s ease .2s;
  transition: opacity .6s ease .2s; }

.ajaxVisitDetail.close .for_scroll {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: -webkit-transform .5s ease;
  transition: -webkit-transform .5s ease;
  -o-transition: transform .5s ease;
  transition: transform .5s ease;
  transition: transform .5s ease, -webkit-transform .5s ease; }

.ajaxVisitDetail .mCSB_scrollTools {
  opacity: 0 !important; }

.ajaxVisitDetail .bg {
  opacity: 0;
  position: fixed;
  z-index: 0; }

.ajaxVisitDetail .for_scroll {
  opacity: 0;
  width: 100%; }

.ajaxVisitDetail .container {
  overflow: hidden;
  position: relative;
  background-color: #fff;
  max-width: 1100px;
  min-height: calc(var(--vh, 1vh) * 100);
  margin-left: auto; }

.ajaxVisitDetail .imgBall {
  width: 100%;
  height: 330px;
  opacity: 0; }
  .ajaxVisitDetail .imgBall.show {
    opacity: 1;
    -webkit-transition: opacity 1.2s ease .5s;
    -o-transition: opacity 1.2s ease .5s;
    transition: opacity 1.2s ease .5s; }

.ajaxVisitDetail .hamburgerBox {
  background-color: #fafafa;
  padding: 60px 12%;
  position: relative; }
  .ajaxVisitDetail .hamburgerBox.show .lettuce {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
    -webkit-transition: -webkit-transform 1.5s ease .8s;
    transition: -webkit-transform 1.5s ease .8s;
    -o-transition: transform 1.5s ease .8s;
    transition: transform 1.5s ease .8s;
    transition: transform 1.5s ease .8s, -webkit-transform 1.5s ease .8s; }
  .ajaxVisitDetail .hamburgerBox.show .textBox .title {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: opacity 1.5s ease .6s, -webkit-transform 1.5s ease .6s;
    transition: opacity 1.5s ease .6s, -webkit-transform 1.5s ease .6s;
    -o-transition: transform 1.5s ease .6s, opacity 1.5s ease .6s;
    transition: transform 1.5s ease .6s, opacity 1.5s ease .6s;
    transition: transform 1.5s ease .6s, opacity 1.5s ease .6s, -webkit-transform 1.5s ease .6s; }
  .ajaxVisitDetail .hamburgerBox.show .textBox .subTitle {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: opacity 1.5s ease .8s, -webkit-transform 1.5s ease .8s;
    transition: opacity 1.5s ease .8s, -webkit-transform 1.5s ease .8s;
    -o-transition: transform 1.5s ease .8s, opacity 1.5s ease .8s;
    transition: transform 1.5s ease .8s, opacity 1.5s ease .8s;
    transition: transform 1.5s ease .8s, opacity 1.5s ease .8s, -webkit-transform 1.5s ease .8s; }
  .ajaxVisitDetail .hamburgerBox.show .textBox .text {
    opacity: 1;
    -webkit-transition: opacity 1.5s ease 1.1s;
    -o-transition: opacity 1.5s ease 1.1s;
    transition: opacity 1.5s ease 1.1s; }
  .ajaxVisitDetail .hamburgerBox.show .showBox {
    opacity: 1;
    -webkit-transition: opacity 1.5s ease 1.3s;
    -o-transition: opacity 1.5s ease 1.3s;
    transition: opacity 1.5s ease 1.3s; }
  .ajaxVisitDetail .hamburgerBox .lettuce {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%); }
  .ajaxVisitDetail .hamburgerBox .textBox .title {
    font-size: 1.75rem;
    font-family: 'FuturaPT-Medium','微軟正黑體';
    line-height: 1.5;
    margin: 0 0 5px 0;
    opacity: 0;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    .ajaxVisitDetail .hamburgerBox .textBox .title span {
      margin-right: 10px; }
    .ajaxVisitDetail .hamburgerBox .textBox .title strong {
      font-family: 'FuturaPT-Heavy','微軟正黑體'; }
  .ajaxVisitDetail .hamburgerBox .textBox .subTitle {
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.2;
    margin: 0 0 40px 0;
    opacity: 0;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px); }
  .ajaxVisitDetail .hamburgerBox .textBox .text {
    font-size: 16px;
    font-size: 1rem;
    margin: 0 0 50px 0;
    line-height: 1.8;
    opacity: 0; }
  .ajaxVisitDetail .hamburgerBox .showBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: -40px;
    opacity: 0; }
    .ajaxVisitDetail .hamburgerBox .showBox .list {
      font-family: 'FuturaPT-Medium','微軟正黑體';
      text-align: center;
      padding: 0 50px; }
    .ajaxVisitDetail .hamburgerBox .showBox .name {
      font-size: 60px;
      font-size: 3.75rem; }
    .ajaxVisitDetail .hamburgerBox .showBox .text {
      font-size: 15px;
      font-size: 0.9375rem; }

.ajaxVisitDetail .yogurtBox {
  height: 300px;
  max-height: 330px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  .ajaxVisitDetail .yogurtBox.show .imgFrame {
    opacity: 1;
    -webkit-transition: opacity 1.5s ease 1.3s;
    -o-transition: opacity 1.5s ease 1.3s;
    transition: opacity 1.5s ease 1.3s; }
  .ajaxVisitDetail .yogurtBox.fixed .imgFrame {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1; }
  .ajaxVisitDetail .yogurtBox .imgFrame {
    background-color: #fff; }

.ajaxVisitDetail .colaBox {
  padding: 0 12%;
  position: relative; }
  .ajaxVisitDetail .colaBox .roadBg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: height 1.2s linear;
    -o-transition: height 1.2s linear;
    transition: height 1.2s linear; }
  .ajaxVisitDetail .colaBox .straw {
    height: 440px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative; }
    .ajaxVisitDetail .colaBox .straw.right {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
      flex-direction: row-reverse; }
      .ajaxVisitDetail .colaBox .straw.right .textFrame {
        padding: 0 40px 0 0; }
    .ajaxVisitDetail .colaBox .straw.show .imgFrame {
      opacity: 1;
      -webkit-transition: opacity 1s ease .5s;
      -o-transition: opacity 1s ease .5s;
      transition: opacity 1s ease .5s; }
    .ajaxVisitDetail .colaBox .straw.show .textFrame .number {
      -webkit-transform: translateY(-28px);
      -ms-transform: translateY(-28px);
      transform: translateY(-28px);
      -webkit-transition: -webkit-transform 1s ease .5s;
      transition: -webkit-transform 1s ease .5s;
      -o-transition: transform 1s ease .5s;
      transition: transform 1s ease .5s;
      transition: transform 1s ease .5s, -webkit-transform 1s ease .5s; }
    .ajaxVisitDetail .colaBox .straw.show .textBox .title {
      opacity: 1;
      -webkit-transition: opacity 1s ease .5s;
      -o-transition: opacity 1s ease .5s;
      transition: opacity 1s ease .5s; }
    .ajaxVisitDetail .colaBox .straw.show .textBox .subTitle {
      opacity: 1;
      -webkit-transition: opacity 1s ease .8s;
      -o-transition: opacity 1s ease .8s;
      transition: opacity 1s ease .8s; }
    .ajaxVisitDetail .colaBox .straw.show .textBox .text {
      opacity: 1;
      -webkit-transition: opacity 1s ease 1.1s;
      -o-transition: opacity 1s ease 1.1s;
      transition: opacity 1s ease 1.1s; }
    .ajaxVisitDetail .colaBox .straw .imgFrame {
      border-radius: 50%;
      border: solid 10px #e83434;
      width: 200px;
      height: 200px;
      overflow: hidden;
      opacity: 0; }
    .ajaxVisitDetail .colaBox .straw .textFrame {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: calc(100% - 200px);
      padding: 0 0 0 40px; }
      .ajaxVisitDetail .colaBox .straw .textFrame .number {
        color: #e83434;
        font-size: 3.75rem;
        font-family: 'FuturaPT-Medium','微軟正黑體';
        -webkit-transform: translateY(28px);
        -ms-transform: translateY(28px);
        transform: translateY(28px);
        margin-right: 10px; }
    .ajaxVisitDetail .colaBox .straw .textBox .title {
      font-size: 22px;
      font-size: 1.375rem;
      font-weight: 900;
      font-family: 'FuturaPT-Heavy','微軟正黑體';
      margin: 0 0 5px 0;
      opacity: 0; }
    .ajaxVisitDetail .colaBox .straw .textBox .subTitle {
      font-size: 20px;
      font-size: 1.25rem;
      font-weight: 900;
      margin: 0 0 24px 0;
      opacity: 0; }
    .ajaxVisitDetail .colaBox .straw .textBox .text {
      line-height: 1.8;
      opacity: 0;
      max-height: 110px;
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      -webkit-box-orient: vertical; }
  .ajaxVisitDetail .colaBox .mixArea {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 8px 0 0 0; }
    .ajaxVisitDetail .colaBox .mixArea .dateBox {
      font-size: 14px;
      font-size: 0.875rem;
      color: #222;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin-right: 24px; }
      .ajaxVisitDetail .colaBox .mixArea .dateBox .list {
        padding: 18px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        position: relative; }
        .ajaxVisitDetail .colaBox .mixArea .dateBox .list:first-child {
          padding: 0 18px 0 0; }
        .ajaxVisitDetail .colaBox .mixArea .dateBox .list:last-child {
          padding: 0 0 0 18px; }
          .ajaxVisitDetail .colaBox .mixArea .dateBox .list:last-child:after {
            display: none; }
        .ajaxVisitDetail .colaBox .mixArea .dateBox .list:after {
          content: '';
          display: block;
          background-color: #e83434;
          width: 2px;
          height: 19px;
          position: absolute;
          right: 0;
          top: 50%;
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%); }
      .ajaxVisitDetail .colaBox .mixArea .dateBox .name {
        font-weight: 900; }
    .ajaxVisitDetail .colaBox .mixArea .moreBox {
      font-size: 12px;
      font-size: 0.75rem; }
      .ajaxVisitDetail .colaBox .mixArea .moreBox .link {
        color: #fff;
        background-color: #e83434;
        border-radius: 50%;
        width: 56px;
        height: 56px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center; }
        .ajaxVisitDetail .colaBox .mixArea .moreBox .link:hover {
          -webkit-animation: large 1.5s infinite ease-in-out;
          animation: large 1.5s infinite ease-in-out; }

.ajaxVisitDetail .lettuce {
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  right: 0;
  top: -30px; }
  .ajaxVisitDetail .lettuce .community {
    background-color: #eeeeee;
    padding: 0 15px;
    margin-left: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: -webkit-transform 1s ease;
    transition: -webkit-transform 1s ease;
    -o-transition: transform 1s ease;
    transition: transform 1s ease;
    transition: transform 1s ease, -webkit-transform 1s ease; }
    .ajaxVisitDetail .lettuce .community.out {
      -webkit-transform: translateX(0%);
      -ms-transform: translateX(0%);
      transform: translateX(0%); }
    .ajaxVisitDetail .lettuce .community .link {
      padding: 15px;
      color: #aeaeae;
      -webkit-transition: color 1s ease;
      -o-transition: color 1s ease;
      transition: color 1s ease; }
      .ajaxVisitDetail .lettuce .community .link:hover {
        color: #e83434; }
      .ajaxVisitDetail .lettuce .community .link .text {
        display: none; }
    .ajaxVisitDetail .lettuce .community .icon {
      font-size: 22px;
      font-size: 1.375rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      width: 22px;
      height: 22px; }
  .ajaxVisitDetail .lettuce .shareBtn {
    cursor: pointer;
    color: #fff;
    background-color: #e83434;
    width: 80px;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative; }
  .ajaxVisitDetail .lettuce .closeBox {
    font-size: 14px;
    font-size: 0.875rem;
    font-family: 'FuturaPT-Light','微軟正黑體';
    cursor: pointer;
    width: 150px;
    height: 100%;
    color: #fff;
    background-color: #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative; }
    .ajaxVisitDetail .lettuce .closeBox .text {
      margin: 0 6px 0 0; }

@media (max-width: 1100px) {
  .ajaxVisitDetail .for_scroll {
    width: 100%; }
  .ajaxVisitDetail .imgBall {
    height: auto; } }

@media (max-width: 1023px) {
  .ajaxVisitDetail .hamburgerBox {
    padding: 90px 6%; }
    .ajaxVisitDetail .hamburgerBox .showBox {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin: 0; }
      .ajaxVisitDetail .hamburgerBox .showBox .list {
        width: 50%; }
  .ajaxVisitDetail .colaBox {
    padding: 0 6%; }
    .ajaxVisitDetail .colaBox .roadBg {
      display: none; }
    .ajaxVisitDetail .colaBox .right .mixArea {
      -webkit-box-align: end;
      -ms-flex-align: end;
      align-items: flex-end; }
    .ajaxVisitDetail .colaBox .mixArea {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start; }
      .ajaxVisitDetail .colaBox .mixArea .dateBox {
        margin: 0; }
      .ajaxVisitDetail .colaBox .mixArea .moreBox {
        padding-top: 15px; } }

@media (max-width: 767px) {
  .ajaxVisitDetail .hamburgerBox {
    padding: 60px 6%; }
    .ajaxVisitDetail .hamburgerBox .showBox .list {
      padding: 10px 20px; }
  .ajaxVisitDetail .yogurtBox {
    display: none; }
  .ajaxVisitDetail .colaBox {
    padding: 0 6%; }
    .ajaxVisitDetail .colaBox .straw {
      height: auto;
      padding: 25px 0;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
      .ajaxVisitDetail .colaBox .straw.right {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; }
        .ajaxVisitDetail .colaBox .straw.right .mixArea {
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center; }
        .ajaxVisitDetail .colaBox .straw.right .textFrame {
          padding: 0; }
      .ajaxVisitDetail .colaBox .straw .imgFrame {
        margin: 0 0 20px 0; }
      .ajaxVisitDetail .colaBox .straw .textFrame {
        width: 100%;
        padding: 0; }
    .ajaxVisitDetail .colaBox .mixArea {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      padding: 15px 0 0 0; }
      .ajaxVisitDetail .colaBox .mixArea .dateBox {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        margin-right: 20px; }
        .ajaxVisitDetail .colaBox .mixArea .dateBox .list:first-child {
          padding: 0; }
        .ajaxVisitDetail .colaBox .mixArea .dateBox .list:last-child {
          padding: 0; }
        .ajaxVisitDetail .colaBox .mixArea .dateBox .list:after {
          display: none; }
      .ajaxVisitDetail .colaBox .mixArea .moreBox {
        padding: 0; } }

@media (max-width: 767px) and (orientation: portrait) {
  .ajaxVisitDetail .hamburgerBox {
    padding: 90px 6% 60px 6%; }
  .ajaxVisitDetail .lettuce {
    width: 100%;
    height: 45px;
    top: 0; }
    .ajaxVisitDetail .lettuce .shareBtn {
      width: 15%; }
    .ajaxVisitDetail .lettuce .closeBox {
      font-size: 12px;
      font-size: 0.75rem;
      width: 28%; }
    .ajaxVisitDetail .lettuce .community {
      width: 57%;
      padding: 0;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; }
      .ajaxVisitDetail .lettuce .community .link {
        padding: 10px 6px; }
  .ajaxVisitDetail .wddCross {
    width: 25px;
    height: 25px; } }

@media (max-width: 600px) {
  .ajaxVisitDetail .hamburgerBox .showBox .name {
    font-size: 30px;
    font-size: 1.875rem; } }

.mocaPageBody[data-page=visitTicket] .category {
  width: 1120px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .mocaPageBody[data-page=visitTicket] .category:last-child {
    border-bottom: solid 5px #000; }

.mocaPageBody[data-page=visitTicket] .cateTitle {
  border-top: solid 5px #000;
  width: 26%;
  max-width: 285px;
  margin-right: 15px;
  padding: 40px 0 40px 30px; }
  .mocaPageBody[data-page=visitTicket] .cateTitle .text {
    font-size: 22px;
    font-size: 1.375rem;
    font-family: 'FuturaPT-Heavy','微軟正黑體';
    font-weight: 900; }

.mocaPageBody[data-page=visitTicket] .notice .secBox .itemBox .moreTextBox {
  width: 100%; }

.mocaPageBody[data-page=visitTicket] .secBox {
  border-top: solid 5px #000;
  width: 74%;
  max-width: 820px;
  padding: 40px 0; }
  .mocaPageBody[data-page=visitTicket] .secBox .normal {
    text-align: center;
    padding: 0 20px; }
  .mocaPageBody[data-page=visitTicket] .secBox .list {
    font-size: 16px;
    font-size: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-bottom: solid 1px #000; }
    .mocaPageBody[data-page=visitTicket] .secBox .list:first-child .title {
      padding: 0 0 35px 0; }
    .mocaPageBody[data-page=visitTicket] .secBox .list:first-child .itemBox .item:first-child {
      padding: 0 0 35px 0; }
    .mocaPageBody[data-page=visitTicket] .secBox .list:last-child {
      border-bottom: none; }
    .mocaPageBody[data-page=visitTicket] .secBox .list .title {
      font-size: 18px;
      font-size: 1.125rem;
      font-weight: 900;
      text-align: center;
      width: 22%;
      padding: 35px 0; }
  .mocaPageBody[data-page=visitTicket] .secBox .itemBox {
    width: 78%; }
    .mocaPageBody[data-page=visitTicket] .secBox .itemBox .item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      border-bottom: solid 1px #000;
      padding: 35px 0; }
      .mocaPageBody[data-page=visitTicket] .secBox .itemBox .item:last-child {
        border-bottom: none; }
    .mocaPageBody[data-page=visitTicket] .secBox .itemBox .note {
      font-size: 18px;
      font-size: 1.125rem;
      font-weight: 900;
      margin-left: auto;
      min-width: 100px; }
    .mocaPageBody[data-page=visitTicket] .secBox .itemBox .moreTextBox {
      width: calc(100% - 120px);
      padding: 0 20px; }
    .mocaPageBody[data-page=visitTicket] .secBox .itemBox .mac {
      width: 100%;
      padding: 0 20px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
      .mocaPageBody[data-page=visitTicket] .secBox .itemBox .mac .text {
        margin: 0 0 10px 0;
        padding-right: 15px; }
        .mocaPageBody[data-page=visitTicket] .secBox .itemBox .mac .text:last-child {
          margin: 0; }
    .mocaPageBody[data-page=visitTicket] .secBox .itemBox .ps {
      font-size: 14px;
      font-size: 0.875rem;
      color: #e83434;
      margin-top: 10px;
      display: block;
      overflow: visible !important; }
    .mocaPageBody[data-page=visitTicket] .secBox .itemBox .macPro {
      padding: 22px 0 0 0; }
      .mocaPageBody[data-page=visitTicket] .secBox .itemBox .macPro:first-child {
        padding: 0; }
      .mocaPageBody[data-page=visitTicket] .secBox .itemBox .macPro.circle .list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: baseline;
        -ms-flex-align: baseline;
        align-items: baseline; }
        .mocaPageBody[data-page=visitTicket] .secBox .itemBox .macPro.circle .list:before {
          content: '';
          display: block;
          background-color: #000;
          border-radius: 50%;
          min-width: 8px;
          min-height: 8px;
          margin-right: 10px; }
      .mocaPageBody[data-page=visitTicket] .secBox .itemBox .macPro .list {
        border-bottom: none;
        line-height: 1.5; }
      .mocaPageBody[data-page=visitTicket] .secBox .itemBox .macPro .textBox {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; }

.mocaPageBody[data-page=visitTicket] .billboard {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -20px;
  padding: 35px 0 0 0; }

@media (max-width: 1200px) {
  .mocaPageBody[data-page=visitTicket] .category {
    width: 90%; } }

@media (max-width: 1024px) {
  .mocaPageBody[data-page=visitTicket] .cateTitle {
    padding: 40px 20px; }
    .mocaPageBody[data-page=visitTicket] .cateTitle .text {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
  .mocaPageBody[data-page=visitTicket] .secBox .itemBox .note {
    min-width: auto; }
  .mocaPageBody[data-page=visitTicket] .secBox .itemBox .moreTextBox {
    width: 100%; } }

@media (max-width: 767px) {
  .mocaPageBody[data-page=visitTicket] .billboard {
    display: none; }
  .mocaPageBody[data-page=visitTicket] .category {
    width: 80%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
  .mocaPageBody[data-page=visitTicket] .cateTitle {
    width: 100%;
    padding: 35px 0 0 0;
    max-width: none;
    margin: 0 0 20px 0; }
    .mocaPageBody[data-page=visitTicket] .cateTitle .imgFrame {
      width: 30px;
      height: 30px; }
    .mocaPageBody[data-page=visitTicket] .cateTitle .text {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
  .mocaPageBody[data-page=visitTicket] .secBox {
    border-top: none;
    width: 100%;
    padding: 0 0 35px 0;
    max-width: none; }
    .mocaPageBody[data-page=visitTicket] .secBox .list {
      display: block; }
      .mocaPageBody[data-page=visitTicket] .secBox .list:first-child .title {
        padding: 0 0 15px 0; }
      .mocaPageBody[data-page=visitTicket] .secBox .list.spec .itemBox .mac {
        margin: 0; }
      .mocaPageBody[data-page=visitTicket] .secBox .list .title {
        width: 100%;
        text-align: left;
        padding: 15px 0 15px 0; }
    .mocaPageBody[data-page=visitTicket] .secBox .itemBox {
      width: 100%; }
      .mocaPageBody[data-page=visitTicket] .secBox .itemBox .moreTextBox {
        padding: 0; }
      .mocaPageBody[data-page=visitTicket] .secBox .itemBox .mac {
        padding: 0;
        margin: 0 0 10px 0; }
        .mocaPageBody[data-page=visitTicket] .secBox .itemBox .mac .text {
          width: 70%;
          margin: 0; }
      .mocaPageBody[data-page=visitTicket] .secBox .itemBox .macPro .list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 0; }
      .mocaPageBody[data-page=visitTicket] .secBox .itemBox .item {
        border-bottom: none;
        padding: 0 0 30px 0 !important; } }

.mocaPageBody[data-page=visitTour] {
  width: 1120px; }
  .mocaPageBody[data-page=visitTour] .category {
    border-bottom: solid 5px #000; }
  @media (max-width: 1200px) {
    .mocaPageBody[data-page=visitTour] {
      width: 90%; } }

.reserFormLbox {
  background-color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  opacity: 0; }
  .reserFormLbox.open {
    z-index: 10;
    opacity: 1;
    -webkit-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease; }
    .reserFormLbox.open .container {
      background-color: #f9f9f9;
      -webkit-transition: background-color 1s ease .3s;
      -o-transition: background-color 1s ease .3s;
      transition: background-color 1s ease .3s; }
    .reserFormLbox.open .bannerSec .imgFrame {
      opacity: 1;
      -webkit-transition: opacity 1s ease .3s;
      -o-transition: opacity 1s ease .3s;
      transition: opacity 1s ease .3s; }
    .reserFormLbox.open .bannerSec .textBox .title {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1s ease .3s, -webkit-transform 1s ease .3s;
      transition: opacity 1s ease .3s, -webkit-transform 1s ease .3s;
      -o-transition: opacity 1s ease .3s, transform 1s ease .3s;
      transition: opacity 1s ease .3s, transform 1s ease .3s;
      transition: opacity 1s ease .3s, transform 1s ease .3s, -webkit-transform 1s ease .3s; }
    .reserFormLbox.open .bannerSec .textBox .subTitle {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1s ease .5s, -webkit-transform 1s ease .5s;
      transition: opacity 1s ease .5s, -webkit-transform 1s ease .5s;
      -o-transition: opacity 1s ease .5s, transform 1s ease .5s;
      transition: opacity 1s ease .5s, transform 1s ease .5s;
      transition: opacity 1s ease .5s, transform 1s ease .5s, -webkit-transform 1s ease .5s; }
    .reserFormLbox.open .bannerSec .textBox .textInfo {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1s ease .7s, -webkit-transform 1s ease .7s;
      transition: opacity 1s ease .7s, -webkit-transform 1s ease .7s;
      -o-transition: opacity 1s ease .7s, transform 1s ease .7s;
      transition: opacity 1s ease .7s, transform 1s ease .7s;
      transition: opacity 1s ease .7s, transform 1s ease .7s, -webkit-transform 1s ease .7s; }
    .reserFormLbox.open .bannerSec .scrollBtn {
      opacity: 1;
      -webkit-transition: opacity 1s ease .9s;
      -o-transition: opacity 1s ease .9s;
      transition: opacity 1s ease .9s; }
  .reserFormLbox.close {
    opacity: 0;
    -webkit-transition: opacity .5s ease .3s;
    -o-transition: opacity .5s ease .3s;
    transition: opacity .5s ease .3s; }
    .reserFormLbox.close .container {
      background-color: #fff;
      -webkit-transition: background-color .5s ease;
      -o-transition: background-color .5s ease;
      transition: background-color .5s ease; }
    .reserFormLbox.close .bannerSec {
      opacity: 0;
      -webkit-transition: opacity 1s ease;
      -o-transition: opacity 1s ease;
      transition: opacity 1s ease; }
  .reserFormLbox .for_scroll {
    padding: 110px 0; }
  .reserFormLbox .container {
    background-color: #fff;
    width: 90%;
    max-width: 1700px;
    margin: 0 auto; }
  .reserFormLbox .bannerSec {
    position: relative; }
    .reserFormLbox .bannerSec .imgFrame {
      background-color: #d8d8d8;
      background-repeat: no-repeat;
      background-position: center;
      width: 100%;
      height: 860px;
      position: relative;
      opacity: 0; }
      .reserFormLbox .bannerSec .imgFrame .img {
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1; }
    .reserFormLbox .bannerSec .chrisCloseBtn {
      cursor: pointer;
      position: absolute;
      right: 0;
      top: -55px; }
    .reserFormLbox .bannerSec .textBox {
      color: #fff;
      text-align: center;
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
      .reserFormLbox .bannerSec .textBox .title {
        font-size: 36px;
        font-size: 2.25rem;
        font-family: 'FuturaPT-Heavy','微軟正黑體';
        opacity: 0;
        -webkit-transform: translateY(100px);
        -ms-transform: translateY(100px);
        transform: translateY(100px); }
      .reserFormLbox .bannerSec .textBox .subTitle {
        font-size: 24px;
        font-size: 1.5rem;
        font-weight: 900;
        margin: 0 0 40px 0;
        opacity: 0;
        -webkit-transform: translateY(100px);
        -ms-transform: translateY(100px);
        transform: translateY(100px); }
      .reserFormLbox .bannerSec .textBox .textInfo {
        width: 100%;
        max-width: 386px;
        margin: 0 auto 65px auto;
        opacity: 0;
        -webkit-transform: translateY(100px);
        -ms-transform: translateY(100px);
        transform: translateY(100px); }
    .reserFormLbox .bannerSec .scrollBtn {
      cursor: pointer;
      color: #000;
      background-color: #fff;
      width: 290px;
      height: 95px;
      margin: 0 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      padding: 16px;
      opacity: 0; }
      .reserFormLbox .bannerSec .scrollBtn .text {
        font-size: 24px;
        font-size: 1.5rem;
        font-family: 'FuturaPT-Medium','微軟正黑體'; }
      .reserFormLbox .bannerSec .scrollBtn .subText {
        font-size: 14px;
        font-size: 0.875rem;
        font-weight: 900; }
  .reserFormLbox .mcdonald {
    padding: 90px 0; }
    .reserFormLbox .mcdonald .mcTitle {
      font-size: 22px;
      font-size: 1.375rem;
      font-family: 'FuturaPT-Heavy','微軟正黑體';
      text-align: center; }
    .reserFormLbox .mcdonald .mcSubTitle {
      font-size: 20px;
      font-size: 1.25rem;
      text-align: center;
      margin: 0 0 40px 0; }
  .reserFormLbox .mcMenu {
    color: #e1e1e1;
    width: 100%;
    max-width: 1114px;
    padding: 0 0 20px 0;
    margin: 0 auto;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start; }
    .reserFormLbox .mcMenu::-webkit-scrollbar {
      display: none; }
    .reserFormLbox .mcMenu .menuBox {
      margin: 0 auto;
      width: 100%; }
    .reserFormLbox .mcMenu.ps--active-x .menuBox {
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start; }
    .reserFormLbox .mcMenu .ps__rail-x {
      display: none !important; }
    .reserFormLbox .mcMenu .name {
      cursor: pointer;
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      padding: 0 35px;
      white-space: nowrap; }
      .reserFormLbox .mcMenu .name.now {
        color: #000; }
      .reserFormLbox .mcMenu .name:after {
        content: '';
        display: block;
        background-color: #e1e1e1;
        width: 1px;
        height: 18px;
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
      .reserFormLbox .mcMenu .name:last-child:after {
        display: none; }
  .reserFormLbox .mcFrame {
    position: relative; }
    .reserFormLbox .mcFrame textarea {
      font-size: 15px;
      font-size: 0.9375rem;
      background-color: unset; }
    .reserFormLbox .mcFrame .chrisSelect {
      width: 100%; }
    .reserFormLbox .mcFrame .dropShow {
      padding: 21.5px 10px;
      position: relative; }
    .reserFormLbox .mcFrame .name {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      margin: 0 0 45px 0;
      opacity: 0;
      -webkit-transform: translateY(100px);
      -ms-transform: translateY(100px);
      transform: translateY(100px); }
      .reserFormLbox .mcFrame .name .title {
        font-size: 22px;
        font-size: 1.375rem;
        font-family: 'FuturaPT-Heavy','微軟正黑體'; }
      .reserFormLbox .mcFrame .name .subTitle {
        font-size: 18px;
        font-size: 1.125rem;
        font-weight: 900; }
    .reserFormLbox .mcFrame .frame {
      width: 100%;
      max-width: 1114px;
      margin: 0 auto;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
      opacity: 0; }
      .reserFormLbox .mcFrame .frame.static {
        position: relative;
        z-index: 1;
        opacity: 1; }
        .reserFormLbox .mcFrame .frame.static:before {
          width: 100%;
          -webkit-transition: width 1s ease;
          -o-transition: width 1s ease;
          transition: width 1s ease; }
        .reserFormLbox .mcFrame .frame.static .name {
          opacity: 1;
          -webkit-transform: translateY(0px);
          -ms-transform: translateY(0px);
          transform: translateY(0px);
          -webkit-transition: opacity 1s ease .4s, -webkit-transform 1s ease .4s;
          transition: opacity 1s ease .4s, -webkit-transform 1s ease .4s;
          -o-transition: transform 1s ease .4s, opacity 1s ease .4s;
          transition: transform 1s ease .4s, opacity 1s ease .4s;
          transition: transform 1s ease .4s, opacity 1s ease .4s, -webkit-transform 1s ease .4s; }
        .reserFormLbox .mcFrame .frame.static .content {
          opacity: 1;
          -webkit-transform: translateY(0px);
          -ms-transform: translateY(0px);
          transform: translateY(0px);
          -webkit-transition: opacity 1s ease .6s, -webkit-transform 1s ease .6s;
          transition: opacity 1s ease .6s, -webkit-transform 1s ease .6s;
          -o-transition: transform 1s ease .6s, opacity 1s ease .6s;
          transition: transform 1s ease .6s, opacity 1s ease .6s;
          transition: transform 1s ease .6s, opacity 1s ease .6s, -webkit-transform 1s ease .6s; }
        .reserFormLbox .mcFrame .frame.static .appFrom {
          opacity: 1;
          -webkit-transition: opacity 1.5s ease .7s;
          -o-transition: opacity 1.5s ease .7s;
          transition: opacity 1.5s ease .7s; }
      .reserFormLbox .mcFrame .frame:before {
        content: '';
        display: block;
        background-color: #e1e1e1;
        width: 0%;
        height: 5px;
        margin: 0 0 45px 0;
        position: relative;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%); }
      .reserFormLbox .mcFrame .frame .bottomLine {
        border-bottom: solid 5px #e1e1e1;
        display: block; }
    .reserFormLbox .mcFrame .content {
      font-size: 15px;
      font-size: 0.9375rem;
      width: 100%;
      max-width: 815px;
      margin: 0 auto 45px auto;
      opacity: 0;
      -webkit-transform: translateY(100px);
      -ms-transform: translateY(100px);
      transform: translateY(100px); }
      .reserFormLbox .mcFrame .content .contactWay strong {
        font-size: 16px;
        font-size: 1rem;
        font-weight: normal; }
    .reserFormLbox .mcFrame .appFrom {
      width: 100%;
      max-width: 815px;
      margin: 0 auto;
      border-bottom: none;
      opacity: 0; }
      .reserFormLbox .mcFrame .appFrom .visitorNumber {
        width: auto; }
      .reserFormLbox .mcFrame .appFrom .visitDate .groupBox {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row; }
      .reserFormLbox .mcFrame .appFrom .visitDate .group {
        border-bottom: none; }
        .reserFormLbox .mcFrame .appFrom .visitDate .group .option .dropShow {
          padding: 21.5px 10px; }
      .reserFormLbox .mcFrame .appFrom .visitDate .date {
        width: 60%; }
      .reserFormLbox .mcFrame .appFrom .visitDate .field {
        width: 40%; }
        .reserFormLbox .mcFrame .appFrom .visitDate .field .option {
          width: 100%; }
      .reserFormLbox .mcFrame .appFrom .verifi {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center; }
    .reserFormLbox .mcFrame .noticeBox {
      width: 100%;
      max-width: 815px;
      margin: 0 auto;
      padding: 35px 0 45px 0; }
      .reserFormLbox .mcFrame .noticeBox .title {
        font-size: 18px;
        font-size: 1.125rem;
        font-family: 'FuturaPT-Heavy','微軟正黑體';
        text-align: center;
        margin: 0 0 40px 0; }
  @media (max-width: 1024px) {
    .reserFormLbox .container {
      width: 100%; }
    .reserFormLbox .mcdonald {
      padding: 90px 5%; }
    .reserFormLbox .mcFrame .dropShow {
      padding: 21.5px 0; }
    .reserFormLbox .mcFrame .appFrom .groupType {
      width: auto; }
      .reserFormLbox .mcFrame .appFrom .groupType .dropShow {
        width: auto; }
        .reserFormLbox .mcFrame .appFrom .groupType .dropShow .icon {
          margin-left: 20px; }
    .reserFormLbox .mcFrame .appFrom .visitDate .group .option .dropShow {
      padding: 21.5px 0; }
    .reserFormLbox .mcFrame .appFrom .visitorNumber .dropShow .icon {
      margin-left: 20px; } }
  @media (max-width: 767px) {
    .reserFormLbox .bannerSec .textBox {
      width: 100%;
      padding: 0 5%; }
    .reserFormLbox .mcFrame .appFrom .visitDate .groupBox {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
      .reserFormLbox .mcFrame .appFrom .visitDate .groupBox .date {
        width: 100%; }
      .reserFormLbox .mcFrame .appFrom .visitDate .groupBox .field {
        width: 100%; } }

.mocaPageBody[data-page=visitFacility] {
  width: 1120px; }
  .mocaPageBody[data-page=visitFacility] .category {
    border-bottom: solid 5px #000; }
  @media (max-width: 1200px) {
    .mocaPageBody[data-page=visitFacility] {
      width: 90%; } }

.mocaPageBody[data-page=visitTransport] {
  width: 1120px; }
  .mocaPageBody[data-page=visitTransport] .category {
    border-bottom: solid 5px #000; }
  @media (max-width: 1200px) {
    .mocaPageBody[data-page=visitTransport] {
      width: 90%; } }

.mocaPageBody[data-page=visitReserv] {
  width: 1120px; }
  .mocaPageBody[data-page=visitReserv] .category {
    border-bottom: solid 5px #000; }
  @media (max-width: 1200px) {
    .mocaPageBody[data-page=visitReserv] {
      width: 90%; } }

.reserFormLbox {
  background-color: #fff;
  position: fixed;
  left: -100%;
  top: -100%;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  opacity: 0; }
  .reserFormLbox.open {
    z-index: 10;
    top: 0;
    left: 0;
    opacity: 1;
    -webkit-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease; }
    .reserFormLbox.open .container {
      background-color: #f9f9f9;
      -webkit-transition: background-color 1s ease .3s;
      -o-transition: background-color 1s ease .3s;
      transition: background-color 1s ease .3s; }
    .reserFormLbox.open .bannerSec .imgFrame {
      opacity: 1;
      -webkit-transition: opacity 1s ease .3s;
      -o-transition: opacity 1s ease .3s;
      transition: opacity 1s ease .3s; }
    .reserFormLbox.open .bannerSec .textBox .title {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1s ease .3s, -webkit-transform 1s ease .3s;
      transition: opacity 1s ease .3s, -webkit-transform 1s ease .3s;
      -o-transition: opacity 1s ease .3s, transform 1s ease .3s;
      transition: opacity 1s ease .3s, transform 1s ease .3s;
      transition: opacity 1s ease .3s, transform 1s ease .3s, -webkit-transform 1s ease .3s; }
    .reserFormLbox.open .bannerSec .textBox .subTitle {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1s ease .5s, -webkit-transform 1s ease .5s;
      transition: opacity 1s ease .5s, -webkit-transform 1s ease .5s;
      -o-transition: opacity 1s ease .5s, transform 1s ease .5s;
      transition: opacity 1s ease .5s, transform 1s ease .5s;
      transition: opacity 1s ease .5s, transform 1s ease .5s, -webkit-transform 1s ease .5s; }
    .reserFormLbox.open .bannerSec .textBox .textInfo {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1s ease .7s, -webkit-transform 1s ease .7s;
      transition: opacity 1s ease .7s, -webkit-transform 1s ease .7s;
      -o-transition: opacity 1s ease .7s, transform 1s ease .7s;
      transition: opacity 1s ease .7s, transform 1s ease .7s;
      transition: opacity 1s ease .7s, transform 1s ease .7s, -webkit-transform 1s ease .7s; }
    .reserFormLbox.open .bannerSec .scrollBtn {
      opacity: 1;
      -webkit-transition: opacity 1s ease .9s;
      -o-transition: opacity 1s ease .9s;
      transition: opacity 1s ease .9s; }
  .reserFormLbox.close {
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: opacity .5s ease .3s;
    -o-transition: opacity .5s ease .3s;
    transition: opacity .5s ease .3s; }
    .reserFormLbox.close .container {
      background-color: #fff;
      -webkit-transition: background-color .5s ease;
      -o-transition: background-color .5s ease;
      transition: background-color .5s ease; }
    .reserFormLbox.close .bannerSec {
      opacity: 0;
      -webkit-transition: opacity 1s ease;
      -o-transition: opacity 1s ease;
      transition: opacity 1s ease; }
  @media (max-width: 600px) {
    .reserFormLbox .for_scroll {
      padding: 0; } }
  .reserFormLbox .container {
    background-color: #fff;
    width: 90%;
    max-width: 1700px;
    margin: 0 auto; }
  .reserFormLbox .bannerSec {
    position: relative; }
    .reserFormLbox .bannerSec .imgFrame {
      background-color: #d8d8d8;
      background-repeat: no-repeat;
      background-position: center;
      width: 100%;
      height: 860px;
      position: relative;
      opacity: 0; }
      @media (max-width: 600px) {
        .reserFormLbox .bannerSec .imgFrame {
          height: 100vh;
          min-height: 500px; } }
      .reserFormLbox .bannerSec .imgFrame .img {
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1; }
    .reserFormLbox .bannerSec .chrisCloseBtn {
      cursor: pointer;
      position: absolute;
      right: 0;
      top: 0;
      top: -55px; }
      @media (max-width: 600px) {
        .reserFormLbox .bannerSec .chrisCloseBtn {
          background: #000;
          width: 50px;
          height: 50px;
          top: 0; }
          .reserFormLbox .bannerSec .chrisCloseBtn .text {
            display: none; } }
    .reserFormLbox .bannerSec .textBox {
      color: #fff;
      text-align: center;
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
      .reserFormLbox .bannerSec .textBox .title {
        font-size: 36px;
        font-size: 2.25rem;
        font-family: 'FuturaPT-Heavy','微軟正黑體';
        opacity: 0;
        -webkit-transform: translateY(100px);
        -ms-transform: translateY(100px);
        transform: translateY(100px); }
      .reserFormLbox .bannerSec .textBox .subTitle {
        font-size: 24px;
        font-size: 1.5rem;
        font-weight: 900;
        margin: 0 0 40px 0;
        opacity: 0;
        -webkit-transform: translateY(100px);
        -ms-transform: translateY(100px);
        transform: translateY(100px); }
      .reserFormLbox .bannerSec .textBox .textInfo {
        width: 100%;
        max-width: 386px;
        margin: 0 auto 65px auto;
        opacity: 0;
        -webkit-transform: translateY(100px);
        -ms-transform: translateY(100px);
        transform: translateY(100px); }
    .reserFormLbox .bannerSec .scrollBtn {
      cursor: pointer;
      color: #000;
      background-color: #fff;
      width: 290px;
      height: 95px;
      margin: 0 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      padding: 16px;
      opacity: 0; }
      .reserFormLbox .bannerSec .scrollBtn .text {
        font-size: 24px;
        font-size: 1.5rem;
        font-family: 'FuturaPT-Medium','微軟正黑體'; }
      .reserFormLbox .bannerSec .scrollBtn .subText {
        font-size: 14px;
        font-size: 0.875rem;
        font-weight: 900; }
  .reserFormLbox .mcdonald {
    padding: 90px 0; }
    .reserFormLbox .mcdonald .mcTitle {
      font-size: 22px;
      font-size: 1.375rem;
      font-family: 'FuturaPT-Heavy','微軟正黑體';
      text-align: center; }
    .reserFormLbox .mcdonald .mcSubTitle {
      font-size: 20px;
      font-size: 1.25rem;
      text-align: center;
      margin: 0 0 40px 0; }
  .reserFormLbox .mcMenu {
    color: #e1e1e1;
    width: 100%;
    max-width: 1114px;
    padding: 0 0 20px 0;
    margin: 0 auto;
    position: relative;
    white-space: nowrap;
    text-align: center;
    display: block; }
    .reserFormLbox .mcMenu .name {
      cursor: pointer;
      position: relative;
      display: inline-block;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      padding: 0 35px; }
      @media (max-width: 767px) {
        .reserFormLbox .mcMenu .name {
          padding: 0 15px; } }
      .reserFormLbox .mcMenu .name.now {
        color: #000;
        font-weight: bold; }
      .reserFormLbox .mcMenu .name:after {
        content: '';
        display: block;
        background-color: #e1e1e1;
        width: 1px;
        height: 18px;
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
      .reserFormLbox .mcMenu .name:last-child:after {
        display: none; }
  .reserFormLbox .mcFrame {
    position: relative; }
    .reserFormLbox .mcFrame textarea {
      font-size: 15px;
      font-size: 0.9375rem;
      background-color: unset; }
    .reserFormLbox .mcFrame .chrisSelect {
      width: 100%; }
    .reserFormLbox .mcFrame .dropShow {
      padding: 21.5px 10px;
      position: relative; }
    .reserFormLbox .mcFrame .name {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      margin: 0 0 45px 0;
      opacity: 0;
      -webkit-transform: translateY(100px);
      -ms-transform: translateY(100px);
      transform: translateY(100px); }
      .reserFormLbox .mcFrame .name .title {
        font-size: 22px;
        font-size: 1.375rem;
        font-family: 'FuturaPT-Heavy','微軟正黑體'; }
      .reserFormLbox .mcFrame .name .subTitle {
        font-size: 18px;
        font-size: 1.125rem;
        font-weight: 900; }
    .reserFormLbox .mcFrame .frame {
      width: 100%;
      max-width: 1114px;
      margin: 0 auto;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
      opacity: 0; }
      .reserFormLbox .mcFrame .frame.static {
        position: relative;
        z-index: 1;
        opacity: 1; }
        .reserFormLbox .mcFrame .frame.static:before {
          width: 100%;
          -webkit-transition: width 1s ease;
          -o-transition: width 1s ease;
          transition: width 1s ease; }
        .reserFormLbox .mcFrame .frame.static .name {
          opacity: 1;
          -webkit-transform: translateY(0px);
          -ms-transform: translateY(0px);
          transform: translateY(0px);
          -webkit-transition: opacity 1s ease .4s, -webkit-transform 1s ease .4s;
          transition: opacity 1s ease .4s, -webkit-transform 1s ease .4s;
          -o-transition: transform 1s ease .4s, opacity 1s ease .4s;
          transition: transform 1s ease .4s, opacity 1s ease .4s;
          transition: transform 1s ease .4s, opacity 1s ease .4s, -webkit-transform 1s ease .4s; }
        .reserFormLbox .mcFrame .frame.static .content {
          opacity: 1;
          -webkit-transform: translateY(0px);
          -ms-transform: translateY(0px);
          transform: translateY(0px);
          -webkit-transition: opacity 1s ease .6s, -webkit-transform 1s ease .6s;
          transition: opacity 1s ease .6s, -webkit-transform 1s ease .6s;
          -o-transition: transform 1s ease .6s, opacity 1s ease .6s;
          transition: transform 1s ease .6s, opacity 1s ease .6s;
          transition: transform 1s ease .6s, opacity 1s ease .6s, -webkit-transform 1s ease .6s; }
        .reserFormLbox .mcFrame .frame.static .appFrom {
          opacity: 1;
          -webkit-transition: opacity 1.5s ease .7s;
          -o-transition: opacity 1.5s ease .7s;
          transition: opacity 1.5s ease .7s; }
      .reserFormLbox .mcFrame .frame:before {
        content: '';
        display: block;
        background-color: #e1e1e1;
        width: 0%;
        height: 5px;
        margin: 0 0 45px 0;
        position: relative;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%); }
      .reserFormLbox .mcFrame .frame .bottomLine {
        border-bottom: solid 5px #e1e1e1;
        display: block; }
    .reserFormLbox .mcFrame .content {
      font-size: 15px;
      font-size: 0.9375rem;
      width: 100%;
      max-width: 815px;
      margin: 0 auto 45px auto;
      opacity: 0;
      -webkit-transform: translateY(100px);
      -ms-transform: translateY(100px);
      transform: translateY(100px); }
      .reserFormLbox .mcFrame .content .contactWay strong {
        font-size: 16px;
        font-size: 1rem;
        font-weight: normal; }
    .reserFormLbox .mcFrame .appFrom {
      width: 100%;
      max-width: 815px;
      margin: 0 auto;
      border-bottom: none;
      opacity: 0; }
      .reserFormLbox .mcFrame .appFrom .visitorNumber {
        width: auto; }
      .reserFormLbox .mcFrame .appFrom .visitDate .groupBox {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row; }
      .reserFormLbox .mcFrame .appFrom .visitDate .group {
        border-bottom: none; }
        .reserFormLbox .mcFrame .appFrom .visitDate .group .option .dropShow {
          padding: 21.5px 10px; }
      .reserFormLbox .mcFrame .appFrom .visitDate .date {
        width: 60%; }
      .reserFormLbox .mcFrame .appFrom .visitDate .field {
        width: 40%; }
        .reserFormLbox .mcFrame .appFrom .visitDate .field .option {
          width: 100%; }
      .reserFormLbox .mcFrame .appFrom .verifi {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center; }
    .reserFormLbox .mcFrame .noticeBox {
      width: 100%;
      max-width: 815px;
      margin: 0 auto;
      padding: 35px 0 45px 0; }
      .reserFormLbox .mcFrame .noticeBox .title {
        font-size: 18px;
        font-size: 1.125rem;
        font-family: 'FuturaPT-Heavy','微軟正黑體';
        text-align: center;
        margin: 0 0 40px 0; }
  @media (max-width: 1024px) {
    .reserFormLbox .container {
      width: 100%; }
    .reserFormLbox .mcdonald {
      padding: 90px 5%; }
    .reserFormLbox .mcFrame .dropShow {
      padding: 21.5px 0; }
    .reserFormLbox .mcFrame .appFrom .groupType {
      width: auto; }
      .reserFormLbox .mcFrame .appFrom .groupType .dropShow {
        width: auto; }
        .reserFormLbox .mcFrame .appFrom .groupType .dropShow .icon {
          margin-left: 20px; }
    .reserFormLbox .mcFrame .appFrom .visitDate .group .option .dropShow {
      padding: 21.5px 0; }
    .reserFormLbox .mcFrame .appFrom .visitorNumber .dropShow .icon {
      margin-left: 20px; } }
  @media (max-width: 767px) {
    .reserFormLbox .bannerSec .textBox {
      width: 100%;
      padding: 0 5%; }
    .reserFormLbox .mcFrame .appFrom .visitDate .groupBox {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
      .reserFormLbox .mcFrame .appFrom .visitDate .groupBox .date {
        width: 100%; }
      .reserFormLbox .mcFrame .appFrom .visitDate .groupBox .field {
        width: 100%; } }

.clickScrollArea {
  max-width: 90%;
  margin: 0 auto 170px auto;
  -webkit-transform: translateY(100px);
  -ms-transform: translateY(100px);
  transform: translateY(100px);
  opacity: 0;
  overflow: hidden; }
  .clickScrollArea .ps__rail-x {
    opacity: 0;
    display: none !important; }
  .clickScrollArea.show {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
    -webkit-transition: opacity 1s ease .5s, -webkit-transform 1s ease .5s;
    transition: opacity 1s ease .5s, -webkit-transform 1s ease .5s;
    -o-transition: opacity 1s ease .5s, transform 1s ease .5s;
    transition: opacity 1s ease .5s, transform 1s ease .5s;
    transition: opacity 1s ease .5s, transform 1s ease .5s, -webkit-transform 1s ease .5s; }
  .clickScrollArea .box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
  .clickScrollArea .link {
    color: #aaa;
    font-size: 15px;
    font-size: 0.9375rem;
    padding: 16px 15px;
    margin: 0;
    position: relative;
    -webkit-transition: color .5s ease;
    -o-transition: color .5s ease;
    transition: color .5s ease; }
    .clickScrollArea .link.now {
      color: #000;
      font-weight: bold; }
      .clickScrollArea .link.now .text:after {
        width: calc(100% - 30px); }
    @media (min-width: 767px) {
      .clickScrollArea .link:hover {
        color: #000;
        font-weight: bold; }
        .clickScrollArea .link:hover .text:after {
          width: calc(100% - 30px); } }
    .clickScrollArea .link .text:before {
      content: '';
      display: block;
      background-color: #aaa;
      width: calc(100% - 30px);
      height: 2px;
      position: absolute;
      left: 50%;
      bottom: 0;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%); }
    .clickScrollArea .link .text:after {
      content: '';
      display: block;
      background-color: #000;
      width: 0;
      height: 2px;
      position: absolute;
      left: 50%;
      bottom: 0;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      -webkit-transition: width .4s ease;
      -o-transition: width .4s ease;
      transition: width .4s ease; }
  .clickScrollArea .ps__rail-x, .clickScrollArea .ps__thumb-x {
    max-height: 3px; }
  @media (max-width: 767px) {
    .clickScrollArea {
      margin: 0 auto 60px auto; }
      .clickScrollArea .box {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        padding: 0 0 10px 0; }
      .clickScrollArea .link {
        padding: 16px 10px;
        white-space: nowrap; } }

.appIcon {
  background-color: #e83434;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  margin: 0 auto 15px auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0); }

.appTitle {
  font-size: 24px;
  font-size: 1.5rem;
  font-weight: 900;
  text-align: center;
  padding: 0 20px;
  margin: 0 0 40px 0;
  opacity: 0; }

.appImgFrame {
  opacity: 0; }
  .appImgFrame .title {
    font-size: 16px;
    font-size: 1rem;
    margin: 0 0 21px 0;
    padding: 0 15px; }
  .appImgFrame .full {
    position: relative;
    margin: 0 0 45px 0;
    padding: 0 15px; }
    .appImgFrame .full .bg {
      background-color: rgba(0, 0, 0, 0);
      width: 100vw;
      height: 100vh;
      position: fixed;
      left: -200vw;
      top: -200vh;
      z-index: 1;
      opacity: 0;
      -webkit-transition: background-color 1s ease, opacity 1s ease, left 0s ease 1s, top 0s ease 1s;
      -o-transition: background-color 1s ease, opacity 1s ease, left 0s ease 1s, top 0s ease 1s;
      transition: background-color 1s ease, opacity 1s ease, left 0s ease 1s, top 0s ease 1s; }
    .appImgFrame .full .imgFrame .img {
      -webkit-transition: -webkit-transform 1s ease;
      transition: -webkit-transform 1s ease;
      -o-transition: transform 1s ease;
      transition: transform 1s ease;
      transition: transform 1s ease, -webkit-transform 1s ease; }
    .appImgFrame .full .imgFrame:hover + .bg {
      z-index: 10;
      left: 0;
      top: 0;
      background-color: rgba(0, 0, 0, 0.5);
      opacity: 1;
      -webkit-transition: background-color .5s ease, opacity 1s ease, left 0s ease, top 0s ease;
      -o-transition: background-color .5s ease, opacity 1s ease, left 0s ease, top 0s ease;
      transition: background-color .5s ease, opacity 1s ease, left 0s ease, top 0s ease; }
    .appImgFrame .full .imgFrame:hover .img {
      position: relative;
      z-index: 11;
      -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
      transform: scale(1.2); }
  .appImgFrame .wall {
    margin: 0 0 45px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
    .appImgFrame .wall .list {
      width: 33.3333%;
      padding: 0 15px;
      margin: 0 0 30px 0px; }
    .appImgFrame .wall .hoverBox {
      background-color: rgba(0, 0, 0, 0);
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-transition: background-color .5s ease .2s;
      -o-transition: background-color .5s ease .2s;
      transition: background-color .5s ease .2s; }
      .appImgFrame .wall .hoverBox .text {
        color: #fff;
        font-size: 16px;
        font-size: 1rem;
        opacity: 0;
        -webkit-transform: translateY(100px);
        -ms-transform: translateY(100px);
        transform: translateY(100px);
        -webkit-transition: opacity .5s ease, -webkit-transform .5s ease;
        transition: opacity .5s ease, -webkit-transform .5s ease;
        -o-transition: opacity .5s ease, transform .5s ease;
        transition: opacity .5s ease, transform .5s ease;
        transition: opacity .5s ease, transform .5s ease, -webkit-transform .5s ease; }
        .appImgFrame .wall .hoverBox .text:after {
          content: '';
          display: block;
          background-color: #fff;
          width: 20px;
          height: 1px;
          margin: 10px auto 0 auto; }
    .appImgFrame .wall .imgFrame {
      cursor: pointer;
      margin: 0 0 15px 0;
      position: relative; }
      .appImgFrame .wall .imgFrame:hover .hoverBox {
        background-color: rgba(0, 0, 0, 0.5);
        -webkit-transition: background-color .7s ease;
        -o-transition: background-color .7s ease;
        transition: background-color .7s ease; }
        .appImgFrame .wall .imgFrame:hover .hoverBox .text {
          opacity: 1;
          -webkit-transform: translateY(0px);
          -ms-transform: translateY(0px);
          transform: translateY(0px);
          -webkit-transition: opacity .7s ease .2s, -webkit-transform .7s ease .2s;
          transition: opacity .7s ease .2s, -webkit-transform .7s ease .2s;
          -o-transition: opacity .7s ease .2s, transform .7s ease .2s;
          transition: opacity .7s ease .2s, transform .7s ease .2s;
          transition: opacity .7s ease .2s, transform .7s ease .2s, -webkit-transform .7s ease .2s; }
      .appImgFrame .wall .imgFrame .img {
        width: 100%; }
    .appImgFrame .wall .albumName {
      font-size: 16px;
      font-size: 1rem;
      text-align: center; }
  @media (max-width: 767px) {
    .appImgFrame .full .imgFrame:hover + .bg {
      background-color: rgba(0, 0, 0, 0);
      position: fixed;
      left: -200vw;
      top: -200vh;
      z-index: 1;
      opacity: 0; }
    .appImgFrame .full .imgFrame:hover .img {
      position: relative;
      z-index: 1;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none; }
    .appImgFrame .wall .list {
      width: 50%; }
    .appImgFrame .wall .imgFrame {
      margin: 0 auto 15px auto;
      max-width: 255px; } }
  @media (max-width: 600px) {
    .appImgFrame .wall .list {
      width: 100%; } }

.appDownload {
  border-top: solid 1px #b2b2b2;
  opacity: 0;
  -webkit-transform: translateY(100px);
  -ms-transform: translateY(100px);
  transform: translateY(100px); }
  .appDownload .list {
    font-size: 19px;
    font-size: 1.1875rem;
    font-family: 'FuturaPT-Medium','微軟正黑體';
    position: relative; }
    .appDownload .list:hover:before {
      width: 100%; }
    .appDownload .list:before {
      content: '';
      display: block;
      background-color: #e83434;
      width: 0;
      height: 1px;
      position: absolute;
      left: 0;
      bottom: 0;
      -webkit-transition: width 1s ease;
      -o-transition: width 1s ease;
      transition: width 1s ease; }
    .appDownload .list:after {
      content: '';
      display: block;
      background-color: #b2b2b2;
      width: 100%;
      height: 1px; }
    .appDownload .list .icon {
      width: 30px;
      height: 30px;
      display: block;
      padding: 0 20px;
      margin-left: auto;
      background-repeat: no-repeat;
      background-position: center;
      -webkit-box-sizing: unset;
      box-sizing: unset; }
  .appDownload .link {
    padding: 35px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }

.appTextInfo {
  opacity: 0;
  -webkit-transform: translateY(100px);
  -ms-transform: translateY(100px);
  transform: translateY(100px); }
  .appTextInfo.multiple {
    position: relative; }
    .appTextInfo.multiple .list {
      overflow: hidden;
      position: relative;
      padding: 35px 0;
      margin-top: -1px; }
      .appTextInfo.multiple .list.open .line:before, .appTextInfo.multiple .list.open .line:after {
        background-color: #000;
        width: 100%;
        -webkit-transition: width 1s ease;
        -o-transition: width 1s ease;
        transition: width 1s ease; }
      .appTextInfo.multiple .list.open .titleBox {
        margin: 0 0 60px 0; }
        .appTextInfo.multiple .list.open .titleBox .iconBox {
          top: auto;
          bottom: 0; }
        .appTextInfo.multiple .list.open .titleBox .icon.open {
          opacity: 0; }
        .appTextInfo.multiple .list.open .titleBox .icon.close {
          opacity: 1; }
      .appTextInfo.multiple .list:before, .appTextInfo.multiple .list:after {
        content: '';
        display: block;
        background-color: #b2b2b2;
        width: 100%;
        height: 1px;
        position: absolute;
        z-index: 0;
        left: 0; }
      .appTextInfo.multiple .list:before {
        top: 0; }
      .appTextInfo.multiple .list:after {
        bottom: 0; }
      .appTextInfo.multiple .list .line:before, .appTextInfo.multiple .list .line:after {
        content: '';
        display: block;
        background-color: #b2b2b2;
        width: 0%;
        height: 2px;
        position: absolute;
        z-index: 1;
        left: 0; }
      .appTextInfo.multiple .list .line:before {
        top: 0; }
      .appTextInfo.multiple .list .line:after {
        bottom: 0; }
    .appTextInfo.multiple .extendBox {
      display: none; }
    .appTextInfo.multiple .titleBox {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      margin: 0; }
      .appTextInfo.multiple .titleBox .iconBox {
        display: block;
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
      .appTextInfo.multiple .titleBox .icon {
        font-size: 30px;
        font-size: 1.875rem; }
        .appTextInfo.multiple .titleBox .icon.close {
          opacity: 0;
          position: absolute;
          left: 50%;
          top: 50%;
          -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          font-size: 16px;
          font-size: 1rem; }
  .appTextInfo .extendBox .content {
    padding: 35px 0 0 0; }
    .appTextInfo .extendBox .content .title {
      font-weight: 900;
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      margin: 0 0 10px 0; }
      .appTextInfo .extendBox .content .title:before, .appTextInfo .extendBox .content .title:after {
        content: '';
        display: block;
        background-color: #000;
        width: 2px;
        height: 18px; }
      .appTextInfo .extendBox .content .title:before {
        margin-right: 10px; }
      .appTextInfo .extendBox .content .title:after {
        margin-left: 10px; }
    .appTextInfo .extendBox .content .text {
      font-size: 16px;
      font-size: 1rem; }
  .appTextInfo .titleBox {
    margin: 0 0 60px 0; }
    .appTextInfo .titleBox .iconBox {
      display: none; }
  .appTextInfo .infoTitle {
    font-size: 19px;
    font-size: 1.1875rem;
    font-family: 'FuturaPT-Medium','微軟正黑體';
    width: calc(100% - 60px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    .appTextInfo .infoTitle span {
      margin-right: 10px; }
      .appTextInfo .infoTitle span:last-child {
        margin: 0; }
  .appTextInfo .infoText {
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.8; }
  .appTextInfo .memo {
    padding: 30px 0 0 0; }
    .appTextInfo .memo .line {
      background-color: #999;
      width: 30px;
      height: 1px;
      margin: 0 0 30px 0;
      display: block; }
    .appTextInfo .memo .text {
      font-size: 15px;
      font-size: 0.9375rem;
      margin: 0 0 10px 0; }
      .appTextInfo .memo .text:last-child {
        margin: 0; }
    .appTextInfo .memo .mac {
      font-size: 1.0625rem;
      font-family: 'FuturaPT-Medium','微軟正黑體'; }
  @media (max-width: 767px) {
    .appTextInfo.multiple .titleBox .iconBox {
      -webkit-transform: translateY(-30%);
      -ms-transform: translateY(-30%);
      transform: translateY(-30%); } }

.secCommon {
  width: 100%;
  max-width: 815px;
  margin: 0 auto 150px auto; }
  .secCommon.show .appIcon {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform 1s ease;
    transition: -webkit-transform 1s ease;
    -o-transition: transform 1s ease;
    transition: transform 1s ease;
    transition: transform 1s ease, -webkit-transform 1s ease; }
  .secCommon.show .appTitle {
    opacity: 1;
    -webkit-transition: opacity 1s ease .3s;
    -o-transition: opacity 1s ease .3s;
    transition: opacity 1s ease .3s; }
  .secCommon.show .appImgFrame {
    opacity: 1;
    -webkit-transition: opacity 1.5s ease .5s;
    -o-transition: opacity 1.5s ease .5s;
    transition: opacity 1.5s ease .5s; }
  .secCommon.show .appDownload, .secCommon.show .appTextInfo {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: opacity 1.5s ease .5s, -webkit-transform 1.5s ease .5s;
    transition: opacity 1.5s ease .5s, -webkit-transform 1.5s ease .5s;
    -o-transition: opacity 1.5s ease .5s, transform 1.5s ease .5s;
    transition: opacity 1.5s ease .5s, transform 1.5s ease .5s;
    transition: opacity 1.5s ease .5s, transform 1.5s ease .5s, -webkit-transform 1.5s ease .5s; }
  .secCommon.show .appFormInfo {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: opacity 1.5s ease .5s, -webkit-transform 1.5s ease .5s;
    transition: opacity 1.5s ease .5s, -webkit-transform 1.5s ease .5s;
    -o-transition: opacity 1.5s ease .5s, transform 1.5s ease .5s;
    transition: opacity 1.5s ease .5s, transform 1.5s ease .5s;
    transition: opacity 1.5s ease .5s, transform 1.5s ease .5s, -webkit-transform 1.5s ease .5s; }
  .secCommon.show .appFormSec {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: opacity 1.5s ease .8s, -webkit-transform 1.5s ease .8s;
    transition: opacity 1.5s ease .8s, -webkit-transform 1.5s ease .8s;
    -o-transition: opacity 1.5s ease .8s, transform 1.5s ease .8s;
    transition: opacity 1.5s ease .8s, transform 1.5s ease .8s;
    transition: opacity 1.5s ease .8s, transform 1.5s ease .8s, -webkit-transform 1.5s ease .8s; }
  @media (max-width: 1023px) {
    .secCommon {
      width: 90%; } }
  @media (max-width: 767px) {
    .secCommon {
      margin: 0 auto 100px auto; } }

/**/
.appSec2 {
  max-width: 845px;
  margin: 0 auto; }

.appSec2Lbox {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  .appSec2Lbox.open {
    z-index: 10; }
    .appSec2Lbox.open .bg {
      background-color: rgba(232, 52, 52, 0.9);
      -webkit-transition: background-color 1s ease;
      -o-transition: background-color 1s ease;
      transition: background-color 1s ease; }
    .appSec2Lbox.open .for_scroll {
      opacity: 1;
      -webkit-transition: opacity 1.5s ease .5s;
      -o-transition: opacity 1.5s ease .5s;
      transition: opacity 1.5s ease .5s; }
      .appSec2Lbox.open .for_scroll .closeBtn {
        opacity: 1;
        -webkit-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px);
        -webkit-transition: opacity 1.5s ease .5s, -webkit-transform 1.5s ease .5s;
        transition: opacity 1.5s ease .5s, -webkit-transform 1.5s ease .5s;
        -o-transition: opacity 1.5s ease .5s, transform 1.5s ease .5s;
        transition: opacity 1.5s ease .5s, transform 1.5s ease .5s;
        transition: opacity 1.5s ease .5s, transform 1.5s ease .5s, -webkit-transform 1.5s ease .5s; }
  .appSec2Lbox.close .bg {
    background-color: rgba(232, 52, 52, 0);
    -webkit-transition: background-color .7s ease .5s;
    -o-transition: background-color .7s ease .5s;
    transition: background-color .7s ease .5s; }
  .appSec2Lbox.close .for_scroll {
    opacity: 0;
    -webkit-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease; }
    .appSec2Lbox.close .for_scroll .closeBtn {
      opacity: 0;
      -webkit-transform: translateX(0px);
      -ms-transform: translateX(0px);
      transform: translateX(0px);
      -webkit-transition: opacity .5s ease, -webkit-transform .5s ease;
      transition: opacity .5s ease, -webkit-transform .5s ease;
      -o-transition: opacity .5s ease, transform .5s ease;
      transition: opacity .5s ease, transform .5s ease;
      transition: opacity .5s ease, transform .5s ease, -webkit-transform .5s ease; }
  .appSec2Lbox .bg {
    background-color: rgba(232, 52, 52, 0);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1; }
  .appSec2Lbox .for_scroll {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: 0; }
    .appSec2Lbox .for_scroll .closeBtn {
      opacity: 0;
      -webkit-transform: translateX(-100px);
      -ms-transform: translateX(-100px);
      transform: translateX(-100px);
      cursor: pointer;
      color: #fff;
      position: absolute;
      right: -125px;
      top: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      .appSec2Lbox .for_scroll .closeBtn .a-btnClose__x {
        width: 40px;
        height: 40px; }
        .appSec2Lbox .for_scroll .closeBtn .a-btnClose__x:before, .appSec2Lbox .for_scroll .closeBtn .a-btnClose__x:after {
          background-color: #f29090;
          top: 50%; }
  .appSec2Lbox .content {
    position: relative;
    background-color: #fff;
    padding: 30px; }
  .appSec2Lbox .frameBox {
    max-width: 860px;
    opacity: 0; }
    .appSec2Lbox .frameBox.show {
      opacity: 1; }
    .appSec2Lbox .frameBox .slick-track {
      display: block; }
    .appSec2Lbox .frameBox .slick-list, .appSec2Lbox .frameBox .slick-track {
      height: auto; }
    .appSec2Lbox .frameBox .imgFrame {
      position: relative;
      max-width: 860px;
      max-height: 500px; }
    .appSec2Lbox .frameBox .note {
      font-size: 14px;
      font-size: 0.875rem;
      line-height: 1.5;
      color: #fff;
      background-color: rgba(255, 255, 255, 0.5);
      width: 90%;
      height: 46px;
      padding: 0 20px;
      position: absolute;
      left: 50%;
      bottom: 0;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-all; }
  .appSec2Lbox .paginator {
    font-size: 14px;
    font-size: 0.875rem;
    padding: 30px 0 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative; }
    .appSec2Lbox .paginator .text {
      font-family: 'FuturaPT-Light','微軟正黑體'; }
    .appSec2Lbox .paginator .prev {
      -webkit-box-pack: end;
      -ms-flex-pack: end;
      justify-content: flex-end; }
    .appSec2Lbox .paginator .next {
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start; }
    .appSec2Lbox .paginator .btn {
      cursor: pointer;
      color: #000;
      width: 50%;
      margin: 0 10px;
      position: relative;
      bottom: 0;
      left: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
      .appSec2Lbox .paginator .btn .text {
        padding: 0 20px; }
      .appSec2Lbox .paginator .btn span {
        background-color: #9f9f9f;
        position: relative; }
        .appSec2Lbox .paginator .btn span:before, .appSec2Lbox .paginator .btn span:after {
          background-color: #9f9f9f; }
  @media (max-width: 1300px) {
    .appSec2Lbox .for_scroll .closeBtn {
      background-color: #000;
      width: 170px;
      height: 60px;
      right: 0;
      top: -60px;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
      .appSec2Lbox .for_scroll .closeBtn .a-btnClose__x:before, .appSec2Lbox .for_scroll .closeBtn .a-btnClose__x:after {
        background-color: #656565; } }
  @media (max-width: 1024px) {
    .appSec2Lbox .for_scroll {
      width: 100%;
      max-width: 920px; }
    .appSec2Lbox .content {
      width: 100%;
      max-width: 920px; }
    .appSec2Lbox .frameBox {
      width: 100%; } }
  @media (max-width: 767px) {
    .appSec2Lbox .content {
      padding: 15px; }
    .appSec2Lbox .frameBox .imgFrame {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
      .appSec2Lbox .frameBox .imgFrame .img {
        margin: 0 0 20px 0; }
    .appSec2Lbox .frameBox .note {
      height: 100%;
      max-height: 115px;
      -webkit-line-clamp: 5;
      position: relative;
      width: 100%;
      margin: 0 0 20px 0; }
    .appSec2Lbox .paginator {
      padding: 0; } }

/*appSec4*/
/*appFrom*/
.appFormInfo {
  margin: 0 0 30px 0;
  opacity: 0;
  -webkit-transform: translateY(100px);
  -ms-transform: translateY(100px);
  transform: translateY(100px); }

.appFormSec {
  opacity: 0;
  -webkit-transform: translateY(100px);
  -ms-transform: translateY(100px);
  transform: translateY(100px); }
  .appFormSec .formTitle {
    font-size: 18px;
    font-size: 1.125rem;
    border-top: solid 3px #000;
    border-bottom: solid 3px #000;
    font-weight: 900;
    font-family: 'FuturaPT-Heavy','微軟正黑體';
    text-align: center;
    padding: 20px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
    .appFormSec .formTitle:first-child {
      border-top: none; }
    .appFormSec .formTitle span:first-child {
      margin-right: 10px; }

.appFrom {
  font-size: 15px;
  font-size: 0.9375rem;
  font-weight: 900;
  border-top: solid 3px #000;
  border-bottom: solid 3px #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }
  .appFrom textarea {
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 1.6; }
  .appFrom .w50 {
    width: calc(50% - 15px); }
  .appFrom .w100 {
    width: 100%; }
  .appFrom .keyInBox {
    border-bottom: solid 1px #b4b4b4;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start; }
    .appFrom .keyInBox .lableTitle {
      white-space: nowrap;
      margin-right: 30px;
      padding: 25px 0;
      font-family: 'FuturaPT-Heavy','微軟正黑體'; }
      .appFrom .keyInBox .lableTitle span {
        margin-right: 6px; }
        .appFrom .keyInBox .lableTitle span:last-child {
          margin: 0; }
    .appFrom .keyInBox input {
      font: inherit;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      border: none;
      font-size: 14px;
      font-size: 0.875rem;
      width: 100%;
      padding: 23px 0;
      background: none; }
    .appFrom .keyInBox .code {
      position: relative; }
  .appFrom .schoolBox {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .appFrom .schoolBox .schoolOption {
      width: 33.33%;
      text-align: center;
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      .appFrom .schoolBox .schoolOption:after {
        content: '';
        display: block;
        background-color: #000;
        width: 1px;
        height: 18px; }
      .appFrom .schoolBox .schoolOption input {
        padding: 23px 10px;
        text-align: center; }
      .appFrom .schoolBox .schoolOption .showBox {
        width: 100%; }
  .appFrom .customRadioBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .appFrom .customRadioBox .customRadio {
      font-size: 15px;
      font-size: 0.9375rem;
      padding: 23px 27px 23px 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      .appFrom .customRadioBox .customRadio input:checked ~ .checkmark {
        background-color: #000; }
      .appFrom .customRadioBox .customRadio input:checked ~ .checkmark:after {
        display: none; }
    .appFrom .customRadioBox .checkmark {
      background-color: #fff;
      border-radius: unset;
      border: solid 1px #000;
      width: 13px;
      height: 13px;
      margin: 0 5px 0 0;
      position: relative;
      display: block; }
  .appFrom .textareaBox {
    padding: 0 0 23px 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start; }
    .appFrom .textareaBox textarea {
      font: inherit;
      border: none;
      letter-spacing: 0.5px;
      font-size: 14px;
      font-size: 0.875rem;
      width: 100%;
      height: 285px;
      line-height: 1.6;
      letter-spacing: 0.5px; }
  .appFrom .advise textarea {
    height: 125px; }
  .appFrom .groupFrame {
    width: 100%; }
  .appFrom .groupBox {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
    .appFrom .groupBox .group {
      border-bottom: solid 1px #b4b4b4; }
      .appFrom .groupBox .group:last-child {
        border-bottom: none; }
      .appFrom .groupBox .group .option:last-child:after {
        display: block; }
  .appFrom .group {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .appFrom .group.originType {
      display: none; }
    .appFrom .group input {
      text-align: center; }
    .appFrom .group .option {
      -webkit-box-flex: 1;
      -ms-flex: 1 1 33%;
      flex: 1 1 33%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      .appFrom .group .option:last-child:after {
        display: none; }
      .appFrom .group .option:after {
        content: '';
        display: block;
        background-color: #b4b4b4;
        width: 1px;
        height: 18px; }
      .appFrom .group .option .chrisSelect {
        width: 100%; }
      .appFrom .group .option .dropShow {
        padding: 16px 10px; }
      .appFrom .group .option .showBox {
        width: 100%;
        text-align: center; }
      .appFrom .group .option .name {
        width: 100%;
        padding: 0 10px 0 0; }
  .appFrom .hobbie {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0 0 16px 0; }
    .appFrom .hobbie textarea {
      border: none;
      width: 100%;
      height: 60px; }
  .appFrom .experience {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0 0 16px 0; }
    .appFrom .experience textarea {
      border: none;
      width: 100%;
      height: 150px; }
  .appFrom .serveTime {
    border-bottom: solid 1px #b4b4b4;
    padding: 50px 0 20px 0; }
    .appFrom .serveTime .text {
      font-size: 15px;
      font-size: 0.9375rem;
      margin: 0 0 20px 0; }
    .appFrom .serveTime .option {
      min-width: 215px;
      width: auto;
      max-width: 33.33%; }
      .appFrom .serveTime .option:last-child:after {
        display: block; }
    .appFrom .serveTime .nameOp {
      min-width: 65px; }
  .appFrom .language .group .option {
    width: 40%; }
  .appFrom .language .group .delete {
    width: 20%; }
  .appFrom .language .group .deleteBtn {
    cursor: pointer;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
  .appFrom .language .increaseBtn {
    cursor: pointer;
    font-size: 14px;
    font-size: 0.875rem;
    padding: 16px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
  .appFrom .language .cicon {
    font-family: '微軟正黑體';
    border-radius: 50%;
    border: solid 1px #000;
    width: 17px;
    height: 17px;
    margin: 0 6px 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative; }
  .appFrom .remark {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    .appFrom .remark textarea {
      font-size: 15px;
      font-size: 0.9375rem;
      font-family: 'FuturaPT-Book', '微軟正黑體';
      letter-spacing: 0.5px;
      border: none;
      width: 100%;
      height: 150px;
      margin: 0 0 20px 0; }
  .appFrom .artTopic {
    width: 100%;
    height: 100%; }
    .appFrom .artTopic .dropShow {
      cursor: pointer;
      height: 100%;
      padding: 0 20px 0 0;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; }
  @media (max-width: 1023px) {
    .appFrom .w50 {
      width: 100%; } }
  @media (max-width: 767px) {
    .appFrom .keyInBox {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
      .appFrom .keyInBox.verifi input {
        padding-right: 100px; }
      .appFrom .keyInBox .lableTitle {
        width: 100%;
        margin: 0;
        padding: 23px 0 0 0; }
      .appFrom .keyInBox input {
        width: 100%;
        padding: 16px 0; }
      .appFrom .keyInBox .code {
        position: absolute;
        right: 0;
        bottom: 0; }
    .appFrom .schoolBox .schoolOption {
      text-align: left; }
      .appFrom .schoolBox .schoolOption input {
        text-align: left;
        padding: 0; }
    .appFrom .schoolBox .schoolGrade .dropShow {
      width: 100%; }
      .appFrom .schoolBox .schoolGrade .dropShow .icon {
        margin-left: auto; }
    .appFrom .group input {
      text-align: left;
      padding: 15px 0; }
    .appFrom .kin .group {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
      .appFrom .kin .group .option {
        width: 100%; }
        .appFrom .kin .group .option:after {
          display: none; }
    .appFrom .career .group {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
      .appFrom .career .group .option {
        width: 100%; }
        .appFrom .career .group .option:after {
          display: none; }
        .appFrom .career .group .option .dropShow {
          padding: 16px 0; }
        .appFrom .career .group .option .showBox {
          text-align: left; }
    .appFrom .hobbie .lableTitle {
      white-space: normal;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      line-height: 1.6; }
    .appFrom .experience .lableTitle {
      white-space: normal;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      line-height: 1.6; }
    .appFrom .serveTime .group {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
      .appFrom .serveTime .group .option .dropShow {
        font-size: 12px;
        font-size: 0.75rem; }
    .appFrom .serveTime .option {
      min-width: auto;
      width: 50%;
      max-width: none; }
    .appFrom .serveTime .nameOp {
      min-width: 65px;
      width: 100%;
      max-width: none; }
      .appFrom .serveTime .nameOp:after {
        display: none; }
    .appFrom .language {
      padding: 0 0 50px 0; }
      .appFrom .language .group {
        font-size: 12px;
        font-size: 0.75rem; }
        .appFrom .language .group .option {
          width: 50%; }
        .appFrom .language .group .delete {
          width: 14%; }
        .appFrom .language .group .deleteBtn .cicon {
          margin: 0; }
        .appFrom .language .group .deleteBtn .text {
          display: none; }
    .appFrom .remark textarea {
      margin: 16px 0; }
    .appFrom .artTopic {
      height: auto;
      padding: 16px 0; } }
  @media (max-width: 600px) {
    .appFrom .schoolBox {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
      .appFrom .schoolBox .schoolOption {
        width: 100%;
        padding: 23px 0; } }

#exhibition .soundBall {
  cursor: pointer;
  color: #fff;
  background-color: #ff6060;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  position: fixed;
  right: 50px;
  bottom: 50px;
  z-index: -1;
  visibility: hidden;
  opacity: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  #exhibition .soundBall.showUp {
    z-index: 1;
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease; }

#exhibition footer {
  margin-top: 0; }

.mocaSNav.detail {
  margin: 0; }
  .mocaSNav.detail .navBar .link:after {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg); }
  .mocaSNav.detail .navBar .link .text {
    padding: 0 10px; }
  .mocaSNav.detail .navBar .link:last-of-type .text {
    color: #000;
    font-weight: 900; }

.bannerSec .slickArea {
  position: relative; }
  .bannerSec .slickArea .slick-dots {
    bottom: 35px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: auto; }
    .bannerSec .slickArea .slick-dots li {
      padding: 10px 20px;
      width: auto;
      height: auto;
      margin: 0; }
      .bannerSec .slickArea .slick-dots li.slick-active .dot {
        opacity: 1; }
    .bannerSec .slickArea .slick-dots .dot {
      background-color: #fff;
      border-radius: 50%;
      width: 6px;
      height: 6px;
      display: block;
      opacity: 0.5; }
    .bannerSec .slickArea .slick-dots .prev, .bannerSec .slickArea .slick-dots .next {
      color: #fff;
      font-size: 35px;
      font-size: 2.1875rem;
      padding: 0;
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%); }
    .bannerSec .slickArea .slick-dots .prev {
      left: -35px; }
    .bannerSec .slickArea .slick-dots .next {
      right: -35px; }
  .bannerSec .slickArea .slickArrowBox {
    color: #fff;
    position: absolute;
    left: 0;
    bottom: 35px; }

.bannerSec .slickBox .list {
  max-width: 1920px;
  max-height: 845px; }
  .bannerSec .slickBox .list .img {
    margin: 0 auto; }

.exhibitionDetail .bannerSec {
  opacity: 0; }
  .exhibitionDetail .bannerSec.show {
    opacity: 1;
    -webkit-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease; }

@media (max-width: 767px) {
  .exhibitionDetail .scrollBro .box {
    padding-left: 10px;
    position: relative; }
  .exhibitionDetail .scrollBro .search {
    position: absolute;
    top: 0;
    left: 0;
    display: none; }
  .exhibitionDetail .scrollBro .shareBtn:after {
    content: none; }
  .exhibitionDetail .scrollBro .community {
    width: auto;
    left: 51px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    white-space: nowrap; }
    .exhibitionDetail .scrollBro .community .link {
      width: 57px;
      display: inline-block; } }

.exDetailBigMac .frameBox {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 70px 0 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  .exDetailBigMac .frameBox .leftBox {
    width: 60%;
    padding-right: 20px; }
    .exDetailBigMac .frameBox .leftBox.show .title, .exDetailBigMac .frameBox .leftBox.show .subTitle {
      opacity: 1;
      -webkit-transition: opacity 1s ease;
      -o-transition: opacity 1s ease;
      transition: opacity 1s ease; }
    .exDetailBigMac .frameBox .leftBox.show .dateBox {
      opacity: 1;
      -webkit-transition: opacity 1s ease .3s;
      -o-transition: opacity 1s ease .3s;
      transition: opacity 1s ease .3s; }
    .exDetailBigMac .frameBox .leftBox.show .addressBox {
      opacity: 1;
      -webkit-transition: opacity 1s ease .5s;
      -o-transition: opacity 1s ease .5s;
      transition: opacity 1s ease .5s; }
    .exDetailBigMac .frameBox .leftBox .title {
      font-size: 30px;
      font-size: 1.875rem;
      font-weight: 900;
      opacity: 0; }
    .exDetailBigMac .frameBox .leftBox .subTitle {
      font-size: 14px;
      font-size: 0.875rem;
      margin: 0 0 25px 0;
      opacity: 0; }
    .exDetailBigMac .frameBox .leftBox .dateBox {
      font-size: 26px;
      font-size: 1.625rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin: 0 0 25px 0;
      opacity: 0; }
      .exDetailBigMac .frameBox .leftBox .dateBox .interval {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; }
        .exDetailBigMac .frameBox .leftBox .dateBox .interval .text.hasline {
          position: relative;
          padding-left: 60px; }
          .exDetailBigMac .frameBox .leftBox .dateBox .interval .text.hasline::after {
            content: '';
            background: #000;
            width: 20px;
            height: 1px;
            left: 20px;
            bottom: 3px;
            position: absolute;
            display: inline-block; }
      .exDetailBigMac .frameBox .leftBox .dateBox .time {
        font-size: 20px;
        font-size: 1.25rem;
        font-family: 'FuturaPT-Light','微軟正黑體';
        -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
        padding-left: 15px; }
      .exDetailBigMac .frameBox .leftBox .dateBox .text {
        font-family: 'MyriadPro-Regular'; }
        .exDetailBigMac .frameBox .leftBox .dateBox .text span {
          font-size: 20px;
          font-size: 1.25rem;
          font-family: 'FuturaPT-Light','微軟正黑體'; }
      .exDetailBigMac .frameBox .leftBox .dateBox .line {
        background-color: #000;
        width: 36px;
        height: 1px;
        margin: 24px 16px 0 16px;
        display: block; }
    .exDetailBigMac .frameBox .leftBox .addressBox {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      letter-spacing: normal;
      opacity: 0; }
      .exDetailBigMac .frameBox .leftBox .addressBox .name {
        font-size: 15px;
        font-size: 0.9375rem;
        font-family: 'FuturaPT-Heavy','微軟正黑體';
        font-weight: 900;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        white-space: nowrap; }
        .exDetailBigMac .frameBox .leftBox .addressBox .name:after {
          content: '';
          display: block;
          background-color: #acacac;
          width: 1px;
          height: 100%;
          margin: 0 8px; }
  .exDetailBigMac .frameBox .rightBox {
    width: 40%;
    padding-left: 20px;
    opacity: 0; }
    .exDetailBigMac .frameBox .rightBox.show {
      opacity: 1;
      -webkit-transition: opacity 1s ease .3s;
      -o-transition: opacity 1s ease .3s;
      transition: opacity 1s ease .3s; }
    .exDetailBigMac .frameBox .rightBox .box {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: end;
      -ms-flex-pack: end;
      justify-content: flex-end; }
    .exDetailBigMac .frameBox .rightBox .list {
      text-align: center;
      padding: 0 20px;
      position: relative; }
      .exDetailBigMac .frameBox .rightBox .list:hover .icon {
        color: #fff;
        background-color: #000; }
        .exDetailBigMac .frameBox .rightBox .list:hover .icon.icon-chrissound1::before, .exDetailBigMac .frameBox .rightBox .list:hover .icon.icon-information::before {
          color: #fff; }
      .exDetailBigMac .frameBox .rightBox .list:last-child:after {
        display: none; }
      .exDetailBigMac .frameBox .rightBox .list .icon {
        border-radius: 50%;
        color: #000;
        width: 40px;
        height: 40px;
        margin: 0 auto 10px auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border: 1px #000 solid;
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s; }
        .exDetailBigMac .frameBox .rightBox .list .icon.icon-chrissound1, .exDetailBigMac .frameBox .rightBox .list .icon.icon-information {
          font-size: 20px;
          font-size: 1.25rem; }
          .exDetailBigMac .frameBox .rightBox .list .icon.icon-chrissound1::before, .exDetailBigMac .frameBox .rightBox .list .icon.icon-information::before {
            color: #000; }
        .exDetailBigMac .frameBox .rightBox .list .icon.icon-information {
          position: relative; }
          .exDetailBigMac .frameBox .rightBox .list .icon.icon-information::after {
            content: 'i';
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            display: inline-block;
            font-family: serif;
            font-weight: bolder; }
      .exDetailBigMac .frameBox .rightBox .list .name {
        font-size: 15px;
        font-size: 0.9375rem;
        font-family: 'FuturaPT-Heavy','微軟正黑體';
        font-weight: 900;
        margin: 0 0 10px 0; }
      .exDetailBigMac .frameBox .rightBox .list .text {
        font-size: 18px;
        font-size: 1.125rem;
        font-weight: 900; }
    .exDetailBigMac .frameBox .rightBox .linkType {
      font-weight: 900;
      color: #e83434; }
      .exDetailBigMac .frameBox .rightBox .linkType .name {
        font-size: 20px;
        font-size: 1.25rem;
        font-family: 'FuturaPT-Heavy','微軟正黑體';
        margin: 0;
        line-height: 40px; }
      .exDetailBigMac .frameBox .rightBox .linkType .text {
        font-size: 15px;
        font-size: 0.9375rem; }

@media (max-width: 1250px) {
  .exDetailBigMac .frameBox {
    width: 90%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
    .exDetailBigMac .frameBox .leftBox, .exDetailBigMac .frameBox .rightBox {
      width: 100%;
      padding: 0; }
    .exDetailBigMac .frameBox .leftBox {
      margin: 0 0 50px 0; }
    .exDetailBigMac .frameBox .rightBox {
      margin: 0 0 0 -40px; }
    .exDetailBigMac .frameBox .leftBox .title {
      font-size: 24px;
      font-size: 1.5rem; }
    .exDetailBigMac .frameBox .leftBox .dateBox {
      font-size: 22px;
      font-size: 1.375rem; }
      .exDetailBigMac .frameBox .leftBox .dateBox .line {
        width: 15px; } }

@media (max-width: 767px) {
  .exDetailBigMac .frameBox .leftBox .interval {
    margin-bottom: 20px; }
  .exDetailBigMac .frameBox .leftBox .dateBox {
    font-size: 20px;
    font-size: 1.25rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
    .exDetailBigMac .frameBox .leftBox .dateBox .time {
      padding: 0;
      -ms-flex-item-align: start;
      align-self: flex-start; }
    .exDetailBigMac .frameBox .leftBox .dateBox .text span {
      font-size: 18px;
      font-size: 1.125rem; }
    .exDetailBigMac .frameBox .leftBox .dateBox .line {
      width: 1px;
      height: 10px;
      margin: 0 auto; }
  .exDetailBigMac .frameBox .leftBox .addressBox {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
    .exDetailBigMac .frameBox .leftBox .addressBox .name:after {
      display: none; }
    .exDetailBigMac .frameBox .leftBox .addressBox .text {
      font-size: 15px;
      font-size: 0.9375rem; }
  .exDetailBigMac .frameBox .rightBox {
    margin: 0; }
    .exDetailBigMac .frameBox .rightBox .list {
      width: 100%;
      padding: 0 10px; }
      .exDetailBigMac .frameBox .rightBox .list .text {
        font-size: 15px;
        font-size: 0.9375rem; }
      .exDetailBigMac .frameBox .rightBox .list .name {
        font-size: 12px;
        font-size: 0.75rem; } }

@media (max-width: 500px) {
  .exDetailBigMac .frameBox .leftBox .dateBox .interval {
    display: inline-block; }
    .exDetailBigMac .frameBox .leftBox .dateBox .interval .text.hasline {
      padding-left: 0;
      padding-top: 20px; }
      .exDetailBigMac .frameBox .leftBox .dateBox .interval .text.hasline::after {
        left: 0;
        top: 10px; } }

.exDetailBigMac {
  position: relative; }
  .exDetailBigMac::after {
    content: '';
    background: #f9f9f9;
    width: 100%;
    height: calc(100% - 140px);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1; }
  .exDetailBigMac.noBlock::after {
    height: 100%; }
  .exDetailBigMac .misplacedBlock {
    background: #e2e2e2;
    padding: 50px 0 20px;
    width: 1400px;
    margin: 0 auto; }
    @media (max-width: 1500px) {
      .exDetailBigMac .misplacedBlock {
        width: 100%; } }
    .exDetailBigMac .misplacedBlock ul {
      width: 1160px;
      margin: 0 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
      @media (max-width: 1500px) {
        .exDetailBigMac .misplacedBlock ul {
          width: 80%; } }
      .exDetailBigMac .misplacedBlock ul li {
        width: 33.3332%;
        margin-bottom: 50px; }
        @media (max-width: 1100px) {
          .exDetailBigMac .misplacedBlock ul li {
            width: 50%; } }
        @media (max-width: 550px) {
          .exDetailBigMac .misplacedBlock ul li {
            width: 100%; } }
      .exDetailBigMac .misplacedBlock ul .t {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 20px;
        padding-left: 15px;
        border-left: 4px #5a5a5a solid; }
        .exDetailBigMac .misplacedBlock ul .t p {
          font-size: 17px;
          font-size: 1.0625rem;
          line-height: px(25);
          font-family: "FuturaPT-Heavy", "Microsoft JhengHei", sans-serif; }
          .exDetailBigMac .misplacedBlock ul .t p:first-child {
            margin: 0 5px 0 0; }
      .exDetailBigMac .misplacedBlock ul .p {
        font-size: 15px;
        font-size: 0.9375rem;
        line-height: 23px;
        padding: 0 20px 0 4px; }

.scrollBro {
  height: 58px;
  opacity: 0; }
  .scrollBro.show {
    opacity: 1;
    -webkit-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease; }
  .scrollBro.fixed .box {
    background-color: #f4f4f4;
    position: fixed;
    left: 0;
    top: 70px;
    z-index: 2;
    -webkit-animation: myMove 1000ms both;
    animation: myMove 1000ms both; }
  .scrollBro .box {
    width: 100%;
    padding-right: 10px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse; }
    .scrollBro .box .ps__rail-x {
      opacity: 0; }
  .scrollBro .search {
    position: relative;
    padding: 6px 0; }
  .scrollBro .shareBtn {
    cursor: pointer;
    padding: 12px 20px;
    position: relative; }
    .scrollBro .shareBtn:after {
      content: '';
      display: block;
      background-color: #b2b2b2;
      width: 1px;
      height: 20px;
      position: absolute;
      right: 0;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%); }
  .scrollBro .community {
    background-color: #eee;
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    top: 43px;
    display: none; }
    .scrollBro .community .link {
      color: #aeaeae;
      padding: 10px 0; }
      .scrollBro .community .link:hover {
        color: #e83434; }
  .scrollBro .search:only-child .shareBtn:after {
    content: none; }
  .scrollBro .sec {
    font-size: 15px;
    font-size: 0.9375rem;
    font-weight: 900;
    padding: 6px 0;
    position: relative; }
    .scrollBro .sec .secBox {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
    .scrollBro .sec .link {
      text-transform: uppercase;
      padding: 12px 20px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      position: relative;
      white-space: nowrap;
      color: #aaa; }
      .scrollBro .sec .link:last-child:after {
        display: none; }
      .scrollBro .sec .link:after {
        content: '';
        display: block;
        background-color: #b2b2b2;
        width: 1px;
        height: 20px;
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
      .scrollBro .sec .link:before {
        content: '';
        display: block;
        background-color: #e83434;
        width: 0;
        height: 3px;
        position: absolute;
        left: 50%;
        bottom: -6px;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        -webkit-transition: width .4s ease;
        -o-transition: width .4s ease;
        transition: width .4s ease; }
      .scrollBro .sec .link.now {
        color: #000; }
        .scrollBro .sec .link.now:before {
          width: 100%; }
  .scrollBro .ps__rail-x:hover > .ps__thumb-x, .scrollBro .ps__rail-x:focus > .ps__thumb-x, .scrollBro .ps__rail-x.ps--clicking .ps__thumb-x {
    height: 6px; }
  @media (max-width: 1250px) {
    .scrollBro .sec {
      width: 65vw;
      margin-right: 20px; } }
  @media (max-width: 767px) {
    .scrollBro .sec {
      width: auto;
      margin-right: 0; } }

.detailArticle .detailContent {
  padding: 135px 0 170px 0; }
  .detailArticle .detailContent:nth-child(2n) {
    background-color: #f9f9f9; }
  .detailArticle .detailContent .contentFrame {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto; }
    .detailArticle .detailContent .contentFrame.show .deTitle {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      -webkit-transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.33, 0.98) 0.3s, -webkit-transform 0.7s cubic-bezier(0.25, 0.46, 0.33, 0.98) 0.5s;
      transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.33, 0.98) 0.3s, -webkit-transform 0.7s cubic-bezier(0.25, 0.46, 0.33, 0.98) 0.5s;
      -o-transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.33, 0.98) 0.5s, opacity 0.7s cubic-bezier(0.25, 0.46, 0.33, 0.98) 0.3s;
      transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.33, 0.98) 0.5s, opacity 0.7s cubic-bezier(0.25, 0.46, 0.33, 0.98) 0.3s;
      transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.33, 0.98) 0.5s, opacity 0.7s cubic-bezier(0.25, 0.46, 0.33, 0.98) 0.3s, -webkit-transform 0.7s cubic-bezier(0.25, 0.46, 0.33, 0.98) 0.5s; }
    .detailArticle .detailContent .contentFrame.show .deSubTitle {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      -webkit-transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.33, 0.98) 0.6s, -webkit-transform 0.7s cubic-bezier(0.25, 0.46, 0.33, 0.98) 0.8s;
      transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.33, 0.98) 0.6s, -webkit-transform 0.7s cubic-bezier(0.25, 0.46, 0.33, 0.98) 0.8s;
      -o-transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.33, 0.98) 0.8s, opacity 0.7s cubic-bezier(0.25, 0.46, 0.33, 0.98) 0.6s;
      transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.33, 0.98) 0.8s, opacity 0.7s cubic-bezier(0.25, 0.46, 0.33, 0.98) 0.6s;
      transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.33, 0.98) 0.8s, opacity 0.7s cubic-bezier(0.25, 0.46, 0.33, 0.98) 0.6s, -webkit-transform 0.7s cubic-bezier(0.25, 0.46, 0.33, 0.98) 0.8s; }
    .detailArticle .detailContent .contentFrame .deTitle {
      opacity: 0;
      -webkit-transform: translate3d(0, 30px, 0);
      transform: translate3d(0, 30px, 0); }
    .detailArticle .detailContent .contentFrame .deSubTitle {
      opacity: 0;
      -webkit-transform: translate3d(0, 30px, 0);
      transform: translate3d(0, 30px, 0); }

.detailArticle .exArtists .contentFrame {
  width: 100%;
  max-width: 1200px; }

@media (max-width: 1250px) {
  .detailArticle .exArtists .contentFrame {
    width: 90%; }
  .detailArticle .exEvent .contentFrame {
    width: 90%; } }

@media (max-width: 767px) {
  .detailArticle .detailContent {
    padding: 75px 0 110px 0; } }

.deTitle {
  font-size: 32px;
  font-size: 2rem;
  font-family: 'FuturaPT-Heavy','微軟正黑體';
  font-weight: 900;
  text-align: center;
  margin: 0 0 5px 0;
  padding: 0 20px; }
  .deTitle .vice {
    font-size: 30px;
    font-size: 1.875rem; }

.deSubTitle {
  font-size: 18px;
  font-size: 1.125rem;
  text-align: center;
  margin: 0 0 50px 0;
  padding: 0 20px; }

.exAbout .mediaBox {
  max-width: 1160px;
  max-height: 620px;
  overflow: hidden;
  margin: 0 auto 50px auto;
  position: relative;
  opacity: 0; }
  .exAbout .mediaBox.show {
    opacity: 1;
    -webkit-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease; }
  .exAbout .mediaBox.hasVideo .maskBox {
    cursor: pointer;
    display: block; }
  .exAbout .mediaBox .maskBox {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: none; }
  .exAbout .mediaBox .playBtn {
    border-radius: 50%;
    border: solid 1px #fff;
    color: #fff;
    width: 50px;
    height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    right: 30px;
    bottom: 20px; }

.exAbout .contentBox {
  padding: 0 60px;
  margin: 0 0 40px 0;
  max-height: 300px;
  overflow: hidden;
  position: relative;
  opacity: 0; }
  .exAbout .contentBox.in {
    max-height: 100%; }
  .exAbout .contentBox.show {
    opacity: 1;
    -webkit-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease; }
  .exAbout .contentBox .content {
    font-size: 17px;
    font-size: 1.0625rem;
    margin: 0 0 20px 0; }
    .exAbout .contentBox .content .italy {
      font-style: italic; }
    .exAbout .contentBox .content .text {
      margin: 0 0 30px 0;
      display: block; }
      .exAbout .contentBox .content .text:last-child {
        margin: 0; }

.exAbout .moreBtn {
  color: #5d5d5d;
  font-size: 15px;
  font-size: 0.9375rem;
  font-family: 'FuturaPT-Heavy','微軟正黑體';
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 0 60px 0 0;
  opacity: 0; }
  .exAbout .moreBtn.show {
    opacity: 1;
    -webkit-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease; }
  .exAbout .moreBtn .btn {
    cursor: pointer;
    -webkit-transition: color .5s ease;
    -o-transition: color .5s ease;
    transition: color .5s ease;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    .exAbout .moreBtn .btn.expand i::after {
      display: none; }
    .exAbout .moreBtn .btn.expand .less {
      display: inline-block; }
    .exAbout .moreBtn .btn.expand .more {
      display: none; }
    .exAbout .moreBtn .btn .more {
      display: inline-block; }
    .exAbout .moreBtn .btn .less {
      display: none; }
    .exAbout .moreBtn .btn i {
      display: inline-block;
      width: 10px;
      height: 2px;
      background: #5d5d5d;
      position: relative;
      margin: 0 10px 0 0; }
      .exAbout .moreBtn .btn i::after {
        content: '';
        width: 2px;
        height: 10px;
        background: #5d5d5d;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }

@media (min-width: 1024px) {
  .exAbout .moreBtn .btn:hover {
    color: #e83434; }
    .exAbout .moreBtn .btn:hover i, .exAbout .moreBtn .btn:hover i::after {
      background: #e83434; } }

@media (max-width: 1250px) {
  .exAbout .contentBox {
    width: 94%;
    margin: 0 auto 40px auto; } }

@media (max-width: 767px) {
  .exAbout .contentBox {
    width: 90%;
    padding: 0; } }

.slide.fade {
  width: 90%;
  max-width: 560px;
  margin: auto; }

@-webkit-keyframes flogo {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  40% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%); }
  60% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%); }
  100% {
    -webkit-transform: translateX(200%);
    transform: translateX(200%); } }

@keyframes flogo {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  40% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%); }
  60% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%); }
  100% {
    -webkit-transform: translateX(200%);
    transform: translateX(200%); } }

.exArtists .artType {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .exArtists .artType .bearBox {
    margin: 0 0 35px 0; }
  .exArtists .artType .imgFrame {
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    .exArtists .artType .imgFrame .name {
      font-size: 17px;
      font-size: 1.0625rem;
      line-height: 1.5;
      color: #444;
      text-align: center;
      padding: 0 0 35px 0; }
      .exArtists .artType .imgFrame .name .title {
        font-weight: 900; }
  .exArtists .artType .imgBox {
    position: relative;
    display: block;
    margin: 0 0 20px 0; }
  .exArtists .artType .hoverBox {
    font-size: 16px;
    font-size: 1rem;
    background-color: rgba(0, 0, 0, 0);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: background-color .5s ease;
    -o-transition: background-color .5s ease;
    transition: background-color .5s ease; }
    .exArtists .artType .hoverBox:hover {
      background-color: rgba(0, 0, 0, 0.5); }
      .exArtists .artType .hoverBox:hover .text {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0); }
    .exArtists .artType .hoverBox .text {
      opacity: 0;
      -webkit-transform: translateY(100px);
      -ms-transform: translateY(100px);
      transform: translateY(100px);
      -webkit-transition: opacity .5s ease, -webkit-transform .5s ease;
      transition: opacity .5s ease, -webkit-transform .5s ease;
      -o-transition: opacity .5s ease, transform .5s ease;
      transition: opacity .5s ease, transform .5s ease;
      transition: opacity .5s ease, transform .5s ease, -webkit-transform .5s ease; }
      .exArtists .artType .hoverBox .text:after {
        content: '';
        display: block;
        background-color: #fff;
        width: 50%;
        height: 1px;
        margin: 10px auto 0 auto; }
  .exArtists .artType .iconBox {
    font-size: 22px;
    font-size: 1.375rem;
    position: absolute;
    right: 10px;
    bottom: 10px; }

.exArtists .typeBox50 .bearBox {
  width: 50%;
  opacity: 0; }
  .exArtists .typeBox50 .bearBox.show {
    opacity: 1;
    -webkit-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease; }

.exArtists .typeBox50 .imgFrame {
  width: 97%;
  max-width: 560px;
  margin: 0 auto; }
  .exArtists .typeBox50 .imgFrame .imgBox {
    max-width: 560px;
    max-height: 335px; }

.exArtists .typeBox25 .bearBox {
  width: 25%;
  opacity: 0; }
  .exArtists .typeBox25 .bearBox.show {
    opacity: 1;
    -webkit-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease; }

.exArtists .typeBox25 .imgFrame {
  width: 85%;
  max-width: 255px;
  margin: 0 auto; }
  .exArtists .typeBox25 .imgFrame .imgBox {
    max-width: 255px;
    max-height: 190px; }
  .exArtists .typeBox25 .imgFrame .name {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }

.exArtists .typeBox100 {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative; }
  .exArtists .typeBox100 .bearTextBox {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    opacity: 0; }
    .exArtists .typeBox100 .bearTextBox.show {
      opacity: 1;
      -webkit-transition: opacity 1s ease .2s;
      -o-transition: opacity 1s ease .2s;
      transition: opacity 1s ease .2s; }
    .exArtists .typeBox100 .bearTextBox .textBox {
      position: relative;
      height: auto;
      overflow: hidden; }
      .exArtists .typeBox100 .bearTextBox .textBox.slick-slide .text {
        opacity: 0;
        -webkit-transition: opacity 0.4 ease;
        -o-transition: opacity 0.4 ease;
        transition: opacity 0.4 ease; }
      .exArtists .typeBox100 .bearTextBox .textBox.slick-current:after {
        -webkit-animation: flogo 1200ms;
        animation: flogo 1200ms; }
      .exArtists .typeBox100 .bearTextBox .textBox.slick-current .text {
        opacity: 1;
        -webkit-transition: opacity 1.5s ease .7s;
        -o-transition: opacity 1.5s ease .7s;
        transition: opacity 1.5s ease .7s; }
      .exArtists .typeBox100 .bearTextBox .textBox:after {
        content: '';
        display: block;
        background-color: #444;
        width: 100%;
        height: 100%;
        position: absolute;
        left: -100%;
        top: 0; }
    .exArtists .typeBox100 .bearTextBox .text {
      font-size: 17px;
      font-size: 1.0625rem;
      color: #444; }
  .exArtists .typeBox100 .bearBox {
    width: 100%;
    max-width: 740px;
    opacity: 0; }
    .exArtists .typeBox100 .bearBox.show {
      opacity: 1;
      -webkit-transition: opacity 1s ease;
      -o-transition: opacity 1s ease;
      transition: opacity 1s ease; }
    .exArtists .typeBox100 .bearBox .slick-list {
      z-index: 1; }
  .exArtists .typeBox100 .slickBtnArea {
    font-size: 40px;
    font-size: 2.5rem;
    color: #7f7f7f;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 65%; }
    .exArtists .typeBox100 .slickBtnArea .prev, .exArtists .typeBox100 .slickBtnArea .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%); }
    .exArtists .typeBox100 .slickBtnArea .prev {
      left: 9%; }
    .exArtists .typeBox100 .slickBtnArea .next {
      right: 9%; }
  .exArtists .typeBox100 .hoverBox {
    display: none; }
  .exArtists .typeBox100 .iconBox {
    display: none; }
  .exArtists .typeBox100 .imgFrame {
    margin: 0 auto;
    display: block;
    width: 100% !important;
    max-width: 740px; }
    .exArtists .typeBox100 .imgFrame.slick-slide .name {
      opacity: 0;
      -webkit-transform: translateY(100px);
      -ms-transform: translateY(100px);
      transform: translateY(100px); }
    .exArtists .typeBox100 .imgFrame.slick-current .name {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
      transition: opacity 1s ease, -webkit-transform 1s ease;
      -o-transition: opacity 1s ease, transform 1s ease;
      transition: opacity 1s ease, transform 1s ease;
      transition: opacity 1s ease, transform 1s ease, -webkit-transform 1s ease; }
    .exArtists .typeBox100 .imgFrame .img {
      margin: 0 auto; }

.exArtists.more.event .typeBox100 .imgFrame {
  padding: 0 5px; }

.exArtists.more.event .typeBox100 .imgBox {
  max-width: 350px; }

.exArtists.more .typeBox100 .bearBox {
  max-width: none; }

.exArtists.more .typeBox100 .slickBtnArea .prev {
  left: -7%; }

.exArtists.more .typeBox100 .slickBtnArea .next {
  right: -7%; }

.exArtists.more .typeBox100 .imgFrame {
  width: 100% !important;
  margin: 0;
  max-width: 400px;
  padding: 0 45px; }

.exArtists.more .typeBox100 .imgBox {
  max-width: 310px;
  max-height: 410px; }

.exArtists.more .textInfo {
  color: #444; }
  .exArtists.more .textInfo .cnName {
    color: #000;
    font-size: 20px;
    font-size: 1.25rem;
    margin: 0 0 8px 0;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    -webkit-box-orient: vertical; }
  .exArtists.more .textInfo .enName {
    color: #000;
    font-size: 12px;
    font-size: 0.75rem;
    margin: 0 0 22px 0;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    -webkit-box-orient: vertical; }
  .exArtists.more .textInfo .dateBox {
    font-size: 15px;
    font-size: 0.9375rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    .exArtists.more .textInfo .dateBox .line {
      background-color: #000;
      width: 3px;
      height: 1px;
      margin: 0 5px; }
    .exArtists.more .textInfo .dateBox span {
      font-size: 12px;
      font-size: 0.75rem; }

@media (max-width: 1365px) {
  .exArtists.more .contentFrame {
    max-width: 1024px; }
  .exArtists.more .typeBox100 .bearBox .slickBtnArea .prev {
    left: -5%; }
  .exArtists.more .typeBox100 .bearBox .slickBtnArea .next {
    right: -5%; }
  .exArtists.more .typeBox100 .imgFrame {
    padding: 0 25px; } }

@media (max-width: 1250px) {
  .exArtists .typeBox100 .slickBtnArea .prev {
    left: 0%; }
  .exArtists .typeBox100 .slickBtnArea .next {
    right: 0%; } }

@media (max-width: 1200px) {
  .exArtists.more .contentFrame {
    max-width: 860px; } }

@media (max-width: 1023px) {
  .exArtists .typeBox25 .bearBox {
    width: 33.33%; }
  .exArtists .typeBox100 .bearBox {
    width: 80%; }
  .exArtists .typeBox100 .imgFrame .name {
    padding: 0; }
  .exArtists.more .contentFrame {
    max-width: 650px; } }

@media (max-width: 767px) {
  .exArtists .typeBox25 .bearBox {
    width: 50%; }
  .exArtists .typeBox50 .bearBox {
    width: 100%; }
  .exArtists .typeBox100 .bearBox {
    margin: 0 0 10px 0; }
  .exArtists .typeBox100 .imgFrame .name {
    font-size: 16px;
    font-size: 1rem;
    padding: 0; }
  .exArtists .typeBox100 .slickBtnArea {
    font-size: 25px;
    font-size: 1.5625rem; }
    .exArtists .typeBox100 .slickBtnArea .prev, .exArtists .typeBox100 .slickBtnArea .next {
      top: 37%; }
  .exArtists.more .contentFrame {
    max-width: 400px; }
  .exArtists.more .typeBox100 .imgFrame {
    padding: 0 45px; } }

@media (max-width: 600px) {
  .exArtists .typeBox25 .bearBox {
    width: 100%; } }

@media (max-width: 520px) {
  .exArtists.more .contentFrame {
    max-width: 300px; }
  .exArtists.more .typeBox100 .imgFrame {
    padding: 0 25px; } }

@media (max-width: 413px) {
  .exArtists.more .contentFrame {
    max-width: 250px; } }

.exArtworks .typeBox25 .bearBox {
  width: 25%; }

.exArtworks .typeBox25 .imgFrame {
  width: 85%;
  max-width: 250px;
  margin: 0 auto; }
  .exArtworks .typeBox25 .imgFrame .imgBox {
    max-width: 250px;
    max-height: 250px; }
  .exArtworks .typeBox25 .imgFrame .name {
    padding: 0 0 15px 0;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }

.exArtworks .btnStyle {
  padding: 40px 0 0 0;
  opacity: 0; }
  .exArtworks .btnStyle.show {
    opacity: 1;
    -webkit-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease; }
  .exArtworks .btnStyle .btn {
    width: 230px; }

@media (max-width: 1023px) {
  .exArtworks .typeBox25 .bearBox {
    width: 33.33%; } }

@media (max-width: 767px) {
  .exArtworks .typeBox25 .bearBox {
    width: 50%; } }

@media (max-width: 600px) {
  .exArtworks .typeBox25 .bearBox {
    width: 100%; } }

.exEvent.schedule .eventForm .time {
  width: 30%;
  max-width: none; }
  .exEvent.schedule .eventForm .time div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .exEvent.schedule .eventForm .time div .date {
      line-height: 28px; }
    @media all and (max-width: 1200px) {
      .exEvent.schedule .eventForm .time div {
        display: inline-block; } }

.exEvent.schedule .eventForm .loc {
  width: 46%;
  max-width: 660px;
  padding-right: 10px; }

.exEvent.schedule .formBody .list {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column; }

.exEvent .btnStyle {
  padding: 40px 0 0 0;
  opacity: 0; }
  .exEvent .btnStyle.show {
    opacity: 1;
    -webkit-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease; }
  .exEvent .btnStyle .btn {
    width: 230px; }

.exEvent .eventForm .type {
  width: 17.5%;
  max-width: 200px; }

.exEvent .eventForm .name {
  width: 33.3%;
  max-width: 380px;
  padding-right: 3%; }

.exEvent .eventForm .loc {
  width: 26%;
  max-width: 300px; }

.exEvent .eventForm .time {
  width: 15%;
  max-width: 165px; }

.exEvent .eventForm .apply {
  width: 10%;
  max-width: 115px; }

.exEvent .eventForm .process {
  width: 15.5%;
  max-width: 180px; }

.exEvent .eventForm .macBox {
  width: 50%; }
  .exEvent .eventForm .macBox .loc {
    width: 50%;
    padding-right: 5%; }
  .exEvent .eventForm .macBox .time {
    width: 50%;
    max-width: 100%; }
    .exEvent .eventForm .macBox .time div {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  .exEvent .eventForm .macBox .apply {
    width: 20%; }

.exEvent .formHead {
  border-top: solid 4px #000;
  padding: 16px 0 12px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 0; }
  .exEvent .formHead.show {
    opacity: 1;
    -webkit-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease; }
  .exEvent .formHead .text {
    font-size: 15px;
    font-size: 0.9375rem;
    font-weight: 900; }

.exEvent .formBody {
  border-top: solid 4px #000;
  border-bottom: solid 4px #000;
  overflow: hidden;
  opacity: 0; }
  .exEvent .formBody.show {
    opacity: 1;
    -webkit-transition: opacity 1s ease .2s;
    -o-transition: opacity 1s ease .2s;
    transition: opacity 1s ease .2s; }
  .exEvent .formBody .mCSB_inside > .mCSB_container {
    margin-right: 0; }
  .exEvent .formBody .mCSB_scrollTools {
    width: 2px;
    opacity: 0 !important; }
  .exEvent .formBody .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: #000 !important; }
  .exEvent .formBody .list {
    border-bottom: solid 1px #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 155px;
    padding: 24px 0; }
    .exEvent .formBody .list .box {
      width: 100%;
      min-height: 100px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
    .exEvent .formBody .list .processBox {
      width: 100%;
      position: relative;
      display: none; }
      .exEvent .formBody .list .processBox.open {
        margin: 24px 0 0 0;
        padding: 35px 0; }
        .exEvent .formBody .list .processBox.open:before {
          width: 100%; }
      .exEvent .formBody .list .processBox:before {
        content: '';
        display: block;
        background-color: #000;
        width: 100%;
        height: 1px;
        position: absolute;
        left: 50%;
        top: 0;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%); }
      .exEvent .formBody .list .processBox .boxTitle {
        font-size: 17px;
        font-size: 1.0625rem;
        font-weight: 900;
        margin: 0 0 18px 0; }
      .exEvent .formBody .list .processBox .contentBox {
        margin: 0 0 40px 0; }
        .exEvent .formBody .list .processBox .contentBox:last-child {
          margin: 0; }
      .exEvent .formBody .list .processBox .text {
        font-size: 15px;
        font-size: 0.9375rem;
        font-family: 'FuturaPT-Light','微軟正黑體'; }
      .exEvent .formBody .list .processBox .closeSlideUpBtn {
        cursor: pointer;
        width: 40px;
        height: 40px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        position: absolute;
        right: 0;
        bottom: -10px; }
  .exEvent .formBody .mac {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: solid 1px #000;
    padding: 16px 0; }
    .exEvent .formBody .mac:first-child {
      padding: 0 0 16px 0; }
    .exEvent .formBody .mac:last-child {
      border-bottom: none;
      padding: 16px 0 0 0; }
  .exEvent .formBody .type .imgFrame {
    width: 80%; }
  .exEvent .formBody .name {
    font-size: 17px;
    font-size: 1.0625rem; }
  .exEvent .formBody .loc {
    font-size: 16px;
    font-size: 1rem; }
    .exEvent .formBody .loc .locTitle {
      font-size: 17px;
      font-size: 1.0625rem;
      font-weight: 900; }
  .exEvent .formBody .time {
    font-size: 15px;
    font-size: 0.9375rem; }
    .exEvent .formBody .time .date {
      font-weight: 900; }
  .exEvent .formBody .apply {
    font-size: 14px;
    font-size: 0.875rem; }
    .exEvent .formBody .apply .link {
      cursor: pointer; }
    .exEvent .formBody .apply .big {
      font-size: 16px;
      font-size: 1rem;
      font-weight: 900;
      font-family: 'FuturaPT-Heavy','微軟正黑體'; }
  .exEvent .formBody .process {
    cursor: pointer;
    font-weight: 900; }

@media (max-width: 1023px) {
  .exEvent.schedule .formBody .list .box {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  .exEvent.schedule .eventForm .time {
    width: 35%;
    max-width: none;
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0; }
  .exEvent.schedule .eventForm .loc {
    width: 100%;
    max-width: none;
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
    padding: 20px 0 0 0; }
  .exEvent.schedule .eventForm .process {
    width: 45%;
    max-width: none;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1; }
  .exEvent.schedule .eventForm .apply {
    width: 20%;
    max-width: none;
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    text-align: right; }
  .exEvent .eventForm .type {
    width: 160px;
    margin-right: 20px;
    max-width: none; }
  .exEvent .eventForm .name {
    width: calc(100% - 180px);
    max-width: none;
    padding: 0; }
  .exEvent .eventForm .loc {
    max-width: none; }
  .exEvent .eventForm .time {
    max-width: none; }
  .exEvent .eventForm .apply {
    max-width: none; }
  .exEvent .eventForm .macBox {
    width: 100%; }
  .exEvent .formHead {
    display: none; }
  .exEvent .formBody .list {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-bottom: solid 2px #000; }
  .exEvent .formBody .type .imgFrame {
    width: 100%; } }

@media (max-width: 767px) {
  .exEvent.schedule .eventForm .time {
    width: 100%;
    padding: 0 0 20px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
  .exEvent.schedule .eventForm .process {
    width: 50%; }
  .exEvent.schedule .eventForm .apply {
    width: 50%; }
  .exEvent .btnStyle {
    display: none; }
  .exEvent .eventForm .type {
    width: 100%;
    margin: 0; }
    .exEvent .eventForm .type .img {
      margin: 0 auto; }
  .exEvent .eventForm .name {
    width: 100%;
    padding: 15px 0 0 0;
    text-align: center; }
  .exEvent .eventForm .macBox {
    padding: 15px 0 0 0; }
    .exEvent .eventForm .macBox .loc {
      width: 100%;
      padding: 15px 0 0 0;
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2; }
    .exEvent .eventForm .macBox .time {
      width: 100%;
      -webkit-box-ordinal-group: 1;
      -ms-flex-order: 0;
      order: 0; }
    .exEvent .eventForm .macBox .apply {
      width: 35%;
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      text-align: right; }
  .exEvent .formBody .mac {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; } }

.exSmallBox {
  color: #fff;
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh; }
  .exSmallBox.open {
    z-index: 10; }
    .exSmallBox.open .bg {
      width: 100%;
      -webkit-transition: width .8s ease;
      -o-transition: width .8s ease;
      transition: width .8s ease; }
    .exSmallBox.open .bookClose {
      -webkit-transform: translateY(0%);
      -ms-transform: translateY(0%);
      transform: translateY(0%);
      -webkit-transition: -webkit-transform .8s ease 1s;
      transition: -webkit-transform .8s ease 1s;
      -o-transition: transform .8s ease 1s;
      transition: transform .8s ease 1s;
      transition: transform .8s ease 1s, -webkit-transform .8s ease 1s; }
    .exSmallBox.open .extraGum.show {
      opacity: 1; }
    .exSmallBox.open .exTitle {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1s ease .5s, -webkit-transform 1s ease .5s;
      transition: opacity 1s ease .5s, -webkit-transform 1s ease .5s;
      -o-transition: opacity 1s ease .5s, transform 1s ease .5s;
      transition: opacity 1s ease .5s, transform 1s ease .5s;
      transition: opacity 1s ease .5s, transform 1s ease .5s, -webkit-transform 1s ease .5s; }
    .exSmallBox.open .ruleList:before, .exSmallBox.open .ruleList:after {
      width: 100%;
      -webkit-transition: width 1s ease .8s;
      -o-transition: width 1s ease .8s;
      transition: width 1s ease .8s; }
    .exSmallBox.open .ruleList .list {
      opacity: 1;
      -webkit-transition: opacity 1s ease 1.2s;
      -o-transition: opacity 1s ease 1.2s;
      transition: opacity 1s ease 1.2s; }
    .exSmallBox.open .backTopBtn {
      opacity: 1;
      -webkit-transition: opacity 1s ease 1s;
      -o-transition: opacity 1s ease 1s;
      transition: opacity 1s ease 1s; }
  .exSmallBox.close .bg {
    width: 0%;
    -webkit-transition: width .9s ease .2s;
    -o-transition: width .9s ease .2s;
    transition: width .9s ease .2s; }
  .exSmallBox.close .bookClose {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    -o-transition: transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s; }
  .exSmallBox.close .extraGum.show {
    opacity: 0;
    -webkit-transition: opacity .7s ease;
    -o-transition: opacity .7s ease;
    transition: opacity .7s ease; }
  .exSmallBox.close .backTopBtn {
    opacity: 0;
    -webkit-transition: opacity .7s ease;
    -o-transition: opacity .7s ease;
    transition: opacity .7s ease; }
  .exSmallBox .mCSB_inside > .mCSB_container {
    margin: 0; }
  .exSmallBox .bg {
    background-color: rgba(233, 62, 62, 0.9);
    width: 0;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    z-index: -1;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%); }
  .exSmallBox .container {
    width: 100%;
    max-width: 740px;
    min-height: 100vh;
    margin: 0 auto;
    position: relative; }
  .exSmallBox .bookClose {
    cursor: pointer;
    width: 95px;
    height: 95px;
    margin: 0 auto 120px auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%); }
    .exSmallBox .bookClose:before {
      content: '';
      display: block;
      background-color: #d2d2d2;
      width: 100%;
      height: 8px; }
    .exSmallBox .bookClose .iconBox {
      width: 47px;
      height: 47px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
      .exSmallBox .bookClose .iconBox:before, .exSmallBox .bookClose .iconBox:after {
        background-color: #fff;
        margin: 0; }
  .exSmallBox .backTopBtn {
    opacity: 0;
    border-color: #fff; }
  .exSmallBox .extraGum {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    visibility: hidden;
    opacity: 0; }
    .exSmallBox .extraGum.show {
      position: relative;
      z-index: 1;
      visibility: visible;
      opacity: 0; }
    .exSmallBox .extraGum.admissionBox .ruleList .list {
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start; }
  .exSmallBox .exTitle {
    font-size: 30px;
    font-size: 1.875rem;
    font-family: 'FuturaPT-Heavy','微軟正黑體';
    text-align: center;
    margin: 0 0 25px 0;
    opacity: 0;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px); }
  .exSmallBox .ruleList {
    position: relative; }
    .exSmallBox .ruleList:before {
      content: '';
      display: block;
      background-color: #ef8989;
      width: 0;
      height: 3px;
      position: absolute;
      left: 50%;
      top: 0;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%); }
    .exSmallBox .ruleList:after {
      content: '';
      display: block;
      background-color: #ef8989;
      width: 0;
      height: 3px;
      position: absolute;
      left: 50%;
      bottom: 0;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%); }
    .exSmallBox .ruleList .list {
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      opacity: 0; }
      .exSmallBox .ruleList .list:last-child:after {
        display: none; }
      .exSmallBox .ruleList .list:after {
        content: '';
        display: block;
        background-color: #ef8989;
        width: 100%;
        height: 1px;
        position: absolute;
        left: 0;
        bottom: 0; }
      .exSmallBox .ruleList .list .leftBox {
        width: 27%;
        padding: 22px 20px 22px 0; }
      .exSmallBox .ruleList .list .rightBox {
        width: 73%; }
      .exSmallBox .ruleList .list .item {
        border-bottom: solid 1px #ef8989;
        padding: 22px 0; }
        .exSmallBox .ruleList .list .item:last-child {
          border-bottom: none; }
    .exSmallBox .ruleList .ex {
      font-size: 30px;
      font-size: 1.875rem;
      font-family: 'FuturaPT-Heavy','微軟正黑體'; }
    .exSmallBox .ruleList .name {
      font-size: 20px;
      font-size: 1.25rem;
      font-family: 'FuturaPT-Heavy','微軟正黑體';
      font-weight: 900; }
  @media (max-width: 767px) {
    .exSmallBox .container {
      padding: 0 5%; }
    .exSmallBox .bookClose {
      margin: 0 auto 60px auto; }
    .exSmallBox .ruleList .list {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
      .exSmallBox .ruleList .list .leftBox {
        width: 100%;
        text-align: center; }
      .exSmallBox .ruleList .list .rightBox {
        width: 100%; } }

.exKid .kidArea {
  width: 90%;
  max-width: 900px;
  margin: 0 auto 85px auto; }
  .exKid .kidArea:last-child {
    margin: 0 auto; }
  .exKid .kidArea .imgFrame {
    margin: 0 0 30px 0;
    opacity: 0; }
    .exKid .kidArea .imgFrame.show {
      opacity: 1;
      -webkit-transition: opacity 1s ease;
      -o-transition: opacity 1s ease;
      transition: opacity 1s ease; }
  .exKid .kidArea .textFrame {
    opacity: 0; }
    .exKid .kidArea .textFrame.show {
      opacity: 1;
      -webkit-transition: opacity 1s ease .2s;
      -o-transition: opacity 1s ease .2s;
      transition: opacity 1s ease .2s; }
  .exKid .kidArea .title {
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: 900;
    font-family: 'FuturaPT-Heavy','微軟正黑體';
    margin: 0 0 10px 0; }
  .exKid .kidArea .subTitle {
    font-size: 16px;
    font-size: 1rem;
    font-weight: 900;
    font-family: 'FuturaPT-Heavy','微軟正黑體';
    margin: 0 0 25px 0; }
  .exKid .kidArea .text {
    font-size: 15px;
    font-size: 0.9375rem; }
  .exKid .kidArea .list {
    color: #737373;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: color .5s ease;
    -o-transition: color .5s ease;
    transition: color .5s ease; }
    .exKid .kidArea .list:hover {
      color: #000; }
    .exKid .kidArea .list.link .text {
      word-break: break-all; }
    .exKid .kidArea .list .box {
      padding: 5px 0;
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -webkit-box-align: baseline;
      -ms-flex-align: baseline;
      align-items: baseline; }
    .exKid .kidArea .list .icon {
      margin-right: 12px; }

.exEvent .aListInner {
  padding: 15px 0;
  position: relative; }
  .exEvent .aListInner:after {
    content: '';
    display: block;
    background-color: #000;
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0; }

.exEvent .chrisAgreeBox {
  padding: 25px 0 0 0;
  max-width: 500px;
  margin: 0 auto; }

.exEvent .mBookBag .mCSB_scrollTools {
  width: 10px;
  opacity: 1 !important; }

.exEvent .mBookBag .aList {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }
  .exEvent .mBookBag .aList .aTitle {
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: 900;
    width: 20.8%;
    max-width: 210px; }
  .exEvent .mBookBag .aList .aName {
    font-size: 15px;
    font-size: 0.9375rem;
    width: 64%;
    max-width: 670px;
    margin: 0 10px;
    padding: 15px 5px; }
  .exEvent .mBookBag .aList .aMoney {
    width: 15.5%;
    max-width: 155px; }
  .exEvent .mBookBag .aList .aNumber {
    font-size: 20px;
    font-size: 1.25rem;
    font-family: 'FuturaPT-Heavy','微軟正黑體'; }
    .exEvent .mBookBag .aList .aNumber .text {
      font-size: 13px;
      font-size: 0.8125rem; }
  .exEvent .mBookBag .aList .aCount {
    width: 17%;
    max-width: 175px; }
    .exEvent .mBookBag .aList .aCount .icon {
      cursor: pointer;
      width: 34px;
      height: 36px;
      position: relative; }
      .exEvent .mBookBag .aList .aCount .icon:before, .exEvent .mBookBag .aList .aCount .icon:after {
        content: '';
        display: block;
        background-color: #8c8c8c;
        width: 10px;
        height: 2px;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
    .exEvent .mBookBag .aList .aCount .minus:after {
      display: none; }
    .exEvent .mBookBag .aList .aCount .plus:after {
      width: 2px;
      height: 10px; }
    .exEvent .mBookBag .aList .aCount .number {
      border: none;
      background-color: rgba(0, 0, 0, 0);
      width: calc(100% - 68px);
      text-align: center; }
    .exEvent .mBookBag .aList .aCount .text {
      font-size: 13px;
      font-size: 0.8125rem;
      color: #8c8c8c;
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
    .exEvent .mBookBag .aList .aCount .countBox {
      background-color: #eaeaea;
      width: 100%;
      max-width: 120px;
      height: 36px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }

.exEvent .mBookBag .soldOut .aMoney {
  color: #cacaca; }

.exEvent .mBookBag .friBtnBox {
  width: 25.5%;
  max-width: 270px;
  margin-left: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  .exEvent .mBookBag .friBtnBox .icon {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
  .exEvent .mBookBag .friBtnBox .check {
    font-size: 12px;
    font-size: 0.75rem;
    color: #000;
    border: solid 1px #000;
    -webkit-transition: color .5s ease, background-color .5s ease;
    -o-transition: color .5s ease, background-color .5s ease;
    transition: color .5s ease, background-color .5s ease; }
    .exEvent .mBookBag .friBtnBox .check:before {
      -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
      transform: scale(0.8); }
  .exEvent .mBookBag .friBtnBox .remove {
    border: solid 1px #000; }
    .exEvent .mBookBag .friBtnBox .remove:before {
      content: '';
      display: block;
      background-color: #000;
      width: 8px;
      height: 2px; }
  .exEvent .mBookBag .friBtnBox .bar {
    font-size: 15px;
    font-size: 0.9375rem;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 5px 10px 5px 10px;
    -webkit-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease; }
    .exEvent .mBookBag .friBtnBox .bar:hover .text {
      -webkit-transform: translateX(5px);
      -ms-transform: translateX(5px);
      transform: translateX(5px); }
    .exEvent .mBookBag .friBtnBox .bar .text {
      -webkit-transition: -webkit-transform .5s ease;
      transition: -webkit-transform .5s ease;
      -o-transition: transform .5s ease;
      transition: transform .5s ease;
      transition: transform .5s ease, -webkit-transform .5s ease; }
  .exEvent .mBookBag .friBtnBox .alert {
    font-size: 13px;
    font-size: 0.8125rem;
    color: #e83434;
    padding: 5px 10px 5px 10px; }

.exEvent .mBookBag .bg {
  background-color: rgba(233, 62, 62, 0.9); }

.exEvent .mBookBag .container.noShow {
  display: none; }

.exEvent .mBookBag .containerA {
  max-width: 1270px; }
  .exEvent .mBookBag .containerA .bunBox {
    margin: 0 0 60px 0; }
  .exEvent .mBookBag .containerA .bookBox {
    max-width: 1090px;
    padding: 105px 20px; }
  .exEvent .mBookBag .containerA .formHeadBox .title {
    font-size: 25px;
    font-size: 1.5625rem;
    font-family: 'FuturaPT-Heavy','微軟正黑體'; }
  .exEvent .mBookBag .containerA .formBodyBox {
    margin: 0 0 80px 0; }
  .exEvent .mBookBag .containerA .aListInner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .exEvent .mBookBag .containerA .aList {
    width: 100%;
    min-height: 100px;
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex; }
    .exEvent .mBookBag .containerA .aList:last-child .aListInner:after {
      display: none; }
  .exEvent .mBookBag .containerA .soldOut .aMoney {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }

.exEvent .mBookBag .containerB {
  max-width: 1270px; }
  .exEvent .mBookBag .containerB .bookBox {
    max-width: 1090px;
    padding: 100px 20px 105px 20px; }
  .exEvent .mBookBag .containerB .numberBox {
    padding: 40px 0 0 0; }
  .exEvent .mBookBag .containerB .layout {
    border-top: solid 4px #000; }
    .exEvent .mBookBag .containerB .layout:last-child {
      border-bottom: solid 4px #000; }
    .exEvent .mBookBag .containerB .layout.formBodyBox {
      border-bottom: none; }
  .exEvent .mBookBag .containerB .detail {
    border-top: solid 1px #000;
    padding: 35px 0 25px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .exEvent .mBookBag .containerB .detail.black .friBtnBox .check {
      color: #fff;
      background-color: #000; }
    .exEvent .mBookBag .containerB .detail.hideMemBtn .sameMemBtn {
      opacity: 0;
      visibility: hidden; }
    .exEvent .mBookBag .containerB .detail .dBox {
      width: 51%; }
      .exEvent .mBookBag .containerB .detail .dBox .dText {
        font-size: 14px;
        font-size: 0.875rem;
        border: none;
        width: 100%;
        font-weight: normal;
        word-break: inherit; }
      .exEvent .mBookBag .containerB .detail .dBox input[type="date"] {
        font-size: 14px; }
  .exEvent .mBookBag .containerB .aList {
    width: 100%;
    min-height: 100px;
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    .exEvent .mBookBag .containerB .aList .aName {
      width: 40%;
      max-width: 420px;
      padding: 15px 0;
      margin: 0; }
    .exEvent .mBookBag .containerB .aList .aMoney {
      width: 19.5%;
      max-width: 200px;
      padding: 0 4% 0 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: end;
      -ms-flex-pack: end;
      justify-content: flex-end; }
  .exEvent .mBookBag .containerB .aListInner:after {
    display: none; }

.exEvent .mBookBag .containerC .bookBox {
  padding: 120px 20px 105px 20px; }

.exEvent .mBookBag .containerC .reTitle {
  font-size: 30px;
  font-size: 1.875rem;
  font-weight: 900;
  text-align: center;
  margin: 0 0 25px 0; }

.exEvent .mBookBag .containerC .bunBox {
  border-top: solid 4px #000;
  padding: 35px 0;
  margin: 0; }
  .exEvent .mBookBag .containerC .bunBox .nameTitle {
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: 900; }

.exEvent .mBookBag .containerC .formBodyBox .list {
  min-height: auto; }

.exEvent .mBookBag .containerC .numberBox {
  padding: 40px 0 0 0; }

.exEvent .mBookBag .containerC .ufoBall {
  margin: 0 7px; }

.exEvent .mBookBag .containerD {
  max-width: 610px; }
  .exEvent .mBookBag .containerD .for_scroll {
    width: 100%; }
  .exEvent .mBookBag .containerD .cancelBlock {
    opacity: 1; }
  .exEvent .mBookBag .containerD .container {
    padding: 0;
    min-height: auto; }
  .exEvent .mBookBag .containerD .textInfoBox .name {
    width: 100%;
    max-width: none;
    padding: 0; }
  .exEvent .mBookBag .containerD .typeInfoBox {
    max-width: 450px;
    text-align: center; }
  .exEvent .mBookBag .containerD .btnStyle {
    padding: 0; }
    .exEvent .mBookBag .containerD .btnStyle:hover .styleG {
      color: #fff;
      background-color: #b8b8b8;
      border-color: #b8b8b8; }
    .exEvent .mBookBag .containerD .btnStyle .btn {
      width: 50%; }
    .exEvent .mBookBag .containerD .btnStyle .styleG {
      background-color: #7f7f7f;
      border-color: #7f7f7f; }
      .exEvent .mBookBag .containerD .btnStyle .styleG:hover {
        background-color: #7f7f7f;
        border-color: #7f7f7f; }

.exEvent .mBookBag .containerM .bookBox {
  padding: 140px 20px 105px 20px; }

.exEvent .mBookBag .containerM .logArea {
  padding: 0;
  min-height: auto; }

.exEvent .mBookBag .containerM .logFrame {
  width: 100%;
  max-width: 620px; }

.exEvent .mBookBag .containerM .mocaTitleSec {
  color: #000; }

.exEvent .mBookBag .containerM .list {
  min-height: auto;
  background-color: unset; }

.exEvent .mBookBag .containerM .forgotArea {
  color: #000; }
  .exEvent .mBookBag .containerM .forgotArea .text {
    font-weight: 900; }

.exEvent .mBookBag .containerM .ctrlArea .btnB:hover {
  color: #fff;
  background-color: #e05050; }

.exEvent .mBookBag .containerM .ctrlArea .btnA {
  color: #000;
  border-color: #000; }
  .exEvent .mBookBag .containerM .ctrlArea .btnA:hover {
    border-color: #e05050; }

@media (max-width: 1023px) {
  .exEvent .mBookBag .containerB .aList {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 15px 0; }
    .exEvent .mBookBag .containerB .aList .aTitle {
      width: 100%;
      max-width: none;
      padding: 0; }
    .exEvent .mBookBag .containerB .aList .aName {
      width: 100%;
      max-width: none; }
    .exEvent .mBookBag .containerB .aList .aMoney {
      width: 55%;
      max-width: none;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start; }
    .exEvent .mBookBag .containerB .aList .aCount {
      width: 45%; }
  .exEvent .mBookBag .containerB .detail {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    .exEvent .mBookBag .containerB .detail .sNum {
      width: 30%;
      -webkit-box-ordinal-group: 1;
      -ms-flex-order: 0;
      order: 0; }
    .exEvent .mBookBag .containerB .detail .dBox {
      width: 100%;
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2; }
  .exEvent .mBookBag .friBtnBox {
    width: 70%;
    max-width: none;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1; } }

@media (max-width: 767px) {
  .exEvent .aListInner:after {
    display: none; }
  .exEvent .chrisAgreeBox .text {
    width: 60%; }
  .exEvent .mBookBag {
    background-color: #fff; }
    .exEvent .mBookBag .containerA .aList {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      border-bottom: solid 1px #000;
      padding: 15px 0; }
      .exEvent .mBookBag .containerA .aList:last-child {
        border-bottom: none; }
    .exEvent .mBookBag .containerA .aTitle {
      width: 100%;
      max-width: none;
      padding: 0; }
    .exEvent .mBookBag .containerA .aName {
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 10px 0; }
    .exEvent .mBookBag .containerA .aMoney {
      width: 100%;
      max-width: none;
      padding: 0; }
    .exEvent .mBookBag .containerB .aList .aCount {
      max-width: 120px; }
    .exEvent .mBookBag .containerC .bookBox {
      padding: 120px 20px 40px 20px; }
    .exEvent .mBookBag .containerC .formBodyBox .detail .sNum {
      width: 100%;
      max-width: none; }
    .exEvent .mBookBag .containerD .titleInfoBox {
      padding: 50px 0 35px 0; }
    .exEvent .mBookBag .containerD .typeInfoBox {
      margin: 0 auto; }
    .exEvent .mBookBag .containerD .btnStyle {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }

@-webkit-keyframes leftDoor {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  40% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%); }
  60% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes leftDoor {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  40% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%); }
  60% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@-webkit-keyframes rightDoor {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  40% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); }
  60% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes rightDoor {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  40% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); }
  60% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

.ajaxExhibitionDetail {
  visibility: hidden;
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  -webkit-overflow-scrolling: touch; }
  .ajaxExhibitionDetail.open {
    visibility: visible;
    z-index: 9999; }
    .ajaxExhibitionDetail.open:before {
      -webkit-animation: leftDoor 1200ms;
      animation: leftDoor 1200ms; }
    .ajaxExhibitionDetail.open:after {
      -webkit-animation: rightDoor 1200ms;
      animation: rightDoor 1200ms; }
    .ajaxExhibitionDetail.open .container {
      background-color: white;
      -webkit-transition: background-color .5s ease .5s;
      -o-transition: background-color .5s ease .5s;
      transition: background-color .5s ease .5s; }
    .ajaxExhibitionDetail.open .closeBtn {
      -webkit-transform: translateX(-50%) translateY(0%);
      -ms-transform: translateX(-50%) translateY(0%);
      transform: translateX(-50%) translateY(0%);
      -webkit-transition: -webkit-transform 1s ease 1s;
      transition: -webkit-transform 1s ease 1s;
      -o-transition: transform 1s ease 1s;
      transition: transform 1s ease 1s;
      transition: transform 1s ease 1s, -webkit-transform 1s ease 1s; }
    .ajaxExhibitionDetail.open .rightSec, .ajaxExhibitionDetail.open .leftSec {
      opacity: 1;
      -webkit-transition: opacity .8s ease .5s;
      -o-transition: opacity .8s ease .5s;
      transition: opacity .8s ease .5s; }
  .ajaxExhibitionDetail.close {
    z-index: 10; }
    .ajaxExhibitionDetail.close .container {
      background-color: rgba(255, 255, 255, 0);
      -webkit-transition: background-color 0s ease;
      -o-transition: background-color 0s ease;
      transition: background-color 0s ease; }
    .ajaxExhibitionDetail.close .closeBtn {
      -webkit-transform: translateX(-50%) translateY(-100%);
      -ms-transform: translateX(-50%) translateY(-100%);
      transform: translateX(-50%) translateY(-100%);
      -webkit-transition: -webkit-transform .8s ease;
      transition: -webkit-transform .8s ease;
      -o-transition: transform .8s ease;
      transition: transform .8s ease;
      transition: transform .8s ease, -webkit-transform .8s ease; }
    .ajaxExhibitionDetail.close .rightSec {
      background-color: #fff;
      -webkit-transform: translateX(-100vw);
      -ms-transform: translateX(-100vw);
      transform: translateX(-100vw);
      -webkit-transition: -webkit-transform .9s ease .2s;
      transition: -webkit-transform .9s ease .2s;
      -o-transition: transform .9s ease .2s;
      transition: transform .9s ease .2s;
      transition: transform .9s ease .2s, -webkit-transform .9s ease .2s; }
    .ajaxExhibitionDetail.close .leftSec {
      background-color: #fff;
      -webkit-transform: translateX(100vw);
      -ms-transform: translateX(100vw);
      transform: translateX(100vw);
      -webkit-transition: -webkit-transform .9s ease .2s;
      transition: -webkit-transform .9s ease .2s;
      -o-transition: transform .9s ease .2s;
      transition: transform .9s ease .2s;
      transition: transform .9s ease .2s, -webkit-transform .9s ease .2s; }
  .ajaxExhibitionDetail:before, .ajaxExhibitionDetail:after {
    content: '';
    display: block;
    background-color: #fff;
    width: 50vw;
    height: 100vh;
    position: absolute;
    top: 0;
    z-index: 4; }
  .ajaxExhibitionDetail:before {
    left: -50vw; }
  .ajaxExhibitionDetail:after {
    right: -50vw; }
  .ajaxExhibitionDetail .mCSB_inside > .mCSB_container {
    margin: 0; }
  .ajaxExhibitionDetail .container {
    background-color: rgba(255, 255, 255, 0);
    min-height: 100vh;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .ajaxExhibitionDetail .closeBtn {
    cursor: pointer;
    color: #fff;
    background-color: #000;
    width: 80px;
    height: 80px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%) translateY(-100%);
    -ms-transform: translateX(-50%) translateY(-100%);
    transform: translateX(-50%) translateY(-100%);
    z-index: 3; }
    .ajaxExhibitionDetail .closeBtn .text {
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1; }
    .ajaxExhibitionDetail .closeBtn .iconBox {
      width: 35px;
      height: 35px;
      margin: 0 0 10px 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
      .ajaxExhibitionDetail .closeBtn .iconBox:before, .ajaxExhibitionDetail .closeBtn .iconBox:after {
        margin: 0;
        position: absolute;
        left: 0;
        top: 50%; }
  .ajaxExhibitionDetail .rightSec {
    height: 100vh;
    width: 50%;
    position: relative;
    opacity: 0; }
  .ajaxExhibitionDetail .imgRecFrame {
    position: relative;
    -webkit-transition: -webkit-transform 1s ease;
    transition: -webkit-transform 1s ease;
    -o-transition: transform 1s ease;
    transition: transform 1s ease;
    transition: transform 1s ease, -webkit-transform 1s ease; }
    .ajaxExhibitionDetail .imgRecFrame.artist .imgRecBox {
      -webkit-box-pack: end;
      -ms-flex-pack: end;
      justify-content: flex-end; }
    .ajaxExhibitionDetail .imgRecFrame.artist .imgBox {
      width: 95%;
      max-height: 90vh;
      margin: 5% 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: end;
      -ms-flex-pack: end;
      justify-content: flex-end; }
  .ajaxExhibitionDetail .imgRecBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
    .ajaxExhibitionDetail .imgRecBox .img {
      width: 100%;
      max-height: 100vh; }
  .ajaxExhibitionDetail .ctrlBtnArea {
    color: #fff;
    position: absolute;
    right: 25px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); }
    .ajaxExhibitionDetail .ctrlBtnArea .btn {
      cursor: pointer;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      .ajaxExhibitionDetail .ctrlBtnArea .btn:hover .icon {
        color: #000;
        background-color: #fff; }
    .ajaxExhibitionDetail .ctrlBtnArea .text {
      display: block;
      -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
      writing-mode: vertical-lr; }
    .ajaxExhibitionDetail .ctrlBtnArea .icon {
      border-radius: 50%;
      border: solid 1px #fff;
      width: 29px;
      height: 29px;
      margin: 10px 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-transition: color .5s ease, background-color .5s ease;
      -o-transition: color .5s ease, background-color .5s ease;
      transition: color .5s ease, background-color .5s ease; }
  .ajaxExhibitionDetail .leftSec {
    width: 50%;
    opacity: 0;
    padding: 0 2%; }
    @media screen and (max-width: 1400px) {
      .ajaxExhibitionDetail .leftSec {
        padding: 0 10px; } }
    .ajaxExhibitionDetail .leftSec .tigerBeer {
      max-height: 100vh;
      overflow: hidden; }
    .ajaxExhibitionDetail .leftSec .tigerHome {
      position: relative;
      padding: 0 10%; }
    .ajaxExhibitionDetail .leftSec .bHeadArea {
      background-color: #fff;
      width: 50vw;
      position: fixed;
      right: 0;
      top: 0;
      z-index: 2;
      padding: 0 5vw; }
      .ajaxExhibitionDetail .leftSec .bHeadArea .box {
        padding: 65px 0 0 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        position: relative; }
        .ajaxExhibitionDetail .leftSec .bHeadArea .box:after {
          content: '';
          display: block;
          background-color: #b2b2b2;
          width: 100%;
          height: 1px;
          position: absolute;
          left: 0;
          bottom: 0; }
      .ajaxExhibitionDetail .leftSec .bHeadArea .list {
        cursor: pointer;
        color: #444;
        text-align: center;
        width: 33.33%;
        max-width: 210px;
        padding: 0 10px 30px 10px;
        position: relative; }
        .ajaxExhibitionDetail .leftSec .bHeadArea .list.now:after {
          width: 100%; }
        .ajaxExhibitionDetail .leftSec .bHeadArea .list:after {
          content: '';
          display: block;
          background-color: #ea4848;
          width: 0;
          height: 4px;
          position: absolute;
          left: 50%;
          bottom: 0;
          -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
          transform: translateX(-50%);
          z-index: 1;
          -webkit-transition: width .5s ease;
          -o-transition: width .5s ease;
          transition: width .5s ease; }
        .ajaxExhibitionDetail .leftSec .bHeadArea .list .text {
          font-size: 14px;
          font-size: 0.875rem;
          font-family: 'FuturaPT-Heavy','微軟正黑體';
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center; }
          .ajaxExhibitionDetail .leftSec .bHeadArea .list .text span {
            display: block;
            padding: 0 5px; }
          @media all and (max-width: 1500px) {
            .ajaxExhibitionDetail .leftSec .bHeadArea .list .text {
              padding-top: 5px;
              display: block;
              text-align: center; } }
          @media all and (max-width: 1024px) {
            .ajaxExhibitionDetail .leftSec .bHeadArea .list .text {
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex; } }
          @media all and (max-width: 700px) {
            .ajaxExhibitionDetail .leftSec .bHeadArea .list .text {
              display: block; } }
      .ajaxExhibitionDetail .leftSec .bHeadArea .icon {
        font-size: 30px;
        font-size: 1.875rem; }
    .ajaxExhibitionDetail .leftSec .tigerKitchen {
      width: 100%;
      max-width: 610px;
      padding: 246px 0 100px 0;
      margin: 0 auto;
      position: relative; }
      .ajaxExhibitionDetail .leftSec .tigerKitchen .kitBox {
        position: absolute;
        left: -100%;
        top: -100%;
        z-index: -10;
        opacity: 0; }
        .ajaxExhibitionDetail .leftSec .tigerKitchen .kitBox.now {
          position: relative;
          top: 0;
          left: 0;
          z-index: 1;
          opacity: 1;
          -webkit-transition: opacity 1s ease .3s;
          -o-transition: opacity 1s ease .3s;
          transition: opacity 1s ease .3s; }
    .ajaxExhibitionDetail .leftSec .youtubeBox {
      color: #444;
      width: 100%;
      max-width: 640px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
      .ajaxExhibitionDetail .leftSec .youtubeBox .box {
        width: 50%;
        text-align: center;
        padding: 0 20px;
        margin: 0 0 50px 0; }
        .ajaxExhibitionDetail .leftSec .youtubeBox .box .title {
          font-size: 17px;
          font-size: 1.0625rem;
          overflow: hidden;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          word-break: break-all;
          -webkit-box-orient: vertical; }
        .ajaxExhibitionDetail .leftSec .youtubeBox .box .subTitle {
          font-size: 12px;
          font-size: 0.75rem;
          overflow: hidden;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          word-break: break-all;
          -webkit-box-orient: vertical; }
    .ajaxExhibitionDetail .leftSec .youtubeVideo {
      width: 100%;
      height: 355px;
      margin: 0 auto;
      padding: 0 20px; }
    .ajaxExhibitionDetail .leftSec .youtubeVideoS {
      width: 100%;
      height: 165px;
      margin: 0 0 12px 0; }
    .ajaxExhibitionDetail .leftSec .contentBox {
      color: #444;
      padding: 60px 20px 0 20px; }
      .ajaxExhibitionDetail .leftSec .contentBox .title {
        font-size: 20px;
        font-size: 1.25rem;
        font-family: 'FuturaPT-Medium','微軟正黑體';
        text-align: center; }
      .ajaxExhibitionDetail .leftSec .contentBox .subTitle {
        font-size: 20px;
        font-size: 1.25rem;
        font-family: 'FuturaPT-Medium','微軟正黑體';
        text-align: center; }
      .ajaxExhibitionDetail .leftSec .contentBox .titleBox {
        margin: 0 0 30px 0; }
      .ajaxExhibitionDetail .leftSec .contentBox .text {
        font-size: 17px;
        font-size: 1.0625rem; }
    .ajaxExhibitionDetail .leftSec .infoKit {
      color: #444; }
      .ajaxExhibitionDetail .leftSec .infoKit .infoContent {
        font-size: 17px;
        font-size: 1.0625rem;
        margin: 0 0 40px 0; }
        .ajaxExhibitionDetail .leftSec .infoKit .infoContent .text {
          letter-spacing: 0; }
      .ajaxExhibitionDetail .leftSec .infoKit .textTitle {
        font-size: 17px;
        font-size: 1.0625rem;
        font-weight: 900;
        margin: 0 0 12px 0; }
      .ajaxExhibitionDetail .leftSec .infoKit .cake {
        color: #666;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
        .ajaxExhibitionDetail .leftSec .infoKit .cake .list {
          background-color: #f2f2f2;
          width: calc(50% - 5px);
          margin: 0 2.5px 5px 2.5px;
          padding: 12px 0;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-transition: .5s;
          -o-transition: .5s;
          transition: .5s; }
          @media (max-width: 1700px) {
            .ajaxExhibitionDetail .leftSec .infoKit .cake .list {
              display: block; } }
          @media (max-width: 500px) {
            .ajaxExhibitionDetail .leftSec .infoKit .cake .list {
              width: 100%; } }
          .ajaxExhibitionDetail .leftSec .infoKit .cake .list .sub {
            font-size: 16px;
            font-size: 1rem;
            width: 135px;
            padding-left: 16px;
            position: relative; }
            @media (max-width: 1700px) {
              .ajaxExhibitionDetail .leftSec .infoKit .cake .list .sub {
                margin-bottom: 10px; } }
            .ajaxExhibitionDetail .leftSec .infoKit .cake .list .sub:after {
              content: '';
              display: block;
              background-color: #a9a9a9;
              width: 1px;
              height: 14px;
              position: absolute;
              right: 0;
              top: 5px; }
          .ajaxExhibitionDetail .leftSec .infoKit .cake .list .name {
            font-size: 15px;
            font-size: 0.9375rem;
            width: calc(100% - 135px);
            padding: 0 16px;
            word-break: break-word; }
            @media (max-width: 1700px) {
              .ajaxExhibitionDetail .leftSec .infoKit .cake .list .name {
                width: 100%; } }
    .ajaxExhibitionDetail .leftSec .infoTitle {
      font-family: 'FuturaPT-Medium','微軟正黑體';
      font-weight: 900;
      text-align: center;
      margin: 0 0 40px 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
      .ajaxExhibitionDetail .leftSec .infoTitle .en {
        font-size: 22px;
        font-size: 1.375rem; }
      .ajaxExhibitionDetail .leftSec .infoTitle .cn {
        font-size: 20px;
        font-size: 1.25rem; }
    .ajaxExhibitionDetail .leftSec .langSwitchArea {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin: 0 0 80px;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      .ajaxExhibitionDetail .leftSec .langSwitchArea .list {
        cursor: pointer;
        color: #bdbdbd;
        border-bottom: solid 2px #bdbdbd;
        min-width: 150px;
        padding: 0 0 10px 0;
        margin: 0 15px 20px;
        text-align: center;
        position: relative; }
        .ajaxExhibitionDetail .leftSec .langSwitchArea .list:after {
          content: '';
          display: block;
          background-color: #000;
          width: 0;
          height: 2px;
          position: absolute;
          left: 50%;
          bottom: -2px;
          -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
          transform: translateX(-50%);
          -webkit-transition: width .75s ease;
          -o-transition: width .75s ease;
          transition: width .75s ease; }
        .ajaxExhibitionDetail .leftSec .langSwitchArea .list.now {
          color: #000; }
          .ajaxExhibitionDetail .leftSec .langSwitchArea .list.now:after {
            width: 100%; }
        .ajaxExhibitionDetail .leftSec .langSwitchArea .list .text {
          font-size: 18px;
          font-size: 1.125rem;
          white-space: pre; }
    .ajaxExhibitionDetail .leftSec .allAudioBox {
      position: relative; }
    .ajaxExhibitionDetail .leftSec .audioFrame {
      color: #fff;
      background-color: #ccc;
      width: 100%;
      height: 50px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-transition: background-color .5s ease;
      -o-transition: background-color .5s ease;
      transition: background-color .5s ease;
      border-top-left-radius: 25px;
      border-bottom-left-radius: 25px;
      border-top-right-radius: 25px;
      border-bottom-right-radius: 25px; }
      .ajaxExhibitionDetail .leftSec .audioFrame.playing {
        background-color: #ff6060; }
        .ajaxExhibitionDetail .leftSec .audioFrame.playing .ctrArea .stop {
          position: relative;
          z-index: 0;
          opacity: 1; }
        .ajaxExhibitionDetail .leftSec .audioFrame.playing .ctrArea .play {
          position: absolute;
          z-index: -1;
          opacity: 0; }
      .ajaxExhibitionDetail .leftSec .audioFrame.pausing .ctrArea .stop {
        position: absolute;
        z-index: -1;
        opacity: 0; }
      .ajaxExhibitionDetail .leftSec .audioFrame.pausing .ctrArea .play {
        position: relative;
        z-index: 0;
        opacity: 1; }
      .ajaxExhibitionDetail .leftSec .audioFrame.beMuted .muteArea .mute {
        opacity: 0; }
      .ajaxExhibitionDetail .leftSec .audioFrame.beMuted .muteArea .muted {
        opacity: 1; }
      .ajaxExhibitionDetail .leftSec .audioFrame .ctrArea {
        cursor: pointer;
        height: 50px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        position: relative; }
        .ajaxExhibitionDetail .leftSec .audioFrame .ctrArea .icon {
          position: absolute;
          left: 0;
          top: 0;
          padding: 17px 15px 17px 25px; }
        .ajaxExhibitionDetail .leftSec .audioFrame .ctrArea .stop {
          z-index: -1;
          opacity: 0; }
        .ajaxExhibitionDetail .leftSec .audioFrame .ctrArea .play {
          position: relative;
          z-index: 0;
          opacity: 1; }
      .ajaxExhibitionDetail .leftSec .audioFrame .muteArea {
        font-size: 20px;
        font-size: 1.25rem;
        cursor: pointer;
        height: 50px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        position: relative; }
        .ajaxExhibitionDetail .leftSec .audioFrame .muteArea .icon {
          padding: 15px 8px 15px 15px; }
        .ajaxExhibitionDetail .leftSec .audioFrame .muteArea .mute {
          opacity: 1;
          position: relative;
          z-index: 1; }
        .ajaxExhibitionDetail .leftSec .audioFrame .muteArea .muted {
          position: absolute;
          left: 0;
          top: 0;
          opacity: 0; }
      .ajaxExhibitionDetail .leftSec .audioFrame .current {
        font-size: 14px;
        font-size: 0.875rem;
        margin: 0 15px 0 0;
        padding: 0 0 1px 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center; }
        .ajaxExhibitionDetail .leftSec .audioFrame .current span {
          padding: 3px 0 0 0; }
      .ajaxExhibitionDetail .leftSec .audioFrame .duration {
        font-size: 14px;
        font-size: 0.875rem;
        margin: 0 0 0 10px;
        padding: 0 0 1px 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center; }
        .ajaxExhibitionDetail .leftSec .audioFrame .duration span {
          padding: 3px 0 0 0; }
      .ajaxExhibitionDetail .leftSec .audioFrame .zoomOut {
        cursor: pointer;
        padding: 16px 10px 16px 6px; }
    .ajaxExhibitionDetail .leftSec .audioContent {
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
      opacity: 0; }
      .ajaxExhibitionDetail .leftSec .audioContent.now {
        position: relative;
        z-index: 0;
        opacity: 1; }
      .ajaxExhibitionDetail .leftSec .audioContent .info {
        margin: 0 0 55px 0; }
      .ajaxExhibitionDetail .leftSec .audioContent .textFrame {
        margin: 0 0 15px 0;
        padding: 0 25px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between; }
        .ajaxExhibitionDetail .leftSec .audioContent .textFrame.showWave .waveBox {
          opacity: 1; }
        .ajaxExhibitionDetail .leftSec .audioContent .textFrame .text {
          font-size: 18px;
          font-size: 1.125rem;
          color: #444;
          margin: 0 20px 0 0;
          -webkit-transform: translateY(5px);
          -ms-transform: translateY(5px);
          transform: translateY(5px); }
        .ajaxExhibitionDetail .leftSec .audioContent .textFrame .waveBox {
          overflow: hidden;
          max-height: 30px;
          opacity: 0;
          -webkit-transition: opacity .5s ease;
          -o-transition: opacity .5s ease;
          transition: opacity .5s ease; }
  .ajaxExhibitionDetail .progressCenter {
    position: relative;
    width: calc(100% - 255px);
    max-width: 340px;
    height: 20px; }
    .ajaxExhibitionDetail .progressCenter input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 12px;
      height: 12px;
      background: #fff;
      border-radius: 50%; }
    .ajaxExhibitionDetail .progressCenter input[type="range"] {
      -webkit-appearance: none;
      width: 100%;
      margin: 7.5px 0;
      position: absolute;
      z-index: 9999;
      left: 0;
      top: -7px;
      height: 20px;
      cursor: pointer;
      background-color: inherit; }
    .ajaxExhibitionDetail .progressCenter progress::-moz-progress-bar {
      background: #fff; }
    .ajaxExhibitionDetail .progressCenter progress::-webkit-progress-bar {
      background: rgba(0, 0, 0, 0.2); }
    .ajaxExhibitionDetail .progressCenter progress::-webkit-progress-value {
      background: #fff; }
    .ajaxExhibitionDetail .progressCenter progress {
      color: #fff;
      background: rgba(0, 0, 0, 0.2); }
    .ajaxExhibitionDetail .progressCenter .amplitude-song-played-progress {
      position: absolute;
      left: 0;
      top: 8px;
      right: 0;
      width: 100%;
      z-index: 60;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      height: 4px;
      border-radius: 5px;
      background: transparent;
      border: none; }
    .ajaxExhibitionDetail .progressCenter .amplitude-buffered-progress {
      position: absolute;
      left: 0;
      top: 8px;
      right: 0;
      width: 100%;
      z-index: 10;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      height: 4px;
      border-radius: 5px;
      background: transparent;
      border: none;
      opacity: 0; }
  @media (max-width: 1250px) {
    .ajaxExhibitionDetail .leftSec .bHeadArea {
      padding: 0 3%; }
    .ajaxExhibitionDetail .leftSec .tigerHome {
      padding: 0 6%; } }
  @media (max-width: 1024px) {
    .ajaxExhibitionDetail.open .closeBtn {
      -webkit-transform: translateX(0%) translateY(0%);
      -ms-transform: translateX(0%) translateY(0%);
      transform: translateX(0%) translateY(0%); }
    .ajaxExhibitionDetail .for_scroll {
      height: 100vh;
      overflow: hidden;
      overflow-y: scroll; }
    .ajaxExhibitionDetail .closeBtn {
      left: 0;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
      width: 50px;
      height: 50px; }
      .ajaxExhibitionDetail .closeBtn .text {
        display: none; }
      .ajaxExhibitionDetail .closeBtn .iconBox {
        margin: 0; }
    .ajaxExhibitionDetail .imgRecFrame.artist .imgRecBox .img {
      width: auto; }
    .ajaxExhibitionDetail .imgRecFrame.artist .imgBox {
      width: auto;
      margin: 0; }
    .ajaxExhibitionDetail .imgRecBox .img {
      max-height: 500px; }
    .ajaxExhibitionDetail .container {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
    .ajaxExhibitionDetail .rightSec {
      width: 100vw;
      height: 500px;
      overflow: hidden; }
    .ajaxExhibitionDetail .leftSec {
      width: 100vw; }
      .ajaxExhibitionDetail .leftSec .tigerBeer {
        max-height: none; }
      .ajaxExhibitionDetail .leftSec .bHeadArea {
        position: relative;
        width: 100vw; }
      .ajaxExhibitionDetail .leftSec .tigerKitchen {
        padding: 100px 0; }
      .ajaxExhibitionDetail .leftSec .youtubeBox .box {
        width: 100%; }
      .ajaxExhibitionDetail .leftSec .youtubeVideoS {
        height: 355px; } }
  @media (max-width: 767px) {
    .ajaxExhibitionDetail .leftSec .tigerKitchen {
      padding: 50px 0; }
    .ajaxExhibitionDetail .leftSec .audioFrame .ctrArea .icon {
      padding: 17px 10px 17px 15px; }
    .ajaxExhibitionDetail .leftSec .audioFrame .current {
      margin: 0 10px 0 0; }
    .ajaxExhibitionDetail .leftSec .audioFrame .muteArea .icon {
      padding: 15px 5px 15px 10px; }
    .ajaxExhibitionDetail .leftSec .audioFrame .zoomOut {
      padding: 16px 10px 16px 4px; }
    .ajaxExhibitionDetail .leftSec .audioContent .textFrame {
      padding: 0; }
    .ajaxExhibitionDetail .progressCenter {
      width: calc(100% - 225px); } }
  @media (max-width: 414px) {
    .ajaxExhibitionDetail .leftSec .youtubeVideoS {
      height: 250px; } }

.exListPageBody .clickScrollArea {
  margin: 0 auto 50px auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column; }
  .exListPageBody .clickScrollArea .box {
    margin: 0 0 20px 0;
    padding: 0; }
  .exListPageBody .clickScrollArea .link.now {
    color: #000; }
    .exListPageBody .clickScrollArea .link.now:after {
      width: 100%; }

.exListPageBody .searchBtnBox {
  font-size: 12px;
  font-size: 0.75rem;
  cursor: pointer;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-line-pack: center;
  align-content: center; }
  .exListPageBody .searchBtnBox p {
    color: #000;
    font-size: 15px;
    font-size: 0.9375rem;
    padding-left: 10px; }
  .exListPageBody .searchBtnBox .box {
    background-color: #000;
    border-radius: 50%;
    width: 27px;
    height: 27px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: -webkit-transform .5s linear;
    transition: -webkit-transform .5s linear;
    -o-transition: transform .5s linear;
    transition: transform .5s linear;
    transition: transform .5s linear, -webkit-transform .5s linear;
    margin: 0; }
    .exListPageBody .searchBtnBox .box:hover {
      -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1); }

.exListPageBody .bgbg {
  background-color: #f9f9f9;
  width: 100%;
  padding-top: 120px; }

.exListPageBody .listFrameBox {
  background-color: #f9f9f9;
  margin: 0 0 150px 0; }
  .exListPageBody .listFrameBox .list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .exListPageBody .listFrameBox .list:hover .imgFrame .img {
      -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1); }
    .exListPageBody .listFrameBox .list:hover .moreBtn {
      color: #e83434; }
    .exListPageBody .listFrameBox .list.showOnline .online {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
    .exListPageBody .listFrameBox .list.showFull .fullBox {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
    .exListPageBody .listFrameBox .list.show .imgKing {
      opacity: 1;
      -webkit-transition: opacity 1.5s ease;
      -o-transition: opacity 1.5s ease;
      transition: opacity 1.5s ease; }
    .exListPageBody .listFrameBox .list.show .imgFrame .img {
      -webkit-transition: -webkit-transform 1s ease;
      transition: -webkit-transform 1s ease;
      -o-transition: transform 1s ease;
      transition: transform 1s ease;
      transition: transform 1s ease, -webkit-transform 1s ease; }
    .exListPageBody .listFrameBox .list.show .titleBox .imgTitle {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
      transition: opacity 1s ease, -webkit-transform 1s ease;
      -o-transition: opacity 1s ease, transform 1s ease;
      transition: opacity 1s ease, transform 1s ease;
      transition: opacity 1s ease, transform 1s ease, -webkit-transform 1s ease; }
    .exListPageBody .listFrameBox .list.show .titleBox .imgSubTitle {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1s ease .3s, -webkit-transform 1s ease .3s;
      transition: opacity 1s ease .3s, -webkit-transform 1s ease .3s;
      -o-transition: opacity 1s ease .3s, transform 1s ease .3s;
      transition: opacity 1s ease .3s, transform 1s ease .3s;
      transition: opacity 1s ease .3s, transform 1s ease .3s, -webkit-transform 1s ease .3s; }
    .exListPageBody .listFrameBox .list.show .dateBox {
      opacity: 1;
      -webkit-transition: opacity 1s ease .6s;
      -o-transition: opacity 1s ease .6s;
      transition: opacity 1s ease .6s; }
    .exListPageBody .listFrameBox .list.show .moreBtn {
      opacity: 1;
      -webkit-transition: opacity 1s ease .8s, color .5s ease;
      -o-transition: opacity 1s ease .8s, color .5s ease;
      transition: opacity 1s ease .8s, color .5s ease; }
  .exListPageBody .listFrameBox .imgKing {
    width: 50%;
    overflow: hidden;
    opacity: 0; }
  .exListPageBody .listFrameBox .imgFrame {
    position: relative;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
    .exListPageBody .listFrameBox .imgFrame .img {
      max-height: 520px;
      -webkit-transition: -webkit-transform 1s ease;
      transition: -webkit-transform 1s ease;
      -o-transition: transform 1s ease;
      transition: transform 1s ease;
      transition: transform 1s ease, -webkit-transform 1s ease; }
  .exListPageBody .listFrameBox .textFrame {
    background-color: #f9f9f9;
    width: 50%;
    padding: 30px 30px 70px 10%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative; }
  .exListPageBody .listFrameBox .moreBtn {
    font-size: 20px;
    font-size: 1.25rem;
    color: #b3b3b3;
    font-family: 'FuturaPT-Heavy','微軟正黑體';
    position: absolute;
    right: 50px;
    bottom: 50px;
    opacity: 0;
    -webkit-transition: color .5s ease;
    -o-transition: color .5s ease;
    transition: color .5s ease; }
  .exListPageBody .listFrameBox .titleBox {
    margin: 0 0 40px 0; }
    .exListPageBody .listFrameBox .titleBox .imgTitle {
      font-size: 26px;
      font-size: 1.625rem;
      opacity: 0;
      -webkit-transform: translateY(100px);
      -ms-transform: translateY(100px);
      transform: translateY(100px); }
    .exListPageBody .listFrameBox .titleBox .imgSubTitle {
      font-size: 14px;
      font-size: 0.875rem;
      opacity: 0;
      -webkit-transform: translateY(100px);
      -ms-transform: translateY(100px);
      transform: translateY(100px); }
  .exListPageBody .listFrameBox .dateBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    opacity: 0; }
    @media all and (max-width: 1024px) {
      .exListPageBody .listFrameBox .dateBox {
        margin-bottom: 20px; } }
    .exListPageBody .listFrameBox .dateBox .line {
      background-color: #000;
      width: 36px;
      height: 1px;
      margin: 0 10px 14px 10px; }
    .exListPageBody .listFrameBox .dateBox .year {
      font-size: 15px;
      font-size: 0.9375rem;
      font-family: 'FuturaPT-Light','微軟正黑體'; }
    .exListPageBody .listFrameBox .dateBox .day {
      font-size: 30px;
      font-size: 1.875rem;
      font-family: 'MyriadPro-Regular','微軟正黑體'; }
      .exListPageBody .listFrameBox .dateBox .day .en {
        font-size: 17px;
        font-size: 1.0625rem;
        font-family: 'FuturaPT-Light','微軟正黑體'; }

.exListPageBody .listFrameBox2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto; }
  .exListPageBody .listFrameBox2 .list {
    width: 33.33%;
    margin: 0 35px 95px 35px;
    max-width: 450px;
    opacity: 0; }
    .exListPageBody .listFrameBox2 .list.show {
      opacity: 1;
      -webkit-transition: opacity 1s ease;
      -o-transition: opacity 1s ease;
      transition: opacity 1s ease; }
    .exListPageBody .listFrameBox2 .list:hover .imgFrame .img {
      -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1);
      -webkit-transition: -webkit-transform 1s ease;
      transition: -webkit-transform 1s ease;
      -o-transition: transform 1s ease;
      transition: transform 1s ease;
      transition: transform 1s ease, -webkit-transform 1s ease; }
    .exListPageBody .listFrameBox2 .list.show .imgKing {
      opacity: 1;
      -webkit-transition: opacity 1s ease;
      -o-transition: opacity 1s ease;
      transition: opacity 1s ease; }
    .exListPageBody .listFrameBox2 .list.showOnline .online {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
    .exListPageBody .listFrameBox2 .list.showFull .fullBox {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
  .exListPageBody .listFrameBox2 .imgKing {
    opacity: 0; }
  .exListPageBody .listFrameBox2 .imgFrame .img {
    max-height: 280px;
    margin: 0 auto;
    -webkit-transition: -webkit-transform 1s ease;
    transition: -webkit-transform 1s ease;
    -o-transition: transform 1s ease;
    transition: transform 1s ease;
    transition: transform 1s ease, -webkit-transform 1s ease; }

.exListPageBody .imgKing {
  overflow: hidden;
  position: relative; }
  .exListPageBody .imgKing .online {
    font-size: 14px;
    font-size: 0.875rem;
    font-family: 'FuturaPT-Heavy','微軟正黑體';
    color: #fff;
    background-color: #000;
    width: 200px;
    height: 40px;
    display: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    right: 0;
    bottom: 0; }

.exListPageBody .fullBox {
  font-size: 14px;
  font-size: 0.875rem;
  font-family: 'FuturaPT-Heavy','微軟正黑體';
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  .exListPageBody .fullBox .box {
    border: solid 1px #fff;
    min-width: 100px;
    min-height: 90px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
    .exListPageBody .fullBox .box span:first-child {
      margin-bottom: 5px; }
    .exListPageBody .fullBox .box span:last-child {
      margin-bottom: 0; }

@media (max-width: 1580px) {
  .exListPageBody[data-page="eventList"] .listFrameBox2, .exListPageBody[data-page="exhibitionList"] .listFrameBox2 {
    width: 90%; }
    .exListPageBody[data-page="eventList"] .listFrameBox2 .list, .exListPageBody[data-page="exhibitionList"] .listFrameBox2 .list {
      width: calc(33.33% - 70px); } }

@media (max-width: 1365px) {
  .exListPageBody .listFrameBox .textFrame {
    padding: 30px 30px 45px 6%; }
  .exListPageBody .listFrameBox .moreBtn {
    bottom: 30px; }
  .exListPageBody[data-page="eventList"] .listFrameBox2 .list, .exListPageBody[data-page="exhibitionList"] .listFrameBox2 .list {
    width: calc(33.33% - 40px);
    margin: 0 20px 95px 20px; } }

@media (max-width: 1023px) {
  .exListPageBody .listFrameBox .list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 0 20px 0; }
  .exListPageBody .listFrameBox .imgKing {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
    width: 75%; }
  .exListPageBody .listFrameBox .textFrame {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    width: 75%; }
  .exListPageBody[data-page="eventList"] .listFrameBox2, .exListPageBody[data-page="exhibitionList"] .listFrameBox2 {
    width: 100%; }
    .exListPageBody[data-page="eventList"] .listFrameBox2 .list, .exListPageBody[data-page="exhibitionList"] .listFrameBox2 .list {
      width: calc(50% - 70px);
      margin: 0 35px 95px 35px; } }

@media (max-width: 767px) {
  .exListPageBody .listFrameBox .imgKing {
    width: 100%; }
  .exListPageBody .listFrameBox .textFrame {
    width: 100%; }
  .exListPageBody[data-page="eventList"] .listFrameBox2, .exListPageBody[data-page="exhibitionList"] .listFrameBox2 {
    width: 90%; }
    .exListPageBody[data-page="eventList"] .listFrameBox2 .list, .exListPageBody[data-page="exhibitionList"] .listFrameBox2 .list {
      width: 100%;
      margin: 0 auto 60px auto; } }

.exListPageBody .secMac {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto 150px auto; }
  .exListPageBody .secMac .listFrameBox2 {
    display: block; }
    .exListPageBody .secMac .listFrameBox2:after {
      content: ".";
      clear: both;
      visibility: hidden;
      display: block;
      height: 0;
      position: relative; }
    .exListPageBody .secMac .listFrameBox2 .imgFrame .img {
      margin: 0 auto; }
    .exListPageBody .secMac .listFrameBox2 .list {
      margin: 0;
      max-width: none;
      float: left; }
    .exListPageBody .secMac .listFrameBox2 .boxH3 {
      height: 505px;
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
    .exListPageBody .secMac .listFrameBox2 .center {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
    .exListPageBody .secMac .listFrameBox2 .wFull {
      width: 100%;
      padding: 20px 35px; }
      .exListPageBody .secMac .listFrameBox2 .wFull .imgFrame .img {
        max-height: 735px; }
    .exListPageBody .secMac .listFrameBox2 .wHalf {
      width: 50%;
      max-width: 780px;
      padding: 20px 35px; }
      .exListPageBody .secMac .listFrameBox2 .wHalf .imgFrame .img {
        max-height: 380px; }
    .exListPageBody .secMac .listFrameBox2 .w450 {
      padding: 20px 35px;
      width: 33.33%;
      max-width: 520px; }
      .exListPageBody .secMac .listFrameBox2 .w450 .showBox {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; }
      .exListPageBody .secMac .listFrameBox2 .w450 .imgFrame .img {
        max-height: 240px; }
    .exListPageBody .secMac .listFrameBox2 .h2 .imgFrame .img {
      max-height: 925px; }
    .exListPageBody .secMac .listFrameBox2 .h1.center .imgFrame .img {
      max-height: 270px; }

.exListPageBody .fBox {
  margin: 0 0 100px 0; }
  .exListPageBody .fBox .list {
    margin: 0 35px; }

.exListPageBody .showBox {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  padding: 19px 0 0 0;
  width: 100%;
  height: 125px; }

.exListPageBody .textBox {
  font-weight: 900; }

.exListPageBody .textFrame {
  padding: 20px 0 0 0; }

.exListPageBody .titleBox {
  font-weight: 900;
  margin: 0 0 15px 0; }
  .exListPageBody .titleBox .imgTitle {
    font-size: 20px;
    font-size: 1.25rem;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    word-break: break-all;
    -webkit-box-orient: vertical; }
  .exListPageBody .titleBox .imgSubTitle {
    font-size: 12px;
    font-size: 0.75rem;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    word-break: break-all;
    -webkit-box-orient: vertical; }

.exListPageBody .pTitle {
  font-size: 20px;
  font-size: 1.25rem;
  margin: 0 0 5px 0;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;
  -webkit-box-orient: vertical; }

.exListPageBody .pSubTitle {
  font-size: 12px;
  font-size: 0.75rem;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;
  -webkit-box-orient: vertical; }

.exListPageBody .whenBox {
  font-size: 14px;
  font-size: 0.875rem;
  font-family: 'FuturaPT-Light','微軟正黑體';
  font-weight: 900;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  line-height: 1.5;
  height: 42px; }
  .exListPageBody .whenBox .dateBox {
    padding-right: 10px; }

.exListPageBody .whenBoxB {
  margin: 0 30px 0 0;
  font-weight: 900;
  font-family: 'FuturaPT-Light','微軟正黑體';
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .exListPageBody .whenBoxB .year {
    font-size: 15px;
    font-size: 0.9375rem; }
  .exListPageBody .whenBoxB .when {
    font-size: 24px;
    font-size: 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
    .exListPageBody .whenBoxB .when .day {
      font-family: 'MyriadPro-Regular','微軟正黑體'; }
    .exListPageBody .whenBoxB .when .en {
      font-size: 16px;
      font-size: 1rem; }
  .exListPageBody .whenBoxB .line {
    display: block;
    background-color: #000;
    width: 35px;
    height: 1px;
    margin: 0 5px;
    -ms-flex-item-align: end;
    align-self: flex-end;
    margin-bottom: 12px; }

@media (max-width: 1580px) {
  .exListPageBody .listFrameBox2 {
    width: 100%; }
    .exListPageBody .listFrameBox2 .list {
      width: auto; } }

@media (max-width: 1200px) {
  .exListPageBody .whenBoxB {
    margin: 0 20px 0 0; }
    .exListPageBody .whenBoxB .when {
      font-size: 20px;
      font-size: 1.25rem; }
      .exListPageBody .whenBoxB .when .line {
        width: 20px; } }

@media (max-width: 1100px) {
  .exListPageBody .secMac .listFrameBox2 .boxH3 {
    height: auto; }
  .exListPageBody .secMac .listFrameBox2 .wFull {
    padding: 18px 35px; }
  .exListPageBody .secMac .listFrameBox2 .w450 {
    width: 50%;
    padding: 18px 35px; }
  .exListPageBody .secMac .listFrameBox2 .wHalf {
    padding: 18px 35px; } }

@media (max-width: 1024px) {
  .exListPageBody .showBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
    .exListPageBody .showBox .textBox {
      -webkit-box-ordinal-group: 1;
      -ms-flex-order: 0;
      order: 0;
      margin: 0 0 10px 0; }
    .exListPageBody .showBox .whenBoxB {
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1; }
  .exListPageBody .secMac .listFrameBox2 .boxH3 {
    height: auto; }
  .exListPageBody .secMac .listFrameBox2 .wFull {
    padding: 18px 35px; }
  .exListPageBody .secMac .listFrameBox2 .w450 {
    width: 50%;
    padding: 18px 35px; }
  .exListPageBody .whenBoxB .when {
    font-size: 20px;
    font-size: 1.25rem; }
  .exListPageBody .pTitle {
    font-size: 17px;
    font-size: 1.0625rem; }
  .exListPageBody .titleBox .imgTitle {
    font-size: 17px;
    font-size: 1.0625rem; } }

@media (max-width: 767px) {
  .exListPageBody .secMac .listFrameBox2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    .exListPageBody .secMac .listFrameBox2 .wFull {
      padding: 25px 35px; }
    .exListPageBody .secMac .listFrameBox2 .wHalf {
      width: 100%;
      padding: 25px 35px; }
    .exListPageBody .secMac .listFrameBox2 .w450 {
      width: 100%;
      padding: 25px 35px; }
  .exListPageBody .titleBox .imgTitle {
    -webkit-line-clamp: 2; }
  .exListPageBody .titleBox .imgSubTitle {
    -webkit-line-clamp: 2; }
  .exListPageBody .pTitle {
    -webkit-line-clamp: 2; }
  .exListPageBody .pSubTitle {
    -webkit-line-clamp: 2; } }

.searchKFC .ctrlBtnArea .chrisCloseBtn.btn.white {
  position: absolute;
  top: 40px;
  right: 40px;
  background: rgba(0, 0, 0, 0);
  width: auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse; }
  .searchKFC .ctrlBtnArea .chrisCloseBtn.btn.white::before {
    display: none; }
  .searchKFC .ctrlBtnArea .chrisCloseBtn.btn.white .iconBox::after, .searchKFC .ctrlBtnArea .chrisCloseBtn.btn.white .iconBox::before {
    background-color: #fff;
    width: 35px; }
  .searchKFC .ctrlBtnArea .chrisCloseBtn.btn.white p {
    color: #fff;
    padding-right: 10px;
    font-family: 'FuturaPT-Light','微軟正黑體'; }

.searchKFC {
  color: #fff;
  z-index: -1; }
  .searchKFC.open {
    z-index: 10; }
    .searchKFC.open .bg {
      width: 100%;
      -webkit-transition: width .8s ease;
      -o-transition: width .8s ease;
      transition: width .8s ease; }
    .searchKFC.open .ctrlBtnArea {
      opacity: 1;
      -webkit-transition: opacity 1.5s ease 1.5s;
      -o-transition: opacity 1.5s ease 1.5s;
      transition: opacity 1.5s ease 1.5s; }
    .searchKFC.open .searchTitle {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1.2s ease .5s, -webkit-transform 1.2s ease .5s;
      transition: opacity 1.2s ease .5s, -webkit-transform 1.2s ease .5s;
      -o-transition: transform 1.2s ease .5s, opacity 1.2s ease .5s;
      transition: transform 1.2s ease .5s, opacity 1.2s ease .5s;
      transition: transform 1.2s ease .5s, opacity 1.2s ease .5s, -webkit-transform 1.2s ease .5s; }
    .searchKFC.open .bananaBox .banana {
      opacity: 1;
      -webkit-transition: opacity .5s ease .7s;
      -o-transition: opacity .5s ease .7s;
      transition: opacity .5s ease .7s; }
    .searchKFC.open .bananaBox .listBox .list {
      opacity: 1; }
  .searchKFC.close .bg {
    width: 0;
    -webkit-transition: width .8s ease .3s;
    -o-transition: width .8s ease .3s;
    transition: width .8s ease .3s; }
  .searchKFC.close .ctrlBtnArea {
    opacity: 0;
    -webkit-transition: opacity .7s ease;
    -o-transition: opacity .7s ease;
    transition: opacity .7s ease; }
  .searchKFC.close .searchTitle {
    opacity: 0;
    -webkit-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease; }
  .searchKFC.close .bananaBox {
    opacity: 0;
    -webkit-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease; }
  .searchKFC.history .chooseBox {
    height: auto;
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 1.2s ease .8s;
    -o-transition: opacity 1.2s ease .8s;
    transition: opacity 1.2s ease .8s; }
    .searchKFC.history .chooseBox .year {
      margin: 0 auto 120px auto; }
  .searchKFC .bg {
    background-color: rgba(233, 62, 62, 0.95);
    width: 0;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    z-index: -1;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%); }
  .searchKFC .for_scroll {
    min-height: 100vh; }
  .searchKFC .container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 120px 0; }
  .searchKFC .ctrlBtnArea {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: 0; }
    .searchKFC .ctrlBtnArea .iconBox {
      width: 28px;
      height: 28px; }
      .searchKFC .ctrlBtnArea .iconBox:before, .searchKFC .ctrlBtnArea .iconBox:after {
        width: 28px;
        margin: 0;
        position: absolute;
        left: 0;
        top: 50%; }
    .searchKFC .ctrlBtnArea .text {
      font-size: 15px;
      font-size: 0.9375rem;
      font-family: 'FuturaPT-Heavy','微軟正黑體'; }
    .searchKFC .ctrlBtnArea .btn {
      cursor: pointer;
      border-radius: 50%;
      width: 76px;
      height: 76px;
      margin: 0 10px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      position: relative; }
      .searchKFC .ctrlBtnArea .btn:before {
        content: '';
        display: block;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
    .searchKFC .ctrlBtnArea .white {
      color: #000;
      background-color: #fff; }
      .searchKFC .ctrlBtnArea .white:before {
        border: dashed 1px #000; }
      .searchKFC .ctrlBtnArea .white .text {
        font-size: 12px;
        font-size: 0.75rem; }
    .searchKFC .ctrlBtnArea .black {
      color: #fff;
      background-color: #000; }
      .searchKFC .ctrlBtnArea .black:before {
        border: dashed 1px #fff; }
  .searchKFC .mCSB_inside > .mCSB_container {
    margin: 0; }
  .searchKFC .searchTitle {
    font-size: 52px;
    font-size: 3.25rem;
    font-family: 'FuturaPT-Heavy','微軟正黑體';
    text-align: center;
    margin: 0 0 130px 0;
    opacity: 0;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px); }
    .searchKFC .searchTitle .cn {
      font-size: 50px;
      font-size: 3.125rem; }
  .searchKFC .chooseBox {
    height: 0;
    opacity: 0;
    visibility: hidden; }
    .searchKFC .chooseBox .textYear {
      font-size: 20px;
      font-size: 1.25rem;
      text-align: center;
      margin: 0 0 20px 0; }
    .searchKFC .chooseBox .year {
      width: 380px; }
      .searchKFC .chooseBox .year .character {
        font-size: 50px;
        font-size: 3.125rem;
        font-family: 'FuturaPT-Light','微軟正黑體';
        margin: 0 auto; }
      .searchKFC .chooseBox .year .dropShow {
        border-bottom: solid 1px #fff; }
        .searchKFC .chooseBox .year .dropShow .showBox {
          width: 100%;
          text-align: center; }
      .searchKFC .chooseBox .year .list .character {
        font-size: 30px;
        font-size: 1.875rem; }
  .searchKFC .bananaBox {
    margin: 0 0 130px 0; }
    .searchKFC .bananaBox .banana {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      padding: 30px 100px 30px 50px;
      border-bottom: solid 1px #f49f9f;
      opacity: 0; }
      .searchKFC .bananaBox .banana:last-child {
        border-bottom: none; }
      .searchKFC .bananaBox .banana .name {
        font-size: 20px;
        font-size: 1.25rem;
        font-weight: 900;
        padding: 0 80px 0 0;
        white-space: nowrap; }
    .searchKFC .bananaBox .listBox {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
      .searchKFC .bananaBox .listBox .list {
        font-size: 18px;
        font-size: 1.125rem;
        color: #f49f9f;
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 5px 20px;
        opacity: 0; }
        .searchKFC .bananaBox .listBox .list p {
          padding-left: 10px; }
        .searchKFC .bananaBox .listBox .list.choose {
          color: #fff; }
          .searchKFC .bananaBox .listBox .list.choose .square {
            background-color: #fff;
            border: solid 1px #fff; }
      .searchKFC .bananaBox .listBox .square {
        border: solid 1px #f49f9f;
        display: block;
        width: 17px;
        height: 17px; }
  @media (max-width: 1023px) {
    .searchKFC .bananaBox {
      width: 90%;
      margin: 0 auto 130px auto; } }
  @media (max-width: 767px) {
    .searchKFC .searchTitle {
      padding: 0 5%; }
    .searchKFC .chooseBox {
      width: 90%;
      margin: 0 auto; }
      .searchKFC .chooseBox .year {
        width: 100%; }
    .searchKFC .bananaBox .banana {
      padding: 30px 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start; }
      .searchKFC .bananaBox .banana .name {
        white-space: unset;
        min-width: 130px;
        padding: 0 20px;
        margin: 0 0 10px 0; } }

.discoverPageBody .imgTitle {
  font-size: 24px;
  font-size: 1.5rem;
  font-weight: 900;
  font-family: 'FuturaPT-Heavy','微軟正黑體';
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  -webkit-box-orient: vertical; }

.discoverPageBody .imgSubTitle {
  font-size: 22px;
  font-size: 1.375rem;
  font-weight: 900;
  font-family: 'FuturaPT-Heavy','微軟正黑體';
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  -webkit-box-orient: vertical; }

.discoverPageBody .imgText {
  font-size: 16px;
  font-size: 1rem;
  padding: 15px 0 0 0; }

.discoverPageBody .clickScrollArea .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  opacity: 0 !important; }

.discoverPageBody .clickScrollArea .link.now {
  color: #000; }
  .discoverPageBody .clickScrollArea .link.now:after {
    width: 100%;
    -webkit-transition: width .5s ease;
    -o-transition: width .5s ease;
    transition: width .5s ease; }

.discoverPageBody .colaPig {
  margin: 0 auto 100px auto; }

.discoverPageBody .fullFrame {
  max-width: 1480px;
  margin: 0 auto 100px auto; }
  .discoverPageBody .fullFrame .imgBox {
    display: inline-block;
    position: relative;
    overflow: hidden;
    margin: 0 0 35px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: -webkit-box-shadow .2s linear;
    transition: -webkit-box-shadow .2s linear;
    -o-transition: box-shadow .2s linear;
    transition: box-shadow .2s linear;
    transition: box-shadow .2s linear, -webkit-box-shadow .2s linear; }
    .discoverPageBody .fullFrame .imgBox::after {
      content: '';
      background: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 0;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-transition: .5s;
      -o-transition: .5s;
      transition: .5s; }
    .discoverPageBody .fullFrame .imgBox::before {
      content: 'read more';
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      font-size: 0.9875rem;
      opacity: 0;
      display: inline-block;
      color: #fff;
      z-index: 10; }
    .discoverPageBody .fullFrame .imgBox:hover {
      -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
      box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5); }
      .discoverPageBody .fullFrame .imgBox:hover::after {
        height: 100%; }
      .discoverPageBody .fullFrame .imgBox:hover::before {
        -webkit-transition: .5s .5s;
        -o-transition: .5s .5s;
        transition: .5s .5s;
        opacity: 1; }
    .discoverPageBody .fullFrame .imgBox.show img {
      -webkit-animation: fadeInDown 1.2s both;
      animation: fadeInDown 1.2s both; }
    .discoverPageBody .fullFrame .imgBox img {
      opacity: 0; }
  .discoverPageBody .fullFrame .caption {
    text-align: center;
    padding: 0 5%; }
    .discoverPageBody .fullFrame .caption.show .imgTitle {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1s ease, -webkit-transform 1.2s ease;
      transition: opacity 1s ease, -webkit-transform 1.2s ease;
      -o-transition: opacity 1s ease, transform 1.2s ease;
      transition: opacity 1s ease, transform 1.2s ease;
      transition: opacity 1s ease, transform 1.2s ease, -webkit-transform 1.2s ease; }
    .discoverPageBody .fullFrame .caption.show .imgSubTitle {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1s ease .4s, -webkit-transform 1.2s ease .4s;
      transition: opacity 1s ease .4s, -webkit-transform 1.2s ease .4s;
      -o-transition: opacity 1s ease .4s, transform 1.2s ease .4s;
      transition: opacity 1s ease .4s, transform 1.2s ease .4s;
      transition: opacity 1s ease .4s, transform 1.2s ease .4s, -webkit-transform 1.2s ease .4s; }
    .discoverPageBody .fullFrame .caption.show .imgText {
      opacity: 1;
      -webkit-transition: opacity 1s ease .8s;
      -o-transition: opacity 1s ease .8s;
      transition: opacity 1s ease .8s; }
    .discoverPageBody .fullFrame .caption .imgTitle {
      opacity: 0;
      -webkit-transform: translateY(100px);
      -ms-transform: translateY(100px);
      transform: translateY(100px); }
    .discoverPageBody .fullFrame .caption .imgSubTitle {
      opacity: 0;
      -webkit-transform: translateY(100px);
      -ms-transform: translateY(100px);
      transform: translateY(100px); }
    .discoverPageBody .fullFrame .caption .imgText {
      opacity: 0; }
  .discoverPageBody .fullFrame .imgText {
    width: 75%;
    margin: 0 auto;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    -webkit-box-orient: vertical; }

.discoverPageBody .smallFrame {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 1280px;
  position: relative; }
  .discoverPageBody .smallFrame.show:before {
    width: 66.4%;
    -webkit-transition: width 2s ease .5s;
    -o-transition: width 2s ease .5s;
    transition: width 2s ease .5s; }
  .discoverPageBody .smallFrame.return:before {
    left: auto;
    right: 0; }
  .discoverPageBody .smallFrame.return .textFrame {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    padding: 0 16.4% 0 0; }
  .discoverPageBody .smallFrame.return .imgFrame {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start; }
    .discoverPageBody .smallFrame.return .imgFrame .img {
      margin: 0 auto 0 0; }
  .discoverPageBody .smallFrame:before {
    content: '';
    display: block;
    background-color: #cfcfcf;
    width: 0;
    height: 1px;
    position: absolute;
    left: 0;
    top: 80px; }
  .discoverPageBody .smallFrame .textBox {
    margin: 0 0 45px 0;
    padding: 120px 0 0 0; }
  .discoverPageBody .smallFrame .imgText {
    padding: 15px 0 0 0;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-all;
    -webkit-box-orient: vertical; }
  .discoverPageBody .smallFrame .textFrame, .discoverPageBody .smallFrame .imgFrame {
    width: 50%; }
  .discoverPageBody .smallFrame .textFrame {
    padding: 0 0 0 16.4%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start; }
    .discoverPageBody .smallFrame .textFrame.show .imgTitle {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1s ease, -webkit-transform 1.2s ease;
      transition: opacity 1s ease, -webkit-transform 1.2s ease;
      -o-transition: opacity 1s ease, transform 1.2s ease;
      transition: opacity 1s ease, transform 1.2s ease;
      transition: opacity 1s ease, transform 1.2s ease, -webkit-transform 1.2s ease; }
    .discoverPageBody .smallFrame .textFrame.show .imgSubTitle {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1s ease .4s, -webkit-transform 1.2s ease .4s;
      transition: opacity 1s ease .4s, -webkit-transform 1.2s ease .4s;
      -o-transition: opacity 1s ease .4s, transform 1.2s ease .4s;
      transition: opacity 1s ease .4s, transform 1.2s ease .4s;
      transition: opacity 1s ease .4s, transform 1.2s ease .4s, -webkit-transform 1.2s ease .4s; }
    .discoverPageBody .smallFrame .textFrame.show .imgText {
      opacity: 1;
      -webkit-transition: opacity 1s ease .8s;
      -o-transition: opacity 1s ease .8s;
      transition: opacity 1s ease .8s; }
    .discoverPageBody .smallFrame .textFrame.show .btnStyle {
      opacity: 1;
      -webkit-transition: opacity 1s ease 1.2s;
      -o-transition: opacity 1s ease 1.2s;
      transition: opacity 1s ease 1.2s; }
    .discoverPageBody .smallFrame .textFrame .imgTitle {
      opacity: 0;
      -webkit-transform: translateY(100px);
      -ms-transform: translateY(100px);
      transform: translateY(100px); }
    .discoverPageBody .smallFrame .textFrame .imgSubTitle {
      opacity: 0;
      -webkit-transform: translateY(100px);
      -ms-transform: translateY(100px);
      transform: translateY(100px); }
    .discoverPageBody .smallFrame .textFrame .imgText {
      opacity: 0; }
    .discoverPageBody .smallFrame .textFrame .btnStyle {
      opacity: 0; }
  .discoverPageBody .smallFrame .imgFrame {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end; }
    .discoverPageBody .smallFrame .imgFrame.show .imgBox img {
      -webkit-animation: fadeInDown 1.2s both;
      animation: fadeInDown 1.2s both; }
    .discoverPageBody .smallFrame .imgFrame .imgBox {
      max-width: 475px;
      display: inline-block;
      position: relative;
      overflow: hidden;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-transition: -webkit-box-shadow .2s linear;
      transition: -webkit-box-shadow .2s linear;
      -o-transition: box-shadow .2s linear;
      transition: box-shadow .2s linear;
      transition: box-shadow .2s linear, -webkit-box-shadow .2s linear; }
      .discoverPageBody .smallFrame .imgFrame .imgBox::after {
        content: '';
        background: rgba(0, 0, 0, 0.5);
        width: 100%;
        height: 0;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s; }
      .discoverPageBody .smallFrame .imgFrame .imgBox::before {
        content: 'read more';
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        font-size: 0.9875rem;
        opacity: 0;
        display: inline-block;
        color: #fff;
        z-index: 10; }
      .discoverPageBody .smallFrame .imgFrame .imgBox:hover {
        -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5); }
        .discoverPageBody .smallFrame .imgFrame .imgBox:hover::after {
          height: 100%; }
        .discoverPageBody .smallFrame .imgFrame .imgBox:hover::before {
          -webkit-transition: .5s .5s;
          -o-transition: .5s .5s;
          transition: .5s .5s;
          opacity: 1; }
    .discoverPageBody .smallFrame .imgFrame .img {
      opacity: 0;
      margin: 0 0 0 auto; }

.discoverPageBody .tripleFrame {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  max-width: 1545px;
  margin: 0 auto 60px auto; }
  .discoverPageBody .tripleFrame.left {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start; }
  .discoverPageBody .tripleFrame.right {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end; }
  .discoverPageBody .tripleFrame .tirpleBox {
    width: 33.33%;
    padding: 0 32.5px;
    margin: 0 0 40px 0; }
  .discoverPageBody .tripleFrame .imgBox {
    position: relative;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: -webkit-box-shadow .2s linear;
    transition: -webkit-box-shadow .2s linear;
    -o-transition: box-shadow .2s linear;
    transition: box-shadow .2s linear;
    transition: box-shadow .2s linear, -webkit-box-shadow .2s linear; }
    .discoverPageBody .tripleFrame .imgBox.show img {
      -webkit-animation: fadeInDown 1.2s both;
      animation: fadeInDown 1.2s both; }
    .discoverPageBody .tripleFrame .imgBox:hover {
      -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
      box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5); }
    .discoverPageBody .tripleFrame .imgBox .img {
      opacity: 0; }
  .discoverPageBody .tripleFrame .caption {
    padding: 9px 0 0 0; }
    .discoverPageBody .tripleFrame .caption.show .imgTitle {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1s ease, -webkit-transform 1.2s ease;
      transition: opacity 1s ease, -webkit-transform 1.2s ease;
      -o-transition: opacity 1s ease, transform 1.2s ease;
      transition: opacity 1s ease, transform 1.2s ease;
      transition: opacity 1s ease, transform 1.2s ease, -webkit-transform 1.2s ease; }
    .discoverPageBody .tripleFrame .caption.show .imgSubTitle {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1s ease .4s, -webkit-transform 1.2s ease .4s;
      transition: opacity 1s ease .4s, -webkit-transform 1.2s ease .4s;
      -o-transition: opacity 1s ease .4s, transform 1.2s ease .4s;
      transition: opacity 1s ease .4s, transform 1.2s ease .4s;
      transition: opacity 1s ease .4s, transform 1.2s ease .4s, -webkit-transform 1.2s ease .4s; }
    .discoverPageBody .tripleFrame .caption .imgTitle {
      opacity: 0;
      -webkit-transform: translateY(100px);
      -ms-transform: translateY(100px);
      transform: translateY(100px); }
    .discoverPageBody .tripleFrame .caption .imgSubTitle {
      opacity: 0;
      -webkit-transform: translateY(100px);
      -ms-transform: translateY(100px);
      transform: translateY(100px); }

@media (max-width: 1024px) {
  .discoverPageBody .smallFrame.return .textFrame {
    padding: 0 30px 0 10%; }
  .discoverPageBody .smallFrame .textFrame {
    padding: 0 30px 0 10%; }
  .discoverPageBody .smallFrame .imgText {
    -webkit-line-clamp: 4; }
  .discoverPageBody .tripleFrame .tirpleBox {
    width: 50%; } }

@media (max-width: 767px) {
  .discoverPageBody .clickScrollArea {
    width: 90%; }
  .discoverPageBody .fullFrame .imgText {
    width: 100%; }
  .discoverPageBody .smallFrame {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
    .discoverPageBody .smallFrame.return .textFrame {
      padding: 0 20px; }
    .discoverPageBody .smallFrame.return .imgFrame {
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
    .discoverPageBody .smallFrame:before {
      display: none; }
    .discoverPageBody .smallFrame .textBox {
      padding: 0; }
    .discoverPageBody .smallFrame .textFrame, .discoverPageBody .smallFrame .imgFrame {
      width: 100%; }
    .discoverPageBody .smallFrame .textFrame {
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      padding: 0 20px; }
    .discoverPageBody .smallFrame .imgFrame {
      -webkit-box-ordinal-group: 1;
      -ms-flex-order: 0;
      order: 0;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      margin: 0 0 20px 0; }
  .discoverPageBody .tripleFrame .tirpleBox {
    width: 100%;
    padding: 0 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; } }

#discover .ajaxVisitDetail .hamburgerBox {
  background-color: inherit; }

#discover .egg {
  overflow: hidden;
  margin: 0 0 40px 0;
  opacity: 0; }
  #discover .egg.show {
    opacity: 1;
    -webkit-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease; }
  #discover .egg .imgFrame {
    overflow: hidden; }
  #discover .egg .chrisLoaded.img {
    -webkit-animation: fadeInDown 1.2s both;
    animation: fadeInDown 1.2s both; }
  #discover .egg .b-loaded.img {
    -webkit-animation: fadeInDown 1.2s both;
    animation: fadeInDown 1.2s both; }

#discover .eggBall {
  font-size: 20px;
  font-size: 1.25rem;
  font-weight: 900;
  margin: 0 0 25px 0; }

#discover .eggTower {
  padding: 0 12%; }
  #discover .eggTower .video {
    width: 100%;
    height: 545px; }

#discover .eggTitleBox {
  font-family: 'FuturaPT-Heavy','微軟正黑體';
  font-weight: 900; }
  #discover .eggTitleBox .title {
    font-size: 28px;
    font-size: 1.75rem; }
  #discover .eggTitleBox .subTitle {
    font-size: 24px;
    font-size: 1.5rem; }

#discover .eggTextBox .text {
  font-size: 16px;
  font-size: 1rem;
  color: #222; }

#discover .eggTea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  #discover .eggTea.return .imgFrame {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1; }
  #discover .eggTea.return .textFrame {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
    padding: 0 6% 0 0; }
  #discover .eggTea .imgFrame {
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
  #discover .eggTea .textFrame {
    width: 50%;
    padding: 0 0 0 6%; }

#discover .eggMap .map {
  width: 100%;
  height: 425px; }

#discover .eggList {
  font-size: 15px;
  font-size: 0.9375rem;
  color: #666;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  #discover .eggList .list {
    background-color: #f2f2f2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: calc(50% - 2px);
    margin: 0 0 4px 0;
    padding: 10px 0; }
    #discover .eggList .list:nth-child(2n) {
      margin-left: 2px; }
    #discover .eggList .list:nth-child(2n+1) {
      margin-right: 2px; }
  #discover .eggList .name {
    min-width: 39%;
    padding-left: 6%;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
    #discover .eggList .name:after {
      content: '';
      display: block;
      background-color: #a9a9a9;
      width: 1px;
      height: 14px;
      margin-top: 5px; }
  #discover .eggList .ans {
    width: 62%;
    padding: 0 16px; }

#discover .eggBurger {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

@media (max-width: 1023px) {
  #discover .eggTower {
    padding: 0 40px; } }

@media (max-width: 767px) {
  #discover .eggTower {
    padding: 0 20px; }
    #discover .eggTower .video {
      height: 300px; }
  #discover .eggTea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
    #discover .eggTea.return .textFrame {
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1; }
    #discover .eggTea .imgFrame {
      -webkit-box-ordinal-group: 1;
      -ms-flex-order: 0;
      order: 0;
      width: 100%;
      margin: 0 0 20px 0; }
    #discover .eggTea .textFrame {
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      padding: 0;
      width: 100%; }
  #discover .eggList .list {
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  #discover .eggList .name {
    width: 100%;
    padding: 0 16px; }
    #discover .eggList .name:after {
      display: none; } }

.contactPageBody {
  width: 100%;
  max-width: 940px;
  padding: 0 20px;
  margin: 0 auto; }
  .contactPageBody.pageBodyB {
    padding: 100px 0 0 0; }
  .contactPageBody .mocaTitleSec {
    margin: 0 0 70px 0; }
    .contactPageBody .mocaTitleSec.show .title {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1.2s ease .2s, -webkit-transform 1.2s ease .2s;
      transition: opacity 1.2s ease .2s, -webkit-transform 1.2s ease .2s;
      -o-transition: opacity 1.2s ease .2s, transform 1.2s ease .2s;
      transition: opacity 1.2s ease .2s, transform 1.2s ease .2s;
      transition: opacity 1.2s ease .2s, transform 1.2s ease .2s, -webkit-transform 1.2s ease .2s; }
  .contactPageBody .btnStyle {
    max-width: 560px;
    margin: 0 auto;
    opacity: 0;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px); }
    .contactPageBody .btnStyle.show {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
      transition: opacity 1s ease, -webkit-transform 1s ease;
      -o-transition: opacity 1s ease, transform 1s ease;
      transition: opacity 1s ease, transform 1s ease;
      transition: opacity 1s ease, transform 1s ease, -webkit-transform 1s ease; }
  .contactPageBody .mixBox {
    font-size: 15px;
    font-size: 0.9375rem;
    max-width: 600px;
    padding: 0 20px;
    margin: 0 auto;
    text-align: center; }
    .contactPageBody .mixBox.show .info {
      opacity: 1;
      -webkit-transition: opacity 1s ease .3s;
      -o-transition: opacity 1s ease .3s;
      transition: opacity 1s ease .3s; }
    .contactPageBody .mixBox.show .mail {
      opacity: 1;
      -webkit-transition: opacity 1s ease .5s;
      -o-transition: opacity 1s ease .5s;
      transition: opacity 1s ease .5s; }
    .contactPageBody .mixBox.show .phoneBox {
      opacity: 1;
      -webkit-transition: opacity 1s ease .7s;
      -o-transition: opacity 1s ease .7s;
      transition: opacity 1s ease .7s; }
    .contactPageBody .mixBox.show .community {
      opacity: 1;
      -webkit-transition: opacity 1s ease .9s;
      -o-transition: opacity 1s ease .9s;
      transition: opacity 1s ease .9s; }
    .contactPageBody .mixBox .info {
      margin: 0 0 18px 0;
      opacity: 0; }
    .contactPageBody .mixBox .mail {
      margin: 0 0 14px 0;
      opacity: 0; }
    .contactPageBody .mixBox .phoneBox {
      margin: 0 0 26px 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      opacity: 0; }
      .contactPageBody .mixBox .phoneBox .text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center; }
        .contactPageBody .mixBox .phoneBox .text:last-child:after {
          display: none; }
        .contactPageBody .mixBox .phoneBox .text:after {
          content: '/';
          display: block;
          margin: 0 10px; }
  .contactPageBody .community {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    opacity: 0; }
    .contactPageBody .community .link {
      font-size: 14px;
      font-size: 0.875rem;
      color: #fff;
      padding: 0 10px; }
      .contactPageBody .community .link:hover .icon {
        background-color: #000; }
      .contactPageBody .community .link .text {
        display: none; }
      .contactPageBody .community .link .icon {
        background-color: #ccc;
        border-radius: 50%;
        width: 26px;
        height: 26px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-transition: background-color .5s ease;
        -o-transition: background-color .5s ease;
        transition: background-color .5s ease; }
  .contactPageBody .chrisSelect {
    width: 100%; }
    .contactPageBody .chrisSelect .dropShow {
      height: 60px; }
    .contactPageBody .chrisSelect .showBox {
      width: 100%; }
    .contactPageBody .chrisSelect .character {
      font-size: 14px;
      font-size: 0.875rem; }
  .contactPageBody .contactForm {
    border-top: solid 5px #000;
    border-bottom: solid 5px #000;
    margin: 0 0 60px 0;
    opacity: 0;
    -webkit-transform: translateY(150px);
    -ms-transform: translateY(150px);
    transform: translateY(150px); }
    .contactPageBody .contactForm.show {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1.3s ease .3s, -webkit-transform 1.3s ease .3s;
      transition: opacity 1.3s ease .3s, -webkit-transform 1.3s ease .3s;
      -o-transition: opacity 1.3s ease .3s, transform 1.3s ease .3s;
      transition: opacity 1.3s ease .3s, transform 1.3s ease .3s;
      transition: opacity 1.3s ease .3s, transform 1.3s ease .3s, -webkit-transform 1.3s ease .3s; }
    .contactPageBody .contactForm .list {
      border-bottom: solid 1px #000;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      .contactPageBody .contactForm .list:last-child {
        border-bottom: none; }
      .contactPageBody .contactForm .list label {
        font-size: 15px;
        font-size: 0.9375rem;
        font-family: 'FuturaPT-Heavy','微軟正黑體';
        font-weight: 900;
        white-space: nowrap;
        margin: 0 20px 0 0; }
        .contactPageBody .contactForm .list label span:first-child {
          margin: 0 5px 0 0; }
        .contactPageBody .contactForm .list label span:last-child {
          margin: 0; }
      .contactPageBody .contactForm .list input {
        font-size: 14px;
        font-size: 0.875rem;
        width: 100%;
        height: 60px;
        border: none; }
      .contactPageBody .contactForm .list textarea {
        width: 100%;
        height: 375px;
        border: none; }
    .contactPageBody .contactForm .content {
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      padding: 25px 0; }
  @media (max-width: 767px) {
    .contactPageBody .pageBodyB {
      padding: 60px 0 0 0; }
    .contactPageBody .contactForm .list {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start; }
      .contactPageBody .contactForm .list label {
        padding: 15px 0 0 0; }
      .contactPageBody .contactForm .list textarea {
        padding: 15px 0 0 0;
        height: 250px; }
    .contactPageBody .contactForm .content {
      padding: 0 0 15px 0; }
    .contactPageBody .contactForm .verifi {
      position: relative; }
      .contactPageBody .contactForm .verifi input {
        width: calc(100% - 80px); }
      .contactPageBody .contactForm .verifi .code {
        position: absolute;
        right: 0;
        bottom: 0; }
    .contactPageBody .mixBox .phoneBox {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
      .contactPageBody .mixBox .phoneBox .text {
        margin: 0 0 5px 0; }
        .contactPageBody .mixBox .phoneBox .text:last-child {
          margin: 0; }
        .contactPageBody .mixBox .phoneBox .text:after {
          display: none; } }

#shop footer {
  margin: 0; }

#shop .mocaSNav {
  margin: 0; }
  #shop .mocaSNav .secBox {
    padding: 15px 20px; }

#shop .shopTitleBox .title {
  font-size: 36px;
  font-size: 2.25rem;
  font-family: 'FuturaPT-Heavy','微軟正黑體'; }

#shop .shopTitleBox .subTitle {
  font-size: 28px;
  font-size: 1.75rem; }

#shop .shopHam .shopTitleBox .subTitle {
  font-size: 24px;
  font-size: 1.5rem; }

.shopBannerSlick {
  opacity: 0; }
  .shopBannerSlick.show {
    opacity: 1;
    -webkit-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease; }
  .shopBannerSlick .chris {
    visibility: hidden;
    height: 0; }
  .shopBannerSlick .list {
    height: 890px;
    background-position: center;
    background-repeat: no-repeat;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
  .shopBannerSlick .listText {
    width: 90%;
    max-width: 540px;
    height: 360px;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 2.5%; }
    .shopBannerSlick .listText .titleBox {
      margin: 0 0 40px 0; }
    .shopBannerSlick .listText .text {
      font-size: 16px;
      font-size: 1rem;
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      word-break: break-all;
      -webkit-box-orient: vertical; }
  .shopBannerSlick .slick-dots {
    width: auto;
    bottom: 35px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%); }
    .shopBannerSlick .slick-dots li {
      padding: 10px 20px;
      width: auto;
      height: auto;
      margin: 0; }
      .shopBannerSlick .slick-dots li.slick-active .dot {
        opacity: 1; }
    .shopBannerSlick .slick-dots .dot {
      background-color: #fff;
      border-radius: 50%;
      width: 6px;
      height: 6px;
      display: block;
      opacity: 0.5; }
    .shopBannerSlick .slick-dots .next {
      right: -35px; }
    .shopBannerSlick .slick-dots .prev {
      left: -35px; }
  .shopBannerSlick .slick-dots .prev, .shopBannerSlick .slick-dots .next {
    font-size: 35px;
    font-size: 2.1875rem;
    color: #fff;
    padding: 0;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); }
  @media (max-width: 767px) {
    .shopBannerSlick .listText {
      padding: 5%; } }
  @media (max-width: 414px) {
    .shopBannerSlick .list {
      height: calc(100vw * 1.7777); }
    .shopBannerSlick .slick-dots {
      width: 70%; } }

.shopBeer {
  padding: 140px 0 0 0; }
  @media (max-width: 600px) {
    .shopBeer {
      padding: 70px 0 0 0; } }
  .shopBeer .shopTitleBox {
    text-align: center;
    margin: 0 0 40px 0; }
    @media (max-width: 500px) {
      .shopBeer .shopTitleBox {
        margin: 0 0 20px; } }
    .shopBeer .shopTitleBox .title {
      opacity: 0;
      -webkit-transform: translateY(100px);
      -ms-transform: translateY(100px);
      transform: translateY(100px); }
      .shopBeer .shopTitleBox .title.show {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
        transition: opacity 1s ease, -webkit-transform 1s ease;
        -o-transition: opacity 1s ease, transform 1s ease;
        transition: opacity 1s ease, transform 1s ease;
        transition: opacity 1s ease, transform 1s ease, -webkit-transform 1s ease; }
    .shopBeer .shopTitleBox .subTitle {
      opacity: 0; }
      .shopBeer .shopTitleBox .subTitle.show {
        opacity: 1;
        -webkit-transition: opacity 1.5s ease .5s;
        -o-transition: opacity 1.5s ease .5s;
        transition: opacity 1.5s ease .5s; }

.slickFrameBox {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto 140px auto;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  opacity: 0; }
  @media (max-width: 500px) {
    .slickFrameBox {
      margin: 0 auto 70px; } }
  .slickFrameBox.show {
    opacity: 1;
    -webkit-transition: opacity 1s ease .2s;
    -o-transition: opacity 1s ease .2s;
    transition: opacity 1s ease .2s; }
  .slickFrameBox .slick-track {
    display: block;
    margin: 0 auto; }
  .slickFrameBox .leftRightBox {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease;
    z-index: 0; }
    .slickFrameBox .leftRightBox.showUp {
      opacity: 1;
      visibility: visible; }
    .slickFrameBox .leftRightBox .arrow {
      font-size: 40px;
      font-size: 2.5rem;
      cursor: pointer;
      color: #9c9c9c;
      -webkit-transition: color .5s ease;
      -o-transition: color .5s ease;
      transition: color .5s ease; }
      .slickFrameBox .leftRightBox .arrow:hover {
        color: #000; }
  .slickFrameBox .shopBeerSlick {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    z-index: 1; }
  .slickFrameBox .list {
    max-width: 280px;
    margin: 0 auto; }
  .slickFrameBox .imgFrame {
    padding: 0 15px; }
  .slickFrameBox .imgBox {
    width: 250px;
    height: 250px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
  .slickFrameBox .caption {
    font-size: 20px;
    font-size: 1.25rem;
    font-family: 'FuturaPT-Medium','微軟正黑體';
    width: 90%;
    max-width: 200px;
    margin: 0 auto; }
    .slickFrameBox .caption .itemName {
      margin: 0 0 16px 0;
      height: 60px;
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-all;
      -webkit-box-orient: vertical; }
    .slickFrameBox .caption .price {
      font-size: 17px;
      font-size: 1.0625rem;
      font-family: 'FuturaPT-Book', '微軟正黑體'; }
  @media (max-width: 1559px) {
    .slickFrameBox {
      max-width: 1200px; }
      .slickFrameBox .shopBeerSlick {
        max-width: 1120px; } }
  @media (max-width: 1365px) {
    .slickFrameBox {
      max-width: 920px; }
      .slickFrameBox .shopBeerSlick {
        max-width: 840px; } }
  @media (max-width: 1023px) {
    .slickFrameBox {
      max-width: 660px; }
      .slickFrameBox .shopBeerSlick {
        max-width: 560px; } }
  @media (max-width: 767px) {
    .slickFrameBox {
      max-width: 360px; }
      .slickFrameBox .leftRightBox {
        max-width: auto;
        width: calc(100% + 10px);
        z-index: 100; }
      .slickFrameBox .shopBeerSlick {
        max-width: 100%; }
        .slickFrameBox .shopBeerSlick .list {
          max-width: 100%; }
          .slickFrameBox .shopBeerSlick .list .imgBox {
            margin: 0 auto; } }
  @media (max-width: 500px) {
    .slickFrameBox .leftRightBox .arrow {
      font-size: 25px;
      font-size: 1.5625rem; } }
  @media (max-width: 413px) {
    .slickFrameBox {
      max-width: 300px; }
      .slickFrameBox .shopBeerSlick {
        max-width: 220px; }
      .slickFrameBox .imgFrame {
        padding: 0; }
      .slickFrameBox .imgBox {
        max-width: 220px;
        max-height: 220px; } }
  @media (max-width: 320px) {
    .slickFrameBox .leftRightBox {
      width: 100%; } }

.shopSerial {
  width: 100%;
  max-width: 1488px;
  margin: 0 auto 140px auto; }
  @media (max-width: 500px) {
    .shopSerial {
      margin: 0 auto 70px; } }
  .shopSerial .list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  .shopSerial .legBox {
    margin: 2px;
    position: relative;
    overflow: hidden; }
    .shopSerial .legBox.imgL .imgBox {
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start; }
    .shopSerial .legBox.imgR .imgBox {
      -webkit-box-pack: end;
      -ms-flex-pack: end;
      justify-content: flex-end; }
    .shopSerial .legBox.centerL .textArea {
      text-align: left;
      left: 10%;
      top: 50%;
      -webkit-transform: translate(0%, -50%);
      -ms-transform: translate(0%, -50%);
      transform: translate(0%, -50%); }
    .shopSerial .legBox.centerR .textArea {
      text-align: right;
      left: auto;
      right: 10%;
      top: 50%;
      -webkit-transform: translate(0%, -50%);
      -ms-transform: translate(0%, -50%);
      transform: translate(0%, -50%); }
    .shopSerial .legBox.centerU .textArea {
      text-align: center;
      left: 50%;
      top: 10%;
      -webkit-transform: translate(-50%, 0%);
      -ms-transform: translate(-50%, 0%);
      transform: translate(-50%, 0%); }
    .shopSerial .legBox.centerD .textArea {
      text-align: center;
      left: 50%;
      bottom: 10%;
      top: auto;
      -webkit-transform: translate(-50%, 0%);
      -ms-transform: translate(-50%, 0%);
      transform: translate(-50%, 0%); }
    .shopSerial .legBox.show .imgFrame {
      opacity: 1;
      -webkit-transition: opacity 1s ease .5s;
      -o-transition: opacity 1s ease .5s;
      transition: opacity 1s ease .5s; }
    .shopSerial .legBox.show .textArea {
      opacity: 1;
      -webkit-transition: opacity 1s ease .8s;
      -o-transition: opacity 1s ease .8s;
      transition: opacity 1s ease .8s; }
    .shopSerial .legBox.a.show:before {
      -webkit-animation: yoyoball 1000ms;
      animation: yoyoball 1000ms; }
    .shopSerial .legBox.a:before {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%); }
    .shopSerial .legBox.b.show:before {
      -webkit-animation: momoball 1000ms;
      animation: momoball 1000ms; }
    .shopSerial .legBox.b:before {
      -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%); }
    .shopSerial .legBox.c.show:before {
      -webkit-animation: gogoball 1000ms;
      animation: gogoball 1000ms; }
    .shopSerial .legBox.c:before {
      -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      transform: translateY(-100%); }
    .shopSerial .legBox.d.show:before {
      -webkit-animation: nonoball 1000ms;
      animation: nonoball 1000ms; }
    .shopSerial .legBox.d:before {
      -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
      transform: translateY(100%); }
    .shopSerial .legBox .imgFrame {
      background-repeat: no-repeat;
      background-size: cover;
      width: 100%;
      height: 100%;
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      opacity: 0; }
    .shopSerial .legBox .imgBox {
      width: 100%;
      height: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
    .shopSerial .legBox .img {
      max-height: 100%; }
    .shopSerial .legBox .textArea {
      font-family: 'FuturaPT-Heavy','微軟正黑體';
      position: absolute;
      text-align: center;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      opacity: 0; }
      .shopSerial .legBox .textArea .title {
        font-size: 28px;
        font-size: 1.75rem;
        font-weight: 900; }
      .shopSerial .legBox .textArea .subTitle {
        font-size: 22px;
        font-size: 1.375rem; }
  .shopSerial .boxL .imgFrame {
    width: 49.2920vw;
    height: calc(49.2920vw * 0.553191);
    max-width: 940px;
    max-height: 520px;
    padding: 40px; }
  .shopSerial .boxM .imgFrame {
    width: 38.8859vw;
    height: calc(38.8859vw * 0.729729);
    max-width: 740px;
    max-height: 520px;
    padding: 40px; }
  .shopSerial .boxS .imgFrame {
    width: 28.3167vw;
    height: calc(28.3167vw * 0.962962);
    max-width: 540px;
    max-height: 520px;
    padding: 40px; }
  @media (max-width: 767px) {
    .shopSerial .list {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
    .shopSerial .boxL .imgFrame {
      width: 90vw;
      height: calc(90vw * 0.553191);
      margin: 0 auto 20px; }
    .shopSerial .boxM .imgFrame {
      width: 90vw;
      height: calc(90vw * 0.729729);
      margin-bottom: 20px; }
    .shopSerial .boxS .imgFrame {
      width: 90vw;
      height: calc(90vw * 0.962962);
      margin-bottom: 20px; } }
  @media (max-width: 500px) {
    .shopSerial .legBox {
      margin: 0 0 40px 0; }
      .shopSerial .legBox.centerL .textArea {
        text-align: center;
        left: 0;
        top: 0;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0); }
      .shopSerial .legBox.centerR .textArea {
        text-align: center;
        left: 0;
        right: auto;
        top: 0%;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0); }
      .shopSerial .legBox.centerU .textArea {
        text-align: center;
        left: 0;
        top: 0;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0); }
      .shopSerial .legBox.centerD .textArea {
        text-align: center;
        left: 0;
        bottom: auto;
        top: 0;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0); }
      .shopSerial .legBox .textArea {
        color: #444 !important;
        position: relative;
        right: auto;
        bottom: auto;
        left: 0;
        top: 0;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0); } }

.shopHam {
  width: 100%;
  height: 620px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  @media (max-width: 500px) {
    .shopHam {
      height: 450px; } }
  .shopHam .bg {
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    opacity: 0; }
    .shopHam .bg.show {
      opacity: 1;
      -webkit-transition: opacity 1s ease;
      -o-transition: opacity 1s ease;
      transition: opacity 1s ease; }
  .shopHam .hamBox {
    background-color: #fff;
    width: 90%;
    max-width: 465px;
    max-height: 620px;
    padding: 80px 60px 60px 60px;
    opacity: 0;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px); }
    .shopHam .hamBox.show {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1.2s ease .5s, -webkit-transform 1s ease .5s;
      transition: opacity 1.2s ease .5s, -webkit-transform 1s ease .5s;
      -o-transition: opacity 1.2s ease .5s, transform 1s ease .5s;
      transition: opacity 1.2s ease .5s, transform 1s ease .5s;
      transition: opacity 1.2s ease .5s, transform 1s ease .5s, -webkit-transform 1s ease .5s; }
  .shopHam .shopTitleBox {
    text-align: center;
    margin: 0 0 45px 0; }
    .shopHam .shopTitleBox .text {
      font-size: 16px;
      font-size: 1rem;
      padding-bottom: 3px;
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      word-break: break-all;
      -webkit-box-orient: vertical; }
    .shopHam .shopTitleBox .line {
      width: 100%;
      padding: 32px 0;
      position: relative;
      display: block; }
      .shopHam .shopTitleBox .line:before {
        content: '';
        display: block;
        background-color: #999;
        width: 60px;
        height: 1px;
        margin: 0 auto; }
  .shopHam .btnStyle {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
    .shopHam .btnStyle .btn {
      width: 100%;
      max-width: 256px;
      height: 40px;
      margin: 0 0 5px 0; }
      .shopHam .btnStyle .btn:last-child {
        margin: 0; }
  @media (max-width: 767px) {
    .shopHam .hamBox {
      padding: 40px 30px 30px 30px; } }

.shopListFrame {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .shopListFrame .noticeBox {
    font-size: 12px;
    font-size: 0.75rem;
    color: #fff;
    background-color: #e83434;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    left: 0;
    top: -20px;
    opacity: 0;
    visibility: hidden; }
    .shopListFrame .noticeBox .text {
      -webkit-transform: rotate(-30deg);
      -ms-transform: rotate(-30deg);
      transform: rotate(-30deg); }
  .shopListFrame .list {
    font-size: 16px;
    font-size: 1rem;
    width: 20%;
    padding: 0 40px;
    margin: 0 0 80px 0;
    letter-spacing: 0.5px;
    opacity: 0;
    visibility: hidden; }
    .shopListFrame .list.show {
      opacity: 1;
      visibility: visible;
      -webkit-transition: opacity 1s ease;
      -o-transition: opacity 1s ease;
      transition: opacity 1s ease; }
    .shopListFrame .list:hover .price {
      color: #df2a2a; }
    .shopListFrame .list.new .noticeBox {
      opacity: 1;
      visibility: visible; }
      .shopListFrame .list.new .noticeBox .newTxt {
        opacity: 1; }
    .shopListFrame .list .link {
      height: 100%; }
    .shopListFrame .list .title {
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-all;
      -webkit-box-orient: vertical;
      max-height: 50px; }
    .shopListFrame .list .subTitle {
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-all;
      -webkit-box-orient: vertical;
      max-height: 40px; }
    .shopListFrame .list .price {
      font-size: 14px;
      font-size: 0.875rem;
      font-family: 'FuturaPT-Heavy','微軟正黑體';
      padding: 10px 0 0 0;
      -webkit-transition: color .5s ease;
      -o-transition: color .5s ease;
      transition: color .5s ease; }
  .shopListFrame .textFrame {
    height: calc(100% - 185px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
  .shopListFrame .imgFrame {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    height: 165px;
    margin: 0 0 20px 0; }
  .shopListFrame .img {
    max-height: 165px; }

@media (max-width: 1460px) {
  .shopList .shopListFrame {
    max-width: 1120px; }
    .shopList .shopListFrame .list {
      width: 25%; } }

@media (max-width: 1180px) {
  .shopList .shopListFrame {
    max-width: 840px; }
    .shopList .shopListFrame .list {
      width: 33.33%; } }

@media (max-width: 880px) {
  .shopList .shopListFrame {
    max-width: 560px; }
    .shopList .shopListFrame .list {
      width: 50%; } }

@media (max-width: 620px) {
  .shopList .shopListFrame {
    max-width: 280px; }
    .shopList .shopListFrame .list {
      width: 100%; } }

.shopList .shopBannerSlick .list {
  height: 650px; }

.shopList .mocaTitleSec {
  padding: 140px 0 0 0;
  margin: 0 0 65px 0; }
  .shopList .mocaTitleSec .title {
    margin: 0; }
    .shopList .mocaTitleSec .title.show {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
      transition: opacity 1s ease, -webkit-transform 1s ease;
      -o-transition: opacity 1s ease, transform 1s ease;
      transition: opacity 1s ease, transform 1s ease;
      transition: opacity 1s ease, transform 1s ease, -webkit-transform 1s ease; }

.shopList .clickScrollArea {
  margin: 0 auto 80px auto; }
  .shopList .clickScrollArea .box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .shopList .clickScrollArea .link {
    padding: 16px 15px;
    margin: 0;
    white-space: nowrap; }
    .shopList .clickScrollArea .link:after {
      -webkit-transition: width .4s ease;
      -o-transition: width .4s ease;
      transition: width .4s ease; }
    .shopList .clickScrollArea .link.now {
      color: #000; }
      .shopList .clickScrollArea .link.now .text:after {
        width: calc(100% - 30px); }

@media (max-width: 767px) {
  .shopList .mocaSNav .navBar {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start; } }

.shopDetail .mocaTitleSec {
  margin: 0 0 65px 0; }
  @media (max-width: 500px) {
    .shopDetail .mocaTitleSec {
      margin: 0 0 15px; } }
  .shopDetail .mocaTitleSec.show .title {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
    transition: opacity 1s ease, -webkit-transform 1s ease;
    -o-transition: opacity 1s ease, transform 1s ease;
    transition: opacity 1s ease, transform 1s ease;
    transition: opacity 1s ease, transform 1s ease, -webkit-transform 1s ease; }
  .shopDetail .mocaTitleSec .title {
    margin: 0; }

.shopDetail .mocaSNav .navBar .link:after {
  content: '/';
  color: #aaa;
  background-color: unset;
  height: auto; }

@media (max-width: 767px) {
  .shopDetail .mocaSNav .navBar {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start; } }

.shopDetailBoard {
  width: 90%;
  max-width: 1520px;
  padding: 80px 0 130px 0;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  @media (max-width: 600px) {
    .shopDetailBoard {
      padding: 80px 0; } }
  .shopDetailBoard .leftBox {
    width: 50%;
    position: relative;
    opacity: 0; }
    .shopDetailBoard .leftBox.show {
      opacity: 1;
      -webkit-transition: opacity 1s ease;
      -o-transition: opacity 1s ease;
      transition: opacity 1s ease; }
    .shopDetailBoard .leftBox .leftRightBox {
      font-size: 29px;
      font-size: 1.8125rem;
      width: calc(100% + 80px);
      max-width: 680px;
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      z-index: 0; }
      .shopDetailBoard .leftBox .leftRightBox.hide {
        display: none; }
      .shopDetailBoard .leftBox .leftRightBox .arrow {
        cursor: pointer; }
  .shopDetailBoard .boardSlickFrame {
    width: 90%;
    max-width: 600px;
    max-height: 580px;
    margin: 0 auto;
    z-index: 1; }
    @media (max-width: 700px) {
      .shopDetailBoard .boardSlickFrame {
        max-width: 100%; } }
    .shopDetailBoard .boardSlickFrame .img {
      max-width: 600px;
      max-height: 580px;
      margin: 0 auto; }
      @media (max-width: 700px) {
        .shopDetailBoard .boardSlickFrame .img {
          max-width: 100%; } }
    .shopDetailBoard .boardSlickFrame .slick-dots {
      width: 100%;
      bottom: 30px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%); }
      .shopDetailBoard .boardSlickFrame .slick-dots.hide {
        display: none; }
      .shopDetailBoard .boardSlickFrame .slick-dots li {
        padding: 10px 20px;
        width: auto;
        height: auto;
        margin: 0; }
        .shopDetailBoard .boardSlickFrame .slick-dots li.slick-active .dot {
          background-color: #7d7d7d; }
      .shopDetailBoard .boardSlickFrame .slick-dots .dot {
        background-color: #d2d2d2;
        border-radius: 50%;
        width: 8px;
        height: 8px;
        display: block;
        opacity: 1; }
      .shopDetailBoard .boardSlickFrame .slick-dots .next {
        right: -35px; }
      .shopDetailBoard .boardSlickFrame .slick-dots .prev {
        left: -35px; }
  .shopDetailBoard .rightBox {
    width: 50%;
    padding: 0 7%; }
    .shopDetailBoard .rightBox.show .shareBox {
      opacity: 1;
      -webkit-transition: opacity 1s ease .6s;
      -o-transition: opacity 1s ease .6s;
      transition: opacity 1s ease .6s; }
    .shopDetailBoard .rightBox.show .btnStyle {
      opacity: 1;
      -webkit-transition: opacity 1s ease .4s;
      -o-transition: opacity 1s ease .4s;
      transition: opacity 1s ease .4s; }
    .shopDetailBoard .rightBox.show .priceInfoBox {
      opacity: 1;
      -webkit-transition: opacity 1s ease .2s;
      -o-transition: opacity 1s ease .2s;
      transition: opacity 1s ease .2s; }
    .shopDetailBoard .rightBox.show .textInfoBox {
      opacity: 1;
      -webkit-transition: opacity 1s ease;
      -o-transition: opacity 1s ease;
      transition: opacity 1s ease; }
    .shopDetailBoard .rightBox .shareBox {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      opacity: 0; }
      .shopDetailBoard .rightBox .shareBox .text {
        font-size: 15px;
        font-size: 0.9375rem;
        font-family: 'FuturaPT-Heavy','微軟正黑體';
        font-weight: 900; }
      .shopDetailBoard .rightBox .shareBox .shareBtn {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center; }
      .shopDetailBoard .rightBox .shareBox .link {
        padding: 7px;
        -webkit-transition: color .5s ease, -webkit-transform .5s ease;
        transition: color .5s ease, -webkit-transform .5s ease;
        -o-transition: transform .5s ease, color .5s ease;
        transition: transform .5s ease, color .5s ease;
        transition: transform .5s ease, color .5s ease, -webkit-transform .5s ease; }
        .shopDetailBoard .rightBox .shareBox .link:hover {
          color: #e83434;
          -webkit-transform: scale(1.2);
          -ms-transform: scale(1.2);
          transform: scale(1.2); }
      .shopDetailBoard .rightBox .shareBox .txt {
        display: none; }
    .shopDetailBoard .rightBox .btnStyle {
      margin: 0 0 45px 0;
      opacity: 0; }
      .shopDetailBoard .rightBox .btnStyle .icon {
        font-size: 20px;
        font-size: 1.25rem;
        padding-top: 2px;
        margin-right: 12px; }
      .shopDetailBoard .rightBox .btnStyle .btn {
        width: 50%;
        height: 48px; }
    .shopDetailBoard .rightBox .priceInfoBox {
      font-size: 15px;
      font-size: 0.9375rem;
      font-family: 'FuturaPT-Heavy','微軟正黑體';
      margin: 0 0 45px 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      opacity: 0; }
      .shopDetailBoard .rightBox .priceInfoBox.hasOffer .standard {
        color: #b8b8b8; }
        .shopDetailBoard .rightBox .priceInfoBox.hasOffer .standard:before {
          content: '';
          display: block;
          background-color: #b2b2b2;
          width: 100%;
          height: 1px;
          position: absolute;
          left: 0;
          top: calc(50% -2px); }
      .shopDetailBoard .rightBox .priceInfoBox.hasOffer .offer {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; }
      .shopDetailBoard .rightBox .priceInfoBox .price {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; }
      .shopDetailBoard .rightBox .priceInfoBox .text {
        padding-right: 6px; }
      .shopDetailBoard .rightBox .priceInfoBox .standard {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-item-align: end;
        align-self: flex-end;
        padding-bottom: 4px;
        margin: 0 24px 0 0;
        height: 26px; }
      .shopDetailBoard .rightBox .priceInfoBox .offer {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: baseline;
        -ms-flex-align: baseline;
        align-items: baseline;
        display: none; }
        .shopDetailBoard .rightBox .priceInfoBox .offer .price {
          font-size: 26px;
          font-size: 1.625rem; }
    .shopDetailBoard .rightBox .textInfoBox {
      margin: 0 0 45px 0;
      opacity: 0; }
      .shopDetailBoard .rightBox .textInfoBox .title {
        font-size: 28px;
        font-size: 1.75rem;
        font-weight: 900;
        margin: 0 0 25px 0; }
      .shopDetailBoard .rightBox .textInfoBox .subTitle {
        font-size: 16px;
        font-size: 1rem; }
  @media (max-width: 1200px) {
    .shopDetailBoard .leftBox .leftRightBox {
      width: calc(100% + 40px); }
    .shopDetailBoard .rightBox {
      padding: 0 0 0 7%; } }
  @media (max-width: 1023px) {
    .shopDetailBoard {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
      .shopDetailBoard .leftBox {
        width: 75%;
        margin: 0 0 45px 0; }
        .shopDetailBoard .leftBox .leftRightBox {
          width: calc(100% + 80px); }
      .shopDetailBoard .boardSlickFrame {
        width: 100%; }
      .shopDetailBoard .rightBox {
        width: 75%;
        padding: 0; } }
  @media (max-width: 767px) {
    .shopDetailBoard .leftBox {
      width: 100%; }
      .shopDetailBoard .leftBox .leftRightBox {
        width: 100%; }
    .shopDetailBoard .boardSlickFrame {
      width: 85%; }
      .shopDetailBoard .boardSlickFrame .slick-dots {
        bottom: -35px; }
    .shopDetailBoard .rightBox {
      width: 100%; } }
  @media (max-width: 413px) {
    .shopDetailBoard .leftBox .leftRightBox {
      width: calc(100% + 10px); } }

.shopDetailPresent {
  height: auto;
  min-height: 780px;
  padding: 80px 0 0 0;
  position: relative; }
  @media (max-width: 500px) {
    .shopDetailPresent {
      padding: 80px 0; } }
  .shopDetailPresent .mocaTitleSec {
    margin: 0 0 75px 0;
    opacity: 0;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px); }
    @media (max-width: 500px) {
      .shopDetailPresent .mocaTitleSec {
        margin: 0 0 40px; } }
    .shopDetailPresent .mocaTitleSec.show {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
      transition: opacity 1s ease, -webkit-transform 1s ease;
      -o-transition: opacity 1s ease, transform 1s ease;
      transition: opacity 1s ease, transform 1s ease;
      transition: opacity 1s ease, transform 1s ease, -webkit-transform 1s ease; }
  .shopDetailPresent .pandoraBox {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    opacity: 0; }
    .shopDetailPresent .pandoraBox.show {
      opacity: 1;
      -webkit-transition: opacity 1.5s ease;
      -o-transition: opacity 1.5s ease;
      transition: opacity 1.5s ease; }
    .shopDetailPresent .pandoraBox .list {
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      width: 100vw;
      height: 780px; }
  .shopDetailPresent .walletBox {
    max-width: 1120px;
    margin: 0 auto; }
    .shopDetailPresent .walletBox.show .walletSlick .imgFrame {
      opacity: 1;
      -webkit-transition: opacity 1s ease;
      -o-transition: opacity 1s ease;
      transition: opacity 1s ease; }
    .shopDetailPresent .walletBox.show .walletSlick .textInfoBox .title {
      opacity: 1;
      -webkit-transition: opacity 1s ease;
      -o-transition: opacity 1s ease;
      transition: opacity 1s ease; }
    .shopDetailPresent .walletBox.show .walletSlick .textInfoBox .text {
      opacity: 1;
      -webkit-transition: opacity 1s ease .2s;
      -o-transition: opacity 1s ease .2s;
      transition: opacity 1s ease .2s; }
    .shopDetailPresent .walletBox.show .walletSlick .textInfoBox .link {
      opacity: 1;
      -webkit-transition: opacity 1s ease .4s;
      -o-transition: opacity 1s ease .4s;
      transition: opacity 1s ease .4s; }
    .shopDetailPresent .walletBox.show .walletSlick .textInfoBox .leftRightBox {
      opacity: 1;
      -webkit-transition: opacity 1s ease .6s;
      -o-transition: opacity 1s ease .6s;
      transition: opacity 1s ease .6s; }
    .shopDetailPresent .walletBox .walletSlick .imgFrame {
      opacity: 0; }
    .shopDetailPresent .walletBox .walletSlick .textInfoBox .title {
      opacity: 0; }
    .shopDetailPresent .walletBox .walletSlick .textInfoBox .text {
      opacity: 0; }
    .shopDetailPresent .walletBox .walletSlick .textInfoBox .link {
      opacity: 0; }
    .shopDetailPresent .walletBox .walletSlick .textInfoBox .leftRightBox {
      opacity: 0; }
  .shopDetailPresent .walletSlick.noArrow .leftRightBox {
    opacity: 0;
    visibility: hidden; }
  .shopDetailPresent .walletSlick .list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .shopDetailPresent .walletSlick .imgFrame {
    width: 50%;
    padding-right: 7%;
    position: relative; }
    .shopDetailPresent .walletSlick .imgFrame .img {
      max-width: 475px;
      max-height: 510px; }
      @media (max-width: 500px) {
        .shopDetailPresent .walletSlick .imgFrame .img {
          max-width: 100%;
          max-height: none; } }
  .shopDetailPresent .walletSlick .imgArrowBtn {
    display: none;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%; }
    .shopDetailPresent .walletSlick .imgArrowBtn .arrow {
      cursor: pointer;
      color: #7b6c6e;
      border-radius: 50%;
      border: solid 2px #7b6c6e;
      width: 30px;
      height: 30px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
  .shopDetailPresent .walletSlick .textInfoBox {
    width: 50%; }
    .shopDetailPresent .walletSlick .textInfoBox .text {
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
      word-break: break-all;
      -webkit-box-orient: vertical; }
    .shopDetailPresent .walletSlick .textInfoBox .btnStyle {
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      margin: 0 0 40px 0; }
      @media (max-width: 500px) {
        .shopDetailPresent .walletSlick .textInfoBox .btnStyle {
          margin: 0; } }
      .shopDetailPresent .walletSlick .textInfoBox .btnStyle .text {
        font-size: 15px;
        font-size: 0.9375rem;
        margin: 0; }
      .shopDetailPresent .walletSlick .textInfoBox .btnStyle .styleB {
        background-color: rgba(0, 0, 0, 0);
        width: 190px;
        max-width: 185px; }
        .shopDetailPresent .walletSlick .textInfoBox .btnStyle .styleB:hover {
          background-color: #000; }
    .shopDetailPresent .walletSlick .textInfoBox .title {
      font-size: 20px;
      font-size: 1.25rem;
      font-family: 'FuturaPT-Heavy','微軟正黑體';
      font-weight: 900;
      margin: 0 0 12px 0; }
    .shopDetailPresent .walletSlick .textInfoBox .text {
      font-size: 16px;
      font-size: 1rem;
      margin: 0 0 38px 0; }
  .shopDetailPresent .leftRightBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: -8px; }
    .shopDetailPresent .leftRightBox .arrow {
      cursor: pointer;
      color: #7b6c6e;
      border-radius: 50%;
      border: solid 2px #7b6c6e;
      width: 30px;
      height: 30px;
      margin: 0 8px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-transition: background-color .5s ease, border-color .5s ease;
      -o-transition: background-color .5s ease, border-color .5s ease;
      transition: background-color .5s ease, border-color .5s ease; }
      .shopDetailPresent .leftRightBox .arrow:hover {
        background-color: #fff;
        border-color: #fff; }
  @media (max-width: 1200px) {
    .shopDetailPresent .walletBox {
      width: 90%; } }
  @media (max-width: 767px) {
    .shopDetailPresent .walletSlick .list {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
    .shopDetailPresent .walletSlick .imgFrame {
      width: 100%;
      padding: 0;
      margin: 0 0 30px 0; }
    .shopDetailPresent .walletSlick .imgArrowBtn {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
    .shopDetailPresent .walletSlick .img {
      margin: 0 auto; }
    .shopDetailPresent .walletSlick .textInfoBox {
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
      .shopDetailPresent .walletSlick .textInfoBox .text {
        -webkit-line-clamp: 8; }
      .shopDetailPresent .walletSlick .textInfoBox .title {
        width: 100%; }
      .shopDetailPresent .walletSlick .textInfoBox .text {
        width: 100%; }
      .shopDetailPresent .walletSlick .textInfoBox .btnStyle {
        text-align: center; }
    .shopDetailPresent .pandoraBox {
      height: 100%; }
      .shopDetailPresent .pandoraBox .list {
        height: 100%; }
    .shopDetailPresent .leftRightBox {
      display: none; } }

.shopDetailProduct {
  max-width: 1120px;
  margin: 0 auto;
  padding: 110px 0 150px 0; }
  @media (max-width: 500px) {
    .shopDetailProduct {
      padding: 80px 0; } }
  .shopDetailProduct .mic:last-child {
    margin: 0; }
  .shopDetailProduct .textInfoBox {
    text-align: center;
    margin: 0 0 80px 0; }
    .shopDetailProduct .textInfoBox.show .title {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
      transition: opacity 1s ease, -webkit-transform 1s ease;
      -o-transition: opacity 1s ease, transform 1s ease;
      transition: opacity 1s ease, transform 1s ease;
      transition: opacity 1s ease, transform 1s ease, -webkit-transform 1s ease; }
    .shopDetailProduct .textInfoBox.show .text {
      opacity: 1;
      -webkit-transition: opacity 1s ease .5s;
      -o-transition: opacity 1s ease .5s;
      transition: opacity 1s ease .5s; }
    .shopDetailProduct .textInfoBox .title {
      font-size: 20px;
      font-size: 1.25rem;
      font-weight: 900;
      margin: 0 0 15px 0;
      opacity: 0;
      -webkit-transform: translateY(100px);
      -ms-transform: translateY(100px);
      transform: translateY(100px); }
    .shopDetailProduct .textInfoBox .text {
      font-size: 16px;
      font-size: 1rem;
      opacity: 0; }
  .shopDetailProduct .imgInfoBox {
    margin: 0 0 80px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
    .shopDetailProduct .imgInfoBox.show .img {
      -webkit-animation: fadeInDown 1.2s both;
      animation: fadeInDown 1.2s both; }
    .shopDetailProduct .imgInfoBox .imgFrame {
      width: 50%;
      overflow: hidden; }
      .shopDetailProduct .imgInfoBox .imgFrame:first-child {
        padding-right: 15px; }
      .shopDetailProduct .imgInfoBox .imgFrame:last-child {
        padding-left: 15px; }
    .shopDetailProduct .imgInfoBox .img {
      max-width: 545px;
      max-height: 345px;
      opacity: 0; }
      @media (max-width: 600px) {
        .shopDetailProduct .imgInfoBox .img {
          max-width: 100%;
          max-height: none; } }
    .shopDetailProduct .imgInfoBox .info {
      font-size: 16px;
      font-size: 1rem;
      text-align: center;
      padding: 16px 0 0 0; }
  @media (max-width: 1200px) {
    .shopDetailProduct {
      width: 90%; } }
  @media (max-width: 767px) {
    .shopDetailProduct .imgInfoBox {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      .shopDetailProduct .imgInfoBox .imgFrame {
        width: 100%;
        margin: 0 0 30px 0; }
        .shopDetailProduct .imgInfoBox .imgFrame:first-child {
          padding-right: 0px; }
        .shopDetailProduct .imgInfoBox .imgFrame:last-child {
          padding-left: 0px;
          margin: 0; }
        .shopDetailProduct .imgInfoBox .imgFrame .img {
          margin: 0 auto; } }

.shopDetailSpecifi {
  background-color: #f5f5f5;
  width: 95%;
  max-width: 1780px;
  margin: 0 auto;
  padding: 90px 0 105px 0; }
  .shopDetailSpecifi .mocaTitleSec {
    margin: 0 0 45px 0; }
  .shopDetailSpecifi .tableFrame {
    border-top: solid 4px #b3b3b3;
    border-bottom: solid 4px #b3b3b3;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto; }
  .shopDetailSpecifi .tableList {
    border-bottom: solid 2px #b1b1b1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: 25px 0 15px 0;
    opacity: 0; }
    .shopDetailSpecifi .tableList.show {
      opacity: 1;
      -webkit-transition: opacity 1s ease;
      -o-transition: opacity 1s ease;
      transition: opacity 1s ease; }
    .shopDetailSpecifi .tableList:last-child {
      border-bottom: none; }
  .shopDetailSpecifi .left {
    width: 34%;
    max-width: 380px; }
    .shopDetailSpecifi .left .title {
      font-size: 20px;
      font-size: 1.25rem;
      font-weight: 900;
      padding: 16px 0; }
  .shopDetailSpecifi .right {
    width: 66%;
    max-width: 740px; }
  .shopDetailSpecifi .rightList {
    border-bottom: solid 1px #b1b1b1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: 16px 0; }
    .shopDetailSpecifi .rightList:last-child {
      border-bottom: none; }
    .shopDetailSpecifi .rightList .nameBox {
      font-size: 16px;
      font-size: 1rem;
      font-weight: 900;
      width: 33.8%; }
    .shopDetailSpecifi .rightList .textBox {
      font-size: 15px;
      font-size: 0.9375rem;
      width: 66.2%; }
  @media (max-width: 1300px) {
    .shopDetailSpecifi .tableFrame {
      width: 90%; } }
  @media (max-width: 767px) {
    .shopDetailSpecifi {
      width: 100%; }
      .shopDetailSpecifi .tableFrame {
        width: 88%; }
      .shopDetailSpecifi .tableList {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
        .shopDetailSpecifi .tableList .left {
          width: 100%;
          max-width: none;
          text-align: center; }
        .shopDetailSpecifi .tableList .right {
          width: 100%;
          max-width: none; }
        .shopDetailSpecifi .tableList .rightList .textBox {
          text-align: right; } }

.shopDetailLike {
  padding: 145px 0 150px 0; }
  .shopDetailLike .slick-track {
    -webkit-box-align: unset;
    -ms-flex-align: unset;
    align-items: unset; }
  .shopDetailLike .slick-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: auto;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
  .shopDetailLike .leftRightBox {
    font-size: 40px;
    font-size: 2.5rem;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    z-index: 0; }
    .shopDetailLike .leftRightBox .arrow {
      cursor: pointer;
      color: #9c9c9c;
      -webkit-transition: color .5s ease;
      -o-transition: color .5s ease;
      transition: color .5s ease; }
      .shopDetailLike .leftRightBox .arrow:hover {
        color: #000; }
  .shopDetailLike .momLa {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    opacity: 0; }
    .shopDetailLike .momLa.show {
      opacity: 1;
      -webkit-transition: opacity 1s ease .3s;
      -o-transition: opacity 1s ease .3s;
      transition: opacity 1s ease .3s; }
    .shopDetailLike .momLa .shopListFrame {
      max-width: 1040px;
      margin: 0 auto;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      z-index: 1; }
      .shopDetailLike .momLa .shopListFrame .list {
        margin: 0;
        padding: 20px 30px 0 30px;
        opacity: 1;
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
        visibility: visible; }
    .shopDetailLike .momLa .imgBox {
      width: 200px;
      height: 165px;
      margin: 0 0 20px 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
    .shopDetailLike .momLa .textFrame {
      font-size: 16px;
      font-size: 1rem;
      width: 100%;
      height: calc(100% - 185px);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; }
      .shopDetailLike .momLa .textFrame .textBox {
        margin: 0 0 12px 0; }
      .shopDetailLike .momLa .textFrame .title {
        margin: 0;
        letter-spacing: 0;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-break: break-all;
        -webkit-box-orient: vertical;
        max-height: 25px; }
      .shopDetailLike .momLa .textFrame .subTitle {
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-break: break-all;
        -webkit-box-orient: vertical;
        max-height: 20px; }
      .shopDetailLike .momLa .textFrame .price {
        font-size: 14px;
        font-size: 0.875rem;
        font-family: 'FuturaPT-Heavy','微軟正黑體'; }
  @media (max-width: 1559px) {
    .shopDetailLike .momLa {
      max-width: 1100px; }
      .shopDetailLike .momLa .shopListFrame {
        max-width: 1040px; } }
  @media (max-width: 1365px) {
    .shopDetailLike .momLa {
      max-width: 840px; }
      .shopDetailLike .momLa .shopListFrame {
        max-width: 780px; } }
  @media (max-width: 1023px) {
    .shopDetailLike .momLa {
      max-width: 580px; }
      .shopDetailLike .momLa .shopListFrame {
        max-width: 520px; } }
  @media (max-width: 767px) {
    .shopDetailLike .momLa {
      max-width: 320px; }
      .shopDetailLike .momLa .leftRightBox {
        max-width: auto;
        width: calc(100% + 10px);
        z-index: 100; }
      .shopDetailLike .momLa .shopListFrame {
        max-width: 100%; } }
  @media (max-width: 500px) {
    .shopDetailLike .leftRightBox .arrow {
      font-size: 25px;
      font-size: 1.5625rem; } }
  @media (max-width: 413px) {
    .shopDetailLike .momLa {
      max-width: 280px; }
      .shopDetailLike .momLa .imgBox {
        width: 100%; } }
  @media (max-width: 320px) {
    .shopDetailLike .leftRightBox {
      width: 100%; } }

#member .btnStyle {
  cursor: auto; }
  #member .btnStyle .btn {
    cursor: pointer; }
  #member .btnStyle .unSub {
    cursor: auto; }
  #member .btnStyle .sub {
    cursor: auto; }

#member .mocaSNav {
  color: #fff;
  background-color: #4c4c4c;
  margin: 0; }
  #member .mocaSNav .scrollFrame {
    display: block;
    width: auto; }
  #member .mocaSNav .secBox {
    background-color: #4c4c4c; }
  #member .mocaSNav .navBar {
    height: auto; }
    #member .mocaSNav .navBar .link:hover .text {
      color: #e83434; }
    #member .mocaSNav .navBar .link.now {
      color: #fff; }
      #member .mocaSNav .navBar .link.now .text:after {
        width: 68%; }
    #member .mocaSNav .navBar .link .text {
      position: relative; }
      #member .mocaSNav .navBar .link .text:after {
        content: '';
        display: block;
        background-color: #e83434;
        width: 0;
        height: 3px;
        position: absolute;
        left: 50%;
        bottom: -5px;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        -webkit-transition: width .5s ease;
        -o-transition: width .5s ease;
        transition: width .5s ease; }
  #member .mocaSNav .logOutBtn {
    -webkit-transition: color .5s ease;
    -o-transition: color .5s ease;
    transition: color .5s ease; }
    #member .mocaSNav .logOutBtn:hover {
      color: #e83434; }
    #member .mocaSNav .logOutBtn .icon {
      width: 30px; }

@media (max-width: 1400px) {
  #member .mocaSNav .logOutBtn {
    right: 11%; } }

@media (max-width: 1023px) {
  #member .mocaSNav .secBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  #member .mocaSNav .logOutBtn {
    position: relative;
    left: 0;
    top: 0;
    right: 0;
    -webkit-transform: unset;
    -ms-transform: unset;
    transform: unset;
    margin-bottom: 10px; }
    #member .mocaSNav .logOutBtn .icon {
      margin-right: 10px;
      padding: 0; }
    #member .mocaSNav .logOutBtn .text {
      display: block; } }

@media (max-width: 767px) {
  #member .mocaSNav .navBar {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start; } }

.memberShot {
  position: relative; }
  .memberShot .shotList {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1; }
    .memberShot .shotList.showUp {
      opacity: 1;
      visibility: visible;
      position: initial;
      z-index: 0; }

.memberBrick {
  padding: 70px 0 0 0;
  width: 90%;
  max-width: 1420px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .memberBrick .blockA {
    width: 100%; }
    .memberBrick .blockA .btnStyle .btn {
      width: 90%;
      max-width: 330px; }
    .memberBrick .blockA .breadBox .textBox {
      width: 90%;
      max-width: 500px; }
    .memberBrick .blockA .textInfoBox {
      margin: 0 0 30px 0;
      font-weight: 900;
      font-family: 'FuturaPT-Heavy','微軟正黑體'; }
      .memberBrick .blockA .textInfoBox .title {
        font-size: 40px;
        font-size: 2.5rem; }
      .memberBrick .blockA .textInfoBox .subTitle {
        font-size: 24px;
        font-size: 1.5rem; }
  .memberBrick .blockB {
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
    .memberBrick .blockB .btnStyle .btn {
      width: 90%;
      max-width: 300px; }
    .memberBrick .blockB .btnStyle .styleB {
      color: inherit;
      border: solid 2px; }
    .memberBrick .blockB .breadBox .textBox {
      width: 90%;
      max-width: 440px; }
    .memberBrick .blockB .textInfoBox {
      margin: 0 0 40px 0; }
      .memberBrick .blockB .textInfoBox .title {
        font-size: 30px;
        font-size: 1.875rem; }
      .memberBrick .blockB .textInfoBox .subTitle {
        font-size: 17px;
        font-size: 1.0625rem; }
  .memberBrick .woodBlock {
    padding: 60px 0; }
    .memberBrick .woodBlock.subscribe .btnStyle .sub {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
    .memberBrick .woodBlock.subscribe .btnStyle .unSub {
      display: none; }
    .memberBrick .woodBlock.subscribe .mailBox {
      color: #e53434; }
    .memberBrick .woodBlock .btnStyle .btn {
      background-color: unset;
      height: 47px; }
      .memberBrick .woodBlock .btnStyle .btn:hover {
        border-color: #000;
        background-color: #000; }
    .memberBrick .woodBlock .btnStyle .sub {
      display: none; }
    .memberBrick .woodBlock .mailBox {
      font-size: 60px;
      font-size: 3.75rem;
      color: #656565;
      text-align: center;
      margin: 0 0 45px 0;
      -webkit-transition: color .5s ease;
      -o-transition: color .5s ease;
      transition: color .5s ease; }
    .memberBrick .woodBlock .numberBox {
      text-align: center;
      margin: 0 0 45px 0; }
      .memberBrick .woodBlock .numberBox .num {
        font-size: 80px;
        font-size: 5rem;
        font-family: 'FuturaPT-Medium','微軟正黑體'; }
      .memberBrick .woodBlock .numberBox .text {
        font-size: 14px;
        font-size: 0.875rem; }
    .memberBrick .woodBlock .selfieBox {
      margin: 0 0 25px 0; }
      .memberBrick .woodBlock .selfieBox .imgFrame {
        border-radius: 50%;
        border: solid 4px #fff;
        width: 160px;
        height: 160px;
        margin: 0 auto;
        overflow: hidden; }
    .memberBrick .woodBlock.shopHam {
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
      .memberBrick .woodBlock.shopHam .btnStyle {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%; }
        .memberBrick .woodBlock.shopHam .btnStyle .btn {
          width: 100%;
          max-width: none; }
      .memberBrick .woodBlock.shopHam .styleB {
        color: #fff;
        background-color: #000;
        border-color: #000; }
      .memberBrick .woodBlock.shopHam .hamBox {
        max-width: 560px; }
      .memberBrick .woodBlock.shopHam .shopTitleBox {
        font-weight: 900; }
        .memberBrick .woodBlock.shopHam .shopTitleBox .title {
          font-size: 36px;
          font-size: 2.25rem;
          font-family: 'FuturaPT-Heavy','微軟正黑體'; }
        .memberBrick .woodBlock.shopHam .shopTitleBox .subTitle {
          font-size: 24px;
          font-size: 1.5rem; }
        .memberBrick .woodBlock.shopHam .shopTitleBox .text {
          font-size: 15px;
          font-size: 0.9375rem; }
  .memberBrick .breadBox .textBox {
    text-align: center;
    margin: 0 auto 50px auto; }
    .memberBrick .breadBox .textBox .title {
      font-size: 17px;
      font-size: 1.0625rem;
      font-weight: 900;
      margin: 0 0 5px 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
    .memberBrick .breadBox .textBox .text {
      font-size: 15px;
      font-size: 0.9375rem; }
  .memberBrick .textInfoBox {
    text-align: center; }
  @media (max-width: 1023px) {
    .memberBrick .blockB {
      width: 100%; } }
  @media (max-width: 767px) {
    .memberBrick {
      width: 100%; } }

.memberInformation {
  padding: 175px 0 0 0; }
  .memberInformation .container {
    background-color: #ebebeb;
    max-width: 1430px;
    margin: 0 auto;
    padding: 120px 0 115px 0;
    position: relative; }
    .memberInformation .container .sendBtn {
      font-size: 14px;
      font-size: 0.875rem;
      color: #fff;
      background-color: #e83434;
      border-radius: 50%;
      width: 80px;
      height: 80px;
      margin: 0 auto 100px auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
    .memberInformation .container .mocaBtnBox {
      font-size: 14px;
      font-size: 0.875rem;
      width: 90%;
      max-width: 320px;
      margin: 0 auto 50px auto;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; }
      .memberInformation .container .mocaBtnBox .btn {
        border: none;
        width: calc(50% - 1px);
        height: 55px; }
  .memberInformation .selfieBox {
    cursor: pointer;
    position: absolute;
    left: 50%;
    top: -80px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%); }
    .memberInformation .selfieBox .imgFrame {
      border-radius: 50%;
      border: solid 4px #fff;
      width: 160px;
      height: 160px;
      margin: 0 auto;
      overflow: hidden; }
  .memberInformation .textInfoBox {
    font-weight: 900;
    font-family: 'FuturaPT-Heavy','微軟正黑體';
    text-align: center;
    padding: 0 20px 30px 20px; }
    .memberInformation .textInfoBox .title {
      font-size: 30px;
      font-size: 1.875rem; }
    .memberInformation .textInfoBox .subTitle {
      font-size: 20px;
      font-size: 1.25rem;
      margin: 0 0 16px 0; }
      .memberInformation .textInfoBox .subTitle:last-child {
        margin: 0; }
    .memberInformation .textInfoBox .text {
      font-size: 14px;
      font-size: 0.875rem; }
  .memberInformation .formA {
    width: 100%;
    max-width: 880px;
    margin: 0 auto 45px auto; }
  .memberInformation .memberInfo {
    background-color: #d3d3d3;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: 50px 30px 30px 30px;
    text-align: center; }
    .memberInformation .memberInfo .text {
      font-size: 15px;
      font-size: 0.9375rem;
      margin: 0 0 5px 0; }
    .memberInformation .memberInfo .box {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
      .memberInformation .memberInfo .box .link, .memberInformation .memberInfo .box .mail {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; }
        .memberInformation .memberInfo .box .link .text, .memberInformation .memberInfo .box .mail .text {
          padding: 17px; }
      .memberInformation .memberInfo .box .link .text {
        position: relative;
        display: inline-block; }
        .memberInformation .memberInfo .box .link .text:after {
          content: '';
          display: block;
          background-color: #000;
          width: 100%;
          height: 1px;
          margin: 2px 0 0 0; }
  @media (max-width: 1023px) {
    .memberInformation .formA {
      width: 90%; } }
  @media (max-width: 767px) {
    .memberInformation .memberInfo .box {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      .memberInformation .memberInfo .box .link .text, .memberInformation .memberInfo .box .mail .text {
        padding: 10px;
        margin: 0; } }

.memberBooking {
  padding: 125px 0 0 0;
  width: 90%;
  max-width: 1430px;
  margin: 0 auto; }
  .memberBooking.showUp .bookListFrame {
    height: auto; }
  .memberBooking .shopTitleBox {
    font-family: 'FuturaPT-Heavy','微軟正黑體';
    font-weight: 900;
    text-align: center;
    margin: 0 0 35px 0; }
    .memberBooking .shopTitleBox .title {
      font-size: 30px;
      font-size: 1.875rem;
      margin: 0 0 8px 0; }
    .memberBooking .shopTitleBox .subTitle {
      font-size: 20px;
      font-size: 1.25rem; }
  .memberBooking .chooseSelectBox {
    width: 90%;
    max-width: 340px;
    height: 60px;
    margin: 0 auto 45px auto; }
    .memberBooking .chooseSelectBox .character {
      font-size: 14px;
      font-size: 0.875rem; }
    .memberBooking .chooseSelectBox .chrisSelect {
      height: 100%; }
    .memberBooking .chooseSelectBox .dropShow {
      cursor: pointer;
      border: solid 2px #000;
      height: 100%;
      position: relative; }
      .memberBooking .chooseSelectBox .dropShow .icon {
        position: absolute;
        right: 10px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
    .memberBooking .chooseSelectBox .showBox {
      width: 100%;
      text-align: center;
      padding: 0 30px; }
  .memberBooking .bookListFrame {
    border-top: solid 3px #000;
    border-bottom: solid 3px #000;
    overflow: hidden;
    height: 0; }
    .memberBooking .bookListFrame .list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; }
      .memberBooking .bookListFrame .list.canceled .btn {
        cursor: auto !important;
        color: #b8b8b8;
        border: solid 2px #b8b8b8; }
        .memberBooking .bookListFrame .list.canceled .btn:hover {
          color: #b8b8b8;
          background-color: rgba(0, 0, 0, 0); }
      .memberBooking .bookListFrame .list.grayWord .textInfoArea .noticeWord {
        color: #b8b8b8; }
      .memberBooking .bookListFrame .list.remove {
        -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        transform: translateX(-100%);
        -webkit-transition: -webkit-transform .5s ease;
        transition: -webkit-transform .5s ease;
        -o-transition: transform .5s ease;
        transition: transform .5s ease;
        transition: transform .5s ease, -webkit-transform .5s ease; }
      .memberBooking .bookListFrame .list:last-child {
        border-bottom: none; }
      .memberBooking .bookListFrame .list .child {
        padding: 60px 7px;
        position: relative; }
        .memberBooking .bookListFrame .list .child:before, .memberBooking .bookListFrame .list .child:after {
          content: '';
          display: block;
          background-color: #000;
          width: 100%;
          height: 1px;
          position: absolute;
          bottom: 0; }
        .memberBooking .bookListFrame .list .child:first-child:before {
          left: 0; }
        .memberBooking .bookListFrame .list .child:first-child:after {
          display: none; }
        .memberBooking .bookListFrame .list .child:last-child:before {
          display: none; }
        .memberBooking .bookListFrame .list .child:last-child:after {
          right: 0; }
    .memberBooking .bookListFrame .btnStyle {
      padding: 0 20px; }
      .memberBooking .bookListFrame .btnStyle .btn {
        width: 120px;
        height: 50px;
        margin: 0 2px; }
      .memberBooking .bookListFrame .btnStyle .styleG {
        color: #fff;
        background-color: #999;
        border-color: #999; }
      .memberBooking .bookListFrame .btnStyle .styleR {
        background-color: #e83434;
        border-color: #e83434; }
    .memberBooking .bookListFrame .btnInfoArea {
      width: calc(41.2% - 7px);
      max-width: 590px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
    .memberBooking .bookListFrame .textInfoArea {
      width: calc(58.8% - 7px);
      max-width: 840px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      .memberBooking .bookListFrame .textInfoArea .numBox {
        font-size: 40px;
        font-size: 2.5rem;
        font-family: 'FuturaPT-Heavy','微軟正黑體';
        width: 17%;
        min-width: 120px;
        max-width: 155px;
        text-align: center;
        padding: 0 20px; }
      .memberBooking .bookListFrame .textInfoArea .textBox {
        width: 83%;
        max-width: 765px;
        padding-right: 30px; }
        .memberBooking .bookListFrame .textInfoArea .textBox .title {
          font-size: 18px;
          font-size: 1.125rem;
          font-weight: 900;
          padding: 10px 0;
          display: inline-block; }
        .memberBooking .bookListFrame .textInfoArea .textBox .noticeWord {
          font-size: 14px;
          font-size: 0.875rem;
          font-weight: 900;
          color: #e83434;
          padding: 10px 0 0 0; }
      .memberBooking .bookListFrame .textInfoArea .loBox {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
        .memberBooking .bookListFrame .textInfoArea .loBox .text {
          font-size: 15px;
          font-size: 0.9375rem;
          margin: 0 30px 0 0; }
          .memberBooking .bookListFrame .textInfoArea .loBox .text:last-child {
            margin: 0; }
        .memberBooking .bookListFrame .textInfoArea .loBox .name {
          font-weight: 900; }
    .memberBooking .bookListFrame .stateBox {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      text-align: center;
      font-weight: 900;
      width: 350px;
      padding: 0 20px; }
      .memberBooking .bookListFrame .stateBox .title {
        font-size: 13px;
        font-size: 0.8125rem;
        margin: 0 0 15px 0; }
      .memberBooking .bookListFrame .stateBox .name {
        font-size: 18px;
        font-size: 1.125rem; }
    .memberBooking .bookListFrame .stateChild {
      width: 33.33%; }
      .memberBooking .bookListFrame .stateChild .icon {
        font-size: 30px;
        font-size: 1.875rem; }
        .memberBooking .bookListFrame .stateChild .icon:before {
          display: block;
          -webkit-transition: color .3s ease, -webkit-transform .3s ease;
          transition: color .3s ease, -webkit-transform .3s ease;
          -o-transition: transform .3s ease, color .3s ease;
          transition: transform .3s ease, color .3s ease;
          transition: transform .3s ease, color .3s ease, -webkit-transform .3s ease; }
      .memberBooking .bookListFrame .stateChild .link:hover .icon:before {
        color: #ff0000;
        -webkit-transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        transform: translateY(-6px); }
  @media (max-width: 1365px) {
    .memberBooking .bookListFrame .list .child {
      padding: 60px 0; }
    .memberBooking .bookListFrame .stateBox {
      padding: 0; }
    .memberBooking .bookListFrame .btnStyle {
      padding: 0 10px; } }
  @media (max-width: 1199px) {
    .memberBooking .bookListFrame .list {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      .memberBooking .bookListFrame .list .child:first-child {
        padding: 40px 0 10px 0; }
        .memberBooking .bookListFrame .list .child:first-child:before {
          display: none; }
      .memberBooking .bookListFrame .list .child:last-child {
        padding: 10px 0 40px 0; }
    .memberBooking .bookListFrame .textInfoArea {
      width: 75%;
      max-width: none; }
    .memberBooking .bookListFrame .btnInfoArea {
      width: 100%;
      max-width: none; } }
  @media (max-width: 1023px) {
    .memberBooking .bookListFrame .list {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
    .memberBooking .bookListFrame .btnInfoArea {
      width: 100%;
      max-width: none;
      min-width: auto; }
    .memberBooking .bookListFrame .textInfoArea {
      width: 100%; } }
  @media (max-width: 767px) {
    .memberBooking .bookListFrame .list .child:first-child {
      padding: 30px 0 10px 0; }
    .memberBooking .bookListFrame .list .child:last-child {
      padding: 10px 0 30px 0;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
    .memberBooking .bookListFrame .btnInfoArea {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
    .memberBooking .bookListFrame .textInfoArea {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
      .memberBooking .bookListFrame .textInfoArea .numBox {
        width: 100%;
        min-width: auto;
        max-width: none;
        text-align: left;
        padding: 0; }
      .memberBooking .bookListFrame .textInfoArea .textBox {
        width: auto;
        max-width: none;
        padding: 0; }
    .memberBooking .bookListFrame .stateBox {
      margin: 0 0 20px 0; } }

.mCancelBag.open .cancelBlock {
  opacity: 1;
  -webkit-transition: opacity .5s ease .4s;
  -o-transition: opacity .5s ease .4s;
  transition: opacity .5s ease .4s; }

.mCancelBag.close .cancelBlock {
  opacity: 0;
  -webkit-transition: opacity .5s ease;
  -o-transition: opacity .5s ease;
  transition: opacity .5s ease; }

.mCancelBag .bg {
  background-color: rgba(0, 0, 0, 0.5); }

.mCancelBag .container {
  max-width: 615px;
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

.mCancelBag .cancelBlock {
  background-color: #fff;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  opacity: 0; }

.mCancelBag .mixBox {
  padding: 0 20px; }

.mSelfieBag.open .selfieBlock {
  opacity: 1;
  -webkit-transition: opacity .5s ease .4s;
  -o-transition: opacity .5s ease .4s;
  transition: opacity .5s ease .4s; }

.mSelfieBag.open .selfieBox {
  opacity: 1;
  -webkit-transition: opacity 1s ease .8s;
  -o-transition: opacity 1s ease .8s;
  transition: opacity 1s ease .8s; }

.mSelfieBag.close .selfieBlock {
  opacity: 0;
  -webkit-transition: opacity .5s ease;
  -o-transition: opacity .5s ease;
  transition: opacity .5s ease; }

.mSelfieBag .bg {
  background-color: rgba(0, 0, 0, 0.5); }

.mSelfieBag .container {
  max-width: 535px;
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

.mSelfieBag .selfieBlock {
  background-color: #fff;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  opacity: 0; }

.mSelfieBag .titleInfoBox:after {
  display: none; }

.mSelfieBag .selfieBox {
  border-radius: 50%;
  overflow: hidden;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  opacity: 0; }
  .mSelfieBag .selfieBox:hover .hoverBox {
    opacity: 1; }
  .mSelfieBag .selfieBox .hoverBox {
    font-size: 14px;
    font-size: 0.875rem;
    cursor: pointer;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    opacity: 0;
    -webkit-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease; }
    .mSelfieBag .selfieBox .hoverBox .icon {
      border-radius: 50%;
      border: solid 2px #fff;
      width: 35px;
      height: 35px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
    .mSelfieBag .selfieBox .hoverBox .text {
      position: absolute;
      left: 50%;
      top: 67%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
  .mSelfieBag .selfieBox .imgFrame {
    height: 100%;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
  .mSelfieBag .selfieBox .uploadInput {
    opacity: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1; }

.mSelfieBag .textInfoBox {
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  padding: 50px 20px 100px 20px; }
  .mSelfieBag .textInfoBox .text {
    font-size: 14px;
    font-size: 0.875rem; }
  .mSelfieBag .textInfoBox .default {
    cursor: pointer;
    font-weight: 900;
    display: inline-block;
    position: relative; }
    .mSelfieBag .textInfoBox .default:after {
      content: '';
      display: block;
      background-color: #000;
      width: 100%;
      height: 1px;
      margin-top: 3px; }

.mBookBag {
  overflow-y: scroll; }
  .mBookBag.open .container {
    opacity: 1;
    -webkit-transition: opacity .5s ease .5s;
    -o-transition: opacity .5s ease .5s;
    transition: opacity .5s ease .5s; }
  .mBookBag.close .container {
    opacity: 0;
    -webkit-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease; }
  .mBookBag .bg {
    background-color: rgba(0, 0, 0, 0.5); }
  .mBookBag .container {
    width: 100%;
    max-width: 1140px;
    min-height: 100vh;
    padding: 120px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: 0; }
  .mBookBag .bookBlock {
    background-color: #ffffff;
    width: 100%;
    position: relative; }
  .mBookBag .bookBox {
    max-width: 820px;
    margin: 0 auto;
    padding: 70px 20px 105px 20px; }
    .mBookBag .bookBox .chrisCloseBtn {
      cursor: pointer;
      color: #fff;
      background-color: #000;
      width: 93px;
      height: 93px;
      position: absolute;
      right: 0;
      top: 0;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
      .mBookBag .bookBox .chrisCloseBtn .iconBox:before, .mBookBag .bookBox .chrisCloseBtn .iconBox:after {
        margin-left: 0; }
      .mBookBag .bookBox .chrisCloseBtn .text {
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px); }
  .mBookBag .serialBox {
    margin: 0 0 50px 0; }
    .mBookBag .serialBox .text {
      font-size: 13px;
      font-size: 0.8125rem; }
    .mBookBag .serialBox .number {
      font-size: 24px;
      font-size: 1.5rem;
      font-weight: 900; }
  .mBookBag .bunBox {
    margin: 0 0 90px 0;
    text-align: center; }
    .mBookBag .bunBox .nameTitle {
      font-size: 30px;
      font-size: 1.875rem;
      padding: 0 0 30px 0;
      width: 100%;
      max-width: none; }
    .mBookBag .bunBox .stuffing {
      padding: 0 0 30px 0; }
      .mBookBag .bunBox .stuffing:last-child {
        padding: 0; }
      .mBookBag .bunBox .stuffing .title {
        font-size: 13px;
        font-size: 0.8125rem;
        padding: 0 0 8px 0; }
      .mBookBag .bunBox .stuffing .text {
        font-size: 16px;
        font-size: 1rem;
        font-weight: 900;
        font-family: 'FuturaPT-Heavy','微軟正黑體'; }
  .mBookBag .formBox {
    margin: 0 auto; }
  .mBookBag .formHeadBox {
    border-top: solid 4px #000;
    padding: 15px 0; }
    .mBookBag .formHeadBox .title {
      font-size: 18px;
      font-size: 1.125rem;
      text-align: center;
      font-weight: 900;
      font-family: 'FuturaPT-Heavy','微軟正黑體'; }
  .mBookBag .formBodyBox {
    border-top: solid 4px #000;
    border-bottom: solid 4px #000; }
    .mBookBag .formBodyBox .detail {
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start; }
      .mBookBag .formBodyBox .detail .sNum {
        font-size: 30px;
        font-size: 1.875rem;
        font-family: 'FuturaPT-Heavy','微軟正黑體';
        width: 29%;
        max-width: 225px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center; }
      .mBookBag .formBodyBox .detail .dBox {
        width: 71%; }
      .mBookBag .formBodyBox .detail .dList {
        border-bottom: solid 1px #000;
        padding: 16px 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; }
        .mBookBag .formBodyBox .detail .dList:last-child {
          border-bottom: none; }
      .mBookBag .formBodyBox .detail .dTitle {
        font-size: 14px;
        font-size: 0.875rem;
        font-weight: 900;
        width: 100%;
        width: 165px;
        min-width: 165px; }
        .mBookBag .formBodyBox .detail .dTitle .en {
          font-size: 15px;
          font-size: 0.9375rem;
          font-family: 'FuturaPT-Heavy','微軟正黑體'; }
      .mBookBag .formBodyBox .detail .dText {
        font-size: 14px;
        font-size: 0.875rem;
        font-weight: 900;
        width: calc(100% - 165px);
        word-break: break-all; }
    .mBookBag .formBodyBox .list {
      padding: 30px 0 25px 0;
      border-bottom: solid 1px #000;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; }
      .mBookBag .formBodyBox .list:last-child {
        border-bottom: none; }
    .mBookBag .formBodyBox .title {
      font-size: 18px;
      font-size: 1.125rem;
      font-weight: 900; }
    .mBookBag .formBodyBox .countBox {
      font-size: 14px;
      font-size: 0.875rem;
      font-weight: 900;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
      .mBookBag .formBodyBox .countBox .item:first-child {
        padding-right: 40px; }
      .mBookBag .formBodyBox .countBox .item:last-child {
        padding-right: 5px; }
      .mBookBag .formBodyBox .countBox .num {
        font-size: 20px;
        font-size: 1.25rem;
        font-family: 'FuturaPT-Heavy','微軟正黑體'; }
  .mBookBag .numberBox {
    font-size: 15px;
    font-size: 0.9375rem;
    font-weight: 900;
    padding: 40px 0 60px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    .mBookBag .numberBox .num {
      font-size: 30px;
      font-size: 1.875rem;
      font-family: 'FuturaPT-Heavy','微軟正黑體'; }
  .mBookBag .ufoBallBox {
    position: absolute;
    left: 50%;
    bottom: -50px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0); }
  .mBookBag .noticeBox {
    background-color: #e5e5e5;
    width: 100%;
    height: 295px;
    padding: 35px 0;
    position: relative; }
    .mBookBag .noticeBox .articleBox {
      padding: 0 50px; }
    .mBookBag .noticeBox .nameTitle {
      font-weight: 900;
      text-align: center;
      padding: 0 0 35px 0; }
      .mBookBag .noticeBox .nameTitle .en {
        font-size: 25px;
        font-size: 1.5625rem;
        font-family: 'FuturaPT-Heavy','微軟正黑體'; }
      .mBookBag .noticeBox .nameTitle .cn {
        font-size: 24px;
        font-size: 1.5rem; }
    .mBookBag .noticeBox .title {
      font-size: 18px;
      font-size: 1.125rem;
      font-weight: 900;
      padding: 0 0 10px 0; }
    .mBookBag .noticeBox .text {
      font-size: 15px;
      font-size: 0.9375rem;
      line-height: 1.7; }
  .mBookBag .mCSB_scrollTools {
    width: 10px; }
  .mBookBag .mCSB_scrollTools .mCSB_draggerRail {
    opacity: 0; }
  .mBookBag .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: #000; }
  @media (max-width: 767px) {
    .mBookBag.open .bg {
      background-color: white; }
    .mBookBag .bg {
      background-color: rgba(255, 255, 255, 0); }
    .mBookBag .container {
      padding: 0; }
    .mBookBag .noticeBox .articleBox {
      padding: 0 25px; }
    .mBookBag .bookBox {
      padding: 70px 20px 50px 20px; }
    .mBookBag .ufoBallBox {
      position: relative;
      left: auto;
      bottom: auto;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;
      margin: 0 auto 40px auto;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
    .mBookBag .formBody .detail .dBox {
      width: 100%;
      max-width: 480px; }
    .mBookBag .formBody .title {
      padding-bottom: 10px; }
    .mBookBag .formBody .countBox {
      width: 100%;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; }
    .mBookBag .formBodyBox .detail .dBox {
      width: 100%; } }

.memberForm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .memberForm .w25 {
    width: 25%; }
  .memberForm .w50 {
    width: calc(50% - 2px); }
    .memberForm .w50 .lableTitle {
      width: 40%; }
    .memberForm .w50 input {
      width: 60%; }
    .memberForm .w50 .chrisSelect {
      width: 60%; }
  .memberForm .w100 {
    width: 100%; }
    .memberForm .w100 .lableTitle {
      width: 25%; }
  .memberForm input {
    font-size: 14px;
    font-size: 0.875rem;
    border: none;
    font-family: 'FuturaPT-Book','微軟正黑體'; }
  .memberForm .chrisSelect .character {
    font-size: 14px;
    font-size: 0.875rem; }
  .memberForm .chrisSelect .showBox {
    height: 55px;
    width: 100%;
    padding-left: 25px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start; }
  .memberForm .addressArea input {
    width: 100%; }
  .memberForm .mailBArea input {
    width: 75%; }
  .memberForm .letterArea .chrisSelect {
    width: 75%; }
  .memberForm .letterArea .showBox {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start; }
  .memberForm .gap {
    margin: 1px; }
  .memberForm .list {
    background-color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 25px; }
    .memberForm .list input {
      height: 55px; }
  .memberForm .lableTitle {
    font-size: 15px;
    font-size: 0.9375rem;
    font-weight: 900;
    font-family: 'FuturaPT-Heavy','微軟正黑體';
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  @media (max-width: 1023px) {
    .memberForm .list.w50 {
      width: 100%; }
      .memberForm .list.w50 .lableTitle {
        width: 200px; }
      .memberForm .list.w50 input {
        width: calc(100% - 200px); }
      .memberForm .list.w50 .chrisSelect {
        width: calc(100% - 200px); }
        .memberForm .list.w50 .chrisSelect .showBox {
          padding: 0; }
    .memberForm .list.w100 .lableTitle {
      width: 200px; } }
  @media (max-width: 767px) {
    .memberForm .w25 {
      width: 50%; }
    .memberForm .list.w50 .lableTitle {
      width: 100%; }
    .memberForm .list.w50 input {
      width: 100%; }
    .memberForm .list.w50 .chrisSelect {
      width: 100%; }
    .memberForm .list.w100 .lableTitle {
      width: 100%; }
    .memberForm .list.w100 input {
      width: 100%; }
    .memberForm .list.w100 .chrisSelect {
      width: 100%; }
      .memberForm .list.w100 .chrisSelect .showBox {
        padding: 0; }
    .memberForm .list {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; }
      .memberForm .list .lableTitle {
        width: 100%;
        padding: 15px 0 5px 0; }
      .memberForm .list input {
        height: 40px; }
    .memberForm .chrisSelect .dropList .list {
      padding: 0; } }

.member .bgDecoration {
  position: absolute; }

.member .degA {
  width: 57%;
  left: 0;
  top: 0; }

.member .degB {
  width: 58%;
  right: 0;
  bottom: 0; }

.logPage .bgPic {
  background-color: #191919;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1; }

.logPage .chrisCloseBtn {
  color: #fff;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: absolute;
  right: 60px;
  top: 60px; }

.logPage .logArea {
  width: 100%;
  min-height: 100vh;
  padding: 100px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

.logPage .logFrame {
  width: 90%;
  max-width: 570px; }

.logPage .mocaTitleSec {
  color: #fff;
  font-family: 'FuturaPT-Heavy','微軟正黑體';
  margin: 0 0 50px 0; }
  .logPage .mocaTitleSec .title {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    margin: 0 0 20px 0;
    font-weight: 900; }
    .logPage .mocaTitleSec .title .aa {
      font-size: 36px;
      font-size: 2.25rem; }
    .logPage .mocaTitleSec .title .bb {
      font-size: 34px;
      font-size: 2.125rem; }
  .logPage .mocaTitleSec .subTitle {
    font-size: 15px;
    font-size: 0.9375rem;
    opacity: 1;
    margin: 0; }

.logPage .formLog .list {
  background-color: #d1d1d1;
  margin: 0 0 4px 0;
  padding: 0 10px 0 25px; }
  .logPage .formLog .list:last-child {
    margin: 0; }

.logPage .formLog input {
  background-color: rgba(0, 0, 0, 0);
  width: 100%; }

.logPage .formLog .lableTitle {
  color: #383030;
  min-width: 170px; }
  .logPage .formLog .lableTitle span:first-child {
    margin-right: 3px; }

.logPage .forgotArea {
  color: #fff;
  padding: 10px 0 0 0;
  margin: 0 0 60px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .logPage .forgotArea .text {
    font-size: 14px;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 15px;
    -webkit-transition: color .5s ease;
    -o-transition: color .5s ease;
    transition: color .5s ease; }
    .logPage .forgotArea .text:hover {
      color: #e83434; }
  .logPage .forgotArea .en {
    font-family: 'FuturaPT-Light','微軟正黑體'; }
  .logPage .forgotArea span {
    font-family: '微軟正黑體'; }

.logPage .ctrlArea {
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  .logPage .ctrlArea .link {
    color: #fff;
    font-size: 14px;
    font-size: 0.875rem;
    cursor: pointer;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    margin: 0 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
  .logPage .ctrlArea .btnA {
    border: dashed;
    border-width: 1.2px; }
  .logPage .ctrlArea .btnB {
    background-color: #e83434; }

@media (max-width: 767px) {
  .logPage .chrisCloseBtn {
    right: 15px;
    top: 30px; }
  .logPage .formLog .list {
    padding: 0 20px; }
  .logPage .formLog .verifi {
    position: relative; }
    .logPage .formLog .verifi input {
      width: calc(100% - 80px); }
    .logPage .formLog .verifi .code {
      position: absolute;
      right: 0;
      top: 50%;
      right: 10px;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%); } }

.hideAccountType {
  background-color: #191919;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  -webkit-overflow-scrolling: touch;
  min-height: 100vh;
  position: fixed;
  left: 0;
  top: 0; }

.registAccount {
  z-index: -1;
  visibility: hidden;
  opacity: 0; }
  .registAccount.open {
    z-index: 1;
    visibility: visible;
    opacity: 1; }
    .registAccount.open .pageAbox.showUp .mocaTitleSec .title {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
      -webkit-transition: opacity 1.2s ease, -webkit-transform 1.2s ease;
      transition: opacity 1.2s ease, -webkit-transform 1.2s ease;
      -o-transition: opacity 1.2s ease, transform 1.2s ease;
      transition: opacity 1.2s ease, transform 1.2s ease;
      transition: opacity 1.2s ease, transform 1.2s ease, -webkit-transform 1.2s ease; }
    .registAccount.open .pageAbox.showUp .mocaTitleSec .subTitle {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1.2s ease .2s, -webkit-transform 1.2s ease .2s;
      transition: opacity 1.2s ease .2s, -webkit-transform 1.2s ease .2s;
      -o-transition: opacity 1.2s ease .2s, transform 1.2s ease .2s;
      transition: opacity 1.2s ease .2s, transform 1.2s ease .2s;
      transition: opacity 1.2s ease .2s, transform 1.2s ease .2s, -webkit-transform 1.2s ease .2s; }
    .registAccount.open .pageAbox.showUp .formRegister {
      opacity: 1;
      -webkit-transition: opacity 1s ease .5s;
      -o-transition: opacity 1s ease .5s;
      transition: opacity 1s ease .5s; }
    .registAccount.open .pageAbox.showUp .serviceRule {
      opacity: 1;
      -webkit-transition: opacity 1s ease .7s;
      -o-transition: opacity 1s ease .7s;
      transition: opacity 1s ease .7s; }
    .registAccount.open .pageAbox.showUp .ctrlArea {
      opacity: 1;
      -webkit-transition: opacity 1s ease .9s;
      -o-transition: opacity 1s ease .9s;
      transition: opacity 1s ease .9s; }
    .registAccount.open .pageBbox.showUp .img {
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: -webkit-transform 1.2s ease;
      transition: -webkit-transform 1.2s ease;
      -o-transition: transform 1.2s ease;
      transition: transform 1.2s ease;
      transition: transform 1.2s ease, -webkit-transform 1.2s ease; }
    .registAccount.open .pageBbox.showUp .textInfo {
      opacity: 1;
      -webkit-transition: opacity 1s ease .3s;
      -o-transition: opacity 1s ease .3s;
      transition: opacity 1s ease .3s; }
    .registAccount.open .pageBbox.showUp .ctrlArea {
      opacity: 1;
      -webkit-transition: opacity 1s ease .6s;
      -o-transition: opacity 1s ease .6s;
      transition: opacity 1s ease .6s; }
  .registAccount.close {
    opacity: 0;
    -webkit-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease; }
  .registAccount .chrisCloseBtn {
    cursor: pointer;
    z-index: 1; }
  .registAccount .pizzaBox {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    visibility: hidden; }
    .registAccount .pizzaBox.showUp {
      position: relative;
      z-index: 0;
      visibility: visible; }
  .registAccount .pageA {
    width: 100%;
    min-height: 100vh;
    padding: 100px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative; }
    .registAccount .pageA .mocaTitleSec {
      margin: 0 0 25px 0; }
      .registAccount .pageA .mocaTitleSec .title {
        margin: 0 0 35px 0; }
  .registAccount .pageAbox {
    width: 90%;
    max-width: 670px; }
    .registAccount .pageAbox .mocaTitleSec .title {
      opacity: 0;
      -webkit-transform: translateY(100px);
      -ms-transform: translateY(100px);
      transform: translateY(100px); }
    .registAccount .pageAbox .mocaTitleSec .subTitle {
      opacity: 0;
      -webkit-transform: translateY(100px);
      -ms-transform: translateY(100px);
      transform: translateY(100px); }
    .registAccount .pageAbox .serviceRule {
      color: #fff;
      margin: 0 0 60px 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      opacity: 0; }
      .registAccount .pageAbox .serviceRule .iconBox {
        cursor: pointer;
        color: #fff;
        border-radius: 50%;
        border: solid 2px #fff;
        width: 25px;
        height: 25px;
        margin: 0 20px 0 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center; }
        .registAccount .pageAbox .serviceRule .iconBox.red {
          color: #fff;
          border-color: #ff0000;
          background-color: #ff0000; }
      .registAccount .pageAbox .serviceRule .icon {
        font-size: 12px;
        font-size: 0.75rem; }
      .registAccount .pageAbox .serviceRule .text {
        font-size: 14px;
        font-size: 0.875rem;
        text-align: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center; }
      .registAccount .pageAbox .serviceRule .openRule {
        cursor: pointer; }
        .registAccount .pageAbox .serviceRule .openRule:after {
          content: '';
          display: block;
          background-color: #fff;
          width: 100%;
          height: 1px; }
    .registAccount .pageAbox .ctrlArea {
      opacity: 0; }
  .registAccount .pageBbox {
    color: #fff;
    width: 90%;
    max-width: 670px; }
    .registAccount .pageBbox .imgFrame {
      margin: 0 0 40px 0;
      overflow: hidden; }
    .registAccount .pageBbox .img {
      margin: 0 auto;
      -webkit-transform: translateY(100px);
      -ms-transform: translateY(100px);
      transform: translateY(100px); }
    .registAccount .pageBbox .textInfo {
      text-align: center;
      margin: 0 auto 75px auto;
      opacity: 0; }
    .registAccount .pageBbox .ctrlArea {
      opacity: 0; }
  .registAccount .formRegister {
    color: #fff;
    margin: 0 0 40px 0;
    opacity: 0; }
    .registAccount .formRegister .verifi {
      position: relative; }
    .registAccount .formRegister .list {
      background-color: #484848;
      margin: 1px; }
      .registAccount .formRegister .list.break {
        margin: 1px 1px 20px 1px; }
      .registAccount .formRegister .list.verifi .code {
        margin-left: auto; }
    .registAccount .formRegister .lableTitle {
      -ms-flex-wrap: inherit;
      flex-wrap: inherit;
      white-space: pre; }
      .registAccount .formRegister .lableTitle:before {
        content: '*';
        display: block;
        margin-right: 5px; }
      .registAccount .formRegister .lableTitle span:first-child {
        margin-right: 5px; }
    .registAccount .formRegister input {
      color: #fff;
      background-color: rgba(0, 0, 0, 0);
      width: 100%; }
    .registAccount .formRegister .w100 .lableTitle {
      width: auto;
      padding-right: 40px; }
    .registAccount .formRegister .w50 .lableTitle {
      width: auto;
      padding-right: 20px; }
    .registAccount .formRegister .chrisSelect .showBox {
      padding: 0; }
    .registAccount .formRegister .chrisSelect .dropList .list {
      color: #fff;
      padding: 0;
      margin: 0; }
  @media (max-width: 767px) {
    .registAccount .pageAbox .serviceRule {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
      .registAccount .pageAbox .serviceRule .iconBox {
        margin: 0 0 15px 0; }
    .registAccount .formRegister .verifi .code {
      position: absolute;
      right: 0;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%); }
    .registAccount .formRegister .w100 .lableTitle {
      padding-right: 0; }
    .registAccount .formRegister .w50 .lableTitle {
      padding-right: 0; }
    .registAccount .list {
      padding: 0 10px; }
      .registAccount .list .lableTitle {
        font-size: 14px;
        font-size: 0.875rem;
        padding: 15px 0 0 0; } }

.modelA {
  z-index: -1;
  visibility: hidden;
  opacity: 0;
  height: 0; }
  .modelA.open {
    z-index: 10;
    visibility: visible;
    opacity: 1;
    height: calc(var(--vh, 1vh) * 100);
    -webkit-overflow-scrolling: touch; }
    .modelA.open .pageAbox.showUp .mocaTitleSec .title {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
      -webkit-transition: opacity 1.2s ease, -webkit-transform 1.2s ease;
      transition: opacity 1.2s ease, -webkit-transform 1.2s ease;
      -o-transition: opacity 1.2s ease, transform 1.2s ease;
      transition: opacity 1.2s ease, transform 1.2s ease;
      transition: opacity 1.2s ease, transform 1.2s ease, -webkit-transform 1.2s ease; }
    .modelA.open .pageAbox.showUp .mocaTitleSec .subTitle {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1.2s ease .2s, -webkit-transform 1.2s ease .2s;
      transition: opacity 1.2s ease .2s, -webkit-transform 1.2s ease .2s;
      -o-transition: opacity 1.2s ease .2s, transform 1.2s ease .2s;
      transition: opacity 1.2s ease .2s, transform 1.2s ease .2s;
      transition: opacity 1.2s ease .2s, transform 1.2s ease .2s, -webkit-transform 1.2s ease .2s; }
    .modelA.open .pageAbox.showUp .mocaTitleSec .text {
      opacity: 1;
      -webkit-transition: opacity 1.2s ease .4s;
      -o-transition: opacity 1.2s ease .4s;
      transition: opacity 1.2s ease .4s; }
    .modelA.open .pageAbox.showUp .memberForm {
      opacity: 1;
      -webkit-transition: opacity 1.2s ease .6s;
      -o-transition: opacity 1.2s ease .6s;
      transition: opacity 1.2s ease .6s; }
    .modelA.open .pageAbox.showUp .ctrlArea {
      opacity: 1;
      -webkit-transition: opacity 1.2s ease .8s;
      -o-transition: opacity 1.2s ease .8s;
      transition: opacity 1.2s ease .8s; }
    .modelA.open .pageBbox.showUp .mocaTitleSec .title {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
      -webkit-transition: opacity 1.2s ease, -webkit-transform 1.2s ease;
      transition: opacity 1.2s ease, -webkit-transform 1.2s ease;
      -o-transition: opacity 1.2s ease, transform 1.2s ease;
      transition: opacity 1.2s ease, transform 1.2s ease;
      transition: opacity 1.2s ease, transform 1.2s ease, -webkit-transform 1.2s ease; }
    .modelA.open .pageBbox.showUp .mocaTitleSec .subTitle {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
      transform: translateY(0px);
      -webkit-transition: opacity 1.2s ease .2s, -webkit-transform 1.2s ease .2s;
      transition: opacity 1.2s ease .2s, -webkit-transform 1.2s ease .2s;
      -o-transition: opacity 1.2s ease .2s, transform 1.2s ease .2s;
      transition: opacity 1.2s ease .2s, transform 1.2s ease .2s;
      transition: opacity 1.2s ease .2s, transform 1.2s ease .2s, -webkit-transform 1.2s ease .2s; }
    .modelA.open .pageBbox.showUp .mocaTitleSec .text {
      opacity: 1;
      -webkit-transition: opacity 1.2s ease .4s;
      -o-transition: opacity 1.2s ease .4s;
      transition: opacity 1.2s ease .4s; }
    .modelA.open .pageBbox.showUp .ctrlArea {
      opacity: 1;
      -webkit-transition: opacity 1.2s ease .8s;
      -o-transition: opacity 1.2s ease .8s;
      transition: opacity 1.2s ease .8s; }
  .modelA.close {
    opacity: 0;
    -webkit-transition: opacity .6s ease;
    -o-transition: opacity .6s ease;
    transition: opacity .6s ease; }
  .modelA .mCSB_scrollTools {
    opacity: 0 !important; }
  .modelA .chrisCloseBtn {
    cursor: pointer;
    z-index: 1; }
  .modelA .mocaTitleSec .title {
    opacity: 0;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px); }
  .modelA .mocaTitleSec .subTitle {
    opacity: 0;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px); }
  .modelA .mocaTitleSec .text {
    opacity: 0; }
  .modelA .memberForm {
    opacity: 0; }
  .modelA .ctrlArea {
    opacity: 0; }
  .modelA .pizzaBox {
    width: 90%;
    max-width: 670px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    visibility: hidden; }
    .modelA .pizzaBox.showUp {
      position: relative;
      z-index: 0;
      visibility: visible; }
  .modelA .pageA {
    width: 100%;
    min-height: 100vh;
    padding: 100px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative; }
    .modelA .pageA .mocaTitleSec {
      margin: 0 0 60px 0; }
      .modelA .pageA .mocaTitleSec .title {
        font-size: 40px;
        font-size: 2.5rem;
        font-weight: 900;
        font-family: 'FuturaPT-Heavy','微軟正黑體';
        margin: 0 0 10px 0; }
      .modelA .pageA .mocaTitleSec .subTitle {
        font-size: 24px;
        font-size: 1.5rem;
        font-weight: 900;
        font-family: 'FuturaPT-Heavy','微軟正黑體';
        margin: 0 0 50px 0; }
      .modelA .pageA .mocaTitleSec .text {
        font-size: 14px;
        font-size: 0.875rem; }
  .modelA .ctrlArea {
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
    .modelA .ctrlArea .link {
      color: #fff;
      font-size: 14px;
      font-size: 0.875rem;
      cursor: pointer;
      border-radius: 50%;
      width: 80px;
      height: 80px;
      margin: 0 20px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
    .modelA .ctrlArea .btnA {
      border: dashed;
      border-width: 1.2px; }
    .modelA .ctrlArea .btnB {
      background-color: #e83434; }

.fAccountA .formFaccount {
  color: #fff;
  margin: 0 0 80px 0; }
  .fAccountA .formFaccount .lableTitle {
    -ms-flex-wrap: inherit;
    flex-wrap: inherit;
    white-space: pre; }
    .fAccountA .formFaccount .lableTitle:before {
      content: '*';
      display: block;
      margin-right: 5px; }
  .fAccountA .formFaccount .w100 .lableTitle {
    width: auto;
    padding-right: 40px; }
  .fAccountA .formFaccount .list {
    background-color: #484848;
    margin: 1px; }
  .fAccountA .formFaccount input {
    color: #fff;
    background-color: rgba(0, 0, 0, 0);
    width: 100%; }
  .fAccountA .formFaccount .verifi {
    position: relative; }
    .fAccountA .formFaccount .verifi .code {
      margin-left: auto; }

@media (max-width: 767px) {
  .fAccountA .formFaccount .verifi .code {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); } }

.fPasswordA .formFpassword {
  color: #fff;
  margin: 0 0 80px 0; }
  .fPasswordA .formFpassword .lableTitle {
    -ms-flex-wrap: inherit;
    flex-wrap: inherit;
    white-space: pre; }
    .fPasswordA .formFpassword .lableTitle:before {
      content: '*';
      display: block;
      margin-right: 5px; }
  .fPasswordA .formFpassword .w100 .lableTitle {
    width: auto;
    padding-right: 40px; }
  .fPasswordA .formFpassword .list {
    background-color: #484848;
    margin: 1px; }
  .fPasswordA .formFpassword input {
    color: #fff;
    background-color: rgba(0, 0, 0, 0);
    width: 100%; }
  .fPasswordA .formFpassword .verifi {
    position: relative; }
    .fPasswordA .formFpassword .verifi .code {
      margin-left: auto; }

@media (max-width: 767px) {
  .fPasswordA .formFpassword .verifi .code {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); } }

.RePassword .formRpassword {
  color: #fff;
  margin: 0 0 80px 0; }
  .RePassword .formRpassword .lableTitle {
    -ms-flex-wrap: inherit;
    flex-wrap: inherit;
    white-space: pre; }
    .RePassword .formRpassword .lableTitle:before {
      content: '*';
      display: block;
      margin-right: 5px; }
  .RePassword .formRpassword .w100 .lableTitle {
    width: auto;
    padding-right: 40px; }
  .RePassword .formRpassword .list {
    background-color: #484848;
    margin: 1px; }
  .RePassword .formRpassword input {
    color: #fff;
    background-color: rgba(0, 0, 0, 0);
    width: 100%; }

.chAccount.open .pageAbox.showUp .mocaTitleSec .title, .chPassword.open .pageAbox.showUp .mocaTitleSec .title {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: opacity 1.2s ease, -webkit-transform 1.2s ease;
  transition: opacity 1.2s ease, -webkit-transform 1.2s ease;
  -o-transition: opacity 1.2s ease, transform 1.2s ease;
  transition: opacity 1.2s ease, transform 1.2s ease;
  transition: opacity 1.2s ease, transform 1.2s ease, -webkit-transform 1.2s ease; }

.chAccount.open .pageAbox.showUp .mocaTitleSec .subTitle, .chPassword.open .pageAbox.showUp .mocaTitleSec .subTitle {
  opacity: 1;
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition: opacity 1.2s ease .2s, -webkit-transform 1.2s ease .2s;
  transition: opacity 1.2s ease .2s, -webkit-transform 1.2s ease .2s;
  -o-transition: opacity 1.2s ease .2s, transform 1.2s ease .2s;
  transition: opacity 1.2s ease .2s, transform 1.2s ease .2s;
  transition: opacity 1.2s ease .2s, transform 1.2s ease .2s, -webkit-transform 1.2s ease .2s; }

.chAccount.open .pageAbox.showUp .mocaTitleSec .text, .chPassword.open .pageAbox.showUp .mocaTitleSec .text {
  opacity: 1;
  -webkit-transition: opacity 1.2s ease .4s;
  -o-transition: opacity 1.2s ease .4s;
  transition: opacity 1.2s ease .4s; }

.chAccount.open .pageAbox.showUp .memberForm, .chPassword.open .pageAbox.showUp .memberForm {
  opacity: 1;
  -webkit-transition: opacity 1.2s ease .6s;
  -o-transition: opacity 1.2s ease .6s;
  transition: opacity 1.2s ease .6s; }

.chAccount.open .pageAbox.showUp .ctrlArea, .chPassword.open .pageAbox.showUp .ctrlArea {
  opacity: 1;
  -webkit-transition: opacity 1.2s ease .8s;
  -o-transition: opacity 1.2s ease .8s;
  transition: opacity 1.2s ease .8s; }

.chAccount.open .pageBbox.showUp .mocaTitleSec .title, .chPassword.open .pageBbox.showUp .mocaTitleSec .title {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: opacity 1.2s ease, -webkit-transform 1.2s ease;
  transition: opacity 1.2s ease, -webkit-transform 1.2s ease;
  -o-transition: opacity 1.2s ease, transform 1.2s ease;
  transition: opacity 1.2s ease, transform 1.2s ease;
  transition: opacity 1.2s ease, transform 1.2s ease, -webkit-transform 1.2s ease; }

.chAccount.open .pageBbox.showUp .mocaTitleSec .subTitle, .chPassword.open .pageBbox.showUp .mocaTitleSec .subTitle {
  opacity: 1;
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition: opacity 1.2s ease .2s, -webkit-transform 1.2s ease .2s;
  transition: opacity 1.2s ease .2s, -webkit-transform 1.2s ease .2s;
  -o-transition: opacity 1.2s ease .2s, transform 1.2s ease .2s;
  transition: opacity 1.2s ease .2s, transform 1.2s ease .2s;
  transition: opacity 1.2s ease .2s, transform 1.2s ease .2s, -webkit-transform 1.2s ease .2s; }

.chAccount.open .pageBbox.showUp .mocaTitleSec .text, .chPassword.open .pageBbox.showUp .mocaTitleSec .text {
  opacity: 1;
  -webkit-transition: opacity 1.2s ease .4s;
  -o-transition: opacity 1.2s ease .4s;
  transition: opacity 1.2s ease .4s; }

.chAccount.open .pageBbox.showUp .ctrlArea, .chPassword.open .pageBbox.showUp .ctrlArea {
  opacity: 1;
  -webkit-transition: opacity 1.2s ease .8s;
  -o-transition: opacity 1.2s ease .8s;
  transition: opacity 1.2s ease .8s; }

.chAccount .chrisCloseBtn, .chPassword .chrisCloseBtn {
  color: #fff;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: absolute;
  right: 60px;
  top: 60px; }

.chAccount .ctrlArea, .chPassword .ctrlArea {
  opacity: 0; }

.chAccount .mocaTitleSec, .chPassword .mocaTitleSec {
  color: #fff; }
  .chAccount .mocaTitleSec .text, .chPassword .mocaTitleSec .text {
    max-width: 465px;
    margin: 0 auto;
    opacity: 0; }

.chAccount .memberForm, .chPassword .memberForm {
  color: #fff;
  margin: 0 0 70px 0;
  opacity: 0; }

.chAccount .list, .chPassword .list {
  background-color: #484848;
  margin: 1px; }
  .chAccount .list.break, .chPassword .list.break {
    margin: 1px 1px 20px 1px; }

.chAccount input, .chPassword input {
  color: #fff;
  background-color: rgba(0, 0, 0, 0);
  width: 100%; }

.chAccount .w100 .lableTitle, .chPassword .w100 .lableTitle {
  width: auto; }

.chAccount .lableTitle, .chPassword .lableTitle {
  -ms-flex-wrap: inherit;
  flex-wrap: inherit;
  white-space: pre;
  width: auto;
  padding-right: 40px; }
  .chAccount .lableTitle:before, .chPassword .lableTitle:before {
    content: '*';
    display: block;
    margin-right: 5px; }

.scarlett {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  z-index: -1; }
  .scarlett.open {
    visibility: visible;
    opacity: 1;
    z-index: 2; }
    .scarlett.open .bg {
      -webkit-transform: translateY(0%);
      -ms-transform: translateY(0%);
      transform: translateY(0%);
      -webkit-transition: -webkit-transform .5s ease;
      transition: -webkit-transform .5s ease;
      -o-transition: transform .5s ease;
      transition: transform .5s ease;
      transition: transform .5s ease, -webkit-transform .5s ease; }
    .scarlett.open .btnStyle {
      opacity: 1;
      -webkit-transition: opacity 1s ease .6s;
      -o-transition: opacity 1s ease .6s;
      transition: opacity 1s ease .6s; }
    .scarlett.open .container {
      opacity: 1;
      -webkit-transition: opacity 1s ease .3s;
      -o-transition: opacity 1s ease .3s;
      transition: opacity 1s ease .3s; }
  .scarlett.close .bg {
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: -webkit-transform .5s ease .4s;
    transition: -webkit-transform .5s ease .4s;
    -o-transition: transform .5s ease .4s;
    transition: transform .5s ease .4s;
    transition: transform .5s ease .4s, -webkit-transform .5s ease .4s; }
  .scarlett.close .btnStyle {
    opacity: 0;
    -webkit-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease; }
  .scarlett.close .container {
    opacity: 0;
    -webkit-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease; }
  .scarlett .bg {
    background-color: rgba(232, 52, 52, 0.6);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%); }
  .scarlett .btnStyle {
    width: 100%;
    max-width: 860px;
    opacity: 0; }
    .scarlett .btnStyle .btn {
      height: 50px;
      padding: 0 20px;
      text-align: center;
      line-height: 1.4; }
    .scarlett .btnStyle .styleG {
      color: #fff;
      background-color: #b2b2b2;
      border-color: #b2b2b2; }
  .scarlett .container {
    background-color: #fff;
    width: 100%;
    position: relative;
    opacity: 0; }
    .scarlett .container .mCSB_scrollTools {
      width: 2px; }
    .scarlett .container .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
      background-color: #5a5a5a; }
    .scarlett .container .closeBtnBox {
      color: #000;
      cursor: pointer;
      border: solid 2px #000;
      border-radius: 50%;
      width: 37px;
      height: 37px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      position: absolute;
      right: 26px;
      top: 26px; }
      .scarlett .container .closeBtnBox .icon {
        display: block;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        font-weight: 900; }
  .scarlett.successHideBox .mocaTitleSec, .scarlett.timeoutHideBox .mocaTitleSec {
    color: #000;
    padding: 0;
    font-weight: 900;
    font-family: 'FuturaPT-Heavy','微軟正黑體'; }
    .scarlett.successHideBox .mocaTitleSec .title, .scarlett.timeoutHideBox .mocaTitleSec .title {
      font-size: 36px;
      font-size: 2.25rem;
      margin: 0; }
    .scarlett.successHideBox .mocaTitleSec .subTitle, .scarlett.timeoutHideBox .mocaTitleSec .subTitle {
      font-size: 24px;
      font-size: 1.5rem;
      margin: 0 0 30px 0; }
    .scarlett.successHideBox .mocaTitleSec .line, .scarlett.timeoutHideBox .mocaTitleSec .line {
      background-color: #e5e5e5;
      width: 100%;
      height: 6px;
      display: block; }
  .scarlett.successHideBox .btnStyle, .scarlett.timeoutHideBox .btnStyle {
    max-width: 615px; }
    .scarlett.successHideBox .btnStyle .btn, .scarlett.timeoutHideBox .btnStyle .btn {
      width: 100%; }
  .scarlett.successHideBox .container, .scarlett.timeoutHideBox .container {
    max-width: 615px;
    padding: 100px 70px; }
  .scarlett.successHideBox .content .text, .scarlett.timeoutHideBox .content .text {
    font-size: 16px;
    font-size: 1rem;
    text-align: center;
    line-height: 2; }
  @media (max-width: 767px) {
    .scarlett .container {
      height: calc(100vh - 50px);
      padding: 0 5%; }
    .scarlett.successHideBox .container, .scarlett.timeoutHideBox .container {
      padding: 60px 20px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; } }
  @media (max-width: 767px) and (max-height: 500px) {
    .scarlett .container .closeBtnBox {
      top: 10px; } }

.serviceRuleHideBox .mocaTitleSec {
  color: #000;
  padding: 65px 0 0 0;
  font-weight: 900;
  font-family: 'FuturaPT-Heavy','微軟正黑體'; }
  .serviceRuleHideBox .mocaTitleSec .title {
    font-size: 30px;
    font-size: 1.875rem;
    margin: 0 0 10px 0; }
  .serviceRuleHideBox .mocaTitleSec .subTitle {
    font-size: 20px;
    font-size: 1.25rem;
    margin: 0 0 15px 0; }
  .serviceRuleHideBox .mocaTitleSec .line {
    background-color: #000;
    width: 100%;
    height: 4px;
    display: block; }

.serviceRuleHideBox .container {
  max-width: 860px;
  padding: 0 95px; }

.serviceRuleHideBox .content {
  height: 50vh;
  margin: 0 0 65px 0; }
  .serviceRuleHideBox .content .list {
    margin: 0 0 50px 0;
    padding: 0 25px; }
  .serviceRuleHideBox .content .title {
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: 900;
    margin: 0 0 35px 0; }
  .serviceRuleHideBox .content .text {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 2; }

@media (max-width: 767px) {
  .serviceRuleHideBox .content {
    height: 100%;
    max-height: calc(100% - 300px); }
    .serviceRuleHideBox .content .list {
      padding: 0 10px; } }

@media (max-width: 767px) and (max-height: 500px) {
  .serviceRuleHideBox .mocaTitleSec {
    margin: 0 0 20px 0;
    padding: 40px 0 0 0; }
  .serviceRuleHideBox .content {
    max-height: calc(100% - 190px);
    margin: 0 0 30px 0; } }

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