@charset "UTF-8";
/*===========================================================================
	FONT
============================================================================*/
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
@font-face {
  font-family: 'esamanru';
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'NanumSquare';
  src: url("../font/NanumSquare.woff2") format("woff2");
  src: url("../font/NanumSquare.woff") format("woff");
  font-weight: 800;
  font-style: normal; }

@font-face {
  font-family: 'Noto Sans KR', sans-serif;
  src: url("../font/NotoSansKR-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal; }

@font-face {
  font-family: 'Noto Sans KR', sans-serif;
  src: url("../font/NotoSansKR-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'Noto Sans KR', sans-serif;
  src: url("../font/NotoSansKR-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: 'Noto Sans KR', sans-serif;
  src: url("../font/NotoSansKR-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal; }

@font-face {
  font-family: 'Noto Sans KR', sans-serif;
  src: url("../font/NotoSansKR-Bold.woff") format("woff");
  font-weight: 600;
  font-style: normal; }

@font-face {
  font-family: 'Noto Sans KR', sans-serif;
  src: url("../font/NotoSansKR-Black.woff") format("woff");
  font-weight: 800;
  font-style: normal; }

@font-face {
  font-family: 'Inter';
  src: url("../font/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: 'Inter';
  src: url("../font/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal; }

@font-face {
  font-family: 'Inter';
  src: url("../font/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: 'Roboto';
  src: url("../font/Roboto-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: 'Roboto';
  src: url("../font/Roboto-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal; }

@font-face {
  font-family: 'Roboto';
  src: url("../font/Roboto-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: 'Roboto';
  src: url("../font/Roboto-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal; }

/* noto-serif-regular - latin */
@font-face {
  font-family: 'Noto serif';
  src: url("../font/noto-serif-v16-latin-regular.eot");
  /* IE9 Compat Modes */
  src: url("../font/noto-serif-v16-latin-regular.eot?#iefix") format("embedded-opentype"), url("../font/noto-serif-v16-latin-regular.woff2") format("woff2"), url("../font/noto-serif-v16-latin-regular.woff") format("woff"), url("../font/noto-serif-v16-latin-regular.ttf") format("truetype"), url("../font/noto-serif-v16-latin-regular.svg#NotoSerif") format("svg");
  /* Legacy iOS */ }

/*===========================================================================
	INIT
============================================================================*/
a,
input,
button,
textarea {
  all: unset;
  cursor: text; }

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
button,
input,
br,
main,
textarea {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  color: #504d58;
  font-size: 14px;
  font-family: 'Noto Sans KR';
  line-height: 1.2;
  letter-spacing: -0.36px;
  font-weight: 400;
  word-wrap: break-word;
  word-break: break-word; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block; }

a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  cursor: pointer; }

button {
  cursor: pointer; }

img {
  border: none;
  vertical-align: middle; }

ol,
ul,
li {
  list-style: none; }

i,
em {
  font-style: normal; }

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

fieldset {
  border: none; }

legend {
  width: 1px;
  height: 1px;
  overflow: hidden;
  visibility: hidden;
  line-height: 0;
  font-size: 0;
  position: absolute;
  left: -999px; }

input[type='text']::-ms-clear {
  display: none; }

input[type='password']::-ms-clear {
  display: none; }

code {
  white-space: break-spaces; }

*::-webkit-scrollbar {
  width: 5px;
  height: 5px; }

/* 스크롤 바 */
*::-webkit-scrollbar-track {
  background-color: transparent; }

/* 스크롤 바 밑의 배경 */
*::-webkit-scrollbar-thumb {
  background: #d3d3d5;
  border-radius: 10px; }

/* 실질적 스크롤 바 */
*::-webkit-scrollbar-button {
  display: none; }

/* 스크롤 바 상 하단 버튼 */
@media screen and (max-width: 1024px) {
  *::-webkit-scrollbar {
    width: 4px;
    height: 4px; }
  /* 스크롤 바 */ }

* {
  word-break: keep-all; }

/*===========================================================================
	COLOR
============================================================================*/
/*===========================================================================
	FONT-FAMILY
============================================================================*/
.noto-r {
  font-family: 'Noto Sans KR';
  font-weight: 400; }

.noto-m {
  font-family: 'Noto Sans KR';
  font-weight: 500; }

.noto-b {
  font-family: 'Noto Sans KR';
  font-weight: 700; }

.noto-b-i {
  font-family: 'Noto Sans KR';
  font-weight: 700 !important; }

.roboto-r {
  font-family: 'Roboto', 'Noto Sans KR';
  font-weight: 400; }

.roboto-m {
  font-family: 'Roboto', 'Noto Sans KR';
  font-weight: 500; }

.roboto-b {
  font-family: 'Roboto', 'Noto Sans KR';
  font-weight: 700; }

.inter-r {
  font-family: 'Inter', 'Noto Sans KR';
  font-weight: 400; }

.inter-m {
  font-family: 'Inter', 'Noto Sans KR';
  font-weight: 500; }

.inter-b {
  font-family: 'Noto Sans KR';
  font-weight: 700; }

.serif-r {
  font-family: 'Noto Serif', 'Noto Sans KR';
  font-weight: 400; }

.serif-b {
  font-family: 'Noto Serif', 'Noto Sans KR';
  font-weight: 700; }

/*===========================================================================
	COLOR
============================================================================*/
.txt-red {
  color: red !important;
  opacity: 0.8; }

.color-cyan-100 {
  color: #e6f8f9 !important; }

.color-cyan-200 {
  color: #cef1f4 !important; }

.color-cyan-300 {
  color: #b5eaee !important; }

.color-cyan-400 {
  color: #9de3e8 !important; }

.color-cyan-500 {
  color: #84dce2 !important; }

.color-cyan-600 {
  color: #6bd5dd !important; }

.color-cyan-700 {
  color: #53ced7 !important; }

.color-cyan-800 {
  color: #3ac7d1 !important; }

.color-blue-100 {
  color: #f1f2fc; }

.color-blue-200 {
  color: #e4e6fa; }

.color-blue-300 {
  color: #d6d9f7; }

.color-blue-400 {
  color: #c8cdf5; }

.color-blue-500 {
  color: #bac0f2; }

.color-blue-600 {
  color: #adb3ef; }

.color-blue-700 {
  color: #9fa7ed; }

.color-blue-800 {
  color: #919aea; }

.color-gray-100 {
  color: #ffffff; }

.color-gray-200 {
  color: #e9e9ea; }

.color-gray-300 {
  color: #d3d3d5 !important; }

.color-gray-400 {
  color: #a7a6ab; }

.color-gray-500 {
  color: #7c7a82; }

.color-gray-600 {
  color: #504d58; }

.color-gray-700 {
  color: #24212e; }

.color-button-1 {
  color: #0f9ba5; }

.color-button-2 {
  color: #09b9c6; }

.color-button-3 {
  color: #22a4ed; }

.color-button-4 {
  color: #7681e5 !important; }

.color-button-4 {
  color: #ffffff !important; }

.color-point-red {
  color: #ff5050 !important; }

.color-point-pink {
  color: #ff84b0 !important; }

.color-point-orange {
  color: #ffaa04; }

/*===========================================================================
	BACKGROUND COLOR
============================================================================*/
.bg-cyan-100 {
  background-color: #e6f8f9; }

.bg-cyan-200 {
  background-color: #cef1f4; }

.bg-cyan-300 {
  background-color: #b5eaee; }

.bg-cyan-400 {
  background-color: #9de3e8; }

.bg-cyan-500 {
  background-color: #84dce2; }

.bg-cyan-600 {
  background-color: #6bd5dd; }

.bg-cyan-700 {
  background-color: #53ced7; }

.bg-cyan-800 {
  background-color: #3ac7d1; }

.bg-blue-100 {
  background-color: #f1f2fc; }

.bg-blue-200 {
  background-color: #e4e6fa; }

.bg-blue-300 {
  background-color: #d6d9f7; }

.bg-blue-400 {
  background-color: #c8cdf5; }

.bg-blue-500 {
  background-color: #bac0f2; }

.bg-blue-600 {
  background-color: #adb3ef; }

.bg-blue-700 {
  background-color: #9fa7ed; }

.bg-blue-800 {
  background-color: #919aea; }

.bg-gray-100 {
  background-color: #ffffff; }

.bg-gray-200 {
  background-color: #e9e9ea; }

.bg-gray-300 {
  background-color: #d3d3d5; }

.bg-gray-400 {
  background-color: #a7a6ab; }

.bg-gray-500 {
  background-color: #7c7a82; }

.bg-gray-600 {
  background-color: #504d58; }

.bg-gray-700 {
  background-color: #24212e; }

.bg-button-1 {
  background-color: #0f9ba5; }

.bg-button-2 {
  background-color: #09b9c6; }

.bg-button-3 {
  background-color: #22a4ed; }

.bg-button-4 {
  background-color: #7681e5 !important; }

.bg-button-gray {
  background-color: #7c7a82 !important; }

.bg-point-red {
  background-color: #ff5050; }

.bg-point-pink {
  background-color: #ff84b0; }

.bg-point-orange {
  background-color: #ffaa04; }

/*===========================================================================
	flex
============================================================================*/
.d-f {
  display: flex !important; }

.f-w {
  flex-wrap: wrap; }

.f-a-c {
  align-items: center; }

.f-a-s {
  align-items: flex-start; }

.f-a-e {
  align-items: flex-end !important; }

.f-a-base {
  align-items: baseline; }

.f-j-c {
  justify-content: center; }

.f-j-e {
  justify-content: flex-end !important; }

.f-j-sb {
  justify-content: space-between; }

.f-d-c {
  flex-direction: column; }

.flex1 {
  flex: 1; }

/*===========================================================================
	width
============================================================================*/
.w100per {
  width: 100% !important; }

.w_initial {
  width: initial !important; }

.flex_initial {
  flex: initial !important; }

/*===========================================================================
	padding
============================================================================*/
.p_initial {
  padding: initial !important; }

/*===========================================================================
	display
============================================================================*/
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center; }

/* COMMON */
* {
  box-sizing: border-box; }

.mt5 {
  margin-top: 5px; }

.floatL {
  float: left; }

.floatR {
  float: right; }

.clearfix:after {
  content: '';
  display: block;
  clear: both; }

.leftT {
  text-align: left !important; }

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

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

.pointer {
  cursor: pointer; }

.cs_default {
  cursor: default !important; }

.slide_shadow {
  border-radius: 15px;
  box-shadow: 0px -3.76847px 31.6552px rgba(60, 142, 177, 0.15); }

.tag {
  display: inline-block;
  padding: 0 15px;
  line-height: 21px;
  font-size: 12px;
  border: 2px solid #24212e;
  color: #24212e;
  border-radius: 5px;
  margin-right: 10px;
  vertical-align: middle;
  background: #fff;
  font-weight: 700; }

.ellipsis {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 말줄임 적용 */ }

.ellipsis2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; }

.text_inherit {
  color: inherit;
  font-size: inherit; }
  .text_inherit.ff {
    font-family: inherit; }
  .text_inherit.fw {
    font-weight: inherit; }

.white-space-nowrap {
  white-space: nowrap; }

.btn-margin-init > button {
  margin: 0; }

/* BUTTON */
.btn {
  width: 287px;
  height: 65px;
  line-height: 63px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  border-radius: 15px;
  text-align: center; }

.btn.full_btn {
  width: 100%; }

.pop_btn {
  width: 106px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 700; }

.border_button {
  width: 134px;
  height: 48px;
  border: 1px solid #504d58;
  border-radius: 10px;
  text-align: center; }

#bottom-wiget {
  display: flex;
  align-items: flex-start;
  margin-top: 50px;
  justify-content: center; }
  #bottom-wiget .play-wiget-box {
    display: flex;
    align-items: flex-start; }
    #bottom-wiget .play-wiget-box:not(:first-child):before {
      content: '';
      display: inline-block;
      width: 1px;
      height: 14px;
      background: #e9e9ea;
      margin: 0px 16px; }
    #bottom-wiget .play-wiget-box .play-wiget {
      display: flex;
      align-items: center; }
      #bottom-wiget .play-wiget-box .play-wiget img {
        margin-right: 8px; }
      #bottom-wiget .play-wiget-box .play-wiget p {
        font-size: 12px;
        color: #a7a6ab; }
        #bottom-wiget .play-wiget-box .play-wiget p .erase-text {
          font-size: 16px;
          margin-right: 8px;
          color: #7c7a82; }
          #bottom-wiget .play-wiget-box .play-wiget p .erase-text.active {
            color: #09b9c6; }
          @media screen and (max-width: 1024px) {
            #bottom-wiget .play-wiget-box .play-wiget p .erase-text {
              font-size: 12px !important; } }
      #bottom-wiget .play-wiget-box .play-wiget.active p em {
        color: #09b9c6; }

.page_dots {
  text-align: center;
  margin-top: 50px; }
  .page_dots li {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d3d3d5;
    margin-left: 10px; }
    .page_dots li:first-of-type {
      margin-left: 0; }
    .page_dots li.on {
      width: 28px;
      border-radius: 4.5px;
      background: #09b9c6; }

/* LAYOUT */
header {
  width: 100%;
  position: fixed;
  z-index: 100;
  background-color: #fff;
  /* ios fixed 이슈 관련 */ }
  @media (orientation: landscape) {
    header {
      position: fixed; } }
  @media (orientation: portrait) {
    header {
      position: fixed; } }

.container {
  padding: 200px 0 150px;
  min-height: calc(100vh - 267px); }
  .container.padding-bottom0 {
    padding-bottom: 0; }

main.teacher {
  padding-top: 123px;
  padding-top: 55px; }
  main.teacher.type2 {
    padding-top: 80px; }

.play-main-btn-wrap button {
  border-radius: 12px; }

@media screen and (max-width: 1024px) {
  main.teacher {
    padding: 56px 16px 0; }
    main.teacher.type2 {
      padding: 56px 16px 0; }
  main.teacher2 {
    padding: 56px 0px 0; }
  main#content-play.contentPlay,
  main#play-test.contentPlay {
    background: #f8fbfb; } }

main.contentPlay {
  padding-top: 80px;
  min-height: 100vh;
  height: 100%; }
  main.contentPlay.preview_example {
    padding-top: 80px; }
    main.contentPlay.preview_example .page-inner {
      padding-top: 50px; }
    main.contentPlay.preview_example .preview_txt {
      padding: 0 200px;
      text-align: right;
      font-size: 15px;
      font-weight: 500;
      line-height: 21.72px;
      margin-top: 60px; }
    main.contentPlay.preview_example .play-input-text {
      width: 720px; }
  main.contentPlay.overflow {
    overflow: hidden; }
  main.contentPlay .page-inner {
    padding-top: 130px; }
    main.contentPlay .page-inner.height100 {
      height: 100%; }
    main.contentPlay .page-inner.pt80 {
      padding-top: 80px;
      min-height: 110vh; }
      main.contentPlay .page-inner.pt80 #play-frame .play-content-box .test-card.with_bookmark {
        padding-top: 36px; }

@media screen and (max-width: 1024px) {
  main.contentPlay {
    padding: 56px 16px 0;
    overflow: visible auto; }
    main.contentPlay.h-initial {
      height: 100vh; }
    main.contentPlay #play-frame {
      width: calc(100% + 32px);
      overflow: visible auto;
      padding: 30px 0 65px;
      margin-left: -16px; }
      main.contentPlay #play-frame.padding0 {
        padding: 30px 0 40px; }
      main.contentPlay #play-frame.full_width {
        padding: 30px 0 65px; }
      main.contentPlay #play-frame .play-header {
        padding: 0 0 60px; }
        main.contentPlay #play-frame .play-header.pb24 {
          padding-bottom: 24px; }
        main.contentPlay #play-frame .play-header .page-nav-arrow button.play-left {
          left: 16px; }
        main.contentPlay #play-frame .play-header .page-nav-arrow button.play-right {
          right: 16px; }
    main.contentPlay.is_desc .page-inner {
      height: initial; }
    main.contentPlay .page-inner {
      display: block; }
      main.contentPlay .page-inner.pt80 {
        min-height: 0;
        padding-top: 0; }
        main.contentPlay .page-inner.pt80 #play-frame {
          min-height: calc(100vh - 60px);
          padding-bottom: 50px !important; }
          main.contentPlay .page-inner.pt80 #play-frame .play-content-box .test-card {
            border-radius: 20px;
            padding: 24px 16px 32px;
            flex: none; }
      main.contentPlay .page-inner.pt50 {
        padding: 50px 0;
        min-height: 110vh; } }

.play-main-btn-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 20px;
  margin-top: 50px;
  padding-bottom: 100px; }
  .play-main-btn-wrap button {
    margin: 0;
    width: 180px;
    height: 56px !important; }
  .play-main-btn-wrap.key:after {
    content: 'Enter Key';
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Inter', 'Noto Sans KR';
    font-weight: 600;
    font-size: 13px;
    color: #a7a6ab;
    cursor: pointer; }

/* FORM */
input[type='text'],
input[type='password'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 48px;
  border: 1px solid #a7a6ab;
  border-radius: 10px;
  background-color: #fff;
  padding-left: 20px; }
  input[type='text']::placeholder,
  input[type='password']::placeholder {
    font-size: 16px;
    color: #d3d3d5; }

input[type='checkbox'] {
  display: none; }
  input[type='checkbox'] + label {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    color: #504d58;
    cursor: pointer; }
    input[type='checkbox'] + label i {
      display: inline-block;
      width: 16px;
      height: 16px;
      min-width: 16px;
      border-radius: 4px;
      border: 1px solid #dfdfe4;
      vertical-align: middle;
      margin-right: 8px;
      background-color: #ffffff; }
  input[type='checkbox']:disabled + label {
    cursor: default; }

input[type='checkbox']:checked + label i {
  border-color: #2d2d2d;
  background: #ffffff url("../img/icon/icon_chk.png") no-repeat center/10px; }

input[type='file'] {
  display: none; }

.file_upload {
  display: inline-block;
  line-height: 46px;
  border-color: #7681e5;
  font-size: 14px;
  font-weight: 500;
  color: #7681e5; }
  .file_upload img {
    margin-left: 15px;
    vertical-align: middle; }

select {
  min-width: 120px;
  height: 36px;
  border-radius: 10px;
  padding-left: 20px;
  border: 1px solid #dfdfe4; }
  select:focus {
    outline: none;
    border-color: #504d58; }
  select.custom {
    padding: 10px 26px 10px 10px;
    background: url("../../../img/icon/icon_select_arrow.svg") no-repeat center right 8px; }
  select.full {
    width: 100%; }

/* 테이블 */
.td_reset,
.th_reset {
  padding: 0 !important; }

.td_reset {
  height: 50px; }

.th_reset {
  height: 36px; }

.div_cell {
  display: flex;
  align-items: center;
  height: 100%; }
  .div_cell .style_reset {
    font-size: 15px !important;
    color: #504d58 !important;
    cursor: auto !important; }
  .div_cell > * {
    height: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; }
    .div_cell > *:first-of-type:after {
      display: none !important; }
    .div_cell > *:not(.new_popup_wrap):after {
      content: '';
      display: block;
      width: 1px;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: #e9e9ea; }

table {
  width: 100%;
  table-layout: fixed; }
  table thead th {
    font-size: 15px;
    color: #a7a6ab;
    padding: 12px 0;
    border-top: 1px solid #d3d3d5;
    border-bottom: 1px solid #d3d3d5; }
    table thead th span {
      font: inherit;
      color: #a7a6ab;
      cursor: pointer;
      user-select: none; }
      table thead th span.data_icon::after {
        content: '';
        display: inline-block;
        width: 8px;
        height: 12px;
        margin-left: 4px;
        background: url("/img/icon/icon_data_table.svg") no-repeat center/contain; }
      table thead th span img.filter {
        width: 8px;
        height: 12px;
        margin-top: -2px;
        margin-left: 2px;
        cursor: pointer; }
  table tbody td {
    font-size: 14px;
    text-align: center;
    padding: 22px 0;
    color: #7c7a82; }
  table tbody strong {
    font-size: 18px;
    font-weight: 700;
    color: #24212e; }
    table tbody strong.font_inherit {
      font-size: inherit;
      font-weight: inherit; }

/* 페이지네이션 */
.pagination {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  column-gap: 20px; }
  .pagination li {
    font-size: 15px;
    font-weight: 400;
    color: #a2a2a2;
    cursor: pointer; }
    .pagination li.prev-arrow, .pagination li.after-arrow {
      width: 8px; }
    .pagination li.on {
      font-weight: 700;
      color: #09b9c6; }

/* 팝업 */
.center-popup .popup-container .use_box {
  padding: 40px; }

.center-popup .popup-container .weight_medium {
  font-weight: 500; }

.center-popup .popup-container .red_input .input-wrapper {
  border-color: #ff5050; }

.center-popup .popup-container .title {
  font-size: 26px;
  font-weight: 700;
  color: #24212e; }

.center-popup .popup-container img.icon {
  margin-bottom: 25px; }

.center-popup .popup-container h1 {
  font-size: 22px;
  font-weight: 500;
  color: #24212e;
  margin-bottom: 38px;
  line-height: 24px; }
  .center-popup .popup-container h1 .weight700 {
    font-weight: 700; }
  .center-popup .popup-container h1.font19 {
    font-size: 19px; }

.center-popup .popup-container button + button {
  margin-left: 20px; }

.center-popup .popup-container .use_text {
  max-height: 75vh;
  height: auto;
  overflow-y: auto; }
  .center-popup .popup-container .use_text p {
    margin-top: 30px; }
    .center-popup .popup-container .use_text p:first-of-type {
      margin-top: 0; }

.center-popup .excel_download + button {
  width: 206px; }

.center-popup .excel_download + button {
  width: 206px; }

.center-popup .excel_download table.excel-example-table {
  width: 100%; }
  .center-popup .excel_download table.excel-example-table thead {
    background: #c2c2c2;
    font-weight: bold;
    border: 1px solid #c2c2c2; }
    .center-popup .excel_download table.excel-example-table thead tr th:nth-child(1) {
      width: 60px; }
    .center-popup .excel_download table.excel-example-table thead tr th {
      color: #000000; }
  .center-popup .excel_download table.excel-example-table tbody td {
    text-align: left;
    font-size: 12px;
    padding: 8px 0;
    color: #000000;
    padding-left: 4px;
    border: 1px solid #c2c2c2; }

.center-popup .excel_upload {
  position: relative; }
  .center-popup .excel_upload .upload_btn {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background-color: #7681e5;
    position: absolute;
    top: 0;
    right: 0; }
    .center-popup .excel_upload .upload_btn img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
  .center-popup .excel_upload .input-component-box .input-wrapper {
    height: 50px; }
  .center-popup .excel_upload + button {
    width: 206px;
    margin-top: 30px; }

@media screen and (max-width: 1200px) {
  .container {
    padding: 123px 20px; }
    .container.mb_side_none {
      padding-left: 0;
      padding-right: 0; } }

@media screen and (max-width: 1024px) {
  .container.form {
    padding-top: 86px; }
  .container.join_type {
    padding-top: 86px;
    padding-bottom: 30px; }
  input[type='text'],
  input[type='password'] {
    padding-left: 10px; }
  .play-main-btn-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    gap: 20px;
    margin-top: 50px;
    padding-bottom: 50px; }
    .play-main-btn-wrap.m-fixed {
      margin-top: 0px;
      padding: 0;
      padding-bottom: 0px; }
    .play-main-btn-wrap button {
      margin: 0;
      width: 100%;
      font-size: 20px; }
      .play-main-btn-wrap button img {
        margin-top: 3px; }
  .center-popup .popup-container h1 {
    font-size: 14px; }
  .center-popup .popup-container button + button {
    margin-left: 10px; }
  .center-popup .popup-container .use_box {
    padding: 30px 15px;
    max-height: 90vh; }
  .mycampus .new_layout .page_top {
    padding-bottom: 20px !important;
    border-bottom: 1px solid #e9e9ea !important; } }

@media screen and (max-width: 480px) {
  select {
    min-width: auto; }
  .mycampus .campus_wrap:first-of-type {
    margin-top: 0; }
  .mycampus .campus_wrap .campus_card .top {
    padding: 16px; }
  .center-popup .popup-container h1.font19 {
    font-size: 16px;
    line-height: 21px; }
  .center-popup .popup-container.pc_large .popup-close {
    top: 15px;
    right: 15px; }
    .center-popup .popup-container.pc_large .popup-close img {
      width: 15px;
      height: 15px; } }

#index2 {
  background: #3d7979;
  width: 100%;
  padding: 50px 20px 50px 50px;
  overflow: hidden; }
  #index2 .chapter-box {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    height: calc(100vh - 100px);
    overflow: auto; }
    #index2 .chapter-box .chapter {
      display: flex;
      flex-direction: column;
      gap: 20px; }
      #index2 .chapter-box .chapter h2 {
        font-size: 26px;
        font-weight: 600;
        color: #fff; }
      #index2 .chapter-box .chapter ul {
        padding-top: 10px;
        width: 50%; }
        #index2 .chapter-box .chapter ul li {
          display: flex;
          align-items: center;
          position: relative;
          gap: 10px;
          cursor: pointer;
          border-bottom: 1px solid #afafaf;
          padding: 15px 0px; }
          #index2 .chapter-box .chapter ul li a {
            display: inline-block;
            width: 100%;
            font-size: 16px;
            color: #fff; }
          #index2 .chapter-box .chapter ul li.complete:after {
            content: '완료';
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            background: #424240;
            font-size: 12px;
            line-height: 20px;
            color: #fff;
            font-weight: 600;
            width: 40px;
            height: 22px;
            text-align: center;
            border-radius: 4px; }
          #index2 .chapter-box .chapter ul li.work:after {
            content: '진행중';
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            background: #fff;
            border: 1px solid #424240;
            font-size: 12px;
            line-height: 20px;
            color: #424240;
            font-weight: 600;
            width: 40px;
            height: 22px;
            text-align: center;
            border-radius: 4px; }
          #index2 .chapter-box .chapter ul li.mobile:before {
            content: 'Mobile';
            display: none;
            top: 50%;
            right: 10px;
            background: #5412be;
            border: 1px solid #5412be;
            font-size: 12px;
            line-height: 20px;
            color: #fff;
            font-weight: 600;
            width: 50px;
            height: 22px;
            text-align: center;
            border-radius: 4px; }
          #index2 .chapter-box .chapter ul li.mobile_only:before {
            content: 'Mobile-Only';
            display: inline-block;
            top: 50%;
            right: 10px;
            background: khaki;
            border: 1px solid khaki;
            font-size: 12px;
            line-height: 20px;
            color: #000;
            font-weight: 600;
            width: 90px;
            min-width: max-content;
            height: 22px;
            text-align: center;
            border-radius: 4px; }

@media screen and (max-width: 1024px) {
  #index2 .chapter-box .chapter ul {
    width: 100%; } }

.cursor {
  cursor: pointer; }

.mb5 {
  margin-bottom: 5px; }

.br10 {
  border-radius: 10px; }

.width-150 {
  width: 150px !important; }

.no-drag {
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none; }

/**
 * Dev
 */
@-webkit-keyframes skeleton-gradient {
  30% {
    background-color: rgba(165, 165, 165, 0.3); }
  50% {
    background-color: rgba(165, 165, 165, 0.15); }
  70% {
    background-color: rgba(165, 165, 165, 0.3); } }

@keyframes skeleton-gradient {
  30% {
    background-color: rgba(165, 165, 165, 0.3); }
  50% {
    background-color: rgba(165, 165, 165, 0.15); }
  70% {
    background-color: rgba(165, 165, 165, 0.3); } }

.skeleton {
  -webkit-animation: skeleton-gradient 1.5s infinite ease-in-out;
  animation: skeleton-gradient 1.5s infinite ease-in-out;
  background-color: rgba(165, 165, 165, 0.3); }

@keyframes loading-move-img {
  0% {
    transform: translateX(0px); }
  100% {
    transform: translateX(8px); } }

.chat-loading {
  -webkit-animation: loading-move-img 1.5s infinite ease-in-out;
  animation: loading-move-img 1.5s infinite ease-in-out;
  animation-iteration-count: infinite; }

.__dev-chart-card {
  width: max-content !important;
  height: auto; }
  .__dev-chart-card > .top {
    display: flex;
    align-items: center;
    margin: 28px 25px 42px; }
    .__dev-chart-card > .top div.label {
      height: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 15px;
      border: #0f9ba5 2px solid;
      border-radius: 12.5px;
      color: #0f9ba5;
      font-size: 13px;
      margin-right: 5px; }
    .__dev-chart-card > .top p,
    .__dev-chart-card > .top span {
      line-height: 25px;
      font-size: 16px; }
    .__dev-chart-card > .top > p {
      color: #7681e5;
      font-weight: 600;
      margin-right: 5px; }
      .__dev-chart-card > .top > p > span {
        color: #7c7a82;
        font-weight: 600; }
      .__dev-chart-card > .top > p.mr-15px {
        margin-right: 15px; }
    .__dev-chart-card > .top > span {
      color: #24212e; }
  .__dev-chart-card > .chart {
    margin: 0 28px 0 26px; }
    .__dev-chart-card > .chart > .top {
      display: flex; }
      .__dev-chart-card > .chart > .top > .left {
        height: 172px;
        width: 18px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: space-between;
        margin-right: 7px; }
        .__dev-chart-card > .chart > .top > .left > span {
          font-size: 10px;
          color: #60628d;
          transform: translateY(-50%); }
      .__dev-chart-card > .chart > .top > .right {
        height: 160px;
        width: max-content;
        border-bottom: 1px solid #a7a6ab;
        display: flex;
        position: relative; }
        .__dev-chart-card > .chart > .top > .right > div {
          width: 90px;
          display: flex;
          justify-content: center;
          align-items: flex-end;
          height: 100%; }
          .__dev-chart-card > .chart > .top > .right > div > div {
            width: 30px;
            border-radius: 15px;
            position: relative;
            transition: 0.5s; }
            .__dev-chart-card > .chart > .top > .right > div > div > span {
              width: 38px;
              text-align: center;
              position: absolute;
              left: 50%;
              bottom: 100%;
              transform: translate(-50%, -5px);
              font-size: 15px; }
        .__dev-chart-card > .chart > .top > .right > span {
          display: block;
          position: absolute;
          left: 0;
          right: 0;
          height: 1px;
          border: 1px dashed #a7a6ab; }
    .__dev-chart-card > .chart > .bottom {
      margin-left: 25px;
      width: max-content;
      height: max-content;
      margin-top: 10px;
      margin-bottom: 21px;
      display: flex; }
      .__dev-chart-card > .chart > .bottom > div {
        width: 90px;
        height: 37px;
        text-align: center; }
        .__dev-chart-card > .chart > .bottom > div p {
          font-size: 13px;
          color: #504d58;
          line-height: 20px; }
        .__dev-chart-card > .chart > .bottom > div span {
          font-size: 11px;
          color: #504d58;
          line-height: 17px; }
  .__dev-chart-card.m {
    min-width: 100%; }
    .__dev-chart-card.m > .chart {
      margin: 0;
      margin-top: 30px; }
      .__dev-chart-card.m > .chart > .top > .left {
        height: 132px;
        width: 21px;
        margin-right: 6px; }
        .__dev-chart-card.m > .chart > .top > .left > span {
          font-size: 8px; }
      .__dev-chart-card.m > .chart > .top > .right {
        height: 120px;
        min-width: calc(100% - 27px);
        justify-content: space-around; }
        .__dev-chart-card.m > .chart > .top > .right > div {
          width: 60px; }
          .__dev-chart-card.m > .chart > .top > .right > div > div {
            width: 20px;
            border-radius: 10px; }
            .__dev-chart-card.m > .chart > .top > .right > div > div > span {
              font-size: 11px;
              font-weight: 700; }
      .__dev-chart-card.m > .chart > .bottom {
        margin-top: 8px;
        margin-bottom: 0;
        margin-left: 27px;
        min-width: calc(100% - 27px);
        justify-content: space-around; }
        .__dev-chart-card.m > .chart > .bottom > div {
          width: 60px;
          height: 30px; }
          .__dev-chart-card.m > .chart > .bottom > div > p {
            font-size: 10px;
            line-height: 15px; }
          .__dev-chart-card.m > .chart > .bottom > div > span {
            font-size: 10px;
            line-height: 15px; }
          .__dev-chart-card.m > .chart > .bottom > div:first-child > p {
            font-weight: 500; }

.rel {
  position: relative; }

.abs {
  position: absolute; }

.hypen {
  width: 10px;
  height: 4px;
  background-color: #444; }

.hypen2 {
  width: 8px;
  height: 2px;
  margin: 0 5px;
  background-color: #444; }

.f-w {
  flex-wrap: wrap; }

.ws-nw {
  white-space: nowrap; }

.f-c {
  flex-direction: column; }

.f-a-s {
  align-items: flex-start !important; }

.width-150-i {
  width: 150px !important; }

/*자동완성 스타일 설정 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 9999s ease-out;
  -webkit-box-shadow: 0 0 0px 1000px white inset !important; }

.shadow-button {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  font-family: 'Roboto', 'Noto Sans KR';
  font-weight: 700;
  font-size: 24px;
  background: #ffffff;
  box-sizing: border-box;
  box-shadow: 0px 4px 3px rgba(119, 119, 119, 0.2);
  border-radius: 15px;
  padding: 19px 31px;
  pointer-events: none;
  /* ios fixed 이슈 관련 */ }
  @media (orientation: landscape) {
    .shadow-button {
      position: fixed; } }
  @media (orientation: portrait) {
    .shadow-button {
      position: fixed; } }
  .shadow-button.red {
    color: #ff5050;
    border: 3px solid #ff5050; }
  .shadow-button.red-orange {
    color: #ff6b00;
    border: 3px solid #ff6b00; }
  .shadow-button.orange {
    color: #ffaa04;
    border: 3px solid #ffaa04; }
  .shadow-button.light-green {
    color: #1ee2b3;
    border: 3px solid #1ee2b3; }
  .shadow-button.green {
    color: #05aab6;
    border: 3px solid #05aab6; }
  .shadow-button.sky-blue {
    color: #17c7ff;
    border: 3px solid #17c7ff; }
  .shadow-button.cyan {
    color: #09b9c6;
    border: 3px solid #09b9c6; }
  .shadow-button.blue {
    color: #0199ee;
    border: 3px solid #0199ee; }
  .shadow-button.pink {
    color: #ff84b0;
    border: 3px solid #ff84b0; }
  .shadow-button.pink2 {
    color: #ff5a95;
    border: 3px solid #ff5a95; }
  .shadow-button.pink-purple {
    color: #d72b68;
    border: 3px solid #d72b68; }
  .shadow-button.purple {
    color: #7681e5;
    border: 3px solid #7681e5; }
  .shadow-button.brown {
    color: #ac7637;
    border: 3px solid #ac7637; }

#cedulearn #play-frame div.underline--dev span.wrong {
  border-bottom: unset !important;
  color: #444 !important; }
  #cedulearn #play-frame div.underline--dev span.wrong.--text {
    color: #ff5050 !important; }
  #cedulearn #play-frame div.underline--dev span.wrong.--underline {
    border-bottom: 3px solid #ff5050 !important; }

.class-report-user-wrap {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 99; }
  .class-report-user-wrap > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative; }
    .class-report-user-wrap > div > div.icon {
      width: 40px;
      height: 40px;
      margin-bottom: 10px;
      border-radius: 50%;
      cursor: pointer; }
    .class-report-user-wrap > div > span {
      color: #09b9c6;
      font-weight: 700;
      font-size: 15px; }
    .class-report-user-wrap > div:first-child {
      margin-right: 40px; }
    .class-report-user-wrap > div > div.pop {
      position: absolute;
      top: calc(100% + 16px);
      right: -32px;
      background-color: #fff;
      padding: 30px 30px 0;
      border-radius: 8px;
      box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
      min-width: 255px; }
      .class-report-user-wrap > div > div.pop:after {
        content: '';
        position: absolute;
        top: -10px;
        right: 40px;
        width: 20px;
        height: 20px;
        background: #ffffff;
        box-sizing: border-box;
        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
        transform: rotate(-45deg); }
      .class-report-user-wrap > div > div.pop > div {
        padding-bottom: 14px;
        margin-bottom: 20px;
        border-bottom: 1px solid #d3d3d5;
        color: #09b9c6;
        font-weight: 700;
        font-size: 20px;
        display: flex;
        align-items: center;
        white-space: nowrap; }
        .class-report-user-wrap > div > div.pop > div img {
          margin-right: 6px;
          width: 20px;
          height: 20px; }
      .class-report-user-wrap > div > div.pop > ul {
        max-height: 300px;
        overflow-y: auto; }
        .class-report-user-wrap > div > div.pop > ul li {
          margin-bottom: 15px;
          border: none !important;
          border-radius: 0 !important;
          padding: 0 !important; }
          .class-report-user-wrap > div > div.pop > ul li span {
            color: #7c7a82; }
            .class-report-user-wrap > div > div.pop > ul li span:nth-child(1) {
              font-size: 18px;
              font-weight: 700;
              margin-right: 8px; }
            .class-report-user-wrap > div > div.pop > ul li span:nth-child(2) {
              font-size: 15px;
              font-weight: 500; }
    .class-report-user-wrap > div.wrong > span {
      color: #ff84b0; }
    .class-report-user-wrap > div.wrong > div.pop > div {
      color: #ff84b0; }

.for-class-report.result_page > div.result_list {
  padding: 0;
  width: 100%;
  background-color: unset;
  box-shadow: none;
  margin-left: 0; }
  .for-class-report.result_page > div.result_list .title {
    justify-content: center !important; }

.class-report-omr-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 32px 0;
  padding-left: 47px;
  padding-right: 180px;
  border: 1px solid #d3d3d5;
  border-radius: 15px; }
  .class-report-omr-wrapper > div:first-child > div {
    color: #09b9c6;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 20px;
    border: 1px solid #09b9c6; }
  @media screen and (max-width: 1024px) {
    .class-report-omr-wrapper {
      flex-direction: column;
      align-items: center;
      padding: 21px 24px 15px; }
      .class-report-omr-wrapper > div:first-child > div {
        padding: 6px 15px;
        font-size: 12px; } }

.class-report-omr-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  margin-left: 20%; }
  .class-report-omr-select > div {
    display: flex;
    flex-direction: column;
    align-items: center; }
    .class-report-omr-select > div > div {
      width: 36px;
      height: 36px;
      text-align: center;
      line-height: 36px;
      font-size: 25px;
      color: #a7a6ab;
      border: 1px solid #a7a6ab;
      border-radius: 50%; }
    .class-report-omr-select > div > img {
      width: 40px;
      height: 40px; }
    .class-report-omr-select > div > span {
      margin-top: 3px;
      font-size: 15px;
      font-weight: 400;
      color: #a7a6ab; }
    .class-report-omr-select > div.correct > div {
      background: #09b9c6;
      border: none;
      color: #fff; }
    .class-report-omr-select > div.correct > span {
      color: #09b9c6;
      font-weight: 600; }
    .class-report-omr-select > div.wrong > span {
      color: #ff84b0;
      font-weight: 500; }
  @media screen and (max-width: 1024px) {
    .class-report-omr-select {
      width: 100%;
      margin-left: 0;
      margin-top: 20px; }
      .class-report-omr-select > div > div {
        width: 24px;
        height: 24px;
        font-size: 12px;
        line-height: 24px; }
      .class-report-omr-select > div > span {
        font-size: 12px; }
      .class-report-omr-select > div > img {
        width: 24px;
        height: 24px; } }

.hlight {
  border-bottom: none;
  text-decoration: underline; }
  .hlight.flag1 {
    text-decoration: unset;
    padding: 0 8px;
    border: 1px solid #504d58;
    border-radius: 12px;
    line-height: 40px !important;
    white-space: nowrap !important;
    width: max-content !important; }

#right-answer div.padding0 {
  padding: 60px 8.5% 50px;
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  margin-top: 20px;
  width: unset; }

.login_custom_confirm h1 {
  width: 100% !important;
  font-size: 18px !important; }

@media screen and (max-width: 768px) {
  .login_custom_confirm h1 {
    font-size: 14px !important;
    line-height: 19px !important; } }

.tooltip_wrap {
  position: relative;
  width: calc(100% - 27px); }
  .tooltip_wrap:hover .tooltip {
    visibility: visible;
    opacity: 1; }

.tooltip {
  visibility: hidden;
  opacity: 0;
  transition: all 0.4s;
  position: absolute;
  top: 40px;
  left: 0;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid #e9e9ea;
  background-color: #fcfdfd;
  color: #7c7a82;
  z-index: 1;
  font-size: 11px; }
  .tooltip.left_large {
    left: 150px !important; }
  .tooltip.one {
    left: 115px !important; }
  .tooltip.one_small {
    left: 80px !important; }
  .tooltip.two {
    left: 190px !important; }
  .tooltip.course3 {
    left: 190px !important; }
  .tooltip.course_tool {
    left: 80px;
    white-space: nowrap; }

/*230320_HUBDNCHYJ_고객센터>이용가이드 영상 가이드 추가*/
.video_guide {
  margin-top: 60px; }
  .video_guide .title {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 30px; }
  .video_guide ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; }
    .video_guide ul li {
      width: calc(33.33% - 14px);
      border-radius: 10px;
      border: 1px solid #a7a6ab;
      overflow: hidden;
      cursor: pointer; }
      .video_guide ul li p {
        font-size: 18px;
        font-weight: 700;
        line-height: 27px;
        text-align: center;
        color: #504d58;
        padding: 23px 0 15px; }
        .video_guide ul li p span {
          display: block; }
      .video_guide ul li button {
        width: 100%;
        height: 43px;
        color: #fff;
        font-size: 15px;
        font-weight: 500;
        background: #7c7a82;
        text-align: center; }
        .video_guide ul li button img {
          margin-left: 10px; }
  .video_guide.mb {
    padding: 0 16px; }
    .video_guide.mb .title {
      margin: 34px 0 15px; }
    .video_guide.mb ul {
      gap: 15px;
      justify-content: center; }
      .video_guide.mb ul li {
        width: calc(50% - 8px); }

.balloon_pop_btn {
  margin-left: 6px; }

.new_header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 100;
  background-color: #fff;
  border-bottom: 1px solid #f2f2f7;
  display: flex;
  /* ios fixed 이슈 관련 */ }
  @media (orientation: landscape) {
    .new_header {
      position: fixed; } }
  @media (orientation: portrait) {
    .new_header {
      position: fixed; } }
  .new_header.dim_on:after {
    content: '';
    width: 100%;
    height: calc(100% + 1px);
    background-color: rgba(29, 29, 29, 0.7);
    position: absolute;
    left: 0;
    top: 0; }

.new_container {
  padding: 84px 32px 24px;
  background-color: #f8f9fa; }
  .new_container.wordbook_page {
    background-color: #fff;
    padding-bottom: 0 !important; }
    .new_container.wordbook_page .new_vocabulary_wrap {
      width: calc(100% + 64px);
      margin-left: -32px;
      min-height: calc(100vh - 236px);
      border-top: 1px solid #e9e9ea;
      background: #f8f9fa;
      padding-bottom: 24px; }
      .new_container.wordbook_page .new_vocabulary_wrap .vocabulary_wrap {
        padding: 0 32px; }
      .new_container.wordbook_page .new_vocabulary_wrap .vocabulary_card .word_box .word {
        margin-bottom: 0; }
  .new_container.contents_vertical {
    display: flex;
    align-items: center;
    justify-content: center; }
    .new_container.contents_vertical .new_layout {
      height: auto; }
  .new_container.premium_voca_campus.mb_style {
    height: auto !important;
    padding-bottom: 120px; }
    .new_container.premium_voca_campus.mb_style .new_half_layout.mb_voca_info {
      margin-top: 38px; }
      .new_container.premium_voca_campus.mb_style .new_half_layout.mb_voca_info .voca_buy_card {
        padding-bottom: 0; }
        .new_container.premium_voca_campus.mb_style .new_half_layout.mb_voca_info .voca_buy_card .voca_top {
          padding-top: 0;
          padding-bottom: 40px; }
        .new_container.premium_voca_campus.mb_style .new_half_layout.mb_voca_info .voca_buy_card .voca_bom {
          padding-top: 30px; }
      .new_container.premium_voca_campus.mb_style .new_half_layout.mb_voca_info.learn_on .voca_buy_list {
        padding-bottom: 28px; }
        .new_container.premium_voca_campus.mb_style .new_half_layout.mb_voca_info.learn_on .voca_buy_list.mb_list_on {
          height: calc(100% - 152px);
          padding-bottom: 28px; }
    .new_container.premium_voca_campus.mb_style .new_half_layout .voca_buy_list {
      display: none;
      border-top: none;
      width: 100%;
      height: calc(100% - 48px);
      overflow-y: auto;
      max-width: 100%;
      position: fixed;
      left: 0;
      top: 48px;
      padding: 0;
      margin-left: 0;
      padding: 20px 20px 108px;
      /* ios fixed 이슈 관련 */ }
      @media (orientation: landscape) {
        .new_container.premium_voca_campus.mb_style .new_half_layout .voca_buy_list {
          position: fixed; } }
      @media (orientation: portrait) {
        .new_container.premium_voca_campus.mb_style .new_half_layout .voca_buy_list {
          position: fixed; } }
      .new_container.premium_voca_campus.mb_style .new_half_layout .voca_buy_list.mb_list_on {
        display: block;
        height: calc(100% - 134px);
        padding-bottom: 22px; }
      .new_container.premium_voca_campus.mb_style .new_half_layout .voca_buy_list .study_card_wrap {
        height: auto;
        overflow-y: visible; }
    .new_container.premium_voca_campus.mb_style.new_version {
      padding: 48px 0 104px; }
      .new_container.premium_voca_campus.mb_style.new_version .version4_voca_layout > div:nth-of-type(2) {
        margin-left: 0;
        width: 100%; }
  .new_container.premium_voca_campus .vocabulary_card .word_box .word {
    margin-bottom: 0; }
  .new_container .new_layout {
    height: 100%; }
    .new_container .new_layout::after {
      content: '';
      display: block;
      clear: both; }
    .new_container .new_layout > * {
      height: 100%; }
    .new_container .new_layout .nav {
      width: 344px;
      float: left; }
      .new_container .new_layout .nav > .shadow_card {
        height: calc(100% - 72px); }
        .new_container .new_layout .nav > .shadow_card.tab_card {
          height: auto;
          padding: 0; }
          .new_container .new_layout .nav > .shadow_card.tab_card + .shadow_card {
            height: calc(100% - 72px);
            padding: 32px;
            margin-top: 24px; }
        .new_container .new_layout .nav > .shadow_card:nth-of-type(2) {
          height: 48px;
          margin-bottom: 24px;
          padding: 0; }
        .new_container .new_layout .nav > .shadow_card.solo {
          padding: 32px;
          height: 100% !important; }
    .new_container .new_layout .new_contents {
      width: calc(100% - 368px);
      float: right; }
      .new_container .new_layout .new_contents > .shadow_card,
      .new_container .new_layout .new_contents > .line_wrap {
        width: calc(50% - 12px);
        height: 100%;
        float: left; }
        .new_container .new_layout .new_contents > .shadow_card:nth-child(2),
        .new_container .new_layout .new_contents > .line_wrap:nth-child(2) {
          float: right !important; }
      .new_container .new_layout .new_contents > .line_wrap {
        max-width: unset;
        display: flex;
        flex-direction: column;
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12); }
        .new_container .new_layout .new_contents > .line_wrap .line_wrap_cont:not(.flex_none) {
          display: flex;
          flex: 1;
          overflow: hidden; }
        .new_container .new_layout .new_contents > .line_wrap .line_wrap_cont .area_box {
          height: 100%; }
          .new_container .new_layout .new_contents > .line_wrap .line_wrap_cont .area_box .scroll_height_wrap {
            height: auto !important; }
        .new_container .new_layout .new_contents > .line_wrap .line_wrap_cont .tree_area_wrap {
          width: 100%; }
      .new_container .new_layout .new_contents .table_top_area {
        height: 34px;
        margin-bottom: 24px; }
      .new_container .new_layout .new_contents .area_box {
        height: calc(50% - 45px); }
        .new_container .new_layout .new_contents .area_box .top_area {
          height: 30px;
          margin-bottom: 12px; }
        .new_container .new_layout .new_contents .area_box .scroll_box {
          height: calc(100% - 42px);
          overflow-y: auto; }
    .new_container .new_layout.row_ver .nav {
      float: initial;
      height: auto; }
      .new_container .new_layout.row_ver .nav.between {
        width: 100%;
        display: flex;
        justify-content: space-between; }
      .new_container .new_layout.row_ver .nav.between_end {
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: space-between; }
      .new_container .new_layout.row_ver .nav .nav_btns {
        margin-bottom: 12px; }
    .new_container .new_layout.row_ver .new_contents {
      float: initial;
      width: 100%;
      height: calc(100% - 72px); }
      .new_container .new_layout.row_ver .new_contents:after {
        content: '';
        display: block;
        clear: both; }
      .new_container .new_layout.row_ver .new_contents .shadow_card:nth-child(1) {
        width: calc(70% - 12px);
        float: left; }
      .new_container .new_layout.row_ver .new_contents .shadow_card:nth-child(2) {
        width: calc(30% - 12px);
        float: right; }
    .new_container .new_layout.row_ver.similar .new_contents .shadow_card:nth-child(1) {
      width: calc(60% - 12px);
      float: left; }
    .new_container .new_layout.row_ver.similar .new_contents .shadow_card:nth-child(2) {
      width: calc(40% - 12px);
      float: right; }
  .new_container.type2 {
    width: calc(100% - 260px);
    margin-left: 260px; }
    .new_container.type2 .new_layout .new_contents {
      width: 100%; }
  .new_container.mycampus {
    padding-top: 92px;
    padding-bottom: 120px; }
    .new_container.mycampus .new_layout {
      height: auto; }
      .new_container.mycampus .new_layout > * {
        height: auto; }
    .new_container.mycampus.mb_campus_student {
      padding: 48px 0 120px;
      padding: 48px 0 32px; }
      .new_container.mycampus.mb_campus_student.mycampus_student .new_layout .page_top {
        padding: 24px 20px 24px;
        border-bottom: none !important; }
      .new_container.mycampus.mb_campus_student.mycampus_student .campus_card_wrap .mb_top.on {
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #e9e9ea; }
        .new_container.mycampus.mb_campus_student.mycampus_student .campus_card_wrap .mb_top.on .toggle_btn img {
          transform: scale(-1); }
      .new_container.mycampus.mb_campus_student.mb_bottom_s {
        padding-bottom: 32px; }
      .new_container.mycampus.mb_campus_student .new_layout .page_top {
        background-color: #ffffff;
        border-bottom: none; }
      .new_container.mycampus.mb_campus_student .class_board {
        padding: 0 20px 24px;
        flex-direction: column;
        background-color: #ffffff; }
        .new_container.mycampus.mb_campus_student .class_board .board_l {
          width: 100%;
          padding: 20px;
          margin-right: 0;
          box-shadow: none; }
          .new_container.mycampus.mb_campus_student .class_board .board_l .student_box .prof_wrap {
            width: 44px;
            height: 44px;
            margin-top: 1px;
            margin-right: 12px; }
            .new_container.mycampus.mb_campus_student .class_board .board_l .student_box .prof_wrap .prof_img {
              background-size: 100%; }
          .new_container.mycampus.mb_campus_student .class_board .board_l .student_box .txt_wrap {
            padding-top: 0; }
            .new_container.mycampus.mb_campus_student .class_board .board_l .student_box .txt_wrap .name {
              font-size: 16px;
              line-height: 24px;
              font-weight: 500; }
            .new_container.mycampus.mb_campus_student .class_board .board_l .student_box .txt_wrap .desc {
              font-size: 14px;
              line-height: 22px;
              margin-top: 0; }
          .new_container.mycampus.mb_campus_student .class_board .board_l .current_box {
            padding: 8px 16px;
            margin-top: 16px; }
            .new_container.mycampus.mb_campus_student .class_board .board_l .current_box .devide_ul {
              flex-direction: row; }
              .new_container.mycampus.mb_campus_student .class_board .board_l .current_box .devide_ul li {
                padding: 0 12px;
                font-size: 13px;
                line-height: 20px; }
                .new_container.mycampus.mb_campus_student .class_board .board_l .current_box .devide_ul li::after {
                  display: inline-block; }
                .new_container.mycampus.mb_campus_student .class_board .board_l .current_box .devide_ul li:first-of-type {
                  padding-left: 0; }
                  .new_container.mycampus.mb_campus_student .class_board .board_l .current_box .devide_ul li:first-of-type::after {
                    display: none; }
                .new_container.mycampus.mb_campus_student .class_board .board_l .current_box .devide_ul li:last-of-type {
                  padding-right: 0; }
                .new_container.mycampus.mb_campus_student .class_board .board_l .current_box .devide_ul li:not(:first-of-type) {
                  margin-top: 0; }
        .new_container.mycampus.mb_campus_student .class_board .board_r {
          width: 100%;
          padding: 0;
          margin-top: 12px;
          box-shadow: none; }
          .new_container.mycampus.mb_campus_student .class_board .board_r .board_top {
            margin-bottom: 0;
            padding: 20px 20px 15px;
            border-radius: 12px;
            cursor: pointer; }
          .new_container.mycampus.mb_campus_student .class_board .board_r .board_title {
            font-size: 14px;
            line-height: 22px;
            color: #7c7a82; }
          .new_container.mycampus.mb_campus_student .class_board .board_r .more_view_btn {
            display: inline-block;
            width: 100%;
            padding: 15px 20px 20px;
            border-radius: 0 0 12px 12px;
            text-align: center;
            line-height: 20px;
            color: #504d58; }
            .new_container.mycampus.mb_campus_student .class_board .board_r .more_view_btn:after {
              position: initial;
              transform: none;
              margin-left: 8px; }
          .new_container.mycampus.mb_campus_student .class_board .board_r.fold .board_top {
            padding-bottom: 20px; }
            .new_container.mycampus.mb_campus_student .class_board .board_r.fold .board_top .fold_btn {
              transform: scaleY(-1); }
          .new_container.mycampus.mb_campus_student .class_board .board_r.fold .class_list {
            display: none; }
          .new_container.mycampus.mb_campus_student .class_board .board_r.fold .more_view_btn {
            display: none; }
      .new_container.mycampus.mb_campus_student .class_list {
        flex-direction: column;
        padding: 0 20px; }
        .new_container.mycampus.mb_campus_student .class_list > li {
          width: 100%;
          padding: 12px 0 16px;
          border-radius: 0;
          border: none;
          border-bottom: 1px solid #f2f2f7;
          justify-content: initial; }
          .new_container.mycampus.mb_campus_student .class_list > li:not(:last-of-type) {
            margin-right: 0; }
          .new_container.mycampus.mb_campus_student .class_list > li:first-of-type {
            padding-top: 0; }
          .new_container.mycampus.mb_campus_student .class_list > li .date {
            margin-top: 4px; }
      .new_container.mycampus.mb_campus_student .tag_select.size_sm {
        height: 40px; }
        .new_container.mycampus.mb_campus_student .tag_select.size_sm p {
          width: 100%;
          height: 40px;
          padding-top: 9px;
          padding-bottom: 9px;
          font-size: 14px;
          line-height: 22px; }
        .new_container.mycampus.mb_campus_student .tag_select.size_sm > ul {
          width: 100%;
          right: auto;
          left: 0; }
      .new_container.mycampus.mb_campus_student .campus_wrap_container {
        padding: 24px 20px 0;
        border-top: 1px solid #e9e9ea !important; }
      .new_container.mycampus.mb_campus_student .campus_wrap {
        margin-top: 12px; }
        .new_container.mycampus.mb_campus_student .campus_wrap .campus_card_wrap .campus_card {
          margin-right: 0;
          margin-top: 0;
          margin-bottom: 8px; }
          .new_container.mycampus.mb_campus_student .campus_wrap .campus_card_wrap .campus_card:nth-of-type(n + 3) {
            margin-top: 0 !important; }
          .new_container.mycampus.mb_campus_student .campus_wrap .campus_card_wrap .campus_card:nth-child(4n + 5) {
            margin-bottom: 8px !important; }
          .new_container.mycampus.mb_campus_student .campus_wrap .campus_card_wrap .campus_card:last-child {
            margin-bottom: 0 !important; }
        .new_container.mycampus.mb_campus_student .campus_wrap .campus_btns.empty {
          margin-top: 0;
          margin-bottom: 0; }
      .new_container.mycampus.mb_campus_student .campus_card_wrap .mb_top .new_factory_tag {
        width: auto;
        height: 26px;
        line-height: 24px;
        font-size: 13px;
        padding: 0 10px; }
        .new_container.mycampus.mb_campus_student .campus_card_wrap .mb_top .new_factory_tag.premium_tag {
          padding: 0 10px 0 27px; }
          .new_container.mycampus.mb_campus_student .campus_card_wrap .mb_top .new_factory_tag.premium_tag:before {
            width: 20px;
            height: 20px;
            line-height: 20px; }
      .new_container.mycampus.mb_campus_student .campus_card_wrap .mb_top .title {
        margin-bottom: 4px; }
      .new_container.mycampus.mb_campus_student .campus_card_wrap .mb_top .like_btn {
        margin-left: 2px;
        margin-bottom: 3px; }
      .new_container.mycampus.mb_campus_student .campus_card_wrap .mb_top .range {
        font-size: 13px;
        line-height: 20px; }
      .new_container.mycampus.mb_campus_student .campus_card_wrap .mb_top .top_btns {
        margin-top: 20px; }
        .new_container.mycampus.mb_campus_student .campus_card_wrap .mb_top .top_btns > button:last-of-type {
          width: 100%; }
      .new_container.mycampus.mb_campus_student .campus_card_wrap .mb_top .half_btns {
        margin-bottom: 8px; }
        .new_container.mycampus.mb_campus_student .campus_card_wrap .mb_top .half_btns button {
          padding-left: 6px;
          padding-right: 6px; }
      .new_container.mycampus.mb_campus_student .campus_card .top {
        border-radius: 8px; }
        .new_container.mycampus.mb_campus_student .campus_card .top > div .main_title {
          line-height: 24px; }
          .new_container.mycampus.mb_campus_student .campus_card .top > div .main_title i {
            width: 18px;
            background-size: 18px;
            background-position: center 1px; }
        .new_container.mycampus.mb_campus_student .campus_card .top > div .sub_title {
          font-size: 13px;
          line-height: 20px; }
    .new_container.mycampus.mb_campus_teacher {
      padding-top: 72px;
      padding-bottom: 24px; }

.shadow_card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  padding: 32px;
  position: relative;
  background-color: #ffffff; }
  .shadow_card.with-bottom-btn {
    padding-bottom: 92px; }
    .shadow_card.with-bottom-btn .fixed-bottom-btn {
      justify-content: center;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      padding: 20px 32px 29px;
      border-radius: 0 0 12px 12px; }
    .shadow_card.with-bottom-btn.pd_bot_more {
      padding-bottom: 32px; }

.nodata_alert {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center; }
  .nodata_alert .main {
    font-size: 24px;
    font-weight: bold;
    color: #24212e;
    line-height: 36px; }
  .nodata_alert .sub {
    font-size: 18px;
    font-weight: bold;
    color: #504d58;
    line-height: 28px;
    margin-top: 16px;
    word-break: keep-all; }
  .nodata_alert .detail {
    font-size: 16px;
    color: #a7a6ab;
    line-height: 24px;
    margin-top: 6px;
    word-break: keep-all; }
  .nodata_alert.max_260 {
    max-width: 260px; }
  .nodata_alert.detail_none .detail {
    display: none; }
  .nodata_alert.not_next .main,
  .nodata_alert.not_next .sub {
    color: #a7a6ab; }
  .nodata_alert.abs_none {
    position: static;
    transform: none;
    padding: 24px 0; }
  .nodata_alert.mb_nodata_alert .sub {
    font-size: 16px;
    line-height: 24px; }
  .nodata_alert.mb_nodata_alert .detail {
    font-size: 14px;
    line-height: 22px;
    margin-top: 4px; }
  .nodata_alert.mb_nodata_alert button {
    margin-top: 20px; }

.file_up {
  display: flex;
  max-width: 360px; }
  .file_up input#file_name {
    width: calc(100% - 81px);
    height: 36px;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 20px;
    background-color: #ffffff;
    border: 1px solid #dfdfe4;
    border-radius: 8px;
    color: #504d58; }
    .file_up input#file_name::placeholder {
      font-size: inherit;
      line-height: inherit;
      color: #a7a6ab; }
  .file_up .file_btns {
    display: inline-block;
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 400;
    line-height: 32px;
    background-color: #ffffff;
    border: 1px solid #dfdfe4;
    border-radius: 8px;
    text-align: center;
    white-space: nowrap;
    margin: 1px 0;
    margin-left: 6px; }
  .file_up i.remove_btn {
    cursor: pointer;
    position: relative;
    right: 22px;
    padding: 8px 16px;
    background: #ccc;
    border-radius: 0px 8px 8px 0px;
    width: 40px;
    color: #fff; }
  .file_up.img_up {
    max-width: unset;
    position: relative; }
    .file_up.img_up input#file_name {
      width: 100%;
      height: 200px;
      background-color: #f8f9fa;
      border: 1px solid #f8f9fa;
      border-radius: 6px; }
    .file_up.img_up .file_btns {
      height: 30px;
      line-height: 28px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
  .file_up.hidden {
    display: none; }

.file_img {
  position: relative;
  display: inline-block;
  height: 215px;
  border: 1px solid #e9e9ea;
  border-radius: 8px;
  overflow: hidden; }
  .file_img img {
    max-width: 100%;
    height: 100%; }
  .file_img .file_img_del {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url("../img/icon/icon_img_delete_x.svg") no-repeat center/22px;
    position: absolute;
    top: 8px;
    right: 8px; }

.textarea {
  width: 100%;
  height: 76px;
  padding: 7px 12px;
  box-sizing: border-box;
  resize: none;
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #504d58;
  background-color: #ffffff;
  border: 1px solid #e9e9ea;
  border-radius: 8px; }
  .textarea::placeholder {
    font: inherit;
    line-height: inherit;
    color: #a7a6ab;
    font-weight: 400; }
  .textarea:disabled {
    background: #f8f9fa; }

.editor_wrap * {
  margin: initial;
  padding: initial;
  border: initial;
  box-sizing: border-box;
  line-height: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  color: inherit; }

.editor_wrap .editor_area {
  width: 100%;
  max-width: 100%;
  overflow-y: auto;
  padding: 8px 12px;
  background-color: #f8f9fa;
  border: 1px solid #f8f9fa;
  border-radius: 6px; }
  .editor_wrap .editor_area strong {
    font-weight: bold; }
  .editor_wrap .editor_area em {
    font-style: italic; }

.lie_gray_bg {
  position: fixed;
  top: 60px;
  left: 0;
  z-index: 10;
  width: 100%;
  height: auto !important;
  padding: 24px 32px;
  background: #f8f9fa; }

.vocabulary_controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 60px;
  z-index: 10;
  background: #f8f9fa;
  padding-top: 16px;
  padding-bottom: 16px; }
  .vocabulary_controls.sticky_on {
    background-color: #ffffff;
    border-bottom: 1px solid #f2f2f7; }
  .vocabulary_controls > div:last-of-type {
    display: flex;
    flex-direction: column;
    align-items: end; }
  .vocabulary_controls button {
    display: flex;
    align-items: center;
    color: #504d58;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px; }
    .vocabulary_controls button img {
      margin: 0 4px; }

.version4_voca_layout {
  display: flex;
  flex-wrap: wrap;
  padding-top: 80px; }
  .version4_voca_layout > div:nth-of-type(1) {
    width: calc(100% - 584px);
    padding-right: 24px; }
  .version4_voca_layout > div:nth-of-type(2) {
    position: relative;
    width: 584px; }
  .version4_voca_layout .voca_buy_card {
    margin-bottom: 16px; }
  .version4_voca_layout .vocabulary_controls {
    width: calc(100% + 12px);
    position: sticky;
    top: 150px;
    z-index: 10;
    padding-right: 12px;
    background-color: #f8f9fa;
    margin-bottom: 4px;
    padding-top: 0;
    margin-top: 16px; }
  .version4_voca_layout .voca_buy_list {
    position: sticky;
    bottom: 100px;
    width: 584px;
    height: calc(100% - 190px);
    padding: 32px 32px 44px; }
    .version4_voca_layout .voca_buy_list .study_card_wrap {
      height: 100%; }
      .version4_voca_layout .voca_buy_list .study_card_wrap .study_card {
        position: relative;
        padding: 20px 24px 20px; }
        .version4_voca_layout .voca_buy_list .study_card_wrap .study_card .new_factory_tag {
          display: inline-flex;
          align-items: center;
          padding: 0 5px;
          font-size: 12px;
          font-weight: 500;
          border-radius: 6px;
          margin-right: 8px;
          line-height: 1; }
        .version4_voca_layout .voca_buy_list .study_card_wrap .study_card .top .btns button {
          padding: 0 8px; }
        .version4_voca_layout .voca_buy_list .study_card_wrap .study_card .study_progress_wrap {
          margin-top: 9px; }
    .version4_voca_layout .voca_buy_list .study_card_wrap::-webkit-scrollbar {
      display: none; }
  .version4_voca_layout .voca_buy_list::-webkit-scrollbar {
    display: none; }

.vocabulary_wrap .nodata_alert .sub {
  font-size: 16px;
  font-weight: 500; }

.word_gray_bg {
  width: calc(100% + 40px);
  display: flex;
  flex-direction: column-reverse;
  margin-left: -20px;
  background: #f8f9fa; }
  .word_gray_bg.sticky {
    position: sticky;
    top: -38px;
    z-index: 10; }
  .word_gray_bg > li {
    border-bottom: 1px solid #f2f2f7;
    padding: 12px 20px;
    position: relative; }
    .word_gray_bg > li .new_select.on {
      z-index: 32 !important; }
      .word_gray_bg > li .new_select.on + .common_dim {
        z-index: 30 !important; }
    .word_gray_bg > li > .new_select {
      flex: 1; }
    .word_gray_bg > li:first-of-type {
      display: flex;
      align-items: center; }
      .word_gray_bg > li:first-of-type .new_select p {
        padding: 5px 28px 5px 12px; }
      .word_gray_bg > li:first-of-type .new_select:nth-of-type(1) {
        width: 146px;
        margin-right: 8px; }
        .word_gray_bg > li:first-of-type .new_select:nth-of-type(1).state_none p::before {
          display: none; }
        .word_gray_bg > li:first-of-type .new_select:nth-of-type(1).green p::before {
          background-color: #00d37a; }
        .word_gray_bg > li:first-of-type .new_select:nth-of-type(1) p {
          display: flex;
          align-items: center; }
          .word_gray_bg > li:first-of-type .new_select:nth-of-type(1) p::before {
            content: '';
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            margin-right: 6px;
            background-color: #ff5050; }
        .word_gray_bg > li:first-of-type .new_select:nth-of-type(1) li:nth-of-type(1) a, .word_gray_bg > li:first-of-type .new_select:nth-of-type(1) li:nth-of-type(2) a {
          display: flex;
          align-items: center; }
          .word_gray_bg > li:first-of-type .new_select:nth-of-type(1) li:nth-of-type(1) a::before, .word_gray_bg > li:first-of-type .new_select:nth-of-type(1) li:nth-of-type(2) a::before {
            content: '';
            display: block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            margin-right: 6px;
            background-color: #ff5050; }
        .word_gray_bg > li:first-of-type .new_select:nth-of-type(1) li:nth-of-type(2) a::before {
          background-color: #00d37a; }
      .word_gray_bg > li:first-of-type .new_select:nth-of-type(3) {
        width: calc(100% - 153px); }
    .word_gray_bg > li.courses {
      order: 2; }
    .word_gray_bg > li.classes {
      order: 3; }
  .word_gray_bg .transparent_version p {
    height: 20px;
    border: none;
    font-weight: bold;
    background-color: transparent;
    padding: 0 32px 0 0; }
    .word_gray_bg .transparent_version p::after {
      right: 0; }
  .word_gray_bg .transparent_version.on p {
    border: none; }
  .word_gray_bg + .word_card_wrap {
    width: calc(100% + 40px);
    margin-left: -20px; }

.top_btn_black_version {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #504d58;
  box-shadow: 3.429px 3.429px 10.286px 0px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: all 0.4s; }
  .top_btn_black_version.active {
    visibility: visible;
    opacity: 1; }
  .top_btn_black_version img {
    width: 24px;
    transform: rotateZ(-90deg); }

.exam_type_ul li {
  display: flex;
  flex-wrap: wrap;
  align-items: start; }
  .exam_type_ul li span {
    width: 100px;
    color: #504d58;
    font-size: 16px;
    font-weight: 500;
    line-height: 40px; }
  .exam_type_ul li .radio_btn_wrap {
    width: calc(100% - 100px); }

@media screen and (max-width: 1470px) {
  .nb_btn_full label {
    width: 100% !important;
    margin-right: 0 !important; }
    .nb_btn_full label:not(:first-of-type) {
      margin-top: 8px; }
  .new_container {
    padding: 76px 20px 20px; }
    .new_container .new_layout .new_contents {
      width: calc(100% - 332px); }
      .new_container .new_layout .new_contents .shadow_card {
        width: calc(50% - 6px);
        padding: 24px; }
    .new_container.mb_side_none {
      padding-left: 0;
      padding-right: 0; }
    .new_container.mb_blank_none {
      padding-top: 48px; }
    .new_container.mb_bottom_none {
      padding-bottom: 0; }
    .new_container.mb_full_type {
      padding: 48px 0 0 !important; }
  .version4_voca_layout > div:nth-of-type(1) {
    width: calc(100% - 480px); }
  .version4_voca_layout > div:nth-of-type(2) {
    width: 480px; }
  .word_card_wrap .new_vocabulary_wrap .vocabulary_wrap .vocabulary_card:nth-child(5n + 0) {
    margin-right: 16px; }
  .word_card_wrap .new_vocabulary_wrap .vocabulary_wrap .vocabulary_card:nth-child(3n + 0) {
    margin-right: 0; }
  .new_container.wordbook_page .new_vocabulary_wrap {
    width: calc(100% + 48px);
    margin-left: -24px; }
    .new_container.wordbook_page .new_vocabulary_wrap .vocabulary_wrap {
      padding: 0 24px; } }

@media screen and (max-width: 1200px) {
  .word_card_wrap .new_vocabulary_wrap .vocabulary_wrap .vocabulary_card:nth-child(3n + 0) {
    margin-right: 16px; }
  .word_card_wrap .new_vocabulary_wrap .vocabulary_wrap .vocabulary_card:nth-child(2n + 0) {
    margin-right: 0; } }

@media screen and (max-width: 768px) {
  .new_container {
    padding: 84px 20px 24px; }
    .new_container.contents_vertical .complate_card {
      width: 100%; } }

/**
  *  Style.scss 
  *  Writer : HUBDNC-AJH
  *  RESAON : 퍼블리싱 작업 이후, common scss 추가 작업본 및 기타 style 작업
  */
#add-new-class-popup .disabled {
  /*
    background: #f5f5f7;
    */
  background: #e9e9ea; }

.input-component-box .input-wrapper.red_input {
  border-color: #ff5050 !important; }

.input-component-box .input-wrapper.cyan_input {
  border-color: #09b9c6; }

.input-component-box .input-wrapper.icon_cal {
  padding-right: 46px; }

.header-inner .logo img {
  max-height: 48px; }

.header-inner .logo h1 {
  font-size: 30px;
  font-weight: 600;
  color: #24212e; }

.no-data {
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: #8d8d8d;
  padding: 130px 0; }

.list-no-data {
  text-align: center;
  font-size: 14px;
  color: #7c7a82;
  padding: 22px 0;
  line-height: 650px; }

.myclass-main-content .no-data {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; }

.swiper-date-no-data {
  margin-top: 10px;
  font-size: 22px;
  color: #a7a6ab;
  margin-left: -30px; }

.input-video-url {
  font-size: 12px;
  margin-left: 10px;
  width: calc(100% - 120px); }

.timer {
  margin-top: 6px;
  font-size: 14px;
  color: #f10000;
  letter-spacing: 0.8px; }

.profile_image {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 100%; }

.book_image {
  width: 100%; }

.input-wrapper .timer {
  margin-top: 0px; }

.print_pop .loading-popup {
  position: static; }

.loading-popup {
  background-color: #141414ad;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  /* ios fixed 이슈 관련 */ }
  @media (orientation: landscape) {
    .loading-popup {
      position: fixed; } }
  @media (orientation: portrait) {
    .loading-popup {
      position: fixed; } }
  .loading-popup .loading-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-clip: text;
    -webkit-background-clip: text;
    color: #09b9c6;
    text-align: center;
    word-break: keep-all;
    line-height: 1.4;
    /* ios fixed 이슈 관련 */ }
    .loading-popup .loading-text::before {
      content: '';
      display: block;
      width: 100px;
      height: 100px;
      background: url("/img/cedu-loading.gif") no-repeat center/contain;
      margin: 0 auto 20px; }
    @media (orientation: landscape) {
      .loading-popup .loading-text {
        position: fixed; } }
    @media (orientation: portrait) {
      .loading-popup .loading-text {
        position: fixed; } }

@keyframes ct {
  0% {
    color: #09b9c6; }
  25% {
    color: transparent; }
  50% {
    color: #09b9c6; }
  75% {
    color: transparent; }
  100% {
    color: #09b9c6; } }
  .loading-popup img {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px; }
  .loading-popup.list_loading {
    display: flex;
    align-items: center;
    justify-content: center;
    position: initial;
    background-color: initial;
    height: 325px; }
    .loading-popup.list_loading img {
      position: initial;
      transform: initial; }

.mobile .loading-popup {
  padding-top: 48px;
  height: 100%; }

.absolute::after {
  position: absolute !important; }

.coupon-prevent-auto-use-box {
  text-align: right;
  margin: 23px 6px;
  font-size: 16px; }
  .coupon-prevent-auto-use-box label {
    display: inline-block !important; }

.modify_test_popup {
  width: 90%;
  padding: 24px; }
  .modify_test_popup .test_produce_pop {
    padding: 0px 35px; }

.question_image_box {
  position: relative;
  max-width: 450px;
  height: 450px;
  margin: auto; }
  .question_image_box .img_remove {
    right: -12px;
    z-index: 1; }

.question_image {
  width: 100%;
  height: 100%;
  border-radius: unset;
  display: block;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  position: absolute;
  padding: 20px; }
  .question_image.none_padding {
    padding: 0px; }

.editor_wrap .ql-toolbar.ql-snow + .ql-container.ql-snow {
  height: 300px; }

.editor_wrap.short .ql-toolbar.ql-snow + .ql-container.ql-snow {
  height: 200px; }

.editor_wrap .ql-editor em {
  font-style: italic; }

.wrong_border {
  border: 1px solid #ff5050 !important; }

.error_msg {
  color: #ff5050 !important; }

.preview.watermark,
.factory_preview .wrong_container.watermark {
  position: relative; }
  .preview.watermark:before,
  .factory_preview .wrong_container.watermark:before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 254px;
    height: 77px;
    z-index: 1;
    background: url(/img/icon_cedu.svg) no-repeat center; }

.preview #play-frame .test-timer,
.factory_preview .wrong_container #play-frame .test-timer {
  display: none !important; }

.preview #play-frame .test-card .link-item,
.factory_preview .wrong_container #play-frame .test-card .link-item {
  align-items: flex-start !important; }

.preview #play-frame .btn-submit-answer,
.factory_preview .wrong_container #play-frame .btn-submit-answer {
  display: none !important; }

.preview #play-frame .bookmark,
.factory_preview .wrong_container #play-frame .bookmark {
  display: none !important; }

.preview #play-frame .page-nav-arrow,
.factory_preview .wrong_container #play-frame .page-nav-arrow {
  display: none !important; }

.preview #play-frame .play-content-box span,
.factory_preview .wrong_container #play-frame .play-content-box span {
  font: inherit !important;
  width: max-content; }

.preview #play-frame em,
.preview #play-frame i,
.factory_preview .wrong_container #play-frame em,
.factory_preview .wrong_container #play-frame i {
  font-weight: inherit !important;
  font-size: inherit !important; }
  .preview #play-frame em.tag,
  .preview #play-frame i.tag,
  .factory_preview .wrong_container #play-frame em.tag,
  .factory_preview .wrong_container #play-frame i.tag {
    font-size: 18px !important; }

.preview #play-frame u,
.factory_preview .wrong_container #play-frame u {
  font-size: inherit !important; }

.preview #play-frame .select-item i,
.factory_preview .wrong_container #play-frame .select-item i {
  font-weight: 500 !important;
  font-size: 14px !important; }

.preview .eraser_btn,
.factory_preview .wrong_container .eraser_btn {
  display: none !important; }

.invite_teacher_popup .popup-main-content .button_area {
  text-align: center; }
  .invite_teacher_popup .popup-main-content .button_area button {
    font-weight: bold;
    font-size: 18px;
    border-radius: 15px;
    transition: 0.21s;
    margin: 0 auto;
    width: calc(50% - 30px);
    height: 65px;
    padding: 0px; }
    .invite_teacher_popup .popup-main-content .button_area button + button {
      margin-left: 30px; }
    .invite_teacher_popup .popup-main-content .button_area button.disabled {
      color: #fff;
      background: #a7a6ab; }
    .invite_teacher_popup .popup-main-content .button_area button.purple_disabled {
      color: #fff;
      background: #c8cdf5; }
    .invite_teacher_popup .popup-main-content .button_area button.purple {
      color: #fff;
      background: #7681e5; }

.pagination-component {
  margin-top: 50px; }

.btn_disabled {
  color: #fff;
  background: #a7a6ab !important; }

.payment-history-comment {
  font-size: 8px; }

.report-content .desc-box {
  min-height: 800px; }

.report-content #play-frame {
  position: relative;
  width: 100%; }
  .report-content #play-frame .play-content-box .bottom {
    display: none; }

.report-content .play-main-btn-wrap {
  display: none; }

.report-content .answer-rate {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 20px 0px;
  position: relative;
  z-index: 2; }
  .report-content .answer-rate .answer-rate-closer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* ios fixed 이슈 관련 */ }
    @media (orientation: landscape) {
      .report-content .answer-rate .answer-rate-closer {
        position: fixed; } }
    @media (orientation: portrait) {
      .report-content .answer-rate .answer-rate-closer {
        position: fixed; } }
  .report-content .answer-rate > div {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    cursor: pointer; }
    .report-content .answer-rate > div p {
      font-size: 15px;
      text-align: center; }
      .report-content .answer-rate > div p.cyan {
        color: #09b9c6; }
      .report-content .answer-rate > div p.pink {
        color: #ff84b0; }
    .report-content .answer-rate > div .target-member {
      width: 255px;
      position: absolute;
      top: 50px;
      right: -30px;
      background: #ffffff;
      box-sizing: border-box;
      box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
      border-radius: 10px;
      padding: 20px 30px 0;
      z-index: 1; }
      .report-content .answer-rate > div .target-member:after {
        content: '';
        position: absolute;
        top: -10px;
        right: 40px;
        width: 20px;
        height: 20px;
        background: #ffffff;
        box-sizing: border-box;
        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
        transform: rotate(-45deg); }
      .report-content .answer-rate > div .target-member .category {
        display: flex;
        align-items: center;
        padding-bottom: 14px;
        margin-bottom: 20px;
        border-bottom: 1px solid #d3d3d5;
        font-size: 20px; }
        .report-content .answer-rate > div .target-member .category.cyan {
          color: #09b9c6; }
        .report-content .answer-rate > div .target-member .category.pink {
          color: #ff84b0; }
        .report-content .answer-rate > div .target-member .category img {
          width: 20px;
          height: 20px;
          margin-right: 6px; }
      .report-content .answer-rate > div .target-member .st-list {
        display: flex;
        flex-direction: column;
        gap: 15px;
        overflow: auto;
        max-height: 180px;
        margin-bottom: 30px; }
        .report-content .answer-rate > div .target-member .st-list p {
          font-size: 12px;
          color: #7c7a82;
          text-align: left; }
          .report-content .answer-rate > div .target-member .st-list p em {
            font-size: 18px;
            color: #7c7a82;
            margin-right: 6px; }

@media screen and (max-width: 1024px) {
  #mobile-myclass-table .course_title {
    float: left;
    font-size: 14px;
    font-weight: 700;
    line-height: 23px;
    text-align: center;
    color: #24212e;
    max-width: calc(100% - 90px);
    text-align: left; }
  #mobile-myclass-table .course_date {
    float: right;
    font-family: 'Inter', 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 23px;
    color: #a7a6ab; } }

.invite_teacher_popup .popup-main-content .button_area button {
  font-size: 16px; }

.print-manager button {
  padding: 12px 48px;
  background: #eb5c5c;
  color: #000;
  border-radius: 20px;
  margin: 20px; }

.print-wrong,
.print-answer {
  margin-top: 0px !important; }
  .print-wrong .btn_print,
  .print-answer .btn_print {
    display: none !important; }
  .print-wrong .preview_test,
  .print-answer .preview_test {
    display: none !important; }

.swiper-pagination-bullet {
  display: none; }

.find_list.devide_ul li {
  line-height: 1; }
  .find_list.devide_ul li::after {
    height: 12px; }

.find_list a {
  font-size: 16px;
  line-height: 22px; }

.devide_ul li {
  padding: 0 20px;
  position: relative; }
  .devide_ul li:first-of-type {
    padding-left: 0; }
  .devide_ul li:last-of-type {
    padding-right: 0; }
  .devide_ul li:first-of-type::after {
    display: none; }
  .devide_ul li::after {
    content: '';
    display: block;
    width: 1px;
    height: 12px;
    background-color: #e9e9ea;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); }

.form_layout {
  width: 100%;
  max-width: 594px;
  margin: 0 auto;
  padding-top: 143px;
  /* 회원가입 */
  /* 로그인 */ }
  .form_layout .input-component-box .input-wrapper input:read-only {
    color: #24212e; }
  .form_layout h1 {
    text-align: center;
    margin-bottom: 50px; }
    .form_layout h1 p {
      font-size: 50px;
      font-weight: 700;
      line-height: 72px;
      color: #24212e; }
    .form_layout h1 span {
      margin-top: 12px;
      display: block;
      font-size: 16px;
      color: #7c7a82;
      line-height: 21px; }
  .form_layout form .input-wrapper {
    margin-bottom: 20px; }
  .form_layout .full_btn {
    margin: 40px 0 18px;
    box-shadow: 0px 4px 3px rgba(104, 115, 170, 0.3); }
  .form_layout .join_btn {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #504d58; }
    .form_layout .join_btn span {
      font-size: 14px;
      font-weight: 500;
      color: #a7a6ab;
      text-decoration: underline;
      display: inline-block;
      margin-right: 5px; }
  .form_layout .join_list li {
    position: relative;
    float: left;
    width: calc(50% - 10px);
    border: 1px solid #d3d3d5;
    border-radius: 20px; }
    .form_layout .join_list li::before {
      content: '';
      display: none;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 2px solid #7681e5;
      z-index: -1;
      border-radius: 20px; }
    .form_layout .join_list li:hover {
      border-color: #09b9c6; }
    .form_layout .join_list li:hover::before {
      display: block; }
    .form_layout .join_list li button, .form_layout .join_list li:before {
      transition: all 0.4s; }
    .form_layout .join_list li a {
      padding: 85px 0 76px;
      text-align: center;
      display: block; }
      .form_layout .join_list li a img {
        margin-bottom: 10px; }
      .form_layout .join_list li a p {
        font-size: 36px;
        font-weight: bold;
        color: #7681e5;
        line-height: 52px;
        margin-bottom: 30px; }
        .form_layout .join_list li a p span {
          display: block;
          font-size: 15px;
          color: #7681e5; }
      .form_layout .join_list li a button {
        width: 100%;
        max-width: 206px; }
    .form_layout .join_list li:first-of-type button {
      border: 1px solid #7681e5;
      color: #7681e5; }
    .form_layout .join_list li:first-of-type:hover {
      border-color: #7681e5; }
    .form_layout .join_list li:first-of-type:hover button {
      background-color: #7681e5;
      color: #fff; }
    .form_layout .join_list li:last-of-type {
      margin-left: 20px; }
      .form_layout .join_list li:last-of-type p {
        color: #09b9c6; }
        .form_layout .join_list li:last-of-type p span {
          color: #09b9c6; }
      .form_layout .join_list li:last-of-type button {
        border: 1px solid #09b9c6;
        color: #09b9c6; }
      .form_layout .join_list li:last-of-type:hover:before {
        border-color: #09b9c6; }
      .form_layout .join_list li:last-of-type:hover button {
        background-color: #09b9c6;
        color: #fff; }
  .form_layout.join_form {
    max-width: 640px;
    padding-top: 75px; }
    .form_layout.join_form.join_top {
      padding-top: 143px; }
    .form_layout.join_form.new_join_form {
      padding-top: 76px; }
      .form_layout.join_form.new_join_form.mb_style {
        padding-top: 32px;
        max-width: unset; }
        .form_layout.join_form.new_join_form.mb_style.account_edit {
          padding-top: 48px; }
  .form_layout.login_form_layout form .input-wrapper {
    margin-bottom: 16px; }
  .form_layout.login_form_layout .input-component-box .input-wrapper {
    padding: 0 20px; }
    .form_layout.login_form_layout .input-component-box .input-wrapper input {
      font-size: 16px; }
  .form_layout.login_form_layout .find_list a {
    font-size: 14px; }
  .form_layout.login_form_layout label.id_save {
    line-height: 22px; }

.middle_container.join_complete {
  text-align: center;
  padding-top: 0;
  display: table;
  width: 100%;
  height: 100vh;
  padding-bottom: 0; }
  .middle_container.join_complete .form_layout {
    display: table-cell;
    vertical-align: middle; }
    .middle_container.join_complete .form_layout h2 {
      font-size: 30px;
      font-weight: 700;
      color: #24212e;
      margin-bottom: 70px; }
    .middle_container.join_complete .form_layout button {
      font-weight: 700;
      box-shadow: 0px 4px 3px rgba(104, 115, 170, 0.3); }

@media screen and (max-width: 1470px) {
  .form_layout.login_form_layout {
    padding-top: 0; } }

@media screen and (max-width: 1024px) {
  .mb_footer_none.form_top {
    padding-top: 86px; }
  .mb_footer_none + footer {
    display: none; }
  .form_layout form .input-wrapper {
    margin-bottom: 10px; }
  .form_layout .logo {
    margin-bottom: 80px; }
  .form_layout h1 p {
    line-height: initial; }
  .form_layout h1 span {
    margin-top: 10px; }
  .middle_container {
    padding-top: 0;
    display: table;
    width: 100%;
    height: 100vh;
    padding-bottom: 0; }
    .middle_container .form_layout {
      display: table-cell;
      vertical-align: middle; }
      .middle_container .form_layout form .input-wrapper {
        margin-bottom: 10px; }
      .middle_container .form_layout .devide_ul li {
        padding: 0px 5px; }
      .middle_container .form_layout .find_list a {
        font-size: 13px;
        line-height: 24px; }
  .middle_container.join_complete .form_layout h2 {
    font-size: 18px;
    font-weight: 500;
    color: #24212e;
    margin-bottom: 50px; }
  .middle_container.join_complete .form_layout button {
    height: 50px;
    line-height: 50px;
    font-size: 16px; }
  .container .form_layout {
    padding-top: 0; }
    .container .form_layout.login_form_layout {
      padding-top: 50px;
      padding-bottom: 50px; }
    .container .form_layout .join_list li a p {
      font-size: 22px;
      line-height: 31px; }
      .container .form_layout .join_list li a p span {
        font-size: 14px;
        line-height: 20px; }
    .container .form_layout .join_list li a button {
      width: 150px;
      height: 40px;
      line-height: normal;
      font-size: 14px;
      border-radius: 8px; }
    .container .form_layout .join_list li:first-of-type:before {
      display: block;
      border-color: #7681e5; }
    .container .form_layout .join_list li:first-of-type button {
      background-color: #7681e5;
      color: #fff; }
    .container .form_layout .join_list li:last-of-type:before {
      display: block;
      border-color: #09b9c6; }
    .container .form_layout .join_list li:last-of-type button {
      background-color: #09b9c6;
      color: #fff; }
    .container .form_layout h1 {
      margin-bottom: 30px; }
      .container .form_layout h1 p {
        display: none;
        font-size: 26px; }
        .container .form_layout h1 p.block {
          display: block; }
      .container .form_layout h1 span {
        font-size: 14px; }
    .container .form_layout.join_form h1 {
      display: none; }
    .container .form_layout > .btn.full_btn {
      height: 50px;
      line-height: 50px;
      font-size: 16px;
      margin: 30px 0 15px; }
    .container .form_layout > .join_btn {
      font-size: 14px; }
      .container .form_layout > .join_btn span {
        font-size: 12px; }
    .container .form_layout .id_save {
      display: none; } }

@media screen and (max-width: 480px) {
  .form_layout .join_list li {
    width: 100%;
    border-color: transparent; }
    .form_layout .join_list li:last-of-type {
      margin-left: 0;
      margin-top: 20px; }
    .form_layout .join_list li a {
      padding: 30px 0; } }

.purple_t {
  color: #7681e5 !important; }

.form_alert {
  color: #7c7a82;
  font-size: 13px;
  line-height: 20px;
  margin-top: 8px; }
  .form_alert.ellipsis2_alert {
    max-width: 360px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; }

.line_height_normal {
  line-height: 1.2 !important; }

.va_top {
  vertical-align: top; }

.join_type .account_inner_div .input-wrapper {
  margin-bottom: 0; }

.join_type .select .placeholder {
  color: #d3d3d5; }

.join_type .form_title {
  font-size: 35px;
  font-weight: 700; }
  .join_type .form_title span {
    font-weight: 700;
    font-size: 35px;
    display: inline-block; }

.join_type .checkbox_wrap {
  border-bottom: 1px solid #d3d3d5;
  padding-bottom: 30px;
  margin-bottom: 70px; }
  .join_type .checkbox_wrap p {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #d3d3d5;
    font-size: 26px;
    font-weight: 700; }
  .join_type .checkbox_wrap .checkbox_inner > div:first-child label {
    font-size: 18px;
    font-weight: 700;
    color: #24212e; }
  .join_type .checkbox_wrap .label_wrap {
    padding-left: 25px; }
    .join_type .checkbox_wrap .label_wrap label {
      display: block;
      width: 100%;
      margin-top: 17px;
      font-weight: 400; }
      .join_type .checkbox_wrap .label_wrap label span {
        font-size: 15px;
        color: #7c7a82; }
      .join_type .checkbox_wrap .label_wrap label p {
        display: inline-block;
        cursor: pointer;
        font-weight: 500;
        text-decoration: underline;
        color: #24212e;
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: none;
        font-size: 15px; }
      .join_type .checkbox_wrap .label_wrap label button {
        width: 75px;
        height: 25px;
        border-radius: 5px;
        font-size: 11px;
        font-weight: 500;
        color: #7c7a82;
        background-color: #f3f3f3;
        text-align: center; }
  .join_type .checkbox_wrap .sns_input {
    padding-left: 65px; }
    .join_type .checkbox_wrap .sns_input label {
      display: inline-block;
      width: auto; }
      .join_type .checkbox_wrap .sns_input label:last-of-type {
        margin-left: 10px; }

.join_type .account_form > p {
  font-size: 26px;
  font-weight: 500;
  color: #504d58;
  padding-bottom: 20px;
  border-bottom: 1px solid #d3d3d5; }
  .join_type .account_form > p span {
    font-size: 13px;
    font-weight: 500;
    color: #09b9c6;
    display: inline-block;
    margin-left: 10px; }

.join_type .account_form > div {
  margin-top: 50px; }
  .join_type .account_form > div.btn_wrap {
    margin-top: 70px;
    text-align: center; }
  .join_type .account_form > div > span {
    display: inline-block;
    width: 150px;
    font-size: 18px;
    float: left;
    line-height: 48px; }
    .join_type .account_form > div > span.line_height_normal {
      min-height: 120px; }
    .join_type .account_form > div > span span {
      color: #09b9c6; }
  .join_type .account_form > div .account_inner_div {
    width: calc(100% - 150px);
    float: left; }
    .join_type .account_form > div .account_inner_div .input-component-box,
    .join_type .account_form > div .account_inner_div .form_inner_box {
      width: calc(100% - 154px);
      margin-bottom: 0;
      display: inline-block; }
      .join_type .account_form > div .account_inner_div .input-component-box:nth-of-type(2),
      .join_type .account_form > div .account_inner_div .form_inner_box:nth-of-type(2) {
        margin-top: 10px; }
      .join_type .account_form > div .account_inner_div .input-component-box .input-component-box,
      .join_type .account_form > div .account_inner_div .form_inner_box .input-component-box {
        width: calc(50% - 10px);
        margin-right: 3px; }
      .join_type .account_form > div .account_inner_div .input-component-box span,
      .join_type .account_form > div .account_inner_div .form_inner_box span {
        line-height: 48px; }
      .join_type .account_form > div .account_inner_div .input-component-box .join_select,
      .join_type .account_form > div .account_inner_div .form_inner_box .join_select {
        width: calc(50% - 10px);
        margin-left: 3px;
        z-index: 20; }
        .join_type .account_form > div .account_inner_div .input-component-box .join_select .select-input,
        .join_type .account_form > div .account_inner_div .form_inner_box .join_select .select-input {
          height: 48px; }
      .join_type .account_form > div .account_inner_div .input-component-box .changeForm .input-component-box,
      .join_type .account_form > div .account_inner_div .form_inner_box .changeForm .input-component-box {
        margin-right: 0;
        margin-left: 3px; }
      .join_type .account_form > div .account_inner_div .input-component-box.new_datepicker span,
      .join_type .account_form > div .account_inner_div .form_inner_box.new_datepicker span {
        line-height: 1.2; }
    .join_type .account_form > div .account_inner_div .border_button {
      width: 134px;
      height: 48px;
      border: 1px solid #504d58;
      border-radius: 10px;
      text-align: center; }
    .join_type .account_form > div .account_inner_div.call_num .input-component-box,
    .join_type .account_form > div .account_inner_div.call_num .join_select {
      float: left;
      margin-left: 14px;
      vertical-align: middle;
      width: calc(33.33% - 11px);
      max-width: 130px;
      margin-top: 0; }
      .join_type .account_form > div .account_inner_div.call_num .input-component-box:first-of-type, .join_type .account_form > div .account_inner_div.call_num .input-component-box.first,
      .join_type .account_form > div .account_inner_div.call_num .join_select:first-of-type,
      .join_type .account_form > div .account_inner_div.call_num .join_select.first {
        margin-left: 0; }
    .join_type .account_form > div .account_inner_div.call_num.devide .input-component-box,
    .join_type .account_form > div .account_inner_div.call_num.devide .join_select {
      position: relative; }
      .join_type .account_form > div .account_inner_div.call_num.devide .input-component-box:first-of-type:after,
      .join_type .account_form > div .account_inner_div.call_num.devide .join_select:first-of-type:after {
        display: none; }
      .join_type .account_form > div .account_inner_div.call_num.devide .input-component-box:after,
      .join_type .account_form > div .account_inner_div.call_num.devide .join_select:after {
        content: '-';
        position: absolute;
        top: 50%;
        left: -7px;
        transform: translate(-50%, -50%); }
    .join_type .account_form > div .account_inner_div.half_div:last-of-type {
      margin-top: 10px; }
    .join_type .account_form > div .account_inner_div.half_div .max_420 .input-component-box {
      width: calc(100% - 90px);
      max-width: 421px; }
    .join_type .account_form > div .account_inner_div.half_div .border_button {
      margin-left: 20px; }
    .join_type .account_form > div .account_inner_div .children_float .input-component-box {
      float: left; }

.join_type .account_form .shadow_btn {
  box-shadow: 0px 4px 3px rgba(104, 115, 170, 0.3); }

.join_type.new_join {
  padding-top: 84px;
  padding-bottom: 120px; }
  .join_type.new_join .form_title {
    font-size: 32px;
    line-height: 42px;
    color: #24212e;
    margin-bottom: 80px; }
    .join_type.new_join .form_title span {
      font: inherit;
      color: inherit;
      margin-top: 0; }
  .join_type.new_join .account_form > p {
    font-size: 20px;
    line-height: 30px;
    color: #24212e;
    border-bottom: 1px solid #e9e9ea;
    margin-bottom: 4px;
    display: flex;
    align-items: center; }
    .join_type.new_join .account_form > p.cyan_line {
      border-color: #09b9c6; }
    .join_type.new_join .account_form > p span {
      font-size: 14px;
      line-height: 22px;
      font-weight: 400;
      margin-left: 6px; }
  .join_type.new_join .account_form > div {
    display: flex;
    margin-top: 24px; }
    .join_type.new_join .account_form > div::after {
      display: none; }
    .join_type.new_join .account_form > div > span {
      float: none;
      width: 160px;
      font-size: 16px;
      line-height: 40px;
      color: #7c7a82;
      flex-shrink: 0; }
      .join_type.new_join .account_form > div > span.line_height_normal {
        min-height: unset;
        line-height: 40px !important; }
      .join_type.new_join .account_form > div > span span {
        font: inherit; }
    .join_type.new_join .account_form > div .account_inner_div {
      float: none;
      width: calc(100% - 160px);
      display: flex; }
      .join_type.new_join .account_form > div .account_inner_div.col_type {
        flex-direction: column; }
        .join_type.new_join .account_form > div .account_inner_div.col_type > *:not(:first-child) {
          margin-top: 8px; }
      .join_type.new_join .account_form > div .account_inner_div .input-component-box,
      .join_type.new_join .account_form > div .account_inner_div .form_inner_box {
        width: 100%;
        max-width: 360px;
        margin-right: 0; }
        .join_type.new_join .account_form > div .account_inner_div .input-component-box:nth-of-type(2),
        .join_type.new_join .account_form > div .account_inner_div .form_inner_box:nth-of-type(2) {
          margin-top: 8px; }
        .join_type.new_join .account_form > div .account_inner_div .input-component-box .join_select,
        .join_type.new_join .account_form > div .account_inner_div .form_inner_box .join_select {
          width: 100%;
          min-height: 40px;
          height: 40px;
          margin-left: 0; }
          .join_type.new_join .account_form > div .account_inner_div .input-component-box .join_select .select-input,
          .join_type.new_join .account_form > div .account_inner_div .form_inner_box .join_select .select-input {
            height: 100%;
            border: 1px solid #dfdfe4;
            padding: 0 12px;
            border-radius: 8px; }
            .join_type.new_join .account_form > div .account_inner_div .input-component-box .join_select .select-input.placeholder,
            .join_type.new_join .account_form > div .account_inner_div .form_inner_box .join_select .select-input.placeholder {
              color: #a7a6ab;
              -webkit-text-fill-color: #a7a6ab !important; }
          .join_type.new_join .account_form > div .account_inner_div .input-component-box .join_select > .select-options,
          .join_type.new_join .account_form > div .account_inner_div .form_inner_box .join_select > .select-options {
            top: 40px;
            border-color: #dfdfe4; }
      .join_type.new_join .account_form > div .account_inner_div .border_button {
        float: none;
        width: auto;
        height: 38px;
        line-height: 26px;
        padding: 0 12px;
        font-size: 13px;
        border-radius: 8px;
        border: 1px solid #7c7a82;
        background-color: #ffffff;
        color: #504d58;
        margin-top: 1px;
        margin-left: 8px;
        flex-shrink: 0; }
      .join_type.new_join .account_form > div .account_inner_div .form_inner_box.email_type {
        display: flex;
        align-items: center;
        font-size: 0; }
        .join_type.new_join .account_form > div .account_inner_div .form_inner_box.email_type .input-component-box,
        .join_type.new_join .account_form > div .account_inner_div .form_inner_box.email_type .changeForm {
          float: none;
          flex: 1; }
        .join_type.new_join .account_form > div .account_inner_div .form_inner_box.email_type .email_sign {
          float: none;
          font-size: 16px;
          line-height: 40px;
          color: #7c7a82;
          margin: 0 8px; }
      .join_type.new_join .account_form > div .account_inner_div .children_float .input-component-box {
        float: none; }
  .join_type.new_join .account_form .input-component-box .input-wrapper {
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #dfdfe4; }
    .join_type.new_join .account_form .input-component-box .input-wrapper.wrong_line {
      border-color: #ff5050; }
    .join_type.new_join .account_form .input-component-box .input-wrapper.disabled {
      background-color: #e9e9ea;
      border-color: #dfdfe4; }
    .join_type.new_join .account_form .input-component-box .input-wrapper input {
      height: 100%;
      font-size: 14px;
      line-height: 22px;
      color: #504d58 !important;
      -webkit-text-fill-color: #504d58 !important; }
      .join_type.new_join .account_form .input-component-box .input-wrapper input::placeholder {
        font-size: 14px;
        line-height: 22px;
        color: #a7a6ab !important;
        -webkit-text-fill-color: #a7a6ab !important; }
  .join_type.new_join .checkbox_wrap {
    margin-top: 66px;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none; }
    .join_type.new_join .checkbox_wrap > p {
      font-size: 20px;
      line-height: 20px;
      font-weight: 500;
      color: #24212e;
      padding-bottom: 0;
      border-bottom: none; }
    .join_type.new_join .checkbox_wrap .checkbox_inner {
      padding: 28px;
      border-radius: 4px;
      background-color: #f8f9fa; }
      .join_type.new_join .checkbox_wrap .checkbox_inner > div:first-child:after {
        display: none; }
      .join_type.new_join .checkbox_wrap .checkbox_inner > div:first-child label {
        font-size: 16px;
        line-height: 24px;
        font-weight: 500;
        color: #504d58; }
      .join_type.new_join .checkbox_wrap .checkbox_inner input[type='checkbox'] + label {
        float: none;
        display: flex;
        align-items: center;
        font-size: 14px;
        line-height: 22px; }
        .join_type.new_join .checkbox_wrap .checkbox_inner input[type='checkbox'] + label i {
          width: 18px;
          height: 18px;
          border-radius: 4px;
          background-color: #ffffff;
          border: 1px solid #dfdfe4;
          margin-right: 12px; }
    .join_type.new_join .checkbox_wrap .label_wrap {
      padding-left: 0; }
      .join_type.new_join .checkbox_wrap .label_wrap label {
        margin-top: 8px; }
        .join_type.new_join .checkbox_wrap .label_wrap label p {
          font: inherit;
          color: inherit;
          text-decoration: underline;
          text-underline-offset: 2px; }
        .join_type.new_join .checkbox_wrap .label_wrap label strong {
          font: inherit;
          font-weight: 400;
          color: inherit; }
        .join_type.new_join .checkbox_wrap .label_wrap label button {
          width: auto;
          height: 28px;
          line-height: 26px;
          padding: 0 8px;
          font-size: 13px;
          color: #504d58;
          margin-left: 0;
          background-color: #ffffff;
          border-radius: 8px;
          border: 1px solid #dfdfe4;
          font-weight: 400; }
  .join_type.new_join .btn_wrap {
    margin-top: 40px;
    justify-content: center; }
    .join_type.new_join .btn_wrap button {
      width: 240px;
      height: 48px;
      font-size: 16px;
      font-weight: 500;
      border-radius: 8px; }
  .join_type.new_join .account_edit .form_title {
    margin-bottom: 52px; }
  .join_type.new_join .account_edit .btn_wrap button {
    width: 160px; }
  .join_type.new_join.change_info .profile-img-wrap {
    margin-bottom: 80px; }
    .join_type.new_join.change_info .profile-img-wrap .profile-img .edit_photo {
      background-image: url("../img/icon/icon_camera_wh.svg"); }
  .join_type.new_join.change_info .btn_wrap {
    gap: 0; }
    .join_type.new_join.change_info .btn_wrap button {
      padding-top: 0;
      padding-bottom: 0;
      box-shadow: none; }
  .join_type.new_join.mb_style {
    padding-top: 48px;
    padding-bottom: 32px; }
    .join_type.new_join.mb_style .account_form {
      padding: 0 20px; }
      .join_type.new_join.mb_style .account_form > p {
        font-size: 16px;
        line-height: 24px;
        font-weight: 700;
        padding-bottom: 16px;
        margin-bottom: 20px; }
      .join_type.new_join.mb_style .account_form > div {
        display: block; }
        .join_type.new_join.mb_style .account_form > div > span {
          width: auto;
          font-size: 14px;
          line-height: 22px;
          margin-bottom: 8px; }
        .join_type.new_join.mb_style .account_form > div .account_inner_div {
          width: 100%; }
          .join_type.new_join.mb_style .account_form > div .account_inner_div .input-component-box,
          .join_type.new_join.mb_style .account_form > div .account_inner_div .form_inner_box {
            max-width: unset; }
          .join_type.new_join.mb_style .account_form > div .account_inner_div .form_inner_box.email_type {
            width: calc(100% - 81px); }
            @media screen and (max-width: 480px) {
              .join_type.new_join.mb_style .account_form > div .account_inner_div .form_inner_box.email_type {
                width: 100%; } }
          .join_type.new_join.mb_style .account_form > div .account_inner_div .border_button {
            min-width: 72px; }
          .join_type.new_join.mb_style .account_form > div .account_inner_div.col_type {
            flex-direction: column; }
            .join_type.new_join.mb_style .account_form > div .account_inner_div.col_type > div {
              display: flex; }
          .join_type.new_join.mb_style .account_form > div .account_inner_div.with_btn.id_input .input-component-box {
            width: 100%; }
          .join_type.new_join.mb_style .account_form > div .account_inner_div.with_btn.id_input .border_button {
            width: auto; }
          .join_type.new_join.mb_style .account_form > div .account_inner_div.with_btn .input-component-box {
            width: 100%; }
          .join_type.new_join.mb_style .account_form > div .account_inner_div.email {
            flex-wrap: wrap; }
            @media screen and (max-width: 480px) {
              .join_type.new_join.mb_style .account_form > div .account_inner_div.email .border_button {
                margin-left: 0;
                margin-top: 8px; } }
      .join_type.new_join.mb_style .account_form .input-component-box .input-wrapper input {
        font-size: 13px;
        line-height: 20px; }
    .join_type.new_join.mb_style .checkbox_wrap {
      margin-top: 48px; }
      .join_type.new_join.mb_style .checkbox_wrap > p {
        padding: 0 20px;
        margin-bottom: 16px;
        font-size: 16px;
        line-height: 24px;
        font-weight: 700; }
      .join_type.new_join.mb_style .checkbox_wrap .checkbox_inner {
        padding: 20px;
        border-radius: 0; }
        .join_type.new_join.mb_style .checkbox_wrap .checkbox_inner input[type='checkbox'] + label {
          font-size: 14px;
          line-height: 22px; }
          .join_type.new_join.mb_style .checkbox_wrap .checkbox_inner input[type='checkbox'] + label.with_btn_label {
            line-height: 28px; }
          .join_type.new_join.mb_style .checkbox_wrap .checkbox_inner input[type='checkbox'] + label i {
            width: 20px;
            height: 20px; }
      .join_type.new_join.mb_style .checkbox_wrap .label_wrap label {
        flex-wrap: wrap;
        padding-left: 32px;
        padding-right: 0;
        position: relative; }
        .join_type.new_join.mb_style .checkbox_wrap .label_wrap label i {
          position: absolute;
          left: 0;
          top: 4px; }
        .join_type.new_join.mb_style .checkbox_wrap .label_wrap label span {
          font-size: inherit; }
        .join_type.new_join.mb_style .checkbox_wrap .label_wrap label strong {
          font-weight: inherit; }
        .join_type.new_join.mb_style .checkbox_wrap .label_wrap label button {
          position: static;
          transform: none;
          padding: 0 6px;
          margin-left: 0;
          font-size: 12px; }
    .join_type.new_join.mb_style .btn_wrap.mb_fixed_type {
      position: fixed;
      width: 100%;
      padding: 16px 20px;
      background-color: #ffffff;
      bottom: 0;
      margin-top: 0;
      z-index: 21;
      /* ios fixed 이슈 관련 */ }
      @media (orientation: landscape) {
        .join_type.new_join.mb_style .btn_wrap.mb_fixed_type {
          position: fixed; } }
      @media (orientation: portrait) {
        .join_type.new_join.mb_style .btn_wrap.mb_fixed_type {
          position: fixed; } }
      .join_type.new_join.mb_style .btn_wrap.mb_fixed_type::before {
        content: '';
        display: inline-block;
        width: 100%;
        height: 1px;
        background-color: #f2f2f7;
        position: absolute;
        left: 0;
        top: 0; }
      .join_type.new_join.mb_style .btn_wrap.mb_fixed_type button {
        width: 100%;
        border-radius: 10px; }
    .join_type.new_join.mb_style.change_info .profile-img-wrap {
      margin-bottom: 40px; }
      .join_type.new_join.mb_style.change_info .profile-img-wrap .profile-img {
        width: 100px;
        height: 100px; }
        .join_type.new_join.mb_style.change_info .profile-img-wrap .profile-img .edit_photo {
          background-size: 14px; }

.pop_table thead tr th {
  border: 1px solid #000;
  color: #000;
  font-size: 13px;
  padding: 22px 8px; }

.pop_table tbody tr td {
  border: 1px solid #000;
  color: #000;
  font-size: 13px;
  padding: 22px 8px; }

@media screen and (max-width: 1024px) {
  .container.join_type + #footer .footer-inner .company-info .term {
    display: none; }
  .tab_br {
    display: block; }
  .join_type .checkbox_wrap {
    margin-bottom: 20px; }
    .join_type .checkbox_wrap .label_wrap label p {
      font-size: 12px; }
    .join_type .checkbox_wrap p {
      font-size: 16px; }
    .join_type .checkbox_wrap .checkbox_inner > div:first-child label {
      font-size: 16px; }
    .join_type .checkbox_wrap .label_wrap {
      padding-left: 13px; }
      .join_type .checkbox_wrap .label_wrap label {
        font-size: 12px;
        position: relative;
        display: inline-block;
        width: 100%;
        line-height: 20px;
        padding-right: 34px; }
        .join_type .checkbox_wrap .label_wrap label + .sns_input label {
          width: auto;
          margin-top: 5px; }
        .join_type .checkbox_wrap .label_wrap label span {
          font-size: 12px; }
        .join_type .checkbox_wrap .label_wrap label button {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%); }
    .join_type .checkbox_wrap .sns_input {
      padding-left: 25px; }
      .join_type .checkbox_wrap .sns_input label:first-of-type {
        padding-right: 0; }
  .join_type .account_form .input-component-box .input-wrapper {
    padding-left: 10px;
    height: 44px; }
    .join_type .account_form .input-component-box .input-wrapper input::placeholder {
      font-size: 12px; }
  .join_type .account_form > p {
    font-size: 18px;
    padding-bottom: 4px;
    border-bottom: none; }
  .join_type .account_form > div {
    margin-top: 20px; }
    .join_type .account_form > div > span {
      float: none;
      width: 100%;
      font-size: 14px;
      line-height: 20px;
      margin-bottom: 7px; }
      .join_type .account_form > div > span.line_height_normal {
        min-height: auto; }
    .join_type .account_form > div .account_inner_div {
      float: none;
      width: 100%;
      font-size: 12px; }
      .join_type .account_form > div .account_inner_div.with_btn .input-component-box {
        width: calc(100% - 150px); }
      .join_type .account_form > div .account_inner_div.with_btn.id_input .input-component-box {
        width: calc(100% - 105px); }
      .join_type .account_form > div .account_inner_div.with_btn.id_input .border_button {
        width: 100px; }
      .join_type .account_form > div .account_inner_div .form_inner_box {
        width: calc(100% - 90px); }
      .join_type .account_form > div .account_inner_div .input-component-box {
        width: 100%;
        font-size: 12px; }
        .join_type .account_form > div .account_inner_div .input-component-box::placeholder {
          font-size: 12px; }
      .join_type .account_form > div .account_inner_div .border_button {
        width: 84px;
        height: 44px;
        font-size: 12px; }
        .join_type .account_form > div .account_inner_div .border_button span {
          display: none; }
      .join_type .account_form > div .account_inner_div.half_div .input-component-box {
        width: calc(33.33% - 10px); }
      .join_type .account_form > div .account_inner_div.half_div .input-component-box.w100 {
        width: calc(100% - 90px); }
      .join_type .account_form > div .account_inner_div.half_div .border_button {
        margin-left: 5px; }
      .join_type .account_form > div .account_inner_div .changeForm .input-component-box {
        margin-right: 0;
        margin-left: 3px; }
  .join_type .account_form > div .account_inner_div .input-component-box .join_select .select-input .select-input,
  .join_type .account_form > div .account_inner_div .form_inner_box .join_select .select-input {
    height: 44px;
    padding: 0 10px; }
  .join_type .account_form > div .account_inner_div .input-component-box .join_select .select-input img,
  .join_type .account_form > div .account_inner_div .form_inner_box .join_select img {
    right: 10px; }
  .join_type .account_form > div .account_inner_div .join_select .select-input {
    height: 44px;
    padding: 0 10px; }
  .join_type .account_form > div .account_inner_div .join_select img {
    right: 10px; } }

@media screen and (max-width: 480px) {
  .join_type .checkbox_wrap .label_wrap label:last-of-type {
    padding-right: 0; }
  .join_type .account_form .btn_wrap button {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 16px; } }

.print-area * {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  text-align: left;
  word-break: keep-all; }

.print-area table tr td {
  text-align: left; }

.print-area img {
  max-height: 100px !important; }

.print-area .marginB8 div:nth-child(1) {
  flex: 1; }

.print-area .marginB8 div:nth-child(2) {
  flex: 9; }

.print_loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100; }
  .print_loading .dim {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: black !important;
    z-index: 101; }
  .print_loading .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 102; }
    .print_loading .loading h1 {
      font-size: 60px;
      font-weight: 600;
      color: #fff; }

.print_view .print_paper .left img {
  width: 100% !important;
  object-fit: contain;
  max-height: 200px; }

.print_view .print_paper .right img {
  width: 100% !important;
  object-fit: contain;
  max-height: 200px; }

.print_view .print_paper .no-header-left img {
  width: 100% !important;
  object-fit: contain;
  max-height: 200px; }

.print_view .print_paper .no-header-right img {
  width: 100% !important;
  object-fit: contain;
  max-height: 200px; }

.print_view .wrap-print-q.fontSize3 .new_word_list li {
  font-size: 18px !important; }
  .print_view .wrap-print-q.fontSize3 .new_word_list li p {
    font-size: 18px !important; }

.print_view .wrap-print-q.fontSize4 .new_word_list li {
  font-size: 16px !important; }
  .print_view .wrap-print-q.fontSize4 .new_word_list li p {
    font-size: 16px !important; }

.print_view .wrap-print-q.fontSize5 .new_word_list li {
  font-size: 14px !important; }
  .print_view .wrap-print-q.fontSize5 .new_word_list li p {
    font-size: 14px !important; }

.print_view .wrap-print-q.lineHeight3 .new_word_list {
  line-height: 1.6 !important; }

.print_view .wrap-print-q.lineHeight4 .new_word_list {
  line-height: 1.4 !important; }

.print_view .wrap-print-q.lineHeight5 .new_word_list {
  line-height: 1.2 !important; }

.print_view {
  /*padding: 40px;
  margin: 0 40px;
  border: 1px solid #333;*/ }
  .print_view.a3 .print_paper {
    width: 1123px;
    width: 1095px;
    max-width: 1123px; }
  .print_view.a4 .print_paper {
    width: 794px;
    max-width: 1123px; }
  .print_view.b5 .print_paper {
    width: 665px;
    max-width: 1123px; }
  .print_view.fontSize3 .print_paper .item * {
    font-size: 18px !important; }
  .print_view.fontSize4 .print_paper .item * {
    font-size: 16px !important; }
  .print_view.fontSize5 .print_paper .item * {
    font-size: 14px !important; }
  .print_view.fontSize3 .print_paper .left * {
    font-size: 18px !important; }
  .print_view.fontSize4 .print_paper .left * {
    font-size: 16px !important; }
  .print_view.fontSize5 .print_paper .left * {
    font-size: 14px !important; }
  .print_view.fontSize3 .print_paper .right * {
    font-size: 18px !important; }
  .print_view.fontSize4 .print_paper .right * {
    font-size: 16px !important; }
  .print_view.fontSize5 .print_paper .right * {
    font-size: 14px !important; }
  .print_view.fontSize3 .print_paper .no-header-left * {
    font-size: 18px !important; }
  .print_view.fontSize4 .print_paper .no-header-left * {
    font-size: 16px !important; }
  .print_view.fontSize5 .print_paper .no-header-left * {
    font-size: 14px !important; }
  .print_view.fontSize3 .print_paper .no-header-right * {
    font-size: 18px !important; }
  .print_view.fontSize4 .print_paper .no-header-right * {
    font-size: 16px !important; }
  .print_view.fontSize5 .print_paper .no-header-right * {
    font-size: 14px !important; }
  .print_view.fontSize3 .print_paper .p_item * {
    font-size: 18px !important; }
  .print_view.fontSize4 .print_paper .p_item * {
    font-size: 16px !important; }
  .print_view.fontSize5 .print_paper .p_item * {
    font-size: 14px !important; }
  .print_view.lineHeight3 .print_paper .item * {
    line-height: 1.6 !important; }
  .print_view.lineHeight4 .print_paper .item * {
    line-height: 1.4 !important; }
  .print_view.lineHeight5 .print_paper .item * {
    line-height: 1.2 !important; }
  .print_view.lineHeight3 .print_paper .left * {
    line-height: 1.9 !important; }
  .print_view.lineHeight4 .print_paper .left * {
    line-height: 1.7 !important; }
  .print_view.lineHeight5 .print_paper .left * {
    line-height: 1.5 !important; }
  .print_view.lineHeight3 .print_paper .right * {
    line-height: 1.9 !important; }
  .print_view.lineHeight4 .print_paper .right * {
    line-height: 1.7 !important; }
  .print_view.lineHeight5 .print_paper .right * {
    line-height: 1.5 !important; }
  .print_view.lineHeight3 .print_paper .no-header-left * {
    line-height: 1.9 !important; }
  .print_view.lineHeight4 .print_paper .no-header-left * {
    line-height: 1.7 !important; }
  .print_view.lineHeight5 .print_paper .no-header-left * {
    line-height: 1.5 !important; }
  .print_view.lineHeight3 .print_paper .no-header-right * {
    line-height: 1.9 !important; }
  .print_view.lineHeight4 .print_paper .no-header-right * {
    line-height: 1.7 !important; }
  .print_view.lineHeight5 .print_paper .no-header-right * {
    line-height: 1.5 !important; }
  .print_view.lineHeight3 .print_paper .p_item * {
    line-height: 1.6 !important; }
  .print_view.lineHeight4 .print_paper .p_item * {
    line-height: 1.4 !important; }
  .print_view.lineHeight5 .print_paper .p_item * {
    line-height: 1.2 !important; }
  .print_view .print_paper table tbody .item-body > div:last-of-type {
    margin-bottom: 0 !important; }
  .print_view .print_paper .word_print_type {
    position: relative; }
    .print_view .print_paper .word_print_type .item {
      margin-bottom: 0 !important; }
      .print_view .print_paper .word_print_type .item .write_ans {
        width: 50% !important;
        border-right: 1px dashed #ccc; }
      .print_view .print_paper .word_print_type .item .i {
        width: 50% !important; }
      .print_view .print_paper .word_print_type .item .input_ans {
        width: 100% !important;
        border-bottom: none;
        text-indent: -30px;
        padding-left: 30px;
        padding-right: 20px; }
        .print_view .print_paper .word_print_type .item .input_ans span {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-width: 24px;
          height: 24px;
          font-size: 13px;
          font-weight: 400;
          border-radius: 6px;
          border: 1px solid #dfdfe4;
          background-color: #fff;
          color: #504d58;
          flex-shrink: 0;
          margin-right: 6px;
          text-align: center;
          text-indent: 0; }
  .print_view .print_paper.alone .wrap-print-q {
    padding: 20px 5px 0 5px; }
    .print_view .print_paper.alone .wrap-print-q > div {
      padding: 0 15px;
      margin-bottom: 10px; }
  .print_view .print_paper.twin {
    /*display: flex;
      flex-wrap: wrap;*/ }
    .print_view .print_paper.twin .wrap-print-q {
      padding: 20px 5px 0 5px;
      columns: 2;
      -webkit-columns: 2;
      max-height: calc(100vh - 130px); }
      .print_view .print_paper.twin .wrap-print-q.separator {
        column-rule: 1px dashed #ccc; }
      .print_view .print_paper.twin .wrap-print-q > div {
        padding: 0 15px;
        margin-bottom: 10px; }
      .print_view .print_paper.twin .wrap-print-q + .wrap-print-q {
        page-break-before: always; }
    .print_view .print_paper.twin .only-vocap {
      padding: 20px 5px 0 5px;
      columns: 2;
      -webkit-columns: 2;
      column-fill: auto;
      max-height: calc(100vh - 80px); }
      .print_view .print_paper.twin .only-vocap > div {
        padding: 0 15px;
        margin-bottom: 10px; }
    .print_view .print_paper.twin .word_print_type:after {
      content: '';
      display: block;
      position: fixed;
      top: 72px;
      left: 50%;
      width: 1px;
      height: calc(100% + 14px);
      border-right: 1px dashed #ccc; }
  .print_view .print_paper tr td {
    padding: 0px;
    text-align: left; }
  .print_view .print_paper tr.no-header-left {
    width: 50%;
    height: calc(100% - 80px); }
  .print_view .print_paper tr.right {
    height: calc(100% - 100px); }
  .print_view .print_paper tr.no-header-right {
    width: 50%;
    height: calc(100% - 80px); }
  .print_view .print_paper tr.item-body {
    width: 100%;
    height: calc(100% - 100px); }
  .print_view .print_paper tr.no-header-item-body {
    width: 100%;
    height: calc(100% - 80px); }
  .print_view .print_paper .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: fit-content;
    padding: 20px;
    position: relative;
    border-bottom: 1px solid #e7e7e7; }
    .print_view .print_paper .header .logo {
      height: 32px;
      width: 120px;
      max-width: 120px; }
      .print_view .print_paper .header .logo h1 {
        margin-bottom: 0; }
      .print_view .print_paper .header .logo img {
        height: 100%;
        max-height: 40px; }
    .print_view .print_paper .header .print_name_wrap {
      width: 120px; }
    .print_view .print_paper .header .print_logo_title {
      display: flex;
      align-items: center;
      width: calc(100% - 240px);
      max-width: calc(100% - 320px); }
      .print_view .print_paper .header .print_logo_title .img_wrap img {
        width: 80px;
        max-height: 80px !important; }
      .print_view .print_paper .header .print_logo_title .print_title {
        display: flex;
        justify-content: center;
        width: 100%;
        text-align: center;
        font-size: 16px;
        font-weight: 500; }
    .print_view .print_paper .header .name_wrap .sub-title {
      font-size: 13px;
      letter-spacing: 1.5px; }
    .print_view .print_paper .header .name_wrap .name {
      background-color: #b7b7b7;
      padding: 6px 12px;
      padding-right: 70px;
      border-radius: 20px;
      color: #6c6c6c;
      border: 1px solid #b7b7b7; }
  .print_view .print_paper .item {
    margin-bottom: 20px; }
    .print_view .print_paper .item .underline2 {
      border-bottom: 1px solid black !important; }
    .print_view .print_paper .item .wrong_container {
      padding: 0;
      box-shadow: none; }
      .print_view .print_paper .item .wrong_container .quest {
        text-align: left; }
      .print_view .print_paper .item .wrong_container .q_box {
        box-shadow: none;
        padding: 0;
        margin: 20px 0 0; }
      .print_view .print_paper .item .wrong_container .answer_ul {
        display: flex;
        flex-wrap: wrap;
        margin-top: 12px; }
        .print_view .print_paper .item .wrong_container .answer_ul li {
          border-radius: 4px;
          background-color: #000;
          padding: 4px 12px;
          /* min-width: 20px; */
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center; }
          .print_view .print_paper .item .wrong_container .answer_ul li:not(:last-of-type) {
            margin-right: 6px !important; }
          .print_view .print_paper .item .wrong_container .answer_ul li:last-of-type {
            margin-bottom: 5px; }
      .print_view .print_paper .item .wrong_container .eraser_btn {
        display: none; }
    .print_view .print_paper .item .i {
      font-size: inherit;
      line-height: inherit;
      margin-bottom: 10px; }
      .print_view .print_paper .item .i.write_ans {
        width: calc(100% - 120px);
        margin-bottom: 4px; }
        .print_view .print_paper .item .i.write_ans.short {
          width: calc(100% - 170px); }
          .print_view .print_paper .item .i.write_ans.short + div {
            width: 110px; }
    .print_view .print_paper .item .input_ans {
      margin-left: 20px;
      width: 100px;
      border-bottom: 1px solid;
      min-height: 22px; }
      .print_view .print_paper .item .input_ans.show_ans {
        width: 100% !important;
        height: auto !important;
        border: none !important; }
    .print_view .print_paper .item .q {
      font-size: inherit;
      line-height: inherit;
      margin-bottom: 10px; }
    .print_view .print_paper .item p {
      font-size: inherit;
      line-height: inherit;
      margin-bottom: 20px; }
    .print_view .print_paper .item ul {
      font-size: inherit;
      line-height: inherit; }
      .print_view .print_paper .item ul li {
        font-size: inherit;
        line-height: inherit;
        margin-bottom: 5px; }
        .print_view .print_paper .item ul li:last-of-type {
          margin-bottom: 0; }
    .print_view .print_paper .item .underline {
      border-bottom: 1px solid; }
  .print_view .print_paper .paddingBottom8px {
    padding-bottom: 8px; }
    .print_view .print_paper .paddingBottom8px ul {
      margin-top: 8px; }
  .print_view .print_paper .g_item {
    overflow: hidden; }
    .print_view .print_paper .g_item u {
      text-decoration: none;
      border-bottom: 1px solid #444; }
    .print_view .print_paper .g_item .gtitle {
      margin-bottom: 10px; }
    .print_view .print_paper .g_item .gproblems {
      margin-bottom: 10px; }
    .print_view .print_paper .g_item .ganswer {
      color: #09b9c6 !important; }
      .print_view .print_paper .g_item .ganswer * {
        color: #09b9c6 !important; }
      .print_view .print_paper .g_item .ganswer u {
        border-bottom: 1px solid #09b9c6; }
      .print_view .print_paper .g_item .ganswer.boxAnswer {
        border: 1px solid #09b9c6; }
    .print_view .print_paper .g_item .ganswerUnderline {
      text-decoration: underline;
      text-decoration-color: #09b9c6;
      text-decoration-thickness: 1px;
      text-underline-offset: 2px;
      text-underline-position: under; }
    .print_view .print_paper .g_item .gjimun {
      margin-bottom: 10px;
      border: 1px solid #444;
      padding: 10px; }
      .print_view .print_paper .g_item .gjimun.img_jimun {
        border: none; }
    .print_view .print_paper .g_item .example-select1 {
      border: 1px solid #444;
      padding: 10px;
      margin-bottom: 10px; }
    .print_view .print_paper .g_item .gblank {
      width: 100%;
      border-bottom: 1px solid #444;
      color: rgba(0, 0, 0, 0); }
      .print_view .print_paper .g_item .gblank.noLine {
        border-bottom: none; }
    .print_view .print_paper .g_item .gHeight1 {
      height: 22px; }
    .print_view .print_paper .g_item .gHeight2 {
      height: 28px; }
    .print_view .print_paper .g_item .gHeight3 {
      height: 30px; }
    .print_view .print_paper .g_item .marginB8 {
      margin-bottom: 8px; }
    .print_view .print_paper .g_item .gbottom {
      margin-top: 15px; }
    .print_view .print_paper .g_item .gbox {
      border: 1px solid #444;
      border-radius: 7px;
      padding: 2px 5px 3px;
      margin: 4px 4px;
      line-height: 1.2 !important;
      display: inline-block; }
    .print_view .print_paper .g_item .no_gbox {
      display: inline-block;
      margin: 14px 0; }
    .print_view .print_paper .g_item .cmdt {
      margin-top: 8px; }
    .print_view .print_paper .g_item .glineCheck {
      position: fixed;
      left: -1000px; }
    .print_view .print_paper .g_item .div_row.first {
      margin-top: 8px; }
  .print_view .print_paper .p_item {
    display: flex;
    margin-bottom: 15px; }
    .print_view .print_paper .p_item .qno {
      margin-right: 5px;
      white-space: nowrap; }
      .print_view .print_paper .p_item .qno.noQno {
        color: rgba(0, 0, 0, 0); }
    .print_view .print_paper .p_item .qcontainer {
      flex: 1; }
      .print_view .print_paper .p_item .qcontainer .qtitle {
        margin-bottom: 15px; }
      .print_view .print_paper .p_item .qcontainer .qanswer {
        color: #09b9c6 !important; }
      .print_view .print_paper .p_item .qcontainer .qselect {
        margin-top: 15px; }
      .print_view .print_paper .p_item .qcontainer .direct_answer_wrap {
        position: relative; }
        .print_view .print_paper .p_item .qcontainer .direct_answer_wrap .direct_answer_en span {
          line-height: 2 !important;
          padding-bottom: 3px;
          color: rgba(0, 0, 0, 0);
          border-bottom: 1px solid #504d58; }
        .print_view .print_paper .p_item .qcontainer .direct_answer_wrap .direct_answer_en .last_element {
          position: relative;
          top: -1; }
        .print_view .print_paper .p_item .qcontainer .direct_answer_wrap .direct_answer_ko {
          line-height: 2 !important;
          position: absolute;
          top: 0;
          left: 0; }
      .print_view .print_paper .p_item .qcontainer .answer_white_space {
        display: inline-block;
        border-bottom: 1px solid #444;
        margin-right: 6px;
        color: rgba(0, 0, 0, 0);
        text-align: center;
        padding: 5px 0; }
      .print_view .print_paper .p_item .qcontainer .cancelLine {
        text-decoration: line-through;
        text-decoration-thickness: 1px; }
    .print_view .print_paper .p_item #__sentence {
      display: flex;
      flex-wrap: wrap; }
      .print_view .print_paper .p_item #__sentence > p {
        position: relative;
        padding-bottom: 45px;
        margin-right: 5px; }
        .print_view .print_paper .p_item #__sentence > p * {
          color: rgba(0, 0, 0, 0); }
        .print_view .print_paper .p_item #__sentence > p span.lines {
          margin-top: 2px;
          display: block;
          position: absolute !important;
          left: 0 !important;
          right: 0 !important;
          border-top: 1px solid rgba(0, 0, 0, 0); }
          .print_view .print_paper .p_item #__sentence > p span.lines.qanswer {
            border-top: 1px solid #09b9c6; }
          .print_view .print_paper .p_item #__sentence > p span.lines.extend {
            right: -7px !important; }
          .print_view .print_paper .p_item #__sentence > p span.lines > i {
            line-height: 1 !important;
            position: absolute;
            font-size: 11px !important;
            white-space: nowrap;
            margin-top: 1px; }
            .print_view .print_paper .p_item #__sentence > p span.lines > i.klong {
              font-size: 10px !important;
              transform: translateX(-3px); }
            .print_view .print_paper .p_item #__sentence > p span.lines > i.ilong {
              transform: translateX(-2px); }
    .print_view .print_paper .p_item .qbox {
      border: 1px solid #444;
      padding: 4px 7px;
      border-radius: 5px;
      margin-right: 5px;
      line-height: 1 !important; }
    .print_view .print_paper .p_item .qnalysisSelect {
      display: flex; }
    .print_view .print_paper .p_item .qlineCheck {
      position: fixed;
      left: -1000px; }

.new_word_list {
  display: flex;
  justify-content: space-between; }
  .new_word_list li {
    flex: 1; }
    .new_word_list li:last-of-type {
      padding-left: 16px;
      border-left: 1px dashed #ccc; }
    .new_word_list li p {
      word-break: keep-all;
      text-indent: -32px;
      padding-left: 32px; }
      .new_word_list li p:not(:first-of-type) {
        margin-top: 8px; }
  .new_word_list:not(:first-of-type) li {
    padding-top: 24px; }
  .new_word_list .mini_tag {
    display: inline-block;
    min-width: 24px;
    height: 24px;
    font-size: 13px;
    font-weight: 400;
    line-height: 22px;
    border-radius: 6px;
    border: 1px solid #dfdfe4;
    background-color: #fff;
    color: #504d58;
    flex-shrink: 0;
    margin-right: 6px;
    text-align: center;
    text-indent: 0; }

div.pirnt_footer {
  display: none;
  width: 100%;
  height: 50px;
  left: 0;
  bottom: 0px;
  position: fixed;
  border: 1px solid #e5e5e5;
  background: #fff; }
  div.pirnt_footer .logo {
    height: 20px; }
    div.pirnt_footer .logo img {
      height: 100%; }

.print_border {
  display: block;
  width: 254px;
  height: 77px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: contain; }

/*
.print_border{
  counter-increment:  page;
  content: counter(page);
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  font-size: 30px;
  font-weight: bold;
}
*/
.fix_column_count {
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid; }

@media print {
  @page {
    margin: 11mm 11mm 11mm 11mm; }
  html,
  body {
    margin: 0; }
  .left {
    column-fill: auto; }
  div.pirnt_footer {
    position: fixed; }
  tfoot {
    display: table-footer-group; }
  .print_paper {
    border: 0; }
  .page_break {
    page-break-before: always; } }

.answer {
  display: inline-block;
  width: 100%;
  white-space: normal;
  word-break: break-all;
  position: relative;
  padding-bottom: 3px; }
  .answer:after {
    content: '';
    display: block;
    width: calc(100% - 3px);
    height: 2px;
    background-color: #4a4a4a;
    position: absolute;
    left: 0;
    bottom: 0; }

#pc-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0px 4px 21px rgba(53, 54, 116, 0.08);
  z-index: 1000;
  /* ios fixed 이슈 관련 */ }
  @media (orientation: landscape) {
    #pc-header {
      position: fixed; } }
  @media (orientation: portrait) {
    #pc-header {
      position: fixed; } }
  #pc-header .top-alert {
    display: flex;
    align-items: center;
    position: relative;
    height: 80px; }
    #pc-header .top-alert .close-box {
      display: flex;
      align-items: center;
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%); }
      #pc-header .top-alert .close-box .check {
        display: flex;
        align-items: center;
        font-weight: 500;
        font-size: 12px;
        line-height: 17px;
        color: #504d58; }
        #pc-header .top-alert .close-box .check input {
          display: none; }
        #pc-header .top-alert .close-box .check label {
          display: flex;
          align-items: center;
          font-weight: 500;
          font-size: 12px;
          color: #504d58;
          cursor: pointer;
          user-select: none; }
          #pc-header .top-alert .close-box .check label i {
            display: inline-block;
            width: 13px;
            min-width: 13px;
            height: 13px;
            border: 1px solid #504d58;
            box-sizing: border-box;
            border-radius: 2px;
            margin-right: 3px;
            transform: translateY(1px); }
        #pc-header .top-alert .close-box .check input:checked + label i {
          background-image: url(../../../img/icon/icon_chk.png);
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover; }
          #pc-header .top-alert .close-box .check input:checked + label i::after {
            display: none; }
      #pc-header .top-alert .close-box button {
        padding: 30px; }
  #pc-header .wiget-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
    padding: 13px 48px;
    border-bottom: 1px solid #e9e9ea; }
    #pc-header .wiget-bar > div {
      display: flex;
      align-items: center;
      cursor: pointer; }
      #pc-header .wiget-bar > div img {
        margin-right: 6px;
        margin-top: 1px; }
      #pc-header .wiget-bar > div.gift img {
        width: 12px;
        height: 12px; }
      #pc-header .wiget-bar > div.headset img {
        width: 12px;
        height: 12px; }
      #pc-header .wiget-bar > div.logout img {
        width: 12px;
        height: 12px; }
  #pc-header .main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    height: 80px;
    padding-left: 48px; }
    #pc-header .main-header .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 1; }
      #pc-header .main-header .header-inner .logo {
        display: flex;
        align-items: center; }
        #pc-header .main-header .header-inner .logo button {
          margin-left: 10px; }
        #pc-header .main-header .header-inner .logo h1 {
          font-size: 24px;
          font-weight: 600;
          color: #24212e; }
      #pc-header .main-header .header-inner .header-wiget {
        display: flex;
        align-items: center;
        gap: 14px;
        padding-right: 26px; }
        #pc-header .main-header .header-inner .header-wiget button {
          display: flex;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;
          border-radius: 8px;
          padding: 6px 12px;
          font-size: 14px;
          font-weight: 400; }
          #pc-header .main-header .header-inner .header-wiget button span {
            font-weight: 500; }
          #pc-header .main-header .header-inner .header-wiget button img {
            margin-right: 4px; }
            #pc-header .main-header .header-inner .header-wiget button img.reverse {
              margin-left: 5px;
              margin-right: 0; }
          #pc-header .main-header .header-inner .header-wiget button.my {
            border: 1px solid #0f9ba5;
            color: #0f9ba5; }
            #pc-header .main-header .header-inner .header-wiget button.my span {
              color: #0f9ba5; }
          #pc-header .main-header .header-inner .header-wiget button.cafe {
            border: 1px solid #a7a6ab;
            color: #504d58; }
            #pc-header .main-header .header-inner .header-wiget button.cafe span {
              color: #504d58; }
            #pc-header .main-header .header-inner .header-wiget button.cafe img {
              margin-top: 2px; }
          #pc-header .main-header .header-inner .header-wiget button.join {
            background: linear-gradient(90deg, #35e87c 0%, #34b3e9 101.12%); }
            #pc-header .main-header .header-inner .header-wiget button.join span {
              color: #fff; }
        #pc-header .main-header .header-inner .header-wiget .notice-bell {
          position: relative;
          cursor: pointer; }
          #pc-header .main-header .header-inner .header-wiget .notice-bell:after {
            content: '';
            display: none;
            position: absolute;
            width: 12px;
            height: 12px;
            top: -6px;
            right: -6px;
            border: 2px solid #ffffff;
            border-radius: 50%; }
          #pc-header .main-header .header-inner .header-wiget .notice-bell.system:after {
            content: '';
            display: block;
            background: #ff5050; }
          #pc-header .main-header .header-inner .header-wiget .notice-bell.msg:after {
            content: '';
            display: block;
            background: #7681e5; }
      #pc-header .main-header .header-inner .root {
        display: flex;
        align-items: center; }
        #pc-header .main-header .header-inner .root .main-cat {
          font-size: 20px;
          color: #7583ff; }
        #pc-header .main-header .header-inner .root .sub-cat {
          font-size: 15px;
          color: #24212e;
          margin-left: 10px; }
    #pc-header .main-header .close-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 80px;
      box-sizing: border-box;
      background: rgba(0, 0, 0, 0.2) url(../../../img/icon/icon_new_close.svg) no-repeat center; }
    #pc-header .main-header .side-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 80px;
      background: #09b9c6;
      gap: 6px;
      transition: 0.21s; }
      #pc-header .main-header .side-btn span {
        display: inline-block;
        width: 28.5px;
        height: 2px;
        background: #fff;
        border-radius: 8px;
        transition: 0.21s; }
      #pc-header .main-header .side-btn.active {
        background: #a7a6ab; }
        #pc-header .main-header .side-btn.active span {
          transform-origin: center; }
          #pc-header .main-header .side-btn.active span:nth-of-type(1) {
            transform: rotate(45deg) translate(3px, 3px);
            transform-origin: center; }
          #pc-header .main-header .side-btn.active span:nth-of-type(2) {
            display: none; }
          #pc-header .main-header .side-btn.active span:nth-of-type(3) {
            transform: rotate(-45deg) translate(2px, -2px);
            transform-origin: center; }
  #pc-header.new_play {
    border-bottom: 1px solid #f2f2f7;
    box-shadow: none; }
    #pc-header.new_play.sub_none .main-header .header-inner .root .sub-cat {
      display: none; }
    #pc-header.new_play .main-header#play-header .close-btn {
      background: rgba(0, 0, 0, 0.2) url("../../../img/icon/icon_new_close.svg") no-repeat center;
      border: none;
      box-shadow: none; }
      #pc-header.new_play .main-header#play-header .close-btn img {
        display: none; }
    #pc-header.new_play .main-header .header-inner .root .main-cat {
      font-size: 20px;
      line-height: 32px;
      font-weight: 700;
      margin-right: 10px; }
    #pc-header.new_play .main-header .header-inner .header-wiget {
      padding-right: 24px; }
      #pc-header.new_play .main-header .header-inner .header-wiget button.setting {
        height: 36px;
        padding: 0 34px 0 14px;
        font-weight: 500;
        border-radius: 999px;
        border: 1px solid #a7a6ab;
        background-color: #ffffff;
        color: #504d58;
        position: relative; }
        #pc-header.new_play .main-header .header-inner .header-wiget button.setting:after {
          content: '';
          display: inline-block;
          width: 18px;
          height: 18px;
          background: url("../../../img/icon/icon_setting_line_gray.svg") no-repeat center;
          position: absolute;
          right: 13px;
          top: 50%;
          transform: translateY(-50%); }

@media screen and (max-width: 1200px) {
  #pc-header .top-alert > div:nth-of-type(2) > div {
    width: 85%; }
    #pc-header .top-alert > div:nth-of-type(2) > div .join img {
      margin-left: 10px; } }

@media screen and (max-width: 1024px) {
  #pc-header .top-alert > div h1 {
    font-size: 21px; } }

@media screen and (max-width: 1024px) {
  #pc-header .main-header.x-header-mobile {
    height: 56px; }
    #pc-header .main-header.x-header-mobile .header-inner {
      justify-content: center;
      font-size: 16px;
      font-weight: 700; }
    #pc-header .main-header.x-header-mobile .close-btn {
      width: 56px;
      height: 56px; } }

#pc-header .main-header#play-header {
  height: 60px;
  padding-left: 32px; }
  #pc-header .main-header#play-header .main-cat::after {
    margin-right: 10px !important; }
  #pc-header .main-header#play-header .secont-cat {
    font-size: 15px;
    margin-right: 20px;
    color: #a7a6ab; }
  #pc-header .main-header#play-header .close-btn {
    width: 60px;
    height: 60px; }

#footer {
  background: #fff;
  padding: 40px 0;
  border-top: 1px solid #e9e9ea; }
  #footer .footer-inner {
    display: flex;
    justify-content: space-between;
    width: 1210px;
    margin: 0 auto; }
    #footer .footer-inner .company-info .term {
      display: flex;
      align-items: center;
      margin-bottom: 49px;
      margin-left: 150px; }
      #footer .footer-inner .company-info .term li {
        font-weight: 500;
        cursor: pointer; }
      #footer .footer-inner .company-info .term li:not(:last-of-type) {
        border-right: 1px solid #a7a6ab;
        padding-right: 10px;
        margin-right: 10px; }
    #footer .footer-inner .company-info .info-list {
      margin-bottom: 25px;
      display: flex; }
      #footer .footer-inner .company-info .info-list .footer-logo-gray {
        margin-right: 30px;
        cursor: pointer; }
      #footer .footer-inner .company-info .info-list ul {
        display: flex;
        flex-direction: column;
        gap: 7px; }
        #footer .footer-inner .company-info .info-list ul li {
          display: flex; }
          #footer .footer-inner .company-info .info-list ul li > div {
            display: flex;
            align-items: center;
            font-weight: 500;
            font-size: 13px;
            line-height: 23px;
            color: #7c7a82; }
            #footer .footer-inner .company-info .info-list ul li > div div {
              font-size: 11px;
              color: #a7a6ab; }
              #footer .footer-inner .company-info .info-list ul li > div div span {
                display: inline-block;
                color: inherit;
                font-size: inherit; }
                #footer .footer-inner .company-info .info-list ul li > div div span:not(:last-of-type):after {
                  content: '';
                  display: inline-block;
                  width: 1px;
                  height: 8px;
                  background: #a7a6ab;
                  margin: 0 5px; }
            #footer .footer-inner .company-info .info-list ul li > div.border:after {
              content: '';
              display: inline-block;
              width: 1px;
              height: 12px;
              background: #a7a6ab;
              margin: 0 10px; }
    #footer .footer-inner .company-info .copyright {
      font-weight: 500;
      font-size: 13px;
      color: #7c7a82;
      margin-left: 150px; }
    #footer .footer-inner .link-list {
      width: 292px;
      margin-top: 49px; }
      #footer .footer-inner .link-list ul {
        display: flex;
        flex-wrap: wrap; }
        #footer .footer-inner .link-list ul li {
          display: flex;
          align-items: center;
          font-weight: 500;
          font-size: 11px;
          color: #7c7a82;
          cursor: pointer;
          width: 120px;
          margin-bottom: 15px; }
          #footer .footer-inner .link-list ul li i {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background: #e6f8f9;
            border-radius: 50%;
            margin-right: 7px; }
          #footer .footer-inner .link-list ul li:nth-of-type(2n) {
            margin-left: 42px; }
  #footer.with_fixed_bot {
    padding-bottom: 128px; }

@media screen and (max-width: 1232px) {
  #footer {
    margin: 0 0 57px;
    padding: 40px 16px; }
    #footer .footer-inner {
      width: 100%; } }

@media screen and (max-width: 1180px) {
  #footer .footer-inner .company-info .term,
  #footer .footer-inner .company-info .copyright {
    margin-left: 0; }
  #footer .footer-inner .company-info .info-list {
    flex-direction: column; }
    #footer .footer-inner .company-info .info-list .footer-logo-gray {
      margin-bottom: 20px; }
  #footer .footer-inner .link-list {
    padding-top: 63px; }
    #footer .footer-inner .link-list ul {
      justify-content: flex-end; }
      #footer .footer-inner .link-list ul li:nth-of-type(2n) {
        margin-left: 30px; } }

@media screen and (max-width: 1024px) {
  #footer {
    padding: 40px 16px 40px;
    margin: 0; }
    #footer .footer-inner {
      flex-direction: column;
      justify-content: initial;
      width: 100%;
      margin: initial; }
      #footer .footer-inner .company-info .term {
        margin-bottom: 25px; }
        #footer .footer-inner .company-info .term li {
          font-size: 12px; }
      #footer .footer-inner .company-info .call-info {
        margin-bottom: 14px; }
        #footer .footer-inner .company-info .call-info h1 {
          font-weight: 800;
          font-size: 24px;
          line-height: 29px;
          margin-bottom: 5px;
          color: #000000; }
        #footer .footer-inner .company-info .call-info p {
          font-weight: 500;
          font-size: 11px;
          line-height: 16px;
          color: #7c7a82; }
        #footer .footer-inner .company-info .call-info.footer_main1 ul {
          display: flex; }
          #footer .footer-inner .company-info .call-info.footer_main1 ul li {
            font-size: 10px;
            font-weight: 500;
            color: #a7a6ab;
            line-height: 14px; }
            #footer .footer-inner .company-info .call-info.footer_main1 ul li:not(:last-of-type)::after {
              content: '';
              display: inline-block;
              width: 1px;
              height: 8px;
              background: #7c7a82;
              margin: 0 5px; }
            #footer .footer-inner .company-info .call-info.footer_main1 ul li:first-of-type {
              color: #7c7a82; }
              #footer .footer-inner .company-info .call-info.footer_main1 ul li:first-of-type::after {
                background: #7c7a82; }
      #footer .footer-inner .company-info .info-list ul {
        gap: 3px; }
        #footer .footer-inner .company-info .info-list ul li {
          flex-wrap: wrap;
          line-height: 16px; }
          #footer .footer-inner .company-info .info-list ul li > div {
            font-size: 11px;
            line-height: 16px; }
      #footer .footer-inner .link-list {
        width: 100%;
        margin-top: 0;
        margin-bottom: 29px;
        padding-top: 0; }
        #footer .footer-inner .link-list ul {
          flex-direction: row;
          justify-content: center;
          gap: 10px; }
          #footer .footer-inner .link-list ul li {
            width: initial;
            margin-bottom: 0; }
            #footer .footer-inner .link-list ul li:nth-of-type(2n) {
              margin-left: 0; }
            #footer .footer-inner .link-list ul li i {
              margin-right: 0; }
      #footer .footer-inner .m-fold-box {
        margin-bottom: 35px; }
        #footer .footer-inner .m-fold-box .m-fold-head {
          display: flex;
          align-items: center;
          cursor: pointer;
          font-weight: 500;
          font-size: 12px;
          color: #7c7a82; }
          #footer .footer-inner .m-fold-box .m-fold-head img {
            margin-left: 7px;
            transform: translateY(1px); }
            #footer .footer-inner .m-fold-box .m-fold-head img.active {
              transform: rotate(180deg); }
        #footer .footer-inner .m-fold-box .m-fold-body {
          display: none;
          flex-direction: column;
          gap: 3px;
          margin: 14px -16px 0;
          padding: 18px 16px;
          background: #eff5f6; }
          #footer .footer-inner .m-fold-box .m-fold-body.active {
            display: flex; }
          #footer .footer-inner .m-fold-box .m-fold-body > div {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            font-weight: 500;
            font-size: 11px;
            line-height: 16px;
            color: #7c7a82; }
            #footer .footer-inner .m-fold-box .m-fold-body > div button {
              font-weight: 500;
              font-size: 10px;
              line-height: 14px;
              color: #7c7a82;
              background: #e9e9ea;
              border: 1px solid #d3d3d5;
              box-sizing: border-box;
              padding: 0 7px;
              height: 22px; }
              #footer .footer-inner .m-fold-box .m-fold-body > div button img {
                margin-left: 6px; }
              #footer .footer-inner .m-fold-box .m-fold-body > div button.f-c {
                display: flex;
                align-items: center; }
          #footer .footer-inner .m-fold-box .m-fold-body.footer_main2 {
            gap: 5px;
            flex-direction: column; }
            #footer .footer-inner .m-fold-box .m-fold-body.footer_main2 > div {
              display: flex; }
              #footer .footer-inner .m-fold-box .m-fold-body.footer_main2 > div div {
                font-weight: 500;
                font-size: 11px;
                color: #a7a6ab; }
                #footer .footer-inner .m-fold-box .m-fold-body.footer_main2 > div div:first-of-type::after {
                  content: '';
                  display: inline-block;
                  width: 1px;
                  height: 10px;
                  background: #a7a6ab;
                  margin: 0 10px 2px;
                  vertical-align: middle; }
      #footer .footer-inner .copyright {
        font-size: 11px;
        color: #d3d3d5;
        text-align: center; } }

.tab_style.green {
  border-bottom: 1px solid #9de3e8; }

.tab_style.purple {
  border-bottom: 1px solid #c8cdf5; }

.tab_style ul {
  display: flex;
  justify-content: center; }
  .tab_style ul li {
    display: inline-block;
    font-weight: 500;
    color: #09b9c6;
    text-align: center;
    padding-bottom: 16px;
    position: relative;
    cursor: pointer;
    opacity: 0.7; }
    .tab_style ul li.green {
      color: #09b9c6; }
      .tab_style ul li.green.on::after {
        background-color: #09b9c6; }
    .tab_style ul li.purple {
      color: #5f5cdd; }
      .tab_style ul li.purple.on::after {
        background-color: #5f5cdd; }
    .tab_style ul li.on {
      font-weight: 700;
      opacity: 1; }
      .tab_style ul li.on::after {
        content: '';
        display: content;
        width: 100%;
        height: 10px;
        border-radius: 10px 10px 0 0;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%); }
  .tab_style ul.type1 li {
    width: 50%;
    max-width: 380px;
    font-size: 24px; }
  .tab_style ul.type2 li {
    width: 20%;
    max-width: 225px;
    font-size: 20px; }

input[type='radio'] + label {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  color: #d3d3d5;
  cursor: pointer; }
  input[type='radio'] + label i {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #d3d3d5;
    position: relative;
    vertical-align: middle;
    margin-right: 10px; }

input[type='radio']:checked + label {
  color: #7681e5; }
  input[type='radio']:checked + label i {
    border-color: #7681e5;
    position: relative; }
    input[type='radio']:checked + label i:after {
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 3px solid #7681e5;
      background-color: #919aea;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-sizing: border-box; }

.play-input-text + .under-text {
  font-family: 'Roboto', 'Noto Sans KR';
  font-size: 20px;
  color: #ff5050; }

.play-input-text {
  display: flex;
  align-items: center;
  position: relative;
  height: 60px;
  background: #ffffff;
  border: 1px solid #504d58;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 20px;
  transition: 0.21s; }
  .play-input-text.height40 {
    height: 40px; }
  .play-input-text.active {
    border: 1px solid #09b9c6; }
  .play-input-text.correct {
    border: 3px solid #09b9c6; }
  .play-input-text.wrong {
    border: 3px solid #ff5050; }
    .play-input-text.wrong.height40 {
      margin-bottom: 40px !important; }
  .play-input-text input {
    all: unset;
    width: 100%;
    font-size: 16px;
    line-height: 1.5; }
  .play-input-text .under-text {
    position: absolute;
    top: 65px;
    left: 0;
    font-family: 'Roboto', 'Noto Sans KR';
    font-size: 20px;
    color: #ff5050;
    line-height: 1.2 !important; }
  .play-input-text.correct_input {
    height: initial;
    background: initial;
    border: initial;
    box-sizing: initial;
    border-radius: initial;
    padding: initial; }
    .play-input-text.correct_input input {
      color: #24212e;
      font-size: 24px;
      font-family: 'Roboto', 'Noto Sans KR'; }
      .play-input-text.correct_input input:placeholder-shown {
        color: #7c7a82; }
    .play-input-text.correct_input .under-text {
      top: 45px;
      font-size: 22px; }
  .play-input-text.underline_input {
    height: initial;
    background: initial;
    border: initial;
    box-sizing: initial;
    border-radius: initial;
    padding: initial; }
    .play-input-text.underline_input input {
      color: #3ac7d1;
      font-size: 24px;
      font-family: 'Roboto', 'Noto Sans KR'; }
      .play-input-text.underline_input input:placeholder-shown {
        color: #7c7a82; }
    .play-input-text.underline_input .under-text {
      top: 45px;
      font-size: 22px; }
  .play-input-text.abs {
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    padding: 20px 5px; }
    .play-input-text.abs .under-text {
      top: 55px;
      font-size: 22px; }

.desc5-input-inner .play-input-text.wrong.height40,
.input-row .play-input-text.wrong.height40 {
  margin-bottom: 0 !important; }

@media screen and (max-width: 1024px) {
  .play-input-text {
    height: 30px;
    border-radius: 10px;
    padding: 10px; }
    .play-input-text + .under-text {
      font-size: 14px;
      margin-top: 5px; }
    .play-input-text input {
      height: 23px; }
    .play-input-text.correct_input input {
      font-size: 19px; }
    .play-input-text.correct_input .under-text {
      top: 29px;
      font-size: 19px; }
    .play-input-text.underline_input input {
      font-size: 19px; }
    .play-input-text.underline_input .under-text {
      top: 30px;
      font-size: 19px; }
    .play-input-text.height40 {
      height: 40px; }
      .play-input-text.height40 input::placeholder {
        font-size: 14px; }
    .play-input-text.abs {
      top: 32px;
      padding: 0; }
      .play-input-text.abs .under-text {
        top: 30px;
        font-size: 14px; }
    .play-input-text .under-text {
      position: absolute;
      top: 34px;
      left: 0;
      font-family: 'Roboto', 'Noto Sans KR';
      font-size: 14px;
      color: #ff5050; } }

#cedulearn #play-test .play-desc-text {
  position: absolute;
  right: 20px;
  top: 50px;
  width: calc(100% - 20px); }
  #cedulearn #play-test .play-desc-text .desc-area {
    width: 100%;
    line-height: initial !important; }
    #cedulearn #play-test .play-desc-text .desc-area textarea.desc_textarea {
      all: unset;
      display: inline-block;
      width: 100%;
      background: #ffffff;
      border: 2px solid #09b9c6;
      word-break: break-all;
      white-space: pre-line;
      box-sizing: border-box;
      border-radius: 15px;
      padding: 18px 20px;
      font-family: 'Roboto', 'Noto Sans KR';
      font-size: 20px;
      line-height: 30px;
      color: #7c7a82;
      min-width: 40px; }
      #cedulearn #play-test .play-desc-text .desc-area textarea.desc_textarea::placeholder {
        color: #d3d3d5; }
      #cedulearn #play-test .play-desc-text .desc-area textarea.desc_textarea:placeholder-shown {
        border: 2px solid #7c7a82; }
  #cedulearn #play-test .play-desc-text .sub-text {
    width: 100%;
    font-family: 'Roboto', 'Noto Sans KR';
    font-size: 16px;
    white-space: pre-line;
    line-height: 19px;
    color: #09b9c6;
    margin-top: -10px; }

#cedulearn #play-test span {
  font-size: inherit;
  font-weight: inherit !important;
  width: max-content;
  font-family: 'Roboto', 'Noto Sans KR'; }
  #cedulearn #play-test span.bracket {
    font-size: 20px !important; }
  #cedulearn #play-test span.click-bridge {
    font: inherit !important;
    padding: 9px 30px; }

#cedulearn #play-test span.slash .play-desc-text .desc-area textarea.desc_textarea {
  padding: 6px 8px;
  font-size: 14px;
  line-height: 24px; }

#cedulearn #play-test .new_factory_button span {
  font-family: 'Noto Sans KR', sans-serif; }

#cedulearn.font_small #play-test span.slash .play-desc-text .desc-area textarea.desc_textarea {
  font-size: 12px; }

#cedulearn.font_normal #play-test span.slash .play-desc-text .desc-area textarea.desc_textarea {
  font-size: 14px; }

#cedulearn.font_large #play-test span.slash .play-desc-text .desc-area textarea.desc_textarea {
  font-size: 16px; }

@media screen and (max-width: 1024px) {
  #cedulearn #play-test .play-desc-text {
    display: inline-block;
    left: 0;
    right: initial;
    width: 100%;
    top: auto;
    bottom: 10px;
    position: static;
    margin-top: 10px;
    vertical-align: middle; }
    #cedulearn #play-test .play-desc-text .desc-area textarea {
      word-break: keep-all;
      height: 46px;
      padding: 15px 10px 8px;
      font-size: 14px;
      line-height: 16px;
      border-radius: 10px; } }

.bell-closer {
  position: fixed;
  top: 123px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 12;
  display: none;
  /* ios fixed 이슈 관련 */ }
  @media (orientation: landscape) {
    .bell-closer {
      position: fixed; } }
  @media (orientation: portrait) {
    .bell-closer {
      position: fixed; } }
  .bell-closer.active {
    display: block; }

#pc-bell-notice {
  display: none;
  width: 500px;
  position: absolute;
  top: 120px;
  right: 0;
  padding: 24px 5px 24px 24px;
  background: #fff;
  border: 1px solid #e9e9ea;
  box-sizing: border-box;
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  z-index: 13; }
  #pc-bell-notice.active {
    display: block; }
  #pc-bell-notice:after {
    content: '';
    position: absolute;
    top: -11px;
    right: 104px;
    border-left: 1px solid #e9e9ea;
    border-top: 1px solid #e9e9ea;
    background: #fff;
    width: 20px;
    height: 20px;
    transform: rotate(45deg); }
  #pc-bell-notice .system-alert {
    position: relative;
    padding: 15px 43px 15px 10px;
    font-weight: 500;
    font-size: 13px;
    color: #fff;
    background: #ff5050;
    border-radius: 10px; }
    #pc-bell-notice .system-alert .close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer; }
  #pc-bell-notice .notice-list {
    overflow-y: auto;
    max-height: 35vh;
    margin-top: 15px;
    padding-right: 11px;
    /* 스크롤 바 */
    /* 스크롤 바 밑의 배경 */
    /* 실질적 스크롤 바 */
    /* 스크롤 바 상 하단 버튼 */ }
    #pc-bell-notice .notice-list::-webkit-scrollbar {
      width: 8px;
      height: 8px; }
    #pc-bell-notice .notice-list::-webkit-scrollbar-track {
      background-color: transparent; }
    #pc-bell-notice .notice-list::-webkit-scrollbar-thumb {
      background: #d3d3d5;
      border-radius: 10px; }
    #pc-bell-notice .notice-list::-webkit-scrollbar-button {
      display: none; }
    #pc-bell-notice .notice-list ul {
      display: flex;
      flex-direction: column;
      gap: 15px; }
      #pc-bell-notice .notice-list ul li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 12px;
        border-bottom: 1px solid #e0e0e0; }
        #pc-bell-notice .notice-list ul li .text {
          flex: 1; }
          #pc-bell-notice .notice-list ul li .text p {
            display: flex;
            align-items: center;
            font-size: 14px;
            line-height: 20px;
            color: #24212e;
            margin-bottom: 5px; }
            #pc-bell-notice .notice-list ul li .text p .date {
              font-size: 11px;
              line-height: 12px;
              color: #a7a6ab;
              margin-left: 11px; }
          #pc-bell-notice .notice-list ul li .text span {
            font-size: 12px;
            line-height: 17px;
            color: #504d58; }
          #pc-bell-notice .notice-list ul li .text.visited p {
            color: #d3d3d5; }
            #pc-bell-notice .notice-list ul li .text.visited p span {
              color: #d3d3d5; }
            #pc-bell-notice .notice-list ul li .text.visited p > div:first-child {
              color: #d3d3d5; }
          #pc-bell-notice .notice-list ul li .text.visited span {
            color: #d3d3d5; }
        #pc-bell-notice .notice-list ul li .marker {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          margin-left: 8px; }
          #pc-bell-notice .notice-list ul li .marker.system {
            background: #7681e5; }
          #pc-bell-notice .notice-list ul li .marker.msg {
            background: #ff5050; }
          #pc-bell-notice .notice-list ul li .marker.visited {
            background: #d3d3d5; }
          #pc-bell-notice .notice-list ul li .marker.delete {
            width: auto;
            height: auto;
            cursor: pointer; }
    #pc-bell-notice .notice-list .more-list {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 20px; }
      #pc-bell-notice .notice-list .more-list p {
        font-size: 15px;
        line-height: 22px;
        color: #504d58;
        text-align: center;
        margin-bottom: 5px; }
        #pc-bell-notice .notice-list .more-list p em {
          font-size: 15px;
          font-weight: 600;
          color: #3ac7d1; }
      #pc-bell-notice .notice-list .more-list button {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 13px;
        color: #a7a6ab; }
        #pc-bell-notice .notice-list .more-list button img {
          margin-left: 2px; }

#mb-bell-notice {
  display: none;
  min-width: 300px;
  max-width: 500px;
  width: calc(100% - 200px);
  position: absolute;
  top: 70px;
  right: 20px;
  padding: 24px 9px 24px 24px;
  background: #fff;
  border: 1px solid #e9e9ea;
  box-sizing: border-box;
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  z-index: 13; }
  #mb-bell-notice.active {
    display: block; }
  #mb-bell-notice:after {
    content: '';
    position: absolute;
    top: -11px;
    right: 72px;
    border-left: 1px solid #e9e9ea;
    border-top: 1px solid #e9e9ea;
    background: #fff;
    width: 20px;
    height: 20px;
    transform: rotate(45deg); }
  #mb-bell-notice .system-alert {
    position: relative;
    padding: 15px 43px 15px 10px;
    font-weight: 500;
    font-size: 13px;
    color: #fff;
    background: #ff5050;
    border-radius: 10px; }
    #mb-bell-notice .system-alert .close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer; }
  #mb-bell-notice .notice-list {
    overflow-y: auto;
    max-height: 35vh;
    margin-top: 15px;
    padding-right: 15px;
    /* 스크롤 바 상 하단 버튼 */ }
    #mb-bell-notice .notice-list ul {
      display: flex;
      flex-direction: column;
      gap: 15px; }
      #mb-bell-notice .notice-list ul li {
        display: flex;
        justify-content: space-between;
        padding-bottom: 12px;
        border-bottom: 1px solid #e0e0e0; }
        #mb-bell-notice .notice-list ul li .text {
          flex: 1; }
          #mb-bell-notice .notice-list ul li .text p {
            display: flex;
            align-items: center;
            font-size: 14px;
            line-height: 20px;
            color: #24212e;
            margin-bottom: 5px; }
            #mb-bell-notice .notice-list ul li .text p .date {
              font-size: 12px;
              line-height: 12px;
              color: #a7a6ab;
              margin-left: 4px; }
            #mb-bell-notice .notice-list ul li .text p div {
              font: inherit;
              color: inherit; }
          #mb-bell-notice .notice-list ul li .text span {
            font-size: 13px;
            line-height: 18px;
            color: #504d58; }
          #mb-bell-notice .notice-list ul li .text.visited p {
            color: #d3d3d5; }
            #mb-bell-notice .notice-list ul li .text.visited p span {
              color: #d3d3d5; }
          #mb-bell-notice .notice-list ul li .text.visited span {
            color: #d3d3d5; }
        #mb-bell-notice .notice-list ul li .marker {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          margin-left: 6px; }
          #mb-bell-notice .notice-list ul li .marker.system {
            background: #7681e5; }
          #mb-bell-notice .notice-list ul li .marker.msg {
            background: #ff5050; }
          #mb-bell-notice .notice-list ul li .marker.visited {
            background: #d3d3d5; }
          #mb-bell-notice .notice-list ul li .marker.delete {
            width: auto;
            height: auto;
            cursor: pointer; }
    #mb-bell-notice .notice-list .more-list {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 20px; }
      #mb-bell-notice .notice-list .more-list p {
        font-size: 15px;
        line-height: 22px;
        color: #504d58;
        text-align: center;
        margin-bottom: 5px; }
        #mb-bell-notice .notice-list .more-list p em {
          font-size: 15px;
          font-weight: 600;
          color: #3ac7d1; }
      #mb-bell-notice .notice-list .more-list button {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 13px;
        color: #a7a6ab; }
        #mb-bell-notice .notice-list .more-list button img {
          margin-left: 2px; }

@media screen and (max-width: 1024px) {
  .bell-closer {
    top: 0; } }

#pc-declare.active + .closer-helper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  /* ios fixed 이슈 관련 */ }
  @media (orientation: landscape) {
    #pc-declare.active + .closer-helper {
      position: fixed; } }
  @media (orientation: portrait) {
    #pc-declare.active + .closer-helper {
      position: fixed; } }

#pc-declare {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 60px;
  right: 190px;
  width: 500px;
  background: #ffffff;
  border: 1px solid #e9e9ea;
  box-sizing: border-box;
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  padding: 30px;
  z-index: 2;
  /* ios fixed 이슈 관련 */ }
  @media (orientation: landscape) {
    #pc-declare {
      position: fixed; } }
  @media (orientation: portrait) {
    #pc-declare {
      position: fixed; } }
  #pc-declare.active {
    display: flex; }
  #pc-declare:after {
    content: '';
    position: absolute;
    top: -11px;
    right: 170px;
    border-left: 1px solid #e9e9ea;
    border-top: 1px solid #e9e9ea;
    background: #fff;
    width: 20px;
    height: 20px;
    transform: rotate(45deg); }
  #pc-declare .declare-inner {
    max-height: 50vh;
    overflow: auto; }
    #pc-declare .declare-inner .title {
      padding-bottom: 20px;
      border-bottom: 1px solid #d3d3d5;
      margin-bottom: 20px; }
      #pc-declare .declare-inner .title h2 {
        font-size: 20px;
        color: #24212e;
        font-weight: 700; }
    #pc-declare .declare-inner .user-info {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-bottom: 20px;
      border-bottom: 1px solid #d3d3d5;
      margin-bottom: 20px; }
      #pc-declare .declare-inner .user-info .thumbnmail {
        width: 35px;
        min-width: 35px;
        height: 35px;
        border-radius: 50%; }
        #pc-declare .declare-inner .user-info .thumbnmail img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: inherit; }
      #pc-declare .declare-inner .user-info .user-name p {
        font-size: 12px;
        color: #7c7a82; }
        #pc-declare .declare-inner .user-info .user-name p em {
          font-size: 26px;
          color: #24212e;
          margin-right: 10px; }
    #pc-declare .declare-inner .content {
      display: flex;
      flex-direction: column;
      flex: 1;
      border-radius: 10px;
      border: 1px solid #d3d3d5;
      padding: 15px;
      height: calc(100% - 150px); }
      #pc-declare .declare-inner .content .url-adress {
        flex: 1;
        padding-bottom: 20px; }
        #pc-declare .declare-inner .content .url-adress p {
          color: #504d58;
          text-decoration: underline; }
      #pc-declare .declare-inner .content .add-file {
        margin-top: auto;
        border-top: 1px solid #d3d3d5;
        padding-top: 20px; }
        #pc-declare .declare-inner .content .add-file ul li {
          display: flex;
          align-items: center;
          gap: 15px; }
          #pc-declare .declare-inner .content .add-file ul li .file-desc {
            display: flex;
            align-items: center;
            padding: 10px 20px;
            border-radius: 10px;
            border: 1px solid #a7a6ab;
            flex: 1; }
            #pc-declare .declare-inner .content .add-file ul li .file-desc img {
              margin-right: 10px; }
            #pc-declare .declare-inner .content .add-file ul li .file-desc p {
              font-size: 13px;
              color: #504d58; }
              #pc-declare .declare-inner .content .add-file ul li .file-desc p span {
                display: inline-block;
                font-size: 10px;
                color: #a7a6ab;
                margin-left: 5px; }
          #pc-declare .declare-inner .content .add-file ul li button {
            width: 15px;
            height: 15px; }
            #pc-declare .declare-inner .content .add-file ul li button img {
              width: 100%;
              height: 100%;
              display: block; }
        #pc-declare .declare-inner .content .add-file .input-text-bar {
          display: flex;
          margin-top: 20px; }
    #pc-declare .declare-inner > p {
      margin-top: 10px;
      margin-bottom: 20px;
      font-size: 12px;
      color: #a7a6ab; }
    #pc-declare .declare-inner .btn-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px; }
      #pc-declare .declare-inner .btn-wrap button {
        width: 112px;
        margin: 0; }

@media screen and (max-width: 1024px) {
  #pc-declare {
    display: flex;
    position: initial;
    width: 100%;
    height: calc(100vh - 56px);
    overflow: auto;
    padding: 40px 16px;
    border-radius: 0;
    border: none;
    padding-bottom: 120px; }
    #pc-declare .content .url-adress p {
      word-break: break-all; }
    #pc-declare .content .add-file ul li .file-desc {
      padding: 10px; }
      #pc-declare .content .add-file ul li .file-desc p {
        font-size: 12px; }
    #pc-declare .content .add-file .input-text-bar .add-file-btn {
      display: flex;
      align-items: center; }
      #pc-declare .content .add-file .input-text-bar .add-file-btn label img {
        width: 17px;
        height: 29px; }
    #pc-declare .btn-wrap button {
      width: 164px; } }

@media screen and (max-width: 1024px) {
  #pc-declare .declare-inner {
    display: flex;
    flex-direction: column;
    max-height: initial;
    overflow: initial;
    height: inherit; }
    #pc-declare .declare-inner .content {
      display: flex;
      flex-direction: column;
      max-height: initial; } }

#pc-nav {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 124px;
  bottom: 0;
  width: 384px;
  right: -384px;
  background: #fff;
  box-shadow: 0px 0px 21px rgba(53, 54, 116, 0.08);
  border-radius: 21px 0 0 21px;
  padding: 40px 12px 40px 50px;
  transition: 0.21s;
  overflow: auto;
  /* ios fixed 이슈 관련 */ }
  @media (orientation: landscape) {
    #pc-nav {
      position: fixed; } }
  @media (orientation: portrait) {
    #pc-nav {
      position: fixed; } }
  #pc-nav.active {
    right: 0; }
  #pc-nav .nav-closer {
    position: fixed;
    top: 123px;
    left: 0;
    right: 384px;
    bottom: 0;
    z-index: 12;
    display: none;
    /* ios fixed 이슈 관련 */ }
    @media (orientation: landscape) {
      #pc-nav .nav-closer {
        position: fixed; } }
    @media (orientation: portrait) {
      #pc-nav .nav-closer {
        position: fixed; } }
    #pc-nav .nav-closer.active {
      display: block; }
  #pc-nav .nav-inner {
    padding-right: 15px; }
  #pc-nav .nav-user-box {
    display: flex;
    justify-content: space-between;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid #d3d3d5; }
    #pc-nav .nav-user-box .user-account {
      display: flex;
      align-items: center;
      width: 100%; }
      #pc-nav .nav-user-box .user-account .border {
        display: inline-block;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        padding: 2px; }
        #pc-nav .nav-user-box .user-account .border.book {
          background-image: linear-gradient(to right, #ff7a00, #896bde); }
        #pc-nav .nav-user-box .user-account .border.student {
          background-image: linear-gradient(to right, #22a4ed, #22a4ed); }
        #pc-nav .nav-user-box .user-account .border.free {
          background-image: linear-gradient(to right, #231055, #231055); }
        #pc-nav .nav-user-box .user-account .border.premium {
          background-image: linear-gradient(to right, #35e77d, #34b2e9); }
        #pc-nav .nav-user-box .user-account .border .user-profile {
          position: relative;
          width: 100%;
          height: 100%;
          padding: 3px;
          background: #fff;
          border-radius: inherit; }
          #pc-nav .nav-user-box .user-account .border .user-profile img {
            display: block; }
      #pc-nav .nav-user-box .user-account .user-desc {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        width: 100%;
        flex: 1; }
        #pc-nav .nav-user-box .user-account .user-desc .user-name {
          margin-left: 11px; }
          #pc-nav .nav-user-box .user-account .user-desc .user-name strong {
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent; }
            #pc-nav .nav-user-box .user-account .user-desc .user-name strong.book {
              background-image: linear-gradient(to right, #ff7a00, #896bde); }
            #pc-nav .nav-user-box .user-account .user-desc .user-name strong.student {
              background-image: linear-gradient(to right, #22a4ed, #22a4ed); }
            #pc-nav .nav-user-box .user-account .user-desc .user-name strong.free {
              background-image: linear-gradient(to right, #231055, #231055); }
            #pc-nav .nav-user-box .user-account .user-desc .user-name strong.premium {
              background-image: linear-gradient(to right, #35e77d, #34b2e9); }
          #pc-nav .nav-user-box .user-account .user-desc .user-name p {
            font-size: 20px;
            line-height: 29px;
            color: #24212e; }
      #pc-nav .nav-user-box .user-account .user-setting {
        display: flex;
        align-items: flex-end;
        cursor: pointer;
        transform: translateY(-3px); }
  #pc-nav .nav-menu-list ul {
    display: flex;
    flex-direction: column; }
    #pc-nav .nav-menu-list ul li {
      display: flex;
      align-items: center;
      font-size: 20px;
      line-height: 29px;
      cursor: pointer; }
      #pc-nav .nav-menu-list ul li:not(:last-of-type) {
        margin-bottom: 30px; }
      #pc-nav .nav-menu-list ul li img {
        margin-right: 8px; }

#mobile-header {
  height: 48px !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #fff;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
  z-index: 999;
  /* ios fixed 이슈 관련 */ }
  #mobile-header.title_purple .header-inner .main-header.back .back button {
    width: 15px;
    text-align: right; }
  #mobile-header.title_purple .header-inner .main-header.back .center .title_text {
    align-items: center;
    display: flex; }
  #mobile-header.title_purple .header-inner .main-header.back .center p {
    color: #7681e5; }
  #mobile-header .header-inner .main-header .center .title_text {
    align-items: center;
    display: flex;
    width: 100%; }
    #mobile-header .header-inner .main-header .center .title_text p {
      display: flex;
      align-items: center;
      justify-content: center; }
    #mobile-header .header-inner .main-header .center .title_text i {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background-color: #cccccc;
      display: block;
      margin-right: 8px; }
  @media (orientation: landscape) {
    #mobile-header {
      position: fixed; } }
  @media (orientation: portrait) {
    #mobile-header {
      position: fixed; } }
  #mobile-header .header-inner {
    display: flex;
    align-items: center; }
    #mobile-header .header-inner .main-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 1;
      padding-left: 15px;
      padding-right: 20px; }
      #mobile-header .header-inner .main-header.default {
        justify-content: flex-end;
        padding: 0; }
        #mobile-header .header-inner .main-header.default .close-btn {
          width: 56px;
          height: 56px;
          background: #ffffff;
          border: 1px solid #09b9c6;
          box-sizing: border-box;
          text-align: center;
          box-shadow: 0px 4px 21px rgba(53, 54, 116, 0.08); }
      #mobile-header .header-inner .main-header.back {
        padding: 16px 18px; }
        #mobile-header .header-inner .main-header.back .front {
          width: 15%;
          flex: 0.15; }
          #mobile-header .header-inner .main-header.back .front img {
            cursor: pointer; }
        #mobile-header .header-inner .main-header.back .center {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 70%;
          flex: 0.7; }
          #mobile-header .header-inner .main-header.back .center p {
            font-size: 16px;
            font-weight: 700;
            line-height: 24px;
            text-align: center;
            color: #24212e; }
            #mobile-header .header-inner .main-header.back .center p.msg-backheader {
              width: max-content; }
          #mobile-header .header-inner .main-header.back .center img {
            margin-right: 8px; }
            #mobile-header .header-inner .main-header.back .center img.msg-backheader {
              margin-right: 12px; }
        #mobile-header .header-inner .main-header.back .back {
          display: flex;
          justify-content: flex-end;
          width: 15%;
          flex: 0.15; }
          #mobile-header .header-inner .main-header.back .back button {
            min-width: 15px;
            text-align: center; }
          #mobile-header .header-inner .main-header.back .back .msg-counting {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #919aea;
            color: #fff;
            line-height: 30px;
            text-align: center;
            font-size: 11px;
            flex-shrink: 0; }
      #mobile-header .header-inner .main-header .header-wiget .notice-bell {
        position: relative; }
        #mobile-header .header-inner .main-header .header-wiget .notice-bell:after {
          content: '';
          display: none;
          position: absolute;
          width: 7.48px;
          height: 7.48px;
          top: -3px;
          right: -3px;
          border: 2px solid #ffffff;
          border-radius: 50%; }
        #mobile-header .header-inner .main-header .header-wiget .notice-bell.system:after {
          content: '';
          display: block;
          background: #ff5050; }
        #mobile-header .header-inner .main-header .header-wiget .notice-bell.msg:after {
          content: '';
          display: block;
          background: #7681e5; }
        #mobile-header .header-inner .main-header .header-wiget .notice-bell img {
          width: 17px;
          height: 20px; }
    #mobile-header .header-inner .side-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 48px;
      height: 48px;
      background: #09b9c6;
      gap: 6px;
      transition: 0.21s;
      z-index: 30;
      box-shadow: 0px 4px 21px rgba(53, 54, 116, 0.08); }
      #mobile-header .header-inner .side-btn span {
        display: inline-block;
        width: 22px;
        height: 2px;
        background: #fff;
        border-radius: 8px;
        transition: 0.21s; }
      #mobile-header .header-inner .side-btn.active {
        background: #fff;
        border: 1px solid #09b9c6; }
        #mobile-header .header-inner .side-btn.active span {
          background: #0f9ba5 !important;
          transform-origin: center; }
          #mobile-header .header-inner .side-btn.active span:nth-of-type(1) {
            transform: rotate(45deg) translate(3px, 3px);
            transform-origin: center; }
          #mobile-header .header-inner .side-btn.active span:nth-of-type(2) {
            display: none; }
          #mobile-header .header-inner .side-btn.active span:nth-of-type(3) {
            transform: rotate(-45deg) translate(3px, -3px);
            transform-origin: center; }
  #mobile-header.msg_header {
    height: auto !important; }
  #mobile-header.back_type {
    box-shadow: none;
    border-bottom: 1px solid #f2f2f7; }

#mobile-nav {
  position: fixed;
  top: 0;
  right: -100%;
  bottom: 0;
  width: 100%;
  height: 100%;
  /* ios fixed 이슈 관련 */ }
  @media (orientation: landscape) {
    #mobile-nav {
      position: fixed; } }
  @media (orientation: portrait) {
    #mobile-nav {
      position: fixed; } }
  #mobile-nav.active {
    right: 0; }
  #mobile-nav .dim {
    transition: background 0.21s;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -100%;
    width: 100%;
    background: rgba(0, 0, 0, 0); }
    #mobile-nav .dim.active {
      right: 0;
      background: rgba(0, 0, 0, 0.8); }
  #mobile-nav .nav-top-menu {
    width: calc(100% - 48px);
    height: 48px;
    position: absolute;
    left: 0;
    top: 0; }
    #mobile-nav .nav-top-menu a {
      width: 100%;
      padding: 14px 24px;
      font-size: 13px;
      font-weight: bold;
      color: #fff; }
      #mobile-nav .nav-top-menu a::after {
        content: '';
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-left: 2px;
        background: url("../../../img/icon/icon_mobile_nav_arrow.svg") no-repeat center 2px; }
    #mobile-nav .nav-top-menu.yellow2 {
      background-color: #ffaa04; }
    #mobile-nav .nav-top-menu.cyan {
      background-color: #3ac7d1; }
  #mobile-nav .nav-inner {
    position: absolute;
    right: -80%;
    top: 0;
    bottom: 0;
    width: 280px;
    background: #fff;
    transition: 0.21s;
    padding: 88px 16px 0;
    overflow: auto;
    border-left: 1px solid #e9e9ea;
    box-shadow: -4px -4px 12px rgba(0, 0, 0, 0.08); }
    #mobile-nav .nav-inner.active {
      right: 0; }
    #mobile-nav .nav-inner .nav-user-box {
      display: flex;
      justify-content: space-between;
      padding-bottom: 30px;
      margin-bottom: 20px;
      border-bottom: 1px solid #d3d3d5; }
      #mobile-nav .nav-inner .nav-user-box .user-account {
        display: flex;
        align-items: center;
        width: 100%; }
        #mobile-nav .nav-inner .nav-user-box .user-account .border {
          display: inline-block;
          border-radius: 50%;
          width: 50px;
          height: 50px;
          padding: 2px; }
          #mobile-nav .nav-inner .nav-user-box .user-account .border.book {
            background-image: linear-gradient(to right, #ff7a00, #896bde); }
          #mobile-nav .nav-inner .nav-user-box .user-account .border.student {
            background-image: linear-gradient(to right, #22a4ed, #22a4ed); }
          #mobile-nav .nav-inner .nav-user-box .user-account .border.free {
            background-image: linear-gradient(to right, #231055, #231055); }
          #mobile-nav .nav-inner .nav-user-box .user-account .border.premium {
            background-image: linear-gradient(to right, #35e77d, #34b2e9); }
          #mobile-nav .nav-inner .nav-user-box .user-account .border .user-profile {
            position: relative;
            width: 100%;
            height: 100%;
            padding: 3px;
            background: #fff;
            border-radius: inherit; }
            #mobile-nav .nav-inner .nav-user-box .user-account .border .user-profile img {
              display: block; }
        #mobile-nav .nav-inner .nav-user-box .user-account .user-desc {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          width: 100%;
          flex: 1;
          position: relative; }
          #mobile-nav .nav-inner .nav-user-box .user-account .user-desc .user-name {
            margin-left: 11px; }
            #mobile-nav .nav-inner .nav-user-box .user-account .user-desc .user-name strong {
              font-size: 15px;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent; }
              #mobile-nav .nav-inner .nav-user-box .user-account .user-desc .user-name strong.book {
                background-image: linear-gradient(to right, #ff7a00, #896bde); }
              #mobile-nav .nav-inner .nav-user-box .user-account .user-desc .user-name strong.student {
                background-image: linear-gradient(to right, #22a4ed, #22a4ed); }
              #mobile-nav .nav-inner .nav-user-box .user-account .user-desc .user-name strong.free {
                background-image: linear-gradient(to right, #231055, #231055); }
              #mobile-nav .nav-inner .nav-user-box .user-account .user-desc .user-name strong.premium {
                background-image: linear-gradient(to right, #35e77d, #34b2e9); }
            #mobile-nav .nav-inner .nav-user-box .user-account .user-desc .user-name p {
              font-size: 16px;
              line-height: 29px;
              color: #24212e; }
        #mobile-nav .nav-inner .nav-user-box .user-account .user-setting {
          position: absolute;
          right: 0;
          bottom: 4px;
          /* 0801 안재현, 터치 영역확보 */
          padding: 0px 14px;
          cursor: pointer; }
    #mobile-nav .nav-inner .nav-menu-list {
      display: flex;
      flex-direction: column;
      height: calc(100% - 103px); }
      #mobile-nav .nav-inner .nav-menu-list ul {
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: 35px; }
        #mobile-nav .nav-inner .nav-menu-list ul li {
          display: flex;
          align-items: center;
          font-size: 15px;
          line-height: 26px;
          cursor: pointer; }
          #mobile-nav .nav-inner .nav-menu-list ul li img {
            margin-right: 8px; }
      #mobile-nav .nav-inner .nav-menu-list .nav-footer {
        margin-top: auto; }
        #mobile-nav .nav-inner .nav-menu-list .nav-footer .link {
          display: flex;
          justify-content: space-evenly;
          margin-bottom: 50px; }
          #mobile-nav .nav-inner .nav-menu-list .nav-footer .link button {
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 16px;
            line-height: 23px;
            color: #7c7a82; }
            #mobile-nav .nav-inner .nav-menu-list .nav-footer .link button img {
              margin-right: 10px;
              width: 17px; }
        #mobile-nav .nav-inner .nav-menu-list .nav-footer .call-box {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background: #eff5f6;
          margin: 0 -16px;
          padding: 28px 0; }
          #mobile-nav .nav-inner .nav-menu-list .nav-footer .call-box div {
            display: flex;
            align-items: center;
            font-size: 20px;
            color: #09b9c6;
            margin-bottom: 8px; }
            #mobile-nav .nav-inner .nav-menu-list .nav-footer .call-box div img {
              margin-right: 3px; }
          #mobile-nav .nav-inner .nav-menu-list .nav-footer .call-box p {
            font-weight: 500;
            font-size: 10px;
            line-height: 14px;
            color: #a7a6ab; }
    #mobile-nav .nav-inner.main-nav-inner {
      padding: 72px 0px 0px;
      display: flex;
      flex-direction: column;
      justify-content: space-between; }
      #mobile-nav .nav-inner.main-nav-inner .main-nav-top li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 24px;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        color: #24212e; }
        #mobile-nav .nav-inner.main-nav-inner .main-nav-top li img {
          padding: 4px;
          filter: invert(52%) sepia(2%) saturate(1244%) hue-rotate(214deg) brightness(80%) contrast(77%); }
        #mobile-nav .nav-inner.main-nav-inner .main-nav-top li.cyan {
          color: #09b9c6; }
          #mobile-nav .nav-inner.main-nav-inner .main-nav-top li.cyan img {
            filter: invert(55%) sepia(45%) saturate(5035%) hue-rotate(150deg) brightness(115%) contrast(93%); }
        #mobile-nav .nav-inner.main-nav-inner .main-nav-top li.yellow2 {
          color: #ffaa04; }
          #mobile-nav .nav-inner.main-nav-inner .main-nav-top li.yellow2 img {
            filter: invert(55%) sepia(95%) saturate(463%) hue-rotate(358deg) brightness(130%) contrast(100%); }
        #mobile-nav .nav-inner.main-nav-inner .main-nav-top li.purple {
          color: #7681e5; }
          #mobile-nav .nav-inner.main-nav-inner .main-nav-top li.purple img {
            filter: invert(58%) sepia(41%) saturate(4331%) hue-rotate(209deg) brightness(110%) contrast(87%); }
      #mobile-nav .nav-inner.main-nav-inner .main-nav-bottom .main-nav-cafe {
        padding: 0 24px;
        margin-bottom: 8px; }
        #mobile-nav .nav-inner.main-nav-inner .main-nav-bottom .main-nav-cafe ul {
          display: flex;
          align-items: center; }
          #mobile-nav .nav-inner.main-nav-inner .main-nav-bottom .main-nav-cafe ul li {
            width: calc(50% - 4px);
            padding: 6px 0;
            border: 1px solid #dfdfe4;
            border-radius: 6px;
            text-align: center;
            font-size: 14px;
            line-height: 22px;
            font-weight: 500;
            color: #504d58; }
            #mobile-nav .nav-inner.main-nav-inner .main-nav-bottom .main-nav-cafe ul li:not(:first-child) {
              margin-left: 8px; }
            #mobile-nav .nav-inner.main-nav-inner .main-nav-bottom .main-nav-cafe ul li.cafe-btn img {
              margin-left: 4px; }
            #mobile-nav .nav-inner.main-nav-inner .main-nav-bottom .main-nav-cafe ul li.service-btn img {
              margin-right: 4px; }
            #mobile-nav .nav-inner.main-nav-inner .main-nav-bottom .main-nav-cafe ul li img {
              margin-bottom: 3px; }
      #mobile-nav .nav-inner.main-nav-inner .main-nav-bottom .main-nav-app {
        margin-bottom: 16px; }
        #mobile-nav .nav-inner.main-nav-inner .main-nav-bottom .main-nav-app .main-nav-install {
          padding: 10px;
          background-color: #f8f9fa;
          border: 1px solid #e9e9ea;
          border-radius: 6px;
          display: flex;
          gap: 10px;
          align-items: center;
          cursor: pointer;
          margin: 0 24px 0 24px; }
          #mobile-nav .nav-inner.main-nav-inner .main-nav-bottom .main-nav-app .main-nav-install .cedu-box {
            width: 40px;
            height: 40px;
            border-radius: 6px;
            overflow: hidden; }
            #mobile-nav .nav-inner.main-nav-inner .main-nav-bottom .main-nav-app .main-nav-install .cedu-box img {
              width: 100%; }
          #mobile-nav .nav-inner.main-nav-inner .main-nav-bottom .main-nav-app .main-nav-install > p {
            font-size: 14px;
            font-weight: 500;
            line-height: 22px; }
        #mobile-nav .nav-inner.main-nav-inner .main-nav-bottom .main-nav-app > p {
          font-size: 12px;
          font-weight: 400;
          color: #a7a6ab;
          margin-top: 12px;
          text-align: center; }
      #mobile-nav .nav-inner.main-nav-inner .main-nav-bottom .main-nav-num {
        padding: 16px 46px;
        background: #eff5f6;
        text-align: center; }
        #mobile-nav .nav-inner.main-nav-inner .main-nav-bottom .main-nav-num h1 {
          color: #09b9c6;
          font-size: 16px;
          font-weight: 500;
          line-height: 24px;
          font-family: 'Pretendard'; }
          #mobile-nav .nav-inner.main-nav-inner .main-nav-bottom .main-nav-num h1 img {
            width: 14px;
            height: 14px;
            margin-right: 5px;
            margin-bottom: 2px; }
        #mobile-nav .nav-inner.main-nav-inner .main-nav-bottom .main-nav-num p {
          font-size: 10px;
          line-height: 16px;
          font-weight: 400;
          color: #a7a6ab;
          font-family: 'Pretendard'; }

#pc-sign-info {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 60px;
  right: 90px;
  width: 500px;
  background: #ffffff;
  border: 1px solid #e9e9ea;
  box-sizing: border-box;
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  padding: 30px;
  /* ios fixed 이슈 관련 */ }
  #pc-sign-info > div {
    max-height: 70vh;
    overflow-y: auto; }
  @media (orientation: landscape) {
    #pc-sign-info {
      position: fixed; } }
  @media (orientation: portrait) {
    #pc-sign-info {
      position: fixed; } }
  #pc-sign-info.active {
    display: flex; }
  #pc-sign-info:after {
    content: '';
    position: absolute;
    top: -11px;
    right: 20px;
    border-left: 1px solid #e9e9ea;
    border-top: 1px solid #e9e9ea;
    background: #fff;
    width: 20px;
    height: 20px;
    transform: rotate(45deg); }
  #pc-sign-info .row {
    display: flex;
    flex-direction: column;
    gap: 5px; }
    #pc-sign-info .row dl {
      display: flex;
      gap: 10px; }
      #pc-sign-info .row dl dt {
        width: 15%;
        font-weight: 800;
        font-size: 16px;
        color: #504d58; }
        #pc-sign-info .row dl dt em {
          font-size: 10px;
          color: #504d58;
          font-weight: 800; }
      #pc-sign-info .row dl dd {
        font-size: 16px;
        color: #7c7a82; }
    #pc-sign-info .row:not(:first-of-type) {
      margin-top: 30px; }

@media screen and (max-width: 1024px) {
  #pc-sign-info {
    display: flex;
    position: initial;
    width: 100%;
    max-height: 75vh;
    overflow: auto;
    padding: 0 30px;
    border: none;
    box-shadow: none; }
    #pc-sign-info:after {
      display: none; }
    #pc-sign-info .row dl dt {
      font-size: 14px; }
    #pc-sign-info .row dl dd {
      font-size: 14px; } }

#pc-play-setting.active + .closer-helper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  /* ios fixed 이슈 관련 */ }
  @media (orientation: landscape) {
    #pc-play-setting.active + .closer-helper {
      position: fixed; } }
  @media (orientation: portrait) {
    #pc-play-setting.active + .closer-helper {
      position: fixed; } }

#pc-play-setting {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 66px;
  transform: translateX(-60%);
  width: 373px;
  background: #ffffff;
  border: 1px solid #e9e9ea;
  box-sizing: border-box;
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  padding: 30px;
  gap: 30px;
  z-index: 2;
  /* ios fixed 이슈 관련 */ }
  @media (orientation: landscape) {
    #pc-play-setting {
      position: fixed; } }
  @media (orientation: portrait) {
    #pc-play-setting {
      position: fixed; } }
  #pc-play-setting.active {
    display: flex; }
  #pc-play-setting:after {
    content: '';
    position: absolute;
    top: -11px;
    right: 74px;
    border-left: 1px solid #e9e9ea;
    border-top: 1px solid #e9e9ea;
    background: #fff;
    width: 20px;
    height: 20px;
    transform: rotate(45deg); }
  #pc-play-setting dl {
    display: flex;
    align-items: center; }
    #pc-play-setting dl dt {
      width: 35%;
      font-weight: 500;
      color: #504d58; }
    #pc-play-setting dl dd {
      flex: 1; }

.input-toggle input {
  display: none; }

.input-toggle .toggle-box {
  display: flex;
  align-items: center;
  width: 51px;
  background: #e9e9ea;
  border-radius: 16px;
  padding: 2px;
  transition: 0.21s; }
  .input-toggle .toggle-box label {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #fff;
    transition: 0.21s;
    cursor: pointer; }

.input-toggle input:checked + .toggle-box {
  background: #39393d; }
  .input-toggle input:checked + .toggle-box label {
    transform: translateX(21px); }

.input-toggle input:checked + .toggle-box.cyan {
  background: #09b9c6; }
  .input-toggle input:checked + .toggle-box.cyan label {
    transform: translateX(21px); }

@media screen and (max-width: 1024px) {
  #pc-play-setting {
    display: flex;
    width: 100%;
    position: initial;
    padding: 55px 40px;
    transform: translate(0); }
    #pc-play-setting:after {
      display: none; }
    #pc-play-setting dl {
      gap: 20px; }
      #pc-play-setting dl dt {
        width: initial;
        font-size: 12px; } }

.center-popup {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  /* ios fixed 이슈 관련 */ }
  @media (orientation: landscape) {
    .center-popup {
      position: fixed; } }
  @media (orientation: portrait) {
    .center-popup {
      position: fixed; } }
  .center-popup .dim {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    cursor: pointer; }
  .center-popup .popup-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e9e9ea;
    box-sizing: border-box;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
    border-radius: 15px; }
    .center-popup .popup-container.btn_reset > button {
      position: absolute;
      top: -40px;
      right: 0;
      z-index: 1;
      width: 32px;
      height: 32px;
      background: url("../../../img/icon/icon_new_close.svg") no-repeat center; }
      .center-popup .popup-container.btn_reset > button img {
        display: none; }
    .center-popup .popup-container.pc_big {
      display: block;
      max-width: 1320px;
      width: calc(100% - 32px);
      padding: 57px 50px 43px;
      max-height: 95%;
      overflow-y: auto; }
    .center-popup .popup-container.pc_small {
      max-width: 500px;
      width: calc(100% - 32px);
      padding: 40px 0; }
    .center-popup .popup-container.pc_medium {
      width: 800px; }
    .center-popup .popup-container.pc_large {
      width: 1140px;
      min-height: 40vh; }
    .center-popup .popup-container .popup-close {
      position: absolute;
      top: 15px;
      right: 15px; }
      .center-popup .popup-container .popup-close img {
        width: 22px;
        height: 22px; }
    .center-popup .popup-container .popup-content {
      width: 100%;
      overflow: auto;
      max-height: 90vh;
      /*캠퍼스 신규등록*/
      /*초대토근입력팝업*/ }
      .center-popup .popup-container .popup-content.visible {
        overflow: visible; }
      .center-popup .popup-container .popup-content .pop_cont {
        /* 좌우 여백까지 필요한 경우 */ }
        .center-popup .popup-container .popup-content .pop_cont.pd_side {
          padding: 0 40px; }
          .center-popup .popup-container .popup-content .pop_cont.pd_side h1 {
            word-break: keep-all; }
      .center-popup .popup-container .popup-content .campus_setting_wrap {
        padding: 33px 99px 47px; }
      .center-popup .popup-container .popup-content .campus_setting:after {
        content: '';
        display: block;
        clear: both; }
      .center-popup .popup-container .popup-content .campus_setting li {
        cursor: pointer;
        width: 100%;
        height: 152px;
        padding: 44px 0;
        text-align: center;
        float: left;
        font-size: 28px;
        font-weight: 700;
        color: #24212e;
        border-radius: 15px;
        border: 1px solid #e9e9ea;
        transition: border-color 0.4s;
        line-height: 40px; }
        .center-popup .popup-container .popup-content .campus_setting li:hover {
          border-color: #09b9c6;
          border-width: 2px; }
        .center-popup .popup-container .popup-content .campus_setting li span {
          display: block;
          font-size: 14px;
          font-weight: 400;
          color: #7c7a82;
          line-height: 20px;
          margin-bottom: 2px; }
        .center-popup .popup-container .popup-content .campus_setting li.add-desc {
          position: relative; }
          .center-popup .popup-container .popup-content .campus_setting li.add-desc::after {
            content: '무료캠퍼스를 개설해보세요.';
            width: 100%;
            display: block;
            text-align: center;
            position: absolute;
            bottom: 20px;
            font-size: 12px;
            font-weight: 400;
            color: #7c7a82;
            line-height: 20px; }
      .center-popup .popup-container .popup-content .campus_cont {
        padding: 50px 85px; }
        .center-popup .popup-container .popup-content .campus_cont h2 {
          font-size: 26px;
          font-weight: 700;
          color: #24212e;
          margin-bottom: 10px; }
          .center-popup .popup-container .popup-content .campus_cont h2 + p {
            font-size: 16px;
            font-weight: 500;
            color: #7c7a82; }
            .center-popup .popup-container .popup-content .campus_cont h2 + p + .color-point-red {
              margin-top: 4px; }
        .center-popup .popup-container .popup-content .campus_cont > div:first-of-type {
          padding-bottom: 30px;
          border-bottom: 1px solid #d3d3d5;
          margin-bottom: 6px; }
          .center-popup .popup-container .popup-content .campus_cont > div:first-of-type + div {
            margin-top: 20px; }
        .center-popup .popup-container .popup-content .campus_cont .form_div {
          margin-top: 30px; }
          .center-popup .popup-container .popup-content .campus_cont .form_div:first-of-type {
            margin-top: 0; }
          .center-popup .popup-container .popup-content .campus_cont .form_div p {
            font-size: 12px;
            color: #7c7a82;
            margin-bottom: 30px; }
          .center-popup .popup-container .popup-content .campus_cont .form_div > span {
            float: left;
            width: 150px;
            font-size: 18px;
            font-weight: 500;
            color: #504d58;
            line-height: 48px; }
          .center-popup .popup-container .popup-content .campus_cont .form_div div.pop_input_box {
            float: right;
            width: calc(100% - 160px); }
            .center-popup .popup-container .popup-content .campus_cont .form_div div.pop_input_box .input-component-box {
              width: calc(100% - 144px);
              float: left; }
              .center-popup .popup-container .popup-content .campus_cont .form_div div.pop_input_box .input-component-box:nth-of-type(2) {
                margin-top: 10px; }
              .center-popup .popup-container .popup-content .campus_cont .form_div div.pop_input_box .input-component-box + button {
                float: right; }
          .center-popup .popup-container .popup-content .campus_cont .form_div + .upload_alert {
            font-size: 12px;
            color: #a7a6ab;
            padding-left: 150px;
            margin-top: 30px; }
        .center-popup .popup-container .popup-content .campus_cont .btn_wrap {
          margin-top: 50px; }
          .center-popup .popup-container .popup-content .campus_cont .btn_wrap button {
            box-shadow: 0px 3px 3px rgba(118, 129, 229, 0.3); }

@media screen and (max-width: 1200px) {
  .center-popup .popup-container.pc_large {
    width: calc(100% - 32px); } }

@media screen and (max-width: 1024px) {
  .center-popup .popup-container.pc_medium {
    width: calc(100% - 32px); }
  .center-popup .popup-container.pc_small {
    width: calc(100% - 32px);
    padding: 25px 10px; }
  .m_fixed {
    align-items: initial;
    justify-content: initial;
    background: #fff; }
    .m_fixed .popup-container {
      width: 100vw;
      border-radius: initial;
      display: initial;
      align-items: initial;
      justify-content: initial;
      padding-top: 56px; }
      .m_fixed .popup-container .pop-fixed-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: #fff;
        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1); }
        .m_fixed .popup-container .pop-fixed-header .header-inner {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 56px;
          padding: 0 18px; }
          .m_fixed .popup-container .pop-fixed-header .header-inner .front {
            width: 15%;
            flex: 0.15; }
          .m_fixed .popup-container .pop-fixed-header .header-inner .center {
            width: 70%;
            flex: 0.7;
            font-size: 16px;
            font-weight: 700;
            line-height: 23px;
            text-align: center;
            color: #24212e; }
          .m_fixed .popup-container .pop-fixed-header .header-inner .back {
            display: flex;
            justify-content: flex-end;
            width: 15%;
            flex: 0.15; }
    .m_fixed .popup-content {
      width: 100%;
      overflow: auto;
      min-height: calc(100vh - 56px);
      max-height: initial; } }

@media screen and (max-width: 1024px) {
  .center-popup .popup-container .popup-content.scroll_none {
    padding: 30px 0;
    overflow: visible; }
  .center-popup .popup-container .popup-content .campus_setting.change_into_mo {
    padding: 30px 14.5% 96px; }
    .center-popup .popup-container .popup-content .campus_setting.change_into_mo li {
      float: none;
      width: 100%;
      height: auto;
      padding: 48px 0 50px;
      font-size: 20px;
      border-color: #09b9c6;
      border-width: 2px; }
      .center-popup .popup-container .popup-content .campus_setting.change_into_mo li:last-of-type {
        border-color: #7681e5; }
      .center-popup .popup-container .popup-content .campus_setting.change_into_mo li span {
        font-size: 12px;
        margin-bottom: 0; }
  .center-popup .popup-container .popup-content .campus_setting + button {
    min-width: 150px !important;
    text-align: center; }
  .center-popup .popup-container .popup-content .campus_cont.insert_token {
    padding: 30px 20px; }
    .center-popup .popup-container .popup-content .campus_cont.insert_token > div:first-of-type {
      padding-bottom: 0;
      border-bottom: 0;
      margin-bottom: 10px; }
      .center-popup .popup-container .popup-content .campus_cont.insert_token > div:first-of-type + div {
        margin-top: 0; }
    .center-popup .popup-container .popup-content .campus_cont.insert_token .form_div p {
      font-size: 10px;
      margin-bottom: 10px; }
    .center-popup .popup-container .popup-content .campus_cont.insert_token .form_div > span {
      float: none;
      display: block;
      font-size: 14px;
      margin-bottom: 6px;
      line-height: 1.5; }
    .center-popup .popup-container .popup-content .campus_cont.insert_token .form_div div.pop_input_box {
      float: none;
      width: 100%; }
    .center-popup .popup-container .popup-content .campus_cont.insert_token h2 {
      display: none; }
      .center-popup .popup-container .popup-content .campus_cont.insert_token h2 + p {
        font-size: 13px; }
    .center-popup .popup-container .popup-content .campus_cont.insert_token .btn_wrap {
      margin-top: 30px; }
      .center-popup .popup-container .popup-content .campus_cont.insert_token .btn_wrap button {
        height: 50px;
        line-height: 50px;
        font-size: 16px; }
  .center-popup .popup-container .popup-content #campus-info-change-popup.change_into_mo {
    padding: 30px 15px; }
    .center-popup .popup-container .popup-content #campus-info-change-popup.change_into_mo .title {
      padding-bottom: 10px; }
      .center-popup .popup-container .popup-content #campus-info-change-popup.change_into_mo .title h2 {
        display: none; }
      .center-popup .popup-container .popup-content #campus-info-change-popup.change_into_mo .title .title-desc p {
        font-size: 12px; }
        .center-popup .popup-container .popup-content #campus-info-change-popup.change_into_mo .title .title-desc p em {
          font-size: 10px;
          margin-top: 10px; }
    .center-popup .popup-container .popup-content #campus-info-change-popup.change_into_mo .popup-main-content .required {
      font-size: 10px;
      margin: 7px 0 10px; }
    .center-popup .popup-container .popup-content #campus-info-change-popup.change_into_mo .popup-main-content .popup-form-box {
      gap: 15px; }
      .center-popup .popup-container .popup-content #campus-info-change-popup.change_into_mo .popup-main-content .popup-form-box dl {
        flex-direction: column;
        gap: 7px; }
        .center-popup .popup-container .popup-content #campus-info-change-popup.change_into_mo .popup-main-content .popup-form-box dl dt {
          padding-top: 0; }
          .center-popup .popup-container .popup-content #campus-info-change-popup.change_into_mo .popup-main-content .popup-form-box dl dt span {
            font-size: 14px;
            line-height: 1.5; }
        .center-popup .popup-container .popup-content #campus-info-change-popup.change_into_mo .popup-main-content .popup-form-box dl dd .name {
          width: 100%; }
        .center-popup .popup-container .popup-content #campus-info-change-popup.change_into_mo .popup-main-content .popup-form-box dl dd .call-number .input-size {
          width: 33.33%; }
        .center-popup .popup-container .popup-content #campus-info-change-popup.change_into_mo .popup-main-content .popup-form-box dl dd .address .input-size {
          width: calc(100% - 144px); }
    .center-popup .popup-container .popup-content #campus-info-change-popup.change_into_mo .popup-main-content .btn-size button {
      height: 50px;
      font-size: 16px; }
    .center-popup .popup-container .popup-content #campus-info-change-popup.change_into_mo .input-component-box .input-wrapper {
      height: 44px; }
  .center-popup .popup-container .popup-content .campus_setting_wrap {
    padding: 0; } }

@media screen and (max-width: 1024px) {
  .center-popup .popup-container .popup-close img {
    width: 15px;
    height: 15px; } }

@media screen and (max-width: 1024px) {
  .center-popup .popup-container h1.outclass-mo-style {
    font-size: 14px;
    line-height: 1.5;
    margin: 17px 0 28px; } }

.campus-card {
  border-radius: 20px;
  background: #fff;
  width: 100%;
  height: 100%; }
  .campus-card.purple {
    border: 1px solid #7681e5; }
    .campus-card.purple .card-head {
      background: #7681e5; }
  .campus-card.blue {
    border: 1px solid #22a4ed; }
    .campus-card.blue .card-head {
      background: #22a4ed; }
  .campus-card.cyan {
    border: 1px solid #09b9c6; }
    .campus-card.cyan .card-head {
      background: #09b9c6; }
  .campus-card.orange {
    border: 1px solid #ffaa04; }
    .campus-card.orange .card-head {
      background: #ffaa04; }
  .campus-card.pink {
    border: 1px solid #ff84b0; }
    .campus-card.pink .card-head {
      background: #ff84b0; }
  .campus-card.red {
    border: 1px solid #ff5050; }
    .campus-card.red .card-head {
      background: #ff5050; }
  .campus-card .card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 34px 20px 27px;
    border-radius: 18px 18px 0 0; }
    .campus-card .card-head .card-class-name {
      display: flex;
      align-items: center;
      width: calc(100% - 27px);
      font-size: 26px;
      color: #fff; }
      .campus-card .card-head .card-class-name img {
        margin-right: 10px;
        margin-top: 3px; }
  .campus-card .card-body {
    padding: 23px 20px 29px; }
    .campus-card .card-body .teacher {
      display: flex;
      align-items: center;
      justify-content: space-between; }
      .campus-card .card-body .teacher .profile_wrap {
        display: flex;
        align-items: center; }
        .campus-card .card-body .teacher .profile_wrap .profile {
          width: 36px;
          height: 36px;
          border-radius: 50%; }
          .campus-card .card-body .teacher .profile_wrap .profile img {
            width: 100%;
            height: 100%;
            border-radius: 50%; }
        .campus-card .card-body .teacher .profile_wrap .desc {
          display: flex;
          align-items: center;
          margin-left: 10px; }
          .campus-card .card-body .teacher .profile_wrap .desc span {
            display: flex;
            align-items: center;
            font-size: 18px;
            white-space: pre; }
            .campus-card .card-body .teacher .profile_wrap .desc span.purple {
              color: #7681e5; }
            .campus-card .card-body .teacher .profile_wrap .desc span.orange {
              color: #ffaa04; }
            .campus-card .card-body .teacher .profile_wrap .desc span.blue {
              color: #22a4ed; }
            .campus-card .card-body .teacher .profile_wrap .desc span.cyan {
              color: #09b9c6; }
            .campus-card .card-body .teacher .profile_wrap .desc span.pink {
              color: #ff84b0; }
            .campus-card .card-body .teacher .profile_wrap .desc span.red {
              color: #ff5050; }
            .campus-card .card-body .teacher .profile_wrap .desc span:after {
              content: '';
              display: inline-block;
              width: 1px;
              height: 13px;
              background: #7c7a82;
              margin: 0 10px; }
        .campus-card .card-body .teacher .profile_wrap .teacher_count {
          font-size: 15px;
          line-height: 21px;
          color: #a7a6ab;
          white-space: pre;
          padding-right: 5px; }
      .campus-card .card-body .teacher .current_course {
        display: flex;
        align-items: center;
        line-height: 21px;
        font-weight: 500;
        font-size: 15px;
        color: #a7a6ab;
        white-space: pre; }
        .campus-card .card-body .teacher .current_course span {
          display: flex;
          align-items: center;
          margin-left: 6px;
          font-size: 18px;
          font-weight: 700; }
          .campus-card .card-body .teacher .current_course span.purple {
            color: #7681e5; }
          .campus-card .card-body .teacher .current_course span.orange {
            color: #ffaa04; }
          .campus-card .card-body .teacher .current_course span.blue {
            color: #22a4ed; }
          .campus-card .card-body .teacher .current_course span.cyan {
            color: #09b9c6; }
          .campus-card .card-body .teacher .current_course span.pink {
            color: #ff84b0; }
          .campus-card .card-body .teacher .current_course span.red {
            color: #ff5050; }
    .campus-card .card-body ul {
      margin-top: 30px;
      min-height: 126px; }
      .campus-card .card-body ul li {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between; }
        .campus-card .card-body ul li:not(:last-of-type) {
          margin-bottom: 20px;
          padding-bottom: 15px;
          border-bottom: 1px solid #d3d3d5; }
        .campus-card .card-body ul li.no-data {
          display: block !important;
          padding: 46px; }
        .campus-card .card-body ul li a {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center; }
          .campus-card .card-body ul li a .title {
            font-weight: 500;
            font-size: 15px;
            color: #24212e;
            width: 60%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap; }
          .campus-card .card-body ul li a .date {
            font-size: 12px;
            color: #a7a6ab;
            text-align: right;
            width: 35%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap; }
        .campus-card .card-body ul li .title {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap; }
        .campus-card .card-body ul li .date {
          white-space: nowrap; }
  .campus-card.free-class .card-head > span {
    font-size: 18px;
    font-weight: 700;
    color: #fff; }
  .campus-card.free-class .card-body ul {
    margin-top: 0; }
    .campus-card.free-class .card-body ul li {
      border-bottom: 0;
      flex-direction: column;
      align-items: flex-start; }
      .campus-card.free-class .card-body ul li .free-class-name {
        width: 100%;
        padding-bottom: 6px;
        margin-bottom: 6px;
        border-bottom: 1px solid #d3d3d5;
        font-size: 15px;
        font-weight: 700;
        color: #22a4ed; }
      .campus-card.free-class .card-body ul li > div:nth-of-type(2) {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center; }
    .campus-card.free-class .card-body ul.nodata {
      height: 100%; }
      .campus-card.free-class .card-body ul.nodata li {
        height: 100%;
        font-size: 14px;
        color: #d3d3d5;
        display: flex;
        justify-content: center;
        align-items: center; }
  .campus-card.myword-card .card-head .card-class-name {
    width: auto;
    display: flex;
    align-items: center;
    font-size: 26px;
    color: #fff; }
    .campus-card.myword-card .card-head .card-class-name img {
      margin-right: 10px;
      margin-top: 3px; }
  .campus-card.myword-card .card-head > span {
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    font-family: 'Inter', 'Noto Sans KR'; }
    .campus-card.myword-card .card-head > span em {
      font-size: 18px;
      font-weight: bold;
      font-family: inherit;
      color: inherit;
      padding-left: 10px;
      border-left: 1px solid #d3d3d5;
      margin-left: 10px; }
  .campus-card.myword-card .card-body ul {
    margin-top: 0; }
    .campus-card.myword-card .card-body ul li {
      display: flex;
      justify-content: space-between;
      cursor: pointer; }
      .campus-card.myword-card .card-body ul li .myword-english {
        font-size: 15px;
        font-weight: 500;
        color: #24212e;
        font-family: 'Inter', 'Noto Sans KR';
        width: 60%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; }
      .campus-card.myword-card .card-body ul li .myword-korean {
        font-size: 12px;
        font-weight: 400;
        color: #a7a6ab;
        width: 35%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: right; }
    .campus-card.myword-card .card-body ul.nodata {
      height: 100%; }
      .campus-card.myword-card .card-body ul.nodata li {
        height: 100%;
        font-size: 14px;
        color: #d3d3d5;
        display: flex;
        justify-content: center;
        align-items: center; }
  .campus-card.payclass-card .card-head > span {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    font-family: 'Inter', 'Noto Sans KR'; }
  .campus-card.payclass-card .card-body .class-title {
    font-size: 15px;
    font-weight: 700;
    color: #7681e5; }

@media screen and (max-width: 1800px) {
  .card-head.column {
    flex-direction: column;
    align-items: flex-start;
    height: 92px;
    padding: 15px 20px;
    justify-content: center;
    gap: 9px; } }

@media screen and (max-width: 1024px) {
  .campus-card {
    border: none !important; }
    .campus-card .card-head {
      flex-direction: column;
      align-items: flex-start;
      border-radius: 20px;
      padding: 14px 15px; }
      .campus-card .card-head .card-class-name {
        font-size: 18px;
        margin-bottom: 5px;
        width: 100%; }
        .campus-card .card-head .card-class-name span {
          font-weight: 500; }
        .campus-card .card-head .card-class-name img {
          margin: 0px;
          width: 18px;
          height: 18px; }
      .campus-card .card-head > span {
        display: flex;
        align-items: center;
        font-weight: 500;
        color: #ffffff; }
        .campus-card .card-head > span i {
          width: 2px;
          height: 10px;
          background: #fff;
          margin: 0 5px; }
    .campus-card .card-body {
      display: none; } }

#academic-management-list {
  background: #ffffff;
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  padding: 8px 24px;
  height: 100%;
  overflow-y: auto; }
  #academic-management-list ul li {
    cursor: pointer; }
    #academic-management-list ul li .list-head {
      display: flex;
      align-items: center;
      padding: 16px 0;
      border-bottom: 1px solid #e9e9ea; }
      #academic-management-list ul li .list-head .title {
        width: calc(100% - 48px);
        position: relative; }
        #academic-management-list ul li .list-head .title .tooltip {
          visibility: hidden;
          opacity: 0;
          transition: opacity 0.4s;
          position: absolute;
          top: 25px;
          left: 0;
          padding: 6px 10px;
          border-radius: 6px;
          border: 1px solid #e9e9ea;
          background-color: #fff;
          color: #7c7a82; }
        #academic-management-list ul li .list-head .title:hover .tooltip {
          visibility: visible;
          opacity: 1; }
        #academic-management-list ul li .list-head .title h2 {
          font-size: 16px;
          font-weight: 500;
          line-height: 24px;
          color: #504d58; }
        #academic-management-list ul li .list-head .title span {
          font-weight: 400;
          font-size: 13px;
          line-height: 20px;
          color: #7c7a82; }
      #academic-management-list ul li .list-head button {
        padding: 15px; }
      #academic-management-list ul li .list-head.turn button img {
        transform: rotate(180deg); }
    #academic-management-list ul li .list-body {
      padding: 25px 0;
      border-top: 1px solid #e3e2f0; }
      #academic-management-list ul li .list-body .total {
        margin-bottom: 25px; }
        #academic-management-list ul li .list-body .total p {
          text-align: center;
          font-weight: bold;
          font-size: 16px;
          line-height: 23px;
          color: #24212e; }
          #academic-management-list ul li .list-body .total p em {
            font-size: inherit;
            font-weight: inherit;
            color: #09b9c6; }
      #academic-management-list ul li .list-body ul {
        overflow: auto; }
        #academic-management-list ul li .list-body ul li {
          display: flex;
          align-items: flex-end;
          padding: 13px 25px;
          cursor: pointer; }
          #academic-management-list ul li .list-body ul li .st-id {
            margin-left: 5px; }
          #academic-management-list ul li .list-body ul li.on {
            background: #09b9c6;
            box-shadow: 0px 3px 4px rgba(104, 154, 170, 0.3);
            border-radius: 10px; }
            #academic-management-list ul li .list-body ul li.on .st-name {
              color: #fff; }
            #academic-management-list ul li .list-body ul li.on .st-id {
              color: #fff; }
          #academic-management-list ul li .list-body ul li.academy-item:hover {
            background: #09b9c6;
            box-shadow: 0px 3px 4px rgba(104, 154, 170, 0.3);
            border-radius: 10px; }
            #academic-management-list ul li .list-body ul li.academy-item:hover .st-name {
              color: #fff; }
            #academic-management-list ul li .list-body ul li.academy-item:hover .st-id {
              color: #fff; }
          #academic-management-list ul li .list-body ul li .st-name {
            font-size: 20px;
            color: #a7a6ab;
            line-height: 1.4; }
          #academic-management-list ul li .list-body ul li .st-id {
            font-size: 15px;
            color: #a7a6ab;
            line-height: 1.4; }

.teacher-academy-card {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; }
  .teacher-academy-card .academy-info-box {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 250px;
    border-radius: 15px;
    padding: 30px 13px 20px;
    background-color: rgba(36, 33, 46, 0.6); }
    .teacher-academy-card .academy-info-box .academy-name {
      display: flex;
      align-items: center;
      padding-bottom: 20px;
      margin-bottom: 10px;
      border-bottom: 1px solid #fff; }
      .teacher-academy-card .academy-info-box .academy-name span {
        font-size: 16px;
        line-height: 23px;
        color: #ffffff;
        max-width: calc(100% - 18px);
        width: initial; }
        .teacher-academy-card .academy-info-box .academy-name span i {
          display: inline-block;
          width: 14px;
          height: 14px;
          background-repeat: no-repeat;
          margin-left: 5px;
          cursor: pointer; }
          .teacher-academy-card .academy-info-box .academy-name span i.line {
            background: url("/img/icon/icon_star_line.svg");
            background-size: 100%;
            background-size: contain;
            background-repeat: no-repeat; }
          .teacher-academy-card .academy-info-box .academy-name span i.fill {
            background: url("/img/icon/icon_star_fill.svg");
            background-size: 100%;
            background-size: contain;
            background-repeat: no-repeat; }
      .teacher-academy-card .academy-info-box .academy-name img {
        width: 16.89px;
        height: 16px;
        margin-left: 5px; }
    .teacher-academy-card .academy-info-box .infobox {
      display: flex;
      flex-direction: column;
      flex: 1; }
      .teacher-academy-card .academy-info-box .infobox .info-content {
        display: flex;
        justify-content: space-between;
        flex: 1; }
        .teacher-academy-card .academy-info-box .infobox .info-content .current-status.after_none span::after {
          display: none !important; }
        .teacher-academy-card .academy-info-box .infobox .info-content .academy-class {
          font-size: 20px;
          color: #ffffff;
          width: initial;
          max-width: calc(100% - 110px); }
        .teacher-academy-card .academy-info-box .infobox .info-content .academy-desc {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          justify-content: flex-start;
          gap: 6.5px; }
          .teacher-academy-card .academy-info-box .infobox .info-content .academy-desc .point {
            font-size: 20px;
            color: #fff; }
            .teacher-academy-card .academy-info-box .infobox .info-content .academy-desc .point i {
              font-weight: inherit;
              font-size: inherit;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent; }
              .teacher-academy-card .academy-info-box .infobox .info-content .academy-desc .point i.book {
                background-image: linear-gradient(to right, #ff7a00, #896bde); }
              .teacher-academy-card .academy-info-box .infobox .info-content .academy-desc .point i.student {
                background-image: linear-gradient(to right, #22a4ed, #22a4ed); }
              .teacher-academy-card .academy-info-box .infobox .info-content .academy-desc .point i.free {
                background-image: linear-gradient(to right, #231055, #231055); }
              .teacher-academy-card .academy-info-box .infobox .info-content .academy-desc .point i.premium {
                background-image: linear-gradient(to right, #35e77d, #34b2e9); }
          .teacher-academy-card .academy-info-box .infobox .info-content .academy-desc .member {
            display: flex;
            align-items: center; }
            .teacher-academy-card .academy-info-box .infobox .info-content .academy-desc .member span {
              display: flex;
              align-items: center;
              font-size: 12px;
              color: #d3d3d5; }
              .teacher-academy-card .academy-info-box .infobox .info-content .academy-desc .member span em {
                font-size: inherit;
                color: #fff;
                margin-left: 2px; }
              .teacher-academy-card .academy-info-box .infobox .info-content .academy-desc .member span:first-of-type:after {
                content: '';
                display: inline-block;
                width: 1px;
                height: 12px;
                background: #d3d3d5;
                margin: 0 5px; }
          .teacher-academy-card .academy-info-box .infobox .info-content .academy-desc .total-member {
            font-size: 12px;
            color: #09b9c6; }
      .teacher-academy-card .academy-info-box .infobox .wiget {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: auto; }
        .teacher-academy-card .academy-info-box .infobox .wiget button {
          display: flex;
          align-items: center;
          justify-content: center; }
          .teacher-academy-card .academy-info-box .infobox .wiget button.camera {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background-color: rgba(233, 233, 234, 0.5); }
          .teacher-academy-card .academy-info-box .infobox .wiget button.teacher-add {
            width: 105px;
            height: 35px;
            color: #fff;
            font-size: 12px;
            background-color: rgba(233, 233, 234, 0.5);
            border-radius: 10px; }
            .teacher-academy-card .academy-info-box .infobox .wiget button.teacher-add img {
              margin-left: 5px; }
  .teacher-academy-card .academy-info-box.student {
    padding: 15px; }
    .teacher-academy-card .academy-info-box.student .academy-name {
      justify-content: space-between;
      padding-bottom: 10px; }
      .teacher-academy-card .academy-info-box.student .academy-name img {
        width: 16px;
        height: 8px; }
      .teacher-academy-card .academy-info-box.student .academy-name > .name-title {
        display: flex;
        align-items: center; }
        .teacher-academy-card .academy-info-box.student .academy-name > .name-title .label {
          margin-right: 5px;
          background: #ffffff;
          border-radius: 5px;
          padding: 4px 10px 3px;
          border: 1px solid #24212e;
          font-size: 12px;
          color: #24212e; }
          .teacher-academy-card .academy-info-box.student .academy-name > .name-title .label.cedu {
            padding: 0 10px; }
    .teacher-academy-card .academy-info-box.student .infobox .info-content .current-status span {
      position: relative;
      font-size: 13px;
      color: #fff; }
      .teacher-academy-card .academy-info-box.student .infobox .info-content .current-status span b {
        margin-left: 5px; }
      .teacher-academy-card .academy-info-box.student .infobox .info-content .current-status span:first-of-type:after {
        content: '';
        display: inline-block;
        vertical-align: bottom;
        width: 1px;
        height: 16px;
        background: #fff;
        margin: 0 10px; }
    .teacher-academy-card .academy-info-box.student .infobox .wiget p {
      color: #fff;
      line-height: 20px; }

#myclass-table .table-scroll-box .table-box {
  overflow-x: auto; }
  #myclass-table .table-scroll-box .table-box > table {
    z-index: 11; }
  #myclass-table .table-scroll-box .table-box table {
    width: max-content;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: #fff; }
    #myclass-table .table-scroll-box .table-box table thead tr.test-title th {
      width: 200px;
      padding: 10px 20px 18px;
      position: relative; }
      #myclass-table .table-scroll-box .table-box table thead tr.test-title th:not(:first-of-type) {
        border-left: 1px solid #d3d3d5;
        width: 250px; }
        #myclass-table .table-scroll-box .table-box table thead tr.test-title th:not(:first-of-type):hover .tooltip {
          visibility: visible;
          opacity: 1; }
      #myclass-table .table-scroll-box .table-box table thead tr.test-title th:first-of-type {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        left: 0;
        z-index: 10;
        background-color: #fff; }
      #myclass-table .table-scroll-box .table-box table thead tr.test-title th h3 {
        max-width: 200px;
        font-weight: bold;
        font-size: 18px;
        line-height: 26px;
        color: #24212e; }
        #myclass-table .table-scroll-box .table-box table thead tr.test-title th h3 + .tooltip {
          visibility: hidden;
          opacity: 0;
          transition: opacity 0.4s;
          position: absolute;
          top: 40px;
          left: 20;
          padding: 6px 10px;
          border-radius: 6px;
          border: 1px solid #e9e9ea;
          background-color: #fff;
          color: #7c7a82; }
    #myclass-table .table-scroll-box .table-box table thead tr.to-do th {
      padding: 11px 0;
      width: 200px; }
      #myclass-table .table-scroll-box .table-box table thead tr.to-do th:first-of-type {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        left: 0;
        background-color: #fff; }
      #myclass-table .table-scroll-box .table-box table thead tr.to-do th:not(:first-of-type) {
        border-left: 1px solid #d3d3d5;
        width: 250px; }
      #myclass-table .table-scroll-box .table-box table thead tr.to-do th:first-of-type {
        width: 200px; }
      #myclass-table .table-scroll-box .table-box table thead tr.to-do th > div {
        display: flex; }
        #myclass-table .table-scroll-box .table-box table thead tr.to-do th > div > div {
          flex: 1;
          font-size: 15px;
          color: #7c7a82; }

#myclass-table .table-scroll-box .table-body-box {
  width: max-content;
  max-height: 730px;
  padding-bottom: 5px; }
  #myclass-table .table-scroll-box .table-body-box table {
    border-bottom: 1px solid #d3d3d5;
    width: max-content; }
    #myclass-table .table-scroll-box .table-body-box table tbody {
      padding-top: 11px; }
      #myclass-table .table-scroll-box .table-body-box table tbody tr:first-of-type td {
        padding-top: 25px; }
      #myclass-table .table-scroll-box .table-body-box table tbody tr td:first-child {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        z-index: 10;
        background-color: #fff; }
      #myclass-table .table-scroll-box .table-body-box table tbody tr .name {
        width: 200px;
        padding: 14px 18px; }
        #myclass-table .table-scroll-box .table-body-box table tbody tr .name p {
          display: flex;
          align-items: center;
          font-size: 15px;
          color: #24212e;
          text-align: center;
          width: 160px; }
        #myclass-table .table-scroll-box .table-body-box table tbody tr .name span {
          flex: 1; }
        #myclass-table .table-scroll-box .table-body-box table tbody tr .name em {
          flex: 1;
          display: inline-block;
          font-size: inherit;
          color: #7c7a82;
          margin-left: 10px;
          text-align: left; }
      #myclass-table .table-scroll-box .table-body-box table tbody tr .to-do-check {
        width: 250px;
        padding: 14px 0;
        border-left: 1px solid #d3d3d5; }
        #myclass-table .table-scroll-box .table-body-box table tbody tr .to-do-check:not(:last-of-type) {
          border-right: 1px solid #d3d3d5; }
        #myclass-table .table-scroll-box .table-body-box table tbody tr .to-do-check > div {
          display: flex; }
          #myclass-table .table-scroll-box .table-body-box table tbody tr .to-do-check > div > div {
            display: flex;
            justify-content: center;
            flex: 1;
            cursor: pointer;
            position: relative; }
            #myclass-table .table-scroll-box .table-body-box table tbody tr .to-do-check > div > div .reset-btn {
              display: flex;
              align-items: center;
              justify-content: center;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              background: white;
              border: 1px solid #bdbdbd;
              box-sizing: border-box;
              box-shadow: 0px 3px 4px rgba(104, 154, 170, 0.3);
              border-radius: 10px;
              font-size: 12px;
              font-weight: 600;
              width: 42px;
              height: 42px;
              color: #7c7a82; }

#myclass-table .reference {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-right: 15px; }
  #myclass-table .reference p {
    font-weight: normal;
    font-size: 12px;
    line-height: 17px;
    color: #ff5050;
    margin-bottom: 10px; }
  #myclass-table .reference ul {
    display: flex;
    align-items: center;
    gap: 24px; }
    #myclass-table .reference ul li {
      display: flex;
      align-items: center;
      font-weight: normal;
      font-size: 15px;
      line-height: 22px;
      color: #a7a6ab; }
      #myclass-table .reference ul li img {
        margin-left: 6px; }

@media screen and (max-width: 1050px) {
  #myclass-table .reference ul li {
    flex-direction: column-reverse;
    font-size: 12px; }
    #myclass-table .reference ul li img {
      margin-bottom: 5px; } }

@media screen and (max-width: 1024px) {
  #myclass-table .table-scroll-box {
    overflow: initial;
    margin-bottom: 10px; }
    #myclass-table .table-scroll-box .table-box.plus-width {
      width: calc(100% + 8px); }
    #myclass-table .table-scroll-box .table-box table {
      width: 100%; }
      #myclass-table .table-scroll-box .table-box table thead tr.to-do th:first-of-type {
        width: 40%; }
      #myclass-table .table-scroll-box .table-box table thead tr.to-do th:not(:first-of-type) {
        width: 60%; }
    #myclass-table .table-scroll-box .table-body-box {
      width: calc(100% + 0px);
      max-height: calc(100vh - 360px);
      padding-bottom: 0; }
      #myclass-table .table-scroll-box .table-body-box table {
        width: 100%;
        border-bottom: none; }
        #myclass-table .table-scroll-box .table-body-box table tbody tr .name {
          width: 40%;
          padding: 14px 0; }
          #myclass-table .table-scroll-box .table-body-box table tbody tr .name p {
            width: 90%; }
            #myclass-table .table-scroll-box .table-body-box table tbody tr .name p em {
              width: 50%; }
        #myclass-table .table-scroll-box .table-body-box table tbody tr .to-do-check {
          position: relative;
          background-color: #fff;
          width: 60%; }
  #myclass-table .reference {
    padding-right: 0;
    align-items: flex-end; }
    #myclass-table .reference > div {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-end; }
    #myclass-table .reference ul {
      width: 100%;
      justify-content: center; }
      #myclass-table .reference ul li img {
        margin-left: 0; } }

@media screen and (max-width: 320px) {
  #myclass-table .reference ul {
    gap: 10px; } }

.omr-rating {
  display: flex; }
  .omr-rating > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    padding: 7px 0; }
    .omr-rating > div > div {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border: 1px solid #a7a6ab;
      box-sizing: border-box;
      border-radius: 50%;
      margin-bottom: 4px; }
      .omr-rating > div > div.non_border {
        border: none; }
      .omr-rating > div > div > span {
        font-size: 25px;
        color: #a7a6ab; }
    .omr-rating > div > span {
      font-size: 15px;
      color: #a7a6ab;
      line-height: 30px; }
    .omr-rating > div.on > div {
      background: #09b9c6;
      border: 1px solid #09b9c6; }
      .omr-rating > div.on > div > span {
        color: #fff; }
    .omr-rating > div.on > span {
      color: #09b9c6;
      font-weight: 600; }
    .omr-rating > div.right-an > div {
      border-color: #ff5050; }
      .omr-rating > div.right-an > div span {
        color: #ff5050; }
  .omr-rating.wrong {
    border: 3px solid #ff5050 !important; }
  .omr-rating.correct {
    border: 3px solid #09b9c6 !important; }
    .omr-rating.correct > div > span {
      color: #ff5050; }
    .omr-rating.correct > span {
      color: #ff5050;
      font-weight: 600; }

@media screen and (max-width: 1024px) {
  .omr-rating {
    margin-top: 20px; }
    .omr-rating > div > span {
      font-size: 12px; }
    .omr-rating > div > div {
      width: 24px;
      height: 24px; }
      .omr-rating > div > div img {
        width: 100%;
        height: 100%; }
      .omr-rating > div > div span {
        font-size: 12px;
        transform: translate(0px); } }

.swiper-date-box {
  position: relative;
  width: 100%;
  padding: 0 50px; }
  .swiper-date-box.day {
    padding: 0; }
  .swiper-date-box.badge {
    padding-bottom: 10px; }
  .swiper-date-box.avg .swiper-pagination {
    display: block; }
  .swiper-date-box .navigation-arrows-box .arrow-btn {
    width: 12px;
    height: 23px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
    bottom: -10px; }
    .swiper-date-box .navigation-arrows-box .arrow-btn img {
      width: 100%; }
    .swiper-date-box .navigation-arrows-box .arrow-btn.prev {
      left: -0px; }
    .swiper-date-box .navigation-arrows-box .arrow-btn.next {
      right: -0px; }
  .swiper-date-box .date-btn {
    width: 100%;
    padding: 12px 0px 11px;
    background: #ffffff;
    box-sizing: border-box;
    border-radius: 10px;
    text-align: center;
    font-size: 15px;
    color: #7c7a82;
    border: 1px solid #09b9c6; }
    .swiper-date-box .date-btn.on {
      color: #fff;
      background: #09b9c6;
      border: 1px solid #09b9c6;
      box-shadow: 0px 3px 4px rgba(104, 154, 170, 0.3); }
  .swiper-date-box .avg-form {
    display: flex;
    align-items: center;
    gap: 10px; }
    .swiper-date-box .avg-form .label {
      display: flex;
      gap: 5px;
      background: #f1f2fc;
      border-radius: 10px;
      padding: 5px 15px;
      min-width: 90px; }
      .swiper-date-box .avg-form .label span {
        color: #7681e5; }
        .swiper-date-box .avg-form .label span:first-of-type {
          padding-right: 5px;
          border-right: 2px solid #7681e5;
          margin-right: 5px; }
    .swiper-date-box .avg-form p {
      font-size: 22px;
      color: #a7a6ab; }
      .swiper-date-box .avg-form p em {
        font-size: inherit;
        color: #504d58; }
  .swiper-date-box .badge-form {
    display: flex;
    justify-content: center;
    border: 0.25px solid #a7a6ab;
    border-radius: 15px;
    padding: 20px; }
    .swiper-date-box .badge-form > div {
      display: flex;
      align-items: center; }
      .swiper-date-box .badge-form > div img {
        margin-right: 40px; }
      .swiper-date-box .badge-form > div > div h3 {
        font-size: 18px;
        line-height: 27px;
        color: #504d58;
        margin-bottom: 8px; }
      .swiper-date-box .badge-form > div > div span {
        font-size: 12px;
        line-height: 18px;
        color: #a7a6ab; }
      .swiper-date-box .badge-form > div > div p {
        font-size: 12px;
        line-height: 15px;
        color: #24212e; }
  .swiper-date-box.height50 {
    height: 50px; }
    .swiper-date-box.height50 > .swiper-container {
      height: 100%; }
  .swiper-date-box .swiper-container {
    padding: 3px 0; }

.badge-form {
  display: flex;
  justify-content: center;
  border: 0.25px solid #a7a6ab;
  border-radius: 15px;
  padding: 20px; }
  .badge-form > div {
    display: flex;
    align-items: center; }
    .badge-form > div img {
      margin-right: 40px; }
    .badge-form > div > div h3 {
      font-size: 18px;
      line-height: 27px;
      color: #504d58;
      margin-bottom: 8px; }
    .badge-form > div > div span {
      font-size: 12px;
      line-height: 18px;
      color: #a7a6ab; }
    .badge-form > div > div p {
      font-size: 12px;
      line-height: 15px;
      color: #24212e; }

.print_avg_wrap {
  display: flex;
  flex-wrap: wrap; }
  .print_avg_wrap .avg-form {
    width: calc(25% - 15px);
    margin-right: 20px;
    margin-bottom: 20px;
    white-space: nowrap; }
    .print_avg_wrap .avg-form:nth-child(4n) {
      margin-right: 0; }

.print_badge_wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap; }
  .print_badge_wrap .badge-form {
    width: calc(20% - 16px);
    margin-right: 20px;
    margin-bottom: 20px; }
    .print_badge_wrap .badge-form * {
      white-space: nowrap; }
    .print_badge_wrap .badge-form:nth-child(5n) {
      margin-right: 0; }

@media screen and (max-width: 1450px) {
  .print_badge_wrap .badge-form {
    width: calc(25% - 15px); }
    .print_badge_wrap .badge-form:nth-child(5n) {
      margin-right: 20px; }
    .print_badge_wrap .badge-form:nth-child(4n) {
      margin-right: 0; } }

@media screen and (max-width: 1250px) {
  .print_avg_wrap .avg-form {
    width: calc(33% - 10px); }
    .print_avg_wrap .avg-form:nth-child(4n) {
      margin-right: 20px; }
    .print_avg_wrap .avg-form:nth-child(3n) {
      margin-right: 0px; } }

@media screen and (max-width: 1150px) {
  .print_badge_wrap .badge-form {
    width: calc(33% - 4px);
    margin-right: 10px; }
    .print_badge_wrap .badge-form:nth-child(4n), .print_badge_wrap .badge-form:nth-child(5n) {
      margin-right: 10px; }
    .print_badge_wrap .badge-form:nth-child(3n) {
      margin-right: 0; } }

#answer-rate-list {
  padding: 50px 16px 0; }
  #answer-rate-list .title {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d3d3d5;
    padding-bottom: 15px;
    margin-bottom: 20px; }
    #answer-rate-list .title img {
      width: 20px;
      height: 20px;
      margin-right: 6px; }
    #answer-rate-list .title span {
      color: #ff84b0;
      font-size: 20px; }
      #answer-rate-list .title span.cyan {
        color: #09b9c6; }
  #answer-rate-list .content {
    margin-top: 20px; }
    #answer-rate-list .content ul {
      display: flex;
      flex-direction: column;
      max-height: 300px;
      overflow: auto; }
      #answer-rate-list .content ul li {
        padding: 12px 0;
        text-align: center;
        color: #24212e; }

.study-chart-swipe {
  padding: 0 40px; }
  .study-chart-swipe .card {
    background: #ffffff;
    border: 1px solid #6bd5dd;
    box-sizing: border-box;
    border-radius: 15px; }
  .study-chart-swipe .chapter-box .date {
    font-size: 17px;
    line-height: 21px;
    color: #09b9c6;
    margin-bottom: 15px; }
  .study-chart-swipe .chapter-box .chapter-card {
    padding: 30px 45px;
    margin-bottom: 25px; }
    .study-chart-swipe .chapter-box .chapter-card .chapter-list {
      display: flex;
      align-items: flex-start; }
      .study-chart-swipe .chapter-box .chapter-card .chapter-list:not(:last-of-type) {
        padding-bottom: 25px;
        border-bottom: 1px solid #d3d3d5;
        margin-bottom: 14px; }
      .study-chart-swipe .chapter-box .chapter-card .chapter-list .left {
        display: flex;
        align-items: center;
        width: 40%;
        margin-top: 8px;
        flex: 1; }
        .study-chart-swipe .chapter-box .chapter-card .chapter-list .left .type {
          min-width: 130px;
          display: flex;
          align-items: center;
          margin-right: 5px; }
          .study-chart-swipe .chapter-box .chapter-card .chapter-list .left .type .mark {
            background: #ffffff;
            font-size: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 25px;
            padding: 0 15px;
            color: #0f9ba5;
            border: 2px solid #0f9ba5;
            box-sizing: border-box;
            border-radius: 20px;
            margin-right: 5px; }
          .study-chart-swipe .chapter-box .chapter-card .chapter-list .left .type p {
            font-size: 16px;
            color: #7c7a82; }
            .study-chart-swipe .chapter-box .chapter-card .chapter-list .left .type p em {
              font-size: inherit;
              font-weight: inherit;
              color: #7681e5; }
        .study-chart-swipe .chapter-box .chapter-card .chapter-list .left h3 {
          font-size: 20px;
          color: #24212e;
          width: 50%;
          flex: 1; }
      .study-chart-swipe .chapter-box .chapter-card .chapter-list .right {
        flex: 1; }
        .study-chart-swipe .chapter-box .chapter-card .chapter-list .right .list-content {
          display: flex;
          justify-content: flex-end; }
          .study-chart-swipe .chapter-box .chapter-card .chapter-list .right .list-content .video {
            padding-right: 30px; }
          .study-chart-swipe .chapter-box .chapter-card .chapter-list .right .list-content > div {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center; }
            .study-chart-swipe .chapter-box .chapter-card .chapter-list .right .list-content > div.process, .study-chart-swipe .chapter-box .chapter-card .chapter-list .right .list-content > div.score {
              flex: 1;
              min-width: 50px; }
            .study-chart-swipe .chapter-box .chapter-card .chapter-list .right .list-content > div.al-clinic {
              flex: 1;
              min-width: 60px; }
            .study-chart-swipe .chapter-box .chapter-card .chapter-list .right .list-content > div > span {
              font-size: 12px;
              line-height: 17px;
              color: #0f9ba5; }
            .study-chart-swipe .chapter-box .chapter-card .chapter-list .right .list-content > div p {
              font-size: 16px;
              line-height: 19px;
              text-align: center;
              color: #504d58; }
            .study-chart-swipe .chapter-box .chapter-card .chapter-list .right .list-content > div button {
              display: flex;
              align-items: center;
              justify-content: center;
              font-weight: bold;
              font-size: 10px;
              color: #ff84b0;
              background: #ffffff;
              border: 1px solid #ff84b0;
              box-sizing: border-box;
              border-radius: 5px;
              padding: 5px 10px;
              min-width: 78px; }
            .study-chart-swipe .chapter-box .chapter-card .chapter-list .right .list-content > div .progress-bar {
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;
              min-width: 170px;
              transform: translateX(19px); }
              .study-chart-swipe .chapter-box .chapter-card .chapter-list .right .list-content > div .progress-bar .bar {
                width: 80%;
                height: 10px;
                border-radius: 50px;
                background: #eff0f6; }
                .study-chart-swipe .chapter-box .chapter-card .chapter-list .right .list-content > div .progress-bar .bar .track {
                  height: 100%;
                  border-radius: inherit;
                  background: #7c7a82; }
              .study-chart-swipe .chapter-box .chapter-card .chapter-list .right .list-content > div .progress-bar span {
                font-weight: bold;
                font-size: 14px;
                margin-left: 2px;
                transform: translateY(-1px);
                white-space: nowrap; }
        .study-chart-swipe .chapter-box .chapter-card .chapter-list .right.no_video {
          flex: none;
          width: 39%;
          margin-left: 10px; }
  .study-chart-swipe .chart-card-box {
    display: flex;
    justify-content: center;
    gap: 20px 25px; }
    .study-chart-swipe .chart-card-box .chart-card {
      width: 30%; }

.main-btn-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%; }

.pc-main-button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 20px;
  width: 100%;
  border-radius: 15px;
  transition: 0.21s;
  margin: 0 auto; }
  .pc-main-button.h70 {
    height: 70px; }
  .pc-main-button.main {
    height: 65px; }
  .pc-main-button.h30 {
    height: 30px;
    font-size: 13px;
    color: #504d58; }
  .pc-main-button.side {
    font-size: 14px;
    font-weight: normal;
    height: 48px;
    border-radius: 10px; }
  .pc-main-button.side2 {
    font-size: 20px;
    font-weight: 700;
    height: 48px;
    border-radius: 10px; }
  .pc-main-button.alert {
    border-radius: 10px;
    height: 40px;
    font-weight: bold;
    font-size: 14px;
    width: 106px; }
  .pc-main-button.purple {
    color: #fff;
    background: #7681e5;
    box-shadow: 0px 3px 3px rgba(118, 129, 229, 0.3); }
  .pc-main-button.purple_disabled {
    color: #fff;
    background: #c8cdf5; }
  .pc-main-button.disabled {
    color: #fff;
    background: #e9e9ea; }
  .pc-main-button.disabled2 {
    color: #fff;
    background: #a7a6ab; }
  .pc-main-button.reverse {
    color: #7681e5;
    background: #fff;
    border: 1px solid #7681e5;
    box-sizing: border-box;
    box-shadow: 0px 3px 3px rgba(118, 129, 229, 0.3);
    transition: 0.21; }
    .pc-main-button.reverse.reverse-hover:hover {
      color: #fff;
      background: #7681e5; }
  .pc-main-button.reverse-black {
    color: #504d58;
    background: #fff;
    border: 1px solid #504d58;
    box-sizing: border-box;
    box-shadow: initial; }
  .pc-main-button.reverse-red {
    color: #ff5050;
    background: #fff;
    box-sizing: border-box;
    border: 1px solid #ff5050;
    box-shadow: 0px 3px 3px rgba(118, 129, 229, 0.3); }
  .pc-main-button.reverse-cyan {
    color: #09b9c6;
    background: #fff;
    box-sizing: border-box;
    border: 1px solid #09b9c6; }
  .pc-main-button.reverse-gray {
    color: #a7a6ab;
    background: #fff;
    box-sizing: border-box;
    border: 1px solid #a7a6ab; }
  .pc-main-button.line-gray {
    color: #504d58;
    background: #fff;
    box-sizing: border-box;
    border: 1px solid #a7a6ab; }
  .pc-main-button.cyan {
    color: #fff;
    background: #09b9c6; }
  .pc-main-button.red {
    color: #fff;
    background: #ff5050; }
  .pc-main-button.pink {
    color: #fff;
    background: #ff84b0;
    box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.12); }
  .pc-main-button img {
    margin-left: 5px; }

@media screen and (max-width: 1024px) {
  .pc-main-button.x-small {
    font-size: 12px;
    height: 35px !important; }
  .pc-main-button.small {
    font-size: 13px;
    height: 40px !important;
    border-radius: 8px; }
  .pc-main-button.normal {
    font-size: 16px;
    height: 50px !important;
    border-radius: 10px; }
  .pc-main-button.big {
    font-size: 16px;
    height: 60px !important; }
  .pc-main-button.static {
    position: static;
    box-shadow: 0px 3px 3px rgba(118, 129, 229, 0.3);
    border-radius: 10px; }
  .pc-main-button.fixed {
    font-size: 16px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    box-shadow: 0px -5px 42px rgba(60, 142, 177, 0.15);
    border-radius: 20px 20px 0px 0px;
    /* ios fixed 이슈 관련 */ } }
  @media screen and (max-width: 1024px) and (orientation: landscape) {
    .pc-main-button.fixed {
      position: fixed; } }
  @media screen and (max-width: 1024px) and (orientation: portrait) {
    .pc-main-button.fixed {
      position: fixed; } }

.mobile-main-button {
  display: flex;
  align-items: center;
  justify-content: center; }
  .mobile-main-button.static {
    position: static;
    width: 100%;
    box-shadow: 0px 3px 3px rgba(118, 129, 229, 0.3);
    border-radius: 10px; }
  .mobile-main-button.fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    box-shadow: 0px -5px 42px rgba(60, 142, 177, 0.15);
    border-radius: 20px 20px 0px 0px;
    /* ios fixed 이슈 관련 */ }
    @media (orientation: landscape) {
      .mobile-main-button.fixed {
        position: fixed; } }
    @media (orientation: portrait) {
      .mobile-main-button.fixed {
        position: fixed; } }
  .mobile-main-button.modal {
    font-size: 13px;
    height: 40px; }
  .mobile-main-button.normal {
    font-size: 16px;
    height: 50px; }
  .mobile-main-button.purple {
    color: #fff;
    background: #7681e5; }
  .mobile-main-button.cyan {
    color: #fff;
    background: #09b9c6; }
  .mobile-main-button img {
    margin-left: 5px; }

.my-list-button {
  border: 1px solid #7681e5;
  padding: 17px 0 17px 10px;
  width: 192px;
  height: 65px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px; }
  .my-list-button span {
    color: #7681e5;
    font-weight: 700;
    font-size: 20px;
    margin-right: 10px; }

.pagination-component {
  display: flex;
  align-items: center;
  justify-content: center; }
  .pagination-component .navigation-arrow {
    cursor: pointer;
    padding: 0 10px;
    margin: 0 10px;
    font-size: 15px;
    color: #a3a3a3;
    font-weight: 400;
    user-select: none; }
  .pagination-component .page-number {
    display: flex;
    cursor: pointer;
    user-select: none; }
    .pagination-component .page-number span {
      color: #a3a3a3;
      font-weight: 400;
      padding: 0 10px;
      flex-shrink: 0; }
      .pagination-component .page-number span.on {
        font-weight: 500;
        color: #09b9c6; }
  .pagination-component.purple .navigation-arrow {
    display: none; }
  .pagination-component.purple .page-number span.on {
    color: #7681e5; }
  .pagination-component.new_style {
    margin-top: 16px; }
    .pagination-component.new_style .page-number span {
      font-size: 15px;
      line-height: 20px;
      color: #a2a2a2;
      font-weight: 400;
      min-width: 40px;
      padding: 0; }
      .pagination-component.new_style .page-number span.on {
        color: #09b9c6; }

#teacher-invite-popup {
  padding: 80px 100px; }
  #teacher-invite-popup .title {
    padding-bottom: 30px;
    border-bottom: 1px solid #d3d3d5; }
    #teacher-invite-popup .title h2 {
      font-size: 26px;
      line-height: 38px;
      color: #24212e;
      margin-bottom: 10px; }
    #teacher-invite-popup .title p {
      font-size: 16px;
      line-height: 23px;
      color: #7c7a82; }
  #teacher-invite-popup .popup-main-content .form-input-box {
    display: flex;
    align-items: center;
    margin: 50px 0; }
    #teacher-invite-popup .popup-main-content .form-input-box span {
      font-weight: 500;
      font-size: 18px;
      line-height: 26px;
      /* identical to box height */
      /* Grey_80% */
      color: #504d58; }
    #teacher-invite-popup .popup-main-content .form-input-box .input-size-box {
      width: 288px;
      margin-left: 20px; }
      #teacher-invite-popup .popup-main-content .form-input-box .input-size-box.non-member {
        width: calc(100% - 114px);
        margin-left: 45px; }
  #teacher-invite-popup .popup-main-content .btn-size {
    width: 347px;
    margin: 0 auto; }
  #teacher-invite-popup .invite-add-info {
    text-align: center;
    margin-top: 12px;
    color: #e71d1d; }

@media screen and (max-width: 1024px) {
  #teacher-invite-popup {
    padding: 50px 16px; }
    #teacher-invite-popup .title {
      padding-bottom: 0px;
      border: none; }
      #teacher-invite-popup .title p {
        font-size: 13px; }
    #teacher-invite-popup .popup-main-content .btn-size {
      width: 100%; }
    #teacher-invite-popup .popup-main-content .form-input-box {
      margin: 20px 0 30px; }
      #teacher-invite-popup .popup-main-content .form-input-box .input-size-box {
        width: 100%;
        margin-left: 0; }
        #teacher-invite-popup .popup-main-content .form-input-box .input-size-box.non-member {
          width: 100%;
          margin-left: 0; }
    #teacher-invite-popup .invite-add-info {
      font-size: 12px;
      font-weight: 500; } }

.campus_info_change_pop {
  max-width: 460px !important; }
  .campus_info_change_pop .select > .select-input {
    border-color: #dfdfe4;
    border-radius: 8px; }
  .campus_info_change_pop .select-input {
    border-color: #dfdfe4 !important;
    border-radius: 8px !important; }
  .campus_info_change_pop .input-component-box .input-wrapper {
    border-color: #dfdfe4;
    border-radius: 8px; }
  .campus_info_change_pop #campus-info-change-popup .popup-main-content .popup-form-box dl dt {
    width: 80px; }

.campus-info-change-popup .pop_cont > .pop_title {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f2f2f7; }

.campus-info-change-popup .desc em {
  display: block;
  font-size: 12px !important;
  line-height: 18px;
  color: #ff5050 !important;
  margin-top: 4px !important; }

.campus-info-change-popup.mb_pop_wrap #campus-info-change-popup .file_input input#file_name {
  font-size: 13px; }

#campus-info-change-popup .file_input input#file_name {
  width: calc(100% - 79px);
  height: 40px; }
  #campus-info-change-popup .file_input input#file_name + .file_btn {
    padding: 10px 0;
    height: 38px;
    width: 72px;
    text-align: center;
    font-size: 13px; }
  #campus-info-change-popup .file_input input#file_name::placeholder {
    color: #a7a6ab !important;
    -webkit-text-fill-color: #a7a6ab !important; }

#campus-info-change-popup .title {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f2f2f7; }
  #campus-info-change-popup .title h2 {
    font-size: 24px;
    line-height: 34px;
    color: #24212e;
    margin-bottom: 8px; }
  #campus-info-change-popup .title .title-desc {
    display: flex;
    align-items: flex-end;
    justify-content: space-between; }
    #campus-info-change-popup .title .title-desc p {
      font-size: 14px;
      line-height: 22px;
      color: #504d58; }
      #campus-info-change-popup .title .title-desc p em {
        font-size: 12px;
        color: #ff5050;
        margin-top: 4px; }
    #campus-info-change-popup .title .title-desc button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100px;
      height: 34px;
      border: 1px solid #ff5050;
      box-sizing: border-box;
      border-radius: 10px;
      font-size: 13px;
      color: #ff5050; }

#campus-info-change-popup .popup-main-content .required {
  font-size: 12px;
  text-align: end;
  color: #ff5050;
  margin-bottom: 2px;
  margin-top: 20px; }

#campus-info-change-popup .popup-main-content .popup-form-box {
  display: flex;
  flex-direction: column;
  gap: 24px; }
  #campus-info-change-popup .popup-main-content .popup-form-box.margin {
    margin-bottom: 0; }
  #campus-info-change-popup .popup-main-content .popup-form-box dl {
    display: flex;
    align-items: flex-start;
    gap: 20px; }
    #campus-info-change-popup .popup-main-content .popup-form-box dl dt {
      width: 116px;
      padding-top: 8px;
      margin-bottom: 8px; }
      #campus-info-change-popup .popup-main-content .popup-form-box dl dt span {
        color: #7c7a82;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px; }
        #campus-info-change-popup .popup-main-content .popup-form-box dl dt span em {
          font: inherit;
          color: #ff5050; }
    #campus-info-change-popup .popup-main-content .popup-form-box dl dd {
      width: 100%;
      flex: 1; }
      #campus-info-change-popup .popup-main-content .popup-form-box dl dd .file_input {
        margin-top: 0; }
      #campus-info-change-popup .popup-main-content .popup-form-box dl dd .select {
        min-height: auto; }
        #campus-info-change-popup .popup-main-content .popup-form-box dl dd .select > .select-input {
          height: 36px; }
      #campus-info-change-popup .popup-main-content .popup-form-box dl dd .input-component-box .input-wrapper {
        height: 40px;
        border-color: #dfdfe4; }
      #campus-info-change-popup .popup-main-content .popup-form-box dl dd .header-color {
        width: 288px;
        transform: translateY(2px); }
        #campus-info-change-popup .popup-main-content .popup-form-box dl dd .header-color input {
          display: none; }
        #campus-info-change-popup .popup-main-content .popup-form-box dl dd .header-color label {
          display: inline-block;
          position: relative;
          width: 38px;
          height: 38px;
          border-radius: 50%;
          border: 2px solid #fff;
          cursor: pointer; }
          #campus-info-change-popup .popup-main-content .popup-form-box dl dd .header-color label:not(:last-of-type) {
            margin-right: 12px; }
          #campus-info-change-popup .popup-main-content .popup-form-box dl dd .header-color label span {
            display: inline-block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 30px;
            height: 30px;
            border-radius: 50%; }
            #campus-info-change-popup .popup-main-content .popup-form-box dl dd .header-color label span.red {
              background: #ff5050; }
            #campus-info-change-popup .popup-main-content .popup-form-box dl dd .header-color label span.pink {
              background: #ff84b0; }
            #campus-info-change-popup .popup-main-content .popup-form-box dl dd .header-color label span.orange {
              background: #ffaa04; }
            #campus-info-change-popup .popup-main-content .popup-form-box dl dd .header-color label span.cyan {
              background: #09b9c6; }
            #campus-info-change-popup .popup-main-content .popup-form-box dl dd .header-color label span.blue {
              background: #22a4ed; }
            #campus-info-change-popup .popup-main-content .popup-form-box dl dd .header-color label span.purple {
              background: #7681e5; }
        #campus-info-change-popup .popup-main-content .popup-form-box dl dd .header-color input[type='radio']:checked + label {
          border: 2px solid #7c7a82; }
      #campus-info-change-popup .popup-main-content .popup-form-box dl dd .call-number {
        display: flex;
        align-items: center; }
        #campus-info-change-popup .popup-main-content .popup-form-box dl dd .call-number i {
          margin: 0 6px;
          color: #504d58; }
      #campus-info-change-popup .popup-main-content .popup-form-box dl dd .address {
        display: flex;
        flex-wrap: wrap;
        gap: 8px; }
        #campus-info-change-popup .popup-main-content .popup-form-box dl dd .address .input-size {
          min-width: calc(100% - 115px);
          flex: 1; }
        #campus-info-change-popup .popup-main-content .popup-form-box dl dd .address .btn-size {
          flex-shrink: 0; }
          #campus-info-change-popup .popup-main-content .popup-form-box dl dd .address .btn-size button {
            display: block;
            font-size: 13px;
            height: 38px;
            padding: 0 10px;
            border-radius: 8px; }
      #campus-info-change-popup .popup-main-content .popup-form-box dl dd .upload > button {
        width: 134px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 500;
        font-size: 14px;
        color: #7681e5;
        background: #ffffff;
        border: 1px solid #7681e5;
        box-sizing: border-box;
        border-radius: 10px;
        padding: 0 16px; }
      #campus-info-change-popup .popup-main-content .popup-form-box dl dd .upload p {
        font-size: 12px;
        line-height: 18px;
        color: #a7a6ab;
        margin-top: 6px; }
      #campus-info-change-popup .popup-main-content .popup-form-box dl dd .upload .file_delete {
        margin: 8px 0; }
        #campus-info-change-popup .popup-main-content .popup-form-box dl dd .upload .file_delete span {
          color: #7c7a82; }
        #campus-info-change-popup .popup-main-content .popup-form-box dl dd .upload .file_delete button {
          font-size: 11px;
          color: #7c7a82;
          padding: 5px 15px;
          background: #f3f3f3;
          border-radius: 5px;
          margin-left: 10px; }

#campus-info-change-popup .popup-main-content .btn-size.twin-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px; }
  #campus-info-change-popup .popup-main-content .btn-size.twin-btn button {
    width: 120px;
    margin: initial; }

#campus-info-change-popup .input-component-box .input-wrapper input::placeholder {
  color: #a7a6ab !important;
  -webkit-text-fill-color: #a7a6ab !important; }

.campus-info-change-center-popup.m_fixed .popup-container {
  padding-top: 48px;
  border: none; }
  .campus-info-change-center-popup.m_fixed .popup-container .pop-fixed-header {
    border-bottom: 1px solid #f2f2f7;
    box-shadow: none; }
    .campus-info-change-center-popup.m_fixed .popup-container .pop-fixed-header .header-inner {
      height: 48px; }

.campus-info-change-center-popup.m_fixed .popup-content {
  height: calc(100vh - 48px);
  min-height: calc(100vh - 48px); }

.campus-info-change-center-popup.m_fixed #campus-info-change-popup.mb_style {
  padding: 20px 20px 112px; }
  .campus-info-change-center-popup.m_fixed #campus-info-change-popup.mb_style .title {
    padding-bottom: 0;
    margin-bottom: 22px;
    border-bottom: none; }
  .campus-info-change-center-popup.m_fixed #campus-info-change-popup.mb_style .popup-main-content > .btn-size {
    display: flex;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 16px 20px;
    border-top: 1px solid #f2f2f7;
    background-color: #ffffff; }
    .campus-info-change-center-popup.m_fixed #campus-info-change-popup.mb_style .popup-main-content > .btn-size button {
      flex: 1;
      margin: 0; }
      .campus-info-change-center-popup.m_fixed #campus-info-change-popup.mb_style .popup-main-content > .btn-size button:not(:last-of-type) {
        margin-right: 8px; }
  .campus-info-change-center-popup.m_fixed #campus-info-change-popup.mb_style .popup-main-content .popup-form-box {
    gap: 22px; }
    .campus-info-change-center-popup.m_fixed #campus-info-change-popup.mb_style .popup-main-content .popup-form-box dl {
      gap: 8px; }
      .campus-info-change-center-popup.m_fixed #campus-info-change-popup.mb_style .popup-main-content .popup-form-box dl dt {
        padding-top: 0;
        margin-bottom: 0;
        width: 100%; }
        .campus-info-change-center-popup.m_fixed #campus-info-change-popup.mb_style .popup-main-content .popup-form-box dl dt span em {
          margin-left: 0; }
      .campus-info-change-center-popup.m_fixed #campus-info-change-popup.mb_style .popup-main-content .popup-form-box dl dd .input-component-box .input-wrapper {
        border-radius: 8px; }
        .campus-info-change-center-popup.m_fixed #campus-info-change-popup.mb_style .popup-main-content .popup-form-box dl dd .input-component-box .input-wrapper input {
          font-size: 13px;
          line-height: 20px; }
      .campus-info-change-center-popup.m_fixed #campus-info-change-popup.mb_style .popup-main-content .popup-form-box dl dd .logo_box {
        border-radius: 8px;
        border: 1px solid #dfdfe4;
        text-align: center;
        position: relative;
        height: 0;
        padding-top: 23.8%; }
        .campus-info-change-center-popup.m_fixed #campus-info-change-popup.mb_style .popup-main-content .popup-form-box dl dd .logo_box img {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          max-height: 100%; }
        .campus-info-change-center-popup.m_fixed #campus-info-change-popup.mb_style .popup-main-content .popup-form-box dl dd .logo_box .logo_delete_btn {
          display: inline-block;
          width: 18px;
          height: 18px;
          position: absolute;
          right: 8px;
          top: 8px;
          background: url("../../../img/icon/icon_round_x_bg.svg") no-repeat center; }
      .campus-info-change-center-popup.m_fixed #campus-info-change-popup.mb_style .popup-main-content .popup-form-box dl dd .upload > * {
        margin-bottom: 8px; }
      .campus-info-change-center-popup.m_fixed #campus-info-change-popup.mb_style .popup-main-content .popup-form-box dl dd .file_delete {
        display: flex;
        align-items: center;
        margin: 0 0 8px 0; }
        .campus-info-change-center-popup.m_fixed #campus-info-change-popup.mb_style .popup-main-content .popup-form-box dl dd .file_delete .file_name {
          width: calc(100% - 84px);
          padding: 10px 12px;
          font-size: 13px;
          border-radius: 8px;
          border: 1px solid #dfdfe4;
          background-color: #ffffff; }
      .campus-info-change-center-popup.m_fixed #campus-info-change-popup.mb_style .popup-main-content .popup-form-box dl dd .file_upload_btn {
        width: auto;
        height: 38px;
        line-height: 36px;
        padding: 0 12px;
        font-size: 13px;
        font-weight: 400;
        border-radius: 8px;
        border: 1px solid #7c7a82;
        background-color: #ffffff;
        color: #504d58;
        flex-shrink: 0;
        margin-left: 8px; }

@media screen and (max-width: 1470px) {
  .new_popup_wrap.campus_info_change_pop .pop_inner {
    max-height: calc(100vh - 450px); } }

@media screen and (max-width: 1024px) {
  #campus-info-change-popup .title .title-desc {
    flex-direction: column; }
    #campus-info-change-popup .title .title-desc p {
      font-size: 14px;
      width: 100%; }
  #campus-info-change-popup .popup-main-content > .btn-size {
    width: 100%; }
  #campus-info-change-popup .popup-main-content .popup-form-box {
    gap: 20px; }
    #campus-info-change-popup .popup-main-content .popup-form-box dl {
      flex-direction: column;
      gap: 10px; }
      #campus-info-change-popup .popup-main-content .popup-form-box dl dt span {
        font-size: 14px; }
      #campus-info-change-popup .popup-main-content .popup-form-box dl dd .name {
        width: 100%; }
  .center-popup .popup-container .popup-content #campus-info-change-popup.change_into_mo .popup-main-content .popup-form-box dl dd .address .btn-size {
    width: 85px;
    height: 44px; }
    .center-popup .popup-container .popup-content #campus-info-change-popup.change_into_mo .popup-main-content .popup-form-box dl dd .address .btn-size button {
      font-size: 12px;
      height: 100%; }
  .center-popup .popup-container .popup-content #campus-info-change-popup.change_into_mo .popup-main-content .popup-form-box dl dd .address .input-size {
    width: calc(100% - 95px); }
  .campus-info-change-popup .pop_title .back_btn {
    padding: 0; }
  .campus-info-change-popup .pop_title .title_btn_wrap {
    display: none; }
  .campus-info-change-popup button {
    display: block !important;
    border-radius: 8px !important; }
  .campus-info-change-popup .popup-main-content .popup-form-box dl dt {
    padding-top: 0 !important;
    margin-bottom: 0 !important; } }

#campus-info-delete-popup {
  padding: 80px 100px; }
  #campus-info-delete-popup .title {
    padding-bottom: 30px;
    border-bottom: 1px solid #d3d3d5;
    margin-bottom: 70px; }
    #campus-info-delete-popup .title h2 {
      font-size: 26px;
      line-height: 38px;
      color: #24212e; }
      #campus-info-delete-popup .title h2 em {
        font-size: inherit;
        color: inherit;
        text-decoration: underline; }
    #campus-info-delete-popup .title p {
      font-size: 16px;
      line-height: 23px;
      color: #7c7a82; }
  #campus-info-delete-popup .popup-main-content > p {
    margin-bottom: 33px;
    color: #24212e;
    font-size: 16px;
    line-height: 24px; }
    #campus-info-delete-popup .popup-main-content > p em {
      font-size: inherit; }
  #campus-info-delete-popup .popup-main-content .input-box {
    margin-bottom: 50px; }
    #campus-info-delete-popup .popup-main-content .input-box p {
      font-size: 16px;
      color: #7c7a82; }
  #campus-info-delete-popup .popup-main-content .btn-size {
    width: 100%;
    max-width: 347px;
    margin: 0 auto; }

@media screen and (max-width: 768px) {
  #campus-info-delete-popup {
    padding: 30px; }
    #campus-info-delete-popup .title {
      padding-bottom: 20px;
      margin-bottom: 40px; }
      #campus-info-delete-popup .title h2 {
        font-size: 20px;
        line-height: 28px; } }

@media screen and (max-width: 480px) {
  #campus-info-delete-popup {
    padding: 20px 15px; }
    #campus-info-delete-popup .title {
      padding-bottom: 15px;
      margin-bottom: 30px; }
      #campus-info-delete-popup .title h2 {
        font-size: 18px;
        line-height: 25px; }
    #campus-info-delete-popup .popup-main-content > span {
      font-size: 15px !important;
      margin-bottom: 16px !important; }
      #campus-info-delete-popup .popup-main-content > span em {
        font-size: inherit !important; }
    #campus-info-delete-popup .popup-main-content p {
      font-size: 14px;
      line-height: 21px; }
      #campus-info-delete-popup .popup-main-content p em {
        font-size: inherit !important; }
    #campus-info-delete-popup .popup-main-content .input-box {
      margin-bottom: 30px; }
      #campus-info-delete-popup .popup-main-content .input-box p {
        font-size: 14px; }
    #campus-info-delete-popup .popup-main-content .pc-main-button {
      height: 50px;
      font-size: 14px; } }

#add-new-class-popup {
  padding: 80px 100px; }
  #add-new-class-popup .title {
    padding-bottom: 30px;
    border-bottom: 1px solid #d3d3d5;
    margin-bottom: 30px; }
    #add-new-class-popup .title h2 {
      font-size: 26px;
      line-height: 38px;
      color: #24212e;
      margin-bottom: 10px; }
    #add-new-class-popup .title .title-desc {
      display: flex;
      align-items: flex-end;
      justify-content: space-between; }
      #add-new-class-popup .title .title-desc p {
        font-size: 16px;
        line-height: 23px;
        color: #7c7a82; }
        #add-new-class-popup .title .title-desc p em {
          font-size: 12px;
          color: #ff0000;
          margin-top: 3px; }
      #add-new-class-popup .title .title-desc button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100px;
        height: 34px;
        border: 1px solid #ff5050;
        box-sizing: border-box;
        border-radius: 10px;
        font-size: 13px;
        color: #ff5050; }
  #add-new-class-popup .popup-main-content .popup-form-box {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 0px 0 30px; }
    #add-new-class-popup .popup-main-content .popup-form-box dl {
      gap: 20px; }
      #add-new-class-popup .popup-main-content .popup-form-box dl dt span {
        font-size: 18px;
        line-height: 26px;
        color: #504d58; }
        #add-new-class-popup .popup-main-content .popup-form-box dl dt span em {
          color: #ff84b0;
          margin-left: 5px; }
      #add-new-class-popup .popup-main-content .popup-form-box dl dd {
        width: 100%;
        flex: 1; }
        #add-new-class-popup .popup-main-content .popup-form-box dl dd .input-size {
          width: 288px; }
          #add-new-class-popup .popup-main-content .popup-form-box dl dd .input-size button + button {
            margin-left: 0; }
        #add-new-class-popup .popup-main-content .popup-form-box dl dd .header-color {
          width: 288px;
          transform: translateY(2px); }
          #add-new-class-popup .popup-main-content .popup-form-box dl dd .header-color input {
            display: none; }
          #add-new-class-popup .popup-main-content .popup-form-box dl dd .header-color label {
            display: inline-block;
            position: relative;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 2px solid #fff;
            cursor: pointer; }
            #add-new-class-popup .popup-main-content .popup-form-box dl dd .header-color label:not(:last-of-type) {
              margin-right: 12px; }
            #add-new-class-popup .popup-main-content .popup-form-box dl dd .header-color label span {
              display: inline-block;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 30px;
              height: 30px;
              border-radius: 50%; }
              #add-new-class-popup .popup-main-content .popup-form-box dl dd .header-color label span.red {
                background: #ff5050; }
              #add-new-class-popup .popup-main-content .popup-form-box dl dd .header-color label span.pink {
                background: #ff84b0; }
              #add-new-class-popup .popup-main-content .popup-form-box dl dd .header-color label span.orange {
                background: #ffaa04; }
              #add-new-class-popup .popup-main-content .popup-form-box dl dd .header-color label span.cyan {
                background: #09b9c6; }
              #add-new-class-popup .popup-main-content .popup-form-box dl dd .header-color label span.blue {
                background: #22a4ed; }
              #add-new-class-popup .popup-main-content .popup-form-box dl dd .header-color label span.purple {
                background: #7681e5; }
          #add-new-class-popup .popup-main-content .popup-form-box dl dd .header-color input[type='radio']:checked + label {
            border: 2px solid #7c7a82; }
  #add-new-class-popup .popup-main-content .btn-size {
    width: 347px;
    margin: 0 auto; }

@media screen and (max-width: 1024px) {
  #add-new-class-popup {
    padding: 30px 16px 10px; }
    #add-new-class-popup .title {
      padding-bottom: 10px;
      margin-bottom: 20px; }
      #add-new-class-popup .title .title-desc p {
        font-size: 13px; }
    #add-new-class-popup .popup-main-content .popup-form-box {
      gap: 20px; }
      #add-new-class-popup .popup-main-content .popup-form-box dl {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px; }
        #add-new-class-popup .popup-main-content .popup-form-box dl dt span {
          font-size: 14px; }
        #add-new-class-popup .popup-main-content .popup-form-box dl dd .input-size {
          width: 100%; }
        #add-new-class-popup .popup-main-content .popup-form-box dl dd .header-color {
          width: 100%; }
    #add-new-class-popup .popup-main-content .btn-size {
      width: 100%; } }

#member-class-change {
  padding: 50px 50px; }
  #member-class-change .title {
    padding-bottom: 30px;
    border-bottom: 1px solid #d3d3d5; }
    #member-class-change .title h2 {
      font-size: 26px;
      line-height: 38px;
      color: #24212e;
      margin-bottom: 10px; }
    #member-class-change .title .desc {
      display: flex;
      align-items: flex-end;
      justify-content: space-between; }
      #member-class-change .title .desc p {
        font-size: 16px;
        line-height: 23px;
        color: #7c7a82; }
      #member-class-change .title .desc span {
        font-weight: 500;
        font-size: 18px;
        line-height: 26px;
        color: #504d58; }
  #member-class-change .popup-main-content .dropout-list ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 40px 0 0; }
    #member-class-change .popup-main-content .dropout-list ul li {
      width: calc(50% - 10px); }
      #member-class-change .popup-main-content .dropout-list ul li .member {
        display: flex;
        align-items: center; }
        #member-class-change .popup-main-content .dropout-list ul li .member .thumbnail {
          width: 44px;
          min-width: 44px;
          height: 44px;
          overflow: hidden;
          border-radius: 50%; }
        #member-class-change .popup-main-content .dropout-list ul li .member .name {
          max-width: 200px;
          margin-left: 14px;
          font-weight: 500;
          font-size: 18px;
          line-height: 26px;
          color: #24212e;
          user-select: none; }
  #member-class-change .popup-main-content .member-class-list ul {
    overflow: auto;
    max-height: 400px;
    padding-top: 20px; }
    #member-class-change .popup-main-content .member-class-list ul li {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      flex-wrap: wrap;
      position: relative;
      padding: 30px 0;
      border-bottom: 1px solid #d3d3d5;
      margin-bottom: 20px; }
      #member-class-change .popup-main-content .member-class-list ul li > button {
        position: absolute;
        top: 0px;
        right: 20px;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        color: #504d58; }
      #member-class-change .popup-main-content .member-class-list ul li .member {
        display: flex;
        align-items: center;
        width: 258px;
        margin-right: 60px; }
        #member-class-change .popup-main-content .member-class-list ul li .member .thumbnail {
          width: 44px;
          height: 44px;
          overflow: hidden;
          border-radius: 50%; }
        #member-class-change .popup-main-content .member-class-list ul li .member .name {
          margin-left: 14px;
          font-weight: 500;
          font-size: 18px;
          line-height: 26px;
          color: #24212e;
          flex: 1;
          max-width: 200px; }
      #member-class-change .popup-main-content .member-class-list ul li .change_info {
        display: flex;
        flex-wrap: wrap; }
        #member-class-change .popup-main-content .member-class-list ul li .change_info .current-class {
          margin-right: 60px;
          display: flex;
          flex-direction: column;
          gap: 43px;
          width: 310px; }
          #member-class-change .popup-main-content .member-class-list ul li .change_info .current-class .inner {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            padding-top: 12px; }
            #member-class-change .popup-main-content .member-class-list ul li .change_info .current-class .inner p {
              font-size: 15px;
              line-height: 22px;
              color: #504d58; }
              #member-class-change .popup-main-content .member-class-list ul li .change_info .current-class .inner p em {
                font-weight: bold;
                font-size: 18px;
                color: #09b9c6;
                margin-left: 10px; }
        #member-class-change .popup-main-content .member-class-list ul li .change_info .change-select {
          display: flex;
          flex-direction: column;
          gap: 30px; }
          #member-class-change .popup-main-content .member-class-list ul li .change_info .change-select .inner {
            display: flex;
            align-items: center; }
            #member-class-change .popup-main-content .member-class-list ul li .change_info .change-select .inner p {
              font-size: 15px;
              line-height: 22px;
              color: #504d58; }
            #member-class-change .popup-main-content .member-class-list ul li .change_info .change-select .inner .select-size {
              width: 240px;
              margin-left: 10px;
              flex: 1; }
  #member-class-change .popup-main-content .btn-size {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 50px; }
    #member-class-change .popup-main-content .btn-size button {
      width: 206px;
      margin: initial; }

@media screen and (max-width: 1024px) {
  #member-class-change {
    padding: 50px; }
    #member-class-change .popup-main-content .member-class-list ul li {
      padding: 20px 0; }
      #member-class-change .popup-main-content .member-class-list ul li .member {
        padding-bottom: 20px; }
      #member-class-change .popup-main-content .member-class-list ul li .change_info:not(:last-of-type) {
        padding-bottom: 20px;
        margin-bottom: 10px;
        border-bottom: 1px dashed #eaeaea; }
      #member-class-change .popup-main-content .member-class-list ul li .change_info .current-class {
        padding-bottom: 20px; }
      #member-class-change .popup-main-content .member-class-list ul li .change_info .change-select {
        gap: 10px; }
        #member-class-change .popup-main-content .member-class-list ul li .change_info .change-select .inner:not(:last-of-type) {
          padding-bottom: 20px;
          margin-bottom: 10px;
          border-bottom: 1px dashed #eaeaea; } }

@media screen and (max-width: 1024px) {
  #member-class-change .popup-main-content .dropout-list ul li .member .name {
    max-width: calc(50vw - 160px); } }

@media screen and (max-width: 768px) {
  #member-class-change .popup-main-content .dropout-list ul {
    flex-direction: column; }
    #member-class-change .popup-main-content .dropout-list ul li .member .name {
      max-width: calc(100vw - 220px); } }

#study-record-popup {
  padding: 70px 50px; }
  #study-record-popup .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    border-bottom: 1px solid #d3d3d5;
    padding-bottom: 10px; }
    #study-record-popup .title .user {
      display: flex;
      align-items: center; }
      #study-record-popup .title .user .thumbnail {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        overflow: hidden; }
        #study-record-popup .title .user .thumbnail img {
          width: 100%;
          height: 100%;
          border-radius: inherit;
          object-fit: cover; }
      #study-record-popup .title .user p {
        margin-left: 10px;
        font-weight: 500;
        font-size: 18px;
        line-height: 26px;
        color: #24212e; }
    #study-record-popup .title .admin_avg_table {
      width: 40%; }
      #study-record-popup .title .admin_avg_table th,
      #study-record-popup .title .admin_avg_table td {
        padding: 0px;
        font-weight: 500;
        font-size: 15px;
        line-height: 26px;
        color: #504d58; }
    #study-record-popup .title .date {
      font-weight: 500;
      font-size: 18px;
      line-height: 26px;
      color: #504d58; }
  #study-record-popup .popup-main-content {
    height: calc(100vh - 450px) !important; }
    #study-record-popup .popup-main-content > h2 {
      font-weight: bold;
      font-size: 18px;
      line-height: 26px;
      color: #24212e;
      margin-bottom: 10px; }
    #study-record-popup .popup-main-content .record-box {
      display: flex;
      border-top: 1px solid #24212e; }
      #study-record-popup .popup-main-content .record-box .record-status {
        flex: 1; }
        #study-record-popup .popup-main-content .record-box .record-status .subject {
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          background: #eff5f6;
          padding: 18px 10px;
          line-height: 18px;
          min-height: 72px; }
        #study-record-popup .popup-main-content .record-box .record-status .dt {
          display: flex;
          align-items: center;
          justify-content: center;
          border-bottom: 1px solid #d3d3d5;
          padding: 10px 0 8px; }
          #study-record-popup .popup-main-content .record-box .record-status .dt span {
            width: 25%;
            text-align: center; }
        #study-record-popup .popup-main-content .record-box .record-status .dd {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 28px 0 29px;
          border-bottom: 1px solid #a7a6ab; }
          #study-record-popup .popup-main-content .record-box .record-status .dd .ok {
            width: 25%;
            height: 18px;
            background: url("/img/icon/ok-cyan.svg") no-repeat;
            background-position: center; }
          #study-record-popup .popup-main-content .record-box .record-status .dd .no {
            width: 25%;
            height: 18px;
            background: url("/img/icon/no.svg") no-repeat;
            background-position: center; }
          #study-record-popup .popup-main-content .record-box .record-status .dd .triangle {
            width: 25%;
            height: 18px;
            background: url("/img/icon/triangle.svg") no-repeat;
            background-position: center; }
          #study-record-popup .popup-main-content .record-box .record-status .dd .x {
            width: 25%;
            height: 18px;
            background: url("/img/icon/x.svg") no-repeat;
            background-position: center; }
          #study-record-popup .popup-main-content .record-box .record-status .dd .empty {
            width: 25%;
            height: 18px; }
    #study-record-popup .popup-main-content .btn-wrap {
      width: 347px;
      margin: 0 auto;
      margin-top: 50px; }

@media screen and (max-width: 1024px) {
  #study-record-popup {
    padding: 35px 16px 20px;
    overflow: auto; }
    #study-record-popup .title .user p {
      font-size: 14px; }
    #study-record-popup .title .date {
      font-size: 13px;
      font-weight: 400;
      color: #7c7a82; }
    #study-record-popup .popup-main-content .record-box {
      flex-direction: column; }
      #study-record-popup .popup-main-content .record-box .record-status .subject {
        padding: 10px 0; }
      #study-record-popup .popup-main-content .record-box .record-status .dd {
        padding: 10px 0; }
    #study-record-popup .popup-main-content .btn-wrap {
      width: 100%;
      padding: 0 13px; }
    #study-record-popup .popup-main-content > h2 {
      font-size: 14px; } }

.center-popup .popup-container .use_box {
  max-height: 90vh; }
  .center-popup .popup-container .use_box .pop_cont {
    height: 100%; }
    .center-popup .popup-container .use_box .pop_cont .use_text {
      /*height: calc(100% - 66px);*/ }

.date-picker {
  position: relative;
  cursor: pointer; }
  .date-picker:not(:first-of-type) .date-picker-pop {
    left: auto;
    right: 0; }
  .date-picker > .input {
    width: 163px;
    height: 48px;
    padding-left: 52px;
    border: 1px solid #09b9c6;
    border-radius: 10px;
    color: #504d58;
    line-height: 16.94px;
    display: flex;
    align-items: center; }
    .date-picker > .input.disabled {
      background-color: #e9e9ea !important; }
      .date-picker > .input.disabled span {
        color: #a7a6ab !important; }
  .date-picker > img {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%); }
  .date-picker > .close-helper {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10; }
  .date-picker > .date-picker-pop {
    position: absolute;
    z-index: 11;
    opacity: 0;
    pointer-events: none;
    left: 0;
    top: calc(100% + 15px);
    width: 220px;
    padding: 17px 18px;
    background-color: #ffffff;
    border: 1px solid #6bd5dd;
    border-radius: 10px; }
    .date-picker > .date-picker-pop.visible {
      pointer-events: all;
      top: calc(100% + 5px);
      opacity: 1; }
    .date-picker > .date-picker-pop > .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      margin-bottom: 18px; }
      .date-picker > .date-picker-pop > .top > button {
        padding: 3px;
        display: flex; }
        .date-picker > .date-picker-pop > .top > button img {
          width: 9px; }
          .date-picker > .date-picker-pop > .top > button img.rotate {
            transform: rotate(180deg); }
      .date-picker > .date-picker-pop > .top > .title {
        color: #3e3c60;
        font-size: 18px;
        line-height: 1;
        margin: 0 !important;
        text-align: center; }
    .date-picker > .date-picker-pop > .line {
      display: none; }
    .date-picker > .date-picker-pop > .piece-wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 180px;
      margin: 0 auto;
      gap: 8px 0; }
      .date-picker > .date-picker-pop > .piece-wrapper > li {
        margin-top: 0 !important; }
        .date-picker > .date-picker-pop > .piece-wrapper > li > button {
          width: 25px;
          height: 25px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          transition: 0.21s; }
          .date-picker > .date-picker-pop > .piece-wrapper > li > button:not(:disabled):hover {
            background-color: rgba(9, 185, 198, 0.15); }
          .date-picker > .date-picker-pop > .piece-wrapper > li > button:not(:disabled).selected {
            background-color: #09b9c6; }
            .date-picker > .date-picker-pop > .piece-wrapper > li > button:not(:disabled).selected {
              color: #ffffff; }
          .date-picker > .date-picker-pop > .piece-wrapper > li > button:disabled {
            cursor: not-allowed;
            opacity: 0.3; }
          .date-picker > .date-picker-pop > .piece-wrapper > li > button.Sun {
            color: #ff5050; }
          .date-picker > .date-picker-pop > .piece-wrapper > li > button.Sat {
            color: #7681e5; }

.input-component-box {
  width: 100%;
  position: relative; }
  .input-component-box .input-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    padding: 0px 12px;
    border: 1px solid #a7a6ab;
    box-sizing: border-box;
    /*
    border-radius: 10px;
    */
    border-radius: 8px;
    background: #fff; }
    .input-component-box .input-wrapper.border-none {
      border: none; }
    .input-component-box .input-wrapper.cyan {
      border: 1px solid #6bd5dd; }
    .input-component-box .input-wrapper.disabled {
      /*
      background: #f5f5f7;
      border: 1px solid #d3d3d5;
      */
      background: #e9e9ea;
      border: 1px solid #dfdfe4; }
    .input-component-box .input-wrapper input {
      all: unset;
      width: 100%;
      font-size: 14px;
      line-height: 22px;
      color: #24212e !important;
      -webkit-text-fill-color: #24212e !important; }
      .input-component-box .input-wrapper input:disabled {
        color: #a7a6ab !important;
        -webkit-text-fill-color: #a7a6ab !important; }
      .input-component-box .input-wrapper input:read-only {
        color: #a7a6ab !important;
        -webkit-text-fill-color: #a7a6ab !important; }
      .input-component-box .input-wrapper input::placeholder {
        font-size: inherit;
        color: #d3d3d5 !important;
        -webkit-text-fill-color: #d3d3d5 !important; }
    .input-component-box .input-wrapper.input_line {
      height: auto;
      padding: 0 20px 15px;
      border: 0;
      border-bottom: 1px solid #d3d3d5;
      border-radius: 0; }
    .input-component-box .input-wrapper.wrong_line {
      border-color: #ff5050; }
    .input-component-box .input-wrapper.refresh {
      position: relative;
      padding-right: 50px; }
      .input-component-box .input-wrapper.refresh .btn-refresh-input {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%); }
    .input-component-box .input-wrapper .user_textarea {
      all: unset;
      appearance: none;
      width: 100%;
      height: 48px;
      background-color: #fff;
      font-size: 16px;
      line-height: 22px;
      color: #24212e; }
      .input-component-box .input-wrapper .user_textarea:disabled {
        color: #a7a6ab; }
      .input-component-box .input-wrapper .user_textarea:read-only {
        color: #a7a6ab;
        -webkit-text-fill-color: #a7a6ab; }
      .input-component-box .input-wrapper .user_textarea::placeholder {
        font-size: inherit;
        color: #d3d3d5; }
  .input-component-box .error-msg {
    position: absolute;
    top: 50px;
    left: 0; }
    .input-component-box .error-msg p {
      font-size: 13px;
      line-height: 19px;
      color: #eb5757;
      width: max-content; }
  .input-component-box .complete-msg {
    position: absolute;
    top: 50px;
    left: 0; }
    .input-component-box .complete-msg p {
      font-size: 13px;
      line-height: 19px;
      color: #09b9c6;
      width: max-content; }
  .input-component-box.input_unit_text {
    width: 120px !important; }
    .input-component-box.input_unit_text .input-wrapper input.is_unit {
      text-align: right; }
      .input-component-box.input_unit_text .input-wrapper input.is_unit::placeholder {
        text-align: left; }
    .input-component-box.input_unit_text .input-wrapper .is_unit {
      font-size: 14px !important;
      font-weight: 400 !important;
      height: 16px !important;
      color: #7c7a82 !important; }

@media screen and (max-width: 1024px) {
  .input-component-box .input-wrapper.input_line {
    padding: 0 5px 10px; } }

.input-component-box2 {
  width: 100%;
  position: relative; }
  .input-component-box2 .input-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    padding: 0px 20px;
    border: 1px solid #a7a6ab;
    box-sizing: border-box;
    border-radius: 10px;
    background: #fff; }
    .input-component-box2 .input-wrapper.border-none {
      border: none; }
    .input-component-box2 .input-wrapper.cyan {
      border: 1px solid #6bd5dd !important; }
    .input-component-box2 .input-wrapper.disabled {
      /*
      background: #f5f5f7;
      border: 1px solid #d3d3d5;
      */
      background: #e9e9ea;
      border: 1px solid #dfdfe4; }
    .input-component-box2 .input-wrapper span {
      display: inline-block;
      margin-right: 3px;
      font-size: 16px;
      color: #24212e; }
    .input-component-box2 .input-wrapper input {
      all: unset;
      width: 100%;
      font-size: 16px;
      line-height: 23px;
      color: #24212e; }
      .input-component-box2 .input-wrapper input::placeholder {
        font-size: 16px; }
      .input-component-box2 .input-wrapper input:disabled {
        color: #a7a6ab; }
      .input-component-box2 .input-wrapper input::placeholder {
        font-size: 16px; }
    .input-component-box2 .input-wrapper.input_line {
      height: auto;
      padding: 0 20px 15px;
      border: 0;
      border-bottom: 1px solid #d3d3d5;
      border-radius: 0; }
  .input-component-box2 .error-msg {
    position: absolute;
    top: 50px;
    left: 0; }
    .input-component-box2 .error-msg p {
      font-size: 13px;
      line-height: 19px;
      color: #eb5757;
      width: max-content; }
  .input-component-box2 .complete-msg {
    position: absolute;
    top: 50px;
    left: 0; }
    .input-component-box2 .complete-msg p {
      font-size: 13px;
      line-height: 19px;
      color: #09b9c6;
      width: max-content; }

@media screen and (max-width: 1024px) {
  .input-component-box .input-wrapper.input_line {
    padding: 0 5px 10px; } }

.level-bar {
  width: 100%;
  margin-top: 18px; }
  .level-bar > .level-bar-track {
    position: relative;
    width: 100%;
    height: 13px;
    border-radius: 10px;
    border: 1px solid #6bd5dd;
    background-color: #ffffff; }
    .level-bar > .level-bar-track > .level-bar-fill {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: #ff5050;
      height: 6px;
      transition: 0.21s; }
    .level-bar > .level-bar-track > .level-bar-controller {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      transition: 0.21s; }
      .level-bar > .level-bar-track > .level-bar-controller > .level-bar-circle {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: #ffffff;
        border: 4px solid #ff5050;
        cursor: pointer;
        transition: 0.21s; }
        .level-bar > .level-bar-track > .level-bar-controller > .level-bar-circle:hover {
          transform: scale(1.1); }
      .level-bar > .level-bar-track > .level-bar-controller > .level-bar-drag-helper {
        position: fixed;
        left: -100px;
        top: -100px;
        bottom: -100px;
        right: -100px;
        /* ios fixed 이슈 관련 */ }
        @media (orientation: landscape) {
          .level-bar > .level-bar-track > .level-bar-controller > .level-bar-drag-helper {
            position: fixed; } }
        @media (orientation: portrait) {
          .level-bar > .level-bar-track > .level-bar-controller > .level-bar-drag-helper {
            position: fixed; } }
  .level-bar > .level-bar-x-axis {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px; }
    .level-bar > .level-bar-x-axis > span {
      user-select: none; }
    .level-bar > .level-bar-x-axis > p {
      font-size: 13px;
      transition: 0.21s; }

.range_bar {
  position: relative;
  display: flex;
  justify-content: center; }
  .range_bar .range_bar_contents {
    width: 100%; }
    .range_bar .range_bar_contents .range_bar_track {
      position: relative;
      height: 14px;
      border-radius: 10px;
      border: 1px solid #6bd5dd;
      background-color: #ffffff; }
      .range_bar .range_bar_contents .range_bar_track input[type='range'] {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        z-index: 3; }
        .range_bar .range_bar_contents .range_bar_track input[type='range']::-webkit-slider-thumb {
          -webkit-appearance: none;
          display: block;
          width: 18px;
          height: 18px;
          border-radius: 50%; }
        .range_bar .range_bar_contents .range_bar_track input[type='range'].left_range {
          left: 0;
          width: calc(100% + 22px); }
          .range_bar .range_bar_contents .range_bar_track input[type='range'].left_range::-webkit-slider-thumb {
            transform: translateX(-10px); }
        .range_bar .range_bar_contents .range_bar_track input[type='range'].right_range {
          right: 0;
          width: calc(100% + 22px); }
          .range_bar .range_bar_contents .range_bar_track input[type='range'].right_range::-webkit-slider-thumb {
            transform: translateX(10px); }
      .range_bar .range_bar_contents .range_bar_track .circle.min {
        z-index: 4; }
        .range_bar .range_bar_contents .range_bar_track .circle.min:hover {
          z-index: 3; }
          .range_bar .range_bar_contents .range_bar_track .circle.min:hover ~ .left_range {
            z-index: 5; }
      .range_bar .range_bar_contents .range_bar_track .circle.max {
        z-index: 4; }
        .range_bar .range_bar_contents .range_bar_track .circle.max:hover {
          z-index: 3; }
          .range_bar .range_bar_contents .range_bar_track .circle.max:hover ~ .right_range {
            z-index: 5; }
      .range_bar .range_bar_contents .range_bar_track .circle {
        position: absolute;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: #ffffff;
        border: 4px solid #ff5050;
        cursor: pointer;
        transition: 0.21s;
        top: 50%; }
        .range_bar .range_bar_contents .range_bar_track .circle.min {
          transform: translate(calc(-50% - 1px), -50%); }
        .range_bar .range_bar_contents .range_bar_track .circle.max {
          transform: translate(calc(-50% + 1px), -50%); }
      .range_bar .range_bar_contents .range_bar_track .fill {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 6px;
        background-color: #ff5050;
        border-radius: 8px;
        z-index: 1;
        transition: 0.21s; }
      .range_bar .range_bar_contents .range_bar_track .cover_tail {
        position: absolute;
        top: 50%;
        right: -1px;
        transform: translateY(-50%);
        height: 16px;
        width: 10%;
        background-color: #ffffff;
        z-index: 1;
        overflow: hidden; }
        .range_bar .range_bar_contents .range_bar_track .cover_tail:after {
          content: '';
          top: 50%;
          left: -7px;
          width: 14px;
          height: 12px;
          transform: translateY(-50%);
          position: absolute;
          border-radius: 0 10px 10px 0;
          border: 1px solid #6bd5dd;
          border-left: none; }
    .range_bar .range_bar_contents .range_bar_point {
      position: relative; }
      .range_bar .range_bar_contents .range_bar_point .options_list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        top: 10px;
        width: calc(100% + 0px); }
        .range_bar .range_bar_contents .range_bar_point .options_list span {
          flex: 1;
          font-size: 13px;
          text-align: left;
          word-break: keep-all;
          text-align: center;
          transform: translateX(-50%); }

/**
 * Guide
 */
.select {
  position: relative;
  min-height: 48px;
  width: 288px;
  background-color: #fff;
  background: #fff; }
  .select.full {
    width: 100%; }
  .select.cyan > .select-input {
    border: 1px solid #6bd5dd; }
  .select.cyan > .select-options.is_open {
    border-left: 1px solid #6bd5dd;
    border-bottom: 1px solid #6bd5dd;
    border-right: 1px solid #6bd5dd; }
  .select.light-gray {
    background-color: #f1f2fc;
    border-radius: 15px; }
    .select.light-gray > .select-input {
      border: none;
      border-radius: 15px;
      background-color: #f1f2fc; }
      .select.light-gray > .select-input.has-border {
        border-radius: 15px 15px 0 0; }
    .select.light-gray > .select-options {
      background-color: #f1f2fc;
      border-radius: 0 0 15px 15px; }
      .select.light-gray > .select-options.is_open {
        border-left: none;
        border-bottom: none;
        border-right: none; }
  .select.disabled-select {
    /*
    background-color: #d3d3d5;
    border: 1px solid #d3d3d5;
    */
    background-color: #dfdfe4;
    border: 1px solid #dfdfe4;
    border-radius: 15px; }
    .select.disabled-select > .select-input {
      border: none;
      border-radius: 15px;
      /*
      background-color: #f5f5f7;
      */
      background-color: #e9e9ea; }
  .select * {
    color: #24212e;
    user-select: none; }
    .select *.placeholder {
      color: #a7a6ab; }
  .select > .select-input {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid #a7a6ab; }
    .select > .select-input.has-border {
      border-radius: 10px 10px 0 0;
      border-bottom: 1px solid #e9e9ea; }
    .select > .select-input.no-border {
      border-radius: none;
      border-bottom: none; }
    .select > .select-input > .select-arrow {
      width: 10px;
      margin-left: 10px; }
      .select > .select-input > .select-arrow.rotate {
        transform: rotate(180deg); }
  .select > .select-options {
    position: absolute;
    top: 44px;
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 0 0 10px 10px;
    padding: 0px 0;
    cursor: pointer;
    z-index: 11; }
    .select > .select-options.is_open {
      border-left: 1px solid #a7a6ab;
      border-bottom: 1px solid #a7a6ab;
      border-right: 1px solid #a7a6ab;
      padding: 12px 0; }
    .select > .select-options .select-option-wrap {
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      /* 스크롤 바 */
      /* 스크롤 바 밑의 배경 */
      /* 실질적 스크롤 바 */
      /* 스크롤 바 상 하단 버튼 */ }
      .select > .select-options .select-option-wrap::-webkit-scrollbar {
        width: 4px;
        height: 4px; }
      .select > .select-options .select-option-wrap::-webkit-scrollbar-track {
        background-color: transparent; }
      .select > .select-options .select-option-wrap::-webkit-scrollbar-thumb {
        background: #d3d3d5;
        border-radius: 10px; }
      .select > .select-options .select-option-wrap::-webkit-scrollbar-button {
        display: none; }
      .select > .select-options .select-option-wrap > .select-option {
        padding: 12px 16px; }
        .select > .select-options .select-option-wrap > .select-option.disabled {
          color: #cbcbcb; }
        .select > .select-options .select-option-wrap > .select-option:hover {
          background-color: rgba(233, 233, 234, 0.4); }
  .select.main {
    position: relative;
    z-index: 11;
    min-height: 60px;
    background-color: #fff;
    background: #fff; }
    .select.main * {
      font-size: 24px;
      font-weight: 700;
      color: #24212e;
      user-select: none; }
      .select.main *.placeholder {
        font-weight: 700;
        font-size: 24px;
        color: #24212e; }
    .select.main > .select-input {
      width: 100%;
      height: 65px;
      cursor: pointer;
      box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
      border-radius: 15px;
      border: none; }
      .select.main > .select-input.has-border {
        border-radius: 15px 15px 0 0;
        border-bottom: 1px solid #e9e9ea; }
      .select.main > .select-input > .select-arrow {
        width: 16px; }
        .select.main > .select-input > .select-arrow.rotate {
          transform: rotate(180deg); }
    .select.main > .select-options {
      top: 65px;
      background: #fff;
      border-radius: 0 0 15px 15px;
      box-shadow: 0px 20px 30px rgba(92, 103, 201, 0.1); }
      .select.main > .select-options.is_open {
        border: none;
        padding: 12px 0; }
      .select.main > .select-options .select-option-wrap {
        display: flex;
        flex-direction: column;
        margin-right: 8px;
        overflow-y: auto;
        /* 스크롤 바 */
        /* 스크롤 바 밑의 배경 */
        /* 실질적 스크롤 바 */
        /* 스크롤 바 상 하단 버튼 */ }
        .select.main > .select-options .select-option-wrap::-webkit-scrollbar {
          width: 4px;
          height: 4px; }
        .select.main > .select-options .select-option-wrap::-webkit-scrollbar-track {
          background-color: transparent; }
        .select.main > .select-options .select-option-wrap::-webkit-scrollbar-thumb {
          background: #d3d3d5;
          border-radius: 10px; }
        .select.main > .select-options .select-option-wrap::-webkit-scrollbar-button {
          display: none; }
        .select.main > .select-options .select-option-wrap > .select-option {
          padding: 12px 20px; }
          .select.main > .select-options .select-option-wrap > .select-option:hover {
            background-color: rgba(233, 233, 234, 0.4); }
  .select.h_40 > .select-input {
    height: 40px; }
  .select.h_40 > .select-options {
    top: 40px; }

.select.no-border .select-input {
  border: 0; }

.select.no-border .select-options.is_open {
  border-top: 1px solid #a7a6ab;
  border-radius: 10px; }

@media (max-width: 1024px) {
  .select {
    min-height: 44px;
    width: 100%;
    border-radius: 8px; }
    .select * {
      font-size: 12px; }
    .select > .select-options {
      padding: 0px 0; }
      .select > .select-options > .select-option {
        padding-left: 15px; } }

.select-close-helper {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 10; }

@media screen and (max-width: 1024px) {
  .select select {
    all: unset; }
    .select select.select-input {
      width: 100%;
      box-sizing: border-box; }
  .select.arrow-wrapper > .select-arrow {
    width: 10px;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%); }
    .select.arrow-wrapper > .select-arrow.rotate {
      transform: rotate(180deg) translateY(50%); }
  .select.main {
    min-height: initial; }
    .select.main * {
      font-size: 12px; }
      .select.main *.placeholder {
        font-size: 12px; }
    .select.main > .select-input {
      height: 50px; } }

.select select {
  all: unset; }
  .select select.select-input {
    width: 100%;
    box-sizing: border-box; }

.select.arrow-wrapper > .select-arrow {
  width: 10px;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%); }
  .select.arrow-wrapper > .select-arrow.rotate {
    transform: rotate(180deg) translateY(50%); }

.factory_card {
  text-align: center;
  padding: 80px 20px 40px;
  border: 1px solid #09b9c6;
  border-radius: 20px; }
  .factory_card img {
    margin-bottom: 20px; }
    .factory_card img:nth-of-type(2) {
      display: none; }
  .factory_card h2 {
    margin-bottom: 70px; }
    .factory_card h2 p {
      font-size: 36px;
      font-weight: 600;
      color: #09b9c6; }
    .factory_card h2 span {
      font-size: 15px;
      font-weight: 500;
      display: block;
      color: #09b9c6; }
  .factory_card button {
    width: 100%;
    height: 70px;
    border-color: #7681e5;
    color: #7681e5;
    font-size: 20px;
    font-weight: 700; }
    .factory_card button img {
      display: none; }
    .factory_card button.on {
      background-color: #7681e5;
      color: #fff; }
    .factory_card button.disabled {
      background-color: #e9e9ea;
      border-color: #e9e9ea;
      color: #fff; }
  .factory_card.disabled {
    border-color: #e9e9ea; }
    .factory_card.disabled img:nth-of-type(1) {
      display: none; }
    .factory_card.disabled img:nth-of-type(2) {
      display: inline-block; }
    .factory_card.disabled h2 p,
    .factory_card.disabled h2 span {
      color: #e9e9ea; }

.factory_header h1 {
  font-size: 36px;
  font-weight: 700;
  color: #24212e;
  margin-bottom: 50px;
  position: relative; }
  .factory_header h1 img {
    margin-top: -8px;
    margin-right: 10px; }
  .factory_header h1 button {
    height: 32px;
    padding: 0 14px;
    margin-right: 8px;
    border: 1px solid #a7a6ab;
    border-radius: 20px;
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-30%); }
    .factory_header h1 button span {
      font-size: 13px;
      font-weight: 700;
      font-family: 'Noto Sans KR';
      color: #a7a6ab;
      vertical-align: middle; }
    .factory_header h1 button img {
      width: 26px;
      vertical-align: -webkit-baseline-middle; }

.factory_info {
  display: flex;
  align-items: center; }
  .factory_info > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    flex: 1;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
    border-radius: 15px; }
    .factory_info > div p {
      display: flex;
      align-items: center;
      font-size: 24px;
      font-weight: 700;
      color: #24212e; }
    .factory_info > div ul {
      display: flex;
      align-items: center; }
      .factory_info > div ul li {
        font-size: 15px;
        font-weight: 500;
        color: #7c7a82;
        line-height: 32px; }
        .factory_info > div ul li span {
          font-size: 18px;
          font-weight: 700;
          color: #504d58; }
  .factory_info button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(25% - 20px);
    height: 65px;
    font-size: 20px;
    font-weight: 700;
    margin-left: 20px; }
    .factory_info button img {
      margin-left: 5px; }
    .factory_info button.disabled {
      background-color: #e9e9ea; }

.factory_nav {
  position: absolute;
  top: 123px;
  left: calc(-17.5% + 50px);
  width: 17.5%;
  height: calc(100% - 123px);
  background-color: #09b9c6;
  padding-left: 84px;
  transition: 0.4s;
  z-index: 10; }
  .factory_nav.on {
    left: 0; }
    .factory_nav.on button {
      right: 24px;
      background-image: url("../img/icon/icon_factory_menu_on.svg"); }
  .factory_nav h2 {
    font-size: 34px;
    font-weight: 700;
    color: #fff;
    line-height: 80px;
    background-color: #0f9ba5;
    margin-left: -84px;
    padding-left: 56px;
    width: calc(100% + 84px);
    position: relative; }
    .factory_nav h2 button {
      position: absolute;
      top: calc(50% + 1.5px);
      right: 8px;
      transform: translateY(-50%);
      width: 32px;
      height: 25px;
      background-image: url("../img/icon/icon_factory_menu.svg");
      background-size: contain;
      background-repeat: no-repeat; }
  .factory_nav .factory_menu {
    margin-top: 30px; }
    .factory_nav .factory_menu > li {
      margin-top: 30px; }
      .factory_nav .factory_menu > li:first-of-type {
        margin-top: 0; }
      .factory_nav .factory_menu > li.contents_market_li a {
        display: block;
        padding: 27px 35px 27px 0; }
        .factory_nav .factory_menu > li.contents_market_li a img {
          margin-right: 21px; }
      .factory_nav .factory_menu > li .factory_title {
        font-size: 20px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 12px;
        position: relative;
        width: 100%; }
        .factory_nav .factory_menu > li .factory_title .arrow_img {
          position: absolute;
          top: 50%;
          left: -21px;
          transform: translate(-100%, -50%); }
        .factory_nav .factory_menu > li .factory_title .menu_icon {
          display: none;
          position: absolute;
          top: 50%;
          right: 25px;
          transform: translate(50%, -50%);
          margin-right: 0; }
      .factory_nav .factory_menu > li .factory_sub li {
        position: relative; }
        .factory_nav .factory_menu > li .factory_sub li a {
          display: block;
          padding: 14px 0 14px 20px;
          margin-top: 16px;
          font-size: 17px;
          font-weight: 700;
          font-family: 'Inter', 'Noto Sans KR', sans-serif;
          color: #fff; }
          .factory_nav .factory_menu > li .factory_sub li a:first-of-type {
            margin-top: 0; }
          .factory_nav .factory_menu > li .factory_sub li a .sub_icon {
            display: none;
            position: absolute;
            top: 50%;
            right: 25px;
            transform: translate(50%, -50%); }
        .factory_nav .factory_menu > li .factory_sub li.on a {
          background-color: #fff;
          color: #09b9c6;
          border-radius: 16px 0 0 16px;
          position: relative; }
        .factory_nav .factory_menu > li .factory_sub li.on b {
          position: absolute;
          width: 100%;
          height: 15px;
          background: #fff; }
          .factory_nav .factory_menu > li .factory_sub li.on b:after {
            content: '';
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            z-index: 1; }
          .factory_nav .factory_menu > li .factory_sub li.on b:first-of-type {
            top: -15px; }
            .factory_nav .factory_menu > li .factory_sub li.on b:first-of-type::after {
              right: 0;
              border-bottom-right-radius: 15px;
              background: #09b9c6; }
          .factory_nav .factory_menu > li .factory_sub li.on b:last-of-type {
            bottom: -15px; }
            .factory_nav .factory_menu > li .factory_sub li.on b:last-of-type::after {
              right: 0;
              border-top-right-radius: 15px;
              background: #09b9c6; }

@media screen and (max-width: 1600px) {
  .container.factory .factory_nav.on {
    padding-left: 0;
    left: 0; }
  .factory_nav .factory_menu > li .factory_title .menu_icon {
    display: block; }
    .factory_nav .factory_menu > li .factory_title .menu_icon .title_hover {
      display: none; }
    .factory_nav .factory_menu > li .factory_title .menu_icon img:hover + .title_hover {
      display: block;
      position: absolute;
      top: 50%;
      left: 50px;
      border: 1px solid rgba(203, 217, 220, 0.69);
      transform: translateY(-50%);
      background: #fff;
      white-space: nowrap;
      z-index: 10;
      padding: 10px 12px;
      font-size: 14px;
      border-radius: 8px;
      font-weight: 500;
      box-shadow: 0px 0px 10px rgba(140, 147, 151, 0.2);
      pointer-events: none;
      color: #3e4f51; }
  .factory_nav .factory_menu > li .factory_sub li a {
    position: relative; }
    .factory_nav .factory_menu > li .factory_sub li a .sub_icon {
      display: block;
      cursor: pointer; }
      .factory_nav .factory_menu > li .factory_sub li a .sub_icon .title_hover {
        display: none; }
      .factory_nav .factory_menu > li .factory_sub li a .sub_icon img:hover + .title_hover {
        display: block;
        position: absolute;
        top: 50%;
        left: 50px;
        border: 1px solid rgba(203, 217, 220, 0.69);
        transform: translateY(-50%);
        background: #fff;
        white-space: nowrap;
        z-index: 10;
        padding: 10px 12px;
        font-size: 14px;
        border-radius: 8px;
        font-weight: 500;
        box-shadow: 0px 0px 10px rgba(140, 147, 151, 0.2);
        pointer-events: none;
        color: #3e4f51; }
  .factory_nav .factory_menu > li.contents_market_li a img {
    margin-right: 0; }
  .factory_nav .factory_menu > li.contents_market_li .green_bar:after {
    content: '';
    display: block;
    width: 32px;
    height: 8px;
    border-radius: 10px;
    background-color: #0f9ba5;
    position: absolute;
    left: 50%;
    bottom: 3px;
    transform: translateX(-50%);
    z-index: -1; }
  .factory_nav h2 {
    margin-left: -100%;
    width: 200%;
    display: none; }
  .factory_nav.on h2 button {
    position: absolute;
    top: calc(50% + 1.5px);
    right: 8px;
    transform: translateY(-50%);
    width: 32px;
    height: 25px;
    background-image: url("../img/icon/icon_factory_menu.svg");
    background-size: contain;
    background-repeat: no-repeat; }
  .factory_nav .factory_menu > li .factory_sub li a:first-of-type {
    margin-left: -100%; } }

.line_tab {
  border-bottom: 1px solid #84dce2; }
  .line_tab > ul {
    display: flex; }
    .line_tab > ul li {
      min-width: 190px; }
      .line_tab > ul li a {
        font-size: 26px;
        font-weight: 700;
        line-height: 60px;
        color: #9de3e8;
        text-align: center;
        display: block;
        position: relative; }
      .line_tab > ul li.on a {
        color: #09b9c6; }
      .line_tab > ul li.on a:after {
        content: '';
        display: block;
        width: 100%;
        height: 5px;
        background-color: #09b9c6;
        position: absolute;
        bottom: 0; }

.btn_tab > ul {
  display: flex;
  border: 1px solid #09b9c6;
  border-radius: 15px;
  overflow: hidden;
  height: 55px; }
  .btn_tab > ul li {
    width: 50%; }
    .btn_tab > ul li a {
      font-size: 18px;
      color: #09b9c6;
      font-weight: 700;
      display: block;
      text-align: center;
      line-height: 55px; }
    .btn_tab > ul li.on a {
      background-color: #09b9c6;
      color: #fff; }
    .btn_tab > ul li.disabled {
      background-color: #dedede; }
      .btn_tab > ul li.disabled a {
        cursor: default; }

.tag.purple {
  border-color: #7681e5;
  color: #7681e5; }

.tag.pink {
  border-color: #ff84b0;
  color: #ff84b0; }

.course-box .title {
  border-bottom: 1px solid #9de3e8; }
  .course-box .title > span {
    display: inline-block;
    border-bottom: 5px solid #09b9c6;
    box-sizing: border-box;
    font-weight: bold;
    font-size: 26px;
    line-height: 38px;
    text-align: center;
    color: #09b9c6;
    padding-bottom: 10px; }
    .course-box .title > span img {
      margin-left: 11px; }

.course-box .search-bar {
  position: relative;
  margin-top: 30px;
  margin-bottom: 15px; }
  .course-box .search-bar input {
    height: 60px;
    border: 1px solid #7681e5;
    border-radius: 15px; }
  .course-box .search-bar button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background: #7681e5;
    border-radius: 15px; }

.course-box .list-box-no-hover .list-head {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 15px; }
  .course-box .list-box-no-hover .list-head p {
    font-size: 15px;
    line-height: 22px;
    letter-spacing: -0.02em;
    color: #24212e; }
    .course-box .list-box-no-hover .list-head p em {
      font-weight: 500; }
  .course-box .list-box-no-hover .list-head .sort-box {
    display: flex;
    align-items: center;
    gap: 22px; }
    .course-box .list-box-no-hover .list-head .sort-box button {
      display: flex;
      align-items: center; }
      .course-box .list-box-no-hover .list-head .sort-box button.on img {
        transform: rotate(180deg); }
      .course-box .list-box-no-hover .list-head .sort-box button img {
        margin-left: 6px; }

.course-box .list-box-no-hover ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px; }
  .course-box .list-box-no-hover ul .selected {
    border: 2px solid #09b9c6;
    padding: 18px 19px 12px; }
    .course-box .list-box-no-hover ul .selected .hover_event {
      display: block; }
  .course-box .list-box-no-hover ul li {
    border: 1px solid #cef1f4;
    box-sizing: border-box;
    border-radius: 20px;
    padding: 19px 20px 13px;
    cursor: pointer;
    box-sizing: border-box;
    /*
        &:hover {
          border: 2px solid #09b9c6;
          // padding: 18px 29px 16px;
        }


        &:hover {
          .hover_event {
            display: block;
          }
        }
        */ }
    .course-box .list-box-no-hover ul li.on {
      border: 2px solid #09b9c6;
      padding: 18px 19px 12px; }
    .course-box .list-box-no-hover ul li .course-subject {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #9de3e8;
      padding-bottom: 17px;
      margin-bottom: 11px; }
      .course-box .list-box-no-hover ul li .course-subject.justify_unset {
        justify-content: unset;
        position: relative; }
      .course-box .list-box-no-hover ul li .course-subject .subject {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 50%; }
        .course-box .list-box-no-hover ul li .course-subject .subject.vocabulary + .side {
          width: 50%; }
        .course-box .list-box-no-hover ul li .course-subject .subject img {
          transform: translateY(-2px); }
        .course-box .list-box-no-hover ul li .course-subject .subject .icon_box {
          height: 24px;
          background: no-repeat center 2px / contain;
          background-image: url(/img/icon/icon_star.svg); }
          .course-box .list-box-no-hover ul li .course-subject .subject .icon_box.on {
            background-image: url(/img/icon/icon_star_on.svg); }
        .course-box .list-box-no-hover ul li .course-subject .subject span {
          font-family: inherit;
          font-style: normal;
          font-weight: bold;
          font-size: 13px;
          display: flex;
          line-height: 21px;
          align-items: center;
          justify-content: center;
          color: #0f9ba5;
          background: #ffffff;
          border: 2px solid #0f9ba5;
          box-sizing: border-box;
          border-radius: 20px;
          padding: 0 15px;
          white-space: nowrap; }
          .course-box .list-box-no-hover ul li .course-subject .subject span.square {
            border-radius: 5px;
            min-width: 68px;
            text-align: center; }
            .course-box .list-box-no-hover ul li .course-subject .subject span.square.purple {
              border-color: #7681e5;
              color: #7681e5; }
            .course-box .list-box-no-hover ul li .course-subject .subject span.square.pink {
              border-color: #ff84b0;
              color: #ff84b0; }
        .course-box .list-box-no-hover ul li .course-subject .subject h3 {
          font-weight: 500;
          font-size: 20px;
          color: #24212e; }
      .course-box .list-box-no-hover ul li .course-subject .side {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 60%;
        height: 35px; }
        .course-box .list-box-no-hover ul li .course-subject .side .target {
          display: flex;
          align-items: center;
          min-width: 35px; }
          .course-box .list-box-no-hover ul li .course-subject .side .target.icon {
            width: 35px; }
          .course-box .list-box-no-hover ul li .course-subject .side .target i:not(:last-of-type) {
            margin-right: 5px; }
          .course-box .list-box-no-hover ul li .course-subject .side .target p {
            display: flex;
            align-items: center;
            font-weight: 500;
            font-size: 14px;
            color: #504d58; }
          .course-box .list-box-no-hover ul li .course-subject .side .target span {
            font-weight: 500;
            font-size: 13px;
            color: #504d58;
            margin-left: 2vw; }
    .course-box .list-box-no-hover ul li .course-detail p {
      font-size: 12px;
      font-weight: 400;
      color: #9c9ba1; }
      .course-box .list-box-no-hover ul li .course-detail p .tag {
        width: 47px;
        padding: 0;
        text-align: center;
        margin-right: 10px;
        font-size: 12px;
        font-weight: 800;
        line-height: 20px;
        vertical-align: unset; }
      .course-box .list-box-no-hover ul li .course-detail p em {
        font-weight: 500;
        color: #504d58; }
      .course-box .list-box-no-hover ul li .course-detail p:nth-of-type(2) {
        margin-left: 20px; }
      .course-box .list-box-no-hover ul li .course-detail p.voca_span span {
        margin-left: 20px;
        font-size: 14px;
        font-weight: 500; }
        .course-box .list-box-no-hover ul li .course-detail p.voca_span span:first-of-type {
          margin-left: 0; }

.course-box .list-box .list-head {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 15px; }
  .course-box .list-box .list-head p {
    font-size: 15px;
    line-height: 22px;
    letter-spacing: -0.02em;
    color: #24212e; }
    .course-box .list-box .list-head p em {
      font-weight: 500; }
  .course-box .list-box .list-head .sort-box {
    display: flex;
    align-items: center;
    gap: 22px; }
    .course-box .list-box .list-head .sort-box button {
      display: flex;
      align-items: center; }
      .course-box .list-box .list-head .sort-box button.on img {
        transform: rotate(180deg); }
      .course-box .list-box .list-head .sort-box button img {
        margin-left: 6px; }

.course-box .list-box ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px; }
  .course-box .list-box ul li.disabled {
    background-color: #dedede;
    cursor: default; }
  .course-box .list-box ul li.on {
    border: 2px solid #09b9c6; }
    .course-box .list-box ul li.on .hover_event {
      display: block; }
  .course-box .list-box ul li {
    border: 1px solid #cef1f4;
    box-sizing: border-box;
    border-radius: 20px;
    padding: 19px 20px 13px;
    cursor: pointer;
    box-sizing: border-box;
    /*
        &:hover {
          border: 2px solid #09b9c6;
          // padding: 18px 29px 16px;
           &:hover {
          .hover_event {
            display: block;
          }
        }
        }
        */ }
    .course-box .list-box ul li.on {
      border: 2px solid #09b9c6;
      padding: 18px 19px 12px; }
    .course-box .list-box ul li .course-subject {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #9de3e8;
      padding-bottom: 17px;
      margin-bottom: 11px; }
      .course-box .list-box ul li .course-subject.justify_unset {
        justify-content: unset;
        position: relative; }
      .course-box .list-box ul li .course-subject .subject {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 50%; }
        .course-box .list-box ul li .course-subject .subject.vocabulary + .side {
          width: 50%; }
        .course-box .list-box ul li .course-subject .subject img {
          transform: translateY(-2px); }
        .course-box .list-box ul li .course-subject .subject span {
          font-family: inherit;
          font-style: normal;
          font-weight: bold;
          font-size: 13px;
          line-height: 21px;
          white-space: nowrap;
          color: #0f9ba5;
          background: #ffffff;
          border: 2px solid #0f9ba5;
          box-sizing: border-box;
          border-radius: 20px;
          padding: 0 15px; }
          .course-box .list-box ul li .course-subject .subject span.square {
            border-radius: 5px;
            min-width: 68px;
            text-align: center; }
            .course-box .list-box ul li .course-subject .subject span.square.purple {
              border-color: #7681e5;
              color: #7681e5; }
            .course-box .list-box ul li .course-subject .subject span.square.pink {
              border-color: #ff84b0;
              color: #ff84b0; }
        .course-box .list-box ul li .course-subject .subject h3 {
          font-weight: 500;
          font-size: 20px;
          color: #24212e; }
      .course-box .list-box ul li .course-subject .side {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 50%;
        height: 35px;
        gap: 12px; }
        .course-box .list-box ul li .course-subject .side .target {
          min-width: 35px;
          text-align: center; }
          .course-box .list-box ul li .course-subject .side .target:not(:first-of-type) {
            margin-left: auto; }
          .course-box .list-box ul li .course-subject .side .target.icon {
            width: 35px; }
          .course-box .list-box ul li .course-subject .side .target i:not(:last-of-type) {
            margin-right: 5px; }
          .course-box .list-box ul li .course-subject .side .target p {
            display: flex;
            align-items: center;
            font-weight: 500;
            font-size: 14px;
            color: #504d58; }
          .course-box .list-box ul li .course-subject .side .target span {
            font-weight: 500;
            font-size: 13px;
            color: #504d58;
            margin-left: 2vw; }
    .course-box .list-box ul li .course-detail p {
      width: calc(50% - 20px);
      font-size: 12px;
      font-weight: 400;
      color: #9c9ba1; }
      .course-box .list-box ul li .course-detail p .tag {
        width: 47px;
        padding: 0;
        text-align: center;
        margin-right: 10px;
        font-size: 12px;
        font-weight: 800;
        line-height: 20px;
        vertical-align: unset; }
      .course-box .list-box ul li .course-detail p em {
        font-weight: 500;
        color: #504d58; }
      .course-box .list-box ul li .course-detail p:nth-of-type(2) {
        margin-left: 20px; }
      .course-box .list-box ul li .course-detail p.voca_span span {
        margin-left: 20px;
        font-size: 14px;
        font-weight: 500; }
        .course-box .list-box ul li .course-detail p.voca_span span:first-of-type {
          margin-left: 0; }

#msg-nav {
  position: absolute;
  top: 60px;
  left: 0;
  width: 250px;
  height: calc(100% - 60px);
  background: #ffffff;
  box-sizing: border-box;
  border-right: 1px solid #f2f2f7; }
  #msg-nav.user_type2 .depth_1 > div.d-f .current {
    display: none; }
  #msg-nav.user_type2 .depth_1 > div.d-f::before {
    content: '';
    display: inline-block;
    min-width: 8px;
    height: 5px;
    margin-right: 10px;
    background: url(../img/icon/icon_arrow_up.svg) no-repeat center/8px;
    transform: rotateX(-180deg);
    opacity: 1; }
  #msg-nav.user_type2 .depth_1 .noto-b {
    color: #24212e !important;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; }
  #msg-nav.user_type2 .depth_2 > div.d-f {
    justify-content: start; }
    #msg-nav.user_type2 .depth_2 > div.d-f::before {
      content: '';
      display: inline-block;
      min-width: 4px;
      height: 4px;
      margin-right: 10px;
      background: #a7a6ab;
      border-radius: 50%; }
  #msg-nav.user_type2 .depth_2 .depth_2_inner {
    display: flex;
    width: 100%;
    padding-right: 0; }
  #msg-nav.user_type2 .depth_2.depth_on > div.d-f::before {
    opacity: 1;
    background-color: #09b9c6; }
  #msg-nav.teacher_type > ul {
    height: calc(100% - 56px); }
  #msg-nav > button {
    width: calc(100% - 40px);
    margin: 16px 20px 4px; }
  #msg-nav > ul {
    height: 100%;
    overflow-y: auto; }
  #msg-nav li {
    padding: 12px 20px 14px;
    border-bottom: 1px solid #f2f2f7 !important;
    cursor: pointer; }
    #msg-nav li.notice {
      position: relative;
      padding: 16px 20px 0; }
      #msg-nav li.notice > div {
        margin-bottom: 16px; }
        #msg-nav li.notice > div .noto-b {
          display: flex;
          align-items: center;
          color: #24212e;
          font-size: 16px;
          font-weight: 700;
          line-height: 28px; }
          #msg-nav li.notice > div .noto-b::before {
            content: '';
            display: inline-block;
            width: 8px;
            height: 5px;
            margin-right: 10px;
            background: url("../img/icon/icon_arrow_up.svg") no-repeat center/8px;
            transform: rotateX(-180deg);
            opacity: 1; }
        #msg-nav li.notice > div .counting {
          background: #ff5050; }
      #msg-nav li.notice ul {
        width: calc(100% + 40px);
        margin-left: -20px;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.06) 100%), var(--Backgrounds-Primary, #fff); }
        #msg-nav li.notice ul li {
          padding: 12px 20px; }
          #msg-nav li.notice ul li > div {
            margin-bottom: 0; }
            #msg-nav li.notice ul li > div .noto-b {
              color: #504d58;
              font-size: 13px;
              font-weight: 500;
              line-height: 20px; }
              #msg-nav li.notice ul li > div .noto-b::before {
                content: '';
                display: inline-block;
                width: 4px;
                height: 4px;
                margin-right: 10px;
                background: #a7a6ab;
                border-radius: 50%; }
            #msg-nav li.notice ul li > div.active .noto-b {
              color: #09b9c6; }
              #msg-nav li.notice ul li > div.active .noto-b::before {
                background: #09b9c6; }
      #msg-nav li.notice.notice_on > div .noto-b::before {
        transform: rotateX(0deg);
        opacity: 0.6; }
    #msg-nav li.inner_notice {
      padding: 8px 20px 10px;
      background-color: #ffaa04; }
      #msg-nav li.inner_notice p {
        display: flex;
        align-items: center; }
        #msg-nav li.inner_notice p::before {
          content: '';
          display: inline-block;
          width: 14px;
          height: 14px;
          margin-right: 8px;
          background: url("../img/icon/icon_alarm_w.svg") no-repeat center/14px; }
      #msg-nav li.inner_notice p {
        color: #fff;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden; }
    #msg-nav li.depth_2 {
      padding: 10px 20px 0;
      background: #f8f8fa;
      border: 1px solid transparent;
      /*마진병합현상 해결*/ }
      #msg-nav li.depth_2 > div {
        margin-bottom: 14px; }
        #msg-nav li.depth_2 > div::before {
          content: '';
          display: inline-block;
          min-width: 8px;
          height: 5px;
          margin-right: 10px;
          background: url("../img/icon/icon_arrow_up.svg") no-repeat center/8px;
          transform: rotateX(-180deg);
          opacity: 1; }
        #msg-nav li.depth_2 > div .depth_2_inner {
          width: calc(100% - 42px);
          padding-right: 16px; }
          #msg-nav li.depth_2 > div .depth_2_inner span {
            font-size: 15px;
            font-weight: 500;
            line-height: 24px; }
            #msg-nav li.depth_2 > div .depth_2_inner span.member_num {
              font-size: 13px;
              line-height: 20px;
              color: #7c7a82;
              font-weight: 500; }
      #msg-nav li.depth_2 ul .depth_3 {
        width: calc(100% + 40px);
        margin-left: -20px;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.06) 100%), var(--Backgrounds-Primary, #fff);
        padding: 12px 20px 14px; }
        #msg-nav li.depth_2 ul .depth_3 .noto-b {
          width: calc(100% - 24px);
          display: flex;
          flex-wrap: wrap;
          align-items: center; }
          #msg-nav li.depth_2 ul .depth_3 .noto-b span {
            width: calc(100% - 24px);
            color: #504d58;
            font-size: 13px;
            font-weight: 500;
            line-height: 20px; }
          #msg-nav li.depth_2 ul .depth_3 .noto-b::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 4px;
            margin-right: 10px;
            background: #a7a6ab;
            border-radius: 50%; }
        #msg-nav li.depth_2 ul .depth_3 img {
          display: none;
          margin-right: 5px; }
        #msg-nav li.depth_2 ul .depth_3.active .noto-b::before {
          background-color: #09b9c6; }
        #msg-nav li.depth_2 ul .depth_3.active .noto-b span {
          color: #09b9c6; }
        #msg-nav li.depth_2 ul .depth_3.active img {
          display: block; }
      #msg-nav li.depth_2.depth_on > div::before {
        transform: rotateX(0deg);
        opacity: 0.6; }
    #msg-nav li.depth_1 {
      padding: 16px 20px; }
      #msg-nav li.depth_1 .noto-b {
        color: #24212e;
        font-size: 16px;
        font-weight: 700;
        line-height: 28px; }
      #msg-nav li.depth_1 .active_li .msg_title {
        color: #09b9c6; }
      #msg-nav li.depth_1 .active_li::before {
        transform: rotateX(0deg) !important; }
    #msg-nav li .counting {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      min-width: 24px;
      height: 24px;
      background: #7681e5;
      font-family: 'Noto Sans KR';
      font-weight: bold;
      font-size: 12px;
      color: #ffffff;
      border-radius: 50%;
      line-height: 24px; }

/*
@media screen and(max-width:1024px) {
  #msg-nav {
    position: static;
    width: 100%;
    flex: 1;
    border-radius: 8px 8px 0 0;
    padding: 20px 20px 16px;
    border: 1px solid #e9e9ea;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
    &.user_type2 {
      padding: 20px;
    }
    .total-chat {
      ul {
        border-bottom: 1px solid #e3e2f0;
        // padding-bottom: 5px;
        gap: 0;
        width: calc(100% + 40px);
        margin-left: -20px;
        li {
          // margin-bottom: 20px;
          // padding: 14px 20px 16px 36px;
          padding: 12px 20px 14px 20px;
          border-bottom: 1px solid #e9e9ea;
          background: #f8f8fa;
          &.sub {
            p {
              position: relative;
              padding-left: 18px;
              font-size: 13px;
              font-weight: 500;
              &::after {
                content: '';
                display: block;
                width: 8px;
                height: 5px;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                background: url('../img/icon/icon_arrow_up.svg') no-repeat center/8px;
              }
            }
            &.user_alarm {
              background: #ffaa04;
              p {
                &::after {
                  width: 14px;
                  height: 14px;
                  background: url('../img/icon/icon_alarm_w.svg') no-repeat center / 14px;
                }
              }
              p {
                color: #fff;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
            }
          }
          &.user_type3 {
            position: relative;
            background: #f0f0f0;
            &::after {
              width: 4px;
              height: 4px;
              border-radius: 50%;
              background: #a7a6ab;
              left: 22px;
            }
            p {
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
            &.active {
              padding-right: 40px;
              &::before {
                content: '';
                display: block;
                width: 14px;
                height: 14px;
                position: absolute;
                top: 50%;
                right: 20px;
                transform: translateY(-50%);
                background: url('../img/icon/icon_arrow_right_cyan.svg') no-repeat center / 14px;
              }
              &::after {
                background-color: #09b9c6;
              }
              p {
                color: #09b9c6;
              }
            }
          }
          &.user_type2 {
            background-color: #fff;
            & > div {
              &:first-of-type {
                position: relative;
                padding-left: 18px;
                &::after {
                  content: '';
                  display: block;
                  width: 8px;
                  height: 5px;
                  position: absolute;
                  left: 0;
                  top: 50%;
                  transform: translateY(-50%);
                  background: url('../img/icon/icon_arrow_up.svg') no-repeat center/8px;
                }
              }
            }
          }
          &.main {
            border-top: 1px solid #e9e9ea;
            border-bottom: 1px solid #e3e2f0;
            padding: 16px 20px;
            margin-bottom: 0;
            background-color: #fff;
            span {
              font-size: 16px;
            }
          }
        }
      }
      button {
        width: 100%;
        margin: 0 0 20px 0;
      }
      .mobile-notice {
        display: flex;
        flex-direction: column;
        // gap: 20px;
        // margin-top: 16px;
        // margin-top: 30px;
        gap: 0;
        .depth {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 20px;
          .counting {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            background: #ff5050;
            font-family: 'Inter', 'Noto Sans KR';
            font-weight: 600;
            font-size: 12px;
            color: #ffffff;
            border-radius: 50%;
          }
          &.main {
            position: relative;
            // padding: 17px 0 18px;
            // padding: 0 0 18px;
            padding: 0 0 16px 18px;
            &:before {
              content: '';
              display: inline-block;
              width: 8px;
              height: 8px;
              background: url('../../../img/icon/icon_arrow_up.svg') no-repeat center;
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(calc(-50% - 8px)) scale(-1);
            }
            span {
              font-size: 16px;
              line-height: 28px;
              color: #24212e;
            }
            &.on {
              // background: #09b9c6;
              // box-shadow: 0px 3px 4px rgba(104, 154, 170, 0.3);
              // border-radius: 10px;
              // span {
              //   color: #09b9c6;
              //   // color: #fff;
              // }
              // &::before {
              //   content: '';
              //   display: block;
              //   width: 14px;
              //   height: 14px;
              //   position: absolute;
              //   top: 50%;
              //   right: 0;
              //   transform: translateY(-50%);
              //   background: url('../img/icon/icon_arrow_right_cyan.svg') no-repeat center / 14px;
              // }
              &:before {
                transform: translateY(calc(-50% - 8px)) scale(1);
              }
            }
          }
          &.sub {
            // padding: 0 20px;
            width: calc(100% + 40px);
            margin-left: -20px;
            padding: 12px 20px 14px 36px;
            position: relative;
            background-color: #f0f0f0;
            &.first {
              border-top: 1px solid #e9e9ea;
            }
            &::before {
              content: '';
              display: inline-block;
              width: 4px;
              height: 4px;
              border-radius: 50%;
              background-color: #a7a6ab;
              position: absolute;
              left: 22px;
              top: 50%;
              transform: translateY(-50%);
            }
            span {
              font-size: 13px;
              line-height: 20px;
            }
          }
        }
      }
    }
  }
}
*/
@media screen and (max-width: 1024px) {
  #msg-nav {
    position: static;
    width: 100%;
    min-height: calc(100% - 72px);
    border-radius: 8px 8px 0 0;
    border: 1px solid #e9e9ea;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06); }
    #msg-nav > button {
      margin: 20px 20px 4px; }
    #msg-nav > ul {
      height: calc(100% - 60px); } }

#mobile-msg-st-nav {
  border-radius: 15px 15px 0 0;
  padding: 30px 16px;
  background: #fff;
  flex: 1; }
  #mobile-msg-st-nav > ul {
    display: flex;
    flex-direction: column; }
    #mobile-msg-st-nav > ul > li:not(:last-of-type) {
      margin-bottom: 30px; }
    #mobile-msg-st-nav > ul > li:nth-last-of-type(2) .sub-depth {
      border: none;
      padding-bottom: 0; }
    #mobile-msg-st-nav > ul > li .main-depth.notice {
      padding-top: 21px;
      border-top: 1px solid #e9e9ea; }
    #mobile-msg-st-nav > ul > li .main-depth .subject {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 0; }
      #mobile-msg-st-nav > ul > li .main-depth .subject span {
        font-size: 16px;
        line-height: 23px;
        color: #24212e; }
      #mobile-msg-st-nav > ul > li .main-depth .subject .main-chat-counting {
        display: flex;
        align-items: center;
        gap: 20px; }
        #mobile-msg-st-nav > ul > li .main-depth .subject .main-chat-counting .chat-counting {
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          width: 30px;
          height: 30px;
          background: #919aea;
          font-size: 11px;
          color: #fff; }
          #mobile-msg-st-nav > ul > li .main-depth .subject .main-chat-counting .chat-counting.notice {
            background: #ff5050; }
        #mobile-msg-st-nav > ul > li .main-depth .subject .main-chat-counting img {
          width: 18px;
          height: 12px; }
      #mobile-msg-st-nav > ul > li .main-depth .subject.active {
        background: #09b9c6;
        box-shadow: 0px 3px 4px rgba(104, 154, 170, 0.3);
        border-radius: 10px;
        padding: 17px 20px 18px; }
        #mobile-msg-st-nav > ul > li .main-depth .subject.active span {
          color: #fff; }
        #mobile-msg-st-nav > ul > li .main-depth .subject.active .main-chat-counting .chat-counting {
          display: none; }
          #mobile-msg-st-nav > ul > li .main-depth .subject.active .main-chat-counting .chat-counting.notice {
            background: #ff5050; }
    #mobile-msg-st-nav > ul > li .sub-depth {
      margin-top: 20px;
      padding: 0 16px;
      border-bottom: 1px solid #e9e9ea;
      padding-bottom: 25px; }
      #mobile-msg-st-nav > ul > li .sub-depth.notice {
        border-bottom: none; }
      #mobile-msg-st-nav > ul > li .sub-depth > ul {
        display: flex;
        flex-direction: column;
        gap: 25px; }
        #mobile-msg-st-nav > ul > li .sub-depth > ul > li {
          display: flex;
          align-items: center;
          justify-content: space-between; }
          #mobile-msg-st-nav > ul > li .sub-depth > ul > li p span {
            font-size: 14px;
            line-height: 20px;
            color: #24212e; }
            #mobile-msg-st-nav > ul > li .sub-depth > ul > li p span.with-bar:after {
              content: '';
              display: inline-block;
              width: 1px;
              height: 12px;
              background: #000;
              margin: 0 5px; }
          #mobile-msg-st-nav > ul > li .sub-depth > ul > li .chat-counting {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            background: #919aea;
            font-size: 11px;
            color: #fff; }
            #mobile-msg-st-nav > ul > li .sub-depth > ul > li .chat-counting.notice {
              background: #ff5050; }

@media screen and (max-width: 1024px) {
  #mobile-msg-st-nav {
    padding-top: 15px; } }

#channel-list {
  width: 380px;
  background: #ffffff;
  border: 1px solid #d3d3d5;
  box-sizing: border-box;
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  height: 840px; }
  #channel-list .head {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #d3d3d5;
    height: 70px; }
    #channel-list .head button {
      font-weight: bold;
      font-size: 16px;
      color: #7681e5; }
      #channel-list .head button img {
        margin-right: 5px;
        transform: translateY(-2px); }
  #channel-list .channel-list {
    overflow: hidden; }
    #channel-list .channel-list ul {
      display: flex;
      flex-direction: column;
      overflow: auto;
      max-height: 730px;
      width: 100%;
      padding-bottom: 5px; }
      #channel-list .channel-list ul li {
        cursor: pointer;
        padding: 25px; }
        #channel-list .channel-list ul li .name {
          display: flex;
          justify-content: space-between;
          margin-bottom: 5px; }
          #channel-list .channel-list ul li .name p {
            font-size: 18px;
            color: #504d58;
            width: 100%;
            flex: 1; }
            #channel-list .channel-list ul li .name p em {
              font-size: 16px;
              color: inherit; }
              #channel-list .channel-list ul li .name p em:not(:first-of-type) {
                margin-left: 5px; }
            #channel-list .channel-list ul li .name p.student-ver {
              font-size: 15px; }
              #channel-list .channel-list ul li .name p.student-ver em {
                font-size: inherit;
                border-right: 2px solid #7c7a82;
                padding-right: 10px;
                margin-right: 10px;
                display: inline-block;
                line-height: 1; }
          #channel-list .channel-list ul li .name span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 21px;
            height: 21px;
            border-radius: 50%;
            font-weight: 600;
            font-size: 12px;
            color: #fff; }
            #channel-list .channel-list ul li .name span.campus {
              background: #7681e5; }
            #channel-list .channel-list ul li .name span.notice {
              background: #ff5050; }
        #channel-list .channel-list ul li > span {
          font-style: normal;
          font-weight: 500;
          font-size: 14px;
          color: #504d58; }
        #channel-list .channel-list ul li.visited .name p {
          color: #a7a6ab; }
        #channel-list .channel-list ul li.visited .name span {
          display: none; }
        #channel-list .channel-list ul li.visited span {
          color: #a7a6ab;
          line-height: 1.5; }
        #channel-list .channel-list ul li.current {
          background: #09b9c6;
          box-shadow: 0px 4px 3px rgba(104, 115, 170, 0.3);
          border-radius: 15px; }
          #channel-list .channel-list ul li.current .name p {
            color: #fff; }
            #channel-list .channel-list ul li.current .name p.student-ver em {
              border-color: #fff; }
          #channel-list .channel-list ul li.current .name span {
            display: none; }
          #channel-list .channel-list ul li.current span {
            color: #fff; }

@media screen and (max-width: 1024px) {
  #channel-list {
    width: 100%;
    height: initial;
    border-radius: 0;
    overflow: initial;
    box-shadow: none;
    border: none; }
    #channel-list .head {
      height: 63px; }
    #channel-list .channel-list {
      padding: 20px 10px 24px 16px;
      overflow: initial; }
      #channel-list .channel-list ul {
        overflow: initial;
        display: flex;
        flex-direction: column;
        gap: 27px; }
        #channel-list .channel-list ul li {
          padding: 0; }
          #channel-list .channel-list ul li .st-profile {
            display: flex;
            gap: 10px; }
            #channel-list .channel-list ul li .st-profile .img-holder {
              width: 40px;
              height: 40px;
              border-radius: 50%; }
              #channel-list .channel-list ul li .st-profile .img-holder img {
                display: block;
                width: 100%;
                height: 100%;
                border-radius: inherit; }
            #channel-list .channel-list ul li .st-profile .desc {
              width: calc(100% - 50px);
              flex: 1; } }

#mobile-msg-dialog {
  padding-top: 48px; }
  #mobile-msg-dialog #msg-dialog {
    background-color: #ffffff; }
    #mobile-msg-dialog #msg-dialog .body {
      padding: 0 20px; }
      #mobile-msg-dialog #msg-dialog .body .alert_type {
        width: calc(100% + 40px);
        margin-left: -20px; }
      #mobile-msg-dialog #msg-dialog .body .dialog-box {
        gap: 0; }
        #mobile-msg-dialog #msg-dialog .body .dialog-box > *:not(:first-child) {
          margin-top: 24px; }
        #mobile-msg-dialog #msg-dialog .body .dialog-box > *.alert-date {
          margin-top: 35px; }
          #mobile-msg-dialog #msg-dialog .body .dialog-box > *.alert-date:first-child {
            margin-top: 11px; }
        #mobile-msg-dialog #msg-dialog .body .dialog-box > *.alert_type + .alert_type {
          margin-top: 8px; }
        #mobile-msg-dialog #msg-dialog .body .dialog-box.notice {
          max-height: none; }
        #mobile-msg-dialog #msg-dialog .body .dialog-box .alert-date span {
          font-size: 13px;
          line-height: 20px; }
        #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-master,
        #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-text {
          margin-top: 64px; }
          #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-master .bubble_prof,
          #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-text .bubble_prof {
            left: -16px;
            top: -32px;
            margin-bottom: 0; }
          #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-master .date,
          #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-text .date {
            font-size: 12px;
            line-height: 18px; }
            #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-master .date.not-read .member_not_read,
            #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-text .date.not-read .member_not_read {
              font-size: 12px;
              line-height: 18px;
              font-weight: 700;
              margin-left: 4px;
              color: #09b9c6; }
        #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-text {
          padding: 0; }
          #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-text.get .bubble {
            max-width: none; }
          #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-text .bubble_prof {
            left: -16px; }
          #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-text .msg-dialog-notice-button-wrapper {
            margin-top: 0; }
        #mobile-msg-dialog #msg-dialog .body .dialog-box .prof_use_text .chat-master-file {
          margin-left: 0; }
        #mobile-msg-dialog #msg-dialog .body .dialog-box .alert-date::before {
          width: 100%;
          left: 0; }

#msg-dialog {
  background: #ffffff;
  border: 1px solid #d3d3d5;
  box-sizing: border-box;
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  height: 840px;
  display: flex;
  flex-direction: column;
  flex: 1; }
  #msg-dialog .head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e9e9ea;
    padding: 17px 24px; }
    #msg-dialog .head .user {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      width: calc(100% - 194px); }
      #msg-dialog .head .user .thumbnail {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        overflow: hidden;
        transform: translateY(2px); }
        #msg-dialog .head .user .thumbnail img {
          width: 100%;
          height: 100%;
          border-radius: inherit;
          object-fit: cover; }
      #msg-dialog .head .user .name {
        margin-left: 10px;
        width: calc(100% - 42px); }
        #msg-dialog .head .user .name p {
          font-weight: 700;
          font-size: 22px;
          line-height: 34px;
          color: #504d58;
          width: 100%;
          flex: 1;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden; }
          #msg-dialog .head .user .name p em {
            font-weight: 500;
            font-size: 16px;
            color: inherit;
            margin-left: 5px; }
    #msg-dialog .head .btn-wrap {
      flex-shrink: 0;
      display: flex;
      position: relative; }
      #msg-dialog .head .btn-wrap button {
        min-width: 85px; }
  #msg-dialog .body {
    height: calc(100% - 77px); }
    #msg-dialog .body .bubble_prof {
      display: flex;
      align-items: center;
      margin-bottom: 6px; }
      #msg-dialog .body .bubble_prof .prof {
        position: absolute;
        top: 0;
        left: 0;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        margin-right: 12px;
        background: url("/img/icon/icon_user_prof2.svg") no-repeat center/cover; }
      #msg-dialog .body .bubble_prof .prof_name {
        font-size: 18px;
        font-weight: 500;
        color: #24212e; }
    #msg-dialog .body .bubble .text {
      margin-top: 8px;
      line-height: 22px; }
      #msg-dialog .body .bubble .text > a {
        color: #09b9c6;
        text-decoration: underline;
        line-height: inherit; }
    #msg-dialog .body .bubble.file .text {
      color: #504d58;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      margin-bottom: 16px; }
    #msg-dialog .body .bubble.file .prof_use_text {
      margin-bottom: 16px; }
    #msg-dialog .body .bubble.file .label {
      font-size: 13px;
      color: #a7a6ab;
      margin-bottom: 8px;
      line-height: 20px; }
    #msg-dialog .body .bubble.file .all_download {
      font-size: 12px;
      color: #7c7a82;
      margin-top: 8px; }
      #msg-dialog .body .bubble.file .all_download img {
        margin-right: 6px; }
    #msg-dialog .body .bubble li:not(:last-of-type) {
      margin-bottom: 8px; }
    #msg-dialog .body .bubble li a {
      padding: 8px 12px;
      border-radius: 6px;
      background-color: #fff;
      color: #504d58; }
      #msg-dialog .body .bubble li a img {
        margin-right: 8px; }
    #msg-dialog .body .bubble .file_info_box {
      margin-left: -46px; }
    #msg-dialog .body .dialog-box {
      display: flex;
      flex-direction: column;
      gap: 20px;
      flex: 1;
      overflow: auto;
      height: calc(100% - 68px);
      padding: 24px 0; }
      #msg-dialog .body .dialog-box.notice {
        height: calc(100% - 33px) !important; }
      #msg-dialog .body .dialog-box .invite_btn_wrap {
        text-align: right;
        margin-top: 32px; }
        #msg-dialog .body .dialog-box .invite_btn_wrap.no_btn {
          margin-top: 0; }
        #msg-dialog .body .dialog-box .invite_btn_wrap button {
          padding: 6px 10px;
          border-radius: 6px;
          background-color: gray;
          color: white;
          white-space: nowrap;
          max-width: 100%;
          overflow: hidden;
          text-overflow: ellipsis; }
          #msg-dialog .body .dialog-box .invite_btn_wrap button.prime {
            background: #09b9c6; }
          #msg-dialog .body .dialog-box .invite_btn_wrap button.gray {
            background: #a7a6ab; }
          #msg-dialog .body .dialog-box .invite_btn_wrap button:not(:last-child) {
            margin-right: 10px; }
      #msg-dialog .body .dialog-box .alert-date {
        position: relative;
        margin: 11px 0; }
        #msg-dialog .body .dialog-box .alert-date::before {
          content: '';
          display: block;
          width: calc(100% - 56px);
          height: 1px;
          background: #f2f2f7;
          position: absolute;
          top: 50%;
          left: 28px;
          transform: translateY(-50%); }
        #msg-dialog .body .dialog-box .alert-date span {
          display: inline-block;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-weight: 700;
          font-size: 13px;
          color: #504d58;
          padding: 0 16px;
          background-color: #fff; }
      #msg-dialog .body .dialog-box .prof_use_text {
        position: relative;
        padding-left: 46px; }
        #msg-dialog .body .dialog-box .prof_use_text .chat-master-file {
          margin-left: -46px; }
      #msg-dialog .body .dialog-box .chat-master {
        position: relative;
        color: #707070;
        padding: 20px;
        background: #f8f8fa;
        border-radius: 0px 12px 12px 12px;
        display: inline-block;
        width: max-content;
        max-width: calc(80% - 50px);
        border: 1px solid #e9e9ea;
        margin: 0 28px; }
        #msg-dialog .body .dialog-box .chat-master .bubble_file {
          display: none; }
        #msg-dialog .body .dialog-box .chat-master.purple {
          border: 1px solid rgba(118, 129, 229, 0.12);
          background: rgba(118, 129, 229, 0.12); }
        #msg-dialog .body .dialog-box .chat-master .date {
          position: absolute;
          bottom: 0;
          right: -12px;
          transform: translateX(100%);
          color: #a7a6ab;
          font-size: 13px;
          font-weight: 500;
          line-height: 20px; }
          #msg-dialog .body .dialog-box .chat-master .date.not-read .member_not_read {
            font-size: inherit;
            line-height: inherit;
            font-weight: 700;
            margin-left: 6px;
            color: #09b9c6; }
      #msg-dialog .body .dialog-box .chat-text {
        display: flex;
        align-items: flex-end;
        gap: 12px;
        padding: 0 28px; }
        #msg-dialog .body .dialog-box .chat-text .msg-dialog-notice-button-wrapper {
          margin-top: 20px; }
        #msg-dialog .body .dialog-box .chat-text .bubble {
          line-height: 1.45; }
          #msg-dialog .body .dialog-box .chat-text .bubble.chat-file a {
            display: flex;
            align-items: center;
            gap: 5px;
            color: #09b9c6;
            text-decoration: underline; }
        #msg-dialog .body .dialog-box .chat-text .date {
          font-weight: 500;
          font-size: 13px;
          color: #a7a6ab;
          min-width: max-content; }
          #msg-dialog .body .dialog-box .chat-text .date.not-read {
            position: relative;
            min-width: 90px; }
            #msg-dialog .body .dialog-box .chat-text .date.not-read .member_not_read {
              color: #09b9c6;
              font-size: 13px;
              font-weight: 700;
              margin-left: 6px; }
        #msg-dialog .body .dialog-box .chat-text.send .bubble {
          font-weight: 500;
          background: #f8f8fa;
          border-radius: 0px 12px 12px 12px;
          white-space: pre-line;
          padding: 20px;
          border: 1px solid #e9e9ea; }
        #msg-dialog .body .dialog-box .chat-text.get .bubble {
          font-weight: 500;
          background: #f8f8f8;
          border: 1px solid #e9e9ea;
          box-sizing: border-box;
          border-radius: 0px 12px 12px 12px;
          padding: 20px;
          white-space: pre-line;
          max-width: 900px; }
          #msg-dialog .body .dialog-box .chat-text.get .bubble.img {
            padding: 20px; }
        #msg-dialog .body .dialog-box .chat-text.get.notice .bubble {
          font-weight: 500;
          background: #f8f8f8;
          border: 1px solid #e9e9ea;
          box-sizing: border-box;
          border-radius: 0px 15px 15px 15px;
          padding: 11px 20px 10px;
          filter: none; }
        #msg-dialog .body .dialog-box .chat-text.get.notice2 .bubble {
          font-weight: 500;
          background: #f8f8f8;
          border: 1px solid #e9e9ea;
          box-sizing: border-box;
          border-radius: 0px 15px 15px 15px;
          padding: 11px 20px 10px;
          color: #504d58;
          filter: none; }
      #msg-dialog .body .dialog-box .alert_type {
        background: #f5f5f5;
        font-size: 13px;
        font-weight: 500;
        line-height: 28px;
        text-align: center; }
        #msg-dialog .body .dialog-box .alert_type span {
          color: #a7a6ab;
          font-size: 13px;
          font-weight: 500;
          margin-left: 8px; }
    #msg-dialog .body .chat-input {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: auto;
      padding: 0 24px; }
      #msg-dialog .body .chat-input input {
        all: unset;
        font-size: 16px;
        padding: 20px 0;
        width: 90%; }
      #msg-dialog .body .chat-input .btn-wrap {
        display: flex;
        gap: 20px; }
        #msg-dialog .body .chat-input .btn-wrap button:nth-of-type(2) {
          width: 76px;
          height: 34px;
          font-size: 14px;
          font-weight: normal;
          border-radius: 8px; }

@media screen and (max-width: 1800px) {
  #msg-dialog .body .dialog-box .chat-text.get .bubble {
    max-width: calc(80% - 50px); } }

@media screen and (max-width: 1200px) {
  #msg-dialog .body .dialog-box .alert_type span {
    display: block;
    margin-left: 0;
    line-height: 1;
    padding-bottom: 8px; } }

@media screen and (max-width: 1024px) {
  #mobile-msg-dialog.notice_version #msg-dialog .body {
    margin-bottom: 0; }
    #mobile-msg-dialog.notice_version #msg-dialog .body .dialog-box.notice .chat-master,
    #mobile-msg-dialog.notice_version #msg-dialog .body .dialog-box.notice .chat-text {
      padding: 16px 0; }
      #mobile-msg-dialog.notice_version #msg-dialog .body .dialog-box.notice .chat-master.notice2,
      #mobile-msg-dialog.notice_version #msg-dialog .body .dialog-box.notice .chat-text.notice2 {
        margin-top: 0; }
  #mobile-msg-dialog #msg-dialog {
    width: 100%;
    height: initial;
    border: none;
    box-shadow: none;
    border-radius: initial;
    overflow: auto; }
    #mobile-msg-dialog #msg-dialog.notice {
      height: calc(100vh - 56px); }
    #mobile-msg-dialog #msg-dialog .head {
      display: none; }
    #mobile-msg-dialog #msg-dialog .body {
      margin-bottom: 57px; }
      #mobile-msg-dialog #msg-dialog .body .bubble.file .all_download {
        margin-top: 12px; }
      #mobile-msg-dialog #msg-dialog .body .bubble .text {
        margin-top: 0; }
      #mobile-msg-dialog #msg-dialog .body .dialog-box {
        overflow: visible;
        max-height: initial;
        margin: 0;
        gap: 8px; }
        #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-master,
        #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-text {
          position: relative;
          margin-top: 44px;
          padding: 16px;
          margin-left: 0; }
          #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-master .prof_use_text,
          #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-text .prof_use_text {
            position: static; }
          #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-master .bubble_prof,
          #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-text .bubble_prof {
            width: calc(100vw - 40px);
            position: absolute;
            top: -40px;
            left: 0; }
            #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-master .bubble_prof .prof,
            #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-text .bubble_prof .prof {
              width: 24px;
              height: 24px;
              margin-right: 8px; }
            #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-master .bubble_prof .prof_name,
            #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-text .bubble_prof .prof_name {
              color: #24212e;
              font-size: 16px;
              font-weight: 500;
              line-height: 24px;
              padding-left: 32px; }
          #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-master .prof_use_text,
          #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-text .prof_use_text {
            padding-left: 0; }
          #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-master .file_info_box,
          #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-text .file_info_box {
            margin-left: 0; }
        #mobile-msg-dialog #msg-dialog .body .dialog-box.notice {
          max-height: initial; }
        #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-text .date {
          font-size: 10px; }
          #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-text .date.not-read {
            min-width: 45px;
            padding-left: 0; }
            #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-text .date.not-read::before {
              width: 8px;
              height: 8px;
              left: -3px; }
        #mobile-msg-dialog #msg-dialog .body .dialog-box .chat-text .bubble {
          padding: 16px !important; }
        #mobile-msg-dialog #msg-dialog .body .dialog-box .alert-date {
          border: 0; }
          #mobile-msg-dialog #msg-dialog .body .dialog-box .alert-date span {
            font-size: 12px;
            background-color: #ffffff;
            width: max-content; }
      #mobile-msg-dialog #msg-dialog .body .chat-input-not-between {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 68px;
        padding: 0 30px;
        border-top: 1px solid #d3d3d5;
        margin-top: auto; }
        #mobile-msg-dialog #msg-dialog .body .chat-input-not-between input {
          all: unset;
          font-size: 16px;
          padding: 20px 0;
          width: 90%; }
        #mobile-msg-dialog #msg-dialog .body .chat-input-not-between .btn-wrap {
          display: flex;
          gap: 20px; }
          #mobile-msg-dialog #msg-dialog .body .chat-input-not-between .btn-wrap button:nth-of-type(2) {
            width: 211px; }
      #mobile-msg-dialog #msg-dialog .body .chat-input {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0;
        height: 57px;
        background: #fff;
        padding: 20px;
        /* ios fixed 이슈 관련 */ } }
      @media screen and (max-width: 1024px) and (orientation: landscape) {
        #mobile-msg-dialog #msg-dialog .body .chat-input {
          position: fixed; } }
      @media screen and (max-width: 1024px) and (orientation: portrait) {
        #mobile-msg-dialog #msg-dialog .body .chat-input {
          position: fixed; } }

@media screen and (max-width: 1024px) {
        #mobile-msg-dialog #msg-dialog .body .chat-input input {
          order: 2; }
        #mobile-msg-dialog #msg-dialog .body .chat-input .btn-wrap {
          order: 1; }
          #mobile-msg-dialog #msg-dialog .body .chat-input .btn-wrap .add-file {
            margin-right: 15px; }
            #mobile-msg-dialog #msg-dialog .body .chat-input .btn-wrap .add-file img {
              width: 17px;
              height: 29px; }
        #mobile-msg-dialog #msg-dialog .body .chat-input .send-btn {
          order: 3; }
          #mobile-msg-dialog #msg-dialog .body .chat-input .send-btn button {
            display: flex;
            align-items: center;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            padding: 0 8px 0 5px;
            background: #7681e5; }
            #mobile-msg-dialog #msg-dialog .body .chat-input .send-btn button img {
              display: inline-block;
              width: 18px;
              height: 18px; } }

.msg-comment-closer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* ios fixed 이슈 관련 */ }
  @media (orientation: landscape) {
    .msg-comment-closer {
      position: fixed; } }
  @media (orientation: portrait) {
    .msg-comment-closer {
      position: fixed; } }

#msg-comment {
  width: 500px;
  position: absolute;
  top: 45px;
  right: 0;
  background: #ffffff;
  border: 1px solid #e9e9ea;
  box-sizing: border-box;
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  padding: 30px 8px 30px 30px;
  z-index: 10; }
  #msg-comment:after {
    content: '';
    position: absolute;
    top: -11px;
    right: 133px;
    border-left: 1px solid #e9e9ea;
    border-top: 1px solid #e9e9ea;
    background: #fff;
    width: 20px;
    height: 20px;
    transform: rotate(45deg); }
  #msg-comment ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-right: 12px;
    overflow: auto;
    max-height: 525px; }
    #msg-comment ul li {
      display: flex;
      align-items: center;
      gap: 20px;
      border: 1px solid #d3d3d5;
      box-sizing: border-box;
      border-radius: 10px;
      padding: 11px 15px;
      cursor: pointer; }
      #msg-comment ul li.on {
        border: 1px solid #09b9c6;
        box-sizing: border-box;
        border-radius: 10px; }
      #msg-comment ul li .text {
        flex: 1; }
        #msg-comment ul li .text p {
          font-size: 13px;
          line-height: 19px;
          color: #504d58; }
      #msg-comment ul li .btn-wrap {
        display: flex;
        width: 70px;
        gap: 10px; }
        #msg-comment ul li .btn-wrap button {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          background: #e6f8f9; }
  #msg-comment textarea {
    width: 100%;
    height: 450px;
    border: 1px solid #d3d3d5;
    box-sizing: border-box;
    border-radius: 10px;
    padding: 15px;
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
    word-break: break-all;
    color: #504d58; }
    #msg-comment textarea::placeholder {
      color: #a7a6ab; }
  #msg-comment .comment-button {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 25px; }
    #msg-comment .comment-button button {
      width: 112px;
      margin: initial; }

@media screen and (max-width: 1024px) {
  .msg-comment-closer {
    display: none; }
  #msg-comment {
    width: 100%;
    position: static;
    padding: 30px 16px;
    height: calc(100vh - 56px);
    border-radius: 0; }
    #msg-comment .comment-button {
      gap: 15px; }
      #msg-comment .comment-button button {
        flex: 1; }
    #msg-comment textarea {
      height: calc(100vh - 193px); }
    #msg-comment ul {
      max-height: initial;
      height: calc(100vh - 193px);
      flex: 1;
      padding-right: 0; }
      #msg-comment ul li .text {
        overflow: hidden; }
        #msg-comment ul li .text p {
          width: 100%;
          height: 38px; } }

#msg-wiget-box {
  position: fixed;
  background: #ffffff;
  border: 1px solid #e9e9ea;
  box-sizing: border-box;
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
  border-radius: 15px;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  z-index: 20;
  min-width: 200px;
  /* ios fixed 이슈 관련 */ }
  @media (orientation: landscape) {
    #msg-wiget-box {
      position: fixed; } }
  @media (orientation: portrait) {
    #msg-wiget-box {
      position: fixed; } }
  #msg-wiget-box a:not(:first-of-type) {
    margin-top: 10px; }
  #msg-wiget-box a p {
    font-size: 20px;
    line-height: 29px;
    color: #504d58; }
    #msg-wiget-box a p img {
      margin-left: 5px; }
  #msg-wiget-box .close {
    position: absolute;
    top: 28px;
    right: 14px; }
  #msg-wiget-box.mb-msg-wiget {
    top: 44px;
    right: 20px;
    border: 1px solid #dfdfe4;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 0;
    min-width: unset;
    z-index: 1000; }
    #msg-wiget-box.mb-msg-wiget a {
      padding: 0 12px; }
      #msg-wiget-box.mb-msg-wiget a:first-of-type p {
        padding-top: 12px; }
      #msg-wiget-box.mb-msg-wiget a:last-of-type p {
        padding-bottom: 12px; }
      #msg-wiget-box.mb-msg-wiget a:not(:first-of-type) {
        margin-top: 0; }
        #msg-wiget-box.mb-msg-wiget a:not(:first-of-type) p {
          border-top: 1px solid #e9e9ea; }
      #msg-wiget-box.mb-msg-wiget a p {
        font-size: 13px;
        line-height: 20px;
        padding: 8px 0; }

#dropout_confirm {
  padding: 70px 105px; }
  #dropout_confirm .title {
    padding-bottom: 20px;
    border-bottom: 1px solid #d3d3d5;
    margin-bottom: 20px; }
    #dropout_confirm .title h2 {
      font-size: 26px;
      font-weight: 700;
      color: #24212e; }
  #dropout_confirm .popup-main-content .desc {
    font-size: 18px;
    font-weight: 400;
    color: #24212e;
    margin-bottom: 20px; }
    #dropout_confirm .popup-main-content .desc span {
      font-size: inherit;
      font-weight: 700;
      color: inherit; }
  #dropout_confirm .popup-main-content .confirm_list li:not(:last-of-type) {
    margin-bottom: 10px; }
  #dropout_confirm .popup-main-content .confirm_list li input[type='checkbox'] + label {
    font-size: 16px;
    font-weight: 400; }
  #dropout_confirm .btn-size {
    margin-top: 40px; }
    #dropout_confirm .btn-size button {
      max-width: 206px; }

#premium_cancel {
  padding: 70px 105px; }
  #premium_cancel .title {
    padding-bottom: 20px;
    border-bottom: 1px solid #d3d3d5;
    margin-bottom: 20px; }
    #premium_cancel .title h2 {
      font-size: 26px;
      font-weight: 700;
      color: #24212e; }
  #premium_cancel .popup-main-content .desc {
    font-size: 18px;
    font-weight: 400;
    color: #24212e;
    margin-bottom: 20px; }
    #premium_cancel .popup-main-content .desc .small {
      font-size: 15px;
      font-weight: 400; }
    #premium_cancel .popup-main-content .desc span {
      font-size: inherit;
      font-weight: 700;
      color: inherit; }
  #premium_cancel .popup-main-content .confirm_list li:not(:last-of-type) {
    margin-bottom: 10px; }
  #premium_cancel .popup-main-content .confirm_list li input[type='checkbox'] + label {
    font-size: 16px;
    font-weight: 400; }
  #premium_cancel .btn-size {
    margin-top: 40px; }
    #premium_cancel .btn-size button {
      max-width: 206px;
      border: 0;
      color: #fff;
      box-shadow: 0px 3px 3px rgba(118, 129, 229, 0.3);
      background-color: #22a4ed;
      /* 22.05.09 안재현 - 구독취소 버튼에 active/non-active 스타일 추가 */ }
      #premium_cancel .btn-size button.reverse {
        background-color: #22a4ed; }
      #premium_cancel .btn-size button.disabled {
        background-color: #a7a6ab; }

@media screen and (max-width: 1024px) {
  #premium_cancel {
    padding: 50px 50px; }
    #premium_cancel .title h2 {
      font-size: 20px; }
    #premium_cancel .popup-main-content .desc {
      max-height: 155px;
      overflow: scroll; } }

#premium_warning span {
  font-size: inherit;
  font-weight: inherit; }
  #premium_warning span.red {
    color: #FF5050; }

#teacher-change-popup {
  min-width: 467px;
  padding: 32px; }
  #teacher-change-popup .title {
    padding-bottom: 8px;
    border-bottom: 1px solid #d3d3d5; }
    #teacher-change-popup .title h2 {
      font-size: 26px;
      line-height: 38px;
      color: #24212e;
      margin-bottom: 10px; }
    #teacher-change-popup .title .title-desc {
      display: flex;
      align-items: flex-end;
      justify-content: space-between; }
      #teacher-change-popup .title .title-desc p {
        font-size: 16px;
        line-height: 23px;
        color: #7c7a82; }
        #teacher-change-popup .title .title-desc p em {
          font-size: 12px;
          color: #ff0000;
          margin-top: 3px; }
      #teacher-change-popup .title .title-desc button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100px;
        height: 34px;
        border: 1px solid #ff5050;
        box-sizing: border-box;
        border-radius: 10px;
        font-size: 13px;
        color: #ff5050; }
  #teacher-change-popup .popup-main-content .required {
    font-size: 12px;
    text-align: end;
    color: #ff84b0;
    margin-bottom: 2px;
    margin-top: 20px; }
  #teacher-change-popup .popup-main-content .popup-form-box {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 0px 0 30px; }
    #teacher-change-popup .popup-main-content .popup-form-box.margin {
      margin-top: 30px;
      margin-bottom: 50px; }
    #teacher-change-popup .popup-main-content .popup-form-box dl {
      gap: 20px; }
      #teacher-change-popup .popup-main-content .popup-form-box dl dt {
        padding-bottom: 8px; }
        #teacher-change-popup .popup-main-content .popup-form-box dl dt span {
          line-height: 22px;
          color: #7c7a82; }
          #teacher-change-popup .popup-main-content .popup-form-box dl dt span em {
            color: #ff84b0;
            margin-left: 5px; }
      #teacher-change-popup .popup-main-content .popup-form-box dl dd {
        width: 100%;
        flex: 1; }
        #teacher-change-popup .popup-main-content .popup-form-box dl dd .name {
          width: 100%; }
        #teacher-change-popup .popup-main-content .popup-form-box dl dd .call-number {
          display: flex;
          align-items: center; }
          #teacher-change-popup .popup-main-content .popup-form-box dl dd .call-number i {
            width: 6px;
            margin: 0 6px;
            color: #7c7a82; }
          #teacher-change-popup .popup-main-content .popup-form-box dl dd .call-number .input-size {
            width: 134px; }
        #teacher-change-popup .popup-main-content .popup-form-box dl dd .address {
          display: flex;
          flex-wrap: wrap;
          gap: 10px; }
          #teacher-change-popup .popup-main-content .popup-form-box dl dd .address .input-size {
            width: 288px; }
          #teacher-change-popup .popup-main-content .popup-form-box dl dd .address .btn-size {
            width: 134px; }
        #teacher-change-popup .popup-main-content .popup-form-box dl dd .upload button {
          width: 134px;
          height: 48px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-weight: 500;
          font-size: 14px;
          color: #7681e5;
          background: #ffffff;
          border: 1px solid #7681e5;
          box-sizing: border-box;
          border-radius: 10px;
          padding: 0 16px; }
        #teacher-change-popup .popup-main-content .popup-form-box dl dd .upload p {
          font-size: 12px;
          line-height: 18px;
          color: #a7a6ab;
          margin-top: 6px; }
  #teacher-change-popup .popup-main-content .btn-size {
    width: 347px;
    margin: 0 auto; }
    #teacher-change-popup .popup-main-content .btn-size.twin-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 20px; }
      #teacher-change-popup .popup-main-content .btn-size.twin-btn button {
        width: 120px;
        margin: initial; }

@media screen and (max-width: 1024px) {
  #teacher-change-popup {
    padding: 30px 16px; }
    #teacher-change-popup .title .title-desc p {
      font-size: 13px; }
    #teacher-change-popup .popup-main-content .popup-form-box {
      gap: 20px;
      margin-top: 20px;
      margin-bottom: 18px; }
      #teacher-change-popup .popup-main-content .popup-form-box dl {
        flex-direction: column;
        gap: 10px; }
        #teacher-change-popup .popup-main-content .popup-form-box dl dt {
          width: 100%;
          margin-right: 0px;
          margin-top: 0; }
          #teacher-change-popup .popup-main-content .popup-form-box dl dt span {
            font-size: 14px; }
        #teacher-change-popup .popup-main-content .popup-form-box dl dd {
          flex: 1; }
          #teacher-change-popup .popup-main-content .popup-form-box dl dd .name {
            width: 100%; } }

#cancel_subscibe {
  padding: 70px 105px; }
  #cancel_subscibe .title {
    padding-bottom: 20px;
    border-bottom: 1px solid #d3d3d5;
    margin-bottom: 20px; }
    #cancel_subscibe .title h2 {
      font-size: 26px;
      font-weight: 700;
      color: #24212e; }
    #cancel_subscibe .title .desc {
      font-size: 18px;
      font-weight: 400;
      color: #24212e;
      margin-top: 20px; }
      #cancel_subscibe .title .desc span {
        font-size: inherit;
        font-weight: 700;
        color: inherit; }
  #cancel_subscibe .popup-main-content .confirm_info {
    margin-bottom: 20px; }
    #cancel_subscibe .popup-main-content .confirm_info li {
      display: flex; }
      #cancel_subscibe .popup-main-content .confirm_info li h1 {
        width: 145px;
        padding-right: 10px;
        font-size: 18px;
        font-weight: 700;
        color: #24212e;
        margin-bottom: 0; }
      #cancel_subscibe .popup-main-content .confirm_info li p {
        font-size: 18px;
        font-weight: 400;
        color: #24212e;
        font-family: 'Inter','Noto Sans KR'; }
      #cancel_subscibe .popup-main-content .confirm_info li:not(:last-of-type) {
        margin-bottom: 10px; }
  #cancel_subscibe .popup-main-content .confirm_list li:not(:last-of-type) {
    margin-bottom: 10px; }
  #cancel_subscibe .popup-main-content .confirm_list li input[type='checkbox'] + label {
    font-size: 16px;
    font-weight: 400; }
  #cancel_subscibe .btn-size {
    margin-top: 40px; }
    #cancel_subscibe .btn-size button {
      max-width: 206px; }

#auto_payment {
  padding: 70px 105px; }
  #auto_payment .title {
    padding-bottom: 20px;
    border-bottom: 1px solid #d3d3d5;
    margin-bottom: 20px; }
    #auto_payment .title h2 {
      font-size: 26px;
      font-weight: 700;
      color: #24212e; }
    #auto_payment .title .desc {
      margin-top: 10px; }
  #auto_payment .desc {
    font-size: 12px;
    font-weight: 400;
    color: #ff0000; }
  #auto_payment .popup-main-content .enrol_card li {
    display: flex;
    align-items: center; }
    #auto_payment .popup-main-content .enrol_card li:nth-of-type(1) {
      margin-bottom: 10px; }
    #auto_payment .popup-main-content .enrol_card li:nth-of-type(2) {
      margin-bottom: 30px; }
    #auto_payment .popup-main-content .enrol_card li:nth-of-type(3) {
      margin-bottom: 10px; }
    #auto_payment .popup-main-content .enrol_card li:nth-of-type(4) {
      margin-bottom: 20px; }
    #auto_payment .popup-main-content .enrol_card li h1 {
      width: 155px;
      font-size: 18px;
      font-weight: 500;
      color: #504d58;
      margin-bottom: 0; }
    #auto_payment .popup-main-content .enrol_card li > div {
      width: calc(100% - 155px); }
    #auto_payment .popup-main-content .enrol_card li .num_n_btn {
      display: flex;
      justify-content: space-between; }
      #auto_payment .popup-main-content .enrol_card li .num_n_btn .input-component-box {
        width: calc(100% - 144px); }
      #auto_payment .popup-main-content .enrol_card li .num_n_btn button {
        width: 134px;
        padding: 14px;
        border: 1px solid #504d58;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
        color: #504d58;
        text-align: center; }
    #auto_payment .popup-main-content .enrol_card li .enrol_desc {
      font-size: 14px;
      font-weight: 400;
      color: #24212e; }
      #auto_payment .popup-main-content .enrol_card li .enrol_desc span {
        font-size: inherit;
        font-weight: 700;
        color: #24212e; }
    #auto_payment .popup-main-content .enrol_card li .put_card div {
      width: 290px;
      height: 147px;
      border: 1px solid #a7a6ab;
      border-radius: 15px;
      position: relative;
      cursor: pointer; }
    #auto_payment .popup-main-content .enrol_card li .put_card p {
      font-size: 14px;
      font-weight: 400;
      color: #a7a6ab;
      margin-top: 10px; }
    #auto_payment .popup-main-content .enrol_card li .put_card img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
    #auto_payment .popup-main-content .enrol_card li .add_card > div {
      width: 290px;
      height: 147px; }
    #auto_payment .popup-main-content .enrol_card li .add_card .item_util .card-like {
      display: none; }
    #auto_payment .popup-main-content .enrol_card li .add_card .item_type {
      margin-top: 0;
      margin-left: 12px; }
    #auto_payment .popup-main-content .enrol_card li .add_card p {
      font-size: 14px;
      font-weight: 400;
      margin-top: 10px; }
  #auto_payment .btn-size {
    margin-top: 40px;
    display: flex;
    gap: 10px;
    justify-content: center; }
    #auto_payment .btn-size button {
      max-width: 206px;
      margin: 0; }

#play-wiget {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 50px 40px; }
  #play-wiget .wiget-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    line-height: 29px;
    color: #7c7a82; }
    #play-wiget .wiget-item.cyan {
      color: #0f9ba5; }
    #play-wiget .wiget-item.red {
      color: #ff5050; }

#mobile-test-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 35px 0; }
  #mobile-test-info .title {
    display: flex;
    align-items: center; }
    #mobile-test-info .title span {
      color: #24212e;
      font-weight: 700;
      line-height: 21px;
      font-size: 14px; }
      #mobile-test-info .title span:nth-child(2):before {
        content: '';
        display: inline-block;
        width: 1px;
        height: 12px;
        background: #24212e;
        margin: 0 5px; }
  #mobile-test-info .subject {
    line-height: 21px;
    color: #24212e; }
  #mobile-test-info .d-day {
    font-weight: 500;
    font-size: 13px;
    line-height: 19px;
    color: #7c7a82;
    margin: 10px 0 20px; }
  #mobile-test-info .rules {
    display: flex;
    flex-direction: column;
    gap: 10px; }
    #mobile-test-info .rules .rules-item {
      color: #7c7a82; }
      #mobile-test-info .rules .rules-item img {
        margin-right: 5px; }
  #mobile-test-info .btn-size {
    width: 100px;
    margin: 20px auto 0; }

.new_popup_wrap #change_img {
  padding: 0; }

#change_img {
  padding: 70px 105px; }
  #change_img .title {
    padding-bottom: 20px;
    border-bottom: 1px solid #d3d3d5;
    margin-bottom: 20px; }
    #change_img .title h2 {
      font-size: 26px;
      font-weight: 700;
      color: #24212e; }
    #change_img .title .desc {
      display: flex;
      justify-content: space-between;
      align-items: flex-end; }
      #change_img .title .desc p {
        font-size: 16px;
        font-weight: 500;
        color: #7c7a82; }
      #change_img .title .desc .btn_delete_img {
        width: 100px;
        height: 34px;
        padding: 7px;
        border: 1px solid #ff5050;
        border-radius: 10px;
        text-align: center;
        font-size: 13px;
        font-weight: 500;
        color: #ff5050; }
  #change_img .popup-main-content .change_step li {
    display: flex; }
    #change_img .popup-main-content .change_step li:first-of-type > h1 {
      padding-top: 0; }
    #change_img .popup-main-content .change_step li:not(:last-of-type) {
      margin-bottom: 24px; }
    #change_img .popup-main-content .change_step li > h1 {
      color: #7c7a82;
      font-size: 16px;
      line-height: 24px;
      width: 136px;
      margin-bottom: 0;
      padding-top: 8px;
      flex-shrink: 0; }
    #change_img .popup-main-content .change_step li > div {
      width: calc(100% - 122px); }
      #change_img .popup-main-content .change_step li > div .file_input {
        margin: 0; }
    #change_img .popup-main-content .change_step li .img_before {
      width: 80px;
      height: 80px;
      border-radius: 50%; }
      #change_img .popup-main-content .change_step li .img_before img {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover; }
    #change_img .popup-main-content .change_step li .btn_upload_img {
      display: inline-block;
      width: 134px;
      padding: 14px;
      border: 1px solid #7681e5;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 500;
      color: #7681e5;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer; }
      #change_img .popup-main-content .change_step li .btn_upload_img img {
        width: 12px; }
    #change_img .popup-main-content .change_step li .upload_txt {
      font-size: 12px;
      font-weight: 400;
      color: #a7a6ab;
      margin: 6px 0 0 10px; }
  #change_img .btn-size {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 50px; }
    #change_img .btn-size button {
      max-width: 206px;
      margin: 0; }
  #change_img .change_step_m li {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 20px;
    font-weight: 400;
    color: #7c7a82;
    line-height: 29px; }
    #change_img .change_step_m li:not(:last-of-type) {
      margin-bottom: 20px; }

@media screen and (max-width: 1024px) {
  #change_img {
    padding: 37px 48px; } }

#refund-popup {
  padding: 70px 105px; }
  #refund-popup .title {
    padding-bottom: 20px;
    border-bottom: 1px solid #d3d3d5;
    margin-bottom: 40px; }
    #refund-popup .title h2 {
      font-size: 26px;
      font-weight: 700;
      color: #24212e; }
  #refund-popup .popup-main-content .confirm_info li {
    display: flex; }
    #refund-popup .popup-main-content .confirm_info li h1 {
      width: 145px;
      padding-right: 10px;
      font-size: 18px;
      font-weight: 700;
      color: #24212e;
      margin-bottom: 0; }
    #refund-popup .popup-main-content .confirm_info li p {
      font-size: 18px;
      font-weight: 400;
      color: #24212e;
      font-family: 'Inter','Noto Sans KR'; }
    #refund-popup .popup-main-content .confirm_info li:not(:last-of-type) {
      margin-bottom: 30px; }
  #refund-popup .mylevel_box {
    width: 142px;
    border-radius: 5px;
    border: 1px solid transparent;
    background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #35e87c, #34b3e9);
    background-origin: border-box;
    background-clip: content-box, border-box; }
    #refund-popup .mylevel_box span {
      display: block;
      text-align: center;
      line-height: 30px;
      font-size: 18px;
      font-weight: 600;
      font-family: 'Inter','Noto Sans KR';
      background: linear-gradient(to right, #35e87c 0%, #34b3e9 100%);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent; }
  #refund-popup .level_step {
    display: flex;
    margin-top: 10px; }
    #refund-popup .level_step p {
      display: flex;
      align-items: baseline;
      gap: 10px;
      font-size: 16px;
      font-weight: 400;
      color: #504d58;
      position: relative; }
      #refund-popup .level_step p span {
        display: inline-block;
        font-size: 18px;
        font-weight: 700;
        color: inherit; }
      #refund-popup .level_step p:first-of-type {
        margin-right: 12px;
        padding-right: 12px;
        border-right: 1px solid #a7a6ab; }
  #refund-popup .btn-size {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    gap: 10px; }
    #refund-popup .btn-size button {
      max-width: 206px;
      margin: 0; }

#refund-confirm {
  padding: 70px 105px; }
  #refund-confirm .title {
    padding-bottom: 20px;
    border-bottom: 1px solid #d3d3d5;
    margin-bottom: 40px; }
    #refund-confirm .title h2 {
      font-size: 26px;
      font-weight: 700;
      color: #24212e; }
      #refund-confirm .title h2 span {
        font-size: inherit;
        font-weight: inherit;
        color: inherit;
        text-decoration: underline; }
  #refund-confirm .popup-main-content .withdraw_guide {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #24212e; }
    #refund-confirm .popup-main-content .withdraw_guide span {
      font-size: inherit;
      font-weight: 700;
      line-height: inherit; }
  #refund-confirm .popup-main-content .agree_refund {
    margin-top: 34px;
    display: flex;
    gap: 40px; }
  #refund-confirm .btn-size {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    gap: 10px; }
    #refund-confirm .btn-size button {
      max-width: 206px;
      margin: 0; }

.popup-container-youtb.pc_large {
  max-width: 720px !important;
  height: 40vh !important; }

.popup-content-youtb {
  height: 100% !important;
  padding-top: 40px !important; }

div.wrong_container {
  padding: 60px 8.5% 50px;
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  margin-top: 20px; }
  div.wrong_container #play-color-btn {
    margin-top: 52px; }
  div.wrong_container #play-frame {
    width: 100% !important; }
  div.wrong_container.popver {
    box-shadow: none; }
  div.wrong_container.confirm-answer {
    padding: 60px 16.5% 50px; }
  div.wrong_container.youtube_pop {
    padding: 0 8.5% !important;
    height: 95%;
    margin-top: 0; }
    div.wrong_container.youtube_pop.div {
      position: relative;
      width: 100%;
      height: 100%;
      padding-top: 50%; }
      div.wrong_container.youtube_pop.div iframe {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%; }

.q_num {
  width: max-content;
  padding: 10px 20px;
  border-radius: 50px;
  border: 1px solid #09b9c6;
  font-size: 16px;
  font-weight: 500;
  font-family: 'Inter', 'Noto Sans KR';
  color: #09b9c6;
  margin: 0 auto; }

.quest {
  font-size: 28px;
  font-weight: 700;
  color: #24212e;
  margin-top: 20px;
  text-align: center; }

.q_box {
  width: 100%;
  padding: 24px 48px;
  border-radius: 20px;
  box-shadow: 0px 5px 42px rgba(60, 142, 177, 0.15);
  font-size: 24px;
  font-family: Roboto;
  color: #24212e;
  line-height: 2.5;
  margin: 50px 0 0; }
  .q_box * {
    line-height: inherit; }
  .q_box em {
    font-size: inherit;
    font-family: inherit;
    line-height: inherit; }
    .q_box em.txt_green {
      color: #09b9c6; }
  .q_box .grammer_line {
    position: relative;
    padding-bottom: 6px;
    border-bottom: 3px solid; }
    .q_box .grammer_line::after {
      position: absolute;
      left: -2px;
      top: 25px;
      font-size: 18px;
      font-weight: bold;
      line-height: 1;
      font-family: Roboto;
      background: #fff;
      white-space: nowrap; }
    .q_box .grammer_line.line_s {
      border-color: #09b9c6; }
      .q_box .grammer_line.line_s::after {
        content: 'S';
        color: #09b9c6; }
    .q_box .grammer_line.line_v {
      border-color: #7681e5; }
      .q_box .grammer_line.line_v::after {
        content: 'V';
        color: #7681e5; }
    .q_box .grammer_line.line_io {
      border-color: #d3d3d5; }
      .q_box .grammer_line.line_io::after {
        content: 'I.O';
        color: #ff84b0; }
    .q_box .grammer_line.line_do {
      border-color: #d3d3d5; }
      .q_box .grammer_line.line_do::after {
        content: 'D.O';
        color: #ffaa04; }
  .q_box.type2 em {
    font-weight: 700;
    text-decoration: underline; }

.q_answer {
  width: 100%;
  padding: 44px 48px;
  background-color: #fff;
  box-shadow: 0px 5px 42px rgba(60, 142, 177, 0.15);
  border-radius: 20px;
  margin: 40px 0 0; }
  .q_answer li {
    display: flex;
    align-items: flex-start; }
    .q_answer li:not(:last-of-type) {
      margin-bottom: 50px; }
  .q_answer .piece {
    padding: 5px 22px;
    max-width: max-content;
    border-radius: 20px;
    border: 1px solid;
    font-size: 16px;
    font-weight: 700;
    margin-right: 30px; }
    .q_answer .piece.green {
      color: #09b9c6;
      border-color: #09b9c6; }
    .q_answer .piece.purple {
      color: #7681e5;
      border-color: #7681e5; }
  .q_answer .txt {
    width: calc(100% - 105px); }
    .q_answer .txt div {
      font-size: 23px;
      color: #7c7a82;
      line-height: 1.45; }
      .q_answer .txt div span {
        font-size: inherit;
        font-weight: 700;
        color: inherit;
        line-height: inherit; }

.choose_one {
  width: 100%;
  margin: 50px auto 0;
  display: flex;
  gap: 20px;
  justify-content: space-between; }
  .choose_one li {
    flex: 1;
    line-height: 274px;
    border-radius: 20px;
    border: 1px solid #7c7a82;
    text-align: center;
    font-size: 35px;
    font-weight: 900;
    font-family: Roboto;
    color: #7c7a82;
    cursor: pointer; }
    .choose_one li.choose_left {
      color: #09b9c6;
      border-color: #09b9c6; }
    .choose_one li.choose_right {
      color: #ff5050;
      border-color: #ff5050; }

.view_wrapper {
  padding: 31px 26px;
  border: 1px solid #9de3e8;
  border-radius: 15px; }
  .view_wrapper.has_bg {
    background: #fbfcff; }
  .view_wrapper .btn_fill {
    min-width: 106px;
    padding: 11px 20px 10px 20px;
    background: #7681e5;
    border: 1px solid #7681e5;
    box-sizing: border-box;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    filter: drop-shadow(0px 3px 3px rgba(118, 129, 229, 0.3)); }
  .view_wrapper .btn_empty {
    min-width: 106px;
    padding: 11px 20px 10px 20px;
    background: #fff;
    border: 1px solid #7681e5;
    box-sizing: border-box;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #7681e5;
    text-align: center; }
    .view_wrapper .btn_empty.shadow {
      filter: drop-shadow(0px 3px 3px rgba(118, 129, 229, 0.3)); }
  .view_wrapper .btn_empty + .btn_empty,
  .view_wrapper .btn_empty + .btn_fill {
    margin-left: 10px; }
  .view_wrapper .view_top {
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .view_wrapper .view_top .btn_wrap {
      width: 106px; }
  .view_wrapper .view_title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    flex-wrap: wrap;
    width: calc(100% - 106px); }
  .view_wrapper .study_sticker {
    width: 47px;
    padding: 4px 3px 3px;
    border: 2px solid;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 800;
    font-family: 'Inter', 'Noto Sans KR';
    text-align: center; }
    .view_wrapper .study_sticker.purple {
      border-color: #7681e5;
      color: #7681e5; }
    .view_wrapper .study_sticker.pink {
      border-color: #ff84b0;
      color: #ff84b0; }
    .view_wrapper .study_sticker.yellow {
      border-color: #ffaa04;
      color: #ffaa04; }
  .view_wrapper .study_where {
    font-size: 14px;
    font-weight: 500;
    color: #504d58; }
  .view_wrapper .study_part {
    font-size: 18px;
    font-weight: 500;
    color: #24212e;
    width: calc(100% - 130px); }
  .view_wrapper .study_grade {
    padding: 0 8.5px 0 14.5px;
    line-height: 26px;
    background: #f1f2fc;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 400;
    color: #7681e5; }
    .view_wrapper .study_grade em {
      font-size: inherit;
      font-weight: 700;
      color: inherit;
      line-height: inherit; }
  .view_wrapper .view_middle {
    margin-top: 25px; }
    .view_wrapper .view_middle > li {
      display: flex;
      align-items: center;
      justify-content: space-between; }
      .view_wrapper .view_middle > li:not(:last-of-type) {
        margin-bottom: 27px; }
  .view_wrapper .chart_name {
    width: 60px;
    font-size: 14px;
    font-weight: 500;
    color: #7c7a82;
    display: flex;
    align-items: center; }
    .view_wrapper .chart_name img {
      margin-left: 3px; }
  .view_wrapper .chart_wrap {
    width: calc(100% - 165px);
    flex: 1;
    padding: 0 16px 0 7px;
    display: flex;
    align-items: center; }
  .view_wrapper .chart_body {
    width: calc(100% - 50px);
    height: 15px;
    background: #eff0f6;
    border-radius: 50px;
    position: relative; }
    .view_wrapper .chart_body .chart_mine {
      position: absolute;
      z-index: 1;
      left: 0;
      top: 0;
      width: 25%;
      height: 100%;
      border-radius: inherit;
      background: #a7a6ab; }
      .view_wrapper .chart_body .chart_mine.chart100 {
        width: 100%;
        background: #7681e5; }
    .view_wrapper .chart_body .start_date {
      display: flex;
      gap: 10px;
      position: absolute;
      bottom: -5px;
      left: 0;
      transform: translateY(100%); }
      .view_wrapper .chart_body .start_date li {
        font-size: 12px;
        font-weight: 400;
        font-family: 'Inter', 'Noto Sans KR';
        color: #7c7a82; }
        .view_wrapper .chart_body .start_date li img {
          vertical-align: text-bottom;
          margin-right: 3px; }
    .view_wrapper .chart_body .show_cutline {
      position: absolute;
      top: -3px;
      transform: translate(-50%, -100%);
      font-size: 12px;
      color: #ff5050; }
      .view_wrapper .chart_body .show_cutline span {
        font: inherit;
        color: inherit;
        white-space: nowrap;
        position: absolute;
        right: -3px;
        top: 50%;
        transform: translate(100%, -50%); }
  .view_wrapper .chart_num {
    width: 45px;
    font-size: 16px;
    font-weight: 700;
    color: #7c7a82;
    font-family: 'Inter', 'Noto Sans KR';
    margin-left: 10px; }
    .view_wrapper .chart_num.txt_purple {
      color: #7681e5; }
  .view_wrapper .view_bottom {
    margin-top: 33px;
    border-top: 1px solid #9de3e8;
    padding-top: 12px;
    text-align: right; }
    .view_wrapper .view_bottom button {
      text-align: center; }
    .view_wrapper .view_bottom p {
      font-size: 10px;
      font-weight: 400;
      color: #a7a6ab;
      margin-top: 6px; }
  .view_wrapper.done .view_middle > li {
    justify-content: flex-start; }
  .view_wrapper.test .chart_body .chart_mine {
    width: 75%; }
  .view_wrapper.test .chart_body .chart_mine2 {
    width: 85%;
    opacity: 0.4;
    background-color: #ff5050;
    z-index: 0; }
  .view_wrapper.c-again .view_middle > li, .view_wrapper.c-done .view_middle > li {
    justify-content: flex-start; }

@media screen and (max-width: 1024px) {
  .view_wrapper {
    padding: 15px 13px;
    border: 1px solid #e4e6fa;
    box-shadow: 0px 3px 3px rgba(118, 129, 229, 0.3);
    border-radius: 10px; }
    .view_wrapper .btn_empty,
    .view_wrapper .btn_fill {
      width: 91px;
      min-width: auto;
      padding: 7px;
      font-size: 12px; }
    .view_wrapper .view_top {
      flex-direction: column;
      align-items: flex-start; }
      .view_wrapper .view_top .study_grade {
        margin-top: 10px; }
      .view_wrapper .view_top .btn_wrap {
        width: 100%;
        text-align: right;
        margin-top: 10px; }
    .view_wrapper .view_title {
      gap: 0;
      width: 100%; }
    .view_wrapper .study_sticker {
      width: 40px;
      font-size: 10px;
      margin-right: 8px; }
    .view_wrapper .study_where {
      margin-right: 8px; }
    .view_wrapper .study_part {
      font-size: 14px;
      width: calc(100% - 130px); }
    .view_wrapper .view_middle > li.btn_wrap_right {
      justify-content: flex-end; }
    .view_wrapper .view_middle > li:not(:last-of-type) {
      margin-bottom: 40px; }
    .view_wrapper .chart_name {
      font-size: 12px; }
    .view_wrapper .chart_body {
      height: 10px; }
      .view_wrapper .chart_body .start_date.ver2 {
        flex-direction: column;
        gap: 5px; }
      .view_wrapper .chart_body .start_date li {
        font-size: 10px; }
    .view_wrapper .chart_num {
      font-size: 14px;
      text-align: right; }
    .view_wrapper .chart_wrap {
      width: calc(100% - 60px);
      padding-right: 0; }
    .view_wrapper .view_bottom {
      border-top: 0; }
      .view_wrapper .view_bottom button + button + p {
        padding-right: 95px;
        text-align: right; }
    .view_wrapper .study_grade {
      font-size: 10px; }
    .view_wrapper.c-done {
      padding-bottom: 40px; } }

.st-target-wrap {
  border-radius: 15px;
  background-color: #09b9c6;
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
  padding: 0 20px; }

.st-target-more {
  padding: 10px 00px;
  border-top: 1px solid #fff; }
  .st-target-more li {
    font-size: 15px;
    font-weight: 500;
    font-family: 'Inter', 'Noto Sans KR';
    color: #fff;
    line-height: 2; }

.st-target {
  padding: 15px 0;
  border: 1px solid #09b9c6;
  display: flex;
  justify-content: space-between; }
  .st-target > div {
    flex: 1; }
  .st-target .st-target-left {
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    border-right: 1px solid #fff;
    padding-right: 20px; }
    .st-target .st-target-left span {
      font-size: 15px;
      font-weight: 500;
      color: inherit; }
  .st-target .st-target-right {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    padding-left: 20px;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative; }
    .st-target .st-target-right img {
      cursor: pointer;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%); }
  .st-target.print {
    padding: 20px;
    background: #ffffff;
    flex-direction: column;
    border: 0;
    border-radius: 15px;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06); }
    .st-target.print > ul > li {
      font-size: 15px;
      font-weight: 500;
      font-family: 'Inter', 'Noto Sans KR';
      color: #24212e; }
      .st-target.print > ul > li .st-target-name {
        font-size: 18px;
        font-weight: 700; }
      .st-target.print > ul > li .st-target-id {
        display: inline-block;
        font-size: inherit;
        font-weight: 400;
        color: inherit;
        margin-left: 3px; }
      .st-target.print > ul > li .st-target-grade {
        display: inline-block;
        font-size: inherit;
        font-weight: 400;
        color: inherit;
        margin-left: 20px;
        padding-left: 20px;
        border-left: 1px solid #d3d3d5; }
      .st-target.print > ul > li span {
        color: #504d58; }
      .st-target.print > ul > li:not(:last-of-type) {
        margin-bottom: 15px; }
    .st-target.print .center-line {
      margin: 20px 0;
      border-bottom: 1px solid #d3d3d5; }

.chk-condition {
  padding: 24px 0;
  border-top: 1px solid #e3e2f0;
  border-bottom: 1px solid #e3e2f0; }
  .chk-condition > ul > li {
    display: flex;
    align-items: center; }
    .chk-condition > ul > li:not(:last-of-type) {
      margin-bottom: 14px; }
    .chk-condition > ul > li > p {
      font-size: 14px;
      font-weight: 900;
      color: #24212e;
      width: 50px; }
    .chk-condition > ul > li > div {
      width: calc(100% - 50px); }
    .chk-condition > ul > li .chk-course-selectbox > select,
    .chk-condition > ul > li .chk-course-print {
      border: 1px solid #cef1f4;
      font-weight: 700;
      color: #24212e;
      border-radius: 15px; }
    .chk-condition > ul > li .chk-course-print {
      line-height: 42px;
      padding: 0 10px; }
    .chk-condition > ul > li .date-list {
      white-space: nowrap;
      overflow: auto;
      padding-bottom: 5px; }
      .chk-condition > ul > li .date-list.print-ver {
        overflow: visible; }
      .chk-condition > ul > li .date-list li {
        display: inline-block;
        min-width: 60px;
        padding: 10px 7px;
        border: 1px solid #6bd5dd;
        box-sizing: border-box;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 500;
        color: #504d58;
        font-family: 'Inter', 'Noto Sans KR';
        cursor: pointer; }
        .chk-condition > ul > li .date-list li:not(:last-of-type) {
          margin-right: 7px; }
        .chk-condition > ul > li .date-list li.on {
          background: #09b9c6;
          box-shadow: 0px 3px 2px rgba(104, 154, 170, 0.3);
          color: #fff;
          font-weight: 800; }

.manage-cont-title {
  font-size: 18px;
  font-weight: 900;
  color: #24212e;
  margin-bottom: 11px;
  display: flex;
  align-items: center;
  gap: 13px; }

.manage-cont-inner {
  height: 120px;
  padding: 16px 20px;
  border-radius: 8px;
  border: 1px solid #e9e9ea;
  color: #7c7a82;
  font-size: 16px;
  line-height: 24px; }
  .manage-cont-inner * {
    font: inherit;
    color: inherit;
    line-height: inherit; }
  .manage-cont-inner img {
    min-width: 16px;
    margin-right: 8px; }

.st-average .manage-cont-inner > ul {
  display: flex;
  flex-wrap: wrap; }

.average-single {
  display: flex;
  align-items: center;
  margin-bottom: 15px; }
  .average-single span {
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', 'Noto Sans KR';
    color: #504d58; }
    .average-single span em {
      font-size: 13px;
      font-weight: 600;
      font-family: 'Inter', 'Noto Sans KR';
      color: #a7a6ab;
      margin-left: 4px; }
  .average-single:nth-of-type(odd) {
    margin-right: 15px; }

.average-tag {
  width: max-content;
  padding: 4px 8px;
  background: #f1f2fc;
  border-radius: 8px;
  display: flex;
  gap: 10px;
  margin-right: 5px; }
  .average-tag > li {
    font-size: 10px;
    font-weight: 900;
    color: #7681e5; }
    .average-tag > li:first-child {
      position: relative; }
      .average-tag > li:first-child::after {
        content: '';
        display: block;
        width: 2px;
        height: 8px;
        background-color: #7681e5;
        position: absolute;
        top: 50%;
        right: -5px;
        transform: translate(50%, -50%); }

.st-comment textarea {
  width: 100%;
  height: 70px;
  font-size: 12px;
  font-weight: 500;
  color: #504d58; }
  .st-comment textarea::placeholder {
    color: #a7a6ab; }

.st-comment .btn-save-comment {
  padding: 7px 27px;
  margin-top: 20px;
  border: 1px solid #a7a6ab;
  box-sizing: border-box;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  color: #a7a6ab; }

.btn_sendto_parents {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #7681e5;
  box-shadow: 0px -5px 42px rgba(60, 142, 177, 0.15);
  border-radius: 20px 20px 0px 0px;
  padding: 17px 0 20px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 23px;
  /* ios fixed 이슈 관련 */ }
  @media (orientation: landscape) {
    .btn_sendto_parents {
      position: fixed; } }
  @media (orientation: portrait) {
    .btn_sendto_parents {
      position: fixed; } }
  .btn_sendto_parents img {
    margin-left: 5px; }

.mybadge.mb-mybadge .mybadge-top-right {
  font-size: 13px; }
  .mybadge.mb-mybadge .mybadge-top-right span:first-of-type {
    margin-right: 12px; }

.mybadge.mb-mybadge .mybadge-bottom ul {
  margin-top: -8px; }
  .mybadge.mb-mybadge .mybadge-bottom ul li {
    padding: 14px 12px 12px;
    width: calc(20% - (32px / 5));
    margin-top: 8px;
    border-radius: 8px; }
    .mybadge.mb-mybadge .mybadge-bottom ul li div h1 {
      font-weight: 400; }
    .mybadge.mb-mybadge .mybadge-bottom ul li div p {
      font-size: 12px; }

.mybadge.mb-mybadge .mycollection-single:not(:nth-child(5n)) {
  margin-right: 8px; }

.mybadge-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px; }
  .mybadge-top .manage-cont-title {
    margin-bottom: 0; }

.mybadge-top-right {
  display: flex;
  align-items: center;
  color: #7c7a82;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px; }
  .mybadge-top-right span {
    color: #09b9c6;
    font-size: 14px;
    line-height: 22px;
    font: inherit;
    font-weight: 700; }
    .mybadge-top-right span:first-of-type {
      margin-right: 17px; }
  .mybadge-top-right img {
    margin-right: 3px; }

.mybadge-bottom ul {
  white-space: nowrap;
  display: flex;
  flex-wrap: wrap;
  margin-top: -12px; }
  .mybadge-bottom ul li {
    width: calc(20% - 10px);
    margin-top: 12px; }

.mycollection-single {
  display: inline-block;
  width: max-content;
  border-radius: 10px;
  border: 1px solid #e9e9ea;
  padding: 23px 12px;
  overflow: hidden; }
  .mycollection-single:not(:nth-child(5n)) {
    margin-right: 12px; }
  .mycollection-single > div:first-of-type {
    text-align: center; }
  .mycollection-single > div:nth-of-type(2) {
    text-align: center;
    margin-top: 14px; }
    .mycollection-single > div:nth-of-type(2) h1 {
      color: #504d58;
      font-size: 14px;
      font-weight: 500;
      line-height: 22px; }
    .mycollection-single > div:nth-of-type(2) p {
      color: #7c7a82;
      font-size: 13px;
      font-weight: 400;
      line-height: 20px; }

.learning-progress .manage-cont-title span {
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', 'Noto Sans KR';
  color: #09b9c6; }

.learning-progress-cont.teacher > ul {
  white-space: nowrap;
  overflow: auto;
  padding: 10px; }
  .learning-progress-cont.teacher > ul .progress-single {
    display: inline-block;
    min-width: 324px; }
    .learning-progress-cont.teacher > ul .progress-single:not(:last-of-type) {
      margin-right: 10px; }

.learning-progress-cont.print {
  box-shadow: none; }
  .learning-progress-cont.print > ul li:not(:last-of-type) {
    margin-bottom: 15px; }
  .learning-progress-cont.print > ul .progress-single {
    border-radius: 15px; }

.progress-single {
  padding: 14px 20px 25px;
  background-color: #fff;
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
  border-radius: 10px; }

.progress-category {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px; }

.progress-category-tag {
  font-size: 10px;
  font-weight: 700;
  font-family: 'Inter', 'Noto Sans KR';
  color: #0f9ba5;
  width: max-content;
  padding: 3px 13px;
  border: 1px solid #0f9ba5;
  border-radius: 20px; }

.progress-category-part {
  font-size: 11px;
  font-weight: 700;
  color: #7c7a82; }
  .progress-category-part span {
    font-size: inherit;
    font-weight: 900;
    color: #7681e5; }

.progress-key {
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .progress-key.underline {
    padding-bottom: 14px;
    border-bottom: 1px solid #d3d3d5; }

.progress-key-title {
  font-size: 16px;
  font-weight: 900;
  color: #24212e; }

.progress-key-score {
  font-size: 18px;
  font-weight: 700;
  font-family: 'Inter', 'Noto Sans KR';
  color: #504d58; }
  .progress-key-score.score100 {
    font-weight: 800;
    color: #09b9c6; }

.progress-info {
  padding-top: 18.5px;
  display: flex;
  gap: 25px; }
  .progress-info > div {
    text-align: center; }
    .progress-info > div > h1 {
      font-size: 12px;
      font-weight: 500;
      color: #0f9ba5;
      margin-bottom: 5px; }
    .progress-info > div > p {
      font-size: 14px;
      font-weight: 500;
      font-family: 'Inter', 'Noto Sans KR';
      color: #504d58; }
  .progress-info .progress-info-3 {
    width: calc(100% - 137px); }
    .progress-info .progress-info-3 h1 {
      width: calc(100% - 45px); }
  .progress-info.underline {
    padding-bottom: 22px;
    border-bottom: 1px solid #c8cdf5; }

.progress-bar-wrap {
  height: 17px;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .progress-bar-wrap .progress-bar-origin {
    width: calc(100% - 45px);
    height: 10px;
    background: #eff0f6;
    border-radius: 50px;
    position: relative; }
  .progress-bar-wrap .progress-bar-active {
    width: 80%;
    height: 10px;
    background: #7c7a82;
    border-radius: 50px;
    position: absolute;
    left: 0;
    top: 0; }
    .progress-bar-wrap .progress-bar-active.full {
      width: 100%;
      background-color: #09b9c6; }
  .progress-bar-wrap h2 {
    font-size: 14px;
    font-weight: 500;
    color: #7c7a82;
    margin-left: 8px; }

.progress-average {
  padding-top: 20px; }

.progress-average-title {
  font-size: 12px;
  font-weight: 700;
  color: #24212e;
  margin-bottom: 17px; }
  .progress-average-title span {
    font-size: inherit;
    font-weight: 900;
    color: inherit; }
  .progress-average-title img {
    margin-left: 10px; }

.progress-average-graph {
  height: 300px;
  background-color: #eff0f6; }

#send-to-parent {
  padding: 74px 104px; }
  #send-to-parent h1 {
    font-size: 26px;
    font-weight: 700;
    color: #24212e;
    margin-bottom: 10px; }
  #send-to-parent h2 {
    font-size: 16px;
    font-weight: 500;
    color: #7c7a82;
    line-height: 1.45;
    padding-bottom: 10px;
    border-bottom: 1px solid #d3d3d5;
    margin-bottom: 50px; }
  #send-to-parent p {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    color: #504d58;
    margin-bottom: 7px; }
  #send-to-parent > .input-component-box {
    display: inline-block;
    width: calc(100% - 100px);
    margin-left: 45px; }
  #send-to-parent button {
    margin-top: 50px;
    position: relative; }
    #send-to-parent button img {
      position: absolute;
      top: 50%;
      left: calc(50% - 80px);
      transform: translate(-50%, -50%); }

@media screen and (max-width: 1024px) {
  #send-to-parent {
    padding: 98px 16px 85px; }
    #send-to-parent h1 {
      font-size: 20px;
      margin-bottom: 7px; }
    #send-to-parent h2 {
      font-size: 13px;
      padding-bottom: 20px;
      margin-bottom: 20px; }
    #send-to-parent p {
      display: block; }
    #send-to-parent > .input-component-box {
      display: block;
      width: 100%;
      margin-left: 0; }
    #send-to-parent button {
      margin-top: 30px; }
      #send-to-parent button img {
        left: calc(50% - 70px); } }

#play-start {
  padding: 40px 50px 96px;
  background: #ffffff;
  box-shadow: 0px 5px 42px rgba(60, 142, 177, 0.15);
  border-radius: 35px;
  max-width: 900px;
  margin: 0 auto; }
  #play-start .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px; }
    #play-start .top .cat {
      display: flex;
      align-items: center;
      gap: 20px; }
      #play-start .top .cat .label {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        padding: 4px 8px 3px;
        background: #ffffff;
        border: 2px solid #7c7a82;
        box-sizing: border-box;
        border-radius: 5px;
        color: #7c7a82; }
      #play-start .top .cat .cat-title {
        font-size: 20px;
        font-weight: 600; }
        #play-start .top .cat .cat-title.pink {
          color: #ff84b0; }
        #play-start .top .cat .cat-title.cyan {
          color: #09b9c6; }
        #play-start .top .cat .cat-title.blue {
          color: #22a4ed; }
      #play-start .top .cat .range {
        color: #09b9c6;
        padding: 4px 10px;
        background: #f1f2fc;
        border-radius: 10px; }
        #play-start .top .cat .range p {
          font-size: 11px;
          font-weight: 500;
          color: #7681e5; }
          #play-start .top .cat .range p em {
            font-size: 11px;
            font-weight: 700;
            color: #7681e5; }
    #play-start .top .d-day {
      font-weight: 500;
      font-size: 15px;
      line-height: 22px;
      color: #7c7a82; }
  #play-start .content {
    border-radius: 20px; }
    #play-start .content .center-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 60px;
      border-radius: 20px; }
      #play-start .content .center-card.pink {
        background: #ff84b0; }
      #play-start .content .center-card.cyan {
        background: #09b9c6; }
      #play-start .content .center-card.blue {
        background: #22a4ed; }
      #play-start .content .center-card h2 {
        font-size: 48px;
        color: #fff;
        line-height: normal;
        font-weight: 700;
        text-align: center;
        letter-spacing: -4px; }
      #play-start .content .center-card h4 {
        font-size: 24px;
        line-height: 24px;
        margin-top: 50px;
        font-weight: 700;
        color: #fff;
        text-align: center; }
      #play-start .content .center-card span {
        font-size: 30px;
        color: #fff;
        line-height: normal;
        font-weight: 700;
        text-align: center; }
      #play-start .content .center-card .test-rules {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 40px; }
        #play-start .content .center-card .test-rules .rules-item {
          display: flex;
          align-items: center; }
          #play-start .content .center-card .test-rules .rules-item:not(:last-of-type):after {
            content: '';
            display: inline-block;
            width: 2px;
            height: 22px;
            background: #d3d3d5;
            margin: 0 20px; }
          #play-start .content .center-card .test-rules .rules-item img {
            margin-right: 10px; }
          #play-start .content .center-card .test-rules .rules-item span {
            font-size: 20px;
            color: #fff; }
    #play-start .content .phase {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 45px;
      padding-top: 48px;
      flex-wrap: wrap; }
      #play-start .content .phase .phase-item p {
        font-size: 16px;
        font-weight: 700; }
        #play-start .content .phase .phase-item p.pink {
          color: #ff84b0; }
        #play-start .content .phase .phase-item p.cyan {
          color: #09b9c6; }
        #play-start .content .phase .phase-item p.blue {
          color: #22a4ed; }
        #play-start .content .phase .phase-item p em {
          font-size: 24px;
          font-weight: 700; }
          #play-start .content .phase .phase-item p em.pink {
            color: #ff84b0; }
          #play-start .content .phase .phase-item p em.cyan {
            color: #09b9c6; }
          #play-start .content .phase .phase-item p em.blue {
            color: #22a4ed; }

@media screen and (max-width: 1024px) {
  #play-start {
    max-width: initial;
    width: 100%;
    padding: 30px 20px 30px;
    border-radius: 15px; }
    #play-start .top {
      flex-direction: column-reverse;
      align-items: flex-start;
      gap: 15px;
      margin-bottom: 10px; }
      #play-start .top .d-day {
        font-size: 10px; }
    #play-start .content {
      min-height: initial; }
      #play-start .content .center-card {
        padding: 40px 10px; }
        #play-start .content .center-card h2 {
          font-size: 22px;
          line-height: 33px;
          letter-spacing: -1px; }
        #play-start .content .center-card > span {
          font-size: 21px; }
        #play-start .content .center-card .test-rules {
          flex-direction: column; }
          #play-start .content .center-card .test-rules .rules-item {
            margin-top: 10px; }
            #play-start .content .center-card .test-rules .rules-item:not(:last-of-type):after {
              display: none; }
            #play-start .content .center-card .test-rules .rules-item img {
              width: 15px; }
            #play-start .content .center-card .test-rules .rules-item span {
              font-size: 14px;
              font-weight: 400;
              line-height: 1.2; }
      #play-start .content .phase {
        flex-direction: column;
        gap: 5px;
        padding: 0;
        margin-top: 30px; }
        #play-start .content .phase .phase-item p {
          font-size: 14px; }
          #play-start .content .phase .phase-item p em {
            font-size: 18px; } }

#cedulearn.font_small #play-start .top .cat .cat-title {
  font-size: 18px; }

#cedulearn.font_small #play-start .top .d-day {
  font-size: 13px; }

#cedulearn.font_small #play-start .content h2 {
  font-size: 46px; }

#cedulearn.font_small #play-start .content span {
  font-size: 28px; }

#cedulearn.font_small #play-start .content .test-rules .rules-item span {
  font-size: 18px; }

#cedulearn.font_small #play-start .content .phase .phase-item p {
  font-size: 14px; }
  #cedulearn.font_small #play-start .content .phase .phase-item p em {
    font-size: 22px; }

#cedulearn.font_small #play-start + .play-main-btn-wrap button {
  font-size: 18px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-start .top .cat .label {
    font-size: 10px; }
  #cedulearn.font_small #play-start .top .d-day {
    font-size: 12px; }
  #cedulearn.font_small #play-start .content h2 {
    font-size: 20px; }
  #cedulearn.font_small #play-start .content span {
    font-size: 19px; }
  #cedulearn.font_small #play-start .content .test-rules .rules-item span {
    font-size: 12px; }
  #cedulearn.font_small #play-start .content .phase .phase-item p {
    font-size: 12px; }
    #cedulearn.font_small #play-start .content .phase .phase-item p em {
      font-size: 16px; }
  #cedulearn.font_small #play-start + .play-main-btn-wrap button {
    font-size: 18px; } }

#cedulearn.font_normal #play-start .top .cat .label {
  font-size: 12px; }

#cedulearn.font_normal #play-start .top .cat .cat-title {
  font-size: 20px;
  font-weight: 500;
  line-height: 30px; }

#cedulearn.font_normal #play-start .top .d-day {
  font-size: 20px;
  font-weight: 500;
  line-height: 30px; }

#cedulearn.font_normal #play-start .content h2 {
  font-size: 40px; }
  #cedulearn.font_normal #play-start .content h2 span {
    font-size: 32px;
    display: block;
    margin-top: 8px; }

#cedulearn.font_normal #play-start .content span {
  font-size: 30px; }

#cedulearn.font_normal #play-start .content .test-rules .rules-item span {
  font-size: 20px; }

#cedulearn.font_normal #play-start .content .phase .phase-item p {
  font-size: 16px; }
  #cedulearn.font_normal #play-start .content .phase .phase-item p em {
    font-size: 24px; }

#cedulearn.font_normal #play-start + .play-main-btn-wrap button {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-start .top .cat .label {
    font-size: 12px; }
  #cedulearn.font_normal #play-start .top .d-day {
    font-size: 14px; }
  #cedulearn.font_normal #play-start .content h2 {
    font-size: 22px; }
  #cedulearn.font_normal #play-start .content span {
    font-size: 21px; }
  #cedulearn.font_normal #play-start .content .test-rules .rules-item span {
    font-size: 14px; }
  #cedulearn.font_normal #play-start .content .phase .phase-item p {
    font-size: 14px; }
    #cedulearn.font_normal #play-start .content .phase .phase-item p em {
      font-size: 18px; }
  #cedulearn.font_normal #play-start + .play-main-btn-wrap button {
    font-size: 20px; }
  #cedulearn.font_normal #play-start .content h2 {
    font-size: 22px; } }

#cedulearn.font_large #play-start .top .cat .cat-title {
  font-size: 22px; }

#cedulearn.font_large #play-start .top .d-day {
  font-size: 17px; }

#cedulearn.font_large #play-start .content h2 {
  font-size: 50px; }

#cedulearn.font_large #play-start .content span {
  font-size: 32px; }

#cedulearn.font_large #play-start .content .test-rules .rules-item span {
  font-size: 22px; }

#cedulearn.font_large #play-start .content .phase .phase-item p {
  font-size: 18px; }
  #cedulearn.font_large #play-start .content .phase .phase-item p em {
    font-size: 26px; }

#cedulearn.font_large #play-start + .play-main-btn-wrap button {
  font-size: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-start .top .d-day {
    font-size: 16px; }
  #cedulearn.font_large #play-start .content h2 {
    font-size: 24px; }
  #cedulearn.font_large #play-start .content span {
    font-size: 23px; }
  #cedulearn.font_large #play-start .content .test-rules .rules-item span {
    font-size: 16px; }
  #cedulearn.font_large #play-start .content .phase .phase-item p {
    font-size: 16px; }
    #cedulearn.font_large #play-start .content .phase .phase-item p em {
      font-size: 20px; }
  #cedulearn.font_large #play-start + .play-main-btn-wrap button {
    font-size: 22px; } }

#play-result + .omr-condition-wrapper .omr-test-sheet > li .play-input-text {
  width: 100%; }

#play-result {
  padding: 40px;
  background: #ffffff;
  box-shadow: 0px 5px 42px rgba(60, 142, 177, 0.15);
  border-radius: 35px;
  max-width: 900px;
  margin: 0 auto; }
  #play-result.voca-match-result {
    max-width: 1250px; }
  #play-result.pink {
    background: #ff84b0; }
  #play-result.cyan {
    background: #09b9c6; }
  #play-result.blue {
    background: #22a4ed; }
  #play-result .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px; }
    #play-result .top .cat {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px; }
      #play-result .top .cat .label {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        padding: 4px 8px 3px;
        border: 2px solid #fff;
        box-sizing: border-box;
        border-radius: 5px;
        color: #fff; }
      #play-result .top .cat .cat-title {
        font-size: 20px;
        font-weight: 500;
        color: #fff; }
    #play-result .top .d-day {
      font-weight: 500;
      font-size: 20px;
      line-height: 30px;
      color: #fff; }
  #play-result .test-notice {
    padding: 27px 0 50px; }
    #play-result .test-notice p {
      text-align: center;
      font-weight: 700;
      color: #fff;
      font-size: 22px;
      line-height: 32px; }
      #play-result .test-notice p em {
        font-weight: 700;
        font-size: 22px;
        color: inherit;
        line-height: 27px; }
    #play-result .test-notice .test-rules {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 40px; }
      #play-result .test-notice .test-rules .rules-item {
        display: flex;
        align-items: center; }
        #play-result .test-notice .test-rules .rules-item:not(:last-of-type):after {
          content: '';
          display: inline-block;
          width: 2px;
          height: 22px;
          background: #fff;
          margin: 0 20px; }
        #play-result .test-notice .test-rules .rules-item img {
          margin-right: 10px; }
        #play-result .test-notice .test-rules .rules-item span {
          font-size: 20px;
          color: #fff; }
  #play-result .content {
    border-radius: 20px; }
    #play-result .content .center-card {
      padding: 48px 20px;
      border-radius: 20px;
      background: #fff; }
      #play-result .content .center-card h2 {
        font-size: 32px;
        color: #24212e;
        line-height: normal;
        font-weight: 500;
        text-align: center; }
        #play-result .content .center-card h2 p {
          font-size: inherit;
          line-height: inherit;
          font-weight: 700; }
        #play-result .content .center-card h2 em {
          font-size: inherit;
          font-weight: inherit; }
          #play-result .content .center-card h2 em.pink {
            color: #ff84b0; }
          #play-result .content .center-card h2 em.cyan {
            color: #09b9c6; }
          #play-result .content .center-card h2 em.blue {
            color: #22a4ed; }
      #play-result .content .center-card h4 {
        text-align: center;
        font-size: 20px;
        color: #09b9c6;
        line-height: 28.96px;
        margin-top: 12px; }
      #play-result .content .center-card span {
        font-size: 30px;
        color: #fff;
        line-height: 45px;
        font-weight: 500;
        text-align: center; }
        #play-result .content .center-card span em {
          font-weight: 500; }
      #play-result .content .center-card .test-rules {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 40px; }
        #play-result .content .center-card .test-rules + .test-rules {
          margin-top: 6px; }
        #play-result .content .center-card .test-rules .rules-item {
          display: flex;
          align-items: center; }
          #play-result .content .center-card .test-rules .rules-item:not(:first-of-type) {
            margin-left: 14px; }
          #play-result .content .center-card .test-rules .rules-item img {
            margin-top: 1px;
            margin-right: 3px; }
          #play-result .content .center-card .test-rules .rules-item span {
            font-size: 20px;
            color: #7c7a82; }
            #play-result .content .center-card .test-rules .rules-item span em {
              font-size: 20px;
              color: #7c7a82; }

@media screen and (max-width: 1024px) {
  #play-result {
    max-width: initial;
    width: 100%;
    padding: 28px 24px;
    border-radius: 15px; }
    #play-result .top {
      /*
      flex-direction: column-reverse;
      */
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 20px; }
      #play-result .top .d-day {
        font-size: 10px; }
      #play-result .top .cat .cat-title {
        font-size: 14px;
        line-height: 22px; }
    #play-result .test-notice {
      padding: 0px 0 20px; }
      #play-result .test-notice p {
        text-align: center;
        font-weight: 700;
        color: #fff;
        font-size: 18px;
        line-height: 27px; }
        #play-result .test-notice p em {
          font-weight: 700;
          font-size: 18px;
          color: inherit;
          line-height: 27px; }
      #play-result .test-notice .test-rules {
        flex-direction: column;
        margin-top: 20px; }
        #play-result .test-notice .test-rules .rules-item {
          margin-top: 10px; }
          #play-result .test-notice .test-rules .rules-item:first-of-type {
            margin-top: 0; }
          #play-result .test-notice .test-rules .rules-item:not(:last-of-type):after {
            display: none; }
          #play-result .test-notice .test-rules .rules-item img {
            margin-right: 5px;
            width: 15px; }
          #play-result .test-notice .test-rules .rules-item span {
            font-size: 14px; }
    #play-result .content .center-card {
      padding: 30px 10px; }
      #play-result .content .center-card h2 {
        font-size: 20px;
        line-height: 33px; }
        #play-result .content .center-card h2 p {
          font-size: 24px;
          font-weight: 700;
          line-height: 36px; }
        #play-result .content .center-card h2 em {
          font-size: 24px; }
      #play-result .content .center-card .test-rules {
        flex-direction: column;
        margin-top: 20px; }
        #play-result .content .center-card .test-rules .rules-item:not(:last-of-type):after {
          content: '';
          display: none; }
        #play-result .content .center-card .test-rules .rules-item img {
          width: 15px;
          margin-right: 5px; }
        #play-result .content .center-card .test-rules .rules-item span {
          font-size: 14px;
          color: #7c7a82;
          line-height: 36px; }
          #play-result .content .center-card .test-rules .rules-item span em {
            font-size: 14px;
            color: #7c7a82; }
    #play-result .content .phase {
      flex-direction: column;
      gap: 5px;
      padding: 0;
      margin-top: 30px; }
      #play-result .content .phase .phase-item p {
        font-size: 14px; }
        #play-result .content .phase .phase-item p em {
          font-size: 18px; } }

#cedulearn.font_small .play_new_sub_title > p {
  font-size: 18px; }

#cedulearn.font_small #play-result .top .cat .cat-title {
  font-size: 18px; }

#cedulearn.font_small #play-result .top .d-day {
  font-size: 13px; }

#cedulearn.font_small #play-result .test-notice p {
  font-size: 16px;
  line-height: 20px; }
  #cedulearn.font_small #play-result .test-notice p em {
    font-size: inherit;
    line-height: inherit; }

#cedulearn.font_small #play-result .test-notice .rules-item span {
  font-size: 18px; }

#cedulearn.font_small #play-result .content .center-card h2 {
  font-size: 30px; }
  #cedulearn.font_small #play-result .content .center-card h2 p {
    font-size: 30px; }
    #cedulearn.font_small #play-result .content .center-card h2 p em {
      font-size: inherit; }

#cedulearn.font_small #play-result .content .center-card span {
  font-size: 28px; }

#cedulearn.font_small #play-result .content .center-card .test-rules span {
  font-size: 16px; }
  #cedulearn.font_small #play-result .content .center-card .test-rules span em {
    font-size: inherit; }

#cedulearn.font_small #play-result .content .center-card .omr-done-letter {
  font-size: 22px; }

#cedulearn.font_small #play-result .content .center-card .complete_time_info li {
  font-size: 16px; }

#cedulearn.font_small #play-result .content .center-card h4 {
  font-size: 18px; }

#cedulearn.font_small #play-result .content #voca-match-card-list h3 {
  font-size: 18px; }

#cedulearn.font_small #play-result .content #voca-match-card-list .card-list ul li .voca {
  font-size: 22px; }

#cedulearn.font_small #play-result .content #voca-match-card-list .card-list ul li .means .row i {
  font-size: 12px;
  width: 20px;
  min-width: 20px;
  height: 20px; }

#cedulearn.font_small #play-result .content #voca-match-card-list .card-list ul li .means .row span {
  font-size: 12px; }

#cedulearn.font_small #play-result + .play-main-btn-wrap button {
  font-size: 16px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-result .top {
    /*
        margin-bottom: 0;
        */ }
    #cedulearn.font_small #play-result .top .d-day {
      font-size: 12px; }
  #cedulearn.font_small #play-result .test-notice p {
    font-size: 12px; }
    #cedulearn.font_small #play-result .test-notice p em {
      font-size: 12px; }
  #cedulearn.font_small #play-result .test-notice .rules-item span {
    font-size: 12px; }
  #cedulearn.font_small #play-result .content .center-card h2 {
    font-size: 18px; }
    #cedulearn.font_small #play-result .content .center-card h2 p {
      font-size: 22px; }
      #cedulearn.font_small #play-result .content .center-card h2 p em {
        font-size: 22px; }
  #cedulearn.font_small #play-result .content .center-card span {
    font-size: 30px; }
  #cedulearn.font_small #play-result .content .center-card .test-rules span {
    font-size: 12px; }
    #cedulearn.font_small #play-result .content .center-card .test-rules span em {
      font-size: 12px; }
  #cedulearn.font_small #play-result .content .center-card .omr-done-letter {
    font-size: 12px; }
  #cedulearn.font_small #play-result .content #voca-match-card-list h3 {
    font-size: 12px; }
  #cedulearn.font_small #play-result .content #voca-match-card-list .card-list ul li .voca {
    font-size: 16px; }
  #cedulearn.font_small + .play-main-btn-wrap button {
    font-size: 18px; } }

#cedulearn.font_normal #play-result .top .cat .cat-title {
  font-size: 20px; }

#cedulearn.font_normal #play-result .top .d-day {
  font-size: 20px; }

#cedulearn.font_normal #play-result .test-notice p {
  font-size: 22px; }
  #cedulearn.font_normal #play-result .test-notice p em {
    font-size: 22px; }

#cedulearn.font_normal #play-result .test-notice .rules-item span {
  font-size: 20px; }

#cedulearn.font_normal #play-result .content .center-card h2 {
  font-size: 32px; }
  #cedulearn.font_normal #play-result .content .center-card h2 p {
    font-size: inherit;
    margin-top: 8px; }
    #cedulearn.font_normal #play-result .content .center-card h2 p em {
      font-size: inherit; }

#cedulearn.font_normal #play-result .content .center-card span {
  font-size: 30px; }

#cedulearn.font_normal #play-result .content .center-card .test-rules span {
  font-size: 18px;
  line-height: 28px; }
  #cedulearn.font_normal #play-result .content .center-card .test-rules span em {
    font-size: inherit;
    line-height: inherit; }

#cedulearn.font_normal #play-result .content .center-card .omr-done-letter {
  font-size: 24px; }

#cedulearn.font_normal #play-result .content #voca-match-card-list h3 {
  font-size: 20px; }

#cedulearn.font_normal #play-result .content #voca-match-card-list .card-list ul li .voca {
  font-size: 24px; }

#cedulearn.font_normal #play-result .content #voca-match-card-list .card-list ul li .means .row i {
  font-size: 14px;
  width: 22px;
  min-width: 22px;
  height: 22px; }

#cedulearn.font_normal #play-result .content #voca-match-card-list .card-list ul li .means .row span {
  font-size: 14px; }

#cedulearn.font_normal #play-result + .play-main-btn-wrap button {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-result .top {
    /*
        margin-bottom: 0;
        */ }
    #cedulearn.font_normal #play-result .top .cat .cat-title {
      font-size: 14px;
      line-height: 22px; }
    #cedulearn.font_normal #play-result .top .d-day {
      font-size: 14px;
      line-height: 22px; }
  #cedulearn.font_normal #play-result .test-notice p {
    font-size: 18px; }
    #cedulearn.font_normal #play-result .test-notice p em {
      font-size: 18px; }
  #cedulearn.font_normal #play-result .test-notice .rules-item span {
    font-size: 14px; }
  #cedulearn.font_normal #play-result .content .center-card h2 {
    font-size: 20px; }
    #cedulearn.font_normal #play-result .content .center-card h2 p {
      font-size: 24px; }
      #cedulearn.font_normal #play-result .content .center-card h2 p em {
        font-size: 24px; }
  #cedulearn.font_normal #play-result .content .center-card span {
    font-size: 32px; }
  #cedulearn.font_normal #play-result .content .center-card .test-rules span {
    font-size: 14px; }
    #cedulearn.font_normal #play-result .content .center-card .test-rules span em {
      font-size: 14px; }
  #cedulearn.font_normal #play-result .content .center-card .omr-done-letter {
    font-size: 14px; }
  #cedulearn.font_normal #play-result .content #voca-match-card-list h3 {
    font-size: 14px; }
  #cedulearn.font_normal #play-result .content #voca-match-card-list .card-list ul li .voca {
    font-size: 18px; }
  #cedulearn.font_normal + .play-main-btn-wrap button {
    font-size: 20px; } }

#cedulearn.font_large .play_new_sub_title > p {
  font-size: 22px; }

#cedulearn.font_large #play-result .top .cat .cat-title {
  font-size: 22px; }

#cedulearn.font_large #play-result .top .d-day {
  font-size: 17px; }

#cedulearn.font_large #play-result .test-notice p {
  font-size: 20px; }
  #cedulearn.font_large #play-result .test-notice p em {
    font-size: 20px; }

#cedulearn.font_large #play-result .test-notice .rules-item span {
  font-size: 22px; }

#cedulearn.font_large #play-result .content .center-card h2 {
  font-size: 42px; }
  #cedulearn.font_large #play-result .content .center-card h2 p {
    font-size: 50px; }
    #cedulearn.font_large #play-result .content .center-card h2 p em {
      font-size: 50px; }

#cedulearn.font_large #play-result .content .center-card span {
  font-size: 32px; }

#cedulearn.font_large #play-result .content .center-card .test-rules span {
  font-size: 22px; }
  #cedulearn.font_large #play-result .content .center-card .test-rules span em {
    font-size: 22px; }

#cedulearn.font_large #play-result .content .center-card .omr-done-letter {
  font-size: 26px; }

#cedulearn.font_large #play-result .content .center-card .complete_time_info li {
  font-size: 20px; }

#cedulearn.font_large #play-result .content .center-card h4 {
  font-size: 22px; }

#cedulearn.font_large #play-result .content #voca-match-card-list h3 {
  font-size: 22px; }

#cedulearn.font_large #play-result .content #voca-match-card-list .card-list ul li .voca {
  font-size: 26px; }

#cedulearn.font_large #play-result .content #voca-match-card-list .card-list ul li .means .row i {
  font-size: 16px;
  width: 24px;
  min-width: 24px;
  height: 24px; }

#cedulearn.font_large #play-result .content #voca-match-card-list .card-list ul li .means .row span {
  font-size: 16px; }

#cedulearn.font_large #play-result + .play-main-btn-wrap button {
  font-size: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-result .top {
    /*
        margin-bottom: 0;
        */ }
    #cedulearn.font_large #play-result .top .d-day {
      font-size: 16px; }
  #cedulearn.font_large #play-result .test-notice p {
    font-size: 16px; }
    #cedulearn.font_large #play-result .test-notice p em {
      font-size: 16px; }
  #cedulearn.font_large #play-result .test-notice .rules-item span {
    font-size: 16px; }
  #cedulearn.font_large #play-result .content .center-card h2 {
    font-size: 22px; }
    #cedulearn.font_large #play-result .content .center-card h2 p {
      font-size: 26px; }
      #cedulearn.font_large #play-result .content .center-card h2 p em {
        font-size: 26px; }
  #cedulearn.font_large #play-result .content .center-card span {
    font-size: 34px; }
  #cedulearn.font_large #play-result .content .center-card .test-rules span {
    font-size: 16px; }
    #cedulearn.font_large #play-result .content .center-card .test-rules span em {
      font-size: 16px; }
  #cedulearn.font_large #play-result .content .center-card .omr-done-letter {
    font-size: 16px; }
  #cedulearn.font_large #play-result .content #voca-match-card-list h3 {
    font-size: 16px; }
  #cedulearn.font_large #play-result .content #voca-match-card-list .card-list ul li .voca {
    font-size: 20px; }
  #cedulearn.font_large + .play-main-btn-wrap button {
    font-size: 22px; } }

@media screen and (max-width: 1024px) {
  #cedulearn #play-frame .play-content-box .test-card .top p.sentence .here-answer {
    width: 100%;
    display: block; }
    #cedulearn #play-frame .play-content-box .test-card .top p.sentence .here-answer span.slash {
      width: 100%;
      white-space: break-spaces;
      min-height: 44px; }
      #cedulearn #play-frame .play-content-box .test-card .top p.sentence .here-answer span.slash .play-desc-text .desc-area textarea {
        padding: 2px 8px;
        overflow: hidden; }
      #cedulearn #play-frame .play-content-box .test-card .top p.sentence .here-answer span.slash.one i, #cedulearn #play-frame .play-content-box .test-card .top p.sentence .here-answer span.slash.wrong i, #cedulearn #play-frame .play-content-box .test-card .top p.sentence .here-answer span.slash.two i {
        display: none; }
      #cedulearn #play-frame .play-content-box .test-card .top p.sentence .here-answer span.slash.one p:after {
        content: '';
        display: inline-block;
        width: 25px;
        height: 27px;
        background-image: url("../../../img/icon/mo_slash_one.svg");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        vertical-align: middle; }
      #cedulearn #play-frame .play-content-box .test-card .top p.sentence .here-answer span.slash.two p:after {
        content: '';
        display: inline-block;
        width: 25px;
        height: 27px;
        background-image: url("../../../img/icon/mo_slash_two.svg");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        vertical-align: middle; }
      #cedulearn #play-frame .play-content-box .test-card .top p.sentence .here-answer span.slash.wrong p:after {
        content: '';
        display: inline-block;
        width: 25px;
        height: 27px;
        background-image: url("../../../img/icon/mo_slash_wrong.svg");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        vertical-align: middle; }
    #cedulearn #play-frame .play-content-box .test-card .top p.sentence .here-answer.only_text i {
      display: inline-block !important; } }

#cedulearn #right-answer #play-frame .play-content-box .test-card .top p.sentence .here-answer.only_input .one:after,
#cedulearn #right-answer #play-frame .play-content-box .test-card .top p.sentence .here-answer.only_input .two:after {
  margin-top: -24px; }

.q_box.type2 #play-frame .play-content-box .test-card {
  box-shadow: none;
  padding: 0 0 24px 0; }

#play-frame {
  width: 70vw;
  margin: 0 auto;
  position: relative; }
  #play-frame.w90vw {
    width: 90vw; }
  #play-frame .preview_test {
    position: absolute;
    top: -25px;
    right: 0;
    font-size: 15px;
    color: #504d58; }
  #play-frame .test-timer {
    position: absolute;
    top: 68px;
    left: 0;
    display: flex;
    align-items: flex-start;
    gap: 5px;
    background: #09b9c6;
    border-radius: 10px;
    padding: 15px 15px; }
    #play-frame .test-timer img {
      width: 14px;
      height: 14px;
      transform: translateY(6px); }
    #play-frame .test-timer p {
      color: #fff;
      font-size: 18px;
      line-height: 26px; }
  #play-frame .speaker {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 10px;
    right: 0;
    font-size: 15px;
    line-height: 21px;
    color: #a7a6ab;
    cursor: pointer; }
    #play-frame .speaker img {
      margin-right: 8px; }
  #play-frame .play-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 0 140px 50px; }
    #play-frame .play-header .counting {
      display: inline-block;
      border: 1px solid #09b9c6;
      box-sizing: border-box;
      border-radius: 50px;
      padding: 10px 20px;
      margin-bottom: 20px;
      color: #09b9c6;
      font-weight: 500; }
      #play-frame .play-header .counting span {
        color: #7681e5;
        font-size: 16px;
        font-weight: 500;
        margin-right: 10px; }
    #play-frame .play-header h2 {
      font-size: 28px;
      color: #504d58;
      word-break: keep-all;
      text-align: center; }
  #play-frame .play-content-box {
    position: relative; }
    #play-frame .play-content-box .long-bar {
      padding: 24px 48px;
      background: #ffffff;
      box-shadow: 0px 5px 42px rgba(60, 142, 177, 0.15);
      border-radius: 15px;
      margin-bottom: 20px; }
      #play-frame .play-content-box .long-bar p {
        font-size: 24px;
        line-height: 32px;
        color: #504d58; }
        #play-frame .play-content-box .long-bar p.center-left {
          text-align: center; }
        #play-frame .play-content-box .long-bar p.only-write-blank {
          text-align: left; }
        #play-frame .play-content-box .long-bar p.line40 {
          line-height: 40px; }
        #play-frame .play-content-box .long-bar p * {
          font-size: inherit;
          color: inherit;
          line-height: inherit;
          text-underline-offset: 6px; }
          @media screen and (max-width: 1024px) {
            #play-frame .play-content-box .long-bar p * {
              text-underline-offset: 4px; } }
        #play-frame .play-content-box .long-bar p img {
          width: 100%;
          display: block;
          margin: auto;
          max-width: 480px !important; }
          @media screen and (max-width: 1024px) {
            #play-frame .play-content-box .long-bar p img {
              max-width: 480px !important; } }
        #play-frame .play-content-box .long-bar p em {
          font-weight: 700;
          font-size: inherit;
          color: inherit;
          line-height: inherit; }
          #play-frame .play-content-box .long-bar p em.underline {
            text-decoration: underline; }
          #play-frame .play-content-box .long-bar p em.w80 {
            display: inline-block;
            width: 80px;
            text-align: center;
            border-bottom: 1px solid #504d58; }
      #play-frame .play-content-box .long-bar .means {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px; }
        #play-frame .play-content-box .long-bar .means i {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 30px;
          height: 30px;
          line-height: 20px;
          border-radius: 50%;
          border: 1px solid #504d58;
          font-weight: bold;
          font-size: 18px;
          color: #504d58;
          text-align: center; }
        #play-frame .play-content-box .long-bar .means span {
          font-size: 22px;
          line-height: 32px;
          color: #504d58; }
        #play-frame .play-content-box .long-bar .means.means_bigger > div {
          font-size: 24px; }
    #play-frame .play-content-box .test-card {
      background: #ffffff;
      box-shadow: 0px 5px 42px rgba(60, 142, 177, 0.15);
      border-radius: 20px;
      padding: 40px; }
      #play-frame .play-content-box .test-card.init {
        all: unset; }
      #play-frame .play-content-box .test-card.pd_top_s {
        padding-top: 28px; }
      #play-frame .play-content-box .test-card .top.no-hidden {
        overflow: inherit; }
      #play-frame .play-content-box .test-card .top.single {
        padding-bottom: 00px;
        margin-bottom: 00px;
        border-bottom: none; }
        #play-frame .play-content-box .test-card .top.single img {
          max-width: 400px !important; }
      #play-frame .play-content-box .test-card .top.no-line {
        border-bottom: 0; }
      #play-frame .play-content-box .test-card .top p.desc6 {
        color: #504d58;
        font-family: 'Roboto', 'Noto Sans KR';
        font-size: 24px;
        line-height: 60px; }
        #play-frame .play-content-box .test-card .top p.desc6 em {
          font-size: inherit;
          font-weight: 700;
          font-family: 'Roboto', 'Noto Sans KR'; }
        #play-frame .play-content-box .test-card .top p.desc6 b {
          font-size: inherit;
          font-weight: 700;
          font-family: 'Roboto', 'Noto Sans KR';
          text-decoration: underline; }
      #play-frame .play-content-box .test-card .top p.sentence {
        font-family: 'Roboto', 'Noto Sans KR';
        font-weight: 400;
        line-height: 60px;
        font-size: 24px;
        color: #504d58;
        position: relative; }
        #play-frame .play-content-box .test-card .top p.sentence.lineH90 {
          line-height: 90px;
          transform: translateY(0px); }
        #play-frame .play-content-box .test-card .top p.sentence.important-lineH90 {
          line-height: 90px; }
        #play-frame .play-content-box .test-card .top p.sentence.lineH210 {
          line-height: 210px;
          transform: translateY(0px); }
        #play-frame .play-content-box .test-card .top p.sentence img {
          max-width: 100%; }
        #play-frame .play-content-box .test-card .top p.sentence * {
          line-height: inherit;
          color: inherit;
          font-size: inherit;
          font-weight: inherit; }
        #play-frame .play-content-box .test-card .top p.sentence b {
          font-family: inherit;
          font-weight: inherit;
          line-height: inherit;
          font-size: inherit;
          margin: 0 2px; }
          #play-frame .play-content-box .test-card .top p.sentence b.s-braket {
            color: #ff5050;
            font-weight: 500; }
          #play-frame .play-content-box .test-card .top p.sentence b.b-braket {
            color: #eb08ff;
            font-weight: 500; }
        #play-frame .play-content-box .test-card .top p.sentence .playing {
          line-height: 0;
          position: absolute;
          left: 0;
          right: 0;
          height: 50px;
          border-radius: 10px;
          top: 50%;
          transform: translateY(-50%);
          background-color: #84dce2; }
          @media screen and (max-width: 1024px) {
            #play-frame .play-content-box .test-card .top p.sentence .playing {
              height: 36px; } }
          #play-frame .play-content-box .test-card .top p.sentence .playing > .equalizer-wrap {
            position: absolute;
            left: 0;
            bottom: calc(100% + 3px);
            width: 24px;
            height: 19px;
            display: flex;
            align-items: flex-end;
            justify-content: space-between; }
            #play-frame .play-content-box .test-card .top p.sentence .playing > .equalizer-wrap > div {
              width: 3px;
              border-radius: 2px;
              background-color: #09b9c6; }

@keyframes bar1 {
  0% {
    height: 7px; }
  50% {
    height: 15px; }
  100% {
    height: 7px; } }

@keyframes bar2 {
  0% {
    height: 12px; }
  50% {
    height: 8px; }
  100% {
    height: 12px; } }

@keyframes bar3 {
  0% {
    height: 19px; }
  50% {
    height: 12px; }
  100% {
    height: 19px; } }

@keyframes bar4 {
  0% {
    height: 16px; }
  50% {
    height: 8px; }
  100% {
    height: 16px; } }

@keyframes bar5 {
  0% {
    height: 9px; }
  50% {
    height: 12px; }
  100% {
    height: 9px; } }
              #play-frame .play-content-box .test-card .top p.sentence .playing > .equalizer-wrap > div:nth-child(1) {
                animation: bar1 0.9s ease-in-out infinite; }
              #play-frame .play-content-box .test-card .top p.sentence .playing > .equalizer-wrap > div:nth-child(2) {
                animation: bar2 1s ease-in-out infinite; }
              #play-frame .play-content-box .test-card .top p.sentence .playing > .equalizer-wrap > div:nth-child(3) {
                animation: bar3 0.8s ease-in-out infinite; }
              #play-frame .play-content-box .test-card .top p.sentence .playing > .equalizer-wrap > div:nth-child(4) {
                animation: bar4 0.9s ease-in-out infinite; }
              #play-frame .play-content-box .test-card .top p.sentence .playing > .equalizer-wrap > div:nth-child(5) {
                animation: bar5 0.7s ease-in-out infinite; }
        #play-frame .play-content-box .test-card .top p.sentence > p {
          position: relative;
          font-family: inherit;
          font-weight: inherit;
          line-height: inherit;
          font-size: inherit;
          color: inherit;
          padding-bottom: 6px;
          margin-right: 5px;
          min-width: max-content;
          white-space: nowrap; }
          #play-frame .play-content-box .test-card .top p.sentence > p.hint u {
            border-bottom: 3px solid #09b9c6; }
          #play-frame .play-content-box .test-card .top p.sentence > p.gray u {
            border-bottom: 3px solid #d3d3d5; }
          #play-frame .play-content-box .test-card .top p.sentence > p.red {
            color: #ff5050; }
            #play-frame .play-content-box .test-card .top p.sentence > p.red u {
              border-bottom: 3px solid #ff5050; }
          #play-frame .play-content-box .test-card .top p.sentence > p u {
            position: relative;
            font-family: inherit;
            font-weight: inherit;
            line-height: inherit;
            font-size: inherit;
            color: inherit;
            text-decoration: none;
            padding-bottom: 5px; }
            #play-frame .play-content-box .test-card .top p.sentence > p u.line1 {
              padding-bottom: 10px; }
            #play-frame .play-content-box .test-card .top p.sentence > p u.line2 {
              padding-bottom: 25px; }
              #play-frame .play-content-box .test-card .top p.sentence > p u.line2 i {
                top: 46px; }
          #play-frame .play-content-box .test-card .top p.sentence > p i {
            top: 31px;
            left: -13px;
            position: absolute;
            font-family: 'Roboto', 'Noto Sans KR';
            font-style: normal;
            font-weight: bold;
            font-size: 18px; }
            #play-frame .play-content-box .test-card .top p.sentence > p i.ilong {
              left: -28px;
              background-color: white; }
            #play-frame .play-content-box .test-card .top p.sentence > p i.klong {
              left: -34px;
              background-color: white; }
            #play-frame .play-content-box .test-card .top p.sentence > p i.s:before {
              content: 'S';
              color: #09b9c6;
              font-size: inherit; }
            #play-frame .play-content-box .test-card .top p.sentence > p i.v:before {
              content: 'V';
              color: #7681e5;
              font-size: inherit; }
            #play-frame .play-content-box .test-card .top p.sentence > p i.io {
              left: -28px; }
              #play-frame .play-content-box .test-card .top p.sentence > p i.io:before {
                content: 'I.O';
                color: #ff84b0;
                font-size: inherit; }
            #play-frame .play-content-box .test-card .top p.sentence > p i.do {
              left: -32px; }
              #play-frame .play-content-box .test-card .top p.sentence > p i.do:before {
                content: 'D.O';
                color: #ffaa04;
                font-size: inherit; }
          #play-frame .play-content-box .test-card .top p.sentence > p.slash {
            position: relative;
            white-space: nowrap; }
            #play-frame .play-content-box .test-card .top p.sentence > p.slash i {
              position: static;
              display: inline-block;
              width: 4px;
              height: 30px;
              border-radius: 16px;
              transform: rotate(20deg);
              vertical-align: middle;
              margin: 0 6px 0 6px; }
              #play-frame .play-content-box .test-card .top p.sentence > p.slash i.green {
                background: #0f9ba5; }
              #play-frame .play-content-box .test-card .top p.sentence > p.slash i.cyan {
                background: #09b9c6; }
              #play-frame .play-content-box .test-card .top p.sentence > p.slash i.purple {
                background: #7681e5; }
              #play-frame .play-content-box .test-card .top p.sentence > p.slash i.red {
                background: #ff5050; }
            #play-frame .play-content-box .test-card .top p.sentence > p.slash i + i {
              margin-left: 0px;
              margin-right: 8px; }
        #play-frame .play-content-box .test-card .top p.sentence span:not(.slash) {
          cursor: pointer; }
        #play-frame .play-content-box .test-card .top p.sentence b {
          font: inherit;
          color: #a7a6ab; }
        #play-frame .play-content-box .test-card .top p.sentence input[type='text'] {
          padding-left: 12px;
          padding-right: 12px; }
      #play-frame .play-content-box .test-card .top .append-word {
        font-family: 'Roboto', 'Noto Sans KR';
        font-size: 24px;
        line-height: 90px;
        color: #24212e; }
        #play-frame .play-content-box .test-card .top .append-word .append-area {
          display: inline-flex;
          padding-bottom: 5px;
          margin: 0 4px;
          flex-wrap: wrap;
          border-bottom: 2px solid #504d58; }
          #play-frame .play-content-box .test-card .top .append-word .append-area.under_text {
            border-bottom: 2px solid #ff5050; }
          #play-frame .play-content-box .test-card .top .append-word .append-area.desc_text {
            border-bottom: 2px solid #3ac7d1; }
          #play-frame .play-content-box .test-card .top .append-word .append-area > button {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            font-family: 'Roboto', 'Noto Sans KR';
            font-weight: 700;
            font-size: 24px;
            background: #fff;
            box-sizing: border-box;
            box-shadow: 0px 4px 3px rgba(119, 119, 119, 0.2);
            border-radius: 15px;
            padding: 22px 31px;
            color: #09b9c6;
            border: 3px solid #09b9c6;
            margin-top: 10px; }
            #play-frame .play-content-box .test-card .top .append-word .append-area > button:not(:last-of-type) {
              margin-right: 10px; }
          #play-frame .play-content-box .test-card .top .append-word .append-area.deep_line {
            border: none; }
            #play-frame .play-content-box .test-card .top .append-word .append-area.deep_line .play-input-text {
              border-bottom: 1px solid #504d58; }
            #play-frame .play-content-box .test-card .top .append-word .append-area.deep_line.under_text {
              border: none; }
              #play-frame .play-content-box .test-card .top .append-word .append-area.deep_line.under_text .play-input-text {
                border-bottom: 3px solid #ff5050; }
            #play-frame .play-content-box .test-card .top .append-word .append-area.deep_line.desc_text {
              border: none; }
              #play-frame .play-content-box .test-card .top .append-word .append-area.deep_line.desc_text .play-input-text {
                border-bottom: 3px solid #3ac7d1; }
      #play-frame .play-content-box .test-card .top .desc1-input {
        display: flex;
        align-items: center;
        position: relative; }
        #play-frame .play-content-box .test-card .top .desc1-input.child_p_flex_initial > p {
          display: initial; }
        #play-frame .play-content-box .test-card .top .desc1-input.baseline > p {
          align-items: baseline; }
        #play-frame .play-content-box .test-card .top .desc1-input p {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          font-family: 'Roboto', 'Noto Sans KR';
          font-style: normal;
          font-weight: 400;
          font-size: 24px;
          color: #504d58;
          width: 100%;
          line-height: 40px;
          white-space: break-spaces; }
          #play-frame .play-content-box .test-card .top .desc1-input p .play-input-text {
            font-size: 16px;
            color: inherit;
            text-align: left;
            padding: 20px; }
            #play-frame .play-content-box .test-card .top .desc1-input p .play-input-text input {
              font-size: inherit;
              color: inherit;
              line-height: inherit; }
          #play-frame .play-content-box .test-card .top .desc1-input p * {
            font-size: inherit;
            font-weight: inherit;
            color: inherit;
            font-family: inherit;
            font-style: inherit;
            text-underline-offset: 6px; }
            @media screen and (max-width: 1024px) {
              #play-frame .play-content-box .test-card .top .desc1-input p * {
                text-underline-offset: 4px; } }
          #play-frame .play-content-box .test-card .top .desc1-input p strong {
            font-weight: bold; }
          #play-frame .play-content-box .test-card .top .desc1-input p em {
            font-style: italic; }
          #play-frame .play-content-box .test-card .top .desc1-input p img {
            width: 100%;
            max-width: 1250px;
            max-height: 800px;
            display: block;
            margin: auto; }
        #play-frame .play-content-box .test-card .top .desc1-input.under-text-top-small .input__generator .under-text {
          top: 48px; }
        #play-frame .play-content-box .test-card .top .desc1-input .input__generator {
          display: inline-block;
          width: 35%; }
          #play-frame .play-content-box .test-card .top .desc1-input .input__generator .under-text {
            color: #ff5050;
            font-size: 20px;
            font-family: 'Roboto', 'Noto Sans KR';
            margin: 0 5px;
            text-align: left;
            line-height: initial; }
      #play-frame .play-content-box .test-card .top .desc2-input {
        display: flex;
        flex-direction: column;
        gap: 50px; }
        #play-frame .play-content-box .test-card .top .desc2-input > div {
          display: flex;
          align-items: center;
          gap: 10px; }
          #play-frame .play-content-box .test-card .top .desc2-input > div p {
            font-family: 'Roboto', 'Noto Sans KR';
            font-size: 24px;
            color: #504d58;
            line-height: 40px; }
            #play-frame .play-content-box .test-card .top .desc2-input > div p span .play-input-text {
              display: inline-block;
              width: 20%;
              min-width: 100px;
              margin: 0 5px; }
      #play-frame .play-content-box .test-card .top .desc7 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; }
        #play-frame .play-content-box .test-card .top .desc7 img {
          max-width: 100%; }
        #play-frame .play-content-box .test-card .top .desc7 p {
          font-family: 'Roboto', 'Noto Sans KR';
          font-size: 24px;
          color: #504d58;
          margin-top: 20px; }
      #play-frame .play-content-box .test-card .top .list2 p {
        font-family: 'Roboto', 'Noto Sans KR';
        font-size: 24px;
        color: #504d58;
        line-height: 48px; }
        #play-frame .play-content-box .test-card .top .list2 p * {
          color: inherit;
          font-size: inherit;
          line-height: inherit;
          text-underline-offset: 6px; }
          @media screen and (max-width: 1024px) {
            #play-frame .play-content-box .test-card .top .list2 p * {
              text-underline-offset: 4px; } }
        #play-frame .play-content-box .test-card .top .list2 p em {
          font-family: inherit;
          font-weight: 700;
          font-size: inherit;
          line-height: inherit; }
        #play-frame .play-content-box .test-card .top .list2 p span {
          font-family: inherit;
          font-size: inherit;
          display: inline-block;
          text-align: center;
          border-bottom: 1px solid #504d58; }
      #play-frame .play-content-box .test-card .top .list3 p {
        font-family: 'Roboto', 'Noto Sans KR';
        font-size: 24px;
        color: #504d58; }
        #play-frame .play-content-box .test-card .top .list3 p span {
          font-family: inherit;
          font-weight: 700;
          color: inherit;
          font-size: inherit;
          text-decoration: underline;
          display: inline-block;
          margin: 0 5px; }
      #play-frame .play-content-box .test-card .top .list4 p {
        font-family: 'Roboto', 'Noto Sans KR';
        font-size: 24px;
        color: #504d58; }
        #play-frame .play-content-box .test-card .top .list4 p.problems {
          font-size: 22px;
          font-weight: bold;
          margin-bottom: 60px; }
        #play-frame .play-content-box .test-card .top .list4 p span {
          font-family: inherit;
          font-weight: 700;
          color: inherit;
          font-size: inherit;
          text-decoration: underline;
          display: inline-block;
          margin: 0 5px; }
      #play-frame .play-content-box .test-card .top .select1 p {
        font-family: 'Roboto', 'Noto Sans KR';
        font-size: 24px;
        line-height: 60px;
        color: #504d58; }
        #play-frame .play-content-box .test-card .top .select1 p img {
          max-width: 100%; }
        #play-frame .play-content-box .test-card .top .select1 p * {
          color: inherit;
          line-height: inherit;
          font-size: inherit;
          text-underline-offset: 6px; }
          @media screen and (max-width: 1024px) {
            #play-frame .play-content-box .test-card .top .select1 p * {
              text-underline-offset: 4px; } }
        #play-frame .play-content-box .test-card .top .select1 p.cmdt {
          text-align: center;
          margin-top: 60px; }
        #play-frame .play-content-box .test-card .top .select1 p span.click-bridge {
          display: inline-block;
          padding: 20px 30px;
          font-family: 'Roboto', 'Noto Sans KR';
          font-size: 22px;
          line-height: 26px;
          text-align: center;
          color: #504d58;
          background: #ffffff;
          border: 1px solid #09b9c6;
          box-sizing: border-box;
          border-radius: 15px;
          margin: 5px 10px;
          cursor: pointer; }
        #play-frame .play-content-box .test-card .top .select1 p span.active {
          background: #09b9c6;
          color: #fff; }
        #play-frame .play-content-box .test-card .top .select1 p span.wrong {
          color: #ff5050 !important;
          border: 3px solid #ff5050 !important; }
      #play-frame .play-content-box .test-card .top .select2 {
        display: flex;
        gap: 30px;
        align-items: center;
        justify-content: center;
        margin-top: 60px; }
        #play-frame .play-content-box .test-card .top .select2 button {
          display: inline-block;
          padding: 22px 31px;
          font-family: 'Roboto', 'Noto Sans KR';
          font-size: 22px;
          line-height: 26px;
          text-align: center;
          color: #504d58;
          background: #ffffff;
          border: 1px solid #09b9c6;
          box-sizing: border-box;
          border-radius: 10px;
          cursor: pointer; }
          #play-frame .play-content-box .test-card .top .select2 button.active {
            background: #09b9c6;
            color: #fff; }
      #play-frame .play-content-box .test-card .top .ox1 .div_row_wrap {
        display: flex;
        flex-wrap: wrap; }
      #play-frame .play-content-box .test-card .top .ox1 .div_row {
        display: flex;
        justify-content: space-between;
        flex-direction: column; }
        #play-frame .play-content-box .test-card .top .ox1 .div_row.first {
          margin-right: 40px; }
        #play-frame .play-content-box .test-card .top .ox1 .div_row.last {
          flex: 1; }
          #play-frame .play-content-box .test-card .top .ox1 .div_row.last .under-text {
            position: static !important;
            margin-top: 6px; }
      #play-frame .play-content-box .test-card .top .ox1 .row {
        width: 100%; }
        #play-frame .play-content-box .test-card .top .ox1 .row:not(:last-of-type) {
          margin-bottom: 40px; }
        #play-frame .play-content-box .test-card .top .ox1 .row .ox-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
          background: #ffffff;
          border: 1px solid #504d58;
          box-sizing: border-box;
          border-radius: 15px;
          padding: 0 20px;
          width: 100%;
          min-width: 150px;
          height: 60px;
          color: #504d58;
          transition: all 0.3s; }
          #play-frame .play-content-box .test-card .top .ox1 .row .ox-btn.active {
            color: #09b9c6;
            border: 1px solid #09b9c6; }
            #play-frame .play-content-box .test-card .top .ox1 .row .ox-btn.active.fill {
              color: #fff; }
          #play-frame .play-content-box .test-card .top .ox1 .row .ox-btn.fill {
            color: #fff;
            background-color: #09b9c6; }
          #play-frame .play-content-box .test-card .top .ox1 .row .ox-btn.wrong {
            color: #ff5050 !important;
            border: 3px solid #ff5050 !important; }
          #play-frame .play-content-box .test-card .top .ox1 .row .ox-btn:hover {
            background-color: #f4f5f6; }
        #play-frame .play-content-box .test-card .top .ox1 .row .play-input-text {
          flex: 1; }
          #play-frame .play-content-box .test-card .top .ox1 .row .play-input-text.fill {
            background-color: #09b9c6; }
            #play-frame .play-content-box .test-card .top .ox1 .row .play-input-text.fill > input {
              color: #fff; }
          #play-frame .play-content-box .test-card .top .ox1 .row .play-input-text.wrong {
            border: 3px solid #ff5050 !important;
            background-image: url("/img/icon/check-o-red.png");
            background-repeat: no-repeat;
            background-position-y: center;
            background-position-x: calc(100% - 17px); }
            #play-frame .play-content-box .test-card .top .ox1 .row .play-input-text.wrong > input {
              color: #ff5050; }
        #play-frame .play-content-box .test-card .top .ox1 .row.active button {
          background-color: #09b9c6;
          color: #fff !important; }
        #play-frame .play-content-box .test-card .top .ox1 .row.active .play-input-text {
          background-color: #09b9c6;
          border-color: #09b9c6;
          color: #fff !important; }
          #play-frame .play-content-box .test-card .top .ox1 .row.active .play-input-text.wrong {
            border-color: #ff5050;
            background: #fff; }
            #play-frame .play-content-box .test-card .top .ox1 .row.active .play-input-text.wrong input {
              color: #504d58; }
      #play-frame .play-content-box .test-card .top .ox2.wroung_text_reset .play-input-text {
        position: static !important;
        margin-top: 14px; }
      #play-frame .play-content-box .test-card .top .ox2.wroung_text_reset .under-text {
        position: static !important;
        transform: none !important; }
      #play-frame .play-content-box .test-card .top .ox2.wroung_text_reset span,
      #play-frame .play-content-box .test-card .top .ox2.wroung_text_reset i {
        vertical-align: top; }
      #play-frame .play-content-box .test-card .top .ox2.wroung_text_reset span {
        margin-top: -4px;
        white-space: nowrap; }
        #play-frame .play-content-box .test-card .top .ox2.wroung_text_reset span textarea {
          white-space: normal; }
      #play-frame .play-content-box .test-card .top .ox2 p {
        font-family: 'Roboto', 'Noto Sans KR';
        font-weight: 400;
        font-size: 24px;
        line-height: 150px;
        color: #504d58; }
        #play-frame .play-content-box .test-card .top .ox2 p i {
          font-size: inherit; }
          #play-frame .play-content-box .test-card .top .ox2 p i * {
            font-size: inherit; }
        #play-frame .play-content-box .test-card .top .ox2 p span {
          display: inline-block;
          position: relative;
          font-family: inherit;
          font-weight: 700;
          font-size: inherit;
          color: #504d58;
          border-radius: 8px;
          padding: 3px;
          padding-bottom: 8px; }
          #play-frame .play-content-box .test-card .top .ox2 p span:not(.hlight)::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 33px;
            border-radius: inherit;
            background: #84dce2 !important;
            z-index: 0; }
          #play-frame .play-content-box .test-card .top .ox2 p span u {
            cursor: pointer;
            position: relative;
            z-index: 1;
            text-underline-offset: 6px;
            font-weight: 700; }
            @media screen and (max-width: 1024px) {
              #play-frame .play-content-box .test-card .top .ox2 p span u {
                text-underline-offset: 4px; } }
          #play-frame .play-content-box .test-card .top .ox2 p span * {
            color: inherit;
            font-size: inherit;
            font-family: inherit; }
          #play-frame .play-content-box .test-card .top .ox2 p span.not-selected:after {
            background: #fff; }
          #play-frame .play-content-box .test-card .top .ox2 p span.wrong:after {
            background: rgba(255, 80, 80, 0.5); }
          #play-frame .play-content-box .test-card .top .ox2 p span.wrong .under-text {
            color: #ff5050;
            font-size: 20px;
            font-family: 'Roboto', 'Noto Sans KR';
            position: absolute;
            transform: translateY(75px);
            width: max-content;
            max-width: 48vw; }
            @media screen and (max-width: 1024px) {
              #play-frame .play-content-box .test-card .top .ox2 p span.wrong .under-text {
                top: auto !important;
                transform: translateY(45px); } }
          #play-frame .play-content-box .test-card .top .ox2 p span em {
            position: relative;
            font-family: inherit;
            font-weight: 500;
            font-size: inherit;
            color: #504d58;
            z-index: 1; }
            #play-frame .play-content-box .test-card .top .ox2 p span em:last-of-type {
              font-weight: 700;
              text-decoration: underline; }
          #play-frame .play-content-box .test-card .top .ox2 p span .play-input-text.abs {
            top: 36px; }
      #play-frame .play-content-box .test-card .top .link1 {
        display: flex;
        flex-wrap: wrap;
        gap: 30px 60px; }
        #play-frame .play-content-box .test-card .top .link1 .link-item {
          display: flex;
          align-items: center;
          flex-direction: column;
          width: calc(50% - 30px);
          font-family: 'Roboto', 'Noto Sans KR';
          font-weight: 500;
          font-size: 20px;
          line-height: 23px;
          padding: 19px 20px 18px;
          color: #504d58;
          background: #ffffff;
          border: 1px solid #a7a6ab;
          box-sizing: border-box;
          border-radius: 15px;
          box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
          cursor: pointer; }
          #play-frame .play-content-box .test-card .top .link1 .link-item * {
            color: inherit;
            font-size: inherit;
            font-weight: inherit;
            line-height: inherit; }
          #play-frame .play-content-box .test-card .top .link1 .link-item strong {
            font-weight: 700; }
          #play-frame .play-content-box .test-card .top .link1 .link-item.pink {
            background: rgba(255, 132, 176, 0.3);
            border-color: rgba(255, 132, 176, 0.3); }
          #play-frame .play-content-box .test-card .top .link1 .link-item.yellow {
            background: rgba(255, 170, 4, 0.3);
            border-color: rgba(255, 170, 4, 0.3); }
          #play-frame .play-content-box .test-card .top .link1 .link-item.cyan {
            background: rgba(15, 155, 165, 0.3);
            border-color: rgba(15, 155, 165, 0.3); }
          #play-frame .play-content-box .test-card .top .link1 .link-item.blue {
            background: rgba(34, 164, 237, 0.3);
            border-color: rgba(34, 164, 237, 0.3); }
          #play-frame .play-content-box .test-card .top .link1 .link-item.purple {
            background: rgba(118, 129, 229, 0.3);
            border-color: rgba(118, 129, 229, 0.3); }
          #play-frame .play-content-box .test-card .top .link1 .link-item.gray {
            background: rgba(167, 166, 171, 0.3);
            border-color: rgba(167, 166, 171, 0.3); }
          #play-frame .play-content-box .test-card .top .link1 .link-item.wrong {
            color: #ff5050 !important;
            border: 3px solid #ff5050 !important; }
      #play-frame .play-content-box .test-card .top .arrange1 .kor {
        font-size: 24px;
        line-height: 35px;
        color: #504d58;
        margin-bottom: 50px; }
      #play-frame .play-content-box .test-card .top .example-select1 {
        display: flex;
        flex-direction: column;
        gap: 40px; }
        #play-frame .play-content-box .test-card .top .example-select1 p {
          font-size: 24px;
          line-height: 60px; }
          #play-frame .play-content-box .test-card .top .example-select1 p em {
            font-size: inherit;
            line-height: inherit; }
          #play-frame .play-content-box .test-card .top .example-select1 p span {
            display: inline-flex;
            justify-content: center;
            position: relative;
            min-width: 150px;
            border-bottom: 1px solid #504d58;
            text-align: center;
            font-size: 24px;
            vertical-align: text-bottom;
            line-height: initial !important;
            height: 36px; }
            #play-frame .play-content-box .test-card .top .example-select1 p span.orange {
              color: #ffaa04; }
            #play-frame .play-content-box .test-card .top .example-select1 p span.red-orange {
              color: #ff6b00; }
            #play-frame .play-content-box .test-card .top .example-select1 p span.red {
              color: #ff5050; }
            #play-frame .play-content-box .test-card .top .example-select1 p span.brown {
              color: #ac7637; }
            #play-frame .play-content-box .test-card .top .example-select1 p span.light-green {
              color: #1ee2b3; }
            #play-frame .play-content-box .test-card .top .example-select1 p span.blue {
              color: #0199ee; }
            #play-frame .play-content-box .test-card .top .example-select1 p span.sky-blue {
              color: #17c7ff; }
            #play-frame .play-content-box .test-card .top .example-select1 p span.pink {
              color: #ff84b0; }
            #play-frame .play-content-box .test-card .top .example-select1 p span.pink-purple {
              color: #d72b68; }
            #play-frame .play-content-box .test-card .top .example-select1 p span.green {
              color: #0f9ba5; }
            #play-frame .play-content-box .test-card .top .example-select1 p span.purple {
              color: #7681e5; }
            #play-frame .play-content-box .test-card .top .example-select1 p span.cyan {
              color: #09b9c6; }
            #play-frame .play-content-box .test-card .top .example-select1 p span.gray {
              color: #a7a6ab;
              font-weight: 400; }
            #play-frame .play-content-box .test-card .top .example-select1 p span .under {
              position: absolute;
              top: 100%;
              left: 50%;
              transform: translateX(-50%);
              font-size: 24px;
              color: #ff5050;
              border-bottom: none; }
            #play-frame .play-content-box .test-card .top .example-select1 p span.correct {
              color: #09b9c6;
              font-weight: 700 !important; }
      #play-frame .play-content-box .test-card .top .underline1 p {
        position: relative;
        font-family: 'Roboto', 'Noto Sans KR';
        font-size: 24px;
        line-height: 60px;
        color: #504d58; }
        #play-frame .play-content-box .test-card .top .underline1 p span {
          font-family: inherit;
          font-size: inherit;
          line-height: inherit;
          color: inherit;
          cursor: pointer;
          padding-bottom: 5px; }
          #play-frame .play-content-box .test-card .top .underline1 p span *:not(i) {
            font-size: inherit;
            font-family: inherit;
            color: inherit; }
          #play-frame .play-content-box .test-card .top .underline1 p span.border_spacing:after {
            content: '';
            display: inline-block;
            width: 4px;
            height: 5px;
            background-color: #fff;
            position: absolute;
            bottom: -4px;
            right: -1px;
            z-index: 1; }
          #play-frame .play-content-box .test-card .top .underline1 p span > i {
            position: absolute;
            top: 39px;
            left: 0px;
            font-family: inherit;
            font-weight: 700;
            color: #09b9c6;
            background: #fff;
            height: 20px;
            line-height: 20px;
            text-align: center; }
          #play-frame .play-content-box .test-card .top .underline1 p span.wrong {
            font-family: inherit;
            font-size: inherit;
            line-height: inherit;
            position: relative;
            border-bottom: 3px solid #ff5050 !important; }
            #play-frame .play-content-box .test-card .top .underline1 p span.wrong.--text {
              color: #ff5050 !important; }
            #play-frame .play-content-box .test-card .top .underline1 p span.wrong i.wrong-i {
              position: absolute;
              top: -17px;
              left: 0;
              color: #ff5050; }
          #play-frame .play-content-box .test-card .top .underline1 p span.active {
            border-bottom: 1px solid #09b9c6;
            position: relative;
            color: #09b9c6; }
          #play-frame .play-content-box .test-card .top .underline1 p span.correct {
            border-bottom: 3px solid #09b9c6; }
      #play-frame .play-content-box .test-card .top .underline1 .input-box {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 50px; }
        #play-frame .play-content-box .test-card .top .underline1 .input-box .input-row {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 10px; }
          #play-frame .play-content-box .test-card .top .underline1 .input-box .input-row .play-input-text {
            border-color: #e9e9ea !important; }
          #play-frame .play-content-box .test-card .top .underline1 .input-box .input-row span {
            font-weight: bold;
            font-size: 24px;
            line-height: 35px;
            color: #7c7a82; }
          #play-frame .play-content-box .test-card .top .underline1 .input-box .input-row .under-text {
            width: 100%;
            padding-left: 16px; }
          #play-frame .play-content-box .test-card .top .underline1 .input-box .input-row .play-input-text {
            width: 100%;
            max-width: 470px; }
      #play-frame .play-content-box .test-card .top .underline2 p {
        font-family: 'Roboto', 'Noto Sans KR';
        font-size: 24px;
        line-height: 60px;
        color: #504d58; }
        #play-frame .play-content-box .test-card .top .underline2 p span {
          position: relative;
          font-family: inherit;
          font-size: inherit;
          line-height: inherit;
          color: inherit;
          border-bottom: 1px solid #09b9c6;
          padding-bottom: 5px; }
          #play-frame .play-content-box .test-card .top .underline2 p span i {
            position: absolute;
            top: 27px;
            left: -12px;
            font-family: inherit;
            font-weight: 700;
            color: #09b9c6; }
          #play-frame .play-content-box .test-card .top .underline2 p span.correct {
            border-bottom: 3px solid #09b9c6; }
            #play-frame .play-content-box .test-card .top .underline2 p span.correct i {
              color: #09b9c6; }
          #play-frame .play-content-box .test-card .top .underline2 p span.wrong .correct-in-wrong {
            font: inherit;
            color: #ff5050;
            position: relative; }
            #play-frame .play-content-box .test-card .top .underline2 p span.wrong .correct-in-wrong i {
              position: absolute;
              top: -12px;
              left: 0;
              color: #ff5050; }
      #play-frame .play-content-box .test-card .top .underline2 .input-box {
        display: flex;
        flex-direction: column;
        gap: 50px;
        margin-top: 50px; }
        #play-frame .play-content-box .test-card .top .underline2 .input-box .input-row {
          display: flex;
          align-items: center;
          gap: 10px; }
          #play-frame .play-content-box .test-card .top .underline2 .input-box .input-row span {
            font-weight: bold;
            font-size: 24px;
            line-height: 35px;
            color: #7c7a82; }
          #play-frame .play-content-box .test-card .top .underline2 .input-box .input-row .play-input-text {
            width: 50%; }
      #play-frame .play-content-box .test-card .top .voca1 {
        position: relative; }
        #play-frame .play-content-box .test-card .top .voca1 h2 {
          font-family: 'Roboto', 'Noto Sans KR';
          font-style: normal;
          font-weight: 900;
          font-size: 54px;
          line-height: 63px;
          text-align: center;
          color: #504d58; }
        #play-frame .play-content-box .test-card .top .voca1 .means {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 38px;
          gap: 10px; }
          #play-frame .play-content-box .test-card .top .voca1 .means i {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1px solid #504d58;
            font-weight: bold;
            font-size: 18px;
            color: #504d58; }
          #play-frame .play-content-box .test-card .top .voca1 .means span {
            font-weight: bold;
            font-size: 38px;
            line-height: 55px;
            color: #504d58; }
        #play-frame .play-content-box .test-card .top .voca1 .bookmark {
          position: absolute;
          top: 0;
          right: 0;
          cursor: pointer; }
      #play-frame .play-content-box .test-card .top .spelling-input {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px; }
        #play-frame .play-content-box .test-card .top .spelling-input.write-blank-input {
          justify-content: left;
          font-size: 22px; }
        #play-frame .play-content-box .test-card .top .spelling-input input {
          all: unset;
          width: 35px;
          border-bottom: 2px solid #504d58;
          padding-bottom: 3px;
          font-family: 'Roboto', 'Noto Sans KR';
          font-weight: 900;
          font-size: 40px;
          text-align: center; }
          #play-frame .play-content-box .test-card .top .spelling-input input.correct {
            color: #09b9c6;
            border-bottom: 2px solid #09b9c6; }
          #play-frame .play-content-box .test-card .top .spelling-input input.wrong {
            color: #ff5050;
            border-bottom: 2px solid #ff5050; }
      #play-frame .play-content-box .test-card .top .spelling-input2 {
        font-size: 24px;
        line-height: 40px;
        font-family: 'Roboto', 'Noto Sans KR'; }
        #play-frame .play-content-box .test-card .top .spelling-input2 input {
          all: unset;
          width: 21px;
          border-bottom: 1px solid #504d58;
          padding-bottom: 0px;
          font-family: 'Roboto', 'Noto Sans KR';
          font-size: inherit;
          text-align: center;
          margin: 0 3px;
          line-height: 26px; }
          #play-frame .play-content-box .test-card .top .spelling-input2 input:first-of-type {
            margin-left: 12px; }
          #play-frame .play-content-box .test-card .top .spelling-input2 input:last-of-type {
            margin-right: 12px; }
          #play-frame .play-content-box .test-card .top .spelling-input2 input.correct {
            color: #09b9c6;
            border-bottom: 1px solid #09b9c6; }
          #play-frame .play-content-box .test-card .top .spelling-input2 input.wrong {
            color: #ff5050;
            border-bottom: 1px solid #ff5050; }
      #play-frame .play-content-box .test-card .top .origin-answer {
        color: #ff5050;
        font-size: 20px;
        line-height: 23px;
        text-align: center;
        margin-top: 19px; }
      #play-frame .play-content-box .test-card .bottom {
        margin-top: 40px; }
        #play-frame .play-content-box .test-card .bottom .ex_sub {
          font-size: 22px;
          color: #504d58;
          margin-bottom: 40px;
          text-align: center;
          font-family: 'Noto Sans KR';
          font-weight: 700; }
        #play-frame .play-content-box .test-card .bottom.no-line {
          border-top: 0; }
        #play-frame .play-content-box .test-card .bottom .write2-desc .correct-answer {
          padding: 22px 27px;
          box-sizing: border-box;
          color: #ff5050;
          font-size: 24px;
          background: #ffffff;
          border: 3px solid #ff5050;
          box-sizing: border-box;
          box-shadow: 0px 4px 3px rgba(119, 119, 119, 0.2);
          border-radius: 15px;
          margin-top: 20px; }
        #play-frame .play-content-box .test-card .bottom .draw-underline {
          display: flex;
          align-items: center;
          justify-content: center;
          background: #ffffff;
          border: 3px solid #09b9c6;
          box-sizing: border-box;
          border-radius: 15px;
          padding: 0 28px;
          height: 65px;
          margin: 0 auto;
          font-weight: bold;
          font-size: 18px;
          line-height: 26px;
          color: #09b9c6;
          transition: 0.21s;
          /* 시안에 밑줄긋기 버튼이 삭제되어 display:none 처리 함 */ }
          #play-frame .play-content-box .test-card .bottom .draw-underline img {
            display: inline-block;
            margin-left: 5px; }
          #play-frame .play-content-box .test-card .bottom .draw-underline.active {
            background: #e6f8f9; }
          #play-frame .play-content-box .test-card .bottom .draw-underline.disabled {
            border: 1px solid #a7a6ab;
            color: #a7a6ab; }
        #play-frame .play-content-box .test-card .bottom .desc3-input {
          display: flex;
          justify-content: center;
          margin-bottom: 40px; }
          #play-frame .play-content-box .test-card .bottom .desc3-input .play-input-text {
            width: 50%; }
        #play-frame .play-content-box .test-card .bottom .desc5-input .desc5-input-inner {
          gap: 40px; }
          #play-frame .play-content-box .test-card .bottom .desc5-input .desc5-input-inner dl {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 60px;
            width: 100%; }
            #play-frame .play-content-box .test-card .bottom .desc5-input .desc5-input-inner dl:not(:first-of-type) {
              margin-top: 40px; }
            #play-frame .play-content-box .test-card .bottom .desc5-input .desc5-input-inner dl.dd_dl {
              width: 100%; }
            #play-frame .play-content-box .test-card .bottom .desc5-input .desc5-input-inner dl dt {
              min-width: 110px;
              color: #7c7a82;
              font-size: 24px;
              line-height: 60px;
              height: 60px;
              white-space: nowrap; }
            #play-frame .play-content-box .test-card .bottom .desc5-input .desc5-input-inner dl dd {
              width: 80%;
              gap: 8px; }
              #play-frame .play-content-box .test-card .bottom .desc5-input .desc5-input-inner dl dd .play-input-text {
                width: 100%; }
                #play-frame .play-content-box .test-card .bottom .desc5-input .desc5-input-inner dl dd .play-input-text.wrong + .under-text {
                  position: static !important;
                  margin-top: 6px; }
        #play-frame .play-content-box .test-card .bottom .desc7-input {
          display: flex;
          align-items: center;
          gap: 20px; }
          #play-frame .play-content-box .test-card .bottom .desc7-input .play-input-text {
            width: 50%; }
          #play-frame .play-content-box .test-card .bottom .desc7-input p {
            font-family: 'Roboto', 'Noto Sans KR';
            font-size: 24px;
            line-height: 23px;
            color: #7c7a82; }
      #play-frame .play-content-box .test-card .answer-check {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0px 5px 42px rgba(60, 142, 177, 0.15);
        border-radius: 20px;
        z-index: 10; }
      #play-frame .play-content-box .test-card .btn-sub-text {
        text-align: center;
        font-size: 14px;
        font-weight: 500;
        color: #ff5050;
        margin-top: 20px; }
    #play-frame .play-content-box .desc-card {
      display: flex;
      flex-direction: column;
      background: #ffffff;
      box-shadow: 0px 5px 42px rgba(60, 142, 177, 0.15);
      border-radius: 20px;
      margin: 50px 0;
      padding: 44px 48px; }
      #play-frame .play-content-box .desc-card .row {
        display: flex;
        align-items: flex-start;
        margin-bottom: 50px; }
        #play-frame .play-content-box .desc-card .row:last-of-type {
          margin-bottom: 0; }
        #play-frame .play-content-box .desc-card .row .label {
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 20px;
          width: 74px;
          height: 33px;
          margin-right: 30px; }
          #play-frame .play-content-box .desc-card .row .label.cyan {
            color: #09b9c6;
            border: 1px solid #09b9c6; }
          #play-frame .play-content-box .desc-card .row .label.purple {
            color: #7681e5;
            border: 1px solid #7681e5; }
          #play-frame .play-content-box .desc-card .row .label.pink {
            color: #ff84b0;
            border: 1px solid #ff84b0; }
        #play-frame .play-content-box .desc-card .row .desc {
          flex: 1; }
          #play-frame .play-content-box .desc-card .row .desc p {
            font-size: 23px;
            color: #7c7a82;
            line-height: 33px; }
            #play-frame .play-content-box .desc-card .row .desc p * {
              font-size: inherit;
              color: inherit;
              line-height: inherit;
              text-underline-offset: 6px; }
              @media screen and (max-width: 1024px) {
                #play-frame .play-content-box .desc-card .row .desc p * {
                  text-underline-offset: 4px; } }
            #play-frame .play-content-box .desc-card .row .desc p em {
              font-weight: 700; }
    #play-frame .play-content-box .page-nav-arrow {
      display: flex;
      justify-content: space-between;
      width: calc(100% + 260px);
      height: 44px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none; }
      #play-frame .play-content-box .page-nav-arrow button {
        font-family: 'Inter', 'Noto Sans KR';
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        line-height: 15px;
        color: #a7a6ab;
        width: 100px;
        pointer-events: visible; }
        #play-frame .play-content-box .page-nav-arrow button.play-left {
          text-align: right; }
          #play-frame .play-content-box .page-nav-arrow button.play-left img {
            margin-left: 10px; }
        #play-frame .play-content-box .page-nav-arrow button.play-right img {
          margin-right: 10px; }
  #play-frame .btn-submit-wrap {
    display: flex;
    justify-content: flex-end;
    height: 57.59px; }
  #play-frame .btn-submit-answer {
    width: max-content;
    padding: 10px 21px;
    font-size: 13px;
    color: #ff5050;
    border: 1px solid #ff5050;
    border-radius: 10px;
    margin-bottom: 20px; }

@media screen and (max-width: 1024px) {
  #play-frame {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 40px;
    height: 100%;
    min-height: inherit; }
    #play-frame.minus65 {
      height: calc(100% - 65px);
      padding-bottom: 50px !important; }
    #play-frame .test-timer {
      left: 16px;
      top: -35px;
      display: flex;
      align-items: flex-start;
      gap: 5px;
      background: #09b9c6;
      border-radius: 10px;
      padding: 5px 10px; }
      #play-frame .test-timer img {
        width: 13px;
        height: 13px;
        transform: translateY(0px); }
      #play-frame .test-timer p {
        color: #fff;
        font-size: 10px;
        line-height: 14px; }
    #play-frame .speaker {
      bottom: 10px;
      top: initial;
      right: 15px;
      width: 19px; }
      #play-frame .speaker img {
        width: 100%; }
    #play-frame .play-header {
      position: relative; }
      #play-frame .play-header .counting {
        padding: 6px 15px;
        font-size: 12px; }
      #play-frame .play-header h2 {
        font-size: 16px;
        text-align: center;
        padding: 0 16px; }
      #play-frame .play-header .page-nav-arrow button {
        position: absolute;
        top: 6px; }
        #play-frame .play-header .page-nav-arrow button img {
          width: 9px; }
        #play-frame .play-header .page-nav-arrow button.play-left {
          left: 0;
          text-align: end; }
        #play-frame .play-header .page-nav-arrow button.play-right {
          right: 0; }
    #play-frame .play-content-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin: 0 -16px;
      padding-bottom: 0 !important; }
      #play-frame .play-content-box .long-bar {
        padding: 24px 16px;
        background: #ffffff;
        box-shadow: 0px 5px 42px rgba(60, 142, 177, 0.15);
        border-radius: 15px;
        margin-bottom: 20px; }
        #play-frame .play-content-box .long-bar p {
          font-size: 16px;
          line-height: 22px;
          color: #504d58; }
          #play-frame .play-content-box .long-bar p em {
            font-weight: 700;
            font-size: inherit;
            color: inherit;
            line-height: inherit; }
            #play-frame .play-content-box .long-bar p em.underline {
              text-decoration: underline; }
        #play-frame .play-content-box .long-bar .means i {
          width: 19px;
          height: 19px;
          border-radius: 50%;
          font-weight: 400;
          font-size: 10px; }
        #play-frame .play-content-box .long-bar .means span {
          font-size: 16px;
          line-height: 22px; }
        #play-frame .play-content-box .long-bar .means.means_bigger > div {
          font-size: 14px; }
      #play-frame .play-content-box .test-card {
        flex: 1;
        padding: 36px 16px 75px;
        box-shadow: 0px 5px 42px rgba(60, 142, 177, 0.15); }
        #play-frame .play-content-box .test-card .answer-check {
          box-shadow: 0px -10px 15px rgba(60, 142, 177, 0.15); }
          #play-frame .play-content-box .test-card .answer-check img {
            width: 50vw;
            height: 50vw;
            max-width: 200px;
            max-height: 200px; }
        #play-frame .play-content-box .test-card.pb140 {
          padding-bottom: 75px; }
        #play-frame .play-content-box .test-card .top {
          width: 100%;
          overflow: visible; }
          #play-frame .play-content-box .test-card .top p.desc6 {
            color: #504d58;
            font-family: 'Roboto', 'Noto Sans KR';
            font-size: 17px;
            line-height: 40px; }
            #play-frame .play-content-box .test-card .top p.desc6 em {
              font-size: inherit;
              font-weight: 700;
              font-family: 'Roboto', 'Noto Sans KR'; }
            #play-frame .play-content-box .test-card .top p.desc6 b {
              font-size: inherit;
              font-weight: 700;
              font-family: 'Roboto', 'Noto Sans KR';
              text-decoration: underline; }
          #play-frame .play-content-box .test-card .top .append-word {
            line-height: 50px;
            font-size: 19px; }
            #play-frame .play-content-box .test-card .top .append-word .append-area {
              flex-wrap: wrap;
              position: relative; }
              #play-frame .play-content-box .test-card .top .append-word .append-area.is_correct {
                border: none; }
                #play-frame .play-content-box .test-card .top .append-word .append-area.is_correct .play-input-text {
                  border-bottom: 1px solid #3ac7d1; }
              #play-frame .play-content-box .test-card .top .append-word .append-area .play-input-text {
                position: static; }
              #play-frame .play-content-box .test-card .top .append-word .append-area > button {
                padding: 16px 19px;
                font-size: 14px; }
          #play-frame .play-content-box .test-card .top p.sentence {
            font-size: 19px;
            line-height: 50px; }
            #play-frame .play-content-box .test-card .top p.sentence.lineH90 {
              line-height: 40px;
              font-size: 17px; }
            #play-frame .play-content-box .test-card .top p.sentence.important-lineH90 {
              line-height: 90px; }
            #play-frame .play-content-box .test-card .top p.sentence.lineH210 {
              line-height: normal; }
            #play-frame .play-content-box .test-card .top p.sentence > p {
              position: relative;
              font-family: inherit;
              font-weight: inherit;
              line-height: inherit;
              font-size: inherit;
              color: inherit;
              padding-bottom: 6px;
              margin-right: 6px; }
              #play-frame .play-content-box .test-card .top p.sentence > p.gray u {
                border-bottom: 3px solid #d3d3d5; }
              #play-frame .play-content-box .test-card .top p.sentence > p.red {
                color: #ff5050; }
                #play-frame .play-content-box .test-card .top p.sentence > p.red u {
                  border-bottom: 3px solid #ff5050; }
              #play-frame .play-content-box .test-card .top p.sentence > p u {
                position: relative;
                font-family: inherit;
                font-weight: inherit;
                line-height: inherit;
                font-size: inherit;
                color: inherit;
                text-decoration: none;
                padding-bottom: 5px; }
                #play-frame .play-content-box .test-card .top p.sentence > p u.line1 {
                  padding-bottom: 10px; }
                #play-frame .play-content-box .test-card .top p.sentence > p u.line2 {
                  padding-bottom: 25px; }
                  #play-frame .play-content-box .test-card .top p.sentence > p u.line2 i {
                    top: 43px; }
              #play-frame .play-content-box .test-card .top p.sentence > p i {
                top: 27px;
                left: -16px;
                position: absolute;
                font-family: 'Roboto', 'Noto Sans KR';
                font-style: normal;
                font-weight: bold;
                font-size: 14px;
                /*240730 가로모드 검수시트 #29*/
                left: -18px; }
                #play-frame .play-content-box .test-card .top p.sentence > p i.klong {
                  left: -31px; }
              #play-frame .play-content-box .test-card .top p.sentence > p span.slash {
                width: 100%;
                line-height: normal; }
          #play-frame .play-content-box .test-card .top .desc1-input {
            gap: 10px; }
            #play-frame .play-content-box .test-card .top .desc1-input p {
              font-size: 17px; }
              #play-frame .play-content-box .test-card .top .desc1-input p u {
                font-size: inherit; }
            #play-frame .play-content-box .test-card .top .desc1-input .play-input-text {
              width: 100%; }
            #play-frame .play-content-box .test-card .top .desc1-input .input__generator .under-text {
              font-size: 14px;
              margin: 5px 0 0;
              padding: 0 5px; }
          #play-frame .play-content-box .test-card .top .list2 p {
            font-family: 'Roboto', 'Noto Sans KR';
            font-size: 18px;
            color: #504d58;
            line-height: 36px; }
            #play-frame .play-content-box .test-card .top .list2 p em {
              font-family: inherit;
              font-weight: 700;
              font-size: inherit;
              line-height: inherit; }
            #play-frame .play-content-box .test-card .top .list2 p span {
              font-family: inherit;
              font-size: inherit;
              display: inline-block;
              text-align: center;
              width: 80px;
              border-bottom: 1px solid #504d58; }
          #play-frame .play-content-box .test-card .top .list3 p {
            font-family: 'Roboto', 'Noto Sans KR';
            font-size: 17px;
            color: #504d58; }
            #play-frame .play-content-box .test-card .top .list3 p span {
              font-family: inherit;
              font-weight: 700;
              color: inherit;
              font-size: inherit;
              text-decoration: underline; }
          #play-frame .play-content-box .test-card .top .select1 p {
            font-family: 'Roboto', 'Noto Sans KR';
            font-size: 16px;
            line-height: 40px;
            color: #504d58; }
            #play-frame .play-content-box .test-card .top .select1 p span.click-bridge {
              display: inline-block;
              padding: 10px 19px;
              font-family: 'Roboto', 'Noto Sans KR';
              font-size: 14px;
              line-height: 26px;
              text-align: center;
              color: #504d58;
              background: #ffffff;
              border: 1px solid #09b9c6;
              box-sizing: border-box;
              border-radius: 10px;
              margin: 5px;
              cursor: pointer; }
            #play-frame .play-content-box .test-card .top .select1 p span.active {
              background: #09b9c6;
              color: #fff; }
          #play-frame .play-content-box .test-card .top .select2 {
            display: flex;
            gap: 30px;
            align-items: center;
            justify-content: center;
            margin-top: 50px;
            gap: 10px; }
            #play-frame .play-content-box .test-card .top .select2 button {
              display: inline-block;
              padding: 10px 19px;
              font-family: 'Roboto', 'Noto Sans KR';
              font-size: 14px;
              line-height: 26px;
              text-align: center;
              color: #504d58;
              background: #ffffff;
              border: 1px solid #09b9c6;
              box-sizing: border-box;
              border-radius: 10px;
              cursor: pointer; }
              #play-frame .play-content-box .test-card .top .select2 button.active {
                background: #09b9c6;
                color: #fff; }
          #play-frame .play-content-box .test-card .top .ox1 {
            width: 100%; }
            #play-frame .play-content-box .test-card .top .ox1 .row {
              display: flex;
              align-items: center;
              width: 100%;
              gap: 20px; }
              #play-frame .play-content-box .test-card .top .ox1 .row .ox-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 700;
                font-size: 14px;
                background: #ffffff;
                border: 1px solid #504d58;
                box-sizing: border-box;
                border-radius: 10px;
                min-width: 40px;
                height: 40px;
                color: #504d58; }
                #play-frame .play-content-box .test-card .top .ox1 .row .ox-btn.active {
                  color: #09b9c6;
                  border: 1px solid #09b9c6; }
              #play-frame .play-content-box .test-card .top .ox1 .row .play-input-text {
                flex: 1;
                height: 40px; }
            #play-frame .play-content-box .test-card .top .ox1 .last .row {
              flex-wrap: wrap;
              gap: initial;
              max-height: unset; }
              #play-frame .play-content-box .test-card .top .ox1 .last .row .under-text {
                width: 100%;
                font-size: 13px;
                line-height: 15px;
                margin-top: 0; }
          #play-frame .play-content-box .test-card .top .link1 {
            display: flex;
            flex-wrap: wrap;
            gap: 20px 15px; }
            #play-frame .play-content-box .test-card .top .link1 .link-item {
              display: flex;
              align-items: center;
              width: calc(50% - 7.5px);
              font-family: 'Roboto', 'Noto Sans KR';
              font-weight: 500;
              font-size: 18px;
              line-height: 23px;
              padding: 20px 17px;
              color: #504d58;
              background: #ffffff;
              border: 1px solid #a7a6ab;
              box-sizing: border-box;
              border-radius: 15px;
              box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
              cursor: pointer; }
          #play-frame .play-content-box .test-card .top .underline1 p {
            font-family: 'Roboto', 'Noto Sans KR';
            font-size: 18px;
            line-height: 38px;
            color: #504d58; }
            #play-frame .play-content-box .test-card .top .underline1 p span {
              font-family: inherit;
              font-size: inherit;
              line-height: inherit;
              color: inherit; }
              #play-frame .play-content-box .test-card .top .underline1 p span > i {
                position: absolute;
                top: 30px;
                left: 0px;
                font-family: inherit;
                font-weight: 700;
                color: #09b9c6;
                background: #fff;
                height: 20px;
                line-height: 20px;
                text-align: center; }
              #play-frame .play-content-box .test-card .top .underline1 p span em.wrong {
                color: #ff5050;
                font-family: inherit;
                font-size: inherit;
                line-height: inherit; }
              #play-frame .play-content-box .test-card .top .underline1 p span.active {
                border-bottom: 1px solid #09b9c6; }
              #play-frame .play-content-box .test-card .top .underline1 p span.correct {
                border-bottom: 3px solid #09b9c6; }
              #play-frame .play-content-box .test-card .top .underline1 p span.wrong {
                border-bottom: 3px solid #ff5050; }
          #play-frame .play-content-box .test-card .top .underline1 .input-box {
            display: flex;
            flex-direction: column;
            gap: 30px;
            margin-top: 50px; }
            #play-frame .play-content-box .test-card .top .underline1 .input-box .input-row {
              display: flex;
              flex-direction: row;
              align-items: center;
              gap: 10px; }
              #play-frame .play-content-box .test-card .top .underline1 .input-box .input-row span {
                font-weight: bold;
                font-size: 14px !important;
                line-height: 16px;
                color: #7c7a82; }
              #play-frame .play-content-box .test-card .top .underline1 .input-box .input-row .play-input-text {
                width: 100%;
                height: 40px !important;
                flex: 1;
                max-width: calc(100% - 70px); }
          #play-frame .play-content-box .test-card .top .underline2 p {
            font-size: 18px;
            line-height: 46px; }
            #play-frame .play-content-box .test-card .top .underline2 p span i {
              top: 21px;
              left: -12px; }
          #play-frame .play-content-box .test-card .top .underline2 .input-box {
            display: flex;
            flex-direction: column;
            gap: 30px;
            margin-top: 50px; }
            #play-frame .play-content-box .test-card .top .underline2 .input-box .input-row {
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              gap: 10px; }
              #play-frame .play-content-box .test-card .top .underline2 .input-box .input-row span {
                font-weight: bold;
                font-size: 14px;
                line-height: 16px;
                color: #7c7a82; }
              #play-frame .play-content-box .test-card .top .underline2 .input-box .input-row .play-input-text {
                width: 100%; }
          #play-frame .play-content-box .test-card .top .voca1 {
            position: relative; }
            #play-frame .play-content-box .test-card .top .voca1 h2 {
              font-size: 30px;
              line-height: 78px; }
            #play-frame .play-content-box .test-card .top .voca1 .means {
              gap: 5px; }
              #play-frame .play-content-box .test-card .top .voca1 .means i {
                width: 19px;
                height: 19px;
                font-size: 10px; }
              #play-frame .play-content-box .test-card .top .voca1 .means span {
                font-size: 26px;
                line-height: 33px; }
            #play-frame .play-content-box .test-card .top .voca1 .bookmark {
              top: -16px;
              width: 18px; }
          #play-frame .play-content-box .test-card .top .spelling-input {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px; }
            #play-frame .play-content-box .test-card .top .spelling-input.write-blank-input {
              font-size: 14px; }
            #play-frame .play-content-box .test-card .top .spelling-input input {
              all: unset;
              width: 24px;
              border-bottom: 1px solid #504d58;
              padding-bottom: 3px;
              font-family: 'Roboto', 'Noto Sans KR';
              font-weight: 900;
              font-size: 25px;
              text-align: center; }
          #play-frame .play-content-box .test-card .top .spelling-input2 {
            font-size: 19px;
            line-height: 50px;
            font-family: 'Roboto', 'Noto Sans KR'; }
            #play-frame .play-content-box .test-card .top .spelling-input2 input {
              all: unset;
              width: 20px;
              border-bottom: 1px solid #504d58;
              padding-bottom: 0px;
              font-family: 'Roboto', 'Noto Sans KR';
              font-size: 19px;
              text-align: center;
              margin: 0 3px;
              line-height: 06px; }
              #play-frame .play-content-box .test-card .top .spelling-input2 input.correct {
                color: #09b9c6;
                border-bottom: 1px solid #09b9c6; }
          #play-frame .play-content-box .test-card .top .list4 p {
            font-size: 17px; }
            #play-frame .play-content-box .test-card .top .list4 p.problems {
              font-size: 17px; }
          #play-frame .play-content-box .test-card .top .desc7 p {
            font-size: 17px; }
          #play-frame .play-content-box .test-card .top .example-select1 p {
            font-size: 17px;
            line-height: 50px; }
            #play-frame .play-content-box .test-card .top .example-select1 p span {
              padding: 0 30px;
              font-size: 19px !important;
              line-height: 24px !important;
              height: 24px !important; }
              #play-frame .play-content-box .test-card .top .example-select1 p span .under {
                font-size: 19px;
                line-height: 24px; }
          #play-frame .play-content-box .test-card .top .arrange1 .kor {
            font-size: 19px;
            margin-bottom: 0; }
          #play-frame .play-content-box .test-card .top .example-select1 p {
            font-size: 17px;
            line-height: 50px; }
            #play-frame .play-content-box .test-card .top .example-select1 p span {
              padding: 0 30px;
              font-size: 19px;
              line-height: 24px !important;
              height: 24px !important; }
              #play-frame .play-content-box .test-card .top .example-select1 p span .under {
                font-size: 19px;
                line-height: 22px; }
        #play-frame .play-content-box .test-card .bottom {
          margin-top: 28px; }
          #play-frame .play-content-box .test-card .bottom .ex_sub {
            font-size: 16px;
            color: #504d58;
            margin-bottom: 35px;
            text-align: left;
            font-family: 'Noto Sans KR';
            font-weight: 700; }
          #play-frame .play-content-box .test-card .bottom .write2-desc .correct-answer {
            padding: 16px 19px;
            color: #ff5050;
            font-size: 14px; }
          #play-frame .play-content-box .test-card .bottom .desc7-input {
            display: block; }
            #play-frame .play-content-box .test-card .bottom .desc7-input .play-input-text {
              height: 40px;
              margin-bottom: 5px;
              display: inline-block; }
              #play-frame .play-content-box .test-card .bottom .desc7-input .play-input-text input {
                font-size: 14px; }
                #play-frame .play-content-box .test-card .bottom .desc7-input .play-input-text input::placeholder {
                  font-size: 14px; }
            #play-frame .play-content-box .test-card .bottom .desc7-input p {
              font-size: 17px;
              line-height: 39px;
              display: inline;
              white-space: normal;
              display: inline;
              margin-left: 10px; }
          #play-frame .play-content-box .test-card .bottom .draw-underline {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #ffffff;
            border: 3px solid #09b9c6;
            box-sizing: border-box;
            border-radius: 10px;
            padding: 0 19px;
            height: 50px;
            margin: 0 auto;
            font-weight: bold;
            font-size: 16px;
            line-height: 26px;
            color: #09b9c6; }
          #play-frame .play-content-box .test-card .bottom .desc3-input {
            display: flex;
            justify-content: center;
            margin-bottom: 50px; }
            #play-frame .play-content-box .test-card .bottom .desc3-input .play-input-text {
              width: 100%; }
          #play-frame .play-content-box .test-card .bottom .desc5-input .desc5-input-inner {
            flex-direction: column;
            gap: 10px;
            width: 100%; }
            #play-frame .play-content-box .test-card .bottom .desc5-input .desc5-input-inner dl {
              display: flex;
              align-items: flex-start;
              justify-content: center;
              flex-direction: column;
              gap: 5px;
              width: 100%; }
              #play-frame .play-content-box .test-card .bottom .desc5-input .desc5-input-inner dl dt {
                color: #7c7a82;
                font-size: 14px;
                line-height: 40px;
                min-width: initial;
                text-align: left;
                height: 40px; }
              #play-frame .play-content-box .test-card .bottom .desc5-input .desc5-input-inner dl dd {
                flex: 1;
                width: 100%; }
                #play-frame .play-content-box .test-card .bottom .desc5-input .desc5-input-inner dl dd .play-input-text {
                  width: 100%; }
      #play-frame .play-content-box .page-nav-arrow {
        display: none; }
      #play-frame .play-content-box .desc-card {
        display: flex;
        flex-direction: column;
        background: #ffffff;
        box-shadow: 0px 5px 42px rgba(60, 142, 177, 0.15);
        border-radius: 20px;
        margin-top: 40px;
        padding: 23px 26px; }
        #play-frame .play-content-box .desc-card .row {
          display: flex;
          align-items: flex-start;
          flex-direction: column;
          margin-bottom: 13px; }
          #play-frame .play-content-box .desc-card .row:last-of-type {
            margin-bottom: 0; }
          #play-frame .play-content-box .desc-card .row .label {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 20px;
            font-size: 11px;
            height: 18px;
            margin-bottom: 6px; }
            #play-frame .play-content-box .desc-card .row .label.cyan {
              color: #09b9c6;
              border: 1px solid #09b9c6; }
            #play-frame .play-content-box .desc-card .row .label.purple {
              color: #7681e5;
              border: 1px solid #7681e5; }
          #play-frame .play-content-box .desc-card .row .desc {
            flex: 1;
            max-width: 100%; }
            #play-frame .play-content-box .desc-card .row .desc .input {
              min-width: auto; }
              #play-frame .play-content-box .desc-card .row .desc .input input {
                max-width: 100%; }
            #play-frame .play-content-box .desc-card .row .desc p {
              max-width: 100%;
              font-size: 15px;
              color: #7c7a82;
              line-height: 21px; }
              #play-frame .play-content-box .desc-card .row .desc p em {
                font-size: inherit;
                color: inherit;
                font-weight: 700;
                line-height: inherit; } }

@media screen and (max-width: 1024px) {
  #play-frame .play-content-box .test-card .top .voca1 .means {
    font-size: 26px; }
    #play-frame .play-content-box .test-card .top .voca1 .means i {
      width: 19px;
      height: 19px;
      font-size: 10px; }
  #play-frame .play-content-box .test-card .top .voca1 h2 {
    font-size: 30px; }
  #play-frame .play-content-box .test-card .top img {
    max-width: 100%; }
  #play-frame .play-content-box .test-card .top .ox1 .div_row.first {
    margin-right: 12px; }
  #play-frame .play-content-box .test-card .top .ox2 p {
    font-size: 17px;
    line-height: 80px; }
    #play-frame .play-content-box .test-card .top .ox2 p span .play-input-text.abs {
      max-width: 58vw;
      transform: none; }
    #play-frame .play-content-box .test-card .top .ox2 p span.wrong .under-text {
      font-size: 16px;
      top: calc(50% + 50px); }
  #play-frame .play-content-box .test-card .top .desc2-input > div p {
    font-size: 17px; }
    #play-frame .play-content-box .test-card .top .desc2-input > div p span .play-input-text {
      padding: 5px 10px 0; }
      #play-frame .play-content-box .test-card .top .desc2-input > div p span .play-input-text input {
        height: 26px; } }

.here-answer {
  display: inline-flex;
  flex-wrap: wrap;
  position: relative;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
  margin-bottom: 10px; }
  .here-answer > span.slash {
    position: relative;
    margin-right: 5px;
    white-space: break-spaces; }
    .here-answer > span.slash > p {
      display: inline-block;
      cursor: pointer; }
    .here-answer > span.slash i {
      position: static;
      display: inline-block;
      width: 4px;
      height: 30px;
      border-radius: 16px;
      transform: rotate(20deg);
      vertical-align: middle;
      margin: 0 6px 0 6px; }
      .here-answer > span.slash i.green {
        background: #0f9ba5; }
      .here-answer > span.slash i.cyan {
        background: #09b9c6; }
      .here-answer > span.slash i.purple {
        background: #7681e5; }
      .here-answer > span.slash i.red {
        background: #ff5050; }
    .here-answer > span.slash i + i {
      margin-left: 0px;
      margin-right: 8px; }
    .here-answer > span.slash .play-desc-text.full {
      width: 100% !important;
      right: 0 !important; }

#play-frame .play-content-box .test-card .top .append-word.ver2 {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  font: inherit; }
  #play-frame .play-content-box .test-card .top .append-word.ver2 div {
    font-size: 24px;
    font-family: 'Roboto', 'Noto Sans KR';
    line-height: 35px;
    color: #24212e;
    min-height: 35px; }
    #play-frame .play-content-box .test-card .top .append-word.ver2 div:first-of-type {
      margin-right: 10px; }
  #play-frame .play-content-box .test-card .top .append-word.ver2.tag_line div {
    line-height: 72px; }
  @media screen and (max-width: 1024px) {
    #play-frame .play-content-box .test-card .top .append-word.ver2.tag_line div {
      line-height: 35px; } }
  #play-frame .play-content-box .test-card .top .append-word.ver2 .append-area2 {
    padding: 0 10px 5px 0;
    border-bottom: 2px solid #504d58; }
    #play-frame .play-content-box .test-card .top .append-word.ver2 .append-area2:last-of-type {
      flex: auto;
      text-align: left; }
    #play-frame .play-content-box .test-card .top .append-word.ver2 .append-area2 button {
      font-size: 24px;
      font-weight: 700;
      font-family: 'Roboto', 'Noto Sans KR';
      color: #09b9c6;
      background: #fff;
      box-sizing: border-box;
      border: 3px solid #09b9c6;
      border-radius: 15px;
      padding: 19px 31px;
      margin-top: 10px; }

@media screen and (max-width: 1024px) {
  #play-frame .play-content-box .test-card .top .append-word.ver2 div {
    font-size: 19px;
    line-height: 72px; }
  #play-frame .play-content-box .test-card .top .append-word.ver2 .append-area2 {
    height: 72px; }
    #play-frame .play-content-box .test-card .top .append-word.ver2 .append-area2 button {
      font-size: 14px;
      padding: 16px 19px; } }

#__sentence {
  display: flex;
  flex-wrap: wrap; }
  #__sentence > p {
    cursor: pointer; }
    #__sentence > p > span.line {
      display: block;
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      top: calc(50% + 20px);
      height: 3px;
      border-radius: 1.5px;
      background-color: #d3d3d5;
      width: unset !important;
      padding: unset !important;
      margin: unset !important; }
      #__sentence > p > span.line.extend {
        right: -7px !important; }
      #__sentence > p > span.line.start {
        left: 15px !important; }
        #__sentence > p > span.line.start.ilong {
          left: 22px !important;
          z-index: 1; }
        #__sentence > p > span.line.start.klong {
          left: 30px !important;
          z-index: 1; }
        #__sentence > p > span.line.start.ishort {
          left: 18px !important;
          z-index: 1; }
      #__sentence > p > span.line.hint {
        background-color: #09b9c6; }
      #__sentence > p > span.line.error {
        background-color: #ff5050; }
      #__sentence > p > span.line > i {
        font-size: 15px !important;
        top: 50% !important;
        line-height: 1.2 !important;
        transform: translateY(-50%); }

/*///////////////////////////*/
/*폰트 사이즈 변경  : 시작 */
/*==============================SMALL=============================================================================================================================================================================================================*/
/*==============================SMALL=============================================================================================================================================================================================================*/
/*==============================SMALL=============================================================================================================================================================================================================*/
#cedulearn.font_small #play-frame .play-header .counting {
  font-size: 12px; }

#cedulearn.font_small #play-frame .btn-submit-answer {
  font-size: 11px; }

#cedulearn.font_small #play-frame .play-content-box .page-nav-arrow button {
  font-size: 10px; }

#cedulearn.font_small #play-frame .play-main-btn-wrap button {
  font-size: 18px; }
  #cedulearn.font_small #play-frame .play-main-btn-wrap button.key:after {
    font-size: 11px; }

#cedulearn.font_small #play-frame #bottom-wiget .play-wiget-box .play-wiget p .erase-text {
  font-size: 13px; }

#cedulearn.font_small #play-frame .play-content-box .long-bar p {
  font-size: 20px; }

#cedulearn.font_small #play-frame .play-content-box .long-bar .means i {
  font-size: 8px; }

#cedulearn.font_small #play-frame .play-content-box .long-bar .means span {
  font-size: 20px !important; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .play-content-box .long-bar p {
    font-size: 14px; }
  #cedulearn.font_small #play-frame .play-content-box .long-bar .means span {
    font-size: 14px !important; } }

#cedulearn.font_small #play-frame .play-header h2 {
  font-size: 26px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .play-header h2 {
    font-size: 14px; } }

#cedulearn.font_small #play-frame .play-content-box .test-card .bottom .ex_sub {
  font-size: 20px; }

#cedulearn.font_small #play-frame #play-color-btn .btn-wrap-box .btn-item {
  font-size: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame #play-color-btn .btn-wrap-box .btn-item {
    font-size: 12px; } }

#cedulearn.font_small #play-frame .play-content-box .test-card .top p.sentence {
  font-size: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .play-content-box .test-card .top p.sentence {
    font-size: 17px; }
    #cedulearn.font_small #play-frame .play-content-box .test-card .top p.sentence.lineH90 {
      font-size: 15px; } }

#cedulearn.font_small #play-frame .play-content-box .test-card .top .desc1-input p {
  font-size: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .play-content-box .test-card .top .desc1-input p {
    font-size: 15px; } }

#cedulearn.font_small #play-frame .play-content-box .test-card .top .desc2-input > div p {
  font-size: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .play-content-box .test-card .top .desc2-input > div p {
    font-size: 15px; } }

#cedulearn.font_small #play-frame .play-content-box .test-card .bottom .desc5-input dl dt {
  font-size: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .play-content-box .test-card .bottom .desc5-input dl dt {
    font-size: 12px; } }

#cedulearn.font_small #play-frame .play-content-box .test-card .top p.desc6 {
  font-size: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .play-content-box .test-card .top p.desc6 {
    font-size: 15px; } }

#cedulearn.font_small #play-frame .play-content-box .desc-card .row .label {
  font-size: 12px; }

#cedulearn.font_small #play-frame .play-content-box .desc-card .row .desc p {
  font-size: 21px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .play-content-box .desc-card .row .label {
    font-size: 11px; }
  #cedulearn.font_small #play-frame .play-content-box .desc-card .row .desc p {
    font-size: 13px; } }

#cedulearn.font_small #play-frame .play-content-box .test-card .top .desc7 p {
  font-size: 22px; }

#cedulearn.font_small #play-frame .play-content-box .test-card .bottom .desc7-input p {
  font-size: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .play-content-box .test-card .top .desc7 p {
    font-size: 15px; }
  #cedulearn.font_small #play-frame .play-content-box .test-card .bottom .desc7-input p {
    font-size: 15px; } }

#cedulearn.font_small #play-frame #list-select .select-item {
  font-size: 18px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame #list-select .select-item {
    font-size: 12px;
    line-height: 14px; } }

#cedulearn.font_small #play-frame .play-content-box .test-card .top .list2 p {
  font-size: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .play-content-box .test-card .top .list2 p {
    font-size: 16px; } }

#cedulearn.font_small #play-frame .play-content-box .test-card .top .list3 p {
  font-size: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .play-content-box .test-card .top .list3 p {
    font-size: 16px; } }

#cedulearn.font_small #play-frame .play-content-box .test-card .top .list4 p {
  font-size: 22px; }
  #cedulearn.font_small #play-frame .play-content-box .test-card .top .list4 p.problems {
    font-size: 20px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .play-content-box .test-card .top .list4 p {
    font-size: 15px; }
    #cedulearn.font_small #play-frame .play-content-box .test-card .top .list4 p.problems {
      font-size: 15px; } }

#cedulearn.font_small #play-frame .play-content-box .test-card .top .select1 p {
  font-size: 28px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .play-content-box .test-card .top .select1 p {
    font-size: 14px; } }

#cedulearn.font_small #play-frame .play-content-box .test-card .top .select2 button {
  font-size: 20px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .play-content-box .test-card .top .select2 button {
    font-size: 12px; } }

#cedulearn.font_small #play-frame .play-content-box .test-card .top .ox1 .row .ox-btn {
  font-size: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .play-content-box .test-card .top .ox1 .row .ox-btn {
    font-size: 12px; } }

#cedulearn.font_small #play-frame .play-content-box .test-card .top .ox2 p {
  font-size: 22px; }
  #cedulearn.font_small #play-frame .play-content-box .test-card .top .ox2 p span.wrong .under-text {
    font-size: 15px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .play-content-box .test-card .top .ox2 p {
    font-size: 15px; }
    #cedulearn.font_small #play-frame .play-content-box .test-card .top .ox2 p span.wrong .under-text {
      font-size: 15px; } }

#cedulearn.font_small #play-frame .play-content-box .test-card .top .link1 .link-item {
  font-size: 18px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .play-content-box .test-card .top .link1 .link-item {
    font-size: 16px; } }

#cedulearn.font_small #play-frame .play-content-box .test-card .top .arrange1 .kor {
  font-size: 22px; }

#cedulearn.font_small #play-frame .play-content-box .test-card .top .arrange1 .append-word.ver2 div {
  font-size: 22px; }
  #cedulearn.font_small #play-frame .play-content-box .test-card .top .arrange1 .append-word.ver2 div button {
    font-size: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .play-content-box .test-card .top .arrange1 .kor {
    font-size: 17px; }
  #cedulearn.font_small #play-frame .play-content-box .test-card .top .arrange1 .append-word.ver2 div {
    font-size: 17px; }
    #cedulearn.font_small #play-frame .play-content-box .test-card .top .arrange1 .append-word.ver2 div button {
      font-size: 12px; } }

#cedulearn.font_small #play-frame .play-content-box .test-card .top .example-select1 p {
  font-size: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .play-content-box .test-card .top .example-select1 p {
    font-size: 15px; } }

#cedulearn.font_small #play-frame .play-content-box .test-card .top .voca1 h2 {
  font-size: 52px; }

#cedulearn.font_small #play-frame .play-content-box .test-card .top .voca1 .means {
  font-size: 36px; }
  #cedulearn.font_small #play-frame .play-content-box .test-card .top .voca1 .means i {
    font-size: 16px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .play-content-box .test-card .top .voca1 h2 {
    font-size: 28px; }
  #cedulearn.font_small #play-frame .play-content-box .test-card .top .voca1 .means {
    font-size: 24px; }
    #cedulearn.font_small #play-frame .play-content-box .test-card .top .voca1 .means i {
      font-size: 8px; } }

#cedulearn.font_small #play-frame .play-content-box .test-card .top .spelling-input input {
  font-size: 38px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .play-content-box .test-card .top .spelling-input input {
    font-size: 23px; } }

#cedulearn.font_small #play-frame #voca-card-study .card-wrap .card-item.center .voca span {
  font-size: 52px !important; }

#cedulearn.font_small #play-frame #voca-card-study .card-wrap .card-item.center .active-btn button span:first-child {
  font-size: 18px !important; }

#cedulearn.font_small #play-frame #voca-card-study .card-wrap .card-item.center .active-btn button span:last-child {
  font-size: 10px !important; }

#cedulearn.font_small #play-frame #voca-card-study .card-wrap .card-item.center .card-top .back-voca {
  font-size: 52px !important; }

#cedulearn.font_small #play-frame #voca-card-study .card-wrap .card-item.center .card-top .back-means .row i {
  font-size: 10px; }

#cedulearn.font_small #play-frame #voca-card-study .card-wrap .card-item.center .card-top .back-means .row span {
  font-size: 22px !important; }

#cedulearn.font_small #play-frame #voca-card-study .card-wrap .card-item.center .card-bottom .text-box p {
  font-size: 18px; }

#cedulearn.font_small #play-frame #voca-card-study .card-wrap .card-item .voca span {
  font-size: 33px !important; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame #voca-card-study .card-wrap .card-item.center .voca span {
    font-size: 30px !important; }
  #cedulearn.font_small #play-frame #voca-card-study .card-wrap .card-item.center .active-btn button span:first-child {
    font-size: 14px !important; }
  #cedulearn.font_small #play-frame #voca-card-study .card-wrap .card-item.center .active-btn button span:last-child {
    font-size: 10px !important; }
  #cedulearn.font_small #play-frame #voca-card-study .card-wrap .card-item.center .card-top .back-voca {
    font-size: 30px !important; }
  #cedulearn.font_small #play-frame #voca-card-study .card-wrap .card-item.center .card-top .back-means .row i {
    font-size: 8px; }
  #cedulearn.font_small #play-frame #voca-card-study .card-wrap .card-item.center .card-top .back-means .row span {
    font-size: 14px !important; }
  #cedulearn.font_small #play-frame #voca-card-study .card-wrap .card-item.center .card-bottom .text-box p {
    font-size: 13px; }
  #cedulearn.font_small #play-frame #voca-card-study .card-wrap .card-item .voca span {
    font-size: 33px !important; } }

#cedulearn.font_small #play-frame .test-timer p {
  font-size: 16px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .test-timer p {
    font-size: 8px; } }

#cedulearn.font_small #play-frame .play-content-box .test-card .top .spelling-input2 {
  font-size: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .play-content-box .test-card .top .spelling-input2 {
    font-size: 17px; } }

#cedulearn.font_small #play-frame .special-tr-wrap .quest-word {
  font-size: 52px; }

#cedulearn.font_small #play-frame .special-tr-wrap .twin div {
  font-size: 33px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .special-tr-wrap .quest-word {
    font-size: 38px; }
  #cedulearn.font_small #play-frame .special-tr-wrap .twin div {
    font-size: 33px; } }

#cedulearn.font_small #play-frame .special-tr-wrap .long-bar2 p.center-left {
  font-size: 20px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .special-tr-wrap .long-bar2 p.center-left {
    font-size: 14px; } }

#cedulearn.font_small #play-frame .special-tr-wrap .union .typing-area h5 {
  font-size: 22px; }

#cedulearn.font_small #play-frame .special-tr-wrap .union .typing-area .play-input-text input {
  font-size: 14px; }

#cedulearn.font_small #play-frame .special-tr-wrap .union .typing-area .play-input-text .under-text {
  font-size: 16px; }

#cedulearn.font_small #play-frame .special-tr-wrap .union .typing-area p {
  font-size: 38px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .special-tr-wrap .union .typing-area h5 {
    font-size: 12px; }
  #cedulearn.font_small #play-frame .special-tr-wrap .union .typing-area .play-input-text .under-text {
    font-size: 12px; }
  #cedulearn.font_small #play-frame .special-tr-wrap .union .typing-area p {
    font-size: 38px; } }

#cedulearn.font_small #play-frame #reading-test > p {
  font-size: 22px !important; }

#cedulearn.font_small #play-frame #reading-test ol li label {
  font-size: 12px !important; }

#cedulearn.font_small #play-frame #reading-test #list-select .select-item {
  font-size: 18px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame #reading-test > p {
    font-size: 16px !important; }
  #cedulearn.font_small #play-frame #reading-test ol li label {
    font-size: 12px !important; }
  #cedulearn.font_small #play-frame #reading-test #list-select .select-item {
    font-size: 12px; } }

#cedulearn.font_small #play-frame .play-content-box .test-card .top .append-word {
  font-size: 22px; }
  #cedulearn.font_small #play-frame .play-content-box .test-card .top .append-word .append-area .play-input-text input {
    font-size: 22px; }
  #cedulearn.font_small #play-frame .play-content-box .test-card .top .append-word .append-area .play-input-text .under-text {
    font-size: 20px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .play-content-box .test-card .top .append-word {
    font-size: 17px; }
    #cedulearn.font_small #play-frame .play-content-box .test-card .top .append-word .append-area .play-input-text input {
      font-size: 17px; }
    #cedulearn.font_small #play-frame .play-content-box .test-card .top .append-word .append-area .play-input-text .under-text {
      font-size: 17px; } }

#cedulearn.font_small #play-frame .play-content-box .test-card .bottom .write2-desc .correct-answer {
  font-size: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .play-content-box .test-card .bottom .write2-desc .correct-answer {
    font-size: 12px; } }

#cedulearn.font_small #play-frame .play-content-box .test-card .top p.sentence span .line i {
  font-size: 16px;
  min-width: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .play-content-box .test-card .top p.sentence span .line i {
    font-size: 12px; } }

#cedulearn.font_small #play-frame .speaker {
  font-size: 13px; }

#cedulearn.font_small #play-frame .input-component-box2 .input-wrapper input {
  font-size: 14px; }

#cedulearn.font_small #play-frame .play-content-box .test-card .top .underline1 p {
  font-size: 22px; }
  #cedulearn.font_small #play-frame .play-content-box .test-card .top .underline1 p span i {
    font-size: 12px; }

#cedulearn.font_small #play-frame .play-content-box .test-card .top .underline1 .input-box .input-row {
  font-size: 22px; }
  #cedulearn.font_small #play-frame .play-content-box .test-card .top .underline1 .input-box .input-row .play-input-text input {
    font-size: 14px; }

#cedulearn.font_small #play-frame .play-content-box .test-card .bottom .draw-underline {
  font-size: 16px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .play-content-box .test-card .top .underline1 p {
    font-size: 16px; }
  #cedulearn.font_small #play-frame .play-content-box .test-card .bottom .draw-underline {
    font-size: 14px; } }

#cedulearn.font_small #play-frame .play-input-text .under-text {
  font-size: 18px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small #play-frame .play-input-text .under-text {
    font-size: 12px; } }

#cedulearn.font_small #voca-match .page-inner .voca-match-content .card-wrap ul li.mean-kor p span {
  font-size: 18px; }

#cedulearn.font_small #voca-match .page-inner .voca-match-content .card-wrap ul li.mean-kor .row {
  font-size: 18px; }
  #cedulearn.font_small #voca-match .page-inner .voca-match-content .card-wrap ul li.mean-kor .row i {
    font-size: 10px; }

#cedulearn.font_small #voca-match .page-inner .voca-match-content .card-wrap ul li p {
  font-size: 22px; }

#cedulearn.font_small .OMRing-page .timer-box > * {
  font-size: 16px; }

#cedulearn.font_small .OMRing-page .omr-test-sheet li h2 {
  font-size: 34px; }

#cedulearn.font_small .OMRing-page .omr-test-sheet li .omr-rating2 ul li input[type='checkbox'] + label {
  font-size: 23px;
  width: 45px;
  height: 45px; }

#cedulearn.font_small .OMRing-page .omr-test-sheet li .play-input-text input {
  font-size: 14px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_small .OMRing-page .timer-box > * {
    font-size: 12.5px; }
  #cedulearn.font_small .OMRing-page .omr-test-sheet li h2 {
    font-size: 12px; }
  #cedulearn.font_small .OMRing-page .omr-test-sheet li .omr-rating2 ul li input[type='checkbox'] + label {
    font-size: 14px;
    width: 24px;
    height: 24px; }
  #cedulearn.font_small .OMRing-page .omr-test-sheet li .play-input-text input {
    font-size: 14px; } }

/*==============================NORMAL==================================================================================================================================================================================================================================================*/
/*==============================NORMAL==================================================================================================================================================================================================================================================*/
/*==============================NORMAL==================================================================================================================================================================================================================================================*/
#cedulearn.font_normal #play-frame .play-header .counting {
  font-size: 14px; }

#cedulearn.font_normal #play-frame .btn-submit-answer {
  font-size: 13px; }

#cedulearn.font_normal #play-frame .play-content-box .page-nav-arrow button {
  font-size: 12px; }

#cedulearn.font_normal #play-frame .play-main-btn-wrap button {
  font-size: 20px; }
  #cedulearn.font_normal #play-frame .play-main-btn-wrap button.key:after {
    font-size: 13px; }

#cedulearn.font_normal #play-frame #bottom-wiget .play-wiget-box .play-wiget p .erase-text {
  font-size: 16px; }

#cedulearn.font_normal #play-frame .play-content-box .long-bar p {
  font-size: 22px; }

#cedulearn.font_normal #play-frame .play-content-box .long-bar .means span {
  font-size: 24px !important; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .play-content-box .long-bar p {
    font-size: 19px !important;
    line-height: initial; }
  #cedulearn.font_normal #play-frame .play-content-box .long-bar .means i {
    font-size: 10px;
    line-height: initial; }
  #cedulearn.font_normal #play-frame .play-content-box .long-bar .means span {
    font-size: 16px !important; } }

#cedulearn.font_normal #play-frame .play-header h2 {
  font-size: 28px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .play-header h2 {
    font-size: 16px; } }

#cedulearn.font_normal #play-frame .play-content-box .test-card .bottom .ex_sub {
  font-size: 22px; }

#cedulearn.font_normal #play-frame #play-color-btn .btn-wrap-box .btn-item {
  font-size: 24px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame #play-color-btn .btn-wrap-box .btn-item {
    font-size: 14px; } }

#cedulearn.font_normal #play-frame .play-content-box .test-card .top p.sentence {
  font-size: 24px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top p.sentence {
    font-size: 19px; }
    #cedulearn.font_normal #play-frame .play-content-box .test-card .top p.sentence.lineH90 {
      font-size: 17px; }
  #cedulearn.font_normal #play-frame .play-content-box .test-card .wrong-answer-example .top p.sentence {
    font-size: 16px;
    line-height: 24px; } }

#cedulearn.font_normal #play-frame .play-content-box .test-card .top .desc1-input p {
  font-size: 24px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top .desc1-input p {
    font-size: 17px; } }

#cedulearn.font_normal #play-frame .play-content-box .test-card .top .desc2-input > div p {
  font-size: 24px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top .desc2-input > div p {
    font-size: 17px; } }

#cedulearn.font_normal #play-frame .play-content-box .test-card .bottom .desc5-input dl dt {
  font-size: 24px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .play-content-box .test-card .bottom .desc5-input dl dt {
    font-size: 14px; } }

#cedulearn.font_normal #play-frame .play-content-box .test-card .top p.desc6 {
  font-size: 24px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top p.desc6 {
    font-size: 17px; } }

#cedulearn.font_normal #play-frame .play-content-box .desc-card .row .label {
  font-size: 14px; }

#cedulearn.font_normal #play-frame .play-content-box .desc-card .row .desc p {
  font-size: 23px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .play-content-box .desc-card .row .label {
    font-size: 13px; }
  #cedulearn.font_normal #play-frame .play-content-box .desc-card .row .desc p {
    font-size: 15px; } }

#cedulearn.font_normal #play-frame .play-content-box .test-card .top .desc7 p {
  font-size: 24px; }

#cedulearn.font_normal #play-frame .play-content-box .test-card .bottom .desc7-input p {
  font-size: 24px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top .desc7 p {
    font-size: 17px; }
  #cedulearn.font_normal #play-frame .play-content-box .test-card .bottom .desc7-input p {
    font-size: 17px; } }

#cedulearn.font_normal #play-frame #list-select .select-item {
  font-size: 20px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame #list-select .select-item {
    font-size: 14px; } }

#cedulearn.font_normal #play-frame .play-content-box .test-card .top .list2 p {
  font-size: 24px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top .list2 p {
    font-size: 18px; } }

#cedulearn.font_normal #play-frame .play-content-box .test-card .top .list3 p {
  font-size: 24px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top .list3 p {
    font-size: 18px; } }

#cedulearn.font_normal #play-frame .play-content-box .test-card .top .list4 p {
  font-size: 24px; }
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top .list4 p.problems {
    font-size: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top .list4 p {
    font-size: 17px; }
    #cedulearn.font_normal #play-frame .play-content-box .test-card .top .list4 p.problems {
      font-size: 17px; } }

#cedulearn.font_normal #play-frame .play-content-box .test-card .top .select1 p {
  font-size: 24px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top .select1 p {
    font-size: 16px; } }

#cedulearn.font_normal #play-frame .play-content-box .test-card .top .select2 button {
  font-size: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top .select2 button {
    font-size: 14px; } }

#cedulearn.font_normal #play-frame .play-content-box .test-card .top .ox1 .row .ox-btn {
  font-size: 24px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top .ox1 .row .ox-btn {
    font-size: 14px; } }

#cedulearn.font_normal #play-frame .play-content-box .test-card .top .ox2 p {
  font-size: 24px; }
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top .ox2 p span.wrong .under-text {
    font-size: 17px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top .ox2 p {
    font-size: 17px; }
    #cedulearn.font_normal #play-frame .play-content-box .test-card .top .ox2 p span.wrong .under-text {
      font-size: 17px; } }

#cedulearn.font_normal #play-frame .play-content-box .test-card .top .link1 .link-item {
  font-size: 20px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top .link1 .link-item {
    font-size: 18px; } }

#cedulearn.font_normal #play-frame .play-content-box .test-card .top .arrange1 .kor {
  font-size: 24px; }

#cedulearn.font_normal #play-frame .play-content-box .test-card .top .arrange1 .append-word.ver2 div {
  font-size: 24px; }
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top .arrange1 .append-word.ver2 div button {
    font-size: 24px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top .arrange1 .kor {
    font-size: 19px; }
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top .arrange1 .append-word.ver2 div {
    font-size: 19px; }
    #cedulearn.font_normal #play-frame .play-content-box .test-card .top .arrange1 .append-word.ver2 div button {
      font-size: 14px; } }

#cedulearn.font_normal #play-frame .play-content-box .test-card .top .example-select1 p {
  font-size: 24px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top .example-select1 p {
    font-size: 17px; } }

#cedulearn.font_normal #play-frame .play-content-box .test-card .top .voca1 h2 {
  font-size: 54px; }

#cedulearn.font_normal #play-frame .play-content-box .test-card .top .voca1 .means {
  font-size: 38px; }
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top .voca1 .means i {
    font-size: 18px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top .voca1 h2 {
    font-size: 30px; }
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top .voca1 .means {
    font-size: 26px; }
    #cedulearn.font_normal #play-frame .play-content-box .test-card .top .voca1 .means i {
      font-size: 10px; } }

#cedulearn.font_normal #play-frame .play-content-box .test-card .top .spelling-input input {
  font-size: 40px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top .spelling-input input {
    font-size: 25px; } }

#cedulearn.font_normal #play-frame #voca-card-study .card-wrap .card-item.center .voca span {
  font-size: 54px !important; }

#cedulearn.font_normal #play-frame #voca-card-study .card-wrap .card-item.center .active-btn button span:first-child {
  font-size: 20px !important; }

#cedulearn.font_normal #play-frame #voca-card-study .card-wrap .card-item.center .active-btn button span:last-child {
  font-size: 12px !important; }

#cedulearn.font_normal #play-frame #voca-card-study .card-wrap .card-item.center .card-top .back-voca {
  font-size: 54px !important; }

#cedulearn.font_normal #play-frame #voca-card-study .card-wrap .card-item.center .card-top .back-means .row i {
  font-size: 12px; }

#cedulearn.font_normal #play-frame #voca-card-study .card-wrap .card-item.center .card-top .back-means .row span {
  font-size: 24px !important; }

#cedulearn.font_normal #play-frame #voca-card-study .card-wrap .card-item.center .card-bottom .text-box p {
  font-size: 20px; }

#cedulearn.font_normal #play-frame #voca-card-study .card-wrap .card-item .voca span {
  font-size: 35px !important; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame #voca-card-study .card-wrap .card-item.center .voca span {
    font-size: 32px !important; }
  #cedulearn.font_normal #play-frame #voca-card-study .card-wrap .card-item.center .active-btn button span:first-child {
    font-size: 16px !important; }
  #cedulearn.font_normal #play-frame #voca-card-study .card-wrap .card-item.center .active-btn button span:last-child {
    font-size: 12px !important; }
  #cedulearn.font_normal #play-frame #voca-card-study .card-wrap .card-item.center .card-top .back-voca {
    font-size: 32px !important; }
  #cedulearn.font_normal #play-frame #voca-card-study .card-wrap .card-item.center .card-top .back-means .row i {
    font-size: 10px; }
  #cedulearn.font_normal #play-frame #voca-card-study .card-wrap .card-item.center .card-top .back-means .row span {
    font-size: 16px !important; }
  #cedulearn.font_normal #play-frame #voca-card-study .card-wrap .card-item.center .card-bottom .text-box p {
    font-size: 15px; }
  #cedulearn.font_normal #play-frame #voca-card-study .card-wrap .card-item .voca span {
    font-size: 35px !important; } }

#cedulearn.font_normal #play-frame .test-timer p {
  font-size: 18px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .test-timer p {
    font-size: 10px; } }

#cedulearn.font_normal #play-frame .play-content-box .test-card .top .spelling-input2 {
  font-size: 24px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top .spelling-input2 {
    font-size: 19px; } }

#cedulearn.font_normal #play-frame .special-tr-wrap .quest-word {
  font-size: 54px; }

#cedulearn.font_normal #play-frame .special-tr-wrap .twin div {
  font-size: 35px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .special-tr-wrap .quest-word {
    font-size: 40px; }
  #cedulearn.font_normal #play-frame .special-tr-wrap .twin div {
    font-size: 35px; } }

#cedulearn.font_normal #play-frame .special-tr-wrap .long-bar2 p.center-left {
  font-size: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .special-tr-wrap .long-bar2 p.center-left {
    font-size: 16px; } }

#cedulearn.font_normal #play-frame .special-tr-wrap .union .typing-area h5 {
  font-size: 24px; }

#cedulearn.font_normal #play-frame .special-tr-wrap .union .typing-area .play-input-text input {
  font-size: 16px; }

#cedulearn.font_normal #play-frame .special-tr-wrap .union .typing-area .play-input-text .under-text {
  font-size: 18px; }

#cedulearn.font_normal #play-frame .special-tr-wrap .union .typing-area p {
  font-size: 40px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .special-tr-wrap .union .typing-area h5 {
    font-size: 14px; }
  #cedulearn.font_normal #play-frame .special-tr-wrap .union .typing-area .play-input-text .under-text {
    font-size: 14px; }
  #cedulearn.font_normal #play-frame .special-tr-wrap .union .typing-area p {
    font-size: 40px; } }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top img {
    max-width: 100% !important; } }

#cedulearn.font_normal #play-frame #reading-test > p {
  font-size: 24px !important; }

#cedulearn.font_normal #play-frame #reading-test ol li label {
  font-size: 14px !important; }

#cedulearn.font_normal #play-frame #reading-test #list-select .select-item {
  font-size: 20px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame #reading-test > p {
    font-size: 18px !important; }
  #cedulearn.font_normal #play-frame #reading-test ol li label {
    font-size: 14px !important; }
  #cedulearn.font_normal #play-frame #reading-test #list-select .select-item {
    font-size: 14px; } }

#cedulearn.font_normal #play-frame .play-content-box .test-card .top .append-word {
  font-size: 24px; }
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top .append-word .append-area .play-input-text input {
    font-size: 24px; }
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top .append-word .append-area .play-input-text .under-text {
    font-size: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top .append-word {
    font-size: 19px; }
    #cedulearn.font_normal #play-frame .play-content-box .test-card .top .append-word .append-area .play-input-text input {
      font-size: 19px; }
    #cedulearn.font_normal #play-frame .play-content-box .test-card .top .append-word .append-area .play-input-text .under-text {
      font-size: 19px; } }

#cedulearn.font_normal #play-frame .play-content-box .test-card .bottom .write2-desc .correct-answer {
  font-size: 24px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .play-content-box .test-card .bottom .write2-desc .correct-answer {
    font-size: 14px; } }

#cedulearn.font_normal #play-frame .play-content-box .test-card .top p.sentence span .line i {
  font-size: 12px;
  min-width: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top p.sentence span .line i {
    font-size: 14px; } }

#cedulearn.font_normal #play-frame .speaker {
  font-size: 15px; }

#cedulearn.font_normal #play-frame .input-component-box2 .input-wrapper input {
  font-size: 16px; }

#cedulearn.font_normal #play-frame .play-content-box .test-card .top .underline1 p {
  position: relative;
  font-size: 24px; }
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top .underline1 p span i {
    font-size: 14px; }

#cedulearn.font_normal #play-frame .play-content-box .test-card .top .underline1 .input-box .input-row {
  font-size: 24px; }
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top .underline1 .input-box .input-row .play-input-text input {
    font-size: 16px; }

#cedulearn.font_normal #play-frame .play-content-box .test-card .bottom .draw-underline {
  font-size: 18px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .play-content-box .test-card .top .underline1 p {
    font-size: 18px; }
  #cedulearn.font_normal #play-frame .play-content-box .test-card .bottom .draw-underline {
    font-size: 16px; } }

#cedulearn.font_normal #play-frame .play-input-text .under-text {
  font-size: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal #play-frame .play-input-text .under-text {
    font-size: 16px; } }

#cedulearn.font_normal #voca-match .page-inner .voca-match-content .card-wrap ul li.mean-kor p span {
  font-size: 20px; }
  #cedulearn.font_normal #voca-match .page-inner .voca-match-content .card-wrap ul li.mean-kor p span i {
    transform: translateY(-1px); }

#cedulearn.font_normal #voca-match .page-inner .voca-match-content .card-wrap ul li.mean-kor .row {
  font-size: 20px; }
  #cedulearn.font_normal #voca-match .page-inner .voca-match-content .card-wrap ul li.mean-kor .row i {
    font-size: 12px; }

#cedulearn.font_normal #voca-match .page-inner .voca-match-content .card-wrap ul li p {
  font-size: 24px; }

#cedulearn.font_normal .OMRing-page .timer-box > * {
  font-size: 18px; }

#cedulearn.font_normal .OMRing-page .omr-test-sheet li h2 {
  font-size: 36px; }

#cedulearn.font_normal .OMRing-page .omr-test-sheet li .omr-rating2 ul li input[type='checkbox'] + label {
  font-size: 25px;
  width: 47px;
  height: 47px; }

#cedulearn.font_normal .OMRing-page .omr-test-sheet li .play-input-text input {
  font-size: 16px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_normal .OMRing-page .timer-box > * {
    font-size: 14.5px; }
  #cedulearn.font_normal .OMRing-page .omr-test-sheet li h2 {
    font-size: 14px; }
  #cedulearn.font_normal .OMRing-page .omr-test-sheet li .omr-rating2 ul li input[type='checkbox'] + label {
    font-size: 16px;
    width: 26px;
    height: 26px; }
  #cedulearn.font_normal .OMRing-page .omr-test-sheet li .play-input-text input {
    font-size: 16px; } }

/*==============================LARGE===================================================================================================================================================================================================================================================================*/
/*==============================LARGE===================================================================================================================================================================================================================================================================*/
/*==============================LARGE===================================================================================================================================================================================================================================================================*/
#cedulearn.font_large #play-frame .play-header .counting {
  font-size: 16px; }

#cedulearn.font_large #play-frame .btn-submit-answer {
  font-size: 15px; }

#cedulearn.font_large #play-frame .play-content-box .page-nav-arrow button {
  font-size: 14px; }

#cedulearn.font_large #play-frame .play-main-btn-wrap button {
  font-size: 22px; }
  #cedulearn.font_large #play-frame .play-main-btn-wrap button.key:after {
    font-size: 15px; }

#cedulearn.font_large #play-frame #bottom-wiget .play-wiget-box .play-wiget p .erase-text {
  font-size: 17px; }

#cedulearn.font_large #play-frame .play-content-box .long-bar p {
  font-size: 24px;
  line-height: 36px; }

#cedulearn.font_large #play-frame .play-content-box .long-bar .means span {
  font-size: 24px !important; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .play-content-box .long-bar p {
    font-size: 18px; }
  #cedulearn.font_large #play-frame .play-content-box .long-bar .means i {
    font-size: 12px; }
  #cedulearn.font_large #play-frame .play-content-box .long-bar .means span {
    font-size: 18px !important; } }

#cedulearn.font_large #play-frame .play-header h2 {
  font-size: 30px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .play-header h2 {
    font-size: 18px; } }

#cedulearn.font_large #play-frame .play-content-box .test-card .bottom .ex_sub {
  font-size: 24px; }

#cedulearn.font_large #play-frame #play-color-btn .btn-wrap-box .btn-item {
  font-size: 26px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame #play-color-btn .btn-wrap-box .btn-item {
    font-size: 16px; } }

#cedulearn.font_large #play-frame .play-content-box .test-card .top p.sentence {
  font-size: 26px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .play-content-box .test-card .top p.sentence {
    font-size: 21px; }
    #cedulearn.font_large #play-frame .play-content-box .test-card .top p.sentence.lineH90 {
      font-size: 19px; } }

#cedulearn.font_large #play-frame .play-content-box .test-card .top .desc1-input p {
  font-size: 26px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .desc1-input p {
    font-size: 19px; } }

#cedulearn.font_large #play-frame .play-content-box .test-card .top .desc2-input > div p {
  font-size: 26px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .desc2-input > div p {
    font-size: 19px; } }

#cedulearn.font_large #play-frame .play-content-box .test-card .bottom .desc5-input dl dt {
  font-size: 26px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .play-content-box .test-card .bottom .desc5-input dl dt {
    font-size: 16px; } }

#cedulearn.font_large #play-frame .play-content-box .test-card .top p.desc6 {
  font-size: 26px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .play-content-box .test-card .top p.desc6 {
    font-size: 19px; } }

#cedulearn.font_large #play-frame .play-content-box .desc-card .row .label {
  font-size: 16px; }

#cedulearn.font_large #play-frame .play-content-box .desc-card .row .desc p {
  font-size: 25px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .play-content-box .desc-card .row .label {
    font-size: 15px; }
  #cedulearn.font_large #play-frame .play-content-box .desc-card .row .desc p {
    font-size: 17px; } }

#cedulearn.font_large #play-frame .play-content-box .test-card .top .desc7 p {
  font-size: 26px; }

#cedulearn.font_large #play-frame .play-content-box .test-card .bottom .desc7-input p {
  font-size: 26px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .desc7 p {
    font-size: 19px; }
  #cedulearn.font_large #play-frame .play-content-box .test-card .bottom .desc7-input p {
    font-size: 19px; } }

#cedulearn.font_large #play-frame #list-select .select-item {
  font-size: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame #list-select .select-item {
    font-size: 16px;
    line-height: 18px; } }

#cedulearn.font_large #play-frame .play-content-box .test-card .top .list2 p {
  font-size: 26px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .list2 p {
    font-size: 20px; } }

#cedulearn.font_large #play-frame .play-content-box .test-card .top .list3 p {
  font-size: 26px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .list3 p {
    font-size: 20px; } }

#cedulearn.font_large #play-frame .play-content-box .test-card .top .list4 p {
  font-size: 26px; }
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .list4 p.problems {
    font-size: 24px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .list4 p {
    font-size: 19px; }
    #cedulearn.font_large #play-frame .play-content-box .test-card .top .list4 p.problems {
      font-size: 19px; } }

#cedulearn.font_large #play-frame .play-content-box .test-card .top .select1 p {
  font-size: 32px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .select1 p {
    font-size: 18px; } }

#cedulearn.font_large #play-frame .play-content-box .test-card .top .select2 button {
  font-size: 24px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .select2 button {
    font-size: 16px; } }

#cedulearn.font_large #play-frame .play-content-box .test-card .top .ox1 .row .ox-btn {
  font-size: 26px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .ox1 .row .ox-btn {
    font-size: 16px; } }

#cedulearn.font_large #play-frame .play-content-box .test-card .top .ox2 p {
  font-size: 26px; }
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .ox2 p span.wrong .under-text {
    font-size: 19px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .ox2 p {
    font-size: 19px; }
    #cedulearn.font_large #play-frame .play-content-box .test-card .top .ox2 p span.wrong .under-text {
      font-size: 19px; } }

#cedulearn.font_large #play-frame .play-content-box .test-card .top .link1 .link-item {
  font-size: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .link1 .link-item {
    font-size: 20px; } }

#cedulearn.font_large #play-frame .play-content-box .test-card .top .link1 .link-item {
  font-size: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .link1 .link-item {
    font-size: 20px; } }

#cedulearn.font_large #play-frame .play-content-box .test-card .top .arrange1 .kor {
  font-size: 26px; }

#cedulearn.font_large #play-frame .play-content-box .test-card .top .arrange1 .append-word.ver2 div {
  font-size: 26px; }
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .arrange1 .append-word.ver2 div button {
    font-size: 26px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .arrange1 .kor {
    font-size: 21px; }
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .arrange1 .append-word.ver2 div {
    font-size: 21px; }
    #cedulearn.font_large #play-frame .play-content-box .test-card .top .arrange1 .append-word.ver2 div button {
      font-size: 16px; } }

#cedulearn.font_large #play-frame .play-content-box .test-card .top .example-select1 p {
  font-size: 26px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .example-select1 p {
    font-size: 19px; } }

#cedulearn.font_large #play-frame .play-content-box .test-card .top .voca1 h2 {
  font-size: 56px; }

#cedulearn.font_large #play-frame .play-content-box .test-card .top .voca1 .means {
  font-size: 40px; }
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .voca1 .means i {
    font-size: 20px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .voca1 h2 {
    font-size: 32px; }
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .voca1 .means {
    font-size: 28px; }
    #cedulearn.font_large #play-frame .play-content-box .test-card .top .voca1 .means i {
      font-size: 12px; } }

#cedulearn.font_large #play-frame .play-content-box .test-card .top .spelling-input input {
  font-size: 42px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .spelling-input input {
    font-size: 27px; } }

#cedulearn.font_large #play-frame #voca-card-study .card-wrap .card-item.center .voca span {
  font-size: 56px !important; }

#cedulearn.font_large #play-frame #voca-card-study .card-wrap .card-item.center .active-btn button span:first-child {
  font-size: 22px !important; }

#cedulearn.font_large #play-frame #voca-card-study .card-wrap .card-item.center .active-btn button span:last-child {
  font-size: 14px !important; }

#cedulearn.font_large #play-frame #voca-card-study .card-wrap .card-item.center .card-top .back-voca {
  font-size: 56px !important; }

#cedulearn.font_large #play-frame #voca-card-study .card-wrap .card-item.center .card-top .back-means .row i {
  font-size: 14px; }

#cedulearn.font_large #play-frame #voca-card-study .card-wrap .card-item.center .card-top .back-means .row span {
  font-size: 26px !important; }

#cedulearn.font_large #play-frame #voca-card-study .card-wrap .card-item.center .card-bottom .text-box p {
  font-size: 22px; }

#cedulearn.font_large #play-frame #voca-card-study .card-wrap .card-item .voca span {
  font-size: 37px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame #voca-card-study .card-wrap .card-item.center .voca span {
    font-size: 34px !important; }
  #cedulearn.font_large #play-frame #voca-card-study .card-wrap .card-item.center .active-btn button span:first-child {
    font-size: 18px !important; }
  #cedulearn.font_large #play-frame #voca-card-study .card-wrap .card-item.center .active-btn button span:last-child {
    font-size: 14px !important; }
  #cedulearn.font_large #play-frame #voca-card-study .card-wrap .card-item.center .card-top .back-voca {
    font-size: 34px !important; }
  #cedulearn.font_large #play-frame #voca-card-study .card-wrap .card-item.center .card-top .back-means .row i {
    font-size: 12px; }
  #cedulearn.font_large #play-frame #voca-card-study .card-wrap .card-item.center .card-top .back-means .row span {
    font-size: 18px !important; }
  #cedulearn.font_large #play-frame #voca-card-study .card-wrap .card-item.center .card-bottom .text-box p {
    font-size: 17px; }
  #cedulearn.font_large #play-frame #voca-card-study .card-wrap .card-item .voca span {
    font-size: 37px !important; } }

#cedulearn.font_large #play-frame .test-timer p {
  font-size: 20px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .test-timer p {
    font-size: 12px; } }

#cedulearn.font_large #play-frame .play-content-box .test-card .top .spelling-input2 {
  font-size: 26px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .spelling-input2 {
    font-size: 21px; } }

#cedulearn.font_large #play-frame .special-tr-wrap .quest-word {
  font-size: 56px; }

#cedulearn.font_large #play-frame .special-tr-wrap .twin div {
  font-size: 37px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .special-tr-wrap .quest-word {
    font-size: 42px; }
  #cedulearn.font_large #play-frame .special-tr-wrap .twin div {
    font-size: 37px; } }

#cedulearn.font_large #play-frame .special-tr-wrap .long-bar2 p.center-left {
  font-size: 24px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .special-tr-wrap .long-bar2 p.center-left {
    font-size: 18px; } }

#cedulearn.font_large #play-frame .special-tr-wrap .union .typing-area h5 {
  font-size: 26px; }

#cedulearn.font_large #play-frame .special-tr-wrap .union .typing-area .play-input-text input {
  font-size: 18px; }

#cedulearn.font_large #play-frame .special-tr-wrap .union .typing-area .play-input-text .under-text {
  font-size: 22px; }

#cedulearn.font_large #play-frame .special-tr-wrap .union .typing-area p {
  font-size: 42px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .special-tr-wrap .union .typing-area h5 {
    font-size: 16px; }
  #cedulearn.font_large #play-frame .special-tr-wrap .union .typing-area .play-input-text .under-text {
    font-size: 16px; }
  #cedulearn.font_large #play-frame .special-tr-wrap .union .typing-area p {
    font-size: 42px; } }

#cedulearn.font_large #play-frame #reading-test > p {
  font-size: 26px !important; }
  #cedulearn.font_large #play-frame #reading-test > p ol li label {
    font-size: 16px !important; }
  #cedulearn.font_large #play-frame #reading-test > p #list-select .select-item {
    font-size: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame #reading-test > p {
    font-size: 20px !important; }
  #cedulearn.font_large #play-frame #reading-test ol li label {
    font-size: 16px !important; }
  #cedulearn.font_large #play-frame #list-select .select-item {
    font-size: 16px; } }

#cedulearn.font_large #play-frame .play-content-box .test-card .top .append-word {
  font-size: 26px; }
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .append-word .append-area .play-input-text input {
    font-size: 26px; }
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .append-word .append-area .play-input-text .under-text {
    font-size: 24px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .append-word {
    font-size: 21px; }
    #cedulearn.font_large #play-frame .play-content-box .test-card .top .append-word .append-area .play-input-text input {
      font-size: 21px; }
    #cedulearn.font_large #play-frame .play-content-box .test-card .top .append-word .append-area .play-input-text .under-text {
      font-size: 21px; } }

#cedulearn.font_large #play-frame .play-content-box .test-card .bottom .write2-desc .correct-answer {
  font-size: 26px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .play-content-box .test-card .bottom .write2-desc .correct-answer {
    font-size: 16px; } }

#cedulearn.font_large #play-frame .play-content-box .test-card .top p.sentence span .line i {
  font-size: 20px;
  min-width: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .play-content-box .test-card .top p.sentence span .line i {
    font-size: 16px; } }

#cedulearn.font_large #play-frame .speaker {
  font-size: 17px; }

#cedulearn.font_large #play-frame .input-component-box2 .input-wrapper input {
  font-size: 18px; }

#cedulearn.font_large #play-frame .play-content-box .test-card .top .underline1 p {
  font-size: 26px; }
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .underline1 p span i {
    font-size: 16px; }

#cedulearn.font_large #play-frame .play-content-box .test-card .top .underline1 .input-box .input-row {
  font-size: 26px; }
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .underline1 .input-box .input-row .play-input-text input {
    font-size: 18px; }

#cedulearn.font_large #play-frame .play-content-box .test-card .bottom .draw-underline {
  font-size: 20px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .play-content-box .test-card .top .underline1 p {
    font-size: 20px; }
  #cedulearn.font_large #play-frame .play-content-box .test-card .bottom .draw-underline {
    font-size: 18px; } }

#cedulearn.font_large #play-frame .play-input-text .under-text {
  font-size: 22px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large #play-frame .play-input-text .under-text {
    font-size: 16px; } }

#cedulearn.font_large #voca-match .page-inner .voca-match-content .card-wrap ul li.mean-kor p span {
  font-size: 22px; }
  #cedulearn.font_large #voca-match .page-inner .voca-match-content .card-wrap ul li.mean-kor p span i {
    transform: translateY(-2px); }

#cedulearn.font_large #voca-match .page-inner .voca-match-content .card-wrap ul li.mean-kor .row {
  font-size: 22px; }
  #cedulearn.font_large #voca-match .page-inner .voca-match-content .card-wrap ul li.mean-kor .row i {
    font-size: 14px; }

#cedulearn.font_large #voca-match .page-inner .voca-match-content .card-wrap ul li p {
  font-size: 26px; }

#cedulearn.font_large .OMRing-page .timer-box > * {
  font-size: 20px; }

#cedulearn.font_large .OMRing-page .omr-test-sheet li h2 {
  font-size: 38px; }

#cedulearn.font_large .OMRing-page .omr-test-sheet li .omr-rating2 ul li input[type='checkbox'] + label {
  font-size: 27px;
  width: 49px;
  height: 49px; }

#cedulearn.font_large .OMRing-page .omr-test-sheet li .play-input-text input {
  font-size: 18px; }

@media screen and (max-width: 1024px) {
  #cedulearn.font_large .OMRing-page .timer-box > * {
    font-size: 16.5px; }
  #cedulearn.font_large .OMRing-page .omr-test-sheet li h2 {
    font-size: 16px; }
  #cedulearn.font_large .OMRing-page .omr-test-sheet li .omr-rating2 ul li input[type='checkbox'] + label {
    font-size: 18px;
    width: 28px;
    height: 28px; }
  #cedulearn.font_large .OMRing-page .omr-test-sheet li .play-input-text input {
    font-size: 18px; } }

/*폰트 사이즈 변경 : 끝 */
/*////////////////////////*/
/**
 * 문풀 정답 확인 화면 border 조정
 */
.play-input-border-bold .play-input-text {
  border-width: 3px !important; }

.analysis-label {
  font-size: 16px;
  line-height: 33px;
  font-weight: 700;
  height: 33px;
  padding: 0 20px;
  border-radius: 20px;
  border-width: 1px;
  border-style: solid;
  width: max-content; }
  .analysis-label.cyan {
    color: #09b9c6;
    border-color: #09b9c6; }
  .analysis-label.purple {
    color: #7681e5;
    border-color: #7681e5; }
  @media screen and (max-width: 1024px) {
    .analysis-label {
      font-size: 12px;
      padding: 0 12px;
      height: 26px;
      line-height: 26px; } }

@media screen and (max-width: 1366px) {
  #play-frame .play-content-box .test-card .top .desc1-input p .play-input-text.height40.wrong {
    margin-bottom: 20px; } }

@media screen and (max-width: 768px) {
  #play-frame .play-content-box .test-card .top {
    /*240730 가로모드 검수시트 #50-2*/
    /*240730 가로모드 검수시트 #38-1*/ }
    #play-frame .play-content-box .test-card .top .select1 p {
      line-height: 24px; }
      #play-frame .play-content-box .test-card .top .select1 p span.click-bridge {
        padding: 3px 16px; }
    #play-frame .play-content-box .test-card .top .voca1 .means {
      font-size: 16px !important;
      gap: 3px;
      -webkit-text-size-adjust: none;
      -moz-text-size-adjust: none;
      -ms-text-size-adjust: none; }
      #play-frame .play-content-box .test-card .top .voca1 .means span {
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        -ms-text-size-adjust: none; }
  #cedulearn #play-test #play-frame .play-content-box .test-card .top {
    /*240730 가로모드 검수시트 #50-2*/ }
    #cedulearn #play-test #play-frame .play-content-box .test-card .top .select1 p:not(.cmdt) span.click-bridge {
      padding: 3px 16px; }
  #__sentence > p > span.line {
    /*240730 가로모드 검수시트 #26-2*/
    right: -2px !important; }
    #__sentence > p > span.line > i {
      font-size: 14px !important; }
    #__sentence > p > span.line.start.ishort {
      left: 17px !important; } }

.shadow_none button {
  box-shadow: none !important; }

#play-color-btn {
  overflow-x: auto;
  overflow-y: hidden; }
  #play-color-btn .btn-wrap-box {
    width: max-content;
    margin: 0 auto;
    display: flex;
    align-items: center; }
    #play-color-btn .btn-wrap-box .btn-item {
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Roboto', 'Noto Sans KR';
      font-weight: 700;
      font-size: 24px;
      background: #ffffff;
      box-sizing: border-box;
      box-shadow: 0px 4px 3px rgba(119, 119, 119, 0.2);
      border-radius: 15px;
      padding: 19px 31px;
      margin-right: 30px;
      transition: all 0.3s; }
      #play-color-btn .btn-wrap-box .btn-item:hover {
        background-color: #f4f5f6; }
      #play-color-btn .btn-wrap-box .btn-item * {
        color: inherit;
        font-size: inherit;
        line-height: inherit; }
      #play-color-btn .btn-wrap-box .btn-item:last-of-type {
        margin-right: 0px; }
      #play-color-btn .btn-wrap-box .btn-item.red {
        color: #ff5050;
        border: 3px solid #ff5050; }
        #play-color-btn .btn-wrap-box .btn-item.red.active {
          color: #ff3d3d;
          border-color: #ff3d3d;
          background-color: rgba(255, 61, 61, 0.1); }
      #play-color-btn .btn-wrap-box .btn-item.red-orange {
        color: #ff6b00;
        border: 3px solid #ff6b00; }
        #play-color-btn .btn-wrap-box .btn-item.red-orange.active {
          background-color: rgba(255, 107, 0, 0.1); }
      #play-color-btn .btn-wrap-box .btn-item.orange {
        color: #ffaa04;
        /*실제색상 yellow*/
        border: 3px solid #ffaa04; }
        #play-color-btn .btn-wrap-box .btn-item.orange.active {
          background-color: rgba(255, 170, 4, 0.1); }
      #play-color-btn .btn-wrap-box .btn-item.light-green {
        color: #1ee2b3;
        border: 3px solid #1ee2b3; }
        #play-color-btn .btn-wrap-box .btn-item.light-green.active {
          background-color: rgba(30, 226, 179, 0.1); }
      #play-color-btn .btn-wrap-box .btn-item.green {
        color: #05aab6;
        border: 3px solid #05aab6; }
        #play-color-btn .btn-wrap-box .btn-item.green.active {
          background-color: rgba(5, 170, 182, 0.1); }
      #play-color-btn .btn-wrap-box .btn-item.sky-blue {
        color: #17c7ff;
        border: 3px solid #17c7ff; }
        #play-color-btn .btn-wrap-box .btn-item.sky-blue.active {
          background-color: rgba(23, 199, 255, 0.1); }
      #play-color-btn .btn-wrap-box .btn-item.cyan {
        color: #09b9c6;
        border: 3px solid #09b9c6; }
      #play-color-btn .btn-wrap-box .btn-item.blue {
        color: #0199ee;
        border: 3px solid #0199ee; }
        #play-color-btn .btn-wrap-box .btn-item.blue.active {
          background-color: rgba(1, 153, 238, 0.1); }
      #play-color-btn .btn-wrap-box .btn-item.pink {
        color: #ff84b0;
        border: 3px solid #ff84b0; }
        #play-color-btn .btn-wrap-box .btn-item.pink.active {
          background-color: rgba(255, 132, 176, 0.1); }
      #play-color-btn .btn-wrap-box .btn-item.pink2 {
        color: #ff5a95;
        border: 3px solid #ff5a95; }
      #play-color-btn .btn-wrap-box .btn-item.pink-purple {
        color: #d72b68;
        border: 3px solid #d72b68; }
        #play-color-btn .btn-wrap-box .btn-item.pink-purple.active {
          background-color: rgba(215, 43, 104, 0.1); }
      #play-color-btn .btn-wrap-box .btn-item.purple {
        color: #7681e5;
        border: 3px solid #7681e5; }
        #play-color-btn .btn-wrap-box .btn-item.purple.active {
          background-color: rgba(118, 129, 229, 0.1); }
      #play-color-btn .btn-wrap-box .btn-item.brown {
        color: #ac7637;
        border: 3px solid #ac7637; }
        #play-color-btn .btn-wrap-box .btn-item.brown.active {
          background-color: rgba(172, 118, 55, 0.1); }
      #play-color-btn .btn-wrap-box .btn-item.active {
        background: #e6f3f9;
        box-shadow: initial; }
      #play-color-btn .btn-wrap-box .btn-item.active2 {
        color: #a7a6ab;
        background: #ffffff;
        box-shadow: initial;
        border: 1px solid #a7a6ab; }
      #play-color-btn .btn-wrap-box .btn-item.disabled {
        border: 1px solid #a7a6ab !important;
        color: #a7a6ab !important;
        box-shadow: initial !important;
        background: initial !important; }
    #play-color-btn .btn-wrap-box.slimFull .btn-item.cyan {
      border: 1px solid #09b9c6; }
      #play-color-btn .btn-wrap-box.slimFull .btn-item.cyan.active {
        background: #09b9c6; }
    #play-color-btn .btn-wrap-box.slimFull .btn-item.wrong {
      border: 3px solid #ff5050;
      background: #fff; }
  #play-color-btn.straight {
    overflow-x: auto; }
    #play-color-btn.straight .btn-wrap-box {
      width: max-content;
      margin: 0 auto;
      justify-content: unset;
      flex-wrap: unset; }

@media screen and (max-width: 1024px) {
  #play-color-btn {
    padding-bottom: 5px;
    overflow-x: auto;
    overflow-y: hidden; }
    #play-color-btn .btn-wrap-box {
      flex-wrap: nowrap;
      padding: 0 20px;
      width: max-content;
      margin: 0 auto; }
      #play-color-btn .btn-wrap-box .btn-item {
        min-width: 50px;
        padding: 16px 19px;
        font-size: 14px;
        white-space: nowrap;
        margin-right: 13px; }
        #play-color-btn .btn-wrap-box .btn-item:last-of-type {
          margin-right: 0px; }
    #play-color-btn.scroll {
      justify-content: unset; }
      #play-color-btn.scroll.sorting-scroll {
        transform: translateX(-16px);
        width: calc(100% + 32px);
        padding-left: 16px; }
        #play-color-btn.scroll.sorting-scroll .btn-wrap-box .btn-item:last-of-type {
          margin-right: 16px; }
    #play-color-btn.colors .btn-wrap-box {
      padding: 0; }
      #play-color-btn.colors .btn-wrap-box .btn-item {
        min-width: max-content;
        width: 48px;
        height: 48px;
        padding: 0 5px;
        font-size: 14px;
        white-space: nowrap; }
    #play-color-btn.straight .btn-wrap-box {
      padding: 0; }
  .botton_padding_top0 #play-color-btn.colors .btn-wrap-box .btn-item {
    padding-top: 0; }
    .botton_padding_top0 #play-color-btn.colors .btn-wrap-box .btn-item.active {
      color: #fff !important;
      background-color: #09b9c6; } }

#list-select {
  display: flex;
  flex-direction: column;
  gap: 15px; }
  #list-select .select-item {
    display: flex;
    font-family: 'Roboto', 'Noto Sans KR';
    font-size: 20px;
    color: #504d58;
    padding: 19px 40px 18px 24px;
    background: #ffffff;
    border: 1px solid #53ced7;
    box-sizing: border-box;
    border-radius: 15px;
    cursor: pointer;
    white-space: break-spaces;
    transition: all 0.3s; }
    #list-select .select-item:hover {
      background-color: #f4f5f6; }
    #list-select .select-item.select-meaning .select-meaning-wrap {
      display: flex;
      flex-direction: column; }
      #list-select .select-item.select-meaning .select-meaning-wrap div:not(:last-child) {
        margin-bottom: 2px; }
    #list-select .select-item div {
      display: flex;
      align-items: start; }
      #list-select .select-item div i {
        min-width: 23px;
        margin-top: 2px; }
        #list-select .select-item div i:first-child {
          margin-left: 0; }
      #list-select .select-item div span {
        white-space: normal; }
    #list-select .select-item * {
      font-size: inherit;
      line-height: inherit;
      color: inherit;
      text-underline-offset: 6px; }
      @media screen and (max-width: 1024px) {
        #list-select .select-item * {
          text-underline-offset: 4px; } }
    #list-select .select-item.active {
      background: #09b9c6 !important;
      border-color: #09b9c6;
      color: #fff; }
      #list-select .select-item.active i {
        border-color: #fff; }
      #list-select .select-item.active u {
        border-color: #fff; }
    #list-select .select-item.wrong {
      color: #ff5050 !important;
      border: 3px solid #ff5050 !important;
      position: relative !important;
      background: #fff; }
      #list-select .select-item.wrong i {
        border-color: #ff5050; }
      #list-select .select-item.wrong u {
        border-color: #fff; }
      #list-select .select-item.wrong:after {
        content: '';
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        width: 26px;
        height: 26px;
        display: inline-block;
        background-image: url("/img/icon/icon_o_red.svg");
        background-size: contain;
        background-repeat: no-repeat; }
    #list-select .select-item i {
      border-radius: 50%;
      border: 1px solid #504d58;
      width: 23px;
      height: 23px;
      font-size: 12px;
      display: inline-block;
      margin: 0 10px;
      line-height: 19px;
      text-align: center;
      font-weight: 700; }
    #list-select .select-item span {
      white-space: nowrap; }
  #list-select.new_line .select-item div {
    flex-direction: column;
    margin-left: 12px; }
    #list-select.new_line .select-item div p {
      padding-left: 33px;
      text-indent: -33px; }
      #list-select.new_line .select-item div p:not(:first-child) {
        margin-top: 8px; }
      #list-select.new_line .select-item div p i {
        min-width: 18px;
        flex-shrink: 0;
        text-indent: 0; }
  #list-select.new_line.mb_new_line .select-item {
    align-items: flex-start; }
    #list-select.new_line.mb_new_line .select-item div p {
      padding-left: 28px;
      text-indent: -28px; }
      #list-select.new_line.mb_new_line .select-item div p:not(:first-child) {
        margin-top: 6px; }

@media screen and (max-width: 1024px) {
  #list-select {
    gap: 10px; }
    #list-select .select-item {
      font-size: 14px;
      padding: 10px 28px 11px 10px;
      border-radius: 10px;
      line-height: 18px;
      display: flex;
      align-items: center; }
      #list-select .select-item.select-meaning {
        align-items: start; }
        #list-select .select-item.select-meaning div:not(:last-child) {
          margin-bottom: 2px; }
        #list-select .select-item.select-meaning div {
          display: flex;
          width: 100%; }
          #list-select .select-item.select-meaning div:nth-child(2) {
            width: calc(100% - 11px); }
          #list-select .select-item.select-meaning div span {
            white-space: normal; }
          #list-select .select-item.select-meaning div i {
            min-width: 18px; }
      #list-select .select-item.wrong:after {
        width: 16px;
        height: 16px; }
      #list-select .select-item i {
        width: 18px;
        height: 18px;
        line-height: 16px;
        font-size: 10px;
        transform: translateY(-1px); } }

#voca-info {
  display: flex;
  flex-direction: column;
  width: 40%; }
  #voca-info.new_version {
    width: 100%; }
  #voca-info .info-head {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
    border-radius: 15px;
    padding: 15px 20px;
    margin-bottom: 9px; }
    #voca-info .info-head .label {
      background: #ffffff;
      border: 2px solid #7681e5;
      box-sizing: border-box;
      border-radius: 5px;
      padding: 6px 15px;
      font-family: 'Inter', 'Noto Sans KR';
      font-weight: 800;
      font-size: 12px;
      line-height: 15px;
      color: #7681e5; }
    #voca-info .info-head h2 {
      font-family: 'Inter', 'Noto Sans KR';
      font-weight: bold;
      font-size: 23px;
      color: #24212e; }
  #voca-info .info-desc {
    background: #ffffff;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    padding: 28px 32px; }
    #voca-info .info-desc.new_version {
      display: flex;
      flex: 1; }
      #voca-info .info-desc.new_version img {
        width: 50%; }
      #voca-info .info-desc.new_version .dl-box {
        margin-top: 0;
        margin-left: 56px; }
    #voca-info .info-desc .img-holder {
      text-align: center; }
    #voca-info .info-desc .dl-box {
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow-y: auto;
      margin-top: 30px;
      padding-top: 30px;
      border-top: 1px solid #e9e9ea; }
      #voca-info .info-desc .dl-box dl {
        display: flex; }
        #voca-info .info-desc .dl-box dl:not(:first-child) {
          margin-top: 24px; }
        #voca-info .info-desc .dl-box dl dt {
          width: 32%;
          line-height: 22px;
          width: 120px;
          font-size: 14px;
          color: #a7a6ab;
          max-width: 164px;
          flex-shrink: 0; }
        #voca-info .info-desc .dl-box dl dd h3 {
          font-size: 14px;
          line-height: 22px;
          font-weight: 400;
          color: #504d58; }
        #voca-info .info-desc .dl-box dl dd .tag {
          font-size: 14px;
          line-height: 22px;
          font-weight: 400;
          color: #504d58;
          margin: 0;
          padding: 0;
          background-color: transparent;
          border-radius: 0;
          border: none; }
          #voca-info .info-desc .dl-box dl dd .tag:not(:last-child) {
            margin-right: 3px; }
            #voca-info .info-desc .dl-box dl dd .tag:not(:last-child):after {
              content: ', ';
              font: inherit;
              color: inherit; }
  #voca-info.mb_style {
    height: auto; }
    #voca-info.mb_style .info-desc {
      background-color: transparent;
      border-radius: 0;
      box-shadow: none;
      padding: 0; }
      #voca-info.mb_style .info-desc .img-holder {
        padding-bottom: 40px;
        margin-bottom: 30px; }
        #voca-info.mb_style .info-desc .img-holder .date {
          display: none; }
      #voca-info.mb_style .info-desc .dl-box dl {
        display: block;
        padding: 0; }
        #voca-info.mb_style .info-desc .dl-box dl:not(:first-child) {
          margin-top: 20px; }
        #voca-info.mb_style .info-desc .dl-box dl dt {
          width: 100%;
          min-width: unset;
          max-width: unset;
          font-size: 14px; }
        #voca-info.mb_style .info-desc .dl-box dl dd {
          margin-top: 8px; }
          #voca-info.mb_style .info-desc .dl-box dl dd h3 {
            font-size: 14px; }
          #voca-info.mb_style .info-desc .dl-box dl dd .tag {
            display: initial;
            padding: 0;
            border-radius: 0;
            border: none;
            font-size: 14px;
            line-height: 22px;
            font-weight: 400;
            color: #504d58; }

@media screen and (max-width: 1024px) {
  #voca-info {
    width: 100%; }
    #voca-info .info-head {
      padding: 17px 10px; }
      #voca-info .info-head .label {
        border: 1px solid #7681e5;
        padding: 2px 7px;
        font-size: 8px;
        line-height: 10px; }
      #voca-info .info-head h2 {
        font-size: 16px; }
    #voca-info .info-desc {
      padding: 30px 20px; }
      #voca-info .info-desc .img-holder {
        flex-direction: column;
        align-items: center;
        margin-bottom: 30px; }
        #voca-info .info-desc .img-holder img {
          width: 50%; }
        #voca-info .info-desc .img-holder .date {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          text-align: left;
          font-weight: 500;
          font-size: 10px;
          line-height: 14px;
          color: #7c7a82;
          margin-bottom: 30px;
          font-size: 14px; }
      #voca-info .info-desc .dl-box dl {
        gap: 0; }
        #voca-info .info-desc .dl-box dl dt {
          font-size: 16px; }
        #voca-info .info-desc .dl-box dl dd h3 {
          font-size: 16px; }
        #voca-info .info-desc .dl-box dl dd .tag {
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #09b9c6;
          box-sizing: border-box;
          border-radius: 10px;
          font-weight: 500;
          font-size: 10px;
          line-height: 19px;
          color: #09b9c6;
          padding: 8px 13px;
          margin-right: 0; } }

#voca-list {
  width: 60%;
  padding: 32px 32px 44px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12); }
  #voca-list.new_version {
    position: fixed;
    top: 164px;
    right: 32px;
    width: 584px;
    height: calc(100% - 186px); }
  #voca-list .voca-content {
    height: auto !important; }
  #voca-list .voca-list-card {
    flex: 1;
    position: relative;
    height: 100%; }
    #voca-list .voca-list-card .voca-range {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px; }
    #voca-list .voca-list-card ul {
      display: flex;
      flex-direction: column;
      overflow: auto;
      max-height: 100%;
      padding-right: 10px; }
      #voca-list .voca-list-card ul li {
        box-sizing: border-box;
        border-radius: 15px;
        padding: 20px 24px;
        border-radius: 8px;
        border: 1px solid #e9e9ea; }
        #voca-list .voca-list-card ul li:not(:first-child) {
          margin-top: 12px; }
        #voca-list .voca-list-card ul li.ligth-cyan {
          background: #9de3e8; }
        #voca-list .voca-list-card ul li .list-head {
          display: flex;
          align-items: center;
          justify-content: space-between; }
          #voca-list .voca-list-card ul li .list-head .title {
            display: flex;
            align-items: center;
            gap: 10px; }
            #voca-list .voca-list-card ul li .list-head .title h3 {
              font-weight: 500;
              font-size: 16px;
              line-height: 24px;
              color: #504d58; }
            #voca-list .voca-list-card ul li .list-head .title .list-info-label {
              display: flex;
              align-items: center;
              justify-content: center;
              font-weight: 500;
              font-size: 11px;
              line-height: 16px;
              color: #7681e5;
              background: #f1f2fc;
              border-radius: 10px;
              padding: 4px 15px; }
          #voca-list .voca-list-card ul li .list-head button {
            background: #7681e5;
            border: 1px solid #7681e5;
            box-sizing: border-box;
            border-radius: 8px;
            font-size: 14px;
            color: #ffffff;
            height: 30px;
            padding: 0 12px; }
            #voca-list .voca-list-card ul li .list-head button.purple_line {
              background: #fff;
              color: #7681e5; }
            #voca-list .voca-list-card ul li .list-head button + button {
              margin-left: 8px; }
        #voca-list .voca-list-card ul li .list-desc {
          display: flex;
          padding-top: 16px;
          margin-top: 16px;
          border-top: 1px solid #e9e9ea; }
          #voca-list .voca-list-card ul li .list-desc:not(:last-of-type) {
            margin-bottom: 12px; }
          #voca-list .voca-list-card ul li .list-desc .dt {
            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
            color: #7c7a82;
            margin-right: 10px; }
          #voca-list .voca-list-card ul li .list-desc .bar-box {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;
            flex: 1; }
            #voca-list .voca-list-card ul li .list-desc .bar-box .progress {
              display: flex;
              align-items: center;
              width: 100%; }
              #voca-list .voca-list-card ul li .list-desc .bar-box .progress .bar {
                position: relative;
                background: #eff0f6;
                border-radius: 50px;
                width: 100%;
                height: 8px; }
                #voca-list .voca-list-card ul li .list-desc .bar-box .progress .bar .gage {
                  height: calc(100% - 4px);
                  position: absolute;
                  left: 2px;
                  top: 2px;
                  background-color: #7681e5;
                  border-radius: inherit; }
                  #voca-list .voca-list-card ul li .list-desc .bar-box .progress .bar .gage.cyan {
                    background-color: #09b9c6; }
              #voca-list .voca-list-card ul li .list-desc .bar-box .progress .gage-index {
                font-family: 'Inter', 'Noto Sans KR';
                font-weight: bold;
                font-size: 16px;
                min-width: 48px;
                line-height: 24px;
                margin-left: 12px;
                color: #504d58; }
            #voca-list .voca-list-card ul li .list-desc .bar-box .date {
              display: flex;
              align-items: center; }
              #voca-list .voca-list-card ul li .list-desc .bar-box .date img {
                width: 14px;
                margin-right: 6px; }
              #voca-list .voca-list-card ul li .list-desc .bar-box .date > p {
                padding-left: 22px;
                position: relative;
                font-size: 13px;
                line-height: 20px;
                color: #7c7a82; }
                #voca-list .voca-list-card ul li .list-desc .bar-box .date > p:not(:last-child) {
                  margin-right: 16px; }
                #voca-list .voca-list-card ul li .list-desc .bar-box .date > p.after_none span:before {
                  display: none; }
                #voca-list .voca-list-card ul li .list-desc .bar-box .date > p img {
                  position: absolute;
                  left: 2px;
                  top: 50%;
                  transform: translateY(-50%);
                  margin-right: 0; }
                #voca-list .voca-list-card ul li .list-desc .bar-box .date > p span {
                  font: inherit;
                  color: inherit; }
                  #voca-list .voca-list-card ul li .list-desc .bar-box .date > p span:before {
                    content: ' : ';
                    font: inherit;
                    color: inherit; }
          #voca-list .voca-list-card ul li .list-desc .status button {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            border: 1px solid #7681e5;
            box-sizing: border-box;
            border-radius: 10px;
            font-weight: 500;
            font-size: 13px;
            line-height: 19px;
            color: #7681e5;
            width: 100px;
            height: 40px; }
            #voca-list .voca-list-card ul li .list-desc .status button.re {
              background-color: #7681e5;
              color: #fff; }
          #voca-list .voca-list-card ul li .list-desc .status p {
            width: 100px;
            font-family: 'Inter', 'Noto Sans KR';
            font-weight: bold;
            font-size: 18px;
            color: #7c7a82;
            text-align: center; }
            #voca-list .voca-list-card ul li .list-desc .status p em {
              font-weight: inherit;
              font-size: inherit;
              line-height: inherit;
              color: #ff5050; }
    #voca-list .voca-list-card .total-progress {
      display: flex;
      align-items: flex-start;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      border-top: 1px solid #a7a6ab;
      background: #fff;
      box-shadow: 0px -2px 7px rgba(0, 0, 0, 0.1);
      border-radius: 0 0 20px 20px;
      padding: 40px 30px; }
      #voca-list .voca-list-card .total-progress .dt {
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #7c7a82;
        margin-right: 10px; }
      #voca-list .voca-list-card .total-progress .bar-box {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        flex: 1;
        margin-right: 20px; }
        #voca-list .voca-list-card .total-progress .bar-box .progress {
          display: flex;
          align-items: center;
          width: 100%;
          padding-top: 3px; }
          #voca-list .voca-list-card .total-progress .bar-box .progress .bar {
            position: relative;
            background: #eff0f6;
            border-radius: 50px;
            width: 100%;
            height: 15px;
            margin-right: 5px; }
            #voca-list .voca-list-card .total-progress .bar-box .progress .bar .gage {
              height: inherit;
              position: absolute;
              left: 0;
              top: 0;
              background: #a7a6ab;
              border-radius: inherit; }
              #voca-list .voca-list-card .total-progress .bar-box .progress .bar .gage.full {
                background: #7681e5; }
          #voca-list .voca-list-card .total-progress .bar-box .progress .gage-index {
            font-family: 'Inter', 'Noto Sans KR';
            font-weight: bold;
            font-size: 16px;
            line-height: 19px;
            color: #7c7a82;
            margin-left: 20px; }
            #voca-list .voca-list-card .total-progress .bar-box .progress .gage-index.full {
              color: #7681e5; }
        #voca-list .voca-list-card .total-progress .bar-box .date {
          font-size: 12px;
          line-height: 17px;
          color: #7c7a82;
          margin-top: 5px; }
      #voca-list .voca-list-card .total-progress .status button {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        border: 1px solid #7681e5;
        box-sizing: border-box;
        border-radius: 10px;
        font-weight: 500;
        font-size: 13px;
        line-height: 19px;
        color: #7681e5;
        width: 100px;
        height: 40px; }
        #voca-list .voca-list-card .total-progress .status button.starter {
          background-color: #7681e5;
          color: #fff; }
      #voca-list .voca-list-card .total-progress .status p {
        width: 100px;
        font-family: 'Inter', 'Noto Sans KR';
        font-weight: bold;
        font-size: 18px;
        color: #7c7a82;
        text-align: center; }
        #voca-list .voca-list-card .total-progress .status p em {
          font-weight: inherit;
          font-size: inherit;
          line-height: inherit;
          color: #ff5050; }

@media screen and (max-width: 1024px) {
  #voca-list {
    width: 100%; }
    #voca-list .voca-list-card {
      border-radius: 0;
      padding: 20px; }
      #voca-list .voca-list-card ul {
        max-height: initial;
        overflow: initial;
        padding-bottom: 160px;
        padding-right: 0; }
        #voca-list .voca-list-card ul li {
          padding: 20px 16px; }
          #voca-list .voca-list-card ul li .list-head .title h3 {
            font-size: 14px; }
          #voca-list .voca-list-card ul li .list-head .title .list-info-label {
            padding: 4px 10px; }
          #voca-list .voca-list-card ul li .list-head button {
            width: 80px;
            height: 30px; }
          #voca-list .voca-list-card ul li .list-desc {
            flex-wrap: wrap; }
            #voca-list .voca-list-card ul li .list-desc .dt {
              width: 30%;
              margin-right: 0; }
            #voca-list .voca-list-card ul li .list-desc .bar-box {
              width: 70%;
              flex: initial;
              margin-right: 0; }
              #voca-list .voca-list-card ul li .list-desc .bar-box .progress {
                margin-left: 0px; }
                #voca-list .voca-list-card ul li .list-desc .bar-box .progress .bar {
                  margin-left: 0;
                  height: 10px; }
                #voca-list .voca-list-card ul li .list-desc .bar-box .progress .gage-index {
                  margin-left: 5px;
                  font-size: 14px; }
              #voca-list .voca-list-card ul li .list-desc .bar-box .date {
                font-size: 10px;
                margin-top: 0; }
            #voca-list .voca-list-card ul li .list-desc .status {
              flex: 1;
              margin-top: 20px;
              display: flex;
              justify-content: flex-end; }
              #voca-list .voca-list-card ul li .list-desc .status button {
                font-size: 12px;
                width: 90px;
                height: 30px; }
      #voca-list .voca-list-card .total-progress {
        position: fixed;
        flex-wrap: wrap;
        padding: 30px 20px;
        /* ios fixed 이슈 관련 */ } }
      @media screen and (max-width: 1024px) and (orientation: landscape) {
        #voca-list .voca-list-card .total-progress {
          position: fixed; } }
      @media screen and (max-width: 1024px) and (orientation: portrait) {
        #voca-list .voca-list-card .total-progress {
          position: fixed; } }

@media screen and (max-width: 1024px) {
        #voca-list .voca-list-card .total-progress .dt {
          width: 30%;
          margin-right: 0; }
        #voca-list .voca-list-card .total-progress .bar-box {
          width: 70%;
          flex: initial;
          margin-right: 0; }
          #voca-list .voca-list-card .total-progress .bar-box .progress {
            margin-left: 0px; }
            #voca-list .voca-list-card .total-progress .bar-box .progress .bar {
              margin-left: 0;
              height: 10px; }
            #voca-list .voca-list-card .total-progress .bar-box .progress .gage-index {
              margin-left: 5px;
              font-size: 14px; }
          #voca-list .voca-list-card .total-progress .bar-box .date {
            font-size: 10px;
            margin-top: 0; }
        #voca-list .voca-list-card .total-progress .status {
          flex: 1;
          margin-top: 20px;
          display: flex;
          justify-content: flex-end; }
          #voca-list .voca-list-card .total-progress .status button {
            font-size: 12px;
            width: 90px;
            height: 30px; } }

#cedulearn #voca-card-study .card-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; }
  #cedulearn #voca-card-study .card-wrap .card-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e9e9ea;
    box-sizing: border-box;
    border-radius: 15px;
    width: 19vw;
    height: 22vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%); }
    #cedulearn #voca-card-study .card-wrap .card-item.left-card {
      left: 0; }
    #cedulearn #voca-card-study .card-wrap .card-item.right-card {
      right: 0; }
    #cedulearn #voca-card-study .card-wrap .card-item.center {
      position: relative;
      z-index: 1;
      top: initial;
      transform: translateY(0%);
      width: 38vw;
      max-width: 600px;
      min-height: 500px;
      height: auto;
      background: #ffffff;
      border: 2px solid #09b9c6;
      box-sizing: border-box;
      box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
      border-radius: 20px;
      padding: 48px; }
      #cedulearn #voca-card-study .card-wrap .card-item.center .bookmark {
        position: absolute;
        top: 48px;
        right: 48px;
        cursor: pointer; }
      #cedulearn #voca-card-study .card-wrap .card-item.center .voca span {
        font-size: 54px;
        color: #7c7a82; }
      #cedulearn #voca-card-study .card-wrap .card-item.center .active-btn button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 287px;
        background: #09b9c6;
        box-shadow: 0px 3px 4px rgba(104, 154, 170, 0.3);
        border-radius: 15px;
        padding: 18px 0px;
        margin: 0 auto; }
        #cedulearn #voca-card-study .card-wrap .card-item.center .active-btn button span {
          display: flex;
          align-items: center; }
          #cedulearn #voca-card-study .card-wrap .card-item.center .active-btn button span:first-child {
            font-size: 20px;
            color: #ffffff; }
            #cedulearn #voca-card-study .card-wrap .card-item.center .active-btn button span:first-child img {
              margin-right: 20px;
              margin-top: 3px; }
          #cedulearn #voca-card-study .card-wrap .card-item.center .active-btn button span:last-child {
            font-size: 12px;
            color: #ffffff; }
            #cedulearn #voca-card-study .card-wrap .card-item.center .active-btn button span:last-child:before {
              content: '';
              display: inline-block;
              width: 1px;
              height: 21px;
              background-color: #84dce2;
              margin: 0 20px; }
      #cedulearn #voca-card-study .card-wrap .card-item.center .card-top {
        width: 100%;
        background: #09b9c6;
        position: relative;
        border-radius: 16px 16px 0 0; }
        #cedulearn #voca-card-study .card-wrap .card-item.center .card-top .bookmark {
          position: absolute;
          top: 48px;
          right: 48px;
          cursor: pointer; }
        #cedulearn #voca-card-study .card-wrap .card-item.center .card-top .back-voca {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 48px 48px 20px; }
          #cedulearn #voca-card-study .card-wrap .card-item.center .card-top .back-voca span {
            font-family: 'Roboto', 'Noto Sans KR';
            font-weight: 900 !important;
            font-size: 54px;
            line-height: 63px;
            color: #ffffff;
            width: auto;
            text-align: center; }
          #cedulearn #voca-card-study .card-wrap .card-item.center .card-top .back-voca button {
            margin-top: 15px; }
        #cedulearn #voca-card-study .card-wrap .card-item.center .card-top .back-means {
          display: flex;
          flex-direction: column;
          gap: 3px;
          padding: 20px 0;
          margin: 0 20px;
          border-top: 1px solid #fff;
          margin-top: 20px; }
          #cedulearn #voca-card-study .card-wrap .card-item.center .card-top .back-means .row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px; }
            #cedulearn #voca-card-study .card-wrap .card-item.center .card-top .back-means .row i {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 23px;
              height: 23px;
              border-radius: 50%;
              color: #fff;
              border: 1px solid #fff;
              font-weight: bold;
              font-size: 12px; }
            #cedulearn #voca-card-study .card-wrap .card-item.center .card-top .back-means .row span {
              font-weight: bold;
              font-size: 24px;
              color: #ffffff; }
      #cedulearn #voca-card-study .card-wrap .card-item.center .card-bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 20px 40px;
        flex: 1; }
        #cedulearn #voca-card-study .card-wrap .card-item.center .card-bottom .text-box {
          display: flex;
          flex-direction: column;
          flex: 1;
          gap: 20px; }
          #cedulearn #voca-card-study .card-wrap .card-item.center .card-bottom .text-box p {
            font-family: 'Roboto', 'Noto Sans KR';
            line-height: 26px;
            font-size: 20px; }
            #cedulearn #voca-card-study .card-wrap .card-item.center .card-bottom .text-box p.eng {
              font-style: normal;
              font-weight: normal;
              color: #504d58; }
              #cedulearn #voca-card-study .card-wrap .card-item.center .card-bottom .text-box p.eng em {
                font-family: 'Roboto', 'Noto Sans KR';
                color: inherit;
                font-size: inherit;
                font-weight: 700; }
            #cedulearn #voca-card-study .card-wrap .card-item.center .card-bottom .text-box p.kor {
              color: #7c7a82; }
        #cedulearn #voca-card-study .card-wrap .card-item.center .card-bottom .active-btn {
          margin-top: 40px; }
          #cedulearn #voca-card-study .card-wrap .card-item.center .card-bottom .active-btn button {
            background: #fff;
            border: 1px solid #09b9c6;
            box-shadow: 0px 3px 4px rgba(104, 154, 170, 0.3);
            border-radius: 15px; }
            #cedulearn #voca-card-study .card-wrap .card-item.center .card-bottom .active-btn button span {
              color: #09b9c6; }
    #cedulearn #voca-card-study .card-wrap .card-item .voca {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex: 1; }
      #cedulearn #voca-card-study .card-wrap .card-item .voca span {
        font-family: 'Roboto', 'Noto Sans KR' !important;
        font-weight: 900 !important;
        font-size: 35px;
        color: #e9e9ea; }
      #cedulearn #voca-card-study .card-wrap .card-item .voca button {
        margin-top: 40px; }

@media screen and (max-width: 1100px) {
  #cedulearn #voca-card-study > .card-wrap > .card-item .voca span {
    font-size: 24px; }
  #cedulearn #voca-card-study > .card-wrap > .card-item.center {
    padding: 20px; }
    #cedulearn #voca-card-study > .card-wrap > .card-item.center .bookmark {
      top: 20px;
      right: 20px;
      width: 18px; }
      #cedulearn #voca-card-study > .card-wrap > .card-item.center .bookmark img {
        width: 100%;
        height: 100%; }
    #cedulearn #voca-card-study > .card-wrap > .card-item.center .voca span {
      font-size: 32px; }
    #cedulearn #voca-card-study > .card-wrap > .card-item.center .active-btn {
      width: 100%; }
      #cedulearn #voca-card-study > .card-wrap > .card-item.center .active-btn button {
        width: 100%; }
        #cedulearn #voca-card-study > .card-wrap > .card-item.center .active-btn button span:first-child img {
          margin-right: 10px; }
        #cedulearn #voca-card-study > .card-wrap > .card-item.center .active-btn button span:last-child {
          display: none; } }

@media screen and (max-width: 1024px) {
  #cedulearn #voca-card-study {
    width: 100%;
    overflow: hidden; }
    #cedulearn #voca-card-study .card-wrap {
      width: 100%; }
      #cedulearn #voca-card-study .card-wrap .card-item {
        display: none;
        height: 46vh;
        box-shadow: 0px 5px 42px rgba(60, 142, 177, 0.15); }
        #cedulearn #voca-card-study .card-wrap .card-item.center {
          display: flex;
          width: 100%;
          min-height: 50vh;
          /*240731 가로모드 검수시트 #43-1*/
          height: auto;
          box-shadow: 0px 5px 42px rgba(60, 142, 177, 0.15);
          padding: 53px 39px; }
          #cedulearn #voca-card-study .card-wrap .card-item.center .voca span {
            color: #504d58; }
          #cedulearn #voca-card-study .card-wrap .card-item.center .voca button {
            margin-top: 20px; }
          #cedulearn #voca-card-study .card-wrap .card-item.center .active-btn button {
            height: 48px;
            max-width: 220px;
            margin: 0 auto;
            width: 220px; }
            #cedulearn #voca-card-study .card-wrap .card-item.center .active-btn button span:first-child {
              font-size: 16px; }
          #cedulearn #voca-card-study .card-wrap .card-item.center .card-top {
            width: 100%;
            background: #09b9c6;
            position: relative;
            border-radius: 16px 16px 0 0; }
            #cedulearn #voca-card-study .card-wrap .card-item.center .card-top .bookmark {
              position: absolute;
              top: 20px;
              right: 20px;
              cursor: pointer;
              width: 18px; }
            #cedulearn #voca-card-study .card-wrap .card-item.center .card-top .back-voca {
              display: flex;
              flex-direction: column;
              align-items: center;
              padding: 24px 24px 15px; }
              #cedulearn #voca-card-study .card-wrap .card-item.center .card-top .back-voca span {
                font-size: 32px;
                line-height: 1.2; }
              #cedulearn #voca-card-study .card-wrap .card-item.center .card-top .back-voca button {
                margin-top: 15px; }
            #cedulearn #voca-card-study .card-wrap .card-item.center .card-top .back-means {
              display: flex;
              flex-direction: column;
              gap: 3px;
              padding: 12px 0;
              margin: 0 12px;
              border-top: 1px solid #e9e9ea;
              margin-top: 0px; }
              #cedulearn #voca-card-study .card-wrap .card-item.center .card-top .back-means .row {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 5px; }
                #cedulearn #voca-card-study .card-wrap .card-item.center .card-top .back-means .row i {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 18px;
                  height: 18px;
                  border-radius: 50%;
                  color: #fff;
                  border: 1px solid #fff;
                  font-weight: bold;
                  font-size: 10px; }
                #cedulearn #voca-card-study .card-wrap .card-item.center .card-top .back-means .row span {
                  font-weight: bold;
                  font-size: 16px;
                  color: #ffffff; }
          #cedulearn #voca-card-study .card-wrap .card-item.center .card-bottom {
            padding: 18px 18px 24px; }
            #cedulearn #voca-card-study .card-wrap .card-item.center .card-bottom .text-box {
              gap: 20px; }
              #cedulearn #voca-card-study .card-wrap .card-item.center .card-bottom .text-box .eng {
                font-size: 15px;
                line-height: 19px; }
                #cedulearn #voca-card-study .card-wrap .card-item.center .card-bottom .text-box .eng em {
                  font-size: 15px; }
              #cedulearn #voca-card-study .card-wrap .card-item.center .card-bottom .text-box .kor {
                font-size: 15px;
                line-height: 19px; }
            #cedulearn #voca-card-study .card-wrap .card-item.center .card-bottom .active-btn {
              margin-top: 16px;
              max-width: 220px; }
        #cedulearn #voca-card-study .card-wrap .card-item.left-card {
          left: -16px;
          border: none;
          border-radius: initial; }
          #cedulearn #voca-card-study .card-wrap .card-item.left-card .voca {
            display: none; }
        #cedulearn #voca-card-study .card-wrap .card-item.right-card {
          right: -16px;
          border: none;
          border-radius: initial; }
          #cedulearn #voca-card-study .card-wrap .card-item.right-card .voca {
            display: none; } }

@media screen and (max-width: 1024px) {
  #cedulearn #voca-card-study .card-wrap {
    padding: 0 16px; } }

@media screen and (max-height: 525px) {
  #cedulearn #voca-card-study .card-wrap .card-item.center {
    min-height: 325px; } }

#before-submit-popup {
  padding: 80px 100px; }
  #before-submit-popup .title {
    padding-bottom: 30px;
    border-bottom: 1px solid #d3d3d5;
    margin-bottom: 40px; }
    #before-submit-popup .title h2 {
      font-size: 26px;
      line-height: 38px;
      color: #24212e; }
      #before-submit-popup .title h2 em {
        font-size: inherit;
        color: inherit;
        text-decoration: underline; }
    #before-submit-popup .title p {
      font-size: 16px;
      line-height: 23px;
      color: #7c7a82; }
  #before-submit-popup .popup-main-content > p {
    margin-bottom: 40px;
    color: #24212e;
    font-size: 16px;
    line-height: 3.5;
    font-weight: 400; }
    #before-submit-popup .popup-main-content > p em {
      font-size: inherit; }
  #before-submit-popup .popup-main-content .input-box {
    margin-bottom: 50px; }
    #before-submit-popup .popup-main-content .input-box p {
      font-size: 16px;
      color: #7c7a82; }
  #before-submit-popup .popup-main-content .btn-size {
    display: flex;
    margin: 0 auto;
    gap: 10px;
    justify-content: center; }
    #before-submit-popup .popup-main-content .btn-size button {
      max-width: 206px;
      margin: unset; }

@media screen and (max-width: 1024px) {
  #before-submit-popup {
    padding: 65px 12px 40px; }
    #before-submit-popup .title {
      padding-bottom: 15px;
      margin-bottom: 30px; }
      #before-submit-popup .title h2 {
        font-size: 20px;
        line-height: 1.4; }
    #before-submit-popup .popup-main-content > p {
      font-size: 13px;
      line-height: 2;
      margin-bottom: 10px; }
    #before-submit-popup .popup-main-content .input-box {
      margin-bottom: 40px; }
      #before-submit-popup .popup-main-content .input-box input[type='checkbox'] + label {
        font-size: 12px; }
    #before-submit-popup .popup-main-content .btn-size button {
      max-width: 106px;
      height: 40px;
      font-size: 13px;
      border-radius: 8px; } }

#voca-match-card-list {
  background: #ffffff;
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
  border-radius: 15px;
  padding: 20px; }
  #voca-match-card-list h3 {
    color: #24212e;
    font-size: 20px; }
    #voca-match-card-list h3 em {
      color: #7681e5;
      font-size: inherit; }
  #voca-match-card-list .card-list {
    margin-top: 30px;
    max-height: 400px;
    overflow: auto; }
    #voca-match-card-list .card-list ul {
      display: flex;
      flex-wrap: wrap;
      gap: 35px 20px;
      padding-right: 20px; }
      #voca-match-card-list .card-list ul li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: calc(25% - 15px);
        background: #ffffff;
        border: 1px solid #09b9c6;
        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
        border-radius: 20px;
        padding: 26px 24px; }
        #voca-match-card-list .card-list ul li .voca {
          font-family: 'Roboto', 'Noto Sans KR' !important;
          font-weight: 900 !important;
          font-size: 24px;
          line-height: 28px;
          color: #24212e;
          margin-bottom: 18px; }
        #voca-match-card-list .card-list ul li .means {
          display: flex;
          flex-direction: column;
          gap: 3px; }
          #voca-match-card-list .card-list ul li .means .row {
            display: flex;
            align-items: center;
            gap: 5px; }
            #voca-match-card-list .card-list ul li .means .row i {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 20px;
              height: 20px;
              border-radius: 50%;
              border: 1px solid #504d58; }

@media screen and (max-width: 1024px) {
  #voca-match-card-list .card-list ul {
    padding-right: 0;
    gap: 20px; }
    #voca-match-card-list .card-list ul li {
      width: 100%;
      flex-direction: unset;
      justify-content: space-between; }
      #voca-match-card-list .card-list ul li .voca {
        font-size: 18px;
        margin-bottom: 0;
        display: inline-block;
        width: calc(40% - 10px);
        text-align: center; }
      #voca-match-card-list .card-list ul li .means {
        gap: 14px;
        width: calc(60% - 10px); }
        #voca-match-card-list .card-list ul li .means .row i {
          width: 18px;
          height: 18px;
          font-size: 10px; }
  #voca-match-card-list h3 {
    font-size: 14px; } }

.omr-rating2 {
  padding: 6px 0;
  border: 1px solid #7c7a82;
  border-radius: 15px; }
  .omr-rating2.yet-mark {
    border-color: #ff5050; }
  .omr-rating2.o {
    border: 3px solid #09b9c6; }
  .omr-rating2.x {
    border: 3px solid #ff5050; }
  .omr-rating2 ul {
    width: 100%;
    display: flex; }
    .omr-rating2 ul.unable-click li input[type='checkbox'] + label {
      pointer-events: none; }
    .omr-rating2 ul li {
      flex: 1;
      display: flex;
      justify-content: center; }
      .omr-rating2 ul li input[type='checkbox'] + label {
        display: block;
        width: 47px;
        height: 47px;
        border: 1px solid #a7a6ab;
        box-sizing: border-box;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 25px;
        font-weight: 400;
        font-family: 'Inter', 'Noto Sans KR';
        color: #a7a6ab;
        cursor: pointer; }
      .omr-rating2 ul li input[type='checkbox']:checked + label {
        background: #09b9c6;
        border: 1px solid #09b9c6;
        color: #fff; }
      .omr-rating2 ul li.correct input[type='checkbox'] + label {
        border: 1px solid #09b9c6;
        background: #09b9c6;
        color: #fff; }
      .omr-rating2 ul li.origin input[type='checkbox'] + label {
        border: 3px solid #ff5050;
        color: #ff5050; }

@media screen and (max-width: 1024px) {
  .omr-rating2.x {
    border-width: 2px; }
  .omr-rating2 ul li input[type='checkbox'] + label {
    width: 26px;
    height: 26px;
    font-size: 16px; } }

.create_content_pop .pop_cont {
  padding: 35px 61px 46px 63px; }
  .create_content_pop .pop_cont .card_title {
    display: flex;
    height: 65px;
    font-weight: 700;
    font-size: 32px;
    color: #09b9c6;
    justify-content: center;
    align-items: center; }
  .create_content_pop .pop_cont h2 {
    font-size: 26px;
    font-weight: 700;
    color: #24212e;
    margin-bottom: 30px; }
    .create_content_pop .pop_cont h2 span {
      font-size: 22px;
      font-weight: 700;
      color: #7681e5; }
  .create_content_pop .pop_cont .card_ul {
    display: flex;
    margin-top: 38px; }
    .create_content_pop .pop_cont .card_ul > li {
      width: 194px;
      border-radius: 15px;
      border: 4px solid transparent;
      margin-right: 36px;
      box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
      margin-right: 36px; }
      .create_content_pop .pop_cont .card_ul > li.on {
        border: 4px solid #09b9c6; }
      .create_content_pop .pop_cont .card_ul > li:last-of-type {
        margin-right: 0px; }
      .create_content_pop .pop_cont .card_ul > li > p {
        line-height: 70px;
        color: #fff;
        font-size: 20px;
        font-weight: 500;
        border-radius: 13px 13px 0 0; }
      .create_content_pop .pop_cont .card_ul > li > div {
        padding: 15px 20px 20px;
        text-align: center; }
        .create_content_pop .pop_cont .card_ul > li > div .step,
        .create_content_pop .pop_cont .card_ul > li > div .step_title {
          font-size: 16px;
          font-weight: 700;
          line-height: 28px; }
          .create_content_pop .pop_cont .card_ul > li > div .step.active,
          .create_content_pop .pop_cont .card_ul > li > div .step_title.active {
            color: #09b9c6; }
        .create_content_pop .pop_cont .card_ul > li > div .image_area {
          margin-top: 13px;
          background-color: #f7f8fc;
          border-radius: 7px;
          padding: 6px; }
          .create_content_pop .pop_cont .card_ul > li > div .image_area img {
            width: 100%; }
  .create_content_pop .pop_cont .step_info {
    margin: 40px 0px;
    text-align: center; }
    .create_content_pop .pop_cont .step_info .info_main {
      font-size: 21px;
      font-weight: 700;
      line-height: 28px; }
    .create_content_pop .pop_cont .step_info .info_sub {
      margin-top: 20px;
      font-size: 21px;
      font-weight: 500;
      line-height: 28px;
      color: #000000; }
  .create_content_pop .pop_cont .save_btn {
    margin-top: 17px;
    text-align: center; }
    .create_content_pop .pop_cont .save_btn button {
      display: inline-block;
      width: 106px;
      height: 40px;
      text-align: center;
      font-size: 13px; }
      .create_content_pop .pop_cont .save_btn button + button {
        margin-left: 20px; }

#teacher-asign-class-popup {
  padding: 0 32px; }
  #teacher-asign-class-popup .title h2 {
    font-size: 24px;
    line-height: 34px;
    color: #24212e;
    margin-bottom: 8px; }
  #teacher-asign-class-popup .title .title-desc {
    display: flex;
    align-items: flex-end;
    justify-content: space-between; }
    #teacher-asign-class-popup .title .title-desc p {
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      color: #504d58; }
      #teacher-asign-class-popup .title .title-desc p em {
        font-size: 12px;
        color: #ff0000;
        margin-top: 3px; }
    #teacher-asign-class-popup .title .title-desc button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100px;
      height: 34px;
      border: 1px solid #ff5050;
      box-sizing: border-box;
      border-radius: 10px;
      font-size: 13px;
      color: #ff5050; }
  #teacher-asign-class-popup .popup-main-content .required {
    font-size: 12px;
    text-align: end;
    color: #ff84b0;
    margin-bottom: 2px;
    margin-top: 20px; }
  #teacher-asign-class-popup .popup-main-content .popup-form-box {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0px 0 30px; }
    #teacher-asign-class-popup .popup-main-content .popup-form-box.margin {
      margin-top: 24px;
      margin-bottom: 32px; }
    #teacher-asign-class-popup .popup-main-content .popup-form-box dl dt span {
      display: block;
      color: #7c7a82;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      margin-bottom: 8px; }
      #teacher-asign-class-popup .popup-main-content .popup-form-box dl dt span em {
        font: inherit;
        color: #ff5050; }
    #teacher-asign-class-popup .popup-main-content .popup-form-box dl dd {
      width: 100%;
      flex: 1; }
      #teacher-asign-class-popup .popup-main-content .popup-form-box dl dd .header-color {
        width: 288px;
        transform: translateY(2px); }
        #teacher-asign-class-popup .popup-main-content .popup-form-box dl dd .header-color input {
          display: none; }
        #teacher-asign-class-popup .popup-main-content .popup-form-box dl dd .header-color label {
          display: inline-block;
          position: relative;
          width: 38px;
          height: 38px;
          border-radius: 50%;
          border: 2px solid #fff;
          cursor: pointer; }
          #teacher-asign-class-popup .popup-main-content .popup-form-box dl dd .header-color label:not(:last-of-type) {
            margin-right: 12px; }
          #teacher-asign-class-popup .popup-main-content .popup-form-box dl dd .header-color label span {
            display: inline-block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 30px;
            height: 30px;
            border-radius: 50%; }
            #teacher-asign-class-popup .popup-main-content .popup-form-box dl dd .header-color label span.red {
              background: #ff5050; }
            #teacher-asign-class-popup .popup-main-content .popup-form-box dl dd .header-color label span.pink {
              background: #ff84b0; }
            #teacher-asign-class-popup .popup-main-content .popup-form-box dl dd .header-color label span.orange {
              background: #ffaa04; }
            #teacher-asign-class-popup .popup-main-content .popup-form-box dl dd .header-color label span.cyan {
              background: #09b9c6; }
            #teacher-asign-class-popup .popup-main-content .popup-form-box dl dd .header-color label span.blue {
              background: #22a4ed; }
            #teacher-asign-class-popup .popup-main-content .popup-form-box dl dd .header-color label span.purple {
              background: #7681e5; }
        #teacher-asign-class-popup .popup-main-content .popup-form-box dl dd .header-color input[type='radio']:checked + label {
          border: 2px solid #7c7a82; }
      #teacher-asign-class-popup .popup-main-content .popup-form-box dl dd .call-number {
        display: flex;
        align-items: center; }
        #teacher-asign-class-popup .popup-main-content .popup-form-box dl dd .call-number i {
          width: 6px;
          margin: 0 6px;
          color: #7c7a82; }
        #teacher-asign-class-popup .popup-main-content .popup-form-box dl dd .call-number .input-size {
          width: 134px; }
      #teacher-asign-class-popup .popup-main-content .popup-form-box dl dd .address {
        display: flex;
        flex-wrap: wrap;
        gap: 10px; }
        #teacher-asign-class-popup .popup-main-content .popup-form-box dl dd .address .input-size {
          width: 288px; }
        #teacher-asign-class-popup .popup-main-content .popup-form-box dl dd .address .btn-size {
          width: 134px; }
      #teacher-asign-class-popup .popup-main-content .popup-form-box dl dd .upload button {
        width: 134px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 500;
        font-size: 14px;
        color: #7681e5;
        background: #ffffff;
        border: 1px solid #7681e5;
        box-sizing: border-box;
        border-radius: 10px;
        padding: 0 16px; }
      #teacher-asign-class-popup .popup-main-content .popup-form-box dl dd .upload p {
        font-size: 12px;
        line-height: 18px;
        color: #a7a6ab;
        margin-top: 6px; }
  #teacher-asign-class-popup .popup-main-content .btn-size {
    width: 100%;
    max-width: 347px;
    margin: 0 auto; }
    #teacher-asign-class-popup .popup-main-content .btn-size.twin-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 20px; }
      #teacher-asign-class-popup .popup-main-content .btn-size.twin-btn button {
        width: 120px;
        margin: initial; }

@media screen and (max-width: 1024px) {
  #teacher-asign-class-popup {
    padding: 0 16px; }
    #teacher-asign-class-popup .title .title-desc {
      font-size: 13px; }
    #teacher-asign-class-popup .popup-main-content .popup-form-box.margin {
      margin-top: 20px;
      margin-bottom: 30px; }
    #teacher-asign-class-popup .popup-main-content .popup-form-box dl {
      flex-direction: column;
      gap: 10px; }
      #teacher-asign-class-popup .popup-main-content .popup-form-box dl dt {
        width: 100%;
        padding-top: 0; }
        #teacher-asign-class-popup .popup-main-content .popup-form-box dl dt span {
          font-size: 14px; }
      #teacher-asign-class-popup .popup-main-content .popup-form-box dl dd .name {
        width: 100%; } }

.new_popup_wrap.card_reg_pop .pop_inner {
  max-height: none; }

.new_popup_wrap.card_reg_pop #auto-payment-terms .pop-main-content .terms-wrapper {
  border: 1px solid #e9e9ea;
  border-radius: 10px;
  padding: 20px; }
  .new_popup_wrap.card_reg_pop #auto-payment-terms .pop-main-content .terms-wrapper > div {
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    margin-bottom: 10px; }

.new_popup_wrap.card_reg_pop #auto-payment-terms .btn-size {
  margin-top: 50px;
  display: flex;
  justify-content: center; }
  .new_popup_wrap.card_reg_pop #auto-payment-terms .btn-size button {
    max-width: 206px;
    margin: unset; }
    .new_popup_wrap.card_reg_pop #auto-payment-terms .btn-size button:first-of-type {
      margin-right: 10px; }

.img_add_btn {
  position: relative; }

.img_add_pop {
  width: 500px;
  position: absolute;
  left: -134px;
  bottom: -10px;
  z-index: 10;
  transform: translate(-50%, 100%);
  min-height: 300px;
  border: 1px solid #e9e9ea;
  background-color: #fff;
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  padding: 20px 32px 30px 32px; }
  .img_add_pop .img_url::after {
    content: '';
    display: block;
    clear: both; }
  .img_add_pop .img_url .input-component-box {
    width: calc(100% - 124px);
    float: left; }
    .img_add_pop .img_url .input-component-box .input-wrapper {
      height: 40px;
      border-color: #d3d3d5; }
  .img_add_pop .img_url button {
    width: 114px;
    float: right;
    height: 40px; }
    .img_add_pop .img_url button img {
      width: 12px; }
  .img_add_pop .img_exposure {
    min-height: 400px;
    border: 1px solid #d3d3d5;
    border-radius: 10px;
    margin-top: 10px;
    position: relative; }
    .img_add_pop .img_exposure p {
      width: 100%;
      text-align: center;
      font-size: 16px;
      color: #a7a6ab;
      position: absolute;
      top: 50%;
      transform: translateY(-50%); }
  .img_add_pop .btns {
    margin-top: 30px; }
    .img_add_pop .btns button {
      width: 112px;
      height: 40px;
      display: inline-block; }
      .img_add_pop .btns button + button {
        margin-left: 20px; }

#pc-nav {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 124px;
  bottom: 0;
  width: 384px;
  right: -384px;
  background: #fff;
  box-shadow: 0px 0px 21px rgba(53, 54, 116, 0.08);
  border-radius: 21px 0 0 21px;
  padding: 40px 12px 40px 50px;
  transition: 0.21s;
  overflow: auto;
  /* ios fixed 이슈 관련 */ }
  @media (orientation: landscape) {
    #pc-nav {
      position: fixed; } }
  @media (orientation: portrait) {
    #pc-nav {
      position: fixed; } }
  #pc-nav.active {
    right: 0; }
  #pc-nav .nav-closer {
    position: fixed;
    top: 123px;
    left: 0;
    right: 384px;
    bottom: 0;
    z-index: 12;
    display: none;
    /* ios fixed 이슈 관련 */ }
    @media (orientation: landscape) {
      #pc-nav .nav-closer {
        position: fixed; } }
    @media (orientation: portrait) {
      #pc-nav .nav-closer {
        position: fixed; } }
    #pc-nav .nav-closer.active {
      display: block; }
  #pc-nav .nav-inner {
    padding-right: 15px; }
  #pc-nav .nav-user-box {
    display: flex;
    justify-content: space-between;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid #d3d3d5; }
    #pc-nav .nav-user-box .user-account {
      display: flex;
      align-items: center;
      width: 100%; }
      #pc-nav .nav-user-box .user-account .border {
        display: inline-block;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        padding: 2px; }
        #pc-nav .nav-user-box .user-account .border.book {
          background-image: linear-gradient(to right, #ff7a00, #896bde); }
        #pc-nav .nav-user-box .user-account .border.student {
          background-image: linear-gradient(to right, #22a4ed, #22a4ed); }
        #pc-nav .nav-user-box .user-account .border.free {
          background-image: linear-gradient(to right, #231055, #231055); }
        #pc-nav .nav-user-box .user-account .border.premium {
          background-image: linear-gradient(to right, #35e77d, #34b2e9); }
        #pc-nav .nav-user-box .user-account .border .user-profile {
          position: relative;
          width: 100%;
          height: 100%;
          padding: 3px;
          background: #fff;
          border-radius: inherit; }
          #pc-nav .nav-user-box .user-account .border .user-profile img {
            display: block; }
      #pc-nav .nav-user-box .user-account .user-desc {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        width: 100%;
        flex: 1; }
        #pc-nav .nav-user-box .user-account .user-desc .user-name {
          margin-left: 11px; }
          #pc-nav .nav-user-box .user-account .user-desc .user-name strong {
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent; }
            #pc-nav .nav-user-box .user-account .user-desc .user-name strong.book {
              background-image: linear-gradient(to right, #ff7a00, #896bde); }
            #pc-nav .nav-user-box .user-account .user-desc .user-name strong.student {
              background-image: linear-gradient(to right, #22a4ed, #22a4ed); }
            #pc-nav .nav-user-box .user-account .user-desc .user-name strong.free {
              background-image: linear-gradient(to right, #231055, #231055); }
            #pc-nav .nav-user-box .user-account .user-desc .user-name strong.premium {
              background-image: linear-gradient(to right, #35e77d, #34b2e9); }
          #pc-nav .nav-user-box .user-account .user-desc .user-name p {
            font-size: 20px;
            line-height: 29px;
            color: #24212e; }
      #pc-nav .nav-user-box .user-account .user-setting {
        display: flex;
        align-items: flex-end;
        cursor: pointer;
        transform: translateY(-3px); }
  #pc-nav .nav-menu-list ul {
    display: flex;
    flex-direction: column; }
    #pc-nav .nav-menu-list ul li {
      display: flex;
      align-items: center;
      font-size: 20px;
      line-height: 29px;
      cursor: pointer; }
      #pc-nav .nav-menu-list ul li:not(:last-of-type) {
        margin-bottom: 30px; }
      #pc-nav .nav-menu-list ul li img {
        margin-right: 8px; }

#msg-noti {
  background: #ffffff;
  border: 1px solid #d3d3d5;
  box-sizing: border-box;
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  height: 840px;
  display: flex;
  flex-direction: column;
  flex: 1; }
  #msg-noti .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e9e9ea;
    padding: 16px 24px; }
    #msg-noti .head .user {
      display: flex;
      align-items: center; }
      #msg-noti .head .user .name {
        margin-left: 10px;
        font-weight: 700;
        font-size: 22px;
        color: #504d58;
        width: 100%; }
  #msg-noti .body {
    display: flex;
    flex-direction: column;
    flex: 1; }
    #msg-noti .body .dialog-box {
      overflow: auto;
      margin: 20px 0;
      padding: 0 15px;
      max-height: 620px;
      height: 100%; }
      #msg-noti .body .dialog-box textarea {
        width: 100%;
        height: 99%;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        color: #24212e; }
        #msg-noti .body .dialog-box textarea::placeholder {
          font: inherit;
          color: #d3d3d5; }
    #msg-noti .body .chat-input {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      height: 68px;
      padding: 0 24px;
      border-top: 1px solid #e9e9ea;
      margin-top: auto; }
      #msg-noti .body .chat-input input {
        all: unset;
        font-size: 16px;
        padding: 20px 0;
        width: 100%; }
      #msg-noti .body .chat-input .btn-wrap {
        display: flex;
        gap: 16px; }
        #msg-noti .body .chat-input .btn-wrap button:nth-of-type(2) {
          width: 76px;
          height: 34px;
          font-size: 14px;
          font-weight: normal;
          border-radius: 8px; }
      #msg-noti .body .chat-input .add-file img {
        height: 32px; }
  #msg-noti.mb-msg-noti {
    height: calc(100vh - 105px);
    border: none;
    box-shadow: none;
    background-color: #ffffff; }
    #msg-noti.mb-msg-noti .body .write-noti-area {
      padding: 20px; }
    #msg-noti.mb-msg-noti .body .chat-input {
      border-top: 1px solid #e9e9ea; }
      #msg-noti.mb-msg-noti .body .chat-input .btn-wrap .add-file {
        width: 32px;
        height: 32px;
        position: relative; }
        #msg-noti.mb-msg-noti .body .chat-input .btn-wrap .add-file img {
          width: 16px;
          height: 28px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%); }

@media screen and (max-width: 1024px) {
  #msg-noti {
    width: 100%;
    height: calc(100vh - 112px);
    border-radius: initial;
    background: #fbfcff;
    overflow: auto; }
    #msg-noti .body .write-noti-area {
      padding: 20px 5px;
      height: 100%; }
      #msg-noti .body .write-noti-area textarea {
        width: 100%;
        height: 100%;
        font-size: 13px; }
    #msg-noti .body .chat-input {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 0;
      height: 57px;
      background: #fff;
      padding: 20px;
      /* ios fixed 이슈 관련 */ } }
    @media screen and (max-width: 1024px) and (orientation: landscape) {
      #msg-noti .body .chat-input {
        position: fixed; } }
    @media screen and (max-width: 1024px) and (orientation: portrait) {
      #msg-noti .body .chat-input {
        position: fixed; } }

@media screen and (max-width: 1024px) {
      #msg-noti .body .chat-input input {
        order: 2; }
      #msg-noti .body .chat-input .btn-wrap {
        order: 1; }
        #msg-noti .body .chat-input .btn-wrap .add-file {
          margin-right: 15px; }
          #msg-noti .body .chat-input .btn-wrap .add-file img {
            width: 17px;
            height: 29px; }
      #msg-noti .body .chat-input .send-btn {
        order: 3;
        margin-left: auto; }
        #msg-noti .body .chat-input .send-btn button {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 37px;
          height: 37px;
          border-radius: 50%;
          padding: 0 11px 0 8px;
          background: #7681e5; }
          #msg-noti .body .chat-input .send-btn button img {
            display: inline-block;
            width: 18px;
            height: 18px; } }

#free-class-popup-area {
  width: 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  /* ios fixed 이슈 관련 */ }
  @media (orientation: landscape) {
    #free-class-popup-area {
      position: fixed; } }
  @media (orientation: portrait) {
    #free-class-popup-area {
      position: fixed; } }

#free-class-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 88%;
  height: 80%;
  box-sizing: border-box;
  border-radius: 8px;
  box-shadow: 0px 4px 21px 0px #35367414;
  background: white;
  overflow: auto; }
  #free-class-popup .close-btn {
    position: sticky;
    left: 100%;
    top: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: #ffffff;
    border: 1px solid #09b9c6;
    box-sizing: border-box;
    box-shadow: 0px 4px 21px rgba(53, 54, 116, 0.08); }
  #free-class-popup .free-class-popup-wrap {
    padding: 0 80px 40px 80px; }
    #free-class-popup .free-class-popup-wrap .title-box {
      text-align: center;
      padding: 40px 0; }
      #free-class-popup .free-class-popup-wrap .title-box p {
        font-size: 20px;
        padding-bottom: 20px; }
      #free-class-popup .free-class-popup-wrap .title-box h3 {
        font-size: 40px;
        font-weight: bold; }
    #free-class-popup .free-class-popup-wrap .add-box {
      display: flex;
      align-items: flex-end;
      justify-content: space-between; }
      #free-class-popup .free-class-popup-wrap .add-box p {
        font-size: 20px; }
      #free-class-popup .free-class-popup-wrap .add-box button {
        width: 204px;
        height: 65px !important;
        margin: 0; }
    #free-class-popup .free-class-popup-wrap .btn-add-free-class-bottom {
      width: 204px;
      margin: 0 auto;
      height: 65px !important; }

@media screen and (max-width: 750px) {
  #free-class-popup .free-class-popup-wrap {
    padding: 0 20px 40px 20px; }
    #free-class-popup .free-class-popup-wrap .title-box h3 {
      font-size: 30px; }
    #free-class-popup .free-class-popup-wrap .add-box {
      display: block; }
      #free-class-popup .free-class-popup-wrap .add-box p {
        font-size: 16px;
        padding-bottom: 12px; }
      #free-class-popup .free-class-popup-wrap .add-box button {
        width: 100%;
        height: 50px !important;
        font-size: 18px !important; } }

@media screen and (max-width: 480px) {
  #free-class-popup .free-class-popup-wrap {
    padding: 0 8px 40px 8px; }
    #free-class-popup .free-class-popup-wrap .title-box h3 {
      font-size: 24px; }
    #free-class-popup .free-class-popup-wrap .add-box {
      display: block; }
      #free-class-popup .free-class-popup-wrap .add-box p {
        font-size: 12px;
        padding-bottom: 12px; }
      #free-class-popup .free-class-popup-wrap .add-box button {
        width: 100%;
        height: 40px !important;
        font-size: 16px !important; } }

#multi-campus-table {
  padding: 20px 0 40px 0; }
  #multi-campus-table .btn-check-all {
    display: flex;
    align-items: center;
    padding: 0 16px 0 8px;
    margin-bottom: 16px; }
    #multi-campus-table .btn-check-all label {
      color: #09b9c6;
      border: 1px solid #09b9c6 !important; }
    #multi-campus-table .btn-check-all span {
      color: #09b9c6;
      padding-left: 8px; }
    #multi-campus-table .btn-check-all input:checked + label::after {
      content: '';
      font-size: 13px;
      font-weight: bold;
      width: 16px;
      height: 16px;
      text-align: center;
      position: absolute;
      left: -1px;
      top: -1px;
      background: url("../../../img/icon/icon_chk_c.svg") no-repeat center/10px; }
  #multi-campus-table .mobile-btn-check-all {
    line-height: 30px;
    border-radius: 8px; }
    #multi-campus-table .mobile-btn-check-all span {
      font-size: 13px; }
  #multi-campus-table .table-wrap {
    display: flex;
    justify-content: space-between; }
    #multi-campus-table .table-wrap table {
      width: 47%;
      font-size: 14px;
      height: fit-content;
      min-height: 310px;
      position: relative; }
      #multi-campus-table .table-wrap table thead th.th-head {
        width: 40px; }
      #multi-campus-table .table-wrap table thead th {
        color: #000000;
        text-align: center;
        background: #e9e9ea;
        padding: 12px 4px; }
      #multi-campus-table .table-wrap table tbody tr.off td {
        color: #d3d3d5; }
      #multi-campus-table .table-wrap table tbody tr {
        cursor: pointer; }
      #multi-campus-table .table-wrap table tbody td {
        text-align: center;
        padding: 10px 4px;
        border-bottom: 1px solid #d3d3d5;
        height: 55px; }
      #multi-campus-table .table-wrap table tbody .table-class-name {
        color: #000000;
        font-weight: bold; }
      #multi-campus-table .table-wrap table .no-data {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: max-content; }
        #multi-campus-table .table-wrap table .no-data td {
          border: none;
          color: #000000; }
    #multi-campus-table .table-wrap table.mobile-version {
      width: 100%; }
      #multi-campus-table .table-wrap table.mobile-version thead th {
        border-top: 0px;
        font-size: 13px; }
      #multi-campus-table .table-wrap table.mobile-version thead th:nth-child(1) {
        border-radius: 18px 0 0 0; }
      #multi-campus-table .table-wrap table.mobile-version thead th:nth-child(4) {
        border-radius: 0 18px 0 0; }
  #multi-campus-table input[type='checkbox'] + label {
    margin-left: 8px;
    display: block;
    width: 16px;
    height: 16px;
    border: 1px solid #7c7a82;
    position: relative;
    background: white; }
  #multi-campus-table input:disabled + label {
    background: #d3d3d5;
    border: 1px solid #d3d3d5; }
  #multi-campus-table input:disabled + label::after {
    content: ''; }
  #multi-campus-table input:checked + label::after {
    content: '';
    font-size: 13px;
    font-weight: bold;
    width: 16px;
    height: 16px;
    text-align: center;
    position: absolute;
    left: -1px;
    top: -1px;
    background: url("../../../img/icon/icon_chk.png") no-repeat center/10px; }

#mobile-more-view .page-inner {
  padding-top: 56px; }
  #mobile-more-view .page-inner .title {
    padding: 30px 16px 24px; }
    #mobile-more-view .page-inner .title h2 {
      font-size: 20px;
      color: #000; }
  #mobile-more-view .page-inner .company-desc-link {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fbfb;
    box-shadow: inset 0px 2px 5px rgba(56, 126, 131, 0.05);
    height: 57px; }
    #mobile-more-view .page-inner .company-desc-link a span {
      font-size: 12px;
      line-height: 31.2px;
      color: #7c7a82; }
    #mobile-more-view .page-inner .company-desc-link a img {
      margin-left: 5px; }
  #mobile-more-view .page-inner .link-box {
    padding: 0 16px 27px;
    margin-bottom: 20px;
    border-bottom: 1px solid #d3d3d5; }
    #mobile-more-view .page-inner .link-box .dt {
      color: #8e8e8e;
      margin-bottom: 10px; }
    #mobile-more-view .page-inner .link-box .row-box .item-row {
      display: flex;
      align-items: center;
      justify-content: space-between; }
      #mobile-more-view .page-inner .link-box .row-box .item-row span {
        line-height: 42px;
        color: #0d0d0d;
        font-size: 16px; }
  #mobile-more-view .page-inner .nav-user-box {
    display: flex;
    justify-content: space-between;
    padding: 0 16px 27px;
    margin-bottom: 20px;
    border-bottom: 1px solid #d3d3d5; }
    #mobile-more-view .page-inner .nav-user-box .user-account {
      display: flex;
      align-items: center;
      width: 100%; }
      #mobile-more-view .page-inner .nav-user-box .user-account .border {
        display: inline-block;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        padding: 2px; }
        #mobile-more-view .page-inner .nav-user-box .user-account .border .user-profile {
          position: relative;
          width: 100%;
          height: 100%;
          padding: 3px;
          background: #fff;
          border-radius: inherit; }
          #mobile-more-view .page-inner .nav-user-box .user-account .border .user-profile img {
            display: block; }
      #mobile-more-view .page-inner .nav-user-box .user-account .user-desc {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        flex: 1; }
        #mobile-more-view .page-inner .nav-user-box .user-account .user-desc .user-name {
          margin-left: 11px; }
          #mobile-more-view .page-inner .nav-user-box .user-account .user-desc .user-name strong {
            font-size: 15px;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent; }
            #mobile-more-view .page-inner .nav-user-box .user-account .user-desc .user-name strong.book {
              background-image: linear-gradient(to right, #ff7a00, #896bde); }
            #mobile-more-view .page-inner .nav-user-box .user-account .user-desc .user-name strong.student {
              background-image: linear-gradient(to right, #22a4ed, #22a4ed); }
            #mobile-more-view .page-inner .nav-user-box .user-account .user-desc .user-name strong.free {
              background-image: linear-gradient(to right, #231055, #231055); }
            #mobile-more-view .page-inner .nav-user-box .user-account .user-desc .user-name strong.premium {
              background-image: linear-gradient(to right, #35e77d, #34b2e9); }
          #mobile-more-view .page-inner .nav-user-box .user-account .user-desc .user-name p {
            font-size: 16px;
            line-height: 29px;
            color: #24212e; }
      #mobile-more-view .page-inner .nav-user-box .user-account .user-setting {
        display: flex;
        align-items: flex-end;
        cursor: pointer;
        transform: translateY(-3px); }

#mobile-company-detail .page-inner {
  padding: 56px 27px; }
  #mobile-company-detail .page-inner .title {
    padding: 24px 0 5px; }
    #mobile-company-detail .page-inner .title h2 {
      font-size: 24px;
      line-height: 29px;
      color: #24212e;
      font-weight: 800; }
  #mobile-company-detail .page-inner .dl-box {
    margin-bottom: 15px; }
    #mobile-company-detail .page-inner .dl-box .dl-item {
      display: flex; }
      #mobile-company-detail .page-inner .dl-box .dl-item dl {
        display: flex;
        align-items: center; }
        #mobile-company-detail .page-inner .dl-box .dl-item dl dt,
        #mobile-company-detail .page-inner .dl-box .dl-item dl dd {
          font-weight: 500;
          font-size: 11px;
          line-height: 16px;
          color: #7c7a82; }
  #mobile-company-detail .page-inner .sub-title {
    padding-bottom: 6px;
    border-bottom: 1px solid #e9e9ea;
    margin-bottom: 16px; }
    #mobile-company-detail .page-inner .sub-title h3 {
      font-weight: 500;
      font-size: 12px;
      line-height: 17px;
      color: #7c7a82; }

#mobile-acess-right .page-inner {
  padding: 56px 0px; }
  #mobile-acess-right .page-inner .notice-box {
    text-align: center;
    padding: 30px 0; }
    #mobile-acess-right .page-inner .notice-box span {
      font-size: 12px;
      color: #7c7a82;
      font-weight: 500; }
      #mobile-acess-right .page-inner .notice-box span em {
        font-weight: inherit;
        font-size: inherit;
        color: #24212e; }
  #mobile-acess-right .page-inner .detail-box {
    padding: 20px 16px;
    border-top: 1px solid #000; }
    #mobile-acess-right .page-inner .detail-box h3 {
      line-height: 21px;
      color: #21212e;
      margin-bottom: 40px; }
    #mobile-acess-right .page-inner .detail-box .item-notice-box .item-row {
      display: flex;
      align-items: center;
      padding-bottom: 40px;
      border-bottom: 1px solid #d3d3d5;
      margin-bottom: 40px; }
      #mobile-acess-right .page-inner .detail-box .item-notice-box .item-row.last {
        margin-bottom: 10px; }
      #mobile-acess-right .page-inner .detail-box .item-notice-box .item-row .item-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px; }
      #mobile-acess-right .page-inner .detail-box .item-notice-box .item-row .desc {
        flex: 1;
        margin-left: 20px; }
        #mobile-acess-right .page-inner .detail-box .item-notice-box .item-row .desc p {
          font-weight: 500;
          line-height: 21px;
          color: #7c7a82;
          padding-top: 5px; }
    #mobile-acess-right .page-inner .detail-box .item-notice-box .sub-text p {
      font-size: 12px;
      line-height: 17px;
      color: #a7a6ab; }
      #mobile-acess-right .page-inner .detail-box .item-notice-box .sub-text p:first-child {
        padding-bottom: 5px; }
  #mobile-acess-right .page-inner .btn-box {
    margin-top: 30px;
    padding: 0 16px; }

input::placeholder {
  color: #d3d3d5; }

.vertical_top {
  vertical-align: top; }

.inline_block {
  display: inline-block;
  width: calc(100% - 100px); }
  .inline_block .big_tag {
    margin-bottom: 20px;
    padding-bottom: 15px; }
    .inline_block .big_tag .big_tag {
      margin-right: 0 !important; }

.omr_marking {
  height: calc(100% - 160px);
  background: #fff;
  border-radius: 15px;
  margin: 30px 0;
  padding: 25px;
  overflow-y: auto; }
  .omr_marking li {
    margin-top: 20px; }
    .omr_marking li:first-of-type {
      margin-top: 0; }
    .omr_marking li > div {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 8px 25px;
      border-radius: 8px;
      border: 1px solid #09b9c6; }
      .omr_marking li > div:after {
        content: '';
        display: block;
        clear: both; }
      .omr_marking li > div > span {
        font-size: 20px;
        font-weight: 500;
        font-family: 'Inter', sans-serif;
        display: inline-block;
        width: 40px;
        line-height: 32px; }
  .omr_marking .omr_radio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 40px); }
    .omr_marking .omr_radio label i {
      width: 32px;
      height: 32px;
      border: 1px solid #a7a6ab;
      text-align: center;
      line-height: 28px;
      margin-right: 0;
      border-radius: 50%;
      cursor: pointer; }
    .omr_marking .omr_radio label:first-of-type {
      margin-left: 0; }
    .omr_marking .omr_radio input[type='checkbox']:checked + label i {
      background: #09b9c6;
      border-color: #09b9c6;
      color: #fff; }
    .omr_marking .omr_radio input[type='checkbox']:checked + label i:after {
      display: none; }
    .omr_marking .omr_radio .input-component-box .input-wrapper {
      height: 32px;
      font-size: 16px;
      font-family: 'Inter', sans-serif; }
    .omr_marking .omr_radio .input-component-box + .input-component-box {
      margin-top: 6px; }
    .omr_marking .omr_radio button + .input-component-box {
      margin-top: 16px; }
  .omr_marking.radio_problem > div:not(:first-child) {
    margin-top: 50px; }
  .omr_marking.radio_problem .tag {
    display: inline-block;
    border: 1px solid #09b9c6;
    box-sizing: border-box;
    border-radius: 50px;
    padding: 10px 20px;
    color: #09b9c6;
    margin-bottom: 10px;
    font-weight: 500;
    font-family: 'Inter', 'Noto Sans KR';
    line-height: 1; }
  .omr_marking.radio_problem h2 {
    font-size: 20px;
    color: #504d58;
    word-break: keep-all;
    margin-bottom: 16px; }
  .omr_marking.radio_problem .ql-editor {
    white-space: pre; }
  .omr_marking.radio_problem p {
    font-size: 16px;
    font-family: 'Noto serif', sans-serif;
    line-height: 26px;
    color: #504d58; }
    .omr_marking.radio_problem p span {
      font-size: inherit; }
    .omr_marking.radio_problem p .ql-size-small {
      font-size: 12px !important; }
    .omr_marking.radio_problem p .ql-size-large {
      font-size: 24px !important; }
    .omr_marking.radio_problem p .ql-size-huge {
      font-size: 36px !important; }
    .omr_marking.radio_problem p u {
      font-size: inherit; }
    .omr_marking.radio_problem p.child_notoserif span {
      font-family: inherit; }
  .omr_marking.radio_problem ol {
    margin-top: 30px; }
    .omr_marking.radio_problem ol li {
      margin-top: 16px; }
      .omr_marking.radio_problem ol li label {
        font-size: 16px;
        font-family: 'Noto Serif', sans-serif;
        color: #504d58; }
      .omr_marking.radio_problem ol li input:checked + label {
        color: #09b9c6; }
  .omr_marking.radio_problem .comment {
    margin-top: 50px; }

.mt20 {
  margin-top: 20px; }

.select_input_box {
  display: flex;
  border: 1px solid #6bd5dd;
  border-radius: 15px;
  position: relative;
  height: 70px;
  margin-bottom: 25px; }
  .select_input_box .select {
    width: 170px;
    position: relative;
    background-color: transparent;
    margin-left: -1px; }
    .select_input_box .select:after {
      content: '';
      display: block;
      width: 1px;
      height: 48px;
      background-color: #09b9c6;
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%); }
    .select_input_box .select .select-input {
      border: none;
      height: 70px; }
  .select_input_box .input-component-box {
    width: calc(100% - 170px); }
    .select_input_box .input-component-box .input-wrapper {
      border: none;
      height: 70px;
      background-color: transparent; }
  .select_input_box .search_btn {
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 12px;
    width: 70px;
    height: 70px;
    background: #09b9c6 url("/img/icon/icon_search_w.svg") no-repeat center; }

.container.factory {
  display: flex;
  height: 100vh;
  overflow: hidden;
  min-width: 1200px;
  padding: 123px 0 0;
  position: relative;
  background: #eefafa; }
  .container.factory.main_page {
    overflow-y: auto;
    background-color: #fff; }
    .container.factory.main_page .inner {
      min-height: 780px; }
  .container.factory .select > .select-options.is_open {
    border-color: #6bd5dd; }
  .container.factory .inner {
    padding: 50px 48px 178px;
    background-color: #fff; }
  .container.factory .icon_box {
    display: inline-block;
    width: 24px;
    height: 15.5px;
    background: no-repeat center / contain;
    cursor: pointer; }
    .container.factory .icon_box.disabled {
      cursor: default; }
    .container.factory .icon_box.mideum {
      width: 25px;
      min-width: 25px;
      height: 25px; }
    .container.factory .icon_box.large {
      width: 35px;
      min-width: 35px;
      height: 35px; }
    .container.factory .icon_box.hover_event {
      display: none; }
    .container.factory .icon_box.star_img {
      background-image: url("/img/icon/icon_star.svg"); }
      .container.factory .icon_box.star_img.on {
        background-image: url("/img/icon/icon_star_on.svg"); }
    .container.factory .icon_box.like_img {
      background-image: url("/img/icon/icon_like.svg");
      margin-right: 6px; }
      .container.factory .icon_box.like_img.active {
        background-image: url("/img/icon/icon_like_on.svg"); }
      .container.factory .icon_box.like_img:hover {
        background-image: url("/img/icon/icon_like_on.svg"); }
      .container.factory .icon_box.like_img.disabled {
        cursor: default; }
        .container.factory .icon_box.like_img.disabled:hover {
          background-image: url("/img/icon/icon_like.svg"); }
    .container.factory .icon_box.write_img {
      background-image: url("/img/icon/icon_write_round.svg"); }
    .container.factory .icon_box.x_img {
      background-image: url("/img/icon/icon_x_round.svg"); }
    .container.factory .icon_box.order_img {
      background-image: url("/img/icon/icon_order.svg"); }
    .container.factory .icon_box.preview_img {
      background-image: url("/img/icon/icon_preview.svg"); }
    .container.factory .icon_box.view_img {
      background-image: url("/img/icon/icon_view.svg");
      margin-right: 6px; }
    .container.factory .icon_box.delete_img {
      background-image: url("/img/icon/icon_delete_round.svg"); }
    .container.factory .icon_box + span {
      vertical-align: middle;
      margin-left: 5px;
      font-size: 12px;
      font-weight: 500;
      font-family: 'Inter', 'Noto Sans KR', 'sans-serif'; }
  .container.factory .factory_card_wrap {
    margin-top: 60px;
    width: 100%;
    display: flex; }
    .container.factory .factory_card_wrap .factory_card {
      width: calc(25% - 15px);
      margin-left: 20px; }
      .container.factory .factory_card_wrap .factory_card:first-of-type {
        margin-left: 0; }
  .container.factory .factory_contents_box {
    padding: 50px 40px 0 calc(17.5% + 40px);
    width: calc(100% - 33%);
    border-radius: 0 25px 25px 0;
    box-shadow: 0px 0px 30px rgba(92, 103, 201, 0.1);
    background: #fff;
    transition: all 0.4s;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden; }
    .container.factory .factory_contents_box .title-box {
      display: flex;
      justify-content: space-between; }
      .container.factory .factory_contents_box .title-box button {
        margin-top: 0; }
    .container.factory .factory_contents_box h1 {
      font-size: 40px;
      font-weight: 700;
      color: #24212e;
      margin-bottom: 40px; }
    .container.factory .factory_contents_box .btn_tab {
      margin-top: 20px; }
    .container.factory .factory_contents_box .radio_wrapper {
      margin-top: 30px; }
      .container.factory .factory_contents_box .radio_wrapper li:last-of-type {
        margin-left: 50px; }
    .container.factory .factory_contents_box .search_area li,
    .container.factory .factory_contents_box .search_area .li {
      display: flex;
      margin-top: 20px; }
      .container.factory .factory_contents_box .search_area li:first-of-type,
      .container.factory .factory_contents_box .search_area .li:first-of-type {
        margin-top: 30px; }
      .container.factory .factory_contents_box .search_area li > span,
      .container.factory .factory_contents_box .search_area li span.search_book,
      .container.factory .factory_contents_box .search_area li .display_flex span,
      .container.factory .factory_contents_box .search_area .li > span,
      .container.factory .factory_contents_box .search_area .li span.search_book,
      .container.factory .factory_contents_box .search_area .li .display_flex span {
        width: 80px;
        line-height: 48px;
        font-size: 16px;
        font-weight: 700;
        color: #24212e; }
        .container.factory .factory_contents_box .search_area li > span.width_auto,
        .container.factory .factory_contents_box .search_area li span.search_book.width_auto,
        .container.factory .factory_contents_box .search_area li .display_flex span.width_auto,
        .container.factory .factory_contents_box .search_area .li > span.width_auto,
        .container.factory .factory_contents_box .search_area .li span.search_book.width_auto,
        .container.factory .factory_contents_box .search_area .li .display_flex span.width_auto {
          width: auto; }
        .container.factory .factory_contents_box .search_area li > span.nth_span,
        .container.factory .factory_contents_box .search_area li span.search_book.nth_span,
        .container.factory .factory_contents_box .search_area li .display_flex span.nth_span,
        .container.factory .factory_contents_box .search_area .li > span.nth_span,
        .container.factory .factory_contents_box .search_area .li span.search_book.nth_span,
        .container.factory .factory_contents_box .search_area .li .display_flex span.nth_span {
          width: 105px;
          padding-left: 20px; }
        .container.factory .factory_contents_box .search_area li > span + div,
        .container.factory .factory_contents_box .search_area li span.search_book + div,
        .container.factory .factory_contents_box .search_area li .display_flex span + div,
        .container.factory .factory_contents_box .search_area .li > span + div,
        .container.factory .factory_contents_box .search_area .li span.search_book + div,
        .container.factory .factory_contents_box .search_area .li .display_flex span + div {
          width: calc(100% - 80px);
          position: relative; }
          .container.factory .factory_contents_box .search_area li > span + div img,
          .container.factory .factory_contents_box .search_area li span.search_book + div img,
          .container.factory .factory_contents_box .search_area li .display_flex span + div img,
          .container.factory .factory_contents_box .search_area .li > span + div img,
          .container.factory .factory_contents_box .search_area .li span.search_book + div img,
          .container.factory .factory_contents_box .search_area .li .display_flex span + div img {
            position: absolute;
            top: 50%;
            right: 20px;
            transform: translateY(-50%); }
          .container.factory .factory_contents_box .search_area li > span + div .select,
          .container.factory .factory_contents_box .search_area li span.search_book + div .select,
          .container.factory .factory_contents_box .search_area li .display_flex span + div .select,
          .container.factory .factory_contents_box .search_area .li > span + div .select,
          .container.factory .factory_contents_box .search_area .li span.search_book + div .select,
          .container.factory .factory_contents_box .search_area .li .display_flex span + div .select {
            width: 100%; }
            .container.factory .factory_contents_box .search_area li > span + div .select > .select-input,
            .container.factory .factory_contents_box .search_area li span.search_book + div .select > .select-input,
            .container.factory .factory_contents_box .search_area li .display_flex span + div .select > .select-input,
            .container.factory .factory_contents_box .search_area .li > span + div .select > .select-input,
            .container.factory .factory_contents_box .search_area .li span.search_book + div .select > .select-input,
            .container.factory .factory_contents_box .search_area .li .display_flex span + div .select > .select-input {
              border-color: #09b9c6; }
              .container.factory .factory_contents_box .search_area li > span + div .select > .select-input.placeholder,
              .container.factory .factory_contents_box .search_area li span.search_book + div .select > .select-input.placeholder,
              .container.factory .factory_contents_box .search_area li .display_flex span + div .select > .select-input.placeholder,
              .container.factory .factory_contents_box .search_area .li > span + div .select > .select-input.placeholder,
              .container.factory .factory_contents_box .search_area .li span.search_book + div .select > .select-input.placeholder,
              .container.factory .factory_contents_box .search_area .li .display_flex span + div .select > .select-input.placeholder {
                color: #d3d3d5; }
          .container.factory .factory_contents_box .search_area li > span + div .input-component-box .input-wrapper,
          .container.factory .factory_contents_box .search_area li span.search_book + div .input-component-box .input-wrapper,
          .container.factory .factory_contents_box .search_area li .display_flex span + div .input-component-box .input-wrapper,
          .container.factory .factory_contents_box .search_area .li > span + div .input-component-box .input-wrapper,
          .container.factory .factory_contents_box .search_area .li span.search_book + div .input-component-box .input-wrapper,
          .container.factory .factory_contents_box .search_area .li .display_flex span + div .input-component-box .input-wrapper {
            border-color: #09b9c6; }
      .container.factory .factory_contents_box .search_area li .display_flex,
      .container.factory .factory_contents_box .search_area .li .display_flex {
        display: flex;
        width: 50%; }
      .container.factory .factory_contents_box .search_area li .mini_tag,
      .container.factory .factory_contents_box .search_area .li .mini_tag {
        padding: 4px 0; }
        .container.factory .factory_contents_box .search_area li .mini_tag .tag,
        .container.factory .factory_contents_box .search_area .li .mini_tag .tag {
          color: #7681e5;
          border-color: #7681e5;
          font-size: 14px;
          font-weight: 500;
          border-radius: 20px;
          padding: 0 20px;
          text-align: center;
          line-height: 36px; }
          .container.factory .factory_contents_box .search_area li .mini_tag .tag.on,
          .container.factory .factory_contents_box .search_area .li .mini_tag .tag.on {
            background-color: #7681e5;
            color: #fff; }
    .container.factory .factory_contents_box .search_area .book_info {
      width: calc(100% - 152px); }
      .container.factory .factory_contents_box .search_area .book_info .border_none .input-wrapper {
        border: none; }
    .container.factory .factory_contents_box .search_area .border_none .input-wrapper {
      border: none; }
    .container.factory .factory_contents_box .search_area .serch_select_box {
      max-height: 200px;
      overflow-y: auto;
      background-color: #fff;
      padding: 17px 0; }
      .container.factory .factory_contents_box .search_area .serch_select_box > div {
        line-height: 28px;
        padding: 0 22px; }
        .container.factory .factory_contents_box .search_area .serch_select_box > div:hover {
          background-color: #f5f5f6;
          cursor: pointer; }
    .container.factory .factory_contents_box .search_area .book_img {
      margin-top: 30px;
      margin-left: 17px;
      width: 135px;
      position: relative; }
      .container.factory .factory_contents_box .search_area .book_img img {
        box-shadow: 1px 5px 5px 2px #f0ecec; }
      .container.factory .factory_contents_box .search_area .book_img.nodata {
        background: #f5f5f6;
        height: 184px; }
        .container.factory .factory_contents_box .search_area .book_img.nodata img {
          box-shadow: none; }
      .container.factory .factory_contents_box .search_area .book_img p {
        font-size: 14px;
        font-weight: 500;
        color: #d3d3d5;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center; }
    .container.factory .factory_contents_box .search_area.payment {
      margin-top: 30px;
      background-color: #fff; }
      .container.factory .factory_contents_box .search_area.payment .set_date .select {
        width: 130px; }
        .container.factory .factory_contents_box .search_area.payment .set_date .select > .select-input {
          border-color: #09b9c6; }
    .container.factory .factory_contents_box .search_area .cours_category {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding: 6px 0; }
      .container.factory .factory_contents_box .search_area .cours_category label {
        display: inline-block;
        min-width: 80px;
        line-height: 36px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 700;
        text-align: center;
        border: 1px solid #7681e5;
        color: #7681e5;
        padding: 0 10px; }
        .container.factory .factory_contents_box .search_area .cours_category label:first-of-type {
          margin-left: 0; }
      .container.factory .factory_contents_box .search_area .cours_category input[type='checkbox']:checked + label {
        background-color: #7681e5;
        color: #fff; }
    .container.factory .factory_contents_box .table_wrap {
      margin-top: 80px;
      /*.search_result_div {
          max-height: 540px;
          overflow: auto;
        }

        .course-box {
          max-height: 540px;
          overflow: auto;
        }*/ }
      .container.factory .factory_contents_box .table_wrap .search_result {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 10px; }
        .container.factory .factory_contents_box .table_wrap .search_result h2 {
          display: flex;
          align-items: center;
          font-size: 26px;
          font-weight: 700;
          font-family: 'Noto Sans KR', 'Inter', 'sans-serif';
          margin-bottom: 10px; }
          .container.factory .factory_contents_box .table_wrap .search_result h2 span {
            font: inherit;
            color: #7681e5;
            margin-left: 10px; }
          .container.factory .factory_contents_box .table_wrap .search_result h2 a {
            margin-left: 25px;
            font-size: 12px;
            color: #504d58; }
            .container.factory .factory_contents_box .table_wrap .search_result h2 a img {
              margin-left: 4px; }
        .container.factory .factory_contents_box .table_wrap .search_result .btns {
          display: flex;
          justify-content: flex-end;
          flex-wrap: wrap;
          margin-bottom: 10px; }
          .container.factory .factory_contents_box .table_wrap .search_result .btns li button {
            width: 111px;
            height: 100%;
            border: 1px solid #d3d3d5;
            border-radius: 21px;
            font-size: 13px;
            color: #a7a6ab;
            text-align: center; }
            .container.factory .factory_contents_box .table_wrap .search_result .btns li button img {
              margin-right: 6px; }
          .container.factory .factory_contents_box .table_wrap .search_result .btns li.purple_btn_style button {
            border-color: #7681e5;
            background-color: #7681e5;
            color: #fff;
            margin-right: 10px; }
            .container.factory .factory_contents_box .table_wrap .search_result .btns li.purple_btn_style button.disabled {
              border: 1px solid #d3d3d5;
              background-color: #fff;
              color: #a7a6ab; }
          .container.factory .factory_contents_box .table_wrap .search_result .btns li.chk_li label {
            margin-right: 10px;
            line-height: 33px; }
        .container.factory .factory_contents_box .table_wrap .search_result table.cedu_search_book,
        .container.factory .factory_contents_box .table_wrap .search_result table.cedu_search_question_point {
          border-spacing: 0 20px;
          border-collapse: separate; }
          .container.factory .factory_contents_box .table_wrap .search_result table.cedu_search_book tr td,
          .container.factory .factory_contents_box .table_wrap .search_result table.cedu_search_question_point tr td {
            border: 2px solid transparent;
            border-left: none;
            border-right: none; }
            .container.factory .factory_contents_box .table_wrap .search_result table.cedu_search_book tr td:first-of-type,
            .container.factory .factory_contents_box .table_wrap .search_result table.cedu_search_question_point tr td:first-of-type {
              border-radius: 15px 0 0 15px;
              border-left: 2px solid transparent; }
            .container.factory .factory_contents_box .table_wrap .search_result table.cedu_search_book tr td:last-of-type,
            .container.factory .factory_contents_box .table_wrap .search_result table.cedu_search_question_point tr td:last-of-type {
              border-radius: 0 15px 15px 0;
              border-right: 2px solid transparent; }
          .container.factory .factory_contents_box .table_wrap .search_result table.cedu_search_book tr.checked td,
          .container.factory .factory_contents_box .table_wrap .search_result table.cedu_search_question_point tr.checked td {
            border-top: 2px solid #09b9c6;
            border-bottom: 2px solid #09b9c6; }
            .container.factory .factory_contents_box .table_wrap .search_result table.cedu_search_book tr.checked td:first-of-type,
            .container.factory .factory_contents_box .table_wrap .search_result table.cedu_search_question_point tr.checked td:first-of-type {
              border-left: 2px solid #09b9c6; }
            .container.factory .factory_contents_box .table_wrap .search_result table.cedu_search_book tr.checked td:last-of-type,
            .container.factory .factory_contents_box .table_wrap .search_result table.cedu_search_question_point tr.checked td:last-of-type {
              border-right: 2px solid #09b9c6; }
      .container.factory .factory_contents_box .table_wrap table {
        border-collapse: separate;
        border-bottom: 1px solid #d3d3d5; }
        .container.factory .factory_contents_box .table_wrap table tbody tr {
          position: relative;
          border-radius: 15px;
          cursor: pointer; }
          .container.factory .factory_contents_box .table_wrap table tbody tr td {
            border: 2px solid transparent;
            border-left: none;
            border-right: none; }
            .container.factory .factory_contents_box .table_wrap table tbody tr td:first-of-type {
              border-radius: 15px 0 0 15px;
              border-left: 2px solid transparent; }
            .container.factory .factory_contents_box .table_wrap table tbody tr td:last-of-type {
              border-radius: 0 15px 15px 0;
              border-right: 2px solid transparent; }
            .container.factory .factory_contents_box .table_wrap table tbody tr td .is_cedu {
              display: inline-block;
              font-style: normal;
              font-weight: bold;
              font-size: 13px;
              color: #0f9ba5;
              background: #ffffff;
              border: 2px solid #0f9ba5;
              box-sizing: border-box;
              border-radius: 20px;
              width: 70px;
              line-height: 21px;
              margin-right: 10px;
              text-align: center; }
              .container.factory .factory_contents_box .table_wrap table tbody tr td .is_cedu + .ellipsis {
                width: calc(100% - 80px); }
            .container.factory .factory_contents_box .table_wrap table tbody tr td .tooltip_wrap {
              position: relative; }
              .container.factory .factory_contents_box .table_wrap table tbody tr td .tooltip_wrap:hover .tooltip {
                visibility: visible;
                opacity: 1; }
          .container.factory .factory_contents_box .table_wrap table tbody tr.checked td {
            border-top: 2px solid #09b9c6;
            border-bottom: 2px solid #09b9c6; }
            .container.factory .factory_contents_box .table_wrap table tbody tr.checked td:first-of-type {
              border-left: 2px solid #09b9c6; }
            .container.factory .factory_contents_box .table_wrap table tbody tr.checked td:last-of-type {
              border-right: 2px solid #09b9c6; }
          .container.factory .factory_contents_box .table_wrap table tbody tr .tag {
            border-radius: 20px;
            border-color: #0f9ba5;
            color: #0f9ba5;
            padding: 0 15px;
            line-height: 21px;
            font-size: 13px;
            font-weight: 700; }
            .container.factory .factory_contents_box .table_wrap table tbody tr .tag.wid70 {
              white-space: nowrap;
              width: 70px;
              padding: 0;
              text-align: center; }
            .container.factory .factory_contents_box .table_wrap table tbody tr .tag.purple {
              border-color: #7681e5;
              color: #7681e5; }
          .container.factory .factory_contents_box .table_wrap table tbody tr .list_btn {
            font-size: 11px;
            font-weight: 500;
            color: #a7a6ab;
            display: block; }
            .container.factory .factory_contents_box .table_wrap table tbody tr .list_btn img {
              margin-right: 4px; }
          .container.factory .factory_contents_box .table_wrap table tbody tr.on {
            box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.1); }
            .container.factory .factory_contents_box .table_wrap table tbody tr.on .hover_event {
              display: inline-block; }
            .container.factory .factory_contents_box .table_wrap table tbody tr.on td {
              border-color: #09b9c6; }
              .container.factory .factory_contents_box .table_wrap table tbody tr.on td:first-of-type {
                border-color: #09b9c6; }
              .container.factory .factory_contents_box .table_wrap table tbody tr.on td:last-of-type {
                border-color: #09b9c6; }
          .container.factory .factory_contents_box .table_wrap table tbody tr.nodata {
            cursor: default; }
            .container.factory .factory_contents_box .table_wrap table tbody tr.nodata td {
              line-height: 650px; }
            .container.factory .factory_contents_box .table_wrap table tbody tr.nodata:hover {
              box-shadow: none; }
              .container.factory .factory_contents_box .table_wrap table tbody tr.nodata:hover td {
                border-radius: 15px;
                border-color: transparent; }
    .container.factory .factory_contents_box .pagination {
      padding: 30px 0 40px;
      margin-top: 0; }
  .container.factory .factory_contents_detail {
    width: 33%;
    position: relative;
    z-index: 100;
    background: #eefafa;
    height: 100%;
    overflow: hidden; }
    .container.factory .factory_contents_detail .page_box {
      margin-bottom: 0; }
    .container.factory .factory_contents_detail::before {
      content: '';
      display: block;
      width: calc(100% + 100px);
      height: calc(100% + 300px);
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: -50px;
      box-shadow: inset 15px 10px 88px rgba(0, 0, 0, 0.1); }
    .container.factory .factory_contents_detail > div.scroll_div {
      height: 100%;
      overflow-y: auto;
      position: relative;
      z-index: 100;
      padding: 40px 20px 40px 20px; }
      .container.factory .factory_contents_detail > div.scroll_div > div {
        margin-bottom: 40px; }
    .container.factory .factory_contents_detail tbody tr {
      cursor: pointer; }
    .container.factory .factory_contents_detail .nodata {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      font-size: 14px;
      font-weight: 500;
      color: #d3d3d5;
      width: 100%;
      text-align: center; }
      .container.factory .factory_contents_detail .nodata td {
        line-height: 600px; }
    .container.factory .factory_contents_detail .title_ul {
      display: flex;
      align-items: center;
      margin-bottom: 10px; }
      .container.factory .factory_contents_detail .title_ul li {
        font-size: 26px;
        font-weight: 500;
        color: #a7a6ab;
        float: left;
        line-height: 34px;
        white-space: nowrap; }
        .container.factory .factory_contents_detail .title_ul li:nth-of-type(2) {
          position: relative;
          max-width: 400px;
          width: auto;
          color: #24212e;
          padding: 0 24px 0 15px;
          font-weight: 700; }
          .container.factory .factory_contents_detail .title_ul li:nth-of-type(2):after {
            content: '';
            display: block;
            width: 2px;
            height: 19px;
            background-color: #7c7a82;
            position: absolute;
            top: 50%;
            right: 8px;
            transform: translateY(-50%); }
        .container.factory .factory_contents_detail .title_ul li:last-of-type {
          font-size: 20px;
          font-weight: 500;
          color: #504d58;
          position: relative; }
      .container.factory .factory_contents_detail .title_ul + .input-component-box {
        margin-top: 20px; }
        .container.factory .factory_contents_detail .title_ul + .input-component-box .input-wrapper {
          background-color: transparent;
          border-color: #6bd5dd;
          height: 60px; }
          .container.factory .factory_contents_detail .title_ul + .input-component-box .input-wrapper input {
            background-color: transparent;
            font-size: 20px; }
            .container.factory .factory_contents_detail .title_ul + .input-component-box .input-wrapper input::placeholder {
              font-size: 20px; }
      .container.factory .factory_contents_detail .title_ul.devide_none li:after {
        display: none; }
    .container.factory .factory_contents_detail .title_p {
      font-size: 24px;
      font-weight: 700;
      color: #24212e;
      margin: 0 24px 0 15px; }
    .container.factory .factory_contents_detail .vedio_play_btn {
      width: 100px;
      height: 35px;
      background-color: #7681e5;
      color: #fff;
      border-radius: 15px;
      font-size: 15px;
      font-weight: 700;
      font-family: 'Inter', 'Noto Sans KR', sans-serif;
      text-align: center;
      margin-left: 10px; }
      .container.factory .factory_contents_detail .vedio_play_btn img {
        margin-right: 6px; }
    .container.factory .factory_contents_detail .youtube_box {
      margin: 18px 0 0px;
      position: relative; }
      .container.factory .factory_contents_detail .youtube_box .rightT {
        font-size: 15px;
        font-weight: 500;
        color: #a7a6ab;
        margin-bottom: 4px; }
      .container.factory .factory_contents_detail .youtube_box .youtube_link {
        padding: 12px 18px;
        background-color: #fff;
        border: 1px solid #e4e6fa;
        border-radius: 10px;
        font-size: 13px;
        font-family: 'Roboto', 'Noto Sans KR', sans-serif; }
        .container.factory .factory_contents_detail .youtube_box .youtube_link img {
          margin-right: 9px;
          margin-bottom: 4px; }
        .container.factory .factory_contents_detail .youtube_box .youtube_link a {
          margin-left: 5px;
          text-decoration: underline;
          word-break: break-all;
          line-height: 19px; }
    .container.factory .factory_contents_detail table {
      border-collapse: separate;
      border-bottom: 1px solid #d3d3d5; }
      .container.factory .factory_contents_detail table tr td {
        overflow: hidden;
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent; }
        .container.factory .factory_contents_detail table tr td:first-of-type {
          border-left: 1px solid transparent;
          border-radius: 15px 0 0 15px;
          padding-right: 10px; }
        .container.factory .factory_contents_detail table tr td:last-of-type {
          border-right: 1px solid transparent;
          border-radius: 0 15px 15px 0; }
        .container.factory .factory_contents_detail table tr td.nodata_hover {
          border-radius: 15px; }
      .container.factory .factory_contents_detail table tr:hover {
        border-radius: 15px; }
        .container.factory .factory_contents_detail table tr:hover.no_hover td {
          background-color: transparent;
          border: 1px solid transparent !important; }
        .container.factory .factory_contents_detail table tr:hover td {
          background-color: #fff;
          border-color: #09b9c6; }
          .container.factory .factory_contents_detail table tr:hover td:first-of-type {
            border-color: #09b9c6; }
          .container.factory .factory_contents_detail table tr:hover td:last-of-type {
            border-color: #09b9c6; }
      .container.factory .factory_contents_detail table tr th,
      .container.factory .factory_contents_detail table tr td {
        padding: 14px 0; }
        .container.factory .factory_contents_detail table tr th.leftT,
        .container.factory .factory_contents_detail table tr td.leftT {
          padding-left: 20px; }
        .container.factory .factory_contents_detail table tr th p,
        .container.factory .factory_contents_detail table tr td p {
          font-size: 14px;
          font-weight: 500;
          font-weight: 'Inter', 'Noto Sans KR', sans-serif;
          line-height: 1.4;
          color: #333; }
        .container.factory .factory_contents_detail table tr th ul,
        .container.factory .factory_contents_detail table tr td ul {
          margin-top: 4px;
          display: flex;
          flex-wrap: wrap; }
          .container.factory .factory_contents_detail table tr th ul li,
          .container.factory .factory_contents_detail table tr td ul li {
            padding: 0 10px;
            font-size: 12px;
            font-weight: 300;
            color: #7c7a82; }
            .container.factory .factory_contents_detail table tr th ul li:first-of-type,
            .container.factory .factory_contents_detail table tr td ul li:first-of-type {
              padding-left: 0; }
            .container.factory .factory_contents_detail table tr th ul li:after,
            .container.factory .factory_contents_detail table tr td ul li:after {
              height: 10px;
              background-color: #7c7a82; }
      .container.factory .factory_contents_detail table tr:hover .hover_event {
        display: inline-block; }
    .container.factory .factory_contents_detail .btn_hover:hover:enabled {
      color: #09a9a6;
      border: 1px solid #09a9a6; }
    .container.factory .factory_contents_detail .all_preview_btn {
      width: 133px;
      height: 40px;
      font-size: 13px;
      font-weight: 500;
      color: #09b9c6;
      border: 1px solid #09b9c6;
      border-radius: 10px;
      text-align: center; }
    .container.factory .factory_contents_detail .tr_detail_box {
      padding: 20px 26px 0;
      border: 1px solid #9de3e8;
      background-color: #fff;
      border-radius: 20px;
      margin: 30px 0; }
      .container.factory .factory_contents_detail .tr_detail_box ul li {
        display: flex;
        align-items: flex-start;
        margin-right: 30px;
        margin-bottom: 20px; }
        .container.factory .factory_contents_detail .tr_detail_box ul li .select {
          width: max-content;
          background: url("/img/icon/icon_select_arrow_w.svg") no-repeat right 10px center; }
          .container.factory .factory_contents_detail .tr_detail_box ul li .select .select-options {
            top: 35px;
            border-color: #a7a6ab; }
          .container.factory .factory_contents_detail .tr_detail_box ul li .select.purple_bg {
            padding-right: 10px; }
        .container.factory .factory_contents_detail .tr_detail_box ul li .big_tag_wrap .select {
          margin-left: 15px; }
        .container.factory .factory_contents_detail .tr_detail_box ul li .big_tag_wrap.no_select_margin > div {
          margin-bottom: 10px;
          margin-right: 15px; }
          .container.factory .factory_contents_detail .tr_detail_box ul li .big_tag_wrap.no_select_margin > div .big_tag {
            margin-bottom: 0; }
        .container.factory .factory_contents_detail .tr_detail_box ul li .big_tag_wrap.no_select_margin .select {
          margin-left: 0; }
        .container.factory .factory_contents_detail .tr_detail_box ul li > span:first-of-type {
          margin-top: 6px;
          min-width: 120px; }
        .container.factory .factory_contents_detail .tr_detail_box ul li span,
        .container.factory .factory_contents_detail .tr_detail_box ul li .select {
          min-height: auto; }
          .container.factory .factory_contents_detail .tr_detail_box ul li span.bn .placeholder,
          .container.factory .factory_contents_detail .tr_detail_box ul li .select.bn .placeholder {
            border: none; }
          .container.factory .factory_contents_detail .tr_detail_box ul li span.purple_bg .select-input,
          .container.factory .factory_contents_detail .tr_detail_box ul li .select.purple_bg .select-input {
            font-weight: 700; }
          .container.factory .factory_contents_detail .tr_detail_box ul li span.defaultStyle,
          .container.factory .factory_contents_detail .tr_detail_box ul li .select.defaultStyle {
            background: url("/img/icon/icon_select_arrow_purple.svg") no-repeat right 10px center;
            background-color: #f1f2fc; }
            .container.factory .factory_contents_detail .tr_detail_box ul li span.defaultStyle .select-input,
            .container.factory .factory_contents_detail .tr_detail_box ul li .select.defaultStyle .select-input {
              min-width: 140px;
              color: #7681e5;
              font-size: 13px;
              font-weight: 700; }
          .container.factory .factory_contents_detail .tr_detail_box ul li span img,
          .container.factory .factory_contents_detail .tr_detail_box ul li .select img {
            display: none; }
          .container.factory .factory_contents_detail .tr_detail_box ul li span .select-input,
          .container.factory .factory_contents_detail .tr_detail_box ul li .select .select-input {
            color: #fff;
            height: 35px; }
            .container.factory .factory_contents_detail .tr_detail_box ul li span .select-input span,
            .container.factory .factory_contents_detail .tr_detail_box ul li .select .select-input span {
              font-size: inherit;
              color: inherit; }
          .container.factory .factory_contents_detail .tr_detail_box ul li span .select-option,
          .container.factory .factory_contents_detail .tr_detail_box ul li .select .select-option {
            padding: 12px 0;
            text-align: center; }
          .container.factory .factory_contents_detail .tr_detail_box ul li span:first-of-type,
          .container.factory .factory_contents_detail .tr_detail_box ul li .select:first-of-type {
            font-size: 20px;
            font-weight: 700;
            color: #24212e; }
            .container.factory .factory_contents_detail .tr_detail_box ul li span:first-of-type .font_mini_alert,
            .container.factory .factory_contents_detail .tr_detail_box ul li .select:first-of-type .font_mini_alert {
              font-size: 10px;
              font-weight: 400;
              color: #7c7a82;
              line-height: 16px;
              word-break: keep-all;
              max-width: 100px;
              display: inline-block; }
          .container.factory .factory_contents_detail .tr_detail_box ul li span.big_tag,
          .container.factory .factory_contents_detail .tr_detail_box ul li .select.big_tag {
            display: inline-block;
            min-width: 100px;
            height: 36px;
            line-height: 36px;
            background-color: #f1f2fc;
            font-size: 13px;
            font-weight: 700;
            color: #7681e5;
            text-align: center;
            border-radius: 15px;
            margin-right: 15px;
            position: relative;
            cursor: pointer; }
            .container.factory .factory_contents_detail .tr_detail_box ul li span.big_tag.active,
            .container.factory .factory_contents_detail .tr_detail_box ul li .select.big_tag.active {
              background-color: #7681e5;
              color: #fff; }
            .container.factory .factory_contents_detail .tr_detail_box ul li span.big_tag:last-of-type,
            .container.factory .factory_contents_detail .tr_detail_box ul li .select.big_tag:last-of-type {
              margin-right: 0; }
            .container.factory .factory_contents_detail .tr_detail_box ul li span.big_tag.purple_bg,
            .container.factory .factory_contents_detail .tr_detail_box ul li .select.big_tag.purple_bg {
              background-color: #7681e5;
              color: #fff; }
            .container.factory .factory_contents_detail .tr_detail_box ul li span.big_tag.line_select,
            .container.factory .factory_contents_detail .tr_detail_box ul li .select.big_tag.line_select {
              background-color: transparent; }
              .container.factory .factory_contents_detail .tr_detail_box ul li span.big_tag.line_select .select-input,
              .container.factory .factory_contents_detail .tr_detail_box ul li .select.big_tag.line_select .select-input {
                color: #7c7a82; }
              .container.factory .factory_contents_detail .tr_detail_box ul li span.big_tag.line_select img,
              .container.factory .factory_contents_detail .tr_detail_box ul li .select.big_tag.line_select img {
                display: block; }
            .container.factory .factory_contents_detail .tr_detail_box ul li span.big_tag .after,
            .container.factory .factory_contents_detail .tr_detail_box ul li .select.big_tag .after {
              font-size: 12px;
              font-weight: 500;
              color: #7c7a82;
              position: absolute;
              left: 0;
              bottom: -16px;
              line-height: 1.2; }
        .container.factory .factory_contents_detail .tr_detail_box ul li.w100 {
          width: 100%; }
          .container.factory .factory_contents_detail .tr_detail_box ul li.w100 .detail_edit {
            margin-top: 17px; }
            .container.factory .factory_contents_detail .tr_detail_box ul li.w100 .detail_edit:first-of-type {
              margin-top: 14px; }
            .container.factory .factory_contents_detail .tr_detail_box ul li.w100 .detail_edit span {
              font-size: 16px;
              font-weight: 500;
              color: #504d58; }
          .container.factory .factory_contents_detail .tr_detail_box ul li.w100 .detail_add {
            margin-top: 28px;
            font-size: 20px;
            font-weight: 700; }
        .container.factory .factory_contents_detail .tr_detail_box ul li .big_tag_wrap > span {
          min-width: 120px;
          margin-top: 6px; }
        .container.factory .factory_contents_detail .tr_detail_box ul li .big_tag_wrap .optionsBox .big_tag {
          margin-bottom: 20px; }
        .container.factory .factory_contents_detail .tr_detail_box ul li .big_tag_wrap .big_tag {
          margin-bottom: 20px; }
      .container.factory .factory_contents_detail .tr_detail_box.after_add {
        margin-top: 0;
        padding: 20px 26px 0px 20px; }
      .container.factory .factory_contents_detail .tr_detail_box .input-component-box {
        display: inline-block;
        width: 100px; }
        .container.factory .factory_contents_detail .tr_detail_box .input-component-box .input-wrapper {
          height: 35px;
          border-radius: 15px;
          padding: 0px 18px; }
          .container.factory .factory_contents_detail .tr_detail_box .input-component-box .input-wrapper input::placeholder {
            font-size: 13px; }
    .container.factory .factory_contents_detail .detail_btns {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      padding: 0 27px;
      gap: 20px; }
      .container.factory .factory_contents_detail .detail_btns .print_right_sentence {
        color: red;
        font-size: 13px;
        text-align: left;
        word-break: keep-all; }
      .container.factory .factory_contents_detail .detail_btns button {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 206px;
        flex: 1;
        height: 65px;
        border-radius: 15px;
        box-shadow: 0px 3px 4px rgba(104, 154, 170, 0.3);
        background: #09b9c6;
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        border: 1px solid transparent; }
        .container.factory .factory_contents_detail .detail_btns button img {
          margin-left: 8px; }
        .container.factory .factory_contents_detail .detail_btns button + button, .container.factory .factory_contents_detail .detail_btns button.purple {
          background-color: #7681e5;
          letter-spacing: -1px; }
        .container.factory .factory_contents_detail .detail_btns button.disabled_bg {
          background-color: #e4e6fa;
          color: #fff;
          box-shadow: none; }
        .container.factory .factory_contents_detail .detail_btns button.disabled_line {
          background-color: #fff;
          border: 1px solid #e4e6fa;
          color: #e4e6fa;
          box-shadow: none; }
        .container.factory .factory_contents_detail .detail_btns button.white_btn {
          background-color: #fff;
          color: #7681e5;
          border: 1px solid #7681e5; }
        .container.factory .factory_contents_detail .detail_btns button.alert_after {
          position: relative; }
          .container.factory .factory_contents_detail .detail_btns button.alert_after:after {
            content: '*학습 진행중인 코스에 포함되어 다른 이름으로만 저장 가능';
            display: block;
            color: #ff5050;
            font-size: 12px;
            position: absolute;
            left: 0;
            bottom: -20px;
            font-weight: 400;
            white-space: nowrap; }
        .container.factory .factory_contents_detail .detail_btns button.likeBtnDefault {
          background-color: #ffffff;
          color: #09b9c6;
          border: 1px solid #09b9c6; }
    .container.factory .factory_contents_detail .height_100 {
      height: 100%;
      position: relative; }
    .container.factory .factory_contents_detail .question_pass {
      margin-left: 10px;
      top: 8px;
      right: 0; }
      .container.factory .factory_contents_detail .question_pass p {
        font-size: 14px;
        color: #7c7a82; }
        .container.factory .factory_contents_detail .question_pass p span {
          font-size: 14px;
          font-weight: 700;
          font-family: 'Inter', sans-serif; }

.container .couse_title {
  font-size: 26px;
  font-weight: 700;
  color: #24212e;
  margin-bottom: 30px; }

.container .construction {
  margin-top: 20px;
  padding: 27px 22px;
  border-radius: 20px;
  background-color: #fff;
  border: 1px solid #84dce2; }
  .container .construction.type1 {
    background-color: transparent;
    border: none;
    padding: 0 24px; }
    .container .construction.type1 li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px; }
      .container .construction.type1 li:not(:first-child) {
        margin-top: 20px; }
  .container .construction:first-of-type {
    margin-top: 0; }
  .container .construction li {
    display: flex;
    align-items: center;
    margin-top: 32px; }
    .container .construction li:first-of-type {
      margin-top: 0; }
    .container .construction li span:nth-of-type(2) {
      min-width: 55px;
      text-align: right; }
  .container .construction .tag {
    width: 47px;
    min-width: 47px;
    height: 25px;
    padding: 0;
    text-align: center;
    margin-right: 10px;
    font-size: 12px;
    font-weight: 800;
    line-height: 21px;
    vertical-align: unset; }
  .container .construction p {
    font-size: 16px;
    font-weight: 500;
    color: #24212e;
    width: calc(100% - 182px);
    display: inline-block; }
    .container .construction p span {
      font-size: 14px;
      font-weight: 500;
      color: #504d58;
      margin: 0 12px; }
  .container .construction i {
    margin-left: 50px; }

.container.factory .page_box button.right,
.container.factory .page_box button.left {
  top: -34px;
  transform: none; }

@media screen and (max-width: 1800px) {
  .container.factory .factory_nav {
    padding-left: 30px;
    left: calc(-17.5% + 50px); }
    .container.factory .factory_nav.on {
      padding-left: 50px;
      left: 0; }
    .container.factory .factory_nav h2 {
      font-size: 26px; }
    .container.factory .factory_nav .factory_menu {
      margin-top: 30px;
      height: calc(100% - 32px);
      overflow-y: auto; }
      .container.factory .factory_nav .factory_menu::-webkit-scrollbar {
        width: 2px;
        height: 2px; }
      .container.factory .factory_nav .factory_menu > li:last-of-type a, .container.factory .factory_nav .factory_menu > li.market_btn a {
        padding: 0; } }

@media screen and (max-width: 1600px) {
  .container.factory .factory_contents_box {
    width: calc(100% - 38%);
    padding: 50px 40px 0 90px; }
  .container.factory .factory_nav {
    padding-left: 30px;
    left: calc(-17.5% + 50px); }
    .container.factory .factory_nav.on {
      padding-left: 30px;
      left: calc(-17.5% + 50px); }
    .container.factory .factory_nav h2 button {
      display: none; }
  .container.factory .factory_contents_detail {
    width: 38%; } }

/*
@media screen and (max-width: 1600px) {
  .container {
    &.factory {
      .factory_contents_box {
        h1 {
          font-size: 26px;
          margin-bottom: 20px;
        }

        .line_tab {
          li {
            a {
              font-size: 20px;
            }
          }
        }

        .table_wrap {
          table {
            tbody {
              tr {
                .tag {
                  display: block;
                  width: 70px;
                  margin-bottom: 3px;
                }
              }
            }
          }
        }
      }
    }
  }
}
*/
@media screen and (max-width: 1500px) {
  .container.factory .factory_contents_detail .title_ul li {
    font-size: 20px; }
    .container.factory .factory_contents_detail .title_ul li:nth-child(2) {
      font-size: 20px; }
    .container.factory .factory_contents_detail .title_ul li:last-of-type {
      font-size: 16px; }
      .container.factory .factory_contents_detail .title_ul li:last-of-type::after {
        width: 1px;
        height: 12px; }
  .container.factory .factory_contents_detail .detail_btns button {
    width: 160px;
    height: 50px;
    font-size: 15px; }
  .container.factory .factory_contents_detail .pagination {
    margin-bottom: 20px; } }

.balloon_pop {
  display: inline-block;
  margin-left: 4px;
  position: relative;
  z-index: 10; }
  .balloon_pop.on {
    /*
    &::after {
      content: '';
      display: block;
      width: 20px;
      height: 20px;
      background: url('/img/icon/icon_balloon_point.svg') no-repeat center;
      position: absolute;
      top: 22px;
      left: 0;
    }
    */ }
    .balloon_pop.on.pointer_position::after {
      top: -12px; }
    .balloon_pop.on.pointer_position .inner_pop {
      margin-top: 0; }
      .balloon_pop.on.pointer_position .inner_pop ul li {
        text-indent: -15px;
        padding-left: 15px; }
        .balloon_pop.on.pointer_position .inner_pop ul li i {
          margin-top: 0 !important; }
  .balloon_pop .inner_pop {
    min-width: 430px;
    padding: 0 30px;
    background-color: #fff; }
    .balloon_pop .inner_pop h2 {
      font-weight: 700;
      font-size: 26px;
      line-height: 38px;
      color: #24212e;
      padding-bottom: 20px;
      margin-bottom: 20px;
      border-bottom: 1px solid #d3d3d5; }
    .balloon_pop .inner_pop ul li {
      font-size: 14px;
      line-height: 170%;
      color: #000;
      margin-right: 0 !important;
      margin-bottom: 0 !important;
      text-align: left; }
      .balloon_pop .inner_pop ul li i {
        display: inline-block;
        min-width: 0;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: #000;
        vertical-align: middle;
        margin-top: -2px;
        margin-right: 10px; }
      .balloon_pop .inner_pop ul li .slash_box {
        display: inline-block;
        width: 23px !important;
        height: 23px !important;
        line-height: 20px;
        border-radius: 5px;
        border: 1px solid #0f9ba5;
        color: #0f9ba5;
        text-align: center;
        font-size: 10px !important;
        font-weight: 700 !important;
        font-family: 'Roboto' !important;
        text-indent: 0;
        box-shadow: 0px 4px 3px rgba(119, 119, 119, 0.2); }
        .balloon_pop .inner_pop ul li .slash_box + .slash_box {
          margin-left: 4px; }
        .balloon_pop .inner_pop ul li .slash_box.purple {
          border-color: #7681e5;
          color: #7681e5; }

@media screen and (max-width: 768px) {
  .balloon_pop.on.pointer_position {
    /*
        &::after {
          top: auto;
          bottom: 48px;
          transform: rotateZ(180deg);
        }
        */ }
    .balloon_pop.on.pointer_position .inner_pop {
      bottom: 60px;
      padding: 20px 30px;
      min-width: 330px;
      left: 30px; } }

.fixed_height_100 {
  height: calc(100% - 80px); }

.mt40 {
  margin-top: 40px; }

.page_box {
  position: relative;
  padding: 12px 0;
  margin: 50px 0; }
  .page_box .pagination {
    margin-top: 0; }
  .page_box button {
    text-align: center;
    width: 106px;
    line-height: 22px;
    padding: 8px 8px 6px;
    font-size: 13px;
    font-weight: 500;
    color: #09b9c6;
    border: 1px solid #09b9c6;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%); }
    .page_box button.left {
      left: 0; }
      .page_box button.left + .left {
        left: 116px; }
    .page_box button.right {
      right: 0; }
      .page_box button.right img {
        transform: translateY(-1px); }
    .page_box button.big {
      width: 206px;
      height: 65px;
      background-color: #09b9c6;
      color: #fff;
      font-size: 20px;
      font-weight: 700; }
      .page_box button.big img {
        margin-left: 6px; }
    .page_box button.disabled {
      border-color: #7c7a82;
      color: #7c7a82;
      cursor: default; }
    .page_box button img {
      margin-left: 6px; }

.special_tr {
  /*특별TR담기*/
  /* isbn */ }
  .special_tr .select_input_box .input-component-box {
    width: calc(100% - 80px); }
  .special_tr h1 {
    margin-bottom: 0; }
    .special_tr h1 .root {
      font-size: 15px;
      font-weight: 700;
      color: #6bd5dd;
      margin-bottom: 10px; }
      .special_tr h1 .root span {
        font: inherit;
        color: #a7a6ab; }
    .special_tr h1 + button {
      float: right;
      width: 204px;
      text-align: center; }
  .special_tr .table_wrap tr th span img.filter {
    margin-right: 0; }
  .special_tr .table_wrap tr .delete_icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    display: none; }
  .special_tr .table_wrap tr:hover .delete_icon {
    display: block; }
  .special_tr .table_wrap tr .leftT {
    padding-left: 16px; }
  .special_tr .table_wrap tr img {
    margin-right: 15px; }
  .special_tr .table_wrap tr label {
    display: inline-block; }
  .special_tr .factory_contents_detail .table_wrap {
    margin-top: 20px; }
  .special_tr .factory_contents_detail > button {
    width: 204px; }
  .special_tr .special_tr_list {
    max-height: 250px;
    overflow: auto;
    padding: 15px; }
    .special_tr .special_tr_list li {
      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(33.33% - 33.33px);
      box-shadow: 0px 5px 30px rgba(60, 142, 177, 0.15);
      float: left;
      position: relative;
      margin-left: 50px;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 30px;
      height: 90px; }
      .special_tr .special_tr_list li:nth-child(3n + 1), .special_tr .special_tr_list li:nth-child(1) {
        margin-left: 0; }
      .special_tr .special_tr_list li a {
        text-align: center;
        padding: 0 10px; }
        .special_tr .special_tr_list li a p {
          width: 100%;
          font-size: 18px;
          font-weight: 700;
          color: #24212e;
          line-height: 26px; }
      .special_tr .special_tr_list li:hover {
        background-color: #09b9c6; }
        .special_tr .special_tr_list li:hover p {
          color: #fff; }
      .special_tr .special_tr_list li.active {
        background-color: #09b9c6; }
        .special_tr .special_tr_list li.active p {
          color: #fff; }
  .special_tr .search_result {
    margin: 22px 0; }
    .special_tr .search_result h2 {
      font-size: 26px;
      font-weight: 700;
      font-family: 'Noto Sans KR', 'Inter', 'sans-serif'; }
      .special_tr .search_result h2 span {
        font: inherit;
        color: #7681e5;
        margin-left: 10px; }
    .special_tr .search_result .btns {
      display: flex;
      justify-content: flex-end; }
      .special_tr .search_result .btns li button {
        width: 111px;
        line-height: 24px;
        padding: 4px 8px 3px;
        border: 1px solid #d3d3d5;
        border-radius: 21px;
        font-size: 13px;
        color: #a7a6ab;
        text-align: center; }
        .special_tr .search_result .btns li button img {
          margin-right: 6px;
          transform: translateY(-1px); }
      .special_tr .search_result .btns li.purple_btn_style button {
        border-color: #7681e5;
        background-color: #7681e5;
        color: #fff;
        margin-right: 10px; }
        .special_tr .search_result .btns li.purple_btn_style button.disabled {
          border-color: #fff;
          background-color: #fff;
          color: #a7a6ab; }
      .special_tr .search_result .btns li.chk_li label {
        margin-right: 10px;
        line-height: 33px; }
  .special_tr .factory_contents_detail .isbn_number {
    position: relative;
    margin: 30px 0;
    background-color: #fff; }
    .special_tr .factory_contents_detail .isbn_number .input-component-box {
      padding-right: 134px; }
      .special_tr .factory_contents_detail .isbn_number .input-component-box .input-wrapper {
        border: none; }
    .special_tr .factory_contents_detail .isbn_number button {
      position: absolute;
      top: 0;
      right: 0;
      border: 2px solid #7681e5;
      color: #7681e5;
      font-size: 20px;
      font-weight: 700; }
  .special_tr .factory_contents_detail .barcode_box img {
    margin: 12px 0 10px; }
  .special_tr .factory_contents_detail .barcode_box .barcode_number span {
    display: inline-block;
    margin-left: 10px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Inter', 'Noto Sans KR', sans-serif;
    color: #24212e; }
    .special_tr .factory_contents_detail .barcode_box .barcode_number span:first-of-type {
      margin-left: 0; }
  .special_tr .factory_contents_detail .barcode_box .isbn_code {
    display: inline-block;
    line-height: 20px;
    padding: 0 7px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Inter', 'Noto Sans KR', sans-serif;
    color: #24212e;
    border: 1px solid #ff5050; }
  .special_tr .factory_contents_detail .search_book {
    font-size: 26px;
    font-weight: 700;
    height: calc(100% - 430px);
    overflow-y: auto; }
    .special_tr .factory_contents_detail .search_book .book_name {
      font-size: 26px;
      font-weight: 700;
      color: #24212e;
      margin-bottom: 20px; }
    .special_tr .factory_contents_detail .search_book .book_info_wrap {
      display: flex;
      flex-wrap: wrap; }
      .special_tr .factory_contents_detail .search_book .book_info_wrap .img_holder {
        width: 40%;
        padding-bottom: 20px; }
        .special_tr .factory_contents_detail .search_book .book_info_wrap .img_holder img {
          height: 200px; }
      .special_tr .factory_contents_detail .search_book .book_info_wrap ul {
        flex: 1;
        padding: 14px 0 14px 20px; }
        .special_tr .factory_contents_detail .search_book .book_info_wrap ul li {
          min-width: 259px;
          font-size: 18px;
          font-weight: 500;
          color: #7c7a82;
          margin-top: 24px; }
          .special_tr .factory_contents_detail .search_book .book_info_wrap ul li:first-of-type {
            margin-top: 0; }
          .special_tr .factory_contents_detail .search_book .book_info_wrap ul li span {
            display: inline-block;
            width: 100px;
            font-size: 20px;
            font-weight: 500; }
    .special_tr .factory_contents_detail .search_book > li {
      background-color: #fff;
      padding: 30px 40px;
      border: 1px solid #d3d3d5;
      border-radius: 15px;
      margin-bottom: 30px; }
      .special_tr .factory_contents_detail .search_book > li:first-of-type {
        margin-bottom: 50px; }
      .special_tr .factory_contents_detail .search_book > li:after {
        content: '';
        display: block;
        clear: both; }
    .special_tr .factory_contents_detail .search_book.height_auto > li {
      font-size: 16px; }
      .special_tr .factory_contents_detail .search_book.height_auto > li .book_info_wrap .img_holder img {
        height: 142px; }
      .special_tr .factory_contents_detail .search_book.height_auto > li .book_info_wrap ul {
        padding: 0 0 0 20px; }
        .special_tr .factory_contents_detail .search_book.height_auto > li .book_info_wrap ul li {
          margin-top: 15px; }
          .special_tr .factory_contents_detail .search_book.height_auto > li .book_info_wrap ul li:first-of-type {
            margin-top: 0; }
          .special_tr .factory_contents_detail .search_book.height_auto > li .book_info_wrap ul li span {
            font-size: 16px; }
  .special_tr.container .factory_contents_box .search_area.payment .display_flex {
    display: flex;
    flex-wrap: wrap; }
    .special_tr.container .factory_contents_box .search_area.payment .display_flex .set_date {
      margin-right: 20px; }

.chk_arrow {
  display: inline-block;
  width: 8px;
  height: 14px;
  border-left: 1px solid #7c7a82;
  border-bottom: 1px solid #7c7a82;
  margin-left: 12px;
  margin-top: -5px;
  position: absolute; }

.display_inline_block {
  display: inline-block !important;
  padding-left: 23px; }

.font_22 {
  font-size: 22px; }
  .font_22.composition * {
    font-size: 22px; }

.factory_preview #play-frame .play-content-box .test-card .top .desc1-input p {
  margin-top: 0;
  line-height: 2; }

.factory_preview .choose_one li {
  border-color: #7c7a82;
  color: #7c7a82; }

.factory_preview .question_title_f {
  font-size: 30px;
  font-weight: 700;
  color: #504d58;
  margin-top: 30px; }

.factory_preview .wrong_container .q_box {
  line-height: 60px;
  font-family: 'Roboto', 'Noto Sans KR', sans-serif; }
  .factory_preview .wrong_container .q_box .hlight.flag1 {
    font-weight: 600;
    text-decoration: underline; }

.factory_preview .wrong_container .all_preview2 p {
  font-size: 22px;
  font-weight: 400;
  color: #504d58;
  font-family: 'Roboto', 'Noto Sans KR';
  line-height: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid #e9e9ea; }

.factory_preview .wrong_container .answer_ul {
  margin-top: 52px;
  text-align: center; }
  .factory_preview .wrong_container .answer_ul li {
    cursor: pointer;
    display: inline-block;
    width: max-content;
    min-width: 78px;
    height: 72px;
    padding: 0 27px;
    text-align: center;
    line-height: 66px;
    box-shadow: 0px 4px 3px rgba(119, 119, 119, 0.2);
    border-radius: 15px;
    border: 3px solid #7681e5;
    color: #7681e5;
    font-size: 22px;
    font-weight: bold;
    font-family: 'Roboto', 'Noto Sans KR';
    margin-left: 30px;
    margin-top: 8px; }
    .factory_preview .wrong_container .answer_ul li:first-of-type {
      margin-left: 0; }
    .factory_preview .wrong_container .answer_ul li.green {
      border-color: #0f9ba5;
      color: #0f9ba5; }
    .factory_preview .wrong_container .answer_ul li.yellow {
      border-color: #ffaa04;
      color: #ffaa04; }
    .factory_preview .wrong_container .answer_ul li.pink {
      border-color: #ff84b0;
      color: #ff84b0; }
    .factory_preview .wrong_container .answer_ul li.red {
      border-color: #ff5050;
      color: #ff5050; }
    .factory_preview .wrong_container .answer_ul li.cyan {
      border-color: #09b9c6;
      color: #09b9c6; }
    .factory_preview .wrong_container .answer_ul li:hover {
      background-color: rgba(9, 185, 198, 0.1); }

.factory_preview .wrong_container .eraser_btn {
  margin-top: 40px; }
  .factory_preview .wrong_container .eraser_btn button {
    padding: 0 20px;
    font-size: 15px;
    font-weight: 700;
    color: #7c7a82;
    line-height: 15px;
    position: relative; }
    .factory_preview .wrong_container .eraser_btn button span {
      margin-left: 8px;
      font-weight: 500;
      font-size: 12px;
      font-family: 'Inter', sans-serif;
      line-height: 15px; }
    .factory_preview .wrong_container .eraser_btn button img {
      margin-right: 8px;
      vertical-align: unset; }
    .factory_preview .wrong_container .eraser_btn button::after {
      content: '';
      display: block;
      width: 1px;
      height: 14px;
      background-color: #7c7a82;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%); }
    .factory_preview .wrong_container .eraser_btn button:first-of-type::after {
      display: none; }

.factory_preview .wrong_container .answer_white_space {
  width: auto !important;
  display: inline-block;
  border-bottom: 1px solid #504d58;
  margin-right: 6px; }

.factory_preview .prev-left {
  float: left; }
  .factory_preview .prev-left .text-part-detail {
    margin-right: 35px; }

.factory_preview .question_type {
  float: right;
  font-size: 18px;
  font-weight: 500; }
  .factory_preview .question_type span {
    font-size: inherit;
    color: #09b9c6;
    margin-left: 10px;
    font-weight: 700; }

@media screen and (max-width: 1024px) {
  .factory_preview .wrong_container .q_box {
    padding: 24px;
    font-size: 18px;
    line-height: 1.8; }
    .factory_preview .wrong_container .q_box .font_22 {
      font-size: inherit !important;
      line-height: 1.8; }
      .factory_preview .wrong_container .q_box .font_22 * {
        font-size: inherit !important;
        line-height: inherit; } }

.produce_page.factory .factory_contents_box {
  width: 100%;
  border-radius: 0;
  padding: 50px 40px 30px calc(17.5% + 40px); }
  .produce_page.factory .factory_contents_box .produce_form {
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
    border: 1px solid #adb3ef;
    padding: 50px 30px 54px 30px;
    border-radius: 15px; }
    .produce_page.factory .factory_contents_box .produce_form .form_ul {
      padding-bottom: 30px;
      border-bottom: 1px solid #e9e9ea; }
      .produce_page.factory .factory_contents_box .produce_form .form_ul li {
        margin-top: 30px; }
        .produce_page.factory .factory_contents_box .produce_form .form_ul li:first-of-type {
          margin-top: 0; }
        .produce_page.factory .factory_contents_box .produce_form .form_ul li:after {
          content: '';
          display: block;
          clear: both; }
        .produce_page.factory .factory_contents_box .produce_form .form_ul li > span {
          width: 220px;
          display: inline-block;
          float: left;
          font-size: 16px;
          font-weight: 500;
          color: #504d58; }
        .produce_page.factory .factory_contents_box .produce_form .form_ul li > div {
          width: calc(100% - 220px);
          float: left; }
        .produce_page.factory .factory_contents_box .produce_form .form_ul li label {
          margin-left: 38px;
          font-size: 16px;
          font-weight: 500;
          font-family: 'Inter', 'Noto Sans KR', sans-serif; }
          .produce_page.factory .factory_contents_box .produce_form .form_ul li label:first-of-type {
            margin-left: 0; }
        .produce_page.factory .factory_contents_box .produce_form .form_ul li .max_width .input-component-box {
          width: 68px;
          margin-right: 5px;
          display: inline-block; }
        .produce_page.factory .factory_contents_box .produce_form .form_ul li .alert_type {
          font-size: 13px;
          font-weight: 500;
          color: #a7a6ab;
          margin-top: 6px; }
    .produce_page.factory .factory_contents_box .produce_form .question_time {
      padding-top: 30px; }
      .produce_page.factory .factory_contents_box .produce_form .question_time p {
        font-size: 20px;
        font-weight: 500;
        color: #504d58;
        margin-bottom: 20px; }
      .produce_page.factory .factory_contents_box .produce_form .question_time li {
        width: calc(50% - 17.5px); }
        .produce_page.factory .factory_contents_box .produce_form .question_time li:last-of-type {
          margin-left: 35px; }
        .produce_page.factory .factory_contents_box .produce_form .question_time li textarea {
          width: 100%;
          padding: 20px;
          border-radius: 10px;
          height: 190px;
          border: 1px solid #504d58;
          font-size: 14px;
          font-weight: 500;
          color: #a7a6ab;
          color: #444; }
          .produce_page.factory .factory_contents_box .produce_form .question_time li textarea::placeholder {
            color: #a7a6ab; }
    .produce_page.factory .factory_contents_box .produce_form button {
      width: 206px;
      display: inline-block;
      margin-top: 30px; }
      .produce_page.factory .factory_contents_box .produce_form button + button {
        margin-left: 20px; }

@media screen and (max-width: 1600px) {
  .produce_page.factory .factory_contents_box {
    padding: 50px 40px 30px 90px; } }

@keyframes textCursor {
  0% {
    background-color: #000; }
  50% {
    background-color: #fff; }
  100% {
    background-color: #000; } }

.omr_page .inner {
  /*width: 900px; 220812 안재현, 문항삭제 버튼추가로 인한조정 */
  width: 1020px;
  margin: 0 auto; }
  .omr_page .inner .omr_btns {
    display: flex; }
    .omr_page .inner .omr_btns button {
      margin-left: 20px;
      box-shadow: none;
      border-width: 1px; }
      .omr_page .inner .omr_btns button:first-of-type {
        margin-left: 0; }
  .omr_page .inner .omr_info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px; }
    .omr_page .inner .omr_info .info_title {
      display: flex;
      align-items: center;
      width: 600px; }
      .omr_page .inner .omr_info .info_title p {
        font-size: 26px;
        font-weight: 700;
        color: #24212e;
        width: initial;
        max-width: calc(100% - 100px); }
      .omr_page .inner .omr_info .info_title span {
        font-size: 20px;
        font-weight: 500;
        color: #504d58;
        margin-left: 20px;
        position: relative; }
        .omr_page .inner .omr_info .info_title span:after {
          content: '';
          display: block;
          position: absolute;
          left: -10px;
          top: 50%;
          transform: translateY(-50%);
          width: 2px;
          height: 19px;
          background-color: #7c7a82; }
  .omr_page .inner .omr_contents {
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
    border-radius: 15px; }
    .omr_page .inner .omr_contents .omr_marking li {
      display: flex;
      align-items: center;
      border-color: #504d58; }
      .omr_page .inner .omr_contents .omr_marking li > div.first {
        /*width: calc(100% - 282px); 220812 안재현, 문항삭제 버튼추가로 인한조정 */
        width: calc(100% - 394px); }
        .omr_page .inner .omr_contents .omr_marking li > div.first.empty {
          border-color: #ff5050; }
          .omr_page .inner .omr_contents .omr_marking li > div.first.empty .input-component-box .input-wrapper {
            border-color: #ff5050; }
        .omr_page .inner .omr_contents .omr_marking li > div.first .omr_radio.subjective {
          flex-direction: column; }
          .omr_page .inner .omr_contents .omr_marking li > div.first .omr_radio.subjective .subjective_inner {
            width: 100%;
            padding: 10px 0; }
        .omr_page .inner .omr_contents .omr_marking li > div.first .input-component-box {
          width: calc(100% - 40px);
          display: inline-block; }
          .omr_page .inner .omr_contents .omr_marking li > div.first .input-component-box .input-wrapper {
            border-radius: 0;
            border: none;
            border-bottom: 1px solid #a7a6ab; }
            .omr_page .inner .omr_contents .omr_marking li > div.first .input-component-box .input-wrapper .input_copy_div {
              font-size: 16px;
              color: #24212e;
              line-height: 22px; }
              .omr_page .inner .omr_contents .omr_marking li > div.first .input-component-box .input-wrapper .input_copy_div pre {
                min-height: 20px;
                display: inline-block;
                white-space: pre-line; }
                .omr_page .inner .omr_contents .omr_marking li > div.first .input-component-box .input-wrapper .input_copy_div pre .spacing {
                  padding: 0 2px; }
                .omr_page .inner .omr_contents .omr_marking li > div.first .input-component-box .input-wrapper .input_copy_div pre:after {
                  display: none; }
              .omr_page .inner .omr_contents .omr_marking li > div.first .input-component-box .input-wrapper .input_copy_div.on pre {
                position: relative; }
                .omr_page .inner .omr_contents .omr_marking li > div.first .input-component-box .input-wrapper .input_copy_div.on pre:after {
                  content: '';
                  display: inline-block;
                  position: absolute;
                  bottom: 3px;
                  height: 16px;
                  width: 1px;
                  background: #000;
                  animation: textCursor 1.2s infinite; }
              .omr_page .inner .omr_contents .omr_marking li > div.first .input-component-box .input-wrapper .input_copy_div.defaultOn pre {
                position: relative; }
                .omr_page .inner .omr_contents .omr_marking li > div.first .input-component-box .input-wrapper .input_copy_div.defaultOn pre:after {
                  content: '';
                  display: inline-block;
                  position: absolute;
                  left: 0;
                  top: 0;
                  bottom: 3px;
                  height: 16px;
                  width: 1px;
                  background: #000;
                  animation: textCursor 1.2s infinite; }
              .omr_page .inner .omr_contents .omr_marking li > div.first .input-component-box .input-wrapper .input_copy_div.placeholder {
                color: #a7a6ab; }
                .omr_page .inner .omr_contents .omr_marking li > div.first .input-component-box .input-wrapper .input_copy_div.placeholder pre {
                  color: #a7a6ab; }
          .omr_page .inner .omr_contents .omr_marking li > div.first .input-component-box + button img {
            width: 20px;
            margin-left: 20px; }
      .omr_page .inner .omr_contents .omr_marking li > div.last {
        /*width: 282px; 220812 안재현, 문항삭제 버튼추가로 인한조정 */
        width: 394px;
        float: left;
        border: none;
        padding: 0 0 0 10px;
        display: flex;
        align-items: flex-start;
        flex-direction: column; }
        .omr_page .inner .omr_contents .omr_marking li > div.last li {
          margin-top: 0; }
          .omr_page .inner .omr_contents .omr_marking li > div.last li div.input-component-box {
            border: none;
            display: inline-block;
            width: 66px;
            padding: 0;
            margin: 0 5px 0 10px; }
            .omr_page .inner .omr_contents .omr_marking li > div.last li div.input-component-box .input-wrapper {
              border-color: #7681e5; }
          .omr_page .inner .omr_contents .omr_marking li > div.last li button {
            width: 131px;
            margin-left: 10px;
            font-size: 13px;
            font-weight: 500;
            color: #504d58; }
            .omr_page .inner .omr_contents .omr_marking li > div.last li button.delete_btn {
              width: 106px;
              /* 220812 안재현, 문항삭제 버튼추가로 인한 추가 */ }
          .omr_page .inner .omr_contents .omr_marking li > div.last li:first-of-type {
            color: #7681e5;
            font-size: 16px;
            font-weight: 500; }
        .omr_page .inner .omr_contents .omr_marking li > div.last .mt5 {
          margin-top: 5px; }
      .omr_page .inner .omr_contents .omr_marking li.wrong_answer .first {
        border-color: #ff5050; }
        .omr_page .inner .omr_contents .omr_marking li.wrong_answer .first .input-component-box .input-wrapper {
          border-color: #ff5050; }
      .omr_page .inner .omr_contents .omr_marking li.wrong_answer .last .input-component-box .input-wrapper {
        border-color: #ff5050; }
        .omr_page .inner .omr_contents .omr_marking li.wrong_answer .last .input-component-box .input-wrapper input {
          color: #ff5050; }
    .omr_page .inner .omr_contents .detail_btns {
      margin-top: 0;
      padding-bottom: 30px; }

.omr_page .detail_btns {
  margin-top: 50px; }
  .omr_page .detail_btns button {
    width: 206px;
    display: inline-block;
    text-align: center; }
    .omr_page .detail_btns button + button {
      margin-left: 20px; }

.question_setting.inner {
  width: 1210px; }
  .question_setting.inner .omr_contents {
    padding: 30px; }
    .question_setting.inner .omr_contents .detail_btns {
      margin-top: 50px; }
    .question_setting.inner .omr_contents .cont_box {
      margin-top: 50px; }
      .question_setting.inner .omr_contents .cont_box:first-of-type {
        margin-top: 0; }
      .question_setting.inner .omr_contents .cont_box .top {
        padding-bottom: 20px;
        border-bottom: 1px solid #d3d3d5; }
        .question_setting.inner .omr_contents .cont_box .top > span {
          display: flex;
          align-items: center;
          font-size: 30px;
          font-weight: 700;
          font-family: 'Inter', 'Noto Sans KR', sans-serif;
          padding-left: 20px;
          position: relative; }
          .question_setting.inner .omr_contents .cont_box .top > span .button_warp {
            display: flex;
            flex-direction: column;
            padding-right: 5px; }
            .question_setting.inner .omr_contents .cont_box .top > span .button_warp .button_up {
              top: 0;
              left: 0;
              width: 12px; }
              .question_setting.inner .omr_contents .cont_box .top > span .button_warp .button_up img {
                width: 100%; }
                .question_setting.inner .omr_contents .cont_box .top > span .button_warp .button_up img:hover {
                  cursor: pointer;
                  transform: scale(1.3); }
            .question_setting.inner .omr_contents .cont_box .top > span .button_warp .button_down {
              top: auto;
              bottom: 0px;
              width: 12px;
              transform: rotateZ(180deg); }
              .question_setting.inner .omr_contents .cont_box .top > span .button_warp .button_down img {
                width: 100%; }
                .question_setting.inner .omr_contents .cont_box .top > span .button_warp .button_down img:hover {
                  cursor: pointer;
                  transform: scale(1.3); }
          .question_setting.inner .omr_contents .cont_box .top > span::after {
            content: '';
            display: block;
            width: 12px;
            height: 10px;
            background-color: rgba(255, 255, 255, 0.7);
            position: absolute;
            top: 4px;
            left: 0; }
          .question_setting.inner .omr_contents .cont_box .top > span.on::after {
            top: auto;
            bottom: 4px; }
          .question_setting.inner .omr_contents .cont_box .top > span + ul li {
            margin-left: 20px; }
            .question_setting.inner .omr_contents .cont_box .top > span + ul li.purple_t .input-component-box .input-wrapper {
              border-color: #7681e5;
              height: 40px; }
          .question_setting.inner .omr_contents .cont_box .top > span + ul .select {
            width: 106px; }
            .question_setting.inner .omr_contents .cont_box .top > span + ul .select .select-input {
              padding: 0 15px;
              height: 40px; }
          .question_setting.inner .omr_contents .cont_box .top > span + ul .input-component-box {
            max-width: 66px;
            display: inline-block;
            margin: 0 5px 0 10px; }
      .question_setting.inner .omr_contents .cont_box .cont_layout {
        padding-top: 30px;
        padding-right: 134px; }
        .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix {
          margin-top: 20px; }
          .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > span {
            display: inline-block;
            width: 85px;
            font-size: 16px;
            font-weight: 500;
            color: #24212e;
            float: left;
            margin-top: 15px; }
          .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > ul,
          .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > div {
            position: relative;
            float: left;
            width: calc(100% - 85px);
            padding: 0 20px;
            border: 1px solid #7c7a82;
            border-radius: 8px; }
            .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > ul .img_add_wrap,
            .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > div .img_add_wrap {
              position: absolute;
              top: 0;
              right: -134px; }
              .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > ul .img_add_wrap > button,
              .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > div .img_add_wrap > button {
                width: 114px;
                padding: 16px 0;
                border: 1px solid #7c7a82;
                border-radius: 10px;
                text-align: center; }
              .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > ul .img_add_wrap .btns.padding0,
              .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > div .img_add_wrap .btns.padding0 {
                text-align: center; }
                .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > ul .img_add_wrap .btns.padding0 button,
                .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > div .img_add_wrap .btns.padding0 button {
                  text-align: center; }
            .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > ul li,
            .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > div li {
              line-height: 50px;
              border-top: 1px solid #7c7a82; }
              .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > ul li .input-wrapper,
              .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > div li .input-wrapper {
                border: none;
                padding: 0; }
                .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > ul li .input-wrapper input,
                .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > div li .input-wrapper input {
                  font-size: 16px;
                  color: #7c7a82; }
                  .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > ul li .input-wrapper input::placeholder,
                  .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > div li .input-wrapper input::placeholder {
                    font-size: 16px; }
              .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > ul li:first-of-type,
              .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > div li:first-of-type {
                border-top: none; }
          .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > div {
            padding: 12px 20px; }
            .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > div textarea {
              width: 100%;
              height: 105px;
              font-size: 14px;
              line-height: 21px;
              color: #7c7a82;
              font-family: 'Inter', 'Noto Sans KR', sans-serif; }
            .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > div .font_attr {
              border-radius: 2px;
              border: 1px solid #7c7a82;
              width: max-content;
              margin-bottom: 6px; }
              .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > div .font_attr:after {
                content: '';
                display: block;
                clear: both; }
              .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > div .font_attr li {
                float: left;
                width: 35px;
                height: 35px;
                border-right: 1px solid #7c7a82;
                border-top: none;
                position: relative; }
                .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > div .font_attr li:last-of-type {
                  border-right: none; }
                .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > div .font_attr li i {
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%); }
                  .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > div .font_attr li i.font_medium {
                    font-weight: 500; }
                  .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > div .font_attr li i.underline {
                    text-decoration: underline; }
                  .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > div .font_attr li i.italic {
                    font-style: italic; }
                  .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix > div .font_attr li i.bg {
                    background-color: #a7a6ab;
                    color: #fff;
                    min-width: 17px;
                    text-align: center; }
          .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix .choice_ul {
            padding: 0;
            border: none; }
            .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix .choice_ul li {
              border: none;
              margin-top: 10px; }
              .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix .choice_ul li:first-of-type div.label {
                margin-top: 0; }
              .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix .choice_ul li div.label {
                padding: 10px 16px 10px 25px;
                border: 1px solid #504d58;
                border-radius: 8px;
                margin-top: 10px; }
                .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix .choice_ul li div.label span {
                  display: inline-block;
                  vertical-align: middle;
                  width: 15px;
                  font-size: 20px;
                  font-weight: 500;
                  font-family: 'Inter', 'Noto Sans KR', sans-serif;
                  color: #504d58; }
                .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix .choice_ul li div.label .input-component-box {
                  width: calc(100% - 51px);
                  font-size: 14px;
                  font-family: 'Inter', 'Noto Sans KR', sans-serif;
                  color: #7c7a82;
                  padding-left: 12px;
                  padding-bottom: 6px;
                  border-bottom: 1px solid #7c7a82;
                  margin-right: 20px;
                  display: inline-block;
                  vertical-align: middle; }
                  .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix .choice_ul li div.label .input-component-box .input-wrapper {
                    height: auto; }
                .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix .choice_ul li div.label i {
                  display: inline-block;
                  width: 16px;
                  height: 16px;
                  border: 1px solid #d3d3d5;
                  border-radius: 1px;
                  vertical-align: middle;
                  cursor: pointer; }
              .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix .choice_ul li:first-of-type {
                margin-top: 0; }
              .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix .choice_ul li input[type='checkbox']:checked + div.label {
                border-color: #09b9c6; }
                .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix .choice_ul li input[type='checkbox']:checked + div.label span,
                .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix .choice_ul li input[type='checkbox']:checked + div.label .input-component-box,
                .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix .choice_ul li input[type='checkbox']:checked + div.label input,
                .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix .choice_ul li input[type='checkbox']:checked + div.label input::placeholder,
                .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix .choice_ul li input[type='checkbox']:checked + div.label i {
                  border-color: #09b9c6;
                  color: #09b9c6; }
                .question_setting.inner .omr_contents .cont_box .cont_layout .clearfix .choice_ul li input[type='checkbox']:checked + div.label i {
                  background: url("/img/icon/icon_chk_c.svg") no-repeat center/10px; }
      .question_setting.inner .omr_contents .cont_box .img_box {
        margin: 20px 0; }
        .question_setting.inner .omr_contents .cont_box .img_box > div {
          position: relative; }
          .question_setting.inner .omr_contents .cont_box .img_box > div .img_remove {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 24px;
            height: 24px;
            border: 1px solid #7c7a82;
            background: url("../../../img/icon/icon_x_b.svg") no-repeat center/9px; }

.container .vocabulary_main h1 + button {
  width: 300px; }

.container .vocabulary_main .search_area .book_info .set_date > .select {
  display: inline-block;
  width: 120px;
  margin-right: 8px;
  margin-bottom: 10px; }

.container .vocabulary_main .search_area .book_info .set_date .datepicker_wrap {
  display: inline-block; }
  .container .vocabulary_main .search_area .book_info .set_date .datepicker_wrap .date-picker.rel {
    display: inline-block;
    width: 160px; }
  .container .vocabulary_main .search_area .book_info .set_date .datepicker_wrap span {
    display: inline-block;
    width: auto;
    margin: 0 6px;
    color: #09b9c6; }

.container.special_tr .factory_contents_detail .inner_box {
  padding: 20px 20px 40px 20px;
  background-color: #fff;
  margin-top: 30px;
  border-radius: 10px; }
  .container.special_tr .factory_contents_detail .inner_box p.title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px; }
  .container.special_tr .factory_contents_detail .inner_box .search_book.height_auto {
    height: auto; }
    .container.special_tr .factory_contents_detail .inner_box .search_book.height_auto li {
      margin-bottom: 0; }
  .container.special_tr .factory_contents_detail .inner_box .range_ul {
    width: 400px;
    border: 1px solid #d3d3d5;
    border-radius: 10px;
    padding: 20px 20px 25px 20px;
    margin-bottom: 20px; }
    .container.special_tr .factory_contents_detail .inner_box .range_ul li {
      margin-top: 26px;
      font-size: 16px;
      font-weight: 500;
      font-family: 'Inter', 'Noto Sans KR', sans-serif; }
      .container.special_tr .factory_contents_detail .inner_box .range_ul li:first-of-type {
        margin-top: 0; }
    .container.special_tr .factory_contents_detail .inner_box .range_ul + .floatR ul li {
      font-size: 14px;
      font-weight: 500;
      color: #24212e; }
      .container.special_tr .factory_contents_detail .inner_box .range_ul + .floatR ul li p {
        margin-top: 18px;
        font-size: 20px;
        font-weight: 700; }
      .container.special_tr .factory_contents_detail .inner_box .range_ul + .floatR ul li:last-child {
        margin-top: 30px; }

@media screen and (max-width: 1800px) {
  .range_count_ul {
    width: 100;
    float: left; }
    .range_count_ul ul {
      display: flex; }
      .range_count_ul ul li:last-of-type {
        margin-left: 40px; }
  .container.special_tr .factory_contents_detail .inner_box .range_ul {
    width: 100%; }
  .container.special_tr .factory_contents_detail .inner_box .range_ul + .floatR ul li:last-child {
    margin-top: 0; } }

@media screen and (max-width: 1614px) {
  .container .vocabulary_main .search_area .book_info .set_date > .select {
    width: 100%; }
  .container .vocabulary_main .search_area .book_info .set_date .datepicker_wrap {
    display: flex;
    align-items: center; }
    .container .vocabulary_main .search_area .book_info .set_date .datepicker_wrap .date-picker {
      flex: 1;
      width: initial; }
      .container .vocabulary_main .search_area .book_info .set_date .datepicker_wrap .date-picker > .input {
        width: initial; } }

.mt10 {
  margin-top: 10px; }

.btn_alert {
  font-size: 12px;
  color: #ff5050;
  margin-top: 5px;
  padding-left: 124px; }

.container.add_vocabulary .factory_contents_box .search_area li .disabled .input-component-box .input-wrapper {
  /*
                background: #f5f5f7;
                */
  background: #e9e9ea; }

.container.add_vocabulary .factory_contents_box .search_area .book_img.small {
  width: 85px;
  height: 116px; }

.container.add_vocabulary .factory_contents_detail > div.line_tab {
  padding-bottom: 0;
  margin-bottom: 20px; }
  .container.add_vocabulary .factory_contents_detail > div.line_tab li:last-of-type {
    display: none; }

.container.add_vocabulary .factory_contents_detail .transparent_input {
  margin-bottom: 30px; }
  .container.add_vocabulary .factory_contents_detail .transparent_input .input-wrapper {
    background-color: transparent;
    border: 1px solid #6bd5dd; }

.container.add_vocabulary .factory_contents_detail .list_box {
  padding: 20px;
  border: 1px solid #d3d3d5;
  border-radius: 10px;
  max-height: 265px;
  overflow-y: auto; }
  .container.add_vocabulary .factory_contents_detail .list_box li {
    margin-top: 15px; }
    .container.add_vocabulary .factory_contents_detail .list_box li p {
      line-height: 35px;
      font-size: 16px;
      font-weight: 500;
      font-family: 'Inter', 'Noto Sans KR', sans-serif;
      width: calc(100% - 45px);
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden; }
    .container.add_vocabulary .factory_contents_detail .list_box li:first-of-type {
      margin-top: 0; }
    .container.add_vocabulary .factory_contents_detail .list_box li input[type='checkbox'] + label {
      font: inherit;
      color: inherit;
      display: inline-block;
      width: 100%;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden; }

.container.add_vocabulary .factory_contents_detail .choice_vocabulary {
  margin-top: 26px; }
  .container.add_vocabulary .factory_contents_detail .choice_vocabulary > span {
    font-size: 14px;
    font-weight: 500;
    color: #24212e;
    display: inline-block;
    margin-right: 30px;
    line-height: 40px; }
    .container.add_vocabulary .factory_contents_detail .choice_vocabulary > span > span {
      font-size: 20px;
      font-weight: 700;
      color: #24212e;
      margin-left: 12px;
      margin-right: 0; }
    .container.add_vocabulary .factory_contents_detail .choice_vocabulary > span .input-component-box {
      width: 50px;
      height: 30px;
      display: inline-block;
      margin-left: 12px;
      margin-right: 5px;
      border-radius: 2px;
      vertical-align: middle; }
      .container.add_vocabulary .factory_contents_detail .choice_vocabulary > span .input-component-box .input-wrapper {
        height: 30px;
        padding: 0; }
        .container.add_vocabulary .factory_contents_detail .choice_vocabulary > span .input-component-box .input-wrapper input {
          text-align: center; }
  .container.add_vocabulary .factory_contents_detail .choice_vocabulary button {
    display: inline-block;
    text-align: center;
    float: right; }

.container.add_vocabulary .factory_contents_detail .tr_detail_box .tr_detail_box2 {
  margin-right: 0;
  align-items: flex-start; }
  .container.add_vocabulary .factory_contents_detail .tr_detail_box .tr_detail_box2 > span {
    margin-top: 11px; }
  .container.add_vocabulary .factory_contents_detail .tr_detail_box .tr_detail_box2 .detail_edit_wrap {
    display: flex;
    flex-direction: column;
    flex: 1; }

.container.add_vocabulary .factory_contents_detail .detail_edit {
  width: 100%; }
  .container.add_vocabulary .factory_contents_detail .detail_edit label {
    display: inline-block; }
  .container.add_vocabulary .factory_contents_detail .detail_edit .input-component-box {
    display: inline-block;
    width: 57px;
    height: 32px; }
    .container.add_vocabulary .factory_contents_detail .detail_edit .input-component-box .input-wrapper {
      height: 32px;
      border-radius: 2px; }

.range_controller p.title {
  margin-bottom: 0; }

.range_controller button {
  text-align: center;
  min-width: 82px;
  line-height: 22px;
  padding: 4px 7px;
  font-size: 13px;
  font-weight: 500;
  color: #09b9c6;
  border: 1px solid #09b9c6;
  border-radius: 10px; }
  .range_controller button + button {
    margin-right: 10px; }
  .range_controller button:hover:enabled {
    color: #09a9a6;
    border: 1px solid #09a9a6; }

.range_controller .disabled {
  color: #7c7a82;
  border: 1px solid #7c7a82;
  cursor: default; }

.container.vocabulary_teacher .test_ul_list {
  margin-top: 30px;
  max-height: 100vh;
  overflow-y: auto; }
  .container.vocabulary_teacher .test_ul_list li {
    position: relative;
    padding: 30px 20px 30px 60px;
    border: 1px solid #9de3e8;
    border-radius: 20px;
    background-color: #fff;
    margin-top: 20px; }
    .container.vocabulary_teacher .test_ul_list li:first-of-type {
      margin-top: 0; }
    .container.vocabulary_teacher .test_ul_list li .num {
      position: absolute;
      top: 30px;
      left: 20px;
      font-size: 14px;
      font-weight: 700;
      color: #24212e; }
    .container.vocabulary_teacher .test_ul_list li .test_box {
      margin-top: 15px; }
      .container.vocabulary_teacher .test_ul_list li .test_box:first-of-type {
        margin-top: 0; }
      .container.vocabulary_teacher .test_ul_list li .test_box span {
        width: 50px;
        font-size: 14px;
        color: #7c7a82;
        display: inline-block;
        float: left; }
      .container.vocabulary_teacher .test_ul_list li .test_box p {
        display: inline-block;
        width: calc(100% - 50px);
        font-size: 14px;
        font-weight: 500;
        color: #24212e; }
      .container.vocabulary_teacher .test_ul_list li .test_box.half:after {
        content: '';
        display: block;
        clear: both; }
      .container.vocabulary_teacher .test_ul_list li .test_box.half > div {
        width: 50%;
        float: left; }

.container.new_vocabulary .inner {
  width: 950px;
  margin: 0 auto; }
  .container.new_vocabulary .inner .title_area h1 {
    font-size: 40px;
    font-weight: 700;
    color: #24212e; }
    .container.new_vocabulary .inner .title_area h1 p {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 10px;
      color: #6bd5dd; }
      .container.new_vocabulary .inner .title_area h1 p span {
        color: #a7a6ad;
        font: inherit; }
  .container.new_vocabulary .inner .title_area ul {
    margin-top: 26px; }
    .container.new_vocabulary .inner .title_area ul li {
      list-style: none;
      float: left;
      margin-left: 20px; }
      .container.new_vocabulary .inner .title_area ul li button {
        min-width: 134px;
        padding: 0 15px; }
  .container.new_vocabulary .inner .produce_info {
    margin-top: 30px; }
    .container.new_vocabulary .inner .produce_info li {
      float: left; }
      .container.new_vocabulary .inner .produce_info li span {
        display: inline-block;
        width: 54px;
        font-size: 18px;
        font-weight: 700;
        color: #24212e; }
      .container.new_vocabulary .inner .produce_info li .select {
        display: inline-block;
        width: 143px; }
      .container.new_vocabulary .inner .produce_info li .input-component-box {
        display: inline-block; }
      .container.new_vocabulary .inner .produce_info li:nth-of-type(2) {
        width: calc(100% - 350px);
        padding: 0 20px; }
        .container.new_vocabulary .inner .produce_info li:nth-of-type(2) .input-component-box {
          width: calc(100% - 54px); }
      .container.new_vocabulary .inner .produce_info li:last-of-type .input-component-box {
        width: 60px; }
        .container.new_vocabulary .inner .produce_info li:last-of-type .input-component-box .input-wrapper {
          padding: 0; }
          .container.new_vocabulary .inner .produce_info li:last-of-type .input-component-box .input-wrapper input {
            text-align: center; }
  .container.new_vocabulary .inner .icon_ul li {
    margin-left: 20px; }
    .container.new_vocabulary .inner .icon_ul li img {
      width: 21px; }
  .container.new_vocabulary .inner .produce_box {
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
    border-radius: 20px;
    padding: 20px 50px 30px;
    margin-top: 20px;
    margin-bottom: 40px; }
    .container.new_vocabulary .inner .produce_box > div select {
      min-width: 140px;
      width: initial; }
    .container.new_vocabulary .inner .produce_box + button {
      width: 206px;
      box-shadow: 0px 3px 3px rgba(118, 129, 229, 0.3);
      border-radius: 15px; }
    .container.new_vocabulary .inner .produce_box .select {
      float: right; }
      .container.new_vocabulary .inner .produce_box .select .select-input {
        height: 40px; }
    .container.new_vocabulary .inner .produce_box .question_box {
      margin-bottom: 30px;
      margin-top: 30px; }
      .container.new_vocabulary .inner .produce_box .question_box li {
        margin-top: 30px; }
        .container.new_vocabulary .inner .produce_box .question_box li div.head {
          font-size: 30px;
          font-weight: 700;
          font-family: 'Inter', 'Noto Sans KR', sans-serif;
          padding-bottom: 20px;
          border-bottom: 1px solid #d3d3d5; }
          .container.new_vocabulary .inner .produce_box .question_box li div.head img {
            width: 21px; }
        .container.new_vocabulary .inner .produce_box .question_box li .question_input_box {
          padding-top: 30px; }
          .container.new_vocabulary .inner .produce_box .question_box li .question_input_box .half_div:after {
            content: '';
            display: block;
            clear: both; }
          .container.new_vocabulary .inner .produce_box .question_box li .question_input_box .half_div > div {
            float: left;
            width: calc(100% - 370px); }
            .container.new_vocabulary .inner .produce_box .question_box li .question_input_box .half_div > div:first-of-type {
              width: 370px; }
            .container.new_vocabulary .inner .produce_box .question_box li .question_input_box .half_div > div span.wid_107 {
              width: 107px;
              padding-left: 40px; }
              .container.new_vocabulary .inner .produce_box .question_box li .question_input_box .half_div > div span.wid_107 + .input-component-box {
                width: calc(100% - 107px); }
          .container.new_vocabulary .inner .produce_box .question_box li .question_input_box span {
            display: inline-block;
            width: 84px;
            font-size: 16px;
            font-weight: 500;
            color: #24212e;
            line-height: 48px; }
          .container.new_vocabulary .inner .produce_box .question_box li .question_input_box .input-component-box {
            display: inline-block;
            width: calc(100% - 84px); }
          .container.new_vocabulary .inner .produce_box .question_box li .question_input_box > div {
            margin-top: 20px; }
            .container.new_vocabulary .inner .produce_box .question_box li .question_input_box > div:first-of-type {
              margin-top: 0; }
      .container.new_vocabulary .inner .produce_box .question_box + button {
        width: 206px; }

.new_couse .payment .set_date {
  margin-bottom: 0; }
  .new_couse .payment .set_date p {
    width: 80px;
    margin-right: 0; }

.new_couse .transparent_input {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #d3d3d5; }
  .new_couse .transparent_input .input-wrapper {
    background-color: transparent;
    border: 1px solid #6bd5dd; }

.new_couse .group_box {
  margin-bottom: 6px; }
  .new_couse .group_box.group_ul {
    padding-right: 60px;
    position: relative;
    margin-bottom: 20px; }
    .new_couse .group_box.group_ul ul {
      padding: 27px 20px 33px;
      border-radius: 20px;
      border: 1px solid #84dce2;
      background-color: #fff;
      margin-top: 20px; }
      .new_couse .group_box.group_ul ul li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0;
        margin-top: 20px; }
        .new_couse .group_box.group_ul ul li:hover {
          border-color: transparent; }
    .new_couse .group_box.group_ul img {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 7px; }
  .new_couse .group_box ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border: 1px solid transparent;
    cursor: pointer;
    /*
                &:hover {
                    background-color: #fff;
                    border-radius: 10px;
                    border-color: #7681E5;

                    .hover_event {
                        display: block;
                    }
                }
                */ }
    .new_couse .group_box ul li:first-of-type {
      margin-top: 0; }
    .new_couse .group_box ul li span {
      vertical-align: middle;
      text-align: center;
      display: inline-block;
      font-size: 14px;
      font-weight: 500; }
      .new_couse .group_box ul li span:first-of-type {
        margin-right: 0;
        width: 50px;
        height: 25px;
        font-size: 12px;
        font-weight: 800;
        padding: 0;
        text-align: center;
        line-height: 21px; }
      .new_couse .group_box ul li span:nth-of-type(5), .new_couse .group_box ul li span:nth-of-type(6), .new_couse .group_box ul li span:nth-of-type(7) {
        width: 35px; }
      .new_couse .group_box ul li span:nth-of-type(4) {
        width: 55px;
        text-align: right; }
      .new_couse .group_box ul li span.ellipsis {
        width: calc(100% - 320px);
        text-align: left;
        font-size: 16px;
        font-weight: 500;
        color: #24212e; }
      .new_couse .group_box ul li span.q_type {
        width: 40px; }
    .new_couse .group_box ul li.on {
      background-color: #fff;
      border-radius: 10px;
      border-color: #7681e5; }
      .new_couse .group_box ul li.on .hover_event {
        display: block; }
    .new_couse .group_box ul li:hover .hover_event {
      display: block; }

.new_couse .course-box .list-box ul li .course-subject .subject.vocabulary + .side {
  width: 50%; }

.new_couse .course-box .list-box ul li .course-subject .side .target i {
  position: static; }

.subject.vocabulary h3:hover + .tooltip {
  visibility: visible;
  opacity: 1; }

.subject.vocabulary .tooltip {
  top: 32px;
  left: 30px; }

.btn_reset .print_pop {
  max-height: none; }

.print_pop {
  position: relative;
  width: 494px;
  height: max-content;
  background-color: #fff;
  border-radius: 15px;
  max-height: 80vh;
  overflow: auto; }
  .print_pop > div {
    width: 100%;
    padding: 32px;
    position: relative; }
    .print_pop > div .half_div {
      width: 50%;
      vertical-align: top;
      display: inline-block; }
    .print_pop > div .title {
      font-size: 24px !important;
      font-weight: 700;
      color: #24212e;
      padding-bottom: 20px; }
    .print_pop > div label {
      cursor: pointer; }
    .print_pop > div .print_setting .print_info input[type='radio']:checked + label {
      border-color: #09b9c6; }
      .print_pop > div .print_setting .print_info input[type='radio']:checked + label span {
        color: #09b9c6; }
    .print_pop > div .print_setting .print_info .mini_title {
      font-size: 14px;
      color: #7c7a82;
      margin-bottom: 8px; }
    .print_pop > div .print_setting .print_info .layout_setting label {
      position: relative;
      display: inline-block;
      width: calc(50% - 10px);
      height: 180px;
      border-radius: 8px;
      border: 1px solid #dfdfe4; }
      .print_pop > div .print_setting .print_info .layout_setting label:not(:last-child) {
        margin-right: 20px; }
      .print_pop > div .print_setting .print_info .layout_setting label span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 14px;
        font-weight: 500;
        font-family: 'Roboto', 'Noto Sans KR', sans-serif;
        color: #a7a6ab; }
      .print_pop > div .print_setting .print_info .layout_setting label.on {
        border-color: #09b9c6; }
        .print_pop > div .print_setting .print_info .layout_setting label.on span {
          color: #09b9c6; }
      .print_pop > div .print_setting .print_info .layout_setting label:nth-of-type(2)::after {
        content: '';
        display: block;
        width: 1px;
        height: 100%;
        position: absolute;
        top: 0;
        left: 50%;
        background: url("/img/icon/icon_dashed.svg") no-repeat center/contain; }
    .print_pop > div .print_setting .print_info .layout_setting label.layout_two::after {
      content: '';
      display: block;
      width: 3px;
      height: 100%;
      position: absolute;
      top: 0;
      left: 50%;
      background: url("/img/icon/icon_dashed.svg") no-repeat center/contain; }
    .print_pop > div .print_setting .print_info .button_style_label {
      margin-top: 20px; }
      .print_pop > div .print_setting .print_info .button_style_label:first-of-type {
        margin-top: 0; }
      .print_pop > div .print_setting .print_info .button_style_label input[type='radio']:checked + label {
        border-color: #09b9c6;
        background-color: #09b9c6;
        color: #fff; }
      .print_pop > div .print_setting .print_info .button_style_label label {
        display: inline-block;
        width: calc(33.33% - 6px);
        line-height: 34px;
        font-size: 14px;
        font-weight: 400;
        color: #504d58;
        border: 1px solid #dfdfe4;
        border-radius: 8px;
        text-align: center; }
        .print_pop > div .print_setting .print_info .button_style_label label:not(:last-child) {
          margin-right: 8px; }
    .print_pop > div .print_setting .print_info .answer_chk {
      margin-top: 12px;
      display: flex;
      justify-content: flex-end;
      /*margin-right: 90px;*/ }
      .print_pop > div .print_setting .print_info .answer_chk label {
        font-size: 14px;
        color: #504d58; }
    .print_pop > div .print_setting button {
      width: 120px;
      height: 44px;
      font-size: 16px;
      font-weight: 400;
      border-radius: 8px;
      margin-top: 40px;
      text-align: center; }
    .print_pop > div .print_setting .swiper-slide img {
      display: block;
      margin: 0 auto; }
    .print_pop > div .print_setting .pagination {
      font-size: 15px;
      font-weight: 700;
      font-family: 'Inter', 'Noto Sans KR', sans-serif;
      color: #a7a6ab; }
    .print_pop > div:first-of-type {
      border-right: 1px solid #d3d3d5; }
  .print_pop.print_opt_pop {
    width: 840px; }
    .print_pop.print_opt_pop.phrase {
      width: 424px; }
      .print_pop.print_opt_pop.phrase > div {
        padding: 37px 36px 30px; }
        .print_pop.print_opt_pop.phrase > div .pc-main-button.main {
          width: 144px;
          height: 45px;
          border-radius: 10px;
          font-size: 18px; }
        .print_pop.print_opt_pop.phrase > div .opt_content {
          padding: 36px 0 24px; }
          .print_pop.print_opt_pop.phrase > div .opt_content > div {
            display: flex;
            flex-direction: column;
            margin: auto;
            width: 316px;
            height: 401px; }
            .print_pop.print_opt_pop.phrase > div .opt_content > div .label_title {
              font-size: 20px;
              font-weight: 700;
              margin-bottom: 7px; }
            .print_pop.print_opt_pop.phrase > div .opt_content > div .label_sub_title {
              color: #7c7a82;
              font-size: 10px;
              margin-bottom: 40px; }
            .print_pop.print_opt_pop.phrase > div .opt_content > div .bottom {
              margin-top: auto;
              text-align: right; }
          .print_pop.print_opt_pop.phrase > div .opt_content input[type='radio'] + label {
            display: flex;
            align-items: center;
            margin-bottom: 23px;
            color: #7c7a82; }
            .print_pop.print_opt_pop.phrase > div .opt_content input[type='radio'] + label span {
              text-align: center;
              color: #7c7a82;
              margin-left: 16px;
              font-size: 11px; }
          .print_pop.print_opt_pop.phrase > div .opt_content input[type='radio'] + label i {
            display: inline-block;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 1px solid #d3d3d5;
            position: relative;
            vertical-align: middle;
            margin-right: 19px; }
          .print_pop.print_opt_pop.phrase > div .opt_content input[type='radio']:checked + label {
            color: #7681e5; }
          .print_pop.print_opt_pop.phrase > div .opt_content input[type='radio']:checked + label i {
            border: 2px solid #7681e5; }
          .print_pop.print_opt_pop.phrase > div .opt_content input[type='radio']:checked + label i:after {
            content: '';
            display: block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #7681e5;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            -webkit-box-sizing: border-box;
            box-sizing: border-box; }
          .print_pop.print_opt_pop.phrase > div .opt_content .selectBox {
            margin-left: 45px;
            width: 100px;
            height: 20px; }
    .print_pop.print_opt_pop > div {
      width: 100%; }
      .print_pop.print_opt_pop > div .opt_content {
        padding: 30px 160px; }
        .print_pop.print_opt_pop > div .opt_content > div {
          border: 1px solid #2adac1;
          border-radius: 10px;
          padding: 30px; }
          .print_pop.print_opt_pop > div .opt_content > div .label_title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 20px; }
          .print_pop.print_opt_pop > div .opt_content > div li {
            margin-bottom: 10px; }
            .print_pop.print_opt_pop > div .opt_content > div li .input-title {
              margin-top: 14px;
              font-size: 16px; }
              .print_pop.print_opt_pop > div .opt_content > div li .input-title label {
                font-size: 12px;
                margin-top: 6px;
                margin-left: 8px; }
            .print_pop.print_opt_pop > div .opt_content > div li .input-box {
              width: 80px; }
              .print_pop.print_opt_pop > div .opt_content > div li .input-box .input-component-box {
                width: calc(100% - 20px);
                margin: 0;
                margin-right: 4px;
                display: inline-block; }
                .print_pop.print_opt_pop > div .opt_content > div li .input-box .input-component-box .input-wrapper {
                  height: 40px; }
              .print_pop.print_opt_pop > div .opt_content > div li .input-box p {
                margin-top: 2px;
                font-size: 12px; }
          .print_pop.print_opt_pop > div .opt_content > div .label_ea {
            margin-top: 20px;
            font-size: 18px;
            font-weight: 600; }
            .print_pop.print_opt_pop > div .opt_content > div .label_ea span {
              font-size: inherit;
              font-weight: inherit; }
              .print_pop.print_opt_pop > div .opt_content > div .label_ea span.red_t {
                color: #e23636; }
  .print_pop.print_pop_w {
    min-width: 440px; }

.test_produce_pop {
  overflow-y: auto; }
  .test_produce_pop .pop_cont {
    background-color: #fff; }
    .test_produce_pop .pop_cont h2 {
      font-size: 40px;
      font-weight: 700;
      color: #24212E;
      margin-bottom: 50px; }
    .test_produce_pop .pop_cont .produce_form .form_ul {
      padding-bottom: 30px;
      border-bottom: 1px solid #e9e9ea; }
      .test_produce_pop .pop_cont .produce_form .form_ul li {
        margin-top: 34px; }
        .test_produce_pop .pop_cont .produce_form .form_ul li .input-component-box .input-wrapper {
          height: 44px; }
        .test_produce_pop .pop_cont .produce_form .form_ul li:first-of-type {
          margin-top: 0; }
        .test_produce_pop .pop_cont .produce_form .form_ul li:after {
          content: '';
          display: block;
          clear: both; }
        .test_produce_pop .pop_cont .produce_form .form_ul li > span {
          width: 220px;
          display: inline-block;
          float: left;
          font-size: 16px;
          font-weight: 500;
          color: #504d58; }
        .test_produce_pop .pop_cont .produce_form .form_ul li > div {
          width: calc(100% - 220px);
          float: left; }
        .test_produce_pop .pop_cont .produce_form .form_ul li label {
          margin-left: 38px;
          font-size: 16px;
          font-weight: 500;
          font-family: 'Inter', 'Noto Sans KR', sans-serif; }
          .test_produce_pop .pop_cont .produce_form .form_ul li label:first-of-type {
            margin-left: 0; }
        .test_produce_pop .pop_cont .produce_form .form_ul li .max_width .input-component-box {
          width: 66px;
          margin-right: 5px;
          display: inline-block; }
          .test_produce_pop .pop_cont .produce_form .form_ul li .max_width .input-component-box .input-wrapper {
            height: 44px; }
        .test_produce_pop .pop_cont .produce_form .form_ul li .alert_type {
          font-size: 13px;
          font-weight: 500;
          color: #a7a6ab;
          margin-top: 6px; }
    .test_produce_pop .pop_cont .produce_form .question_time {
      padding-top: 30px; }
      .test_produce_pop .pop_cont .produce_form .question_time p {
        font-size: 20px;
        font-weight: 500;
        color: #504d58;
        margin-bottom: 20px; }
      .test_produce_pop .pop_cont .produce_form .question_time li {
        width: calc(50% - 17.5px); }
        .test_produce_pop .pop_cont .produce_form .question_time li:last-of-type {
          margin-left: 35px; }
        .test_produce_pop .pop_cont .produce_form .question_time li textarea {
          width: 100%;
          padding: 20px;
          border-radius: 10px;
          height: 190px;
          border: 1px solid #504d58;
          font-size: 14px;
          font-weight: 500;
          color: #a7a6ab; }
    .test_produce_pop .pop_cont .produce_form button {
      width: 206px;
      display: inline-block;
      margin-top: 30px; }
      .test_produce_pop .pop_cont .produce_form button + button {
        margin-left: 20px; }

.vocabulary_card_pop.couse_pop .pop_cont {
  padding: 38px 63px 46px; }
  .vocabulary_card_pop.couse_pop .pop_cont .card_ul {
    justify-content: center;
    margin-bottom: 50px; }
    .vocabulary_card_pop.couse_pop .pop_cont .card_ul > li label {
      padding: 0;
      width: auto;
      line-height: 1;
      border: none;
      margin: 0; }
    .vocabulary_card_pop.couse_pop .pop_cont .card_ul .table_wrap {
      max-height: 500px;
      overflow-y: auto; }
      .vocabulary_card_pop.couse_pop .pop_cont .card_ul .table_wrap table {
        border-collapse: inherit; }
        .vocabulary_card_pop.couse_pop .pop_cont .card_ul .table_wrap table tr.on td {
          border-top: 2px solid #09b9c6;
          border-bottom: 2px solid #09b9c6; }
          .vocabulary_card_pop.couse_pop .pop_cont .card_ul .table_wrap table tr.on td:first-of-type {
            border-left: 2px solid #09b9c6;
            border-radius: 20px 0 0 20px; }
          .vocabulary_card_pop.couse_pop .pop_cont .card_ul .table_wrap table tr.on td:last-of-type {
            border-right: 2px solid #09b9c6;
            border-radius: 0 20px 20px 0; }
        .vocabulary_card_pop.couse_pop .pop_cont .card_ul .table_wrap table td.leftT {
          font-weight: 700;
          color: #24212e; }

.vocabulary_card_pop .pop_cont {
  padding: 35px 61px 46px 63px; }
  .vocabulary_card_pop .pop_cont h2 {
    font-size: 26px;
    font-weight: 700;
    color: #24212e;
    margin-bottom: 30px; }
    .vocabulary_card_pop .pop_cont h2 span {
      font-size: 22px;
      font-weight: 700;
      color: #7681e5; }
  .vocabulary_card_pop .pop_cont .card_ul {
    display: flex; }
    .vocabulary_card_pop .pop_cont .card_ul > li {
      width: calc(50% - 10px);
      border-radius: 15px;
      border: 1px solid #7681e5; }
      .vocabulary_card_pop .pop_cont .card_ul > li:first-of-type {
        margin-right: 20px; }
      .vocabulary_card_pop .pop_cont .card_ul > li > p {
        line-height: 70px;
        color: #fff;
        font-size: 20px;
        font-weight: 500;
        border-radius: 13px 13px 0 0; }
      .vocabulary_card_pop .pop_cont .card_ul > li > div {
        padding: 40px 30px; }
      .vocabulary_card_pop .pop_cont .card_ul > li:first-of-type {
        border-color: #09b9c6; }
      .vocabulary_card_pop .pop_cont .card_ul > li input[type='checkbox']:checked + label,
      .vocabulary_card_pop .pop_cont .card_ul > li input[type='radio']:checked + label {
        color: #09b9c6;
        border-color: #09b9c6; }
      .vocabulary_card_pop .pop_cont .card_ul > li label {
        display: inline-block;
        width: 117px;
        line-height: 42px;
        font-size: 13px;
        font-weight: 500;
        color: #7c7a82;
        border: 0.876106px solid #7c7a82;
        text-align: center;
        margin-right: 20px;
        border-radius: 10px;
        margin-bottom: 24px;
        position: relative; }
        .vocabulary_card_pop .pop_cont .card_ul > li label.abs {
          position: absolute;
          left: 0;
          bottom: 0;
          line-height: 1.2;
          border: none;
          margin-bottom: 0; }
      .vocabulary_card_pop .pop_cont .card_ul > li .label_title {
        font-size: 20px;
        font-weight: 700;
        color: #24212e;
        margin-bottom: 15px; }
      .vocabulary_card_pop .pop_cont .card_ul > li .test_ul li {
        margin-top: 17px; }
        .vocabulary_card_pop .pop_cont .card_ul > li .test_ul li:first-of-type {
          margin-top: 0; }
      .vocabulary_card_pop .pop_cont .card_ul > li .test_ul label {
        display: block;
        border: none;
        margin-bottom: 0;
        line-height: 22px; }
      .vocabulary_card_pop .pop_cont .card_ul > li .test_ul span.floatL {
        line-height: 32px;
        font-size: 16px;
        font-weight: 500;
        color: #504d58; }
      .vocabulary_card_pop .pop_cont .card_ul > li .test_ul .input-component-box {
        display: inline-block;
        width: 57px;
        margin-right: 8px; }
        .vocabulary_card_pop .pop_cont .card_ul > li .test_ul .input-component-box .input-wrapper {
          border-radius: 2px;
          height: 32px; }
      .vocabulary_card_pop .pop_cont .card_ul > li .test_ul .mini_alert {
        font-size: 12px;
        font-weight: 500;
        color: #7c7a82; }
      .vocabulary_card_pop .pop_cont .card_ul > li .test_ul + .purple_t {
        font-size: 20px;
        font-weight: 700;
        margin-top: 20px; }
  .vocabulary_card_pop .pop_cont .open_question {
    margin-top: 20px;
    padding: 24px 30px;
    background-color: #fff;
    border: 1px solid #a7a6ab;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
    border-radius: 15px; }
    .vocabulary_card_pop .pop_cont .open_question span {
      font-size: 20px;
      font-weight: 700;
      color: #24212e;
      margin-right: 30px; }
    .vocabulary_card_pop .pop_cont .open_question label {
      margin-right: 30px;
      font-size: 16px;
      font-weight: 500;
      color: #7c7a82; }
    .vocabulary_card_pop .pop_cont .open_question input[type='radio']:checked + label {
      color: #09b9c6; }
      .vocabulary_card_pop .pop_cont .open_question input[type='radio']:checked + label i {
        border-color: #09b9c6; }
        .vocabulary_card_pop .pop_cont .open_question input[type='radio']:checked + label i:after {
          background-color: #09b9c6;
          border-color: #09b9c6; }
  .vocabulary_card_pop .pop_cont .save_btn {
    margin-top: 17px;
    text-align: center; }
    .vocabulary_card_pop .pop_cont .save_btn button {
      display: inline-block;
      width: 206px;
      text-align: center; }
      .vocabulary_card_pop .pop_cont .save_btn button + button {
        margin-left: 20px; }

.vocabulary_card_pop .min190_box {
  min-height: 190px; }

.vocabulary_card_pop .tr_count {
  font-size: 20px;
  font-weight: 700;
  color: #7681e5;
  text-align: right !important;
  margin-top: 20px; }

.vocabulary_card_pop.vocabulary_card_pop2 .card_ul > li {
  max-width: 500px;
  float: none;
  display: inline-block; }
  .vocabulary_card_pop.vocabulary_card_pop2 .card_ul > li div {
    text-align: left; }
  .vocabulary_card_pop.vocabulary_card_pop2 .card_ul > li .open_question {
    padding: 0;
    border: none;
    box-shadow: none; }
    .vocabulary_card_pop.vocabulary_card_pop2 .card_ul > li .open_question label {
      border: none;
      width: auto; }

.vocabulary_card_pop.voca_set .pop_cont .card_ul {
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .vocabulary_card_pop.voca_set .pop_cont .card_ul > li {
    width: calc(50% - 60px); }
    .vocabulary_card_pop.voca_set .pop_cont .card_ul > li:nth-of-type(2) ol li input[type='checkbox']:checked + label {
      border-color: #7681e5;
      color: #7681e5; }
    .vocabulary_card_pop.voca_set .pop_cont .card_ul > li ol {
      padding-top: 15px;
      overflow-y: auto;
      height: calc(60vh - 70px); }
      .vocabulary_card_pop.voca_set .pop_cont .card_ul > li ol li {
        text-align: center; }
        .vocabulary_card_pop.voca_set .pop_cont .card_ul > li ol li label {
          min-width: 117px;
          width: auto;
          border-color: transparent;
          font-size: 20px;
          font-family: 'Inter', 'Noto Sans KR', sans-serif;
          padding: 0 40px; }
        .vocabulary_card_pop.voca_set .pop_cont .card_ul > li ol li input[type='checkbox']:checked + label {
          border-color: #09b9c6;
          box-shadow: 0px 3px 4px rgba(104, 154, 170, 0.3); }
    .vocabulary_card_pop.voca_set .pop_cont .card_ul > li.arrow_box {
      width: initial;
      height: initial;
      border: none; }
      .vocabulary_card_pop.voca_set .pop_cont .card_ul > li.arrow_box button {
        display: block;
        margin-left: 0;
        margin-right: 0; }
        .vocabulary_card_pop.voca_set .pop_cont .card_ul > li.arrow_box button + button {
          margin-top: 18px; }

.inline-block {
  display: inline-block; }

.home_title {
  font-size: 48px;
  font-weight: 700;
  color: #24212e;
  line-height: 1.21;
  text-align: center;
  font-family: 'Noto Sans KR', sans-serif; }

.home_subtitle {
  font-size: 18px;
  font-weight: 700;
  color: #09b9c6;
  line-height: 1.21;
  text-align: center;
  font-family: 'Inter', 'Noto Sans KR';
  letter-spacing: 0.4em; }
  .home_subtitle + .home_title {
    margin-top: 6px; }

.swiper-container img {
  max-width: 100%; }

.swiper-container .swiper-button-prev,
.swiper-container .swiper-button-next {
  color: #504d58;
  cursor: pointer; }

.swiper-container .swiper-pagination.swiper-pagination-bullets {
  bottom: 10px; }
  .swiper-container .swiper-pagination.swiper-pagination-bullets > span {
    width: 9px;
    height: 9px;
    background: #a7a6ab;
    margin: 0;
    opacity: 1;
    transition: 0.21s;
    margin-right: 13px; }
    .swiper-container .swiper-pagination.swiper-pagination-bullets > span.swiper-pagination-bullet-active {
      width: 24px;
      background: #09b9c6;
      border-radius: 5px; }

#landing_pc {
  position: relative; }
  #landing_pc .has_fixed_header {
    margin-top: 124px; }
    #landing_pc .has_fixed_header.isGirdleBanner {
      margin-top: 204px; }
  #landing_pc .container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    padding: 120px 0; }
  #landing_pc .tab_style {
    margin: 50px 0 40px; }
  #landing_pc .pop_circle {
    width: 220px;
    height: 220px;
    cursor: pointer;
    position: fixed;
    right: 60px;
    bottom: 116px;
    text-align: center;
    z-index: 100;
    /* ios fixed 이슈 관련 */ }
    @media (orientation: landscape) {
      #landing_pc .pop_circle {
        position: fixed; } }
    @media (orientation: portrait) {
      #landing_pc .pop_circle {
        position: fixed; } }
    #landing_pc .pop_circle > div {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 48%;
      left: 50%;
      transform: translate(-50%, -50%); }
      #landing_pc .pop_circle > div img {
        cursor: pointer;
        position: relative;
        top: 24px; }
      #landing_pc .pop_circle > div p {
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        color: #fff;
        margin-top: 8px; }
        #landing_pc .pop_circle > div p span {
          font-size: inherit;
          font-weight: bold;
          color: inherit;
          line-height: inherit; }
      #landing_pc .pop_circle > div button {
        display: block;
        font-size: 13px;
        font-weight: bold;
        color: #7681e5;
        padding: 0 15px;
        background-color: #fff;
        border-radius: 10px;
        line-height: 33px;
        margin: 6px auto 14px; }
      #landing_pc .pop_circle > div label {
        font-size: 12px;
        font-weight: 500;
        color: #fff;
        justify-content: center;
        position: relative;
        top: 162px; }
        #landing_pc .pop_circle > div label i {
          margin-right: 3px; }
    #landing_pc .pop_circle.off {
      display: none; }
  #landing_pc .landing_swiper1 {
    max-width: 1290px;
    padding: 0 174px 120px;
    position: relative; }
    #landing_pc .landing_swiper1 .swiper-wrapper {
      margin: 0 auto; }
      #landing_pc .landing_swiper1 .swiper-wrapper .swiper-button-prev {
        left: 0; }
      #landing_pc .landing_swiper1 .swiper-wrapper .swiper-button-next {
        right: 0; }
    #landing_pc .landing_swiper1 .swiper-pagination.swiper-pagination-bullets {
      bottom: 0 !important; }
    #landing_pc .landing_swiper1.landing_swiper2 {
      padding: 0 0 50px;
      position: initial; }
      #landing_pc .landing_swiper1.landing_swiper2 .swiper-wrapper {
        align-items: center; }
        #landing_pc .landing_swiper1.landing_swiper2 .swiper-wrapper .swiper-slide.swiper-slide-active + .swiper-slide {
          padding-bottom: 30px; }
  #landing_pc .tab_text img {
    width: 100%; }
  #landing_pc .tab_text .slide_txt {
    width: 100%;
    position: absolute;
    top: left;
    left: 50%;
    bottom: 155px;
    transform: translateX(-50%);
    font-size: 24px;
    font-weight: 400;
    color: #24212e;
    line-height: 1.4;
    text-align: center; }
    #landing_pc .tab_text .slide_txt span {
      font-size: inherit;
      font-weight: 700;
      line-height: inherit; }
      #landing_pc .tab_text .slide_txt span.txt-black {
        color: #24212e; }

.banner1 {
  width: 100%;
  height: 400px;
  position: relative; }
  .banner1 .banner1_inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0; }
  .banner1::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%), #adb3ef;
    opacity: 0.4;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1; }
  .banner1 .slide_banner .swiper-slide {
    text-align: center;
    height: 400px;
    position: relative;
    overflow: hidden; }
    .banner1 .slide_banner .swiper-slide a {
      text-align: center;
      width: 100%;
      height: 400px;
      background-position: center;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      overflow: hidden;
      background-repeat: no-repeat; }
      .banner1 .slide_banner .swiper-slide a img {
        max-width: 1920px; }
  .banner1 .slide_banner .swiper-button-next {
    width: 80px;
    height: 80px;
    right: 17%;
    z-index: 100; }
  .banner1 .slide_banner .swiper-button-prev {
    width: 80px;
    height: 80px;
    left: 17%;
    z-index: 100; }

.landing_sub {
  background: #fbfcff; }
  .landing_sub .subscribe_wrap {
    padding: 42px 0;
    border-bottom: 0; }
    .landing_sub .subscribe_wrap > div {
      max-width: 330px;
      padding: 40px 31px 45px; }
      .landing_sub .subscribe_wrap > div h2 {
        margin: 20px 0; }
      .landing_sub .subscribe_wrap > div ul {
        padding: 22px; }
        .landing_sub .subscribe_wrap > div ul li {
          padding-left: 0; }
          .landing_sub .subscribe_wrap > div ul li:not(:last-of-type) {
            margin-bottom: 10px; }
          .landing_sub .subscribe_wrap > div ul li img {
            margin-right: 5px; }
  .landing_sub > button {
    display: block;
    margin: 0 auto;
    font-size: 20px;
    font-weight: 700;
    color: #09b9c6;
    text-align: center;
    padding: 18px 0;
    min-width: 370px;
    border-radius: 15px;
    border: 1px solid #09b9c6;
    background-color: #fff;
    filter: drop-shadow(0px 3px 4px rgba(104, 154, 170, 0.3)); }
    .landing_sub > button img {
      vertical-align: baseline;
      margin-left: 10px; }

.promote_banner {
  margin-bottom: 0px !important; }

.landing_educate {
  position: relative; }
  .landing_educate::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #ffffff 27.51%, rgba(255, 255, 255, 0.786458) 74.33%, rgba(255, 255, 255, 0) 100%), #b2eaee;
    opacity: 0.2;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1; }
  .landing_educate .graphic_l_green {
    position: absolute;
    right: 0;
    top: 410px;
    opacity: 0.2; }
  .landing_educate .graphic_r_green {
    position: absolute;
    left: 0;
    top: 347px;
    opacity: 0.2; }
  .landing_educate .landing_swiper1 .slide_txt span {
    color: #09b9c6; }

.landing_manage {
  position: relative; }
  .landing_manage .home_subtitle {
    color: #7681e5; }
  .landing_manage::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%), #c8cdf5;
    opacity: 0.2;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1; }
  .landing_manage .graphic_l_purple {
    position: absolute;
    left: 0;
    top: 347px;
    opacity: 0.2; }
  .landing_manage .graphic_r_purple {
    position: absolute;
    right: 0;
    top: 410px;
    opacity: 0.2; }
  .landing_manage .landing_swiper1 .slide_txt span {
    color: #7681e5; }

.landing_event {
  position: relative; }
  .landing_event .home_title {
    width: max-content;
    margin: 0 auto 60px;
    position: relative; }
    .landing_event .home_title img {
      position: absolute;
      right: -55px;
      top: -14px;
      z-index: -1; }
  .landing_event .event_wrap {
    width: 1290px;
    height: 429px;
    position: relative;
    margin: 0 auto;
    padding: 0 40px; }
    .landing_event .event_wrap .swiper-slide {
      transition: 0.4s; }
    .landing_event .event_wrap .swiper-button-next {
      right: 0;
      color: #504d58; }
    .landing_event .event_wrap .swiper-button-prev {
      left: 0;
      color: #504d58; }
  .landing_event .event_box {
    padding: 30px 30px 28px;
    border-radius: 10px; }
    .landing_event .event_box ul li {
      color: #fff; }
      .landing_event .event_box ul li:nth-of-type(1) {
        font-size: 16px;
        line-height: 1.2;
        font-family: 'esamanru'; }
      .landing_event .event_box ul li:nth-of-type(2) {
        font-size: 24px;
        font-weight: 800;
        font-family: 'NanumSquare';
        margin: 20px 0 10px; }
      .landing_event .event_box ul li:nth-of-type(3) {
        font-size: 12px;
        font-weight: bold;
        font-family: 'Inter', 'Noto Sans KR';
        padding-bottom: 30px;
        border-bottom: 1px solid #fff; }
      .landing_event .event_box ul li:nth-of-type(4) {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.4;
        margin: 20px 0 28px; }
      .landing_event .event_box ul li:last-of-type {
        text-align: center; }
        .landing_event .event_box ul li:last-of-type button {
          font-size: 15px;
          font-weight: 700;
          color: inherit;
          padding: 7px 0;
          width: 170px;
          border-radius: 20px;
          border: 1px solid #fff; }
    .landing_event .event_box.blue {
      background: #22a4ed; }
    .landing_event .event_box.purple {
      background: #7681e5; }
    .landing_event .event_box.green {
      background: #06ba9a; }

.pause-btn {
  position: absolute;
  left: calc(50% + 100px);
  bottom: 8px;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 100;
  width: 6px;
  height: 9px; }
  .pause-btn button {
    position: relative;
    display: block; }
    .pause-btn button::before {
      content: '';
      display: block;
      width: 3px;
      height: 9px;
      background: #a7a6ab;
      position: absolute;
      left: 0;
      cursor: pointer;
      z-index: 100;
      transition: 0.21s; }
    .pause-btn button::after {
      content: '';
      display: block;
      width: 3px;
      height: 9px;
      background: #a7a6ab;
      position: absolute;
      right: -7px;
      cursor: pointer;
      z-index: 100;
      transition: 0.21s; }
  .pause-btn.active button:after,
  .pause-btn.active button:before {
    background: #09b9c6; }

@media screen and (max-width: 1320px) {
  #landing_pc .landing_swiper1 {
    width: 100%; }
  .landing_event .event_wrap {
    width: 100%;
    padding: 0 55px; }
    .landing_event .event_wrap .swiper-button-next {
      right: 10px; }
    .landing_event .event_wrap .swiper-button-prev {
      left: 10px; } }

@media screen and (max-width: 1024px) {
  #landing_pc .home_title {
    font-size: 37px; }
  #landing_pc .pop_circle {
    right: 50px;
    bottom: 70px; }
  #landing_pc .landing_swiper1 .swiper-wrapper > div .slide_txt {
    font-size: 22px; }
  #landing_pc .swiper-button-prev {
    left: 30px; }
  #landing_pc .swiper-button-next {
    right: 30px; }
  #landing_pc .banner1 .slide_banner .swiper-slide {
    height: initial; }
  #landing_pc .banner1 .slide_banner .swiper-button-prev {
    left: 5%; }
  #landing_pc .banner1 .slide_banner .swiper-button-next {
    right: 5%; }
  #landing_pc .landing_event .event_box ul li:nth-of-type(2) {
    font-size: 20px; }
  #landing_pc .landing_event .event_box ul li:nth-of-type(4) {
    font-size: 12px; }
  #landing_pc .graphic_l_green,
  #landing_pc .graphic_r_green,
  #landing_pc .graphic_l_purple,
  #landing_pc .graphic_r_purple {
    width: 50%; }
  .banner1 .slide_banner .swiper-slide {
    height: auto; } }

@media screen and (max-width: 1024px) {
  .mb_pt_50 {
    padding-top: 50px !important; }
  #landing_pc .home_title {
    font-size: 28px; }
  #landing_pc .has_fixed_header {
    margin-top: 56px; }
  #landing_pc .container120 {
    padding: 100px 0 0; }
    #landing_pc .container120 .swiper-container {
      padding-top: 50px; }
      #landing_pc .container120 .swiper-container .slide_shadow {
        margin-bottom: 20px; }
  #landing_pc .bg_gradation {
    position: relative; }
    #landing_pc .bg_gradation:before {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.786458) 29.72%, rgba(255, 255, 255, 0) 100%), #b2eaee;
      opacity: 0.2;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1; }
  #landing_pc .bg_gradation2 {
    position: relative; }
    #landing_pc .bg_gradation2:before {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      background: linear-gradient(0deg, #ff84b0 0%, rgba(255, 255, 255, 0) 100%);
      opacity: 0.1;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1; }
  #landing_pc .home_subtitle + .home_title {
    margin-top: 12px; }
  #landing_pc .home_title {
    font-size: 24px; }
    #landing_pc .home_title + .home_explain {
      margin: 20px 0 50px; }
  #landing_pc .home_explain {
    font-size: 14px;
    color: #7c7a82;
    text-align: center;
    line-height: 20px; }
  #landing_pc .banner1 .slide_banner .swiper-slide {
    font-size: 100px; }
  #landing_pc .app_down {
    padding: 14px 16px;
    border-bottom: 1px solid #e9e9ea; }
  #landing_pc .app_box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid #e9e9ea;
    background: #fbfcff; }
    #landing_pc .app_box > div {
      width: 76px;
      height: 76px;
      border-radius: 10px;
      overflow: hidden; }
      #landing_pc .app_box > div img {
        width: 100%; }
    #landing_pc .app_box > ul li:nth-of-type(1) {
      font-size: 16px;
      color: #24212e;
      font-family: 'esamanru';
      margin-bottom: 5px; }
    #landing_pc .app_box > ul li:nth-of-type(2) {
      font-size: 10px;
      color: #a7a6ab; }
  #landing_pc .landing_cont3 .swiper-slide img {
    width: 100%; }
  #landing_pc .landing_cont4,
  #landing_pc .landing_cont5,
  #landing_pc .landing_cont6 {
    padding-bottom: 100px; }
    #landing_pc .landing_cont4 .swiper-container .swiper-slide,
    #landing_pc .landing_cont5 .swiper-container .swiper-slide,
    #landing_pc .landing_cont6 .swiper-container .swiper-slide {
      text-align: center; }
      #landing_pc .landing_cont4 .swiper-container .swiper-slide img,
      #landing_pc .landing_cont5 .swiper-container .swiper-slide img,
      #landing_pc .landing_cont6 .swiper-container .swiper-slide img {
        width: 100%; }
      #landing_pc .landing_cont4 .swiper-container .swiper-slide p,
      #landing_pc .landing_cont5 .swiper-container .swiper-slide p,
      #landing_pc .landing_cont6 .swiper-container .swiper-slide p {
        padding: 0 10px;
        font-size: 14px;
        line-height: 20px;
        color: #24212e; }
  #landing_pc .landing_cont6 .swiper-container.txtbook_slide {
    margin-top: 23px; }
  #landing_pc .landing_cont7 {
    padding-bottom: 100px; }
    #landing_pc .landing_cont7 .home_explain {
      margin-bottom: 10px; }
    #landing_pc .landing_cont7 .box3_wrap {
      display: flex;
      justify-content: center;
      padding: 0 16px; }
      #landing_pc .landing_cont7 .box3_wrap li {
        flex: 1;
        padding: 32px 0;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 500;
        line-height: 20px;
        color: #fff;
        text-align: center; }
        #landing_pc .landing_cont7 .box3_wrap li:not(:last-of-type) {
          margin-right: 6px; }
        #landing_pc .landing_cont7 .box3_wrap li span {
          color: #fff; }
    #landing_pc .landing_cont7 p:nth-of-type(2) {
      font-size: 16px;
      font-weight: 500;
      color: #24212e;
      text-align: center;
      margin: 40px 0 5px; }
      #landing_pc .landing_cont7 p:nth-of-type(2) span {
        font-size: inherit;
        font-weight: 700;
        color: #ff84b0; }
    #landing_pc .landing_cont7 p:last-of-type {
      font-size: 12px;
      font-weight: 500;
      color: #a7a6ab;
      text-align: center; } }

@media screen and (max-width: 1024px) {
  .banner1 {
    height: initial; }
    .banner1 .banner1_inner {
      position: initial;
      transform: initial; }
      .banner1 .banner1_inner .slide_banner .swiper-slide a img {
        max-width: initial;
        width: 100%; } }

#cedu_introduce .home_subtitle + .home_title {
  margin-top: 12px; }

#cedu_introduce .banner1 .slide_banner .swiper-slide {
  font-size: 100px; }

#cedu_introduce .cedu_appimg {
  position: relative; }
  #cedu_introduce .cedu_appimg::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.786458) 29.72%, rgba(255, 255, 255, 0) 100%), #c8cdf5;
    opacity: 0.2;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1; }
  #cedu_introduce .cedu_appimg.container120 {
    padding: 100px 0; }
  #cedu_introduce .cedu_appimg .swiper-container {
    padding-top: 80px;
    overflow: visible;
    overflow-x: hidden;
    padding-bottom: 20px; }
  #cedu_introduce .cedu_appimg .swiper-slide {
    text-align: center; }
    #cedu_introduce .cedu_appimg .swiper-slide img {
      width: 100%;
      max-width: 400px; }
  #cedu_introduce .cedu_appimg p {
    font-size: 14px;
    text-align: center; }
    #cedu_introduce .cedu_appimg p span {
      font-size: inherit;
      font-weight: 700; }

#cedu_introduce .cedu_solution {
  position: relative; }
  #cedu_introduce .cedu_solution.container120 {
    padding: 100px 0; }
  #cedu_introduce .cedu_solution .subscribe_wrap {
    border-bottom: 0;
    padding: 0;
    margin-top: 40px; }
    #cedu_introduce .cedu_solution .subscribe_wrap .solution_item {
      width: calc(100% - 32px);
      max-width: 343px;
      padding: 24px 38px; }
      #cedu_introduce .cedu_solution .subscribe_wrap .solution_item ul {
        padding: 0;
        margin: 0;
        border-radius: 0;
        background-color: transparent; }
        #cedu_introduce .cedu_solution .subscribe_wrap .solution_item ul li {
          font-size: 15px;
          font-weight: normal;
          color: #504d58; }
          #cedu_introduce .cedu_solution .subscribe_wrap .solution_item ul li span {
            font-size: inherit;
            font-weight: 700;
            color: inherit; }
          #cedu_introduce .cedu_solution .subscribe_wrap .solution_item ul li:not(:last-of-type) {
            margin-bottom: 8px; }
  #cedu_introduce .cedu_solution::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #c8cdf5 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0.2;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1; }

#cs-main .page-inner {
  background: #fbfcff;
  padding: 0; }

#cs-main .cs_top {
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 20px 16px 30px; }
  #cs-main .cs_top h1 {
    font-size: 22px;
    font-weight: bold;
    color: #181818;
    margin-left: 10px; }

#cs-main .cs_middle {
  background-color: #fff;
  border-top: 1px solid #e3e2f0;
  padding: 0 17px 0 15px; }
  #cs-main .cs_middle li {
    padding: 30px 10px;
    border-bottom: 1px solid #e3e2f0; }
    #cs-main .cs_middle li a {
      display: flex;
      justify-content: space-between;
      align-items: center; }
      #cs-main .cs_middle li a p {
        font-size: 16px;
        font-weight: bold;
        color: #24212e; }

#cs-main .cs_bottom {
  height: calc(100vh - 534px);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px; }
  #cs-main .cs_bottom p:first-of-type {
    font-size: 20px;
    font-weight: 700;
    color: #09b9c6; }
  #cs-main .cs_bottom p:last-of-type {
    font-size: 12px;
    font-weight: 500;
    color: #a7a6ab; }

.cs {
  margin-top: 56px; }
  .cs.main {
    margin-top: 56px; }
  .cs .page-inner {
    padding: 70px 0 152px; }
  .cs .page1210 {
    width: 100%;
    max-width: 1210px;
    margin: 0 auto; }
  .cs .page-title,
  .cs .page-subtitle {
    font-size: 35px;
    font-weight: 700;
    color: #504d58;
    line-height: 1.45; }
  .cs .page-title {
    text-align: center;
    margin-bottom: 70px; }
  .cs .page-subtitle {
    margin: 80px 0 50px; }
  .cs .page-title-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 80px 0 50px; }
    .cs .page-title-btn .page-subtitle {
      width: max-content;
      margin: 0; }
    .cs .page-title-btn button {
      width: 288px;
      padding: 18px;
      border: 1px solid #09b9c6;
      border-radius: 15px;
      box-shadow: 0px 3px 4px rgba(104, 154, 170, 0.3);
      background: #09b9c6;
      font-size: 20px;
      font-weight: bold;
      color: #fff;
      text-align: center; }
  .cs .small-tab-wrap {
    overflow: auto;
    border-bottom: 3px solid #e9e9ea;
    padding-bottom: 12px; }
  .cs .small-tab {
    display: flex;
    justify-content: space-between; }
    .cs .small-tab li {
      display: inline-block;
      width: max-content;
      font-size: 16px;
      font-weight: 500;
      color: #7c7a82;
      padding: 11px 40px;
      border: 1px solid #9de3e8;
      border-radius: 10px;
      box-sizing: border-box;
      text-align: center;
      cursor: pointer;
      white-space: nowrap; }
      .cs .small-tab li:not(:last-of-type) {
        margin-right: 14px; }
      .cs .small-tab li.on {
        color: #fff;
        background: #09b9c6;
        box-shadow: 0px 3px 4px rgba(104, 154, 170, 0.3);
        border-color: #09b9c6; }
  .cs .terms_area {
    margin-top: 30px;
    border: 1.00833px solid #dddddd;
    border-radius: 10px;
    padding: 40px 40px 40px 36px;
    font-size: 13px;
    font-weight: 400;
    line-height: 2;
    color: #000; }
    .cs .terms_area table thead tr th {
      border: 1px solid #000;
      color: #000;
      font-size: 13px;
      padding: 22px 8px; }
    .cs .terms_area table tbody tr td {
      border: 1px solid #000;
      color: #000;
      font-size: 13px;
      padding: 22px 8px; }
  .cs .pagination-component {
    margin-top: 50px; }

.custom_table .custom_th {
  border-top: 2px solid #d3d3d5;
  border-bottom: 1px solid #d3d3d5;
  display: flex;
  justify-content: space-between; }
  .custom_table .custom_th li {
    font-size: 15px;
    font-weight: 500;
    color: #7c7a82;
    padding: 24px 0;
    text-align: center; }
    .custom_table .custom_th li:first-of-type {
      width: 200px; }
    .custom_table .custom_th li.custom_th2 {
      width: calc(100% - 200px); }

.custom_table .custom_td > li {
  border: 1px solid #d3d3d5;
  box-sizing: border-box;
  border-radius: 10px;
  margin-top: 15px;
  border-bottom: none;
  cursor: pointer; }
  .custom_table .custom_td > li.border_bottom {
    border-bottom: 1px solid #d3d3d5; }
  .custom_table .custom_td > li ul {
    display: flex;
    align-items: center;
    padding: 25px 0; }
    .custom_table .custom_td > li ul li.custom_td1 {
      display: inline-block;
      width: 200px;
      font-size: 15px;
      color: #24212e;
      text-align: center;
      font-weight: 600; }
    .custom_table .custom_td > li ul li.custom_td2 {
      width: calc(100% - 200px);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 40px; }
      .custom_table .custom_td > li ul li.custom_td2 h5 {
        font-size: 11px;
        font-weight: 500;
        color: #7c7a82;
        margin-bottom: 4px; }
      .custom_table .custom_td > li ul li.custom_td2 p em {
        font-size: 25px;
        font-weight: 500;
        color: #0f9ba5;
        font-family: Roboto;
        margin-right: 10px; }
      .custom_table .custom_td > li ul li.custom_td2 p span {
        font-size: 17px;
        color: #444444; }
      .custom_table .custom_td > li ul li.custom_td2 .icon_box {
        height: 22px;
        display: flex;
        align-items: center;
        padding-left: 20px; }
        .custom_table .custom_td > li ul li.custom_td2 .icon_box img {
          vertical-align: middle; }
        .custom_table .custom_td > li ul li.custom_td2 .icon_box .icon_plus.off {
          display: none; }
        .custom_table .custom_td > li ul li.custom_td2 .icon_box .icon_minus {
          display: none; }
          .custom_table .custom_td > li ul li.custom_td2 .icon_box .icon_minus.on {
            display: block; }
  .custom_table .custom_td > li .depth {
    padding: 44px 40px 44px 200px;
    border-top: 1px solid #d3d3d5;
    background: #f8f8f8;
    border-radius: 0 0 10px 10px; }
    .custom_table .custom_td > li .depth em {
      font-size: 25px;
      font-weight: 500;
      color: #7681e5;
      font-family: Roboto;
      margin-right: 10px; }
    .custom_table .custom_td > li .depth span {
      font-size: 15px;
      color: #7c7a82;
      line-height: 1.5; }

.full-tab {
  border-bottom: 1px solid #9de3e8; }
  .full-tab ul {
    width: 100%;
    max-width: 1210px;
    display: flex;
    margin: 0 auto; }
    .full-tab ul li {
      width: 20%;
      padding: 0 10px 30px;
      text-align: center;
      position: relative;
      white-space: nowrap; }
      .full-tab ul li a {
        font-size: 22px;
        font-weight: 500;
        line-height: 1.5;
        color: #6bd5dd; }
      .full-tab ul li.on a {
        font-size: 24px;
        font-weight: bold; }
      .full-tab ul li.on::after {
        content: '';
        display: block;
        width: 100%;
        height: 13px;
        border-radius: 5px 5px 0px 0px;
        background: #09b9c6;
        position: absolute;
        bottom: 0;
        left: 0; }

#cs-faq .small-tab-wrap + .custom_table {
  margin-top: 40px; }

#cs-inquiry .custom_table .custom_th li.custom_th2 {
  width: calc(100% - 460px); }

#cs-inquiry .custom_table .custom_th li:nth-of-type(3) {
  width: 120px; }

#cs-inquiry .custom_table .custom_th li:nth-of-type(4) {
  width: 140px; }

#cs-inquiry .custom_table .custom_td ul.show {
  border-bottom: 1px solid #d3d3d5;
  border-radius: 10px;
  position: relative; }
  #cs-inquiry .custom_table .custom_td ul.show.active::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: 10;
    border: 1px solid #09b9c6;
    border-radius: 10px; }
  #cs-inquiry .custom_table .custom_td ul.show + div {
    overflow: hidden;
    max-height: 0; }
  #cs-inquiry .custom_table .custom_td ul.show + div.active {
    max-height: 9999px; }

#cs-inquiry .custom_table .custom_td li.custom_td2 {
  width: calc(100% - 460px); }

#cs-inquiry .custom_table .custom_td li:nth-of-type(3) {
  width: 120px; }

#cs-inquiry .custom_table .custom_td li .answerbox {
  font-size: 15px;
  font-weight: 500;
  color: #a7a6ab;
  padding: 8px;
  width: 105px;
  border: 1px solid #a7a6ab;
  border-radius: 10px;
  text-align: center;
  margin: 0 auto; }
  #cs-inquiry .custom_table .custom_td li .answerbox.answer_done {
    color: #7681e5;
    border-color: #7681e5; }

#cs-inquiry .custom_table .custom_td li:nth-of-type(4) {
  width: 140px;
  font-size: 15px;
  color: #504d58;
  text-align: center;
  font-family: 'Inter', 'Noto Sans KR'; }

#cs-inquiry .custom_table .custom_td .depth2-1 {
  padding-top: 66px;
  padding-bottom: 45px;
  background-color: #fff;
  border-top: 0;
  position: relative; }
  #cs-inquiry .custom_table .custom_td .depth2-1 p {
    color: #504d58;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 15px;
    cursor: auto; }
  #cs-inquiry .custom_table .custom_td .depth2-1 span {
    line-height: 1.5;
    display: inline-block;
    width: calc(100% - 75px); }
  #cs-inquiry .custom_table .custom_td .depth2-1 .function-wrap {
    position: absolute;
    right: 55px;
    top: 40px;
    display: flex;
    align-items: center;
    gap: 10px; }
    #cs-inquiry .custom_table .custom_td .depth2-1 .function-wrap button {
      font-size: 13px;
      font-weight: 500;
      color: #a7a6ab;
      display: flex;
      align-items: center; }
      #cs-inquiry .custom_table .custom_td .depth2-1 .function-wrap button img {
        margin-left: 5px; }

#cs-inquiry .custom_table .custom_td .depth2-2 {
  padding: 50px 40px 50px 200px;
  border-bottom: 1px solid #d3d3d5; }
  #cs-inquiry .custom_table .custom_td .depth2-2 span {
    font-size: 17px;
    font-weight: 500;
    color: #444444; }
  #cs-inquiry .custom_table .custom_td .depth2-2 p {
    font-size: 15px;
    line-height: 1.5;
    color: #7c7a82;
    margin-top: 25px;
    cursor: auto; }
  #cs-inquiry .custom_table .custom_td .depth2-2 .icon_download {
    font-size: 13px;
    font-weight: 500;
    color: #7681e5;
    margin-top: 15px;
    display: flex;
    align-items: center; }
    #cs-inquiry .custom_table .custom_td .depth2-2 .icon_download img {
      margin-right: 10px; }

#cs-inquiry-detail .page-subtitle2 {
  display: flex;
  gap: 40px;
  margin: 93px 0 45px; }
  #cs-inquiry-detail .page-subtitle2 li {
    font-size: 26px;
    font-weight: 400;
    color: #a3a3a3;
    line-height: 1.5;
    position: relative; }
    #cs-inquiry-detail .page-subtitle2 li:not(:last-of-type)::after {
      content: '';
      display: inline-block;
      width: 2px;
      height: 22px;
      background-color: #a3a3a3;
      margin: 0 20px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%); }
    #cs-inquiry-detail .page-subtitle2 li:last-of-type {
      color: #24212e;
      font-weight: 700; }

#cs-inquiry-detail .inquiry_form {
  display: flex;
  flex-direction: column;
  gap: 25px; }
  #cs-inquiry-detail .inquiry_form li p {
    font-size: 18px;
    font-weight: 500;
    color: #24212e;
    margin-bottom: 12px; }
  #cs-inquiry-detail .inquiry_form li.form_item2 {
    display: flex;
    gap: 20px; }
    #cs-inquiry-detail .inquiry_form li.form_item2 > div:first-of-type {
      width: calc(100% - 310px); }
  #cs-inquiry-detail .inquiry_form .icon_download_g {
    display: block;
    width: 100%;
    padding: 24px;
    border: 1px solid #09b9c6;
    border-radius: 10px;
    font-size: 15px;
    text-align: center;
    color: #09b9c6; }
    #cs-inquiry-detail .inquiry_form .icon_download_g img {
      margin-left: 13px; }
  #cs-inquiry-detail .inquiry_form .txt_download {
    display: inline-block;
    font-size: 12px;
    line-height: 1.5;
    margin-top: 10px;
    color: #a7a6ab; }
  #cs-inquiry-detail .inquiry_form .input-component-box .input-wrapper,
  #cs-inquiry-detail .inquiry_form .select > .select-input {
    height: 70px;
    border: 1px solid #d3d3d5; }
  #cs-inquiry-detail .inquiry_form .select > .select-options.is_open {
    border: 1px solid #d3d3d5;
    border-top: 0; }
  #cs-inquiry-detail .inquiry_form .txt_area {
    width: 100%;
    height: 720px;
    padding: 20px;
    border: 1px solid #d3d3d5;
    border-radius: 10px;
    font-size: 16px;
    color: #24212e; }
    #cs-inquiry-detail .inquiry_form .txt_area::placeholder {
      color: #d3d3d5;
      font-size: 16px; }

#cs-inquiry-detail .btn_wrap {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 50px; }

#cs-inquiry-detail .btn_cancel,
#cs-inquiry-detail .btn_confirm {
  display: block;
  width: 211px;
  padding: 18px;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  border-radius: 15px;
  box-shadow: 0px 4px 3px rgba(191, 191, 191, 0.3); }

#cs-inquiry-detail .btn_cancel {
  color: #7681e5;
  border: 1px solid #7681e5; }

#cs-inquiry-detail .btn_confirm {
  color: #fff;
  background-color: #7681e5; }

#cs-guide .guide_box {
  display: block;
  width: calc(100% - 32px);
  max-width: 550px;
  min-width: 341px;
  border-radius: 10px;
  border: 1px solid;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
  cursor: pointer; }
  #cs-guide .guide_box li:first-of-type {
    padding: 20px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5; }
  #cs-guide .guide_box li:last-of-type {
    padding: 10px;
    background: pink; }
    #cs-guide .guide_box li:last-of-type button {
      font-size: 14px;
      font-weight: 500;
      color: #fff; }
      #cs-guide .guide_box li:last-of-type button img {
        margin-left: 10px;
        vertical-align: sub; }
  #cs-guide .guide_box:not(:first-of-type) {
    margin-top: 34px; }
  #cs-guide .guide_box.green {
    border-color: #09b9c6; }
    #cs-guide .guide_box.green li:first-of-type {
      color: #09b9c6; }
    #cs-guide .guide_box.green li:last-of-type {
      background-color: #09b9c6; }
  #cs-guide .guide_box.purple {
    border-color: #7681e5; }
    #cs-guide .guide_box.purple li:first-of-type {
      color: #7681e5; }
    #cs-guide .guide_box.purple li:last-of-type {
      background-color: #7681e5; }

#cs-guide.pc .page1210 {
  padding-top: 200px; }

#cs-guide.pc .guide_wrap {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 110px; }

#cs-guide.pc .guide_box {
  width: 370px;
  min-width: auto;
  max-width: none;
  margin: initial; }
  #cs-guide.pc .guide_box:not(:first-of-type) {
    margin-top: 0; }

#cs-guide.pc .app-download-here {
  display: flex;
  justify-content: center;
  gap: 20px; }
  #cs-guide.pc .app-download-here > ul {
    width: 370px;
    border-radius: 12px;
    border: 1px solid #504d58;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    overflow: hidden;
    cursor: pointer; }
    #cs-guide.pc .app-download-here > ul li:first-of-type {
      width: calc(100% - 100px);
      text-align: center;
      font-size: 18px;
      font-weight: 700;
      color: #504d58; }
      #cs-guide.pc .app-download-here > ul li:first-of-type p {
        margin-top: 5px;
        color: #a7a6ab;
        font-size: 14px; }
    #cs-guide.pc .app-download-here > ul li:last-of-type {
      width: 100px;
      padding: 10px 0;
      background: #504d58; }

@media screen and (max-width: 1210px) {
  .cs .page1210 {
    padding: 0 16px; }
  .cs .page-subtitle {
    font-size: 30px; }
  .full-tab ul li {
    padding-bottom: 20px; }
    .full-tab ul li a {
      font-size: 18px; }
    .full-tab ul li.on a {
      font-size: 18px; }
    .full-tab ul li.on::after {
      height: 9px; }
  .custom_table .custom_th li:first-of-type {
    width: 20%; }
  .custom_table .custom_th li:nth-of-type(2) {
    width: 80%; }
  .custom_table .custom_td > li ul li.custom_td1 {
    width: 20%;
    min-width: 120px; }
  .custom_table .custom_td > li ul li:nth-of-type(2) {
    width: 80%; }
  .custom_table .custom_td > li .depth {
    padding: 25px 40px 35px 20%; }
  #cs-inquiry .custom_table .custom_th li.custom_th2 {
    width: calc(80% - 260px); }
  #cs-inquiry .custom_table .custom_td li.custom_td2 {
    width: calc(80% - 260px); }
  #cs-inquiry .custom_table .custom_td li .depth2-2 {
    padding-left: 20%; } }

@media screen and (max-width: 1024px) {
  #cs-guide .guide_box {
    min-width: initial; }
  .cs {
    margin-top: 56px; }
    .cs .page-inner {
      padding: 30px 0 80px; }
    .cs .terms_area {
      margin-top: 0;
      border: 1px solid #09b9c6;
      padding: 20px 20px 28px;
      font-size: 12px; }
      .cs .terms_area table thead tr th {
        font-size: 12px;
        padding: 12px 4px; }
      .cs .terms_area table tbody tr td {
        font-size: 12px;
        padding: 12px 4px; }
    .cs .small-tab-wrap {
      padding-bottom: 6px; }
    .cs .small-tab li {
      font-size: 12px;
      padding: 9px 20px; }
      .cs .small-tab li:not(:last-of-type) {
        margin-right: 10px; }
      .cs .small-tab li.on {
        box-shadow: none; }
    .cs .pagination-component {
      margin-top: 20px; }
  .custom_table .custom_td > li {
    background-color: #f8f8f8; }
    .custom_table .custom_td > li ul {
      background-color: #fff;
      border-radius: 10px;
      padding: 8px 20px 15px 15px; }
      .custom_table .custom_td > li ul li.custom_td2 {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 0; }
        .custom_table .custom_td > li ul li.custom_td2 h5 {
          font-size: 11px;
          font-weight: 500;
          color: #7c7a82;
          margin-bottom: 4px; }
        .custom_table .custom_td > li ul li.custom_td2 p em {
          font-size: 15px; }
        .custom_table .custom_td > li ul li.custom_td2 p span {
          font-size: 12px;
          word-break: break-all; }
    .custom_table .custom_td > li .depth {
      padding: 17px 15px;
      border-top: 0; }
      .custom_table .custom_td > li .depth em {
        font-size: 16px;
        margin-right: 5px; }
      .custom_table .custom_td > li .depth span {
        font-size: 12px; }
    .custom_table .custom_td > li.active {
      border-top: 0; }
      .custom_table .custom_td > li.active ul {
        border: 1px solid #09b9c6; }
  #cs-faq .small-tab-wrap + .custom_table {
    margin-top: 0; }
  #cs-inquiry .custom_table .custom_td li ul {
    padding: 11px 14px 14px 15px; }
    #cs-inquiry .custom_table .custom_td li ul li:nth-of-type(2) {
      width: max-content;
      font-size: 9px;
      color: #7c7a82;
      padding: 0 14px; }
    #cs-inquiry .custom_table .custom_td li ul li:nth-of-type(3) {
      width: 60px; }
      #cs-inquiry .custom_table .custom_td li ul li:nth-of-type(3) .answerbox {
        width: max-content;
        padding: 6px 10px;
        font-size: 9px;
        border-radius: 5px; }
    #cs-inquiry .custom_table .custom_td li ul li.custom_td2 {
      width: calc(100% - 125px);
      flex-direction: column;
      align-items: flex-start; }
      #cs-inquiry .custom_table .custom_td li ul li.custom_td2 p {
        width: 100%;
        text-indent: -14px;
        margin-left: 14px;
        padding-right: 10px;
        /*overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;*/ }
        #cs-inquiry .custom_table .custom_td li ul li.custom_td2 p em {
          margin-right: 0; }
  #cs-inquiry .custom_table .custom_td li .depth2-1 {
    padding: 20px 20px 15px 30px; }
    #cs-inquiry .custom_table .custom_td li .depth2-1 p {
      color: #504d58;
      font-size: 15px;
      line-height: 1.5;
      cursor: auto;
      margin-bottom: 15px; }
    #cs-inquiry .custom_table .custom_td li .depth2-1 span {
      display: block;
      margin-bottom: 15px;
      color: #504d58; }
    #cs-inquiry .custom_table .custom_td li .depth2-1 .icon_edit,
    #cs-inquiry .custom_table .custom_td li .depth2-1 .icon_delete {
      font-size: 11px;
      font-weight: 500;
      color: #a7a6ab; }
      #cs-inquiry .custom_table .custom_td li .depth2-1 .icon_edit img,
      #cs-inquiry .custom_table .custom_td li .depth2-1 .icon_delete img {
        margin-left: 6px;
        height: 10px;
        margin-top: -2px; }
    #cs-inquiry .custom_table .custom_td li .depth2-1 .icon_delete {
      position: relative;
      right: auto;
      top: auto; }
    #cs-inquiry .custom_table .custom_td li .depth2-1 .icon_edit + .icon_delete {
      margin-left: 12px; }
  #cs-inquiry .custom_table .custom_td li .depth2-2 {
    padding: 15px 30px 15px 15px; }
    #cs-inquiry .custom_table .custom_td li .depth2-2 span {
      font-size: 12px; }
    #cs-inquiry .custom_table .custom_td li .depth2-2 p {
      margin-top: 10px;
      padding-left: 15px;
      font-size: 12px;
      color: #504d58; }
    #cs-inquiry .custom_table .custom_td li .depth2-2 .icon_download {
      padding-left: 15px;
      font-size: 11px; }
      #cs-inquiry .custom_table .custom_td li .depth2-2 .icon_download img {
        width: 12px;
        margin-right: 5px; }
  #cs-inquiry .btn_inquiry {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    background: #09b9c6;
    border: 1px solid #09b9c6;
    box-shadow: 0px 3px 3px rgba(118, 129, 229, 0.3);
    border-radius: 8px;
    margin-bottom: 5px; }
  #cs-inquiry-detail .inquiry_form {
    gap: 20px; }
    #cs-inquiry-detail .inquiry_form li.form_item2 {
      flex-direction: column; }
      #cs-inquiry-detail .inquiry_form li.form_item2 > div:first-of-type {
        width: 100%; }
    #cs-inquiry-detail .inquiry_form li p {
      font-size: 14px;
      margin-bottom: 8px;
      color: #504d58; }
    #cs-inquiry-detail .inquiry_form .input-component-box .input-wrapper,
    #cs-inquiry-detail .inquiry_form .select > .select-input {
      height: 44px;
      border: 1px solid #a7a6ab; }
    #cs-inquiry-detail .inquiry_form .select > .select-options.is_open {
      border: 1px solid #a7a6ab;
      border-top: 0; }
    #cs-inquiry-detail .inquiry_form .txt_area {
      height: 247px;
      padding: 15px 10px;
      border: 1px solid #a7a6ab; }
    #cs-inquiry-detail .inquiry_form .icon_download_g {
      padding: 13px;
      font-size: 12px; }
      #cs-inquiry-detail .inquiry_form .icon_download_g img {
        margin-left: 6px;
        vertical-align: sub; }
    #cs-inquiry-detail .inquiry_form .txt_download {
      font-size: 10px;
      margin-top: 5px; }
  #cs-inquiry-detail .btn_wrap {
    margin-top: 30px; }
    #cs-inquiry-detail .btn_wrap .btn_confirm {
      width: 100%;
      padding: 13px;
      border-radius: 10px;
      font-size: 16px; } }

.size_PC {
  display: block; }

.size_MO {
  display: none; }

.container120 {
  padding: 120px 0; }

.has_fixed_header {
  margin-top: 123px; }

.product_subscibe.container120 {
  padding-bottom: 0; }

.product_subscibe .tab_style {
  margin-top: 60px; }

.subscribe_wrap {
  display: flex;
  justify-content: center;
  column-gap: 50px;
  padding: 50px 0 120px;
  max-width: 1210px;
  border-bottom: 1px solid #7681e5;
  margin: 0 auto; }
  .subscribe_wrap > div {
    width: 50%;
    max-width: 380px;
    padding: 41px 46px 40px 45px;
    border-radius: 15px;
    box-shadow: 0 0 30px 0 rgba(92, 103, 201, 0.1);
    background-color: #fff; }
    .subscribe_wrap > div h1 {
      font-size: 30px;
      font-weight: 600;
      line-height: 1.2;
      text-align: center;
      color: #24212e; }
    .subscribe_wrap > div h2 {
      font-size: 14px;
      font-weight: 500;
      line-height: 1.6;
      margin: 16px 0 30px;
      text-align: center;
      color: #504d58; }
    .subscribe_wrap > div h3 {
      font-size: 11px;
      font-weight: 500;
      line-height: 1.6;
      text-align: center;
      color: #7c7a82; }
    .subscribe_wrap > div h4 {
      font-size: 16px;
      font-weight: 500;
      line-height: 1.45;
      text-align: center;
      color: #504d58; }
    .subscribe_wrap > div h5 {
      font-size: 12px;
      font-weight: 400;
      line-height: 1.45;
      text-align: center;
      color: #a7a6ab; }
    .subscribe_wrap > div ul {
      padding: 20px 32px;
      margin: 20px 0;
      border-radius: 15px;
      background-color: #f7f8fc; }
      .subscribe_wrap > div ul li {
        font-size: 13px;
        font-weight: 400;
        line-height: 1.45;
        color: #504d58;
        letter-spacing: -1px; }
        .subscribe_wrap > div ul li:not(:last-of-type) {
          margin-bottom: 5px; }
        .subscribe_wrap > div ul li.icon_x {
          color: #d3d3d5; }
        .subscribe_wrap > div ul li img {
          margin-right: 3px; }
    .subscribe_wrap > div.premium_item h1,
    .subscribe_wrap > div.premium_item h3 {
      background: linear-gradient(to right, #35e87c 0%, #34b3e9 100%);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent; }
    .subscribe_wrap > div.premium_item button {
      font-size: 20px;
      font-weight: 700;
      text-align: center;
      color: #fff;
      margin-top: 20px;
      padding: 18px 0;
      width: 100%;
      border-radius: 15px;
      background-color: #7681e5;
      filter: drop-shadow(0px 3px 3px rgba(118, 129, 229, 0.3)); }
    .subscribe_wrap > div.free_item button {
      font-size: 20px;
      font-weight: 700;
      text-align: center;
      color: #7681e5;
      margin-top: 20px;
      padding: 18px 0;
      width: 100%;
      border-radius: 15px;
      background-color: #fff;
      border: 1px solid #7681e5;
      box-sizing: border-box;
      filter: drop-shadow(0px 3px 3px rgba(118, 129, 229, 0.3)); }

.price_wrap {
  max-width: 1210px;
  margin: 0 auto;
  padding: 120px 0; }
  .price_wrap > div:nth-of-type(1) {
    margin-bottom: 70px; }
    .price_wrap > div:nth-of-type(1) span {
      display: inline-block; }
      .price_wrap > div:nth-of-type(1) span:nth-of-type(1) {
        font-size: 26px;
        font-weight: 700;
        color: #24212e;
        margin-right: 10px; }
      .price_wrap > div:nth-of-type(1) span:nth-of-type(2) {
        font-size: 14px;
        font-weight: 500;
        color: #7c7a82; }
  .price_wrap .price_box {
    padding: 50px 90px 52.5px;
    border-radius: 15px;
    background-color: #fff;
    position: relative; }
    .price_wrap .price_box .notice-small {
      padding-bottom: 30px;
      font-weight: bold; }
    .price_wrap .price_box::before {
      content: '';
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: -1;
      width: calc(100% + 2px);
      height: calc(100% + 2px);
      border-radius: 15px;
      background: linear-gradient(to right, #35e87c 0%, #34b3e9 100%);
      box-shadow: 0 0 30px 0 rgba(92, 103, 201, 0.1); }
    .price_wrap .price_box > div:nth-of-type(1) {
      position: absolute;
      left: 110px;
      top: -19px;
      padding: 0 20px;
      z-index: 2; }
      .price_wrap .price_box > div:nth-of-type(1)::after {
        content: '';
        display: inline-block;
        position: absolute;
        top: 18px;
        left: 0;
        width: 100%;
        height: 1px;
        background: #fff;
        z-index: -1; }
      .price_wrap .price_box > div:nth-of-type(1) h1 {
        font-size: 30px;
        font-weight: 600;
        background: linear-gradient(to right, #35e87c 0%, #34b3e9 100%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent; }
        .price_wrap .price_box > div:nth-of-type(1) h1 span {
          font-size: 26px;
          color: inherit;
          font-weight: inherit; }
      .price_wrap .price_box > div:nth-of-type(1) h2 {
        font-size: 18px;
        font-weight: 700;
        color: #a7a6ab;
        margin-top: 5px; }
    .price_wrap .price_box > ul li ul {
      display: flex; }
      .price_wrap .price_box > ul li ul li:nth-of-type(1) {
        font-size: 20px;
        font-weight: 800;
        color: #24212e;
        font-family: 'Inter', 'Noto Sans KR';
        min-width: 80px; }
        .price_wrap .price_box > ul li ul li:nth-of-type(1) span {
          font-size: inherit;
          font-weight: inherit;
          background: linear-gradient(to right, #35e87c 0%, #34b3e9 100%);
          background-clip: text;
          -webkit-background-clip: text;
          color: transparent; }
      .price_wrap .price_box > ul li ul li:nth-of-type(2) {
        width: 160px;
        font-size: 20px;
        font-weight: 500;
        color: #24212e; }
      .price_wrap .price_box > ul li ul li:nth-of-type(3) {
        font-size: 18px;
        font-weight: 700;
        color: #a7a6ab; }
      .price_wrap .price_box > ul li ul li:nth-of-type(4) {
        width: 158px;
        font-size: 20px;
        font-weight: 700;
        color: #24212e;
        font-family: 'Inter', 'Noto Sans KR';
        margin-left: 25px; }
      .price_wrap .price_box > ul li ul li:not(:last-of-type) {
        margin-bottom: 20px; }

.promote_banner {
  width: 100%;
  height: 165px;
  background-color: #7681e5;
  margin-bottom: -120px; }
  .promote_banner > div {
    max-width: 1210px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .promote_banner > div div h1 {
      font-size: 35px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 12px;
      display: flex;
      align-items: center; }
      .promote_banner > div div h1 button {
        padding: 7px 16px;
        border-radius: 5px;
        background-color: #fff;
        font-size: 12px;
        font-weight: 700;
        color: #7681e5;
        margin-left: 20px;
        margin-top: 6px; }
    .promote_banner > div div p {
      font-size: 16px;
      font-weight: 400;
      color: #fff; }

@media screen and (max-width: 1210px) {
  .price_wrap {
    width: 100%;
    padding: 120px 30px; }
    .price_wrap > div:nth-of-type(1) span:nth-of-type(2) {
      display: block;
      margin-top: 15px; }
  .promote_banner > div {
    width: 100%;
    padding: 0 30px; } }

@media screen and (max-width: 1024px) {
  .subscribe_wrap {
    column-gap: 20px; }
    .subscribe_wrap > div {
      max-width: 350px;
      padding: 20px; }
  .price_wrap .price_box {
    padding: 90px 50px 50px; } }

@media screen and (max-width: 1024px) {
  .size_PC {
    display: none; }
  .size_MO {
    display: block; }
  .container120 {
    padding: 50px 0; }
  .has_fixed_header {
    margin-top: 56px; }
  .home_subtitle {
    font-size: 14px; }
  .home_title {
    font-size: 24px; }
  .product_subscibe.size_MO .mo_tab {
    margin: 50px 0 40px;
    padding-bottom: 10px;
    border-bottom: 1px solid #9de3e8;
    font-size: 18px;
    font-weight: 700;
    color: #09b9c6;
    text-align: center; }
  .product_subscibe.size_MO .slide_product {
    margin-top: -20px;
    padding: 20px 0 40px; }
    .product_subscibe.size_MO .slide_product .swiper-pagination {
      bottom: 0; }
      .product_subscibe.size_MO .slide_product .swiper-pagination .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #c4c4c4; }
        .product_subscibe.size_MO .slide_product .swiper-pagination .swiper-pagination-bullet:not(:last-of-type) {
          margin-right: 8px; }
        .product_subscibe.size_MO .slide_product .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
          background: #09b9c6; }
  .product_subscibe.size_MO .subscribe_wrap {
    column-gap: unset;
    justify-content: unset;
    padding: 0 0 45px;
    max-width: unset;
    border-bottom: 0;
    margin: 0; }
    .product_subscibe.size_MO .subscribe_wrap > div {
      width: 100%;
      height: auto;
      min-height: 644px;
      max-width: unset;
      padding: 31px 34px 25px; }
      .product_subscibe.size_MO .subscribe_wrap > div h1 {
        font-size: 23px; }
      .product_subscibe.size_MO .subscribe_wrap > div h2 {
        margin: 12px 0 24px;
        font-size: 11px; }
      .product_subscibe.size_MO .subscribe_wrap > div h3 {
        font-size: 8px; }
      .product_subscibe.size_MO .subscribe_wrap > div ul {
        padding: 16px 25px; }
        .product_subscibe.size_MO .subscribe_wrap > div ul li {
          padding-left: 0; }
          .product_subscibe.size_MO .subscribe_wrap > div ul li img {
            margin-right: 5px; }
      .product_subscibe.size_MO .subscribe_wrap > div.cedu_item {
        width: calc(100% - 132px);
        min-height: auto;
        margin: 0 auto 40px; }
        .product_subscibe.size_MO .subscribe_wrap > div.cedu_item h1,
        .product_subscibe.size_MO .subscribe_wrap > div.cedu_item h3 {
          background: linear-gradient(to right, #ff5050 0%, #f8d000 100%);
          background-clip: text;
          -webkit-background-clip: text;
          color: transparent; } }

@media screen and (max-width: 630px) {
  .product_subscibe.size_MO .subscribe_wrap > div.cedu_item {
    width: calc(100% - 109px); } }

@media screen and (max-width: 480px) {
  .product_subscibe.size_MO .subscribe_wrap > div.cedu_item {
    width: calc(100% - 84px); } }

@media screen and (max-width: 425px) {
  .product_subscibe.size_MO .subscribe_wrap > div {
    padding: 31px 15px 25px; }
    .product_subscibe.size_MO .subscribe_wrap > div ul {
      padding: 25px 20px; } }

.product_introduce .inner {
  width: 100%;
  max-width: 1210px;
  margin: 0 auto;
  padding: 50px 0 120px; }

.product_introduce .tab_style {
  margin-top: 60px; }

.product_introduce .select_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 24px 0 30px; }
  .product_introduce .select_wrap > div {
    display: flex;
    align-items: center; }
    .product_introduce .select_wrap > div span {
      font-size: 16px;
      font-weight: 700;
      color: #24212e;
      margin-right: 20px; }
  .product_introduce .select_wrap .select {
    width: 140px; }

.product_introduce .pagination {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  column-gap: 20px; }
  .product_introduce .pagination li {
    font-size: 15px;
    font-weight: 400;
    color: #a2a2a2;
    cursor: pointer; }
    .product_introduce .pagination li.on {
      font-weight: 700;
      color: #09b9c6; }

.course_list > li {
  display: flex;
  justify-content: space-between;
  align-items: top;
  padding: 40px;
  border-radius: 15px;
  border: 1px solid #09b9c6;
  box-shadow: 0 0 30px 0 rgba(92, 103, 201, 0.1);
  background-color: #ffffff;
  position: relative;
  transition: 0.21s;
  box-sizing: border-box; }
  .course_list > li + li {
    margin-top: 50px; }
  .course_list > li::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    border: 3px solid #09b9c6;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.21s; }
  .course_list > li:hover::before {
    opacity: 1; }
  .course_list > li .target {
    height: max-content;
    padding: 5px 14px;
    border-radius: 100px;
    margin: 12px 20px 0 0;
    font-size: 16px;
    font-weight: 700;
    color: #fff; }
    .course_list > li .target.tag_green {
      background-color: #09b9c6; }
    .course_list > li .target.tag_purple {
      background-color: #7681e5; }
    .course_list > li .target.tag_pink {
      background-color: #ff84b0; }
    .course_list > li .target.tag_orange {
      background-color: #ffaa04; }
  .course_list > li .course_cont {
    flex: 1;
    padding-right: 30px; }
    .course_list > li .course_cont .course_title {
      font-size: 32px;
      font-weight: 700;
      color: #24212e;
      line-height: 1.45; }
    .course_list > li .course_cont .course_comment {
      font-size: 18px;
      font-weight: 500;
      color: #504d58;
      margin: 5px 0 20px; }
    .course_list > li .course_cont .course_date {
      display: flex; }
      .course_list > li .course_cont .course_date div {
        font-size: 14px;
        font-weight: 500;
        color: #7c7a82;
        position: relative;
        padding-right: 20px; }
        .course_list > li .course_cont .course_date div:first-of-type::after {
          content: '';
          display: block;
          width: 2px;
          height: 10px;
          background-color: #d3d3d5;
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translate(50%, -50%); }
    .course_list > li .course_cont .course_price {
      display: flex;
      align-items: center;
      margin-top: 31px; }
      .course_list > li .course_cont .course_price > p.origin-price {
        font-size: 22px;
        font-weight: 500;
        color: #d3d3d5;
        text-decoration: line-through;
        margin-right: 11px; }
      .course_list > li .course_cont .course_price > p.sale-price {
        font-size: 32px;
        font-weight: 700;
        color: #504d58; }
  .course_list > li .btn_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center; }
    .course_list > li .btn_wrap button {
      display: block;
      font-size: 20px;
      font-weight: 700;
      text-align: center;
      padding: 18px 0;
      min-width: 289px;
      max-width: 60px;
      border-radius: 15px; }
      .course_list > li .btn_wrap button + button {
        margin-top: 20px; }
    .course_list > li .btn_wrap .btn_border_purple {
      color: #7681e5;
      border: 2px solid #7681e5;
      background-color: #fff; }
    .course_list > li .btn_wrap .btn_purple {
      color: #ffffff;
      background-color: #7681e5;
      box-shadow: 0px 4px 3px rgba(104, 115, 170, 0.3); }

@media screen and (max-width: 1210px) {
  .product_introduce .inner {
    width: 100%;
    padding: 50px 30px 0; } }

@media screen and (max-width: 1024px) {
  .product_introduce .course_list > li {
    padding: 30px; }
    .product_introduce .course_list > li .course_cont .course_title {
      font-size: 24px; }
    .product_introduce .course_list > li .course_cont .course_price > p:last-of-type {
      font-size: 27px; }
    .product_introduce .course_list > li .btn_wrap button {
      font-size: 18px;
      min-width: 170px; } }

.course_detail {
  background-color: #fbfcff;
  padding: 100px 0; }
  .course_detail .bg_box {
    width: 100%;
    max-width: 1210px;
    margin: 0 auto;
    padding: 50px 40px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 0 30px 0 rgba(113, 115, 128, 0.1); }
    .course_detail .bg_box + button {
      display: block;
      margin: 80px auto 0;
      font-size: 20px;
      font-weight: 700;
      text-align: center;
      padding: 18px 0;
      min-width: 289px;
      border-radius: 15px;
      color: #ffffff;
      background-color: #7681e5;
      box-shadow: 0px 4px 3px rgba(104, 115, 170, 0.3); }
  .course_detail .course_list > li {
    padding: 0 0 52px;
    border-radius: 0;
    border: 0;
    background-color: transparent;
    box-shadow: none;
    border-bottom: 1px solid #d3d3d5; }
    .course_detail .course_list > li:hover::after {
      display: none; }
    .course_detail .course_list > li .course_program {
      font-size: 30px;
      font-weight: 500;
      color: #000000;
      margin: 50px 0 12px; }
    .course_detail .course_list > li .course_price {
      margin-top: 0; }
      .course_detail .course_list > li .course_price p {
        font-size: 22px;
        text-decoration: line-through;
        color: #d3d3d5; }
        .course_detail .course_list > li .course_price p.txt-blue {
          font-size: 30px;
          text-decoration: initial;
          color: #09b9c6;
          margin-left: 10px; }
  .course_detail .course_list .btn_wrap {
    justify-content: unset; }
  .course_detail .cont_box {
    padding-top: 50px; }
    .course_detail .cont_box .txt_wrap {
      margin-bottom: 50px;
      font-size: 18px;
      font-weight: 400;
      color: #504d58; }
      .course_detail .cont_box .txt_wrap span {
        font-size: inherit;
        font-weight: 700;
        color: inherit; }
      .course_detail .cont_box .txt_wrap + img {
        width: 100%; }
    .course_detail .cont_box ul {
      padding-left: 1.5em;
      list-style: disc; }
      .course_detail .cont_box ul li {
        list-style: disc; }
    .course_detail .cont_box ol {
      padding-left: 1.5em;
      list-style: decimal; }
      .course_detail .cont_box ol li {
        list-style: decimal; }
    .course_detail .cont_box > p.ql-indent-1 {
      padding-left: 3em; }
    .course_detail .cont_box > p.ql-indent-2 {
      padding-left: 6em; }
    .course_detail .cont_box > p.ql-indent-3 {
      padding-left: 9em; }
    .course_detail .cont_box > p.ql-indent-4 {
      padding-left: 12em; }
    .course_detail .cont_box > p.ql-indent-5 {
      padding-left: 15em; }
    .course_detail .cont_box > p.ql-indent-6 {
      padding-left: 18em; }
    .course_detail .cont_box > p.ql-indent-7 {
      padding-left: 21em; }
    .course_detail .cont_box > p.ql-indent-8 {
      padding-left: 24em; }
    .course_detail .cont_box > p.ql-indent-9 {
      padding-left: 27em; }
    .course_detail .cont_box > p.ql-align-center {
      text-align: center; }
    .course_detail .cont_box > p.ql-align-right {
      text-align: right; }
    .course_detail .cont_box > p.ql-align-justify {
      text-align: justify; }
    .course_detail .cont_box > p strong {
      font-weight: bold; }
      .course_detail .cont_box > p strong.ql-size-small {
        font-size: 10.5px; }
      .course_detail .cont_box > p strong.ql-size-normal {
        font-size: 14px; }
      .course_detail .cont_box > p strong.ql-size-large {
        font-size: 21px; }
      .course_detail .cont_box > p strong.ql-size-huge {
        font-size: 35px; }
    .course_detail .cont_box > p blockquote {
      border-left: 4px solid #ccc;
      margin-bottom: 5px;
      margin-top: 5px;
      padding-left: 16px; }
    .course_detail .cont_box > p span.ql-size-small {
      font-size: 10.5px; }
    .course_detail .cont_box > p span.ql-size-normal {
      font-size: 14px; }
    .course_detail .cont_box > p span.ql-size-large {
      font-size: 21px; }
    .course_detail .cont_box > p span.ql-size-huge {
      font-size: 35px; }

@media screen and (max-width: 1210px) {
  .course_detail {
    padding: 100px 30px; }
    .course_detail .bg_box {
      width: 100%; } }

#myclass .page-inner {
  padding: 50px 48px; }
  #myclass .page-inner .page-title {
    display: flex;
    align-items: center;
    font-size: 36px;
    line-height: 52px;
    color: #24212e;
    margin-bottom: 50px; }
    #myclass .page-inner .page-title img {
      margin-right: 10px; }
  #myclass .page-inner .myclass-main-content {
    min-height: calc(100vh - 592px); }
    #myclass .page-inner .myclass-main-content .header-wiget-bar {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 20px; }
      #myclass .page-inner .myclass-main-content .header-wiget-bar .long-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #ffffff;
        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
        border-radius: 15px;
        padding: 0 32px;
        height: 65px;
        flex: 1; }
        #myclass .page-inner .myclass-main-content .header-wiget-bar .long-bar .class {
          display: flex;
          align-items: center; }
          #myclass .page-inner .myclass-main-content .header-wiget-bar .long-bar .class h2 {
            font-weight: bold;
            font-size: 24px;
            line-height: 35px;
            color: #24212e; }
          #myclass .page-inner .myclass-main-content .header-wiget-bar .long-bar .class span {
            display: flex;
            align-items: center;
            transform: translateY(1px);
            font-weight: 500;
            font-size: 16px;
            line-height: 35px;
            color: #504d58; }
            #myclass .page-inner .myclass-main-content .header-wiget-bar .long-bar .class span:before {
              content: '';
              display: inline-block;
              width: 1px;
              height: 18px;
              background: #504d58;
              margin: 0 8px;
              vertical-align: middle; }
        #myclass .page-inner .myclass-main-content .header-wiget-bar .long-bar p {
          font-weight: 500;
          font-size: 15px;
          line-height: 22px;
          color: #7c7a82; }
          #myclass .page-inner .myclass-main-content .header-wiget-bar .long-bar p em {
            font-style: normal;
            font-weight: bold;
            font-size: 18px;
            line-height: 22px;
            color: #0f9ba5;
            margin-left: 12px; }
      #myclass .page-inner .myclass-main-content .header-wiget-bar .btn-size {
        display: flex;
        gap: 20px;
        width: 442px; }
    #myclass .page-inner .myclass-main-content .body-content {
      display: flex; }
      #myclass .page-inner .myclass-main-content .body-content > div {
        background: #ffffff;
        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
        border-radius: 20px; }
        #myclass .page-inner .myclass-main-content .body-content > div.list-box {
          width: calc(40% - 10px);
          flex: 0.4;
          padding: 40px 30px;
          margin-right: 20px; }
          #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-head {
            display: flex;
            gap: 10px; }
            #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-head .select-size {
              flex: 1;
              width: calc(100% - 210px); }
            #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-head .btn-size {
              width: 200px; }
          #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body {
            margin-top: 60px;
            height: calc(100vh - 123px);
            overflow: hidden auto; }
            #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body .title {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-bottom: 30px; }
              #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body .title div {
                display: flex;
                align-items: flex-end;
                max-width: calc(100% - 70px); }
                #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body .title div span {
                  display: inline-block;
                  max-width: 100%;
                  width: calc(100% - 150px);
                  font-weight: 500;
                  font-size: 21px;
                  color: #24212e;
                  /* 0828 안재현, PC 코스 삭제버튼 추가로 인한 스타일 추가 */ }
                  #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body .title div span + span.class_date {
                    width: 140px;
                    font-size: 15px;
                    margin-left: 10px;
                    word-break: keep-all;
                    color: #7c7a82; }
                #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body .title div img {
                  margin-left: 10px; }
                #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body .title div .icon_holder {
                  width: 21px;
                  height: 21px;
                  margin-left: 10px;
                  background: url(../../../img/icon/gear.svg);
                  background-repeat: no-repeat;
                  background-size: contain; }
              #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body .title > span {
                width: 60px;
                margin-left: 10px;
                text-align: right;
                font-weight: 500;
                font-size: 16px;
                color: #7c7a82;
                /* 0828 안재현, PC 코스 삭제버튼 추가로 인한 스타일 추가 */ }
                #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body .title > span img {
                  width: 21px; }
                  #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body .title > span img + img {
                    margin-left: 15px; }
            #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body ul {
              display: flex;
              flex-direction: column;
              gap: 20px;
              margin-bottom: 30px; }
              #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body ul li {
                background: #ffffff;
                border: 1.5px solid #9de3e8;
                border-radius: 15px;
                padding: 17px;
                /*
                  22-02-03 버튼 제거시 높이 맞춤 (line-height 수정 )
                  hubdnccsr // 채성렬
                  */ }
                #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body ul li.on {
                  border: 2.5px solid #09b9c6;
                  box-shadow: 0px 3px 4px rgba(104, 154, 170, 0.3);
                  border-radius: 15px;
                  padding: 16px; }
                #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body ul li .test-date {
                  display: flex;
                  padding-bottom: 17px;
                  border-bottom: 1px solid #9de3e8; }
                  #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body ul li .test-date h2 {
                    font-family: 'Inter', 'Noto Sans KR';
                    font-style: normal;
                    font-weight: 500;
                    font-size: 24px;
                    line-height: 29px;
                    color: #09b9c6; }
                  #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body ul li .test-date button {
                    background: #ffffff;
                    border: 1px solid #7681e5;
                    box-sizing: border-box;
                    border-radius: 10px;
                    margin-left: 15px;
                    width: 80px;
                    height: 30px;
                    font-weight: 500;
                    font-size: 13px;
                    text-align: center;
                    color: #7681e5; }
                #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body ul li .test-type {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  padding: 14px 0;
                  cursor: pointer; }
                  #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body ul li .test-type:not(:first-of-type) {
                    border-top: 1px solid #d3d3d5; }
                  #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body ul li .test-type:last-of-type {
                    padding-bottom: 0px; }
                  #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body ul li .test-type span {
                    font-style: normal;
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 35px;
                    color: #504d58;
                    width: calc(100% - 35px); }
                  #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body ul li .test-type .play {
                    width: 35px;
                    height: 35px;
                    border-radius: 50%;
                    background-color: #e6f8f9;
                    background-image: url("/img/icon/play-cyan.svg");
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: 17px 14px; }
        #myclass .page-inner .myclass-main-content .body-content > div.table-box {
          width: calc(60% - 10px);
          flex: 0.6;
          padding: 37px 10px 28px 25px; }

@media screen and (max-width: 1200px) {
  #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-head {
    flex-direction: column; }
    #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-head .select-size {
      width: 100%; }
    #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-head .btn-size {
      width: 100%; } }

@media screen and (max-width: 1024px) {
  #myclass .page-inner .myclass-main-content .header-wiget-bar {
    flex-direction: column;
    width: 100%; }
    #myclass .page-inner .myclass-main-content .header-wiget-bar .long-bar {
      width: 100%;
      flex: initial; }
    #myclass .page-inner .myclass-main-content .header-wiget-bar .btn-size {
      width: 100%; }
      #myclass .page-inner .myclass-main-content .header-wiget-bar .btn-size button {
        flex: 1; }
  #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body .title {
    /* 0828 안재현, PC 코스 삭제버튼 추가로 인한 스타일 추가 */ }
    #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body .title p {
      font-size: 14px;
      line-height: 21px;
      font-weight: 700;
      max-width: calc(100% - 120px); }
      #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body .title p span {
        max-width: initial; }
    #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body .title > div {
      max-width: calc(100% - 120px); }
      #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body .title > div span {
        width: calc(100%); }
    #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body .title > span {
      width: 110px;
      font-size: 12px;
      color: #a7a6ab; }
  #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body ul li .test-date {
    justify-content: space-between; }
    #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body ul li .test-date h2 {
      font-size: 14px; }
  #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body ul li .test-type span {
    font-size: 12px; }
  #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body ul li .test-type .play {
    width: 26px;
    height: 26px;
    background-size: 50%; } }

@media screen and (max-width: 1024px) {
  #myclass {
    background: #fafcff; }
    #myclass .page-inner {
      padding: 30px 0 65px; }
      #myclass .page-inner .myclass-main-content {
        min-height: initial; }
        #myclass .page-inner .myclass-main-content .header-wiget-bar .long-bar {
          flex-direction: column;
          padding: 17px 13px;
          align-items: flex-start;
          height: initial; }
          #myclass .page-inner .myclass-main-content .header-wiget-bar .long-bar .class {
            width: 100%;
            padding-bottom: 17px;
            margin-bottom: 10px;
            border-bottom: 1px solid #e9e9ea; }
            #myclass .page-inner .myclass-main-content .header-wiget-bar .long-bar .class h2 {
              font-size: 16px;
              line-height: 24px; }
            #myclass .page-inner .myclass-main-content .header-wiget-bar .long-bar .class span {
              font-size: 12px;
              line-height: 24px; }
              #myclass .page-inner .myclass-main-content .header-wiget-bar .long-bar .class span:before {
                height: 12px;
                background: #a7a6ab; }
          #myclass .page-inner .myclass-main-content .header-wiget-bar .long-bar .bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%; }
            #myclass .page-inner .myclass-main-content .header-wiget-bar .long-bar .bottom p {
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 13px; }
              #myclass .page-inner .myclass-main-content .header-wiget-bar .long-bar .bottom p em {
                font-size: 14px; }
            #myclass .page-inner .myclass-main-content .header-wiget-bar .long-bar .bottom button {
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 9px 15px;
              background: #e6f8f9;
              border-radius: 10px;
              font-size: 12px;
              color: #09b9c6; }
              #myclass .page-inner .myclass-main-content .header-wiget-bar .long-bar .bottom button img {
                margin-left: 5px; }
        #myclass .page-inner .myclass-main-content .body-content > div.list-box {
          width: 100%;
          flex: initial;
          margin-right: 0;
          background: inherit;
          box-shadow: initial;
          border-radius: initial;
          padding: 0; }
          #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-head .select .select-input {
            font-size: 14px;
            font-weight: 500;
            height: 60px; }
          #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-head .select > .select-options .select-option-wrap > .select-option {
            font-size: 14px;
            font-weight: 500; }
          #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body {
            margin-top: 20px;
            border-top: 1px solid #e9e9ea;
            padding-top: 20px; }
            #myclass .page-inner .myclass-main-content .body-content > div.list-box .list-body ul li {
              filter: drop-shadow(0px 3px 4px rgba(104, 154, 170, 0.3)); } }

#teacher-management {
  padding: 60px 32px 24px; }
  #teacher-management .page-inner {
    padding: 32px 0 0;
    height: calc(100%); }
    #teacher-management .page-inner .page-title {
      display: flex;
      align-items: center;
      color: #24212e;
      font-size: 28px;
      line-height: 42px;
      margin-bottom: 24px; }
      #teacher-management .page-inner .page-title img {
        width: 29px;
        margin-right: 12px; }
    #teacher-management .page-inner .main-content {
      display: flex;
      /*
      gap: 20px;
      */
      gap: 24px;
      margin-top: 24px;
      /*
      height: calc(100vh - 68px);
      */
      height: calc(100vh - 260px); }
      #teacher-management .page-inner .main-content .list-box {
        flex: 1;
        max-width: 730px;
        display: flex;
        flex-direction: column;
        gap: 20px; }
        #teacher-management .page-inner .main-content .list-box .long-bar {
          display: flex;
          gap: 20px; }
          #teacher-management .page-inner .main-content .list-box .long-bar .academy-name {
            flex: 1;
            padding: 15px 40px;
            background: #ffffff;
            box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
            border-radius: 15px; }
            #teacher-management .page-inner .main-content .list-box .long-bar .academy-name h2 {
              font-size: 24px;
              line-height: 35px;
              color: #24212e; }
          #teacher-management .page-inner .main-content .list-box .long-bar .btn-size {
            width: 211px; }
        #teacher-management .page-inner .main-content .list-box .list-content {
          flex: 1;
          position: relative;
          background: #ffffff;
          padding: 32px 32px 68px;
          border-radius: 12px;
          box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12);
          height: 100%; }
          #teacher-management .page-inner .main-content .list-box .list-content > .btn-size {
            position: absolute;
            bottom: 93px;
            right: 50px;
            width: 134px; }
          #teacher-management .page-inner .main-content .list-box .list-content ul {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 0;
            height: 100%;
            overflow-y: auto; }
            #teacher-management .page-inner .main-content .list-box .list-content ul li {
              display: flex;
              align-items: center;
              justify-content: space-between;
              background: #ffffff;
              box-sizing: border-box;
              cursor: pointer;
              border-radius: 12px;
              border: 1px solid #e9e9ea;
              padding: 16px 20px; }
              #teacher-management .page-inner .main-content .list-box .list-content ul li.on {
                padding: 15px 19px;
                border: 2px solid #09b9c6; }
              #teacher-management .page-inner .main-content .list-box .list-content ul li .teacher-profile {
                display: flex;
                align-items: center; }
                #teacher-management .page-inner .main-content .list-box .list-content ul li .teacher-profile .profile {
                  width: 52px;
                  height: 52px;
                  border-radius: 50%;
                  overflow: hidden;
                  margin-right: 16px; }
                #teacher-management .page-inner .main-content .list-box .list-content ul li .teacher-profile .name {
                  font-size: 0; }
                  #teacher-management .page-inner .main-content .list-box .list-content ul li .teacher-profile .name h3 {
                    font-size: 16px;
                    line-height: 24px;
                    color: #504d58; }
                  #teacher-management .page-inner .main-content .list-box .list-content ul li .teacher-profile .name span {
                    font-weight: 400;
                    font-size: 14px;
                    line-height: 22px;
                    color: #a7a6ab;
                    margin-top: 2px; }
              #teacher-management .page-inner .main-content .list-box .list-content ul li .class-index {
                flex-shrink: 0; }
                #teacher-management .page-inner .main-content .list-box .list-content ul li .class-index p {
                  font-size: 16px;
                  line-height: 24px;
                  color: #504d58; }
                  #teacher-management .page-inner .main-content .list-box .list-content ul li .class-index p em {
                    font: inherit;
                    color: #09b9c6;
                    margin-left: 6px; }
          #teacher-management .page-inner .main-content .list-box .list-content .pagination-component {
            width: 100%;
            position: absolute;
            bottom: 24px;
            width: calc(100% - 64px);
            margin-top: 0; }
      #teacher-management .page-inner .main-content .desc-box {
        display: flex;
        align-items: center;
        flex-direction: column;
        flex: 1;
        height: 100%;
        position: relative;
        background: #ffffff;
        padding: 32px;
        overflow: auto;
        border-radius: 12px;
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12); }
        #teacher-management .page-inner .main-content .desc-box .desc-inner {
          width: 100%;
          height: 100%; }
          #teacher-management .page-inner .main-content .desc-box .desc-inner .teacher-profile {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 24px;
            border-bottom: 1px solid #f2f2f7; }
            #teacher-management .page-inner .main-content .desc-box .desc-inner .teacher-profile .profile {
              width: 72px;
              height: 72px;
              border-radius: 50%;
              overflow: hidden;
              margin-right: 20px; }
              #teacher-management .page-inner .main-content .desc-box .desc-inner .teacher-profile .profile img {
                width: 100%;
                height: 100%; }
            #teacher-management .page-inner .main-content .desc-box .desc-inner .teacher-profile .name {
              display: flex;
              flex-direction: column; }
              #teacher-management .page-inner .main-content .desc-box .desc-inner .teacher-profile .name h3 {
                font-size: 20px;
                line-height: 30px;
                color: #24212e; }
              #teacher-management .page-inner .main-content .desc-box .desc-inner .teacher-profile .name span {
                font-weight: 500;
                font-size: 14px;
                line-height: 17px;
                color: #a7a6ab; }
              #teacher-management .page-inner .main-content .desc-box .desc-inner .teacher-profile .name ul {
                margin-top: 6px; }
                #teacher-management .page-inner .main-content .desc-box .desc-inner .teacher-profile .name ul li {
                  display: flex;
                  align-items: center;
                  font-size: 16px;
                  line-height: 24px;
                  color: #7c7a82; }
                  #teacher-management .page-inner .main-content .desc-box .desc-inner .teacher-profile .name ul li img {
                    margin-right: 6px; }
                  #teacher-management .page-inner .main-content .desc-box .desc-inner .teacher-profile .name ul li:not(:first-of-type) {
                    margin-left: 12px; }
          #teacher-management .page-inner .main-content .desc-box .desc-inner .info-box {
            height: calc(100% - 117px); }
            #teacher-management .page-inner .main-content .desc-box .desc-inner .info-box .info-type {
              height: 100%; }
              #teacher-management .page-inner .main-content .desc-box .desc-inner .info-box .info-type .new_table_wrap {
                height: calc(100% - 42px); }
              #teacher-management .page-inner .main-content .desc-box .desc-inner .info-box .info-type:not(:last-of-type) {
                margin-bottom: 60px; }
              #teacher-management .page-inner .main-content .desc-box .desc-inner .info-box .info-type .btn-size {
                width: 150px; }
                #teacher-management .page-inner .main-content .desc-box .desc-inner .info-box .info-type .btn-size.small {
                  width: 125px; }
              #teacher-management .page-inner .main-content .desc-box .desc-inner .info-box .info-type .title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-bottom: 12px; }
                #teacher-management .page-inner .main-content .desc-box .desc-inner .info-box .info-type .title h3 {
                  font-size: 16px;
                  line-height: 24px;
                  color: #7c7a82; }
              #teacher-management .page-inner .main-content .desc-box .desc-inner .info-box .info-type ul {
                display: flex;
                flex-direction: column;
                gap: 25px; }
                #teacher-management .page-inner .main-content .desc-box .desc-inner .info-box .info-type ul li {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  padding-bottom: 10px;
                  border-bottom: 1px solid #d3d3d5; }
                  #teacher-management .page-inner .main-content .desc-box .desc-inner .info-box .info-type ul li > span {
                    font-size: 20px;
                    line-height: 29px;
                    color: #504d58; }
              #teacher-management .page-inner .main-content .desc-box .desc-inner .info-box .info-type table th::after, #teacher-management .page-inner .main-content .desc-box .desc-inner .info-box .info-type table th:before {
                display: none; }
            #teacher-management .page-inner .main-content .desc-box .desc-inner .info-box .new_factory_button img {
              margin-right: 6px; }
            #teacher-management .page-inner .main-content .desc-box .desc-inner .info-box .new_table_wrap thead tr th {
              font-weight: 500;
              border-top: none;
              border-bottom: none;
              padding: 9px 16px 11px; }
              #teacher-management .page-inner .main-content .desc-box .desc-inner .info-box .new_table_wrap thead tr th:before {
                content: '';
                display: inline-block;
                width: 100%;
                height: 1px;
                background-color: #e9e9ea;
                position: absolute;
                left: 0;
                top: 0; }
              #teacher-management .page-inner .main-content .desc-box .desc-inner .info-box .new_table_wrap thead tr th:after {
                content: '';
                display: inline-block;
                width: 100%;
                height: 1px;
                background-color: #e9e9ea;
                position: absolute;
                left: 0;
                top: auto;
                bottom: -1px; }
            #teacher-management .page-inner .main-content .desc-box .desc-inner .info-box .new_table_wrap tbody tr td {
              padding: 9px 16px 10px; }
          #teacher-management .page-inner .main-content .desc-box .desc-inner .main-btn-size {
            width: 284px;
            margin: 100px auto 0; }
  #teacher-management .campus_top_info {
    padding: 10px 24px;
    min-height: 54px; }
  #teacher-management.mb-teacher-management {
    padding: 48px 0 80px;
    background: #fff !important;
    height: 100%; }
    #teacher-management.mb-teacher-management.bottom_btn_none {
      padding-bottom: 0; }
    #teacher-management.mb-teacher-management .page-inner {
      padding: 0;
      background: #f8f9fa; }
      #teacher-management.mb-teacher-management .page-inner .page-title {
        padding: 24px 20px 0;
        font-size: 24px;
        line-height: 36px;
        margin-bottom: 0; }
        #teacher-management.mb-teacher-management .page-inner .page-title img {
          width: 24px;
          height: 21px; }
      #teacher-management.mb-teacher-management .page-inner .main-content {
        margin-top: 16px;
        height: calc(100% - 100px);
        height: calc(100% - 76px);
        padding-bottom: 0;
        overflow: hidden;
        background-color: #ffffff;
        border-radius: 8px 8px 0 0; }
        #teacher-management.mb-teacher-management .page-inner .main-content .list-box {
          width: 100%;
          max-width: 100%; }
          #teacher-management.mb-teacher-management .page-inner .main-content .list-box .long-bar {
            position: relative;
            justify-content: flex-end;
            padding: 0 16px;
            margin-bottom: 15px; }
            #teacher-management.mb-teacher-management .page-inner .main-content .list-box .long-bar .academy-name {
              display: none; }
            #teacher-management.mb-teacher-management .page-inner .main-content .list-box .long-bar .btn-size {
              width: initial;
              position: absolute;
              right: 16px;
              top: -15px; }
              #teacher-management.mb-teacher-management .page-inner .main-content .list-box .long-bar .btn-size button {
                padding: 0 15px;
                border-radius: 10px; }
          #teacher-management.mb-teacher-management .page-inner .main-content .list-box .list-content {
            padding: 0;
            border-radius: 8px 8px 0 0; }
            #teacher-management.mb-teacher-management .page-inner .main-content .list-box .list-content .teacher-count {
              padding: 16px 20px;
              text-align: center;
              border-radius: 8px 8px 0 0;
              border: 1px solid #e9e9ea; }
              #teacher-management.mb-teacher-management .page-inner .main-content .list-box .list-content .teacher-count span {
                font-size: 14px;
                line-height: 22px;
                font-weight: 700;
                color: #24212e; }
                #teacher-management.mb-teacher-management .page-inner .main-content .list-box .list-content .teacher-count span:last-child {
                  margin-left: 4px;
                  color: #09b9c6; }
            #teacher-management.mb-teacher-management .page-inner .main-content .list-box .list-content .pagination-component {
              position: static;
              width: 100%;
              margin-top: 20px; }
            #teacher-management.mb-teacher-management .page-inner .main-content .list-box .list-content ul {
              height: auto;
              max-height: calc(100% - 114px);
              overflow-y: auto;
              padding: 0;
              border-left: 1px solid #e9e9ea;
              border-right: 1px solid #e9e9ea;
              gap: 0; }
              #teacher-management.mb-teacher-management .page-inner .main-content .list-box .list-content ul li {
                padding: 16px 20px;
                border: none;
                border-bottom: 1px solid #e9e9ea;
                border-radius: 0; }
                #teacher-management.mb-teacher-management .page-inner .main-content .list-box .list-content ul li.on {
                  border: none;
                  border-bottom: 1px solid #e9e9e9; }
                #teacher-management.mb-teacher-management .page-inner .main-content .list-box .list-content ul li .teacher-profile {
                  width: calc(100% - 90px); }
                  #teacher-management.mb-teacher-management .page-inner .main-content .list-box .list-content ul li .teacher-profile .profile {
                    width: 36px;
                    min-width: 36px;
                    height: 36px;
                    margin-right: 8px; }
                  #teacher-management.mb-teacher-management .page-inner .main-content .list-box .list-content ul li .teacher-profile .name {
                    width: calc(100% - 50px); }
                    #teacher-management.mb-teacher-management .page-inner .main-content .list-box .list-content ul li .teacher-profile .name h3 {
                      font-size: 14px;
                      font-weight: 500;
                      line-height: 22px;
                      vertical-align: bottom; }
                      #teacher-management.mb-teacher-management .page-inner .main-content .list-box .list-content ul li .teacher-profile .name h3 + span {
                        font-size: 13px;
                        font-weight: 400;
                        color: #a7a6ab;
                        line-height: 20px; }
                    #teacher-management.mb-teacher-management .page-inner .main-content .list-box .list-content ul li .teacher-profile .name span {
                      margin-top: 0; }
                #teacher-management.mb-teacher-management .page-inner .main-content .list-box .list-content ul li .class-index p {
                  text-align: right;
                  font-size: 14px;
                  line-height: 22px; }
                  #teacher-management.mb-teacher-management .page-inner .main-content .list-box .list-content ul li .class-index p em {
                    margin-left: 4px;
                    line-height: 22px; }
        #teacher-management.mb-teacher-management .page-inner .main-content .desc-box {
          width: 100%;
          padding: 30px 16px;
          border-radius: 0;
          background: #ffffff; }
          #teacher-management.mb-teacher-management .page-inner .main-content .desc-box .desc-inner {
            width: 100%;
            max-height: initial;
            padding-right: 0; }
            #teacher-management.mb-teacher-management .page-inner .main-content .desc-box .desc-inner .teacher-profile {
              margin-bottom: 50px; }
              #teacher-management.mb-teacher-management .page-inner .main-content .desc-box .desc-inner .teacher-profile .profile {
                width: 48px;
                height: 48px;
                margin-right: 12px; }
              #teacher-management.mb-teacher-management .page-inner .main-content .desc-box .desc-inner .teacher-profile .name h3 {
                color: #24212e;
                font-size: 14px;
                font-weight: 500;
                line-height: 22px; }
              #teacher-management.mb-teacher-management .page-inner .main-content .desc-box .desc-inner .teacher-profile .name ul {
                margin-top: 4px; }
                #teacher-management.mb-teacher-management .page-inner .main-content .desc-box .desc-inner .teacher-profile .name ul li {
                  color: #7c7a82;
                  font-size: 12px;
                  line-height: 18px; }
                  #teacher-management.mb-teacher-management .page-inner .main-content .desc-box .desc-inner .teacher-profile .name ul li img {
                    margin-right: 4px; }
            #teacher-management.mb-teacher-management .page-inner .main-content .desc-box .desc-inner .info-box .info-type:not(:last-of-type) {
              margin-bottom: 40px; }
            #teacher-management.mb-teacher-management .page-inner .main-content .desc-box .desc-inner .info-box .info-type .title {
              border-bottom: none;
              padding: 0;
              margin-bottom: 30px; }
              #teacher-management.mb-teacher-management .page-inner .main-content .desc-box .desc-inner .info-box .info-type .title h3 {
                font-size: 18px; }
            #teacher-management.mb-teacher-management .page-inner .main-content .desc-box .desc-inner .info-box .info-type ul li span {
              font-weight: 500;
              font-size: 15px; }
            #teacher-management.mb-teacher-management .page-inner .main-content .desc-box .desc-inner .info-box .info-type .no-data {
              padding: 40px 0; }
            #teacher-management.mb-teacher-management .page-inner .main-content .desc-box .desc-inner .info-box .new_table_wrap thead tr th {
              padding: 9px 16px;
              font-size: 12px;
              line-height: 18px; }
              #teacher-management.mb-teacher-management .page-inner .main-content .desc-box .desc-inner .info-box .new_table_wrap thead tr th:first-of-type {
                padding: 9px 20px; }
            #teacher-management.mb-teacher-management .page-inner .main-content .desc-box .desc-inner .info-box .new_table_wrap tbody tr td {
              font-weight: 400;
              padding: 9px 16px; }
              #teacher-management.mb-teacher-management .page-inner .main-content .desc-box .desc-inner .info-box .new_table_wrap tbody tr td:first-of-type {
                padding: 9px 20px; }
            #teacher-management.mb-teacher-management .page-inner .main-content .desc-box .desc-inner .info-box .new_factory_button {
              height: 30px; }
            #teacher-management.mb-teacher-management .page-inner .main-content .desc-box .desc-inner .main-btn-size {
              width: 164px;
              margin: 50px Auto 20px; }
    #teacher-management.mb-teacher-management .new_table_wrap {
      width: calc(100% + 32px);
      margin-left: -16px; }
      #teacher-management.mb-teacher-management .new_table_wrap tr th:first-of-type,
      #teacher-management.mb-teacher-management .new_table_wrap tr td:first-of-type {
        padding: 8px 20px; }
    #teacher-management.mb-teacher-management.detail.bottom_btn_none .page-inner {
      height: calc(100vh - 48px); }
      #teacher-management.mb-teacher-management.detail.bottom_btn_none .page-inner .main-content .desc-box .desc-inner .info-box .info-type .new_table_wrap {
        padding-bottom: 32px; }
    #teacher-management.mb-teacher-management.detail .page-inner {
      height: calc(100vh - 128px); }
      #teacher-management.mb-teacher-management.detail .page-inner .main-content {
        height: 100%;
        margin-top: 0;
        border-radius: 0; }
        #teacher-management.mb-teacher-management.detail .page-inner .main-content .desc-box {
          padding: 0px 16px;
          overflow: visible; }
          #teacher-management.mb-teacher-management.detail .page-inner .main-content .desc-box .desc-inner .teacher-profile {
            width: calc(100% + 32px);
            background-color: #f8f9fa;
            padding: 16px 20px;
            margin-left: -16px;
            margin-bottom: 0; }
          #teacher-management.mb-teacher-management.detail .page-inner .main-content .desc-box .desc-inner .info-box {
            height: calc(100% - 81px); }
            #teacher-management.mb-teacher-management.detail .page-inner .main-content .desc-box .desc-inner .info-box .info-type .new_table_wrap {
              height: 100% !important; }

/* 
@media screen and (max-width: 1024px) {
  #teacher-management {
    padding: 48px 0 80px;
    background: #fff;
    .page-inner {
      padding: 0;
      background: #fbfcff;
      .page-title {
        // display: none;
        padding: 39px 16px 0;
        font-size: 24px;
        line-height: initial;
        margin-bottom: 0;
        img {
          width: 24px;
          height: 21px;
        }
      }
      .main-content {
        margin-top: 16px;
        height: calc(100% - 100px);
        padding-bottom: 0;
        overflow: hidden;
        .list-box {
          // display: none;
          width: 100%;
          max-width: 100%;
          .long-bar {
            position: relative;
            justify-content: flex-end;
            padding: 0 16px;
            margin-bottom: 15px;
            .academy-name {
              display: none;
            }
            .btn-size {
              width: initial;
              position: absolute;
              right: 16px;
              top: -15px;
              button {
                padding: 0 15px;
                border-radius: 10px;
              }
            }
          }
          .list-content {
            padding: 0;
            box-shadow: initial;
            .teacher-count {
              padding: 20px 0 18px;
              text-align: center;
              border-bottom: 1px solid #e9e9ea;
              box-shadow: 0px -20px 30px rgba(92, 103, 201, 0.1);
              span {
                font-size: 14px;
                font-weight: 700;
                color: #24212e;
                &:last-child {
                  margin-left: 4px;
                  color: #09b9c6;
                }
              }
            }
            .pagination-component {
              position: static;
              width: 100%;
            }
            ul {
              padding: 20px 16px;
              height: calc(100% - 94px);
              overflow-y: auto;
              li {
                padding: 0;
                border: none;
                &.on {
                  padding: 0;
                  border: none;
                }

                .teacher-profile {
                  width: calc(100% - 90px);

                  .profile {
                    width: 36px;
                    min-width: 36px;
                    height: 36px;
                    margin-right: 8px;
                  }
                  .name {
                    width: calc(100% - 50px);
                    h3 {
                      font-size: 14px;
                      font-weight: 500;
                      line-height: initial;
                      vertical-align: bottom;
                      & + span {
                        font-size: 13px;
                        font-weight: 400;
                        color: #a7a6ab;
                        line-height: 20px;
                      }
                    }
                  }
                }
                .class-index {
                  p {
                    text-align: right;
                    width: 84px;
                    font-size: 14px;
                  }
                }
              }
            }
          }
        }
        .desc-box {
          width: 100%;
          padding: 30px 16px;
          border-radius: 0;
          background: #ffffff;
          .desc-inner {
            width: 100%;
            max-height: initial;
            padding-right: 0;
            .teacher-profile {
              margin-bottom: 50px;
              .profile {
                width: 48px;
                min-width: 48px;
                height: 48px;
                margin-right: 12px;
              }
              .name {
                h3 {
                  color: #24212e;
                  font-size: 14px;
                  font-weight: 500;
                  line-height: 22px;
                }
                ul {
                  margin-top: 4px;
                  li {
                    color: #7c7a82;
                    font-size: 12px;
                    line-height: 18px;
                    img {
                      margin-right: 4px;
                    }
                  }
                }
              }
            }
            .info-box {
              .info-type {
                &:not(:last-of-type) {
                  margin-bottom: 40px;
                }
                .title {
                  border-bottom: none;
                  padding: 0;
                  margin-bottom: 30px;
                  h3 {
                    font-size: 18px;
                  }
                }
                ul {
                  li {
                    span {
                      font-weight: 500;
                      font-size: 15px;
                    }
                  }
                }

                .btn-size {
                  // width: 125px;
                }
                .no-data {
                  padding: 40px 0;
                }
              }
            }
            .main-btn-size {
              width: 164px;
              margin: 50px Auto 20px;
            }
          }
        }
      }
    }
    .new_table_wrap {
      width: calc(100% + 32px);
      margin-left: -16px;
      tr {
        th,
        td {
          &:first-of-type {
            padding: 8px 20px;
          }
        }
      }
    }
    &.detail {
      .page-inner {
        .main-content {
          margin-top: 0;
          .desc-box {
            padding: 0px 16px;
            .desc-inner {
              .teacher-profile {
                width: calc(100% + 32px);
                background-color: #f8f9fa;
                padding: 16px 20px;
                margin-left: -16px;
                margin-bottom: 0;
              }
            }
          }
        }
      }
    }
  }
}
*/
@media screen and (max-width: 1024px) {
  #mobile-myclass-table .page-inner {
    padding: 17px 0 22px; } }

#mobile-class-change .page-inner {
  padding: 30px 16px 0; }
  #mobile-class-change .page-inner .title {
    margin-bottom: 25px; }
    #mobile-class-change .page-inner .title p {
      font-size: 12px;
      line-height: 18px;
      color: #7c7a82;
      padding-bottom: 10px;
      border-bottom: 1px solid #d3d3d5; }
  #mobile-class-change .page-inner .member-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px; }
    #mobile-class-change .page-inner .member-profile .thumbnail {
      width: 32px;
      height: 32px;
      border-radius: 50%; }
      #mobile-class-change .page-inner .member-profile .thumbnail img {
        width: 100%;
        height: 100%;
        border-radius: inherit; }
    #mobile-class-change .page-inner .member-profile span {
      color: #24212e; }
  #mobile-class-change .page-inner .change-select .item {
    display: flex;
    align-items: center;
    margin-bottom: 15px; }
    #mobile-class-change .page-inner .change-select .item span {
      display: flex;
      align-items: center;
      position: relative; }
      #mobile-class-change .page-inner .change-select .item span:first-of-type {
        width: 100px;
        margin-right: 30px;
        border-right: 1px solid #504d58; }
      #mobile-class-change .page-inner .change-select .item span:last-of-type {
        flex: 1; }
  #mobile-class-change .page-inner .change-select dl {
    display: flex;
    align-items: center;
    margin-bottom: 15px; }
    #mobile-class-change .page-inner .change-select dl dt {
      width: 100px;
      font-size: 14px;
      color: #09b9c6;
      margin-right: 30px; }
    #mobile-class-change .page-inner .change-select dl dd {
      display: flex;
      align-items: center;
      flex: 1; }
  #mobile-class-change .page-inner .btn-wrap {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 5px; }
    #mobile-class-change .page-inner .btn-wrap .pc-main-button.reverse {
      box-shadow: none; }

@media screen and (max-width: 1024px) {
  #mobile-add-class .page-inner {
    padding: 56px 16px 0px; } }

#academic-management .page-inner {
  padding: 50px 48px; }
  #academic-management .page-inner .page-title {
    display: flex;
    align-items: center;
    font-size: 36px;
    line-height: 52px;
    color: #24212e;
    margin-bottom: 50px; }
    #academic-management .page-inner .page-title img {
      margin-right: 10px; }
  #academic-management .page-inner .page-main {
    display: flex;
    align-items: flex-start; }
    #academic-management .page-inner .page-main .side-box {
      width: calc(16% - 0px);
      margin-right: 20px;
      min-width: 250px; }
    #academic-management .page-inner .page-main .desc-box {
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: calc(84% - 0px);
      min-width: calc(100% - 270px);
      flex: 1; }
      #academic-management .page-inner .page-main .desc-box .row {
        display: flex;
        width: 100%;
        gap: 20px; }
        #academic-management .page-inner .page-main .desc-box .row .st-info-box {
          flex: 1;
          padding: 25px 30px;
          background: #ffffff;
          box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
          border-radius: 20px; }
          #academic-management .page-inner .page-main .desc-box .row .st-info-box > div {
            display: flex; }
            #academic-management .page-inner .page-main .desc-box .row .st-info-box > div:not(:first-of-type) {
              border-top: 1px solid #d3d3d5;
              padding-top: 22px;
              margin-top: 24px; }
            #academic-management .page-inner .page-main .desc-box .row .st-info-box > div dl {
              display: flex;
              flex: 1; }
              #academic-management .page-inner .page-main .desc-box .row .st-info-box > div dl:last-of-type {
                margin-left: 10%; }
              #academic-management .page-inner .page-main .desc-box .row .st-info-box > div dl dt {
                box-sizing: border-box;
                font-weight: 500;
                font-size: 16px;
                line-height: 23px;
                color: #504d58;
                min-width: 140px; }
              #academic-management .page-inner .page-main .desc-box .row .st-info-box > div dl dd {
                box-sizing: border-box;
                font-size: 18px;
                line-height: 22px;
                color: #24212e; }
                #academic-management .page-inner .page-main .desc-box .row .st-info-box > div dl dd.b {
                  font-weight: 500;
                  font-size: 22px;
                  line-height: 32px;
                  color: #24212e; }
        #academic-management .page-inner .page-main .desc-box .row .btn-wrap {
          display: flex;
          flex-direction: column;
          gap: 14px; }
          #academic-management .page-inner .page-main .desc-box .row .btn-wrap button {
            width: 211px; }
      #academic-management .page-inner .page-main .desc-box .course-date {
        padding: 25px 30px;
        background: #ffffff;
        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
        border-radius: 20px; }
        #academic-management .page-inner .page-main .desc-box .course-date dl {
          display: flex;
          align-items: flex-start;
          gap: 5vw; }
          #academic-management .page-inner .page-main .desc-box .course-date dl:first-of-type {
            padding-bottom: 25px;
            border-bottom: 1px solid #d3d3d5;
            margin-bottom: 25px; }
          #academic-management .page-inner .page-main .desc-box .course-date dl dt {
            font-weight: bold;
            font-size: 26px;
            line-height: 48px;
            color: #24212e; }
          #academic-management .page-inner .page-main .desc-box .course-date dl dd {
            width: 80%;
            flex: 1; }
            #academic-management .page-inner .page-main .desc-box .course-date dl dd .swiper-box {
              width: 100%; }
            #academic-management .page-inner .page-main .desc-box .course-date dl dd .all-check {
              margin-top: 28px; }
      #academic-management .page-inner .page-main .desc-box .chart-box {
        background: #ffffff;
        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
        border-radius: 20px;
        padding: 32px 30px 60px; }
        #academic-management .page-inner .page-main .desc-box .chart-box h2 {
          font-size: 26px;
          line-height: 38px;
          color: #24212e; }
        #academic-management .page-inner .page-main .desc-box .chart-box .chart-swipe-box {
          position: relative;
          padding: 80px 0 55px;
          margin: 0 40px;
          border-bottom: 1px solid #d3d3d5;
          margin-bottom: 40px; }
          #academic-management .page-inner .page-main .desc-box .chart-box .chart-swipe-box .navigation-arrows-box .arrow-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10; }
            #academic-management .page-inner .page-main .desc-box .chart-box .chart-swipe-box .navigation-arrows-box .arrow-btn img {
              width: 19.35px;
              height: 38.7px; }
            #academic-management .page-inner .page-main .desc-box .chart-box .chart-swipe-box .navigation-arrows-box .arrow-btn.prev {
              left: -40px; }
            #academic-management .page-inner .page-main .desc-box .chart-box .chart-swipe-box .navigation-arrows-box .arrow-btn.next {
              right: -40px; }
        #academic-management .page-inner .page-main .desc-box .chart-box .avg-swipe-box h2 {
          font-size: 26px;
          line-height: 38px;
          color: #24212e;
          margin-bottom: 25px; }
      #academic-management .page-inner .page-main .desc-box .teacher-comment-box {
        background: #ffffff;
        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
        border-radius: 20px;
        padding: 25px 30px; }
        #academic-management .page-inner .page-main .desc-box .teacher-comment-box h2 {
          font-size: 26px;
          line-height: 38px;
          color: #24212e; }
        #academic-management .page-inner .page-main .desc-box .teacher-comment-box p {
          font-size: 17px;
          color: #504d58;
          margin: 25px 0 40px; }
        #academic-management .page-inner .page-main .desc-box .teacher-comment-box div {
          display: flex;
          justify-content: flex-end;
          width: 125px;
          margin-left: auto; }
        #academic-management .page-inner .page-main .desc-box .teacher-comment-box input {
          border: none;
          padding: 0; }
      #academic-management .page-inner .page-main .desc-box .badge-swipe-box {
        background: #ffffff;
        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
        border-radius: 20px;
        padding: 25px 30px; }
        #academic-management .page-inner .page-main .desc-box .badge-swipe-box .title-box {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 40px; }
          #academic-management .page-inner .page-main .desc-box .badge-swipe-box .title-box .title {
            display: flex;
            gap: 20px; }
            #academic-management .page-inner .page-main .desc-box .badge-swipe-box .title-box .title h2 {
              font-size: 26px;
              line-height: 38px;
              color: #24212e; }
            #academic-management .page-inner .page-main .desc-box .badge-swipe-box .title-box .title div {
              display: flex;
              align-items: center;
              position: relative;
              padding: 5px 18px;
              background: #ffaa04;
              border-radius: 5px; }
              #academic-management .page-inner .page-main .desc-box .badge-swipe-box .title-box .title div:after {
                content: '';
                width: 20px;
                height: 20px;
                position: absolute;
                top: 50%;
                left: -15px;
                transform: translateY(-50%) rotate(-90deg);
                background: #ffaa04;
                clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
              #academic-management .page-inner .page-main .desc-box .badge-swipe-box .title-box .title div span {
                color: #ffffff; }
                #academic-management .page-inner .page-main .desc-box .badge-swipe-box .title-box .title div span:first-of-type {
                  padding-right: 10px;
                  margin-right: 10px;
                  border-right: 2px solid #fff; }
          #academic-management .page-inner .page-main .desc-box .badge-swipe-box .title-box .current-badge {
            display: flex;
            align-items: center;
            gap: 40px; }
            #academic-management .page-inner .page-main .desc-box .badge-swipe-box .title-box .current-badge > div {
              display: flex;
              align-items: center; }
              #academic-management .page-inner .page-main .desc-box .badge-swipe-box .title-box .current-badge > div p {
                font-size: 20px;
                color: #24212e;
                margin-left: 10px; }
                #academic-management .page-inner .page-main .desc-box .badge-swipe-box .title-box .current-badge > div p em {
                  font-size: 22px;
                  color: #24212e;
                  margin-left: 6px; }

@media screen and (max-width: 1300px) {
  #academic-management .page-inner .page-main .desc-box .row {
    flex-direction: column; }
    #academic-management .page-inner .page-main .desc-box .row .st-info-box > div dl dt {
      padding-left: 0; }
    #academic-management .page-inner .page-main .desc-box .row .st-info-box > div dl dd {
      font-size: 16px; }
    #academic-management .page-inner .page-main .desc-box .row .btn-wrap {
      flex-direction: row; }
      #academic-management .page-inner .page-main .desc-box .row .btn-wrap button {
        flex: 1; } }

#academic-management-print .page-inner {
  padding: 50px 48px; }
  #academic-management-print .page-inner .page-title {
    display: flex;
    align-items: center;
    font-size: 36px;
    line-height: 52px;
    color: #24212e;
    margin-bottom: 50px; }
    #academic-management-print .page-inner .page-title img {
      margin-right: 10px; }
  #academic-management-print .page-inner .page-main {
    display: flex;
    align-items: flex-start;
    gap: 20px; }
    #academic-management-print .page-inner .page-main .desc-box {
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: 100%; }
      #academic-management-print .page-inner .page-main .desc-box .row {
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-end;
        width: 100%;
        gap: 20px; }
        #academic-management-print .page-inner .page-main .desc-box .row .st-info-box {
          width: 100%;
          flex: 1;
          padding: 25px 30px;
          background: #ffffff;
          box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
          border-radius: 20px; }
          #academic-management-print .page-inner .page-main .desc-box .row .st-info-box > div {
            display: flex; }
            #academic-management-print .page-inner .page-main .desc-box .row .st-info-box > div:first-of-type {
              border-bottom: 1px solid #d3d3d5;
              padding-bottom: 22px;
              margin-bottom: 24px; }
            #academic-management-print .page-inner .page-main .desc-box .row .st-info-box > div dl {
              display: flex;
              flex: 1; }
              #academic-management-print .page-inner .page-main .desc-box .row .st-info-box > div dl dt {
                width: 40%;
                padding-left: 10%;
                box-sizing: border-box;
                font-weight: 500;
                font-size: 16px;
                line-height: 23px;
                color: #504d58; }
              #academic-management-print .page-inner .page-main .desc-box .row .st-info-box > div dl dd {
                padding-left: 10%;
                box-sizing: border-box;
                font-size: 18px;
                line-height: 22px;
                color: #24212e; }
                #academic-management-print .page-inner .page-main .desc-box .row .st-info-box > div dl dd.b {
                  font-weight: 500;
                  font-size: 22px;
                  line-height: 32px;
                  color: #24212e; }
        #academic-management-print .page-inner .page-main .desc-box .row .btn-wrap {
          display: flex;
          flex-direction: column;
          gap: 14px; }
          #academic-management-print .page-inner .page-main .desc-box .row .btn-wrap button {
            width: 211px; }
      #academic-management-print .page-inner .page-main .desc-box .course-date {
        padding: 25px 30px;
        background: #ffffff;
        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
        border-radius: 20px; }
        #academic-management-print .page-inner .page-main .desc-box .course-date dl {
          display: flex;
          align-items: flex-start;
          gap: 5vw; }
          #academic-management-print .page-inner .page-main .desc-box .course-date dl:first-of-type {
            padding-bottom: 25px;
            border-bottom: 1px solid #d3d3d5;
            margin-bottom: 25px; }
          #academic-management-print .page-inner .page-main .desc-box .course-date dl dt {
            font-weight: bold;
            font-size: 26px;
            line-height: 48px;
            color: #24212e; }
          #academic-management-print .page-inner .page-main .desc-box .course-date dl dd {
            width: 80%;
            flex: 1; }
            #academic-management-print .page-inner .page-main .desc-box .course-date dl dd .swiper-box {
              width: 100%; }
              #academic-management-print .page-inner .page-main .desc-box .course-date dl dd .swiper-box .swiper-date-box {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                padding: 0; }
                #academic-management-print .page-inner .page-main .desc-box .course-date dl dd .swiper-box .swiper-date-box .date-btn {
                  max-width: 100px; }
            #academic-management-print .page-inner .page-main .desc-box .course-date dl dd .all-check {
              margin-top: 28px; }
      #academic-management-print .page-inner .page-main .desc-box .chart-box {
        background: #ffffff;
        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
        border-radius: 20px;
        padding: 32px 302px 60px; }
        #academic-management-print .page-inner .page-main .desc-box .chart-box h2 {
          font-size: 26px;
          line-height: 38px;
          color: #24212e; }
        #academic-management-print .page-inner .page-main .desc-box .chart-box .chart-swipe-box {
          display: flex;
          gap: 40px;
          position: relative;
          padding: 80px 0 55px;
          border-bottom: 1px solid #d3d3d5;
          margin-bottom: 40px; }
          #academic-management-print .page-inner .page-main .desc-box .chart-box .chart-swipe-box .navigation-arrows-box .arrow-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10; }
            #academic-management-print .page-inner .page-main .desc-box .chart-box .chart-swipe-box .navigation-arrows-box .arrow-btn img {
              width: 19.35px;
              height: 38.7px; }
            #academic-management-print .page-inner .page-main .desc-box .chart-box .chart-swipe-box .navigation-arrows-box .arrow-btn.prev {
              left: -40px; }
            #academic-management-print .page-inner .page-main .desc-box .chart-box .chart-swipe-box .navigation-arrows-box .arrow-btn.next {
              right: -40px; }
        #academic-management-print .page-inner .page-main .desc-box .chart-box .avg-swipe-box h2 {
          font-size: 26px;
          line-height: 38px;
          color: #24212e;
          margin-bottom: 25px; }
        #academic-management-print .page-inner .page-main .desc-box .chart-box .avg-swipe-box .swiper-date-box {
          padding: 0; }
          #academic-management-print .page-inner .page-main .desc-box .chart-box .avg-swipe-box .swiper-date-box .print {
            display: flex;
            flex-wrap: wrap;
            gap: 20px; }
      #academic-management-print .page-inner .page-main .desc-box .teacher-comment-box {
        background: #ffffff;
        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
        border-radius: 20px;
        padding: 25px 72px; }
        #academic-management-print .page-inner .page-main .desc-box .teacher-comment-box h2 {
          font-size: 26px;
          line-height: 38px;
          color: #24212e; }
        #academic-management-print .page-inner .page-main .desc-box .teacher-comment-box p {
          font-size: 17px;
          color: #504d58;
          margin: 25px 0 40px; }
        #academic-management-print .page-inner .page-main .desc-box .teacher-comment-box div {
          display: flex;
          justify-content: flex-end;
          width: 125px;
          margin-left: auto; }
      #academic-management-print .page-inner .page-main .desc-box .badge-swipe-box {
        background: #ffffff;
        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
        border-radius: 20px;
        padding: 25px 30px; }
        #academic-management-print .page-inner .page-main .desc-box .badge-swipe-box .title-box {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 40px; }
          #academic-management-print .page-inner .page-main .desc-box .badge-swipe-box .title-box .title {
            display: flex;
            gap: 20px; }
            #academic-management-print .page-inner .page-main .desc-box .badge-swipe-box .title-box .title h2 {
              font-size: 26px;
              line-height: 38px;
              color: #24212e; }
            #academic-management-print .page-inner .page-main .desc-box .badge-swipe-box .title-box .title div {
              display: flex;
              align-items: center;
              position: relative;
              padding: 5px 18px;
              background: #ffaa04;
              border-radius: 5px; }
              #academic-management-print .page-inner .page-main .desc-box .badge-swipe-box .title-box .title div:after {
                content: '';
                width: 20px;
                height: 20px;
                position: absolute;
                top: 50%;
                left: -15px;
                transform: translateY(-50%) rotate(-90deg);
                background: #ffaa04;
                clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
              #academic-management-print .page-inner .page-main .desc-box .badge-swipe-box .title-box .title div span {
                color: #ffffff; }
                #academic-management-print .page-inner .page-main .desc-box .badge-swipe-box .title-box .title div span:first-of-type {
                  padding-right: 10px;
                  margin-right: 10px;
                  border-right: 2px solid #fff; }
          #academic-management-print .page-inner .page-main .desc-box .badge-swipe-box .title-box .current-badge {
            display: flex;
            align-items: center;
            gap: 40px; }
            #academic-management-print .page-inner .page-main .desc-box .badge-swipe-box .title-box .current-badge > div {
              display: flex;
              align-items: center; }
              #academic-management-print .page-inner .page-main .desc-box .badge-swipe-box .title-box .current-badge > div p {
                font-size: 20px;
                color: #24212e;
                margin-left: 10px; }
                #academic-management-print .page-inner .page-main .desc-box .badge-swipe-box .title-box .current-badge > div p em {
                  font-size: 22px;
                  color: #24212e;
                  margin-left: 6px; }
        #academic-management-print .page-inner .page-main .desc-box .badge-swipe-box .swiper-date-box {
          padding: 0; }
          #academic-management-print .page-inner .page-main .desc-box .badge-swipe-box .swiper-date-box .print {
            display: flex;
            flex-wrap: wrap;
            gap: 20px; }
            #academic-management-print .page-inner .page-main .desc-box .badge-swipe-box .swiper-date-box .print .badge-form {
              min-width: 240px; }
              #academic-management-print .page-inner .page-main .desc-box .badge-swipe-box .swiper-date-box .print .badge-form > div {
                justify-content: center; }
                #academic-management-print .page-inner .page-main .desc-box .badge-swipe-box .swiper-date-box .print .badge-form > div img {
                  margin-right: 40px; }

#academic-management-print .course-txt {
  font-size: 24px;
  font-weight: 500;
  color: #504d58;
  line-height: 2; }

#academic-management-print.print2 {
  -webkit-print-color-adjust: exact; }
  #academic-management-print.print2.print2_mo .page-inner {
    min-width: 1200px; }
  #academic-management-print.print2.print2_mo + #footer {
    min-width: 1200px; }
  #academic-management-print.print2 .page-top {
    display: flex;
    justify-content: space-between; }
    #academic-management-print.print2 .page-top button {
      max-width: 211px;
      margin: unset; }
  #academic-management-print.print2 .page-inner .page-main .desc-box {
    gap: 0;
    border-radius: 20px;
    padding: 24px 20px 60px;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06); }
    #academic-management-print.print2 .page-inner .page-main .desc-box > div {
      border-radius: 0;
      box-shadow: none; }
      #academic-management-print.print2 .page-inner .page-main .desc-box > div:not(:last-of-type) {
        border-bottom: 1px solid #717171; }
    #academic-management-print.print2 .page-inner .page-main .desc-box .row .st-info-box {
      padding: 0;
      box-shadow: none; }
      #academic-management-print.print2 .page-inner .page-main .desc-box .row .st-info-box > div:first-of-type {
        margin-bottom: 0;
        border-bottom: 0; }
    #academic-management-print.print2 .page-inner .page-main .desc-box .course-date {
      padding: 25px 30px; }
    #academic-management-print.print2 .page-inner .page-main .desc-box .chart-box {
      padding: 60px 30px 0; }
      #academic-management-print.print2 .page-inner .page-main .desc-box .chart-box .chart-swipe-box {
        margin-bottom: 0;
        border-bottom: 60px; }
        #academic-management-print.print2 .page-inner .page-main .desc-box .chart-box .chart-swipe-box .chapter-list {
          justify-content: space-between; }
          #academic-management-print.print2 .page-inner .page-main .desc-box .chart-box .chart-swipe-box .chapter-list .right {
            flex: unset;
            width: 45%; }
            #academic-management-print.print2 .page-inner .page-main .desc-box .chart-box .chart-swipe-box .chapter-list .right .list-content > div button {
              display: none; }
        #academic-management-print.print2 .page-inner .page-main .desc-box .chart-box .chart-swipe-box .no-data {
          width: 100%; }
    #academic-management-print.print2 .page-inner .page-main .desc-box .avg-swipe-box {
      width: calc(100% + 60px);
      margin-left: -30px;
      padding: 60px 30px;
      border-top: 1px solid #717171; }
    #academic-management-print.print2 .page-inner .page-main .desc-box .teacher-comment-box {
      padding: 60px 30px; }
      #academic-management-print.print2 .page-inner .page-main .desc-box .teacher-comment-box p {
        margin: 30px 0 0; }
    #academic-management-print.print2 .page-inner .page-main .desc-box .badge-swipe-box {
      padding: 60px 30px 0; }
      #academic-management-print.print2 .page-inner .page-main .desc-box .badge-swipe-box .swiper-date-box .print {
        padding: 0 4.5%; }

@media screen and (max-width: 1580px) {
  #academic-management-print .page-inner .page-main .desc-box .row .st-info-box > div dl {
    flex-direction: column; }
    #academic-management-print .page-inner .page-main .desc-box .row .st-info-box > div dl dt {
      width: 100%; } }

@media screen and (max-width: 1300px) {
  #academic-management .page-inner .page-main .desc-box .row {
    flex-direction: column; }
    #academic-management .page-inner .page-main .desc-box .row .st-info-box > div dl dt {
      padding-left: 0; }
    #academic-management .page-inner .page-main .desc-box .row .btn-wrap {
      flex-direction: row; }
      #academic-management .page-inner .page-main .desc-box .row .btn-wrap button {
        flex: 1; } }

@media print {
  #academic-management-print .page-inner .page-main .desc-box .row .st-info-box > div dl {
    display: block;
    flex-direction: unset; }
  #academic-management-print .page-inner .page-main .desc-box .row .st-info-box > div dl dt {
    white-space: nowrap; }
  #academic-management-print.print2 .print_hidden {
    display: none; } }

#academic-management-link .page-inner {
  padding: 50px 48px; }
  #academic-management-link .page-inner .page-title {
    display: flex;
    align-items: center;
    font-size: 36px;
    line-height: 52px;
    color: #24212e;
    margin-bottom: 0px; }
    #academic-management-link .page-inner .page-title img {
      margin-right: 10px; }
  #academic-management-link .page-inner .page-main {
    display: flex;
    align-items: flex-start;
    gap: 20px; }
    #academic-management-link .page-inner .page-main .desc-box {
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: 100%; }
      #academic-management-link .page-inner .page-main .desc-box .row {
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-end;
        width: 100%;
        gap: 20px; }
        #academic-management-link .page-inner .page-main .desc-box .row .st-info-box {
          width: 100%;
          flex: 1;
          padding: 25px 30px;
          background: #ffffff;
          box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
          border-radius: 20px; }
          #academic-management-link .page-inner .page-main .desc-box .row .st-info-box > div {
            display: flex; }
            #academic-management-link .page-inner .page-main .desc-box .row .st-info-box > div:first-of-type {
              border-bottom: 1px solid #d3d3d5;
              padding-bottom: 22px;
              margin-bottom: 24px; }
            #academic-management-link .page-inner .page-main .desc-box .row .st-info-box > div dl {
              display: flex;
              flex: 1; }
              #academic-management-link .page-inner .page-main .desc-box .row .st-info-box > div dl dt {
                width: 40%;
                padding-left: 10%;
                box-sizing: border-box;
                font-weight: 500;
                font-size: 16px;
                line-height: 23px;
                color: #504d58; }
              #academic-management-link .page-inner .page-main .desc-box .row .st-info-box > div dl dd {
                padding-left: 10%;
                box-sizing: border-box;
                font-size: 18px;
                line-height: 22px;
                color: #24212e; }
                #academic-management-link .page-inner .page-main .desc-box .row .st-info-box > div dl dd.b {
                  font-weight: 500;
                  font-size: 22px;
                  line-height: 32px;
                  color: #24212e; }
        #academic-management-link .page-inner .page-main .desc-box .row .btn-wrap {
          display: flex;
          flex-direction: column;
          gap: 14px; }
          #academic-management-link .page-inner .page-main .desc-box .row .btn-wrap button {
            width: 211px; }
      #academic-management-link .page-inner .page-main .desc-box .course-date {
        padding: 25px 30px;
        background: #ffffff;
        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
        border-radius: 20px; }
        #academic-management-link .page-inner .page-main .desc-box .course-date dl {
          display: flex;
          align-items: flex-start;
          gap: 5vw; }
          #academic-management-link .page-inner .page-main .desc-box .course-date dl:first-of-type {
            padding-bottom: 25px;
            border-bottom: 1px solid #d3d3d5;
            margin-bottom: 25px; }
          #academic-management-link .page-inner .page-main .desc-box .course-date dl dt {
            font-weight: bold;
            font-size: 26px;
            line-height: 48px;
            color: #24212e; }
          #academic-management-link .page-inner .page-main .desc-box .course-date dl dd {
            width: 80%;
            flex: 1; }
            #academic-management-link .page-inner .page-main .desc-box .course-date dl dd .swiper-box {
              width: 100%; }
              #academic-management-link .page-inner .page-main .desc-box .course-date dl dd .swiper-box .swiper-date-box {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                padding: 0; }
                #academic-management-link .page-inner .page-main .desc-box .course-date dl dd .swiper-box .swiper-date-box .date-btn {
                  max-width: 100px; }
            #academic-management-link .page-inner .page-main .desc-box .course-date dl dd .all-check {
              margin-top: 28px; }
        #academic-management-link .page-inner .page-main .desc-box .course-date .course-txt {
          font-size: 24px;
          font-weight: 500;
          color: #504d58;
          line-height: 2; }
      #academic-management-link .page-inner .page-main .desc-box .chart-box {
        background: #ffffff;
        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
        border-radius: 20px;
        padding: 32px 30px 60px; }
        #academic-management-link .page-inner .page-main .desc-box .chart-box h2 {
          font-size: 26px;
          line-height: 38px;
          color: #24212e; }
        #academic-management-link .page-inner .page-main .desc-box .chart-box .chart-swipe-box {
          position: relative;
          padding: 80px 0 55px;
          margin: 0 40px;
          border-bottom: 1px solid #d3d3d5;
          margin-bottom: 40px; }
          #academic-management-link .page-inner .page-main .desc-box .chart-box .chart-swipe-box .navigation-arrows-box .arrow-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10; }
            #academic-management-link .page-inner .page-main .desc-box .chart-box .chart-swipe-box .navigation-arrows-box .arrow-btn img {
              width: 19.35px;
              height: 38.7px; }
            #academic-management-link .page-inner .page-main .desc-box .chart-box .chart-swipe-box .navigation-arrows-box .arrow-btn.prev {
              left: -40px; }
            #academic-management-link .page-inner .page-main .desc-box .chart-box .chart-swipe-box .navigation-arrows-box .arrow-btn.next {
              right: -40px; }
        #academic-management-link .page-inner .page-main .desc-box .chart-box .avg-swipe-box h2 {
          font-size: 26px;
          line-height: 38px;
          color: #24212e;
          margin-bottom: 25px; }
      #academic-management-link .page-inner .page-main .desc-box .teacher-comment-box {
        background: #ffffff;
        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
        border-radius: 20px;
        padding: 25px 30px; }
        #academic-management-link .page-inner .page-main .desc-box .teacher-comment-box h2 {
          font-size: 26px;
          line-height: 38px;
          color: #24212e; }
        #academic-management-link .page-inner .page-main .desc-box .teacher-comment-box p {
          font-size: 17px;
          color: #504d58;
          margin: 25px 0 40px; }
        #academic-management-link .page-inner .page-main .desc-box .teacher-comment-box div {
          display: flex;
          justify-content: flex-end;
          width: 125px;
          margin-left: auto; }
      #academic-management-link .page-inner .page-main .desc-box .badge-swipe-box {
        background: #ffffff;
        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
        border-radius: 20px;
        padding: 25px 30px; }
        #academic-management-link .page-inner .page-main .desc-box .badge-swipe-box .title-box {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 40px; }
          #academic-management-link .page-inner .page-main .desc-box .badge-swipe-box .title-box .title {
            display: flex;
            gap: 20px; }
            #academic-management-link .page-inner .page-main .desc-box .badge-swipe-box .title-box .title h2 {
              font-size: 26px;
              line-height: 38px;
              color: #24212e; }
            #academic-management-link .page-inner .page-main .desc-box .badge-swipe-box .title-box .title div {
              display: flex;
              align-items: center;
              position: relative;
              padding: 5px 18px;
              background: #ffaa04;
              border-radius: 5px; }
              #academic-management-link .page-inner .page-main .desc-box .badge-swipe-box .title-box .title div:after {
                content: '';
                width: 20px;
                height: 20px;
                position: absolute;
                top: 50%;
                left: -15px;
                transform: translateY(-50%) rotate(-90deg);
                background: #ffaa04;
                clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
              #academic-management-link .page-inner .page-main .desc-box .badge-swipe-box .title-box .title div span {
                color: #ffffff; }
                #academic-management-link .page-inner .page-main .desc-box .badge-swipe-box .title-box .title div span:first-of-type {
                  padding-right: 10px;
                  margin-right: 10px;
                  border-right: 2px solid #fff; }
          #academic-management-link .page-inner .page-main .desc-box .badge-swipe-box .title-box .current-badge {
            display: flex;
            align-items: center;
            gap: 40px; }
            #academic-management-link .page-inner .page-main .desc-box .badge-swipe-box .title-box .current-badge > div {
              display: flex;
              align-items: center; }
              #academic-management-link .page-inner .page-main .desc-box .badge-swipe-box .title-box .current-badge > div p {
                font-size: 20px;
                color: #24212e;
                margin-left: 10px; }
                #academic-management-link .page-inner .page-main .desc-box .badge-swipe-box .title-box .current-badge > div p em {
                  font-size: 22px;
                  color: #24212e;
                  margin-left: 6px; }
        #academic-management-link .page-inner .page-main .desc-box .badge-swipe-box .badge-wrapper {
          display: flex;
          flex-wrap: wrap;
          gap: 23px; }
          #academic-management-link .page-inner .page-main .desc-box .badge-swipe-box .badge-wrapper .badge-form {
            max-width: 243px; }

@media screen and (max-width: 1580px) {
  #academic-management-link .page-inner .page-main .desc-box .row .st-info-box > div dl {
    flex-direction: column; }
    #academic-management-link .page-inner .page-main .desc-box .row .st-info-box > div dl dt {
      width: 100%; } }

@media screen and (max-width: 1400px) {
  #academic-management .page-inner .page-main .desc-box .badge-swipe-box {
    padding: 25px 30px; } }

@media screen and (max-width: 1300px) {
  #academic-management .page-inner .page-main .desc-box .badge-swipe-box .title-box .title {
    flex-direction: column;
    gap: 5px; }
  #academic-management .page-inner .page-main .desc-box .row {
    flex-direction: column; }
    #academic-management .page-inner .page-main .desc-box .row .st-info-box > div dl dt {
      padding-left: 0; }
    #academic-management .page-inner .page-main .desc-box .row .btn-wrap {
      flex-direction: row; }
      #academic-management .page-inner .page-main .desc-box .row .btn-wrap button {
        flex: 1; } }

@media screen and (max-width: 1200px) {
  #academic-management .page-inner .page-main .desc-box .badge-swipe-box .title-box .current-badge {
    flex-direction: column;
    gap: 10px; } }

#academic-management-link2 .page-inner {
  padding: 50px 48px; }
  #academic-management-link2 .page-inner .page-title {
    display: flex;
    align-items: center;
    font-size: 36px;
    line-height: 52px;
    color: #24212e;
    margin-bottom: 50px; }
    #academic-management-link2 .page-inner .page-title img {
      margin-right: 10px; }
  #academic-management-link2 .page-inner .page-main {
    display: flex;
    align-items: flex-start;
    gap: 20px; }
    #academic-management-link2 .page-inner .page-main .desc-box {
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: 100%; }
      #academic-management-link2 .page-inner .page-main .desc-box .row {
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-end;
        width: 100%;
        gap: 20px; }
        #academic-management-link2 .page-inner .page-main .desc-box .row .st-info-box {
          width: 100%;
          flex: 1;
          padding: 25px 30px;
          background: #ffffff;
          box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
          border-radius: 20px; }
          #academic-management-link2 .page-inner .page-main .desc-box .row .st-info-box > div {
            display: flex; }
            #academic-management-link2 .page-inner .page-main .desc-box .row .st-info-box > div:first-of-type {
              border-bottom: 1px solid #d3d3d5;
              padding-bottom: 22px;
              margin-bottom: 24px; }
            #academic-management-link2 .page-inner .page-main .desc-box .row .st-info-box > div dl {
              display: flex;
              flex: 1; }
              #academic-management-link2 .page-inner .page-main .desc-box .row .st-info-box > div dl dt {
                width: 40%;
                padding-left: 10%;
                box-sizing: border-box;
                font-weight: 500;
                font-size: 16px;
                line-height: 23px;
                color: #504d58; }
              #academic-management-link2 .page-inner .page-main .desc-box .row .st-info-box > div dl dd {
                padding-left: 10%;
                box-sizing: border-box;
                font-size: 18px;
                line-height: 22px;
                color: #24212e; }
                #academic-management-link2 .page-inner .page-main .desc-box .row .st-info-box > div dl dd.b {
                  font-weight: 500;
                  font-size: 22px;
                  line-height: 32px;
                  color: #24212e; }
        #academic-management-link2 .page-inner .page-main .desc-box .row .btn-wrap {
          display: flex;
          flex-direction: column;
          gap: 14px; }
          #academic-management-link2 .page-inner .page-main .desc-box .row .btn-wrap button {
            width: 211px; }
      #academic-management-link2 .page-inner .page-main .desc-box .course-date {
        padding: 25px 30px;
        background: #ffffff;
        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
        border-radius: 20px; }
        #academic-management-link2 .page-inner .page-main .desc-box .course-date dl {
          display: flex;
          align-items: flex-start;
          gap: 5vw; }
          #academic-management-link2 .page-inner .page-main .desc-box .course-date dl:first-of-type {
            padding-bottom: 25px;
            border-bottom: 1px solid #d3d3d5;
            margin-bottom: 25px; }
          #academic-management-link2 .page-inner .page-main .desc-box .course-date dl dt {
            font-weight: bold;
            font-size: 26px;
            line-height: 48px;
            color: #24212e; }
          #academic-management-link2 .page-inner .page-main .desc-box .course-date dl dd {
            width: 80%;
            flex: 1; }
            #academic-management-link2 .page-inner .page-main .desc-box .course-date dl dd .swiper-box {
              width: 100%; }
              #academic-management-link2 .page-inner .page-main .desc-box .course-date dl dd .swiper-box .swiper-date-box {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                padding: 0; }
                #academic-management-link2 .page-inner .page-main .desc-box .course-date dl dd .swiper-box .swiper-date-box .date-btn {
                  max-width: 100px; }
            #academic-management-link2 .page-inner .page-main .desc-box .course-date dl dd .all-check {
              margin-top: 28px; }
      #academic-management-link2 .page-inner .page-main .desc-box .chart-box {
        background: #ffffff;
        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
        border-radius: 20px;
        padding: 32px 30px 60px; }
        #academic-management-link2 .page-inner .page-main .desc-box .chart-box h2 {
          font-size: 26px;
          line-height: 38px;
          color: #24212e; }
        #academic-management-link2 .page-inner .page-main .desc-box .chart-box .chart-swipe-box {
          display: flex;
          gap: 40px;
          position: relative;
          padding: 80px 0 55px;
          margin: 0 40px;
          border-bottom: 1px solid #d3d3d5;
          margin-bottom: 40px; }
          #academic-management-link2 .page-inner .page-main .desc-box .chart-box .chart-swipe-box .navigation-arrows-box .arrow-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10; }
            #academic-management-link2 .page-inner .page-main .desc-box .chart-box .chart-swipe-box .navigation-arrows-box .arrow-btn img {
              width: 19.35px;
              height: 38.7px; }
            #academic-management-link2 .page-inner .page-main .desc-box .chart-box .chart-swipe-box .navigation-arrows-box .arrow-btn.prev {
              left: -40px; }
            #academic-management-link2 .page-inner .page-main .desc-box .chart-box .chart-swipe-box .navigation-arrows-box .arrow-btn.next {
              right: -40px; }
        #academic-management-link2 .page-inner .page-main .desc-box .chart-box .avg-swipe-box h2 {
          font-size: 26px;
          line-height: 38px;
          color: #24212e;
          margin-bottom: 25px; }
        #academic-management-link2 .page-inner .page-main .desc-box .chart-box .avg-swipe-box .swiper-date-box {
          padding: 0; }
          #academic-management-link2 .page-inner .page-main .desc-box .chart-box .avg-swipe-box .swiper-date-box .print {
            display: flex;
            flex-wrap: wrap;
            gap: 20px; }
      #academic-management-link2 .page-inner .page-main .desc-box .teacher-comment-box {
        background: #ffffff;
        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
        border-radius: 20px;
        padding: 25px 30px; }
        #academic-management-link2 .page-inner .page-main .desc-box .teacher-comment-box h2 {
          font-size: 26px;
          line-height: 38px;
          color: #24212e; }
        #academic-management-link2 .page-inner .page-main .desc-box .teacher-comment-box p {
          font-size: 17px;
          color: #504d58;
          margin: 25px 0 40px; }
        #academic-management-link2 .page-inner .page-main .desc-box .teacher-comment-box div {
          display: flex;
          justify-content: flex-end;
          width: 125px;
          margin-left: auto; }
      #academic-management-link2 .page-inner .page-main .desc-box .badge-swipe-box {
        background: #ffffff;
        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
        border-radius: 20px;
        padding: 25px 30px; }
        #academic-management-link2 .page-inner .page-main .desc-box .badge-swipe-box .title-box {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 40px; }
          #academic-management-link2 .page-inner .page-main .desc-box .badge-swipe-box .title-box .title {
            display: flex;
            gap: 20px; }
            #academic-management-link2 .page-inner .page-main .desc-box .badge-swipe-box .title-box .title h2 {
              font-size: 26px;
              line-height: 38px;
              color: #24212e; }
            #academic-management-link2 .page-inner .page-main .desc-box .badge-swipe-box .title-box .title div {
              display: flex;
              align-items: center;
              position: relative;
              padding: 5px 18px;
              background: #ffaa04;
              border-radius: 5px; }
              #academic-management-link2 .page-inner .page-main .desc-box .badge-swipe-box .title-box .title div:after {
                content: '';
                width: 20px;
                height: 20px;
                position: absolute;
                top: 50%;
                left: -15px;
                transform: translateY(-50%) rotate(-90deg);
                background: #ffaa04;
                clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
              #academic-management-link2 .page-inner .page-main .desc-box .badge-swipe-box .title-box .title div span {
                color: #ffffff; }
                #academic-management-link2 .page-inner .page-main .desc-box .badge-swipe-box .title-box .title div span:first-of-type {
                  padding-right: 10px;
                  margin-right: 10px;
                  border-right: 2px solid #fff; }
          #academic-management-link2 .page-inner .page-main .desc-box .badge-swipe-box .title-box .current-badge {
            display: flex;
            align-items: center;
            gap: 40px; }
            #academic-management-link2 .page-inner .page-main .desc-box .badge-swipe-box .title-box .current-badge > div {
              display: flex;
              align-items: center; }
              #academic-management-link2 .page-inner .page-main .desc-box .badge-swipe-box .title-box .current-badge > div p {
                font-size: 20px;
                color: #24212e;
                margin-left: 10px; }
                #academic-management-link2 .page-inner .page-main .desc-box .badge-swipe-box .title-box .current-badge > div p em {
                  font-size: 22px;
                  color: #24212e;
                  margin-left: 6px; }
        #academic-management-link2 .page-inner .page-main .desc-box .badge-swipe-box .swiper-date-box {
          padding: 0; }
          #academic-management-link2 .page-inner .page-main .desc-box .badge-swipe-box .swiper-date-box .print {
            display: flex;
            flex-wrap: wrap;
            gap: 20px; }
            #academic-management-link2 .page-inner .page-main .desc-box .badge-swipe-box .swiper-date-box .print .badge-form {
              min-width: 240px; }
              #academic-management-link2 .page-inner .page-main .desc-box .badge-swipe-box .swiper-date-box .print .badge-form > div {
                justify-content: center; }
                #academic-management-link2 .page-inner .page-main .desc-box .badge-swipe-box .swiper-date-box .print .badge-form > div img {
                  margin-right: 40px; }

#academic-management-link2 .course-txt {
  font-size: 24px;
  font-weight: 500;
  color: #504d58;
  line-height: 2; }

#academic-management-link2.link2 .page-top {
  display: flex;
  justify-content: space-between; }
  #academic-management-link2.link2 .page-top button {
    max-width: 211px;
    margin: unset; }

#academic-management-link2.link2 .page-inner .page-main .desc-box {
  gap: 0;
  border-radius: 20px;
  padding: 24px 20px 60px;
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06); }
  #academic-management-link2.link2 .page-inner .page-main .desc-box > div {
    border-radius: 0;
    box-shadow: none; }
    #academic-management-link2.link2 .page-inner .page-main .desc-box > div:not(:last-of-type) {
      border-bottom: 1px solid #717171; }
  #academic-management-link2.link2 .page-inner .page-main .desc-box .row .st-info-box {
    padding: 0;
    box-shadow: none; }
    #academic-management-link2.link2 .page-inner .page-main .desc-box .row .st-info-box > div:first-of-type {
      margin-bottom: 0;
      border-bottom: 0; }
  #academic-management-link2.link2 .page-inner .page-main .desc-box .course-date {
    padding: 25px 30px; }
  #academic-management-link2.link2 .page-inner .page-main .desc-box .chart-box {
    padding: 60px 30px 0; }
    #academic-management-link2.link2 .page-inner .page-main .desc-box .chart-box .chart-swipe-box {
      margin-bottom: 0;
      border-bottom: 60px; }
      #academic-management-link2.link2 .page-inner .page-main .desc-box .chart-box .chart-swipe-box .chapter-list {
        justify-content: space-between; }
        #academic-management-link2.link2 .page-inner .page-main .desc-box .chart-box .chart-swipe-box .chapter-list .right {
          flex: unset;
          width: 45%; }
          #academic-management-link2.link2 .page-inner .page-main .desc-box .chart-box .chart-swipe-box .chapter-list .right .list-content > div button {
            display: none; }
  #academic-management-link2.link2 .page-inner .page-main .desc-box .avg-swipe-box {
    width: calc(100% + 60px);
    margin-left: -30px;
    padding: 60px 30px;
    border-top: 1px solid #717171; }
  #academic-management-link2.link2 .page-inner .page-main .desc-box .teacher-comment-box {
    padding: 60px 30px; }
    #academic-management-link2.link2 .page-inner .page-main .desc-box .teacher-comment-box p {
      margin: 30px 0 0; }
  #academic-management-link2.link2 .page-inner .page-main .desc-box .badge-swipe-box {
    padding: 60px 30px 0; }
    #academic-management-link2.link2 .page-inner .page-main .desc-box .badge-swipe-box .swiper-date-box .print {
      padding: 0 4.5%; }

@media screen and (max-width: 1580px) {
  #academic-management-link2 .page-inner .page-main .desc-box .row .st-info-box > div dl {
    flex-direction: column; }
    #academic-management-link2 .page-inner .page-main .desc-box .row .st-info-box > div dl dt {
      width: 100%; } }

@media screen and (max-width: 1300px) {
  #academic-management .page-inner .page-main .desc-box .row {
    flex-direction: column; }
    #academic-management .page-inner .page-main .desc-box .row .st-info-box > div dl dt {
      padding-left: 0; }
    #academic-management .page-inner .page-main .desc-box .row .btn-wrap {
      flex-direction: row; }
      #academic-management .page-inner .page-main .desc-box .row .btn-wrap button {
        flex: 1; } }

#premium-create {
  margin-top: 123px; }
  #premium-create.change .page-title {
    margin-bottom: 80px; }
  #premium-create .page-inner {
    padding: 80px 0; }
  #premium-create .page-title {
    font-size: 35px;
    font-weight: 700;
    color: #24212e;
    text-align: center;
    margin-bottom: 40px; }
  #premium-create .page-width {
    width: 100%;
    max-width: 1210px;
    margin: 0 auto; }
    #premium-create .page-width.cont-gap {
      display: flex;
      flex-direction: column;
      gap: 80px; }
  #premium-create .cont-title {
    font-size: 26px;
    font-weight: 700;
    color: #24212e;
    padding-bottom: 15px;
    border-bottom: 2px solid #09b9c6; }
    #premium-create .cont-title .text_new_add {
      margin-left: 10px; }
  #premium-create .cont-form li {
    display: flex;
    align-items: center;
    padding: 30px 0; }
    #premium-create .cont-form li:not(:first-of-type) {
      border-top: 1px solid #d3d3d5; }
  #premium-create .cont-form h2 {
    font-size: 18px;
    font-weight: 500;
    color: #504d58;
    width: 155px;
    padding-right: 10px; }
    #premium-create .cont-form h2.mb30 {
      margin-bottom: 30px; }
  #premium-create .myranking {
    background-color: #fbfcff;
    margin: 80px 0; }
    #premium-create .myranking .subscribe_wrap {
      padding: 170px 0 85px;
      border-bottom: 0;
      gap: 180px;
      position: relative; }
      #premium-create .myranking .subscribe_wrap::after {
        content: '';
        display: block;
        width: 1px;
        height: 657px;
        background-color: #e9e9ea;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%); }
      #premium-create .myranking .subscribe_wrap > div {
        position: relative; }
        #premium-create .myranking .subscribe_wrap > div h2 {
          margin: 34px 0 5px;
          font-size: 16px;
          font-weight: 500;
          color: #504d58; }
        #premium-create .myranking .subscribe_wrap > div h3 {
          font-size: 13px;
          font-weight: 400;
          color: #504d58;
          background: transparent; }
        #premium-create .myranking .subscribe_wrap > div::after {
          display: block;
          font-size: 26px;
          font-weight: 700;
          color: #09b9c6;
          position: absolute;
          left: 50%;
          top: -85px;
          transform: translateX(-50%);
          width: 100%;
          text-align: center; }
        #premium-create .myranking .subscribe_wrap > div.free_item::after {
          content: '현재 등급'; }
        #premium-create .myranking .subscribe_wrap > div.premium_item {
          border: 3px solid #09b9c6; }
          #premium-create .myranking .subscribe_wrap > div.premium_item::after {
            content: '변경 가능한  등급'; }
  #premium-create .choose_fee .price_wrap {
    padding: 0;
    margin-top: 18px; }
    #premium-create .choose_fee .price_wrap div:nth-of-type(1) {
      margin-bottom: 0; }
  #premium-create .choose_fee .cont-form li {
    justify-content: space-between; }
    #premium-create .choose_fee .cont-form li.txt_change {
      font-size: 16px;
      font-weight: 500;
      color: #504d58;
      padding-bottom: 0; }
      #premium-create .choose_fee .cont-form li.txt_change + li {
        border-top: 0; }
    #premium-create .choose_fee .cont-form li.refund {
      justify-content: flex-start;
      border-bottom: 1px solid #d3d3d5;
      margin-bottom: 48px; }
      #premium-create .choose_fee .cont-form li.refund p {
        font-weight: 500;
        font-family: 'Inter', 'Noto Sans KR'; }
        #premium-create .choose_fee .cont-form li.refund p:nth-of-type(1) {
          width: 25%;
          font-size: 18px;
          color: #504d58; }
        #premium-create .choose_fee .cont-form li.refund p:nth-of-type(2) {
          font-size: 24px; }
    #premium-create .choose_fee .cont-form li > div {
      display: flex;
      align-items: center; }
    #premium-create .choose_fee .cont-form li .input-component-box {
      width: 287px; }
    #premium-create .choose_fee .cont-form li .select {
      width: 441px; }
  #premium-create .payinfo .auto_card > div {
    width: 100%;
    max-width: 595px; }
    #premium-create .payinfo .auto_card > div .txt_cf {
      display: inline-block;
      font-size: 12px;
      font-weight: 500;
      color: #a7a6ab;
      margin-top: 15px; }
    #premium-create .payinfo .auto_card > div.ver2, #premium-create .payinfo .auto_card > div.ver3 {
      position: relative; }
      #premium-create .payinfo .auto_card > div.ver2 .btn-add-card, #premium-create .payinfo .auto_card > div.ver3 .btn-add-card {
        padding: 15px 14px;
        border: 1px solid #504d58;
        border-radius: 8px;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.45;
        color: #504d58;
        display: flex;
        align-content: center;
        position: absolute;
        right: -20px;
        top: 50%;
        transform: translate(100%, -50%); }
        #premium-create .payinfo .auto_card > div.ver2 .btn-add-card img, #premium-create .payinfo .auto_card > div.ver3 .btn-add-card img {
          margin-right: 3px; }
    #premium-create .payinfo .auto_card > div.ver3 .select {
      width: 100%; }
  #premium-create .payinfo .fee > div {
    display: flex;
    align-items: center; }
  #premium-create .payinfo .fee p {
    font-family: 'Inter', 'Noto Sans KR';
    font-size: 14px;
    color: #7c7a82; }
    #premium-create .payinfo .fee p:nth-of-type(1) {
      font-size: 24px;
      font-weight: 600;
      color: #24212e;
      margin-right: 10px; }
    #premium-create .payinfo .fee p:nth-of-type(2) {
      font-weight: 700;
      margin-right: 5px; }
    #premium-create .payinfo .fee p:nth-of-type(3) {
      font-weight: 400; }
  #premium-create .payinfo .mycoupon {
    flex-wrap: wrap; }
    #premium-create .payinfo .mycoupon > div {
      width: calc(100% - 155px);
      display: flex;
      align-items: center; }
    #premium-create .payinfo .mycoupon .select {
      width: 100%;
      max-width: 595px; }
    #premium-create .payinfo .mycoupon .tooltip_area {
      margin-left: 20px;
      font-size: 12px;
      font-weight: 500;
      color: #7c7a82;
      cursor: pointer;
      position: relative; }
      #premium-create .payinfo .mycoupon .tooltip_area img {
        margin-right: 5px; }
      #premium-create .payinfo .mycoupon .tooltip_area:hover .tooltip_box {
        display: block; }
    #premium-create .payinfo .mycoupon .tooltip_box {
      display: none;
      min-width: 509px;
      padding: 50px 45px;
      background-color: #fff;
      border: 1px solid #e9e9ea;
      box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
      border-radius: 10px;
      position: absolute;
      left: -90px;
      top: 55px; }
      #premium-create .payinfo .mycoupon .tooltip_box::before {
        content: '';
        display: block;
        width: 30px;
        height: 30px;
        background-color: #fff;
        position: absolute;
        top: -5px;
        left: 70px;
        transform: rotate(45deg) translateY(-50%);
        border-top: 1px solid #e9e9ea;
        border-left: 1px solid #e9e9ea; }
      #premium-create .payinfo .mycoupon .tooltip_box h1 {
        font-size: 26px;
        font-weight: 700;
        color: #24212e;
        padding-bottom: 20px;
        border-bottom: 1px solid #d3d3d5;
        margin-bottom: 30px; }
      #premium-create .payinfo .mycoupon .tooltip_box ul {
        padding-left: 20px; }
        #premium-create .payinfo .mycoupon .tooltip_box ul li {
          font-size: 14px;
          font-weight: 400;
          color: #000;
          line-height: 1.7;
          padding: 0;
          border: 0;
          display: list-item;
          list-style-type: disc;
          list-style-position: inside;
          text-indent: -20px; }
  #premium-create .payinfo .fee_double p {
    font-size: 24px;
    font-weight: 600;
    color: #504d58; }
    #premium-create .payinfo .fee_double p:first-of-type {
      width: 25%; }
  #premium-create .manage_member .member_wrap {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid #d3d3d5; }
    #premium-create .manage_member .member_wrap > div {
      flex: 1; }
    #premium-create .manage_member .member_wrap .sum {
      display: flex;
      align-items: center;
      padding: 30px 0 20px; }
      #premium-create .manage_member .member_wrap .sum p:nth-of-type(1) {
        font-size: 18px;
        font-weight: 500;
        color: #504d58;
        width: 109px; }
      #premium-create .manage_member .member_wrap .sum p:nth-of-type(2) {
        font-size: 20px;
        font-weight: 400;
        color: #24212e; }
        #premium-create .manage_member .member_wrap .sum p:nth-of-type(2) span {
          display: inline-block;
          transform: translateY(-2px);
          font-size: 26px;
          font-weight: 700;
          color: inherit;
          vertical-align: text-top; }
    #premium-create .manage_member .member_wrap table thead tr {
      border-top: 1px solid #d3d3d5;
      border-bottom: 1px solid #d3d3d5; }
      #premium-create .manage_member .member_wrap table thead tr th {
        padding: 15px 0;
        font-size: 15px;
        color: #a7a6ab;
        text-align: center; }
        #premium-create .manage_member .member_wrap table thead tr th:nth-of-type(2) {
          text-align: left; }
    #premium-create .manage_member .member_wrap table tbody tr {
      border-bottom: 1px solid #e9e9ea; }
      #premium-create .manage_member .member_wrap table tbody tr td {
        padding: 27px 0;
        font-size: 18px;
        font-weight: 500;
        color: #24212e;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden; }
        #premium-create .manage_member .member_wrap table tbody tr td img {
          margin-right: 10px;
          width: 44px;
          height: 44px;
          border-radius: 50%;
          object-fit: cover; }
        #premium-create .manage_member .member_wrap table tbody tr td:nth-of-type(2) {
          text-align: left; }
        #premium-create .manage_member .member_wrap table tbody tr td:nth-of-type(3) {
          font-weight: 400; }
      #premium-create .manage_member .member_wrap table tbody tr:last-of-type {
        border-bottom: 2px solid #d3d3d5; }
    #premium-create .manage_member .member_wrap table input[type='checkbox'] + label {
      justify-content: center; }
    #premium-create .manage_member .member_wrap .pagination-component {
      margin: 20px 0 30px; }
  #premium-create .manage_member .collect_member {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 27px; }
    #premium-create .manage_member .collect_member p {
      font-size: 18px;
      font-weight: 500;
      color: #504d58; }
    #premium-create .manage_member .collect_member ul {
      display: flex;
      gap: 27px; }
      #premium-create .manage_member .collect_member ul li {
        font-size: 24px;
        font-weight: 600;
        font-family: 'Inter', 'Noto Sans KR';
        color: #24212e;
        position: relative; }
        #premium-create .manage_member .collect_member ul li:nth-of-type(1) {
          color: #ff5050; }
        #premium-create .manage_member .collect_member ul li:not(:last-of-type)::after {
          content: '';
          display: inline-block;
          width: 3px;
          height: 20px;
          background-color: #7c7a82;
          position: absolute;
          right: -12px;
          top: 50%;
          transform: translate(50%, -50%); }
    #premium-create .manage_member .collect_member button {
      width: 211px;
      padding: 18px;
      border: 1px solid #ff5050;
      border-radius: 15px;
      box-shadow: 0px 3px 3px rgba(118, 129, 229, 0.3);
      font-size: 20px;
      font-weight: 700;
      color: #ff5050;
      text-align: center; }
      #premium-create .manage_member .collect_member button img {
        margin-left: 10px; }
  #premium-create article .article_title {
    font-size: 26px;
    font-family: 'Noto Sans KR';
    font-weight: 700;
    color: #24212e;
    padding-bottom: 15px;
    border-bottom: 2px solid #09b9c6; }
  #premium-create article .article_contents .contents_item {
    padding: 30px 0; }
    #premium-create article .article_contents .contents_item:not(:last-of-type) {
      border-bottom: 1px solid #d3d3d5; }
    #premium-create article .article_contents .contents_item .dl_twin {
      display: flex;
      flex-wrap: wrap; }
      #premium-create article .article_contents .contents_item .dl_twin > dl {
        flex: 1; }
        #premium-create article .article_contents .contents_item .dl_twin > dl:not(:last-of-type) {
          margin-bottom: 0; }
    #premium-create article .article_contents .contents_item dl {
      display: flex; }
      #premium-create article .article_contents .contents_item dl:not(:last-of-type) {
        margin-bottom: 30px; }
      #premium-create article .article_contents .contents_item dl dt {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-family: 'Noto Sans KR';
        font-weight: 500;
        min-width: 150px;
        color: #504d58; }
      #premium-create article .article_contents .contents_item dl dd {
        flex: 1; }
        #premium-create article .article_contents .contents_item dl dd span.subT {
          font-weight: 500;
          font-size: 18px; }
          #premium-create article .article_contents .contents_item dl dd span.subT.big {
            font-size: 26px; }
        #premium-create article .article_contents .contents_item dl dd .tag_list {
          display: flex;
          align-items: center;
          margin-top: 3px; }
          #premium-create article .article_contents .contents_item dl dd .tag_list > span {
            color: #7c7a82; }
            #premium-create article .article_contents .contents_item dl dd .tag_list > span:not(:last-of-type):after {
              content: '';
              display: inline-block;
              width: 1px;
              height: 8px;
              background: #7c7a82;
              margin: 0 10px; }
        #premium-create article .article_contents .contents_item dl dd .radio_box label {
          color: #24212e;
          cursor: pointer;
          word-break: keep-all; }
          #premium-create article .article_contents .contents_item dl dd .radio_box label:not(:last-of-type) {
            margin-right: 20px; }
        #premium-create article .article_contents .contents_item dl dd .radio_box input[type='radio']:checked + label {
          color: #24212e; }
        #premium-create article .article_contents .contents_item dl dd .radio_box input[type='radio']:checked + label i {
          border: 1px solid #7c7a82; }
        #premium-create article .article_contents .contents_item dl dd .radio_box input[type='radio']:checked + label i:after {
          width: 16px;
          height: 16px;
          border: 1px solid #d3d3d5;
          background-color: #7c7a82; }
    #premium-create article .article_contents .contents_item .checkbox_wrap {
      padding: 33px 0px; }
      #premium-create article .article_contents .contents_item .checkbox_wrap > p {
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #d3d3d5;
        font-size: 26px;
        font-weight: 700; }
      #premium-create article .article_contents .contents_item .checkbox_wrap .checkbox_inner > div:first-child label {
        font-size: 18px;
        font-weight: 700;
        color: #24212e; }
      #premium-create article .article_contents .contents_item .checkbox_wrap .label_wrap {
        padding-left: 25px; }
        #premium-create article .article_contents .contents_item .checkbox_wrap .label_wrap > label {
          width: 100%;
          margin-top: 17px; }
          #premium-create article .article_contents .contents_item .checkbox_wrap .label_wrap > label span {
            font-weight: 400; }
          #premium-create article .article_contents .contents_item .checkbox_wrap .label_wrap > label strong {
            font-size: 15px;
            color: #7c7a82; }
          #premium-create article .article_contents .contents_item .checkbox_wrap .label_wrap > label p {
            display: inline-block;
            cursor: pointer;
            font-weight: 500;
            text-decoration: underline;
            color: #24212e;
            padding-bottom: 0;
            margin-bottom: 0;
            border-bottom: none;
            font-size: 15px; }
          #premium-create article .article_contents .contents_item .checkbox_wrap .label_wrap > label button {
            margin-left: 20px;
            width: 75px;
            height: 25px;
            border-radius: 5px;
            font-size: 11px;
            font-weight: 500;
            color: #7c7a82;
            background-color: #f3f3f3;
            text-align: center; }
  #premium-create .btn_wrap {
    display: flex;
    justify-content: center;
    gap: 20px; }
    #premium-create .btn_wrap button {
      width: 211px;
      padding: 18px;
      border-radius: 15px;
      box-shadow: 0px 3px 3px rgba(118, 129, 229, 0.3);
      text-align: center;
      font-size: 20px;
      font-weight: 700; }
      #premium-create .btn_wrap button.btn_cancel {
        color: #7c7a82;
        border: 1px solid #7c7a82; }
      #premium-create .btn_wrap button.btn_join {
        color: #fff;
        background-color: #7681e5; }

.txt_blue {
  color: #09b9c6 !important; }

@media screen and (max-width: 1210px) {
  #premium-create .page-width {
    padding: 0 45px; }
  #premium-create .choose_fee .cont-form li .input-component-box,
  #premium-create .choose_fee .cont-form li .select {
    width: 300px; }
  #premium-create .payinfo .mycoupon > div {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px; }
  #premium-create .payinfo .mycoupon .tooltip_area {
    margin-left: 0; } }

/*
@media screen and (max-width: 1024px) {
  .premium {
    .myranking {
      .subscribe_wrap {
        gap: 50px;
      }
    }
    .cont-form {
      li {
        &.flex-column {
          flex-direction: column;
          align-items: flex-start;
          > div {
            width: 100%;
            &:first-of-type {
              width: 100%;
              padding-bottom: 30px;
              margin-bottom: 30px;
              border-bottom: 1px solid #d3d3d5;
            }
          }
        }
      }
    }
    .payinfo {
      .mycoupon {
        .tooltip_area {
          margin: 15px 0 0 155px;
        }
      }
    }
    .choose_fee {
      .cont-form {
        li.refund.flex-column2 {
          flex-wrap: wrap;
          p {
            width: calc(100% - 155px);
            &:first-of-type {
              padding-bottom: 30px;
              margin-bottom: 30px;
              border-bottom: 1px solid #d3d3d5;
            }
          }
          h2 {
            &:first-of-type {
              padding-bottom: 30px;
              margin-bottom: 30px;
              border-bottom: 1px solid #d3d3d5;
            }
          }
        }
        li {
          .input_w100 {
            width: calc(100% - 155px);
            > div {
              width: 100%;
            }
          }
          .select {
            width: calc(100% - 155px);
          }
        }
      }
    }
    .payinfo {
      .cont-form {
        li.fee_double.flex-column2 {
          flex-wrap: wrap;
          p {
            width: calc(100% - 155px);
            &:first-of-type {
              padding-bottom: 30px;
              margin-bottom: 30px;
              border-bottom: 1px solid #d3d3d5;
              line-height: 0.9;
            }
          }
          h2 {
            &:first-of-type {
              padding-bottom: 30px;
              margin-bottom: 30px;
              border-bottom: 1px solid #d3d3d5;
            }
          }
        }
      }
      .auto_card {
        > div {
          max-width: calc(100% - 155px);
        }
      }
      .mycoupon {
        .select {
          max-width: calc(100% - 155px);
        }
      }
    }
    .manage_member {
      .member_wrap {
        flex-direction: column;
      }
    }
  }
}
*/
#myclass-add-course .page-inner {
  padding: 50px 48px; }
  #myclass-add-course .page-inner .page-title {
    display: flex;
    align-items: center;
    font-size: 36px;
    line-height: 52px;
    color: #24212e;
    margin-bottom: 50px; }
    #myclass-add-course .page-inner .page-title img {
      margin-right: 10px; }
  #myclass-add-course .page-inner .myclass-main-content .header-wiget-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px; }
    #myclass-add-course .page-inner .myclass-main-content .header-wiget-bar .long-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #ffffff;
      box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
      border-radius: 15px;
      padding: 0 32px;
      height: 65px;
      flex: 1; }
      #myclass-add-course .page-inner .myclass-main-content .header-wiget-bar .long-bar .class {
        display: flex;
        align-items: center; }
        #myclass-add-course .page-inner .myclass-main-content .header-wiget-bar .long-bar .class h2 {
          font-weight: bold;
          font-size: 24px;
          line-height: 35px;
          color: #24212e; }
        #myclass-add-course .page-inner .myclass-main-content .header-wiget-bar .long-bar .class span {
          display: flex;
          align-items: center;
          transform: translateY(1px);
          font-weight: 500;
          font-size: 16px;
          line-height: 35px;
          color: #504d58; }
          #myclass-add-course .page-inner .myclass-main-content .header-wiget-bar .long-bar .class span:before {
            content: '';
            display: inline-block;
            width: 1px;
            height: 18px;
            background: #504d58;
            margin: 0 8px;
            vertical-align: middle; }
      #myclass-add-course .page-inner .myclass-main-content .header-wiget-bar .long-bar p {
        font-weight: 500;
        font-size: 15px;
        line-height: 22px;
        color: #7c7a82; }
        #myclass-add-course .page-inner .myclass-main-content .header-wiget-bar .long-bar p em {
          font-family: 'Inter', 'Noto Sans KR';
          font-style: normal;
          font-weight: bold;
          font-size: 18px;
          line-height: 22px;
          color: #0f9ba5;
          margin-left: 12px; }
    #myclass-add-course .page-inner .myclass-main-content .header-wiget-bar .btn-size {
      width: 211px; }
  #myclass-add-course .page-inner .myclass-main-content .body-content {
    display: flex;
    gap: 20px; }
    #myclass-add-course .page-inner .myclass-main-content .body-content > div {
      background: #ffffff;
      box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
      border-radius: 20px; }
      #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box {
        width: calc(60% - 20px);
        padding: 40px 30px; }
        #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .title {
          border-bottom: 1px solid #9de3e8; }
          #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .title > span {
            display: inline-block;
            border-bottom: 5px solid #09b9c6;
            box-sizing: border-box;
            font-weight: bold;
            font-size: 26px;
            line-height: 38px;
            text-align: center;
            color: #09b9c6;
            padding-bottom: 10px; }
            #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .title > span img {
              margin-left: 11px; }
        #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .search-bar {
          position: relative;
          margin-top: 30px;
          margin-bottom: 15px; }
          #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .search-bar input {
            height: 60px;
            border: 1px solid #7681e5;
            border-radius: 15px; }
          #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .search-bar button {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0;
            right: 0;
            width: 60px;
            height: 60px;
            background: #7681e5;
            border-radius: 15px; }
        #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .list-box .list-head {
          display: flex;
          align-items: center;
          gap: 30px;
          margin-bottom: 15px; }
          #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .list-box .list-head p {
            font-size: 15px;
            line-height: 22px;
            letter-spacing: -0.02em;
            color: #24212e; }
            #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .list-box .list-head p em {
              font-weight: 500; }
          #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .list-box .list-head .sort-box {
            display: flex;
            align-items: center;
            gap: 22px; }
            #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .list-box .list-head .sort-box button {
              display: flex;
              align-items: center; }
              #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .list-box .list-head .sort-box button.on img {
                transform: rotate(180deg); }
              #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .list-box .list-head .sort-box button img {
                margin-left: 6px; }
        #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .list-box ul {
          display: flex;
          flex-direction: column;
          gap: 15px;
          margin-bottom: 30px; }
          #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .list-box ul li {
            border: 1px solid #cef1f4;
            box-sizing: border-box;
            border-radius: 20px;
            padding: 19px 30px 17px;
            cursor: pointer;
            box-sizing: border-box; }
            #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .list-box ul li.on {
              border: 2px solid #09b9c6;
              padding: 18px 29px 16px; }
            #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .list-box ul li .course-subject {
              display: flex;
              align-items: center;
              justify-content: space-between;
              border-bottom: 1px solid #9de3e8;
              padding-bottom: 17px;
              margin-bottom: 11px; }
              #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .list-box ul li .course-subject .subject {
                display: flex;
                align-items: center;
                gap: 10px;
                width: 60%; }
                #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .list-box ul li .course-subject .subject img {
                  transform: translateY(-2px); }
                #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .list-box ul li .course-subject .subject span {
                  font-family: inherit;
                  font-style: normal;
                  font-weight: bold;
                  font-size: 13px;
                  display: flex;
                  line-height: 21px;
                  align-items: center;
                  justify-content: center;
                  color: #0f9ba5;
                  background: #ffffff;
                  border: 2px solid #0f9ba5;
                  box-sizing: border-box;
                  border-radius: 20px;
                  padding: 0 15px; }
                #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .list-box ul li .course-subject .subject h3 {
                  font-weight: 500;
                  font-size: 20px;
                  color: #24212e; }
              #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .list-box ul li .course-subject .side {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 40%;
                height: 35px; }
                #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .list-box ul li .course-subject .side button {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 35px;
                  height: 35px;
                  border-radius: 50%;
                  background: #e6f8f9; }
                #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .list-box ul li .course-subject .side .target {
                  display: flex;
                  align-items: center; }
                  #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .list-box ul li .course-subject .side .target p {
                    display: flex;
                    align-items: center;
                    font-weight: 500;
                    font-size: 16px;
                    color: #504d58; }
                  #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .list-box ul li .course-subject .side .target span {
                    font-weight: 500;
                    font-size: 13px;
                    color: #504d58;
                    margin-left: 2vw; }
            #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .list-box ul li .course-detail {
              width: 100%; }
              #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .list-box ul li .course-detail p {
                width: 100%;
                font-weight: 400;
                color: #9c9ba1; }
                #myclass-add-course .page-inner .myclass-main-content .body-content > div.course-box .list-box ul li .course-detail p em {
                  font-weight: 500;
                  color: #504d58; }
      #myclass-add-course .page-inner .myclass-main-content .body-content > div.preview-box {
        width: 40%;
        padding: 37px 10px 0px 25px; }
        #myclass-add-course .page-inner .myclass-main-content .body-content > div.preview-box .head {
          margin-bottom: 40px;
          padding-right: 15px; }
          #myclass-add-course .page-inner .myclass-main-content .body-content > div.preview-box .head h2 {
            font-weight: bold;
            font-size: 26px;
            line-height: 38px;
            color: #24212e;
            margin-bottom: 10px; }
          #myclass-add-course .page-inner .myclass-main-content .body-content > div.preview-box .head p {
            display: flex;
            align-items: center;
            justify-content: space-between; }
            #myclass-add-course .page-inner .myclass-main-content .body-content > div.preview-box .head p span {
              font-size: 18px; }
              #myclass-add-course .page-inner .myclass-main-content .body-content > div.preview-box .head p span:nth-child(1) {
                font-weight: 500;
                font-size: 18px;
                color: #504d58; }
              #myclass-add-course .page-inner .myclass-main-content .body-content > div.preview-box .head p span:nth-child(2) {
                font-family: 'Inter', 'Noto Sans KR';
                font-weight: 600;
                font-size: 18px;
                color: #a7a6ab; }
        #myclass-add-course .page-inner .myclass-main-content .body-content > div.preview-box ul {
          display: flex;
          flex-direction: column;
          gap: 30px;
          padding-right: 15px;
          overflow: auto;
          max-height: 855px;
          padding-bottom: 30px; }
          #myclass-add-course .page-inner .myclass-main-content .body-content > div.preview-box ul li {
            display: flex;
            flex-direction: column;
            gap: 30px;
            padding: 30px 25px;
            background: #ffffff;
            border: 1px solid #84dce2;
            box-sizing: border-box;
            border-radius: 20px; }
            #myclass-add-course .page-inner .myclass-main-content .body-content > div.preview-box ul li .item {
              display: flex;
              align-items: center;
              justify-content: space-between; }
              #myclass-add-course .page-inner .myclass-main-content .body-content > div.preview-box ul li .item .subject {
                display: flex;
                align-items: center;
                width: calc(100% - 120px);
                margin-right: 20px; }
                #myclass-add-course .page-inner .myclass-main-content .body-content > div.preview-box ul li .item .subject span {
                  line-height: 21px;
                  text-align: center;
                  width: 47px;
                  min-width: 47px;
                  font-family: 'Inter', 'Noto Sans KR';
                  font-style: normal;
                  font-weight: 800;
                  font-size: 12px;
                  background: #ffffff;
                  box-sizing: border-box;
                  border-radius: 5px; }
                  #myclass-add-course .page-inner .myclass-main-content .body-content > div.preview-box ul li .item .subject span.tr {
                    border: 2px solid #7681e5;
                    color: #7681e5; }
                  #myclass-add-course .page-inner .myclass-main-content .body-content > div.preview-box ul li .item .subject span.test {
                    border: 2px solid #ff84b0;
                    color: #ff84b0; }
                #myclass-add-course .page-inner .myclass-main-content .body-content > div.preview-box ul li .item .subject p {
                  font-weight: 500;
                  font-size: 14px;
                  line-height: 100%;
                  display: flex;
                  align-items: center;
                  color: #504d58;
                  width: 56px;
                  margin-left: 10px;
                  margin-right: 10px; }
                #myclass-add-course .page-inner .myclass-main-content .body-content > div.preview-box ul li .item .subject h3 {
                  font-weight: 500;
                  font-size: 16px;
                  line-height: 150%;
                  color: #24212e;
                  width: calc(100% - 100px); }
              #myclass-add-course .page-inner .myclass-main-content .body-content > div.preview-box ul li .item .side {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                width: 110px;
                gap: 1vw; }
                #myclass-add-course .page-inner .myclass-main-content .body-content > div.preview-box ul li .item .side span {
                  font-weight: normal;
                  font-size: 14px;
                  line-height: 150%;
                  color: #504d58; }
                #myclass-add-course .page-inner .myclass-main-content .body-content > div.preview-box ul li .item .side button {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 35px;
                  min-width: 35px;
                  height: 35px;
                  border-radius: 50%;
                  background: #e6f8f9; }
  #myclass-add-course .page-inner .myclass-main-content .btn-wrap {
    width: 288px;
    margin: 30px auto 0; }

#myclass-asign-course .page-inner {
  padding: 50px 48px; }
  #myclass-asign-course .page-inner .page-title {
    display: flex;
    align-items: center;
    font-size: 36px;
    line-height: 52px;
    color: #24212e;
    margin-bottom: 50px; }
    #myclass-asign-course .page-inner .page-title img {
      margin-right: 10px; }
  #myclass-asign-course .page-inner .myclass-main-content .header-wiget-bar {
    display: flex;
    align-items: center;
    margin-bottom: 20px; }
    #myclass-asign-course .page-inner .myclass-main-content .header-wiget-bar .long-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #ffffff;
      box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
      border-radius: 15px;
      padding: 0 32px;
      height: 65px;
      flex: 1;
      margin-right: 20px; }
      #myclass-asign-course .page-inner .myclass-main-content .header-wiget-bar .long-bar .class {
        display: flex;
        align-items: center; }
        #myclass-asign-course .page-inner .myclass-main-content .header-wiget-bar .long-bar .class h2 {
          font-weight: bold;
          font-size: 24px;
          line-height: 35px;
          color: #24212e; }
        #myclass-asign-course .page-inner .myclass-main-content .header-wiget-bar .long-bar .class span {
          display: flex;
          align-items: center;
          transform: translateY(1px);
          font-weight: 500;
          font-size: 16px;
          line-height: 35px;
          color: #504d58; }
          #myclass-asign-course .page-inner .myclass-main-content .header-wiget-bar .long-bar .class span:before {
            content: '';
            display: inline-block;
            width: 1px;
            height: 18px;
            background: #504d58;
            margin: 0 8px;
            vertical-align: middle; }
      #myclass-asign-course .page-inner .myclass-main-content .header-wiget-bar .long-bar p {
        font-weight: 500;
        font-size: 15px;
        line-height: 22px;
        color: #7c7a82; }
        #myclass-asign-course .page-inner .myclass-main-content .header-wiget-bar .long-bar p em {
          font-family: 'Inter', 'Noto Sans KR';
          font-style: normal;
          font-weight: bold;
          font-size: 18px;
          line-height: 22px;
          color: #0f9ba5;
          margin-left: 12px; }
    #myclass-asign-course .page-inner .myclass-main-content .header-wiget-bar .btn-size {
      width: 211px; }
  #myclass-asign-course .page-inner .myclass-main-content .body-content {
    display: flex; }
    #myclass-asign-course .page-inner .myclass-main-content .body-content > div {
      background: #ffffff;
      box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
      border-radius: 20px; }
      #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box {
        width: calc(50% - 10px);
        padding: 40px 30px;
        margin-right: 20px; }
        #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .title {
          margin-bottom: 60px; }
          #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .title h2 {
            font-weight: bold;
            font-size: 26px;
            line-height: 38px;
            color: #24212e; }
        #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .btn-size {
          width: 284px;
          margin: 60px auto 0; }
        #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col {
          display: flex;
          flex-direction: column; }
          #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col.top {
            padding-bottom: 20px;
            margin-bottom: 50px;
            border-bottom: 1px solid #d3d3d5; }
          #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .input-size {
            width: 200px; }
          #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item {
            display: flex;
            align-items: center;
            width: 100%;
            margin-top: 30px; }
            #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item:first-of-type {
              margin-bottom: 0; }
            #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item .row-inner {
              display: flex;
              align-items: center;
              width: 100%; }
              #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item .row-inner.twin {
                width: initial; }
                #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item .row-inner.twin:first-of-type {
                  width: 50%;
                  margin-right: 2%; }
                #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item .row-inner.twin:last-of-type {
                  width: 48%; }
                #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item .row-inner.twin span {
                  flex: 1; }
                #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item .row-inner.twin .input-word {
                  display: flex;
                  align-items: center; }
                  #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item .row-inner.twin .input-word p {
                    font-size: 15px;
                    color: #7c7a82;
                    margin-left: 6px; }
              #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item .row-inner span {
                display: inline-block;
                width: 25%;
                font-weight: normal;
                font-size: 18px;
                line-height: 27px;
                color: #24212e; }
              #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item .row-inner > div {
                flex: 1;
                width: 75%; }
                #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item .row-inner > div .date-picker .disabled {
                  /*
                          background: #f5f5f7;
                          border: 1px solid #d3d3d5;
                          */
                  background: #e9e9ea;
                  border: 1px solid #dfdfe4;
                  color: #a7a6ab; }
                #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item .row-inner > div .date-picker .input {
                  width: 200px; }
                #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item .row-inner > div .option-box {
                  display: flex;
                  justify-content: space-between;
                  align-items: center; }
                  #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item .row-inner > div .option-box > p {
                    font-weight: normal;
                    font-size: 12px;
                    line-height: 150%;
                    color: #a7a6ab; }
                  #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item .row-inner > div .option-box label p {
                    color: #7c7a82; }
            #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item.day .row-inner {
              width: 25%; }
              #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item.day .row-inner span {
                width: 100%; }
            #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item.day .swiper-box {
              position: relative;
              width: 75%; }
            #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item.day .day-check-box {
              width: 75%;
              display: flex; }
              #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item.day .day-check-box .day-item {
                flex: 1; }
                #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item.day .day-check-box .day-item:not(:last-of-type) {
                  margin-right: 10px; }
                #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item.day .day-check-box .day-item label {
                  display: flex;
                  justify-content: center;
                  width: 100%;
                  height: 45px;
                  font-size: 15px;
                  text-align: center;
                  color: #09b9c6;
                  background: #ffffff;
                  border: 1px solid #09b9c6;
                  box-sizing: border-box;
                  border-radius: 10px; }
                #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item.day .day-check-box .day-item input[type='checkbox']:checked + label {
                  color: #fff;
                  background: #09b9c6;
                  border: 1px solid #09b9c6; }
                #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item.day .day-check-box .day-item input[type='checkbox']:disabled + label {
                  cursor: not-allowed;
                  color: #d3d3d5;
                  background: #ffffff;
                  border: 1px solid #d3d3d5; }
      #myclass-asign-course .page-inner .myclass-main-content .body-content > div.preview-box {
        width: calc(50% - 10px);
        padding: 37px 10px 0px 25px; }
        #myclass-asign-course .page-inner .myclass-main-content .body-content > div.preview-box .head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 40px;
          padding-right: 15px; }
          #myclass-asign-course .page-inner .myclass-main-content .body-content > div.preview-box .head h2 {
            font-weight: bold;
            font-size: 26px;
            line-height: 38px;
            color: #24212e;
            margin-bottom: 10px;
            flex: 1; }
          #myclass-asign-course .page-inner .myclass-main-content .body-content > div.preview-box .head > span {
            color: #504d58;
            font-size: 18px;
            width: 190px;
            margin-left: 20px; }
          #myclass-asign-course .page-inner .myclass-main-content .body-content > div.preview-box .head p {
            display: flex;
            align-items: center;
            justify-content: space-between; }
            #myclass-asign-course .page-inner .myclass-main-content .body-content > div.preview-box .head p span {
              font-size: 18px; }
              #myclass-asign-course .page-inner .myclass-main-content .body-content > div.preview-box .head p span:nth-child(1) {
                font-weight: 500;
                font-size: 18px;
                color: #504d58; }
              #myclass-asign-course .page-inner .myclass-main-content .body-content > div.preview-box .head p span:nth-child(2) {
                font-family: 'Inter', 'Noto Sans KR';
                font-weight: 600;
                font-size: 18px;
                color: #a7a6ab; }
        #myclass-asign-course .page-inner .myclass-main-content .body-content > div.preview-box ul {
          display: flex;
          flex-direction: column;
          padding-right: 15px;
          overflow: auto;
          max-height: 973px;
          padding-bottom: 30px; }
          #myclass-asign-course .page-inner .myclass-main-content .body-content > div.preview-box ul li {
            margin-bottom: 30px; }
            #myclass-asign-course .page-inner .myclass-main-content .body-content > div.preview-box ul li:last-of-type {
              margin-bottom: 0; }
            #myclass-asign-course .page-inner .myclass-main-content .body-content > div.preview-box ul li > span {
              display: inline-block;
              color: #24212e;
              font-size: 20px;
              padding-bottom: 22px; }
            #myclass-asign-course .page-inner .myclass-main-content .body-content > div.preview-box ul li .item-content {
              display: flex;
              align-items: center; }
              #myclass-asign-course .page-inner .myclass-main-content .body-content > div.preview-box ul li .item-content .drag-button {
                width: 47px;
                height: 47px;
                border-radius: 50%;
                background: #e9e9ea;
                margin-left: 24px; }
              #myclass-asign-course .page-inner .myclass-main-content .body-content > div.preview-box ul li .item-content .item-box {
                width: calc(100% - 66px);
                display: flex;
                flex-direction: column;
                padding: 15px 25px;
                background: #ffffff;
                border: 1px solid #84dce2;
                box-sizing: border-box;
                border-radius: 20px;
                min-height: 97px;
                cursor: pointer; }
                #myclass-asign-course .page-inner .myclass-main-content .body-content > div.preview-box ul li .item-content .item-box .item {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  padding: 15px 0; }
                  #myclass-asign-course .page-inner .myclass-main-content .body-content > div.preview-box ul li .item-content .item-box .item:last-of-type {
                    margin-bottom: 0px; }
                  #myclass-asign-course .page-inner .myclass-main-content .body-content > div.preview-box ul li .item-content .item-box .item .subject {
                    display: flex;
                    align-items: center;
                    width: calc(100% - 170px); }
                    #myclass-asign-course .page-inner .myclass-main-content .body-content > div.preview-box ul li .item-content .item-box .item .subject span {
                      line-height: 21px;
                      text-align: center;
                      width: 47px;
                      padding: 4px 0;
                      font-family: 'Inter', 'Noto Sans KR';
                      font-style: normal;
                      font-weight: 800;
                      font-size: 12px;
                      background: #ffffff;
                      box-sizing: border-box;
                      border-radius: 5px; }
                      #myclass-asign-course .page-inner .myclass-main-content .body-content > div.preview-box ul li .item-content .item-box .item .subject span.tr {
                        border: 2px solid #7681e5;
                        color: #7681e5; }
                      #myclass-asign-course .page-inner .myclass-main-content .body-content > div.preview-box ul li .item-content .item-box .item .subject span.test {
                        border: 2px solid #ff84b0;
                        color: #ff84b0; }
                    #myclass-asign-course .page-inner .myclass-main-content .body-content > div.preview-box ul li .item-content .item-box .item .subject p {
                      font-weight: 500;
                      font-size: 14px;
                      line-height: 100%;
                      display: flex;
                      align-items: center;
                      color: #504d58;
                      margin: 0 1vw; }
                    #myclass-asign-course .page-inner .myclass-main-content .body-content > div.preview-box ul li .item-content .item-box .item .subject h3 {
                      font-weight: 500;
                      font-size: 16px;
                      line-height: 150%;
                      color: #24212e;
                      max-width: 70%;
                      flex: 1; }
                  #myclass-asign-course .page-inner .myclass-main-content .body-content > div.preview-box ul li .item-content .item-box .item .side {
                    display: flex;
                    align-items: center; }
                    #myclass-asign-course .page-inner .myclass-main-content .body-content > div.preview-box ul li .item-content .item-box .item .side span {
                      font-weight: normal;
                      font-size: 14px;
                      line-height: 150%;
                      color: #504d58;
                      white-space: nowrap; }
                    #myclass-asign-course .page-inner .myclass-main-content .body-content > div.preview-box ul li .item-content .item-box .item .side button,
                    #myclass-asign-course .page-inner .myclass-main-content .body-content > div.preview-box ul li .item-content .item-box .item .side div.button {
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      width: 35px;
                      height: 35px;
                      border-radius: 50%;
                      background: #e6f8f9;
                      margin-left: 1vw; }

@media screen and (max-width: 1740px) {
  #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item.day {
    flex-direction: column;
    align-items: flex-start; }
    #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item.day .day-check-box {
      width: 100%; }
  #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item .row-inner {
    flex-direction: column;
    align-items: flex-start; }
    #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item .row-inner span {
      width: 100%;
      margin-bottom: 10px; }
    #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item .row-inner > div {
      width: 100%; } }

@media screen and (max-width: 1050px) {
  #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0; }
    #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item .row-inner {
      margin-bottom: 10px; }
      #myclass-asign-course .page-inner .myclass-main-content .body-content > div.asign-box .asign-setting .asign-col .row-item .row-inner.twin .input-word .input-component-box {
        min-width: 200px; } }

#teacher-my-campus {
  background: #fbfcff; }
  #teacher-my-campus .page-inner {
    padding: 50px 48px;
    min-height: calc(100vh - 490px); }
    #teacher-my-campus .page-inner .page-title {
      display: flex;
      align-items: center;
      font-size: 36px;
      line-height: 52px;
      color: #24212e;
      margin-bottom: 50px; }
      #teacher-my-campus .page-inner .page-title img {
        margin-right: 10px; }
    #teacher-my-campus .page-inner .status-box {
      display: flex;
      flex-direction: column;
      align-items: flex-end; }
      #teacher-my-campus .page-inner .status-box button {
        display: flex;
        align-items: center;
        font-size: 18px;
        line-height: 26px;
        color: #7681e5;
        background: rgba(228, 230, 250, 0.5);
        border-radius: 15px;
        padding: 10px 20px;
        margin-bottom: 15px; }
        #teacher-my-campus .page-inner .status-box button img {
          margin-right: 5px; }
      #teacher-my-campus .page-inner .status-box .status-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 70px;
        background: #ffffff;
        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
        border-radius: 15px;
        padding: 0 30px;
        margin-bottom: 40px; }
        #teacher-my-campus .page-inner .status-box .status-bar .bar-left {
          display: flex;
          align-items: center; }
          #teacher-my-campus .page-inner .status-box .status-bar .bar-left span {
            display: flex;
            align-items: center; }
            #teacher-my-campus .page-inner .status-box .status-bar .bar-left span.type {
              font-size: 25px;
              color: #24212e;
              margin-right: 15px; }
            #teacher-my-campus .page-inner .status-box .status-bar .bar-left span.level {
              font-size: 20px;
              color: #24212e; }
              #teacher-my-campus .page-inner .status-box .status-bar .bar-left span.level em {
                font-size: inherit;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent; }
                #teacher-my-campus .page-inner .status-box .status-bar .bar-left span.level em.book {
                  background-image: linear-gradient(to right, #ff7a00, #896bde); }
                #teacher-my-campus .page-inner .status-box .status-bar .bar-left span.level em.student {
                  background-image: linear-gradient(to right, #22a4ed, #22a4ed); }
                #teacher-my-campus .page-inner .status-box .status-bar .bar-left span.level em.free {
                  background-image: linear-gradient(to right, #231055, #231055); }
                #teacher-my-campus .page-inner .status-box .status-bar .bar-left span.level em.premium {
                  background-image: linear-gradient(to right, #35e77d, #34b2e9); }
            #teacher-my-campus .page-inner .status-box .status-bar .bar-left span.date {
              font-size: 15px;
              color: #7c7a82; }
              #teacher-my-campus .page-inner .status-box .status-bar .bar-left span.date:before {
                content: '';
                display: inline-block;
                width: 2px;
                height: 16px;
                background: #7c7a82;
                margin: 0 5px; }
        #teacher-my-campus .page-inner .status-box .status-bar .bar-right ul {
          display: flex; }
          #teacher-my-campus .page-inner .status-box .status-bar .bar-right ul li {
            display: flex;
            align-items: center; }
            #teacher-my-campus .page-inner .status-box .status-bar .bar-right ul li:not(:last-of-type):after {
              content: '';
              display: inline-block;
              width: 2px;
              height: 16px;
              background: #a7a6ab;
              margin: 0 15px; }
            #teacher-my-campus .page-inner .status-box .status-bar .bar-right ul li span {
              display: inline-block;
              font-weight: 500;
              font-size: 15px;
              line-height: 22px;
              color: #7c7a82; }
              #teacher-my-campus .page-inner .status-box .status-bar .bar-right ul li span.sum {
                font-weight: bold;
                font-size: 18px;
                line-height: 22px;
                color: #09b9c6;
                margin-left: 0px !important; }
              #teacher-my-campus .page-inner .status-box .status-bar .bar-right ul li span:last-of-type {
                margin-left: 15px; }
              #teacher-my-campus .page-inner .status-box .status-bar .bar-right ul li span em {
                font-size: 18px;
                line-height: 22px;
                color: #504d58;
                margin-left: 5px; }
    #teacher-my-campus .page-inner .campus-list {
      margin-bottom: 50px; }
      #teacher-my-campus .page-inner .campus-list > ul {
        display: flex;
        flex-wrap: wrap;
        gap: 40px 20px;
        grid-gap: 40px; }
        #teacher-my-campus .page-inner .campus-list > ul > li {
          width: calc(25% - 30px); }
    #teacher-my-campus .page-inner .btn-size {
      width: 288px;
      margin: 0 auto; }

@media screen and (max-width: 1400px) {
  #teacher-my-campus .page-inner {
    padding: 30px 48px; }
    #teacher-my-campus .page-inner .page-title {
      margin-bottom: 10px; }
    #teacher-my-campus .page-inner .campus-list > ul > li {
      width: calc(33.333% - 27px); } }

@media screen and (max-width: 1200px) {
  #teacher-my-campus .page-inner .status-box .status-bar {
    flex-direction: column;
    padding: 10px 0;
    height: initial;
    gap: 5px; }
  #teacher-my-campus .page-inner .campus-list > ul > li {
    width: calc(50% - 20px); } }

@media screen and (max-width: 1024px) {
  #teacher-my-campus .page-inner {
    padding: 30px 16px 40px;
    margin: 0 -16px;
    overflow: hidden auto;
    min-height: initial; }
    #teacher-my-campus .page-inner .campus-list {
      margin-top: 40px;
      margin-bottom: 0; }
      #teacher-my-campus .page-inner .campus-list > ul {
        gap: 20px; }
        #teacher-my-campus .page-inner .campus-list > ul > li {
          width: 100%; }
    #teacher-my-campus .page-inner .btn-size {
      width: 100%; }
    #teacher-my-campus .page-inner .banner {
      margin: 40px -16px; }
      #teacher-my-campus .page-inner .banner img {
        width: 100%; } }

#teacher-invite .page-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 0; }
  #teacher-invite .page-inner .page-title {
    margin-bottom: 60px;
    text-align: center; }
    #teacher-invite .page-inner .page-title h2 {
      color: #24212e;
      font-size: 32px;
      font-weight: 700;
      line-height: 42px;
      letter-spacing: -0.24px; }
    #teacher-invite .page-inner .page-title p {
      color: #504d58;
      font-size: 20px;
      font-weight: 400;
      line-height: 30px;
      margin-top: 8px; }
  #teacher-invite .page-inner .invite-type-box {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
    padding: 0 20px; }
    #teacher-invite .page-inner .invite-type-box .type-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: calc(100% / 3);
      max-width: 400px;
      height: 340px;
      background: #ffffff;
      border: 1px solid #e9e9ea;
      box-sizing: border-box;
      border-radius: 20px;
      box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
      cursor: pointer;
      transition: border-color 0.21s;
      text-align: center; }
      #teacher-invite .page-inner .invite-type-box .type-box i {
        position: relative;
        min-width: 40px;
        min-height: 40px; }
        #teacher-invite .page-inner .invite-type-box .type-box i img {
          position: absolute;
          top: 0;
          left: 0; }
          #teacher-invite .page-inner .invite-type-box .type-box i img:last-of-type {
            visibility: hidden;
            opacity: 0; }
      #teacher-invite .page-inner .invite-type-box .type-box h2 {
        color: #504d58;
        font-size: 26px;
        font-weight: 700;
        line-height: 36px;
        /* 138.462% */
        letter-spacing: -0.24px; }
        #teacher-invite .page-inner .invite-type-box .type-box h2.small {
          font-size: 24px;
          line-height: 34px; }
      #teacher-invite .page-inner .invite-type-box .type-box p {
        color: #7c7a82;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        margin-top: 4px; }
      #teacher-invite .page-inner .invite-type-box .type-box.on {
        border: 1px solid #7681e5;
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08); }
        #teacher-invite .page-inner .invite-type-box .type-box.on i img {
          visibility: hidden;
          opacity: 0; }
          #teacher-invite .page-inner .invite-type-box .type-box.on i img:last-of-type {
            visibility: visible;
            opacity: 1; }
        #teacher-invite .page-inner .invite-type-box .type-box.on p {
          color: #7681e5; }
        #teacher-invite .page-inner .invite-type-box .type-box.on h2 {
          color: #7681e5; }
    #teacher-invite .page-inner .invite-type-box .btn-size {
      margin: 28px auto 0; }
      #teacher-invite .page-inner .invite-type-box .btn-size button {
        display: inline-block;
        width: 140px; }
  #teacher-invite .page-inner .invited_info_ul {
    display: flex;
    margin-top: 60px; }
    #teacher-invite .page-inner .invited_info_ul li {
      min-width: 520px;
      min-height: 92px;
      padding: 18px 24px;
      border-radius: 12px;
      background: #f4f5fd;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between; }
      #teacher-invite .page-inner .invited_info_ul li p {
        color: #504d58;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px; }
        #teacher-invite .page-inner .invited_info_ul li p.title {
          color: #24212e;
          font-size: 18px;
          font-weight: 500;
          line-height: 28px;
          margin-bottom: 4px; }
      #teacher-invite .page-inner .invited_info_ul li:not(:first-of-type) {
        margin-left: 20px; }

#teacher-invite.mb_invite {
  padding: 48px 20px 100px; }
  #teacher-invite.mb_invite .page-inner {
    padding: 24px 0; }
    #teacher-invite.mb_invite .page-inner .invite-type-box {
      width: 100%;
      flex-direction: column;
      padding: 0;
      gap: 16px; }
      #teacher-invite.mb_invite .page-inner .invite-type-box .type-box {
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 24px;
        min-height: 240px;
        box-shadow: none; }
        #teacher-invite.mb_invite .page-inner .invite-type-box .type-box.on {
          border: 1px solid #e9e9ea;
          box-shadow: none; }
          #teacher-invite.mb_invite .page-inner .invite-type-box .type-box.on h2 {
            color: #504d58; }
          #teacher-invite.mb_invite .page-inner .invite-type-box .type-box.on p {
            color: #7c7a82; }
        #teacher-invite.mb_invite .page-inner .invite-type-box .type-box p {
          font-size: 14px;
          text-align: center;
          color: #7c7a82;
          line-height: 22px; }
        #teacher-invite.mb_invite .page-inner .invite-type-box .type-box h2 {
          font-weight: bold;
          font-size: 22px;
          line-height: 36px;
          margin-bottom: 0; }
          #teacher-invite.mb_invite .page-inner .invite-type-box .type-box h2.small {
            font-size: 22px;
            line-height: 36px; }
        #teacher-invite.mb_invite .page-inner .invite-type-box .type-box i img:last-of-type {
          opacity: 1;
          visibility: visible; }
        #teacher-invite.mb_invite .page-inner .invite-type-box .type-box .btn-size {
          margin-top: 16px; }
          #teacher-invite.mb_invite .page-inner .invite-type-box .type-box .btn-size button {
            height: 42px;
            line-height: 40px; }
    #teacher-invite.mb_invite .page-inner .invited_info_ul {
      width: 100%;
      position: fixed;
      left: 0;
      bottom: 0;
      /* ios fixed 이슈 관련 */ }
      @media (orientation: landscape) {
        #teacher-invite.mb_invite .page-inner .invited_info_ul {
          position: fixed; } }
      @media (orientation: portrait) {
        #teacher-invite.mb_invite .page-inner .invited_info_ul {
          position: fixed; } }
      #teacher-invite.mb_invite .page-inner .invited_info_ul li {
        width: 100%;
        min-width: 100%;
        border-radius: 0;
        padding: 16px 20px; }
        #teacher-invite.mb_invite .page-inner .invited_info_ul li p {
          font-size: 13px;
          line-height: 20px; }
          #teacher-invite.mb_invite .page-inner .invited_info_ul li p.title {
            font-size: 16px;
            font-weight: 700;
            line-height: 24px;
            margin-bottom: 2px; }
        #teacher-invite.mb_invite .page-inner .invited_info_ul li button {
          height: 32px;
          line-height: 30px;
          padding: 0 12px !important; }
          #teacher-invite.mb_invite .page-inner .invited_info_ul li button span {
            color: #fff;
            font-size: 13px;
            font-weight: 500;
            line-height: 20px; }

@media screen and (max-width: 1470px) {
  #teacher-invite .page-inner .invite-type-box {
    max-width: 1140px; } }

@media screen and (max-width: 1100px) {
  #teacher-invite .page-inner .invited_info_ul {
    margin: 60px auto 0;
    padding: 0 20px; }
    #teacher-invite .page-inner .invited_info_ul li {
      min-width: 480px; } }

/*
@media screen and (max-width: 1024px) {
  #teacher-invite {
    .page-inner {
      padding: 24px 0;
      // padding: 24px 0 148px;
      .invite-type-box {
        width: 100%;
        flex-direction: column;
        padding: 0;
        .type-box {
          width: 100%;
          max-width: 100%;
          height: auto;
          padding: 30px;
          // box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
          p {
            // font-weight: 500;
            font-size: 14px;
            text-align: center;
            color: #7c7a82;
          }
          h2 {
            font-weight: bold;
            font-size: 22px;
            // line-height: 32px;
            // color: #24212e;
            // margin-bottom: 18px;
          }
          // .btn-size {
          //   width: 150px;
          // }
          i {
            img {
              &:last-of-type {
                opacity: 1;
                visibility: visible;
              }
            }
          }
          &.on {
            h2 {
              // color: #24212e;
              color: #504d58;
            }
            p {
              color: #7c7a82;
            }
          }
        }
      }
      .invited_info_ul {
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 0;
        li {
          width: 100%;
          min-width: 100%;
          border-radius: 0;
          padding: 16px 20px;
          p {
            font-size: 13px;
            line-height: 20px;
            &.title {
              font-size: 16px;
              font-weight: 700;
              line-height: 24px;
              margin-bottom: 2px;
            }
          }
          button {
            height: 32px;
            line-height: 30px;
            span {
              color: #fff;
              font-size: 13px;
              font-weight: 500;
              line-height: 20px;
            }
          }
        }
      }
    }
  }
}
*/
#teacher-student-info {
  padding-top: 92px;
  padding-bottom: 32px; }
  #teacher-student-info .new_layout .page_top {
    padding-bottom: 12px; }
  #teacher-student-info .new_layout .twin_layout .shadow_card:nth-of-type(2) {
    max-width: 660px; }
  #teacher-student-info .new_layout .twin_layout .shadow_card.bot_page {
    padding-bottom: 73px; }
    #teacher-student-info .new_layout .twin_layout .shadow_card.bot_page .pagination-component {
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 29px; }
  #teacher-student-info .new_layout .twin_layout .shadow_card.bot_btns {
    padding-bottom: 89px; }
  #teacher-student-info .new_layout .twin_layout .shadow_card .contents {
    margin-top: 17px; }
  #teacher-student-info .new_layout .twin_layout.first_560 .shadow_card:first-of-type {
    max-width: 560px; }
  #teacher-student-info .new_layout .twin_layout.first_560 .shadow_card:last-of-type {
    max-width: none; }
  #teacher-student-info .new_layout .tab_line_wrap {
    position: relative; }
    #teacher-student-info .new_layout .tab_line_wrap .tab_line li a {
      padding: 16px 0; }
      #teacher-student-info .new_layout .tab_line_wrap .tab_line li a.on {
        font-weight: 700; }
    #teacher-student-info .new_layout .tab_line_wrap .line {
      width: 100%; }
  #teacher-student-info .current-class {
    font-size: 13px;
    line-height: 20px; }
  #teacher-student-info .new_table_wrap thead tr th {
    padding: 9px 16px 11px;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
    border-color: #e9e9ea; }
    #teacher-student-info .new_table_wrap thead tr th.border_none_l {
      border-left: none; }
  #teacher-student-info .new_table_wrap tbody tr td {
    padding: 12px 16px 14px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400; }
    #teacher-student-info .new_table_wrap tbody tr td.select_td {
      padding: 8px 16px 10px;
      text-align: left; }
    #teacher-student-info .new_table_wrap tbody tr td.border_none_l {
      border-left: none; }
    #teacher-student-info .new_table_wrap tbody tr td .new_select p {
      height: 30px;
      padding-top: 5px;
      padding-bottom: 5px;
      padding-right: 36px;
      border-radius: 6px; }
  #teacher-student-info.mb-teacher-student-info.mb_fixed_btn_main {
    /* 캠퍼스 퇴원 비활성화시 */
    padding-bottom: 0 !important;
    /* 캠퍼스 퇴원 활성화시 */ }
    #teacher-student-info.mb-teacher-student-info.mb_fixed_btn_main.pd_bot {
      padding-bottom: 80px !important; }
      #teacher-student-info.mb-teacher-student-info.mb_fixed_btn_main.pd_bot .new_layout .twin_layout .shadow_card {
        height: calc(100vh - 245px);
        min-height: calc(100vh - 245px); }
  #teacher-student-info.mb-teacher-student-info .new_layout .page_top .page_title_wrap .page_title img {
    width: 24px; }
  #teacher-student-info.mb-teacher-student-info .new_layout .twin_layout .shadow_card {
    min-height: calc(100vh - 165px);
    height: calc(100vh - 165px);
    overflow-y: auto; }
    #teacher-student-info.mb-teacher-student-info .new_layout .twin_layout .shadow_card.bot_page {
      padding-bottom: 20px; }
      #teacher-student-info.mb-teacher-student-info .new_layout .twin_layout .shadow_card.bot_page .pagination-component {
        position: initial; }
    #teacher-student-info.mb-teacher-student-info .new_layout .twin_layout .shadow_card .contents {
      margin-top: 10px; }
  #teacher-student-info.mb-teacher-student-info .new_layout .twin_layout .class_ul > li {
    padding: 16px 20px; }
    #teacher-student-info.mb-teacher-student-info .new_layout .twin_layout .class_ul > li.active {
      padding: 16px 20px;
      border: 1px solid #dfdfe4;
      background-color: transparent; }
    #teacher-student-info.mb-teacher-student-info .new_layout .twin_layout .class_ul > li > div {
      flex-wrap: wrap; }
      #teacher-student-info.mb-teacher-student-info .new_layout .twin_layout .class_ul > li > div > span {
        width: 100%;
        margin-top: 4px; }
  #teacher-student-info.mb-teacher-student-info .new_layout .twin_layout .nodata_alert {
    padding: 20px 0; }
  #teacher-student-info.mb-teacher-student-info .new_layout .tab_line_wrap {
    border-bottom: 1px solid #e9e9ea; }
    #teacher-student-info.mb-teacher-student-info .new_layout .tab_line_wrap .tab_line li a {
      padding-top: 12px;
      padding-bottom: 14px; }
  #teacher-student-info.mb-teacher-student-info .new_table_wrap thead tr th {
    padding: 9px 20px 11px; }
  #teacher-student-info.mb-teacher-student-info .new_table_wrap tbody tr td {
    padding: 12px 20px 14px;
    font-size: 13px;
    line-height: 20px; }
    #teacher-student-info.mb-teacher-student-info .new_table_wrap tbody tr td.row_td p:not(:first-child) {
      margin-top: 2px; }

@media screen and (max-width: 1470px) {
  #teacher-student-info .new_layout .twin_layout .shadow_card:nth-of-type(1) .card_title_area {
    display: block; }
    #teacher-student-info .new_layout .twin_layout .shadow_card:nth-of-type(1) .card_title_area .form_wrap {
      margin-top: 8px; }
  #teacher-student-info .new_layout .twin_layout .shadow_card:nth-of-type(2) {
    max-width: 400px; } }

@media screen and (max-width: 1024px) {
  .mb_hidden {
    display: none; }
  #teacher-student-info {
    height: auto !important;
    min-height: 100vh;
    padding: 48px 0 0;
    background: #f8f9fa; }
    #teacher-student-info.nodata_height {
      height: 100% !important; }
      #teacher-student-info.nodata_height .twin_layout {
        height: calc(100% - 118px) !important;
        overflow-y: auto; }
    #teacher-student-info .tab_line_wrap .tab_flex {
      background-color: #f8f9fa;
      padding-bottom: 0; }
      #teacher-student-info .tab_line_wrap .tab_flex .tab_right {
        display: none;
        position: static;
        width: auto;
        padding: 0; }
      #teacher-student-info .tab_line_wrap .tab_flex li {
        min-width: auto;
        padding: 0; }
        #teacher-student-info .tab_line_wrap .tab_flex li + li {
          margin-left: 16px; }
    #teacher-student-info .new_layout .page_top {
      padding: 24px 20px 0; }
      #teacher-student-info .new_layout .page_top > button img {
        width: 14px; }
    #teacher-student-info .new_layout .twin_layout {
      height: auto;
      margin-top: 0;
      background-color: #ffffff; }
      #teacher-student-info .new_layout .twin_layout.first_560 .shadow_card:first-of-type {
        max-width: 100%; }
      #teacher-student-info .new_layout .twin_layout .shadow_card {
        width: 100%;
        border-radius: 0;
        box-shadow: none;
        padding: 20px 0; }
        #teacher-student-info .new_layout .twin_layout .shadow_card .card_title_area {
          padding: 0 20px;
          margin-bottom: 10px; }
          #teacher-student-info .new_layout .twin_layout .shadow_card .card_title_area .text {
            font-size: 13px;
            line-height: 20px;
            font-weight: 700;
            color: #24212e; }
          #teacher-student-info .new_layout .twin_layout .shadow_card .card_title_area .form_wrap .new_select,
          #teacher-student-info .new_layout .twin_layout .shadow_card .card_title_area .form_wrap .input_wrap {
            flex: 1;
            width: 50%; }
          #teacher-student-info .new_layout .twin_layout .shadow_card .card_title_area .form_wrap .new_select p {
            height: 34px;
            font-size: 13px;
            line-height: 20px;
            padding-top: 7px;
            padding-bottom: 7px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap; }
          #teacher-student-info .new_layout .twin_layout .shadow_card .card_title_area .form_wrap .input_wrap input[type='text'] {
            height: 34px;
            line-height: 32px;
            padding-top: 7px;
            padding-bottom: 7px; }
        #teacher-student-info .new_layout .twin_layout .shadow_card:nth-of-type(2) {
          display: none; }
        #teacher-student-info .new_layout .twin_layout .shadow_card .scroll_ul {
          border-top: 1px solid #e9e9ea;
          padding: 16px 20px; }
        #teacher-student-info .new_layout .twin_layout .shadow_card .contents {
          overflow-y: visible; }
          #teacher-student-info .new_layout .twin_layout .shadow_card .contents .new_table_wrap {
            overflow-y: visible; }
          #teacher-student-info .new_layout .twin_layout .shadow_card .contents .pagination-component {
            margin-bottom: 24px; }
    #teacher-student-info .page-inner {
      padding: 20px 0px 0;
      position: relative; }
      #teacher-student-info .page-inner .page-title {
        font-size: 22px;
        line-height: 32px;
        margin-bottom: 30px; }
        #teacher-student-info .page-inner .page-title img {
          margin-right: 8px; }
      #teacher-student-info .page-inner .table-search-bar {
        display: flex;
        align-items: flex-end;
        flex-direction: column;
        position: relative;
        margin-bottom: 20px; }
        #teacher-student-info .page-inner .table-search-bar .select-size {
          width: 100%;
          order: 2; }
        #teacher-student-info .page-inner .table-search-bar .long-bar {
          display: none;
          margin: 0 10px; }
        #teacher-student-info .page-inner .table-search-bar .btn-size {
          position: absolute;
          right: 0;
          top: -46px;
          width: 90px;
          order: 1px; }
          #teacher-student-info .page-inner .table-search-bar .btn-size button {
            border-radius: 10px; }
      #teacher-student-info .page-inner .table-white-box {
        position: relative;
        background: #ffffff;
        padding: 30px 30px 50px;
        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
        border-radius: 20px; }
        #teacher-student-info .page-inner .table-white-box .table-wrap table {
          width: 100%;
          margin-bottom: 90px; }
          #teacher-student-info .page-inner .table-white-box .table-wrap table thead tr {
            border-bottom: 0.5px solid #d3d3d5; }
            #teacher-student-info .page-inner .table-white-box .table-wrap table thead tr th {
              font-size: 15px;
              line-height: 22px;
              color: #a7a6ab;
              padding-bottom: 12px; }
          #teacher-student-info .page-inner .table-white-box .table-wrap table tbody {
            padding: 0 25px; }
            #teacher-student-info .page-inner .table-white-box .table-wrap table tbody tr {
              border-bottom: 1px solid #e9e9ea;
              cursor: pointer; }
              #teacher-student-info .page-inner .table-white-box .table-wrap table tbody tr td > p {
                max-width: 10vw;
                font-family: 'Inter', 'Noto Sans KR';
                font-weight: normal;
                font-size: 16px;
                color: #24212e;
                padding: 25px 0;
                text-align: center; }
              #teacher-student-info .page-inner .table-white-box .table-wrap table tbody tr td .student-name {
                display: flex;
                align-items: center;
                justify-content: flex-start; }
                #teacher-student-info .page-inner .table-white-box .table-wrap table tbody tr td .student-name .name-target {
                  display: flex;
                  align-items: center;
                  width: 100%; }
                  #teacher-student-info .page-inner .table-white-box .table-wrap table tbody tr td .student-name .name-target .user-img {
                    margin-left: 30px;
                    margin-right: 15px; }
                  #teacher-student-info .page-inner .table-white-box .table-wrap table tbody tr td .student-name .name-target .name p {
                    max-width: 10vw;
                    font-weight: 500;
                    font-size: 20px;
                    color: #24212e;
                    overflow: hidden; }
                  #teacher-student-info .page-inner .table-white-box .table-wrap table tbody tr td .student-name .name-target > img {
                    margin-left: 8px; }
              #teacher-student-info .page-inner .table-white-box .table-wrap table tbody tr td .current-class {
                display: flex;
                flex-direction: column; }
                #teacher-student-info .page-inner .table-white-box .table-wrap table tbody tr td .current-class p {
                  font-weight: 500;
                  font-size: 14px;
                  line-height: 21px;
                  text-align: center;
                  color: #09b9c6; }
        #teacher-student-info .page-inner .table-white-box .btn-size {
          display: flex;
          align-items: center;
          position: absolute;
          right: 74px;
          bottom: 95px;
          display: flex; }
          #teacher-student-info .page-inner .table-white-box .btn-size button {
            width: 211px; }
            #teacher-student-info .page-inner .table-white-box .btn-size button:first-of-type {
              margin-right: 20px; }
            #teacher-student-info .page-inner .table-white-box .btn-size button img {
              margin-left: 10px; } }

#mobile-student-info-list {
  display: flex;
  flex-direction: column;
  margin: 0 -16px;
  background: #fff;
  border-radius: 15px 15px 0 0; }
  #mobile-student-info-list .list-head {
    background: #fff;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
    padding: 20px 0 17px;
    border-bottom: 1px solid #e9e9ea; }
    #mobile-student-info-list .list-head p {
      font-weight: bold;
      font-size: 16px;
      line-height: 23px;
      color: #24212e;
      text-align: center; }
      #mobile-student-info-list .list-head p em {
        font-weight: bold;
        font-size: 16px;
        line-height: 23px;
        color: #0f9ba5;
        margin-left: 5px; }
  #mobile-student-info-list .list-body {
    background: red;
    overflow: hidden auto;
    background: #fff;
    padding: 20px 10px 20px 16px; }
    #mobile-student-info-list .list-body ul {
      display: flex;
      flex-direction: column;
      padding-bottom: 30px; }
      #mobile-student-info-list .list-body ul li {
        display: flex;
        align-items: center;
        margin-bottom: 25px; }
        #mobile-student-info-list .list-body ul li:last-of-type {
          margin-bottom: 0; }
        #mobile-student-info-list .list-body ul li .thumbnail {
          height: 44px;
          width: 44px;
          overflow: hidden;
          border-radius: 50%; }
        #mobile-student-info-list .list-body ul li .desc {
          margin-left: 9px; }
          #mobile-student-info-list .list-body ul li .desc .name {
            font-weight: bold;
            font-size: 14px;
            line-height: 20px;
            color: #24212e;
            margin-bottom: 3px; }
          #mobile-student-info-list .list-body ul li .desc .class {
            font-weight: bold;
            font-size: 12px;
            line-height: 17px;
            color: #09b9c6; }

#student-detail-info .page-container {
  margin-top: 123px; }

#student-detail-info .page-inner {
  padding: 70px 0 100px;
  width: 100%;
  max-width: 1210px;
  margin: 0 auto; }

#student-detail-info .page-title {
  font-size: 35px;
  font-weight: 700;
  color: #24212e;
  text-align: center; }

#student-detail-info .profile-img-wrap {
  margin: 50px 0 123px; }
  #student-detail-info .profile-img-wrap .profile-img {
    margin: 0 auto;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    position: relative; }
    #student-detail-info .profile-img-wrap .profile-img .edit_photo {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      position: absolute;
      right: 0;
      bottom: 0;
      background: #09b9c6 no-repeat center url("/img/icon/icon_camera_white.svg");
      cursor: pointer;
      background-size: auto; }
  #student-detail-info .profile-img-wrap .profile-name {
    font-size: 26px;
    font-weight: 500;
    color: #24212e;
    text-align: center;
    margin-top: 15px; }

#student-detail-info .profile-form > div:not(:last-of-type) {
  margin-bottom: 70px; }

#student-detail-info .profile-form .profile-form-title {
  font-size: 26px;
  font-weight: 700;
  color: #24212e;
  padding-bottom: 15px;
  border-bottom: 2px solid #09b9c6; }
  #student-detail-info .profile-form .profile-form-title span {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    color: #ff5050;
    margin-left: 10px; }

#student-detail-info .profile-form-cont {
  padding-top: 35px; }
  #student-detail-info .profile-form-cont li {
    display: flex;
    align-items: center; }
    #student-detail-info .profile-form-cont li:not(:last-of-type) {
      margin-bottom: 30px; }
    #student-detail-info .profile-form-cont li > div:first-of-type {
      font-size: 18px;
      font-weight: 500;
      color: #504d58;
      width: 150px;
      padding-right: 10px;
      display: flex;
      align-items: center; }
      #student-detail-info .profile-form-cont li > div:first-of-type img {
        margin-right: 6px; }
    #student-detail-info .profile-form-cont li > div:nth-of-type(2) {
      width: calc(100% - 150px); }

#student-detail-info .select_btn_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #d3d3d5; }
  #student-detail-info .select_btn_wrap .select {
    width: calc(100% - 134px); }

#student-detail-info .input_btn_wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid #d3d3d5; }
  #student-detail-info .input_btn_wrap .input-component-box {
    width: calc(100% - 134px); }
    #student-detail-info .input_btn_wrap .input-component-box .input-wrapper.input_line {
      border: 0; }
  #student-detail-info .input_btn_wrap button {
    margin-bottom: 10px; }

#student-detail-info .input_select_btn_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #d3d3d5; }
  #student-detail-info .input_select_btn_wrap .input_select {
    width: calc(100% - 134px);
    display: flex;
    align-items: center; }
    #student-detail-info .input_select_btn_wrap .input_select > span {
      display: inline-block;
      margin: 0 2px; }
  #student-detail-info .input_select_btn_wrap .input-component-box,
  #student-detail-info .input_select_btn_wrap .select {
    width: calc(50% - 10px); }
  #student-detail-info .input_select_btn_wrap .input-wrapper {
    border: 0;
    padding-bottom: 0; }

#student-detail-info .btn_line {
  width: 100px;
  height: 34px;
  border-radius: 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 400; }
  #student-detail-info .btn_line.red {
    color: #ff5050;
    border: 1px solid #ff5050; }
  #student-detail-info .btn_line.black {
    color: #504d58;
    border: 1px solid #504d58; }

#student-detail-info .btn_wrap {
  margin-top: 100px;
  display: flex;
  justify-content: center;
  gap: 10px; }
  #student-detail-info .btn_wrap button {
    width: 211px;
    padding: 18px;
    border-radius: 15px;
    box-shadow: 0px 3px 3px rgba(118, 129, 229, 0.3);
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    margin: 0; }
  #student-detail-info .btn_wrap .btn_withdrawal {
    color: #ff5050;
    border: 1px solid #ff5050; }
  #student-detail-info .btn_wrap .btn_save {
    color: #fff;
    background-color: #7681e5; }

@media screen and (max-width: 1210px) {
  #student-detail-info .page-inner {
    padding: 70px 16px 100px; } }

@media screen and (max-width: 1024px) {
  #student-detail-info .page-container {
    margin-top: 56px; }
  #student-detail-info .page-inner {
    padding: 30px 16px; }
  #student-detail-info .profile-img-wrap {
    margin: 0 0 40px; }
    #student-detail-info .profile-img-wrap .profile-img {
      width: 77px;
      height: 77px; }
      #student-detail-info .profile-img-wrap .profile-img img {
        width: 100%; }
      #student-detail-info .profile-img-wrap .profile-img .edit_photo {
        width: 30px;
        height: 30px; }
    #student-detail-info .profile-img-wrap .profile-name {
      font-size: 20px;
      margin-top: 10px; }
  #student-detail-info .profile-form > div:not(:last-of-type) {
    margin-bottom: 40px; }
  #student-detail-info .profile-form .profile-form-title {
    font-size: 16px;
    padding-bottom: 10px; }
  #student-detail-info .profile-form-cont {
    padding-top: 20px; }
    #student-detail-info .profile-form-cont li {
      flex-direction: column;
      align-items: flex-start;
      gap: 15px; }
      #student-detail-info .profile-form-cont li:not(:last-of-type) {
        margin-bottom: 25px; }
      #student-detail-info .profile-form-cont li.again_pw {
        gap: 0; }
      #student-detail-info .profile-form-cont li > div:first-of-type {
        font-size: 14px; }
      #student-detail-info .profile-form-cont li > div:nth-of-type(2) {
        width: 100%; }
      #student-detail-info .profile-form-cont li.ad_box {
        flex-direction: row; }
  #student-detail-info .input_btn_wrap .input-component-box,
  #student-detail-info .select_btn_wrap .select,
  #student-detail-info .input_select_btn_wrap .input_select {
    width: calc(100% - 100px); }
  #student-detail-info .btn_line {
    width: 80px;
    height: 35px;
    font-size: 13px; }
  #student-detail-info .btn_wrap button {
    width: 163px;
    font-size: 16px;
    border-radius: 10px; } }

@media screen and (max-width: 465px) {
  #student-detail-info .profile-form .profile-form-title span {
    display: block;
    margin-left: 0;
    margin-top: 10px; }
  #student-detail-info .btn_wrap {
    margin-top: 43px; } }

#class-report main.contentPlay {
  min-height: unset;
  height: unset;
  padding-top: 0; }

#class-report .page-inner {
  padding: 50px 48px;
  min-height: unset; }
  #class-report .page-inner .page-title {
    display: flex;
    align-items: center;
    font-size: 36px;
    line-height: 52px;
    color: #24212e;
    margin-bottom: 50px; }
    #class-report .page-inner .page-title img {
      margin-right: 10px; }
  #class-report .page-inner .class-report-main {
    min-height: calc(100vh - 592px); }
    #class-report .page-inner .class-report-main .long-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #ffffff;
      box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
      border-radius: 15px;
      padding: 15px 40px;
      margin-bottom: 20px; }
      #class-report .page-inner .class-report-main .long-bar h2 {
        font-size: 24px;
        line-height: 35px;
        /* identical to box height */
        /* Black */
        color: #24212e; }
      #class-report .page-inner .class-report-main .long-bar .select-size {
        width: 200px; }
    #class-report .page-inner .class-report-main .report-detail .list-box {
      width: 40%;
      background: #ffffff;
      box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
      border-radius: 20px;
      padding: 30px 24px; }
      #class-report .page-inner .class-report-main .report-detail .list-box ul {
        display: flex;
        flex-direction: column;
        gap: 25px;
        width: 100%;
        margin-bottom: 50px; }
        #class-report .page-inner .class-report-main .report-detail .list-box ul li {
          width: 100%;
          border: 1px solid #e4e6fa;
          box-sizing: border-box;
          border-radius: 15px;
          padding: 30px 24px;
          cursor: pointer; }
          #class-report .page-inner .class-report-main .report-detail .list-box ul li.on {
            padding: 29px 23px;
            border: 2px solid #e4e6fa;
            border: 2px solid #7681e5; }
          #class-report .page-inner .class-report-main .report-detail .list-box ul li .list-title {
            display: flex;
            align-items: center;
            margin-bottom: 30px; }
            #class-report .page-inner .class-report-main .report-detail .list-box ul li .list-title span {
              font-weight: 800;
              font-size: 12px;
              color: #7681e5;
              display: inline-block;
              background: #ffffff;
              border: 2px solid #7681e5;
              box-sizing: border-box;
              border-radius: 5px;
              padding: 4px 0;
              margin-right: 15px;
              text-align: center;
              min-width: 50px; }
              #class-report .page-inner .class-report-main .report-detail .list-box ul li .list-title span.pink {
                color: #ff84b0;
                border-color: #ff84b0; }
            #class-report .page-inner .class-report-main .report-detail .list-box ul li .list-title p {
              font-weight: 500;
              font-size: 18px;
              color: #24212e;
              width: calc(100% - 65px); }
          #class-report .page-inner .class-report-main .report-detail .list-box ul li .progress-box {
            display: flex;
            flex-direction: column;
            gap: 24px; }
            #class-report .page-inner .class-report-main .report-detail .list-box ul li .progress-box dl {
              display: flex; }
              #class-report .page-inner .class-report-main .report-detail .list-box ul li .progress-box dl dt {
                min-width: 110px;
                font-weight: 500;
                font-size: 14px;
                color: #504d58; }
              #class-report .page-inner .class-report-main .report-detail .list-box ul li .progress-box dl dd {
                display: flex;
                align-items: center;
                flex: 1;
                min-width: calc(100% - 110px);
                gap: 20px; }
                #class-report .page-inner .class-report-main .report-detail .list-box ul li .progress-box dl dd progress {
                  flex: 1;
                  -webkit-appearance: none; }
                  #class-report .page-inner .class-report-main .report-detail .list-box ul li .progress-box dl dd progress::-webkit-progress-bar {
                    border-radius: 50px;
                    background: #eff0f6; }
                  #class-report .page-inner .class-report-main .report-detail .list-box ul li .progress-box dl dd progress::-webkit-progress-value {
                    border-radius: 50px; }
                  #class-report .page-inner .class-report-main .report-detail .list-box ul li .progress-box dl dd progress.teal::-webkit-progress-value {
                    background-color: #09b9c6; }
                  #class-report .page-inner .class-report-main .report-detail .list-box ul li .progress-box dl dd progress.purple::-webkit-progress-value {
                    background-color: #7681e5; }
                  #class-report .page-inner .class-report-main .report-detail .list-box ul li .progress-box dl dd progress.pink::-webkit-progress-value {
                    background-color: #ff84b0; }
                #class-report .page-inner .class-report-main .report-detail .list-box ul li .progress-box dl dd span {
                  display: inline-block;
                  width: 90px;
                  font-weight: 500;
                  font-size: 16px;
                  color: #504d58; }
    #class-report .page-inner .class-report-main .report-detail .desc-box {
      width: calc(60% - 20px);
      margin-left: 20px;
      background: #ffffff;
      box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
      border-radius: 20px;
      padding: 30px 24px 30px 24px; }
      #class-report .page-inner .class-report-main .report-detail .desc-box.mo-desc-box {
        width: 100%;
        margin-left: 0;
        margin-top: 70px; }
      #class-report .page-inner .class-report-main .report-detail .desc-box .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 30px; }
        #class-report .page-inner .class-report-main .report-detail .desc-box .title .desc-title {
          display: flex;
          align-items: center;
          width: calc(100% - 300px); }
          #class-report .page-inner .class-report-main .report-detail .desc-box .title .desc-title span {
            font-weight: 800;
            font-size: 12px;
            color: #7681e5;
            display: inline-block;
            background: #ffffff;
            border: 2px solid #7681e5;
            box-sizing: border-box;
            border-radius: 5px;
            padding: 4px 0;
            margin-right: 15px;
            text-align: center;
            min-width: 50px; }
            #class-report .page-inner .class-report-main .report-detail .desc-box .title .desc-title span.pink {
              color: #ff84b0;
              border-color: #ff84b0; }
          #class-report .page-inner .class-report-main .report-detail .desc-box .title .desc-title p {
            font-weight: 500;
            font-size: 18px;
            color: #24212e;
            width: calc(100% - 65px); }
        #class-report .page-inner .class-report-main .report-detail .desc-box .title .input-form-box {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          gap: 30px;
          flex: 1; }
          #class-report .page-inner .class-report-main .report-detail .desc-box .title .input-form-box .select-size {
            width: 150px; }
      #class-report .page-inner .class-report-main .report-detail .desc-box .content {
        padding-right: 12px; }
        #class-report .page-inner .class-report-main .report-detail .desc-box .content ul {
          display: flex;
          flex-direction: column;
          gap: 20px; }
          #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li {
            border: 1px solid #d3d3d5;
            box-sizing: border-box;
            border-radius: 15px;
            padding: 20px 40px; }
            #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .current-index {
              display: flex;
              justify-content: center;
              align-items: center;
              margin-bottom: 20px; }
              #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .current-index span {
                min-width: max-content;
                padding: 10px 20px;
                border: 1px solid #09b9c6;
                box-sizing: border-box;
                border-radius: 50px;
                font-size: 16px;
                color: #09b9c6; }
            #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .q-title {
              margin-bottom: 20px; }
              #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .q-title h3 {
                font-size: 21px;
                color: #504d58;
                text-align: center; }
            #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .q-box .q {
              font-size: 24px;
              line-height: 60px;
              color: #504d58;
              text-align: center; }
            #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .a-box {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 40px; }
              #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .a-box .a {
                font-size: 20px;
                color: #504d58;
                text-align: center; }
              #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .a-box .answer-box {
                background: #ffffff;
                border: 2px solid #09b9c6;
                box-sizing: border-box;
                border-radius: 15px;
                font-size: 20px;
                text-align: center;
                color: #504d58;
                padding: 18px 75px 19px; }
            #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .answer-rate {
              display: flex;
              justify-content: center;
              gap: 40px;
              margin-top: 20px; }
              #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .answer-rate .answer-rate-closer {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                /* ios fixed 이슈 관련 */ }
                @media (orientation: landscape) {
                  #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .answer-rate .answer-rate-closer {
                    position: fixed; } }
                @media (orientation: portrait) {
                  #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .answer-rate .answer-rate-closer {
                    position: fixed; } }
              #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .answer-rate > div {
                display: flex;
                flex-direction: column;
                gap: 10px;
                position: relative;
                cursor: pointer; }
                #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .answer-rate > div p {
                  font-size: 15px;
                  text-align: center; }
                  #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .answer-rate > div p.cyan {
                    color: #09b9c6; }
                  #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .answer-rate > div p.pink {
                    color: #ff84b0; }
                #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .answer-rate > div .target-member {
                  width: 255px;
                  position: absolute;
                  top: 50px;
                  right: -30px;
                  background: #ffffff;
                  box-sizing: border-box;
                  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
                  border-radius: 10px;
                  padding: 20px 30px 0; }
                  #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .answer-rate > div .target-member:after {
                    content: '';
                    position: absolute;
                    top: -10px;
                    right: 40px;
                    width: 20px;
                    height: 20px;
                    background: #ffffff;
                    box-sizing: border-box;
                    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
                    transform: rotate(-45deg); }
                  #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .answer-rate > div .target-member .category {
                    display: flex;
                    align-items: center;
                    padding-bottom: 14px;
                    margin-bottom: 20px;
                    border-bottom: 1px solid #d3d3d5;
                    font-size: 20px; }
                    #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .answer-rate > div .target-member .category.cyan {
                      color: #09b9c6; }
                    #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .answer-rate > div .target-member .category.pink {
                      color: #ff84b0; }
                    #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .answer-rate > div .target-member .category img {
                      width: 20px;
                      height: 20px;
                      margin-right: 6px; }
                  #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .answer-rate > div .target-member .st-list {
                    display: flex;
                    flex-direction: column;
                    gap: 15px;
                    overflow: auto;
                    max-height: 180px;
                    margin-bottom: 30px; }
                    #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .answer-rate > div .target-member .st-list p {
                      font-size: 12px;
                      color: #7c7a82;
                      text-align: left; }
                      #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .answer-rate > div .target-member .st-list p em {
                        font-size: 18px;
                        color: #7c7a82;
                        margin-right: 6px; }
            #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .desc-box {
              display: flex;
              flex-direction: column;
              gap: 30px;
              width: 100%;
              border: 1px solid #d3d3d5;
              box-sizing: border-box;
              border-radius: 20px;
              padding: 30px 25px;
              margin-top: 40px; }
              #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .desc-box .row {
                display: flex;
                align-items: flex-start; }
                #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .desc-box .row .label {
                  display: inline-block;
                  box-sizing: border-box;
                  border-radius: 20px;
                  line-height: 23px;
                  padding: 5px 20px;
                  margin-right: 28px; }
                  #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .desc-box .row .label.desc {
                    border: 1px solid #09b9c6;
                    color: #09b9c6; }
                  #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .desc-box .row .label.comment {
                    border: 1px solid #7681e5;
                    color: #7681e5; }
                #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .desc-box .row p {
                  flex: 1;
                  font-size: 20px;
                  line-height: 29px;
                  color: #7c7a82; }
                  #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .desc-box .row p em {
                    font-weight: 700;
                    font-size: inherit;
                    line-height: inherit;
                    color: inherit; }
            #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .omr-box {
              display: flex;
              align-items: center; }
              #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .omr-box > .current-index {
                justify-content: flex-start;
                width: 20%;
                margin-bottom: 0; }
              #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .omr-box .rating-box {
                width: 80%; }
          #class-report .page-inner .class-report-main .report-detail .desc-box .content ul.page_dots {
            flex-direction: row;
            justify-content: center;
            gap: initial; }
            #class-report .page-inner .class-report-main .report-detail .desc-box .content ul.page_dots li {
              padding: 0; }
        #class-report .page-inner .class-report-main .report-detail .desc-box .content.report-content > div > #play-frame {
          transform: scale(0.8); }
        #class-report .page-inner .class-report-main .report-detail .desc-box .content.report-content > div:last-of-type > .answer-rate > div .target-member {
          top: initial;
          bottom: 75px;
          box-shadow: 0px 20px 30px rgba(92, 103, 201, 0.1); }
          #class-report .page-inner .class-report-main .report-detail .desc-box .content.report-content > div:last-of-type > .answer-rate > div .target-member:after {
            top: initial;
            bottom: -10px; }
        #class-report .page-inner .class-report-main .report-detail .desc-box .content.report-content > #play-frame {
          transform: scale(0.8); }
        #class-report .page-inner .class-report-main .report-detail .desc-box .content.report-content > .answer-rate {
          transform: scale(0.8); }
          #class-report .page-inner .class-report-main .report-detail .desc-box .content.report-content > .answer-rate:last-of-type > div .target-member {
            top: initial;
            bottom: 75px;
            box-shadow: 0px 20px 30px rgba(92, 103, 201, 0.1); }
            #class-report .page-inner .class-report-main .report-detail .desc-box .content.report-content > .answer-rate:last-of-type > div .target-member:after {
              top: initial;
              bottom: -10px; }
        #class-report .page-inner .class-report-main .report-detail .desc-box .content > .contentPlay {
          min-height: unset !important; }

@media screen and (max-width: 1024px) {
  #class-report .page-inner {
    padding: 30px 0 0; }
    #class-report .page-inner .page-title {
      display: none; }
    #class-report .page-inner .class-report-main {
      min-height: initial; }
      #class-report .page-inner .class-report-main .long-bar {
        padding: 13px; }
        #class-report .page-inner .class-report-main .long-bar h2 {
          font-size: 16px;
          width: calc(100% - 70px); }
        #class-report .page-inner .class-report-main .long-bar .select-size {
          width: 140px; }
      #class-report .page-inner .class-report-main .report-detail .list-box {
        width: 100%;
        padding: 0;
        background: #f9fafe; }
        #class-report .page-inner .class-report-main .report-detail .list-box ul li {
          border: 1px solid #cef1f4;
          box-shadow: 0px 3px 4px rgba(104, 154, 170, 0.3);
          padding: 15px; }
          #class-report .page-inner .class-report-main .report-detail .list-box ul li.on {
            border: 1px solid #cef1f4;
            box-shadow: 0px 3px 4px rgba(104, 154, 170, 0.3);
            padding: 15px; }
          #class-report .page-inner .class-report-main .report-detail .list-box ul li .progress-box dl dt {
            width: 23vw;
            min-width: 94px;
            font-size: 12px; }
          #class-report .page-inner .class-report-main .report-detail .list-box ul li .progress-box dl dd {
            width: 50vw;
            gap: initial;
            min-width: calc(100% - 94px); }
            #class-report .page-inner .class-report-main .report-detail .list-box ul li .progress-box dl dd span {
              width: 50%;
              max-width: 90px;
              font-size: 13px;
              text-align: right; }
      #class-report .page-inner .class-report-main .report-detail .desc-box {
        width: 100%;
        padding: 30px 16px; }
        #class-report .page-inner .class-report-main .report-detail .desc-box.mo-desc-box {
          margin-top: 0; }
        #class-report .page-inner .class-report-main .report-detail .desc-box .title {
          justify-content: flex-end; }
        #class-report .page-inner .class-report-main .report-detail .desc-box .content {
          padding: 0; } }

@media screen and (max-width: 1024px) {
  #class-report .page-inner .class-report-main .long-bar .select-size .select .select-input {
    padding: 0 10px; }
  #class-report .page-inner .class-report-main .long-bar .select-size .select img {
    right: 10px; }
  #class-report .page-inner .class-report-main .report-detail .desc-box .title {
    margin-bottom: 10px; }
    #class-report .page-inner .class-report-main .report-detail .desc-box .title .input-form-box {
      gap: 10px; }
  #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li {
    padding: 15px 23px; }
    #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .current-index span {
      font-size: 12px;
      padding: 6px 16px; }
    #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .q-title h3 {
      font-size: 14px; }
    #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .q-box .q {
      font-size: 15px;
      line-height: 22.5px; }
    #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .a-box {
      gap: 15px;
      margin-top: 15px; }
      #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .a-box img {
        width: 24px;
        height: 24px; }
      #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .a-box .a {
        font-size: 12px; }
      #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .a-box .answer-box {
        font-size: 12px;
        padding: 15px 17px; }
    #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .answer-rate > div img {
      width: 32px;
      height: 32px; }
    #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .answer-rate > div p {
      font-size: 14px; }
    #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .omr-box {
      flex-direction: column; }
      #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .omr-box > .current-index {
        justify-content: center; }
      #class-report .page-inner .class-report-main .report-detail .desc-box .content ul li .omr-box .rating-box {
        width: 100%; } }

#withdraw .page-title {
  margin-bottom: 80px; }

#withdraw .profile-form-title.desc {
  font-size: 18px;
  font-weight: 500;
  color: #504d58;
  padding: 30px 0;
  position: relative;
  padding-left: 15px; }
  #withdraw .profile-form-title.desc::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    background-color: #504d58;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); }

#withdraw .profile-form-cont {
  padding-top: 0; }
  #withdraw .profile-form-cont li {
    padding: 30px 0; }
    #withdraw .profile-form-cont li:not(:last-of-type) {
      margin-bottom: 0; }
    #withdraw .profile-form-cont li h1 {
      width: 140px;
      font-size: 18px;
      font-weight: 500;
      color: #504d58; }
    #withdraw .profile-form-cont li > div {
      width: calc(100% - 140px);
      padding: 0; }
      #withdraw .profile-form-cont li > div .select {
        width: 100%; }
    #withdraw .profile-form-cont li .reason_box {
      width: 100%;
      height: 374px; }
      #withdraw .profile-form-cont li .reason_box textarea {
        width: 100%;
        height: 100%;
        padding: 25px;
        color: #504d58;
        border: 1px solid #a7a6ab;
        border-radius: 10px; }
    #withdraw .profile-form-cont li.confirm_area {
      justify-content: center; }
      #withdraw .profile-form-cont li.confirm_area label {
        font-size: 16px;
        font-weight: 500;
        color: #504d58; }
  #withdraw .profile-form-cont .confirm_pw_area .input-component-box {
    width: calc(100% - 165px);
    max-width: 600px; }
  #withdraw .profile-form-cont .confirm_pw_area button {
    min-width: 134px;
    height: 48px;
    padding: 14px;
    font-size: 14px;
    font-weight: 400;
    color: #504d58;
    text-align: center;
    border: 1px solid #504d58;
    border-radius: 10px;
    margin-left: 29px; }

#withdraw .btn_wrap2 {
  margin-top: 70px;
  display: flex;
  justify-content: center;
  gap: 10px; }
  #withdraw .btn_wrap2 button {
    width: 211px;
    margin: 0; }

@media screen and (max-width: 1024px) {
  #withdraw.change_info .page-inner {
    padding: 30px 16px; }
  #withdraw.change_info .profile-form .profile-form-title {
    font-size: 14px;
    padding-bottom: 7px;
    line-height: 1.45; }
    #withdraw.change_info .profile-form .profile-form-title.desc {
      font-size: 12px;
      line-height: 1.7;
      padding: 7px 0 7px 20px;
      word-break: break-all; }
      #withdraw.change_info .profile-form .profile-form-title.desc::before {
        width: 4px;
        height: 4px;
        left: 6px;
        top: 18px; }
  #withdraw.change_info .profile-form-cont li {
    padding: 0;
    gap: 8px; }
    #withdraw.change_info .profile-form-cont li:nth-of-type(2n-1) {
      padding-top: 10px; }
    #withdraw.change_info .profile-form-cont li:nth-of-type(2n) {
      padding-top: 20px; }
    #withdraw.change_info .profile-form-cont li h1 {
      font-size: 14px; }
    #withdraw.change_info .profile-form-cont li > div {
      width: 100%;
      padding-right: 0;
      padding: 0; }
    #withdraw.change_info .profile-form-cont li .confirm_pw_area {
      width: 100%;
      justify-content: space-between;
      gap: 9px;
      padding: 0; }
      #withdraw.change_info .profile-form-cont li .confirm_pw_area .input-component-box {
        width: calc(100% - 116px);
        max-width: none; }
      #withdraw.change_info .profile-form-cont li .confirm_pw_area button {
        min-width: 107px;
        padding: 13px 11px;
        font-size: 12px;
        margin-left: 0; }
    #withdraw.change_info .profile-form-cont li .reason_box textarea {
      padding: 15px 13px; }
    #withdraw.change_info .profile-form-cont li.confirm_area {
      align-items: center;
      padding: 20px 0 0; }
      #withdraw.change_info .profile-form-cont li.confirm_area label {
        font-size: 12px; }
  #withdraw.change_info .btn_wrap2 {
    margin-top: 32px; }
    #withdraw.change_info .btn_wrap2 button {
      width: 165px;
      height: 50px;
      font-size: 16px; } }

main.not-valid-link-pg {
  height: calc(100vh - 267px); }
  main.not-valid-link-pg .page-inner {
    height: 100%; }

.not-valid > * {
  text-align: center; }

.not-valid h1 {
  font-size: 35px;
  font-weight: 700;
  color: #24212e; }

.not-valid p {
  font-size: 16px;
  font-weight: 400;
  color: #7c7a82;
  opacity: 0.6;
  margin: 10px 0 70px; }

@media screen and (max-width: 480px) {
  .not-valid h1 {
    font-size: 22px; }
  .not-valid p {
    font-size: 14px;
    margin-bottom: 50px; }
  .not-valid button {
    border-radius: 10px; } }

.payment {
  background: #f8f9fa;
  margin-top: 60px; }
  .payment .page-inner {
    padding: 70px 0 80px;
    width: 100%;
    max-width: 1210px;
    margin: 0 auto; }
  .payment .pay-cont-gap {
    display: flex;
    flex-direction: column; }
    .payment .pay-cont-gap > *:not(:last-child) {
      margin-bottom: 72px; }
      .payment .pay-cont-gap > *:not(:last-child).page-title {
        margin-bottom: 28px; }
  .payment .page-title {
    font-weight: 700;
    color: #24212e;
    font-size: 28px;
    line-height: 42px; }
    .payment .page-title img {
      width: 28px;
      margin-right: 12px;
      vertical-align: bottom;
      transform: translateY(-5px); }
  .payment .pay_name {
    font-size: 22px;
    line-height: 32px;
    font-weight: 700;
    color: #24212e;
    margin-bottom: 24px;
    align-items: end; }
    .payment .pay_name .inherit {
      position: relative;
      font: inherit;
      color: inherit; }
      .payment .pay_name .inherit img {
        margin-left: 6px;
        cursor: pointer; }
    .payment .pay_name .last {
      color: #504d58;
      font-size: 16px;
      font-weight: 700;
      line-height: 24px; }
    .payment .pay_name span {
      font-size: 12px;
      color: #a7a6ab;
      margin-left: 15px; }
  .payment input[type='radio'] + label i {
    width: 16px;
    height: 16px;
    border: 1px solid #d3d3d5;
    margin: 0;
    cursor: pointer; }
  .payment input[type='radio']:disabled + label i {
    border: 1px #dfdfe4;
    background: #e9e9ea; }
  .payment input[type='radio']:checked + label i {
    border: 1px solid #7c7a82; }
    .payment input[type='radio']:checked + label i::after {
      width: 10px;
      height: 10px;
      background: #7c7a82; }
  .payment .premium_box {
    padding: 40px 30px 30px;
    border-radius: 10px;
    background: #09b9c6; }
    .payment .premium_box h1 {
      font-size: 40px;
      font-weight: bold;
      font-family: 'Inter', 'Noto Sans KR';
      color: #fff;
      margin-bottom: 39px; }
    .payment .premium_box .premium_detail {
      padding: 24px 25px 27px;
      border-radius: 10px;
      background-color: #fff; }
      .payment .premium_box .premium_detail > div {
        display: flex;
        width: 100%;
        max-width: 860px;
        justify-content: space-between; }
      .payment .premium_box .premium_detail ul {
        width: 50%; }
        .payment .premium_box .premium_detail ul:nth-of-type(1) {
          max-width: 392px; }
        .payment .premium_box .premium_detail ul:nth-of-type(2) {
          max-width: 298px; }
      .payment .premium_box .premium_detail .premium_name {
        height: 53px;
        padding-bottom: 15px;
        border-bottom: 1px solid #09b9c6;
        display: flex;
        justify-content: space-between;
        align-items: center; }
        .payment .premium_box .premium_detail .premium_name > div:first-of-type {
          font-size: 20px;
          font-weight: 500;
          color: #24212e; }
        .payment .premium_box .premium_detail .premium_name > div:nth-of-type(2) {
          display: flex;
          gap: 10px; }
          .payment .premium_box .premium_detail .premium_name > div:nth-of-type(2) button {
            display: block;
            width: 100px;
            padding: 10px;
            font-size: 13px;
            font-weight: 500;
            color: #504d58;
            text-align: center;
            border-radius: 5px;
            border: 1px solid #504d58; }
      .payment .premium_box .premium_detail .premium_sum {
        display: flex;
        align-items: center;
        gap: 15px;
        margin: 15px 0 26px; }
        .payment .premium_box .premium_detail .premium_sum > div:nth-of-type(1) {
          font-size: 45px;
          font-weight: 800;
          color: #24212e;
          font-family: 'Inter', 'Noto Sans KR'; }
          .payment .premium_box .premium_detail .premium_sum > div:nth-of-type(1) span {
            font-size: inherit;
            font-weight: inherit;
            font-family: inherit;
            color: transparent;
            background-clip: text;
            background: linear-gradient(90deg, #35e87c 0%, #34b3e9 100%);
            -webkit-background-clip: text !important; }
        .payment .premium_box .premium_detail .premium_sum p {
          font-size: 22px;
          font-weight: 700;
          font-family: 'Inter', 'Noto Sans KR';
          color: #7c7a82; }
      .payment .premium_box .premium_detail .premium_date {
        font-size: 16px;
        color: #7c7a82; }
        .payment .premium_box .premium_detail .premium_date:not(:first-of-type) {
          margin-top: 5px; }
      .payment .premium_box .premium_detail .premium_party {
        display: flex;
        gap: 30px;
        margin-top: 5px; }
        .payment .premium_box .premium_detail .premium_party > div {
          font-size: 15px;
          font-weight: 500;
          color: #7c7a82;
          position: relative; }
          .payment .premium_box .premium_detail .premium_party > div span {
            font-size: 18px;
            font-weight: 700;
            color: #7c7a82;
            margin-left: 5px; }
          .payment .premium_box .premium_detail .premium_party > div:first-of-type::after {
            content: '';
            display: inline-block;
            width: 2px;
            height: 18px;
            background-color: #7c7a82;
            margin: 0 15px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%); }
      .payment .premium_box .premium_detail .premium_coupon {
        font-size: 45px;
        font-weight: 500;
        color: #09b9c6;
        line-height: 1.45;
        margin-top: 6px; }
  .payment .premium_box.voca {
    background: #7681e5; }
    .payment .premium_box.voca .premium_detail .premium_name {
      border-bottom: 1px solid #7681e5; }
    .payment .premium_box.voca .premium_detail .premium_sum > div:nth-of-type(1) span {
      background: linear-gradient(90deg, #35bde8 0%, #af34e9 100%); }
    .payment .premium_box.voca .premium_detail .premium_coupon {
      color: #7681e5; }
  .payment .free_box {
    padding: 30px;
    border-radius: 10px;
    background-color: #09b9c6;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .payment .free_box div {
      display: flex;
      align-items: center; }
      .payment .free_box div:first-of-type {
        gap: 20px; }
        .payment .free_box div:first-of-type h1 {
          font-size: 40px;
          font-weight: bold;
          color: #fff;
          font-family: 'Inter', 'Noto Sans KR'; }
        .payment .free_box div:first-of-type button {
          padding: 8px 30px;
          border: 1px solid #fff;
          border-radius: 50px;
          font-size: 14px;
          font-weight: 500;
          color: #fff; }
      .payment .free_box div:nth-of-type(2) {
        display: flex;
        align-items: center;
        gap: 14px; }
        .payment .free_box div:nth-of-type(2) p {
          color: #fff; }
          .payment .free_box div:nth-of-type(2) p:nth-of-type(1) {
            font-size: 20px;
            font-weight: 500; }
          .payment .free_box div:nth-of-type(2) p:nth-of-type(2) {
            font-size: 45px;
            font-weight: 500;
            font-family: 'Inter', 'Noto Sans KR'; }
  .payment .card_wrap ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap; }
    .payment .card_wrap ul li {
      transition: scale 0.4s;
      margin-bottom: 20px;
      cursor: pointer;
      min-height: 200px;
      display: flex;
      align-items: center; }
      .payment .card_wrap ul li .card-box {
        position: relative; }
        .payment .card_wrap ul li .card-box .card-img {
          width: 100%;
          box-shadow: 0px 4.02235px 16.0894px rgba(0, 0, 0, 0.15); }
        .payment .card_wrap ul li .card-box .card-delete {
          display: none;
          position: absolute;
          top: 8px;
          right: 33px; }
        .payment .card_wrap ul li .card-box .card-like {
          width: 13px;
          height: 13px;
          position: absolute;
          top: 10px;
          right: 10px; }
      .payment .card_wrap ul li .add-card {
        width: 233px;
        height: 144px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0px 4.02235px 16.0894px rgba(0, 0, 0, 0.15);
        position: relative; }
        .payment .card_wrap ul li .add-card .card-plus {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%); }
      .payment .card_wrap ul li:not(:last-of-type) {
        margin-right: 20px; }
      .payment .card_wrap ul li.active > div {
        width: 280px; }
      .payment .card_wrap ul li.active .card-delete {
        display: block; }
  .payment .p_history .pay_name .inherit > img {
    transform: translateY(2px); }
  .payment .p_history .ph_wrap {
    padding: 32px;
    border-radius: 8px;
    border: 1px solid #e9e9ea;
    background: #fff; }
    .payment .p_history .ph_wrap .select {
      min-height: 36px; }
      .payment .p_history .ph_wrap .select > .select-input {
        height: 36px;
        border-color: #dfdfe4;
        padding: 0 12px; }
      .payment .p_history .ph_wrap .select .select-options {
        top: 35px;
        border-color: #dfdfe4; }
    .payment .p_history .ph_wrap .date-picker > .input {
      height: 36px;
      border-color: #dfdfe4;
      padding-left: 12px; }
    .payment .p_history .ph_wrap .new_table_wrap .new_table:not(:first-child) {
      margin-top: 20px; }
    .payment .p_history .ph_wrap .new_table_wrap thead tr th {
      font-family: 'Noto Sans KR', sans-serif;
      font-weight: 500;
      padding: 9px 16px 10px;
      border-top: none;
      border-bottom: none; }
      .payment .p_history .ph_wrap .new_table_wrap thead tr th:not(:first-of-type) {
        border-left: 1px solid #e9e9ea; }
    .payment .p_history .ph_wrap .new_table_wrap tbody tr:last-child td.nodata_td {
      border-bottom: none;
      padding-bottom: 22px; }
    .payment .p_history .ph_wrap .new_table_wrap tbody td {
      font-family: 'Noto Sans KR', sans-serif;
      padding: 13px 16px 14px; }
      .payment .p_history .ph_wrap .new_table_wrap tbody td.nodata_td {
        padding-top: 48px;
        padding-bottom: 48px;
        font-size: 14px;
        line-height: 22px;
        font-weight: 400;
        color: #a7a6ab; }
      .payment .p_history .ph_wrap .new_table_wrap tbody td .link {
        text-underline-offset: 2px; }
  .payment .p_history .ph_table {
    display: flex;
    flex-direction: column; }
    .payment .p_history .ph_table > *:not(:first-child) {
      margin-bottom: 20px; }
    .payment .p_history .ph_table.nodata {
      gap: 0; }
  .payment .p_history .set_date {
    margin-bottom: 20px; }
    .payment .p_history .set_date .select {
      width: 120px; }
      .payment .p_history .set_date .select > .select-input {
        font-size: 13px;
        border-radius: 8px; }
        .payment .p_history .set_date .select > .select-input.has-border {
          border-radius: 8px 8px 0 0; }
      .payment .p_history .set_date .select > .select-options {
        border-radius: 0 0 8px 8px; }
    .payment .p_history .set_date .datepicker_wrap {
      gap: 8px; }
    .payment .p_history .set_date .date-picker > .input {
      width: 160px;
      font-size: 13px;
      border-radius: 8px;
      background-position: right 8px center; }
    .payment .p_history .set_date .input-component-box {
      margin-right: 8px; }
      .payment .p_history .set_date .input-component-box .input-wrapper {
        border-radius: 8px; }
  .payment .set_date {
    display: flex;
    align-items: center;
    margin-bottom: 30px; }
    .payment .set_date p {
      font-size: 14px;
      line-height: 22px;
      color: #504d58;
      margin-right: 16px; }
    .payment .set_date .select {
      width: 150px;
      border-color: #6bd5dd;
      margin-right: 8px; }
      .payment .set_date .select .select-input {
        border-color: #09b9c6; }
    .payment .set_date .datepicker_wrap {
      display: flex;
      gap: 12px;
      align-items: center; }
      .payment .set_date .datepicker_wrap span {
        color: #6bd5dd; }
    .payment .set_date .input-component-box .input-wrapper {
      height: 34px;
      padding: 0 12px;
      border-color: #d3d3d5; }
      .payment .set_date .input-component-box .input-wrapper input {
        font-size: 14px;
        font-weight: 400; }
  .payment .regist_coupon {
    margin-bottom: 20px;
    position: relative; }
    .payment .regist_coupon .input-component-box .input-wrapper {
      height: 60px;
      border-color: #adb3ef;
      border-radius: 15px; }
      .payment .regist_coupon .input-component-box .input-wrapper input {
        width: calc(100% - 215px); }
    .payment .regist_coupon .btn_coupon {
      position: absolute;
      right: 0;
      top: 0;
      line-height: 60px;
      padding: 0 64px;
      background: #7681e5;
      box-shadow: 0px 3px 3px rgba(118, 129, 229, 0.3);
      border-radius: 15px;
      font-size: 20px;
      font-weight: 700;
      color: #fff; }
  .payment .ph_th {
    display: flex;
    border-top: 1px solid #d3d3d5;
    padding: 17px 0; }
    .payment .ph_th li {
      display: block;
      font-size: 15px;
      color: #a7a6ab;
      flex: 1;
      text-align: center; }
      .payment .ph_th li.ph_buy {
        flex: 1.5; }
      .payment .ph_th li.ph_btn {
        flex: 1.5; }
  .payment .ph_tr {
    border: 1px solid #cef1f4;
    border-radius: 20px; }
    .payment .ph_tr.active {
      border: 2px solid #09b9c6;
      background: #fbfcff; }
      .payment .ph_tr.active .ph_td {
        padding: 33px 1px 33px; }
      .payment .ph_tr.active .ph_btn img {
        transform: rotate(180deg); }
    .payment .ph_tr.nodata {
      border: 0;
      border-top: 1px solid #d3d3d5;
      border-radius: 0; }
      .payment .ph_tr.nodata li {
        padding: 56px 0 60px;
        font-size: 15px;
        color: #a7a6ab;
        text-align: center; }
  .payment .ph_td {
    padding: 34px 2px;
    display: flex;
    align-items: center; }
    .payment .ph_td li {
      flex: 1;
      text-align: center;
      font-size: 16px;
      font-weight: 500;
      color: #504d58; }
      .payment .ph_td li label {
        justify-content: center; }
      .payment .ph_td li.ph_buy {
        flex: 1.5;
        text-align: left;
        font-size: 20px;
        font-weight: 700;
        color: #504d58; }
      .payment .ph_td li.ph_btn {
        flex: 1.5;
        text-align: right; }
        .payment .ph_td li.ph_btn img {
          margin: 0 30px;
          transition: rotate 0.21s;
          cursor: pointer; }
  .payment .ph_detail {
    border-top: 1px solid #e9e9ea;
    padding-top: 25px;
    padding-left: 4%;
    padding-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px; }
    .payment .ph_detail li {
      display: flex;
      align-items: center; }
      .payment .ph_detail li div:first-of-type {
        width: 130px;
        font-size: 15px;
        font-weight: 400;
        color: #a7a6ab; }
      .payment .ph_detail li div:nth-of-type(2) {
        font-size: 16px;
        font-weight: 500;
        font-family: 'Inter', 'Noto Sans KR';
        color: #504d58; }
      .payment .ph_detail li button {
        margin-left: 30px; }
  .payment .ph_refund {
    border-top: 1px dashed #e9e9ea;
    padding-top: 25px;
    padding-left: 4%;
    padding-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px; }
    .payment .ph_refund li {
      display: flex;
      align-items: center; }
      .payment .ph_refund li div:first-of-type {
        width: 130px;
        font-size: 15px;
        font-weight: 400;
        color: #ff5050; }
      .payment .ph_refund li div:nth-of-type(2) {
        font-size: 16px;
        font-weight: 500;
        font-family: 'Inter', 'Noto Sans KR';
        color: #ff5050; }
      .payment .ph_refund li button {
        margin-left: 30px; }
  .payment .btn_openbill {
    padding: 6px 13px;
    background-color: #fff;
    border: 1px solid #7c7a82;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    color: #7c7a82; }
    .payment .btn_openbill.disabled {
      /*
      background: #f5f5f7;
      border: 1px solid #d3d3d5;
      color: #d3d3d5;
      */
      background: #e9e9ea;
      border: 1px solid #dfdfe4;
      color: #dfdfe4;
      cursor: initial; }
  .payment .coupon_history .ph_th li.th_coupon {
    flex: 2.5;
    padding-left: 20px; }
  .payment .coupon_history .ph_th li.th_deadline {
    flex: 1.5; }
  .payment .coupon_history .ph_tr.active {
    background-color: transparent; }
  .payment .coupon_history .ph_td li.td_sale {
    font-size: 20px;
    font-weight: 700;
    color: #504d58;
    font-family: 'Inter', 'Noto Sans KR'; }
  .payment .coupon_history .ph_td li.td_coupon {
    flex: 2.5;
    text-align: left;
    font-size: 16px;
    font-weight: 500;
    color: #24212e;
    padding-left: 20px; }
  .payment .coupon_history .ph_td li.td_deadline {
    flex: 1.5;
    font-size: 16px;
    font-weight: 500;
    color: #504d58;
    font-family: 'Inter', 'Noto Sans KR'; }
  .payment .coupon_history .ph_td .coupon_expired {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    color: #7c7a82;
    margin-left: 50px; }
  .payment .coupon_title_box {
    display: flex;
    align-items: center;
    margin-bottom: 40px; }
    .payment .coupon_title_box .pay_name {
      margin-bottom: 0; }
  .payment .tooltip_area {
    margin-left: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #7c7a82;
    cursor: pointer;
    position: relative;
    padding-top: 10px; }
    .payment .tooltip_area img {
      margin-right: 5px; }
    .payment .tooltip_area:hover .tooltip_box {
      display: block; }
  .payment .tooltip_box {
    display: none;
    min-width: 509px;
    padding: 20px 24px;
    background-color: #fff;
    border: 1px solid #e9e9ea;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    position: absolute;
    left: -90px;
    top: 55px;
    z-index: 101; }
    .payment .tooltip_box::before {
      content: '';
      display: block;
      width: 30px;
      height: 30px;
      background-color: #fff;
      position: absolute;
      top: -5px;
      left: 36px;
      transform: rotate(45deg) translateY(-50%);
      border-top: 1px solid #e9e9ea;
      border-left: 1px solid #e9e9ea; }
    .payment .tooltip_box h1 {
      font-size: 20px;
      font-weight: 700;
      color: #24212e;
      border-bottom: 1px solid #d3d3d5;
      padding-bottom: 16px;
      margin-bottom: 16px; }
    .payment .tooltip_box ul {
      padding-left: 20px; }
      .payment .tooltip_box ul li {
        font-size: 14px;
        font-weight: 400;
        color: #000;
        line-height: 1.7;
        padding: 0;
        border: 0;
        display: list-item;
        list-style-type: disc;
        list-style-position: inside;
        text-indent: -20px; }
  .payment .coupon_comment {
    font-size: 12px;
    color: #a7a6ab; }

.txt_red {
  color: #ff5050 !important; }

@media screen and (max-width: 1210px) {
  .payment .page-inner {
    padding: 70px 16px 120px; } }

@media screen and (max-width: 1024px) {
  .payment .coupon_history .ph_td .coupon_expired {
    display: block;
    margin: 10px 0 0 0; } }

@media screen and (max-width: 850px) {
  .payment .premium_box .premium_detail > div {
    flex-direction: column;
    gap: 30px; }
    .payment .premium_box .premium_detail > div ul {
      width: 100% !important;
      max-width: 100% !important; } }

.p_history .ph_table_data .ph_thead,
.p_history .ph_table_data .ph_tbody_list .list_info .transform_div {
  display: flex;
  align-items: center;
  flex-wrap: wrap; }
  .p_history .ph_table_data .ph_thead > div,
  .p_history .ph_table_data .ph_tbody_list .list_info .transform_div > div {
    flex: 1;
    text-align: center; }
    .p_history .ph_table_data .ph_thead > div.date,
    .p_history .ph_table_data .ph_tbody_list .list_info .transform_div > div.date {
      min-width: 135px;
      flex: initial; }
    .p_history .ph_table_data .ph_thead > div.size100,
    .p_history .ph_table_data .ph_tbody_list .list_info .transform_div > div.size100 {
      min-width: 100px;
      flex: initial; }
    .p_history .ph_table_data .ph_thead > div.size200,
    .p_history .ph_table_data .ph_tbody_list .list_info .transform_div > div.size200 {
      min-width: 200px;
      flex: initial; }
    .p_history .ph_table_data .ph_thead > div.ph_btn,
    .p_history .ph_table_data .ph_tbody_list .list_info .transform_div > div.ph_btn {
      width: 70px;
      flex: initial; }
      .p_history .ph_table_data .ph_thead > div.ph_btn img,
      .p_history .ph_table_data .ph_tbody_list .list_info .transform_div > div.ph_btn img {
        margin-left: 30px; }

.p_history .ph_table_data .ph_thead {
  padding: 0 30px;
  border-top: 1px solid #e9e9ea;
  border-bottom: 1px solid #e9e9ea;
  background-color: #fcfdfd; }
  .p_history .ph_table_data .ph_thead > div {
    padding: 17px 0;
    font-size: 15px;
    color: #a7a6ab; }

.p_history .ph_table_data .ph_tbody .ph_tbody_list {
  padding: 34px 30px;
  border: 2px solid #cef1f4;
  border-radius: 20px;
  box-sizing: border-box; }
  .p_history .ph_table_data .ph_tbody .ph_tbody_list:not(:last-of-type) {
    margin-bottom: 20px; }
  .p_history .ph_table_data .ph_tbody .ph_tbody_list.active {
    border: 2px solid #09b9c6;
    background: #fbfcff; }
  .p_history .ph_table_data .ph_tbody .ph_tbody_list > .list_info {
    display: flex;
    flex-wrap: wrap;
    align-items: center; }
    .p_history .ph_table_data .ph_tbody .ph_tbody_list > .list_info .transform_div {
      flex: 1; }
      .p_history .ph_table_data .ph_tbody .ph_tbody_list > .list_info .transform_div div {
        font-size: 16px;
        font-weight: 500; }
        .p_history .ph_table_data .ph_tbody .ph_tbody_list > .list_info .transform_div div.mainContent {
          font-size: 20px;
          font-weight: 700;
          color: #24212e; }
          .p_history .ph_table_data .ph_tbody .ph_tbody_list > .list_info .transform_div div.mainContent .coupon_expired {
            font-size: 14px;
            font-weight: 500;
            color: #7c7a82;
            margin-left: 50px; }
  .p_history .ph_table_data .ph_tbody .ph_tbody_list .ph_btn {
    flex: initial; }
    .p_history .ph_table_data .ph_tbody .ph_tbody_list .ph_btn img {
      margin-left: 30px; }
  .p_history .ph_table_data .ph_tbody .ph_tbody_list .detail_info {
    margin: 33px -30px 0;
    padding: 25px 0 0 50px;
    border-top: 1px solid #e9e9ea; }
    .p_history .ph_table_data .ph_tbody .ph_tbody_list .detail_info dl {
      display: flex; }
      .p_history .ph_table_data .ph_tbody .ph_tbody_list .detail_info dl:not(:last-of-type) {
        margin-bottom: 20px; }
      .p_history .ph_table_data .ph_tbody .ph_tbody_list .detail_info dl dt {
        min-width: 130px;
        font-size: 15px;
        font-weight: 400;
        color: #a7a6ab; }
      .p_history .ph_table_data .ph_tbody .ph_tbody_list .detail_info dl dd {
        font-size: 16px;
        font-weight: 500;
        color: #504d58; }
        .p_history .ph_table_data .ph_tbody .ph_tbody_list .detail_info dl dd button {
          margin-left: 30px; }
          .p_history .ph_table_data .ph_tbody .ph_tbody_list .detail_info dl dd button + button {
            margin-left: 10px; }
  .p_history .ph_table_data .ph_tbody .ph_tbody_list .detail_info_refund {
    margin: 33px -30px 0;
    padding: 25px 0 0 50px;
    border-top: 1px dashed #e9e9ea; }
    .p_history .ph_table_data .ph_tbody .ph_tbody_list .detail_info_refund dl {
      display: flex; }
      .p_history .ph_table_data .ph_tbody .ph_tbody_list .detail_info_refund dl:not(:last-of-type) {
        margin-bottom: 20px; }
      .p_history .ph_table_data .ph_tbody .ph_tbody_list .detail_info_refund dl dt {
        min-width: 130px;
        font-size: 15px;
        font-weight: 400;
        color: #ff5050; }
      .p_history .ph_table_data .ph_tbody .ph_tbody_list .detail_info_refund dl dd {
        font-size: 16px;
        font-weight: 500;
        color: #ff5050; }
        .p_history .ph_table_data .ph_tbody .ph_tbody_list .detail_info_refund dl dd button {
          margin-left: 30px; }

@media screen and (max-width: 1024px) {
  .payment {
    margin-top: 48px; }
    .payment .page-inner {
      padding: 20px 0;
      gap: initial; }
      .payment .page-inner .page-title {
        font-size: 22px;
        font-weight: 700;
        color: #24212e;
        padding: 0 16px;
        margin-bottom: 30px; }
        .payment .page-inner .page-title img {
          width: 21px;
          margin-right: 8px;
          vertical-align: bottom; }
      .payment .page-inner .credit_list .pay_name {
        font-size: 20px;
        padding: 0 16px;
        margin: 40px 0 0; }
      .payment .page-inner .p_history .pay_name {
        font-size: 20px;
        padding: 0 16px;
        margin: 0px 0 20px; }
      .payment .page-inner .p_history .ph_wrap {
        padding: 30px 15px;
        margin-bottom: 40px; }
        .payment .page-inner .p_history .ph_wrap .set_date {
          flex-wrap: wrap; }
          .payment .page-inner .p_history .ph_wrap .set_date > * {
            margin-bottom: 10px; }
          .payment .page-inner .p_history .ph_wrap .set_date p {
            width: 100%; }
          .payment .page-inner .p_history .ph_wrap .set_date .select > .select-input {
            height: 44px; }
          .payment .page-inner .p_history .ph_wrap .set_date .datepicker_wrap {
            width: 100%;
            gap: 6px;
            max-width: 254px; }
            .payment .page-inner .p_history .ph_wrap .set_date .datepicker_wrap .date-picker {
              width: calc(50% - 8px); }
              .payment .page-inner .p_history .ph_wrap .set_date .datepicker_wrap .date-picker > .input {
                width: initial;
                height: 44px;
                padding-left: 33px;
                padding-right: 10px; }
              .payment .page-inner .p_history .ph_wrap .set_date .datepicker_wrap .date-picker > img {
                left: 10px;
                width: 15px; }
      .payment .page-inner .p_history .ph_thead {
        display: none; }
        .payment .page-inner .p_history .ph_thead > div.pc_ellipsis {
          max-width: initial;
          min-width: initial; }
      .payment .page-inner .p_history .ph_tbody .ph_tbody_list {
        padding: 15px;
        border-radius: 12px; }
        .payment .page-inner .p_history .ph_tbody .ph_tbody_list > .list_info .transform_div {
          width: calc(100% - 77px);
          align-items: flex-start; }
          .payment .page-inner .p_history .ph_tbody .ph_tbody_list > .list_info .transform_div > div {
            flex: initial; }
            .payment .page-inner .p_history .ph_tbody .ph_tbody_list > .list_info .transform_div > div:nth-of-type(1) {
              order: 4;
              text-align: left;
              min-width: 60px;
              font-weight: 400;
              font-size: 14px; }
            .payment .page-inner .p_history .ph_tbody .ph_tbody_list > .list_info .transform_div > div:nth-of-type(2) {
              order: 3;
              text-align: left;
              padding: 5px 0; }
            .payment .page-inner .p_history .ph_tbody .ph_tbody_list > .list_info .transform_div > div:nth-of-type(3) {
              order: 1;
              min-width: 120px;
              text-align: left;
              font-size: 14px;
              color: #7c7a82; }
            .payment .page-inner .p_history .ph_tbody .ph_tbody_list > .list_info .transform_div > div:nth-of-type(4) {
              order: 5;
              min-width: initial;
              text-align: left;
              font-size: 15px; }
            .payment .page-inner .p_history .ph_tbody .ph_tbody_list > .list_info .transform_div > div:nth-of-type(5) {
              order: 2;
              font-size: 14px;
              color: #504d58;
              min-width: initial;
              text-align: left; }
            .payment .page-inner .p_history .ph_tbody .ph_tbody_list > .list_info .transform_div > div.pc_ellipsis {
              max-width: initial;
              min-width: initial; }
            .payment .page-inner .p_history .ph_tbody .ph_tbody_list > .list_info .transform_div > div.mainContent {
              font-size: 18px;
              font-weight: 700;
              font-family: 'Inter', 'Noto Sans KR'; }
              .payment .page-inner .p_history .ph_tbody .ph_tbody_list > .list_info .transform_div > div.mainContent .coupon_expired {
                display: block;
                margin-left: 0; }
        .payment .page-inner .p_history .ph_tbody .ph_tbody_list > .list_info .ph_btn {
          width: initial;
          min-width: 77px;
          margin-right: auto; }
          .payment .page-inner .p_history .ph_tbody .ph_tbody_list > .list_info .ph_btn img {
            display: none; }
        .payment .page-inner .p_history .ph_tbody .ph_tbody_list .detail_info {
          margin: 15px -15px 0;
          padding: 15px 15px 0; }
          .payment .page-inner .p_history .ph_tbody .ph_tbody_list .detail_info dl {
            flex-direction: column; }
            .payment .page-inner .p_history .ph_tbody .ph_tbody_list .detail_info dl:not(:last-of-type) {
              margin-bottom: 10px; }
            .payment .page-inner .p_history .ph_tbody .ph_tbody_list .detail_info dl dt {
              font-size: 13px;
              margin-bottom: 3px; }
            .payment .page-inner .p_history .ph_tbody .ph_tbody_list .detail_info dl dd {
              font-size: 14px; }
      .payment .page-inner .p_history.coupon_history .ph_wrap .regist_coupon .input-component-box .input-wrapper {
        width: 100%;
        height: 50px; }
        .payment .page-inner .p_history.coupon_history .ph_wrap .regist_coupon .input-component-box .input-wrapper input {
          width: calc(100% - 140px); }
      .payment .page-inner .p_history.coupon_history .ph_wrap .regist_coupon button {
        padding: initial;
        width: 140px;
        text-align: center;
        line-height: 50px;
        border-radius: 12px; }
      .payment .page-inner .p_history.coupon_history .ph_wrap .regist_coupon p {
        color: #a7a6ab;
        font-size: 14px;
        padding: 10px 0 0; }
      .payment .page-inner .p_history.coupon_history .ph_wrap .ph_tbody .ph_tbody_list > .list_info .transform_div {
        flex-direction: column;
        width: initial; }
        .payment .page-inner .p_history.coupon_history .ph_wrap .ph_tbody .ph_tbody_list > .list_info .transform_div > div:nth-of-type(1) {
          order: 3;
          font-weight: 500;
          font-size: 15px; }
        .payment .page-inner .p_history.coupon_history .ph_wrap .ph_tbody .ph_tbody_list > .list_info .transform_div > div:nth-of-type(2) {
          order: 2; } }

@media screen and (max-width: 480px) {
  .payment .page-inner .p_history .ph_wrap .set_date .select {
    width: 100%;
    margin-right: 0; }
  .payment .page-inner .p_history .ph_wrap .set_date .datepicker_wrap {
    max-width: initial; }
    .payment .page-inner .p_history .ph_wrap .set_date .datepicker_wrap.over_layout .date-picker:last-child .date-picker-pop {
      left: auto;
      right: 0; } }

.coupon {
  height: calc(100vh - 390px);
  margin-top: 60px;
  background: #fbfcff; }
  .coupon .page-title {
    font-size: 22px;
    font-weight: 700;
    color: #24212e;
    padding: 0 16px;
    margin-bottom: 30px;
    display: flex;
    align-items: center; }
    .coupon .page-title img {
      width: 21px;
      margin-right: 8px; }
  .coupon .page-inner {
    padding: 30px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto; }
  .coupon .p_history .ph_wrap {
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
    background-color: #fff; }
    .coupon .p_history .ph_wrap .regist_coupon {
      margin-bottom: 30px;
      position: relative; }
      .coupon .p_history .ph_wrap .regist_coupon .input-component-box .input-wrapper {
        border-color: #dfdfe4;
        height: 40px; }
      .coupon .p_history .ph_wrap .regist_coupon p {
        color: #a7a6ab;
        font-size: 13px;
        line-height: 20px;
        padding-top: 8px; }
        .coupon .p_history .ph_wrap .regist_coupon p:last-of-type {
          padding-top: 24px; }
        .coupon .p_history .ph_wrap .regist_coupon p.tag_comment {
          color: #ff5050; }
    .coupon .p_history .ph_wrap .new_factory_button {
      min-width: 120px; }
    .coupon .p_history .ph_wrap .btn_coupon {
      position: relative;
      display: block;
      margin: auto;
      line-height: 60px;
      padding: 0 64px;
      background: #7681e5;
      box-shadow: 0px 3px 3px rgba(118, 129, 229, 0.3);
      border-radius: 15px;
      font-size: 20px;
      font-weight: 700;
      color: #fff; }

@media screen and (max-width: 1232px) {
  .coupon {
    height: calc(100vh - 486px); } }

@media screen and (max-width: 1180px) {
  .coupon {
    height: calc(100vh - 542px); } }

@media screen and (max-width: 1024px) {
  .coupon {
    margin-top: 48px;
    height: calc(100vh - 48px); } }

.change_info .page-container {
  margin-top: 123px; }
  .change_info .page-container .confirm_pw_area {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    .change_info .page-container .confirm_pw_area .input-component-box {
      width: calc(100% - 165px);
      max-width: 600px; }
    .change_info .page-container .confirm_pw_area button {
      min-width: 134px;
      height: 48px;
      padding: 14px;
      font-size: 14px;
      font-weight: 400;
      color: #504d58;
      text-align: center;
      border: 1px solid #504d58;
      border-radius: 10px;
      margin-left: 29px; }

.change_info .page-inner {
  padding: 70px 0 100px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto; }

.change_info .page-title {
  font-size: 35px;
  font-weight: 700;
  color: #24212e;
  text-align: center; }

.change_info .profile-img-wrap {
  margin: 50px 0 123px; }
  .change_info .profile-img-wrap .profile-img {
    margin: 0 auto;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    position: relative; }
    .change_info .profile-img-wrap .profile-img .edit_photo {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      position: absolute;
      right: 0;
      bottom: 0;
      background: #09b9c6 no-repeat center url("/img/icon/icon_camera_white.svg");
      background-size: auto;
      cursor: pointer; }
  .change_info .profile-img-wrap .profile-name {
    font-size: 26px;
    font-weight: 500;
    color: #24212e;
    text-align: center;
    margin-top: 15px; }

.change_info .profile-form > div:not(:last-of-type) {
  margin-bottom: 70px; }

.change_info .profile-form .profile-form-title {
  font-size: 26px;
  font-weight: 700;
  color: #24212e;
  padding-bottom: 15px;
  border-bottom: 2px solid #09b9c6; }
  .change_info .profile-form .profile-form-title span {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    color: #ff5050;
    margin-left: 10px; }

.change_info .profile-form-cont {
  padding-top: 35px; }
  .change_info .profile-form-cont li {
    display: flex;
    align-items: center; }
    .change_info .profile-form-cont li:not(:last-of-type) {
      margin-bottom: 30px; }
    .change_info .profile-form-cont li.email_list > div {
      transform: translateY(-4px); }
      .change_info .profile-form-cont li.email_list > div .input-component-box .input-wrapper {
        height: 36px;
        width: calc(100% - 20px);
        padding-left: 10px;
        border-radius: 8px; }
    .change_info .profile-form-cont li.email_list .input_btn_wrap .input-component-box .input-wrapper input {
      line-height: 1.5; }
    .change_info .profile-form-cont li.email_list .input_select_btn_wrap {
      padding-bottom: 0; }
    .change_info .profile-form-cont li.ad_box > div:nth-of-type(2) {
      border-bottom: 0; }
    .change_info .profile-form-cont li > div {
      padding: 0 15px 20px; }
      .change_info .profile-form-cont li > div:first-of-type {
        font-size: 18px;
        font-weight: 500;
        color: #504d58;
        width: 150px;
        padding-right: 10px;
        display: flex;
        align-items: center; }
        .change_info .profile-form-cont li > div:first-of-type img {
          margin-right: 6px; }
      .change_info .profile-form-cont li > div:nth-of-type(2) {
        width: calc(100% - 150px);
        padding: 0 15px 20px;
        border-bottom: 1px solid #d3d3d5; }

.change_info .select_btn_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .change_info .select_btn_wrap .select {
    width: calc(100% - 134px); }

.change_info .input_btn_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .change_info .input_btn_wrap .input-component-box {
    width: calc(100% - 134px); }
    .change_info .input_btn_wrap .input-component-box .input-wrapper.input_line {
      border: 0; }

.change_info .input_select_btn_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .change_info .input_select_btn_wrap .input_select {
    width: calc(100% - 134px);
    display: flex;
    align-items: center; }
    .change_info .input_select_btn_wrap .input_select > span {
      display: inline-block;
      margin: 0 2px; }
  .change_info .input_select_btn_wrap .input-component-box,
  .change_info .input_select_btn_wrap .select {
    width: calc(50% - 10px); }
  .change_info .input_select_btn_wrap .input-wrapper {
    border: 0;
    padding-bottom: 0; }

.change_info .btn_line {
  width: 100px;
  height: 34px;
  border-radius: 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 400; }
  .change_info .btn_line.red {
    color: #ff5050;
    border: 1px solid #ff5050; }
  .change_info .btn_line.black {
    color: #504d58;
    border: 1px solid #504d58; }

.change_info .btn_wrap {
  margin-top: 100px;
  display: flex;
  justify-content: center;
  gap: 10px; }
  .change_info .btn_wrap button {
    width: 211px;
    padding: 18px;
    border-radius: 15px;
    box-shadow: 0px 3px 3px rgba(118, 129, 229, 0.3);
    font-size: 20px;
    font-weight: 700;
    text-align: center; }
  .change_info .btn_wrap .btn_withdrawal {
    color: #ff5050;
    border: 1px solid #ff5050; }
  .change_info .btn_wrap .btn_save {
    color: #fff;
    background-color: #7681e5; }

.change_info .input-component-box .input-wrapper.input_line {
  border: 0;
  padding: 0; }

.change_info.new_change.teacher {
  padding-top: 0; }

.change_info.new_change .page-container {
  padding-top: 84px;
  padding-bottom: 120px;
  margin-top: 0; }
  .change_info.new_change .page-container .confirm_pw_area {
    justify-content: flex-start;
    flex-wrap: nowrap; }
    .change_info.new_change .page-container .confirm_pw_area .input-component-box {
      width: 100%;
      max-width: 360px; }
    .change_info.new_change .page-container .confirm_pw_area button {
      display: inline-block;
      min-width: unset;
      height: 38px;
      line-height: 36px;
      padding: 0 12px;
      font-size: 13px;
      background-color: #ffffff;
      border: 1px solid #7c7a82;
      color: #504d58;
      margin-left: 8px;
      margin-top: 1px;
      border-radius: 8px;
      flex-shrink: 0; }

.change_info.new_change .page-inner {
  padding-top: 76px;
  padding-bottom: 0; }

.change_info.new_change .page-title {
  font-size: 32px;
  line-height: 42px;
  margin-bottom: 52px; }

.change_info.new_change .profile-img-wrap {
  margin-bottom: 80px; }
  .change_info.new_change .profile-img-wrap .profile-img .edit_photo {
    background-image: url("../img/icon/icon_camera_wh.svg"); }

.change_info.new_change .profile-form > div:not(:last-of-type) {
  margin-bottom: 0; }

.change_info.new_change .profile-form > div:not(:first-of-type) {
  margin-top: 60px; }

.change_info.new_change .profile-form > div.terms_box .profile-form-title {
  border-bottom: none; }

.change_info.new_change .profile-form > div.terms_box .profile-form-cont {
  background-color: #f8f9fa;
  border-radius: 4px;
  padding: 28px;
  display: flex; }
  .change_info.new_change .profile-form > div.terms_box .profile-form-cont > li {
    display: initial; }
    .change_info.new_change .profile-form > div.terms_box .profile-form-cont > li:not(:first-of-type) {
      margin-top: 0; }
    .change_info.new_change .profile-form > div.terms_box .profile-form-cont > li:not(:last-of-type) {
      margin-right: 16px; }
    .change_info.new_change .profile-form > div.terms_box .profile-form-cont > li > div {
      width: auto;
      padding: 0 !important; }
      .change_info.new_change .profile-form > div.terms_box .profile-form-cont > li > div input[type='checkbox'] + label {
        font-size: 14px;
        line-height: 22px;
        color: #7c7a82; }
        .change_info.new_change .profile-form > div.terms_box .profile-form-cont > li > div input[type='checkbox'] + label i {
          width: 18px;
          height: 18px;
          border: 1px solid #dfdfe4;
          border-radius: 4px; }
      .change_info.new_change .profile-form > div.terms_box .profile-form-cont > li > div input[type='checkbox']:checked + label i {
        border-color: #2d2d2d; }

.change_info.new_change .profile-form .profile-form-title {
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
  padding-bottom: 20px;
  border-bottom: 1px solid #e9e9ea;
  display: flex;
  align-items: center; }
  .change_info.new_change .profile-form .profile-form-title.cyan_line {
    border-bottom-color: #09b9c6; }
  .change_info.new_change .profile-form .profile-form-title span {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    color: #ff5050;
    margin-left: 10px; }

.change_info.new_change .profile-form-cont {
  padding-top: 28px; }
  .change_info.new_change .profile-form-cont > li {
    align-items: flex-start; }
    .change_info.new_change .profile-form-cont > li:not(:last-of-type) {
      margin-bottom: 0; }
    .change_info.new_change .profile-form-cont > li:not(:first-of-type) {
      margin-top: 24px; }
    .change_info.new_change .profile-form-cont > li > div:first-of-type {
      width: 160px;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      color: #7c7a82;
      padding: 8px 0 !important;
      flex-shrink: 0; }
      .change_info.new_change .profile-form-cont > li > div:first-of-type span {
        font: inherit; }
    .change_info.new_change .profile-form-cont > li > div:nth-of-type(2) {
      width: calc(100% - 160px);
      padding: 0;
      border-bottom: none;
      display: flex; }
    .change_info.new_change .profile-form-cont > li.email_list > div .input-component-box .input-wrapper {
      height: 40px;
      width: 100%; }
    .change_info.new_change .profile-form-cont > li.email_list .input_select_btn_wrap .input_select {
      width: 100%;
      max-width: 360px; }
      .change_info.new_change .profile-form-cont > li.email_list .input_select_btn_wrap .input_select > div {
        flex: 1; }
      .change_info.new_change .profile-form-cont > li.email_list .input_select_btn_wrap .input_select > span {
        font-size: 16px;
        line-height: 24px;
        color: #7c7a82;
        margin: 0 8px; }
  .change_info.new_change .profile-form-cont .select {
    width: 100%;
    max-width: 360px;
    height: 40px;
    min-height: 40px;
    border: 1px solid #dfdfe4;
    border-radius: 8px; }
    .change_info.new_change .profile-form-cont .select > .select-input {
      height: 40px;
      padding: 0 12px; }

.change_info.new_change .input-component-box {
  max-width: 360px; }
  .change_info.new_change .input-component-box .input-wrapper {
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #dfdfe4; }
    .change_info.new_change .input-component-box .input-wrapper.icon_cal {
      padding-right: 46px; }
    .change_info.new_change .input-component-box .input-wrapper.wrong_line {
      border-color: #ff5050; }
    .change_info.new_change .input-component-box .input-wrapper.disabled {
      background-color: #e9e9ea;
      border-color: #dfdfe4; }
    .change_info.new_change .input-component-box .input-wrapper input {
      height: 100%;
      font-size: 14px;
      line-height: 22px;
      color: #504d58 !important;
      -webkit-text-fill-color: #504d58 !important; }
      .change_info.new_change .input-component-box .input-wrapper input::placeholder {
        font-size: 14px;
        line-height: 22px;
        color: #a7a6ab !important;
        -webkit-text-fill-color: #a7a6ab !important; }

.change_info.new_change .input_select_btn_wrap {
  justify-content: flex-start; }
  .change_info.new_change .input_select_btn_wrap .input-component-box {
    width: 100%; }

.change_info.new_change .btn_line {
  display: inline-block;
  width: auto;
  height: 38px;
  line-height: 36px;
  padding: 0 12px;
  font-size: 13px;
  background-color: #ffffff;
  margin-left: 8px;
  margin-top: 1px;
  border-radius: 8px;
  flex-shrink: 0; }
  .change_info.new_change .btn_line.black {
    border: 1px solid #7c7a82;
    color: #504d58; }
  .change_info.new_change .btn_line.red {
    border: 1px solid #ff5050;
    color: #ff5050; }

.change_info.new_change .select_btn_wrap,
.change_info.new_change .input_btn_wrap {
  justify-content: flex-start; }

.change_info.new_change .input_btn_wrap .input-component-box .input-wrapper.input_line {
  border: 1px solid #dfdfe4; }

.change_info.new_change .btn_wrap {
  margin-top: 40px; }
  .change_info.new_change .btn_wrap button {
    width: 160px;
    padding: 0 12px;
    height: 48px;
    line-height: 46px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 8px;
    box-shadow: none; }

.change_info.new_change.mb_change .page-container {
  padding-top: 48px;
  padding-bottom: 80px; }
  .change_info.new_change.mb_change .page-container .confirm_pw_area .input-component-box {
    max-width: unset; }

.change_info.new_change.mb_change .page-inner {
  max-width: unset;
  padding: 48px 0 32px; }

.change_info.new_change.mb_change .profile-img-wrap {
  margin-bottom: 40px; }
  .change_info.new_change.mb_change .profile-img-wrap .profile-img {
    width: 100px;
    height: 100px; }
    .change_info.new_change.mb_change .profile-img-wrap .profile-img .edit_photo {
      background-size: 14px; }

.change_info.new_change.mb_change .profile-form > div {
  padding: 0 20px; }
  .change_info.new_change.mb_change .profile-form > div:not(:first-of-type) {
    margin-top: 48px; }
  .change_info.new_change.mb_change .profile-form > div.terms_box {
    padding: 0; }
    .change_info.new_change.mb_change .profile-form > div.terms_box .profile-form-title {
      padding-left: 20px;
      padding-right: 20px;
      margin-bottom: 0; }

.change_info.new_change.mb_change .profile-form .profile-form-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  padding-bottom: 16px;
  margin-bottom: 20px; }

.change_info.new_change.mb_change .profile-form-cont {
  padding-top: 0; }
  .change_info.new_change.mb_change .profile-form-cont > li {
    display: block; }
    .change_info.new_change.mb_change .profile-form-cont > li.again_pw {
      margin-top: 8px; }
    .change_info.new_change.mb_change .profile-form-cont > li > div:first-of-type {
      width: auto;
      padding: 0 !important;
      font-size: 14px;
      line-height: 22px;
      margin-bottom: 8px; }
    .change_info.new_change.mb_change .profile-form-cont > li > div:nth-of-type(2) {
      width: 100%; }

.change_info.new_change.mb_change .input-component-box {
  max-width: unset; }

.change_info.new_change.mb_change .profile-form-cont .select {
  max-width: unset; }

.change_info.new_change.mb_change .btn_line {
  min-width: 72px; }

.change_info.new_change.mb_change .btn_wrap.mb_fixed_type {
  position: fixed;
  width: 100%;
  padding: 16px 20px;
  background-color: #ffffff;
  bottom: 0;
  margin-top: 0;
  z-index: 115;
  /* ios fixed 이슈 관련 */ }
  @media (orientation: landscape) {
    .change_info.new_change.mb_change .btn_wrap.mb_fixed_type {
      position: fixed; } }
  @media (orientation: portrait) {
    .change_info.new_change.mb_change .btn_wrap.mb_fixed_type {
      position: fixed; } }
  .change_info.new_change.mb_change .btn_wrap.mb_fixed_type::before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 1px;
    background-color: #f2f2f7;
    position: absolute;
    left: 0;
    top: 0; }
  .change_info.new_change.mb_change .btn_wrap.mb_fixed_type button {
    width: 100%;
    border-radius: 10px; }

@media screen and (max-width: 1024px) {
  .change_info.teacher {
    padding: 0; }
  .change_info .page-container {
    margin-top: 56px; }
  .change_info .page-inner {
    padding: 50px 16px; }
  .change_info .profile-img-wrap {
    margin: 0 0 50px; }
    .change_info .profile-img-wrap .profile-img {
      width: 77px;
      height: 77px; }
      .change_info .profile-img-wrap .profile-img img {
        width: 100%; }
      .change_info .profile-img-wrap .profile-img .edit_photo {
        width: 30px;
        height: 30px; }
    .change_info .profile-img-wrap .profile-name {
      font-size: 20px;
      margin-top: 10px; }
  .change_info .profile-form > div:not(:last-of-type) {
    margin-bottom: 40px; }
  .change_info .profile-form .profile-form-title {
    font-size: 16px;
    padding-bottom: 10px; }
    .change_info .profile-form .profile-form-title span {
      font-size: 10px; }
  .change_info .profile-form-cont {
    padding-top: 20px; }
    .change_info .profile-form-cont li {
      flex-direction: column;
      align-items: flex-start;
      gap: 15px; }
      .change_info .profile-form-cont li.again_pw {
        gap: 0; }
      .change_info .profile-form-cont li > div:first-of-type {
        font-size: 14px; }
      .change_info .profile-form-cont li > div:nth-of-type(2) {
        width: 100%; }
      .change_info .profile-form-cont li.ad_box {
        flex-direction: row; }
  .change_info .input_btn_wrap .input-component-box,
  .change_info .select_btn_wrap .select,
  .change_info .input_select_btn_wrap .input_select {
    width: calc(100% - 80px); }
  .change_info .select_btn_wrap .select select.select-input {
    width: 100% !important;
    padding: 0; }
  .change_info .btn_line {
    width: 80px;
    height: 35px;
    font-size: 13px; }
  .change_info .btn_wrap button {
    width: 163px;
    font-size: 16px; }
  .change_info.teacher .btn_wrap button {
    box-shadow: none; }
  .change_info .input-component-box .input-wrapper input {
    font-size: 12px; }
    .change_info .input-component-box .input-wrapper input::placeholder {
      font-size: 12px; } }

@media screen and (max-width: 465px) {
  .change_info .profile-form .profile-form-title span {
    display: block;
    margin-left: 0;
    margin-top: 10px; } }

.id-input input[type='text']::placeholder {
  color: #a7a6ab; }

@media screen and (max-width: 1024px) {
  .change_info .profile-form-cont li {
    gap: 5px; }
    .change_info .profile-form-cont li:not(:last-of-type) {
      margin-bottom: 25px; }
    .change_info .profile-form-cont li.email_list > div {
      transform: translateY(0px); }
    .change_info .profile-form-cont li.email_list .input_btn_wrap {
      display: flex;
      align-items: center; }
      .change_info .profile-form-cont li.email_list .input_btn_wrap .input-component-box .input-wrapper input {
        line-height: 1.5; } }

main#academic-management.student .select > .select-input {
  font-size: 24px; }
  main#academic-management.student .select > .select-input > .select-arrow {
    width: auto; }

main.student {
  margin-top: 123px; }
  main.student #academic-management-list ul li:last-of-type .list-body {
    border-bottom: 0; }
  main.student #academic-management-list ul li .list-body {
    border-bottom: 1px solid #e3e2f0;
    margin-bottom: 20px; }
    main.student #academic-management-list ul li .list-body .total p {
      font-weight: 400;
      color: #a7a6ab; }
      main.student #academic-management-list ul li .list-body .total p em {
        font-weight: 500;
        color: #24212e; }
    main.student #academic-management-list ul li .list-body ul li {
      justify-content: space-between;
      align-items: flex-end; }
      main.student #academic-management-list ul li .list-body ul li .st-name {
        font-size: 18px; }
      main.student #academic-management-list ul li .list-body ul li .st-id {
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; }
  main.student #academic-management-list ul li .title_cedu_campus h2 {
    color: #ff5050; }
  main.student#academic-management .page-inner .page-main .side-box {
    min-width: 287px; }

@media screen and (max-width: 1440px) {
  #academic-management .page-inner .page-main .desc-box .chart-box {
    padding: 32px 30px 60px; }
  .study-chart-swipe {
    padding: 0; }
    .study-chart-swipe .chapter-box .chapter-card {
      padding: 30px 20px; } }

@media screen and (max-width: 1200px) {
  .study-chart-swipe .chapter-box .chapter-card .chapter-list .right .list-content > div .progress-bar {
    min-width: 80px; }
    .study-chart-swipe .chapter-box .chapter-card .chapter-list .right .list-content > div .progress-bar span {
      font-size: 12px; } }

main.wrong-answer {
  min-width: 1100px;
  margin-top: 68px; }
  main.wrong-answer .page-inner {
    padding: 24px 48px 50px; }
  main.wrong-answer .page-title {
    font-size: 18px;
    font-weight: 700;
    color: #24212e; }
    main.wrong-answer .page-title span {
      display: inline-block;
      color: #504d58;
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      margin-left: 10px; }
  main.wrong-answer .page-top-bar {
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px; }
  main.wrong-answer .btn_print {
    padding: 18px 55px;
    background: #ffffff;
    box-shadow: 0px 3px 3px rgba(118, 129, 229, 0.3);
    border: 1px solid #7681e5;
    border-radius: 15px;
    font-size: 20px;
    font-weight: 700;
    color: #7681e5;
    display: flex;
    align-items: flex-end;
    gap: 7px; }
  main.wrong-answer .page-preview {
    flex: 1;
    padding: 15px 20px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center; }
    main.wrong-answer .page-preview > div {
      display: flex;
      align-items: center; }
    main.wrong-answer .page-preview .prev-left .test-part {
      font-size: 14px;
      font-weight: bold;
      color: #7c7a82;
      margin-right: 8px; }
      main.wrong-answer .page-preview .prev-left .test-part em {
        font-size: inherit;
        font-weight: inherit;
        color: #7681e5; }
    main.wrong-answer .page-preview .prev-left .text-part-detail {
      font-size: 16px;
      font-weight: 500;
      color: #504d58; }
    main.wrong-answer .page-preview .prev-right .chk-wrap {
      margin-right: 20px; }
      main.wrong-answer .page-preview .prev-right .chk-wrap input[type='checkbox'] + label i {
        width: 20px;
        height: 20px;
        border-radius: 4px; }
      main.wrong-answer .page-preview .prev-right .chk-wrap input[type='checkbox']:checked + label i {
        border-color: #0f9ba5;
        background-image: url("../img/icon/icon_chk_cyan.svg"); }
    main.wrong-answer .page-preview .prev-right .st-info {
      display: flex; }
      main.wrong-answer .page-preview .prev-right .st-info li {
        display: flex;
        font-size: 13px;
        font-weight: 500;
        color: #7c7a82;
        display: flex;
        align-items: center; }
        main.wrong-answer .page-preview .prev-right .st-info li em {
          font-size: 16px;
          font-weight: 700;
          color: #0f9ba5;
          margin-left: 17px; }
    main.wrong-answer .page-preview .prev-right .st-score {
      margin-left: 28px;
      border-radius: 13px;
      background: #f1f2fc;
      padding: 0 17px;
      line-height: 42px;
      font-size: 15px;
      font-weight: 500;
      color: #504d58; }
      main.wrong-answer .page-preview .prev-right .st-score span {
        font-size: inherit;
        font-weight: 700; }
  main.wrong-answer.right-answer.mb_style .prev-right.mb-prev-right .student_info {
    display: flex;
    font-size: 14px;
    line-height: 22px;
    color: #504d58;
    margin-right: 20px; }
    main.wrong-answer.right-answer.mb_style .prev-right.mb-prev-right .student_info > p {
      font: inherit;
      color: inherit; }
      main.wrong-answer.right-answer.mb_style .prev-right.mb-prev-right .student_info > p.score {
        font-weight: 700;
        flex-shrink: 0;
        margin-left: 6px; }
  main.wrong-answer.right-answer.mb_style .prev-right.mb-prev-right .chk-wrap {
    margin-right: 0;
    flex-shrink: 0; }
  main.wrong-answer.right-answer.mb_top_on {
    margin-top: 96px; }
    main.wrong-answer.right-answer.mb_top_on .page-inner {
      padding: 20px 0 30px; }
    main.wrong-answer.right-answer.mb_top_on .page-preview {
      position: relative;
      z-index: 10; }
    main.wrong-answer.right-answer.mb_top_on .page-top-bar {
      border-radius: 8px; }
      main.wrong-answer.right-answer.mb_top_on .page-top-bar .page-preview {
        width: 100%;
        flex-direction: column;
        border: 1px solid #e9e9ea;
        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06); }
        main.wrong-answer.right-answer.mb_top_on .page-top-bar .page-preview .prev-left {
          width: 100%;
          flex-direction: column;
          align-items: flex-start; }
          main.wrong-answer.right-answer.mb_top_on .page-top-bar .page-preview .prev-left .test-part {
            margin-right: 0; }
            main.wrong-answer.right-answer.mb_top_on .page-top-bar .page-preview .prev-left .test-part .new_factory_tag {
              height: 20px;
              line-height: 18px;
              font-size: 11px; }
          main.wrong-answer.right-answer.mb_top_on .page-top-bar .page-preview .prev-left .text-part-detail {
            width: 100%;
            margin-top: 4px; }
        main.wrong-answer.right-answer.mb_top_on .page-top-bar .page-preview .prev-right {
          position: fixed;
          justify-content: space-between;
          top: 48px;
          left: 0;
          width: 100%;
          height: 48px;
          padding: 8px 20px;
          background-color: #ffffff;
          border-bottom: 1px solid #e9e9ea;
          /* ios fixed 이슈 관련 */ }
          @media (orientation: landscape) {
            main.wrong-answer.right-answer.mb_top_on .page-top-bar .page-preview .prev-right {
              position: fixed; } }
          @media (orientation: portrait) {
            main.wrong-answer.right-answer.mb_top_on .page-top-bar .page-preview .prev-right {
              position: fixed; } }
          main.wrong-answer.right-answer.mb_top_on .page-top-bar .page-preview .prev-right input[type='checkbox'] + label {
            flex-direction: row-reverse;
            font-size: 14px;
            line-height: 22px; }
            main.wrong-answer.right-answer.mb_top_on .page-top-bar .page-preview .prev-right input[type='checkbox'] + label i {
              margin-left: 6px;
              margin-right: 0;
              width: 18px;
              height: 18px; }
          main.wrong-answer.right-answer.mb_top_on .page-top-bar .page-preview .prev-right button {
            height: 32px;
            line-height: 30px;
            padding: 0 10px; }
        main.wrong-answer.right-answer.mb_top_on .page-top-bar .page-preview .course-info {
          width: 100%;
          flex-direction: column;
          align-items: flex-start;
          margin-top: 6px; }
          main.wrong-answer.right-answer.mb_top_on .page-top-bar .page-preview .course-info .course-name {
            font-size: 14px;
            line-height: 20px;
            font-weight: 500;
            color: #504d58; }
          main.wrong-answer.right-answer.mb_top_on .page-top-bar .page-preview .course-info .course-date {
            font-size: 12px;
            line-height: 18px;
            color: #a7a6ab;
            margin-top: 4px; }

main.confirm-answer .page-preview {
  padding: 20px 30px; }

main.right-answer {
  min-width: auto; }
  main.right-answer .page-title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center; }

@media screen and (max-width: 1024px) {
  main.wrong-answer.right-answer {
    margin-top: 48px; }
    main.wrong-answer.right-answer .page-inner {
      padding: 30px 0; }
    main.wrong-answer.right-answer .page-top-bar {
      width: calc(100% - 32px);
      margin: 0 auto; }
    main.wrong-answer.right-answer .page-preview {
      padding: 14px;
      border-radius: 8px; }
      main.wrong-answer.right-answer .page-preview .prev-left .text-part-detail {
        font-size: 14px;
        font-weight: 700;
        line-height: 22px; }
  main.right-answer div.wrong_container {
    padding: 20px 16px; }
  main.right-answer .q_num {
    padding: 0 5px;
    border-radius: 20px;
    font-size: 10px; }
  main.right-answer .quest {
    font-size: 13px;
    color: #504d58; }
  main.right-answer .q_box {
    margin: 20px 0 0;
    width: 100%;
    border-radius: 10px;
    padding: 15px 14px;
    font-size: 12px; }
    main.right-answer .q_box .grammer_line {
      padding-bottom: 3px;
      border-width: 1px; }
      main.right-answer .q_box .grammer_line::after {
        font-size: 8px;
        top: 13px; }
  main.right-answer .q_answer {
    margin: 15px 0 0;
    width: 100%;
    padding: 15px 13px 13px;
    border-radius: 4px; }
    main.right-answer .q_answer li {
      align-items: flex-start !important; }
      main.right-answer .q_answer li:not(:last-of-type) {
        margin-bottom: 20px; }
    main.right-answer .q_answer .piece {
      font-size: 12px;
      padding: 4px 17.5px;
      margin-right: 5px; }
    main.right-answer .q_answer .txt {
      width: calc(100% - 70px);
      min-height: 24px;
      display: flex;
      align-items: center; }
      main.right-answer .q_answer .txt div {
        width: 100%;
        font-size: 10px; } }

.payment {
  background: #f8f9fa;
  margin-top: 60px; }
  .payment .page-inner {
    padding: 70px 0 80px;
    width: 100%;
    max-width: 1210px;
    margin: 0 auto; }
  .payment .pay-cont-gap {
    display: flex;
    flex-direction: column; }
    .payment .pay-cont-gap > *:not(:last-child) {
      margin-bottom: 72px; }
      .payment .pay-cont-gap > *:not(:last-child).page-title {
        margin-bottom: 28px; }
  .payment .page-title {
    font-weight: 700;
    color: #24212e;
    font-size: 28px;
    line-height: 42px; }
    .payment .page-title img {
      width: 28px;
      margin-right: 12px;
      vertical-align: bottom;
      transform: translateY(-5px); }
  .payment .pay_name {
    font-size: 22px;
    line-height: 32px;
    font-weight: 700;
    color: #24212e;
    margin-bottom: 24px;
    align-items: end; }
    .payment .pay_name .inherit {
      position: relative;
      font: inherit;
      color: inherit; }
      .payment .pay_name .inherit img {
        margin-left: 6px;
        cursor: pointer; }
    .payment .pay_name .last {
      color: #504d58;
      font-size: 16px;
      font-weight: 700;
      line-height: 24px; }
    .payment .pay_name span {
      font-size: 12px;
      color: #a7a6ab;
      margin-left: 15px; }
  .payment input[type='radio'] + label i {
    width: 16px;
    height: 16px;
    border: 1px solid #d3d3d5;
    margin: 0;
    cursor: pointer; }
  .payment input[type='radio']:disabled + label i {
    border: 1px #dfdfe4;
    background: #e9e9ea; }
  .payment input[type='radio']:checked + label i {
    border: 1px solid #7c7a82; }
    .payment input[type='radio']:checked + label i::after {
      width: 10px;
      height: 10px;
      background: #7c7a82; }
  .payment .premium_box {
    padding: 40px 30px 30px;
    border-radius: 10px;
    background: #09b9c6; }
    .payment .premium_box h1 {
      font-size: 40px;
      font-weight: bold;
      font-family: 'Inter', 'Noto Sans KR';
      color: #fff;
      margin-bottom: 39px; }
    .payment .premium_box .premium_detail {
      padding: 24px 25px 27px;
      border-radius: 10px;
      background-color: #fff; }
      .payment .premium_box .premium_detail > div {
        display: flex;
        width: 100%;
        max-width: 860px;
        justify-content: space-between; }
      .payment .premium_box .premium_detail ul {
        width: 50%; }
        .payment .premium_box .premium_detail ul:nth-of-type(1) {
          max-width: 392px; }
        .payment .premium_box .premium_detail ul:nth-of-type(2) {
          max-width: 298px; }
      .payment .premium_box .premium_detail .premium_name {
        height: 53px;
        padding-bottom: 15px;
        border-bottom: 1px solid #09b9c6;
        display: flex;
        justify-content: space-between;
        align-items: center; }
        .payment .premium_box .premium_detail .premium_name > div:first-of-type {
          font-size: 20px;
          font-weight: 500;
          color: #24212e; }
        .payment .premium_box .premium_detail .premium_name > div:nth-of-type(2) {
          display: flex;
          gap: 10px; }
          .payment .premium_box .premium_detail .premium_name > div:nth-of-type(2) button {
            display: block;
            width: 100px;
            padding: 10px;
            font-size: 13px;
            font-weight: 500;
            color: #504d58;
            text-align: center;
            border-radius: 5px;
            border: 1px solid #504d58; }
      .payment .premium_box .premium_detail .premium_sum {
        display: flex;
        align-items: center;
        gap: 15px;
        margin: 15px 0 26px; }
        .payment .premium_box .premium_detail .premium_sum > div:nth-of-type(1) {
          font-size: 45px;
          font-weight: 800;
          color: #24212e;
          font-family: 'Inter', 'Noto Sans KR'; }
          .payment .premium_box .premium_detail .premium_sum > div:nth-of-type(1) span {
            font-size: inherit;
            font-weight: inherit;
            font-family: inherit;
            color: transparent;
            background-clip: text;
            background: linear-gradient(90deg, #35e87c 0%, #34b3e9 100%);
            -webkit-background-clip: text !important; }
        .payment .premium_box .premium_detail .premium_sum p {
          font-size: 22px;
          font-weight: 700;
          font-family: 'Inter', 'Noto Sans KR';
          color: #7c7a82; }
      .payment .premium_box .premium_detail .premium_date {
        font-size: 16px;
        color: #7c7a82; }
        .payment .premium_box .premium_detail .premium_date:not(:first-of-type) {
          margin-top: 5px; }
      .payment .premium_box .premium_detail .premium_party {
        display: flex;
        gap: 30px;
        margin-top: 5px; }
        .payment .premium_box .premium_detail .premium_party > div {
          font-size: 15px;
          font-weight: 500;
          color: #7c7a82;
          position: relative; }
          .payment .premium_box .premium_detail .premium_party > div span {
            font-size: 18px;
            font-weight: 700;
            color: #7c7a82;
            margin-left: 5px; }
          .payment .premium_box .premium_detail .premium_party > div:first-of-type::after {
            content: '';
            display: inline-block;
            width: 2px;
            height: 18px;
            background-color: #7c7a82;
            margin: 0 15px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%); }
      .payment .premium_box .premium_detail .premium_coupon {
        font-size: 45px;
        font-weight: 500;
        color: #09b9c6;
        line-height: 1.45;
        margin-top: 6px; }
  .payment .premium_box.voca {
    background: #7681e5; }
    .payment .premium_box.voca .premium_detail .premium_name {
      border-bottom: 1px solid #7681e5; }
    .payment .premium_box.voca .premium_detail .premium_sum > div:nth-of-type(1) span {
      background: linear-gradient(90deg, #35bde8 0%, #af34e9 100%); }
    .payment .premium_box.voca .premium_detail .premium_coupon {
      color: #7681e5; }
  .payment .free_box {
    padding: 30px;
    border-radius: 10px;
    background-color: #09b9c6;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .payment .free_box div {
      display: flex;
      align-items: center; }
      .payment .free_box div:first-of-type {
        gap: 20px; }
        .payment .free_box div:first-of-type h1 {
          font-size: 40px;
          font-weight: bold;
          color: #fff;
          font-family: 'Inter', 'Noto Sans KR'; }
        .payment .free_box div:first-of-type button {
          padding: 8px 30px;
          border: 1px solid #fff;
          border-radius: 50px;
          font-size: 14px;
          font-weight: 500;
          color: #fff; }
      .payment .free_box div:nth-of-type(2) {
        display: flex;
        align-items: center;
        gap: 14px; }
        .payment .free_box div:nth-of-type(2) p {
          color: #fff; }
          .payment .free_box div:nth-of-type(2) p:nth-of-type(1) {
            font-size: 20px;
            font-weight: 500; }
          .payment .free_box div:nth-of-type(2) p:nth-of-type(2) {
            font-size: 45px;
            font-weight: 500;
            font-family: 'Inter', 'Noto Sans KR'; }
  .payment .card_wrap ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap; }
    .payment .card_wrap ul li {
      transition: scale 0.4s;
      margin-bottom: 20px;
      cursor: pointer;
      min-height: 200px;
      display: flex;
      align-items: center; }
      .payment .card_wrap ul li .card-box {
        position: relative; }
        .payment .card_wrap ul li .card-box .card-img {
          width: 100%;
          box-shadow: 0px 4.02235px 16.0894px rgba(0, 0, 0, 0.15); }
        .payment .card_wrap ul li .card-box .card-delete {
          display: none;
          position: absolute;
          top: 8px;
          right: 33px; }
        .payment .card_wrap ul li .card-box .card-like {
          width: 13px;
          height: 13px;
          position: absolute;
          top: 10px;
          right: 10px; }
      .payment .card_wrap ul li .add-card {
        width: 233px;
        height: 144px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0px 4.02235px 16.0894px rgba(0, 0, 0, 0.15);
        position: relative; }
        .payment .card_wrap ul li .add-card .card-plus {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%); }
      .payment .card_wrap ul li:not(:last-of-type) {
        margin-right: 20px; }
      .payment .card_wrap ul li.active > div {
        width: 280px; }
      .payment .card_wrap ul li.active .card-delete {
        display: block; }
  .payment .p_history .pay_name .inherit > img {
    transform: translateY(2px); }
  .payment .p_history .ph_wrap {
    padding: 32px;
    border-radius: 8px;
    border: 1px solid #e9e9ea;
    background: #fff; }
    .payment .p_history .ph_wrap .select {
      min-height: 36px; }
      .payment .p_history .ph_wrap .select > .select-input {
        height: 36px;
        border-color: #dfdfe4;
        padding: 0 12px; }
      .payment .p_history .ph_wrap .select .select-options {
        top: 35px;
        border-color: #dfdfe4; }
    .payment .p_history .ph_wrap .date-picker > .input {
      height: 36px;
      border-color: #dfdfe4;
      padding-left: 12px; }
    .payment .p_history .ph_wrap .new_table_wrap .new_table:not(:first-child) {
      margin-top: 20px; }
    .payment .p_history .ph_wrap .new_table_wrap thead tr th {
      font-family: 'Noto Sans KR', sans-serif;
      font-weight: 500;
      padding: 9px 16px 10px;
      border-top: none;
      border-bottom: none; }
      .payment .p_history .ph_wrap .new_table_wrap thead tr th:not(:first-of-type) {
        border-left: 1px solid #e9e9ea; }
    .payment .p_history .ph_wrap .new_table_wrap tbody tr:last-child td.nodata_td {
      border-bottom: none;
      padding-bottom: 22px; }
    .payment .p_history .ph_wrap .new_table_wrap tbody td {
      font-family: 'Noto Sans KR', sans-serif;
      padding: 13px 16px 14px; }
      .payment .p_history .ph_wrap .new_table_wrap tbody td.nodata_td {
        padding-top: 48px;
        padding-bottom: 48px;
        font-size: 14px;
        line-height: 22px;
        font-weight: 400;
        color: #a7a6ab; }
      .payment .p_history .ph_wrap .new_table_wrap tbody td .link {
        text-underline-offset: 2px; }
  .payment .p_history .ph_table {
    display: flex;
    flex-direction: column; }
    .payment .p_history .ph_table > *:not(:first-child) {
      margin-bottom: 20px; }
    .payment .p_history .ph_table.nodata {
      gap: 0; }
  .payment .p_history .set_date {
    margin-bottom: 20px; }
    .payment .p_history .set_date .select {
      width: 120px; }
      .payment .p_history .set_date .select > .select-input {
        font-size: 13px;
        border-radius: 8px; }
        .payment .p_history .set_date .select > .select-input.has-border {
          border-radius: 8px 8px 0 0; }
      .payment .p_history .set_date .select > .select-options {
        border-radius: 0 0 8px 8px; }
    .payment .p_history .set_date .datepicker_wrap {
      gap: 8px; }
    .payment .p_history .set_date .date-picker > .input {
      width: 160px;
      font-size: 13px;
      border-radius: 8px;
      background-position: right 8px center; }
    .payment .p_history .set_date .input-component-box {
      margin-right: 8px; }
      .payment .p_history .set_date .input-component-box .input-wrapper {
        border-radius: 8px; }
  .payment .set_date {
    display: flex;
    align-items: center;
    margin-bottom: 30px; }
    .payment .set_date p {
      font-size: 14px;
      line-height: 22px;
      color: #504d58;
      margin-right: 16px; }
    .payment .set_date .select {
      width: 150px;
      border-color: #6bd5dd;
      margin-right: 8px; }
      .payment .set_date .select .select-input {
        border-color: #09b9c6; }
    .payment .set_date .datepicker_wrap {
      display: flex;
      gap: 12px;
      align-items: center; }
      .payment .set_date .datepicker_wrap span {
        color: #6bd5dd; }
    .payment .set_date .input-component-box .input-wrapper {
      height: 34px;
      padding: 0 12px;
      border-color: #d3d3d5; }
      .payment .set_date .input-component-box .input-wrapper input {
        font-size: 14px;
        font-weight: 400; }
  .payment .regist_coupon {
    margin-bottom: 20px;
    position: relative; }
    .payment .regist_coupon .input-component-box .input-wrapper {
      height: 60px;
      border-color: #adb3ef;
      border-radius: 15px; }
      .payment .regist_coupon .input-component-box .input-wrapper input {
        width: calc(100% - 215px); }
    .payment .regist_coupon .btn_coupon {
      position: absolute;
      right: 0;
      top: 0;
      line-height: 60px;
      padding: 0 64px;
      background: #7681e5;
      box-shadow: 0px 3px 3px rgba(118, 129, 229, 0.3);
      border-radius: 15px;
      font-size: 20px;
      font-weight: 700;
      color: #fff; }
  .payment .ph_th {
    display: flex;
    border-top: 1px solid #d3d3d5;
    padding: 17px 0; }
    .payment .ph_th li {
      display: block;
      font-size: 15px;
      color: #a7a6ab;
      flex: 1;
      text-align: center; }
      .payment .ph_th li.ph_buy {
        flex: 1.5; }
      .payment .ph_th li.ph_btn {
        flex: 1.5; }
  .payment .ph_tr {
    border: 1px solid #cef1f4;
    border-radius: 20px; }
    .payment .ph_tr.active {
      border: 2px solid #09b9c6;
      background: #fbfcff; }
      .payment .ph_tr.active .ph_td {
        padding: 33px 1px 33px; }
      .payment .ph_tr.active .ph_btn img {
        transform: rotate(180deg); }
    .payment .ph_tr.nodata {
      border: 0;
      border-top: 1px solid #d3d3d5;
      border-radius: 0; }
      .payment .ph_tr.nodata li {
        padding: 56px 0 60px;
        font-size: 15px;
        color: #a7a6ab;
        text-align: center; }
  .payment .ph_td {
    padding: 34px 2px;
    display: flex;
    align-items: center; }
    .payment .ph_td li {
      flex: 1;
      text-align: center;
      font-size: 16px;
      font-weight: 500;
      color: #504d58; }
      .payment .ph_td li label {
        justify-content: center; }
      .payment .ph_td li.ph_buy {
        flex: 1.5;
        text-align: left;
        font-size: 20px;
        font-weight: 700;
        color: #504d58; }
      .payment .ph_td li.ph_btn {
        flex: 1.5;
        text-align: right; }
        .payment .ph_td li.ph_btn img {
          margin: 0 30px;
          transition: rotate 0.21s;
          cursor: pointer; }
  .payment .ph_detail {
    border-top: 1px solid #e9e9ea;
    padding-top: 25px;
    padding-left: 4%;
    padding-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px; }
    .payment .ph_detail li {
      display: flex;
      align-items: center; }
      .payment .ph_detail li div:first-of-type {
        width: 130px;
        font-size: 15px;
        font-weight: 400;
        color: #a7a6ab; }
      .payment .ph_detail li div:nth-of-type(2) {
        font-size: 16px;
        font-weight: 500;
        font-family: 'Inter', 'Noto Sans KR';
        color: #504d58; }
      .payment .ph_detail li button {
        margin-left: 30px; }
  .payment .ph_refund {
    border-top: 1px dashed #e9e9ea;
    padding-top: 25px;
    padding-left: 4%;
    padding-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px; }
    .payment .ph_refund li {
      display: flex;
      align-items: center; }
      .payment .ph_refund li div:first-of-type {
        width: 130px;
        font-size: 15px;
        font-weight: 400;
        color: #ff5050; }
      .payment .ph_refund li div:nth-of-type(2) {
        font-size: 16px;
        font-weight: 500;
        font-family: 'Inter', 'Noto Sans KR';
        color: #ff5050; }
      .payment .ph_refund li button {
        margin-left: 30px; }
  .payment .btn_openbill {
    padding: 6px 13px;
    background-color: #fff;
    border: 1px solid #7c7a82;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    color: #7c7a82; }
    .payment .btn_openbill.disabled {
      /*
      background: #f5f5f7;
      border: 1px solid #d3d3d5;
      color: #d3d3d5;
      */
      background: #e9e9ea;
      border: 1px solid #dfdfe4;
      color: #dfdfe4;
      cursor: initial; }
  .payment .coupon_history .ph_th li.th_coupon {
    flex: 2.5;
    padding-left: 20px; }
  .payment .coupon_history .ph_th li.th_deadline {
    flex: 1.5; }
  .payment .coupon_history .ph_tr.active {
    background-color: transparent; }
  .payment .coupon_history .ph_td li.td_sale {
    font-size: 20px;
    font-weight: 700;
    color: #504d58;
    font-family: 'Inter', 'Noto Sans KR'; }
  .payment .coupon_history .ph_td li.td_coupon {
    flex: 2.5;
    text-align: left;
    font-size: 16px;
    font-weight: 500;
    color: #24212e;
    padding-left: 20px; }
  .payment .coupon_history .ph_td li.td_deadline {
    flex: 1.5;
    font-size: 16px;
    font-weight: 500;
    color: #504d58;
    font-family: 'Inter', 'Noto Sans KR'; }
  .payment .coupon_history .ph_td .coupon_expired {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    color: #7c7a82;
    margin-left: 50px; }
  .payment .coupon_title_box {
    display: flex;
    align-items: center;
    margin-bottom: 40px; }
    .payment .coupon_title_box .pay_name {
      margin-bottom: 0; }
  .payment .tooltip_area {
    margin-left: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #7c7a82;
    cursor: pointer;
    position: relative;
    padding-top: 10px; }
    .payment .tooltip_area img {
      margin-right: 5px; }
    .payment .tooltip_area:hover .tooltip_box {
      display: block; }
  .payment .tooltip_box {
    display: none;
    min-width: 509px;
    padding: 20px 24px;
    background-color: #fff;
    border: 1px solid #e9e9ea;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    position: absolute;
    left: -90px;
    top: 55px;
    z-index: 101; }
    .payment .tooltip_box::before {
      content: '';
      display: block;
      width: 30px;
      height: 30px;
      background-color: #fff;
      position: absolute;
      top: -5px;
      left: 36px;
      transform: rotate(45deg) translateY(-50%);
      border-top: 1px solid #e9e9ea;
      border-left: 1px solid #e9e9ea; }
    .payment .tooltip_box h1 {
      font-size: 20px;
      font-weight: 700;
      color: #24212e;
      border-bottom: 1px solid #d3d3d5;
      padding-bottom: 16px;
      margin-bottom: 16px; }
    .payment .tooltip_box ul {
      padding-left: 20px; }
      .payment .tooltip_box ul li {
        font-size: 14px;
        font-weight: 400;
        color: #000;
        line-height: 1.7;
        padding: 0;
        border: 0;
        display: list-item;
        list-style-type: disc;
        list-style-position: inside;
        text-indent: -20px; }
  .payment .coupon_comment {
    font-size: 12px;
    color: #a7a6ab; }

.txt_red {
  color: #ff5050 !important; }

@media screen and (max-width: 1210px) {
  .payment .page-inner {
    padding: 70px 16px 120px; } }

@media screen and (max-width: 1024px) {
  .payment .coupon_history .ph_td .coupon_expired {
    display: block;
    margin: 10px 0 0 0; } }

@media screen and (max-width: 850px) {
  .payment .premium_box .premium_detail > div {
    flex-direction: column;
    gap: 30px; }
    .payment .premium_box .premium_detail > div ul {
      width: 100% !important;
      max-width: 100% !important; } }

.p_history .ph_table_data .ph_thead,
.p_history .ph_table_data .ph_tbody_list .list_info .transform_div {
  display: flex;
  align-items: center;
  flex-wrap: wrap; }
  .p_history .ph_table_data .ph_thead > div,
  .p_history .ph_table_data .ph_tbody_list .list_info .transform_div > div {
    flex: 1;
    text-align: center; }
    .p_history .ph_table_data .ph_thead > div.date,
    .p_history .ph_table_data .ph_tbody_list .list_info .transform_div > div.date {
      min-width: 135px;
      flex: initial; }
    .p_history .ph_table_data .ph_thead > div.size100,
    .p_history .ph_table_data .ph_tbody_list .list_info .transform_div > div.size100 {
      min-width: 100px;
      flex: initial; }
    .p_history .ph_table_data .ph_thead > div.size200,
    .p_history .ph_table_data .ph_tbody_list .list_info .transform_div > div.size200 {
      min-width: 200px;
      flex: initial; }
    .p_history .ph_table_data .ph_thead > div.ph_btn,
    .p_history .ph_table_data .ph_tbody_list .list_info .transform_div > div.ph_btn {
      width: 70px;
      flex: initial; }
      .p_history .ph_table_data .ph_thead > div.ph_btn img,
      .p_history .ph_table_data .ph_tbody_list .list_info .transform_div > div.ph_btn img {
        margin-left: 30px; }

.p_history .ph_table_data .ph_thead {
  padding: 0 30px;
  border-top: 1px solid #e9e9ea;
  border-bottom: 1px solid #e9e9ea;
  background-color: #fcfdfd; }
  .p_history .ph_table_data .ph_thead > div {
    padding: 17px 0;
    font-size: 15px;
    color: #a7a6ab; }

.p_history .ph_table_data .ph_tbody .ph_tbody_list {
  padding: 34px 30px;
  border: 2px solid #cef1f4;
  border-radius: 20px;
  box-sizing: border-box; }
  .p_history .ph_table_data .ph_tbody .ph_tbody_list:not(:last-of-type) {
    margin-bottom: 20px; }
  .p_history .ph_table_data .ph_tbody .ph_tbody_list.active {
    border: 2px solid #09b9c6;
    background: #fbfcff; }
  .p_history .ph_table_data .ph_tbody .ph_tbody_list > .list_info {
    display: flex;
    flex-wrap: wrap;
    align-items: center; }
    .p_history .ph_table_data .ph_tbody .ph_tbody_list > .list_info .transform_div {
      flex: 1; }
      .p_history .ph_table_data .ph_tbody .ph_tbody_list > .list_info .transform_div div {
        font-size: 16px;
        font-weight: 500; }
        .p_history .ph_table_data .ph_tbody .ph_tbody_list > .list_info .transform_div div.mainContent {
          font-size: 20px;
          font-weight: 700;
          color: #24212e; }
          .p_history .ph_table_data .ph_tbody .ph_tbody_list > .list_info .transform_div div.mainContent .coupon_expired {
            font-size: 14px;
            font-weight: 500;
            color: #7c7a82;
            margin-left: 50px; }
  .p_history .ph_table_data .ph_tbody .ph_tbody_list .ph_btn {
    flex: initial; }
    .p_history .ph_table_data .ph_tbody .ph_tbody_list .ph_btn img {
      margin-left: 30px; }
  .p_history .ph_table_data .ph_tbody .ph_tbody_list .detail_info {
    margin: 33px -30px 0;
    padding: 25px 0 0 50px;
    border-top: 1px solid #e9e9ea; }
    .p_history .ph_table_data .ph_tbody .ph_tbody_list .detail_info dl {
      display: flex; }
      .p_history .ph_table_data .ph_tbody .ph_tbody_list .detail_info dl:not(:last-of-type) {
        margin-bottom: 20px; }
      .p_history .ph_table_data .ph_tbody .ph_tbody_list .detail_info dl dt {
        min-width: 130px;
        font-size: 15px;
        font-weight: 400;
        color: #a7a6ab; }
      .p_history .ph_table_data .ph_tbody .ph_tbody_list .detail_info dl dd {
        font-size: 16px;
        font-weight: 500;
        color: #504d58; }
        .p_history .ph_table_data .ph_tbody .ph_tbody_list .detail_info dl dd button {
          margin-left: 30px; }
          .p_history .ph_table_data .ph_tbody .ph_tbody_list .detail_info dl dd button + button {
            margin-left: 10px; }
  .p_history .ph_table_data .ph_tbody .ph_tbody_list .detail_info_refund {
    margin: 33px -30px 0;
    padding: 25px 0 0 50px;
    border-top: 1px dashed #e9e9ea; }
    .p_history .ph_table_data .ph_tbody .ph_tbody_list .detail_info_refund dl {
      display: flex; }
      .p_history .ph_table_data .ph_tbody .ph_tbody_list .detail_info_refund dl:not(:last-of-type) {
        margin-bottom: 20px; }
      .p_history .ph_table_data .ph_tbody .ph_tbody_list .detail_info_refund dl dt {
        min-width: 130px;
        font-size: 15px;
        font-weight: 400;
        color: #ff5050; }
      .p_history .ph_table_data .ph_tbody .ph_tbody_list .detail_info_refund dl dd {
        font-size: 16px;
        font-weight: 500;
        color: #ff5050; }
        .p_history .ph_table_data .ph_tbody .ph_tbody_list .detail_info_refund dl dd button {
          margin-left: 30px; }

@media screen and (max-width: 1024px) {
  .payment {
    margin-top: 48px; }
    .payment .page-inner {
      padding: 20px 0;
      gap: initial; }
      .payment .page-inner .page-title {
        font-size: 22px;
        font-weight: 700;
        color: #24212e;
        padding: 0 16px;
        margin-bottom: 30px; }
        .payment .page-inner .page-title img {
          width: 21px;
          margin-right: 8px;
          vertical-align: bottom; }
      .payment .page-inner .credit_list .pay_name {
        font-size: 20px;
        padding: 0 16px;
        margin: 40px 0 0; }
      .payment .page-inner .p_history .pay_name {
        font-size: 20px;
        padding: 0 16px;
        margin: 0px 0 20px; }
      .payment .page-inner .p_history .ph_wrap {
        padding: 30px 15px;
        margin-bottom: 40px; }
        .payment .page-inner .p_history .ph_wrap .set_date {
          flex-wrap: wrap; }
          .payment .page-inner .p_history .ph_wrap .set_date > * {
            margin-bottom: 10px; }
          .payment .page-inner .p_history .ph_wrap .set_date p {
            width: 100%; }
          .payment .page-inner .p_history .ph_wrap .set_date .select > .select-input {
            height: 44px; }
          .payment .page-inner .p_history .ph_wrap .set_date .datepicker_wrap {
            width: 100%;
            gap: 6px;
            max-width: 254px; }
            .payment .page-inner .p_history .ph_wrap .set_date .datepicker_wrap .date-picker {
              width: calc(50% - 8px); }
              .payment .page-inner .p_history .ph_wrap .set_date .datepicker_wrap .date-picker > .input {
                width: initial;
                height: 44px;
                padding-left: 33px;
                padding-right: 10px; }
              .payment .page-inner .p_history .ph_wrap .set_date .datepicker_wrap .date-picker > img {
                left: 10px;
                width: 15px; }
      .payment .page-inner .p_history .ph_thead {
        display: none; }
        .payment .page-inner .p_history .ph_thead > div.pc_ellipsis {
          max-width: initial;
          min-width: initial; }
      .payment .page-inner .p_history .ph_tbody .ph_tbody_list {
        padding: 15px;
        border-radius: 12px; }
        .payment .page-inner .p_history .ph_tbody .ph_tbody_list > .list_info .transform_div {
          width: calc(100% - 77px);
          align-items: flex-start; }
          .payment .page-inner .p_history .ph_tbody .ph_tbody_list > .list_info .transform_div > div {
            flex: initial; }
            .payment .page-inner .p_history .ph_tbody .ph_tbody_list > .list_info .transform_div > div:nth-of-type(1) {
              order: 4;
              text-align: left;
              min-width: 60px;
              font-weight: 400;
              font-size: 14px; }
            .payment .page-inner .p_history .ph_tbody .ph_tbody_list > .list_info .transform_div > div:nth-of-type(2) {
              order: 3;
              text-align: left;
              padding: 5px 0; }
            .payment .page-inner .p_history .ph_tbody .ph_tbody_list > .list_info .transform_div > div:nth-of-type(3) {
              order: 1;
              min-width: 120px;
              text-align: left;
              font-size: 14px;
              color: #7c7a82; }
            .payment .page-inner .p_history .ph_tbody .ph_tbody_list > .list_info .transform_div > div:nth-of-type(4) {
              order: 5;
              min-width: initial;
              text-align: left;
              font-size: 15px; }
            .payment .page-inner .p_history .ph_tbody .ph_tbody_list > .list_info .transform_div > div:nth-of-type(5) {
              order: 2;
              font-size: 14px;
              color: #504d58;
              min-width: initial;
              text-align: left; }
            .payment .page-inner .p_history .ph_tbody .ph_tbody_list > .list_info .transform_div > div.pc_ellipsis {
              max-width: initial;
              min-width: initial; }
            .payment .page-inner .p_history .ph_tbody .ph_tbody_list > .list_info .transform_div > div.mainContent {
              font-size: 18px;
              font-weight: 700;
              font-family: 'Inter', 'Noto Sans KR'; }
              .payment .page-inner .p_history .ph_tbody .ph_tbody_list > .list_info .transform_div > div.mainContent .coupon_expired {
                display: block;
                margin-left: 0; }
        .payment .page-inner .p_history .ph_tbody .ph_tbody_list > .list_info .ph_btn {
          width: initial;
          min-width: 77px;
          margin-right: auto; }
          .payment .page-inner .p_history .ph_tbody .ph_tbody_list > .list_info .ph_btn img {
            display: none; }
        .payment .page-inner .p_history .ph_tbody .ph_tbody_list .detail_info {
          margin: 15px -15px 0;
          padding: 15px 15px 0; }
          .payment .page-inner .p_history .ph_tbody .ph_tbody_list .detail_info dl {
            flex-direction: column; }
            .payment .page-inner .p_history .ph_tbody .ph_tbody_list .detail_info dl:not(:last-of-type) {
              margin-bottom: 10px; }
            .payment .page-inner .p_history .ph_tbody .ph_tbody_list .detail_info dl dt {
              font-size: 13px;
              margin-bottom: 3px; }
            .payment .page-inner .p_history .ph_tbody .ph_tbody_list .detail_info dl dd {
              font-size: 14px; }
      .payment .page-inner .p_history.coupon_history .ph_wrap .regist_coupon .input-component-box .input-wrapper {
        width: 100%;
        height: 50px; }
        .payment .page-inner .p_history.coupon_history .ph_wrap .regist_coupon .input-component-box .input-wrapper input {
          width: calc(100% - 140px); }
      .payment .page-inner .p_history.coupon_history .ph_wrap .regist_coupon button {
        padding: initial;
        width: 140px;
        text-align: center;
        line-height: 50px;
        border-radius: 12px; }
      .payment .page-inner .p_history.coupon_history .ph_wrap .regist_coupon p {
        color: #a7a6ab;
        font-size: 14px;
        padding: 10px 0 0; }
      .payment .page-inner .p_history.coupon_history .ph_wrap .ph_tbody .ph_tbody_list > .list_info .transform_div {
        flex-direction: column;
        width: initial; }
        .payment .page-inner .p_history.coupon_history .ph_wrap .ph_tbody .ph_tbody_list > .list_info .transform_div > div:nth-of-type(1) {
          order: 3;
          font-weight: 500;
          font-size: 15px; }
        .payment .page-inner .p_history.coupon_history .ph_wrap .ph_tbody .ph_tbody_list > .list_info .transform_div > div:nth-of-type(2) {
          order: 2; } }

@media screen and (max-width: 480px) {
  .payment .page-inner .p_history .ph_wrap .set_date .select {
    width: 100%;
    margin-right: 0; }
  .payment .page-inner .p_history .ph_wrap .set_date .datepicker_wrap {
    max-width: initial; }
    .payment .page-inner .p_history .ph_wrap .set_date .datepicker_wrap.over_layout .date-picker:last-child .date-picker-pop {
      left: auto;
      right: 0; } }

#payment-product {
  margin-top: 123px;
  padding-top: 123px; }
  #payment-product.change .page-inner .page-title {
    margin-bottom: 80px; }
  #payment-product .page-inner {
    max-width: 1200px;
    margin: 0 auto; }
    #payment-product .page-inner .page-title {
      font-size: 35px;
      font-family: 'Noto Sans KR';
      font-weight: 700;
      color: #24212e;
      text-align: center; }
    #payment-product .page-inner .page-contents {
      padding: 0 45px; }
      #payment-product .page-inner .page-contents article {
        margin-bottom: 50px; }
        #payment-product .page-inner .page-contents article .article_title {
          font-size: 26px;
          font-family: 'Noto Sans KR';
          font-weight: 700;
          color: #24212e;
          padding-bottom: 15px;
          border-bottom: 2px solid #09b9c6; }
        #payment-product .page-inner .page-contents article .article_contents .contents_item {
          padding: 30px 0; }
          #payment-product .page-inner .page-contents article .article_contents .contents_item:not(:last-of-type) {
            border-bottom: 1px solid #d3d3d5; }
          #payment-product .page-inner .page-contents article .article_contents .contents_item .dl_twin {
            display: flex;
            flex-wrap: wrap; }
            #payment-product .page-inner .page-contents article .article_contents .contents_item .dl_twin > dl {
              flex: 1; }
              #payment-product .page-inner .page-contents article .article_contents .contents_item .dl_twin > dl:not(:last-of-type) {
                margin-bottom: 0; }
          #payment-product .page-inner .page-contents article .article_contents .contents_item dl {
            display: flex; }
            #payment-product .page-inner .page-contents article .article_contents .contents_item dl:not(:last-of-type) {
              margin-bottom: 30px; }
            #payment-product .page-inner .page-contents article .article_contents .contents_item dl dt {
              display: flex;
              align-items: center;
              font-size: 18px;
              font-family: 'Noto Sans KR';
              font-weight: 500;
              min-width: 150px;
              color: #504d58; }
            #payment-product .page-inner .page-contents article .article_contents .contents_item dl dd {
              flex: 1; }
              #payment-product .page-inner .page-contents article .article_contents .contents_item dl dd span.subT {
                font-weight: 500;
                font-size: 18px; }
                #payment-product .page-inner .page-contents article .article_contents .contents_item dl dd span.subT.big {
                  font-size: 26px; }
              #payment-product .page-inner .page-contents article .article_contents .contents_item dl dd .tag_list {
                display: flex;
                align-items: center;
                margin-top: 3px; }
                #payment-product .page-inner .page-contents article .article_contents .contents_item dl dd .tag_list > span {
                  color: #7c7a82; }
                  #payment-product .page-inner .page-contents article .article_contents .contents_item dl dd .tag_list > span:not(:last-of-type):after {
                    content: '';
                    display: inline-block;
                    width: 1px;
                    height: 8px;
                    background: #7c7a82;
                    margin: 0 10px; }
              #payment-product .page-inner .page-contents article .article_contents .contents_item dl dd .radio_box label {
                color: #24212e;
                cursor: pointer;
                word-break: keep-all; }
                #payment-product .page-inner .page-contents article .article_contents .contents_item dl dd .radio_box label:not(:last-of-type) {
                  margin-right: 20px; }
              #payment-product .page-inner .page-contents article .article_contents .contents_item dl dd .radio_box input[type='radio']:checked + label {
                color: #24212e; }
              #payment-product .page-inner .page-contents article .article_contents .contents_item dl dd .radio_box input[type='radio']:checked + label i {
                border: 1px solid #7c7a82; }
              #payment-product .page-inner .page-contents article .article_contents .contents_item dl dd .radio_box input[type='radio']:checked + label i:after {
                width: 16px;
                height: 16px;
                border: 1px solid #d3d3d5;
                background-color: #7c7a82; }
          #payment-product .page-inner .page-contents article .article_contents .contents_item .checkbox_wrap {
            padding: 33px 0px; }
            #payment-product .page-inner .page-contents article .article_contents .contents_item .checkbox_wrap > p {
              padding-bottom: 20px;
              margin-bottom: 20px;
              border-bottom: 1px solid #d3d3d5;
              font-size: 26px;
              font-weight: 700; }
            #payment-product .page-inner .page-contents article .article_contents .contents_item .checkbox_wrap .checkbox_inner > div:first-child label {
              font-size: 18px;
              font-weight: 700;
              color: #24212e; }
            #payment-product .page-inner .page-contents article .article_contents .contents_item .checkbox_wrap .label_wrap {
              padding-left: 25px; }
              #payment-product .page-inner .page-contents article .article_contents .contents_item .checkbox_wrap .label_wrap > label {
                width: 100%;
                margin-top: 17px; }
                #payment-product .page-inner .page-contents article .article_contents .contents_item .checkbox_wrap .label_wrap > label span {
                  font-weight: 400; }
                #payment-product .page-inner .page-contents article .article_contents .contents_item .checkbox_wrap .label_wrap > label strong {
                  font-size: 15px;
                  color: #7c7a82; }
                #payment-product .page-inner .page-contents article .article_contents .contents_item .checkbox_wrap .label_wrap > label p {
                  display: inline-block;
                  cursor: pointer;
                  font-weight: 500;
                  text-decoration: underline;
                  color: #24212e;
                  padding-bottom: 0;
                  margin-bottom: 0;
                  border-bottom: none;
                  font-size: 15px; }
                #payment-product .page-inner .page-contents article .article_contents .contents_item .checkbox_wrap .label_wrap > label button {
                  margin-left: 20px;
                  width: 75px;
                  height: 25px;
                  border-radius: 5px;
                  font-size: 11px;
                  font-weight: 500;
                  color: #7c7a82;
                  background-color: #f3f3f3;
                  text-align: center; }
  #payment-product .tooltip_area {
    font-size: 12px;
    font-weight: 500;
    font-family: 'Noto Sans KR';
    color: #7c7a82;
    position: relative;
    margin-left: 15px;
    cursor: pointer; }
    #payment-product .tooltip_area img {
      margin-right: 5px; }
  #payment-product .tooltip_box {
    display: block;
    min-width: 500px;
    padding: 20px 24px;
    background-color: #fff;
    border: 1px solid #e9e9ea;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    position: absolute;
    left: 217px;
    top: 55px; }
    #payment-product .tooltip_box::before {
      content: '';
      display: block;
      width: 30px;
      height: 30px;
      background-color: #fff;
      position: absolute;
      top: -5px;
      left: 36px;
      transform: rotate(45deg) translateY(-50%);
      border-top: 1px solid #e9e9ea;
      border-left: 1px solid #e9e9ea; }
    #payment-product .tooltip_box h1 {
      font-size: 20px;
      font-weight: 700;
      color: #24212e;
      border-bottom: 1px solid #d3d3d5;
      padding-bottom: 12px;
      margin-bottom: 16px; }
    #payment-product .tooltip_box ul {
      padding-left: 20px; }
      #payment-product .tooltip_box ul li {
        font-size: 14px;
        font-weight: 400;
        color: #000;
        line-height: 1.7;
        padding: 0;
        border: 0;
        display: list-item;
        list-style-type: disc;
        list-style-position: inside;
        text-indent: -20px; }
  #payment-product .btn_wrap {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 60px; }
    #payment-product .btn_wrap button {
      width: 211px;
      padding: 18px;
      border-radius: 15px;
      box-shadow: 0px 3px 3px rgba(118, 129, 229, 0.3);
      text-align: center;
      font-size: 20px;
      font-weight: 700; }
      #payment-product .btn_wrap button.btn_cancel {
        color: #7c7a82;
        border: 1px solid #7c7a82; }
      #payment-product .btn_wrap button.btn_join {
        color: #fff;
        background-color: #7681e5; }

@media screen and (max-width: 1200px) {
  #payment-product .tooltip_area {
    margin-top: 10px;
    margin-left: 0; } }

@media screen and (max-width: 1024px) {
  #payment-product {
    padding-top: 0; }
    #payment-product .tooltip_area {
      margin-top: 10px;
      margin-left: 0; } }

@media screen and (max-width: 768px) {
  #payment-product .page-inner .page-contents {
    padding: 0 16px; }
  #payment-product .page-inner .page-contents .radio_box {
    display: flex;
    flex-wrap: wrap; }
    #payment-product .page-inner .page-contents .radio_box > label {
      margin-bottom: 10px; }
  #payment-product .page-inner .page-contents article .article_contents .contents_item .dl_twin {
    flex-direction: column; }
    #payment-product .page-inner .page-contents article .article_contents .contents_item .dl_twin dl:not(:last-of-type) {
      margin-bottom: 30px; }
  #payment-product .page-inner .page-contents article .article_contents .contents_item .checkbox_wrap .label_wrap {
    padding-left: 0; } }

@media screen and (max-width: 480px) {
  #payment-product.change .page-inner .page-title {
    margin-bottom: 40px; }
  #payment-product .page-inner .page-title {
    font-size: 28px; }
  #payment-product .page-inner .page-contents article {
    margin-bottom: 40px; }
    #payment-product .page-inner .page-contents article .article_contents .contents_item {
      padding: 20px 0; }
      #payment-product .page-inner .page-contents article .article_contents .contents_item dl dt {
        font-size: 16px; }
      #payment-product .page-inner .page-contents article .article_contents .contents_item dl dd span.subT {
        font-size: 20px; }
  #payment-product .page-inner .page-contents article .article_title {
    font-size: 20px; }
  #payment-product .page-inner .page-contents article .article_contents .contents_item dl {
    flex-direction: column; }
    #payment-product .page-inner .page-contents article .article_contents .contents_item dl dt {
      margin-bottom: 10px; }
  #payment-product .tooltip_area {
    position: absolute;
    top: -40px;
    left: 80px;
    margin-top: 10px;
    margin-left: 0; }
  #payment-product .tooltip_box {
    left: 0;
    top: 15px;
    min-width: auto;
    padding: 30px; }
    #payment-product .tooltip_box h1 {
      font-size: 22px; }
    #payment-product .tooltip_box:before {
      left: 63px; }
  #payment-product .page-inner .page-contents article .article_contents .contents_item dl dd .radio_box label {
    margin-bottom: 10px; }
  #payment-product .page-inner .page-contents article .article_contents .contents_item .checkbox_wrap {
    padding-top: 0; }
    #payment-product .page-inner .page-contents article .article_contents .contents_item .checkbox_wrap .checkbox_inner > div:first-child label {
      font-size: 15px; }
    #payment-product .page-inner .page-contents article .article_contents .contents_item .checkbox_wrap .label_wrap > label {
      flex-direction: column;
      align-items: flex-start; }
      #payment-product .page-inner .page-contents article .article_contents .contents_item .checkbox_wrap .label_wrap > label button {
        margin-left: 0;
        margin-top: 10px; } }

main#word-book {
  margin-top: 123px; }
  main#word-book .page-inner {
    width: 100%;
    max-width: 1210px;
    padding: 50px;
    margin: 0 auto; }
  main#word-book .page-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px; }
  main#word-book .page-title {
    font-size: 36px;
    color: #24212e;
    display: flex; }
    main#word-book .page-title img {
      margin-right: 10px; }
  main#word-book .btn_study_word {
    padding: 18px 44px;
    background: #ffffff;
    border: 1px solid #7681e5;
    box-shadow: 0px 4px 3px rgba(104, 115, 170, 0.3);
    border-radius: 15px;
    font-weight: bold;
    font-size: 20px;
    color: #7681e5; }
  main#word-book .btn_premium_word {
    padding: 18px 12px;
    background: #7681e5;
    border: 1px solid #7681e5;
    border-radius: 15px;
    font-weight: 500;
    font-size: 20px;
    color: #ffffff;
    margin-right: 10px; }
  main#word-book .word_container {
    padding: 30px 10px 0 30px;
    background-color: #fff;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
    border-radius: 15px; }
  main#word-book .word_top {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 27px; }
    main#word-book .word_top p {
      font-size: 26px;
      font-weight: bold;
      color: #24212e;
      line-height: 1; }
      main#word-book .word_top p span {
        font-size: inherit;
        font-weight: inherit;
        color: #7681e5; }
    main#word-book .word_top .select_howshow {
      width: 150px; }
      main#word-book .word_top .select_howshow .select-input {
        border: 0; }
      main#word-book .word_top .select_howshow .select-options.is_open {
        border-top: 1px solid #a7a6ab; }
    main#word-book .word_top.version2 {
      justify-content: space-between;
      padding-right: 20px; }
      main#word-book .word_top.version2 .new_select {
        width: 140px; }
        main#word-book .word_top.version2 .new_select p {
          font-size: 13px;
          line-height: 18px;
          font-weight: 400;
          color: #504d58; }
  main#word-book .word_bottom {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    max-height: 600px;
    padding-right: 20px;
    padding-bottom: 30px;
    overflow: auto; }
    main#word-book .word_bottom .nodata {
      width: 100%;
      height: calc(100vh - 240px);
      border: 1px solid red;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: 700;
      color: #d3d3d5; }
  main#word-book .word_item {
    width: calc(25% - 19px);
    padding: 23px 10px;
    background: #ffffff;
    border: 1px solid #84dce2;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
    border-radius: 20px;
    position: relative;
    display: flex;
    align-items: center; }
    main#word-book .word_item .word {
      display: flex;
      width: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center; }
    main#word-book .word_item h1 {
      font-size: 24px;
      font-weight: 900;
      font-family: Roboto;
      color: #24212e;
      text-align: center;
      word-break: break-word;
      height: 56px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 11px; }
    main#word-book .word_item:hover {
      border: 2px solid #84dce2;
      padding: 44px 10px 22px; }
      main#word-book .word_item:hover .icon_trash {
        display: block; }
    main#word-book .word_item h2 {
      display: flex;
      /*
      align-items: center;
      */
      font-size: 14px;
      font-weight: 400;
      color: #7c7a82;
      text-align: center;
      margin-bottom: 6px; }
      main#word-book .word_item h2 i.iconClass {
        display: flex;
        border-radius: 50%;
        border: 1px solid #7c7a82;
        height: 21px;
        font-size: 11px;
        padding: 2px;
        align-items: center;
        justify-content: center;
        margin-left: 4px;
        margin-right: 2px;
        color: #7c7a82;
        min-width: 21px; }
      main#word-book .word_item h2 div.iconText {
        color: #7c7a82;
        width: auto;
        margin-left: 2px;
        text-align: left;
        min-height: 21px;
        display: flex;
        align-items: center;
        justify-content: center; }
    main#word-book .word_item .icon_trash {
      display: none;
      position: absolute;
      right: 17px;
      top: 17px;
      cursor: pointer; }
  main#word-book .btn_fixed_word {
    width: 100%;
    position: fixed;
    bottom: 0;
    background: #7681e5;
    box-shadow: 0px -5px 42px rgba(118, 129, 229, 0.15);
    border-radius: 20px 20px 0px 0px;
    padding: 17px 0 20px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    color: #fff;
    /* ios fixed 이슈 관련 */ }
    @media (orientation: landscape) {
      main#word-book .btn_fixed_word {
        position: fixed; } }
    @media (orientation: portrait) {
      main#word-book .btn_fixed_word {
        position: fixed; } }
    main#word-book .btn_fixed_word.version2 {
      width: calc(50% - 4px);
      position: static;
      bottom: auto;
      background: #ffffff;
      box-shadow: none;
      border-radius: 8px;
      padding: 11px 0;
      font-weight: 500;
      font-size: 14px;
      line-height: 22px;
      color: #7681e5;
      border: 1px solid #7681e5;
      margin-right: 8px; }
  main#word-book .btn_fixed_premium_word {
    width: calc(50% - 4px);
    padding: 11px 0;
    border-radius: 8px;
    border: 1px solid #7681e5;
    background: #7681e5;
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #ffffff; }
  main#word-book .word_book_mb_fixed {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 16px 20px;
    border-top: 1px solid #f2f2f7;
    background-color: #ffffff;
    /* ios fixed 이슈 관련 */ }
    @media (orientation: landscape) {
      main#word-book .word_book_mb_fixed {
        position: fixed; } }
    @media (orientation: portrait) {
      main#word-book .word_book_mb_fixed {
        position: fixed; } }

@media screen and (max-width: 1210px) {
  main#word-book .page-inner {
    padding: 50px 16px; } }

@media screen and (max-width: 1024px) {
  main#word-book .page-inner {
    padding: 50px 16px; }
  main#word-book .word_item {
    width: calc(33.33% - 17px);
    padding: 35px 20px 23px; }
    main#word-book .word_item:hover {
      border: 1px solid #84dce2;
      padding: 35px 20px 23px; }
    main#word-book .word_item h2 {
      font-size: 16px; }
  main#word-book .word_book_mb_fixed {
    display: block; } }

@media screen and (max-width: 900px) {
  main#word-book .word_item {
    width: calc(50% - 13px); } }

@media screen and (max-width: 1024px) {
  main#word-book {
    margin-top: 56px; }
    main#word-book .page-inner {
      padding: 30px 16px 80px; }
      main#word-book .page-inner.version2 {
        padding: 30px 16px 103px; }
    main#word-book .word_container {
      padding: 0;
      background-color: transparent;
      box-shadow: none;
      border-radius: 0; }
    main#word-book .word_top {
      justify-content: space-between; }
      main#word-book .word_top .select_howshow .select-input {
        background: #f1f2fc; }
      main#word-book .word_top.version2 {
        padding-right: 0; }
        main#word-book .word_top.version2 .new_select {
          width: 102px; }
          main#word-book .word_top.version2 .new_select p {
            height: 32px;
            padding: 5px 38px 5px 12px;
            font-size: 14px; }
    main#word-book .word_bottom {
      max-height: none;
      padding-right: 0;
      padding-bottom: 0; }
    main#word-book .word_item .icon_trash {
      display: block; } }

@media screen and (max-width: 600px) {
  main#word-book .word_top p {
    font-size: 16px; }
  main#word-book .word_item {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0px 3px 4px rgba(104, 154, 170, 0.3);
    padding: 30px 10px; }
    main#word-book .word_item:hover {
      padding: 30px 10px; } }

.word-selectbox {
  position: relative; }
  .word-selectbox > select {
    min-width: 60px;
    height: auto;
    padding-left: 0;
    font-size: 12px;
    color: #504d58;
    border: 0;
    appearance: none; }
    .word-selectbox > select:active, .word-selectbox > select:focus {
      border: 0;
      outline: none; }
  .word-selectbox .select-arrow {
    position: absolute;
    right: 0%;
    top: 55%;
    transform: translateY(-50%); }
    .word-selectbox .select-arrow.rotate {
      transform: rotate(180deg) translateY(50%); }

main#teacher-my-campus.student .page-inner .page-title {
  margin-bottom: 70px; }

main#teacher-my-campus.student .page-inner .status-box .status-bar {
  margin-bottom: 60px; }
  main#teacher-my-campus.student .page-inner .status-box .status-bar img {
    cursor: pointer; }

main#teacher-my-campus.student .page-inner .campus-list {
  margin-bottom: 60px; }

main#teacher-my-campus.student .campus_div {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 30px; }
  main#teacher-my-campus.student .campus_div > p {
    font-size: 30px;
    font-weight: bold;
    color: #24212e; }
  main#teacher-my-campus.student .campus_div .ingClass_count {
    padding-left: 15px;
    border-left: 1px solid #d3d3d5;
    font-size: 15px;
    font-weight: 500;
    color: #7c7a82; }
    main#teacher-my-campus.student .campus_div .ingClass_count span {
      display: inline-block;
      margin-left: 11px;
      font-size: 18px;
      font-weight: 700;
      font-family: 'Inter', 'Noto Sans KR';
      color: #0f9ba5; }

main#teacher-my-campus.student .divide-line {
  border: 1px solid #d3d3d5;
  margin-bottom: 60px; }

main#teacher-my-campus.student .btn-see-product {
  font-size: 14px;
  font-weight: 800;
  font-family: 'Inter', 'Noto Sans KR';
  color: #24212e;
  padding: 5px 9px;
  border: 2px solid #24212e;
  border-radius: 5px;
  margin-left: 6px; }

main#teacher-my-campus.student .btn-see-free-class {
  font-size: 14px;
  font-weight: 800;
  font-family: 'Inter', 'Noto Sans KR';
  color: #24212e;
  padding: 5px 9px;
  border: 2px solid #24212e;
  border-radius: 5px;
  margin-left: 6px; }

@media screen and (max-width: 1200px) {
  #teacher-my-campus.student .page-inner .status-box .status-bar {
    padding: 10px 20px;
    align-items: flex-start; } }

@media screen and (max-width: 1024px) {
  #teacher-my-campus.student {
    margin-top: 56px; }
    #teacher-my-campus.student .page-inner {
      padding: 30px 16px 40px; } }

#student-myclass {
  margin-top: 60px;
  background-color: #f8f9fa; }
  #student-myclass .page-inner {
    padding: 24px 32px 22px;
    height: 100%; }
  #student-myclass .page-title {
    font-size: 36px;
    color: #24212e;
    margin-bottom: 50px; }
    #student-myclass .page-title img {
      margin-right: 13px; }
  #student-myclass .myclass-inner {
    display: flex;
    gap: 20px;
    min-height: calc(100vh - 584px); }
  #student-myclass .myclass-course {
    width: 40%;
    height: 100%; }
  #student-myclass .myclass-course-top {
    margin-bottom: 24px; }
    #student-myclass .myclass-course-top .class-info-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      /*
      padding: 13px 24px;
      */
      padding: 10px 24px;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06); }
      #student-myclass .myclass-course-top .class-info-wrap .class-info {
        display: flex;
        justify-content: space-between;
        width: 100%;
        background-color: #fff; }
        #student-myclass .myclass-course-top .class-info-wrap .class-info > span {
          display: flex;
          align-items: center;
          font-size: 16px;
          color: #504d58; }
          #student-myclass .myclass-course-top .class-info-wrap .class-info > span strong {
            display: flex;
            align-items: center;
            font-size: 18px;
            font-weight: 500;
            color: #24212e; }
            #student-myclass .myclass-course-top .class-info-wrap .class-info > span strong:after {
              content: '';
              display: inline-block;
              width: 2px;
              height: 14px;
              background: #dfdfe4;
              margin: 0 10px; }
      #student-myclass .myclass-course-top .class-info-wrap .class-info-option {
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        padding: 12px 0px;
        border-radius: 15px;
        background-color: #fff;
        box-shadow: 0px 2px 6px rgba(200, 200, 200, 0.3);
        z-index: 100; }
        #student-myclass .myclass-course-top .class-info-wrap .class-info-option ul {
          max-height: 252px;
          overflow: hidden auto; }
          #student-myclass .myclass-course-top .class-info-wrap .class-info-option ul li {
            padding: 12px 24px;
            transition: 0.21s; }
            #student-myclass .myclass-course-top .class-info-wrap .class-info-option ul li:hover {
              background-color: #cef1f4; }
            #student-myclass .myclass-course-top .class-info-wrap .class-info-option ul li span {
              display: flex;
              align-items: center;
              font-size: 14px;
              font-weight: 500;
              color: #504d58; }
              #student-myclass .myclass-course-top .class-info-wrap .class-info-option ul li span strong {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: 500;
                color: #24212e; }
                #student-myclass .myclass-course-top .class-info-wrap .class-info-option ul li span strong:after {
                  content: '';
                  display: inline-block;
                  width: 2px;
                  height: 14px;
                  background: #dfdfe4;
                  margin: 0 8px; }
      #student-myclass .myclass-course-top .class-info-wrap button {
        font-weight: 400; }
  #student-myclass .myclass-course-bottom {
    background: #ffffff;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    padding: 32px;
    height: 100%; }
    #student-myclass .myclass-course-bottom > h1 {
      font-size: 26px;
      font-weight: 700;
      color: #24212e;
      margin-bottom: 30px; }
    #student-myclass .myclass-course-bottom > ul {
      display: flex;
      flex-direction: column;
      gap: 15px;
      margin-bottom: 37px;
      overflow: auto;
      max-height: calc(100% - 190px); }
      #student-myclass .myclass-course-bottom > ul > li {
        padding: 18px 15px 18px 17px;
        border: 1px solid #dfdfe4;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between; }
        #student-myclass .myclass-course-bottom > ul > li .title {
          color: #504d58;
          font-size: 16px;
          font-weight: 500;
          line-height: 24px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden; }
        #student-myclass .myclass-course-bottom > ul > li .date {
          color: #7c7a82;
          font-size: 14px;
          line-height: 22px;
          flex-shrink: 0;
          margin-left: 16px; }
        #student-myclass .myclass-course-bottom > ul > li .new_factory_tag {
          margin-right: 4px; }
        #student-myclass .myclass-course-bottom > ul > li.on {
          padding: 17px 14px 17px 16px;
          border: 2.5px solid #09b9c6;
          filter: drop-shadow(0px 3px 4px rgba(104, 154, 170, 0.3)); }
        #student-myclass .myclass-course-bottom > ul > li .line-top {
          padding-bottom: 18px;
          border-bottom: 1px solid #87d9e0;
          display: flex;
          justify-content: space-between;
          align-items: center; }
          #student-myclass .myclass-course-bottom > ul > li .line-top .line-top-left {
            font-size: 20px;
            font-weight: 500;
            color: #24212e;
            width: calc(100% - 130px);
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap; }
            #student-myclass .myclass-course-bottom > ul > li .line-top .line-top-left:hover {
              text-overflow: initial;
              overflow: visible;
              white-space: break-spaces; }
          #student-myclass .myclass-course-bottom > ul > li .line-top .line-top-right {
            font-size: 15px;
            font-weight: 400;
            font-family: 'Inter', 'Noto Sans KR';
            color: #a7a6ab;
            white-space: nowrap; }
        #student-myclass .myclass-course-bottom > ul > li .line-bottom {
          padding-top: 12px; }
          #student-myclass .myclass-course-bottom > ul > li .line-bottom p {
            font-size: 14px;
            font-weight: 400;
            color: #7c7a82; }
            #student-myclass .myclass-course-bottom > ul > li .line-bottom p em {
              font-size: inherit;
              font-weight: 500;
              color: #504d58;
              margin-right: 3px; }
        #student-myclass .myclass-course-bottom > ul > li .like {
          margin-right: 5px; }
        #student-myclass .myclass-course-bottom > ul > li.active {
          border: 2px solid #09b9c6;
          background: rgba(9, 185, 198, 0.04); }
    #student-myclass .myclass-course-bottom .tab_line_wrap {
      position: relative;
      width: calc(100% + 64px);
      margin: 6px 0 20px -32px;
      padding: 0 32px; }
      #student-myclass .myclass-course-bottom .tab_line_wrap .line {
        width: 100%; }
      #student-myclass .myclass-course-bottom .tab_line_wrap .tab_line li {
        min-width: unset;
        padding-left: 0;
        padding-right: 0; }
        #student-myclass .myclass-course-bottom .tab_line_wrap .tab_line li:not(:first-child) {
          margin-left: 24px; }
        #student-myclass .myclass-course-bottom .tab_line_wrap .tab_line li a {
          color: #a7a6ab; }
          #student-myclass .myclass-course-bottom .tab_line_wrap .tab_line li a.on {
            color: #24212e; }
    #student-myclass .myclass-course-bottom .course_list_wrap {
      padding: 0;
      gap: 0; }
      #student-myclass .myclass-course-bottom .course_list_wrap > li {
        padding: 14px 10px 14px 12px; }
        #student-myclass .myclass-course-bottom .course_list_wrap > li img.like {
          transform: translateY(-3px); }
        #student-myclass .myclass-course-bottom .course_list_wrap > li .del_btn {
          display: inline-block;
          width: 22px;
          height: 22px;
          background: url("../../../img/icon/icon_trash_line_gray.svg") no-repeat center; }
  #student-myclass .myclass-training {
    width: calc(60% - 10px);
    padding: 32px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12);
    height: 100%; }
    #student-myclass .myclass-training .daterange_wrap {
      margin-bottom: 24px; }
  #student-myclass h1 {
    color: #24212e;
    font-size: 20px;
    font-weight: 700;
    line-height: 30px; }
  #student-myclass h2 {
    color: #504d58;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    margin-top: 8px; }
  #student-myclass .training-date-box {
    display: flex;
    align-items: center;
    margin-top: 20px; }
    #student-myclass .training-date-box > button {
      min-width: 80px;
      margin-right: 0;
      font-size: 14px; }
    #student-myclass .training-date-box .slide_date_wrap {
      width: calc(100% - 96px);
      margin-left: 16px;
      margin-top: 0; }
  #student-myclass .training-cont-wrap {
    max-height: calc(100% - 152px);
    overflow-y: auto; }
  #student-myclass .training-cont-box {
    margin-top: 24px; }
    #student-myclass .training-cont-box:first-child {
      margin-top: 0; }
    #student-myclass .training-cont-box .peroid {
      color: #504d58;
      font-size: 16px;
      line-height: 24px;
      margin-bottom: 12px; }
    #student-myclass .training-cont-box .section {
      border-radius: 12px;
      border: 1px solid #e9e9ea; }
      #student-myclass .training-cont-box .section:not(:first-of-type) {
        margin-top: 12px; }
      #student-myclass .training-cont-box .section.before .title_area {
        border-radius: 12px;
        border-bottom: none; }
      #student-myclass .training-cont-box .section .title_area {
        min-height: 54px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        background: #f8f8fa;
        border-bottom: 1px solid #e9e9ea;
        border-radius: 12px 12px 0 0; }
        #student-myclass .training-cont-box .section .title_area .inner_overflow.mb_style .new_factory_tag {
          min-width: 46px;
          text-indent: 0; }
        #student-myclass .training-cont-box .section .title_area .inner_overflow.mb_style .title_right {
          margin-left: 0; }
        #student-myclass .training-cont-box .section .title_area .inner_overflow .new_factory_tag {
          vertical-align: middle;
          margin-bottom: 0; }
        #student-myclass .training-cont-box .section .title_area .inner_overflow .mb_tag_align {
          position: absolute;
          top: 14px;
          left: 16px;
          height: 26px;
          display: inline-flex;
          align-items: center; }
        #student-myclass .training-cont-box .section .title_area.fold .inner_overflow {
          height: 26px;
          overflow: hidden; }
          #student-myclass .training-cont-box .section .title_area.fold .inner_overflow .name_txt.mb_version {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; }
          #student-myclass .training-cont-box .section .title_area.fold .inner_overflow .mb_tag_align {
            flex-shrink: 0; }
        #student-myclass .training-cont-box .section .title_area.fold .title_detail_btn {
          transform: rotateZ(0) !important; }
        #student-myclass .training-cont-box .section .title_area .name_txt {
          color: #504d58;
          font-size: 15px;
          font-weight: 500;
          line-height: 24px;
          margin-left: 8px; }
          #student-myclass .training-cont-box .section .title_area .name_txt.mb_version {
            display: block;
            word-break: keep-all;
            line-height: 26px; }
            #student-myclass .training-cont-box .section .title_area .name_txt.mb_version .title_detail_btn {
              position: absolute;
              top: 18px;
              right: 16px;
              transform: rotateZ(-180deg);
              text-indent: 0; }
        #student-myclass .training-cont-box .section .title_area .new_factory_tag {
          min-width: 45px;
          padding-left: 7px;
          padding-right: 7px; }
          #student-myclass .training-cont-box .section .title_area .new_factory_tag.premium_tag {
            height: 22px;
            line-height: 20px;
            font-size: 11px;
            padding-left: 19px;
            padding-right: 5px; }
            #student-myclass .training-cont-box .section .title_area .new_factory_tag.premium_tag:before {
              width: 14px;
              height: 14px;
              line-height: 14px;
              font-size: 10px; }
          #student-myclass .training-cont-box .section .title_area .new_factory_tag:last-of-type {
            margin-right: 8px; }
        #student-myclass .training-cont-box .section .title_area .training-number {
          font-size: 14px;
          line-height: 22px;
          font-weight: 500;
          display: flex;
          flex-shrink: 0;
          color: #7c7a82; }
          #student-myclass .training-cont-box .section .title_area .training-number:not(:last-child) {
            margin-right: 12px; }
          #student-myclass .training-cont-box .section .title_area .training-number strong {
            font: inherit;
            color: #504d58;
            font-weight: 700;
            margin-left: 6px; }
        #student-myclass .training-cont-box .section .title_area .title_right {
          display: flex;
          align-items: center;
          flex-shrink: 0;
          margin-left: 16px; }
      #student-myclass .training-cont-box .section .training-list {
        padding: 16px;
        display: flex;
        overflow: auto; }
        #student-myclass .training-cont-box .section .training-list li {
          position: relative;
          width: calc(33.33% - 8px);
          padding: 16px 16px 60px 16px;
          border-radius: 8px;
          border: 1px solid #e9e9ea;
          min-width: 290px; }
          #student-myclass .training-cont-box .section .training-list li:not(:first-of-type) {
            margin-left: 8px; }
          #student-myclass .training-cont-box .section .training-list li p {
            display: flex;
            align-items: center;
            color: #7c7a82;
            font-size: 13px;
            font-weight: 400;
            line-height: 20px; }
            #student-myclass .training-cont-box .section .training-list li p .title_hover_txt span {
              display: block; }
              #student-myclass .training-cont-box .section .training-list li p .title_hover_txt span:last-child {
                margin-left: 0;
                margin-top: 4px; }
            #student-myclass .training-cont-box .section .training-list li p img {
              width: 14px;
              margin-left: 4px; }
              #student-myclass .training-cont-box .section .training-list li p img:hover + .title_hover_txt {
                display: block !important; }
            #student-myclass .training-cont-box .section .training-list li p .title_hover_txt .item {
              display: flex;
              align-items: center;
              justify-content: space-between;
              color: #7c7a82;
              font-size: 13px; }
              #student-myclass .training-cont-box .section .training-list li p .title_hover_txt .item span {
                color: #504d58;
                font-size: 14px;
                font-weight: 500;
                margin-top: 0;
                margin-left: 24px; }
          #student-myclass .training-cont-box .section .training-list li > p:not(:first-child) {
            margin-top: 8px; }
          #student-myclass .training-cont-box .section .training-list li .study_progress_wrap {
            margin-top: 8px; }
            #student-myclass .training-cont-box .section .training-list li .study_progress_wrap:not(:nth-child(2)) {
              margin-bottom: 8px !important; }
          #student-myclass .training-cont-box .section .training-list li .question_info {
            text-align: left;
            display: flex;
            margin-top: 10px; }
            #student-myclass .training-cont-box .section .training-list li .question_info p {
              display: initial;
              color: #7c7a82;
              font-size: 12px;
              line-height: 18px; }
              #student-myclass .training-cont-box .section .training-list li .question_info p:not(:first-of-type) {
                margin-left: 8px; }
              #student-myclass .training-cont-box .section .training-list li .question_info p span {
                display: inline-block;
                font: inherit;
                color: inherit; }
          #student-myclass .training-cont-box .section .training-list li .training_btn_wrap {
            width: calc(100% - 32px);
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 16px;
            position: absolute;
            bottom: 16px; }
            #student-myclass .training-cont-box .section .training-list li .training_btn_wrap > div {
              display: flex;
              align-items: center; }
              #student-myclass .training-cont-box .section .training-list li .training_btn_wrap > div button {
                font-size: 12px;
                flex-shrink: 0;
                padding: 0 8px;
                margin-right: 6px; }
                #student-myclass .training-cont-box .section .training-list li .training_btn_wrap > div button:last-of-type {
                  margin-right: 0; }
          #student-myclass .training-cont-box .section .training-list li .title_hover_txt {
            top: 36px;
            padding: 10px 12px; }
            #student-myclass .training-cont-box .section .training-list li .title_hover_txt span {
              font: inherit;
              color: inherit; }
              #student-myclass .training-cont-box .section .training-list li .title_hover_txt span:not(:first-of-type) {
                margin-left: 10px; }
      #student-myclass .training-cont-box .section .study_progress_wrap .study_progress {
        height: 10px;
        width: calc(100% - 42px);
        border: 2px solid #f2f2f7; }
      #student-myclass .training-cont-box .section .study_progress_wrap .num {
        color: #504d58;
        font-size: 13px;
        font-weight: 700;
        line-height: 20px; }
  #student-myclass .date-selectbox {
    width: 140px;
    position: relative;
    margin-bottom: 20px;
    display: flex;
    align-items: center; }
    #student-myclass .date-selectbox .date-selectbox-item {
      display: flex;
      align-items: center;
      font-size: 0;
      position: relative; }
      #student-myclass .date-selectbox .date-selectbox-item > select {
        width: 100px;
        height: auto;
        padding: 0 5px 0 10px;
        font-size: 15px;
        font-weight: 600;
        color: #7c7a82;
        border: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: transparent;
        position: relative;
        z-index: 100; }
        #student-myclass .date-selectbox .date-selectbox-item > select:active, #student-myclass .date-selectbox .date-selectbox-item > select:focus {
          border: 0;
          outline: none; }
      #student-myclass .date-selectbox .date-selectbox-item .select-arrow {
        position: absolute;
        right: 0%;
        top: 55%;
        transform: translateY(-50%); }
        #student-myclass .date-selectbox .date-selectbox-item .select-arrow.rotate {
          transform: rotate(180deg) translateY(50%); }
  #student-myclass .no-course {
    text-align: center;
    padding: 30px 0;
    font-weight: 600;
    height: 100%;
    color: #d3d3d5; }
  #student-myclass .training_title_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between; }
    #student-myclass .training_title_wrap .training_right {
      display: flex;
      align-items: center; }
    #student-myclass .training_title_wrap .type_list {
      margin-right: 12px; }
  #student-myclass.mb_style .page-inner {
    height: auto !important; }
    #student-myclass.mb_style .page-inner.with_fix_btn {
      padding-bottom: 80px; }
  #student-myclass.mb_style .myclass-course-top {
    display: none; }
  #student-myclass.mb_style .myclass-inner {
    display: block;
    height: auto !important; }
  #student-myclass.mb_style .myclass-course {
    display: none; }
  #student-myclass.mb_style .myclass-training {
    padding: 0;
    border-radius: 0;
    position: relative; }
    #student-myclass.mb_style .myclass-training .course_naming {
      display: none; }
    #student-myclass.mb_style .myclass-training .training_title_wrap {
      display: none; }
    #student-myclass.mb_style .myclass-training .daterange_wrap {
      margin-top: 0;
      margin-bottom: 0;
      padding: 8px 0;
      border-bottom: 1px solid #e9e9ea;
      background-color: #ffffff;
      position: sticky;
      top: 48px;
      z-index: 11; }
      #student-myclass.mb_style .myclass-training .daterange_wrap > .new_factory_button {
        min-width: auto;
        width: 60px;
        margin-left: 20px;
        margin-right: 8px; }
      #student-myclass.mb_style .myclass-training .daterange_wrap .date_slide_wrap {
        max-width: calc(100% - 88px);
        padding: 0; }
        #student-myclass.mb_style .myclass-training .daterange_wrap .date_slide_wrap .btn_prev,
        #student-myclass.mb_style .myclass-training .daterange_wrap .date_slide_wrap .btn_next {
          display: none; }
        #student-myclass.mb_style .myclass-training .daterange_wrap .date_slide_wrap .date_chk_wrap input[type='checkbox'] + label {
          font-size: 13px;
          line-height: 20px; }
          #student-myclass.mb_style .myclass-training .daterange_wrap .date_slide_wrap .date_chk_wrap input[type='checkbox'] + label:last-of-type {
            margin-right: 20px; }
  #student-myclass.mb_style .type_count + .training-cont-wrap {
    padding-top: 16px; }
  #student-myclass.mb_style .training-cont-wrap {
    padding: 20px 20px 32px; }
  #student-myclass.mb_style .training-cont-box {
    padding-top: 0; }
    #student-myclass.mb_style .training-cont-box:not(:first-child) {
      margin-top: 16px; }
    #student-myclass.mb_style .training-cont-box .peroid {
      margin-bottom: 10px;
      font-weight: 500; }
    #student-myclass.mb_style .training-cont-box .section {
      border-radius: 8px;
      box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06); }
      #student-myclass.mb_style .training-cont-box .section.before .title_area {
        border-bottom: 1px solid #e9e9ea; }
      #student-myclass.mb_style .training-cont-box .section .title_area {
        display: block;
        padding: 16px 20px;
        border-radius: 8px 8px 0 0;
        position: relative; }
        #student-myclass.mb_style .training-cont-box .section .title_area .ellipsis .name_txt {
          display: block;
          margin-left: 0;
          margin-top: 4px; }
        #student-myclass.mb_style .training-cont-box .section .title_area .new_factory_tag {
          height: 20px;
          line-height: 18px;
          font-size: 11px; }
          #student-myclass.mb_style .training-cont-box .section .title_area .new_factory_tag:not(:first-of-type) {
            margin-left: 4px; }
        #student-myclass.mb_style .training-cont-box .section .title_area .training-number {
          position: absolute;
          right: 20px;
          top: 16px;
          font-size: 13px;
          line-height: 20px; }
          #student-myclass.mb_style .training-cont-box .section .title_area .training-number:not(:last-child) {
            margin-right: 0; }
          #student-myclass.mb_style .training-cont-box .section .title_area .training-number strong {
            margin-left: 4px; }
      #student-myclass.mb_style .training-cont-box .section .training-list {
        display: block;
        padding: 20px 20px 22px; }
        #student-myclass.mb_style .training-cont-box .section .training-list li {
          min-width: unset;
          width: 100%;
          padding: 0;
          border: none; }
          #student-myclass.mb_style .training-cont-box .section .training-list li:not(:first-of-type) {
            margin-left: 0;
            margin-top: 24px;
            padding-top: 24px;
            border-top: 1px solid #e9e9ea;
            border-radius: 0; }
          #student-myclass.mb_style .training-cont-box .section .training-list li .title_hover_txt {
            font-size: 12px;
            line-height: 18px;
            border-radius: 6px;
            top: 20px;
            left: 40px; }
            #student-myclass.mb_style .training-cont-box .section .training-list li .title_hover_txt span {
              font: inherit; }
          #student-myclass.mb_style .training-cont-box .section .training-list li > p {
            position: relative; }
          #student-myclass.mb_style .training-cont-box .section .training-list li .training_btn_wrap {
            position: static;
            display: block;
            width: 100%; }
            #student-myclass.mb_style .training-cont-box .section .training-list li .training_btn_wrap.contents_with {
              width: calc(100% + 40px);
              margin-top: 12px;
              margin-left: -20px;
              padding: 14px 20px 0;
              border-top: 1px solid #e9e9ea; }
            #student-myclass.mb_style .training-cont-box .section .training-list li .training_btn_wrap:first-child {
              margin-top: 0; }
            #student-myclass.mb_style .training-cont-box .section .training-list li .training_btn_wrap > div {
              flex-wrap: wrap; }
              #student-myclass.mb_style .training-cont-box .section .training-list li .training_btn_wrap > div:not(:first-child) {
                margin-top: 8px; }
              #student-myclass.mb_style .training-cont-box .section .training-list li .training_btn_wrap > div button {
                width: calc(50% - 4px);
                height: 40px;
                line-height: 38px;
                font-size: 14px; }
                #student-myclass.mb_style .training-cont-box .section .training-list li .training_btn_wrap > div button:not(:last-child) {
                  margin-right: 8px; }
                #student-myclass.mb_style .training-cont-box .section .training-list li .training_btn_wrap > div button:nth-child(even) {
                  margin-right: 0; }
                #student-myclass.mb_style .training-cont-box .section .training-list li .training_btn_wrap > div button:last-child {
                  width: 100%; }
                  #student-myclass.mb_style .training-cont-box .section .training-list li .training_btn_wrap > div button:last-child:nth-child(even) {
                    width: calc(50% - 4px); }
                  #student-myclass.mb_style .training-cont-box .section .training-list li .training_btn_wrap > div button:last-child:nth-child(n + 3) {
                    margin-top: 8px; }
          #student-myclass.mb_style .training-cont-box .section .training-list li .question_info {
            display: block;
            margin-top: 6px; }
            #student-myclass.mb_style .training-cont-box .section .training-list li .question_info p {
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 13px;
              line-height: 20px; }
              #student-myclass.mb_style .training-cont-box .section .training-list li .question_info p:not(:first-of-type) {
                margin-left: 0;
                margin-top: 2px; }
              #student-myclass.mb_style .training-cont-box .section .training-list li .question_info p.wrong_num {
                font-size: 14px;
                line-height: 22px;
                display: flex;
                justify-content: space-between;
                align-items: center; }
                #student-myclass.mb_style .training-cont-box .section .training-list li .question_info p.wrong_num span {
                  font: inherit;
                  color: inherit; }
                  #student-myclass.mb_style .training-cont-box .section .training-list li .question_info p.wrong_num span:before {
                    display: inline-block;
                    margin-right: 3px; }
              #student-myclass.mb_style .training-cont-box .section .training-list li .question_info p span {
                font-weight: 500;
                color: #504d58; }
                #student-myclass.mb_style .training-cont-box .section .training-list li .question_info p span:before {
                  display: none; }
      #student-myclass.mb_style .training-cont-box .section .study_progress_wrap {
        margin-top: 6px; }
        #student-myclass.mb_style .training-cont-box .section .study_progress_wrap .study_progress {
          width: 100%;
          height: 10px; }
        #student-myclass.mb_style .training-cont-box .section .study_progress_wrap .num {
          font-size: 14px;
          line-height: 22px;
          position: absolute;
          right: 0;
          top: -6px;
          transform: translateY(-100%); }

@media screen and (max-width: 1470px) {
  #student-myclass .myclass-course-bottom {
    padding: 24px; }
    #student-myclass .myclass-course-bottom .tab_line_wrap {
      width: calc(100% + 48px);
      margin-left: -24px;
      padding: 0 24px; }
  #student-myclass .myclass-training {
    padding: 24px; }
  #student-myclass .training-cont-box .section .training-list li .training_btn_wrap {
    width: calc(100% - 32px); }
  #student-myclass .training-cont-box .section .training-list .new_detail_area {
    display: flex;
    align-items: center;
    justify-content: space-between; }
    #student-myclass .training-cont-box .section .training-list .new_detail_area span {
      color: #7c7a82;
      font-size: 13px; }
    #student-myclass .training-cont-box .section .training-list .new_detail_area strong {
      color: #504d58;
      font-size: 14px;
      font-weight: 500; }
    #student-myclass .training-cont-box .section .training-list .new_detail_area + li {
      margin-top: 6px !important;
      padding-top: 0 !important;
      border-top: none !important; }
  #student-myclass {
    /*
    .myclass-training {
      padding: 35px 30px 40px;
    }
    */ }
    #student-myclass .myclass-inner {
      min-height: initial; }
  .view_wrapper .chart_body .start_date {
    width: calc(100% + 10px);
    flex-direction: column;
    gap: 5px; }
  .view_wrapper .view_bottom {
    margin-top: 40px; }
  .view_wrapper.c-again .chart_body .start_date {
    flex-direction: initial; }
  .view_wrapper.c-done .chart_body .start_date {
    flex-direction: initial; } }

@media screen and (max-width: 1024px) {
  #student-myclass {
    margin-top: 48px; }
    #student-myclass .page-inner {
      padding: 0; }
    #student-myclass .myclass-training {
      padding: 30px 16px;
      width: 100%;
      flex: 1;
      box-shadow: none; }
    #student-myclass .training-title-box > span {
      width: 50%;
      text-align: center;
      padding: 0 10px 10px;
      font-size: 14px;
      line-height: 1; }
      #student-myclass .training-title-box > span img {
        height: 14px;
        vertical-align: bottom;
        padding-top: 1px; }
      #student-myclass .training-title-box > span.on, #student-myclass .training-title-box > span.on2 {
        border-width: 3px;
        font-weight: 500; }
    #student-myclass .training-cont-box {
      padding-top: 20px; }
    #student-myclass .date-selectbox {
      width: 130px;
      margin-bottom: 14px; }
      #student-myclass .date-selectbox .date-selectbox-item select {
        min-width: auto;
        width: 107px;
        font-size: 12px; }
    #student-myclass .view_wrapper.c-again .chart_body .start_date {
      flex-direction: column; }
    #student-myclass .view_wrapper.c-done .chart_body .start_date {
      flex-direction: column; } }

#student-myclass-mobile {
  /*
  margin-top: 56px;
  */
  margin-top: 48px; }
  #student-myclass-mobile .page-inner {
    padding: 30px 0 0;
    background-color: #fbfcff; }
  #student-myclass-mobile .academy_name {
    width: calc(100% - 32px);
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
    border-radius: 15px; }
  #student-myclass-mobile .academy_name_top {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 13px;
    border-bottom: 1px solid #e9e9ea;
    font-size: 16px;
    font-weight: 700;
    color: #24212e; }
    #student-myclass-mobile .academy_name_top .tag_sticker {
      padding: 4px 10px 3px;
      border: 1px solid #24212e;
      border-radius: 5px;
      margin-right: 5px;
      background: #ffffff;
      font-size: 12px;
      font-weight: 700;
      font-family: 'Inter', 'Noto Sans KR';
      color: #24212e;
      white-space: pre; }
      #student-myclass-mobile .academy_name_top .tag_sticker.premium + .data_title {
        max-width: calc(100% - 80px); }
      #student-myclass-mobile .academy_name_top .tag_sticker.free + .data_title {
        max-width: calc(100% - 55px); }
    #student-myclass-mobile .academy_name_top .data_title {
      display: flex;
      align-items: center;
      flex: 1; }
      #student-myclass-mobile .academy_name_top .data_title span {
        font-size: 16px;
        font-weight: 700;
        font-family: 'Inter', 'Noto Sans KR';
        color: #24212e;
        width: initial; }
      #student-myclass-mobile .academy_name_top .data_title img {
        margin-left: 10px; }
    #student-myclass-mobile .academy_name_top .star_sticker {
      width: 14px; }
  #student-myclass-mobile .academy_name_bottom {
    position: relative;
    margin-top: 13px;
    padding: 0 13px 13px; }
    #student-myclass-mobile .academy_name_bottom .academy_select_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 1; }
      #student-myclass-mobile .academy_name_bottom .academy_select_box .select_val {
        display: flex;
        align-items: center;
        width: 100%;
        width: calc(100% - 15px); }
        #student-myclass-mobile .academy_name_bottom .academy_select_box .select_val .first_val {
          font-size: 16px;
          font-weight: 700;
          color: #24212e;
          flex: 1;
          width: calc(100% - 90px); }
        #student-myclass-mobile .academy_name_bottom .academy_select_box .select_val .last_val {
          width: 110px;
          display: inline-block;
          font-size: 12px;
          font-weight: 500;
          color: #504d58;
          padding-left: 5px;
          margin-left: 5px;
          border-left: 1px solid #504d58; }
    #student-myclass-mobile .academy_name_bottom .academy_select_option {
      padding: 8px 8px 8px 14px;
      position: absolute;
      top: 40px;
      left: 0;
      right: 0;
      border-radius: 10px;
      background: #fff;
      z-index: 10;
      box-shadow: 0px 3px 6px 0 rgba(217, 217, 217, 0.5); }
      #student-myclass-mobile .academy_name_bottom .academy_select_option ul {
        max-height: 141px;
        overflow: hidden auto; }
        #student-myclass-mobile .academy_name_bottom .academy_select_option ul li {
          display: flex;
          align-items: center;
          padding: 8px 0; }
          #student-myclass-mobile .academy_name_bottom .academy_select_option ul li .first_val {
            font-size: 16px;
            font-weight: 700;
            color: #24212e;
            flex: 1;
            width: calc(100% - 90px); }
          #student-myclass-mobile .academy_name_bottom .academy_select_option ul li .last_val {
            width: 130px;
            display: inline-block;
            font-size: 12px;
            font-weight: 500;
            color: #504d58;
            padding-left: 5px;
            margin-left: 5px;
            border-left: 1px solid #504d58; }
    #student-myclass-mobile .academy_name_bottom img {
      width: 12px;
      height: 6px; }
  #student-myclass-mobile .academy_course {
    border-radius: 15px 15px 0 0;
    background-color: #fff;
    box-shadow: 0px -8px 8px rgba(92, 103, 201, 0.1);
    margin-top: 15px; }
  #student-myclass-mobile .academy_course_top {
    padding: 20px 0 17px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #24212e;
    border-bottom: 1px solid #e9e9ea; }
    #student-myclass-mobile .academy_course_top em {
      font-size: inherit;
      font-weight: inherit;
      color: #0f9ba5; }
  #student-myclass-mobile .academy_course_bottom {
    padding: 10px 10px 40px 16px;
    margin-right: 10px;
    min-height: calc(100vh - 350px); }
    #student-myclass-mobile .academy_course_bottom li h1 {
      font-size: 14px;
      font-weight: 700;
      color: #24212e; }
    #student-myclass-mobile .academy_course_bottom li p {
      font-size: 12px;
      font-weight: 500;
      color: #7c7a82;
      margin-top: 3px; }
    #student-myclass-mobile .academy_course_bottom li:not(:first-of-type) {
      margin-top: 25px; }
    #student-myclass-mobile .academy_course_bottom li.nodata {
      font-size: 14px;
      font-weight: 700;
      color: #d3d3d5;
      height: 100%;
      padding: 20% 0;
      display: flex;
      align-items: center;
      justify-content: center; }
  #student-myclass-mobile.new_style .page-inner {
    padding: 20px 0 112px;
    background-color: #f8f9fa; }
  #student-myclass-mobile.new_style .academy_name {
    width: calc(100% - 40px);
    border-radius: 0;
    box-shadow: none;
    background-color: transparent; }
  #student-myclass-mobile.new_style .academy_name_top {
    display: none; }
  #student-myclass-mobile.new_style .academy_name_bottom {
    margin-top: 0;
    padding: 0; }
    #student-myclass-mobile.new_style .academy_name_bottom .academy_info {
      padding: 20px;
      border-radius: 8px;
      border: 1px solid #e9e9ea;
      background-color: #ffffff;
      box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06); }
      #student-myclass-mobile.new_style .academy_name_bottom .academy_info .class_name {
        font-size: 16px;
        line-height: 24px;
        font-weight: 500;
        color: #24212e; }
      #student-myclass-mobile.new_style .academy_name_bottom .academy_info .teacher_name {
        font-size: 14px;
        line-height: 22px;
        color: #7c7a82;
        margin-bottom: 4px; }
      #student-myclass-mobile.new_style .academy_name_bottom .academy_info .academy_btns {
        display: flex;
        width: 100%;
        margin-top: 24px; }
        #student-myclass-mobile.new_style .academy_name_bottom .academy_info .academy_btns button {
          flex: 1; }
          #student-myclass-mobile.new_style .academy_name_bottom .academy_info .academy_btns button:not(:last-child) {
            margin-right: 8px; }
    #student-myclass-mobile.new_style .academy_name_bottom .academy_select_wrap {
      position: relative;
      margin-top: 40px; }
    #student-myclass-mobile.new_style .academy_name_bottom .academy_select_box {
      display: block;
      width: 100%;
      height: 40px;
      padding: 8px 44px 8px 10px;
      border-radius: 8px;
      background-color: #ffffff;
      border: 1px solid #dfdfe4;
      position: relative; }
      #student-myclass-mobile.new_style .academy_name_bottom .academy_select_box img {
        width: 20px;
        height: 20px;
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%); }
      #student-myclass-mobile.new_style .academy_name_bottom .academy_select_box .select_val {
        width: 100%; }
        #student-myclass-mobile.new_style .academy_name_bottom .academy_select_box .select_val .first_val {
          flex: initial;
          width: 100%;
          font-size: 14px;
          line-height: 22px;
          font-weight: 400;
          color: #504d58; }
      #student-myclass-mobile.new_style .academy_name_bottom .academy_select_box.opened {
        border-color: #504d58; }
        #student-myclass-mobile.new_style .academy_name_bottom .academy_select_box.opened img {
          transform: translateY(-50%) scale(-1); }
    #student-myclass-mobile.new_style .academy_name_bottom .academy_select_option {
      width: 100%;
      position: absolute;
      overflow-y: auto;
      border: 1px solid #dfdfe4;
      border-radius: 8px;
      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
      margin-top: 4px;
      padding: 0; }
      #student-myclass-mobile.new_style .academy_name_bottom .academy_select_option ul {
        padding: 0; }
        #student-myclass-mobile.new_style .academy_name_bottom .academy_select_option ul li {
          display: block;
          padding: 0;
          position: relative; }
          #student-myclass-mobile.new_style .academy_name_bottom .academy_select_option ul li:not(:first-child)::before {
            content: '';
            display: inline-block;
            width: calc(100% - 32px);
            height: 1px;
            background-color: #dfdfe4;
            position: absolute;
            top: 0;
            left: 16px; }
          #student-myclass-mobile.new_style .academy_name_bottom .academy_select_option ul li div {
            padding: 12px 16px;
            width: 100%;
            font-size: 13px;
            font-weight: 400;
            color: #504d58; }
    #student-myclass-mobile.new_style .academy_name_bottom .academy_btns button.icon_reset img {
      width: auto;
      height: auto; }
    #student-myclass-mobile.new_style .academy_name_bottom .academy_btns button.icon_up img {
      transform: translateY(-2px); }
  #student-myclass-mobile.new_style .academy_course {
    margin-top: 20px;
    background-color: transparent;
    box-shadow: none; }
  #student-myclass-mobile.new_style .academy_course_top {
    width: calc(100% - 40px);
    margin: 0 auto;
    padding: 20px 0 10px;
    text-align: left;
    border-top: 1px solid #e9e9ea;
    border-bottom: none; }
    #student-myclass-mobile.new_style .academy_course_top .list_title {
      font-size: 18px;
      line-height: 28px;
      font-weight: 700;
      color: #24212e; }
      #student-myclass-mobile.new_style .academy_course_top .list_title span {
        font: inherit;
        color: inherit; }
  #student-myclass-mobile.new_style .academy_course_bottom {
    padding: 0 20px;
    min-height: unset;
    margin-right: 0; }
    #student-myclass-mobile.new_style .academy_course_bottom li {
      padding: 16px 20px;
      border-radius: 8px;
      border: 1px solid #dfdfe4;
      background-color: #ffffff;
      cursor: pointer; }
      #student-myclass-mobile.new_style .academy_course_bottom li:not(:first-of-type) {
        margin-top: 8px; }
      #student-myclass-mobile.new_style .academy_course_bottom li.nodata {
        border-radius: 0;
        border: none;
        background-color: transparent;
        cursor: default; }
      #student-myclass-mobile.new_style .academy_course_bottom li h1 {
        font-size: 16px;
        line-height: 24px;
        font-weight: 500;
        color: #504d58; }
      #student-myclass-mobile.new_style .academy_course_bottom li p {
        font-size: 14px;
        line-height: 22px;
        font-weight: 400;
        margin-top: 0; }
      #student-myclass-mobile.new_style .academy_course_bottom li .course-bottom {
        display: flex;
        align-items: fe;
        justify-content: space-between;
        margin-top: 6px; }
        #student-myclass-mobile.new_style .academy_course_bottom li .course-bottom .info {
          display: flex;
          flex-wrap: wrap; }
          #student-myclass-mobile.new_style .academy_course_bottom li .course-bottom .info p {
            font-size: 14px;
            line-height: 22px;
            font-weight: 400; }
            #student-myclass-mobile.new_style .academy_course_bottom li .course-bottom .info p:not(:last-of-type) {
              padding-right: 9px;
              position: relative;
              margin-right: 8px; }
              #student-myclass-mobile.new_style .academy_course_bottom li .course-bottom .info p:not(:last-of-type)::after {
                content: '';
                display: inline-block;
                width: 1px;
                height: 10px;
                background-color: #c7c7cc;
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%); }
            #student-myclass-mobile.new_style .academy_course_bottom li .course-bottom .info p span {
              font: inherit;
              font-weight: 700;
              color: #504d58;
              margin-left: 4px; }
        #student-myclass-mobile.new_style .academy_course_bottom li .course-bottom .tags {
          margin-left: 8px; }
        #student-myclass-mobile.new_style .academy_course_bottom li .course-bottom .new_factory_tag {
          line-height: 18px;
          flex-shrink: 0; }
      #student-myclass-mobile.new_style .academy_course_bottom li .course-top {
        display: flex;
        align-items: center;
        justify-content: space-between; }
        #student-myclass-mobile.new_style .academy_course_bottom li .course-top .course-name {
          display: flex;
          align-items: center; }
        #student-myclass-mobile.new_style .academy_course_bottom li .course-top .bookmark_chk + label {
          transform: translateY(0); }
        #student-myclass-mobile.new_style .academy_course_bottom li .course-top .del_btn {
          width: 18px;
          height: 18px;
          background: url("../../../img/icon/icon_trash_line_gray.svg") no-repeat center;
          margin-left: 6px; }

@media screen and (max-width: 375px) {
  #student-myclass-mobile.new_style .academy_name_bottom .academy_info .academy_btns button.long_btn {
    flex: 0 1 auto;
    flex-shrink: 0; } }

#st-myclass-main-mobile .page-inner {
  padding: 30px 0 0; }
  #st-myclass-main-mobile .page-inner .mobile-content {
    display: flex;
    flex-direction: column; }
    #st-myclass-main-mobile .page-inner .mobile-content .banner {
      margin: auto -16px 0; }
      #st-myclass-main-mobile .page-inner .mobile-content .banner img {
        width: 100%; }
    #st-myclass-main-mobile .page-inner .mobile-content > ul {
      display: flex;
      flex-direction: column;
      flex: 1;
      padding: 56px 16px 0; }
      #st-myclass-main-mobile .page-inner .mobile-content > ul > li {
        margin-bottom: 20px; }
        #st-myclass-main-mobile .page-inner .mobile-content > ul > li .academy-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          background: #ffffff;
          box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
          border-radius: 10px;
          padding: 15px; }
          #st-myclass-main-mobile .page-inner .mobile-content > ul > li .academy-item .item-title {
            display: flex;
            align-items: center;
            width: calc(100% - 20px); }
            #st-myclass-main-mobile .page-inner .mobile-content > ul > li .academy-item .item-title .label {
              margin-right: 5px;
              background: #ffffff;
              border-radius: 5px;
              padding: 4px 10px 3px;
              border: 1px solid #24212e;
              font-size: 12px;
              color: #24212e;
              white-space: pre; }
              #st-myclass-main-mobile .page-inner .mobile-content > ul > li .academy-item .item-title .label.cedu {
                width: 47px;
                height: 25px;
                background: #eb3d4f;
                border-radius: 8px;
                padding: 0 10px;
                border: none;
                background: url("/img/icon/cedu-red2.png") no-repeat;
                background-size: 26.87px 25px;
                background-color: #eb3d4f;
                background-position-x: center; }
            #st-myclass-main-mobile .page-inner .mobile-content > ul > li .academy-item .item-title p {
              display: flex;
              align-items: center;
              font-size: 16px;
              line-height: 23px;
              letter-spacing: -0.05em;
              flex: 1;
              width: 100%;
              /* Black */
              color: #24212e; }
              #st-myclass-main-mobile .page-inner .mobile-content > ul > li .academy-item .item-title p span {
                width: initial;
                max-width: 150px; }
              #st-myclass-main-mobile .page-inner .mobile-content > ul > li .academy-item .item-title p i {
                width: 14px;
                height: 14px;
                background-repeat: no-repeat;
                margin-left: 5px;
                cursor: pointer; }
                #st-myclass-main-mobile .page-inner .mobile-content > ul > li .academy-item .item-title p i.fill {
                  background: url("/img/icon/icon_star_fill.svg");
                  background-size: 100%;
                  background-size: contain;
                  background-repeat: no-repeat; }
                #st-myclass-main-mobile .page-inner .mobile-content > ul > li .academy-item .item-title p i.line {
                  background: url("/img/icon/icon_star_line.svg");
                  background-size: 100%;
                  background-size: contain;
                  background-repeat: no-repeat; }
          #st-myclass-main-mobile .page-inner .mobile-content > ul > li .academy-item.coupon_box {
            background-color: #01b298;
            box-shadow: 0px 3px 3px rgba(118, 129, 229, 0.3);
            justify-content: center;
            height: 50px; }
            #st-myclass-main-mobile .page-inner .mobile-content > ul > li .academy-item.coupon_box img {
              width: 28px;
              margin-left: 8px; }
            #st-myclass-main-mobile .page-inner .mobile-content > ul > li .academy-item.coupon_box .item-title {
              width: auto !important; }
              #st-myclass-main-mobile .page-inner .mobile-content > ul > li .academy-item.coupon_box .item-title p.noto-b {
                font-weight: 700;
                color: #fff !important; }
        #st-myclass-main-mobile .page-inner .mobile-content > ul > li .detail-list {
          display: flex;
          flex-direction: column;
          gap: 20px;
          margin-top: 20px;
          padding-bottom: 20px;
          border-bottom: 1px solid #e9e9ea; }
          #st-myclass-main-mobile .page-inner .mobile-content > ul > li .detail-list .detail-list-item {
            border-radius: 15px;
            padding: 15px 20px; }
            #st-myclass-main-mobile .page-inner .mobile-content > ul > li .detail-list .detail-list-item .type-title {
              display: flex;
              align-items: center;
              margin-bottom: 5px; }
              #st-myclass-main-mobile .page-inner .mobile-content > ul > li .detail-list .detail-list-item .type-title img {
                margin-right: 5px; }
              #st-myclass-main-mobile .page-inner .mobile-content > ul > li .detail-list .detail-list-item .type-title span {
                font-size: 18px;
                color: #fff;
                text-align: left; }
            #st-myclass-main-mobile .page-inner .mobile-content > ul > li .detail-list .detail-list-item .type-info {
              display: flex;
              align-items: center; }
              #st-myclass-main-mobile .page-inner .mobile-content > ul > li .detail-list .detail-list-item .type-info span {
                display: inline-block;
                font-weight: 500; }
                #st-myclass-main-mobile .page-inner .mobile-content > ul > li .detail-list .detail-list-item .type-info span.info-name {
                  font-size: 14px;
                  color: #fff; }
                  #st-myclass-main-mobile .page-inner .mobile-content > ul > li .detail-list .detail-list-item .type-info span.info-name:after {
                    content: '';
                    display: inline-block;
                    width: 2px;
                    height: 10px;
                    background: #fff;
                    margin: 0 5px; }
                #st-myclass-main-mobile .page-inner .mobile-content > ul > li .detail-list .detail-list-item .type-info span.info-course {
                  font-size: 14px;
                  color: #fff; }
            #st-myclass-main-mobile .page-inner .mobile-content > ul > li .detail-list .detail-list-item span {
              font-size: 12px;
              color: #fff;
              text-align: left; }
            #st-myclass-main-mobile .page-inner .mobile-content > ul > li .detail-list .detail-list-item.cyan {
              background: #09b9c6; }
            #st-myclass-main-mobile .page-inner .mobile-content > ul > li .detail-list .detail-list-item.purple {
              background: #7681e5; }
            #st-myclass-main-mobile .page-inner .mobile-content > ul > li .detail-list .detail-list-item.blue {
              background: #22a4ed; }
            #st-myclass-main-mobile .page-inner .mobile-content > ul > li .detail-list .detail-list-item.red {
              background: #ff5050; }
            #st-myclass-main-mobile .page-inner .mobile-content > ul > li .detail-list .detail-list-item.pink {
              background: #ff84b0; }
            #st-myclass-main-mobile .page-inner .mobile-content > ul > li .detail-list .detail-list-item.orange {
              background: #ffaa04; }
        #st-myclass-main-mobile .page-inner .mobile-content > ul > li span.notice {
          display: block;
          text-align: center; }

#st-myclass-main-mobile .toggle-wrapper {
  width: 40px;
  height: 23px;
  display: flex;
  justify-content: flex-end;
  align-items: center; }

main#mobile-student-manage {
  margin-top: 56px; }
  main#mobile-student-manage .page-inner {
    padding-top: 20px;
    background: #fbfcff; }
  main#mobile-student-manage .page-title {
    font-size: 22px;
    font-weight: 700;
    color: #24212e;
    padding: 0 16px;
    margin-bottom: 25px; }
    main#mobile-student-manage .page-title img {
      width: 21px;
      margin-right: 8px;
      vertical-align: bottom; }
  main#mobile-student-manage .academy-wrap {
    background-color: #fff;
    border-radius: 15px 15px 0 0; }

#academic-management-list.mobile_ver {
  padding: 15px 16px; }
  #academic-management-list.mobile_ver > ul > li:not(:last-of-type) {
    margin-bottom: 20px; }
  #academic-management-list.mobile_ver > ul > li:last-of-type .list-head h2 {
    color: #ff5050; }
  #academic-management-list.mobile_ver > ul > li .list-head {
    padding: 0 0 15px; }
    #academic-management-list.mobile_ver > ul > li .list-head .title h2 {
      font-size: 18px;
      font-weight: 700; }
  #academic-management-list.mobile_ver > ul > li .list-body {
    padding: 15px 0 33px;
    border-bottom: 1px solid #e3e2f0; }
    #academic-management-list.mobile_ver > ul > li .list-body .total {
      margin-bottom: 19px; }
    #academic-management-list.mobile_ver > ul > li .list-body ul li {
      padding: 17px 20px;
      justify-content: space-between;
      align-items: center; }
      #academic-management-list.mobile_ver > ul > li .list-body ul li .st-name {
        font-size: 16px;
        font-weight: 700; }
      #academic-management-list.mobile_ver > ul > li .list-body ul li .st-id {
        font-size: 13px;
        font-weight: 500; }

main#mobile-teacher-manage {
  margin-top: 56px;
  background: #fbfcff; }
  main#mobile-teacher-manage .page-inner {
    padding-top: 30px; }
  main#mobile-teacher-manage .manage-select {
    position: relative;
    width: calc(100% - 32px);
    margin: 0 auto;
    padding: 14px;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    background-color: #fff; }
    main#mobile-teacher-manage .manage-select .selected-area {
      display: flex;
      justify-content: space-between;
      align-items: center; }
      main#mobile-teacher-manage .manage-select .selected-area .selected-val {
        display: flex;
        align-items: center; }
      main#mobile-teacher-manage .manage-select .selected-area .first-val {
        font-size: 16px;
        font-weight: 600;
        color: inherit;
        margin-right: 3px; }
      main#mobile-teacher-manage .manage-select .selected-area .last-val {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-weight: 700;
        color: #24212e; }
        main#mobile-teacher-manage .manage-select .selected-area .last-val:before {
          content: '';
          display: inline-block;
          margin: 0 5px;
          width: 1px;
          height: 12px;
          background: #24212e; }
    main#mobile-teacher-manage .manage-select .option-area {
      padding: 8px 8px 8px 14px;
      position: absolute;
      top: 56px;
      left: 0;
      right: 0;
      border-radius: 10px;
      background: #fff;
      z-index: 10;
      box-shadow: 0px 3px 6px 0 rgba(217, 217, 217, 0.5); }
      main#mobile-teacher-manage .manage-select .option-area ul {
        max-height: 141px;
        overflow: hidden auto; }
        main#mobile-teacher-manage .manage-select .option-area ul li {
          display: flex;
          align-items: center;
          padding: 8px 0; }
          main#mobile-teacher-manage .manage-select .option-area ul li .first-val {
            font-size: 16px;
            font-weight: 600;
            color: inherit;
            margin-right: 3px; }
          main#mobile-teacher-manage .manage-select .option-area ul li .last-val {
            display: flex;
            align-items: center;
            font-size: 12px;
            font-weight: 700;
            color: #24212e; }
            main#mobile-teacher-manage .manage-select .option-area ul li .last-val:before {
              content: '';
              display: inline-block;
              margin: 0 5px;
              width: 1px;
              height: 12px;
              background: #24212e; }
  main#mobile-teacher-manage .manage-list {
    background: #ffffff;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
    border-radius: 15px;
    height: calc(100vh - 118px);
    margin-top: 15px; }
  main#mobile-teacher-manage .enrolled-total {
    padding: 20px 10px 17px;
    border-bottom: 1px solid #e9e9ea;
    font-size: 16px;
    font-weight: 900;
    color: #24212e;
    text-align: center; }
    main#mobile-teacher-manage .enrolled-total span {
      font-size: inherit;
      font-weight: inherit;
      color: #0f9ba5;
      margin-left: 5px; }
  main#mobile-teacher-manage .enrolled-list {
    height: calc(100% - 58px);
    overflow: auto;
    padding: 23px 10px 23px 16px; }
    main#mobile-teacher-manage .enrolled-list li {
      font-size: 14px;
      font-weight: 900;
      color: #24212e;
      text-align: left; }
      main#mobile-teacher-manage .enrolled-list li img {
        width: 40px;
        margin-right: 9px; }
      main#mobile-teacher-manage .enrolled-list li:not(:last-of-type) {
        margin-bottom: 25px; }
    main#mobile-teacher-manage .enrolled-list.nodata {
      display: flex;
      justify-content: center;
      align-items: center; }
      main#mobile-teacher-manage .enrolled-list.nodata li {
        color: #d3d3d5; }

main#mobile-manage-detail {
  margin-top: 56px; }
  main#mobile-manage-detail .page-inner {
    padding: 30px 16px 0;
    display: flex;
    flex-direction: column;
    gap: 24px; }
  main#mobile-manage-detail.teacher-ver .page-inner {
    padding-bottom: 90px;
    height: calc(100vh - 210px);
    overflow: hidden auto; }
    main#mobile-manage-detail.teacher-ver .page-inner.link-page-inner {
      height: calc(100vh - 56px); }
  main#mobile-manage-detail.print-ver .page-inner {
    padding-bottom: 20px; }

div#mo-academic-detail-print #pc-play-setting,
div#mo-academic-detail-print #pc-sign-info,
div#mo-academic-detail-print #pc-declare {
  display: none; }

#add-free-campus-page-mobile {
  margin-top: 52px;
  background: #fbfcff; }
  #add-free-campus-page-mobile .page-title {
    font-size: 22px;
    font-weight: 700;
    color: #24212e;
    padding: 0 16px 0 16px;
    margin-bottom: 30px; }
    #add-free-campus-page-mobile .page-title img {
      width: 21px;
      margin-right: 8px;
      vertical-align: bottom; }
  #add-free-campus-page-mobile .title-box {
    text-align: center;
    color: #24212e;
    padding: 0 24px; }
    #add-free-campus-page-mobile .title-box b {
      font-size: 15px;
      font-weight: normal; }
    #add-free-campus-page-mobile .title-box p {
      margin-top: 12px;
      font-size: 12px; }
  #add-free-campus-page-mobile .page-inner {
    padding: 30px 0 65px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto; }

.play-types .target {
  margin-bottom: 100px; }
  .play-types .target p {
    font-size: 24px;
    color: #504d58; }

.play-types .answer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap; }
  .play-types .answer p {
    font-size: 24px;
    color: #504d58; }

@media screen and (max-width: 1024px) {
  main.contentPlay.preview_example .preview_txt {
    display: none; }
  main.contentPlay .play-types .target {
    margin-bottom: 50px; }
  main.contentPlay .play-types .target p,
  main.contentPlay .play-types .answer p {
    font-size: 19px; } }

#voca .page-inner .voca-content {
  display: flex;
  gap: 20px;
  margin-top: 24px; }

#voca.voca_tr .page-inner {
  height: 100%; }

#voca.voca_tr .voca-content_wrap {
  width: calc(100% - 608px);
  margin-right: 24px; }

#voca.voca_tr .voca-content {
  margin-bottom: 32px; }

#voca.voca_tr.mb_voca_tr {
  height: auto !important;
  background-color: #ffffff;
  padding-top: 68px;
  padding-bottom: 120px; }
  #voca.voca_tr.mb_voca_tr .page-inner > .white_card.detail_card {
    display: block;
    padding: 16px 20px;
    border: 1px solid #e9e9ea; }
    #voca.voca_tr.mb_voca_tr .page-inner > .white_card.detail_card > div:first-of-type {
      display: block; }
      #voca.voca_tr.mb_voca_tr .page-inner > .white_card.detail_card > div:first-of-type .new_factory_tag {
        height: 20px;
        line-height: 18px;
        font-size: 11px; }
    #voca.voca_tr.mb_voca_tr .page-inner > .white_card.detail_card > div:nth-of-type(2) ul li.member_num:nth-child(1) {
      order: 2; }
    #voca.voca_tr.mb_voca_tr .page-inner > .white_card.detail_card > div:nth-of-type(2) ul li.member_num:nth-child(2) {
      order: 3; }
    #voca.voca_tr.mb_voca_tr .page-inner > .white_card.detail_card > div:nth-of-type(2) ul li.member_num.percent {
      order: 1; }
    #voca.voca_tr.mb_voca_tr .page-inner > .white_card.detail_card > div:not(:first-of-type) {
      margin-top: 12px; }
    #voca.voca_tr.mb_voca_tr .page-inner > .white_card.detail_card ul {
      flex-direction: column;
      align-items: flex-start;
      margin-top: 4px; }
      #voca.voca_tr.mb_voca_tr .page-inner > .white_card.detail_card ul li {
        width: 100%; }
        #voca.voca_tr.mb_voca_tr .page-inner > .white_card.detail_card ul li.title {
          font-size: 16px;
          line-height: 24px;
          font-weight: 500;
          color: #24212e; }
          #voca.voca_tr.mb_voca_tr .page-inner > .white_card.detail_card ul li.title .date {
            margin-left: 0;
            display: block;
            font-size: 14px;
            line-height: 22px; }
        #voca.voca_tr.mb_voca_tr .page-inner > .white_card.detail_card ul li.member_num {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 13px;
          line-height: 20px;
          font-weight: 400;
          margin-right: 0; }
          #voca.voca_tr.mb_voca_tr .page-inner > .white_card.detail_card ul li.member_num span {
            font-size: 14px;
            line-height: 22px;
            font-weight: 500; }
          #voca.voca_tr.mb_voca_tr .page-inner > .white_card.detail_card ul li.member_num:not(.percent) {
            margin-top: 6px; }
    #voca.voca_tr.mb_voca_tr .page-inner > .white_card.detail_card .whole_progress_wrap {
      width: 100%;
      padding-bottom: 22px;
      position: relative;
      justify-content: space-between; }
      #voca.voca_tr.mb_voca_tr .page-inner > .white_card.detail_card .whole_progress_wrap > p {
        font-size: 13px;
        line-height: 20px;
        margin-right: 0; }
      #voca.voca_tr.mb_voca_tr .page-inner > .white_card.detail_card .whole_progress_wrap .whole_progress {
        position: absolute;
        bottom: 6px;
        left: 0;
        width: 100%;
        height: 10px;
        padding: 2px; }
      #voca.voca_tr.mb_voca_tr .page-inner > .white_card.detail_card .whole_progress_wrap .whole_progress_per {
        font-weight: 700; }
  #voca.voca_tr.mb_voca_tr .page-inner .btn-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin-top: 0;
    padding: 16px 20px;
    border-top: 1px solid #f2f2f7;
    background-color: #ffffff;
    /* ios fixed 이슈 관련 */ }
    @media (orientation: landscape) {
      #voca.voca_tr.mb_voca_tr .page-inner .btn-wrap {
        position: fixed; } }
    @media (orientation: portrait) {
      #voca.voca_tr.mb_voca_tr .page-inner .btn-wrap {
        position: fixed; } }
    #voca.voca_tr.mb_voca_tr .page-inner .btn-wrap button {
      height: 48px;
      font-size: 16px;
      font-weight: 500;
      border-radius: 10px; }
  #voca.voca_tr.mb_voca_tr .voca-content {
    margin-top: 38px;
    padding: 0;
    height: auto; }

#voca.voca_detail {
  width: 100%;
  height: auto;
  padding-top: 48px; }
  #voca.voca_detail .page-inner .voca-content {
    margin-top: 0; }
  #voca.voca_detail #voca-list {
    height: auto; }
    #voca.voca_detail #voca-list .voca-list-card {
      padding-bottom: 108px; }
      #voca.voca_detail #voca-list .voca-list-card.learn_on {
        padding-bottom: 132px; }
      #voca.voca_detail #voca-list .voca-list-card .voca-range {
        font-size: 16px;
        line-height: 24px;
        font-weight: 500;
        color: #504d58;
        gap: 0; }
        #voca.voca_detail #voca-list .voca-list-card .voca-range:before {
          content: '~';
          font: inherit;
          color: inherit; }
        #voca.voca_detail #voca-list .voca-list-card .voca-range img {
          display: none; }
      #voca.voca_detail #voca-list .voca-list-card ul {
        padding-bottom: 0; }
        #voca.voca_detail #voca-list .voca-list-card ul li {
          padding: 20px 20px 76px;
          position: relative; }
          #voca.voca_detail #voca-list .voca-list-card ul li .list-head .title h3 {
            font-size: 16px; }
          #voca.voca_detail #voca-list .voca-list-card ul li .list-head .list-button {
            position: absolute;
            width: calc(100% - 40px);
            left: 20px;
            bottom: 20px; }
            #voca.voca_detail #voca-list .voca-list-card ul li .list-head .list-button button {
              flex: 1;
              height: 40px;
              line-height: 38px;
              text-align: center; }
          #voca.voca_detail #voca-list .voca-list-card ul li .list-desc {
            margin-bottom: 8px; }
            #voca.voca_detail #voca-list .voca-list-card ul li .list-desc:not(:last-child) {
              margin-bottom: 16px; }
            #voca.voca_detail #voca-list .voca-list-card ul li .list-desc .bar-box {
              width: 100%;
              flex-direction: column-reverse; }
              #voca.voca_detail #voca-list .voca-list-card ul li .list-desc .bar-box .progress {
                position: relative;
                justify-content: space-between;
                padding-bottom: 16px; }
                #voca.voca_detail #voca-list .voca-list-card ul li .list-desc .bar-box .progress .mb_label {
                  font-size: 13px;
                  line-height: 20px;
                  color: #7c7a82;
                  flex-shrink: 0; }
                #voca.voca_detail #voca-list .voca-list-card ul li .list-desc .bar-box .progress .bar {
                  position: absolute;
                  left: 0;
                  bottom: 0; }
                #voca.voca_detail #voca-list .voca-list-card ul li .list-desc .bar-box .progress .gage-index {
                  min-width: unset;
                  font-size: 14px;
                  line-height: 22px; }
              #voca.voca_detail #voca-list .voca-list-card ul li .list-desc .bar-box .date {
                width: 100%;
                flex-direction: column;
                margin-top: 8px; }
                #voca.voca_detail #voca-list .voca-list-card ul li .list-desc .bar-box .date > p {
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: space-between; }
                  #voca.voca_detail #voca-list .voca-list-card ul li .list-desc .bar-box .date > p:not(:last-child) {
                    margin-right: 0; }
                  #voca.voca_detail #voca-list .voca-list-card ul li .list-desc .bar-box .date > p:not(:first-child) {
                    margin-top: 6px; }
                  #voca.voca_detail #voca-list .voca-list-card ul li .list-desc .bar-box .date > p span {
                    font-weight: 500;
                    color: #504d58; }
                    #voca.voca_detail #voca-list .voca-list-card ul li .list-desc .bar-box .date > p span:before {
                      display: none; }

.top_btn_v4 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #504d58;
  box-shadow: 3.429px 3.429px 10.286px 0px rgba(0, 0, 0, 0.08);
  transition: all 0.4s;
  visibility: hidden;
  opacity: 0; }
  .top_btn_v4.show {
    visibility: visible;
    opacity: 1; }
  .top_btn_v4 img {
    width: 24px;
    transform: rotate(-90deg); }

@media screen and (max-width: 1600px) {
  #voca.voca_tr .voca-content_wrap {
    width: calc(100% - 498px); }
    #voca.voca_tr .voca-content_wrap .vocabulary_card {
      width: calc(25% - 13px); }
      #voca.voca_tr .voca-content_wrap .vocabulary_card:nth-child(5n) {
        margin-right: 16px; }
      #voca.voca_tr .voca-content_wrap .vocabulary_card:nth-child(4n) {
        margin-right: 0; }
  #voca.voca_tr #voca-list {
    width: 460px; } }

@media screen and (max-width: 1470px) {
  .vocabulary_controls button {
    font-size: 14px; }
  .lie_gray_bg {
    padding: 24px 20px; }
  .version4_voca_layout .voca_buy_card .voca_top {
    margin-right: 40px; }
  .version4_voca_layout .voca_buy_card .voca_bom .info_ul li {
    align-items: flex-start;
    font-size: 13px; }
    .version4_voca_layout .voca_buy_card .voca_bom .info_ul li:not(:first-child) {
      margin-top: 12px; }
    .version4_voca_layout .voca_buy_card .voca_bom .info_ul li .new_factory_label {
      min-width: 90px;
      font-size: inherit; }
    .version4_voca_layout .voca_buy_card .voca_bom .info_ul li div {
      font-size: inherit; }
  .version4_voca_layout .voca_buy_card .vocabulary_card {
    width: calc(50% - 9px); }
    .version4_voca_layout .voca_buy_card .vocabulary_card:nth-child(3n) {
      margin-right: 16px; }
    .version4_voca_layout .voca_buy_card .vocabulary_card:nth-child(even) {
      margin-right: 0; }
  .version4_voca_layout > div {
    width: calc(100% - 480px); }
  .version4_voca_layout .voca_buy_list {
    width: 480px; }
  #voca.voca_tr .voca-content_wrap #voca-info .info-desc {
    align-items: center; }
    #voca.voca_tr .voca-content_wrap #voca-info .info-desc .dl-box {
      margin-left: 40px; }
      #voca.voca_tr .voca-content_wrap #voca-info .info-desc .dl-box dl:not(:first-child) {
        margin-top: 12px; }
      #voca.voca_tr .voca-content_wrap #voca-info .info-desc .dl-box dl dt {
        width: 90px;
        font-size: 13px; }
      #voca.voca_tr .voca-content_wrap #voca-info .info-desc .dl-box dl dd {
        font-size: 13px; }
        #voca.voca_tr .voca-content_wrap #voca-info .info-desc .dl-box dl dd h3,
        #voca.voca_tr .voca-content_wrap #voca-info .info-desc .dl-box dl dd .tag {
          font-size: inherit; }
  #voca.voca_tr .voca-content_wrap .vocabulary_card {
    width: calc(50% - 9px); }
    #voca.voca_tr .voca-content_wrap .vocabulary_card:nth-child(3n) {
      margin-right: 16px; }
    #voca.voca_tr .voca-content_wrap .vocabulary_card:nth-child(even) {
      margin-right: 0; } }

@media screen and (max-width: 1024px) {
  #voca {
    height: 100vh;
    overflow: auto;
    background: #f0f5f8;
    padding-bottom: 56px; }
    #voca .page-inner .voca-content {
      padding: 30px 0; }
    #voca .page-inner .btn-wrap {
      padding: 0 28px;
      margin-top: 30px; }
    #voca .lie_gray_bg {
      display: none; }
  .lie_gray_bg {
    display: none; }
  .version4_voca_layout {
    padding-top: 0; }
    .version4_voca_layout > div.mb_fixed_progress {
      width: 100%; }
    .version4_voca_layout > div:first-of-type {
      display: none; }
    .version4_voca_layout > div:nth-of-type(2) {
      width: calc(100% + 40px);
      margin-left: -20px; }
    .version4_voca_layout .voca_buy_list {
      width: 100%;
      max-width: 100%;
      top: 48px;
      left: 0;
      right: auto;
      padding: 20px;
      border-radius: 0;
      box-shadow: none !important;
      background: #f8f9fa; }
      .version4_voca_layout .voca_buy_list .voca-list-card {
        padding: 20px;
        overflow-y: auto; }
      .version4_voca_layout .voca_buy_list .study_card {
        background-color: #fff; }
  .exam_type_ul li {
    flex-direction: column; }
    .exam_type_ul li span {
      line-height: 1.4;
      margin-bottom: 12px; }
    .exam_type_ul li .radio_btn_wrap {
      width: 100%; }
    .exam_type_ul li:not(:first-of-type) {
      margin-top: 20px; }
  .new_container .new_popup_wrap.premium_voca_learn_popup.mb_style .tab_line_wrap .tab_flex {
    padding-bottom: 16px; }
  .new_container .new_popup_wrap.premium_voca_learn_popup .exam_help_alert {
    font-size: 13px;
    margin-bottom: 16px; }
  .new_container .new_popup_wrap.premium_voca_learn_popup .exam_type_ul .radio_btn_wrap .radio_btn + label {
    width: calc(50% - 4px) !important;
    height: 38px !important;
    line-height: 36px !important;
    font-size: 14px !important;
    font-weight: 400; }
    .new_container .new_popup_wrap.premium_voca_learn_popup .exam_type_ul .radio_btn_wrap .radio_btn + label:nth-of-type(even) {
      margin-right: 0 !important; } }

#voca-match {
  padding-top: 80px; }
  #voca-match .page-inner .voca-match-content {
    width: 80vw;
    margin: 0 auto;
    padding: 125px 0; }
    #voca-match .page-inner .voca-match-content .card-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 5px;
      margin-bottom: 50px; }
      #voca-match .page-inner .voca-match-content .card-title .timer {
        filter: drop-shadow(0px 6.08444px 4.56333px rgba(191, 191, 191, 0.3));
        width: 130px;
        height: 70px;
        display: flex;
        gap: 5px;
        padding: 8px 0;
        align-items: flex-start;
        justify-content: center;
        background: #09b9c6;
        border-radius: 10px; }
        #voca-match .page-inner .voca-match-content .card-title .timer img {
          transform: translateY(8px); }
        #voca-match .page-inner .voca-match-content .card-title .timer span {
          display: flex;
          flex-direction: column;
          font-weight: bold;
          font-size: 18px;
          line-height: 26px;
          color: #ffffff; }
          #voca-match .page-inner .voca-match-content .card-title .timer span em {
            font-weight: inherit;
            font-size: inherit;
            line-height: inherit;
            color: inherit;
            margin-left: 5px; }
      #voca-match .page-inner .voca-match-content .card-title h2 {
        font-weight: bold;
        font-size: 28px;
        text-align: center;
        color: #24212e; }
      #voca-match .page-inner .voca-match-content .card-title .current-status {
        display: flex;
        align-items: center; }
        #voca-match .page-inner .voca-match-content .card-title .current-status span {
          font-size: 20px;
          color: #7c7a82; }
          #voca-match .page-inner .voca-match-content .card-title .current-status span:first-child {
            font-weight: bold;
            font-size: 26px;
            color: #0f9ba5; }
            #voca-match .page-inner .voca-match-content .card-title .current-status span:first-child:after {
              content: '';
              display: inline-block;
              width: 2px;
              height: 19px;
              background: #7c7a82;
              margin: 0 10px; }
    #voca-match .page-inner .voca-match-content .card-wrap {
      position: relative;
      background: #ffffff;
      box-shadow: 0px 5px 42px rgba(60, 142, 177, 0.15);
      border-radius: 20px;
      padding: 87px 48px; }
      #voca-match .page-inner .voca-match-content .card-wrap ul {
        display: flex;
        flex-wrap: wrap;
        gap: 30px; }
        #voca-match .page-inner .voca-match-content .card-wrap ul li {
          display: flex;
          align-items: center;
          justify-content: center;
          width: calc(20% - 25px);
          min-height: 170px;
          padding: 10px 0;
          background: #ffffff;
          border: 1px solid #504d58;
          box-sizing: border-box;
          border-radius: 15px;
          cursor: pointer;
          color: #504d58;
          transition: all 0.3s; }
          #voca-match .page-inner .voca-match-content .card-wrap ul li:hover {
            background-color: #f4f5f6; }
          #voca-match .page-inner .voca-match-content .card-wrap ul li.active {
            background: #f3fbfc;
            border: 1px solid #09b9c6;
            color: #96949b; }
          #voca-match .page-inner .voca-match-content .card-wrap ul li.correct {
            background: #fff;
            border: 3px solid #09b9c6;
            color: #09b9c6; }
          #voca-match .page-inner .voca-match-content .card-wrap ul li.wrong {
            background: #fff;
            border: 3px solid #ff5050;
            color: #ff5050; }
          #voca-match .page-inner .voca-match-content .card-wrap ul li.empty {
            border: unset;
            cursor: default; }
          #voca-match .page-inner .voca-match-content .card-wrap ul li.mean-kor p {
            width: 100%;
            padding: 0 15px; }
            #voca-match .page-inner .voca-match-content .card-wrap ul li.mean-kor p span {
              font-size: 20px; }
              #voca-match .page-inner .voca-match-content .card-wrap ul li.mean-kor p span i {
                display: inline-block;
                border-radius: 50%;
                border: 1px solid #504d58;
                width: 22px;
                height: 22px;
                line-height: 20px;
                transform: translateY(-1px);
                margin-right: 5px; }
            #voca-match .page-inner .voca-match-content .card-wrap ul li.mean-kor p.last_ellipsis span:last-of-type {
              display: inline-block;
              width: 100%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis; }
          #voca-match .page-inner .voca-match-content .card-wrap ul li.mean-kor .row {
            width: 100%;
            display: inline-block;
            align-items: center;
            font-size: 20px;
            line-height: 1.45;
            text-indent: -36px;
            padding-left: 36px;
            color: #504d58;
            word-break: break-all; }
            #voca-match .page-inner .voca-match-content .card-wrap ul li.mean-kor .row:not(:last-of-type) {
              margin-bottom: 10px; }
            #voca-match .page-inner .voca-match-content .card-wrap ul li.mean-kor .row i {
              display: inline-block;
              width: 22px;
              height: 22px;
              border: 1px solid #504d58;
              border-radius: 50%;
              font-size: 12px;
              font-weight: 700;
              line-height: 20px;
              color: #504d58;
              text-align: center;
              margin-right: 10px;
              text-indent: 0;
              transform: translateY(-3px); }
          #voca-match .page-inner .voca-match-content .card-wrap ul li p {
            font-weight: 500;
            font-size: 24px;
            color: inherit; }
      #voca-match .page-inner .voca-match-content .card-wrap .ox-cover {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 20px; }

@media screen and (max-width: 1200px) {
  #voca-match .page-inner .voca-match-content .card-wrap ul li {
    width: calc(33% - 18px);
    min-height: 170px; } }

@media screen and (max-width: 1100px) {
  #voca-match .page-inner .voca-match-content .card-title {
    flex-direction: column; }
    #voca-match .page-inner .voca-match-content .card-title .timer {
      width: initial;
      height: initial;
      padding: 8px; }
      #voca-match .page-inner .voca-match-content .card-title .timer span {
        flex-direction: row; } }

@media screen and (max-width: 1024px) {
  #voca-match {
    padding-top: 56px;
    height: 100vh;
    overflow: auto; }
    #voca-match .page-inner .voca-match-content {
      width: 100%;
      padding: 30px 0 0; }
      #voca-match .page-inner .voca-match-content .card-title {
        margin-bottom: 25px; }
        #voca-match .page-inner .voca-match-content .card-title .timer {
          padding: 5px 9px;
          margin-bottom: 20px; }
          #voca-match .page-inner .voca-match-content .card-title .timer span {
            font-size: 10px; }
        #voca-match .page-inner .voca-match-content .card-title h2 {
          font-size: 16px;
          margin-bottom: 5px; }
        #voca-match .page-inner .voca-match-content .card-title .current-status span {
          font-size: 14px; }
          #voca-match .page-inner .voca-match-content .card-title .current-status span:first-child {
            font-size: 14px; }
            #voca-match .page-inner .voca-match-content .card-title .current-status span:first-child:after {
              height: 14px;
              transform: translateY(2px); }
      #voca-match .page-inner .voca-match-content .card-wrap {
        padding: 45px 16px 50px; }
        #voca-match .page-inner .voca-match-content .card-wrap ul {
          gap: 15px; }
          #voca-match .page-inner .voca-match-content .card-wrap ul li {
            width: calc(33vw - 20px);
            min-height: calc(33vw - 20px); }
            #voca-match .page-inner .voca-match-content .card-wrap ul li.mean-kor {
              padding: 0; }
              #voca-match .page-inner .voca-match-content .card-wrap ul li.mean-kor .row {
                font-size: 14px;
                text-indent: -24px;
                padding-left: 24px;
                text-align: center; }
                #voca-match .page-inner .voca-match-content .card-wrap ul li.mean-kor .row i {
                  width: 18px;
                  height: 18px;
                  line-height: 16px;
                  font-size: 10px;
                  margin-right: 5px; }
        #voca-match .page-inner .voca-match-content .card-wrap .ox-cover img {
          width: 50%; } }

@media screen and (max-width: 768px) {
  #voca-match .page-inner .voca-match-content .card-wrap ul li {
    width: calc(50vw - 25.5px);
    min-height: calc(50vw - 25.5px); } }

.teacher_test_letter {
  margin-top: 50px;
  padding-top: 50px;
  font-size: 24px;
  color: #7c7a82;
  line-height: 34px;
  border-top: 1px solid #7c7a82; }

.letter_text {
  margin-top: 50px; }
  .letter_text p {
    font-size: 26px;
    color: #7c7a82;
    text-align: center;
    line-height: 1.4; }

.omr_start #play-start .content .phase {
  padding: 50px 0 0 0; }

.level_tag {
  display: inline-block;
  width: 71px;
  height: 20px;
  line-height: 18px;
  border: 0.657407px solid #ff5050;
  border-radius: 30px;
  text-align: center;
  font-size: 9px;
  color: #ff5050; }
  .level_tag img {
    margin-right: 3px;
    vertical-align: unset; }

.teacher_test #play-start .content .phase {
  padding-top: 0;
  padding-bottom: 50px; }

.dictionary {
  position: relative; }
  .dictionary .tooltip {
    position: absolute;
    left: 50%;
    bottom: -35px;
    transform: translateX(-50%);
    font-size: 15px;
    font-weight: 500;
    font-family: 'Noto Serif', 'Noto Serif KR', sans-serif;
    white-space: nowrap;
    background-color: #ffe4ae;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    padding: 6px 12px; }

.test_caution {
  margin: 35px 0; }
  .test_caution li {
    font-size: 18px;
    font-weight: 500;
    color: #504d58;
    margin-top: 10px;
    text-indent: -20px;
    margin-left: 20px; }
    .test_caution li:first-of-type {
      margin-top: 0; }
    .test_caution li span {
      font: inherit;
      font-weight: 700;
      color: #ff5050; }
      .test_caution li span.black {
        color: #504d58; }
  .test_caution + .btns {
    text-align: center; }
    .test_caution + .btns button {
      width: 206px;
      display: inline-block; }

.reading_test #play-frame {
  max-width: 1600px;
  width: 100%;
  padding: 0 120px; }
  .reading_test #play-frame .test-timer {
    left: 120px; }

@media screen and (max-width: 1500px) {
  .reading_test #play-frame .left {
    width: calc(100% - 320px);
    font-size: 14px;
    line-height: 200%;
    padding: 30px 20px; }
  .reading_test #play-frame .right {
    width: 300px; }
    .reading_test #play-frame .right .question_title {
      font-size: 18px;
      margin-bottom: 20px; }
    .reading_test #play-frame .right ol li label {
      font-size: 16px; } }

@media screen and (max-width: 1024px) {
  .mb_padding_bottom0 {
    padding-bottom: 0 !important; }
  .letter_text {
    margin-top: 30px;
    padding: 0 20px; }
    .letter_text p {
      font-size: 12px; }
  .teacher_test_letter {
    font-size: 12px;
    line-height: 16px;
    margin-top: 30px;
    padding-top: 30px; }
  .reading_test #play-frame {
    padding: 0 0 80px 0; }
    .reading_test #play-frame .test-timer {
      left: 20px; } }

@media screen and (max-width: 1024px) {
  .reading_test #play-frame .left,
  .reading_test #play-frame .right {
    width: 100%; }
  .reading_test #play-frame .right {
    margin-top: 20px;
    height: auto !important;
    min-height: unset; } }

.contentPlay.height_auto {
  min-height: 100vh;
  height: auto; }
  .contentPlay.height_auto #play-frame .play-content-box .test-card .answer-check {
    width: 600px;
    left: auto; }
    .contentPlay.height_auto #play-frame .play-content-box .test-card .answer-check img {
      width: 200px; }

.contentPlay .page-inner .left,
.contentPlay .page-inner .right {
  background-color: #fff;
  box-shadow: 0px 3.82239px 32.1081px rgba(60, 142, 177, 0.15);
  border-radius: 15px; }

.contentPlay .page-inner .left {
  font-size: 20px;
  font-family: 'Noto serif', sans-serif;
  line-height: 36px;
  color: #504d58;
  width: calc(100% - 620px);
  padding: 50px 50px 78px 50px;
  float: left; }
  .contentPlay .page-inner .left p {
    font-size: 20px; }

.contentPlay .page-inner .right {
  width: 600px;
  min-height: 500px;
  background-color: #fff;
  float: right;
  padding: 50px 30px; }
  .contentPlay .page-inner .right .question_title {
    font-size: 22px;
    font-weight: 700;
    color: #504d58;
    margin-bottom: 50px; }
  .contentPlay .page-inner .right ol li {
    margin-bottom: 10px; }
    .contentPlay .page-inner .right ol li input[type='checkbox']:checked + label {
      color: #09b9c6; }
    .contentPlay .page-inner .right ol li label {
      font-size: 20px;
      font-family: 'Noto Serif', sans-serif;
      color: #504d58; }
    .contentPlay .page-inner .right ol li.wrong label {
      color: #ff5050;
      position: relative; }
      .contentPlay .page-inner .right ol li.wrong label:after {
        content: '';
        display: block;
        width: 18px;
        height: 18px;
        background: url("/img/icon/icon_o_red.svg") no-repeat center/contain;
        margin-left: 20px; }
  .contentPlay .page-inner .right .translate {
    margin-top: 50px;
    height: calc(100% - 220px);
    font-size: 18px;
    font-family: 'Noto Sans KR';
    color: #7c7a82;
    overflow-y: auto;
    padding-right: 10px; }
    .contentPlay .page-inner .right .translate::-webkit-scrollbar {
      width: 12px; }
    .contentPlay .page-inner .right .translate::-webkit-scrollbar-thumb {
      background-color: #fff;
      border: 1.52px solid #09b9c6;
      border-radius: 20px; }
    .contentPlay .page-inner .right .translate .tag {
      width: 70px;
      height: 33px;
      padding: 0;
      text-align: center;
      line-height: 31px;
      font-size: 16px;
      font-weight: 700;
      color: #09b9c6;
      border: 1px solid #09b9c6;
      margin-bottom: 20px;
      border-radius: 20px; }
  .contentPlay .page-inner .right .level_tag {
    margin-bottom: 20px; }

.teacher_test .teacher_test_question_box {
  background-color: #fff;
  padding: 60px 48px;
  border-radius: 20px;
  box-shadow: 0px 5px 42px rgba(60, 142, 177, 0.15); }
  .teacher_test .teacher_test_question_box > p {
    color: #504d58;
    font-size: 24px;
    font-family: 'Roboto', 'Noto Sans KR';
    padding-bottom: 60px;
    border-bottom: 1px solid #e9e9ea;
    margin-bottom: 60px;
    line-height: 43px; }
    .teacher_test .teacher_test_question_box > p .ql-size-small {
      font-size: 16px !important; }
    .teacher_test .teacher_test_question_box > p .ql-size-large {
      font-size: 32px !important; }
    .teacher_test .teacher_test_question_box > p .ql-size-huge {
      font-size: 48px !important; }
    .teacher_test .teacher_test_question_box > p * {
      font-size: inherit;
      font-family: inherit;
      color: inherit;
      text-underline-offset: 4px; }
      @media screen and (max-width: 1024px) {
        .teacher_test .teacher_test_question_box > p * {
          text-underline-offset: 4px; } }
  .teacher_test .teacher_test_question_box ol li {
    margin-top: 15px; }
    .teacher_test .teacher_test_question_box ol li:first-of-type {
      margin-top: 0; }
    .teacher_test .teacher_test_question_box ol li label {
      padding: 18px 24px;
      border: 1px solid #53ced7;
      border-radius: 15px;
      font-size: 20px;
      color: #504d58; }
  .teacher_test .teacher_test_question_box.devide {
    background-color: transparent;
    box-shadow: none;
    padding: 0; }
    .teacher_test .teacher_test_question_box.devide > p,
    .teacher_test .teacher_test_question_box.devide .background_box {
      background-color: #fff;
      padding: 60px 48px;
      border-radius: 20px;
      box-shadow: 0px 5px 42px rgba(60, 142, 177, 0.15); }
    .teacher_test .teacher_test_question_box.devide p .span_line {
      font-size: 24px;
      font-weight: 700;
      font-family: 'Roboto', 'Noto Sans KR';
      text-decoration: underline;
      color: #504d58; }
    .teacher_test .teacher_test_question_box.devide .background_box {
      padding: 60px 0; }
      .teacher_test .teacher_test_question_box.devide .background_box li {
        width: calc(100% - 32px);
        max-width: 715px;
        margin: 15px auto 0; }
      .teacher_test .teacher_test_question_box.devide .background_box .eraser_btn {
        margin-top: 60px;
        padding-top: 60px;
        font-size: 15px;
        font-weight: 700;
        color: #7c7a82; }
        .teacher_test .teacher_test_question_box.devide .background_box .eraser_btn img {
          margin-right: 8px; }
        .teacher_test .teacher_test_question_box.devide .background_box .eraser_btn span {
          font-size: 12px;
          font-weight: 500;
          font-family: 'Inter', sans-serif;
          color: #a7a6ab;
          margin-left: 8px; }
        .teacher_test .teacher_test_question_box.devide .background_box .eraser_btn:after {
          content: '';
          display: block;
          width: calc(100% - 96px);
          height: 1px;
          background-color: #e9e9ea;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          margin-top: -77px; }

/*결과보기*/
.result_page h2 {
  font-size: 36px;
  font-weight: 700;
  color: #24212e;
  padding: 0 50px 60px 50px; }

.result_page .result_list {
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  width: calc(100% - 96px);
  margin-left: 48px;
  padding: 60px 154px;
  background-color: #fff; }
  .result_page .result_list > div {
    margin-top: 80px; }
    .result_page .result_list > div:first-of-type {
      margin-top: 0; }
  .result_page .result_list p.title {
    font-size: 28px;
    font-weight: 700;
    line-height: 42px;
    color: #24212e;
    text-align: center;
    margin: 20px 0 50px; }
    .result_page .result_list p.title * {
      font-size: inherit;
      color: inherit; }
  .result_page .result_list .shadow_box {
    box-shadow: 0px 5px 42px rgba(60, 142, 177, 0.15);
    padding: 60px 48px;
    border-radius: 20px; }
    .result_page .result_list .shadow_box.online-test .image-wrapper {
      text-align: center;
      padding-bottom: 0;
      border-bottom: none; }
    .result_page .result_list .shadow_box.online-test img {
      max-width: 100%; }
    .result_page .result_list .shadow_box > p {
      font-size: 24px;
      font-family: 'Roboto', 'Noto Sans KR';
      line-height: 44px;
      color: #504d58;
      text-align: left;
      font-weight: 400;
      margin-bottom: 60px;
      padding-bottom: 60px;
      border-bottom: 1px solid #e9e9ea; }
      .result_page .result_list .shadow_box > p .ql-size-small {
        font-size: 16px !important; }
      .result_page .result_list .shadow_box > p .ql-size-large {
        font-size: 32px !important; }
      .result_page .result_list .shadow_box > p .ql-size-huge {
        font-size: 48px !important; }
      .result_page .result_list .shadow_box > p * {
        font-size: inherit;
        font-weight: inherit;
        font-family: inherit;
        color: inherit; }
    .result_page .result_list .shadow_box ol li {
      margin-bottom: 10px; }
      .result_page .result_list .shadow_box ol li input[type='checkbox']:checked + label {
        background-color: #09b9c6;
        color: #fff; }
      .result_page .result_list .shadow_box ol li label {
        font-size: 20px;
        font-family: 'Noto Serif', sans-serif;
        color: #504d58;
        border: 1px solid #53ced7;
        padding: 18px 24px;
        border-radius: 15px; }
      .result_page .result_list .shadow_box ol li.wrong label {
        color: #ff5050 !important;
        border-color: #ff5050 !important;
        position: relative;
        border-width: 3px; }
        .result_page .result_list .shadow_box ol li.wrong label:after {
          content: '';
          display: block;
          width: 26px;
          height: 26px;
          background: url("/img/icon/icon_o_red.svg") no-repeat center/contain;
          position: absolute;
          right: 17px; }
      .result_page .result_list .shadow_box ol li.correct label {
        background-color: #09b9c6;
        color: #fff;
        border-color: #09b9c6; }
    .result_page .result_list .shadow_box .tag {
      width: 74px;
      height: 33px;
      border: 1px solid #7681e5;
      border-radius: 20px;
      font-size: 16px !important;
      font-weight: 700;
      padding: 0;
      text-align: center;
      line-height: 31px !important;
      color: #7681e5; }
      .result_page .result_list .shadow_box .tag + p {
        width: calc(100% - 105px);
        margin-top: 0;
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
        font-size: 23px;
        color: #7c7a82; }
        .result_page .result_list .shadow_box .tag + p * {
          font-size: inherit;
          color: inherit; }
    .result_page .result_list .shadow_box.mt40 {
      margin-top: 40px; }

@media screen and (max-width: 1024px) {
  .q_num {
    width: 60px;
    height: 20px;
    padding: 0;
    font-size: 9px;
    text-align: center;
    line-height: 18px; }
  .teacher_test .teacher_test_question_box {
    padding: 30px 16px 90px;
    box-shadow: 0px -10px 15px rgba(60, 142, 177, 0.15); }
    .teacher_test .teacher_test_question_box p {
      font-size: 18px;
      line-height: 36px;
      margin-bottom: 30px;
      padding-bottom: 30px; }
    .teacher_test .teacher_test_question_box .background_box .eraser_btn {
      padding-top: 50px;
      margin-top: 50px; }
    .teacher_test .teacher_test_question_box ol li label {
      font-size: 14px;
      font-family: 'Roboto', 'Noto Sans KR';
      color: #7c7a82;
      padding: 12px 10px; }
    .teacher_test .teacher_test_question_box.devide {
      padding-bottom: 40px; }
      .teacher_test .teacher_test_question_box.devide p {
        margin-bottom: 12px;
        padding: 30px 16px; }
        .teacher_test .teacher_test_question_box.devide p .span_line {
          font-size: 18px; }
      .teacher_test .teacher_test_question_box.devide .background_box {
        margin-bottom: 40px; }
  .contentPlay .result_page {
    width: calc(100% + 32px);
    margin-left: -16px;
    background-color: #fff; }
    .contentPlay .result_page h2 {
      font-size: 20px;
      font-weight: 700;
      padding-left: 22px;
      padding-bottom: 0; }
    .contentPlay .result_page .result_list {
      width: 100%;
      margin-left: 0;
      box-shadow: none;
      padding: 20px; }
      .contentPlay .result_page .result_list p {
        font-size: 16px;
        line-height: 19px; }
      .contentPlay .result_page .result_list .shadow_box {
        padding: 30px 20px; }
        .contentPlay .result_page .result_list .shadow_box p {
          font-size: 16px;
          line-height: 1.2;
          padding-bottom: 20px;
          margin-bottom: 20px;
          width: 100%;
          margin-top: 20px; }
        .contentPlay .result_page .result_list .shadow_box ol li label {
          font-size: 14px; }
        .contentPlay .result_page .result_list .shadow_box ol li.wrong label:after {
          display: none; }
  .contentPlay.teacher_test .result_page h2 {
    padding-top: 30px; }
  .contentPlay.teacher_test .result_page .result_list .shadow_box.mt40 {
    margin-bottom: 40px; }
  .contentPlay.teacher_test .result_page .result_list .shadow_box p {
    line-height: 200%; }
  .contentPlay #play-frame .play-content-box {
    margin: 0;
    border-radius: 20px 20px 0 0; }
  .result_page .result_list .shadow_box .tag {
    width: 58px;
    height: 25px;
    line-height: 23px !important;
    font-size: 12px !important; } }

.special-tr-wrap {
  position: relative; }
  .special-tr-wrap .quest-word {
    font-size: 54px;
    font-weight: 900;
    font-family: 'Roboto', 'Noto Sans KR';
    color: #09b9c6;
    text-align: center;
    margin-bottom: 50px; }
  .special-tr-wrap .long-bar2 {
    padding: 24px 48px;
    background: #ffffff;
    box-shadow: 0px 5px 42px rgba(60, 142, 177, 0.15);
    border-radius: 15px;
    margin-bottom: 20px; }
    .special-tr-wrap .long-bar2 p {
      font-size: 22px;
      line-height: 32px;
      color: #504d58; }
      .special-tr-wrap .long-bar2 p.center-left {
        text-align: center;
        font-family: 'Roboto', 'Noto Sans KR', sans-serif; }
      .special-tr-wrap .long-bar2 p em {
        font-weight: 700;
        font-size: inherit;
        color: inherit;
        line-height: inherit; }
        .special-tr-wrap .long-bar2 p em.underline {
          text-decoration: underline; }
  .special-tr-wrap .twin {
    display: flex;
    justify-content: space-between;
    gap: 10px; }
    .special-tr-wrap .twin > div {
      min-width: calc(50% - 5px);
      max-height: 274px;
      padding: 117px 10px 116px;
      background: #ffffff;
      border: 1px solid #7c7a82;
      border-radius: 20px;
      text-align: center;
      font-size: 35px;
      font-weight: 900;
      font-family: 'Roboto', 'Noto Sans KR';
      color: #7c7a82; }
      .special-tr-wrap .twin > div.on {
        border: 1px solid #09b9c6;
        color: #09b9c6; }
      .special-tr-wrap .twin > div.correct {
        border: 1px solid #09b9c6;
        color: #09b9c6;
        filter: drop-shadow(0px 4px 3px rgba(119, 119, 119, 0.2)); }
      .special-tr-wrap .twin > div.wrong {
        border: 1px solid #ff5050;
        color: #ff5050;
        filter: drop-shadow(0px 4px 3px rgba(119, 119, 119, 0.2)); }
  .special-tr-wrap .ox-cover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    opacity: 0.9;
    border-radius: 15px; }
    .special-tr-wrap .ox-cover img {
      width: max-content;
      height: max-content;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%); }
  .special-tr-wrap .union {
    background: #ffffff;
    box-shadow: 0px 5px 42px rgba(60, 142, 177, 0.15);
    border-radius: 20px;
    padding: 0 20px; }
    .special-tr-wrap .union .typing-area {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; }
      .special-tr-wrap .union .typing-area > div {
        flex: 1;
        padding: 60px 0;
        min-width: 250px;
        align-items: center;
        display: flex;
        flex-direction: column; }
        .special-tr-wrap .union .typing-area > div .play-input-text {
          max-width: 200px; }
          .special-tr-wrap .union .typing-area > div .play-input-text + .under-text {
            max-width: 200px;
            margin: 0 auto;
            width: 100%; }
        .special-tr-wrap .union .typing-area > div h5 {
          font-size: 24px;
          font-weight: 700;
          color: #504d58;
          text-align: center;
          margin-bottom: 40px; }
          .special-tr-wrap .union .typing-area > div h5.txt-gray {
            color: #7c7a82; }
        .special-tr-wrap .union .typing-area > div p {
          font-size: 40px;
          font-weight: 900;
          color: #504d58;
          text-align: center; }
      .special-tr-wrap .union .typing-area.type3 {
        justify-content: unset;
        gap: 0;
        padding: 60px 0; }
        .special-tr-wrap .union .typing-area.type3 ul {
          width: 100%;
          max-width: 920px;
          margin: 0 auto;
          display: flex;
          flex-direction: column;
          gap: 35px; }
          .special-tr-wrap .union .typing-area.type3 ul li {
            display: flex;
            align-items: center;
            gap: 20px; }
            .special-tr-wrap .union .typing-area.type3 ul li h5 {
              width: 150px;
              text-align: right;
              font-size: 24px;
              font-weight: 700;
              color: #504d58; }
              .special-tr-wrap .union .typing-area.type3 ul li h5.txt-gray {
                color: #7c7a82; }
            .special-tr-wrap .union .typing-area.type3 ul li p {
              font-size: 40px;
              font-weight: 900;
              font-family: 'Roboto', 'Noto Sans KR';
              color: #504d58; }
            .special-tr-wrap .union .typing-area.type3 ul li .play-input-text {
              width: calc(100% - 270px);
              max-width: 700px; }
    .special-tr-wrap .union .erase-area {
      border-top: 1px solid #e9e9ea;
      padding: 60px 0;
      display: flex;
      justify-content: center; }
      .special-tr-wrap .union .erase-area button {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        font-size: 15px;
        font-weight: 700;
        color: #7c7a82; }
        .special-tr-wrap .union .erase-area button span {
          font-size: 12px;
          font-weight: 500;
          color: #a7a6ab; }

@media screen and (max-width: 1024px) {
  .special-tr-wrap .union .typing-area {
    flex-direction: column;
    gap: 0;
    padding: 50px 0; }
    .special-tr-wrap .union .typing-area > div {
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center; }
      .special-tr-wrap .union .typing-area > div:not(:last-of-type) {
        margin-bottom: 30px; }
      .special-tr-wrap .union .typing-area > div h5 {
        font-size: 14px;
        margin-bottom: 10px; }
    .special-tr-wrap .union .typing-area.type3 {
      padding: 50px 0; }
      .special-tr-wrap .union .typing-area.type3 ul li {
        flex-direction: column;
        gap: 10px; }
        .special-tr-wrap .union .typing-area.type3 ul li h5 {
          width: 100%;
          font-size: 14px;
          text-align: center; }
        .special-tr-wrap .union .typing-area.type3 ul li .play-input-text {
          width: 100%;
          max-width: none; }
  .special-tr-wrap .twin {
    padding: 0 16px; }
  .special-tr-wrap .long-bar2 {
    padding: 22px 16px; }
    .special-tr-wrap .long-bar2 p.center-left {
      font-size: 16px;
      line-height: 22px; }
  .special-tr-wrap .quest-word {
    font-size: 40px; } }

@media screen and (max-width: 480px) {
  .special-tr-wrap .twin {
    flex-direction: column;
    gap: 20px; }
    .special-tr-wrap .twin > div {
      width: 100%;
      max-height: 200px;
      padding: 80px 10px;
      font-size: 30px; } }

#play-result + .omr-condition-wrapper {
  margin-top: 60px; }

.omr-done-letter {
  margin-top: 50px;
  padding-top: 50px;
  border-top: 1px solid #7c7a82;
  text-align: center;
  font-size: 24px;
  font-weight: 400;
  color: #7c7a82;
  line-height: 1.4; }

.omr-condition-wrapper {
  max-width: 942px;
  margin: 0 auto;
  position: relative; }
  .omr-condition-wrapper .timer-box {
    padding: 8px 23px;
    background: #09b9c6;
    border-radius: 10px;
    position: absolute;
    transform: translateX(-100%);
    left: -154px;
    top: 0; }
    .omr-condition-wrapper .timer-box > * {
      text-align: center;
      font-size: 18px;
      font-weight: 700;
      color: #fff; }
    .omr-condition-wrapper .timer-box h1 {
      display: flex;
      align-items: center;
      gap: 5px; }

.omr-test-sheet {
  padding: 60px 24px;
  background: #ffffff;
  box-shadow: 0px 5px 42px rgba(60, 142, 177, 0.15);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 40px; }
  .omr-test-sheet > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px; }
    .omr-test-sheet > li > h2 {
      width: 51px;
      font-size: 36px;
      font-weight: 500;
      font-family: 'Roboto', 'Noto Sans KR';
      color: #504d58;
      white-space: nowrap; }
    .omr-test-sheet > li > .omr-rating2 {
      width: calc(100% - 75px); }
    .omr-test-sheet > li.crossline {
      margin: 20px 0;
      border-top: 1px solid #e9e9ea; }
    .omr-test-sheet > li .play-input-text {
      width: calc(100% - 75px);
      height: 65px;
      border: 1px solid #7c7a82; }
      .omr-test-sheet > li .play-input-text .under-text {
        top: 62px; }
      .omr-test-sheet > li .play-input-text.active {
        border: 1px solid #09b9c6; }
      .omr-test-sheet > li .play-input-text.wrong {
        border: 3px solid #ff5050; }
      .omr-test-sheet > li .play-input-text.correct {
        border: 3px solid #09b9c6; }

@media screen and (max-width: 1600px) {
  .omr-condition-wrapper .timer-box {
    position: relative;
    left: auto;
    top: auto;
    transform: translateX(0);
    width: max-content;
    margin-bottom: 20px; } }

@media screen and (max-width: 1024px) {
  .omr-done-letter {
    margin-top: 20px;
    padding-top: 20px;
    font-size: 12px; }
  .OMRing-page,
  .contentPlay .page-inner.OMRing-page {
    background-color: #fff; }
  .page-inner.OMRing-page {
    overflow-y: auto; }
  .omr-condition-wrapper .timer-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 9px;
    margin-bottom: 30px; }
    .omr-condition-wrapper .timer-box > * {
      font-size: 14.5px; }
    .omr-condition-wrapper .timer-box img {
      width: 13px; }
  .omr-condition-wrapper .omr-test-sheet {
    box-shadow: none;
    gap: 30px;
    padding: 0 0 65px; }
    .omr-condition-wrapper .omr-test-sheet > li {
      gap: 5px;
      flex-direction: column;
      align-items: flex-start; }
      .omr-condition-wrapper .omr-test-sheet > li h2 {
        font-size: 14px; }
      .omr-condition-wrapper .omr-test-sheet > li .omr-rating2 {
        width: 100%;
        border-radius: 10px;
        padding: 7px 17px; }
      .omr-condition-wrapper .omr-test-sheet > li .play-input-text {
        width: 100%;
        max-height: none;
        height: 46px; }
        .omr-condition-wrapper .omr-test-sheet > li .play-input-text .under-text {
          top: 46px; } }

#msg {
  position: relative;
  background: #f8f9fa;
  padding-bottom: 32px; }
  #msg .page-inner {
    min-height: calc(100vh - 390px); }
    #msg .page-inner .main-msg {
      display: flex;
      gap: 20px;
      margin-left: 250px;
      padding: 30px 48px 50px 20px; }
      #msg .page-inner .main-msg .style_none {
        display: flex;
        flex-direction: column; }
      #msg .page-inner .main-msg > div:not(.new_popup_wrap):not(.common_dim):not(.style_none) {
        background: #ffffff;
        border: 1px solid #e9e9ea;
        box-sizing: border-box;
        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
        border-radius: 16px;
        width: calc(100% - 500px);
        height: calc(100vh - 124px); }
  #msg.teacher {
    padding-top: 60px; }

.link_line {
  text-decoration: underline; }

.attachment {
  color: #09b9c6;
  text-decoration: underline; }
  .attachment img {
    margin-right: 5px; }

@media screen and (max-width: 1440px) {
  #msg.student-message .page-inner .main-msg {
    padding: 30px 20px 50px; }
    #msg.student-message .page-inner .main-msg #channel-list {
      min-width: 270px; }
    #msg.student-message .page-inner .main-msg #msg-dialog .body .chat-input {
      padding: 0; }
      #msg.student-message .page-inner .main-msg #msg-dialog .body .chat-input input {
        width: calc(100% - 265px); } }

#mobile-msg-main {
  background: #f8f9fa; }
  #mobile-msg-main .page-inner {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 48px 0 0; }
    #mobile-msg-main .page-inner .page-title {
      margin: 24px 0 16px;
      padding: 0 16px; }
      #mobile-msg-main .page-inner .page-title p {
        display: flex;
        align-items: center;
        font-size: 22px;
        line-height: 32px;
        color: #24212e; }
        #mobile-msg-main .page-inner .page-title p img {
          margin-top: 4px;
          margin-right: 8px; }

#mobile-msg-st-main {
  background: #fbfcff; }

.left_inherit label {
  justify-content: flex-start !important; }

/*===========================================================================
	FONT
============================================================================*/
.admin .noto-r {
  font-family: 'Noto Sans KR';
  font-weight: 400; }

.admin .noto-m {
  font-family: 'Noto Sans KR';
  font-weight: 500; }

.admin .noto-b {
  font-family: 'Noto Sans KR';
  font-weight: 700; }

.admin .txt-link {
  color: #0080ff;
  text-decoration: underline;
  cursor: pointer; }

.admin .txt-red {
  color: red;
  opacity: 0.8; }

.admin .txt-blue {
  color: #0080ff; }

/*===========================================================================
	ALIGN
============================================================================*/
* {
  box-sizing: border-box; }

.admin .floatL {
  float: left; }

.admin .floatR {
  float: right; }

.admin .clearfix:after {
  content: '';
  display: block;
  clear: both; }

.admin .leftT {
  text-align: left !important; }

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

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

.admin .ellipsis {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 말줄임 적용 */ }

.admin .ellipsis2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; }

.admin .pointer {
  cursor: pointer; }

.admin .flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center; }

.admin .flex-center {
  display: flex;
  justify-content: center;
  align-items: center; }

.admin .flex-gap10 {
  display: flex;
  gap: 10px; }

.admin .white_normal {
  white-space: normal; }

/*===========================================================================
	CONTAINER
============================================================================*/
.admin main {
  transition: 0.4s;
  min-width: 1550px;
  min-height: calc(100vh - 50px);
  overflow-x: auto; }

.admin nav.on + main {
  padding-left: 250px; }

.admin .has-fixed-header {
  margin-top: 50px; }

.admin .page-route {
  padding: 0 20px;
  border-bottom: 1px solid #eee;
  transition: 0.2s;
  display: flex;
  gap: 20px; }
  .admin .page-route li {
    font-size: 17px;
    font-weight: bold;
    line-height: 50px;
    color: #8a98ac;
    position: relative; }
    .admin .page-route li:last-of-type {
      color: #263a5b; }
    .admin .page-route li:not(:last-of-type)::after {
      content: '';
      display: inline-block;
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background-color: #8a98ac;
      margin-left: 10px;
      position: absolute;
      top: 50%;
      transform: translateX(-50%); }

.admin .page-inner {
  width: 100%;
  padding: 20px; }

.admin .title {
  font-size: 16px;
  font-weight: 700;
  padding-bottom: 10px; }

.admin table + .title {
  margin-top: 50px; }

.admin .btn-wrap + .title {
  margin-top: 70px; }

.admin .tab-wrap {
  display: flex;
  margin-bottom: 20px; }
  .admin .tab-wrap li {
    min-width: 100px;
    padding: 10px;
    font-size: 15px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer; }
    .admin .tab-wrap li.active {
      background: #8a98ac;
      color: #fff; }

.admin-scroll {
  /* 스크롤 바 */
  /* 스크롤 바 밑의 배경 */
  /* 실질적 스크롤 바 */
  /* 스크롤 바 상 하단 버튼 */ }
  .admin-scroll *::-webkit-scrollbar {
    width: 8px;
    height: 8px; }
  .admin-scroll *::-webkit-scrollbar-track {
    background-color: transparent; }
  .admin-scroll *::-webkit-scrollbar-thumb {
    background: #d3d3d5;
    border-radius: 10px; }
  .admin-scroll *::-webkit-scrollbar-button {
    display: none; }

/*===========================================================================
	MARGIN / PADDING
============================================================================*/
.admin .mb10 {
  margin-bottom: 10px; }

.admin .mb20 {
  margin-bottom: 20px; }

.admin .mb30 {
  margin-bottom: 30px; }

.admin .mb50 {
  margin-bottom: 50px; }

.admin .mt10 {
  margin-top: 10px; }

.admin .mt20 {
  margin-top: 20px; }

.admin .mt50 {
  margin-top: 50px; }

.admin .m-auto {
  margin: auto; }

/*===========================================================================
	TABLE
============================================================================*/
.admin table {
  width: 100%;
  table-layout: auto; }

.admin tr {
  text-align: center; }

.admin tr.off {
  display: none; }
  .admin tr.off.on {
    display: contents; }

.admin tr.total td {
  font-weight: 500;
  border-top: 2px solid rgba(0, 0, 0, 0.05); }

.admin table.tr_left tr,
.admin table.tr_left th,
.admin table.tr_left td {
  text-align: left; }

.admin th,
.admin td {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding: 10px;
  white-space: nowrap; }

.admin tr:last-of-type td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05); }

.admin th {
  background: #f2f5fa;
  font-weight: normal;
  color: #8a98ac;
  word-break: keep-all; }

.admin tr:first-of-type th,
.admin tr:first-of-type td {
  border-top: 2px solid rgba(0, 0, 0, 0.05); }

.admin tbody th {
  min-width: 170px;
  text-align: left; }

.admin tbody td {
  font-size: 14px;
  font-weight: 400;
  color: #444; }

.admin .table-top th {
  border-top: 0 !important;
  background: transparent; }

.admin .search-info {
  margin-bottom: 20px; }
  .admin .search-info li:not(:last-of-type) {
    margin-bottom: 10px; }

.admin td .search-info {
  margin-bottom: 0; }

.admin td button:not(:first-child) {
  margin-left: 10px; }

.admin .x-scroll {
  overflow-x: auto;
  padding-bottom: 5px; }
  .admin .x-scroll > div {
    min-width: 100%;
    width: max-content; }

.admin .add_file_document > div:not(:first-of-type) {
  margin-top: 8px; }

.admin .add_file_document > div button {
  min-width: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  margin-top: -2px;
  font-size: 20px; }

/*===========================================================================
	INPUT / SELECT
============================================================================*/
.admin .search-date2-wrap,
.admin .datepicker-double {
  display: flex;
  align-items: center; }

.admin .datepicker-double span {
  margin: 0 8px; }

.admin .devide_line {
  margin: 40px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05); }

.admin table input[type='radio'] {
  display: none; }

.admin table input[type='radio'] + label {
  justify-content: center; }
  .admin table input[type='radio'] + label i {
    margin: 0; }

.admin input::placeholder {
  font-size: 14px; }

.admin input[type='text'],
.admin input[type='password'] {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 5px;
  padding: 10px;
  text-align: left !important; }
  .admin input[type='text'].centerT,
  .admin input[type='password'].centerT {
    text-align: center !important; }
  .admin input[type='text']::placeholder,
  .admin input[type='password']::placeholder {
    color: #d3d3d5; }

.admin input[type='radio'] + label {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: #444; }
  .admin input[type='radio'] + label i {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #8a98ac;
    border-radius: 50%;
    position: relative; }
    .admin input[type='radio'] + label i.disabled {
      background-color: #d3d3d5; }

.admin input[type='radio']:checked + label i::after {
  content: '';
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: #8a98ac;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.admin input[type='checkbox'] + label {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer; }
  .admin input[type='checkbox'] + label i {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #8a98ac;
    position: relative; }
    .admin input[type='checkbox'] + label i.disabled {
      background-color: #d3d3d5; }

.admin input[type='checkbox']:checked + label i::after {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  background-image: url("../img/icon/icon_check.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.admin select {
  display: block;
  width: 100%;
  max-height: 38.8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 5px;
  padding: 11px 40px 11px 10px;
  position: relative;
  outline: none;
  font-size: 14px;
  line-height: 1.2;
  color: #444;
  height: auto; }

.admin .select-wrap {
  position: relative; }
  .admin .select-wrap.disabled {
    background-color: #c6c6c6; }
  .admin .select-wrap .select-arrow {
    width: 20px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.25s; }
    .admin .select-wrap .select-arrow img {
      width: 100%; }
    .admin .select-wrap .select-arrow.rotate {
      transform: rotate(180deg) translateY(50%); }

.admin textarea {
  width: 100%;
  height: 200px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 5px;
  padding: 10px;
  white-space: pre-line; }

.admin .range-wrap {
  display: flex;
  align-items: center; }
  .admin .range-wrap input {
    width: calc(50% - 20px); }
  .admin .range-wrap > span {
    display: inline-block;
    width: 40px; }

/*===========================================================================
	POPUP
============================================================================*/
.admin .pop-wrap {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 500;
  display: none;
  /* ios fixed 이슈 관련 */ }
  @media (orientation: landscape) {
    .admin .pop-wrap {
      position: fixed; } }
  @media (orientation: portrait) {
    .admin .pop-wrap {
      position: fixed; } }
  .admin .pop-wrap.on {
    display: block; }
  .admin .pop-wrap .pop-dim {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer; }
  .admin .pop-wrap .pop-cont {
    min-width: 500px;
    padding: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff; }
  .admin .pop-wrap .pop-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    height: 22px;
    margin-bottom: 10px;
    position: relative; }
    .admin .pop-wrap .pop-title .icon-x {
      position: absolute;
      right: 0;
      top: 0;
      cursor: pointer; }
  .admin .pop-wrap .pop-btn-wrap {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    gap: 10px; }
  .admin .pop-wrap.big .pop-cont {
    min-width: 950px; }
    .admin .pop-wrap.big .pop-cont .pop-cont-item {
      max-height: 70vh;
      overflow-y: auto;
      padding-top: 20px; }

/*===========================================================================
	ETC
============================================================================*/
.admin .book-wrapper {
  display: flex;
  align-items: center;
  justify-content: center; }

.admin .book-thumbnail {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden; }
  .admin .book-thumbnail img {
    min-width: 100%;
    max-height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); }
  .admin .book-thumbnail + p {
    margin-left: 10px; }

.admin .market-banner-thumbnail {
  display: flex;
  justify-content: center; }
  .admin .market-banner-thumbnail div {
    width: 80px;
    height: 80px; }

/*===========================================================================
	IMAGE
============================================================================*/
.admin .icon-sort-box {
  display: inline-block;
  width: 9px;
  padding-top: 2px;
  margin-left: 10px;
  font-size: 0; }
  .admin .icon-sort-box > button {
    font-size: 0; }
  .admin .icon-sort-box .icon-sort-up {
    transform: rotate(180deg); }
  .admin .icon-sort-box img {
    width: 100%;
    vertical-align: baseline; }

select {
  appearance: none; }

.icon_cyan_bg_arrow {
  width: 8px;
  margin-top: -2px; }

.ml10 {
  margin-left: 10px !important; }

.ml4 {
  margin-left: 4px !important; }

.mr10 {
  margin-right: 10px !important; }

.admin.new_page.new_ver.full {
  max-width: 100%;
  padding-top: 0; }
  .admin.new_page.new_ver.full .has-fixed-header {
    margin-top: 0;
    min-height: auto; }

.left_table {
  table-layout: fixed !important; }
  .left_table th,
  .left_table td {
    text-align: left; }

.admin .connection_product .multi_form + .multi_form {
  margin-top: 8px; }

.admin .connection_product .multi_form label {
  min-width: 70px; }

.admin .connection_product .multi_form .tag_wrap {
  margin-left: 12px;
  width: calc(100% - 200px);
  display: flex;
  flex-wrap: wrap;
  gap: 6px; }
  .admin .connection_product .multi_form .tag_wrap .new_factory_tag {
    font-size: 13px;
    border-radius: 4px;
    margin-right: 0; }

.admin #index2 {
  background: #3d7979;
  width: 100%;
  padding: 50px 20px 50px 50px;
  overflow: hidden; }
  .admin #index2 .chapter-box {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    height: calc(100vh - 100px);
    overflow: auto; }
    .admin #index2 .chapter-box .chapter {
      display: flex;
      flex-direction: column;
      gap: 20px; }
      .admin #index2 .chapter-box .chapter h2 {
        font-size: 26px;
        font-weight: 600;
        color: #fff; }
      .admin #index2 .chapter-box .chapter ul {
        padding-top: 10px;
        width: 60%; }
        .admin #index2 .chapter-box .chapter ul li {
          position: relative;
          font-size: 16px;
          cursor: pointer;
          border-bottom: 1px solid #afafaf;
          padding: 15px 0px;
          color: #fff; }
          .admin #index2 .chapter-box .chapter ul li.complete:after {
            content: "완료";
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            background: #424240;
            font-size: 12px;
            line-height: 20px;
            color: #fff;
            font-weight: 600;
            width: 40px;
            height: 22px;
            text-align: center;
            border-radius: 4px; }
          .admin #index2 .chapter-box .chapter ul li.work:after {
            content: "진행중";
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            background: #fff;
            border: 1px solid #424240;
            font-size: 12px;
            line-height: 20px;
            color: #424240;
            font-weight: 600;
            width: 40px;
            height: 22px;
            text-align: center;
            border-radius: 4px; }

.credit_card {
  position: relative;
  width: 233px;
  aspect-ratio: 1.58 / 1;
  background-color: gray;
  border-radius: 10px;
  padding: 10px; }
  .credit_card.main {
    background: #09B9C6; }
  .credit_card.sub {
    background: #7AA0DA; }
  .credit_card .item_util {
    display: flex;
    position: absolute;
    top: 6px;
    right: 10px; }
    .credit_card .item_util.hide {
      display: none; }
    .credit_card .item_util img {
      margin-left: 6px; }
  .credit_card .item_type {
    position: absolute;
    top: 22px;
    left: 18px; }
    .credit_card .item_type p {
      color: #e8e8e8; }
  .credit_card .item_number {
    display: flex;
    align-items: center;
    height: 100%; }
    .credit_card .item_number > div {
      width: 25%;
      text-align: center;
      /*
      &:not(:last-of-type) p {
        font-size: 24px;
        font-weight: 600;
      }
      */ }
      .credit_card .item_number > div p {
        width: 60%;
        margin: auto;
        min-width: 36px;
        color: #e8e8e8;
        font-family: 'Inter';
        font-weight: 400; }