body {
  background-color: #FFB000;
}

.wrapper, *:before, *:after {
  position: relative;
  margin: 0;
  font-family: "Noto Sans TC", sans-serif, Verdana, Geneva, Tahoma, sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  box-sizing: border-box;
}

.wrapper {
  padding-top: 65px;
  background-color: #d78df7;
}
.wrapper a {
  text-decoration: none;
}
.wrapper .white {
  color: #ffffff;
}
.wrapper .kv {
  height: 40vw;
}
.wrapper .kv .door_pc, .wrapper .kv .door_sp {
  width: 100vw;
}
.wrapper .kv .giftboxLeft {
  width: 30vw;
  left: 11vw;
  top: 25vw;
}
.wrapper .kv .giftboxPcoin {
  width: 27vw;
  left: 64.5vw;
  top: 25vw;
}
.wrapper .kv .giftboxRight {
  width: 12vw;
  left: 83vw;
  top: 29vw;
}
.wrapper .kv .lightBox {
  width: 15vw;
  left: 78vw;
  top: 18vw;
}
.wrapper .kv .title {
  width: 46vw;
  left: 27vw;
  top: 13vw;
}
.wrapper .kv .subtitle {
  width: 40vw;
  left: 30vw;
  top: 26vw;
}
.wrapper .kv .pCoin {
  width: 10.5vw;
  left: 68vw;
  top: 23vw;
}
.wrapper .kv .coinLeftBottom {
  width: 18vw;
  left: 2vw;
  top: 17vw;
}
.wrapper .kv .coinLeftTop {
  width: 9vw;
  left: 16vw;
  top: 7vw;
}
.wrapper .kv .coinRightBottom {
  width: 6vw;
  left: 92.5vw;
  top: 18vw;
}
.wrapper .kv .coinRightTop {
  width: 6vw;
  left: 75vw;
  top: 5vw;
}
@media screen and (max-width: 992px) {
  .wrapper .kv {
    height: 110vw;
  }
  .wrapper .kv .title {
    width: 92vw;
    left: 4vw;
    top: 18vw;
  }
  .wrapper .kv .subtitle {
    width: 100vw;
    left: 0;
    top: 45vw;
  }
  .wrapper .kv .giftboxLeft {
    width: 41vw;
    left: 0;
    top: 78vw;
  }
  .wrapper .kv .giftboxLeft_postpage {
    width: 52vw;
    left: 0;
    top: 70vw;
  }
  .wrapper .kv .lightBox {
    width: 32vw;
    left: 23vw;
    top: 68vw;
  }
  .wrapper .kv .giftboxPcoin {
    width: 53vw;
    left: 47vw;
    top: 71vw;
  }
  .wrapper .kv .pCoin {
    width: 22vw;
    left: 54vw;
    top: 67vw;
  }
  .wrapper .kv .coinLeftTop {
    width: 11vw;
    left: 10vw;
    top: 12vw;
  }
  .wrapper .kv .coinRightTop {
    width: 10vw;
    left: 85vw;
    top: 9vw;
  }
}
.wrapper .detail {
  background-image: url(../images/kv_pc_doorBtm.png);
  background-size: 100vw 100%;
}
@media screen and (max-width: 992px) {
  .wrapper .detail {
    background-image: unset;
    background-color: #d78df7;
  }
}
.wrapper .detail .container-detail {
  width: 100%;
  max-width: 992px;
  margin: 0 auto;
  text-align: justify;
}
.wrapper .detail .container-detail .textShadow {
  text-shadow: rgb(122, 0, 236) 0 0 0.3em;
}
.wrapper .detail .container-detail hr {
  color: white;
  opacity: 1;
  height: 1px;
}
.wrapper .detail .container-detail .accordion-button, .wrapper .detail .container-detail .accordion-body {
  padding: unset;
  border-radius: 0;
}
.wrapper .detail .container-detail .accordion-button {
  box-shadow: inset 0 -1px 0 rgb(255, 255, 255);
}
.wrapper .detail .container-detail .accordion-button:focus {
  box-shadow: inset 0 -1px 0 rgb(255, 255, 255);
}
.wrapper .detail .container-detail .accordion-button:not(.collapsed) {
  box-shadow: inset 0 -1px 0 rgb(255, 255, 255);
}
.wrapper .detail .container-detail .accordion-item, .wrapper .detail .container-detail .accordion-button {
  background-color: unset;
}
.wrapper .detail .container-detail .accordion-button::after {
  background-image: url(../images/arrow.png);
}
.wrapper .main {
  background: linear-gradient(#d78df7, #77e7ff, #92a2ff, #c564d9);
}
.wrapper .main .container-form {
  width: 100%;
  max-width: 992px;
  margin: 0 auto;
}
.wrapper .main .container-form .form {
  width: 100%;
  background-color: #ffffff;
  border-radius: 15px;
  margin: 10% auto 0 auto;
  padding-bottom: 20%;
  padding-left: 5%;
  padding-right: 5%;
  z-index: 100;
}
.wrapper .main .container-form .form .giftTop {
  margin-top: -11%;
  display: block;
  width: 50%;
}
@media screen and (max-width: 992px) {
  .wrapper .main .container-form .form .giftTop {
    width: 70%;
  }
}
.wrapper .main .container-form .form .optionStyle {
  width: 100%;
  margin-top: 16px;
  border-radius: 22px;
  padding: 7px 14px;
  cursor: pointer;
}
.wrapper .main .container-form .form .selectArrow {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: url("../images/arrowBlack.png") no-repeat right center transparent;
  background-size: 30px;
  background-color: #ffffff;
}
.wrapper .main .container-form .form .answer {
  background-color: #ecf9fe;
  display: flex;
  align-items: center;
}
.wrapper .main .container-form .form .answer .form-check-input {
  margin-top: unset;
  min-width: 20px;
}
.wrapper .main .container-form .form .answer .form-check-input:focus {
  box-shadow: unset;
}
.wrapper .main .container-form .form .answer .form-check-input:checked[type=radio] {
  background-image: url(../images/radioChecked.png);
}
.wrapper .main .container-form .form .answer .form-check-input:checked {
  background-color: #ffffff;
  border-color: #ffffff;
}
.wrapper .main .container-form .form .selected {
  background-color: #f9e329;
}
.wrapper .main .container-form .form .inputStyle {
  border: 1px solid #878787;
  line-height: 1;
  font-weight: bold;
}
.wrapper .main .container-form .form .buttonStyle {
  background: linear-gradient(#eb3e32, #cb0f02);
  color: white;
  padding: 8px 40px;
  border-radius: 50px;
}
.wrapper .main .container-form .blurBlueDot {
  left: -200px;
  top: -80px;
}
.wrapper .main .container-form .blurPinkDot {
  right: -100px;
  top: -70px;
}
.wrapper .main .container-form .pinkCircle {
  right: -330px;
  top: 500px;
}
.wrapper .main .container-form .purpleBigTraigle {
  left: -500px;
  top: 600px;
}
.wrapper .main .container-form .purpleSmallTraigle {
  right: -380px;
  top: 1100px;
}
.wrapper .main .container-form .blurPinkDotDotDot {
  left: -350px;
  top: 1250px;
}
.wrapper .main .container-form .giftBottom {
  width: 120%;
  margin: -18% -10% 2% -10%;
  z-index: 200;
}
.wrapper .drawing {
  padding-bottom: 2rem;
  background-color: #c564d9;
}
.wrapper .drawing .bgTop {
  background-image: url(../images/kv_pc_doorBtm.png);
  background-size: 100vw 100%;
  top: 0;
  width: 100vw;
  height: 30%;
}
@media screen and (max-width: 992px) {
  .wrapper .drawing .bgTop {
    background-image: unset;
    background-color: #d78df7;
  }
}
.wrapper .drawing .bgBottom {
  background: linear-gradient(#d78df7, #77e7ff, #92a2ff, #c564d9);
  top: 30%;
  width: 100vw;
  height: 70%;
}
.wrapper .drawing .container-drawing {
  width: 100%;
  max-width: 992px;
  margin: 0 auto;
  padding-top: 1rem;
}
.wrapper .drawing .container-drawing .form {
  width: 100%;
  border-radius: 15px;
  overflow: hidden;
  z-index: 100;
}
.wrapper .drawing .container-drawing .form .month {
  background: linear-gradient(#a2d1fd, #19b1ff);
  padding: 0.5rem;
}
.wrapper .drawing .container-drawing .form .title {
  background-color: #ffffff;
  padding: 0.5rem;
}
.wrapper .drawing .container-drawing .form .result {
  background-color: #e9f8ff;
  padding: 0.5rem;
}
.wrapper .drawing .container-drawing .gift {
  width: 50%;
  z-index: 200;
}
@media screen and (max-width: 992px) {
  .wrapper .drawing .container-drawing .gift {
    width: 100%;
  }
}
.wrapper .drawing .blurBlueDot {
  top: 10px;
  left: -200px;
}
.wrapper .drawing .blurPinkDot {
  bottom: 120px;
  right: -100px;
}

@keyframes zoomInOut {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes upDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.pyro > .before, .pyro > .after {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
  animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}

.pyro > .after {
  animation-delay: 1.25s, 1.25s, 1.25s;
  animation-duration: 1.25s, 1.25s, 6.25s;
}
@keyframes bang {
  to {
    box-shadow: -249px -269.6666666667px hsl(5, 100%, 50%), 0px -330.6666666667px hsl(74, 100%, 50%), 119px -160.6666666667px hsl(101, 100%, 50%), 246px -248.6666666667px hsl(103, 100%, 50%), -180px -262.6666666667px hsl(245, 100%, 50%), -125px 7.3333333333px hsl(318, 100%, 50%), 250px -56.6666666667px hsl(349, 100%, 50%), -122px -41.6666666667px hsl(148, 100%, 50%), 160px -282.6666666667px hsl(247, 100%, 50%), 119px 17.3333333333px hsl(198, 100%, 50%), -79px 27.3333333333px hsl(1, 100%, 50%), -43px -16.6666666667px hsl(221, 100%, 50%), -100px -337.6666666667px hsl(47, 100%, 50%), 60px -155.6666666667px hsl(350, 100%, 50%), -239px -110.6666666667px hsl(210, 100%, 50%), -142px -112.6666666667px hsl(31, 100%, 50%), -168px -146.6666666667px hsl(185, 100%, 50%), -214px -211.6666666667px hsl(169, 100%, 50%), -174px -344.6666666667px hsl(297, 100%, 50%), -5px -152.6666666667px hsl(183, 100%, 50%), 28px -340.6666666667px hsl(85, 100%, 50%), -173px -15.6666666667px hsl(114, 100%, 50%), 205px 19.3333333333px hsl(340, 100%, 50%), -60px -175.6666666667px hsl(302, 100%, 50%), -226px -166.6666666667px hsl(187, 100%, 50%), 227px -158.6666666667px hsl(116, 100%, 50%), 83px -258.6666666667px hsl(9, 100%, 50%), -25px 39.3333333333px hsl(275, 100%, 50%), 88px 47.3333333333px hsl(32, 100%, 50%), -168px -71.6666666667px hsl(88, 100%, 50%), -207px -385.6666666667px hsl(180, 100%, 50%), -117px -383.6666666667px hsl(267, 100%, 50%), -1px -89.6666666667px hsl(288, 100%, 50%), -166px -68.6666666667px hsl(29, 100%, 50%), -152px -339.6666666667px hsl(195, 100%, 50%), -22px -224.6666666667px hsl(175, 100%, 50%), 21px -222.6666666667px hsl(284, 100%, 50%), -152px -88.6666666667px hsl(201, 100%, 50%), 38px -356.6666666667px hsl(180, 100%, 50%), -72px -83.6666666667px hsl(79, 100%, 50%), -223px -219.6666666667px hsl(277, 100%, 50%), 33px -219.6666666667px hsl(156, 100%, 50%), 152px -91.6666666667px hsl(342, 100%, 50%), 85px -33.6666666667px hsl(27, 100%, 50%), -103px -282.6666666667px hsl(2, 100%, 50%), -13px -324.6666666667px hsl(219, 100%, 50%), -34px -30.6666666667px hsl(160, 100%, 50%), -40px 48.3333333333px hsl(270, 100%, 50%), 134px -232.6666666667px hsl(132, 100%, 50%), -163px -103.6666666667px hsl(236, 100%, 50%), -60px 39.3333333333px hsl(129, 100%, 50%);
  }
}
@keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}/*# sourceMappingURL=style.css.map */