@charset "UTF-8";
/* reset */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/earlyaccess/cwtexyen.css");
@import url("https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  font-family: "Noto Sans TC", "PT Sans", "PingFang SC", "Microsoft Yahei", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  vertical-align: baseline; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

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

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

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

/*自訂*/
a {
  text-decoration: none;
  outline: none; }

body {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  color: #483232; }

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box; }

input {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: none;
  outline: none;
  border-radius: none; }

/*HTML5 tag*/
section, article, aside, footer, header, nav, main {
  display: block; }

/*Input reset*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
  /*透明*/ }

input[type=submit], input[type=reset], input[type=button], input[type=text], input[type=password], textarea, select {
  -webkit-appearance: none; }

button {
  outline: none;
  border: none;
  background-color: none; }

.codeBox.thin .gc-reset {
  top: -1px; }

.codeBox .img {
  height: 75%;
  background-size: auto 125% !important;
  width: 100px !important;
  top: 12% !important; }

.codeBox.thin.verify__box > div:nth-child(2) {
  height: 50px !important; }

a {
  display: inline-block;
  width: 100%;
  height: 100%; }

img {
  width: 100%;
  height: auto;
  display: block; }

.l-wrapper {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  position: relative; }

.l-wrapperSub {
  max-width: 1170px;
  width: 100%;
  margin: 0 auto;
  position: relative; }

.l-contentWidth {
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  position: relative; }
  @media screen and (max-width: 680px) {
    .l-contentWidth {
      width: 85%; } }

.l-padding-b5 {
  padding-bottom: 5px; }

.l-margin-b3 {
  margin-bottom: 3%; }

.l-btn {
  display: inline-block;
  width: 100%;
  height: 100%;
  color: #fff;
  font-weight: bold; }

.l-btnStyle {
  display: inline-block;
  width: 100%;
  height: 100%; }

.l-btn-primary {
  background-color: #483232;
  color: #fff; }

.l-floatLeft {
  float: left; }

.l-floatRight {
  float: right; }

.l-clearfix:after {
  content: '';
  display: table;
  clear: both; }

.l-length {
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis; }

.l-title {
  font-size: 24px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 3px; }

.l-textCenter {
  text-align: center; }

.popup__area__wrap {
  position: relative;
  display: none; }
  .popup__area__wrap.popupOpen {
    display: block; }
  .popup__area__wrap .overlay__wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.8); }

.load__iframe {
  width: 95%;
  height: 80%;
  padding: 2% 0 0 0; }

.record__body, .look__gift__body {
  max-width: 768px;
  height: 600px;
  width: 100%;
  border: 1px solid #ae521a;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-image: url("../img/popupBg.png");
  background-size: 10%;
  background-position: 0 0;
  background-repeat: repeat;
  border-radius: 40px;
  display: none; }
  .record__body.showInfoMsg, .look__gift__body.showInfoMsg {
    display: block; }
  .record__body::after, .look__gift__body::after {
    content: '';
    position: absolute;
    background-image: url("../img/flower09.png");
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    max-width: 92px;
    width: 100%;
    height: 8vw;
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1);
    left: -2%;
    top: -2%; }
  .record__body .close__area, .look__gift__body .close__area {
    width: 100%;
    position: relative; }
    .record__body .close__area .close__icon, .look__gift__body .close__area .close__icon {
      width: 35px;
      height: 35px;
      position: absolute;
      cursor: pointer;
      top: 50%;
      right: 4%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%); }
      .record__body .close__area .close__icon span, .look__gift__body .close__area .close__icon span {
        position: absolute;
        background-color: #fff;
        width: 100%;
        height: 4px;
        border-radius: 50px;
        top: 50%;
        left: 0;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
        .record__body .close__area .close__icon span:nth-child(1), .look__gift__body .close__area .close__icon span:nth-child(1) {
          -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          transform: rotate(45deg); }
        .record__body .close__area .close__icon span:nth-child(2), .look__gift__body .close__area .close__icon span:nth-child(2) {
          -webkit-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          transform: rotate(-45deg); }
      .record__body .close__area .close__icon:hover, .look__gift__body .close__area .close__icon:hover {
        -webkit-animation: shakeCashEffect .1s infinite linear;
        animation: shakeCashEffect .1s infinite linear; }
  .record__body .record__title, .look__gift__body .record__title {
    width: 100%;
    background-color: #cd8d3d;
    padding: 2% 0;
    color: #fef9de;
    border-top-left-radius: 38px;
    border-top-right-radius: 38px; }
  @media screen and (max-width: 768px) {
    .record__body, .look__gift__body {
      width: 95%;
      min-height: 510px; }
      .record__body::after, .look__gift__body::after {
        height: 102px; } }
  @media screen and (max-width: 540px) {
    .record__body .record__title, .look__gift__body .record__title {
      padding: 4% 0; } }

.look__gift__body {
  max-width: 768px;
  height: auto; }
  .look__gift__body .look__img {
    max-width: 678px;
    width: 100%;
    margin: 0 auto; }