/* Break Set */
.br1075 {
  display: block !important;
}

.view1075 {
  display: none !important;
}

@media only screen and (max-width: 1075px) {
  .br1075 {
    display: none !important;
  }
  .view1075 {
    display: block !important;
  }
}

.br1024 {
  display: block !important;
}

.view1024 {
  display: none !important;
}

@media only screen and (max-width: 1024px) {
  .br1024 {
    display: none !important;
  }
  .view1024 {
    display: block !important;
  }
}

.br991 {
  display: block !important;
}

.view991 {
  display: none !important;
}

@media only screen and (max-width: 991px) {
  .br991 {
    display: none !important;
  }
  .view991 {
    display: block !important;
  }
}

.br960 {
  display: block !important;
}

.view960 {
  display: none !important;
}

@media only screen and (max-width: 960px) {
  .br960 {
    display: none !important;
  }
  .view960 {
    display: block !important;
  }
}

.br892 {
  display: block !important;
}

.view892 {
  display: none !important;
}

@media only screen and (max-width: 892px) {
  .br892 {
    display: none !important;
  }
  .view892 {
    display: block !important;
  }
}

.br860 {
  display: block !important;
}

.view860 {
  display: none !important;
}

@media only screen and (max-width: 860px) {
  .br860 {
    display: none !important;
  }
  .view860 {
    display: block !important;
  }
}

.br800 {
  display: block !important;
}

.view800 {
  display: none !important;
}

@media only screen and (max-width: 800px) {
  .br800 {
    display: none !important;
  }
  .view800 {
    display: block !important;
  }
}

.br768 {
  display: block !important;
}

.view768 {
  display: none !important;
}

@media only screen and (max-width: 768px) {
  .br768 {
    display: none !important;
  }
  .view768 {
    display: block !important;
  }
}

.br767 {
  display: block !important;
}

.view767 {
  display: none !important;
}

@media only screen and (max-width: 767px) {
  .br767 {
    display: none !important;
  }
  .view767 {
    display: block !important;
  }
}

.br700 {
  display: block !important;
}

.view700 {
  display: none !important;
}

@media only screen and (max-width: 700px) {
  .br700 {
    display: none !important;
  }
  .view700 {
    display: block !important;
  }
}

.br650 {
  display: block !important;
}

.view650 {
  display: none !important;
}

@media only screen and (max-width: 650px) {
  .br650 {
    display: none !important;
  }
  .view650 {
    display: block !important;
  }
}

.br600 {
  display: block !important;
}

.view600 {
  display: none !important;
}

@media only screen and (max-width: 600px) {
  .br600 {
    display: none !important;
  }
  .view600 {
    display: block !important;
  }
}

.br550 {
  display: block !important;
}

.view550 {
  display: none !important;
}

@media only screen and (max-width: 550px) {
  .br550 {
    display: none !important;
  }
  .view550 {
    display: block !important;
  }
}

.br520 {
  display: block !important;
}

.view520 {
  display: none !important;
}

@media only screen and (max-width: 520px) {
  .br520 {
    display: none !important;
  }
  .view520 {
    display: block !important;
  }
}

.br480 {
  display: block !important;
}

.view480 {
  display: none !important;
}

@media only screen and (max-width: 480px) {
  .br480 {
    display: none !important;
  }
  .view480 {
    display: block !important;
  }
}

.br450 {
  display: block !important;
}

.view450 {
  display: none !important;
}

@media only screen and (max-width: 450px) {
  .br450 {
    display: none !important;
  }
  .view450 {
    display: block !important;
  }
}

.br425 {
  display: block !important;
}

.view425 {
  display: none !important;
}

@media only screen and (max-width: 425px) {
  .br425 {
    display: none !important;
  }
  .view425 {
    display: block !important;
  }
}

.br375 {
  display: block !important;
}

.view375 {
  display: none !important;
}

@media only screen and (max-width: 375px) {
  .br375 {
    display: none !important;
  }
  .view375 {
    display: block !important;
  }
}

.br340 {
  display: block !important;
}

.view340 {
  display: none !important;
}

@media only screen and (max-width: 340px) {
  .br340 {
    display: none !important;
  }
  .view340 {
    display: block !important;
  }
}

.featherlight-content .l-popup {
  display: table;
}

.featherlight .featherlight-content {
  padding: 0;
  border-bottom: 0;
}

@media (max-width: 767px) {
  .featherlight .featherlight-close-icon {
    color: #ffffff;
  }
}

.featherlight {
  background: rgba(0, 0, 0, 0.8) !important;
}

.fancybox-slide--html .fancybox-close-small {
  z-index: 10;
}

.fancybox-button svg path {
  fill: white;
}

.l-popup {
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}

.l-popup__text-wrapper {
  position: absolute;
  width: 100%;
  top: 0%;
  right: 0;
}

@media (max-width: 767px) {
  .l-popup__text-wrapper {
    width: 100%;
    -webkit-transform: none;
            transform: none;
  }
}

.l-popup__title img {
  width: 100%;
}

@media (max-width: 991px) {
  .l-popup__title {
    font-size: 4.637vw;
  }
}

@media (max-width: 767px) {
  .l-popup__title {
    font-size: 9vw;
  }
}

.l-popup__image {
  display: block;
}

.l-popup__image img {
  max-width: 100%;
  width: 100%;
}

.l-popup a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.l-popup .flip-clock {
  text-align: center;
  -webkit-perspective: 400px;
          perspective: 400px;
  margin: 0px auto 20px;
}

@media (max-width: 767px) {
  .l-popup .flip-clock {
    margin: 2% auto;
  }
}

.l-popup .flip-clock__piece {
  display: inline-block;
  margin: 0 10px;
}

@media (max-width: 767px) {
  .l-popup .flip-clock__piece {
    margin: 0 5px;
  }
}

.l-popup .flip-clock__slot {
  font-size: 20px;
  font-family: 'Noto Serif TC',"Gotham-Bold" !important;
  font-weight: bold;
  color: white;
  text-shadow: 0 0 5px black;
}

@media (max-width: 767px) {
  .l-popup .flip-clock__slot {
    font-size: 4vw;
  }
}

.l-popup .card {
  display: block;
  position: relative;
  padding-bottom: 0.7em;
  font-family: "MillerDisplayLancome-Light", "GaramondPremierProSmbd", "Noto Serif TC", "DFLiSongHK-W5", sans-serif !important;
  font-size: 60px;
  line-height: 0.95;
  margin-bottom: 10%;
  -webkit-box-shadow: 0 0 10px black;
          box-shadow: 0 0 10px black;
}

.l-popup .card:after {
  position: absolute;
  display: block;
  content: "";
  top: 100%;
  width: 100%;
  height: 6px;
  background: url(../image/Flip-Clock-down.jpg) no-repeat;
  background-size: 100% 100%;
}

@media (max-width: 991px) {
  .l-popup .card {
    font-size: 5.5vw;
  }
}

@media (max-width: 767px) {
  .l-popup .card {
    font-size: 10vw;
  }
  .l-popup .card:after {
    background-size: 100% 100%;
  }
}

.l-popup .card__top,
.l-popup .card__bottom,
.l-popup .card__back::before,
.l-popup .card__back::after {
  display: block;
  height: 0.7em;
  color: white;
  background: url(../image/Flip-Clock-top.jpg) no-repeat;
  background-size: 100% 100%;
  line-height: 1.4;
  border-radius: 0em 0em 0 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  width: 1.5em;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  background: black;
}

@media (max-width: 767px) {
  .l-popup .card__top,
  .l-popup .card__bottom,
  .l-popup .card__back::before,
  .l-popup .card__back::after {
    color: white;
    background-size: 100% 100%;
  }
}

.l-popup .card__bottom {
  color: white;
  position: absolute;
  top: 50%;
  left: 0;
  background: url(../image/Flip-Clock-bottom.jpg) no-repeat;
  background-size: 100% 100%;
  border-radius: 0 0 0em 0em;
  pointer-events: none;
  overflow: hidden;
}

@media (max-width: 767px) {
  .l-popup .card__bottom {
    color: white;
    background-size: 100% 100%;
  }
}

.l-popup .card__bottom::after {
  display: block;
  margin-top: -0.7em;
}

.l-popup .card__back::before,
.l-popup .card__bottom::after {
  content: attr(data-value);
}

.l-popup .card__back {
  position: absolute;
  top: 0;
  height: 100%;
  left: 0%;
  pointer-events: none;
}

.l-popup .card__back::before {
  position: relative;
  z-index: -1;
  overflow: hidden;
}

.l-popup .flip .card__back::before {
  -webkit-animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
          animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
}

.l-popup .flip .card__back .card__bottom {
  -webkit-transform-origin: center top;
          transform-origin: center top;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
          animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
}

@-webkit-keyframes flipTop {
  0% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    z-index: 2;
  }
  0%, 99% {
    opacity: 0.99;
  }
  100% {
    -webkit-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
    opacity: 0;
  }
}

@keyframes flipTop {
  0% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    z-index: 2;
  }
  0%, 99% {
    opacity: 0.99;
  }
  100% {
    -webkit-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
    opacity: 0;
  }
}

@-webkit-keyframes flipBottom {
  0%, 50% {
    z-index: -1;
    -webkit-transform: rotateX(90deg);
            transform: rotateX(90deg);
    opacity: 0;
  }
  51% {
    opacity: 0.99;
  }
  100% {
    opacity: 0.99;
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    z-index: 5;
  }
}

@keyframes flipBottom {
  0%, 50% {
    z-index: -1;
    -webkit-transform: rotateX(90deg);
            transform: rotateX(90deg);
    opacity: 0;
  }
  51% {
    opacity: 0.99;
  }
  100% {
    opacity: 0.99;
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    z-index: 5;
  }
}

.en .l-popup__title {
  font-size: 44px;
  line-height: 1.2;
}

@media (max-width: 991px) {
  .en .l-popup__title {
    font-size: 4vw;
  }
}

@media (max-width: 767px) {
  .en .l-popup__title {
    font-size: 7vw;
  }
  .en .l-popup__title span {
    font-size: 120%;
  }
}

.en .flip-clock__slot {
  font-size: 16px;
}

@media (max-width: 991px) {
  .en .flip-clock__slot {
    font-size: 1.5vw;
  }
}

@media (max-width: 767px) {
  .en .flip-clock__slot {
    font-size: 3vw;
  }
}

.fancybox-content {
  padding: 0;
  margin: 0;
  font-size: 0;
  overflow: hidden;
}

.fancybox-inner {
  min-width: 320px;
}

.fancybox-button {
  color: #000000;
}

.countdown__container {
  position: absolute;
  left: 3.5%;
  top: 48%;
}

@media (max-width: 767px) {
  .countdown__container {
    top: 23%;
    left: 0;
    width: 100%;
  }
}
/*# sourceMappingURL=popup.css.map */