@charset "UTF-8";
/**
 * * Quiz
 * */
:root {
  --gap: 25px;
}

.quiz-wrap {
  color: #222;
  overflow: hidden;
  font-family: "Roboto", "Noto Sans TC", sans-serif;
  padding-top: max(80px, 4vw);
  padding-bottom: max(130px, 6vw);
  background: url(../images/quiz/bg.jpg) repeat 0 0;
  font-family: sans-serif;
  font-size: 16px;
}
@media (max-width: 579px) {
  .quiz-wrap {
    padding-top: 50px;
  }
}
.quiz-wrap * {
  position: relative;
}
.quiz-wrap .container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gap);
  padding-right: var(--gap);
}
.quiz-wrap .hidden {
  display: none !important;
}

/**
 * * Voice
 * */
.quiz-voice {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 0 max(3vw, 30px);
}
@media (min-width: 768px) {
  .quiz-voice[data-id=end] .left img {
    -ms-flex-preferred-size: 160%;
        flex-basis: 160%;
  }
}
.quiz-voice[data-id=end] .right {
  padding-top: calc(var(--gap) * 2.5);
}
.quiz-voice[data-id=end] .right::after {
  content: "";
  position: absolute;
  display: block;
  width: 35px;
  aspect-ratio: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' %3E%3Cpath d='m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%23ccc' d='M8.4 6.2a1 1 0 0 1 1.2 1.6c-1.564 1.173-2.46 2.314-2.973 3.31A3.5 3.5 0 1 1 4 14.558a7.6 7.6 0 0 1 .508-3.614C5.105 9.438 6.272 7.796 8.4 6.2m9 0a1 1 0 0 1 1.2 1.6c-1.564 1.173-2.46 2.314-2.973 3.31A3.5 3.5 0 1 1 13 14.558a7.6 7.6 0 0 1 .508-3.614c.598-1.506 1.764-3.148 3.892-4.744'/%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0/contain;
  top: var(--gap);
  left: var(--gap);
}
.quiz-voice .right {
  background-color: #fff;
  border-radius: 20px;
  padding: max(3vw, 25px) max(4vw, 22px) max(4vw, 35px);
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.quiz-voice .right::before {
  content: "";
  width: 0;
  height: 0;
  display: block;
  border-style: solid;
  border-width: 15px 15px 15px 0;
  border-color: transparent #fff transparent transparent;
  position: absolute;
  top: 50%;
  margin-top: -15px;
  left: -14px;
}
.quiz-voice .left {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 max(40%, 300px);
          flex: 0 0 max(40%, 300px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.quiz-voice .left img {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 140%;
          flex: 0 0 140%;
  max-width: none;
  width: 140%;
  width: 100%;
}
@media (max-width: 767px) {
  .quiz-voice {
    display: block;
  }
  .quiz-voice .left {
    aspect-ratio: 1200/500;
  }
  .quiz-voice .left img {
    margin: -12% auto;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 125%;
            flex: 0 0 125%;
    width: 125%;
  }
  .quiz-voice .right::before {
    top: -15px;
    left: 50%;
    margin-left: -15px;
    margin-top: auto;
    border-color: transparent transparent #fff transparent;
    border-width: 0 15px 15px 15px;
  }
}
.quiz-voice .quiz-no {
  color: #888;
  position: absolute;
  right: 15px;
  bottom: 15px;
  white-space: nowrap;
  font-size: 1.25em;
  line-height: 1.2;
  font-weight: 350;
  font-family: "Concert One", sans-serif;
}
@media (max-width: 499px) {
  .quiz-voice .quiz-no {
    bottom: 10px;
  }
}
.quiz-voice .quiz-content {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  font-size: 1em;
  line-height: 2;
}
.quiz-voice .quiz-content .title {
  margin: 0 0 15px;
  padding: 0;
  font-weight: 600;
  font-size: 1.25em;
  color: #ed2e4e;
  letter-spacing: 0.1em;
  display: block;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.quiz-voice .quiz-content p {
  display: block;
  padding: 0;
  margin: 15px 0;
}
.quiz-voice .quiz-content .audio-wrap {
  margin: 15px 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 1em;
  width: 100%;
}
.quiz-voice .quiz-content .audio-wrap figcaption {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  white-space: nowrap;
}
.quiz-voice .quiz-content .audio-wrap audio {
  max-width: 100%;
}
@media (max-width: 499px) {
  .quiz-voice .quiz-content .audio-wrap {
    display: block;
  }
  .quiz-voice .quiz-content .audio-wrap audio {
    width: 100%;
    margin-top: 5px;
  }
}
.quiz-voice .quiz-content .link-list {
  list-style: none;
  margin: 15px 0;
  padding: 0;
}
.quiz-voice .quiz-content .link-list > li {
  display: block;
  margin: 0 0 10px;
  padding: 0 0 0 25px;
}
.quiz-voice .quiz-content .link-list > li::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50px;
  position: absolute;
  left: 0;
  top: 5px;
  background: #ed2e4e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M9.399 4.328a.75.75 0 0 1 1.06 0l6.364 6.363a1.75 1.75 0 0 1 0 2.475L10.46 19.53a.75.75 0 0 1-1.06-1.06l6.364-6.364a.25.25 0 0 0 0-.354L9.399 5.388a.75.75 0 0 1 0-1.06' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center center/90% auto;
}
.quiz-voice .quiz-content .link-list > li button, .quiz-voice .quiz-content .link-list > li a {
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  padding: 0;
  margin: 0;
  display: inline-block;
  border: none;
  background: none;
  color: inherit;
  border-bottom: 1px solid #333;
}
.quiz-voice .quiz-content .link-list > li button:hover, .quiz-voice .quiz-content .link-list > li a:hover {
  color: #ed2e4e;
  border-bottom-color: #ed2e4e;
}
.quiz-voice .quiz-content .link-list > li button:visited, .quiz-voice .quiz-content .link-list > li a:visited {
  color: #666;
  border-bottom-color: #666;
}
.quiz-voice .quiz-content .ending-btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 1em;
  margin: 25px auto;
}
.quiz-voice .quiz-content .ending-btns button, .quiz-voice .quiz-content .ending-btns a {
  min-width: 40%;
  background-color: #ed2e4e;
  border: none;
  cursor: pointer;
  color: #fff;
  font-weight: 500;
  position: relative;
  border-radius: 100em;
  display: inline-block;
  font-size: 1.125em;
  line-height: 1.5;
  padding: 12px 1em 12px;
  overflow: hidden;
  text-wrap: nowrap;
  text-align: center;
}
.quiz-voice .quiz-content .ending-btns button:hover, .quiz-voice .quiz-content .ending-btns a:hover {
  -webkit-box-shadow: 50em 0 0 #d21a30 inset;
          box-shadow: 50em 0 0 #d21a30 inset;
  color: #fff;
}
.quiz-voice .quiz-content .ending-btns .btn-share {
  background-color: #4267b2;
}
.quiz-voice .quiz-content .ending-btns .btn-share:hover {
  -webkit-box-shadow: 50em 0 0 #3358a3 inset;
          box-shadow: 50em 0 0 #3358a3 inset;
}
.quiz-voice .quiz-content .support-list {
  list-style: none;
  margin: 15px 0 0 0;
  padding: 15px 0 0 0;
  border-top: 1px dotted #ccc;
}
.quiz-voice .quiz-content .support-list > li {
  padding-left: 80px;
  margin-bottom: 15px;
}
.quiz-voice .quiz-content .support-list > li .stit {
  width: 80px;
  position: absolute;
  top: 0.85em;
  left: 0;
  font-size: 0.875em;
  color: #666;
}
.quiz-voice .quiz-content .support-list > li img {
  display: block;
  max-height: 55px;
  margin-bottom: 5px;
}
.quiz-voice .quiz-btns {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 1em;
  margin: 25px 0 10px;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.quiz-voice .quiz-btns button,
.quiz-voice .quiz-btns a {
  min-width: min(120px, 50% - 0.5em);
  background-color: #ed2e4e;
  border: none;
  cursor: pointer;
  color: #fff;
  font-weight: 500;
  position: relative;
  border-radius: 100em;
  display: inline-block;
  font-size: 1.125em;
  line-height: 1.5;
  padding: 12px 1em 12px;
  overflow: hidden;
  text-wrap: nowrap;
  text-align: center;
}
.quiz-voice .quiz-btns button:hover,
.quiz-voice .quiz-btns a:hover {
  -webkit-box-shadow: 50em 0 0 #d21a30 inset;
          box-shadow: 50em 0 0 #d21a30 inset;
  color: #fff;
}
.quiz-voice .quiz-btns .quiz-prev {
  background-color: #333;
}
.quiz-voice .quiz-btns .quiz-prev:hover {
  -webkit-box-shadow: 50em 0 0 #555 inset;
          box-shadow: 50em 0 0 #555 inset;
}

/**
 * * choice
 * */
.quiz-choice-start .left {
  aspect-ratio: 1200/500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.quiz-choice-start .left img {
  margin: -5% auto;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 115%;
          flex: 0 0 115%;
  max-width: none;
  width: 115%;
}
@media (max-width: 767px) {
  .quiz-choice-start .left img {
    width: 140%;
    -ms-flex-preferred-size: 140%;
        flex-basis: 140%;
  }
}
.quiz-choice-start .right {
  max-width: 800px;
  margin: 0 auto;
}
.quiz-choice-start .quiz-content {
  background-color: #fff;
  border-radius: 20px;
  padding: max(2vw, 25px) max(3vw, 35px);
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  font-size: 1em;
  line-height: 2;
}
.quiz-choice-start .choice-subhead {
  background: #cfb48f;
  color: #fff;
  margin: 0 auto 1em;
  padding: 0.5em 1em;
  font-size: clamp(1.25em, 1.4vw, 1.75em);
  letter-spacing: 0.1em;
  font-weight: 700;
  border-radius: 1.25em;
  text-align: center;
  position: relative;
  z-index: 1;
}
.quiz-choice-start .choice-subhead::before, .quiz-choice-start .choice-subhead::after {
  content: "";
  display: block;
  position: absolute;
  background: url(../images/quiz/qz_nail.png) center/cover;
  width: 2em;
  aspect-ratio: 135/26;
  z-index: 1;
  bottom: 0;
}
.quiz-choice-start .choice-subhead::before {
  left: 3em;
  -webkit-transform: rotate(90deg) translateY(-50%);
      -ms-transform: rotate(90deg) translateY(-50%);
          transform: rotate(90deg) translateY(-50%);
  -webkit-transform-origin: left top;
      -ms-transform-origin: left top;
          transform-origin: left top;
}
.quiz-choice-start .choice-subhead::after {
  right: 3em;
  -webkit-transform: rotate(90deg) translateY(-50%) scaleX(-1);
      -ms-transform: rotate(90deg) translateY(-50%) scaleX(-1);
          transform: rotate(90deg) translateY(-50%) scaleX(-1);
  -webkit-transform-origin: right top;
      -ms-transform-origin: right top;
          transform-origin: right top;
}

.quiz-choice ~ .support-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px max(3vw, 35px);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  list-style: none;
  margin: 15px 0 0 0;
  padding: 15px 0 0 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.quiz-choice ~ .support-list > li {
  padding-left: 90px;
}
.quiz-choice ~ .support-list > li .stit {
  width: 90px;
  position: absolute;
  top: 0.85em;
  left: 0;
  font-size: 1em;
  color: #333;
}
.quiz-choice ~ .support-list > li img {
  display: block;
  max-height: 70px;
  margin-bottom: 15px;
}
@media (max-width: 991px) {
  .quiz-choice ~ .support-list {
    display: block;
    text-align: center;
  }
  .quiz-choice ~ .support-list > li {
    display: block;
    padding-left: 0;
    text-align: center;
  }
  .quiz-choice ~ .support-list > li .stit {
    display: block;
    position: relative;
    text-align: center;
    left: auto;
    top: auto;
    margin: 0 auto;
  }
  .quiz-choice ~ .support-list > li img {
    display: block;
    margin: 0 auto;
  }
}
.quiz-choice .left {
  max-width: min(1000px, 100%);
  aspect-ratio: 1200/500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.quiz-choice .left img {
  margin: -5% auto;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 115%;
          flex: 0 0 115%;
  max-width: none;
  width: 115%;
}
@media (max-width: 767px) {
  .quiz-choice .left img {
    width: 140%;
    -ms-flex-preferred-size: 140%;
        flex-basis: 140%;
  }
}
.quiz-choice .right {
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 20px;
  padding: max(2vw, 25px) max(3vw, 35px);
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.quiz-choice .quiz-no {
  color: #ed2e4e;
  position: absolute;
  left: 0;
  top: max(1.8vw, 20px);
  white-space: nowrap;
  font-size: 2em;
  -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  line-height: 1.2;
  font-weight: 350;
  font-family: "Concert One", sans-serif;
}
.quiz-choice .quiz-content {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  font-size: 1em;
  line-height: 2;
}
.quiz-choice .quiz-content .title {
  margin: 0 0 15px;
  padding: 0;
  font-weight: 600;
  font-size: 1.25em;
  color: #ed2e4e;
  letter-spacing: 0.1em;
  display: block;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.quiz-choice .quiz-content p {
  display: block;
  padding: 0;
  margin: 0 0 10px 0;
}
.quiz-choice .quiz-content .ending-btns {
  display: block;
  margin: 25px auto;
  max-width: 200px;
}
.quiz-choice .quiz-content .ending-btns button, .quiz-choice .quiz-content .ending-btns a {
  min-width: auto;
  width: 100%;
  margin: 0 auto 15px;
  background-color: #ed2e4e;
  border: none;
  cursor: pointer;
  color: #fff;
  font-weight: 500;
  position: relative;
  border-radius: 100em;
  display: block;
  font-size: 1em;
  line-height: 1.5;
  padding: 12px 1em 12px;
  overflow: hidden;
  text-wrap: nowrap;
  text-align: center;
}
.quiz-choice .quiz-content .ending-btns button:hover, .quiz-choice .quiz-content .ending-btns a:hover {
  -webkit-box-shadow: 50em 0 0 #d21a30 inset;
          box-shadow: 50em 0 0 #d21a30 inset;
  color: #fff;
}
.quiz-choice .quiz-content .ending-btns .btn-share {
  background-color: #4267b2;
}
.quiz-choice .quiz-content .ending-btns .btn-share:hover {
  -webkit-box-shadow: 50em 0 0 #3358a3 inset;
          box-shadow: 50em 0 0 #3358a3 inset;
}
.quiz-choice .quiz-content .ending-btns .btn-home {
  background-color: #fbb600;
}
.quiz-choice .quiz-content .ending-btns .btn-home:hover {
  -webkit-box-shadow: 50em 0 0 #eba606 inset;
          box-shadow: 50em 0 0 #eba606 inset;
}
.quiz-choice .quiz-btns {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 1em;
  margin: 25px 0 10px;
}
.quiz-choice .quiz-prev,
.quiz-choice .quiz-next {
  min-width: min(120px, 50% - 0.5em);
  background-color: #ed2e4e;
  border: none;
  cursor: pointer;
  color: #fff;
  font-weight: 500;
  position: relative;
  border-radius: 100em;
  display: inline-block;
  font-size: 0.9375em;
  line-height: 1.5;
  padding: 12px 1em 12px;
  overflow: hidden;
  text-wrap: nowrap;
  text-align: center;
}
.quiz-choice .quiz-prev:hover,
.quiz-choice .quiz-next:hover {
  -webkit-box-shadow: 50em 0 0 #d21a30 inset;
          box-shadow: 50em 0 0 #d21a30 inset;
  color: #fff;
}
.quiz-choice .quiz-prev {
  background-color: #333;
}
.quiz-choice .quiz-prev:hover {
  -webkit-box-shadow: 50em 0 0 #555 inset;
          box-shadow: 50em 0 0 #555 inset;
}
.quiz-choice .quiz-option {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  overflow: hidden;
  text-align: left;
  width: 100%;
  background-color: #fff;
  border: 1px solid #ed2e4e;
  color: #222;
  font-size: 1em;
  border-radius: 10px;
  margin: 0 0 0.85em;
  padding: 0;
  font-weight: 400;
  cursor: pointer;
  line-height: 1.5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-transition: -webkit-transform 0.2s, -webkit-box-shadow 0.2s;
  transition: -webkit-transform 0.2s, -webkit-box-shadow 0.2s;
  transition: transform 0.2s, box-shadow 0.2s;
  transition: transform 0.2s, box-shadow 0.2s, -webkit-transform 0.2s, -webkit-box-shadow 0.2s;
}
.quiz-choice .quiz-option span {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding: 0.85em;
}
.quiz-choice .quiz-option:hover {
  -webkit-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15);
          box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15);
}
.quiz-choice .quiz-option .num {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  padding: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2.5em;
  background-color: #ed2e4e;
  color: #fff;
}
.quiz-choice[data-id=end] {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 max(3vw, 30px);
  padding-top: max(3vw, 35px);
  padding-bottom: max(3vw, 35px);
}
@media (max-width: 1199px) {
  .quiz-choice[data-id=end] {
    gap: 0;
  }
}
@media (max-width: 839px) {
  .quiz-choice[data-id=end] {
    display: block;
  }
  .quiz-choice[data-id=end] .left {
    max-width: min(100%, 400px);
  }
}
.quiz-choice[data-id=end] .left {
  margin: 0 auto;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.quiz-choice[data-id=end] .right {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 500px;
          flex: 0 0 500px;
  background-color: transparent;
  text-align: center;
}
.quiz-choice[data-id=end] .title {
  font-size: clamp(1.5em, 1.75vw, 1.875em);
  letter-spacing: 0.1em;
  white-space: nowrap;
  font-weight: 600;
}
.quiz-choice[data-id=end] .quiz-no {
  display: none !important;
}
.quiz-choice[data-id=end] .quiz-btns {
  display: none;
}
@media (max-width: 767px) {
  .quiz-choice[data-id=end] {
    display: block;
  }
  .quiz-choice[data-id=end] .left {
    aspect-ratio: auto;
  }
  .quiz-choice[data-id=end] .right {
    padding: 0;
  }
  .quiz-choice[data-id=end] .quiz-content {
    padding: 30px 0 0 0;
  }
}
.quiz-choice[data-id=end] .title {
  font-size: 1.25em;
  letter-spacing: 0em;
  font-weight: 600;
}

.quiz-formbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 0 25px;
  padding: 0;
  gap: 0 10px;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding-left: 6em;
}
@media (max-width: 499px) {
  .quiz-formbox {
    display: block;
    padding-left: 0;
  }
}

.quiz-label {
  position: absolute;
  width: 5.5em;
  white-space: nowrap;
  top: 1px;
  left: 0;
}
@media (max-width: 499px) {
  .quiz-label {
    position: relative;
    display: block;
    width: 100%;
    top: auto;
    left: auto;
  }
}

.quiz-valid-msg {
  margin: -10px 0 15px 0;
  padding-left: 7em;
  font-size: 0.875em;
  color: #ed2e4e;
  display: block;
  white-space: nowrap;
}
@media (max-width: 499px) {
  .quiz-valid-msg {
    padding-left: 0;
  }
}

.quiz-radio {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  white-space: nowrap;
}
.quiz-radio span {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  height: 100%;
  min-width: 60px;
  border: none;
  outline: none;
  z-index: 0;
  color: #222;
  text-align: center;
  font-size: 0.9375em;
  line-height: 1.5;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 5px 8px 4px;
  cursor: pointer;
}
.quiz-radio input[type=radio],
.quiz-radio input[type=checkbox] {
  outline: none;
  z-index: -100 !important;
  width: 1px !important;
  height: 1px !important;
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute;
  opacity: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.quiz-radio input[type=radio][disabled] + span,
.quiz-radio input[type=checkbox][disabled] + span {
  pointer-events: none;
  background-color: #eee;
  color: #666;
  border-color: #ddd;
}
.quiz-radio input[type=radio]:not(.checked) + span:hover,
.quiz-radio input[type=checkbox]:not(.checked) + span:hover {
  border-color: #aaa;
  color: #111;
}
.quiz-radio input[type=radio]:checked + span,
.quiz-radio input[type=checkbox]:checked + span {
  background-color: #ed2e4e !important;
  border-color: #ed2e4e !important;
  color: #fff !important;
}

.quiz-form-btns {
  display: block;
  margin: 25px auto 0;
  text-align: center;
}

.quiz-submit {
  min-width: 180px;
  background-color: #ed2e4e;
  border: none;
  cursor: pointer;
  color: #fff;
  font-weight: 500;
  position: relative;
  border-radius: 100em;
  display: block;
  font-size: 1.125em;
  line-height: 1.5;
  padding: 0.5em 1em;
  margin: 0 auto;
  overflow: hidden;
  text-wrap: nowrap;
  text-align: center;
}
.quiz-submit:hover {
  -webkit-box-shadow: 50em 0 0 #d21a30 inset;
          box-shadow: 50em 0 0 #d21a30 inset;
  color: #fff;
}

.quiz-reset {
  width: auto;
  display: block;
  margin: 10px auto 0;
  color: #cfb48f;
  font-size: 0.9375em;
  border: none;
  cursor: pointer;
  background: none;
}
.quiz-reset:hover {
  color: #e39068;
}

/**
 * * Quiz - 彈出
 * */
.dialog {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 2000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 1;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
  --plyr-color-main: #ed2e4e;
}
.dialog-content {
  background-color: #fff;
  max-width: min(100% - var(--gap) * 2, 90vh - var(--gap) * 3, 800px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  margin: var(--gap) auto 0;
  border-radius: 20px;
  opacity: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.5s;
  transition: opacity 0.35s, -webkit-transform 0.5s;
  transition: opacity 0.35s, transform 0.5s;
  transition: opacity 0.35s, transform 0.5s, -webkit-transform 0.5s;
}
.dialog-close {
  width: 35px;
  height: 35px;
  position: absolute;
  z-index: 100;
  border: none;
  background: none;
  right: 10px;
  top: 10px;
  cursor: pointer;
  border-radius: 50px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21'%3E%3Cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' d='m15.5 15.5l-10-10zm0-10l-10 10' stroke-width='1'/%3E%3C/svg%3E") no-repeat center center/85% auto;
}
.dialog-close:hover {
  background: #333 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' d='m15.5 15.5l-10-10zm0-10l-10 10' stroke-width='1'/%3E%3C/svg%3E") no-repeat center center/85% auto;
}
.dialog[data-video-id] {
  padding-top: 50px;
}
.dialog[data-video-id] .dialog-close {
  top: -40px;
  right: 0;
  background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' d='m15.5 15.5l-10-10zm0-10l-10 10' stroke-width='1'/%3E%3C/svg%3E") no-repeat center center/85% auto;
}
.dialog-heading {
  padding: var(--gap) var(--gap) var(--gap) calc(var(--gap) + 4em);
}
.dialog-heading::after {
  content: "";
  display: block;
  position: absolute;
  background: url(../images/quiz/qz_book.png) no-repeat center/contain;
  aspect-ratio: 1;
  width: 2.8em;
  left: calc(var(--gap) + 0.5em);
  top: calc(var(--gap) + 0.5em);
  line-height: 1.2;
}
.dialog-heading .tag {
  display: block;
  font-size: 0.875em;
  margin: 0;
  padding: 0;
}
.dialog-heading .title {
  margin: 0;
  padding: 0;
  font-weight: 600;
  font-size: 1.125em;
  line-height: 1.4;
}
.dialog-body {
  padding: 0 var(--gap) var(--gap) var(--gap);
  max-height: max(100vh - 300px);
  overflow-y: auto;
  overflow-x: hidden;
  line-height: 1.8;
}
.dialog.hidden {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  opacity: 0;
}
.dialog.hidden .dialog-content {
  opacity: 0;
  -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
          transform: scale(0.8);
}

.quiz-topic-subhead {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 450px;
  gap: 10px;
  margin: 25px auto;
  padding: 0 52px;
}
.quiz-topic-subhead::before {
  content: "";
  position: absolute;
  background: url(../images/quiz/qz_news.png) center/cover;
  width: 50px;
  aspect-ratio: 1;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.quiz-topic-subhead::after {
  content: "";
  position: absolute;
  background: url(../images/quiz/qz_tv.png) center/cover;
  width: 50px;
  aspect-ratio: 1;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(5deg);
      -ms-transform: translateY(-50%) rotate(5deg);
          transform: translateY(-50%) rotate(5deg);
}
.quiz-topic-subhead .en {
  font-size: 0.9375em;
  letter-spacing: 0.15em;
  margin-right: -0.15em;
  font-weight: 550;
}
.quiz-topic-subhead .zh {
  font-size: clamp(1.75em, 2vw, 2.25em);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-right: -0.08em;
  position: relative;
  padding: 0 35px;
  line-height: 1.25;
  text-align: center;
}
.quiz-topic-subhead .zh::before, .quiz-topic-subhead .zh::after {
  content: "";
  position: absolute;
  background: url(../images/quiz/qz_lines.svg) center/cover;
  top: 40%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 25px;
  aspect-ratio: 39/30;
}
.quiz-topic-subhead .zh::before {
  left: 0;
}
.quiz-topic-subhead .zh::after {
  right: 0;
  -webkit-transform: scaleX(-1) translateY(-50%);
      -ms-transform: scaleX(-1) translateY(-50%);
          transform: scaleX(-1) translateY(-50%);
}
@media (max-width: 579px) {
  .quiz-topic-subhead {
    max-width: 100%;
    padding: 0;
  }
  .quiz-topic-subhead::before, .quiz-topic-subhead::after {
    display: none;
  }
  .quiz-topic-subhead .en {
    font-size: 0.75em;
    letter-spacing: 0.1em;
    margin-right: -0.1em;
  }
  .quiz-topic-subhead .zh {
    padding: 0 35px;
    font-size: 1.375em;
  }
  .quiz-topic-subhead .zh::before, .quiz-topic-subhead .zh::after {
    width: 20px;
  }
}

.quiz-topic-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  margin: 25px auto;
  width: 100%;
  gap: 0 20px;
  position: relative;
}
.quiz-topic-list .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc(50% - 10px);
          flex: 0 0 calc(50% - 10px);
  margin-bottom: 25px;
}
.quiz-topic-list .item .img {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  z-index: 0;
  margin: 5px;
  overflow: hidden;
}
.quiz-topic-list .item .img img {
  aspect-ratio: 350/180;
  -o-object-fit: cover;
     object-fit: cover;
  max-width: none;
  width: 100%;
}
.quiz-topic-list .item .text {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-top: -5px;
  z-index: 2;
  padding: 25px;
  border-radius: 15px;
  background-color: #fff;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.quiz-topic-list .item .title {
  display: block;
  margin: 0 auto 5px;
  line-height: 1.375;
  color: #ed2e4e;
  font-weight: 600;
}
.quiz-topic-list .item .subtitle {
  letter-spacing: 0.125em;
  line-height: 1.5em;
  display: inline-block;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(15%, transparent), color-stop(15%, #f6e38c), color-stop(60%, #f6e38c), color-stop(60%, transparent));
  background: linear-gradient(to top, transparent 15%, #f6e38c 15%, #f6e38c 60%, transparent 60%);
  padding: 0 0.25em;
  margin: 0 0.25em;
  font-size: 1em;
  background-size: auto 1.5em;
}
.quiz-topic-list .item p {
  margin: 15px auto;
  font-size: 0.875em;
  color: #666;
  padding: 0;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.quiz-topic-list .item .btn {
  min-width: min(220px, 50% - 0.5em);
  background-color: #ed2e4e;
  border: none;
  cursor: pointer;
  color: #fff;
  font-weight: 500;
  position: relative;
  border-radius: 100em;
  display: inline-block;
  font-size: 0.9375em;
  line-height: 1.5;
  padding: 12px 1em 12px;
  overflow: hidden;
  text-wrap: nowrap;
  text-align: center;
}
.quiz-topic-list .item .btn:hover {
  -webkit-box-shadow: 50em 0 0 #d21a30 inset;
          box-shadow: 50em 0 0 #d21a30 inset;
  color: #fff;
}
@media (max-width: 767px) {
  .quiz-topic-list {
    display: block;
    width: 100%;
  }
  .quiz-topic-list .item .text {
    padding: 20px 10px;
  }
  .quiz-topic-list .item p {
    line-height: 1.6;
  }
  .quiz-topic-list .item .btn {
    min-width: 150px;
  }
}