@charset "UTF-8";
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;
  vertical-align: baseline;
  font: inherit;
}

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,
q:before, q:after {
  content: "";
  content: none;
}

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

@keyframes move {
  0% {
    top: -175px;
  }
  50% {
    top: -155px;
  }
  100% {
    top: -175px;
  }
}
@keyframes move2 {
  0% {
    top: 27%;
  }
  50% {
    top: 35%;
  }
  100% {
    top: 27%;
  }
}
@keyframes move3 {
  0% {
    top: 5%;
  }
  50% {
    top: -3%;
  }
  100% {
    top: 5%;
  }
}
@keyframes zoom {
  0% {
    transform: scale(1);
  }
  4% {
    transform: scale(1.2);
  }
  8% {
    transform: scale(1);
  }
}
@keyframes shake {
  50% {
    transform: rotate(0deg);
  }
  52% {
    transform: rotate(6deg);
  }
  54% {
    transform: rotate(-6deg);
  }
  57% {
    transform: rotate(3deg);
  }
  60% {
    transform: rotate(-2deg);
  }
  63% {
    transform: rotate(0deg);
  }
}
@media all and (max-width: 1200px) {
  @keyframes move {
    0% {
      top: -175px;
    }
    50% {
      top: -160px;
    }
    100% {
      top: -175px;
    }
  }
}
@media all and (max-width: 768px) {
  @keyframes move2 {
    0% {
      top: 80%;
    }
    50% {
      top: 85%;
    }
    100% {
      top: 80%;
    }
  }
  @keyframes move3 {
    0% {
      top: 3%;
    }
    50% {
      top: -2%;
    }
    100% {
      top: 3%;
    }
  }
}
@media all and (max-width: 500px) {
  @keyframes move {
    0% {
      top: -32vw;
    }
    50% {
      top: -28vw;
    }
    100% {
      top: -32vw;
    }
  }
}
.all {
  position: relative;
  font-size: 18px;
  color: #4d325a;
  width: 100%;
  font-family: Arial;
  line-height: 1.8;
  letter-spacing: 1px;
  overflow: hidden;
  line-break: anywhere;
}
.all::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  padding-bottom: 100px;
  background: url(../images/BG.png) repeat-y center top/103% auto;
  position: absolute;
  top: 40vw;
  left: 0;
}
@media all and (max-width: 768px) {
  .all::after {
    background: url(../images/BG-phone.png) repeat-y center top/110% auto;
    top: 152vw;
  }
}
@media all and (max-width: 500px) {
  .all {
    font-size: 5vw;
  }
}
.all img {
  width: 100%;
  height: auto;
}
.all .image-container {
  width: 100%;
  height: 0;
  padding-bottom: 55%;
  overflow: hidden;
  display: block;
  position: relative;
}
.all .image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.all .page_title {
  display: none;
}
.all .btn {
  font-weight: 600;
  border-radius: 100vw;
  text-decoration: none;
  color: #fff;
  background-color: #4d325a;
  position: relative;
  transition: 0.3s;
}
.all .btn:hover {
  cursor: pointer;
  background-color: #b857a0;
  transition: 0.3s;
}
.all .container {
  width: 84%;
  margin: auto;
  text-align: center;
}
@media all and (max-width: 1680px) {
  .all .container {
    width: 90%;
  }
}
.all .button {
  font-size: 24px;
  width: 80%;
  max-width: 240px;
  color: #fff;
  font-weight: 600;
  margin-top: 60px;
  display: inline-block;
  padding: 12px 0 10px;
  background-color: #4d325a;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  transition: 0.3s;
  top: 0;
}
@media all and (max-width: 768px) {
  .all .button {
    margin-top: 50px;
  }
}
@media all and (max-width: 768px) and (max-width: 500px) {
  .all .button {
    font-size: 6vw;
    margin-top: 10vw;
    padding: 3vw 0 2.5vw;
  }
}
.all .button:hover {
  background-color: #b857a0;
  top: -5px;
  transition: 0.3s;
}
.all .visual {
  position: relative;
}
.all .visual picture {
  display: flex;
}
.all .visual .title,
.all .visual .img-groups {
  position: absolute;
}
.all .visual .title img,
.all .visual .img-groups img {
  position: absolute;
}
.all .visual .title {
  width: 40%;
  height: 27%;
  top: 7%;
  left: 31%;
  z-index: 3;
}
@media all and (max-width: 768px) {
  .all .visual .title {
    width: 86%;
    height: 25%;
    top: 10.7%;
    left: 6.8%;
  }
}
.all .visual .title img {
  width: 18%;
}
@media all and (max-width: 768px) {
  .all .visual .title img {
    width: 21%;
  }
}
.all .visual .title [class^=titleA-] {
  top: -19.5%;
  animation: zoom 5s infinite linear;
}
@media all and (max-width: 768px) {
  .all .visual .title [class^=titleA-] {
    top: 19%;
  }
}
.all .visual .title .titleA-01 {
  left: 20%;
}
@media all and (max-width: 768px) {
  .all .visual .title .titleA-01 {
    left: 22.5%;
  }
}
.all .visual .title .titleA-02 {
  left: 28%;
  animation-delay: 0.2s;
}
@media all and (max-width: 768px) {
  .all .visual .title .titleA-02 {
    left: 32%;
  }
}
.all .visual .title .titleA-03 {
  left: 36.5%;
  animation-delay: 0.4s;
}
@media all and (max-width: 768px) {
  .all .visual .title .titleA-03 {
    left: 42%;
  }
}
.all .visual .title .titleA-04 {
  left: 45%;
  animation-delay: 0.6s;
}
@media all and (max-width: 768px) {
  .all .visual .title .titleA-04 {
    left: 52%;
  }
}
.all .visual .title [class^=titleB-] {
  top: 28%;
  animation: zoom 5s infinite linear;
}
@media all and (max-width: 768px) {
  .all .visual .title [class^=titleB-] {
    top: 51.5%;
  }
}
.all .visual .title .titleB-05 {
  left: 26%;
  animation-delay: 1s;
}
@media all and (max-width: 768px) {
  .all .visual .title .titleB-05 {
    left: 30%;
  }
}
.all .visual .title .titleB-06 {
  left: 38%;
  animation-delay: 1.2s;
}
@media all and (max-width: 768px) {
  .all .visual .title .titleB-06 {
    left: 44%;
  }
}
.all .visual .title .titleB-07 {
  left: 55%;
  animation-delay: 1.4s;
}
@media all and (max-width: 768px) {
  .all .visual .title .titleB-07 {
    left: 63%;
  }
}
.all .visual .title .titleB-08 {
  left: 71%;
  animation-delay: 1.6s;
}
@media all and (max-width: 768px) {
  .all .visual .title .titleB-08 {
    left: 82%;
  }
}
.all .visual .title .titleC-09 {
  width: 16%;
  left: 85%;
  top: 1%;
  animation: shake 5s infinite linear;
  transform-origin: 8% bottom;
}
@media all and (max-width: 768px) {
  .all .visual .title .titleC-09 {
    width: 23%;
    left: 77%;
    top: 0;
  }
}
.all .visual .img-groups {
  width: 100%;
  height: 20%;
  top: 31%;
}
@media all and (max-width: 768px) {
  .all .visual .img-groups {
    height: 40%;
    top: 40%;
  }
}
.all .visual .img-groups .img-1 {
  width: 8%;
  left: 71%;
  animation: move2 5s infinite linear;
}
@media all and (max-width: 768px) {
  .all .visual .img-groups .img-1 {
    width: 18%;
    left: 80%;
  }
}
.all .visual .img-groups .img-2 {
  width: 8%;
  left: 20%;
  transform: rotate(120deg);
  animation: move3 5s infinite linear;
}
@media all and (max-width: 768px) {
  .all .visual .img-groups .img-2 {
    width: 22%;
    left: 8%;
  }
}
.all .LuckyBag {
  background-color: #fff173;
}
.all .LuckyBag h2 {
  color: #4d325a;
  font-size: 2vw;
  font-weight: 700;
  line-height: 1.5;
}
@media all and (max-width: 1440px) {
  .all .LuckyBag h2 {
    font-size: 2.5vw;
  }
}
@media all and (max-width: 1440px) and (max-width: 768px) {
  .all .LuckyBag h2 {
    font-size: 4.5vw;
  }
}
@media all and (max-width: 1440px) and (max-width: 500px) {
  .all .LuckyBag h2 {
    font-size: 6vw;
  }
}
.all .LuckyBag h2 br {
  display: none;
}
@media all and (max-width: 500px) {
  .all .LuckyBag h2 br {
    display: block;
  }
}
.all .LuckyBag h2 .star {
  color: #b857a0;
}
.all .LuckyBag h2 .star div {
  font-size: 2.6vw;
  display: inline;
  color: #fff;
  text-shadow: 2px 2px 0 #4d325a, -2px 2px 0 #4d325a, 2px -2px 0 #4d325a, -2px -2px 0 #4d325a, 0 2px 0 #4d325a, 2px 0 0 #4d325a, -2px 0 0 #4d325a, 0 -2px 0 #4d325a;
}
@media all and (max-width: 1440px) {
  .all .LuckyBag h2 .star div {
    font-size: 3vw;
  }
}
@media all and (max-width: 1440px) and (max-width: 768px) {
  .all .LuckyBag h2 .star div {
    font-size: 5.5vw;
  }
}
@media all and (max-width: 1440px) and (max-width: 500px) {
  .all .LuckyBag h2 .star div {
    font-size: 8.5vw;
  }
}
.all .LuckyBag h2 .star div span {
  font-family: "Fredoka One", "Rubik", sans-serif;
  margin-left: 1vw;
}
@media all and (max-width: 500px) {
  .all .LuckyBag h2 .star div span {
    margin-left: 2.5vw;
  }
}
.all .LuckyBag h2 .star::before, .all .LuckyBag h2 .star::after {
  content: "✦";
  position: relative;
  top: -0.5vw;
}
.all .LuckyBag h2 .star::before {
  margin-right: 0.5vw;
}
@media all and (max-width: 500px) {
  .all .LuckyBag h2 .star::before {
    margin-right: 2vw;
  }
}
.all .LuckyBag h2 .star::after {
  margin-left: 0.4vw;
}
@media all and (max-width: 500px) {
  .all .LuckyBag h2 .star::after {
    margin-left: 1.8vw;
  }
}
.all .LuckyBag h2 > span {
  color: #b857a0;
}
.all .LuckyBag .container {
  background: url(../images/LuckyBag-BG.png) no-repeat center top/120% auto;
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 12/5;
  top: -5.7vw;
  position: relative;
  padding-top: 3vw;
  width: 84%;
}
@media all and (max-width: 1680px) {
  .all .LuckyBag .container {
    width: 95%;
  }
}
@media all and (max-width: 1680px) and (max-width: 1440px) {
  .all .LuckyBag .container {
    width: 110%;
    margin-left: -5%;
  }
}
@media all and (max-width: 1680px) and (max-width: 768px) {
  .all .LuckyBag .container {
    width: 180%;
    margin-left: -40%;
    padding-top: 10vw;
  }
}
@media all and (max-width: 1680px) and (max-width: 500px) {
  .all .LuckyBag .container {
    width: 220%;
    margin-top: 0;
    margin-left: -60%;
    aspect-ratio: 12/6.6;
  }
}
.all .LuckyBag .container .LuckyBag-img,
.all .LuckyBag .container .control,
.all .LuckyBag .container li,
.all .LuckyBag .container .info,
.all .LuckyBag .container .btn {
  position: absolute;
  z-index: 1;
}
.all .LuckyBag .container br {
  display: none;
}
@media all and (max-width: 500px) {
  .all .LuckyBag .container br {
    display: block;
  }
}
.all .LuckyBag .turntable {
  position: relative;
  z-index: 1;
  width: 73%;
  margin: auto;
  aspect-ratio: 1/1;
  margin-top: 2vw;
  transition: transform 1s ease;
  border-radius: 50%;
}
@media all and (max-width: 1680px) {
  .all .LuckyBag .turntable {
    width: 80%;
  }
}
@media all and (max-width: 1680px) and (max-width: 768px) {
  .all .LuckyBag .turntable {
    width: 73%;
    margin-top: 4vw;
  }
}
@media all and (max-width: 1680px) and (max-width: 500px) {
  .all .LuckyBag .turntable {
    margin-top: 20vw;
  }
}
.all .LuckyBag .turntable li {
  width: 54%;
}
.all .LuckyBag .turntable li:nth-of-type(1) {
  left: 23%;
}
.all .LuckyBag .turntable li:nth-of-type(2) {
  right: 0;
  bottom: 12.6%;
  transform: rotate(120deg);
}
.all .LuckyBag .turntable li:nth-of-type(3) {
  left: 0;
  bottom: 12.6%;
  transform: rotate(240deg);
}
.all .LuckyBag .turntable .img-box {
  width: 60%;
  padding-top: 20%;
  margin: auto;
}
.all .LuckyBag .turntable .info {
  width: 95%;
  left: 2.5%;
  top: 0;
  background-color: rgba(255, 255, 255, 0.8);
  border: #fff173 0.4vw solid;
  border-radius: 100vw;
  padding: 0.8vw 0 0.7vw;
  box-sizing: border-box;
  box-shadow: 0 0.8vw 0 rgba(50, 40, 5, 0.25);
}
@media all and (max-width: 1440px) {
  .all .LuckyBag .turntable .info {
    width: 100%;
    left: 0;
    padding: 1.5vw 0 1.2vw;
  }
}
@media all and (max-width: 1440px) and (max-width: 768px) {
  .all .LuckyBag .turntable .info {
    padding: 3vw 0 2.5vw;
    border: #fff173 0.7vw solid;
    box-shadow: 0 1.2vw 0 rgba(50, 40, 5, 0.25);
  }
}
@media all and (max-width: 1440px) and (max-width: 500px) {
  .all .LuckyBag .turntable .info {
    width: 90%;
    left: 5%;
    line-height: 1.5;
    padding: 5vw 0 4vw;
    border: #fff173 1.2vw solid;
    box-shadow: 0 2vw 0 rgba(50, 40, 5, 0.25);
    top: -18%;
  }
}
.all .LuckyBag .turntable .info h3 {
  color: #4d325a;
  font-size: 1.8vw;
  font-weight: 700;
  line-height: 1.8;
}
@media all and (max-width: 1440px) {
  .all .LuckyBag .turntable .info h3 {
    font-size: 2.3vw;
  }
}
@media all and (max-width: 768px) {
  .all .LuckyBag .turntable .info h3 {
    font-size: 3.5vw;
  }
}
@media all and (max-width: 500px) {
  .all .LuckyBag .turntable .info h3 {
    font-size: 5.8vw;
  }
}
.all .LuckyBag .turntable .info p {
  color: #333333;
  font-size: 1.2vw;
  font-weight: 600;
}
@media all and (max-width: 1440px) {
  .all .LuckyBag .turntable .info p {
    font-size: 1.6vw;
  }
}
@media all and (max-width: 768px) {
  .all .LuckyBag .turntable .info p {
    font-size: 2.6vw;
  }
}
@media all and (max-width: 500px) {
  .all .LuckyBag .turntable .info p {
    font-size: 4.8vw;
  }
}
.all .LuckyBag .turntable .info span {
  color: #b857a0;
  font-size: 1.1vw;
  font-weight: 600;
}
@media all and (max-width: 1440px) {
  .all .LuckyBag .turntable .info span {
    font-size: 1.4vw;
  }
}
@media all and (max-width: 768px) {
  .all .LuckyBag .turntable .info span {
    font-size: 2.3vw;
  }
}
@media all and (max-width: 500px) {
  .all .LuckyBag .turntable .info span {
    font-size: 4.2vw;
  }
}
.all .LuckyBag .LuckyBag-img {
  width: 100%;
  aspect-ratio: 4/1;
  background: url(../images/LuckyBag-img.png) no-repeat left 43% top/68% auto;
  top: 57%;
}
@media all and (max-width: 768px) {
  .all .LuckyBag .LuckyBag-img {
    top: 60%;
  }
}
@media all and (max-width: 500px) {
  .all .LuckyBag .LuckyBag-img {
    background: url(../images/LuckyBag-img.png) no-repeat left 43% top/70% auto;
    top: 72%;
  }
}
.all .LuckyBag .control {
  display: flex;
  justify-content: space-between;
  top: 40%;
  width: 60%;
  left: 20%;
}
@media all and (max-width: 1680px) {
  .all .LuckyBag .control {
    top: 35%;
  }
}
@media all and (max-width: 1680px) and (max-width: 1440px) {
  .all .LuckyBag .control {
    top: 37%;
  }
}
@media all and (max-width: 1680px) and (max-width: 768px) {
  .all .LuckyBag .control {
    top: 44%;
    width: 50%;
    left: 25%;
  }
}
@media all and (max-width: 1680px) and (max-width: 500px) {
  .all .LuckyBag .control {
    top: 49%;
    width: 44%;
    left: 28%;
  }
}
.all .LuckyBag .control div {
  width: 5%;
  aspect-ratio: 1/1;
  background: url(../images/LuckyBag-control.png) no-repeat center center/80% auto;
  cursor: pointer;
}
@media all and (max-width: 500px) {
  .all .LuckyBag .control div {
    width: 7%;
  }
}
.all .LuckyBag .control div:nth-of-type(1) {
  transform: scaleX(-1);
}
.all .LuckyBag .btn {
  font-size: 1.2vw;
  bottom: 5%;
  width: 14%;
  line-height: 2.5;
  left: 43%;
}
@media all and (max-width: 768px) {
  .all .LuckyBag .btn {
    font-size: 3vw;
    width: 15%;
    left: 42.5%;
  }
}
@media all and (max-width: 768px) and (max-width: 500px) {
  .all .LuckyBag .btn {
    font-size: 5vw;
    width: 20%;
    left: 40%;
  }
}
.all .LuckyBag .btn:hover {
  bottom: 5.5%;
}
.all #form {
  background: url(../images/BG-round.svg) repeat-x center bottom -20px/auto 40px;
  background-color: #fff173;
  margin-top: -1vw;
}
@media all and (max-width: 1024px) {
  .all #form {
    margin-top: 0;
    padding-top: 1vw;
  }
}
@media all and (max-width: 1024px) and (max-width: 500px) {
  .all #form {
    background: url(../images/BG-round.svg) repeat-x center bottom -4VW/auto 8VW;
    background-color: #fff173;
    padding-top: 8vw;
  }
}
.all #form h2 {
  color: #4d325a;
  font-size: 2vw;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 80px;
}
@media all and (max-width: 1440px) {
  .all #form h2 {
    font-size: 2.5vw;
  }
}
@media all and (max-width: 1440px) and (max-width: 768px) {
  .all #form h2 {
    font-size: 4.5vw;
  }
}
@media all and (max-width: 1440px) and (max-width: 500px) {
  .all #form h2 {
    font-size: 6vw;
  }
}
.all #form h2 br {
  display: none;
}
@media all and (max-width: 500px) {
  .all #form h2 br {
    display: block;
  }
}
.all #form h2 .star {
  color: #b857a0;
}
.all #form h2 .star div {
  font-size: 2.6vw;
  display: inline;
  color: #fff;
  text-shadow: 2px 2px 0 #4d325a, -2px 2px 0 #4d325a, 2px -2px 0 #4d325a, -2px -2px 0 #4d325a, 0 2px 0 #4d325a, 2px 0 0 #4d325a, -2px 0 0 #4d325a, 0 -2px 0 #4d325a;
}
@media all and (max-width: 1440px) {
  .all #form h2 .star div {
    font-size: 3vw;
  }
}
@media all and (max-width: 1440px) and (max-width: 768px) {
  .all #form h2 .star div {
    font-size: 5.5vw;
  }
}
@media all and (max-width: 1440px) and (max-width: 500px) {
  .all #form h2 .star div {
    font-size: 8.5vw;
  }
}
.all #form h2 .star div span {
  font-family: "Fredoka One", "Rubik", sans-serif;
  margin-left: 1vw;
}
@media all and (max-width: 500px) {
  .all #form h2 .star div span {
    margin-left: 2.5vw;
  }
}
.all #form h2 .star::before, .all #form h2 .star::after {
  content: "✦";
  position: relative;
  top: -0.5vw;
}
.all #form h2 .star::before {
  margin-right: 0.5vw;
}
@media all and (max-width: 500px) {
  .all #form h2 .star::before {
    margin-right: 2vw;
  }
}
.all #form h2 .star::after {
  margin-left: 0.4vw;
}
@media all and (max-width: 500px) {
  .all #form h2 .star::after {
    margin-left: 1.8vw;
  }
}
.all #form h2 > span {
  color: #b857a0;
}
@media all and (max-width: 1024px) {
  .all #form h2 {
    margin-bottom: 35px;
  }
}
@media all and (max-width: 500px) {
  .all #form h2 {
    margin-bottom: 8vw;
  }
}
.all #form .container {
  padding-bottom: 100px;
}
@media all and (max-width: 500px) {
  .all #form .container {
    padding-bottom: 20vw;
  }
}
.all #form .box {
  max-width: 1440px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 5%;
}
@media all and (max-width: 1024px) {
  .all #form .box {
    grid-template-columns: 1fr;
    gap: 50px;
  }
}
@media all and (max-width: 1024px) and (max-width: 500px) {
  .all #form .box {
    gap: 6vw;
  }
}
.all #form .box .img-box {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 420px;
  margin: auto;
}
.all #form .box .from-box {
  position: relative;
  z-index: 1;
  padding: 20px;
  max-width: 650px;
  margin: auto;
  background-color: #fff173;
}
@media all and (max-width: 500px) {
  .all #form .box .from-box {
    padding: 3vw;
  }
}
.all #form .box ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 25px 4%;
}
@media all and (max-width: 500px) {
  .all #form .box ul {
    gap: 4vw;
  }
}
.all #form .box ul li {
  width: 48%;
}
@media all and (max-width: 500px) {
  .all #form .box ul li {
    width: 100%;
  }
}
.all #form .box ul li.single {
  width: 100%;
  text-align: left;
}
.all #form .box #READ span,
.all #form .box #READ a {
  font-size: 18px;
  cursor: pointer;
  color: #333333;
}
@media all and (max-width: 500px) {
  .all #form .box #READ span,
  .all #form .box #READ a {
    font-size: 4.5vw;
  }
}
.all #form .box input[type=text],
.all #form .box input[type=tel],
.all #form .box input[type=email],
.all #form .box select {
  font-size: 19px;
  padding-bottom: 12px;
  color: #333333;
  font-weight: normal;
  border: 0px;
  width: 100%;
  background-color: transparent;
  -webkit-input-placeholder: #333333;
  border-bottom: 1px solid #ccc;
  outline: none;
}
.all #form .box input[type=text]::-webkit-input-placeholder,
.all #form .box input[type=tel]::-webkit-input-placeholder,
.all #form .box input[type=email]::-webkit-input-placeholder,
.all #form .box select::-webkit-input-placeholder {
  color: #333333;
}
@media all and (max-width: 500px) {
  .all #form .box input[type=text],
  .all #form .box input[type=tel],
  .all #form .box input[type=email],
  .all #form .box select {
    font-size: 5vw;
  }
}
.all #form .box input[type=checkbox] {
  position: relative;
  width: 22px;
  height: 0;
  top: 1px;
}
@media all and (max-width: 500px) {
  .all #form .box input[type=checkbox] {
    width: 5.5vw;
    top: 0.4vw;
  }
}
.all #form .box input[type=checkbox]::before {
  content: "";
  line-height: 1.4;
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: #f0f0f0;
  border: 1px solid #333333;
  border-radius: 20px;
  position: absolute;
  cursor: pointer;
  top: -20px;
  left: 0;
}
@media all and (max-width: 500px) {
  .all #form .box input[type=checkbox]::before {
    width: 6vw;
    height: 6vw;
    top: -5.5vw;
  }
}
.all #form .box input[type=checkbox]:checked::before {
  content: "✔︎";
  color: #fff;
  font-size: 20px;
  text-align: center;
  line-height: 1.3;
  background-color: #4d325a;
  border: 1px solid #4d325a;
}
@media all and (max-width: 500px) {
  .all #form .box input[type=checkbox]:checked::before {
    font-size: 5vw;
    position: absolute;
  }
}
.all .courses {
  background-color: #faeeff;
}
.all .courses .container {
  width: 90%;
  position: relative;
  z-index: 1;
  padding: 100px 0;
}
@media all and (max-width: 500px) {
  .all .courses .container {
    padding: 15vw 0 20vw;
  }
}
@media all and (max-width: 1024px) {
  .all .courses .container {
    padding-bottom: 160px;
  }
}
@media all and (max-width: 500px) {
  .all .courses .container {
    width: 85%;
    padding-bottom: 35vw;
  }
}
.all .courses h2 {
  color: #b857a0;
  font-size: 35px;
  font-weight: 700;
  line-height: 1.5;
  display: inline-block;
  margin-bottom: 100px;
  background-color: #faeeff;
}
@media all and (max-width: 1024px) {
  .all .courses h2 {
    font-size: 30px;
  }
}
@media all and (max-width: 1024px) and (max-width: 500px) {
  .all .courses h2 {
    font-size: 6.5vw;
  }
}
.all .courses h2 span {
  color: #4d325a;
}
.all .courses h2::before, .all .courses h2::after {
  content: "✦";
  position: relative;
  top: -1px;
}
.all .courses h2::before {
  margin-right: 12px;
}
@media all and (max-width: 500px) {
  .all .courses h2::before {
    margin-right: 2vw;
  }
}
.all .courses h2::after {
  margin-left: 10px;
}
@media all and (max-width: 500px) {
  .all .courses h2::after {
    margin-left: 1.8vw;
  }
}
@media all and (max-width: 500px) {
  .all .courses h2 {
    margin-bottom: 20vw;
  }
}
.all .courses ul {
  list-style: none;
  -moz-column-count: 4;
       column-count: 4;
  gap: 5%;
}
@media all and (max-width: 1680px) {
  .all .courses ul {
    gap: 3%;
  }
}
@media all and (max-width: 1450px) {
  .all .courses ul {
    -moz-column-count: 3;
         column-count: 3;
  }
}
@media all and (max-width: 1100px) {
  .all .courses ul {
    -moz-column-count: 2;
         column-count: 2;
  }
}
@media all and (max-width: 650px) {
  .all .courses ul {
    -moz-column-count: 1;
         column-count: 1;
  }
}
.all .courses li {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  background-color: #fffdfa;
  border-radius: 0 0 30px 30px;
  border: #333333 solid 1px;
  border-top: #f9e535 solid 10px;
  padding: 0 0 50px;
  margin-bottom: 100px;
  box-shadow: 8px 10px 0 rgba(140, 115, 5, 0.25);
}
@media all and (max-width: 500px) {
  .all .courses li {
    border-radius: 0 0 6vw 6vw;
    border-top: #f9e535 solid 3vw;
    padding: 0 0 15vw;
    margin-bottom: 20vw;
    box-shadow: 3vw 3vw 0 rgba(140, 115, 5, 0.25);
  }
}
.all .courses h3 {
  font-size: 35px;
  font-weight: 600;
  line-height: 3;
  background: url(../images/courses-sign.png) no-repeat center top/150px auto;
  padding-top: 50px;
  margin-top: -50px;
}
@media all and (max-width: 500px) {
  .all .courses h3 {
    font-size: 8vw;
    background: url(../images/courses-sign.png) no-repeat center top/50VW auto;
    padding-top: 15vw;
    margin-top: -15vw;
  }
}
.all .courses p {
  font-size: 20px;
  color: #333333;
}
@media all and (max-width: 1000px) {
  .all .courses p {
    font-size: 18px;
  }
}
@media all and (max-width: 500px) {
  .all .courses p {
    font-size: 5vw;
  }
}
@media all and (max-width: 1100px) {
  .all .courses .button {
    margin-top: 0;
  }
}
.all .stories {
  position: relative;
  background: url(../images/BG-round.svg) repeat-x center top -20px/auto 40px;
  background-color: #fff173;
}
@media all and (max-width: 550px) {
  .all .stories {
    background: url(../images/BG-round.svg) repeat-x center top -4VW/auto 8VW;
    background-color: #fff173;
  }
}
.all .stories::after, .all .stories::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
}
.all .stories::before {
  width: 250px;
  background: url(../images/P1.png) repeat-x center center/100% auto;
  aspect-ratio: 259/331;
  right: 9%;
  animation: move 5s infinite linear;
}
@media all and (max-width: 1200px) {
  .all .stories::before {
    width: 200px;
  }
}
@media all and (max-width: 550px) {
  .all .stories::before {
    width: 40%;
    right: 15%;
  }
}
.all .stories::after {
  content: "";
  display: block;
  width: 275px;
  background: url(../images/P2.png) repeat-x center center/100% auto;
  aspect-ratio: 294/231;
  position: absolute;
  bottom: -10px;
  left: 12%;
  z-index: 2;
}
@media all and (max-width: 768px) {
  .all .stories::after {
    left: 0%;
  }
}
@media all and (max-width: 550px) {
  .all .stories::after {
    width: 45%;
    left: 27%;
  }
}
.all .stories .container {
  width: 90%;
  position: relative;
  z-index: 1;
  padding: 100px 0;
}
@media all and (max-width: 500px) {
  .all .stories .container {
    padding: 15vw 0 20vw;
  }
}
@media all and (max-width: 1024px) {
  .all .stories .container {
    padding-top: 150px;
    padding-bottom: 150PX;
  }
}
@media all and (max-width: 550px) {
  .all .stories .container {
    padding-top: 28vw;
    padding-bottom: 40VW;
  }
}
.all .stories h2 {
  color: #b857a0;
  font-size: 35px;
  font-weight: 700;
  line-height: 1.5;
  display: inline-block;
  margin-bottom: 30px;
  background-color: #fff173;
}
@media all and (max-width: 1024px) {
  .all .stories h2 {
    font-size: 30px;
  }
}
@media all and (max-width: 1024px) and (max-width: 500px) {
  .all .stories h2 {
    font-size: 6.5vw;
  }
}
.all .stories h2 span {
  color: #4d325a;
}
.all .stories h2::before, .all .stories h2::after {
  content: "✦";
  position: relative;
  top: -1px;
}
.all .stories h2::before {
  margin-right: 12px;
}
@media all and (max-width: 500px) {
  .all .stories h2::before {
    margin-right: 2vw;
  }
}
.all .stories h2::after {
  margin-left: 10px;
}
@media all and (max-width: 500px) {
  .all .stories h2::after {
    margin-left: 1.8vw;
  }
}
@media all and (max-width: 500px) {
  .all .stories h2 {
    width: 110%;
    margin-left: -5%;
    margin-bottom: 8vw;
    letter-spacing: 0;
  }
}
.all .stories ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 25px;
  padding: 35px 0 20px;
}
@media all and (max-width: 1870px) {
  .all .stories ul {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media all and (max-width: 1215px) {
  .all .stories ul {
    grid-template-columns: 1fr;
  }
}
@media all and (max-width: 500px) {
  .all .stories ul {
    gap: 5vw;
    padding: 3vw 0 10vw 0;
  }
}
.all .stories li {
  background-color: #fff;
  padding: 30px 20px 35px 25px;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 15px;
  border-radius: 45px;
}
@media all and (max-width: 500px) {
  .all .stories li {
    padding: 8vw 3.5vw;
    grid-template-columns: 21vw 1fr;
    gap: 3vw;
  }
}
.all .stories li:nth-of-type(1) .image-container img {
  width: 200%;
  left: -40%;
  height: 190%;
}
.all .stories li:nth-of-type(2) .image-container img {
  width: 150%;
  left: -25%;
  height: 120%;
}
.all .stories li:nth-of-type(3) .image-container img {
  width: 160%;
  left: -30%;
  height: 100%;
}
.all .stories li:nth-of-type(4) .image-container img {
  width: 140%;
  left: -15%;
  height: 125%;
}
.all .stories li:nth-of-type(5) .image-container img {
  width: 140%;
  left: -15%;
  height: 125%;
}
.all .stories li:nth-of-type(6) .image-container img {
  width: 140%;
  left: -20%;
  height: 130%;
}
.all .stories .image-container {
  padding-bottom: 100%;
  border-radius: 50%;
}
.all .stories .info {
  text-align: left;
}
.all .stories h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 5px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
}
@media all and (max-width: 768px) {
  .all .stories h3 {
    -webkit-line-clamp: 2;
  }
}
@media all and (max-width: 500px) {
  .all .stories h3 {
    font-size: 5.9vw;
    line-height: 1.5;
    margin: 1.5vw 0 7vw 0;
  }
}
.all .stories p {
  color: #333333;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
}
@media all and (max-width: 500px) {
  .all .stories p {
    margin-left: -22vw;
  }
}
.all .stories .btn-box {
  width: 100%;
  text-align: right;
  padding-right: 5px;
  margin-top: 25px;
  background: url(../images/star.png) no-repeat left bottom 15px/105px auto;
}
@media all and (max-width: 500px) {
  .all .stories .btn-box {
    margin-left: -22vw;
    width: 80vw;
    background: url(../images/star.png) no-repeat left bottom 15px/30vw auto;
  }
}
.all .stories .btn-box a {
  font-weight: 700;
  color: #4d325a;
  background-color: #fdd118;
  display: inline-block;
  padding: 3px 18px 0 22px;
  border-radius: 30px;
  text-decoration: none;
  line-height: 2.1;
  position: relative;
  transition: 0.3s;
  top: 0;
}
@media all and (max-width: 500px) {
  .all .stories .btn-box a {
    position: static;
    padding: 1vw 6vw 0 7vw;
  }
}
.all .stories .btn-box a:hover {
  background-color: #fffb24;
  top: -3px;
}

#go-position {
  width: 70px;
  height: 70px;
  border-radius: 70px;
  right: 2px;
  bottom: 4px;
  transition: 0.3s;
  display: none;
  position: fixed;
  background-color: #4d325a;
  cursor: pointer;
  z-index: 99;
}
#go-position::before {
  color: #fff;
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 1.1;
  content: "立即\a登記\a";
  white-space: pre;
  width: 100%;
  height: 100%;
  border-radius: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  top: 2px;
}
#go-position:hover {
  bottom: 6px;
  transition: 0.3s;
  background-color: #b857a0;
}
@media all and (max-width: 500px) {
  #go-position {
    width: 54px;
    height: 54px;
    right: 0;
  }
  #go-position::before {
    font-size: 15px;
  }
}

#top_ifram iframe {
  z-index: 900;
  overflow: visible;
  height: 280px;
  width: 100%;
  margin-bottom: -219px;
  border: 0 none;
  position: relative;
}

footer {
  background-color: #5d379d;
}
footer .respIframe {
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
}/*# sourceMappingURL=basic.css.map */