@charset "UTF-8";
/*750rem*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;400;500;600&display=swap");
:root {
  --remBasicSize: 16px;
}

* {
  box-sizing: border-box;
}

html,
body {
  font-family: "Noto Serif TC", Helvetica, Arial, "黑體-繁", "Heiti TC", "儷黑", "LiHei", "微軟正黑體", "Microsoft JhengHei", sans-serif;
  font-size: calc(1 * var(--remBasicSize));
  width: 100%;
  height: 100%;
  background-color: #f0ede5;
}

.wrapper {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.game-container {
  width: 100%;
  max-width: 100%;
  text-align: center;
}
.game-container .gm-step {
  display: none;
}
.game-container .gm-step.active {
  display: block;
}
.game-container .gm-toggle {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.game-container .gm-toggle .filter {
  position: relative;
  width: calc(15.375 * var(--remBasicSize));
  height: calc(20.0625 * var(--remBasicSize));
}
.game-container .gm-toggle .filter.selected::after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background: url(../images/game/pd/active.png) center no-repeat;
  background-size: contain;
}
.game-container .gm-toggle img {
  cursor: pointer;
  width: calc(15.375 * var(--remBasicSize));
  height: calc(20.0625 * var(--remBasicSize));
}
.game-container .gm-toggle-target, .game-container .gm-target-container {
  width: calc(35.5 * var(--remBasicSize));
  height: calc(63.125 * var(--remBasicSize));
}
.game-container .gm-target.target2, .game-container .gm-target.target1 {
  width: calc(24.375 * var(--remBasicSize));
  height: calc(23.125 * var(--remBasicSize));
  background-color: #000;
}
.game-container .gm-target-container {
  position: relative;
  margin: 0 auto;
}
.game-container .gm-toggle-target {
  overflow: hidden;
  top: 0;
  left: 0;
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}
.game-container .gm-toggle-target img {
  display: block;
  height: 100%;
}
.game-container .gm-target {
  position: absolute;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;
  transition: border-color 0.3s;
  box-sizing: border-box;
}
.game-container .gm-target.active {
  box-shadow: 0 0 0 calc(0.25 * var(--remBasicSize)) #000;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.game-container .gm-target img {
  display: block;
  transform-origin: top left;
}
.game-container .gm-target.target1 {
  top: calc(10.9375 * var(--remBasicSize));
  left: calc(4.4375 * var(--remBasicSize));
}
.game-container .gm-target.target2 {
  top: calc(35.9375 * var(--remBasicSize));
  left: calc(4.4375 * var(--remBasicSize));
}
.game-container .gm-upload-btn {
  position: absolute;
  background-color: #fff;
}
.game-container .gm-target--empty + .gm-upload-btn::before {
  content: "按我上傳圖片";
}
.game-container .gm-target--uploaded + .gm-upload-btn {
  width: calc(6.25 * var(--remBasicSize));
  height: calc(6.25 * var(--remBasicSize));
  border-radius: calc(3.125 * var(--remBasicSize));
  background-color: #333;
  color: white;
  font-size: calc(2 * var(--remBasicSize));
}
.game-container .gm-target--uploaded + .gm-upload-btn::before {
  content: "換圖";
}
.game-container .gm-target--uploaded + .gm-upload-btn.gm-upload-btn--1 {
  top: calc(15.625 * var(--remBasicSize));
  left: calc(25.875 * var(--remBasicSize));
}
.game-container .gm-target--uploaded + .gm-upload-btn.gm-upload-btn--2 {
  top: calc(38.75 * var(--remBasicSize));
  left: calc(25.875 * var(--remBasicSize));
}
.game-container .gm-upload {
  display: none;
}
.game-container .gm-zoom-slider {
  display: none;
  width: 100%;
  margin: calc(1.25 * var(--remBasicSize)) 0 calc(1.875 * var(--remBasicSize));
}
.game-container.image-uploaded .gm-zoom-slider {
  display: block;
  background-color: #333;
}
.game-container.before-result .gm-upload-btn {
  display: none;
}

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir=rtl] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/* Slider */
.slick-loading .slick-list {
  background: #fff url("./ajax-loader.gif") center center no-repeat;
}

/* Icons */
@font-face {
  font-family: "slick";
  src: url("./fonts/slick.eot");
  src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  z-index: 9;
  display: block;
  height: calc(7.1875 * var(--remBasicSize));
  width: calc(3.625 * var(--remBasicSize));
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: calc(40.625 * var(--remBasicSize));
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none;
}
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  opacity: 0.6;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}
.slick-prev:before,
.slick-next:before {
  font-family: "slick";
  font-size: 20px;
  line-height: 1;
  color: white;
  opacity: 0.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
  width: calc(3.625 * var(--remBasicSize));
  height: calc(7.1875 * var(--remBasicSize));
  background: url(../images/arrow_left.png) no-repeat center;
  background-size: 100%;
  display: block;
  left: calc(1.625 * var(--remBasicSize));
}

.slick-next {
  width: calc(3.625 * var(--remBasicSize));
  height: calc(7.1875 * var(--remBasicSize));
  background: url(../images/arrow_right.png) no-repeat center;
  background-size: 100%;
  display: block;
  right: calc(1.625 * var(--remBasicSize));
}

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  position: absolute;
  bottom: -25px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  border: 0;
  background: transparent;
  display: block;
  height: 20px;
  width: 20px;
  outline: none;
  line-height: 0px;
  font-size: 0px;
  color: transparent;
  padding: 5px;
  cursor: pointer;
}
.slick-dots li button:hover, .slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
  opacity: 1;
}
.slick-dots li button:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "•";
  width: 20px;
  height: 20px;
  font-family: "slick";
  font-size: 6px;
  line-height: 20px;
  text-align: center;
  color: black;
  opacity: 0.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
  color: black;
  opacity: 0.75;
}

/* ----------------------------------------------------
initial html5 reset
---------------------------------------------------- */
html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, summary, time, video {
  border: 0;
  outline: 0;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

body {
  line-height: 1;
}

article, aside, dialog, figure, footer, header, hgroup, nav, section, blockquote {
  display: block;
}

nav ul {
  list-style: none;
}

ol {
  list-style: none;
}

ul {
  list-style: none;
}

ul ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: none;
}

ins {
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

mark {
  background: none;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

input[type=submit], input[type=button], button {
  margin: 0;
  padding: 0;
  border: none;
  vertical-align: middle;
}

input, select, a img {
  vertical-align: middle;
}

/*-------------------------

         a

-------------------------*/
a,
button {
  cursor: pointer;
  text-decoration: none;
  transition: all ease-in-out 0.2s;
}

a:focus, a:active,
button:focus, button:active {
  outline: none;
  text-decoration: none;
}

section {
  overflow: hidden;
}

.container {
  position: relative;
  z-index: 4;
  margin: 0 auto;
  width: calc(85.375 * var(--remBasicSize));
  min-width: calc(85.375 * var(--remBasicSize));
}
@media screen and (max-width: 750px) {
  .container {
    width: 100%;
    min-width: 100%;
  }
}

.hr {
  width: calc(4.375 * var(--remBasicSize));
  height: calc(0.0625 * var(--remBasicSize));
  background: #666666;
  margin: calc(1.25 * var(--remBasicSize)) auto calc(1.375 * var(--remBasicSize));
}

.title {
  position: relative;
  z-index: 3;
  margin: 0 auto calc(2.25 * var(--remBasicSize));
  text-align: center;
}
.title h2 {
  position: relative;
  z-index: 2;
  font-size: calc(3.125 * var(--remBasicSize));
  letter-spacing: 0.05em;
  font-weight: 500;
  margin-bottom: calc(1.75 * var(--remBasicSize));
  text-align: center;
}
.title h2::before {
  position: relative;
  display: block;
  content: "";
  width: 100%;
  height: calc(1.25 * var(--remBasicSize));
  background: url(../images/de/shopping-more-worry-less.png) no-repeat center/contain;
  top: calc(-1 * var(--remBasicSize));
}
.title .de_h2_ellipse {
  position: absolute;
  z-index: 2;
  top: calc(0.625 * var(--remBasicSize));
  width: 100%;
  height: calc(4.9375 * var(--remBasicSize));
  background: url(../images/de/h2_ellipse.png) no-repeat center/contain;
}
.title > span {
  position: relative;
  z-index: 2;
  color: #000;
  font-size: calc(1.75 * var(--remBasicSize));
  line-height: 1.5em;
  font-weight: 400;
  letter-spacing: 0.05em;
}

/*-------------------------

           kv

-------------------------*/
#kv {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  /* 輪播區域樣式 */
}
#kv .title {
  position: absolute;
  width: 44.8076923077vw;
  height: 32.3406862745vh;
  background: url(../images/kv/kv_title.png) no-repeat center/contain;
}
@media screen and (max-width: 750px) {
  #kv .title {
    width: 90vw;
    height: 46.2009803922vh;
    filter: drop-shadow(0 0 calc(1 * var(--remBasicSize)) rgba(67, 62, 58, 0.6039215686));
  }
}
#kv .slider-container {
  position: fixed;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  /* 背景圖片 */
}
@media screen and (max-width: 750px) {
  #kv .slider-container {
    flex-direction: column; /* 改為上下排列 */
  }
}
#kv .slider-container .left-image, #kv .slider-container .right-image {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 1s ease-in-out;
  opacity: 0;
}
@media screen and (max-width: 750px) {
  #kv .slider-container .left-image, #kv .slider-container .right-image {
    width: 100%;
    height: 50vh;
  }
}
#kv .slider-container .left-image {
  left: 0; /* 左邊圖片在左側 */
}
#kv .slider-container .right-image {
  right: 0; /* 右邊圖片在右側 */
}
@media screen and (max-width: 750px) {
  #kv .slider-container .right-image {
    top: 50vh;
  }
}
#kv .slider-container .active-left, #kv .slider-container .active-right { /* 圖片淡入效果 */
  opacity: 1;
}
#kv .slider-container .left-image1 {
  background-image: url(../images/kv/pic_1-a.jpg);
}
#kv .slider-container .right-image1 {
  background-image: url(../images/kv/pic_1-b.jpg);
}
#kv .slider-container .left-image2 {
  background-image: url(../images/kv/pic_2-a.jpg);
}
#kv .slider-container .right-image2 {
  background-image: url(../images/kv/pic_2-b.jpg);
}
#kv .slider-container .left-image3 {
  background-image: url(../images/kv/pic_3-a.jpg);
}
#kv .slider-container .right-image3 {
  background-image: url(../images/kv/pic_3-b.jpg);
}
#kv .slider-container .left-image4 {
  background-image: url(../images/kv/pic_4-a.jpg);
}
#kv .slider-container .right-image4 {
  background-image: url(../images/kv/pic_4-b.jpg);
}
#kv .slider-container .left-image5 {
  background-image: url(../images/kv/pic_5-a.jpg);
}
#kv .slider-container .right-image5 {
  background-image: url(../images/kv/pic_5-b.jpg);
}

/*-------------------------

          前言

-------------------------*/
.infobg {
  position: relative;
  z-index: 5;
  width: 100%;
  height: calc(6.25 * var(--remBasicSize));
  background: url(../images/info/bg_top.png) no-repeat center top/cover;
}

#info {
  position: relative;
  z-index: 5;
  width: 100%;
  min-height: calc(50 * var(--remBasicSize));
  background-color: #f0ede5;
}
#info .container {
  text-align: center;
  padding: calc(6.25 * var(--remBasicSize)) 0 0 0;
}
@media screen and (max-width: 750px) {
  #info .container {
    padding: calc(6.25 * var(--remBasicSize)) 0;
  }
}
#info .container .content {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  padding-right: calc(6.25 * var(--remBasicSize));
  padding-bottom: calc(3.125 * var(--remBasicSize));
}
@media screen and (max-width: 750px) {
  #info .container .content {
    padding-right: calc(0 * var(--remBasicSize));
    padding-bottom: calc(5 * var(--remBasicSize));
  }
}
#info .container .content .left {
  position: relative;
  width: calc(31.25 * var(--remBasicSize));
  height: calc(31.875 * var(--remBasicSize));
  left: calc(3.75 * var(--remBasicSize));
}
@media screen and (max-width: 750px) {
  #info .container .content .left {
    left: calc(0 * var(--remBasicSize));
  }
}
#info .container .content .left .pic1, #info .container .content .left .pic2 {
  position: absolute;
  display: block;
}
#info .container .content .left .pic1 {
  z-index: 2;
  left: 0;
  bottom: 0;
  width: calc(23.4375 * var(--remBasicSize));
  height: calc(25.4375 * var(--remBasicSize));
}
#info .container .content .left .pic2 {
  top: 0;
  right: 0;
  width: calc(20.125 * var(--remBasicSize));
  height: calc(22.625 * var(--remBasicSize));
}
#info .container .content .right {
  z-index: 2;
  width: calc(46.875 * var(--remBasicSize));
}
#info .container .content .right .txt {
  display: block;
  width: calc(49.4375 * var(--remBasicSize));
  height: calc(11.5625 * var(--remBasicSize));
}
#info .container .content .right p {
  color: #000;
  font-size: calc(1.625 * var(--remBasicSize));
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2.2em;
}
#info .container .welcome {
  position: relative;
  width: 100%;
  height: calc(5 * var(--remBasicSize));
  color: #ce7082;
  font-size: calc(2.375 * var(--remBasicSize));
  font-weight: 600;
  letter-spacing: 0.025em;
  line-height: 2em;
  display: flex;
  justify-content: center;
}
#info .container .welcome::before, #info .container .welcome::after {
  position: absolute;
  display: block;
  content: "";
  width: calc(36.8125 * var(--remBasicSize));
  height: calc(0.0625 * var(--remBasicSize));
  background-color: #bdb9b2;
}
#info .container .welcome::before {
  top: 0;
}
#info .container .welcome::after {
  bottom: 0;
}

/*-------------------------

          editor

-------------------------*/
#editor {
  position: relative;
  z-index: 5;
  width: 100%;
  min-height: calc(54.375 * var(--remBasicSize));
  background-color: #f0ede5;
  padding-top: calc(6.25 * var(--remBasicSize));
}
@media screen and (max-width: 750px) {
  #editor {
    min-height: calc(56.25 * var(--remBasicSize));
  }
}
#editor .title {
  width: calc(46.875 * var(--remBasicSize));
}
#editor .title .night_lights {
  position: absolute;
  top: 0;
  left: 0;
}
#editor .title .night_lights::after {
  position: absolute;
  display: block;
  content: "";
  top: 0;
  left: 0;
  width: calc(46.875 * var(--remBasicSize));
  height: calc(10.1875 * var(--remBasicSize));
  background: url(../images/de/night_lights1.png) no-repeat center/contain;
  animation: 3s night_lights infinite ease-in-out;
}
@keyframes night_lights {
  0% {
    background: url(../images/de/night_lights1.png) no-repeat center/contain;
  }
  50% {
    background: url(../images/de/night_lights2.png) no-repeat center/contain;
  }
}
#editor .content {
  position: relative;
  z-index: 3;
  padding-top: calc(1.875 * var(--remBasicSize));
}
#editor .content .slides.center {
  position: relative;
  margin: 0 auto;
  width: calc(85.375 * var(--remBasicSize));
  height: calc(27.625 * var(--remBasicSize));
  overflow: hidden;
}
@media screen and (max-width: 750px) {
  #editor .content .slides.center {
    width: calc(46.875 * var(--remBasicSize));
    transform: scale(1.2);
  }
}
#editor .content .slides.center .slick-center.slider_wrap {
  width: calc(34.375 * var(--remBasicSize));
  transform: scale(1);
  opacity: 1;
}
@media screen and (max-width: 750px) {
  #editor .content .slides.center .slick-center.slider_wrap {
    transform: scale(1);
  }
}
#editor .content .slides.center .slider_wrap {
  width: calc(34.375 * var(--remBasicSize));
  position: relative;
  display: block;
  transform: scale(0.7);
  transition: all 1000ms ease;
  opacity: 0.5;
}
@media screen and (max-width: 750px) {
  #editor .content .slides.center .slider_wrap {
    transform: scale(1);
    width: calc(46.875 * var(--remBasicSize));
  }
}
#editor .content .slides.center .slider_wrap .qu {
  position: relative;
  left: calc(-2.125 * var(--remBasicSize));
  width: calc(34.375 * var(--remBasicSize));
  min-height: calc(5.625 * var(--remBasicSize));
  background-color: #d89ea9;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: calc(3.125 * var(--remBasicSize));
  text-align: center;
  padding: 0 calc(0.375 * var(--remBasicSize));
}
@media screen and (max-width: 750px) {
  #editor .content .slides.center .slider_wrap .qu {
    margin: 0 auto;
    left: 0;
  }
}
#editor .content .slides.center .slider_wrap .qu span {
  color: #fff;
  font-size: calc(1.8125 * var(--remBasicSize));
  font-weight: 600;
  line-height: 1.34em;
}
#editor .content .slides.center .slider_wrap .an {
  width: calc(30 * var(--remBasicSize));
  min-height: calc(18.75 * var(--remBasicSize));
  margin: 0 auto;
  background-color: #fff;
  border-radius: 0 0 calc(1.25 * var(--remBasicSize)) calc(1.25 * var(--remBasicSize));
  display: flex;
  justify-content: center;
}
#editor .content .slides.center .slider_wrap .an .left {
  position: relative;
  width: calc(13.9375 * var(--remBasicSize));
  height: calc(21.1875 * var(--remBasicSize));
}
#editor .content .slides.center .slider_wrap .an .left img {
  position: absolute;
  display: block;
  width: calc(13.9375 * var(--remBasicSize));
  height: calc(21.1875 * var(--remBasicSize));
  top: 0;
  left: calc(-1.875 * var(--remBasicSize));
}
#editor .content .slides.center .slider_wrap .an .left img.pic6 {
  width: calc(17.5 * var(--remBasicSize));
  left: calc(-5 * var(--remBasicSize));
}
#editor .content .slides.center .slider_wrap .an .right {
  width: calc(18.75 * var(--remBasicSize));
  padding: calc(1.875 * var(--remBasicSize)) calc(1.25 * var(--remBasicSize)) 0 0;
}
#editor .content .slides.center .slider_wrap .an .right .txt_box {
  color: #000;
}
#editor .content .slides.center .slider_wrap .an .right .txt_box .name {
  font-size: calc(1.4375 * var(--remBasicSize));
  font-weight: 600;
  display: block;
  margin-bottom: calc(1 * var(--remBasicSize));
  line-height: 1.4em;
}
#editor .content .slides.center .slider_wrap .an .right .txt_box .name strong {
  font-size: calc(1.6875 * var(--remBasicSize));
  vertical-align: baseline;
  margin-left: calc(0.25 * var(--remBasicSize));
}
#editor .content .slides.center .slider_wrap .an .right .txt_box .name .strong {
  display: block;
}
#editor .content .slides.center .slider_wrap .an .right .txt_box .txt {
  display: block;
  font-size: calc(1.5 * var(--remBasicSize));
  font-weight: 400;
  line-height: 1.4em;
  letter-spacing: 0.05em;
  text-align: justify;
}
#editor .content .slides.center .slider_wrap .an .right .btn_box {
  display: flex;
  margin: calc(0.75 * var(--remBasicSize)) 0;
}
#editor .content .slides.center .slider_wrap .an .right .btn_box a {
  margin-right: calc(0.25 * var(--remBasicSize));
}
#editor .content .slides.center .slider_wrap .an .right .btn_box a.icon_ig {
  display: block;
  width: calc(2.875 * var(--remBasicSize));
  height: calc(2.875 * var(--remBasicSize));
  background: url(../images/editor/social_ig.png) no-repeat center/contain;
}
#editor .content .slides.center .slider_wrap .an .right .btn_box a.icon_ig:hover {
  background: url(../images/editor/social_ig_h.png) no-repeat center/contain;
}
#editor .content .slides.center .slider_wrap .an .right .btn_box a.icon_link {
  display: block;
  width: calc(2.875 * var(--remBasicSize));
  height: calc(2.875 * var(--remBasicSize));
  background: url(../images/editor/social_link.png) no-repeat center/contain;
}
#editor .content .slides.center .slider_wrap .an .right .btn_box a.icon_link:hover {
  background: url(../images/editor/social_link_h.png) no-repeat center/contain;
}
#editor .content .slides.center .slider_wrap .an .right .btn_box a.more {
  width: calc(6.1875 * var(--remBasicSize));
  height: calc(2.875 * var(--remBasicSize));
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #d89ea9;
  border-radius: calc(3.125 * var(--remBasicSize));
  color: #fff;
}
#editor .content .slides.center .slider_wrap .an .right .btn_box a.more span {
  display: block;
  width: calc(3.9375 * var(--remBasicSize));
  height: calc(0.9375 * var(--remBasicSize));
  background: url(../images/editor/more.png) no-repeat center/contain;
}
#editor .content .slides.center .slider_wrap .an .right .btn_box a.more:hover {
  background-color: #d6c7ba;
}
#editor .content .slides.center .slider_wrap img {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  width: calc(19.5 * var(--remBasicSize));
  height: calc(19.5 * var(--remBasicSize));
}
#editor .bg {
  position: absolute;
  top: calc(-11.25 * var(--remBasicSize));
  width: 100%;
  height: calc(31 * var(--remBasicSize));
  background: url(../images/de/everydayIsAGift.png) no-repeat center/cover;
}

/*-------------------------

          pd

-------------------------*/
#pd {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: calc(85.375 * var(--remBasicSize));
  height: calc(67.125 * var(--remBasicSize));
  margin: 0 auto;
  background: url(../images/pd/pd_bg.jpg) no-repeat center top/cover;
  padding-top: calc(13.75 * var(--remBasicSize));
}
@media screen and (max-width: 750px) {
  #pd {
    width: 100%;
    min-width: 100%;
  }
}
#pd .container {
  position: relative;
  z-index: 2;
}
#pd .container > .title {
  width: calc(46.875 * var(--remBasicSize));
  margin: 0 auto calc(1.25 * var(--remBasicSize));
}
#pd .container > .title .de_pic {
  position: absolute;
  top: calc(-5 * var(--remBasicSize));
  right: calc(1.25 * var(--remBasicSize));
  width: calc(13.25 * var(--remBasicSize));
  height: calc(11 * var(--remBasicSize));
  background: url(../images/pd/de_pic.png) no-repeat center/contain;
}
#pd .container .content {
  /* 基本樣式 */
  /* 視窗的樣式 */
}
@media screen and (max-width: 750px) {
  #pd .container .content {
    transform: scale(1.02);
  }
}
#pd .container .content .box {
  position: relative;
  width: calc(43.875 * var(--remBasicSize));
  margin: 0 auto;
}
#pd .container .content .tabs {
  position: relative;
  cursor: pointer;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  height: calc(17.5 * var(--remBasicSize));
}
#pd .container .content .tabs::before {
  position: absolute;
  z-index: 2;
  display: block;
  content: "";
  top: 0;
  left: 0;
  pointer-events: none;
  width: calc(43.875 * var(--remBasicSize));
  height: calc(17.5 * var(--remBasicSize));
  background: url(../images/pd/nav_de.png) no-repeat center/contain;
}
#pd .container .content .tabs .tab {
  width: calc(14.625 * var(--remBasicSize));
  height: calc(8.75 * var(--remBasicSize));
}
#pd .container .content .tabs .tab.active {
  filter: drop-shadow(0 0 calc(0.625 * var(--remBasicSize)) rgba(0, 0, 0, 0.1254901961));
}
#pd .container .content .tabs .tab.tab1 {
  background: url(../images/pd/nav/nav1.png) no-repeat center/contain;
}
#pd .container .content .tabs .tab.tab1.active {
  background: url(../images/pd/nav/nav1_h.png) no-repeat center/contain;
}
#pd .container .content .tabs .tab.tab2 {
  background: url(../images/pd/nav/nav2.png) no-repeat center/contain;
}
#pd .container .content .tabs .tab.tab2.active {
  background: url(../images/pd/nav/nav2_h.png) no-repeat center/contain;
}
#pd .container .content .tabs .tab.tab3 {
  background: url(../images/pd/nav/nav3.png) no-repeat center/contain;
}
#pd .container .content .tabs .tab.tab3.active {
  background: url(../images/pd/nav/nav3_h.png) no-repeat center/contain;
}
#pd .container .content .tabs .tab.tab4 {
  background: url(../images/pd/nav/nav4.png) no-repeat center/contain;
}
#pd .container .content .tabs .tab.tab4.active {
  background: url(../images/pd/nav/nav4_h.png) no-repeat center/contain;
}
#pd .container .content .tabs .tab.tab5 {
  background: url(../images/pd/nav/nav5.png) no-repeat center/contain;
}
#pd .container .content .tabs .tab.tab5.active {
  background: url(../images/pd/nav/nav5_h.png) no-repeat center/contain;
}
#pd .container .content .tabs .tab.tab6 {
  background: url(../images/pd/nav/nav6.png) no-repeat center/contain;
}
#pd .container .content .tabs .tab.tab6.active {
  background: url(../images/pd/nav/nav6_h.png) no-repeat center/contain;
}
#pd .container .content .content {
  display: none;
  width: calc(43.875 * var(--remBasicSize));
  height: calc(19.125 * var(--remBasicSize));
}
#pd .container .content .content.active {
  display: block;
}
#pd .container .content .content#content1 {
  position: relative;
  background: url(../images/pd/pic1.png) no-repeat center/contain;
}
#pd .container .content .content#content1 .product .m1 {
  top: calc(7.5 * var(--remBasicSize));
  left: calc(11.25 * var(--remBasicSize));
}
#pd .container .content .content#content1 .product .m2 {
  top: calc(2.1875 * var(--remBasicSize));
  left: calc(27.5 * var(--remBasicSize));
}
#pd .container .content .content#content1 .product .m3 {
  top: calc(5.625 * var(--remBasicSize));
  right: calc(3.75 * var(--remBasicSize));
}
#pd .container .content .content#content2 {
  position: relative;
  background: url(../images/pd/pic2.png) no-repeat center/contain;
}
#pd .container .content .content#content2 .product .m1 {
  top: calc(13.75 * var(--remBasicSize));
  left: calc(9.375 * var(--remBasicSize));
}
#pd .container .content .content#content2 .product .m2 {
  top: calc(6.25 * var(--remBasicSize));
  left: calc(17.5 * var(--remBasicSize));
}
#pd .container .content .content#content2 .product .m3 {
  top: calc(4.375 * var(--remBasicSize));
  left: calc(25 * var(--remBasicSize));
}
#pd .container .content .content#content2 .product .m4 {
  top: calc(4.625 * var(--remBasicSize));
  right: calc(3.125 * var(--remBasicSize));
}
#pd .container .content .content#content3 {
  position: relative;
  background: url(../images/pd/pic3.png) no-repeat center/contain;
}
#pd .container .content .content#content3 .product .m1 {
  top: calc(4.5 * var(--remBasicSize));
  left: calc(15.625 * var(--remBasicSize));
}
#pd .container .content .content#content3 .product .m2 {
  top: calc(6.25 * var(--remBasicSize));
  left: calc(23.75 * var(--remBasicSize));
}
#pd .container .content .content#content3 .product .m3 {
  top: calc(4.625 * var(--remBasicSize));
  right: calc(3.375 * var(--remBasicSize));
}
#pd .container .content .content#content4 {
  position: relative;
  background: url(../images/pd/pic4.png) no-repeat center/contain;
}
#pd .container .content .content#content4 .product .m1 {
  top: calc(10.25 * var(--remBasicSize));
  left: calc(11.875 * var(--remBasicSize));
}
#pd .container .content .content#content4 .product .m2 {
  top: calc(3.125 * var(--remBasicSize));
  left: calc(21.25 * var(--remBasicSize));
}
#pd .container .content .content#content4 .product .m3 {
  top: calc(6.25 * var(--remBasicSize));
  right: calc(3.375 * var(--remBasicSize));
}
#pd .container .content .content#content5 {
  position: relative;
  background: url(../images/pd/pic5.png) no-repeat center/contain;
}
#pd .container .content .content#content5 .product .m1 {
  top: calc(4 * var(--remBasicSize));
  left: calc(17.5 * var(--remBasicSize));
}
#pd .container .content .content#content5 .product .m2 {
  top: calc(5.625 * var(--remBasicSize));
  left: calc(28.125 * var(--remBasicSize));
}
#pd .container .content .content#content5 .product .m3 {
  top: calc(3.4375 * var(--remBasicSize));
  right: calc(6.25 * var(--remBasicSize));
}
#pd .container .content .content#content6 {
  position: relative;
  background: url(../images/pd/pic6.png) no-repeat center/contain;
}
#pd .container .content .content#content6 .product .m1 {
  top: calc(3.125 * var(--remBasicSize));
  left: calc(11.25 * var(--remBasicSize));
}
#pd .container .content .content#content6 .product .m2 {
  top: calc(1.875 * var(--remBasicSize));
  left: calc(18.75 * var(--remBasicSize));
}
#pd .container .content .content#content6 .product .m3 {
  top: calc(5.625 * var(--remBasicSize));
  right: calc(3.125 * var(--remBasicSize));
}
#pd .container .content .more, #pd .container .content .open-modal-btn {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(3.125 * var(--remBasicSize));
  height: calc(3.125 * var(--remBasicSize));
  background-color: transparent;
}
#pd .container .content .more .icon, #pd .container .content .open-modal-btn .icon {
  position: absolute;
  z-index: 2;
  width: calc(2 * var(--remBasicSize));
  height: calc(2 * var(--remBasicSize));
  background: url(../images/pd/more.png) no-repeat center/contain;
}
#pd .container .content .more .icon2, #pd .container .content .open-modal-btn .icon2 {
  position: absolute;
  display: block;
  width: calc(1.25 * var(--remBasicSize));
  height: calc(1.25 * var(--remBasicSize));
  background-color: #d89ea9;
  animation: 2s icon infinite ease-in-out;
  border-radius: calc(3.125 * var(--remBasicSize));
}
@keyframes icon {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}
#pd .container .content .modal {
  display: none;
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  width: calc(43.875 * var(--remBasicSize));
  height: calc(19.125 * var(--remBasicSize));
  background: url(../images/pd/popup/bg.png) no-repeat center/contain;
  padding: calc(2.0625 * var(--remBasicSize)) calc(0.5 * var(--remBasicSize)) calc(0.625 * var(--remBasicSize));
  filter: drop-shadow(0 0 calc(0.625 * var(--remBasicSize)) rgba(0, 0, 0, 0.1254901961));
}
#pd .container .content .modal .close-btn {
  position: absolute;
  z-index: 10;
  top: calc(0.625 * var(--remBasicSize));
  right: 0;
  width: calc(3.3125 * var(--remBasicSize));
  height: calc(3.3125 * var(--remBasicSize));
  cursor: pointer;
  background: url(../images/pd/popup/btn_close.png) no-repeat center/contain;
}
#pd .container .content .modal .content {
  width: calc(43 * var(--remBasicSize));
  height: calc(16.5 * var(--remBasicSize));
  display: flex;
  justify-content: center;
  align-items: center;
}
#pd .container .content .modal .content .pd_img {
  display: block;
  width: calc(15 * var(--remBasicSize));
  height: calc(16.5 * var(--remBasicSize));
}
#pd .container .content .modal .content .txt_box {
  width: calc(27.875 * var(--remBasicSize));
  padding-right: calc(0.625 * var(--remBasicSize));
}
@media screen and (max-width: 750px) {
  #pd .container .content .modal .content .txt_box {
    padding-right: calc(1.25 * var(--remBasicSize));
  }
}
#pd .container .content .modal .content .txt_box p.pd_title {
  height: calc(8.4375 * var(--remBasicSize));
  padding-bottom: calc(1.25 * var(--remBasicSize));
  font-size: calc(1.75 * var(--remBasicSize));
  color: #000;
  line-height: 1.4em;
  letter-spacing: 0.025em;
  text-align: left;
  display: flex;
  align-items: flex-end;
}
@media screen and (max-width: 750px) {
  #pd .container .content .modal .content .txt_box p.pd_title {
    padding-bottom: calc(0.875 * var(--remBasicSize));
  }
}
#pd .container .content .modal .content .txt_box p.txt {
  height: calc(10 * var(--remBasicSize));
  padding-top: calc(0.125 * var(--remBasicSize));
  font-size: calc(1.4375 * var(--remBasicSize));
  color: #333;
  line-height: 1.4em;
  letter-spacing: 0.025em;
  text-align: left;
}
@media screen and (max-width: 750px) {
  #pd .container .content .modal .content .txt_box p.txt {
    padding-top: calc(0.25 * var(--remBasicSize));
  }
}
#pd .container .content .modal a.more {
  position: absolute;
  right: calc(1.25 * var(--remBasicSize));
  bottom: calc(1.25 * var(--remBasicSize));
  width: calc(6.1875 * var(--remBasicSize));
  height: calc(2.875 * var(--remBasicSize));
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #d89ea9;
  border-radius: calc(3.125 * var(--remBasicSize));
  color: #fff;
}
#pd .container .content .modal a.more span {
  display: block;
  width: calc(3.9375 * var(--remBasicSize));
  height: calc(0.9375 * var(--remBasicSize));
  background: url(../images/editor/more.png) no-repeat center/contain;
}
#pd .container .content .modal a.more:hover {
  background-color: #d6c7ba;
}

/*-------------------------

          pd

-------------------------*/
#editor2 {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: calc(60 * var(--remBasicSize));
  background-color: #f0ede5;
  padding-top: calc(5 * var(--remBasicSize));
}
#editor2 .container {
  position: relative;
  width: 100%;
}
#editor2 .container .title {
  position: relative;
  width: calc(46.875 * var(--remBasicSize));
}
#editor2 .container .title .night_lights {
  position: absolute;
  top: 0;
  left: 0;
}
#editor2 .container .title .night_lights::after {
  position: absolute;
  display: block;
  content: "";
  top: 0;
  left: 0;
  width: calc(46.875 * var(--remBasicSize));
  height: calc(10.1875 * var(--remBasicSize));
  background: url(../images/de/night_lights1.png) no-repeat center/contain;
  animation: 2s night_lights infinite ease-in-out;
}
#editor2 .container .content {
  position: relative;
  z-index: 2;
  width: calc(44.1875 * var(--remBasicSize));
  margin: 0 auto;
}
#editor2 .container .content .slides_box {
  position: relative;
  z-index: 3;
  width: calc(44.1875 * var(--remBasicSize));
  height: calc(34.375 * var(--remBasicSize));
  background-color: #fff;
  padding: calc(0.9375 * var(--remBasicSize));
  box-sizing: border-box;
}
#editor2 .container .content .slides_box .slides {
  position: relative;
}
#editor2 .container .content .slides_box .slides a.slider_wrap {
  position: relative;
  display: block;
  width: calc(14.125 * var(--remBasicSize));
  height: calc(32.5 * var(--remBasicSize));
}
#editor2 .container .content .slides_box .slides a.slider_wrap:hover {
  filter: saturate(200%);
}
#editor2 .container .content .slides_box .slides img {
  display: block;
  width: calc(14.125 * var(--remBasicSize));
  height: calc(32.5 * var(--remBasicSize));
}
#editor2 .container .content .slides_box .slides .e_txt {
  position: absolute;
  z-index: 2;
  top: 0;
}
#editor2 .container .content .de_pic {
  position: absolute;
  left: calc(-10.4375 * var(--remBasicSize));
  top: calc(-7.125 * var(--remBasicSize));
  width: calc(13.125 * var(--remBasicSize));
  height: calc(14.8125 * var(--remBasicSize));
  background: url(../images/editor/de_pic.png) no-repeat center/contain;
}
#editor2 .container .content .de_dot {
  position: absolute;
  top: calc(-5 * var(--remBasicSize));
  right: calc(-11.25 * var(--remBasicSize));
  width: calc(18.5 * var(--remBasicSize));
  height: calc(18.625 * var(--remBasicSize));
  background: url(../images/editor/de_dot.png) no-repeat center/contain;
}
#editor2 .container .de_bg {
  position: absolute;
  top: calc(25 * var(--remBasicSize));
  width: 100%;
  height: calc(16.1875 * var(--remBasicSize));
  background: url(../images/editor/de_skin.png) no-repeat top right/120%;
}

/*-------------------------

          game

-------------------------*/
#game {
  position: relative;
  z-index: 2;
  width: 100%;
  background-color: #f0ede5;
  padding: calc(5 * var(--remBasicSize)) 0 calc(7.5 * var(--remBasicSize));
}
#game .container {
  width: 100%;
  /* 自定義滑桿軌道 */
  /* 自定義滑塊 */
  /* 滑塊在 Firefox 中的樣式 */
}
#game .container .title {
  position: relative;
  padding: 0;
  width: calc(46.875 * var(--remBasicSize));
}
#game .container .title .de_txt {
  position: absolute;
  top: calc(-2.5 * var(--remBasicSize));
  right: calc(-1.25 * var(--remBasicSize));
  width: calc(15.6875 * var(--remBasicSize));
  height: calc(7 * var(--remBasicSize));
  background: url(../images/game/de_txt.png) no-repeat center top/cover;
}
#game .container .step0 {
  position: relative;
  width: 100%;
  min-height: calc(55.6875 * var(--remBasicSize));
}
#game .container .step0 .content {
  position: relative;
  z-index: 2;
  width: calc(46.875 * var(--remBasicSize));
  margin: 0 auto;
}
#game .container .step0 .content .txt {
  color: #000;
}
#game .container .step0 .content .txt p {
  font-size: calc(1.6875 * var(--remBasicSize));
  line-height: 1.54em;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.03em;
}
#game .container .step0 .content .txt .gift_img {
  position: relative;
  top: calc(-1.625 * var(--remBasicSize));
  left: calc(1.5 * var(--remBasicSize));
  width: calc(44.625 * var(--remBasicSize));
  height: calc(7.1875 * var(--remBasicSize));
  background: url(../images/game/gift.png) no-repeat center top/cover;
}
#game .container .step0 .content .cover {
  position: relative;
  top: calc(-0.625 * var(--remBasicSize));
  width: calc(46.875 * var(--remBasicSize));
  height: calc(50.625 * var(--remBasicSize));
  background: url(../images/game/cover_img.png) no-repeat center top/cover;
}
#game .container .step0 .content .gm-start-game {
  display: block;
  position: absolute;
  z-index: 5;
  top: calc(55 * var(--remBasicSize));
  left: calc(17.5 * var(--remBasicSize));
  padding-right: calc(1 * var(--remBasicSize));
  background-color: #333;
}
#game .container .step0 .content .gm-start-game::after {
  position: absolute;
  content: "";
  display: block;
  right: 10%;
  top: 33%;
  width: calc(1.5 * var(--remBasicSize));
  height: calc(1.5 * var(--remBasicSize));
  background: url(../images/de/arrow.png) no-repeat center top/cover;
  animation: 1.4s arrow ease-in-out infinite;
}
@keyframes arrow {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(calc(-0.3125 * var(--remBasicSize)));
  }
}
#game .container .step0 .content .gift {
  width: calc(40.625 * var(--remBasicSize));
  border-top: solid 1px #fff;
  padding: calc(1.25 * var(--remBasicSize)) 0;
  margin: 0 auto;
}
#game .container .step0 .content .gift > span {
  font-size: calc(1.3125 * var(--remBasicSize));
  letter-spacing: 0.025em;
  line-height: 1.4em;
}
#game .container .step0 .content .gift .event {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: calc(0.625 * var(--remBasicSize));
}
#game .container .step0 .content .gift .event a.gift_list {
  display: block;
  color: #fff;
  background-color: #d89ea9;
  width: calc(8.25 * var(--remBasicSize));
  height: calc(2.25 * var(--remBasicSize));
  border-radius: calc(3.125 * var(--remBasicSize));
  text-align: center;
  line-height: calc(2.25 * var(--remBasicSize));
  font-size: calc(1.3125 * var(--remBasicSize));
  letter-spacing: 0.05em;
  margin-right: calc(1.25 * var(--remBasicSize));
}
#game .container .step0 .content .gift .event > span {
  text-align: left;
  font-size: calc(1.375 * var(--remBasicSize));
  letter-spacing: 0.05em;
  line-height: 1.5em;
  text-align: center;
}
#game .container .step0 .content .result {
  position: relative;
  top: calc(-1.25 * var(--remBasicSize));
  width: 100%;
  height: calc(20.625 * var(--remBasicSize));
  display: flex;
  justify-content: center;
}
#game .container .step0 .content .result .item {
  position: relative;
}
#game .container .step0 .content .result .item.i1 {
  top: calc(2.1875 * var(--remBasicSize));
  transform: rotate(-10deg);
  transform-origin: right bottom;
}
#game .container .step0 .content .result .item.i2 {
  top: calc(4.1875 * var(--remBasicSize));
}
#game .container .step0 .content .result .item.i3 {
  top: calc(1.875 * var(--remBasicSize));
  transform: rotate(4deg);
  transform-origin: right bottom;
}
#game .container .step0 .content .result .item.i4 {
  top: calc(4.375 * var(--remBasicSize));
  transform: rotate(10deg);
  transform-origin: right bottom;
}
#game .container .step0 .content .result .item .result_img {
  display: block;
  width: calc(8.5625 * var(--remBasicSize));
  height: calc(15.25 * var(--remBasicSize));
  border: solid calc(0.25 * var(--remBasicSize)) #fff;
  filter: drop-shadow(calc(0.125 * var(--remBasicSize)) calc(0.125 * var(--remBasicSize)) calc(0.1875 * var(--remBasicSize)) hsla(0, 0%, 20%, 0.3));
}
#game .container .step0 .bg {
  position: absolute;
  top: calc(-2.5 * var(--remBasicSize));
  width: 100%;
  height: calc(48.0625 * var(--remBasicSize));
  background: url(../images/game/bg1.png) no-repeat center top/cover;
}
#game .container .step1 {
  position: relative;
  width: 100%;
  min-height: calc(55.6875 * var(--remBasicSize));
}
#game .container .step1 .content {
  position: relative;
  z-index: 2;
  width: calc(46.875 * var(--remBasicSize));
  margin: 0 auto;
}
#game .container .step1 .content .step1_txt {
  position: relative;
  top: 0;
  display: block;
  width: calc(34.5 * var(--remBasicSize));
  height: calc(3.875 * var(--remBasicSize));
  margin: 0 auto calc(1.25 * var(--remBasicSize));
}
#game .container .step1 .bg {
  position: absolute;
  top: calc(1.25 * var(--remBasicSize));
  width: 100%;
  height: calc(48.0625 * var(--remBasicSize));
  background: url(../images/game/bg1.png) no-repeat center top/cover;
}
#game .container .step2 {
  position: relative;
  width: 100%;
  min-height: calc(50 * var(--remBasicSize));
}
#game .container .step2 .content {
  position: relative;
  z-index: 2;
  width: calc(46.875 * var(--remBasicSize));
  margin: 0 auto;
}
#game .container .step2 .bg {
  position: absolute;
  top: calc(5 * var(--remBasicSize));
  width: 100%;
  height: calc(48.0625 * var(--remBasicSize));
  background: url(../images/game/bg2.png) no-repeat center top/cover;
}
#game .container .step3 {
  position: relative;
  width: 100%;
  min-height: calc(55.6875 * var(--remBasicSize));
}
#game .container .step3 .content {
  position: relative;
  z-index: 2;
  width: calc(46.875 * var(--remBasicSize));
  margin: 0 auto;
}
#game .container .step3 .content .gm-result {
  width: calc(35.5 * var(--remBasicSize));
  height: calc(63.125 * var(--remBasicSize));
  margin: 0 auto;
}
#game .container .step3 .content .box {
  position: relative;
  width: calc(41.25 * var(--remBasicSize));
  min-height: calc(47.5 * var(--remBasicSize));
  margin: 0 auto;
  padding: calc(1.25 * var(--remBasicSize)) calc(1.75 * var(--remBasicSize));
  background-color: #fff;
  border-radius: calc(0.3125 * var(--remBasicSize));
}
@media screen and (max-width: 750px) {
  #game .container .step3 .content .box {
    width: calc(43.75 * var(--remBasicSize));
  }
}
#game .container .step3 .content .box .tetris_content {
  padding-top: calc(1.25 * var(--remBasicSize));
}
#game .container .step3 .content .box .tetris_content .event-theme.el-form [fieldtype=Checkbox] .form__field {
  text-align: left;
}
#game .container .step3 .content .box .tetris_content .el-button.form__button.el-button--primary {
  font-family: "Noto Serif TC";
  border-radius: calc(3.125 * var(--remBasicSize));
  height: calc(5 * var(--remBasicSize));
}
#game .container .step3 .bg {
  position: absolute;
  top: calc(3.125 * var(--remBasicSize));
  width: 100%;
  height: calc(55.6875 * var(--remBasicSize));
  background: url(../images/game/bg2.png) no-repeat center top/cover;
}
#game .container .btn_box {
  display: flex;
  justify-content: center;
  margin: calc(2.5 * var(--remBasicSize)) auto;
}
#game .container .btn_box > button {
  margin: 0 calc(0.3125 * var(--remBasicSize));
}
#game .container .gm-next-step, #game .container .gm-prev-step {
  display: block;
  margin: 0 auto;
  color: #fff;
  font-family: "Noto Serif TC";
  font-weight: 500;
  font-size: calc(1.75 * var(--remBasicSize));
  width: calc(13.375 * var(--remBasicSize));
  height: calc(4.375 * var(--remBasicSize));
  border-radius: calc(3.125 * var(--remBasicSize));
}
#game .container .gm-next-step:hover, #game .container .gm-next-step:focus, #game .container .gm-prev-step:hover, #game .container .gm-prev-step:focus {
  background-color: #d89ea9;
}
#game .container .gm-next-step:disabled, #game .container .gm-prev-step:disabled {
  background-color: #cfcfcf;
}
#game .container .gm-prev-step {
  background-color: #979797;
}
#game .container .gm-next-step {
  background-color: #d89ea9;
}
#game .container .gm-download-btn {
  display: block;
  color: #fff;
  font-family: "Noto Serif TC";
  font-weight: 500;
  font-size: calc(1.75 * var(--remBasicSize));
  min-width: calc(13.375 * var(--remBasicSize));
  height: calc(4.375 * var(--remBasicSize));
  border-radius: calc(3.125 * var(--remBasicSize));
  background-color: #d89ea9;
  line-height: calc(4.375 * var(--remBasicSize));
  padding: 0 calc(1.25 * var(--remBasicSize));
}
#game .container .custom-range {
  position: relative;
  -webkit-appearance: none; /* 移除預設樣式 */
  width: 70%; /* 調整寬度 */
  height: calc(0.3125 * var(--remBasicSize)); /* 軌道高度 */
  background: #fff; /* 軌道背景色 */
  border-radius: calc(0.3125 * var(--remBasicSize)); /* 圓角 */
  outline: none; /* 移除外框 */
  margin: calc(3.125 * var(--remBasicSize)) auto;
}
#game .container .custom-range::-webkit-slider-thumb {
  position: relative;
  -webkit-appearance: none; /* 移除預設樣式 */
  width: calc(1.25 * var(--remBasicSize)); /* 滑塊寬度 */
  height: calc(1.25 * var(--remBasicSize)); /* 滑塊高度 */
  background: #000000; /* 滑塊背景色 */
  border-radius: 50%; /* 圓形滑塊 */
  cursor: pointer; /* 滑過時顯示指針 */
}
#game .container .custom-range::-moz-range-thumb {
  width: calc(1.25 * var(--remBasicSize));
  height: calc(1.25 * var(--remBasicSize));
  background: #000000;
  border-radius: 50%;
  cursor: pointer;
  border: none; /* 去掉默認邊框 */
}
#game .container .custom-range::before {
  content: "";
  position: absolute;
  width: var(--range-value, 0%);
  height: 100%;
  background: #000;
}

/*-------------------------

         data

-------------------------*/
#data {
  position: relative;
  margin: 0 auto;
}
#data .container {
  width: calc(46.875 * var(--remBasicSize));
  padding: calc(3.125 * var(--remBasicSize)) 0 calc(9.375 * var(--remBasicSize));
}
#data .container .title {
  position: relative;
  padding: 0 calc(3.125 * var(--remBasicSize));
}
#data .container .title img.logo {
  display: block;
  width: calc(19.6875 * var(--remBasicSize));
  height: calc(10.125 * var(--remBasicSize));
  margin: 0 auto calc(1.625 * var(--remBasicSize));
}
#data .container .title h2 {
  font-size: calc(3 * var(--remBasicSize));
  font-weight: 500;
  line-height: 1.4em;
  text-align: center;
}
#data .container .title h2 strong {
  font-weight: 500;
  display: inline;
  background: linear-gradient(transparent 40%, #ebdab9 100%);
  vertical-align: baseline;
  line-height: 1.4em;
}
#data .container .title p {
  position: relative;
  color: #000;
  font-size: calc(1.75 * var(--remBasicSize));
  font-weight: 400;
  line-height: 1.5em;
  text-align: justify;
  margin: 0 auto calc(0.75 * var(--remBasicSize));
}
#data .container .title span {
  display: block;
  color: #666;
  font-size: calc(1.625 * var(--remBasicSize));
}
#data .container .content {
  margin-top: calc(1.25 * var(--remBasicSize));
  /*預約補發mail*/
}
#data .container .content .box {
  position: relative;
  width: calc(44.1875 * var(--remBasicSize));
  min-height: calc(55 * var(--remBasicSize));
  margin: 0 auto;
  padding: calc(1.25 * var(--remBasicSize)) calc(1.5 * var(--remBasicSize));
  background-color: #fff;
  border: solid calc(0.625 * var(--remBasicSize)) #ebe9e8;
}
#data .container .content .box .tetris_content {
  padding-top: calc(1.25 * var(--remBasicSize));
}
#data .container .content .reissue {
  color: #000;
  font-size: calc(1.875 * var(--remBasicSize));
  line-height: 1.4em;
  font-weight: 400;
  letter-spacing: 0;
  margin: 5% auto;
  text-align: justify;
}
#data .container .content .reissue a {
  display: inline-block;
  vertical-align: baseline;
  padding: 1% 1%;
  margin: 0 1%;
  font-size: calc(1.8125 * var(--remBasicSize));
  color: #000;
  font-weight: 500;
  border: solid 1px #333;
  cursor: pointer;
}
#data .container .content .reissue a:hover {
  color: #fff;
  background-color: black;
  transition: all ease-in-out 0.2s;
}
#data .container .content .note {
  width: 100%;
  padding: calc(1.25 * var(--remBasicSize)) calc(2.5 * var(--remBasicSize)) calc(4.375 * var(--remBasicSize));
}
#data .container .content .note ul {
  line-height: 1.53em;
  color: #333;
  font-size: calc(1.75 * var(--remBasicSize));
}
#data .container .content .note ul li {
  list-style: decimal;
  margin-left: 1.5em;
  text-align: justify;
}
#data .container .content .note ul li a {
  display: inline-block;
  background-color: #000;
  color: #fff;
  vertical-align: baseline;
  padding: 0 calc(0.375 * var(--remBasicSize));
}
#data .container .content .note ul li a:hover {
  background-color: #333;
}

/*-------------------------

         lightbox

-------------------------*/
/* ---------------------
           共用
---------------------- */
.modal {
  background-color: transparent;
  min-height: calc(37.5 * var(--remBasicSize));
}

/*背景底色*/
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}

.modal-backdrop.fade {
  opacity: 0;
  filter: alpha(opacity=0);
}

.modal-backdrop.in {
  opacity: 1;
  filter: alpha(opacity=100);
}

.modal-open .modal {
  overflow-x: auto;
  overflow-y: auto;
}

.modal .modal-content {
  position: relative;
  background-color: transparent;
  border-radius: 0px;
  outline: 0;
  width: calc(43.875 * var(--remBasicSize));
  height: calc(37.3125 * var(--remBasicSize));
  margin: 0 auto;
}

/* 關閉按鈕-X */
.style-box .close {
  position: absolute;
  z-index: 10;
  top: calc(0.625 * var(--remBasicSize));
  right: calc(-1.875 * var(--remBasicSize));
  width: calc(5.3125 * var(--remBasicSize));
  height: calc(5.3125 * var(--remBasicSize));
  background: url(../images/icon_close.png) center/contain no-repeat;
  text-shadow: none;
  background-color: transparent;
  cursor: pointer;
  transition: all ease-in-out 0.5s;
  text-indent: calc(-62499.9375 * var(--remBasicSize));
  filter: drop-shadow(0 0 10px #000);
}
@media screen and (max-width: 750px) {
  .style-box .close {
    right: calc(-1.25 * var(--remBasicSize));
    top: calc(-1.25 * var(--remBasicSize));
  }
}
.style-box .close:hover {
  transform: rotate(90deg);
  transition: all ease-in-out 0.5s;
}

/*得獎名單*/
#Winners .modal-dialog {
  margin: 0 auto;
}

#Winners .modal-body {
  width: calc(43.875 * var(--remBasicSize));
  height: calc(37.3125 * var(--remBasicSize));
  margin: 0 auto;
  padding: 0;
  display: block;
}
#Winners .modal-body img {
  display: block;
  width: calc(43.875 * var(--remBasicSize));
  height: calc(37.3125 * var(--remBasicSize));
}
@media screen and (max-width: 750px) {
  #Winners .modal-body {
    margin-top: calc(4.375 * var(--remBasicSize));
  }
}

/*-------------------------

          footer

-------------------------*/
footer {
  position: relative;
  z-index: 5;
  bottom: 0;
  width: 100%;
  min-width: calc(85.375 * var(--remBasicSize));
  height: calc(6.25 * var(--remBasicSize));
  margin: 0 auto;
  text-align: center;
  background-color: #f0ede5;
}
@media screen and (max-width: 750px) {
  footer {
    min-width: 100%;
    height: calc(12.5 * var(--remBasicSize));
  }
}
footer > a {
  color: #7b7b7b;
}
footer span.illus {
  display: block;
  color: #7b7b7b;
  font-size: calc(0.875 * var(--remBasicSize));
  letter-spacing: 0.02em;
  margin-top: calc(1 * var(--remBasicSize));
}
@media screen and (max-width: 750px) {
  footer span.illus {
    font-size: calc(1.625 * var(--remBasicSize));
  }
}/*# sourceMappingURL=main.css.map */