@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 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  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;
  -webkit-transform: none;
  -moz-transform: none;
  -o-transform: none;
  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;*/
  -webkit-border-radius: 0;
  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;
  min-width: 320px;
}

#wcontent {
  flex: 1;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.shadow_xs {
  box-shadow: 0px 20px 40px -10px rgba(19, 34, 39, 0.05);
}

.shadow_sm {
  box-shadow: 0px 0px 3px rgba(19, 34, 39, 0.3);
}

.shadow_md {
  box-shadow: 0px 0px 12px rgba(19, 34, 39, 0.2);
}

.shadow_lg {
  box-shadow: 0px 0px 24px rgba(19, 34, 39, 0.2);
}

.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.more2 {
  width: 100%;
  height: 100%;
  background-image: url("../images/more2.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.pause_fill_blue {
  width: 100%;
  height: 100%;
  background-image: url("../images/pause_fill_down.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.flattened-fill {
  width: 100%;
  height: 100%;
  background-image: url("../images/flattened-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.headphones_white {
  width: 100%;
  height: 100%;
  background-image: url("../images/headphones-white.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.bulb-black {
  width: 100%;
  height: 100%;
  background-image: url("../images/bulb-black.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.fail-black {
  width: 100%;
  height: 100%;
  background-image: url("../images/fail-black.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.eye-black {
  width: 100%;
  height: 100%;
  background-image: url("../images/eye-black.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.ico.eye-not {
  width: 100%;
  height: 100%;
  background-image: url("../images/eye-not.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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.ico.picker-down {
  width: 100%;
  height: 100%;
  background-image: url("../images/chevron-down-gray5.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_primary.wd100 {
  width: 100%;
}

.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_secondary.wd100 {
  width: 100%;
}

.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_tertiary.wd100 {
  width: 100%;
}

.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_critical.wd100 {
  width: 100%;
}

.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;
}
.btn_white.wd100 {
  width: 100%;
}

.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::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::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: block;
  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;
  -webkit-line-clamp: 1;
}
.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;
}
.drop_down.large {
  width: 328px;
}
.drop_down.medium {
  width: 240px;
}
.drop_down.medium .select_box .comm_inp {
  height: 40px;
  line-height: 40px;
}
.drop_down.medium .select_box .btn_drop {
  top: 8px;
}
.drop_down.medium .list_dropdown {
  top: 44px;
}
.drop_down.medium .list_dropdown .btn_option {
  height: 40px;
  padding: 0 12px;
}
.drop_down.medium .list_dropdown .btn_option .txt {
  line-height: 40px;
}
.drop_down.small {
  width: 80px;
}
.drop_down.small .txt_label {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}
.drop_down.small .select_box .btn_drop {
  width: 20px;
  height: 20px;
  right: 5px;
  top: 50%;
  margin-top: -10px;
  background-size: 12px 7px;
}
.drop_down.small .select_box .comm_inp {
  height: 32px;
  line-height: 32px;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  padding-left: 10px;
  padding-right: 25px;
}
.drop_down.small .list_dropdown {
  top: 36px;
}
.drop_down.small .list_dropdown .btn_option {
  height: 32px;
  padding: 0 12px;
}
.drop_down.small .list_dropdown .btn_option .txt {
  line-height: 32px;
}
.drop_down.small .list_dropdown li .txt {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.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, .date_select.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, .date_select.half .option_box {
  flex-basis: 0;
  flex-grow: 1;
  margin-bottom: 0;
}
.wrap_option .option_box, .date_select .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, .date_select .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, .date_select .option_box .top_cont .txt {
  display: block;
  margin-bottom: 4px;
}
.wrap_option .option_box .top_cont .txt:last-child, .date_select .option_box .top_cont .txt:last-child {
  margin-bottom: 0;
}
.wrap_option .option_box .top_cont .txt.title, .date_select .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, .date_select .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, .date_select .option_box .top_cont .txt.price {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: #1A84EA;
  white-space: nowrap;
}
.wrap_option .option_box .top_cont .txt.total, .date_select .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, .date_select .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, .date_select .option_box .top_cont .right_txt {
  text-align: right;
}
.wrap_option .option_box .top_cont .tag, .date_select .option_box .top_cont .tag {
  margin-bottom: 4px;
}
.wrap_option .option_box .bottom_cont, .date_select .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, .date_select .option_box.type2 {
  text-align: left;
}
.wrap_option .option_box.type2 .top_cont, .date_select .option_box.type2 .top_cont {
  justify-content: space-between;
}
.wrap_option .option_box.select, .date_select .option_box.select {
  border: 3px solid #1A84EA;
}
.wrap_option .option_box:last-child, .date_select .option_box:last-child {
  margin-bottom: 0;
}
@media (hover: hover) and (pointer: fine) {
  .wrap_option .option_box:hover, .date_select .option_box:hover {
    background: #EDF1F1;
  }
}
.wrap_option .option_box.disabled, .wrap_option .option_box:disabled, .date_select .option_box.disabled, .date_select .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, .date_select .option_box.disabled:hover, .date_select .option_box:disabled:hover {
    background: #ffffff;
  }
}
.wrap_option .option_desc .option_box.select, .date_select .option_desc .option_box.select {
  margin-bottom: 0px;
}
.wrap_option .option_desc .option_box.select + .desc_txt, .date_select .option_desc .option_box.select + .desc_txt {
  display: block;
}
.wrap_option .option_desc .desc_txt, .date_select .option_desc .desc_txt {
  display: none;
  margin-bottom: 16px;
}
.wrap_option .option_desc .desc_txt .txt, .date_select .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, .date_select .option_desc .desc_txt .txt:first-child {
  margin-top: 4px;
}
.wrap_option .option_desc .desc_txt .link, .date_select .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, .date_select .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;
  padding: 0 16px;
  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 - 131px);
}
.layer_cont .body_cont .txt {
  text-align: center;
}
.layer_cont .body_cont .desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
  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: 8px;
}
.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: 8px;
}
.layer_cont.modal .foot_cont a, .layer_cont.modal .foot_cont button {
  flex: 1;
}

.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;
}

.comm_container {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

.container_sm {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

.container_md {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
  padding: 80px 16px 100px;
}

.container_lg {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

.container_xl {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
  padding: 80px 16px 100px;
}

@media screen and (max-width:1199px) {
  .container_xl {
    padding: 60px 16px;
  }
}
@media screen and (max-width:559px) {
  .container_md {
    padding-top: 60px;
    padding-bottom: 80px;
  }
  .container_xl {
    padding: 40px 16px;
  }
}
.campus_header {
  width: 100%;
  border-bottom: 1px solid #EDF1F1;
}
.campus_header .inner_header {
  position: relative;
  max-width: 1108px;
  margin: 0 auto;
}
.campus_header .wrap_header {
  height: 72px;
  padding: 20px 16px;
}
.campus_header .wrap_header .home_logo {
  position: absolute;
  top: 24px;
  right: auto;
  bottom: auto;
  left: 16px;
}
.campus_header .wrap_header .home_logo .link_home {
  display: block;
  height: 24px;
}
.campus_header .wrap_header .home_logo .link_home img {
  height: 100%;
}
.campus_header .wrap_header .campus_nav {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 54px;
}
.campus_header .wrap_header .campus_nav li a {
  color: #132227;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.campus_header .wrap_header .campus_nav li.select a {
  color: #1A84EA;
}
.campus_header .wrap_header .box_login {
  position: absolute;
  top: 20px;
  right: 76px;
  bottom: auto;
  left: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.campus_header .wrap_header .box_login .wrap_alarm {
  position: relative;
  width: 24px;
  height: 100%;
  margin-left: 22px;
  margin-right: -20px;
  padding-bottom: 20px;
  margin-bottom: -20px;
}
.campus_header .wrap_header .box_login .wrap_alarm .link_alarm {
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("../images/bell.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 20px 21px;
}
.campus_header .wrap_header .box_login .wrap_alarm .link_alarm.have {
  background-image: url("../images/bell-on.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 20px 22px;
}
.campus_header .wrap_header .box_login .wrap_alarm .box_alarm {
  display: none;
  position: absolute;
  top: 38px;
  right: -40px;
  bottom: auto;
  left: auto;
  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;
  z-index: 10;
}
.campus_header .wrap_header .box_login .wrap_alarm .box_alarm .head_cont {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  padding: 0 16px;
  height: 52px;
  border-bottom: 1px solid #DDE4E6;
}
.campus_header .wrap_header .box_login .wrap_alarm .box_alarm .head_cont .tit {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
}
.campus_header .wrap_header .box_login .wrap_alarm .box_alarm .head_cont .btn_tertiary {
  margin-left: auto;
}
.campus_header .wrap_header .box_login .wrap_alarm .box_alarm .body_cont {
  max-height: 400px;
  overflow-x: hidden;
  overflow-y: auto;
}
.campus_header .wrap_header .box_login .wrap_alarm .box_alarm .body_cont .list_alarm li .link_wrap {
  padding: 16px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: norwap;
  gap: 16px;
}
@media (hover: hover) and (pointer: fine) {
  .campus_header .wrap_header .box_login .wrap_alarm .box_alarm .body_cont .list_alarm li .link_wrap:hover .campus_header .list_alarm .link_wrap {
    background-color: #EDF1F1;
  }
}
.campus_header .wrap_header .box_login .wrap_alarm .box_alarm .body_cont .list_alarm li .alarm_cont {
  overflow: hidden;
  text-align: left;
}
.campus_header .wrap_header .box_login .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%;
}
.campus_header .wrap_header .box_login .wrap_alarm .box_alarm .body_cont .list_alarm li .alarm_cont .state .circle, .campus_header .wrap_header .box_login .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;
}
.campus_header .wrap_header .box_login .wrap_alarm .box_alarm .body_cont .list_alarm li .alarm_cont .state .circle.read, .campus_header .wrap_header .box_login .wrap_alarm .box_alarm .body_cont .list_alarm li .alarm_cont .state .circle2.read {
  background-color: #C7D0D2;
}
.campus_header .wrap_header .box_login .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;
}
.campus_header .wrap_header .box_login .wrap_alarm .box_alarm .body_cont .list_alarm li .alarm_cont .alarm_tit {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.campus_header .wrap_header .box_login .wrap_alarm .box_alarm .body_cont .list_alarm li .alarm_cont .alarm_txt {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.campus_header .wrap_header .box_login .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;
}
.campus_header .wrap_header .box_login .wrap_alarm .box_alarm .body_cont .list_alarm li .link_go {
  margin-top: 6px;
  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;
}
.campus_header .wrap_header .box_login .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: "";
}
.campus_header .wrap_header .box_login .wrap_alarm .box_alarm .body_cont .list_alarm li .thumb {
  margin-left: auto;
  min-width: 60px;
}
@media (hover: hover) and (min-width: 1080px) {
  .campus_header .wrap_header .box_login .wrap_alarm .box_alarm .body_cont .list_alarm li:hover {
    background-color: #EDF1F1;
  }
}
.campus_header .wrap_header .box_login .wrap_alarm .box_alarm .body_cont .list_alarm li:active {
  background-color: #EDF1F1;
}
.campus_header .wrap_header .box_login .wrap_alarm .box_alarm .body_cont .no_alarm {
  padding: 160px 0;
  text-align: center;
}
.campus_header .wrap_header .box_login .wrap_alarm .box_alarm .body_cont .no_alarm .tit {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #4A5457;
}
.campus_header .wrap_header .box_login .wrap_alarm .box_alarm .body_cont .no_alarm .txt {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.campus_header .wrap_header .box_login .wrap_alarm .box_alarm .foot_cont {
  width: 100%;
  height: 52px;
  border-top: 1px solid #DDE4E6;
}
.campus_header .wrap_header .box_login .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;
}
.campus_header .wrap_header .box_login .wrap_alarm .box_alarm .foot_cont .link_history:after {
  display: blolck;
  width: 20px;
  height: 20px;
  background-image: url("../images/chevron-right-gray.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  content: "";
}
@media (hover: hover) and (pointer: fine) and (min-width: 1080px) {
  .campus_header .wrap_header .box_login .wrap_alarm:hover .box_alarm {
    display: block;
  }
}
.campus_header .wrap_header .btn_open {
  position: absolute;
  top: 29px;
  right: 16px;
  bottom: auto;
  left: auto;
}
.campus_header .sub_nav {
  width: 100%;
  height: 54px;
  background-color: #f8fbfb;
  border-bottom: 2px solid #EDF1F1;
}
.campus_header .sub_nav .list_sub {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 54px;
  color: #132227;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}
.campus_header .sub_nav .list_sub li.select a {
  color: #1A84EA;
}
.campus_header .drawer_box {
  display: none;
  width: 100%;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  right: -100%;
  bottom: auto;
  left: auto;
  height: 100vh;
  max-width: 420px;
  padding-bottom: 60px;
  background-color: #ffffff;
  z-index: 1000;
}
.campus_header .drawer_box .top_cont {
  padding: 40px 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
}
.campus_header .drawer_box .top_cont .link_home {
  display: block;
  height: 20px;
}
.campus_header .drawer_box .top_cont .btn_close {
  width: 20px;
  height: 20px;
  text-align: center;
}
.campus_header .drawer_box .top_cont .btn_close img {
  vertical-align: baseline;
}
.campus_header .drawer_box .wrap_info {
  padding: 20px;
  background-color: #f8fbfb;
}
.campus_header .drawer_box .wrap_info .btn_login {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  width: 100%;
  height: 64px;
  line-height: 64px;
  padding: 0 20px;
  border-radius: 10px;
  border: 1px solid #0E6FDB;
  background-color: #ffffff;
  color: #1A84EA;
  background-image: url("../images/arrRightBlue.svg");
  background-repeat: no-repeat;
  background-position: calc(100% - 28px) 50%;
  background-size: 8px 14px;
}
.campus_header .drawer_box .wrap_info .info_box {
  padding: 7px 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.campus_header .drawer_box .wrap_info .info_box .thumb {
  width: 50px;
  height: 50px;
}
.campus_header .drawer_box .wrap_info .info_box .thumb img {
  height: 100%;
}
.campus_header .drawer_box .wrap_info .info_box .info_txt .name_txt {
  display: block;
  margin-bottom: 4px;
  color: #132227;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.campus_header .drawer_box .wrap_info .info_box .info_txt .mail_txt {
  color: #B0BBBE;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
}
.campus_header .drawer_box .wrap_info .wrap_tab {
  margin-top: 40px;
}
.campus_header .drawer_box .wrap_info .wrap_tab .list_tab {
  max-width: none;
  width: 100%;
}
.campus_header .drawer_box .nav_box {
  padding-top: 50px;
}
.campus_header .drawer_box .nav_box .list_nav li {
  margin-bottom: 10px;
}
.campus_header .drawer_box .nav_box .list_nav li:last-child {
  margin-bottom: 0;
}
.campus_header .drawer_box .nav_box .list_nav li.select a {
  background-color: #E2F2FF;
}
.campus_header .drawer_box .nav_box .list_nav li.select a .txt {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.campus_header .drawer_box .nav_box .list_nav a {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px 40px;
}
.campus_header .drawer_box .nav_box .list_nav a .ico {
  display: block;
  width: 24px;
  height: 24px;
}
.campus_header .drawer_box .nav_box .list_nav a .txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}
.campus_header .drawer_box .nav_box .list_nav a:active {
  background-color: #E2F2FF;
}
.campus_header .drawer_box .nav_box .list_nav a:active .txt {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.campus_header .drawer_box .nav_box .list_nav .home .ico {
  background-image: url("../images/home-ico.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 18px;
}
.campus_header .drawer_box .nav_box .list_nav .view .ico {
  background-image: url("../images/compass.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 19px;
}
.campus_header .drawer_box .nav_box .list_nav .search .ico {
  background-image: url("../images/search.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 20px;
}
.campus_header .drawer_box .nav_box .list_nav .box .ico {
  background-image: url("../images/drawer.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 16px;
}
.campus_header .drawer_box .nav_box .list_nav .set .ico {
  background-image: url("../images/ico-set.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 18px;
}
.campus_header .drawer_box .nav_box .list_nav .ticket .ico {
  background-image: url("../images/union.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 13px;
}
.campus_header .drawer_box .nav_box .list_nav .center .ico {
  background-image: url("../images/ico-question.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 18px;
}
.campus_header .drawer_box .link_logout {
  display: block;
  margin-top: 60px;
  text-align: center;
  color: #B0BBBE;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: underline;
}
.campus_header .dimd {
  display: none;
}
.campus_header.open .dimd {
  animation: dimdShow 0.2s ease;
  animation-fill-mode: both;
}
@keyframes dimdShow {
  from {
    display: none;
  }
  to {
    display: block;
  }
}

.campus_footer {
  padding: 48px 0 84px;
  border-top: 1px solid #DDE4E6;
  background-color: #f8fbfb;
}
.campus_footer .footer_cont {
  padding: 0 16px;
  max-width: 1140px;
  margin: 0 auto;
}
.campus_footer .top_cont {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0px;
  margin-bottom: 24px;
}
.campus_footer .top_cont .company_name {
  height: 24px;
}
.campus_footer .top_cont .company_name img {
  height: 100%;
  width: auto;
}
.campus_footer .top_cont .site_map {
  width: 240px;
}
.campus_footer .top_cont .site_map .select_box .comm_inp {
  height: 40px;
  line-height: 40px;
}
.campus_footer .top_cont .site_map .select_box .btn_drop {
  top: 8px;
}
.campus_footer .top_cont .site_map .list_dropdown {
  top: 44px;
}
.campus_footer .top_cont .site_map .list_dropdown .btn_option {
  height: 40px;
  padding: 0 12px;
}
.campus_footer .top_cont .site_map .list_dropdown .btn_option .txt {
  line-height: 40px;
}
.campus_footer .mid_cont {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  flex-direction: row-reverse;
}
.campus_footer .contents_link {
  padding-bottom: 24px;
  margin-bottom: 36px;
  border-bottom: 1px solid #DDE4E6;
}
.campus_footer .contents_link .list_link {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
}
.campus_footer .contents_link .list_link a {
  color: #7D878B;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  text-decoration: underline;
}
.campus_footer .contents_link .list_link li:after {
  display: inline-block;
  margin: 0 8px;
  color: #7D878B;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  content: " | ";
}
.campus_footer .contents_link .list_link li:last-child:after {
  display: none;
}
.campus_footer .sns_link {
  width: 50%;
  margin-bottom: 26px;
}
.campus_footer .sns_link .list_link {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.campus_footer .sns_link .list_link li {
  flex: 0 1 calc(33.33% - 12px);
}
.campus_footer .sns_link .list_link a {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #7D878B;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}
.campus_footer .sns_link .list_link a .ico {
  width: 24px;
  height: 24px;
}
.campus_footer .company_info {
  width: 50%;
}
.campus_footer .company_info p, .campus_footer .company_info a {
  color: #B0BBBE;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}
.campus_footer .company_info .list_corp {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  margin-top: 12px;
  margin-bottom: 24px;
}
.campus_footer .addr {
  color: #B0BBBE;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.bottom_nav {
  display: none;
}

.floating_banner {
  position: fixed;
  top: auto;
  right: auto;
  bottom: 70px;
  left: auto;
  width: 100%;
  text-align: center;
  padding: 0 16px;
}
.floating_banner .banner_cont {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  max-width: 760px;
  padding: 20px 20px 20px 40px;
  border-radius: 15px;
  background: linear-gradient(107deg, #237BFF 2.61%, #552EBF 62.08%);
}
.floating_banner .banner_cont .banner_txt {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #ffffff;
}
.floating_banner .banner_cont .btn_white {
  margin-right: 40px;
}
.floating_banner .banner_cont .btn_close {
  margin-left: auto;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  right: 20px;
  bottom: auto;
  left: auto;
  margin-top: -6px;
}
.floating_banner .banner_cont .btn_close img {
  vertical-align: baseline;
}
.floating_banner.kakao_channel .icon_img {
  width: 40px;
  height: 40px;
}
.floating_banner.kakao_channel .banner_cont {
  background: #ffffff;
  gap: 12px;
}
.floating_banner.kakao_channel .banner_cont .banner_txt {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #132227;
}
.floating_banner.kakao_channel .banner_cont .banner_txt .pc_on {
  display: inline-block;
}

.pc_on {
  display: block;
}

.m_on {
  display: none;
}

.xs_on {
  display: none;
}

.wd_100 {
  width: 100%;
}

.page_tit {
  margin-bottom: 60px;
}
.page_tit .tit_txt {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #132227;
  text-align: center;
}
.page_tit .desc_txt {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
  text-align: center;
}
.page_tit .desc_txt.gray {
  color: #96A1A4;
}
.page_tit .link_txt {
  color: #1A84EA;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: underline;
}
.page_tit .page_txt {
  color: #1A84EA;
}
.page_tit .top_notice {
  margin-top: 16px;
  padding: 32px 16px;
  box-shadow: 0px 20px 40px -10px rgba(19, 34, 39, 0.05);
  border-radius: 10px;
  background-color: #F4FAFF;
  border: 2px solid #BADDFD;
}
.page_tit .top_notice .tit_txt {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
  color: #1A84EA;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}
.page_tit .top_notice .tit_txt .ico {
  display: block;
  width: 28px;
  height: 28px;
}
.page_tit .top_notice .sub_txt {
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #1A84EA;
}

.profile_box {
  position: relative;
}
.profile_box .login_info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: start;
  flex-wrap: wrap;
  gap: 8px;
}
.profile_box .login_info .name_box {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #132227;
}
.profile_box .login_info .name_box .point {
  color: #1A84EA;
}
.profile_box .login_info .name {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #132227;
}
.profile_box .login_info .desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.profile_box .login_info .id_info {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.profile_box .login_info .id_info img {
  width: 20px;
  height: 20px;
}
.profile_box .login_info .id_info .id {
  color: #7D878B;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}
.profile_box .login_info .link_account {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #1A84EA;
}
.profile_box .login_info .link_account:after {
  position: absolute;
  right: -16px;
  top: 50%;
  margin-top: -8px;
  display: block;
  width: 16px;
  height: 16px;
  background-image: url("../images/chevron-right-blue.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  content: "";
}
.profile_box .date_txt {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid #1A84EA;
  color: #1A84EA;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.empty_box {
  padding: 160px 0;
  text-align: center;
}
.empty_box .txt {
  color: #4A5457;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
}
.empty_box .sub {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}

.top_banner {
  padding: 24px 16px;
  background: var(--blue-gradient, linear-gradient(119deg, #3EA0FF 5.15%, #1682EB 52.58%));
}
.top_banner .banner_cont {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  max-width: 1108px;
  margin: 0 auto;
}
.top_banner .banner_cont .left_txt {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #ffffff;
}
.top_banner .banner_cont .right_txt {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.top_banner .banner_cont .ico {
  flex-shrink: 0;
  display: block;
  width: 24px;
  height: 24px;
}

.open_banner {
  z-index: 99;
  width: 72px;
  height: 72p;
  position: fixed;
  top: auto;
  right: 32px;
  bottom: 87px;
  left: auto;
}

.login_box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: normal;
  flex-wrap: wrap;
  gap: 60px;
}
.login_box .page_tit {
  margin-bottom: 0;
}
.login_box .page_tit .info_txt {
  text-align: center;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #96A1A4;
}
.login_box .login_form {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: normal;
  flex-wrap: wrap;
  gap: 24px;
}
.login_box .tooltip_box {
  position: absolute;
  top: -6px;
  right: -105%;
  bottom: auto;
  left: auto;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  width: 72px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background-color: #132227;
  border-radius: 8px;
  color: #ffffff;
  white-space: nowrap;
  box-shadow: 0px 0px 12px rgba(19, 34, 39, 0.2);
}
.login_box .tooltip_box:after {
  display: block;
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: -8px;
  margin-top: -6px;
  width: 8px;
  height: 12px;
  background-image: url("../images/tail.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  content: "";
}
.login_box .tooltip_box.bottom {
  position: absolute;
  top: -35px;
  right: auto;
  bottom: auto;
  left: 50%;
  margin-left: -36px;
}
.login_box .tooltip_box.bottom:after {
  top: auto;
  bottom: -10px;
  left: 50%;
  margin-left: -3px;
  transform: rotate(-90deg);
}
.login_box .tooltip_box.top {
  position: absolute;
  top: 53px;
  right: auto;
  bottom: auto;
  left: 50%;
  margin-left: -36px;
}
.login_box .tooltip_box.top:after {
  top: -4px;
  left: 50%;
  margin-left: -3px;
  transform: rotate(90deg);
}
.login_box .box_input {
  overflow: visible;
  position: relative;
}
.login_box .box_input .txt_label {
  position: relative;
  display: inline-block;
  color: #4A5457;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.login_box .box_input .view_eye {
  position: relative;
}
.login_box .box_input .view_eye .comm_inp {
  padding-right: 44px;
}
.login_box .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_box .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_box .box_input .state_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}
.login_box .box_input .state_box.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.login_box .box_input .state_box.disabled input {
  pointer-events: none;
}
.login_box .box_input .state_box.disabled button, .login_box .box_input .state_box.disabled a {
  pointer-events: none;
}
.login_box .box_input .state_box .btn_secondary {
  margin-left: auto;
  white-space: nowrap;
}
.login_box .box_input .time_txt {
  color: #1A84EA;
}
.login_box .bottom_btn {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.login_box .bottom_btn .box_btn {
  flex: 1 1 auto;
  cursor: not-allowed;
}
.login_box .bottom_btn .box_btn a {
  display: block;
  width: 100%;
}
.login_box .bottom_btn .box_btn a.disabled {
  pointer-events: none;
}
.login_box .bottom_btn .find_info {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
}
.login_box .bottom_btn .find_info .link_find {
  overflow: hidden;
  display: inline-block;
}
.login_box .bottom_btn .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_box .bottom_btn .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_box .bottom_btn .find_info .link_find a:last-child {
  margin-right: 0;
}
.login_box .bottom_btn .find_info .link_find a:last-child:after {
  display: none;
}
.login_box .bottom_btn .find_info .txt_guide {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
  margin-right: 8px;
}
.login_box .bottom_btn .find_info .link_login {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #4A5457;
}
.login_box .login_sns {
  text-align: center;
}
.login_box .login_sns .link_find {
  overflow: hidden;
  display: inline-block;
  margin-bottom: 36px;
}
.login_box .login_sns .link_find a {
  position: relative;
  float: left;
  padding-right: 8px;
  margin-right: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.login_box .login_sns .link_find a:after {
  width: 1px;
  height: 12px;
  background-color: #4A5457;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -6px;
  content: "";
}
.login_box .login_sns .link_find a:last-child {
  margin-right: 0;
}
.login_box .login_sns .link_find a:last-child:after {
  display: none;
}
.login_box .login_sns .wrap_sns {
  padding-top: 36px;
  border-top: 1px solid #DDE4E6;
}
.login_box .login_sns .wrap_sns .txt {
  display: block;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.login_box .login_sns .sns_box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
}
.login_box .login_sns .sns_box .link_sns {
  display: block;
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 100%;
}
.login_box .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_box .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_box .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_box .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_box .wrap_agree .all_agree {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #DDE4E6;
}
.login_box .wrap_agree .comm_chk {
  margin-bottom: 16px;
}
.login_box .wrap_agree .comm_chk:last-child {
  margin-bottom: 0px;
}
.login_box .wrap_agree .comm_chk .link_cont {
  margin-left: auto;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #7D878B;
}
.login_box .wrap_agree .down_list {
  padding-left: 16px;
}
.login_box .wrap_agree .many_agree {
  margin-bottom: 16px;
}
.login_box .wrap_agree .many_agree:last-child {
  margin-bottom: 0;
}
.login_box .find_account {
  margin-bottom: 40px;
  background-color: #EDF1F1;
  border-radius: 12px;
  padding: 16px;
}
.login_box .find_account .list_account {
  width: 100%;
  text-align: left;
  padding-left: 16px;
}
.login_box .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_box .find_account .list_account li:last-child {
  margin-bottom: 0;
}
.login_box .withdrawal_txt {
  margin-bottom: 32px;
  margin-top: -8px;
  padding-left: 16px;
}
.login_box .withdrawal_txt li {
  margin-bottom: 12px;
  list-style-type: disc;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.login_box .withdrawal_txt li:last-child {
  margin-bottom: 0;
}
.login_box .withdrawal_agree {
  margin-bottom: 32px;
}
.login_box .withdrawal_agree .label_txt {
  color: #1A84EA;
}
.login_box .id_box {
  padding: 36px;
  background-color: #f8fbfb;
  border-radius: 10px;
  border: 1px solid #EDF1F1;
  box-shadow: 0px 20px 40px -10px rgba(19, 34, 39, 0.05);
}
.login_box .id_box .list_id li {
  margin-top: 16px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
  word-break: break-all;
}
.login_box .id_box .list_id li:first-child {
  margin-top: 0;
}
.login_box .id_box .list_id li .ico {
  width: 24px;
  height: 24px;
}
.login_box .id_box .dormancy_box {
  margin-top: 32px;
}
.login_box .id_box .dormancy_box:first-child {
  margin-top: 0;
}
.login_box .id_box .dormancy_box .tit_txt {
  display: block;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.login_box .id_box .dormancy_box .date_txt {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}

.ticekt_cont {
  margin-top: 60px;
}
.ticekt_cont:first-child {
  margin-top: 0;
}
.ticekt_cont .ticekt_tit {
  display: block;
  margin-bottom: 24px;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}
.ticekt_cont .tit_box {
  margin-bottom: 40px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.ticekt_cont .tit_box .tit_txt {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}
.ticekt_cont .tit_box .right_txt {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
  margin-left: auto;
}
.ticekt_cont .ticekt_detail {
  box-shadow: 0px 20px 40px -10px rgba(19, 34, 39, 0.05);
  padding: 36px;
  border: 1px solid #EDF1F1;
  border-radius: 10px;
  background-color: #ffffff;
}
.ticekt_cont .ticekt_detail .inner {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  margin-top: 24px;
}
.ticekt_cont .ticekt_detail .inner .tit {
  color: #4A5457;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.ticekt_cont .ticekt_detail .inner .detail {
  margin-left: auto;
  color: #132227;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.ticekt_cont .ticekt_detail .inner .detail .ico {
  width: 18px;
  height: 18px;
}
.ticekt_cont .ticekt_detail .inner:first-child {
  margin-top: 0;
}
.ticekt_cont .ticekt_detail .inner.payment {
  padding-top: 36px;
  margin-top: 36px;
  border-top: 1px solid #DDE4E6;
}
.ticekt_cont .ticekt_detail .inner.payment .tit {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.ticekt_cont .ticekt_detail .inner.payment .detail {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: #1A84EA;
}
.ticekt_cont .ticekt_detail .box_notice {
  margin-top: 16px;
  padding: 10px;
}
.ticekt_cont .ticekt_detail .box_notice .list_notice li {
  color: #7D878B;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  list-style: disc;
}
.ticekt_cont .option_ticket.pay {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.ticekt_cont .option_ticket.pay .link_option {
  flex: 1;
  height: 120px;
  margin-bottom: 0;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.ticekt_cont .option_ticket.pay .link_option .ico {
  width: 24px;
  height: 24px;
}
.ticekt_cont .link_option {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  box-shadow: 0px 20px 40px -10px rgba(19, 34, 39, 0.05);
  border-radius: 10px;
  border: 1px solid #EDF1F1;
  margin-bottom: 20px;
  padding: 32px 36px;
}
.ticekt_cont .link_option.pay_amount {
  background-color: #f8fbfb;
  padding: 36px;
}
.ticekt_cont .link_option:last-child {
  margin-bottom: 0;
}
.ticekt_cont .link_option.select {
  border: 1px solid #1A84EA;
}
.ticekt_cont .link_option.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ticekt_cont .link_option .tit_txt {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.ticekt_cont .link_option .price_txt {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.ticekt_cont .link_option .price_txt.blue {
  color: #1A84EA;
}
.ticekt_cont .link_option .circular_txt {
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #96A1A4;
}
.ticekt_cont .link_option .sale_txt {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  text-decoration-line: line-through;
  color: #7D878B;
}
.ticekt_cont .link_option .right_area {
  margin-left: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.ticekt_cont .link_option .purchase_quantity {
  display: none;
  width: 100%;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid #DDE4E6;
}
.ticekt_cont .link_option .purchase_quantity button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.ticekt_cont .link_option .purchase_quantity .nub_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}
.ticekt_cont .link_option .purchase_quantity .nub_box .box_input {
  width: 96px;
}
.ticekt_cont .link_option .purchase_quantity .nub_box .box_input input {
  text-align: center;
}
.ticekt_cont .link_option .purchase_quantity .num_txt {
  margin-left: auto;
  color: #96A1A4;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.curation_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  overflow: auto; /* 스크롤 기능 유지 */
  -ms-overflow-style: none; /* IE, Edge */
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch; /* iOS 부드럽게 */
  margin: 16px -16px 0;
}
.curation_box::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
.curation_box .list_curation {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0px;
  width: 100%;
  flex-wrap: nowrap;
  padding: 0 16px;
}
.curation_box .list_curation li .link_cont {
  display: block;
}
.curation_box .list_curation li .tumb_box {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  display: inline-block;
}
.curation_box .list_curation li .tumb_box .video_time {
  position: absolute;
  top: auto;
  right: 8px;
  bottom: 4px;
  left: auto;
  padding: 2px 4px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 4px;
  background-color: #132227;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #ffffff;
}
.curation_box .list_curation li .tumb_box .video_time .ico {
  width: 12px;
  height: 12px;
}
.curation_box .list_curation li .tumb_box .label {
  position: absolute;
  top: 8px;
  right: auto;
  bottom: auto;
  left: 0px;
  padding: 4px 8px;
  border-radius: 0 20px 20px 0;
  background: rgba(249, 79, 0, 0.4);
  backdrop-filter: blur(5px);
}
.curation_box .list_curation li .tumb_box .label .txt {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #ffffff;
}
.curation_box .list_curation li .txt_box {
  margin-top: 12px;
  margin-bottom: 12px;
}
.curation_box .list_curation li .txt_box .tit {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.curation_box .list_curation li .txt_box .tit .point {
  color: #1A84EA;
}
.curation_box .list_curation li .txt_box .sub_txt {
  margin-top: 4px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #96A1A4;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.curation_box .list_curation li .progress_box {
  margin-top: 12px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  /* 배경 바 스타일 */
  /* 진행 상태 스타일 */
}
.curation_box .list_curation li .progress_box progress {
  flex: 1;
  width: 100%;
  height: 8px;
  border-radius: 12px;
}
.curation_box .list_curation li .progress_box progress::-webkit-progress-bar {
  background-color: #DDE4E6;
  border-radius: 12px;
}
.curation_box .list_curation li .progress_box progress::-webkit-progress-value {
  background-color: #1A84EA;
  border-radius: 12px;
}
.curation_box .list_curation li .progress_box .progress_txt {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #1A84EA;
  margin-left: auto;
}
.curation_box .list_curation.video {
  gap: 40px;
}
.curation_box .list_curation.video li {
  min-width: 343px;
  width: 343px;
}
.curation_box .list_curation.video li:nth-child(n+4) {
  display: none;
}
.curation_box .list_curation.masterpiece {
  gap: 25px;
}
.curation_box .list_curation.masterpiece li {
  min-width: 202px;
  width: 202px;
  border-radius: 15px;
  padding: 24px 12px;
}
.curation_box .list_curation.masterpiece li:nth-child(n+6) {
  display: none;
}
.curation_box .list_curation.masterpiece li.red {
  background-color: #AF3630;
}
.curation_box .list_curation.masterpiece li.black {
  background-color: #2B2414;
}
.curation_box .list_curation.masterpiece li.orange {
  background-color: #D34E4A;
}
.curation_box .list_curation.masterpiece li.green {
  background-color: #80C98A;
}
.curation_box .list_curation.masterpiece li.blue {
  background-color: #233C5A;
}
.curation_box .list_curation.masterpiece li .link_cont {
  text-align: center;
}
.curation_box .list_curation.masterpiece li .tumb_box .video_time {
  right: 4px;
}
.curation_box .list_curation.masterpiece li .txt_box {
  margin-top: 16px;
  margin-bottom: 0;
}
.curation_box .list_curation.masterpiece li .txt_box .tit {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #ffffff;
}
.curation_box .list_curation.masterpiece li .txt_box .sub_txt {
  border-top: 1px solid rgba(248, 251, 251, 0.5);
  margin-top: 16px;
  padding-top: 16px;
  gap: 4px;
  flex-direction: column;
}
.curation_box .list_curation.masterpiece li .txt_box .sub_txt p {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #ffffff;
}
.curation_box .list_curation.expression {
  gap: 23px;
}
.curation_box .list_curation.expression li {
  min-width: 260px;
  width: 260px;
}
.curation_box .list_curation.expression li:nth-child(n+5) {
  display: none;
}
.curation_box .list_curation.weekly {
  gap: 25px;
}
.curation_box .list_curation.weekly li {
  min-width: 202px;
  width: 202px;
}
.curation_box .list_curation.weekly li:nth-child(n+6) {
  display: none;
}
.curation_box .list_curation.weekly .link_cont {
  position: relative;
}
.curation_box .list_curation.weekly .txt_box {
  position: absolute;
  top: auto;
  right: auto;
  bottom: 12px;
  left: 0;
  margin: 0;
  padding: 0 8px;
}
.curation_box .list_curation.weekly .txt_box .tit {
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.curation_box .list_curation.weekly .txt_box .time {
  margin-top: 4px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  color: #96A1A4;
}
.curation_box .list_curation.weekly .txt_box .time .ico {
  width: 12px;
  height: 12px;
}
.curation_box .list_curation.write {
  gap: 40px;
}
.curation_box .list_curation.write li {
  min-width: 343px;
  width: 343px;
}
.curation_box .list_curation.write li:nth-child(n+4) {
  display: none;
}
.curation_box .list_curation.write li .tumb_box .label {
  background: rgba(0, 187, 250, 0.6);
}
.curation_box .list_curation.write .tit {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #132227;
  display: block;
  margin-top: 12px;
  margin-bottom: 12px;
}
.curation_box .list_curation.audio {
  gap: 39px;
}
.curation_box .list_curation.audio li {
  min-width: 125px;
  width: 125px;
}
.curation_box.no_scroll {
  margin: 0;
  overflow: hidden;
  margin: 0 -20px;
}
.curation_box.no_scroll.no_margin {
  margin: 0;
}
.curation_box.no_scroll .list_curation {
  padding: 0;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0;
}
.curation_box.no_scroll .list_curation li {
  width: 33.333%;
  min-width: auto;
  margin-top: 16px;
  padding: 0 20px;
}
.curation_box.no_scroll .list_curation li:nth-child(n+4) {
  display: block;
}
.curation_box.no_scroll .list_curation li .txt_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px;
  flex-wrap: nowrap;
}
.curation_box.no_scroll .list_curation li .txt_box .tit {
  -webkit-line-clamp: 2;
}
.curation_box.no_scroll .list_curation li .book_mark {
  margin-left: auto;
}
.curation_box.no_scroll .list_curation li .book_mark .btn_mark {
  display: block;
  width: 28px;
  height: 28px;
  background-image: url("../images/bookmark.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 16px 19px;
  font-size: 0;
  text-indent: -99999em;
}
.curation_box.no_scroll .list_curation li .book_mark .btn_mark.on {
  background-image: url(../images/bookmark-blue.svg);
}
.curation_box.no_scroll .list_curation.audio {
  gap: 0;
}
.curation_box.no_scroll .list_curation.audio li {
  width: 16.666%;
}
.curation_box.no_scroll .list_curation.book li {
  border-top: 1px solid #DDE4E6;
  width: 100%;
  padding: 0;
  margin-top: 0;
}
.curation_box.no_scroll .list_curation.book li:first-child {
  border-top: 0;
}
.curation_box.no_scroll .list_curation.book li .link_cont {
  padding: 36px 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 36px;
  flex-wrap: nowrap;
}
.curation_box.no_scroll .list_curation.book li .tumb_box {
  max-width: 240px;
  flex: 1;
  flex: 0 0 auto;
}
.curation_box.no_scroll .list_curation.book li .txt_box {
  min-width: 0;
  display: block;
  margin: 0;
}
.curation_box.no_scroll .list_curation.book li .txt_box .book_mark {
  display: none;
}
.curation_box.no_scroll .list_curation.book li .txt_box .article {
  display: block;
  margin-top: 8px;
  color: #96A1A4;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.curation_box.no_scroll .list_curation.book li .txt_box .cont_txt {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #646D71;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
}
.curation_box.no_scroll .list_curation.book li .txt_box .cont_txt .point {
  color: #1A84EA;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.curation_box.visible {
  overflow: visible;
}

.wrap_page {
  background-color: #ffffff;
}
.wrap_page.ticket {
  background-color: #f8fbfb;
}
.wrap_page.ticket .box_ticket {
  box-shadow: 0px 20px 40px -10px rgba(19, 34, 39, 0.05);
  padding: 60px 36px;
  border-radius: 20px;
  background: #ffffff;
}
.wrap_page.ticket .box_ticket .division_line {
  padding-top: 60px;
  border-bottom: 1px solid #DDE4E6;
}
.wrap_page.ticket .box_ticket .bottom_btn {
  margin-top: 60px;
}
.wrap_page.ticket .bottom_notice {
  margin-top: 60px;
  text-align: center;
}
.wrap_page.ticket .bottom_notice .notice_txt {
  color: #7D878B;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}
.wrap_page.ticket .bottom_notice .notice_txt .link_txt {
  color: #1A84EA;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  text-decoration: underline;
}
.wrap_page.privacy .tit_box {
  margin-bottom: 36px;
}
.wrap_page.privacy .tit_box .tit {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
}
.wrap_page.privacy .list_privacy > li {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 36px;
}
.wrap_page.privacy .list_privacy > li:last-child {
  padding-bottom: 0;
}
.wrap_page.privacy .list_privacy .tit {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: #132227;
}
.wrap_page.privacy .list_privacy .txt {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.wrap_page.privacy .list_privacy .sub_tit {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #4A5457;
}
.wrap_page.privacy .list_privacy .sub_txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.wrap_page.privacy .list_privacy .link_txt {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-decoration: underline;
  color: #1A84EA;
}
.wrap_page.privacy .list_privacy .noti_txt {
  padding-top: 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.wrap_page.privacy .list_privacy .dot {
  position: relative;
  padding-left: 13px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.wrap_page.privacy .list_privacy .dot:before {
  display: block;
  position: absolute;
  top: 6px;
  left: 0;
  width: 5px;
  height: 5px;
  background-color: #4A5457;
  border-radius: 100%;
  content: "";
}
.wrap_page.privacy .list_privacy .list_disc {
  padding-left: 18px;
}
.wrap_page.privacy .list_privacy .list_disc li {
  color: #4A5457;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  list-style: disc;
}
.wrap_page.privacy .list_privacy .list_num {
  padding-left: 20px;
}
.wrap_page.privacy .list_privacy .list_num li {
  list-style: auto;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.wrap_page.alarm .list_alarm li .link_wrap {
  padding: 16px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: norwap;
  gap: 16px;
}
@media (hover: hover) and (pointer: fine) {
  .wrap_page.alarm .list_alarm li .link_wrap:hover .campus_header .list_alarm .link_wrap {
    background-color: #EDF1F1;
  }
}
.wrap_page.alarm .list_alarm li .alarm_cont {
  overflow: hidden;
  text-align: left;
}
.wrap_page.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%;
}
.wrap_page.alarm .list_alarm li .alarm_cont .state .circle, .wrap_page.alarm .list_alarm li .alarm_cont .state .circle2 {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background-color: #EB4545;
}
.wrap_page.alarm .list_alarm li .alarm_cont .state .circle.read, .wrap_page.alarm .list_alarm li .alarm_cont .state .circle2.read {
  background-color: #C7D0D2;
}
.wrap_page.alarm .list_alarm li .alarm_cont .state .txt {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.wrap_page.alarm .list_alarm li .alarm_cont .alarm_tit {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.wrap_page.alarm .list_alarm li .alarm_cont .alarm_txt {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.wrap_page.alarm .list_alarm li .alarm_cont .alarm_txt.tit {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.wrap_page.alarm .list_alarm li .link_go {
  margin-top: 6px;
  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;
}
.wrap_page.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: "";
}
.wrap_page.alarm .list_alarm li .thumb {
  margin-left: auto;
  min-width: 60px;
}
@media (hover: hover) and (min-width: 1080px) {
  .wrap_page.alarm .list_alarm li:hover {
    background-color: #EDF1F1;
  }
}
.wrap_page.alarm .list_alarm li:active {
  background-color: #EDF1F1;
}
.wrap_page.alarm .page_tit {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  margin-bottom: 40px;
}
.wrap_page.alarm .page_tit .tit_txt {
  text-align: left;
}
.wrap_page.alarm .page_tit .btn_tertiary {
  margin-left: auto;
}
.wrap_page.alarm .comming_soon {
  padding: 120px 0 160px;
}
.wrap_page.login {
  background-color: #f8fbfb;
}
.wrap_page.login .container_md {
  padding-top: 120px;
}
.wrap_page.login .login_box {
  padding: 120px 60px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0px 20px 40px -10px rgba(19, 34, 39, 0.05);
}
.wrap_page.mypage .h1_tit {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
}
.wrap_page.mypage .page_tit .desc_txt br {
  display: none;
}
.wrap_page.mypage .page_tit .id_box {
  padding: 16px;
  margin-top: 24px;
  border-radius: 12px;
  background-color: #EDF1F1;
}
.wrap_page.mypage .page_tit .id_box .list_id {
  margin-left: 16px;
}
.wrap_page.mypage .page_tit .id_box .list_id li {
  margin-top: 8px;
  color: #132227;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  list-style: disc;
}
.wrap_page.mypage .page_tit .id_box .list_id li:first-child {
  margin-top: 0;
}
.wrap_page.mypage .ticket_box {
  margin-top: 20px;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid #EDF1F1;
  background-color: #ffffff;
  box-shadow: 0px 20px 40px -10px rgba(19, 34, 39, 0.05);
}
.wrap_page.mypage .ticket_box .inner {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.wrap_page.mypage .ticket_box .inner .margin_left {
  margin-left: auto;
}
.wrap_page.mypage .ticket_box .inner .ticket_name {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.wrap_page.mypage .ticket_box .inner .tit {
  color: #4A5457;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}
.wrap_page.mypage .ticket_box .inner .txt {
  color: #132227;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
}
.wrap_page.mypage .ticket_box .inner.ticket {
  margin-bottom: 16px;
}
.wrap_page.mypage .ticket_box .inner:last-child {
  margin-bottom: 0;
}
.wrap_page.mypage .banner_box {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  border-radius: 10px;
  padding: 32px 16px;
  background: var(--blue-gradient, linear-gradient(119deg, #3EA0FF 5.15%, #1682EB 52.58%));
}
.wrap_page.mypage .banner_box .txt_box .sub {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #E2F2FF;
}
.wrap_page.mypage .banner_box .txt_box .tit {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #ffffff;
}
.wrap_page.mypage .banner_box .txt_box .tit br {
  display: none;
}
.wrap_page.mypage .banner_box .btn_white {
  margin-left: auto;
}
.wrap_page.mypage .my_item {
  margin-top: 60px;
}
.wrap_page.mypage .my_item .heading_txt {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}
.wrap_page.mypage .my_item .sub_tit1 {
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.wrap_page.mypage .my_item .sub_txt {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #96A1A4;
}
.wrap_page.mypage .my_item .item_tit {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #96A1A4;
}
.wrap_page.mypage .my_item .body2_txt {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.wrap_page.mypage .my_item .link_item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 0;
  width: 100%;
  border-bottom: 1px solid #DDE4E6;
}
.wrap_page.mypage .my_item .link_item:last-child {
  border-bottom: 0 none;
}
.wrap_page.mypage .my_item .link_item .tit {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}
.wrap_page.mypage .my_item .link_item .sub_tit {
  width: 72px;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #7D878B;
}
.wrap_page.mypage .my_item .link_item .body_txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}
.wrap_page.mypage .my_item .link_item .body_txt.gray {
  color: #7D878B;
}
.wrap_page.mypage .my_item .link_item .right_arr {
  margin-left: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.wrap_page.mypage .my_item .link_item .right_arr .chevron_right {
  width: 16px;
  height: 16px;
  background-size: 5px auto;
}
.wrap_page.mypage .my_item .link_item .right_arr .chevron_right_blue {
  width: 16px;
  height: 16px;
}
.wrap_page.mypage .my_item .link_item .right_arr .blue_txt {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #1A84EA;
}
.wrap_page.mypage .list_secession {
  padding-left: 16px;
}
.wrap_page.mypage .list_secession li {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  margin-top: 12px;
  list-style: disc;
  color: #4A5457;
}
.wrap_page.mypage .list_secession li:first-child {
  margin-top: 0;
}
.wrap_page.mypage .agree_chk {
  margin: 60px 0;
}
.wrap_page.mypage .agree_chk .label_txt {
  color: #1A84EA;
}
.wrap_page.mypage .secession_btn {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 16px;
}
.wrap_page.mypage .secession_btn a {
  flex: 1;
}
.wrap_page.mypage .alarm_notice {
  margin-top: 60px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #1A84EA;
}
.wrap_page.mypage .no_ticket {
  margin-bottom: 60px;
  border: 1px solid #C7D0D2;
  background-color: #EDF1F1;
  border-radius: 10px;
  padding: 24px 16px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
}
.wrap_page.mypage .no_ticket .txt {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.wrap_page.mypage .no_ticket .btn_secondary {
  margin-left: auto;
  background-color: #EDF1F1;
}
.wrap_page.mypage .receipt_box {
  margin-top: 40px;
  border-radius: 12px;
  border: 1px solid #EDF1F1;
  background-color: #ffffff;
  box-shadow: 0px 20px 40px -10px rgba(19, 34, 39, 0.05);
  padding: 36px;
}
.wrap_page.mypage .receipt_box .tag_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.wrap_page.mypage .receipt_box .tag_box .date_txt {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #7D878B;
}
.wrap_page.mypage .receipt_box .tag_box .btn_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.wrap_page.mypage .receipt_box .tit_box {
  margin-top: 16px;
}
.wrap_page.mypage .receipt_box .tit_box .ticekt_tit {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: #132227;
}
.wrap_page.mypage .receipt_box .tit_box .sub_txt {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.wrap_page.mypage .receipt_box .list_history {
  margin-top: 16px;
  padding: 16px 0;
  border-top: 1px solid #DDE4E6;
  border-bottom: 1px solid #DDE4E6;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
}
.wrap_page.mypage .receipt_box .list_history .inner {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0px;
}
.wrap_page.mypage .receipt_box .list_history .inner .tit {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.wrap_page.mypage .receipt_box .list_history .inner .cont_area {
  margin-left: auto;
  text-align: right;
}
.wrap_page.mypage .receipt_box .list_history .inner .cont_area .txt {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.wrap_page.mypage .receipt_box .list_history .inner .cont_area .price {
  color: #1A84EA;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.wrap_page.mypage .receipt_box .list_history .inner .cont_area .id_info {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.wrap_page.mypage .receipt_box .list_history .inner .cont_area .id_info .icon {
  width: 18px;
  height: 18px;
}
.wrap_page.mypage .receipt_box .list_history .inner .cont_area .ticket_list .ticekt_txt {
  display: block;
  text-align: right;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.wrap_page.mypage .receipt_box .reciept_notice {
  margin-top: 16px;
  background-color: #f8fbfb;
  border-radius: 10px;
}
.wrap_page.mypage .receipt_box .reciept_notice .list_txt {
  padding: 10px 10px 10px 20px;
}
.wrap_page.mypage .receipt_box .reciept_notice .list_txt li {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
  list-style: disc;
}
.wrap_page.mypage .receipt_box .bottom_btn {
  margin-top: 16px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.wrap_page.mypage .receipt_box .bottom_btn a {
  flex: 1;
}
.wrap_page.mypage .more_btn {
  margin-top: 40px;
  text-align: center;
}
.wrap_page.mypage .more_btn .btn_tertiary {
  background-color: #f8fbfb;
}
.wrap_page.mypage.payment {
  background-color: #f8fbfb;
}
.wrap_page.mypage.payment .page_tit {
  margin-bottom: 20px;
}
.wrap_page.mypage.payment .page_tit .tit_txt {
  text-align: left;
}
.wrap_page.mypage.payment .box_tab {
  margin-top: 60px;
}
.wrap_page.mypage.use .top_cont {
  background-color: #f8fbfb;
}
.wrap_page.mypage.use .top_cont .container_md {
  padding-bottom: 80px;
}
.wrap_page.mypage.use .top_cont .tit_txt {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #132227;
}
.wrap_page.mypage.use .top_cont .tit_txt .point {
  color: #1A84EA;
}
.wrap_page.mypage.use .top_cont .tit_txt br {
  display: none;
}
.wrap_page.mypage.use .top_cont .login_box {
  margin-top: 40px;
}
.wrap_page.mypage.use .top_cont .login_box .btn_primary {
  padding: 0;
  width: 91px;
}
.wrap_page.mypage.use .page_tit {
  margin-bottom: 20px;
}
.wrap_page.mypage.use .page_tit .tit_txt, .wrap_page.mypage.use .page_tit .desc_txt {
  text-align: left;
}
.wrap_page.mypage.use .empty_box {
  margin-top: 40px;
}
.wrap_page.mypage.use .receipt_box.send {
  margin-top: 0;
  margin-bottom: 60px;
}
.wrap_page.mypage.use .receipt_box .tit_box {
  margin-top: 8px;
}
.wrap_page.mypage.use .receipt_box .list_history {
  border: 0 none;
  padding: 0;
  gap: 12px;
}
.wrap_page.mypage.use .receipt_box .list_history.option {
  margin-top: 0;
}
.wrap_page.mypage.use .receipt_box .textarea_box {
  margin-top: 16px;
}
.wrap_page.mypage.use .receipt_box .textarea_box textarea {
  padding: 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  height: 120px;
  width: 100%;
  resize: none;
}
.wrap_page.mypage.use .more_btn {
  margin-top: 60px;
}
.wrap_page.mypage.use .more_btn .btn_tertiary {
  background-color: #ffffff;
}
.wrap_page.target {
  background-color: #f8fbfb;
}
.wrap_page.target br.xs_on {
  display: none;
}
.wrap_page.target .main_tit .tit_txt {
  text-align: left;
  font-size: 32px;
  font-weight: 700;
  line-height: 42px;
}
.wrap_page.target .main_tit .tit_txt .point {
  color: #1A84EA;
}
.wrap_page.target .main_tit .desc_txt {
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  margin-top: 12px;
  color: #96A1A4;
}
.wrap_page.target .page_tit {
  margin-bottom: 40px;
  margin-top: 80px;
}
.wrap_page.target .page_tit .tit_txt {
  text-align: left;
}
.wrap_page.target .page_tit .desc_txt {
  text-align: left;
}
.wrap_page.target .no_ticket {
  margin: 0;
}
.wrap_page.target .receipt_box .target_tit {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
}
.wrap_page.target .receipt_box .target_tit .tit {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: #132227;
}
.wrap_page.target .receipt_box .target_tit .btn_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.wrap_page.target .receipt_box .percent_info {
  margin-top: 24px;
}
.wrap_page.target .receipt_box .percent_info .num {
  font-size: 40px;
  font-weight: 700;
  line-height: 52px;
  display: block;
  color: #1A84EA;
}
.wrap_page.target .receipt_box .percent_info .txt {
  margin-top: 8px;
  color: #7D878B;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.wrap_page.target .receipt_box .percent_info .txt .point {
  color: #1A84EA;
}
.wrap_page.target .receipt_box .progress_box {
  margin-top: 24px;
  /* 배경 바 스타일 */
  /* 진행 상태 스타일 */
}
.wrap_page.target .receipt_box .progress_box progress {
  width: 100%;
  height: 12px;
  border-radius: 12px;
}
.wrap_page.target .receipt_box .progress_box progress::-webkit-progress-bar {
  background-color: #DDE4E6;
  border-radius: 12px;
}
.wrap_page.target .receipt_box .progress_box progress::-webkit-progress-value {
  background-color: #1A84EA;
  border-radius: 12px;
}
.wrap_page.target .receipt_box .progress_box .d_day {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  margin-top: 8px;
}
.wrap_page.target .receipt_box .progress_box .d_day .day_txt {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #7D878B;
}
.wrap_page.target .receipt_box .progress_box .d_day .current_num {
  color: #7D878B;
  margin-left: auto;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.wrap_page.target .receipt_box .progress_box .d_day .current_num .point {
  color: #1A84EA;
}
.wrap_page.target .receipt_box .target_set {
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid #DDE4E6;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
}
.wrap_page.target .receipt_box .target_set .txt {
  padding-left: 18px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #7D878B;
  background-image: url("../images/ico-chk.svg");
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 14px 11px;
}
.wrap_page.target .receipt_box .target_set .btn_primary {
  margin-left: auto;
}
.wrap_page.target .routine_box .tit {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #7D878B;
  display: block;
  margin-bottom: 8px;
}
.wrap_page.target .routine_box .receipt_box {
  margin-top: 0;
}
.wrap_page.target .date_select {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
}
.wrap_page.target .date_select .option_box {
  margin-bottom: 0;
  flex: 1;
  height: 56px;
}
.wrap_page.target .btn_save {
  margin-top: 80px;
}
.wrap_page.target .time-picker {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.wrap_page.target .time-picker .spinner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  text-align: center;
}
.wrap_page.target .time-picker .spinner.hour {
  width: 42px;
}
.wrap_page.target .time-picker .spinner.minute {
  width: 48px;
}
.wrap_page.target .time-picker .spinner.ampm {
  width: 58px;
}
.wrap_page.target .time-picker .spinner button {
  width: 36px;
  height: 36px;
}
.wrap_page.target .time-picker .spinner-value {
  font-size: 36px;
  font-weight: 700;
  line-height: 46px;
  color: #1A84EA;
}
.wrap_page.target .time-picker .colon {
  font-size: 36px;
  font-weight: 700;
  line-height: 46px;
  color: #B0BBBE;
  font-family: "Spoqa Han Sans Neo";
}
.wrap_page.main.bg_gray {
  background-color: #EDF1F1;
}
.wrap_page.main.bg_blue {
  background-color: #E2F2FF;
}
.wrap_page.main.bg_blue .container_xl {
  padding-top: 40px;
  padding-bottom: 30px;
}
.wrap_page.main .hero_cont {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0px;
}
.wrap_page.main .hero_swiper {
  max-width: 800px;
}
.wrap_page.main .hero_swiper .swiper-slide {
  border-radius: 12px;
}
.wrap_page.main .hero_swiper .swiper-slide .link_cont {
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: 0px 20px 40px -10px rgba(19, 34, 39, 0.05);
  border-radius: 12px;
}
.wrap_page.main .hero_swiper .swiper-slide .link_cont img {
  width: 100%;
  height: auto;
}
.wrap_page.main .hero_swiper .swiper-slide .txt_box {
  position: absolute;
  top: auto;
  right: auto;
  bottom: 16px;
  left: 0;
  width: 100%;
  z-index: 2;
}
.wrap_page.main .hero_swiper .swiper-slide .txt_box .tit {
  display: block;
  padding: 0 24px;
  width: 100%;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
}
.wrap_page.main .hero_swiper .swiper-slide .txt_box .txt {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 24px;
}
.wrap_page.main .hero_swiper .swiper-slide .txt_box .txt .ico {
  width: 12px;
  height: 15px;
}
.wrap_page.main .hero_swiper .swiper-slide .txt_box .txt p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #96A1A4;
}
.wrap_page.main .hero_swiper .swiper-slide .dimmed {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, #000 100%);
  z-index: 1;
  border-radius: 0 0 12px 12px;
}
.wrap_page.main .hero_swiper .circle_prev {
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 24px;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  z-index: 5;
  cursor: pointer;
}
.wrap_page.main .hero_swiper .circle_next {
  position: absolute;
  top: 50%;
  right: 24px;
  bottom: auto;
  left: auto;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  z-index: 5;
  cursor: pointer;
}
.wrap_page.main .hero_side {
  max-width: 280px;
  margin-left: auto;
}
.wrap_page.main .hero_side .swiper-slide {
  display: block;
  width: 100%;
  height: 450px;
  border-radius: 12px;
}
.wrap_page.main .hero_side .swiper-slide .link_cont {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  padding: 64px 24px 46px 24px;
  width: 100%;
  height: 100%;
}
.wrap_page.main .hero_side .swiper-slide.slide1 {
  background-color: #78C0FF;
}
.wrap_page.main .hero_side .swiper-slide.slide1 .tumb {
  width: 200px;
}
.wrap_page.main .hero_side .swiper-slide.slide2 {
  background-color: #D14657;
}
.wrap_page.main .hero_side .swiper-slide.slide2 .tumb {
  width: 200px;
}
.wrap_page.main .hero_side .swiper-slide.slide3 {
  background-color: #1D3164;
}
.wrap_page.main .hero_side .swiper-slide.slide3 .tumb {
  width: 230px;
}
.wrap_page.main .hero_side .swiper-slide .txt_box {
  margin-top: auto;
}
.wrap_page.main .hero_side .swiper-slide .txt_box .tit {
  font-size: 28px;
  font-weight: 700;
  line-height: 38px;
  color: #ffffff;
}
.wrap_page.main .hero_side .swiper-slide .txt_box .tit .yellow {
  color: #ffaf16;
}
.wrap_page.main .hero_side .swiper-slide .txt_box .tit .gray {
  color: #C7D0D2;
}
.wrap_page.main .hero_side .swiper-slide .txt_box .txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #ffffff;
}
.wrap_page.main .hero_side .swiper-slide .txt_box .bar {
  display: none;
}
.wrap_page.main .hero_side .swiper-slide .txt_box .xs_txt {
  display: none;
}
.wrap_page.main .hero_side .wrap_paging {
  width: 100%;
  position: absolute;
  top: auto;
  right: auto;
  bottom: 8px;
  left: 0;
  text-align: center;
}
.wrap_page.main .hero_side .wrap_paging .swiper-pagination {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: auto;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
  padding: 8px 12px;
  display: inline-flex;
  gap: 10px;
}
.wrap_page.main .hero_side .wrap_paging .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: #ffffff;
  margin: 0;
}
.wrap_page.main .hero_side .wrap_paging .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #B0BBBE;
}
.wrap_page.main .ticket_banner {
  display: block;
  text-align: center;
  padding: 24px 16px;
  border-radius: 10px;
  background: linear-gradient(119deg, #3EA0FF 5.15%, #1682EB 52.58%);
}
.wrap_page.main .ticket_banner .txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #E2F2FF;
}
.wrap_page.main .ticket_banner .tit {
  display: block;
  margin-top: 4px;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #ffffff;
}
.wrap_page.main .ticket_banner .tit br {
  display: none;
}
.wrap_page.main .ticket_banner .btn_white {
  margin-top: 8px;
}
.wrap_page.main .cont_tit {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.wrap_page.main .cont_tit .tit {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #132227;
}
.wrap_page.main .cont_tit .sub_txt {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #96A1A4;
}
.wrap_page.main .cont_tit .sub_txt.blue {
  color: #1A84EA;
}
.wrap_page.main .cont_tit .ico_txt {
  margin-right: 8px;
}
.wrap_page.main .cont_tit .link_all {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  margin-left: auto;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #1A84EA;
}
.wrap_page.main .cont_tit .link_all .ico {
  width: 24px;
  height: 24px;
}
.wrap_page.main .cont_tit .blue_txt {
  color: #1A84EA;
}
.wrap_page.main .recent_history {
  margin-top: 60px;
}
.wrap_page.main .recent_history .list_box {
  margin: 0 -16px;
  height: 152px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0px;
  -webkit-overflow-scrolling: touch; /* iOS 부드럽게 */
  overflow: auto; /* 스크롤 기능 유지 */
  -ms-overflow-style: none; /* IE, Edge */
  scrollbar-width: none; /* Firefox */
}
.wrap_page.main .recent_history .list_box::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
.wrap_page.main .recent_history .list_box .list_history {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0 16px;
  flex-wrap: nowrap; /* 줄바꿈 방지 */
}
.wrap_page.main .recent_history .list_box .list_history li {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto; /* 줄어들거나 늘어나지 않게 */
  flex-wrap: nowrap;
  position: relative;
  width: 265px;
  height: 100px;
  padding: 16px 8px;
  border: 1px solid #EDF1F1;
  background-color: #ffffff;
  border-radius: 12px;
  /* 배경 바 스타일 */
  /* 진행 상태 스타일 */
}
.wrap_page.main .recent_history .list_box .list_history li:first-child {
  margin-left: 0;
}
.wrap_page.main .recent_history .list_box .list_history li .img_tumb {
  display: inline-block;
  border-radius: 6px;
  overflow: hidden;
  max-width: 120px;
}
.wrap_page.main .recent_history .list_box .list_history li .txt_box {
  width: 100%;
}
.wrap_page.main .recent_history .list_box .list_history li .txt_box .tit {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #132227;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
}
.wrap_page.main .recent_history .list_box .list_history li .txt_box .link_txt {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #96A1A4;
}
.wrap_page.main .recent_history .list_box .list_history li .txt_box .link_txt .ico {
  display: blcok;
  width: 16px;
  height: 16px;
}
.wrap_page.main .recent_history .list_box .list_history li progress {
  width: 100%;
  margin-top: 8px;
  height: 6px;
  border-radius: 12px;
}
.wrap_page.main .recent_history .list_box .list_history li progress::-webkit-progress-bar {
  background-color: #DDE4E6;
  border-radius: 12px;
}
.wrap_page.main .recent_history .list_box .list_history li progress::-webkit-progress-value {
  background-color: #1A84EA;
  border-radius: 12px;
}
.wrap_page.main .recent_history .list_box .list_history li.vertical .img_tumb {
  max-width: 78px;
  position: absolute;
  top: auto;
  right: auto;
  bottom: 16px;
  left: 8px;
}
.wrap_page.main .recent_history .list_box .list_history li.vertical .txt_box {
  padding-left: 86px;
}
.wrap_page.main .recent_history .list_box .list_history li.horizontal .txt_box {
  max-width: 121px;
}
.wrap_page.main .list_tag {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 24px;
  margin: 24px 0;
  overflow: hidden;
  max-height: 94px;
  transition: max-height 0.2s ease;
}
.wrap_page.main .list_tag.fold {
  max-height: 94px;
  transition: max-height 0.2s ease;
}
.wrap_page.main .list_tag.open {
  max-height: 700px;
  transition: max-height 0.5s ease;
}
.wrap_page.main .list_tag li {
  padding: 0 8px;
  white-space: nowrap;
  text-align: center;
}
.wrap_page.main .list_tag li .link_tag {
  display: inline-block;
}
.wrap_page.main .list_tag li .link_tag img {
  width: 62px;
  border-radius: 100%;
  height: 62px;
}
.wrap_page.main .list_tag li .tag_name {
  margin: 0 -8px;
  display: block;
  text-align: center;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #96A1A4;
}
.wrap_page.main .list_tag li .tag_name.blue {
  color: #1A84EA;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
}
.wrap_page.main .list_tag li .tag_name.yellow {
  color: #b97900;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
}
.wrap_page.main .show_hide {
  text-align: center;
}
.wrap_page.main .show_hide a {
  display: inline-flex;
  align-items: center;
  color: #1A84EA;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.wrap_page.main .show_hide a .ico {
  width: 24px;
  height: 24px;
}
.wrap_page.main .show_hide a.link_up {
  display: none;
}
.wrap_page.main .curation_cont {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 60px;
}
.wrap_page.main .curation_cont .inner {
  width: 100%;
}
.wrap_page.main .hero_bottom {
  display: none;
}
.wrap_page.detail .detail_page .head_txt {
  margin-bottom: 40px;
}
.wrap_page.detail .detail_page .head_txt .date {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #7D878B;
}
.wrap_page.detail .detail_page .head_txt .tit {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #132227;
}
.wrap_page.detail .detail_page .noti_txt {
  margin-top: 40px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.wrap_page.search.bg_blue {
  background-color: #E2F2FF;
}
.wrap_page.search .search_head {
  margin: 0 auto;
  padding-top: 100px;
  padding-bottom: 100px;
}
.wrap_page.search .search_head .tit {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  display: block;
  text-align: center;
  color: #132227;
}
.wrap_page.search .search_head .box_input {
  margin-top: 16px;
}
.wrap_page.search .search_head .box_input input {
  padding-right: 44px;
}
.wrap_page.search .search_head .box_input .ico {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  right: 16px;
  bottom: auto;
  left: auto;
  margin-top: -10px;
}
.wrap_page.search .search_cont {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 80px;
}
.wrap_page.search .search_cont .inner {
  width: 100%;
}
.wrap_page.search .search_cont .search_terms {
  margin-top: 24px;
}
.wrap_page.search .search_cont .search_terms .list_tab {
  gap: 16px;
}
.wrap_page.search .search_cont .search_terms button {
  cursor: default;
}
.wrap_page.search .search_cont .list_curation li .txt_box .tit {
  -webkit-line-clamp: 1;
}
.wrap_page.search .comming_soon {
  padding: 80px 0;
}
.wrap_page.search .head_tit {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding-bottom: 16px;
  border-bottom: 1px solid #DDE4E6;
}
.wrap_page.storage .profile_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
}
.wrap_page.storage .profile_box .login_info {
  min-width: 0; /* 줄바꿈을 위해 필요 */
  flex: 1; /* 가능한 공간을 차지 */
  white-space: normal; /* 텍스트가 줄바꿈 되도록 설정 */
}
.wrap_page.storage .profile_box .login_info .id_info {
  flex-wrap: nowrap;
}
.wrap_page.storage .profile_box .date_txt {
  margin-left: auto;
  position: relative;
}
.wrap_page.storage .wrap_tab {
  margin-top: 60px;
}
.wrap_page.storage .wrap_tab .box_tab {
  overflow: hidden;
  display: flex;
  width: 100%;
  height: auto;
  -webkit-overflow-scrolling: touch;
}
.wrap_page.storage .wrap_tab .box_tab .list_tab {
  display: flex;
  flex-wrap: nowrap;
  width: 110%;
  align-items: flex-start;
  overflow-x: scroll;
  overflow-y: hidden;
  -ms-overflow-style: none; /* IE, Edge */
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch; /* iOS 부드럽게 */
  height: auto;
}
.wrap_page.storage .wrap_tab .box_tab .list_tab::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
.wrap_page.storage .wrap_tab .box_tab .list_tab button, .wrap_page.storage .wrap_tab .box_tab .list_tab a {
  white-space: nowrap;
}
.wrap_page.storage .cont_tit {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
}
.wrap_page.storage .cont_tit .tit {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #132227;
}
.wrap_page.storage .cont_tit.point_txt {
  color: #1A84EA;
}
.wrap_page.storage .cont_tit .btn_tertiary {
  margin-left: auto;
}
.wrap_page.storage .head_tit {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
}
.wrap_page.storage .head_tit .tit {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
}
.wrap_page.storage .head_tit .point_txt {
  color: #1A84EA;
}
.wrap_page.storage .head_tit .btn_tertiary {
  margin-left: auto;
}
.wrap_page.storage .curation_cont {
  margin-top: 60px;
}
.wrap_page.storage .curation_cont .curation_box .list_curation li .txt_box .tit {
  -webkit-line-clamp: 1;
}
.wrap_page.storage .empty_box {
  margin-top: 16px;
  padding: 24px 36px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  border-radius: 10px;
  border: 1px solid #EDF1F1;
  background-color: #f8fbfb;
  box-shadow: 0px 20px 40px -10px rgba(19, 34, 39, 0.05);
}
.wrap_page.storage .empty_box .txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}
.wrap_page.storage .empty_box .btn_primary {
  margin-left: auto;
}
.wrap_page.storage .list_curation.book {
  margin-top: 40px;
}
.wrap_page.storage .list_curation.book li .txt_box {
  width: 100%;
}
.wrap_page.storage .list_curation.book li .txt_box .tit_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 36px;
}
.wrap_page.storage .list_curation.book li .txt_box .tit_box .tit {
  -webkit-line-clamp: none;
}
.wrap_page.storage .list_curation.book li .txt_box .tit_box .more_btn {
  margin-left: auto;
}
.wrap_page.storage .list_curation.book li .txt_box .sub_txt {
  margin-top: 8px;
}
.wrap_page.storage .list_curation.book li .txt_box .progress_box {
  margin-top: 8px;
  margin-bottom: 8px;
  width: calc(100% - 72px);
}
.wrap_page.storage .list_curation.book li .more_box {
  position: relative;
  margin-left: auto;
}
.wrap_page.storage .list_curation.book li .more_box .more_btn {
  display: block;
  width: 24px;
  height: 24px;
}
.wrap_page.storage .list_curation.book li .more_box .more_btn .ico {
  vertical-align: middle;
  width: 24px;
  height: 5px;
}
.wrap_page.storage .list_curation.book li .more_box .menu_layer {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  padding-top: 34px;
  z-index: 10;
}
.wrap_page.storage .list_curation.book li .more_box .menu_layer.active {
  display: block;
}
.wrap_page.storage .list_curation.book li .more_box .menu_layer.active .dimd {
  display: none;
}
.wrap_page.storage .list_curation.book li .more_box .menu_layer .inner_cont {
  width: 240px;
  z-index: 10;
  background-color: #ffffff;
}
.wrap_page.storage .list_curation.book li .more_box .menu_layer .top_info {
  display: none;
}
.wrap_page.storage .list_curation.book li .more_box .menu_layer .menu_box {
  background-color: #ffffff;
  box-shadow: 0px 0px 12px rgba(19, 34, 39, 0.2);
  border-radius: 8px;
  overflow: hidden;
}
.wrap_page.storage .list_curation.book li .more_box .menu_layer .menu_box .list_menu li {
  margin-top: 0;
  border-top: 0;
}
.wrap_page.storage .list_curation.book li .more_box .menu_layer .menu_box .list_menu li .link_menu {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  width: 100%;
}
.wrap_page.storage .list_curation.book li .more_box .menu_layer .menu_box .list_menu li .link_menu:hover {
  background-color: #EDF1F1;
}
.wrap_page.storage .list_curation.book li .more_box .menu_layer .menu_box .list_menu li .link_menu:active {
  background-color: #EDF1F1;
}
.wrap_page.storage .list_curation.book li .more_box .menu_layer .menu_box .list_menu li .link_menu .ico_box {
  width: 20px;
  height: 20px;
}
.wrap_page.storage .list_curation.book li .more_box .menu_layer .menu_box .list_menu li .link_menu .ico_box .ico {
  vertical-align: middle;
}
.wrap_page.storage .list_curation.book li .more_box .menu_layer .menu_box .list_menu li .link_menu .ico_box .play_fill {
  width: 13px;
  height: 17px;
}
.wrap_page.storage .list_curation.book li .more_box .menu_layer .menu_box .list_menu li .link_menu .ico_box .play_fill {
  width: 12px;
  height: 14px;
}
.wrap_page.storage .list_curation.book li .more_box .menu_layer .menu_box .list_menu li .link_menu .ico_box .play_fill {
  width: 18px;
  height: 18px;
}
.wrap_page.storage .list_curation.book li .more_box .menu_layer .menu_box .list_menu li .link_menu .ico_box .play_fill {
  width: 17px;
  height: 18px;
}
.wrap_page.storage .list_curation.book li .more_box .menu_layer .menu_box .list_menu li .link_menu .menu_txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}
.wrap_page.storage .list_curation.book li .more_box .menu_layer .foot_cont {
  display: none;
}
.wrap_page.storage .cont_tab {
  margin-top: 60px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
}
.wrap_page.storage .cont_tab .list_tab {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.wrap_page.storage .cont_tab .date_tab {
  margin-left: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.wrap_page.storage .cont_tab .date_tab li .btn_tab {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.wrap_page.storage .cont_tab .date_tab li .btn_tab.on {
  color: #1A84EA;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
}
.wrap_page.storage .list_study {
  margin-top: 60px;
}
.wrap_page.storage .list_study li {
  margin-top: 48px;
}
.wrap_page.storage .list_study li:first-child {
  margin-top: 0;
}
.wrap_page.storage .list_study li .link_study {
  display: block;
  padding: 32px;
  border-radius: 10px;
  border: 1px solid #EDF1F1;
  box-shadow: 0px 20px 40px -10px rgba(19, 34, 39, 0.05);
  background-color: #ffffff;
}
.wrap_page.storage .list_study li .top_cont {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 16px;
}
.wrap_page.storage .list_study li .top_cont .tumb_box {
  max-width: 160px;
  border-radius: 6px;
  overflow: hidden;
}
.wrap_page.storage .list_study li .top_cont .txt_box {
  flex: 1;
  min-width: 0;
}
.wrap_page.storage .list_study li .top_cont .txt_box .quote_txt {
  display: flex;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #1A84EA;
}
.wrap_page.storage .list_study li .top_cont .txt_box .quote_txt .quote {
  width: 20px;
  height: 20px;
}
.wrap_page.storage .list_study li .top_cont .txt_box .tit_txt {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  margin-top: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
}
.wrap_page.storage .list_study li .top_cont .txt_box .author_txt {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  margin-top: 8px;
  color: #96A1A4;
}
.wrap_page.storage .list_study li .expression_box {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #DDE4E6;
}
.wrap_page.storage .list_study li .expression_box .study_txt {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #96A1A4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
}
.wrap_page.storage .list_study li .expression_box .date_txt {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #96A1A4;
}
.wrap_page.storage .list_study.audio .top_cont .tumb_box {
  max-width: 85px;
}
.wrap_page.storage .comming_soon {
  padding: 220px 0 160px;
}
.wrap_page.storage .note_top .tumb_box {
  max-width: 320px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
}
.wrap_page.storage .note_top .tumb_box .link_thumb {
  display: block;
}
.wrap_page.storage .note_top .quote_txt {
  margin-top: 36px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #1A84EA;
}
.wrap_page.storage .note_top .quote_txt .quote {
  width: 20px;
  height: 20px;
}
.wrap_page.storage .note_top .tit_txt {
  display: block;
  text-align: center;
  width: 100%;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  margin-top: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
}
.wrap_page.storage .note_top .author_txt {
  display: block;
  text-align: center;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #96A1A4;
}
.wrap_page.storage .note_top.audio .tumb_box {
  max-width: 117px;
}
.wrap_page.storage .sentence_box {
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px solid #DDE4E6;
}
.wrap_page.storage .sentence_cont {
  position: relative;
  padding-left: 20px;
  margin-top: 48px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 12px;
}
.wrap_page.storage .sentence_cont:first-child {
  margin-top: 0;
}
.wrap_page.storage .sentence_cont:before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 100%;
  background-color: #DDE4E6;
  border-radius: 100px;
  content: "";
}
.wrap_page.storage .sentence_cont .btn_speaker {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  font-size: 0;
  text-indent: -99999px;
  background-image: url("../images/volume-fill.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 22px 16px;
}
.wrap_page.storage .sentence_cont .btn_speaker.on {
  background-image: url("../images/flattened-fill.svg");
}
.wrap_page.storage .sentence_cont .btn_bookmark {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.wrap_page.storage .sentence_cont .btn_bookmark .bookmark-blue {
  width: 12px;
  height: 15px;
}
.wrap_page.storage .sentence_cont .cont_box {
  flex: 1 1 auto;
}
.wrap_page.storage .sentence_cont .cont_box .txt_box {
  margin-bottom: 16px;
}
.wrap_page.storage .sentence_cont .cont_box .txt_box .there_is {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #96A1A4;
}
.wrap_page.storage .sentence_cont .cont_box .txt_box .original_language {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.wrap_page.storage .sentence_cont .cont_box .txt_box .analysis_txt {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #96A1A4;
}
.wrap_page.storage .sentence_cont .cont_box .tip_box {
  border-top: 1px solid #DDE4E6;
  padding-top: 16px;
}
.wrap_page.storage .sentence_cont .cont_box .tip_box .caption_txt {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  color: #96A1A4;
}
.wrap_page.storage .sentence_cont .cont_box .tip_box .explan_txt {
  padding-left: 16px;
  color: #96A1A4;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}
.wrap_page.storage .sentence_cont .cont_box .memo_box {
  margin-top: 16px;
}
.wrap_page.storage .sentence_cont .cont_box .memo_box .btn_memo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  height: 56px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  background-color: #F4FAFF;
  border: 1px solid #E2F2FF;
  color: #1A84EA;
  border-radius: 8px;
}
.wrap_page.storage .sentence_cont .cont_box .memo_box .btn_memo .ico {
  width: 22px;
  height: 22px;
}
.wrap_page.storage .sentence_cont .cont_box .memo_box .btn_memo:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.wrap_page.storage .sentence_cont .cont_box .memo_area {
  margin-top: 16px;
  position: relative;
  border: 1px solid #DDE4E6;
  padding: 16px;
  background-color: #f8fbfb;
  border-radius: 8px;
}
.wrap_page.storage .sentence_cont .cont_box .memo_area textarea {
  width: 100%;
  min-height: 32px;
  height: auto;
  background-color: #f8fbfb;
  resize: none;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}
.wrap_page.storage .sentence_cont .cont_box .memo_area textarea ::placeholder {
  color: #96A1A4;
}
.wrap_page.storage .sentence_cont .cont_box .memo_area textarea:focus {
  outline: none;
  border: 0 none;
}
.wrap_page.storage .sentence_cont .cont_box .memo_area .tool_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  width: 100%;
}
.wrap_page.storage .sentence_cont .cont_box .memo_area .tool_box .date {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #96A1A4;
}
.wrap_page.storage .sentence_cont .cont_box .memo_area .tool_box .edit_box {
  margin-left: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.wrap_page.storage .sentence_cont .cont_box .memo_area .tool_box .edit_box button {
  width: 18px;
  height: 18px;
}
.wrap_page.storage .index_box .list_index {
  margin-bottom: 8px;
}
.wrap_page.storage .index_box .list_index li {
  transition: all 0.2s ease;
  margin-top: 4px;
  color: #96A1A4;
  height: auto;
  transition: height 0.2s ease, padding 0.2s ease, margin 0.2s ease;
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}
.wrap_page.storage .index_box .list_index li:first-child {
  margin-top: 0;
}
.wrap_page.storage .index_box .list_index.hide li:nth-child(n+5) {
  height: 0;
  padding: 0;
  margin: 0;
}
.wrap_page.storage .index_box .index_close {
  display: none;
}
.wrap_page.storage .capter_tit {
  display: block;
  margin-top: 60px;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #132227;
}
.wrap_page.storage .statistics_cont .inner {
  margin-top: 60px;
}
.wrap_page.storage .statistics_cont .shadow_box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 36px 0;
  border-radius: 12px;
  border: 1px solid #DDE4E6;
  background-color: #ffffff;
  box-shadow: 0px 20px 40px -10px rgba(19, 34, 39, 0.05);
}
.wrap_page.storage .statistics_cont .shadow_box .heading_txt {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  text-align: center;
}
.wrap_page.storage .statistics_cont .shadow_box .heading_txt .point {
  color: #1A84EA;
}
.wrap_page.storage .statistics_cont .clip_cont {
  width: 100%;
  padding: 24px 24px 0 24px;
  border-top: 1px solid #EDF1F1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.wrap_page.storage .statistics_cont .clip_cont .thumb_box {
  margin: 24px 0 12px;
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
}
.wrap_page.storage .statistics_cont .clip_cont .cont_txt {
  width: 100%;
  text-align: center;
}
.wrap_page.storage .statistics_cont .clip_cont .cont_txt .quote_txt {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #1A84EA;
}
.wrap_page.storage .statistics_cont .clip_cont .cont_txt .quote_txt .quote {
  width: 20px;
  height: 20px;
}
.wrap_page.storage .statistics_cont .clip_cont .cont_txt .tit_txt {
  margin-top: 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
}
.wrap_page.storage .statistics_cont .clip_cont .cont_txt .author_txt {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #96A1A4;
  margin-top: 8px;
}
.wrap_page.storage .statistics_cont .clip_cont .bottom_btn {
  width: 100%;
  text-align: center;
  margin-top: 24px;
}
.wrap_page.storage .statistics_cont .clip_cont .bottom_btn a {
  max-width: 280px;
  width: 100%;
}
.wrap_page.storage .summation_box .list_info {
  display: flex;
}
.wrap_page.storage .summation_box .shadow_box {
  flex: 1;
  padding: 24px 0;
  border-color: #EDF1F1;
  width: 33.333%;
  gap: 16px;
}
.wrap_page.storage .summation_box .shadow_box:not(:last-child) {
  margin-right: 16px;
}
.wrap_page.storage .summation_box .icon_box {
  width: 44px;
  height: 44px;
  background-color: #EDF1F1;
  border-radius: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
}
.wrap_page.storage .summation_box .icon_box .ico {
  width: 24px;
  height: 24px;
}
.wrap_page.storage .summation_box .num {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
}
.wrap_page.storage .summation_box .tit {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #96A1A4;
}
.wrap_page.storage .summation_box .link_box {
  margin-top: 36px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.wrap_page.storage .time_box {
  display: flex;
}
.wrap_page.storage .time_box .shadow_box {
  width: 50%;
  border-color: #EDF1F1;
}
.wrap_page.storage .time_box .shadow_box:not(:last-child) {
  margin-right: 16px;
}
.wrap_page.storage .time_box .wrap_graph {
  height: 203px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
}
.wrap_page.storage .time_box .wrap_graph .graph_box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
}
.wrap_page.storage .time_box .wrap_graph .progress_box {
  position: relative;
  width: 24px;
  height: 116px;
  /* 배경 바 스타일 */
  /* 진행 상태 스타일 */
}
.wrap_page.storage .time_box .wrap_graph .progress_box progress {
  position: absolute;
  bottom: 0;
  left: 50%;
  height: 24px;
  width: 116px;
  margin-left: 12px;
  transform: rotate(-90deg);
  transform-origin: bottom left;
  background-color: #ffffff;
}
.wrap_page.storage .time_box .wrap_graph .progress_box progress.zero {
  height: 24px;
  width: 24px;
  border-radius: 100%;
  background-color: #BADDFD;
}
.wrap_page.storage .time_box .wrap_graph .progress_box progress.zero .star {
  display: none;
}
.wrap_page.storage .time_box .wrap_graph .progress_box progress::-webkit-progress-bar {
  background: none;
}
.wrap_page.storage .time_box .wrap_graph .progress_box progress::-webkit-progress-value {
  background: #BADDFD;
  border-radius: 24px;
}
.wrap_page.storage .time_box .wrap_graph .progress_box .star {
  display: none;
  position: absolute;
  top: 0;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: url(../images/mini_star.svg) no-repeat center/contain;
  z-index: 2;
  margin-top: 8px;
}
.wrap_page.storage .time_box .wrap_graph .progress_box.active {
  /* 진행 상태 스타일 */
}
.wrap_page.storage .time_box .wrap_graph .progress_box.active progress::-webkit-progress-value {
  background: var(--blue-gradient, linear-gradient(119deg, #3EA0FF 5.15%, #1682EB 52.58%));
}
.wrap_page.storage .time_box .wrap_graph .progress_box.active .star {
  display: block;
}
.wrap_page.storage .time_box .wrap_graph .progress_box.active progress.zero {
  background-color: #1A84EA;
}
.wrap_page.storage .time_box .wrap_graph .progress_box.active progress.zero + .star {
  display: none;
}
.wrap_page.storage .time_box .wrap_graph .label {
  margin-top: 8px;
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #96A1A4;
}
.wrap_page.storage .time_box .wrap_graph.year .progress_box {
  width: 18px;
}
.wrap_page.storage .time_box .wrap_graph.year .progress_box progress {
  height: 18px;
  margin-left: 9px;
}
.wrap_page.storage .time_box .wrap_graph.year .progress_box progress.zero {
  height: 18px;
  width: 18px;
  border-radius: 100%;
  background-color: #BADDFD;
}
.wrap_page.storage .time_box .wrap_graph.year .progress_box.active progress.zero {
  background-color: #1A84EA;
}
.wrap_page.storage .time_box .wrap_graph.month {
  gap: 7px;
  height: 207px;
  align-items: flex-end;
}
.wrap_page.storage .time_box .wrap_graph.month .progress_box {
  width: 18px;
}
.wrap_page.storage .time_box .wrap_graph.month .progress_box progress {
  height: 18px;
  width: 207px;
  margin-left: 9px;
}
.wrap_page.storage .time_box .wrap_graph.month .progress_box progress.zero {
  height: 18px;
  width: 18px;
  border-radius: 100%;
  background-color: #BADDFD;
}
.wrap_page.storage .time_box .wrap_graph.month .progress_box.active progress.zero {
  background-color: #1A84EA;
}
.wrap_page.storage .time_box .info_box {
  width: 100%;
  padding-top: 24px;
  padding-left: 48px;
  padding-right: 48px;
  border-top: 1px solid #EDF1F1;
}
.wrap_page.storage .time_box .info_box .info_tit {
  text-align: center;
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}
.wrap_page.storage .time_box .info_box .info_tit .point {
  color: #1A84EA;
}
.wrap_page.storage .time_box .info_box .info_tit br {
  display: none;
}
.wrap_page.storage .time_box .info_box .info_txt {
  margin-top: 12px;
}
.wrap_page.storage .time_box .info_box .info_txt .txt_box {
  margin-top: 8px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
}
.wrap_page.storage .time_box .info_box .info_txt .txt_box:first-child {
  margin-top: 0;
}
.wrap_page.storage .time_box .info_box .info_txt .tit {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.wrap_page.storage .time_box .info_box .info_txt .txt {
  width: 70px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.wrap_page.storage .time_box .info_box .info_txt .txt .point {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #1A84EA;
}
.wrap_page.storage .time_box .info_box.time .info_txt .txt {
  text-align: center;
  width: auto;
}
.wrap_page.storage .time_box .study_time {
  padding: 26px 0;
}
.wrap_page.storage .time_box.month {
  display: block;
}
.wrap_page.storage .time_box.month .shadow_box {
  width: 100%;
}
.wrap_page.storage .time_box.month .shadow_box:first-child {
  margin-bottom: 16px;
}
.wrap_page.storage .date_picker {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.wrap_page.storage .date_picker .current_date {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.wrap_page.storage .date_picker button {
  width: 48px;
  height: 48px;
}
.wrap_page.storage .date_picker button .ico {
  height: 14px;
  width: 8px;
}
.wrap_page.around_tab {
  background-color: #f8fbfb;
}
.wrap_page.around_tab .container_xl {
  padding-top: 40px;
  padding-bottom: 40px;
}
.wrap_page.around_tab .wrap_tab .top_tab {
  margin-top: -4px;
}
.wrap_page.around_tab .wrap_tab .top_tab .tab_cont {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  overflow: hidden;
  max-height: none;
  transition: max-height 0.2s ease;
  max-height: 52px;
}
.wrap_page.around_tab .wrap_tab .top_tab .tab_cont.open {
  max-height: 400px;
  transition: max-height 0.5s ease;
}
.wrap_page.around_tab .wrap_tab .top_tab .tab_cont button {
  margin-top: 4px;
}
.wrap_page.around_tab .toggle_btn {
  text-align: center;
  margin-top: 16px;
}
.wrap_page.around_tab .toggle_btn button {
  display: inline-flex;
  align-items: center;
  color: #1A84EA;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.wrap_page.around_tab .toggle_btn button .ico {
  width: 24px;
  height: 24px;
}
.wrap_page.around_tab .toggle_btn button.link_down {
  display: none;
}
.wrap_page.around .list_cont {
  display: grid;
  grid-template-columns: repeat(3, calc((100% - 48px) / 3));
  column-gap: 24px;
  row-gap: 36px;
  width: 100%;
}
.wrap_page.around .list_cont > li {
  height: 397px;
  padding: 8px 8px 24px;
  border-radius: 16px;
  border: 1px solid #DDE4E6;
  background-color: #ffffff;
  box-shadow: 0px 20px 40px -10px rgba(19, 34, 39, 0.05);
}
.wrap_page.around .list_cont > li .thumb_box {
  height: 193px;
  margin-bottom: 24px;
  border-radius: 16px;
  overflow: hidden;
  text-align: center;
}
.wrap_page.around .list_cont > li .thumb_box img {
  border-radius: 16px;
}
.wrap_page.around .list_cont > li .bottom_cont {
  padding: 0 16px;
}
.wrap_page.around .list_cont > li .cont_tit {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.wrap_page.around .list_cont > li .caption_txt {
  margin-top: 16px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  color: #96A1A4;
}
.wrap_page.around .list_cont > li .link_box {
  margin-top: 24px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}
.wrap_page.around .list_cont > li.audio .thumb_box {
  padding: 12px 0;
}
.wrap_page.around .list_cont > li.curation {
  display: flex;
  flex-direction: column;
  padding: 24px;
}
.wrap_page.around .list_cont > li.curation .head_tit {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px;
}
.wrap_page.around .list_cont > li.curation .head_tit .ico_txt {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.wrap_page.around .list_cont > li.curation .head_tit .caption_txt {
  color: #1A84EA;
  margin-top: 0;
}
.wrap_page.around .list_cont > li.curation .list_curation {
  margin-top: 8px;
  overflow: auto;
}
.wrap_page.around .list_cont > li.curation .list_curation li {
  border-bottom: 1px solid #DDE4E6;
}
.wrap_page.around .list_cont > li.curation .list_curation li:last-child {
  border-bottom: 0 none;
}
.wrap_page.around .list_cont > li.curation .list_curation li .link_cont {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 16px 0;
}
.wrap_page.around .list_cont > li.curation .list_curation li .thumb_box {
  height: auto;
  margin: 0;
  max-width: 71px;
  flex-shrink: 0;
}
.wrap_page.around .list_cont > li.curation .list_curation li .txt_box {
  flex: 1 1 auto; /* 남은 공간을 차지함 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
}
.wrap_page.around .list_cont > li.curation .list_curation li .txt_box .cu_tit {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.wrap_page.around .list_cont > li.curation .list_curation li .txt_box .caption_txt {
  margin: 0;
}
.wrap_page.around .list_cont > li.curation .list_curation li .right_ico {
  flex-shrink: 0;
}
.wrap_page.around .list_cont > li.curation .list_curation li .right_ico .ico {
  width: 24px;
  height: 24px;
}
.wrap_page.around .list_cont > li.curation .list_curation li.audio .link_cont {
  gap: 16px;
}
.wrap_page.around .list_cont > li.curation .list_curation li.audio .thumb_box {
  max-width: 48px;
  border-radius: 0;
}
.wrap_page.around .list_cont > li.curation .list_curation li.audio .thumb_box img {
  border-radius: 0;
}
.wrap_page.around .list_cont > li.curation.dark .head_tit .cont_tit {
  color: #ffffff;
}
.wrap_page.around .list_cont > li.curation.dark .head_tit .caption_txt {
  color: #ffffff;
}
.wrap_page.around .list_cont > li.curation.dark .list_curation li {
  border: 0 none;
  padding-top: 16px;
}
.wrap_page.around .list_cont > li.curation.dark .list_curation li .link_cont {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 16px;
}
.wrap_page.around .list_cont > li.curation.dark .list_curation li .thumb_box {
  max-width: 56px;
}
.wrap_page.around .list_cont > li.curation.dark .list_curation li .right_ico {
  width: 24px;
  height: 24px;
  text-align: center;
}
.wrap_page.around .list_cont > li.curation.dark .list_curation li .right_ico .ico {
  width: 8px;
  height: 14px;
  vertical-align: middle;
}
.wrap_page.around .list_cont > li.curation.dark .list_curation li.audio .link_cont {
  gap: 8px;
}
.wrap_page.around .list_cont > li.curation.dark .list_curation li.audio .thumb_box {
  max-width: 36px;
}
.wrap_page.around .list_cont > li.banner {
  background-color: #78C0FF;
  border: 0 none;
  padding: 16px 24px;
}
.wrap_page.around .list_cont > li.banner .link_cont {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  height: 100%;
}
.wrap_page.around .list_cont > li.banner .link_cont .thumb {
  height: 120px;
}
.wrap_page.around .list_cont > li.banner .link_cont .txt_box {
  text-align: center;
}
.wrap_page.around .list_cont > li.banner .link_cont .txt_box .tit {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #ffffff;
}
.wrap_page.around .list_cont > li.banner .link_cont .txt_box .txt {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #ffffff;
}
.wrap_page.article_top {
  border-bottom: 1px solid #DDE4E6;
}
.wrap_page.article_top .container_xl {
  padding-top: 100px;
}
.wrap_page.article_top .top_cont {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 36px;
}
.wrap_page.article_top .top_cont .thumb_box {
  flex: 1;
  max-width: 400px;
}
.wrap_page.article_top .top_cont .thumb_box img {
  border-radius: 8px;
}
.wrap_page.article_top .top_cont .txt_box {
  flex: 1;
}
.wrap_page.article_top .top_cont .txt_box .tit {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
}
.wrap_page.article_top .top_cont .txt_box .sub_txt {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.wrap_page.article_top .top_cont .txt_box .btn_box {
  margin-top: 24px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.wrap_page.article_top .top_cont .txt_box .btn_box a {
  flex: 1 1 auto;
}
.wrap_page.article_contents .contents_txt {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px;
}
.wrap_page.article_contents .contents_txt *::selection {
  background: #E2F2FF; /* 드래그 중 파란색 */
}
.wrap_page.article_contents .contents_txt .highlight {
  background-color: #ffeecd; /* 드래그 완료 후 노란색 */
  display: inline;
}
.wrap_page.article_contents .contents_txt #selectionMenu {
  position: absolute;
  display: none;
  z-index: 9999;
  background: white;
  box-shadow: 0px 20px 40px -10px rgba(19, 34, 39, 0.05);
  border-radius: 8px;
  overflow: hidden;
}
.wrap_page.article_contents .contents_txt #selectionMenu button {
  padding: 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  height: 48px;
  width: 120px;
}
.wrap_page.article_contents .contents_txt #selectionMenu button#highlightBtn {
  background-color: #ffffff;
}
.wrap_page.article_contents .contents_txt #selectionMenu button#memoBtn {
  background-color: #EDF1F1;
}
.wrap_page.article_contents p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.wrap_page.article_contents p a {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-decoration: underline;
}
.wrap_page.article_contents strong {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #4A5457;
}
.wrap_page.article_contents ul {
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px;
}
.wrap_page.article_contents ul > li {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
  list-style: disc;
}
.wrap_page.article_contents ul > li img {
  display: block;
  margin: 8px 0;
}
.wrap_page.article_contents ul > li a {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-decoration: underline;
}
.wrap_page.article_contents ol {
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px;
}
.wrap_page.article_contents ol > li {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
  list-style: auto;
}
.wrap_page.article_contents ol > li img {
  display: block;
  margin: 8px 0;
}
.wrap_page.article_contents ol > li ul {
  gap: 0;
  margin-top: 8px;
  padding-left: 0;
}
.wrap_page.article_contents ol > li a {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-decoration: underline;
}
.wrap_page.article_contents h1 {
  font-size: 28px;
  font-weight: 700;
  line-height: 38px;
  color: #132227;
}
.wrap_page.article_contents h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #132227;
}
.wrap_page.article_contents h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #132227;
}
.wrap_page.article_contents h4 {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.wrap_page.article_contents h5 {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #96A1A4;
}
.wrap_page.article_contents h6 {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #96A1A4;
}
.wrap_page.article_contents figcaption {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #96A1A4;
  border-left: 3px solid #DDE4E6;
  padding-left: 16px;
}
.wrap_page.article_contents a {
  color: #1A84EA;
}
.wrap_page.article_contents a:hover {
  color: #0E6FDB;
}
.wrap_page.article_contents blockquote {
  width: 100%;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  padding: 24px;
  background-color: #f8fbfb;
}
.wrap_page.article_contents blockquote ul, .wrap_page.article_contents blockquote ol {
  gap: 8px;
}
.wrap_page.audio_top {
  border-bottom: 1px solid #DDE4E6;
}
.wrap_page.audio_top .top_cont {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 36px;
}
.wrap_page.audio_top .top_cont .thumb_box {
  position: relative;
  flex: 1;
  max-width: 420px;
  width: 100%;
  text-align: center;
  padding: 16px 0;
}
.wrap_page.audio_top .top_cont .thumb_box > img {
  max-width: 130px;
  border-radius: 6px;
  position: relative;
  z-index: 5;
}
.wrap_page.audio_top .top_cont .thumb_box .bg_img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  background-color: #ffffff;
  z-index: 0;
}
.wrap_page.audio_top .top_cont .thumb_box .bg_img img {
  object-fit: cover;
  filter: blur(25px);
}
.wrap_page.audio_top .top_cont .txt_box {
  flex: 1;
}
.wrap_page.audio_top .top_cont .txt_box .tag_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.wrap_page.audio_top .top_cont .txt_box .tit {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
}
.wrap_page.audio_top .top_cont .txt_box .sub_txt {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #96A1A4;
}
.wrap_page.audio_top .top_cont .txt_box .sub_txt .flex_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.wrap_page.audio_top .top_cont .txt_box .btn_box {
  margin-top: 24px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.wrap_page.audio_top .top_cont .txt_box .btn_box a {
  flex: 1 1 auto;
}
.wrap_page.audio_contents .list_box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
}
.wrap_page.audio_contents .list_box .inner {
  width: 100%;
}
.wrap_page.audio_contents .list_box .list_tit {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  display: block;
  margin-bottom: 16px;
}
.wrap_page.audio_contents .list_box .intro_box {
  padding: 20px 30px;
  background-color: #f8fbfb;
  border-radius: 16px;
}
.wrap_page.audio_contents .list_box .intro_box .txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.wrap_page.audio_contents .list_box .chpter_box {
  width: 100%;
}
.wrap_page.audio_contents .list_box .chpter_box li {
  position: relative;
  margin-top: 16px;
}
.wrap_page.audio_contents .list_box .chpter_box li:first-child {
  margin-top: 0;
}
.wrap_page.audio_contents .list_box .chpter_box li .link_box {
  display: block;
  position: relative;
  width: 100%;
  padding: 20px 62px 20px 30px;
  border: 1px solid #EDF1F1;
  box-shadow: 0px 20px 40px -10px rgba(19, 34, 39, 0.05);
  background-color: #ffffff;
  border-radius: 10px;
}
.wrap_page.audio_contents .list_box .chpter_box li .link_box.selected {
  background-color: #f8fbfb;
}
.wrap_page.audio_contents .list_box .chpter_box li .link_box.selected .tag_box .tag {
  color: #1A84EA;
  background-color: #E2F2FF;
}
.wrap_page.audio_contents .list_box .chpter_box li .link_box.selected .tag_box .current_txt {
  display: block;
}
.wrap_page.audio_contents .list_box .chpter_box li .link_box:after {
  display: block;
  width: 24px;
  height: 24px;
  background: url(../images/chevron_right_gray6.svg) no-repeat 50% 50%;
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -12px;
  right: 30px;
}
.wrap_page.audio_contents .list_box .chpter_box li .link_box .tag_box {
  margin-bottom: 12px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.wrap_page.audio_contents .list_box .chpter_box li .link_box .tag_box .page_txt {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #96A1A4;
}
.wrap_page.audio_contents .list_box .chpter_box li .link_box .tag_box .current_txt {
  display: none;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #1A84EA;
}
.wrap_page.audio_contents .list_box .chpter_box li .link_box .tit_txt {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #132227;
}
.wrap_page.audio_contents .list_box .chpter_box li .link_box .sub_txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  margin-top: 4px;
  color: #96A1A4;
}
.wrap_page.audio_contents .list_box .chpter_box li .open_later {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: rgba(19, 34, 39, 0.6);
}
.wrap_page.audio_contents .list_box .chpter_box li .open_later .ico.clockwhite {
  width: 24p;
  height: 24px;
}
.wrap_page.audio_contents .list_box .chpter_box li .open_later .time_txt {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #ffffff;
}

.viewer_header {
  position: fixed;
  z-index: 2;
  width: 100%;
  height: 80px;
  background-color: #ffffff;
  border-bottom: 1px solid #DDE4E6;
}
.viewer_header .container_lg {
  padding: 16px;
}
.viewer_header .container_xl {
  padding: 16px;
}
.viewer_header .header_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
}
.viewer_header .link_back {
  flex: 0 0 auto;
  display: block;
  text-align: center;
  font-size: 0;
  text-indent: -9999em;
  width: 24px;
  height: 24px;
}
.viewer_header .link_back .ico {
  width: 8px;
  height: 14px;
  margin-top: 5px;
}
.viewer_header .thumb_box {
  max-width: 30px;
}
.viewer_header .thumb_box img {
  border-radius: 2px;
}
.viewer_header .tit_box {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
}
.viewer_header .tit_box .sub_txt {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #96A1A4;
}
.viewer_header .tit_box .chpter_txt {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.viewer_header .right_link {
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
}
.viewer_header .right_link a {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.viewer_header .right_link a .txt {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}
.viewer_header .right_link .link_ai {
  color: #1A84EA;
}
.viewer_header .right_link .link_ai .ico {
  width: 24px;
  height: 24px;
}
.viewer_header .right_link .link_search .ico {
  width: 20px;
  height: 20px;
}
.viewer_header .right_link .link_list .ico {
  width: 24px;
  height: 24px;
}
.viewer_header .wrap_list {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  width: 480px;
  max-width: 100%;
  z-index: 5;
}
.viewer_header .wrap_list .inner_cont {
  position: relative;
  height: 100vh;
  background-color: #ffffff;
  z-index: 100;
}
.viewer_header .wrap_list .inner_cont .head_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  height: 60px;
  padding: 16px;
  border-bottom: 1px solid #DDE4E6;
}
.viewer_header .wrap_list .inner_cont .head_box .tit {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}
.viewer_header .wrap_list .inner_cont .head_box button {
  margin-left: auto;
  width: 24px;
  height: 24px;
  background: url("../images/close.svg") no-repeat 50% 50%;
  background-size: 14px 14px;
  font-size: 0;
  text-indent: -9999em;
}
.viewer_header .wrap_list .inner_cont .list_cont {
  padding: 16px;
  overflow: auto;
  height: calc(100vh - 60px);
}
.viewer_header .wrap_list .inner_cont .list_cont .link {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 0;
}
.viewer_header .wrap_list .inner_cont .list_cont .link .num {
  display: block;
  width: 40px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #96A1A4;
}
.viewer_header .wrap_list .inner_cont .list_cont .link .txt_box .tit {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}
.viewer_header .wrap_list .inner_cont .list_cont .link .txt_box .sub {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #96A1A4;
}
.viewer_header .wrap_list .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;
}
.viewer_header.clip .container_xl {
  max-width: 1172px;
}
.viewer_header.clip .thumb_box {
  max-width: 84px;
}
.viewer_header.clip .tit_box .clip_tit {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
  flex-shrink: 1;
}
.viewer_header.clip .tit_box .clip_tit .tag {
  white-space: nowrap;
}
.viewer_header.clip .tit_box .clip_tit .tit_txt {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
  background: url("../images/chevron-down.svg") no-repeat 100% 50%;
  background-size: 12px 7px;
  padding-right: 20px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
}
.viewer_header.clip .tit_box .sub_txt {
  margin-top: 4px;
  width: 100%;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #96A1A4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
}

.viewer_cont {
  z-index: 0;
  margin-top: 80px;
  background-color: #f8fbfb;
  flex-grow: 1;
  overflow: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.viewer_cont::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}
.viewer_cont .container_xl {
  padding-top: 60px;
  padding-bottom: 140px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0px;
}
.viewer_cont .swiper_arr {
  flex: 0 0 48px;
}
.viewer_cont .swiper_arr .btn_next {
  width: 48px;
  height: 48px;
  z-index: 5;
  cursor: pointer;
  background-size: 16px 28px;
}
.viewer_cont .swiper_arr .btn_prev {
  width: 48px;
  height: 48px;
  z-index: 5;
  cursor: pointer;
  background-size: 16px 28px;
  transform: rotate(180deg);
}
.viewer_cont .swiper_arr .swiper-button-disabled {
  pointer-events: none;
  opacity: 0.4;
}
.viewer_cont .viewer_swiper {
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  height: auto;
  padding: 0 16px;
  flex-grow: 1; /* 나머지 공간을 차지하도록 설정 */
  flex-shrink: 1; /* 크기가 너무 커지지 않도록 설정 */
  flex-basis: 0;
}
.viewer_cont .viewer_swiper .swiper {
  height: 100%;
  max-width: 960px;
}
.viewer_cont .viewer_swiper .swiper .swiper-slide {
  border-radius: 16px;
  background-color: #ffffff;
  padding: 30px;
}
.viewer_cont .viewer_swiper .swiper .swiper-slide .title_box {
  margin-bottom: 8px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.viewer_cont .viewer_swiper .swiper .swiper-slide .title_box .bar {
  width: 8px;
  height: 72px;
}
.viewer_cont .viewer_swiper .swiper .swiper-slide .title_box .chapter_txt {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #96A1A4;
}
.viewer_cont .viewer_swiper .swiper .swiper-slide .title_box .title_txt {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: #132227;
}
.viewer_cont .viewer_swiper .swiper .swiper-slide .title_box .sub_txt {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #96A1A4;
}
.viewer_cont .viewer_swiper .swiper .swiper-slide .list_sentence li {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  padding: 24px 12px;
  border-bottom: 1px solid #EDF1F1;
}
.viewer_cont .viewer_swiper .swiper .swiper-slide .list_sentence li:last-child {
  border-bottom: 0;
}
.viewer_cont .viewer_swiper .swiper .swiper-slide .list_sentence li .txt_box {
  display: block;
  flex: 1;
}
.viewer_cont .viewer_swiper .swiper .swiper-slide .list_sentence li .txt_box .sentence {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}
.viewer_cont .viewer_swiper .swiper .swiper-slide .list_sentence li .txt_box .analysis {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #96A1A4;
}
.viewer_cont .viewer_swiper .swiper .swiper-slide .list_sentence li .right_btn {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
}
.viewer_cont .viewer_swiper .swiper .swiper-slide .list_sentence li .right_btn button {
  width: 24px;
  height: 24px;
  font-size: 0;
  text-indent: -9999em;
}
.viewer_cont .viewer_swiper .swiper .swiper-slide .list_sentence li .right_btn .btn_bookmark {
  background: url("../images/bookmark.svg") no-repeat 50% 50%;
  background-size: 14px 17px;
}
.viewer_cont .viewer_swiper .swiper .swiper-slide .list_sentence li .right_btn .btn_bookmark.on {
  background-image: url("../images/bookmark-blue.svg");
}
.viewer_cont .viewer_swiper .swiper .swiper-slide .list_sentence li .right_btn .btn_edit {
  background: url("../images/edit_ico.svg") no-repeat 50% 50%;
  background-size: 24px 24px;
}
.viewer_cont .viewer_swiper .swiper .swiper-slide .list_sentence li.sound .txt_box .sentence {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #1A84EA;
}
.viewer_cont .viewer_swiper .swiper .swiper-slide .list_sentence.big_font li .txt_box .sentence {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}
.viewer_cont .viewer_swiper .swiper .swiper-slide .list_sentence.big_font li .txt_box .analysis {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.viewer_cont .viewer_swiper .swiper .swiper-slide .list_sentence.small_font li .txt_box .sentence {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}
.viewer_cont .viewer_swiper .swiper .swiper-slide .list_sentence.small_font li .txt_box .analysis {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}
.viewer_cont .viewer_swiper .swiper .swiper-slide .list_sentence.small_font li.sound .txt_box .sentence {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
}
.viewer_cont .viewer_swiper .pagination {
  margin: 0 auto 36px auto;
  padding: 7px 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
}
.viewer_cont .viewer_swiper .pagination .wrap_scrollbar {
  height: 12px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 802px;
  width: 100%;
  overflow: hidden;
  cursor: pointer;
}
.viewer_cont .viewer_swiper .pagination .swiper-scrollbar {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 6px;
  top: 0;
  left: 0;
  max-width: 802px;
  background-color: #EDF1F1;
  border-radius: 4px;
  cursor: pointer;
}
.viewer_cont .viewer_swiper .pagination .swiper-scrollbar .swiper-scrollbar-drag {
  position: relative;
  background-color: #1A84EA;
  border-radius: 4px;
}
.viewer_cont .viewer_swiper .pagination .swiper-scrollbar .swiper-scrollbar-drag:before {
  content: "";
  background-color: #1A84EA;
  position: relative;
  left: -99vw;
  top: 0;
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100vw;
  z-index: 999;
}
.viewer_cont .viewer_swiper .pagination .swiper-scrollbar .swiper-scrollbar-drag:after {
  position: absolute;
  top: 50%;
  margin-top: -6px;
  right: 0;
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background-color: #1A84EA;
  content: "";
}
.viewer_cont .viewer_swiper .pagination .num_wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
}
.viewer_cont .viewer_swiper .pagination .num_wrap .btn_prev {
  font-size: 0;
  text-indent: -9999em;
  transform: rotate(180deg);
}
.viewer_cont .viewer_swiper .pagination .num_wrap .btn_prev .ico {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.viewer_cont .viewer_swiper .pagination .num_wrap .btn_prev.disabled {
  pointer-events: none;
  opacity: 0.4;
}
.viewer_cont .viewer_swiper .pagination .num_wrap .btn_next {
  font-size: 0;
  text-indent: -9999em;
}
.viewer_cont .viewer_swiper .pagination .num_wrap .btn_next .ico {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.viewer_cont .viewer_swiper .pagination .num_wrap .btn_next.disabled {
  pointer-events: none;
  opacity: 0.4;
}
.viewer_cont .viewer_swiper .pagination .num_wrap .swiper-pagination {
  position: relative;
  bottom: auto;
}
.viewer_cont .viewer_swiper .pagination .num_wrap .swiper-pagination .fraction-wrap {
  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: #B0BBBE;
}
.viewer_cont .viewer_swiper .pagination .num_wrap .swiper-pagination .fraction-wrap .current {
  color: #1A84EA;
}
.viewer_cont .viewer_swiper .page_btn .btn_next {
  position: absolute;
  top: 50%;
  right: 0;
  bottom: auto;
  left: auto;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  z-index: 5;
  cursor: pointer;
  background-size: 16px 28px;
}
.viewer_cont .viewer_swiper .page_btn .btn_prev {
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 0;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  z-index: 5;
  cursor: pointer;
  background-size: 16px 28px;
  transform: rotate(180deg);
}
.viewer_cont.clip .container_xl {
  padding: 60px 8px 60px;
  display: block;
}
.viewer_cont.clip .warp_clip {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 36px;
}
.viewer_cont.clip .warp_clip .clip_info {
  flex: 0 0 auto;
  max-width: 688px;
  width: 100%;
  align-items: stretch;
}
.viewer_cont.clip .warp_clip .clip_info img {
  width: 100%;
}
.viewer_cont.clip .warp_clip .clip_info .youtube_thumb {
  margin-bottom: 24px;
  width: 100%;
  pointer-events: none;
}
.viewer_cont.clip .warp_clip .clip_info .youtube_thumb .video_box {
  background-color: #132227;
}
.viewer_cont.clip .warp_clip .clip_info .youtube_thumb .progress_container {
  width: 100%;
  height: 7px;
  background-color: #DDE4E6;
  position: relative;
}
.viewer_cont.clip .warp_clip .clip_info .youtube_thumb .progress_container .video_progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  appearance: none; /* 기본 스타일을 없애고 커스터마이징 */
  background-color: #1A84EA;
  border: none; /* 테두리 없애기 */
}
.viewer_cont.clip .warp_clip .clip_info .youtube_thumb .progress_container .video_progress::-webkit-progress-bar {
  background-color: #DDE4E6; /* 배경색 */
}
.viewer_cont.clip .warp_clip .clip_info .youtube_thumb .progress_container .video_progress::-webkit-progress-value {
  background-color: #1A84EA; /* 진행 중 바 색상 */
}
.viewer_cont.clip .warp_clip .clip_info .youtube_thumb .progress_container .video_progress::-moz-progress-bar {
  background-color: #1A84EA; /* Firefox에서 진행 바 색상 */
}
.viewer_cont.clip .warp_clip .clip_info .youtube_thumb.video {
  margin-bottom: 36px;
}
.viewer_cont.clip .warp_clip .clip_info .info_box {
  padding: 36px;
  box-shadow: 0px 20px 40px -10px rgba(19, 34, 39, 0.05);
  border-radius: 16px;
  background-color: #ffffff;
  border: 1px solid #EDF1F1;
}
.viewer_cont.clip .warp_clip .clip_info .info_box .tit_txt {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #132227;
}
.viewer_cont.clip .warp_clip .clip_info .info_box .tag_box {
  margin-top: 12px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.viewer_cont.clip .warp_clip .clip_info .info_box .explan_box {
  position: relative;
  margin-top: 12px;
}
.viewer_cont.clip .warp_clip .clip_info .info_box .explan_box .explan_txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #96A1A4;
}
.viewer_cont.clip .warp_clip .clip_info .info_box .explan_box .read_more {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #ffffff;
  padding-left: 5px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #7D878B;
  cursor: pointer;
}
.viewer_cont.clip .warp_clip .clip_info .info_box .btn_box {
  margin-top: 36px;
}
.viewer_cont.clip .warp_clip .clip_info .info_box .btn_box .btn_primary {
  margin-top: 16px;
}
.viewer_cont.clip .warp_clip .clip_info .infoSwiper .swiper-pagination {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #96A1A4;
  position: absolute;
  top: 24px;
  right: 36px;
  bottom: 0;
  left: auto;
  width: 30px;
  height: 20px;
}
.viewer_cont.clip .warp_clip .clip_info .video_info {
  padding: 36px;
  box-shadow: 0px 20px 40px -10px rgba(19, 34, 39, 0.05);
  border-radius: 16px;
  background-color: #ffffff;
  border: 1px solid #EDF1F1;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .sentence_num {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: right;
  color: #96A1A4;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .pronunc_txt {
  margin-top: 4px;
  color: #96A1A4;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .language_txt {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: #132227;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .language_txt.quiz {
  color: #1A84EA;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .language_txt.quiz .error {
  color: #EB4545;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .analysis_txt {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #96A1A4;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .btn_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .btn_box a {
  flex: 1;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .btn_box.record {
  display: none;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .btn_box.record.on {
  display: flex;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .no_learning {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #96A1A4;
  height: 108px;
  line-height: 108px;
  text-align: center;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .no_cont {
  text-align: center;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .no_cont .txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #96A1A4;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .no_cont .go_cart {
  margin-top: 16px;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .recording_box {
  display: none;
  margin-top: 36px;
  padding: 16px 0;
  text-align: center;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .recording_box.on {
  display: block;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .recording_box .effect_img {
  text-align: center;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .recording_box .effect_img .before_img {
  max-width: 240px;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .recording_box .effect_img .gif_img {
  display: none;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .recording_box .effect_img.on .before_img {
  display: none;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .recording_box .effect_img.on .gif_img {
  display: block;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .recording_box .listen_txt {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #96A1A4;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .recording_box .btn_cancel {
  margin-top: 24px;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .recording_confirm {
  display: none;
  margin-top: 36px;
  text-align: left;
  padding: 16px 0;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .recording_confirm.on {
  display: block;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .recording_confirm .label_txt {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #96A1A4;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .recording_confirm .audio_player {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #DDE4E6;
  border-radius: 16px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0px;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .recording_confirm .audio_player .play_btn {
  flex-shrink: 0;
  margin-right: 16px;
  width: 40px;
  height: 40px;
  font-size: 0;
  text-indent: -999em;
  background: url("../images/play-fill.svg") no-repeat 50% 50%;
  background-size: 16px 20px;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .recording_confirm .audio_player .play_btn.play {
  background: url("../images/pause-fill.svg") no-repeat 50% 50%;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .recording_confirm .audio_player .wrap_bar {
  position: relative;
  width: 100%;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .recording_confirm .audio_player .wrap_bar .progress_bar {
  width: 100%;
  height: 8px;
  background-color: #EDF1F1;
  cursor: pointer;
  border-radius: 20px;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .recording_confirm .audio_player .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: #1A84EA;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .recording_confirm .audio_player .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: #1A84EA;
  touch-action: none;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .recording_confirm .audio_player .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: "";
}
.viewer_cont.clip .warp_clip .clip_info .video_info .recording_confirm .audio_player .time_txt {
  padding-left: 16px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .recording_confirm .audio_box {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #DDE4E6;
  border-radius: 16px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .recording_confirm .audio_box .play_btn {
  width: 40px;
  height: 40px;
  font-size: 0;
  text-indent: -999em;
  background: url("../images/play-fill.svg") no-repeat 50% 50%;
  background-size: 16px 20px;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .recording_confirm .audio_box .play_btn.play {
  background: url("../images/pause-fill.svg") no-repeat 50% 50%;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .recording_confirm .audio_box .progress_bar {
  border-radius: 20px;
  background-color: #EDF1F1;
  height: 8px;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .recording_confirm .audio_box .current_time {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .recording_confirm .button_box {
  margin-top: 26px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .recording_confirm .button_box a {
  flex: 1;
  padding: 0;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .quiz_box {
  margin-top: 36px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .quiz_box .btn_quiz {
  border-radius: 8px;
  background-color: #f8fbfb;
  border: 1px solid #DDE4E6;
  padding: 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #4A5457;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .quiz_box .btn_quiz.select {
  color: #1A84EA;
  background-color: #ffffff;
  border: 1px solid #1A84EA;
}
.viewer_cont.clip .warp_clip .clip_info .video_info .quiz_box .btn_quiz.error {
  border: 1px solid #EB4545;
  background-color: #FFE0E0;
  color: #EB4545;
}
.viewer_cont.clip .warp_clip .none_cont {
  flex: 1 1 0;
  min-width: 0;
  padding: 36px;
  border-radius: 16px;
  border: 1px solid #EDF1F1;
  background: #ffffff;
  box-shadow: 0px 20px 40px -10px rgba(19, 34, 39, 0.05);
}
.viewer_cont.clip .warp_clip .none_cont .txt {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  color: #96A1A4;
  height: 740px;
  line-height: 740px;
}
.viewer_cont.clip .warp_clip .right_cont {
  flex: 1 1 0;
  min-width: 0;
}
.viewer_cont.clip .warp_clip .right_cont .set_box {
  width: 100%;
  padding: 36px;
  border-radius: 16px;
  border: 1px solid #DDE4E6;
  background: #ffffff;
  box-shadow: 0px 20px 40px -10px rgba(19, 34, 39, 0.05);
}
.viewer_cont.clip .warp_clip .right_cont .set_box .tit_txt {
  display: block;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.viewer_cont.clip .warp_clip .right_cont .set_box .effect_set {
  overflow: hidden;
}
.viewer_cont.clip .warp_clip .right_cont .set_box .effect_set .inner_set {
  float: left;
  width: 50%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.viewer_cont.clip .warp_clip .right_cont .set_box .effect_set .inner_set .label_txt {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #7D878B;
}
.viewer_cont.clip .warp_clip .right_cont .set_box.subtitle .effect_set {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
}
.viewer_cont.clip .warp_clip .right_cont .set_box.subtitle .effect_set .inner_set {
  width: auto;
}
.viewer_cont.clip .warp_clip .right_cont .tip_box {
  margin-top: 24px;
}
.viewer_cont.clip .warp_clip .right_cont .tip_box .btn_toggle {
  position: relative;
  width: 100%;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #ffffff;
  border-radius: 16px 16px 0px 0px;
  background: var(--blue-gradient, linear-gradient(119deg, #3EA0FF 5.15%, #1682EB 52.58%));
  text-align: left;
}
.viewer_cont.clip .warp_clip .right_cont .tip_box .btn_toggle .ico {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  right: 24px;
}
.viewer_cont.clip .warp_clip .right_cont .tip_box .btn_toggle.down {
  border-radius: 16px;
}
.viewer_cont.clip .warp_clip .right_cont .tip_box .btn_toggle.down .ico {
  transform: rotate(180deg);
}
.viewer_cont.clip .warp_clip .right_cont .tip_box .toggle_cont {
  padding: 16px 24px;
  background-color: #ffffff;
  border-radius: 0 0 16px 16px;
}
.viewer_cont.clip .warp_clip .right_cont .tip_box .toggle_cont .question_box {
  margin-top: 12px;
}
.viewer_cont.clip .warp_clip .right_cont .tip_box .toggle_cont .question_box:first-child {
  margin-top: 0;
}
.viewer_cont.clip .warp_clip .right_cont .tip_box .toggle_cont .tip_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.viewer_cont.clip .warp_clip .right_cont .tip_box .toggle_cont .question {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.viewer_cont.clip .warp_clip .right_cont .tip_box .toggle_cont .answer {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.viewer_cont.clip .warp_clip .right_cont .ai_teacher {
  display: block;
  margin-top: 24px;
  border-radius: 16px;
  background-color: #ffaf16;
  box-shadow: 0px 20px 40px -10px rgba(19, 34, 39, 0.05);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #ffffff;
  position: relative;
  height: 56px;
  padding: 16px 24px;
}
.viewer_cont.clip .warp_clip .right_cont .ai_teacher .ico {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  right: 24px;
  transform: rotate(90deg);
}
.viewer_cont.video .container_xl {
  padding-bottom: 160px;
}

.viewer_player {
  z-index: 1;
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100px;
  border-top: 1px solid #EDF1F1;
}
.viewer_player .swiper-scrollbar {
  display: none;
}
.viewer_player .player_box {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  padding: 16px;
  max-width: 952px;
  margin: 0 auto;
}
.viewer_player .player_box .tool_box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.viewer_player .player_box .tool_box button {
  display: block;
  font-size: 0;
  text-indent: -9999em;
}
.viewer_player .player_box .tool_box button:disabled {
  opacity: 0.4;
}
.viewer_player .player_box .tool_box .btn_prev {
  width: 24px;
  height: 24px;
}
.viewer_player .player_box .tool_box .btn_pause {
  background: url(../images/pause_fill_down.svg) no-repeat 50% 50%;
  background-size: 32px 41px;
  width: 54px;
  height: 54px;
}
.viewer_player .player_box .tool_box .btn_pause.play {
  background: url(../images/Flattened-play.svg) no-repeat 50% 50%;
  background-size: 29px 36px;
}
.viewer_player .player_box .tool_box .btn_next {
  width: 24px;
  height: 24px;
}
.viewer_player .player_box .page_box {
  display: none;
}
.viewer_player .player_box .option_menu {
  display: none;
}
.viewer_player .player_box .option_box {
  position: absolute;
  top: 16px;
  right: 0;
  overflow: hidden;
}
.viewer_player .player_box .option_box a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  float: left;
  width: 75px;
  height: 68px;
}
.viewer_player .player_box .option_box a .num {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.viewer_player .player_box .option_box a .txt {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}
.viewer_player .player_box .option_box a .ico {
  width: 24px;
  height: 24px;
}
.viewer_player .player_box .option_box a.link_repeat .repeat-blue {
  display: none;
}
.viewer_player .player_box .option_box a.link_repeat.on .repeat-gray {
  display: none;
}
.viewer_player .player_box .option_box a.link_repeat.on .repeat-blue {
  display: block;
}
.viewer_player .player_box .option_box a.link_repeat.on .txt {
  color: #1A84EA;
}
.viewer_player.clip .player_box {
  max-width: 1172px;
}
.viewer_player.clip .player_box .option_box {
  position: relative;
  top: 0;
}
.viewer_player.clip .player_box .option_box a {
  height: 100%;
}
.viewer_player.clip .player_box .option_box a .txt {
  color: #96A1A4;
}
.viewer_player.clip .player_box .option_box a .num {
  color: #96A1A4;
}
.viewer_player.clip .player_box .option_box.left {
  margin-right: auto;
}
.viewer_player.clip .player_box .option_box.right {
  margin-left: auto;
}
.viewer_player.clip .player_box .tool_box button {
  cursor: pointer;
}
.viewer_player.clip .player_box .tool_box .btn_prev, .viewer_player.clip .player_box .tool_box .btn_next {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  text-indent: 0;
  width: auto;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.viewer_player.clip .player_box .tool_box .btn_prev .ico, .viewer_player.clip .player_box .tool_box .btn_next .ico {
  width: 22px;
  height: 22px;
}
.viewer_player.clip .player_box .btn_repeat {
  display: none;
}

.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: #132227;
}
.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;
}

.error_page {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  height: 100%;
}
.error_page .top_logo {
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  width: 100%;
  height: 72px;
  border-bottom: 1px solid #EDF1F1;
}
.error_page .top_logo .link_home img {
  width: 160px;
  vertical-align: middle;
}
.error_page .error_box {
  text-align: center;
}
.error_page .error_box .tit {
  color: #132227;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  display: block;
  margin-top: 20px;
  margin-bottom: 4px;
}
.error_page .error_box .txt {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #7D878B;
}
.error_page .error_box .foot_box {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.error_page .error_box .foot_box .noti_txt {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #1A84EA;
}
.error_page .error_box .notice_box {
  text-align: center;
  padding: 24px 48px;
  border-radius: 10px;
  background-color: #F4FAFF;
}
.error_page .error_box .notice_box .notice_txt {
  color: #1A84EA;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
}

.pdf_page .layer_modal {
  display: block;
  padding: 48px 24px;
  max-width: 595px;
  height: auto;
  position: relative;
}
.pdf_page .layer_modal .sub_tit {
  display: block;
  margin-top: 40px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.pdf_page .layer_modal .list_history.attend {
  margin-top: 16px;
}
.pdf_page .layer_modal .list_history.attend .inner .cont_area .txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.pdf_page .layer_modal .proof_txt {
  margin: 40px 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.pdf_page .layer_modal .company_coating {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  margin-bottom: 54px;
}
.pdf_page .layer_modal .company_coating .txt_box .date {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  display: block;
}
.pdf_page .layer_modal .company_coating .txt_box .name {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}
.pdf_page .layer_modal .company_coating .box_stamp {
  width: 60px;
  height: 60px;
}
.pdf_page .layer_modal .class_num {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 40px;
}
.pdf_page .layer_modal .class_num .txt {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #4A5457;
}
.pdf_page .layer_modal .tbl_class {
  margin-top: 20px;
  border-bottom: 1px solid #DDE4E6;
}
.pdf_page .layer_modal .tbl_class th {
  text-align: left;
  padding: 6px;
  background-color: #EDF1F1;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  border-top: 1px solid #DDE4E6;
  height: 28px;
}
.pdf_page .layer_modal .tbl_class td {
  max-width: 260px;
  padding: 6px;
  border-top: 1px solid #DDE4E6;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #4A5457;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdf_page .layer_modal .tbl_class td.ing {
  color: #1A84EA;
}

@media (hover: hover) and (pointer: fine) {
  .option_ticket a.link_option:hover {
    background: #F4FAFF;
  }
}
.layer_modal.ticketModal .ticekt_detail {
  box-shadow: 0px 20px 40px -10px rgba(19, 34, 39, 0.05);
  background: #f8fbfb;
  border-radius: 10px;
  border: 1px solid #EDF1F1;
  max-width: 360px;
  padding: 24px 16px;
  margin: 24px auto 0;
}
.layer_modal.ticketModal .ticekt_detail .inner {
  margin-bottom: 16px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
}
.layer_modal.ticketModal .ticekt_detail .inner .tit {
  color: #132227;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}
.layer_modal.ticketModal .ticekt_detail .inner .detail {
  margin-left: auto;
  color: #132227;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
}
.layer_modal.ticketModal .ticekt_detail .inner:last-child {
  margin-bottom: 0;
}
.layer_modal.loginModal .body_cont {
  padding: 32px 32px 48px;
}
.layer_modal.loginModal .body_cont .close_box {
  margin-bottom: 36px;
  text-align: right;
  padding-right: 16px;
}
.layer_modal.loginModal .body_cont .close_box .btn_close {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}
.layer_modal.loginModal .body_cont .tit_txt {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #132227;
  text-align: center;
}
.layer_modal.loginModal .login_box {
  padding: 0 16px;
  gap: 36px;
}
.layer_modal.idLinking .body_cont {
  padding-top: 32px;
  padding-bottom: 32px;
}
.layer_modal.idLinking .noti_txt {
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}
.layer_modal.idLinking .noti_txt .point_txt {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #1A84EA;
}
.layer_modal.idLinking .login_box {
  margin: 24px 0;
}
.layer_modal.account_choose .body_cont {
  padding-top: 32px;
  padding-bottom: 32px;
}
.layer_modal.account_choose .noti_txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}
.layer_modal.account_choose .choose_box {
  margin: 24px 0;
}
.layer_modal.account_choose .choose_box .comm_chk {
  margin-top: 16px;
}
.layer_modal.account_choose .choose_box .comm_chk:first-child {
  margin-top: 0;
}
.layer_modal.liking .body_cont {
  padding-top: 32px;
  padding-bottom: 32px;
}
.layer_modal.liking .noti_txt {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}
.layer_modal.phone_change .login_form, .layer_modal.login_account .login_form {
  gap: 16px;
}
.layer_modal.ticketClear .body_cont .txt {
  color: #132227;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  margin-top: 16px;
}
.layer_modal.ticketClear .notice_box {
  max-width: 360px;
  padding: 24px 16px;
  margin: 24px auto;
  background-color: #f8fbfb;
  border-radius: 10px;
  border: 1px solid #EDF1F1;
  box-shadow: 0px 20px 40px -10px rgba(19, 34, 39, 0.05);
}
.layer_modal.ticketClear .notice_box .list_notice {
  margin-left: 16px;
}
.layer_modal.ticketClear .notice_box .list_notice li {
  list-style: disc;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.layer_modal.ticketClear .agree_chk {
  margin-bottom: 16px;
  padding-left: 44px;
}
.layer_modal.ticketClear .agree_chk .label_txt {
  color: #1A84EA;
}
.layer_modal.docDown .form_box {
  max-width: 360px;
  margin: 16px auto;
}
.layer_modal.docDown .form_box .box_input.radio {
  margin-top: 24px;
  overflow: hidden;
}
.layer_modal.docDown .form_box .box_input.radio .txt_label {
  margin-bottom: 8px;
}
.layer_modal.docDown .form_box .box_input.radio .comm_chk {
  float: left;
  margin-right: 20px;
}
.layer_modal.receipt .body_cont {
  padding-top: 32px;
  padding-bottom: 32px;
}
.layer_modal.receipt .tit_box {
  position: relative;
}
.layer_modal.receipt .tit_box .tit {
  font-size: 28px;
  font-weight: 700;
  line-height: 38px;
  color: #132227;
}
.layer_modal.receipt .tit_box .sub_txt {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #96A1A4;
}
.layer_modal.receipt .tit_box .logo_img {
  position: absolute;
  top: 0;
  right: 0;
}
.layer_modal.receipt .ticket_list {
  margin-top: 40px;
}
.layer_modal.receipt .ticket_list .tit {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: #132227;
}
.layer_modal.receipt .ticket_list .list {
  margin-top: 4px;
  color: #96A1A4;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.layer_modal.receipt .list_history {
  margin-top: 30px;
  padding: 16px 0;
  border-top: 1px solid #DDE4E6;
  border-bottom: 1px solid #DDE4E6;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
}
.layer_modal.receipt .list_history .inner {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0px;
}
.layer_modal.receipt .list_history .inner .tit {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5457;
}
.layer_modal.receipt .list_history .inner .cont_area {
  margin-left: auto;
  text-align: right;
}
.layer_modal.receipt .list_history .inner .cont_area .txt {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.layer_modal.receipt .list_history .inner .cont_area .price {
  color: #1A84EA;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.layer_modal.receipt .list_history .inner .cont_area .id_info {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.layer_modal.receipt .list_history .inner .cont_area .id_info .icon {
  width: 18px;
  height: 18px;
}
.layer_modal.receipt .list_history .inner .cont_area .ticket_list .ticekt_txt {
  display: block;
  text-align: right;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #7D878B;
}
.layer_modal.receipt .notice_txt {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #96A1A4;
  margin-top: 30px;
}
.layer_modal.receipt .company_info {
  margin-top: 40px;
  padding: 16px;
  background-color: #f8fbfb;
  border-radius: 10px;
}
.layer_modal.receipt .company_info .txt {
  color: #96A1A4;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: left;
}
.layer_modal.class_target .body_cont {
  padding-top: 32px;
  padding-bottom: 32px;
}
.layer_modal.class_target .body_cont .wrap_option {
  margin-top: 24px;
}
.layer_modal.mainPop .layer_cont {
  width: auto;
}
.layer_modal.mainPop .link_banner {
  display: block;
  height: calc(var(--vh, 1vh) * 88 - 52px);
}
.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;
}
.layer_modal.detailModal .dimd {
  z-index: -1;
}
.layer_modal.detailModal .layer_cont {
  width: auto;
  background: none;
  max-width: 620px; /*500+24+24+36+36*/
  overflow: auto; /* 스크롤 기능 유지 */
  -ms-overflow-style: none; /* IE, Edge */
  scrollbar-width: none; /* Firefox */
}
.layer_modal.detailModal .layer_cont::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
.layer_modal.detailModal .layer_cont .wrap_slide {
  width: 100%;
  text-align: center;
}
.layer_modal.detailModal .layer_cont .wrap_slide .detail_swiper {
  position: relative;
}
.layer_modal.detailModal .layer_cont .link_cont {
  display: block;
  text-align: center;
}
.layer_modal.detailModal .layer_cont .thumb_box {
  display: block;
  position: relative;
  padding: 0px 16px;
}
.layer_modal.detailModal .layer_cont .thumb_box .video_wrap {
  display: inline-block;
  position: relative;
  max-width: 500px;
  margin: 0 auto;
}
.layer_modal.detailModal .layer_cont .thumb_box .video_wrap .video-slide {
  width: 100%; /* wrapper에 딱 맞게 */
  z-index: 10;
  border-radius: 12px;
}
.layer_modal.detailModal .layer_cont .thumb_box .video_wrap .ico {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -24px;
  margin-left: -24px;
  width: 48px;
  height: 48px;
  z-index: 1;
}
.layer_modal.detailModal .detail_swiper .swiper-wrapper {
  padding: 50px 0;
}
.layer_modal.detailModal .detail_swiper .swiper-slide {
  width: fit-content;
  border-radius: 12px;
}
.layer_modal.detailModal .detail_swiper .swiper-slide .link_cont {
  text-align: center;
}
.layer_modal.detailModal .detail_swiper .circle_prev {
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 0;
  width: 36px;
  height: 36px;
  margin-top: -20px;
  z-index: 5;
  cursor: pointer;
}
.layer_modal.detailModal .detail_swiper .circle_next {
  position: absolute;
  top: 50%;
  right: 0;
  bottom: auto;
  left: auto;
  width: 36px;
  height: 36px;
  margin-top: -20px;
  z-index: 5;
  cursor: pointer;
}
.layer_modal.detailModal .detail_swiper .wrap_paging {
  width: 100%;
  height: 26px;
  position: absolute;
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  text-align: center;
}
.layer_modal.detailModal .detail_swiper .wrap_paging .swiper-pagination {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: auto;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
  padding: 8px 12px;
  display: inline-flex;
  gap: 10px;
}
.layer_modal.detailModal .detail_swiper .wrap_paging .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: #B0BBBE;
  margin: 0;
}
.layer_modal.detailModal .detail_swiper .wrap_paging .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #ffffff;
}
.layer_modal.memoWrite {
  padding-left: 16px;
  padding-right: 16px;
}
.layer_modal.memoWrite .body_cont {
  padding-top: 32px;
  padding-bottom: 32px;
}
.layer_modal.memoWrite .memo_notice {
  position: relative;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  padding-left: 20px;
  color: #132227;
}
.layer_modal.memoWrite .memo_notice:before {
  display: block;
  width: 8px;
  height: 100%;
  background-color: #DDE4E6;
  border-radius: 100px;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
}
.layer_modal.memoWrite .form_box {
  position: relative;
  margin-top: 24px;
}
.layer_modal.memoWrite .form_box textarea {
  padding: 16px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  background-color: #F4FAFF;
  border: 1px solid #E2F2FF;
  resize: none;
  width: 100%;
  height: 168px;
  border-radius: 8px;
}
.layer_modal.memoWrite .form_box textarea::placeholder {
  color: #BADDFD;
}
.layer_modal.memoWrite .form_box textarea:focus {
  border: 1px solid #1A84EA;
  outline: none;
}
.layer_modal.memoWrite .form_box .cont_num {
  position: absolute;
  right: 16px;
  bottom: 16px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #BADDFD;
}
.layer_modal.readSpeed .comm_chk, .layer_modal.fontSize .comm_chk {
  margin-bottom: 24px;
}
.layer_modal.readSpeed .comm_chk:last-child, .layer_modal.fontSize .comm_chk:last-child {
  margin-bottom: 0;
}
.layer_modal.aiCoach .body_cont {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0px;
}
.layer_modal.aiCoach .foot_cont {
  border-top: none;
  padding-top: 0;
}
.layer_modal.aiCoach .wrap_chat {
  min-height: 100px;
  overflow: scroll;
  overflow: auto;
  -ms-overflow-style: none; /* IE, Edge */
  scrollbar-width: none; /* Firefox */
}
.layer_modal.aiCoach .wrap_chat::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
.layer_modal.aiCoach .chat_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.layer_modal.aiCoach .chat_box:first-child {
  margin-top: 0;
}
.layer_modal.aiCoach .chat_box .profile_thumb {
  width: 24px;
  height: 24px;
}
.layer_modal.aiCoach .chat_box .profile_thumb img {
  width: 100%;
}
.layer_modal.aiCoach .chat_box .txt_box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}
.layer_modal.aiCoach .chat_box .txt_box .person {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.layer_modal.aiCoach .chat_box .txt_box .answer {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}
.layer_modal.aiCoach .inp_box {
  width: 100%;
  position: relative;
  padding-top: 16px;
  background-color: #ffffff;
}
.layer_modal.aiCoach .inp_box .file_add {
  position: absolute;
  top: 50%;
  margin-top: -4px;
  left: 16px;
}
.layer_modal.aiCoach .inp_box .file_add #fileInput {
  display: none; /* 진짜 input은 숨김 */
}
.layer_modal.aiCoach .inp_box .file_add .file_label {
  cursor: pointer;
  display: inline-block;
}
.layer_modal.aiCoach .inp_box .file_add .file_label img {
  width: 24px;
  height: 24px;
}
.layer_modal.aiCoach .inp_box textarea {
  width: 100%;
  border: 1px solid #DDE4E6;
  padding: 16px 56px;
  resize: none;
  border-radius: 8px;
  height: 56px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  overflow: auto;
  -ms-overflow-style: none; /* IE, Edge */
  scrollbar-width: none; /* Firefox */
}
.layer_modal.aiCoach .inp_box textarea ::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
.layer_modal.aiCoach .inp_box textarea::placeholder {
  color: #B0BBBE;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}
.layer_modal.aiCoach .inp_box textarea:focus {
  border: 1px solid #1A84EA;
  outline: none;
}
.layer_modal.aiCoach .inp_box .btn_send {
  position: absolute;
  top: 50%;
  margin-top: -4px;
  right: 16px;
  width: 24px;
  height: 24px;
  font-size: 0;
  text-indent: -999em;
  background: url("../images/send.svg") no-repeat 50% 50%;
}
.layer_modal.dictionary .layer_cont {
  max-width: 1060px;
  width: 100%;
}
.layer_modal.dictionary .body_cont {
  padding: 0;
  overflow-y: hidden;
}
.layer_modal.audioControl {
  align-items: flex-end;
  padding: 0;
  z-index: 2;
}
.layer_modal.audioControl .layer_cont {
  border-radius: 12px 12px 0 0;
  width: 100%;
}
.layer_modal.audioControl .thumb_box {
  max-width: 90px;
  margin: 0 auto 16px;
}
.layer_modal.audioControl .thumb_box img {
  border-radius: 6px;
}
.layer_modal.audioControl .btn_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  margin-bottom: 16px;
}
.layer_modal.audioControl .btn_box .btn {
  padding: 8px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.layer_modal.audioControl .btn_box .btn .ico {
  width: 24px;
  height: 24px;
}
.layer_modal.audioControl .btn_box .btn .ico_txt {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #96A1A4;
}
.layer_modal.audioControl .btn_box .btn .txt {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #96A1A4;
}
.layer_modal.audioControl .player_box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.layer_modal.audioControl .player_box button, .layer_modal.audioControl .player_box a {
  display: block;
  font-size: 0;
  text-indent: -9999em;
}
.layer_modal.audioControl .player_box button:disabled, .layer_modal.audioControl .player_box a:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.layer_modal.audioControl .player_box .btn_prev {
  width: 24px;
  height: 24px;
}
.layer_modal.audioControl .player_box .btn_pause {
  background: url(../images/pause_fill_down.svg) no-repeat 50% 50%;
  background-size: 28px 36px;
  width: 48px;
  height: 48px;
}
.layer_modal.audioControl .player_box .btn_pause.play {
  background: url(../images/Flattened-play.svg) no-repeat 50% 50%;
}
.layer_modal.audioControl .player_box .btn_next {
  width: 24px;
  height: 24px;
}
.layer_modal.videoSubtitles .switch_box {
  padding: 12px 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
}
.layer_modal.videoSubtitles .switch_box .label_txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}
.layer_modal.videoSubtitles .switch_box .btn_switch {
  margin-left: auto;
}
.layer_modal.setEffect .switch_box {
  padding: 12px 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
}
.layer_modal.setEffect .switch_box .label_txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}
.layer_modal.setEffect .switch_box .btn_switch {
  margin-left: auto;
}
.layer_modal.moVideoControl {
  align-items: flex-end;
  padding: 0;
  z-index: 2;
}
.layer_modal.moVideoControl .layer_cont {
  border-radius: 12px 12px 0 0;
  width: 100%;
}
.layer_modal.moVideoControl .thumb_box {
  max-width: 157px;
  border-radius: 2px;
  overflow: hidden;
  margin: 0 auto;
}
.layer_modal.moVideoControl .btn_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  margin-bottom: 16px;
  margin-top: 16px;
}
.layer_modal.moVideoControl .btn_box .btn {
  padding: 8px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.layer_modal.moVideoControl .btn_box .btn .ico {
  width: 24px;
  height: 24px;
}
.layer_modal.moVideoControl .btn_box .btn .ico_txt {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
}
.layer_modal.moVideoControl .btn_box .btn .txt {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}
.layer_modal.moVideoControl .btn_box .btn_repeat .repeat-blue {
  display: none;
}
.layer_modal.moVideoControl .btn_box .btn_repeat.on .repeat {
  display: none;
}
.layer_modal.moVideoControl .btn_box .btn_repeat.on .repeat-blue {
  display: block;
}
.layer_modal.moVideoControl .btn_box .btn_repeat.on .txt {
  color: #1A84EA;
}
.layer_modal.moVideoControl .list_link a {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
  padding: 12px 0;
}
.layer_modal.moVideoControl .list_link a .ico_box {
  width: 20px;
  height: 20px;
}
.layer_modal.moVideoControl .list_link a .ico_box.replay {
  background: url("../images/replay.svg") no-repeat 50% 50%;
  background-size: 18px 17px;
}
.layer_modal.moVideoControl .list_link a .ico_box.bookmark {
  background: url("../images/bookmark.svg") no-repeat 50% 50%;
  background-size: 12px 14px;
}
.layer_modal.moVideoControl .list_link a .ico_box.left-circle {
  background: url("../images/left-circle.svg") no-repeat 50% 50%;
  background-size: 18px 18px;
}
.layer_modal.moVideoControl .list_link a .ico_box.right-circle {
  background: url("../images/right-circle.svg") no-repeat 50% 50%;
  background-size: 18px 18px;
}
.layer_modal.moVideoControl .list_link a .ico_box.share {
  background: url("../images/share.svg") no-repeat 50% 50%;
  background-size: 17px 18px;
}
.layer_modal.moVideoControl .player_box {
  margin-top: 16px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.layer_modal.moVideoControl .player_box button, .layer_modal.moVideoControl .player_box a {
  display: flex;
  gap: 3px;
  align-items: center;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}
.layer_modal.moVideoControl .player_box button:disabled, .layer_modal.moVideoControl .player_box a:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.layer_modal.moVideoControl .player_box button .ico, .layer_modal.moVideoControl .player_box a .ico {
  width: 20px;
  height: 20px;
}
.layer_modal.moVideoControl .player_box .btn_pause {
  background: url(../images/pause_fill_down.svg) no-repeat 50% 50%;
  background-size: 28px 36px;
  width: 48px;
  height: 48px;
  font-size: 0;
  text-indent: -9999em;
}
.layer_modal.moVideoControl .player_box .btn_pause.play {
  background: url(../images/Flattened-play.svg) no-repeat 50% 50%;
}
.layer_modal.moVideoControl .clip_step2 .btn_box {
  justify-content: center;
}
.layer_modal.moVideoControl .clip_step2 .btn_box .btn {
  max-width: 120px;
}
.layer_modal.learningTip .tip_box {
  margin-top: 16px;
}
.layer_modal.learningTip .tip_box:first-child {
  margin-top: 0;
}
.layer_modal.learningTip .tip_box .tit_box {
  margin-bottom: 8px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}
.layer_modal.learningTip .tip_box .tit_box .tit {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #132227;
  flex: 1;
}
.layer_modal.learningTip .tip_box .cont_txt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding: 0 8px;
  color: #132227;
}
.layer_modal.stepMove .step_link {
  padding: 16px 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.layer_modal.stepMove .step_link .tit {
  flex: 1 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #132227;
}
.layer_modal.stepMove .step_link .ico {
  margin-left: auto;
  width: 8px;
  height: 14px;
}

@media screen and (max-width:1199px) {
  .campus_header .wrap_header {
    padding: 0;
    height: 52px;
    text-align: center;
  }
  .campus_header .wrap_header .home_logo {
    width: 100%;
    height: 52px;
    top: auto;
    left: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0px;
  }
  .campus_header .wrap_header .home_logo .link_home {
    height: 20px;
  }
  .campus_header .wrap_header .campus_nav {
    display: none;
  }
  .campus_header .wrap_header .box_login {
    top: 10px;
    right: 16px;
  }
  .campus_header .wrap_header .box_login .wrap_alarm {
    margin-right: 2px;
    margin-left: 0;
  }
  .campus_header .wrap_header .box_login .wrap_alarm .box_alarm {
    right: calc(100% - 24px);
  }
  .campus_header .wrap_header .btn_open {
    top: 19px;
    left: 16px;
    right: auto;
  }
  .campus_footer .sns_link {
    width: 100%;
  }
  .campus_footer .company_info {
    width: 100%;
  }
  .bottom_nav {
    display: block;
    position: fixed;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    border-top: 2px solid #EDF1F1;
    width: 100%;
    background-color: #ffffff;
  }
  .bottom_nav .list_nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0px;
    text-align: center;
    height: 58px;
  }
  .bottom_nav .list_nav li {
    flex: 1;
  }
  .bottom_nav .list_nav li.on a {
    color: #1A84EA;
  }
  .bottom_nav .list_nav li.home .ico {
    background-image: url("../images/home-ico.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    width: 18px;
    height: 18px;
  }
  .bottom_nav .list_nav li.home.on .ico {
    background-image: url("../images/home-blue.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
  }
  .bottom_nav .list_nav li.view .ico {
    background-image: url("../images/compass.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    width: 18px;
    height: 19px;
  }
  .bottom_nav .list_nav li.view.on .ico {
    background-image: url("../images/compass-blue.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
  }
  .bottom_nav .list_nav li.search .ico {
    background-image: url("../images/search.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    width: 20px;
    height: 20px;
  }
  .bottom_nav .list_nav li.search.on .ico {
    background-image: url("../images/search-blue.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
  }
  .bottom_nav .list_nav li.box .ico {
    background-image: url("../images/drawer.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    width: 18px;
    height: 16px;
  }
  .bottom_nav .list_nav li.box.on .ico {
    background-image: url("../images/inbox-blue.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
  }
  .bottom_nav .list_nav li.set .ico {
    background-image: url("../images/ico-set.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    width: 18px;
    height: 18px;
  }
  .bottom_nav .list_nav li.set.on .ico {
    background-image: url("../images/settings-blue.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
  }
  .bottom_nav .list_nav li a {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: #132227;
  }
  .curation_box .list_curation.video {
    gap: 28px;
  }
  .curation_box .list_curation.video li:nth-child(n+4) {
    display: block;
  }
  .curation_box .list_curation.masterpiece {
    gap: 32px;
  }
  .curation_box .list_curation.masterpiece li:nth-child(n+6) {
    display: block;
  }
  .curation_box .list_curation.expression {
    gap: 32px;
  }
  .curation_box .list_curation.expression li:nth-child(n+5) {
    display: block;
  }
  .curation_box .list_curation.weekly {
    gap: 32px;
  }
  .curation_box .list_curation.weekly li:nth-child(n+6) {
    display: block;
  }
  .curation_box .list_curation.write {
    gap: 28px;
  }
  .curation_box .list_curation.write li:nth-child(n+4) {
    display: block;
  }
  .curation_box .list_curation.audio {
    gap: 36px;
  }
  .curation_box.no_scroll {
    margin: 0 -12px;
  }
  .curation_box.no_scroll .list_curation {
    gap: 0;
  }
  .curation_box.no_scroll .list_curation li {
    padding: 0 12px;
  }
  .curation_box.no_scroll .list_curation.audio {
    gap: 0;
  }
  .curation_box.no_scroll .list_curation.audio li {
    width: 20%;
  }
  .wrap_page.main .container_xl {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .wrap_page.main .hero_cont {
    max-width: none;
    padding: 0;
  }
  .wrap_page.main .hero_cont .hero_swiper {
    max-width: none;
    width: 100%;
  }
  .wrap_page.main .hero_cont .hero_swiper .link_cont {
    border-radius: 0;
  }
  .wrap_page.main .hero_cont .hero_swiper .dimmed {
    border-radius: 0;
  }
  .wrap_page.main .hero_cont .hero_side {
    display: none;
  }
  .wrap_page.main .hero_bottom {
    display: block;
    width: 100%;
  }
  .wrap_page.main .hero_bottom .hero_side {
    max-width: none;
  }
  .wrap_page.main .hero_bottom .hero_side .swiper-slide {
    width: 100%;
    height: 262px;
  }
  .wrap_page.main .hero_bottom .hero_side .swiper-slide .link_cont {
    padding: 16px 24px;
    justify-content: flex-start;
  }
  .wrap_page.main .hero_bottom .hero_side .swiper-slide .link_cont .tumnb1 {
    width: 120px;
  }
  .wrap_page.main .hero_bottom .hero_side .swiper-slide .link_cont .tumnb2 {
    width: 134px;
  }
  .wrap_page.main .hero_bottom .hero_side .swiper-slide .link_cont .tumnb3 {
    width: 153px;
  }
  .wrap_page.main .hero_bottom .hero_side .swiper-slide .txt_box {
    margin-top: 16px;
    text-align: center;
  }
  .wrap_page.main .hero_bottom .hero_side .swiper-slide .txt_box br {
    display: none;
  }
  .wrap_page.main .hero_bottom .hero_side .swiper-slide .txt_box .bar {
    display: inline-block;
  }
  .wrap_page.main .hero_bottom .hero_side .wrap_paging {
    bottom: 16px;
  }
  .wrap_page.main .recent_history .list_history li {
    width: 240px;
  }
  .wrap_page.search .search_head {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .wrap_page.search .search_cont {
    gap: 60px;
  }
  .wrap_page.storage .list_curation.book {
    margin-top: 20px;
  }
  .wrap_page.storage .time_box {
    display: block;
  }
  .wrap_page.storage .time_box .shadow_box {
    width: 100%;
  }
  .wrap_page.storage .time_box .shadow_box:first-child {
    margin-bottom: 16px;
  }
  .wrap_page.storage .time_box .wrap_graph {
    height: auto;
  }
  .wrap_page.storage .time_box .wrap_graph.month .progress_box {
    width: 10px;
  }
  .wrap_page.storage .time_box .wrap_graph.month .progress_box progress {
    height: 10px;
    margin-left: 5px;
  }
  .wrap_page.storage .time_box .wrap_graph.month .progress_box progress.zero {
    height: 10px;
    width: 10px;
  }
  .wrap_page.around_tab .container_xl {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .wrap_page.around_tab .wrap_tab {
    margin: 0 -16px;
  }
  .wrap_page.around_tab .wrap_tab .top_tab {
    overflow: hidden;
    display: flex;
    width: 100%;
    height: auto;
    -webkit-overflow-scrolling: touch;
  }
  .wrap_page.around_tab .wrap_tab .top_tab .tab_cont {
    display: flex;
    flex-wrap: nowrap;
    width: 110%;
    align-items: flex-start;
    overflow-x: scroll;
    overflow-y: hidden;
    -ms-overflow-style: none; /* IE, Edge */
    scrollbar-width: none; /* Firefox */
    -webkit-overflow-scrolling: touch; /* iOS 부드럽게 */
    height: auto;
    padding: 0 16px;
  }
  .wrap_page.around_tab .wrap_tab .top_tab .tab_cont::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }
  .wrap_page.around_tab .wrap_tab .top_tab .tab_cont button {
    flex-shrink: 0;
  }
  .wrap_page.around_tab .toggle_btn {
    display: none;
  }
  .wrap_page.around .list_cont {
    grid-template-columns: repeat(2, calc((100% - 24px) / 2));
    row-gap: 24px;
  }
  .wrap_page.article_top .container_xl {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .wrap_page.article_top .top_cont .thumb_box {
    max-width: 326px;
  }
  .wrap_page.article_contents .container_xl {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media screen and (max-width:1079px) {
  .campus_header .wrap_header .box_login .wrap_alarm {
    display: none;
  }
  .error_page .top_logo {
    height: 52px;
  }
  .error_page .top_logo .link_home img {
    width: 132px;
  }
  .error_page .error_box .tit {
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
  }
  .error_page .error_box .txt {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
  }
  .error_page .error_box .notice_box {
    padding-left: 8px;
    padding-right: 8px;
  }
  .curation_box.no_scroll .list_curation.audio li {
    width: 25%;
  }
  .wrap_page.audio_top .container_xl {
    padding: 0;
  }
  .wrap_page.audio_top .top_cont {
    display: block;
  }
  .wrap_page.audio_top .top_cont .thumb_box {
    max-width: none;
    width: 100%;
    padding: 32px 0 64px;
  }
  .wrap_page.audio_top .top_cont .thumb_box > img {
    max-width: 144px;
  }
  .wrap_page.audio_top .top_cont .txt_box {
    position: relative;
    z-index: 10;
    padding: 40px 16px 30px;
    border-radius: 36px 36px 0px 0px;
    margin-top: -36px;
    background-color: #ffffff;
  }
  .wrap_page.audio_top .top_cont .txt_box .tag_box {
    margin-bottom: 12px;
  }
  .wrap_page.audio_top .top_cont .txt_box .btn_box {
    margin-top: 12px;
  }
  .wrap_page.audio_contents .container_xl {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .wrap_page.audio_contents .list_box {
    gap: 24px;
  }
  .wrap_page.audio_contents .list_box .list_tit {
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
  }
  .wrap_page.audio_contents .list_box .intro_box {
    padding: 16px;
  }
  .wrap_page.audio_contents .list_box .chpter_box li .link_box {
    padding: 16px 48px 16px 16px;
  }
  .wrap_page.audio_contents .list_box .chpter_box li .link_box:after {
    right: 16px;
  }
  .wrap_page.audio_contents .list_box .chpter_box li .link_box .tit_txt {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
  }
  .wrap_page.audio_contents .list_box .chpter_box li .link_box .sub_txt {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
  }
  .viewer_cont.clip .container_xl {
    padding: 40px 8px;
  }
  .viewer_cont.clip .warp_clip {
    display: block;
  }
  .viewer_cont.clip .warp_clip .clip_info {
    max-width: none;
  }
  .viewer_cont.clip .warp_clip .clip_info .youtube_thumb.video {
    margin-bottom: 24px;
  }
  .viewer_cont.clip .warp_clip .none_cont {
    display: none;
  }
  .viewer_cont.clip .warp_clip .right_cont .set_box {
    display: none;
  }
  .viewer_cont.clip .warp_clip .right_cont .ai_teacher {
    display: none;
  }
  .viewer_cont.video .container_xl {
    padding-bottom: 140px;
  }
  .viewer_cont.video .youtube_thumb {
    padding-bottom: 24px;
  }
}
@media screen and (max-width:767px) {
  .wrap_page.storage .list_curation.book li .more_box .menu_layer {
    position: fixed;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    padding-top: 0;
  }
  .wrap_page.storage .list_curation.book li .more_box .menu_layer.active {
    width: 100%;
  }
  .wrap_page.storage .list_curation.book li .more_box .menu_layer.active .dimd {
    display: block;
    z-index: -1;
  }
  .wrap_page.storage .list_curation.book li .more_box .menu_layer .inner_cont {
    width: 100%;
    padding: 16px;
    border-radius: 12px 12px 0 0;
  }
  .wrap_page.storage .list_curation.book li .more_box .menu_layer .top_info {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    flex-wrap: nowrap;
    padding: 16px 0;
    border-bottom: 1px solid #DDE4E6;
    margin-bottom: 16px;
  }
  .wrap_page.storage .list_curation.book li .more_box .menu_layer .top_info .tumb_box {
    max-width: 120px;
    border-radius: 6px;
    overflow: hidden;
  }
  .wrap_page.storage .list_curation.book li .more_box .menu_layer .top_info .tit {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #132227;
    -webkit-line-clamp: 2;
  }
  .wrap_page.storage .list_curation.book li .more_box .menu_layer .top_info .author {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: #96A1A4;
  }
  .wrap_page.storage .list_curation.book li .more_box .menu_layer .menu_box {
    box-shadow: none;
    border-radius: 0;
  }
  .wrap_page.storage .list_curation.book li .more_box .menu_layer .menu_box .list_menu li .link_menu {
    padding-left: 0;
    padding-right: 0;
  }
  .wrap_page.storage .list_curation.book li .more_box .menu_layer .foot_cont {
    display: block;
    padding: 16px 16px 0 16px;
    margin: 16px -16px 0;
    border-top: 1px solid #DDE4E6;
  }
  .wrap_page.storage .list_curation.book li .more_box .more_menu .layer_modal {
    align-items: flex-end;
  }
  .wrap_page.storage .list_curation.book li .more_box .more_menu .layer_modal.active {
    display: flex;
  }
  .wrap_page.storage .list_curation.book li .more_box .more_menu .layer_modal.active .dimd {
    display: block;
  }
  .wrap_page.storage .list_curation.book li .more_box .more_menu .layer_modal .layer_cont {
    height: auto;
    border-radius: 12px 12px 0 0;
  }
  .viewer_header {
    height: 56px;
  }
  .viewer_header .container_lg {
    padding-left: 12px;
  }
  .viewer_header .container_xl {
    padding-left: 12px;
  }
  .viewer_header .header_box {
    gap: 4px;
  }
  .viewer_header .thumb_box {
    display: none;
  }
  .viewer_header .tit_box .sub_txt {
    display: none;
  }
  .viewer_header .right_link {
    gap: 8px;
  }
  .viewer_header .right_link .txt {
    display: none;
  }
  .viewer_header .right_link .link_ai .ico {
    width: 20px;
    height: 20px;
  }
  .viewer_header .right_link .link_search .ico {
    width: 17px;
    height: 17px;
  }
  .viewer_header .right_link .link_list .ico {
    width: 20px;
    height: 20px;
  }
  .viewer_header.clip .header_box {
    gap: 8px;
  }
  .viewer_header.clip .tit_box .clip_tit .tit_txt {
    background: none;
    padding-right: 0;
  }
  .viewer_header.clip .tit_box .sub_txt {
    display: none;
  }
  .viewer_cont {
    margin-top: 56px;
  }
  .viewer_cont .container_xl {
    padding: 24px 8px 104px 8px;
  }
  .viewer_cont .swiper_arr {
    display: none;
  }
  .viewer_cont .viewer_swiper {
    padding: 0;
  }
  .viewer_cont .viewer_swiper .pagination {
    display: none;
  }
  .viewer_cont .viewer_swiper .btn_next {
    display: none;
  }
  .viewer_cont .viewer_swiper .btn_prev {
    display: none;
  }
  .viewer_cont .viewer_swiper .swiper .swiper-slide {
    padding: 0;
  }
  .viewer_cont .viewer_swiper .swiper .swiper-slide .title_box {
    margin-bottom: 16px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }
  .viewer_cont .viewer_swiper .swiper .swiper-slide .title_box .bar {
    width: 4px;
    height: 68px;
  }
  .viewer_cont .viewer_swiper .swiper .swiper-slide .title_box .chapter_txt {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
  }
  .viewer_cont .viewer_swiper .swiper .swiper-slide .title_box .title_txt {
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
  }
  .viewer_cont .viewer_swiper .swiper .swiper-slide .title_box .sub_txt {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
  }
  .viewer_cont .viewer_swiper .swiper .swiper-slide .list_sentence li {
    padding: 16px 4px;
  }
  .viewer_cont.clip .container_xl {
    padding: 30px 16px;
  }
  .viewer_cont.clip .warp_clip .clip_info .youtube_thumb {
    margin-bottom: 16px;
  }
  .viewer_cont.clip .warp_clip .clip_info .youtube_thumb.video {
    margin-bottom: 16px;
  }
  .viewer_cont.clip .warp_clip .clip_info .info_box {
    padding: 24px;
  }
  .viewer_cont.clip .warp_clip .clip_info .info_box .tit_txt {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
  }
  .viewer_cont.clip .warp_clip .clip_info .info_box .explan_box .explan_txt {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
  }
  .viewer_cont.clip .warp_clip .clip_info .info_box .explan_box .read_more {
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
  }
  .viewer_cont.clip .warp_clip .clip_info .info_box .btn_box {
    margin-top: 24px;
  }
  .viewer_cont.clip .warp_clip .clip_info .info_box .btn_box .btn_primary {
    margin-top: 8px;
  }
  .viewer_cont.clip .warp_clip .clip_info .infoSwiper .swiper-pagination {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    top: 18px;
    right: 24px;
  }
  .viewer_cont.clip .warp_clip .clip_info .video_info {
    padding: 24px;
  }
  .viewer_cont.clip .warp_clip .clip_info .video_info .sentence_num {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
  }
  .viewer_cont.clip .warp_clip .clip_info .video_info .pronunc_txt {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }
  .viewer_cont.clip .warp_clip .clip_info .video_info .language_txt {
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
  }
  .viewer_cont.clip .warp_clip .clip_info .video_info .analysis_txt {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
  }
  .viewer_cont.clip .warp_clip .clip_info .video_info .btn_box {
    margin-top: 24px;
  }
  .viewer_cont.clip .warp_clip .clip_info .video_info .recording_box {
    margin-top: 24px;
  }
  .viewer_cont.clip .warp_clip .clip_info .video_info .recording_confirm {
    margin-top: 24px;
  }
  .viewer_cont.clip .warp_clip .clip_info .video_info .recording_confirm .audio_player .play_btn {
    margin-right: 8px;
  }
  .viewer_cont.clip .warp_clip .clip_info .video_info .recording_confirm .audio_player .time_txt {
    padding-left: 10px;
  }
  .viewer_cont.clip .warp_clip .clip_info .video_info .recording_confirm .button_box {
    margin-top: 24px;
  }
  .viewer_cont.clip .warp_clip .clip_info .video_info .quiz_box {
    margin-top: 24px;
  }
  .viewer_cont.clip .warp_clip .clip_info .video_info .quiz_box .btn_quiz {
    padding: 12px 24px;
  }
  .viewer_cont.clip .warp_clip .right_cont .tip_box {
    margin-top: 16px;
  }
  .viewer_cont.clip .warp_clip .right_cont .tip_box .btn_toggle {
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
  }
  .viewer_cont.clip .warp_clip .right_cont .tip_box .toggle_cont .question {
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
  }
  .viewer_cont.clip .warp_clip .right_cont .tip_box .toggle_cont .answer {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
  }
  .viewer_cont.video .container_xl {
    padding: 20px 8px 84px;
  }
  .viewer_cont.video .youtube_thumb {
    padding-bottom: 16px;
  }
  .viewer_player {
    height: 80px;
    padding: 16px;
  }
  .viewer_player .swiper-scrollbar {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 6px;
    top: 0;
    left: 0;
    max-width: 802px;
    background-color: #EDF1F1;
    border-radius: 4px;
    cursor: pointer;
  }
  .viewer_player .swiper-scrollbar .swiper-scrollbar-drag {
    position: relative;
    background-color: #1A84EA;
    border-radius: 4px;
  }
  .viewer_player .swiper-scrollbar .swiper-scrollbar-drag:before {
    content: "";
    background-color: #1A84EA;
    position: relative;
    left: -99vw;
    top: 0;
    position: absolute;
    bottom: 0;
    height: 100%;
    width: 100vw;
    z-index: 999;
  }
  .viewer_player .swiper-scrollbar .swiper-scrollbar-drag:after {
    position: absolute;
    top: 50%;
    margin-top: -6px;
    right: 0;
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background-color: #1A84EA;
    content: "";
  }
  .viewer_player .player_box {
    height: auto;
    padding: 12px 0 0 0;
  }
  .viewer_player .player_box .tool_box .btn_prev, .viewer_player .player_box .tool_box .btn_next {
    display: none;
  }
  .viewer_player .player_box .tool_box .btn_pause {
    width: 24px;
    height: 24px;
    background: url(../images/pause-fill.svg) no-repeat 50% 50%;
    background-size: 14px 18px;
  }
  .viewer_player .player_box .tool_box .btn_pause.play {
    background: url(../images/play-fill.svg) no-repeat 50% 50%;
    background-size: 13px 16px;
  }
  .viewer_player .player_box .page_box {
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
  }
  .viewer_player .player_box .page_box .btn_prev {
    width: 20px;
    height: 20px;
    font-size: 0;
    text-indent: -9999em;
    transform: rotate(180deg);
  }
  .viewer_player .player_box .page_box .btn_prev.swiper-button-disabled {
    opacity: 0.4;
    pointer-events: none;
  }
  .viewer_player .player_box .page_box .btn_next {
    width: 20px;
    height: 20px;
    font-size: 0;
    text-indent: -9999em;
  }
  .viewer_player .player_box .page_box .btn_next.swiper-button-disabled {
    opacity: 0.4;
    pointer-events: none;
  }
  .viewer_player .player_box .page_box .swiper-pagination {
    position: relative;
    bottom: auto;
    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: #B0BBBE;
    width: auto;
  }
  .viewer_player .player_box .page_box .swiper-pagination .swiper-pagination-current {
    color: #1A84EA;
  }
  .viewer_player .player_box .option_menu {
    display: block;
  }
  .viewer_player .player_box .option_menu .link_menu {
    display: block;
    text-align: center;
    width: 24px;
    height: 14px;
    font-size: 0;
    text-indent: -9999em;
  }
  .viewer_player .player_box .option_menu .link_menu .ico {
    width: 20px;
    height: 14px;
  }
  .viewer_player .player_box .option_box {
    display: none;
  }
  .viewer_player.clip {
    height: 64px;
  }
  .viewer_player.clip .player_box {
    padding-top: 0;
    height: 100%;
  }
  .viewer_player.clip .player_box .tool_box .btn_prev .ico, .viewer_player.clip .player_box .tool_box .btn_next .ico {
    width: 20px;
    height: 20px;
  }
  .viewer_player.clip .player_box .tool_box .btn_prev .txt, .viewer_player.clip .player_box .tool_box .btn_next .txt {
    display: none;
  }
  .viewer_player.clip .player_box .tool_box .btn_pause {
    width: 32px;
    height: 32px;
    background: url(../images/pause_fill_down.svg) no-repeat 50% 50%;
    background-size: 19px 24px;
  }
  .viewer_player.clip .player_box .tool_box .btn_pause.play {
    background: url(../images/Flattened-play.svg) no-repeat 50% 50%;
    background-size: 19px 24px;
  }
  .viewer_player.clip .player_box .tool_box.step3 button .txt {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    display: block;
  }
  .viewer_player.clip .player_box .option_menu {
    margin-left: auto;
  }
  .viewer_player.clip .player_box .btn_repeat {
    margin-right: auto;
    display: block;
    width: 20px;
    height: 20px;
    font-size: 0;
    text-indent: -999em;
  }
  .viewer_player.clip .player_box .btn_repeat .repeat-blue {
    display: none;
  }
  .viewer_player.clip .player_box .btn_repeat.on .repeat {
    display: none;
  }
  .viewer_player.clip .player_box .btn_repeat.on .repeat-blue {
    display: block;
  }
  .layer_modal.learningTip {
    align-items: flex-end;
    padding: 0;
  }
  .layer_modal.learningTip .layer_cont {
    border-radius: 12px 12px 0 0;
    width: 100%;
  }
}
@media screen and (max-width:559px) {
  .campus_header .wrap_header .box_login .drop_down {
    display: none;
  }
  .campus_header .drawer_box {
    max-width: 559px;
    padding-bottom: 40px;
  }
  .campus_header .drawer_box .top_cont {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .campus_header .drawer_box .wrap_info .btn_login {
    height: 56px;
    line-height: 56px;
  }
  .campus_header .drawer_box .wrap_info .wrap_tab {
    margin-top: 30px;
  }
  .campus_header .drawer_box .nav_box {
    padding-top: 20px;
  }
  .campus_header .drawer_box .nav_box .list_nav li {
    margin-bottom: 0;
  }
  .campus_header .drawer_box .link_logout {
    margin-top: 30px;
  }
  .campus_footer .top_cont .company_name {
    height: 20px;
    margin-bottom: 24px;
  }
  .campus_footer .top_cont .site_map {
    width: 80px;
    width: 100%;
  }
  .campus_footer .top_cont .site_map .txt_label {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
  }
  .campus_footer .top_cont .site_map .select_box .btn_drop {
    width: 20px;
    height: 20px;
    right: 5px;
    top: 50%;
    margin-top: -10px;
    background-size: 12px 7px;
  }
  .campus_footer .top_cont .site_map .select_box .comm_inp {
    height: 32px;
    line-height: 32px;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    padding-left: 10px;
    padding-right: 25px;
  }
  .campus_footer .top_cont .site_map .list_dropdown {
    top: 36px;
  }
  .campus_footer .top_cont .site_map .list_dropdown .btn_option {
    height: 32px;
    padding: 0 12px;
  }
  .campus_footer .top_cont .site_map .list_dropdown .btn_option .txt {
    line-height: 32px;
  }
  .campus_footer .top_cont .site_map .list_dropdown li .txt {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
  }
  .campus_footer .sns_link .list_link li {
    flex: 0 1 100%;
  }
  .floating_banner .banner_cont {
    padding-left: 20px;
    gap: 20px;
    flex-direction: column;
    align-items: flex-start;
  }
  .floating_banner .banner_cont .banner_txt {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
  }
  .floating_banner .banner_cont .btn_white {
    width: 100%;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    height: 32px;
    line-height: 30px;
    border-radius: 4px;
    padding: 0 12px;
  }
  .floating_banner .banner_cont .btn_close {
    top: 20px;
  }
  .floating_banner.kakao_channel .icon_img {
    width: 36px;
    height: 36px;
  }
  .floating_banner.kakao_channel .banner_cont {
    padding: 12px;
    flex-direction: row;
    align-items: center;
  }
  .floating_banner.kakao_channel .banner_cont .banner_txt .pc_on {
    display: none;
  }
  .floating_banner.kakao_channel .banner_cont .btn_close {
    margin-top: 0;
  }
  .top_banner .banner_cont {
    justify-content: center;
  }
  .top_banner .banner_cont .right_txt {
    margin-left: 0;
  }
  .open_banner {
    width: 60px;
    height: 60px;
    bottom: 71px;
    right: 13px;
  }
  .page_tit .top_notice {
    padding: 24px 16px;
  }
  .page_tit .top_notice .tit_txt {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
  }
  .page_tit .top_notice .sub_txt {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
  }
  .ticekt_cont .tit_box {
    margin-bottom: 16px;
  }
  .ticekt_cont .tit_box .right_txt {
    margin-left: 0;
    margin-top: 4px;
    width: 100%;
  }
  .ticekt_cont .ticekt_detail {
    padding: 24px 16px;
  }
  .ticekt_cont .ticekt_detail .inner {
    margin-top: 16px;
  }
  .ticekt_cont .ticekt_detail .inner.payment {
    padding-top: 30px;
    margin-top: 30px;
  }
  .ticekt_cont .ticekt_detail .inner.payment .tit {
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
  }
  .ticekt_cont .ticekt_detail .inner.payment .detail {
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
  }
  .ticekt_cont .option_ticket.pay .link_option {
    flex: none;
    width: 100%;
    height: auto;
  }
  .ticekt_cont .link_option {
    padding: 24px 16px;
  }
  .ticekt_cont .link_option .right_area {
    display: block;
    text-align: right;
  }
  .ticekt_cont .link_option .right_area .sale_txt {
    display: block;
  }
  .ticekt_cont .link_option .purchase_quantity {
    justify-content: center;
  }
  .ticekt_cont .link_option .purchase_quantity .num_txt {
    text-align: center;
    margin-top: 8px;
    margin-left: 0;
    width: 100%;
  }
  .curation_box .list_curation li .txt_box .tit {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
  }
  .curation_box .list_curation li .txt_box .time {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
  }
  .curation_box .list_curation li .txt_box .sub_txt {
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
  }
  .curation_box .list_curation li .progress_box .progress_txt {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
  }
  .curation_box .list_curation.video {
    gap: 16px;
  }
  .curation_box .list_curation.video li {
    min-width: 280px;
    width: 280px;
  }
  .curation_box .list_curation.masterpiece {
    gap: 16px;
  }
  .curation_box .list_curation.expression {
    gap: 16px;
  }
  .curation_box .list_curation.weekly {
    gap: 16px;
  }
  .curation_box .list_curation.write {
    gap: 16px;
  }
  .curation_box .list_curation.write li {
    min-width: 280px;
    width: 280px;
  }
  .curation_box .list_curation.write .tit {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
  }
  .curation_box .list_curation.audio {
    gap: 24px;
  }
  .curation_box.no_scroll {
    margin: 0 -8px;
  }
  .curation_box.no_scroll .list_curation {
    gap: 0;
  }
  .curation_box.no_scroll .list_curation li {
    width: 50%;
    padding: 0 8px;
    min-width: auto;
  }
  .curation_box.no_scroll .list_curation.audio {
    gap: 0;
  }
  .curation_box.no_scroll .list_curation.audio li {
    width: 33.333%;
  }
  .curation_box.no_scroll .list_curation.book li {
    border-top: 0 none;
    margin-top: 24px;
  }
  .curation_box.no_scroll .list_curation.book li:first-child {
    margin-top: 16px;
  }
  .curation_box.no_scroll .list_curation.book li .link_cont {
    display: block;
    padding: 0;
  }
  .curation_box.no_scroll .list_curation.book li .tumb_box {
    max-width: none;
  }
  .curation_box.no_scroll .list_curation.book li .txt_box {
    margin-top: 8px;
  }
  .curation_box.no_scroll .list_curation.book li .txt_box .tit_box {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 0px;
  }
  .curation_box.no_scroll .list_curation.book li .txt_box .tit_box .book_mark {
    display: block;
    margin-left: auto;
  }
  .curation_box.no_scroll .list_curation.book li .txt_box .article {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
  }
  .curation_box.no_scroll .list_curation.book li .txt_box .cont_txt {
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
  }
  .curation_box.no_scroll .list_curation.book li .book_mark {
    display: none;
  }
  .wrap_page.ticket .box_ticket {
    background-color: #f8fbfb;
    box-shadow: none;
    border: 0 none;
    padding: 0;
  }
  .wrap_page.alarm .page_tit {
    margin-bottom: 20px;
  }
  .wrap_page.login {
    background-color: #ffffff;
  }
  .wrap_page.login .container_md {
    padding-top: 60px;
  }
  .wrap_page.login .login_box {
    padding: 0;
    box-shadow: none;
  }
  .wrap_page.mypage .page_tit {
    margin-bottom: 48px;
  }
  .wrap_page.mypage .page_tit .desc_txt br {
    display: block;
  }
  .wrap_page.mypage .banner_box {
    padding: 16px;
  }
  .wrap_page.mypage .banner_box .txt_box .tit br {
    display: block;
  }
  .wrap_page.mypage .banner_box .btn_white {
    margin-top: 8px;
    width: 100%;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    height: 32px;
    line-height: 30px;
    border-radius: 4px;
    padding: 0 12px;
  }
  .wrap_page.mypage .my_item {
    margin-top: 48px;
  }
  .wrap_page.mypage .agree_chk {
    margin: 48px 0;
  }
  .wrap_page.mypage .alarm_notice {
    margin-top: 48px;
  }
  .wrap_page.mypage .no_ticket {
    margin-bottom: 48px;
  }
  .wrap_page.mypage .receipt_box {
    margin-top: 20px;
    padding: 16px;
  }
  .wrap_page.mypage .receipt_box .list_history {
    gap: 8px;
  }
  .wrap_page.mypage .receipt_box .list_history .inner .tit {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
  }
  .wrap_page.mypage .receipt_box .list_history .inner .cont_area .txt {
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
  }
  .wrap_page.mypage .receipt_box .list_history .inner .cont_area .price {
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
  }
  .wrap_page.mypage .more_btn {
    margin-top: 20px;
  }
  .wrap_page.mypage.payment .box_tab {
    margin-top: 48px;
  }
  .wrap_page.mypage.use .top_cont .container_md {
    padding-bottom: 60px;
  }
  .wrap_page.mypage.use .top_cont .tit_txt br {
    display: block;
  }
  .wrap_page.mypage.use .top_cont .login_box {
    margin-top: 20px;
  }
  .wrap_page.mypage.use .more_btn {
    margin-top: 48px;
  }
  .wrap_page.target br.xs_on {
    display: block;
  }
  .wrap_page.target .page_tit {
    margin-top: 60px;
    margin-bottom: 20px;
  }
  .wrap_page.target .no_ticket {
    margin-bottom: 20px;
  }
  .wrap_page.target .receipt_box.target {
    padding: 24px;
  }
  .wrap_page.target .date_select {
    gap: 8px;
    margin-bottom: 20px;
  }
  .wrap_page.target .btn_save {
    margin-top: 60px;
  }
  .wrap_page.target .time-picker {
    gap: 16px;
  }
  .wrap_page.target .time-picker .spinner {
    gap: 16px;
  }
  .wrap_page.target .time-picker .spinner.hour {
    width: 36px;
  }
  .wrap_page.target .time-picker .spinner.minute {
    width: 36px;
  }
  .wrap_page.target .time-picker .spinner.ampm {
    width: 42px;
  }
  .wrap_page.target .time-picker .spinner-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 38px;
  }
  .wrap_page.target .time-picker .colon {
    font-size: 28px;
    font-weight: 700;
    line-height: 38px;
  }
  .wrap_page.main .container_xl {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .wrap_page.main .hero_swiper .swiper-slide .txt_box .tit {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
  }
  .wrap_page.main .hero_swiper .swiper-slide .txt_box .txt p {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
  }
  .wrap_page.main .hero_bottom .hero_side .swiper-slide {
    height: auto;
  }
  .wrap_page.main .hero_bottom .hero_side .swiper-slide .link_cont {
    gap: 8px;
    padding: 16px 16px 42px;
    justify-content: flex-start;
  }
  .wrap_page.main .hero_bottom .hero_side .swiper-slide .link_cont .tumnb1, .wrap_page.main .hero_bottom .hero_side .swiper-slide .link_cont .tumnb2, .wrap_page.main .hero_bottom .hero_side .swiper-slide .link_cont .tumnb3 {
    width: 100px;
  }
  .wrap_page.main .hero_bottom .hero_side .swiper-slide .txt_box {
    margin-top: 0;
    text-align: left;
  }
  .wrap_page.main .hero_bottom .hero_side .swiper-slide .txt_box .tit {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
  }
  .wrap_page.main .hero_bottom .hero_side .swiper-slide .txt_box br {
    display: block;
  }
  .wrap_page.main .hero_bottom .hero_side .swiper-slide .txt_box .bar {
    display: none;
  }
  .wrap_page.main .hero_bottom .hero_side .swiper-slide .txt_box .pc_txt {
    display: none;
  }
  .wrap_page.main .hero_bottom .hero_side .swiper-slide .txt_box .xs_txt {
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
  }
  .wrap_page.main .hero_bottom .hero_side .wrap_paging {
    bottom: 16px;
  }
  .wrap_page.main .list_tag {
    gap: 12px;
  }
  .wrap_page.main .ticket_banner .txt {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
  }
  .wrap_page.main .ticket_banner .tit {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
  }
  .wrap_page.main .ticket_banner .tit br {
    display: block;
  }
  .wrap_page.main .ticket_banner .btn_white {
    width: 100%;
  }
  .wrap_page.main .cont_tit .tit {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
  }
  .wrap_page.main.bg_blue .container_xl {
    padding-bottom: 40px;
  }
  .wrap_page.main .curation_cont {
    gap: 40px;
  }
  .wrap_page.search .search_head {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .wrap_page.search .search_cont {
    gap: 40px;
  }
  .wrap_page.storage .wrap_tab {
    margin-top: 40px;
  }
  .wrap_page.storage .curation_cont {
    margin-top: 40px;
  }
  .wrap_page.storage .empty_box {
    padding-left: 16px;
    padding-right: 16px;
  }
  .wrap_page.storage .empty_box .txt {
    text-align: center;
    width: 100%;
  }
  .wrap_page.storage .empty_box .btn_primary {
    width: 100%;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    height: 32px;
    line-height: 30px;
    border-radius: 4px;
    padding: 0 12px;
  }
  .wrap_page.storage .list_curation.book {
    margin-top: 30px;
  }
  .wrap_page.storage .list_curation.book li {
    padding-bottom: 8px;
  }
  .wrap_page.storage .list_curation.book li .tumb_box {
    width: 100%;
    text-align: center;
  }
  .wrap_page.storage .list_curation.book li .txt_box .tit_box {
    gap: 4px;
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  .wrap_page.storage .list_curation.book li .txt_box .progress_box {
    width: 100%;
  }
  .wrap_page.storage .list_curation.book.list_type li .tumb_box {
    padding: 16px 0;
    background-color: #f8fbfb;
    border-radius: 0;
  }
  .wrap_page.storage .list_curation.book.list_type li .tumb_box img {
    border-radius: 6px;
  }
  .wrap_page.storage .list_curation.book.list_type li:first-child {
    margin-top: 0;
  }
  .wrap_page.storage .cont_tab {
    display: block;
    margin-top: 40px;
  }
  .wrap_page.storage .cont_tab .date_tab {
    margin-top: 16px;
  }
  .wrap_page.storage .list_study {
    margin-top: 40px;
  }
  .wrap_page.storage .list_study li {
    margin-top: 36px;
  }
  .wrap_page.storage .list_study li .link_study {
    padding: 24px 16px;
  }
  .wrap_page.storage .list_study li .top_cont {
    gap: 8px;
  }
  .wrap_page.storage .list_study li .top_cont .tumb_box {
    max-width: 120px;
  }
  .wrap_page.storage .list_study li .top_cont .txt_box .quote_txt {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
  }
  .wrap_page.storage .list_study li .top_cont .txt_box .tit_txt {
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    margin-top: 4px;
  }
  .wrap_page.storage .list_study li .top_cont .txt_box .author_txt {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    margin-top: 4px;
  }
  .wrap_page.storage .list_study.audio .top_cont .tumb_box {
    max-width: 44px;
  }
  .wrap_page.storage .comming_soon {
    padding-top: 200px;
  }
  .wrap_page.storage .note_top .tumb_box {
    max-width: 266px;
  }
  .wrap_page.storage .note_top .quote_txt {
    margin-top: 24px;
  }
  .wrap_page.storage .note_top .tit_txt {
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    white-space: normal;
  }
  .wrap_page.storage .note_top.audio .tumb_box {
    max-width: 97px;
  }
  .wrap_page.storage .sentence_box {
    margin-top: 40px;
    padding-top: 40px;
  }
  .wrap_page.storage .sentence_cont {
    margin-top: 36px;
  }
  .wrap_page.storage .capter_tit {
    margin-top: 40px;
  }
  .wrap_page.storage .statistics_cont .inner {
    margin-top: 40px;
  }
  .wrap_page.storage .statistics_cont .shadow_box {
    padding: 24px 0;
  }
  .wrap_page.storage .statistics_cont .shadow_box .heading_txt {
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
  }
  .wrap_page.storage .statistics_cont .shadow_box.clip {
    gap: 16px;
  }
  .wrap_page.storage .statistics_cont .clip_cont {
    padding: 16px 16px 0;
    gap: 16px;
  }
  .wrap_page.storage .statistics_cont .clip_cont .thumb_box {
    margin: 0;
    height: 120px;
  }
  .wrap_page.storage .statistics_cont .clip_cont .cont_txt .quote_txt {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
  }
  .wrap_page.storage .statistics_cont .clip_cont .cont_txt .tit_txt {
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    white-space: normal;
  }
  .wrap_page.storage .statistics_cont .clip_cont .cont_txt .author_txt {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
  }
  .wrap_page.storage .statistics_cont .clip_cont .bottom_btn {
    margin-top: 0;
  }
  .wrap_page.storage .summation_box .list_info {
    flex-direction: column;
    gap: 16px;
  }
  .wrap_page.storage .summation_box .shadow_box {
    padding: 16px;
    width: 100%;
    gap: 4px;
  }
  .wrap_page.storage .summation_box .shadow_box:not(:last-child) {
    margin-right: 0;
  }
  .wrap_page.storage .time_box .info_box {
    padding-left: 16px;
    padding-right: 16px;
  }
  .wrap_page.storage .time_box .info_box .info_tit {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
  }
  .wrap_page.storage .time_box .info_box .info_tit br {
    display: block;
  }
  .wrap_page.storage .time_box .info_box .info_txt .tit {
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
  }
  .wrap_page.storage .time_box .info_box .info_txt .txt {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
  }
  .wrap_page.storage .time_box .info_box .info_txt .txt .point {
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
  }
  .wrap_page.storage .time_box .wrap_graph.year {
    gap: initial;
    justify-content: space-between;
    width: 100%;
    padding: 0 16px;
  }
  .wrap_page.storage .time_box .wrap_graph.month {
    gap: initial;
    justify-content: space-between;
    width: 100%;
    padding: 0 16px;
  }
  .wrap_page.storage .time_box .wrap_graph.month .progress_box {
    width: 6px;
  }
  .wrap_page.storage .time_box .wrap_graph.month .progress_box progress {
    height: 6px;
    margin-left: 3px;
  }
  .wrap_page.storage .time_box .wrap_graph.month .progress_box progress.zero {
    height: 6px;
    width: 6px;
  }
  .wrap_page.around_tab .container_xl {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .wrap_page.around_tab .wrap_tab .top_tab .tab_cont {
    gap: 8px;
  }
  .wrap_page.around_tab .wrap_tab .top_tab .tab_cont button {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    height: 32px;
    line-height: 30px;
    border-radius: 4px;
    padding: 0 12px;
  }
  .wrap_page.around_tab .toggle_btn {
    display: none;
  }
  .wrap_page.around .list_cont {
    grid-template-columns: 100%;
    row-gap: 16px;
  }
  .wrap_page.around .list_cont > li {
    height: auto;
  }
  .wrap_page.around .list_cont > li .thumb_box {
    height: auto;
  }
  .wrap_page.around .list_cont > li .link_box a {
    flex: 1 1 auto;
  }
  .wrap_page.around .list_cont > li.audio .thumb_box {
    height: 183px;
  }
  .wrap_page.article_top .container_xl {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .wrap_page.article_top .top_cont {
    gap: 16px;
    flex-direction: column;
  }
  .wrap_page.article_top .top_cont .thumb_box {
    max-width: none;
    width: 100%;
    text-align: center;
  }
  .wrap_page.article_top .top_cont .txt_box {
    width: 100%;
  }
  .wrap_page.article_top .top_cont .txt_box .btn_box {
    margin-top: 16px;
  }
  .wrap_page.article_contents .container_xl {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .login_box {
    gap: 48px;
  }
  .login_box .page_tit {
    margin-bottom: 0;
  }
  .login_box .id_box {
    padding: 24px;
  }
  .login_box .id_box .list_id li {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
  }
  .layer_modal.loginModal .body_cont {
    padding: 16px 16px 36px;
  }
  .layer_modal.loginModal .body_cont .close_box {
    padding-right: 0;
    margin-bottom: 32px;
  }
  .layer_modal.loginModal .login_box {
    padding: 0;
    gap: 32px;
  }
  .layer_modal.loginModal .login_box .login_sns .sns_box {
    gap: 24px;
  }
  .layer_modal.loginModal .login_box .login_sns .link_find {
    margin-bottom: 32px;
  }
  .layer_modal.loginModal .login_box .wrap_sns {
    padding-top: 32px;
  }
  .layer_modal.detailModal .ico.circle_next,
  .layer_modal.detailModal .ico.circle_prev {
    display: none;
  }
}