@charset "UTF-8";
/* v1.6 */
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+TC:400,500&display=swap");
@import url("//fonts.googleapis.com/earlyaccess/notosanstc.css");
:root {
  --remBasicSize: 16px;
}

* {
  box-sizing: border-box;
}

::-webkit-scrollbar {
  display: none;
}

body {
  margin: 0;
  padding: 0;
  background: url(../images/bg.jpg) no-repeat center;
  background-size: cover;
}

#quiz {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin: auto;
  overflow: hidden;
  box-sizing: border-box;
  background: #e3e3e3;
  z-index: 2;
}

/* ---------------------
        大標
---------------------- */
.quiz-head {
  display: none;
}

/* ---------------------
        btn
---------------------- */
.btn {
  display: block;
  margin: 0 auto;
  width: calc(19 * var(--remBasicSize));
  height: calc(4.875 * var(--remBasicSize));
  border-radius: calc(2.4375 * var(--remBasicSize));
  margin: 0 auto;
  border: solid 1px #e3e3e3;
  background-color: transparent;
  position: relative;
  margin-top: calc(3.75 * var(--remBasicSize));
}
.btn:hover, .btn:active {
  border: solid 1px #e3e3e3;
  background-color: #e3e3e3;
  width: calc(13.875 * var(--remBasicSize));
  height: calc(4.875 * var(--remBasicSize));
}
.btn:hover .btn-text-start, .btn:active .btn-text-start {
  width: calc(7.9375 * var(--remBasicSize));
  height: calc(1.9375 * var(--remBasicSize));
  background: url(../images/quiz/btn-text-start-black@2x.png) no-repeat center;
  background-size: 100%;
  display: block;
  position: absolute;
  top: calc(1.5 * var(--remBasicSize));
  left: calc(2.9375 * var(--remBasicSize));
  z-index: 3;
}
.btn-text-start-box {
  width: calc(13.875 * var(--remBasicSize));
  height: calc(4.875 * var(--remBasicSize));
  position: absolute;
  top: 0;
  left: 0;
  border-radius: calc(2.4375 * var(--remBasicSize));
  border: solid 1px #e3e3e3;
  display: block;
}
.btn-text-start-box .btn-text-start {
  width: calc(7.9375 * var(--remBasicSize));
  height: calc(1.9375 * var(--remBasicSize));
  background: url(../images/quiz/btn-text-start-white@2x.png) no-repeat center;
  background-size: 100%;
  display: block;
  position: absolute;
  top: calc(1.5 * var(--remBasicSize));
  left: calc(2.9375 * var(--remBasicSize));
}
.btn .quiz-btn-icon-arrow {
  background: url(../images/quiz/quiz-btn-icon-arrow@2x.png) no-repeat center;
  background-size: 100%;
  display: block;
  width: calc(2.375 * var(--remBasicSize));
  height: calc(1.9375 * var(--remBasicSize));
  position: absolute;
  top: calc(1.625 * var(--remBasicSize));
  right: calc(1.6875 * var(--remBasicSize));
}
.btn:hover {
  cursor: pointer;
}
.btn:focus {
  outline: none;
}

.qz-q-next {
  color: white;
  background: #be6661;
  border: none;
}

.qz-q-next,
.qz-q-prev {
  display: none;
}

.qz-q-prev,
.qz-replay,
.qz-form {
  color: #323237;
  background-color: transparent;
}

.qz-replay {
  display: none;
}

.qz-result .btn {
  vertical-align: bottom;
}

/* ---------------------
        cover
---------------------- */
.qz-cover {
  width: calc(43.75 * var(--remBasicSize));
  height: calc(74.375 * var(--remBasicSize));
  background: url(../images/quiz/quiz-bg@2x.png) no-repeat center;
  background-size: 100%;
  display: block;
  margin: 0 auto;
  margin-top: calc(7.6875 * var(--remBasicSize));
  position: relative;
}

.quiz-icon-square {
  width: calc(1.375 * var(--remBasicSize));
  height: calc(2.125 * var(--remBasicSize));
  background: url(../images/quiz/quiz-icon-square@2x.png) no-repeat center;
  background-size: 100%;
  position: absolute;
  top: calc(-1 * var(--remBasicSize));
  left: calc(21.1875 * var(--remBasicSize));
}

.quiz-text-beyoung {
  width: calc(13.6875 * var(--remBasicSize));
  height: calc(13.6875 * var(--remBasicSize));
  background: url(../images/quiz/quiz-text-beyoung@2x.png) no-repeat center;
  background-size: 100%;
  display: block;
  margin: 0 auto;
  position: relative;
  top: calc(-6.625 * var(--remBasicSize));
  animation: 25s ease infinite quiz-text-beyoung;
}
@keyframes quiz-text-beyoung {
  50% {
    transform: rotate(360deg);
  }
}

.logo-be-white {
  display: block;
  width: calc(29 * var(--remBasicSize));
  height: calc(4.75 * var(--remBasicSize));
  background: url(../images/quiz/logo-be-white@2x.png) no-repeat center;
  background-size: 100%;
  margin: 0 auto;
  position: relative;
  margin-top: calc(-3.5 * var(--remBasicSize));
}

.h3 {
  font-size: calc(2.375 * var(--remBasicSize));
  color: #ffffff;
  letter-spacing: 0.2rem;
  font-family: "Noto Serif TC", Helvetica, Arial, "黑體-繁", "Heiti TC", "儷黑", "LiHei", "微軟正黑體", "Microsoft JhengHei", serif;
  text-align: center;
  position: relative;
  margin-top: calc(1.75 * var(--remBasicSize));
}

.quiz-text-h3 {
  background: url(../images/quiz/quiz-text-h3@2x.png) no-repeat center;
  background-size: 100%;
  width: calc(3.1875 * var(--remBasicSize));
  height: calc(23.4375 * var(--remBasicSize));
  display: block;
  margin: 0 auto;
  margin-bottom: calc(3.625 * var(--remBasicSize));
  margin-top: calc(4.8125 * var(--remBasicSize));
}

.cover-text {
  font-weight: 300;
  font-family: "Noto Sans TC", Helvetica, Arial, "黑體-繁", "Heiti TC", "儷黑", "LiHei", "微軟正黑體", "Microsoft JhengHei", sans-serif;
  text-align: center;
  color: #fefbf8;
  letter-spacing: 0.2rem;
  line-height: calc(3.625 * var(--remBasicSize));
  font-size: calc(1.75 * var(--remBasicSize));
  margin-top: calc(3.5625 * var(--remBasicSize));
}
.cover-text span {
  display: block;
}
.cover-text .cover-text-letterspacing {
  letter-spacing: 0.98rem;
}
@media screen and (max-width: 750px) {
  .cover-text .cover-text-letterspacing {
    letter-spacing: 0.6rem;
  }
}

.cover-name input {
  width: 300px;
  height: 70px;
  background-color: #fae3e2;
  border: solid 1px #fae3e2;
  font-size: 1.375em;
  text-align: center;
  color: #000;
  margin: 6% auto 7%;
  display: block;
  font-family: "Noto Sans TC", Helvetica, Arial, "黑體-繁", "Heiti TC", "儷黑", "LiHei", "微軟正黑體", "Microsoft JhengHei", sans-serif;
  display: none;
}
@media (max-width: 639px) {
  .cover-name input {
    width: 80%;
    height: 50px;
    font-size: 1em;
  }
}
.cover-name input::placeholder {
  color: #323237;
}
.cover-name input:focus {
  outline: none;
  border-color: #323237;
}

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

---------------------- */
.qz-question {
  position: relative;
  width: calc(43.75 * var(--remBasicSize));
  height: calc(74.375 * var(--remBasicSize));
  margin: 0 auto;
  text-align: center;
  background: url(../images/quiz/question-bg-grey@2x.png) no-repeat center;
  background-size: 100%;
}
.qz-question.qz-q1::before {
  content: "";
  position: absolute;
  width: calc(36.25 * var(--remBasicSize));
  height: calc(36.25 * var(--remBasicSize));
  background: url(../images/quiz/quiz-bg-q01@2x.png) no-repeat center;
  background-size: 100%;
  display: block;
  top: calc(6.625 * var(--remBasicSize));
  left: calc(3.5 * var(--remBasicSize));
}
.qz-question.qz-q1::after {
  content: "";
  position: absolute;
  width: calc(8 * var(--remBasicSize));
  height: calc(7 * var(--remBasicSize));
  background: url(../images/quiz/quiz-title-q1@2x.png) no-repeat center;
  background-size: 100%;
  display: block;
  z-index: 2;
  top: calc(38.125 * var(--remBasicSize));
  left: calc(3.875 * var(--remBasicSize));
}
.qz-question.qz-q2::after {
  content: "";
  position: absolute;
  width: calc(8.625 * var(--remBasicSize));
  height: calc(7 * var(--remBasicSize));
  background: url(../images/quiz/quiz-title-q2@2x.png) no-repeat center;
  background-size: 100%;
  display: block;
  z-index: 2;
  top: calc(38.125 * var(--remBasicSize));
  left: calc(3.875 * var(--remBasicSize));
}
.qz-question.qz-q2::before {
  content: "";
  position: absolute;
  width: calc(36.25 * var(--remBasicSize));
  height: calc(36.25 * var(--remBasicSize));
  background: url(../images/quiz/quiz-bg-q02@2x.png) no-repeat center;
  background-size: 100%;
  display: block;
  top: calc(6.625 * var(--remBasicSize));
  left: calc(3.5 * var(--remBasicSize));
}
.qz-question.qz-q3::after {
  content: "";
  position: absolute;
  width: calc(8.6875 * var(--remBasicSize));
  height: calc(7 * var(--remBasicSize));
  background: url(../images/quiz/quiz-title-q3@2x.png) no-repeat center;
  background-size: 100%;
  display: block;
  z-index: 2;
  top: calc(38.125 * var(--remBasicSize));
  left: calc(3.875 * var(--remBasicSize));
}
.qz-question.qz-q3::before {
  content: "";
  position: absolute;
  width: calc(36.25 * var(--remBasicSize));
  height: calc(36.25 * var(--remBasicSize));
  background: url(../images/quiz/quiz-bg-q03@2x.png) no-repeat center;
  background-size: 100%;
  display: block;
  top: calc(6.625 * var(--remBasicSize));
  left: calc(3.5 * var(--remBasicSize));
}
.qz-question.qz-q4::after {
  content: "";
  position: absolute;
  width: calc(8.6875 * var(--remBasicSize));
  height: calc(7 * var(--remBasicSize));
  background: url(../images/quiz/quiz-title-q4@2x.png) no-repeat center;
  background-size: 100%;
  display: block;
  z-index: 2;
  top: calc(38.125 * var(--remBasicSize));
  left: calc(3.875 * var(--remBasicSize));
}
.qz-question.qz-q4::before {
  content: "";
  position: absolute;
  width: calc(36.25 * var(--remBasicSize));
  height: calc(36.25 * var(--remBasicSize));
  background: url(../images/quiz/quiz-bg-q04@2x.png) no-repeat center;
  background-size: 100%;
  display: block;
  top: calc(6.625 * var(--remBasicSize));
  left: calc(3.5 * var(--remBasicSize));
}
.qz-question.qz-q5::after {
  content: "";
  position: absolute;
  width: calc(8.6875 * var(--remBasicSize));
  height: calc(7 * var(--remBasicSize));
  background: url(../images/quiz/quiz-title-q5@2x.png) no-repeat center;
  background-size: 100%;
  display: block;
  z-index: 2;
  top: calc(38.125 * var(--remBasicSize));
  left: calc(3.875 * var(--remBasicSize));
}
.qz-question.qz-q5::before {
  content: "";
  position: absolute;
  width: calc(36.25 * var(--remBasicSize));
  height: calc(36.25 * var(--remBasicSize));
  background: url(../images/quiz/quiz-bg-q05@2x.png) no-repeat center;
  background-size: 100%;
  display: block;
  top: calc(6.625 * var(--remBasicSize));
  left: calc(3.5 * var(--remBasicSize));
}
.qz-question .qz-question-text {
  font-size: calc(1.875 * var(--remBasicSize));
  line-height: calc(3.125 * var(--remBasicSize));
  color: #ffffff;
  font-weight: 300;
  letter-spacing: 0.05rem;
  font-family: "Noto Sans TC", Helvetica, Arial, "黑體-繁", "Heiti TC", "儷黑", "LiHei", "微軟正黑體", "Microsoft JhengHei", sans-serif;
  position: relative;
  top: calc(47.5 * var(--remBasicSize));
}
.qz-question .qz-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 480px) {
  .qz-question .qz-options::before, .qz-question .qz-options::after {
    content: "";
    width: 100%;
    order: 1;
  }
}
.qz-question .qz-option {
  position: relative;
  width: 36%;
  margin: 15px 15px 0;
  top: calc(53.125 * var(--remBasicSize));
}
.qz-question .qz-option .qz-option-input:checked ~ .qz-option-label::after, .qz-question .qz-option:hover .qz-option-label::after {
  background: rgba(0, 0, 0, 0.7);
  transition: all ease-in-out 0.4s;
}
.qz-question .qz-option .qz-option-input:checked ~ .qz-option-label .qz-option-letter, .qz-question .qz-option:hover .qz-option-label .qz-option-letter {
  font-style: italic;
}
.qz-question .qz-option .qz-option-label {
  display: flex;
  height: 100%;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}
.qz-question .qz-option .qz-option-letter,
.qz-question .qz-option .qz-option-text {
  position: relative;
  z-index: 100;
}
.qz-question .qz-option .qz-option-letter {
  width: 100%;
  font-size: 1.625em;
  font-weight: 300;
  font-family: "Georgia", "Times", "Songti TC", "Noto Serif TC", "Serif";
  margin-bottom: 5px;
}
@media (max-width: 639px) {
  .qz-question .qz-option .qz-option-letter {
    font-size: 1.2em;
  }
}
.qz-question .qz-option input {
  display: none;
}

.qz-result {
  text-align: center;
  font-family: "SaolDisplay", "Georgia", "Times", "Songti TC", "Noto Serif TC", "Serif";
  color: #323237;
  position: relative;
  width: calc(43.75 * var(--remBasicSize));
  height: calc(74.375 * var(--remBasicSize));
  margin: 0 auto;
  text-align: center;
  background: url(../images/quiz/question-bg-grey@2x.png) no-repeat center;
  background-size: 100%;
  padding-top: calc(4.8125 * var(--remBasicSize));
}
.qz-result .result-h3 {
  font-size: calc(2.375 * var(--remBasicSize));
  letter-spacing: 0.05rem;
  font-weight: 300;
  color: #fff;
  font-family: "Noto Sans TC", Helvetica, Arial, "黑體-繁", "Heiti TC", "儷黑", "LiHei", "微軟正黑體", "Microsoft JhengHei", sans-serif;
  margin-bottom: calc(3.125 * var(--remBasicSize));
}
.qz-result .result-line {
  width: calc(0.125 * var(--remBasicSize));
  height: calc(8.3125 * var(--remBasicSize));
  background-color: #fff;
  display: block;
  margin: 0 auto;
  margin-bottom: calc(2.25 * var(--remBasicSize));
}
.qz-result .quiz-icon-quote {
  position: absolute;
  bottom: 0;
  right: 0;
  background: url(../images/quiz/quiz-icon-quote@2x.png) no-repeat center;
  background-size: 100%;
  width: calc(16 * var(--remBasicSize));
  height: calc(12.125 * var(--remBasicSize));
  animation: blur-effect 10s ease-in-out infinite;
}
@keyframes blur-effect {
  0% {
    filter: blur(0);
  }
  50% {
    filter: blur(calc(0.625 * var(--remBasicSize)));
  }
  60% {
    filter: blur(calc(0.625 * var(--remBasicSize)));
  }
}
.qz-result .logo-be-grey {
  background: url(../images/quiz/logo-be-grey@2x.png) no-repeat center;
  background-size: 100%;
  width: calc(29 * var(--remBasicSize));
  height: calc(4.75 * var(--remBasicSize));
  display: block;
  margin: 0 auto;
  position: relative;
  margin-bottom: calc(3.4375 * var(--remBasicSize));
}
.qz-result-content {
  text-align: center;
  margin-bottom: 20px;
}
.qz-result .resultname {
  font-size: 1.8em;
  font-weight: 600;
  margin: 0 0 5px;
  display: none;
}
@media (max-width: 639px) {
  .qz-result .resultname {
    font-size: 1.375em;
  }
}
.qz-result .resultname span {
  font-style: italic;
  background: linear-gradient(transparent 50%, #ffe7e6 0%);
  margin-left: 3px;
  padding: 0 4px;
}
.qz-result .type {
  font-size: 1.8em;
  font-weight: 600;
  margin-bottom: 15px;
}
@media (max-width: 639px) {
  .qz-result .type {
    font-size: 1.375em;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
  }
}
.qz-result .type b {
  color: #be6661;
  padding: 0 2px;
  vertical-align: baseline;
}
.qz-result .txt {
  width: calc(32.6875 * var(--remBasicSize));
  margin: 0 auto;
  font-size: calc(1.875 * var(--remBasicSize));
  line-height: calc(3.125 * var(--remBasicSize));
  letter-spacing: 0.05rem;
  text-align: justify;
  font-weight: 300;
  font-family: "Noto Sans TC", Helvetica, Arial, "黑體-繁", "Heiti TC", "儷黑", "LiHei", "微軟正黑體", "Microsoft JhengHei", sans-serif;
  margin-top: calc(3.75 * var(--remBasicSize));
  color: #fff;
}
.qz-result .txt {
  margin-bottom: 20px;
}
.qz-result .txt2 {
  margin-bottom: 15px;
}

/* ---------------------
        表單
---------------------- */
.qz-tetris {
  padding: 2em 5%;
}

.qz-options .qz-option label[for=qz-1-1] .qz-option-text {
  background: url(../images/quiz/quiz-icon-wrong@2x.png) no-repeat center;
  background-size: 40%;
}
.qz-options .qz-option label[for=qz-1-1] .qz-option-text:hover {
  background: url(../images/quiz/quiz-icon-wrong-black@2x.png) no-repeat center;
  background-size: 40%;
  background-color: #fff;
}

.qz-options .qz-option label[for=qz-1-2] .qz-option-text {
  background: url(../images/quiz/quiz-icon-correct@2x.png) no-repeat center;
  background-size: 40%;
}
.qz-options .qz-option label[for=qz-1-2] .qz-option-text:hover {
  background: url(../images/quiz/quiz-icon-correct-black@2x.png) no-repeat center;
  background-size: 40%;
  background-color: #fff;
}

.qz-options .qz-option label[for=qz-2-1] .qz-option-text {
  background: url(../images/quiz/quiz-icon-wrong@2x.png) no-repeat center;
  background-size: 40%;
}
.qz-options .qz-option label[for=qz-2-1] .qz-option-text:hover {
  background: url(../images/quiz/quiz-icon-wrong-black@2x.png) no-repeat center;
  background-size: 40%;
  background-color: #fff;
}

.qz-options .qz-option label[for=qz-2-2] .qz-option-text {
  background: url(../images/quiz/quiz-icon-correct@2x.png) no-repeat center;
  background-size: 40%;
}
.qz-options .qz-option label[for=qz-2-2] .qz-option-text:hover {
  background: url(../images/quiz/quiz-icon-correct-black@2x.png) no-repeat center;
  background-size: 40%;
  background-color: #fff;
}

.qz-options .qz-option label[for=qz-3-1] .qz-option-text {
  background: url(../images/quiz/quiz-icon-wrong@2x.png) no-repeat center;
  background-size: 40%;
}
.qz-options .qz-option label[for=qz-3-1] .qz-option-text:hover {
  background: url(../images/quiz/quiz-icon-wrong-black@2x.png) no-repeat center;
  background-size: 40%;
  background-color: #fff;
}

.qz-options .qz-option label[for=qz-3-2] .qz-option-text {
  background: url(../images/quiz/quiz-icon-correct@2x.png) no-repeat center;
  background-size: 40%;
}
.qz-options .qz-option label[for=qz-3-2] .qz-option-text:hover {
  background: url(../images/quiz/quiz-icon-correct-black@2x.png) no-repeat center;
  background-size: 40%;
  background-color: #fff;
}

.qz-options .qz-option label[for=qz-4-1] .qz-option-text {
  background: url(../images/quiz/quiz-icon-wrong@2x.png) no-repeat center;
  background-size: 40%;
}
.qz-options .qz-option label[for=qz-4-1] .qz-option-text:hover {
  background: url(../images/quiz/quiz-icon-wrong-black@2x.png) no-repeat center;
  background-size: 40%;
  background-color: #fff;
}

.qz-options .qz-option label[for=qz-4-2] .qz-option-text {
  background: url(../images/quiz/quiz-icon-correct@2x.png) no-repeat center;
  background-size: 40%;
}
.qz-options .qz-option label[for=qz-4-2] .qz-option-text:hover {
  background: url(../images/quiz/quiz-icon-correct-black@2x.png) no-repeat center;
  background-size: 40%;
  background-color: #fff;
}

.qz-options .qz-option label[for=qz-5-1] .qz-option-text {
  background: url(../images/quiz/quiz-icon-wrong@2x.png) no-repeat center;
  background-size: 40%;
}
.qz-options .qz-option label[for=qz-5-1] .qz-option-text:hover {
  background: url(../images/quiz/quiz-icon-wrong-black@2x.png) no-repeat center;
  background-size: 40%;
  background-color: #fff;
}

.qz-options .qz-option label[for=qz-5-2] .qz-option-text {
  background: url(../images/quiz/quiz-icon-correct@2x.png) no-repeat center;
  background-size: 40%;
}
.qz-options .qz-option label[for=qz-5-2] .qz-option-text:hover {
  background: url(../images/quiz/quiz-icon-correct-black@2x.png) no-repeat center;
  background-size: 40%;
  background-color: #fff;
}

.qz-options .qz-option .qz-option-text {
  width: calc(13.4375 * var(--remBasicSize));
  height: calc(8.125 * var(--remBasicSize));
  border: 1px solid #fff;
  display: block;
  border-radius: calc(4.125 * var(--remBasicSize));
}

[data-aos=an-cover-text] {
  opacity: 0;
}
[data-aos=an-cover-text].aos-animate {
  opacity: 1;
  transform: translateY(calc(-0.9375 * var(--remBasicSize)));
}/*# sourceMappingURL=style.css.map */