@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;
  scrollbar-gutter: stable !important;
}

/* 고정 레이어에서 배경 스크롤 방지 */
body.scroll-lock {
  position: fixed;
  top: var(--scroll-y); /* 잠금 시 스크롤 위치 유지 */
  width: 100%;
  overflow: hidden;
}

/* 기본 링크 스타일 초기화 */
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,
li {
  list-style: none;
}

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

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

/* 사용자 선호 모션 설정 반영 */
@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;
  }
}
span {
  display: inline-block;
}

input[type=range] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: transparent;
  cursor: pointer;
}

/* Chrome / Safari / Edge */
input[type=range]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: transparent;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ED4C33;
  margin-top: -4px; /* 트랙 중앙 정렬 */
  cursor: pointer;
}

/* Firefox */
input[type=range]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: transparent;
}

input[type=range]::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background: transparent;
}

input[type=range]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ED4C33;
  cursor: pointer;
}

* {
  -webkit-tap-highlight-color: transparent; /* 모바일 터치 회색 반응 제거 */
  outline: none;
}

/* ############################################ 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.15) rotate(0deg);
  }
  25% {
    transform: scale(1.15) rotate(5deg);
  }
  50% {
    transform: scale(1.15) rotate(0deg);
  }
  75% {
    transform: scale(1.15) rotate(-5deg);
  }
  100% {
    transform: scale(1.15) 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;
    top: 50%;
    transform: translateY(-50%);
  }
  to {
    opacity: 0;
    top: -300px;
    transform: translateY(-50%);
  }
}
@keyframes fade-in-right {
  from {
    opacity: 0;
    top: 50%;
    left: -400px;
    transform: translate(-50%, -50%);
  }
  to {
    opacity: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
@keyframes fade-in-right {
  from {
    opacity: 0;
    top: 50%;
    left: -400px;
    transform: translate(-50%, -50%);
  }
  to {
    opacity: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
@font-face {
  font-display: swap;
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 100;
  src: url("/assets/fonts/notoSans/noto-sans-v39-latin-100-88d4f2561713aec71a5bbda1e45a4441.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 200;
  src: url("/assets/fonts/notoSans/noto-sans-v39-latin-200-fcf78850315dc740982e2212340982b5.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 300;
  src: url("/assets/fonts/notoSans/noto-sans-v39-latin-300-e646d76d4b800e27b09aa8c6c2055197.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/fonts/notoSans/noto-sans-v39-latin-regular-b35fac17d24450c3c7e27a11ce54cff9.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Noto Sans";
  font-style: italic;
  font-weight: 400;
  src: url("/assets/fonts/notoSans/noto-sans-v39-latin-400italic-aaafe5bdcc53476fa14b05868399fc80.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 500;
  src: url("/assets/fonts/notoSans/noto-sans-v39-latin-500-1835719ea5e7a01b671842dbdd2cea36.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 600;
  src: url("/assets/fonts/notoSans/noto-sans-v39-latin-600-b9f801dc4838cd1e6b3e619d2529bcb1.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 700;
  src: url("/assets/fonts/notoSans/noto-sans-v39-latin-700-90894e9e092aee649a832b670d752339.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Noto Sans";
  font-style: italic;
  font-weight: 700;
  src: url("/assets/fonts/notoSans/noto-sans-v39-latin-700italic-9791d6db5d2a3b55906aba053d7c592f.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 800;
  src: url("/assets/fonts/notoSans/noto-sans-v39-latin-800-532d3f14ad50b8f7b65ca0774a4c5dd0.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 900;
  src: url("/assets/fonts/notoSans/noto-sans-v39-latin-900-8cab5d3dc26256bf6131ab4500f14c4e.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100;
  src: url("/assets/fonts/montserrat/montserrat-v29-latin-100-1f5312b0abaee85a58f636f5d7345bda.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 100;
  src: url("/assets/fonts/montserrat/montserrat-v29-latin-100italic-861dfb5d68d9da38e7529757d9485b97.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 200;
  src: url("/assets/fonts/montserrat/montserrat-v29-latin-200-0941a59d32b55d5ed3e0d456f0f7b7b2.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 200;
  src: url("/assets/fonts/montserrat/montserrat-v29-latin-200italic-67ce0a9189c8a05943fc0c6270e64272.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300;
  src: url("/assets/fonts/montserrat/montserrat-v29-latin-300-e7befc1c25aac4d4ea43b20f84ef3fe4.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 300;
  src: url("/assets/fonts/montserrat/montserrat-v29-latin-300italic-b860e9f2365b72c8f424c3296231992d.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/fonts/montserrat/montserrat-v29-latin-regular-74795056a2358804684c7e9d0479f484.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 400;
  src: url("/assets/fonts/montserrat/montserrat-v29-latin-italic-5ffaea2c4b6a230469b362dda9796e3a.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  src: url("/assets/fonts/montserrat/montserrat-v29-latin-500-3fbaa6504d46b66c2a2313375c417538.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 500;
  src: url("/assets/fonts/montserrat/montserrat-v29-latin-500italic-cbc74d600d15c2aefa931f1ef1eb7f78.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  src: url("/assets/fonts/montserrat/montserrat-v29-latin-600-5c43ef701a5404b9ac81708cd6f6e979.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 600;
  src: url("/assets/fonts/montserrat/montserrat-v29-latin-600italic-1fa0c4010bb44d94fbbebc3d00a6a057.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  src: url("/assets/fonts/montserrat/montserrat-v29-latin-700-0c556945fe4b5494525a777fb7f0f07a.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 700;
  src: url("/assets/fonts/montserrat/montserrat-v29-latin-700italic-c075ba910c4228125c65d2d4daef2c2b.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  src: url("/assets/fonts/montserrat/montserrat-v29-latin-800-cd58063efe8b14a01f207598e47eda6b.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 800;
  src: url("/assets/fonts/montserrat/montserrat-v29-latin-800italic-1b3035248a06a6e5aabaf60cf540bd01.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 900;
  src: url("/assets/fonts/montserrat/montserrat-v29-latin-900-cf103e811944ed4dc16c5ca0f3a74c7e.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 900;
  src: url("/assets/fonts/montserrat/montserrat-v29-latin-900italic-fbcf3dc38054c1d7e01dab5b9a104025.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100;
  src: url("/assets/fonts/IBMPlexSans-Thin.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 100;
  src: url("/assets/fonts/IBMPlexSans-ThinItalic.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 200;
  src: url("/assets/fonts/IBMPlexSans-ExtraLight.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 200;
  src: url("/assets/fonts/IBMPlexSans-ExtraLightItalic.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 300;
  src: url("/assets/fonts/IBMPlexSans-Light.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 300;
  src: url("/assets/fonts/IBMPlexSans-LightItalic.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400;
  src: url("/assets/fonts/IBMPlexSans-Italic.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/fonts/IBMPlexSans-Text.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400;
  src: url("/assets/fonts/IBMPlexSans-TextItalic.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  src: url("/assets/fonts/IBMPlexSans-Medium.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 500;
  src: url("/assets/fonts/IBMPlexSans-MediumItalic.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  src: url("/assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 600;
  src: url("/assets/fonts/IBMPlexSans-SemiBoldItalic.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  src: url("/assets/fonts/IBMPlexSans-Bold.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 700;
  src: url("/assets/fonts/IBMPlexSans-BoldItalic.woff2") format("woff2");
}
body {
  font-family: "Noto Sans", "Montserrat", "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.2;
  color: #232323;
  color: #232323;
}

h1 {
  font-size: 6rem;
  font-weight: 800;
  line-height: normal;
  color: #232323;
}

h2 {
  font-size: 4.8rem;
  font-weight: 700;
  line-height: normal;
  color: #232323;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  h2 {
    font-size: 26px;
  }
}

h3 {
  font-size: 3.4rem;
  font-weight: 500;
  line-height: 1.2;
  color: #232323;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  h3 {
    font-size: 26px;
  }
}

h4 {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.2;
  color: #232323;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  h4 {
    font-size: 18px;
  }
}

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

h5 {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.2;
  color: #232323;
}

.body-txt-1 {
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.2;
  color: #232323;
}

.body-txt-2 {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: normal;
  color: #232323;
}

.body-txt-3 {
  font-size: 2.1rem;
  font-weight: 400;
  line-height: normal;
  color: #232323;
}

.body-txt-4 {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: normal;
  color: #232323;
}

.body-txt-5 {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: normal;
  color: #232323;
}

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

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

.main-tit h3 {
  font-size: 3rem;
  font-weight: 600;
  line-height: 40px;
  color: #232323;
}

.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%;
  position: fixed;
  top: 0;
  left: 0;
  background: #ECF7FF;
  z-index: 101;
}
.header .header__inner {
  width: 100%;
  height: 70px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: #009A85;
  border-radius: 999px;
  padding: 0 55px;
  box-shadow: 4px 8px 15px rgba(0, 0, 0, 0.2);
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .header .header__inner {
    border-radius: 0;
    box-shadow: none;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .header .header__inner {
    border-radius: 0;
    box-shadow: none;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .header .header__inner {
    height: 65px;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .header .header__inner {
    padding: 0 50px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .header .header__inner {
    padding-left: 14px;
    padding-right: 24px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .header .header__inner {
    padding: 0 8px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .header .header__inner {
    height: 54px;
  }
}
.header .header__inner.teacher {
  background: #0072BC;
}
.header .header__inner .fl-row {
  width: max-content;
  justify-content: start;
}
.header .header__inner h1.logo {
  width: 100%;
  max-width: 120px;
  font-size: 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .header .header__inner h1.logo {
    max-width: 105px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .header .header__inner h1.logo {
    max-width: 88px;
  }
}
.header .header__inner .gnb {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 40px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .header .header__inner .gnb {
    gap: 30px;
  }
}
.header .header__inner .gnb .btn-join-inst {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 30px;
  background: #fff;
  padding-left: 16px;
  padding-right: 12px;
  gap: 5px;
  color: #0072BC;
  font-weight: 700;
  border-radius: 100px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.header .header__inner .gnb .btn-join-inst .icon.check {
  width: 16px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_inst-check-4faf6ecf7c34e02c2f5a307463ed26b2.png") no-repeat center center/100% auto;
}
.header .header__inner .gnb .btn-join-inst .icon.arrow {
  width: 14px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_arr-right-big-e90911a81253c27135b8cd26f6b6c415.png") no-repeat center center/100% auto;
}
.header .header__inner .gnb .btn-join-inst.is-active .icon.check {
  width: 26px;
  background: url("/assets/images/icon/ic_my-inst-bcc6bb238cc3c45fd40e53b833472a51.png") no-repeat center center/100% auto;
}
.header .header__inner .gnb .user-name {
  font-size: 2.4rem;
  font-weight: 400;
  line-height: auto;
  color: #232323;
  color: #fff;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .header .header__inner .gnb .user-name {
    display: none;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .header .header__inner .gnb .user-name {
    display: none;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .header .header__inner .gnb .btn-join-inst,
  .header .header__inner .gnb .btn-home,
  .header .header__inner .gnb .btn-mypage,
  .header .header__inner .gnb .btn-logout {
    display: none;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .header .header__inner .gnb .btn-join-inst,
  .header .header__inner .gnb .btn-home,
  .header .header__inner .gnb .btn-mypage,
  .header .header__inner .gnb .btn-logout {
    display: none;
  }
}
.header .header__inner .gnb__list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .header .header__inner .gnb__list {
    gap: 14px;
  }
}
.header .header__inner .gnb__list li > a {
  width: 44px;
  aspect-ratio: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.header .header__inner .gnb__list li > a img {
  width: 34px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .header .header__inner .gnb__list li > a img {
    width: 26px;
  }
}

.mobile-gnb {
  width: 240px;
  height: 100%;
  background: #fff;
  position: fixed;
  top: 0;
  z-index: 10000;
  left: -241px;
  transition: all 0.3s ease;
}
.mobile-gnb.active {
  left: 0;
}
.mobile-gnb--overlay {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  display: none;
}
.mobile-gnb--overlay.active {
  display: block;
}
.mobile-gnb .btn-gnb-close {
  position: absolute;
  top: 10px;
  left: 15px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .mobile-gnb .btn-gnb-close {
    top: 4px;
    left: 8px;
  }
}
.mobile-gnb .user-info {
  height: 285px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .mobile-gnb .user-info {
    height: 180px;
  }
}
.mobile-gnb .user-info__icon {
  width: 52px;
  aspect-ratio: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
  color: #232323;
  color: #fff;
  background: #009A85;
  border-radius: 50%;
}
.mobile-gnb .user-info__name {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: #232323;
}
.mobile-gnb__list {
  padding-top: 24px;
  border-top: 12px solid #F3F4F5;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .mobile-gnb__list {
    padding-top: 14px;
  }
}
.mobile-gnb__item {
  height: 48px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
}
.mobile-gnb__item.on > a {
  color: #009A85;
  font-weight: 700;
}
.mobile-gnb__item:active > a {
  color: #009A85;
  font-weight: 700;
}
.mobile-gnb__item > a, .mobile-gnb__item > button {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  color: #232323;
}
.mobile-gnb .btn-logout {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 20px;
}

.footer {
  width: 100%;
  margin-top: 15px;
  padding: 0 40px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .footer {
    display: none;
  }
}
.footer .footer__inner {
  height: 46px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.footer .footer__inner .copyright {
  color: #9B9B9B;
}
.footer .footer__inner .logo {
  width: 100%;
  max-width: 80px;
  position: absolute;
  right: 40px;
}

body {
  background: #ECF7FF;
  min-height: 100dvh;
}

#wrap {
  width: 100%;
  height: auto;
  position: relative;
}

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

.header {
  padding: 10px 40px 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .header {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .header {
    padding: 0;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .header {
    padding: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .header {
    padding: 0;
  }
}

@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  body.practice .header {
    display: none;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  body.practice .header {
    display: none;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  body.practice .content {
    padding-top: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  body.practice .content {
    padding-top: 0;
  }
}

.content {
  width: 100%;
  padding: 80px 40px 30px;
  height: auto;
  position: relative;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .content:has(.quiz.swiper) {
    padding-bottom: 105px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .content:has(.quiz.swiper) {
    padding-bottom: 85px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .content {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .content {
    padding-left: 60px;
    padding-right: 60px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .content {
    padding-top: 65px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .content {
    padding-top: 54px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .content {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.content.main {
  padding: 0;
}

.page {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 80px;
  padding-top: 100px;
  position: relative;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page {
    padding: 0;
  }
}
.page.select {
  padding-top: 80px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page.select {
    padding-top: 0;
  }
}
.page.teacher {
  padding-top: 80px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page.teacher {
    padding-top: 0;
  }
}
.page.quiz {
  padding-top: 55px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page.quiz {
    padding-top: 0;
  }
}

@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .level-test .page__inner,
  .exam-test .page__inner {
    background: #fff !important;
  }
}
.level-test .content .page.quiz .main-tit h3,
.exam-test .content .page.quiz .main-tit h3 {
  line-height: 45px;
  padding-left: 55px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .level-test .content .page.quiz .main-tit h3,
  .exam-test .content .page.quiz .main-tit h3 {
    line-height: 40px;
    padding-left: 50px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .level-test .content .page.quiz .main-tit h3,
  .exam-test .content .page.quiz .main-tit h3 {
    line-height: 28px;
    padding-left: 35px;
  }
}
.level-test .content .page.quiz .main-tit span,
.exam-test .content .page.quiz .main-tit span {
  width: 45px;
  height: 45px;
  padding-bottom: 2px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .level-test .content .page.quiz .main-tit span,
  .exam-test .content .page.quiz .main-tit span {
    width: 40px;
    height: 40px;
    padding-bottom: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .level-test .content .page.quiz .main-tit span,
  .exam-test .content .page.quiz .main-tit span {
    width: 28px;
    height: 28px;
    padding-bottom: 1px;
  }
}
.level-test .content .btn-control,
.exam-test .content .btn-control {
  justify-content: right;
  z-index: 1;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .level-test .content .btn-control,
  .exam-test .content .btn-control {
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 0;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.15);
    z-index: 1;
  }
}
.level-test .content .btn-control .btn,
.exam-test .content .btn-control .btn {
  min-width: auto;
  padding: 0 30px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .level-test .content .btn-control .btn,
  .exam-test .content .btn-control .btn {
    padding: 0 20px 0 24px;
  }
}
.level-test .content .btn-control .btn.btn-check--control,
.exam-test .content .btn-control .btn.btn-check--control {
  padding: 0 18px;
}
.level-test .content .btn-control .btn-next--control,
.exam-test .content .btn-control .btn-next--control {
  background: #0072BC;
  color: #fff;
  border-color: #0072BC;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .level-test .content .btn-control .btn-next--control,
  .exam-test .content .btn-control .btn-next--control {
    width: 100%;
    height: 52px;
    border-radius: 0;
    border: none !important;
  }
}
.level-test .content .btn-control .btn-next--control .icon,
.exam-test .content .btn-control .btn-next--control .icon {
  background: url("/assets/images/icon/ic_arr-next-9a682a835ed09f51bff54a88b585ef35.svg") no-repeat center center/100% auto;
}
.level-test .content .btn-control .btn-next--control.is-disabled,
.exam-test .content .btn-control .btn-next--control.is-disabled {
  border-color: #C0C0C0;
  background: #E8E8E8;
  color: #939393;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .level-test .content .btn-control .btn-next--control.is-disabled,
  .exam-test .content .btn-control .btn-next--control.is-disabled {
    background: #F1F1F1;
  }
}
.level-test .content .btn-control .btn-next--control.is-disabled .icon,
.exam-test .content .btn-control .btn-next--control.is-disabled .icon {
  background: url("/assets/images/icon/ic_control-arr-next-gr-ed51a454ecd5d2b446f3467ef20530b3.svg") no-repeat center center/100% auto;
}

@media (orientation: portrait) and (max-width: 1024px) {
  .is-teacher.level-test .btn-control .btn-next--control,
  .is-teacher.level-test .btn-control .btn-check--control, .is-teacher.exam-test .btn-control .btn-next--control,
  .is-teacher.exam-test .btn-control .btn-check--control {
    width: 100%;
    height: 52px;
    border-radius: 0;
    border: none !important;
  }
}
.is-teacher.level-test .btn-control .btn-next--control, .is-teacher.exam-test .btn-control .btn-next--control {
  background: #009A85;
  color: #fff;
  border-color: #009A85;
}
.is-teacher.level-test .btn-control .btn-next--control .icon, .is-teacher.exam-test .btn-control .btn-next--control .icon {
  background: url("/assets/images/icon/ic_arr-next-9a682a835ed09f51bff54a88b585ef35.svg") no-repeat center center/100% auto;
}
.is-teacher.level-test .btn-control .btn-check--control, .is-teacher.exam-test .btn-control .btn-check--control {
  background: #0072BC;
  color: #fff;
  border-color: #0072BC;
}

.level-test-tit {
  position: relative;
  font-size: 7rem;
  font-weight: 900;
  text-align: center;
  color: #009A85;
  line-height: 1em;
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 0 6px 6px rgba(47, 47, 47, 0.21);
}
.level-test-tit strong {
  text-shadow: 0 6px 6px rgba(47, 47, 47, 0.21);
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .level-test-tit {
    font-size: 46px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .level-test-tit {
    font-size: 32px;
  }
}
.level-test-tit strong {
  color: #232323;
}

.level-test .header,
.level-test .navigator .current-level,
.level-test .navigator .btn-section-con-mo,
.level-test .quiz-num {
  display: none !important;
}
.level-test .content {
  padding-top: 40px;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .level-test .content {
    padding-bottom: 70px !important;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .level-test .content {
    padding-top: 10px;
  }
}
.level-test .content .navigator {
  top: 28px;
  left: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .level-test .content .navigator {
    margin-bottom: 8px !important;
  }
}
.level-test .content .page.quiz {
  padding-top: 42px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .level-test .content .page.quiz {
    padding-top: 30px;
  }
}

.exam-test .content .btn-control {
  justify-content: right;
}
.exam-test .content .page.quiz {
  padding-top: 10px;
}
.exam-test .content .exam-test-tit {
  text-align: center;
  padding: 20px 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .exam-test .content .exam-test-tit {
    padding: 0 0 20px;
  }
}

.content .level-test.swiper .swiper-pagination,
.content .exam-test.swiper .swiper-pagination {
  top: 30px;
  right: 40px;
  width: 93px;
  height: 39px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: 21px;
  color: #fff;
  border-radius: 100px;
  background: #8A8A8A;
  padding-right: 0;
  z-index: 1;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .content .level-test.swiper .swiper-pagination,
  .content .exam-test.swiper .swiper-pagination {
    width: 70px;
    height: 32px;
    left: 50%;
    bottom: 18px;
    top: auto;
    right: auto;
    gap: 4px;
    padding: 0;
    transform: translateX(-50%);
    font-size: 16px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .content .level-test.swiper .swiper-pagination,
  .content .exam-test.swiper .swiper-pagination {
    width: 55px;
    height: 24px;
    font-size: 12px;
  }
}
.content .level-test.swiper .swiper-pagination .current,
.content .exam-test.swiper .swiper-pagination .current {
  font-weight: 700;
}

.teacher-menu .page.teacher {
  padding-top: 44px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .teacher-menu .page.teacher {
    padding-top: 0;
  }
}

.header__inner {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.page--main {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
  max-width: 100%;
}
.page--main .page__inner {
  max-width: 100%;
  background: transparent;
}

.content {
  width: 100%;
}
.content .navigator {
  margin-bottom: 10px;
  position: fixed;
  left: 40px;
  top: 95px;
  z-index: 100;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .content .navigator {
    position: static;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .content .navigator {
    position: static;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .content .navigator {
    margin-bottom: 24px;
  }
}
.content .navigator .control {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  position: relative;
}
.content .navigator .control a {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .content .navigator .control {
    padding-left: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .content .navigator .control {
    padding-left: 0;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .content .navigator .control {
    padding-top: 8px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .content .navigator .control {
    padding-top: 5px;
  }
}
.content .navigator .control .btn-section-con-mo {
  aspect-ratio: 1;
  background: #009A85 url("/assets/images/icon/btn_unit-con-mo-c173988ed5b40f9050655880043e28e0.svg") no-repeat center center/100% auto;
  box-shadow: 0 4px 10px rgba(0, 154, 133, 0.5);
  margin-left: auto;
  display: none;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .content .navigator .control .btn-section-con-mo {
    width: 40px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .content .navigator .control .btn-section-con-mo {
    width: 34px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .content .navigator .control .btn-section-con-mo {
    display: block;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .content .navigator .control .btn-section-con-mo {
    display: block;
  }
}
.content .route {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 14px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .content .route {
    display: none;
  }
}
.content .route__icon {
  display: block;
  width: 24px;
  aspect-ratio: 1/1;
  background: url("/assets/images/icon/ic_unit-388d313cf9eb18bf66f5ee09a0897f1a.svg") no-repeat center center/100% auto;
  margin-left: auto;
  margin-right: 5px;
}
.content .route__item {
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  color: #232323;
  height: 100%;
  position: relative;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .content .route__item {
    font-size: 16px;
  }
}
.content .route__item.current {
  font-weight: 600;
  color: #009A85;
}
.content .route__item + .route__item {
  padding-left: 26px;
}
.content .route__item + .route__item::before {
  content: "";
  display: block;
  position: absolute;
  width: 8px;
  height: 16px;
  top: 50%;
  left: 10px;
  background: url("/assets/images/icon/ic_arr-right-navigator-c4b1343eb03aa852ed857b61615684c7.svg") no-repeat center center/100% auto;
  transform: translateY(-50%);
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .content .select .navigator {
    margin-bottom: 36px;
  }
}
.content .select .main-tit h2 {
  text-align: center;
}
.content .select .select-con__inner {
  margin: auto;
}
.content .quiz {
  height: auto;
  /* 활성화된 점 */
}
.content .quiz .page__inner {
  width: 100%;
  max-width: 1530px;
  margin: 0 auto;
  background: #fff;
  border-radius: 10px;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .content .quiz .page__inner {
    background: transparent;
  }
}
.content .quiz .swiper-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: 100px;
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  text-align: center;
  padding-right: 40px;
  z-index: 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .content .quiz .swiper-pagination {
    width: 100%;
    height: 90px;
    top: auto;
    bottom: 0;
    left: 0;
    padding-right: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .content .quiz .swiper-pagination {
    height: 60px;
  }
}
.content .quiz .swiper-pagination-bullet {
  background: #C3CDD3;
  opacity: 1;
  width: 8px;
  height: 8px;
  margin: 0 5px;
}
.content .quiz .swiper-pagination-bullet-active {
  background: #009A85;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .content .quiz .swiper.quiz {
    background: #fff;
    border-radius: 10px;
  }
}
.content .quiz .swiper-wrapper {
  height: auto !important;
}
.content .quiz .main-tit {
  padding: 30px 40px;
  line-height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 3rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .content .quiz .main-tit {
    padding: 24px 28px;
    flex-direction: column;
    align-items: start;
    gap: 16px;
  }
  .content .quiz .main-tit .btn-show-text {
    margin: auto;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .content .quiz .main-tit {
    padding: 16px 16px 4px;
    line-height: 24px;
  }
}
.content .quiz .main-tit h3 {
  position: relative;
  line-height: 40px;
  padding-left: 50px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .content .quiz .main-tit h3 {
    font-size: 18px;
    line-height: 26px;
    padding-left: 34px;
  }
}
.content .quiz .main-tit h3 span {
  width: 40px;
  height: 40px;
  line-height: 40px;
  background: #009A85;
  font-weight: bold;
  color: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .content .quiz .main-tit h3 span {
    width: 26px;
    height: 26px;
    line-height: 26px;
    top: 0;
  }
}
.content .quiz:has(.btn-show-text) .main-tit {
  padding: 23px 40px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .content .quiz:has(.btn-show-text) .main-tit {
    flex-direction: column;
    padding: 24px 28px 32px;
    gap: 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .content .quiz:has(.btn-show-text) .main-tit {
    gap: 16px;
    padding: 16px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .content .quiz:has(.btn-show-text) .quiz-con {
    height: calc(100dvh - 412px);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .content .quiz:has(.btn-show-text) .quiz-con {
    height: auto;
  }
}
.content .quiz .quiz-con {
  width: 100%;
  height: 600px;
  max-height: 600px;
  padding: 0 9rem;
  margin: auto;
  position: relative;
  padding-bottom: 4rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .content .quiz .quiz-con {
    min-height: auto;
    max-height: none;
    flex-direction: column;
    gap: 24px;
    padding-left: 28px;
    padding-right: 28px;
    padding-bottom: 85px !important;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .content .quiz .quiz-con {
    height: calc(100dvh - 340px);
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .content .quiz .quiz-con {
    height: auto;
    min-height: calc(100dvh - 340px);
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .content .quiz .quiz-con {
    height: calc(100dvh - 340px);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .content .quiz .quiz-con {
    height: auto;
    min-height: calc(100dvh - 270px);
    padding-bottom: 50px !important;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .content .quiz .quiz-con {
    height: auto;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .content .quiz .quiz-con {
    max-height: 100%;
    height: auto;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .content .quiz .quiz-con {
    flex-direction: column;
    gap: 24px;
    padding: 8px 16px 60px !important;
  }
}
.content .quiz .quiz-con.video {
  padding-right: 40px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .content .quiz .quiz-con.video {
    padding-right: 30px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .content .quiz .quiz-con.video {
    padding-right: 16px;
  }
}
.content .quiz .quiz-con.video .quiz-option {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-items: start;
}
.content .quiz .quiz-con.word--12, .content .quiz .quiz-con.reading {
  padding-left: 40px;
  padding-right: 40px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .content .quiz .quiz-con.word--12, .content .quiz .quiz-con.reading {
    padding-left: 28px;
    padding-right: 28px;
  }
}
.content .quiz .quiz-con.word--12.reading--4, .content .quiz .quiz-con.word--12.reading--4-3, .content .quiz .quiz-con.word--12.reading--5, .content .quiz .quiz-con.reading.reading--4, .content .quiz .quiz-con.reading.reading--4-3, .content .quiz .quiz-con.reading.reading--5 {
  padding-left: 9rem;
  padding-right: 9rem;
}
@media (orientation: landscape) and (max-width: 1366px) {
  .content .quiz .quiz-con.word--12.reading--4 .quiz-option, .content .quiz .quiz-con.word--12.reading--4-3 .quiz-option, .content .quiz .quiz-con.word--12.reading--5 .quiz-option, .content .quiz .quiz-con.reading.reading--4 .quiz-option, .content .quiz .quiz-con.reading.reading--4-3 .quiz-option, .content .quiz .quiz-con.reading.reading--5 .quiz-option {
    padding: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .content .quiz .quiz-con.word--12.reading--4 .quiz-option, .content .quiz .quiz-con.word--12.reading--4-3 .quiz-option, .content .quiz .quiz-con.word--12.reading--5 .quiz-option, .content .quiz .quiz-con.reading.reading--4 .quiz-option, .content .quiz .quiz-con.reading.reading--4-3 .quiz-option, .content .quiz .quiz-con.reading.reading--5 .quiz-option {
    padding: 0 34px;
  }
}
.content .quiz .quiz-con .quiz-num {
  font-size: 3.4rem;
  font-weight: bold;
  transform: translateX(-40px);
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .content .quiz .quiz-con .quiz-num {
    padding-left: 12px;
    transform: translateX(0);
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .content .quiz .quiz-con .quiz-num {
    font-size: 18px;
    padding-left: 7px;
  }
}
.content .quiz .quiz-con .quiz-con__inner {
  height: 100%;
}
@media (orientation: landscape) and (max-width: 1366px) {
  .content .quiz .quiz-con .quiz-con__inner {
    min-height: calc(100vh - 420px);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .content .quiz .quiz-con .quiz-con__inner {
    min-height: auto;
  }
}
.content .quiz .quiz-con .quiz-option {
  height: 100%;
}
@media (orientation: landscape) and (max-width: 1366px) {
  .content .quiz .quiz-con .quiz-option {
    padding: 0 50px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .content .quiz .quiz-con .quiz-option {
    padding: 0 34px;
  }
}
.content .quiz .quiz-con .quiz-option__txt {
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1.5;
  color: #232323;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .content .quiz .quiz-con .quiz-option__txt {
    font-size: 17px;
    text-indent: 0;
  }
}
.content .quiz .quiz-con .quiz-option__list {
  padding: 4px 0;
  height: 100%;
  position: relative;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .content .quiz .quiz-con .quiz-option .quiz-option__list.scroll-con {
    padding-top: 1px;
  }
}
.content .quiz .quiz-con .quiz-option__item {
  width: 100%;
  gap: 10px;
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1.5;
  color: #232323;
  position: relative;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .content .quiz .quiz-con .quiz-option__item {
    font-size: 17px;
    line-height: 28px;
  }
}
.content .quiz .quiz-con .quiz-option__item .num {
  display: flex;
  align-items: start;
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  color: #232323 !important;
}
.content .quiz .quiz-con .quiz-option__item--txt {
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 4.4rem;
  color: #232323;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .content .quiz .quiz-con .quiz-option__item--txt {
    font-size: 17px;
    line-height: 28px;
    text-indent: 0;
  }
}
.content .quiz .quiz-con .quiz-option__item .quiz-choice__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-items: start;
  gap: 1.5rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .content .quiz .quiz-con .quiz-option__item .quiz-choice__list {
    gap: 8px;
  }
}
.content .quiz .quiz-con .quiz-option__item .quiz-choice__item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-left: 34px;
  position: relative;
  cursor: pointer;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .content .quiz .quiz-con .quiz-option__item .quiz-choice__item {
    padding-left: 28px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .content .quiz .quiz-con .quiz-option__item .quiz-choice__item {
    padding-left: 20px;
  }
}
.content .quiz .quiz-con .quiz-option__item .speaker {
  display: flex;
  align-items: normal;
  font-weight: 600;
  flex-shrink: 0;
}
.content .quiz .quiz-con .quiz-option:has(.custom-select) {
  padding-top: 1px !important;
}

.btn-control {
  width: 100%;
  height: auto;
  border-top: 1px solid #D0D0D0;
  padding: 14px 40px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 0 0 10px 10px;
}
@media (orientation: landscape) and (max-width: 1366px) {
  .btn-control {
    padding: 16px 24px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .btn-control {
    background: #ECF7FF;
    border: none;
  }
}
.btn-control > div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .btn-control > div {
    width: 100%;
    gap: 12px;
    border: none;
  }
}
.btn-control .q-control {
  display: none;
}
.btn-control .q-control .score {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: normal;
  color: #232323;
  color: #8B8B8B;
  padding-right: 15px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .btn-control .q-control .score {
    transform: translateY(45px);
    transition: all 0.3s ease;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .btn-control .q-control .score {
    font-size: 15px;
  }
  .btn-control .q-control .score .score-num {
    font-size: 18px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .btn-control .q-control.pc-control {
    display: none;
  }
}
.btn-control .q-control.mo-control {
  display: none;
  flex-direction: column;
  gap: 0;
}
.btn-control .q-control.mo-control .btn {
  height: 60px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .btn-control .q-control.mo-control .btn {
    height: 52px;
  }
}
.btn-control .q-control.mo-control .score {
  display: flex;
  width: 100%;
  height: 45px;
  background: #FFC041;
  color: #232323;
  text-align: center;
  padding-right: 0;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .btn-control .q-control.mo-control .score {
    height: 33px;
  }
}
.btn-control .q-control.mo-control .score .emph-t {
  color: #232323;
  font-weight: 800;
}
.btn-control .q-control.mo-control .fl-row {
  z-index: 1;
}
.btn-control .q-control.mo-control .fl-row:has(.btn-check-again--control:not([style*="display: none"])) .btn-check-again--control {
  width: 60%;
}
.btn-control .q-control.mo-control .fl-row:has(.btn-check-again--control:not([style*="display: none"])) .btn-check-next--control {
  width: 40%;
}
.btn-control .q-control.mo-control .btn-check-again--control {
  width: 100%;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.15);
}
.btn-control .q-control.mo-control .btn-check-next--control {
  width: 100%;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.15);
}
.btn-control .btn-check.active {
  display: none;
}
.btn-control .btn-check.active + .q-control {
  display: flex;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .btn-control .btn-check.active + .q-control .score {
    transform: translateY(0);
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .btn-control .pc-control {
    display: none;
  }
}
.btn-control.mo-control {
  display: none;
  width: 100%;
  padding: 0;
}
.btn-control.mo-control .btn-check--control {
  height: 52px;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .btn-control.mo-control {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
  }
}

.go-section-con {
  width: 100%;
  max-width: 420px;
  height: 90%;
  position: fixed;
  bottom: -90%;
  left: 0;
  z-index: 999;
  transition: all 0.5s ease;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .go-section-con {
    max-width: 100vw;
    padding-top: 0;
    top: 0;
    bottom: auto;
    height: 100dvh;
    left: -150vw;
    transition: all 0.3s ease;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .go-section-con {
    max-width: 100vw;
    padding-top: 0;
    top: 0;
    bottom: auto;
    height: 100dvh;
    left: -150vw;
    transition: all 0.3s ease;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .go-section-con {
    max-width: 410px;
  }
}
.go-section-con .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  display: none;
}
.go-section-con .btn-section-con {
  width: 105px;
  height: 102px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: #009A85;
  border-radius: 10px 10px 0 0;
  position: fixed;
  left: 3%;
  bottom: 0;
  box-shadow: 4px 12px 12px rgba(0, 154, 133, 0.34);
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .go-section-con .btn-section-con {
    display: none;
  }
}
.go-section-con .btn-section-con .icon {
  width: 14px;
  height: 20px;
  background: url("/assets/images/icon/btn_unit-con-pc-bac28b4e8805a0ae5e5139e1a58c154f.svg") no-repeat center center/100% auto;
}
.go-section-con .btn-section-con .tit {
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  color: #232323;
  color: #fff;
}
.go-section-con .section-con-box {
  height: 100%;
  background: #DFE8ED;
  border-radius: 0 10px 0 0;
  padding: 30px 28px;
  overflow-y: auto;
  position: relative;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .go-section-con .section-con-box {
    height: 100%;
    border-radius: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .go-section-con .section-con-box {
    height: 100%;
    border-radius: 0;
  }
}
.go-section-con .section-con-box__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-items: start;
  gap: 20px;
}
.go-section-con .section-con-box .current {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.go-section-con .section-con-box .current--book-img {
  width: 62px;
  height: auto;
  border-radius: 2px;
  overflow: hidden;
}
.go-section-con .section-con-box .current--book-img img {
  width: 100%;
}
.go-section-con .section-con-box .current--book-txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-items: start;
}
.go-section-con .section-con-box .current-level {
  font-size: 15px;
  font-weight: 700;
  line-height: normal;
  color: #232323;
  height: auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .go-section-con .section-con-box .current-level {
    font-size: 14px;
  }
}
.go-section-con .section-con-box .current-tit {
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
  color: #232323;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .go-section-con .section-con-box .current-tit {
    font-size: 22px;
  }
}
.go-section-con .section-con-box .section-con {
  width: 100%;
}
.go-section-con .section-con-box .section-con__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.go-section-con .section-con-box .section-con__item {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  color: #232323;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.go-section-con .section-con-box .prac-tit {
  width: 100%;
  font-size: 21px;
  font-weight: 700;
  line-height: normal;
  color: #232323;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  cursor: pointer;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .go-section-con .section-con-box .prac-tit {
    font-size: 18px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .go-section-con .section-con-box .prac-tit {
    font-size: 18px;
  }
}
.go-section-con .section-con-box .prac-tit .icon {
  width: 24px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/arr_down-bk-b4b19460bb0c2d725b5bd108daefd759.svg") no-repeat center center/100% auto;
}
.go-section-con .section-con-box .prac-tit.active {
  border-bottom: 2.5px solid #009A85;
}
.go-section-con .section-con-box .prac-tit.active .icon {
  transform: rotate(-180deg);
}
.go-section-con .section-con-box .prac-tit.active ~ .corner__list {
  display: block;
}
.go-section-con .section-con-box .corner__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: none;
}
.go-section-con .section-con-box .corner__item {
  width: 100%;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  color: #232323;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  padding-left: 15px;
  cursor: pointer;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .go-section-con .section-con-box .corner__item {
    font-size: 16px;
    padding: 10px 15px;
  }
}
.go-section-con .section-con-box .corner__item:hover {
  background: #F4FFFD;
}
.go-section-con .section-con-box .corner__item > a {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.go-section-con .section-con-box .corner__item.on .corner-tit .icon {
  background: url("/assets/images/icon/ic_step-con-complete-b91dcc28959547f834ae10b51eb1784c.svg");
}
.go-section-con .section-con-box .corner .is-section {
  width: 100%;
}
.go-section-con .section-con-box .corner .is-section__item {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}
.go-section-con .section-con-box .corner .is-section__item h6 {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
  color: #232323;
  padding: 10px 15px;
  border-bottom: 1px solid #DADADA;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .go-section-con .section-con-box .corner .is-section__item h6 {
    font-size: 16px;
  }
}
.go-section-con .section-con-box .corner .is-section__item + .is-section__item {
  border-top: 1px solid #009A85;
}
.go-section-con .section-con-box .corner-tit {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.go-section-con .section-con-box .corner-tit .icon {
  width: 28px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_step-con-incomplete-393072ea6227f87505ee8ac56a6a5395.svg") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .go-section-con .section-con-box .corner-tit .icon {
    width: 26px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .go-section-con .section-con-box .corner-tit .icon {
    width: 24px;
  }
}
.go-section-con .section-con-box .corner .num {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  color: #232323;
  color: #ACACAC;
}
.go-section-con .section-con-box .corner .num .emph-t {
  font-weight: 700;
}
.go-section-con::after {
  content: "";
  display: block;
  position: absolute;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.5);
  z-index: -10;
  display: none;
}

.go-section-con.active {
  padding-top: 44px;
  bottom: 0;
}
.go-section-con.active::after {
  display: block;
}
.go-section-con.active .btn-section-con {
  box-shadow: none;
  z-index: -1;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .go-section-con.active {
    padding-top: 0;
    top: 0;
    bottom: auto;
    height: 100dvh;
    left: 0;
  }
  .go-section-con.active .section-con {
    overflow-y: auto;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .go-section-con.active {
    padding-top: 0;
    top: 0;
    bottom: auto;
    height: 100dvh;
    left: 0;
  }
  .go-section-con.active .section-con {
    overflow-y: auto;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .go-section-con.active .btn-close {
    display: block;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .go-section-con.active .btn-close {
    display: block;
  }
}
.go-section-con.active .btn-section-con {
  width: 44px;
  height: 44px;
  position: absolute;
  right: 27px;
  top: 0;
  bottom: auto;
  left: auto;
}
.go-section-con.active .btn-section-con .icon {
  width: 24px;
  height: 24px;
  background: url("/assets/images/icon/btn_unit-con-pc-active-78120b5f071d0fffe73bb9532bd6bab7.svg") no-repeat center center/100% auto;
}
.go-section-con.active .btn-section-con .tit {
  display: none;
}

@media (orientation: portrait) and (max-width: 1024px) {
  .mo-fixed {
    position: fixed;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .mo-fixed {
    position: fixed;
  }
}

.quiz-option__item:has(.num) {
  padding-left: 3.4rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-option__item:has(.num) {
    padding-left: 21px;
  }
}

.drag-box__item:has(.num) {
  padding-left: 3.4rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .drag-box__item:has(.num) {
    padding-left: 21px;
  }
}

.quiz-option__item:has(.num.is-gte10) {
  padding-left: 4.8rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-option__item:has(.num.is-gte10) {
    padding-left: 30px;
  }
}

.drag-box__item:has(.num.is-gte10) {
  padding-left: 4.8rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .drag-box__item:has(.num.is-gte10) {
    padding-left: 30px;
  }
}

/* ───── Add Book Modal (scoped) ───── */
.modal--add,
.modal--short,
.modal--create,
.modal--change,
.modal--result-detail,
.modal--help,
.modal--download,
.modal--level-test {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1000;
  font-family: "Noto Sans", "Helvetica", Arial, sans-serif;
  /* Header */
  /* Body */
  /* Footer (buttons) */
  /* 버튼은 이 모달 안에서만 적용 */
}
.modal--add .modal__inner,
.modal--short .modal__inner,
.modal--create .modal__inner,
.modal--change .modal__inner,
.modal--result-detail .modal__inner,
.modal--help .modal__inner,
.modal--download .modal__inner,
.modal--level-test .modal__inner {
  width: 500px;
  max-width: 92vw;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .modal--add .modal__inner,
  .modal--short .modal__inner,
  .modal--create .modal__inner,
  .modal--change .modal__inner,
  .modal--result-detail .modal__inner,
  .modal--help .modal__inner,
  .modal--download .modal__inner,
  .modal--level-test .modal__inner {
    width: 100%;
    max-width: calc(100vw - 32px);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .modal--add .modal__inner,
  .modal--short .modal__inner,
  .modal--create .modal__inner,
  .modal--change .modal__inner,
  .modal--result-detail .modal__inner,
  .modal--help .modal__inner,
  .modal--download .modal__inner,
  .modal--level-test .modal__inner {
    max-width: 384px;
  }
}
.modal--add .modal__header,
.modal--short .modal__header,
.modal--create .modal__header,
.modal--change .modal__header,
.modal--result-detail .modal__header,
.modal--help .modal__header,
.modal--download .modal__header,
.modal--level-test .modal__header {
  position: relative;
  padding: 2rem 3rem;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  align-items: center;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .modal--add .modal__header,
  .modal--short .modal__header,
  .modal--create .modal__header,
  .modal--change .modal__header,
  .modal--result-detail .modal__header,
  .modal--help .modal__header,
  .modal--download .modal__header,
  .modal--level-test .modal__header {
    padding: 12px 16px;
  }
}
.modal--add .modal__title,
.modal--short .modal__title,
.modal--create .modal__title,
.modal--change .modal__title,
.modal--result-detail .modal__title,
.modal--help .modal__title,
.modal--download .modal__title,
.modal--level-test .modal__title {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: normal;
  color: #232323;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .modal--add .modal__title,
  .modal--short .modal__title,
  .modal--create .modal__title,
  .modal--change .modal__title,
  .modal--result-detail .modal__title,
  .modal--help .modal__title,
  .modal--download .modal__title,
  .modal--level-test .modal__title {
    font-size: 16px;
  }
}
.modal--add .modal__close,
.modal--short .modal__close,
.modal--create .modal__close,
.modal--change .modal__close,
.modal--result-detail .modal__close,
.modal--help .modal__close,
.modal--download .modal__close,
.modal--level-test .modal__close {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  line-height: 1;
  cursor: pointer;
  background: url("/assets/images/icon/btn_modal-close-d6e866a7c54e4c403c8a8e196bf4e191.png") no-repeat center center/100% auto;
}
.modal--add .modal__body,
.modal--short .modal__body,
.modal--create .modal__body,
.modal--change .modal__body,
.modal--result-detail .modal__body,
.modal--help .modal__body,
.modal--download .modal__body,
.modal--level-test .modal__body {
  padding: 5rem 3rem 20px;
  text-align: center;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .modal--add .modal__body,
  .modal--short .modal__body,
  .modal--create .modal__body,
  .modal--change .modal__body,
  .modal--result-detail .modal__body,
  .modal--help .modal__body,
  .modal--download .modal__body,
  .modal--level-test .modal__body {
    padding: 40px 16px 32px;
  }
}
.modal--add .modal__desc,
.modal--short .modal__desc,
.modal--create .modal__desc,
.modal--change .modal__desc,
.modal--result-detail .modal__desc,
.modal--help .modal__desc,
.modal--download .modal__desc,
.modal--level-test .modal__desc {
  font-size: 2.4rem;
  font-weight: 400;
  line-height: normal;
  color: #232323;
  margin-bottom: 2rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .modal--add .modal__desc,
  .modal--short .modal__desc,
  .modal--create .modal__desc,
  .modal--change .modal__desc,
  .modal--result-detail .modal__desc,
  .modal--help .modal__desc,
  .modal--download .modal__desc,
  .modal--level-test .modal__desc {
    font-size: 16px;
    margin-bottom: 14px;
  }
}
.modal--add .modal__footer,
.modal--short .modal__footer,
.modal--create .modal__footer,
.modal--change .modal__footer,
.modal--result-detail .modal__footer,
.modal--help .modal__footer,
.modal--download .modal__footer,
.modal--level-test .modal__footer {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding-bottom: 5rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .modal--add .modal__footer,
  .modal--short .modal__footer,
  .modal--create .modal__footer,
  .modal--change .modal__footer,
  .modal--result-detail .modal__footer,
  .modal--help .modal__footer,
  .modal--download .modal__footer,
  .modal--level-test .modal__footer {
    padding-bottom: 36px;
  }
}
.modal--add .btn,
.modal--short .btn,
.modal--create .btn,
.modal--change .btn,
.modal--result-detail .btn,
.modal--help .btn,
.modal--download .btn,
.modal--level-test .btn {
  min-width: 120px;
  height: 50px;
  padding: 0 20px !important;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
  color: #232323;
  color: #fff;
  cursor: pointer;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .modal--add .btn,
  .modal--short .btn,
  .modal--create .btn,
  .modal--change .btn,
  .modal--result-detail .btn,
  .modal--help .btn,
  .modal--download .btn,
  .modal--level-test .btn {
    width: 110px;
    height: 43px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .modal--add .btn,
  .modal--short .btn,
  .modal--create .btn,
  .modal--change .btn,
  .modal--result-detail .btn,
  .modal--help .btn,
  .modal--download .btn,
  .modal--level-test .btn {
    font-size: 14px;
  }
}

.modal .btn-con {
  display: flex;
  gap: 14px;
  justify-content: center;
}

.modal--add.modal--change-class .modal__inner {
  width: 530px;
}

/* ───── Short Alert Modal ───── */
.modal--short {
  position: fixed;
  top: 50%;
  left: 50%;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  z-index: 2000;
  /* 버튼 (중앙 하나) */
}
.modal--short .modal__inner {
  width: min(420px, 92vw);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  padding: 30px;
  text-align: center;
  animation: short-alert-pop 0.18s ease-out forwards;
  transform: translateY(6px) scale(0.98);
  opacity: 0;
}
.modal--short .modal__desc {
  margin-bottom: 3rem;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: normal;
  color: #232323;
}
@keyframes short-alert-pop {
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
.modal--short .modal__body {
  margin-bottom: 16px;
}
.modal--short .modal--short .btn {
  min-width: 135px;
  height: 5rem;
  padding: 0 18px;
  border-radius: 4px;
  cursor: pointer;
  background: #009A85;
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
  color: #232323;
  color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.modal--short .modal--short .btn:hover {
  background: #085F53;
}
.modal--short .modal--short .btn:active {
  transform: translateY(1px);
}

.modal--result-detail .modal__inner {
  width: 90%;
  max-width: 1000px;
  height: auto;
}
.modal--result-detail .modal__body {
  height: 100%;
  padding: 4rem 3rem 3.7rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .modal--result-detail .modal__body {
    padding: 28px 16px 20px;
  }
}
.modal--result-detail .modal__title {
  font-size: 2.4rem;
}
.modal--result-detail .test-table--detail__header, .modal--result-detail .test-table--detail__body {
  display: grid;
  grid-template-columns: 85px 1fr 1fr 85px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .modal--result-detail .test-table--detail__header, .modal--result-detail .test-table--detail__body {
    grid-template-columns: 32px 1fr 1fr 40px;
  }
}
.modal--result-detail .test-table--detail .col {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  font-size: 15px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .modal--result-detail .test-table--detail .col {
    min-height: 43px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .modal--result-detail .test-table--detail .col {
    min-height: 36px;
    font-size: 12px;
  }
}
.modal--result-detail .test-table--detail .col.cate,
.modal--result-detail .test-table--detail .col.test-num {
  font-weight: 700;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .modal--result-detail .test-table--detail .col.cate,
  .modal--result-detail .test-table--detail .col.test-num {
    font-weight: 600;
  }
}
.modal--result-detail .test-table--detail .col.test-answer,
.modal--result-detail .test-table--detail .col.test-stu-answer {
  padding-left: 6px;
  padding-right: 6px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .modal--result-detail .test-table--detail .col.correct,
  .modal--result-detail .test-table--detail .col.incorrect {
    background-size: 18px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .modal--result-detail .test-table--detail .col.correct,
  .modal--result-detail .test-table--detail .col.incorrect {
    background-size: 12px;
  }
}
.modal--result-detail .test-table--detail__header {
  border-bottom: 1px solid #232323;
  padding-right: 15px;
}
.modal--result-detail .test-table--detail__body {
  max-height: calc(75dvh - 60px);
}
.modal--result-detail .test-table--detail__body .col {
  border-bottom: 1px solid #C1CAD0;
  padding-top: 10px;
  padding-bottom: 10px;
}
.modal--result-detail .test-table--detail__row {
  display: contents;
}

.modal--create .modal__inner,
.modal--change .modal__inner,
.modal--download .modal__inner {
  position: relative;
}
.modal--create .modal__close,
.modal--change .modal__close,
.modal--download .modal__close {
  top: 20px;
  right: 23px;
  transform: none;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .modal--create .modal__close,
  .modal--change .modal__close,
  .modal--download .modal__close {
    width: 44px;
    height: 44px;
    top: 0;
    right: 0;
    background-size: 80%;
  }
}
.modal--create .modal__desc,
.modal--change .modal__desc,
.modal--download .modal__desc {
  font-size: 18px;
  color: #8B8B8B;
  margin: 8px 0 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .modal--create .modal__desc,
  .modal--change .modal__desc,
  .modal--download .modal__desc {
    font-size: 16px;
    margin: 6px 0 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .modal--create .modal__desc,
  .modal--change .modal__desc,
  .modal--download .modal__desc {
    font-size: 14px;
  }
}
.modal--create .modal__body,
.modal--change .modal__body,
.modal--download .modal__body {
  padding-bottom: 0;
}
.modal--create .modal__body h3,
.modal--change .modal__body h3,
.modal--download .modal__body h3 {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: normal;
  color: #232323;
}
.modal--create .modal__body .form-group,
.modal--change .modal__body .form-group,
.modal--download .modal__body .form-group {
  margin-top: 16px;
}
.modal--create .modal__body .form-group .label,
.modal--change .modal__body .form-group .label,
.modal--download .modal__body .form-group .label {
  font-size: 2.1rem;
  font-weight: 700;
  line-height: normal;
  color: #232323;
  color: #0072BC;
  text-align: left;
  margin-bottom: 8px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .modal--create .modal__body .form-group .label,
  .modal--change .modal__body .form-group .label,
  .modal--download .modal__body .form-group .label {
    font-size: 16px;
    margin-bottom: 6px;
  }
}
.modal--create .modal__body .form-group .form-input,
.modal--change .modal__body .form-group .form-input,
.modal--download .modal__body .form-group .form-input {
  border-color: #3F3F3F;
  text-align: left;
}
.modal--create .modal__body .form-group .form-input:focus,
.modal--change .modal__body .form-group .form-input:focus,
.modal--download .modal__body .form-group .form-input:focus {
  color: #232323;
  border-color: #0072BC;
}
.modal--create .modal__footer,
.modal--change .modal__footer,
.modal--download .modal__footer {
  padding: 5rem 0;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .modal--create .modal__footer,
  .modal--change .modal__footer,
  .modal--download .modal__footer {
    padding: 32px 0 40px;
  }
}

.modal--change .modal__body .form-group .form-input,
.modal--change .modal__body .form-group .custom-select--modal {
  border-color: #AFAFAF;
}

.modal--help .modal__inner {
  width: 92vw;
  max-width: 1000px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .modal--help .modal__inner {
    width: 100%;
    max-width: 100%;
    height: 100%;
    border-radius: 0;
  }
}
.modal--help .modal__body {
  padding: 4rem 4rem 5rem;
  overflow-y: auto;
  max-height: calc(100dvh - 100px);
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .modal--help .modal__body {
    max-height: calc(100dvh - 47px);
  }
}
.modal--help .modal__body h4 {
  font-size: 3rem;
  font-weight: 600;
  margin-bottom: 20px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .modal--help .modal__body h4 {
    font-size: 18px;
    margin-bottom: 16px;
  }
}
.modal--help .modal__body .help-con {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .modal--help .modal__body .help-con {
    gap: 24px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .modal--help .modal__body .help-con {
    flex-direction: column;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .modal--help .modal__body .help-con {
    flex-direction: column;
  }
}
.modal--help .modal__body .help-con .img-con {
  width: 400px;
  max-width: 400px;
  flex-shrink: 0;
  height: auto;
  border-radius: 4px;
  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .modal--help .modal__body .help-con .img-con {
    width: 295px;
  }
}
.modal--help .modal__body .help-con .img-con img {
  width: 100%;
}
.modal--help .modal__body .help-con .desc-con__list {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .modal--help .modal__body .help-con .desc-con__list {
    gap: 16px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .modal--help .modal__body .help-con .desc-con__list {
    gap: 14px;
  }
}
.modal--help .modal__body .help-con .desc-con__item {
  display: flex;
  gap: 10px;
}
.modal--help .modal__body .help-con .desc-con__item .list-num {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: #009A85;
  color: #fff;
  font-size: 2.1rem;
  font-weight: 700;
  padding-top: 1px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .modal--help .modal__body .help-con .desc-con__item .list-num {
    width: 25px;
    height: 25px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .modal--help .modal__body .help-con .desc-con__item .list-num {
    width: 20px;
    height: 20px;
    font-size: 14px;
  }
}
.modal--help .modal__body .help-con .desc-con__item p {
  text-align: left;
  font-size: 21px;
  line-height: 29px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .modal--help .modal__body .help-con .desc-con__item p {
    font-size: 18px;
    line-height: 25px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .modal--help .modal__body .help-con .desc-con__item p {
    font-size: 16px;
    line-height: 20px;
  }
}

.is-teacher .modal .btn-con,
.is-teacher .modal .modal__footer {
  justify-content: center;
}
.is-teacher .modal .btn-con .btn--enter,
.is-teacher .modal .modal__footer .btn--enter {
  background: #0072BC;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .modal.modal--add {
    width: 100vw;
    height: 100dvh;
  }
  .is-teacher .modal.modal--add .modal__footer {
    padding: 0;
  }
  .is-teacher .modal.modal--add .btn--enter {
    width: 100%;
    height: 48px;
    position: fixed;
    left: 0;
    bottom: 0;
    border-radius: 0;
  }
  .is-teacher .modal.modal--add .btn--cancel {
    display: none;
  }
}
.is-teacher .modal.modal--add .modal__inner {
  width: 1000px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .modal.modal--add .modal__inner {
    width: 100%;
    max-width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .is-teacher .modal.modal--add .modal__inner .modal__header {
    padding: 16px;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .modal.modal--add .modal__inner .modal__header {
    padding: 16px 60px;
  }
  .is-teacher .modal.modal--add .modal__inner .modal__close {
    right: 44px;
  }
}
.is-teacher .modal.modal--add .modal__title {
  font-size: 2.4rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .is-teacher .modal.modal--add .modal__title {
    font-size: 18px;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .modal.modal--add .modal__body {
    padding: 28px 60px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .is-teacher .modal.modal--add .modal__body {
    padding: 28px 16px 0;
  }
}
.is-teacher .modal.modal--add .modal__desc {
  text-align: left;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .is-teacher .modal.modal--add .modal__desc {
    font-size: 17px;
    text-align: center;
  }
}
.is-teacher .modal.modal--add .table-info {
  margin-bottom: 15px;
}
.is-teacher .modal.modal--add .table-con__body {
  height: 50dvh;
  overflow-y: auto;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .is-teacher .modal.modal--add .table-con__body {
    height: calc(100dvh - 300px);
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .modal.modal--add .table-con__body {
    height: calc(100dvh - 300px);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .is-teacher .modal.modal--add .table-con__body {
    height: calc(100dvh - 280px);
  }
}
.is-teacher .modal.modal--add .table-con__header, .is-teacher .modal.modal--add .table-con__row {
  display: grid;
  grid-template-columns: 1fr 1fr 4fr 4fr 4fr;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .is-teacher .modal.modal--add .table-con__header, .is-teacher .modal.modal--add .table-con__row {
    grid-template-columns: 60px 6fr 10fr;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .is-teacher .modal.modal--add .table-con__header, .is-teacher .modal.modal--add .table-con__row {
    grid-template-columns: 44px 120px 1fr;
  }
}
.is-teacher .modal.modal--add .table-con__header .col, .is-teacher .modal.modal--add .table-con__row .col {
  min-height: 49px;
  font-size: 18px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .is-teacher .modal.modal--add .table-con__header .col, .is-teacher .modal.modal--add .table-con__row .col {
    min-height: 44px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .modal.modal--add .table-con__header .col, .is-teacher .modal.modal--add .table-con__row .col {
    font-size: 16px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .is-teacher .modal.modal--add .table-con__header .col, .is-teacher .modal.modal--add .table-con__row .col {
    font-size: 14px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .is-teacher .modal.modal--add .table-con__header .item-num,
  .is-teacher .modal.modal--add .table-con__header .date, .is-teacher .modal.modal--add .table-con__row .item-num,
  .is-teacher .modal.modal--add .table-con__row .date {
    display: none;
  }
}
.is-teacher .modal.modal--add .table-con__header {
  background: #DBE1E5;
  font-weight: 700;
}
.is-teacher .modal.modal--add .table-con__body .col {
  border-bottom: 1px solid #C1CAD0;
}
.is-teacher .modal.modal--add .modal__body:has(.add-form-con) {
  padding-top: 40px;
  padding-bottom: 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .modal.modal--add .modal__body:has(.add-form-con) {
    height: calc(100dvh - 57px);
    overflow-y: auto;
  }
}
.is-teacher .modal.modal--add .field-required {
  display: block;
  font-size: 15px;
  color: #8B8B8B;
  text-align: right;
}
.is-teacher .modal.modal--add .add-form-con {
  overflow-y: auto;
}
.is-teacher .modal.modal--add .add-form-con .required {
  color: #ED4C33;
  vertical-align: baseline;
}
.is-teacher .modal.modal--add .add-form-con .form-group {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .modal.modal--add .add-form-con .form-group {
    flex-direction: column;
    align-items: start;
    gap: 12px;
  }
}
.is-teacher .modal.modal--add .add-form-con .form-group:last-child {
  margin-bottom: 3.5rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .modal.modal--add .add-form-con .form-group.id-group {
    margin-top: 16px;
  }
}
.is-teacher .modal.modal--add .add-form-con .form-group.id-group .info-con {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .modal.modal--add .add-form-con .form-group.id-group .info-con {
    gap: 8px;
  }
}
.is-teacher .modal.modal--add .add-form-con .form-group.pw-group .input-wrapper {
  position: relative;
}
.is-teacher .modal.modal--add .add-form-con .form-group.pw-group .info-con {
  flex-direction: column;
  justify-content: start;
  gap: 5px;
}
.is-teacher .modal.modal--add .add-form-con .form-group.pw-group .info-con .form-input {
  padding-right: 60px;
}
.is-teacher .modal.modal--add .add-form-con .form-group.email-group {
  font-size: 2.4rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .modal.modal--add .add-form-con .form-group.email-group {
    font-size: 15px;
  }
}
.is-teacher .modal.modal--add .add-form-con .form-group.email-group .info-con {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  justify-content: start;
  gap: 15px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .modal.modal--add .add-form-con .form-group.email-group .info-con {
    gap: 4px;
  }
}
.is-teacher .modal.modal--add .add-form-con .form-group.email-group .form-input,
.is-teacher .modal.modal--add .add-form-con .form-group.email-group .custom-select--modal {
  font-size: 2.1rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .modal.modal--add .add-form-con .form-group.email-group .form-input,
  .is-teacher .modal.modal--add .add-form-con .form-group.email-group .custom-select--modal {
    font-size: 15px;
  }
}
.is-teacher .modal.modal--add .add-form-con .form-label {
  width: 100%;
  max-width: 180px;
  font-size: 2.1rem;
  text-align: left;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .is-teacher .modal.modal--add .add-form-con .form-label {
    font-size: 15px;
  }
}
.is-teacher .modal.modal--add .add-form-con .info-con {
  width: 100%;
  position: relative;
}
.is-teacher .modal.modal--add .add-form-con .info-con .form-hint {
  text-align: left;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .is-teacher .modal.modal--add .add-form-con .info-con .form-hint {
    font-size: 13px;
  }
}
.is-teacher .modal.modal--add .add-form-con .info-con .radio-wrap {
  display: flex;
  gap: 15px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .modal.modal--add .add-form-con .info-con .radio-wrap {
    gap: 24px;
  }
}
.is-teacher .modal.modal--add .add-form-con .info-con .radio-item {
  position: relative;
  display: flex;
  align-items: center;
}
.is-teacher .modal.modal--add .add-form-con .info-con .radio-label {
  padding-left: 30px;
  position: relative;
  font-size: 2.1rem;
}
.is-teacher .modal.modal--add .add-form-con .info-con .radio-label::before {
  top: 50%;
  transform: translateY(-50%);
}
.is-teacher .modal.modal--add .add-form-con .info-con input[type=radio]:checked + .radio-label::before {
  background: url("/assets/images/icon/ic_radio-active-df0fd6fe8322a2ad2efbb844134562ce.png") no-repeat center center/100% auto;
}
.is-teacher .modal.modal--add .add-form-con .info-con .form-input,
.is-teacher .modal.modal--add .add-form-con .info-con .custom-select--modal {
  border-color: #AFAFAF;
  text-align: left;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .is-teacher .modal.modal--add .add-form-con .info-con .form-input,
  .is-teacher .modal.modal--add .add-form-con .info-con .custom-select--modal {
    font-size: 15px;
  }
}
.is-teacher .modal.modal--add .add-form-con .info-con .form-input,
.is-teacher .modal.modal--add .add-form-con .info-con .btn--form,
.is-teacher .modal.modal--add .add-form-con .info-con .custom-select--modal {
  height: 53px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .modal.modal--add .add-form-con .info-con .form-input,
  .is-teacher .modal.modal--add .add-form-con .info-con .btn--form,
  .is-teacher .modal.modal--add .add-form-con .info-con .custom-select--modal {
    height: 40px;
    line-height: 40px;
  }
}
.is-teacher .modal.modal--add .add-form-con .info-con .form-input.is-filled {
  border-color: #232323;
}
.is-teacher .modal.modal--add .add-form-con .info-con .custom-select.is-selected {
  border-color: #232323;
}
.is-teacher .modal.modal--add .add-form-con .info-con .form-input:focus,
.is-teacher .modal.modal--add .add-form-con .info-con .custom-select--modal:focus {
  border-color: #232323;
  color: #232323;
}
.is-teacher .modal.modal--add .btn--cancel {
  display: block;
}
.is-teacher .modal.modal--add .modal__footer {
  padding-bottom: 33px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .modal.modal--add .modal__footer {
    padding-bottom: 40px;
  }
}
.is-teacher .modal.modal--resources .modal__body .custom-select--modal {
  max-width: 300px;
}
.is-teacher .modal.modal--resources .modal__body .form-group.is-error .form-input {
  border-color: #ED4C33 !important;
}
.is-teacher .modal.modal--resources .modal__body .form-group.is-error .form-error {
  font-size: 18px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .is-teacher .modal.modal--resources .modal__body .form-group.is-error .form-error {
    font-size: 16px;
  }
}
.is-teacher .modal.modal--resources .modal__desc {
  margin-top: 8px;
}
.is-teacher .modal.modal--resources.modal--institution .form-input {
  text-align: center !important;
  max-width: 423px !important;
  margin: 0 auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .modal.modal--resources.modal--institution {
    height: calc(100dvh - 65px);
    bottom: 0;
    top: auto;
    background: #EDF3F6;
  }
  .is-teacher .modal.modal--resources.modal--institution .modal__close {
    display: none;
  }
  .is-teacher .modal.modal--resources.modal--institution .modal__inner {
    width: 70%;
    max-width: calc(100vw - 48px);
    background: transparent;
    box-shadow: none;
  }
  .is-teacher .modal.modal--resources.modal--institution .modal__body {
    padding: 0;
  }
  .is-teacher .modal.modal--resources.modal--institution .modal__body h3 {
    font-size: 38px;
    margin-bottom: 32px;
  }
  .is-teacher .modal.modal--resources.modal--institution .modal__desc {
    margin-bottom: 28px;
  }
  .is-teacher .modal.modal--resources.modal--institution .modal__footer {
    padding: 28px 0 0;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .modal.modal--resources.modal--institution .modal__inner {
    width: 100%;
    max-width: 612px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .is-teacher .modal.modal--resources.modal--institution {
    height: calc(100dvh - 54px);
  }
  .is-teacher .modal.modal--resources.modal--institution .modal__inner {
    width: 100%;
  }
  .is-teacher .modal.modal--resources.modal--institution .modal__body h3 {
    font-size: 26px;
  }
  .is-teacher .modal.modal--resources.modal--institution .modal__body .modal__desc {
    font-size: 16px;
  }
}
.is-teacher .modal.modal--resources.modal--my-institution .modal__body {
  padding-bottom: 5rem !important;
}
.is-teacher .modal.modal--resources.modal--my-institution .modal__body h3 {
  margin-bottom: 32px;
}
.is-teacher .modal.modal--resources.modal--my-institution .modal__body .institute-value {
  display: block;
  width: fit-content !important;
  font-size: 24px;
  font-weight: 700;
  color: #232323;
  text-align: center;
  margin: 10px auto;
  border: none;
  background: transparent;
  border-bottom: 1.5px solid #232323;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .modal.modal--resources.modal--my-institution .modal__body .institute-value {
    margin: 10px auto 12px;
  }
}
.is-teacher .modal.modal--resources.modal--my-institution .modal__body .code-txt {
  font-size: 16px;
}
.is-teacher .modal.modal--resources.modal--my-institution .modal__body .modal__desc {
  margin-top: 32px;
  margin-bottom: 0;
}
.is-teacher .modal.modal--resources.modal--my-institution .modal__body .fl-row {
  margin: 32px auto 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .modal.modal--resources.modal--my-institution .modal__body .fl-row .btn--leave {
    margin-right: 12px;
  }
}
.is-teacher .modal.modal--resources.modal--my-institution .modal__body .fl-row .btn--change {
  display: none;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .modal.modal--resources.modal--my-institution .modal__body .fl-row .btn--change {
    display: block;
  }
}
.is-teacher .modal.modal--resources.modal--my-institution .modal__body .fl-row .btn--leave,
.is-teacher .modal.modal--resources.modal--my-institution .modal__body .fl-row .btn--change {
  padding: 0 !important;
  width: 204px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .modal.modal--resources.modal--my-institution .modal__body .fl-row .btn--leave,
  .is-teacher .modal.modal--resources.modal--my-institution .modal__body .fl-row .btn--change {
    width: 190px;
    font-size: 16px;
    font-family: "Noto Sans", sans-serif;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .is-teacher .modal.modal--resources.modal--my-institution .modal__body .fl-row .btn--leave,
  .is-teacher .modal.modal--resources.modal--my-institution .modal__body .fl-row .btn--change {
    width: 160px;
    font-size: 14px;
  }
}
.is-teacher .modal.modal--resources.modal--my-institution .modal__body .input-con {
  background: #EDF3F6;
  border-radius: 10px;
  padding: 3rem;
  margin-top: 32px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .modal.modal--resources.modal--my-institution .modal__body .input-con {
    display: none;
  }
}
.is-teacher .modal.modal--resources.modal--my-institution .modal__body .input-con p {
  font-size: 18px;
  margin-bottom: 8px;
}
@media (min-width: 1367px) {
  .is-teacher .modal.modal--resources.modal--my-institution .modal__body .modal--change {
    position: static;
  }
  .is-teacher .modal.modal--resources.modal--my-institution .modal__body .modal--change .modal__inner {
    background: transparent;
    box-shadow: none;
  }
}
@media (min-width: 1367px) and (orientation: portrait) and (max-width: 1024px), (min-width: 1367px) and (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .modal.modal--resources.modal--my-institution .modal__body .modal--change {
    position: fixed;
  }
}
@media (min-width: 1367px) {
  .is-teacher .modal.modal--resources.modal--my-institution .modal__body .modal--change .modal__header {
    display: none;
  }
}
@media (min-width: 1367px) and (orientation: portrait) and (max-width: 1024px), (min-width: 1367px) and (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .modal.modal--resources.modal--my-institution .modal__body .modal--change .modal__header {
    display: block;
  }
}
@media (min-width: 1367px) {
  .is-teacher .modal.modal--resources.modal--my-institution .modal__body .modal--change .modal__body {
    padding: 0 !important;
  }
}
.is-teacher .modal.modal--resources.modal--my-institution .modal__footer {
  padding: 20px 0 0;
  gap: 14px;
}

.q-modal {
  width: max-content;
  max-width: 100%;
  height: auto;
  position: fixed;
  padding: 10px 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 200;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .q-modal {
    padding: 10px 24px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .q-modal {
    padding: 10px 60px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .q-modal {
    padding: 0;
  }
}
.q-modal__inner {
  width: 100%;
  max-width: 1000px;
  border-radius: 10px;
  border: 1px solid #232323;
  overflow: hidden;
  background: #fff;
  box-shadow: 8px 8px 3.2rem rgba(0, 0, 0, 0.25);
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .q-modal__inner {
    max-width: 100vw;
    border: none;
    border-radius: 0;
  }
}
.q-modal__header {
  height: 52px;
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;
  background: #E4F4F1;
  padding: 0 30px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .q-modal__header {
    height: 48px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .q-modal__header {
    padding: 0 20px;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .q-modal__header {
    padding: 0 60px;
  }
}
.q-modal__header .btn-close {
  width: 32px;
  height: 32px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .q-modal__header .btn-close {
    width: 28px;
    height: 28px;
  }
}
.q-modal__content {
  padding: 30px;
  overflow-y: auto;
  max-height: 750px;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: normal;
  color: #232323;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .q-modal__content {
    padding: 20px;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .q-modal__content {
    padding: 20px 60px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .q-modal__content {
    height: calc(100dvh - 48px);
    max-height: calc(100dvh - 48px);
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .q-modal__content {
    font-size: 17px;
  }
}
.q-modal__content h6 {
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.2;
  color: #232323;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .q-modal__content h6 {
    margin-bottom: 12px;
    font-size: 20px;
  }
}
.q-modal__content p {
  margin-top: 20px;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: normal;
  color: #232323;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .q-modal__content p {
    font-size: 17px;
  }
}
.q-modal__content p > h5 {
  font-weight: 700;
  line-height: 1.5;
}
.q-modal__content p > b {
  font-weight: 600;
}
.q-modal__content p ~ h6 {
  margin-top: 20px;
}

.q-modal.active {
  display: block;
}

.modal--level-test .modal__close {
  top: 16px;
  right: 15px;
  transform: translate(0, 0);
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .modal--level-test .modal__close {
    top: 8px;
    right: 8px;
  }
}
.modal--level-test .modal__inner {
  width: 92vw;
  max-width: 1000px;
  height: auto;
  position: relative;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .modal--level-test .modal__inner {
    width: 100%;
    max-width: 343px;
  }
}
.modal--level-test .level-test {
  padding: 50px 30px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .modal--level-test .level-test {
    padding: 40px 0;
  }
}
.modal--level-test .level-test__list {
  display: flex;
}
.modal--level-test .level-test__item {
  flex: 1;
}
.modal--level-test .level-test__item .tit {
  display: flex;
  flex-direction: column;
}
.modal--level-test .level-test__item .tit .sub-txt {
  font-size: 3.4rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .modal--level-test .level-test__item .tit .sub-txt {
    font-size: 18px;
  }
}
.modal--level-test .level-test__item .tit .emph-t {
  font-size: 15rem;
  line-height: 1;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .modal--level-test .level-test__item .tit .emph-t {
    font-size: 110px;
  }
}
.modal--level-test .level-test__item .desc {
  display: inline-block;
  margin: 20px auto 55px;
  color: #232323;
  font-size: 2.4rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .modal--level-test .level-test__item .desc {
    font-size: 14px;
    margin: 10px auto 28px;
  }
}
.modal--level-test .level-test__item.test-A {
  border-right: 2.5px solid #CACACA;
}
.modal--level-test .level-test__item.test-A strong,
.modal--level-test .level-test__item.test-A .emph-t {
  color: #009A85;
}
.modal--level-test .level-test__item.test-A .btn-go-test {
  background: #009A85;
  color: #fff;
  font-weight: 700;
}
.modal--level-test .level-test__item.test-B {
  color: #ED4C33;
}
.modal--level-test .level-test__item.test-B strong,
.modal--level-test .level-test__item.test-B .emph-t {
  color: #ED4C33;
}
.modal--level-test .level-test__item.test-B .btn-go-test {
  background: #ED4C33;
  color: #fff;
  font-weight: 700;
}

.btn {
  background: #fff;
  width: fit-content;
  height: auto;
  min-height: 24px;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  cursor: pointer;
}

.btn-gnb {
  display: none;
  width: 54px;
  height: 54px;
  background: url("/assets/images/icon/ic_gnb-menu-a4313be21fdfbdd112d0f43592d87c27.svg") no-repeat center center/74% auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .btn-gnb {
    width: 44px;
    height: 44px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .btn-gnb {
    display: block;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .btn-gnb {
    display: block;
  }
}

.btn-gnb-close {
  width: 44px;
  height: 44px;
  background: url("/assets/images/icon/btn_gnb-close-da8b64ad7d5be15eb4e145d89270b066.svg") no-repeat center center/100% auto;
}

.btn-close {
  width: 44px;
  height: 44px;
  background: url("/assets/images/icon/btn_close-d96541d571b7d711614a88e1d293f5af.svg") no-repeat center center/16px auto;
  z-index: 1;
}
.mobile-gnb .icon {
  width: 32px;
  aspect-ratio: 1;
}
.mobile-gnb .btn-home .icon {
  background: url("/assets/images/icon/ic_home-gray-74f79906aa8335d5ef6d1ff7ce7643fd.svg") no-repeat center center/100% auto;
}
.mobile-gnb .btn-mypage .icon {
  background: url("/assets/images/icon/ic_mypage-gray-c90d84f6de79e21df97fa2115b7e33e0.svg") no-repeat center center/100% auto;
}
.mobile-gnb .btn-join-inst .icon {
  background: url("/assets/images/icon/ic_inst-check-mo-gray-ed1e015243dd87f7875d2cffe410eb55.png") no-repeat center center/100% auto;
}
.mobile-gnb .btn-join-inst.is-active .icon {
  background: url("/assets/images/icon/ic_my-inst-gray-bedc58106bc647bdf0206a4eb1255b7b.png") no-repeat center center/100% auto;
}
.mobile-gnb .btn-logout .icon {
  background: url("/assets/images/icon/ic_logout-gray-3e1f02d90bfd8313567825f94f42fdc6.svg") no-repeat center center/100% auto;
}
.mobile-gnb .btn-home.on .icon,
.mobile-gnb .btn-home:active .icon {
  background: url("/assets/images/icon/ic_home-green-995cc4824cdcada9da6d7aedeec98fe5.svg") no-repeat center center/100% auto;
}
.mobile-gnb .btn-mypage.on .icon,
.mobile-gnb .btn-mypage:active .icon {
  background: url("/assets/images/icon/ic_mypage-green-40654b6c691ed53eccd346128ac10bdd.svg") no-repeat center center/100% auto;
}
.mobile-gnb .btn-logout.on .icon,
.mobile-gnb .btn-logout:active .icon {
  background: url("/assets/images/icon/ic_logout-green-dbdbc4b31018f9cb0789f3551c893a84.svg") no-repeat center center/100% auto;
}

.btn--main-login {
  width: 100%;
  font-size: 3.4rem;
  font-weight: 600;
  line-height: normal;
  color: #232323;
  padding: 24px 50px;
  color: #fff;
  border: 4px solid;
  justify-content: space-between;
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.6);
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .btn--main-login {
    border-width: 3px;
    padding: 20px 50px;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .btn--main-login {
    font-size: 22px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .btn--main-login {
    padding: 12px 36px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .btn--main-login {
    padding: 12px 26px;
  }
}
.btn--main-login.stu {
  background: linear-gradient(to bottom, #02D8A6, #009A85);
  border-color: #0E8474;
}
.btn--main-login.tea {
  background: linear-gradient(to bottom, #2AA4F3, #0072BC);
  border-color: #045C96;
}
.btn--main-login.test {
  background: linear-gradient(to bottom, #FF6A53, #E94127);
  border-color: #C3422E;
}
.btn--main-login .btn__icon {
  width: 14px;
  height: 24px;
  background: url("/assets/images/icon/ic_arr-right-main-217c97672f118781c4a5a806d9f12d42.svg") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .btn--main-login .btn__icon {
    width: 10px;
  }
}

.btn--back {
  width: 50px;
  aspect-ratio: 1/1;
  border: 1px solid #CFCFCF;
  background: url("/assets/images/icon/btn_back-3e5adf68aa074459855d42c5e8134a72.svg") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .btn--back {
    width: 40px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .btn--back {
    width: 34px;
    background: url("/assets/images/icon/btn_back-3e5adf68aa074459855d42c5e8134a72.svg") no-repeat center center/100% auto;
  }
}

.current-level {
  width: 133px;
  height: 50px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .current-level {
    width: 97px;
    height: 37px;
  }
}

.level-null .current-level {
  background: url("/assets/images/contents/quest_1-e385c0870a99a17629095306afbbf2e4.png") no-repeat left center/100% auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .level-null .current-level {
    background: url("/assets/images/contents/quest_1-e385c0870a99a17629095306afbbf2e4.png") no-repeat left center/auto 100% auto;
  }
}

.level-1 .current-level {
  background: url("/assets/images/contents/quest_1-e385c0870a99a17629095306afbbf2e4.png") no-repeat left center/100% auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .level-1 .current-level {
    background: url("/assets/images/contents/quest_1-e385c0870a99a17629095306afbbf2e4.png") no-repeat left center/auto 100% auto;
  }
}

.level-2 .current-level {
  background: url("/assets/images/contents/quest_2-2adb85a14491d7bf112d0c6c2bd44f82.png") no-repeat left center/100% auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .level-2 .current-level {
    background: url("/assets/images/contents/quest_2-2adb85a14491d7bf112d0c6c2bd44f82.png") no-repeat left center/auto 100% auto;
  }
}

.level-3 .current-level {
  background: url("/assets/images/contents/quest_3-a992bd2d626decf397683370c90c1ea9.png") no-repeat left center/100% auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .level-3 .current-level {
    background: url("/assets/images/contents/quest_3-a992bd2d626decf397683370c90c1ea9.png") no-repeat left center/auto 100% auto;
  }
}

.level-4 .current-level {
  background: url("/assets/images/contents/quest_4-414c4a9e1665b864d96eb564e283b896.png") no-repeat left center/100% auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .level-4 .current-level {
    background: url("/assets/images/contents/quest_4-414c4a9e1665b864d96eb564e283b896.png") no-repeat left center/auto 100% auto;
  }
}

.level-5 .current-level {
  background: url("/assets/images/contents/quest_5-0b3599b5cb57ea1b1566d50d0737ea93.png") no-repeat left center/100% auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .level-5 .current-level {
    background: url("/assets/images/contents/quest_5-0b3599b5cb57ea1b1566d50d0737ea93.png") no-repeat left center/auto 100% auto;
  }
}

.level-6 .current-level {
  background: url("/assets/images/contents/quest_6-25431992b272299db75b7fa2d5fd9dab.png") no-repeat left center/100% auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .level-6 .current-level {
    background: url("/assets/images/contents/quest_6-25431992b272299db75b7fa2d5fd9dab.png") no-repeat left center/auto 100% auto;
  }
}

.page.quiz .btn-con {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.page.quiz .btn-con.mo {
  display: none;
  top: auto;
  bottom: 42px;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page.quiz .btn-con.mo {
    display: block;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .page.quiz .btn-con.mo {
    display: block;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page.quiz .btn-con.mo {
    bottom: 30px;
  }
  .page.quiz .btn-con.mo .btn {
    width: 44px;
  }
}
.page.quiz .btn-con.mo .btn-prev {
  left: 24px;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page.quiz .btn-con.mo .btn-prev {
    left: 16px;
  }
}
.page.quiz .btn-con.mo .btn-next {
  right: 24px;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page.quiz .btn-con.mo .btn-next {
    right: 16px;
  }
}
.page.quiz .btn-con.pc {
  display: block;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page.quiz .btn-con.pc {
    display: none;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .page.quiz .btn-con.pc {
    display: none;
  }
}
.page.quiz .btn-con .btn {
  width: 56px;
  aspect-ratio: 1;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-size: 100%;
  border: 1px solid #CFCFCF;
}
.page.quiz .btn-con .btn-prev {
  left: 4px;
  background: url("/assets/images/icon/btn_prev-4ef913f62ddebb15065cf8d4219a76c7.svg") no-repeat center center/100% auto;
}
.page.quiz .btn-con .btn-prev.is-disabled {
  background: url("/assets/images/icon/btn_prev-gr-8a2376d8c12d052be13c647bc6fcdcae.svg") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page.quiz .btn-con .btn-prev {
    width: 45px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page.quiz .btn-con .btn-prev {
    width: 34px !important;
  }
}
.page.quiz .btn-con .btn-next {
  right: 4px;
  background: url("/assets/images/icon/btn_next-41369c15ad52c0d23f1c7a3411c8b270.svg") no-repeat center center/100% auto;
}
.page.quiz .btn-con .btn-next.is-disabled {
  background: url("/assets/images/icon/btn_next-gr-c23b35ec2e691ff0bd2efc21e2f74daa.svg") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page.quiz .btn-con .btn-next {
    width: 45px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page.quiz .btn-con .btn-next {
    width: 34px !important;
  }
}

.btn-control .btn {
  min-width: 170px;
  height: 50px;
  border: 1px solid #009A85;
  color: #009A85;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  color: #232323;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .btn-control .btn {
    min-width: 140px;
    font-size: 16px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .btn-control .btn {
    min-width: 125px;
    height: 43px;
    font-size: 14px;
  }
}
.btn-control .btn .icon {
  width: 20px;
  aspect-ratio: 1;
}
.btn-control .btn-check-next--control {
  background: #0072BC;
}
.btn-control .btn-prev--control,
.btn-control .btn-next--control {
  opacity: 1;
  cursor: pointer;
  transition: opacity 0.3s ease;
  padding: 0 30px;
  gap: 5px;
  color: #009A85;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .btn-control .btn-prev--control,
  .btn-control .btn-next--control {
    padding: 0 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .btn-control .btn-prev--control,
  .btn-control .btn-next--control {
    padding: 0 10px;
  }
}
.btn-control .btn-prev--control .icon {
  background: url("/assets/images/icon/ic_control-arr-prev-3a23827a8001a3160c49c90231439145.svg") no-repeat center center/100% auto;
}
.btn-control .btn-prev--control.is-disabled .icon {
  background: url("/assets/images/icon/ic_control-arr-prev-gr-1dd7f497e160a82b0fa3c39598337acf.svg") no-repeat center center/100% auto;
}
.btn-control .btn-next--control .icon {
  background: url("/assets/images/icon/ic_control-arr-next-38b5fece650b087bc85b823a4b3846da.svg") no-repeat center center/100% auto;
}
.btn-control .btn-next--control.is-disabled .icon {
  background: url("/assets/images/icon/ic_control-arr-next-gr-ed51a454ecd5d2b446f3467ef20530b3.svg") no-repeat center center/100% auto;
}
.btn-control .btn-check--control {
  padding: 0 18px;
  gap: 10px;
  color: #fff;
  background: #009A85;
}
.btn-control .btn-check--control .icon {
  width: 24px !important;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_answer-check-79d44aff1f150da40f67ed773690ac6a.png") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .btn-control .btn-check--control .icon {
    width: 20px !important;
  }
}
.btn-control .btn-check--control.is-disabled .icon {
  background: url("/assets/images/icon/ic_answer-check-gr-fe5693b05b368519b93a8548e3e38726.png") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .btn-control .btn-check--control.is-disabled .icon {
    background: url("/assets/images/icon/ic_answer-check-gr-mo-7ef3a5e5a844ef46975d9bfce1eaa7c6.png") no-repeat center center/100% auto;
  }
}
.btn-control.mo-control .btn-check--control {
  border-radius: 0;
  width: 100%;
  max-width: 100%;
  border: none !important;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.15);
}
.btn-control.mo-control .btn-check-again--control,
.btn-control.mo-control .btn-check-next--control {
  border-radius: 0;
}
.btn-control.mo-control .btn-check-again--control {
  width: 100%;
}
.btn-control .btn-check-again--control {
  background: #7C7E7E;
  border: none;
}
.btn-control .btn-check-again--control .icon {
  width: 24px;
  background: url("/assets/images/icon/ic_again-45d7ffbd66b95a4b2452e4e013902627.svg") no-repeat center center/100% auto;
}
.btn-control .btn-check-next--control {
  min-width: 130px;
  border: none;
  color: #fff;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .btn-control .btn-check-next--control {
    min-width: 120px;
  }
}
.btn-control .btn-check-next--control .icon {
  background: url("/assets/images/icon/ic_arr-next-9a682a835ed09f51bff54a88b585ef35.svg") no-repeat center center/100% auto;
}
.btn-control .is-disabled {
  cursor: not-allowed;
  pointer-events: none; /* 클릭 차단 */
  background: #E8E8E8 !important;
  border: 1px solid #C0C0C0 !important;
  color: #939393 !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .btn-control .is-disabled {
    background: #F1F1F1 !important;
    color: #8C8C8C !important;
  }
}

.video .play-btn-con .btn-play {
  width: 65px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/btn_play-c64ac971750f35d2fb32d7776dc80b6f.svg") no-repeat center center/80% auto;
}
.video .play-btn-con .btn-play.pause {
  background: url("/assets/images/icon/btn_pause-18b86e319664715836b1f8afb6889f6d.svg") no-repeat center center/80% auto;
}
.video .play-btn-con .btn-backward-10,
.video .play-btn-con .btn-forward-10 {
  width: 60px;
  aspect-ratio: 1;
}
.video .play-btn-con .btn-forward-10 {
  background: url("/assets/images/icon/btn_forward-32dbdbd2cbdba7e8870baa2812942325.svg") no-repeat center center/90% auto;
}
.video .play-btn-con .btn-backward-10 {
  background: url("/assets/images/icon/btn_backward-f2e4a2f5b97b16bfa3e03adb263c1e98.svg") no-repeat center center/90% auto;
}
.video .btn-cc {
  width: 44px;
  aspect-ratio: 1;
  position: absolute;
  top: 8px;
  right: 8px;
  background: url("/assets/images/icon/btn_cc-24f25547fb556d8449ad3bd182909a53.svg") no-repeat center center/100% auto;
}
.video .btn-cc.is-on {
  background: url("/assets/images/icon/btn_cc-on-fefa1087dcab3bbfe0ff0b5579e76a30.svg") no-repeat center center/100% auto;
}
.video .btn-script {
  width: 44px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/btn_script-9ac2fbfb079947b47309e37e5f6b33be.svg") no-repeat center center/100% auto;
}
.video .btn-script.is-on {
  background: url("/assets/images/icon/btn_script-on-5ad61f9159dae35c58050ecfca12a707.svg") no-repeat center center/100% auto;
}
.video .btn-full {
  width: 44px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/btn_full-screen-f5c1ebd17c9816db627297df0d316bf4.svg") no-repeat center center/14px auto;
}
.video .btn-play--start {
  display: block;
  width: 75px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/btn_play-c64ac971750f35d2fb32d7776dc80b6f.svg") no-repeat center center/100% auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .video .btn-play--start {
    width: 52px;
  }
}

.video .full-screen .btn-full {
  background: url("/assets/images/icon/btn_normal-screen-2070cd5b17de7b0691a8eb6c542f075e.svg") no-repeat center center/16px auto;
}
.video .full-screen .btn-script {
  display: none;
}

.btn-show-text {
  height: 54px;
  border: 2.5px solid #009A85;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: normal;
  color: #009A85;
  padding-left: 20px;
  padding-right: 16px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 8px rgba(0, 154, 133, 0.35);
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .btn-show-text {
    height: 48px;
    padding-left: 28px;
    padding-right: 24px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .btn-show-text {
    height: 40px;
    font-size: 15px;
    border-width: 2px !important;
  }
}
.btn-show-text .icon {
  width: 36px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_btn-show-text-ce24ac12c4a1eb50ea627d4deee4d72d.png") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .btn-show-text .icon {
    width: 24px;
  }
}

.btn-show-text.is-clicked {
  color: #8B8B8B;
  border-color: #8B8B8B;
  background: #D6D6D6;
  box-shadow: none;
}
.btn-show-text.is-clicked .icon {
  background: url("/assets/images/icon/ic_btn-show-text-gr-05fa3ea1070f01140cd5d756c3aaf97b.png") no-repeat center center/100% auto;
}

.btn-go-test {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 138px;
  height: 57px;
  gap: 4px;
  color: #fff;
  margin: 0 auto;
  line-height: 1;
  font-size: 2.4rem;
  border-radius: 100px !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .btn-go-test {
    width: 115px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .btn-go-test {
    width: 87px;
    height: 35px;
    font-size: 14px;
  }
}
.btn-go-test .icon {
  width: 20px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_arr-go-test-d8d5f4789f504963d7ffc26f40c8ae0e.png") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .btn-go-test .icon {
    width: 18px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .btn-go-test .icon {
    width: 16px;
  }
}

.btn-add {
  width: 100%;
  height: 44px;
  border-radius: 6px;
  background: #EDF3F6 url("/assets/images/icon/ic_btn-add-fdf9bbb6fcecf0160f612a5b4bd1bed1.png") no-repeat right 12px center/22px auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .btn-add {
    background: #EDF3F6 url("/assets/images/icon/ic_btn-add-fdf9bbb6fcecf0160f612a5b4bd1bed1.png") no-repeat right 12px center/18px auto;
  }
}

.btn-minus {
  width: 22px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff url("/assets/images/icon/ic_btn-minus-6b978b45086fcf5195f87af635a31ddd.png") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .btn-minus {
    width: 18px;
  }
}

.btn-sound {
  width: 100px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_play_music-e74236e9c9b9935b896814e3c3bc5be8.png") no-repeat center center/95% auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .btn-sound {
    width: 80px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .btn-sound {
    width: 56px;
    background: url("/assets/images/icon/ic_play_music-e74236e9c9b9935b896814e3c3bc5be8.png") no-repeat center center/51px auto;
  }
}

.btn-sound.is-playing {
  background: url("/assets/images/icon/ic_play_music-gr-17f8e6045b35fb9f3a1a110c96733ecb.png") no-repeat center center/95% auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .btn-sound.is-playing {
    background: url("/assets/images/icon/ic_play_music-gr-17f8e6045b35fb9f3a1a110c96733ecb.png") no-repeat center center/51px auto;
  }
}

.btn-sound--flip-card {
  width: 100%;
  height: 100%;
  background: transparent;
  opacity: 0;
}

.btn-speaking {
  width: 32px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_play-gr-a083fb4970d52489ce3a863acbb2eefe.png") no-repeat center center/100% auto;
  position: relative;
}
.btn-speaking.play {
  background: url("/assets/images/icon/ic_play-3979cce2ba0dcff015b9ad891cb18d25.png") no-repeat center center/100% auto;
}
.btn-speaking.pause {
  background: url("/assets/images/icon/ic_pause-3770f5f43d543d51e75a75dfe56d0f41.png") no-repeat center center/100% auto;
}
.btn-speaking span.time {
  font-size: 15px;
  font-weight: 400;
  color: #232323;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -18px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .btn-speaking span.time {
    font-size: 13px;
    bottom: -15px;
  }
}

.is-teacher .btn-speaking.play {
  background: url("/assets/images/icon/ic_play-t-417ccc487a67a465cc2937c6bbc11b5c.png") no-repeat center center/100% auto;
}
.is-teacher .btn-speaking.pause {
  background: url("/assets/images/icon/ic_pause-t-a78af935c9e2a5803c09d48dfacc92e0.png") no-repeat center center/100% auto;
}

.table-con .btn-view,
.table-con .btn-edit {
  min-width: 74px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border: 1px solid #D7DBDC;
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
  color: #8F9295;
  cursor: pointer;
  transition: 0.2s;
  font-weight: normal;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
  padding-top: 2px;
}
.table-con .btn-view .icon,
.table-con .btn-edit .icon {
  width: 20px;
  height: 20px;
  background: url("/assets/images/icon/ic_report-view-32f698d98905306663b2cc87ec9bd40e.png") no-repeat center center/100% auto;
  margin-bottom: 1px;
}
.table-con .btn-view.is-disabled {
  color: #939393;
  background: #E8E8E8;
  border-color: #C0C0C0;
}

.btn-progress-report {
  width: fit-content;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  height: 50px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  border-radius: 100px;
  background: #009A85;
  padding: 11px 28px;
  margin: 20px auto 0;
}
.btn-progress-report .icon {
  width: 28px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_progress-report-1aa57c53fad2dbd8b995962cb214d2de.png") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .btn-progress-report {
    font-size: 15px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .btn-progress-report {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #085383;
    border-radius: 0;
    z-index: 1;
  }
}

.btn-search {
  width: 24px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/btn_search-cfb8119d94172f428df2f64dd40843de.png") no-repeat center center/100% auto;
}

.btn-sortable {
  display: flex;
  gap: 6px;
  cursor: pointer;
}
.btn-sortable .icon {
  flex-shrink: 0;
  display: inline-block;
  width: 12px;
  height: 24px;
  background: url("/assets/images/icon/ic_sortable-1b4abb4ce15e2a89a3d423eec64ff7ed.png") no-repeat center center/100% auto;
}

.class-details .btn-sortable .icon {
  background: url("/assets/images/icon/ic_sortable-wh-e753fc7accbf8639c857b28e79300e55.png") no-repeat center center/100% auto;
}

.btn-edit {
  width: 35px;
  height: 36px;
  font-weight: bold;
  background: url("/assets/images/icon/btn_edit-e63d510173bc2e96c1c257a5d9903927.png") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .btn-edit {
    width: 44px;
    height: 44px;
    background-size: 30px;
  }
}

.btn-more {
  gap: 2px;
  font-size: 16px;
  color: #0072BC;
  padding: 6px 16px;
  border: 1px solid #0072BC;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .btn-more {
    font-size: 13px;
  }
}
.btn-more .icon {
  width: 20px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_arrow-blue-down-d1f55823c75054915207c79e900fb649.png") no-repeat center center/100% auto;
}

.is-teacher .btn-con {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.is-teacher .btn-con .left-con,
.is-teacher .btn-con .right-con {
  display: flex;
  gap: 10px;
}
.is-teacher .btn-con .right-con {
  margin-left: auto;
}
.is-teacher .btn-con .btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  padding: 11px 28px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .btn-con .btn {
    gap: 4px;
    font-size: 15px;
    padding: 8px 16px;
  }
}

.btn-create-new {
  background: #0072BC;
  color: #fff;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .btn-create-new {
    width: 100%;
    border-radius: 0;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1;
  }
}
.btn-create-new .icon {
  width: 28px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_plus-edfd817ce47b42a7511270dc0ea6bed0.png") no-repeat center center/100% auto;
}

.btn-export {
  background: #0072BC;
  color: #fff;
  font-weight: 700;
}
.btn-export .icon {
  width: 24px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_export-248113ae21d81f931290443aed4a0e22.png") no-repeat center center/100% auto;
}

.btn-print {
  background: #0072BC;
  color: #fff;
  font-weight: 700;
}
.btn-print .icon {
  width: 24px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_print-ff08ce90a57b7368add88b89964a149f.png") no-repeat center center/100% auto;
}

.btn-download {
  background: #0072BC;
  color: #fff;
}
.btn-download .icon {
  width: 20px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_download-6cda4e177fe7a2f55ccaaf7a4c727417.png") no-repeat center center/100% auto;
}

.btn-delete {
  width: 24px;
  height: 24px;
  background: url("/assets/images/icon/btn_delete-825309163f4c951dc0b260ed165756e1.png") no-repeat center center/100% auto;
}

.btn-con .btn-delete {
  width: fit-content;
  height: auto;
  background: #7C7E7E;
  color: #fff;
  font-weight: 700;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .btn-con .btn-delete {
    display: none;
  }
}
.btn-con .btn-delete .icon {
  width: 24px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/btn_delete-wh-d10f2c6084bd98bcecf77a1672a18c01.png") no-repeat center center/100% auto;
}

.btn--save {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: #0072BC;
  color: #fff;
  border-radius: 4px;
  padding: 10px 16px;
  font-weight: 700;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .btn--save {
    gap: 4px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .btn--save {
    padding: 8px 14px;
    font-size: 15px;
  }
}
.btn--save .icon {
  width: 24px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_save-f711cd9430fc249ffb3905505fe60592.png") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .btn--save .icon {
    width: 22px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .btn--save .icon {
    width: 20px;
  }
}

.btn--print {
  background: #0072BC;
  color: #fff;
}
.btn--print .icon {
  width: 28px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_print-ff08ce90a57b7368add88b89964a149f.png") no-repeat center center/100% auto;
}

.btn-write {
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  color: #232323;
  color: #fff;
  border-radius: 100px;
  background: #009A85;
  padding: 0 28px;
  margin-left: auto;
}
.btn-write .icon {
  width: 20px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_write-e5fddea7ce9999ba90eb6c149bff5352.png") no-repeat center center/100% auto;
}

.btn-upload {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #009A85;
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  border-radius: 4px;
  padding: 0 16px;
}
.btn-upload .icon {
  width: 24px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_upload-2bb3646c8736725be19436cbef91a60d.png") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .btn-upload {
    padding: 0 32px;
    gap: 4px;
  }
  .btn-upload .icon {
    width: 22px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .btn-upload {
    font-size: 14px;
  }
  .btn-upload .icon {
    width: 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .btn-upload {
    padding: 0 9.5px;
  }
}

.btn-reply {
  background: #0072BC;
  color: #fff;
}
.btn-reply .icon {
  width: 28px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_reply-10974fc04e0bb5be1189a960ca7e0ed4.png") no-repeat center center/100% auto;
}

.btn--cancel {
  background: #7C7E7E;
  color: #fff;
  font-weight: 700;
}

.btn--enter {
  background: #009A85;
  color: #fff;
  font-weight: 700;
}

.btn--enter:hover {
  background: #085F53;
  font-weight: 700;
}

.btn--cancel:hover {
  background: #353535;
  font-weight: 700;
}

.btn--form {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  background: #009A85;
  border-radius: 4px;
  color: #fff;
  padding: 0 16px;
  height: 53px;
  font-size: 18px;
  font-weight: 700;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .btn--form {
    font-size: 16px;
    padding: 0 8px;
    height: 40px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .btn--form {
    font-size: 14px;
  }
}

.is-teacher .btn--form {
  background: #0072BC;
}

.btn--delete-account {
  width: 175px;
  height: 60px;
  color: #939393;
  border: 1px solid #C0C0C0;
  border-radius: 4px;
  font-size: 18px;
  background: #E8E8E8;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .btn--delete-account {
    height: 40px;
    font-size: 16px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .btn--delete-account {
    font-size: 14px;
  }
}

.btn--leave {
  padding: 0 30px;
  color: #0072BC !important;
  border-radius: 4px;
  border: 1px solid #0072BC;
  font-size: 18px;
  font-weight: 700;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .btn--leave {
    background: #7C7E7E;
    color: #fff !important;
    border: none;
  }
}

.btn--change {
  background: #0072BC;
  color: white;
  border-radius: 4px;
}

.btn-eye {
  width: 34px;
  aspect-ratio: 1;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  background: no-repeat center/100% auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .btn-eye {
    width: 40px;
    right: 0;
    background-size: 24px auto;
  }
}
.btn-eye[data-state=hide] {
  background-image: url("/assets/images/icon/ic_pw-view-165172b372e3b3a178ae85686790c585.png");
}
.btn-eye[data-state=show] {
  background-image: url("/assets/images/icon/ic_pw-hide-c4d3a6cad812f99d8d2f13bafcdd638b.png");
}

.btn-gray {
  color: #fff !important;
  background: #7C7E7E;
}

.btn-blue {
  color: #fff !important;
  background: #0072BC;
}

.custom-select {
  display: inline-block;
  border-radius: 10px;
  border: 1px solid #AFAFAF;
  position: relative;
  cursor: pointer;
  background: #fff;
  margin: 0 0.3rem;
  min-width: 160px;
  vertical-align: baseline;
  margin-top: -1px !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .custom-select {
    min-width: 135px;
    border-radius: 8px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .custom-select {
    min-width: 105px;
    border-radius: 6px;
  }
}

.custom-select::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 20px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_arr-select-5446e982d84765582eca33a5876e0a4d.svg") no-repeat center/contain;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s ease;
  pointer-events: none;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .custom-select::after {
    width: 16px;
    right: 8px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .custom-select::after {
    width: 12px;
    right: 6px;
  }
}

.custom-select.is-selected {
  border-color: #232323;
}
.custom-select.is-selected::after {
  background: url("/assets/images/icon/ic_arr-select-bk-b606f7630f56a73ab0ab43c196781c4e.svg") no-repeat center/contain;
}

/* 펼쳐졌을 때 화살표 위로 */
.custom-select.open::after {
  transform: translateY(-50%) rotate(180deg);
}

/* 선택된 값 */
.custom-select__selected {
  border-radius: 6px;
  color: #afafaf;
  padding: 0 10px;
  padding-right: 40px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .custom-select__selected {
    padding-right: 32px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .custom-select__selected {
    padding: 0 6px;
    padding-right: 26px;
  }
}

.origin-select {
  display: none;
}

.custom-select__options {
  position: absolute;
  top: 100%;
  left: -1px;
  right: -1px;
  border: 1px solid #232323;
  border-radius: 10px;
  background: #fff;
  padding: 4px;
  list-style: none;
  display: none;
  z-index: 10;
  box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.15);
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .custom-select__options {
    border-radius: 6px;
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15);
  }
}

.custom-select__options.open-up {
  top: auto;
  bottom: 100%;
}

.custom-select__options li {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-left: 1rem;
  padding-right: 5px;
  border-radius: 8px;
  text-align: left;
}
@media (hover: hover) and (pointer: fine) {
  .custom-select__options li:hover {
    background: #E1F2F0;
    color: #009A85;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .custom-select__options li {
    padding-left: 2px;
  }
}

.custom-select.open .custom-select__options {
  display: block;
}

.grammar--8 .custom-select {
  margin-bottom: 8px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .grammar--8 .custom-select {
    margin-bottom: 6px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .grammar--8 .custom-select {
    margin-bottom: 4px;
  }
}

.answer-box {
  width: auto;
  border-bottom: 1px solid #232323;
  min-width: 95px;
}

.blank-box {
  display: inline-flex;
  align-items: center;
  justify-content: start;
  padding-left: 10px;
  padding-right: 40px;
  min-width: 95px;
  vertical-align: middle;
  border-radius: 8px;
  background: #EDF3F6;
  padding-right: 40px;
  transform: translateY(-3px);
  border: 1px solid transparent;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .blank-box {
    border-radius: 6px;
    transform: translateY(-2px);
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .blank-box {
    transform: translateY(-1px);
  }
}

.blank-box.is-selected {
  background: #fff;
  border: 1px solid #232323;
}

.drag-box__item--con .blank-box {
  justify-content: center;
}

.word-bank {
  width: 100%;
  background: #E8E8E8;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 4rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .word-bank {
    border-radius: 6px;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .word-bank {
    width: calc(100% - 100px);
    margin: 0 auto;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .word-bank {
    gap: 10px 16px;
    padding: 12px 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .word-bank {
    width: calc(100% - 68px);
  }
}
.word-bank .word {
  font-size: 2.8rem;
  font-weight: 400;
  line-height: normal;
  color: #232323;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .word-bank .word {
    font-size: 17px;
  }
}
.word-bank .word.is-selected {
  color: #C0C0C0;
  text-decoration: line-through;
}

.word-bank.mo-portrait {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  border-radius: 0 0 10px 10px;
  display: none;
}

.word-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  height: auto;
  gap: 30px 0;
  border: 1px solid #8B8B8B;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.13);
  background: #fff;
  padding: 30px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .word-box {
    min-height: 70px !important;
    gap: 10px 0;
    padding: 24px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .word-box {
    width: 100%;
  }
}
.word-box li {
  position: relative;
  font-size: 2.8rem;
  font-weight: 400;
  line-height: normal;
  color: #232323;
  padding-right: 30px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .word-box li {
    padding-right: 30px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .word-box li {
    font-size: 17px;
  }
}
.word-box .word.is-selected {
  color: #C0C0C0;
  text-decoration: line-through;
}
.word-box li::after {
  content: "";
  display: block;
  position: absolute;
  content: "/";
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: #232323 !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .word-box li::after {
    right: 12px;
  }
}
.word-box li:last-child {
  padding-right: 0;
}
.word-box li:last-child::after {
  display: none;
}

.quiz-option__item.correct {
  color: #009A85;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-option__item.correct {
    border: 1.5px solid #009A85;
  }
}
.quiz-option__item.correct .icon {
  display: inline-block !important;
  background: url("/assets/images/icon/ic_correct-ba3d4b32c42384d22882030f0a0fbcc5.png") no-repeat center/100% auto;
}

.quiz-option__item.incorrect {
  color: #ED4C33;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-option__item.incorrect {
    border: 1.5px solid #009A85;
  }
}
.quiz-option__item.incorrect .icon {
  display: inline-block !important;
  background: url("/assets/images/icon/ic_incorrect-e99b479beadeebfd1402736daebd5e37.png") no-repeat center/100% auto;
}

.custom-select.correct {
  border: 1px solid #009A85;
}
.custom-select.correct::after {
  background: url("/assets/images/icon/ic_correct-ba3d4b32c42384d22882030f0a0fbcc5.png") no-repeat center/100% auto;
}
.custom-select.correct::before {
  color: #009A85;
}
.custom-select.correct .custom-select__selected {
  color: #009A85 !important;
}

.custom-select.incorrect {
  border: 1px solid #ED4C33;
}
.custom-select.incorrect::after {
  background: url("/assets/images/icon/ic_incorrect-e99b479beadeebfd1402736daebd5e37.png") no-repeat center/100% auto;
}
.custom-select.incorrect::before {
  color: #ED4C33;
}
.custom-select.incorrect .custom-select__selected {
  color: #ED4C33 !important;
}

.quiz-input {
  display: inline-block;
  border: none;
  border-bottom: 1px solid #232323; /* 밑줄만 */
  font-size: 2.8rem;
  padding-left: 10px;
  padding-right: 40px;
  min-width: 95px; /* 최소 길이 */
  position: relative;
  vertical-align: baseline;
  border-radius: 0 !important;
  margin: 0 !important;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-input {
    font-size: 17px;
  }
}

.quiz-input-sentence .quiz-input {
  width: 100%;
  height: 54px;
  line-height: 54px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-input-sentence .quiz-input {
    height: 44px;
    line-height: 44px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-input-sentence .quiz-input {
    height: 32px;
    line-height: 32px;
  }
}

.quiz-input.correct,
.blank-box.correct {
  border-color: #009A85 !important;
  color: #009A85;
  background: url("/assets/images/icon/ic_correct-ba3d4b32c42384d22882030f0a0fbcc5.png") no-repeat right 10px center/20px auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-input.correct,
  .blank-box.correct {
    background: url("/assets/images/icon/ic_correct-ba3d4b32c42384d22882030f0a0fbcc5.png") no-repeat right 6px center/14px auto;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-input.correct,
  .blank-box.correct {
    background: url("/assets/images/icon/ic_correct-ba3d4b32c42384d22882030f0a0fbcc5.png") no-repeat right 6px center/14px auto;
  }
}
.quiz-input.correct::before,
.blank-box.correct::before {
  color: #009A85;
}

.quiz-input.incorrect,
.blank-box.incorrect {
  border-color: #ED4C33 !important;
  color: #ED4C33;
  background: url("/assets/images/icon/ic_incorrect-e99b479beadeebfd1402736daebd5e37.png") no-repeat right 10px center/20px auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-input.incorrect,
  .blank-box.incorrect {
    background: url("/assets/images/icon/ic_incorrect-e99b479beadeebfd1402736daebd5e37.png") no-repeat right 6px center/14px auto;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-input.incorrect,
  .blank-box.incorrect {
    background: url("/assets/images/icon/ic_incorrect-e99b479beadeebfd1402736daebd5e37.png") no-repeat right 6px center/14px auto;
  }
}
.quiz-input.incorrect::before,
.blank-box.incorrect::before {
  color: #009A85;
}

.blank-num:has(.quiz-input.correct)::before {
  color: #009A85;
}

.blank-num:has(.quiz-input.incorrect)::before {
  color: #ED4C33;
}

.custom-select--count:before,
.blank-num::before {
  content: attr(data-number) ".";
  position: absolute;
  top: 54%;
  left: 10px;
  transform: translateY(-50%);
  color: #8B8B8B;
  font-weight: 700;
  z-index: 1;
  font-size: 2.4rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .custom-select--count:before,
  .blank-num::before {
    left: 6px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .custom-select--count:before,
  .blank-num::before {
    font-size: 16px;
  }
}

.blank-num {
  position: relative;
}

.custom-select--count .custom-select__selected,
.blank-num .quiz-input,
.blank-num .blank-box {
  padding-left: 4.1rem !important;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .custom-select--count .custom-select__selected,
  .blank-num .quiz-input,
  .blank-num .blank-box {
    padding-left: 28px !important;
  }
}

.custom-select--count.is-gte10 .custom-select__selected,
.blank-num.is-gte10 .quiz-input,
.blank-num.is-gte10 .blank-box {
  padding-left: 5rem !important;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .custom-select--count.is-gte10 .custom-select__selected,
  .blank-num.is-gte10 .quiz-input,
  .blank-num.is-gte10 .blank-box {
    padding-left: 35px !important;
  }
}

span.quiz-input {
  background: #fff !important;
  border-bottom: 1px solid #232323 !important;
  vertical-align: bottom !important;
}

.quiz-option__item .icon {
  width: 20px;
  height: 20px;
  display: none;
  flex-shrink: 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-option__item .icon {
    width: 18px;
    height: 18px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-option__item .icon {
    width: 14px;
    height: 14px;
  }
}

.quiz-check {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: 1px solid #AEB8C2;
  border-radius: 8px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-check {
    border-radius: 6px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-check {
    gap: 6px;
  }
}

.quiz-option__item:has(input[type=checkbox]:checked).correct,
.quiz-option__item:has(input[type=radio]:checked).correct {
  color: #009A85 !important;
}

.quiz-option__item.correct span.quiz-check__item {
  color: #009A85 !important;
  font-weight: 700;
}

.quiz-option__item.correct .icon {
  display: inline-block !important;
  background: url("/assets/images/icon/ic_correct-ba3d4b32c42384d22882030f0a0fbcc5.png") no-repeat center/100% auto;
}

/* 오답 */
.quiz-option__item:has(input[type=checkbox]:checked).incorrect,
.quiz-option__item:has(input[type=radio]:checked).incorrect {
  color: #ED4C33 !important;
}

.quiz-option__item.incorrect span.quiz-check__item {
  color: #ED4C33 !important;
  font-weight: 700;
}

.quiz-option__item.incorrect .icon {
  display: inline-block !important;
  background: url("/assets/images/icon/ic_incorrect-e99b479beadeebfd1402736daebd5e37.png") no-repeat center/100% auto;
}

.quiz-option__item:has(input[type=checkbox]:checked) .quiz-check,
.quiz-option__item:has(input[type=radio]:checked) .quiz-check {
  border: 2.5px solid #0072BC;
  color: #0072BC;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-option__item:has(input[type=checkbox]:checked) .quiz-check,
  .quiz-option__item:has(input[type=radio]:checked) .quiz-check {
    border: 1.5px solid #0072BC;
  }
}

.quiz-option__item .quiz-check__item:has(input[type=checkbox]:checked) {
  border: 2.5px solid #0072BC;
  color: #0072BC !important;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-option__item .quiz-check__item:has(input[type=checkbox]:checked) {
    border: 1.5px solid #0072BC;
  }
}

.quiz-option__item.correct .quiz-check,
.quiz-option__item.correct .quiz-check:has(input[type=checkbox]:checked),
.quiz-con.reading--4-2 .quiz-option__item.correct,
.quiz-con.listening--5 .quiz-option__item.correct {
  outline: none !important;
  border: 2.5px solid #009A85 !important;
  color: #009A85 !important;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-option__item.correct .quiz-check,
  .quiz-option__item.correct .quiz-check:has(input[type=checkbox]:checked),
  .quiz-con.reading--4-2 .quiz-option__item.correct,
  .quiz-con.listening--5 .quiz-option__item.correct {
    border: 1.5px solid #009A85 !important;
  }
}

.quiz-option__item.incorrect .quiz-check,
.quiz-option__item.incorrect .quiz-check:has(input[type=checkbox]:checked),
.quiz-con.reading--4-2 .quiz-option__item.incorrect,
.quiz-con.listening--5 .quiz-option__item.incorrect {
  outline: none !important;
  border: 2.5px solid #ED4C33 !important;
  color: #ED4C33 !important;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-option__item.incorrect .quiz-check,
  .quiz-option__item.incorrect .quiz-check:has(input[type=checkbox]:checked),
  .quiz-con.reading--4-2 .quiz-option__item.incorrect,
  .quiz-con.listening--5 .quiz-option__item.incorrect {
    border: 1.5px solid #ED4C33 !important;
  }
}

.quiz-con.grammar--1 .quiz-option__item:has(input[type=radio]:checked),
.quiz-con.grammar--2 .quiz-option__item:has(input[type=checkbox]:checked) {
  border-color: #CACACA !important;
  background: #EDF3F6;
  border-width: 1px !important;
}

.quiz-con.grammar--1 .quiz-option__item:has(input[type=radio]:checked) .quiz-choose__item,
.quiz-con.grammar--2 .quiz-option__item:has(input[type=checkbox]:checked) .quiz-choose__item {
  color: #C0C0C0;
}

/* 체크된 경우 스타일 */
.quiz-option__item input[type=checkbox]:checked + span.quiz-check__item,
.quiz-option__item input[type=radio]:checked + span.quiz-check__item {
  color: #0072BC;
  font-weight: 700;
}

.quiz-con.word--10 .quiz-option__item input[type=checkbox]:checked + span.quiz-check__item,
.quiz-con.word--10 .quiz-option__item input[type=radio]:checked + span.quiz-check__item,
.quiz-con.word--11 .quiz-option__item input[type=checkbox]:checked + span.quiz-check__item,
.quiz-con.word--11 .quiz-option__item input[type=radio]:checked + span.quiz-check__item {
  font-weight: 400;
  -webkit-text-stroke: 0.2rem #0072BC;
}
.quiz-con.word--10 .quiz-option__item input[type=checkbox]:checked + span.quiz-check__item b,
.quiz-con.word--10 .quiz-option__item input[type=radio]:checked + span.quiz-check__item b,
.quiz-con.word--11 .quiz-option__item input[type=checkbox]:checked + span.quiz-check__item b,
.quiz-con.word--11 .quiz-option__item input[type=radio]:checked + span.quiz-check__item b {
  font-weight: 400;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--10 .quiz-option__item input[type=checkbox]:checked + span.quiz-check__item,
  .quiz-con.word--10 .quiz-option__item input[type=radio]:checked + span.quiz-check__item,
  .quiz-con.word--11 .quiz-option__item input[type=checkbox]:checked + span.quiz-check__item,
  .quiz-con.word--11 .quiz-option__item input[type=radio]:checked + span.quiz-check__item {
    -webkit-text-stroke: 0.2rem #0072BC;
  }
}

.quiz-con.word--10 .quiz-option__item.correct,
.quiz-con.word--10 .quiz-option__item.incorrect,
.quiz-con.word--11 .quiz-option__item.correct,
.quiz-con.word--11 .quiz-option__item.incorrect {
  border: none;
}
.quiz-con.word--10 .quiz-option__item.correct span.quiz-check__item,
.quiz-con.word--10 .quiz-option__item.incorrect span.quiz-check__item,
.quiz-con.word--11 .quiz-option__item.correct span.quiz-check__item,
.quiz-con.word--11 .quiz-option__item.incorrect span.quiz-check__item {
  font-weight: 400;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--10 .quiz-option__item.correct span.quiz-check__item,
  .quiz-con.word--10 .quiz-option__item.incorrect span.quiz-check__item,
  .quiz-con.word--11 .quiz-option__item.correct span.quiz-check__item,
  .quiz-con.word--11 .quiz-option__item.incorrect span.quiz-check__item {
    -webkit-text-stroke: 0.2rem #009A85;
  }
}
.quiz-con.word--10 .quiz-option__item.correct span.quiz-check__item b,
.quiz-con.word--10 .quiz-option__item.incorrect span.quiz-check__item b,
.quiz-con.word--11 .quiz-option__item.correct span.quiz-check__item b,
.quiz-con.word--11 .quiz-option__item.incorrect span.quiz-check__item b {
  font-weight: 400;
}
.quiz-con.word--10 .quiz-option__item.correct span.quiz-check__item,
.quiz-con.word--11 .quiz-option__item.correct span.quiz-check__item {
  -webkit-text-stroke: 0.2rem #009A85;
}
.quiz-con.word--10 .quiz-option__item.incorrect span.quiz-check__item,
.quiz-con.word--11 .quiz-option__item.incorrect span.quiz-check__item {
  -webkit-text-stroke: 0.2rem #ED4C33;
}

/* ✅ 체크된 경우: li에 selected 클래스 */
.quiz-option__item.is-selected {
  border: 2.5px solid #0072BC !important;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-option__item.is-selected {
    border: 1.5px solid #0072BC !important;
  }
}

.quiz-option__item.answer .icon {
  display: block !important;
  background: url("/assets/images/icon/ic_correct-ba3d4b32c42384d22882030f0a0fbcc5.png") no-repeat center/100% auto;
}

.quiz-option-fixed {
  position: fixed;
  background: rgba(0, 0, 0, 0.47);
  width: 100%;
  height: 100dvh;
  top: 0;
  left: 0;
  z-index: 500;
  display: none;
}
.quiz-option-fixed__list {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  border-radius: 10px 10px 0 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-option-fixed__list {
    margin-top: auto;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-option-fixed__list {
    max-height: 50dvh;
  }
}
.quiz-option-fixed__list .quiz-option-fixed__item:active {
  background: #E4F4F1;
  color: #009A85;
}
.quiz-option-fixed__item {
  width: 100%;
  padding: 12px 32px;
  font-size: 21px;
  font-weight: 400;
  line-height: normal;
  color: #232323;
  text-align: center;
  border-bottom: 1px solid #D6D6D6;
}
.quiz-option-fixed__item:last-child {
  border: none;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-option-fixed__item {
    font-size: 17px;
  }
}
.quiz-option-fixed__item .btn-minus {
  display: none;
}
.quiz-option-fixed__item.correct {
  color: #009A85;
  border: 1.5px solid #009A85 !important;
}
.quiz-option-fixed__item.correct .btn-minus,
.quiz-option-fixed__item.correct .icon {
  background: #fff url("/assets/images/icon/ic_correct-ba3d4b32c42384d22882030f0a0fbcc5.png") no-repeat center center/100% auto;
}
.quiz-option-fixed__item.incorrect {
  color: #ED4C33;
  border: 1.5px solid #ED4C33 !important;
}
.quiz-option-fixed__item.incorrect .btn-minus,
.quiz-option-fixed__item.incorrect .icon {
  background: #fff url("/assets/images/icon/ic_incorrect-e99b479beadeebfd1402736daebd5e37.png") no-repeat center center/100% auto;
}

.drag-box__item--con .quiz-option-fixed__item,
.quiz-option .quiz-option-fixed__item {
  border: 1px solid #232323;
  text-align: left;
  padding: 10px 12px;
  padding-right: 35px;
  border-radius: 6px;
  position: relative;
}

.drag-box__item--con .quiz-option-fixed__item .btn-minus {
  display: block;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

.quiz-con.grammar.grammar--9 .quiz-option__item.correct .blank-box,
.quiz-con.grammar.grammar--9 .quiz-option__item.incorrect .blank-box {
  background: #fff !important;
}
.quiz-con.grammar.grammar--9 .quiz-option-fixed__item.correct .icon,
.quiz-con.grammar.grammar--9 .quiz-option-fixed__item.incorrect .icon {
  display: block;
}

input[type=radio] {
  display: none;
}

.radio-label {
  font-size: 2.8rem;
  font-weight: 400;
  line-height: normal;
  color: #232323;
  cursor: pointer;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .radio-label {
    font-size: 17px;
  }
}

.radio-label::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: url("/assets/images/icon/ic_radio-basic-097771c141347d5decde4e659a93a8b7.png") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .radio-label::before {
    width: 20px;
    height: 20px;
    top: 6px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .radio-label::before {
    width: 16px;
    height: 16px;
    top: 4px;
  }
}

input[type=radio]:checked ~ .radio-label::before {
  background: url("/assets/images/icon/ic_radio-active-df0fd6fe8322a2ad2efbb844134562ce.png") no-repeat center center/100% auto;
}

.quiz-option__item.correct input[type=radio]:checked ~ .radio-label::before {
  background: url("/assets/images/icon/ic_correct-ba3d4b32c42384d22882030f0a0fbcc5.png") no-repeat center center/100% auto;
}
.quiz-option__item.correct input[type=radio]:checked ~ .radio-label {
  color: #009A85;
}

.quiz-option__item.incorrect input[type=radio]:checked ~ .radio-label::before {
  background: url("/assets/images/icon/ic_incorrect-e99b479beadeebfd1402736daebd5e37.png") no-repeat center center/100% auto;
}
.quiz-option__item.incorrect input[type=radio]:checked ~ .radio-label {
  color: #ED4C33;
}

.scroll-con {
  position: relative;
  overflow-y: auto;
  padding-right: 15px !important;
}

/* 위/아래 화살표 버튼 */
::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.ps__rail-y {
  right: 0px;
  top: 8px;
  bottom: 8px;
  width: 10px;
  background: rgba(35, 35, 35, 0.08); /* 연한 회색 */
  border-radius: 10px; /* 둥근 라운드 */
  transition: opacity 0.3s ease;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .ps__rail-y {
    width: 6px;
  }
}

.reading-con .ps__rail-y {
  margin: 8px 0;
}

.script-box .ps__rail-y {
  margin: 2px 0;
  margin-right: 2px;
}

.ps__thumb-y {
  right: 0px;
  width: 10px;
  background: rgba(35, 35, 35, 0.37); /* 진한 회색 */
  border-radius: 10px; /* 둥근 막대 */
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .ps__thumb-y {
    width: 6px;
  }
}

@media (min-width: 1367px) {
  .ps__rail-y,
  .ps__thumb-y {
    opacity: 1 !important;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .ps__rail-y,
  .ps__thumb-y {
    opacity: 0 !important;
  }
}

@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .ps__rail-y.active {
    opacity: 1 !important;
  }
  .ps__rail-y.active .ps__thumb-y {
    opacity: 1 !important;
  }
}

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
  background: rgba(35, 35, 35, 0.08);
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  width: 10px;
}

.custom-player {
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  gap: 20px;
  background: #E4F4F1;
  padding: 10px 30px;
  border-radius: 100px;
  margin: auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .custom-player {
    gap: 10px;
    max-width: 100%;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .custom-player {
    flex-direction: column;
    border-radius: 10px;
    padding: 0 14px;
    gap: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .custom-player {
    max-width: 370px;
    flex-direction: column;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .custom-player {
    width: 100%;
  }
}

.custom-player--top,
.custom-player--bottom {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .custom-player--top,
  .custom-player--bottom {
    width: 100%;
    justify-content: space-between;
  }
}
.custom-player--top > div,
.custom-player--bottom > div {
  display: flex;
  align-items: center;
  position: relative;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .custom-player--top > div,
  .custom-player--bottom > div {
    width: fit-content;
  }
}

.custom-player--top {
  width: 100%;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .custom-player--top {
    border-bottom: 1px solid #009A85;
    padding: 5px 0;
  }
}

.custom-player--bottom {
  flex: 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .custom-player--bottom {
    gap: 10px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .custom-player--bottom {
    padding: 4px 0 6px;
  }
}

.speaking .custom-player {
  max-width: 970px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .speaking .custom-player {
    max-width: 311px;
  }
}
.speaking .custom-player--bottom {
  flex-shrink: 0;
  gap: 15px;
}
.speaking .control--progress {
  width: 100%;
}

.speaking .custom-player--top {
  width: 73%;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .speaking .custom-player--top {
    width: 100%;
    border-bottom: none;
    padding: 0 0 8px;
  }
}

@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .speaking .custom-player--bottom {
    justify-content: center;
    padding: 8px 0 0;
  }
}

@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .speaking .custom-player {
    padding: 8px 16px 16px;
  }
}

.control--play {
  width: fit-content;
}
.control--play button {
  width: 52px;
  aspect-ratio: 1;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .control--play button {
    width: 44px;
  }
}
.control--play .btn-play {
  background: url("/assets/images/icon/btn_audio-play-95de6f669b1d593915361b4a2319e0ec.png") no-repeat center center/100% auto;
}
.control--play .btn-play.active {
  background: url("/assets/images/icon/btn_audio-pause-ef503ba0087f91e35cf324216d38c95d.png") no-repeat center center/100% auto;
}
.control--play .btn-stop {
  background: url("/assets/images/icon/btn_audio-stop-e7376a2e56c9e0483f583519f0236d9c.png") no-repeat center center/100% auto;
}
.control--play .btn-stop.disabled {
  background: url("/assets/images/icon/btn_audio-stop-gr-c1876d3c7e34b5b7d0be632a54822ba4.png") no-repeat center center/100% auto;
  pointer-events: none;
}

.control--progress {
  width: 100%;
  gap: 10px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .control--progress {
    width: 100% !important;
    flex-direction: column;
  }
}

.custom-player button {
  cursor: pointer;
  flex-shrink: 0;
}

.custom-player .progress {
  flex: 1;
}

.custom-player .time {
  display: flex;
  justify-content: space-around;
  font-size: 15px;
  color: #8B8B8B;
  min-width: 80px;
  text-align: center;
}
.custom-player .time > span {
  width: 45px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .custom-player .time > span {
    width: 30px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .custom-player .time {
    min-width: 50px;
    position: absolute;
    right: 0;
    bottom: -18px;
    font-size: 10px;
  }
}

.control--volume {
  gap: 5px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .control--volume {
    display: none !important;
  }
}
.control--volume .icon {
  width: 20px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/btn_audio-volume-2123d85503a6fece5d5403b4c6b365e0.png") no-repeat center center/100% auto;
}
.control--volume input {
  width: 70px;
}

.dropdown {
  position: relative;
  display: inline-block;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .dropdown {
    height: 23px;
  }
}

.dropdown-toggle {
  min-width: 80px;
  flex-shrink: 0;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
}
.dropdown-toggle .icon {
  width: 13px;
  height: 8px;
  background: url("/assets/images/icon/ic_arr_select_darkgr-249740cb57a7da88a86d27889a2e8a24.png") no-repeat center center/100% auto;
  margin-left: 5px;
}

.dropdown-menu {
  position: absolute;
  top: 51px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid #D6D6D6;
  border-radius: 6px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
  display: none;
  min-width: 64px;
  z-index: 100;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .dropdown-menu {
    top: 120%;
  }
}

.dropdown-menu li {
  padding: 10px 14px;
  text-align: center;
  cursor: pointer;
}

.dropdown-menu li:hover,
.dropdown-menu li.active {
  background: #009A85;
  color: #fff;
}

.dropdown.open .dropdown-menu {
  display: block;
}

.btn-record {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 21px;
  font-weight: 700;
  line-height: normal;
  color: #232323;
  padding: 7px 15px;
  border-radius: 100px;
  background: #C0C0C0;
  color: #fff;
  gap: 5px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .btn-record {
    font-size: 18px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .btn-record {
    font-size: 15px;
    padding: 10px 16px;
    padding-right: 20px;
  }
}
.btn-record > span {
  flex-shrink: 0;
}
.btn-record .icon {
  width: 36px;
  aspect-ratio: 1;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .btn-record .icon {
    width: 30px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .btn-record .icon {
    width: 24px;
  }
}
.btn-record--start .icon {
  background: url("/assets/images/icon/btn_record-start-gr-9e48400b8cb6535a12e4849ae06a8ef9.png") no-repeat center center/100% auto;
}
.btn-record--start.on {
  background: linear-gradient(to bottom, #FF6E57, #ED4C33);
}
.btn-record--start.on .icon {
  background: url("/assets/images/icon/btn_record-start-93d7ff635e4b2ab0f4c981f3ee95fdc3.png") no-repeat center center/100% auto;
}
.btn-record--start.active {
  background: linear-gradient(to bottom, #FF6E57, #ED4C33);
  box-shadow: 0 0 24px rgba(237, 76, 51, 0.48);
}
.btn-record--start.active .icon {
  background: url("/assets/images/icon/btn_record-stop-cbbf8eaadadf44dc48d75dd902ad02fe.png") no-repeat center center/100% auto;
}
.btn-record--play .icon {
  background: url("/assets/images/icon/btn_speaking-play-gr-155a4c9973f31ba78bfd7198dfa52ea4.png") no-repeat center center/100% auto;
}
.btn-record--play.on {
  background: #FFB62F;
}
.btn-record--play.on .icon {
  background: url("/assets/images/icon/btn_speaking-play-aab804636dad43f332f8d6d88200ccb6.png") no-repeat center center/100% auto;
}
.btn-record--play.active {
  background: #FFB62F;
}
.btn-record--play.active .icon {
  background: url("/assets/images/icon/btn_record-stop-cbbf8eaadadf44dc48d75dd902ad02fe.png") no-repeat center center/100% auto;
}

/* 오디오 플레이어 스크립트 토글 */
.script-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.script-toggle input {
  display: none;
}

.script-toggle .slider {
  position: relative;
  width: 33px;
  height: 19px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  transition: background 0.3s;
}

.script-toggle .slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 2.64px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s;
}

.script-toggle input:checked + .slider {
  background: #009A85;
}

.script-toggle input:checked + .slider::before {
  transform: translateX(14px);
}

.listening-con:has(.script-toggle input:checked) .script-box {
  display: block;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
}

.script-toggle .label {
  font-size: 14px;
  padding-top: 2px;
}

/* 스크립트 박스 */
.script-box {
  margin-top: 12px;
  background: #f6f6f6;
  border: 1px solid #ddd;
  border-radius: 8px;
  display: none; /* 기본 숨김 */
}

/* 공통 */
.control--progress {
  /* 트랙 (Chrome, Safari, Opera) */
  /* 트랙 (Firefox) */
  /* Thumb (Chrome, Safari, Opera) */
  /* Thumb (Firefox) */
}
.control--progress input[type=range] {
  width: 100%;
  height: 10px;
  background: rgba(4, 4, 4, 0.13);
  border-radius: 10px;
}
.control--progress input[type=range]::-webkit-slider-runnable-track {
  height: 10px;
  background: transparent;
  border-radius: 10px;
}
.control--progress input[type=range]::-moz-range-track {
  height: 10px;
  background: rgba(4, 4, 4, 0.13);
  border-radius: 10px;
}
.control--progress input[type=range]::-moz-range-progress {
  height: 10px;
  background: transparent;
  border-radius: 10px;
}
.control--progress input[type=range]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(25, 25, 25, 0.36);
  margin-top: -5px; /* 트랙 중앙 정렬 */
  cursor: pointer;
}
.control--progress input[type=range]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(25, 25, 25, 0.36);
  cursor: pointer;
}

.control--volume {
  /* 트랙 (Chrome, Safari, Opera) */
  /* 트랙 (Firefox) */
  /* Thumb (Chrome, Safari, Opera) */
  /* Thumb (Firefox) */
}
.control--volume input[type=range] {
  width: 35px;
  height: 4px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 10px;
}
.control--volume input[type=range]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 10px;
}
.control--volume input[type=range]::-moz-range-track {
  height: 4px;
  border-radius: 10px;
}
.control--volume input[type=range]::-moz-range-progress {
  height: 4px;
  border-radius: 10px;
}
.control--volume input[type=range]::-webkit-slider-thumb {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #009A85;
  box-shadow: 0 0 8px rgba(25, 25, 25, 0.36);
  margin-top: -2px; /* 트랙 중앙 정렬 */
  cursor: pointer;
}
.control--volume input[type=range]::-moz-range-thumb {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #009A85;
  box-shadow: 0 0 8px rgba(25, 25, 25, 0.36);
  margin-top: -2px; /* 트랙 중앙 정렬 */
  cursor: pointer;
}

.custom-select,
.answer-box,
.blank-box {
  margin: 0 0.5rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .custom-select,
  .answer-box,
  .blank-box {
    margin: 0 2px;
  }
}

.custom-select,
.quiz-input,
.blank-box,
.num,
.speaker,
.blank-num {
  height: 4.4rem;
  line-height: 4.4rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .custom-select,
  .quiz-input,
  .blank-box,
  .num,
  .speaker,
  .blank-num {
    height: 28px;
    line-height: 28px;
  }
}

@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .blank-box {
    height: 3.8rem;
    line-height: 3.8rem;
  }
}

.speaking .script-box .script-box-con p {
  line-height: 4.4rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .speaking .script-box .script-box-con p {
    line-height: 28px;
  }
}

.script-box .speaker {
  height: auto;
  line-height: inherit;
}

.form-group {
  margin-top: 6px;
}

.form-label {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: normal;
  color: #232323;
}

.form-input {
  width: 100%;
  height: 53px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid #cfd8dc;
  border-radius: 4px;
  font-size: 2.4rem;
  font-weight: 400;
  text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s, color 0.15s;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .form-input {
    font-size: 18px;
    height: 48px;
  }
}

.form-input.is-filled {
  border-color: #232323;
}

.form-input:focus {
  border-color: #0072BC;
  color: #0072BC;
  outline: none;
}

.edit-textarea,
.edit-textarea:focus {
  width: 100%;
  border: 1px solid #cfd8dc !important;
  border-radius: 4px;
  padding: 8px !important;
}

.form-textarea {
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #cfd8dc;
  border-radius: 4px;
  font-size: 2.4rem;
}

.form-hint {
  margin: 8px 0 0;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: normal;
  color: #232323;
  color: #9F9F9F;
  text-align: center;
}

.empty-state {
  font-size: 2.4rem;
  font-weight: 400;
  line-height: normal;
  color: #232323;
  color: #C0C0C0;
  text-align: center;
  padding-bottom: 5rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .empty-state {
    font-size: 18px;
    padding-bottom: 28px;
  }
}

.form-group.is-error .form-input {
  border-color: #ED4C33;
  color: #ED4C33;
}

.form-error {
  display: none;
  margin-top: 8px;
  font-size: 12px;
  color: #ED4C33;
  text-align: center;
  white-space: normal;
}

.form-group.is-error .form-error {
  display: block;
}

input::placeholder {
  color: #C0C0C0;
  opacity: 1;
}

input::-webkit-input-placeholder {
  color: #C0C0C0;
}

input::-moz-placeholder {
  color: #C0C0C0;
  opacity: 1;
}

input:-ms-input-placeholder {
  color: #C0C0C0;
}

input::-ms-input-placeholder {
  color: #C0C0C0;
}

textarea::placeholder {
  color: #8B8B8B;
  opacity: 1; /* Safari에서 흐려지는 문제 방지 */
}

/* Firefox 전용 */
textarea::-moz-placeholder {
  color: #8B8B8B;
  opacity: 1;
}

/* Internet Explorer/Edge (레거시) */
textarea:-ms-input-placeholder {
  color: #8B8B8B;
}

/* 오래된 Microsoft Edge */
textarea::-ms-input-placeholder {
  color: #8B8B8B;
}

@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .drag-lock {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .drag-lock {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
}

/* ============================================
   COMMON WORD QUIZ STYLES
============================================ */
.quiz-con.word {
  display: flex;
  flex-direction: column;
}
.quiz-con.word .quiz-num {
  font-size: 3.4rem;
  font-weight: bold;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word .quiz-num {
    padding-left: 11px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word .quiz-num {
    font-size: 18px;
    padding-left: 7px;
  }
}
.quiz-con.word .quiz-con__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word .quiz-con__inner {
    justify-content: flex-start;
    gap: 20px;
  }
}
.quiz-con.word .word-con {
  width: 100%;
  height: auto;
}
.quiz-con.word .word-con .quiz-img {
  max-width: 373px;
  height: auto;
  margin: auto;
  border: 2.5px solid #D6D6D6;
  border-radius: 12px;
  overflow: hidden;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word .word-con .quiz-img {
    border-radius: 8px;
  }
}
.quiz-con.word .word-con .quiz-img img {
  width: 100%;
  height: 100%;
  display: block;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word .word-con .quiz-img {
    max-width: 50%;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word .word-con .quiz-img {
    max-width: 65%;
  }
}
.quiz-con.word .quiz-option__list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.quiz-con.word .quiz-option__item {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-left: 0;
  border-radius: 8px;
  cursor: pointer;
}
.quiz-con.word .desc-con {
  padding: 40px;
  background: #ECFAF8;
  border-radius: 10px;
  font-size: 2.8rem;
  font-weight: 400;
  line-height: normal;
  color: #232323;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word .desc-con {
    font-size: 17px;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word .desc-con {
    padding: 37px 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word .desc-con {
    padding: 20px 12px;
  }
}
.quiz-con.word .quiz-option__item .sound-btn,
.quiz-con.word .sound-btn__img {
  aspect-ratio: 1/1;
  border: none;
}

/* Common draggable styles */
.draggable-text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 140px;
  height: 105px;
  background-color: white;
  border-radius: 8px;
  outline: 2.5px solid #d6d6d6;
  overflow: hidden;
  cursor: grab;
  transition: transform 0.1s, box-shadow 0.1s;
  padding: 10px 20px;
  font-size: 2.8rem;
  font-weight: 500;
  white-space: nowrap;
}
.draggable-text:active {
  cursor: grabbing;
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  outline-color: #7C7E7E;
  background: #fff;
}
.draggable-text img, .draggable-text span {
  pointer-events: none;
}

.img-option .draggable-text {
  width: 100%;
  height: 100%;
}

/* Common image slider container */
.image-slider-container {
  width: 100%;
  max-width: 90%;
  margin: 0 auto;
  background: #EDF3F6;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.image-slider-container::-webkit-scrollbar {
  display: none;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .image-slider-container {
    margin-bottom: 10px;
    padding: 16px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .image-slider-container {
    margin-bottom: 6px;
  }
}
.image-slider-container .image-list {
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 0 10px;
  margin: 0 auto;
}
.image-slider-container .image-list::-webkit-scrollbar {
  display: none;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .image-slider-container .image-list {
    padding: 0 4px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .image-slider-container .image-list {
    justify-content: flex-start;
  }
  .image-slider-container .image-list .draggable-image {
    flex: 0 0 calc((100% - 30px) / 3);
    width: calc((100% - 30px) / 3);
    height: auto;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .image-slider-container .image-list {
    justify-content: flex-start;
  }
  .image-slider-container .image-list .draggable-image {
    flex: 0 0 calc((100% - 30px) / 3);
    width: calc((100% - 30px) / 3);
    height: auto;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .image-slider-container .image-list {
    justify-content: flex-start;
  }
  .image-slider-container .image-list .draggable-image {
    flex: 0 0 calc((100% - 30px) / 5);
    width: calc((100% - 30px) / 5);
    height: auto;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .image-slider-container .image-list {
    justify-content: flex-start;
  }
  .image-slider-container .image-list .draggable-image {
    flex: 0 0 calc((100% - 30px) / 5);
    width: calc((100% - 30px) / 5);
    height: auto;
  }
}
.image-slider-container .draggable-image {
  flex-shrink: 0;
  width: 140px;
  height: auto;
  background-color: white;
  border-radius: 8px;
  outline: 2.5px solid #d6d6d6;
  overflow: hidden;
  cursor: grab;
  transition: transform 0.1s, box-shadow 0.1s;
}
.image-slider-container .draggable-image:active {
  cursor: grabbing;
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  outline-color: #7C7E7E;
  background: #fff;
}
.image-slider-container .draggable-image img, .image-slider-container .draggable-image span {
  pointer-events: none;
}
.image-slider-container .draggable-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================
   WORD TYPE SPECIFIC STYLES
============================================ */
/* Word Type 1, 7 Common */
.quiz-con.word--1 .quiz-option,
.quiz-con.word--7 .quiz-option {
  width: 100%;
  height: auto !important;
  display: flex;
  justify-content: center;
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--1 .quiz-option,
  .quiz-con.word--7 .quiz-option {
    padding: 0 !important;
  }
}
.quiz-con.word--1 .quiz-option__list,
.quiz-con.word--7 .quiz-option__list {
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.quiz-con.word--1 .quiz-option__list:has(> li:first-child:nth-last-child(3)),
.quiz-con.word--7 .quiz-option__list:has(> li:first-child:nth-last-child(3)) {
  width: 805px;
}
.quiz-con.word--1 .quiz-option__list:has(> li:first-child:nth-last-child(4)),
.quiz-con.word--7 .quiz-option__list:has(> li:first-child:nth-last-child(4)) {
  width: 535px;
}
.quiz-con.word--1 .quiz-option__list:has(> li:first-child:nth-last-child(5)),
.quiz-con.word--7 .quiz-option__list:has(> li:first-child:nth-last-child(5)) {
  width: 805px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--1 .quiz-option__list,
  .quiz-con.word--7 .quiz-option__list {
    max-width: 50%;
    gap: 16px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word--1 .quiz-option__list,
  .quiz-con.word--7 .quiz-option__list {
    max-width: 100%;
  }
}
.quiz-con.word--1 .quiz-option__item,
.quiz-con.word--7 .quiz-option__item {
  width: 250px !important;
  height: 60px;
  cursor: pointer;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--1 .quiz-option__item,
  .quiz-con.word--7 .quiz-option__item {
    width: 100% !important;
    height: 52px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--1 .quiz-option__item,
  .quiz-con.word--7 .quiz-option__item {
    height: 44px;
  }
}

/* Word Type 1 */
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--1 .quiz-num {
    position: absolute;
  }
}

/* Word Type 1-1 */
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--1-1 {
    gap: 0 !important;
  }
}
.quiz-con.word--1-1 .quiz-con__inner {
  display: flex;
  flex-direction: row;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--1-1 .quiz-con__inner {
    gap: 24px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word--1-1 .quiz-con__inner {
    flex-direction: column;
    align-items: center;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.word--1-1 .quiz-con__inner {
    flex-direction: column;
    align-items: center;
  }
}
@media (min-width: 1367px) {
  .quiz-con.word--1-1 .quiz-con__inner:has(.word-con-left > :nth-child(2)) .quiz-option {
    padding-top: 120px;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--1-1 .quiz-con__inner:has(.word-con-left > :nth-child(2)) .quiz-option {
    padding-top: 96px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .quiz-con.word--1-1 .quiz-con__inner:has(.word-con-left > :nth-child(2)) .quiz-option {
    padding-top: 72px;
  }
}
.quiz-con.word--1-1 .word-con {
  max-width: 373px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--1-1 .word-con {
    max-width: 100%;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--1-1 .word-con {
    padding-left: 50px;
  }
}
.quiz-con.word--1-1 .word-con-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--1-1 .word-con-left {
    gap: 16px;
  }
}
.quiz-con.word--1-1 .word-con__sound {
  display: flex;
  justify-content: center;
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--1-1 .quiz-img {
    max-width: 100% !important;
  }
}
.quiz-con.word--1-1 .quiz-option {
  width: auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--1-1 .quiz-option {
    width: 100%;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--1-1 .quiz-option {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.word--1-1 .quiz-option {
    max-width: 50%;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word--1-1 .quiz-option {
    max-width: 100%;
    padding: 0 16px;
  }
}
.quiz-con.word--1-1 .quiz-option__item {
  padding-left: 34px;
  line-height: normal !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--1-1 .quiz-option__item {
    padding-left: 28px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--1-1 .quiz-option__item {
    padding-left: 20px;
  }
}
.quiz-con.word--1-1 .quiz-option__list.quiz-option__list--vertical-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--1-1 .quiz-option__list.quiz-option__list--vertical-items {
    gap: 12px;
    justify-content: flex-start;
    padding: 4px 0;
  }
}
.quiz-con.word--1-1 .text-option {
  width: 100%;
}
.quiz-con.word--1-1 .text-option .radio-btn {
  display: none;
}
/* Word Type 2 */
.quiz-con.word--2 .quiz-con__inner {
  gap: 12px !important;
}

@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--2.word,
  .quiz-con.test-word--1.word {
    gap: 0;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--2 .quiz-con__inner,
  .quiz-con.test-word--1 .quiz-con__inner {
    gap: 24px;
  }
}
.quiz-con.word--2 .sound-btn,
.quiz-con.test-word--1 .sound-btn {
  display: flex;
  justify-content: center;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--2 .sound-btn .btn-sound,
  .quiz-con.test-word--1 .sound-btn .btn-sound {
    width: 80px;
    height: 56px;
  }
}
.quiz-con.word--2 .quiz-option,
.quiz-con.test-word--1 .quiz-option {
  width: 100%;
  height: auto !important;
}
.quiz-con.word--2 .quiz-option .quiz-option__list,
.quiz-con.test-word--1 .quiz-option .quiz-option__list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap !important;
  gap: 30px;
  padding: 12px 12px !important;
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--2 .quiz-option .quiz-option__list,
  .quiz-con.test-word--1 .quiz-option .quiz-option__list {
    gap: 16px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.word--2 .quiz-option .quiz-option__list,
  .quiz-con.test-word--1 .quiz-option .quiz-option__list {
    gap: 22px 16px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .quiz-con.word--2 .quiz-option .quiz-option__list,
  .quiz-con.test-word--1 .quiz-option .quiz-option__list {
    gap: 11px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word--2 .quiz-option .quiz-option__list,
  .quiz-con.test-word--1 .quiz-option .quiz-option__list {
    gap: 16px 11px;
  }
}
.quiz-con.word--2 .quiz-option__item,
.quiz-con.test-word--1 .quiz-option__item {
  max-width: 300px;
  width: calc((100% - 90px) / 4) !important;
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--2 .quiz-option__item,
  .quiz-con.test-word--1 .quiz-option__item {
    width: calc((100% - 48px) / 4) !important;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .quiz-con.word--2 .quiz-option__item,
  .quiz-con.test-word--1 .quiz-option__item {
    width: calc((100% - 33px) / 4) !important;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.word--2 .quiz-option__item,
  .quiz-con.test-word--1 .quiz-option__item {
    width: calc((100% - 16px) / 2) !important;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word--2 .quiz-option__item,
  .quiz-con.test-word--1 .quiz-option__item {
    width: calc((100% - 11px) / 2) !important;
  }
}
.quiz-con.word--2 .quiz-option__item input[type=radio]:checked ~ .radio-label .img-wrap,
.quiz-con.test-word--1 .quiz-option__item input[type=radio]:checked ~ .radio-label .img-wrap {
  border-color: #0072BC;
  box-shadow: 0 0 12px rgba(88, 88, 88, 0.46);
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--2 .quiz-option__item input[type=radio]:checked ~ .radio-label .img-wrap,
  .quiz-con.test-word--1 .quiz-option__item input[type=radio]:checked ~ .radio-label .img-wrap {
    box-shadow: 0 0 12px rgba(88, 88, 88, 0.26);
  }
}
.quiz-con.word--2 .quiz-option__item.correct input[type=radio] ~ .radio-label .img-wrap,
.quiz-con.test-word--1 .quiz-option__item.correct input[type=radio] ~ .radio-label .img-wrap {
  border-color: #009A85;
}
.quiz-con.word--2 .quiz-option__item.incorrect input[type=radio] ~ .radio-label .img-wrap,
.quiz-con.test-word--1 .quiz-option__item.incorrect input[type=radio] ~ .radio-label .img-wrap {
  border-color: #ED4C33;
}
.quiz-con.word--2 .img-option .radio-label,
.quiz-con.test-word--1 .img-option .radio-label {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--2 .img-option .radio-label,
  .quiz-con.test-word--1 .img-option .radio-label {
    gap: 4px;
  }
}
.quiz-con.word--2 .img-option .radio-label .option-num,
.quiz-con.test-word--1 .img-option .radio-label .option-num {
  order: 1;
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  color: #232323;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--2 .img-option .radio-label .option-num,
  .quiz-con.test-word--1 .img-option .radio-label .option-num {
    order: 2;
    position: relative;
    padding-right: 23px;
    align-self: center;
    line-height: 41px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--2 .img-option .radio-label .option-num,
  .quiz-con.test-word--1 .img-option .radio-label .option-num {
    padding-right: 17px;
    font-size: 17px;
    line-height: 20px;
  }
}
.quiz-con.word--2 .img-option .radio-label .img-wrap,
.quiz-con.test-word--1 .img-option .radio-label .img-wrap {
  order: 2;
  border: 2.5px solid #D6D6D6;
  border-radius: 12px;
  overflow: hidden;
  max-width: 300px;
  aspect-ratio: 300/226;
  position: relative;
  border-radius: 10px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--2 .img-option .radio-label .img-wrap,
  .quiz-con.test-word--1 .img-option .radio-label .img-wrap {
    border-radius: 8px;
  }
}
.quiz-con.word--2 .img-option .radio-label .img-wrap img,
.quiz-con.test-word--1 .img-option .radio-label .img-wrap img {
  width: 100%;
  height: 100%;
  display: block;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--2 .img-option .radio-label .img-wrap,
  .quiz-con.test-word--1 .img-option .radio-label .img-wrap {
    order: 1;
  }
}
.quiz-con.word--2 .img-option .radio-label::before,
.quiz-con.test-word--1 .img-option .radio-label::before {
  order: 3;
  position: static;
  align-self: center;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--2 .img-option .radio-label::before,
  .quiz-con.test-word--1 .img-option .radio-label::before {
    position: absolute;
    top: initial;
    left: calc(50% + 3px);
    bottom: 10px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--2 .img-option .radio-label::before,
  .quiz-con.test-word--1 .img-option .radio-label::before {
    bottom: 0;
  }
}

/* Word Type 3, 3-1, 6 Common */
@media (min-width: 1367px) {
  .quiz-con.word--3.quiz-con,
  .quiz-con.word--3-1.quiz-con,
  .quiz-con.word--6.quiz-con {
    padding-bottom: 2rem;
  }
}
.quiz-con.word--3 .quiz-num,
.quiz-con.word--3-1 .quiz-num,
.quiz-con.word--6 .quiz-num {
  padding-left: 0 !important;
}
.quiz-con.word--3 .quiz-con__inner,
.quiz-con.word--3-1 .quiz-con__inner,
.quiz-con.word--6 .quiz-con__inner {
  justify-content: space-between;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3 .quiz-con__inner,
  .quiz-con.word--3-1 .quiz-con__inner,
  .quiz-con.word--6 .quiz-con__inner {
    gap: 36px;
  }
}
.quiz-con.word--3 .quiz-option,
.quiz-con.word--3-1 .quiz-option,
.quiz-con.word--6 .quiz-option {
  width: 100%;
  height: auto !important;
  display: flex;
  justify-content: center;
}
.quiz-con.word--3 .quiz-option__list,
.quiz-con.word--3-1 .quiz-option__list,
.quiz-con.word--6 .quiz-option__list {
  max-width: 978px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: 20px;
  column-gap: 74px;
}
.quiz-con.word--3 .quiz-option__item,
.quiz-con.word--3-1 .quiz-option__item,
.quiz-con.word--6 .quiz-option__item {
  align-items: flex-start;
}
.quiz-con.word--3 .quiz-option__item .quiz-num,
.quiz-con.word--3-1 .quiz-option__item .quiz-num,
.quiz-con.word--6 .quiz-option__item .quiz-num {
  font-size: 3rem;
  transform: initial;
}
.quiz-con.word--3 .img-option,
.quiz-con.word--3-1 .img-option,
.quiz-con.word--6 .img-option {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 475/347;
  border: 2.5px dashed #ccc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, border-color 0.2s;
  background-color: #f9f9f9;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--3 .img-option,
  .quiz-con.word--3-1 .img-option,
  .quiz-con.word--6 .img-option {
    border-radius: 6px;
  }
}
.quiz-con.word--3 .img-option.is-filled,
.quiz-con.word--3-1 .img-option.is-filled,
.quiz-con.word--6 .img-option.is-filled {
  align-items: stretch;
  border-style: solid;
  border-width: 1.5px;
  overflow: hidden;
  border-color: #232323;
  background: #fff;
}
.quiz-con.word--3 .img-option.is-filled .sound-btn,
.quiz-con.word--3-1 .img-option.is-filled .sound-btn,
.quiz-con.word--6 .img-option.is-filled .sound-btn {
  display: none;
}
.quiz-con.word--3 .img-option.is-filled img,
.quiz-con.word--3-1 .img-option.is-filled img,
.quiz-con.word--6 .img-option.is-filled img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.quiz-con.word--3 .img-option .sound-btn__img,
.quiz-con.word--3-1 .img-option .sound-btn__img,
.quiz-con.word--6 .img-option .sound-btn__img {
  width: 80px;
}
.quiz-con.word--3 .image-slider-container,
.quiz-con.word--3-1 .image-slider-container,
.quiz-con.word--6 .image-slider-container {
  max-width: 1000px;
  height: auto;
}
.quiz-con.word--3 .quiz-option__item.correct .img-option,
.quiz-con.word--3-1 .quiz-option__item.correct .img-option,
.quiz-con.word--6 .quiz-option__item.correct .img-option {
  outline-width: 2.5px;
  outline-color: #009A85;
}
.quiz-con.word--3 .quiz-option__item.correct .img-option::after,
.quiz-con.word--3-1 .quiz-option__item.correct .img-option::after,
.quiz-con.word--6 .quiz-option__item.correct .img-option::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  aspect-ratio: 1/1;
  background: url("/assets/images/icon/ic_correct-ba3d4b32c42384d22882030f0a0fbcc5.png") no-repeat center center;
  background-size: contain;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3 .quiz-option__item.correct .img-option::after,
  .quiz-con.word--3-1 .quiz-option__item.correct .img-option::after,
  .quiz-con.word--6 .quiz-option__item.correct .img-option::after {
    width: 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--3 .quiz-option__item.correct .img-option::after,
  .quiz-con.word--3-1 .quiz-option__item.correct .img-option::after,
  .quiz-con.word--6 .quiz-option__item.correct .img-option::after {
    width: 14px;
  }
}
.quiz-con.word--3 .quiz-option__item.correct .img-option .draggable-text,
.quiz-con.word--3-1 .quiz-option__item.correct .img-option .draggable-text,
.quiz-con.word--6 .quiz-option__item.correct .img-option .draggable-text {
  color: #009A85;
}
.quiz-con.word--3 .quiz-option__item.incorrect .img-option,
.quiz-con.word--3-1 .quiz-option__item.incorrect .img-option,
.quiz-con.word--6 .quiz-option__item.incorrect .img-option {
  outline-width: 2.5px;
  outline-color: #ED4C33;
}
.quiz-con.word--3 .quiz-option__item.incorrect .img-option::after,
.quiz-con.word--3-1 .quiz-option__item.incorrect .img-option::after,
.quiz-con.word--6 .quiz-option__item.incorrect .img-option::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  aspect-ratio: 1/1;
  background: url("/assets/images/icon/ic_incorrect-e99b479beadeebfd1402736daebd5e37.png") no-repeat center center;
  background-size: contain;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3 .quiz-option__item.incorrect .img-option::after,
  .quiz-con.word--3-1 .quiz-option__item.incorrect .img-option::after,
  .quiz-con.word--6 .quiz-option__item.incorrect .img-option::after {
    width: 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--3 .quiz-option__item.incorrect .img-option::after,
  .quiz-con.word--3-1 .quiz-option__item.incorrect .img-option::after,
  .quiz-con.word--6 .quiz-option__item.incorrect .img-option::after {
    width: 14px;
  }
}
.quiz-con.word--3 .quiz-option__item.incorrect .img-option .draggable-text,
.quiz-con.word--3-1 .quiz-option__item.incorrect .img-option .draggable-text,
.quiz-con.word--6 .quiz-option__item.incorrect .img-option .draggable-text {
  color: #ED4C33;
}

/* Word Type 3-1 */
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3-1 .quiz-num {
    transform: translate(0px, 0px) !important;
  }
}
.quiz-con.word--3-1 .image-slider-container {
  max-width: 1120px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--3-1 .quiz-option__list {
    gap: 20px !important;
  }
}
.quiz-con.word--3-1 .img-option.is-filled {
  border-color: #0072BC;
}
.quiz-con.word--3-1 .img-option.is-filled .draggable-text {
  font-size: 2.8rem;
  font-weight: 700;
  color: #0072BC;
}
.quiz-con.word--3-1 .img-option .draggable-text {
  border: initial;
}

/* Word Type 3 responsive */
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3 {
    gap: 36px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3.quiz-con .quiz-con__inner {
    height: auto;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word--3.quiz-con .quiz-con__inner {
    height: 100%;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3 .quiz-option__list {
    gap: 24px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.word--3 .quiz-option__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 440px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word--3 .quiz-option__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3 .quiz-option__item .quiz-num {
    font-size: 18px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--3 .img-option .sound-btn__img {
    width: 56px;
  }
}
.quiz-con.word--3 .img-option .draggable-image {
  width: 100%;
}
.quiz-con.word--3 .image-slider-container {
  padding: 0 20px;
  /* 오른쪽이 잘린 경우만 페이드 처리 */
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3 .image-slider-container {
    width: calc(100% - 100px);
    max-width: 940px;
    height: auto;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--3 .image-slider-container {
    width: 100%;
    max-width: calc(100% - 68px);
    min-height: auto;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word--3 .image-slider-container {
    max-width: 100%;
  }
}
.quiz-con.word--3 .image-slider-container .image-list {
  min-height: 145px;
  gap: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3 .image-slider-container .image-list {
    min-height: 98px;
    gap: 15px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--3 .image-slider-container .image-list {
    min-height: 92px;
    gap: 12px;
  }
}
.quiz-con.word--3 .image-slider-container .draggable-image {
  position: relative;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3 .image-slider-container .draggable-image {
    flex: none;
    min-width: 88px;
    width: calc((100% - 75px) / 6);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word--3 .image-slider-container .draggable-image {
    min-width: 80px;
  }
}
.quiz-con.word--3 .image-slider-container .draggable-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.quiz-con.word--3 .image-slider-container .draggable-image.partial-right::after {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
  opacity: 1 !important;
}

/* Word Type 3-1, 4-2, 6 responsive */
.quiz-con.word--3-1 .quiz-option__item,
.quiz-con.word--4-2 .quiz-option__item,
.quiz-con.word--6 .quiz-option__item {
  line-height: 1.2 !important;
}
.quiz-con.word--3-1 .btn-minus,
.quiz-con.word--4-2 .btn-minus,
.quiz-con.word--6 .btn-minus {
  width: 100%;
  height: 44px;
  background: #fff url(/assets/images/icon/ic_btn-minus-6b978b45086fcf5195f87af635a31ddd.png) no-repeat right 12px center/22px auto;
  color: #232323;
  border: 2.5px solid #232323;
  border-radius: 6px;
  padding-right: 35px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3-1 .btn-minus,
  .quiz-con.word--4-2 .btn-minus,
  .quiz-con.word--6 .btn-minus {
    border-width: 1px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--3-1 .btn-minus,
  .quiz-con.word--4-2 .btn-minus,
  .quiz-con.word--6 .btn-minus {
    background-size: 18px;
  }
}
.quiz-con.word--3-1 .btn-add, .quiz-con.word--3-1 .btn-minus,
.quiz-con.word--4-2 .btn-add,
.quiz-con.word--4-2 .btn-minus,
.quiz-con.word--6 .btn-add,
.quiz-con.word--6 .btn-minus {
  display: none;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3-1 .btn-add, .quiz-con.word--3-1 .btn-minus,
  .quiz-con.word--4-2 .btn-add,
  .quiz-con.word--4-2 .btn-minus,
  .quiz-con.word--6 .btn-add,
  .quiz-con.word--6 .btn-minus {
    display: block;
  }
  .quiz-con.word--3-1 .btn-add::before, .quiz-con.word--3-1 .btn-minus::before,
  .quiz-con.word--4-2 .btn-add::before,
  .quiz-con.word--4-2 .btn-minus::before,
  .quiz-con.word--6 .btn-add::before,
  .quiz-con.word--6 .btn-minus::before {
    content: attr(data-label);
    font-size: 17px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3-1.quiz-con .quiz-con__inner,
  .quiz-con.word--4-2.quiz-con .quiz-con__inner,
  .quiz-con.word--6.quiz-con .quiz-con__inner {
    height: auto;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.word--3-1.quiz-con .quiz-con__inner,
  .quiz-con.word--4-2.quiz-con .quiz-con__inner,
  .quiz-con.word--6.quiz-con .quiz-con__inner {
    height: 100%;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word--3-1.quiz-con .quiz-con__inner .quiz-option,
  .quiz-con.word--4-2.quiz-con .quiz-con__inner .quiz-option,
  .quiz-con.word--6.quiz-con .quiz-con__inner .quiz-option {
    height: auto;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3-1 .quiz-option__list,
  .quiz-con.word--4-2 .quiz-option__list,
  .quiz-con.word--6 .quiz-option__list {
    grid-template-columns: 1fr;
    gap: 24px 29px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3-1 .quiz-option__item,
  .quiz-con.word--4-2 .quiz-option__item,
  .quiz-con.word--6 .quiz-option__item {
    align-items: center;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3-1 .quiz-option__item .quiz-num,
  .quiz-con.word--4-2 .quiz-option__item .quiz-num,
  .quiz-con.word--6 .quiz-option__item .quiz-num {
    font-size: 22px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--3-1 .quiz-option__item .quiz-num,
  .quiz-con.word--4-2 .quiz-option__item .quiz-num,
  .quiz-con.word--6 .quiz-option__item .quiz-num {
    font-size: 17px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3-1 .quiz-option__item .img-option,
  .quiz-con.word--3-1 .quiz-option__item .item-content,
  .quiz-con.word--4-2 .quiz-option__item .img-option,
  .quiz-con.word--4-2 .quiz-option__item .item-content,
  .quiz-con.word--6 .quiz-option__item .img-option,
  .quiz-con.word--6 .quiz-option__item .item-content {
    max-width: initial;
    width: 100%;
    gap: 10px;
    background-color: #fff;
    border: initial;
    aspect-ratio: unset;
  }
  .quiz-con.word--3-1 .quiz-option__item .img-option::after,
  .quiz-con.word--3-1 .quiz-option__item .item-content::after,
  .quiz-con.word--4-2 .quiz-option__item .img-option::after,
  .quiz-con.word--4-2 .quiz-option__item .item-content::after,
  .quiz-con.word--6 .quiz-option__item .img-option::after,
  .quiz-con.word--6 .quiz-option__item .item-content::after {
    display: none;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3-1 .quiz-option__item .img-option.is-filled,
  .quiz-con.word--3-1 .quiz-option__item .item-content.is-filled,
  .quiz-con.word--4-2 .quiz-option__item .img-option.is-filled,
  .quiz-con.word--4-2 .quiz-option__item .item-content.is-filled,
  .quiz-con.word--6 .quiz-option__item .img-option.is-filled,
  .quiz-con.word--6 .quiz-option__item .item-content.is-filled {
    overflow: initial;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3-1 .quiz-option__item .img-option.is-filled .sound-btn,
  .quiz-con.word--3-1 .quiz-option__item .item-content.is-filled .sound-btn,
  .quiz-con.word--4-2 .quiz-option__item .img-option.is-filled .sound-btn,
  .quiz-con.word--4-2 .quiz-option__item .item-content.is-filled .sound-btn,
  .quiz-con.word--6 .quiz-option__item .img-option.is-filled .sound-btn,
  .quiz-con.word--6 .quiz-option__item .item-content.is-filled .sound-btn {
    display: block;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3-1 .quiz-option__item .img-option .sound-btn__img,
  .quiz-con.word--3-1 .quiz-option__item .item-content .sound-btn__img,
  .quiz-con.word--4-2 .quiz-option__item .img-option .sound-btn__img,
  .quiz-con.word--4-2 .quiz-option__item .item-content .sound-btn__img,
  .quiz-con.word--6 .quiz-option__item .img-option .sound-btn__img,
  .quiz-con.word--6 .quiz-option__item .item-content .sound-btn__img {
    width: 44px;
    aspect-ratio: 1/1;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3-1 .quiz-option__item.correct .btn-add, .quiz-con.word--3-1 .quiz-option__item.correct .btn-minus,
  .quiz-con.word--4-2 .quiz-option__item.correct .btn-add,
  .quiz-con.word--4-2 .quiz-option__item.correct .btn-minus,
  .quiz-con.word--6 .quiz-option__item.correct .btn-add,
  .quiz-con.word--6 .quiz-option__item.correct .btn-minus {
    color: #009A85;
    border: 2.5px solid #009A85;
    background-image: none;
  }
}
@media (orientation: portrait) and (max-width: 1024px) and (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (max-width: 1024px) and (orientation: landscape) and (max-width: 1366px), (orientation: landscape) and (max-width: 1366px) and (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) and (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3-1 .quiz-option__item.correct .btn-add, .quiz-con.word--3-1 .quiz-option__item.correct .btn-minus,
  .quiz-con.word--4-2 .quiz-option__item.correct .btn-add,
  .quiz-con.word--4-2 .quiz-option__item.correct .btn-minus,
  .quiz-con.word--6 .quiz-option__item.correct .btn-add,
  .quiz-con.word--6 .quiz-option__item.correct .btn-minus {
    border-width: 1.5px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3-1 .quiz-option__item.correct .btn-add::after, .quiz-con.word--3-1 .quiz-option__item.correct .btn-minus::after,
  .quiz-con.word--4-2 .quiz-option__item.correct .btn-add::after,
  .quiz-con.word--4-2 .quiz-option__item.correct .btn-minus::after,
  .quiz-con.word--6 .quiz-option__item.correct .btn-add::after,
  .quiz-con.word--6 .quiz-option__item.correct .btn-minus::after {
    content: "";
    display: inline-block;
    width: 16px;
    aspect-ratio: 1/1;
    background: url("/assets/images/icon/ic_correct-ba3d4b32c42384d22882030f0a0fbcc5.png") no-repeat center center;
    background-size: contain;
    margin-left: 6px;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3-1 .quiz-option__item.incorrect .btn-add, .quiz-con.word--3-1 .quiz-option__item.incorrect .btn-minus,
  .quiz-con.word--4-2 .quiz-option__item.incorrect .btn-add,
  .quiz-con.word--4-2 .quiz-option__item.incorrect .btn-minus,
  .quiz-con.word--6 .quiz-option__item.incorrect .btn-add,
  .quiz-con.word--6 .quiz-option__item.incorrect .btn-minus {
    color: #ED4C33;
    border: 2.5px solid #ED4C33;
    background-image: none;
  }
}
@media (orientation: portrait) and (max-width: 1024px) and (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (max-width: 1024px) and (orientation: landscape) and (max-width: 1366px), (orientation: landscape) and (max-width: 1366px) and (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) and (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3-1 .quiz-option__item.incorrect .btn-add, .quiz-con.word--3-1 .quiz-option__item.incorrect .btn-minus,
  .quiz-con.word--4-2 .quiz-option__item.incorrect .btn-add,
  .quiz-con.word--4-2 .quiz-option__item.incorrect .btn-minus,
  .quiz-con.word--6 .quiz-option__item.incorrect .btn-add,
  .quiz-con.word--6 .quiz-option__item.incorrect .btn-minus {
    border-width: 1.5px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3-1 .quiz-option__item.incorrect .btn-add::after, .quiz-con.word--3-1 .quiz-option__item.incorrect .btn-minus::after,
  .quiz-con.word--4-2 .quiz-option__item.incorrect .btn-add::after,
  .quiz-con.word--4-2 .quiz-option__item.incorrect .btn-minus::after,
  .quiz-con.word--6 .quiz-option__item.incorrect .btn-add::after,
  .quiz-con.word--6 .quiz-option__item.incorrect .btn-minus::after {
    content: "";
    display: inline-block;
    width: 16px;
    aspect-ratio: 1/1;
    background: url("/assets/images/icon/ic_incorrect-e99b479beadeebfd1402736daebd5e37.png") no-repeat center center;
    background-size: contain;
    margin-left: 6px;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3-1 .quiz-option__item .drag-box__item--con,
  .quiz-con.word--4-2 .quiz-option__item .drag-box__item--con,
  .quiz-con.word--6 .quiz-option__item .drag-box__item--con {
    display: flex;
    align-items: center;
    width: 100%;
    font-weight: 600;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--3-1 .image-slider-container,
  .quiz-con.word--4-2 .image-slider-container,
  .quiz-con.word--6 .image-slider-container {
    display: none;
  }
}

/* Word Type 4 */
.quiz-con.word--4 .quiz-option__item.correct,
.quiz-con.word--4-1 .quiz-option__item.correct {
  border: none !important;
}
@media (orientation: portrait) and (max-width: 1024px) and (orientation: portrait), (orientation: landscape) and (max-width: 1366px) and (orientation: portrait) {
  .quiz-con.word--4,
  .quiz-con.word--4-1 {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .quiz-con.word--4 .quiz-con__inner,
  .quiz-con.word--4-1 .quiz-con__inner {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }
}
.quiz-con.word--4 .quiz-option,
.quiz-con.word--4-1 .quiz-option {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  gap: 60px;
  width: 100%;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--4 .quiz-option,
  .quiz-con.word--4-1 .quiz-option {
    gap: 120px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) and (orientation: portrait), (orientation: landscape) and (max-width: 1366px) and (orientation: portrait) {
  .quiz-con.word--4 .quiz-option,
  .quiz-con.word--4-1 .quiz-option {
    flex-grow: 1;
  }
}
.quiz-con.word--4 .quiz-option__list,
.quiz-con.word--4-1 .quiz-option__list {
  display: flex;
  justify-content: center;
  align-items: start;
  gap: 20px;
  height: auto !important;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word--4 .quiz-option__list,
  .quiz-con.word--4-1 .quiz-option__list {
    gap: 2px;
  }
}
.quiz-con.word--4 .quiz-option__item,
.quiz-con.word--4-1 .quiz-option__item {
  flex: 1;
  max-width: 220px;
  height: 100%;
  position: relative;
  border: none;
  justify-content: center;
}
.quiz-con.word--4 .quiz-option__item .blank-input,
.quiz-con.word--4-1 .quiz-option__item .blank-input {
  display: inline-block;
  width: 7ch;
  border: none;
  border-bottom: 1px solid #000;
  background: transparent;
  outline: none;
  font: inherit;
  line-height: 1.2;
  vertical-align: baseline;
  padding: 0;
  margin: 0 4px;
  white-space: nowrap;
  border-radius: 0 !important;
}
.quiz-con.word--4 .quiz-option__item.correct,
.quiz-con.word--4-1 .quiz-option__item.correct {
  color: #009A85;
}
.quiz-con.word--4 .quiz-option__item.incorrect,
.quiz-con.word--4-1 .quiz-option__item.incorrect {
  color: #ED4C33;
}
.quiz-con.word--4 [data-row=sound] .quiz-option__item,
.quiz-con.word--4-1 [data-row=sound] .quiz-option__item {
  padding: 0 0 20px;
}
.quiz-con.word--4 [data-row=sound] .quiz-option__item.correct .dot,
.quiz-con.word--4-1 [data-row=sound] .quiz-option__item.correct .dot {
  background: #009A85;
}
.quiz-con.word--4 [data-row=sound] .quiz-option__item.incorrect .dot,
.quiz-con.word--4-1 [data-row=sound] .quiz-option__item.incorrect .dot {
  background: #ED4C33;
}
.quiz-con.word--4 [data-row=image] .quiz-option__item,
.quiz-con.word--4-1 [data-row=image] .quiz-option__item {
  padding: 20px 0;
}
.quiz-con.word--4 [data-row=image] .quiz-option__item .dot--top.result--sound.correct,
.quiz-con.word--4-1 [data-row=image] .quiz-option__item .dot--top.result--sound.correct {
  background: #009A85;
}
.quiz-con.word--4 [data-row=image] .quiz-option__item .dot--top.result--sound.incorrect,
.quiz-con.word--4-1 [data-row=image] .quiz-option__item .dot--top.result--sound.incorrect {
  background: #ED4C33;
}
.quiz-con.word--4 [data-row=image] .quiz-option__item .dot--bottom.result--text.correct,
.quiz-con.word--4-1 [data-row=image] .quiz-option__item .dot--bottom.result--text.correct {
  background: #009A85;
}
.quiz-con.word--4 [data-row=image] .quiz-option__item .dot--bottom.result--text.incorrect,
.quiz-con.word--4-1 [data-row=image] .quiz-option__item .dot--bottom.result--text.incorrect {
  background: #ED4C33;
}
.quiz-con.word--4 [data-row=text] .quiz-option__item,
.quiz-con.word--4-1 [data-row=text] .quiz-option__item {
  padding: 20px 0 0;
}
.quiz-con.word--4 [data-row=text] .quiz-option__item.correct .dot,
.quiz-con.word--4-1 [data-row=text] .quiz-option__item.correct .dot {
  background: #009A85;
}
.quiz-con.word--4 [data-row=text] .quiz-option__item.incorrect .dot,
.quiz-con.word--4-1 [data-row=text] .quiz-option__item.incorrect .dot {
  background: #ED4C33;
}
.quiz-con.word--4 .quiz-option__list--vertical-items .quiz-option__item,
.quiz-con.word--4-1 .quiz-option__list--vertical-items .quiz-option__item {
  justify-content: start;
}
.quiz-con.word--4 .dot,
.quiz-con.word--4-1 .dot {
  position: absolute;
  width: 12px;
  aspect-ratio: 1/1;
  background-color: #D9D9D9;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  touch-action: none;
  border: 0 solid #fff;
  box-sizing: border-box;
  opacity: 1;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
}
.quiz-con.word--4 .dot.is-active, .quiz-con.word--4 .dot.is-connected,
.quiz-con.word--4-1 .dot.is-active,
.quiz-con.word--4-1 .dot.is-connected {
  background-color: #7C7E7E;
  /*box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.2);*/
}
.quiz-con.word--4 .dot--top,
.quiz-con.word--4-1 .dot--top {
  top: 0;
}
.quiz-con.word--4 .dot--bottom,
.quiz-con.word--4-1 .dot--bottom {
  bottom: 0;
}
.quiz-con.word--4 .dot::before,
.quiz-con.word--4-1 .dot::before {
  width: 36px !important;
  height: 36px !important;
}
.quiz-con.word--4 .connect-dot-disabled,
.quiz-con.word--4-1 .connect-dot-disabled {
  cursor: default;
}
.quiz-con.word--4 .connection-layer,
.quiz-con.word--4-1 .connection-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.quiz-con.word--4 .connection-line,
.quiz-con.word--4-1 .connection-line {
  stroke: #7C7E7E;
  stroke-width: 4;
  stroke-linecap: round;
  fill: none;
  pointer-events: none;
  transition: stroke 0.2s ease;
}
.quiz-con.word--4 .connection-line.is-correct,
.quiz-con.word--4-1 .connection-line.is-correct {
  stroke: #009A85;
}
.quiz-con.word--4 .connection-line.is-incorrect,
.quiz-con.word--4-1 .connection-line.is-incorrect {
  stroke: #ED4C33;
}
.quiz-con.word--4 .connection-line.connection-preview,
.quiz-con.word--4-1 .connection-line.connection-preview {
  stroke-dasharray: 8 6;
  opacity: 0.5;
}
.quiz-con.word--4 .quiz-option__item.correct .choice-card,
.quiz-con.word--4-1 .quiz-option__item.correct .choice-card {
  box-shadow: 0 0 0 2px #009A85 inset;
}
.quiz-con.word--4 .quiz-option__item.incorrect .choice-card,
.quiz-con.word--4-1 .quiz-option__item.incorrect .choice-card {
  box-shadow: 0 0 0 2px #ED4C33 inset;
}
.quiz-con.word--4 .item-content,
.quiz-con.word--4-1 .item-content {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 290px;
  min-width: 65px;
  overflow: hidden;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word--4 .item-content,
  .quiz-con.word--4-1 .item-content {
    gap: 2px !important;
    max-height: none !important;
  }
}
.quiz-con.word--4 .item-content > span,
.quiz-con.word--4-1 .item-content > span {
  font-weight: bold;
  padding: 0 14px;
}
.quiz-con.word--4 .item-content.choice-card,
.quiz-con.word--4-1 .item-content.choice-card {
  width: 100%;
  height: 100%;
  border: 2.5px solid #ddd;
  border-radius: 10px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background-color: white;
  position: relative;
  aspect-ratio: 475/347;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--4 .item-content.choice-card,
  .quiz-con.word--4-1 .item-content.choice-card {
    border-radius: 8px;
  }
}
.quiz-con.word--4 .item-content.choice-card img,
.quiz-con.word--4-1 .item-content.choice-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word--4 .item-content.choice-card,
  .quiz-con.word--4-1 .item-content.choice-card {
    padding: 0;
  }
}
.quiz-con.word--4 .item-content.choice-card span,
.quiz-con.word--4-1 .item-content.choice-card span {
  font-size: 2rem;
  font-weight: 500;
}
.quiz-con.word--4 .item-content .quiz-num,
.quiz-con.word--4-1 .item-content .quiz-num {
  font-size: 3rem;
  transform: translateX(0px) !important;
  padding-left: 0 !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--4 .item-content .quiz-num,
  .quiz-con.word--4-1 .item-content .quiz-num {
    font-size: 18px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word--4 .item-content .quiz-num,
  .quiz-con.word--4-1 .item-content .quiz-num {
    position: absolute;
    top: -2px;
    left: 0;
  }
}
.quiz-con.word--4 .item-content .btn-sound,
.quiz-con.word--4-1 .item-content .btn-sound {
  width: 50px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--4 .item-content .btn-sound,
  .quiz-con.word--4-1 .item-content .btn-sound {
    width: 44px;
  }
}
.quiz-con.word--4 .dot.is-connected ~ .item-content > span,
.quiz-con.word--4-1 .dot.is-connected ~ .item-content > span {
  text-shadow: -3px -3px 0 white, 3px -3px 0 white, -3px 3px 0 white, 3px 3px 0 white, 0px 0px 11px rgba(0, 0, 0, 0.5); /* 그림자 */
  font-weight: bold;
}
.quiz-con.word--4 .quiz-option__list:first-child .item-content,
.quiz-con.word--4-1 .quiz-option__list:first-child .item-content {
  gap: 10px;
  font-size: 2rem;
  font-weight: 500;
  text-align: center;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--4 .quiz-option__list:first-child .item-content,
  .quiz-con.word--4-1 .quiz-option__list:first-child .item-content {
    gap: 6px !important;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--4 .quiz-option__list:first-child .item-content .quiz-num,
  .quiz-con.word--4-1 .quiz-option__list:first-child .item-content .quiz-num {
    position: relative;
  }
}
.quiz-con.word--4 .quiz-option__list:first-child .dot--top,
.quiz-con.word--4-1 .quiz-option__list:first-child .dot--top {
  display: none;
}
.quiz-con.word--4 .quiz-option__list:last-child .dot--bottom,
.quiz-con.word--4-1 .quiz-option__list:last-child .dot--bottom {
  display: none;
}
.quiz-con.word--4 .choice-card.correct,
.quiz-con.word--4-1 .choice-card.correct {
  outline-color: #28a745;
}
.quiz-con.word--4 .choice-card.correct::after,
.quiz-con.word--4-1 .choice-card.correct::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  aspect-ratio: 1/1;
  background: url("/assets/images/icon/ic_correct-ba3d4b32c42384d22882030f0a0fbcc5.png") no-repeat center center;
  background-size: contain;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--4 .choice-card.correct::after,
  .quiz-con.word--4-1 .choice-card.correct::after {
    width: 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--4 .choice-card.correct::after,
  .quiz-con.word--4-1 .choice-card.correct::after {
    width: 14px;
  }
}
.quiz-con.word--4 .choice-card.correct::after,
.quiz-con.word--4-1 .choice-card.correct::after {
  top: 6px;
  right: 6px;
  width: 20px;
}
.quiz-con.word--4 .choice-card.incorrect,
.quiz-con.word--4-1 .choice-card.incorrect {
  outline-color: #dc3545;
}
.quiz-con.word--4 .choice-card.incorrect::after,
.quiz-con.word--4-1 .choice-card.incorrect::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  aspect-ratio: 1/1;
  background: url("/assets/images/icon/ic_incorrect-e99b479beadeebfd1402736daebd5e37.png") no-repeat center center;
  background-size: contain;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--4 .choice-card.incorrect::after,
  .quiz-con.word--4-1 .choice-card.incorrect::after {
    width: 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--4 .choice-card.incorrect::after,
  .quiz-con.word--4-1 .choice-card.incorrect::after {
    width: 14px;
  }
}
.quiz-con.word--4 .choice-card.incorrect::after,
.quiz-con.word--4-1 .choice-card.incorrect::after {
  top: 6px;
  right: 6px;
  width: 20px;
}
.quiz-con.word--4 .quiz-option__list[data-row=image],
.quiz-con.word--4-1 .quiz-option__list[data-row=image] {
  overflow: visible;
}
.quiz-con.word--4 .quiz-option__list[data-row=image] .item-content.choice-card,
.quiz-con.word--4-1 .quiz-option__list[data-row=image] .item-content.choice-card {
  width: 145px;
  height: auto;
  max-width: 145px;
  aspect-ratio: 475/347;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--4 .quiz-option__list[data-row=image] .item-content.choice-card,
  .quiz-con.word--4-1 .quiz-option__list[data-row=image] .item-content.choice-card {
    width: 100%;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--4 .quiz-option__list[data-row=image] .item-content.choice-card,
  .quiz-con.word--4-1 .quiz-option__list[data-row=image] .item-content.choice-card {
    max-width: 88px;
  }
}

/* Word Type 4 Vertical */
.quiz-con.word--4--vertical {
  overflow: visible;
  max-height: none;
}
.quiz-con.word--4--vertical .quiz-option {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 0;
  padding: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--4--vertical .quiz-option {
    justify-content: space-between;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.word--4--vertical .quiz-option {
    padding: 0;
  }
}
.quiz-con.word--4--vertical .quiz-option__list.quiz-option__list--vertical-items {
  display: flex;
  flex-direction: column;
  width: auto;
  gap: 18px;
  justify-content: flex-start;
  align-items: initial;
}
.quiz-con.word--4--vertical .quiz-option__list.quiz-option__list--vertical-items:nth-child(1) {
  flex-shrink: 0;
}
@media (min-width: 1367px) {
  .quiz-con.word--4--vertical .quiz-option__list.quiz-option__list--vertical-items:nth-child(1) {
    padding-right: 30rem;
  }
}
.quiz-con.word--4--vertical .quiz-option__list.quiz-option__list--vertical-items:nth-child(2) {
  max-width: 50%;
  scrollbar-gutter: stable;
}
.quiz-con.word--4--vertical .quiz-option__list--vertical-items .quiz-option__item {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 112px;
  padding: 2px 0;
  flex: initial;
  max-width: initial;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--4--vertical .quiz-option__list--vertical-items .quiz-option__item {
    gap: 10px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--4--vertical .quiz-option__list--vertical-items .quiz-option__item {
    gap: 6px;
  }
}
.quiz-con.word--4--vertical .quiz-option__list--vertical-items .quiz-option__item .dot {
  position: static;
  transform: none;
  background-color: #D9D9D9;
  flex-shrink: 0;
  width: 14px;
  aspect-ratio: 1/1;
}
.quiz-con.word--4--vertical .quiz-option__list--vertical-items:first-child .quiz-option__item {
  justify-content: flex-start;
}
.quiz-con.word--4--vertical .quiz-option__list--vertical-items:first-child .quiz-option__item .item-content {
  display: flex;
  align-items: center;
  gap: 10px;
}
.quiz-con.word--4--vertical .quiz-option__list--vertical-items:first-child .quiz-option__item .item-content .choice-card {
  width: 145px;
  max-height: 109px;
  border-radius: 10px;
  overflow: hidden;
  border: 2.5px solid #ddd;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--4--vertical .quiz-option__list--vertical-items:first-child .quiz-option__item .item-content .choice-card {
    border-width: 1.5px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--4--vertical .quiz-option__list--vertical-items:first-child .quiz-option__item .item-content .choice-card {
    width: 88px;
    border-radius: 8px;
  }
}
.quiz-con.word--4--vertical .quiz-option__list--vertical-items:last-child .quiz-option__item {
  align-items: center;
  gap: 18px;
}
.quiz-con.word--4--vertical .quiz-option__list--vertical-items:last-child .quiz-option__item .dot--top {
  margin-top: 0;
  margin-right: 10px;
}
.quiz-con.word--4--vertical .quiz-option__list--vertical-items:last-child .quiz-option__item .item-content {
  flex-shrink: 0;
  width: 100%;
  max-width: 145px;
}
.quiz-con.word--4--vertical .quiz-option__list--vertical-items:last-child .quiz-option__item .item-content.choice-card {
  max-width: 145px;
  max-height: 109px;
}
.quiz-con.word--4--vertical .quiz-option__list--vertical-items:last-child .quiz-option__item .quiz-option__item--txt {
  flex: 1;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.quiz-con.word--4--vertical .word-con--matching {
  position: relative;
}
.quiz-con.word--4--vertical .word-match__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.quiz-con.word--4--vertical .word-match__line {
  stroke: #7C7E7E;
  stroke-width: 4;
  stroke-linecap: round;
  fill: none;
  pointer-events: none;
  transition: stroke 0.2s ease;
}
.quiz-con.word--4--vertical .word-match__line.is-correct {
  stroke: #009A85;
}
.quiz-con.word--4--vertical .word-match__line.is-incorrect {
  stroke: #ED4C33;
}
.quiz-con.word--4--vertical .word-match__line.connection-preview {
  stroke-dasharray: 8 6;
  opacity: 0.5;
}
.quiz-con.word--4--vertical .word-con--matching .dot {
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  touch-action: none;
}
.quiz-con.word--4--vertical .word-con--matching .dot.is-active, .quiz-con.word--4--vertical .word-con--matching .dot.is-connected {
  background-color: #7C7E7E;
}
.quiz-con.word--4--vertical .word-con--matching .dot.is-correct-dot {
  background-color: #009A85;
}
.quiz-con.word--4--vertical .word-con--matching .dot.is-incorrect-dot {
  background-color: #ED4C33;
}
.quiz-con.word--4--vertical .word-con--matching .connect-dot-disabled {
  cursor: default;
}
.quiz-con.word--4--vertical .quiz-option__item.correct .item-content,
.quiz-con.word--4--vertical .quiz-option__item.correct .quiz-option__item--txt,
.quiz-con.word--4--vertical .quiz-option__item.correct .choice-card {
  box-shadow: 0 0 0 2px #009A85 inset;
}
.quiz-con.word--4--vertical .quiz-option__item.incorrect .item-content,
.quiz-con.word--4--vertical .quiz-option__item.incorrect .quiz-option__item--txt,
.quiz-con.word--4--vertical .quiz-option__item.incorrect .choice-card {
  box-shadow: 0 0 0 2px #ED4C33 inset;
}
.quiz-con.word--4--vertical .quiz-option__list--vertical-items:last-child .quiz-option__item:last-child {
  position: relative;
}
.quiz-con.word--4--vertical .quiz-option__list--vertical-items:last-child .quiz-option__item:last-child .custom-select {
  overflow: visible;
}
.quiz-con.word--4--vertical .quiz-option__list--vertical-items:last-child .quiz-option__item:last-child .custom-select__options {
  top: auto;
  bottom: calc(100% + 8px);
  margin-top: 0;
  margin-bottom: 8px;
  z-index: 20;
}

@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.word--4-1 .quiz-option__list--vertical-items,
  .quiz-con.word--4-2 .quiz-option__list--vertical-items {
    gap: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .quiz-con.word--4-1 .quiz-option__list--vertical-items,
  .quiz-con.word--4-2 .quiz-option__list--vertical-items {
    gap: 0;
  }
}
.quiz-con.word--4-1 .quiz-option__item.img-item,
.quiz-con.word--4-2 .quiz-option__item.img-item {
  padding-left: 4.6rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--4-1 .quiz-option__item.img-item,
  .quiz-con.word--4-2 .quiz-option__item.img-item {
    padding-left: 21px;
  }
}
.quiz-con.word--4-1 .quiz-option__item.img-item .num,
.quiz-con.word--4-2 .quiz-option__item.img-item .num {
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  font-size: 2.8rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--4-1 .quiz-option__item.img-item .num,
  .quiz-con.word--4-2 .quiz-option__item.img-item .num {
    font-size: 17px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word--4-1 .quiz-option__item.img-item {
    padding-left: 0;
  }
  .quiz-con.word--4-1 .quiz-option__item.img-item .num {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(0);
  }
}

.quiz-con.word--4-1 .quiz-option__item--sentence,
.quiz-con.word--4-3 .quiz-option__item--sentence {
  margin-top: -4px;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.word--4-1 .quiz-option__item--sentence,
  .quiz-con.word--4-3 .quiz-option__item--sentence {
    margin-top: -3px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--4-1 .quiz-option__item--sentence,
  .quiz-con.word--4-3 .quiz-option__item--sentence {
    margin-top: -1px;
  }
}

.quiz-con.word--4-2 .quiz-option__item--txt,
.quiz-con.word--4-3 .quiz-option__item--txt {
  margin-top: -2px;
}

/* Word Type 4-2 Responsive */
.quiz-con.word--4-2 .drag-box__item--con {
  display: none;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--4-2 .quiz-option {
    flex-direction: column;
    justify-content: flex-start;
  }
  .quiz-con.word--4-2 .quiz-option__list--vertical-items:first-child {
    width: 100%;
    gap: 24px;
  }
  .quiz-con.word--4-2 .quiz-option__list--vertical-items:nth-of-type(2),
  .quiz-con.word--4-2 .word-match__lines,
  .quiz-con.word--4-2 .dot {
    display: none;
  }
  .quiz-con.word--4-2 .quiz-option__item {
    min-height: auto;
    padding: 0;
  }
  .quiz-con.word--4-2 .quiz-option__item .item-content {
    border: none;
    box-shadow: none !important;
    gap: 10px !important;
  }
  .quiz-con.word--4-2 .quiz-option__item .item-content .quiz-num {
    font-size: 18px;
  }
  .quiz-con.word--4-2 .quiz-option__item .item-content .choice-card {
    border: none;
    padding: 0;
    width: auto;
  }
  .quiz-con.word--4-2 .quiz-option__item .item-content .drag-box__item--con {
    display: block;
  }
  .quiz-con.word--4-2 .quiz-option__item .item-content .drag-box__item--con .btn-minus {
    height: auto;
    aspect-ratio: initial;
    padding: 5px 35px 5px 5px;
  }
  .quiz-con.word--4-2 .quiz-option__item.correct .item-content {
    border-color: #009A85;
  }
  .quiz-con.word--4-2 .quiz-option__item.incorrect .item-content {
    border-color: #ED4C33;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--4-2 .quiz-option .quiz-option__list .quiz-option__item {
    min-height: initial;
  }
  .quiz-con.word--4-2 .quiz-option .quiz-option__list .quiz-option__item .item-content .choice-card {
    max-width: 88px;
  }
  .quiz-con.word--4-2 .btn-minus {
    background: #fff url(/assets/images/icon/ic_btn-minus-6b978b45086fcf5195f87af635a31ddd.png) no-repeat right 6px center/22px auto;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word--4-2 .quiz-option__item .item-content .quiz-num {
    position: initial;
  }
}

/* Word Type 4-3 */
.quiz-con.word--4-3 {
  padding: 0 4rem !important;
}
.quiz-con.word--4-3 .item-content {
  max-width: 25vw !important;
  min-height: 8vh !important;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word--4-3 .item-content .quiz-num {
    position: initial !important;
  }
}
.quiz-con.word--4-3 .item-content .choice-card {
  border-radius: 8px;
  overflow: hidden;
}
.quiz-con.word--4-3 .quiz-option__list {
  gap: 28px !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--4-3 .quiz-option__list {
    gap: 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--4-3 .quiz-option__list {
    gap: 0 !important;
  }
}
.quiz-con.word--4-3 .quiz-option__list .quiz-option__item {
  width: fit-content !important;
  text-align: left;
  height: auto;
  flex: 0 !important;
}
.quiz-con.word--4-3 .quiz-option__list .quiz-option__item--txt input.correct {
  padding-right: 35px;
  border-bottom: 1px solid #009A85;
  color: #009A85 !important;
  background: url("/assets/images/icon/ic_correct-ba3d4b32c42384d22882030f0a0fbcc5.png") no-repeat right 10px center/20px auto;
}
.quiz-con.word--4-3 .quiz-option__list .quiz-option__item--txt input.incorrect {
  padding-right: 35px;
  border-bottom: 1px solid #ED4C33;
  color: #ED4C33 !important;
  background: url("/assets/images/icon/ic_incorrect-e99b479beadeebfd1402736daebd5e37.png") no-repeat right 10px center/20px auto;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word--4-3 .quiz-option__item {
    min-height: 160px !important;
    display: flex !important;
    align-items: center;
  }
  .quiz-con.word--4-3 .word-cont-left .quiz-option__item .item-content {
    display: grid !important;
    grid-template-areas: "number speaker" "image image";
    grid-template-columns: auto auto !important;
    justify-items: center !important;
    align-items: center !important;
    grid-template-rows: 44px;
    gap: 0;
    margin: 0 !important;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait) and (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) and (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.word--4-3 .word-cont-left .quiz-option__item .item-content {
    grid-template-rows: 44px 110px !important;
  }
}
@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: 932px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) and (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) and (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word--4-3 .word-cont-left .quiz-option__item .item-content {
    grid-template-rows: 44px 70px !important;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word--4-3 .quiz-option__list:not(.word-cont-left) .quiz-option__item--txt {
    min-height: 16vh;
    display: flex;
    align-items: center;
  }
  .quiz-con.word--4-3 .word-cont-left .quiz-num {
    grid-area: number;
    justify-self: flex-end;
  }
  .quiz-con.word--4-3 .word-cont-left .sound-btn {
    grid-area: speaker;
    justify-self: flex-start;
  }
  .quiz-con.word--4-3 .word-cont-left .choice-card {
    grid-area: image;
    margin: 0 !important;
    gap: 0 !important;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.word--4-3 .quiz-option__item {
    min-height: 160px !important;
    display: flex !important;
    align-items: center;
  }
  .quiz-con.word--4-3 .word-cont-left .quiz-option__item .item-content {
    display: grid !important;
    grid-template-areas: "number speaker" "image image";
    grid-template-columns: auto auto !important;
    justify-items: center !important;
    align-items: center !important;
    grid-template-rows: 44px;
    gap: 0;
    margin: 0 !important;
  }
}
@media (orientation: portrait) and (max-width: 1024px) and (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.word--4-3 .word-cont-left .quiz-option__item .item-content {
    grid-template-rows: 44px 110px !important;
  }
}
@media (orientation: portrait) and (max-width: 1024px) and (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: portrait) and (max-width: 1024px) and (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word--4-3 .word-cont-left .quiz-option__item .item-content {
    grid-template-rows: 44px 70px !important;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.word--4-3 .quiz-option__list:not(.word-cont-left) .quiz-option__item--txt {
    min-height: 16vh;
    display: flex;
    align-items: center;
  }
  .quiz-con.word--4-3 .word-cont-left .quiz-num {
    grid-area: number;
    justify-self: flex-end;
  }
  .quiz-con.word--4-3 .word-cont-left .sound-btn {
    grid-area: speaker;
    justify-self: flex-start;
  }
  .quiz-con.word--4-3 .word-cont-left .choice-card {
    grid-area: image;
    margin: 0 !important;
    gap: 0 !important;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--4-3 .quiz-option {
    align-items: flex-start;
    gap: 50px !important;
    padding: 0 !important;
  }
  .quiz-con.word--4-3 .word-cont-left {
    flex: 0 0 calc(45% - 0px);
    max-width: calc(45% - 0px);
  }
  .quiz-con.word--4-3 .quiz-option__list:not(.word-cont-left) {
    flex: 0 0 calc(45% - 0px);
    max-width: calc(45% - 0px);
  }
}

/* Word Type 5 */
.quiz-con.word--5 .quiz-con__inner {
  gap: 0;
  justify-content: space-between;
}
.quiz-con.word--5 .quiz-option {
  width: 100%;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--5 .quiz-option {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
}
.quiz-con.word--5 .quiz-img {
  width: fit-content;
  height: 440px;
  position: relative;
  margin: 0 auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--5 .quiz-img {
    width: calc(100% - 80px);
    max-height: none;
    height: auto;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--5 .quiz-img {
    max-width: 100%;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--5 .quiz-img {
    width: 100%;
  }
}
.quiz-con.word--5 .quiz-img img {
  height: 100%;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--5 .quiz-img img {
    width: 100%;
  }
}
.quiz-con.word--5 .num-list {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--5 .num-list {
    pointer-events: none;
  }
  .quiz-con.word--5 .num-list .txt-option {
    display: none;
  }
}
.quiz-con.word--5 .num-list .num-item {
  height: 35px;
  position: absolute;
  display: flex;
  align-items: center;
}
.quiz-con.word--5 .num-list .num-item .guide-box {
  width: 190px;
  height: 54px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2.5px solid #D6D6D6;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.26);
  justify-content: center;
  display: none;
}
.quiz-con.word--5 .num-list .num-item .guide-box.is-active {
  display: block;
}
.quiz-con.word--5 .num-list .num-item .guide-box.on {
  border-color: rgba(100, 149, 237, 0.8);
  box-shadow: 0 0 16px rgba(100, 149, 237, 0.7);
  transition: box-shadow 0.1s ease, outline 0.1s ease;
}
.quiz-con.word--5 .num-list .num-item.is-filled .circle-num {
  opacity: 0;
}
.quiz-con.word--5 .num-list .num-item.is-filled .txt-option {
  display: none;
}
.quiz-con.word--5 .num-list .num-item.is-filled .draggable-text {
  width: auto;
  height: 54px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.quiz-con.word--5 .num-list .num-item .draggable-text {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.45);
  outline: 1.5px solid #7C7E7E;
  font-weight: 700;
}
.quiz-con.word--5 .num-list .num-item.correct .draggable-text {
  outline-color: #009A85;
  color: #009A85;
  font-weight: 700;
}
.quiz-con.word--5 .num-list .num-item.correct .draggable-text::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  aspect-ratio: 1/1;
  background: url("/assets/images/icon/ic_correct-ba3d4b32c42384d22882030f0a0fbcc5.png") no-repeat center center;
  background-size: contain;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--5 .num-list .num-item.correct .draggable-text::after {
    width: 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--5 .num-list .num-item.correct .draggable-text::after {
    width: 14px;
  }
}
.quiz-con.word--5 .num-list .num-item.correct .draggable-text::after {
  top: initial;
  right: 20px;
  width: 20px;
}
.quiz-con.word--5 .num-list .num-item.correct .draggable-text span {
  margin-right: 25px;
}
.quiz-con.word--5 .num-list .num-item.incorrect .draggable-text {
  outline-color: #ED4C33;
  color: #ED4C33;
  font-weight: 700;
}
.quiz-con.word--5 .num-list .num-item.incorrect .draggable-text::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  aspect-ratio: 1/1;
  background: url("/assets/images/icon/ic_incorrect-e99b479beadeebfd1402736daebd5e37.png") no-repeat center center;
  background-size: contain;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--5 .num-list .num-item.incorrect .draggable-text::after {
    width: 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--5 .num-list .num-item.incorrect .draggable-text::after {
    width: 14px;
  }
}
.quiz-con.word--5 .num-list .num-item.incorrect .draggable-text::after {
  top: initial;
  right: 20px;
  width: 20px;
}
.quiz-con.word--5 .num-list .num-item.incorrect .draggable-text span {
  margin-right: 25px;
}
.quiz-con.word--5 .num-list .num-item .circle-num {
  width: 35px;
  height: 35px;
  background-color: #EDF3F6;
  color: #232323;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: bold;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.48);
  padding-bottom: 1px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--5 .num-list .num-item .circle-num {
    width: 28px;
    height: 28px;
    font-size: 17px;
  }
}
.quiz-con.word--5 .num-list .num-item:has(.draggable-text) .guide-box {
  display: none !important;
}
.quiz-con.word--5 .image-slider-container {
  max-width: 1280px;
  height: 94px;
  padding: 0 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--5 .image-slider-container {
    display: none;
  }
}
.quiz-con.word--5 .image-slider-container .image-list {
  height: 100%;
  justify-content: left;
  align-items: center;
  margin: 0 auto;
}
.quiz-con.word--5 .image-slider-container .draggable-text {
  width: auto;
  height: 54px;
}
.quiz-con.word--5 .mobile-drop-list {
  display: none;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--5 .mobile-drop-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    padding: 0 40px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--5 .mobile-drop-list {
    max-width: 100%;
    padding: 0;
  }
}
.quiz-con.word--5 .mobile-drop-list .num-item {
  position: relative;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--5 .mobile-drop-list .num-item {
    display: flex;
    align-items: center;
    gap: 6px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--5 .mobile-drop-list .num-item.correct .btn-minus {
    color: #009A85;
    border: 1.5px solid #009A85;
    background-image: none;
  }
  .quiz-con.word--5 .mobile-drop-list .num-item.correct .btn-minus::after {
    content: "";
    display: inline-block;
    width: 16px;
    aspect-ratio: 1/1;
    background: url("/assets/images/icon/ic_correct-ba3d4b32c42384d22882030f0a0fbcc5.png") no-repeat center center;
    background-size: contain;
    margin-left: 6px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--5 .mobile-drop-list .num-item.incorrect .btn-minus {
    color: #ED4C33;
    border: 1.5px solid #ED4C33;
    background-image: none;
  }
  .quiz-con.word--5 .mobile-drop-list .num-item.incorrect .btn-minus::after {
    content: "";
    display: inline-block;
    width: 16px;
    aspect-ratio: 1/1;
    background: url("/assets/images/icon/ic_incorrect-e99b479beadeebfd1402736daebd5e37.png") no-repeat center center;
    background-size: contain;
    margin-left: 6px;
  }
}
.quiz-con.word--5 .mobile-drop-list .num-item .btn-minus::after {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--5 .mobile-drop-list .circle-num {
    font-size: 17px;
    font-weight: 700;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--5 .mobile-drop-list .txt-option {
    flex: 1;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--5 .mobile-drop-list .drag-box__item--con {
    display: flex;
    font-weight: 600;
  }
  .quiz-con.word--5 .mobile-drop-list .drag-box__item--con .btn-minus {
    width: 100%;
    height: 44px;
    background: #fff url(/assets/images/icon/ic_btn-minus-6b978b45086fcf5195f87af635a31ddd.png) no-repeat right 12px center/22px auto;
    color: #232323;
    border: 2.5px solid #232323;
    border-radius: 6px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) and (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (max-width: 1024px) and (orientation: landscape) and (max-width: 1366px), (orientation: landscape) and (max-width: 1366px) and (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) and (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--5 .mobile-drop-list .drag-box__item--con .btn-minus {
    border-width: 1px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) and (orientation: portrait) and (max-width: 767px), (orientation: portrait) and (max-width: 1024px) and (orientation: landscape) and (max-width: 932px), (orientation: landscape) and (max-width: 1366px) and (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1366px) and (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--5 .mobile-drop-list .drag-box__item--con .btn-minus {
    background-size: 18px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--5 .mobile-drop-list .drag-box__item--con .btn-minus::before {
    content: attr(data-label);
    font-size: 17px;
  }
}

/* Word Type 6 */
.quiz-con.word--6 {
  padding-bottom: 4rem !important;
}
.quiz-con.word--6 .quiz-option__list {
  column-gap: 16.5rem;
  max-width: 1005px;
  padding: 0 !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--6 .quiz-option__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word--6 .quiz-option__list {
    grid-template-columns: 1fr;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--6 .quiz-option__item {
    align-items: flex-start;
  }
}
.quiz-con.word--6 .quiz-option__item .item-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.quiz-con.word--6 .quiz-option__item .item-content.choice-card {
  max-width: 190px;
  width: 100%;
  height: auto;
  border: 2.5px solid #D6D6D6;
  border-radius: 12px;
  overflow: hidden;
  border-radius: 10px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--6 .quiz-option__item .item-content.choice-card {
    border-radius: 8px;
  }
}
.quiz-con.word--6 .quiz-option__item .item-content.choice-card img {
  width: 100%;
  height: 100%;
  display: block;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--6 .quiz-option__item .item-content.choice-card {
    max-width: 50%;
  }
}
.quiz-con.word--6 .quiz-option__item .img-option {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 47px;
  aspect-ratio: unset;
  font-size: 2rem;
  font-weight: 600;
  color: #232323;
  position: relative;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--6 .quiz-option__item .img-option {
    height: 44px;
  }
}
.quiz-con.word--6 .quiz-option__item.correct .img-option {
  border-width: 2.5px !important;
  border-color: #009A85;
}
.quiz-con.word--6 .quiz-option__item.correct .img-option::after {
  top: 12px;
  width: 20px;
}
.quiz-con.word--6 .quiz-option__item.correct .img-option .dropped-text {
  color: #009A85;
  margin-right: 24px;
}
.quiz-con.word--6 .quiz-option__item.incorrect .img-option {
  border-width: 2.5px !important;
  border-color: #ED4C33;
}
.quiz-con.word--6 .quiz-option__item.incorrect .img-option::after {
  top: 12px;
  width: 20px;
}
.quiz-con.word--6 .quiz-option__item.incorrect .img-option .dropped-text {
  color: #ED4C33;
  margin-right: 20px;
}
.quiz-con.word--6 .image-slider-container {
  max-width: 1280px;
  height: auto;
  padding: 0 20px;
  background: #E8E8E8;
}
.quiz-con.word--6 .image-slider-container .image-list {
  justify-content: left;
  margin: 0 auto;
}
.quiz-con.word--6 .image-slider-container .draggable-text {
  width: auto;
  height: 54px;
}

.quiz-con.word--5 .image-slider-container,
.quiz-con.word--6 .image-slider-container {
  padding: 0 20px;
}
.quiz-con.word--5 .image-slider-container .image-list,
.quiz-con.word--6 .image-slider-container .image-list {
  height: 94px;
}

/* Word Type 7 */
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--7 {
    gap: 0 !important;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--7 .quiz-con__inner {
    justify-content: center;
  }
}
.quiz-con.word--7 .word-con {
  display: flex;
  justify-content: center;
}
.quiz-con.word--7 .desc-con {
  width: 100%;
  max-width: 800px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--7 .desc-con {
    max-width: 600px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .quiz-con.word--7 .desc-con {
    max-width: 60%;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--7 .desc-con {
    max-width: 60%;
  }
}
.quiz-con.word--7 .desc-con i {
  font-style: normal;
}
.quiz-con.word--7 .quiz-check .icon {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--7 .quiz-check .icon {
    right: 10px;
  }
}

/* Word Type 8 */
.quiz-con.word--8 .num {
  position: static !important;
}
.quiz-con.word--8 .quiz-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--8 .quiz-option {
    flex-direction: column-reverse;
    gap: 36px;
  }
}
.quiz-con.word--8 .quiz-option__list {
  flex-direction: column;
  justify-content: start;
  gap: 16px;
  width: 100%;
  max-height: 100%;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--8 .quiz-option__list {
    gap: 24px;
    padding-top: 4px !important;
  }
}
.quiz-con.word--8 .quiz-option__item {
  width: 100%;
  justify-content: flex-start;
  align-items: baseline;
  gap: 8px;
  flex-wrap: nowrap;
}
.quiz-con.word--8 .quiz-option__item--txt {
  text-align: left;
}
.quiz-con.word--8 .quiz-option__item--txt .quiz-input {
  max-width: 300px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--8 .quiz-option__item--txt .quiz-input {
    max-width: 95px;
  }
}
.quiz-con.word--8 .word-bank {
  max-width: 1090px;
  width: 100%;
}

/* Word Type 9 */
.quiz-con.word--9 .quiz-con__inner,
.quiz-con.word--9-1 .quiz-con__inner {
  justify-content: flex-start;
  gap: 40px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--9 .quiz-con__inner,
  .quiz-con.word--9-1 .quiz-con__inner {
    gap: 36px;
  }
}
.quiz-con.word--9 .word-con,
.quiz-con.word--9-1 .word-con {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--9 .word-con,
  .quiz-con.word--9-1 .word-con {
    gap: 24px;
  }
}
.quiz-con.word--9 .word-con .desc-con,
.quiz-con.word--9-1 .word-con .desc-con {
  width: 100%;
  max-width: 800px;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .quiz-con.word--9 .word-con .desc-con,
  .quiz-con.word--9-1 .word-con .desc-con {
    max-width: 68%;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--9 .word-con .desc-con,
  .quiz-con.word--9-1 .word-con .desc-con {
    max-width: 68%;
  }
}
.quiz-con.word--9 .word-con .quiz-img,
.quiz-con.word--9-1 .word-con .quiz-img {
  max-height: 244px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--9 .word-con .quiz-img,
  .quiz-con.word--9-1 .word-con .quiz-img {
    max-height: initial;
  }
}
.quiz-con.word--9 .word-con .quiz-option__item,
.quiz-con.word--9-1 .word-con .quiz-option__item {
  font-size: 55px;
  font-weight: bold;
  line-height: unset;
  cursor: initial;
  gap: 14px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--9 .word-con .quiz-option__item,
  .quiz-con.word--9-1 .word-con .quiz-option__item {
    font-size: 44px;
    gap: 10px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--9 .word-con .quiz-option__item,
  .quiz-con.word--9-1 .word-con .quiz-option__item {
    font-size: 27px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word--9 .word-con .quiz-option__item,
  .quiz-con.word--9-1 .word-con .quiz-option__item {
    gap: 5.5px;
  }
}
.quiz-con.word--9 .word-con .quiz-option__item .blank-box,
.quiz-con.word--9-1 .word-con .quiz-option__item .blank-box {
  min-width: 92px;
  min-height: 92px;
  padding: 0;
  cursor: pointer;
  margin: 0 !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--9 .word-con .quiz-option__item .blank-box,
  .quiz-con.word--9-1 .word-con .quiz-option__item .blank-box {
    min-width: 70px;
    min-height: 70px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--9 .word-con .quiz-option__item .blank-box,
  .quiz-con.word--9-1 .word-con .quiz-option__item .blank-box {
    min-width: 35px;
    min-height: 35px;
  }
}
.quiz-con.word--9 .word-con .quiz-option__item .blank-box.is-selected,
.quiz-con.word--9-1 .word-con .quiz-option__item .blank-box.is-selected {
  justify-content: center;
}
.quiz-con.word--9 .word-con .quiz-option__item .blank-box.is-selected.correct,
.quiz-con.word--9-1 .word-con .quiz-option__item .blank-box.is-selected.correct {
  outline-color: #009A85;
}
.quiz-con.word--9 .word-con .quiz-option__item .blank-box.is-selected.correct::after,
.quiz-con.word--9-1 .word-con .quiz-option__item .blank-box.is-selected.correct::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  aspect-ratio: 1/1;
  background: url("/assets/images/icon/ic_correct-ba3d4b32c42384d22882030f0a0fbcc5.png") no-repeat center center;
  background-size: contain;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--9 .word-con .quiz-option__item .blank-box.is-selected.correct::after,
  .quiz-con.word--9-1 .word-con .quiz-option__item .blank-box.is-selected.correct::after {
    width: 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--9 .word-con .quiz-option__item .blank-box.is-selected.correct::after,
  .quiz-con.word--9-1 .word-con .quiz-option__item .blank-box.is-selected.correct::after {
    width: 14px;
  }
}
.quiz-con.word--9 .word-con .quiz-option__item .blank-box.is-selected.correct::after,
.quiz-con.word--9-1 .word-con .quiz-option__item .blank-box.is-selected.correct::after {
  top: -15px;
  right: -15px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--9 .word-con .quiz-option__item .blank-box.is-selected.correct::after,
  .quiz-con.word--9-1 .word-con .quiz-option__item .blank-box.is-selected.correct::after {
    top: -10px;
    right: -10px;
  }
}
.quiz-con.word--9 .word-con .quiz-option__item .blank-box.is-selected.incorrect,
.quiz-con.word--9-1 .word-con .quiz-option__item .blank-box.is-selected.incorrect {
  outline-color: #ED4C33;
}
.quiz-con.word--9 .word-con .quiz-option__item .blank-box.is-selected.incorrect::after,
.quiz-con.word--9-1 .word-con .quiz-option__item .blank-box.is-selected.incorrect::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  aspect-ratio: 1/1;
  background: url("/assets/images/icon/ic_incorrect-e99b479beadeebfd1402736daebd5e37.png") no-repeat center center;
  background-size: contain;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--9 .word-con .quiz-option__item .blank-box.is-selected.incorrect::after,
  .quiz-con.word--9-1 .word-con .quiz-option__item .blank-box.is-selected.incorrect::after {
    width: 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--9 .word-con .quiz-option__item .blank-box.is-selected.incorrect::after,
  .quiz-con.word--9-1 .word-con .quiz-option__item .blank-box.is-selected.incorrect::after {
    width: 14px;
  }
}
.quiz-con.word--9 .word-con .quiz-option__item .blank-box.is-selected.incorrect::after,
.quiz-con.word--9-1 .word-con .quiz-option__item .blank-box.is-selected.incorrect::after {
  top: -15px;
  right: -15px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--9 .word-con .quiz-option__item .blank-box.is-selected.incorrect::after,
  .quiz-con.word--9-1 .word-con .quiz-option__item .blank-box.is-selected.incorrect::after {
    top: -10px;
    right: -10px;
  }
}
.quiz-con.word--9 .word-con .quiz-option__item .blank-box.correct,
.quiz-con.word--9 .word-con .quiz-option__item .blank-box.incorrect,
.quiz-con.word--9-1 .word-con .quiz-option__item .blank-box.correct,
.quiz-con.word--9-1 .word-con .quiz-option__item .blank-box.incorrect {
  background: none;
}
.quiz-con.word--9 .word-bank,
.quiz-con.word--9-1 .word-bank {
  background-color: #fff;
  padding: 0 20px;
  border-radius: 12px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--9 .word-bank,
  .quiz-con.word--9-1 .word-bank {
    margin: initial;
  }
}
.quiz-con.word--9 .word-bank .word,
.quiz-con.word--9-1 .word-bank .word {
  min-width: 92px;
  min-height: 92px;
  background-color: #fff;
  border: 1px solid #AEB8C2;
  border-radius: 8px;
  font-size: 55px;
  line-height: unset;
  cursor: pointer;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--9 .word-bank .word,
  .quiz-con.word--9-1 .word-bank .word {
    min-width: 70px;
    min-height: 70px;
    font-size: 44px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--9 .word-bank .word,
  .quiz-con.word--9-1 .word-bank .word {
    min-width: 35px;
    min-height: 35px;
    font-size: 27px;
  }
}
.quiz-con.word--9 .word-bank .word.is-selected,
.quiz-con.word--9-1 .word-bank .word.is-selected {
  border-color: #CACACA;
  background: #EDF3F6;
  text-decoration: none;
}

@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--9 .quiz-num {
    position: absolute;
  }
}

@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--9-1 {
    gap: 20px !important;
  }
}
.quiz-con.word--9-1 .quiz-con__inner {
  justify-content: center;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.word--9-1 .quiz-con__inner {
    justify-content: flex-start;
  }
}
.quiz-con.word--9-1 .word-con {
  gap: 5rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--9-1 .word-con {
    gap: 24px;
  }
}

/* Word Type 10, 11 */
.quiz-con.word--10 .quiz-con__inner,
.quiz-con.word--11 .quiz-con__inner {
  gap: 24px;
}
.quiz-con.word--10 .quiz-txt-sound,
.quiz-con.word--11 .quiz-txt-sound {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word--10 .quiz-txt-sound,
  .quiz-con.word--11 .quiz-txt-sound {
    flex-direction: column-reverse;
    gap: 10px;
  }
}
.quiz-con.word--10 .quiz-txt,
.quiz-con.word--11 .quiz-txt {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 8rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--10 .quiz-txt,
  .quiz-con.word--11 .quiz-txt {
    font-size: 44px;
  }
}
.quiz-con.word--10 .sound-btn .sound-btn__img,
.quiz-con.word--11 .sound-btn .sound-btn__img {
  width: 100px;
  height: 100px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--10 .sound-btn .sound-btn__img,
  .quiz-con.word--11 .sound-btn .sound-btn__img {
    width: 56px;
    height: 56px;
  }
}
.quiz-con.word--10 .quiz-option,
.quiz-con.word--11 .quiz-option {
  width: 100%;
  max-width: 840px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--10 .quiz-option,
  .quiz-con.word--11 .quiz-option {
    max-width: 85%;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word--10 .quiz-option,
  .quiz-con.word--11 .quiz-option {
    max-width: 100%;
  }
}
.quiz-con.word--10 .quiz-option__list,
.quiz-con.word--11 .quiz-option__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--10 .quiz-option__list,
  .quiz-con.word--11 .quiz-option__list {
    justify-content: flex-start;
  }
}
.quiz-con.word--10 .quiz-option__item,
.quiz-con.word--11 .quiz-option__item {
  min-height: 64px;
  gap: 20px !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--10 .quiz-option__item,
  .quiz-con.word--11 .quiz-option__item {
    gap: 10px !important;
    min-height: initial;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--10 .quiz-option__item,
  .quiz-con.word--11 .quiz-option__item {
    gap: 7px !important;
  }
}
.quiz-con.word--10 .quiz-option__item .quiz-check__item,
.quiz-con.word--11 .quiz-option__item .quiz-check__item {
  line-height: normal;
}
.quiz-con.word--10 .quiz-option__item > span,
.quiz-con.word--11 .quiz-option__item > span {
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  font-size: 3rem;
  font-weight: 700;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--10 .quiz-option__item > span,
  .quiz-con.word--11 .quiz-option__item > span {
    width: 12px;
    font-size: 18px;
  }
}
.quiz-con.word--10 .quiz-check,
.quiz-con.word--11 .quiz-check {
  padding: 10px 20px;
  padding-right: 45px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--10 .quiz-check,
  .quiz-con.word--11 .quiz-check {
    padding: 10px;
    padding-right: 35px;
  }
}
.quiz-con.word--10 .quiz-check__item,
.quiz-con.word--11 .quiz-check__item {
  text-align: center;
}
.quiz-con.word--10 .quiz-check .icon,
.quiz-con.word--11 .quiz-check .icon {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--10 .quiz-check .icon,
  .quiz-con.word--11 .quiz-check .icon {
    right: 12px;
  }
}

.quiz-con.word--11 .quiz-check {
  justify-content: start;
}
.quiz-con.word--11 .quiz-check__item {
  text-align: left;
}

/* Word Type 12 */
.quiz-con.word--12 .quiz-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding-right: 15px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--12 .quiz-list {
    gap: 24px;
  }
}
.quiz-con.word--12 .quiz-list__item {
  display: flex;
  align-items: center;
  gap: 40px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--12 .quiz-list__item {
    flex-direction: column;
    gap: 16px;
  }
}
.quiz-con.word--12 .quiz-desc {
  flex: 1;
  max-width: 785px;
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--12 .quiz-desc {
    width: 100%;
    max-width: 100%;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word--12 .quiz-desc {
    flex-direction: column;
    align-items: flex-start;
  }
}
.quiz-con.word--12 .quiz-desc .quiz-num {
  font-size: 2.8rem;
  transform: initial;
  padding-left: 0 !important;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--12 .quiz-desc .quiz-num {
    font-size: 18px;
  }
}
.quiz-con.word--12 .quiz-desc .desc-con {
  width: 100%;
  min-height: 80px;
  padding: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--12 .quiz-desc .desc-con {
    min-height: initial;
    padding: 16px;
  }
}
.quiz-con.word--12 .quiz-option {
  flex: 1;
  max-width: 520px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--12 .quiz-option {
    width: 100%;
  }
}
.quiz-con.word--12 .quiz-option__list {
  gap: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--12 .quiz-option__list {
    gap: 16px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word--12 .quiz-option__list {
    flex-direction: column;
    gap: 12px;
  }
}
.quiz-con.word--12 .quiz-check {
  height: 60px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--12 .quiz-check {
    height: 44px;
  }
}
.quiz-con.word--12 .quiz-check__item {
  font-size: 2.4rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--12 .quiz-check__item {
    font-size: 22.4px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--12 .quiz-check__item {
    font-size: 16px;
  }
}

/* Word Type 13 */
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--13 .quiz-con__inner {
    overflow-y: auto;
  }
}
.quiz-con.word--13 .card-grid {
  max-width: 975px;
  width: 100%;
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(4, 225px);
  gap: 25px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--13 .card-grid {
    gap: 15px;
    padding: 8px;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--13 .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.word--13 .card-grid {
    grid-template-columns: repeat(3, minmax(160px, 180px));
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .quiz-con.word--13 .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word--13 .card-grid {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }
}
.quiz-con.word--13 .card {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1000px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  aspect-ratio: 15/11;
}
.quiz-con.word--13 .card.is-flipped .card__face--front {
  transform: rotateY(180deg);
}
.quiz-con.word--13 .card.is-flipped .card__face--back {
  transform: rotateY(0);
}
.quiz-con.word--13 .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: 10px;
  border-width: 7px;
  overflow: hidden;
  max-height: 100%;
  box-shadow: 0.82px 0.82px 9.87px 0px rgba(59, 68, 81, 0.5019607843);
  border-radius: 10px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--13 .card__face {
    border-radius: 8px;
  }
}
.quiz-con.word--13 .card__face--front {
  background: #FFC041;
  transform: rotateY(0);
  z-index: 2;
  background-image: url("/assets/images/icon/ic_flip-4f40ab1bafad5db6d31d35cd50bf1f55.png");
  background-repeat: no-repeat;
  background-position: center;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--13 .card__face--front {
    background-size: 46px 46px;
  }
}
.quiz-con.word--13 .card__face--back {
  background: #FFF1D7;
  transform: rotateY(180deg);
  z-index: 1;
}
.quiz-con.word--13 .card__face--back .quiz-img {
  object-fit: cover;
}
.quiz-con.word--13 .card__face--back .quiz-word {
  padding: 16px;
  font-size: 2rem;
  text-align: center;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--13 .card__face--back .quiz-word {
    font-size: 13px;
  }
}
.quiz-con.word--13 .card--word .quiz-word {
  font-size: 2.4rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--13 .card--word .quiz-word {
    font-size: 15px;
  }
}
.quiz-con.word--13 .is-flipped .correct {
  border: 2.5px solid #009A85;
  outline-color: #009A85;
}
.quiz-con.word--13 .is-flipped .correct::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  aspect-ratio: 1/1;
  background: url("/assets/images/icon/ic_correct-ba3d4b32c42384d22882030f0a0fbcc5.png") no-repeat center center;
  background-size: contain;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--13 .is-flipped .correct::after {
    width: 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--13 .is-flipped .correct::after {
    width: 14px;
  }
}
.quiz-con.word--13 .is-flipped .incorrect {
  border: 2.5px solid #ED4C33;
  outline-color: #ED4C33;
}
.quiz-con.word--13 .is-flipped .incorrect::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  aspect-ratio: 1/1;
  background: url("/assets/images/icon/ic_incorrect-e99b479beadeebfd1402736daebd5e37.png") no-repeat center center;
  background-size: contain;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word--13 .is-flipped .incorrect::after {
    width: 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word--13 .is-flipped .incorrect::after {
    width: 14px;
  }
}

/* Word Test Type 1 */
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.test-word--1.word {
    gap: 24px;
  }
}
.quiz-con.test-word--1 .desc-con {
  width: 100%;
  max-width: 800px;
  text-align: center;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .quiz-con.test-word--1 .desc-con {
    max-width: 68%;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.test-word--1 .desc-con {
    max-width: 68%;
  }
}
.quiz-con.test-word--1 .word-con {
  overflow-y: auto;
}
.quiz-con.test-word--1 .quiz-option__item {
  max-width: 250px;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.test-word--1 .quiz-option__item {
    width: calc((100% - 32px) / 3) !important;
  }
}
.quiz-con.test-word--1 .img-option .radio-label .img-wrap {
  max-width: 250px;
  aspect-ratio: 250/188;
}

/* Word Test Type 2 */
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word.test-word--2 .quiz-num {
    position: absolute;
  }
}
.quiz-con.word.test-word--2 .quiz-con__inner {
  flex-direction: row;
  gap: 24px !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word.test-word--2 .quiz-con__inner {
    flex-direction: column;
    gap: 24px !important;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word.test-word--2 .quiz-con__inner {
    gap: 24px !important;
  }
}
.quiz-con.word.test-word--2 .word-con {
  display: flex;
  justify-content: center;
  width: auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word.test-word--2 .word-con {
    width: 100%;
  }
}
.quiz-con.word.test-word--2 .quiz-img {
  max-width: 480px;
  margin: initial !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word.test-word--2 .quiz-img {
    max-width: 50%;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word.test-word--2 .quiz-img {
    max-width: 65%;
  }
}
.quiz-con.word.test-word--2 .quiz-option {
  max-width: 400px;
  width: 100%;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word.test-word--2 .quiz-option {
    max-width: 50%;
    padding: 0 !important;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word.test-word--2 .quiz-option {
    max-width: 100%;
  }
}
.quiz-con.word.test-word--2 .quiz-option__list {
  flex-direction: column;
  gap: 15px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word.test-word--2 .quiz-option__list {
    height: auto;
  }
}
.quiz-con.word.test-word--2 .quiz-option__item {
  height: 60px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word.test-word--2 .quiz-option__item {
    height: 52px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word.test-word--2 .quiz-option__item {
    height: 44px;
  }
}
.quiz-con.word.test-word--2 .quiz-option__item .quiz-check {
  padding: 10px 6px;
}

/* Word Test Type 3 */
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word.test-word--3 .quiz-num {
    position: absolute;
  }
}
.quiz-con.word.test-word--3 .word-con {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word.test-word--3 .word-con {
    flex-direction: column;
    gap: 30px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word.test-word--3 .word-con {
    gap: 20px;
  }
}
.quiz-con.word.test-word--3 .quiz-img {
  max-width: 480px;
  margin: initial !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word.test-word--3 .quiz-img {
    max-width: 50%;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word.test-word--3 .quiz-img {
    max-width: 65%;
  }
}
.quiz-con.word.test-word--3 .quiz-option__list {
  height: auto;
}
.quiz-con.word.test-word--3 .quiz-option__item .quiz-choice__list {
  flex-direction: row;
  gap: 5rem;
}
.quiz-con.word.test-word--3 .quiz-option__item .quiz-choice__item {
  flex-direction: column;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 58px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word.test-word--3 .quiz-option__item .quiz-choice__item {
    padding-bottom: 35px;
  }
}
.quiz-con.word.test-word--3 .quiz-option__item .quiz-choice__item .num {
  position: static;
}
.quiz-con.word.test-word--3 .quiz-option__item .radio-label::before {
  width: 60px;
  height: auto;
  aspect-ratio: 1;
  top: auto;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-size: 28px auto !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word.test-word--3 .quiz-option__item .radio-label::before {
    width: 40px;
    background-size: 20px auto !important;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word.test-word--3 .quiz-option__item .radio-label::before {
    background-size: 14px auto !important;
  }
}

/* Word Test Type 4 */
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word.test-word--4 .quiz-num {
    position: absolute;
  }
}
@media (min-width: 1367px) {
  .quiz-con.word.test-word--4 .quiz-con__inner {
    gap: 5rem;
  }
}
.quiz-con.word.test-word--4 .word-con {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word.test-word--4 .word-con {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word.test-word--4 .word-con {
    gap: 20px;
  }
}
.quiz-con.word.test-word--4 .quiz-img {
  margin: initial !important;
}
@media (min-width: 1367px) {
  .quiz-con.word.test-word--4 .quiz-img {
    max-width: 400px;
  }
}
.quiz-con.word.test-word--4 .quiz-option__item {
  max-width: 400px;
  margin-bottom: 40px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.word.test-word--4 .quiz-option__item {
    max-width: 50%;
    margin-bottom: 30px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.word.test-word--4 .quiz-option__item {
    margin-bottom: 15px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.word.test-word--4 .quiz-option__item {
    max-width: 65%;
  }
}
.quiz-con.word.test-word--4 .quiz-input-word, .quiz-con.word.test-word--4 .quiz-input {
  width: 100%;
}
.quiz-con.word.test-word--4 .word-bank {
  max-width: 955px;
}

.quiz-con.video {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.quiz-con.video > div {
  width: 50%;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.video > div {
    width: 100%;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.video > div {
    width: 100%;
  }
}
.quiz-con.video .video-con {
  height: auto;
  position: relative;
}
.quiz-con.video .video-con .video-player {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: auto;
  border-radius: 20px;
  position: relative;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .quiz-con.video .video-con .video-player {
    max-width: 400px;
  }
}
.quiz-con.video .video-con .video-player .video-wrapper {
  position: relative;
  border-radius: 10px;
  background: #E4F4F1;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.quiz-con.video .video-con .video-player .video-wrapper video {
  width: 100%;
  border-radius: 8px;
  aspect-ratio: 16/9;
  cursor: pointer;
}
.quiz-con.video .video-con .video-player .video-wrapper .script {
  padding: 8px;
  padding-bottom: 16px;
  text-align: center;
  font-size: 3.2rem;
  font-weight: 600;
  line-height: normal;
  color: #232323;
  line-height: 1;
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
.quiz-con.video .video-con .video-player .video-wrapper .script p {
  color: #fff;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .quiz-con.video .video-con .video-player.full-screen .video-wrapper {
    height: 100%;
  }
}
.quiz-con.video .video-con .video-player.full-screen .video-wrapper .script {
  font-size: 6.4rem;
}
@media (min-width: 1367px) {
  .quiz-con.video .video-con .video-player.full-screen .video-wrapper .script {
    padding-bottom: 30px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.video .video-con .video-player.full-screen .video-wrapper .script {
    padding-bottom: 24px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.video .video-con .video-player.full-screen .video-wrapper .script {
    padding-bottom: 16px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.video .video-con .video-player.full-screen .video-wrapper .script {
    font-size: 4.4rem;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.video .video-con .video-player.full-screen .video-wrapper .script {
    font-size: 2.6rem;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .quiz-con.video .video-con .video-player.full-screen .video-wrapper .script {
    font-size: 4rem;
  }
}
.quiz-con.video .video-con .start-overlay,
.quiz-con.video .video-con .play-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  transition: all 0.5s;
}
.quiz-con.video .video-con .start-overlay {
  opacity: 1;
  display: block;
}
.quiz-con.video .video-con .play-btn-con {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.video .video-con .play-btn-con {
    gap: 8px;
  }
}
.quiz-con.video .video-con .controls {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 6px;
  color: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
}
.quiz-con.video .video-con .controls .progress {
  display: flex;
  align-items: center;
  flex: 1;
  margin: 0 10px;
  position: relative;
}
.quiz-con.video .video-con .controls .progress .time {
  position: absolute;
  left: 10px;
  top: -22px;
}
.quiz-con.video .video-con .controls #progressBar {
  flex: 1;
  margin: 0 5px;
}
.quiz-con.video .play-overlay {
  display: none;
  opacity: 0;
  pointer-events: none;
}
.quiz-con.video .play-overlay.is-active {
  display: block;
  opacity: 1;
  pointer-events: auto;
}
.quiz-con.video .video-wrapper.play .btn-play--start {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .quiz-con.video .video-wrapper.play:hover .play-overlay {
    display: block;
  }
}
.quiz-con.video .video-wrapper.play .play-overlay.is-active {
  display: block !important;
  opacity: 1 !important;
}
.quiz-con.video .quiz-option {
  padding-left: 40px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.video .quiz-option {
    width: auto;
    padding-left: 0;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.video .quiz-option {
    height: auto;
  }
}
.quiz-con.video .quiz-option__list {
  height: auto !important;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 2.4rem;
  margin: auto;
}

/* TYPE2 */
/* 공통 인풋 스타일 */
/* TYPE3 */
.quiz-con.video.video--3 {
  gap: 4rem;
}
.quiz-con.video.video--3 .quiz-option {
  padding-left: 0;
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.video.video--3 .quiz-option {
    padding: 0 34px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.video.video--3 .quiz-option {
    width: 100%;
  }
}
.quiz-con.video.video--3 .quiz-option__list {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2열 */
  gap: 20px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.video.video--3 .quiz-option__list {
    gap: 16px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.video.video--3 .quiz-option__list {
    grid-template-columns: 1fr;
  }
}
.quiz-con.video.video--3 .quiz-option__item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 6rem;
  text-align: center;
  cursor: pointer;
  background: #fff;
  position: relative; /* 아이콘 붙이기 위해 */
  padding-left: 0;
  gap: 10px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.video.video--3 .quiz-option__item {
    gap: 8px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.video.video--3 .quiz-option__item {
    height: 44px;
    padding-left: 0;
    gap: 6px;
  }
}
.quiz-con.video.video--3 .quiz-option__item .icon {
  position: absolute;
  right: 10px;
}
.quiz-con.video.video--3 .quiz-option__item span {
  cursor: pointer;
}

/* 모바일일 때 1열 */
@media (max-width: 767px) and (orientation: portrait) {
  .page--video-3 .checkbox-list {
    grid-template-columns: 1fr;
  }
  .page--video-3 .checkbox-list li {
    width: 320px;
    padding-left: 0 !important;
  }
  .page--video-3 .quiz-option__item {
    padding-left: 0 !important;
  }
}
/* 모바일 - 가로모드 */
@media (max-device-width: 767px) and (orientation: landscape) {
  .page--video-3 .checkbox-list li {
    width: 320px;
    padding-left: 0 !important;
  }
  .page--video-3 .quiz-option__item {
    padding-left: 0 !important;
  }
}
/* 태블릿 (768px ~ 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .page--video-3 .checkbox-list {
    grid-template-columns: 1fr;
  }
  .page--video-3 .checkbox-list li {
    width: 600px; /* 예: 태블릿에 맞춘 넓이 */
  }
}
video::-webkit-media-controls {
  display: none !important;
}

video::-webkit-media-controls-enclosure {
  display: none !important;
}

video {
  pointer-events: none;
}

.script-box {
  display: none;
}

.script-box {
  display: block;
}

.script-box {
  max-height: 150px;
  background: #f5f5f5;
  border-radius: 6px;
  border: 1px solid;
  background: #fff;
  overflow-y: auto;
  padding: 15px;
  display: none;
  z-index: 100;
  margin-top: -1px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .script-box {
    display: none;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .script-box {
    display: none;
  }
}
.script-box .script-box-con {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  align-items: start;
  gap: 10px;
}
.script-box .script-box-con p {
  padding: 5px 0;
  padding-left: 42px;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.2;
  color: #232323;
  position: relative;
  color: #C0C0C0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .script-box .script-box-con p {
    padding-left: 36px;
  }
}
.script-box .script-box-con p.focus {
  color: #232323;
}
.script-box .script-box-con p.focus::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 3px;
  width: 32px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_sound-focus-7ad6d611274a6292bbf32961b024aa61.svg") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .script-box .script-box-con p.focus::before {
    width: 28px;
  }
}
.script-box .script-box-con p .speaker {
  font-weight: 700;
  white-space: pre;
}

.script-box.mobile {
  width: 100%;
  max-height: none;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1000;
  border: none;
  border-radius: 0;
  margin-top: 0;
  border-top: 1px solid #353535;
  display: none;
  overflow-y: hidden;
  padding: 10px;
  padding-right: 15px;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .script-box.mobile {
    max-height: 50vh;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .script-box.mobile {
    display: none;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .script-box.mobile {
    display: none;
  }
}
.script-box.mobile .title {
  height: 56px;
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  color: #232323;
  padding: 15.5px 16px;
  position: relative;
  border-bottom: 1px solid #D6D6D6;
}
.script-box.mobile .btn-close {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.script-box.mobile .script-box-con {
  height: 25dvh;
  padding: 20px 24px 20px 16px;
  gap: 10px;
}
.script-box.mobile .script-box-con p {
  padding: 5px 0;
  padding-left: 34px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
  color: #232323;
}
.script-box.mobile .script-box-con p.focus::before {
  width: 24px;
  top: 5px;
}
.script-box.mobile .script-box-con__inner {
  height: 100%;
}

.quiz-con.reading {
  display: flex;
  flex-direction: row;
  gap: 4rem;
  position: relative;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading {
    flex-direction: column;
  }
}
.quiz-con.reading .quiz-con__inner {
  height: 100%;
}
.quiz-con.reading .quiz-con__inner.is-reading-box {
  display: flex;
  width: 100%;
  padding-left: 45%;
  position: relative;
  transition: padding 0.7s ease;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading .quiz-con__inner.is-reading-box {
    flex-direction: column;
    gap: 20px;
    padding-left: 0;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading .quiz-con__inner.is-reading-box .quiz-option__list {
    width: fit-content;
    margin: 0 auto;
  }
}
.quiz-con.reading .quiz-con__inner.is-reading-box.hide {
  padding-left: 0;
}
.quiz-con.reading .quiz-con__inner.is-reading-box.hide .reading-wrapper {
  transform: translateX(-100%);
}
.quiz-con.reading .quiz-con__inner.is-reading-box.hide .btn-hide {
  display: none;
  z-index: 0;
}
.quiz-con.reading .quiz-con__inner.is-reading-box.hide .btn-show {
  display: flex;
  z-index: 1;
}
.quiz-con.reading .reading-wrapper {
  width: calc(45% - 4rem);
  height: 100%;
  display: flex;
  align-items: stretch;
  padding-right: 40px;
  transition: transform 0.7s ease;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading .reading-wrapper {
    width: 100%;
    padding-right: 0;
    max-height: 250px;
    position: relative;
  }
}
.quiz-con.reading .reading-con {
  width: 100%;
  height: 100%;
  position: relative;
  flex-shrink: 0;
  overflow-y: scroll;
  border: 2.5px solid #D6D6D6;
  background: #EDF3F6;
  border-radius: 0 0 10px 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading .reading-con {
    width: 100%;
    padding-right: 0;
    border-radius: 10px 10px 0 0;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading .reading-con {
    max-width: 70%;
    margin: auto;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.reading .reading-con {
    max-width: 100%;
  }
}
.quiz-con.reading .reading-con__inner {
  width: 100%;
  height: auto;
}
.quiz-con.reading .reading-con__list {
  height: auto;
  position: relative;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading .reading-con__list {
    max-height: 250px;
  }
}
.quiz-con.reading .reading-con__item {
  width: 100%;
  height: auto;
}
.quiz-con.reading .reading-con__item img {
  width: 100%;
}
.quiz-con.reading .reading-con__txt {
  width: 100%;
  height: auto;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: normal;
  color: #232323;
  padding: 15px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.reading .reading-con__txt {
    font-size: 16px;
    padding: 12px;
  }
}
.quiz-con.reading .reading-con__txt h5 {
  font-weight: 700;
  line-height: 1.5;
}
.quiz-con.reading .reading-con__txt b {
  font-weight: 600;
}
.quiz-con.reading .btn-show-hide-toggle {
  width: 90px;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5px;
  transform: rotate(90deg);
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  color: #232323;
  color: #fff;
  background: rgba(0, 0, 0, 0.56);
  border-radius: 10px 10px 0 0;
  position: absolute;
  top: 25px;
  right: -25px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading .btn-show-hide-toggle {
    display: none;
  }
}
.quiz-con.reading .btn-show-hide-toggle .icon {
  width: 24px;
  height: 24px;
  transform: rotate(-90deg);
}
.quiz-con.reading .btn-hide .icon {
  background: url("/assets/images/icon/ic_btn-hide-79a8fbc1917abaf4ba0a29e8e03b84ea.png") no-repeat center center/100% auto;
}
.quiz-con.reading .btn-show {
  display: none;
  z-index: 0;
}
.quiz-con.reading .btn-show .icon {
  background: url("/assets/images/icon/ic_btn-show-75abc5a70d65a6f969012423344198b5.png") no-repeat center center/100% auto;
}
.quiz-con.reading .reading-wrapper.hide ~ .quiz-option {
  width: 100% !important;
}
.quiz-con.reading .quiz-option {
  width: 100%;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading .quiz-option {
    width: max-content;
    margin: auto;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading .quiz-option {
    min-width: 70%;
    width: fit-content;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.reading .quiz-option {
    width: 100%;
  }
}
.quiz-con.reading .quiz-option__list {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading .quiz-option__list {
    gap: 24px;
  }
}
.quiz-con.reading .quiz-option__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  align-items: start;
  position: relative;
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading .quiz-option__item {
    width: auto;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.reading .quiz-option__item {
    width: 100%;
  }
}
.quiz-con.reading .reading-con.hide ~ .quiz-option {
  width: 100%;
  margin: auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading .reading-con.hide ~ .quiz-option {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--2,
  .quiz-con.reading.reading--2-1 {
    gap: 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.reading.reading--2 .quiz-con__inner,
  .quiz-con.reading.reading--2-1 .quiz-con__inner {
    gap: 10px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--2 .reading-wrapper,
  .quiz-con.reading.reading--2-1 .reading-wrapper {
    max-height: 100%;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--2 .reading-wrapper .reading-con__list,
  .quiz-con.reading.reading--2-1 .reading-wrapper .reading-con__list {
    gap: 24px;
    max-height: 30dvh;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.reading.reading--2 .reading-wrapper .reading-con__list,
  .quiz-con.reading.reading--2-1 .reading-wrapper .reading-con__list {
    max-height: 30dvh;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--2 .reading-wrapper .reading-con__list,
  .quiz-con.reading.reading--2-1 .reading-wrapper .reading-con__list {
    max-height: 40dvh;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.reading.reading--2 .reading-wrapper .reading-con__list,
  .quiz-con.reading.reading--2-1 .reading-wrapper .reading-con__list {
    max-height: 250px;
  }
}
.quiz-con.reading.reading--2 .quiz-option,
.quiz-con.reading.reading--2-1 .quiz-option {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  align-items: start;
  gap: 25px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--2 .quiz-option,
  .quiz-con.reading.reading--2-1 .quiz-option {
    flex-direction: column-reverse;
    gap: 20px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.reading.reading--2 .quiz-option,
  .quiz-con.reading.reading--2-1 .quiz-option {
    height: calc(100% - (30dvh + 20px));
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.reading.reading--2 .quiz-option,
  .quiz-con.reading.reading--2-1 .quiz-option {
    gap: 10px;
  }
}
.quiz-con.reading.reading--2 .quiz-option__list,
.quiz-con.reading.reading--2-1 .quiz-option__list {
  width: 100%;
  gap: 20px;
  max-height: 100%;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--2 .quiz-option__list,
  .quiz-con.reading.reading--2-1 .quiz-option__list {
    gap: 24px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.reading.reading--2 .quiz-option__list,
  .quiz-con.reading.reading--2-1 .quiz-option__list {
    gap: 16px;
  }
}
.quiz-con.reading.reading--2 .quiz-option__item .blank-box.active,
.quiz-con.reading.reading--2-1 .quiz-option__item .blank-box.active {
  color: #232323;
  background: #fff;
  border: 1px solid;
}

@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--3 .quiz-option {
    width: 100%;
  }
}
.quiz-con.reading.reading--3 .quiz-option__list {
  width: 100%;
  gap: 30px;
}
.quiz-con.reading.reading--3 .quiz-option__list:not(:has(.quiz-option__item--img)) {
  gap: 24px;
}
.quiz-con.reading.reading--3 .quiz-option__item {
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 2rem;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.reading.reading--3 .quiz-option__item {
    flex-direction: column;
    align-items: start;
    gap: 12px;
  }
}
.quiz-con.reading.reading--3 .quiz-option__item--img {
  width: 150px;
  height: 113px;
  border: #D6D6D6 1.5px solid;
  border-radius: 10px;
  overflow: hidden;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--3 .quiz-option__item--img {
    width: 150px;
  }
}
.quiz-con.reading.reading--3 .quiz-option__item--txt {
  max-width: max-content;
}
.quiz-con.reading.reading--3 .quiz-option .quiz-option__item--img ~ .quiz-option__item--txt {
  max-width: calc(100% - 150px - 2rem);
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.reading.reading--3 .quiz-option .quiz-option__item--img ~ .quiz-option__item--txt {
    max-width: 100%;
  }
}

.quiz-con.reading.reading--4 .quiz-option {
  width: 100%;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--4 .quiz-option {
    margin-top: 0;
  }
}
.quiz-con.reading.reading--4 .quiz-option__list {
  gap: 24px;
}

.quiz-con.reading.reading--4-1,
.quiz-con.reading.reading--4-4 {
  flex-direction: column;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--4-1,
  .quiz-con.reading.reading--4-4 {
    flex-direction: column-reverse;
  }
}
.quiz-con.reading.reading--4-1 .quiz-option,
.quiz-con.reading.reading--4-4 .quiz-option {
  width: 100%;
  gap: 5rem;
}
.quiz-con.reading.reading--4-1 .quiz-option__iist,
.quiz-con.reading.reading--4-4 .quiz-option__iist {
  gap: 20px;
}

.quiz-con.reading.reading--4-2,
.quiz-con.listening.listening--5 {
  flex-direction: column;
  justify-content: space-between;
  gap: 4rem;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.reading.reading--4-2,
  .quiz-con.listening.listening--5 {
    height: calc(100dvh - 340px) !important;
  }
}
@media (min-width: 1367px) {
  .quiz-con.reading.reading--4-2 .quiz-con__inner,
  .quiz-con.listening.listening--5 .quiz-con__inner {
    justify-content: space-between;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--4-2 .drag-box,
  .quiz-con.listening.listening--5 .drag-box {
    height: 100%;
  }
}
.quiz-con.reading.reading--4-2 .drag-box__list,
.quiz-con.listening.listening--5 .drag-box__list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-items: start;
  gap: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--4-2 .drag-box__list,
  .quiz-con.listening.listening--5 .drag-box__list {
    gap: 20px;
    height: 100%;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.reading.reading--4-2 .drag-box__list,
  .quiz-con.listening.listening--5 .drag-box__list {
    flex-direction: column;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.reading.reading--4-2 .drag-box__list,
  .quiz-con.listening.listening--5 .drag-box__list {
    gap: 12px;
    height: 100%;
  }
}
.quiz-con.reading.reading--4-2 .drag-box__list:has(> .quiz-con.reading.reading--4-2 .drag-box__item:nth-child(3):last-child,
> .quiz-con.listening.listening--5 .drag-box__item:nth-child(3):last-child),
.quiz-con.listening.listening--5 .drag-box__list:has(> .quiz-con.reading.reading--4-2 .drag-box__item:nth-child(3):last-child,
> .quiz-con.listening.listening--5 .drag-box__item:nth-child(3):last-child) {
  /* 자식이 3개일 때만 적용 */
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--4-2 .drag-box__list:has(> .quiz-con.reading.reading--4-2 .drag-box__item:nth-child(3):last-child,
  > .quiz-con.listening.listening--5 .drag-box__item:nth-child(3):last-child),
  .quiz-con.listening.listening--5 .drag-box__list:has(> .quiz-con.reading.reading--4-2 .drag-box__item:nth-child(3):last-child,
  > .quiz-con.listening.listening--5 .drag-box__item:nth-child(3):last-child) {
    flex-direction: column;
  }
}
.quiz-con.reading.reading--4-2 .drag-box__item,
.quiz-con.listening.listening--5 .drag-box__item {
  width: 100%;
  height: auto;
  outline: 1px solid #D6D6D6;
  border-radius: 10px;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.09);
  overflow: hidden;
  cursor: pointer;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--4-2 .drag-box__item,
  .quiz-con.listening.listening--5 .drag-box__item {
    overflow: hidden;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.reading.reading--4-2 .drag-box__item,
  .quiz-con.listening.listening--5 .drag-box__item {
    height: calc((100% - 20px) / 2);
    flex-shrink: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.reading.reading--4-2 .drag-box__item,
  .quiz-con.listening.listening--5 .drag-box__item {
    height: calc((100% - 12px) / 2);
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--4-2 .drag-box__item,
  .quiz-con.listening.listening--5 .drag-box__item {
    height: 100%;
  }
}
.quiz-con.reading.reading--4-2 .drag-box__item--tit,
.quiz-con.listening.listening--5 .drag-box__item--tit {
  height: 63px;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: normal;
  color: #0072BC;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: #C5E8FF;
  border-bottom: 1px solid #D6D6D6;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--4-2 .drag-box__item--tit,
  .quiz-con.listening.listening--5 .drag-box__item--tit {
    height: 48px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.reading.reading--4-2 .drag-box__item--tit,
  .quiz-con.listening.listening--5 .drag-box__item--tit {
    height: 40px;
    font-size: 17px;
  }
}
.quiz-con.reading.reading--4-2 .drag-box__item--con,
.quiz-con.listening.listening--5 .drag-box__item--con {
  padding: 20px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  align-items: start;
  gap: 10px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--4-2 .drag-box__item--con,
  .quiz-con.listening.listening--5 .drag-box__item--con {
    min-height: auto;
    padding: 16px 12px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--4-2 .drag-box__item--con,
  .quiz-con.listening.listening--5 .drag-box__item--con {
    min-height: 160px;
    max-height: none;
    padding: 16px 12px;
    overflow-y: auto;
    scrollbar-width: thin;
    scroll-padding-bottom: 20px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.reading.reading--4-2 .drag-box__item--con,
  .quiz-con.listening.listening--5 .drag-box__item--con {
    height: calc(100% - 46px);
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.reading.reading--4-2 .drag-box__item--con,
  .quiz-con.listening.listening--5 .drag-box__item--con {
    min-height: 76px;
    max-height: none;
    overflow-y: auto;
  }
}
.quiz-con.reading.reading--4-2 .drag-box__item--con .btn-add,
.quiz-con.listening.listening--5 .drag-box__item--con .btn-add {
  visibility: hidden;
  flex-shrink: 0;
}
@media (min-width: 1367px) {
  .quiz-con.reading.reading--4-2 .drag-box__item--con .btn-add,
  .quiz-con.listening.listening--5 .drag-box__item--con .btn-add {
    display: none;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--4-2 .drag-box__item--con .btn-add,
  .quiz-con.listening.listening--5 .drag-box__item--con .btn-add {
    visibility: visible;
    opacity: 1;
  }
}
.quiz-con.reading.reading--4-2 .drag-box__item--con .quiz-option__item,
.quiz-con.listening.listening--5 .drag-box__item--con .quiz-option__item {
  border-color: #232323;
}
.quiz-con.reading.reading--4-2 .drag-box .drag-box__item.is-entered,
.quiz-con.listening.listening--5 .drag-box .drag-box__item.is-entered {
  border-color: #0072BC;
}
.quiz-con.reading.reading--4-2 .drag-box .drag-box__item.is-entered .drag-box__item--con,
.quiz-con.listening.listening--5 .drag-box .drag-box__item.is-entered .drag-box__item--con {
  background: #F8FCFF;
}
.quiz-con.reading.reading--4-2 .quiz-option,
.quiz-con.listening.listening--5 .quiz-option {
  width: 100%;
  height: auto !important;
  max-height: 250px;
  background: #EDF3F6;
  padding-right: 0;
  border-radius: 10px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--4-2 .quiz-option,
  .quiz-con.listening.listening--5 .quiz-option {
    display: none;
  }
}
.quiz-con.reading.reading--4-2 .quiz-option__list,
.quiz-con.listening.listening--5 .quiz-option__list {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  height: auto;
  padding: 20px;
  gap: 15px;
}
@media (hover: hover) and (pointer: fine) {
  .quiz-con.reading.reading--4-2 .quiz-option__list:hover,
  .quiz-con.listening.listening--5 .quiz-option__list:hover {
    cursor: pointer;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.reading.reading--4-2 .quiz-option__list,
  .quiz-con.listening.listening--5 .quiz-option__list {
    padding: 12px;
  }
}
.quiz-con.reading.reading--4-2 .quiz-option__item,
.quiz-con.listening.listening--5 .quiz-option__item {
  width: fit-content;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #AEB8C2;
  font-size: 21px;
  font-weight: 400;
  line-height: normal;
  color: #232323;
  padding: 15px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--4-2 .quiz-option__item,
  .quiz-con.listening.listening--5 .quiz-option__item {
    width: 100%;
    border-radius: 8px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.reading.reading--4-2 .quiz-option__item,
  .quiz-con.listening.listening--5 .quiz-option__item {
    font-size: 17px;
    padding: 10px 12px;
    border-radius: 6px;
  }
}

.quiz-con.reading--4-2 .quiz-option__item:active,
.quiz-con.listening.listening--5 .quiz-option__item:active {
  outline-color: #8B8B8B;
  background: #fff !important;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25);
}
.quiz-con.reading--4-2 .quiz-option__item.dragging-source,
.quiz-con.listening.listening--5 .quiz-option__item.dragging-source {
  outline-color: #8B8B8B;
  background: #fff !important;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.quiz-con.reading--4-2 .quiz-option__item.correct,
.quiz-con.reading--4-2 .quiz-option__item.incorrect {
  margin-top: -2px;
  margin-left: -1px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading--4-2 .quiz-option__item.correct,
  .quiz-con.reading--4-2 .quiz-option__item.incorrect {
    margin-top: 0;
    margin-left: 0;
  }
}

@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--4-3 {
    padding-left: 50px;
    padding-right: 50px;
  }
}
.quiz-con.reading.reading--4-3 .quiz-option {
  width: 100%;
}
.quiz-con.reading.reading--4-3 .quiz-option__list {
  gap: 30px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--4-3 .quiz-option__list {
    gap: 24px;
  }
}

.quiz-con.reading.reading--5,
.quiz-con.reading.reading--5-1 {
  flex-direction: column;
  gap: 25px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--5,
  .quiz-con.reading.reading--5-1 {
    gap: 24px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--5,
  .quiz-con.reading.reading--5-1 {
    flex-direction: column-reverse;
  }
}
.quiz-con.reading.reading--5 .quiz-option,
.quiz-con.reading.reading--5-1 .quiz-option {
  width: 100%;
}
.quiz-con.reading.reading--5 .quiz-option__list,
.quiz-con.reading.reading--5-1 .quiz-option__list {
  gap: 20px;
}
.quiz-con.reading.reading--5 .quiz-option__item,
.quiz-con.reading.reading--5-1 .quiz-option__item {
  flex-direction: row;
  justify-content: start;
}

.quiz-con.reading.reading--6 .quiz-con__inner {
  display: flex;
  gap: 5rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--6 .quiz-con__inner {
    gap: 24px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--6 .quiz-con__inner {
    flex-direction: column;
  }
}
.quiz-con.reading.reading--6 .quiz-con__inner .reading-con {
  width: fit-content;
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  border: none;
  background-color: transparent;
  border-radius: 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--6 .quiz-con__inner .reading-con {
    max-width: 50%;
    height: auto;
    justify-content: center;
    margin: 0 auto;
  }
}
.quiz-con.reading.reading--6 .quiz-con__inner .quiz-img {
  width: 100%;
  max-width: 423px;
  height: auto;
  border: 2.5px solid #D6D6D6;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--6 .quiz-con__inner .quiz-img {
    max-width: 100%;
    margin: auto;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.reading.reading--6 .quiz-con__inner .quiz-img {
    max-width: 100%;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.reading.reading--6 .quiz-con__inner .quiz-img {
    border-width: 2px;
  }
}
.quiz-con.reading.reading--6 .quiz-con__inner .quiz-img img {
  width: 100%;
}
.quiz-con.reading.reading--6 .quiz-con__inner .quiz-option {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-items: start;
  padding: 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.reading--6 .quiz-con__inner .quiz-option {
    height: auto;
    margin: 0 auto;
  }
}
.quiz-con.reading.reading--6 .quiz-con__inner .quiz-option__list {
  height: auto;
  margin: auto;
}
.quiz-con.reading.test-reading--1,
.quiz-con.reading.test-reading--2,
.quiz-con.reading.test-reading--2-1,
.quiz-con.reading.test-reading--3,
.quiz-con.reading.test-reading--4 {
  justify-content: center;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.test-reading--1,
  .quiz-con.reading.test-reading--2,
  .quiz-con.reading.test-reading--2-1,
  .quiz-con.reading.test-reading--3,
  .quiz-con.reading.test-reading--4 {
    justify-content: start;
  }
}
.quiz-con.reading.test-reading--1 .quiz-con__inner,
.quiz-con.reading.test-reading--2 .quiz-con__inner,
.quiz-con.reading.test-reading--2-1 .quiz-con__inner,
.quiz-con.reading.test-reading--3 .quiz-con__inner,
.quiz-con.reading.test-reading--4 .quiz-con__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 950px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.test-reading--1 .quiz-con__inner,
  .quiz-con.reading.test-reading--2 .quiz-con__inner,
  .quiz-con.reading.test-reading--2-1 .quiz-con__inner,
  .quiz-con.reading.test-reading--3 .quiz-con__inner,
  .quiz-con.reading.test-reading--4 .quiz-con__inner {
    gap: 24px;
    max-width: 100%;
  }
}
.quiz-con.reading.test-reading--1 .reading-wrapper,
.quiz-con.reading.test-reading--2 .reading-wrapper,
.quiz-con.reading.test-reading--2-1 .reading-wrapper,
.quiz-con.reading.test-reading--3 .reading-wrapper,
.quiz-con.reading.test-reading--4 .reading-wrapper {
  display: flex;
  gap: 20px;
  width: 100%;
  height: auto;
  min-height: fit-content;
  max-height: 290px;
  position: relative;
  border: 2.5px solid #D6D6D6;
  background: #EDF3F6;
  padding-left: 20px;
  padding-right: 0;
  border-radius: 10px;
  overflow: hidden;
  flex: 0;
  margin: 0 auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.test-reading--1 .reading-wrapper,
  .quiz-con.reading.test-reading--2 .reading-wrapper,
  .quiz-con.reading.test-reading--2-1 .reading-wrapper,
  .quiz-con.reading.test-reading--3 .reading-wrapper,
  .quiz-con.reading.test-reading--4 .reading-wrapper {
    max-height: 360px;
    gap: 12px;
    padding: 0;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.test-reading--1 .reading-wrapper,
  .quiz-con.reading.test-reading--2 .reading-wrapper,
  .quiz-con.reading.test-reading--2-1 .reading-wrapper,
  .quiz-con.reading.test-reading--3 .reading-wrapper,
  .quiz-con.reading.test-reading--4 .reading-wrapper {
    max-width: 100%;
    padding-left: 12px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.reading.test-reading--1 .reading-wrapper,
  .quiz-con.reading.test-reading--2 .reading-wrapper,
  .quiz-con.reading.test-reading--2-1 .reading-wrapper,
  .quiz-con.reading.test-reading--3 .reading-wrapper,
  .quiz-con.reading.test-reading--4 .reading-wrapper {
    max-width: 100%;
    flex-direction: column;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.reading.test-reading--1 .reading-wrapper,
  .quiz-con.reading.test-reading--2 .reading-wrapper,
  .quiz-con.reading.test-reading--2-1 .reading-wrapper,
  .quiz-con.reading.test-reading--3 .reading-wrapper,
  .quiz-con.reading.test-reading--4 .reading-wrapper {
    flex-direction: column;
    max-height: 315px;
    padding-left: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .quiz-con.reading.test-reading--1 .reading-wrapper,
  .quiz-con.reading.test-reading--2 .reading-wrapper,
  .quiz-con.reading.test-reading--2-1 .reading-wrapper,
  .quiz-con.reading.test-reading--3 .reading-wrapper,
  .quiz-con.reading.test-reading--4 .reading-wrapper {
    max-width: 70%;
  }
}
.quiz-con.reading.test-reading--1 .reading-con-basic,
.quiz-con.reading.test-reading--2 .reading-con-basic,
.quiz-con.reading.test-reading--2-1 .reading-con-basic,
.quiz-con.reading.test-reading--3 .reading-con-basic,
.quiz-con.reading.test-reading--4 .reading-con-basic {
  height: auto;
  max-height: 220px;
  margin: 0 auto;
  border-radius: 0;
  flex-shrink: inherit;
  border: none;
  padding: 20px 0;
  padding-right: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.test-reading--1 .reading-con-basic,
  .quiz-con.reading.test-reading--2 .reading-con-basic,
  .quiz-con.reading.test-reading--2-1 .reading-con-basic,
  .quiz-con.reading.test-reading--3 .reading-con-basic,
  .quiz-con.reading.test-reading--4 .reading-con-basic {
    max-width: 100% !important;
    max-height: 175px;
    padding: 0;
    padding-right: 12px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.reading.test-reading--1 .reading-con-basic,
  .quiz-con.reading.test-reading--2 .reading-con-basic,
  .quiz-con.reading.test-reading--2-1 .reading-con-basic,
  .quiz-con.reading.test-reading--3 .reading-con-basic,
  .quiz-con.reading.test-reading--4 .reading-con-basic {
    max-height: 14dvh;
    padding: 12px;
    padding-top: 0;
    padding-bottom: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.reading.test-reading--1 .reading-con-basic,
  .quiz-con.reading.test-reading--2 .reading-con-basic,
  .quiz-con.reading.test-reading--2-1 .reading-con-basic,
  .quiz-con.reading.test-reading--3 .reading-con-basic,
  .quiz-con.reading.test-reading--4 .reading-con-basic {
    max-height: 126px;
    padding: 12px;
    padding-top: 0;
  }
}
.quiz-con.reading.test-reading--1 .reading-con-basic .reading-con__list,
.quiz-con.reading.test-reading--2 .reading-con-basic .reading-con__list,
.quiz-con.reading.test-reading--2-1 .reading-con-basic .reading-con__list,
.quiz-con.reading.test-reading--3 .reading-con-basic .reading-con__list,
.quiz-con.reading.test-reading--4 .reading-con-basic .reading-con__list {
  max-height: none;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.test-reading--1 .reading-con-basic .reading-con__list,
  .quiz-con.reading.test-reading--2 .reading-con-basic .reading-con__list,
  .quiz-con.reading.test-reading--2-1 .reading-con-basic .reading-con__list,
  .quiz-con.reading.test-reading--3 .reading-con-basic .reading-con__list,
  .quiz-con.reading.test-reading--4 .reading-con-basic .reading-con__list {
    max-height: none;
  }
}
.quiz-con.reading.test-reading--1 .reading__img,
.quiz-con.reading.test-reading--2 .reading__img,
.quiz-con.reading.test-reading--2-1 .reading__img,
.quiz-con.reading.test-reading--3 .reading__img,
.quiz-con.reading.test-reading--4 .reading__img {
  width: 100%;
  max-width: 240px;
  height: auto;
  padding: 20px 0;
  overflow: hidden;
  flex-shrink: 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.test-reading--1 .reading__img,
  .quiz-con.reading.test-reading--2 .reading__img,
  .quiz-con.reading.test-reading--2-1 .reading__img,
  .quiz-con.reading.test-reading--3 .reading__img,
  .quiz-con.reading.test-reading--4 .reading__img {
    border-width: 2px;
    margin: 0 auto;
    padding: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.reading.test-reading--1 .reading__img,
  .quiz-con.reading.test-reading--2 .reading__img,
  .quiz-con.reading.test-reading--2-1 .reading__img,
  .quiz-con.reading.test-reading--3 .reading__img,
  .quiz-con.reading.test-reading--4 .reading__img {
    max-width: 200px;
    padding: 0;
  }
}
.quiz-con.reading.test-reading--1 .reading__img img,
.quiz-con.reading.test-reading--2 .reading__img img,
.quiz-con.reading.test-reading--2-1 .reading__img img,
.quiz-con.reading.test-reading--3 .reading__img img,
.quiz-con.reading.test-reading--4 .reading__img img {
  width: 100%;
  border-radius: 10px;
}
.quiz-con.reading.test-reading--1 .reading-con__txt,
.quiz-con.reading.test-reading--2 .reading-con__txt,
.quiz-con.reading.test-reading--2-1 .reading-con__txt,
.quiz-con.reading.test-reading--3 .reading-con__txt,
.quiz-con.reading.test-reading--4 .reading-con__txt {
  padding: 0;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.reading.test-reading--1 .reading-con__txt,
  .quiz-con.reading.test-reading--2 .reading-con__txt,
  .quiz-con.reading.test-reading--2-1 .reading-con__txt,
  .quiz-con.reading.test-reading--3 .reading-con__txt,
  .quiz-con.reading.test-reading--4 .reading-con__txt {
    padding-bottom: 12px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.reading.test-reading--1 .reading-con__txt,
  .quiz-con.reading.test-reading--2 .reading-con__txt,
  .quiz-con.reading.test-reading--2-1 .reading-con__txt,
  .quiz-con.reading.test-reading--3 .reading-con__txt,
  .quiz-con.reading.test-reading--4 .reading-con__txt {
    padding-bottom: 12px;
  }
}
.quiz-con.reading.test-reading--1 .quiz-option,
.quiz-con.reading.test-reading--2 .quiz-option,
.quiz-con.reading.test-reading--2-1 .quiz-option,
.quiz-con.reading.test-reading--3 .quiz-option,
.quiz-con.reading.test-reading--4 .quiz-option {
  height: 100%;
  min-height: 210px;
  margin: 0 auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.reading.test-reading--1 .quiz-option,
  .quiz-con.reading.test-reading--2 .quiz-option,
  .quiz-con.reading.test-reading--2-1 .quiz-option,
  .quiz-con.reading.test-reading--3 .quiz-option,
  .quiz-con.reading.test-reading--4 .quiz-option {
    min-height: 200px;
  }
}
.quiz-con.reading.test-reading--1 .quiz-option__item,
.quiz-con.reading.test-reading--2 .quiz-option__item,
.quiz-con.reading.test-reading--2-1 .quiz-option__item,
.quiz-con.reading.test-reading--3 .quiz-option__item,
.quiz-con.reading.test-reading--4 .quiz-option__item {
  gap: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.test-reading--1 .quiz-option__item,
  .quiz-con.reading.test-reading--2 .quiz-option__item,
  .quiz-con.reading.test-reading--2-1 .quiz-option__item,
  .quiz-con.reading.test-reading--3 .quiz-option__item,
  .quiz-con.reading.test-reading--4 .quiz-option__item {
    gap: 12px;
  }
}
.quiz-con.reading.test-reading--2 .num,
.quiz-con.reading.test-reading--2 .quiz-option__item--txt {
  line-height: 5rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.reading.test-reading--2 .num,
  .quiz-con.reading.test-reading--2 .quiz-option__item--txt {
    line-height: 31px;
  }
}

.quiz-con.reading.test-reading--3 .quiz-option__txt .quiz-input {
  vertical-align: bottom;
  background: #fff;
  border-bottom: 1px solid #232323 !important;
}

.quiz-con.reading.test-reading--3 .reading-wrapper,
.quiz-con.reading.test-reading--4 .reading-wrapper {
  padding: 0;
}
.quiz-con.reading.test-reading--3 .reading-con-basic,
.quiz-con.reading.test-reading--4 .reading-con-basic {
  max-height: 290px;
  border: none;
  padding: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.reading.test-reading--3 .reading-con-basic,
  .quiz-con.reading.test-reading--4 .reading-con-basic {
    max-height: 290px;
    padding: 12px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.reading.test-reading--3 .reading-con-basic,
  .quiz-con.reading.test-reading--4 .reading-con-basic {
    max-height: 240px;
  }
}
.quiz-con.reading.test-reading--3 .reading-con__txt,
.quiz-con.reading.test-reading--4 .reading-con__txt {
  padding: 0 !important;
}

.quiz-con.grammar {
  min-height: 550px;
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar {
    max-height: 100%;
  }
}
.quiz-con.grammar .grammar-con {
  width: 100%;
}
.quiz-con.grammar .quiz-img {
  width: 100%;
  max-width: 373px;
  height: auto;
  border: 2.5px solid #D6D6D6;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar .quiz-img {
    max-width: 100%;
    margin: auto;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.grammar .quiz-img {
    max-width: 50%;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar .quiz-img {
    max-width: 50%;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.grammar .quiz-img {
    max-width: 65%;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar .quiz-img {
    border-width: 2px;
  }
}
.quiz-con.grammar .quiz-img img {
  width: 100%;
}
.quiz-con.grammar .quiz-txt {
  font-size: 2.8rem;
  font-weight: 400;
  line-height: normal;
  color: #232323;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar .quiz-txt {
    border-width: 2px;
  }
}
.quiz-con.grammar .quiz-txt .value {
  color: #232323;
}
.quiz-con.grammar .blank-box {
  display: inline-flex;
  align-content: center;
  gap: 5px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar .blank-box {
    height: 44px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar .blank-box {
    height: 36px;
  }
}
.quiz-con.grammar .blank-box .icon {
  width: 20px;
  aspect-ratio: 1;
  display: none;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar .blank-box .icon {
    width: 18px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar .blank-box .icon {
    width: 14px;
  }
}
.quiz-con.grammar .blank-box.is-active {
  border: 1px solid #232323;
  background: #fff;
}
.quiz-con.grammar .blank-box.correct {
  border: 1px solid #009A85 !important;
  color: #009A85;
}
.quiz-con.grammar .blank-box.correct .value {
  color: #009A85;
}
.quiz-con.grammar .blank-box.correct .icon {
  display: block;
  background: url("/assets/images/icon/ic_correct-ba3d4b32c42384d22882030f0a0fbcc5.png") no-repeat center/100% auto;
}
.quiz-con.grammar .blank-box.incorrect {
  border: 1px solid #ED4C33 !important;
  color: #ED4C33;
}
.quiz-con.grammar .blank-box.incorrect .value {
  color: #ED4C33;
}
.quiz-con.grammar .blank-box.incorrect .icon {
  display: block;
  background: url("/assets/images/icon/ic_incorrect-e99b479beadeebfd1402736daebd5e37.png") no-repeat center/100% auto;
}
.quiz-con.grammar .quiz-con__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.quiz-con.grammar .quiz-option {
  width: 100%;
}
.quiz-con.grammar .quiz-option__list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: auto;
  padding-bottom: 4rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar .quiz-option__list {
    flex-direction: column;
    gap: 16px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.grammar .quiz-option__list {
    max-width: 50%;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar .quiz-option__list {
    max-width: 50%;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.grammar .quiz-option__list {
    max-width: 100%;
  }
}

.quiz-choose {
  display: block;
  width: 100%;
  height: 100%;
}
.quiz-choose__item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: normal;
  color: #232323;
  text-align: center;
  cursor: pointer;
  padding: 10px 4px;
}

@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--1 .quiz-num {
    position: absolute;
  }
}
.quiz-con.grammar.grammar--1 .quiz-con__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--1 .quiz-con__inner {
    gap: 4rem;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--1 .quiz-con__inner {
    gap: 36px;
  }
}
.quiz-con.grammar.grammar--1 .grammar-con {
  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) {
  .quiz-con.grammar.grammar--1 .grammar-con {
    flex-direction: column;
    gap: 24px;
  }
}
.quiz-con.grammar.grammar--1 .grammar-con .quiz-txt {
  width: 40%;
  line-height: 5.2rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--1 .grammar-con .quiz-txt {
    width: 100%;
    text-align: center;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--1 .grammar-con .quiz-txt {
    line-height: 4.4rem;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--1 .grammar-con .quiz-txt {
    line-height: 36px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.grammar.grammar--1 .quiz-option {
    max-height: 30dvh;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--1 .quiz-option {
    padding: 0 !important;
  }
}
.quiz-con.grammar.grammar--1 .quiz-option__list {
  height: auto;
  padding-right: 0;
  align-items: stretch;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.grammar.grammar--1 .quiz-option__list {
    max-width: 65%;
  }
}
.quiz-con.grammar.grammar--1 .quiz-option__item {
  max-width: 220px;
  border: 1px solid #AEB8C2;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--1 .quiz-option__item {
    max-width: none;
  }
}

@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--2 {
    gap: 0;
  }
}
.quiz-con.grammar.grammar--2 .quiz-con__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  padding-top: 14px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--2 .quiz-con__inner {
    padding-top: 0;
  }
}
.quiz-con.grammar.grammar--2 .grammar-con {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  justify-content: start;
  align-items: end;
  gap: 4rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--2 .grammar-con {
    justify-content: center;
    flex-direction: column;
    gap: 16px;
  }
}
.quiz-con.grammar.grammar--2 .grammar-con .sound-img-con {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--2 .grammar-con .sound-img-con {
    width: 100%;
  }
}
.quiz-con.grammar.grammar--2 .grammar-con .quiz-txt {
  height: 273px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  justify-content: start;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--2 .grammar-con .quiz-txt {
    width: 100%;
    max-width: 100%;
    height: auto;
    gap: 10px;
    padding-top: 0;
    margin: 0 auto;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--2 .grammar-con .quiz-txt {
    gap: 6px;
  }
}
.quiz-con.grammar.grammar--2 .grammar-con .quiz-txt__inner {
  width: 100%;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--2 .grammar-con .quiz-txt__inner:has(.is-active) {
    justify-content: center;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--2 .grammar-con .quiz-txt__inner:has(.is-active) {
    justify-content: start;
  }
}
.quiz-con.grammar.grammar--2 .grammar-con .quiz-txt .blank-box {
  margin: 0;
  transform: none;
}
@media (min-width: 1367px) {
  .quiz-con.grammar.grammar--2 .grammar-con .quiz-txt .blank-box {
    min-width: 130px !important;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--2 .grammar-con .quiz-txt .blank-box {
    width: calc((100% - 20px) / 3);
    min-width: auto !important;
  }
}
.quiz-con.grammar.grammar--2 .quiz-option__item {
  max-width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 1px solid #AEB8C2;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--2 .quiz-option__item {
    max-width: 100%;
  }
}

.quiz-con.grammar.grammar--1,
.quiz-con.grammar.grammar--2 {
  display: flex;
  flex-direction: column;
}
.quiz-con.grammar.grammar--1 .quiz-option__list,
.quiz-con.grammar.grammar--2 .quiz-option__list {
  height: auto;
}
.quiz-con.grammar.grammar--1 .quiz-option__item,
.quiz-con.grammar.grammar--2 .quiz-option__item {
  min-height: 54px;
  cursor: pointer;
  border-radius: 8px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--1 .quiz-option__item,
  .quiz-con.grammar.grammar--2 .quiz-option__item {
    width: 100% !important;
    height: 52px;
    min-height: auto;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--1 .quiz-option__item,
  .quiz-con.grammar.grammar--2 .quiz-option__item {
    height: 44px;
  }
}
.quiz-con.grammar.grammar--1 .blank-box.is-active,
.quiz-con.grammar.grammar--2 .blank-box.is-active {
  width: fit-content !important;
  min-width: auto !important;
  padding: 0 10px;
  padding-right: 40px;
  position: relative;
}
.quiz-con.grammar.grammar--1 .blank-box.is-active .icon,
.quiz-con.grammar.grammar--2 .blank-box.is-active .icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--1 .blank-box.is-active,
  .quiz-con.grammar.grammar--2 .blank-box.is-active {
    padding: 0 12px;
    padding-right: 38px !important;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--1 .blank-box.is-active,
  .quiz-con.grammar.grammar--2 .blank-box.is-active {
    padding: 0 6px;
  }
}

.quiz-con.grammar.grammar--3 .quiz-con__inner {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}
.quiz-con.grammar.grammar--4 .quiz-con__inner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--2 .quiz-num,
  .quiz-con.grammar.grammar--3 .quiz-num,
  .quiz-con.grammar.grammar--4 .quiz-num {
    position: absolute;
  }
}

.quiz-con.grammar.grammar--3 .quiz-con__inner,
.quiz-con.grammar.grammar--4 .quiz-con__inner {
  height: 100%;
  padding-top: 0;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  align-items: center;
  gap: 5rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--3 .quiz-con__inner,
  .quiz-con.grammar.grammar--4 .quiz-con__inner {
    height: auto;
    flex-direction: column;
    justify-content: center;
    padding-top: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--3 .quiz-con__inner,
  .quiz-con.grammar.grammar--4 .quiz-con__inner {
    gap: 24px;
  }
}
.quiz-con.grammar.grammar--3 .grammar-con,
.quiz-con.grammar.grammar--4 .grammar-con {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-items: stretch;
  gap: 4rem;
  flex-shrink: 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--3 .grammar-con,
  .quiz-con.grammar.grammar--4 .grammar-con {
    flex-direction: column;
    gap: 16px;
  }
}
.quiz-con.grammar.grammar--3 .grammar-con .sound-img-con,
.quiz-con.grammar.grammar--4 .grammar-con .sound-img-con {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: relative;
  flex-shrink: 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--3 .grammar-con .sound-img-con,
  .quiz-con.grammar.grammar--4 .grammar-con .sound-img-con {
    width: 100%;
  }
}
.quiz-con.grammar.grammar--3:has(.btn-sound) .quiz-con__inner,
.quiz-con.grammar.grammar--4:has(.btn-sound) .quiz-con__inner {
  height: auto;
  padding-top: 14px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--3:has(.btn-sound) .quiz-con__inner,
  .quiz-con.grammar.grammar--4:has(.btn-sound) .quiz-con__inner {
    padding-top: 0;
  }
}
.quiz-con.grammar.grammar--3:has(.btn-sound) .grammar-con .sound-img-con,
.quiz-con.grammar.grammar--4:has(.btn-sound) .grammar-con .sound-img-con {
  padding: 110px 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--3:has(.btn-sound) .grammar-con .sound-img-con,
  .quiz-con.grammar.grammar--4:has(.btn-sound) .grammar-con .sound-img-con {
    padding: 0;
    padding-top: 90px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--3:has(.btn-sound) .grammar-con .sound-img-con,
  .quiz-con.grammar.grammar--4:has(.btn-sound) .grammar-con .sound-img-con {
    padding-top: 66px;
  }
}
.quiz-con.grammar.grammar--3 .sound-img-con,
.quiz-con.grammar.grammar--4 .sound-img-con {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--3 .sound-img-con,
  .quiz-con.grammar.grammar--4 .sound-img-con {
    width: 100%;
  }
}
.quiz-con.grammar.grammar--3 .btn-sound,
.quiz-con.grammar.grammar--4 .btn-sound {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.quiz-con.grammar.grammar--3 .quiz-img,
.quiz-con.grammar.grammar--4 .quiz-img {
  width: 100%;
  max-width: 373px;
  height: auto;
  border: 2.5px solid #D6D6D6;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--3 .quiz-img,
  .quiz-con.grammar.grammar--4 .quiz-img {
    max-width: 100%;
    margin: auto;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.grammar.grammar--3 .quiz-img,
  .quiz-con.grammar.grammar--4 .quiz-img {
    max-width: 50%;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--3 .quiz-img,
  .quiz-con.grammar.grammar--4 .quiz-img {
    max-width: 50%;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.grammar.grammar--3 .quiz-img,
  .quiz-con.grammar.grammar--4 .quiz-img {
    max-width: 65%;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--3 .quiz-img,
  .quiz-con.grammar.grammar--4 .quiz-img {
    border-width: 2px;
  }
}
.quiz-con.grammar.grammar--3 .quiz-img img,
.quiz-con.grammar.grammar--4 .quiz-img img {
  width: 100%;
}
.quiz-con.grammar.grammar--3 .quiz-option,
.quiz-con.grammar.grammar--4 .quiz-option {
  width: auto;
  height: auto;
  overflow: visible;
}
.quiz-con.grammar.grammar--3 .quiz-option__list,
.quiz-con.grammar.grammar--4 .quiz-option__list {
  flex-direction: column;
  justify-content: center;
  padding-bottom: 0;
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--3 .quiz-option__list,
  .quiz-con.grammar.grammar--4 .quiz-option__list {
    max-width: fit-content;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.grammar.grammar--3 .quiz-option__list,
  .quiz-con.grammar.grammar--4 .quiz-option__list {
    max-width: fit-content;
    justify-content: start;
  }
}
.quiz-con.grammar.grammar--3 .quiz-option__item,
.quiz-con.grammar.grammar--4 .quiz-option__item {
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: start;
}
.quiz-con.grammar.grammar--3 .quiz-option__item .num,
.quiz-con.grammar.grammar--4 .quiz-option__item .num {
  position: static !important;
  flex-shrink: 0;
}
.quiz-con.grammar.grammar--5 {
  overflow-y: auto;
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--5 {
    padding-left: 78px !important;
    padding-right: 50px !important;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .quiz-con.grammar.grammar--5 {
    padding-left: 50px !important;
    padding-right: 20px !important;
  }
}
.quiz-con.grammar.grammar--5 .quiz-option {
  padding: 0;
}
.quiz-con.grammar.grammar--5 .quiz-option__list {
  flex-direction: column;
  padding-bottom: 0;
  justify-content: start;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--5 .quiz-option__list {
    max-width: 100%;
    gap: 40px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--5 .quiz-option__list {
    gap: 32px;
  }
}
.quiz-con.grammar.grammar--5 .quiz-option__item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  justify-content: start;
  height: auto;
  cursor: auto;
  gap: 20px;
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--5 .quiz-option__item {
    gap: 30px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.grammar.grammar--5 .quiz-option__item {
    gap: 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--5 .quiz-option__item {
    gap: 12px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.grammar.grammar--5 .quiz-option__item {
    flex-direction: column;
    align-items: start;
  }
}
.quiz-con.grammar.grammar--5 .quiz-option__item .num {
  top: 50%;
  transform: translateY(-50%);
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--5 .quiz-option__item .num {
    top: 0;
    transform: translateY(0);
  }
}
.quiz-con.grammar.grammar--5 .quiz-option__item--img {
  max-width: 150px;
  border: 2px solid #D6D6D6;
  border-radius: 8px;
  overflow: hidden;
}
.quiz-con.grammar.grammar--5 .quiz-option__item--img img {
  width: 100%;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--5 .quiz-option__item--txt {
    display: flex;
    flex-direction: column;
  }
}
.quiz-con.grammar.grammar--5 .quiz-option__item--txt > span {
  padding-right: 6rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--5 .quiz-option__item--txt > span {
    padding-right: 0;
  }
}
.quiz-con.grammar.grammar--5 .quiz-option__item--txt > span:last-child {
  padding-right: 0;
}
.quiz-con.grammar.grammar--5 .quiz-option__item .custom-select {
  margin-left: 0; /* 기본은 없음 */
}
.quiz-con.grammar.grammar--5 .quiz-option__item span > .custom-select:first-child {
  margin-left: 0; /* span 안에서 첫 요소라면 margin 없음 */
}
.quiz-con.grammar.grammar--5 .quiz-option__item span > *:not(:first-child).custom-select {
  margin-left: 0.5rem; /* 앞에 글자나 다른 요소가 있으면 margin 부여 */
}

.quiz-con.grammar.grammar--6,
.quiz-con.grammar.grammar--6-1,
.quiz-con.grammar.grammar--6-2 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.quiz-con.grammar.grammar--6 .quiz-con__inner,
.quiz-con.grammar.grammar--6-1 .quiz-con__inner,
.quiz-con.grammar.grammar--6-2 .quiz-con__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--6 .quiz-con__inner,
  .quiz-con.grammar.grammar--6-1 .quiz-con__inner,
  .quiz-con.grammar.grammar--6-2 .quiz-con__inner {
    gap: 16px;
  }
}
.quiz-con.grammar.grammar--6 .grammar-con,
.quiz-con.grammar.grammar--6-1 .grammar-con,
.quiz-con.grammar.grammar--6-2 .grammar-con {
  display: flex;
  gap: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--6 .grammar-con,
  .quiz-con.grammar.grammar--6-1 .grammar-con,
  .quiz-con.grammar.grammar--6-2 .grammar-con {
    gap: 8px;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--6 .grammar-con,
  .quiz-con.grammar.grammar--6-1 .grammar-con,
  .quiz-con.grammar.grammar--6-2 .grammar-con {
    padding: 0 50px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .quiz-con.grammar.grammar--6 .grammar-con,
  .quiz-con.grammar.grammar--6-1 .grammar-con,
  .quiz-con.grammar.grammar--6-2 .grammar-con {
    padding: 0 34px;
  }
}
.quiz-con.grammar.grammar--6 .grammar-con .desc-con,
.quiz-con.grammar.grammar--6-1 .grammar-con .desc-con,
.quiz-con.grammar.grammar--6-2 .grammar-con .desc-con {
  display: flex;
  align-items: center;
  background: #ECFAF8;
  border-radius: 10px;
  padding: 40px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--6 .grammar-con .desc-con,
  .quiz-con.grammar.grammar--6-1 .grammar-con .desc-con,
  .quiz-con.grammar.grammar--6-2 .grammar-con .desc-con {
    padding: 37px 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.grammar.grammar--6 .grammar-con .desc-con,
  .quiz-con.grammar.grammar--6-1 .grammar-con .desc-con,
  .quiz-con.grammar.grammar--6-2 .grammar-con .desc-con {
    padding: 20px 12px;
  }
}
.quiz-con.grammar.grammar--6 .grammar-con .desc-con ul,
.quiz-con.grammar.grammar--6-1 .grammar-con .desc-con ul,
.quiz-con.grammar.grammar--6-2 .grammar-con .desc-con ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 40px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--6 .grammar-con .desc-con ul,
  .quiz-con.grammar.grammar--6-1 .grammar-con .desc-con ul,
  .quiz-con.grammar.grammar--6-2 .grammar-con .desc-con ul {
    padding-left: 36px;
    gap: 12px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--6 .grammar-con .desc-con ul,
  .quiz-con.grammar.grammar--6-1 .grammar-con .desc-con ul,
  .quiz-con.grammar.grammar--6-2 .grammar-con .desc-con ul {
    padding-left: 24px;
  }
}
.quiz-con.grammar.grammar--6 .grammar-con .desc-con li,
.quiz-con.grammar.grammar--6-1 .grammar-con .desc-con li,
.quiz-con.grammar.grammar--6-2 .grammar-con .desc-con li {
  list-style: disc;
  font-size: 2.8rem;
  font-weight: 400;
  line-height: normal;
  color: #232323;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--6 .grammar-con .desc-con li,
  .quiz-con.grammar.grammar--6-1 .grammar-con .desc-con li,
  .quiz-con.grammar.grammar--6-2 .grammar-con .desc-con li {
    font-size: 17px;
  }
}
.quiz-con.grammar.grammar--6 .grammar-con .desc-con li .item-orange,
.quiz-con.grammar.grammar--6-1 .grammar-con .desc-con li .item-orange,
.quiz-con.grammar.grammar--6-2 .grammar-con .desc-con li .item-orange {
  color: #FF9B0F;
  font-weight: 600;
}
.quiz-con.grammar.grammar--6 .grammar-con .desc-con li .item-blue,
.quiz-con.grammar.grammar--6-1 .grammar-con .desc-con li .item-blue,
.quiz-con.grammar.grammar--6-2 .grammar-con .desc-con li .item-blue {
  color: #0072BC;
  font-weight: 600;
}
.quiz-con.grammar.grammar--6 .grammar-con .desc-con li .item-yellow,
.quiz-con.grammar.grammar--6-1 .grammar-con .desc-con li .item-yellow,
.quiz-con.grammar.grammar--6-2 .grammar-con .desc-con li .item-yellow {
  background: #FFF04A;
}
.quiz-con.grammar.grammar--6 .grammar-con .color-con,
.quiz-con.grammar.grammar--6-1 .grammar-con .color-con,
.quiz-con.grammar.grammar--6-2 .grammar-con .color-con {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border: 1px solid #C0C0C0;
  border-radius: 10px;
  padding: 0 15px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--6 .grammar-con .color-con,
  .quiz-con.grammar.grammar--6-1 .grammar-con .color-con,
  .quiz-con.grammar.grammar--6-2 .grammar-con .color-con {
    gap: 0;
    padding: 0;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.grammar.grammar--6 .grammar-con .color-con,
  .quiz-con.grammar.grammar--6-1 .grammar-con .color-con,
  .quiz-con.grammar.grammar--6-2 .grammar-con .color-con {
    padding: 6px 0;
  }
}
.quiz-con.grammar.grammar--6 .grammar-con .color-con input[type=radio],
.quiz-con.grammar.grammar--6-1 .grammar-con .color-con input[type=radio],
.quiz-con.grammar.grammar--6-2 .grammar-con .color-con input[type=radio] {
  display: none;
}
.quiz-con.grammar.grammar--6 .grammar-con .color-con .color-item,
.quiz-con.grammar.grammar--6-1 .grammar-con .color-con .color-item,
.quiz-con.grammar.grammar--6-2 .grammar-con .color-con .color-item {
  display: block;
  width: 38px;
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: pointer;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--6 .grammar-con .color-con .color-item,
  .quiz-con.grammar.grammar--6-1 .grammar-con .color-con .color-item,
  .quiz-con.grammar.grammar--6-2 .grammar-con .color-con .color-item {
    width: 44px;
    background-size: 24px !important;
  }
}
.quiz-con.grammar.grammar--6 .grammar-con .color-con .color-item.pencil,
.quiz-con.grammar.grammar--6-1 .grammar-con .color-con .color-item.pencil,
.quiz-con.grammar.grammar--6-2 .grammar-con .color-con .color-item.pencil {
  background: url("/assets/images/icon/ic_pencil-8010c166489f61ae7d2d704df3ea8b7f.png") no-repeat center center/20px auto;
}
.quiz-con.grammar.grammar--6 .grammar-con .color-con .color-item.eraser,
.quiz-con.grammar.grammar--6-1 .grammar-con .color-con .color-item.eraser,
.quiz-con.grammar.grammar--6-2 .grammar-con .color-con .color-item.eraser {
  background: url("/assets/images/icon/ic_eraser-b74af9435592eba8dd82238da1a39c6d.png") no-repeat center center/28px auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--6 .grammar-con .color-con .color-item.eraser,
  .quiz-con.grammar.grammar--6-1 .grammar-con .color-con .color-item.eraser,
  .quiz-con.grammar.grammar--6-2 .grammar-con .color-con .color-item.eraser {
    background: url("/assets/images/icon/ic_eraser-b74af9435592eba8dd82238da1a39c6d.png") no-repeat center center/20px auto;
  }
}
.quiz-con.grammar.grammar--6 .grammar-con .color-con .color-item.circle,
.quiz-con.grammar.grammar--6-1 .grammar-con .color-con .color-item.circle,
.quiz-con.grammar.grammar--6-2 .grammar-con .color-con .color-item.circle {
  background: url("/assets/images/icon/ic_orange-7792cfaff289b5a06e92ce00c6229c2e.png") no-repeat center center/100% auto;
}
.quiz-con.grammar.grammar--6 .grammar-con .color-con .color-item.line,
.quiz-con.grammar.grammar--6-1 .grammar-con .color-con .color-item.line,
.quiz-con.grammar.grammar--6-2 .grammar-con .color-con .color-item.line {
  background: url("/assets/images/icon/ic_blue-e6ff81e6869bb4d71d3fdc4c152aa785.png") no-repeat center center/100% auto;
}
.quiz-con.grammar.grammar--6 .grammar-con .color-con .color-item.highlight,
.quiz-con.grammar.grammar--6-1 .grammar-con .color-con .color-item.highlight,
.quiz-con.grammar.grammar--6-2 .grammar-con .color-con .color-item.highlight {
  background: url("/assets/images/icon/ic_yellow-09d34f4ec62d6da0accb9509652a9d73.png") no-repeat center center/100% auto;
}
.quiz-con.grammar.grammar--6 .grammar-con .color-con .color-item.eraser:has(input[type=radio]:checked),
.quiz-con.grammar.grammar--6-1 .grammar-con .color-con .color-item.eraser:has(input[type=radio]:checked),
.quiz-con.grammar.grammar--6-2 .grammar-con .color-con .color-item.eraser:has(input[type=radio]:checked) {
  background: url("/assets/images/icon/ic_eraser-selected-00e7ac4d0776c4c7fe881e7f2783d973.png") no-repeat center center/28px auto;
}
.quiz-con.grammar.grammar--6 .grammar-con .color-con .color-item.circle:has(input[type=radio]:checked),
.quiz-con.grammar.grammar--6-1 .grammar-con .color-con .color-item.circle:has(input[type=radio]:checked),
.quiz-con.grammar.grammar--6-2 .grammar-con .color-con .color-item.circle:has(input[type=radio]:checked) {
  background: url("/assets/images/icon/ic_orange-checked-178efed4626b96f40d5a48ca4de3e60d.png") no-repeat center center/100% auto;
}
.quiz-con.grammar.grammar--6 .grammar-con .color-con .color-item.line:has(input[type=radio]:checked),
.quiz-con.grammar.grammar--6-1 .grammar-con .color-con .color-item.line:has(input[type=radio]:checked),
.quiz-con.grammar.grammar--6-2 .grammar-con .color-con .color-item.line:has(input[type=radio]:checked) {
  background: url("/assets/images/icon/ic_blue-checked-9e41657461c643b6e545e7ec5bd6b85a.png") no-repeat center center/100% auto;
}
.quiz-con.grammar.grammar--6 .grammar-con .color-con .color-item.highlight:has(input[type=radio]:checked),
.quiz-con.grammar.grammar--6-1 .grammar-con .color-con .color-item.highlight:has(input[type=radio]:checked),
.quiz-con.grammar.grammar--6-2 .grammar-con .color-con .color-item.highlight:has(input[type=radio]:checked) {
  background: url("/assets/images/icon/ic_yellow-checked-13863af6c2c881ad028b107ad573c58f.png") no-repeat center center/100% auto;
}
.quiz-con.grammar.grammar--6 .quiz-option__list,
.quiz-con.grammar.grammar--6-1 .quiz-option__list,
.quiz-con.grammar.grammar--6-2 .quiz-option__list {
  flex-direction: column;
  padding-top: 12px;
  padding-bottom: 8px;
  gap: 20px;
  justify-content: start;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--6 .quiz-option__list,
  .quiz-con.grammar.grammar--6-1 .quiz-option__list,
  .quiz-con.grammar.grammar--6-2 .quiz-option__list {
    gap: 24px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--6 .quiz-option__list,
  .quiz-con.grammar.grammar--6-1 .quiz-option__list,
  .quiz-con.grammar.grammar--6-2 .quiz-option__list {
    max-width: 100%;
  }
}
.quiz-con.grammar.grammar--6 .quiz-option__item,
.quiz-con.grammar.grammar--6-1 .quiz-option__item,
.quiz-con.grammar.grammar--6-2 .quiz-option__item {
  height: auto;
}
.quiz-con.grammar.grammar--6 .quiz-option__item span,
.quiz-con.grammar.grammar--6-1 .quiz-option__item span,
.quiz-con.grammar.grammar--6-2 .quiz-option__item span {
  position: relative;
  cursor: pointer;
}
.quiz-con.grammar.grammar--6 .quiz-option__item span.circle,
.quiz-con.grammar.grammar--6-1 .quiz-option__item span.circle,
.quiz-con.grammar.grammar--6-2 .quiz-option__item span.circle {
  color: #FF9B0F;
  font-weight: 600;
  padding: 0 15px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--6 .quiz-option__item span.circle,
  .quiz-con.grammar.grammar--6-1 .quiz-option__item span.circle,
  .quiz-con.grammar.grammar--6-2 .quiz-option__item span.circle {
    padding: 0 10px;
  }
}
.quiz-con.grammar.grammar--6 .quiz-option__item span.circle::after,
.quiz-con.grammar.grammar--6-1 .quiz-option__item span.circle::after,
.quiz-con.grammar.grammar--6-2 .quiz-option__item span.circle::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 120%;
  border: 3px solid #FF9B0F;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--6 .quiz-option__item span.circle::after,
  .quiz-con.grammar.grammar--6-1 .quiz-option__item span.circle::after,
  .quiz-con.grammar.grammar--6-2 .quiz-option__item span.circle::after {
    height: 110%;
    border: 2px solid #FF9B0F;
  }
}
.quiz-con.grammar.grammar--6 .quiz-option__item span.line,
.quiz-con.grammar.grammar--6-1 .quiz-option__item span.line,
.quiz-con.grammar.grammar--6-2 .quiz-option__item span.line {
  color: #0072BC;
  font-weight: 600;
}
.quiz-con.grammar.grammar--6 .quiz-option__item span.line::after,
.quiz-con.grammar.grammar--6-1 .quiz-option__item span.line::after,
.quiz-con.grammar.grammar--6-2 .quiz-option__item span.line::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  border-bottom: 3px solid #0072BC;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--6 .quiz-option__item span.line::after,
  .quiz-con.grammar.grammar--6-1 .quiz-option__item span.line::after,
  .quiz-con.grammar.grammar--6-2 .quiz-option__item span.line::after {
    border-bottom: 2px solid #0072BC;
  }
}
.quiz-con.grammar.grammar--6 .quiz-option__item span.highlight,
.quiz-con.grammar.grammar--6-1 .quiz-option__item span.highlight,
.quiz-con.grammar.grammar--6-2 .quiz-option__item span.highlight {
  background: #FFF04A;
}
.quiz-con.grammar.grammar--6 .quiz-option__item span::before,
.quiz-con.grammar.grammar--6-1 .quiz-option__item span::before,
.quiz-con.grammar.grammar--6-2 .quiz-option__item span::before {
  content: "";
  position: absolute;
  width: 20px;
  aspect-ratio: 1;
  top: -6px;
  right: -15px;
  display: none;
  z-index: 1;
  border-radius: 50%;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--6 .quiz-option__item span::before,
  .quiz-con.grammar.grammar--6-1 .quiz-option__item span::before,
  .quiz-con.grammar.grammar--6-2 .quiz-option__item span::before {
    width: 18px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--6 .quiz-option__item span::before,
  .quiz-con.grammar.grammar--6-1 .quiz-option__item span::before,
  .quiz-con.grammar.grammar--6-2 .quiz-option__item span::before {
    width: 14px;
    top: -5px;
    right: -7px;
  }
}
.quiz-con.grammar.grammar--6 .quiz-option__item span.line::before,
.quiz-con.grammar.grammar--6-1 .quiz-option__item span.line::before,
.quiz-con.grammar.grammar--6-2 .quiz-option__item span.line::before {
  right: -14px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--6 .quiz-option__item span.line::before,
  .quiz-con.grammar.grammar--6-1 .quiz-option__item span.line::before,
  .quiz-con.grammar.grammar--6-2 .quiz-option__item span.line::before {
    right: -10px;
  }
}
.quiz-con.grammar.grammar--6 .quiz-option__item span.circle::before,
.quiz-con.grammar.grammar--6-1 .quiz-option__item span.circle::before,
.quiz-con.grammar.grammar--6-2 .quiz-option__item span.circle::before {
  right: 0;
}
.quiz-con.grammar.grammar--6 .quiz-option__item.color-choose .circle.correct,
.quiz-con.grammar.grammar--6 .quiz-option__item.color-choose .line.correct,
.quiz-con.grammar.grammar--6 .quiz-option__item.color-choose .highlight.correct,
.quiz-con.grammar.grammar--6-1 .quiz-option__item.color-choose .circle.correct,
.quiz-con.grammar.grammar--6-1 .quiz-option__item.color-choose .line.correct,
.quiz-con.grammar.grammar--6-1 .quiz-option__item.color-choose .highlight.correct,
.quiz-con.grammar.grammar--6-2 .quiz-option__item.color-choose .circle.correct,
.quiz-con.grammar.grammar--6-2 .quiz-option__item.color-choose .line.correct,
.quiz-con.grammar.grammar--6-2 .quiz-option__item.color-choose .highlight.correct {
  color: #009A85;
  font-weight: 600;
}
.quiz-con.grammar.grammar--6 .quiz-option__item.color-choose .circle.correct::after,
.quiz-con.grammar.grammar--6 .quiz-option__item.color-choose .line.correct::after,
.quiz-con.grammar.grammar--6 .quiz-option__item.color-choose .highlight.correct::after,
.quiz-con.grammar.grammar--6-1 .quiz-option__item.color-choose .circle.correct::after,
.quiz-con.grammar.grammar--6-1 .quiz-option__item.color-choose .line.correct::after,
.quiz-con.grammar.grammar--6-1 .quiz-option__item.color-choose .highlight.correct::after,
.quiz-con.grammar.grammar--6-2 .quiz-option__item.color-choose .circle.correct::after,
.quiz-con.grammar.grammar--6-2 .quiz-option__item.color-choose .line.correct::after,
.quiz-con.grammar.grammar--6-2 .quiz-option__item.color-choose .highlight.correct::after {
  border-color: #009A85;
}
.quiz-con.grammar.grammar--6 .quiz-option__item.color-choose .circle.correct::before,
.quiz-con.grammar.grammar--6 .quiz-option__item.color-choose .line.correct::before,
.quiz-con.grammar.grammar--6 .quiz-option__item.color-choose .highlight.correct::before,
.quiz-con.grammar.grammar--6-1 .quiz-option__item.color-choose .circle.correct::before,
.quiz-con.grammar.grammar--6-1 .quiz-option__item.color-choose .line.correct::before,
.quiz-con.grammar.grammar--6-1 .quiz-option__item.color-choose .highlight.correct::before,
.quiz-con.grammar.grammar--6-2 .quiz-option__item.color-choose .circle.correct::before,
.quiz-con.grammar.grammar--6-2 .quiz-option__item.color-choose .line.correct::before,
.quiz-con.grammar.grammar--6-2 .quiz-option__item.color-choose .highlight.correct::before {
  display: block;
  background: #fff url("/assets/images/icon/ic_correct-ba3d4b32c42384d22882030f0a0fbcc5.png") no-repeat center/100% auto;
}
.quiz-con.grammar.grammar--6 .quiz-option__item.color-choose .circle.incorrect,
.quiz-con.grammar.grammar--6 .quiz-option__item.color-choose .line.incorrect,
.quiz-con.grammar.grammar--6 .quiz-option__item.color-choose .highlight.incorrect,
.quiz-con.grammar.grammar--6-1 .quiz-option__item.color-choose .circle.incorrect,
.quiz-con.grammar.grammar--6-1 .quiz-option__item.color-choose .line.incorrect,
.quiz-con.grammar.grammar--6-1 .quiz-option__item.color-choose .highlight.incorrect,
.quiz-con.grammar.grammar--6-2 .quiz-option__item.color-choose .circle.incorrect,
.quiz-con.grammar.grammar--6-2 .quiz-option__item.color-choose .line.incorrect,
.quiz-con.grammar.grammar--6-2 .quiz-option__item.color-choose .highlight.incorrect {
  color: #ED4C33;
  font-weight: 600;
}
.quiz-con.grammar.grammar--6 .quiz-option__item.color-choose .circle.incorrect::after,
.quiz-con.grammar.grammar--6 .quiz-option__item.color-choose .line.incorrect::after,
.quiz-con.grammar.grammar--6 .quiz-option__item.color-choose .highlight.incorrect::after,
.quiz-con.grammar.grammar--6-1 .quiz-option__item.color-choose .circle.incorrect::after,
.quiz-con.grammar.grammar--6-1 .quiz-option__item.color-choose .line.incorrect::after,
.quiz-con.grammar.grammar--6-1 .quiz-option__item.color-choose .highlight.incorrect::after,
.quiz-con.grammar.grammar--6-2 .quiz-option__item.color-choose .circle.incorrect::after,
.quiz-con.grammar.grammar--6-2 .quiz-option__item.color-choose .line.incorrect::after,
.quiz-con.grammar.grammar--6-2 .quiz-option__item.color-choose .highlight.incorrect::after {
  border-color: #ED4C33;
}
.quiz-con.grammar.grammar--6 .quiz-option__item.color-choose .circle.incorrect::before,
.quiz-con.grammar.grammar--6 .quiz-option__item.color-choose .line.incorrect::before,
.quiz-con.grammar.grammar--6 .quiz-option__item.color-choose .highlight.incorrect::before,
.quiz-con.grammar.grammar--6-1 .quiz-option__item.color-choose .circle.incorrect::before,
.quiz-con.grammar.grammar--6-1 .quiz-option__item.color-choose .line.incorrect::before,
.quiz-con.grammar.grammar--6-1 .quiz-option__item.color-choose .highlight.incorrect::before,
.quiz-con.grammar.grammar--6-2 .quiz-option__item.color-choose .circle.incorrect::before,
.quiz-con.grammar.grammar--6-2 .quiz-option__item.color-choose .line.incorrect::before,
.quiz-con.grammar.grammar--6-2 .quiz-option__item.color-choose .highlight.incorrect::before {
  display: block;
  background: #fff url("/assets/images/icon/ic_incorrect-e99b479beadeebfd1402736daebd5e37.png") no-repeat center/100% auto;
}

.quiz-con.grammar.grammar--6-1 .quiz-option__item span.circle {
  padding: 0;
  letter-spacing: -0.4px;
}
.quiz-con.grammar.grammar--6-1 .quiz-option__item span.circle::after {
  content: "";
  display: block;
  position: absolute;
  width: 120%;
}
.quiz-con.grammar.grammar--6-1 .quiz-option__item span::before {
  top: -6px;
  right: -15px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--6-1 .quiz-option__item span::before {
    top: -8px;
  }
}
.quiz-con.grammar.grammar--6-1 .quiz-option__item span.circle::before {
  right: -10%;
}
.quiz-con.grammar.grammar--6-1 .quiz-option__item--txt {
  flex-wrap: wrap;
  display: flex;
  gap: 8px 3rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--6-1 .quiz-option__item--txt {
    gap: 4px 15px;
  }
}

.quiz-con.grammar.grammar--7 .quiz-option__list {
  align-items: start;
  flex-direction: column;
  gap: 30px;
  max-width: 100%;
  justify-content: start;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--7 .quiz-option__list {
    gap: 24px;
  }
}
.quiz-con.grammar.grammar--7 .quiz-option__item {
  height: auto;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quiz-con.grammar.grammar--7 .quiz-option__item .quiz-input {
  min-width: 30rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--7 .quiz-option__item .quiz-input {
    min-width: 95px;
  }
}
.quiz-con.grammar.grammar--7 .quiz-option__item .quiz-choice__list {
  gap: 10px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--7 .quiz-option__item .quiz-choice__list {
    gap: 8px;
  }
}

.quiz-con.grammar.grammar--8 .quiz-option {
  width: 100%;
}
.quiz-con.grammar.grammar--8 .quiz-option__list {
  flex-direction: column;
  justify-content: start;
  gap: 15px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--8 .quiz-option__list {
    max-width: fit-content;
  }
}
.quiz-con.grammar.grammar--8 .quiz-option__item {
  border: none;
  height: auto;
  display: flex;
}
.quiz-con.grammar.grammar--9 .quiz-con__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 25px;
}
.quiz-con.grammar.grammar--9 .drag-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.quiz-con.grammar.grammar--9 .drag-box__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-right: 20px;
  padding-bottom: 15px;
}
.quiz-con.grammar.grammar--9 .drag-box__item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1.5;
  color: #232323;
  position: relative;
  align-items: center;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--9 .drag-box__item {
    flex-direction: column;
    align-items: start;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--9 .drag-box__item {
    flex-direction: column;
    align-items: start;
    gap: 8px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--9 .drag-box__item {
    font-size: 17px;
    line-height: 28px;
    text-indent: 0;
  }
}
.quiz-con.grammar.grammar--9 .drag-box__item--txt {
  line-height: 4.4rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--9 .drag-box__item--txt {
    line-height: 28px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--9 .drag-box__item--con {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 44px;
  }
}
.quiz-con.grammar.grammar--9 .drag-box__item .drag-box__item--con.is-selected {
  border: 1.5px solid #232323;
  border-radius: 6px;
  padding: 0 6px;
}
.quiz-con.grammar.grammar--9 .drag-box__item .drag-box__item--con.correct {
  color: #009A85;
  border-color: #009A85 !important;
}
.quiz-con.grammar.grammar--9 .drag-box__item .drag-box__item--con.correct .btn-minus {
  background: #fff url("/assets/images/icon/ic_correct-ba3d4b32c42384d22882030f0a0fbcc5.png") no-repeat center center/100% auto;
}
.quiz-con.grammar.grammar--9 .drag-box__item .drag-box__item--con.incorrect {
  color: #ED4C33;
  border-color: #ED4C33 !important;
}
.quiz-con.grammar.grammar--9 .drag-box__item .drag-box__item--con.incorrect .btn-minus {
  background: #fff url("/assets/images/icon/ic_incorrect-e99b479beadeebfd1402736daebd5e37.png") no-repeat center center/100% auto;
}
.quiz-con.grammar.grammar--9 .drag-box__item .num {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  color: #232323 !important;
}
.quiz-con.grammar.grammar--9 .drag-box__item .blank-box {
  height: 4.4rem;
}
.quiz-con.grammar.grammar--9 .blank-box {
  min-width: 250px;
  gap: 11px;
  margin: 0;
  transform: translateY(0);
  padding: 0 10px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--9 .blank-box {
    display: none !important;
  }
}
.quiz-con.grammar.grammar--9 .blank-box.is-entered {
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15);
}
.quiz-con.grammar.grammar--9 .btn-add {
  display: none;
  padding: 0 10px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--9 .btn-add {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: fit-content;
    min-width: 260px;
    height: 44px !important;
    border-radius: 6px;
    background: #EDF3F6 url("/assets/images/icon/ic_btn-add-fdf9bbb6fcecf0160f612a5b4bd1bed1.png") no-repeat right 12px center/22px auto;
  }
}
@media (orientation: portrait) and (max-width: 1024px) and (orientation: portrait) and (max-width: 767px), (orientation: portrait) and (max-width: 1024px) and (orientation: landscape) and (max-width: 932px), (orientation: landscape) and (max-width: 1366px) and (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1366px) and (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--9 .btn-add {
    background: #EDF3F6 url("/assets/images/icon/ic_btn-add-fdf9bbb6fcecf0160f612a5b4bd1bed1.png") no-repeat right 12px center/18px auto;
  }
}
.quiz-con.grammar.grammar--9 .blank-box.is-selected,
.quiz-con.grammar.grammar--9 .btn-add.is-selected {
  text-align: center;
  background: #fff !important;
  border: 1px solid;
  cursor: pointer;
}
.quiz-con.grammar.grammar--9 .btn-add.is-selected {
  width: fit-content !important;
  min-width: auto;
}
.quiz-con.grammar.grammar--9 .quiz-option {
  flex-shrink: 0;
  background: #E8E8E8;
  border-radius: 10px;
  height: auto;
  padding: 20px 10px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--9 .quiz-option {
    display: none;
  }
}
.quiz-con.grammar.grammar--9 .quiz-option__list {
  gap: 10px 20px;
  flex-direction: row;
  flex-wrap: wrap;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--9 .quiz-option__list {
    max-width: 100%;
  }
}
.quiz-con.grammar.grammar--9 .quiz-option__item {
  width: fit-content;
  background: #fff;
  border: 1px solid #AEB8C2;
  border-radius: 8px;
  padding: 4px 4rem;
  cursor: pointer;
}

.quiz-con.grammar.grammar--10 .quiz-con__inner {
  gap: 5rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--10 .quiz-con__inner {
    flex-direction: column-reverse;
    gap: 36px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--10 .quiz-con__inner {
    gap: 24px;
  }
}
.quiz-con.grammar.grammar--10 .quiz-option__list {
  flex-direction: column;
  justify-content: start;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--10 .quiz-option__list {
    max-width: 100%;
    gap: 20px;
  }
}
.quiz-con.grammar.grammar--10 .word-bank .word {
  cursor: inherit;
}

@media (min-width: 1367px) {
  .quiz-con.grammar.grammar--11 {
    padding: 0 5rem 4rem;
  }
}
@media (min-width: 1367px) {
  .quiz-con.grammar.grammar--11 .quiz-option {
    padding-right: 15px;
  }
}
.quiz-con.grammar.grammar--11 .quiz-option__list {
  flex-direction: column;
  justify-content: start;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--11 .quiz-option__list {
    max-width: 100%;
    gap: 24px;
  }
}
.quiz-con.grammar.grammar--11 .quiz-option__list.is-filled {
  transform: translateY(-1px);
}
.quiz-con.grammar.grammar--11 .quiz-option__item {
  display: flex;
  align-items: center;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--11 .quiz-option__item {
    flex-direction: column;
    align-items: start;
    gap: 16px;
  }
}
.quiz-con.grammar.grammar--11 .quiz-option__item .fl-row {
  width: fit-content;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--11 .quiz-option__item .fl-row {
    width: 100%;
    align-items: start;
    gap: 6px;
  }
}
.quiz-con.grammar.grammar--11 .quiz-option__item .quiz-num {
  width: 45px;
  transform: translate(0);
  font-weight: 600;
  font-size: 2.8rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--11 .quiz-option__item .quiz-num {
    width: fit-content;
    height: 32px;
    padding-left: 0 !important;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--11 .quiz-option__item .quiz-num {
    font-size: 17px;
  }
}
.quiz-con.grammar.grammar--11 .quiz-option__item .answer-box-mo {
  display: none;
  text-indent: 6px;
  padding-right: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--11 .quiz-option__item .answer-box-mo {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-height: 32px;
    height: auto;
    align-items: center;
    border-bottom: 1px solid;
  }
  .quiz-con.grammar.grammar--11 .quiz-option__item .answer-box-mo .drag-item {
    line-height: 31px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--11 .quiz-option__item .answer-box-mo {
    transform: translateY(-3px);
  }
}
.quiz-con.grammar.grammar--11 .quiz-option__item--box {
  width: 100%;
  display: flex;
  gap: 10px;
  padding: 15px;
  background: #EDF3F6;
  border-radius: 10px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--11 .quiz-option__item--box {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
}
.quiz-con.grammar.grammar--11 .quiz-option__item--box .drag-item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  height: 58px;
  border: 1px solid #AEB8C2;
  background: #fff;
  border-radius: 8px;
  padding: 0 15px;
  position: relative;
  cursor: pointer;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--11 .quiz-option__item--box .drag-item {
    height: 41px;
    padding: 12px;
  }
}
.quiz-con.grammar.grammar--11 .quiz-option__item--box .drag-item.is-selected {
  color: #8B8B8B;
  border: 1px solid #CACACA;
  background: #E6E6E6;
}
.quiz-con.grammar.grammar--11 .quiz-option__item--box .icon {
  width: 20px;
  aspect-ratio: 1;
}
.quiz-con.grammar.grammar--11 .quiz-option__item--box .drag-item.correct {
  color: #009A85;
  border: 2px solid #009A85;
  gap: 10px;
}
.quiz-con.grammar.grammar--11 .quiz-option__item--box .drag-item.correct .icon {
  display: block;
  background: #fff url("/assets/images/icon/ic_correct-ba3d4b32c42384d22882030f0a0fbcc5.png") no-repeat center/100% auto;
}
.quiz-con.grammar.grammar--11 .quiz-option__item--box .drag-item.incorrect {
  color: #ED4C33;
  border: 2px solid #ED4C33;
  gap: 10px;
}
.quiz-con.grammar.grammar--11 .quiz-option__item--box .drag-item.incorrect .icon {
  display: block;
  background: #fff url("/assets/images/icon/ic_incorrect-e99b479beadeebfd1402736daebd5e37.png") no-repeat center/100% auto;
}
.quiz-con.grammar.grammar--11 .quiz-option .answer-box-mo::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 9px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
.quiz-con.grammar.grammar--11 .quiz-option .quiz-option__item.correct .answer-box-mo {
  color: #009A85;
}
.quiz-con.grammar.grammar--11 .quiz-option .quiz-option__item.correct .answer-box-mo::after {
  background: #fff url("/assets/images/icon/ic_correct-ba3d4b32c42384d22882030f0a0fbcc5.png") no-repeat center/100% auto;
}
.quiz-con.grammar.grammar--11 .quiz-option .quiz-option__item.correct .answer-box-mo .icon {
  display: block;
}
.quiz-con.grammar.grammar--11 .quiz-option .quiz-option__item.incorrect .answer-box-mo {
  color: #ED4C33;
}
.quiz-con.grammar.grammar--11 .quiz-option .quiz-option__item.incorrect .answer-box-mo::after {
  background: #fff url("/assets/images/icon/ic_incorrect-e99b479beadeebfd1402736daebd5e37.png") no-repeat center/100% auto;
}
.quiz-con.grammar.grammar--11 .quiz-option .quiz-option__item.incorrect .answer-box-mo .icon {
  display: block;
}
.quiz-con.grammar.grammar--11 .quiz-option.pc {
  display: block;
}
.quiz-con.grammar.grammar--11 .quiz-option.pc .icon {
  position: absolute;
  top: -10px;
  right: -10px;
  border-radius: 50%;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--11 .quiz-option.pc {
    display: none;
  }
}
.quiz-con.grammar.grammar--11 .quiz-option.mo {
  display: none;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--11 .quiz-option.mo {
    display: block;
  }
}

.quiz-con.grammar.grammar--12 .quiz-con__inner {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4rem;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.grammar.grammar--12 .quiz-con__inner {
    flex-direction: column;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--12 .quiz-con__inner {
    flex-direction: row;
    gap: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--12 .quiz-con__inner {
    gap: 20px;
  }
}
.quiz-con.grammar.grammar--12 .quiz-num {
  position: absolute;
}
.quiz-con.grammar.grammar--12 .grammar-con {
  width: fit-content;
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--12 .grammar-con {
    max-width: 40%;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--12 .quiz-img {
    max-width: 80%;
  }
}
.quiz-con.grammar.grammar--12 .quiz-option {
  width: fit-content;
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--12 .quiz-option {
    padding: 0;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.grammar--12 .quiz-option__list {
    max-width: 100%;
    justify-content: start;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.grammar--12 .quiz-choice__list {
    gap: 16px !important;
  }
}

.grammar--1 .quiz-con__inner {
  margin-top: 35px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .grammar--1 .quiz-con__inner {
    margin-top: 0;
  }
}

.grammar--2 .quiz-con__inner:has(.only-img) {
  margin-top: 35px !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .grammar--2 .quiz-con__inner:has(.only-img) {
    margin-top: 0 !important;
  }
}

.quiz-con.grammar.test-grammar--1 .quiz-con__inner,
.quiz-con.grammar.test-grammar--1-1 .quiz-con__inner,
.quiz-con.grammar.test-grammar--1-2 .quiz-con__inner,
.quiz-con.grammar.test-grammar--2 .quiz-con__inner {
  justify-content: center;
  gap: 5rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.test-grammar--1 .quiz-con__inner,
  .quiz-con.grammar.test-grammar--1-1 .quiz-con__inner,
  .quiz-con.grammar.test-grammar--1-2 .quiz-con__inner,
  .quiz-con.grammar.test-grammar--2 .quiz-con__inner {
    gap: 36px;
    height: 100%;
  }
}
.quiz-con.grammar.test-grammar--1 .grammar-con,
.quiz-con.grammar.test-grammar--1-1 .grammar-con,
.quiz-con.grammar.test-grammar--1-2 .grammar-con,
.quiz-con.grammar.test-grammar--2 .grammar-con {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
}
.quiz-con.grammar.test-grammar--1 .quiz-option,
.quiz-con.grammar.test-grammar--1-1 .quiz-option,
.quiz-con.grammar.test-grammar--1-2 .quiz-option,
.quiz-con.grammar.test-grammar--2 .quiz-option {
  height: auto;
}
.quiz-con.grammar.test-grammar--1 .quiz-option__list,
.quiz-con.grammar.test-grammar--1-1 .quiz-option__list,
.quiz-con.grammar.test-grammar--1-2 .quiz-option__list,
.quiz-con.grammar.test-grammar--2 .quiz-option__list {
  width: fit-content;
  max-width: 100%;
  flex-direction: column;
  justify-content: start;
  gap: 18px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.test-grammar--1 .quiz-option__list,
  .quiz-con.grammar.test-grammar--1-1 .quiz-option__list,
  .quiz-con.grammar.test-grammar--1-2 .quiz-option__list,
  .quiz-con.grammar.test-grammar--2 .quiz-option__list {
    gap: 6px;
  }
}
.quiz-con.grammar.test-grammar--1 .quiz-option__item,
.quiz-con.grammar.test-grammar--1-1 .quiz-option__item,
.quiz-con.grammar.test-grammar--1-2 .quiz-option__item,
.quiz-con.grammar.test-grammar--2 .quiz-option__item {
  display: flex;
}
.quiz-con.grammar.test-grammar--1 .quiz-option__item:has(.blank-box),
.quiz-con.grammar.test-grammar--1-1 .quiz-option__item:has(.blank-box),
.quiz-con.grammar.test-grammar--1-2 .quiz-option__item:has(.blank-box),
.quiz-con.grammar.test-grammar--2 .quiz-option__item:has(.blank-box) {
  line-height: 5.2rem !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.test-grammar--1 .quiz-option__item:has(.blank-box),
  .quiz-con.grammar.test-grammar--1-1 .quiz-option__item:has(.blank-box),
  .quiz-con.grammar.test-grammar--1-2 .quiz-option__item:has(.blank-box),
  .quiz-con.grammar.test-grammar--2 .quiz-option__item:has(.blank-box) {
    line-height: 4.4rem !important;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.test-grammar--1 .quiz-option__item:has(.blank-box),
  .quiz-con.grammar.test-grammar--1-1 .quiz-option__item:has(.blank-box),
  .quiz-con.grammar.test-grammar--1-2 .quiz-option__item:has(.blank-box),
  .quiz-con.grammar.test-grammar--2 .quiz-option__item:has(.blank-box) {
    line-height: 36px !important;
  }
}
.quiz-con.grammar.test-grammar--1 .quiz-option__item:has(.blank-box) .speaker,
.quiz-con.grammar.test-grammar--1-1 .quiz-option__item:has(.blank-box) .speaker,
.quiz-con.grammar.test-grammar--1-2 .quiz-option__item:has(.blank-box) .speaker,
.quiz-con.grammar.test-grammar--2 .quiz-option__item:has(.blank-box) .speaker {
  transform: translateY(-1px);
  height: 5.2rem !important;
  line-height: 5.2rem !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.test-grammar--1 .quiz-option__item:has(.blank-box) .speaker,
  .quiz-con.grammar.test-grammar--1-1 .quiz-option__item:has(.blank-box) .speaker,
  .quiz-con.grammar.test-grammar--1-2 .quiz-option__item:has(.blank-box) .speaker,
  .quiz-con.grammar.test-grammar--2 .quiz-option__item:has(.blank-box) .speaker {
    transform: translateY(0);
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.test-grammar--1 .quiz-option__item:has(.blank-box) .speaker,
  .quiz-con.grammar.test-grammar--1-1 .quiz-option__item:has(.blank-box) .speaker,
  .quiz-con.grammar.test-grammar--1-2 .quiz-option__item:has(.blank-box) .speaker,
  .quiz-con.grammar.test-grammar--2 .quiz-option__item:has(.blank-box) .speaker {
    transform: translateY(1px);
    height: 36px !important;
    line-height: 36px !important;
  }
}
.quiz-con.grammar.test-grammar--1 .word-bank,
.quiz-con.grammar.test-grammar--1-1 .word-bank,
.quiz-con.grammar.test-grammar--1-2 .word-bank,
.quiz-con.grammar.test-grammar--2 .word-bank {
  flex-shrink: 0;
}

.quiz-con.grammar.test-grammar--1 .grammar-con,
.quiz-con.grammar.test-grammar--1-2 .grammar-con {
  height: auto;
  flex-direction: row;
  width: fit-content;
  margin: 0 auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.test-grammar--1 .grammar-con,
  .quiz-con.grammar.test-grammar--1-2 .grammar-con {
    flex-direction: column;
    gap: 20px;
  }
}
.quiz-con.grammar.test-grammar--1 .word-bank,
.quiz-con.grammar.test-grammar--1-2 .word-bank {
  width: fit-content;
  min-width: 700px;
  margin: 0 auto;
  padding-left: 60px;
  padding-right: 60px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.test-grammar--1 .word-bank,
  .quiz-con.grammar.test-grammar--1-2 .word-bank {
    min-width: 50%;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.grammar.test-grammar--1 .word-bank,
  .quiz-con.grammar.test-grammar--1-2 .word-bank {
    width: 100%;
    padding: 10px 16px;
  }
}
.quiz-con.grammar.test-grammar--1 .quiz-option,
.quiz-con.grammar.test-grammar--1-2 .quiz-option {
  width: 100%;
  padding-top: 3px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.test-grammar--1 .quiz-option,
  .quiz-con.grammar.test-grammar--1-2 .quiz-option {
    width: fit-content;
  }
}
.quiz-con.grammar.test-grammar--1 .quiz-option__list,
.quiz-con.grammar.test-grammar--1-2 .quiz-option__list {
  margin: 0;
}

.quiz-con.grammar.test-grammar--1:has(.quiz-img img) .grammar-con,
.quiz-con.grammar.test-grammar--1-2:has(.quiz-img img) .grammar-con {
  width: 100%;
  justify-content: start;
  gap: 5rem;
  margin: 0;
}

.quiz-con.grammar.test-grammar--2:has(.quiz-img img) .quiz-con__inner {
  gap: 30px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.test-grammar--2:has(.quiz-img img) .quiz-con__inner {
    gap: 36px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.test-grammar--2:has(.quiz-img img) .quiz-num {
    position: absolute;
  }
}
.quiz-con.grammar.test-grammar--2:has(.quiz-img img) .grammar-con {
  width: fit-content;
  margin: 0 auto;
}

.quiz-con.grammar.test-grammar--3 .quiz-con__inner,
.quiz-con.grammar.test-grammar--3-1 .quiz-con__inner {
  justify-content: center;
}
.quiz-con.grammar.test-grammar--3 .quiz-option,
.quiz-con.grammar.test-grammar--3-1 .quiz-option {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  width: fit-content;
  height: auto;
  padding: 20px;
  padding-bottom: 28px;
  margin: auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.test-grammar--3 .quiz-option,
  .quiz-con.grammar.test-grammar--3-1 .quiz-option {
    gap: 24px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
.quiz-con.grammar.test-grammar--3 .word-box,
.quiz-con.grammar.test-grammar--3-1 .word-box {
  width: fit-content;
  margin: 0 auto;
  box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.13);
}

.quiz-con.grammar.test-grammar--3-1 .quiz-option__item {
  width: fit-content;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.test-grammar--3-1 .quiz-option__item {
    gap: 14px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.test-grammar--3-1 .quiz-option__item {
    gap: 6px;
  }
}
.quiz-con.grammar.test-grammar--3-1 .quiz-option__item .blank-box {
  margin: 0 !important;
}

.quiz-con.grammar.test-grammar--4 .quiz-con__inner {
  justify-content: center;
  gap: 6rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.test-grammar--4 .quiz-con__inner {
    gap: 24px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.test-grammar--4 .quiz-num {
    margin-bottom: 20px;
  }
}
.quiz-con.grammar.test-grammar--4 .grammar-con {
  width: fit-content;
  padding: 40px 70px;
  background: #ECFAF8;
  margin: 0 auto;
  border-radius: 10px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.grammar.test-grammar--4 .grammar-con {
    padding: 32px 40px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.test-grammar--4 .grammar-con {
    padding: 20px 30px;
  }
}
.quiz-con.grammar.test-grammar--4 .grammar-con .quiz-txt {
  width: fit-content;
  font-size: 3rem;
  font-weight: 400;
  line-height: normal;
  color: #232323;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.grammar.test-grammar--4 .grammar-con .quiz-txt {
    font-size: 19px;
  }
}
.quiz-con.grammar.test-grammar--4 .quiz-option {
  height: auto;
}
.quiz-con.grammar.test-grammar--4 .quiz-option__list {
  width: fit-content;
  max-width: 100%;
}
.quiz-con.grammar.test-grammar--4 span.quiz-input {
  background: transparent !important;
}

.quiz-con.listening {
  width: 100%;
  justify-content: center;
}
.quiz-con.listening .quiz-con__inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 25px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.listening .quiz-con__inner {
    gap: 20px;
  }
}
.quiz-con.listening .quiz-con__inner.is-reading-box {
  padding-top: 90px;
  padding-left: 0;
}
.quiz-con.listening .quiz-con__inner.is-reading-box .listening-con {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
.quiz-con.listening .quiz-con__inner.is-reading-box .reading-wrapper {
  width: calc(38% - 4rem);
  height: auto;
  top: 50%;
  transform: translateY(-50%);
  padding-right: 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.listening .quiz-con__inner.is-reading-box .reading-wrapper {
    width: 50%;
    max-height: none;
    transform: translateY(0);
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.listening .quiz-con__inner.is-reading-box .reading-wrapper {
    width: 100%;
    max-width: 200px;
  }
}
.quiz-con.listening .quiz-con__inner.is-reading-box .reading-con {
  border-radius: 10px;
}
.quiz-con.listening .quiz-con__inner.is-reading-box .fl-row.quiz-box {
  position: relative;
  padding-left: 38%;
  transition: padding 0.7s ease;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.listening .quiz-con__inner.is-reading-box {
    padding-top: 0;
  }
  .quiz-con.listening .quiz-con__inner.is-reading-box .fl-row.quiz-box {
    padding-left: 0;
    flex-direction: column;
    gap: 20px;
  }
  .quiz-con.listening .quiz-con__inner.is-reading-box .listening-con {
    position: relative;
  }
  .quiz-con.listening .quiz-con__inner.is-reading-box .reading-wrapper {
    top: 0;
  }
  .quiz-con.listening .quiz-con__inner.is-reading-box .reading-con {
    max-width: 100%;
  }
  .quiz-con.listening .quiz-con__inner.is-reading-box .quiz-option__list {
    width: 100%;
  }
}
.quiz-con.listening .quiz-con__inner.is-reading-box.hide .fl-row.quiz-box {
  padding-left: 0;
}
.quiz-con.listening .listening-con {
  width: 100%;
  max-width: 800px;
  position: relative;
  margin: 0 auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.listening .listening-con {
    max-width: 100%;
  }
}
.quiz-con.listening .listening-con .script-box {
  width: 100%;
  position: relative;
  top: 10px;
  left: 0;
}
.quiz-con.listening .fl-row.quiz-box {
  gap: 4rem;
  height: 100%;
  overflow-y: auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.listening .quiz-option {
    padding-right: 10px;
  }
}
.quiz-con.listening .quiz-option__list {
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.listening .quiz-option__list {
    gap: 24px;
  }
}
.quiz-con.listening .quiz-option__item {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.quiz-con.listening.listening--1 .quiz-option__list {
  gap: 4rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.listening.listening--1 .quiz-option__list {
    gap: 24px;
  }
}

.quiz-con.listening.listening--2 .quiz-option__list {
  gap: 20px;
}

.quiz-con.listening.listening--3 .blank-box.is-selected {
  cursor: pointer;
}

.quiz-con.listening.listening--3 .quiz-option-container,
.quiz-con.listening.listening--3-1 .quiz-option-container,
.quiz-con.listening.listening--4 .quiz-option-container,
.quiz-con.listening.listening--4-1 .quiz-option-container {
  width: 100%;
  height: 100%;
  max-height: calc(100% - 10rem);
  display: flex;
  flex-direction: column;
  gap: 25px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.listening.listening--3 .quiz-option-container,
  .quiz-con.listening.listening--3-1 .quiz-option-container,
  .quiz-con.listening.listening--4 .quiz-option-container,
  .quiz-con.listening.listening--4-1 .quiz-option-container {
    flex-direction: column-reverse;
    gap: 25px;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.listening.listening--3 .quiz-option-container,
  .quiz-con.listening.listening--3-1 .quiz-option-container,
  .quiz-con.listening.listening--4 .quiz-option-container,
  .quiz-con.listening.listening--4-1 .quiz-option-container {
    max-height: none;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.listening.listening--3 .quiz-option-container,
  .quiz-con.listening.listening--3-1 .quiz-option-container,
  .quiz-con.listening.listening--4 .quiz-option-container,
  .quiz-con.listening.listening--4-1 .quiz-option-container {
    max-height: calc(100% - 90px);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .quiz-con.listening.listening--3 .quiz-option-container,
  .quiz-con.listening.listening--3-1 .quiz-option-container,
  .quiz-con.listening.listening--4 .quiz-option-container,
  .quiz-con.listening.listening--4-1 .quiz-option-container {
    max-height: calc(100% - 110px);
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.listening.listening--3 .quiz-option__list,
  .quiz-con.listening.listening--3-1 .quiz-option__list,
  .quiz-con.listening.listening--4 .quiz-option__list,
  .quiz-con.listening.listening--4-1 .quiz-option__list {
    gap: 24px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.listening.listening--3 .quiz-option__list,
  .quiz-con.listening.listening--3-1 .quiz-option__list,
  .quiz-con.listening.listening--4 .quiz-option__list,
  .quiz-con.listening.listening--4-1 .quiz-option__list {
    gap: 16px;
  }
}

.quiz-con.listening.listening--4 .quiz-option,
.quiz-con.listening.listening--4-1 .quiz-option {
  display: flex;
  flex-direction: column;
  gap: 35px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.listening.listening--4 .quiz-option,
  .quiz-con.listening.listening--4-1 .quiz-option {
    gap: 24px;
  }
}
.quiz-con.listening.listening--4 .quiz-option__list,
.quiz-con.listening.listening--4-1 .quiz-option__list {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
}
.quiz-con.listening.listening--4 .quiz-option__list:has(.speaker),
.quiz-con.listening.listening--4-1 .quiz-option__list:has(.speaker) {
  gap: 15px 20px;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .quiz-con.listening.listening--4 .quiz-option__list,
  .quiz-con.listening.listening--4-1 .quiz-option__list {
    flex-direction: column;
    flex-wrap: nowrap;
  }
}
.quiz-con.listening.listening--4 .quiz-option__item,
.quiz-con.listening.listening--4-1 .quiz-option__item {
  width: fit-content;
  display: block;
}
.quiz-con.listening.listening--4 .quiz-option__item--txt span,
.quiz-con.listening.listening--4-1 .quiz-option__item--txt span {
  padding-right: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.listening.listening--4 .quiz-option__item--txt span,
  .quiz-con.listening.listening--4-1 .quiz-option__item--txt span {
    padding-right: 24px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.listening.listening--5 .drag-box {
    height: calc(100% - 97px);
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.listening.listening--5 .drag-box {
    height: calc(100% - 108px);
  }
}

.quiz-con.listening.test-listening--1 .quiz-con__inner,
.quiz-con.listening.test-listening--2 .quiz-con__inner {
  gap: 36.5px;
  justify-content: start;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.listening.test-listening--1 .quiz-con__inner,
  .quiz-con.listening.test-listening--2 .quiz-con__inner {
    gap: 16px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.listening.test-listening--1:not(:has(.quiz-txt)) .quiz-num,
  .quiz-con.listening.test-listening--2:not(:has(.quiz-txt)) .quiz-num {
    position: absolute;
  }
}
.quiz-con.listening.test-listening--1 .grammar-con,
.quiz-con.listening.test-listening--2 .grammar-con {
  display: flex;
  gap: 10rem;
  justify-content: center;
  align-items: center;
  padding-bottom: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.listening.test-listening--1 .grammar-con,
  .quiz-con.listening.test-listening--2 .grammar-con {
    flex-direction: column;
    gap: 40px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.listening.test-listening--1 .grammar-con,
  .quiz-con.listening.test-listening--2 .grammar-con {
    gap: 20px;
  }
}
.quiz-con.listening.test-listening--1 .quiz-txt,
.quiz-con.listening.test-listening--2 .quiz-txt {
  font-size: 3.4rem;
  font-weight: 600;
  line-height: normal;
  color: #232323;
  text-align: center;
  padding-top: 10px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.listening.test-listening--1 .quiz-txt,
  .quiz-con.listening.test-listening--2 .quiz-txt {
    padding-top: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.listening.test-listening--1 .quiz-txt,
  .quiz-con.listening.test-listening--2 .quiz-txt {
    font-size: 17px;
  }
}
.quiz-con.listening.test-listening--1 .quiz-img-box,
.quiz-con.listening.test-listening--2 .quiz-img-box {
  position: relative;
  padding-bottom: 50px;
  max-width: 480px;
  overflow: hidden;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.listening.test-listening--1 .quiz-img-box,
  .quiz-con.listening.test-listening--2 .quiz-img-box {
    padding-bottom: 40px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.listening.test-listening--1 .quiz-img-box,
  .quiz-con.listening.test-listening--2 .quiz-img-box {
    padding-bottom: 28px;
  }
}
.quiz-con.listening.test-listening--1 .quiz-img-box:not(:has(.btn-sound)),
.quiz-con.listening.test-listening--2 .quiz-img-box:not(:has(.btn-sound)) {
  padding-bottom: 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.listening.test-listening--1 .quiz-img-box,
  .quiz-con.listening.test-listening--2 .quiz-img-box {
    width: 50%;
    margin: 0 auto;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.listening.test-listening--1 .quiz-img-box,
  .quiz-con.listening.test-listening--2 .quiz-img-box {
    width: 65%;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .quiz-con.listening.test-listening--1 .quiz-img-box,
  .quiz-con.listening.test-listening--2 .quiz-img-box {
    width: 300px;
  }
}
.quiz-con.listening.test-listening--1 .quiz-img-box .btn-sound,
.quiz-con.listening.test-listening--2 .quiz-img-box .btn-sound {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  background-size: 103%;
}
.quiz-con.listening.test-listening--1 .quiz-img-box .btn-sound::before,
.quiz-con.listening.test-listening--2 .quiz-img-box .btn-sound::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 4px solid white;
  transform: translate(-50%, -50%);
}
.quiz-con.listening.test-listening--1 .quiz-img,
.quiz-con.listening.test-listening--2 .quiz-img {
  width: 100%;
  border: 2.5px solid #D6D6D6;
  border-radius: 10px;
  overflow: hidden;
}
.quiz-con.listening.test-listening--1 .quiz-img img,
.quiz-con.listening.test-listening--2 .quiz-img img {
  width: 100%;
}
.quiz-con.listening.test-listening--1 .quiz-option__list,
.quiz-con.listening.test-listening--2 .quiz-option__list {
  margin: 0;
  justify-content: center;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.listening.test-listening--1 .quiz-option__list,
  .quiz-con.listening.test-listening--2 .quiz-option__list {
    height: auto;
  }
}
.quiz-con.listening.test-listening--1 .quiz-option__item,
.quiz-con.listening.test-listening--2 .quiz-option__item {
  padding-left: 0;
}
.quiz-con.listening.test-listening--1 .quiz-option__item .quiz-choice__list,
.quiz-con.listening.test-listening--2 .quiz-option__item .quiz-choice__list {
  flex-direction: row;
  gap: 5rem;
}
.quiz-con.listening.test-listening--1 .quiz-option__item .num,
.quiz-con.listening.test-listening--2 .quiz-option__item .num {
  position: static;
  margin-bottom: 10px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.listening.test-listening--1 .quiz-option__item .num,
  .quiz-con.listening.test-listening--2 .quiz-option__item .num {
    margin-bottom: 4px;
  }
}
.quiz-con.listening.test-listening--1 .quiz-option__item .quiz-choice__item,
.quiz-con.listening.test-listening--2 .quiz-option__item .quiz-choice__item {
  padding-bottom: 58px;
  flex-direction: column;
  padding-left: 10px;
  padding-right: 10px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.listening.test-listening--1 .quiz-option__item .quiz-choice__item,
  .quiz-con.listening.test-listening--2 .quiz-option__item .quiz-choice__item {
    padding-bottom: 52px;
  }
}
.quiz-con.listening.test-listening--1 .quiz-option__item .radio-label::before,
.quiz-con.listening.test-listening--2 .quiz-option__item .radio-label::before {
  width: 60px;
  height: auto;
  aspect-ratio: 1;
  top: auto;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-size: 28px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.listening.test-listening--1 .quiz-option__item .radio-label::before,
  .quiz-con.listening.test-listening--2 .quiz-option__item .radio-label::before {
    width: 50px;
    height: 50px;
    background-size: 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.listening.test-listening--1 .quiz-option__item .radio-label::before,
  .quiz-con.listening.test-listening--2 .quiz-option__item .radio-label::before {
    width: 50px;
    background-size: 14px !important;
  }
}

.quiz-con.listening.test-listening--2 .quiz-con__inner {
  justify-content: center;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.listening.test-listening--2 {
    justify-content: start;
  }
}

.quiz-con.speaking .quiz-con__inner {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.speaking .quiz-con__inner {
    gap: 18px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.speaking .quiz-con__inner {
    gap: 10px;
  }
}
.quiz-con.speaking .quiz-option__item {
  padding-left: 4.5rem;
}
.quiz-con.speaking .script-box {
  display: block;
  max-height: 100%;
  border: none;
  padding-top: 6px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.speaking .script-box {
    padding: 0;
  }
}
.quiz-con.speaking .script-box .script-box-con {
  padding: 0 !important;
  gap: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.speaking .script-box .script-box-con {
    gap: 16px;
  }
}
.quiz-con.speaking .script-box .script-box-con .script-box-con__item {
  position: relative;
}
.quiz-con.speaking .script-box .script-box-con .speaker {
  font-weight: 700;
  white-space: pre;
}
.quiz-con.speaking .script-box .script-box-con p {
  display: flex;
  align-items: start;
  padding: 0;
  padding-left: 66px;
  font-size: 2.8rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.speaking .script-box .script-box-con p {
    padding-left: 60px;
    min-height: 35px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.speaking .script-box .script-box-con p {
    padding-left: 38px;
    font-size: 17px;
    min-height: 28px;
  }
}
.quiz-con.speaking .script-box .script-box-con .icon {
  width: 40px;
  aspect-ratio: 1;
  top: 2px;
  left: 9px;
  background: url("/assets/images/icon/ic_sound-focus-speaking-86c9057adaecbe9f01d08f4f9936cc69.png") no-repeat center/100% auto;
  display: none;
  position: absolute;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .quiz-con.speaking .script-box .script-box-con .icon {
    width: 35px;
    top: 0;
    left: 12px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .quiz-con.speaking .script-box .script-box-con .icon {
    width: 28px;
    top: 12px;
    left: 0;
  }
}
.quiz-con.speaking .script-box .script-box-con .script-box-con__item.speak-focus p {
  color: #232323;
}
.quiz-con.speaking .script-box .script-box-con .script-box-con__item.speak-focus .icon {
  display: block;
}
.quiz-con.speaking .script-box .script-box-con .script-box-con__item.speak-focus:has(.timer) .icon {
  display: none;
}

.timer {
  position: absolute;
  width: 56px;
  aspect-ratio: 1;
  top: -5px;
  left: 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .timer {
    width: 40px;
    top: -2px;
    left: 9px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .timer {
    width: 28px;
    top: 0;
    left: 0;
  }
}

.timer__text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.4rem;
  font-weight: bold;
  color: #ED4C33;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .timer__text {
    font-size: 15px;
  }
}

.progress-ring__circle {
  opacity: 0.22;
}

.progress-ring__progress {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  stroke-linecap: round;
  stroke-dasharray: 157; /* 2 * Math.PI * 25 */
  stroke-dashoffset: 157; /* 처음엔 비워진 상태 */
  transition: stroke-dashoffset 0.3s linear;
}

.is-teacher .btn-section-con {
  background-color: #0072BC !important;
  box-shadow: 4px 12px 12px rgba(0, 114, 188, 0.24) !important;
}
.is-teacher .btn-section-con-mo {
  background-color: #0072BC !important;
  box-shadow: 0px 4px 8px rgba(0, 114, 188, 0.24) !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher.practice .content {
    padding-top: 24px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .is-teacher.practice .content {
    padding-top: 16px;
  }
}
.is-teacher .mobile-gnb .user-info__icon {
  background: #0072BC;
}
.is-teacher .mobile-gnb__item.on > a {
  color: #0072BC;
}
.is-teacher .mobile-gnb__item:active > a {
  color: #0072BC;
}
.is-teacher .mobile-gnb .btn-home.on .icon,
.is-teacher .mobile-gnb .btn-home:active .icon {
  background: url("/assets/images/icon/ic_home-blue-c1150ce882ee0fbd617b1e4cc032d278.svg") no-repeat center center/100% auto;
}
.is-teacher .mobile-gnb .btn-mypage.on .icon,
.is-teacher .mobile-gnb .btn-mypage:active .icon {
  background: url("/assets/images/icon/ic_mypage-blue-6c13eeb39a5bec9e1847ec0f28cbaced.svg") no-repeat center center/100% auto;
}
.is-teacher .mobile-gnb .btn-join-inst.on .icon,
.is-teacher .mobile-gnb .btn-join-inst:active .icon {
  background: url("/assets/images/icon/ic_inst-check-mo-441d036d75046e01a5d67c32093198f7.png") no-repeat center center/100% auto;
}
.is-teacher .mobile-gnb .btn-join-inst.is-active.on .icon,
.is-teacher .mobile-gnb .btn-join-inst.is-active:active .icon {
  background: url("/assets/images/icon/ic_my-inst-bcc6bb238cc3c45fd40e53b833472a51.png") no-repeat center center/100% auto;
}
.is-teacher .mobile-gnb .btn-logout.on .icon,
.is-teacher .mobile-gnb .btn-logout:active .icon {
  background: url("/assets/images/icon/ic_logout-blue-5a04f0f178106de8946b60daa36f9262.svg") no-repeat center center/100% auto;
}
.is-teacher .header {
  background: #EDF3F6;
}
.is-teacher .header .header__inner {
  background: #0072BC;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .teacher-menu {
    padding-top: 76px;
  }
}
.is-teacher .teacher-menu .main-tit {
  position: relative;
}
.is-teacher .teacher-menu .main-tit .navigator {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .is-teacher .teacher-menu .main-tit .navigator {
    position: relative;
    margin-bottom: 0;
  }
}
.is-teacher .teacher-menu .main-tit .navigator .control {
  padding-top: 0;
}
.is-teacher .teacher-menu .main-tit .navigator .control .btn--back {
  border: none;
}
.is-teacher .teacher-menu .page {
  max-width: 1730px;
  padding-left: 0;
  padding-right: 0;
}
.is-teacher .teacher-menu .page__inner {
  max-width: 100%;
  background: #fff;
  padding: 30px 50px 65px;
  position: relative;
  border-radius: 0 10px 10px 10px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .teacher-menu .page__inner {
    padding: 24px 30px 36px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .is-teacher .teacher-menu .page__inner {
    padding: 24px 16px 32px !important;
  }
}
.is-teacher .teacher-menu .page__inner::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0 10px 10px 10px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  z-index: -1;
}
.is-teacher .teacher-menu__list {
  display: flex;
  gap: 8px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .teacher-menu__list {
    display: none;
  }
}
.is-teacher .teacher-menu__item {
  height: 73px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: normal;
  color: #232323;
  color: #8F9EA6;
  background: #DFE8ED;
  border-radius: 10px 10px 0 0;
  padding: 0 25px;
  position: relative;
  cursor: pointer;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .teacher-menu__item {
    width: 250px;
    height: 44px;
    padding: 0 15px;
    padding-right: 40px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .is-teacher .teacher-menu__item {
    font-size: 18px;
  }
}
.is-teacher .teacher-menu__item.on::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  z-index: -1;
}
.is-teacher .teacher-menu__item.on {
  color: #0072BC;
  background: #fff;
}
.is-teacher .teacher-menu .btn-download {
  margin-left: auto;
  margin-top: 20px;
  display: none;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .is-teacher .teacher-menu .btn-download {
    display: flex;
  }
}
.is-teacher .teacher-menu--practice {
  display: flex;
  justify-content: space-between;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .teacher-menu--practice {
    display: none;
  }
}
.is-teacher .teacher-menu--practice .route__item {
  height: auto;
}
.is-teacher .teacher-menu--practice .route__item.current {
  color: #0072BC;
}
.is-teacher .teacher-menu--practice .route__icon {
  background: url("/assets/images/icon/ic_unit-blue-76759edbe6d474e732fc04df2d64b86a.svg") no-repeat center center/100% auto;
}
.is-teacher .page.quiz .teacher-menu .page__inner {
  padding-bottom: 0 !important;
}
.is-teacher .page.quiz .navigator {
  position: static;
}
@media (min-width: 1367px) {
  .is-teacher .page.quiz .navigator {
    padding-left: 50px;
  }
}
.is-teacher .page.quiz .navigator.is-pc {
  padding-left: 50px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .page.quiz .navigator.is-pc {
    display: none;
  }
}
@media (min-width: 1367px) {
  .is-teacher .page.quiz .navigator.is-mobile {
    display: none;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .is-teacher .page.quiz .practice-container {
    border-radius: 10px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  }
}
.is-teacher .page.quiz .page__inner {
  max-width: 100%;
  padding: 30px 0 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .page.quiz .page__inner {
    border-radius: 10px;
    padding: 0 !important;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .is-teacher .page.quiz .page__inner {
    border-radius: 10px;
    background: transparent;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .page.quiz .page__inner::before {
    box-shadow: none;
  }
}
@media (min-width: 1367px) {
  .is-teacher .page.quiz .quiz-con {
    padding: 0 14rem;
  }
}
@media (min-width: 1367px) {
  .is-teacher .page.quiz .swiper-pagination {
    right: 0;
    padding-right: 9rem;
  }
}
@media (min-width: 1367px) {
  .is-teacher .page.quiz .btn-con {
    top: 60%;
  }
  .is-teacher .page.quiz .btn-con .btn-prev {
    left: 23px;
  }
  .is-teacher .page.quiz .btn-con .btn-next {
    right: 23px;
  }
}
@media (min-width: 1367px) {
  .is-teacher .page.quiz .main-tit {
    padding-left: 9rem;
  }
}
@media (min-width: 1367px) {
  .is-teacher .page.quiz .btn-control {
    padding-left: 80px;
    padding-right: 80px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .is-teacher .page.quiz .btn-control {
    background: #EDF3F6;
  }
}
.is-teacher .page.quiz .btn-control .btn {
  border-color: #0072BC;
}
.is-teacher .page.quiz .btn-control .btn-prev--control .icon {
  background: url("/assets/images/icon/ic_control-arr-prev-blue-9dc2165c3aa96fb4f27ff1a32ed4fa58.svg") no-repeat center center/100% auto;
}
.is-teacher .page.quiz .btn-control .btn-prev--control.is-disabled .icon {
  background: url("/assets/images/icon/ic_control-arr-prev-blue-9dc2165c3aa96fb4f27ff1a32ed4fa58.svg") no-repeat center center/100% auto;
}
.is-teacher .page.quiz .btn-control .btn-prev--control,
.is-teacher .page.quiz .btn-control .btn-next--control {
  color: #0072BC;
}
.is-teacher .page.quiz .btn-control .btn-check--control {
  background: #0072BC;
}
.is-teacher .page.quiz .btn-control .btn-check-next--control {
  background: #009A85;
}
@media (min-width: 1367px) {
  .is-teacher.exam-test .page.quiz {
    padding-left: 0;
    padding-right: 0;
  }
}

.teacher .main-tit {
  margin-bottom: 30px !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .teacher .main-tit {
    margin-top: 30px !important;
    margin-bottom: 20px !important;
  }
}
.teacher .main-tit h2 {
  text-align: center;
}

.page--my-report {
  padding: 0;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--my-report {
    padding-bottom: 50px;
  }
}
.page--my-report .page__inner {
  max-width: 1733px !important;
}
.page--my-report .overall {
  max-width: 1630px;
  margin: 0 auto;
  margin-bottom: 30px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.18);
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--my-report .overall {
    margin-bottom: 48px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--my-report .overall h4 {
    font-size: 22px !important;
  }
}
.page--my-report .table-con {
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  overflow: hidden;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--my-report .table-con {
    border-radius: 0;
    box-shadow: none;
  }
}
.page--my-report .table-con .report-table {
  overflow-x: auto;
}

.table--my-report.is-pc {
  position: relative;
  display: grid;
  grid-template-columns: 227px repeat(18, minmax(50px, 0.9fr)) 1.2fr 1.2fr; /* Report button */
  text-align: center;
  overflow-x: auto;
  /* Score, View 두 셀 세로 병합 */
}
.table--my-report.is-pc .cell-online-practice {
  grid-row: 1/span 3; /* 세로 3줄 병합 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #009A85;
  border-right: 1px solid #085F53;
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  position: sticky;
  left: 0;
  z-index: 30;
}
.table--my-report.is-pc .col {
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #C1CAD0;
  border-bottom: 1px solid #C1CAD0;
}
.table--my-report.is-pc .unit-block:last-child .col {
  border-bottom: 0;
}
.table--my-report.is-pc .header-1 .col:last-child,
.table--my-report.is-pc .header-2 .col:last-child,
.table--my-report.is-pc .unit-row.score-row .col:last-child {
  border-right: 0;
}
.table--my-report.is-pc .cell-online-practice,
.table--my-report.is-pc .table-con__body .col.title {
  border-right: 1px solid #085F53;
}
.table--my-report.is-pc .cell-online-practice,
.table--my-report.is-pc .header-3 .col,
.table--my-report.is-pc .header-cell-span {
  border-bottom: 1px solid #085F53;
}
.table--my-report.is-pc .table-con__header {
  display: contents; /* 레이아웃 영향 제거 + 구조 유지 */
}
.table--my-report.is-pc .header-1, .table--my-report.is-pc .header-2, .table--my-report.is-pc .header-3 {
  display: contents; /* 핵심: grid-row 내부에서 col을 그대로 grid에 배치 */
  font-size: 18px;
  font-weight: 600;
}
.table--my-report.is-pc .header-1 .col {
  background: #009A85;
  color: #fff;
}
.table--my-report.is-pc .header-1 .col,
.table--my-report.is-pc .header-2 .col {
  min-height: 66px;
}
.table--my-report.is-pc .header-2 .col,
.table--my-report.is-pc .header-3 .col {
  background: #EFFCFA;
}
.table--my-report.is-pc .header-3 .col {
  min-height: 41px;
}
.table--my-report.is-pc .header-cell-span {
  grid-row: span 2; /* ✅ 핵심: 2줄 병합 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  z-index: 10;
  position: sticky;
  top: 0; /* ✅ header sticky 유지 */
}
.table--my-report.is-pc .table-con__body {
  display: contents;
  /* Score row & Attempt row 배경 분리 */
  /* 일반 유닛만 span 2 */
}
.table--my-report.is-pc .table-con__body .unit-block,
.table--my-report.is-pc .table-con__body .unit-row {
  display: contents;
}
.table--my-report.is-pc .table-con__body .col {
  min-height: 46.5px;
  font-size: 18px;
}
.table--my-report.is-pc .table-con__body .col.unit-title {
  position: sticky;
  left: 0;
  z-index: 22;
  font-size: 18px;
  font-weight: 600;
  background: #fff !important;
}
.table--my-report.is-pc .table-con__body .col.total {
  font-weight: 600;
  text-align: center;
}
.table--my-report.is-pc .table-con__body .col.title {
  font-size: 15px;
  position: sticky;
  left: 227px;
  z-index: 22;
  background: #fff;
}
.table--my-report.is-pc .table-con__body .col.cell-test-score {
  background: #fff !important;
}
.table--my-report.is-pc .table-con__body .score-row .col {
  background: #EDF3F6;
}
.table--my-report.is-pc .table-con__body .score-row .col.speaking, .table--my-report.is-pc .table-con__body .score-row .col.total-score, .table--my-report.is-pc .table-con__body .score-row .col.report-btn {
  background: #fff !important;
}
.table--my-report.is-pc .table-con__body .attempt-row .col {
  background: #fff;
}
.table--my-report.is-pc .table-con__body .score {
  text-align: center;
  color: #009A85;
  font-weight: 600;
}
.table--my-report.is-pc .table-con__body .attempt {
  font-size: 15px;
}
.table--my-report.is-pc .table-con__body .unit-block:not(.unit-test) .unit-title,
.table--my-report.is-pc .table-con__body .unit-block:not(.unit-test) .speaking,
.table--my-report.is-pc .table-con__body .unit-block:not(.unit-test) .total-score,
.table--my-report.is-pc .table-con__body .unit-block:not(.unit-test) .report-btn {
  grid-row: span 2;
}
.table--my-report.is-pc .table-con__body .total-score {
  text-align: center;
  font-size: 22px;
  font-weight: 400;
  color: #979797;
}
.table--my-report.is-pc .table-con__body .total-score > span {
  color: #232323;
  font-weight: 600;
}
.table--my-report.is-pc .table-con__body .report-btn {
  text-align: center;
}
.table--my-report.is-pc .table-con__body .unit-test .col.unit-title {
  color: #ED4C33;
}
.table--my-report.is-pc .table-con__body .unit-test .col.total-score {
  color: #ED4C33;
}
.table--my-report.is-pc .table-con__body .unit-test .col.total-score > span {
  color: #ED4C33;
  font-weight: 600;
}

.table--my-report.is-pc .col.score.speaking,
.table--my-report.is-mobile .col.score.speaking {
  display: flex;
  flex-direction: column;
  font-size: 15px;
  color: #232323 !important;
  font-weight: 400;
}

.is-teacher {
  background: #EDF3F6;
  /******************************************************
   * 공통 영역
   ******************************************************/
  /******************************************************
   * PC 버전 - My Report Table
   ******************************************************/
  /******************************************************
   * Mobile 버전 - My Report Table
   ******************************************************/
}
.is-teacher .btn-progress-report {
  background: #0072BC;
}
.is-teacher .page--my-report .page__inner {
  padding-left: 30px;
  padding-right: 30px;
}
.is-teacher .table--my-report.is-pc {
  /* 공통 컬럼 배경 */
  /* PC 테이블 레이아웃 */
  grid-template-columns: 164px repeat(18, minmax(50px, 0.9fr)) 1.2fr 1.2fr; /* Report button */
  text-align: center;
  /* title 고정 위치 */
  /* 공통 border 스타일 */
}
.is-teacher .table--my-report.is-pc .cell-online-practice {
  background: #0072BC;
}
.is-teacher .table--my-report.is-pc .header-1 .col {
  background: #0072BC;
}
.is-teacher .table--my-report.is-pc .header-2 .col,
.is-teacher .table--my-report.is-pc .header-3 .col {
  background: #ECF7FF;
}
.is-teacher .table--my-report.is-pc .table-con__body .score-row .col {
  background: #EDF3F6;
}
.is-teacher .table--my-report.is-pc .table-con__body .score-row .score {
  color: #0072BC;
}
.is-teacher .table--my-report.is-pc .table-con__body .col.title {
  left: 164px;
}
.is-teacher .table--my-report.is-pc .cell-online-practice,
.is-teacher .table--my-report.is-pc .table-con__body .col.title {
  border-right: 1px solid #004774;
}
.is-teacher .table--my-report.is-pc .cell-online-practice,
.is-teacher .table--my-report.is-pc .header-3 .col,
.is-teacher .table--my-report.is-pc .header-cell-span {
  border-bottom: 1px solid #004774;
}
.is-teacher .table--my-report.is-mobile {
  /***** Section Header *****/
  /***** Activity Section *****/
  /***** Total Row / Report Row 공통화 *****/
}
.is-teacher .table--my-report.is-mobile .section-header .col {
  font-size: 13px;
}
.is-teacher .table--my-report.is-mobile .section-header .col.title {
  background: #0072BC;
  border: 1px solid #004774;
  font-size: 14px;
}
.is-teacher .table--my-report.is-mobile .section-header .col.score {
  border-top: 1px solid #004774;
  border-bottom: 1px solid #004774;
}
.is-teacher .table--my-report.is-mobile .section-block .activity-row .col {
  font-size: 15px;
}
.is-teacher .table--my-report.is-mobile .section-block .activity-row .col.title {
  font-size: 14px;
  background: #0072BC;
  border-left: 1px solid #004774;
}
.is-teacher .table--my-report.is-mobile .section-block .activity-row .col.activity, .is-teacher .table--my-report.is-mobile .section-block .activity-row .col.type {
  font-size: 13px;
  background: #ECF7FF;
}
.is-teacher .table--my-report.is-mobile .section-block .activity-row .col.type {
  border-right: 1px solid #004774;
}
.is-teacher .table--my-report.is-mobile .section-block .activity-row .col.score {
  color: #0072BC;
}
.is-teacher .table--my-report.is-mobile .section-block .activity-row .col.attempt {
  border-right: 1px solid #004774;
}
.is-teacher .table--my-report.is-mobile .total-row .col,
.is-teacher .table--my-report.is-mobile .report-btn-row .col {
  font-size: 14px;
  border-bottom: 1px solid #004774;
}
.is-teacher .table--my-report.is-mobile .total-row .col.title,
.is-teacher .table--my-report.is-mobile .report-btn-row .col.title {
  background: #0072BC;
  border-left: 1px solid #004774;
}

.teacher .unit-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  text-align: center;
  border-top: 1px dashed #8B8B8B;
  padding-top: 32px;
}
.teacher .unit-nav h2.unit-title {
  flex: 1;
  font-size: 20px;
  font-weight: 700;
}
.teacher .btn-prev, .teacher .btn-next {
  display: block;
  width: 36px;
  height: 36px;
}
.teacher .btn-prev {
  background: url("/assets/images/icon/ic_arr-left-6c900e204d229e326078e4f63d40ef46.png") no-repeat center center/100% auto;
}
.teacher .btn-prev.is-disabled {
  background: url("/assets/images/icon/ic_arr-left-gr-ca4fd07b1ea80565d5287b32ba772bc8.png") no-repeat center center/100% auto;
}
.teacher .btn-next {
  background: url("/assets/images/icon/ic_arr-right-25758b4890bafd06ee72f4cb5245a484.png") no-repeat center center/100% auto;
}
.teacher .btn-next.is-disabled {
  background: url("/assets/images/icon/ic_arr-right-gr-a26873e6aae8e008f33f7b4e2f564d08.png") no-repeat center center/100% auto;
}

.table--my-report.is-mobile .col {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.table--my-report.is-mobile .section-header {
  display: grid;
  grid-template-columns: 1fr 65px 65px;
  align-items: center;
  min-height: 40px;
  text-align: center;
  font-weight: 500;
}
.table--my-report.is-mobile .section-header .col.title {
  background: #009A85;
  color: #fff;
  font-weight: 500;
  border: 1px solid #085F53;
}
.table--my-report.is-mobile .section-header .col.score {
  background: #EDF3F6;
  border-top: 1px solid #085F53;
  border-bottom: 1px solid #085F53;
  border-right: 1px solid #C1CAD0;
}
.table--my-report.is-mobile .section-header .col.attempt {
  background: #fff;
  border: 1px solid #085F53;
  border-left: 0;
}
.table--my-report.is-mobile .section-block {
  display: grid;
  grid-template-columns: 2fr 4fr 1fr 65px 65px;
  border-top: none;
}
.table--my-report.is-mobile .section-block .activity-row {
  display: contents;
  align-items: center;
  text-align: center;
  border-top: 1px solid #e5eeee;
  white-space: normal;
  word-break: keep-all; /* ✅ 자동 줄바꿈 */
}
.table--my-report.is-mobile .section-block .activity-row .col {
  font-size: 15px;
  min-height: 60px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .table--my-report.is-mobile .section-block .activity-row .col {
    min-height: 40px;
  }
}
.table--my-report.is-mobile .section-block .activity-row .col.title {
  background: #009A85;
  color: #fff;
  font-weight: 500;
  border-bottom: 1px solid #C1CAD0;
  border-left: 1px solid #085F53;
}
.table--my-report.is-mobile .section-block .activity-row .col.activity {
  background: #EFFCFA;
  border-bottom: 1px solid #C1CAD0;
  border-right: 1px solid #C1CAD0;
}
.table--my-report.is-mobile .section-block .activity-row .col.type {
  background: #EFFCFA;
  border-bottom: 1px solid #C1CAD0;
  border-right: 1px solid #085F53;
}
.table--my-report.is-mobile .section-block .activity-row .col.score {
  color: #009A85;
  background: #EDF3F6;
  border-right: 1px solid #C1CAD0;
  border-bottom: 1px solid #C1CAD0;
}
.table--my-report.is-mobile .section-block .activity-row .col.score.speaking {
  grid-column: span 2;
  border-right: 1px solid #085F53;
  background: #fff;
  min-height: 54px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .table--my-report.is-mobile .section-block .activity-row .col.score.speaking:has(.btn-speaking.play), .table--my-report.is-mobile .section-block .activity-row .col.score.speaking:has(.btn-speaking.pause) {
    justify-content: start;
    padding-top: 4px;
  }
}
.table--my-report.is-mobile .section-block .activity-row .col.attempt {
  background: #fff;
  border-bottom: 1px solid #C1CAD0;
  border-right: 1px solid #085F53;
}
.table--my-report.is-mobile .section-block .col.title,
.table--my-report.is-mobile .section-block .col.activity,
.table--my-report.is-mobile .section-block .col.type,
.table--my-report.is-mobile .section-block .col.score {
  font-weight: 500;
}
.table--my-report.is-mobile .section-block.last-block .activity-row .col.title {
  border-bottom: 1px solid #085F53;
}
.table--my-report.is-mobile .section-block.last-block .activity-row:last-of-type .col {
  border-bottom: 1px solid #085F53 !important;
}
.table--my-report.is-mobile .section-block.last-block .activity-row:nth-last-of-type(2) .activity {
  border-bottom: 1px solid #085F53 !important;
}
.table--my-report.is-mobile .unit-test .section-header {
  grid-template-columns: 1fr 130px;
}
.table--my-report.is-mobile .unit-test .section-header .col.score {
  border-right: 1px solid #085F53;
}
.table--my-report.is-mobile .total-row,
.table--my-report.is-mobile .report-btn-row {
  display: grid;
  grid-template-columns: 1fr 130px;
  justify-content: center;
}
.table--my-report.is-mobile .total-row .col,
.table--my-report.is-mobile .report-btn-row .col {
  height: 45px;
  border-right: 1px solid #085F53;
  border-bottom: 1px solid #085F53;
  background: #fff;
}
.table--my-report.is-mobile .total-row .col.title,
.table--my-report.is-mobile .report-btn-row .col.title {
  border-left: 1px solid #085F53;
  background: #009A85;
  color: #fff;
}
.table--my-report.is-mobile .total-row .col,
.table--my-report.is-mobile .report-btn-row .col {
  text-align: center;
  font-size: 15px;
}
.table--my-report.is-mobile .total-row .score,
.table--my-report.is-mobile .report-btn-row .score {
  font-size: 18px;
}

.page--unit-report .main-tit,
.page--test-report .main-tit,
.page--progress-report .main-tit,
.page--level-test-report .main-tit {
  font-size: 4.8rem;
  font-weight: 700;
  line-height: normal;
  color: #232323;
}
.page--unit-report .report__wrapper,
.page--test-report .report__wrapper,
.page--progress-report .report__wrapper,
.page--level-test-report .report__wrapper {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  padding: 5rem;
  border-radius: 10px;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--unit-report .report__wrapper,
  .page--test-report .report__wrapper,
  .page--progress-report .report__wrapper,
  .page--level-test-report .report__wrapper {
    padding: 20px 16px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .page--unit-report .report__wrapper,
  .page--test-report .report__wrapper,
  .page--progress-report .report__wrapper,
  .page--level-test-report .report__wrapper {
    padding: 24px 30px;
  }
}
.page--unit-report .report__wrapper .report__section,
.page--test-report .report__wrapper .report__section,
.page--progress-report .report__wrapper .report__section,
.page--level-test-report .report__wrapper .report__section {
  border-bottom: 1px solid #8B8B8B;
}
.page--unit-report .report__wrapper .report__section:last-child,
.page--test-report .report__wrapper .report__section:last-child,
.page--progress-report .report__wrapper .report__section:last-child,
.page--level-test-report .report__wrapper .report__section:last-child {
  border: none;
}
.page--unit-report .report__header .level-logo,
.page--test-report .report__header .level-logo,
.page--progress-report .report__header .level-logo,
.page--level-test-report .report__header .level-logo {
  display: block;
  width: 269px;
  height: 114px;
  margin: 0 auto;
  margin-bottom: 25px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit-report .report__header .level-logo,
  .page--test-report .report__header .level-logo,
  .page--progress-report .report__header .level-logo,
  .page--level-test-report .report__header .level-logo {
    width: 180px;
    height: 80px;
    margin-bottom: 12px;
  }
}
.page--unit-report .report__header h2,
.page--test-report .report__header h2,
.page--progress-report .report__header h2,
.page--level-test-report .report__header h2 {
  font-size: 3.4rem;
  font-weight: 700;
  line-height: normal;
  color: #232323;
  padding-bottom: 30px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit-report .report__header h2,
  .page--test-report .report__header h2,
  .page--progress-report .report__header h2,
  .page--level-test-report .report__header h2 {
    font-size: 22px;
    padding-bottom: 20px;
  }
}
.page--unit-report .report__info,
.page--test-report .report__info,
.page--progress-report .report__info,
.page--level-test-report .report__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 21px;
  padding: 25px 0 30px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit-report .report__info,
  .page--test-report .report__info,
  .page--progress-report .report__info,
  .page--level-test-report .report__info {
    font-size: 13px;
    padding: 20px 0;
    gap: 8px;
  }
}
.page--unit-report .report__info li,
.page--test-report .report__info li,
.page--progress-report .report__info li,
.page--level-test-report .report__info li {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit-report .report__info li,
  .page--test-report .report__info li,
  .page--progress-report .report__info li,
  .page--level-test-report .report__info li {
    gap: 8px;
  }
}
.page--unit-report .report__info .tit,
.page--test-report .report__info .tit,
.page--progress-report .report__info .tit,
.page--level-test-report .report__info .tit {
  font-size: 21px;
  font-weight: 700;
  color: #8B8B8B;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit-report .report__info .tit,
  .page--test-report .report__info .tit,
  .page--progress-report .report__info .tit,
  .page--level-test-report .report__info .tit {
    font-size: 13px;
  }
}
.page--unit-report .report-chart h5,
.page--unit-report .report-result h5,
.page--test-report .report-chart h5,
.page--test-report .report-result h5,
.page--progress-report .report-chart h5,
.page--progress-report .report-result h5,
.page--level-test-report .report-chart h5,
.page--level-test-report .report-result h5 {
  font-size: 3.4rem;
  font-weight: 700;
  line-height: normal;
  color: #232323;
  text-align: center;
  padding: 40px 0 30px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit-report .report-chart h5,
  .page--unit-report .report-result h5,
  .page--test-report .report-chart h5,
  .page--test-report .report-result h5,
  .page--progress-report .report-chart h5,
  .page--progress-report .report-result h5,
  .page--level-test-report .report-chart h5,
  .page--level-test-report .report-result h5 {
    padding: 32px 0 20px;
  }
}
.page--unit-report .report-chart .test-tit,
.page--unit-report .report-result .test-tit,
.page--test-report .report-chart .test-tit,
.page--test-report .report-result .test-tit,
.page--progress-report .report-chart .test-tit,
.page--progress-report .report-result .test-tit,
.page--level-test-report .report-chart .test-tit,
.page--level-test-report .report-result .test-tit {
  color: #0072BC;
  text-align: left;
  padding: 50px 0 30px;
  border-bottom: 1px solid #8B8B8B;
}
.page--unit-report .report-chart__list,
.page--unit-report .report-result__list,
.page--test-report .report-chart__list,
.page--test-report .report-result__list,
.page--progress-report .report-chart__list,
.page--progress-report .report-result__list,
.page--level-test-report .report-chart__list,
.page--level-test-report .report-result__list {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  align-items: start;
}
.page--unit-report .report-chart__label,
.page--unit-report .report-result__label,
.page--test-report .report-chart__label,
.page--test-report .report-result__label,
.page--progress-report .report-chart__label,
.page--progress-report .report-result__label,
.page--level-test-report .report-chart__label,
.page--level-test-report .report-result__label {
  flex-shrink: 0;
  width: 160px;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: normal;
  color: #232323;
}
@media (orientation: portrait) and (max-width: 800px), (orientation: landscape) and (max-width: 1100px) {
  .page--unit-report .report-chart__label,
  .page--unit-report .report-result__label,
  .page--test-report .report-chart__label,
  .page--test-report .report-result__label,
  .page--progress-report .report-chart__label,
  .page--progress-report .report-result__label,
  .page--level-test-report .report-chart__label,
  .page--level-test-report .report-result__label {
    width: 130px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit-report .report-chart__label,
  .page--unit-report .report-result__label,
  .page--test-report .report-chart__label,
  .page--test-report .report-result__label,
  .page--progress-report .report-chart__label,
  .page--progress-report .report-result__label,
  .page--level-test-report .report-chart__label,
  .page--level-test-report .report-result__label {
    font-size: 17px;
    font-weight: 600;
  }
}
.page--unit-report .report-chart__item,
.page--unit-report .report-result__item,
.page--test-report .report-chart__item,
.page--test-report .report-result__item,
.page--progress-report .report-chart__item,
.page--progress-report .report-result__item,
.page--level-test-report .report-chart__item,
.page--level-test-report .report-result__item {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 15px 0;
  border-bottom: 1px dashed #8B8B8B;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit-report .report-chart__item,
  .page--unit-report .report-result__item,
  .page--test-report .report-chart__item,
  .page--test-report .report-result__item,
  .page--progress-report .report-chart__item,
  .page--progress-report .report-result__item,
  .page--level-test-report .report-chart__item,
  .page--level-test-report .report-result__item {
    gap: 12px;
    flex-direction: column;
    align-items: start !important;
    padding: 14px 0 20px;
  }
}
.page--unit-report .report-chart__item:last-child,
.page--unit-report .report-result__item:last-child,
.page--test-report .report-chart__item:last-child,
.page--test-report .report-result__item:last-child,
.page--progress-report .report-chart__item:last-child,
.page--progress-report .report-result__item:last-child,
.page--level-test-report .report-chart__item:last-child,
.page--level-test-report .report-result__item:last-child {
  border-bottom: none;
}
.page--unit-report .report-chart .grade,
.page--unit-report .report-result .grade,
.page--test-report .report-chart .grade,
.page--test-report .report-result .grade,
.page--progress-report .report-chart .grade,
.page--progress-report .report-result .grade,
.page--level-test-report .report-chart .grade,
.page--level-test-report .report-result .grade {
  align-items: center;
}
.page--unit-report .report-chart .grade__list,
.page--unit-report .report-result .grade__list,
.page--test-report .report-chart .grade__list,
.page--test-report .report-result .grade__list,
.page--progress-report .report-chart .grade__list,
.page--progress-report .report-result .grade__list,
.page--level-test-report .report-chart .grade__list,
.page--level-test-report .report-result .grade__list {
  display: flex;
  align-items: center;
  gap: 5px;
}
.page--unit-report .report-chart .grade__item.medal,
.page--unit-report .report-result .grade__item.medal,
.page--test-report .report-chart .grade__item.medal,
.page--test-report .report-result .grade__item.medal,
.page--progress-report .report-chart .grade__item.medal,
.page--progress-report .report-result .grade__item.medal,
.page--level-test-report .report-chart .grade__item.medal,
.page--level-test-report .report-result .grade__item.medal {
  width: 33px;
  height: 40px;
}
.page--unit-report .report-chart .grade__item.medal.gold,
.page--unit-report .report-result .grade__item.medal.gold,
.page--test-report .report-chart .grade__item.medal.gold,
.page--test-report .report-result .grade__item.medal.gold,
.page--progress-report .report-chart .grade__item.medal.gold,
.page--progress-report .report-result .grade__item.medal.gold,
.page--level-test-report .report-chart .grade__item.medal.gold,
.page--level-test-report .report-result .grade__item.medal.gold {
  background: url("/assets/images/icon/ic_medal-gold-35942e16ee6d3547f3ac9d18edfa45ff.png") no-repeat center center/100% auto;
}
.page--unit-report .report-chart .grade__item.medal.silver,
.page--unit-report .report-result .grade__item.medal.silver,
.page--test-report .report-chart .grade__item.medal.silver,
.page--test-report .report-result .grade__item.medal.silver,
.page--progress-report .report-chart .grade__item.medal.silver,
.page--progress-report .report-result .grade__item.medal.silver,
.page--level-test-report .report-chart .grade__item.medal.silver,
.page--level-test-report .report-result .grade__item.medal.silver {
  background: url("/assets/images/icon/ic_medal-silver-d61967a7f165a893b381cd62de362f49.png") no-repeat center center/100% auto;
}
.page--unit-report .report-chart .grade__item.medal.bronze,
.page--unit-report .report-result .grade__item.medal.bronze,
.page--test-report .report-chart .grade__item.medal.bronze,
.page--test-report .report-result .grade__item.medal.bronze,
.page--progress-report .report-chart .grade__item.medal.bronze,
.page--progress-report .report-result .grade__item.medal.bronze,
.page--level-test-report .report-chart .grade__item.medal.bronze,
.page--level-test-report .report-result .grade__item.medal.bronze {
  background: url("/assets/images/icon/ic_medal-bronze-e6e956561d17eae9a509a06625825d1c.png") no-repeat center center/100% auto;
}
.page--unit-report .report-chart .grade__item.star,
.page--unit-report .report-result .grade__item.star,
.page--test-report .report-chart .grade__item.star,
.page--test-report .report-result .grade__item.star,
.page--progress-report .report-chart .grade__item.star,
.page--progress-report .report-result .grade__item.star,
.page--level-test-report .report-chart .grade__item.star,
.page--level-test-report .report-result .grade__item.star {
  width: 25px;
  height: 24px;
}
.page--unit-report .report-chart .grade__item.star.full,
.page--unit-report .report-result .grade__item.star.full,
.page--test-report .report-chart .grade__item.star.full,
.page--test-report .report-result .grade__item.star.full,
.page--progress-report .report-chart .grade__item.star.full,
.page--progress-report .report-result .grade__item.star.full,
.page--level-test-report .report-chart .grade__item.star.full,
.page--level-test-report .report-result .grade__item.star.full {
  background: url("/assets/images/icon/ic_star-full-57b24d12889d90178808ec44d349d2c5.png") no-repeat center center/100% auto;
}
.page--unit-report .report-chart .grade__item.star.half,
.page--unit-report .report-result .grade__item.star.half,
.page--test-report .report-chart .grade__item.star.half,
.page--test-report .report-result .grade__item.star.half,
.page--progress-report .report-chart .grade__item.star.half,
.page--progress-report .report-result .grade__item.star.half,
.page--level-test-report .report-chart .grade__item.star.half,
.page--level-test-report .report-result .grade__item.star.half {
  background: url("/assets/images/icon/ic_star-half-8f9c7166d2f349e8e11798a4fb6deacc.png") no-repeat center center/100% auto;
}
.page--unit-report .report-chart .grade__item.star.empty,
.page--unit-report .report-result .grade__item.star.empty,
.page--test-report .report-chart .grade__item.star.empty,
.page--test-report .report-result .grade__item.star.empty,
.page--progress-report .report-chart .grade__item.star.empty,
.page--progress-report .report-result .grade__item.star.empty,
.page--level-test-report .report-chart .grade__item.star.empty,
.page--level-test-report .report-result .grade__item.star.empty {
  background: url("/assets/images/icon/ic_star-empty-5e8d9d14aad25164c0e2f32657bfb7c9.png") no-repeat center center/100% auto;
}
.page--unit-report .report-chart .score,
.page--unit-report .report-result .score,
.page--test-report .report-chart .score,
.page--test-report .report-result .score,
.page--progress-report .report-chart .score,
.page--progress-report .report-result .score,
.page--level-test-report .report-chart .score,
.page--level-test-report .report-result .score {
  align-items: center;
}
.page--unit-report .report-chart .score .fl-row,
.page--unit-report .report-result .score .fl-row,
.page--test-report .report-chart .score .fl-row,
.page--test-report .report-result .score .fl-row,
.page--progress-report .report-chart .score .fl-row,
.page--progress-report .report-result .score .fl-row,
.page--level-test-report .report-chart .score .fl-row,
.page--level-test-report .report-result .score .fl-row {
  gap: 10px;
  justify-content: start;
}
.page--unit-report .report-chart .score .emph-t ~ span,
.page--unit-report .report-result .score .emph-t ~ span,
.page--test-report .report-chart .score .emph-t ~ span,
.page--test-report .report-result .score .emph-t ~ span,
.page--progress-report .report-chart .score .emph-t ~ span,
.page--progress-report .report-result .score .emph-t ~ span,
.page--level-test-report .report-chart .score .emph-t ~ span,
.page--level-test-report .report-result .score .emph-t ~ span {
  font-size: 14px;
}
.page--unit-report .report-chart .emph-t,
.page--unit-report .report-result .emph-t,
.page--test-report .report-chart .emph-t,
.page--test-report .report-result .emph-t,
.page--progress-report .report-chart .emph-t,
.page--progress-report .report-result .emph-t,
.page--level-test-report .report-chart .emph-t,
.page--level-test-report .report-result .emph-t {
  font-size: 3.4rem;
  font-weight: 700;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit-report .report-chart .emph-t,
  .page--unit-report .report-result .emph-t,
  .page--test-report .report-chart .emph-t,
  .page--test-report .report-result .emph-t,
  .page--progress-report .report-chart .emph-t,
  .page--progress-report .report-result .emph-t,
  .page--level-test-report .report-chart .emph-t,
  .page--level-test-report .report-result .emph-t {
    font-size: 28px;
  }
}
.page--unit-report .report-chart .skill .fl-row,
.page--unit-report .report-result .skill .fl-row,
.page--test-report .report-chart .skill .fl-row,
.page--test-report .report-result .skill .fl-row,
.page--progress-report .report-chart .skill .fl-row,
.page--progress-report .report-result .skill .fl-row,
.page--level-test-report .report-chart .skill .fl-row,
.page--level-test-report .report-result .skill .fl-row {
  gap: 4.7rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--unit-report .report-chart .skill .fl-row,
  .page--unit-report .report-result .skill .fl-row,
  .page--test-report .report-chart .skill .fl-row,
  .page--test-report .report-result .skill .fl-row,
  .page--progress-report .report-chart .skill .fl-row,
  .page--progress-report .report-result .skill .fl-row,
  .page--level-test-report .report-chart .skill .fl-row,
  .page--level-test-report .report-result .skill .fl-row {
    gap: 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--unit-report .report-chart .skill .fl-row,
  .page--unit-report .report-result .skill .fl-row,
  .page--test-report .report-chart .skill .fl-row,
  .page--test-report .report-result .skill .fl-row,
  .page--progress-report .report-chart .skill .fl-row,
  .page--progress-report .report-result .skill .fl-row,
  .page--level-test-report .report-chart .skill .fl-row,
  .page--level-test-report .report-result .skill .fl-row {
    flex-direction: column;
  }
}
.page--unit-report .report-chart .skill .chart-container,
.page--unit-report .report-result .skill .chart-container,
.page--test-report .report-chart .skill .chart-container,
.page--test-report .report-result .skill .chart-container,
.page--progress-report .report-chart .skill .chart-container,
.page--progress-report .report-result .skill .chart-container,
.page--level-test-report .report-chart .skill .chart-container,
.page--level-test-report .report-result .skill .chart-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 320px;
  height: 230px;
  flex-shrink: 0;
}
@media (orientation: portrait) and (max-width: 800px), (orientation: landscape) and (max-width: 1100px) {
  .page--unit-report .report-chart .skill .chart-container,
  .page--unit-report .report-result .skill .chart-container,
  .page--test-report .report-chart .skill .chart-container,
  .page--test-report .report-result .skill .chart-container,
  .page--progress-report .report-chart .skill .chart-container,
  .page--progress-report .report-result .skill .chart-container,
  .page--level-test-report .report-chart .skill .chart-container,
  .page--level-test-report .report-result .skill .chart-container {
    width: 250px;
    height: 200px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit-report .report-chart .skill .chart-container,
  .page--unit-report .report-result .skill .chart-container,
  .page--test-report .report-chart .skill .chart-container,
  .page--test-report .report-result .skill .chart-container,
  .page--progress-report .report-chart .skill .chart-container,
  .page--progress-report .report-result .skill .chart-container,
  .page--level-test-report .report-chart .skill .chart-container,
  .page--level-test-report .report-result .skill .chart-container {
    width: 300px;
    height: 230px;
  }
}
.page--unit-report .report-chart .skill .chart-container canvas,
.page--unit-report .report-result .skill .chart-container canvas,
.page--test-report .report-chart .skill .chart-container canvas,
.page--test-report .report-result .skill .chart-container canvas,
.page--progress-report .report-chart .skill .chart-container canvas,
.page--progress-report .report-result .skill .chart-container canvas,
.page--level-test-report .report-chart .skill .chart-container canvas,
.page--level-test-report .report-result .skill .chart-container canvas {
  max-width: 360px;
  max-height: 360px;
}
.page--unit-report .report-chart .skill__list,
.page--unit-report .report-result .skill__list,
.page--test-report .report-chart .skill__list,
.page--test-report .report-result .skill__list,
.page--progress-report .report-chart .skill__list,
.page--progress-report .report-result .skill__list,
.page--level-test-report .report-chart .skill__list,
.page--level-test-report .report-result .skill__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}
.page--unit-report .report-chart .skill__item,
.page--unit-report .report-result .skill__item,
.page--test-report .report-chart .skill__item,
.page--test-report .report-result .skill__item,
.page--progress-report .report-chart .skill__item,
.page--progress-report .report-result .skill__item,
.page--level-test-report .report-chart .skill__item,
.page--level-test-report .report-result .skill__item {
  width: 100%;
  display: grid;
  grid-template-columns: 3fr 2fr 1.5fr;
  align-items: center;
  font-size: 1.8rem;
  padding: 10px;
  border-bottom: 1px solid #C1CAD0;
}
@media (orientation: portrait) and (max-width: 800px), (orientation: landscape) and (max-width: 1100px) {
  .page--unit-report .report-chart .skill__item,
  .page--unit-report .report-result .skill__item,
  .page--test-report .report-chart .skill__item,
  .page--test-report .report-result .skill__item,
  .page--progress-report .report-chart .skill__item,
  .page--progress-report .report-result .skill__item,
  .page--level-test-report .report-chart .skill__item,
  .page--level-test-report .report-result .skill__item {
    padding: 10px 4px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit-report .report-chart .skill__item,
  .page--unit-report .report-result .skill__item,
  .page--test-report .report-chart .skill__item,
  .page--test-report .report-result .skill__item,
  .page--progress-report .report-chart .skill__item,
  .page--progress-report .report-result .skill__item,
  .page--level-test-report .report-chart .skill__item,
  .page--level-test-report .report-result .skill__item {
    grid-template-columns: repeat(3, 1fr);
  }
}
.page--unit-report .report-chart .skill__item:last-child,
.page--unit-report .report-result .skill__item:last-child,
.page--test-report .report-chart .skill__item:last-child,
.page--test-report .report-result .skill__item:last-child,
.page--progress-report .report-chart .skill__item:last-child,
.page--progress-report .report-result .skill__item:last-child,
.page--level-test-report .report-chart .skill__item:last-child,
.page--level-test-report .report-result .skill__item:last-child {
  border: none;
}
.page--unit-report .report-chart .skill__item span,
.page--unit-report .report-result .skill__item span,
.page--test-report .report-chart .skill__item span,
.page--test-report .report-result .skill__item span,
.page--progress-report .report-chart .skill__item span,
.page--progress-report .report-result .skill__item span,
.page--level-test-report .report-chart .skill__item span,
.page--level-test-report .report-result .skill__item span {
  font-size: 1.8rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit-report .report-chart .skill__item span,
  .page--unit-report .report-result .skill__item span,
  .page--test-report .report-chart .skill__item span,
  .page--test-report .report-result .skill__item span,
  .page--progress-report .report-chart .skill__item span,
  .page--progress-report .report-result .skill__item span,
  .page--level-test-report .report-chart .skill__item span,
  .page--level-test-report .report-result .skill__item span {
    font-size: 14px;
  }
}
.page--unit-report .report-chart .skill__item .tit,
.page--unit-report .report-result .skill__item .tit,
.page--test-report .report-chart .skill__item .tit,
.page--test-report .report-result .skill__item .tit,
.page--progress-report .report-chart .skill__item .tit,
.page--progress-report .report-result .skill__item .tit,
.page--level-test-report .report-chart .skill__item .tit,
.page--level-test-report .report-result .skill__item .tit {
  font-weight: 700;
  text-align: left;
}
.page--unit-report .report-chart .skill__item .score,
.page--unit-report .report-result .skill__item .score,
.page--test-report .report-chart .skill__item .score,
.page--test-report .report-result .skill__item .score,
.page--progress-report .report-chart .skill__item .score,
.page--progress-report .report-result .skill__item .score,
.page--level-test-report .report-chart .skill__item .score,
.page--level-test-report .report-result .skill__item .score {
  text-align: center;
  align-items: baseline;
}
.page--unit-report .report-chart .skill__item .percent,
.page--unit-report .report-result .skill__item .percent,
.page--test-report .report-chart .skill__item .percent,
.page--test-report .report-result .skill__item .percent,
.page--progress-report .report-chart .skill__item .percent,
.page--progress-report .report-result .skill__item .percent,
.page--level-test-report .report-chart .skill__item .percent,
.page--level-test-report .report-result .skill__item .percent {
  text-align: center;
}
.page--unit-report .report-chart .table,
.page--unit-report .report-result .table,
.page--test-report .report-chart .table,
.page--test-report .report-result .table,
.page--progress-report .report-chart .table,
.page--progress-report .report-result .table,
.page--level-test-report .report-chart .table,
.page--level-test-report .report-result .table {
  padding: 30px 0 0;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit-report .report-chart .table,
  .page--unit-report .report-result .table,
  .page--test-report .report-chart .table,
  .page--test-report .report-result .table,
  .page--progress-report .report-chart .table,
  .page--progress-report .report-result .table,
  .page--level-test-report .report-chart .table,
  .page--level-test-report .report-result .table {
    padding: 28px 0 0;
  }
}
.page--unit-report .report-chart .unit-table,
.page--unit-report .report-result .unit-table,
.page--test-report .report-chart .unit-table,
.page--test-report .report-result .unit-table,
.page--progress-report .report-chart .unit-table,
.page--progress-report .report-result .unit-table,
.page--level-test-report .report-chart .unit-table,
.page--level-test-report .report-result .unit-table {
  width: 100%;
  border-radius: 10px 10px 0 0;
  text-align: center;
  overflow: hidden;
  /* HEADER 영역은 그대로 grid */
}
.page--unit-report .report-chart .unit-table__header,
.page--unit-report .report-result .unit-table__header,
.page--test-report .report-chart .unit-table__header,
.page--test-report .report-result .unit-table__header,
.page--progress-report .report-chart .unit-table__header,
.page--progress-report .report-result .unit-table__header,
.page--level-test-report .report-chart .unit-table__header,
.page--level-test-report .report-result .unit-table__header {
  display: grid;
  grid-template-columns: 2fr 3fr 2fr 100px 4fr;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit-report .report-chart .unit-table__header,
  .page--unit-report .report-result .unit-table__header,
  .page--test-report .report-chart .unit-table__header,
  .page--test-report .report-result .unit-table__header,
  .page--progress-report .report-chart .unit-table__header,
  .page--progress-report .report-result .unit-table__header,
  .page--level-test-report .report-chart .unit-table__header,
  .page--level-test-report .report-result .unit-table__header {
    grid-template-columns: 1.3fr 2.6fr 1fr 1.6fr 1.6fr;
  }
}
.page--unit-report .report-chart .unit-table__header .col,
.page--unit-report .report-result .unit-table__header .col,
.page--test-report .report-chart .unit-table__header .col,
.page--test-report .report-result .unit-table__header .col,
.page--progress-report .report-chart .unit-table__header .col,
.page--progress-report .report-result .unit-table__header .col,
.page--level-test-report .report-chart .unit-table__header .col,
.page--level-test-report .report-result .unit-table__header .col {
  border-right: none;
}
.page--unit-report .report-chart .unit-table__body,
.page--unit-report .report-result .unit-table__body,
.page--test-report .report-chart .unit-table__body,
.page--test-report .report-result .unit-table__body,
.page--progress-report .report-chart .unit-table__body,
.page--progress-report .report-result .unit-table__body,
.page--level-test-report .report-chart .unit-table__body,
.page--level-test-report .report-result .unit-table__body {
  display: grid;
  grid-template-columns: 2fr 3fr 2fr 100px 4fr;
  grid-auto-rows: auto;
  /* row 역할만 하고 박스로서 존재 제거 → 내부 col이 grid item이 됨 */
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit-report .report-chart .unit-table__body,
  .page--unit-report .report-result .unit-table__body,
  .page--test-report .report-chart .unit-table__body,
  .page--test-report .report-result .unit-table__body,
  .page--progress-report .report-chart .unit-table__body,
  .page--progress-report .report-result .unit-table__body,
  .page--level-test-report .report-chart .unit-table__body,
  .page--level-test-report .report-result .unit-table__body {
    grid-template-columns: 1.3fr 2.6fr 1fr 1.6fr 1.6fr;
  }
}
.page--unit-report .report-chart .unit-table__body .unit-table__row,
.page--unit-report .report-result .unit-table__body .unit-table__row,
.page--test-report .report-chart .unit-table__body .unit-table__row,
.page--test-report .report-result .unit-table__body .unit-table__row,
.page--progress-report .report-chart .unit-table__body .unit-table__row,
.page--progress-report .report-result .unit-table__body .unit-table__row,
.page--level-test-report .report-chart .unit-table__body .unit-table__row,
.page--level-test-report .report-result .unit-table__body .unit-table__row {
  display: contents;
}
.page--unit-report .report-chart .unit-table__body .unit-table__row .col,
.page--unit-report .report-result .unit-table__body .unit-table__row .col,
.page--test-report .report-chart .unit-table__body .unit-table__row .col,
.page--test-report .report-result .unit-table__body .unit-table__row .col,
.page--progress-report .report-chart .unit-table__body .unit-table__row .col,
.page--progress-report .report-result .unit-table__body .unit-table__row .col,
.page--level-test-report .report-chart .unit-table__body .unit-table__row .col,
.page--level-test-report .report-result .unit-table__body .unit-table__row .col {
  border-right: 1px solid #C1CAD0;
  border-bottom: 1px solid #C1CAD0;
  font-size: 18px;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--unit-report .report-chart .unit-table__body .unit-table__row .col,
  .page--unit-report .report-result .unit-table__body .unit-table__row .col,
  .page--test-report .report-chart .unit-table__body .unit-table__row .col,
  .page--test-report .report-result .unit-table__body .unit-table__row .col,
  .page--progress-report .report-chart .unit-table__body .unit-table__row .col,
  .page--progress-report .report-result .unit-table__body .unit-table__row .col,
  .page--level-test-report .report-chart .unit-table__body .unit-table__row .col,
  .page--level-test-report .report-result .unit-table__body .unit-table__row .col {
    font-size: 12px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .page--unit-report .report-chart .unit-table__body .unit-table__row .col,
  .page--unit-report .report-result .unit-table__body .unit-table__row .col,
  .page--test-report .report-chart .unit-table__body .unit-table__row .col,
  .page--test-report .report-result .unit-table__body .unit-table__row .col,
  .page--progress-report .report-chart .unit-table__body .unit-table__row .col,
  .page--progress-report .report-result .unit-table__body .unit-table__row .col,
  .page--level-test-report .report-chart .unit-table__body .unit-table__row .col,
  .page--level-test-report .report-result .unit-table__body .unit-table__row .col {
    font-size: 14px;
  }
}
.page--unit-report .report-chart .unit-table__body .unit-table__row .col.score,
.page--unit-report .report-result .unit-table__body .unit-table__row .col.score,
.page--test-report .report-chart .unit-table__body .unit-table__row .col.score,
.page--test-report .report-result .unit-table__body .unit-table__row .col.score,
.page--progress-report .report-chart .unit-table__body .unit-table__row .col.score,
.page--progress-report .report-result .unit-table__body .unit-table__row .col.score,
.page--level-test-report .report-chart .unit-table__body .unit-table__row .col.score,
.page--level-test-report .report-result .unit-table__body .unit-table__row .col.score {
  font-weight: 500;
}
.page--unit-report .report-chart .unit-table__body .unit-table__row .col.progress,
.page--unit-report .report-result .unit-table__body .unit-table__row .col.progress,
.page--test-report .report-chart .unit-table__body .unit-table__row .col.progress,
.page--test-report .report-result .unit-table__body .unit-table__row .col.progress,
.page--progress-report .report-chart .unit-table__body .unit-table__row .col.progress,
.page--progress-report .report-result .unit-table__body .unit-table__row .col.progress,
.page--level-test-report .report-chart .unit-table__body .unit-table__row .col.progress,
.page--level-test-report .report-result .unit-table__body .unit-table__row .col.progress {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  border-right: none;
  padding: 0 20px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit-report .report-chart .unit-table__body .unit-table__row .col.progress,
  .page--unit-report .report-result .unit-table__body .unit-table__row .col.progress,
  .page--test-report .report-chart .unit-table__body .unit-table__row .col.progress,
  .page--test-report .report-result .unit-table__body .unit-table__row .col.progress,
  .page--progress-report .report-chart .unit-table__body .unit-table__row .col.progress,
  .page--progress-report .report-result .unit-table__body .unit-table__row .col.progress,
  .page--level-test-report .report-chart .unit-table__body .unit-table__row .col.progress,
  .page--level-test-report .report-result .unit-table__body .unit-table__row .col.progress {
    justify-content: center;
    padding: 0;
  }
}
.page--unit-report .report-chart .unit-table__body .unit-table__row .col.progress b,
.page--unit-report .report-result .unit-table__body .unit-table__row .col.progress b,
.page--test-report .report-chart .unit-table__body .unit-table__row .col.progress b,
.page--test-report .report-result .unit-table__body .unit-table__row .col.progress b,
.page--progress-report .report-chart .unit-table__body .unit-table__row .col.progress b,
.page--progress-report .report-result .unit-table__body .unit-table__row .col.progress b,
.page--level-test-report .report-chart .unit-table__body .unit-table__row .col.progress b,
.page--level-test-report .report-result .unit-table__body .unit-table__row .col.progress b {
  display: inline-block;
  width: 40px;
  color: #8B8B8B;
  text-align: right;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit-report .report-chart .unit-table__body .unit-table__row .col.progress b,
  .page--unit-report .report-result .unit-table__body .unit-table__row .col.progress b,
  .page--test-report .report-chart .unit-table__body .unit-table__row .col.progress b,
  .page--test-report .report-result .unit-table__body .unit-table__row .col.progress b,
  .page--progress-report .report-chart .unit-table__body .unit-table__row .col.progress b,
  .page--progress-report .report-result .unit-table__body .unit-table__row .col.progress b,
  .page--level-test-report .report-chart .unit-table__body .unit-table__row .col.progress b,
  .page--level-test-report .report-result .unit-table__body .unit-table__row .col.progress b {
    text-align: center;
  }
}
.page--unit-report .report-chart .unit-table__body .unit-table__row .col.progress.on .activity-progress,
.page--unit-report .report-result .unit-table__body .unit-table__row .col.progress.on .activity-progress,
.page--test-report .report-chart .unit-table__body .unit-table__row .col.progress.on .activity-progress,
.page--test-report .report-result .unit-table__body .unit-table__row .col.progress.on .activity-progress,
.page--progress-report .report-chart .unit-table__body .unit-table__row .col.progress.on .activity-progress,
.page--progress-report .report-result .unit-table__body .unit-table__row .col.progress.on .activity-progress,
.page--level-test-report .report-chart .unit-table__body .unit-table__row .col.progress.on .activity-progress,
.page--level-test-report .report-result .unit-table__body .unit-table__row .col.progress.on .activity-progress {
  background: rgba(0, 154, 133, 0.12);
}
.page--unit-report .report-chart .unit-table__body .unit-table__row .col.progress.on b,
.page--unit-report .report-result .unit-table__body .unit-table__row .col.progress.on b,
.page--test-report .report-chart .unit-table__body .unit-table__row .col.progress.on b,
.page--test-report .report-result .unit-table__body .unit-table__row .col.progress.on b,
.page--progress-report .report-chart .unit-table__body .unit-table__row .col.progress.on b,
.page--progress-report .report-result .unit-table__body .unit-table__row .col.progress.on b,
.page--level-test-report .report-chart .unit-table__body .unit-table__row .col.progress.on b,
.page--level-test-report .report-result .unit-table__body .unit-table__row .col.progress.on b {
  color: #232323;
}
.page--unit-report .report-chart .unit-table__body .unit-table__row .col.progress .activity-progress,
.page--unit-report .report-result .unit-table__body .unit-table__row .col.progress .activity-progress,
.page--test-report .report-chart .unit-table__body .unit-table__row .col.progress .activity-progress,
.page--test-report .report-result .unit-table__body .unit-table__row .col.progress .activity-progress,
.page--progress-report .report-chart .unit-table__body .unit-table__row .col.progress .activity-progress,
.page--progress-report .report-result .unit-table__body .unit-table__row .col.progress .activity-progress,
.page--level-test-report .report-chart .unit-table__body .unit-table__row .col.progress .activity-progress,
.page--level-test-report .report-result .unit-table__body .unit-table__row .col.progress .activity-progress {
  width: 100%;
  max-width: 180px;
  height: 8px;
  background: #E4E4E4;
  position: relative;
  border-radius: 2px;
  margin-right: 9px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit-report .report-chart .unit-table__body .unit-table__row .col.progress .activity-progress,
  .page--unit-report .report-result .unit-table__body .unit-table__row .col.progress .activity-progress,
  .page--test-report .report-chart .unit-table__body .unit-table__row .col.progress .activity-progress,
  .page--test-report .report-result .unit-table__body .unit-table__row .col.progress .activity-progress,
  .page--progress-report .report-chart .unit-table__body .unit-table__row .col.progress .activity-progress,
  .page--progress-report .report-result .unit-table__body .unit-table__row .col.progress .activity-progress,
  .page--level-test-report .report-chart .unit-table__body .unit-table__row .col.progress .activity-progress,
  .page--level-test-report .report-result .unit-table__body .unit-table__row .col.progress .activity-progress {
    display: none;
  }
}
.page--unit-report .report-chart .unit-table__body .unit-table__row .col.progress .activity-progress .progress-bar,
.page--unit-report .report-result .unit-table__body .unit-table__row .col.progress .activity-progress .progress-bar,
.page--test-report .report-chart .unit-table__body .unit-table__row .col.progress .activity-progress .progress-bar,
.page--test-report .report-result .unit-table__body .unit-table__row .col.progress .activity-progress .progress-bar,
.page--progress-report .report-chart .unit-table__body .unit-table__row .col.progress .activity-progress .progress-bar,
.page--progress-report .report-result .unit-table__body .unit-table__row .col.progress .activity-progress .progress-bar,
.page--level-test-report .report-chart .unit-table__body .unit-table__row .col.progress .activity-progress .progress-bar,
.page--level-test-report .report-result .unit-table__body .unit-table__row .col.progress .activity-progress .progress-bar {
  height: 100%;
  background: #009A85;
  border-radius: 2px;
  position: absolute;
  left: 0;
}
.page--unit-report .report-chart .unit-table .col,
.page--unit-report .report-result .unit-table .col,
.page--test-report .report-chart .unit-table .col,
.page--test-report .report-result .unit-table .col,
.page--progress-report .report-chart .unit-table .col,
.page--progress-report .report-result .unit-table .col,
.page--level-test-report .report-chart .unit-table .col,
.page--level-test-report .report-result .unit-table .col {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-height: 49px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit-report .report-chart .unit-table .col,
  .page--unit-report .report-result .unit-table .col,
  .page--test-report .report-chart .unit-table .col,
  .page--test-report .report-result .unit-table .col,
  .page--progress-report .report-chart .unit-table .col,
  .page--progress-report .report-result .unit-table .col,
  .page--level-test-report .report-chart .unit-table .col,
  .page--level-test-report .report-result .unit-table .col {
    min-height: 43px;
  }
}
.page--unit-report .report-chart .unit-table .col.cate,
.page--unit-report .report-result .unit-table .col.cate,
.page--test-report .report-chart .unit-table .col.cate,
.page--test-report .report-result .unit-table .col.cate,
.page--progress-report .report-chart .unit-table .col.cate,
.page--progress-report .report-result .unit-table .col.cate,
.page--level-test-report .report-chart .unit-table .col.cate,
.page--level-test-report .report-result .unit-table .col.cate {
  font-size: 17px;
  font-weight: 700;
  color: #009A85;
  background: #CDEAE6;
  border-right: 1px solid #C1CAD0;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit-report .report-chart .unit-table .col.cate,
  .page--unit-report .report-result .unit-table .col.cate,
  .page--test-report .report-chart .unit-table .col.cate,
  .page--test-report .report-result .unit-table .col.cate,
  .page--progress-report .report-chart .unit-table .col.cate,
  .page--progress-report .report-result .unit-table .col.cate,
  .page--level-test-report .report-chart .unit-table .col.cate,
  .page--level-test-report .report-result .unit-table .col.cate {
    font-size: 14px;
  }
}
.page--unit-report .report-chart .unit-table .col.cate:last-child,
.page--unit-report .report-result .unit-table .col.cate:last-child,
.page--test-report .report-chart .unit-table .col.cate:last-child,
.page--test-report .report-result .unit-table .col.cate:last-child,
.page--progress-report .report-chart .unit-table .col.cate:last-child,
.page--progress-report .report-result .unit-table .col.cate:last-child,
.page--level-test-report .report-chart .unit-table .col.cate:last-child,
.page--level-test-report .report-result .unit-table .col.cate:last-child {
  border-right: none;
}
.page--unit-report .report-chart .unit-table .col.section,
.page--unit-report .report-result .unit-table .col.section,
.page--test-report .report-chart .unit-table .col.section,
.page--test-report .report-result .unit-table .col.section,
.page--progress-report .report-chart .unit-table .col.section,
.page--progress-report .report-result .unit-table .col.section,
.page--level-test-report .report-chart .unit-table .col.section,
.page--level-test-report .report-result .unit-table .col.section {
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  color: #232323;
}
@media (orientation: portrait) and (max-width: 800px), (orientation: landscape) and (max-width: 1100px) {
  .page--unit-report .report-chart .unit-table .col.section,
  .page--unit-report .report-result .unit-table .col.section,
  .page--test-report .report-chart .unit-table .col.section,
  .page--test-report .report-result .unit-table .col.section,
  .page--progress-report .report-chart .unit-table .col.section,
  .page--progress-report .report-result .unit-table .col.section,
  .page--level-test-report .report-chart .unit-table .col.section,
  .page--level-test-report .report-result .unit-table .col.section {
    padding: 0 8px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit-report .report-chart .unit-table .col.section,
  .page--unit-report .report-result .unit-table .col.section,
  .page--test-report .report-chart .unit-table .col.section,
  .page--test-report .report-result .unit-table .col.section,
  .page--progress-report .report-chart .unit-table .col.section,
  .page--progress-report .report-result .unit-table .col.section,
  .page--level-test-report .report-chart .unit-table .col.section,
  .page--level-test-report .report-result .unit-table .col.section {
    padding: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--unit-report .report-chart .unit-table .col.section,
  .page--unit-report .report-result .unit-table .col.section,
  .page--test-report .report-chart .unit-table .col.section,
  .page--test-report .report-result .unit-table .col.section,
  .page--progress-report .report-chart .unit-table .col.section,
  .page--progress-report .report-result .unit-table .col.section,
  .page--level-test-report .report-chart .unit-table .col.section,
  .page--level-test-report .report-result .unit-table .col.section {
    font-size: 12px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .page--unit-report .report-chart .unit-table .col.section,
  .page--unit-report .report-result .unit-table .col.section,
  .page--test-report .report-chart .unit-table .col.section,
  .page--test-report .report-result .unit-table .col.section,
  .page--progress-report .report-chart .unit-table .col.section,
  .page--progress-report .report-result .unit-table .col.section,
  .page--level-test-report .report-chart .unit-table .col.section,
  .page--level-test-report .report-result .unit-table .col.section {
    font-size: 14px;
  }
}
.page--unit-report .report-chart .unit-table .grid-col-2,
.page--unit-report .report-chart .unit-table .corner,
.page--unit-report .report-result .unit-table .grid-col-2,
.page--unit-report .report-result .unit-table .corner,
.page--test-report .report-chart .unit-table .grid-col-2,
.page--test-report .report-chart .unit-table .corner,
.page--test-report .report-result .unit-table .grid-col-2,
.page--test-report .report-result .unit-table .corner,
.page--progress-report .report-chart .unit-table .grid-col-2,
.page--progress-report .report-chart .unit-table .corner,
.page--progress-report .report-result .unit-table .grid-col-2,
.page--progress-report .report-result .unit-table .corner,
.page--level-test-report .report-chart .unit-table .grid-col-2,
.page--level-test-report .report-chart .unit-table .corner,
.page--level-test-report .report-result .unit-table .grid-col-2,
.page--level-test-report .report-result .unit-table .corner {
  border-right: 1px solid #009A85 !important;
}
.page--unit-report .btn-view,
.page--test-report .btn-view,
.page--progress-report .btn-view,
.page--level-test-report .btn-view {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: auto;
  padding: 8px 14px;
  margin-left: auto;
  font-size: 16px;
  font-weight: 500;
  color: #8F9295;
  border: 1px solid #D7DBDC;
  border-radius: 6px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
}
.page--unit-report .btn-view .icon,
.page--test-report .btn-view .icon,
.page--progress-report .btn-view .icon,
.page--level-test-report .btn-view .icon {
  width: 22px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_report-view-32f698d98905306663b2cc87ec9bd40e.png") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit-report .btn-view,
  .page--test-report .btn-view,
  .page--progress-report .btn-view,
  .page--level-test-report .btn-view {
    font-size: 13px;
  }
}

.page--test-report .report__wrapper .report__section {
  border: none;
}
.page--test-report .report__info {
  padding-bottom: 0;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--test-report .report__info {
    padding: 0;
  }
}

.is-teacher .emph-t {
  color: #0072BC;
}
.is-teacher .teacher .main-tit {
  margin-bottom: 4rem !important;
  position: relative;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .teacher .main-tit {
    margin-top: 0px !important;
    margin-bottom: 32px !important;
  }
}
.is-teacher .teacher .main-tit h2 {
  text-align: center;
}
.is-teacher .teacher-con__body .table-info__search {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.is-teacher .teacher-con__body .table-info__search .search-box {
  background: #F2F7FA;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .teacher-con__body .table-info.is-active .custom-select--table {
    display: block !important;
    opacity: 1 !important;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .teacher-con__body .table-info.is-active .custom-select--table ~ .search-box {
    padding-left: 140px;
  }
}
.is-teacher .teacher-con__body .table-info.is-active .search-box {
  height: 40px;
  background: #fff;
  border: 1px solid #D7DBDC;
  box-shadow: none;
}
.is-teacher .teacher-con__body .table-info.is-active .search-box input {
  height: 100%;
}
.is-teacher .page--unit-report .report-chart .unit-table .col.cate {
  background: #ECF7FF;
  color: #0072BC;
}
.is-teacher .page--unit-report .report-chart .unit-table .col.cate.grid-col-2 {
  border-right: 1px solid #0072BC !important;
}
.is-teacher .page--unit-report .report-chart .unit-table .corner {
  border-right: 1px solid #0072BC !important;
}
.is-teacher .page--unit-report .report-chart .unit-table__body .unit-table__row .col.progress.on .activity-progress {
  background: rgba(0, 114, 188, 0.12);
}
.is-teacher .page--unit-report .report-chart .unit-table__body .unit-table__row .col.progress.on .activity-progress .progress-bar {
  background: #0072BC;
}

.page--progress-report .unit-nav {
  display: none;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--progress-report .unit-nav {
    display: flex;
    padding-top: 42px;
  }
  .page--progress-report .unit-nav .unit-title {
    color: #0072BC;
  }
}
.page--progress-report .report__wrapper .report__section {
  border: none;
}
.page--progress-report .report__info {
  padding-bottom: 10px;
}
.page--progress-report .chart-container {
  padding-bottom: 52px;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .page--progress-report .chart-container {
    padding-bottom: 42px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--progress-report .chart-container {
    padding-bottom: 20px;
    border-bottom: 1px dashed #8B8B8B;
  }
}
.page--progress-report section.report-comment {
  padding-top: 30px;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .page--progress-report section.report-comment {
    padding-top: 44px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--progress-report section.report-comment {
    padding-top: 14px;
  }
}
.page--progress-report section.report-comment h5 {
  max-width: 180px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--progress-report section.report-comment h5 {
    max-width: 100%;
  }
}
.page--progress-report section.report-comment .comment {
  width: 100%;
}
.page--progress-report section.report-comment .comment__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-bottom: 36px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--progress-report section.report-comment .comment__list {
    gap: 0;
  }
}
.page--progress-report section.report-comment .comment__item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 15px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--progress-report section.report-comment .comment__item {
    padding: 7px 0;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--progress-report section.report-comment .comment__item {
    flex-direction: column;
    align-items: start;
    gap: 7px;
  }
}
.page--progress-report section.report-comment .comment__item--label {
  width: 110px;
  flex-shrink: 0;
  font-size: 2.1rem;
}
.page--progress-report section.report-comment .comment__item--select {
  width: 100%;
  margin: 0 !important;
}
.page--progress-report section.report-comment .comment .btn--save {
  margin-top: 10px;
  margin-left: auto;
}
.page--progress-report .report-chart__tit {
  display: flex;
  justify-content: space-between;
  padding: 42px 0 20px;
  margin-bottom: 20px;
}
.page--progress-report .report-chart__tit h5 {
  text-align: left;
  padding: 0;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--progress-report .report-chart__tit {
    flex-direction: column;
    gap: 12px;
  }
  .page--progress-report .report-chart__tit h5 {
    text-align: center;
  }
}
.page--progress-report .overview-table .col {
  text-align: center;
}
.page--progress-report .overview-table__header, .page--progress-report .overview-table__row {
  display: grid;
  grid-template-columns: 2.2fr 2.2fr 1.5fr 3.5fr;
}
.page--progress-report .overview-table__header {
  font-size: 21px;
  font-weight: 700;
  line-height: normal;
  color: #232323;
  border-bottom: 1px solid #8B8B8B;
  padding: 7.7rem 0 11px;
}
.page--progress-report .overview-table__body {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #232323;
}
.page--progress-report .overview-table__row {
  border-bottom: 1px dashed #8B8B8B;
}
.page--progress-report .overview-table__row:last-child {
  border: none;
}
.page--progress-report .overview-table__row .col {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.page--progress-report .overview-table__row .fl-col {
  flex-direction: column;
}
.page--progress-report .overview-table__row > .score {
  gap: 10px;
}
.page--progress-report .overview-table__row .unit {
  font-size: 3rem;
  font-weight: 700;
  line-height: normal;
  color: #232323;
  color: #0072BC;
}
.page--progress-report .overview-table__row .grade {
  gap: 5px;
}
.page--progress-report .overview-table__row .grade ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.page--progress-report .overview-table__row .grade .medal {
  width: 76px;
  height: 92px;
}
.page--progress-report .report-chart.report-table.is-mobile-portrait .fl-row {
  padding: 0;
  margin-bottom: 0;
}
.page--progress-report .report-chart.report-table.is-mobile-portrait .report-chart__item.score {
  padding: 14px 0;
}
.page--progress-report .report-comment .fl-row {
  align-items: start;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--progress-report .report-comment .fl-row {
    flex-direction: column;
    gap: 28px;
  }
}
.page--progress-report .report-comment textarea {
  font-size: 21px;
  padding: 20px;
  border-radius: 4px;
  border: 1px solid #D6D6D6;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--progress-report .report-comment textarea {
    min-height: 74px;
    font-size: 14px;
    padding: 18px 14px;
  }
}

@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .report__wrapper {
    padding: 0;
  }
}
.is-teacher .emph-t {
  color: #0072BC;
}

.page--level-test-report .report__wrapper .report__section {
  border: none;
}
.page--level-test-report .report-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.page--level-test-report .report-header__logo {
  width: 167px;
  margin: 0 auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--level-test-report .report-header__logo {
    width: 112px;
  }
}
.page--level-test-report .report-header__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-items: end;
  gap: 10px;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: normal;
  color: #232323;
  color: #8B8B8B;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--level-test-report .report-header__info {
    gap: 8px;
    align-items: start;
  }
}
.page--level-test-report .report-header__info-item {
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  gap: 15px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--level-test-report .report-header__info-item {
    gap: 8px;
    justify-content: left;
  }
}
.page--level-test-report .report-header__info strong {
  color: #232323;
  font-weight: 400;
}
.page--level-test-report .overall-score__main {
  padding: 6rem 12rem 3rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--level-test-report .overall-score__main {
    padding: 20px 0;
  }
}
.page--level-test-report .overall-score__table {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background: #F4F4F4;
  border-radius: 20px;
  border: 1px solid #D6D6D6;
  padding: 28px 30px 20px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--level-test-report .overall-score__table {
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
  }
}
.page--level-test-report .overall-score__value {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.page--level-test-report .overall-score__value .label {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: normal;
  color: #232323;
}
.page--level-test-report .overall-score__value .label .icon {
  width: 16px;
  aspect-ratio: 1;
  border-radius: 50%;
}
.page--level-test-report .overall-score__value .score {
  font-size: 8rem;
  font-weight: 900;
  line-height: normal;
  color: #232323;
  color: #FF9800;
}
.page--level-test-report .overall-score__legend {
  width: 183px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.page--level-test-report .overall-score__legend li {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 16px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--level-test-report .overall-score__legend li {
    font-size: 14px;
  }
}
.page--level-test-report .overall-score__legend li .icon {
  display: inline-block;
}
.page--level-test-report .overall-score__legend .q1 .label {
  color: #F44336;
}
.page--level-test-report .overall-score__legend .q2 .label {
  color: #FF9800;
}
.page--level-test-report .overall-score__legend .q3 .label {
  color: #4CAF50;
}
.page--level-test-report .overall-score__legend .q4 .label {
  color: #009A85;
}
.page--level-test-report .overall-score__legend .q1 .icon {
  background: #F44336;
}
.page--level-test-report .overall-score__legend .q2 .icon {
  background: #FF9800;
}
.page--level-test-report .overall-score__legend .q3 .icon {
  background: #4CAF50;
}
.page--level-test-report .overall-score__legend .q4 .icon {
  background: #009A85;
}
.page--level-test-report .overall-score__result {
  text-align: center;
  font-size: 2.1rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--level-test-report .overall-score__result {
    font-size: 15px;
  }
}
.page--level-test-report .overall-score__result b,
.page--level-test-report .overall-score__result .next-quest {
  color: #FF9800;
  font-size: 3.4rem;
  vertical-align: sub;
  margin: 0 4px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--level-test-report .overall-score__result b,
  .page--level-test-report .overall-score__result .next-quest {
    vertical-align: middle;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--level-test-report .overall-score__result b,
  .page--level-test-report .overall-score__result .next-quest {
    font-size: 21px;
  }
}
.page--level-test-report .report-chart.category-score {
  padding: 6rem 0;
}
.page--level-test-report .report-chart .report-chart__label {
  width: 100%;
  margin-bottom: 45px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--level-test-report .report-chart .report-chart__label {
    margin-bottom: 40px;
  }
}
.page--level-test-report .report-chart .category-score__list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--level-test-report .report-chart .category-score__list {
    max-width: 300px;
    justify-content: center;
    gap: 20px 0;
    margin: 0 auto;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--level-test-report .report-chart .category-score__list {
    flex-wrap: wrap;
  }
}
.page--level-test-report .report-chart .score-circle {
  position: relative;
  width: 100px;
  height: 100px;
  aspect-ratio: 1/1;
}
.page--level-test-report .report-chart .score-circle canvas {
  width: 80% !important;
  height: 80% !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.page--level-test-report .report-chart .label {
  display: block;
  font-size: 14px;
  color: #5E5E5E;
  margin-bottom: 6px;
  text-align: center;
}
.page--level-test-report .report-chart .score-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page--level-test-report .report-chart .score-center strong {
  font-size: 2.4rem;
  font-weight: 700;
  color: #232323;
}
.page--level-test-report .report-chart .score-sub {
  margin-top: 6px;
  font-size: 16px;
  color: #99A1AF;
  text-align: center;
}
.page--level-test-report .report-chart .graph-chart {
  height: 264px;
  margin-top: 20px;
}
.page--level-test-report .report-chart__item.results {
  border-top: 1px dashed #8B8B8B;
}
.page--level-test-report .btn-con {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}
.page--level-test-report .btn-con .btn {
  height: 50px;
  padding: 11px 28px;
  border-radius: 100px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--level-test-report .report-chart__label {
    width: 80px;
  }
}
.page--level-test-report .test-table {
  width: 100%;
  display: grid;
  grid-template-columns: 100px 1fr;
  /* 헤더: 4쌍 */
  /* 데이터도 동일하게 */
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--level-test-report .test-table {
    grid-template-columns: 80px 1fr;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--level-test-report .test-table {
    display: flex;
    flex-direction: column;
  }
}
.page--level-test-report .test-table .col {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 18px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--level-test-report .test-table .col {
    font-size: 14px;
  }
}
.page--level-test-report .test-table .col.no {
  min-height: 45px;
  border-bottom: 1px solid #C1CAD0;
}
.page--level-test-report .test-table .col.result {
  min-height: 54px;
  border-bottom: 1px solid #8B8B8B;
}
.page--level-test-report .test-table .test-table__header {
  display: flex;
  flex-direction: column;
}
.page--level-test-report .test-table .pc-only {
  display: block;
}
.page--level-test-report .test-table .test-table__body {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}
.page--level-test-report .test-table .test-table__body .result-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.page--level-test-report .test-table .test-table__body .cate {
  width: 100%;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--level-test-report .test-table {
    /* ===== HEADER ===== */
    /* ===== DATA ===== */
  }
  .page--level-test-report .test-table .test-table__header {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* No / Result | No / Result */
    border-bottom: 1px solid #ddd;
    /* PC 전용 헤더 숨김 */
  }
  .page--level-test-report .test-table .test-table__header .pc-only {
    display: none !important;
  }
  .page--level-test-report .test-table .result-header li {
    font-weight: 600;
    font-size: 13px;
    padding: 6px 0;
    text-align: center;
  }
  .page--level-test-report .test-table .test-table__body {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 2쌍 */
  }
  .page--level-test-report .test-table .result-item {
    display: contents;
  }
}
.page--level-test-report .test-table .correct .result {
  background: url("/assets/images/icon/ic_report-correct-4414f68dc845a33c4f1193b87aaea692.png") no-repeat center center/24px auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--level-test-report .test-table .correct .result {
    background-size: 20px;
  }
}
.page--level-test-report .test-table .incorrect .result {
  background: url("/assets/images/icon/ic_report-incorrect-a4fd7642a4e8e6272861d3c5477579f6.png") no-repeat center center/24px auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--level-test-report .test-table .incorrect .result {
    background-size: 20px;
  }
}

.page--level-test-report .test-table,
.page--test-report .test-table {
  width: 100%;
  display: grid;
  grid-template-columns: 100px 1fr;
  /* 헤더: 4쌍 */
  /* 데이터도 동일하게 */
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--level-test-report .test-table,
  .page--test-report .test-table {
    grid-template-columns: 80px 1fr;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--level-test-report .test-table,
  .page--test-report .test-table {
    display: flex;
    flex-direction: column;
  }
}
.page--level-test-report .test-table .col,
.page--test-report .test-table .col {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 18px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--level-test-report .test-table .col,
  .page--test-report .test-table .col {
    font-size: 14px;
  }
}
.page--level-test-report .test-table .col.no,
.page--test-report .test-table .col.no {
  min-height: 45px;
  border-bottom: 1px solid #C1CAD0;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--level-test-report .test-table .col.no,
  .page--test-report .test-table .col.no {
    border-bottom: none;
  }
}
.page--level-test-report .test-table .col.result,
.page--test-report .test-table .col.result {
  min-height: 54px;
  border-bottom: 1px solid #8B8B8B;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--level-test-report .test-table .col.result,
  .page--test-report .test-table .col.result {
    border-bottom: none;
  }
}
.page--level-test-report .test-table .col.cate,
.page--test-report .test-table .col.cate {
  font-weight: 700;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--level-test-report .test-table .col.cate,
  .page--test-report .test-table .col.cate {
    border-bottom: 1px solid #8B8B8B;
    font-weight: 600;
  }
  .page--level-test-report .test-table .col.cate:nth-child(2),
  .page--test-report .test-table .col.cate:nth-child(2) {
    border-right: 1px solid #8B8B8B;
  }
  .page--level-test-report .test-table .col.cate:nth-child(5), .page--level-test-report .test-table .col.cate:nth-child(6),
  .page--test-report .test-table .col.cate:nth-child(5),
  .page--test-report .test-table .col.cate:nth-child(6) {
    display: none !important;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--level-test-report .test-table .result-item:nth-child(2n+1) .result,
  .page--test-report .test-table .result-item:nth-child(2n+1) .result {
    border-right: 1px solid #8B8B8B;
  }
}
.page--level-test-report .test-table .test-table__header,
.page--test-report .test-table .test-table__header {
  display: flex;
  flex-direction: column;
}
.page--level-test-report .test-table .test-table__body,
.page--test-report .test-table .test-table__body {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}
.page--level-test-report .test-table .result-item,
.page--test-report .test-table .result-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.page--level-test-report .test-table .cate,
.page--test-report .test-table .cate {
  width: 100%;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--level-test-report .test-table,
  .page--test-report .test-table {
    /* ===== HEADER ===== */
    /* ===== DATA ===== */
  }
  .page--level-test-report .test-table .test-table__header,
  .page--test-report .test-table .test-table__header {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* No Result | No Result */
    border-bottom: 1px solid #ddd;
    /* PC 전용 헤더 숨김 */
  }
  .page--level-test-report .test-table .test-table__header .pc-only,
  .page--test-report .test-table .test-table__header .pc-only {
    display: none !important;
  }
  .page--level-test-report .test-table .result-header li,
  .page--test-report .test-table .result-header li {
    font-weight: 600;
    font-size: 13px;
    padding: 6px 0;
    text-align: center;
  }
  .page--level-test-report .test-table .test-table__body,
  .page--test-report .test-table .test-table__body {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 2쌍 */
  }
  .page--level-test-report .test-table .result-item,
  .page--test-report .test-table .result-item {
    display: contents;
  }
}

.correct .result,
.test-result.correct {
  background: url("/assets/images/icon/ic_report-correct-4414f68dc845a33c4f1193b87aaea692.png") no-repeat center center/24px auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .correct .result,
  .test-result.correct {
    background-size: 20px;
  }
}

.incorrect .result,
.test-result.incorrect {
  background: url("/assets/images/icon/ic_report-incorrect-a4fd7642a4e8e6272861d3c5477579f6.png") no-repeat center center/24px auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .incorrect .result,
  .test-result.incorrect {
    background-size: 20px;
  }
}

.is-teacher .page--resources .select-con__item {
  background: #D9F1FD;
  box-shadow: 2px 2px 8px rgba(83, 94, 98, 0.35);
}
@media (hover: hover) and (pointer: fine) {
  .is-teacher .page--resources .select-con__item:hover {
    outline-color: #0072BC;
    box-shadow: 2px 2px 8px rgba(0, 114, 188, 0.68);
  }
}
@media (hover: none) and (pointer: coarse) {
  .is-teacher .page--resources .select-con__item:active {
    outline-color: #0072BC;
    box-shadow: 2px 2px 8px rgba(0, 114, 188, 0.68);
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .page--resources .select-con__item {
    box-shadow: 2px 2px 8px rgba(83, 94, 98, 0.25);
  }
}
.is-teacher .page--resources .select-con__item:nth-child(1) .icon {
  background: url("/assets/images/icon/ic_plan-t-db7493b90254e28f527173ae61d57148.png") no-repeat bottom right/100% auto;
}
.is-teacher .page--resources .select-con__item:nth-child(2) .icon {
  background: url("/assets/images/icon/ic_mp3-t-03edc056deff648e3ea10481877df340.png") no-repeat bottom right/100% auto;
}
.is-teacher .page--resources .select-con__item:nth-child(3) .icon {
  background: url("/assets/images/icon/ic_song-chant-a902485dc2db40b4fe27033950107e73.png") no-repeat bottom right/100% auto;
}
.is-teacher .page--resources .select-con__item:nth-child(4) .icon {
  background: url("/assets/images/icon/ic_word-list-t-e5608c01afdc8734dc6086903fd79912.png") no-repeat bottom right/100% auto;
}
.is-teacher .page--resources .select-con__item:nth-child(5) .icon {
  background: url("/assets/images/icon/ic_flashcard-5fd2e087b8d4d814806e92d8cc4ba18e.png") no-repeat bottom right/100% auto;
}
.is-teacher .page--resources .select-con__item:nth-child(6) .icon {
  background: url("/assets/images/icon/ic_ebook-4b6d9cd845e0d904c0ff9d13e5b8667f.png") no-repeat bottom right/100% auto;
}
.is-teacher .page--resources .select-con__item:nth-child(7) .icon {
  background: url("/assets/images/icon/ic_ppt-t-74f0abd56255f67835569739ea1fb9b5.png") no-repeat bottom right/100% auto;
}
.is-teacher .page--resources .select-con__item:nth-child(8) .icon {
  background: url("/assets/images/icon/ic_test-460fceb61426aa157c1b93dcf3120884.png") no-repeat bottom right/100% auto;
}
.is-teacher .page--resources .select-con__item:nth-child(9) .icon {
  background: url("/assets/images/icon/ic_key-9536a70946b2d3032989f5bd8fac26a0.png") no-repeat bottom right/100% auto;
}
.is-teacher .page--resources .select-con__item:nth-child(10) .icon {
  background: url("/assets/images/icon/ic_certificate-t-9f3c933f47bccdca3f1c009239d7f80a.png") no-repeat bottom right/100% auto;
}
.is-teacher .page--resources .select-con__item:nth-child(11) .icon {
  background: url("/assets/images/icon/ic_listening-script-b2079cbc7ca8c969e8b7f457314d8554.png") no-repeat bottom right/100% auto;
}
.is-teacher .page--resources .select-con__item:nth-child(12) .icon {
  background: url("/assets/images/icon/ic_worksheet-t-11f3f56f2117a10a6a283950c4fda39f.png") no-repeat bottom right/100% auto;
}

.level-resources .teacher-con__tit {
  margin-bottom: 78px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .level-resources .teacher-con__tit {
    margin-bottom: 32px;
  }
}
.level-resources .teacher-con__tit p {
  font-size: 3rem;
  font-weight: 600;
  line-height: normal;
  color: #232323;
  text-align: center;
  color: #8B8B8B;
}
.level-resources .select-con__list {
  max-width: 1440px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  padding-top: 10px;
  margin: 0 auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .level-resources .select-con__list {
    flex-wrap: wrap;
    padding-top: 0;
    max-width: 800px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .level-resources .select-con__list {
    gap: 36px 25px;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .level-resources .select-con__list {
    gap: 36px 48px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .level-resources .select-con__list {
    max-width: 600px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .level-resources .select-con__item {
    max-width: 200px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .level-resources .select-con__item {
    width: calc((100% - 50px) / 3);
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .level-resources .select-con__item {
    width: calc((100% - 96px) / 3);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .level-resources .select-con__item {
    width: calc((100% - 25px) / 2);
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .level-resources .select-con__item {
    max-width: 135px;
  }
}
.level-resources .select-con__item > a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .level-resources .select-con__item > a {
    gap: 20px;
  }
}
.level-resources .select-con__item .img-con {
  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  overflow: hidden;
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: all 0.3s ease;
}
.level-resources .select-con__item .img-con img {
  width: 100%;
}
.level-resources .select-con__item .level-logo {
  width: 161px;
  aspect-ratio: 161/50;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .level-resources .select-con__item .level-logo {
    width: 80%;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .level-resources .select-con__item .level-logo {
    width: 100%;
    max-width: 128px;
  }
}
@media (hover: hover) and (pointer: fine) {
  .level-resources .select-con__item:hover .img-con {
    outline-color: #417F70;
    transform: translateY(-10px);
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.42);
  }
}
@media (hover: none) and (pointer: coarse) {
  .level-resources .select-con__item:active .img-con {
    outline-color: #417F70;
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.42);
  }
}

.teacher-con,
.notice-con,
.qna-con {
  max-width: 1630px;
  margin: 0 auto;
  background: #fff;
}
.teacher-con__tit,
.notice-con__tit,
.qna-con__tit {
  height: auto;
  position: relative;
  margin-bottom: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .teacher-con__tit,
  .notice-con__tit,
  .qna-con__tit {
    margin-bottom: 32px;
  }
}
.teacher-con__tit h3,
.notice-con__tit h3,
.qna-con__tit h3 {
  font-size: 4.8rem;
  font-weight: 700;
  line-height: normal;
  color: #232323;
  text-align: center;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .teacher-con__tit h3,
  .notice-con__tit h3,
  .qna-con__tit h3 {
    font-size: 26px;
  }
}
.teacher-con__tit .btn--back,
.notice-con__tit .btn--back,
.qna-con__tit .btn--back {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  border: none;
}
.teacher-con__body .table-info,
.notice-con__body .table-info,
.qna-con__body .table-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  align-items: center;
  margin-bottom: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .teacher-con__body .table-info,
  .notice-con__body .table-info,
  .qna-con__body .table-info {
    margin-bottom: 24px;
  }
}
.teacher-con__body .table-info__total,
.notice-con__body .table-info__total,
.qna-con__body .table-info__total {
  font-size: 2.1rem;
  font-weight: 700;
  line-height: normal;
  color: #232323;
  transition: width 0.3s ease;
  overflow: hidden;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .teacher-con__body .table-info__total,
  .notice-con__body .table-info__total,
  .qna-con__body .table-info__total {
    font-size: 15px;
  }
}
.teacher-con__body .table-info__total b,
.notice-con__body .table-info__total b,
.qna-con__body .table-info__total b {
  font-weight: 700;
}
.teacher-con__body .table-info__search,
.notice-con__body .table-info__search,
.qna-con__body .table-info__search {
  margin-left: auto;
  transition: width 0.3s ease;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .teacher-con__body .table-info__search,
  .notice-con__body .table-info__search,
  .qna-con__body .table-info__search {
    height: 36px;
    transition: all 0.3s ease;
  }
}
.teacher-con__body .table-info__search .search-box,
.notice-con__body .table-info__search .search-box,
.qna-con__body .table-info__search .search-box {
  display: block;
  width: 200px;
  height: 36px;
  background: #F2F4F7;
  padding-right: 36px;
  padding-left: 10px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  position: relative;
  transition: width 0.3s ease;
  margin-left: auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .teacher-con__body .table-info__search .search-box,
  .notice-con__body .table-info__search .search-box,
  .qna-con__body .table-info__search .search-box {
    width: 32px;
    height: 32px;
    border-radius: 100px;
    background: #fff;
    padding: 0;
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.14);
  }
}
.teacher-con__body .table-info__search input,
.notice-con__body .table-info__search input,
.qna-con__body .table-info__search input {
  width: 100%;
  height: 36px;
  background: transparent;
  border: none;
  font-size: 17px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .teacher-con__body .table-info__search input,
  .notice-con__body .table-info__search input,
  .qna-con__body .table-info__search input {
    height: 30px;
    font-size: 14px;
  }
}
.teacher-con__body .table-info__search .btn-search,
.notice-con__body .table-info__search .btn-search,
.qna-con__body .table-info__search .btn-search {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .teacher-con__body .table-info__search .btn-search,
  .notice-con__body .table-info__search .btn-search,
  .qna-con__body .table-info__search .btn-search {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    right: 0;
    background-size: 24px;
  }
}
.teacher-con__body .table-info__code.hide-toggle,
.teacher-con__body .table-info__class.hide-toggle,
.notice-con__body .table-info__code.hide-toggle,
.notice-con__body .table-info__class.hide-toggle,
.qna-con__body .table-info__code.hide-toggle,
.qna-con__body .table-info__class.hide-toggle {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .teacher-con__body .table-info__code.hide-toggle,
  .teacher-con__body .table-info__class.hide-toggle,
  .notice-con__body .table-info__code.hide-toggle,
  .notice-con__body .table-info__class.hide-toggle,
  .qna-con__body .table-info__code.hide-toggle,
  .qna-con__body .table-info__class.hide-toggle {
    gap: 8px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .teacher-con__body .table-info__code.hide-toggle,
  .teacher-con__body .table-info__class.hide-toggle,
  .notice-con__body .table-info__code.hide-toggle,
  .notice-con__body .table-info__class.hide-toggle,
  .qna-con__body .table-info__code.hide-toggle,
  .qna-con__body .table-info__class.hide-toggle {
    gap: 6px;
  }
}
.teacher-con__body .table-info__code.hide-toggle h5,
.teacher-con__body .table-info__class.hide-toggle h5,
.notice-con__body .table-info__code.hide-toggle h5,
.notice-con__body .table-info__class.hide-toggle h5,
.qna-con__body .table-info__code.hide-toggle h5,
.qna-con__body .table-info__class.hide-toggle h5 {
  font-weight: 700;
}
.teacher-con__body .table-info__code.hide-toggle .icon,
.teacher-con__body .table-info__class.hide-toggle .icon,
.notice-con__body .table-info__code.hide-toggle .icon,
.notice-con__body .table-info__class.hide-toggle .icon,
.qna-con__body .table-info__code.hide-toggle .icon,
.qna-con__body .table-info__class.hide-toggle .icon {
  width: 32px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_book-bb3b470357b296b8db4db9eac7479a92.png") no-repeat center/100% auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .teacher-con__body .table-info__code.hide-toggle .icon,
  .teacher-con__body .table-info__class.hide-toggle .icon,
  .notice-con__body .table-info__code.hide-toggle .icon,
  .notice-con__body .table-info__class.hide-toggle .icon,
  .qna-con__body .table-info__code.hide-toggle .icon,
  .qna-con__body .table-info__class.hide-toggle .icon {
    width: 28px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .teacher-con__body .table-info__code.hide-toggle .icon,
  .teacher-con__body .table-info__class.hide-toggle .icon,
  .notice-con__body .table-info__code.hide-toggle .icon,
  .notice-con__body .table-info__class.hide-toggle .icon,
  .qna-con__body .table-info__code.hide-toggle .icon,
  .qna-con__body .table-info__class.hide-toggle .icon {
    width: 24px;
  }
}
.teacher-con__body .table-info.is-active .table-info__code.hide-toggle,
.teacher-con__body .table-info.is-active .table-info__total.hide-toggle,
.teacher-con__body .table-info.is-active .table-info__class.hide-toggle,
.notice-con__body .table-info.is-active .table-info__code.hide-toggle,
.notice-con__body .table-info.is-active .table-info__total.hide-toggle,
.notice-con__body .table-info.is-active .table-info__class.hide-toggle,
.qna-con__body .table-info.is-active .table-info__code.hide-toggle,
.qna-con__body .table-info.is-active .table-info__total.hide-toggle,
.qna-con__body .table-info.is-active .table-info__class.hide-toggle {
  width: 0;
  height: 0;
  overflow: hidden;
}
.teacher-con__body .table-info.is-active .table-info__search,
.notice-con__body .table-info.is-active .table-info__search,
.qna-con__body .table-info.is-active .table-info__search {
  width: 100%;
  position: relative;
}
.teacher-con__body .table-info.is-active .search-box,
.notice-con__body .table-info.is-active .search-box,
.qna-con__body .table-info.is-active .search-box {
  width: 100%;
  box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.14);
  padding-right: 36px;
  padding-left: 10px;
}
.teacher-con__body .check-box,
.notice-con__body .check-box,
.qna-con__body .check-box {
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #BCC1C6;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
.teacher-con__body input[type=checkbox],
.notice-con__body input[type=checkbox],
.qna-con__body input[type=checkbox] {
  display: none;
}
.teacher-con__body input[type=checkbox]:checked ~ .check-box,
.notice-con__body input[type=checkbox]:checked ~ .check-box,
.qna-con__body input[type=checkbox]:checked ~ .check-box {
  border: none;
  background: #0072BC url("/assets/images/icon/ic_check-84a06906f897eecff824b42bc39070e2.png") no-repeat center center/100% auto;
}
.teacher-con .table-con,
.notice-con .table-con,
.qna-con .table-con {
  margin-bottom: 20px;
}
.teacher-con .table-con__body .status > button,
.teacher-con .table-con__body .status > span,
.notice-con .table-con__body .status > button,
.notice-con .table-con__body .status > span,
.qna-con .table-con__body .status > button,
.qna-con .table-con__body .status > span {
  color: #fff;
  font-weight: 700;
  border-radius: 6px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
  padding: 4px 10px;
  background: #FD813E;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .teacher-con .table-con__body .status > button,
  .teacher-con .table-con__body .status > span,
  .notice-con .table-con__body .status > button,
  .notice-con .table-con__body .status > span,
  .qna-con .table-con__body .status > button,
  .qna-con .table-con__body .status > span {
    font-size: 13px;
  }
}
.teacher-con .table-con__body .status > span,
.notice-con .table-con__body .status > span,
.qna-con .table-con__body .status > span {
  color: #FD813E;
  background: transparent;
  box-shadow: none;
}
.teacher-con .table-con__body .status > button.is-success,
.teacher-con .table-con__body .status > span.is-success,
.notice-con .table-con__body .status > button.is-success,
.notice-con .table-con__body .status > span.is-success,
.qna-con .table-con__body .status > button.is-success,
.qna-con .table-con__body .status > span.is-success {
  color: #0072BC;
  background: transparent;
  box-shadow: none;
}
.teacher-con .table-con .col,
.notice-con .table-con .col,
.qna-con .table-con .col {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .teacher-con .table-con .btn-view,
  .notice-con .table-con .btn-view,
  .qna-con .table-con .btn-view {
    font-size: 13px;
  }
}
.teacher-con .btn-con,
.notice-con .btn-con,
.qna-con .btn-con {
  position: relative;
}
.teacher-con .btn-con:has(.paging-con),
.notice-con .btn-con:has(.paging-con),
.qna-con .btn-con:has(.paging-con) {
  min-height: 30px;
}
.teacher-con .paging-con,
.notice-con .paging-con,
.qna-con .paging-con {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.teacher-con .paging-con .paging,
.notice-con .paging-con .paging,
.qna-con .paging-con .paging {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.teacher-con .paging-con .paging .page-num,
.notice-con .paging-con .paging .page-num,
.qna-con .paging-con .paging .page-num {
  color: #A9AFB1;
  font-size: 18px;
}
.teacher-con .paging-con .paging .page-num.on a,
.notice-con .paging-con .paging .page-num.on a,
.qna-con .paging-con .paging .page-num.on a {
  color: #232323;
  font-weight: 600;
}
.teacher-con .paging-con .paging .page-prev a,
.notice-con .paging-con .paging .page-prev a,
.qna-con .paging-con .paging .page-prev a {
  width: 20px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_arr-left-gr-ca4fd07b1ea80565d5287b32ba772bc8.png") no-repeat center center/100% auto;
}
.teacher-con .paging-con .paging .page-next a,
.notice-con .paging-con .paging .page-next a,
.qna-con .paging-con .paging .page-next a {
  width: 20px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_arr-right-gr-a26873e6aae8e008f33f7b4e2f564d08.png") no-repeat center center/100% auto;
}

@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .content:has(.manage-classes),
  .content:has(.class-details),
  .content:has(.manage-students) {
    padding-bottom: 60px;
  }
}

.content:has(.table-con--accordion) .btn-con .page-con {
  display: none;
}

.manage-students .table-info.is-active .search-box input,
.manage-teachers .table-info.is-active .search-box input,
.class-list .table-info.is-active .search-box input {
  padding-left: 105px;
}
.manage-students .table-con__header, .manage-students .table-con__body,
.manage-teachers .table-con__header,
.manage-teachers .table-con__body,
.class-list .table-con__header,
.class-list .table-con__body {
  display: grid;
  align-items: center;
  grid-template-columns: 0.6fr 50px 2.5fr 4fr 2fr 4fr repeat(3, 2.5fr) 2fr 2.5fr;
}
.manage-students .table-con__row,
.manage-teachers .table-con__row,
.class-list .table-con__row {
  display: contents;
}
.manage-students .table-con__header,
.manage-teachers .table-con__header,
.class-list .table-con__header {
  height: 50px;
  background: #DBE1E5;
  border-radius: 10px 10px 0 0;
}
.manage-students .table-con__header .col,
.manage-teachers .table-con__header .col,
.class-list .table-con__header .col {
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  color: #232323;
}
.manage-students .table-con__body .col,
.manage-teachers .table-con__body .col,
.class-list .table-con__body .col {
  min-height: 64px;
  font-size: 2.1rem;
  border-bottom: 1px solid #C1CAD0;
}
.manage-students .table-con .btn-edit,
.manage-teachers .table-con .btn-edit,
.class-list .table-con .btn-edit {
  width: auto;
  padding: 0 11px;
}
.manage-students .table-con .table-con__row.row-2 .col.row-check,
.manage-students .table-con .table-con__row.row-2 .col.row-num,
.manage-students .table-con .table-con__row.row-2 .col.name,
.manage-students .table-con .table-con__row.row-2 .col.email,
.manage-students .table-con .table-con__row.row-2 .col.row-delete,
.manage-teachers .table-con .table-con__row.row-2 .col.row-check,
.manage-teachers .table-con .table-con__row.row-2 .col.row-num,
.manage-teachers .table-con .table-con__row.row-2 .col.name,
.manage-teachers .table-con .table-con__row.row-2 .col.email,
.manage-teachers .table-con .table-con__row.row-2 .col.row-delete,
.class-list .table-con .table-con__row.row-2 .col.row-check,
.class-list .table-con .table-con__row.row-2 .col.row-num,
.class-list .table-con .table-con__row.row-2 .col.name,
.class-list .table-con .table-con__row.row-2 .col.email,
.class-list .table-con .table-con__row.row-2 .col.row-delete {
  border-bottom: 1px solid #C1CAD0;
  grid-row: span 2;
}
.manage-students .table-con .table-con__row.row-3 .col.row-check,
.manage-students .table-con .table-con__row.row-3 .col.row-num,
.manage-students .table-con .table-con__row.row-3 .col.name,
.manage-students .table-con .table-con__row.row-3 .col.email,
.manage-students .table-con .table-con__row.row-3 .col.row-delete,
.manage-teachers .table-con .table-con__row.row-3 .col.row-check,
.manage-teachers .table-con .table-con__row.row-3 .col.row-num,
.manage-teachers .table-con .table-con__row.row-3 .col.name,
.manage-teachers .table-con .table-con__row.row-3 .col.email,
.manage-teachers .table-con .table-con__row.row-3 .col.row-delete,
.class-list .table-con .table-con__row.row-3 .col.row-check,
.class-list .table-con .table-con__row.row-3 .col.row-num,
.class-list .table-con .table-con__row.row-3 .col.name,
.class-list .table-con .table-con__row.row-3 .col.email,
.class-list .table-con .table-con__row.row-3 .col.row-delete {
  border-bottom: 1px solid #C1CAD0;
  grid-row: span 3;
}
.manage-students .table-con .table-con__row.row-4 .col.row-check,
.manage-students .table-con .table-con__row.row-4 .col.row-num,
.manage-students .table-con .table-con__row.row-4 .col.name,
.manage-students .table-con .table-con__row.row-4 .col.email,
.manage-students .table-con .table-con__row.row-4 .col.row-delete,
.manage-teachers .table-con .table-con__row.row-4 .col.row-check,
.manage-teachers .table-con .table-con__row.row-4 .col.row-num,
.manage-teachers .table-con .table-con__row.row-4 .col.name,
.manage-teachers .table-con .table-con__row.row-4 .col.email,
.manage-teachers .table-con .table-con__row.row-4 .col.row-delete,
.class-list .table-con .table-con__row.row-4 .col.row-check,
.class-list .table-con .table-con__row.row-4 .col.row-num,
.class-list .table-con .table-con__row.row-4 .col.name,
.class-list .table-con .table-con__row.row-4 .col.email,
.class-list .table-con .table-con__row.row-4 .col.row-delete {
  border-bottom: 1px solid #C1CAD0;
  grid-row: span 4;
}
.manage-students .table-con .table-con__row.row-5 .col.row-check,
.manage-students .table-con .table-con__row.row-5 .col.row-num,
.manage-students .table-con .table-con__row.row-5 .col.name,
.manage-students .table-con .table-con__row.row-5 .col.email,
.manage-students .table-con .table-con__row.row-5 .col.row-delete,
.manage-teachers .table-con .table-con__row.row-5 .col.row-check,
.manage-teachers .table-con .table-con__row.row-5 .col.row-num,
.manage-teachers .table-con .table-con__row.row-5 .col.name,
.manage-teachers .table-con .table-con__row.row-5 .col.email,
.manage-teachers .table-con .table-con__row.row-5 .col.row-delete,
.class-list .table-con .table-con__row.row-5 .col.row-check,
.class-list .table-con .table-con__row.row-5 .col.row-num,
.class-list .table-con .table-con__row.row-5 .col.name,
.class-list .table-con .table-con__row.row-5 .col.email,
.class-list .table-con .table-con__row.row-5 .col.row-delete {
  border-bottom: 1px solid #C1CAD0;
  grid-row: span 5;
}
.manage-students .table-con .table-con__row.row-6 .col.row-check,
.manage-students .table-con .table-con__row.row-6 .col.row-num,
.manage-students .table-con .table-con__row.row-6 .col.name,
.manage-students .table-con .table-con__row.row-6 .col.email,
.manage-students .table-con .table-con__row.row-6 .col.row-delete,
.manage-teachers .table-con .table-con__row.row-6 .col.row-check,
.manage-teachers .table-con .table-con__row.row-6 .col.row-num,
.manage-teachers .table-con .table-con__row.row-6 .col.name,
.manage-teachers .table-con .table-con__row.row-6 .col.email,
.manage-teachers .table-con .table-con__row.row-6 .col.row-delete,
.class-list .table-con .table-con__row.row-6 .col.row-check,
.class-list .table-con .table-con__row.row-6 .col.row-num,
.class-list .table-con .table-con__row.row-6 .col.name,
.class-list .table-con .table-con__row.row-6 .col.email,
.class-list .table-con .table-con__row.row-6 .col.row-delete {
  border-bottom: 1px solid #C1CAD0;
  grid-row: span 6;
}
.manage-students .table-con .table-con__row.row-7 .col.row-check,
.manage-students .table-con .table-con__row.row-7 .col.row-num,
.manage-students .table-con .table-con__row.row-7 .col.name,
.manage-students .table-con .table-con__row.row-7 .col.email,
.manage-students .table-con .table-con__row.row-7 .col.row-delete,
.manage-teachers .table-con .table-con__row.row-7 .col.row-check,
.manage-teachers .table-con .table-con__row.row-7 .col.row-num,
.manage-teachers .table-con .table-con__row.row-7 .col.name,
.manage-teachers .table-con .table-con__row.row-7 .col.email,
.manage-teachers .table-con .table-con__row.row-7 .col.row-delete,
.class-list .table-con .table-con__row.row-7 .col.row-check,
.class-list .table-con .table-con__row.row-7 .col.row-num,
.class-list .table-con .table-con__row.row-7 .col.name,
.class-list .table-con .table-con__row.row-7 .col.email,
.class-list .table-con .table-con__row.row-7 .col.row-delete {
  border-bottom: 1px solid #C1CAD0;
  grid-row: span 7;
}
.manage-students .table-con .table-con__row.row-8 .col.row-check,
.manage-students .table-con .table-con__row.row-8 .col.row-num,
.manage-students .table-con .table-con__row.row-8 .col.name,
.manage-students .table-con .table-con__row.row-8 .col.email,
.manage-students .table-con .table-con__row.row-8 .col.row-delete,
.manage-teachers .table-con .table-con__row.row-8 .col.row-check,
.manage-teachers .table-con .table-con__row.row-8 .col.row-num,
.manage-teachers .table-con .table-con__row.row-8 .col.name,
.manage-teachers .table-con .table-con__row.row-8 .col.email,
.manage-teachers .table-con .table-con__row.row-8 .col.row-delete,
.class-list .table-con .table-con__row.row-8 .col.row-check,
.class-list .table-con .table-con__row.row-8 .col.row-num,
.class-list .table-con .table-con__row.row-8 .col.name,
.class-list .table-con .table-con__row.row-8 .col.email,
.class-list .table-con .table-con__row.row-8 .col.row-delete {
  border-bottom: 1px solid #C1CAD0;
  grid-row: span 8;
}
.manage-students .table-con .table-con__row.row-9 .col.row-check,
.manage-students .table-con .table-con__row.row-9 .col.row-num,
.manage-students .table-con .table-con__row.row-9 .col.name,
.manage-students .table-con .table-con__row.row-9 .col.email,
.manage-students .table-con .table-con__row.row-9 .col.row-delete,
.manage-teachers .table-con .table-con__row.row-9 .col.row-check,
.manage-teachers .table-con .table-con__row.row-9 .col.row-num,
.manage-teachers .table-con .table-con__row.row-9 .col.name,
.manage-teachers .table-con .table-con__row.row-9 .col.email,
.manage-teachers .table-con .table-con__row.row-9 .col.row-delete,
.class-list .table-con .table-con__row.row-9 .col.row-check,
.class-list .table-con .table-con__row.row-9 .col.row-num,
.class-list .table-con .table-con__row.row-9 .col.name,
.class-list .table-con .table-con__row.row-9 .col.email,
.class-list .table-con .table-con__row.row-9 .col.row-delete {
  border-bottom: 1px solid #C1CAD0;
  grid-row: span 9;
}
.manage-students .table-con .table-con__row.row-10 .col.row-check,
.manage-students .table-con .table-con__row.row-10 .col.row-num,
.manage-students .table-con .table-con__row.row-10 .col.name,
.manage-students .table-con .table-con__row.row-10 .col.email,
.manage-students .table-con .table-con__row.row-10 .col.row-delete,
.manage-teachers .table-con .table-con__row.row-10 .col.row-check,
.manage-teachers .table-con .table-con__row.row-10 .col.row-num,
.manage-teachers .table-con .table-con__row.row-10 .col.name,
.manage-teachers .table-con .table-con__row.row-10 .col.email,
.manage-teachers .table-con .table-con__row.row-10 .col.row-delete,
.class-list .table-con .table-con__row.row-10 .col.row-check,
.class-list .table-con .table-con__row.row-10 .col.row-num,
.class-list .table-con .table-con__row.row-10 .col.name,
.class-list .table-con .table-con__row.row-10 .col.email,
.class-list .table-con .table-con__row.row-10 .col.row-delete {
  border-bottom: 1px solid #C1CAD0;
  grid-row: span 10;
}

.manage-teachers .table-con__header, .manage-teachers .table-con__body {
  grid-template-columns: 1fr 3fr 2.7fr 2fr 2fr 1.4fr 1.4fr;
}

@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .manage-classes .table-con {
    margin-bottom: 0;
  }
}
.manage-classes .table-con__header, .manage-classes .table-con__body {
  display: grid;
  align-items: center;
  grid-template-columns: repeat(2, 0.6fr) 2.5fr repeat(2, 1.35fr) repeat(3, 1.5fr) repeat(3, 1.35fr);
}
.manage-classes .table-con__header {
  height: 60px;
  background: #DBE1E5;
  border-radius: 10px 10px 0 0;
}
.manage-classes .table-con__header .col {
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  color: #232323;
}
.manage-classes .table-con__body .col {
  min-height: 80px;
  font-size: 21px;
  border-bottom: 1px solid #C1CAD0;
}
.manage-classes .table-con__row {
  display: contents;
}
.manage-classes .table-con .table--manage-classes .card-container {
  display: grid;
  gap: 24px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .manage-classes .table-con .table--manage-classes .card-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .manage-classes .table-con .table--manage-classes .card-container {
    grid-template-columns: repeat(1, 1fr);
  }
}
.manage-classes .table-con .card {
  font-size: 15px;
  border-radius: 10px;
  border: 1px solid #C1CAD0;
}
.manage-classes .table-con .card__tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 2px 4px 16px;
}
.manage-classes .table-con .card__tit .class-name {
  font-size: 15px;
  font-weight: 700;
}
.manage-classes .table-con .card__tit .btn-delete {
  width: 44px;
  height: 44px;
  background: url("/assets/images/icon/btn_delete-825309163f4c951dc0b260ed165756e1.png") no-repeat center center/50% auto;
}
.manage-classes .table-con .card .class-info {
  display: flex;
  flex-direction: column;
  padding-left: 16px;
}
.manage-classes .table-con .card .class-info li {
  display: flex;
  align-items: center;
  padding: 8px 0;
}
.manage-classes .table-con .card .class-info .label {
  width: 102px;
  color: #8B8B8B;
  font-weight: 600;
}
.manage-classes .table-con .card .class-more {
  display: flex;
  gap: 16px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.manage-classes .table-con .card .class-more li {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex: 1;
  color: #0072BC;
  border: 1px solid #0072BC;
  border-radius: 4px;
  padding: 8px 16px;
  box-shadow: 1px 1px 3px rgba(0, 114, 188, 0.25);
}
.manage-classes .table-con .card .class-more li a {
  text-align: center;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .manage-classes .btn-con {
    margin: 0;
  }
  .manage-classes .btn-con .btn-delete {
    display: none;
  }
}

.manage-classes .table-info__class,
.manage-classes .table-info__code,
.manage-teachers .table-info__class,
.manage-teachers .table-info__code,
.class-list .table-info__class,
.class-list .table-info__code {
  font-size: 3rem;
  font-weight: 600;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .manage-classes .table-info__class,
  .manage-classes .table-info__code,
  .manage-teachers .table-info__class,
  .manage-teachers .table-info__code,
  .class-list .table-info__class,
  .class-list .table-info__code {
    font-size: 17px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .manage-classes .table-info__class,
  .manage-classes .table-info__code,
  .manage-teachers .table-info__class,
  .manage-teachers .table-info__code,
  .class-list .table-info__class,
  .class-list .table-info__code {
    flex-direction: column !important;
    align-items: start !important;
    gap: 4px;
  }
}
.manage-classes .table-info__class .txt-bk,
.manage-classes .table-info__code .txt-bk,
.manage-teachers .table-info__class .txt-bk,
.manage-teachers .table-info__code .txt-bk,
.class-list .table-info__class .txt-bk,
.class-list .table-info__code .txt-bk {
  color: #8B8B8B;
}

.class-list .table-info__class {
  flex-direction: column !important;
  align-items: start !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .class-list .table-info__class {
    gap: 4px;
  }
}
.class-list .table-con__header, .class-list .table-con__body {
  grid-template-columns: 1fr 3fr 2.2fr repeat(5, 2fr);
}

.class-details .teacher-con__tit {
  margin-bottom: 40px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .class-details .teacher-con__tit {
    margin-bottom: 32px;
  }
}
.class-details .table-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 40px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .class-details .table-info {
    margin-bottom: 0;
  }
}
.class-details .table-info__class {
  margin-bottom: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .class-details .table-info__class {
    margin-bottom: 16px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .class-details .table-info__class {
    width: 100%;
  }
}
.class-details .table-info__class .class-name {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 3.4rem;
  font-weight: 700;
  line-height: normal;
  color: #232323;
  margin-bottom: 12px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .class-details .table-info__class .class-name {
    gap: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .class-details .table-info__class .class-name {
    justify-content: space-between;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .class-details .table-info__class .class-name {
    font-size: 22px;
    margin-bottom: 0;
  }
}
.class-details .table-info__class .class-id {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: normal;
  color: #232323;
  color: #8B8B8B;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .class-details .table-info__class .class-id {
    font-size: 17px;
  }
}
.class-details .table-info__class .class-id .label {
  color: #232323;
}
.class-details .table-info__average {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 6rem;
  background: #ECF7FF;
  padding: 20px 60px;
  border-radius: 10px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .class-details .table-info__average {
    width: 100%;
    gap: 40px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .class-details .table-info__average {
    flex-direction: column;
    align-items: start;
    gap: 16px;
    padding: 20px 16px;
  }
}
.class-details .table-info__average > div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .class-details .table-info__average > div {
    gap: 8px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .class-details .table-info__average > div {
    width: 100%;
    justify-content: space-between;
  }
}
.class-details .table-info__average .label {
  font-size: 2.1rem;
}
.class-details .table-info__average .progress {
  width: 80px;
  height: 5px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.28);
  position: relative;
  margin-left: 8px;
  margin-right: 5px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .class-details .table-info__average .progress {
    display: none;
  }
}
.class-details .table-info__average .progress-bar {
  height: 100%;
  background: #232323;
  border-radius: 2px;
  position: absolute;
  top: 0;
  left: 0;
}
.class-details .table-info__average .progress .value {
  color: #8B8B8B;
}
.class-details .table-info__average .progress .value b {
  color: #232323;
}
.class-details .table-info__average .value {
  font-size: 2.4rem;
}
.class-details .table-info__total {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #C1CAD0;
  display: none;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .class-details .table-info__total {
    display: flex;
  }
}
.class-details .table-info__total p {
  font-size: 20px;
}
.class-details .table-info__search {
  position: absolute;
  right: 0;
  bottom: 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .class-details .table-info__search {
    position: relative;
    margin-top: 10px;
  }
  .class-details .table-info__search .search-box {
    width: 200px !important;
    height: 36px !important;
    background: #F2F4F7 !important;
    padding-right: 36px !important;
    padding-left: 10px !important;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.12) !important;
    border-radius: 4px !important;
    border: none !important;
  }
}
.class-details .table-con__header, .class-details .table-con__body {
  display: grid;
  align-items: center;
  grid-template-columns: 0.5fr 200px repeat(8, 0.6fr) repeat(4, 1fr) 0.5fr;
}
.class-details .table-con__header .col, .class-details .table-con__body .col {
  border-right: 1px solid #C1CAD0;
  border-bottom: 1px solid #C1CAD0;
}
.class-details .table-con__header {
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}
.class-details .table-con__header .col {
  min-height: 45px;
  font-size: 18px;
  font-weight: 700;
}
.class-details .table-con__body .col {
  min-height: 67px;
  font-size: 2.1rem;
}
.class-details .table-con__body .stu-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.class-details .table-con__body .stu-info .stu-name {
  font-size: 2.1rem;
}
.class-details .table-con__body .stu-info .stu-email {
  font-size: 15px;
}
.class-details .table-con__body .unit-score {
  font-weight: 600;
  color: #C0C0C0;
}
.class-details .table-con__body .unit-score.is-completed {
  color: #232323;
  background: #E4F4F1;
}
.class-details .table-con__body .unit-score.is-learning {
  color: #232323;
  background: #F9FCEF;
}
.class-details .table-con .header-1,
.class-details .table-con .header-2, .class-details .table-con__row {
  display: contents;
}
.class-details .table-con .header-1 .cate {
  background: #0072BC;
  color: #ECF7FF;
}
.class-details .table-con .header-2 .unit {
  background: #C2E7FF;
}
.class-details .table-con .header-1 .col:last-child,
.class-details .table-con .table-con__row .col:last-child {
  border-right: 0;
}
.class-details .table-con .student-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-items: center;
}
.class-details .table-con .student-item {
  width: 100%;
  border-bottom: 1px solid #C1CAD0;
}
.class-details .table-con .student-item:first-of-type {
  border-top: 2px solid #0072BC;
}
.class-details .table-con .student-detail {
  display: none;
}
.class-details .table-con .btn-more {
  margin: 0 auto;
  margin-top: 24px;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .class-details .btn-con .btn-create-new {
    position: fixed;
    left: 0;
    bottom: 0;
  }
}
.class-details.is-inst .table-con__header, .class-details.is-inst .table-con__body {
  grid-template-columns: 0.5fr 200px repeat(8, 0.6fr) repeat(4, 1fr);
}

.teacher-con .table-con--accordion.is-mobile .student-info {
  padding: 13px 0 13px 16px;
  position: relative;
  cursor: pointer;
}
.teacher-con .table-con--accordion.is-mobile .student-info h5 {
  font-size: 18px;
  margin-bottom: 4px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .teacher-con .table-con--accordion.is-mobile .student-info h5 {
    font-size: 15px;
  }
}
.teacher-con .table-con--accordion.is-mobile .student-info .btn-arrow {
  width: 44px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_list-arrow-42259b29245d85e2fb9372c5d75e7e35.png") no-repeat center/100% auto;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(0);
  transition: transform 0.3s ease;
}
.teacher-con .table-con--accordion.is-mobile .student-detail {
  display: none;
}
.teacher-con .table-con--accordion.is-mobile .student-item.active {
  border-top: 2px solid #0072BC;
  border-bottom: 2px solid #0072BC;
}
.teacher-con .table-con--accordion.is-mobile .student-item.active .student-info {
  background: #ECF7FF;
  border-bottom: none;
}
.teacher-con .table-con--accordion.is-mobile .student-item.active .student-detail {
  display: block;
}
.teacher-con .table-con--accordion.is-mobile .student-item.active .btn-arrow {
  transform: translateY(-50%) rotate(180deg);
}
.teacher-con .table-con--accordion.is-mobile .student-item:first-of-type {
  border-top: 2px solid #0072BC;
}
.teacher-con .table-con--accordion.is-mobile .table-con__body .table-con__row:nth-of-type(1) {
  border: 1px solid red !important;
}
.teacher-con .table-con--accordion.is-mobile .table-con__body .col {
  min-height: 44px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .teacher-con .table-con--accordion.is-mobile .table-con__body .col {
    font-size: 15px;
  }
}
.teacher-con .table--class-details.is-mobile .table-con__body {
  grid-template-columns: repeat(3, 1fr);
}
.teacher-con .table--class-details.is-mobile .cate-block,
.teacher-con .table--class-details.is-mobile .row {
  display: contents;
}
.teacher-con .table--class-details.is-mobile .cate-block .cate {
  font-weight: 600;
  background: #EDF3F6;
}
.teacher-con .table--class-details.is-mobile .cate-block .unit {
  font-weight: 700;
  background: #C2E7FF;
}
.teacher-con .table--manage-students.is-mobile .student-info,
.teacher-con .table--manage-teachers.is-mobile .student-info,
.teacher-con .table--class-list.is-mobile .student-info {
  border-bottom: 1px solid #C1CAD0;
}
.teacher-con .table--manage-students.is-mobile .student-detail,
.teacher-con .table--manage-teachers.is-mobile .student-detail,
.teacher-con .table--class-list.is-mobile .student-detail {
  border-top: none;
  border-bottom: none;
}
.teacher-con .table--manage-students.is-mobile .table-con__body,
.teacher-con .table--manage-teachers.is-mobile .table-con__body,
.teacher-con .table--class-list.is-mobile .table-con__body {
  border-top: 1px solid #C1CAD0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .teacher-con .table--manage-students.is-mobile .table-con__body,
  .teacher-con .table--manage-teachers.is-mobile .table-con__body,
  .teacher-con .table--class-list.is-mobile .table-con__body {
    grid-template-columns: 150px 1fr;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .teacher-con .table--manage-students.is-mobile .table-con__body,
  .teacher-con .table--manage-teachers.is-mobile .table-con__body,
  .teacher-con .table--class-list.is-mobile .table-con__body {
    grid-template-columns: 128px 1fr;
  }
}
.teacher-con .table--manage-students.is-mobile .table-con__body .cate,
.teacher-con .table--manage-teachers.is-mobile .table-con__body .cate,
.teacher-con .table--class-list.is-mobile .table-con__body .cate {
  background: #EDF3F6;
  font-weight: 600;
}
.teacher-con .table--manage-students.is-mobile .table-con__body .cate,
.teacher-con .table--manage-students.is-mobile .table-con__body .info,
.teacher-con .table--manage-teachers.is-mobile .table-con__body .cate,
.teacher-con .table--manage-teachers.is-mobile .table-con__body .info,
.teacher-con .table--class-list.is-mobile .table-con__body .cate,
.teacher-con .table--class-list.is-mobile .table-con__body .info {
  justify-content: start;
  text-align: left;
  padding: 0 12px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .teacher-con .table--manage-students.is-mobile .table-con__body .info .btn-delete,
  .teacher-con .table--manage-teachers.is-mobile .table-con__body .info .btn-delete,
  .teacher-con .table--class-list.is-mobile .table-con__body .info .btn-delete {
    width: 44px;
    height: 44px;
    background-size: 50%;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .teacher-con.manage-students .btn-con .btn-delete, .teacher-con.manage-teachers .btn-con .btn-delete, .teacher-con.class-list .btn-con .btn-delete {
    display: none;
  }
}

.page--notice .main-tit h2,
.page--qna .main-tit h2,
.page--my-page .main-tit h2 {
  text-align: center;
  padding-bottom: 15px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice .main-tit h2,
  .page--qna .main-tit h2,
  .page--my-page .main-tit h2 {
    margin-bottom: 0;
  }
}
.page--notice .notice-con,
.page--notice .qna-con,
.page--qna .notice-con,
.page--qna .qna-con,
.page--my-page .notice-con,
.page--my-page .qna-con {
  max-width: 1530px;
  border-radius: 10px;
  padding: 30px 5rem 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice .notice-con,
  .page--notice .qna-con,
  .page--qna .notice-con,
  .page--qna .qna-con,
  .page--my-page .notice-con,
  .page--my-page .qna-con {
    background: transparent;
    padding-left: 0;
    padding-right: 0;
  }
}
.page--notice .notice-con .menu-tab,
.page--notice .qna-con .menu-tab,
.page--qna .notice-con .menu-tab,
.page--qna .qna-con .menu-tab,
.page--my-page .notice-con .menu-tab,
.page--my-page .qna-con .menu-tab {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  border-bottom: 1.5px solid #D6D6D6;
  margin-bottom: 40px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice .notice-con .menu-tab,
  .page--notice .qna-con .menu-tab,
  .page--qna .notice-con .menu-tab,
  .page--qna .qna-con .menu-tab,
  .page--my-page .notice-con .menu-tab,
  .page--my-page .qna-con .menu-tab {
    margin-bottom: 32px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice .notice-con .menu-tab li,
  .page--notice .qna-con .menu-tab li,
  .page--qna .notice-con .menu-tab li,
  .page--qna .qna-con .menu-tab li,
  .page--my-page .notice-con .menu-tab li,
  .page--my-page .qna-con .menu-tab li {
    width: 50%;
  }
}
.page--notice .notice-con .menu-tab li > a,
.page--notice .qna-con .menu-tab li > a,
.page--qna .notice-con .menu-tab li > a,
.page--qna .qna-con .menu-tab li > a,
.page--my-page .notice-con .menu-tab li > a,
.page--my-page .qna-con .menu-tab li > a {
  width: 100%;
  font-size: 3.4rem;
  font-weight: 700;
  line-height: normal;
  color: #232323;
  text-align: center;
  padding: 8px 18px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice .notice-con .menu-tab li > a,
  .page--notice .qna-con .menu-tab li > a,
  .page--qna .notice-con .menu-tab li > a,
  .page--qna .qna-con .menu-tab li > a,
  .page--my-page .notice-con .menu-tab li > a,
  .page--my-page .qna-con .menu-tab li > a {
    font-size: 24px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--notice .notice-con .menu-tab li > a,
  .page--notice .qna-con .menu-tab li > a,
  .page--qna .notice-con .menu-tab li > a,
  .page--qna .qna-con .menu-tab li > a,
  .page--my-page .notice-con .menu-tab li > a,
  .page--my-page .qna-con .menu-tab li > a {
    font-size: 20px;
  }
}
.page--notice .notice-con .menu-tab li > a.on,
.page--notice .qna-con .menu-tab li > a.on,
.page--qna .notice-con .menu-tab li > a.on,
.page--qna .qna-con .menu-tab li > a.on,
.page--my-page .notice-con .menu-tab li > a.on,
.page--my-page .qna-con .menu-tab li > a.on {
  color: #009A85;
  border-bottom: 3px solid #009A85;
}
.page--notice .notice-con .table-info__class-name,
.page--notice .qna-con .table-info__class-name,
.page--qna .notice-con .table-info__class-name,
.page--qna .qna-con .table-info__class-name,
.page--my-page .notice-con .table-info__class-name,
.page--my-page .qna-con .table-info__class-name {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.page--notice .notice-con .table-info__class-name .icon,
.page--notice .qna-con .table-info__class-name .icon,
.page--qna .notice-con .table-info__class-name .icon,
.page--qna .qna-con .table-info__class-name .icon,
.page--my-page .notice-con .table-info__class-name .icon,
.page--my-page .qna-con .table-info__class-name .icon {
  width: 32px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_book-bb3b470357b296b8db4db9eac7479a92.png") no-repeat center center/100% auto;
}
.page--notice .notice-con .table-con .table--notice-list .table-con__header,
.page--notice .notice-con .table-con .table--notice-list .table-con__row,
.page--notice .qna-con .table-con .table--notice-list .table-con__header,
.page--notice .qna-con .table-con .table--notice-list .table-con__row,
.page--qna .notice-con .table-con .table--notice-list .table-con__header,
.page--qna .notice-con .table-con .table--notice-list .table-con__row,
.page--qna .qna-con .table-con .table--notice-list .table-con__header,
.page--qna .qna-con .table-con .table--notice-list .table-con__row,
.page--my-page .notice-con .table-con .table--notice-list .table-con__header,
.page--my-page .notice-con .table-con .table--notice-list .table-con__row,
.page--my-page .qna-con .table-con .table--notice-list .table-con__header,
.page--my-page .qna-con .table-con .table--notice-list .table-con__row {
  display: grid;
  grid-template-columns: 2.1fr 20fr 5fr 4fr 4fr;
}
.page--notice .notice-con .table-con .table--notice-list .table-con__header .col,
.page--notice .notice-con .table-con .table--notice-list .table-con__row .col,
.page--notice .qna-con .table-con .table--notice-list .table-con__header .col,
.page--notice .qna-con .table-con .table--notice-list .table-con__row .col,
.page--qna .notice-con .table-con .table--notice-list .table-con__header .col,
.page--qna .notice-con .table-con .table--notice-list .table-con__row .col,
.page--qna .qna-con .table-con .table--notice-list .table-con__header .col,
.page--qna .qna-con .table-con .table--notice-list .table-con__row .col,
.page--my-page .notice-con .table-con .table--notice-list .table-con__header .col,
.page--my-page .notice-con .table-con .table--notice-list .table-con__row .col,
.page--my-page .qna-con .table-con .table--notice-list .table-con__header .col,
.page--my-page .qna-con .table-con .table--notice-list .table-con__row .col {
  font-size: 2.1rem;
  min-height: 53px;
}
.page--notice .notice-con .table-con__header,
.page--notice .qna-con .table-con__header,
.page--qna .notice-con .table-con__header,
.page--qna .qna-con .table-con__header,
.page--my-page .notice-con .table-con__header,
.page--my-page .qna-con .table-con__header {
  background: #DBE1E5;
  color: #586067;
  font-weight: 700;
  border-radius: 10px 10px 0 0;
}
.page--notice .notice-con .table-con__body,
.page--notice .qna-con .table-con__body,
.page--qna .notice-con .table-con__body,
.page--qna .qna-con .table-con__body,
.page--my-page .notice-con .table-con__body,
.page--my-page .qna-con .table-con__body {
  background: #fff;
}
.page--notice .notice-con .table-con__row,
.page--notice .qna-con .table-con__row,
.page--qna .notice-con .table-con__row,
.page--qna .qna-con .table-con__row,
.page--my-page .notice-con .table-con__row,
.page--my-page .qna-con .table-con__row {
  border-bottom: 1px solid #C1CAD0;
  padding: 12px 0;
  background: #fff;
  cursor: pointer;
}
.page--notice .notice-con .table-con__row.reply,
.page--notice .qna-con .table-con__row.reply,
.page--qna .notice-con .table-con__row.reply,
.page--qna .qna-con .table-con__row.reply,
.page--my-page .notice-con .table-con__row.reply,
.page--my-page .qna-con .table-con__row.reply {
  background: #E4F4F1;
  margin-top: -1px;
}
.page--notice .notice-con .table-con__row.fixed,
.page--notice .qna-con .table-con__row.fixed,
.page--qna .notice-con .table-con__row.fixed,
.page--qna .qna-con .table-con__row.fixed,
.page--my-page .notice-con .table-con__row.fixed,
.page--my-page .qna-con .table-con__row.fixed {
  background: #FFF5F4;
}
.page--notice .notice-con .table-con__row.fixed .col,
.page--notice .qna-con .table-con__row.fixed .col,
.page--qna .notice-con .table-con__row.fixed .col,
.page--qna .qna-con .table-con__row.fixed .col,
.page--my-page .notice-con .table-con__row.fixed .col,
.page--my-page .qna-con .table-con__row.fixed .col {
  font-weight: 700;
}
.page--notice .notice-con .table-con__row.fixed .list-num,
.page--notice .qna-con .table-con__row.fixed .list-num,
.page--qna .notice-con .table-con__row.fixed .list-num,
.page--qna .qna-con .table-con__row.fixed .list-num,
.page--my-page .notice-con .table-con__row.fixed .list-num,
.page--my-page .qna-con .table-con__row.fixed .list-num {
  background: #FFF5F4 url("/assets/images/icon/ic_fixed-c5d78c50175c846056f52d87194dadab.png") no-repeat center center/24px auto;
}
.page--notice .notice-con .table-con__row .title,
.page--notice .qna-con .table-con__row .title,
.page--qna .notice-con .table-con__row .title,
.page--qna .qna-con .table-con__row .title,
.page--my-page .notice-con .table-con__row .title,
.page--my-page .qna-con .table-con__row .title {
  text-align: left;
  justify-content: start;
  gap: 10px;
  overflow: hidden;
}
.page--notice .notice-con .table-con__row .title__inner,
.page--notice .qna-con .table-con__row .title__inner,
.page--qna .notice-con .table-con__row .title__inner,
.page--qna .qna-con .table-con__row .title__inner,
.page--my-page .notice-con .table-con__row .title__inner,
.page--my-page .qna-con .table-con__row .title__inner {
  width: 100%;
  display: flex;
  align-items: center;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--notice .notice-con .table-con__row .title__inner,
  .page--notice .qna-con .table-con__row .title__inner,
  .page--qna .notice-con .table-con__row .title__inner,
  .page--qna .qna-con .table-con__row .title__inner,
  .page--my-page .notice-con .table-con__row .title__inner,
  .page--my-page .qna-con .table-con__row .title__inner {
    display: block;
  }
}
.page--notice .notice-con .table-con__row .title__mark,
.page--notice .qna-con .table-con__row .title__mark,
.page--qna .notice-con .table-con__row .title__mark,
.page--qna .qna-con .table-con__row .title__mark,
.page--my-page .notice-con .table-con__row .title__mark,
.page--my-page .qna-con .table-con__row .title__mark {
  font-weight: 700;
  margin-right: 10px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice .notice-con .table-con__row .title__mark,
  .page--notice .qna-con .table-con__row .title__mark,
  .page--qna .notice-con .table-con__row .title__mark,
  .page--qna .qna-con .table-con__row .title__mark,
  .page--my-page .notice-con .table-con__row .title__mark,
  .page--my-page .qna-con .table-con__row .title__mark {
    margin-right: 6px;
  }
}
.page--notice .notice-con .table-con__row .title__txt,
.page--notice .qna-con .table-con__row .title__txt,
.page--qna .notice-con .table-con__row .title__txt,
.page--qna .qna-con .table-con__row .title__txt,
.page--my-page .notice-con .table-con__row .title__txt,
.page--my-page .qna-con .table-con__row .title__txt {
  width: fit-content;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--notice .notice-con .table-con__row .title__txt,
  .page--notice .qna-con .table-con__row .title__txt,
  .page--qna .notice-con .table-con__row .title__txt,
  .page--qna .qna-con .table-con__row .title__txt,
  .page--my-page .notice-con .table-con__row .title__txt,
  .page--my-page .qna-con .table-con__row .title__txt {
    display: inline;
    white-space: normal;
    overflow: visible;
  }
}
.page--notice .notice-con .table-con__row .title .label-box,
.page--notice .qna-con .table-con__row .title .label-box,
.page--qna .notice-con .table-con__row .title .label-box,
.page--qna .qna-con .table-con__row .title .label-box,
.page--my-page .notice-con .table-con__row .title .label-box,
.page--my-page .qna-con .table-con__row .title .label-box {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  vertical-align: middle;
}
.page--notice .notice-con .table-con__row .title .label--new,
.page--notice .qna-con .table-con__row .title .label--new,
.page--qna .notice-con .table-con__row .title .label--new,
.page--qna .qna-con .table-con__row .title .label--new,
.page--my-page .notice-con .table-con__row .title .label--new,
.page--my-page .qna-con .table-con__row .title .label--new {
  padding: 2px 5px;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  background: #ED4C33;
  border-radius: 4px;
  flex-shrink: 0;
}
.page--notice .notice-con .table-con__row .title .label-box,
.page--notice .notice-con .table-con__row .title .label--new,
.page--notice .qna-con .table-con__row .title .label-box,
.page--notice .qna-con .table-con__row .title .label--new,
.page--qna .notice-con .table-con__row .title .label-box,
.page--qna .notice-con .table-con__row .title .label--new,
.page--qna .qna-con .table-con__row .title .label-box,
.page--qna .qna-con .table-con__row .title .label--new,
.page--my-page .notice-con .table-con__row .title .label-box,
.page--my-page .notice-con .table-con__row .title .label--new,
.page--my-page .qna-con .table-con__row .title .label-box,
.page--my-page .qna-con .table-con__row .title .label--new {
  margin-left: 10px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice .notice-con .table-con__row .title .label-box,
  .page--notice .notice-con .table-con__row .title .label--new,
  .page--notice .qna-con .table-con__row .title .label-box,
  .page--notice .qna-con .table-con__row .title .label--new,
  .page--qna .notice-con .table-con__row .title .label-box,
  .page--qna .notice-con .table-con__row .title .label--new,
  .page--qna .qna-con .table-con__row .title .label-box,
  .page--qna .qna-con .table-con__row .title .label--new,
  .page--my-page .notice-con .table-con__row .title .label-box,
  .page--my-page .notice-con .table-con__row .title .label--new,
  .page--my-page .qna-con .table-con__row .title .label-box,
  .page--my-page .qna-con .table-con__row .title .label--new {
    margin-left: 6px;
  }
}
.page--notice .notice-con .table-con__row .title .label--file,
.page--notice .qna-con .table-con__row .title .label--file,
.page--qna .notice-con .table-con__row .title .label--file,
.page--qna .qna-con .table-con__row .title .label--file,
.page--my-page .notice-con .table-con__row .title .label--file,
.page--my-page .qna-con .table-con__row .title .label--file {
  width: 24px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_clip-66134721c5964a785867529fc95b599f.png") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice .notice-con .table-con__row .title .label--file,
  .page--notice .qna-con .table-con__row .title .label--file,
  .page--qna .notice-con .table-con__row .title .label--file,
  .page--qna .qna-con .table-con__row .title .label--file,
  .page--my-page .notice-con .table-con__row .title .label--file,
  .page--my-page .qna-con .table-con__row .title .label--file {
    width: 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--notice .notice-con .table-con__row .title .label--file,
  .page--notice .qna-con .table-con__row .title .label--file,
  .page--qna .notice-con .table-con__row .title .label--file,
  .page--qna .qna-con .table-con__row .title .label--file,
  .page--my-page .notice-con .table-con__row .title .label--file,
  .page--my-page .qna-con .table-con__row .title .label--file {
    width: 16px;
  }
}
.page--notice .notice-con .table-con__row .title .label,
.page--notice .qna-con .table-con__row .title .label,
.page--qna .notice-con .table-con__row .title .label,
.page--qna .qna-con .table-con__row .title .label,
.page--my-page .notice-con .table-con__row .title .label,
.page--my-page .qna-con .table-con__row .title .label {
  display: none;
  flex-shrink: 0;
}
.page--notice .notice-con .table-con__row .title.new .label--new,
.page--notice .qna-con .table-con__row .title.new .label--new,
.page--qna .notice-con .table-con__row .title.new .label--new,
.page--qna .qna-con .table-con__row .title.new .label--new,
.page--my-page .notice-con .table-con__row .title.new .label--new,
.page--my-page .qna-con .table-con__row .title.new .label--new {
  display: inline-block;
}
.page--notice .notice-con .table-con__row .title.file .label--file,
.page--notice .qna-con .table-con__row .title.file .label--file,
.page--qna .notice-con .table-con__row .title.file .label--file,
.page--qna .qna-con .table-con__row .title.file .label--file,
.page--my-page .notice-con .table-con__row .title.file .label--file,
.page--my-page .qna-con .table-con__row .title.file .label--file {
  display: inline-block;
}
.page--notice .notice-con .table-con__row .title.comment .label--comment,
.page--notice .qna-con .table-con__row .title.comment .label--comment,
.page--qna .notice-con .table-con__row .title.comment .label--comment,
.page--qna .qna-con .table-con__row .title.comment .label--comment,
.page--my-page .notice-con .table-con__row .title.comment .label--comment,
.page--my-page .qna-con .table-con__row .title.comment .label--comment {
  display: inline-block;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice .notice-con .table-con .table--notice-list .table-con__header,
  .page--notice .notice-con .table-con .table--notice-list .table-con__row,
  .page--notice .qna-con .table-con .table--notice-list .table-con__header,
  .page--notice .qna-con .table-con .table--notice-list .table-con__row,
  .page--qna .notice-con .table-con .table--notice-list .table-con__header,
  .page--qna .notice-con .table-con .table--notice-list .table-con__row,
  .page--qna .qna-con .table-con .table--notice-list .table-con__header,
  .page--qna .qna-con .table-con .table--notice-list .table-con__row,
  .page--my-page .notice-con .table-con .table--notice-list .table-con__header,
  .page--my-page .notice-con .table-con .table--notice-list .table-con__row,
  .page--my-page .qna-con .table-con .table--notice-list .table-con__header,
  .page--my-page .qna-con .table-con .table--notice-list .table-con__row {
    grid-template-columns: 52px 1fr 160px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--notice .notice-con .table-con .table--notice-list .table-con__header,
  .page--notice .notice-con .table-con .table--notice-list .table-con__row,
  .page--notice .qna-con .table-con .table--notice-list .table-con__header,
  .page--notice .qna-con .table-con .table--notice-list .table-con__row,
  .page--qna .notice-con .table-con .table--notice-list .table-con__header,
  .page--qna .notice-con .table-con .table--notice-list .table-con__row,
  .page--qna .qna-con .table-con .table--notice-list .table-con__header,
  .page--qna .qna-con .table-con .table--notice-list .table-con__row,
  .page--my-page .notice-con .table-con .table--notice-list .table-con__header,
  .page--my-page .notice-con .table-con .table--notice-list .table-con__row,
  .page--my-page .qna-con .table-con .table--notice-list .table-con__header,
  .page--my-page .qna-con .table-con .table--notice-list .table-con__row {
    grid-template-columns: 40px 1fr 70px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice .notice-con .table-con .table--notice-list .table-con__header .view,
  .page--notice .notice-con .table-con .table--notice-list .table-con__header .date,
  .page--notice .qna-con .table-con .table--notice-list .table-con__header .view,
  .page--notice .qna-con .table-con .table--notice-list .table-con__header .date,
  .page--qna .notice-con .table-con .table--notice-list .table-con__header .view,
  .page--qna .notice-con .table-con .table--notice-list .table-con__header .date,
  .page--qna .qna-con .table-con .table--notice-list .table-con__header .view,
  .page--qna .qna-con .table-con .table--notice-list .table-con__header .date,
  .page--my-page .notice-con .table-con .table--notice-list .table-con__header .view,
  .page--my-page .notice-con .table-con .table--notice-list .table-con__header .date,
  .page--my-page .qna-con .table-con .table--notice-list .table-con__header .view,
  .page--my-page .qna-con .table-con .table--notice-list .table-con__header .date {
    display: none;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice .notice-con .table-con .table--notice-list .table-con__row,
  .page--notice .qna-con .table-con .table--notice-list .table-con__row,
  .page--qna .notice-con .table-con .table--notice-list .table-con__row,
  .page--qna .qna-con .table-con .table--notice-list .table-con__row,
  .page--my-page .notice-con .table-con .table--notice-list .table-con__row,
  .page--my-page .qna-con .table-con .table--notice-list .table-con__row {
    grid-template-rows: auto auto;
    grid-auto-flow: row;
    grid-template-areas: "num title name" "num date name";
    row-gap: 8px;
    padding: 10px 0;
  }
  .page--notice .notice-con .table-con .table--notice-list .table-con__row .col,
  .page--notice .qna-con .table-con .table--notice-list .table-con__row .col,
  .page--qna .notice-con .table-con .table--notice-list .table-con__row .col,
  .page--qna .qna-con .table-con .table--notice-list .table-con__row .col,
  .page--my-page .notice-con .table-con .table--notice-list .table-con__row .col,
  .page--my-page .qna-con .table-con .table--notice-list .table-con__row .col {
    min-height: 20px;
    align-items: start;
  }
  .page--notice .notice-con .table-con .table--notice-list .table-con__row .list-num,
  .page--notice .qna-con .table-con .table--notice-list .table-con__row .list-num,
  .page--qna .notice-con .table-con .table--notice-list .table-con__row .list-num,
  .page--qna .qna-con .table-con .table--notice-list .table-con__row .list-num,
  .page--my-page .notice-con .table-con .table--notice-list .table-con__row .list-num,
  .page--my-page .qna-con .table-con .table--notice-list .table-con__row .list-num {
    height: fit-content;
    grid-area: num;
    background-size: 16px auto;
  }
  .page--notice .notice-con .table-con .table--notice-list .table-con__row .title,
  .page--notice .qna-con .table-con .table--notice-list .table-con__row .title,
  .page--qna .notice-con .table-con .table--notice-list .table-con__row .title,
  .page--qna .qna-con .table-con .table--notice-list .table-con__row .title,
  .page--my-page .notice-con .table-con .table--notice-list .table-con__row .title,
  .page--my-page .qna-con .table-con .table--notice-list .table-con__row .title {
    align-items: start;
  }
  .page--notice .notice-con .table-con .table--notice-list .table-con__row .title span,
  .page--notice .qna-con .table-con .table--notice-list .table-con__row .title span,
  .page--qna .notice-con .table-con .table--notice-list .table-con__row .title span,
  .page--qna .qna-con .table-con .table--notice-list .table-con__row .title span,
  .page--my-page .notice-con .table-con .table--notice-list .table-con__row .title span,
  .page--my-page .qna-con .table-con .table--notice-list .table-con__row .title span {
    vertical-align: middle;
  }
  .page--notice .notice-con .table-con .table--notice-list .table-con__row .title .label--new,
  .page--notice .qna-con .table-con .table--notice-list .table-con__row .title .label--new,
  .page--qna .notice-con .table-con .table--notice-list .table-con__row .title .label--new,
  .page--qna .qna-con .table-con .table--notice-list .table-con__row .title .label--new,
  .page--my-page .notice-con .table-con .table--notice-list .table-con__row .title .label--new,
  .page--my-page .qna-con .table-con .table--notice-list .table-con__row .title .label--new {
    font-size: 15px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) and (orientation: portrait) and (max-width: 767px), (orientation: portrait) and (max-width: 1024px) and (orientation: landscape) and (max-width: 932px), (orientation: landscape) and (max-width: 1366px) and (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1366px) and (orientation: landscape) and (max-width: 932px) {
  .page--notice .notice-con .table-con .table--notice-list .table-con__row .title .label--new,
  .page--notice .qna-con .table-con .table--notice-list .table-con__row .title .label--new,
  .page--qna .notice-con .table-con .table--notice-list .table-con__row .title .label--new,
  .page--qna .qna-con .table-con .table--notice-list .table-con__row .title .label--new,
  .page--my-page .notice-con .table-con .table--notice-list .table-con__row .title .label--new,
  .page--my-page .qna-con .table-con .table--notice-list .table-con__row .title .label--new {
    font-size: 12px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice .notice-con .table-con .table--notice-list .table-con__row .view,
  .page--notice .qna-con .table-con .table--notice-list .table-con__row .view,
  .page--qna .notice-con .table-con .table--notice-list .table-con__row .view,
  .page--qna .qna-con .table-con .table--notice-list .table-con__row .view,
  .page--my-page .notice-con .table-con .table--notice-list .table-con__row .view,
  .page--my-page .qna-con .table-con .table--notice-list .table-con__row .view {
    display: none;
  }
  .page--notice .notice-con .table-con .table--notice-list .table-con__row .name,
  .page--notice .qna-con .table-con .table--notice-list .table-con__row .name,
  .page--qna .notice-con .table-con .table--notice-list .table-con__row .name,
  .page--qna .qna-con .table-con .table--notice-list .table-con__row .name,
  .page--my-page .notice-con .table-con .table--notice-list .table-con__row .name,
  .page--my-page .qna-con .table-con .table--notice-list .table-con__row .name {
    grid-area: name;
    grid-row: span 2;
  }
  .page--notice .notice-con .table-con .table--notice-list .table-con__row .date,
  .page--notice .qna-con .table-con .table--notice-list .table-con__row .date,
  .page--qna .notice-con .table-con .table--notice-list .table-con__row .date,
  .page--qna .qna-con .table-con .table--notice-list .table-con__row .date,
  .page--my-page .notice-con .table-con .table--notice-list .table-con__row .date,
  .page--my-page .qna-con .table-con .table--notice-list .table-con__row .date {
    justify-content: start;
    font-weight: 400;
    font-size: 15px;
  }
}
.page--notice .btn-con,
.page--qna .btn-con,
.page--my-page .btn-con {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice .btn-con,
  .page--qna .btn-con,
  .page--my-page .btn-con {
    margin-top: 36px;
  }
}
.page--notice .btn-con .btn,
.page--qna .btn-con .btn,
.page--my-page .btn-con .btn {
  border-radius: 100px;
  height: 50px;
  padding: 0 28px;
  font-size: 1.8rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice .btn-con .btn,
  .page--qna .btn-con .btn,
  .page--my-page .btn-con .btn {
    height: 40px;
    font-size: 15px;
    padding: 0 18px;
    gap: 4px;
  }
}
.page--notice .btn-con .btn--save,
.page--qna .btn-con .btn--save,
.page--my-page .btn-con .btn--save {
  background: #009A85;
}
.page--notice .btn-con .btn--save .icon,
.page--qna .btn-con .btn--save .icon,
.page--my-page .btn-con .btn--save .icon {
  background-image: url("/assets/images/icon/ic_save-bold-0c8279a91f5ece996f8dd2b43898fdce.png");
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--notice .btn-con .btn-delete,
  .page--qna .btn-con .btn-delete,
  .page--my-page .btn-con .btn-delete {
    display: flex;
  }
}
.page--notice .btn-con .btn-edit,
.page--qna .btn-con .btn-edit,
.page--my-page .btn-con .btn-edit {
  width: auto;
  background: #009A85;
  color: #fff;
}
.page--notice .btn-con .btn-edit .icon,
.page--qna .btn-con .btn-edit .icon,
.page--my-page .btn-con .btn-edit .icon {
  width: 28px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_edit-d13d2a7535824e58fd6f171f32aeacea.png") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice .btn-con .btn-edit .icon,
  .page--qna .btn-con .btn-edit .icon,
  .page--my-page .btn-con .btn-edit .icon {
    width: 24px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--notice .btn-con .btn-edit .icon,
  .page--qna .btn-con .btn-edit .icon,
  .page--my-page .btn-con .btn-edit .icon {
    width: 20px;
  }
}
.page--notice .form-input,
.page--qna .form-input,
.page--my-page .form-input {
  height: 57px;
  text-align: left;
  border-radius: 6px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice .form-input,
  .page--qna .form-input,
  .page--my-page .form-input {
    height: 40px;
    font-size: 16px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--notice .form-input,
  .page--qna .form-input,
  .page--my-page .form-input {
    font-size: 14px;
  }
}
.page--notice .form-input::placeholder,
.page--qna .form-input::placeholder,
.page--my-page .form-input::placeholder {
  color: #8B8B8B;
}
.page--notice .form-textarea,
.page--qna .form-textarea,
.page--my-page .form-textarea {
  border-radius: 6px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice .form-textarea,
  .page--qna .form-textarea,
  .page--my-page .form-textarea {
    font-size: 16px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--notice .form-textarea,
  .page--qna .form-textarea,
  .page--my-page .form-textarea {
    font-size: 14px;
  }
}
.page--notice .form-input:focus,
.page--notice textarea:focus,
.page--qna .form-input:focus,
.page--qna textarea:focus,
.page--my-page .form-input:focus,
.page--my-page textarea:focus {
  border-color: #232323;
  color: #232323;
}

.page--notice-detail .notice-con,
.page--notice-detail .qna-con,
.page--qna-detail .notice-con,
.page--qna-detail .qna-con {
  padding: 4rem 5rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice-detail .notice-con,
  .page--notice-detail .qna-con,
  .page--qna-detail .notice-con,
  .page--qna-detail .qna-con {
    padding: 24px 0 0;
  }
}
.page--notice-detail .notice-detail-con,
.page--notice-detail .qna-detail-con,
.page--qna-detail .notice-detail-con,
.page--qna-detail .qna-detail-con {
  padding: 4rem;
  margin-bottom: 20px;
  border: 1px solid #C0C0C0;
  border-radius: 10px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice-detail .notice-detail-con,
  .page--notice-detail .qna-detail-con,
  .page--qna-detail .notice-detail-con,
  .page--qna-detail .qna-detail-con {
    padding: 30px 24px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #C0C0C0;
    margin-bottom: 40px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--notice-detail .notice-detail-con,
  .page--notice-detail .qna-detail-con,
  .page--qna-detail .notice-detail-con,
  .page--qna-detail .qna-detail-con {
    padding: 20px 16px;
    margin-bottom: 28px;
  }
}
.page--notice-detail .notice-detail-con__title,
.page--notice-detail .qna-detail-con__title,
.page--qna-detail .notice-detail-con__title,
.page--qna-detail .qna-detail-con__title {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--notice-detail .notice-detail-con__title,
  .page--notice-detail .qna-detail-con__title,
  .page--qna-detail .notice-detail-con__title,
  .page--qna-detail .qna-detail-con__title {
    gap: 8px;
  }
}
.page--notice-detail .notice-detail-con__title h3,
.page--notice-detail .qna-detail-con__title h3,
.page--qna-detail .notice-detail-con__title h3,
.page--qna-detail .qna-detail-con__title h3 {
  font-weight: 700;
  display: flex;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--notice-detail .notice-detail-con__title h3,
  .page--notice-detail .qna-detail-con__title h3,
  .page--qna-detail .notice-detail-con__title h3,
  .page--qna-detail .qna-detail-con__title h3 {
    font-size: 20px;
  }
}
.page--notice-detail .notice-detail-con__info,
.page--notice-detail .qna-detail-con__info,
.page--qna-detail .notice-detail-con__info,
.page--qna-detail .qna-detail-con__info {
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
  border-bottom: 1px solid #D6D6D6;
  padding-bottom: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice-detail .notice-detail-con__info,
  .page--notice-detail .qna-detail-con__info,
  .page--qna-detail .notice-detail-con__info,
  .page--qna-detail .qna-detail-con__info {
    justify-content: left;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--notice-detail .notice-detail-con__info,
  .page--notice-detail .qna-detail-con__info,
  .page--qna-detail .notice-detail-con__info,
  .page--qna-detail .qna-detail-con__info {
    gap: 0 10px;
  }
}
.page--notice-detail .notice-detail-con__info .item,
.page--notice-detail .qna-detail-con__info .item,
.page--qna-detail .notice-detail-con__info .item,
.page--qna-detail .qna-detail-con__info .item {
  min-height: 25px;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 5px;
  font-size: 2.1rem;
  color: #8B8B8B;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--notice-detail .notice-detail-con__info .item,
  .page--notice-detail .qna-detail-con__info .item,
  .page--qna-detail .notice-detail-con__info .item,
  .page--qna-detail .qna-detail-con__info .item {
    font-size: 13px;
    gap: 2px;
  }
}
.page--notice-detail .notice-detail-con__info .item .icon,
.page--notice-detail .qna-detail-con__info .item .icon,
.page--qna-detail .notice-detail-con__info .item .icon,
.page--qna-detail .qna-detail-con__info .item .icon {
  flex-shrink: 0;
  width: 24px;
  aspect-ratio: 1;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice-detail .notice-detail-con__info .item .icon,
  .page--notice-detail .qna-detail-con__info .item .icon,
  .page--qna-detail .notice-detail-con__info .item .icon,
  .page--qna-detail .qna-detail-con__info .item .icon {
    width: 22px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--notice-detail .notice-detail-con__info .item .icon,
  .page--notice-detail .qna-detail-con__info .item .icon,
  .page--qna-detail .notice-detail-con__info .item .icon,
  .page--qna-detail .qna-detail-con__info .item .icon {
    width: 20px;
  }
}
.page--notice-detail .notice-detail-con__info .item.status,
.page--notice-detail .qna-detail-con__info .item.status,
.page--qna-detail .notice-detail-con__info .item.status,
.page--qna-detail .qna-detail-con__info .item.status {
  color: #009A85;
  font-weight: 700;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice-detail .notice-detail-con__info .item.status,
  .page--notice-detail .qna-detail-con__info .item.status,
  .page--qna-detail .notice-detail-con__info .item.status,
  .page--qna-detail .qna-detail-con__info .item.status {
    order: 99;
  }
}
.page--notice-detail .notice-detail-con__info .item.status .icon,
.page--notice-detail .qna-detail-con__info .item.status .icon,
.page--qna-detail .notice-detail-con__info .item.status .icon,
.page--qna-detail .qna-detail-con__info .item.status .icon {
  background: url("/assets/images/icon/ic_solved-24d8446984deaf75c292b18127639d5e.png") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice-detail .notice-detail-con__info .item.status .icon,
  .page--notice-detail .qna-detail-con__info .item.status .icon,
  .page--qna-detail .notice-detail-con__info .item.status .icon,
  .page--qna-detail .qna-detail-con__info .item.status .icon {
    width: 18px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--notice-detail .notice-detail-con__info .item.status .icon,
  .page--notice-detail .qna-detail-con__info .item.status .icon,
  .page--qna-detail .notice-detail-con__info .item.status .icon,
  .page--qna-detail .qna-detail-con__info .item.status .icon {
    width: 14px;
  }
}
.page--notice-detail .notice-detail-con__info .item.name .icon,
.page--notice-detail .qna-detail-con__info .item.name .icon,
.page--qna-detail .notice-detail-con__info .item.name .icon,
.page--qna-detail .qna-detail-con__info .item.name .icon {
  background: url("/assets/images/icon/ic_user-dc910b2738507eabc1e3fa70ad24b0ac.png") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--notice-detail .notice-detail-con__info .item.name,
  .page--notice-detail .qna-detail-con__info .item.name,
  .page--qna-detail .notice-detail-con__info .item.name,
  .page--qna-detail .qna-detail-con__info .item.name {
    width: 100%;
  }
}
.page--notice-detail .notice-detail-con__info .item.views .icon,
.page--notice-detail .qna-detail-con__info .item.views .icon,
.page--qna-detail .notice-detail-con__info .item.views .icon,
.page--qna-detail .qna-detail-con__info .item.views .icon {
  background: url("/assets/images/icon/ic_view-5fa6a439ca1f5854b43e4e4c75410bc9.png") no-repeat center center/100% auto;
}
.page--notice-detail .notice-detail-con__info .item.date .icon,
.page--notice-detail .qna-detail-con__info .item.date .icon,
.page--qna-detail .notice-detail-con__info .item.date .icon,
.page--qna-detail .qna-detail-con__info .item.date .icon {
  background: url("/assets/images/icon/ic_calendar-9c684e5de9cbbff895df7a7728d1390a.png") no-repeat center center/100% auto;
}
.page--notice-detail .notice-detail-con__body,
.page--notice-detail .qna-detail-con__body,
.page--qna-detail .notice-detail-con__body,
.page--qna-detail .qna-detail-con__body {
  padding-top: 3rem;
}
.page--notice-detail .notice-detail-con__attachments,
.page--notice-detail .qna-detail-con__attachments,
.page--qna-detail .notice-detail-con__attachments,
.page--qna-detail .qna-detail-con__attachments {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 10px;
  margin-bottom: 3rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice-detail .notice-detail-con__attachments,
  .page--notice-detail .qna-detail-con__attachments,
  .page--qna-detail .notice-detail-con__attachments,
  .page--qna-detail .qna-detail-con__attachments {
    flex-wrap: wrap;
    margin-bottom: 24px;
  }
}
.page--notice-detail .notice-detail-con__attachments .file-item,
.page--notice-detail .qna-detail-con__attachments .file-item,
.page--qna-detail .notice-detail-con__attachments .file-item,
.page--qna-detail .qna-detail-con__attachments .file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  background: #EDF3F6;
  padding: 10px 15px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--notice-detail .notice-detail-con__attachments .file-item,
  .page--notice-detail .qna-detail-con__attachments .file-item,
  .page--qna-detail .notice-detail-con__attachments .file-item,
  .page--qna-detail .qna-detail-con__attachments .file-item {
    padding: 8px;
    gap: 6px;
  }
}
.page--notice-detail .notice-detail-con__attachments .file-item__thumb::before,
.page--notice-detail .qna-detail-con__attachments .file-item__thumb::before,
.page--qna-detail .notice-detail-con__attachments .file-item__thumb::before,
.page--qna-detail .qna-detail-con__attachments .file-item__thumb::before {
  font-size: 24px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice-detail .notice-detail-con__attachments .file-item__thumb::before,
  .page--notice-detail .qna-detail-con__attachments .file-item__thumb::before,
  .page--qna-detail .notice-detail-con__attachments .file-item__thumb::before,
  .page--qna-detail .qna-detail-con__attachments .file-item__thumb::before {
    font-size: 21px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--notice-detail .notice-detail-con__attachments .file-item__thumb::before,
  .page--notice-detail .qna-detail-con__attachments .file-item__thumb::before,
  .page--qna-detail .notice-detail-con__attachments .file-item__thumb::before,
  .page--qna-detail .qna-detail-con__attachments .file-item__thumb::before {
    font-size: 17px;
  }
}
.page--notice-detail .notice-detail-con__attachments .file-item__thumb i,
.page--notice-detail .qna-detail-con__attachments .file-item__thumb i,
.page--qna-detail .notice-detail-con__attachments .file-item__thumb i,
.page--qna-detail .qna-detail-con__attachments .file-item__thumb i {
  font-size: 22px;
  color: #556370;
}
.page--notice-detail .notice-detail-con__attachments .file-item__name,
.page--notice-detail .qna-detail-con__attachments .file-item__name,
.page--qna-detail .notice-detail-con__attachments .file-item__name,
.page--qna-detail .qna-detail-con__attachments .file-item__name {
  font-size: 2.4rem;
  color: #231F20;
  word-break: break-all;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--notice-detail .notice-detail-con__attachments .file-item__name,
  .page--notice-detail .qna-detail-con__attachments .file-item__name,
  .page--qna-detail .notice-detail-con__attachments .file-item__name,
  .page--qna-detail .qna-detail-con__attachments .file-item__name {
    font-size: 14px;
  }
}
.page--notice-detail .notice-detail-con__attachments .file-item__size,
.page--notice-detail .qna-detail-con__attachments .file-item__size,
.page--qna-detail .notice-detail-con__attachments .file-item__size,
.page--qna-detail .qna-detail-con__attachments .file-item__size {
  font-size: 1.8rem;
  color: #8B8B8B;
  margin-right: 5px;
  flex-shrink: 0;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--notice-detail .notice-detail-con__attachments .file-item__size,
  .page--notice-detail .qna-detail-con__attachments .file-item__size,
  .page--qna-detail .notice-detail-con__attachments .file-item__size,
  .page--qna-detail .qna-detail-con__attachments .file-item__size {
    font-size: 13px;
  }
}
.page--notice-detail .notice-detail-con__attachments .file-item__download,
.page--notice-detail .qna-detail-con__attachments .file-item__download,
.page--qna-detail .notice-detail-con__attachments .file-item__download,
.page--qna-detail .qna-detail-con__attachments .file-item__download {
  width: 3.2rem;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_download-bk-53aa76fc8811fe41051ddfa9285edb76.png") no-repeat center center/100% auto;
  flex-shrink: 0;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--notice-detail .notice-detail-con__attachments .file-item__download,
  .page--notice-detail .qna-detail-con__attachments .file-item__download,
  .page--qna-detail .notice-detail-con__attachments .file-item__download,
  .page--qna-detail .qna-detail-con__attachments .file-item__download {
    width: 20px;
  }
}
.page--notice-detail .notice-detail-con__txt p,
.page--notice-detail .qna-detail-con__txt p,
.page--qna-detail .notice-detail-con__txt p,
.page--qna-detail .qna-detail-con__txt p {
  font-size: 2.4rem;
  line-height: 1.4;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--notice-detail .notice-detail-con__txt p,
  .page--notice-detail .qna-detail-con__txt p,
  .page--qna-detail .notice-detail-con__txt p,
  .page--qna-detail .qna-detail-con__txt p {
    font-size: 16px;
  }
}
.page--notice-detail .qna-detail-con__mark,
.page--qna-detail .qna-detail-con__mark {
  margin-right: 10px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice-detail .qna-detail-con__mark,
  .page--qna-detail .qna-detail-con__mark {
    margin-right: 8px;
  }
}
.page--notice-detail .reply-tit,
.page--qna-detail .reply-tit {
  margin-right: 10px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--notice-detail .reply-tit,
  .page--qna-detail .reply-tit {
    margin-right: 8px;
  }
}
.page--notice-detail .qna-detail-con.question-con .qna-detail-con__title .qna-detail-con__mark,
.page--qna-detail .qna-detail-con.question-con .qna-detail-con__title .qna-detail-con__mark {
  color: #009A85;
}
.page--notice-detail .qna-detail-con.answer-con .qna-detail-con__title .qna-detail-con__mark,
.page--qna-detail .qna-detail-con.answer-con .qna-detail-con__title .qna-detail-con__mark {
  color: #0072BC;
}
.page--notice-detail .notice-comment-con,
.page--notice-detail .qna-comment-con,
.page--qna-detail .notice-comment-con,
.page--qna-detail .qna-comment-con {
  margin-top: 10rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice-detail .notice-comment-con,
  .page--notice-detail .qna-comment-con,
  .page--qna-detail .notice-comment-con,
  .page--qna-detail .qna-comment-con {
    margin-top: 0;
  }
}
.page--notice-detail .notice-comment-con__title,
.page--notice-detail .qna-comment-con__title,
.page--qna-detail .notice-comment-con__title,
.page--qna-detail .qna-comment-con__title {
  padding-bottom: 2rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--notice-detail .notice-comment-con__title,
  .page--notice-detail .qna-comment-con__title,
  .page--qna-detail .notice-comment-con__title,
  .page--qna-detail .qna-comment-con__title {
    padding-bottom: 8px;
  }
}
.page--notice-detail .notice-comment-con__title h6,
.page--notice-detail .qna-comment-con__title h6,
.page--qna-detail .notice-comment-con__title h6,
.page--qna-detail .qna-comment-con__title h6 {
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.2;
  color: #232323;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--notice-detail .notice-comment-con__title h6,
  .page--notice-detail .qna-comment-con__title h6,
  .page--qna-detail .notice-comment-con__title h6,
  .page--qna-detail .qna-comment-con__title h6 {
    font-size: 16px;
  }
}
.page--notice-detail .notice-comment-con__list,
.page--notice-detail .qna-comment-con__list,
.page--qna-detail .notice-comment-con__list,
.page--qna-detail .qna-comment-con__list {
  display: flex;
  flex-direction: column;
  align-items: start;
  margin-bottom: 20px;
}
.page--notice-detail .notice-comment-con__item,
.page--notice-detail .qna-comment-con__item,
.page--qna-detail .notice-comment-con__item,
.page--qna-detail .qna-comment-con__item {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  align-items: start;
  gap: 15px;
  padding: 20px 0;
  border-top: 1px solid #C0C0C0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice-detail .notice-comment-con__item,
  .page--notice-detail .qna-comment-con__item,
  .page--qna-detail .notice-comment-con__item,
  .page--qna-detail .qna-comment-con__item {
    padding: 12px 0 16px;
    gap: 8px;
  }
}
.page--notice-detail .notice-comment-con__info,
.page--notice-detail .qna-comment-con__info,
.page--qna-detail .notice-comment-con__info,
.page--qna-detail .qna-comment-con__info {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.page--notice-detail .notice-comment-con__info .name,
.page--notice-detail .qna-comment-con__info .name,
.page--qna-detail .notice-comment-con__info .name,
.page--qna-detail .qna-comment-con__info .name {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: normal;
  color: #232323;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--notice-detail .notice-comment-con__info .name,
  .page--notice-detail .qna-comment-con__info .name,
  .page--qna-detail .notice-comment-con__info .name,
  .page--qna-detail .qna-comment-con__info .name {
    font-size: 15px;
    gap: 8px;
  }
}
.page--notice-detail .notice-comment-con__info .date,
.page--notice-detail .qna-comment-con__info .date,
.page--qna-detail .notice-comment-con__info .date,
.page--qna-detail .qna-comment-con__info .date {
  font-size: 2.1rem;
  color: #8B8B8B;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--notice-detail .notice-comment-con__info .date,
  .page--notice-detail .qna-comment-con__info .date,
  .page--qna-detail .notice-comment-con__info .date,
  .page--qna-detail .qna-comment-con__info .date {
    font-size: 13px;
  }
}
.page--notice-detail .notice-comment-con__txt,
.page--notice-detail .qna-comment-con__txt,
.page--qna-detail .notice-comment-con__txt,
.page--qna-detail .qna-comment-con__txt {
  width: 100%;
  font-size: 2.4rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--notice-detail .notice-comment-con__txt,
  .page--notice-detail .qna-comment-con__txt,
  .page--qna-detail .notice-comment-con__txt,
  .page--qna-detail .qna-comment-con__txt {
    font-size: 15px;
  }
}
.page--notice-detail .textarea-wrapper,
.page--qna-detail .textarea-wrapper {
  border-radius: 6px;
  border: 1px solid #D6D6D6;
  background: #fff;
}
.page--notice-detail .textarea-wrapper textarea,
.page--qna-detail .textarea-wrapper textarea {
  height: 100px;
  padding: 12px 20px;
  border: none;
  font-size: 2.4rem;
  background: transparent;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice-detail .textarea-wrapper textarea,
  .page--qna-detail .textarea-wrapper textarea {
    height: 40px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--notice-detail .textarea-wrapper textarea,
  .page--qna-detail .textarea-wrapper textarea {
    font-size: 14px;
    padding: 10px 12px;
  }
}
.page--notice-detail .textarea-wrapper .textarea-action,
.page--qna-detail .textarea-wrapper .textarea-action {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  gap: 10px;
  padding: 5px 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice-detail .textarea-wrapper .textarea-action,
  .page--qna-detail .textarea-wrapper .textarea-action {
    gap: 2px;
    padding: 6px 10px;
  }
}
.page--notice-detail .textarea-wrapper .textarea-action .count,
.page--qna-detail .textarea-wrapper .textarea-action .count {
  color: #8B8B8B;
  font-size: 2.1rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--notice-detail .textarea-wrapper .textarea-action .count,
  .page--qna-detail .textarea-wrapper .textarea-action .count {
    font-size: 13px;
  }
}
.page--notice-detail .textarea-wrapper .textarea-action .count .num,
.page--qna-detail .textarea-wrapper .textarea-action .count .num {
  color: #232323;
}
.page--notice-detail .textarea-wrapper .textarea-action .btn-submit,
.page--qna-detail .textarea-wrapper .textarea-action .btn-submit {
  width: 28px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/btn_submit-8a13a62baf5a31350e7972b4b09b4076.png") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice-detail .textarea-wrapper .textarea-action .btn-submit,
  .page--qna-detail .textarea-wrapper .textarea-action .btn-submit {
    width: 24px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--notice-detail .textarea-wrapper .textarea-action .btn-submit,
  .page--qna-detail .textarea-wrapper .textarea-action .btn-submit {
    width: 20px;
  }
}
.page--notice-detail .textarea-wrapper.is-filled .textarea-action .btn-submit,
.page--qna-detail .textarea-wrapper.is-filled .textarea-action .btn-submit {
  background: url("/assets/images/icon/btn-submit-green-245ab5a1ca4d32904f937e8b3521940e.png") no-repeat center center/100% auto;
}
.page--notice-detail .answer-form .textarea-wrapper textarea,
.page--qna-detail .answer-form .textarea-wrapper textarea {
  height: 190px;
}
.page--notice-detail .action-buttons,
.page--qna-detail .action-buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--notice-detail .action-buttons,
  .page--qna-detail .action-buttons {
    gap: 0;
  }
}
.page--notice-detail .action-buttons .action-btn,
.page--qna-detail .action-buttons .action-btn {
  width: 24px;
  aspect-ratio: 1;
}
.page--notice-detail .action-buttons .action-btn--edit,
.page--qna-detail .action-buttons .action-btn--edit {
  background: url("/assets/images/icon/ic_edit-gr-2526e118080a5d9a1d623006aabfcca9.png") no-repeat center center/100% auto;
}
.page--notice-detail .action-buttons .action-btn--delete,
.page--qna-detail .action-buttons .action-btn--delete {
  background: url("/assets/images/icon/ic_delete-gr-cd8323a68ed8a34685894e00d29f2dd4.png") no-repeat center center/100% auto;
}

.page--notice-form .notice-con,
.page--notice-form .qna-con,
.page--qna-form .notice-con,
.page--qna-form .qna-con {
  padding: 4rem 5rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice-form .notice-con,
  .page--notice-form .qna-con,
  .page--qna-form .notice-con,
  .page--qna-form .qna-con {
    padding: 24px 0 0;
  }
}
.page--notice-form .form-group,
.page--qna-form .form-group {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-items: start;
  gap: 15px;
  margin-top: 5rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice-form .form-group,
  .page--qna-form .form-group {
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
  }
}
.page--notice-form .form-group:first-child,
.page--qna-form .form-group:first-child {
  margin-top: 0;
  padding: 22px 0;
}
.page--notice-form .form-group.title-group,
.page--qna-form .form-group.title-group {
  padding: 22px 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice-form .form-group.title-group,
  .page--qna-form .form-group.title-group {
    padding: 0;
  }
}
.page--notice-form .form-group.content-group,
.page--qna-form .form-group.content-group {
  align-items: start;
}
.page--notice-form .form-group.title-group .form-label, .page--notice-form .form-group.file-group .form-label,
.page--qna-form .form-group.title-group .form-label,
.page--qna-form .form-group.file-group .form-label {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  align-items: center;
  height: 57px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice-form .form-group.title-group .form-label, .page--notice-form .form-group.file-group .form-label,
  .page--qna-form .form-group.title-group .form-label,
  .page--qna-form .form-group.file-group .form-label {
    height: auto;
  }
}
.page--notice-form .form-label,
.page--qna-form .form-label {
  min-width: 120px;
  flex-shrink: 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice-form .form-label,
  .page--qna-form .form-label {
    width: 100%;
  }
}
.page--notice-form .file-name,
.page--qna-form .file-name {
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  color: #8B8B8B;
  background: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page--notice-form .file-upload,
.page--qna-form .file-upload {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 15px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice-form .file-upload,
  .page--qna-form .file-upload {
    gap: 10px;
  }
}
.page--notice-form .file-upload > li,
.page--qna-form .file-upload > li {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice-form .file-upload > li,
  .page--qna-form .file-upload > li {
    gap: 10px;
  }
}
.page--notice-form .file-input,
.page--qna-form .file-input {
  display: none;
}
.page--notice-form .btn-upload,
.page--qna-form .btn-upload {
  height: 57px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--notice-form .btn-upload,
  .page--qna-form .btn-upload {
    height: 40px;
  }
}

.is-teacher .btn-con .btn--save,
.is-teacher .btn-con .btn-upload,
.is-teacher .btn-con .btn-edit,
.is-teacher .btn-con .btn-write,
.is-teacher .btn-con .btn-view,
.is-teacher .btn-con .btn-upload {
  background: #0072BC !important;
}
.is-teacher .textarea-wrapper.is-filled .textarea-action .btn-submit {
  background: url("/assets/images/icon/btn-submit-blue-90e9bb157d09da74f193254c45acbd33.png") no-repeat center center/100% auto !important;
}
.is-teacher .btn-upload {
  background: #0072BC !important;
}
.is-teacher .page__inner ~ .btn-con {
  justify-content: center;
  gap: 10px;
}
.is-teacher:has(.class-details) .page__inner ~ .btn-con {
  display: none;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher:has(.class-details) .page__inner ~ .btn-con {
    display: block;
  }
  .is-teacher:has(.class-details) .page__inner ~ .btn-con button {
    margin-left: auto;
  }
}
.is-teacher .table-info__search .search-box {
  background: #F2F7FA;
}
.is-teacher .page--notice .notice-con,
.is-teacher .page--notice .qna-con,
.is-teacher .page--qna .notice-con,
.is-teacher .page--qna .qna-con {
  border-radius: 0 0 10px 10px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  padding-top: 30px;
  background: #fff !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .page--notice .notice-con,
  .is-teacher .page--notice .qna-con,
  .is-teacher .page--qna .notice-con,
  .is-teacher .page--qna .qna-con {
    padding: 24px !important;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .is-teacher .page--notice .notice-con,
  .is-teacher .page--notice .qna-con,
  .is-teacher .page--qna .notice-con,
  .is-teacher .page--qna .qna-con {
    padding: 16px !important;
  }
}
.is-teacher .page--notice .notice-con .menu-tab li > a.on,
.is-teacher .page--notice .qna-con .menu-tab li > a.on,
.is-teacher .page--qna .notice-con .menu-tab li > a.on,
.is-teacher .page--qna .qna-con .menu-tab li > a.on {
  color: #0072BC;
  border-color: #0072BC;
}
.is-teacher .page--notice .option-con,
.is-teacher .page--qna .option-con {
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  margin-top: 3rem;
}
.is-teacher .page--notice .option-con .icon,
.is-teacher .page--qna .option-con .icon {
  width: 24px;
  aspect-ratio: 1;
  background: url("/assets/images/icon/ic_fixed-c5d78c50175c846056f52d87194dadab.png") no-repeat center center/100% auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .page--notice .option-con .icon,
  .is-teacher .page--qna .option-con .icon {
    width: 22px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .is-teacher .page--notice .option-con .icon,
  .is-teacher .page--qna .option-con .icon {
    width: 20px;
  }
}
.is-teacher .page--notice .option-con .txt,
.is-teacher .page--qna .option-con .txt {
  font-size: 2.1rem;
  margin: 0 10px 0 5px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .is-teacher .page--notice .option-con .txt,
  .is-teacher .page--qna .option-con .txt {
    font-size: 14px;
    margin: 0 7px 0 3px;
  }
}
.is-teacher .page--notice .option-con .check-box,
.is-teacher .page--qna .option-con .check-box {
  display: block;
  width: 26px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #D6D6D6 url("/assets/images/icon/ic_check-84a06906f897eecff824b42bc39070e2.png") no-repeat center center/100% auto;
  cursor: pointer;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .page--notice .option-con .check-box,
  .is-teacher .page--qna .option-con .check-box {
    width: 22px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) and (orientation: portrait) and (max-width: 767px), (orientation: portrait) and (max-width: 1024px) and (orientation: landscape) and (max-width: 932px), (orientation: landscape) and (max-width: 1366px) and (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1366px) and (orientation: landscape) and (max-width: 932px) {
  .is-teacher .page--notice .option-con .check-box,
  .is-teacher .page--qna .option-con .check-box {
    width: 18px;
  }
}
.is-teacher .page--notice .option-con input[type=checkbox],
.is-teacher .page--qna .option-con input[type=checkbox] {
  display: none;
}
.is-teacher .page--notice .option-con input[type=checkbox]:checked ~ .check-box,
.is-teacher .page--qna .option-con input[type=checkbox]:checked ~ .check-box {
  border: none;
  background: #0072BC url("/assets/images/icon/ic_check-84a06906f897eecff824b42bc39070e2.png") no-repeat center center/100% auto;
}
.is-teacher .page--notice .teacher-con__tit h3,
.is-teacher .page--qna .teacher-con__tit h3 {
  font-size: 3.4rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .is-teacher .page--notice .teacher-con__tit h3,
  .is-teacher .page--qna .teacher-con__tit h3 {
    font-size: 26px;
    margin-bottom: 32px;
  }
}
.is-teacher .page--qna-detail .qna-detail-con.question-con {
  margin-bottom: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .page--qna-detail .btn-con:has(.btn-reply) {
    margin-top: 12px;
  }
}
.is-teacher .page--qna-detail .btn-con:has(.btn-reply) .btn {
  border-radius: 4px !important;
  padding: 0 16px;
}
.is-teacher .page--qna-detail .btn-con:has(.btn-reply) .btn-reply {
  margin-left: auto;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .page--qna-detail .answer-form {
    margin-bottom: 32px;
  }
}
.is-teacher .page--qna-detail .answer-form .form-group {
  margin-top: 20px;
  margin-bottom: 30px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .page--qna-detail .answer-form .form-group {
    margin-top: 16px;
    margin-bottom: 12px;
  }
}
.is-teacher .page--qna-detail .answer-form__mark {
  color: #0072BC;
}
.is-teacher .page--qna-detail .answer-form .form-group {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
.is-teacher .page--qna-detail .answer-form .form-textarea {
  height: 240px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-teacher .page--qna-detail .answer-form .form-textarea {
    height: 130px;
  }
}
.table-con .level-logo {
  display: inline-block;
  width: 95px;
  height: 36px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .table-con .level-logo {
    width: 84px;
    height: 32px;
  }
}

.level-1 .level-logo {
  background: url("/assets/images/contents/report_quest_1-d28728c2a391de1981377c346b44e9e3.png") no-repeat center center/100% auto;
}

.level.level-1 .level-logo {
  background: url("/assets/images/contents/quest_1-e385c0870a99a17629095306afbbf2e4.png") no-repeat center center/100% auto;
}

.level-resources .level.level-1 .level-logo {
  background: url("/assets/images/icon/btn_quest-1-ebb2cc1a3decc8fbdad3b549ad695c9e.png") no-repeat center center/100% auto;
}

.level.level-2 .level-logo {
  background: url("/assets/images/contents/quest_2-2adb85a14491d7bf112d0c6c2bd44f82.png") no-repeat center center/100% auto;
}

.level-resources .level.level-2 .level-logo {
  background: url("/assets/images/icon/btn_quest-2-e38565d6dad18ee0fadb2e2f1adf3d7b.png") no-repeat center center/100% auto;
}

.level.level-3 .level-logo {
  background: url("/assets/images/contents/quest_3-a992bd2d626decf397683370c90c1ea9.png") no-repeat center center/100% auto;
}

.level-resources .level.level-3 .level-logo {
  background: url("/assets/images/icon/btn_quest-3-81c6e86ed5060b61365543f81253fb95.png") no-repeat center center/100% auto;
}

.level.level-4 .level-logo {
  background: url("/assets/images/contents/quest_4-414c4a9e1665b864d96eb564e283b896.png") no-repeat center center/100% auto;
}

.level-resources .level.level-4 .level-logo {
  background: url("/assets/images/icon/btn_quest-4-27b11c66e7ca78eb33dd3721c88f2ade.png") no-repeat center center/100% auto;
}

.level.level-5 .level-logo {
  background: url("/assets/images/contents/quest_5-0b3599b5cb57ea1b1566d50d0737ea93.png") no-repeat center center/100% auto;
}

.level-resources .level.level-5 .level-logo {
  background: url("/assets/images/icon/btn_quest-5-5db1c64279ae0dbc7b45282ba02df9bf.png") no-repeat center center/100% auto;
}

.level.level-6 .level-logo {
  background: url("/assets/images/contents/quest_6-25431992b272299db75b7fa2d5fd9dab.png") no-repeat center center/100% auto;
}

.level-resources .level.level-6 .level-logo {
  background: url("/assets/images/icon/btn_quest-6-de589f97c949bc938cb3712a6f238d88.png") no-repeat center center/100% auto;
}

@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-pc {
    display: none !important;
  }
}

.is-mobile {
  display: none !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .is-mobile {
    display: block !important;
  }
}

.is-landscape {
  display: block !important;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .is-landscape {
    display: none !important;
  }
}

.is-mobile-portrait {
  display: none !important;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .is-mobile-portrait {
    display: block !important;
  }
}

.grid-col-2 {
  grid-column: span 2;
}

.grid-col-4 {
  grid-column: span 4;
}

.grid-col-8 {
  grid-column: span 8;
}

.grid-row-2 {
  grid-row: span 2;
}

.grid-row-4 {
  grid-row: span 4;
}

.grid-row-8 {
  grid-row: span 8;
}

.bd-btm-0 {
  border-bottom: none !important;
}

.custom-select--report {
  width: fit-content;
  min-width: 290px;
  font-size: 2.4rem;
  border-radius: 6px;
  margin: 0 !important;
  margin-left: auto !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .custom-select--report {
    min-width: 220px;
    min-height: 35px;
    font-size: 17px;
    line-height: 35px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .custom-select--report {
    min-width: 200px;
  }
}
.custom-select--report .custom-select__options {
  border-radius: 6px;
}
@media (hover: hover) and (pointer: fine) {
  .custom-select--report .custom-select__options li:hover {
    background: #ECF7FF;
    color: #0072BC;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .custom-select--report .custom-select__options li {
    padding-left: 2px;
  }
}

.custom-select--modal.is-selected .custom-select__selected,
.custom-select--report.is-selected .custom-select__selected {
  color: #232323;
}

.custom-select--modal {
  width: 100% !important;
  height: 5.3rem;
  line-height: 5.3rem;
  text-align: left;
  border-radius: 4px;
  border-color: #3F3F3F;
  margin: 0 !important;
  font-size: 2.1rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .custom-select--modal {
    height: 48px;
    line-height: 48px;
  }
}
.custom-select--modal .custom-select__options {
  max-height: 150px;
  border-radius: 4px;
  overflow-y: auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .custom-select--modal .custom-select__options {
    max-height: 100px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .is-teacher .custom-select--modal .custom-select__options li:hover {
    background: #ECF7FF;
    color: #0072BC;
  }
}

.custom-select--table {
  border-color: #D7DBDC;
  border-radius: 4px;
  box-shadow: none;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .custom-select--table {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    border: none;
    background: transparent;
    display: none;
    opacity: 0;
    transition: opacity 0.1s ease;
  }
}
.custom-select--table .custom-select__selected {
  color: #232323;
  padding-left: 16px;
}
.custom-select--table .custom-select__options {
  padding: 0;
  border-radius: 4px;
  border-color: #D7DBDC;
  box-shadow: none !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .custom-select--table .custom-select__options {
    top: 44px;
  }
}
.custom-select--table .custom-select__options li {
  border-radius: 0;
  height: 45px;
  padding: 0 16px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .custom-select--table .custom-select__options li {
    height: 42px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .custom-select--table .custom-select__options li {
    height: 38px;
  }
}
.custom-select--table .custom-select__options li:hover {
  background: #DFF2FF;
  color: #232323;
}
.custom-select--table.open {
  border-radius: 4px 4px 0 0;
}
.custom-select--table.is-selected {
  color: #232323;
  border-color: #D7DBDC;
}
.custom-select--table.is-selected::after {
  background: url("/assets/images/icon/ic_arr-select-5446e982d84765582eca33a5876e0a4d.svg") no-repeat center/contain !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .custom-select--table::after {
    width: 18px;
    height: 18px;
    right: 8px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .custom-select--table::after {
    width: 16px;
    height: 16px;
    right: 6px;
  }
}

.custom-select--t-menu {
  display: none;
  height: 44px;
  font-size: 18px;
  font-weight: 700;
  line-height: 44px;
  color: #232323;
  color: #8F9EA6;
  margin: 0 !important;
  border-radius: 10px 10px 0 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .custom-select--t-menu {
    display: block;
    max-width: 230px;
  }
}
.custom-select--t-menu .custom-select__selected {
  color: #0072BC !important;
  padding: 0 16px;
  border-radius: 10px 10px 0 0;
  position: relative;
  z-index: 20;
  background: #fff;
}
.custom-select--t-menu .custom-select__options {
  border: none;
  border-radius: 0 0 10px 10px;
  padding: 0;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}
.custom-select--t-menu .custom-select__options li {
  border-top: 1px solid #C0D0D9;
  border-radius: 0;
  padding-left: 16px;
}

.custom-select--t-menu.is-selected {
  border: none;
}

.custom-select--t-menu.is-selected::after {
  width: 36px;
  height: 36px;
  right: 0;
  background: url("/assets/images/icon/ic_select-arrow-067c2f5d6e9243dab891895639459403.png") no-repeat center center/100% auto;
  z-index: 30;
}

.custom-select--t-menu::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  z-index: -1;
}

.custom-select--practice {
  border-color: #D7DBDC;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 1;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .custom-select--practice {
    display: block;
    position: static;
    transform: translateY(10px);
    margin-left: auto;
  }
}
.custom-select--practice .custom-select__selected {
  color: #232323 !important;
}
.custom-select--practice.is-selected {
  border-color: #D7DBDC !important;
}
.custom-select--practice.is-selected::after {
  background: url("/assets/images/icon/ic_arr-select-5446e982d84765582eca33a5876e0a4d.svg") no-repeat center center/100% auto;
}
.custom-select--practice .custom-select__options {
  border-radius: 6px;
}
@media (hover: hover) and (pointer: fine) {
  .custom-select--practice .custom-select__options li:hover {
    background: #ECF7FF;
    color: #0072BC;
  }
}

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(12px, 2vw, 1.6rem);
  font-synthesis: none;
  user-select: none; /* 텍스트 선택 방지 */
  -webkit-user-select: none; /* 크롬/사파리 */
  -moz-user-select: none; /* 파이어폭스 */
  -ms-user-select: none; /* IE/Edge 구버전 */
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
}

textarea {
  width: 100%;
  height: 120px;
  overflow: auto; /* 스크롤은 가능하지만 */
  /* 스크롤바 숨기기 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE, Edge 구버전 */
}

textarea::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge (Chromium) */
}

/* 웹 접근성용 숨김 텍스트(스크린 리더기 전용 텍스트) */
.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;
}

/* readonly input */
.no-touch {
  pointer-events: none;
  background: #F4F4F4;
}

.drawing-area {
  touch-action: none !important; /* 패닝/줌 모두 차단 */
}

.emph-t {
  color: #009A85;
}

.fl-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.fl-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.s-b {
  justify-content: space-between;
}

.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
}

@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .page {
    padding-top: 0;
  }
  .header,
  .btn-print,
  .btn-export {
    display: none;
  }
}
:root {
  --color-red: #C3422E;
}

.page--main {
  background: url("/assets/images/common/main-bg-2-29f0c43b8ce026797483c011b81e59a6.jpg") no-repeat;
  background-position: center 42%;
  background-size: 115%;
  padding: 0 20px;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--main {
    background: url("/assets/images/common/tablet-portrait-d2ef0a32fc36b96bd8f07de88674f919.png") no-repeat;
    background-position: center;
    background-size: cover;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .page--main {
    background: url("/assets/images/common/tablet_landscape-b2a47fea064259c2937673510725408a.png") no-repeat;
    background-position: center;
    background-size: cover;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .page--main {
    background: url("/assets/images/common/mobile-landscape-e7d782ecc36bab6d8380e839efdede94.png") no-repeat;
    background-position: center;
    background-size: cover;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--main {
    background: url("/assets/images/common/mobile-portrait-2-e3b7403b0c216aa63642e31986070190.png") no-repeat;
    background-position: center;
    background-size: cover;
  }
}
.page--main .page__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7rem;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .page--main .page__inner {
    gap: 16px;
  }
}
.page--main .page__inner .logo--main {
  width: 100%;
  max-width: 700px;
  margin: auto;
  display: none;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--main .page__inner .logo--main {
    width: 55%;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--main .page__inner .logo--main {
    width: 100%;
    max-width: 315px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .page--main .page__inner .logo--main {
    max-width: 250px;
  }
}
.page--main .page__inner .logo--main img {
  width: 80%;
  margin: auto;
}
.page--main .page__inner .login-list {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  position: absolute;
  bottom: 10%;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--main .page__inner .login-list {
    flex-direction: column;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--main .page__inner .login-list {
    gap: 24px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .page--main .page__inner .login-list {
    gap: 16px;
  }
}
.page--main .page__inner .login-list__item {
  width: 100%;
  max-width: 300px;
  flex: 1;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--main .page__inner .login-list__item {
    max-width: 220px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .page--main .page__inner .login-list__item {
    max-width: 194px;
  }
}

.page--level .main-tit {
  margin-bottom: 30px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--level .main-tit {
    padding-top: 36px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--level .main-tit {
    padding-top: 36px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--level .main-tit {
    margin-bottom: 28px;
  }
}
.page--level .main-tit h2 {
  font-size: 6rem;
  font-weight: 700;
  line-height: normal;
  color: #232323;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--level .main-tit h2 {
    font-size: 26px;
  }
}
.page--level .main-tit .sub-tit {
  font-size: 3.4rem;
  font-weight: 400;
  line-height: normal;
  color: #232323;
  color: #8B8B8B;
  text-align: center;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--level .main-tit .sub-tit {
    font-size: 16px;
  }
}
.page--level .select-con {
  width: 100%;
  height: auto;
}
.page--level .select-con__list {
  width: 100%;
  max-width: 920px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 8rem;
  margin: 0 auto;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--level .select-con__list {
    padding: 0 10%;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--level .select-con__list {
    gap: 24px;
    padding: 0 12px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .page--level .select-con__list {
    max-width: 690px;
    gap: 24px 36px;
  }
}
.page--level .select-con__item {
  width: calc((100% - 16rem) / 3);
  height: auto;
  aspect-ratio: 4/5;
  padding-right: 12px;
  position: relative;
}
.page--level .select-con__item .btn-select-level {
  display: inline-block;
  line-height: 0;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  border-radius: 6px;
}
.page--level .select-con__item .btn-select-level::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.6%;
  height: 100%;
  background: rgba(25, 25, 25, 0.09);
  pointer-events: none;
  z-index: 1;
}
.page--level .select-con__item img {
  width: 100%;
  display: block;
  position: relative;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--level .select-con__item {
    width: calc((100% - 8rem) / 2);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--level .select-con__item {
    width: calc((100% - 24px) / 2);
    padding-right: 8px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .page--level .select-con__item {
    width: calc((100% - 72px) / 3);
    max-width: 147px;
    padding-right: 7px;
  }
}
.page--level .select-con__item.is-disabled img {
  filter: grayscale(100%);
  opacity: 0.9;
}
.page--level .select-con__item.is-disabled .btn-add-book {
  display: block;
}
.page--level .select-con__item .btn-add-book {
  width: 80px;
  aspect-ratio: 20/17;
  position: absolute;
  right: 0;
  top: 58%;
  background: url("/assets/images/icon/btn_add-book-38d684e381dfedc34b7e299218658aa0.png") no-repeat center right/100% auto;
  transform: translateX(3px);
  display: none;
  cursor: pointer;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--level .select-con__item .btn-add-book {
    width: 60px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .page--level .select-con__item .btn-add-book {
    width: 55px;
  }
}

@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--menu {
    margin-top: 20px;
  }
}
.page--menu .page__inner {
  min-height: calc(100dvh - 250px);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.page--menu .select-con__inner {
  max-width: 1180px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 65px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--menu .select-con__inner {
    flex-direction: column;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .page--menu .select-con__inner {
    gap: 28px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--menu .select-con__inner {
    gap: 32px;
  }
}
.page--menu .select-con .current--book-img {
  max-width: 360px;
  border-radius: 8.5px;
  overflow: hidden;
  box-shadow: 0 1.1rem 4.5rem rgba(0, 0, 0, 0.25);
  position: relative;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--menu .select-con .current--book-img {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--menu .select-con .current--book-img {
    max-width: 230px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--menu .select-con .current--book-img {
    max-width: 141px;
    border-radius: 4px;
  }
}
.page--menu .select-con .current--book-img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.6%;
  height: 100%;
  background: rgba(25, 25, 25, 0.09);
  pointer-events: none;
}
.page--menu .select-con .current--book-img img {
  width: 100%;
}
.page--menu .select-con__list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  max-width: 750px;
}
@media (orientation: landscape) and (max-width: 1366px) {
  .page--menu .select-con__list {
    gap: 23px;
    max-width: 100%;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--menu .select-con__list {
    gap: 16px;
  }
}
.page--menu .select-con__item {
  width: calc((100% - 60px) / 3);
  height: 220px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.06);
  outline: 2px solid #fff;
  outline-offset: -2px;
  transition: all 0.3s ease;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--menu .select-con__item {
    padding-top: 0;
    height: 100px;
    border-radius: 15px;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .page--menu .select-con__item {
    width: calc((100% - 30px) / 2) !important;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--menu .select-con__item {
    width: 100% !important;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--menu .select-con__item {
    height: 76px;
    border-radius: 10px;
  }
}
.page--menu .select-con__item > a {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 27px;
  padding-top: 15px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--menu .select-con__item > a {
    flex-direction: row;
    justify-content: space-between;
    padding-top: 0;
    padding-left: 32px;
    padding-right: 42px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--menu .select-con__item > a {
    padding-left: 24px;
    padding-right: 30px;
  }
}
.page--menu .select-con__item .menu-tit {
  width: 100%;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.2;
  color: #232323;
  text-align: center;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--menu .select-con__item .menu-tit {
    text-align: left;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--menu .select-con__item .menu-tit {
    font-size: 18px;
  }
}
.page--menu .select-con__item .icon {
  width: 60px;
  aspect-ratio: 1;
  flex-shrink: 0;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--menu .select-con__item .icon {
    width: 48px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--menu .select-con__item .icon {
    width: 38px;
  }
}
.page--menu .select-con__item:nth-child(1), .page--menu .select-con__item:nth-child(2) {
  width: calc((100% - 30px) / 2);
}
@media (hover: hover) and (pointer: fine) {
  .page--menu .select-con__item:hover:hover {
    outline-color: #009A85;
    border: 2px solid #009A85;
    box-shadow: 0 0 12px rgba(0, 154, 133, 0.4);
    transform: translateY(-10px);
  }
}
@media (hover: none) and (pointer: coarse) {
  .page--menu .select-con__item:hover:active {
    outline-color: #009A85;
    box-shadow: 0 0 12px rgba(0, 154, 133, 0.4);
  }
}
.page--menu .select-con .notice .icon {
  position: relative;
}
.page--menu .select-con .notice .icon .active {
  display: block;
}
.page--menu .select-con .notice .icon .inactive {
  display: none;
}
.page--menu .select-con .notice .push {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: normal;
  color: #232323;
  width: 30px;
  aspect-ratio: 1;
  background: #ED4C33;
  color: #fff;
  border-radius: 50%;
  position: absolute;
  top: -7px;
  right: -30px;
  display: none;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--menu .select-con .notice .push {
    width: 26px;
    right: -28px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--menu .select-con .notice .push {
    width: 22px;
    right: -23px;
    font-size: 14px;
  }
}
.page--menu .select-con .notice.is-disabled {
  background: #E8E8E8;
  border-color: #E8E8E8;
  pointer-events: none;
  outline: none;
}
.page--menu .select-con .notice.is-disabled .icon .active {
  display: none;
}
.page--menu .select-con .notice.is-disabled .icon .inactive {
  display: block;
}
.page--menu .select-con .notice.is-disabled .push {
  display: none;
}
.page--menu .select-con.disable-buttons li,
.page--menu .select-con.disable-buttons a {
  pointer-events: none;
}

.page--unit,
.page--my-report {
  max-width: 100%;
}
.page--unit .page__inner,
.page--my-report .page__inner {
  max-width: 1630px;
  margin: auto;
}
.page--unit .main-tit,
.page--my-report .main-tit {
  margin-bottom: 40px;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--unit .main-tit,
  .page--my-report .main-tit {
    margin-top: 36px;
    margin-bottom: 20px;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .page--unit .main-tit,
  .page--my-report .main-tit {
    margin-top: 24px;
    margin-bottom: 20px;
  }
}
.page--unit .main-tit h2,
.page--my-report .main-tit h2 {
  font-size: 4.8rem;
  font-weight: 700;
  line-height: normal;
  color: #232323;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit .main-tit h2,
  .page--my-report .main-tit h2 {
    font-size: 26px;
  }
}
.page--unit .select-con,
.page--my-report .select-con {
  margin-bottom: 5rem;
}
.page--unit .select-con__list,
.page--my-report .select-con__list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 30px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--unit .select-con__list,
  .page--my-report .select-con__list {
    display: grid;
    grid-gap: 22px;
  }
  .page--unit .select-con__list .unit1,
  .page--my-report .select-con__list .unit1 {
    grid-area: u1;
  }
  .page--unit .select-con__list .unit2,
  .page--my-report .select-con__list .unit2 {
    grid-area: u2;
  }
  .page--unit .select-con__list .unit3,
  .page--my-report .select-con__list .unit3 {
    grid-area: u3;
  }
  .page--unit .select-con__list .unit4,
  .page--my-report .select-con__list .unit4 {
    grid-area: u4;
  }
  .page--unit .select-con__list .unit5,
  .page--my-report .select-con__list .unit5 {
    grid-area: u5;
  }
  .page--unit .select-con__list .unit6,
  .page--my-report .select-con__list .unit6 {
    grid-area: u6;
  }
  .page--unit .select-con__list .unit7,
  .page--my-report .select-con__list .unit7 {
    grid-area: u7;
  }
  .page--unit .select-con__list .unit8,
  .page--my-report .select-con__list .unit8 {
    grid-area: u8;
  }
  .page--unit .select-con__list .midterm,
  .page--my-report .select-con__list .midterm {
    grid-area: mid;
  }
  .page--unit .select-con__list .final,
  .page--my-report .select-con__list .final {
    grid-area: final;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--unit .select-con__list,
  .page--my-report .select-con__list {
    display: grid;
    grid-gap: 22px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "u1 u2 u3 u4" "mid mid mid mid" "u5 u6 u7 u8" "final final final final";
    /* Grid 배치 */
  }
  .page--unit .select-con__list .unit1,
  .page--my-report .select-con__list .unit1 {
    grid-area: u1;
  }
  .page--unit .select-con__list .unit2,
  .page--my-report .select-con__list .unit2 {
    grid-area: u2;
  }
  .page--unit .select-con__list .unit3,
  .page--my-report .select-con__list .unit3 {
    grid-area: u3;
  }
  .page--unit .select-con__list .unit4,
  .page--my-report .select-con__list .unit4 {
    grid-area: u4;
  }
  .page--unit .select-con__list .unit5,
  .page--my-report .select-con__list .unit5 {
    grid-area: u5;
  }
  .page--unit .select-con__list .unit6,
  .page--my-report .select-con__list .unit6 {
    grid-area: u6;
  }
  .page--unit .select-con__list .unit7,
  .page--my-report .select-con__list .unit7 {
    grid-area: u7;
  }
  .page--unit .select-con__list .unit8,
  .page--my-report .select-con__list .unit8 {
    grid-area: u8;
  }
  .page--unit .select-con__list .midterm,
  .page--my-report .select-con__list .midterm {
    grid-area: mid;
  }
  .page--unit .select-con__list .final,
  .page--my-report .select-con__list .final {
    grid-area: final;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--unit .select-con__list,
  .page--my-report .select-con__list {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 16px;
    grid-template-areas: "u1 u2" "u3 u4" "mid mid" "u5 u6" "u7 u8" "final final";
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit .select-con__list,
  .page--my-report .select-con__list {
    grid-gap: 16px;
  }
}
.page--unit .select-con__item,
.page--my-report .select-con__item {
  width: calc((100% - 120px) / 5);
  min-height: 165px;
  border-radius: 10px;
  box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease-in-out;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--unit .select-con__item,
  .page--my-report .select-con__item {
    width: 100% !important;
    max-width: 100%;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit .select-con__item,
  .page--my-report .select-con__item {
    min-height: 155px;
  }
}
.page--unit .select-con__item > a,
.page--my-report .select-con__item > a {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 25px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--unit .select-con__item > a,
  .page--my-report .select-con__item > a {
    gap: 24px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit .select-con__item > a,
  .page--my-report .select-con__item > a {
    padding: 20px 16px;
  }
}
.page--unit .select-con__item .unit-tit,
.page--my-report .select-con__item .unit-tit {
  width: 100%;
  text-align: left;
  font-weight: 700;
  color: #fff;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit .select-con__item .unit-tit,
  .page--my-report .select-con__item .unit-tit {
    font-size: 22px;
  }
}
.page--unit .select-con__item .unit-info,
.page--my-report .select-con__item .unit-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
}
.page--unit .select-con__item .unit-info__txt,
.page--my-report .select-con__item .unit-info__txt {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  align-items: baseline;
  gap: 4px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--unit .select-con__item .unit-info__txt,
  .page--my-report .select-con__item .unit-info__txt {
    flex-direction: column;
  }
}
.page--unit .select-con__item .unit-info__txt .t-act,
.page--my-report .select-con__item .unit-info__txt .t-act {
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  color: #232323;
  color: #fff;
}
@media (min-width: 1367px) and (max-width: 1600px) {
  .page--unit .select-con__item .unit-info__txt .t-act,
  .page--my-report .select-con__item .unit-info__txt .t-act {
    font-size: 15px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--unit .select-con__item .unit-info__txt .t-act,
  .page--my-report .select-con__item .unit-info__txt .t-act {
    font-size: 15px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit .select-con__item .unit-info__txt .t-act,
  .page--my-report .select-con__item .unit-info__txt .t-act {
    font-size: 14px;
  }
}
.page--unit .select-con__item .unit-info__txt .t-rate,
.page--my-report .select-con__item .unit-info__txt .t-rate {
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  color: #232323;
  color: #fff;
}
@media (min-width: 1367px) and (max-width: 1600px) {
  .page--unit .select-con__item .unit-info__txt .t-rate,
  .page--my-report .select-con__item .unit-info__txt .t-rate {
    font-size: 16px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit .select-con__item .unit-info__txt .t-rate,
  .page--my-report .select-con__item .unit-info__txt .t-rate {
    font-size: 16px;
  }
}
.page--unit .select-con__item .unit-info__txt .t-rate .complete,
.page--my-report .select-con__item .unit-info__txt .t-rate .complete {
  font-size: 3.8rem;
  font-weight: 700;
  line-height: normal;
  color: #232323;
  color: #fff;
}
@media (min-width: 1367px) and (max-width: 1600px) {
  .page--unit .select-con__item .unit-info__txt .t-rate .complete,
  .page--my-report .select-con__item .unit-info__txt .t-rate .complete {
    font-size: 2.2rem;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit .select-con__item .unit-info__txt .t-rate .complete,
  .page--my-report .select-con__item .unit-info__txt .t-rate .complete {
    font-size: 22px;
  }
}
.page--unit .select-con__item .unit-info__progress,
.page--my-report .select-con__item .unit-info__progress {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.6);
  overflow: hidden;
  position: relative;
  border-radius: 5px;
}
.page--unit .select-con__item .unit-info__progress .progress-bar,
.page--my-report .select-con__item .unit-info__progress .progress-bar {
  display: block;
  height: 100%;
  width: 0%; /* JS에서 동적으로 변경 */
  background: #fff;
  border-radius: 5px;
}
@media (hover: hover) and (pointer: fine) {
  .page--unit .select-con .select-con__item:hover,
  .page--my-report .select-con .select-con__item:hover {
    transform: translateY(-8px);
  }
}
.page--unit .select-con .unit1,
.page--unit .select-con .unit2,
.page--my-report .select-con .unit1,
.page--my-report .select-con .unit2 {
  background: #ED4C33;
}
.page--unit .select-con .unit3,
.page--unit .select-con .unit4,
.page--my-report .select-con .unit3,
.page--my-report .select-con .unit4 {
  background: #0072BC;
}
.page--unit .select-con .unit5,
.page--unit .select-con .unit6,
.page--my-report .select-con .unit5,
.page--my-report .select-con .unit6 {
  background: #009A85;
}
.page--unit .select-con .unit7,
.page--unit .select-con .unit8,
.page--my-report .select-con .unit7,
.page--my-report .select-con .unit8 {
  background: #5A4C9C;
}
.page--unit .select-con .midterm,
.page--unit .select-con .final,
.page--my-report .select-con .midterm,
.page--my-report .select-con .final {
  color: #232323 !important;
  border: 2px solid #4D565C;
  background: white;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--unit .select-con .midterm,
  .page--unit .select-con .final,
  .page--my-report .select-con .midterm,
  .page--my-report .select-con .final {
    min-height: 110px;
  }
  .page--unit .select-con .midterm .unit-info__txt,
  .page--unit .select-con .final .unit-info__txt,
  .page--my-report .select-con .midterm .unit-info__txt,
  .page--my-report .select-con .final .unit-info__txt {
    display: none;
  }
  .page--unit .select-con .midterm > a,
  .page--unit .select-con .final > a,
  .page--my-report .select-con .midterm > a,
  .page--my-report .select-con .final > a {
    flex-direction: row;
  }
}
@media (orientation: portrait) and (max-width: 1024px) and (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) and (orientation: portrait) and (max-width: 1024px) {
  .page--unit .select-con .midterm > a,
  .page--unit .select-con .final > a,
  .page--my-report .select-con .midterm > a,
  .page--my-report .select-con .final > a {
    gap: 16px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) and (orientation: landscape) and (max-width: 1366px), (orientation: landscape) and (max-width: 1366px) and (orientation: landscape) and (max-width: 1366px) {
  .page--unit .select-con .midterm > a,
  .page--unit .select-con .final > a,
  .page--my-report .select-con .midterm > a,
  .page--my-report .select-con .final > a {
    gap: 24px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) and (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (max-width: 1024px) and (orientation: landscape) and (max-width: 1366px), (orientation: landscape) and (max-width: 1366px) and (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) and (orientation: landscape) and (max-width: 1366px) {
  .page--unit .select-con .midterm > a,
  .page--unit .select-con .final > a,
  .page--my-report .select-con .midterm > a,
  .page--my-report .select-con .final > a {
    padding-right: 18px;
  }
}
@media (orientation: portrait) and (max-width: 1024px) and (orientation: portrait) and (max-width: 767px), (orientation: portrait) and (max-width: 1024px) and (orientation: landscape) and (max-width: 932px), (orientation: landscape) and (max-width: 1366px) and (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 1366px) and (orientation: landscape) and (max-width: 932px) {
  .page--unit .select-con .midterm > a,
  .page--unit .select-con .final > a,
  .page--my-report .select-con .midterm > a,
  .page--my-report .select-con .final > a {
    padding-right: 14px;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .page--unit .select-con .midterm .unit-tit,
  .page--unit .select-con .final .unit-tit,
  .page--my-report .select-con .midterm .unit-tit,
  .page--my-report .select-con .final .unit-tit {
    text-align: right;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit .select-con .midterm,
  .page--unit .select-con .final,
  .page--my-report .select-con .midterm,
  .page--my-report .select-con .final {
    min-height: 90px;
  }
}
.page--unit .select-con .midterm .unit-tit,
.page--unit .select-con .midterm .unit-info__txt,
.page--unit .select-con .midterm .t-act,
.page--unit .select-con .midterm .t-rate,
.page--unit .select-con .midterm .complete,
.page--unit .select-con .final .unit-tit,
.page--unit .select-con .final .unit-info__txt,
.page--unit .select-con .final .t-act,
.page--unit .select-con .final .t-rate,
.page--unit .select-con .final .complete,
.page--my-report .select-con .midterm .unit-tit,
.page--my-report .select-con .midterm .unit-info__txt,
.page--my-report .select-con .midterm .t-act,
.page--my-report .select-con .midterm .t-rate,
.page--my-report .select-con .midterm .complete,
.page--my-report .select-con .final .unit-tit,
.page--my-report .select-con .final .unit-info__txt,
.page--my-report .select-con .final .t-act,
.page--my-report .select-con .final .t-rate,
.page--my-report .select-con .final .complete {
  color: #4D565C !important;
}
.page--unit .select-con .midterm .unit-info,
.page--unit .select-con .final .unit-info,
.page--my-report .select-con .midterm .unit-info,
.page--my-report .select-con .final .unit-info {
  width: 100%;
  align-items: start;
}
.page--unit .select-con .midterm .unit-info__progress,
.page--unit .select-con .final .unit-info__progress,
.page--my-report .select-con .midterm .unit-info__progress,
.page--my-report .select-con .final .unit-info__progress {
  background: rgba(0, 0, 0, 0.09);
}
@media (orientation: landscape) and (max-width: 1366px) {
  .page--unit .select-con .midterm .unit-info__progress,
  .page--unit .select-con .final .unit-info__progress,
  .page--my-report .select-con .midterm .unit-info__progress,
  .page--my-report .select-con .final .unit-info__progress {
    width: calc(50% - 20px);
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--unit .select-con .midterm .unit-info__progress,
  .page--unit .select-con .final .unit-info__progress,
  .page--my-report .select-con .midterm .unit-info__progress,
  .page--my-report .select-con .final .unit-info__progress {
    width: calc(100% - 20px);
    margin-left: auto;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .page--unit .select-con .midterm .unit-info__progress,
  .page--unit .select-con .final .unit-info__progress,
  .page--my-report .select-con .midterm .unit-info__progress,
  .page--my-report .select-con .final .unit-info__progress {
    width: calc(50% - 16px);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--unit .select-con .midterm .unit-info__progress,
  .page--unit .select-con .final .unit-info__progress,
  .page--my-report .select-con .midterm .unit-info__progress,
  .page--my-report .select-con .final .unit-info__progress {
    width: calc(100% - 16px);
    margin-left: auto;
  }
}
.page--unit .select-con .midterm .unit-info__progress .progress-bar,
.page--unit .select-con .final .unit-info__progress .progress-bar,
.page--my-report .select-con .midterm .unit-info__progress .progress-bar,
.page--my-report .select-con .final .unit-info__progress .progress-bar {
  background: #7C7E7E;
}
.page--unit .overall,
.page--my-report .overall {
  background: #fff;
  padding: 20px 30px 30px;
  border-radius: 10px;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--unit .overall,
  .page--my-report .overall {
    padding: 20px 16px 20px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .page--unit .overall,
  .page--my-report .overall {
    padding: 20px 30px 20px;
  }
}
.page--unit .overall__inner,
.page--my-report .overall__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
.page--unit .overall h4,
.page--my-report .overall h4 {
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.2;
  color: #232323;
  text-align: center;
}
.page--unit .overall__con,
.page--my-report .overall__con {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 5rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--unit .overall__con,
  .page--my-report .overall__con {
    flex-direction: column;
    gap: 0;
  }
}
.page--unit .overall .summary,
.page--my-report .overall .summary {
  width: 100%;
  max-width: 328px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--unit .overall .summary,
  .page--my-report .overall .summary {
    max-width: 100%;
  }
}
.page--unit .overall .summary__list,
.page--my-report .overall .summary__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--unit .overall .summary__list,
  .page--my-report .overall .summary__list {
    padding-bottom: 36px;
    flex-direction: row;
    align-items: stretch;
    border-bottom: 1px solid #8B8B8B;
    justify-content: space-around;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit .overall .summary__list,
  .page--my-report .overall .summary__list {
    padding-bottom: 24px;
  }
}
.page--unit .overall .summary__item,
.page--my-report .overall .summary__item {
  width: 100%;
  height: 45px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #C9D2D7;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--unit .overall .summary__item,
  .page--my-report .overall .summary__item {
    height: auto;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    border-bottom: none;
    border-right: 1px solid #C9D2D7;
    padding: 4px 0;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit .overall .summary__item,
  .page--my-report .overall .summary__item {
    gap: 8px;
  }
}
.page--unit .overall .summary__item .tit,
.page--my-report .overall .summary__item .tit {
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  color: #232323;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--unit .overall .summary__item .tit,
  .page--my-report .overall .summary__item .tit {
    text-align: center;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit .overall .summary__item .tit,
  .page--my-report .overall .summary__item .tit {
    font-size: 14px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--unit .overall .summary__item .tit,
  .page--my-report .overall .summary__item .tit {
    height: 38px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
}
.page--unit .overall .summary__item .tit br,
.page--my-report .overall .summary__item .tit br {
  display: none;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--unit .overall .summary__item .tit br,
  .page--my-report .overall .summary__item .tit br {
    display: block;
  }
}
.page--unit .overall .summary__item .score,
.page--my-report .overall .summary__item .score {
  font-size: 2.4rem;
  font-weight: 400;
  line-height: normal;
  color: #232323;
  color: #93A0A8;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit .overall .summary__item .score,
  .page--my-report .overall .summary__item .score {
    font-size: 15px;
    font-weight: 400;
  }
}
.page--unit .overall .summary__item .emph-t,
.page--my-report .overall .summary__item .emph-t {
  color: #232323;
  font-weight: 700;
}
.page--unit .overall .summary__item:last-child,
.page--my-report .overall .summary__item:last-child {
  border: none;
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--unit .overall .summary__item:nth-child(2), .page--unit .overall .summary__item:nth-child(4),
  .page--my-report .overall .summary__item:nth-child(2),
  .page--my-report .overall .summary__item:nth-child(4) {
    min-width: 28%;
  }
}
.page--unit .overall .category,
.page--my-report .overall .category {
  width: 100%;
}
.page--unit .overall .category__list,
.page--my-report .overall .category__list {
  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--unit .overall .category__list,
  .page--my-report .overall .category__list {
    flex-wrap: wrap;
    justify-content: start;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--unit .overall .category__list,
  .page--my-report .overall .category__list {
    flex-direction: column;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .page--unit .overall .category__list,
  .page--my-report .overall .category__list {
    gap: 0 50px;
    padding: 0 50px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .page--unit .overall .category__list,
  .page--my-report .overall .category__list {
    padding: 0 30px;
  }
}
.page--unit .overall .category__item,
.page--my-report .overall .category__item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex: 1;
  gap: 3.4rem;
  padding: 0 2.5rem;
  border-right: 1px solid #C9D2D7;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--unit .overall .category__item,
  .page--my-report .overall .category__item {
    border-right: none;
    border-bottom: 1px solid #C9D2D7;
    padding: 24px 28px 36px;
  }
}
@media (orientation: landscape) and (max-width: 1366px) {
  .page--unit .overall .category__item,
  .page--my-report .overall .category__item {
    width: calc((100% - 50px) / 2);
    flex: inherit;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--unit .overall .category__item,
  .page--my-report .overall .category__item {
    width: 100%;
    padding: 24px 28px 36px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit .overall .category__item,
  .page--my-report .overall .category__item {
    padding: 12px 20px 24px;
    gap: 16px;
  }
}
.page--unit .overall .category__item:last-child,
.page--my-report .overall .category__item:last-child {
  border: none;
}
@media (min-width: 1367px) {
  .page--unit .overall .category__item:last-child,
  .page--my-report .overall .category__item:last-child {
    padding-right: 0;
  }
}
.page--unit .overall .category__tit,
.page--my-report .overall .category__tit {
  width: 100%;
  text-align: left;
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  color: #232323;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  align-items: start;
  gap: 8px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--unit .overall .category__tit,
  .page--my-report .overall .category__tit {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .page--unit .overall .category__tit br,
  .page--my-report .overall .category__tit br {
    display: none;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit .overall .category__tit,
  .page--my-report .overall .category__tit {
    font-size: 14px;
  }
}
.page--unit .overall .category__score,
.page--my-report .overall .category__score {
  font-size: 3.4rem;
  font-weight: 700;
  line-height: normal;
  color: #232323;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit .overall .category__score,
  .page--my-report .overall .category__score {
    font-size: 20px;
  }
}
.page--unit .overall .category__score > span,
.page--my-report .overall .category__score > span {
  font-size: 2.4rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit .overall .category__score > span,
  .page--my-report .overall .category__score > span {
    font-size: 14px;
  }
}
.page--unit .overall .category__info,
.page--my-report .overall .category__info {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 9px;
}
.page--unit .overall .category__txt,
.page--my-report .overall .category__txt {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 12px;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  color: #232323;
  color: #979797;
}
.page--unit .overall .category__txt .t-act,
.page--my-report .overall .category__txt .t-act {
  font-size: 15px;
  font-weight: 400;
  line-height: normal;
  color: #232323;
  color: #979797;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--unit .overall .category__txt .t-act,
  .page--my-report .overall .category__txt .t-act {
    font-size: 14px;
  }
}
.page--unit .overall .category__txt .complete,
.page--my-report .overall .category__txt .complete {
  font-weight: 700;
  color: #232323;
}
.page--unit .overall .category__progress,
.page--my-report .overall .category__progress {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.09);
  overflow: hidden;
  position: relative;
  border-radius: 5px;
}
.page--unit .overall .category__progress .progress-bar,
.page--my-report .overall .category__progress .progress-bar {
  display: block;
  height: 100%;
  width: 0%; /* JS에서 동적으로 변경 */
  background: #7C7E7E;
  border-radius: 5px;
}

.page--resources .main-tit {
  margin-bottom: 9rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--resources .main-tit {
    margin-bottom: 50px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--resources .main-tit {
    margin-bottom: 32px;
  }
}
.page--resources .select-con__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.6%;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--resources .select-con__list {
    gap: 16px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--resources .select-con__list {
    flex-direction: column;
  }
}
.page--resources .select-con__item {
  width: 14.5%;
  max-width: 220px;
  aspect-ratio: 2.2/2.4;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  background: #fff;
  transition: all 0.3s ease;
  outline: 2px solid transparent;
  outline-offset: -2px;
  margin-bottom: 2.6%;
}
@media (hover: hover) and (pointer: fine) {
  .page--resources .select-con__item:hover {
    outline-color: #009A85;
    box-shadow: 0 0 12px rgba(0, 154, 133, 0.4);
    transform: translateY(-10px);
    transition: all 0.3s ease;
  }
}
@media (hover: none) and (pointer: coarse) {
  .page--resources .select-con__item:active {
    outline-color: #009A85;
    box-shadow: 0 0 12px rgba(0, 154, 133, 0.4);
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--resources .select-con__item {
    max-width: none;
    width: calc((100% - 16px) / 2);
    aspect-ratio: auto;
    margin-bottom: 0;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--resources .select-con__item {
    width: 100%;
  }
}
.page--resources .select-con__item > a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  align-items: start;
  width: 100%;
  height: 100%;
  padding: 2.4rem;
}
@media (min-width: 1367px) and (max-width: 1600px) {
  .page--resources .select-con__item > a {
    font-size: 2rem;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--resources .select-con__item > a {
    flex-direction: row;
    align-items: center;
    padding: 4px 16px 4px 24px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--resources .select-con__item br {
    display: none;
  }
}
.page--resources .select-con__item .tit {
  font-size: 2.6rem;
  font-weight: 600;
  line-height: normal;
  color: #232323;
}
@media (min-width: 1367px) and (max-width: 1600px) {
  .page--resources .select-con__item .tit {
    font-size: 2.2rem;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--resources .select-con__item .tit {
    font-size: 16px;
  }
}
.page--resources .select-con__item .icon {
  display: block;
  width: 55%;
  aspect-ratio: 1;
  margin-left: auto;
  margin-right: -9.5px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--resources .select-con__item .icon {
    width: 70px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--resources .select-con__item .icon {
    width: 56px;
  }
}
.page--resources .select-con__item:nth-child(1) .icon {
  background: url("/assets/images/icon/ic_plan-1d6e1aaadad2ad151109ebff11bd0d4e.png") no-repeat bottom right/100% auto;
}
.page--resources .select-con__item:nth-child(2) .icon {
  background: url("/assets/images/icon/ic_mp3-4f65f17976651aad58f095b354cb394b.png") no-repeat bottom right/100% auto;
}
.page--resources .select-con__item:nth-child(3) .icon {
  background: url("/assets/images/icon/ic_song-chant-a902485dc2db40b4fe27033950107e73.png") no-repeat bottom right/100% auto;
}
.page--resources .select-con__item:nth-child(4) .icon {
  background: url("/assets/images/icon/ic_word-list-aecf5a232bb2d326226e01acf8d4284f.png") no-repeat bottom right/100% auto;
}
.page--resources .select-con__item:nth-child(5) .icon {
  background: url("/assets/images/icon/ic_flashcard-5fd2e087b8d4d814806e92d8cc4ba18e.png") no-repeat bottom right/100% auto;
}
.page--resources .select-con__item:nth-child(6) .icon {
  background: url("/assets/images/icon/ic_ebook-4b6d9cd845e0d904c0ff9d13e5b8667f.png") no-repeat bottom right/100% auto;
}
.page--resources .select-con__item:nth-child(7) .icon {
  background: url("/assets/images/icon/ic_ppt-37edbd10bc66f54ae721d85b6fd14a97.png") no-repeat bottom right/100% auto;
}
.page--resources .select-con__item:nth-child(8) .icon {
  background: url("/assets/images/icon/ic_test-460fceb61426aa157c1b93dcf3120884.png") no-repeat bottom right/100% auto;
}
.page--resources .select-con__item:nth-child(9) .icon {
  background: url("/assets/images/icon/ic_key-9536a70946b2d3032989f5bd8fac26a0.png") no-repeat bottom right/100% auto;
}
.page--resources .select-con__item:nth-child(10) .icon {
  background: url("/assets/images/icon/ic_certificate-8067f3f4453e217e63dca91de3be4d7c.png") no-repeat bottom right/100% auto;
}
.page--resources .select-con__item:nth-child(11) .icon {
  background: url("/assets/images/icon/ic_listening-script-b2079cbc7ca8c969e8b7f457314d8554.png") no-repeat bottom right/100% auto;
}
.page--resources .select-con__item:nth-child(12) .icon {
  background: url("/assets/images/icon/ic_worksheet-545efadff3dbde32d8304dcf98833423.png") no-repeat bottom right/100% auto;
}

.page--join-class,
.page--change-class {
  height: calc(100dvh - 250px);
}
@media (orientation: landscape) and (max-width: 1366px) {
  .page--join-class,
  .page--change-class {
    height: 75dvh;
  }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .page--join-class,
  .page--change-class {
    height: 85dvh;
  }
}
.page--join-class .page__inner,
.page--change-class .page__inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.page--join-class h2,
.page--change-class h2 {
  font-size: 6rem;
  text-align: center;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--join-class h2,
  .page--change-class h2 {
    font-size: 26px;
  }
}
.page--join-class .sub-txt,
.page--change-class .sub-txt {
  font-size: 3.4rem;
  text-align: center;
  margin: 5rem auto;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--join-class .sub-txt,
  .page--change-class .sub-txt {
    font-size: 16px;
    margin-top: 32px;
    margin-bottom: 28px;
  }
}
.page--join-class .form-input,
.page--change-class .form-input {
  width: 700px;
  max-width: 92vw;
  height: 7.6rem;
  font-size: 3rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--join-class .form-input,
  .page--change-class .form-input {
    width: 500px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--join-class .form-input,
  .page--change-class .form-input {
    width: 327px;
    height: 48px;
    font-size: 18px;
  }
}
.page--join-class .btn-con,
.page--change-class .btn-con {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--join-class .btn-con,
  .page--change-class .btn-con {
    gap: 12px;
  }
}
.page--join-class .btn,
.page--change-class .btn {
  min-width: 120px;
  height: 50px;
  padding: 0 20px !important;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
  color: #232323;
  color: #fff;
  cursor: pointer;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--join-class .btn,
  .page--change-class .btn {
    font-size: 16px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--join-class .btn,
  .page--change-class .btn {
    height: 43px;
    font-size: 14px;
  }
}

.page--change-class .sub-txt {
  margin: 5rem auto 20px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--change-class .sub-txt {
    margin: 28px auto 10px;
  }
}
.page--change-class .class-tit {
  font-size: 4.8rem;
  text-align: center;
  text-decoration: underline;
  margin-bottom: 20px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--change-class .class-tit {
    font-size: 24px;
    margin-bottom: 12px;
  }
}
.page--change-class .class-id {
  font-size: 2.4rem;
  color: #8B8B8B;
  text-align: center;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--change-class .class-id {
    font-size: 16px;
  }
}
.page--change-class .btn-con {
  margin-top: 5rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--change-class .btn-con {
    margin-top: 28px;
  }
}

.page--my-page .page__inner.my-page {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--my-page .page__inner.my-page {
    gap: 48px;
  }
}
.page--my-page .main-tit h2 {
  padding-bottom: 30px !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--my-page .main-tit h2 {
    padding-bottom: 24px !important;
  }
}
.page--my-page .section__inner {
  width: 100%;
  background: #fff;
  padding: 4rem 3rem;
  border-radius: 10px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--my-page .section__inner {
    padding: 20px 16px 28px;
  }
}
.page--my-page .section__tit {
  font-size: 3rem;
  font-weight: 600;
  line-height: normal;
  color: #232323;
  margin-bottom: 5rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--my-page .section__tit {
    text-align: center;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--my-page .section__tit {
    font-size: 20px;
    margin-bottom: 28px;
  }
}
.page--my-page .section .form-group {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-top: 25px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--my-page .section .form-group {
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
  }
}
.page--my-page .section .form-group:last-child {
  margin-bottom: 3.5rem;
}
.page--my-page .section .form-group .form-label {
  width: 100%;
  max-width: 265px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--my-page .section .form-group .form-label {
    max-width: 100%;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--my-page .section .form-group .form-label {
    font-size: 15px;
  }
}
.page--my-page .section .form-group .info-con {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  justify-content: start;
  gap: 15px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--my-page .section .form-group .info-con {
    gap: 4px;
  }
}
.page--my-page .section .form-group.pw-re-group .info-con {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--my-page .section .form-group.pw-re-group .info-con {
    gap: 8px;
  }
}
.page--my-page .section .form-group.email-group {
  font-size: 2.4rem;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--my-page .section .form-group.email-group {
    font-size: 15px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--my-page .section .form-group.email-group .info-con {
    flex-direction: column;
  }
}
.page--my-page .section .form-group.email-group .input-group {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  justify-content: start;
  gap: 15px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--my-page .section .form-group.email-group .input-group {
    gap: 4px;
  }
}
.page--my-page .section .form-group.email-group .form-input,
.page--my-page .section .form-group.email-group .custom-select--form {
  height: 57px;
  font-size: 2.4rem;
  border-color: #D6D6D6;
  border-radius: 6px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--my-page .section .form-group.email-group .form-input,
  .page--my-page .section .form-group.email-group .custom-select--form {
    height: 40px;
    font-size: 15px;
  }
}
.page--my-page .section .form-group.email-group .form-input .custom-select__options,
.page--my-page .section .form-group.email-group .custom-select--form .custom-select__options {
  border-radius: 6px;
}
.page--my-page .section .form-group.email-group .form-input:focus,
.page--my-page .section .form-group.email-group .custom-select--form:focus {
  border-color: #232323;
}
.page--my-page .section .form-group.email-group .form-input::placeholder,
.page--my-page .section .form-group.email-group .custom-select--form::placeholder {
  color: #C0C0C0;
}
.page--my-page .section .form-group.email-group .custom-select--form {
  width: 30% !important;
  flex-shrink: 0;
  margin: 0;
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--my-page .section .form-group.email-group .custom-select--form {
    width: 100% !important;
  }
}
.page--my-page .section .form-group.email-group .custom-select__selected {
  line-height: 57px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--my-page .section .form-group.email-group .custom-select__selected {
    line-height: 40px;
  }
}
.page--my-page .my-class-con__list,
.page--my-page .my-level-test-con__list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  justify-content: start;
  gap: 25px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--my-page .my-class-con__list,
  .page--my-page .my-level-test-con__list {
    gap: 12px;
  }
}
.page--my-page .my-class-con__item,
.page--my-page .my-level-test-con__item {
  min-width: 190px;
  border: 1px solid #D6D6D6;
  border-radius: 6px;
  padding: 25px 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--my-page .my-class-con__item,
  .page--my-page .my-level-test-con__item {
    min-width: 140px;
    padding: 24px 16px;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--my-page .my-class-con__item,
  .page--my-page .my-level-test-con__item {
    width: calc((100% - 12px) / 2);
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: landscape), (orientation: landscape) and (max-width: 932px) and (orientation: landscape) {
  .page--my-page .my-class-con__item,
  .page--my-page .my-level-test-con__item {
    width: calc((100% - 36px) / 4);
  }
}
.page--my-page .my-class-con__item b,
.page--my-page .my-level-test-con__item b {
  display: inline-block;
  font-size: 2.4rem;
  margin-bottom: 5px;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--my-page .my-class-con__item b,
  .page--my-page .my-level-test-con__item b {
    font-size: 18px;
  }
}
.page--my-page .my-class-con__item p,
.page--my-page .my-level-test-con__item p {
  font-size: 18px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--my-page .my-class-con__item p,
  .page--my-page .my-level-test-con__item p {
    font-size: 16px;
  }
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--my-page .my-class-con__item p,
  .page--my-page .my-level-test-con__item p {
    font-size: 14px;
  }
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--my-page .my-book-con .section__tit {
    margin-bottom: 16px;
  }
}
.page--my-page .my-book-con__list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 3rem;
  padding-top: 20px;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--my-page .my-book-con__list {
    padding: 0;
    gap: 0 14px;
  }
}
.page--my-page .my-book-con__item {
  width: calc((100% - 15rem) / 6);
  height: auto;
  position: relative;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--my-page .my-book-con__item {
    width: calc((100% - 70px) / 6);
    padding: 20px 0;
  }
}
@media (orientation: portrait) and (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-width: 932px) and (orientation: portrait) {
  .page--my-page .my-book-con__item {
    width: calc((100% - 28px) / 3);
  }
}
.page--my-page .my-book-con__item .btn-select-level {
  display: inline-block;
  line-height: 0;
  border-radius: 8px;
  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transition: all 0.3s ease;
  outline: 2px solid transparent;
  outline-offset: -2px;
}
.page--my-page .my-book-con__item .btn-select-level img {
  display: block;
  width: 100%;
}
@media (hover: hover) and (pointer: fine) {
  .page--my-page .my-book-con .btn-select-level:hover {
    outline-color: #417F70;
    box-shadow: 4px 4px 20px rgba(0, 154, 133, 0.3);
    transform: translateY(-10px);
  }
}
@media (hover: none) and (pointer: coarse) {
  .page--my-page .my-book-con .btn-select-level:active {
    outline-color: #417F70;
    box-shadow: 0 0 12px rgba(0, 154, 133, 0.3);
  }
}
.page--my-page .delete-account-con .section__inner {
  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) {
  .page--my-page .delete-account-con .section__inner {
    flex-direction: column;
    gap: 16px;
  }
}
.page--my-page .delete-account-con .section__tit {
  margin-bottom: 0;
}
.page--my-page .delete-account-con .desc {
  font-size: 2.4rem;
}
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-width: 932px) {
  .page--my-page .delete-account-con .desc {
    font-size: 15px;
  }
}
.page--my-page .btn-con {
  margin-top: 30px !important;
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-width: 1366px) {
  .page--my-page .btn-con {
    margin-top: 24px !important;
  }
}