@charset "UTF-8";
/**
- 메인으로 사용되는 폰트는 Spoqa Han Sans Neo
- 윈도우, AOS, iOS: Spoqa Han Sans Neo
- Mac OS: Spoqa Han Sans Neo 사용 시, 상하 정렬이 위로 쏠리는 문제가 발생하여 애플 시스템 폰트가 출력되도록 설정
- 기본 컬러값은 Gray-10

<Spoqa Han Sans Neo가 지원하지 않는 언어가 발견될 시>
- 일본어: Noto Sans JP
- 중국어 간체: Noto Sans SC
- 중국어 번체: Noto Sans TC
- 중국어 발음기호: Noto Sans
**/
@font-face {
  font-family: "Spoqa Han Sans Neo";
  font-weight: 700;
  src: local("Spoqa Han Sans Neo Bold"), url("../fonts/SpoqaHanSansNeo-Bold.woff2") format("woff2"), url("../fonts/SpoqaHanSansNeo-Bold.woff") format("woff"), url("../fonts/SpoqaHanSansNeo-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  font-weight: 500;
  src: local("Spoqa Han Sans Neo Medium"), url("../fonts/SpoqaHanSansNeo-Medium.woff2") format("woff2"), url("../fonts/SpoqaHanSansNeo-Medium.woff") format("woff"), url("../fonts/SpoqaHanSansNeo-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  font-weight: 400;
  src: local("Spoqa Han Sans Neo Regular"), url("../fonts/SpoqaHanSansNeo-Regular.woff2") format("woff2"), url("../fonts/SpoqaHanSansNeo-Regular.woff") format("woff"), url("../fonts/SpoqaHanSansNeo-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  font-weight: 300;
  src: local("Spoqa Han Sans Neo Light"), url("../fonts/SpoqaHanSansNeo-Light.woff2") format("woff2"), url("../fonts/SpoqaHanSansNeo-Light.woff") format("woff"), url("../fonts/SpoqaHanSansNeo-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  font-weight: 100;
  src: local("Spoqa Han Sans Neo Thin"), url("../fonts/SpoqaHanSansNeo-Thin.woff2") format("woff2"), url("../fonts/SpoqaHanSansNeo-Thin.woff") format("woff"), url("../fonts/SpoqaHanSansNeo-Thin.ttf") format("truetype");
}
* {
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: transparent;
}

*, div, article, aside, footer, header, main, nav, section {
  box-sizing: border-box;
}

html {
  height: -webkit-fill-available;
}

body {
  position: relative;
  overflow-x: hidden !important;
  width: 100%;
  min-width: 280px;
  background-color: #fff;
  min-height: calc(var(--vh, 1vh) * 100);
  min-height: -webkit-fill-available;
}

body, input, textarea, select, table, button, code {
  font-family: "Spoqa Han Sans Neo", sans-serif;
  color: #132227;
  font-weight: 400;
  font-size: 16px;
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
  letter-spacing: -0.4px;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, textarea, button, figure {
  margin: 0;
  padding: 0;
}

fieldset {
  min-width: auto;
  border: 0 none;
}

img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  vertical-align: top;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

video {
  vertical-align: middle;
}

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

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

input, select, textarea, button {
  font-size: 16px;
  vertical-align: middle;
}

button {
  border: 0 none;
  background-color: transparent;
  cursor: pointer;
  outline: none;
}

button:disabled {
  cursor: auto;
}

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

input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration {
  display: none;
}

input[type=text], input[type=password] {
  overflow: hidden !important;
  transform: none;
}

input::-webkit-input-placeholder, input::-moz-placeholder, input:-ms-input-placeholder, input:-moz-placeholder {
  color: #aaa;
}

input[disabled] {
  color: #888;
  -webkit-text-fill-color: #888;
  opacity: 0.4;
}

button, input, textarea, select { /* -webkit-appearance:none;*/
  border-radius: 0;
  border: 0 none;
}

select::-ms-expand {
  display: none;
}

section, header, footer, main, article, aside, nav, figcaption, figure {
  display: block;
}

address, cite, code, dfn, em, var, i {
  font-style: normal;
  font-weight: 400;
}

legend, caption {
  font-size: 0;
  line-height: 0;
  visibility: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
}

strong {
  font-weight: 600;
}

a {
  color: #132227;
  text-decoration: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

a:active, a:hover {
  text-decoration: none;
}

hr {
  display: none;
}

mark {
  background-color: transparent;
  color: inherit;
}

i {
  vertical-align: middle;
}

iframe {
  background-color: #eceef1;
}

.screen_out {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
}

input[disabled] {
  cursor: not-allowed !important;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

#wcontent {
  flex: 1;
}

.ico {
  display: inline-block;
}

.ico.chevron_down {
  width: 100%;
  height: 100%;
  background-image: url("../images/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.chevron_left {
  width: 100%;
  height: 100%;
  background-image: url("../images/chevron-left.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.chevron_right {
  width: 100%;
  height: 100%;
  background-image: url("../images/chevron-right.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.chevron_up {
  width: 100%;
  height: 100%;
  background-image: url("../images/chevron-up.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.close {
  width: 100%;
  height: 100%;
  background-image: url("../images/close.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.more {
  width: 100%;
  height: 100%;
  background-image: url("../images/more.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.check {
  width: 100%;
  height: 100%;
  background-image: url("../images/check.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.menu {
  width: 100%;
  height: 100%;
  background-image: url("../images/menu.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.search {
  width: 100%;
  height: 100%;
  background-image: url("../images/search.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.download {
  width: 100%;
  height: 100%;
  background-image: url("../images/download.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.share {
  width: 100%;
  height: 100%;
  background-image: url("../images/share.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.pause_fill {
  width: 100%;
  height: 100%;
  background-image: url("../images/pause-fill.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.play_fill {
  width: 100%;
  height: 100%;
  background-image: url("../images/play-fill.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.star_fill {
  width: 100%;
  height: 100%;
  background-image: url("../images/star-fill.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.favorite {
  width: 100%;
  height: 100%;
  background-image: url("../images/favorite.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.favorite_fill {
  width: 100%;
  height: 100%;
  background-image: url("../images/favorite-fill.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.my {
  width: 100%;
  height: 100%;
  background-image: url("../images/my.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.time {
  width: 100%;
  height: 100%;
  background-image: url("../images/time.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.volume_fill {
  width: 100%;
  height: 100%;
  background-image: url("../images/volume-fill.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.printer {
  width: 100%;
  height: 100%;
  background-image: url("../images/printer.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.headphones {
  width: 100%;
  height: 100%;
  background-image: url("../images/headphones.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.logo_fill {
  width: 100%;
  height: 100%;
  background-image: url("../images/logo-fill.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.bell {
  width: 100%;
  height: 100%;
  background-image: url("../images/bell.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.add {
  width: 100%;
  height: 100%;
  background-image: url("../images/add.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.book_open {
  width: 100%;
  height: 100%;
  background-image: url("../images/book-open.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.my_fill {
  width: 100%;
  height: 100%;
  background-image: url("../images/my-fill.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.calender {
  width: 15px;
  height: 15px;
  background-image: url("../images/calender.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.smile {
  width: 100%;
  height: 100%;
  background-image: url("../images/smile.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.users {
  width: 17px;
  height: 13px;
  background-image: url("../images/users.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.file_check {
  width: 12px;
  height: 15px;
  background-image: url("../images/file-check.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.award {
  width: 12px;
  height: 18px;
  background-image: url("../images/award.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.avatar {
  width: 100%;
  height: 100%;
  background-image: url("../images/avatar.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.replay {
  width: 100%;
  height: 100%;
  background-image: url("../images/replay.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.repeat {
  width: 100%;
  height: 100%;
  background-image: url("../images/repeat.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.instargram_white {
  width: 100%;
  height: 100%;
  background-image: url("../images/instargram-white.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.naverblog_white {
  width: 100%;
  height: 100%;
  background-image: url("../images/naverblog-white.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.brunch_white {
  width: 100%;
  height: 100%;
  background-image: url("../images/brunch-white.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.absent {
  width: 100%;
  height: 100%;
  background-image: url("../images/absent.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.alert_circle {
  width: 100%;
  height: 100%;
  background-image: url("../images/alert-circle.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.arrRightBlue {
  width: 100%;
  height: 100%;
  background-image: url("../images/arrRightBlue.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.arr_right_blue {
  width: 100%;
  height: 100%;
  background-image: url("../images/arr-right-blue.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.attendance {
  width: 100%;
  height: 100%;
  background-image: url("../images/attendance.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.blue_right {
  width: 100%;
  height: 100%;
  background-image: url("../images/blue-right.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.bulb {
  width: 100%;
  height: 100%;
  background-image: url("../images/bulb.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.check_blue {
  width: 100%;
  height: 100%;
  background-image: url("../images/check-blue.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.checkbox_deselected {
  width: 100%;
  height: 100%;
  background-image: url("../images/checkbox-deselected.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.checkbox_selected {
  width: 100%;
  height: 100%;
  background-image: url("../images/checkbox-selected.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.fail {
  width: 100%;
  height: 100%;
  background-image: url("../images/fail.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.ico_book {
  width: 100%;
  height: 100%;
  background-image: url("../images/ico-book.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.ico_chk {
  width: 100%;
  height: 100%;
  background-image: url("../images/ico-chk.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.ico_people {
  width: 100%;
  height: 100%;
  background-image: url("../images/ico-people.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.ico_watch_gray {
  width: 100%;
  height: 100%;
  background-image: url("../images/ico-watch-gray.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.loop {
  width: 100%;
  height: 100%;
  background-image: url("../images/loop.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.loop_on {
  width: 100%;
  height: 100%;
  background-image: url("../images/loop-on.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.preview_button {
  width: 100%;
  height: 100%;
  background-image: url("../images/preview-button.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.radio_deselected {
  width: 100%;
  height: 100%;
  background-image: url("../images/radio-deselected.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.radio_selected {
  width: 100%;
  height: 100%;
  background-image: url("../images/radio-selected.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.repeat {
  width: 100%;
  height: 100%;
  background-image: url("../images/repeat.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.replay {
  width: 100%;
  height: 100%;
  background-image: url("../images/replay.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.symbol {
  width: 100%;
  height: 100%;
  background-image: url("../images/symbol.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.volume_fill_on {
  width: 100%;
  height: 100%;
  background-image: url("../images/volume-fill-on.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico_flag {
  display: inline-block;
  width: 24px;
  height: 16px;
}
.ico_flag.en {
  background-image: url("../images/flag-en.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}
.ico_flag.jp {
  background-image: url("../images/flag-jp.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}
.ico_flag.cn {
  background-image: url("../images/flag-cn.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.eye {
  width: 100%;
  height: 100%;
  background-image: url("../images/eye.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.logo_apple {
  width: 100%;
  height: 100%;
  background-image: url("../images/ico-apple.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.logo_google {
  width: 100%;
  height: 100%;
  background-image: url("../images/ico-google.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.logo_naver {
  width: 100%;
  height: 100%;
  background-image: url("../images/ico-naver.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.logo_kakao {
  width: 100%;
  height: 100%;
  background-image: url("../images/ico-kakao.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.cancel_circle {
  width: 100%;
  height: 100%;
  background-image: url("../images/cancel-circle.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.minus_circle {
  width: 100%;
  height: 100%;
  background-image: url("../images/minus-circle.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.plus_circle {
  width: 100%;
  height: 100%;
  background-image: url("../images/plus-circle.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.file_check2 {
  width: 100%;
  height: 100%;
  background-image: url("../images/file-check-gray.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.plus_bold {
  width: 100%;
  height: 100%;
  background-image: url("../images/plus-bold.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.s101_symbol {
  background-image: url("../images/symbol.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.s101_hor {
  background-image: url("../images/101-hor.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.s101lab_hor {
  background-image: url("../images/101lab-hor.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.s101phone_hor {
  background-image: url("../images/101phone-hor.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.s101campus_hor {
  background-image: url("../images/101campus-hor.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.s101labinc_hor {
  background-image: url("../images/101labinc-hor.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.s101_vert {
  background-image: url("../images/101-vert.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.s101lab_vert {
  background-image: url("../images/101lab-vert.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.s101phone_vert {
  background-image: url("../images/101phone-vert.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.s101campus_vert {
  background-image: url("../images/101campus-vert.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.s101labinc_vert {
  background-image: url("../images/101labinc-vert.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.screen_out {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
}

.point_txt {
  color: #1A84EA;
}

.btn_primary {
  display: inline-block;
  text-align: center;
  color: #ffffff;
  background: #1A84EA;
  border: 1px solid #1A84EA;
}
@media (hover: hover) and (pointer: fine) {
  .btn_primary:hover {
    background: #0E6FDB;
    border: 1px solid #0E6FDB;
  }
}
.btn_primary.small {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  height: 32px;
  line-height: 30px;
  border-radius: 4px;
  padding: 0 12px;
}
.btn_primary.medium {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  height: 48px;
  line-height: 46px;
  border-radius: 8px;
  padding: 0 20px;
}
.btn_primary.large {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  height: 52px;
  line-height: 50px;
  border-radius: 8px;
  padding: 0 24px;
}
.btn_primary:disabled, .btn_primary.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  display: inline-block;
  text-align: center;
  color: #ffffff;
  background: #1A84EA;
  border: 1px solid #1A84EA;
}

.btn_secondary {
  display: inline-block;
  text-align: center;
  color: #1A84EA;
  background: #ffffff;
  border: 1px solid #1A84EA;
}
@media (hover: hover) and (pointer: fine) {
  .btn_secondary:hover {
    background: #EDF1F1;
    border: 1px solid #1A84EA;
  }
}
.btn_secondary.small {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  height: 32px;
  line-height: 30px;
  border-radius: 4px;
  padding: 0 12px;
}
.btn_secondary.medium {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  height: 48px;
  line-height: 46px;
  border-radius: 8px;
  padding: 0 20px;
}
.btn_secondary.large {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  height: 52px;
  line-height: 50px;
  border-radius: 8px;
  padding: 0 24px;
}
.btn_secondary:disabled, .btn_secondary.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  display: inline-block;
  text-align: center;
  color: #1A84EA;
  background: #ffffff;
  border: 1px solid #1A84EA;
}

.btn_tertiary {
  position: relative;
  display: inline-block;
  text-align: center;
  color: #4A5457;
  background: #ffffff;
  border: 1px solid #B0BBBE;
}
@media (hover: hover) and (pointer: fine) {
  .btn_tertiary:hover {
    background: #EDF1F1;
    border: 1px solid #B0BBBE;
  }
}
.btn_tertiary.small {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  height: 32px;
  line-height: 30px;
  border-radius: 4px;
  padding: 0 12px;
}
.btn_tertiary.medium {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  height: 48px;
  line-height: 46px;
  border-radius: 8px;
  padding: 0 20px;
}
.btn_tertiary.large {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  height: 52px;
  line-height: 50px;
  border-radius: 8px;
  padding: 0 24px;
}
.btn_tertiary:disabled, .btn_tertiary.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  display: inline-block;
  text-align: center;
  color: #4A5457;
  background: #ffffff;
  border: 1px solid #B0BBBE;
}

.btn_critical {
  border: 1px solid #EB4545;
  display: inline-block;
  text-align: center;
  color: #ffffff;
  background: #EB4545;
  border: 1px solid #EB4545;
}
@media (hover: hover) and (pointer: fine) {
  .btn_critical:hover {
    background: #C20000;
    border: 1px solid #C20000;
  }
}
.btn_critical.small {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  height: 32px;
  line-height: 30px;
  border-radius: 4px;
  padding: 0 12px;
}
.btn_critical.medium {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  height: 48px;
  line-height: 46px;
  border-radius: 8px;
  padding: 0 20px;
}
.btn_critical.large {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  height: 52px;
  line-height: 50px;
  border-radius: 8px;
  padding: 0 24px;
}
.btn_critical:disabled, .btn_critical.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border: 1px solid #EB4545;
  display: inline-block;
  text-align: center;
  color: #ffffff;
  background: #EB4545;
  border: 1px solid #EB4545;
}

.btn_white {
  border: 1px solid #ffffff;
  display: inline-block;
  text-align: center;
  color: #ffffff;
  background: none;
  border: 1px solid #ffffff;
}
.btn_white.small {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  height: 32px;
  line-height: 30px;
  border-radius: 4px;
  padding: 0 12px;
}
.btn_white.medium {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  height: 48px;
  line-height: 46px;
  border-radius: 8px;
  padding: 0 20px;
}
.btn_white.large {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  height: 52px;
  line-height: 50px;
  border-radius: 8px;
  padding: 0 24px;
}
.btn_white:disabled, .btn_white.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border: 1px solid #ffffff;
  display: inline-block;
  text-align: center;
  color: #ffffff;
  background: none;
  border: 1px solid #ffffff;
}

.box_input {
  overflow: hidden;
  position: relative;
}
.box_input:last-child {
  margin-bottom: 0;
}
.box_input .txt_label {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #4A5457;
}
.box_input .comm_inp {
  width: 100%;
  height: 48px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  line-height: 46px;
  padding: 0 12px;
  background: #ffffff;
  border: 1px solid #B0BBBE;
  border-radius: 8px;
  color: #132227;
}
.box_input .comm_inp::-moz-placeholder {
  color: #96A1A4;
}
.box_input .comm_inp::placeholder {
  color: #96A1A4;
}
.box_input .comm_inp:focus {
  border: 2px solid #1A84EA;
  outline: none;
}
.box_input .comm_inp.error {
  border: 2px solid #EB4545;
}
.box_input .comm_inp.success {
  border: 1px solid #1A84EA;
}
.box_input .msg_txt {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.box_input .msg_txt.error {
  color: #EB4545;
}
.box_input .msg_txt.success {
  color: #1A84EA;
}
.box_input.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.box_input.disabled input {
  pointer-events: none;
}
.box_input.disabled button, .box_input.disabled a {
  pointer-events: none;
}

.drop_down {
  position: relative;
}
.drop_down .txt_label {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #4A5457;
}
.drop_down .select_box {
  position: relative;
}
.drop_down .select_box .comm_inp {
  width: 100%;
  height: 48px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  line-height: 46px;
  padding: 0 12px;
  background: #ffffff;
  border: 1px solid #B0BBBE;
  border-radius: 8px;
  color: #132227;
  padding-right: 48px;
  cursor: pointer;
}
.drop_down .select_box .comm_inp::-moz-placeholder {
  color: #96A1A4;
}
.drop_down .select_box .comm_inp::placeholder {
  color: #96A1A4;
}
.drop_down .select_box .comm_inp:focus {
  border: 2px solid #1A84EA;
  outline: none;
}
.drop_down .select_box .comm_inp.error {
  border: 2px solid #EB4545;
}
.drop_down .select_box .comm_inp.success {
  border: 1px solid #1A84EA;
}
.drop_down .select_box .btn_drop {
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: auto;
  left: auto;
  width: 24px;
  height: 24px;
  background-image: url("../images/dropdown-down.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 14px 8px;
}
.drop_down .select_box.active .list_dropdown {
  display: block;
}
.drop_down .select_box.active .btn_drop {
  background-image: url("../images/dropdown-up.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 14px 8px;
}
.drop_down .list_dropdown {
  display: none;
  width: 100%;
  max-height: 240px;
  overflow-y: auto;
  position: absolute;
  top: 52px;
  right: auto;
  bottom: auto;
  left: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  background: #ffffff;
  box-shadow: 0px 0px 12px rgba(19, 34, 39, 0.2);
  border-radius: 8px;
  z-index: 5;
}
.drop_down .list_dropdown .btn_option {
  display: flex;
  gap: 8px;
  padding: 12px;
  position: relative;
  width: 100%;
  height: 48px;
  text-align: left;
  background-color: #ffffff;
}
.drop_down .list_dropdown .btn_option .txt {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drop_down .list_dropdown .btn_option.select {
  color: #1A84EA;
  font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
  .drop_down .list_dropdown .btn_option:hover {
    background-color: #EDF1F1;
  }
}
.drop_down .list_dropdown .btn_option.tag .tag_label {
  flex-shrink: 0;
}
.drop_down.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.drop_down.disabled * {
  pointer-events: none;
}

.comm_chk {
  overflow: hidden;
  min-height: 20px;
}
.comm_chk .inp_chk {
  display: none;
}
.comm_chk .inp_chk:checked + label .icon {
  background-image: url("../images/checkbox-selected.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 20px 20px;
}
.comm_chk label {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px;
  cursor: pointer;
}
.comm_chk label .icon {
  width: 20px;
  height: 20px;
  background-image: url("../images/checkbox-deselected.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 20px 20px;
}
.comm_chk label .label_txt {
  flex: 1;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #4A5457;
  word-break: break-all;
}
.comm_chk label .label_price {
  float: left;
  margin-left: 8px;
  color: #1A84EA;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.comm_chk.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.comm_chk.disabled * {
  pointer-events: none;
}
.comm_chk.radio .inp_chk {
  display: none;
}
.comm_chk.radio .inp_chk:checked + label .icon {
  background-image: url("../images/radio-selected.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 20px 20px;
}
.comm_chk.radio .icon {
  background-image: url("../images/radio-deselected.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 20px 20px;
}

.btn_switch {
  width: 36px;
  position: relative;
  cursor: pointer;
  height: 20px;
  background: #C7D0D2;
  border-radius: 10px;
}
.btn_switch:before {
  position: absolute;
  top: 2px;
  right: auto;
  bottom: auto;
  left: 2px;
  background: #ffffff;
  width: 16px;
  height: 16px;
  box-shadow: 0px 0px 3px rgba(19, 34, 39, 0.3);
  border-radius: 8px;
  content: "";
}
.btn_switch.on {
  background: #1A84EA;
}
.btn_switch.on:before {
  left: auto;
  right: 2px;
  content: "";
}
.btn_switch:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.wrap_option.half {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  gap: 16px;
}
.wrap_option.half .option_box {
  flex-basis: 0;
  flex-grow: 1;
  margin-bottom: 0;
}
.wrap_option .option_box {
  display: block;
  width: 100%;
  margin-bottom: 16px;
  background: #ffffff;
  border: 1px solid #B0BBBE;
  border-radius: 8px;
  text-align: center;
}
.wrap_option .option_box .top_cont {
  padding: 16px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0px;
}
.wrap_option .option_box .top_cont .txt {
  display: block;
  margin-bottom: 4px;
}
.wrap_option .option_box .top_cont .txt:last-child {
  margin-bottom: 0;
}
.wrap_option .option_box .top_cont .txt.title {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.wrap_option .option_box .top_cont .txt.sub {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.wrap_option .option_box .top_cont .txt.price {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #1A84EA;
  white-space: nowrap;
}
.wrap_option .option_box .top_cont .txt.total {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.wrap_option .option_box .top_cont .txt.through {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: line-through;
  color: #7D878B;
}
.wrap_option .option_box .top_cont .right_txt {
  text-align: right;
}
.wrap_option .option_box .top_cont .tag {
  margin-bottom: 4px;
}
.wrap_option .option_box .bottom_cont {
  width: 100%;
  padding: 16px;
  border-top: 1px solid #DDE4E6;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.wrap_option .option_box.type2 {
  text-align: left;
}
.wrap_option .option_box.type2 .top_cont {
  justify-content: space-between;
}
.wrap_option .option_box.select {
  border: 3px solid #1A84EA;
}
.wrap_option .option_box:last-child {
  margin-bottom: 0;
}
@media (hover: hover) and (pointer: fine) {
  .wrap_option .option_box:hover {
    background: #EDF1F1;
  }
}
.wrap_option .option_box.disabled, .wrap_option .option_box:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
@media (hover: hover) and (pointer: fine) {
  .wrap_option .option_box.disabled:hover, .wrap_option .option_box:disabled:hover {
    background: #ffffff;
  }
}
.wrap_option .option_desc .option_box.select {
  margin-bottom: 0px;
}
.wrap_option .option_desc .option_box.select + .desc_txt {
  display: block;
}
.wrap_option .option_desc .desc_txt {
  display: none;
  margin-bottom: 16px;
}
.wrap_option .option_desc .desc_txt .txt {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
  text-indent: -10px;
  margin-left: 10px;
}
.wrap_option .option_desc .desc_txt .txt:first-child {
  margin-top: 4px;
}
.wrap_option .option_desc .desc_txt .link {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: underline;
  color: #7D878B;
}
.wrap_option .option_desc .desc_txt .comm_chk {
  margin-top: 12px;
}

.gray_d_s {
  display: inline-block;
  padding: 0 8px;
  border-radius: 4px;
  text-align: center;
  color: #ffffff;
  background: #132227;
  height: 24px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  line-height: 24px;
}

.gray_d_l {
  display: inline-block;
  padding: 0 8px;
  border-radius: 4px;
  text-align: center;
  color: #ffffff;
  background: #132227;
  height: 28px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  line-height: 28px;
}

.gray_l_s {
  display: inline-block;
  padding: 0 8px;
  border-radius: 4px;
  text-align: center;
  color: #4A5457;
  background: #EDF1F1;
  height: 24px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  line-height: 24px;
  border: 1px solid #DDE4E6;
}

.gray_l_l {
  display: inline-block;
  padding: 0 8px;
  border-radius: 4px;
  text-align: center;
  color: #4A5457;
  background: #EDF1F1;
  height: 28px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  line-height: 28px;
  border: 1px solid #DDE4E6;
}

.blue_d_s {
  display: inline-block;
  padding: 0 8px;
  border-radius: 4px;
  text-align: center;
  color: #ffffff;
  background: #1A84EA;
  height: 24px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  line-height: 24px;
}

.blue_d_l {
  display: inline-block;
  padding: 0 8px;
  border-radius: 4px;
  text-align: center;
  color: #ffffff;
  background: #1A84EA;
  height: 28px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  line-height: 28px;
}

.blue_l_s {
  display: inline-block;
  padding: 0 8px;
  border-radius: 4px;
  text-align: center;
  color: #1A84EA;
  background: #E2F2FF;
  height: 24px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  line-height: 24px;
}

.blue_l_l {
  display: inline-block;
  padding: 0 8px;
  border-radius: 4px;
  text-align: center;
  color: #1A84EA;
  background: #E2F2FF;
  height: 28px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  line-height: 28px;
}

.red_d_s {
  display: inline-block;
  padding: 0 8px;
  border-radius: 4px;
  text-align: center;
  color: #ffffff;
  background: #EB4545;
  height: 24px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  line-height: 24px;
}

.red_d_l {
  display: inline-block;
  padding: 0 8px;
  border-radius: 4px;
  text-align: center;
  color: #ffffff;
  background: #EB4545;
  height: 28px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  line-height: 28px;
}

.red_l_s {
  display: inline-block;
  padding: 0 8px;
  border-radius: 4px;
  text-align: center;
  color: #EB4545;
  background: #FFE0E0;
  height: 24px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  line-height: 24px;
}

.red_l_l {
  display: inline-block;
  padding: 0 8px;
  border-radius: 4px;
  text-align: center;
  color: #EB4545;
  background: #FFE0E0;
  height: 28px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  line-height: 28px;
}

.bottom_bar {
  position: fixed;
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0px 0px 24px rgba(19, 34, 39, 0.2);
  min-width: 280px;
  z-index: 5;
}
.bottom_bar .bar_cont {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
}
.bottom_bar .bar_cont .txt {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.bottom_bar .bar_cont .price {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #1A84EA;
}
.bottom_bar .bar_cont .sub {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.bottom_bar .bar_cont.pc {
  display: flex;
}
.bottom_bar .bar_cont.mobile {
  display: none;
}

.ui-widget.ui-widget-content {
  border: 0 none;
}

.ui-datepicker {
  width: auto;
  padding: 0 8px;
}

.ui-widget-header {
  position: relative;
  height: 52px;
  text-align: left;
  border: 0 none;
  background: #ffffff;
  color: #132227;
}

.ui-datepicker .ui-datepicker-header {
  padding: 0 8px;
}

.ui-datepicker .ui-datepicker-title {
  margin: 0;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  line-height: 52px;
}

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
  margin: 0;
  left: 0;
  right: 0;
}

.ui-datepicker .ui-datepicker-prev {
  top: 14px;
  right: 56px;
  left: auto;
  width: 24px;
  height: 24px;
  cursor: pointer;
  background: url(../images/chevron-left.svg) center no-repeat;
  background-size: 8px 14px;
}
.ui-datepicker .ui-datepicker-prev.ui-state-disabled {
  display: none;
}

.ui-datepicker .ui-datepicker-next {
  top: 14px;
  right: 8px;
  left: auto;
  width: 24px;
  height: 24px;
  cursor: pointer;
  background: url(../images/chevron-right2.svg) center no-repeat;
  background-size: 8px 14px;
}
.ui-datepicker .ui-datepicker-next span {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
}

.ui-datepicker table {
  margin: 0 0 8px 0;
}

.ui-datepicker table thead {
  padding: 0 8px;
}

.ui-datepicker table tbody {
  padding: 0 8px;
}

.ui-datepicker th {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #4A5457;
  width: 14.28%;
  padding: 8px 0 4px;
}

.ui-datepicker td {
  text-align: center;
  height: 40px;
  padding: 0;
}

.ui-datepicker td a {
  display: inline-block;
  width: 32px;
  height: 32px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
  line-height: 32px;
  padding: 0;
}

.ui-datepicker td span {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}

.ui-datepicker td.ui-datepicker-today a {
  background-color: #EDF1F1;
  border-radius: 100%;
  color: #132227;
}

.ui-datepicker td.ui-datepicker-current-day a {
  background-color: #1A84EA;
  border-radius: 100%;
  color: #ffffff;
}

.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
  color: #132227;
  opacity: 0.4;
  pointer-events: none;
}

.ui-datepicker td.ui-state-disabled .ui-state-default {
  text-decoration-line: line-through;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
  border: 0 none;
  background: #ffffff;
  color: #132227;
  text-align: center;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus {
  border: 0 none;
  color: #132227;
}

.layer_modal {
  display: none;
  position: fixed;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  z-index: 100;
}
.layer_modal.active {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
}
.layer_modal.dialog .layer_cont {
  width: 328px;
}
.layer_modal.dialog .layer_cont .head_cont .sub {
  display: block;
  margin-top: 4px;
}

.layer_cont {
  position: relative;
  width: 480px;
  max-height: 90%;
  overflow: hidden;
  background: #ffffff;
  border-radius: 12px;
  z-index: 20;
}
.layer_cont .head_cont {
  padding: 16px;
}
.layer_cont .head_cont .tit {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
  word-break: break-all;
}
.layer_cont .head_cont .sub {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.layer_cont .body_cont {
  padding: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  border-top: 1px solid #DDE4E6;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
  max-height: calc(var(--vh, 1vh) * 90 - 80px);
}
.layer_cont .body_cont .txt {
  text-align: center;
}
.layer_cont .body_cont .gray_box {
  padding: 16px;
  margin: -16px -16px 16px -16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
  background-color: #EDF1F1;
  border-bottom: 1px solid #DDE4E6;
}
.layer_cont .foot_cont {
  padding: 16px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
}
.layer_cont .foot_cont button, .layer_cont .foot_cont a {
  margin-left: 8px;
}
.layer_cont .foot_cont button:first-child, .layer_cont .foot_cont a:first-child {
  margin-left: 0;
}
.layer_cont .btn_close {
  position: absolute;
  top: 21px;
  right: 21px;
  bottom: auto;
  left: auto;
  width: 14px;
  height: 14px;
}
.layer_cont.modal .foot_cont {
  border-top: 1px solid #DDE4E6;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
}
.layer_cont.modal .foot_cont a, .layer_cont.modal .foot_cont button {
  flex: 1 1 auto;
}

.dimd {
  display: inline-block;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  background: rgba(19, 34, 39, 0.6);
  position: fixed;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  z-index: 10;
}

.box_tab {
  width: 100%;
}
.box_tab .list_tab {
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
}
.box_tab .list_tab li {
  text-align: center;
}
.box_tab .list_tab.capsule {
  gap: 8px;
}
.box_tab .list_tab.capsule li button, .box_tab .list_tab.capsule li a {
  display: block;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #4A5457;
  background: #EDF1F1;
  border: 1px solid #B0BBBE;
  border-radius: 20px;
  white-space: nowrap;
}
.box_tab .list_tab.capsule li.on button, .box_tab .list_tab.capsule li.on a {
  color: #ffffff;
  background: #132227;
  border-color: #132227;
}
.box_tab .list_tab.text {
  gap: 16px;
}
.box_tab .list_tab.text li button, .box_tab .list_tab.text li a {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
  padding: 10px 0;
}
.box_tab .list_tab.text li.on button, .box_tab .list_tab.text li.on a {
  position: relative;
  color: #132227;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.box_tab .list_tab.text li.on button:after, .box_tab .list_tab.text li.on a:after {
  display: block;
  position: absolute;
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #132227;
  content: "";
}
.box_tab .list_tab.options {
  display: flex;
  margin: 0 auto;
  padding: 4px;
  background: #DDE4E6;
  border-radius: 100px;
  max-width: 280px;
}
.box_tab .list_tab.options li button, .box_tab .list_tab.options li a {
  display: block;
  width: 100%;
  padding: 8px 0;
  border-radius: 100px;
  color: #4A5457;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.box_tab .list_tab.options li.on button, .box_tab .list_tab.options li.on a {
  background: #ffffff;
  color: #132227;
  box-shadow: 0px 0px 3px rgba(19, 34, 39, 0.3);
}

.wrap_tab .tab_cont {
  display: none;
}
.wrap_tab .tab_cont.active {
  display: block;
}

.box_toast {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  position: fixed;
  top: 40px;
  left: 0;
  width: 100%;
  z-index: 999;
}

.toast_mag {
  display: none;
  max-width: 90%;
  background-color: rgba(19, 34, 39, 0.9);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #ffffff;
  text-align: center;
  border-radius: 8px;
  padding: 16px;
}

.skipnav a {
  position: absolute;
  top: -30px;
  right: auto;
  bottom: auto;
  left: auto;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 30px;
  text-align: center;
  color: #ffffff;
  z-index: 10000;
  line-height: 30px;
  opacity: 0;
}

header {
  position: fixed;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  width: 100%;
  height: 80px;
  min-width: 280px;
  background: #ffffff;
  border-bottom: 1px solid #DDE4E6;
  z-index: 10;
}
header .wrap_header {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
  position: relative;
  height: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 16px;
}
header .wrap_header .home_logo {
  display: block;
  margin-top: -4px;
  overflow: hidden;
  height: 20px;
}
header .wrap_header .home_logo .link_home {
  display: block;
  height: 100%;
}
header .wrap_header .home_logo .link_home img {
  height: 100%;
  width: auto;
  max-width: none;
}
header .wrap_header .dimd {
  display: none;
}
header .wrap_header .btn_open {
  display: none;
}
header .wrap_header .btn_close {
  display: none;
}
header .menu_cont {
  min-width: 280px;
}
header .menu_cont .sub_logo {
  display: none;
}
header .menu_cont .wrap_alarm {
  position: relative;
  width: 24px;
  height: 84px;
  position: absolute;
  top: 0;
  right: 267px;
  bottom: auto;
  left: auto;
}
header .menu_cont .wrap_alarm .link_alarm {
  display: block;
  position: relative;
  width: 24px;
  height: 24px;
  margin-top: 28px;
  background-image: url("../images/bell.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}
header .menu_cont .wrap_alarm .link_alarm .num {
  display: block;
  position: absolute;
  top: -4px;
  right: auto;
  bottom: auto;
  left: 16px;
  height: 16px;
  min-width: 16px;
  padding: 0px 4px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  line-height: 16px;
  color: #ffffff;
  text-align: center;
  background-color: #EB4545;
}
header .menu_cont .wrap_alarm .box_alarm {
  display: none;
  overflow: hidden;
  position: absolute;
  top: 100%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: 360px;
  margin-left: -180px;
  box-shadow: 0px 0px 12px rgba(19, 34, 39, 0.2);
  border-radius: 8px;
  border-bottom: 1px solid #DDE4E6;
  background-color: #ffffff;
}
header .menu_cont .wrap_alarm .box_alarm .head_cont {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  padding: 16px;
  height: 64px;
  border-bottom: 1px solid #DDE4E6;
}
header .menu_cont .wrap_alarm .box_alarm .head_cont .tit {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
}
header .menu_cont .wrap_alarm .box_alarm .head_cont .btn_tertiary {
  margin-left: auto;
}
header .menu_cont .wrap_alarm .box_alarm .body_cont {
  max-height: 400px;
  overflow-x: hidden;
  overflow-y: auto;
}
header .menu_cont .wrap_alarm .box_alarm .body_cont .list_alarm li {
  padding: 16px;
}
header .menu_cont .wrap_alarm .box_alarm .body_cont .list_alarm li .link_wrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: norwap;
  gap: 16px;
}
header .menu_cont .wrap_alarm .box_alarm .body_cont .list_alarm li .alarm_cont {
  overflow: hidden;
}
header .menu_cont .wrap_alarm .box_alarm .body_cont .list_alarm li .alarm_cont .state {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  margin-bottom: 6px;
  width: 100%;
}
header .menu_cont .wrap_alarm .box_alarm .body_cont .list_alarm li .alarm_cont .state .circle, header .menu_cont .wrap_alarm .box_alarm .body_cont .list_alarm li .alarm_cont .state .circle2 {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background-color: #EB4545;
}
header .menu_cont .wrap_alarm .box_alarm .body_cont .list_alarm li .alarm_cont .state .circle.read, header .menu_cont .wrap_alarm .box_alarm .body_cont .list_alarm li .alarm_cont .state .circle2.read {
  background-color: #C7D0D2;
}
header .menu_cont .wrap_alarm .box_alarm .body_cont .list_alarm li .alarm_cont .state .txt {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
header .menu_cont .wrap_alarm .box_alarm .body_cont .list_alarm li .alarm_cont .alarm_tit {
  display: block;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
header .menu_cont .wrap_alarm .box_alarm .body_cont .list_alarm li .alarm_cont .alarm_txt {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
header .menu_cont .wrap_alarm .box_alarm .body_cont .list_alarm li .alarm_cont .alarm_txt.tit {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
header .menu_cont .wrap_alarm .box_alarm .body_cont .list_alarm li .link_go {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #1A84EA;
}
header .menu_cont .wrap_alarm .box_alarm .body_cont .list_alarm li .link_go:after {
  display: inline-block;
  width: 6px;
  height: 10px;
  margin-left: 8px;
  text-align: center;
  background-image: url("../images/arr-right-blue.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  content: "";
}
header .menu_cont .wrap_alarm .box_alarm .body_cont .list_alarm li .thumb {
  margin-left: auto;
  min-width: 60px;
}
@media (hover: hover) and (min-width: 1080px) {
  header .menu_cont .wrap_alarm .box_alarm .body_cont .list_alarm li:hover {
    background-color: #EDF1F1;
  }
}
header .menu_cont .wrap_alarm .box_alarm .body_cont .list_alarm li:active {
  background-color: #EDF1F1;
}
header .menu_cont .wrap_alarm .box_alarm .body_cont .no_alarm {
  padding: 160px 0;
  text-align: center;
}
header .menu_cont .wrap_alarm .box_alarm .body_cont .no_alarm .tit {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #4A5457;
}
header .menu_cont .wrap_alarm .box_alarm .body_cont .no_alarm .txt {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
header .menu_cont .wrap_alarm .box_alarm .foot_cont {
  width: 100%;
  height: 56px;
  border-top: 1px solid #DDE4E6;
}
header .menu_cont .wrap_alarm .box_alarm .foot_cont .link_history {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
@media (hover: hover) and (pointer: fine) and (min-width: 1080px) {
  header .menu_cont .wrap_alarm:hover .box_alarm {
    display: block;
  }
}
header .menu_cont .box_join {
  position: absolute;
  top: 16px;
  right: 16px;
  bottom: auto;
  left: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  gap: 8px;
}
header .menu_cont .box_join.login {
  top: 0;
  gap: 16px;
}
header .menu_cont .box_join.login .link_mypage {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  height: 84px;
}
header .menu_cont .box_join.login .link_mypage .thumb {
  display: block;
  width: 24px;
  height: 24px;
  margin-top: -4px;
  margin-right: 8px;
}
header .menu_cont .box_join.login .link_mypage .name_txt {
  display: block;
  margin-top: -4px;
  margin-right: 2px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
header .menu_cont .box_join.login .link_mypage .ico_arr {
  display: block;
  width: 17px;
  height: 17px;
  margin-top: -4px;
  background-image: url("../images/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 10px 6px;
}
header .menu_cont .box_join.login .list_my {
  display: none;
  width: 100%;
  max-height: 240px;
  overflow-y: auto;
  position: absolute;
  top: 52px;
  right: auto;
  bottom: auto;
  left: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  background: #ffffff;
  box-shadow: 0px 0px 12px rgba(19, 34, 39, 0.2);
  border-radius: 8px;
  top: 84px;
  white-space: nowrap;
  width: auto;
  min-width: 160px;
  max-height: none;
}
header .menu_cont .box_join.login .list_my li {
  display: flex;
  gap: 8px;
  padding: 12px;
  position: relative;
  width: 100%;
  height: 48px;
  text-align: left;
  background-color: #ffffff;
  padding: 0;
}
header .menu_cont .box_join.login .list_my li .link_sub {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
  display: block;
  width: 100%;
  height: 100%;
  padding: 12px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
header .menu_cont .box_join.login .list_my li .link_sub span {
  margin-left: auto;
}
header .menu_cont .box_join.login .list_my li:hover {
  background-color: #EDF1F1;
}
header .menu_cont .box_join.login .btn_primary {
  margin-top: -4px;
}
@media (hover: hover) and (pointer: fine) and (min-width: 1080px) {
  header .menu_cont .box_join.login .my_profile:hover .link_mypage .ico_arr {
    background-image: url("../images/chevron-up.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 10px 6px;
  }
  header .menu_cont .box_join.login .my_profile:hover .list_my {
    display: block;
  }
}
header .menu_cont nav .list_nav > li {
  position: relative;
  float: left;
  height: 84px;
}
header .menu_cont nav .list_nav > li .link_nav {
  margin-right: 28px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
  line-height: 80px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  cursor: pointer;
}
header .menu_cont nav .list_nav > li:after {
  clear: both;
  content: "";
}
@media (hover: hover) and (pointer: fine) and (min-width: 1080px) {
  header .menu_cont nav .list_nav > li:hover .sub_nav {
    display: block;
  }
  header .menu_cont nav .list_nav > li:hover .link_nav {
    color: #1A84EA;
  }
}
header .menu_cont nav .list_nav > li:last-child .link_nav {
  margin-right: 0;
}
header .menu_cont nav .list_nav:after {
  clear: both;
  content: "";
}
header .menu_cont nav .sub_nav {
  display: none;
  width: 100%;
  max-height: 240px;
  overflow-y: auto;
  position: absolute;
  top: 52px;
  right: auto;
  bottom: auto;
  left: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  background: #ffffff;
  box-shadow: 0px 0px 12px rgba(19, 34, 39, 0.2);
  border-radius: 8px;
  top: 84px;
  white-space: nowrap;
  width: auto;
  min-width: 160px;
  max-height: none;
}
header .menu_cont nav .sub_nav li {
  display: flex;
  gap: 8px;
  padding: 12px;
  position: relative;
  width: 100%;
  height: 48px;
  text-align: left;
  background-color: #ffffff;
  padding: 0;
}
header .menu_cont nav .sub_nav li .link_sub {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
  display: block;
  width: 100%;
  height: 100%;
  padding: 12px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
header .menu_cont nav .sub_nav li .link_sub span {
  margin-left: auto;
}
header .menu_cont nav .sub_nav li:hover {
  background-color: #EDF1F1;
}
header .menu_cont .link_logout {
  display: none;
}

footer {
  background-color: #132227;
}
footer .footer_cont {
  max-width: 1140px;
  margin: 0 auto;
  position: relative;
  padding: 80px 46px;
}
footer .footer_cont .company_name {
  display: block;
  margin-bottom: 42px;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #ffffff;
}
footer .footer_cont .site_map {
  position: absolute;
  top: 80px;
  right: 46px;
  bottom: auto;
  left: auto;
  width: 280px;
  z-index: 1;
}
footer .footer_cont .company_info {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  margin-bottom: 32px;
  color: #7D878B;
}
footer .footer_cont .company_info .corp_txt {
  margin-bottom: 8px;
}
footer .footer_cont .company_info .link_txt {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  text-decoration: underline;
  color: #7D878B;
}
footer .footer_cont .company_info .list_corp {
  overflow: hidden;
}
footer .footer_cont .company_info .list_corp li {
  float: left;
}
footer .footer_cont .box_sns {
  overflow: hidden;
  margin-bottom: 32px;
}
footer .footer_cont .box_sns .link_sns {
  display: block;
  float: left;
  width: 40px;
  height: 40px;
  margin-right: 16px;
  opacity: 0.7;
}
footer .footer_cont .addr {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}

@keyframes gnbOepn {
  from {
    right: -100%;
  }
  to {
    right: 0;
  }
}
@keyframes gnbClose {
  from {
    right: 0;
  }
  to {
    right: -100%;
  }
}
@keyframes dimdShow {
  from {
    display: none;
  }
  to {
    display: block;
  }
}
@keyframes dimdHide {
  from {
    display: block;
  }
  to {
    display: none;
  }
}
@keyframes subMenuOpen {
  from {
    height: 0;
  }
  to {
    height: auto;
  }
}
@keyframes subMenuClose {
  from {
    height: auto;
  }
  to {
    height: 0;
  }
}
.pc_on {
  display: block;
}

.m_on {
  display: none;
}

.xs_on {
  display: none;
}

.wd_100 {
  width: 100%;
}

.wrap_cont {
  width: 100%;
  max-width: 720px;
  min-width: 280px;
  padding: 140px 16px 100px;
  margin: 0 auto;
}
.wrap_cont.wide {
  max-width: 1140px;
}
.wrap_cont.wide .page_tit {
  text-align: left;
}
.wrap_cont.slim {
  max-width: 480px;
}
.wrap_cont.full {
  max-width: none;
  padding: 80px 0 0;
}

.cont_box .page_tit {
  position: relative;
  margin-bottom: 40px;
  text-align: center;
}
.cont_box .heading_1 {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #132227;
}
.cont_box .heading_2 {
  display: block;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #132227;
}
.cont_box .body_1 {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.cont_box .body_2 {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.cont_box .subtitle_2 {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #7D878B;
}
.cont_box .primary_txt {
  color: #1A84EA;
}
.cont_box .inner_box {
  margin-bottom: 40px;
}
.cont_box .inner_box:last-child {
  margin-bottom: 0;
}
.cont_box .inner_box .heading_1 {
  margin-bottom: 16px;
}
.cont_box.laguage .wrap_option .option_box br {
  display: none;
}
.cont_box.laguage .wrap_option .point_txt {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #1A84EA;
}
.cont_box.class .box_tab {
  margin-bottom: 40px;
}
.cont_box.class .box_tab .list_tab.options {
  width: 260px;
}
.cont_box.class .box_tab .list_tab.options li {
  width: 50%;
}
.cont_box.class .wrap_option.small {
  display: flex;
  flex-direction: row;
  justify-content: "space-between";
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  gap: 16px;
  margin-right: -16px;
}
.cont_box.class .wrap_option.small .option_box {
  margin: 0;
  width: calc(25% - 16px);
}
.cont_box.class .wrap_option .txt.sub br {
  display: none;
}
.cont_box.payment .box_input.reserves {
  margin-bottom: 16px;
}
.cont_box.payment .box_input.reserves .inner {
  overflow: hidden;
}
.cont_box.payment .box_input.reserves .inner .comm_inp {
  float: left;
  width: calc(100% - 102px);
}
.cont_box.payment .box_input.reserves .inner .btn_use {
  float: right;
}
.cont_box.payment .bottom_btn {
  text-align: center;
}
.cont_box.payment .bottom_btn a {
  display: inline-block;
  width: 106px;
  padding: 0;
}
.cont_box.complete .bottom_btn a {
  width: 100%;
}
.cont_box.challenge .wrap_tab .box_tab {
  margin-bottom: 40px;
}
.cont_box.challenge .list_challenge {
  overflow: hidden;
  margin: 0 -8px -16px;
}
.cont_box.challenge .list_challenge li {
  float: left;
  width: 33.333%;
  padding: 0 8px;
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
}
.cont_box.challenge .list_challenge .link_thumb {
  display: block;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}
.cont_box.challenge .list_challenge .link_thumb .tag_box {
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  padding: 12px;
}
.cont_box.challenge .list_challenge .tag_box {
  overflow: hidden;
}
.cont_box.challenge .list_challenge .tag_box span {
  float: left;
  margin-right: 8px;
  margin-bottom: 8px;
}
.cont_box.challenge .list_challenge .tag_box span:last-child {
  margin-right: 0;
}
.cont_box.course .page_tit {
  margin-bottom: 16px;
}
.cont_box.course .page_tit .heading_1 {
  margin-bottom: 0;
}
.cont_box.course .page_tit .all_view {
  position: absolute;
  top: 3px;
  right: 0;
  bottom: auto;
  left: auto;
}
.cont_box.course .link_banner {
  display: block;
  position: relative;
  overflow: hidden;
  height: 160px;
  width: 100%;
  text-align: center;
  border-radius: 8px;
}
.cont_box.course .link_banner img {
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: auto;
  min-width: 100%;
  max-width: none;
}
.cont_box.course .swiper-wrapper {
  width: auto;
}
.cont_box.course .list_clip {
  display: block;
  overflow: hidden;
  margin: 0 -8px;
  padding-bottom: 80px;
}
.cont_box.course .list_clip li {
  float: left;
  width: 33.333%;
  margin-top: 16px;
  padding: 0 8px;
}
.cont_box.course .list_clip .link_series {
  overflow: hidden;
  width: 100%;
  height: 64px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0px;
  border-radius: 8px;
  background-color: #EDF1F1;
}
.cont_box.course .list_clip .box_thumb {
  position: relative;
  display: block;
  height: 64px;
  overflow: hidden;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.cont_box.course .list_clip .box_thumb .tag {
  position: absolute;
  top: 8px;
  right: auto;
  bottom: auto;
  left: 8px;
}
.cont_box.course .list_clip .box_txt {
  flex: 1;
  overflow: hidden;
  padding: 8px 12px;
}
.cont_box.course .list_clip .box_txt .series_tit {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.cont_box.course .list_clip .box_txt .series_tit .ico_flag {
  vertical-align: middle;
  margin-right: 3px;
  margin-top: -2px;
}
.cont_box.course .wrap_tab .tab_cont {
  margin-right: -16px;
}
.cont_box.course .wrap_tab .box_tab {
  margin-bottom: 32px;
}
.cont_box.course .wrap_tab .box_tab li {
  width: auto;
}
.cont_box.course .list_book {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 32px 16px;
}
.cont_box.course .list_book li {
  width: calc(20% - 16px);
}
.cont_box.course .list_book .link_series {
  display: block;
}
.cont_box.course .list_book .link_series .thumb {
  position: relative;
  overflow: hidden;
  margin-bottom: 8px;
  border-radius: 8px;
  border: 1px solid #DDE4E6;
  min-height: 10px;
}
.cont_box.course .list_book .link_series .thumb img {
  width: 100%;
}
.cont_box.course .list_book .link_series .thumb .new_tag {
  position: absolute;
  top: 8px;
  right: auto;
  bottom: auto;
  left: 8px;
}
.cont_box.course .list_book .link_series .tit_txt {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.cont_box.course .list_book .link_series .degree_txt {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.cont_box.course .list_book .box_tag {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.cont_box.clip .wrap_tab .box_tab {
  margin-bottom: 24px;
}
.cont_box.clip .wrap_tab .tab_cont {
  margin: 0;
}
.cont_box.clip .list_clip {
  padding-bottom: 0;
}
.cont_box.clip_detail .head_cont .course_history {
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(19, 34, 39, 0.6);
  border-radius: 8px;
}
.cont_box.clip_detail .head_cont .course_history .txt {
  display: block;
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 12px;
}
.cont_box.clip_detail .head_cont .program_info {
  max-width: none;
}
.cont_box.clip_detail .head_cont .program_info .btn_application {
  overflow: hidden;
}
.cont_box.clip_detail .head_cont .program_info .btn_application a {
  float: left;
  width: 176px;
  margin-right: 16px;
}
.cont_box.clip_detail .head_cont .program_info .btn_application a:last-child {
  margin-right: 0;
}
.cont_box.clip_detail .head_cont.book {
  align-items: center;
}
.cont_box.clip_detail .body_inner {
  max-width: 720px;
  padding: 60px 16px 0;
  margin: 0 auto;
}
.cont_box.clip_detail .inner_box {
  margin-bottom: 60px;
}
.cont_box.clip_detail .intro_box {
  margin-bottom: 60px;
  padding: 20px;
  border-radius: 12px;
  background-color: #E2F2FF;
}
.cont_box.clip_detail .intro_box .tit_txt {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
  margin-bottom: 12px;
}
.cont_box.clip_detail .intro_box .desc_txt {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.cont_box.clip_detail .intro_box .lnk_detail {
  display: inline-block;
  position: relative;
  padding-right: 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #1A84EA;
}
.cont_box.clip_detail .intro_box .lnk_detail:after {
  display: block;
  position: absolute;
  top: 50%;
  right: 0px;
  bottom: auto;
  left: auto;
  width: 8px;
  height: 14px;
  margin-top: -7px;
  background-image: url("../images/arrRightBlue.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  content: "";
}
.cont_box.clip_detail .lsit_good li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 32px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.cont_box.clip_detail .lsit_good li:before {
  display: block;
  position: absolute;
  top: 0px;
  right: auto;
  bottom: auto;
  left: 0px;
  width: 24px;
  height: 24px;
  background-image: url("../images/check-blue.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 18px 14px;
  content: "";
}
.cont_box.clip_detail .lsit_good li:last-child {
  margin-bottom: 0;
}
.cont_box.clip_detail .lsit_benefit li {
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 12px;
  background-color: #EDF1F1;
}
.cont_box.clip_detail .lsit_benefit li .tit_txt {
  display: block;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.cont_box.clip_detail .lsit_benefit li .desc_txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.cont_box.clip_detail .body_2.list40 {
  display: none;
}
.cont_box.clip_detail .list_contents {
  margin-bottom: 16px;
}
.cont_box.clip_detail .list_contents li {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  display: none;
  padding: 12px 0;
  border-bottom: 1px solid #DDE4E6;
}
.cont_box.clip_detail .list_contents li.end {
  border-bottom: 0 none;
}
.cont_box.clip_detail .list_contents li:last-child {
  border-bottom: 0 none;
}
.cont_box.clip_detail .list_contents li .box_thumb {
  width: 89px;
  border-radius: 4px;
  overflow: hidden;
}
.cont_box.clip_detail .list_contents li .txt_box {
  padding-right: 44px;
  width: calc(100% - 89px);
}
.cont_box.clip_detail .list_contents li .txt_box .unit_txt {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.cont_box.clip_detail .list_contents li .txt_box .tit_txt {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
  margin-bottom: 4px;
}
.cont_box.clip_detail .list_contents li .txt_box .sub_txt {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.cont_box.clip_detail .list_contents li .btn_preview {
  position: absolute;
  top: auto;
  right: 0;
  bottom: auto;
  left: auto;
}
.cont_box.clip_detail .list_contents.book li .txt_box {
  padding-right: 0;
}
.cont_box.clip_detail #contentsHidden {
  display: none;
}
.cont_box.clip_detail .list_another {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.cont_box.clip_detail .list_another li {
  position: relative;
  width: calc(33.333% - 12px);
  height: 258px;
  padding: 16px;
  box-shadow: 0px 0px 3px rgba(19, 34, 39, 0.3);
  border-radius: 8px;
}
.cont_box.clip_detail .list_another li .link_more {
  display: block;
}
.cont_box.clip_detail .list_another li .new_tag {
  display: block;
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  padding: 4px 8px;
  border-radius: 8px 0px 8px 0px;
  background-color: #1A84EA;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}
.cont_box.clip_detail .list_another li .thumb {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  margin: 0 auto 16px auto;
  height: 130px;
  padding: 0 27px;
  overflow: hidden;
  width: 100%;
}
.cont_box.clip_detail .list_another li .thumb.length {
  width: 90px;
}
.cont_box.clip_detail .list_another li .thumb img {
  overflow: hidden;
  border-radius: 8px;
  max-height: 100%;
  border: 1px solid #DDE4E6;
}
.cont_box.clip_detail .list_another li .series_txt {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.cont_box.clip_detail .list_another li .tit_txt {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cont_box.clip_detail .list_another li .tag_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}
.cont_box.clip_detail .list_another li .tag_box span {
  white-space: nowrap;
}
.cont_box.clip_detail .book_preview.swiper {
  overflow: initial;
}
.cont_box.clip_detail .book_preview .swiper-wrapper {
  width: 440px;
  margin: 0 auto;
  padding-bottom: 24px;
}
.cont_box.clip_detail .book_preview .swiper-slide {
  max-width: 100%;
  opacity: 0 !important;
}
.cont_box.clip_detail .book_preview .swiper-slide img {
  border: 1px solid #DDE4E6;
}
.cont_box.clip_detail .book_preview .swiper-slide-active {
  opacity: 1 !important;
}
.cont_box.clip_detail .book_preview .swiper-button-next, .cont_box.clip_detail .book_preview .swiper-button-prev {
  width: 40px;
  height: 40px;
  background-color: #ffffff;
  box-shadow: 0px 0px 12px rgba(19, 34, 39, 0.2);
  border-radius: 50px;
}
.cont_box.clip_detail .book_preview .swiper-button-next:after, .cont_box.clip_detail .book_preview .swiper-button-prev:after {
  display: none;
}
.cont_box.clip_detail .book_preview .swiper-button-next {
  right: 54px;
  background-image: url("../images/chevron-right.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 8px 14px;
}
.cont_box.clip_detail .book_preview .swiper-button-prev {
  left: 54px;
  background-image: url("../images/chevron-left.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 8px 14px;
}
.cont_box.clip_detail .book_preview .swiper-pagination {
  position: relative;
  line-height: 0;
}
.cont_box.clip_detail .book_preview .swiper-pagination-bullet {
  background-color: #C7D0D2;
  opacity: 100;
}
.cont_box.clip_detail .book_preview .swiper-pagination-bullet-active {
  background-color: #132227;
}
.cont_box.select_option .box_tab {
  margin-bottom: 16px;
}
.cont_box.select_option .select_option {
  margin-bottom: 20px;
}
.cont_box.select_option .select_option .subtitle_2 {
  margin-bottom: 12px;
}
.cont_box.select_option .select_option:last-child {
  margin-bottom: 0;
}
.cont_box.select_option .select_option.want .wrap_option {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-right: -8px;
}
.cont_box.select_option .select_option.want .wrap_option .option_box {
  width: calc(16.666% - 8px);
  margin-bottom: 0;
}
.cont_box.select_option .select_option.want .wrap_option .option_box:disabled {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  text-decoration-line: line-through;
}
.cont_box.select_option .bottom_bar .bar_cont .btn_primary {
  width: 448px;
  margin: 0 auto;
}
.cont_box.alarm .page_tit {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  text-align: left;
  margin-bottom: 20px;
}
.cont_box.alarm .page_tit .btn_tertiary {
  margin-left: auto;
}
.cont_box.alarm .page_tit.detail_page {
  display: block;
  margin-bottom: 24px;
}
.cont_box.alarm .page_tit.detail_page .date_txt {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #7D878B;
}
.cont_box.alarm .page_tit.detail_page .heading_1 {
  word-break: break-all;
}
.cont_box.alarm .box_tab {
  margin-bottom: 20px;
}
.cont_box.alarm .list_alarm li {
  padding: 16px;
}
.cont_box.alarm .list_alarm li .link_wrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: norwap;
  gap: 16px;
}
.cont_box.alarm .list_alarm li .alarm_cont {
  overflow: hidden;
}
.cont_box.alarm .list_alarm li .alarm_cont .state {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  margin-bottom: 6px;
  width: 100%;
}
.cont_box.alarm .list_alarm li .alarm_cont .state .circle, .cont_box.alarm .list_alarm li .alarm_cont .state .circle2 {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background-color: #EB4545;
}
.cont_box.alarm .list_alarm li .alarm_cont .state .circle.read, .cont_box.alarm .list_alarm li .alarm_cont .state .circle2.read {
  background-color: #C7D0D2;
}
.cont_box.alarm .list_alarm li .alarm_cont .state .txt {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.cont_box.alarm .list_alarm li .alarm_cont .alarm_tit {
  display: block;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.cont_box.alarm .list_alarm li .alarm_cont .alarm_txt {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.cont_box.alarm .list_alarm li .alarm_cont .alarm_txt.tit {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.cont_box.alarm .list_alarm li .link_go {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #1A84EA;
}
.cont_box.alarm .list_alarm li .link_go:after {
  display: inline-block;
  width: 6px;
  height: 10px;
  margin-left: 8px;
  text-align: center;
  background-image: url("../images/arr-right-blue.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  content: "";
}
.cont_box.alarm .list_alarm li .thumb {
  margin-left: auto;
  min-width: 60px;
}
@media (hover: hover) and (min-width: 1080px) {
  .cont_box.alarm .list_alarm li:hover {
    background-color: #EDF1F1;
  }
}
.cont_box.alarm .list_alarm li:active {
  background-color: #EDF1F1;
}
.cont_box.alarm .list_alarm {
  margin: 0 -16px;
}
.cont_box.alarm .alarm_detail {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.cont_box.privacy .page_tit {
  text-align: left;
  margin-bottom: 24px;
}
.cont_box.privacy .list_privacy > li {
  padding-bottom: 12px;
}
.cont_box.privacy .list_privacy > li:last-child {
  padding-bottom: 0;
}
.cont_box.privacy .list_privacy .tit {
  display: block;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #132227;
}
.cont_box.privacy .list_privacy .txt {
  display: block;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.cont_box.privacy .list_privacy .link_txt {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #1A84EA;
}
.cont_box.privacy .list_privacy .noti_txt {
  padding-top: 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.cont_box.privacy .list_privacy .dot {
  position: relative;
  padding-left: 13px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.cont_box.privacy .list_privacy .dot:before {
  display: block;
  position: absolute;
  top: 6px;
  left: 0;
  width: 5px;
  height: 5px;
  background-color: #4A5457;
  border-radius: 100%;
  content: "";
}
.cont_box.privacy .list_privacy .box_sub {
  display: block;
  margin-bottom: 12px;
}
.cont_box.privacy .list_privacy .box_sub .sub_tit {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #4A5457;
}
.cont_box.privacy .list_privacy .box_sub .sub_txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.cont_box.privacy .list_privacy .box_sub .list_sub {
  margin-left: 5px;
}
.cont_box.privacy .list_privacy .box_sub .list_sub li {
  position: relative;
  padding-left: 13px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.cont_box.privacy .list_privacy .box_sub .list_sub li:before {
  display: block;
  position: absolute;
  top: 8px;
  left: 0;
  width: 5px;
  height: 5px;
  background-color: #4A5457;
  border-radius: 100%;
  content: "";
}
.cont_box.privacy .list_privacy .box_sub .list_num {
  margin-left: 20px;
}
.cont_box.privacy .list_privacy .box_sub .list_num li {
  list-style: auto;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.cont_box.privacy .list_privacy .sub_inner {
  margin-left: -17px;
}
.cont_box.privacy .list_privacy .sub_inner .list_sub li {
  list-style: none;
}
.cont_box.mypage {
  margin-top: -40px;
}
.cont_box.mypage .top_cont {
  padding-top: 20px;
  margin-bottom: 32px;
}
.cont_box.mypage .top_cont .tit_box {
  margin-bottom: 16px;
}
.cont_box.mypage .top_cont .tit_box .tit_txt {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #132227;
}
.cont_box.mypage .top_cont .tit_box .sub_txt {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.cont_box.mypage .top_cont .tit_box .link_txt {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #1A84EA;
}
.cont_box.mypage .top_cont .tit_box .link_txt:after {
  display: block;
  position: absolute;
  top: 50%;
  right: -16px;
  margin-top: -8px;
  width: 16px;
  height: 16px;
  background-image: url("../images/chevron-right-blue.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  content: "";
}
.cont_box.mypage .box_list {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  margin-bottom: 32px;
  padding: 16px 8px;
  border-radius: 8px;
  background-color: #EDF1F1;
}
.cont_box.mypage .box_list .box_item {
  flex: 1;
  position: relative;
}
.cont_box.mypage .box_list .box_item .item_tit {
  display: block;
  margin-bottom: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.cont_box.mypage .box_list .box_item .item_txt {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.cont_box.mypage .box_list .box_item:after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: #B0BBBE;
  content: "";
}
.cont_box.mypage .box_list .box_item:last-child:after {
  display: none;
}
.cont_box.mypage .box_list .box_item.strong .item_tit {
  color: #1A84EA;
}
.cont_box.mypage .box_list .box_item.strong .item_txt {
  color: #1A84EA;
}
.cont_box.mypage .top_banner {
  margin-top: -16px;
}
.cont_box.mypage .top_banner .swiper-wrapper .swiper-slide {
  border-radius: 8px;
}
.cont_box.mypage .top_banner .swiper-pagination {
  position: relative;
  margin-top: 16px;
}
.cont_box.mypage .top_banner .swiper-pagination .swiper-pagination-bullet {
  background-color: #C7D0D2;
}
.cont_box.mypage .top_banner .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #132227;
}
.cont_box.mypage .form_box {
  margin-bottom: 32px;
}
.cont_box.mypage .form_box:last-child {
  margin-bottom: 0;
}
.cont_box.mypage .form_box .form_tit {
  margin-bottom: 8px;
}
.cont_box.mypage .form_box .form_tit .tit_txt {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #132227;
}
.cont_box.mypage .form_box .form_tit .sub_txt {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.cont_box.mypage .form_box .box_info {
  padding: 16px 0;
  border-bottom: 1px solid #DDE4E6;
}
.cont_box.mypage .form_box .box_info:last-child {
  border-bottom: 0 none;
}
.cont_box.mypage .form_box .sub_txt {
  display: block;
  min-width: 80px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #7D878B;
}
.cont_box.mypage .form_box .body_txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}
.cont_box.mypage .form_box .body_txt.gray {
  color: #7D878B;
}
.cont_box.mypage .form_box .caption_txt {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #7D878B;
}
.cont_box.mypage .form_box .caption_txt.blue {
  color: #1A84EA;
}
.cont_box.mypage .form_box .d_flex {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
}
.cont_box.mypage .form_box .d_flex.datepicker {
  gap: 3px;
}
.cont_box.mypage .form_box .d_flex.datepicker input:-moz-read-only {
  color: #132227;
}
.cont_box.mypage .form_box .d_flex.datepicker input:read-only {
  color: #132227;
}
.cont_box.mypage .form_box .d_flex .ml_auto {
  margin-left: auto;
}
.cont_box.mypage .form_box .d_flex .ml_auto.arr {
  display: flex;
  align-items: center;
}
.cont_box.mypage .form_box .d_flex .ml_auto .arr_ico {
  display: block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  background-image: url("../images/chevron-right-gray.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}
.cont_box.mypage .form_box .d_flex .ml_auto .arr_ico.blue {
  background-image: url("../images/chevron-right-blue.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}
.cont_box.mypage .form_box .d_flex button, .cont_box.mypage .form_box .d_flex a {
  white-space: nowrap;
}
.cont_box.mypage .form_box .d_flex .d_flex {
  flex: 1 1 auto;
}
.cont_box.mypage .form_box.contour {
  padding-bottom: 32px;
  border-bottom: 1px solid #DDE4E6;
}
.cont_box.mypage .out_box {
  margin-bottom: -80px;
}
.cont_box.mypage .out_box .link_box {
  padding: 16px 0;
}
.cont_box.mypage .out_box .link_txt {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.cont_box.mypage .noti_txt {
  padding: 16px 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #1A84EA;
}
.cont_box.mypage .my_lecture {
  background-color: #ffffff;
  padding: 0;
}
.cont_box.mypage .inner_input {
  margin-top: 16px;
}
.cont_box.mypage .inner_input .inner {
  margin-bottom: 24px;
}
.cont_box.mypage .inner_input .inner:last-child {
  margin-bottom: 0;
}
.cont_box.mypage .foot_btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.cont_box.mypage .box_tab {
  margin-bottom: 32px;
}
.cont_box.mypage .payment_history {
  margin-bottom: 16px;
  padding: 16px;
  background-color: #ffffff;
  border-radius: 12px;
}
.cont_box.mypage .payment_history:last-child {
  margin-bottom: 0;
}
.cont_box.mypage .payment_history .wrap_state {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.cont_box.mypage .payment_history .wrap_state .date_txt {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #7D878B;
}
.cont_box.mypage .payment_history .payment_tit {
  margin-top: 16px;
}
.cont_box.mypage .payment_history .payment_tit .tit_txt {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #132227;
}
.cont_box.mypage .payment_history .payment_tit .sub_txt {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.cont_box.mypage .payment_history .history_cont .inner {
  margin-top: 16px;
  border-top: 1px solid #DDE4E6;
}
.cont_box.mypage .payment_history .history_cont .inner .box_txt {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 0px;
  margin-top: 16px;
}
.cont_box.mypage .payment_history .history_cont .inner .box_txt .label_txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
  min-width: 96px;
}
.cont_box.mypage .payment_history .history_cont .inner .box_txt .cont_txt {
  flex: 1;
  margin-left: auto;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
  text-align: right;
}
.cont_box.mypage .payment_history .history_cont .inner .box_txt.strong .label_txt {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #1A84EA;
}
.cont_box.mypage .payment_history .history_cont .inner .box_txt.strong .cont_txt {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #1A84EA;
}
.cont_box.mypage .payment_history .list_noti {
  padding-left: 16px;
  margin-top: 16px;
}
.cont_box.mypage .payment_history .list_noti li {
  list-style: disc;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.cont_box.mypage .payment_history .bottom_btn {
  margin-top: 16px;
  cursor: not-allowed;
}
.cont_box.mypage .payment_history .bottom_btn .btn_tertiary {
  width: 100%;
  cursor: pointer;
}
.cont_box.mypage .payment_history .bottom_btn .btn_tertiary.disabled {
  pointer-events: none;
}
.cont_box.mypage .more_btn {
  margin-top: 32px;
  text-align: center;
}
.cont_box.mypage .more_btn .btn_tertiary {
  background: none;
}
.cont_box.mypage .page_tit {
  display: block;
  margin-bottom: 32px;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #132227;
  text-align: center;
}
.cont_box.mypage .coupon_input {
  margin-bottom: 32px;
}
.cont_box.mypage .coupon_input .flex_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: end;
  flex-wrap: wrap;
  gap: 8px;
}
.cont_box.mypage .coupon_input .flex_box .box_input {
  flex: 1;
}
.cont_box.mypage .coupon_input .msg_txt {
  margin-top: 4px;
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.cont_box.mypage .coupon_input .msg_txt.error {
  color: #EB4545;
}
.cont_box.mypage .coupon_input .msg_txt.success {
  color: #1A84EA;
}
.cont_box.mypage .coupon_box {
  padding: 16px;
  background-color: #fff;
  border-radius: 12px;
  margin-bottom: 16px;
}
.cont_box.mypage .coupon_box:last-child {
  margin-bottom: 0;
}
.cont_box.mypage .coupon_box .tit_txt {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.cont_box.mypage .coupon_box .coupon_name {
  display: block;
  margin-top: 8px;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #1A84EA;
}
.cont_box.mypage .coupon_box .list_condition {
  margin-top: 8px;
  padding-left: 16px;
}
.cont_box.mypage .coupon_box .list_condition li {
  list-style: disc;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.cont_box.mypage .box_essential {
  margin-top: 32px;
}
.cont_box.mypage .box_essential .tit_txt {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.cont_box.mypage .box_essential .sub_tit {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #4A5457;
}
.cont_box.mypage .box_essential .list_txt {
  padding-left: 16px;
}
.cont_box.mypage .box_essential .list_txt li {
  list-style: disc;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.cont_box.mypage .list_reserves li {
  padding: 16px 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 1px solid #DDE4E6;
}
.cont_box.mypage .list_reserves li:last-child {
  border-bottom: 0 none;
}
.cont_box.mypage .list_reserves li .ico_area {
  width: 24px;
  height: 24px;
}
.cont_box.mypage .list_reserves li .cont_box .state_txt {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.cont_box.mypage .list_reserves li .cont_box .info_txt {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #4A5457;
}
.cont_box.mypage .list_reserves li .cont_box .date_txt {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.cont_box.mypage .list_reserves li .cont_box.add .state_txt {
  color: #1A84EA;
}
.cont_box.mypage .list_reserves li .cont_box.use .state_txt {
  color: #EB4545;
}
.cont_box.mypage .list_reserves li .cont_box.cancel .state_txt {
  color: #132227;
}
.cont_box.my_point {
  margin-top: 0;
}
.cont_box.my_point .box_list .box_item .item_tit {
  margin-bottom: 0;
  margin-top: 8px;
}
.cont_box.coupon, .cont_box.my_point {
  margin-top: 0;
}
.cont_box.invite {
  margin-top: 0;
}
.cont_box.invite .top_event {
  padding: 60px 0;
  background-color: #132227;
}
.cont_box.invite .top_event .inner {
  padding: 0 16px;
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}
.cont_box.invite .top_event .tit_box .sub_txt {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #DDE4E6;
}
.cont_box.invite .top_event .tit_box .tit_txt {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #ffffff;
}
.cont_box.invite .top_event .box_img {
  margin-top: 32px;
  height: 210px;
}
.cont_box.invite .top_event .box_img img {
  max-height: 100%;
}
.cont_box.invite .top_event .price_guide {
  margin-top: 32px;
}
.cont_box.invite .top_event .price_guide .txt {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #DDE4E6;
}
.cont_box.invite .top_event .price_guide .txt:last-child {
  margin-bottom: 0;
}
.cont_box.invite .top_event .price_guide .price {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #ffffff;
}
.cont_box.invite .top_event .invite_code {
  margin-top: 32px;
  padding: 16px;
  background-color: #EDF1F1;
  border-radius: 8px;
  text-align: center;
}
.cont_box.invite .top_event .invite_code .sub_txt {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.cont_box.invite .top_event .invite_code .code_txt {
  display: block;
  margin-bottom: 4px;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #1A84EA;
}
.cont_box.invite .top_event .invite_code .btn_copy {
  display: inline-block;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #7D878B;
}
.cont_box.invite .top_event .invite_code .btn_copy:before {
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("../images/file-check-gray.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  content: "";
}
.cont_box.invite .top_event .invite_code .btn_share {
  width: 100%;
}
.cont_box.invite .body_event {
  background-color: #EDF1F1;
}
.cont_box.invite .body_event .inner {
  padding: 60px 16px;
  max-width: 480px;
  margin: 0 auto;
}
.cont_box.invite .event_box {
  padding-bottom: 52px;
  margin-bottom: 52px;
  border-bottom: 1px solid #DDE4E6;
  text-align: center;
}
.cont_box.invite .event_box .tit_txt {
  display: block;
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #132227;
}
.cont_box.invite .event_box .coupon_area .sub_txt {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.cont_box.invite .event_box .coupon_area .coupon_box {
  display: inline-block;
  min-width: 280px;
  min-height: 128px;
  padding: 18px 20px;
  background-image: url("../images/coupon-bg-light.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  background-color: transparent;
}
.cont_box.invite .event_box .coupon_area .coupon_box.discount {
  background-image: url("../images/coupon-bg-dark.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}
.cont_box.invite .event_box .coupon_area .coupon_box .tit {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #E2F2FF;
}
.cont_box.invite .event_box .coupon_area .coupon_box .price {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #ffffff;
}
.cont_box.invite .event_box .coupon_area .coupon_box .guide {
  display: block;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid #BADDFD;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #BADDFD;
}
.cont_box.invite .event_box .ico_plus {
  width: 28px;
  height: 28px;
  margin: 24px auto;
}
.cont_box.invite .event_box2 {
  margin-bottom: 52px;
}
.cont_box.invite .event_box2 .event_tit {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.cont_box.invite .event_box2 .wrap_state {
  padding: 0 12px;
  border-radius: 8px;
  background-color: #ffffff;
}
.cont_box.invite .event_box2 .wrap_state .current_state {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #DDE4E6;
}
.cont_box.invite .event_box2 .wrap_state .current_state:last-child {
  border-bottom: 0 none;
}
.cont_box.invite .event_box2 .wrap_state .current_state .tit {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.cont_box.invite .event_box2 .wrap_state .current_state .num {
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #1A84EA;
}

.my_coupon {
  background-color: #EDF1F1;
  max-width: none;
}
.my_coupon .cont_box {
  width: 100%;
  max-width: 720px;
  min-width: 280px;
  padding: 0 16px;
  margin-left: auto;
  margin-right: auto;
}

.wrap_error {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.wrap_error .top_logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 24px 0;
  text-align: center;
}
.wrap_error .top_logo .link_home {
  display: inline-block;
  width: 100px;
}
.wrap_error .error_box {
  text-align: center;
  padding: 60px 0;
}
.wrap_error .error_box .tit {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  display: block;
  margin-top: 20px;
  margin-bottom: 4px;
}
.wrap_error .error_box .txt {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.wrap_error .error_box .foot_box {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.wrap_error .error_box .foot_box .noti_txt {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #1A84EA;
}

.program_detail {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}
.program_detail .head_cont {
  width: 100%;
  max-width: 720px;
  padding: 0 16px;
  margin: 0 auto 60px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: initial;
  gap: 40px;
}
.program_detail .head_cont .program_img {
  position: relative;
  max-width: 292px;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #DDE4E6;
}
.program_detail .head_cont .program_info .tag_box {
  overflow: hidden;
  margin-bottom: 8px;
}
.program_detail .head_cont .program_info .tag_box span {
  float: left;
  margin-right: 8px;
}
.program_detail .head_cont .program_info .title_box .sub_txt {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #4A5457;
}
.program_detail .head_cont .program_info .title_box .tit_txt {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #132227;
  margin-bottom: 8px;
}
.program_detail .head_cont .program_info .title_box .desc_txt {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.program_detail .head_cont .program_info .title_box .inner_tag {
  overflow: hidden;
  margin-bottom: 24px;
}
.program_detail .head_cont .program_info .title_box .inner_tag span {
  float: left;
  margin-right: 8px;
}
.program_detail .head_cont .program_info .display_amount {
  display: block;
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #132227;
}
.program_detail .head_cont .program_info .list_program {
  margin-bottom: 24px;
}
.program_detail .head_cont .program_info .list_program li {
  position: relative;
  overflow: hidden;
  margin-bottom: 8px;
}
.program_detail .head_cont .program_info .list_program li:last-child {
  margin-bottom: 0;
}
.program_detail .head_cont .program_info .list_program .icon {
  width: 18px;
  height: 18px;
  position: absolute;
  top: 3px;
  right: auto;
  bottom: auto;
  left: 0px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
}
.program_detail .head_cont .program_info .list_program .info_tit {
  display: block;
  float: left;
  width: 82px;
  margin-right: 8px;
  text-indent: 22px;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.program_detail .head_cont .program_info .list_program .info_txt {
  display: block;
  float: left;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.program_detail .head_cont .btn_application a {
  display: inline-block;
}
.program_detail .head_cont.clip .program_img {
  max-width: 280px;
}
.program_detail .head_cont.clip .program_info {
  max-width: 368px;
}
.program_detail .head_cont.book .program_img {
  max-width: 200px;
}
.program_detail .head_cont.book .program_info {
  max-width: 448px;
}
.program_detail .body_cont {
  border-top: 3px solid #DDE4E6;
}
.program_detail .body_cont .wrap_img {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 16px;
}
.program_detail .body_cont .wrap_img img {
  display: block;
  margin: 0 auto;
}
.program_detail .foot_cont {
  width: 100%;
  max-width: 720px;
  padding: 60px 16px 0;
  margin: 0 auto;
  overflow: hidden;
}
.program_detail .foot_cont .notice_box {
  padding: 16px;
  background-color: #EDF1F1;
  border-radius: 12px;
}
.program_detail .foot_cont .notice_box .tit {
  display: block;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #132227;
}
.program_detail .foot_cont .notice_box .txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.program_detail .bottom_bar .btn_primary {
  width: 448px;
  margin: 0 auto;
}

.free_class {
  width: 100%;
  padding: 80px 0 100px 0;
  max-width: none;
}
.free_class .top_cont {
  padding: 60px 0;
  text-align: center;
  background-image: url("../images/free-intro-mv.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.free_class .top_cont .tit_txt {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  margin-bottom: 20px;
  color: #ffffff;
}
.free_class .top_cont .sub_txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 20px;
  color: #ffffff;
}

.accordion_box {
  margin-bottom: 40px;
}
.accordion_box .btn_acco {
  position: relative;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  background-color: #EDF1F1;
  border-radius: 8px;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.accordion_box .btn_acco .ico_arr {
  display: block;
  position: absolute;
  top: 16px;
  right: 16px;
  bottom: auto;
  left: auto;
  width: 24px;
  height: 24px;
  background-image: url("../images/dropdown-down.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 14px 8px;
}
.accordion_box .btn_acco.on .ico_arr {
  background-image: url("../images/dropdown-up.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 14px 8px;
}
.accordion_box .accordion_cont {
  display: none;
}
.accordion_box .accordion_cont.comm_info {
  margin-top: -16px;
  border-radius: 0 0 12px 12px;
}

.comm_info {
  width: 100%;
  background-color: #EDF1F1;
  border-radius: 12px;
  padding: 16px;
}
.comm_info .date_txt {
  display: block;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #7D878B;
}
.comm_info .tit_txt {
  display: block;
  color: #132227;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  margin-bottom: 16px;
}
.comm_info .list_info li {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: normal;
  flex-wrap: inherit;
  gap: 0px;
  margin-bottom: 16px;
}
.comm_info .list_info li:last-child {
  margin-bottom: 0;
}
.comm_info .list_info li .title {
  width: 96px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.comm_info .list_info li .info {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
  margin-left: auto;
  text-align: right;
}
.comm_info .list_info li .point {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #1A84EA;
}
.comm_info .list_info li .list_ticket .txt {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.comm_info .result_box {
  overflow: hidden;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #DDE4E6;
}
.comm_info .notice_txt {
  margin-top: 16px;
}
.comm_info .notice_txt p {
  position: relative;
  padding-left: 8px;
  color: #7D878B;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}
.comm_info .notice_txt p:before {
  display: block;
  width: 2px;
  height: 2px;
  position: absolute;
  top: 6px;
  right: auto;
  bottom: auto;
  left: 0;
  background-color: #7D878B;
  border-radius: 100%;
  content: "";
}

.layer_modal.clipSeries .body_cont, .layer_modal.bookSeries .body_cont, .layer_modal.anotherClass .body_cont, .layer_modal.courseChange .body_cont {
  max-height: 436px !important;
}
.layer_modal.clipSeries .box_tab, .layer_modal.bookSeries .box_tab, .layer_modal.anotherClass .box_tab, .layer_modal.courseChange .box_tab {
  margin-bottom: 0;
}
.layer_modal.clipSeries .tab_cont, .layer_modal.bookSeries .tab_cont, .layer_modal.anotherClass .tab_cont, .layer_modal.courseChange .tab_cont {
  margin: 0 -16px;
}
.layer_modal.clipSeries .list_tab, .layer_modal.bookSeries .list_tab, .layer_modal.anotherClass .list_tab, .layer_modal.courseChange .list_tab {
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.layer_modal.clipSeries .list_dropdown, .layer_modal.bookSeries .list_dropdown, .layer_modal.anotherClass .list_dropdown, .layer_modal.courseChange .list_dropdown {
  display: none;
  width: 100%;
  max-height: 240px;
  overflow-y: auto;
  position: absolute;
  top: 52px;
  right: auto;
  bottom: auto;
  left: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  background: #ffffff;
  box-shadow: 0px 0px 12px rgba(19, 34, 39, 0.2);
  border-radius: 8px;
  display: block;
  position: relative;
  top: 0;
  left: 0;
  max-height: inherit;
  border-radius: 0;
  box-shadow: none;
}
.layer_modal.clipSeries .list_dropdown .btn_option, .layer_modal.bookSeries .list_dropdown .btn_option, .layer_modal.anotherClass .list_dropdown .btn_option, .layer_modal.courseChange .list_dropdown .btn_option {
  display: flex;
  gap: 8px;
  padding: 12px;
  position: relative;
  width: 100%;
  height: 48px;
  text-align: left;
  background-color: #ffffff;
  padding: 16px;
  height: auto;
}
.layer_modal.clipSeries .list_dropdown .btn_option .txt, .layer_modal.bookSeries .list_dropdown .btn_option .txt, .layer_modal.anotherClass .list_dropdown .btn_option .txt, .layer_modal.courseChange .list_dropdown .btn_option .txt {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.layer_modal.clipSeries .list_dropdown .btn_option.select, .layer_modal.bookSeries .list_dropdown .btn_option.select, .layer_modal.anotherClass .list_dropdown .btn_option.select, .layer_modal.courseChange .list_dropdown .btn_option.select {
  color: #1A84EA;
  font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
  .layer_modal.clipSeries .list_dropdown .btn_option:hover, .layer_modal.bookSeries .list_dropdown .btn_option:hover, .layer_modal.anotherClass .list_dropdown .btn_option:hover, .layer_modal.courseChange .list_dropdown .btn_option:hover {
    background-color: #EDF1F1;
  }
}
.layer_modal.clipSeries .list_dropdown .btn_option.tag .tag_label, .layer_modal.bookSeries .list_dropdown .btn_option.tag .tag_label, .layer_modal.anotherClass .list_dropdown .btn_option.tag .tag_label, .layer_modal.courseChange .list_dropdown .btn_option.tag .tag_label {
  flex-shrink: 0;
}
.layer_modal.clipSeries .list_dropdown .btn_option.select, .layer_modal.bookSeries .list_dropdown .btn_option.select, .layer_modal.anotherClass .list_dropdown .btn_option.select, .layer_modal.courseChange .list_dropdown .btn_option.select {
  padding-right: 40px;
  background-image: url("../images/check-blue3.svg");
  background-repeat: no-repeat;
  background-position: 97% 50%;
  background-size: 18px 14px;
}
.layer_modal.clipSeries .list_dropdown .btn_option:disabled, .layer_modal.bookSeries .list_dropdown .btn_option:disabled, .layer_modal.anotherClass .list_dropdown .btn_option:disabled, .layer_modal.courseChange .list_dropdown .btn_option:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.layer_modal.clipSeries .list_dropdown .btn_option:disabled:hover, .layer_modal.bookSeries .list_dropdown .btn_option:disabled:hover, .layer_modal.anotherClass .list_dropdown .btn_option:disabled:hover, .layer_modal.courseChange .list_dropdown .btn_option:disabled:hover {
  background-color: #fff;
}
.layer_modal.anotherClass .body_cont {
  padding: 0;
  overflow: hidden;
  height: auto !important;
}
.layer_modal.anotherClass .list_dropdown .btn_option {
  display: block;
}
.layer_modal.anotherClass .list_dropdown .btn_option.select .subject_tit {
  color: #1A84EA;
}
.layer_modal.anotherClass .list_dropdown .subject_tit {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.layer_modal.anotherClass .list_dropdown .date_txt {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.layer_modal.anotherClass .list_dropdown .noti_txt {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.layer_modal.selectDate .layer_cont {
  width: 360px;
}
.layer_modal.selectDate .body_cont {
  padding: 0;
}
.layer_modal.selectDate .body_cont .ui-datepicker-prev.ui-state-disabled {
  display: none;
}
.layer_modal.selectDate .body_cont .ui-datepicker-next.ui-state-disabled {
  display: none;
}
.layer_modal.selectDate .foot_cont button {
  width: 100%;
}
.layer_modal.selectDate .foot_cont button .date_txt {
  display: inline-block;
  overflow: hidden;
}
.layer_modal.selectDate .foot_cont button .date_txt span {
  float: left;
}
.layer_modal.login .btn_primary {
  margin-top: 24px;
  width: 100%;
}
.layer_modal.login .find_info {
  margin-top: 32px;
}
.layer_modal.grade .body_cont {
  height: 200px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
}
.layer_modal.grade .list_star {
  overflow: hidden;
}
.layer_modal.grade .list_star li {
  float: left;
}
.layer_modal.grade .list_star li .btn_star {
  width: 46px;
  height: 46px;
  font-size: 0;
  background-image: url("../images/star.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 40px auto;
}
.layer_modal.grade .list_star li.on .btn_star {
  background-image: url("../images/star-on.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 40px auto;
}
.layer_modal.grade .grade_txt {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  color: #132227;
}
.layer_modal.grade .foot_cont .notice_txt {
  width: 100%;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
  text-align: center;
}
.layer_modal.grade .foot_cont button {
  width: 100%;
  margin-left: 0;
}
.layer_modal.changeDate, .layer_modal.reinforceClass {
  overflow: hidden;
}
.layer_modal.changeDate .layer_cont, .layer_modal.reinforceClass .layer_cont {
  width: 600px;
}
.layer_modal.changeDate .cancel_box, .layer_modal.reinforceClass .cancel_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
  margin: -16px -16px 16px -16px;
  padding: 16px;
  background-color: #EDF1F1;
  border-bottom: 1px solid #DDE4E6;
}
.layer_modal.changeDate .cancel_box .txt, .layer_modal.reinforceClass .cancel_box .txt {
  text-align: left;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}
.layer_modal.changeDate .cancel_box .btn_tertiary, .layer_modal.reinforceClass .cancel_box .btn_tertiary {
  white-space: nowrap;
  margin-left: auto;
  background: none;
}
.layer_modal.changeDate .select_teacher, .layer_modal.reinforceClass .select_teacher {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}
.layer_modal.changeDate .select_teacher .label_txt, .layer_modal.reinforceClass .select_teacher .label_txt {
  white-space: nowrap;
}
.layer_modal.changeDate .inner_cont, .layer_modal.reinforceClass .inner_cont {
  margin-bottom: 24px;
}
.layer_modal.changeDate .inner_cont:last-child, .layer_modal.reinforceClass .inner_cont:last-child {
  margin-bottom: 0;
}
.layer_modal.changeDate .inner_cont .tit_box, .layer_modal.reinforceClass .inner_cont .tit_box {
  margin-bottom: 16px;
}
.layer_modal.changeDate .inner_cont .tit_box .tit, .layer_modal.reinforceClass .inner_cont .tit_box .tit {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.layer_modal.changeDate .inner_cont .tit_box .sub, .layer_modal.reinforceClass .inner_cont .tit_box .sub {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.layer_modal.changeDate .box_calendar, .layer_modal.reinforceClass .box_calendar {
  max-width: 328px;
  margin: 0 auto;
}
.layer_modal.changeDate .box_calendar .ui-widget.ui-widget-content, .layer_modal.reinforceClass .box_calendar .ui-widget.ui-widget-content {
  box-shadow: 0px 0px 3px rgba(19, 34, 39, 0.3);
  border-radius: 12px;
}
.layer_modal.changeDate .box_calendar .ui-datepicker-next, .layer_modal.reinforceClass .box_calendar .ui-datepicker-next {
  display: none;
}
.layer_modal.changeDate .box_calendar .ui-datepicker-prev, .layer_modal.reinforceClass .box_calendar .ui-datepicker-prev {
  display: none;
}
.layer_modal.changeDate .wrap_option, .layer_modal.reinforceClass .wrap_option {
  overflow: hidden;
  margin-top: -8px;
}
.layer_modal.changeDate .wrap_option button, .layer_modal.reinforceClass .wrap_option button {
  float: left;
  width: calc(16.666% - 8px);
  height: 56px;
  margin-right: 8px;
  margin-top: 8px;
  margin-bottom: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.layer_modal.changeDate .wrap_option button:nth-child(6n), .layer_modal.reinforceClass .wrap_option button:nth-child(6n) {
  margin-right: 0;
}
.layer_modal.changeDate .wrap_option button:disabled, .layer_modal.reinforceClass .wrap_option button:disabled {
  text-decoration-line: line-through;
}
.layer_modal.changeDate .foot_cont .btn_primary, .layer_modal.reinforceClass .foot_cont .btn_primary {
  width: 100%;
}
.layer_modal.changeDate .foot_cont .noti_txt, .layer_modal.reinforceClass .foot_cont .noti_txt {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.layer_modal.history .body_cont {
  padding-top: 24px;
  padding-bottom: 24px;
}
.layer_modal.history .history_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 20px;
  margin-bottom: 16px;
}
.layer_modal.history .history_box .box_thumb {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  border-radius: 4px;
  overflow: hidden;
  max-width: 89px;
  height: 89px;
}
.layer_modal.history .history_box .box_thumb.length {
  width: 63px;
  height: 90px;
}
.layer_modal.history .history_box .box_thumb img {
  max-height: 100%;
  border: 1px solid #DDE4E6;
}
.layer_modal.history .history_box .info_box {
  flex: 1;
}
.layer_modal.history .history_box .info_box .tag {
  display: inline-block;
  margin-bottom: 4px;
}
.layer_modal.history .history_box .info_box .tit_txt {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.layer_modal.history .history_box .info_box .info_txt {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.layer_modal.history .history_box .info_box .date_txt {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.layer_modal.history .list_history li {
  padding: 16px 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  border-bottom: 1px solid #DDE4E6;
}
.layer_modal.history .list_history li:last-child {
  border-bottom: 0 none;
}
.layer_modal.history .list_history li .unit_txt {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.layer_modal.history .list_history li .course_name {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}
.layer_modal.history .list_history li .sub_tit {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.layer_modal.history .list_history li .learning_state {
  min-width: 84px;
  margin-left: auto;
  text-align: center;
  white-space: nowrap;
}
.layer_modal.history .list_history li .learning_state .date_txt {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.layer_modal.history .wrap_paging {
  margin-top: 16px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.layer_modal.history .wrap_paging .btn_paging {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid #DDE4E6;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.layer_modal.history .wrap_paging .btn_paging.active {
  background-color: #DDE4E6;
  color: #132227;
}
.layer_modal.nameChange .foot_cont .btn_primary {
  width: 100%;
}
.layer_modal.numberChange .body_cont {
  max-height: 468px;
}
.layer_modal.numberChange .box_input {
  margin-bottom: 16px;
}
.layer_modal.numberChange .box_input:last-child {
  margin-bottom: 0;
}
.layer_modal.numberChange .state_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}
.layer_modal.numberChange .state_box.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.layer_modal.numberChange .state_box.disabled input {
  pointer-events: none;
}
.layer_modal.numberChange .state_box.disabled button, .layer_modal.numberChange .state_box.disabled a {
  pointer-events: none;
}
.layer_modal.numberChange .state_box .btn_secondary {
  margin-left: auto;
  white-space: nowrap;
}
.layer_modal.numberChange .foot_cont .btn_primary {
  width: 100%;
}
.layer_modal.numberChange .txt_primary {
  color: #1A84EA;
}
.layer_modal.courseChange .body_cont {
  height: 380px !important;
}
.layer_modal.courseChange .wrap_option {
  margin-bottom: 24px;
}
.layer_modal.courseChange .box_tab.series {
  margin-bottom: 16px;
}
.layer_modal.courseChange .box_tab.series .tab_tit {
  display: block;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.layer_modal.courseChange .box_tab.series .list_tab {
  position: relative;
  width: 100%;
}
.layer_modal.courseChange .box_tab.series .list_tab li {
  width: 50%;
}
.layer_modal.courseChange .box_tab.series .list_tab li button {
  width: 100%;
}
.layer_modal.courseChange .box_tab.series .list_tab:after {
  display: block;
  position: absolute;
  bottom: 0;
  left: -16px;
  width: 130%;
  height: 1px;
  background-color: #DDE4E6;
  content: "";
}
.layer_modal.courseChange .box_tab.sub {
  margin-bottom: 16px;
}
.layer_modal.courseChange .foot_cont .btn_primary {
  width: 100%;
}
.layer_modal.account_guide .login_join, .layer_modal.account_choose .login_join {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.layer_modal.account_guide .guide_txt, .layer_modal.account_choose .guide_txt {
  width: 100%;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}
.layer_modal.account_guide .find_account, .layer_modal.account_choose .find_account {
  width: 100%;
  margin-bottom: 0;
}
.layer_modal.account_guide .wrap_choose .comm_chk, .layer_modal.account_choose .wrap_choose .comm_chk {
  width: 100%;
  margin-bottom: 16px;
}
.layer_modal.account_guide .wrap_choose .comm_chk:last-child, .layer_modal.account_choose .wrap_choose .comm_chk:last-child {
  margin-bottom: 0;
}
.layer_modal.account_guide .foot_cont, .layer_modal.account_choose .foot_cont {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.layer_modal.account_guide .foot_cont button, .layer_modal.account_guide .foot_cont a, .layer_modal.account_choose .foot_cont button, .layer_modal.account_choose .foot_cont a {
  flex: 1;
}
.layer_modal.phoneChange .foot_cont a, .layer_modal.phoneChange .foot_cont button {
  flex: 1 1 auto;
}
.layer_modal.previewFile .pdf_page {
  width: 100%;
  min-height: 574px;
  padding: 30px;
  border: 1px solid #DDE4E6;
  margin-bottom: 16px;
}
.layer_modal.previewFile .pdf_page:last-child {
  margin-bottom: 0;
}
.layer_modal.previewFile .pdf_page .heading_tit {
  margin-bottom: 15px;
  text-align: left;
}
.layer_modal.previewFile .pdf_page .bottom_cont {
  padding-top: 8px;
}
.layer_modal.previewFile .pdf_page .bottom_cont .noti_txt {
  margin-top: 15px;
}
.layer_modal.previewFile .pdf_page .bottom_cont .proof_txt {
  margin-bottom: 15px;
}
.layer_modal.previewFile .pdf_page .mission_result {
  margin-bottom: 15px;
}
.layer_modal.previewFile .pdf_page .comm_tbl {
  margin-bottom: 15px;
}
.layer_modal.previewFile .pdf_page .comm_tbl tr th {
  padding: 6px;
}
.layer_modal.previewFile .pdf_page .comm_tbl tr th:nth-child(1) {
  min-width: 99px;
}
.layer_modal.previewFile .pdf_page .comm_tbl tr td {
  padding: 6px;
}
.layer_modal.previewFile .pdf_page .comm_tbl.mission th:nth-child(1) {
  min-width: auto;
  width: 13%;
}
.layer_modal.previewFile .pdf_page .comm_tbl.mission th:nth-child(2) {
  width: 30%;
}
.layer_modal.previewFile .pdf_page .comm_tbl.mission th:nth-child(3) {
  width: 45%;
}
.layer_modal.previewFile .pdf_page .comm_tbl.mission th:nth-child(4) {
  width: 12%;
}

.comming_soon {
  padding: 60px 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  text-align: center;
}
.comming_soon .tit {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #4A5457;
}
.comming_soon .sub {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.comming_soon .txt_box.line1 .tit {
  color: #7D878B;
}
.comming_soon a, .comming_soon button {
  margin-top: 8px;
}

.learning_viewer {
  display: block;
  visibility: hidden;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #EDF1F1;
}
.learning_viewer.active {
  visibility: visible;
}
.learning_viewer .head_cont {
  position: fixed;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  width: 100%;
  padding: 24px 0;
  border-bottom: 1px solid #DDE4E6;
  text-align: center;
  background-color: #ffffff;
  z-index: 10;
}
.learning_viewer .head_cont .wrap_head {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 56px;
}
.learning_viewer .head_cont .txt_box {
  width: 100%;
}
.learning_viewer .head_cont .tit_txt {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}
.learning_viewer .head_cont .tit_txt .tit {
  display: block;
  color: #132227;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.learning_viewer .head_cont .tit_txt .num_txt {
  color: #7D878B;
  white-space: nowrap;
}
.learning_viewer .head_cont .date_txt {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.learning_viewer .head_cont .btn_close {
  width: 24px;
  height: 24px;
  font-size: 0;
  position: absolute;
  top: 0px;
  right: 16px;
  bottom: auto;
  left: auto;
  background-image: url("../images/close.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 14px 14px;
}
.learning_viewer .body_cont {
  width: 100%;
}
.learning_viewer .wrap_tab {
  margin-top: 105px;
}
.learning_viewer .box_tab {
  background-color: #ffffff;
  border-bottom: 1px solid #DDE4E6;
  text-align: center;
}
.learning_viewer .box_tab .list_tab {
  gap: 0;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.learning_viewer .box_tab .list_tab li {
  flex: 1 1;
}
.learning_viewer .box_tab .list_tab li button {
  width: 100%;
}
.learning_viewer .box_tab.item2 .list_tab li {
  width: 50%;
}
.learning_viewer .tab_cont {
  width: 100%;
}
.learning_viewer .inner_cont {
  max-width: 720px;
  margin: 0 auto;
  padding: 52px 16px;
}
.learning_viewer .go_box {
  margin-bottom: 40px;
  padding: 20px;
  background-color: #1A84EA;
  border-radius: 12px;
}
.learning_viewer .go_box .desc_txt {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #ffffff;
}
.learning_viewer .go_box .lnk_detail {
  display: inline-block;
  padding-right: 20px;
  color: #BADDFD;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  background-image: url("../images/arrRightBlue.svg");
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-size: 8px 14px;
}
.learning_viewer .audio_player {
  margin-bottom: 24px;
}
.learning_viewer .audio_player .wrap_audio {
  padding: 0;
}
.learning_viewer .list_unit {
  margin-bottom: 40px;
}
.learning_viewer .list_unit li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 8px 0;
}
.learning_viewer .list_unit li.on a {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  text-decoration: underline;
  color: #132227;
}
.learning_viewer .list_unit li a {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.learning_viewer .inner_box {
  margin-bottom: 40px;
}
.learning_viewer .inner_box .title_box {
  position: relative;
  margin-bottom: 16px;
}
.learning_viewer .inner_box .title_box .tit {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #132227;
}
.learning_viewer .inner_box .title_box .tit .sub {
  display: inline-block;
  margin-left: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #4A5457;
}
.learning_viewer .inner_box .title_box .desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.learning_viewer .inner_box .title_box.flex {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
}
.learning_viewer .inner_box .title_box.flex a, .learning_viewer .inner_box .title_box.flex button {
  white-space: nowrap;
  margin-left: auto;
  background: none;
}
.learning_viewer .inner_box .sub_tit1 {
  display: block;
  margin-bottom: 24px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.learning_viewer .inner_box .sub_tit1 .caption {
  display: inline-block;
  margin-left: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #7D878B;
}
.learning_viewer .inner_box .sub_tit2 {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #7D878B;
}
.learning_viewer .inner_box .dot_txt {
  margin-bottom: 16px;
}
.learning_viewer .inner_box .dot_txt li {
  position: relative;
  padding-left: 28px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
  margin-bottom: 8px;
}
.learning_viewer .inner_box .dot_txt li:last-child {
  margin-bottom: 0;
}
.learning_viewer .inner_box .dot_txt li:before {
  display: block;
  position: absolute;
  top: 10px;
  right: auto;
  bottom: auto;
  left: 10px;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background-color: #7D878B;
  content: "";
}
.learning_viewer .inner_box .dot_txt.mb-0 {
  margin-bottom: 0;
}
.learning_viewer .inner_box .list_audio > li {
  position: relative;
  margin-bottom: 16px;
  padding: 24px;
  border-radius: 12px;
  background-color: #ffffff;
}
.learning_viewer .inner_box .list_audio > li .btn_audio {
  width: 40px;
  height: 24px;
  position: absolute;
  top: 24px;
  right: auto;
  bottom: auto;
  left: 24px;
  background-image: url("../images/volume-fill.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 24px 24px;
}
.learning_viewer .inner_box .list_audio > li .btn_audio.on {
  background-image: url("../images/volume-fill-on.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 24px 24px;
}
.learning_viewer .inner_box .list_audio > li .btn_audio.num {
  width: 36px;
  height: 24px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  background-color: #EDF1F1;
  color: #7D878B;
  line-height: 24px;
  text-align: center;
  background-image: none;
}
.learning_viewer .inner_box .list_audio > li .txt_box {
  padding-left: 48px;
}
.learning_viewer .inner_box .list_audio > li .txt_box .word_txt {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.learning_viewer .inner_box .list_audio > li .txt_box .word_txt.point {
  color: #1A84EA;
}
.learning_viewer .inner_box .list_audio > li .txt_box .word_txt.arrow {
  margin-top: 4px;
  padding-left: 20px;
  background-image: url("../images/blue-right.svg");
  background-repeat: no-repeat;
  background-position: 0 7px;
  background-size: 16px auto;
}
.learning_viewer .inner_box .list_audio > li .txt_box .speak_txt {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.learning_viewer .inner_box .list_audio > li .txt_box .desc_txt {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}
.learning_viewer .inner_box .list_audio > li .txt_box .people_txt {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.learning_viewer .inner_box .list_audio > li:last-child {
  margin-bottom: 0;
}
.learning_viewer .inner_box .list_audio > li .explanation_box {
  margin-top: 8px;
  padding: 16px;
  border: 1px solid #DDE4E6;
  border-radius: 12px;
}
.learning_viewer .inner_box .list_audio > li .explanation_box .txt {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
  margin-bottom: 8px;
}
.learning_viewer .inner_box .list_audio > li .explanation_box .txt:last-child {
  margin-bottom: 0;
}
.learning_viewer .inner_box .list_audio.no-pd > li {
  padding: 0;
  border-radius: 0;
  margin-bottom: 20px;
}
.learning_viewer .inner_box .list_audio.no-pd > li .btn_audio {
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
}
.learning_viewer .inner_box .list_audio.no-pd > li:last-child {
  margin-bottom: 0;
}
.learning_viewer .inner_box .box_grade {
  padding: 16px;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  border-radius: 12px;
}
.learning_viewer .inner_box .box_grade .txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}
.learning_viewer .inner_box .box_grade button {
  margin-left: auto;
}
.learning_viewer .inner_box .round_box {
  padding: 24px;
  border-radius: 12px;
  background-color: #ffffff;
}
.learning_viewer .inner_box .round_box .tit_txt {
  display: block;
  margin-bottom: 24px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.learning_viewer .inner_box .round_box.today {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 40px;
}
.learning_viewer .inner_box .round_box.today .thumb {
  max-width: 280px;
}
.learning_viewer .inner_box .round_box.today .thumb img {
  height: 100%;
  max-width: none;
}
.learning_viewer .inner_box .round_box.today .right_cont .tit {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.learning_viewer .inner_box .round_box.today .right_cont .info_txt {
  overflow: hidden;
  margin-bottom: 24px;
}
.learning_viewer .inner_box .round_box.today .right_cont .info_txt .txt {
  float: left;
  margin-right: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #7D878B;
}
.learning_viewer .inner_box .round_box.today .right_cont .info_txt .txt:last-child {
  margin-right: 0;
}
.learning_viewer .inner_box .round_box.letter {
  margin-bottom: 16px;
}
.learning_viewer .inner_box .round_box.letter .letter_txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.learning_viewer .inner_box .round_box.letter .dot_txt li {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
  margin-bottom: 4px;
}
.learning_viewer .inner_box .round_box.letter .dot_txt li:before {
  background-color: #4A5457;
}
.learning_viewer .inner_box .level_txt {
  margin-bottom: 24px;
  text-align: center;
}
.learning_viewer .inner_box .level_txt .tit {
  display: block;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #132227;
}
.learning_viewer .inner_box .level_txt .tit .level {
  background: linear-gradient(118.66deg, #3EA0FF 5.15%, #1682EB 52.58%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.learning_viewer .inner_box .level_txt .txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.learning_viewer .inner_box .graph_img {
  max-width: 252px;
  margin: 0 auto;
}
.learning_viewer .inner_box .progress_wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 24px;
}
.learning_viewer .inner_box .progress_wrap .graph_txt .growth_txt {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #1A84EA;
}
.learning_viewer .inner_box .progress_wrap .graph_txt .feedback_txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.learning_viewer .inner_box:last-child {
  margin-bottom: 0;
}
.learning_viewer .img_contents img {
  margin-bottom: 40px;
}
.learning_viewer .img_contents img:last-child {
  margin-bottom: 0;
}
.learning_viewer.active {
  align-items: flex-start;
}

.circle_progress {
  position: relative;
  width: 152px;
  height: 152px;
  margin: 0 auto;
}
.circle_progress svg {
  width: 152px;
  height: 152px;
  transform: rotate(-90deg);
}
.circle_progress circle {
  fill: none;
  stroke-width: 8;
}
.circle_progress .frame {
  stroke: #E2F2FF;
}
.circle_progress .bar {
  stroke: #1A84EA;
  stroke-linecap: round;
}
.circle_progress .value_box {
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.circle_progress .value_box .txt {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.circle_progress .value_box .percent {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #1A84EA;
}

.wrap_audio {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
  border-radius: 12px;
  background-color: #ffffff;
  padding: 16px;
}
.wrap_audio .play_btn {
  display: block;
  position: relative;
  width: 40px;
  min-width: 40px;
  height: 40px;
  font-size: 0;
  background-image: url("../images/play-fill.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 16px 20px;
  cursor: pointer;
}
.wrap_audio .play_btn.pause {
  background-image: url("../images/pause-fill.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 20px;
}
.wrap_audio .wrap_bar {
  position: relative;
  max-width: calc(100% - 103px);
  width: 100%;
}
.wrap_audio .wrap_bar .progress_bar {
  width: 100%;
  height: 8px;
  background-color: #EDF1F1;
  cursor: pointer;
  border-radius: 20px;
}
.wrap_audio .wrap_bar .progress_bar .progress_amount {
  display: block;
  position: absolute;
  top: auto;
  right: auto;
  bottom: auto;
  left: -1px;
  height: 100%;
  border-radius: 20px 0 0 20px;
  background-color: #132227;
}
.wrap_audio .wrap_bar .progress_bar .progress_amount .circle {
  display: block;
  position: absolute;
  top: -4px;
  right: -10px;
  bottom: auto;
  left: auto;
  width: 16px;
  height: 16px;
  border-radius: 100%;
  background-color: #132227;
}
.wrap_audio .wrap_bar .progress_bar .progress_amount .circle:after {
  display: block;
  position: absolute;
  top: -8px;
  right: auto;
  bottom: auto;
  left: -8px;
  width: 32px;
  height: 32px;
  content: "";
}
.wrap_audio .time_txt {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.wrap_audio .loop_btn {
  display: block;
  width: 40px;
  min-width: 40px;
  height: 40px;
  font-size: 0;
  cursor: pointer;
  background-image: url("../images/loop.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 24px 24px;
}
.wrap_audio .loop_btn.loop {
  background-image: url("../images/loop-on.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 24px 24px;
}
.wrap_audio .loop_btn.error {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.wrap_audio .btn_down {
  display: block;
  width: 40px;
  min-width: 40px;
  height: 40px;
  font-size: 0;
  background-image: url("../images/download.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 24px 24px;
}
.wrap_audio .btn_down.error {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.wrap_audio.error {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.my_lecture {
  background-color: #EDF1F1;
  padding-top: 80px;
  width: 100%;
  max-width: none;
}
.my_lecture .cont_box {
  width: 100%;
  max-width: 720px;
  min-width: 280px;
  padding: 20px 16px 0;
  margin: 0 auto;
}
.my_lecture .cont_box.more_class {
  padding-top: 60px;
}
.my_lecture .wrap_tab {
  margin-bottom: 32px;
}
.my_lecture .wrap_tab .list_tab.options {
  display: flex;
  flex-direction: row;
  justify-content: "space-between";
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  width: 240px;
  margin-bottom: 32px;
}
.my_lecture .wrap_tab .list_tab.options li {
  flex: 1 1;
}
.my_lecture .inner_box .tit_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  margin-bottom: 8px;
}
.my_lecture .inner_box .tit_box .heading_2 {
  margin-bottom: 0;
}
.my_lecture .inner_box .tit_box .btn_tertiary {
  margin-left: auto;
  background: none;
}
.my_lecture .inner_box .date_tit {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  margin-top: 16px;
  margin-bottom: 16px;
  color: #7D878B;
}
.my_lecture .round_box {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.my_lecture .round_box .d_flex {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
  width: 100%;
}
.my_lecture .round_box .d_flex .info_box {
  overflow: hidden;
}
.my_lecture .round_box .d_flex .left_cont {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
  overflow: hidden;
}
.my_lecture .round_box .d_flex .right_cont {
  margin-left: auto;
}
.my_lecture .round_box .d_flex .right_cont .inner_btn {
  display: block;
  width: 120px;
  white-space: nowrap;
  margin-top: 8px;
  cursor: not-allowed;
}
.my_lecture .round_box .d_flex .right_cont .inner_btn a {
  width: 100%;
  padding: 0 10px;
}
.my_lecture .round_box .d_flex .right_cont .inner_btn a.disabled {
  opacity: 0.4;
  pointer-events: none;
}
.my_lecture .round_box .d_flex .right_cont .inner_btn:first-child {
  margin-top: 0;
}
.my_lecture .round_box .d_flex .body_2 {
  color: #132227;
}
.my_lecture .round_box .d_flex .date_box {
  overflow: hidden;
  margin-bottom: 12px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.my_lecture .round_box .d_flex .date_box .time_txt {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.my_lecture .round_box .d_flex .wrap_date {
  min-width: 60px;
  white-space: nowrap;
  padding: 0 5px;
  text-align: center;
}
.my_lecture .round_box .d_flex .wrap_date .day {
  display: block;
  margin: 4px 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
}
.my_lecture .round_box .d_flex .wrap_date .week {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #4A5457;
}
.my_lecture .round_box .d_flex .time_tit {
  display: block;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.my_lecture .round_box .d_flex .subject_tit {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  margin-bottom: 12px;
}
.my_lecture .round_box .d_flex .subject_tit .body_2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my_lecture .round_box .d_flex .subject_tit .body_2.none {
  white-space: normal;
  color: #1A84EA;
}
.my_lecture .round_box .d_flex .subject_tit .num {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
  white-space: nowrap;
}
.my_lecture .round_box .d_flex .subject_txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 20px;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
  background-image: url("../images/ico-book.svg");
  background-repeat: no-repeat;
  background-position: 0px 50%;
  background-size: 14px auto;
}
.my_lecture .round_box .d_flex .teacher_txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 20px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
  background-image: url("../images/ico-people.svg");
  background-repeat: no-repeat;
  background-position: 0px 50%;
  background-size: 12px auto;
}
.my_lecture .round_box .list_noti {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #DDE4E6;
}
.my_lecture .round_box .list_noti li {
  padding-left: 20px;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
  background-image: url("../images/ico-chk.svg");
  background-repeat: no-repeat;
  background-position: 2px 3px;
  background-size: 12px auto;
}
.my_lecture .round_box .list_noti li:last-child {
  margin-bottom: 0;
}
.my_lecture .round_box .total_txt {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #4A5457;
  margin-bottom: 16px;
}
.my_lecture .round_box .box_check {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
}
.my_lecture .round_box .box_check .inner {
  width: 50%;
  text-align: center;
}
.my_lecture .round_box .box_check .inner .attendance {
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #1A84EA;
  background-image: url("../images/attendance.svg");
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 16px auto;
}
.my_lecture .round_box .box_check .inner .absent {
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #7D878B;
  background-image: url("../images/absent.svg");
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 16px auto;
}
.my_lecture .round_box .box_check .inner .fail {
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #EB4545;
  background-image: url("../images/fail.svg");
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 16px auto;
}
.my_lecture .round_box .box_check .inner .check_txt {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #132227;
}
.my_lecture .round_box .box_check .inner:first-child {
  border-right: 1px solid #DDE4E6;
}
.my_lecture .round_box:last-child {
  margin-bottom: 0;
}
.my_lecture .round_box.statistics {
  padding-top: 24px;
  padding-bottom: 24px;
}
.my_lecture .round_box.statistics .list_noti {
  padding-top: 24px;
}
.my_lecture .round_box.gray {
  margin-top: 16px;
  background-color: #DDE4E6;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
}
.my_lecture .round_box.gray .ico {
  display: block;
  width: 24px;
  height: 24px;
}
.my_lecture .round_box.gray .txt_box {
  flex: 1;
}
.my_lecture .round_box .caption {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 4px;
  color: #7D878B;
}
.my_lecture .round_box .link_mypage {
  padding-right: 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #1A84EA;
  background-image: url("../images/arr-right-blue.svg");
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-size: 5px auto;
}
.my_lecture .wrap_round .round_box:last-child {
  margin-bottom: 0;
}
.my_lecture .black_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  margin-bottom: 32px;
  padding: 16px;
  border-radius: 12px;
  background-color: #132227;
}
.my_lecture .black_box .info_box .tag {
  margin-bottom: 8px;
}
.my_lecture .black_box .info_box .day {
  display: block;
  margin-bottom: 4px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.my_lecture .black_box .info_box .period {
  color: #DDE4E6;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}
.my_lecture .black_box .btn_white {
  margin-left: auto;
}
.my_lecture .private_box {
  margin-bottom: 16px;
}
.my_lecture .private_box:last-child {
  margin-bottom: 0;
}
.my_lecture .private_box .tit {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #7D878B;
}
.my_lecture .private_box .list_private {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0px;
  margin: 0 -8px;
}
.my_lecture .private_box .list_private li {
  width: 33.333%;
  padding: 0 8px;
  margin-top: 16px;
}
.my_lecture .private_box .list_private li:nth-child(-n+3) {
  margin-top: 0;
}
.my_lecture .private_box .list_private li .round_box {
  margin: 0;
}
.my_lecture .private_box .list_private li .deadline_txt {
  display: block;
  margin-top: 16px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.my_lecture .private_box .list_private li .guide_txt {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}
.my_lecture .private_box .list_private li .btn_secondary {
  margin-top: 16px;
  width: 100%;
}
.my_lecture .private_box .list_private li .tag_box {
  overflow: hidden;
}
.my_lecture .private_box .list_private li .tag_box .tag {
  float: left;
  margin-right: 8px;
}
.my_lecture .private_box .list_private li .tag_box .day_txt {
  float: left;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.my_lecture .private_box .wrap_tab .roun_box {
  margin-bottom: 16px;
}
.my_lecture .head_nav {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
  margin-bottom: 24px;
}
.my_lecture .head_nav .sub_tit {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
  flex: 1;
}
.my_lecture .head_nav .right_nav {
  overflow: hidden;
  margin-left: auto;
}
.my_lecture .head_nav .right_nav a {
  position: relative;
  float: left;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.my_lecture .head_nav .right_nav a.on {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #1A84EA;
}
.my_lecture .head_nav .right_nav a.on:after {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.my_lecture .head_nav .right_nav a:after {
  display: block;
  position: absolute;
  top: 0;
  right: -1px;
  bottom: auto;
  left: auto;
  content: "|";
}
.my_lecture .head_nav .right_nav a:first-child {
  padding-left: 0;
}
.my_lecture .head_nav .right_nav a:last-child {
  padding-right: 0;
}
.my_lecture .head_nav .right_nav a:last-child:after {
  display: none;
}
.my_lecture .foot_noti {
  padding: 32px 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #7D878B;
  text-align: center;
}
.my_lecture .total_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}
.my_lecture .total_box .round_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 0;
  width: calc(50% - 8px);
}
.my_lecture .total_box .round_box .ico {
  display: block;
  width: 44px;
  height: 44px;
  background-color: #EDF1F1;
  border-radius: 100%;
}
.my_lecture .total_box .round_box .ico.book {
  background-image: url("../images/ico-book-gray.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 22px auto;
}
.my_lecture .total_box .round_box .ico.watch {
  background-image: url("../images/ico-watch-gray.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 20px auto;
}
.my_lecture .total_box .round_box .total {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.my_lecture .total_box .round_box .total .primary_txt {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.my_lecture .none_cont {
  padding: 8px 0 16px;
  text-align: center;
}
.my_lecture .none_cont .txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
  margin-bottom: 8px;
}
.my_lecture .none_cont .logo_img {
  width: 108px;
  margin: 0 auto 32px;
}
.my_lecture .none_cont .cozy_img {
  width: 218px;
  margin: 0 auto;
}
.my_lecture .list_procedure li {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid #DDE4E6;
}
.my_lecture .list_procedure li:last-child {
  border-bottom: 0 none;
}
.my_lecture .list_procedure li .thumb {
  width: 89px;
  height: 50px;
  text-align: center;
}
.my_lecture .list_procedure li .thumb img {
  border: 1px solid #DDE4E6;
  border-radius: 4px;
  overflow: hidden;
  max-height: 100%;
}
.my_lecture .list_procedure li .thumb.length {
  width: 63px;
  height: 90px;
}
.my_lecture .list_procedure li .center_cont {
  flex: 1;
}
.my_lecture .list_procedure li .center_cont .subject_namae {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}
.my_lecture .list_procedure li .center_cont .date_txt {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.my_lecture .list_procedure li .right_cont {
  margin-left: auto;
  white-space: nowrap;
}
.my_lecture .date_calender {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 32px;
}
.my_lecture .date_calender .btn_prev {
  width: 48px;
  height: 48px;
  font-size: 0;
  background-image: url("../images/chevron-left.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 8px auto;
}
.my_lecture .date_calender .btn_prev.end {
  background: none;
}
.my_lecture .date_calender .btn_next {
  width: 48px;
  height: 48px;
  font-size: 0;
  background-image: url("../images/chevron-right.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 8px auto;
}
.my_lecture .date_calender .btn_next.end {
  background: none;
}
.my_lecture .date_calender .current_txt {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  line-height: 48px;
}
.my_lecture .class_info .heading_2 {
  margin-bottom: 0;
}
.my_lecture .class_info .wrap_info {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #DDE4E6;
}
.my_lecture .class_info .wrap_info:last-child {
  border-bottom: 0 none;
}
.my_lecture .class_info .wrap_info .sub_tit {
  display: block;
  width: 80px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #7D878B;
}
.my_lecture .class_info .wrap_info .body_1 {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}
.my_lecture .class_info .wrap_info .body_2 {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.my_lecture .class_info .wrap_info .btn_tertiary {
  margin-left: auto;
  background: none;
}
.my_lecture .cont_box.statistics .box_tab {
  margin-bottom: 32px;
}

.login_join .heading_tit {
  display: block;
  text-align: center;
  margin-bottom: 40px;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #132227;
}
.login_join .heading_desc {
  display: block;
  text-align: center;
  margin-top: -40px;
  margin-bottom: 40px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.login_join .tooltip_box {
  position: absolute;
  top: -17px;
  right: -105%;
  bottom: auto;
  left: auto;
  padding: 12px;
  background-color: #132227;
  border-radius: 8px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
  box-shadow: 0px 0px 12px rgba(19, 34, 39, 0.2);
}
.login_join .tooltip_box:after {
  display: block;
  position: absolute;
  top: auto;
  right: auto;
  bottom: 8px;
  left: -8px;
  width: 8px;
  height: 12px;
  background-image: url("../images/tail.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  content: "";
}
.login_join .tooltip_box.bottom {
  position: absolute;
  top: -100%;
  right: auto;
  bottom: auto;
  left: 50%;
  margin-left: -39px;
}
.login_join .tooltip_box.bottom:after {
  bottom: -10px;
  left: 50%;
  margin-left: -3px;
  transform: rotate(-90deg);
}
.login_join .wrap_form {
  margin-bottom: 40px;
}
.login_join .box_input {
  overflow: visible;
  position: relative;
  margin-top: 24px;
}
.login_join .box_input:first-child {
  margin-top: 0;
}
.login_join .box_input .txt_label {
  position: relative;
  display: inline-block;
  color: #4A5457;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.login_join .box_input .txt_label .primary_txt {
  color: #1A84EA;
}
.login_join .box_input .view_eye {
  position: relative;
}
.login_join .box_input .view_eye .comm_inp {
  padding-right: 44px;
}
.login_join .box_input .view_eye .btn_eye {
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: auto;
  left: auto;
  width: 24px;
  height: 24px;
  background-image: url("../images/eye.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}
.login_join .box_input .view_eye .btn_eye.on {
  background-image: url("../images/eye-off.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}
.login_join .box_input .state_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}
.login_join .box_input .state_box.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.login_join .box_input .state_box.disabled input {
  pointer-events: none;
}
.login_join .box_input .state_box.disabled button, .login_join .box_input .state_box.disabled a {
  pointer-events: none;
}
.login_join .box_input .state_box .btn_secondary {
  margin-left: auto;
  white-space: nowrap;
}
.login_join .bottom_btn {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.login_join .bottom_btn .box_btn {
  flex: 1 1 auto;
  cursor: not-allowed;
}
.login_join .bottom_btn .box_btn a {
  display: block;
  width: 100%;
}
.login_join .bottom_btn .box_btn a.disabled {
  pointer-events: none;
}
.login_join .find_info {
  width: 100%;
  margin-top: 12px;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
}
.login_join .find_info .link_find {
  overflow: hidden;
  display: inline-block;
}
.login_join .find_info .link_find a {
  position: relative;
  float: left;
  padding-right: 10px;
  margin-right: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.login_join .find_info .link_find a:after {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
  content: "|";
}
.login_join .find_info .link_find a:last-child {
  margin-right: 0;
}
.login_join .find_info .link_find a:last-child:after {
  display: none;
}
.login_join .find_info .txt_guide {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
  margin-right: 8px;
}
.login_join .find_info .link_login {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #4A5457;
}
.login_join .login_sns {
  margin-top: 40px;
  text-align: center;
}
.login_join .login_sns .txt {
  display: block;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.login_join .login_sns .sns_box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
}
.login_join .login_sns .sns_box .link_sns {
  display: block;
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 100%;
}
.login_join .login_sns .sns_box .link_sns.kakao {
  background: #FEE500;
  background-image: url("../images/ico-kakao.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 18px 18px;
}
.login_join .login_sns .sns_box .link_sns.naver {
  background: #03C75A;
  background-image: url("../images/ico-naver.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 18px 18px;
}
.login_join .login_sns .sns_box .link_sns.google {
  border: 1px solid #E7E7E7;
  background: #FFF;
  background-image: url("../images/ico-google.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 18px 18px;
}
.login_join .login_sns .sns_box .link_sns.apple {
  background: #000;
  background-image: url("../images/ico-apple.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 18px 18px;
}
.login_join .wrap_agree {
  margin-bottom: 40px;
}
.login_join .wrap_agree .all_agree {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #DDE4E6;
}
.login_join .wrap_agree .comm_chk {
  margin-bottom: 16px;
}
.login_join .wrap_agree .comm_chk:last-child {
  margin-bottom: 0px;
}
.login_join .wrap_agree .comm_chk .link_cont {
  margin-left: auto;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #7D878B;
}
.login_join .wrap_agree .down_list {
  padding-left: 16px;
}
.login_join .wrap_agree .many_agree {
  margin-bottom: 16px;
}
.login_join .wrap_agree .many_agree:last-child {
  margin-bottom: 0;
}
.login_join .find_account {
  margin-bottom: 40px;
  background-color: #EDF1F1;
  border-radius: 12px;
  padding: 16px;
}
.login_join .find_account .list_account {
  width: 100%;
  text-align: left;
  padding-left: 16px;
}
.login_join .find_account .list_account li {
  word-wrap: break-word;
  list-style-type: disc;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.login_join .find_account .list_account li:last-child {
  margin-bottom: 0;
}
.login_join .withdrawal_txt {
  margin-bottom: 32px;
  margin-top: -8px;
  padding-left: 16px;
}
.login_join .withdrawal_txt li {
  margin-bottom: 12px;
  list-style-type: disc;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.login_join .withdrawal_txt li:last-child {
  margin-bottom: 0;
}
.login_join .withdrawal_agree {
  margin-bottom: 32px;
}
.login_join .withdrawal_agree .label_txt {
  color: #1A84EA;
}

.pdf_page {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  min-height: 842px;
  padding: 40px;
}
.pdf_page .mission_result {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
}
.pdf_page .mission_result .mission_txt {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #4A5457;
}
.pdf_page .pdf_cont {
  width: 100%;
}
.pdf_page .pdf_cont .heading_tit {
  display: block;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #132227;
}
.pdf_page .pdf_cont .comm_tbl {
  width: 100%;
  margin-bottom: 20px;
  border-top: 1px solid #DDE4E6;
}
.pdf_page .pdf_cont .comm_tbl tr {
  border-bottom: 1px solid #DDE4E6;
}
.pdf_page .pdf_cont .comm_tbl tr th {
  white-space: nowrap;
  padding: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
  background-color: #EDF1F1;
  text-align: left;
}
.pdf_page .pdf_cont .comm_tbl tr th:nth-child(1) {
  width: 20%;
  min-width: 104px;
}
.pdf_page .pdf_cont .comm_tbl tr td {
  padding: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
  text-align: left;
}
.pdf_page .pdf_cont .comm_tbl tr td .price_txt {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #1A84EA;
}
.pdf_page .pdf_cont .comm_tbl:last-child {
  margin-bottom: 0px;
}
.pdf_page .pdf_cont .comm_tbl.mission th:nth-child(1) {
  width: 11.65%;
  min-width: auto;
}
.pdf_page .pdf_cont .comm_tbl.mission th:nth-child(2) {
  width: 23.3%;
}
.pdf_page .pdf_cont .comm_tbl.mission th:nth-child(3) {
  width: 50.29%;
}
.pdf_page .pdf_cont .comm_tbl.mission th:nth-child(4) {
  width: 14.76%;
}
.pdf_page .bottom_cont {
  margin-top: auto;
  width: 100%;
}
.pdf_page .bottom_cont .company_info {
  display: flex;
}
.pdf_page .bottom_cont .company_info .txt_box .date {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}
.pdf_page .bottom_cont .company_info .txt_box .name {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #132227;
}
.pdf_page .bottom_cont .company_info .box_stamp {
  width: 60px;
  height: 60px;
}
.pdf_page .bottom_cont .noti_txt {
  display: block;
  margin-top: 20px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.pdf_page .bottom_cont .proof_txt {
  display: block;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}

.detail_cont .div_box {
  padding: 80px 0;
  background-color: #ffffff;
}
.detail_cont .div_box.black {
  background-color: #132227;
}
.detail_cont .div_box.gray {
  background-color: #EDF1F1;
}
.detail_cont .div_box.blue {
  background-color: #E2F2FF;
}
.detail_cont .div_box.blue_gradient {
  background: linear-gradient(119deg, #3EA0FF 5.15%, #1682EB 52.58%);
}
.detail_cont .div_box .inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 36px;
  max-width: 1108px;
  margin: 0 auto;
  padding: 0 16px;
}
.detail_cont .div_box .img_box {
  text-align: center;
}
.detail_cont .div_box .intro_txt {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.detail_cont .div_box .intro_txt .display1 {
  display: block;
  font-size: 42px;
  font-weight: 700;
  line-height: 58px;
  color: #132227;
}
.detail_cont .div_box .intro_txt .display1.white {
  color: #ffffff;
}
.detail_cont .div_box .intro_txt .body1 {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
  word-break: keep-all;
}
.detail_cont .div_box .intro_txt .body1.white {
  color: #DDE4E6;
}
.detail_cont .div_box .intro_txt .body1.xs_none {
  display: block;
}
.detail_cont .div_box .intro_txt .heading2 {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #1A84EA;
}
.detail_cont .div_box .intro_txt .heading2.white {
  color: #DDE4E6;
}
.detail_cont .div_box .intro_txt .subtitle1 {
  position: relative;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #1A84EA;
}
.detail_cont .div_box .intro_txt .subtitle1 .ico_arr {
  position: absolute;
  top: 50%;
  margin-top: -11px;
  right: -20px;
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("../images/arr-right-blue.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 7px auto;
}
.detail_cont .div_box .list_clip {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  margin-right: -16px;
}
.detail_cont .div_box .list_clip li {
  width: calc(33.333% - 16px);
}
.detail_cont .div_box .list_clip li .inner_box {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  height: 64px;
  border-radius: 8px;
  background-color: #EDF1F1;
}
.detail_cont .div_box .list_clip li .thumb {
  flex: 1;
  max-width: 114px;
}
.detail_cont .div_box .list_clip li .txt {
  padding: 0 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
  flex: 1;
}
.detail_cont .div_box .list_system {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0px;
  row-gap: 28px;
}
.detail_cont .div_box .list_system li {
  width: calc(33.333% - 14px);
}
.detail_cont .div_box .list_system li .inner_box {
  overflow: hidden;
  background-color: #ffffff;
  border-radius: 8px;
}
.detail_cont .div_box .list_system li .thumb {
  width: 100%;
  height: 152px;
}
.detail_cont .div_box .list_system li .thumb.system1 {
  background-image: url("../images/clipseries-en-section7-1.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}
.detail_cont .div_box .list_system li .thumb.system2 {
  background-image: url("../images/clipseries-en-section7-2.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}
.detail_cont .div_box .list_system li .thumb.system3 {
  background-image: url("../images/clipseries-en-section7-3.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}
.detail_cont .div_box .list_system li .thumb.system4 {
  background-image: url("../images/clipseries-en-section7-4.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}
.detail_cont .div_box .list_system li .thumb.system5 {
  background-image: url("../images/clipseries-en-section7-5.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}
.detail_cont .div_box .list_system li .thumb.system6 {
  background-image: url("../images/clipseries-en-section7-6.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}
.detail_cont .div_box .list_system li .txt_box {
  padding: 16px;
  border-top: 1px solid #DDE4E6;
}
.detail_cont .div_box .list_system li .txt_box .tit {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.detail_cont .div_box .list_system li .txt_box .desc {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.detail_cont .div_box .list_funny {
  margin-top: -12px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  margin-right: -16px;
}
.detail_cont .div_box .list_funny li {
  padding-top: 12px;
  width: calc(33.333% - 16px);
}
.detail_cont .div_box .list_funny .thumb {
  border-radius: 8px;
  overflow: hidden;
}
.detail_cont .div_box .list_funny .desc_txt {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.detail_cont .div_box .list_fit {
  width: 100%;
}
.detail_cont .div_box .list_fit li {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
  border-radius: 40px;
  margin-bottom: 28px;
  padding: 36px;
}
.detail_cont .div_box .list_fit li .cont_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  flex: 1;
}
.detail_cont .div_box .list_fit li .cont_box .heading_txt {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #132227;
}
.detail_cont .div_box .list_fit li .cont_box .body_txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.detail_cont .div_box .list_fit li .cont_box .caption_txt {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.detail_cont .div_box .list_fit li .cont_box .sub_tit {
  position: relative;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #1A84EA;
}
.detail_cont .div_box .list_fit li .cont_box .sub_tit .ico_arr {
  position: absolute;
  top: 50%;
  margin-top: -11px;
  right: -20px;
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("../images/arr-right-blue.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 7px auto;
}
.detail_cont .div_box .list_fit li .cont_box.left {
  width: 468px;
}
.detail_cont .div_box .list_fit li.yellow {
  background-color: #FFEECD;
}
.detail_cont .div_box .list_fit li.blue {
  flex-direction: row-reverse;
  background-color: #E2F2FF;
}
.detail_cont .div_box .list_fit li.pink {
  background-color: #FFE0E0;
}
.detail_cont .div_box .list_fit li:last-child {
  margin-bottom: 0p;
}
.detail_cont .div_box .list_worry li {
  margin-bottom: 8px;
  padding: 16px;
  border-radius: 16px;
  background-color: #ffffff;
}
.detail_cont .div_box .list_worry li:last-child {
  margin-bottom: 0;
}
.detail_cont .div_box .list_worry li .tit {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.detail_cont .div_box .list_worry li .sub {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.detail_cont.clip .div_box.section1 {
  padding-bottom: 0;
  background-image: url("../images/clipseries-en-section1-bg.png");
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: auto 458px;
}
.detail_cont.clip .div_box.section1 .img_box {
  max-width: 580px;
}
.detail_cont.clip .div_box.section2 {
  padding-bottom: 0;
}
.detail_cont.clip .div_box.section2 .img_box {
  max-width: 508px;
}
.detail_cont.clip .div_box.section3 {
  padding-top: 0;
}
.detail_cont.clip .div_box.section3 .img_box {
  max-width: 508px;
}
.detail_cont.clip .div_box.section4 .img_box {
  max-width: 888px;
}
.detail_cont.clip .div_box.section5 {
  padding-bottom: 0;
}
.detail_cont.clip .div_box.section5 .img_box {
  max-width: 698px;
}
.detail_cont.clip.cn .div_box.section1 {
  padding-bottom: 0;
  background-image: url("../images/clipseries-cn-section1-bg.png");
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: auto 458px;
}
.detail_cont.clip.cn .div_box .list_system li .thumb.system1 {
  background-image: url("../images/clipseries-cn-section7-1.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}
.detail_cont.clip.cn .div_box .list_system li .thumb.system2 {
  background-image: url("../images/clipseries-cn-section7-2.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}
.detail_cont.clip.cn .div_box .list_system li .thumb.system3 {
  background-image: url("../images/clipseries-cn-section7-3.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}
.detail_cont.clip.cn .div_box .list_system li .thumb.system4 {
  background-image: url("../images/clipseries-cn-section7-4.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}
.detail_cont.clip.cn .div_box .list_system li .thumb.system5 {
  background-image: url("../images/clipseries-cn-section7-5.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}
.detail_cont.clip.cn .div_box .list_system li .thumb.system6 {
  background-image: url("../images/clipseries-cn-section7-6.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}
.detail_cont.clip.jp .div_box.section1 {
  padding-bottom: 0;
  background-image: url("../images/clipseries-jp-section1-bg.png");
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: auto 458px;
}
.detail_cont.clip.jp .div_box .list_system li .thumb.system1 {
  background-image: url("../images/clipseries-jp-section7-1.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}
.detail_cont.clip.jp .div_box .list_system li .thumb.system2 {
  background-image: url("../images/clipseries-jp-section7-2.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}
.detail_cont.clip.jp .div_box .list_system li .thumb.system3 {
  background-image: url("../images/clipseries-jp-section7-3.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}
.detail_cont.clip.jp .div_box .list_system li .thumb.system4 {
  background-image: url("../images/clipseries-jp-section7-4.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}
.detail_cont.clip.jp .div_box .list_system li .thumb.system5 {
  background-image: url("../images/clipseries-jp-section7-5.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}
.detail_cont.clip.jp .div_box .list_system li .thumb.system6 {
  background-image: url("../images/clipseries-jp-section7-6.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}
.detail_cont.free .list_system {
  display: block;
  max-width: 480px;
}
.detail_cont.free .list_system li {
  width: 100%;
  margin-bottom: 28px;
}
.detail_cont.free .list_system li:last-child {
  margin-bottom: 0;
}
.detail_cont.free .list_system li .thumb.system1 {
  background-image: url("../images/freetrial-section2-1.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}
.detail_cont.free .list_system li .thumb.system2 {
  background-image: url("../images/freetrial-section2-2.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}
.detail_cont.free .list_system li .thumb.system3 {
  background-image: url("../images/freetrial-section2-3.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}
.detail_cont.free .list_system li .thumb.system4 {
  background-image: url("../images/freetrial-section2-4.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}
.detail_cont.free .list_system li .thumb.system5 {
  background-image: url("../images/freetrial-section2-5.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}
.detail_cont.free .list_system li .thumb.system6 {
  background-image: url("../images/freetrial-section2-6.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}
.detail_cont.free .list_system li .thumb.system7 {
  background-image: url("../images/freetrial-section2-7.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}
.detail_cont.free .div_box.blue .btn_secondary {
  background: none;
}
.detail_cont.free .div_box .swiper_cont {
  max-width: none;
}
.detail_cont.free .wrap_tab {
  width: 100%;
}
.detail_cont.free .wrap_tab .box_tab {
  width: 280px;
  margin: 0 auto 36px;
}
.detail_cont.free .wrap_tab .box_tab li {
  width: 33.333%;
}
.detail_cont.free .sentence_swiper {
  width: 100%;
  padding-right: 16px;
}
.detail_cont.free .sentence_swiper.en .sentence_box {
  height: 274px;
}
.detail_cont.free .sentence_swiper.cn .sentence_box {
  height: 328px;
}
.detail_cont.free .sentence_swiper.jp .sentence_box {
  height: 328px;
}
.detail_cont.free .sentence_swiper .swiper-slide {
  width: 348px !important;
  margin-left: 16px;
}
.detail_cont.free .sentence_swiper .swiper-slide .sentence_box {
  width: 100%;
  padding: 16px;
  border-radius: 16px;
  background-color: #ffffff;
}
.detail_cont.free .sentence_swiper .swiper-slide .sentence_box .tit_txt {
  display: block;
  padding-bottom: 16px;
  border-bottom: 1px solid #DDE4E6;
}
.detail_cont.free .sentence_swiper .swiper-slide .sentence_box .inner_txt {
  margin-top: 16px;
}
.detail_cont.free .sentence_swiper .swiper-slide .sentence_box .inner_txt p {
  margin-top: 2px;
}
.detail_cont.free .sentence_swiper .swiper-slide .sentence_box .inner_txt p:first-child {
  margin-top: 0;
}
.detail_cont.free .sentence_swiper .swiper-slide .sentence_box .inner_txt .language {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.detail_cont.free .sentence_swiper .swiper-slide .sentence_box .inner_txt .construe {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #1A84EA;
}
.detail_cont.free .sentence_swiper .swiper-slide .sentence_box .inner_txt .pronounce {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.detail_cont.free .swiper_txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #B0BBBE;
}
.detail_cont.main .section1 {
  position: relative;
  padding-bottom: 320px;
}
.detail_cont.main .section1 .bg_item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/main-bg.png");
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 1260px auto;
}
.detail_cont.main .section4 .inner {
  max-width: none;
}
.detail_cont.main .section4 .bg_area {
  width: 100%;
  height: 335px;
  background-image: url("../images/mainpage-section4.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}
.detail_cont.main .section5 .inner {
  max-width: none;
}
.detail_cont.main .section5 .wrap_tab {
  width: 100%;
}
.detail_cont.main .section5 .wrap_tab .box_tab {
  width: 280px;
  margin: 0 auto 36px;
}
.detail_cont.main .section5 .wrap_tab .box_tab li {
  width: 33.333%;
}
.detail_cont.main .section5 .book_swiper {
  width: 100%;
  padding-right: 16px;
}
.detail_cont.main .section5 .book_swiper .swiper-wrapper .swiper-slide {
  overflow: hidden;
  width: 280px !important;
  height: 396px;
  margin-left: 16px;
  overflow: hidden;
}
.detail_cont.main .section5 .book_swiper .swiper-wrapper .swiper-slide a {
  overflow: hidden;
  display: block;
  border-radius: 8px;
  border: 1px solid #DDE4E6;
}
.detail_cont.main .section6 .inner {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 36px;
}
.detail_cont.main .section6 .inner .intro_txt {
  flex: 1;
  width: 560px;
  align-items: flex-start;
  text-align: left;
}
.detail_cont.main .section6 .inner .intro_txt .body1 {
  color: #B0BBBE;
}
.detail_cont.main .section6 .inner .intro_txt .sub_tit {
  color: #ffffff;
}
.detail_cont.main .section6 .inner .right_img {
  flex: 1;
}
.detail_cont.main .section7 .list_system li {
  width: calc(50% - 14px);
}
.detail_cont.main .section7 .list_system li .thumb.system1 {
  background-image: url("../images/mainpage-section6-1.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
  background-color: #489FF2;
}
.detail_cont.main .section7 .list_system li .thumb.system2 {
  background-image: url("../images/mainpage-section6-2.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
  background-color: #C7D0D2;
}
.detail_cont.main .section7 .list_system li .thumb.system3 {
  background-image: url("../images/mainpage-section6-3.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
  background-color: #FE838D;
}
.detail_cont.main .section7 .list_system li .thumb.system4 {
  background-image: url("../images/mainpage-section6-4.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
  background-color: #132227;
}
.detail_cont.main .section7 .list_system li .thumb.system5 {
  background-image: url("../images/mainpage-section6-5.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
  background-color: #132227;
}
.detail_cont.main .section7 .list_system li .thumb.system6 {
  background-image: url("../images/mainpage-section6-6.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
  background-color: #6C69FF;
}
.detail_cont.main .section9 .inner {
  max-width: none;
}
.detail_cont.main .section9 .star_swiper {
  width: 100%;
  padding-right: 16px;
}
.detail_cont.main .section9 .star_swiper .swiper-slide {
  width: -moz-fit-content;
  width: fit-content;
  margin-left: 16px;
}
.detail_cont.main .section9 .star_swiper .swiper-slide .review_box {
  width: 280px;
  border-radius: 16px;
  padding: 16px;
  background-color: #ffffff;
}
.detail_cont.main .section9 .star_swiper .swiper-slide .tit {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.detail_cont.main .section9 .star_swiper .swiper-slide .box_score {
  margin-top: 4px;
  margin-bottom: 16px;
}
.detail_cont.main .section9 .star_swiper .swiper-slide .box_score img {
  width: 23px;
  height: 22px;
}
.detail_cont.main .section9 .star_swiper .swiper-slide .review_txt {
  margin-bottom: 16px;
  color: #132227;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}
.detail_cont.main .section9 .star_swiper .swiper-slide .name_txt {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}

.print-div {
  display: none;
}

@media print {
  html, body {
    height: 99%;
  }
  @page {
    size: portrait;
    margin: 0;
    padding: 0;
  }
  body {
    overflow: visible;
  }
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact;
  }
  .printMode #wcontent {
    display: none;
  }
  .printMode .layer_modal.active {
    display: none;
  }
  .printMode header, .printMode footer {
    display: none;
  }
  .printMode .print-div {
    padding: 0;
    margin: 0;
    display: block;
  }
  .printMode .print-div .learning_viewer {
    display: block;
    visibility: visible;
    position: relative;
  }
  .printMode .print-div .learning_viewer .head_cont {
    position: relative;
  }
  .printMode .print-div .learning_viewer .wrap_tab {
    margin-top: 0;
  }
  .printMode .print-div .learning_viewer * {
    page-break-after: auto;
  }
  .printMode .print-div .learning_viewer .img_contents {
    text-align: center;
    padding: 0;
  }
  .printMode .print-div .learning_viewer .img_contents img {
    margin-bottom: 0;
    margin-top: 10px;
  }
  .printMode #ch-plugin-entry {
    display: none;
  }
}
@media screen and (max-width:1199px) {
  header .menu_cont .box_join {
    right: 16px;
  }
  footer .footer_cont {
    padding: 80px 16px;
  }
  footer .footer_cont .site_map {
    right: 16px;
  }
  .wrap_cont.wide {
    max-width: none;
  }
  .program_detail .body_cont .wrap_img {
    max-width: none;
    padding: 0;
  }
}
@media screen and (max-width:1079px) {
  header {
    height: 52px;
  }
  header .wrap_header .home_logo {
    margin-top: 0;
  }
  header .wrap_header .dimd {
    display: none;
  }
  header .wrap_header .btn_open {
    display: block;
    width: 20px;
    height: 14px;
    position: absolute;
    top: 19px;
    right: 18px;
    bottom: auto;
    left: auto;
  }
  header .wrap_header .btn_close {
    display: block;
    position: absolute;
    top: 19px;
    right: 18px;
    bottom: auto;
    left: auto;
    width: 14px;
    height: 14px;
  }
  header .wrap_header.open .menu_cont {
    display: block;
    animation: gnbOepn 0.2s ease;
    animation-fill-mode: both;
  }
  header .wrap_header.open .dimd {
    animation: dimdShow 0.2s ease;
    animation-fill-mode: both;
    display: inline-block;
    width: 100vw;
    height: calc(var(--vh, 1vh) * 100);
    background: rgba(19, 34, 39, 0.6);
    position: fixed;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    z-index: 1;
  }
  header .wrap_header.close .menu_cont {
    display: block;
    animation: gnbClose 0.2s ease;
    animation-fill-mode: both;
  }
  header .wrap_header.close .dimd {
    animation: dimdHide 0.2s ease;
    animation-fill-mode: both;
  }
  header .menu_cont {
    display: none;
    position: fixed;
    top: 0px;
    right: 0;
    bottom: auto;
    left: auto;
    width: 100%;
    overflow-y: scroll;
    max-width: 560px;
    height: calc(var(--vh, 1vh) * 100);
    background-color: #ffffff;
    z-index: 10;
  }
  header .menu_cont .wrap_alarm {
    position: absolute;
    top: 14px;
    right: 72px;
    bottom: auto;
    left: auto;
  }
  header .menu_cont .wrap_alarm .link_alarm {
    margin-top: 0;
  }
  header .menu_cont .box_join {
    position: relative;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    width: 100%;
    margin-left: 0;
    padding: 16px;
    overflow: hidden;
    gap: 4px;
  }
  header .menu_cont .box_join a {
    flex-basis: 0;
    flex-grow: 1;
  }
  header .menu_cont .box_join.login {
    height: auto;
    margin-bottom: 8px;
    margin-top: 0;
  }
  header .menu_cont .box_join.login a {
    margin-top: 0;
    margin-left: auto;
    flex-basis: auto;
    flex-grow: inherit;
  }
  header .menu_cont .box_join.login .link_mypage {
    height: auto;
  }
  header .menu_cont .box_join.login .link_mypage .ico_arr {
    background-image: url("../images/chevron-right.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 6px 10px;
  }
  header .menu_cont .box_join.login .list_my {
    display: none;
  }
  header .menu_cont .box_join.login:after {
    display: block;
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 16px;
    height: 1px;
    width: calc(100% - 32px);
    background-color: #DDE4E6;
    content: "";
  }
  header .menu_cont .sub_logo {
    display: block;
    width: 100%;
    height: 52px;
  }
  header .menu_cont .sub_logo .link_logo {
    display: block;
    position: absolute;
    top: 16px;
    right: auto;
    bottom: auto;
    left: 16px;
    width: 78px;
    height: 20px;
  }
  header .menu_cont .sub_logo .link_logo img {
    height: 100%;
    width: auto;
    max-width: none;
  }
  header .menu_cont nav {
    width: 100%;
    padding: 0 16px 26px;
  }
  header .menu_cont nav .link_nav .btn_sub {
    position: absolute;
    top: 14px;
    right: 0;
    bottom: auto;
    left: auto;
    width: 20px;
    height: 20px;
    background-image: url("../images/chevron-down.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 12px 7px;
  }
  header .menu_cont nav .list_nav > li {
    float: none;
    height: auto;
  }
  header .menu_cont nav .list_nav > li .link_nav {
    width: 100%;
    height: 48px;
    margin-right: 0;
    line-height: 48px;
  }
  header .menu_cont nav .list_nav > li.on .sub_nav {
    display: block;
  }
  header .menu_cont nav .list_nav > li.on .btn_sub {
    background-image: url("../images/chevron-up.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 12px 7px;
  }
  header .menu_cont nav .list_nav .sub_nav {
    position: relative;
    box-shadow: none;
    max-height: none;
    overflow: hidden;
    border-radius: 0;
    top: 0;
  }
  header .menu_cont nav .list_nav .sub_nav li {
    display: block;
    height: 44px;
  }
  header .menu_cont nav .list_nav .sub_nav li .link_sub {
    padding: 0 8px;
    line-height: 44px;
  }
  header .menu_cont nav .list_nav .sub_nav li .link_sub span {
    margin-left: 0;
  }
  header .menu_cont nav .list_nav .sub_nav li:hover {
    background-color: #ffffff;
  }
  header .menu_cont .link_logout {
    display: block;
    margin-top: 18px;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #7D878B;
  }
  footer .footer_cont .company_name {
    margin-bottom: 28px;
  }
  footer .footer_cont .site_map {
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    margin-bottom: 32px;
  }
  .wrap_cont {
    padding: 100px 16px 80px;
  }
  .cont_box.challenge .list_challenge li {
    width: 50%;
  }
  .cont_box.course .list_clip li {
    width: 50%;
  }
  .cont_box.course .list_book li {
    width: calc(25% - 16px);
  }
  .cont_box.mypage {
    margin-top: -48px;
  }
  .cont_box.mypage .top_cont .tit_box .tit_txt {
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
  }
  .cont_box.coupon, .cont_box.my_point {
    margin-top: 0;
  }
  .program_detail .body_cont {
    margin: 0 -16px;
  }
  .free_class {
    padding-top: 52px;
    padding-left: 0;
    padding-right: 0;
  }
  .my_lecture {
    padding: 52px 24px 80px;
  }
  .my_lecture .cont_box {
    padding-top: 0;
  }
  .my_lecture .cont_box.more_class {
    padding-top: 48px;
  }
  .wrap_error .error_box .tit {
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
  }
  .wrap_error .error_box .txt {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
  }
  .wrap_error .error_box .foot_box .noti_txt {
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
  }
  .detail_cont {
    margin-top: -29px;
  }
  .detail_cont .div_box .list_system li {
    width: calc(50% - 14px);
  }
  .detail_cont .div_box .list_funny li {
    width: calc(50% - 16px);
  }
  .detail_cont .div_box .list_fit li {
    flex-direction: column;
  }
  .detail_cont .div_box .list_fit li .cont_box.left {
    width: 100%;
  }
  .detail_cont .div_box .list_fit li .cont_box.right {
    align-items: flex-end;
    width: 100%;
  }
  .detail_cont .div_box .list_fit li .cont_box.right img {
    width: 100%;
  }
  .detail_cont .div_box .list_fit li.yellow .cont_box.right img {
    max-width: 520px;
  }
  .detail_cont .div_box .list_fit li.blue {
    flex-direction: column;
  }
  .detail_cont .div_box .list_fit li.blue .cont_box.right img {
    max-width: 460px;
  }
  .detail_cont .div_box .list_fit li.pink .cont_box.right img {
    max-width: 520px;
  }
  .detail_cont.free .inner.swiper_cont {
    padding: 0;
  }
  .detail_cont.free .list_system li {
    width: 100%;
  }
  .detail_cont.main .section4 .inner {
    padding: 0;
  }
  .detail_cont.main .section4 .inner .intro_txt {
    padding: 0 16px;
  }
  .detail_cont.main .section4 .bg_area {
    height: 240px;
  }
  .detail_cont.main .section6 .inner {
    flex-direction: column;
  }
  .detail_cont.main .section6 .inner .intro_txt {
    width: 100%;
  }
  .detail_cont.main .section6 .inner .right_img {
    width: 100%;
    text-align: right;
  }
  .detail_cont.main .section6 .inner .right_img img {
    max-width: 444px;
    width: 100%;
  }
  .detail_cont.main .section7 .list_system li {
    width: 100%;
  }
  .detail_cont.main .section5 .inner, .detail_cont.main .section9 .inner {
    padding: 0;
  }
}
@media screen and (max-width:767px) {
  .pc_on {
    display: none;
  }
  .m_on {
    display: block;
  }
  header .menu_cont {
    max-width: 100%;
  }
  .wrap_tab .box_tab.overflow {
    overflow: hidden;
    display: flex;
    width: 100%;
    height: 40px;
    -webkit-overflow-scrolling: touch;
  }
  .wrap_tab .box_tab.overflow .list_tab {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
    width: 110%;
    overflow-x: scroll;
    overflow-y: hidden;
    height: 60px;
  }
  .wrap_tab .box_tab.overflow .list_tab li {
    display: flex;
    width: auto;
    height: 40px;
  }
  .wrap_tab .box_tab.overflow .list_tab li a, .wrap_tab .box_tab.overflow .list_tab li button {
    white-space: nowrap;
  }
  .wrap_tab .box_tab.overflow .list_tab.text {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 12px;
  }
  .cont_box.laguage .wrap_option .option_box br {
    display: block;
  }
  .cont_box.class .wrap_option.small {
    display: flex;
    flex-direction: row;
    justify-content: "space-between";
    align-items: center;
    flex-wrap: wrap;
    gap: 0px;
    gap: 16px;
  }
  .cont_box.class .wrap_option.small .option_box {
    width: calc(33% - 16px);
  }
  .cont_box.class .wrap_option .txt.sub br {
    display: block;
  }
  .cont_box.class .bar_cont .btn_primary {
    width: 100%;
  }
  .cont_box.payment .bottom_btn a {
    width: 100%;
  }
  .cont_box.challenge .list_challenge li {
    width: 100%;
  }
  .cont_box.course .link_banner {
    height: 96px;
  }
  .cont_box.course .box_clip {
    overflow: hidden;
    display: flex;
    width: 100%;
    height: 144px;
    -webkit-overflow-scrolling: touch;
    margin-top: 16px;
    margin-bottom: 80px;
  }
  .cont_box.course .box_clip .list_clip {
    display: flex;
    flex-wrap: nowrap;
    width: 110%;
    align-items: flex-start;
    overflow-x: scroll;
    overflow-y: hidden;
    height: 180px;
    flex-wrap: wrap;
    flex-direction: column;
    margin: 0;
    gap: 16px;
    padding-bottom: 0;
  }
  .cont_box.course .box_clip .list_clip li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 320px;
    height: 64px;
    margin: 0;
    padding: 0;
  }
  .cont_box.course .box_clip.one {
    height: 64px;
  }
  .cont_box.course .box_tab {
    overflow: hidden;
    display: flex;
    width: 100%;
    height: 40px;
    -webkit-overflow-scrolling: touch;
  }
  .cont_box.course .box_tab .list_tab {
    display: flex;
    flex-wrap: nowrap;
    width: 110%;
    align-items: flex-start;
    overflow-x: scroll;
    overflow-y: hidden;
    height: 60px;
  }
  .cont_box.course .box_tab .list_tab li {
    display: flex;
    width: auto;
    height: 40px;
  }
  .cont_box.course .list_book li {
    width: calc(33.333% - 16px);
  }
  .cont_box.clip .list_clip li {
    width: 100%;
  }
  .cont_box.clip_detail .head_cont .program_img {
    text-align: center;
  }
  .cont_box.clip_detail .head_cont .program_info .title_box {
    margin-bottom: 24px;
  }
  .cont_box.clip_detail .head_cont .program_info .btn_application {
    display: block;
    margin-bottom: 40px;
  }
  .cont_box.clip_detail .head_cont .program_info .btn_application a.sample {
    width: 100%;
  }
  .cont_box.clip_detail .head_cont .program_info .btn_application a.enrolment {
    display: none;
  }
  .cont_box.clip_detail .body_inner {
    padding-top: 48px;
  }
  .cont_box.clip_detail .box_another {
    overflow: hidden;
    display: flex;
    width: 100%;
    height: 266px;
    -webkit-overflow-scrolling: touch;
    margin: -5px;
  }
  .cont_box.clip_detail .box_another .list_another {
    display: flex;
    flex-wrap: nowrap;
    width: 110%;
    align-items: flex-start;
    overflow-x: scroll;
    overflow-y: hidden;
    height: 280px;
    padding: 5px;
  }
  .cont_box.clip_detail .box_another .list_another li {
    width: auto;
  }
  .cont_box.clip_detail .box_another .list_another li .link_more {
    width: 240px;
  }
  .cont_box.clip_detail .book_preview .swiper-button-next {
    right: 0;
  }
  .cont_box.clip_detail .book_preview .swiper-button-prev {
    left: 0;
  }
  .cont_box.select_option .select_option .box_tab {
    overflow: hidden;
    display: flex;
    width: 100%;
    height: 42px;
    -webkit-overflow-scrolling: touch;
  }
  .cont_box.select_option .select_option .box_tab .list_tab {
    display: flex;
    flex-wrap: nowrap;
    width: 110%;
    align-items: flex-start;
    overflow-x: scroll;
    overflow-y: hidden;
    height: 50px;
  }
  .cont_box.select_option .select_option.want .wrap_option .option_box {
    width: calc(33.333% - 8px);
  }
  .cont_box.select_option .bottom_bar .bar_cont .btn_primary {
    width: 100%;
  }
  .cont_box.alarm .box_tab {
    overflow: hidden;
    display: flex;
    width: 100%;
    height: 40px;
    -webkit-overflow-scrolling: touch;
  }
  .cont_box.alarm .box_tab .list_tab {
    display: flex;
    flex-wrap: nowrap;
    width: 110%;
    align-items: flex-start;
    overflow-x: scroll;
    overflow-y: hidden;
    height: 60px;
  }
  .cont_box.alarm .box_tab .list_tab li {
    display: flex;
    width: auto;
    height: 40px;
  }
  .cont_box.mypage .form_box .caption_txt {
    text-align: right;
  }
  .cont_box.mypage .foot_btn .link {
    flex: 1 1 auto;
  }
  .cont_box.mypage .foot_btn .link a, .cont_box.mypage .foot_btn .link button {
    width: 100%;
  }
  .cont_box.mypage .more_btn a, .cont_box.mypage .more_btn button {
    width: 100%;
  }
  .program_detail .head_cont {
    padding: 0;
    margin: 0 auto;
    display: block;
  }
  .program_detail .head_cont .program_img {
    margin: 0 auto 24px;
    max-width: none;
    float: none;
  }
  .program_detail .head_cont .program_info {
    float: none;
    max-width: none;
  }
  .program_detail .head_cont .program_info .list_program {
    margin-bottom: 40px;
  }
  .program_detail .head_cont .btn_application {
    display: none;
  }
  .program_detail .head_cont.book .program_info, .program_detail .head_cont.clip .program_info {
    max-width: none;
  }
  .program_detail .head_cont.book .program_img, .program_detail .head_cont.clip .program_img {
    margin-bottom: 40px;
  }
  .program_detail .bottom_bar .btn_primary {
    width: 100%;
  }
  .program_detail .foot_cont {
    max-width: none;
    padding: 40px 0 0;
  }
  .free_class .top_cont br.m_on {
    display: none;
  }
  .bottom_bar .bar_cont.pc {
    display: none;
  }
  .bottom_bar .bar_cont.mobile {
    display: flex;
  }
  .bottom_bar .bar_cont {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0px;
    gap: 8px;
  }
  .wrap_option.half .option_box {
    flex-basis: auto;
    flex-grow: initial;
    width: 100%;
  }
  .learning_viewer .head_cont {
    padding: 16px 0;
  }
  .learning_viewer .head_cont .wrap_head {
    padding: 0 48px;
  }
  .learning_viewer .head_cont .tit_txt {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
  }
  .learning_viewer .head_cont .date_txt {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
  }
  .learning_viewer .wrap_tab {
    margin-top: 85px;
  }
  .learning_viewer .inner_box .round_box.today {
    display: block;
  }
  .learning_viewer .inner_box .round_box.today .thumb {
    width: 100%;
    max-width: none;
    margin-bottom: 24px;
    text-align: center;
  }
  .learning_viewer .inner_box .round_box.today .thumb img {
    max-width: 100%;
  }
  .learning_viewer .inner_box .round_box.today .right_cont .btn_primary {
    width: 100%;
  }
  .learning_viewer .inner_box .progress_wrap {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0px;
  }
  .learning_viewer .inner_box .progress_wrap .circle_progress {
    margin-bottom: 24px;
  }
  .learning_viewer .inner_box .box_grade .txt {
    width: 100%;
    margin-bottom: 16px;
  }
  .my_lecture {
    padding: 52px 0 80px;
  }
  .my_lecture .round_box .d_flex {
    display: block;
    overflow: hidden;
  }
  .my_lecture .round_box .d_flex .right_cont {
    margin-top: 16px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .my_lecture .round_box .d_flex .right_cont .inner_btn {
    width: 100%;
  }
  .my_lecture .round_box .d_flex .right_cont .inner_btn:last-child {
    margin-top: 0;
  }
  .my_lecture .inner_private {
    overflow-x: scroll;
    overflow-y: hidden;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;
  }
  .my_lecture .inner_private::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
  }
  .my_lecture .inner_private .list_private {
    width: -moz-max-content;
    width: max-content;
  }
  .my_lecture .inner_private .list_private li {
    width: 256px;
  }
  .my_lecture .private_box.mission .list_private {
    margin: 0;
  }
  .my_lecture .private_box.mission .list_private li {
    float: none;
    width: 100%;
    margin-top: 0;
    margin-bottom: 16px;
    padding: 0;
  }
  .my_lecture .private_box.mission .list_private li:last-child {
    margin-bottom: 0;
  }
  .my_lecture .black_box .info_box {
    width: 100%;
  }
  .my_lecture .black_box .btn_white {
    margin-top: 16px;
  }
  .my_lecture .total_box {
    display: block;
  }
  .my_lecture .total_box .round_box {
    flex-wrap: nowrap;
    width: 100%;
    margin-bottom: 16px;
  }
  .my_lecture .total_box .round_box:last-child {
    margin-bottom: 0;
  }
  .my_lecture .list_procedure li {
    flex-wrap: wrap;
  }
  .my_lecture .list_procedure li .center_cont {
    max-width: none;
    width: calc(100% - 101px);
  }
  .my_lecture .list_procedure li .right_cont {
    width: 100%;
  }
  .my_lecture .list_procedure li .right_cont .btn_tertiary {
    display: block;
  }
  .layer_modal.dialog .layer_cont {
    position: relative;
    bottom: auto;
    width: 90%;
  }
  .layer_modal .layer_cont {
    position: absolute;
    bottom: 0;
  }
  .layer_modal .layer_cont.modal {
    max-width: none;
    width: 100%;
    border-radius: 12px 12px 0 0;
  }
  .layer_modal.type2 .layer_cont {
    width: 90%;
    border-radius: 12px;
    position: relative;
    bottom: auto;
  }
  .layer_modal.selectDate .layer_cont {
    width: 100%;
  }
  .layer_modal.changeDate .box_calendar, .layer_modal.reinforceClass .box_calendar {
    max-width: none;
    width: 100%;
  }
  .layer_modal.changeDate .wrap_option button, .layer_modal.reinforceClass .wrap_option button {
    width: calc(33.333% - 8px);
  }
  .layer_modal.changeDate .wrap_option button:nth-child(3n), .layer_modal.reinforceClass .wrap_option button:nth-child(3n) {
    margin-right: 0;
  }
  .layer_modal.previewFile .pdf_page {
    padding: 20px;
  }
  .layer_modal.account_guide .guide_txt br, .layer_modal.account_choose .guide_txt br {
    display: none;
  }
  .detail_cont .div_box .intro_txt .display1 {
    font-size: 36px;
    font-weight: 700;
    line-height: 58px;
  }
  .detail_cont .div_box .list_clip {
    margin-right: 0;
  }
  .detail_cont .div_box .list_clip li {
    width: 100%;
  }
  .detail_cont .div_box .list_system li {
    width: 100%;
  }
  .detail_cont .div_box .list_system li .txt_box .tit br {
    display: none;
  }
  .detail_cont.free .list_system {
    max-width: none;
  }
}
@media screen and (max-width:559px) {
  .xs_on {
    display: block;
  }
  .xs_none {
    display: none;
  }
  .wrap_cont.slim {
    max-width: none;
  }
  .cont_box.course .link_banner {
    height: 80px;
  }
  .cont_box.course .list_book li {
    width: calc(50% - 16px);
  }
  .detail_cont .div_box .intro_txt .display1 {
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
  }
  .detail_cont .div_box .intro_txt .body1.xs_none {
    display: none;
  }
  .detail_cont .div_box .list_system li .txt_box .tit br {
    display: block;
  }
  .detail_cont .div_box .list_funny {
    margin-right: 0;
  }
  .detail_cont .div_box .list_funny li {
    width: 100%;
  }
  .detail_cont .div_box .list_fit li {
    padding: 24px;
  }
  .detail_cont .div_box .list_fit li .cont_box .body_txt {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
  }
  .detail_cont.clip .div_box.section1 {
    background-size: auto 284px !important;
  }
  .detail_cont.free .list_system li .txt_box .desc br {
    display: none;
  }
  .detail_cont.main .section1 .bg_item {
    background-size: 868px auto;
  }
  .detail_cont.main .section4 .bg_area {
    height: 173px;
  }
  .detail_cont.main .list_system li .txt_box .desc br {
    display: none;
  }
  /*
  main popup
  */
 .layer_modal.mainPop .layer_cont {
  overflow-y: scroll;
}
.layer_modal.mainPop .close_box {
  padding: 16px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  background-color: #ffffff;
}
.layer_modal.mainPop .close_box .day_close {
  color: #96A1A4;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.layer_modal.mainPop .close_box .pop_close {
  color: #4A5457;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  margin-left: auto;
} 

}