@charset "UTF-8";
/* ############################################ reset.css ############################################ */
/* 모든 요소의 박스 크기 계산 방식 초기화 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 모든 요소의 기본 마진 제거 */
* {
  margin: 0;
  padding: 0;
}

/* html에 부드러운 스크롤 설정 및 줄간격 초기화 */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%; /* iOS 가독성 보정 */
  box-sizing: border-box;
}

/* 기본 폰트와 배경 설정 */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  font-family: "Outfit", sans-serif;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

/* 기본 링크 스타일 초기화 */
a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* 클래스 없는 a에 대한 기본 링크 스타일 유지 */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* 이미지, 비디오 등 미디어 요소 */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  vertical-align: middle;
}

/* 폼 요소 초기화 */
input,
button,
textarea,
select {
  display: block;
  font: inherit;
  color: inherit;
}

select {
  -webkit-appearance: none; /* for chrome */
  -moz-appearance: none; /*for firefox*/
  appearance: none;
  cursor: pointer;
}

button,
input[type=button],
input[type=submit],
input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
}

textarea {
  resize: none; /* 또는 vertical */
}

fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

/* 버튼 기본 스타일 초기화 */
button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* 리스트 스타일 제거 */
ul,
ol {
  list-style: none;
}

/* 테이블 초기화 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 접근성 대응 */
a:focus,
button:focus {
  outline: none;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid #007BFF; /* 또는 적절한 색상 */
  outline-offset: 2px;
}

/* 사용자 선호 모션 설정 반영 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ############################################ reset.css ############################################ */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes rotate-s {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(3deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes big-rotate {
  0% {
    transform: scale(1.2) rotate(0deg);
  }
  25% {
    transform: scale(1.2) rotate(5deg);
  }
  50% {
    transform: scale(1.2) rotate(0deg);
  }
  75% {
    transform: scale(1.2) rotate(-5deg);
  }
  100% {
    transform: scale(1.2) rotate(0deg);
  }
}
@keyframes up-down {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(3px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes big-up-down {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(7px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-7px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes scale {
  from {
    transform: scale(1.25);
  }
  to {
    transform: scale(1.3);
  }
}
@keyframes scale-mo-portrait {
  from {
    transform: scale(1.2);
  }
  to {
    transform: scale(1.25);
  }
}
@keyframes wrong-rotate {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes pulseReplay {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-out-up {
  from {
    opacity: 1;
    transform: translateY(-50%);
  }
  to {
    opacity: 0;
    transform: translateY(-250%);
  }
}
@keyframes fade-in-right-tx {
  from {
    transform: translate(var(--tx-from), var(--ty-from));
    opacity: 0;
  }
  to {
    transform: translate(var(--tx-to), var(--ty-to));
    opacity: 1;
  }
}
@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/OutfitThin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/OutfitExtraLight-e6394e766dedb8892c0442aa785d9bb6.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/OutfitLight1-5212f8c952ee6530a975a483c36fbbb1.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/OutfitRegular-c7389d0ef8b7f5765abe3a7f25fc57da.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/OutfitMedium-80b46fc82c40b566669990530e409edd.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/OutfitSemiBold-8b8b084c0eba6042967f39f5db26ce92.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/OutfitBold-63ddb74d2046f1e95838a707f79e292d.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/OutfitExtraBold-0eae7fd91abe81e8b5d7be4ccfbb495b.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/OutfitBlack-1c2412fe9d2a23ab57d3143e40c0d0e7.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("/assets/fonts/Pretendard-Thin-120b8200ef02c54246f59471bf4dfcdd.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("/assets/fonts/Pretendard-Light-6e125543eff1bb5e7dde302f1f50a7b0.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("/assets/fonts/Pretendard-Regular-76a1283c27610a9ad7d6940b9b174e46.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("/assets/fonts/Pretendard-Medium-65d0a735617322a4fe0bcc5350642159.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("/assets/fonts/Pretendard-SemiBold-d3b288a528801dae385d6f104693e022.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("/assets/fonts/Pretendard-Bold-33860c9446a2671456e4619020774137.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("/assets/fonts/Pretendard-ExtraBold-4e75935a8e92c6b078d8e1bafd81cb42.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100;
  src: url("/assets/fonts/montserrat-v29-latin-100-1f5312b0abaee85a58f636f5d7345bda.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 100;
  src: url("/assets/fonts/montserrat-v29-latin-100italic-861dfb5d68d9da38e7529757d9485b97.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 200;
  src: url("/assets/fonts/montserrat-v29-latin-200-0941a59d32b55d5ed3e0d456f0f7b7b2.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 200;
  src: url("/assets/fonts/montserrat-v29-latin-200italic-67ce0a9189c8a05943fc0c6270e64272.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300;
  src: url("/assets/fonts/montserrat-v29-latin-300-e7befc1c25aac4d4ea43b20f84ef3fe4.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 300;
  src: url("/assets/fonts/montserrat-v29-latin-300italic-b860e9f2365b72c8f424c3296231992d.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/fonts/montserrat-v29-latin-regular-74795056a2358804684c7e9d0479f484.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 400;
  src: url("/assets/fonts/montserrat-v29-latin-italic-5ffaea2c4b6a230469b362dda9796e3a.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  src: url("/assets/fonts/montserrat-v29-latin-500-3fbaa6504d46b66c2a2313375c417538.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 500;
  src: url("/assets/fonts/montserrat-v29-latin-500italic-cbc74d600d15c2aefa931f1ef1eb7f78.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  src: url("/assets/fonts/montserrat-v29-latin-600-5c43ef701a5404b9ac81708cd6f6e979.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 600;
  src: url("/assets/fonts/montserrat-v29-latin-600italic-1fa0c4010bb44d94fbbebc3d00a6a057.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  src: url("/assets/fonts/montserrat-v29-latin-700-0c556945fe4b5494525a777fb7f0f07a.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 700;
  src: url("/assets/fonts/montserrat-v29-latin-700italic-c075ba910c4228125c65d2d4daef2c2b.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  src: url("/assets/fonts/montserrat-v29-latin-800-cd58063efe8b14a01f207598e47eda6b.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 800;
  src: url("/assets/fonts/montserrat-v29-latin-800italic-1b3035248a06a6e5aabaf60cf540bd01.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 900;
  src: url("/assets/fonts/montserrat-v29-latin-900-cf103e811944ed4dc16c5ca0f3a74c7e.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 900;
  src: url("/assets/fonts/montserrat-v29-latin-900italic-fbcf3dc38054c1d7e01dab5b9a104025.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Readex Pro";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/fonts/readex-pro-v26-latin-regular-4cdab1421497421e045cf28d2757eddd.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
body {
  font-family: "Outfit", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.2;
  color: #000;
}

h1 {
  font-size: 14rem;
  font-weight: 500;
  line-height: normal;
}

h2 {
  font-size: 5.5rem;
  font-weight: 600;
  line-height: normal;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  h2 {
    font-size: 26px;
  }
}

h3 {
  font-size: 4rem;
  font-weight: 600;
  line-height: 1.2;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  h3 {
    font-size: 26px;
  }
}

h4 {
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1.2;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  h4 {
    font-size: 18px;
  }
}

h5 {
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1.2;
}

.body-txt-0 {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
}

.tit {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: normal;
}

.body-txt-2 {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: normal;
}

.body-txt-3 {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: normal;
}

.cap {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: normal;
}

.tit {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: normal;
}

.tit-1 {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: normal;
  font-family: "Montserrat", sans-serif;
}

.text-muted {
  color: #999 !important;
}

.text-error {
  color: #e53935 !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.text-bold {
  font-weight: 700 !important;
}

.text-light {
  font-weight: 300 !important;
}

.text-sm {
  font-size: 0.875rem !important;
}

.text-lg {
  font-size: 1.25rem !important;
}

.header {
  width: 100%;
  height: 70px;
  padding: 0 32px;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 9999;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .header {
    padding: 0 20px;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .header {
    padding: 0 15px;
    height: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .header {
    height: 50px;
    padding: 0 15px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .header {
    height: 0 !important;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .header {
    position: fixed;
    top: 0;
    left: 0;
    background: transparent;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .header {
    position: fixed;
    top: 0;
    left: 0;
    background: transparent;
  }
}
.header__inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  align-items: start;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .header__inner {
    align-items: center;
  }
}
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px), (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) {
  .is-app .header__inner {
    align-items: center;
  }
}
.header__logo {
  max-width: 26.2rem;
  font-size: 0;
  padding-top: 14px;
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .header__logo {
    padding-top: 0;
  }
}
.header__logo.mo {
  position: absolute;
  top: 4px;
  left: 15px;
  z-index: 1;
  display: none;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .header__logo.mo {
    display: block;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .header__logo {
    display: none;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .header__logo {
    display: none;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .header__logo {
    max-width: 160px;
    padding-top: 10px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .header__logo {
    max-width: 124px;
    padding-top: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .header__logo {
    max-width: 145px;
  }
}
.header__logo img {
  width: 100%;
}
.header__gnb {
  height: 70px;
  z-index: 1;
}
.header__gnb::after {
  content: "";
  width: 100%;
  height: 50px;
  background: #fff;
  position: absolute;
  top: 0;
  right: 0;
  display: none;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .is-app .header__gnb::after {
    height: 60px;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .header__gnb::after {
    padding-top: 72px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .header__gnb::after {
    display: block;
    height: 50px !important;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .header__gnb {
    position: absolute;
    right: -110%;
    top: 0;
    height: 100vh;
    background: #E8F8FF;
    padding-top: 48px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
  }
}
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px), (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) {
  .is-app .header__gnb {
    position: absolute;
    right: -110%;
    top: 0;
    height: 100vh;
    background: #E8F8FF;
    padding-top: 48px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .header__gnb {
    padding-top: 60px;
  }
}
.header__gnb.active {
  right: 0;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .is-app .header__gnb.active {
    width: 40vw;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .header__gnb.active {
    width: 30vw;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .header__gnb.active {
    width: 100vw !important;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .header__gnb.active {
    width: 60vw !important;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .is-app .header__gnb.active {
    width: 35vw !important;
  }
}
.header__gnb-list {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .header__gnb-list {
    gap: 3rem;
    padding-top: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .header__gnb-list {
    display: block;
    margin-bottom: 35px;
    padding: 0;
  }
}
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px), (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) {
  .is-app .header__gnb-list {
    display: block;
    margin-bottom: 35px;
    padding: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .header__gnb-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    gap: 1rem;
    height: max-content;
    padding-top: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .is-app .header__gnb-list {
    display: flex;
    flex-direction: column;
  }
}
.header__gnb-item {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .header__gnb-item {
    height: fit-content;
  }
}
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px), (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) {
  .is-app .header__gnb-item {
    height: fit-content;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .header__gnb-item:nth-child(4) {
    order: 6;
  }
  .header__gnb-item:nth-child(5) {
    order: 5;
  }
  .header__gnb-item:nth-child(6) {
    order: 4;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .is-app .header__gnb-item:nth-child(4) {
    order: 4;
  }
  .is-app .header__gnb-item:nth-child(5) {
    order: 5;
  }
  .is-app .header__gnb-item:nth-child(6) {
    order: 6;
  }
}
.header__gnb-link {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #404cb5;
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .header__gnb-link {
    font-size: 26px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .header__gnb-link {
    font-size: 15.5px;
    padding-top: 2px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .header__gnb-link {
    justify-content: left;
    padding: 17px 0 17px 30px;
  }
}
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px), (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) {
  .is-app .header__gnb-link {
    justify-content: left;
    padding: 17px 0 17px 30px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .header__gnb-link {
    font-size: 26px;
    padding: 15px 0 15px 30px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .header__gnb-link {
    font-size: 18px !important;
    padding: 10px 0 10px 30px !important;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .header__gnb .has-sublist::after {
    content: "";
    margin-left: 15px;
    display: inline-block;
    vertical-align: middle;
    background: url("/assets/images/icon/arrow-hd-gnb-2f351e234d6d55b43bf850ca3a8693da.svg") no-repeat center center;
    background-size: 100% 100%;
  }
}
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px), (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) {
  .is-app .header__gnb .has-sublist::after {
    content: "";
    margin-left: 15px;
    display: inline-block;
    vertical-align: middle;
    background: url("/assets/images/icon/arrow-hd-gnb-2f351e234d6d55b43bf850ca3a8693da.svg") no-repeat center center;
    background-size: 100% 100%;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .header__gnb .has-sublist::after {
    width: 16px;
    height: 16px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .is-app .header__gnb .has-sublist::after {
    width: 16px;
    height: 16px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .header__gnb .has-sublist::after {
    width: 12px;
    height: 12px;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .header__gnb .has-sublist::after {
    width: 12px;
    height: 12px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .header__gnb .show-sub .has-sublist::after {
    transform: rotate(180deg);
  }
}
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px), (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) {
  .is-app .header__gnb .show-sub .has-sublist::after {
    transform: rotate(180deg);
  }
}
.header__gnb-icon-arr {
  display: inline-block;
  vertical-align: middle;
  background: url("/assets/images/icon/arrow-hd-gnb-2f351e234d6d55b43bf850ca3a8693da.svg") no-repeat center center;
  background-size: 100% 100%;
  display: inline-block;
  width: 11px;
  height: 100%;
  margin-left: 8px;
}
.header__gnb-sublist {
  width: max-content;
  min-width: 160px;
  background: #E8F8FF;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform: translate(-50%, 0);
  top: 70px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  padding: 13px 0;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .header__gnb-sublist {
    width: 100%;
    position: relative;
    top: 0;
    justify-content: start;
    color: #FF00B2;
    padding: 0;
  }
}
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px), (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) {
  .is-app .header__gnb-sublist {
    width: 100%;
    position: relative;
    top: 0;
    justify-content: start;
    color: #FF00B2;
    padding: 0;
  }
}
.header__gnb-sublist li, .header__gnb-sublist a {
  display: block;
  width: 100%;
  height: auto;
  text-align: center;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .header__gnb-sublist li, .header__gnb-sublist a {
    text-align: left;
  }
}
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px), (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) {
  .is-app .header__gnb-sublist li, .is-app .header__gnb-sublist a {
    text-align: left;
  }
}
.header__gnb-subitem {
  color: #404cb5;
  padding: 12px 20px;
  font-family: "Montserrat", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: normal;
  cursor: pointer;
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .header__gnb-subitem {
    font-size: 22px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .header__gnb-subitem {
    padding-left: 40px;
    color: #FF00B2;
  }
}
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px), (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) {
  .is-app .header__gnb-subitem {
    padding-left: 40px;
    color: #FF00B2;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .header__gnb-subitem {
    font-size: 22px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .header__gnb-subitem {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 17px !important;
  }
}
.header__gnb-subitem:hover {
  color: #FF00B2;
}
.header__gnb-item.show-sub .header__gnb-sublist {
  opacity: 1;
  pointer-events: auto;
  transition: all 0.5s;
  max-height: 250px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .header__gnb-item.show-sub .header__gnb-sublist {
    padding: 0;
  }
}

.wrapper {
  width: 100%;
  height: auto;
  border: 10px solid red;
}

.container {
  width: 100%;
  height: auto;
}

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

section {
  width: 100%;
}

.header__inner,
.page__container,
.gnb-media-con__list,
.gnb-unit__list {
  max-width: 1440px;
  margin: 0 auto;
}

.page--main .page__container {
  max-width: 100%;
}

.page {
  width: 100%;
  height: auto;
  position: relative;
  padding-top: 70px;
  background-color: #FFE659;
}
.page--app-login {
  background: #E8F8FF;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page {
    padding-top: 48px !important;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .is-app .page {
    padding-top: 48px !important;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page {
    padding-top: 0;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page {
    padding-top: 0;
  }
}
.page.level-1 .gnb-unit, .page.level-1 .gnb-media-con {
  width: 100%;
  max-width: 1440px;
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #02abf2;
  padding: 10px 32px;
  overflow: visible;
  z-index: 2000;
}
@media (max-width: 1366px) {
  .page.level-1 .gnb-unit, .page.level-1 .gnb-media-con {
    max-width: 100%;
    overflow-x: auto;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.level-1 .gnb-unit, .page.level-1 .gnb-media-con {
    justify-content: center;
    padding: 20px 30px;
  }
}
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px), (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) {
  .is-app .page.level-1 .gnb-unit, .is-app .page.level-1 .gnb-media-con {
    justify-content: center;
    padding: 20px 30px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page.level-1 .gnb-unit, .page.level-1 .gnb-media-con {
    width: 83%;
    max-width: 600px;
    left: 50%;
    transform: translate(-50%, 100%);
    bottom: 0;
    top: auto;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .is-app .page.level-1 .gnb-unit, .is-app .page.level-1 .gnb-media-con {
    width: 83%;
    max-width: 600px;
    left: 50%;
    transform: translate(-50%, 100%);
    bottom: 0;
    top: auto;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page.level-1 .gnb-unit, .page.level-1 .gnb-media-con {
    width: fit-content;
    top: 50%;
    left: auto;
    right: 0;
    transform: translate(100%, -50%);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page.level-1 .gnb-unit, .is-app .page.level-1 .gnb-media-con {
    width: fit-content;
    top: 50%;
    left: auto;
    right: 0;
    transform: translate(100%, -50%);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
}
.page.level-1 .gnb-unit__item.on, .page.level-1 .gnb-media-con__item.on {
  color: #0049B7;
  background: #E8F8FF;
  border-color: #0049B7;
}
.page.level-1 .gnb-media-con::before, .page.level-1 .btn--gnb-media-con {
  background: #02abf2;
}
.page.level-2 .gnb-unit, .page.level-2 .gnb-media-con {
  width: 100%;
  max-width: 1440px;
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #59BF2B;
  padding: 10px 32px;
  overflow: visible;
  z-index: 2000;
}
@media (max-width: 1366px) {
  .page.level-2 .gnb-unit, .page.level-2 .gnb-media-con {
    max-width: 100%;
    overflow-x: auto;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.level-2 .gnb-unit, .page.level-2 .gnb-media-con {
    justify-content: center;
    padding: 20px 30px;
  }
}
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px), (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) {
  .is-app .page.level-2 .gnb-unit, .is-app .page.level-2 .gnb-media-con {
    justify-content: center;
    padding: 20px 30px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page.level-2 .gnb-unit, .page.level-2 .gnb-media-con {
    width: 83%;
    max-width: 600px;
    left: 50%;
    transform: translate(-50%, 100%);
    bottom: 0;
    top: auto;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .is-app .page.level-2 .gnb-unit, .is-app .page.level-2 .gnb-media-con {
    width: 83%;
    max-width: 600px;
    left: 50%;
    transform: translate(-50%, 100%);
    bottom: 0;
    top: auto;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page.level-2 .gnb-unit, .page.level-2 .gnb-media-con {
    width: fit-content;
    top: 50%;
    left: auto;
    right: 0;
    transform: translate(100%, -50%);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page.level-2 .gnb-unit, .is-app .page.level-2 .gnb-media-con {
    width: fit-content;
    top: 50%;
    left: auto;
    right: 0;
    transform: translate(100%, -50%);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
}
.page.level-2 .gnb-unit__item.on, .page.level-2 .gnb-media-con__item.on {
  color: #237200;
  background: #E7FADE;
  border-color: #237200;
}
.page.level-2 .gnb-media-con::before, .page.level-2 .btn--gnb-media-con {
  background: #59BF2B;
}
.page.level-3 .gnb-unit, .page.level-3 .gnb-media-con {
  width: 100%;
  max-width: 1440px;
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #FF60AA;
  padding: 10px 32px;
  overflow: visible;
  z-index: 2000;
}
@media (max-width: 1366px) {
  .page.level-3 .gnb-unit, .page.level-3 .gnb-media-con {
    max-width: 100%;
    overflow-x: auto;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.level-3 .gnb-unit, .page.level-3 .gnb-media-con {
    justify-content: center;
    padding: 20px 30px;
  }
}
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px), (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) {
  .is-app .page.level-3 .gnb-unit, .is-app .page.level-3 .gnb-media-con {
    justify-content: center;
    padding: 20px 30px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page.level-3 .gnb-unit, .page.level-3 .gnb-media-con {
    width: 83%;
    max-width: 600px;
    left: 50%;
    transform: translate(-50%, 100%);
    bottom: 0;
    top: auto;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .is-app .page.level-3 .gnb-unit, .is-app .page.level-3 .gnb-media-con {
    width: 83%;
    max-width: 600px;
    left: 50%;
    transform: translate(-50%, 100%);
    bottom: 0;
    top: auto;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page.level-3 .gnb-unit, .page.level-3 .gnb-media-con {
    width: fit-content;
    top: 50%;
    left: auto;
    right: 0;
    transform: translate(100%, -50%);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page.level-3 .gnb-unit, .is-app .page.level-3 .gnb-media-con {
    width: fit-content;
    top: 50%;
    left: auto;
    right: 0;
    transform: translate(100%, -50%);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
}
.page.level-3 .gnb-unit__item.on, .page.level-3 .gnb-media-con__item.on {
  color: #A8003D;
  background: #FFF0F7;
  border-color: #A8003D;
}
.page.level-3 .gnb-media-con::before, .page.level-3 .btn--gnb-media-con {
  background: #FF60AA;
}
.page--menu, .page--resources {
  background: #02abf2;
}
.page--menu .page__container, .page--resources .page__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .page--menu .page__container, .page--resources .page__container {
    gap: 30px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--menu .page__container, .page--resources .page__container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--menu .page__container, .page--resources .page__container {
    gap: 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--menu .page__container, .page--resources .page__container {
    gap: 0;
  }
}
.page--menu.level-1, .page--media-bridge.level-1 {
  background: #02abf2;
}
.page--menu.level-1 .select-con-list__item:hover h5, .page--media-bridge.level-1 .select-con-list__item:hover h5 {
  background: #404cb5;
}
.page--menu.level-2, .page--media-bridge.level-2 {
  background: #59BF2B;
}
.page--menu.level-2 .select-con-list__item:hover h5, .page--media-bridge.level-2 .select-con-list__item:hover h5 {
  background: #237200;
}
.page--menu.level-3, .page--media-bridge.level-3 {
  background: #FF60AA;
}
.page--menu.level-3 .select-con-list__item:hover h5, .page--media-bridge.level-3 .select-con-list__item:hover h5 {
  background: #A8003D;
}
.page.teacher, .page.institution {
  background: #6bcff6 !important;
}
.page--menu.teacher .select-con-list__item:hover h5, .page--resources.teacher .select-con-list__item:hover h5 {
  background: #02abf2;
}
.page .songs-chants,
.page .videos {
  width: 100%;
  padding: 30px 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page .songs-chants,
  .page .videos {
    padding: 30px 0 0;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page .songs-chants,
  .page .videos {
    padding: 20px;
  }
}
.page .songs-chants__item .cate,
.page .videos__item .cate {
  color: #0049B7;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.2;
  margin: 10px 0 2px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page .songs-chants__item .cate,
  .page .videos__item .cate {
    margin-top: 4px;
    font-size: 12px;
  }
}
.page .songs-chants__item .tit,
.page .videos__item .tit {
  font-size: 23px;
  font-weight: 600;
  line-height: 1.2;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page .songs-chants__item .tit,
  .page .videos__item .tit {
    margin-top: 0;
    font-size: 14px;
  }
}
.page .songs-chants__item .item-img,
.page .videos__item .item-img {
  display: inline-block;
  width: 100%;
  overflow: hidden;
}
.page .songs-chants__item:hover .item-img img,
.page .videos__item:hover .item-img img {
  transform: scale(1.1);
  transition: all 0.2s ease-out;
}
.page .gnb-media-con {
  transition: all 0.3s ease-in-out;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  z-index: 2000;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page .gnb-media-con {
    overflow-x: visible !important;
  }
}
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px), (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) {
  .is-app .page .gnb-media-con {
    overflow-x: visible !important;
  }
}
.page .gnb-media-con::-webkit-scrollbar {
  display: none;
}
.page .gnb-media-con::before {
  content: "";
  display: block;
  position: absolute;
  width: 200%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
@media (max-width: 1366px) {
  .page .gnb-media-con::before {
    display: none;
  }
}
.page .gnb-media-con__wrap {
  width: fit-content;
  margin-left: auto;
}
.page .gnb-media-con__wrap::-webkit-scrollbar {
  display: none;
}
.page .gnb-media-con__list {
  width: 100%;
  min-width: max-content;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  gap: 18px;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page .gnb-media-con__list {
    flex-direction: column;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page .gnb-media-con__list {
    flex-direction: column;
  }
}
.page .gnb-media-con__list .row {
  display: flex;
  flex-direction: row;
  gap: 20px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page .gnb-media-con__list {
    min-width: inherit;
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px), (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) {
  .is-app .page .gnb-media-con__list {
    min-width: inherit;
    flex-wrap: wrap;
    justify-content: center;
  }
}
.page .gnb-media-con__list li {
  width: fit-content;
}
.page .gnb-media-con .row--offset {
  padding-left: 40px;
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page .gnb-media-con .row--offset {
    padding-left: 0;
  }
}
.page .gnb-media-con__item {
  text-align: center;
  padding: 6px 20px;
  border-radius: 100px;
  background: #fff;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: normal;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page .gnb-media-con__item {
    flex-direction: column;
    gap: 6px;
    color: #000;
    background: #fff;
    padding: 8px;
    border-color: #fff;
  }
}
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px), (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) {
  .is-app .page .gnb-media-con__item {
    flex-direction: column;
    gap: 6px;
    color: #000;
    background: #fff;
    padding: 8px;
    border-color: #fff;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page .gnb-media-con__item {
    font-size: 2.5rem;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page .gnb-media-con__item {
    width: 170px;
    height: 170px;
    border: 8px solid;
    font-size: 3rem;
    gap: 10px;
    box-sizing: content-box !important;
    padding: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page .gnb-media-con__item {
    width: 100px !important;
    height: 100px !important;
    border: 6px solid !important;
    font-size: 2rem !important;
    box-sizing: content-box !important;
    padding: 0;
  }
}
.page .gnb-media-con__item a {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.page .gnb-media-con__item:hover {
  background: #FAFAFA;
}
.page .gnb-media-con__item.on {
  border: 6px solid;
}
.page .gnb-media-con__item:not(.on) {
  border: 3px solid #fff !important;
}
.page .gnb-media-con__item .icon-media {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 37px;
}
.page .gnb-media-con__item .icon-media img {
  width: 100%;
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page .gnb-media-con__item .icon-media {
    width: 70px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page .gnb-media-con__item .icon-media {
    width: 47px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page .gnb-media-con__item .icon-media {
    width: 37px !important;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--flashcard .gnb-media-con__list {
    gap: 12px 2.6rem !important;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page--flashcard .gnb-media-con__item {
    width: 150px;
    height: 150px;
    border: 8px solid;
    font-size: 3.3rem;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--flashcard .gnb-media-con__item {
    width: 105px !important;
    height: 105px !important;
    border: 6px solid !important;
    font-size: 2.5rem !important;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--flashcard .gnb-media-con {
    padding: 20px 10px !important;
  }
  .page--flashcard .gnb-media-con .gnb-media-con__list {
    gap: 10px !important;
  }
  .page--flashcard .gnb-media-con .gnb-media-con__list .row {
    gap: 10px;
  }
  .page--flashcard .gnb-media-con .gnb-media-con__item {
    width: 75px !important;
    height: 75px !important;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page .gnb-media-con.active {
    transform: translate(-50%, 0);
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .is-app .page .gnb-media-con.active {
    transform: translate(-50%, 0);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page .gnb-media-con.active {
    transform: translate(0, -50%);
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page .gnb-media-con.active {
    transform: translate(0, -50%);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page .gnb-media-con.active .btn--gnb-media-con::after {
    transform: translate(-50%, -50%) rotate(180deg);
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page .gnb-media-con.active .btn--gnb-media-con::after {
    transform: translate(-50%, -50%) rotate(180deg);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page .gnb-media-con.active .btn--gnb-media-con::after {
    transform: translate(-50%, -50%) rotate(180deg);
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .is-app .page .gnb-media-con.active .btn--gnb-media-con::after {
    transform: translate(-50%, -50%) rotate(180deg);
  }
}
.page__container {
  width: 100%;
  min-height: calc(100vh - 70px);
  position: relative;
  margin: 0 auto;
  padding-top: 70px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 70px;
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .page__container {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .is-app .page__container {
    padding-bottom: 60px;
    padding-top: 0;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page__container {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page__container {
    padding: 24px 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page__container {
    justify-content: flex-start;
    padding-top: 15px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page__container {
    padding: 10px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page__container {
    min-height: calc(100vh - 48px);
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .is-app .page__container {
    min-height: calc(100vh - 48px);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page__container {
    min-height: 100vh;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page__container {
    min-height: 100vh;
  }
}
.page__container .select-con-list {
  width: 100%;
  margin: 0 auto;
}
.page--quiz__container {
  padding-top: 66px;
  padding-bottom: 30px;
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page--quiz__container {
    padding-top: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--quiz__container {
    padding-top: 8px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--quiz__container {
    padding-top: 3px;
    padding-bottom: 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--quiz .swiper .swiper-slide.page--clil-2.math {
    gap: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--quiz .swiper-wrapper {
    min-height: calc(100vh - 76px);
  }
}
.page--quiz .swiper-slide {
  min-height: calc(100vh - 250px);
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 3.5rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--quiz .swiper-slide {
    min-height: calc(100vh - 250px);
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page--quiz .swiper-slide {
    min-height: calc(100vh - 120px);
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--quiz .swiper-slide {
    gap: 0;
    justify-content: flex-start;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--quiz .swiper-slide {
    min-height: calc(100vh - 90px);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--quiz .swiper-slide {
    min-height: calc(100vh - 166px);
  }
}
.page__main-tit {
  margin: 0 auto;
  text-align: center;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page__main-tit {
    padding-top: 18px;
  }
}

.teacher-page {
  background-color: #E8F8FF;
}

.correct-layer {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.correct-layer__effect {
  display: block;
  width: 100%;
  max-width: 500px;
  margin: auto;
}
.correct-layer__effect .top {
  max-width: 220px;
  margin: 0 auto;
  transform: translateY(50px);
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .correct-layer__effect .top {
    max-width: 130px;
  }
}

body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  /* touch-action으로 터치 이벤트 완전 차단 */
  touch-action: none;
  -webkit-overflow-scrolling: touch;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-help .modal-con-box {
  width: 100%;
  max-width: 1040px;
}
.modal-help .modal-content {
  width: 100%;
  max-width: 100%;
}
.modal-help .modal-title {
  gap: 1rem;
  margin-bottom: 4rem !important;
  font-size: 3.6rem;
}
.modal-help .modal-title .tit-icon {
  width: 80px;
  height: 80px;
}
.modal-help .help-con {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-items: start;
  gap: 3rem;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .modal-help .help-con {
    flex-direction: column-reverse;
  }
}
.modal-help .help-con--text {
  width: 40%;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .modal-help .help-con--text {
    width: 100%;
  }
}
.modal-help .help-con--text li {
  padding-left: 30px;
  position: relative;
  text-align: left;
  margin-bottom: 1.8rem;
}
.modal-help .help-con--text li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 20px;
  height: 20px;
  font-size: 11px;
  text-align: center;
  line-height: 20px;
  color: #fff;
  background: #6bcff6;
  border-radius: 50%;
}
.modal-help .help-con--text li:nth-child(1)::before {
  content: "1";
}
.modal-help .help-con--text li:nth-child(2)::before {
  content: "2";
}
.modal-help .help-con--text li:nth-child(3)::before {
  content: "3";
}
.modal-help .help-con--text li:nth-child(4)::before {
  content: "4";
}
.modal-help .help-con--text li:nth-child(5)::before {
  content: "5";
}
.modal-help .help-con--text li:nth-child(6)::before {
  content: "6";
}
.modal-help .help-con--image {
  width: 60%;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .modal-help .help-con--image {
    width: 100%;
  }
}
.modal--manage-classes .tit-icon {
  background: url("/assets/images/icon/ic_modal-book-99dd2620402648e863c0976daa87aaf9.svg") no-repeat center center/100%;
}
.modal-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.modal .modal-con-box {
  width: 100%;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.modal-content {
  width: fit-content;
  min-width: 414px;
  max-width: 600px;
  text-align: center;
  background: #fff;
  position: relative;
  border-radius: 16px;
  padding: 4rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  background: #fff url("/assets/images/modal/bg_modal-b2336a3e37ddaeb177951f00e7c90662.png") no-repeat top center/100% auto;
  z-index: 1001;
  margin: auto;
  touch-action: auto;
  /* 드래그 이벤트가 부모로 전파되지 않도록 */
  pointer-events: auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .modal-content {
    min-width: 320px;
    padding: 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .modal-content {
    max-height: 350px;
    overflow-y: auto;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .modal-content .modal-title {
    font-size: 26px;
  }
}
.modal-content.only-web {
  background: #fff url("/assets/images/modal/bg_modal-pink-c5bdf1bfa194d788fec533048d6579da.png") no-repeat top center/100% auto;
}
.modal-icon {
  display: block;
  width: 110px;
  margin: 0 auto 10px;
}
.modal-title {
  font-size: 4rem;
  font-weight: bold;
  margin-bottom: 3.2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.modal-title.medium {
  font-size: 3.2rem;
}
.modal-label {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #658FA1;
  text-align: left;
  margin-bottom: 0.5rem;
}
.modal-input, .modal-select {
  width: 100%;
  height: 53px;
  color: #000;
  font-size: 17px;
  font-weight: 400;
  padding: 1.4rem 2rem;
  border: 1.5px solid #C6DBE5;
  border-radius: 10px;
  margin-bottom: 2.8rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .modal-input, .modal-select {
    height: 40px;
    border-radius: 5px;
    font-size: 15px;
  }
}
.modal-select {
  background: url("/assets/images/icon/btn_arrow-select-b6a7d6e86dabcff0bfac897c3bedf67b.svg") no-repeat 95% center;
  padding-right: 50px;
}
.modal-input ~ .modal-actions {
  margin-top: 3.2rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .modal-input ~ .modal-actions {
    margin-top: 0;
  }
}
.modal-actions {
  width: 100%;
  height: 46px;
  gap: 12px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .modal-actions {
    height: 43px;
  }
}
.modal-actions .btn {
  font-family: "Pretendard", sans-serif;
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.modal-hint {
  color: #F91D1D;
  text-align: left;
  font-size: 13px;
  font-weight: 400;
}
.modal-user-info {
  background: #FAFAFA;
  border-radius: 1.8rem;
  padding: 1.8rem;
  margin-bottom: 2.8rem;
}
.modal-user-info .modal-label {
  margin-bottom: 0;
  text-align: center;
}
.modal-inst-name, .modal-class-name {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: #02abf2;
  margin: 10px 0;
}
.modal-alert {
  width: fit-content;
  min-width: 300px;
  max-width: 414px;
  padding: 2.4rem 2.8rem;
  background-image: none;
  z-index: 20000;
}
.modal-alert .tit-icon {
  width: 60px;
  aspect-ratio: 1;
  margin: 0 auto 10px;
}
.modal-alert .tit-icon img {
  width: 100%;
}
.modal-alert .modal-success-msg {
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 2rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .modal-alert .modal-success-msg {
    font-size: 20px;
  }
}
.modal-alert .modal-success-msg .logo {
  width: 100%;
}
.modal-alert .modal-success-msg .ampersand {
  font-family: "Montserrat";
  font-weight: 500;
}
.modal-alert.only-web {
  max-width: 500px;
  padding-left: 0;
  padding-right: 0;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .modal-alert.only-web {
    max-width: 300px;
  }
}
.modal-alert.only-web .modal-success-msg {
  line-height: 1.5;
  margin: 10px auto 20px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .modal-alert.only-web .modal-success-msg {
    font-size: 17px;
  }
}
.modal-alert.only-web .modal-success-msg span {
  color: #FF00B2;
  font-weight: 600;
}
.modal-alert.only-web .modal-success-msg .logo {
  width: 100%;
}
.modal-alert.only-web .modal-actions {
  width: 300px;
  margin: auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .modal-alert.only-web .modal-actions {
    width: 250px;
  }
}
.modal-alert.only-web .btn {
  font-size: 20px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .modal-alert.only-web .btn {
    font-size: 15px;
  }
}
.modal-alert .btn-success-confirm:hover {
  background-color: #e03574;
}
.modal-alert.confirm label {
  display: block;
  margin-bottom: 8px;
  color: #FF00B2;
  text-align: left;
  font-size: 15px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .modal-alert.confirm label {
    font-size: 13px;
  }
}
.modal-alert.confirm input {
  width: 100%;
  height: 53px;
  color: #000;
  font-size: 1.7rem;
  font-weight: 300;
  padding: 1.4rem 2rem;
  border: 1.5px solid #C6DBE5;
  border-radius: 10px;
  margin-bottom: 2.8rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .modal-alert.confirm input {
    height: 40px;
  }
}

.btn-close {
  width: 30px;
  height: 30px;
  display: block;
  background: url("/assets/images/icon/btn_close-0e8120c2d07bafd9b4af603624d3060f.svg") no-repeat center center/100%;
  position: absolute;
  top: 20px;
  right: 20px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .btn-close {
    width: 24px;
    height: 24px;
  }
}

.modal-long .modal-input,
.modal-long .modal-select {
  margin-bottom: 2rem;
}

.modal-confirm {
  font-family: "Pretendard", sans-serif;
}
.modal-confirm .modal-content {
  min-width: 270px;
  max-width: 320px;
  padding: 2.4rem 2.8rem;
}
.modal-confirm .modal-content .modal-error-msg {
  margin-bottom: 2rem;
}

.popup-player {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 600px;
  height: auto;
  min-height: 350px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 14px;
  padding: 20px;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .popup-player {
    max-width: 400px;
  }
}
.popup-player .popup-script .subtitle {
  font-size: 2.5rem;
  min-height: 1.6em;
  line-height: 1.6em;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .popup-player .popup-script .subtitle {
    font-size: 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .popup-player .popup-script .subtitle {
    font-size: 18px;
  }
}
.popup-player.full .popup-script .subtitle {
  font-size: 5rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .popup-player.full .popup-script .subtitle {
    font-size: 48px;
  }
}
@media (orientation: landscape) and (max-width: 1024px) {
  .popup-player.full .popup-script .subtitle {
    font-size: 45px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .popup-player.full .popup-script .subtitle {
    font-size: 45px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .popup-player.full .popup-script .subtitle {
    font-size: 23px;
  }
}
.popup-player.story-player {
  max-width: 1300px;
  justify-content: center;
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .popup-player.story-player {
    width: min(100vw, 140vh);
    height: min(100vh, 71.4285714286vw);
    max-width: 100vw;
    max-height: 100vh;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .popup-player.story-player {
    width: 80%;
    padding: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .popup-player.story-player {
    max-width: none;
    height: calc(80vh + 56px);
    width: auto;
    padding: 0;
  }
}
.popup-player.story-player .popup-header {
  height: 0;
}
.popup-player__inner {
  width: 100%;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  overflow: hidden;
}

.popup-player.full {
  width: 100%;
  max-width: 75%;
  padding: 0;
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .popup-player.full {
    width: min(100vw, 152vh);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .popup-player.full {
    width: min(100vw, 136vh);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .popup-player.full {
    max-width: 100%;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .popup-player.full {
    max-width: 100%;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .popup-player.full {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 100vw;
    max-height: 100vh;
    background: transparent;
    overflow: hidden;
    aspect-ratio: 4/3;
    height: min(100vh, 75vw);
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .popup-player.full {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 100vw;
    max-height: 100vh;
    background: transparent;
    overflow: hidden;
    aspect-ratio: 4/3;
    height: min(100vh, 75vw);
  }
}
.popup-player.full .subtitle {
  justify-content: center;
}
.popup-player.full .btn-pop-full-screen {
  background: url("/assets/images/icon/btn_pop-basic-screen-b327fb5db92d8127729fa30ba92430de.png") no-repeat center center/75% auto;
}

.popup-header {
  width: 100%;
  height: 34px;
  display: flex;
  justify-content: right;
  align-items: center;
  background: #157FE6;
  color: #fff;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .popup-header {
    height: 29px;
  }
}

.popup-header button {
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

.popup-content {
  display: flex;
  flex-direction: column;
  position: relative;
}

.popup-video {
  position: relative;
}

.popup-video video {
  display: block;
  width: 100%;
  min-height: 170px;
  background: black;
  aspect-ratio: 5.3/3;
}

.popup-script {
  max-height: 100px;
  overflow-y: auto;
  border-top: 1px solid;
  border-bottom: 1px solid;
}

.subtitle {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 2rem;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  line-height: 2;
}

.script-line.highlight {
  background: yellow;
}

.popup-controls {
  display: flex;
  flex-direction: row;
  gap: 12px;
  padding: 8px 8px 8px 16px;
  color: #fff;
  background: #157FE6;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .popup-controls {
    padding: 6px 12px 6px 12px;
    gap: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .popup-controls {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
  }
}
.popup-controls__row {
  display: flex;
  gap: 12px;
}
.popup-controls__row--top {
  flex: 1;
}
.popup-controls__row--bottom {
  align-items: center;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .popup-controls__row--bottom input[type=range] {
    display: none !important;
  }
}

.progress-container {
  flex: 1;
  margin: 0 10px;
  display: grid;
  grid-template-columns: 1fr 100px;
  justify-content: space-between;
  align-items: center;
}

.progress {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: none;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  position: relative;
  transform: translateX(-10px);
  --thumb: 24px;
}

/* 크롬, 사파리용 */
input.progress::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
  border-radius: 10px;
}

input.progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: #FF60AA;
  border-radius: 50%;
  margin-top: -7px;
  cursor: pointer;
}

.time-con {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.time {
  font-size: 16px;
  color: #fff;
}

#duration {
  opacity: 0.5;
}

.volume-slider {
  width: 60px;
  margin-left: 5px;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: #0066AC;
  border-radius: 2px;
  cursor: pointer;
  transform: translateX(-10px);
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
}

.volume-slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
}

.pop-songs-chants .popup-title {
  width: 100%;
  height: 100%;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("/assets/images/contents/songs-chants/player/L1_U1-bc02e57b56513f43b8cde9863c48cff2.png") no-repeat center center/100% auto;
  z-index: 1;
}
.pop-songs-chants .popup-title__img {
  display: block;
  width: 25%;
  max-width: 300px;
  aspect-ratio: 1/1;
  background: url("/assets/images/icon/ic_player-bg-bc1d64dab13bda307916f4953990399f.png") no-repeat center center/100% auto;
}
.pop-songs-chants .popup-title h5 {
  font-size: 2.6rem;
  display: flex;
  flex-direction: column;
  font-weight: 600;
  position: absolute;
  top: 0;
  left: 0;
  text-align: left;
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  background: rgba(0, 0, 0, 0.2);
  padding: 15px 20px;
}
.pop-songs-chants .popup-title h5 p {
  font-weight: 500;
}
.pop-songs-chants .popup-player.full .popup-title h5 {
  font-size: 3.6rem;
}
.pop-songs-chants .popup-script {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
}
.pop-songs-chants .popup-script .subtitle {
  top: 0;
  bottom: auto;
  height: auto;
  min-height: 100%;
  padding-top: 0 !important;
}

.popup-replay {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
}

.modal-wh .modal-content {
  background: #fff;
}

.pop-videos .popup-player .popup-script .subtitle {
  font-size: 3rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .pop-videos .popup-player .popup-script .subtitle {
    font-size: 30px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .pop-videos .popup-player .popup-script .subtitle {
    font-size: 23px;
  }
}
.pop-videos .popup-player.full .popup-script .subtitle {
  font-size: 5rem;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .pop-videos .popup-player.full .popup-script .subtitle {
    font-size: 40px;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .pop-videos .popup-player.full .popup-script .subtitle {
    font-size: 50px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .pop-videos .popup-player.full .popup-script .subtitle {
    font-size: 28px;
  }
}

.btn {
  background: #fff;
  width: fit-content;
  height: auto;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  cursor: pointer;
}
.btn--back {
  display: block;
  width: 60px !important;
  min-width: auto !important;
  height: 60px !important;
  background: #fff url("/assets/images/icon/btn_back-02709ec799e954db06d1e396dc7cd13a.svg") no-repeat 19px center/30% auto;
  display: none;
  border-radius: 50% !important;
  z-index: 1;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .btn--back {
    width: 40px !important;
    height: 40px !important;
    background: #fff url("/assets/images/icon/btn_back-02709ec799e954db06d1e396dc7cd13a.svg") no-repeat 13px center/30% auto;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .btn--back {
    display: block;
  }
}
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px), (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) {
  .is-app .btn--back {
    display: block;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .btn--back {
    top: 75px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .btn--back {
    position: absolute;
    top: 60px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .btn--back {
    position: fixed;
    top: 18px;
    left: 15px;
    z-index: 10;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .btn--back {
    position: fixed;
    top: 18px;
    left: 15px;
    z-index: 10;
  }
}
.btn--back.fixed {
  position: fixed;
  top: 18px;
  left: 15px;
  z-index: 10;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .btn--back.fixed {
    top: 60px;
  }
}

.btn-gnb {
  display: none;
  width: 60px;
  height: 60px;
  background: url("/assets/images/icon/ic_gnb-menu-f35569cc50442a488f8ef9f136e54a03.svg") no-repeat center center/74% auto;
  position: relative;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .btn-gnb {
    background: #fff url("/assets/images/icon/ic_gnb-menu-bl-13918d145a0362fd9b95cbe6a77e41bd.svg") no-repeat center center/74% auto;
    position: fixed;
    top: 18px;
    right: 15px;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .btn-gnb {
    background: #fff url("/assets/images/icon/ic_gnb-menu-bl-13918d145a0362fd9b95cbe6a77e41bd.svg") no-repeat center center/74% auto;
    position: fixed;
    top: 18px;
    right: 15px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .btn-gnb {
    width: 40px;
    height: 40px;
  }
}
.btn-gnb.close {
  background: url("/assets/images/icon/ic_gnb-menu-close-e524468501af6fec5fdf4225e3adc3cd.svg") no-repeat center center/100% auto;
  z-index: 1;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .btn-gnb {
    display: block;
  }
}
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px), (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) {
  .is-app .btn-gnb {
    display: block;
  }
}

.btn--gnb-media-con {
  position: absolute;
  background: #02abf2;
  display: none;
  border-radius: 10px 0 0 10px;
  z-index: 2000;
}
.btn--gnb-media-con:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("/assets/images/icon/arr_btn-gnb-1e673c7fbd7bbbe4acaee585a1f7fb43.png") no-repeat center center/80% auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .btn--gnb-media-con {
    display: block;
  }
}
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px), (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) {
  .is-app .btn--gnb-media-con {
    display: block;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .btn--gnb-media-con {
    width: 45px;
    height: auto;
    aspect-ratio: 1/1.7;
    top: 50%;
    left: -44px;
    transform: rotate(0deg) translateY(-50%);
  }
  .is-app .btn--gnb-media-con:after {
    width: 36px;
    height: 36px;
  }
}
@media (orientation: portrait) and (min-width: 1000px), (orientation: landscape) and (min-width: 1281px) and (max-width: 1366px) {
  .btn--gnb-media-con {
    width: 66px !important;
    height: auto;
    aspect-ratio: 1/1.7;
    top: 50%;
    left: -65px !important;
  }
  .btn--gnb-media-con:after {
    width: 48px !important;
    height: 48px !important;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .btn--gnb-media-con {
    width: 33px !important;
    height: 56px !important;
    top: -42px !important;
    left: 50%;
    transform: rotate(90deg) translateY(30%);
  }
  .btn--gnb-media-con:after {
    width: 24px !important;
    height: 24px !important;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .btn--gnb-media-con {
    width: 33px !important;
    height: 56px !important;
    top: 50%;
    left: -32px !important;
    transform: rotate(0deg) translateY(-50%);
  }
  .btn--gnb-media-con:after {
    width: 24px !important;
    height: 24px !important;
  }
}

.page--activity-flow .btn-back {
  display: block;
  width: 62px;
  height: 62px;
  background: url("/assets/images/icon/btn_activity-back-1d140f9c29041ca87e9ee268aefe264c.svg") no-repeat center center/100% auto;
}

.page--quiz .btn--sound {
  width: 68px;
  aspect-ratio: 1/1;
  border: 5px solid #6bcff6;
  border-radius: 50%;
  background: url("/assets/images/icon/btn_activity-sound-a9e69e09437d71a72a666b9fbdf93f45.png") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (min-width: 1000px), (orientation: landscape) and (min-width: 1281px) and (max-width: 1366px) {
  .page--quiz .btn--sound {
    width: 78px !important;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--quiz .btn--sound {
    width: 45px;
  }
}
.page--quiz .swiper-slide .btn--sound.active {
  border-color: #FF60AA !important;
}
.page--quiz .btn--sound-order {
  width: 64px;
  aspect-ratio: 1/1;
  border: none;
  background: url("/assets/images/icon/btn_story-sound-1-eb3631bc8f697c2290e180e622a1ff31.png") no-repeat center center/100% auto;
}
.page--quiz .btn--sound-order.active {
  background: url("/assets/images/icon/btn_story-sound-1-play-72c3b91b735c959111c4e5bcfd5407dc.png") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--quiz .btn--sound-order {
    width: 44px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--quiz .btn--sound-order {
    width: 35px;
  }
}
.page--quiz .btn--prev,
.page--quiz .btn--next,
.page--quiz .btn--prev__turn,
.page--quiz .btn--next__turn {
  width: 55px;
  height: 53px;
  border-radius: 5px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--quiz .btn--prev,
  .page--quiz .btn--next,
  .page--quiz .btn--prev__turn,
  .page--quiz .btn--next__turn {
    width: 40px;
    height: 40px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--quiz .btn--prev,
  .page--quiz .btn--next,
  .page--quiz .btn--prev__turn,
  .page--quiz .btn--next__turn {
    width: 30px;
    height: 30px;
  }
}
.page--quiz .btn--prev,
.page--quiz .btn--prev__turn {
  background: #02abf2 url("/assets/images/icon/btn_quiz-prev-524820d44b7f3e6bbaa790fac113cb89.svg") no-repeat center center/50% auto;
}
.page--quiz .btn--prev:disabled,
.page--quiz .btn--prev__turn:disabled {
  background-color: #ACACAC;
  pointer-events: none;
  cursor: not-allowed;
}
.page--quiz .btn--next,
.page--quiz .btn--next__turn {
  background: #02abf2 url("/assets/images/icon/btn_quiz-next-9e8a538319fb8c53258b4431ea7903fa.svg") no-repeat center center/50% auto;
}
.page--quiz .btn--next:disabled,
.page--quiz .btn--next__turn:disabled {
  background-color: #ACACAC;
  pointer-events: none;
  cursor: not-allowed;
}

.sound__btn {
  width: 40px;
  height: 40px;
}
.sound__btn--play {
  background: url("/assets/images/icon/btn_play-ae9c00f78f4be838549bc49b7e211b42.png") no-repeat center center/100% auto;
}
.sound__btn--play:disabled {
  background: url("/assets/images/icon/btn_quiz-sound-play-disabled.svg") no-repeat center center/100% auto;
}
.sound__btn--play.active {
  background: url("/assets/images/icon/btn_pause-04f9ab9d3e8d8a8eda81db43c91eb043.png") no-repeat center center/100% auto;
}

.modal .btn {
  height: 100%;
  font-size: 22px;
  color: #fff;
  border-radius: 7px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .modal .btn {
    font-size: 15px;
  }
}

.btn-modal {
  border-radius: 7px;
  color: #fff;
  padding: 10px 18px;
}

.btn-create-class {
  height: 38px;
}

.btn--edit {
  width: 25px;
  height: 25px;
  background: url("/assets/images/icon/btn_edit-dd43da8e3cdb5d6685d15b2f5bb09e94.svg") no-repeat center center/100% auto;
}

.btn-blue {
  background: #02abf2;
}
.btn-blue:hover {
  background: #0088c1;
}

.btn-light-blue {
  color: #fff;
  background: #6bcff6;
}
.btn-light-blue:active {
  background: #02abf2;
}

.btn-green {
  background: #59BF2B;
}
.btn-green:hover {
  background: #237200;
}

.btn-primary {
  background: #FF60AA;
}
.btn-primary:hover {
  background: #FF00B2;
}

.btn-secondary {
  background: #8DB1C0;
}
.btn-secondary:hover {
  background: #B9CDD5;
}

.btn--danger {
  font-size: 1.3rem;
  background: #F91D1D !important;
  color: #fff !important;
  text-decoration: none !important;
}
.btn--danger:hover {
  background: #CE0000 !important;
}

.btn-con {
  display: flex;
  justify-content: center;
}

.btn-write {
  width: 200px;
  height: 46px;
  color: #fff;
  border-radius: 7px;
}

.teacher-page .btn {
  color: #fff;
  border-radius: 7px;
  font-size: 1.7rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .teacher-page .btn {
    font-size: 14px;
  }
}

.page--player .btn {
  display: block;
  width: 45px;
  height: 45px;
  border-radius: 0 !important;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--player .btn {
    width: 40px;
    height: 40px;
  }
}

.page--player .full .btn {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 0 !important;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--player .full .btn {
    width: 45px;
    height: 45px;
  }
}

.page--player .popup-header .btn {
  width: 29px;
  height: 29px;
  margin-right: 10px;
  padding: 4px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--player .popup-header .btn {
    width: 24px;
    height: 24px;
  }
}

.page--player .full .popup-header .btn {
  width: 34px;
  height: 34px;
  margin-right: 10px;
  padding: 4px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--player .full .popup-header .btn {
    width: 29px;
    height: 29px;
  }
}

.btn-pop-full-screen {
  background: url("/assets/images/icon/btn_pop-full-screen-111c4c0f4c6c581e164c6068578ad06a.png") no-repeat center center/75% auto;
}

.btn-pop-close {
  background: url("/assets/images/icon/btn_pop-close-6045c5a71feb56c69818c6e6e66068fc.png") no-repeat center center/75% auto;
}

.btn-pop-close-mo {
  background: url("/assets/images/icon/btn_pop-close-mo-50f8529b84b44eac438071f0acd14511.svg") no-repeat center center/100% auto;
  width: 42px;
  position: absolute;
  right: 8px;
  top: 8px;
  display: block;
  aspect-ratio: 1/1;
  z-index: 1;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .btn-pop-close-mo {
    width: 32px;
    right: 4px;
    top: 4px;
  }
}

.btn-pop-play {
  transform: translateX(6px);
  background: url("/assets/images/icon/btn_pop-play.png") no-repeat center center/100% auto;
}

.btn-pop-play.active {
  background: url("/assets/images/icon/btn_pop-pause.png") no-repeat center center/100% auto;
}

.btn-subs-toggle {
  background: url("/assets/images/icon/btn_pop-subs-inactive-1c68527108dca71f7d985b4b95d4ad96.png") no-repeat center center/100% auto;
}

.btn-subs-toggle.active {
  background: url("/assets/images/icon/btn_pop-subs-active-ab5f7c0ab39f92e93c23c346a63d7bfb.png") no-repeat center center/100% auto;
}

.btn-pop-sound {
  background: url("/assets/images/icon/btn_pop-sound-a7b33bfc705ea6dbe6dcd73f7b320319.png") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .btn-pop-sound {
    display: none !important;
  }
}

.btn-pop-sound.mute {
  background: url("/assets/images/icon/btn_pop-sound-mute-39da5eb608e3c06949524d603d7feee5.png") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .btn-pop-sound.mute {
    display: none !important;
  }
}

.btn--replay {
  width: 20%;
  max-width: 120px;
  aspect-ratio: 1/1;
  background: url("/assets/images/icon/btn_replay-10d5073c1fc7ec89eae84503365e4027.png") no-repeat center center/85% auto;
  transition: all 0.15s ease-in-out;
}
.btn--replay:hover {
  animation: pulseReplay 0.5s ease;
}

.sound__controls {
  width: 100%;
  padding: 10px 35px 10px 22px;
  background: #02abf2;
  position: absolute;
  top: 30px;
  right: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 25px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .sound__controls {
    padding: 8px 12px;
    gap: 22px;
  }
}
.sound__controls.quiz-story {
  position: relative;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  opacity: 1;
}
.sound__controls.quiz-story .sound__btn {
  width: 50px;
  height: 50px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .sound__controls.quiz-story .sound__btn {
    width: 40px;
    height: 40px;
  }
}
.sound__controls.quiz-story .sound__progress {
  width: calc(100% - 60px);
  position: relative;
  /* 중요: range 주변 여백도 터치 허용 */
  touch-action: manipulation;
  /* 드래그 시 선택 방지 */
  user-select: none;
  -webkit-user-select: none;
}
.sound__controls.quiz-story .sound__progress-bar {
  width: 100%;
  height: 10px;
  background: #C6DBE5;
  border-radius: 10px;
}
.sound__controls.quiz-story .sound__progress-btn {
  width: 31px;
  height: 31px;
  background: #FF60AA;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-15px, -50%);
  border-radius: 50% !important;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .sound__controls.quiz-story .sound__progress-btn {
    width: 25px;
    height: 25px;
  }
}

.btn--story-open {
  width: fit-content;
  max-width: 420px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 26px;
  padding-right: 30px;
  position: relative;
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .btn--story-open {
    max-width: 300px;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .btn--story-open {
    max-width: 400px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .btn--story-open {
    max-width: 270px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .btn--story-open {
    max-width: 180px !important;
    margin-top: 10px;
  }
}
.btn--story-open img {
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
.btn--story-open::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  background: #fff;
  width: 18px;
  height: 100%;
  z-index: -1;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
.btn--story-open::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: #fff;
  width: 15px;
  height: 100%;
  z-index: -2;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

.page.teacher-page label,
.page.teacher-page .label {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #658FA1;
  text-align: left;
  margin-bottom: 0.5rem;
}
.page.teacher-page input,
.page.teacher-page textarea,
.page.teacher-page select {
  width: 100%;
  height: 53px;
  color: #000;
  font-size: 1.7rem;
  font-weight: 300;
  padding: 1.4rem 2rem;
  border: 1.5px solid #C6DBE5;
  border-radius: 10px;
  margin-bottom: 2.8rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.teacher-page input,
  .page.teacher-page textarea,
  .page.teacher-page select {
    height: 40px;
    border-radius: 5px;
    margin-bottom: 20px;
  }
}
.page.teacher-page .action-con {
  position: absolute;
  top: 65px;
  right: 0;
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  gap: 10px;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page.teacher-page .action-con {
    top: 90px;
    width: 100%;
    justify-content: right;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .page.teacher-page .action-con {
    top: 90px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page.teacher-page .action-con {
    top: 103px !important;
  }
}
.page.teacher-page .search-input {
  max-width: 240px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  position: relative;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page.teacher-page .search-input {
    max-width: 180px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.teacher-page .search-input {
    justify-content: space-between;
  }
}
.page.teacher-page .search-input input {
  height: 40px;
  font-size: 1.7rem;
  font-weight: 300;
  line-height: 1.45;
  border-radius: 10px;
  border: 1px solid #D1EDFA;
  padding: 7.5px 56px 7.5px 20px;
  margin-bottom: 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page.teacher-page .search-input input {
    border-radius: 5px;
  }
}
.page.teacher-page .search-input .btn-search {
  width: 18px;
  height: 18px;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: url("/assets/images/icon/btn-search-7e198d80623b031d62974e388515dbd8.svg") no-repeat 93% center/100%;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page.teacher-page .search-input .btn-search {
    width: 15px;
    right: 12px;
  }
}
.page.teacher-page .select-box {
  width: 100%;
  max-width: 200px;
  height: 53px;
  color: #000;
  font-size: 1.7rem;
  font-weight: 400;
  padding: 1.4rem 2rem;
  padding-right: 50px;
  border: 1.5px solid #C6DBE5;
  border-radius: 10px;
  margin-bottom: 0;
  background: #fff url("/assets/images/icon/btn_arrow-select-b6a7d6e86dabcff0bfac897c3bedf67b.svg") no-repeat 95% center;
}
.page.teacher-page .info-txt {
  height: auto;
  font-weight: 400;
}
.page.teacher-page .content-txt {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 32px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.teacher-page .content-txt {
    font-size: 15px;
    margin-bottom: 20px;
  }
}
.page.teacher-page input::placeholder,
.page.teacher-page textarea::placeholder {
  color: #8DB1C0;
}
.page.teacher-page textarea {
  height: auto;
  min-height: 200px;
}
.page.teacher-page .gnb-media-con {
  width: 100%;
  max-width: 1440px;
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #02abf2;
  padding: 10px 32px;
  overflow: visible;
  z-index: 2000;
}
@media (max-width: 1366px) {
  .page.teacher-page .gnb-media-con {
    max-width: 100%;
    overflow-x: auto;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.teacher-page .gnb-media-con {
    justify-content: center;
    padding: 20px 30px;
  }
}
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px), (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) {
  .is-app .page.teacher-page .gnb-media-con {
    justify-content: center;
    padding: 20px 30px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page.teacher-page .gnb-media-con {
    width: 83%;
    max-width: 600px;
    left: 50%;
    transform: translate(-50%, 100%);
    bottom: 0;
    top: auto;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .is-app .page.teacher-page .gnb-media-con {
    width: 83%;
    max-width: 600px;
    left: 50%;
    transform: translate(-50%, 100%);
    bottom: 0;
    top: auto;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page.teacher-page .gnb-media-con {
    width: fit-content;
    top: 50%;
    left: auto;
    right: 0;
    transform: translate(100%, -50%);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page.teacher-page .gnb-media-con {
    width: fit-content;
    top: 50%;
    left: auto;
    right: 0;
    transform: translate(100%, -50%);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
}
.page.teacher-page .gnb-media-con__item {
  color: #0088c1;
}
.page.teacher-page .page__container {
  padding-top: 0;
}
.page.teacher-page .page__container--inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  padding-top: 30px;
  gap: 24px;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page.teacher-page .page__container--inner:has(.action-con) {
    gap: 40px;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .page.teacher-page .page__container--inner:has(.action-con) {
    gap: 40px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.teacher-page .page__container--inner:has(.action-con) {
    gap: 30px;
  }
}
.page.teacher-page .page__container--inner > .table-con {
  width: 100%;
}
.page.teacher-page .page__main-tit {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page.teacher-page .page__main-tit {
    margin-bottom: 10px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page.teacher-page .page__main-tit {
    margin-top: 15px;
  }
}
.page.teacher-page .page__main-tit .tit-icon {
  display: inline-block;
  width: 10.2rem;
  aspect-ratio: 1/1;
}
.page.teacher-page .table-con {
  border-radius: 10px;
  overflow: hidden;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page.teacher-page .table-con {
    overflow-x: scroll;
  }
}
.page.teacher-page .table-con div {
  height: 100%;
}
.page.teacher-page .table-con .t-table {
  background: #fff;
  overflow: hidden;
}
.page.teacher-page .table-con .t-table .t-table__header,
.page.teacher-page .table-con .t-table .t-table__body--item {
  display: grid;
  align-items: center;
  font-weight: 400;
  text-align: center;
}
.page.teacher-page .table-con .t-table .t-table__header .t-name,
.page.teacher-page .table-con .t-table .t-table__header .class-name,
.page.teacher-page .table-con .t-table .t-table__header .class-id,
.page.teacher-page .table-con .t-table .t-table__header .tea-id,
.page.teacher-page .table-con .t-table .t-table__body--item .t-name,
.page.teacher-page .table-con .t-table .t-table__body--item .class-name,
.page.teacher-page .table-con .t-table .t-table__body--item .class-id,
.page.teacher-page .table-con .t-table .t-table__body--item .tea-id {
  line-height: 52px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.teacher-page .table-con .t-table .t-table__header .t-name,
  .page.teacher-page .table-con .t-table .t-table__header .class-name,
  .page.teacher-page .table-con .t-table .t-table__header .class-id,
  .page.teacher-page .table-con .t-table .t-table__header .tea-id,
  .page.teacher-page .table-con .t-table .t-table__body--item .t-name,
  .page.teacher-page .table-con .t-table .t-table__body--item .class-name,
  .page.teacher-page .table-con .t-table .t-table__body--item .class-id,
  .page.teacher-page .table-con .t-table .t-table__body--item .tea-id {
    line-height: 40px;
  }
}
.page.teacher-page .table-con .t-table .t-table__header .stu-name,
.page.teacher-page .table-con .t-table .t-table__header .stu-email,
.page.teacher-page .table-con .t-table .t-table__body--item .stu-name,
.page.teacher-page .table-con .t-table .t-table__body--item .stu-email {
  line-height: 26px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.teacher-page .table-con .t-table .t-table__header .stu-name,
  .page.teacher-page .table-con .t-table .t-table__header .stu-email,
  .page.teacher-page .table-con .t-table .t-table__body--item .stu-name,
  .page.teacher-page .table-con .t-table .t-table__body--item .stu-email {
    line-height: 20px;
  }
}
.page.teacher-page .table-con .t-table .t-table__header .stu-name a,
.page.teacher-page .table-con .t-table .t-table__body--item .stu-name a {
  width: 175px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page.teacher-page .table-con .t-table .t-table__header .stu-name a,
  .page.teacher-page .table-con .t-table .t-table__body--item .stu-name a {
    width: 10vw;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page.teacher-page .table-con .t-table .t-table__header .stu-name a,
  .page.teacher-page .table-con .t-table .t-table__body--item .stu-name a {
    width: 22vw;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page.teacher-page .table-con .t-table .t-table__header .stu-name a,
  .page.teacher-page .table-con .t-table .t-table__body--item .stu-name a {
    width: 10vw;
  }
}
.page.teacher-page .table-con .t-table .t-table__header .stu-email a,
.page.teacher-page .table-con .t-table .t-table__body--item .stu-email a {
  width: 175px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page.teacher-page .table-con .t-table .t-table__header .stu-email a,
  .page.teacher-page .table-con .t-table .t-table__body--item .stu-email a {
    width: 10vw;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page.teacher-page .table-con .t-table .t-table__header .stu-email a,
  .page.teacher-page .table-con .t-table .t-table__body--item .stu-email a {
    width: 22vw;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page.teacher-page .table-con .t-table .t-table__header .stu-email a,
  .page.teacher-page .table-con .t-table .t-table__body--item .stu-email a {
    width: 10vw;
  }
}
.page.teacher-page .table-con .t-table .t-table__header p,
.page.teacher-page .table-con .t-table .t-table__header .unit,
.page.teacher-page .table-con .t-table .t-table__body--item p,
.page.teacher-page .table-con .t-table .t-table__body--item .unit {
  min-height: 40px;
}
.page.teacher-page .table-con .t-table .t-table__header > div,
.page.teacher-page .table-con .t-table .t-table__body--item > div {
  min-height: 52px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.teacher-page .table-con .t-table .t-table__header > div,
  .page.teacher-page .table-con .t-table .t-table__body--item > div {
    min-height: 40px;
  }
}
.page.teacher-page .table-con .t-table .t-table__header {
  color: #658FA1;
  font-size: 16.5px;
  background-color: #FAFAFA;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page.teacher-page .table-con .t-table .t-table__header {
    font-size: 14px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.teacher-page .table-con .t-table .t-table__header {
    font-size: 12px;
  }
}
.page.teacher-page .table-con .t-table .t-table__header > div {
  flex-direction: column;
}
.page.teacher-page .table-con .t-table .t-table__body--item {
  font-size: 16.5px;
  background: #fff;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page.teacher-page .table-con .t-table .t-table__body--item {
    font-size: 14px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.teacher-page .table-con .t-table .t-table__body--item {
    font-size: 14px;
  }
}
.page.teacher-page .table-con .t-table .t-table__body--item .btn {
  width: 90%;
  max-width: 70px;
  min-width: 0;
  height: 34px;
  font-size: 13px;
  font-weight: 400;
  border-radius: 7px;
  color: #fff;
  margin: 0 auto;
}
.page.teacher-page .table-con .t-table .t-table__body--item .btn.btn--pink {
  background: #FF60AA;
}
.page.teacher-page .table-con .t-table .t-table__body--item .btn.btn--green {
  background: #FF9800;
}
.page.teacher-page .table-con .t-table .t-table__body--item .btn.btn--orange {
  background: #59BF2B;
}
.page.teacher-page .table-con .t-table .t-table__body--item .btn.btn--delete {
  background: none;
  color: red;
  font-size: 1.6rem;
  text-decoration: underline;
  font-weight: 400;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.teacher-page .table-con .t-table .t-table__body--item .btn {
    border-radius: 5px;
  }
}

.page.teacher-page.manage-teacher .t-table__header,
.page.teacher-page.manage-class .t-table__header,
.notice-con .t-table__header,
.qna-con .t-table__header {
  border-top: 1px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
}
.page.teacher-page.manage-teacher .t-table__body--item,
.page.teacher-page.manage-class .t-table__body--item,
.notice-con .t-table__body--item,
.qna-con .t-table__body--item {
  border-bottom: 1px solid #e2e2e2;
}

.manage-class .tit-icon {
  background: url("/assets/images/icon/ic_manage-tit-19affef7e6662d306e23d6bc09395dc5.png") no-repeat center center/100%;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .manage-class .action-con {
    justify-content: space-between !important;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .manage-class.t .action-con {
    justify-content: right !important;
  }
}
.manage-class .table-con .t-table .t-table__header,
.manage-class .table-con .t-table .t-table__body--item {
  grid-template-columns: 1fr 3fr 150px 1fr 130px 130px 130px 1fr 2fr 80px;
}
.manage-class .table-con .num {
  padding-right: 0;
}

.class-detail .tit-icon {
  background: url("/assets/images/icon/ic_datails-tit-6e119dcc4dc50bc1716c5d3141fffffd.png") no-repeat center center/100%;
}
.class-detail .table-con {
  border-radius: 10px;
  overflow: hidden;
}
.class-detail .table-con .t-table {
  border: 1px solid #D1EDFA;
}
.class-detail .table-con .t-table:last-child {
  border: none;
}
.class-detail .table-con .t-table .t-table__header > div,
.class-detail .table-con .t-table .t-table__body--item > div {
  border-right: 1px solid #D1EDFA;
  border-bottom: 1px solid #D1EDFA;
  height: 100%;
}
.class-detail .table-con .t-table .t-table__header > div:last-of-type,
.class-detail .table-con .t-table .t-table__body--item > div:last-of-type {
  border-right: none;
}
.class-detail .table-con .t-table .t-table__class-info {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 22px 40px;
  border-bottom: 1px solid #D1EDFA;
  position: relative;
}
.class-detail .table-con .t-table .t-table__class-info .class-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  font-size: 1.8rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.class-detail .table-con .t-table .t-table__class-info .class-info .t-table__class-info--name {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.class-detail .table-con .t-table .t-table__class-info .class-info .t-table__class-info--desc {
  color: #426372;
}
.class-detail .table-con .t-table .t-table__class-info .class-info .t-table__class-info--desc i {
  margin: 0 8px;
  font-style: normal;
}
.class-detail .table-con .t-table .t-table__class-info .class-info .t-table__class-info--desc span {
  color: #02abf2;
  font-weight: 500;
}
.class-detail .table-con .t-table .t-table__header,
.class-detail .table-con .t-table .t-table__body--item {
  border: none;
  grid-template-columns: 64px 200px 1fr 100px 100px 100px;
}
.class-detail .table-con .t-table.print .t-table__header,
.class-detail .table-con .t-table.print .t-table__body--item {
  border: none;
  grid-template-columns: 64px 200px 1fr 100px 100px;
}
.class-detail .table-con .t-table .t-table__header {
  color: #426372;
  font-size: 1.5rem;
}
.class-detail .table-con .t-table .t-table__header .process {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 !important;
}
.class-detail .table-con .t-table .t-table__header .process p {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #D1EDFA;
}
.class-detail .table-con .t-table .t-table__header .process .unit {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.class-detail .table-con .t-table .t-table__header .process .unit span {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: #E8F8FF;
  border-right: 1px solid #D1EDFA;
}
.class-detail .table-con .t-table .t-table__header .process .unit span:first-child {
  border-left: 1px solid #D1EDFA;
}
.class-detail .table-con .t-table .t-table__header .process .unit span:last-child {
  border: none;
}
.class-detail .table-con .t-table .t-table__header .unit {
  color: #658FA1;
}
.class-detail .table-con .t-table .t-table__body--item {
  min-height: 60px;
}
.class-detail .table-con .t-table .t-table__body--item:last-child > div {
  border-bottom: none !important;
}
.class-detail .table-con .t-table .t-table__body--item .stu-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-direction: column !important;
}
.class-detail .table-con .t-table .t-table__body--item .stu-info .stu-name {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.2;
}
.class-detail .table-con .t-table .t-table__body--item .stu-info .stu-email {
  color: #658FA1;
}
.class-detail .table-con .t-table .t-table__body--item .stu-score {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: #FFFAEB;
}
.class-detail .table-con .t-table .t-table__body--item .stu-score span {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #D1EDFA;
}
.class-detail .table-con .t-table .t-table__body--item .stu-score span:last-child {
  border: none;
}
.class-detail .table-con .t-table .t-table__body--item .stu-status {
  color: #02abf2;
}
.class-detail .table-con .btn-con {
  margin-top: 20px;
  justify-content: right;
}
.class-detail .table-con .btn-con .btn {
  height: 46px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .class-detail .table-con .btn-con .btn {
    height: 43px;
  }
}
.class-detail .table-con .num {
  padding-right: 0;
}

.manage-teacher .tit-icon {
  background: url("/assets/images/icon/ic_manage-teacher-tit-0dbe8fad3272b89ef6744cb4f646e608.png") no-repeat center center/100%;
}
.manage-teacher .search-input {
  max-width: 250px;
  right: 0;
}
.manage-teacher .table-con .t-table .t-table__header,
.manage-teacher .table-con .t-table .t-table__body--item {
  grid-template-columns: 100px 3fr 3fr 150px 150px 120px 150px;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .manage-teacher .table-con .t-table .t-table__header,
  .manage-teacher .table-con .t-table .t-table__body--item {
    grid-template-columns: 60px 3fr 3fr 130px 130px 100px 130px;
  }
}
.manage-teacher .table-con .t-table .t-table__header .num {
  justify-content: center;
}
.manage-teacher .table-con .t-table .t-table__body--item .num {
  justify-content: center !important;
}
.manage-teacher .table-con .t-table .t-table__body--item .status {
  color: #426372;
}
.manage-teacher .table-con .t-table .t-table__body--item .status.active {
  color: #02abf2;
}
.manage-teacher .table-con .num {
  padding-right: 2rem;
}

.page.reports .tit-icon {
  background: url("/assets/images/icon/ic_detail-tit-50e753c5652b1375a01fe34dfae14453.png") no-repeat center center/100%;
}
.page.reports .main-tit {
  padding-bottom: 20px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.reports .action-con {
    transform: translateY(-10px);
  }
}
.page.reports .action-con .select-box {
  width: 200px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.reports .action-con .select-box {
    width: 120px;
    height: 40px;
    padding: 6px 2rem;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page.reports .action-con .select-box {
    width: 160px;
    height: 40px;
    padding: 6px 2rem;
  }
}
.page.reports .page__container--inner {
  gap: 24px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.reports .page__container--inner {
    gap: 12px;
  }
}
.page.reports .table-con {
  padding-top: 0 !important;
}
.page.reports .table-con .t-table {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
  border: 1px solid #D1EDFA;
  border-bottom: none;
}
.page.reports .table-con .t-table .stu-info {
  padding: 16px 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-bottom: none;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.reports .table-con .t-table .stu-info {
    padding: 16px;
  }
}
.page.reports .table-con .t-table .stu-info .tit {
  width: 50%;
  text-align: right;
}
.page.reports .table-con .t-table .stu-info .learning-info {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}
.page.reports .table-con .t-table .stu-info .learning-info > div {
  padding-left: 3.2rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.page.reports .table-con .t-table .stu-info .learning-info > div .label {
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 0;
  color: #426372;
  margin-right: 8px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.reports .table-con .t-table .stu-info .learning-info > div .label {
    font-size: 14px;
  }
}
.page.reports .table-con .t-table .stu-info .learning-info > div h5 {
  font-size: 2.2rem;
}
.page.reports .table-con .t-table .stu-info .learning-info > div .score {
  color: #426372;
  padding: 1rem 2rem;
  background: #FAFAFA;
  border: 1px solid #D1EDFA;
  border-radius: 1.5rem;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
}
.page.reports .table-con .t-table .stu-info .learning-info > div .score .emph-txt {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: #02abf2;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.reports .table-con .t-table .stu-info .learning-info > div .score .emph-txt {
    font-size: 22px;
  }
}
.page.reports .table-con .t-table .stu-info .learning-info .learning-info__unit {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.page.reports .table-con .t-table .navigator {
  width: 100%;
  text-align: left;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1;
  padding: 18px 30px;
  border-top: 1px solid #D1EDFA;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.reports .table-con .t-table .navigator {
    padding: 12px;
  }
}
.page.reports .table-con .t-table .t-table__header,
.page.reports .table-con .t-table .t-table__body--item {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 80px 120px;
  border-bottom: none;
}
.page.reports .table-con .t-table .t-table__header {
  color: #000 !important;
  background: #fff;
  border-color: #D1EDFA;
  border-top: 1px solid #D1EDFA;
}
.page.reports .table-con .t-table .t-table__header .stu-name {
  background: #FAFAFA;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
}
.page.reports .table-con .t-table .t-table__header > div {
  border-right: 1px solid #D1EDFA;
  border-bottom: 1px solid #D1EDFA;
}
.page.reports .table-con .t-table .t-table__header > div:last-child {
  border-right: none;
}
.page.reports .table-con .t-table .t-table__body--item {
  border: none;
}
.page.reports .table-con .t-table .t-table__body--item > div {
  border-right: 1px solid #D1EDFA;
  border-bottom: 1px solid #D1EDFA;
}
.page.reports .table-con .t-table .t-table__body .cate {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.page.reports .table-con .t-table .t-table__body .cate > div {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.page.reports .table-con .t-table .t-table__body .cate .unit {
  color: #E57200;
  background: #FFFAEB;
}
.page.reports .table-con .t-table .t-table__body .cate .unit-info {
  color: #426372;
  background: #FAFAFA;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 80px;
}
.page.reports .table-con .t-table .t-table__body .cate .unit-info span {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.page.reports .table-con .t-table .t-table__body .act-score {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.page.reports .table-con .t-table .t-table__body .act-score > span {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.page.reports .table-con .t-table .t-table__body .act-score > span:first-child {
  color: #02abf2;
  background: #E8F8FF;
}
.page.reports .table-con .t-table .t-table__body .check img {
  display: none;
}
.page.reports .table-con .t-table .t-table__body .check.complete img {
  display: block;
}
.page.reports .table-con .t-table .t-table__body .questions {
  color: #E183AE;
  background: #FFF0F7;
}
.page.reports .table-con .t-table .t-table__body .questions .complete-q {
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.2;
  color: #FF00B2;
}
.page.reports .table-con .t-table .t-table__body .questions .total-q {
  padding-top: 5px;
}
.page.reports .table-con .t-table .t-table__body .btn.btn-view {
  width: 88px;
  max-width: none;
}
.page.reports .table-con .t-table .t-table__body .view-btn-con {
  border-right: none;
}
.page.reports .table-con .t-table .title {
  padding: 16px 30px;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.reports .table-con .t-table .title {
    padding: 16px;
  }
}
.page.reports .table-con .t-table .comment-con .t-table__body {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page.reports .table-con .t-table .comment-con .t-table__body {
    display: block;
  }
}
.page.reports .table-con .t-table .comment-con .t-table__body--item {
  display: block;
  padding: 12px 4px 12px 3rem;
  background: #FAFAFA;
  border-top: 1px solid #D1EDFA;
  border-bottom: 1px solid #D1EDFA;
  border-right: 1px solid #D1EDFA;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page.reports .table-con .t-table .comment-con .t-table__body--item {
    padding-left: 12px;
  }
}
.page.reports .table-con .t-table .comment-con .t-table__body--item:last-child {
  border-right: none;
}
.page.reports .table-con .t-table .comment-con .t-table__body--item .check-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  justify-content: start;
  gap: 10px;
  color: #426372;
  cursor: pointer;
  margin-bottom: 0;
}
.page.reports .table-con .t-table .comment-con .t-table__body--item .check-box input[type=checkbox] {
  display: none;
}
.page.reports .table-con .t-table .comment-con .t-table__body--item .check-box input:checked + .check-mark {
  background: #02abf2 url("/assets/images/icon/ic_check-6a764181e45eba586accc31295abe29b.svg") no-repeat center center;
}
.page.reports .table-con .t-table .comment-con .t-table__body--item .check-box .check-mark {
  display: block;
  width: 24px;
  height: 24px;
  border: 1px solid #6bcff6;
  border-radius: 5px;
  background: #fff;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.reports .table-con .t-table .comment-con .t-table__body--item .check-box .check-mark {
    width: 20px;
    height: 20px;
  }
}
.page.reports .table-con .t-table .comment-con .comment-box {
  padding: 24px 30px;
  background: #FAFAFA;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page.reports .table-con .t-table .comment-con .comment-box {
    padding: 12px;
  }
}
.page.reports .table-con .t-table .comment-con .comment-box textarea {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
  border-color: #D1EDFA;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page.reports .table-con.stu .t-table {
    min-width: initial;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page.reports .table-con.stu .stu-info .learning-info {
    flex-direction: column;
    gap: 8px;
  }
}
.page.reports .table-con.report-data, .page.reports .table-con.unit-report-data {
  overflow-x: scroll;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page.reports .table-con.report-data .t-table, .page.reports .table-con.unit-report-data .t-table {
    min-width: 200vw;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page.reports .table-con.unit-activities {
    overflow-x: auto;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page.reports .table-con.unit-activities .t-table {
    min-width: 150vw;
  }
}
.page.reports .table-con.unit-activities .practice-con .t-table__header,
.page.reports .table-con.unit-activities .practice-con .t-table__body--item {
  grid-template-columns: repeat(8, 1fr);
}
.page.reports .table-con.unit-activities .practice-con .t-table__header {
  border-color: #D1EDFA;
  background: #FAFAFA !important;
}
.page.reports .table-con.unit-activities .practice-con .t-table__header > div {
  min-height: 34px;
  color: #426372;
}
.page.reports .table-con.unit-activities .practice-con .t-table__header .empty {
  border-right: none;
}

.page.notice-list .page__container--inner {
  gap: 30px;
  padding-top: 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page.notice-list .page__container--inner {
    gap: 0;
  }
}
.page.notice-list .page__container--inner > div {
  width: 100%;
}
.page.notice-list .page__container--inner .notice-con .page__main-tit {
  padding: 3.5rem 0;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.notice-list .page__container--inner .notice-con .page__main-tit {
    padding: 2rem 0;
  }
}
.page.notice-list .page__container--inner .notice-con .tit-icon {
  background: url("/assets/images/icon/ic_notice-tit-6f233b0642b00355978bbc2cbe22f0c2.png") no-repeat center center/100%;
  position: absolute;
  left: 50%;
  transform: translateX(-16rem);
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.notice-list .page__container--inner .notice-con .tit-icon {
    transform: translateX(-85px);
  }
}
.page.notice-list .page__container--inner .notice-con .table-con {
  margin-bottom: 2.4rem;
}
.page.notice-list .page__container--inner .notice-con .table-con .t-table .t-table__header,
.page.notice-list .page__container--inner .notice-con .table-con .t-table .t-table__body--item {
  grid-template-columns: 1.5fr 10fr 2fr 130px;
}
.page.notice-list .page__container--inner .notice-con .table-con .t-table .t-table__body {
  max-height: 520px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.notice-list .page__container--inner .notice-con .table-con .t-table .t-table__body {
    max-height: 400px;
  }
}
.page.notice-list .page__container--inner .notice-con .table-con .t-table .t-table__body .item-group {
  scroll-snap-align: start;
}
.page.notice-list .page__container--inner .notice-con .table-con .t-table .t-table__body .t-table__body--item {
  height: 52px;
  cursor: pointer;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.notice-list .page__container--inner .notice-con .table-con .t-table .t-table__body .t-table__body--item {
    height: 40px;
  }
}
.page.notice-list .page__container--inner .notice-con .table-con .t-table .t-table__body .t-table__body--item > div {
  justify-content: left;
}
.page.notice-list .page__container--inner .notice-con .table-con .t-table .t-table__body .t-table__body--item .num {
  justify-content: center;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page.notice-list .page__container--inner .qna-con {
    padding-top: 0 !important;
  }
}
.page.notice-list .page__container--inner .qna-con .page__main-tit {
  padding: 3.5rem 0;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.notice-list .page__container--inner .qna-con .page__main-tit {
    padding: 2rem 0;
  }
}
.page.notice-list .page__container--inner .qna-con .table-con {
  margin-bottom: 2.4rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.notice-list .page__container--inner .qna-con .table-con {
    padding: 0;
  }
}
.page.notice-list .page__container--inner .qna-con .table-con .t-table .t-table__header,
.page.notice-list .page__container--inner .qna-con .table-con .t-table .t-table__body--item {
  grid-template-columns: 1.5fr 10fr 3fr 3fr;
}
.page.notice-list .page__container--inner .qna-con .table-con .t-table .t-table__header {
  border-bottom: 1px solid #D1EDFA;
}
.page.notice-list .page__container--inner .qna-con .table-con .t-table .t-table__header .subject {
  padding-left: 70px;
}
.page.notice-list .page__container--inner .qna-con .table-con .t-table .t-table__body {
  max-height: 500px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}
.page.notice-list .page__container--inner .qna-con .table-con .t-table .t-table__body .item-group {
  scroll-snap-align: start;
}
.page.notice-list .page__container--inner .qna-con .table-con .t-table .t-table__body--item {
  border-bottom: none;
  cursor: pointer;
}
.page.notice-list .page__container--inner .qna-con .table-con .t-table .t-table__body--item > div {
  height: 100%;
  border-right: 1px solid #D1EDFA;
  border-bottom: 1px solid #D1EDFA;
}
.page.notice-list .page__container--inner .qna-con .table-con .t-table .t-table__body--item .con-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
}
.page.notice-list .page__container--inner .qna-con .table-con .t-table .t-table__body--item .con-box > div {
  min-height: 52px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.notice-list .page__container--inner .qna-con .table-con .t-table .t-table__body--item .con-box > div {
    min-height: 40px;
  }
}
.page.notice-list .page__container--inner .qna-con .table-con .t-table .t-table__body--item .con-box .question .cate {
  background: #FFF0F7;
  color: #FF60AA;
}
.page.notice-list .page__container--inner .qna-con .table-con .t-table .t-table__body--item .con-box .answer {
  border-top: 1px solid #D1EDFA;
}
.page.notice-list .page__container--inner .qna-con .table-con .t-table .t-table__body--item .con-box .answer .cate {
  background: #E8F8FF;
  color: #02abf2;
}
.page.notice-list .page__container--inner .qna-con .table-con .t-table .t-table__body--item .con-box > div {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  flex: 1;
}
.page.notice-list .page__container--inner .qna-con .table-con .t-table .t-table__body--item .con-box > div .cate {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 100%;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  border-right: 1px solid #D1EDFA;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.notice-list .page__container--inner .qna-con .table-con .t-table .t-table__body--item .con-box > div .cate {
    height: 40px;
  }
}
.page.notice-list .page__container--inner .qna-con .table-con .t-table .t-table__body--item .con-box > div .title {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-left: 20px;
}
.page.notice-list .page__container--inner .qna-con .table-con .t-table .t-table__body--item .name,
.page.notice-list .page__container--inner .qna-con .table-con .t-table .t-table__body--item .date {
  font-size: 1.5rem;
  color: #426372;
}
.page.notice-list .page__container--inner .qna-con .table-con .t-table .t-table__body--item .name {
  flex-direction: column;
}
.page.notice-list .page__container--inner .qna-con .table-con .t-table .t-table__body--item .name div {
  width: 100%;
  min-height: 52px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.2;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.notice-list .page__container--inner .qna-con .table-con .t-table .t-table__body--item .name div {
    min-height: 40px;
  }
}
.page.notice-list .page__container--inner .qna-con .table-con .t-table .t-table__body--item .name div.tea-name {
  border-top: 1px solid #D1EDFA;
}
.page.notice-list .page__container--inner .qna-con .table-con .num {
  padding-right: 0;
}

@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .notice-view .page__container,
  .qna-view .page__container,
  .notice-create .page__container,
  .notice-edit .page__container,
  .qna-create .page__container,
  .profile-form .page__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
.notice-view .page__container--inner,
.qna-view .page__container--inner,
.notice-create .page__container--inner,
.notice-edit .page__container--inner,
.qna-create .page__container--inner,
.profile-form .page__container--inner {
  padding-top: 90px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .notice-view .page__container--inner,
  .qna-view .page__container--inner,
  .notice-create .page__container--inner,
  .notice-edit .page__container--inner,
  .qna-create .page__container--inner,
  .profile-form .page__container--inner {
    width: 100%;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .notice-view .page__container--inner,
  .qna-view .page__container--inner,
  .notice-create .page__container--inner,
  .notice-edit .page__container--inner,
  .qna-create .page__container--inner,
  .profile-form .page__container--inner {
    padding-top: 24px;
  }
}
.notice-view .page__container .notice-form,
.notice-view .page__container .qna-form,
.qna-view .page__container .notice-form,
.qna-view .page__container .qna-form,
.notice-create .page__container .notice-form,
.notice-create .page__container .qna-form,
.notice-edit .page__container .notice-form,
.notice-edit .page__container .qna-form,
.qna-create .page__container .notice-form,
.qna-create .page__container .qna-form,
.profile-form .page__container .notice-form,
.profile-form .page__container .qna-form {
  width: 100%;
  max-width: 722px;
  border-radius: 10px;
  background: #fff url("/assets/images/modal/bg_modal-b2336a3e37ddaeb177951f00e7c90662.png") no-repeat center -100px/100% auto;
  padding: 20px 40px 32px;
}
.notice-view .page__container .notice-form .page__main-tit,
.notice-view .page__container .qna-form .page__main-tit,
.qna-view .page__container .notice-form .page__main-tit,
.qna-view .page__container .qna-form .page__main-tit,
.notice-create .page__container .notice-form .page__main-tit,
.notice-create .page__container .qna-form .page__main-tit,
.notice-edit .page__container .notice-form .page__main-tit,
.notice-edit .page__container .qna-form .page__main-tit,
.qna-create .page__container .notice-form .page__main-tit,
.qna-create .page__container .qna-form .page__main-tit,
.profile-form .page__container .notice-form .page__main-tit,
.profile-form .page__container .qna-form .page__main-tit {
  margin-bottom: 3.2rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .notice-view .page__container .notice-form,
  .notice-view .page__container .qna-form,
  .qna-view .page__container .notice-form,
  .qna-view .page__container .qna-form,
  .notice-create .page__container .notice-form,
  .notice-create .page__container .qna-form,
  .notice-edit .page__container .notice-form,
  .notice-edit .page__container .qna-form,
  .qna-create .page__container .notice-form,
  .qna-create .page__container .qna-form,
  .profile-form .page__container .notice-form,
  .profile-form .page__container .qna-form {
    padding: 20px 20px 24px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .notice-view .page__container .notice-form,
  .notice-view .page__container .qna-form,
  .qna-view .page__container .notice-form,
  .qna-view .page__container .qna-form,
  .notice-create .page__container .notice-form,
  .notice-create .page__container .qna-form,
  .notice-edit .page__container .notice-form,
  .notice-edit .page__container .qna-form,
  .qna-create .page__container .notice-form,
  .qna-create .page__container .qna-form,
  .profile-form .page__container .notice-form,
  .profile-form .page__container .qna-form {
    background-position: center -30px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .notice-view .page__container .notice-form,
  .notice-view .page__container .qna-form,
  .qna-view .page__container .notice-form,
  .qna-view .page__container .qna-form,
  .notice-create .page__container .notice-form,
  .notice-create .page__container .qna-form,
  .notice-edit .page__container .notice-form,
  .notice-edit .page__container .qna-form,
  .qna-create .page__container .notice-form,
  .qna-create .page__container .qna-form,
  .profile-form .page__container .notice-form,
  .profile-form .page__container .qna-form {
    background-position: center -110px;
  }
}
.notice-view .page__container .btn-con,
.qna-view .page__container .btn-con,
.notice-create .page__container .btn-con,
.notice-edit .page__container .btn-con,
.qna-create .page__container .btn-con,
.profile-form .page__container .btn-con {
  gap: 1.5rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .notice-view .page__container .btn-con,
  .qna-view .page__container .btn-con,
  .notice-create .page__container .btn-con,
  .notice-edit .page__container .btn-con,
  .qna-create .page__container .btn-con,
  .profile-form .page__container .btn-con {
    gap: 12px;
  }
}

.notice-view .page__container .notice-form .notice-con .info,
.notice-view .page__container .notice-form .qna-con .info,
.notice-view .page__container .qna-form .notice-con .info,
.notice-view .page__container .qna-form .qna-con .info,
.qna-view .page__container .notice-form .notice-con .info,
.qna-view .page__container .notice-form .qna-con .info,
.qna-view .page__container .qna-form .notice-con .info,
.qna-view .page__container .qna-form .qna-con .info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-items: start;
  gap: 10px;
  text-align: left;
}
.notice-view .page__container .notice-form .notice-con .info > div,
.notice-view .page__container .notice-form .qna-con .info > div,
.notice-view .page__container .qna-form .notice-con .info > div,
.notice-view .page__container .qna-form .qna-con .info > div,
.qna-view .page__container .notice-form .notice-con .info > div,
.qna-view .page__container .notice-form .qna-con .info > div,
.qna-view .page__container .qna-form .notice-con .info > div,
.qna-view .page__container .qna-form .qna-con .info > div {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-items: start;
}
.notice-view .page__container .notice-form .notice-con .info .tit,
.notice-view .page__container .notice-form .qna-con .info .tit,
.notice-view .page__container .qna-form .notice-con .info .tit,
.notice-view .page__container .qna-form .qna-con .info .tit,
.qna-view .page__container .notice-form .notice-con .info .tit,
.qna-view .page__container .notice-form .qna-con .info .tit,
.qna-view .page__container .qna-form .notice-con .info .tit,
.qna-view .page__container .qna-form .qna-con .info .tit {
  font-size: 1.7rem;
  display: flex;
  gap: 12px;
  align-items: center;
}
.notice-view .page__container .notice-form .notice-con .info .tit .mark,
.notice-view .page__container .notice-form .qna-con .info .tit .mark,
.notice-view .page__container .qna-form .notice-con .info .tit .mark,
.notice-view .page__container .qna-form .qna-con .info .tit .mark,
.qna-view .page__container .notice-form .notice-con .info .tit .mark,
.qna-view .page__container .notice-form .qna-con .info .tit .mark,
.qna-view .page__container .qna-form .notice-con .info .tit .mark,
.qna-view .page__container .qna-form .qna-con .info .tit .mark {
  width: 34px;
  height: 34px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #eee;
  font-size: 1.8rem;
  font-weight: 700;
}
.notice-view .page__container .notice-form .notice-con .info .tit .mark.mark-q,
.notice-view .page__container .notice-form .qna-con .info .tit .mark.mark-q,
.notice-view .page__container .qna-form .notice-con .info .tit .mark.mark-q,
.notice-view .page__container .qna-form .qna-con .info .tit .mark.mark-q,
.qna-view .page__container .notice-form .notice-con .info .tit .mark.mark-q,
.qna-view .page__container .notice-form .qna-con .info .tit .mark.mark-q,
.qna-view .page__container .qna-form .notice-con .info .tit .mark.mark-q,
.qna-view .page__container .qna-form .qna-con .info .tit .mark.mark-q {
  color: #FF60AA;
  background: #FFF0F7;
}
.notice-view .page__container .notice-form .notice-con .info .tit .mark.mark-a,
.notice-view .page__container .notice-form .qna-con .info .tit .mark.mark-a,
.notice-view .page__container .qna-form .notice-con .info .tit .mark.mark-a,
.notice-view .page__container .qna-form .qna-con .info .tit .mark.mark-a,
.qna-view .page__container .notice-form .notice-con .info .tit .mark.mark-a,
.qna-view .page__container .notice-form .qna-con .info .tit .mark.mark-a,
.qna-view .page__container .qna-form .notice-con .info .tit .mark.mark-a,
.qna-view .page__container .qna-form .qna-con .info .tit .mark.mark-a {
  color: #02abf2;
  background: #E8F8FF;
}
.notice-view .page__container .notice-form .notice-con .info .info-detail,
.notice-view .page__container .notice-form .qna-con .info .info-detail,
.notice-view .page__container .qna-form .notice-con .info .info-detail,
.notice-view .page__container .qna-form .qna-con .info .info-detail,
.qna-view .page__container .notice-form .notice-con .info .info-detail,
.qna-view .page__container .notice-form .qna-con .info .info-detail,
.qna-view .page__container .qna-form .notice-con .info .info-detail,
.qna-view .page__container .qna-form .qna-con .info .info-detail {
  font-size: 1.5rem;
  color: #658FA1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
  font-weight: 500;
}
.notice-view .page__container .notice-form .notice-con .info .info-detail .date,
.notice-view .page__container .notice-form .qna-con .info .info-detail .date,
.notice-view .page__container .qna-form .notice-con .info .info-detail .date,
.notice-view .page__container .qna-form .qna-con .info .info-detail .date,
.qna-view .page__container .notice-form .notice-con .info .info-detail .date,
.qna-view .page__container .notice-form .qna-con .info .info-detail .date,
.qna-view .page__container .qna-form .notice-con .info .info-detail .date,
.qna-view .page__container .qna-form .qna-con .info .info-detail .date {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
}
.notice-view .page__container .notice-form .a-con,
.notice-view .page__container .qna-form .a-con,
.qna-view .page__container .notice-form .a-con,
.qna-view .page__container .qna-form .a-con {
  margin-top: 4rem;
}

.line {
  display: block;
  width: 100%;
  height: 1px;
  background: #e2e2e2;
  margin: 1.6rem 0 2.8rem;
}

.my-page {
  max-width: 600px;
}
.my-page .my-page-con {
  background: #fff;
  padding: 1px 3.2rem 3.2rem;
  border-radius: 10px;
}
.my-page > div {
  margin-top: 3rem;
}
.my-page .my-page--item {
  margin-bottom: 2.4rem;
}
.my-page .btn {
  height: 53px;
}
.my-page h4 {
  text-align: center;
  margin: 30px 0 50px;
  font-size: 2.8rem;
}
.my-page input {
  margin-bottom: 0;
}
.my-page .email-con,
.my-page .re-pwd-con {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.my-page .email-con > div,
.my-page .re-pwd-con > div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.my-page .email-con select,
.my-page .re-pwd-con select {
  margin-bottom: 0;
}
.my-page .email-con input,
.my-page .re-pwd-con input {
  margin-bottom: 0;
}
.my-page .email-con .btn-email,
.my-page .email-con .btn-re-pwd,
.my-page .re-pwd-con .btn-email,
.my-page .re-pwd-con .btn-re-pwd {
  width: 80px;
  color: #FF60AA;
  border: 1.5px solid #C6DBE5;
}
.my-page .email-con .btn-email:hover,
.my-page .email-con .btn-re-pwd:hover,
.my-page .re-pwd-con .btn-email:hover,
.my-page .re-pwd-con .btn-re-pwd:hover {
  background: #FF60AA;
  color: #fff;
  border-color: #FF60AA;
}
.my-page .re-pwd-con input {
  width: calc(100% - 86px);
}
.my-page select {
  background: #fff url("/assets/images/icon/btn_arrow-select-b6a7d6e86dabcff0bfac897c3bedf67b.svg") no-repeat 95% center;
  padding-right: 30px;
}
.my-page .withdrawal-con {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 15px !important;
}
.my-page .withdrawal-con p {
  width: calc(100% - 86px);
}
.my-page .withdrawal-con .btn-withdrawal {
  width: 80px;
  border: 1.5px solid #C6DBE5;
  background: #eee;
  font-size: 15px;
  color: #426372 !important;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .my-page .withdrawal-con p {
    font-size: 14px !important;
  }
  .my-page .withdrawal-con .btn-withdrawal {
    color: #FF60AA;
    border: 1.5px solid #C6DBE5;
    font-size: 14px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .my-page .withdrawal-con p {
    font-size: 12.5px !important;
  }
}
.my-page .btn-con {
  margin-top: 30px;
}
.my-page .class-name {
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}
.my-page .class-code {
  width: fit-content;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.2;
  color: #FF60AA;
  text-align: center;
  background: #fff;
  margin: 10px auto 0;
  padding: 10px;
  border: 3px solid #FFF0F7;
  border-radius: 10px;
}
.my-page .mybook-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
.my-page .mybook-list__img-box {
  position: relative;
}
.my-page .mybook-list__level {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 100px;
  padding: 10px 20px;
  border: 3px solid #FF60AA;
  white-space: nowrap;
}
.my-page .mybook-list__code {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.2;
  margin-top: 40px;
}

.notice-list .btn,
.notice-create .btn,
.notice-edit .btn,
.notice-view .btn,
.qna-view .btn,
.qna-create .btn,
.unit-reports .btn {
  min-width: 140px;
  height: 46px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .notice-list .btn,
  .notice-create .btn,
  .notice-edit .btn,
  .notice-view .btn,
  .qna-view .btn,
  .qna-create .btn,
  .unit-reports .btn {
    min-width: 90px;
    height: 43px;
  }
}

.btn-con {
  gap: 1.5rem;
}
.btn-con a,
.btn-con button {
  width: 135px;
  height: 34px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .btn-con a,
  .btn-con button {
    width: 120px;
  }
}

.table-con ~ .btn-con a,
.table-con ~ .btn-con button {
  height: 46px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .table-con ~ .btn-con a,
  .table-con ~ .btn-con button {
    height: 43px;
  }
}

.error-txt {
  font-size: 12px;
  color: #F91D1D;
  margin: 6px 0 20px;
}

.t-left {
  flex-direction: row !important;
  justify-content: left !important;
  text-align: left !important;
}

.f-pretendard {
  font-family: "Pretendard", sans-serif !important;
}

@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.manage-teacher .page__main-tit,
  .page.manage-class .page__main-tit,
  .page.class-detail .page__main-tit,
  .page.notice-list .page__main-tit,
  .page.reports .page__main-tit {
    font-size: 22px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.manage-teacher .page__main-tit .tit-icon,
  .page.manage-class .page__main-tit .tit-icon,
  .page.class-detail .page__main-tit .tit-icon,
  .page.notice-list .page__main-tit .tit-icon,
  .page.reports .page__main-tit .tit-icon {
    width: 51px;
    height: 51px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page.manage-teacher .search-input input,
  .page.manage-class .search-input input,
  .page.class-detail .search-input input,
  .page.notice-list .search-input input,
  .page.reports .search-input input {
    height: 38px;
    padding: 7.5px 36px 7.5px 10px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.manage-teacher .search-input input,
  .page.manage-class .search-input input,
  .page.class-detail .search-input input,
  .page.notice-list .search-input input,
  .page.reports .search-input input {
    height: 30px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.manage-teacher .search-input .btn-search,
  .page.manage-class .search-input .btn-search,
  .page.class-detail .search-input .btn-search,
  .page.notice-list .search-input .btn-search,
  .page.reports .search-input .btn-search {
    right: 10px;
    width: 12px;
    height: 12px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.manage-teacher .btn-modal.btn-primary,
  .page.manage-class .btn-modal.btn-primary,
  .page.class-detail .btn-modal.btn-primary,
  .page.notice-list .btn-modal.btn-primary,
  .page.reports .btn-modal.btn-primary {
    height: 30px;
    min-width: 90px;
    padding: 6px 10px;
    font-size: 12px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page.manage-teacher .table-con .t-table,
  .page.manage-class .table-con .t-table,
  .page.class-detail .table-con .t-table,
  .page.notice-list .table-con .t-table,
  .page.reports .table-con .t-table {
    grid-auto-flow: column;
    min-width: 200vw;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.manage-teacher .table-con .t-table .t-table__body .btn,
  .page.manage-class .table-con .t-table .t-table__body .btn,
  .page.class-detail .table-con .t-table .t-table__body .btn,
  .page.notice-list .table-con .t-table .t-table__body .btn,
  .page.reports .table-con .t-table .t-table__body .btn {
    width: 60px;
    height: 30px;
  }
}

@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page.manage-class .page__main-tit {
    margin-bottom: 10px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page.manage-class .page__main-tit {
    margin-top: 15px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.manage-class .search-input {
    justify-content: left;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page.manage-class .btn-create-class {
    right: 0;
    top: 110px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page.manage-class .btn-create-class {
    right: 0;
    top: 90px;
  }
}
.page.manage-class .t-table .t-table__header, .page.manage-class .t-table .t-table__body--item {
  grid-template-columns: 60px 10fr 10fr 10fr 5fr 9fr 9fr 9fr 8fr 100px 90px;
}
.page.manage-class.t .t-table .t-table__header, .page.manage-class.t .t-table .t-table__body--item {
  grid-template-columns: 60px 10fr 10fr 5fr 9fr 9fr 9fr 8fr 100px 90px;
}
.page.manage-class.t .t-table .t-none {
  display: none !important;
}

@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page.class-detail .t-table .t-table__class-info {
    padding: 18px 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page.class-detail .t-table .t-table__class-info {
    min-width: 200vw;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page.class-detail .t-table .t-table__header, .page.class-detail .t-table .t-table__body--item {
    grid-template-columns: 5vw 12vw 1fr 10vw 10vw 10vw;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page.class-detail .t-table .t-table__header, .page.class-detail .t-table .t-table__body--item {
    grid-template-columns: 15vw 25vw 1fr 25vw 25vw 20vw;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page.class-detail .t-table .t-table__header, .page.class-detail .t-table .t-table__body--item {
    grid-template-columns: 5vw 12vw 1fr 10vw 10vw 10vw;
  }
}

@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .teacher-page .my-page input, .teacher-page .my-page select, .teacher-page .my-page .btn {
    height: 40px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .teacher-page .my-page select {
    width: 30px;
    padding: 0 15px;
    background-position: 50% center;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .teacher-page .my-page .btn-email {
    width: 55px;
  }
}

html, body {
  -webkit-tap-highlight-color: transparent; /* iOS/Android Chrome 파란색 하이라이트 제거 */
}

html {
  font-size: 62.5%;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  html {
    font-size: 50%;
  }
}

body {
  font-size: clamp(13px, 2vw, 1.6rem);
  user-select: none; /* 텍스트/영역 선택 방지 */
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #6bcff6 !important;
}

/* 웹 접근성용 숨김 텍스트(스크린 리더기 전용 텍스트) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page--quiz .swiper-slide .active {
  border-style: solid !important;
  border-color: #0049B7 !important;
  overflow: hidden;
}

.page--quiz .swiper-slide .btn--sound-order.active {
  border: none !important;
}

.page--quiz .swiper-slide .wrong {
  border-style: solid !important;
  border-color: #F91D1D !important;
  animation: wrong-rotate 0.2s linear 4;
  overflow: hidden;
}

.drag-item {
  list-style: none !important;
}

.correct {
  transition: all 0.5s;
}

@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .page {
    padding-top: 0;
  }
  .header,
  .btn-print,
  .btn-export {
    display: none;
  }
  .comment-con .t-table__body--item {
    padding-left: 4px !important;
  }
}
:root {
  --color-red: #F91D1D;
  --color-pink: #FF60AA;
  --color-orange: #FF9800;
  --color-green: #59BF2B;
  --color-blue: #02abf2;
}

.page--main {
  overflow: hidden;
  background: #F89D45;
  z-index: 0;
}

.character {
  width: 100%;
  max-width: 830px;
  height: fit-content;
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-54%);
}
.character .img-app {
  display: none;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .character {
    width: 85%;
    max-width: 580px;
    bottom: 15%;
  }
}
@media (orientation: portrait) and (min-width: 1000px), (orientation: landscape) and (min-width: 1281px) and (max-width: 1366px) {
  .character {
    max-width: 800px;
    bottom: 10%;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .character {
    bottom: 16%;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .character {
    width: 100%;
    max-width: 360px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .character {
    max-width: 100%;
    opacity: 0;
    top: auto;
    right: auto;
    bottom: 17%;
    left: 0;
    --tx-from: --400px;
    --tx-to: 0%;
    --ty-from: 0;
    --ty-to: 0;
    animation: fade-in-right-tx 1.5s 2s linear forwards;
    --tx-from: -30%;
    --tx-to: 7%;
  }
  .character .img-app.port {
    display: block;
    width: 50%;
    transform: translate(50%, 20%);
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .is-app .character {
    max-width: 100%;
    opacity: 0;
    top: auto;
    right: auto;
    bottom: 17%;
    left: 0;
    --tx-from: --400px;
    --tx-to: 0%;
    --ty-from: 0;
    --ty-to: 0;
    animation: fade-in-right-tx 1.5s 2s linear forwards;
    --tx-from: -30%;
    --tx-to: 7%;
  }
  .is-app .character .img-app.port {
    display: block;
    width: 50%;
    transform: translate(50%, 20%);
  }
}
.character .img-app {
  height: auto;
  aspect-ratio: 4/3;
  position: relative;
  z-index: -1;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .character {
    opacity: 0;
    top: auto;
    right: auto;
    bottom: 13%;
    left: 0;
    --tx-from: --400px;
    --tx-to: 0%;
    --ty-from: 0;
    --ty-to: 0;
    animation: fade-in-right-tx 1.5s 2s linear forwards;
    --tx-to: 28%;
  }
  .character .img-app.land {
    display: block;
    width: 50%;
    transform: translate(180%, 100%);
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .character {
    opacity: 0;
    top: auto;
    right: auto;
    bottom: 13%;
    left: 0;
    --tx-from: --400px;
    --tx-to: 0%;
    --ty-from: 0;
    --ty-to: 0;
    animation: fade-in-right-tx 1.5s 2s linear forwards;
    --tx-to: 28%;
  }
  .is-app .character .img-app.land {
    display: block;
    width: 50%;
    transform: translate(180%, 100%);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .character {
    top: auto;
    right: auto;
    bottom: 2%;
    left: 0;
    max-width: 450px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .character {
    --tx-to: 1%;
  }
}
.logo--main {
  width: 100%;
  position: absolute;
  top: 10px;
  right: 0;
}
.logo--main .logo-l {
  display: none;
}
@media (max-width: 1700px) {
  .logo--main {
    max-width: 1500px;
  }
  .logo--main .logo-xl {
    display: none;
  }
  .logo--main .logo-l {
    display: block;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .logo--main {
    top: 90px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .logo--main {
    width: 110%;
    top: 12%;
    right: 0;
    transform: translateX(5%);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .logo--main {
    top: 30%;
    transform: translateY(-50%);
    animation: fade-out-up 1.5s 2s linear forwards;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .is-app .logo--main {
    top: 30%;
    transform: translateY(-50%);
    animation: fade-out-up 1.5s 2s linear forwards;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .logo--main {
    top: 50%;
    transform: translateY(-50%);
    animation: fade-out-up 1.5s 2s linear forwards;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .logo--main {
    top: 50%;
    transform: translateY(-50%);
    animation: fade-out-up 1.5s 2s linear forwards;
  }
}

.login-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 65%;
  right: 65px;
  gap: 5rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .login-list {
    top: auto;
    bottom: 10%;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .login-list {
    bottom: 9%;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .login-list {
    left: auto;
    right: 6%;
    top: auto;
    bottom: 10%;
  }
}
.login-list__item {
  width: fit-content;
}

.btn--main-login {
  width: 100%;
  gap: 16px;
  color: #404cb5;
  font-size: 4rem;
  font-weight: 600;
  background-color: #6bcff6;
  padding: 16px 28px;
  cursor: pointer;
  border: 0.7rem solid #fff;
  gap: 16px;
  justify-content: space-between;
}
.btn--main-login:hover {
  background-color: rgb(58.923566879, 191.4076433121, 243.076433121);
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .btn--main-login {
    font-size: 28px;
    gap: 8px;
    padding: 10px 24px;
  }
}
.btn--main-login .btn__icon {
  display: inline-block;
  vertical-align: middle;
  background: url("/assets/images/icon/arrow-main-login-7bb33f05a9cdc87c5372fb40fc65d700.svg") no-repeat center center;
  background-size: 100% 100%;
  width: 50px;
  aspect-ratio: 1/1;
  margin-left: 4px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .btn--main-login .btn__icon {
    width: 38px;
  }
}
.btn--main-login:hover .btn__icon {
  filter: brightness(0) invert(1);
  transform: translateX(10px);
  transition: all 0.15s ease-out;
}

.main-layer {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.main-layer--1 {
  background: url("/assets/images/contents/main/main-bg-01-fddb4cc0693de6736a1fdff43baa6e1d.png") no-repeat center center;
  background-size: cover;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .main-layer--1 {
    background-position: 25% center;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .main-layer--1 {
    background-position: 15% center;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .main-layer--1 {
    top: 50%;
    transform: translateY(-50%);
    background-position: 21% center;
  }
}
.main-layer--2 {
  background: url("/assets/images/contents/main/main-bg-02-9760d3875b28022f672172360f898c19.png") no-repeat left top;
  background-size: cover;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .main-layer--2 {
    background-position: 30% center;
  }
}

.main-layer--3 {
  display: none;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .main-layer--3 {
    display: block;
    background: url("/assets/images/contents/main/main-bg-03-ad0e0fea0114a49b2ff672b5df49f374.png") no-repeat center bottom;
    background-size: 100%;
  }
}

.page--app-login .page__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 400px;
  text-align: center;
}
.page--app-login .tit-icon {
  display: block;
  width: 100px;
  aspect-ratio: 1/1;
  background: url("/assets/images/icon/ic_create-tit-b028cd42464ca4c6beca20522f6f0796.png") no-repeat center center;
  background-size: 100%;
  margin: auto;
}
.page--app-login h2 {
  font-size: 30px;
}
.page--app-login h6 {
  font-size: 16px;
  margin: 30px auto;
  font-weight: 500;
}
.page--app-login .go-join {
  color: #FF00B2;
  font-weight: 600;
}
.page--app-login .app-login-con {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.page--app-login .app-login-con .login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.page--app-login .app-login-con .form-group {
  display: flex;
  gap: 40px;
}
.page--app-login .app-login-con .form-group .form-input {
  width: 100%;
  height: 50px;
  border-radius: 10px;
  border: 1px solid #F0F0F0;
  padding-left: 50px;
}
.page--app-login .app-login-con .form-group .form-input.input-id {
  background: #fff url("/assets/images/icon/ic_login-id-ac805201c2a89039d135cbd080385c7d.svg") no-repeat 14px center;
}
.page--app-login .app-login-con .form-group .form-input.input-pw {
  background: #fff url("/assets/images/icon/ic_login-pw-16a81449c58a170bdca7fc25c0119f2f.svg") no-repeat 14px center;
}
.page--app-login .app-login-con .form-group .form-check {
  display: flex;
  gap: 8px;
  align-items: center;
}
.page--app-login .app-login-con .form-group input[type=checkbox] {
  width: 18px;
  height: 18px;
  border: 1px solid #ACACAC;
  background: #fff;
  border-radius: 2px;
}
.page--app-login .app-login-con .form-group input[type=checkbox]:checked {
  border-color: #6bcff6;
  background: #fff url("/assets/images/icon/ic_login-check-080c1df781e52c87b34d0a066e957a9b.svg") no-repeat center center;
}
.page--app-login .app-login-con .btn-login {
  width: 100%;
  height: 50px;
  border-radius: 10px;
  font-size: 20px;
  mso-font-width: 600;
  margin-top: 32px;
}
.page--app-login .info-con {
  display: flex;
  justify-content: center;
  margin: 8px auto;
}
.page--app-login .info-con a {
  font-size: 13px;
  border-right: 1px solid #ACACAC;
  padding: 0 20px;
}
.page--app-login .info-con a:last-child {
  border: none;
}
.page--app-login .contact-con {
  font-size: 17px;
  font-weight: 600;
}
.page--app-login .contact-con a {
  padding: 20px;
}

.page--level .page__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.page--level .page__container .header__logo {
  display: none;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--level .page__container .header__logo {
    display: block;
    position: absolute;
    top: 10px;
    left: 15px;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page--level .page__container .header__logo {
    display: block;
    position: absolute;
    top: 10px;
    left: 15px;
  }
}
.page--level .page__container .page__main-tit {
  margin-bottom: 50px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--level .page__container .page__main-tit {
    font-size: 26px;
    margin-bottom: 32px;
  }
}
.page--level .page__container .select-con-list {
  max-width: 1300px;
  padding: 0 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--level .page__container .select-con-list {
    gap: 22px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--level .page__container .select-con-list {
    flex-direction: column;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--level .page__container .select-con-list {
    flex-direction: column;
  }
}
.page--level .page__container .select-con-list li {
  width: 65%;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--level .page__container .select-con-list li {
    max-width: 220px;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .page--level .page__container .select-con-list li {
    max-width: 300px;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page--level .page__container .select-con-list li {
    max-width: 380px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--level .page__container .select-con-list li {
    width: 65%;
    max-width: 220px;
  }
}
.page--level .page__container .select-con-list__item {
  text-align: center;
}
.page--level .page__container .select-con-list__item.inactive {
  filter: grayscale(100%);
  color: #404040 !important;
}
.page--level .page__container .select-con-list__item.inactive .select-con-list__img, .page--level .page__container .select-con-list__item.inactive:hover .select-con-list__img {
  border-color: #808080 !important;
}
.page--level .page__container .select-con-list__item.inactive .select-con-list__img::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("/assets/images/icon/btn_add-access-df2228a8e54f2bcac17603c962793f25.svg") no-repeat center center;
  background-size: 100%;
  width: 80px;
  height: 80px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--level .page__container .select-con-list__item.inactive .select-con-list__img::after {
    width: 60px;
    height: 60px;
  }
}
.page--level .page__container .select-con-list__img {
  display: block;
  line-height: 0;
  font-size: 0;
  overflow: hidden;
  border-radius: 2.2rem;
  border: 10px solid;
  margin-bottom: 9px;
  position: relative;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--level .page__container .select-con-list__img {
    border-width: 8px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--level .page__container .select-con-list__img {
    border-width: 7px;
  }
}
.page--level .page__container .select-con-list__img img {
  width: 100%;
  height: auto;
  display: block;
}
.page--level .page__container .select-con-list .level-1 {
  color: #404cb5;
}
.page--level .page__container .select-con-list .level-1 span {
  border-color: #02abf2;
}
.page--level .page__container .select-con-list .level-1:hover .select-con-list__img {
  border-color: #404cb5;
}
.page--level .page__container .select-con-list .level-2 {
  color: #237200;
}
.page--level .page__container .select-con-list .level-2 span {
  border-color: #59BF2B;
}
.page--level .page__container .select-con-list .level-2:hover .select-con-list__img {
  border-color: #237200;
}
.page--level .page__container .select-con-list .level-3 {
  color: #A8003D;
}
.page--level .page__container .select-con-list .level-3 span {
  border-color: #FF60AA;
}
.page--level .page__container .select-con-list .level-3:hover .select-con-list__img {
  border-color: #A8003D;
}

.page--menu.teacher .page__main-tit,
.page--resources.teacher .page__main-tit {
  color: #000;
}
.page--menu .page__main-tit,
.page--resources .page__main-tit {
  color: #fff;
  font-weight: 700;
}
.page--menu .select-con-list,
.page--resources .select-con-list {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 5.6rem;
  margin: 15px auto 0;
  /* 정확히 8개 */
  /* 정확히 7개 */
  /* 정확히 6개 */
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--menu .select-con-list,
  .page--resources .select-con-list {
    gap: 30px 3.6rem;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .page--menu .select-con-list,
  .page--resources .select-con-list {
    gap: 40px 3.6rem;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--menu .select-con-list,
  .page--resources .select-con-list {
    max-width: 730px;
    gap: 20px 3.6rem;
    margin: auto;
  }
}
.page--menu .select-con-list:has(> li:nth-of-type(8)):not(:has(> li:nth-of-type(9))) > li,
.page--resources .select-con-list:has(> li:nth-of-type(8)):not(:has(> li:nth-of-type(9))) > li {
  flex: 0 0 calc((100% - 16.8rem) / 4);
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .page--menu .select-con-list:has(> li:nth-of-type(8)):not(:has(> li:nth-of-type(9))) > li,
  .page--resources .select-con-list:has(> li:nth-of-type(8)):not(:has(> li:nth-of-type(9))) > li {
    flex: 0 0 calc((100% - 10.8rem) / 4);
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--menu .select-con-list:has(> li:nth-of-type(8)):not(:has(> li:nth-of-type(9))) > li,
  .page--resources .select-con-list:has(> li:nth-of-type(8)):not(:has(> li:nth-of-type(9))) > li {
    flex: 0 0 calc((100% - 7.2rem) / 3);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--menu .select-con-list:has(> li:nth-of-type(8)):not(:has(> li:nth-of-type(9))) > li,
  .page--resources .select-con-list:has(> li:nth-of-type(8)):not(:has(> li:nth-of-type(9))) > li {
    flex: 0 0 calc((100% - 5.6rem) / 2);
  }
}
.page--menu .select-con-list:has(> li:nth-of-type(7)):not(:has(> li:nth-of-type(8))) > li,
.page--resources .select-con-list:has(> li:nth-of-type(7)):not(:has(> li:nth-of-type(8))) > li {
  flex: 0 0 calc((100% - 16.8rem) / 4);
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .page--menu .select-con-list:has(> li:nth-of-type(7)):not(:has(> li:nth-of-type(8))) > li,
  .page--resources .select-con-list:has(> li:nth-of-type(7)):not(:has(> li:nth-of-type(8))) > li {
    flex: 0 0 calc((100% - 10.8rem) / 4);
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--menu .select-con-list:has(> li:nth-of-type(7)):not(:has(> li:nth-of-type(8))) > li,
  .page--resources .select-con-list:has(> li:nth-of-type(7)):not(:has(> li:nth-of-type(8))) > li {
    flex: 0 0 calc((100% - 3.6rem) / 2);
  }
}
.page--menu .select-con-list:has(> li:nth-of-type(6)):not(:has(> li:nth-of-type(7))) > li,
.page--resources .select-con-list:has(> li:nth-of-type(6)):not(:has(> li:nth-of-type(7))) > li {
  flex: 0 0 calc((100% - 11.2rem) / 3);
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .page--menu .select-con-list:has(> li:nth-of-type(6)):not(:has(> li:nth-of-type(7))) > li,
  .page--resources .select-con-list:has(> li:nth-of-type(6)):not(:has(> li:nth-of-type(7))) > li {
    flex: 0 0 calc((100% - 7.2rem) / 3);
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--menu .select-con-list:has(> li:nth-of-type(6)):not(:has(> li:nth-of-type(7))) > li,
  .page--resources .select-con-list:has(> li:nth-of-type(6)):not(:has(> li:nth-of-type(7))) > li {
    flex: 0 0 calc((100% - 3.6rem) / 2);
  }
}
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px), (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) {
  .page--menu .select-con-list:has(> li:nth-of-type(6)):not(:has(> li:nth-of-type(7))),
  .page--resources .select-con-list:has(> li:nth-of-type(6)):not(:has(> li:nth-of-type(7))) {
    padding: 0 5%;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--menu .select-con-list li,
  .page--resources .select-con-list li {
    max-width: 300px;
  }
}
.page--menu .select-con-list > li:nth-child(even) .select-con-list__item,
.page--resources .select-con-list > li:nth-child(even) .select-con-list__item {
  animation-delay: 1s;
}
.page--menu .select-con-list li,
.page--resources .select-con-list li {
  width: 100%;
}
.page--menu .select-con-list__item,
.page--resources .select-con-list__item {
  width: 100%;
  position: relative;
  padding-top: 105px;
  display: block;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--menu .select-con-list__item,
  .page--resources .select-con-list__item {
    padding-top: 35%;
  }
}
.page--menu .select-con-list__item h5,
.page--resources .select-con-list__item h5 {
  padding: 114px 10px 20px;
  text-align: center;
  border-radius: 3rem;
  background: #fff;
  transition: outline 0.2s ease;
  font-size: 26px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--menu .select-con-list__item h5,
  .page--resources .select-con-list__item h5 {
    width: 88%;
    padding-top: 80px;
    margin: auto;
    font-size: 24px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--menu .select-con-list__item h5,
  .page--resources .select-con-list__item h5 {
    font-size: 18px;
    padding: 50px 0 7px;
    border-radius: 15px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--menu .select-con-list__item h5,
  .page--resources .select-con-list__item h5 {
    padding-top: 50px;
  }
}
.page--menu .select-con-list__item h5 span,
.page--resources .select-con-list__item h5 span {
  font-family: "Pretendard", sans-serif;
}
.page--menu .select-con-list__item .select-con-list__img,
.page--resources .select-con-list__item .select-con-list__img {
  width: 207px;
  aspect-ratio: 1/1;
  position: absolute;
  left: 50%;
  bottom: 60px;
  transform: translateX(-50%);
  transition: transform 0.2s ease;
  z-index: 1;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--menu .select-con-list__item .select-con-list__img,
  .page--resources .select-con-list__item .select-con-list__img {
    width: 70%;
    bottom: 50px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--menu .select-con-list__item .select-con-list__img,
  .page--resources .select-con-list__item .select-con-list__img {
    width: 70%;
    bottom: 30px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--menu .select-con-list__item .select-con-list__img,
  .page--resources .select-con-list__item .select-con-list__img {
    width: 75%;
  }
}
.page--menu .select-con-list__item .select-con-list__img-inner,
.page--resources .select-con-list__item .select-con-list__img-inner {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  transition: transform 0.1s ease;
}
.page--menu .select-con-list__item:hover,
.page--resources .select-con-list__item:hover {
  animation: none;
  transition: all 0.5s ease-in-out;
}
.page--menu .select-con-list__item:hover .select-con-list__img-inner,
.page--resources .select-con-list__item:hover .select-con-list__img-inner {
  transform: translateY(-15px) scale(1.1);
}
.page--menu .select-con-list__item:hover h5,
.page--resources .select-con-list__item:hover h5 {
  color: #fff;
}

.page--menu .select-con-list .select-con-list__img-inner.icon1 {
  background-image: url("/assets/images/contents/student-book-cc78c08f016228c6ab82f4cc3f52f83b.png");
}
.page--menu .select-con-list .select-con-list__img-inner.icon2 {
  background-image: url("/assets/images/contents/activity-book-4f1f3d09ae0713b3efa993ec7cef28fc.png");
}
.page--menu .select-con-list .select-con-list__img-inner.icon3 {
  background-image: url("/assets/images/contents/teacher-book-4f1f3d09ae0713b3efa993ec7cef28fc.png");
}
.page--menu .select-con-list .select-con-list__img-inner.icon4 {
  background-image: url("/assets/images/contents/activities-75c0ac8514e4f4ac89157df8e840e2db.png");
}
.page--menu .select-con-list .select-con-list__img-inner.icon5 {
  background-image: url("/assets/images/contents/videos-1efff44e0fa2e654f457ae638f2d09bd.png");
}
.page--menu .select-con-list .select-con-list__img-inner.icon6 {
  background-image: url("/assets/images/contents/songs-chants-af025a3b927af5c66b40997ffe90ccf8.png");
}
.page--menu .select-con-list .select-con-list__img-inner.icon7 {
  background-image: url("/assets/images/contents/flashcards-6be5de98be75e7c8f9d239eda38c880c.png");
}
.page--menu .select-con-list .select-con-list__img-inner.icon8 {
  background-image: url("/assets/images/contents/resources-305e9bef11692f682e156ba3602941f3.png");
}
.page--menu.level-1 .select-con-list__img-inner.icon1 {
  background-image: url("/assets/images/contents/SB_1-24760558c6df9d7d4eb2eadefdb5b6ce.png");
}
.page--menu.level-1 .select-con-list__img-inner.icon2 {
  background-image: url("/assets/images/contents/AB_1-f9cf70f9be6545c3f94123354c578931.png");
}
.page--menu.level-1 .select-con-list__img-inner.icon3 {
  background-image: url("/assets/images/contents/TB_1-08b15566961e43a435e612d9c2fd6d36.png");
}
.page--menu.level-2 .select-con-list__img-inner.icon1 {
  background-image: url("/assets/images/contents/SB_2-bb0421526ff7def35fa4c06966865d3c.png");
}
.page--menu.level-2 .select-con-list__img-inner.icon2 {
  background-image: url("/assets/images/contents/AB_2-916153a95d6dd8984adbc4b041336aa1.png");
}
.page--menu.level-2 .select-con-list__img-inner.icon3 {
  background-image: url("/assets/images/contents/TB_2-97454b68bca72c518020e692d53cb294.png");
}
.page--menu.level-3 .select-con-list__img-inner.icon1 {
  background-image: url("/assets/images/contents/SB_3-b2846befd3c490254020f2d2980522d5.png");
}
.page--menu.level-3 .select-con-list__img-inner.icon2 {
  background-image: url("/assets/images/contents/AB_3-d53c18f0b85a2d3110fc9312bd247e0e.png");
}
.page--menu.level-3 .select-con-list__img-inner.icon3 {
  background-image: url("/assets/images/contents/TB_3-49b5317e968ac99ddc969996c0ecda7f.png");
}

.page--menu.teacher .select-con-list,
.page--resources.teacher .select-con-list {
  max-width: 1400px;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--menu.teacher .select-con-list,
  .page--resources.teacher .select-con-list {
    max-width: 800px;
  }
}

.page--unit {
  padding-top: 70px;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--unit {
    padding-top: 0;
  }
}
.page--unit .page__main-tit {
  margin-bottom: 40px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--unit .page__main-tit {
    margin-bottom: 24px;
  }
}
.page--unit .select-con-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.4rem 4.4rem;
  max-width: 1140px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--unit .select-con-list {
    max-width: 900px;
    gap: 20px;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page--unit .select-con-list {
    max-width: 90%;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--unit .select-con-list {
    max-width: 500px;
    gap: 10px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--unit .select-con-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--unit .select-con-list {
    gap: 20px;
  }
}
.page--unit .select-con-list__item {
  width: 100%;
  border: 8px solid #6bcff6;
  border-radius: 3rem;
  background-color: #fff;
  position: relative;
  transition: all 0.1s ease-out;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--unit .select-con-list__item {
    font-size: 14px;
    border-width: 5px;
  }
}
.page--unit .select-con-list__item.fin {
  border-color: #777;
  background: #D4DFE3;
}
.page--unit .select-con-list__item.fin .select-con-list__num {
  background: #777;
}
.page--unit .select-con-list__item h6 {
  font-size: 3rem;
  font-weight: 600;
  line-height: normal;
  padding: 10px 0;
  text-align: center;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--unit .select-con-list__item h6 {
    padding: 6px 0;
    font-size: 20px;
  }
}
.page--unit .select-con-list__item h6 span {
  color: #02abf2;
}
.page--unit .select-con-list__item:active {
  border-color: #0049B7;
  transition: all 0.1s ease-out;
}
.page--unit .select-con-list__item:active .select-con-list__num {
  background: #404cb5;
}
.page--unit .select-con-list__item:hover {
  border-color: #0049B7;
  transition: all 0.1s ease-out;
}
.page--unit .select-con-list__item:hover .select-con-list__num {
  background: #404cb5;
  color: #fff;
}
.page--unit .select-con-list__num {
  content: "";
  display: block;
  position: absolute;
  width: 6rem;
  aspect-ratio: 1/1;
  background: #6bcff6;
  top: -1px;
  left: -1px;
  border-radius: 10px 0 20px 0;
  font-size: 3.6rem;
  font-weight: 600;
  transition: all 0.1s ease-out;
  z-index: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--unit .select-con-list__num {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
}
.page--unit .select-con-list__img {
  display: block;
  width: 100%;
  height: 180px;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--unit .select-con-list__img {
    height: auto;
    aspect-ratio: 5/3;
    border-radius: 16px 16px 0 0;
  }
}
.page--unit .select-con-list__img img {
  transform: scale(1.1);
}

.page--flashcard .page__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-items: normal;
}
.page--flashcard .gnb-media-con__list {
  gap: 2.6rem;
}
.page--flashcard .gnb-media-con__list li {
  flex-shrink: 0;
}
.page--flashcard .gnb-media-con__item {
  text-transform: capitalize;
}
.page--flashcard .gnb-media-con__item:hover {
  color: #404cb5;
}
.page--flashcard .flashcard__view .swiper, .page--flashcard .flashcard__view .swiper-wrapper, .page--flashcard .flashcard__view .swiper-slide {
  height: 100%;
}
.page--flashcard .flashcard__view--main {
  width: 100%;
  max-width: 699px;
  height: auto;
  border-radius: 4rem;
  background: #fff;
  margin: 60px auto 50px;
  aspect-ratio: 47/33;
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .page--flashcard .flashcard__view--main {
    max-width: 550px;
    margin: 30px auto;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page--flashcard .flashcard__view--main {
    max-width: 699px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--flashcard .flashcard__view--main {
    max-width: 335px !important;
    height: 230px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--flashcard .flashcard__view--main {
    margin-bottom: 80px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--flashcard .flashcard__view--main {
    margin-top: 0;
    margin-bottom: 15px;
  }
}
.page--flashcard .flashcard__view--main .card {
  background: #FFE659;
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1000px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 4rem;
}
.page--flashcard .flashcard__view--main .card.is-flipped .card__face--front {
  transform: rotateY(180deg);
}
.page--flashcard .flashcard__view--main .card.is-flipped .card__face--back {
  transform: rotateY(0);
}
.page--flashcard .flashcard__view--main .card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 0.6s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border-width: 7px;
  overflow: hidden;
  max-height: 100%;
  border-radius: 4rem;
}
.page--flashcard .flashcard__view--main .card__face--front {
  background: #fff;
  transform: rotateY(0);
  z-index: 2;
  border-radius: 4rem;
  border: 1px solid #FFE659;
}
.page--flashcard .flashcard__view--main .card__face--back {
  background: #C4EEFF;
  transform: rotateY(180deg);
  z-index: 1;
  border-radius: 4rem;
  border: 1px solid #FFE659;
}
.page--flashcard .flashcard__view--main .card__face--back p {
  font-size: 11rem;
  font-weight: 600;
  margin: 0;
  text-align: center;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--flashcard .flashcard__view--main .card__face--back p {
    font-size: 55px;
  }
}
.page--flashcard .flashcard__view--main img {
  width: auto;
}
.page--flashcard .flashcard__view--main .btn--sound {
  display: block;
  width: 64px;
  height: 55px;
  background: #D1F3C1 url("/assets/images/icon/ic_sound-bfb6d061c62b6d3c363aecb83741816e.png") no-repeat center center/35px auto;
  border-radius: 9999px;
  position: absolute;
  top: 30px;
  right: 21px;
  cursor: pointer;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--flashcard .flashcard__view--main .btn--sound {
    width: 50px;
    height: 43px;
    background-size: 28px;
    top: 10px;
    right: 10px;
  }
}
.page--flashcard .flashcard__view--main .btn--sound:hover {
  background-size: 38px auto;
}
.page--flashcard .flashcard__view--thumb {
  width: 100%;
  text-align: center;
}
.page--flashcard .flashcard__view--thumb .swiper-wrapper {
  display: inline-flex;
  align-items: center;
}
.page--flashcard .flashcard__view--thumb .swiper-slide {
  width: 88px;
  flex-shrink: 0;
  border-radius: 14px;
  background: #fff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.page--flashcard .flashcard__view--thumb .swiper-slide:hover {
  border: 5px solid #eee;
}
.page--flashcard .flashcard__view img {
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
}
.page--flashcard .flashcard__view .swiper-slide-thumb-active {
  border: 5px solid #59BF2B;
  border-radius: 8px;
}
.page--flashcard .flashcard__view .swiper-slide-thumb-active img {
  border-radius: 4px;
}
.page--flashcard .flashcard__view .swiper-slide-thumb-active:active {
  border: 5px solid #59BF2B;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--flashcard .flashcard__view .swiper-slide-thumb-active {
    border-width: 3px !important;
  }
}
.page--flashcard .flashcard__view .swiper-slide-thumb-active:hover {
  border: 5px solid #59BF2B;
}
.page--flashcard .flashcard__view__item {
  background-color: #fff;
  border-radius: 8px;
  cursor: pointer;
}
.page--flashcard .flashcard__thumb-wrap {
  width: 100%;
  max-width: 706px;
  position: relative;
  margin: 0 auto;
  padding: 0 70px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--flashcard .flashcard__thumb-wrap {
    max-width: 840px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--flashcard .flashcard__thumb-wrap {
    max-width: 556px;
    padding: 0 50px;
  }
}
.page--flashcard .flashcard__cotrol {
  pointer-events: none;
  overflow: visible;
}
.page--flashcard .flashcard__btn {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 50%;
  pointer-events: auto;
  z-index: 5;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--flashcard .flashcard__btn {
    width: 36px;
    height: 36px;
  }
}
.page--flashcard .flashcard__btn-prev {
  background: #fff url("/assets/images/icon/btn-control-prev-45ae6509172fd2985bbcfa535c452bb9.svg") no-repeat center center/35%;
  position: absolute;
  top: 50%;
  left: 0;
  right: auto;
  transform: translateY(-50%);
}
.page--flashcard .flashcard__btn-prev.disabled {
  background-color: #ACACAC;
  pointer-events: none;
  cursor: not-allowed;
}
.page--flashcard .flashcard__btn-next {
  background: #fff url("/assets/images/icon/btn-control-next-2cbbb51a4cc4ed12f7fd04da0b08059b.svg") no-repeat center center/35%;
  position: absolute;
  top: 50%;
  left: auto;
  right: 0;
  transform: translateY(-50%);
}
.page--flashcard .flashcard__btn-next.disabled {
  background-color: #ACACAC;
  pointer-events: none;
  cursor: not-allowed;
}
.page--flashcard .flashcard__btn img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.page--media-bridge .gnb-media-con__item:not(.on) {
  border-width: 0 !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--media-bridge .gnb-media-con__item:active {
    border-width: 10px !important;
  }
}
@media (orientation: landscape) and (max-width: 1024px) {
  .page--media-bridge .gnb-media-con__item:active {
    border-width: 8px !important;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--media-bridge .gnb-media-con__item:active {
    border-width: 6px !important;
  }
}
.page--media-bridge.level-1 .gnb-media-con__item {
  background: #E8F8FF;
}
.page--media-bridge.level-2 .gnb-media-con__item {
  background: #E7FADE;
}
.page--media-bridge.level-3 .gnb-media-con__item {
  background: #FFF0F7;
}
.page--media-bridge.level-1 .gnb-media-con__item:active {
  color: #0049B7;
  border-color: #0049B7 !important;
}
.page--media-bridge.level-2 .gnb-media-con__item:active {
  color: #237200;
  border-color: #237200 !important;
}
.page--media-bridge.level-3 .gnb-media-con__item:active {
  color: #A8003D;
  border-color: #A8003D !important;
}
.page--media-bridge .gnb-media-con-bridge {
  width: 100%;
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.page--media-bridge .gnb-media-con-bridge__wrap {
  width: 100%;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--media-bridge .gnb-media-con-bridge {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px), (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) {
  .is-app .page--media-bridge .gnb-media-con-bridge {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.page--media-bridge .gnb-media-con-bridge .row {
  gap: 30px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--media-bridge .gnb-media-con-bridge .row {
    gap: 20px;
  }
}
.page--media-bridge .gnb-media-con-bridge .gnb-media-con__list {
  gap: 30px;
  margin: 0 auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--media-bridge .gnb-media-con-bridge .gnb-media-con__list {
    gap: 20px;
  }
}
.page--media-bridge .gnb-media-con-bridge .gnb-media-con__list.videos .row {
  flex-direction: row;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--media-bridge .gnb-media-con-bridge .gnb-media-con__list.videos {
    flex-direction: row;
    flex-wrap: nowrap;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .page--media-bridge .gnb-media-con-bridge .gnb-media-con__list.videos {
    flex-direction: row;
    flex-wrap: nowrap;
  }
}
.page--media-bridge .gnb-media-con-bridge .gnb-media-con__item {
  box-sizing: border-box !important;
}
@media (max-width: 1366px) {
  .page--media-bridge .gnb-media-con-bridge .gnb-media-con__item {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    font-size: 3.5rem;
    border-width: 12px;
    gap: 20px;
  }
}
@media (max-width: 1024px) {
  .page--media-bridge .gnb-media-con-bridge .gnb-media-con__item {
    width: 220px;
    height: 220px;
    font-size: 3rem;
    padding: 0;
    border-width: 10px;
    gap: 15px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--media-bridge .gnb-media-con-bridge .gnb-media-con__item {
    width: 150px !important;
    height: 150px !important;
    font-size: 2.5rem !important;
    border-width: 7px;
    gap: 6px;
  }
}
@media (orientation: portrait) and (max-width: 375px), (orientation: landscape) and (max-width: 700px) {
  .page--media-bridge .gnb-media-con-bridge .gnb-media-con__item {
    width: 140px !important;
    height: 140px !important;
    font-size: 2.2rem !important;
  }
}
.page--media-bridge .gnb-media-con-bridge .gnb-media-con__item .icon-media {
  width: 70px;
}
@media (max-width: 1366px) {
  .page--media-bridge .gnb-media-con-bridge .gnb-media-con__item .icon-media {
    width: 100px;
  }
}
@media (max-width: 1024px) {
  .page--media-bridge .gnb-media-con-bridge .gnb-media-con__item .icon-media {
    width: 80px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--media-bridge .gnb-media-con-bridge .gnb-media-con__item .icon-media {
    width: 42px !important;
  }
}
.page--media-bridge .gnb-media-con-bridge .gnb-media-con__item .icon-media img {
  width: 100%;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--media-bridge .gnb-media-con-bridge .gnb-media-con__list.flashcards {
    gap: 20px !important;
  }
}
.page--media-bridge .gnb-media-con-bridge .gnb-media-con__list.flashcards .row {
  flex-direction: row;
  gap: 20px;
}
@media (orientation: portrait) and (max-width: 375px), (orientation: landscape) and (max-width: 700px) {
  .page--media-bridge .gnb-media-con-bridge .gnb-media-con__list.flashcards .row {
    gap: 10px;
  }
}
.page--media-bridge .gnb-media-con-bridge .gnb-media-con__list.flashcards .gnb-media-con__item {
  font-size: 4rem;
}
@media (max-width: 1366px) {
  .page--media-bridge .gnb-media-con-bridge .gnb-media-con__list.flashcards .gnb-media-con__item {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    font-size: 5rem;
  }
}
@media (max-width: 1024px) {
  .page--media-bridge .gnb-media-con-bridge .gnb-media-con__list.flashcards .gnb-media-con__item {
    width: 170px;
    height: 170px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--media-bridge .gnb-media-con-bridge .gnb-media-con__list.flashcards .gnb-media-con__item {
    width: 130px !important;
    height: 130px !important;
    font-size: 3rem;
  }
}
@media (orientation: portrait) and (max-width: 375px), (orientation: landscape) and (max-width: 700px) {
  .page--media-bridge .gnb-media-con-bridge .gnb-media-con__list.flashcards .gnb-media-con__item {
    width: 110px !important;
    height: 110px !important;
  }
}

.page--songs-chants .page__container,
.page--videos .page__container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-items: center;
  padding-bottom: 0;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--songs-chants .page__container,
  .page--videos .page__container {
    align-items: flex-start;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--songs-chants .page__container,
  .page--videos .page__container {
    padding-bottom: 50px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--songs-chants .page__container,
  .page--videos .page__container {
    padding: 0;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page--songs-chants .page__container .gnb-media-con .gnb-media-con__item,
  .is-app .page--videos .page__container .gnb-media-con .gnb-media-con__item {
    gap: 10px;
    padding: 4px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .is-app .page--songs-chants .page__container .gnb-media-con .gnb-media-con__item,
  .is-app .page--videos .page__container .gnb-media-con .gnb-media-con__item {
    gap: 6px;
    padding: 8px;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page--songs-chants .page__container .gnb-media-con .gnb-media-con__item.on,
  .is-app .page--videos .page__container .gnb-media-con .gnb-media-con__item.on {
    padding: 2px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .is-app .page--songs-chants .page__container .gnb-media-con .gnb-media-con__item.on,
  .is-app .page--videos .page__container .gnb-media-con .gnb-media-con__item.on {
    padding: 8px;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page--songs-chants .page__container .gnb-media-con .gnb-media-con__item .icon-media,
  .is-app .page--videos .page__container .gnb-media-con .gnb-media-con__item .icon-media {
    width: 70px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .is-app .page--songs-chants .page__container .gnb-media-con .gnb-media-con__item .icon-media,
  .is-app .page--videos .page__container .gnb-media-con .gnb-media-con__item .icon-media {
    width: 37px;
  }
}

.page--songs-chants {
  background: #FFE659;
}
.page--songs-chants .songs-chants {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4rem 3%;
  padding: 6rem 7%;
}
.page--songs-chants .songs-chants:has(li:first-child:nth-last-child(-n+3), li:first-child:nth-last-child(-n+3) ~ li) {
  padding-top: 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--songs-chants .songs-chants {
    gap: 7rem 6%;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--songs-chants .songs-chants {
    gap: 24px 32px;
  }
}
.page--songs-chants .songs-chants > li {
  width: 17.6%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--songs-chants .songs-chants > li {
    width: 29.3333333333%;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--songs-chants .songs-chants > li {
    width: calc((100% - 32px) / 2);
  }
}
.page--songs-chants .songs-chants li:first-child:nth-last-child(-n+3),
.page--songs-chants .songs-chants li:first-child:nth-last-child(-n+3) ~ li {
  width: 25%;
  max-width: 300px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--songs-chants .songs-chants li:first-child:nth-last-child(-n+3),
  .page--songs-chants .songs-chants li:first-child:nth-last-child(-n+3) ~ li {
    width: 29.3333333333%;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--songs-chants .songs-chants li:first-child:nth-last-child(-n+3),
  .page--songs-chants .songs-chants li:first-child:nth-last-child(-n+3) ~ li {
    width: calc((100% - 32px) / 2);
  }
}
.page--songs-chants .songs-chants__item {
  width: 100%;
  text-align: center;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--songs-chants .songs-chants__item {
    padding-bottom: 0;
  }
}
.page--songs-chants .songs-chants__item .item-img {
  border-radius: 50%;
}

.page--videos {
  background: #FFE659;
}
.page--videos .videos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 3.6rem;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--videos .videos {
    gap: 20px 13px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--videos .videos {
    gap: 20px;
  }
}
.page--videos .videos:has(li:nth-child(4)) {
  justify-content: flex-start;
}
.page--videos .videos > li {
  width: calc((100% - 10.8rem) / 4);
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--videos .videos > li {
    width: calc((100% - 7.2rem) / 3);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--videos .videos > li {
    max-width: 400px;
    width: calc((100% - 20px) / 2);
  }
}
.page--videos .videos > li .item:nth-child(1):nth-last-child(n+4),
.page--videos .videos > li .item:nth-child(1):nth-last-child(n+4) ~ .item {
  /* 4개 이상일 때 */
  width: 25%;
  padding: 5px;
}
.page--videos .videos__item {
  width: 100%;
}
.page--videos .videos__item .item-img {
  border-radius: 1.9rem;
}

@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .page--activity-flow .page__container {
    width: 90%;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--activity-flow .page__container {
    width: 90%;
  }
}
.page--activity-flow.level-1 {
  background: #02abf2;
}
.page--activity-flow.level-2 {
  background: #59BF2B;
}
.page--activity-flow.level-3 {
  background: #FF60AA;
}
.page--activity-flow .page__main-tit {
  color: #fff;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--activity-flow .page__main-tit {
    margin-top: 8px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--activity-flow .page__main-tit {
    margin-top: 3px;
  }
}
.page--activity-flow .activity-con {
  position: relative;
  width: 100%;
  max-width: 1300px;
  margin: auto;
  margin-top: 10%;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--activity-flow .activity-con {
    max-width: 700px;
    top: 8%;
  }
}
.page--activity-flow .activity-con__list {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-areas: "a . c . e . g" ". b . d . f .";
  height: auto;
  z-index: 1;
  position: relative;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--activity-flow .activity-con__list {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "a . " " . b" "c . " " . d" "e . " " . f" "g . ";
    max-width: 400px;
    padding: 0 10%;
    margin: auto;
  }
}
.page--activity-flow .activity-con__item {
  max-width: 220px;
  height: auto;
  text-align: center;
  position: relative;
  transition: all 0.5s ease;
  aspect-ratio: 1/1;
  transform: scale(1.25);
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--activity-flow .activity-con__item {
    width: 145px;
    transform: scale(1.2);
  }
}
@media (orientation: portrait) and (max-width: 375px), (orientation: landscape) and (max-width: 700px) {
  .page--activity-flow .activity-con__item {
    max-width: 120px;
  }
}
.page--activity-flow .activity-con__item:nth-child(1) {
  grid-area: a;
}
.page--activity-flow .activity-con__item:nth-child(2) {
  grid-area: b;
}
.page--activity-flow .activity-con__item:nth-child(3) {
  grid-area: c;
}
.page--activity-flow .activity-con__item:nth-child(4) {
  grid-area: d;
}
.page--activity-flow .activity-con__item:nth-child(5) {
  grid-area: e;
}
.page--activity-flow .activity-con__item:nth-child(6) {
  grid-area: f;
}
.page--activity-flow .activity-con__item:nth-child(7) {
  grid-area: g;
}
.page--activity-flow .activity-con__item:nth-child(even) {
  position: relative;
}
.page--activity-flow .activity-con__item .activity-con__item--bg {
  width: 100%;
  height: auto;
  position: absolute;
}
.page--activity-flow .activity-con__item .activity-con__item--bg svg {
  aspect-ratio: 1/1;
}
.page--activity-flow .activity-con__item .activity-con__item--bg ellipse,
.page--activity-flow .activity-con__item .activity-con__item--bg rect {
  fill: #E2E2E2 !important;
  stroke: #E2E2E2 !important;
}
.page--activity-flow .activity-con__item.fin .activity-con__img--con {
  width: 100% !important;
  animation: none;
}
.page--activity-flow .activity-con__item.fin .activity-con__item--inner {
  background: #E8F8FF;
}
.page--activity-flow .activity-con__item h5 {
  width: 100%;
  font-size: 2.3rem;
  color: #000;
  letter-spacing: -0.2px;
}
@media (max-width: 1366px) {
  .page--activity-flow .activity-con__item h5 {
    font-size: 2.2rem;
  }
}
@media (max-width: 1024px) {
  .page--activity-flow .activity-con__item h5 {
    font-size: 1.8rem;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--activity-flow .activity-con__item h5 {
    font-size: 13px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--activity-flow .activity-con__item h5 {
    font-size: 12.5px;
  }
}
.page--activity-flow .activity-con__item > a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}
.page--activity-flow .activity-con__img {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
}
.page--activity-flow .activity-con__item--inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  width: 80%;
  aspect-ratio: 1/1;
  background: #FFF9D8;
  border-radius: 50%;
  z-index: 1;
  position: relative;
}
.page--activity-flow .activity-con__img--wrap {
  display: block;
  width: 40%;
  top: 17%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.page--activity-flow .activity-con__img--wrap img {
  width: 100%;
}
.page--activity-flow .svg-con--new {
  position: absolute;
  top: 50%;
  left: 0;
  padding: 0 1%;
  transform: translateY(-50%);
}
.page--activity-flow .svg-con--new .flow-path {
  fill: #E2E2E2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--activity-flow .svg-con--new {
    display: none;
    padding: 0 3px;
  }
}
.page--activity-flow .svg-con--new.mo-portrait {
  width: 123px;
  top: 24px;
  left: 50%;
  transform: translate(-50%, 0) rotate(180deg);
  display: none;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--activity-flow .svg-con--new.mo-portrait {
    display: block;
  }
}
@media (orientation: portrait) and (max-width: 375px), (orientation: landscape) and (max-width: 700px) {
  .page--activity-flow .svg-con--new.mo-portrait {
    top: 16px;
    width: 102px;
  }
}
.page--activity-flow .activity-con__item.current {
  animation: scale 0.75s linear infinite alternate;
}
.page--activity-flow .activity-con__item.current:hover {
  animation: big-rotate 2s linear infinite;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--activity-flow .activity-con__item.current {
    animation: scale-mo-portrait 0.75s linear infinite alternate;
  }
}
.page--activity-flow input[type=checkbox] {
  display: none;
}
.page--activity-flow input[type=checkbox]:checked ~ .test-modal {
  display: block;
}
.page--activity-flow.level-1 .activity-con__item.fin .activity-con__item--bg ellipse,
.page--activity-flow.level-1 .activity-con__item.fin .activity-con__item--bg rect {
  fill: #0049B7 !important;
  stroke: #0049B7 !important;
}
.page--activity-flow.level-1 .activity-con__item.fin .activity-con__item--inner {
  background: #E8F8FF;
}
.page--activity-flow.level-1 .flow-path.fin {
  fill: #0049B7 !important;
}
.page--activity-flow.level-2 .activity-con__item.fin .activity-con__item--bg ellipse,
.page--activity-flow.level-2 .activity-con__item.fin .activity-con__item--bg rect {
  fill: #237200 !important;
  stroke: #237200 !important;
}
.page--activity-flow.level-2 .activity-con__item.fin .activity-con__item--inner {
  background: #E7FADE;
}
.page--activity-flow.level-2 .flow-path.fin {
  fill: #237200 !important;
}
.page--activity-flow.level-3 .activity-con__item.fin .activity-con__item--bg ellipse,
.page--activity-flow.level-3 .activity-con__item.fin .activity-con__item--bg rect {
  fill: #A8003D !important;
  stroke: #A8003D !important;
}
.page--activity-flow.level-3 .activity-con__item.fin .activity-con__item--inner {
  background: #FFF0F7;
}
.page--activity-flow.level-3 .flow-path.fin {
  fill: #A8003D !important;
}

.page--quiz .page__main-tit {
  height: 64px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-top: 3rem;
  margin-bottom: 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--quiz .page__main-tit {
    font-size: 5rem;
  }
}
@media (orientation: portrait) and (min-width: 1000px), (orientation: landscape) and (min-width: 1281px) and (max-width: 1366px) {
  .page--quiz .page__main-tit {
    font-size: 6rem !important;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--quiz .page__main-tit {
    margin-top: 0 !important;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--quiz .page__main-tit {
    gap: 10px;
    padding: 0px 35px !important;
    margin-top: 10px !important;
    height: 45px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--quiz .page__main-tit {
    font-size: 3.5rem;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--quiz .page__main-tit {
    margin-top: 0 !important;
    padding-top: 20px !important;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--quiz .page__main-tit {
    line-height: 1;
  }
}
.page--quiz .page__main-tit:has(.btn--sound) {
  transform: translateX(20px);
  padding-top: 5px !important;
}
.page--quiz .slots-item {
  width: 100%;
  border-radius: 10px;
  position: relative;
  border: 9px dashed #59BF2B;
  background: #E0E8EB;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.page--quiz .slots-item img {
  width: 100%;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--quiz .slots-item {
    border-width: 7px;
    max-width: 170px !important;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page--quiz .slots-item {
    max-width: 225px !important;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--quiz .slots-item {
    max-width: 125px !important;
  }
}
.page--quiz .slots-item::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: -43px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: url("/assets/images/icon/arrow_quiz-order-d219c52d098ecfc534edc9b5bd6b6f7a.svg") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--quiz .slots-item::after {
    width: 24px;
    height: 24px;
    right: -34px;
  }
}
.page--quiz .slots-item:last-child::after {
  display: none;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--quiz .slots-item:nth-child(2)::after {
    top: auto;
    bottom: -45px;
    left: 50%;
    right: auto;
    transform: translateX(-50%) rotate(90deg);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait) and (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: portrait) and (max-width: 767px) and (orientation: portrait) and (orientation: landscape) and (max-width: 1023px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) and (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) and (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--quiz .slots-item:nth-child(2)::after {
    bottom: -34px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--quiz .slots-item:nth-child(3)::after {
    top: 50%;
    left: -40px;
    transform: translateY(-50%) rotate(180deg);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait) and (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: portrait) and (max-width: 767px) and (orientation: portrait) and (orientation: landscape) and (max-width: 1023px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) and (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) and (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--quiz .slots-item:nth-child(3)::after {
    left: -34px;
  }
}
.page--quiz .quiz-option {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.page--quiz .quiz-option__item {
  cursor: pointer;
  position: relative;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--quiz .quiz-option__item {
    border-width: 7px !important;
  }
}
.page--quiz .quiz-con-wrap {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex: 1;
  margin: auto;
  padding: 47.5px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--quiz .quiz-con-wrap {
    flex: 0;
    margin: inherit;
    padding: 20px 0;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--quiz .quiz-con-wrap {
    margin: auto;
  }
}
.page--quiz .quiz-indicator {
  position: static;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  z-index: 1;
  padding-top: 30px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--quiz .quiz-indicator {
    gap: 10px;
    padding-top: 14px;
  }
}
.page--quiz .quiz-indicator__list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 10px 20px;
  background: #FFEF9F;
  border-radius: 9999px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--quiz .quiz-indicator__list {
    gap: 20px;
    padding: 8px 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--quiz .quiz-indicator__list {
    gap: 15px;
    padding: 6px 20px;
  }
}
.page--quiz .quiz-indicator__item {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background-color: #6bcff6;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--quiz .quiz-indicator__item {
    width: 14px;
    height: 14px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--quiz .quiz-indicator__item {
    width: 12px;
    height: 12px;
  }
}
.page--quiz .quiz-indicator__item--current {
  background: #404cb5;
}
.page--quiz .quiz-indicator__item--next {
  background: #FF00B2;
}
.page--quiz .correct-layer__effect {
  max-width: 350px;
}

.quiz-choose .page__main-tit {
  margin-top: 4rem;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-choose .page__main-tit {
    padding-left: 36px;
  }
}
.quiz-choose .quiz-option {
  gap: 12rem;
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .quiz-choose .quiz-option {
    gap: 6rem;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-choose .quiz-option {
    flex-direction: column;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-choose .quiz-option {
    flex-direction: column;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-choose .quiz-option {
    gap: 32px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-choose .quiz-option {
    gap: 32px;
  }
}
.quiz-choose .quiz-option__item {
  width: 100%;
  max-width: 500px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-width: 10px;
  border-radius: 2rem;
  border-color: #6bcff6;
  border-style: solid;
  color: #0049B7;
  background-color: #fff;
  overflow: hidden;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-choose .quiz-option__item {
    max-width: 390px;
    border-width: 7px;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .quiz-choose .quiz-option__item {
    max-width: 430px;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .quiz-choose .quiz-option__item {
    max-width: 550px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .quiz-choose .quiz-option__item {
    max-width: 260px !important;
  }
}
.quiz-choose .quiz-option__item:first-child:nth-last-child(3), .quiz-choose .quiz-option__item:first-child:nth-last-child(3) ~ li {
  /* li가 3개일 때만 적용 */
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .quiz-choose .quiz-option__item:first-child:nth-last-child(3), .quiz-choose .quiz-option__item:first-child:nth-last-child(3) ~ li {
    max-width: 300px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-choose .quiz-option__item:first-child:nth-last-child(3), .quiz-choose .quiz-option__item:first-child:nth-last-child(3) ~ li {
    max-width: 270px;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .quiz-choose .quiz-option__item:first-child:nth-last-child(3), .is-app .quiz-choose .quiz-option__item:first-child:nth-last-child(3) ~ li {
    max-width: 380px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .quiz-choose .quiz-option__item:first-child:nth-last-child(3), .quiz-choose .quiz-option__item:first-child:nth-last-child(3) ~ li {
    max-width: 230px !important;
  }
}
.quiz-choose .quiz-option__item img {
  width: 100%;
  border-radius: 0.9rem;
  height: 100%;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .quiz-choose.page--clil-2.swiper-slide, .quiz-choose.math.swiper-slide {
    gap: 30px;
  }
}
.quiz-choose.page--clil-2 .quiz-option, .quiz-choose.math .quiz-option {
  flex-direction: row !important;
}
@media (max-width: 1024px) {
  .quiz-choose.page--clil-2 .quiz-option, .quiz-choose.math .quiz-option {
    max-width: 700px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .quiz-choose.page--clil-2 .quiz-option, .quiz-choose.math .quiz-option {
    max-width: 550px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .quiz-choose.page--clil-2 .quiz-option__item, .quiz-choose.math .quiz-option__item {
    max-width: 150px !important;
  }
}
.quiz-choose.page--clil-2 .quiz-con-wrap, .quiz-choose.math .quiz-con-wrap {
  padding: 0;
}
.quiz-choose.page--clil-2 .quiz-con-wrap .quiz-order-slots__item, .quiz-choose.math .quiz-con-wrap .quiz-order-slots__item {
  border-color: #fff;
}
@media (max-width: 1024px) {
  .quiz-choose.page--clil-2 .quiz-con-wrap .quiz-order-slots__item, .quiz-choose.math .quiz-con-wrap .quiz-order-slots__item {
    max-width: 220px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .quiz-choose.page--clil-2 .quiz-con-wrap .quiz-order-slots__item, .quiz-choose.math .quiz-con-wrap .quiz-order-slots__item {
    max-width: 150px;
  }
}

.quiz-pairs .quiz-option {
  max-width: 1000px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  flex-wrap: wrap;
  gap: 3rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .quiz-pairs .quiz-option {
    width: fit-content !important;
    gap: 8px;
    margin: auto;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-pairs .quiz-option {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
.quiz-pairs .quiz-option.n10 {
  max-width: 1260px;
  grid-template-columns: repeat(5, 1fr);
}
.quiz-pairs .quiz-option.n6 {
  max-width: 660px;
  grid-template-columns: repeat(3, 1fr);
}
.quiz-pairs .quiz-option.n4 {
  max-width: 480px;
  grid-template-columns: repeat(2, 1fr);
}
.quiz-pairs__item {
  width: 100%;
  max-width: 220px;
  max-height: 213px;
  border-radius: 2rem;
  aspect-ratio: 1/1;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .quiz-pairs__item {
    border-radius: 10px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-pairs__item {
    width: 115px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .quiz-pairs__item {
    width: 107px;
  }
}
.quiz-pairs__item img {
  border-radius: 1.2rem;
  aspect-ratio: 1/1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.quiz-pairs__item .card {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1000px;
  cursor: pointer;
}
.quiz-pairs__item .card.is-flipped .card__face--front {
  transform: rotateY(180deg);
}
.quiz-pairs__item .card.is-flipped .card__face--back {
  transform: rotateY(0);
}
.quiz-pairs__item .card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 0.6s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border-width: 7px;
  overflow: hidden;
  max-height: 213px;
}
.quiz-pairs__item .card__face--front {
  background: #fff;
  transform: rotateY(0);
  z-index: 2;
}
.quiz-pairs__item .card__face--back {
  background: #02abf2 url("/assets/images/contents/activity/card-back-ba3dd089d9afd0670a5e738854ae0cfc.png") no-repeat center center/30% auto;
  transform: rotateY(180deg);
  z-index: 1;
  border: 8px solid #7AEBFF;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .quiz-pairs__item .card__face--back {
    border-width: 5px;
  }
}

@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .quiz-order .swiper-wrapper {
    align-items: end;
  }
}
.quiz-order .quiz-con-wrap {
  flex-direction: column;
  gap: 3rem;
  flex: 0;
  padding: 0;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-order .quiz-con-wrap {
    max-width: 400px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .quiz-order .quiz-con-wrap {
    max-width: 475px;
    gap: 2rem;
  }
}
.quiz-order-slots {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 43px;
  transition: all 2s;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .quiz-order-slots {
    gap: 28px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-order-slots {
    flex-wrap: wrap;
  }
}
.quiz-order-slots__item {
  max-width: 220px;
  aspect-ratio: 4.1/5;
}
.quiz-order-slots__item .btn--sound-order {
  position: relative;
  background: url("/assets/images/icon/btn_story-sound-64c24f7d840ea9b30e75f79d90678dbe.png") no-repeat center center/100% auto;
  transform: translateY(-12px);
}
.quiz-order-slots__item .btn--sound-order.active {
  background: url("/assets/images/icon/btn_story-sound-play-c04307cf9b0ebf3340848c54ddb39604.png") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-order-slots__item {
    max-width: 190px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .quiz-order-slots__item {
    max-width: 145px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-order-slots__item {
    width: 50%;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-order-slots__item:nth-child(3) {
    order: 4;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-order-slots__item:nth-child(4) {
    order: 3;
  }
}
.quiz-order-slots__item.change {
  border: 10px solid #6bcff6;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-order-slots__item.change {
    border-width: 7px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .quiz-order-slots__item.change {
    border-width: 5px;
  }
}
.quiz-order-slots__item.change .btn--sound {
  display: none;
}
.quiz-order-slots__item.correct {
  max-width: 270px;
  transition: 0.5s;
}
.quiz-order-slots .order-num {
  width: 60px;
  height: 60px;
  color: #658FA1;
  background: #C6DBE5;
  border-radius: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.quiz-order-slots.new .quiz-order-slots__item::before {
  position: absolute;
  left: 50%;
  bottom: 11%;
  transform: translateX(-50%);
  font-size: 4rem;
  font-weight: 600;
  color: #658FA1;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-order-slots.new .quiz-order-slots__item::before {
    font-size: 28px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .quiz-order-slots.new .quiz-order-slots__item::before {
    font-size: 24px;
  }
}
.quiz-order-slots.new .quiz-order-slots__item:nth-child(1)::before {
  content: "1";
}
.quiz-order-slots.new .quiz-order-slots__item:nth-child(2)::before {
  content: "2";
}
.quiz-order-slots.new .quiz-order-slots__item:nth-child(3)::before {
  content: "3";
}
.quiz-order-slots.new .quiz-order-slots__item:nth-child(4)::before {
  content: "4";
}
.quiz-order .quiz-option {
  width: 100%;
  max-width: 920px;
  gap: 30px;
  padding: 0;
  margin: auto;
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .quiz-order .quiz-option {
    max-width: 1366px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-order .quiz-option {
    flex-wrap: wrap;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .quiz-order .quiz-option {
    gap: 16px;
  }
}
.quiz-order .quiz-option__item {
  width: 20%;
  max-width: 200px;
  border: 10px solid #6bcff6;
  border-radius: 16px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-order .quiz-option__item {
    max-width: 150px;
    border-width: 7px !important;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .quiz-order .quiz-option__item {
    max-width: 140px;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .quiz-order .quiz-option__item {
    max-width: 210px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .quiz-order .quiz-option__item {
    max-width: 135px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-order .quiz-option__item {
    width: 50%;
  }
}
.quiz-order .quiz-option__item:hover {
  border-color: #0049B7;
  transition: all 0.1s ease-out;
}
.quiz-order .quiz-option__item.change {
  border: none;
}
.quiz-order .quiz-option__item img {
  width: 100%;
  border-radius: 7px;
}

.quiz-listen-story {
  /* 드래그 방지 */
}
.quiz-listen-story#flipbook {
  width: 100%;
  aspect-ratio: 8/5;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .quiz-listen-story#flipbook {
    width: 60vw;
    height: auto;
    aspect-ratio: 8/5;
    max-width: 800px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-listen-story#flipbook {
    aspect-ratio: 4/5;
    width: 90vw;
    height: auto;
    max-width: 400px;
  }
}
.quiz-listen-story .book-page {
  width: 100% !important;
  height: 100%;
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/5;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .quiz-listen-story .book-page {
    aspect-ratio: 4/5;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-listen-story .book-page {
    aspect-ratio: 4/5;
  }
}
.quiz-listen-story .book-page.stf__item.--left {
  left: 0 !important;
}
.quiz-listen-story .book-page.stf__item.--left .page-inner {
  border-right: 1px solid #000;
}
.quiz-listen-story .page-inner {
  width: auto;
  height: 100%;
  position: relative;
  aspect-ratio: 4/5;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-listen-story .page-inner {
    border-right: none;
  }
}
.quiz-listen-story .page-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .quiz-listen-story .page-img {
    height: 100%;
    object-fit: contain;
  }
}
.quiz-listen-story .speech-bubble {
  position: absolute;
  background: white;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 28px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-listen-story .speech-bubble {
    font-size: 16px;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .quiz-listen-story .speech-bubble {
    font-size: 18px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .quiz-listen-story .speech-bubble {
    padding: 4px 6px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-listen-story .speech-bubble {
    font-size: 14px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .quiz-listen-story .speech-bubble {
    font-size: 12px;
  }
}
.quiz-listen-story .btn-page {
  margin: 20px auto;
  display: flex;
  justify-content: center;
  gap: 20px;
  position: relative;
  z-index: 10;
}
.quiz-listen-story .btn-page button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
.quiz-listen-story .story-preview-wrapper {
  position: relative;
  display: inline-block;
  border: none;
  padding: 0;
  background: none;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-listen-story .story-preview-wrapper {
    margin: auto;
  }
}
.quiz-listen-story .play-button-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  background: url("/assets/images/icon/btn_play-ae9c00f78f4be838549bc49b7e211b42.png") no-repeat center center;
  background-size: contain;
  pointer-events: none; /* 클릭 막지 않도록 */
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-listen-story .play-button-overlay {
    width: 85px;
    height: 85px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .quiz-listen-story .play-button-overlay {
    width: 60px;
    height: 60px;
  }
}
.quiz-listen-story .stf__block {
  pointer-events: none !important;
}

.quiz-choose-say .main-tit {
  margin-bottom: 5.5rem;
}
.quiz-choose-say .quiz-option {
  gap: 10rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-choose-say .quiz-option {
    gap: 50px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-choose-say .quiz-option {
    gap: 32px;
  }
}
.quiz-choose-say .quiz-option__item {
  border-radius: 1rem;
}
.quiz-choose-say .quiz-option__item img {
  border-radius: 0;
}
.quiz-choose-say .quiz-con--row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 12rem;
}

@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-match-say .page__main-tit {
    padding-left: 36px;
  }
}
.quiz-match-say .quiz-con-wrap {
  gap: 8rem;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .quiz-match-say .quiz-con-wrap {
    padding: 0;
  }
}
.quiz-match-say .quiz-con-wrap img {
  height: 100%;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-match-say .quiz-con-wrap {
    gap: 50px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-match-say .quiz-con-wrap {
    flex-direction: column;
    gap: 20px;
  }
}
.quiz-match-say .quiz-con-wrap .quiz-option {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 5/3.4;
  flex-wrap: wrap;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-width: 0px;
  border-radius: 2rem;
  border-color: #6bcff6;
  border-style: solid;
  color: #0049B7;
  background-color: #fff;
  overflow: hidden;
  border: none !important;
  background: transparent;
  gap: 5%;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-match-say .quiz-con-wrap .quiz-option {
    border-width: 8px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .quiz-match-say .quiz-con-wrap .quiz-option {
    max-width: 290px;
  }
}
.quiz-match-say .quiz-con-wrap .quiz-option__item {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-width: 0;
  border-radius: 0;
  border-color: #6bcff6;
  border-style: solid;
  color: #0049B7;
  background-color: #fff;
  width: 45%;
  aspect-ratio: 5/3.4;
  overflow: hidden;
  background: transparent;
  cursor: pointer !important; /* 기본 포인터 */
}
.quiz-match-say .quiz-con-wrap .quiz-option__item:active {
  cursor: pointer !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-match-say .quiz-con-wrap .quiz-option__item {
    border-width: 0px !important;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .quiz-match-say .quiz-con-wrap .quiz-option__item {
    border-width: 0px !important;
  }
}
.quiz-match-say .quiz-con-wrap .quiz-option__item:nth-child(1) {
  display: none;
}
.quiz-match-say .quiz-con-wrap .quiz-option__item.change {
  border: none;
  background: transparent;
}
.quiz-match-say .quiz-con-wrap .quiz-option__item .quiz-choose__button {
  height: 100%;
}
.quiz-match-say .quiz-con-wrap .quiz-option__item .quiz-choose__button img {
  height: 100%;
  /* 커서 강제 지정 */
  cursor: pointer !important; /* 또는 원하는 커서 */
}
.quiz-match-say .quiz-con-wrap .quiz-option__item .quiz-choose__button img:hover {
  cursor: pointer !important;
}
.quiz-match-say .quiz-con-wrap .quiz-option__item .quiz-choose__button img :active {
  cursor: pointer !important; /* 또는 원하는 스타일 */
}
.quiz-match-say .quiz-con-wrap .quiz-option__item img {
  border-radius: 0;
}
.quiz-match-say .quiz-con-wrap .quiz-option.correct {
  display: none;
}
.quiz-match-say .quiz-con-wrap .quiz-match-say-slots {
  width: 100%;
  max-width: 530px;
  /*aspect-ratio: 3 / 2;*/
  background: url("/assets/images/contents/activity/match-say-bg-2-39fcbfa959034553b2ab47ed42cead9c.png") no-repeat center center/105% auto;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-width: 15px;
  border-radius: 2rem;
  border-color: #6bcff6;
  border-style: solid;
  color: #0049B7;
  background-color: #fff;
  overflow: hidden;
  cursor: pointer;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  box-sizing: content-box;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-match-say .quiz-con-wrap .quiz-match-say-slots {
    border-width: 10px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .quiz-match-say .quiz-con-wrap .quiz-match-say-slots {
    max-width: 275px;
    border-width: 8px;
  }
}
.quiz-match-say .quiz-con-wrap .quiz-match-say-slots__item {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.quiz-match-say .quiz-con-wrap .quiz-match-say-slots__item img {
  width: 100%;
  aspect-ratio: 3/2;
}
.quiz-match-say .quiz-con-wrap .quiz-match-say-slots.correct {
  max-width: 680px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .quiz-match-say .quiz-con-wrap .quiz-match-say-slots.correct {
    max-width: 400px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .quiz-match-say .quiz-con-wrap .quiz-match-say-slots.correct {
    max-width: 330px;
  }
}

.quiz-phonics-type1.swiper-slide {
  padding-bottom: 0 !important;
}
.quiz-phonics-type1 .quiz-con-wrap {
  padding: 0;
}
.quiz-phonics-type1 .quiz-phonics-header {
  position: absolute;
  top: 30px;
  left: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  font-family: "Readex Pro", sans-serif;
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .quiz-phonics-type1 .quiz-phonics-header {
    top: 20px;
    left: 80px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .quiz-phonics-type1 .quiz-phonics-header {
    left: 50%;
    transform: translateX(-44%);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .quiz-phonics-type1 .quiz-phonics-header {
    top: 13px;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .quiz-phonics-type1 .quiz-phonics-header {
    top: 13px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .is-app .quiz-phonics-type1 .quiz-phonics-header {
    top: 7px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-phonics-type1 .quiz-phonics-header {
    top: 0;
  }
}
.quiz-phonics-type1 .quiz-phonics-header > div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  align-items: start;
}
.quiz-phonics-type1 .quiz-phonics-header .letter {
  font-weight: 600;
  font-size: 6rem;
  color: #fff;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .quiz-phonics-type1 .quiz-phonics-header .letter {
    font-size: 40px;
  }
}
.quiz-phonics-type1 .quiz-phonics-header .letter.on {
  color: #404cb5;
}
.quiz-phonics-type1 .quiz-option {
  padding-top: 7%;
}
.quiz-phonics-type1__item {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  aspect-ratio: 1/1;
  position: relative;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-phonics-type1__item {
    width: 70% !important;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .quiz-phonics-type1__item {
    width: auto !important;
    height: 70dvh;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .quiz-phonics-type1__item {
    width: 30% !important;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-phonics-type1__item {
    width: 80% !important;
  }
}
.quiz-phonics-type1__item .svg-letter {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  position: absolute;
  top: 0;
  left: 0;
}
.quiz-phonics-type1__item img {
  height: 100%;
}
.quiz-phonics-type1.math .quiz-option {
  padding-top: 0;
}
.quiz-phonics-type1.math .quiz-option .quiz-phonics-type1__item {
  transform: translateY(7%);
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .quiz-phonics-type1.math .quiz-option .quiz-phonics-type1__item {
    width: 55% !important;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-phonics-type1.math .quiz-option .quiz-phonics-type1__item {
    width: 80% !important;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .quiz-phonics-type1.math .quiz-option .quiz-phonics-type1__item {
    aspect-ratio: 1/0.8 !important;
    width: 48% !important;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-phonics-type1.math .quiz-option .quiz-phonics-type1__item {
    width: 95% !important;
  }
}

.quiz-phonics-type2 .quiz-con-wrap {
  flex-direction: column;
  gap: 3rem;
}
.quiz-phonics-type2 .quiz-con-wrap > ul {
  padding: 16px 0;
}
.quiz-phonics-type2 .quiz-con-wrap .quiz-drag-slots {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10rem;
}
.quiz-phonics-type2 .quiz-con-wrap .quiz-drag-slots .btn--sound {
  position: absolute;
  top: -32px;
  left: -37px;
}
.quiz-phonics-type2 .quiz-con-wrap .quiz-drag-slots__item {
  width: 240px;
  height: 175px;
}
.quiz-phonics-type2 .quiz-con-wrap .quiz-drag-slots__item::after {
  display: none;
}
.quiz-phonics-type2 .quiz-con-wrap .quiz-option {
  gap: 10rem;
}
.quiz-phonics-type2 .quiz-con-wrap .quiz-option__item {
  max-width: 240px;
  height: 175px;
  font-size: 6rem;
  font-weight: 600;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-width: 10px;
  border-radius: 15px;
  border-color: #6bcff6;
  border-style: solid;
  color: #0049B7;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.quiz-phonics-type2 .quiz-con-wrap .quiz-option__item:hover {
  border-color: #0049B7;
  transition: all 0.1s ease-out;
}

.quiz-phonics-type3 .quiz-con-wrap {
  flex-direction: column;
  gap: 150px;
  padding: 0;
  justify-content: space-around;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .quiz-phonics-type3 .quiz-con-wrap {
    padding-top: 0;
  }
}
.quiz-phonics-type3 .quiz-con-wrap .quiz-option {
  gap: 10rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-phonics-type3 .quiz-con-wrap .quiz-option {
    gap: 4rem;
  }
}
.quiz-phonics-type3 .quiz-con-wrap .quiz-option__item {
  width: 100%;
  max-width: 220px;
  font-size: 4rem;
  font-weight: 600;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-width: 8px;
  border-radius: 15px;
  border-color: #6bcff6;
  border-style: solid;
  color: #0049B7;
  background-color: #fff;
  aspect-ratio: 41/29;
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .quiz-phonics-type3 .quiz-con-wrap .quiz-option__item {
    max-width: 120px;
    min-height: auto;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .quiz-phonics-type3 .quiz-con-wrap .quiz-option__item {
    max-width: 80px;
  }
}
.quiz-phonics-type3 .quiz-con-wrap .quiz-option__item--img {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.quiz-phonics-type3 .quiz-con-wrap .quiz-option__item--img img {
  aspect-ratio: 41/29;
}
.quiz-phonics-type3 .quiz-con-wrap .quiz-option__item .btn--sound {
  position: absolute;
  top: -32px;
  left: -37px;
}
.quiz-phonics-type3 .quiz-con-wrap .quiz-option__item img {
  border-radius: 6%;
  height: fit-content;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .quiz-phonics-type3 .quiz-con-wrap .quiz-option__item img {
    border-radius: 13%;
  }
}
.quiz-phonics-type3.type2 .btn--sound, .quiz-phonics-type3.type3 .btn--sound, .quiz-phonics-type3.type4 .btn--sound, .quiz-phonics-type3.type5 .btn--sound {
  display: none;
}
.quiz-phonics-type3.type1 .dot-point, .quiz-phonics-type3.type3 .dot-point {
  display: block;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-phonics-type3.type1 .dot-point, .quiz-phonics-type3.type3 .dot-point {
    width: 20px !important;
    height: 20px !important;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .quiz-phonics-type3.type1 .dot-point, .quiz-phonics-type3.type3 .dot-point {
    width: 18px !important;
    height: 18px !important;
  }
}
.quiz-phonics-type3.type1 .dot-point::after, .quiz-phonics-type3.type3 .dot-point::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: transparent;
  pointer-events: auto;
}
.quiz-phonics-type3.type1 .dot-point.start, .quiz-phonics-type3.type3 .dot-point.start {
  bottom: -35px;
}
.quiz-phonics-type3.type1 .dot-point.end, .quiz-phonics-type3.type3 .dot-point.end {
  top: -35px;
}
.quiz-phonics-type3.type2 .quiz-con-wrap, .quiz-phonics-type3.type4 .quiz-con-wrap, .quiz-phonics-type3.type5 .quiz-con-wrap {
  flex-direction: row;
}
.quiz-phonics-type3.type2 .quiz-option, .quiz-phonics-type3.type4 .quiz-option, .quiz-phonics-type3.type5 .quiz-option {
  flex-direction: column;
}
.quiz-phonics-type3.type2 .dot-point, .quiz-phonics-type3.type4 .dot-point, .quiz-phonics-type3.type5 .dot-point {
  display: block;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-phonics-type3.type2 .dot-point, .quiz-phonics-type3.type4 .dot-point, .quiz-phonics-type3.type5 .dot-point {
    width: 20px !important;
    height: 20px !important;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .quiz-phonics-type3.type2 .dot-point, .quiz-phonics-type3.type4 .dot-point, .quiz-phonics-type3.type5 .dot-point {
    width: 18px !important;
    height: 18px !important;
  }
}
.quiz-phonics-type3.type2 .dot-point::after, .quiz-phonics-type3.type4 .dot-point::after, .quiz-phonics-type3.type5 .dot-point::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: transparent;
  pointer-events: auto;
}
.quiz-phonics-type3.type2 .dot-point.start, .quiz-phonics-type3.type4 .dot-point.start, .quiz-phonics-type3.type5 .dot-point.start {
  right: -35px;
}
.quiz-phonics-type3.type2 .dot-point.end, .quiz-phonics-type3.type4 .dot-point.end, .quiz-phonics-type3.type5 .dot-point.end {
  left: -35px;
}
.quiz-phonics-type3.type4 .quiz-con-wrap .quiz-option__item, .quiz-phonics-type3.type5 .quiz-con-wrap .quiz-option__item {
  border: none;
  background: transparent;
}
.quiz-phonics-type3.type4 .quiz-con-wrap .quiz-option__item--img, .quiz-phonics-type3.type5 .quiz-con-wrap .quiz-option__item--img {
  background: transparent;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.quiz-phonics-type3.type4 .quiz-con-wrap .quiz-option__item img, .quiz-phonics-type3.type5 .quiz-con-wrap .quiz-option__item img {
  width: 100%;
  margin: auto;
  border-radius: 0;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .quiz-phonics-type3.type3 {
    gap: 10px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-phonics-type3.type3 .quiz-con-wrap {
    flex-direction: row;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .quiz-phonics-type3.type3 .quiz-con-wrap {
    gap: 200px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .quiz-phonics-type3.type3 .quiz-con-wrap {
    gap: 90px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-phonics-type3.type3 .quiz-con-wrap {
    flex-direction: row;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-phonics-type3.type3 .quiz-con-wrap .quiz-option {
    flex-direction: column;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .quiz-phonics-type3.type3 .quiz-con-wrap .quiz-option {
    gap: 35px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-phonics-type3.type3 .quiz-con-wrap .quiz-option {
    flex-direction: column;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-phonics-type3.type3 .quiz-con-wrap .quiz-option__item {
    min-height: auto;
    max-width: 180px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .quiz-phonics-type3.type3 .quiz-con-wrap .quiz-option__item {
    max-width: 110px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-phonics-type3.type3 .quiz-con-wrap .quiz-option__item {
    max-width: 100px;
  }
}
.quiz-phonics-type3.type3 .dot-point {
  display: block;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-phonics-type3.type3 .dot-point {
    width: 20px !important;
    height: 20px !important;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .quiz-phonics-type3.type3 .dot-point {
    width: 18px !important;
    height: 18px !important;
  }
}
.quiz-phonics-type3.type3 .dot-point::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: transparent;
  pointer-events: auto;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-phonics-type3.type3 .dot-point {
    transform: translateX(0);
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-phonics-type3.type3 .dot-point.start {
    bottom: auto;
    left: auto;
    right: -33%;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-phonics-type3.type3 .dot-point.end {
    top: auto;
    left: -33%;
  }
}
.quiz-phonics-type3.type4 .quiz-con-wrap .quiz-option {
  gap: 3rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-phonics-type3.type4 .quiz-con-wrap .quiz-option {
    gap: 5rem;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .quiz-phonics-type3.type4 .quiz-con-wrap .quiz-option {
    gap: 12px !important;
  }
}
.quiz-phonics-type3.type4 .quiz-con-wrap .quiz-option.group-1 .quiz-option__item {
  justify-content: flex-end;
}
.quiz-phonics-type3.type4 .quiz-con-wrap .quiz-option.group-2 .quiz-option__item {
  justify-content: flex-start;
}
.quiz-phonics-type3.type4 .quiz-con-wrap .quiz-option li:first-child:nth-last-child(-n+2),
.quiz-phonics-type3.type4 .quiz-con-wrap .quiz-option li:first-child:nth-last-child(-n+2) ~ li {
  transform: translateY(-40px);
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-phonics-type3.type4 .quiz-con-wrap .quiz-option li:first-child:nth-last-child(-n+2),
  .quiz-phonics-type3.type4 .quiz-con-wrap .quiz-option li:first-child:nth-last-child(-n+2) ~ li {
    transform: translateY(0);
  }
}
.quiz-phonics-type3.type4 .quiz-con-wrap .quiz-option__item {
  max-width: 180px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-phonics-type3.type4 .quiz-con-wrap .quiz-option__item {
    max-width: 160px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .quiz-phonics-type3.type4 .quiz-con-wrap .quiz-option__item {
    max-width: 110px;
  }
}
.quiz-phonics-type3.type4 .quiz-con-wrap .quiz-option:has(> li:only-child),
.quiz-phonics-type3.type4 .quiz-con-wrap .quiz-option:has(> li:first-child:nth-last-child(2)) {
  gap: 15rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-phonics-type3.type4 .quiz-con-wrap .quiz-option:has(> li:only-child),
  .quiz-phonics-type3.type4 .quiz-con-wrap .quiz-option:has(> li:first-child:nth-last-child(2)) {
    gap: 15rem;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .quiz-phonics-type3.type4 .quiz-con-wrap .quiz-option:has(> li:only-child),
  .quiz-phonics-type3.type4 .quiz-con-wrap .quiz-option:has(> li:first-child:nth-last-child(2)) {
    gap: 50px !important;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-phonics-type3.type4 .quiz-con-wrap .quiz-option:has(> li:only-child),
  .quiz-phonics-type3.type4 .quiz-con-wrap .quiz-option:has(> li:first-child:nth-last-child(2)) {
    gap: 15rem;
  }
}
.quiz-phonics-type3.type4.clil .quiz-con-wrap .quiz-option__item {
  max-width: 220px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-width: 8px;
  border-radius: 15px;
  border-color: #6bcff6;
  border-style: solid;
  color: #0049B7;
  background-color: #fff;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-phonics-type3.type4.clil .quiz-con-wrap .quiz-option__item {
    max-width: 200px;
    gap: 2.4rem;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .quiz-phonics-type3.type4.clil .quiz-con-wrap .quiz-option__item {
    max-width: 110px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .quiz-phonics-type3.type5 {
    gap: 20px;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .quiz-phonics-type3.type5 .page__main-tit {
    margin-bottom: 6rem;
  }
}
@media (orientation: landscape) and (max-width: 1024px) {
  .is-app .quiz-phonics-type3.type5 .page__main-tit {
    margin-bottom: 2rem;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-phonics-type3.type5 .quiz-con-wrap {
    flex-direction: column;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-phonics-type3.type5 .quiz-con-wrap {
    flex-direction: column;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .quiz-phonics-type3.type5 .quiz-con-wrap {
    gap: 11%;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-phonics-type3.type5 .quiz-con-wrap {
    gap: 140px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-phonics-type3.type5 .quiz-con-wrap {
    gap: 150px;
  }
}
.quiz-phonics-type3.type5 .quiz-con-wrap .img-con .quiz-option__item {
  height: auto;
  border: 7px solid #6bcff6;
}
.quiz-phonics-type3.type5 .quiz-con-wrap .img-con .quiz-option__item--img {
  max-width: 230px;
}
.quiz-phonics-type3.type5 .quiz-con-wrap .img-con .quiz-option__item--img img {
  border-radius: 7px;
}
.quiz-phonics-type3.type5 .quiz-con-wrap .sound-con.group-1 .quiz-option__item {
  max-width: 280px;
  height: auto;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-phonics-type3.type5 .quiz-con-wrap .sound-con.group-1 .quiz-option__item {
    max-width: 180px;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .quiz-phonics-type3.type5 .quiz-con-wrap .sound-con.group-1 .quiz-option__item {
    max-width: 350px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .quiz-phonics-type3.type5 .quiz-con-wrap .sound-con.group-1 .quiz-option__item {
    max-width: 150px;
  }
}
.quiz-phonics-type3.type5 .quiz-con-wrap .sound-con.group-1 .quiz-option__item--img {
  max-width: 100%;
}
.quiz-phonics-type3.type5 .quiz-con-wrap .sound-con.group-1.group-1 img {
  max-width: 100% !important;
  border-radius: 1.6rem;
  border: 8px solid #6bcff6;
  background-color: #fff;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-phonics-type3.type5 .quiz-con-wrap .txt-con {
    flex-direction: row;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-phonics-type3.type5 .quiz-con-wrap .txt-con {
    flex-direction: row;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-phonics-type3.type5 .quiz-con-wrap .txt-con {
    gap: 20rem;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-phonics-type3.type5 .quiz-con-wrap .txt-con {
    gap: 30px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .quiz-phonics-type3.type5 .quiz-con-wrap .txt-con {
    gap: 10rem;
  }
}
.quiz-phonics-type3.type5 .quiz-con-wrap .txt-con .quiz-option__item {
  max-width: 200px !important;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-phonics-type3.type5 .quiz-con-wrap .txt-con .quiz-option__item {
    max-width: 150px !important;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .quiz-phonics-type3.type5 .quiz-con-wrap .txt-con .quiz-option__item {
    max-width: 170px !important;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .quiz-phonics-type3.type5 .quiz-con-wrap .txt-con .quiz-option__item {
    max-width: 110px !important;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-phonics-type3.type5 .quiz-con-wrap .dot-point.start {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -35px;
    transform: translateX(-50%);
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-phonics-type3.type5 .quiz-con-wrap .dot-point.start {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -35px;
    transform: translateX(-50%);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .quiz-phonics-type3.type5 .quiz-con-wrap .dot-point.end {
    left: 50%;
    top: -35px;
    transform: translateX(-50%);
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-phonics-type3.type5 .quiz-con-wrap .dot-point.end {
    left: 50%;
    top: -35px;
    transform: translateX(-50%);
  }
}

.page--clil-1 .quiz-con-wrap {
  flex-direction: column;
  gap: 4rem;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--clil-1 .quiz-con-wrap .quiz-order-slots {
    max-width: 400px;
  }
}
.page--clil-1 .quiz-con-wrap .quiz-order-slots.correct .quiz-order-slots__item {
  max-width: 250px;
  transition: 0.5s;
}
.page--clil-1 .quiz-con-wrap .quiz-order-slots__item {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1/1;
  align-items: flex-end;
}
.page--clil-1 .quiz-con-wrap .quiz-order-slots__item.change {
  border: 9px solid #6bcff6;
  background: #fff;
}
.page--clil-1 .quiz-con-wrap .quiz-order-slots__item img {
  max-width: none;
  border-radius: 10px;
}
.page--clil-1 .quiz-con-wrap .quiz-order-slots__item:first-child {
  border: 9px solid #6bcff6;
  align-items: center;
  background-color: #fff;
}
.page--clil-1 .quiz-con-wrap .quiz-order-slots__item:first-child img {
  width: 100%;
  border-radius: 0;
}
.page--clil-1 .quiz-con-wrap .quiz-order-slots__item:nth-child(n+2) img {
  max-width: none;
  height: 90%;
}
.page--clil-1 .quiz-option {
  width: 100%;
  max-width: 760px;
  gap: 3.4rem;
  padding: 22px;
  background: #FFEF9F;
  border-radius: 15px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--clil-1 .quiz-option {
    gap: 10px;
    padding: 10px;
  }
}
.page--clil-1 .quiz-option.correct {
  display: none;
}
.page--clil-1 .quiz-option__item {
  width: 100%;
  max-width: 216px;
  aspect-ratio: 1/1;
  border: 8px solid #6bcff6;
  border-radius: 15px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-items: flex-end;
  background: #fff;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--clil-1 .quiz-option__item {
    max-width: 110px;
  }
}
.page--clil-1 .quiz-option__item.change {
  border: none;
}
.page--clil-1 .quiz-option__item img {
  border-radius: 5px;
  max-width: none;
  height: 90%;
}
.page--clil-2 .quiz-con-wrap {
  flex-direction: column;
  gap: 4rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--clil-2 .quiz-con-wrap {
    gap: 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--clil-2 .quiz-con-wrap {
    gap: 12px;
  }
}
.page--clil-2 .quiz-con-wrap .quiz-order-slots {
  width: fit-content;
  padding: 22px;
  background: #FFEF9F;
  border-radius: 15px;
  gap: 0;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--clil-2 .quiz-con-wrap .quiz-order-slots {
    padding: 10px;
  }
}
.page--clil-2 .quiz-con-wrap .quiz-order-slots__item {
  width: 100%;
  max-width: 280px;
  height: auto;
  aspect-ratio: auto;
  border: 8px solid #6bcff6;
  overflow: hidden;
  border-radius: 16px;
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .page--clil-2 .quiz-con-wrap .quiz-order-slots__item {
    max-width: 250px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--clil-2 .quiz-con-wrap .quiz-order-slots__item {
    border-width: 5px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--clil-2 .quiz-con-wrap .quiz-order-slots__item {
    max-width: 170px;
  }
}
.page--clil-2 .quiz-con-wrap .quiz-order-slots__item:first-child {
  background: #fff;
  border-radius: 15px;
}
.page--clil-2 .quiz-con-wrap .quiz-option {
  gap: 4rem;
  align-items: stretch;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--clil-2 .quiz-con-wrap .quiz-option {
    gap: 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--clil-2 .quiz-con-wrap .quiz-option {
    gap: 7px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--clil-2 .quiz-con-wrap .quiz-option {
    flex-direction: row;
  }
}
.page--clil-2 .quiz-con-wrap .quiz-option__item {
  max-width: 300px;
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .page--clil-2 .quiz-con-wrap .quiz-option__item {
    max-width: 200px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--clil-2 .quiz-con-wrap .quiz-option__item {
    max-width: 140px;
  }
}
.page--clil-2.phonics.quiz-choose .quiz-con-wrap {
  padding: 0;
  justify-content: start;
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page--clil-2.phonics.quiz-choose .quiz-con-wrap .quiz-order-slots {
    max-width: 50%;
  }
}
.page--clil-2.phonics.quiz-choose .quiz-con-wrap .quiz-order-slots__item {
  max-width: 510px;
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .page--clil-2.phonics.quiz-choose .quiz-con-wrap .quiz-order-slots__item {
    max-width: 370px;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page--clil-2.phonics.quiz-choose .quiz-con-wrap .quiz-order-slots__item {
    max-width: 100%;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--clil-2.phonics.quiz-choose .quiz-con-wrap .quiz-order-slots__item {
    max-width: 250px;
  }
}
.page--clil-2.phonics.quiz-choose .quiz-con-wrap .quiz-option {
  flex-direction: row;
}
.page--clil-2.phonics.quiz-choose .quiz-con-wrap .quiz-option__item {
  max-width: 160px !important;
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .page--clil-2.phonics.quiz-choose .quiz-con-wrap .quiz-option__item {
    max-width: 120px !important;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page--clil-2.phonics.quiz-choose .quiz-con-wrap .quiz-option__item {
    max-width: 15% !important;
  }
}
@media (orientation: landscape) and (max-width: 1024px) {
  .is-app .page--clil-2.phonics.quiz-choose .quiz-con-wrap .quiz-option__item {
    max-width: 20% !important;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--clil-2.phonics.quiz-choose .quiz-con-wrap .quiz-option__item {
    max-width: 90px !important;
  }
}
.page--clil-3 .quiz-option {
  gap: 4rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--clil-3 .quiz-option {
    gap: 20px;
  }
}
.page--clil-3 .quiz-option__item {
  max-width: 430px;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--clil .quiz-drag-drop {
    gap: 4px !important;
  }
}
.page--clil .quiz-drag-drop,
.page--clil .quiz-clil-choose {
  gap: 4.5rem;
}
.page--clil .quiz-drag-drop .quiz-con-wrap,
.page--clil .quiz-clil-choose .quiz-con-wrap {
  padding: 0;
}
.page--clil .quiz-drag-drop .quiz-con-wrap .quiz-con-wrap,
.page--clil .quiz-clil-choose .quiz-con-wrap .quiz-con-wrap {
  align-items: start;
}
.page--clil .quiz-drag-drop .quiz-con-wrap .drag-area,
.page--clil .quiz-clil-choose .quiz-con-wrap .drag-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6rem;
}
.page--clil .quiz-drag-drop .quiz-con-wrap .drag-area .drag-area__inner,
.page--clil .quiz-clil-choose .quiz-con-wrap .drag-area .drag-area__inner {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  padding-top: 30px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--clil .quiz-drag-drop .quiz-con-wrap .drag-area .drag-area__inner,
  .page--clil .quiz-clil-choose .quiz-con-wrap .drag-area .drag-area__inner {
    gap: 10px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--clil .quiz-drag-drop .quiz-con-wrap .drag-area .drag-area__inner,
  .page--clil .quiz-clil-choose .quiz-con-wrap .drag-area .drag-area__inner {
    flex-direction: column;
  }
}
.page--clil .quiz-drag-drop .quiz-con-wrap .drag-area .drag-area__inner .drag-box,
.page--clil .quiz-clil-choose .quiz-con-wrap .drag-area .drag-area__inner .drag-box {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: #fff;
  position: relative;
  border: 8px solid #6bcff6;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--clil .quiz-drag-drop .quiz-con-wrap .drag-area .drag-area__inner .drag-box,
  .page--clil .quiz-clil-choose .quiz-con-wrap .drag-area .drag-area__inner .drag-box {
    border-width: 5px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--clil .quiz-drag-drop .quiz-con-wrap .drag-area .drag-area__inner .drag-box,
  .page--clil .quiz-clil-choose .quiz-con-wrap .drag-area .drag-area__inner .drag-box {
    max-width: 500px;
    height: 150px;
  }
}
.page--clil .quiz-drag-drop .quiz-con-wrap .drag-area .drag-area__inner .drag-box .cate,
.page--clil .quiz-clil-choose .quiz-con-wrap .drag-area .drag-area__inner .drag-box .cate {
  padding: 10px 32px;
  border-radius: 100px;
  border: 8px solid #6bcff6;
  background: #fff;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: normal;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 0;
  transform: translate(-50%, -36px);
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--clil .quiz-drag-drop .quiz-con-wrap .drag-area .drag-area__inner .drag-box .cate,
  .page--clil .quiz-clil-choose .quiz-con-wrap .drag-area .drag-area__inner .drag-box .cate {
    border-width: 5px;
    padding: 7px 20px;
    transform: translate(-50%, -27px);
  }
}
.page--clil .quiz-drag-drop .quiz-con-wrap .drag-area .drag-area__inner .drag-box .drag-place,
.page--clil .quiz-clil-choose .quiz-con-wrap .drag-area .drag-area__inner .drag-box .drag-place {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 35px 5px 5px;
  gap: 10px;
  justify-content: start;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--clil .quiz-drag-drop .quiz-con-wrap .drag-area .drag-area__inner .drag-box .drag-place,
  .page--clil .quiz-clil-choose .quiz-con-wrap .drag-area .drag-area__inner .drag-box .drag-place {
    padding-top: 25px;
  }
}
.page--clil .quiz-drag-drop .quiz-con-wrap .drag-area .drag-area__inner .drag-box .drag-place img,
.page--clil .quiz-clil-choose .quiz-con-wrap .drag-area .drag-area__inner .drag-box .drag-place img {
  width: 100%;
  height: 100%;
}
.page--clil .quiz-drag-drop .quiz-con-wrap .drag-area .drag-area__inner .drag-box .drag-place.col,
.page--clil .quiz-clil-choose .quiz-con-wrap .drag-area .drag-area__inner .drag-box .drag-place.col {
  gap: 0;
  flex-direction: column;
}
.page--clil .quiz-drag-drop .quiz-con-wrap .drag-area .drag-area__inner .drag-box.col,
.page--clil .quiz-clil-choose .quiz-con-wrap .drag-area .drag-area__inner .drag-box.col {
  min-height: 250px;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--clil .quiz-drag-drop .quiz-con-wrap .drag-area .drag-area__inner .drag-box.col,
  .page--clil .quiz-clil-choose .quiz-con-wrap .drag-area .drag-area__inner .drag-box.col {
    min-height: 200px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--clil .quiz-drag-drop .quiz-con-wrap .drag-area .drag-area__inner .drag-box.col,
  .page--clil .quiz-clil-choose .quiz-con-wrap .drag-area .drag-area__inner .drag-box.col {
    min-height: auto;
  }
}
.page--clil .quiz-drag-drop .quiz-con-wrap .drag-area .drag-area__inner .drag-box.col .drag-item.col,
.page--clil .quiz-clil-choose .quiz-con-wrap .drag-area .drag-area__inner .drag-box.col .drag-item.col {
  width: 60%;
  transform: rotate(0);
}
.page--clil .quiz-drag-drop .quiz-con-wrap .drag-area .drag-area__inner .drag-box,
.page--clil .quiz-clil-choose .quiz-con-wrap .drag-area .drag-area__inner .drag-box {
  min-height: 130px;
}
.page--clil .quiz-drag-drop .drag-option,
.page--clil .quiz-clil-choose .drag-option {
  display: grid;
  width: 100%;
}
.page--clil .quiz-drag-drop .drag-item,
.page--clil .quiz-clil-choose .drag-item {
  max-width: 300px;
  cursor: grab;
  user-select: none;
  display: inline-block;
  transition: transform 1s ease; /* 있어야 자연스러움 */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .page--clil .quiz-drag-drop .drag-item,
  .page--clil .quiz-clil-choose .drag-item {
    max-height: 150px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--clil .quiz-drag-drop .drag-item,
  .page--clil .quiz-clil-choose .drag-item {
    max-height: 80px;
  }
}
.page--clil .quiz-drag-drop .drag-item:nth-child(1),
.page--clil .quiz-clil-choose .drag-item:nth-child(1) {
  grid-area: a;
}
.page--clil .quiz-drag-drop .drag-item:nth-child(2),
.page--clil .quiz-clil-choose .drag-item:nth-child(2) {
  grid-area: b;
}
.page--clil .quiz-drag-drop .drag-item:nth-child(3),
.page--clil .quiz-clil-choose .drag-item:nth-child(3) {
  grid-area: c;
}
.page--clil .quiz-drag-drop .drag-item:nth-child(4),
.page--clil .quiz-clil-choose .drag-item:nth-child(4) {
  grid-area: d;
}
.page--clil .quiz-drag-drop .drag-item:nth-child(5),
.page--clil .quiz-clil-choose .drag-item:nth-child(5) {
  grid-area: e;
}
.page--clil .quiz-drag-drop .drag-item:nth-child(6),
.page--clil .quiz-clil-choose .drag-item:nth-child(6) {
  grid-area: f;
}
.page--clil-4.quiz-drag-drop {
  gap: 0;
}
.page--clil-4.quiz-drag-drop .drag-option {
  gap: 10px;
}
.page--clil-4.quiz-drag-drop .drag-option.col {
  min-height: 70px;
}
.page--clil-4.quiz-drag-drop .drag-option.col:not(:has(li)) {
  min-height: 0;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--clil-4.quiz-drag-drop .drag-option.col {
    grid-template-areas: "a b" "c d";
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--clil-4.quiz-drag-drop .quiz-con-wrap {
    padding: 0;
  }
}
.page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area {
  gap: 2rem;
}
.page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-area__inner {
  height: 350px;
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-area__inner {
    height: 260px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-area__inner {
    height: auto;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-area__inner {
    gap: 40px;
    flex-direction: column;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-area__inner {
    gap: 20px;
    height: 180px;
  }
}
.page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-area__inner .drag-item {
  width: calc((100% - 20px) / 3);
  max-height: none;
}
.page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-area__inner.col {
  margin-bottom: 24px;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-area__inner.col {
    height: 210px;
  }
}
.page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-option {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-option {
    gap: 10px;
  }
}
.page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-option.col {
  display: grid;
  grid-template-areas: "a b c d";
  gap: 2rem;
}
.page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-option.col img {
  width: 100%;
  height: 100%;
}
.page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-item img {
  width: 100%;
  height: 100%;
}
.page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-item.col {
  max-height: 70px;
  transform: rotate(10deg);
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-item.col {
    max-height: 50px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-item.col {
    max-height: 50px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-item.col {
    max-height: 35px;
    display: block;
    margin: auto;
  }
}
.page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-option.n8 {
  grid-template-areas: "a b c d" "e f g h";
}
.page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-item {
  max-height: 180px;
  aspect-ratio: 4/3;
}
.page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-item.col {
  width: auto;
  aspect-ratio: auto;
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-item {
    max-height: 150px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-item {
    max-height: 120px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-item {
    max-height: 100px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-item {
    max-height: 60px;
  }
}
.page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-item:nth-child(1) {
  grid-area: a;
}
.page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-item:nth-child(2) {
  grid-area: b;
}
.page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-item:nth-child(3) {
  grid-area: c;
}
.page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-item:nth-child(4) {
  grid-area: d;
}
.page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-item:nth-child(5) {
  grid-area: e;
}
.page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-item:nth-child(6) {
  grid-area: f;
}
.page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-item:nth-child(7) {
  grid-area: g;
}
.page--clil-4.quiz-drag-drop .quiz-con-wrap .drag-area .drag-item:nth-child(8) {
  grid-area: h;
}
.page--clil-5 .drag-area__inner {
  gap: 3rem;
}
.page--clil-5 .drag-area__inner .drag-place {
  height: 180px;
  flex-direction: row !important;
}
.page--clil-5 .drag-area__inner .drag-place .drag-item {
  width: calc((100% - 10px) / 2);
  max-width: 200px !important;
  height: 100%;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--clil-5 .drag-area__inner .drag-place .drag-item {
    width: auto;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--clil-5 {
    flex-direction: column !important;
  }
}
.page--clil-5 .drag-option {
  display: flex !important;
  justify-content: center;
}
.page--clil-5 .drag-option .drag-item {
  width: 33.3333333333%;
  max-width: 250px !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--clil-5 .drag-option .drag-item {
    max-width: 200px !important;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--clil-5 .drag-option .drag-item {
    max-width: 150px !important;
  }
}
.page--clil-6.clil-con-row .quiz-con-wrap, .page--clil-8.clil-con-row .quiz-con-wrap {
  justify-content: center;
  padding: 0;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--clil-6.clil-con-row .quiz-con-wrap, .page--clil-8.clil-con-row .quiz-con-wrap {
    padding-bottom: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--clil-6.clil-con-row .quiz-con-wrap, .page--clil-8.clil-con-row .quiz-con-wrap {
    max-width: 500px;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area {
    max-width: 800px;
  }
}
.page--clil-6.clil-con-row .quiz-con-wrap .drag-area,
.page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area,
.page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner {
  display: flex;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: center;
  gap: 5rem;
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner {
    max-width: 850px;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page--clil-6.clil-con-row .quiz-con-wrap .drag-area,
  .is-app .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner, .is-app .page--clil-8.clil-con-row .quiz-con-wrap .drag-area,
  .is-app .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner {
    max-width: 95%;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner {
    flex-direction: column !important;
    gap: 40px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner {
    flex-direction: column !important;
    gap: 40px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner {
    gap: 20px;
    max-height: 240px;
  }
}
.page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-left-con,
.page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-left-con, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-left-con,
.page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-left-con {
  border: 10px solid #6bcff6;
}
.page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-area__inner,
.page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-left-con,
.page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-area__inner,
.page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-left-con, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-area__inner,
.page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-left-con,
.page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-area__inner,
.page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-left-con {
  width: fit-content;
  height: auto !important;
  padding-top: 0 !important;
  border-radius: 20px;
  overflow: hidden;
  border: 10px solid #6bcff6;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-area__inner,
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-left-con,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-area__inner,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-left-con, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-area__inner,
  .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-left-con,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-area__inner,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-left-con {
    margin: auto;
    max-width: 500px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-area__inner,
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-left-con,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-area__inner,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-left-con, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-area__inner,
  .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-left-con,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-area__inner,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-left-con {
    margin: auto;
    max-width: 500px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-area__inner,
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-left-con,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-area__inner,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-left-con, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-area__inner,
  .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-left-con,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-area__inner,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-left-con {
    border-width: 7px !important;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-area__inner,
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-left-con,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-area__inner,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-left-con, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-area__inner,
  .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-left-con,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-area__inner,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-left-con {
    margin: auto;
  }
}
.page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-area__inner .drag-box,
.page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-left-con .drag-box,
.page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-area__inner .drag-box,
.page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-left-con .drag-box, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-area__inner .drag-box,
.page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-left-con .drag-box,
.page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-area__inner .drag-box,
.page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-left-con .drag-box {
  width: fit-content;
  padding: 0;
  aspect-ratio: 8/5;
  overflow: hidden;
  height: auto !important;
  border-radius: 0;
  border: none;
}
.page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-area__inner .drag-box .drag-place,
.page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-left-con .drag-box .drag-place,
.page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-area__inner .drag-box .drag-place,
.page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-left-con .drag-box .drag-place, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-area__inner .drag-box .drag-place,
.page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-left-con .drag-box .drag-place,
.page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-area__inner .drag-box .drag-place,
.page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-left-con .drag-box .drag-place {
  padding: 0 !important;
}
.page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-area__inner .drag-box .drag-place img,
.page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-left-con .drag-box .drag-place img,
.page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-area__inner .drag-box .drag-place img,
.page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-left-con .drag-box .drag-place img, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-area__inner .drag-box .drag-place img,
.page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-left-con .drag-box .drag-place img,
.page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-area__inner .drag-box .drag-place img,
.page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-left-con .drag-box .drag-place img {
  width: fit-content;
}
.page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-area__inner #question_li img.fade-out,
.page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-left-con #question_li img.fade-out,
.page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-area__inner #question_li img.fade-out,
.page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-left-con #question_li img.fade-out, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-area__inner #question_li img.fade-out,
.page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-left-con #question_li img.fade-out,
.page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-area__inner #question_li img.fade-out,
.page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-left-con #question_li img.fade-out {
  animation: fadeOut 0.5s ease-in-out forwards;
}
.page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-area__inner #answer_li img.fade-in,
.page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-left-con #answer_li img.fade-in,
.page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-area__inner #answer_li img.fade-in,
.page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-left-con #answer_li img.fade-in, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-area__inner #answer_li img.fade-in,
.page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-left-con #answer_li img.fade-in,
.page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-area__inner #answer_li img.fade-in,
.page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-left-con #answer_li img.fade-in {
  animation: fadeIn 0.5s ease-in-out forwards;
}
.page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-option,
.page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-option,
.page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option,
.page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-option,
.page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-option,
.page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option,
.page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 24.5%;
  max-width: 250px;
  background: #fff;
  border-radius: 2rem;
  padding: 0;
  gap: 2rem;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-option,
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-option,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-option,
  .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-option,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option {
    width: 100%;
    flex-direction: row;
    aspect-ratio: inherit;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-option,
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-option,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-option,
  .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-option,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option {
    width: 100%;
    flex-direction: row;
    aspect-ratio: inherit;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-option,
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-option,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-option,
  .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-option,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option {
    max-width: fit-content;
    margin: auto;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-option,
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-option,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-option,
  .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-option,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option {
    width: 100%;
    padding: 10px;
    gap: 10px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-option,
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-option,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-option,
  .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-option,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option {
    max-width: 500px;
    margin: auto;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-option,
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-option,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-option,
  .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-option,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option {
    max-width: 100px;
  }
}
.page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-option .drag-item,
.page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-option .drag-item,
.page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option .drag-item,
.page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option .drag-item, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-option .drag-item,
.page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-option .drag-item,
.page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option .drag-item,
.page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option .drag-item {
  padding: 15px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-option .drag-item,
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-option .drag-item,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option .drag-item,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option .drag-item, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-option .drag-item,
  .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-option .drag-item,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option .drag-item,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option .drag-item {
    padding: 10px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-option .drag-item,
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-option .drag-item,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option .drag-item,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option .drag-item, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-option .drag-item,
  .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-option .drag-item,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option .drag-item,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option .drag-item {
    padding: 0;
  }
}
.page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-option .drag-item,
.page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-option .quiz-option__item,
.page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-option .drag-item,
.page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-option .quiz-option__item,
.page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option .drag-item,
.page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option .quiz-option__item,
.page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option .drag-item,
.page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option .quiz-option__item, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-option .drag-item,
.page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-option .quiz-option__item,
.page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-option .drag-item,
.page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-option .quiz-option__item,
.page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option .drag-item,
.page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option .quiz-option__item,
.page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option .drag-item,
.page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option .quiz-option__item {
  max-width: 220px !important;
  max-height: 150px;
  aspect-ratio: 2.5/1.9;
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-option .drag-item,
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-option .quiz-option__item,
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-option .drag-item,
  .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-option .quiz-option__item,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option .drag-item,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option .quiz-option__item,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option .drag-item,
  .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option .quiz-option__item, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-option .drag-item,
  .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-option .quiz-option__item,
  .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-option .drag-item,
  .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-option .quiz-option__item,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option .drag-item,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option .quiz-option__item,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option .drag-item,
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option .quiz-option__item {
    width: 75%;
  }
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .is-app .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-option .drag-item,
  .is-app .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-option .quiz-option__item,
  .is-app .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-option .drag-item,
  .is-app .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-option .quiz-option__item,
  .is-app .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option .drag-item,
  .is-app .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option .quiz-option__item,
  .is-app .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option .drag-item,
  .is-app .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option .quiz-option__item, .is-app .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-option .drag-item,
  .is-app .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-option .quiz-option__item,
  .is-app .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-option .drag-item,
  .is-app .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-option .quiz-option__item,
  .is-app .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option .drag-item,
  .is-app .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option .quiz-option__item,
  .is-app .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option .drag-item,
  .is-app .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option .quiz-option__item {
    width: 100%;
    max-width: 100% !important;
  }
}
@media (orientation: landscape) and (max-width: 1024px) {
  .is-app .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-option .drag-item,
  .is-app .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-option .quiz-option__item,
  .is-app .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-option .drag-item,
  .is-app .page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-option .quiz-option__item,
  .is-app .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option .drag-item,
  .is-app .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option .quiz-option__item,
  .is-app .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option .drag-item,
  .is-app .page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option .quiz-option__item, .is-app .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-option .drag-item,
  .is-app .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-option .quiz-option__item,
  .is-app .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-option .drag-item,
  .is-app .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-option .quiz-option__item,
  .is-app .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option .drag-item,
  .is-app .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option .quiz-option__item,
  .is-app .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option .drag-item,
  .is-app .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option .quiz-option__item {
    max-width: 170px !important;
  }
}
.page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-option .drag-item button,
.page--clil-6.clil-con-row .quiz-con-wrap .drag-area .drag-option .quiz-option__item button,
.page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-option .drag-item button,
.page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-option .quiz-option__item button,
.page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option .drag-item button,
.page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option .quiz-option__item button,
.page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option .drag-item button,
.page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option .quiz-option__item button, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-option .drag-item button,
.page--clil-8.clil-con-row .quiz-con-wrap .drag-area .drag-option .quiz-option__item button,
.page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-option .drag-item button,
.page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-option .quiz-option__item button,
.page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option .drag-item button,
.page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .drag-option .quiz-option__item button,
.page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option .drag-item button,
.page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option .quiz-option__item button {
  width: 100%;
  height: 100%;
}
.page--clil-6.clil-con-row .quiz-con-wrap .drag-area .quiz-option,
.page--clil-6.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option, .page--clil-8.clil-con-row .quiz-con-wrap .drag-area .quiz-option,
.page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option {
  background: transparent;
  padding: 0 !important;
}
.page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-left-con {
  width: 100% !important;
  aspect-ratio: 8/5;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--clil-8.clil-con-row .quiz-con-wrap .quiz-con-wrap-inner .quiz-option {
    max-width: 90px;
  }
}
.page--clil-9 .quiz-con-wrap {
  padding: 0;
}
.page--clil-9 .quiz-con-wrap-inner {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 3rem;
}
.page--clil-9 .quiz-con-wrap-inner > div {
  height: 100%;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--clil-9 .quiz-con-wrap-inner {
    flex-direction: column;
  }
}
.page--clil-9 .quiz-left-con {
  width: 60%;
  background: #fff;
  border-radius: 4rem;
  border: 10px solid #6bcff6;
  overflow: hidden;
  position: relative;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--clil-9 .quiz-left-con {
    border-width: 5px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--clil-9 .quiz-left-con {
    width: 100%;
    max-width: 500px;
    margin: auto;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--clil-9 .quiz-left-con {
    max-width: 360px;
  }
}
.page--clil-9 .quiz-left-con .quiz-left-con__canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  left: 0;
  top: 0;
  z-index: 1;
}
.page--clil-9 .quiz-right-con {
  width: 15%;
  position: relative;
}
@media (orientation: landscape) and (min-width: 950px) and (max-width: 1366px) {
  .page--clil-9 .quiz-right-con {
    width: 13%;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--clil-9 .quiz-right-con {
    width: 100%;
    margin: auto;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--clil-9 .quiz-right-con {
    width: 11%;
  }
}
.page--clil-9 .quiz-option {
  width: 100%;
  height: 100%;
  max-width: 100% !important;
  background: #E6E7E8;
  border-radius: 4rem;
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.2rem;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--clil-9 .quiz-option {
    max-width: 500px !important;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--clil-9 .quiz-option {
    max-width: 500px !important;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 1023px) and (orientation: landscape) {
  .page--clil-9 .quiz-option {
    gap: 10px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--clil-9 .quiz-option {
    padding: 10px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--clil-9 .quiz-option {
    flex-direction: row;
    margin: auto;
  }
}
.page--clil-9 .quiz-option__item {
  min-width: 40px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1023px) {
  .page--clil-9 .quiz-option__item {
    border-width: 4px !important;
  }
}
.page--clil-9 .quiz-option .white {
  background: #fff;
}
.page--clil-9 .quiz-option .green {
  background: #009444;
}
.page--clil-9 .quiz-option .yellow {
  background: #FFDE17;
}
.page--clil-9 .quiz-option .brown {
  background: #8B5E3C;
}
.page--clil-9 .quiz-option .orange {
  background: #FF9933;
}
.page--clil-9 .quiz-option .purple {
  background: #9933FF;
}
.page--clil-9 .quiz-option .blue {
  background: #3333FF;
}
.page--clil-9 .quiz-option__item {
  width: 55%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 8px solid #6bcff6;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 1023px) and (orientation: portrait) {
  .page--clil-9 .quiz-option__item {
    width: 80px;
  }
}
.page--clil-9 .quiz-option__item button {
  width: 100%;
  height: 100%;
  border: 1px solid;
}
.page--clil-9 .quiz-option__item:active {
  border: 8px solid #404cb5;
}
.page--clil-9 .quiz-option__item--active {
  border: 8px solid #404cb5;
}

.page--resources .page__main-tit {
  color: #000;
}
.page--resources .select-con-list > li:nth-of-type(1) .select-con-list__img-inner {
  background-image: url("/assets/images/contents/resource-options-0-5ad726f97c59714c36b725a364833bac.png");
}
.page--resources .select-con-list > li:nth-of-type(2) .select-con-list__img-inner {
  background-image: url("/assets/images/contents/resource-options-1-50d8993277eedf2fb1a30a3aadf31c06.png");
}
.page--resources .select-con-list > li:nth-of-type(3) .select-con-list__img-inner {
  background-image: url("/assets/images/contents/resource-options-2-16bccd770670d4c699366727f34ec020.png");
}
.page--resources .select-con-list > li:nth-of-type(4) .select-con-list__img-inner {
  background-image: url("/assets/images/contents/resource-options-3-c85f6290bb40de7a03e671e0e9c09c74.png");
}
.page--resources .select-con-list > li:nth-of-type(5) .select-con-list__img-inner {
  background-image: url("/assets/images/contents/resource-options-4-ebcd67b1592066ab0c17da41f0c50604.png");
}
.page--resources .select-con-list > li:nth-of-type(6) .select-con-list__img-inner {
  background-image: url("/assets/images/contents/resource-options-5-3aeb0ce02b339ccabd74aad22f3bb378.png");
}
.page--resources .select-con-list > li:nth-of-type(7) .select-con-list__img-inner {
  background-image: url("/assets/images/contents/resource-options-6-4e331420e5e5b1c6940f4581afa519f6.png");
}
.page--resources .select-con-list:has(.select-con-list__item:hover) .select-con-list__img-inner {
  transform: rotate(0deg);
}