@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;500;700;900&display=swap");
body:has(.show-box.active) .top {
  z-index: 5000;
}

body {
  color: #313131 !important;
}

html {
  scroll-behavior: smooth;
  contain-intrinsic-size: 1000px;
}

a {
  color: #fff;
}

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

h1 {
  font-size: 30px;
  font-style: italic;
  font-weight: 400 !important;
  line-height: 40px;
  width: -moz-max-content;
  width: max-content;
  text-align: center;
  padding: 15px;
  margin-bottom: 15px;
  text-shadow: 0.1em 0.1em 0.05em #fff !important;
  background: linear-gradient(to bottom, transparent 50%, #f1d1b7 50%) !important;
  margin: 0 auto !important;
}
h1 span {
  color: red;
  font-weight: 400 !important;
}
@media screen and (max-width: 1023px) {
  h1 {
    font-size: 25px;
  }
}

.h1 {
  font-size: 18px;
  line-height: 28px;
  padding: 15px 30px;
  text-align: justify;
  margin-bottom: 30px;
  font-weight: 300 !important;
}

.cardtitle h2 {
  font-size: 30px;
  font-style: italic;
  font-weight: 400 !important;
  width: -moz-max-content;
  width: max-content;
  text-align: center;
  padding: 15px;
  margin-bottom: 15px;
  color: #000000;
  text-shadow: 0.1em 0.1em 0.05em #fff !important;
  background: linear-gradient(to bottom, transparent 50%, #f1d1b7 50%) !important;
  margin: 0 auto !important;
}
.cardtitle h2 span {
  color: red;
  font-weight: 400 !important;
}
@media screen and (max-width: 1023px) {
  .cardtitle h2 {
    font-size: 25px;
  }
}

.wrapper {
  position: relative;
  background-color: #f4e9e3;
  margin: 0;
  font-family: "Noto Sans TC", "微軟正黑體", sans-serif, arial;
  box-sizing: border-box;
  scroll-behavior: smooth;
  transition: 0.3s;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  font-size: 16px;
  overflow: hidden;
  background-image: url(../images/bg.jpg);
  background-repeat: repeat;
  background-position: center top;
  background-size: auto;
  background-attachment: fixed;
}
@media screen and (max-width: 1280px) {
  .wrapper {
    font-size: 15px;
  }
}
@media screen and (max-width: 360px) {
  .wrapper {
    font-size: 12px;
  }
}
.wrapper *, .wrapper *:before, .wrapper *:after {
  position: relative;
  margin: 0;
  font-family: "Noto Sans TC", "微軟正黑體", sans-serif, arial;
  font-weight: 300;
  box-sizing: border-box;
  scroll-behavior: smooth;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.wrapper *:focus {
  outline: none;
}
.wrapper :is(p) {
  font-family: "Noto Sans TC", "微軟正黑體", sans-serif, arial;
}
.wrapper :is(img) {
  display: block;
  width: 100%;
}
.wrapper :is(a:not(.text-link)) {
  text-decoration: none;
}
.wrapper :is(ul, li) {
  display: inline-block;
}
.wrapper :is(input, select) {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #FFFFFF;
  width: 100%;
  padding: round(down, 0.5em, 2px) round(down, 0.5em, 2px) round(down, 0.5em, 2px) round(down, 4.5em, 2px);
  color: #000000;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: round(down, 0.1em, 1px);
  border: 2px solid transparent;
  border-radius: 12px;
  outline: none;
  transition: 0.2s;
}
.wrapper :is(input, select):focus {
  border-color: #191634;
}
.wrapper :is(input[type=checkbox]) {
  width: 2.25em;
  height: 2.25em;
  padding: 0;
  border-color: #191634;
  border-radius: 4px;
}
.wrapper :is(input[type=checkbox]):checked {
  background-color: #191634;
}
.wrapper :is(input[type=checkbox]):checked::after {
  position: absolute;
  top: calc(50% - round(down, 0.1em, 1px));
  left: 54%;
  content: "✓";
  color: #FFFFFF;
  font-size: 1em;
  font-weight: 500;
  transform: translate(-50%, -50%);
}
.wrapper :is(select) {
  padding: round(down, 0.5em, 2px) 3em round(down, 0.5em, 2px) round(down, 0.5em, 2px);
}
.wrapper ::-moz-placeholder {
  color: #9CA3AF;
  opacity: 1;
}
.wrapper ::placeholder {
  color: #9CA3AF;
  opacity: 1;
}
.wrapper :-ms-input-placeholder {
  color: #9CA3AF;
}
.wrapper ::-ms-input-placeholder {
  color: #9CA3AF;
}
.wrapper .section {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  z-index: 100;
}
.wrapper .section-content {
  display: flex;
  flex-flow: column;
  gap: 3em;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 6em 2em 10em;
}
.wrapper .row {
  display: flex;
  flex-flow: row;
  gap: 2em;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.wrapper .col {
  display: flex;
  flex-flow: column;
  gap: 1em;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.wrapper .content {
  display: flex;
  flex-flow: column;
  gap: 1em;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1440px;
}
.wrapper .text-cont {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
.wrapper .main-title {
  display: flex;
  flex-flow: column;
  gap: round(down, 0.5em, 2px);
  justify-content: center;
  align-items: center;
}
.wrapper .title {
  color: var(--color, #191634);
  font-size: round(down, 2.5em, 2px);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}
.wrapper .title span:not([class^=break-], [class*=" break-"]) {
  display: inline-block;
  font-weight: 700;
}
@media screen and (max-width: 640px) {
  .wrapper .title {
    font-size: round(down, 2.25em, 2px);
  }
}
@media screen and (max-width: 480px) {
  .wrapper .title {
    font-size: 2em;
  }
}
.wrapper .subject {
  color: var(--color, #191634);
  font-size: round(down, 1.5em, 2px);
  font-weight: 500;
  text-align: center;
  line-height: 1.25;
}
.wrapper .subject span:not([class^=break-], [class*=" break-"]) {
  display: inline-block;
  font-weight: 500;
}
@media screen and (max-width: 640px) {
  .wrapper .subject {
    font-size: round(down, 1.25em, 2px);
  }
}
.wrapper .text {
  color: var(--color, #191634);
  font-size: round(down, 1.25em, 2px);
  font-weight: 500;
  line-height: 1.25;
  text-align: justify;
}
.wrapper .text span:not([class^=break-], [class*=" break-"]) {
  display: inline-block;
  font-weight: 500;
}
.wrapper .text-link {
  color: #df2513;
  font-weight: 500;
}
.wrapper .text-link:hover {
  color: #ec503e;
}
.wrapper .ps-note {
  padding: 0 0 0 round(down, 0.75em, 2px);
  color: #191634;
  font-size: 1em;
  line-height: 1.25;
  text-align: justify;
}
.wrapper .ps-note:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "*";
  display: block;
  font-size: round(down, 1.25em, 2px);
  color: inherit;
}
.wrapper [class^=break-], .wrapper [class*=" break-"] {
  display: inline;
}
@media screen and (max-width: 1920px) {
  .wrapper .break-6xl {
    display: block;
  }
}
@media screen and (max-width: 1600px) {
  .wrapper .break-5xl {
    display: block;
  }
}
@media screen and (max-width: 1440px) {
  .wrapper .break-4xl {
    display: block;
  }
}
@media screen and (max-width: 1360px) {
  .wrapper .break-3xl {
    display: block;
  }
}
@media screen and (max-width: 1280px) {
  .wrapper .break-2xl {
    display: block;
  }
}
@media screen and (max-width: 1024px) {
  .wrapper .break-xl {
    display: block;
  }
}
@media screen and (max-width: 960px) {
  .wrapper .break-lg {
    display: block;
  }
}
@media screen and (max-width: 820px) {
  .wrapper .break-md {
    display: block;
  }
}
@media screen and (max-width: 640px) {
  .wrapper .break-sm {
    display: block;
  }
}
@media screen and (max-width: 480px) {
  .wrapper .break-xs {
    display: block;
  }
}
@media screen and (max-width: 360px) {
  .wrapper .break-2xs {
    display: block;
  }
}
@media screen and (max-width: 320px) {
  .wrapper .break-3xs {
    display: block;
  }
}
.wrapper .list-ul {
  display: flex;
  flex-flow: column;
  gap: 0.5em;
  width: 100%;
  padding: 3em;
  background-color: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
}
@media screen and (max-width: 640px) {
  .wrapper .list-ul {
    padding: 1.5em;
  }
}
.wrapper .list-li {
  display: block;
  padding: 0 0 0 round(down, 1.25em, 2px);
  color: #191634;
  font-size: round(down, 1.25em, 2px);
  font-weight: 500;
  text-align: justify;
  word-break: break-all;
  cursor: default;
}
.wrapper .list-li:before {
  position: absolute;
  top: round(down, 0.375em, 2px);
  left: 0;
  display: block;
  content: "•";
  width: round(down, 0.75em, 2px);
  line-height: round(down, 0.75em, 2px);
  height: auto;
  aspect-ratio: 1/1;
  color: inherit;
  font-size: inherit;
  font-weight: 900;
  text-align: center;
}
.wrapper .w-full {
  width: 100%;
}
.wrapper .w-auto {
  width: auto;
}
.wrapper .button-cont {
  display: flex;
  flex-flow: row wrap;
  gap: round(down, 0.5em, 2px);
  justify-content: center;
  align-items: center;
  width: 100%;
}
.wrapper .btn {
  display: flex;
  flex-flow: row wrap;
  gap: round(down, 0.5em, 2px);
  justify-content: center;
  align-items: center;
  background-color: var(--btn-bg-color, #191634);
  min-width: 10em;
  padding: round(down, 0.375em, 2px) round(down, 1.25em, 2px);
  color: var(--btn-color, #FFFFFF);
  font-size: round(down, 1.25em, 2px);
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  border-radius: 12px;
  transition: 0.2s;
}
.wrapper .btn .icon, .wrapper .btn [class^=icon-], .wrapper .btn [class*=" icon-"] {
  width: round(down, 1.25em, 2px);
  height: round(down, 1.25em, 2px);
}
.wrapper .btn:hover {
  background-color: var(--btn-hover-bg-color, #232b65);
}
.wrapper .btn-blue {
  --btn-bg-color: #191634;
  --btn-hover-bg-color: #232b65;
}
.wrapper .btn-yellow {
  --btn-bg-color: #ffd566;
  --btn-hover-bg-color: #ffe6a3;
}
.wrapper .btn-red {
  --btn-bg-color: #df2513;
  --btn-hover-bg-color: #ec503e;
}
.wrapper .btn-white {
  --btn-bg-color: #FFFFFF;
  --btn-hover-bg-color: ;
}
.wrapper .btn-black {
  --btn-bg-color: #000000;
  --btn-hover-bg-color: ;
}
.wrapper .btn-close {
  position: absolute;
  display: block;
  background-color: #FFFFFF;
  width: 3em;
  height: 3em;
  padding: round(down, 0.5em, 2px);
  border: 1px solid #FFFFFF;
  border-radius: 50%;
  cursor: pointer;
}
.wrapper .btn-close:hover {
  background-color: #FFFFFF;
}
.wrapper .btn-close:hover .icon {
  background-color: #191634;
}
.wrapper .icon, .wrapper [class^=icon-], .wrapper [class*=" icon-"] {
  display: inline-block;
  background-color: #FFFFFF;
  background-size: 0 0;
  width: 2em;
  height: 2em;
  aspect-ratio: 1/1;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
}
.wrapper .icon-arrow-left {
  background-image: url(../images/icons/arrow-left.svg);
  mask-image: url(../images/icons/arrow-left.svg);
  -webkit-mask-image: url(../images/icons/arrow-left.svg);
}
.wrapper .icon-arrow-right {
  background-image: url(../images/icons/arrow-right.svg);
  mask-image: url(../images/icons/arrow-right.svg);
  -webkit-mask-image: url(../images/icons/arrow-right.svg);
}
.wrapper .icon-arrow-down {
  background-image: url(../images/icons/arrow-down.svg);
  mask-image: url(../images/icons/arrow-down.svg);
  -webkit-mask-image: url(../images/icons/arrow-down.svg);
}
.wrapper .icon-x-mark {
  background-image: url(../images/icons/x-mark.svg);
  mask-image: url(../images/icons/x-mark.svg);
  -webkit-mask-image: url(../images/icons/x-mark.svg);
}
.wrapper .form-card {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  aspect-ratio: 40/24;
  border-radius: 12px;
  overflow: hidden;
}
.wrapper .form-cont {
  display: flex;
  flex-flow: row wrap;
  gap: round(down, 0.75em, 2px);
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}
.wrapper .form-cont .input-cont.w-50\%, .wrapper .form-cont .select-cont.w-50\% {
  flex: 1 1 calc(50% - round(down, 0.75em, 2px));
}
.wrapper .form-cont .input-cont.w-100\%, .wrapper .form-cont .select-cont.w-100\% {
  flex: 1 1 100%;
}
.wrapper .form-cont .input-cont label {
  position: absolute;
  top: 50%;
  left: 1em;
  color: #191634;
  font-weight: 500;
  transform: translateY(-50%);
}
.wrapper .form-cont .select-cont:before {
  position: absolute;
  top: 50%;
  right: 1em;
  content: "";
  display: block;
  background-color: #191634;
  background-image: url(../images/icons/arrow-down.svg);
  background-size: 0 0;
  width: round(down, 1.5em, 2px);
  height: round(down, 1.5em, 2px);
  aspect-ratio: 1/1;
  mask-image: url(../images/icons/arrow-down.svg);
  -webkit-mask-image: url(../images/icons/arrow-down.svg);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: none;
  cursor: pointer;
}
.wrapper .form-cont :where(#sBut, .btn) {
  width: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 820px) {
  .wrapper .form-cont {
    gap: 1em;
    max-width: 480px;
  }
  .wrapper .form-cont .input-cont.w-50\%, .wrapper .form-cont .select-cont.w-50\% {
    flex: 1 1 100%;
  }
}
.wrapper .statement {
  display: flex;
  flex-flow: row nowrap;
  gap: round(down, 0.5em, 2px);
  justify-content: center;
  align-items: center;
}
.wrapper .statement label {
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper .statement span {
  color: #191634;
  font-weight: 500;
}
.wrapper .statement span a {
  color: #191634;
  font-weight: 500;
  text-decoration: underline;
}
.wrapper .show-box {
  position: fixed;
  top: 250%;
  left: 0;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  background-color: #191634cc;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 1em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition-timing-function: ease;
  transition: top 0s linear 0.2s, opacity 0.2s linear;
  z-index: 500;
}
.wrapper .show-box .box-cont {
  display: flex;
  flex-flow: column;
  gap: round(down, 1.5em, 2px);
  justify-content: center;
  align-items: center;
  max-width: 640px;
  padding: 2em;
  background-color: #FFFFFF;
  border-radius: 12px;
}
.wrapper .show-box .box-cont .cont {
  display: flex;
  flex-flow: row nowrap;
  gap: round(down, 1.5em, 2px);
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 640px) {
  .wrapper .show-box .box-cont {
    background-color: transparent;
    width: 100%;
    height: 100%;
    padding: 8em 1em 2em;
    border-radius: unset;
  }
}
.wrapper .show-box .box-title {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 2em;
}
.wrapper .show-box .btn-close {
  position: absolute;
  top: -1em;
  right: -1em;
  border: 1px solid #FFFFFF;
  z-index: 10;
}
@media screen and (max-width: 640px) {
  .wrapper .show-box .btn-close {
    position: fixed;
    top: 5em;
    right: 1em;
  }
}
.wrapper .show-box.active {
  top: 0;
  opacity: 1;
  transition: top 0s linear 0s;
}
@media screen and (max-width: 640px) {
  .wrapper .show-box {
    padding: 0;
  }
}
.wrapper .bg-blue {
  --bg-color: #191634;
  background-color: var(--bg-color);
}
.wrapper .bg-blue-light {
  --bg-color: #232b65;
  background-color: var(--bg-color);
}
.wrapper .bg-blue-thin {
  --bg-color: ;
  background-color: var(--bg-color);
}
.wrapper .color-blue {
  --color: #191634;
  color: var(--color);
}
.wrapper .bg-yellow {
  --bg-color: #ffd566;
  background-color: var(--bg-color);
}
.wrapper .bg-yellow-light {
  --bg-color: #ffe6a3;
  background-color: var(--bg-color);
}
.wrapper .bg-yellow-thin {
  --bg-color: ;
  background-color: var(--bg-color);
}
.wrapper .color-yellow {
  --color: #ffd566;
  color: var(--color);
}
.wrapper .bg-red {
  --bg-color: #df2513;
  background-color: var(--bg-color);
}
.wrapper .bg-red-light {
  --bg-color: #ec503e;
  background-color: var(--bg-color);
}
.wrapper .bg-red-thin {
  --bg-color: ;
  background-color: var(--bg-color);
}
.wrapper .color-red {
  --color: #df2513;
  color: var(--color);
}
.wrapper .bg-white {
  --bg-color: #FFFFFF;
  background-color: var(--bg-color);
}
.wrapper .bg-white-light {
  --bg-color: ;
  background-color: var(--bg-color);
}
.wrapper .bg-white-thin {
  --bg-color: ;
  background-color: var(--bg-color);
}
.wrapper .color-white {
  --color: #FFFFFF;
  color: var(--color);
}
.wrapper .bg-black {
  --bg-color: #000000;
  background-color: var(--bg-color);
}
.wrapper .bg-black-light {
  --bg-color: ;
  background-color: var(--bg-color);
}
.wrapper .bg-black-thin {
  --bg-color: ;
  background-color: var(--bg-color);
}
.wrapper .color-black {
  --color: #000000;
  color: var(--color);
}
.wrapper .anchor {
  position: absolute;
  top: -2em;
}
.wrapper .bigpic {
  width: 100%;
  height: auto;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 15px auto;
}
.wrapper .bigpic h2 {
  position: absolute;
  font-size: 30px;
  font-weight: 400 !important;
  color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 水平和垂直置中 */
  padding: 20px;
}
@media screen and (max-width: 1023px) {
  .wrapper .bigpic h2 {
    font-size: 25px;
  }
}
.wrapper .bg_video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: auto;
  background: white;
  opacity: 0.7;
}
.wrapper .videobox {
  position: relative;
  max-width: 1563px;
  overflow: hidden;
  margin: auto;
  border-left: #601986 30px solid;
  border-right: #601986 30px solid;
  z-index: 999;
  /*Detail*/
}
@media screen and (max-width: 768px) {
  .wrapper .videobox {
    border-left: #601986 10px solid;
    border-right: #601986 10px solid;
  }
}
@media screen and (max-width: 768px) {
  .wrapper .videobox {
    border-left: #601986 5px solid;
    border-right: #601986 5px solid;
  }
}
.wrapper .videobox video {
  width: 120%;
  top: -110px;
}
@media screen and (max-width: 1200px) {
  .wrapper .videobox video {
    top: -80px;
  }
}
@media screen and (max-width: 768px) {
  .wrapper .videobox video {
    top: -50px;
  }
}
@media screen and (max-width: 375px) {
  .wrapper .videobox video {
    width: 180%;
    top: -50px;
    left: 50px;
  }
}
.wrapper .videobox .pointer {
  cursor: pointer;
}
.wrapper .videobox .banner {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: auto;
  aspect-ratio: 1563/500;
  overflow: hidden;
}
@media screen and (max-width: 1280px) {
  .wrapper .videobox .banner {
    aspect-ratio: 1280/500;
  }
}
@media screen and (max-width: 991px) {
  .wrapper .videobox .banner {
    aspect-ratio: 991/557;
  }
}
@media screen and (max-width: 768px) {
  .wrapper .videobox .banner {
    aspect-ratio: 768/332;
  }
}
@media screen and (max-width: 479px) {
  .wrapper .videobox .banner {
    aspect-ratio: 479/232;
    width: 100%;
  }
}
.wrapper .videobox .banner .name {
  position: absolute;
  top: 180px;
  right: 180px;
  z-index: 22;
}
@media screen and (max-width: 1280px) {
  .wrapper .videobox .banner .name {
    right: 30px;
  }
}
@media screen and (max-width: 768px) {
  .wrapper .videobox .banner .name {
    top: 120px;
    right: 30px;
  }
}
@media screen and (max-width: 430px) {
  .wrapper .videobox .banner .name {
    top: 130px;
    right: -70px;
  }
}
.wrapper .videobox .banner .name img {
  width: 70%;
}
@media screen and (max-width: 768px) {
  .wrapper .videobox .banner .name img {
    width: 50%;
  }
}
.wrapper .videobox .banner .deco-cont {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  opacity: 0.35;
  z-index: 29;
}
.wrapper .videobox .banner .subtext {
  position: absolute;
  top: 30%;
  left: 10%;
  font-size: 48px;
  line-height: 60px;
  font-weight: bold;
  color: white;
  text-align: left;
  z-index: 39;
  /* This WILL work */
}
@media screen and (max-width: 1199px) {
  .wrapper .videobox .banner .subtext {
    font-size: 28px;
    line-height: 40px;
  }
}
@media screen and (max-width: 479px) {
  .wrapper .videobox .banner .subtext {
    top: 20%;
    left: 10%;
    font-size: 24px;
    line-height: 30px;
  }
}
.wrapper .videobox .banner .subtext img {
  position: absolute;
  width: 50px;
  top: 15px;
  right: 15px;
}
@media screen and (max-width: 1199px) {
  .wrapper .videobox .banner .subtext img {
    width: 40px;
  }
}
.wrapper .videobox .banner .subtext svg {
  width: 20px;
}
.wrapper .videobox .banner .subtext svg path {
  fill: white;
}
.wrapper .videobox .banner .experience_button {
  animation-delay: 2s;
}
.wrapper .videobox .banner .experience_button {
  display: inline-block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  height: 60px;
  display: inline-block;
  text-decoration: none;
  font-size: 28px;
  font-weight: 400;
  padding-left: 45px;
  margin: 10px auto;
  background-color: #4922a8;
  line-height: 60px;
  width: 100%;
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  transition: box-shadow 0.8s, color 0.5s;
  border-radius: 35px;
}
@media screen and (max-width: 1199px) {
  .wrapper .videobox .banner .experience_button {
    font-size: 18px;
    padding-left: 15px;
  }
}
@media screen and (max-width: 479px) {
  .wrapper .videobox .banner .experience_button {
    font-size: 16px;
    height: 40px;
    line-height: 40px;
  }
}
@media screen and (max-width: 430px) {
  .wrapper .videobox .banner .experience_button {
    font-size: 16px;
    height: 30px;
    line-height: 30px;
  }
}
.wrapper .videobox .banner .experience_button:hover {
  box-shadow: inset 470px 0px #231152;
}
.wrapper .videobox .banner .experience_button img {
  width: 40px;
}
@media screen and (max-width: 1199px) {
  .wrapper .videobox .banner .experience_button img {
    width: 40px;
    right: -15px;
  }
}
@media screen and (max-width: 430px) {
  .wrapper .videobox .banner .experience_button img {
    width: 30px;
    right: -15px;
  }
}
.wrapper .videobox .bagsDetail {
  position: relative;
}
.wrapper .videobox .list_Detail {
  display: block;
  overflow: hidden;
  width: calc(100% + 25px);
  margin-right: -25px;
  padding: 15px;
}
.wrapper .videobox .Detail_block {
  display: flex !important;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-right: 25px;
}
@media screen and (max-width: 430px) {
  .wrapper .videobox .Detail_block {
    margin-right: 0;
  }
}
.wrapper .videobox .item_list_Detail {
  position: relative;
  top: 0;
  width: calc(20% - 12px);
  transition: 0.2s;
  margin: 0;
  overflow: hidden;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  border-radius: 5px;
  margin-bottom: 15px;
}
@media screen and (max-width: 768px) {
  .wrapper .videobox .item_list_Detail {
    width: calc(50% - 10px);
  }
}
@media screen and (max-width: 430px) {
  .wrapper .videobox .item_list_Detail {
    width: calc(100% - 25px);
  }
}
.wrapper .videobox .item_list_Detail > a {
  height: 100px;
}
.wrapper .videobox .item_list_Detail > a > img {
  width: 100%;
  height: 120px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transition: 0.2s;
}
.wrapper .videobox .name_Detail {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: #000000;
  padding: 5px 15px;
  opacity: 0.7;
}
.wrapper .videobox .name_Detail > img {
  width: 50px;
  margin-bottom: 15px;
}
.wrapper .videobox .text_name_Detail {
  color: #fff;
  font-size: 25px;
  font-weight: 500;
  z-index: 99;
}
@media screen and (max-width: 1023px) {
  .wrapper .videobox .text_name_Detail {
    font-size: 20px;
  }
}
.wrapper .videobox .text_name_lan {
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .wrapper .videobox .text_name_lan {
    font-size: 16px;
  }
}
.wrapper .videobox .item_list_Detail:hover {
  top: -5px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15);
}
.wrapper .videobox .item_list_Detail:hover > a > img {
  width: calc(100% + 30px);
  margin: 0 -15px;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .wrapper .videobox .item_list_Detail:hover > a > img {
    width: 100%;
    margin: 0;
  }
}
@supports (-ms-ime-align: auto) {
  .wrapper .videobox .item_list_Detail:hover > a > img {
    width: 100%;
    margin: 0;
  }
}
.wrapper .videobox .win_black {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  opacity: 0.35;
  z-index: 29;
}
.wrapper .videobox .list_lan {
  padding: 25px;
}
.wrapper .videobox .name_lan {
  z-index: 99;
}
.wrapper .videobox .tablebox {
  position: relative;
  width: 100%;
  margin-bottom: 5px;
}
.wrapper .videobox .tablebox h3 {
  font-size: 25px;
  font-weight: 400;
  color: #478ebf;
  text-align: left;
  margin-bottom: 5px;
}
@media screen and (max-width: 1023px) {
  .wrapper .videobox .tablebox h3 {
    font-size: 21px;
  }
}
.wrapper .videobox .tablebox a {
  position: absolute;
  font-size: 18px;
  font-weight: 400;
  color: #478ebf;
  top: 5px;
  right: 30px;
  cursor: pointer;
}
.wrapper .videobox .tablebox p {
  display: block;
  font-size: 18px;
  font-weight: 400;
  text-align: left;
  color: #313131;
}
@media screen and (max-width: 479px) {
  .wrapper .videobox .tablebox p {
    font-size: 16px;
  }
}
.wrapper .videobox .tablebox1 {
  position: relative;
  width: 100%;
  margin-bottom: 5px;
}
.wrapper .videobox .tablebox1 h3 {
  font-size: 25px;
  font-weight: 400;
  color: #478ebf;
  text-align: left;
}
@media screen and (max-width: 1023px) {
  .wrapper .videobox .tablebox1 h3 {
    font-size: 21px;
  }
}
.wrapper .videobox .tablebox1 a {
  position: absolute;
  font-size: 18px;
  font-weight: 400;
  color: #478ebf;
  top: 5px;
  right: 30px;
  cursor: pointer;
}
.wrapper .videobox .tablebox1 p {
  display: block;
  font-size: 18px;
  font-weight: 400;
  text-align: left;
  color: #313131;
}
@media screen and (max-width: 479px) {
  .wrapper .videobox .tablebox1 p {
    font-size: 16px;
  }
}
.wrapper .videobox .tablebox2 {
  position: relative;
  width: 100%;
  font-weight: 300;
}
.wrapper .videobox .tablebox2 h3 {
  font-size: 25px;
  font-weight: 400;
  color: #478ebf;
  text-align: left;
}
@media screen and (max-width: 1023px) {
  .wrapper .videobox .tablebox2 h3 {
    font-size: 21px;
  }
}
.wrapper .videobox .tablebox2 a {
  position: absolute;
  font-size: 18px;
  font-weight: 400;
  color: #478ebf;
  top: 5px;
  right: 30px;
  cursor: pointer;
}
.wrapper .videobox .tablebox2 p {
  display: block;
  font-size: 18px;
  font-weight: 400;
  text-align: left;
  color: #313131;
}
@media screen and (max-width: 479px) {
  .wrapper .videobox .tablebox2 p {
    font-size: 16px;
  }
}
.wrapper .videobox table tr {
  font-weight: 400;
  vertical-align: middle;
}
.wrapper .videobox table tr th {
  padding: 5px 15px;
  font-size: 21px;
  font-weight: 400;
}
@media screen and (max-width: 1023px) {
  .wrapper .videobox table tr th {
    font-size: 18px;
  }
}
.wrapper .videobox table tr th:nth-child(1) {
  width: 20%;
}
@media screen and (max-width: 1023px) {
  .wrapper .videobox table tr th:nth-child(1) {
    width: 25%;
  }
}
@media screen and (max-width: 479px) {
  .wrapper .videobox table tr th:nth-child(1) {
    width: 30%;
  }
}
.wrapper .videobox table tr th:nth-child(2) {
  width: 20%;
}
@media screen and (max-width: 1023px) {
  .wrapper .videobox table tr th:nth-child(2) {
    width: 25%;
  }
}
@media screen and (max-width: 479px) {
  .wrapper .videobox table tr th:nth-child(2) {
    width: 30%;
  }
}
.wrapper .videobox table tr td {
  padding: 15px;
  background: #fff;
  font-size: 18px;
  line-height: 21px;
  font-weight: 300;
}
@media screen and (max-width: 1023px) {
  .wrapper .videobox table tr td {
    font-size: 16px;
  }
}
@media screen and (max-width: 479px) {
  .wrapper .videobox table tr td {
    padding: 5px;
  }
}
.wrapper .videobox .form {
  position: relative;
  background-color: #f1d1b7;
}
.wrapper .videobox .form .tit-form {
  width: 90%;
  max-width: 350px;
}
.wrapper .videobox .form .subtitle {
  color: #313131;
}
.wrapper .videobox .form .button {
  background-color: #ffd566;
  color: #191634;
  border-radius: 50px;
}
.wrapper .videobox .form .decorations {
  position: absolute;
  width: 8%;
}
.wrapper .videobox .form .decorations-01 {
  transform: rotate(130deg);
  top: 20%;
  right: -3%;
}
.wrapper .videobox .form .decorations-02 {
  transform: rotate(130deg);
  bottom: 20%;
  left: -3%;
}
.wrapper .videobox .form .decorations-03 {
  transform: rotate(130deg);
  top: -5%;
  left: 0;
  width: 10%;
}
.wrapper .videobox .form :is(input[type=checkbox]):checked::after {
  color: #ffd566;
}
.wrapper .videobox .courses {
  background-color: #191634;
}
.wrapper .videobox .courses .title {
  width: 90%;
  max-width: 300px;
}
.wrapper .videobox .courses .subtitle {
  color: #ffd566;
}
.wrapper .videobox .courses .course {
  background-color: white;
  border: 0px;
  border-radius: 20px;
  overflow: hidden;
  border-radius: 20px;
}
.wrapper .videobox .courses .course:hover {
  transition: 0.2s;
  transform: translateY(-5px);
}
.wrapper .videobox .courses .course ul {
  padding: 0;
  font-size: 1.1rem;
}
.wrapper .videobox .courses .course li {
  display: list-item;
}
.wrapper .videobox .courses .list-en .course-header {
  background-color: #ff6f8b;
}
.wrapper .videobox .courses .list-en .fs-4.fw-bold {
  color: #ff6f8b;
}
.wrapper .videobox .courses .list-en .bt span {
  border-radius: 20px;
  background-color: #ff6f8b;
  color: white;
}
.wrapper .videobox .courses .list-en .bt span:hover {
  border: 2px solid #ff6f8b;
  color: #ff6f8b;
  background-color: white;
}
.wrapper .videobox .courses .list-en .list-item .icon-cont {
  background-color: #ff6f8b;
}
.wrapper .videobox .courses .list-en .list-item .list-title {
  color: #ff6f8b;
}
.wrapper .videobox .courses .list-en .list-item .btn {
  background-color: #ff6f8b;
  border-color: #ff6f8b;
}
.wrapper .videobox .courses .list-jp .course-header {
  background-color: #73d372;
}
.wrapper .videobox .courses .list-jp .fs-4.fw-bold {
  color: #73d372;
}
.wrapper .videobox .courses .list-jp .bt span {
  border-radius: 20px;
  background-color: #73d372;
  color: white;
}
.wrapper .videobox .courses .list-jp .bt span:hover {
  border: 2px solid #73d372;
  color: #73d372;
  background-color: white;
}
.wrapper .videobox .courses .list-jp .list-item .icon-cont {
  background-color: #73d372;
}
.wrapper .videobox .courses .list-jp .list-item .list-title {
  color: #73d372;
}
.wrapper .videobox .courses .list-jp .list-item .btn {
  background-color: #73d372;
  border-color: #73d372;
}
.wrapper .videobox .courses .list-kr .course-header {
  background-color: #ffad2f;
}
.wrapper .videobox .courses .list-kr .fs-4.fw-bold {
  color: #ffad2f;
}
.wrapper .videobox .courses .list-kr .bt span {
  border-radius: 20px;
  background-color: #ffad2f;
  color: white;
}
.wrapper .videobox .courses .list-kr .bt span:hover {
  border: 2px solid #ffad2f;
  color: #ffad2f;
  background-color: white;
}
.wrapper .videobox .courses .list-kr .list-item .icon-cont {
  background-color: #ffad2f;
}
.wrapper .videobox .courses .list-kr .list-item .list-title {
  color: #ffad2f;
}
.wrapper .videobox .courses .list-kr .list-item .btn {
  background-color: #ffad2f;
  border-color: #ffad2f;
}
.wrapper .videobox .courses .list-sp .course-header {
  background-color: #ff6f8b;
}
.wrapper .videobox .courses .list-sp .fs-4.fw-bold {
  color: #ff6f8b;
}
.wrapper .videobox .courses .list-sp .bt span {
  border-radius: 20px;
  background-color: #ff6f8b;
  color: white;
}
.wrapper .videobox .courses .list-sp .bt span:hover {
  border: 2px solid #ff6f8b;
  color: #ff6f8b;
  background-color: white;
}
.wrapper .videobox .courses .list-sp .list-item .icon-cont {
  background-color: #ff6f8b;
}
.wrapper .videobox .courses .list-sp .list-item .list-title {
  color: #ff6f8b;
}
.wrapper .videobox .courses .list-sp .list-item .btn {
  background-color: #ff6f8b;
  border-color: #ff6f8b;
}
.wrapper .videobox .courses .list-fr .course-header {
  background-color: #73d372;
}
.wrapper .videobox .courses .list-fr .fs-4.fw-bold {
  color: #73d372;
}
.wrapper .videobox .courses .list-fr .bt span {
  border-radius: 20px;
  background-color: #73d372;
  color: white;
}
.wrapper .videobox .courses .list-fr .bt span:hover {
  border: 2px solid #73d372;
  color: #73d372;
  background-color: white;
}
.wrapper .videobox .courses .list-fr .list-item .icon-cont {
  background-color: #73d372;
}
.wrapper .videobox .courses .list-fr .list-item .list-title {
  color: #73d372;
}
.wrapper .videobox .courses .list-fr .list-item .btn {
  background-color: #73d372;
  border-color: #73d372;
}
.wrapper .videobox .courses .list-gm .course-header {
  background-color: #ffad2f;
}
.wrapper .videobox .courses .list-gm .fs-4.fw-bold {
  color: #ffad2f;
}
.wrapper .videobox .courses .list-gm .bt span {
  border-radius: 20px;
  background-color: #ffad2f;
  color: white;
}
.wrapper .videobox .courses .list-gm .bt span:hover {
  border: 2px solid #ffad2f;
  color: #ffad2f;
  background-color: white;
}
.wrapper .videobox .courses .list-gm .list-item .icon-cont {
  background-color: #ffad2f;
}
.wrapper .videobox .courses .list-gm .list-item .list-title {
  color: #ffad2f;
}
.wrapper .videobox .courses .list-gm .list-item .btn {
  background-color: #ffad2f;
  border-color: #ffad2f;
}
.wrapper .videobox .courses .list-jr-en .course-header {
  background-color: #ff6f8b;
}
.wrapper .videobox .courses .list-jr-en .fs-4.fw-bold {
  color: #ff6f8b;
}
.wrapper .videobox .courses .list-jr-en .bt span {
  border-radius: 20px;
  background-color: #ff6f8b;
  color: white;
}
.wrapper .videobox .courses .list-jr-en .bt span:hover {
  border: 2px solid #ff6f8b;
  color: #ff6f8b;
  background-color: white;
}
.wrapper .videobox .courses .list-jr-en .list-item .icon-cont {
  background-color: #ff6f8b;
}
.wrapper .videobox .courses .list-jr-en .list-item .list-title {
  color: #ff6f8b;
}
.wrapper .videobox .courses .list-jr-en .list-item .btn {
  background-color: #ff6f8b;
  border-color: #ff6f8b;
}
.wrapper .videobox .courses .list-jr-jp .course-header {
  background-color: #73d372;
}
.wrapper .videobox .courses .list-jr-jp .fs-4.fw-bold {
  color: #73d372;
}
.wrapper .videobox .courses .list-jr-jp .bt span {
  border-radius: 20px;
  background-color: #73d372;
  color: white;
}
.wrapper .videobox .courses .list-jr-jp .bt span:hover {
  border: 2px solid #73d372;
  color: #73d372;
  background-color: white;
}
.wrapper .videobox .courses .list-jr-jp .list-item .icon-cont {
  background-color: #73d372;
}
.wrapper .videobox .courses .list-jr-jp .list-item .list-title {
  color: #73d372;
}
.wrapper .videobox .courses .list-jr-jp .list-item .btn {
  background-color: #73d372;
  border-color: #73d372;
}
.wrapper .videobox .courses .list-coding .course-header {
  background-color: #ffad2f;
}
.wrapper .videobox .courses .list-coding .fs-4.fw-bold {
  color: #ffad2f;
}
.wrapper .videobox .courses .list-coding .bt span {
  border-radius: 20px;
  background-color: #ffad2f;
  color: white;
}
.wrapper .videobox .courses .list-coding .bt span:hover {
  border: 2px solid #ffad2f;
  color: #ffad2f;
  background-color: white;
}
.wrapper .videobox .courses .list-coding .list-item .icon-cont {
  background-color: #ffad2f;
}
.wrapper .videobox .courses .list-coding .list-item .list-title {
  color: #ffad2f;
}
.wrapper .videobox .courses .list-coding .list-item .btn {
  background-color: #ffad2f;
  border-color: #ffad2f;
}
.wrapper .videobox .courses .list-jr-hs .course-header {
  background-color: #ff6f8b;
}
.wrapper .videobox .courses .list-jr-hs .fs-4.fw-bold {
  color: #ff6f8b;
}
.wrapper .videobox .courses .list-jr-hs .bt span {
  border-radius: 20px;
  background-color: #ff6f8b;
  color: white;
}
.wrapper .videobox .courses .list-jr-hs .bt span:hover {
  border: 2px solid #ff6f8b;
  color: #ff6f8b;
  background-color: white;
}
.wrapper .videobox .courses .list-jr-hs .list-item .icon-cont {
  background-color: #ff6f8b;
}
.wrapper .videobox .courses .list-jr-hs .list-item .list-title {
  color: #ff6f8b;
}
.wrapper .videobox .courses .list-jr-hs .list-item .btn {
  background-color: #ff6f8b;
  border-color: #ff6f8b;
}
.wrapper .videobox .courses .decorations {
  position: absolute;
  width: 8%;
}
.wrapper .videobox .courses .decorations-01 {
  top: -1.5%;
  right: 1%;
}
.wrapper .videobox .courses .decorations-02 {
  width: 5%;
  top: 10%;
  left: 1%;
}
.wrapper .videobox .courses .decorations-03 {
  transform: rotate(-40deg);
  top: 22%;
  right: -2%;
}
.wrapper .videobox .courses .decorations-04 {
  transform: rotate(130deg);
  top: 35%;
  left: -3%;
}
.wrapper .videobox .courses .decorations-05 {
  transform: rotate(130deg);
  top: 43%;
  right: -1%;
}
.wrapper .videobox .courses .decorations-06 {
  transform: rotate(0deg);
  top: 55%;
  left: -3%;
}
.wrapper .videobox .courses .decorations-07 {
  transform: rotate(-10deg);
  top: 66%;
  right: -1.5%;
}
.wrapper .videobox .courses .decorations-08 {
  transform: rotate(0deg);
  top: 75%;
  left: -3%;
}
.wrapper .videobox .courses .decorations-09 {
  transform: rotate(-10deg);
  top: 92%;
  right: -1.5%;
}
@keyframes up-float {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(var(--up-float, 24px));
  }
}
@keyframes zoomInOut {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.wrapper .freebuttom {
  display: block;
  overflow: hidden;
  width: 250px;
  height: 50px;
  text-align: center;
  padding: 10px 15px;
  margin: 15px auto;
  background: #478ebf;
  border-radius: 35px;
  cursor: pointer;
}
.wrapper .freebuttom p {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: #fff;
}
@media screen and (max-width: 1023px) {
  .wrapper .freebuttom p {
    font-size: 18px;
  }
}
.wrapper .faqbox {
  width: 100%;
  position: relative;
  color: #000;
}
.wrapper .faqbox h2 {
  font-size: 30px;
  font-style: italic;
  font-weight: 400 !important;
  width: -moz-max-content;
  width: max-content;
  text-align: center;
  padding: 15px;
  margin-bottom: 30px !important;
  color: #000000;
  text-shadow: 0.1em 0.1em 0.05em #fff !important;
  background: linear-gradient(to bottom, transparent 50%, #f1d1b7 50%) !important;
  margin: 0 auto !important;
  z-index: 199;
}
.wrapper .faqbox h2 span {
  color: red;
  font-weight: 700;
}
@media screen and (max-width: 1023px) {
  .wrapper .faqbox h2 {
    font-size: 25px;
  }
}
.wrapper .videobox-box-bg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: auto;
  background-color: #f2f2f2;
  opacity: 0.8;
  padding: 30px;
}
.wrapper .videobox-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 1563px;
  overflow: hidden;
  margin: auto;
  border-left: #601986 30px solid;
  border-right: #601986 30px solid;
}
@media screen and (max-width: 768px) {
  .wrapper .videobox-box {
    border-left: #601986 5px solid;
    border-right: #601986 5px solid;
  }
}
.wrapper .nub {
  position: relative;
  display: block;
  font-size: 21px;
  text-align: justify;
  padding: 15px 30px;
  margin: 30px auto;
  max-width: 1480px;
  font-weight: 400;
}
@media screen and (max-width: 479px) {
  .wrapper .nub {
    font-size: 18px;
  }
}
.wrapper .nub p {
  font-size: 18px;
  text-align: justify;
  padding: 0px 15px 10px 40px;
  font-weight: 300;
}
@media screen and (max-width: 479px) {
  .wrapper .nub p {
    font-size: 16px;
  }
}
.wrapper .nub span {
  color: #fa3719;
  background-color: #f1d1b7;
  margin-right: 10px;
  padding: 0px 9px;
  border-radius: 50%;
  font-weight: 400;
}
.wrapper .bg_fri {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  background: white;
  opacity: 0.7;
}
.wrapper .bg_fri_h2 {
  padding: 50px 15px;
}
.wrapper .bg_fri_h2 h2 {
  font-size: 30px;
  font-style: italic;
  font-weight: 400 !important;
  width: -moz-max-content;
  width: max-content;
  text-align: center;
  padding: 15px;
  color: #000000;
  text-shadow: 0.1em 0.1em 0.05em #fff !important;
  background: linear-gradient(to bottom, transparent 50%, #f1d1b7 50%) !important;
  margin: 50px auto;
  z-index: 199;
}
.wrapper .bg_fri_h2 h2 span {
  color: red;
  font-weight: 700;
}
@media screen and (max-width: 1023px) {
  .wrapper .bg_fri_h2 h2 {
    font-size: 25px;
  }
}
.wrapper .promotions {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 50px 30px;
}
.wrapper .promotions .promotions_box {
  display: flex !important;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.wrapper .promotions .promotions_box .promotions_list {
  position: relative;
  top: 0;
  width: calc(33.3333333333% - 41.6666666667px);
  overflow: hidden;
  transition: 0.2s;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
@media screen and (max-width: 768px) {
  .wrapper .promotions .promotions_box .promotions_list {
    width: calc(50% - 12.5px);
  }
}
@media screen and (max-width: 479px) {
  .wrapper .promotions .promotions_box .promotions_list {
    width: calc(100% - 25px);
  }
}
.wrapper .promotions .promotions_box .promotions_list .promotions_list_item {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #f2f2f2;
  padding: 10px 15px 50px 15px;
  margin-bottom: 15px;
}
.wrapper .promotions .promotions_box .promotions_list h2 {
  font-size: 25px;
  font-style: normal;
  font-weight: 400 !important;
  width: -moz-max-content;
  width: max-content;
  text-align: center;
  padding: 15px;
  color: #fa3719;
  text-shadow: none !important;
  background: none !important;
  margin: 0 auto;
  z-index: 209;
}
@media screen and (max-width: 1023px) {
  .wrapper .promotions .promotions_box .promotions_list h2 {
    font-size: 25px;
  }
}
.wrapper .promotions .promotions_box .promotions_list p {
  height: 110px;
  font-size: 18px;
  line-height: 28px;
  overflow: hidden;
  text-align: justify;
  color: #313131;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wrapper .promotions .promotions_box .promotions_list span {
  float: right;
  font-size: 18px;
  cursor: pointer;
  padding-bottom: 15px;
  color: #000;
}
.wrapper .promotions .promotions_box .promotions_list span:hover {
  color: #fa3719;
  font-weight: bold;
}
.wrapper .block_area {
  width: 100%;
  padding-left: 15px;
}
.wrapper .block_area .blo_block {
  display: flex !important;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .wrapper .block_area .blo_block {
    justify-content: space-between;
  }
}
.wrapper .block_area .blo_block .blo_item_list {
  display: block;
  overflow: hidden;
  width: 12%;
  margin-right: 15px;
  cursor: pointer;
  border-radius: 5px;
  margin-bottom: 10px;
}
@media screen and (max-width: 1400px) {
  .wrapper .block_area .blo_block .blo_item_list {
    width: 11%;
  }
}
@media screen and (max-width: 991px) {
  .wrapper .block_area .blo_block .blo_item_list {
    width: 12%;
  }
}
@media screen and (max-width: 768px) {
  .wrapper .block_area .blo_block .blo_item_list {
    width: 28%;
  }
}
@media screen and (max-width: 320px) {
  .wrapper .block_area .blo_block .blo_item_list {
    width: 44%;
  }
}
.wrapper .blo_item_list:hover {
  top: -5px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15);
}
.wrapper .form {
  padding: 50px 15px;
}
.wrapper .form h2 {
  font-size: 30px;
  font-style: italic;
  font-weight: 400 !important;
  width: -moz-max-content;
  width: max-content;
  text-align: center;
  padding: 15px;
  margin-bottom: 30px !important;
  color: #000000;
  text-shadow: 0.1em 0.1em 0.05em #fff !important;
  background: linear-gradient(to bottom, transparent 50%, #f1d1b7 50%) !important;
  margin: 0 auto !important;
  z-index: 199;
}
.wrapper .form h2 span {
  color: red;
  font-weight: 700;
}
@media screen and (max-width: 1023px) {
  .wrapper .form h2 {
    font-size: 25px;
  }
}
.wrapper .butgo {
  max-width: 100%;
  background-color: #601986;
  border-radius: 35px;
  cursor: pointer;
  font-weight: 400;
  color: #fff;
}
.wrapper .butgo:hover {
  background-color: #220f5e;
}
.wrapper .concept {
  padding: 0 30px;
}
.wrapper .concept h3 {
  width: -moz-max-content;
  width: max-content;
  font-size: 18px;
  color: #fff;
  background-color: #3e3a39;
  text-align: center;
  padding: 5px 15px;
  border-radius: 5px;
  margin-bottom: 5px;
}
.wrapper .concept p {
  font-size: 18px;
  line-height: 21px;
  color: #000000;
  text-align: left;
  margin-bottom: 15px;
}
.wrapper .concepttitle h2 {
  font-size: 30px;
  font-style: italic;
  font-weight: 400 !important;
  width: -moz-max-content;
  width: max-content;
  text-align: center;
  padding: 15px;
  margin-bottom: 15px;
  color: #000;
  text-shadow: 0.1em 0.1em 0.05em #fff !important;
  background: linear-gradient(to bottom, transparent 50%, #f1d1b7 50%) !important;
  margin: 0 auto !important;
}
.wrapper .concepttitle h2 span {
  color: red;
  font-weight: 400 !important;
}
@media screen and (max-width: 1023px) {
  .wrapper .concepttitle h2 {
    font-size: 25px;
  }
}
.wrapper .concepttitle :is(ul, li) {
  display: block;
}
.wrapper .concepttitle ul {
  list-style-type: disc !important;
}
.wrapper .concepttitle ul li {
  font-size: 18px;
  line-height: 24px;
  display: list-item;
  margin-top: 15px;
  margin-bottom: 5px;
  color: #000;
}

html {
  box-sizing: border-box;
  overflow-x: hidden;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  color: #fff;
  background: #232323;
  background: linear-gradient(45deg, #042461 0%, rgba(225, 5, 34, 0) 70%), linear-gradient(135deg, #340447 10%, rgba(49, 5, 209, 0) 80%), linear-gradient(225deg, #0f053a 10%, rgba(10, 219, 216, 0) 80%), linear-gradient(315deg, #050813 100%, rgba(9, 245, 5, 0) 70%);
  font-family: "Avenir Next", "Avenir", sans-serif;
}

.main {
  position: relative;
  padding: 60px 30px;
  width: 100%;
}
.main h1 {
  color: #fff;
  text-align: center;
}
.main .content {
  margin: 0 auto;
  width: 100%;
  max-width: 768px;
}
.main .content p {
  line-height: 1.8;
  text-align: center;
}

header {
  display: flex;
  justify-content: space-between;
  flex-flow: row;
  align-items: center;
}

footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 30px;
  color: #fff;
}
footer .copyright {
  text-align: center;
}
footer a {
  color: #1bb76e;
  text-decoration: none;
  transition: 0.25s;
}
footer a:hover {
  color: #ff5500;
}

.menuToggle {
  display: block;
  position: relative;
  top: 50px;
  z-index: 99999;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}
.menuToggle a {
  text-decoration: none;
  color: #000;
  transition: all 0.3s ease;
}
.menuToggle a:hover {
  color: #fff;
}
.menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}
.menuToggle span {
  position: relative;
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #111;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}
.menuToggle span:first-child {
  transform-origin: 0% 0%;
}
.menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

.menuToggle input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #000;
}
.menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
.menuToggle input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}
.menuToggle input:checked ~ .menuItem {
  transform: none;
}

.menuItem {
  position: absolute;
  width: 180px;
  padding: 20px;
  padding-top: 125px;
  background: transparent;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
.menuItem li {
  padding: 2px 15px;
  font-size: 22px;
  background-color: #fff;
  border: 1px #000 solid;
  border-radius: 5px;
  margin-bottom: 5px;
}
.menuItem li:hover, .menuItem li:focus {
  color: #fff;
  background-color: #4922a8;
  border: 0px #000 solid;
}

.menu--bottom--right .menuToggle {
  position: fixed;
  top: 600px;
  right: 0;
  z-index: 99999;
}
.menu--bottom--right .menuToggle input {
  right: 50px;
  bottom: 50px;
  top: auto;
}
.menu--bottom--right .menuToggle input:checked ~ .menuItem {
  transform: scale(1);
  transition: transform 0.3s, visibility 0s 0s;
}
.menu--bottom--right .menuToggle input:checked ~ .menuItem li:nth-child(1) {
  animation: text-slide-in 0.2s;
}
.menu--bottom--right .menuToggle input:checked ~ .menuItem li:nth-child(2) {
  animation: text-slide-in 0.3s;
}
.menu--bottom--right .menuToggle input:checked ~ .menuItem li:nth-child(3) {
  animation: text-slide-in 0.4s;
}
.menu--bottom--right .menuToggle input:checked ~ .menuItem li:nth-child(4) {
  animation: text-slide-in 0.5s;
}
.menu--bottom--right .menuToggle input:checked ~ .menuItem li:nth-child(5) {
  animation: text-slide-in 0.6s;
}
.menu--bottom--right .menuToggle span {
  right: 50px;
  bottom: 50px;
  top: auto;
}
.menu--bottom--right .menuItem {
  bottom: 0;
  right: 0;
  margin: 0;
  padding-top: 50px;
  padding-bottom: 125px;
  transform-origin: bottom right;
  transform: scale(0);
  transition: transform 0.3s, visibility 0s 0s;
}
.menu--bottom--right .menuItem li {
  backface-visibility: hidden;
}
.menu--bottom--right .menuItem li a:hover {
  padding-left: 5px;
}

@keyframes text-slide-in {
  0% {
    transform: translateX(100px);
  }
  100% {
    transform: translateY(0);
  }
}
.textcolor a {
  color: blue;
}
.textcolor a:hover {
  color: white;
}/*# sourceMappingURL=style.css.map */