@charset "UTF-8";
* {
  box-sizing: border-box;
  user-select: none;
}

html,
body {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background-color: #000000;
  width: 100%;
  position: relative;
  overflow-y: hidden;
}

main {
  overflow-x: hidden;
}

.container {
  width: 100%;
  height: 50vw;
  position: relative;
}

.background {
  position: absolute;
}

#TaipeiPasslogin {
  cursor: pointer;
}

.big-prize-backgroung {
  position: fixed;
  z-index: 13;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
}

.big-prize-backgroung .big-prize-container {
  width: 746px;
  height: 596px;
  border: #ff8908 4px solid;
  border-radius: 35.541px;
  position: relative;
  background-color: black;
}

@media (max-width: 768px) {
  .big-prize-backgroung .big-prize-container {
    width: 521px;
  }
}

@media (max-width: 546px) {
  .big-prize-backgroung .big-prize-container {
    width: 347px;
  }
}

.big-prize-backgroung .big-prize-container .big-prize-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.big-prize-backgroung .big-prize-container .big-prize-content .big-prize-exit {
  cursor: pointer;
  width: 30px;
  align-self: flex-end;
  margin-top: 18.1101px;
  margin-right: 21.4622px;
}

.big-prize-backgroung .big-prize-container .big-prize-content .big-prize {
  width: 422.7832px;
  margin-bottom: 27.858px;
  margin-top: -6.7331px;
}

@media (max-width: 768px) {
  .big-prize-backgroung .big-prize-container .big-prize-content .big-prize {
    width: 322.7832px;
  }
}

@media (max-width: 546px) {
  .big-prize-backgroung .big-prize-container .big-prize-content .big-prize {
    width: 248.7832px;
    margin-top: 13.2669px;
    margin-bottom: 38.858px;
  }
}

.big-prize-backgroung .big-prize-container .big-prize-content .big-prize-remind {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: center;
}

@media (max-width: 546px) {
  .big-prize-backgroung .big-prize-container .big-prize-content .big-prize-remind {
    width: 80%;
  }
}

.big-prize-backgroung .big-prize-container .big-prize-content .big-prize-remind .remind-icon {
  width: 28.4209px;
  margin-right: 9.3721px;
}

.big-prize-backgroung .big-prize-container .big-prize-content .big-prize-remind .remind-text {
  color: white;
  font-size: 22px;
  line-height: 26.4px;
  width: 384.348px;
  font-weight: bold;
}

/*#region moudle*/
.moudle {
  width: 100%;
  height: 100%;
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  z-index: 13;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 2.08vw;
}

.moudle .moudle-container {
  position: relative;
  background-size: cover;
  padding: 1.36vw;
  padding-bottom: 0;
  border: 2px #ff8908 solid;
  border-radius: 15px;
  overflow: hidden;
}

.moudle .moudle-container .moudle-content {
  width: 100%;
  height: 104%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: bold;
  position: relative;
  z-index: 1;
}

.moudle .moudle-container .moudle-content .moudle-exit {
  cursor: pointer;
  width: 2.62vw;
  align-self: flex-end;
}

.moudle .moudle-container .moudle-background {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

.moudle .moudle-container .moudle-background img {
  width: 100%;
  margin-bottom: -10px;
}

@media (max-width: 768px) {
  .moudle .moudle-container {
    padding: 19.6629px;
    padding-bottom: 0;
  }
  .moudle .moudle-container .moudle-content .moudle-exit {
    width: 27.9243px;
  }
}

.moudle-list .moudle-container {
  width: 66.66vw;
  height: 40vw;
  background-color: black;
}

.moudle-list .moudle-container .moudle-content .moudle-list-subtitle {
  padding-top: 1.35vw;
  color: #ffff00;
  font-size: 1.56vw;
  line-height: 36px;
  font-weight: bold;
  margin-bottom: 3.67vw;
}

.moudle-list .moudle-container .moudle-content .moudle-list-instruction {
  overflow-y: scroll;
  width: 40.91vw;
  height: 17.18vw;
  padding-right: 2.79vw;
}

.moudle-list .moudle-container .moudle-content .moudle-list-instruction .moudle-list-content {
  text-align: justify;
  color: white;
  font-size: 1.35vw;
  line-height: 38px;
  font-weight: bold;
}

.moudle-list .moudle-container .moudle-content .moudle-list-instruction .moudle-list-margin {
  margin-bottom: 2.08vw;
}

.moudle-list .moudle-container .moudle-content .moudle-list-instruction .moudle-list-from {
  display: flex;
  flex-wrap: wrap;
}

.moudle-list .moudle-container .moudle-content .moudle-list-instruction .moudle-list-from .font {
  color: #faf0f0;
  font-size: 24px;
  line-height: 40px;
  display: inline;
  font-weight: bold;
  margin-right: 18.9208px;
}

.moudle-list .moudle-container .moudle-content .moudle-list-instruction .moudle-list-from .form-2-btn {
  margin: 0;
  margin-right: 7.0203px;
}

.moudle-list .moudle-container .moudle-content .moudle-list-instruction .moudle-list-from .font-3 {
  flex: auto;
}

.moudle-list .moudle-container .moudle-content .moudle-list-instruction .moudle-list-input {
  display: flex;
  justify-content: center;
}

.moudle-list .moudle-container .moudle-content .moudle-list-instruction .moudle-list-input .form-3-text {
  width: 100%;
  height: 6.35vw;
  border-radius: 5px;
}

.moudle-list .moudle-container .moudle-content .moudle-list-instruction .moudle-list-sent {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px;
  border: 0px;
  background-color: unset;
}

.moudle-list .moudle-container .moudle-content .moudle-list-instruction .moudle-list-sent .sent-img {
  height: 50px;
}

.moudle-list .moudle-container .moudle-content .moudle-list-instruction::-webkit-scrollbar {
  width: 4px;
}

.moudle-list .moudle-container .moudle-content .moudle-list-instruction::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px #333333;
}

.moudle-list .moudle-container .moudle-content .moudle-list-instruction::-webkit-scrollbar-thumb {
  border: 4px solid #808080;
  border-radius: 2px;
}

@media (max-width: 768px) {
  .moudle-list .moudle-container {
    width: 708px;
    height: 424.8px;
  }
  .moudle-list .moudle-container .moudle-content .moudle-list-subtitle {
    font-size: 16.59px;
    line-height: 19.91px;
  }
  .moudle-list .moudle-container .moudle-content .moudle-list-instruction {
    width: 434.561px;
    height: 182.5462px;
  }
  .moudle-list .moudle-container .moudle-content .moudle-list-instruction .moudle-list-content {
    font-size: 14.38px;
    line-height: 21.02px;
  }
  .moudle-list .moudle-container .moudle-content .moudle-list-instruction .moudle-list-margin {
    margin-bottom: 22.0989px;
  }
  .moudle-list .moudle-container .moudle-content .moudle-list-instruction .moudle-list-from .font {
    font-size: 1.72vw;
    line-height: 2.88vw;
  }
  .moudle-list .moudle-container .moudle-content .moudle-list-instruction .moudle-list-input {
    font-size: 18px;
    line-height: 28px;
  }
  .moudle-list .moudle-container .moudle-content .moudle-list-instruction .moudle-list-input .form-3-text {
    font-size: 18px;
    line-height: 28px;
  }
}

@media (max-width: 727px) {
  .moudle-list .moudle-container {
    width: 557px;
    height: 334.8px;
  }
}

@media (max-width: 580px) {
  .moudle-list .moudle-container {
    width: 557px;
    height: 334.8px;
  }
}

@media (max-width: 584px) {
  .moudle-list .moudle-container {
    width: 347px;
    height: 602px;
  }
  .moudle-list .moudle-container .moudle-content .moudle-list-subtitle {
    font-size: 24px;
    line-height: 28.8px;
  }
  .moudle-list .moudle-container .moudle-content .moudle-list-instruction {
    width: 309.9459px;
    height: 328.352px;
  }
  .moudle-list .moudle-container .moudle-content .moudle-list-instruction .moudle-list-content {
    font-size: 20px;
    line-height: 38px;
  }
  .moudle-list .moudle-container .moudle-content .moudle-list-instruction .moudle-list-margin {
    margin-bottom: 17.1193px;
  }
  .moudle-list .moudle-container .moudle-content .moudle-list-instruction .moudle-list-from .font {
    font-size: 18px;
    line-height: 32px;
  }
  .moudle-list .moudle-container .moudle-content .moudle-list-instruction .moudle-list-input {
    margin-bottom: 9.3979px;
  }
  .moudle-list .moudle-container .moudle-content .moudle-list-instruction .moudle-list-input .form-3-text {
    height: 70px;
  }
}

.moudle-purpose,
.moudle-rule,
.moudle-lottery,
.moudle-winning,
.moudle-award,
.moudle-notice,
.moudle-questionnaire {
  display: none;
}

.moudle-writeQuestionnaire {
  display: none;
}

.moudle-writeQuestionnaire .moudle-container .moudle-backstage-instruction {
  height: 8.69vw;
  padding-top: 84.4614px;
}

@media (max-width: 915px) {
  .moudle-writeQuestionnaire .moudle-container .moudle-backstage-instruction {
    padding-top: 33.4614px;
  }
}

@media (max-width: 720px) {
  .moudle-writeQuestionnaire .moudle-container .moudle-backstage-instruction {
    padding-top: 1.8767px;
  }
}

@media (max-width: 579px) {
  .moudle-writeQuestionnaire .moudle-container .moudle-backstage-instruction {
    padding-top: 12.8767px;
  }
}

.moudle-topic .moudle-container {
  width: 66.66vw;
  height: 40vw;
  background-color: black;
}

@media (max-width: 1480px) {
  .moudle-topic .moudle-container {
    width: 708px;
    height: 424.8px;
  }
}

@media (max-width: 734px) {
  .moudle-topic .moudle-container {
    width: 655px;
    height: 393px;
  }
}

@media (max-width: 721px) {
  .moudle-topic .moudle-container {
    width: 347px;
    height: 602px;
  }
}

.moudle-question {
  display: none;
}

.moudle-question .moudle-container .moudle-content {
  color: white;
}

.moudle-question .moudle-container .moudle-content .moudle-exit {
  margin-bottom: 2.8vw;
}

.moudle-question .moudle-container .moudle-content .moudle-title {
  font-size: 2.08vw;
  line-height: 2.5vw;
  text-align: center;
  margin-bottom: 0.62vw;
}

@media (max-width: 1480px) {
  .moudle-question .moudle-container .moudle-content .moudle-title {
    font-size: 22.13px;
    line-height: 26.55px;
    margin-bottom: 6.6745px;
  }
}

@media (max-width: 721px) {
  .moudle-question .moudle-container .moudle-content .moudle-title {
    font-size: 28px;
    line-height: 33.6px;
    margin-bottom: 9.1178px;
    padding: 0 18.503px;
  }
}

.moudle-question .moudle-container .moudle-content .moudle-subtitle {
  font-size: 1.04vw;
  line-height: 1.25vw;
  text-align: center;
  margin-bottom: 2.16vw;
  color: #ff8908;
}

@media (max-width: 1480px) {
  .moudle-question .moudle-container .moudle-content .moudle-subtitle {
    margin-bottom: 22.9412px;
    font-size: 11.06px;
    line-height: 13.28px;
  }
}

@media (max-width: 721px) {
  .moudle-question .moudle-container .moudle-content .moudle-subtitle {
    margin-bottom: 41.5588px;
    font-size: 14px;
    line-height: 16.8px;
  }
}

.moudle-question .moudle-container .moudle-content .moudle-btn-container {
  display: flex;
}

@media (max-width: 721px) {
  .moudle-question .moudle-container .moudle-content .moudle-btn-container {
    flex-direction: column;
    align-items: center;
  }
}

.moudle-question .moudle-container .moudle-content .moudle-btn-container .moudle-btn-2 {
  margin: 0 1.62vw;
}

@media (max-width: 1480px) {
  .moudle-question .moudle-container .moudle-content .moudle-btn-container .moudle-btn-2 {
    margin: 0 17.3159px;
  }
}

@media (max-width: 721px) {
  .moudle-question .moudle-container .moudle-content .moudle-btn-container .moudle-btn-2 {
    margin: 16.1971px 0;
  }
}

.moudle-question .moudle-container .moudle-content .moudle-btn-container .moudle-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  background-image: url("../img/moudle/backgroung-btn.png");
  width: 233.5923px;
  height: 172.0658px;
}

@media (max-width: 1480px) {
  .moudle-question .moudle-container .moudle-content .moudle-btn-container .moudle-btn {
    width: 129.2058px;
    height: 95.1739px;
    background-size: cover;
  }
}

@media (max-width: 721px) {
  .moudle-question .moudle-container .moudle-content .moudle-btn-container .moudle-btn {
    width: 295px;
    height: 55px;
    background-image: url("../img/moudle/phone-backgroung-btn-2.png");
    background-size: contain;
  }
}

.moudle-question .moudle-container .moudle-content .moudle-btn-container .moudle-btn .moudle-btn-content {
  font-size: 2.08vw;
  position: absolute;
}

@media (max-width: 1480px) {
  .moudle-question .moudle-container .moudle-content .moudle-btn-container .moudle-btn .moudle-btn-content {
    width: 100%;
    font-size: 22.13px;
    text-align: center;
  }
}

.moudle-question .moudle-container .moudle-people {
  position: absolute;
  left: 50%;
  bottom: -14px;
  z-index: 3;
  width: 25vw;
  transform: translate(-50%, 0);
}

@media (max-width: 1024px) {
  .moudle-question .moudle-container .moudle-people {
    width: 275px;
    bottom: -6px;
  }
}

@media (max-width: 576px) {
  .moudle-question .moudle-container .moudle-people {
    width: 230px;
    bottom: -3px;
  }
}

.moudle-teach {
  display: none;
}

.moudle-teach a {
  color: white;
  text-decoration: none;
  font-size: 24px;
}

@media (max-width: 1550px) {
  .moudle-teach a {
    font-size: 21px;
  }
}

@media (max-width: 1414px) {
  .moudle-teach a {
    font-size: 17px;
  }
}

@media (max-width: 1039px) {
  .moudle-teach a {
    font-size: 12px;
  }
}

.moudle-teach .moudle-container .moudle-teach-information {
  width: 36.45vw;
  height: 14.43vw;
  background-image: url("../img/moudle/background-right.png");
  background-size: cover;
  padding-left: 19.58vw;
  margin-top: -1.85vw;
  margin-bottom: 1.83vw;
  padding-top: 4.26vw;
}

@media (max-width: 768px) {
  .moudle-teach .moudle-container .moudle-teach-information {
    width: 387.1875px;
    height: 153.2573px;
    padding-top: 45.1837px;
    padding-left: 208.3625px;
  }
}

@media (max-width: 721px) {
  .moudle-teach .moudle-container .moudle-teach-information {
    width: 316.5051px;
    height: 125.2796px;
    padding-top: 41.4527px;
    padding-left: 159.3076px;
  }
}

.moudle-teach .moudle-container .moudle-teach-information .moudle-teach-title {
  color: #22ab38;
  font-size: 1.87vw;
  font-weight: bolder;
  margin-bottom: 0.25vw;
  line-height: 1.77vw;
}

@media (max-width: 768px) {
  .moudle-teach .moudle-container .moudle-teach-information .moudle-teach-title {
    font-size: 19.91px;
    line-height: 18.81px;
    margin-bottom: 2.5882px;
  }
}

@media (max-width: 721px) {
  .moudle-teach .moudle-container .moudle-teach-information .moudle-teach-title {
    font-size: 28.63px;
    line-height: 27.04px;
    margin-bottom: 2.5882px;
  }
}

.moudle-teach .moudle-container .moudle-teach-information .moudle-teach-subtitle {
  font-size: 1.14vw;
  line-height: 1.77vw;
  font-weight: bolder;
  margin-bottom: 1.56vw;
}

@media (max-width: 768px) {
  .moudle-teach .moudle-container .moudle-teach-information .moudle-teach-subtitle {
    font-size: 12.17px;
    line-height: 18.81px;
    margin-bottom: 17.8235px;
  }
}

@media (max-width: 721px) {
  .moudle-teach .moudle-container .moudle-teach-information .moudle-teach-subtitle {
    font-size: 17.5px;
    line-height: 22px;
    margin-bottom: 17.8235px;
  }
}

.moudle-teach .moudle-container .moudle-teach-information .moudle-teach-next {
  cursor: pointer;
}

.moudle-teach .moudle-container .moudle-teach-information .moudle-teach-next .moudle-teach-next-img {
  width: 7.56vw;
}

@media (max-width: 768px) {
  .moudle-teach .moudle-container .moudle-teach-information .moudle-teach-next .moudle-teach-next-img {
    width: 80.2031px;
  }
}

@media (max-width: 721px) {
  .moudle-teach .moudle-container .moudle-teach-information .moudle-teach-next .moudle-teach-next-img {
    display: none;
  }
}

.moudle-teach .moudle-container .moudle-teach-background {
  background-color: rgba(0, 0, 0, 0.8);
  width: 39.79vw;
  padding-top: 1.2vw;
  overflow-y: scroll;
  z-index: 1;
}

@media (max-width: 768px) {
  .moudle-teach .moudle-container .moudle-teach-background {
    width: 422.669px;
  }
}

.moudle-teach .moudle-container .moudle-teach-background .moudle-teach-video-a {
  background-color: rgba(0, 0, 0, 0.8);
}

@media (max-width: 721px) {
  .moudle-teach .moudle-container .moudle-teach-background {
    width: 306.4459px;
    padding-top: 12.2181px;
  }
}

.moudle-teach .moudle-container .moudle-teach-background .moudle-teach-next-phone {
  display: none;
  cursor: pointer;
}

@media (max-width: 721px) {
  .moudle-teach .moudle-container .moudle-teach-background .moudle-teach-next-phone {
    display: block;
    width: 140px;
    margin: 0 auto 20.9607px;
  }
}

.moudle-teach .moudle-container .moudle-teach-background .moudle-teach-detail {
  width: 37.25vw;
  font-size: 1.35vw;
  line-height: 1.97vw;
  color: white;
  margin-bottom: 1.32vw;
  text-align: justify;
}

@media (max-width: 768px) {
  .moudle-teach .moudle-container .moudle-teach-background .moudle-teach-detail {
    width: 395.6806px;
    font-size: 14.38px;
    line-height: 21.02px;
    margin-bottom: 13.6468px;
  }
}

@media (max-width: 721px) {
  .moudle-teach .moudle-container .moudle-teach-background .moudle-teach-detail {
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 30.3529px;
    width: 290.315px;
  }
}

.moudle-teach .moudle-container .moudle-teach-background .moudle-teach-video-information {
  color: #ff8908;
  font-size: 0.93vw;
  line-height: 1.04vw;
  margin-bottom: 0.42vw;
  width: 37.25vw;
}

@media (max-width: 1046px) {
  .moudle-teach .moudle-container .moudle-teach-background .moudle-teach-video-information {
    line-height: 2.04vw;
  }
}

@media (max-width: 768px) {
  .moudle-teach .moudle-container .moudle-teach-background .moudle-teach-video-information {
    width: 100%;
    margin-bottom: 5.2516px;
  }
}

@media (max-width: 628px) {
  .moudle-teach .moudle-container .moudle-teach-background .moudle-teach-video-information {
    line-height: 4.04vw;
  }
}

@media (max-width: 414px) {
  .moudle-teach .moudle-container .moudle-teach-background .moudle-teach-video-information {
    font-size: 14px;
    line-height: 20px;
  }
}

.moudle-teach .moudle-container .moudle-teach-background .moudle-teach-video {
  width: 37.22vw;
}

@media (max-width: 768px) {
  .moudle-teach .moudle-container .moudle-teach-background .moudle-teach-video {
    width: 395.3132px;
  }
}

@media (max-width: 721px) {
  .moudle-teach .moudle-container .moudle-teach-background .moudle-teach-video {
    width: 289.0994px;
  }
}

.moudle-teach .moudle-container .moudle-teach-background::-webkit-scrollbar {
  width: 4px;
}

.moudle-teach .moudle-container .moudle-teach-background::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px #333333;
}

.moudle-teach .moudle-container .moudle-teach-background::-webkit-scrollbar-thumb {
  border: 4px solid #808080;
  border-radius: 2px;
}

.moudle-backstage .moudle-container {
  width: 100%;
  max-width: 1008.1133px;
  height: 450px;
  background-color: black;
}

.moudle-backstage .moudle-container .moudle-backstage-instruction {
  max-width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.moudle-backstage .moudle-container .moudle-backstage-instruction .moudle-backstage-content {
  text-align: justify;
  color: white;
  font-size: 26px;
  line-height: 38px;
  font-weight: bold;
}

.moudle-backstage .moudle-container .moudle-backstage-instruction .moudle-backstage-margin {
  margin-bottom: 1.71vw;
}

.moudle-backstage .moudle-container .moudle-backstage-instruction .moudle-backstage-btn {
  height: 50px;
  cursor: pointer;
}

@media (max-width: 1017px) {
  .moudle-backstage .moudle-container {
    max-width: 884.1133px;
    height: 393px;
  }
}

@media (max-width: 915px) {
  .moudle-backstage .moudle-container {
    max-width: 708px;
    height: 316.0714px;
  }
}

@media (max-width: 768px) {
  .moudle-backstage .moudle-container {
    max-width: 708px;
    height: 316.0714px;
  }
  .moudle-backstage .moudle-container .moudle-backstage-instruction {
    max-width: 85%;
  }
  .moudle-backstage .moudle-container .moudle-backstage-instruction .moudle-backstage-content {
    font-size: 18px;
    line-height: 26.69px;
  }
  .moudle-backstage .moudle-container .moudle-backstage-instruction .moudle-backstage-margin {
    margin-bottom: 24.1462px;
  }
}

@media (max-width: 728px) {
  .moudle-backstage .moudle-container {
    max-width: 557px;
    height: 247.8px;
  }
}

@media (max-width: 575px) {
  .moudle-backstage .moudle-container {
    max-width: 473px;
    height: 100%;
  }
  .moudle-backstage .moudle-container .moudle-backstage-instruction .moudle-backstage-content {
    font-size: 20px;
    line-height: 38px;
  }
  .moudle-backstage .moudle-container .moudle-backstage-instruction .moudle-backstage-margin {
    margin-bottom: 17.1193px;
  }
}

@media (max-width: 487px) {
  .moudle-backstage .moudle-container .moudle-backstage-instruction {
    font-size: 24px;
    line-height: 28.8px;
  }
}

.moudle-goto {
  display: none;
  z-index: 10001;
}

.moudle-goto .moudle-container .moudle-backstage-instruction {
  padding-top: 2.69vw;
}

@media (max-width: 768px) {
  .moudle-goto .moudle-container .moudle-backstage-instruction {
    padding-top: 35.8767px;
  }
}

/*#endregion*/
/*#region nav*/
nav {
  width: 100%;
  position: fixed;
  z-index: 12;
  background-color: #000000;
}

nav .nav-container {
  padding: 20px 30px;
  display: flex;
  justify-content: space-between;
  background-color: #000000;
}

nav .nav-container .logo {
  display: flex;
  width: 15.52%;
  cursor: pointer;
}

nav .nav-container .logo img {
  height: 100%;
}

nav .nav-container .sound-btn {
  width: 2.18%;
  border: 0px;
  padding: 0px;
  background-color: unset;
  cursor: pointer;
}

nav .nav-container .sound-btn img {
  width: 100%;
}

@media (max-width: 768px) {
  nav {
    height: 7.16vw;
  }
  nav .nav-container {
    padding: 1.39vw 3.9vw 0 3.9vw;
  }
  nav .nav-container .logo {
    width: 26.04%;
  }
  nav .nav-container .sound-btn {
    width: 3.03%;
  }
}

@media (max-width: 414px) {
  nav {
    height: 16vw;
  }
  nav .nav-container {
    padding: 3.63vw 4vw 0 4vw;
  }
  nav .nav-container .logo {
    width: 55.82%;
  }
  nav .nav-container .sound-btn {
    width: 6.21%;
  }
}

/*#endregion*/
/*#region banner-1*/
.banner-1 {
  width: 100%;
  padding-top: 6.95vw;
  overflow: hidden;
}

@media (max-width: 768px) {
  .banner-1 {
    height: 123.72vw;
    padding-top: 10.59vw;
  }
}

@media (max-width: 414px) {
  .banner-1 {
    height: 176.91vw;
    padding-top: 28.53vw;
  }
}

.banner-1 .slogn-1 {
  width: 20.63%;
  margin-left: 5.27vw;
  margin-bottom: 1.02vw;
  display: block;
}

@media (max-width: 768px) {
  .banner-1 .slogn-1 {
    width: 46.2%;
    margin-left: 8.44vw;
    margin-bottom: 3.26vw;
  }
}

@media (max-width: 414px) {
  .banner-1 .slogn-1 {
    width: 46.05%;
    margin-left: 8.94vw;
    margin-bottom: 3.29vw;
  }
}

.banner-1 .slogn-2 {
  width: 42.21%;
  margin-left: 2.86vw;
  margin-bottom: 1.67vw;
  display: block;
}

@media (max-width: 768px) {
  .banner-1 .slogn-2 {
    width: 94.51%;
    margin-left: 2.75%;
    margin-bottom: 3.77vw;
  }
}

@media (max-width: 414px) {
  .banner-1 .slogn-2 {
    width: 94.42%;
    margin-left: 2.84%;
    margin-bottom: 3.62vw;
  }
}

.banner-1 .slognAbreast {
  display: flex;
  align-items: center;
  margin-left: 2.86vw;
  margin-bottom: 0.9vw;
}

@media (max-width: 768px) {
  .banner-1 .slognAbreast {
    margin-left: 2.74vw;
    margin-bottom: 2.23vw;
  }
}

@media (max-width: 414px) {
  .banner-1 .slognAbreast {
    margin-left: 3.07vw;
    margin-bottom: 0;
    flex-direction: column;
    align-items: flex-start;
  }
}

.banner-1 .slognAbreast .slogn-3 {
  width: 27.3%;
  margin-right: 2.64vw;
}

@media (max-width: 990px) {
  .banner-1 .slognAbreast .slogn-3 {
    margin-right: 1.64vw;
  }
}

@media (max-width: 900px) {
  .banner-1 .slognAbreast .slogn-3 {
    margin-right: 0.64vw;
  }
}

@media (max-width: 768px) {
  .banner-1 .slognAbreast .slogn-3 {
    width: 61.14%;
    margin-right: 5.91vw;
  }
}

@media (max-width: 414px) {
  .banner-1 .slognAbreast .slogn-3 {
    width: 91.74%;
    margin-right: 0;
    margin-bottom: 5.85vw;
  }
}

.banner-1 .slognAbreast .slogn-4 {
  width: 20.26%;
  display: flex;
  align-items: center;
}

.banner-1 .slognAbreast .slogn-4 img {
  width: 54px;
}

@media (max-width: 1290px) {
  .banner-1 .slognAbreast .slogn-4 img {
    width: 51px;
  }
}

@media (max-width: 1030px) {
  .banner-1 .slognAbreast .slogn-4 img {
    width: 45px;
  }
}

@media (max-width: 900px) {
  .banner-1 .slognAbreast .slogn-4 img {
    width: 40px;
  }
}

@media (max-width: 798px) {
  .banner-1 .slognAbreast .slogn-4 img {
    width: 54px;
  }
}

@media (max-width: 577px) {
  .banner-1 .slognAbreast .slogn-4 img {
    width: 40px;
  }
}

@media (max-width: 375px) {
  .banner-1 .slognAbreast .slogn-4 img {
    width: 40px;
  }
}

.banner-1 .slognAbreast .slogn-4 .views-people {
  padding-left: 10px;
  display: flex;
  flex-direction: column;
}

@media (max-width: 900px) {
  .banner-1 .slognAbreast .slogn-4 .views-people {
    padding-left: 3px;
  }
}

.banner-1 .slognAbreast .slogn-4 .views-people span {
  letter-spacing: 1.2px;
  font-size: 18px;
  color: #ffffff;
}

@media (max-width: 1290px) {
  .banner-1 .slognAbreast .slogn-4 .views-people span {
    font-size: 15px;
  }
}

@media (max-width: 1160px) {
  .banner-1 .slognAbreast .slogn-4 .views-people span {
    font-size: 13px;
  }
}

@media (max-width: 1030px) {
  .banner-1 .slognAbreast .slogn-4 .views-people span {
    font-size: 9px;
  }
}

@media (max-width: 768px) {
  .banner-1 .slognAbreast .slogn-4 .views-people span {
    font-size: 18px;
  }
}

@media (max-width: 577px) {
  .banner-1 .slognAbreast .slogn-4 .views-people span {
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .banner-1 .slognAbreast .slogn-4 {
    width: 45.38%;
  }
}

@media (max-width: 414px) {
  .banner-1 .slognAbreast .slogn-4 {
    margin-left: 13.1866px;
  }
}

.banner-1 .slogn-5 {
  width: 20.26%;
  margin-left: 2.86vw;
  display: flex;
}

@media (max-width: 768px) {
  .banner-1 .slogn-5 {
    width: 45.38%;
    margin-left: 2.74vw;
  }
}

@media (max-width: 414px) {
  .banner-1 .slogn-5 {
    display: none;
  }
}

.banner-1 .start-game {
  width: 20.49vw;
  margin-top: 1.302vw;
  margin-left: 2.8645vw;
}

@media (max-width: 768px) {
  .banner-1 .start-game {
    width: 30.48vw;
    margin-top: 3.302vw;
    margin-left: 4.8645vw;
  }
}

@media (max-width: 414px) {
  .banner-1 .start-game {
    width: 169.0205px;
    margin-top: -36.7744px;
    margin-left: 175.0218px;
    float: left;
  }
}

.banner-1 .banner-1-lantern-computer {
  width: 72.08%;
  left: 27.89vw;
  top: 4.94vw;
}

@media (max-width: 414px) {
  .banner-1 .banner-1-lantern-computer {
    display: none;
  }
}

.banner-1 .banner-1-lantern-phone {
  width: 63.69%;
  left: 55.17vw;
  top: 21.33vw;
  display: none;
}

@media (max-width: 414px) {
  .banner-1 .banner-1-lantern-phone {
    display: block;
  }
}

.banner-1 .banner-1-star {
  width: 8.09%;
  left: 46.09vw;
  top: 9.58vw;
}

@media (max-width: 414px) {
  .banner-1 .banner-1-star {
    width: 98.34%;
    left: 0.36vw;
    top: 82.1vw;
  }
}

.banner-1 .banner-1-unicorn {
  width: 50.46%;
  left: 46.09vw;
  bottom: 2.14vw;
  z-index: 2;
}

@media (max-width: 414px) {
  .banner-1 .banner-1-unicorn {
    width: 85.83%;
    left: 19.77vw;
    bottom: 18.09vw;
  }
}

.banner-1 .tigerBady {
  width: 18.43%;
  left: 33.2vw;
  bottom: 3.43vw;
  z-index: 1;
}

@media (max-width: 414px) {
  .banner-1 .tigerBady {
    width: 32.59%;
    left: 0;
    bottom: 17.93vw;
  }
}

.banner-1 .banner-1-build-computer {
  width: 100%;
  left: 0;
  bottom: 0;
}

@media (max-width: 414px) {
  .banner-1 .banner-1-build-computer {
    display: none;
  }
}

.banner-1 .banner-1-build-phone {
  width: 134.76%;
  left: -26.46vw;
  bottom: 16vw;
  display: none;
}

@media (max-width: 414px) {
  .banner-1 .banner-1-build-phone {
    display: block;
  }
}

.banner-1 .banner-1-redcloth-computer {
  width: 100%;
  left: -5.84vw;
  bottom: 0vw;
  display: block;
}

@media (max-width: 414px) {
  .banner-1 .banner-1-redcloth-computer {
    width: 122.86%;
    left: -11.08vw;
  }
}

.banner-1 .banner-1-redcloth-phone {
  width: 122.86vw;
  left: -11.09vw;
  bottom: 0;
  display: none;
}

@media (max-width: 414px) {
  .banner-1 .banner-1-redcloth-phone {
    display: block;
  }
}

.banner-1 .brand {
  width: 2.15%;
  right: 1.56vw;
  bottom: 4.57vw;
}

@media (max-width: 414px) {
  .banner-1 .brand {
    display: none;
  }
}

.banner-1 .banner-down {
  width: 100vw;
  top: 4.94vw;
  left: 0;
  z-index: -1;
}

@media (max-width: 414px) {
  .banner-1 .banner-down {
    display: none;
  }
}

.banner-1 .banner-middle {
  width: 100vw;
  top: 4.94vw;
  left: 0;
  z-index: -1;
}

@media (max-width: 414px) {
  .banner-1 .banner-middle {
    display: none;
  }
}

.banner-1 .banner-1-video-background-computer {
  width: 100vw;
  top: 4.94vw;
  left: 0;
  z-index: -1;
}

@media (max-width: 768px) {
  .banner-1 .banner-1-video-background-computer {
    display: none;
  }
}

.banner-1 .banner-1-background-ipad {
  width: 128.65vw;
  top: 7.16vw;
  left: -10.79vw;
  z-index: -1;
  display: none;
}

@media (max-width: 768px) {
  .banner-1 .banner-1-background-ipad {
    display: block;
  }
}

@media (max-width: 414px) {
  .banner-1 .banner-1-background-ipad {
    display: none;
  }
}

.banner-1 .banner-1-video-background-ipad {
  width: 100%;
  top: 7.16vw;
  left: 0;
  z-index: -1;
  display: none;
}

@media (max-width: 768px) {
  .banner-1 .banner-1-video-background-ipad {
    display: block;
  }
}

@media (max-width: 414px) {
  .banner-1 .banner-1-video-background-ipad {
    display: none;
  }
}

.banner-1 .banner-1-video-background-phone {
  width: 100%;
  top: 65px;
  left: 0;
  z-index: -1;
  display: none;
}

@media (max-width: 414px) {
  .banner-1 .banner-1-video-background-phone {
    display: block;
  }
}

.position {
  margin-top: -93px;
  height: 93px;
  width: 10px;
}

@media (max-width: 768px) {
  .position {
    margin-top: -7.16vw;
    height: 7.16vw;
  }
}

@media (max-width: 414px) {
  .position {
    margin-top: -16vw;
    height: 16vw;
  }
}

/*#endregion*/
/*#region banner-2*/
.banner-2 {
  padding-top: 5.21vw;
}

@media (max-width: 768px) {
  .banner-2 {
    height: 122.91vw;
    padding-top: 5.2vw;
  }
}

@media (max-width: 414px) {
  .banner-2 {
    height: 244.19vw;
    padding-top: 6.35vw;
  }
}

.banner-2 .banner-2-title {
  width: 29.13%;
  margin: 0 auto 4.49vw;
  display: block;
}

@media (max-width: 768px) {
  .banner-2 .banner-2-title {
    width: 49.01%;
    margin: 0 auto 4.77vw;
  }
}

@media (max-width: 414px) {
  .banner-2 .banner-2-title {
    width: 61.28%;
    margin: 0 auto 8.11vw;
  }
}

.banner-2 .swiper-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: 80.74vw;
}

@media (max-width: 768px) {
  .banner-2 .swiper-container {
    margin: 0 0;
    width: 100vw;
  }
}

@media (max-width: 414px) {
  .banner-2 .swiper-container {
    margin: 0 0;
    width: 100vw;
  }
}

.banner-2 .swiper-container .swiper-button-prev {
  position: static;
  content: url("../img/banner-2/svg/arrow-left.svg");
  width: 1.18%;
  display: block;
  z-index: 0;
}

@media (max-width: 768px) {
  .banner-2 .swiper-container .swiper-button-prev {
    display: none;
  }
}

.banner-2 .swiper-container .swiper {
  width: 74.21vw;
  height: 13.8vw;
  display: flex;
  justify-content: center;
}

@media (max-width: 768px) {
  .banner-2 .swiper-container .swiper {
    width: 100vw;
    height: 28.64vw;
    margin-bottom: 5.06vw;
  }
}

@media (max-width: 414px) {
  .banner-2 .swiper-container .swiper {
    width: 100vw;
    height: 53.33vw;
    margin-bottom: 10.36vw;
  }
}

.banner-2 .swiper-container .swiper .swiper-wrapper {
  flex-direction: row;
}

.banner-2 .swiper-container .swiper .swiper-wrapper .swiper-slide {
  cursor: pointer;
}

.banner-2 .swiper-container .swiper .swiper-wrapper .swiper-slide img {
  width: 100%;
}

.banner-2 .swiper-container .swiper-button-next {
  content: url("../img/banner-2/svg/arrow-right.svg");
  width: 1.18%;
  position: static;
  display: block;
  z-index: 0;
}

@media (max-width: 768px) {
  .banner-2 .swiper-container .swiper-button-next {
    display: none;
  }
}

.banner-2 .banner-2-star-computer {
  width: 93.09%;
  top: 31.36vw;
  left: 5.26vw;
}

@media (max-width: 768px) {
  .banner-2 .banner-2-star-computer {
    width: 87.41%;
    top: 81.92vw;
    left: 10.44vw;
  }
}

@media (max-width: 414px) {
  .banner-2 .banner-2-star-computer {
    display: none;
  }
}

.banner-2 .banner-2-star-phone {
  width: 101.84%;
  top: 70.56vw;
  left: 4.16vw;
  display: none;
}

@media (max-width: 414px) {
  .banner-2 .banner-2-star-phone {
    display: block;
  }
}

.banner-2 .banner-2-unicorn {
  width: 18.07%;
  bottom: 0;
  left: 3.95vw;
  z-index: 2;
}

@media (max-width: 768px) {
  .banner-2 .banner-2-unicorn {
    width: 41.92%;
    bottom: 1.26vw;
    left: 0.61vw;
  }
}

@media (max-width: 414px) {
  .banner-2 .banner-2-unicorn {
    width: 43.79%;
    bottom: 0.86vw;
    left: 1.85vw;
  }
}

.banner-2 .banner-2-video-unicorn {
  width: 19.07%;
  bottom: 0.1vw;
  left: 3.4vw;
  z-index: 2;
}

@media (max-width: 768px) {
  .banner-2 .banner-2-video-unicorn {
    width: 44%;
    bottom: 1.2vw;
    left: -0.3vw;
  }
}

@media (max-width: 414px) {
  .banner-2 .banner-2-video-unicorn {
    width: 43.79%;
    bottom: -0.74vw;
    left: 1.85vw;
  }
}

.banner-2 .banner-2-build-computer {
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
}

@media (max-width: 768px) {
  .banner-2 .banner-2-build-computer {
    display: none;
  }
}

.banner-2 .banner-2-build-ipad {
  width: 116.45%;
  left: -8.81vw;
  bottom: 0;
  z-index: 1;
  display: none;
}

@media (max-width: 768px) {
  .banner-2 .banner-2-build-ipad {
    display: block;
  }
}

@media (max-width: 414px) {
  .banner-2 .banner-2-build-ipad {
    display: none;
  }
}

.banner-2 .banner-2-build-phone {
  width: 115.25%;
  left: -6.73vw;
  bottom: 0;
  display: none;
}

@media (max-width: 414px) {
  .banner-2 .banner-2-build-phone {
    display: block;
  }
}

.banner-2 .plate-container-computer {
  margin-left: 23.38%;
  bottom: 2.34vw;
}

@media (max-width: 768px) {
  .banner-2 .plate-container-computer {
    display: none;
  }
}

.banner-2 .plate-computer {
  width: 10.98vw;
  margin-left: 1vw;
  cursor: pointer;
  z-index: -1;
}

@media (max-width: 768px) {
  .banner-2 .plate-computer {
    display: none;
  }
}

.banner-2 .plate-1-computer {
  margin-left: 0;
}

.banner-2 .plate-container-phone {
  display: none;
  cursor: pointer;
}

@media (max-width: 768px) {
  .banner-2 .plate-container-phone {
    width: 92.18vw;
    height: 29.23vw;
    display: flex;
    justify-content: space-between;
    align-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto;
  }
}

@media (max-width: 414px) {
  .banner-2 .plate-container-phone {
    width: 100%;
    height: 108vw;
    flex-direction: column;
    align-items: center;
    align-content: unset;
  }
}

.banner-2 .plate-phone {
  display: none;
}

@media (max-width: 768px) {
  .banner-2 .plate-phone {
    width: 44.96vw;
    display: block;
  }
}

@media (max-width: 414px) {
  .banner-2 .plate-phone {
    width: 80vw;
  }
}

/*#endregion*/
/*#region banner-3*/
.banner-3 {
  padding-top: 7.16vw;
  padding-left: 21.72vw;
  overflow: hidden;
}

@media (max-width: 768px) {
  .banner-3 {
    height: 144.24vw;
    padding-top: 5.23vw;
    padding-left: 0;
  }
}

@media (max-width: 414px) {
  .banner-3 {
    height: 192.38vw;
    padding-top: 10.68vw;
    padding-left: 0;
  }
}

.banner-3 .game-finish {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 11;
  background-image: url("../img/moudle/finish.png");
  background-size: cover;
  background-position: center;
  display: none;
  animation-name: open;
  animation-duration: 1s;
}

@keyframes open {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .banner-3 .game-finish {
    background-image: url("../img/moudle/ipad-finish.png");
  }
}

.banner-3 .game-finish .game-finish-information {
  width: 9.68%;
  height: 33.56vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 768px) {
  .banner-3 .game-finish .game-finish-information {
    height: 104.75vw;
    margin: 0 auto;
  }
}

@media (max-width: 414px) {
  .banner-3 .game-finish .game-finish-information {
    height: 132.34vw;
    margin: 0 auto;
  }
}

.banner-3 .game-finish .game-finish-information .banner-3-title-computer {
  width: calc(6.14vw);
}

@media (max-width: 768px) {
  .banner-3 .game-finish .game-finish-information .banner-3-title-computer {
    display: none;
  }
}

.banner-3 .game-finish .game-finish-information .banner-3-title-phone {
  width: calc(41.95vw - 17px);
  display: none;
}

@media (max-width: 768px) {
  .banner-3 .game-finish .game-finish-information .banner-3-title-phone {
    display: block;
    width: calc(33.85vw - 17px);
  }
}

@media (max-width: 414px) {
  .banner-3 .game-finish .game-finish-information .banner-3-title-phone {
    width: calc(41.95vw - 17px);
  }
}

.banner-3 .game-finish .game-finish-lottery-btn-computer {
  width: 9.68vw;
}

@media (max-width: 768px) {
  .banner-3 .game-finish .game-finish-lottery-btn-computer {
    display: none;
  }
}

.banner-3 .game-finish .game-finish-lottery-btn-phone {
  display: none;
  cursor: pointer;
}

@media (max-width: 768px) {
  .banner-3 .game-finish .game-finish-lottery-btn-phone {
    display: block;
  }
}

@media (max-width: 414px) {
  .banner-3 .game-finish .game-finish-lottery-btn-phone {
    width: calc(80.53vw - 17px);
    margin: 0 auto;
  }
}

.banner-3 .games-information {
  width: 9.68vw;
  height: 33.56vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 768px) {
  .banner-3 .games-information {
    height: 104.75vw;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 414px) {
  .banner-3 .games-information {
    height: 132.34vw;
    margin: 0 auto;
  }
}

.banner-3 .games-information .banner-3-title-computer {
  width: calc(6.14vw - 17px);
}

@media (max-width: 768px) {
  .banner-3 .games-information .banner-3-title-computer {
    display: none;
  }
}

.banner-3 .games-information .banner-3-title-phone {
  width: calc(41.95vw - 17px);
  display: none;
}

@media (max-width: 768px) {
  .banner-3 .games-information .banner-3-title-phone {
    display: block;
    width: calc(33.85vw - 17px);
  }
}

@media (max-width: 414px) {
  .banner-3 .games-information .banner-3-title-phone {
    width: calc(41.95vw - 17px);
  }
}

.banner-3 .games-information .games {
  width: 42vw;
  position: absolute;
  top: 7.03vw;
  left: 33.48vw;
  z-index: 1;
}

@media (max-width: 768px) {
  .banner-3 .games-information .games {
    width: 78.12vw;
    height: 76.9vw;
    position: static;
    display: flex;
    justify-content: space-between;
    align-content: space-between;
    flex-wrap: wrap;
  }
}

@media (max-width: 414px) {
  .banner-3 .games-information .games {
    width: 92.38vw;
    height: 90.94vw;
  }
}

.banner-3 .games-information .games .card {
  width: 13.12vw;
  height: 13.12vw;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: 0.8s all ease;
  display: inline-block;
  position: relative;
  perspective: 1000px;
}

@media (max-width: 768px) {
  .banner-3 .games-information .games .card {
    width: 25.3vw;
    height: 24.49vw;
  }
}

@media (max-width: 375px) {
  .banner-3 .games-information .games .card {
    width: 29.91vw;
    height: 28.96vw;
  }
}

.banner-3 .games-information .games .card .games-btn-front {
  width: 13.12vw;
  position: absolute;
  transform: rotateY(0);
  backface-visibility: hidden;
  transition: 1.5s all ease;
}

@media (max-width: 768px) {
  .banner-3 .games-information .games .card .games-btn-front {
    width: 25.3vw;
    display: block;
  }
}

@media (max-width: 414px) {
  .banner-3 .games-information .games .card .games-btn-front {
    width: 30.05vw;
  }
}

.banner-3 .games-information .games .card .games-btn-back {
  width: 13.12vw;
  position: absolute;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  transition: 1.5s all ease;
}

@media (max-width: 768px) {
  .banner-3 .games-information .games .card .games-btn-back {
    width: 25.3vw;
    display: block;
  }
}

@media (max-width: 414px) {
  .banner-3 .games-information .games .card .games-btn-back {
    width: 30.05vw;
  }
}

.banner-3 .games-information .games .card .front-open {
  transform: rotateY(-180deg);
}

.banner-3 .games-information .games .card .back-open {
  transform: rotateY(0);
}

.banner-3 .games-information .lottery-btn-computer {
  width: 9.68vw;
  cursor: pointer;
}

@media (max-width: 768px) {
  .banner-3 .games-information .lottery-btn-computer {
    display: none;
  }
}

.banner-3 .games-information .lottery-btn-phone {
  display: none;
  cursor: pointer;
}

@media (max-width: 768px) {
  .banner-3 .games-information .lottery-btn-phone {
    display: block;
  }
}

@media (max-width: 414px) {
  .banner-3 .games-information .lottery-btn-phone {
    width: calc(80.53vw - 17px);
    margin: 0 auto;
  }
}

.banner-3 .banner-3-star-computer {
  width: 94.46%;
  top: 5.95vw;
  left: 2.14vw;
}

@media (max-width: 768px) {
  .banner-3 .banner-3-star-computer {
    display: none;
  }
}

.banner-3 .banner-3-left-star-ipad {
  width: 20.52vw;
  top: 4.08vw;
  left: 8.6vw;
  display: none;
}

@media (max-width: 768px) {
  .banner-3 .banner-3-left-star-ipad {
    display: block;
  }
}

@media (max-width: 414px) {
  .banner-3 .banner-3-left-star-ipad {
    display: none;
  }
}

.banner-3 .banner-3-right-star-ipad {
  width: 20.41vw;
  top: 2.6vw;
  right: 11.51vw;
  display: none;
}

@media (max-width: 768px) {
  .banner-3 .banner-3-right-star-ipad {
    display: block;
  }
}

@media (max-width: 414px) {
  .banner-3 .banner-3-right-star-ipad {
    display: none;
  }
}

.banner-3 .banner-3-star-phone {
  display: none;
}

@media (max-width: 414px) {
  .banner-3 .banner-3-star-phone {
    width: 100.98%;
    top: 3.87vw;
    left: 0.36vw;
  }
}

.banner-3 .banner-3-lantern {
  width: 19.91%;
  top: 21.14vw;
  left: -1.33vw;
}

@media (max-width: 768px) {
  .banner-3 .banner-3-lantern {
    width: 33.74%;
    top: auto;
    left: -9.69vw;
    bottom: 15.89vw;
  }
}

@media (max-width: 414px) {
  .banner-3 .banner-3-lantern {
    width: 31.35%;
    top: auto;
    left: -6.7vw;
    bottom: 19.63vw;
  }
}

.banner-3 .banner-3-bridge {
  width: 24.82%;
  left: 0.78vw;
  bottom: -0.16vw;
  z-index: -3;
}

@media (max-width: 768px) {
  .banner-3 .banner-3-bridge {
    width: 44.12%;
    left: 1.71vw;
    bottom: -0.58vw;
  }
}

@media (max-width: 414px) {
  .banner-3 .banner-3-bridge {
    width: 53.98%;
    left: -2.83vw;
    bottom: -0.77vw;
  }
}

.banner-3 .banner-3-cloud-4 {
  width: 22.61%;
  left: 1.61vw;
  bottom: -0.65vw;
  z-index: -1;
}

@media (max-width: 768px) {
  .banner-3 .banner-3-cloud-4 {
    width: 43.1%;
    left: 3.27vw;
    bottom: -0.77vw;
  }
}

@media (max-width: 414px) {
  .banner-3 .banner-3-cloud-4 {
    width: 35.23%;
    left: -0.2vw;
    bottom: -0.65vw;
  }
}

.banner-3 .banner-3-cloud-5 {
  width: 20.89%;
  left: -2.16vw;
  bottom: -0.74vw;
  z-index: -2;
}

@media (max-width: 768px) {
  .banner-3 .banner-3-cloud-5 {
    width: 32.54%;
    left: -8.15vw;
    bottom: -0.58vw;
  }
}

@media (max-width: 414px) {
  .banner-3 .banner-3-cloud-5 {
    width: 39.81%;
    left: -8.15vw;
    bottom: -0.58vw;
  }
}

.banner-3 .banner-3-cloud-1 {
  width: 14.22%;
  right: -1.42vw;
  bottom: -0.51vw;
  z-index: -1;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  .banner-3 .banner-3-cloud-1 {
    width: 31.83%;
    bottom: -1.33vw;
    right: 2.87vw;
  }
}

@media (max-width: 414px) {
  .banner-3 .banner-3-cloud-1 {
    width: 26.46%;
    bottom: 0;
    right: 4.78vw;
  }
}

.banner-3 .banner-3-cloud-2 {
  width: 19.71%;
  right: -0.89vw;
  bottom: -0.63vw;
  z-index: -2;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  .banner-3 .banner-3-cloud-2 {
    width: 36.69%;
    right: -1.4vw;
    bottom: -1.57vw;
  }
}

@media (max-width: 414px) {
  .banner-3 .banner-3-cloud-2 {
    width: 44.13%;
    right: -10.21vw;
    bottom: 0;
  }
}

.banner-3 .banner-3-unicorn {
  width: 17.66%;
  right: 6.37vw;
  bottom: 1.06vw;
  z-index: -3;
}

@media (max-width: 768px) {
  .banner-3 .banner-3-unicorn {
    width: 32.88%;
    right: 12.11%;
    bottom: 1.31vw;
  }
}

@media (max-width: 414px) {
  .banner-3 .banner-3-unicorn {
    width: 39.55%;
    right: 6.02%;
    bottom: 3.06vw;
  }
}

.banner-3 .banner-3-video-unicorn {
  width: 24.5%;
  right: 4.8vw;
  bottom: 0.6vw;
  z-index: -3;
}

@media (max-width: 768px) {
  .banner-3 .banner-3-video-unicorn {
    width: 49%;
    right: 7%;
    bottom: -0.9%;
  }
}

@media (max-width: 414px) {
  .banner-3 .banner-3-video-unicorn {
    width: 39.55%;
    right: 6.02%;
    bottom: 3.06vw;
  }
}

.banner-3 .banner-3-cloud-3 {
  width: 18.82%;
  right: -3.86vw;
  bottom: -0.75vw;
  z-index: -4;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  .banner-3 .banner-3-cloud-3 {
    width: 35.04vw;
    right: -6.9vw;
    bottom: -1.77vw;
  }
}

@media (max-width: 414px) {
  .banner-3 .banner-3-cloud-3 {
    width: 42.15%;
    right: -16.64vw;
    bottom: 0;
  }
}

.banner-3 .banner-3-moon {
  width: 13.68%;
  right: 0;
  bottom: 5.97vw;
  z-index: -5;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  .banner-3 .banner-3-moon {
    width: 25.46vw;
    right: -3.75vw;
    bottom: 10.49vw;
  }
}

@media (max-width: 414px) {
  .banner-3 .banner-3-moon {
    width: 30.62vw;
    right: -8.27vw;
    bottom: 14.11vw;
  }
}

/*#endregion*/
/*#region banner-4*/
.banner-4 {
  z-index: 0;
  background-color: #000000;
  padding-top: 14.31vw;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  .banner-4 {
    height: 101.65vw;
    padding-top: 19.66vw;
  }
}

@media (max-width: 414px) {
  .banner-4 {
    height: 128.31vw;
    padding-top: 26.3vw;
  }
}

.banner-4 .banner-4-title {
  width: 14.94vw;
  margin: 0 auto 2.39vw;
  display: block;
}

@media (max-width: 768px) {
  .banner-4 .banner-4-title {
    width: 32.55vw;
    margin: 0 auto 3.9vw;
  }
}

@media (max-width: 414px) {
  .banner-4 .banner-4-title {
    width: 42.25vw;
    margin: 0 auto 8.04vw;
  }
}

.banner-4 .swiper-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: 80.74vw;
}

@media (max-width: 768px) {
  .banner-4 .swiper-container {
    margin: 0;
    width: 100vw;
  }
}

@media (max-width: 414px) {
  .banner-4 .swiper-container {
    margin: 0;
    width: 100vw;
  }
}

.banner-4 .swiper-container .swiper-button-prev {
  position: static;
  content: url("../img/banner-2/svg/arrow-left.svg");
  width: 1.18%;
  display: block;
  margin-top: 0;
}

@media (max-width: 768px) {
  .banner-4 .swiper-container .swiper-button-prev {
    display: none;
  }
}

.banner-4 .swiper-container .swiper {
  width: 73.74vw;
  height: 11.87vw;
  margin-left: 2.29vw;
  margin-right: 2.29vw;
  display: flex;
  justify-content: center;
}

@media (max-width: 768px) {
  .banner-4 .swiper-container .swiper {
    width: 100vw;
    height: 36.45vw;
    margin-left: 4vw;
    margin-right: 0;
  }
}

@media (max-width: 414px) {
  .banner-4 .swiper-container .swiper {
    width: 100vw;
    height: 44.73vw;
    margin-left: 4vw;
    margin-right: 0;
  }
}

.banner-4 .swiper-container .swiper .swiper-wrapper .swiper-slide img {
  width: 100%;
}

.banner-4 .swiper-container .swiper-button-next {
  content: url("../img/banner-2/svg/arrow-right.svg");
  width: 1.18%;
  position: static;
  display: block;
  margin-top: 0;
}

@media (max-width: 768px) {
  .banner-4 .swiper-container .swiper-button-next {
    display: none;
  }
}

.banner-4 .banner-4-lantern {
  width: 111.83%;
  top: 0;
  left: -5.92vw;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  .banner-4 .banner-4-lantern {
    width: 156.78%;
    left: -28.34%;
  }
}

@media (max-width: 414px) {
  .banner-4 .banner-4-lantern {
    width: 166.61%;
    left: -33.61%;
  }
}

.banner-4 .role-1 {
  width: 8.11%;
  left: 12.27vw;
  bottom: 0.47vw;
}

@media (max-width: 414px) {
  .banner-4 .role-1 {
    width: 16.1%;
    left: 0.39vw;
    bottom: 1.27vw;
  }
}

.banner-4 .role-2 {
  width: 10.74%;
  left: 17.95vw;
  bottom: 0.38vw;
}

@media (max-width: 414px) {
  .banner-4 .role-2 {
    width: 21.33%;
    left: 11.74vw;
    bottom: 1.08vw;
  }
}

.banner-4 .role-3 {
  width: 7.61%;
  left: 28.15vw;
  bottom: 0;
}

@media (max-width: 414px) {
  .banner-4 .role-3 {
    width: 15.11vw;
    left: 32.96vw;
    bottom: 0.33vw;
  }
}

.banner-4 .role-4 {
  width: 10.78%;
  left: 62.82vw;
  bottom: 0.47vw;
}

@media (max-width: 414px) {
  .banner-4 .role-4 {
    width: 21.05vw;
    left: 50.25vw;
    bottom: 0.86vw;
  }
}

.banner-4 .role-5 {
  width: 9.75%;
  left: 72.04vw;
  bottom: 0.47vw;
}

@media (max-width: 414px) {
  .banner-4 .role-5 {
    width: 19.06vw;
    left: 68.34vw;
    bottom: 0.86vw;
  }
}

.banner-4 .role-6 {
  width: 7.24%;
  left: 80.53vw;
  bottom: 0.47vw;
}

@media (max-width: 414px) {
  .banner-4 .role-6 {
    width: 14.14vw;
    left: 85.08vw;
    bottom: 0.86vw;
  }
}

.banner-4 .banner-4-build {
  width: 104.21%;
  bottom: 1.33vw;
  z-index: -2;
}

@media (max-width: 414px) {
  .banner-4 .banner-4-build {
    width: 112.85vw;
    left: -3.58vw;
    bottom: 3.37vw;
  }
}

.banner-4 .banner-4-redcloth-computer {
  width: 100%;
  left: 0;
  bottom: 0;
  z-index: -1;
}

@media (max-width: 414px) {
  .banner-4 .banner-4-redcloth-computer {
    display: none;
  }
}

.banner-4 .banner-4-redcloth-phone {
  width: 101.77vw;
  left: -0.92vw;
  bottom: 0;
  z-index: -1;
  display: none;
}

@media (max-width: 414px) {
  .banner-4 .banner-4-redcloth-phone {
    display: block;
  }
}

.banner-4 .banner-4-video-background-computer {
  width: 100vw;
  bottom: 0;
  z-index: -3;
}

@media (max-width: 414px) {
  .banner-4 .banner-4-video-background-computer {
    display: none;
  }
}

.banner-4 .banner-4-background-ipad {
  display: none;
}

@media (max-width: 768px) {
  .banner-4 .banner-4-background-ipad {
    width: 111.72vw;
    display: block;
    left: -3.05vw;
    bottom: 0;
    z-index: -3;
  }
}

@media (max-width: 414px) {
  .banner-4 .banner-4-background-ipad {
    display: none;
  }
}

.banner-4 .banner-4-video-background-ipad {
  display: none;
}

@media (max-width: 768px) {
  .banner-4 .banner-4-video-background-ipad {
    width: 100vw;
    display: block;
    left: 0;
    bottom: 0;
    z-index: -3;
  }
}

@media (max-width: 414px) {
  .banner-4 .banner-4-video-background-ipad {
    display: none;
  }
}

.banner-4 .banner-4-video-background-phone {
  width: 100vw;
  bottom: 0;
  z-index: -3;
  display: none;
}

@media (max-width: 414px) {
  .banner-4 .banner-4-video-background-phone {
    display: block;
  }
}

/*#endregion*/
.writeQuestionnaire-btn {
  cursor: pointer;
}

/*#region classlist要增加的東西*/
/*#endregion*/
/*#region 光暈*/
.card {
  display: inline-block;
  position: relative;
  transform-style: preserve-3d;
  transition: all 1s cubic-bezier(0, 0, 0.2, 1);
  transform: rotateY(0);
}

.card::before {
  position: absolute;
  background-repeat: no-repeat;
  content: "";
  width: 100%;
  height: 100%;
  background-size: 100%;
  background-image: radial-gradient(circle, #fff679 30%, transparent 73%);
  z-index: -1;
}

.card::before {
  animation: gradient_lantern 3s ease infinite alternate;
}

@keyframes gradient_lantern {
  0% {
    transform: scaleX(1.2) scaleY(1);
  }
  100% {
    transform: scaleX(1.4) scaleY(1.2);
  }
}

/*#endregion*/
.moudle-teach .moudle-container .moudle-content .wrong {
  height: 15.26vw;
}

@media (max-width: 768px) {
  .moudle-teach .moudle-container .moudle-content .wrong {
    height: 161.2573px;
  }
}

@media (max-width: 721px) {
  .moudle-teach .moudle-container .moudle-content .wrong {
    height: 132.2796px;
  }
}

.moudle-lottery-finish {
  display: flex;
  position: fixed;
  top: 0;
}

.moudle-lottery-finish .moudle-container .moudle-content .moudle-list-subtitle {
  padding-top: 2.35vw;
  font-size: 48px;
  text-align: center;
}

@media (max-width: 1080px) {
  .moudle-lottery-finish .moudle-container .moudle-content .moudle-list-subtitle {
    font-size: 18px;
    padding: 0 140px;
    line-height: 25px;
    margin-bottom: 20px;
  }
}

@media (max-width: 770px) {
  .moudle-lottery-finish .moudle-container .moudle-content .moudle-list-subtitle {
    margin-top: -14px;
    margin-bottom: 15px;
  }
}

.moudle-lottery-finish .moudle-container .moudle-content .moudle-list-content {
  text-align: justify;
  color: white;
  font-size: 28px;
  padding: 0 250px;
  line-height: 40px;
}

@media (max-width: 1763px) {
  .moudle-lottery-finish .moudle-container .moudle-content .moudle-list-content {
    font-size: 24px;
  }
}

@media (max-width: 1620px) {
  .moudle-lottery-finish .moudle-container .moudle-content .moudle-list-content {
    padding: 0 140px;
    line-height: 25px;
  }
}

@media (max-width: 1599px) {
  .moudle-lottery-finish .moudle-container .moudle-content .moudle-list-content {
    font-size: 24px;
    padding: 0 140px;
    line-height: 25px;
  }
}

@media (max-width: 1200px) {
  .moudle-lottery-finish .moudle-container .moudle-content .moudle-list-content {
    font-size: 18px;
  }
}

@media (max-width: 770px) {
  .moudle-lottery-finish .moudle-container .moudle-content .moudle-list-content {
    line-height: 20px;
  }
}

@media (max-width: 700px) {
  .moudle-lottery-finish .moudle-container .moudle-content .moudle-list-content {
    font-size: 14px;
  }
}

.moudle-lottery-finish .moudle-container .moudle-content .moudle-list-content a {
  color: #1f8dff;
}

@media (max-width: 1080px) {
  .moudle-lottery-finish .moudle-container {
    height: 46vw;
  }
}

@media (max-width: 700px) {
  .moudle-lottery-finish .moudle-container {
    height: 55vw;
  }
}

@media (max-width: 580px) {
  .moudle-lottery-finish .moudle-container {
    height: 85vw;
  }
}

@media (max-width: 400px) {
  .moudle-lottery-finish .moudle-container {
    height: 92vw;
  }
}

.banner-2 {
  padding-top: 3.12vw;
}

@media (max-width: 1280px) {
  .banner-2 {
    height: 55.31vw;
  }
}

@media (max-width: 1053px) {
  .banner-2 {
    height: 59.31vw;
  }
}

@media (max-width: 800px) {
  .banner-2 {
    padding-top: 60px;
    height: 120.31vw;
  }
}

@media (max-width: 768px) {
  .banner-2 {
    height: 142.31vw;
  }
}

@media (max-width: 650px) {
  .banner-2 {
    height: 158.31vw;
  }
}

@media (max-width: 469px) {
  .banner-2 {
    padding-top: 40px;
    height: 407.88vw;
  }
}

.winner-list-container {
  /* 滾動條的內層滑軌背景顏色 */
  /* 滾動條的外層滑軌背景顏色 */
  /* 滾動條的內層滑塊顏色 */
  /* 滑軌兩頭的監聽按鈕顏色 */
}

.winner-list-container .winner-list-btn-container {
  display: flex;
  justify-content: center;
}

@media (max-width: 800px) {
  .winner-list-container .winner-list-btn-container {
    flex-wrap: wrap;
  }
}

.winner-list-container .winner-list-btn-container img {
  width: 10.98vw;
  margin: 0 1.24vw;
  cursor: pointer;
  z-index: 1;
}

@media (max-width: 800px) {
  .winner-list-container .winner-list-btn-container img {
    width: 25.98vw;
    margin: 0 1.24vw 20px;
  }
}

@media (max-width: 469px) {
  .winner-list-container .winner-list-btn-container img {
    margin: 0 0 3.19vw;
    width: 83.55vw;
  }
}

.winner-list-container .winner-list-information-container {
  display: flex;
  padding-left: 19.73vw;
  padding-top: 1.6vw;
}

@media (max-width: 800px) {
  .winner-list-container .winner-list-information-container {
    padding-left: 0;
    justify-content: center;
    padding-top: 1.95vw;
  }
}

@media (max-width: 469px) {
  .winner-list-container .winner-list-information-container {
    padding-top: 5.33vw;
  }
}

.winner-list-container .winner-list-information-container .winner-list-information-title {
  padding-top: 1.6vw;
  width: 12.07vw;
}

@media (max-width: 800px) {
  .winner-list-container .winner-list-information-container .winner-list-information-title {
    display: none;
  }
}

@media (max-width: 800px) {
  .winner-list-container .winner-list-information-container .winner-list-information-detail-container {
    display: flex;
    flex-direction: column;
    align-content: center;
  }
}

.winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-prize-name {
  color: #ff8908;
  font-size: 1.56vw;
  font-weight: bold;
  margin-bottom: 1.05vw;
  text-align: center;
}

@media (max-width: 800px) {
  .winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-prize-name {
    display: flex;
    justify-content: center;
    padding-left: 0;
    font-size: 3.25vw;
    margin-bottom: 2.05vw;
  }
}

@media (max-width: 469px) {
  .winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-prize-name {
    font-size: 5.25vw;
  }
}

.winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-prize-list-container {
  position: relative;
  margin-left: 0.73vw;
  height: 13.02vw;
  width: 47.83vw;
  margin-bottom: 2.15vw;
}

@media (max-width: 800px) {
  .winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-prize-list-container {
    margin: 0 auto;
    width: 78.83vw;
    height: auto;
  }
}

@media (max-width: 469px) {
  .winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-prize-list-container {
    width: 82.83vw;
  }
}

.winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-prize-list-container .information-detail-prize-list-title-container {
  height: 2.78vw;
  color: #ff8908;
  font-size: 1.25vw;
  font-weight: bold;
  display: flex;
}

@media (max-width: 800px) {
  .winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-prize-list-container .information-detail-prize-list-title-container {
    margin: 0 auto;
    font-size: 3.25vw;
    height: 4.78vw;
  }
}

@media (max-width: 469px) {
  .winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-prize-list-container .information-detail-prize-list-title-container {
    font-size: 4.25vw;
    height: 6.78vw;
  }
}

.winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-prize-list-container .information-detail-prize-list-title-container .information-detail-prize-list-title {
  border-bottom: 1px solid #ff8908;
  text-align: center;
  line-height: 2.78vw;
}

@media (max-width: 800px) {
  .winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-prize-list-container .information-detail-prize-list-title-container .information-detail-prize-list-title {
    line-height: 4.78vw;
  }
}

@media (max-width: 469px) {
  .winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-prize-list-container .information-detail-prize-list-title-container .information-detail-prize-list-title {
    line-height: 6.78vw;
  }
}

.winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-prize-list-container .information-detail-prize-list-title-container .information-detail-prize-list-title-1 {
  width: 16.79vw;
  border-radius: 0.86vw 0 0 0;
  border-top: 1px solid #ff8908;
  border-left: 1px solid #ff8908;
  border-right: 1px solid #ff8908;
}

@media (max-width: 800px) {
  .winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-prize-list-container .information-detail-prize-list-title-container .information-detail-prize-list-title-1 {
    width: 31.79vw;
  }
}

.winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-prize-list-container .information-detail-prize-list-title-container .information-detail-prize-list-title-2 {
  width: 30.87vw;
  border-radius: 0 0.86vw 0 0;
  border-top: 1px solid #ff8908;
  border-right: 1px solid #ff8908;
}

@media (max-width: 800px) {
  .winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-prize-list-container .information-detail-prize-list-title-container .information-detail-prize-list-title-2 {
    width: 51.87vw;
  }
}

.winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-prize-list-container .information-detail-prize-list-background-container {
  display: flex;
}

.winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-prize-list-container .information-detail-prize-list-background-container .information-detail-prize-list-background-left {
  height: 10.07vw;
  width: 16.79vw;
  border-left: 1px solid #ff8908;
  border-bottom: 1px solid #ff8908;
  border-right: 1px solid #ff8908;
  border-radius: 0 0 0 0.86vw;
}

@media (max-width: 800px) {
  .winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-prize-list-container .information-detail-prize-list-background-container .information-detail-prize-list-background-left {
    width: 31.79vw;
    height: 22.07vw;
  }
}

@media (max-width: 469px) {
  .winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-prize-list-container .information-detail-prize-list-background-container .information-detail-prize-list-background-left {
    height: 33.35vw;
  }
}

.winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-prize-list-container .information-detail-prize-list-background-container .information-detail-prize-list-background-right {
  height: 10.07vw;
  width: 30.87vw;
  border-right: 1px solid #ff8908;
  border-bottom: 1px solid #ff8908;
  border-radius: 0 0 0.86vw 0;
}

@media (max-width: 800px) {
  .winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-prize-list-container .information-detail-prize-list-background-container .information-detail-prize-list-background-right {
    width: 51.87vw;
    height: 22.07vw;
  }
}

@media (max-width: 469px) {
  .winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-prize-list-container .information-detail-prize-list-background-container .information-detail-prize-list-background-right {
    height: 33.35vw;
  }
}

.winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-prize-list-container .information-detail-prize-list-detail-container {
  position: absolute;
  top: 5.78vw;
  left: 6.8vw;
  color: white;
  width: 28.66vw;
  height: 9.94vw;
  padding-top: 1.04vw;
  font-size: 1.25vw;
  font-weight: bold;
  overflow-y: scroll;
  padding-bottom: 1.56vw;
}

@media (max-width: 800px) {
  .winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-prize-list-container .information-detail-prize-list-detail-container {
    font-size: 3.25vw;
    top: 6.78vw;
    left: 10.9vw;
    width: 51.66vw;
    height: 19.8vw;
  }
}

@media (max-width: 469px) {
  .winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-prize-list-container .information-detail-prize-list-detail-container {
    font-size: 4.25vw;
    width: 56.66vw;
    top: 8vw;
    height: 31.8vw;
  }
}

.winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-prize-list-container .information-detail-prize-list-detail-container .winning-people-container {
  display: flex;
  justify-content: space-between;
}

.winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-prize-list-container .information-detail-prize-list-detail-container#prize-list-5 {
  top: 2.78vw;
}

.winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-precautions-title {
  color: #f2e424;
  font-size: 1.25vw;
  font-weight: bold;
  margin-bottom: 0.21vw;
  padding-left: 0.73vw;
}

@media (max-width: 800px) {
  .winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-precautions-title {
    font-size: 3.25vw;
    padding-top: 3.9vw;
    padding-bottom: 1.95vw;
  }
}

@media (max-width: 469px) {
  .winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-precautions-title {
    font-size: 4.25vw;
    padding-top: 7.46vw;
  }
}

.winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-precautions-detail {
  font-size: 0.93vw;
  width: 47.82vw;
  color: white;
  padding-left: 0.73vw;
  line-height: 1.77vw;
}

@media (max-width: 800px) {
  .winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-precautions-detail {
    width: 78.68vw;
    font-size: 2vw;
    line-height: 2.25vw;
  }
}

@media (max-width: 650px) {
  .winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-precautions-detail {
    line-height: 3.25vw;
  }
}

@media (max-width: 469px) {
  .winner-list-container .winner-list-information-container .winner-list-information-detail-container .information-detail-precautions-detail {
    width: 83.26vw;
    font-size: 4.25vw;
    line-height: 5.25vw;
  }
}

.winner-list-container .information-detail-prize-list-detail-container::-webkit-scrollbar {
  width: 0.001px;
}

.winner-list-container .information-detail-prize-list-detail-1::-webkit-scrollbar-track-piece {
  background-color: black;
}

.winner-list-container .information-detail-prize-list-detail-1::-webkit-scrollbar-track {
  background-color: black;
}

.winner-list-container .information-detail-prize-list-detail-1::-webkit-scrollbar-thumb {
  background-color: black;
}

.winner-list-container .information-detail-prize-list-detail-1::-webkit-scrollbar-button {
  background-color: black;
  display: none;
}
/*# sourceMappingURL=index.css.map */