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

/*思源*/
* {
  box-sizing: border-box;
}

html,
body {
  font-family: "Noto Sans TC", Helvetica, Arial, "黑體-繁", "Heiti TC", "儷黑", "LiHei", "微軟正黑體", "Microsoft JhengHei", sans-serif;
  font-size: 16px;
  width: 100%;
  height: 100%;
  background: url(../images/bg.jpg) #fff2f6;
}

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

/* ----------------------------------------------------
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 {
  text-decoration: none;
  transition: all ease-in-out 0.2s;
}

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

.color01 {
  color: #333;
  background-color: #ffdcea;
}
.color01:hover, .color01:focus, .color01:active {
  color: #fff;
  background-color: #e3456c;
}

.color02 {
  color: #fff;
  background-color: #e3456c;
}
.color02:hover, .color02:focus, .color02:active {
  color: #fff;
  background-color: #c50031;
}

.color03 {
  color: #3e3e3e;
  border: solid calc(0.0625 * var(--remBasicSize)) #3e3e3e;
  background-color: #fff;
}
.color03:hover, .color03:focus, .color03:active {
  border: solid calc(0.0625 * var(--remBasicSize)) #000;
  background-color: #efefef;
}

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

        fix_btn

-------------------------*/
.fix_box {
  position: fixed;
  z-index: 40;
  right: 0;
  bottom: 8vh;
}
.fix_box .go_shop {
  display: block;
  width: calc(3.4375 * var(--remBasicSize));
  height: calc(12.6875 * var(--remBasicSize));
  background: url(../images/kv/icon_buy.png) no-repeat center/contain;
  margin: 0 0 10% 0;
}
.fix_box .go_ig {
  display: block;
  width: calc(3.4375 * var(--remBasicSize));
  height: calc(10.9375 * var(--remBasicSize));
  background: url(../images/kv/icon_ig.png) no-repeat center/contain;
}

@keyframes txt_shine {
  0% {
    transform: translateX(-300px);
    opacity: 1;
  }
  40% {
    transform: translateX(400px);
    opacity: 1;
  }
  100% {
    transform: translateX(400px);
    opacity: 1;
  }
}
/*-------------------------

           kv

-------------------------*/
.kv {
  width: calc(46.875 * var(--remBasicSize));
  min-height: calc(80.8125 * var(--remBasicSize));
  margin: 0 auto;
  position: relative;
  background: url(../images/kv/frame_m.jpg) repeat-y center top/contain;
}
.kv .container {
  position: relative;
  text-align: center;
  width: calc(46.875 * var(--remBasicSize));
  height: calc(80.8125 * var(--remBasicSize));
  background: url(../images/kv/frame_top.png) no-repeat center top/contain;
}
.kv .container:after {
  position: absolute;
  bottom: 0;
  content: "";
  display: block;
  width: calc(46.875 * var(--remBasicSize));
  height: calc(1.4375 * var(--remBasicSize));
  background: url(../images/kv/frame_bottom.jpg) no-repeat center top/cover;
}
.kv .container .title {
  position: relative;
  z-index: 5;
  height: calc(21 * var(--remBasicSize));
  padding-top: calc(5 * var(--remBasicSize));
}
.kv .container .title span {
  width: 100%;
  height: calc(2.9375 * var(--remBasicSize));
  background: url(../images/kv/kv_span.png) no-repeat center top/contain;
  display: block;
  text-indent: calc(-6249.9375 * var(--remBasicSize));
  margin-bottom: calc(0.8125 * var(--remBasicSize));
}
.kv .container .title h1 {
  position: relative;
  width: calc(46.875 * var(--remBasicSize));
  height: calc(9.5625 * var(--remBasicSize));
  background: url(../images/kv/kv_h1.png) no-repeat center/contain;
  display: block;
  text-indent: calc(-6249.9375 * var(--remBasicSize));
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.kv .container .title h2 {
  position: relative;
  width: 100%;
  height: calc(2.3125 * var(--remBasicSize));
  background: url(../images/kv/kv_h2.png) no-repeat center/contain;
  display: block;
  text-indent: calc(-6249.9375 * var(--remBasicSize));
}
.kv .container .content {
  position: relative;
  z-index: 6;
  top: calc(34.375 * var(--remBasicSize));
  width: calc(43.75 * var(--remBasicSize));
  height: calc(18.125 * var(--remBasicSize));
  margin: 0 auto;
  background: #ffdcea;
}
.kv .container .content::before, .kv .container .content::after {
  position: absolute;
  content: "";
  display: block;
}
.kv .container .content:after {
  z-index: 2;
  left: 0;
  top: calc(-1.9375 * var(--remBasicSize));
  width: calc(43.75 * var(--remBasicSize));
  height: calc(1.9375 * var(--remBasicSize));
  background: url(../images/kv/kv_data_bg_top.png) no-repeat center bottom/contain;
}
.kv .container .content::before {
  top: calc(2.8125 * var(--remBasicSize));
  right: calc(-0.5 * var(--remBasicSize));
  width: calc(6.375 * var(--remBasicSize));
  height: calc(8.8125 * var(--remBasicSize));
  background: url(../images/kv/gift.png) no-repeat center/contain;
}
.kv .container .content h3 {
  text-indent: calc(-6249.9375 * var(--remBasicSize));
  width: calc(43.75 * var(--remBasicSize));
  height: calc(3.1875 * var(--remBasicSize));
  background: url(../images/kv/kv_data_h3.png) no-repeat center/contain;
  margin-bottom: calc(0.625 * var(--remBasicSize));
}
.kv .container .content p {
  color: #333;
  font-size: calc(1.625 * var(--remBasicSize));
  line-height: 1.4em;
  font-weight: 400;
  letter-spacing: 0.02em;
  padding-right: calc(0.625 * var(--remBasicSize));
}
.kv .container .content p strong {
  vertical-align: baseline;
  font-style: italic;
}
.kv .container .content button {
  position: relative;
  cursor: pointer;
  margin-top: calc(0.625 * var(--remBasicSize));
  width: calc(22.375 * var(--remBasicSize));
  height: calc(4.8125 * var(--remBasicSize));
  border-radius: calc(3.125 * var(--remBasicSize));
  background-color: #e3456c;
}
.kv .container .content button:hover {
  background-color: #c50031;
}
.kv .container .content button::before, .kv .container .content button::after {
  position: absolute;
  content: "";
  display: block;
  top: calc(1.875 * var(--remBasicSize));
  right: calc(3.75 * var(--remBasicSize));
  width: calc(1.8125 * var(--remBasicSize));
  height: calc(1.5 * var(--remBasicSize));
}
.kv .container .content button::before {
  background: url(../images/kv/icon_heart_white-stroke.png) no-repeat center/contain;
}
.kv .container .content button::after {
  background: url(../images/kv/icon_heart_white-solid.png) no-repeat center/contain;
  animation: 1s kv_love ease-in-out infinite;
}
@keyframes kv_love {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.kv .container .content button p {
  position: relative;
  left: calc(3.4375 * var(--remBasicSize));
  top: calc(-0.3125 * var(--remBasicSize));
  text-indent: calc(-6249.9375 * var(--remBasicSize));
  width: calc(12.125 * var(--remBasicSize));
  height: calc(2.75 * var(--remBasicSize));
  background: url(../images/kv/kv_btn_txt.png) no-repeat center/contain;
}
.kv .container .kv_love {
  position: absolute;
  bottom: calc(1.5625 * var(--remBasicSize));
  left: calc(1.5625 * var(--remBasicSize));
  width: calc(43.75 * var(--remBasicSize));
}
.kv img.temple {
  width: calc(46.875 * var(--remBasicSize));
  height: calc(36.75 * var(--remBasicSize));
}

[data-aos=kv_bg] {
  position: absolute;
  z-index: 1;
  top: calc(16.5625 * var(--remBasicSize));
  opacity: 1;
  transition-property: transform, opacity;
}

[data-aos=kv_bg].aos-animate {
  opacity: 1;
  animation-delay: 1s;
  position: absolute;
  width: calc(46.875 * var(--remBasicSize));
  height: calc(38.75 * var(--remBasicSize));
  background: url(../images/kv/kv_illust.png) no-repeat center/contain;
  display: block;
}
[data-aos=kv_bg].aos-animate:after {
  position: absolute;
  left: calc(13.125 * var(--remBasicSize));
  bottom: 0;
  content: "";
  display: block;
  width: calc(11.3125 * var(--remBasicSize));
  height: calc(18.75 * var(--remBasicSize));
  background: url(../images/kv/kv_illust_hand.png) no-repeat center bottom/contain;
  animation: 4s kv_bg ease-in-out infinite;
}
@keyframes kv_bg {
  0% {
    transform: rotate(0deg);
    transform-origin: bottom left;
  }
  20% {
    transform: rotate(-3deg);
    transform-origin: bottom left;
  }
  45% {
    transform: rotate(0deg);
    transform-origin: bottom left;
  }
  100% {
    transform: rotate(0deg);
    transform-origin: bottom left;
  }
}

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

          quiz

-------------------------*/
.q2, .q3, .q4, .cards, .result, .r2, .r3, .r4 {
  display: none;
}

.quiz {
  display: none;
  width: calc(46.875 * var(--remBasicSize));
  min-height: calc(50 * var(--remBasicSize));
  margin: 0 auto;
  position: relative;
  background: url(../images/kv/frame_m.jpg) repeat-y center top/contain;
}
.quiz .container {
  position: relative;
  text-align: center;
  width: calc(46.875 * var(--remBasicSize));
  height: auto;
  background: url(../images/kv/frame_top2.png) no-repeat center top/contain;
  padding: calc(12.5 * var(--remBasicSize)) 0 0;
}
.quiz .container:after {
  position: absolute;
  content: "";
  display: block;
  width: calc(46.875 * var(--remBasicSize));
  height: calc(1.4375 * var(--remBasicSize));
  background: url(../images/kv/frame_bottom.jpg) no-repeat;
  background-size: 100%;
}
.quiz .container .animation {
  margin-top: calc(0.625 * var(--remBasicSize));
}
.quiz .container .animation img {
  width: calc(36.875 * var(--remBasicSize));
}
.quiz .container .content {
  width: calc(40.625 * var(--remBasicSize));
  margin: 0 auto;
}
.quiz .container .content .dot {
  margin-bottom: calc(2.25 * var(--remBasicSize));
}
.quiz .container .content .dot img {
  width: calc(14.5625 * var(--remBasicSize));
}
.quiz .container .content .question {
  display: flex;
  justify-content: center;
  margin: 0 0 calc(1.875 * var(--remBasicSize));
}
.quiz .container .content .question .qa_item {
  width: calc(5.625 * var(--remBasicSize));
  height: calc(3.3125 * var(--remBasicSize));
}
.quiz .container .content .question p {
  color: #333;
  font-size: calc(2.1875 * var(--remBasicSize));
  line-height: 1.5em;
  font-weight: 600;
  text-align: left;
  margin-left: calc(0.625 * var(--remBasicSize));
}
.quiz .container .content .answer {
  margin-bottom: calc(2.5 * var(--remBasicSize));
}
.quiz .container .content .answer .btn {
  width: 100%;
  height: calc(6.0625 * var(--remBasicSize));
  border-radius: calc(3.125 * var(--remBasicSize));
  margin-bottom: calc(1.5625 * var(--remBasicSize));
}
.quiz .container .content .answer .btn p {
  font-size: calc(2.125 * var(--remBasicSize));
  line-height: 1.5em;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.quiz .container .content .answer .option {
  cursor: pointer;
  position: relative;
  width: 100%;
  height: calc(6.0625 * var(--remBasicSize));
  margin: 0 0 calc(1.375 * var(--remBasicSize));
}
.quiz .container .content .answer .option .option_input {
  opacity: 0;
  position: absolute;
}
.quiz .container .content .answer .option .option_text {
  cursor: pointer;
  display: block;
  width: 100%;
  height: calc(6.0625 * var(--remBasicSize));
  font-size: calc(2.125 * var(--remBasicSize));
  line-height: calc(6.0625 * var(--remBasicSize));
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: calc(3.125 * var(--remBasicSize));
}
.quiz .container .content .answer .option_input:checked ~ .option_label .option_text {
  color: #fff;
  background-color: #e3456c;
}
.quiz .container .content .btn {
  cursor: pointer;
}
.quiz .container .content .btn_box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: calc(1.875 * var(--remBasicSize));
}
.quiz .container .content .btn_box button:nth-child(1) {
  width: 30%;
}
.quiz .container .content .btn_box button:nth-child(2) {
  width: 42%;
}
.quiz .container .content .btn_box .btn {
  display: block;
  width: calc(14.375 * var(--remBasicSize));
  height: calc(6.0625 * var(--remBasicSize));
  border-radius: calc(3.125 * var(--remBasicSize));
  margin: 0 calc(0.625 * var(--remBasicSize));
}
.quiz .container .content .btn_box .btn p {
  font-size: calc(2 * var(--remBasicSize));
  line-height: 1.5em;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.quiz .container .result {
  width: calc(43.75 * var(--remBasicSize));
  margin: 0 auto;
}
.quiz .container .result .result_content .type {
  width: 100%;
  height: calc(40.8125 * var(--remBasicSize));
  display: flex;
  justify-content: flex-end;
}
.quiz .container .result .result_content .type .title {
  width: calc(21.875 * var(--remBasicSize));
}
.quiz .container .result .result_content .type .title .h2 {
  position: relative;
  width: calc(21.875 * var(--remBasicSize));
  height: calc(22.1875 * var(--remBasicSize));
}
.quiz .container .result .result_content .type .title .h2::before, .quiz .container .result .result_content .type .title .h2::after {
  position: absolute;
  content: "";
  display: block;
  width: calc(1.8125 * var(--remBasicSize));
  height: calc(1.9375 * var(--remBasicSize));
}
.quiz .container .result .result_content .type .title .h2::before {
  animation: 1s love ease-in-out infinite;
}
@keyframes love {
  0% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1.1);
  }
}
.quiz .container .result .result_content .type .title .h2::after {
  animation: 1s love2 ease-in-out infinite;
}
@keyframes love2 {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(0.8);
  }
}
.quiz .container .result .result_content .type .title p {
  color: #333;
  font-size: calc(1.5 * var(--remBasicSize));
  line-height: 1.42em;
  font-weight: 400;
  padding: 0 calc(2.1875 * var(--remBasicSize)) 0 calc(4.0625 * var(--remBasicSize));
  text-align: justify;
  margin-top: calc(-0.625 * var(--remBasicSize));
}
.quiz .container .result .result_content .type .title p span {
  color: #fff;
}
.quiz .container .result .result_content .product .title {
  width: calc(43.75 * var(--remBasicSize));
}
.quiz .container .result .result_content .product .box {
  display: flex;
  justify-content: center;
}
.quiz .container .result .result_content .product .box img {
  width: calc(14.4375 * var(--remBasicSize));
  height: calc(22.6875 * var(--remBasicSize));
}
.quiz .container .result .r1 .type {
  background: url(../images/data/illus_typeA.jpg) no-repeat center top/contain;
}
.quiz .container .result .r1 .type .h2 {
  background: url(../images/data/illus_typeA_h2.png) no-repeat center top/contain;
}
.quiz .container .result .r1 .type .h2::before, .quiz .container .result .r1 .type .h2::after {
  background: url(../images/data/loveA.png) no-repeat center top/contain;
}
.quiz .container .result .r1 .type .h2::before {
  top: calc(5.3125 * var(--remBasicSize));
  left: calc(10.375 * var(--remBasicSize));
}
.quiz .container .result .r1 .type .h2::after {
  top: calc(6.875 * var(--remBasicSize));
  left: calc(12.5 * var(--remBasicSize));
}
.quiz .container .result .r2 .type {
  background: url(../images/data/illus_typeB.jpg) no-repeat center top/contain;
}
.quiz .container .result .r2 .type .h2 {
  background: url(../images/data/illus_typeB_h2.png) no-repeat center top/contain;
}
.quiz .container .result .r2 .type .h2::before, .quiz .container .result .r2 .type .h2::after {
  background: url(../images/data/loveB.png) no-repeat center top/contain;
}
.quiz .container .result .r2 .type .h2::before {
  top: calc(5.3125 * var(--remBasicSize));
  left: calc(12.375 * var(--remBasicSize));
}
.quiz .container .result .r2 .type .h2::after {
  top: calc(6.875 * var(--remBasicSize));
  left: calc(14.6875 * var(--remBasicSize));
}
.quiz .container .result .r3 .type {
  background: url(../images/data/illus_typeC.jpg) no-repeat center top/contain;
}
.quiz .container .result .r3 .type .h2 {
  background: url(../images/data/illus_typeC_h2.png) no-repeat center top/contain;
}
.quiz .container .result .r3 .type .h2::before, .quiz .container .result .r3 .type .h2::after {
  background: url(../images/data/loveC.png) no-repeat center top/contain;
}
.quiz .container .result .r3 .type .h2::before {
  top: calc(5.3125 * var(--remBasicSize));
  left: calc(12.3125 * var(--remBasicSize));
}
.quiz .container .result .r3 .type .h2::after {
  top: calc(6.875 * var(--remBasicSize));
  left: calc(14.5625 * var(--remBasicSize));
}
.quiz .container .result .r4 .type {
  justify-content: flex-start;
  background: url(../images/data/illus_typeD.jpg) no-repeat center top/contain;
}
.quiz .container .result .r4 .type .title .h2 {
  background: url(../images/data/illus_typeD_h2.png) no-repeat center top/contain;
}
.quiz .container .result .r4 .type .title .h2::before, .quiz .container .result .r4 .type .title .h2::after {
  background: url(../images/data/loveD.png) no-repeat center top/contain;
}
.quiz .container .result .r4 .type .title .h2::before {
  top: calc(5.3125 * var(--remBasicSize));
  left: calc(14.25 * var(--remBasicSize));
}
.quiz .container .result .r4 .type .title .h2::after {
  top: calc(6.875 * var(--remBasicSize));
  left: calc(16.5 * var(--remBasicSize));
}
.quiz .container .result .r4 .type .title p {
  padding: 0 calc(4.0625 * var(--remBasicSize)) 0 calc(1.25 * var(--remBasicSize));
}
.quiz .cards {
  position: relative;
  cursor: pointer;
}
.quiz .cards #play {
  position: absolute;
  top: 0;
  width: calc(43.75 * var(--remBasicSize));
  height: calc(52.875 * var(--remBasicSize));
}
.quiz .cards #player {
  width: calc(43.75 * var(--remBasicSize));
  height: calc(52.875 * var(--remBasicSize));
}

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

          data

-------------------------*/
.data {
  position: relative;
  width: calc(43.75 * var(--remBasicSize));
  height: auto;
  margin: calc(1.875 * var(--remBasicSize)) auto 0;
  background-color: #ffdcea;
  padding: calc(1.875 * var(--remBasicSize)) 0 calc(3.125 * var(--remBasicSize));
}
.data .title {
  position: relative;
  margin-bottom: calc(1.875 * var(--remBasicSize));
}
.data .title::before {
  position: absolute;
  top: calc(-3.875 * var(--remBasicSize));
  content: "";
  display: block;
  width: calc(43.75 * var(--remBasicSize));
  height: calc(2 * var(--remBasicSize));
  background: url(../images/data/data_bg_top.png) no-repeat;
  background-size: cover;
}
.data .title h2 {
  position: relative;
  width: calc(43.75 * var(--remBasicSize));
  height: calc(3.9375 * var(--remBasicSize));
  background: url(../images/data/data_title_h2.png) no-repeat center/contain;
  margin-bottom: calc(0.9375 * var(--remBasicSize));
  text-indent: calc(-6249.9375 * var(--remBasicSize));
}
.data .title h2::before {
  position: absolute;
  top: calc(-1.25 * var(--remBasicSize));
  left: calc(9.6875 * var(--remBasicSize));
  content: "";
  display: block;
  width: calc(1.625 * var(--remBasicSize));
  height: calc(2.4375 * var(--remBasicSize));
  background: url(../images/data/icon_shiny_white.png) no-repeat center/contain;
  animation: 1s shiny1 ease-in-out infinite;
}
@keyframes shiny1 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}
.data .title h2::after {
  position: absolute;
  top: calc(-2.375 * var(--remBasicSize));
  left: calc(11.5625 * var(--remBasicSize));
  content: "";
  display: block;
  width: calc(1.0625 * var(--remBasicSize));
  height: calc(1.625 * var(--remBasicSize));
  background: url(../images/data/icon_shiny_white.png) no-repeat center/contain;
  animation: 1s shiny2 ease-in-out infinite;
}
@keyframes shiny2 {
  0% {
    transform: scale(1.5);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}
.data .title p {
  position: relative;
  z-index: 2;
  color: #333;
  font-size: calc(1.75 * var(--remBasicSize));
  line-height: 1.5em;
  font-weight: 400;
  letter-spacing: 0em;
  margin-bottom: calc(0.625 * var(--remBasicSize));
}
.data .title p strong {
  vertical-align: baseline;
  font-style: italic;
}
.data .title span {
  width: calc(27.5 * var(--remBasicSize));
  height: calc(1.875 * var(--remBasicSize));
  display: block;
  color: #333;
  font-size: calc(1.375 * var(--remBasicSize));
  line-height: calc(1.875 * var(--remBasicSize));
  font-weight: 400;
  letter-spacing: 0.04em;
  background-color: #ffefd9;
  border-radius: calc(3.125 * var(--remBasicSize));
  margin: 0 auto;
}
.data .title .data_gift {
  position: absolute;
  right: calc(0 * var(--remBasicSize));
  top: calc(1 * var(--remBasicSize));
  width: calc(9.375 * var(--remBasicSize));
  height: calc(12.8125 * var(--remBasicSize));
}
.data .content {
  padding: 0 calc(3.125 * var(--remBasicSize));
}

.tetris_content {
  min-height: 500px;
}

/*按鈕*/
.send {
  display: flex;
  justify-content: space-between;
}
.send .btn_download {
  cursor: pointer;
  display: block;
  width: 35%;
  height: calc(4.8125 * var(--remBasicSize));
  background-color: #3e3e3e;
  border-radius: calc(3.125 * var(--remBasicSize));
}
.send .btn_download p {
  color: #fff;
  font-size: calc(2.0625 * var(--remBasicSize));
  line-height: calc(4.8125 * var(--remBasicSize));
  font-weight: 400;
}
.send .btn_download:hover {
  background-color: #000;
}
.send .btn_send {
  cursor: pointer;
  display: block;
  width: 60%;
  height: calc(4.8125 * var(--remBasicSize));
  background-color: #e3456c;
  border-radius: calc(3.125 * var(--remBasicSize));
  margin: 0 1%;
}
.send .btn_send p {
  color: #fff;
  font-size: calc(2.0625 * var(--remBasicSize));
  line-height: calc(4.8125 * var(--remBasicSize));
  font-weight: 500;
}
.send .btn_send:hover {
  background-color: #c50031;
}

.event-theme.el-form .el-form-item[name=q1] {
  padding-bottom: 0;
}

.event-theme.el-form .el-form-item button[type=submit] {
  height: calc(5 * var(--remBasicSize));
}

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

        表 單

-------------------------*/
.form_box {
  position: relative;
  width: calc(36.25 * var(--remBasicSize));
  margin: 0 auto;
}

/* -------------------- */
.form_box_list {
  width: calc(31.25 * var(--remBasicSize));
  margin: 0 auto;
}

.form_box_list .column {
  position: relative;
  height: 100%;
  min-height: calc(5 * var(--remBasicSize));
  font-size: calc(2 * var(--remBasicSize));
  line-height: calc(5 * var(--remBasicSize));
  color: #333;
  font-weight: 400;
  letter-spacing: 0px;
  margin-bottom: calc(0.9375 * var(--remBasicSize));
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  border: solid calc(0.0625 * var(--remBasicSize)) #906b74;
}

/*置右*/
.col2 {
  width: 73%;
  justify-content: flex-end;
}

.form_box_list .column > p,
.form_box_list .column > label {
  width: calc(8.125 * var(--remBasicSize));
  height: calc(5 * var(--remBasicSize));
  padding: 0 calc(0.75 * var(--remBasicSize));
  /*文字 左右貼齊*/
  text-align: justify;
  text-justify: inter-ideograph;
  -ms-text-justify: inter-ideograph;
  -moz-text-align-last: justify;
  -webkit-text-align-last: justify;
  background-color: transparent;
  color: #565048;
}

.form_box_list .column > p,
.form_box_list .column > label:after {
  content: "";
  display: inline-block;
  width: 100%;
}

.form_box_list .column > label.label2 {
  width: auto;
}

.form_box_list .column > p {
  position: absolute;
  left: 0;
  top: 0;
}

.form_box_list .column > label.mail {
  text-align: center;
}

.input_txt {
  height: calc(5 * var(--remBasicSize));
  padding: 0 calc(0.9375 * var(--remBasicSize));
}

.input-txt2 {
  display: inline-block;
  height: 76px;
  padding: 0 10px;
  letter-spacing: 0.1em;
  background-color: #f5f5f5;
}

.input-txt3 {
  height: 74px;
  padding: 0;
  letter-spacing: 0.1em;
  background-color: #fff;
  padding-left: 20px;
}

.w1 {
  width: 100%;
}

.w2 {
  width: 52%;
}

.w3 {
  width: 80%;
}

.w4 {
  width: 18%;
}

.line {
  border-bottom: solid 1px #9f9f9f !important;
}

/**/
input::-moz-placeholder {
  color: #999;
  opacity: 1;
  font-weight: 300;
  padding-left: 10px;
}
input::placeholder {
  color: #999;
  opacity: 1;
  font-weight: 300;
  padding-left: 10px;
}

/* ---------------------
      下拉選單
---------------------- */
.style_select {
  position: relative;
  display: block;
  border: none;
  margin: 0;
  color: #565048;
  background-color: transparent;
  height: calc(5 * var(--remBasicSize));
}
.style_select:after {
  position: absolute;
  z-index: 2;
  content: " ";
  pointer-events: none;
  height: 0;
  width: 0;
  top: 47%;
  right: 1%;
  border: solid transparent;
  border-top-color: #565048;
  border-width: calc(0.4375 * var(--remBasicSize));
}

/*線
.style-select:before{
  top:0%; right:22%;
  content: " ";
  height: 36px; width:0;
  position: absolute; z-index:1;
  border-left:solid 1px #fff;
}
*/
/*內容*/
.style_select > select {
  width: 100%;
  height: calc(5 * var(--remBasicSize));
  line-height: calc(5 * var(--remBasicSize));
  border: 0;
  padding: 0 calc(0.9375 * var(--remBasicSize));
  -webkit-appearance: none;
  outline: inherit;
  cursor: pointer;
  background-color: transparent;
  border-radius: 0;
  font-weight: 400;
  letter-spacing: 0;
}

.style_select > select > option {
  color: #565048;
  background-color: transparent;
  border: none;
  border-radius: 0;
}

.style_select > select > option:hover {
  color: #565048;
  background-color: transparent;
  border: none;
  border-radius: 0;
}

/* ---------------------
      checkbox
---------------------- */
.check_box {
  padding: 0 calc(0.9375 * var(--remBasicSize));
  margin: calc(1.25 * var(--remBasicSize)) 0;
}

.check_box > div {
  position: relative;
  text-align: justify;
}

input[type=checkbox] {
  position: absolute;
  left: 2em;
  top: 1em;
  opacity: 0;
}

/*條款*/
.check_style {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
  display: block;
  padding-left: calc(2.875 * var(--remBasicSize));
  margin-bottom: calc(0.625 * var(--remBasicSize));
  font-weight: 300;
  font-size: calc(1.625 * var(--remBasicSize));
  line-height: 1.5em;
  color: #000;
}
.check_style a { /*條款連結*/
  font-weight: 500;
  vertical-align: baseline;
  color: #000;
  border-bottom: 1px solid #565048;
}
.check_style a:hover {
  color: #bc5482;
  border-bottom: 1px solid #bc5482;
}
.check_style input {
  cursor: pointer;
  position: absolute;
  opacity: 0;
}
.check_style .checkmark {
  position: absolute;
  top: calc(0.1875 * var(--remBasicSize));
  left: 0;
  width: calc(2.25 * var(--remBasicSize));
  height: calc(2.25 * var(--remBasicSize));
  background-color: transparent;
  border: 1px solid #000;
}
.check_style .checkmark:after {
  position: absolute;
  left: calc(0.6875 * var(--remBasicSize));
  top: calc(0.3125 * var(--remBasicSize));
  content: "";
  display: none;
  width: calc(0.5 * var(--remBasicSize));
  height: calc(1.125 * var(--remBasicSize));
  border: solid #000;
  border-width: 0 5px 5px 0;
  transform: rotate(45deg);
}
.check_style:hover input ~ .checkmark {
  background-color: rgba(255, 194, 194, 0.533);
}
.check_style input:checked ~ .checkmark {
  background-color: transparent;
}
.check_style input:checked ~ .checkmark:after {
  display: block;
}

.style_select {
  float: right;
  position: relative;
  width: 80%;
  margin: 0;
  border: none;
  border-radius: none;
}
.style_select:after {
  position: absolute;
  content: "";
  z-index: 2;
  top: 44%;
  right: calc(1.25 * var(--remBasicSize));
  width: 0;
  height: 0;
  pointer-events: none;
  border: solid transparent;
  border-top-color: #565048;
  border-width: calc(0.75 * var(--remBasicSize));
}

/* ---------------------
      共用input
---------------------- */
input[type=text],
input[type=tel],
input[type=email],
input[type=number],
select, textarea,
.style-select > select {
  color: #333;
  font-size: calc(1.875 * var(--remBasicSize));
  border: none;
  border-radius: 0;
  vertical-align: bottom;
  letter-spacing: 0.02em;
  font-weight: 400;
  text-align: center;
}

input[type=text]:focus,
input[type=tel]:focus,
input[type=email]:focus,
input[type=number]:focus,
select:focus,
textarea:focus,
button:focus,
input[type=radio]:focus {
  outline: none;
  border: none;
}

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

         lightbox

-------------------------*/
/* ---------------------
           共用
---------------------- */
.modal {
  background-color: transparent;
}

/*背景底色*/
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background: rgba(0, 0, 0, 0.88);
}

.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;
}

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

---------------------- */
.style-box .modal-dialog {
  width: calc(46.875 * var(--remBasicSize));
  height: 100%;
  padding: 0;
  margin: 0 auto;
  display: block;
  /* 關閉按鈕 */
}
.style-box .modal-dialog .modal-body {
  position: relative;
  width: calc(41.875 * var(--remBasicSize));
  margin: 0 auto;
  display: block;
}
.style-box .modal-dialog .close {
  position: absolute;
  z-index: 10;
  right: 0;
  top: 0px;
  width: calc(3.5 * var(--remBasicSize));
  height: calc(3.5 * var(--remBasicSize));
  font-size: calc(2 * var(--remBasicSize));
  color: #fff;
  background-color: #fd64a1;
  cursor: pointer;
}

/*得獎名單*/
#Winners .modal-body {
  width: calc(46.875 * var(--remBasicSize));
  padding: calc(5.625 * var(--remBasicSize)) calc(2.5 * var(--remBasicSize));
  margin: calc(0 * var(--remBasicSize));
  background: #fff;
  display: block;
}

#Winners .modal-body h2 {
  color: #000;
  font-size: calc(2 * var(--remBasicSize));
  line-height: 1.3em;
  font-weight: 500;
  letter-spacing: 0em;
  text-align: center;
  margin-bottom: calc(1.5625 * var(--remBasicSize));
}

.style-box .modal-body .box3 h4 {
  position: relative;
  color: #333;
  font-size: 32px;
  line-height: 1.6em;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-align: center;
  width: 400px;
  margin: 0 auto 30px auto;
}

.style-box .modal-body .box3 h4:before,
.style-box .modal-body .box3 h4:after {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #333;
}

.style-box .modal-body .box3 .item {
  display: block;
  color: #ff4d99;
  font-size: calc(1.875 * var(--remBasicSize));
  line-height: 1.3em;
  font-weight: 500;
  letter-spacing: 0em;
  padding: calc(0.625 * var(--remBasicSize)) 0 calc(0.625 * var(--remBasicSize));
  margin: calc(0.625 * var(--remBasicSize)) 0;
  text-align: center;
  background-color: #ffeaf4;
}

.style-box .modal-body .box3 .item span {
  font-size: calc(1.375 * var(--remBasicSize));
}

.style-box .modal-body .box3 p {
  position: relative;
  color: #ff4d99;
  font-size: calc(1.75 * var(--remBasicSize));
  line-height: 1.4em;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-align: center;
}

.style-box .modal-body .box3 > span {
  display: block;
  text-align: center;
  font-size: calc(1.375 * var(--remBasicSize));
  margin-top: calc(1.5625 * var(--remBasicSize));
}

.style-box .modal-body .box3 ul {
  list-style: disc;
  padding: 20px 10px;
}

.style-box .modal-body .box3 ul li {
  font-size: 26px;
  line-height: 1.5em;
  text-align: justify;
}

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

          footer

-------------------------*/
footer {
  position: relative;
  bottom: 0;
  width: calc(46.875 * var(--remBasicSize));
  margin: 0 auto;
  background-color: transparent;
  margin-top: calc(2.5 * var(--remBasicSize));
  text-align: center;
}
footer > a {
  color: #999;
}/*# sourceMappingURL=main.css.map */