@charset "UTF-8";

* {margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-print-color-adjust: exact !important; print-color-adjust: exact; word-break: keep-all; word-wrap: break-word; overflow-wrap: break-word; -webkit-overflow-scrolling: touch;}
:root {
  --sat: env(safe-area-inset-top);
  --sar: env(safe-area-inset-right);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
}
html {width: 100%; height: 100%; font-size: .052vw; font-style: normal;}
body {position: relative; height: auto; font-family: "Pretendard_Regular", "맑은 고딕", "Malgun Gothic", sans-serif; font-weight: 400; font-size: max(16rem, 14px); color: #06161E; line-height: 150%; height: 100%; letter-spacing: -.025em; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; -webkit-print-color-adjust: exact !important;}
body, div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, form, fieldset, table, tr, th, td {margin: 0; padding: 0; font-weight: normal;}
ul, ol, li {list-style: none;}
img, fieldset {border: none; vertical-align: top;}
img::selection {background: transparent;}
legend, caption {visibility: hidden; overflow: hidden; width: 0; height: 0; font-size: 0; line-height: 0;}
textarea, button {vertical-align: middle;}
input, select {font-family: "Pretendard_Regular", "맑은 고딕", "Malgun Gothic", sans-serif; vertical-align: top;}
input {padding: 0; height: 39rem;}
input[type="text"]::-ms-clear {display: none;}
input:focus, input:active {outline: none;}
.attach_area .file_div input[readonly] {pointer-events: none;}
option {padding: 3px 10px;}
option:focus, option:active {outline: none;}
input[type="radio"], input[type="checkbox"] {border: 0; padding: 0; height: auto; -webkit-box-shadow: none; box-shadow: none;}
input[type="password"] {height: 40px; border: 1px solid #e5e5e5; color: #06161E; background: transparent; -webkit-appearance: none; -webkit-box-shadow: none; box-shadow: none;}
input[type="password"]::-webkit-input-placeholder {color: #9CA1A6; font-size: max(16rem, 14px);}
input[type="password"]:-ms-input-placeholder {color: #9CA1A6; font-size: max(16rem, 14px);}
input[type="password"]::-ms-input-placeholder {color: #9CA1A6; font-size: max(16rem, 14px);}
input[type="password"]::placeholder {color: #9CA1A6; font-size: max(16rem, 14px);}
input[type="password"]:disabled {color: #999; background-color: #f3f3f3;}
input[type="password"].readonly {color: #999; background-color: #f3f3f3;}
input[type="password"][readonly=readonly] {color: #999; background-color: #f3f3f3;}
input[type="text"] {color: #06161E; font-size: max(16rem, 14px); background: transparent; -webkit-appearance: none; -webkit-box-shadow: none; box-shadow: none;}
input[type="text"]::-webkit-input-placeholder {color: #9CA1A6; font-size: max(16rem, 14px);}
input[type="text"]:-ms-input-placeholder {color: #9CA1A6; font-size: max(16rem, 14px);}
input[type="text"]::-ms-input-placeholder {color: #9CA1A6; font-size: max(16rem, 14px);}
input[type="text"]::placeholder {color: #9CA1A6; font-size: max(16rem, 14px);}
input[type="text"]:disabled {color: #D9DDE0; background-color: transparent;}
input[type="text"]:-moz-read-only {color: #999; background-color: transparent;}
input[type="text"]:read-only {color: #C6CCD1; background-color: transparent;}
input[type="text"].readonly {color: #C6CCD1; background-color: transparent;}
input[type="text"]:disabled + .cal_btn {opacity: .5;}
input[type="text"]:disabled::-webkit-input-placeholder {color: #C6CCD1;}
input[type="text"]:disabled:-ms-input-placeholder {color: #C6CCD1; font-size: max(16rem, 14px);}
input[type="text"]:disabled::-ms-input-placeholder {color: #C6CCD1; font-size: max(16rem, 14px);}
input[type="text"]:disabled::placeholder {color: #C6CCD1; font-size: max(16rem, 14px);}
input[type="text"]:disabled {color: #C6CCD1; background-color: #fff;}
input[type="tel"] {background: #fff; -webkit-appearance: none; -webkit-box-shadow: none; box-shadow: none;}
input[type="tel"]::-webkit-input-placeholder {color: #9CA1A6; font-size: max(16rem, 14px);}
input[type="tel"]:-ms-input-placeholder {color: #9CA1A6; font-size: max(16rem, 14px);}
input[type="tel"]::-ms-input-placeholder {color: #9CA1A6; font-size: max(16rem, 14px);}
input[type="tel"]::placeholder {color: #9CA1A6; font-size: max(16rem, 14px);}
input[type="tel"]:disabled {color: #999; background-color: #f3f3f3;}
input[type="tel"]:-moz-read-only {color: #999; background-color: #f3f3f3;}
input[type="tel"]:read-only {color: #999; background-color: #f3f3f3;}
input[type="tel"].readonly {color: #999; background-color: #f3f3f3;}
input[type="tel"]:disabled + .cal_btn {opacity: .5;}
input[type="number"] {font-size: max(16rem, 14px); background-color: transparent;}
input[type="number"]::-webkit-input-placeholder {color: #9CA1A6; font-size: max(16rem, 14px);}
input[type="number"]:-ms-input-placeholder {color: #9CA1A6; font-size: max(16rem, 14px);}
input[type="number"]::-ms-input-placeholder {color: #9CA1A6; font-size: max(16rem, 14px);}
input[type="number"]::placeholder {color: #9CA1A6; font-size: max(16rem, 14px);}
input[type="number"]:disabled {color: #999;}
input[type="number"]:-moz-read-only {color: #999;}
input[type="number"]:read-only {color: #999;}
input[type="number"].readonly {color: #999;}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
select {font-size: max(18rem, 16px); color: #888; appearance: none; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; vertical-align: top; background: transparent; border: none;}
select::-ms-expand {display: none;}
select:disabled {color: #9CA1A6; opacity: 1;}
textarea {padding: 0; font-family: "Pretendard_Regular", "맑은 고딕", "Malgun Gothic", sans-serif; color: #06161E; font-size: max(16rem, 14px); -webkit-appearance: none; -webkit-box-shadow: none; box-shadow: none; border-radius: 0; vertical-align: top; background: #fff; border: 1px solid #e5e5e5; resize: none;}
textarea:focus, textarea:active {outline: none;}
textarea::-webkit-input-placeholder {color: #9CA1A6; font-size: max(16rem, 14px);}
textarea:-ms-input-placeholder {color: #9CA1A6; font-size: max(16rem, 14px);}
textarea::-ms-input-placeholder {color: #9CA1A6; font-size: max(16rem, 14px);}
textarea::placeholder {color: #9CA1A6; font-size: max(16rem, 14px);}
textarea:disabled {color: #D9DDE0; background-color: #f3f3f3;}
textarea:-moz-read-only {color: #D9DDE0; background-color: #f3f3f3;}
textarea:read-only {color: #D9DDE0; background-color: #f3f3f3;}
a {text-decoration: none; color: #06161E;}
a:hover, a:focus, a:active {text-decoration: none;}
table {width: 100%; border-collapse: collapse;}
button {background: none; border: none; padding: 0; margin: 0; font-family: "Pretendard_Regular", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: max(18rem, 16px); cursor: pointer; overflow: visible; white-space: nowrap;}
button::-moz-focus-inner {padding: 0; border: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block;}
.swiper-button-next:after, .swiper-button-prev:after {display: none;}


@media all and (max-width: 1023px) {
  input[type="password"]::-webkit-input-placeholder {font-size: 13rem;}
  input[type="password"]:-ms-input-placeholder {font-size: 13rem;}
  input[type="password"]::-ms-input-placeholder {font-size: 13rem;}
  input[type="password"]::placeholder {font-size: 13rem;}
  input[type="text"] {font-size: 13rem;}
  input[type="text"]::-webkit-input-placeholder {font-size: 13rem;}
  input[type="text"]:-ms-input-placeholder {font-size: 13rem;}
  input[type="text"]::-ms-input-placeholder {font-size: 13rem;}
  input[type="text"]::placeholder {font-size: 13rem;}
  input[type="text"]:disabled:-ms-input-placeholder {font-size: 13rem;}
  input[type="text"]:disabled::-ms-input-placeholder {font-size: 13rem;}
  input[type="text"]:disabled::placeholder {font-size: 13rem;}
  input[type="tel"]::-webkit-input-placeholder {font-size: 13rem;}
  input[type="tel"]:-ms-input-placeholder {font-size: 13rem;}
  input[type="tel"]::-ms-input-placeholder {font-size: 13rem;}
  input[type="tel"]::placeholder {font-size: 13rem;}
  input[type="number"] {font-size: 13rem;}
  input[type="number"]::-webkit-input-placeholder {font-size: 13rem;}
  input[type="number"]:-ms-input-placeholder {font-size: 13rem;}
  input[type="number"]::-ms-input-placeholder {font-size: 13rem;}
  input[type="number"]::placeholder {font-size: 13rem;}
  textarea::-webkit-input-placeholder {font-size: 13rem;}
  textarea:-ms-input-placeholder {font-size: 13rem;}
  textarea::-ms-input-placeholder {font-size: 13rem;}
  textarea::placeholder {font-size: 13rem;}
  textarea {font-size: 13rem;}
}





/* --------------------------------------------- Common style 공통 스타일 - START --------------------------------------------- */
body.stop-scroll {overflow: hidden; height: 100%; min-height: 100%; touch-action: none;}
#wrap {overflow:hidden; position: relative; width:100%;}
#wrap.member {background-color: #F5F6F7;} /* 로그인, 회원가입 페이지는 배경 회색 */
#wrap.member.member-main {background-color: #fff;}
#wrap.evaluation {background-color: #F5F6F7;} /* 평가하기, 만족도조사 페이지는 배경 회색 */
.cont-wrap {margin-top: 220rem; margin-bottom: 240rem;}
.inner {position: relative; margin: 0 auto; width: 1093rem;}
.only-pc {display: block !important;}
.only-tabl {display: block;}
.only-mobile {display: none;}
.dimd {display: none; content: ""; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); z-index: 50;}
#wrap.has-bot-fix-area .cont-wrap {margin-bottom: 372rem;}


@media all and (min-width: 1920px) {
  html {font-size: 6.25%;}
}

@media all and (max-width: 1023px) {
  html {font-size: .130vw;}
  .cont-wrap {margin-top: 120rem; margin-bottom: 160rem;}
  .inner {width: calc(100% - 40rem);}
  .only-pc {display: none !important;}
  .only-tabl {display: block;}
  .only-tabl + .only-mobile {display: none;}
  .only-mobile {display: block;}
  #wrap.has-bot-fix-area .cont-wrap {margin-bottom: 250rem;}
}

@media all and (max-width: 599px) {
  html {font-size: .256vw;}
  .only-tabl {display: none;}
  .only-tabl + .only-mobile {display: block;}

  @media (orientation: landscape){
    html:not(:has(textarea:focus, input:focus)) {font-size: .18vw;}
  }
}
/* --------------------------------------------- Common style 공통 스타일 - END --------------------------------------------- */





/* --------------------------------------------- Font 폰트 - START --------------------------------------------- */
.f-xlarge-title {font-size: max(72rem, 56px); font-family: "Pretendard_Bold", sans-serif; color: #06161E; line-height: 130%; letter-spacing: -.04em;}
.f-large-title {font-size: max(48rem, 36px); font-family: "Pretendard_Bold", sans-serif; color: #06161E; line-height: 140%; letter-spacing: -.03em;}
.f-title1 {font-size: max(36rem, 28px); font-family: "Pretendard_Bold", sans-serif; color: #06161E; line-height: 145%; letter-spacing: -.03em;}
.f-title2 {font-size: max(28rem, 24px); font-family: "Pretendard_Medium", sans-serif; color: #06161E; line-height: 150%; letter-spacing: -.03em;}
.f-title3 {font-size: max(24rem, 18px); font-family: "Pretendard_Bold", sans-serif; color: #06161E; line-height: 150%; letter-spacing: -.02em;}
.f-head {font-size: max(18rem, 16px); font-family: "Pretendard_SemiBold", sans-serif; color: #06161E; line-height: 155%; letter-spacing: -.02em;}
.f-sub-head {font-size: max(18rem, 16px); font-family: "Pretendard_Regular", sans-serif; color: #06161E; line-height: 155%; letter-spacing: -.02em;}
.f-body1 {font-size: max(16rem, 14px); font-family: "Pretendard_Medium", sans-serif; color: #06161E; line-height: 160%; letter-spacing: -.02em;}
.f-body2 {font-size: max(16rem, 14px); font-family: "Pretendard_Regular", sans-serif; color: #697278; line-height: 160%; letter-spacing: -.02em;}
.f-caption1 {font-size: max(14rem, 13px); font-family: "Pretendard_Medium", sans-serif; color: #697278; line-height: 170%; letter-spacing: -.02em;}
.f-caption2 {font-size: max(14rem, 13px); font-family: "Pretendard_Regular", sans-serif; color: #697278; line-height: 170%; letter-spacing: -.02em;}

.color-teal {color: #1E6B8E;}
.color-sky {color: #59B7E2;}
.color-gray {color: #9CA1A6;}

.underline {text-decoration: underline; text-underline-offset: 3px;} /* 2024-08-14 추가 */

.icon-txt {padding-left: 32rem;} /* 아이콘 이미지와 함께 나오는 텍스트 */
.icon-txt.tel {background: url("/common/images/icon-tel.svg") left top / 24rem no-repeat;}
.icon-txt.tel a {margin-left: 6rem;}
.icon-txt span {color: #06161E; font-size: max(16rem, 14px); line-height: 160%; letter-spacing: -0.32rem;}

/* 2줄 말줄임 */
.txt-ellipsis {display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; /*word-wrap: break-word; word-break: break-all;*/}

@media all and (max-width: 1023px) {
  .f-xlarge-title {font-size: 32rem; line-height: 150%; letter-spacing: -.04em;}
  .f-large-title {font-size: max(24rem, 18px); line-height: 155%; letter-spacing: -.04em;}
  .f-title1 {font-size: 20rem; line-height: 160%;}
  .f-title2,
  .f-title3 {font-size: 17rem; line-height: 160%; letter-spacing: -.03em;}
  .f-head {font-size: 15rem; line-height: 170%;}
  .f-sub-head {font-size: 14rem; line-height: 170%;}
  .f-body1 {font-size: 13rem; line-height: 165%;}
  .f-body2 {font-size: 13rem; line-height: 165%;}
  .f-caption1 {font-size: 12rem; line-height: 160%;}
  .f-caption2 {font-size: 12rem; line-height: 160%;}

  .icon-txt span {font-size: 13rem; line-height: 165%; letter-spacing: -0.26rem;}
  .icon-txt.tel a {margin-left: 5rem; font-size: 13rem; line-height: 165%; letter-spacing: -0.26rem;}
}
/* --------------------------------------------- Font 폰트 - END --------------------------------------------- */



/* --------------------------------------------- header 헤더 - START --------------------------------------------- */
/* 헤더 */
#header {position: fixed; left: 0; top: -101rem; display: flex; justify-content: center; width: 100%; height: max(100rem, 65px); transition: height .4s ease, background .3s ease; /* overflow: hidden; */ background: transparent; z-index: 100;}
#header:before {display: none; content: ""; position: absolute; left: 0; right: 0; top: max(99rem, 64px); width: 100%; height: 1px; background-color: #DFE1E4;}

#header.overflow-hidden {overflow: hidden;}
#header.up-scroll {background-color: rgba(255, 255, 255, 1);}
#header.hide{background-color: transparent;}
#header.srch-open {background-color: rgba(255, 255, 255, 1);}
#header.mouse-hover {background-color: rgba(255, 255, 255, 1); box-shadow: 0 3rem 6rem rgba(0, 0, 0, .1);}
#header.up-scroll:before {display: block; opacity: 1; transition: opacity .4s ease;}
#header.hide:before {opacity: 0; transition: opacity .4s ease;}
#header.srch-open:before {display: block; opacity: 1; transition: opacity .4s ease;}
#header.mouse-hover:before {display: block; opacity: 1; transition: opacity .4s ease;}
#header.mouse-hover h1 .logo, #header.up-scroll h1 .logo, #header.srch-open h1 .logo {background-image: url("/common/images/icon-logo.svg");}
#header.mouse-hover nav .gnb > li .one-depth, #header.up-scroll nav .gnb > li .one-depth, #header.srch-open nav .gnb > li .one-depth {color: #06161E;}
#header.mouse-hover nav .gnb > li.on .one-depth:after, #header.srch-open nav .gnb > li.on .one-depth:after {left: 40rem; -webkit-width: calc(100% - 80rem); width: calc(100% - 80rem);}

#header h1 {position: absolute; left: 160rem; top: 30rem; width: 117rem; height: 44rem; z-index: 9999;}
#header h1 .logo {display: block; width: 100%; height: 100%; background: url("/common/images/icon-logo-wht.svg") no-repeat center center / 100% auto;}
#header nav {position: relative; height: 100%; text-align: center;}
#header nav .gnb {display: inline-block; height: 100%; text-align: center;}
#header nav .gnb a {display: block;}
#header nav .gnb > li {display: inline-block;} 
#header nav .gnb > li .one-depth {position: relative; height: 100rem; padding: 45rem 40rem 0; font-size: max(18rem, 16px); font-family: "Pretendard_Medium", sans-serif; color: #fff; line-height: 155%; letter-spacing: -.02em; white-space: nowrap;}
#header nav .gnb > li .one-depth:after {content: ""; position: absolute; right: 40rem; bottom: 0; width: 0; height: 2px; background-color: #74C0E2; transition: all .3s ease;}
#header nav .gnb > li .two-pack-wrap {display: none; position: absolute; left: 50%; top: 100rem; padding: 32rem 0 48rem; transform: translateX(-50%); overflow: hidden;}
#header nav .gnb > li .two-pack-wrap .two-pack {transform: translateY(-20rem); transition: transform .8s cubic-bezier(0.215,0.610,0.355,1.000)}
#header nav .gnb > li.on .two-pack-wrap .two-pack {opacity: 1; transform: translateY(0);}
#header nav .gnb > li .two-pack-wrap .two-pack > li {display: table-cell; padding: 0 60rem; text-align: left;}
#header nav .gnb > li .two-pack-wrap .two-pack > li.on .two-depth {color: #74C0E2;}
#header nav .gnb > li .two-pack-wrap .two-pack .two-depth {display: inline-block; font-size: max(18rem, 16px); font-family: "Pretendard_SemiBold", sans-serif; color: #06161E; line-height: 155%; letter-spacing: -.02em; white-space: nowrap; transition: color .2s ease;}
#header nav .gnb > li .three-pack {margin-top: 16rem; text-align: left;}
#header nav .gnb > li .three-pack .three-depth {position: relative; display: inline-block; font-size: max(16rem, 14px); font-family: "Pretendard_Regular", sans-serif; color: #697278; line-height: 160%; letter-spacing: -.02em; white-space: nowrap;  transition: color .2s ease;}
#header nav .gnb > li .three-pack .three-depth:hover {color: #74C0E2;}
#header nav .gnb > li .three-pack > li {margin-top: 12rem;}
#header nav .gnb > li .three-pack > li:first-child {margin-top: 0;}
        /* subpage 헤더 */
#header h2.nav-tit {display: none;}
#header .icon-btn.prev-btn {display: none;}

@media all and (min-width: 1024px) {
  #wrap:not(.main) #header h1 {display: block !important;}
}
@media all and (max-width: 1023px) {
  #header {align-items: center; height: 72rem !important; padding: 0 20rem; overflow: hidden;}
  #header h1 {left: 20rem; top: 50%; transform: translateY(-50%); width: 80rem; height: 30rem;}
  #header nav {display: none;}
        /* subpage 헤더 */
  #wrap.main #header h2.nav-tit {display: none;}
  #wrap.main #header .icon-btn.prev-btn {display: none;}
  #wrap:not(.main) #header h1 {display: none;}
  #wrap:not(.main) #header h2.nav-tit {display: block;}
  #wrap:not(.main) #header .icon-btn.prev-btn {display: block;}
  
  #header h2.nav-tit {font-family: "Pretendard_SemiBold", sans-serif; font-size: 15rem; color: #06161E; line-height: 170%; letter-spacing: -.02em;}
  #header .icon-btn.prev-btn {position: absolute; left: 20rem; top: 20rem; background-image: url("/common/images/icon-prevarrow-mobile.svg");}
}


/* 유틸 메뉴 - 메뉴 */
#header .icon-btn {display: inline-block; min-width: 32rem; padding-top: 32rem; background: url() no-repeat top center / 32rem auto;}
#header.mouse-hover .util-area .icon-btn > span, #header.up-scroll .util-area .icon-btn > span, #header.srch-open .util-area .icon-btn > span {color: #697278;}

#header .util-area {position: absolute; right: 160rem; top: 32rem; display: -webkit-box; display: -ms-flexbox; display: flex; align-items: flex-start;}
#header .util-area > * ~ * {margin-left: 32rem;}
#header .util-area .icon-btn > span {font-size: max(12rem, 10px); font-family: "Pretendard_Regular", sans-serif; color: #fff; line-height: 165%; letter-spacing: -.02em;}
#header .util-area .icon-btn.menu-btn.active > span {color: #06161E;}
#header .util-area .icon-btn.noti-btn::before {display: none; content: ""; position: absolute; right: 2rem; top: 2rem; width: 5rem; height: 5rem; border-radius: 100%; background-color: #71D3FF;}
#header .util-area .icon-btn.noti-btn.on::before {display: block;}
#header .util-area .icon-btn.noti-btn {position: relative; background-image: url("/common/images/icon-noti-wht.svg");}
#header .util-area .icon-btn.search-btn {background-image: url("/common/images/icon-search-wht.svg");}
#header .util-area .icon-btn.log-btn {background-image: url("/common/images/icon-people-wht.svg");}
#header .util-area .icon-btn.menu-btn {position: relative; z-index: 9999;}
#header .util-area .icon-btn.menu-btn i {position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 32rem; height: 32rem;}
#header .util-area .icon-btn.menu-btn.init i .line::before {animation: none !important;}
#header .util-area .icon-btn.menu-btn i .line::before {content: ""; position: absolute; left: 50%; display: inline-block; width: 22rem; height: 1.5rem; background-color: #fff;}
#header .util-area .icon-btn.menu-btn i .line.mid::before {top: 50%; transform: translate(-50%, -50%);}
#header .util-area .icon-btn.menu-btn i .line.top::before {top: 50%; transform: translate(-50%, calc(-50% - 8rem)); animation-name: menuTopOpen; animation-duration: 500ms; animation-fill-mode: forwards;}
#header .util-area .icon-btn.menu-btn i .line.bot::before {top: 50%; transform: translate(-50%, calc(-50% + 8rem)); animation-name: menuBottomOpen; animation-duration: 500ms; animation-fill-mode: forwards;}
#header .util-area .icon-btn.menu-btn.active i .line::before {background-color: #06161E;}
#header .util-area .icon-btn.menu-btn.active i .line.top::before {animation-name: menuTopClose; animation-duration: 500ms; animation-fill-mode: forwards;}
#header .util-area .icon-btn.menu-btn.active i .line.bot::before {animation-name: menuBottomClose; animation-duration: 500ms; animation-fill-mode: forwards;}
#header .util-area .icon-btn.menu-btn i .line.mid {opacity: 1; transition-delay: .25s;}
#header .util-area .icon-btn.menu-btn.active i .line.mid {transition-delay: .25s; opacity: 0;}
#header.mouse-hover .util-area .icon-btn.noti-btn, #header.up-scroll .util-area .icon-btn.noti-btn, #header.srch-open .util-area .icon-btn.noti-btn {background-image: url("/common/images/icon-noti.svg");}
#header.mouse-hover .util-area .icon-btn.search-btn, #header.up-scroll .util-area .icon-btn.search-btn {background-image: url("/common/images/icon-search.svg");}
#header.srch-open .util-area .icon-btn.search-btn {background-image: url("/common/images/icon-close.svg");}
#header.mouse-hover .util-area .icon-btn.log-btn, #header.up-scroll .util-area .icon-btn.log-btn, #header.srch-open .util-area .icon-btn.log-btn {background-image: url("/common/images/icon-people.svg");}
#header.mouse-hover .util-area .icon-btn.menu-btn i .line::before, #header.up-scroll .util-area .icon-btn.menu-btn i .line:before, #header.srch-open .util-area .icon-btn.menu-btn i .line:before {background-color: #06161E;}
@keyframes menuTopClose {
  0% {transform: translate(-50% calc(-50% - 8rem))}
  50% {transform: translate(-50%, 0)}
  100% {transform: translate(-50%, 0) rotate(-45deg);}
}
@keyframes menuBottomClose {
  0% {transform: translate(-50%, calc(-50% + 8rem))}
  50% {transform: translate(-50%, 0)}
  100% {transform: translate(-50%, 0) rotate(45deg);}
}
@keyframes menuTopOpen {
  0% {transform: translate(-50%, 0) rotate(-45deg);}
  50% {transform: translate(-50%, 0)}
  100% {transform: translate(-50%, calc(-50% - 8rem))}
}
@keyframes menuBottomOpen {
  0% {transform: translate(-50%, 0) rotate(45deg);}
  50% {transform: translate(-50%, 0)}
  100% {transform: translate(-50%, calc(-50% + 8rem))}
}

@media all and (max-width: 1023px) {
  #header .icon-btn {width: 30rem; min-width: unset; height: 30rem; padding-top: 0; background-size: 100% auto;}

  #header .util-area {right: 20rem; top: 20rem;}
  #header .util-area .pop-wrap {display: none;}
  #header .util-area > * ~ * {margin-left: 0;}
  #header .util-area > .icon-btn ~ .icon-btn {margin-left: 20rem;}
  #header .util-area .icon-btn.menu-btn i {width: 30rem; height: 30rem;}
  #header .util-area .icon-btn > span {display: none;}
}

/* 유틸 메뉴 - 팝업 */
#header .pop-wrap {position: relative;}
#header .pop-wrap .pop-box {display: none; position: absolute; left: 50%; top: calc(100% + 11rem); z-index: 40; transform: translateX(-50%); padding: 32rem; border: 1px solid #B2B8BD; background-color: #fff;}
#header .pop-wrap .pop-box .pop-tit {display: flex; align-items: center; justify-content: space-between;}
#header .pop-wrap .pop-box::after {content: ""; position: absolute; left: 50%; top: -10rem; transform: translateX(-50%); width: 18rem; height: 10rem; background: url("/common/images/icon-round-triangle.svg") no-repeat center center / 100%;}
#header .pop-wrap .pop-box::before {content: ""; position: absolute; left: 50%; bottom: calc(100% + 1px); transform: translateX(-50%); width: 30rem; height: 10rem;}
#header .pop-wrap .noti-btn ~ .pop-box {width: 404rem; padding-bottom: 16rem;}
#header .pop-wrap .log-btn ~ .pop-box {min-width: 156rem;}
#header .pop-wrap .pop-box .list {margin-top: 16rem;}
#header .pop-wrap .pop-box .list a {display: block; padding: 16rem 0;}
#header .pop-wrap .pop-box .list a ~ a {border-top: 1px solid #ECEEEF;}
#header .pop-wrap .pop-box .list a .tit {margin-bottom: 4rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; /*word-wrap: break-word; word-break: break-all;*/ color: #06161E; transition: .2s color ease;}
#header .pop-wrap .pop-box .list a:hover .tit {color: #59B7E2;}
#header .pop-wrap .pop-box .list a .date {color: #9CA1A6;}
#header .pop-wrap .pop-box .btn-wrap ~ .btn-wrap {margin-top: 12rem;}


/* 유틸 메뉴 - 전체 메뉴 */
#header.menu-open h1 .logo {background-image: url("/common/images/icon-logo.svg"); transition-delay: .4s;}
#header.menu-open .all-menu::before {width: 50%; transition: width .6s ease-in-out;}
#header.menu-open .all-menu::after {width: 50%; transition: width .6s ease-in-out;}
#header .all-menu {display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 50; width: 100%; height: 100%; background-color: transparent;}
#header.menu-open .all-menu {display: block; transition: width .4s ease-in-out;}
#header .all-menu::before, .all-menu::after {content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 0%; background: #fff; z-index: -1;}
#header .all-menu::before {right: 50%;}
#header .all-menu::after {right: 0;}

#header .all-menu .scroll-area {position: relative; overflow-y: hidden; height: 100%;}
#header .all-menu.scroll .scroll-area {overflow-y: auto;}
#header .all-menu .menu-wrap {position:relative; width: 1134rem; margin: 164rem auto 120rem;}
#header.menu-open .all-menu .menu-head {transition: opacity .6s ease; transition-delay: .8s; opacity: 1;}
#header .all-menu .menu-head {padding-bottom: 48rem;opacity: 0;}
#header .all-menu .menu-head .menu-tit {display: none;}
#header.menu-open .all-menu .gnb {transition: opacity .6s; transition-delay: 1.1s; opacity: 1;}
#header.menu-open .all-menu .gnb .for-move {transform: translateX(0%); transition: transform .6s; transition-delay: 1.1s;}
#header .all-menu .gnb {opacity: 0;}
#header .all-menu .gnb .one-pack, .all-menu .gnb > li .two-pack > li {overflow: hidden;}
#header .all-menu .gnb .one-pack {width: 200rem; margin-right: 74rem;}
#header .all-menu .gnb .for-move {display: inline-block; transform: translateX(-100%);}
#header .all-menu .gnb > li {display: -webkit-box; display: -ms-flexbox; display: flex; padding: 24rem 0 48rem; border-top: 1px solid #ECEEEF;}
#header .all-menu .gnb > li:last-child {padding-bottom: 0;}
#header .all-menu .gnb > li .one-depth {font-family: "Pretendard_Bold", sans-serif; font-size: max(24rem, 18px); line-height: 150%; letter-spacing: -.02em;}
#header .all-menu .gnb > li .two-pack {display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap:wrap; column-gap: 10rem; row-gap:24rem; width:calc(100% - 274rem);}
#header .all-menu .gnb > li .two-pack > li {width: 200rem;}
/* #header .all-menu .gnb > li .two-pack > li ~ li {margin-left: 10rem;} */
#header .all-menu .gnb > li .two-pack .two-depth {font-family: "Pretendard_SemiBold", sans-serif; font-size: max(18rem, 16px); line-height: 150%; letter-spacing: -.02em; transition: color .2s ease;}
#header .all-menu .gnb > li .two-pack > li.on .two-depth {color: #74C0E2;}
#header .all-menu .gnb > li .three-pack {margin-top: 16rem;}
#header .all-menu .gnb > li .three-pack .three-depth {font-family: "Pretendard_Regular", sans-serif; font-size: max(16rem, 14px); color: #697278; line-height: 160%; letter-spacing: -.02em; transition: color .2s ease;}
#header .all-menu .gnb > li .three-pack .three-depth:hover {color: #59B7E2;}
#header .all-menu .gnb > li .three-pack > li ~ li {margin-top: 8rem;}

#header .all-menu .notice-wrap {display: none;}

#header .all-menu .non-member-apply {position:fixed; bottom:40rem; right:calc((100% - 1134rem) / 2); z-index: 2; width:350rem; height:72rem; box-shadow: 0 10rem 80rem rgba(0,0,0,0.2); background:url("/common/images/img-all-menu-non-member-apply-btn.png") no-repeat right top/auto 73rem #fff; opacity:0; transition:opacity 0.6s ease;}
#header .all-menu .non-member-apply a{display:flex; align-items: center; padding:0 24rem; height:100%;}
#header .all-menu .non-member-apply .f-body1{position:relative; padding-right:24rem;}
#header .all-menu .non-member-apply .f-body1:after{display:block; content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:24rem; height:24rem; background:url("/common/images/icon-arrow-line-black.svg") no-repeat right center/24rem auto; transition:right 0.3s ease;}
#header .all-menu .non-member-apply:hover .f-body1:after{right:-5rem;}
#header.menu-open .all-menu .non-member-apply{opacity:1; transition-delay:1.6s}

.cont-sec .menu-head .log-menu {align-items: flex-start;}
.menu-head .log-menu {display: flex; justify-content: space-between; align-items: center;}
.menu-head .log-menu .user-tit {color: #C6CCD1;}
.menu-head .log-menu .user-tit span {color: #06161E;}
.menu-head .log-menu .btn-wrap a ~ a {margin-left: 24rem;}
.menu-head .loginfo-wrap {margin-top: 32rem;}
.menu-head .loginfo-wrap .loginfo-box {padding: 32rem 48rem; background-color: #1E6B8E;}
.menu-head .loginfo-wrap .loginfo-box .info-tit {color: #F5F6F7;}
.menu-head .loginfo-wrap .loginfo-box .info-tit + span {display: inline-block; margin-top: 8rem; color: #F5F6F7}
.menu-head .loginfo-wrap .loginfo-box .info-cont {display: flex; justify-content: space-between; align-items: flex-end; margin-top: 68rem;}
.menu-head .loginfo-wrap .loginfo-box .info-cont .counts {display: flex;}
.menu-head .loginfo-wrap .loginfo-box .info-cont .counts .count {display: flex; align-items: center;}
.menu-head .loginfo-wrap .loginfo-box .info-cont .counts .count span,
.menu-head .loginfo-wrap .loginfo-box .info-cont .counts .count a {color: #F5F6F7;}
.menu-head .loginfo-wrap .loginfo-box .info-cont .counts .count span {margin-top: 5rem;}
.menu-head .loginfo-wrap .loginfo-box .info-cont .counts .count a {position: relative; margin-left: 10rem;}
.menu-head .loginfo-wrap .loginfo-box .info-cont .counts .count a::before {content: ""; position: absolute; right: 0; bottom: 6rem; width: 0; height: 2px; background-color: #fff; transition: width .4s ease;}
.menu-head .loginfo-wrap .loginfo-box .info-cont .counts .count a:hover::before {left: 0; width: 100%;}
.menu-head .loginfo-wrap .loginfo-box .info-cont .counts .count ~ .count {margin-left: 80rem;}
.menu-head .loginfo-wrap .btn-wrap.mob {display: none;}
.menu-head .loginfo-wrap .last-date {margin-top: 16rem; text-align: right;}
.menu-head .loginfo-wrap .last-date .date {margin-left: 8rem;}

@media all and (max-width: 1023px) {
  /* 폰트 */
  #header .all-menu .gnb > li .one-depth {font-size: 20rem; line-height: 160%; letter-spacing: -.03em;}
  #header .all-menu .gnb > li .two-pack .two-depth {font-size: 15rem; line-height: 170%;}
  #header .all-menu .gnb > li .three-pack .three-depth {font-size: 13rem; line-height: 165%;}

  #header .all-menu .scroll-area::after {visibility: hidden; content: ""; position: fixed; top: 0; left: 0; width: calc(100% - 20rem); height: 72rem; background-color: #fff;}
  #header.menu-open .all-menu .scroll-area::after {visibility: visible; transition-delay: .6s;}
  #header .all-menu .menu-wrap {position: relative; width: 100%; min-height: 100%; margin: 0; padding: 96rem 20rem 160rem;}
  #header .all-menu .menu-wrap:has(.non-member-apply) {padding: 96rem 20rem 288rem;}
  #header .all-menu .menu-head {padding-bottom: 24rem; margin-bottom: 8rem;}
  #header .all-menu .menu-head .menu-tit {display: block;}
  #header .all-menu .gnb {border-top: 1px solid #ECEEEF;}
  #header .all-menu .gnb > li {display: block; padding: 0; border: none;}
  #header .all-menu .gnb .one-pack {width: 100%; height: 48rem; margin-right: 0;}
  #header .all-menu .gnb > li .one-depth {position: relative; display: flex; align-items: flex-end; width: 100%; height: 100%;}
  #header .all-menu .gnb > li .two-pack {display: none; padding-bottom: 10rem; padding-left: 12rem; width:100%;}
  #header .all-menu .gnb > li .two-pack > li {width: 100%; margin-top: 10rem;}
  #header .all-menu .gnb > li .two-pack > li:first-child{margin-top: 24rem;}
  #header .all-menu .gnb > li .two-pack > li:has(.three-pack) {margin-top: 24rem;}
  #header .all-menu .gnb > li .two-pack > li .for-move {width: 100%;}
  #header .all-menu .gnb > li .two-pack > li ~ li {margin-left: 0;}
  #header .all-menu .gnb > li .three-pack {margin: 16rem 0 0 16rem;}
  #header .all-menu .gnb > li .three-pack > li ~ li {margin-top: 10rem;}
  #header .all-menu .gnb > li .one-depth:after {content: ''; display: block; position: absolute; right: 0; bottom: 0; width: 32rem; height: 32rem; background: url("/common/images/icon-lnb-arr.svg") no-repeat center center / 100% auto; transform: rotate(0); transition: .3s all ease; transform-origin: center; opacity: .4;}
  #header .all-menu .gnb > li.active .one-depth:after {transform: rotate(180deg); opacity: 1;}
  #header .all-menu .gnb .for-move {transform: unset !important; transition: unset !important;}

  #header.menu-open .all-menu .notice-wrap {transition: opacity .6s ease; transition-delay: 1.2s; opacity: 1;}
  #header .all-menu .notice-wrap {position: absolute; display: block; bottom: 32rem; left: 0; right: 0; width: 100%; padding: 0 20rem; opacity: 0;}
  #header .all-menu .notice-wrap .notice-rolling {position: relative; width: 100%; height: 32rem;/*  padding-left: 50rem; */}
  #header .all-menu .notice-wrap .notice-rolling::after {content: ""; position: absolute; left: 0; top: 50%; bottom: 0; transform: translateY(-50%); width: 32rem; height: 32rem; background: url("/common/images/icon-noti-on.svg") no-repeat top center / 100% auto;}
  #header .all-menu .notice-wrap .notice-rolling ul {position: relative; width: 100%; height: 100%; overflow: hidden;}
  #header .all-menu .notice-wrap .notice-rolling ul li {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
  #header .all-menu .notice-wrap .notice-rolling ul li a {display: inline-block; width: 100%; height: 100%; color: #06161E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 32rem;}
  #header .all-menu .notice-wrap .notice-rolling ul li a .new-icon {position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
  #header .all-menu .notice-wrap .notice-rolling ul li a:has(.new-icon) {padding-left: 26rem;}
  #header .all-menu .notice-wrap .notice-rolling ul li.prev {top: 36rem; transition: top .4s ease;}
  #header .all-menu .notice-wrap .notice-rolling ul li.current{top: 0; transition: top .4s ease;}
  #header .all-menu .notice-wrap .notice-rolling ul li.next{top: -36rem;}
  #header .all-menu .menu-wrap:has(.non-member-apply) .notice-wrap{bottom:128rem;}

  #header .all-menu .non-member-apply{bottom:32rem; left:50%; transform:translateX(-50%); width:calc(100% - 40rem);}

  .all-menu .menu-head .log-menu {display: flex;}
  .all-menu .menu-head .log-menu .btn-wrap {margin-top: 0;}
  .all-menu .menu-head .log-menu:has(.user-tit br) {align-items: flex-end;}
  .menu-head .log-menu {display: block;}
  .menu-head .log-menu {margin-top: 40rem;}
  .menu-head .log-menu .btn-wrap {margin-top: 8rem;}
  .menu-head .log-menu .btn-wrap a ~ a {margin-left: 20rem;}
  .menu-head .loginfo-wrap {margin-top: 24rem;}
  .menu-head .loginfo-wrap .loginfo-box {padding: 24rem;}
  .menu-head .loginfo-wrap .loginfo-box .info-tit + span {margin-top: 4rem;}
  .menu-head .loginfo-wrap .loginfo-box .info-cont {margin-top: 30rem;}
  .menu-head .loginfo-wrap .loginfo-box .info-cont .btn-wrap.pc {display: none;}
  .menu-head .loginfo-wrap .loginfo-box .info-cont .counts {flex: 1;}
  .menu-head .loginfo-wrap .loginfo-box .info-cont .counts .count ~ .count {margin-left: 0;}
  .menu-head .loginfo-wrap .loginfo-box .info-cont .counts .count {flex-direction: column-reverse; align-items: center; flex: 1;}
  .menu-head .loginfo-wrap .loginfo-box .info-cont .counts .count span,
  .menu-head .loginfo-wrap .loginfo-box .info-cont .counts .count a {display: inline-block; margin-left: 0;}
  .menu-head .loginfo-wrap .loginfo-box .info-cont .counts .count span {margin-top: 0;}
  .menu-head .loginfo-wrap .loginfo-box .info-cont .counts .count a::before {display: none;}
  .menu-head .loginfo-wrap .loginfo-box .info-cont .counts .count a::after {content: ""; position: absolute; left: 0; right: 0; bottom: 5rem; width: 100%; height: 2px; background-color: #fff;}
  .menu-head .loginfo-wrap .btn-wrap.mob {margin-top: 16rem; display: block;}
  .menu-head .loginfo-wrap .btn-wrap.mob .btn-set a {flex: 1; margin-top: 0;}
}


/* 유틸 메뉴 - 전체 검색 */
#header .all-srch {display: none; position: fixed; top: 100rem; left: 0; right: 0; z-index: 31; justify-content: center; width: 100%; background-color: #fff;}

@media all and (max-width: 1023px) {
  #header.srch-open .util-area .icon-btn.search-btn {z-index: 49;}
  #header .all-srch {top: 0; height: 100%;}
  #header .all-srch .srch-wrap {margin: 96rem auto 0; width: calc(100% - 40rem);}
}
/* --------------------------------------------- header 헤더 - END --------------------------------------------- */





/* --------------------------------------------- footer 푸터 - START --------------------------------------------- */
footer {position: relative; padding: 60rem 0; padding-bottom: 60rem; border-top: 1px solid #DFE1E4; background-color: #fff;}
footer .inner {width: 1600rem;}
footer .footer-logo {width: 152rem; height: 77rem;}
footer .footer-logo img {width: 100%;}
footer .family-site {position: absolute; right: 0; top: 5rem;}
footer .family-site .form-select {width: 265rem;}
footer .links-box {display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 40rem;}
footer .links-box a {font-family: "Pretendard_Medium", sans-serif; color: #06161E;}
footer .links-box a.bold {color: #000102;}
footer .links-box a ~ a {margin-left: 20rem;}
footer .copy-area {display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 10rem; color: #697278;}
footer .copy-area span {position: relative;}
footer .copy-area span ~ span {margin-right: 10rem; padding-right: 10rem;}
footer .copy-area span ~ span::after {content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: inline-block; width: 1px; height: 16rem; background-color: #DFE1E4;}
footer .copy-area span:first-child {margin-right: 10rem;} /* 2024-04-01 추가 */
footer .copy-area span:last-child {margin-right: 0; padding-right: 0;}
footer .copy-area span:last-child:after {display: none;}

@media all and (max-width: 1023px) {
  footer {padding: 48rem 0 32rem; border-top: 8px solid #F5F6F7;}
  footer .inner {padding: 0 20rem; width: 100%;}
  footer .footer-logo {width: 103rem; height: 52rem;}
  footer .family-site {position: relative; top: 0; margin-top: 28rem;}
  footer .family-site .form-select {width: 100%;}
  footer .links-box {flex-wrap: wrap; margin-top: 23rem;}
  footer .links-box a {margin-top: 8rem; width: 50%; order: 1;}
  footer .links-box a.personal {order: 1;}
  footer .links-box a.email {order: 2;}
  footer .links-box a.terms {order: 3;}
  footer .links-box a.way {order: 4;}
  footer .links-box a ~ a {margin-left: 0;}
  footer .copy-area {flex-wrap: wrap; margin-top: 18rem;}
  footer .copy-area span:first-child {width: 100%; margin-right: 8rem;} /* 2024-04-01 추가 */
  footer .copy-area span ~ span {margin-right: 8rem; padding-right: 8rem;}
  footer .copy-area span ~ span::after {transform: translateY(-51%); height: 12rem;}
}
/* --------------------------------------------- footer 푸터 - END --------------------------------------------- */





/* --------------------------------------------- 라벨 label - START --------------------------------------------- */
/* 글자 | 글자 */
.sub-txt {display: inline-block; color: #9CA1A6;}
.sub-txt p {position: relative; display: inline-block; padding: 0 10rem;}
.sub-txt p:first-child {padding-left: 0;}
.sub-txt p ~ p::before {content: ""; position: absolute; left: 0; top: calc(50% + 1rem); transform: translateY(-50%); height: 16rem; width: 1px; background-color: #D9D9D9;}
.sub-txt p span {color: #06161E;}

@media all and (max-width: 1023px) {
  .sub-txt p {padding: 0 8rem;}
}


/* 박스 형태 라벨 */
.status-info-w {display: flex; align-items: center; row-gap: 4rem; column-gap: 4rem;}

.group {display: flex; align-items: center;}
.group > *{margin-left: 16rem;}
.group > *:first-child {margin-left: 0;}

.labels {display: flex; flex-direction: column; align-items: flex-start;}
.labels .box-label ~ .box-label {margin-top: 4rem;}

.box-label {display: inline-flex; justify-content: center; align-items: center; min-height: 26rem; padding: 0 6rem; background-color: rgba(156, 161, 166, 0.12); border-radius: 2px;}
.box-label span {color: #06161E; font-size: max(14rem, 13px); line-height: 170%; letter-spacing: -0.28rem;}

        /* 박스 형태 라벨 (큰 사이즈) */
.box-label.bigger {min-height: 30rem; padding: 0 8rem;} /* 교육 리스트 내부에 있는 라벨 */
.box-label.bigger span {font-size: max(16rem, 14px); font-family: "Pretendard_Regular", sans-serif !important;}

        /* 상태 값에 따른 색상 구분 */
.box-label.accepting {background-color: rgba(0, 100, 255, 0.12);}/* 접수중: accepting*/
.box-label.accepting span {color: #0064FF;}
.box-label.waiting {background-color: rgba(189, 184, 56, 0.16);}/* 접수대기: waiting */
.box-label.waiting span {color: #969345;}
.box-label.end {background-color: #697278;}/* 접수마감: end */
.box-label.end span {color: #fff;}
.box-label.complete {background-color: rgba(58, 183, 123, 0.16);}/* 답변완료: complete */
.box-label.complete span {color: #3AB77B;}
.box-label.teal {background-color: rgba(30, 107, 142, 0.12);} /* 마이페이지 > 평가하기 - 문항 수 */
.box-label.teal span {color: #1E6B8E;}
.box-label.arr {background-color: rgba(231, 59, 48, 0.15);} /* 에러: err */
.box-label.arr span {color: #E73B30;}
.box-label.available {background-color: #fff; border:  1px solid rgba(99, 145, 230, 0.24);} /* 교육사업 > '비회원 신청 가능' 라벨 */
.box-label.available span {color: #6391E6; font-family: "Pretendard_Medium", sans-serif !important;}


/* 텍스트 형태 라벨 */
.sort-label-area {display: flex; align-items: center;}
.sort-label-area .label {position:relative; display: flex; justify-content: center; align-items: center;}
.sort-label-area .label + .label {margin-left: 11rem;}
/* .sort-label-area .label + .label:before {content: ''; display:block; position: absolute; top: 50%; transform: translateY(-50%); left: -7rem; width: 3rem; height: 3rem; border-radius: 100%; background-color: #C6CCD1;} */
.sort-label-area .label + .label:before {content: ''; display: block; position: absolute; top: max(11rem, 10px); left: -7rem; width: 3rem; height: 3rem; border-radius: 100%; background-color: #C6CCD1;}
.sort-label-area .label span {font-size: max(16rem, 14px); font-family: "Pretendard_Regular", sans-serif; color: #697278; line-height: 160%; letter-spacing: -.02em;}
.sort-label-area.division-line .label span {color: #06161E;}
.sort-label-area.division-line .label + .label {margin-left: 21rem;}
.sort-label-area.division-line .label + .label:before {width: 1px; height: 20rem; left: -11rem; top: 50%; transform: translateY(-50%); background-color: #C6CCD1; border-radius: 0;}
.sort-label-area:has(span.label) {display: block;}
.sort-label-area:has(span.label) .label {display: inline; font-size: max(16rem, 14px); font-family: "Pretendard_Regular", sans-serif; color: #06161E; line-height: 160%; letter-spacing: -.02em;}
.sort-label-area:has(span.label) .label:before {top: max(9rem, 8px); left: -9rem;}



.txt .txt-item {display: inline-block; position: relative;}
.txt .txt-item ~ .txt-item {padding-left: 13rem; margin-left: 12rem;}
.txt .txt-item ~ .txt-item:after {content: ''; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 20rem; background-color: #C6CCD1;}
@media all and (max-width: 1023px) {
  .txt .txt-item ~ .txt-item:after {height: 16rem;}
}

@media all and (max-width: 1023px) {
  .group >* {margin-left:8rem;}
  
  .box-label span {font-size: 12rem; line-height: 160%; letter-spacing: -.02em;}

          /* 박스 형태 라벨 (큰 사이즈) */
  .box-label.bigger {min-height: 25rem;} /* 교육 리스트 내부에 있는 라벨 */
  .box-label.bigger span {font-size: 13rem;}


  /* 텍스트 형태 라벨 */
  .sort-label-area .label + .label {margin-left: 9rem;}
  .sort-label-area .label + .label:before {top: 9rem; left: -6rem;}
  .sort-label-area .label span {font-size: 13rem; line-height: 165%;}
  .sort-label-area.division-line .label + .label {margin-left: 17rem;} /* 구분이 바 형태 */
  .sort-label-area.division-line .label + .label:before {left: -9rem; height: 12rem;}
  .sort-label-area:has(span.label) .label {font-size: 13rem; line-height: 165%;}
  .sort-label-area:has(span.label) .label:before {top: 7rem; left: -6rem;}
}
/* --------------------------------------------- 라벨 label - END --------------------------------------------- */






/* --------------------------------------------- Btn 버튼 - START --------------------------------------------- */
.page-bot-btn-sec {margin-top: 120rem;}

.btn-wrap {display: flex; justify-content: space-between;}
.btn-wrap.add-load {margin-top: 40rem;}
.btn-wrap.center {justify-content: center;}
.btn-wrap .btn-set {display: flex; column-gap: 10rem;}
.btn-wrap .btn-set:has(.btn-text-icon[class*='-circle'] ~ .btn-text-icon[class*='-circle']) {column-gap: 60rem;}

@media all and (max-width: 1023px) {
  .btn-wrap {flex-wrap: wrap;}
  .btn-wrap.add-load {margin-top: 48rem;}
  .btn-wrap .btn-set {flex-wrap: wrap; row-gap: 8rem;}
  .btn-wrap .btn-set:has(.btn-text-icon[class*='-circle'] ~ .btn-text-icon[class*='-circle']) {column-gap: 32rem;}
}

/* solid button */
.btn-solid {display: flex; justify-content: center; align-items: center; border-radius: 2px; transition: .3s background-color ease;}
.btn-solid span {font-family: "Pretendard_Medium", sans-serif; letter-spacing: -.02em;}
.btn-solid .item-count {margin-left: 4rem; font-family: "Pretendard_Regular", sans-serif;}
.btn-solid.small {min-height: 50rem;  padding: 12rem 28rem;}
.btn-solid.large {min-height: 68rem; padding: 16rem 40rem;}
.btn-solid.small span {font-size: max(16rem, 14px); line-height: 160%;}
.btn-solid.large span {font-size: max(24rem, 18px); line-height: 150%;}
.btn-solid.white-bg {background-color: #fff;}
.btn-solid.white-bg span {color: #06161E;}
.btn-solid.black-bg {background-color: #09202C;}
.btn-solid.black-bg span {color: #fff;}
.btn-solid.black-bg:not(.disabled):hover {background-color: #000102;}
.btn-solid.gray-bg {background-color: #F5F6F7;}
.btn-solid.gray-bg span {color: #06161E;}
.btn-solid.gray-bg:not(.disabled):hover {background-color: #ECEEEF;}
.btn-solid.disabled {background: #D9DDE0; cursor: default;}
.btn-solid.disabled span {color: #fff;}

.btn-solid.has-icon span {padding-right: 32rem;} /* solid + icon */
.btn-solid.tel span {background: url("/common/images/icon-tel-black.svg") right center / 24rem no-repeat;}
.btn-solid.lecture span {background: url("/common/images/icon-lecture-black.svg") right center / 24rem no-repeat;}
.btn-solid.download span {background: url("/common/images/icon-download-thin-black.svg") right center / 24rem no-repeat;}

/* line */
.btn-solid.black-line {border: 1px solid #06161E;}
.btn-solid.gray-line {border: 1px solid #F5F6F7; color: #F5F6F7}

/* icon */
.btn-solid.icon::after {content: ""; display: inline-block; width: 24rem; height: 24rem; margin-left: 8rem; background: url("") no-repeat center center / 100% auto;}
.btn-solid.icon.transfer::after {background-image: url("/common/images/icon-edutransfer.svg");}
.btn-solid.icon.taking::after {background-image: url("/common/images/icon-taking.svg");}
.btn-solid.icon.checkout::after {background-image: url("/common/images/icon-checkout.svg");}
.btn-solid.icon.btn-print::after {background-image: url("/common/images/icon-print.svg");}
.btn-solid.icon.apply-cancel::after {background-image: url("/common/images/icon-apply-cancel.svg");}
.btn-solid.icon.attendance::after {background-image: url("/common/images/icon-attendance.svg");}
.btn-solid.icon.evaluation::after {background-image: url("/common/images/icon-evaluation.svg");}

/* text button */
.btn-text {font-size: max(16rem, 14px); font-family: "Pretendard_Medium", sans-serif; color: #06161E; line-height: 160%; letter-spacing: -.02em;}
.btn-text-icon {display: flex;}
.btn-text-icon span {display: flex; align-items: center; position: relative; font-size: max(16rem, 14px); font-family: "Pretendard_Medium", sans-serif; color: #06161E; line-height: 160%; letter-spacing: -.02em;}
.btn-text-icon span.md {font-size: max(18rem, 15px);} /* 2024-08-14 추가 */
.btn-text-icon span:after {content: ''; display: block; position:relative; left: 0; margin-left: 10rem;}
.btn-text-icon[class*='-circle'] span:after {width:32rem; height: 32rem; background: url() no-repeat center center / 32rem auto; border-radius: 50%; transition: .3s transform;}
.btn-text-icon[class*='-circle']:not(.x-circle):hover span:after {transform: translateX(6rem);}

.btn-text.gray-txt {font-family: "Pretendard_Regular", sans-serif; color: #697278;}
.btn-text-icon.gray-txt span {font-family: "Pretendard_Regular", sans-serif; color: #697278;}
.btn-text-icon.navy-txt span {color: #134468;} /* 2024-08-14 추가 */

.btn-text-icon.black-circle span:after {background-color: #06161E; background-image: url("/common/images/icon-btn-circle-black.svg");}
.btn-text-icon.white-circle span:after {background-color: #fff; background-image: url("/common/images/icon-btn-circle-gray.svg");}
.btn-text-icon.white-circle span {color: #fff;}
.btn-text-icon.x-circle span:after {background-color: #06161E; background-image: url("/common/images/icon-btn-circle-x.svg");}

/* 2024-08-14 수정 s */
.btn-text-icon.black-arrow span::after,
.btn-text-icon.gray-arrow span::after,
.btn-text-icon.navy-arrow span::after{width: 24rem; height: 24rem; margin-left: 0; background: url() no-repeat center center / 100%; transition: .2s left ease;}
.btn-text-icon.black-arrow:hover span::after,
.btn-text-icon.gray-arrow:hover span::after,
.btn-text-icon.navy-arrow:hover span::after {left: 4rem;}
.btn-text-icon.black-arrow span::after {background-image: url("/common/images/icon-arrow-line-black.svg");}
.btn-text-icon.gray-arrow span::after {background-image: url("/common/images/icon-arrow-line-gray.svg");}
.btn-text-icon.navy-arrow span::after {background-image: url("/common/images/icon-arrow-line-navy.svg");}
.btn-text-icon.gray-arrow span {color: #F5F6F7;}
/* // 2024-08-14 수정 e */

    /* delete button */
.btn-text-icon.delete span {color: #697278;}
.btn-text-icon.delete span:after {margin-left: 0; width: 32rem; height: 32rem; background: url("/common/images/icon-close-small-gray.svg") no-repeat center top / 100%;}
.btn-text-icon.delete.black span {color: #06161E;}
.btn-text-icon.delete.black span:after {background: url("/common/images/icon-close-small-black.svg") no-repeat center top / 100%;}

    /* 가이드 버튼 (물음표 아이콘) */
.btn-text-icon.question-mark span {color: #697278;}
.btn-text-icon.question-mark span:after {margin-left: 6rem; width: 32rem; height: 32rem; background: url("/common/images/icon-question-mark.svg") no-repeat center top / 100%;}

    /* 더보기 ( + 플러스 아이콘) */
.btn-text-icon.plus span {color: #06161E;}
.btn-text-icon.plus span:after {margin-left: 0; width: 24rem; height: 24rem; background: url("/common/images/icon-plus.svg") no-repeat center top / 100%;}

    /* 문구만 있는 다운로드 */
.btn-text-icon.download span {font-family: "Pretendard_Medium", sans-serif; font-size: max(16rem, 14px); color: #06161E; line-height: 160%; letter-spacing: -.02em; white-space: nowrap;}
.btn-text-icon.download span:after {margin-left: 6rem; width: 24rem; height: 24rem; background: url("/common/images/icon-download-black.svg") center/24rem no-repeat;}
.btn-text-icon.download.white span {color: #fff;}
.btn-text-icon.download.white span:after {background: url("/common/images/icon-download-white.svg") center/24rem no-repeat;}
.btn-text-icon.download.gray span {color: #697278;}
.btn-text-icon.download.gray span:after {background: url("/common/images/icon-download.svg") center/24rem no-repeat;}

    /* 배경있는 다운로드 */
.btn-text-icon.download-bg {display: inline-block; width: 370rem; /*min-height: 48rem;*/ padding: 11rem 24rem; background-color: #F5F6F7;}
.btn-text-icon.download-bg.gray {background-color: #ECEEEF;}
.btn-text-icon.download-bg span {display: block; padding-right: 44rem; font-family: "Pretendard_Regular", sans-serif; font-size: max(16rem, 14px); color: #06161E; line-height: 160%; letter-spacing: -.02em; word-wrap: break-word; word-break: break-all;}
.btn-text-icon.download-bg span:after {position: absolute; left: auto; right: 0; top: 0rem; margin-left: 0; width: 24rem; height: 24rem; background: url("/common/images/icon-download-thin-black.svg") no-repeat center center / 100% auto;}
.btn-text-icon.download-bg:hover span {text-decoration: underline;}

/* 대각선 화살표 아이콘 */
.btn-text-icon.diagonal-arrow span:after {margin-left: 0; width: 24rem; height: 24rem; background: url("/common/images/icon-diagonal-arrow.svg") center / 24rem no-repeat;}

/* arrow button */
.btn-icon {display: inline-block; width: 32rem; height: 32rem; background: url() no-repeat center center / 100% auto;}

/* tooltip button */
*:has( > .tooltip-wrap) {display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap;}
.tooltip-wrap {position: relative; display: inline-block; vertical-align: middle; margin-left: 6rem;}
.tooltip-wrap .tooltip-btn {position: relative; display: block; width: 24rem; height: 24rem; background: url("/common/images/icon-btn-tooltip.svg") no-repeat center center / 100% auto;}
.tooltip-wrap.open .tooltip-btn {background-image: url("/common/images/icon-btn-tooltip-open.svg"); pointer-events: none;}
.tooltip-wrap.open .tooltip-btn:after {content: ""; position: absolute; top: calc(100% + 3rem); left: 50%; transform: translateX(-50%); width: 22rem; height: 17rem; background: url("/common/images/icon-round-triangle-gray.svg") no-repeat center center / 100% auto;}
.tooltip-wrap .tooltip-box {display: none; z-index: 3; position: absolute; top: calc(100% + 14rem); left: 50%; transform: translateX(-50%); width: 100vw; max-width: 507rem; min-width: 100rem; padding: 12rem 60rem 12rem 16rem; border-radius: 2px; background-color: #F5F6F7;}
.tooltip-wrap .tooltip-box .btn-close {position: absolute; top: 12rem; right: 16rem; width: 24rem; height: 24rem; background: url("/common/images/icon-close-tooltip.svg") no-repeat center center / 24rem auto;}
.tooltip-wrap .tooltip-box .txt {font-size: max(14rem, 13px); font-family: "Pretendard_Regular", sans-serif; color: #697278; line-height: 170%; letter-spacing: -.02em;}
.tooltip-wrap .tooltip-box .txt {display: inline-block; margin-top: 0 !important; /*word-wrap: break-word; word-break: break-all;*/} /* 2024-08-14 수정 */

@media all and (max-width: 1023px) {
  .tooltip-wrap {margin-left: 0;}
  .tooltip-wrap .tooltip-box {position: absolute; left: 0; transform: translateX(0); max-width: unset; min-width: unset; min-width: unset; width: auto; white-space: unset !important;}
  .tooltip-wrap .tooltip-box .txt {font-size: 12rem; line-height: 160%;}
}

/* badge */
.badge {display: inline-block; min-height: 30rem; padding: 2rem 10rem; font-size: max(16rem, 14px); font-family: "Pretendard_Medium", sans-serif; color: #fff; letter-spacing: -.02em; line-height: 30rem; border-radius: 20rem; background: #59B7E2;}
.new-icon {position: relative; top: 3rem; display: inline-block; width: 24rem; height: 24rem; margin-right: 12rem; background: url("/common/images/icon-new-notice.svg") no-repeat center center / 100%;}
.new-icon.small {width: 18rem; height: 18rem; margin-right: 8rem;}

/* 텍스트만 있는 첨부파일 */
.attached-file {font-family: "Pretendard_Medium", sans-serif;}
.attached-file:hover {text-decoration: underline;}

@media all and (max-width: 1023px) {
  .page-bot-btn-sec {margin-top: 48rem;}

  .btn-text {font-size: 13rem; line-height: 165%;}
  .btn-text-icon[class*='-circle'] span:after {width: 24rem; height: 24rem; min-width:24rem; background-size: 24rem auto;}
  .btn-text-icon span {font-size: 15rem; line-height: 155%; letter-spacing: -0.3rem;}
  .btn-text-icon span:after {margin-left: 8rem;}

  /* delete button */
  .btn-text-icon.delete span:after {width: 24rem; height: 24rem; background-size: 24rem;}

  /* 가이드 버튼 (물음표 아이콘) */
  .btn-text-icon.question-mark span:after {background-size: 24rem;}

  
  /* 문구만 있는 다운로드 */
  .btn-text-icon.download span {font-size: 13rem; line-height: 165%; letter-spacing: -0.26rem;}
  .btn-text-icon.download span:after {margin-left: 0; background: #fff url("/common/images/icon-download-mobile.svg") center/24rem no-repeat;}

  /* 배경있는 다운로드 */
  .btn-text-icon.download-bg {width: 100%;}
  .btn-text-icon.download-bg span {font-size: 13rem; line-height: 165%;}

  /* 텍스트만 있는 첨부파일 */
  .attached-file span {font-size: 13rem;}

  /* badge */
  .new-icon {width: 18rem; height: 18rem; margin-right: 8rem;}
}
/* --------------------------------------------- Btn 버튼 - END --------------------------------------------- */








/* --------------------------------------------- Form 폼 - START --------------------------------------------- */
.error-msg {display: none; margin-top: 8rem; font-family: "Pretendard_Medium", sans-serif; color: #E73B30; font-size: max(14rem, 13px); line-height: 170%; letter-spacing: -0.28rem;}
.error .error-msg {display: block;}
.satisfy-msg {display: none; margin-top: 8rem; font-family: "Pretendard_Medium", sans-serif; color: #59B7E2; font-size: max(14rem, 13px); line-height: 170%; letter-spacing: -0.28rem;}
.satisfy .satisfy-msg {display: block;}

.form-group {display: flex; align-items: flex-end; flex-wrap: wrap; column-gap: 20rem; row-gap: 16rem;}
.form-group .file-list-area ~ .attatched-file-area {margin-top: 8rem}
.form-group .file-list-area ~ .btn-wrap.btn-down-wrap {margin-top: 8rem !important;}

.form-group.form-calendar .form-input:first-child{position:relative; margin-right: 10rem; width:160rem;}
.form-group.form-calendar .form-input:first-child:after{display:block; content:"~"; position:absolute; top:50%; right:max(-18rem, -16px); transform:translateY(-50%); font-size: max(16rem, 14px); font-family: "Pretendard_Regular", sans-serif; color: #697278; line-height: 160%; letter-spacing: -.02em;}
.form-group.form-calendar .form-input:last-child{width:179rem;}

.btn-down-wrap { width: 100%;}

.opt-group {display: flex; flex-wrap:wrap; column-gap: 48rem; row-gap: 24rem;} /* default: 옆으로 나란히 배열 */
.opt-group.verticality {display: block;} /* verticality : 아래로 떨어지는 */
.opt-group.verticality .form-radio,
.opt-group.verticality .form-checkbox {margin-top: 16rem;}
.opt-group.verticality .form-radio:first-child,
.opt-group.verticality .form-checkbox:first-child {margin-top: 0;}

.form-select {display: flex; align-items: center; position: relative; width: max(243rem, 200px); /* height: 50rem; */ min-height: 50rem; background-color: #F5F6F7; z-index:1;} /* form - select */
.form-select::before {content: ""; display: inline-block; position: absolute; right: 28rem; top: 50%; transform: translateY(-50%); width: 24rem; height: 24rem; background: url("/common/images/icon-arrow-down.svg") no-repeat center center / 100%; transition: transform .2s ease; z-index: -1;}
.form-select select {width: 100%; height: 100%; padding: 0 60rem 0 28rem; font-size: max(16rem, 14px); font-family: "Pretendard_Regular", sans-serif; color: #06161E; line-height: 160%; letter-spacing: -.02em; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.form-select.active::before {transform: translateY(-50%) rotate(180deg);}
.form-select.w332 {width: 332rem;}
.form-select.disabled select {color: #9CA1A6; pointer-events: none;}
.form-select.disabled::before {opacity: .4;}
.form-select select:disabled {color: #9CA1A6;}
.form-select:has(select:disabled)::before {opacity: .4;}
.form-select select {}

.form-select.bdr-select {min-width: 103rem; width: auto; min-height: 40rem; height: auto; background-color: transparent; border-bottom: 1px solid #06161E;} /* 텍스트 형태 + 하단 border */
.form-select.bdr-select::before {right: 0; top: 0; transform: translateY(0);}
.form-select.bdr-select select {padding: 0 24rem 10rem 0; font-size: max(18rem, 16px); font-family: "Pretendard_SemiBold", sans-serif; color: #06161E; line-height: 155%; letter-spacing: -.02em;}
.form-select.bdr-select.active::before {transform: rotate(180deg);}
.form-select.txt-select {min-width: 128rem; width: auto; height: 40rem; background-color: transparent;}
.form-select.txt-select::before {right: 0;}
.form-select.txt-select select {padding: 0; font-size: max(16rem, 14px); font-family: "Pretendard_Medium", sans-serif; line-height: 160%;}
.form-select.txt-select select {padding-right: 28rem;}

.form-input {position: relative; display: flex; align-items: center; width: 234rem; border-bottom: 1px solid #06161E; transition: .3s border-color ease;} /* form - input text */
.form-input input {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.form-input:has(input:placeholder-shown) {border-bottom: 1px solid #D9DDE0;}
.form-input:has(input:focus) {border-bottom: 1px solid #06161E;}
.form-input:has(input:disabled),
.form-input:has(input:read-only) {border-bottom: 1px solid #D9DDE0;}

.form-input.w-shortest {width: 116rem;}
.form-input.w-shorter {width: 168rem;}
.form-input.w-longer {width: 370rem;}
.form-input.w-longest {width: 506rem;}
.form-input.w-full {width: 100% !important;}

.form-input.srch-input {display: flex; justify-content: space-between;}
.form-input.srch-input input::placeholder {font-size: max(18rem, 16px); font-size: max(16rem, 14px); color: #9CA1A6; line-height: 155%; letter-spacing: -.02em;}
.form-input.srch-input .input-btn-wrap {display: flex; align-items: center; margin-left: 16rem;}
.form-input.srch-input .input-btn-wrap .delete-btn {display: none; margin-right: 16rem; width: 20rem; height: 20rem; background: url("/common/images/icon-delete-circle.svg") center center / 20rem no-repeat;}
.form-input.srch-input .input-btn-wrap .srch-btn {width: 32rem; height: 32rem; background: url("/common/images/icon-search.svg") center center / 32rem no-repeat;}
.form-input.id {padding-left: 36rem; background: url("/common/images/icon-people.svg") left center / 24rem no-repeat;} /* 사람모양 아이콘 - 로그인 아이디 */
.form-input.password {padding-left: 36rem; background: url("/common/images/icon-password.svg") left center / 24rem no-repeat;} /* 열쇠 아이콘 - 로그인 비밀번호 */
.form-input.calendar {padding-right: 36rem; background: url("/common/images/icon-calendar.svg") right center / 24rem no-repeat;} /* 달력 아이콘 */
.form-input input {width: 100%; border: none;}
.form-input .unit-txt {white-space: nowrap; color: #697278;}
.form-input .unit-txt.timer {color: #E73B30; font-size: max(14rem, 13px); line-height: 170%; letter-spacing: -0.28rem;}
.form-input .unit-txt:first-child {margin-right: 8rem;}
.form-input .unit-txt:last-child {margin-left: 8rem;}
.error .form-input {border-bottom: 1px solid #E73B30;}

.form-textarea {position: relative; display: flex; flex-direction: column; width: 100%; height: 276rem; border: 1px solid #06161E; border-radius: 2px; transition: .3s border-color ease;} /* form - textarea */
.form-textarea:has(textarea:placeholder-shown) {border: 1px solid #D9DDE0;}
.form-textarea:has(textarea:focus) {border: 1px solid #06161E;}
.form-textarea:has(textarea:disabled) .check-byte .txt:first-child {color: #C6CCD1;}
.form-textarea:has(textarea:placeholder-shown) .check-byte .txt:first-child {color: #C6CCD1;}
.form-textarea:has(textarea:disabled) {border: 1px solid #D9DDE0;}
.form-textarea textarea {width: 100%; height: 100%; padding: 16rem 23rem 0 16rem; border: none;}
.form-textarea textarea::-webkit-scrollbar {width: 7rem;}
.form-textarea textarea::-webkit-scrollbar-thumb {border-radius: 2px; -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); background-color: #9CA1A6;}
.form-textarea .check-byte {display: flex; margin: 16rem; color: #C6CCD1; font-size: max(14rem, 13px); line-height: 170%; letter-spacing: -0.28rem;}
.form-textarea .check-byte .txt {position: relative;}
.form-textarea .check-byte .txt:first-child {color: #697278;}
.form-textarea .check-byte .txt:last-child::before {content: '/'; display: inline-block; left: 0; top: 0; width:9rem; height: 100%; padding-left: 4rem; color: #C6CCD1;}

.form-checkbox {position: relative; z-index:1;} /* form - checkbox */
.form-checkbox input {position: absolute; top: 0; left: 0; width: 20rem; height: 20rem; opacity: .001;}
.form-checkbox input + label {position: relative; display: inline-block; padding-left: max(30rem, 27px); min-height: 22rem; width:auto; font-size: max(16rem, 14px); color: #697278; background: url("/common/images/icon-checkbox.svg") left top/max(22rem, 19px) no-repeat; cursor: pointer;}
.form-checkbox input:focus-visible + label {outline: 2px solid #000; border-radius: 2px;}
.form-checkbox input:checked + label {color: #000102; background: url("/common/images/icon-checkbox-checked.svg") left top/max(22rem, 19px) no-repeat;}
.form-checkbox input:disabled + label {color: #B2B8BD; background: url("/common/images/icon-checkbox-disabled.svg") left top/max(22rem, 19px) no-repeat;}
.form-checkbox.no-txt{height:max(22rem, 19px);}
.form-checkbox.no-txt input + label{padding-left:22rem;}

.form-radio {position: relative;} /* form - radio */
.form-radio input {position: absolute; top: 0; left: 0; width: 22rem; height: 22rem; opacity: .001;}
.form-radio input + label {position: relative; display: inline-block; padding-left: max(30rem, 27px); min-height: 22rem; width:auto; font-size: max(16rem, 14px); color: #697278; background: url("/common/images/icon-radio.svg") left top/max(22rem, 19px) no-repeat; cursor: pointer;}
.form-radio input:focus-visible + label {outline: 2px solid #000; border-radius: 2px;}
.form-radio input:checked + label {color: #000102; background: url("/common/images/icon-radio-checked.svg") left top/max(22rem, 19px) no-repeat;}
.form-radio input:disabled + label {color: #B2B8BD; background: url("/common/images/icon-radio-disabled.svg") left top/max(22rem, 19px) no-repeat;}
.form-radio.bigger input + label {font-family: "Pretendard_SemiBold", sans-serif; padding-left: max(37rem, 27px); font-family: "Pretendard_SemiBold", sans-serif; font-size: max(18rem, 16px);}

/* 2024-08-23 추가 s */
.input-pop {display: flex; align-items: center; margin-top: 13rem;}
.input-pop.on {margin-top: 5rem;}
.input-pop .form-input {display: none; margin-left: 10rem;}
.input-pop.on .form-input {display: block;}
/* // 2024-08-23 추가 e */

.file-btn-area {align-self: flex-start; position:relative; width: 114rem; height: 50rem;} /* form - file */
.file-btn-area input[type="file"] {position:relative; width:100%; height:100%; opacity:0;}
.file-btn-area input[type="file"]:disabled + label.btn-solid.gray-bg {color: #fff; background-color: #C6CCD1;}
.file-btn-area label {position: absolute; left: 0; top:0; width:100%; height: 100%; cursor:pointer;}
.file-btn-area input:focus-visible + label {outline: 2px solid #000; border-radius: 2px;}
.file-list-area {position: relative; display: flex; align-items: flex-start; flex-wrap: wrap; row-gap: 8rem; padding-top: 16rem; width: 370rem; min-height: 50rem;}
.file-list-area::before {content: ''; display: block; position: absolute; left: 0; top: 49rem; width: 100%; height: 1px; background-color: #D9DDE0;}
.file-list-area .empty-txt {color: #B2B8BD; font-size: max(16rem, 14px); line-height: 160%; letter-spacing: -0.32rem;}
.file-list-area .file-list {position: relative; display: flex; align-items: center; max-width: 100%; width: 100%;}
.file-list-area .file-list:nth-of-type(2) {margin-top: 24rem;}
.file-list-area .file-list .file-name {display: flex; max-width: calc(100% - 32rem); color: #06161E;}
.file-list-area .file-list .file-name .name {display: inline-block; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;}
.file-list-area .file-list .btn-delete {/* margin-left: 8rem; */ position: absolute; right: 0; top: 0; width: 24rem; height: 24rem; background: url("/common/images/icon-delete-circle-pc.svg") center / 24rem no-repeat;}
.file-list-area.attached::before {background-color: #06161E;}
.file-list-area.attached .empty-txt {display: none;}
.file-prev-area {width: 100%; margin-top: -4rem;}
.file-prev-area a {display: block; font-size: max(14rem, 13px); font-family: "Pretendard_Medium", sans-serif; color: #1E6B8E; line-height: 170%; letter-spacing: -.02em; text-decoration: underline;}
.file-prev-area a ~ a {margin-top: 6rem;}

.form-address .form-group:last-child {margin-top: 16rem;} /* 우편번호 찾기 */
.form-address .form-group:first-child .form-input:nth-child(2) input {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.form-birth .form-input {width: 116rem;} /* 생년월일 */
.form-email .form-input {width: 168rem;} /* 이메일 */
.form-email .form-input:nth-child(1) {margin-right: 15rem;}
.form-email .form-input:nth-child(1):after {content: '@'; display:block; position: absolute; right: -22rem; top: 0; line-height: 40rem;}
.form-email .form-select {align-self: stretch; width: max(168rem, 200px);}

@media all and (max-width: 1023px) {
  .error-msg {font-size: 12rem; margin-top: 6rem;}
  .satisfy-msg {font-size: 12rem; margin-top: 6rem;}

  .form-group {row-gap: 12rem; column-gap: 10rem;}
  .form-group .file-list-area ~ .attatched-file-area {margin-top: 4rem;}
  .form-group .file-list-area ~ .btn-wrap.btn-down-wrap {margin-top: 4rem !important;}

  .form-address .form-group {row-gap: 16rem;}

  .form-group.form-calendar{column-gap: 20rem;}
  .form-group.form-calendar .form-input:first-child{width:120rem}
  .form-group.form-calendar .form-input:first-child:after{right:-19rem}
  .form-group.form-calendar .form-input:last-child{width:120rem}

  .form-group .form-select {width: 100%;}
  .form-select.bdr-select {min-width: 96rem; width: auto;}
  .form-select.txt-select {min-width: 107rem; height: 21rem;}
  .form-select.txt-select::before {transform: translateY(0); margin-top: -14rem;}
  .form-select.txt-select select {font-size: 13rem;}
  
  .data-line-w .data-line .form-address .form-group + .form-group {margin-top: 16rem;}
  
  .form-input {width: 150rem;}
  .form-input .unit-txt {font-size: 13rem; color: #697278;}
  .form-input .unit-txt.timer {font-size: 12rem;}

  .form-input.w-longer:not(.srch-input) {width: 280rem;}
  .form-input.w-middle:not(.srch-input) {width: 170rem;}
  
  .form-input.srch-input input::placeholder {font-size: max(14rem, 13px);}

  .form-textarea .check-byte {font-size: 12rem;}

  .form-radio input + label {min-height: 22rem; font-size: 13rem; background-size: 22rem;}
  .form-radio.bigger input + label {font-size: 15rem;}

  .form-checkbox input + label {min-height: 22rem; font-size: 13rem; background-size: 22rem;}

  .file-btn-area {height: 40rem;}

  .form-address .form-group:first-child .form-input:nth-child(2) {width: 100%; margin-right: 0;}
  .form-address .form-group:last-child .form-input {width: 100%;}

  .file-list-area {flex-grow: 1; padding-top: 10rem; width: auto; max-width: 100%; width: 100rem; min-height: 40rem;}
  .file-list-area::before {top: 39rem;}
  .file-list-area .empty-txt {max-width: 100%; font-size: 13rem;}
  .file-list-area .file-list:nth-of-type(2) {margin-top: 18rem;}
  .file-list-area .file-list .file-name {font-size: 13rem; line-height: 165%; letter-spacing: -0.26rem;}
  .file-list-area .file-list .btn-delete {margin-left: 0; padding-left: 8rem; background-position: center; background-size: 16rem;}
  .file-btn-area label {height: 40rem; font-family: "Pretendard_Medium", sans-serif; font-size: 16rem;}
  .file-prev-area a ~ a {margin-top: 4rem;}

  .form-birth {flex-wrap: nowrap;} /* 생년월일 */
  .form-birth .form-input {width: 100%;}
  .form-email .form-input {width: calc(50% - 16rem);} /* 이메일 */
  .form-email .form-input:first-child {margin-right: 22rem;}
  .form-email .form-input:first-child:after {font-size: 13rem;}
  .form-email .form-input:nth-child(1):after {right: -19rem;}
  .form-email .form-input:nth-child(2) {margin-right: 0;}
}

@media all and (max-width: 599px) {
  .btn-down-wrap {width: auto;}

  .form-group > * + *.btn-down-wrap {position: relative; top: -9rem;}
  .form-group .btn-wrap.btn-delete-line {margin-right: 0; margin-left: 10rem;}
  .form-group .btn-wrap.btn-delete-line:last-child {margin-left: 0;}

  .form-address .form-input:nth-child(1) {order: 0;}/* 우편번호 찾기 */
  .form-address .form-input:nth-child(2) {order: 2; margin-left: 0;}
  .form-address .btn-wrap {order: 1; margin-top: 0; margin-left: 10rem;}

  .file-list-area {flex-grow: unset; row-gap: 6rem; width: 280rem;}
  .file-list-area .file-list:nth-of-type(2) {margin-top: 12rem;}
  .file-list-area .file-list .btn-delete {margin-left: 8rem; padding-left: 0;}
  .file-list-area .file-list .btn-delete {width: 20rem; height: 20rem; background: url("/common/images/icon-delete-circle.svg") center / 20rem no-repeat;}
}
/* --------------------------------------------- Form 폼 - END --------------------------------------------- */





/* --------------------------------------------- data enter form 데이터 입력 - START --------------------------------------------- */
.noti-txt-w {margin-top: 8rem;}
.noti-txt-w:first-child {margin-top: 0;}
.noti-txt-w .txt {color: #06161E; font-size: max(16rem, 14px); line-height: 160%; letter-spacing: -0.32rem;}
.noti-txt-w .bullet-noti-txt {position:relative; left:-2rem; margin-top: 4rem; padding-left: 10rem; text-indent: -8rem; word-break: break-all;}
.noti-txt-w .bullet-noti-txt:first-child {margin-top: 0;}
.noti-txt-w .f-caption1:not(:first-child) {margin-top: 4rem;}
.btn-wrap + .noti-txt-w {margin-top: 16rem;}
.article-list-w + .noti-txt-w {margin-top: 48rem;}
.gray-bg-sec + .noti-txt-w {margin-top: 16rem;}
.form-group + .noti-txt-w {margin-top: 16rem;}
.divide-flex-box .noti-txt-w {margin-top: 6rem;}
.inner-con-box .noti-txt-w {color: #697278; font-size: max(14rem, 13px); line-height: 170%; letter-spacing: -0.28rem;}
.inner-con-box .noti-txt-w > * {max-width: 100%;}
.inner-con-box .noti-txt-w pre {white-space: normal;}
.inner-con-box + .noti-txt-w {margin-top: 24rem;}
.page-tit-area .page-txt {margin-top: 24rem;}
.page-tit-area .noti-txt-w {margin-top: 16rem;}


.noti-txt {margin-top: 24rem;}
.noti-txt + .noti-txt {margin-top: 6rem;}
.tit-txt-wrap .noti-txt {margin-top: 16rem;}

@media all and (max-width: 1023px) {
  .noti-txt-w {margin-top: 6rem;}
  .noti-txt-w .bullet-noti-txt {margin-top:0;}
  .noti-txt-w *:not(.bullet-noti-txt) + .bullet-noti-txt {margin-top: 4rem;}
  .btn-wrap + .noti-txt-w {margin-top: 12rem;}
  .article-list-w + .noti-txt-w {margin-top: 32rem;}
  .form-group + .noti-txt-w {margin-top: 8rem;}
  .divide-flex-box .noti-txt-w {margin-top: 4rem;}
  .inner-con-box + .noti-txt-w {margin-top: 16rem;}
  .page-tit-area .page-txt {margin-top: 16rem;}
  .page-tit-area .noti-txt-w {margin-top: 8rem;}
  /* .member-main .page-tit-area {padding: 0 24rem;} 2258번째줄과 동일하게 적용되서 이중으로 간격먹힘. 주석처리 */
  
  .noti-txt {margin-top: 12rem;}
  .noti-txt + .noti-txt {margin-top: 3rem;}
  .tit-txt-wrap .noti-txt {margin-top: 12rem;}
}

.amount-div{display:flex; align-items: center; border:1px solid #D9DDE0; border-radius:2px;}
.amount-div .amount-btn{width:50rem;}
.amount-div .amount-btn img{width:50rem;}
.amount-div .amount-btn.disabled{opacity:0.2}
.amount-div .form-input{width:50rem; border-bottom:0;}
.amount-div .form-input input{text-align: center;}
.amount-div + .btn-wrap{height:50rem;}
.add-data-result{display:flex; align-items: center; justify-content: space-between; margin-top:32rem; width:540rem;}
.add-data-result .amount-result-w{display:flex; align-items: center;}
.add-data-result .amount-result-w .amount-result{position:relative; margin-right:20rem; padding-right:20rem; color:#9CA1A6;}
.add-data-result .amount-result-w .amount-result:after{display:block; content:""; position:absolute; right:0; top:max(16rem, 13px); width:1px; height:max(16rem, 15px); background:#d9d9d9;}
.add-data-result .amount-result-w .amount-result:last-child{margin-right:0; padding-right:0;}
.add-data-result .amount-result-w .amount-result:last-child:after{display:none;}
.add-data-result .amount-result-w .amount-num-div{color:#9CA1A6;}
.add-data-result .amount-result-w .amount-num-div span{margin:0 6rem 0 12rem;}

.data-enter-form .row {display: flex; margin-top: 60rem;} /* default: 제목, 내용이 좌우 배치 */
.data-enter-form .new {margin-top: 60rem;}
.data-enter-form .row:first-child {margin-top: 0;}
.data-enter-form .row .th {flex-shrink: 0; padding-right: 30rem; width: max(176rem, 119px);}
.data-enter-form .row .th .title {display: flex; /*word-wrap: break-word; word-break: break-all;*/}
.data-enter-form .row .th .title .essential-mark {margin-left: 2rem;}
.data-enter-form .row .td .data-title .essential-mark {margin-left: 2rem;}
.data-enter-form .row .td {width:100%;}
.data-enter-form .for-status-chk {width: 100%;}
.data-enter-form .btn-wrap {display: flex; align-items: center;}
.data-enter-form .btn-wrap a + a,
.data-enter-form .btn-wrap button + button {margin-left: 20rem;}
.data-enter-form .data-line-w .data-line .etc-option-w .form-group:nth-child(2) {margin-top: 24rem;}
.data-enter-form.verticality .row {display: block; margin-top: 32rem;}/* 제목, 내용이 상하 배치 */
.data-enter-form.verticality .row:first-child {margin-top: 0;}
.data-enter-form.verticality .row .th {margin-bottom: 12rem;}
.data-enter-form > .noti-txt{margin-top:40rem;}
.data-enter-form.add-data{margin-bottom:60rem;}

.add-data-form{margin-top:24rem; padding:24rem 24rem 60rem 60rem; border:1px solid #D9DDE0; border-radius:2px;}
.add-data-form .btn-wrap{margin:0 0 24rem 0 !important}

.data-line-w .data-inner-line {margin-top: 32rem;}
.data-line-w .data-inner-line:first-child {margin-top: 0;}
.data-line-w .data-line {margin-top: 40rem;}
.data-line-w .data-line:first-child {margin-top: 0;}
.data-line-w .data-line.large-mt{margin-top:60rem;}
/* .data-line-w .data-line .form-group + .form-group {margin-top: 20rem;} */
.data-line-w .data-line .data-title {position:relative; margin-bottom: 24rem; z-index:1; color: #06161E;}
.data-line-w .data-line .middle-line {margin-top: 24rem;}
.data-line-w .data-line .middle-line:first-child {margin-top: 0;}
.data-line-w .data-line .inner-line {margin-top: 16rem;}
.data-line-w .data-line .inner-line .gray-bg-sec {margin-top: 0;}
.data-line-w .data-line .inner-line:first-child {margin-top: 0;}
.data-line-w .agree-box .gray-bg-sec {margin-top: 0;}
@media all and (max-width: 1023px) {
  .data-enter-form .btn-solid.small {min-height: 40rem; height: 40rem;}
  .data-enter-form .row {display: block; margin-top: 48rem;}
  .data-enter-form .new {margin-top: 48rem;}
  .data-enter-form .row.horizontally {}  /* pc에서 옆으로 나란히 배치 */
  .data-enter-form .row.horizontally .th:nth-child(3) {margin-top: 24rem;}
  .data-enter-form .row .th {width: auto; margin-bottom: 16rem; padding-right: 0;}
  .data-enter-form .row:has(.th + .td .data-line:first-child .noti-txt-w) .th {margin-bottom: 8rem;}
  .data-enter-form .btn-line {margin-top: 16rem;} 
  .data-enter-form .btn-wrap a + a,
  .data-enter-form .btn-wrap button + button {margin-left: 10rem;}
  .data-enter-form.add-data{margin-bottom:48rem;}

  .add-data-form{margin-top:12rem; padding:12rem 24rem 40rem 24rem;}
  .add-data-form .btn-wrap{margin:0 -12rem 0 0 !important;}
  .add-data-form .data-enter-form{margin-top:12rem !important;}

  .data-line-w .data-inner-line {margin-top: 24rem;}
  .data-line-w .data-line {margin-top: 24rem;}
  .data-line-w .data-line.large-mt{margin-top:48rem;}
  .data-line-w .data-line .data-title {margin-bottom: 8rem;}
  .data-line-w .data-line .middle-line {margin-top: 16rem;}

  .amount-div .amount-btn{width:39rem;}
  .amount-div .amount-btn img{width:39rem;}
  .amount-div .form-input{width:39rem;}
  .amount-div + .btn-wrap{height:39rem;}
  .add-data-result{width:100%;}
  .add-data-result .amount-result-w .amount-result{padding-right:10rem; margin-right:10rem;}
  .add-data-result .amount-result-w .amount-result:after{top:max(8rem, 6px); height:14rem;}

}
/* --------------------------------------------- data enter form 데이터 입력 - END --------------------------------------------- */





/* --------------------------------------------- data view form 데이터 뷰 - START --------------------------------------------- */
.data-view-w ~ .data-view-w {margin-top: 80rem;}
.data-view-w .data-view-tit {margin-bottom: 32rem;}

.data-view-form .row {display: flex; margin-top: 40rem;}
.data-view-form .row:first-child {margin-top: 0;}
.data-view-form .row .th {flex-shrink: 0; width: 213rem; padding-right: 40rem;}
.data-view-form .row .th .title {color: #06161E;}
.data-view-form .row .td {width: 100%;}
.data-view-form .row .td .txt + .txt{margin-top:12rem;}
.data-view-form .row .td .txt.color-gray{color:#697278}
.data-view-form .row .td .file-download{color:#1E6B8E; text-decoration: underline; font-size:max(16rem, 14px); font-family: "Pretendard_Medium";}

.dash-list-w .dash-list {position:relative; display: flex; margin-top: 16rem; padding-top: 16rem;}
.dash-list-w .dash-list:before {content: ''; display:block; position: absolute; left: 0; top: 0; width:100%; height: 1px; background: url("/common/images/icon-dash-border.png") 0 0/8px 1px repeat-x;}
.dash-list-w .dash-list:first-child {margin-top: 0; padding-top: 0;}
.dash-list-w .dash-list:first-child:before {display: none;}
.dash-list-w .dash-list .item {display: flex;}
.dash-list-w .dash-list .item:first-child {width: 54%;}
.dash-list-w .dash-list .item:last-child {width: 46%;}
.dash-list-w .dash-list .item .item-title {margin-right: 50rem; min-width: 40rem;}
.dash-list-w .dash-list .item .item-txt {padding-right: 40rem; /*word-wrap: break-word; word-break: break-all;*/}
@media all and (max-width: 1023px) {
  .data-view-w ~ .data-view-w {margin-top: 60rem;}
  .data-view-form .row {margin-top: 30rem;}
  .data-view-form .row .th {width: 96rem; padding-right: 24rem;}
  /* .data-view-form .row .th .title {font-size: 13rem;} */
  .data-view-form .row .td .file-download{font-size:13rem;}
  
  .dash-list-w .dash-list {display: block; margin-top: 12rem; padding-top: 12rem;}
  .dash-list-w .dash-list .item {display: block; margin-top: 8rem; padding-right: 0; width: 100%;}
  .dash-list-w .dash-list .item:first-child {width: 100%; margin-top: 0;}
  .dash-list-w .dash-list .item:last-child {width: 100%;}
  .dash-list-w .dash-list .item .item-title {margin-right: 0; min-width: unset; font-size: 13rem;}
  .dash-list-w .dash-list .item .item-txt {margin-top: 4rem; padding-right: 0;}
}
/* --------------------------------------------- data view form 데이터 뷰 - END --------------------------------------------- */





/* --------------------------------------------- table 테이블 - START --------------------------------------------- */
.table-box ~ .table-box {margin-top: 40rem;}
.table-box .basic-table {border-top: 1px solid #ECEEEF;}
.table-box .basic-table tr th, .table-box .basic-table tr td {padding: 20rem; font-size: max(16rem, 14px); /* color: #06161E; */ line-height: 160%; letter-spacing: -.02em; border-right: 1px solid #ECEEEF; border-bottom: 1px solid #ECEEEF;}
.table-box .basic-table tr th {font-family: "Pretendard_Regular", sans-serif; background-color: #F5F6F7;}
.table-box .basic-table tr td {font-family: "Pretendard_Medium", sans-serif; background-color: #fff; }
.table-box .basic-table tr td > p ~ p {margin-top: 8rem;}
.table-box .basic-table tr > *:last-child {border-right: none;}
.table-box .basic-table tr .bdr {border-right: 1px solid #ECEEEF;}
.table-box .basic-table tr td.f-head {font-size: max(18rem, 16px); font-family: "Pretendard_SemiBold", sans-serif; color: #06161E; line-height: 155%;}
.table-box .basic-table tr td.f-body2 {font-size: max(16rem, 14px); font-family: "Pretendard_Regular", sans-serif; color: #697278; line-height: 160%;}
.table-box .basic-table tr td .dot-txt{position:relative; padding-left:14rem;}
.table-box .basic-table tr td .dot-txt:before{display:block; content:""; position:absolute; top:10rem; left:0; width:4px; height:4px; background:#06161E; border-radius:50%;}
.table-box .basic-table tr td .dot-txt + .dot-txt{margin-top:8rem;}
.table-box .basic-table tr td .f-body1 + .f-body1{margin-top:8rem;}
.table-box .basic-table tr td a {text-decoration: underline; text-underline-position: under;}

/* 말줄임 가능 테이블 */
.basic-table:has(.txt-ellipsis) {table-layout: fixed;}
/* 테이블 라디오 */
.table-box .basic-table .form-radio {display: inline-block; vertical-align: middle;}
.table-box .basic-table .form-radio input + label {display: block; width: 22rem; height: 22rem; padding-left: 0; border-radius: 100%;}
/* 테이블 체크박스 */
.table-box .basic-table .form-checkbox-w{display:flex; justify-content: center; align-items: center;}
/* 라벨 */
.table-box .basic-table tr td .sort-label-area {justify-content: center;}
.table-box .basic-table tr td .sort-label-area .label span {font-family: "Pretendard_Medium", sans-serif; color: #06161E;}
.table-box .basic-table tr td .sort-label-area .label + .label:before {background-color: #9CA1A6;}
/* 테이블 레이아웃 */
.table-sec .btn-wrap {margin-top: 24rem;}
.table-sec .info-txt {margin-bottom: 16rem; color: #06161E;}

@media all and (max-width: 1023px) {
  .table-box::-webkit-scrollbar {margin-top: 400rem; height: 2px; background-color: #ECEEEF;}
  .table-box::-webkit-scrollbar-thumb {background-color: #000102;}
  .table-box::-webkit-scrollbar-track {height: 2px;}

  .table-box .basic-table tr th, .table-box .basic-table tr td {padding: 10rem 16rem; font-size: 13rem; line-height: 165%; border-right: 0; border-bottom: 0;}
  .table-box .basic-table tr > td:last-child{background:url("/common/images/bg-gray-pixel.jpg") left bottom/1px 1px repeat-x;}
  .table-box .basic-table tr td{ background:url("/common/images/bg-gray-pixel.jpg") right top/1px 1px repeat-y, url("/common/images/bg-gray-pixel.jpg") left bottom/1px 1px repeat-x #fff;}
  .table-box .basic-table tr th{background:url("/common/images/bg-gray-pixel.jpg") right top/1px 1px repeat-y, url("/common/images/bg-gray-pixel.jpg") left bottom/1px 1px repeat-x; background-color:#F5F6F7}
  .table-box .basic-table thead tr th{background:url("/common/images/bg-gray-pixel.jpg") right top/1px 1px repeat-y, url("/common/images/bg-gray-pixel.jpg") left bottom/1px 1px repeat-x; background-color:#F5F6F7}
  .table-box .basic-table thead tr th:last-child{background:url("/common/images/bg-gray-pixel.jpg") left bottom/1px 1px repeat-x; background-color:#F5F6F7}
  .table-box .basic-table tbody tr th{background:url("/common/images/bg-gray-pixel.jpg") right top/1px 1px repeat-y, url("/common/images/bg-gray-pixel.jpg") left bottom/1px 1px repeat-x #F5F6F7;}
  .table-box .basic-table tr .bdr {border-right: 0; background:url("/common/images/bg-gray-pixel.jpg") right top/1px 1px repeat-y, url("/common/images/bg-gray-pixel.jpg") left bottom/1px 1px repeat-x !important;}
  .table-box.need-scroll {padding-bottom: 16rem; overflow-x: auto;}/* mobile에서 table 가로스크롤 필요할 경우 need-scroll 클래스 추가 */
  .table-box .basic-table tr td .f-body1 + .f-body1{margin-top:4rem;}
  .table-box.need-scroll .basic-table {width: 130%;}
  .table-box .basic-table tr td > p ~ p {margin-top: 4rem;}
  .table-box .basic-table tr td.f-head {font-size: 15rem; line-height: 170%;}
  .table-box .basic-table tr td.f-body2 {font-size: 13rem; line-height: 165%;}

  .need-scroll .basic-table:has(col:nth-child(3)) {table-layout: fixed; width: fit-content;}
  .need-scroll .basic-table:not(:has(col:nth-child(3))) {table-layout: auto; width: auto;}
}
@media all and (max-width: 599px) {
  .table-box.need-scroll .basic-table {width: 150%;}/* mobile에서 table 가로스크롤 필요할 경우 need-scroll 클래스 추가 */
}
/* --------------------------------------------- table 테이블 - End --------------------------------------------- */






/* --------------------------------------------- quick menu 퀵메뉴 - START --------------------------------------------- */
.quick-menu {display: flex; flex-direction: column; align-items: flex-end; position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 30; /* opacity: 0; */ transition: opacity .2s ease;}
.quick-menu .btn-open-menu {display: none;}
.quick-menu .btn-w {position:relative; top: 24rem; min-width: 64rem; padding-bottom: 24rem; background-color: #fff; border: 1px solid #ECEEEF; transition: .5s top ease; z-index:1;}
.quick-menu .btn-w .quick-btn {display:block; margin-top: 16rem; padding: 34rem 10rem 0; min-height: 32rem; background-position: top center; background-repeat: no-repeat; background-size: 32rem auto; transition: .3s background-image ease;}
.quick-menu .btn-w .quick-btn .txt {display: block; text-align: center; color: #06161E; font-size: 13px; transition: .4s color ease;}
.quick-menu .btn-w .quick-btn.manager {display: none;}
.quick-menu .btn-w .quick-btn:first-child {margin-top: 0;}
.quick-menu .btn-w .quick-btn.edu-schedule {background-image: url("/common/images/icon-quick-edu-schedule-default.svg");}
.quick-menu .btn-w .quick-btn.certificate {background-image: url("/common/images/icon-quick-certificate-default.svg");}
.quick-menu .btn-w .quick-btn.faq {background-image: url("/common/images/icon-quick-faq-default.svg");}
.quick-menu .btn-w .quick-btn.trend {position: relative; left: -1px; top: -1px; width: calc(100% + 2px); padding: 50rem 10rem 16rem; background-image: url("/common/images/icon-quick-trend-default.svg"); background-position: center 16rem; border-bottom: 1px solid #ECEEEF;}
.quick-menu .btn-w .quick-btn.trend::before {content: ""; position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; right: 0; background-color: #59B7E2; transition: .3s background-color ease;}
.quick-menu .btn-w .quick-btn.trend .txt {color: #fff !important;}
.quick-menu .btn-w .quick-btn.trend + .quick-btn {margin-top: 24rem;}
.quick-menu .btn-w .quick-btn.edu-schedule:hover {background-image: url("/common/images/icon-quick-edu-schedule-hover.svg");}
.quick-menu .btn-w .quick-btn.certificate:hover {background-image: url("/common/images/icon-quick-certificate-hover.svg");}
.quick-menu .btn-w .quick-btn.faq:hover {background-image: url("/common/images/icon-quick-faq-hover.svg");}
.quick-menu .btn-w .quick-btn.trend:hover {background-image: url("/common/images/icon-quick-trend-hover.svg");}
.quick-menu .btn-w .quick-btn.trend:hover::before {background-color: #1E6B8E;}
.quick-menu .btn-w .quick-btn:hover .txt {color: #06161E;}

.quick-menu .btn-top {display:block; position:relative; top: -30rem; min-width: 100%; width: 70rem; margin-top: 14rem; opacity: 0; padding-left: 16rem; padding-right: 16rem; padding-top: 24rem; text-align: center; background: url("/common/images/icon-btn-top-arr.svg") center top/24rem no-repeat; transition: .4s top ease, .4s opacity ease;}
.quick-menu .btn-top .txt {font-family: "Pretendard_Medium", sans-serif; font-size: max(14rem, 13px); line-height: 1; letter-spacing: -0.28rem;}

.quick-menu.scroll-down .btn-w {top: 0;}
.quick-menu.scroll-down .btn-top {top: 0; opacity: 1;}
/* .quick-menu.show {opacity: 1;} */

@media all and (max-width: 1023px) {
  .quick-menu {right: 16rem; top: auto; bottom: 16rem; transform: translateY(0);}
  .quick-menu .menu-area {position:relative; bottom: 0; padding-bottom: 52rem; transition: .5s bottom ease; z-index:1;}
  .quick-menu .btn-open-menu {position: absolute; right: 0; bottom:0; display:block; width: 44rem; height: 44rem; margin-right: 0; background: #fff url("/common/images/icon-quick-open-btn-mobile.svg") center/15rem no-repeat; border: 1px solid #D9DDE0; border-radius: 50%;}
  .quick-menu .btn-w {position: absolute; top:auto; right: 0; bottom: 0; transform: scale(0); transform-origin: right bottom; min-width: auto; padding: 24rem 16rem; height: auto; opacity:0; background-color: #fff; border: 1px solid #9CA1A6; border-radius: 2px; transition: transform .6s ease, opacity .4s ease, bottom .4s ease;}
  .quick-menu .btn-w .quick-btn {display: flex; align-items: center; padding-top: 0; margin-top: 16rem; padding-left: 44rem; background-position: left center;}
  .quick-menu .btn-w .quick-btn .txt {font-family: "Pretendard_Medium", sans-serif; text-align: left; line-height: 32rem; font-size: 11rem;}
  .quick-menu .btn-w .quick-btn.edu-schedule {background-image: url("/common/images/icon-quick-edu-schedule-default-mobile.svg");}
  .quick-menu .btn-w .quick-btn.certificate {background-image: url("/common/images/icon-quick-certificate-default-mobile.svg");}
  .quick-menu .btn-w .quick-btn.faq {background-image: url("/common/images/icon-quick-faq-default-mobile.svg");}
  .quick-menu .btn-w .quick-btn.trend {padding: 0 0 0 44rem; border: none; background-image: url("/common/images/icon-quick-trend-default-mobile.svg"); background-color: unset; background-position: left center;}
  .quick-menu .btn-w .quick-btn.trend::before {display: none;}
  .quick-menu .btn-w .quick-btn.trend + .quick-btn {margin-top: 16rem;}
  .quick-menu .btn-w .quick-btn.trend .txt {color: #59B7E2 !important;}
  .quick-menu .btn-w .quick-btn.edu-schedule:hover {background-image: url("/common/images/icon-quick-edu-schedule-default-mobile.svg");}
  .quick-menu .btn-w .quick-btn.certificate:hover {background-image: url("/common/images/icon-quick-certificate-default-mobile.svg");}
  .quick-menu .btn-w .quick-btn.faq:hover {background-image: url("/common/images/icon-quick-faq-default-mobile.svg");}
  .quick-menu .btn-w .quick-btn.trend:hover {background-image: url("/common/images/icon-quick-trend-default-mobile.svg"); background-color: transparent;}
  .quick-menu .btn-w .quick-btn.manager {display: block; background: url("/common/images/icon-quick-manager-default-mobile.svg") left center no-repeat;}

  .quick-menu .btn-top {position: absolute; top: auto; bottom: 0; margin-right: 0; margin-top: 0; width: 44rem; height: 44rem; background: #fff url("/common/images/icon-btn-top-arr-mobile.svg") center/10rem no-repeat; border: 1px solid #D9DDE0; border-radius: 50%;}
  .quick-menu .btn-top .txt {font-size: 0; color: transparent;  }
  
  .quick-menu.scroll-down .menu-area {bottom: 52rem;}
  .quick-menu.scroll-down .btn-w {top: auto;}
  .quick-menu.scroll-down .btn-top {top: auto; bottom: 0; width: 44rem; height: 44rem;}

  .quick-menu.opened .btn-w {bottom: 52rem; transform: scale(1); opacity: 1;}
  .quick-menu.opened .btn-open-menu {background: #fff url("/common/images/icon-close.svg") center/20rem no-repeat;}
}
/* --------------------------------------------- quick menu 퀵메뉴 - END --------------------------------------------- */





/* --------------------------------------------- tab 탭 - START --------------------------------------------- */
.tab-con-w .tab-con {display: none;}
.tab-con-w .tab-con:first-child {display: block;}

.tab-btn-area {margin-bottom: 64rem;}
.tab-con .tab-btn-area {margin-top: -44rem;} /* tab-con안에 tab 버튼이 있는 경우 */

.txt-major-tab-swiper {position: relative;}
.txt-major-tab-swiper .txt-tab-btn {position:relative; width: auto; margin-right: 40rem;}
.txt-major-tab-swiper .txt-tab-btn:last-child {margin-right: 0;}
.txt-major-tab-swiper .txt-tab-btn .txt {font-size: max(36rem, 28px); font-family: "Pretendard_Bold", sans-serif; color: #D9DDE0; line-height: 145%; letter-spacing: -.03em;}
.txt-major-tab-swiper .txt-tab-btn.active .txt {color: #06161E;}

.txt-major-tab-swiper + .txt-tab-swiper {margin-top: 64rem;}
.txt-tab-swiper {position:relative;}
.txt-tab-swiper .swiper-container {overflow:visible}
.txt-tab-swiper .txt-tab-btn {position:relative; width: auto; margin-right: 48rem; padding-bottom: 11rem;}
.txt-tab-swiper .txt-tab-btn:last-child {margin-right: 0;}
.txt-tab-swiper .txt-tab-btn .txt {font-family: "Pretendard_Regular", sans-serif; font-size: max(20rem, 18px); color: #06161E; line-height: 145%; letter-spacing: -.02em;}
.txt-tab-swiper .txt-tab-btn .txt .privacy{position:relative;}
.txt-tab-swiper .txt-tab-btn .txt .privacy:after{display:block; content:""; position:absolute; top:-3rem; right:-10rem; width:5rem; height:5rem; border-radius:50%; background:#71D3FF;}
.txt-tab-swiper .txt-tab-btn.active:after {content: ''; display:block; position: absolute; left: 0; bottom: 1px; width:100%; height: 1px; background-color: #06161E; z-index:2;}
.txt-tab-swiper .txt-tab-btn.active .txt {font-family: "Pretendard_Bold", sans-serif;}

.txt-tab-swiper + .txt-depth-tab-swiper {margin-top: 20rem;}
.txt-depth-tab-swiper .swiper-container .swiper-wrapper {flex-wrap: wrap; row-gap: 10rem;}
.txt-depth-tab-swiper .txt-tab-btn {display: flex; align-items: center; position: relative; width: auto; min-height: 41rem; margin-right: 10rem; padding: 4rem 12rem; border: 1px solid #D9DDE0; border-radius: 24rem;}
.txt-depth-tab-swiper .txt-tab-btn:last-child {margin-right: 0;}
.txt-depth-tab-swiper .txt-tab-btn .txt {font-family: "Pretendard_Regular", sans-serif; font-size: max(17rem, 15px); color: #697278; line-height: 150%; letter-spacing: -.02em;}
.txt-depth-tab-swiper .txt-tab-btn.active {border: 1px solid #06161E;}
.txt-depth-tab-swiper .txt-tab-btn.active .txt {font-family: "Pretendard_Medium", sans-serif; color: #06161E;}

@media all and (max-width: 1023px) {
  .tab-btn-area {margin-bottom: 32rem;}
  .tab-con .tab-btn-area {margin-top: -16rem;} /* tab-con안에 tab 버튼이 있는 경우 */

  .txt-major-tab-swiper .txt-tab-btn .txt {font-size: 20rem; line-height: 160%;}
  .txt-major-tab-swiper .swiper-container {padding: 0 20rem;}
  .txt-major-tab-swiper .txt-tab-btn {margin-right: 24rem;}

  .txt-major-tab-swiper + .txt-tab-swiper {margin-top: 40rem;}
  .txt-tab-swiper {left: -20rem; width: 100vw;}
  .txt-tab-swiper .swiper-container {padding: 0 20rem 1px; padding-bottom: 1px;}
  .txt-tab-swiper .txt-tab-btn {margin-right: 24rem;}
  .txt-tab-swiper .txt-tab-btn .txt {font-size: 17rem;}
  .txt-tab-swiper .txt-tab-btn.active:after {bottom: -1px;}

  .txt-tab-swiper + .txt-depth-tab-swiper {margin-top: 16rem;}
  .txt-depth-tab-swiper {position: relative; left: -20rem; width: 100vw;}
  .txt-depth-tab-swiper .swiper-container {padding: 0 20rem;}
  .txt-depth-tab-swiper .swiper-container .swiper-wrapper {flex-wrap: nowrap; row-gap: unset;}
  .txt-depth-tab-swiper .txt-tab-btn {min-height: 38rem; margin-right: 8rem;}
  .txt-depth-tab-swiper .txt-tab-btn .txt {font-size: 15rem;}

  .tab-btn-area:has(.txt-depth-tab-swiper) .txt-tab-swiper .swiper-container {position: relative;}
  .tab-btn-area:has(.txt-depth-tab-swiper) .txt-tab-swiper .swiper-container::before {content: ""; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 1px; background-color: #ECEEEF;}
}
/* --------------------------------------------- tab 탭 - END --------------------------------------------- */





/* --------------------------------------------- 검색 영역 search - START --------------------------------------------- */
.srch-wrap {width: 586rem; margin: 64rem auto 128rem;}
.srch-wrap .form-input.srch-input {width: 100%;}
.srch-wrap .top-srchs {display: flex; flex-wrap: wrap; justify-content: center; padding: 0 40rem; margin-top: 22rem;}
.srch-wrap .top-srchs .srch-item {position: relative; padding: 0 10rem; margin-top: 10rem;}
.srch-wrap .top-srchs .srch-item:first-child {padding-left: 0;}
.srch-wrap .top-srchs .srch-item::before {content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 16rem; background-color: #ECEEEF;}
.srch-wrap .top-srchs .srch-item:last-child::before {display: none;}
.srch-wrap .top-srchs .srch-item a {font-size: max(14rem, 13px); font-family: "Pretendard_Regular", sans-serif; color: #697278; line-height: 170%; letter-spacing: -.02em;}
.srch-wrap .top-srchs .srch-item a:hover {color: #06161E;}
.srch-wrap .srch-input input[type="text"]::-webkit-input-placeholder {font-size: max(18rem, 16px);}
.srch-wrap .srch-input input[type="text"]:-ms-input-placeholder {font-size: max(18rem, 16px);}
.srch-wrap .srch-input input[type="text"]::-ms-input-placeholder {font-size: max(18rem, 16px);}
.srch-wrap .srch-input input[type="text"]::placeholder {font-size: max(18rem, 16px);}
.srch-wrap .srch-input input[type="text"] {font-size: max(18rem, 16px);}
@media all and (max-width: 1023px) {
  .srch-wrap {margin: 48rem 0 96rem; width: 100%;}
  .srch-wrap .top-srchs {padding: 0;}
  .srch-wrap .top-srchs .srch-item a {font-size: 13rem; color: #06161E;}
  .srch-wrap .srch-input input[type="text"]::-webkit-input-placeholder {font-size: 14rem;}
  .srch-wrap .srch-input input[type="text"]:-ms-input-placeholder {font-size: 14rem;}
  .srch-wrap .srch-input input[type="text"]::-ms-input-placeholder {font-size: 14rem;}
  .srch-wrap .srch-input input[type="text"]::placeholder {font-size: 14rem;}
  .srch-wrap .srch-input input[type="text"] {font-size: 14rem;}
}
/* --------------------------------------------- 검색 영역 search - END --------------------------------------------- */





/* --------------------------------------------- 통합검색 - START --------------------------------------------- */
.tab-con-box .tab-section {margin-top: 96rem;}
.tab-con-box .tab-section:first-child {margin-top: 0;}
.tab-con-box .tab-section .section-tit-area {display: flex; justify-content: space-between; align-items: center;}
.tab-con-box .tab-section .section-tit-area .tit {letter-spacing: -0.84rem;}
.tab-con-box .tab-section .section-tit-area + .tab-con-area {margin-top: 25rem;}
.tab-con-box .tab-section .tab-con-area {padding-top: 40rem; border-top: 1px solid #06161E;}
.tab-con-box .tab-section .tab-con-area .btn-wrap {margin-top: 40rem;}
.tab-con-box .tab-section .training-swiper-area .swiper-slide {margin-right: 41rem; width: 337rem; min-height: 459rem;}
.tab-con-box .tab-section .training-swiper-area .swiper-slide:first-child {margin-left: 0;}
.tab-con-box .tab-section .training-swiper-area .img-area {height: 210rem;}

.menu-depth-info {}
.menu-depth-info .menu-link {display: flex; flex-wrap: wrap; align-items: center; margin-top: 20rem;}
.menu-depth-info .menu-link:first-child {margin-top: 0;}
.menu-depth-info .menu-link .menu {position: relative; display: flex; align-items: center; transition: color .2s ease;}
.menu-depth-info .menu-link .menu::after {content: ''; display: inline-block; margin-right: 2rem; width: 20rem; height: 20rem; background: url("/common/images/icon-right-arr.svg") center / 20rem no-repeat;}
.menu-depth-info .menu-link .menu:last-child:after {display: none;}
.menu-depth-info .menu-link:hover .menu {color: #59B7E2;}
@media all and (max-width: 1023px) {
  .tab-con-box {margin-top: 32rem;}
  .tab-con-box .tab-section {margin-top: 48rem;}
  .tab-con-box .tab-section .section-tit-area .tit {font-family: "Pretendard_Bold", sans-serif;}
  .tab-con-box .tab-section .section-tit-area .btn-text-icon span {font-size: 0px;}
  .tab-con-box .tab-section .section-tit-area + .tab-con-area {margin-top: 16rem;}
  .tab-con-box .tab-section .tab-con-area {padding-top: 16rem;}
  .tab-con-box .tab-section .tab-con-area .article-list-w.txt-list .list-item:first-child {padding-top: 0; border-top: 0;}
  .tab-con-box .tab-section .tab-con-area .btn-wrap {margin-top: 48rem;}
  .tab-con-box .tab-section .training-swiper-area .swiper-wrapper {display: grid; grid-template-columns: 1fr; row-gap: 20rem; column-gap: 0;}
  .tab-con-box .tab-section .training-swiper-area .swiper-slide {margin: 0; width: auto; min-height: unset;}
  .tab-con-box .tab-section .training-swiper-area .img-area {height: 218rem;}
  
  .menu-depth-info .menu-link {margin-top: 16rem;}
}
/* --------------------------------------------- 통합검색 - END --------------------------------------------- */





/* --------------------------------------------- 신청하기 하단 플로팅 영역 - START --------------------------------------------- */
.accepting-fixed-area {position: fixed; left: auto; bottom: 40rem; width: 1093rem; height: max(72rem, 60px); z-index: 50;}
.accepting-fixed-area .for-position {position: absolute; right: 0; bottom: 0; width: 683rem; height: max(72rem, 60px);}
.accepting-fixed-area .open-click-area {display: flex; align-items: center; justify-content: space-between; position:relative; width: 100%; height: 100%; padding: 0 40rem; background-color:#fff; box-shadow: 0px 10px 80px 0px rgba(0, 0, 0, 0.20); opacity: 1; transition: opacity .2s ease; z-index: 1;}
.accepting-fixed-area .open-click-area .tit {position:relative; padding-left: 22rem; padding-right: 30rem; font-family: "Pretendard_SemiBold", sans-serif; color: #06161E; font-size: max(18rem, 16px); text-align: left; line-height: 155%; letter-spacing: -0.36rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.accepting-fixed-area .open-click-area .tit::before {content: ''; display: block; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background-color: #0064FF; animation-duration: 1s; animation-name: dotFlash; animation-iteration-count: infinite; animation-direction: alternate;}

.accepting-fixed-area .hide-area {position: absolute; right: 0; bottom: 0; width: 1051rem; background-color: transparent; transform: scale(0.64, 0); transform-origin: right bottom;}
.accepting-fixed-area .hide-area .inner-con {display: flex; flex-direction: column; width: 100%; height:100%; padding: 80rem 120rem 32rem; max-height: 80vh; opacity: 0;}
.accepting-fixed-area .hide-area .con-area {margin-top: 40rem; overflow-y: auto;}
.accepting-fixed-area .hide-area .con-area::-webkit-scrollbar {width:8px; background-color: #F5F6F7;}
.accepting-fixed-area .hide-area .con-area::-webkit-scrollbar-thumb {background-color: #C6CCD1;}
.accepting-fixed-area .hide-area .con-area::-webkit-scrollbar-track {width:8px;}
.accepting-fixed-area .hide-area .con-area .scroll-area {padding-right: 40rem;}
.accepting-fixed-area .hide-area .con-area .info-line-list-w .list {display: flex; align-items: baseline; padding: 24rem 0; border-top: 1px solid #ECEEEF;}
.accepting-fixed-area .hide-area .con-area .info-line-list-w .list:first-child {padding-top: 0; border-top: 0;}
.accepting-fixed-area .hide-area .con-area .info-line-list-w .list:last-child {border-bottom: 1px solid #ECEEEF; }
.accepting-fixed-area .hide-area .con-area .info-line-list-w .list .tit {width: 120rem; padding-right: 40rem; font-family: "Pretendard_Medium", sans-serif; color: #06161E; font-size: max(16rem, 14px); line-height: 160%; letter-spacing: -0.32rem;}
.accepting-fixed-area .hide-area .con-area .info-line-list-w .list .txt {display: flex; align-items: center; color: #697278; font-size: max(16rem, 14px); line-height: 160%; letter-spacing: -0.32rem;}
.accepting-fixed-area .hide-area .con-area .info-line-list-w .list .txt .btn-wrap {display: block; margin-top: 0;}
.accepting-fixed-area .hide-area .con-area .info-line-list-w .list .txt .btn-wrap .btn-set {display: block;}
.accepting-fixed-area .hide-area .con-area .info-line-list-w .list .txt .btn-wrap .btn-set ~ .btn-set {margin-top: 16rem;}
.accepting-fixed-area .hide-area .con-area .info-line-list-w .list .txt .btn-wrap .btn-set a ~ a {margin-top: 8rem;}
.accepting-fixed-area .hide-area .con-area .info-line-list-w .list .txt .img {display: inline-block; width: 44rem; height: 44rem; margin-right: 12rem;}
.accepting-fixed-area .hide-area .con-area .info-line-list-w .list .txt .img img {width: 100%}
.accepting-fixed-area .hide-area .btn-wrap {margin-top: 96rem;}
.accepting-fixed-area .hide-area .btn-wrap .btn-set:has(.btn-solid:nth-child(3)) {flex-wrap: wrap; row-gap: 10rem;}
.accepting-fixed-area .hide-area .btn-wrap:has(.btn-solid:nth-child(3)) .btn-set:last-child {align-self: flex-start;}
.accepting-fixed-area .hide-area .btn-close {position: absolute; right: 20rem; top: 16rem;}
.accepting-fixed-area .hide-area .btn-close span {position:relative; display: flex; align-items: center; font-family: "Pretendard_Medium", sans-serif; color: #06161E; font-size: max(14rem, 13px); line-height: 1; letter-spacing: -0.28rem;}
.accepting-fixed-area .hide-area .btn-close span:after {content: ''; display: block; position:relative; left: 0; width: 32rem; height: 32rem; background: url("/common/images/icon-close-small.svg") center / 32rem no-repeat;}
.accepting-fixed-area .attatched-file-area {margin-top: 0;}
.accepting-fixed-area .attatched-file-area .download-bg ~ .download-bg {margin-top: 8rem;}
/* .accepting-fixed-area .btn-text-icon.download-bg {width: auto; align-self: flex-start} */

.accepting-fixed-area.opened {z-index: 200;}

.accepting-fixed-area.not-fix {position: absolute; bottom: -308rem;}

@keyframes dotFlash { /* 파란 점 깜빡이는 모션 */
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media all and (max-width: 1023px) {
  .accepting-fixed-area {left: 20rem; bottom: 20rem; width: -webkit-calc(100% - 40rem); width: calc(100% - 40rem); height: 58rem;}
  .accepting-fixed-area .for-position {width: 100%; height: 100%;}
  .accepting-fixed-area .open-click-area {height: 58rem; padding: 0 16rem;}
  .accepting-fixed-area .open-click-area .tit {padding: 0 14rem; font-size: 15rem;}
  .accepting-fixed-area .open-click-area .tit::before {top: 8rem;}
  .accepting-fixed-area .open-click-area .btn-text-icon span {font-size: 0;}

  .accepting-fixed-area .hide-area {width: 100%; transform: scale(1, 0.07);}
  .accepting-fixed-area .hide-area .inner-con {padding: 80rem 32rem 32rem;}
  .accepting-fixed-area .hide-area .con-area {margin-top: 24rem;}
  .accepting-fixed-area .hide-area .con-area::-webkit-scrollbar {width:3px;}
  .accepting-fixed-area .hide-area .con-area::-webkit-scrollbar-track {width:3px;}
  .accepting-fixed-area .hide-area .con-area .scroll-area {padding-right: 20rem;}
  .accepting-fixed-area .hide-area .con-area .info-line-list-w .list {display: block; padding: 16rem 0;}
  .accepting-fixed-area .hide-area .con-area .info-line-list-w .list .tit {font-size: 13rem; line-height: 165%; letter-spacing: -0.26rem;}
  .accepting-fixed-area .hide-area .con-area .info-line-list-w .list .txt {margin-top: 10rem; font-size: 13rem; line-height: 165%; letter-spacing: -0.26rem;}
  .accepting-fixed-area .hide-area .con-area .info-line-list-w .list .txt .img {display: none;}
  .accepting-fixed-area .hide-area .con-area .info-line-list-w .list .txt .btn-wrap {width: 100%;}
  .accepting-fixed-area .hide-area .con-area .info-line-list-w .list .txt .btn-wrap .btn-set ~ .btn-set {margin-top: 12rem;}
  .accepting-fixed-area .hide-area .con-area .info-line-list-w .list .txt .btn-wrap .btn-set a ~ a {margin-top: 4rem;}
  .accepting-fixed-area .hide-area .btn-wrap {margin-top: 60rem;}
  .accepting-fixed-area .hide-area .btn-wrap .btn-solid.gray-bg {padding: 0; width: 50rem;}
  .accepting-fixed-area .hide-area .btn-wrap .btn-set {column-gap: 5rem;}
  .accepting-fixed-area .hide-area .btn-wrap .btn-set > *{margin-right:0;}
  .accepting-fixed-area .hide-area .btn-wrap .btn-solid.has-icon span {width: 24rem; height: 24rem; padding: 0; font-size: 0;}

  .accepting-fixed-area.not-fix {bottom: -218rem;}
}
/* --------------------------------------------- 신청하기 하단 플로팅 영역 - END --------------------------------------------- */





/* --------------------------------------------- 팝업 popup - START --------------------------------------------- */
/* 팝업 */
.layer-popup {display: none; align-items: center; justify-content: center; position: fixed; left: 0; top:0; width:100%; height: 100%; z-index:200;}
.layer-popup .for-center {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}
.layer-popup .pop-wrap {display: flex; align-items: center; justify-content: center; position:relative; width: 880rem; max-height: 80%; height: 100%; background-color: transparent;}
.layer-popup .pop-wrap .pop-con-area {position: relative; display: flex; flex-direction: column; padding: 96rem 0 0 120rem; width: 100%; max-height: 100%; height: auto; background-color: #fff;}
.layer-popup .pop-wrap .pop-con-area .tit-area {padding-right: 120rem;}
.layer-popup .pop-wrap .pop-con-area .con-area {position: relative; margin-top: 40rem; margin-bottom: 79rem; padding-bottom:1rem; height: 100%; max-height: 100%; overflow-y: auto;}
.layer-popup .pop-wrap .pop-con-area .con-area .btn-wrap {position:relative; bottom: 0; margin-top: 40rem;}
.layer-popup .pop-wrap .pop-con-area .con-area .data-enter-form .btn-wrap {margin-top: 0;}
.layer-popup .pop-wrap .pop-con-area .con-area .btn-wrap button {box-shadow: none;}
.layer-popup .pop-wrap .pop-con-area .con-area .btn-wrap .btn-solid.small {padding-left: 28rem; padding-right: 28rem;}
.layer-popup .pop-wrap .pop-con-area .con-area .scroll-area {padding-right: 112rem;}
.layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .p-info-sec .f-sub-head, .p-info-sec .f-head {color: #697278;}
.layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .p-cont-sec {margin-top: 40rem;}
.layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .p-cont-sec .noti-txt-w {margin-bottom: 32rem;}
.layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .p-cont-sec .inner-line:last-child .noti-txt-w{margin-bottom: 0;}
.layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .p-cont-sec:has(.data-enter-form) ~ .p-cont-sec {margin-top: 60rem;}
.layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .p-cont-sec:first-child {margin-top: 0;}
.layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .p-cont-sec .cont-sec::before {display: none;}
.layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .p-cont-sec .sec-tit-area {display: flex; justify-content: space-between; align-items: center; margin-bottom: 32rem;}
.layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .paragraph ~ .paragraph {margin-top: 16rem;}
.layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .map-area {width: 100%; height: 320rem;}
.layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .map-area img {width: 100%; height: 100%; object-fit: cover;} /* 테스트 css */
.layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .paragraph:has(.f-body1) + .paragraph {margin-top: 24rem;}
.layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .p-list-box-w .p-list-box ~ .p-list-box {margin-top: 24rem;}
.layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .p-list-box-w .p-list-box:not(:has(.ul-txt-list)) ~ .p-list-box {margin-top: 8rem;}
.layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .p-list-box-w .p-list-box .ul-txt-list {margin-top: 8rem;}
.layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .p-list-box-w .p-list-box .ul-txt-list .ul-txt ~ .ul-txt {margin-top: 8rem;}
.layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .txt-depth-tab-swiper {width: 100%;}
.layer-popup:not(.allTrainingSchedulePopup) .pop-wrap .pop-con-area .con-area::-webkit-scrollbar {width:8px; background-color: #F5F6F7;}
.layer-popup:not(.allTrainingSchedulePopup) .pop-wrap .pop-con-area .con-area::-webkit-scrollbar-thumb {background-color: #C6CCD1;}
.layer-popup:not(.allTrainingSchedulePopup) .pop-wrap .pop-con-area .con-area::-webkit-scrollbar-track {width:8px;}
.layer-popup .pop-wrap .bot-fix-btn-area {margin: 16rem 0 32rem; padding-right:120rem;}
.layer-popup .pop-wrap .user-opt-area {position: absolute; right: 20rem; top: 16rem; display: flex; align-items: center;}
.layer-popup .pop-wrap .user-opt-area .form-checkbox input + label {font-size: max(14rem, 13px); font-family: "Pretendard_Medium"; background-size: max(20rem , 17px); background-position: left center;}
.layer-popup .pop-wrap .user-opt-area .btn-close {margin-left: 20rem;}
.layer-popup .pop-wrap .user-opt-area .btn-close span {position:relative; display: flex; align-items: center; font-family: "Pretendard_Medium", sans-serif; color: #06161E; font-size: max(14rem, 13px); line-height: 1; letter-spacing: -0.28rem;}
.layer-popup .pop-wrap .user-opt-area .btn-close span:after {content: ''; display: block; position:relative; left: 0; width: 32rem; height: 32rem; background-image: url("/common/images/icon-close-small-black.svg"); background-position: center top; background-size: 100% auto;}
            /* tab */
.layer-popup .pop-wrap .pop-con-area  .tab-btn-area {margin-top: 48rem; margin-bottom: 0;}
          /* data-enter-form */
.layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .data-enter-form .row .th {width: 143rem; padding-right: 8rem;}
.layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .data-enter-form .row .th .title {font-size: max(16rem, 14px);}
.layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .data-enter-form .row ~ .row {margin-top: 40rem;}
.layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .form-address .form-input:nth-child(1) {order: 0;}/* 우편번호 찾기 */
.layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .form-address .form-input:nth-child(2) {order: 2; /* margin-left: 0; margin-top: 16rem; */}
.layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .form-address .btn-wrap {order: 1; margin-top: 0;}
            /* 팝업 - 텍스트 리스트형 */
.layer-popup .pop-wrap .article-list-w.txt-list .list-item {display: flex; padding: 24rem 0; border-bottom:1px solid #ECEEEF}
.layer-popup .pop-wrap .article-list-w.txt-list .list-item:first-child {padding-top: 0; border-top: none;}
.layer-popup .pop-wrap .article-list-w.txt-list .list-item:last-child {padding-bottom: 0; border: none;}
.layer-popup .pop-wrap .article-list-w.txt-list .list-item dt {flex-shrink: 0; width: 100rem; margin-right: 20rem;}
.layer-popup .pop-wrap .article-list-w.txt-list .list-item dd {width: 100%;}
.layer-popup .pop-wrap .article-list-w.txt-list .list-item dd p:not(.box-label) ~ p:not(.box-label) {margin-top: 8rem;}
.layer-popup .pop-wrap .article-list-w.txt-list .list-item .infos dl ~ dl {margin-top: 16rem;}
          /* full 풀 팝업 (화면 꽉 채우는) */
.layer-popup.full-popup .pop-wrap {width: 100%; max-height: unset;}
.layer-popup.full-popup .pop-wrap .pop-con-area {height: 100%; border-radius: 0;}
.layer-popup.full-popup .pop-wrap .user-opt-area {right: 120rem; top: 32rem;}
.layer-popup.full-popup .pop-wrap .user-opt-area .btn-close {margin-left: 0;}
.layer-popup.full-popup .pop-wrap .user-opt-area .btn-close span {justify-content: center; padding-top: 35rem;}
.layer-popup.full-popup .pop-wrap .user-opt-area .btn-close span:after {position: absolute; left: 50%; top: 0; margin-left: -16rem; background-image: url("/common/images/icon-close.svg");}
.layer-popup.full-popup .tit-area {position: absolute; left: 120rem; top: 45rem;}
.layer-popup.full-popup .tit-area p {padding-left: 40rem; background: url("") left center / 32rem no-repeat; line-height: 32rem;}
.layer-popup.full-popup.allTrainingSchedulePopup  .tit-area p {background-image: url("/common/images/icon-calendar-bigger.svg");}
.layer-popup.full-popup.trendPopup .tit-area p {background-image: url("/common/images/icon-trend.svg");}
.layer-popup.full-popup .pop-wrap .txt-depth-tab-swiper {left: 0;}
          /* 페이지 진입시부터 떠있는 팝업 */
.layer-popup.first-show {display: block;}

@media all and (max-width: 1023px) {
  .layer-popup .for-center {align-items: flex-end;}
  .layer-popup .pop-wrap {align-items: flex-end; max-width: unset; width: 100%; max-height: unset; height: 80%;}
  .layer-popup .pop-wrap .pop-con-area {top: 100%; width: 100%; height: 100%; padding: 80rem 0 0 20rem; border-radius: 8rem 8rem 0 0; /*transition: top .6s ease;*/}
  .layer-popup .pop-wrap .pop-con-area .tit-area {padding-right: 20rem;}
  .layer-popup .pop-wrap .pop-con-area .tit-area .f-large-title {font-size: 20rem; line-height: 160%; letter-spacing: -0.6rem;}
  .layer-popup .pop-wrap .pop-con-area .con-area {margin-top: 24rem; margin-bottom: 0; z-index: 2;}
  .layer-popup .pop-wrap .pop-con-area .con-area .btn-wrap {margin-top: 24rem;}
  .layer-popup .pop-wrap .pop-con-area .con-area .scroll-area {padding-right: 12rem; padding-bottom: 64rem;}
  .layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .p-cont-sec {margin-top: 24rem;}
  .layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .p-cont-sec .sec-tit-area {margin-bottom: 12rem;}
  .layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .paragraph ~ .paragraph  {margin-top: 8rem;}
  .layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .paragraph:has(.f-body1) + .paragraph {margin-top: 16rem;}
  .layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .map-area {height: 184rem;}
  .layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .p-list-box-w .p-list-box ~ .p-list-box {margin-top: 20rem;}
  .layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .p-list-box-w .p-list-box:not(:has(.ul-txt-list)) ~ .p-list-box {margin-top: 6rem;}
  .layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .p-list-box-w .p-list-box .ul-txt-list {margin-top: 6rem;}
  .layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .p-list-box-w .p-list-box .ul-txt-list .ul-txt ~ .ul-txt {margin-top: 6rem;}
  .layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .btn-wrap {flex-wrap: wrap;}
  .layer-popup .pop-wrap .bot-fix-btn-area {position: relative; left: -20rem; width: 100vw; margin-top: 0; margin-bottom: 0; padding: 16rem 20rem 32rem;}
  .layer-popup .pop-wrap .bot-fix-btn-area::before {content: ''; display: block; position: absolute; left: 0; top: -40rem; width: 100%; height: 40rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(0, 0, 0, 0.04) 100%); z-index: 1;}
  .layer-popup .pop-wrap .user-opt-area .form-checkbox input + label {font-size: 12rem;}

              /* data-enter-form */
  .layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .p-cont-sec:has(.data-enter-form) ~ .p-cont-sec {margin-top: 40rem;}
  .layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .p-cont-sec:has(.data-enter-form) .sec-tit-area  {margin-bottom: 24rem;}
  .layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .p-cont-sec .sec-tit-area:has(.f-caption1) {flex-direction: column-reverse; align-items: flex-start;}
  .layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .p-cont-sec .sec-tit-area .f-caption1 {margin-bottom: 32rem;}
  .layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .data-enter-form .row ~ .row {margin-top: 24rem;}
  .layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .data-enter-form .row .th {margin-bottom: 8rem;}
  /* .layer-popup .pop-wrap .pop-con-area .con-area .scroll-area .file-list-area.w-longer {width: 280rem;} */
              /* tab */
  .layer-popup .pop-wrap .pop-con-area .tab-btn-area {margin-top: 40rem;}
  .layer-popup .pop-wrap .pop-con-area .tab-con-box {margin-top: 0;}

              /* 팝업 - 텍스트 리스트형 */
  .pop-wrap .article-list-w.txt-list .list-item {padding: 16rem 0;}
  .pop-wrap .article-list-w.txt-list .list-item dt {width: 70rem; margin-right: 10rem;}
  .layer-popup .pop-wrap .article-list-w.txt-list .list-item dd p:not(.box-label) ~ p:not(.box-label) {margin-top: 6rem;}
  .layer-popup .pop-wrap .article-list-w.txt-list .list-item .infos dl ~ dl {margin-top: 12rem;}
              /* full 풀 팝업 (화면 꽉 채우는) */
  .layer-popup.full-popup .tit-area{top:16rem; left:20rem;}
  .layer-popup.first-show .pop-wrap .pop-con-area {top: 0;}
  .layer-popup.full-popup .pop-wrap .pop-con-area{padding:56rem 20rem 0; border-radius:8rem 8rem 0 0;}
  .layer-popup.full-popup .pop-wrap .user-opt-area{right:20rem; top:16rem;}
  .layer-popup.full-popup .pop-wrap .user-opt-area .btn-close span{padding:0; font-size:12rem; color:#06161E}
  .layer-popup.full-popup .pop-wrap .user-opt-area .btn-close span:after{position:relative; left:auto; top:auto; margin-left:0; background:url("../images/icon-close-small-black.svg") no-repeat center center/32rem auto;}

  .layer-popup.completed .pop-wrap .pop-con-area {top: 0;}
}
/* --------------------------------------------- 팝업 popup - END --------------------------------------------- */





/* --------------------------------------------- 전체교육일정 popup - START --------------------------------------------- */
/* full-popup 모션 */
.full-popup.open::before {width: 50%; transition: width .6s ease-in-out;}
.full-popup.open::after {width: 50%; transition: width .6s ease-in-out;}
.full-popup::before, .full-popup::after {content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 0%; background: #fff; z-index: -1;}
.full-popup::before {right: 50%;}
.full-popup::after {right: 0;}
.full-popup .for-center{overflow:hidden; opacity:0; transition:opacity 0.6s ease;}
.full-popup.open .for-center{opacity:1; transition-delay:0.8s}
.full-popup .pop-wrap .pop-con-area{padding-top:0;}
.full-popup .pop-wrap .pop-con-area .con-area{margin:0 auto; margin:0; padding:136rem 0 80rem; width:100%;}
.full-popup .pop-wrap .pop-con-area .con-area .scroll-area{margin:0 auto; width:1134rem;}

/* 전체교육일정 */
.allTrainingSchedulePopup .pop-wrap .pop-con-area .tab-btn-area{margin-top:0;}
.total-edu-area{overflow:hidden;  margin-top:64rem; width:100%;}
.total-edu-area .edu-info-div{display:flex; align-items: center; justify-content: space-between;}
.total-edu-area .edu-info-div .btn-text-icon{display:inline-flex; margin-right:10rem; white-space: nowrap;}
.total-edu-area .edu-info-div .status-info-w{flex-wrap:wrap;}
.total-edu-area .edu-plan-area{display:flex; position:relative; padding-left:max(273rem, 200px); margin-top:16rem; border-top:1px solid #ECEEEF;}
.total-edu-area .edu-plan-area .period-area{position:absolute; top:0; left:0; background:#fff; z-index:1;}
.total-edu-area .edu-plan-area .period-area .period-div{display:flex; align-items: center; padding:40rem 40rem 40rem 20rem; width:max(273rem, 200px); border-right:1px solid #C6CCD1;}
.total-edu-area .edu-plan-area .period-area .period-div .period{position:relative; padding-left:18rem; margin-right:32rem; color:#06161E;}
.total-edu-area .edu-plan-area .period-area .period-div .period:last-child{margin-right:0;}
.total-edu-area .edu-plan-area .period-area .period-div .period:before{display:block; content:""; position:absolute; top:47%; left:0; transform:translateY(-50%); width:10rem; height:10rem; border-radius:50%;}
.total-edu-area .edu-plan-area .period-area .period-div .receive:before{background:#0064FF;}
.total-edu-area .edu-plan-area .period-area .period-div .education:before{background:#CC8212;}
.total-edu-area .edu-plan-area .period-area .round-list .round-div{display:flex; align-items: center; padding:12rem 20rem; width:max(273rem, 200px); height:max(76rem, 68px); border-right:1px solid #C6CCD1; border-top:1px solid #ECEEEF}
.total-edu-area .edu-plan-area .period-area .round-list .round-div:last-child{border-bottom:1px solid #ECEEEF}
.total-edu-area .edu-plan-area .period-area .round-list .round-div .f-body2{margin-right:33rem; color:#06161E;}
.total-edu-area .edu-plan-area .period-area .round-list .round-div .round-period{display:flex; align-items: center;}
.total-edu-area .edu-plan-area .period-area .round-list .round-div .round-period .tit{margin-right:6rem; color:#9CA1A6}
.total-edu-area .edu-plan-area .month-area{position:relative; width:100%;}
.total-edu-area .edu-plan-area .month-area:after{display:block; content:""; position:absolute; bottom:11rem; left:0; width:100%; height:18rem; background:#fff; z-index:1;}
.total-edu-area .edu-plan-area .month-area .f-head{padding:13rem 25rem;}
.total-edu-area .edu-plan-area .month-area .scroll-div{overflow-x:auto !important; overflow-y:hidden; position:relative; padding-bottom:18rem;}
.total-edu-area .edu-plan-area .month-area .scroll-div::-webkit-scrollbar{width:100%; height:12rem; background:#F5F6F7;}
.total-edu-area .edu-plan-area .month-area .scroll-div::-webkit-scrollbar-thumb{background:#C6CCD1;}
.total-edu-area .edu-plan-area .month-area .scroll-box{position:relative; width:1712rem;}
.total-edu-area .edu-plan-area .month-area .month-div{padding:12rem 25rem;}
.total-edu-area .edu-plan-area .month-area .month-wrap{display:flex; align-items: center; position:relative; padding:0 88rem; width:1712rem;}
.total-edu-area .edu-plan-area .month-area .month-wrap .month-chk-w{position:absolute; top:50rem;}
.total-edu-area .edu-plan-area .month-area .month-wrap .month-chk-w .dot{position:absolute; bottom:-4rem; left:50%; transform:translateX(-50%); width:max(8rem, 6px); height:max(8rem, 6px); background:#E73B30; border-radius:50%; z-index:1;}
.total-edu-area .edu-plan-area .month-area .month-wrap .month-chk-w .line{position:absolute; top:0; left:50%; transform:translateX(-50%); width:2px; height:1000px; background:url("../images/img-red-dot-line.svg") repeat-y center top; border-radius:50%; z-index:1;}
.total-edu-area .edu-plan-area .month-area .month-wrap .month{display:flex; align-items: center; justify-content: center; position:relative; margin-right:88rem; width:40rem; height:40rem; border-radius:50%;}
.total-edu-area .edu-plan-area .month-area .month-wrap .month.now{background:#E73B30;}
/* .total-edu-area .edu-plan-area .month-area .month-wrap .month.now:after{display:block; content:""; position:absolute; bottom:-16rem; left:50%; transform:translateX(-50%); width:max(8rem, 6px); height:max(8rem, 6px); background:#E73B30; border-radius:50%; z-index:1;}
.total-edu-area .edu-plan-area .month-area .month-wrap .month.now:before{display:block; content:""; position:absolute; top:50rem; left:50%; transform:translateX(-50%); width:2px; height:1000px; background:url("../images/img-red-dot-line.svg") repeat-y center top; border-radius:50%; z-index:1;} */
.total-edu-area .edu-plan-area .month-area .month-wrap .month.now span{color:#fff;}
.total-edu-area .edu-plan-area .month-area .swiper-scrollbar{position:absolute; bottom:-36rem; left:0; width:100%; height:12rem; border-radius:0; background:#F5F6F7;}
.total-edu-area .edu-plan-area .month-area .swiper-scrollbar-drag{border-radius:0; background:#C6CCD1;}
.total-edu-area .edu-plan-area .period-bar-list{margin-top:10rem; width:1712rem;}
.total-edu-area .edu-plan-area .period-bar-div{padding:12rem 88rem; width:100%; height:max(76rem, 68px); border-top:1px solid #ECEEEF}
.total-edu-area .edu-plan-area .period-bar-div:last-child{border-bottom:1px solid #ECEEEF}
.total-edu-area .edu-plan-area .period-bar{position:relative; /* max-width:128rem; */ height:24rem; border-radius:2px;}
.total-edu-area .edu-plan-area .period-bar span{padding-left:6rem; white-space:nowrap; font-size:max(14rem, 12px)}
.total-edu-area .edu-plan-area .period-bar.receive{background:rgba(0,100,255,0.12);}
.total-edu-area .edu-plan-area .period-bar.receive a{display:flex; align-items: center; height:100%; cursor: auto;}
.total-edu-area .edu-plan-area .period-bar.receive a.now{cursor: pointer; color:#0064FF; text-decoration: underline;}
.total-edu-area .edu-plan-area .period-bar.receive span{color:#0064FF}
.total-edu-area .edu-plan-area .period-bar.education{margin-top:4rem; background:rgba(204,130,18,0.12);}
.total-edu-area .edu-plan-area .period-bar.education span{color:#CC8212}
.total-edu-area .year-plan-btn{display:flex; justify-content: flex-end; margin-top:40rem;}

.total-edu-area.no-data .edu-plan-area{padding-left:0;}
.total-edu-area.no-data .no-data-area{border-bottom:1px solid #f3f3f3}

@media all and (max-width: 1023px) {
  /* full-popup 모션 */
  .full-popup::before, .full-popup::after {display:none;}
  .full-popup.full-popup .pop-wrap .pop-con-area{padding:56rem 0 0;}
  .full-popup.full-popup .pop-wrap .pop-con-area .con-area .scroll-area{padding:0; width:100%;}
  .full-popup.layer-popup .pop-wrap .pop-con-area .con-area{padding:24rem 0 64rem;}
  .full-popup .for-center{opacity:1; transition:none;}
  .full-popup .txt-tab-swiper{left:0; width:100%;}
  
  /* 전체교육일정 */
  .allTrainingSchedulePopup .tab-btn-area{margin-bottom:40rem;}
  .total-edu-area{margin-top:48rem;}
  .total-edu-area .edu-info-div{padding:0 20rem;}
  .total-edu-area .edu-plan-area{padding-left:0; margin-top:12rem;}
  .total-edu-area .edu-plan-area .period-area{top:84rem; background:transparent}
  .total-edu-area .edu-plan-area .period-area .period-div{justify-content: flex-end; padding:0 20rem 0 0; position:absolute; right:auto; left:0; top:-73rem; width:100vw; border-right:0;}
  .total-edu-area .edu-plan-area .period-area .round-period-div{display:none;}
  .total-edu-area .edu-plan-area .period-area .round-list .round-div{display:block; padding:4rem 6rem; /* margin:16rem 0; */ width:28rem; height:50rem; border-top:0; border-right:0; background:#697278; border-radius:0 2px 2px 0;}
  .total-edu-area .edu-plan-area .period-area .round-list .round-div:first-child{margin-top:8rem;}
  /* .total-edu-area .edu-plan-area .period-area .round-list .round-div:last-child{margin-bottom:8rem;} */
  .total-edu-area .edu-plan-area .period-area .round-list .round-div + .round-div{margin-top:17rem;}
  .total-edu-area .edu-plan-area .period-area .round-list .round-div .f-body2{margin-right:0; word-break: break-all; color:#fff; text-align: center; line-height:108%;}
  .total-edu-area .edu-plan-area .round-div{width:auto;}
  .total-edu-area .edu-plan-area .round-div .round-period{display:none;}
  .total-edu-area .edu-plan-area .month-area:after{display:none;}
  .total-edu-area .edu-plan-area .month-area .f-head{padding:8rem 20rem;}
  .total-edu-area .edu-plan-area .month-area .month-wrap{padding:0 48rem; width:960rem}
  .total-edu-area .edu-plan-area .month-area .month-wrap .month{margin-right:40rem; width:32rem; height:32rem;}
  .total-edu-area .edu-plan-area .month-area .month-wrap .month.now:before{top:40rem;}
  .total-edu-area .edu-plan-area .month-area .scroll-div{padding-bottom:0;}
  .total-edu-area .edu-plan-area .month-area .scroll-div::-webkit-scrollbar{height:8px;}
  .total-edu-area .edu-plan-area .month-area .scroll-box{width:960rem;}
  .total-edu-area .edu-plan-area .period-bar-list{width:960rem;}
  .total-edu-area .edu-plan-area .period-bar-div{padding:8rem 48rem; height:auto;}
  .total-edu-area .edu-plan-area .period-bar{display:flex; align-items: center; height:23rem;/*  max-width:72rem; */ border-radius:2px;}
  .total-edu-area .edu-plan-area .period-bar span{display:inline-block; padding:0 4rem; white-space: nowrap; font-size:12rem; line-height:160%;}
  .total-edu-area .year-plan-btn{margin-top:24rem; padding-right:20rem;}
}

@media all and (max-width: 599px) {
  .total-edu-area .edu-info-div {align-items: flex-start;}
  .total-edu-area .edu-info-div .status-info-w {justify-content: flex-end;}
  .total-edu-area .edu-info-div .status-info-w .box-label{margin:0 4rem 4rem 0}
  .total-edu-area .edu-info-div .status-info-w .box-label:last-child{margin:0 0 4rem 0}
}
/* --------------------------------------------- 전체교육일정 popup - END --------------------------------------------- */





/* --------------------------------------------- TREND popup - START --------------------------------------------- */
.trendPopup .pop-wrap .pop-con-area {padding: 0;}
.full-popup.trendPopup .pop-wrap .pop-con-area .con-area {overflow-x: hidden;}
.full-popup.trendPopup .pop-wrap .pop-con-area .con-area .scroll-area {padding-right: 0;}

.trend-swiper {position: relative; margin-top: 64rem; height: 608rem; overflow: visible;}
.trend-swiper .swiper-wrapper {align-items: flex-start; overflow: visible;}
.trend-swiper .swiper-wrapper .swiper-slide {display: inline-block; position: relative; width: 337rem; height: auto; border-radius: 2px; overflow: hidden;}
.trend-swiper .swiper-wrapper .swiper-slide .for-motion {position: relative; height: 100%;}
.trend-swiper .swiper-wrapper .swiper-slide:nth-child(5n + 3) {align-self: flex-end;}
.trend-swiper .swiper-wrapper .swiper-slide:nth-child(5n + 5) {align-self: center;}
.trend-swiper .swiper-wrapper .swiper-slide ~ .swiper-slide {margin-left: 40rem;}
.trend-swiper .swiper-wrapper .swiper-slide .img-area {width: 100%;}
.trend-swiper .swiper-wrapper .swiper-slide .img-area img {width: 100%; height: 100%; object-fit: cover;}
.trend-swiper .swiper-wrapper .swiper-slide .txt-area .tit {margin-top: 6rem; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2;}
.trend-swiper .swiper-wrapper .swiper-slide:hover .txt-area .btn-wrap .btn-text-icon span:after {transform: translateX(6rem);}
.trend-swiper .swiper-wrapper .swiper-slide:hover .txt-area .btn-wrap .btn-solid.gray-bg {background-color: #ECEEEF;}

/* 스와이퍼 버튼 */
.trend-swiper-area {position: relative;}
.trend-swiper-area .swiper-button-prev {top: calc(100% + 64rem); left: 0;}
.trend-swiper-area .swiper-button-next {top: calc(100% + 64rem); left: 60rem; right: unset;}

/* cover */
.trend-swiper .swiper-wrapper .swiper-slide .for-motion::after {content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: 2; width: 100%; height: 100%; transition: width .8s cubic-bezier(1,0,.25,.995); transition-delay: .4s;}
.trend-swiper .swiper-wrapper .swiper-slide .for-motion.init::after {transition: unset;}
.trend-swiper .swiper-wrapper .swiper-slide.education .for-motion::after {background-color: #59B7E2;}
.trend-swiper .swiper-wrapper .swiper-slide.consulting:has(.img-area) .for-motion::after {background-color: #1E6B8E;}
.trend-swiper .swiper-wrapper .swiper-slide.winwin:has(.img-area) .for-motion::after {background-color: #134468;}
.trend-swiper .swiper-wrapper .swiper-slide:is(.consulting, .winwin):not(:has(.img-area)) .for-motion::after {background-color: #ECEEEF;}
.trend-swiper .swiper-wrapper .swiper-slide.mv .for-motion::after {width: 0 !important;}

/* 교육사업 */
.trend-swiper .swiper-wrapper .swiper-slide.education .img-area {height: 210rem;}
.trend-swiper .swiper-wrapper .swiper-slide.education .txt-area {padding-top: 24rem;}
.trend-swiper .swiper-wrapper .swiper-slide.education .txt-area .btn-wrap {margin-top: 40rem;}
/* 컨설팅사업 & 상생사업 */ 
.trend-swiper .swiper-wrapper .swiper-slide:is(.consulting, .winwin):has(.img-area) {height: 480rem;}
.trend-swiper .swiper-wrapper .swiper-slide:is(.consulting, .winwin):has(.img-area) .txt-area {position: relative; z-index: 1; height: 100%;}
.trend-swiper .swiper-wrapper .swiper-slide:is(.consulting, .winwin):has(.img-area) .txt-area .label {color: #D9DDE0;}
.trend-swiper .swiper-wrapper .swiper-slide:is(.consulting, .winwin):has(.img-area) .txt-area .tit {color: #F5F6F7;}
.trend-swiper .swiper-wrapper .swiper-slide:is(.consulting, .winwin):has(.img-area) .txt-area .btn-wrap {position: absolute; right: 0; bottom: 0;}
.trend-swiper .swiper-wrapper .swiper-slide:is(.consulting, .winwin):has(.img-area) .txt-area .btn-wrap .btn-text-icon span:after {background-color: #F5F6F7; background-image: url("/common/images/icon-btn-circle-gray.svg");}
.trend-swiper .swiper-wrapper .swiper-slide:is(.consulting, .winwin):has(.img-area) .txt-area .btn-wrap .btn-text-icon span {color: #F5F6F7;;}
.trend-swiper .swiper-wrapper .swiper-slide:is(.consulting, .winwin):not(:has(.img-area)) .for-motion {background-color: #F5F6F7;}
.trend-swiper .swiper-wrapper .swiper-slide:is(.consulting, .winwin):not(:has(.img-area)) .txt-area .btn-wrap {justify-content: flex-end; margin-top: 64rem;}
.trend-swiper .swiper-wrapper .swiper-slide:is(.consulting, .winwin) .for-motion {padding: 32rem;}
.trend-swiper .swiper-wrapper .swiper-slide:is(.consulting, .winwin) .img-area {position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; pointer-events: none;}
.trend-swiper .swiper-wrapper .swiper-slide:is(.consulting, .winwin) .img-area:after {content: ""; position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0,1,2,0.6), rgba(0,1,2,0.1));}
/* 상생사업 */
.trend-swiper .swiper-wrapper .swiper-slide.winwin:has(.img-area) {width: 480rem;}


@media all and (max-width: 1023px) {
  .full-popup.trendPopup .pop-wrap .pop-con-area {padding-left: 20rem;}
  .full-popup.trendPopup .pop-wrap .pop-con-area .con-area .scroll-area {padding-right: 12rem;}
  .trendPopup .trend-tit {display: none;}

  .trend-swiper {margin-top: 0; height: auto;}
  .trend-swiper .swiper-wrapper {display: block;}
  .trend-swiper .swiper-wrapper .swiper-slide {width: 100%;}
  .trend-swiper .swiper-wrapper .swiper-slide ~ .swiper-slide {margin: 20rem 0 0;}
  .trend-swiper-area .swiper-button-prev, .trend-swiper-area .swiper-button-next {display: none;}
  .trend-swiper .swiper-wrapper .swiper-slide .txt-area .tit {margin-top: 2rem;}

  /* 커버 */
  .trend-swiper .swiper-wrapper .swiper-slide .for-motion {top: 100rem; opacity: 0; transition: 1s top cubic-bezier(0.62, 0, 0.43, 1), 1s opacity cubic-bezier(0.62, 0, 0.43, 1); transition-delay: 0s;}
  .trend-swiper .swiper-wrapper .swiper-slide.mv .for-motion {top: 0; opacity: 1;}

  /* 교육사업 */
  .trend-swiper .swiper-wrapper .swiper-slide.education {height: 271rem;}
  .trend-swiper .swiper-wrapper .swiper-slide.education .txt-area {padding-top: 0;}
  .trend-swiper .swiper-wrapper .swiper-slide.education .for-motion {padding: 24rem;}
  .trend-swiper .swiper-wrapper .swiper-slide.education .txt-area .btn-wrap {position: absolute; margin-top: 0;}
  .trend-swiper .swiper-wrapper .swiper-slide.education:has(.img-area) .txt-area {position: relative; z-index: 1; height: 100%;}
  .trend-swiper .swiper-wrapper .swiper-slide.education:has(.img-area) .txt-area .label {color: #D9DDE0;}
  .trend-swiper .swiper-wrapper .swiper-slide.education:has(.img-area) .txt-area .tit {color: #F5F6F7;}
  .trend-swiper .swiper-wrapper .swiper-slide.education:has(.img-area) .txt-area .btn-wrap {left: 0; bottom: 0;}
  .trend-swiper .swiper-wrapper .swiper-slide.education:not(:has(.img-area)) .txt-area .btn-wrap {left: 24rem; bottom: 24rem;}
  .trend-swiper .swiper-wrapper .swiper-slide.education:not(:has(.img-area)) .for-motion {background-color: #F5F6F7;}
  .trend-swiper .swiper-wrapper .swiper-slide.education:not(:has(.img-area)) .txt-area .btn-wrap .btn-solid {background-color: #ECEEEF;}
  .trend-swiper .swiper-wrapper .swiper-slide.education .img-area {position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; pointer-events: none;}
  .trend-swiper .swiper-wrapper .swiper-slide.education .img-area:after {content: ""; position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0,1,2,0.6), rgba(0,1,2,0.1));}
  /* 컨설팅사업 & 상생사업 */ 
  .trend-swiper .swiper-wrapper .swiper-slide:is(.consulting, .winwin) .for-motion {padding: 24rem;}
  .trend-swiper .swiper-wrapper .swiper-slide:is(.consulting, .winwin):has(.img-area) {height: 350rem;}
  .trend-swiper .swiper-wrapper .swiper-slide:is(.consulting, .winwin):not(:has(.img-area)) .txt-area .btn-wrap {margin-top: 48rem;}
  /* 상생사업 */
  .trend-swiper .swiper-wrapper .swiper-slide.winwin:has(.img-area) {width: 100%;}
}
/* --------------------------------------------- TREND popup - END --------------------------------------------- */





/* --------------------------------------------- SQ평가원 자격증 popup - START --------------------------------------------- */
.estiCertiPop .flow-area {position: relative; margin-bottom:40rem; width: calc(100% - 120rem); min-height:59rem; height: 59rem; overflow: hidden;}
.estiCertiPop .flow-wrap {position: absolute; left: 0; display: flex; height: 59rem; background:rgba(170,200,77,0.16)}
.estiCertiPop .flow-wrap .flow-list {display:flex; align-items: center; padding-right: 96rem;} /* 사이 간격은 padding 값으로 조절 */
.estiCertiPop .cont-sec-w{position:relative;}
.estiCertiPop .divide-area{display:flex; justify-content: space-between;}
.estiCertiPop .divide-area .txt-con{padding-right:20rem;width:640rem;}
.estiCertiPop .divide-area .txt-con .type-div{margin-bottom:64rem;}
.estiCertiPop .divide-area .txt-con .type-div .f-title3{margin-bottom:8rem;}
.estiCertiPop .divide-area .txt-con .article-list-w.txt-list .list-item{padding:0; border:0;}
.estiCertiPop .divide-area .txt-con .article-list-w.txt-list .list-item .names{margin-bottom:24rem;}
.estiCertiPop .divide-area .txt-con .article-list-w.txt-list .list-item dt{color:#06161E;}
        /* 만료 후, 데이터 없을 때 */
.estiCertiPop:has(.no-data-area) .divide-area .txt-con .article-list-w.txt-list .list-item .infos .info span {display: inline-block; height: 26rem; background-color: #D9DDE0; border-radius: 2px;}
.estiCertiPop:has(.no-data-area) .divide-area .txt-con .article-list-w.txt-list .list-item .infos .info:nth-child(1) span {width: 25%;}
.estiCertiPop:has(.no-data-area) .divide-area .txt-con .article-list-w.txt-list .list-item .infos .info:nth-child(2) span {width: 100%;}
.estiCertiPop:has(.no-data-area) .divide-area .txt-con .article-list-w.txt-list .list-item .infos .info:nth-child(3) span {width: 68%;}

.estiCertiPop .divide-area .img-con{width:260rem;}
.estiCertiPop .divide-area .img-con .img{width:260rem; height:300rem; margin-bottom: 16rem;}
.estiCertiPop .divide-area .img-con .img img{width:100%; height:100%; object-fit: cover;}
.estiCertiPop .divide-area .img-con .btn-wrap {margin-top: 0 !important;}
.estiCertiPop .divide-area .img-con .btn-wrap > *{width:calc((100% - 8rem) / 2); height:auto;}
.estiCertiPop .divide-area .img-con .btn-wrap > * label{min-height:50rem}
.estiCertiPop .divide-area .img-con .modify-info{margin-top:12rem; text-align: right;}
.estiCertiPop .divide-area .img-con .modify-info .date-time{margin-left:8rem;}
.estiCertiPop .gray-bg-sec.narrow-pad{padding:20rem;}
.estiCertiPop .gray-bg-sec.narrow-pad .f-caption1{margin-bottom:8rem; color:#06161E;}
.estiCertiPop .gray-bg-sec.narrow-pad .ul-txt{margin-top:4rem;}
.estiCertiPop .seal-div{display:flex; justify-content: center; margin-top:46rem; min-height:68rem;}
.estiCertiPop .seal-div .f-head{display:inline-flex; align-items: center; position:relative;}
.estiCertiPop .seal-div .f-head .txt{position: relative; z-index:1;}
.estiCertiPop .seal-div .f-head .img{position:absolute; right:-54rem; top:50%; transform:translateY(-50%); width:70rem; height:68rem;}
.estiCertiPop .seal-div .f-head .img img{width:100%;}
.estiCertiPop.unavailable .flow-wrap {background:rgba(8,196,247,0.16)}
.estiCertiPop.unavailable .tit-area{position:relative;}
.estiCertiPop.unavailable .tit-area:after{display:block; content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.8)}
.estiCertiPop .no-data-area{position:absolute; top:0; left:0; width:100%; height:100%; background: rgba(255,255,255,0.8); z-index: 2;}
.estiCertiPop .no-data-area .txt-box{position:absolute; top:50%; transform:translateY(-50%); width:100%;}

@media all and (max-width: 1023px) {
  .estiCertiPop.layer-popup .pop-wrap .pop-con-area .tit-area{text-align: center;}
  .estiCertiPop .flow-area{margin-bottom:24rem; width:calc(100% - 20rem); height:46rem; min-height:46rem;}
  .estiCertiPop .flow-wrap{height:46rem;}
  .estiCertiPop .divide-area{flex-wrap:wrap; position:relative; flex-direction: column-reverse; padding-top:70rem;}
  .estiCertiPop .divide-area .txt-con{width:100%; padding-right: 0;}
  .estiCertiPop .divide-area .txt-con .type-div{position:absolute; top:0; left:50%; transform:translateX(-50%); text-align: center;}
  .estiCertiPop .divide-area .txt-con .type-div .f-title3{margin-bottom:6rem;}
  .estiCertiPop .divide-area .txt-con .txt-list{padding:0 18rem;}
  .estiCertiPop .divide-area .txt-con .article-list-w.txt-list .list-item .names{margin-bottom:16rem;}
  .estiCertiPop .divide-area .img-con{margin:0 auto 40rem; width:230rem;}
  .estiCertiPop .divide-area .img-con .img{width:230rem; height:268rem; margin-bottom: 12rem;}
  .estiCertiPop .divide-area .img-con .btn-wrap button{margin-top:0 !important;}
  .estiCertiPop .divide-area .img-con .modify-info{margin-top:8rem; text-align: center;}
  .estiCertiPop .seal-div{margin-top:32rem;}
}
@media all and (max-width: 599px) {
  .estiCertiPop .divide-area .img-con{width:206rem;}
  .estiCertiPop .divide-area .img-con .img{width:206rem; height:238rem;}
  .estiCertiPop .divide-area .img-con .btn-wrap{width:auto;}
}
/* --------------------------------------------- SQ평가원 자격증 popup - END --------------------------------------------- */





/* --------------------------------------------- 데이터 없을 경우 no-data - START --------------------------------------------- */
.no-data-area {padding: 160rem 0;}
.no-data-area .txt-box {text-align: center;}
.no-data-area .txt-box .txt {padding-top: 72rem; color: #697278; background: url("/common/images/icon-no-data.svg") center top/48rem no-repeat;}
.no-data-area.certificate .txt-box .txt {background-image: url("/common/images/icon-no-data-certificate.svg");}
.no-data-area.has-border {border: 1px solid #D9DDE0;} /* border ver */

@media all and (max-width: 1023px) {
  .no-data-area {padding: 120rem 0;}
  .no-data-area .txt-box .txt {padding-top: 52rem; background: url("/common/images/icon-no-data-mobile.svg") center top/40rem no-repeat;}
  .no-data-area.has-border {border: 0;}
}
/* --------------------------------------------- 데이터 없을 경우 no-data - END --------------------------------------------- */





/* --------------------------------------------- 페이지상단 스텝 step - START --------------------------------------------- */
.apply-step-w {overflow: hidden;}
.apply-step-w .for-move {position:relative; top: 100rem; display: flex; justify-content: center; opacity:0; transition: 1s top cubic-bezier(0.62, 0, 0.43, 1), 1s opacity cubic-bezier(0.62, 0, 0.43, 1); transition-delay: .5s;}
.apply-step-w .step-list {position:relative; width: 98rem; margin: 0 6rem; text-align: center;}
.apply-step-w .step-list:after {content: ''; display:block; position: absolute; right: -12rem; top: 25rem; width: 12rem; height: 1px; background-color: #06161E;}
.apply-step-w .step-list:last-child {margin-right: 0;}
.apply-step-w .step-list:last-child:after {display: none;}
.apply-step-w .step-list .step-num {position:relative; display: inline-flex; justify-content: center; align-items: center; width:50rem; height: 50rem; font-size:18rem; color: #B2B8BD; line-height: 155%; letter-spacing: -0.32rem; border: 1px solid #B2B8BD; border-radius: 50%;}
.apply-step-w .step-list .step-con {margin-top: 16rem; width:100%; color:#B2B8BD; font-size: max(16rem, 14px); line-height: 160%; letter-spacing: -0.32rem;}
.apply-step-w .step-list.completed .step-num {color: transparent; border: 1px solid #06161E; background: url("/common/images/icon-step-completed.svg") center center/20rem 13rem no-repeat;}
.apply-step-w .step-list.ongoing .step-num {color: #fff; background-color: #06161E; border: 1px solid #06161E;}
.apply-step-w .step-list.completed .step-con,
.apply-step-w .step-list.ongoing .step-con {color: #06161E;}

@media all and (max-width: 1023px) {
  .apply-step-w .for-move {transition-delay: 0.3s;}
  .apply-step-w .step-list {width: 72rem;}
  .apply-step-w .step-list:after {top: 21rem;}
  .apply-step-w .step-list .step-num {width: 40rem; height: 40rem; font-size: 14rem; line-height: 40rem;}
  .apply-step-w .step-list .step-con {margin-top: 8rem; font-size: 13rem; line-height: 165%; letter-spacing: -0.26rem;}
  .apply-step-w .step-list.completed .step-num {background-size: 12rem auto;}
}
/* --------------------------------------------- 페이지상단 스텝 step - END --------------------------------------------- */





/* --------------------------------------------- 단일 디자인 layout - START --------------------------------------------- */
.align-left {justify-content: flex-start;}
.align-right {justify-content: flex-end;}
.align-center {justify-content: center;}
.v-align-top {align-items: flex-start;}
.v-align-bottom {align-items: flex-end;}
.v-align-center {align-items: center;}
.t-align-left {text-align: left;}
.t-align-right {text-align: right;}
.t-align-center {text-align: center;}
.flex {display: flex;}

/* 회색 박스 */
.cont-sec .gray-bg-sec-w {margin-top: 40rem;}
.cont-sec .gray-bg-sec {margin-top: 40rem;}
.gray-bg-sec-w {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20rem;}
.gray-bg-sec-w .gray-bg-sec {margin-top: 0;}
.gray-bg-sec-w .gray-bg-sec .con-list-box-w {margin-top: 32rem;}
.gray-bg-sec-w .gray-bg-sec .con-list-box ~ .con-list-box {margin-top: 24rem;}
.gray-bg-sec-w .gray-bg-sec .con-list-box .ul-txt-w {margin-top: 8rem;}
.gray-bg-sec-w .gray-bg-sec .con-list-box .ul-txt-w .ul-txt-list .ul-txt {padding-left: 0;}
.gray-bg-sec {position: relative; padding: 60rem; background-color: #F5F6F7;}
/* .gray-bg-sec .group {position: absolute; top: 60rem; right: 60rem;} */
.gray-bg-sec .border-flex-box{display:flex; margin-top:32rem; padding-top:32rem; border-top:1px solid #D9DDE0}
/* .gray-bg-sec .border-flex-box > div{width:50%;} */
.gray-bg-sec .border-flex-box .left {margin-right: 120rem;}
.gray-bg-sec:has(.data-view-form) {padding: 80rem 60rem;}

.gray-bg-sec .flex {justify-content: space-between; align-items: flex-start;}
.gray-bg-sec .flex .def-list-w {margin-bottom: 0;}
.gray-bg-sec .flex .group {margin-left: 120rem;}
.gray-bg-sec .btn-wrap {margin-top: 80rem;}

.gray-bg-sec-w.half {grid-template-columns: repeat(2, 1fr);}

.gray-bg-sec .con-list-box:first-child {margin-top: 0;}
.gray-bg-sec .txt-w {margin-top: 16rem;}
.def-list-w + .btn-wrap {margin-top: 80rem;}
.gray-bg-sec .phone-certi .title {padding-top: 80rem; background: url("/common/images/icon-phone.svg") center top / 48rem no-repeat;}
.gray-bg-sec .phone-certi .txt {margin-top: 8rem;}
.gray-bg-sec .list-txt-w .list-txt {display: flex; margin-top: 20rem;}
.gray-bg-sec .list-txt-w .list-txt:first-child {margin-top: 0;}
.gray-bg-sec .list-txt-w .list-txt .tit {width: 168rem; margin-right: 20rem; text-align: left; font-size: max(16rem, 14px); line-height: 160%; letter-spacing: -0.32rem;}
.gray-bg-sec .list-txt-w .list-txt .txt {font-family: "Pretendard_Medium", sans-serif;}

.gray-bg-sec .status-circle {position: absolute; top: 50%; transform: translateY(-50%); right: 50rem;}
.gray-bg-sec:has(.status-circle) {position: relative; padding: 32rem 50rem;}
.gray-bg-sec:has(.status-circle) ~ .gray-bg-sec:has(.status-circle) {margin-top: 24rem;}
.gray-bg-sec:has( > a) {padding: 0 !important;}
.gray-bg-sec:has( > a) > a {display: inline-block; width: 100%; padding: 32rem 50rem;}

.gray-bg-sec.narrow-pad {padding: 30rem;}
.gray-bg-sec.wide-pad {padding: 80rem;}
.gray-bg-sec .f-sub-head + .f-body1{margin-top:24rem;}
.gray-bg-sec.middle-pad {padding: 40rem;}
.gray-bg-sec.dark-gray-bg {background-color: #ECEEEF;}
.gray-bg-sec.result {display: flex; justify-content: center; align-items: center; height: 185rem;} /* 아이디 찾기 결과 안내 페이지 */

@media all and (max-width: 1023px) {
  /* 회색 박스 */
  .cont-sec .gray-bg-sec-w {margin-top: 24rem;}
  .cont-sec .gray-bg-sec {margin-top: 24rem;}
  .gray-bg-sec-w {display: block;}
  .gray-bg-sec-w .gray-bg-sec {margin-top: 0;}
  .gray-bg-sec-w .gray-bg-sec ~ .gray-bg-sec {margin-top: 12rem;}
  .gray-bg-sec-w .gray-bg-sec .con-list-box-w {margin-top: 16rem;}
  .gray-bg-sec-w .gray-bg-sec .con-list-box ~ .con-list-box {margin-top: 12rem;}
  .gray-bg-sec-w .gray-bg-sec .con-list-box .ul-txt-w {margin-top: 4rem;}
  .gray-bg-sec {padding: 32rem;}
  .gray-bg-sec .con-list-box {margin-top: 16rem;}
  .gray-bg-sec .con-list-box .ul-txt-w {margin-top: 8rem;}
  .gray-bg-sec .txt-w {margin-top: 8rem;}
  .gray-bg-sec .border-flex-box{flex-wrap:wrap; margin-top:16rem; padding-top:16rem;}
  .gray-bg-sec .border-flex-box > div {width: 100%;}
  .gray-bg-sec .border-flex-box .left{margin-right: 0;}
  .gray-bg-sec .border-flex-box .right{margin-top:16rem;}
  /* .gray-bg-sec .group {top: 32rem; right: 32rem;} */
  .gray-bg-sec:has(.data-view-form) {padding: 40rem 24rem;}
  .def-list-w + .btn-wrap {margin-top: 40rem;}

  .gray-bg-sec .flex .group {margin-left: 24rem;}
  .gray-bg-sec .btn-wrap {margin-top: 40rem;}
  .gray-bg-sec .status-circle {top: 24rem; transform: translateY(0); right: 32rem;}
  
  .gray-bg-sec .phone-certi .title {padding-top: 64rem; background: url("/common/images/icon-phone-mobile.svg") center top / 40rem no-repeat;}
  .gray-bg-sec .phone-certi .txt {font-size: 13rem; line-height: 165%; letter-spacing: -0.26rem;}
  .gray-bg-sec .list-txt-w .list-txt {margin-top: 16rem;}
  .gray-bg-sec .list-txt-w .list-txt .tit {min-width: 93rem; margin-right: 0; padding-right: 15rem; font-size: 13rem; line-height: 165%; letter-spacing: -0.26rem;}
  .gray-bg-sec .list-txt-w .list-txt .txt {width: 100%; font-size: 13rem; line-height: 165%; letter-spacing: -0.26rem;}
  .gray-bg-sec .f-sub-head + .f-body1{margin-top:12rem;}
  .gray-bg-sec.narrow-pad {padding: 24rem;}
  .gray-bg-sec.middle-pad {padding: 24rem;}
  /* .gray-bg-sec:has(.info) {padding: 24rem 32rem;} */
  .gray-bg-sec:has(.status-circle) {padding: 24rem 32rem;}
  .gray-bg-sec:has(.status-circle) ~ .gray-bg-sec:has(.status-circle) {margin-top: 16rem;}
  .gray-bg-sec.middle-pad:has(.phone-certi) {position:relative; padding-top:100%;}
  .gray-bg-sec.middle-pad:has(.phone-certi) .phone-certi {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
  .gray-bg-sec.result {height: 144rem;} /* 아이디 찾기 결과 안내 페이지 */
}


/* 글씨 영역 */
        /* 글씨 */
.txt-w .txt-list .txt {margin-top: 8rem;}
.ul-txt-w .ul-txt-list .ul-txt {position:relative; margin-top: 8rem; color: #697278; line-height: 160%;/*word-wrap: break-word; word-break: break-all;*/}
.ul-txt-w .ul-txt-list .ul-txt:first-child {margin-top: 0;}
.ul-txt-w .ul-txt-list .ul-txt.has-dot {padding-left: 15rem;}
.ul-txt-w .ul-txt-list .ul-txt.has-dot:before {content: ''; display:block; position: absolute; left: 0; top: max(11rem, 10px); width: 3px; height: 3px; background-color: #697278; border-radius: 50%;}
.ul-txt-w .ul-txt-list .ul-txt.has-star {padding-left: 12rem;}
.ul-txt-w .ul-txt-list .ul-txt.has-star:before {content: '*'; display:block; position: absolute; left: 0; top:2rem;}
.ul-txt-w.highlight .ul-txt-list .ul-txt {margin-top: 16rem; color: #06161E; font-size: max(18rem, 16px); line-height: 155%;}/* 굵은 스타일 */
.ul-txt-w.highlight .ul-txt-list .ul-txt:first-child {margin-top: 0;}
.ul-txt-w.highlight .ul-txt-list .ul-txt.has-dot:before {width:4px; height: 4px; background-color: #06161E;}
.ul-txt-w.highlight .ul-txt-list dl.ul-txt {display: flex;}
.ul-txt-w.highlight .ul-txt-list dl.ul-txt dt {flex-shrink: 0; width: 160rem;}
.ul-txt-w.highlight .ul-txt-list dl.ul-txt dd {width: 100%;}
.ul-txt-w.info .ul-txt-list .ul-txt {display: flex; padding-left: 0;}
.ul-txt-w.info .ul-txt-list .ul-txt dl {display: flex;}
.ul-txt-w.info .ul-txt-list .ul-txt dl ~ dl {margin-left: 40rem;}
.ul-txt-w.info .ul-txt-list .ul-txt dl dt {margin-right: 12rem; color: #9CA1A6;}
.ul-txt-w.info .ul-txt-list .ul-txt dl dd {color: #06161E;}

.con-list-box-w .con-list-box ~ .con-list-box {margin-top: 40rem;}
.con-list-box-w .con-list-box .ul-txt-w {margin-top: 16rem;}
.agree-box .form-group {margin-top: 24rem;}
.agree-box .form-group .form-checkbox {margin-top: 0;}

        /* 점 목록 글씨 */
.dot-txt-w .dot-txt{position:relative; margin-top:8rem; padding-left:13rem;}
.dot-txt-w .dot-txt:before{display:block; content:""; position:absolute; left:0; top:11rem; width:3px; height:3px; background:#697278; border-radius:50%;}
.dot-txt-w .dot-txt:first-child{margin-top:0;}

        /* 체크아이콘 글씨 */
.status-circle {display: flex; align-items: center;}
.status-circle:after {content: ""; display: inline-block; width: 32rem; height: 32rem; margin-left: 10rem; background: url("/common/images/icon-checkcircle.svg") no-repeat center center / 32rem auto;}
.status-circle .txt {color: #697278;}
.status-circle.on:after {background-image: url("/common/images/icon-checkcircle-checked.svg");}
.status-circle.on .txt {color: #59B7E2;}
.status-circle.no:after {background-image: url("/common/images/icon-checkcircle-gray.svg");}
.status-circle.no .txt {color: #9CA1A6;}

        /* td td 글씨 */
.def-list-w {margin: 48rem 0;}
.def-list-w:first-child {margin-top: 0;}
.def-list-w:last-child {margin-bottom: 0;}
.def-list-w .def-list {display: flex; margin-top: 16rem;}
.def-list-w .def-list:first-child {margin-top: 0;}
.def-list-w .def-list .tit {width: 128rem; padding-right: 8rem;}

        /* ! 느낌표 정보 글씨 */
.exclamation-txt {padding-left: max(32rem, 28px); color: #697278; background: url("/common/images/icon-exclamation-mark.svg") no-repeat left top / max(24rem, 20px);}
.exclamation-txt.f-sub-head {background-position: left top 1rem;}
.exclamation-txt a {color: #697278; text-decoration: underline; text-underline-position: under;}
.exclamation-txt + .exclamation-txt {margin-top: 4rem;}

        /* 숫자 */
.title:has(.circle-num) > span:not(.essential-mark), .data-title:has(.circle-num) > span:not(.essential-mark) {display: inline-flex; align-items: center; flex-wrap: wrap;}
.circle-num {flex-shrink: 0; display: inline-block; width: 24rem; height: 24rem; margin-left: 2rem; /*vertical-align: middle;*/}
.circle-num img {width: 100%;}

@media all and (max-width: 1023px) {
  /* 글씨 영역 */
          /* 글씨 */
  .txt-w .txt-list .txt {margin-top: 6rem;}
  .ul-txt-w .ul-txt-list .ul-txt {margin-top: 4rem; font-size: 13rem; line-height: 165%; letter-spacing: -0.26rem;}
  .ul-txt-w .ul-txt-list .ul-txt:before {top: 8rem;}
  .ul-txt-w .ul-txt-list .ul-txt.has-dot {padding-left: 11rem;}
  .ul-txt-w .ul-txt-list .ul-txt.has-dot:before {top:9rem;}
  .ul-txt-w.highlight .ul-txt-list .ul-txt {margin-top: 8rem; font-size: 14rem; line-height: 170%; letter-spacing: -0.28rem;}
  .ul-txt-w.highlight .ul-txt-list dl.ul-txt dt {width: 64rem; margin-right: 10rem;}
  .ul-txt-w.info .ul-txt-list .ul-txt {display: block;}
  .ul-txt-w.info .ul-txt-list .ul-txt dl dt {margin-right: 8rem;}
  .ul-txt-w.info .ul-txt-list .ul-txt dl ~ dl {margin: 8rem 0 0;}

  .con-list-box-w .con-list-box ~ .con-list-box {margin-top: 16rem;}
  .con-list-box-w .con-list-box .ul-txt-w {margin-top: 8rem;}
  .con-list-box-w .con-list-box .ul-txt-w.info {margin-top: 12rem;}
  
          /* 점 목록 글씨 */
  .def-list-w {margin: 24rem 0;}
  .def-list-w .def-list {display: block;}
  .def-list-w .def-list .tit {padding-right: 0; margin-bottom: 4rem;}

          /* 체크아이콘 글씨 */
  .status-circle:after {width: 24rem; height: 24rem; margin-left: 8rem; background-size: 24rem auto;}
  
          /* ! 느낌표 정보 글씨 */
  .exclamation-txt {padding-left: max(30rem, 26px); background-position: left top -2rem;}
  .exclamation-txt.f-sub-head {background-position: left top -1rem;}
}


/* 가이드 스텝 */
.guide-step-w {display: flex; justify-content: center; padding: 60rem;}
.guide-step-w .step-list {position:relative; padding-right: 120rem;}
.guide-step-w .step-list:last-child {padding-right: 0;}
.guide-step-w .step-list .step-num {position:relative; padding-top: 28rem; color: #697278; line-height: 160%; letter-spacing: -0.32rem;}
.guide-step-w .step-list .step-num:before {content: ''; display:block; position: absolute; left: 0; top: 0; width: 4px; height: 4px; background-color: #06161E; border-radius: 50%;}
.guide-step-w .step-list .step-con {margin-top: 2rem; color:#06161E; font-family: "Pretendard_SemiBold", sans-serif;  font-size: max(18rem, 16px); line-height: 155%; letter-spacing: -0.36rem;}
.guide-step-w .step-list .step-info {display: flex; flex-wrap: wrap; column-gap: 8rem;}
.guide-step-w .step-list:last-child {margin-right: 0;}
.guide-step-w.has-border {border: 1px solid #D9DDE0;} /* 테두리 있는 ver */
.guide-step-w.gray-bg{background:#F5F6F7}/* 회색 배경 있는 ver */

@media all and (max-width: 1023px) {
  .guide-step-w {display: block; padding: 24rem;}
  .guide-step-w .step-list {margin: 0; padding: 0 0 24rem 15rem;}
  .guide-step-w .step-list:last-child {padding-bottom: 0;}
  .guide-step-w .step-list:last-child:before {display: none;}
  .guide-step-w .step-list .step-con {margin-top: 0; font-size: 15rem; line-height: 170%; letter-spacing: -0.3rem;}
  .guide-step-w .step-list .step-info {column-gap: 6rem;}
  .guide-step-w .step-list .step-num {padding-top: 0; font-size: 13rem; line-height: 165%; letter-spacing: -0.26rem;}
  .guide-step-w .step-list .step-num:before {left: -13rem; top: 9rem;}
  .guide-step-w .step-list:first-child {margin-top: 0;}
}

.gray-bg-enter-form {position: relative; padding: 60rem; background-color: #ECEEEF;}
.gray-bg-enter-form .abs-option {position: absolute; right: 60rem;}

.box-btn-area {position:relative; padding: 40rem; height: max(260rem, 170px); background-color: #1E6B8E;}
.box-btn-area .bg-area {position: absolute; left: 0; top:0; width:100%; height: 100%; clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%); transition: .8s clip-path cubic-bezier(0.62, 0, 0.43, 1); overflow: hidden;}
.box-btn-area .bg-area .img {position:relative; left: 100rem; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; transition: .8s left cubic-bezier(0.62, 0, 0.43, 1);}
.box-btn-area .txt-area {position:relative; z-index:1;}
.box-btn-area .txt-area .txt {color: #fff;}
.box-btn-area .btn-wrap {position:absolute; right: 40rem; bottom: 40rem;}
.box-btn-area .btn-wrap .btn-text-icon span {color: #fff;}
.box-btn-area:hover .bg-area {clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);} /* hover */
.box-btn-area:hover .bg-area .img {left:0;}

.divide-flex-box {display: flex; justify-content: space-between;}
.divide-flex-box .left {padding-right: 15rem;}
.divide-flex-box .info-guide-txt {color: #06161E;}

.scroll-gauge {position: fixed; left: 0; top:0; width:100%; height: 5rem; z-index: 60;} /* 게이지 바 */
.scroll-gauge .bar {width:0; height: 100%; background-color: #59B7E2;}

.letter-subscribe-w {margin-bottom: 64rem; padding: 48rem; border: 1px solid #D9DDE0; background: url("/common/images/icon-graphic-sub-foundation-newsletter-subscribe.png") right bottom / 413rem no-repeat;} /* 뉴스레터 신청 */
.letter-subscribe-w .txt-area .txt {margin-top: 24rem;}
.letter-subscribe-w .form-input {width: 370rem; margin: 64rem 0 24rem;}
.letter-subscribe-w .form-checkbox input:disabled + label {color: #697278; background: url("/common/images/icon-checkbox.svg") left center/22rem no-repeat;}
.letter-subscribe-w .btn-wrap {margin-top: 40rem;}

@media all and (max-width: 1023px) {
  .gray-bg-enter-form {padding: 30rem;}
  .gray-bg-enter-form .abs-option {position: relative; left: 0; margin-bottom: 32rem;}
  .gray-bg-enter-form .data-enter-form .row {margin-top: 30rem;}

  .box-btn-area {padding: 32rem; height: 200rem;}
  .box-btn-area .txt-area .tit {font-size: 15rem; line-height: 170%; letter-spacing: -0.3rem;}
  .box-btn-area .txt-area .tit br {display: none;}
  .box-btn-area .btn-wrap {right: 32rem; bottom: 32rem;}

  .divide-flex-box .info-guide-txt {font-size: 13rem;}
  .divide-flex-box .left {padding-right: 0;}
  .divide-flex-box.download {flex-direction: column; flex-wrap: wrap;} /* 다운로드 버튼 있는 경우 */
  .divide-flex-box.download .right.has-button {margin-top: 16rem;}
  .divide-flex-box.download .right.has-button .btn-wrap {justify-content: flex-end;}

  .scroll-gauge {height: 3rem;} /* 게이지 바 */

  .letter-subscribe-w {margin-bottom: 96rem; padding: 0; background: none; border: none;} /* 뉴스레터 신청 */
  .letter-subscribe-w .form-input {margin: 48rem 0 24rem; width: 100%;}
  .letter-subscribe-w .btn-wrap {margin-top: 48rem;}
  .letter-subscribe-w .txt-area .txt {width: 65%; font-family: "Pretendard_Regular", sans-serif; font-size: max(14rem, 13px); line-height: 170%; letter-spacing: -0.28rem;}
}
@media all and (max-width: 599px) {
  .box-btn-area {height: 350rem;}
}


/* 스탭 상태 영역 */
.status-con-box {margin: 40rem 0; padding: 80rem 120rem; background-color: #fff;}
.status-con-box:first-child {margin-top: 0;}
.status-con-box:last-child {margin-bottom: 0;}
.status-con-box .cont-for-padding {padding-right: 350rem;}
.status-con-box .detail-txt {margin: 24rem 0 48rem; color: #697278; font-size: max(16rem, 14px); line-height: 160%; letter-spacing: -0.32rem;}
.status-con-box .sort-label-area {margin-bottom: 16rem;}
.status-con-box .page-bot-btn-sec {margin-top: 100rem;}
.status-con-box.gray-bg .def-list-w {margin-top: 80rem;}

.status-con-box.join-complete {background: #fff url("/common/images/icon-graphic-join-complete.png") right 80rem top 90rem / 240rem no-repeat;} /* 회원가입 완료 페이지 */
.status-con-box.completed {background: #fff url("/common/images/img-complete-banner-obj.png") right 120rem center / 240rem no-repeat;} /* 완료 페이지 */
.status-con-box.completed .page-bot-btn-sec{margin-top:80rem;}
.status-con-box.gray-bg {background-color: #f5f6f7;}
.status-con-box.gray-bg.completed {background: #F5F6F7 url("/common/images/img-complete-banner-obj-white.png") right 120rem center / 240rem no-repeat;} /* 완료 페이지(회색배경) */

@media all and (max-width: 1023px) {
  /* 스탭 상태 영역 */
  .status-con-box {margin: 24rem 0; padding: 116rem 24rem 40rem;}
  .status-con-box .cont-for-padding {padding: 0;}
  .status-con-box .detail-txt {margin-bottom: 40rem; font-size: 13rem;}
  .status-con-box .inner-box {padding: 116rem 24rem 40rem; background: #F5F6F7 url("/common/images/img-complete-banner-obj-mobile.png") right -55rem bottom -48rem / 182rem no-repeat;}
  .status-con-box .sub-txt {margin-bottom: 8rem;}
  .status-con-box .page-bot-btn-sec {margin-top: 80rem;}
  .status-con-box.gray-bg .def-list-w {margin-top: 56rem;}
  
  .status-con-box.join-complete {background-size: 64rem; background-position: left 24rem top 40rem;} /* 회원가입 완료 페이지 */
  .status-con-box.completed {background-size: 64rem; background-position: left 24rem top 40rem;} /* 완료 페이지 */
  .status-con-box.gray-bg.completed {background-size: 64rem; background-position: left 24rem top 40rem;} /* 완료 페이지(회색배경) */
  .status-con-box.no-bg-img {padding-top: 40rem;} /* 배경 이미지 없는 경우 */
  .status-con-box.completed .page-bot-btn-sec{margin-top:48rem;}
}


.inner-con-box {padding: 80rem 120rem; background-color: #fff;}
.inner-con-box .cont-for-padding {padding-right: 270rem;}
.inner-con-box .detail-txt {margin: 16rem 0 48rem; color: #697278; font-size: max(16rem, 14px); line-height: 160%; letter-spacing: -0.32rem;}
.inner-con-box .agree-terms-w {margin-top: 40rem;}
.inner-con-box .btn-wrap {margin-top: 48rem;}
.inner-con-box .divide-flex-box .btn-wrap {margin-top: 0;}
.inner-con-box .divide-flex-box:first-child {margin-bottom: 40rem;}
.inner-con-box .data-enter-form .btn-wrap {margin-top: 0;}
.inner-con-box .txt-tab-swiper {margin-bottom: 48rem;}
.inner-con-box .con-sub-tit {margin-bottom: 64rem;}
.inner-con-box .page-bot-btn-sec {margin-top: 80rem;}
.inner-con-box .page-bot-btn-sec .btn-wrap {margin-top: 0;}

.inner-con-box .sec-con-area .gray-bg-sec {margin-top: 40rem;}
.inner-con-box .f-title1 + .sort-label-area{margin-top:16rem;}

.inner-con-box > .sort-label-area {margin-top: 16rem;}

.inner-con-box .iframe-area {width: 100%; height: 480rem;}

.inner-con-box.evaluation {background: #fff url("/common/images/icon-graphic-evaluation.png") right 120rem top 80rem / 240rem no-repeat;} /* 마이페이지 > 평가하기 */
.inner-con-box.evaluation:has(.cont-line-sec) {background-position:right 120rem top 133rem;}
.inner-con-box.complete {background: #fff url("/common/images/img-complete-banner-obj.png") right 120rem center / 240rem no-repeat} /* 마이페이지 > 완료페이지 */
.inner-con-box.online-training {background: #fff url("/common/images/icon-graphic-training-online.png") right 120rem top 133rem / 240rem no-repeat} /* 마이페이지 > 온라인교육 대기 페이지 */
.inner-con-box.gray-bg {background-color: #F5F6F7;}
.inner-con-box.gray-bg .form-select {background-color: #ECEEEF;}

@media all and (max-width: 1023px) {
  .inner-con-box .cont-for-padding {padding-right: 0;}
  .inner-con-box .agree-terms-w {margin-top: 32rem;}
  .inner-con-box .data-line-w .data-line .form-group + .form-group {margin-top: 16rem;}
  .inner-con-box .btn-wrap {margin-top: 32rem;}

  /* .inner-con-box .data-enter-form .btn-wrap {margin-top: 12rem;} */
  .inner-con-box .form-input {width: 170rem;}
  .inner-con-box .form-birth .form-input {width: 90rem;}
  .inner-con-box .form-email .form-input {width: -webkit-calc(50% - 16rem); width: calc(50% - 16rem);}
  .inner-con-box .w-longer {width: 100%;}
  .inner-con-box .w-shorter {width: 120rem;}
  .inner-con-box .w-shortest {width: 90rem;}
  
  .inner-con-box {margin-top: 40rem; padding: 40rem 24rem;}
  .inner-con-box .txt-tab-swiper {margin-bottom: 32rem;}
  .inner-con-box .con-sub-tit {margin-bottom: 32rem;}
  .inner-con-box .con-sub-tit + .tab-con-w .tab-btn-area {margin-top: 40rem;}
  .inner-con-box .page-bot-btn-sec {margin-top: 48rem;}
  .inner-con-box .page-bot-btn-sec.reverse-order .btn-wrap {flex-direction: column;} /* 마이페이지 > 온라인교육 버튼 영역 (mobile에서 순서바뀜) */
  .inner-con-box .page-bot-btn-sec.reverse-order .btn-wrap .btn-set:first-child {order: 1; margin-top: 8rem;}
  .inner-con-box .sec-con-area .gray-bg-sec {margin-top: 32rem; padding: 24rem;}
  .inner-con-box .detail-txt {margin: 16rem 0 40rem; font-size: 13rem; line-height: 165%; letter-spacing: -0.26rem;}
  .inner-con-box .divide-flex-box:first-child {margin-bottom: 24rem;}
  .inner-con-box .f-title1 + .sort-label-area{margin-top:8rem;}
  /* .inner-con-box .info-area {font-size: 13rem;} */

  .inner-con-box .iframe-area {width: 100%; height: 170rem;}
  .inner-con-box .iframe-area * {max-width: 100%;}

  .inner-con-box .cont-sec-w .cont-sec {margin-top: 96rem;}
  .inner-con-box .cont-sec-w .cont-sec:first-child {margin-top: 0;}
  .inner-con-box.join-complete {background-image: none;} /* 회원가입 완료 페이지 */
  .inner-con-box.online-training {padding-top: 116rem; background-size: 64rem; background-position: top 40rem left 24rem;} /* 마이페이지 > 온라인교육 대기 페이지 */
  .inner-con-box.evaluation {padding-top: 116rem; background-size: 64rem; background-position: top 40rem left 24rem;} /* 마이페이지 > 평가하기 */
  .inner-con-box.evaluation:has(.cont-line-sec) {background-position:top 40rem left 24rem;}
}


.evaluation-category {display: flex; justify-content: space-between; margin-bottom: 60rem;}
.evaluation-category:not(:first-child) {margin-top: 120rem;}
.evaluation-category .right {max-width: 446rem;}
.evaluation-category .sort-label-area {margin-top: 12rem;}
.evaluation-category .status-info-w {flex-wrap: wrap; justify-content: flex-end;}
.evaluation-category .status-info-w .box-label {align-self: flex-start; white-space: nowrap;}

@media all and (max-width: 1023px) {
  .evaluation-category {display: block; margin-bottom: 40rem;}
  .evaluation-category:not(:first-child) {margin-top: 96rem;}
  .evaluation-category .sort-label-area {margin-top: 8rem;}
  .evaluation-category .right {max-width: auto;}
  .evaluation-category .status-info-w {justify-content: flex-start; margin-top: 16rem;}
}

.cont-line-sec {margin-top: 80rem; padding-top: 80rem; border-top: 1px solid #D9DDE0;}

@media all and (max-width: 1023px) {
  .cont-line-sec {margin-top: 48rem; padding-top: 48rem;}
}
/* --------------------------------------------- 단일 디자인 layout - END --------------------------------------------- */





/* --------------------------------------------- 설문조사, 평가하기 - START --------------------------------------------- */
/* 설문조사, 평가하기 폼 */
.survey-form .sec-tit-area {margin-bottom: 40rem;}
.survey-form .sec-tit-area .sec-tit {font-family: "Pretendard_Bold", sans-serif; color: #06161E; font-size: 20rem; line-height: 150%; letter-spacing: -0.6rem;}
.survey-form .cont-sec-w {padding-top: 60rem; border-top: 1px solid #D9DDE0;}
.survey-form .cont-sec-w .cont-sec .f-caption1:has(.essential-mark) {position: absolute; right: 0; top: 0;}
.survey-form .cont-sec-w .cont-sec .sec-tit-area {display: block;}
.survey-form .cont-sec-w .cont-sec .sec-tit-area .sec-tit.sub-tit {margin-top: 16rem; font-family: "Pretendard_SemiBold", sans-serif; font-size: 18rem; line-height: 155%; letter-spacing: -0.36rem;}
.survey-form .cont-sec-w .cont-sec:has(.sec-tit.sub-tit) {margin-top: 60rem;}
.survey-form .cont-sec-w .cont-sec:has(.sec-tit.sub-tit) .sec-tit-area {margin-bottom: 32rem;}
.survey-form .cont-sec-w .cont-sec:has(.sec-tit.sub-tit)::before {display: none;}
.survey-form .cont-sec-w .cont-sec:has(.sec-tit.sub-tit:nth-child(2)) {margin-top: 120rem;}
.survey-form .cont-sec-w .cont-sec:has(.sec-tit.sub-tit:nth-child(2))::before {content: ''; display:block; position: absolute; left: 0; top:-61rem; width:100%; height: 1px; background-color: #D9DDE0;}
.survey-form .cont-sec-w .cont-sec:has(.sec-tit.sub-tit:nth-child(2)):first-child {margin-top: 0;}
.survey-form .cont-sec-w .cont-sec:has(.sec-tit.sub-tit:nth-child(2)):first-child::before {display: none;}
.survey-list-w .survey-list {margin-top: 60rem;}
.survey-list-w .survey-list .survey-list-inner:not(:first-child) {margin-left: 24rem; margin-top: 32rem;}
.survey-list-w .survey-list .survey-list-inner:not(:first-child) .question-tit .number {color: #697278;}
.survey-list-w .survey-list .survey-list-inner:not(:first-child) .question-tit:after {content: ''; display: block; position: absolute; left: -21rem; top: 8rem; width: 10rem; height: 10rem; border-left: 1px solid #06161E; border-bottom: 1px solid #06161E;}
.survey-list-w .survey-list:first-child {margin-top: 0;}
.survey-list-w .survey-list .question-tit {position: relative; margin-bottom: 24rem;}
.survey-list-w .survey-list .question-tit .number {font-family: "Pretendard_SemiBold", sans-serif; color: #1E6B8E; font-size: max(18rem, 16px); line-height: 155%; letter-spacing: -0.36rem;}
.survey-list-w .survey-list .question-tit .tit {margin-top: 8rem;}
/* 2024-07-11 수정 s */ 
.survey-list-w .survey-list .survey-con .form-wrap {display: flex;}
.survey-list-w .survey-list .question-tit .tit .essential-mark {margin-left: 3rem;}
.survey-list-w .survey-list .survey-con .opt-group{margin-top:0;}
/* 척도 문항 (ex) 불만족 - 만족)*/
.criterion-form {display: inline-flex; flex-direction: column;}
.criterion-form + .criterion-form {margin-left: 40rem;} 
.criterion-form .criterion-list-w {display: inline-flex;}
.criterion-form .criterion-list-w .form-radio {margin-right: 1px;}
.criterion-form .criterion-list-w .form-radio:last-child {margin-right: 0;}
.criterion-form .criterion-list-w .form-radio input + label {display: flex; align-items: center; justify-content: center; width: 48rem; height: 48rem; padding-left: 0; font-family: "Pretendard_Medium", sans-serif; color: #697278; font-size: max(14rem, 13px); line-height: 170%; letter-spacing: -0.28rem; background: #F5F6F7; border-radius: 2px;}
.criterion-form .criterion-list-w .form-radio input:checked + label {color: #fff; background-color: #06161E;}
.criterion-form .criterion-list-w .form-radio.none input + label {background-image: url("/common/images/icon-criterion-x.svg");
background-position: center; background-size: 14rem auto; background-repeat: no-repeat;}
.criterion-form .criterion-list-w .form-radio.none input:checked + label {background-image: url("/common/images/icon-criterion-x-wht.svg");}
.criterion-form .criterion-guide-txt {display: flex; justify-content: space-between; margin-top: 12rem;}
.criterion-form .criterion-guide-txt .txt {color: #06161E; font-size: max(14rem, 13px); line-height: 130%; letter-spacing: -0.28rem; text-align: center;}
/* // 2024-07-11 수정 e */

@media all and (max-width: 1023px) {
  /* 설문조사, 평가하기 폼 */
  .survey-form .cont-sec-w {padding-top: 16rem;}
  .survey-form .sec-tit-area .sec-tit {font-size: 17rem; line-height: 150%; letter-spacing: -0.51rem;}
  .survey-form .cont-sec-w .cont-sec:first-child .sec-tit-area {margin-top: 24rem;}
  .survey-form .cont-sec-w .cont-sec .f-caption1:has(.essential-mark) {position: relative; margin-bottom: 32rem;}
  .survey-form .cont-sec-w .cont-sec .sec-tit-area .sec-tit.sub-tit {font-size: 15rem; line-height: 170%; letter-spacing: -0.3rem;}
  .survey-form .cont-sec-w .cont-sec .sec-tit-area .sec-tit.sub-tit {margin-top: 12rem;}
  .survey-form .cont-sec-w .cont-sec:has(.sec-tit.sub-tit) {margin-top: 48rem;}
  .survey-form .cont-sec-w .cont-sec:has(.sec-tit.sub-tit) .sec-tit-area {margin-bottom: 24rem;}
  .survey-form .cont-sec-w .cont-sec:has(.sec-tit.sub-tit:nth-child(2)) {margin-top: 96rem;}
  .survey-form .cont-sec-w .cont-sec:has(.sec-tit.sub-tit:nth-child(2))::before {left: 0; top: -44rem; width: 100%; height: 1px; background-color: #D9DDE0;}
  .survey-form .cont-sec .sec-tit-area:not(.non-block) {margin-bottom: 8rem;}
  .survey-form .cont-sec .for-motion:before {left: 0; top: -44rem; width: 100%; height: 1px; background-color: #D9DDE0;}
  .survey-form .inner-con-box .cont-sec-w .cont-sec {margin-top: 80rem;}
  .survey-list-w .survey-list {margin-top: 40rem;}
  .survey-list-w .survey-list .question-tit {margin-bottom: 16rem;}
  .survey-list-w .survey-list .question-tit .number {font-size: 15rem; line-height: 170%; letter-spacing: -0.3rem;}
  .survey-list-w .survey-list .survey-list-inner:not(:first-child) {margin-left: 20rem; margin-top: 20rem;}
  .survey-list-w .survey-list .survey-list-inner:not(:first-child) .question-tit:after {top: 7rem; left: -17rem; width: 8rem; height: 8rem;}
  
  /* 척도 문항 (ex) 불만족 - 만족)*/
  /* 2024-07-11 수정 s */
  .criterion-form + .criterion-form {margin-left: 7rem;}
  .criterion-form .criterion-list-w .form-radio input + label {width: 48rem; height: 48rem;}
  .criterion-form:has(.form-radio:nth-child(6)) {display: block;}
  .criterion-form:has(.form-radio:nth-child(6)) .criterion-list-w {width: 100%;}
  .criterion-form:has(.form-radio:nth-child(6)) .criterion-list-w .form-radio {flex-grow: 1;}
  .criterion-form:has(.form-radio:nth-child(6)) .criterion-list-w .form-radio input + label {width: auto;}
  .criterion-form .criterion-list-w .form-radio.none input + label {background-size: 12rem auto;}
  /* // 2024-07-11 수정 e */
}
/* --------------------------------------------- 설문조사, 평가하기 - END --------------------------------------------- */





/* --------------------------------------------- Swiper 스와이퍼 - START --------------------------------------------- */
.swiper-button-next[class*='circle-arr'],
.swiper-button-prev[class*='circle-arr'] {width: 48rem; height: 48rem; background: url("/common/images/icon-btn-swiper-next.svg") center/48rem no-repeat; transition: background-image .2s;}
.swiper-button-next.circle-arr {background-image: url("/common/images/icon-btn-swiper-next.svg");}
.swiper-button-next.circle-arr:hover {background-image: url("/common/images/icon-btn-swiper-next-hover.svg");}
.swiper-button-prev.circle-arr {background-image: url("/common/images/icon-btn-swiper-prev.svg");}
.swiper-button-prev.circle-arr:hover {background-image: url("/common/images/icon-btn-swiper-prev-hover.svg");}
.swiper-button-next.circle-arr-gray {background-image: url("/common/images/icon-btn-swiper-next-wht.svg");}
.swiper-button-next.circle-arr-gray:hover {background-image: url("/common/images/icon-btn-swiper-next-wht-hover.svg");}
.swiper-button-prev.circle-arr-gray {background-image: url("/common/images/icon-btn-swiper-prev-wht.svg");}
.swiper-button-prev.circle-arr-gray:hover {background-image: url("/common/images/icon-btn-swiper-prev-wht-hover.svg");}
.swiper-button-next.circle-arr.swiper-button-disabled,
.swiper-button-prev.circle-arr.swiper-button-disabled {opacity:.4;}

/* 회색 박스 리스트 스와이퍼 */
.box-list-swiper {margin-top: 60rem; padding-bottom: 88rem;}
.box-list-swiper .swiper-slide {width: 337rem; height: 246rem; margin-right: 40rem; background-color: #D9DDE0;}
.box-list-swiper .swiper-slide .txt-wrap {display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 40rem;}
.box-list-swiper .swiper-slide .txt-wrap .tit {width: 80%;}
.box-list-swiper .swiper-slide:last-child {margin-right: 0;}
.box-list-swiper .swiper-button-prev {top: auto; bottom: 0; left: auto; right: 56rem; margin-top: 0;}
.box-list-swiper .swiper-button-next {top: auto; bottom: 0; right: 0; margin-top: 0;}

@media all and (max-width: 1023px) {
  /* 회색 박스 리스트 스와이퍼 */
  .box-list-swiper {margin-top: 32rem; padding-bottom: 0;}
  .box-list-swiper .swiper-wrapper {display: block;}
  .box-list-swiper .swiper-slide {height: 139rem; margin-top: 16rem;}
  .box-list-swiper .swiper-slide .txt-wrap {padding: 24rem;}
  .box-list-swiper .swiper-slide:first-child {margin-top: 0;}
  .box-list-swiper .swiper-slide .txt-wrap .tit {font-family: "Pretendard_Bold", sans-serif;}
  .box-list-swiper .swiper-slide .txt-wrap .tit {font-family: "Pretendard_Bold", sans-serif;}
  .box-list-swiper .swiper-button-prev,
  .box-list-swiper .swiper-button-next {display: none;}

}
/* --------------------------------------------- Swiper 스와이퍼 - END --------------------------------------------- */





/* --------------------------------------------- lnb - START --------------------------------------------- */
.lnb-area {position: absolute; left: 0; top:0; width:233rem;}
.lnb-area .for-motion {margin-top: 100rem; padding-top: 40rem; border-top: 1px solid #06161E; opacity: 0;}
.lnb-area .lnb-list {margin-bottom: 24rem;}
.lnb-area .lnb-list:last-child {margin-bottom: 0;}
.lnb-area .lnb-list .btn-two-depth {position:relative; display:block;}
.lnb-area .lnb-list .btn-two-depth span {font-family: "Pretendard_Medium", sans-serif; font-size: 28rem; line-height: 150%; letter-spacing: -0.84rem;}
.lnb-area .lnb-list .btn-two-depth:after {content: ''; display:block; position: absolute; right: 0; top:0; width: 33rem; height: 33rem; background: url("/common/images/icon-lnb-arr-gray.svg") center center no-repeat; transform: rotate(180deg); transition: .3s all ease; transform-origin: center;}
.lnb-area .lnb-list .btn-two-depth.active span {color: #59B7E2;}
.lnb-area .lnb-list .btn-two-depth.active:after {transform: rotate(0deg);}
.lnb-area .lnb-list .btn-two-depth.single-menu:after {display: none;} /* 3depth 없을 때 */
.lnb-area .lnb-list .three-depth-wrap {margin-top: 16rem;}
.lnb-area .lnb-list .three-depth-wrap .btn-three-depth {display:block; margin-top: 8rem;}
.lnb-area .lnb-list .three-depth-wrap .btn-three-depth span {font-family: "Pretendard_Medium", sans-serif; font-size: max(18rem, 16px); color: #697278; line-height: 155%; letter-spacing: -0.36rem;}
.lnb-area .lnb-list .three-depth-wrap .btn-three-depth.active span {font-family: "Pretendard_SemiBold", sans-serif;  color: #06161E;}
.lnb-area .lnb-list .three-depth-wrap .btn-three-depth:first-child {margin-top: 0;}
.lnb-area .lnb-list .three-depth-wrap .btn-three-depth:last-child {margin-bottom: 0;}
.lnb-area .lnb-list .three-depth-wrap {display:none;}
.mypage .lnb-area .lnb-list .btn-two-depth span {font-size: max(19rem, 17px);} /* 마이페이지 쪽은 lnb 크기 다름 */

.lnb-link-area {width: 233rem; height: 233rem; margin-top: 64rem; background: url() center center / 233rem no-repeat; border-radius: 2px; overflow: hidden;}
.lnb-link-area.winner {background-image: url("/common/images/bg-winner.jpg");}
.lnb-link-area.nonmember {background-image: url("/common/images/bg-nonmember-history.jpg");}
.lnb-link-area .btn-text-icon{display:block; padding:20rem; width:100%; height:100%;}
.lnb-link-area .btn-text-icon span {flex-wrap: wrap;}
.right-con-area .lnb-link-area {display: none;}
.right-con-area img {max-width: 100%;}
@media all and (max-width: 1023px) {
  .lnb-area {display: none;}

  .cont-wrap:has(.sub-top-vis-area.basic-page ~ .divide-con-area .right-con-area .lnb-link-area) .sub-top-vis-area.basic-page {margin-bottom: 32rem;}
  .right-con-area .lnb-link-area {display: flex; align-items: center; width: 100%; height: 72rem; margin-top: 32rem; margin-bottom: 32rem; padding: 0; padding-left: 24rem; background: url("") center right / auto 72rem no-repeat #F5F6F7;}
  .right-con-area .lnb-link-area.winner {background-image: url("/common/images/bg-winner-mobile.jpg");}
  .right-con-area .lnb-link-area.nonmember {background-image: url("/common/images/bg-nonmember-history-mobile.jpg");}
}
/* --------------------------------------------- lnb - End --------------------------------------------- */





/* --------------------------------------------- Sub Top Visual - START  --------------------------------------------- */
.inner .sub-top-vis-area {width: 100%; margin-bottom: 60rem;}

.sub-top-vis-area {position:relative; margin: 0 auto 120rem; width:1600rem;}
.sub-top-vis-area .page-tit-area {position:relative; z-index:1;}
/* 2024-05-23 수정 s */
.sub-top-vis-area .page-tit-area .page-tit {font-size: max(60rem, 56px); font-family: "Pretendard_Bold", sans-serif; color: #06161E; line-height: 130%; letter-spacing: -.04em;}
.sub-top-vis-area:not(.apply-page) .page-tit-area .page-tit {position:relative; left: 0; top: 0; margin-left: 0; opacity:1; overflow: hidden;}
.sub-top-vis-area:not(.apply-page) .page-tit-area .page-tit .for-move {position:relative; top: 200rem; margin-left: 0;}

.sub-top-vis-area.basic-page .page-tit-area {position:absolute; top: 50%; left: 0; z-index:1; width: 100%; transform: translateY(-50%);}
.sub-top-vis-area.basic-page .page-tit-area .page-tit{ transition: all 1s cubic-bezier(0.62, 0, 0.43, 1);}
.sub-top-vis-area.basic-page.scroll-down .page-tit-area .page-tit{margin-left: 30rem; color: #fff;}
.sub-top-vis-area.basic-page .img-area {position:relative; top:0; margin-top: 120rem; width: 1600rem; height: 210rem; clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%); transition: 1s clip-path cubic-bezier(0.62, 0, 0.43, 1); overflow: hidden;}
.sub-top-vis-area.basic-page .img-area .img {position:relative; left: 100rem; width:100%; height: 100%; transition: 1s clip-path cubic-bezier(0.62, 0, 0.43, 1), 1s left cubic-bezier(0.62, 0, 0.43, 1);}
.sub-top-vis-area.basic-page .img-area .img img {width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: 1s transform cubic-bezier(0.62, 0, 0.43, 1);}
.sub-top-vis-area.basic-page .img-area .img:before {content: ''; display:block; position: absolute; left: 0; top:0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); opacity: 0; transition: 1s opacity cubic-bezier(0.62, 0, 0.43, 1); z-index: 1;}
.sub-top-vis-area.basic-page.init-active .img-area {clip-path: polygon(507rem 0%, 100% 0%, 100% 100%, 507rem 100%);}
.sub-top-vis-area.basic-page.init-active .img-area .img {left: 0;}
.sub-top-vis-area.basic-page.scroll-down .img-area {clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}/* scroll down  */
.sub-top-vis-area.basic-page.scroll-down .img-area .img img {transform: scale(1);}
.sub-top-vis-area.basic-page.scroll-down .img-area .img:before {opacity:1;}
/* //2024-05-23 수정 e */

.sub-top-vis-area.apply-page {margin-top: -260rem; width:100%; height: 562rem; overflow: hidden;} /* 신청하기 페이지 */
.sub-top-vis-area.apply-page .page-tit-area {padding-top: 220rem; text-align: center;}
.sub-top-vis-area.apply-page .page-tit-area .page-tit {position:relative; overflow: hidden;}
.sub-top-vis-area.apply-page .page-tit-area .page-tit .for-move {position:relative; display: inline-block; transform: translateY(100%); transition: 1s transform cubic-bezier(0.62, 0, 0.43, 1); transition-delay: .5s;}
.sub-top-vis-area.apply-page .page-tit-area .apply-step-w {margin-top: 36rem;}

.sub-top-vis-area.apply-page .img-area {position: absolute; left: 0; top:0; width:100%;}
.sub-top-vis-area.apply-page .img-area .gray-bg {height: 562rem; background-color: #F5F6F7; clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%); transition: .8s clip-path cubic-bezier(0.62, 0, 0.43, 1);}
.sub-top-vis-area.apply-page .img-area .graphic-item-w {position: absolute; left: 0; top:0; width:100%; height: 100%;}
.sub-top-vis-area.apply-page .img-area .graphic-item-w .item {position: absolute;}
.sub-top-vis-area.apply-page .img-area .graphic-item-w .item img {width: 100%;}
.sub-top-vis-area.apply-page .img-area .graphic-item-w .item:nth-child(1) {left: -390rem; top: 190rem; margin-top: 200rem; margin-left: -200rem; width:743rem; height: 663rem; opacity:0; transition: 1s left cubic-bezier(0.62, 0, 0.43, 1), 1s top cubic-bezier(0.62, 0, 0.43, 1), 1s margin-left cubic-bezier(0.62, 0, 0.43, 1) 0.5s, 1s margin-top cubic-bezier(0.62, 0, 0.43, 1) 0.5s, 1s opacity cubic-bezier(0.62, 0, 0.43, 1) 0.5s;}
.sub-top-vis-area.apply-page .img-area .graphic-item-w .item:nth-child(2) {right: -325rem; top: 35rem; margin-top: -110rem; margin-right: -200rem; width:1099rem; height: 762rem; opacity:0; transition: 1s top cubic-bezier(0.62, 0, 0.43, 1), 1s margin-right cubic-bezier(0.62, 0, 0.43, 1) .5s, 1s margin-top cubic-bezier(0.62, 0, 0.43, 1) .5s, 1s opacity cubic-bezier(0.62, 0, 0.43, 1) .5s; background: url("/common/images/icon-graphic-sub-apply-kv-02.png") center/cover no-repeat; z-index:1;}
.sub-top-vis-area.apply-page.init-active .page-tit-area .page-tit .for-move {transform: translateY(0);}
.sub-top-vis-area.apply-page.init-active .page-tit-area .apply-step-w .for-move {top: 0; opacity:1;}
.sub-top-vis-area.apply-page.init-active .img-area .gray-bg {clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);} /* 첫 진입 시 */
.sub-top-vis-area.apply-page.init-active .img-area .graphic-item-w .item:nth-child(1) {margin-top: 0; margin-left: 0; opacity:1;}
.sub-top-vis-area.apply-page.init-active .img-area .graphic-item-w .item:nth-child(2) {margin-top: 0; margin-right: 0; opacity:1;}
.sub-top-vis-area.apply-page.edu-biz .img-area .graphic-item-w .item:nth-child(1) {background: url("/common/images/icon-graphic-sub-edu-apply-kv-01.png") center/cover no-repeat;}
.sub-top-vis-area.apply-page.edu-biz .img-area .graphic-item-w .item:nth-child(2) {background: url("/common/images/icon-graphic-sub-edu-apply-kv-02.png") center/cover no-repeat;}
.sub-top-vis-area.apply-page.consult-biz .img-area .graphic-item-w .item:nth-child(1) {background: url("/common/images/icon-graphic-sub-consult-apply-kv-01.png") center/cover no-repeat;}
.sub-top-vis-area.apply-page.consult-biz .img-area .graphic-item-w .item:nth-child(2) {background: url("/common/images/icon-graphic-sub-consult-apply-kv-02.png") center/cover no-repeat;}
.sub-top-vis-area.apply-page.coexisting-biz .img-area .graphic-item-w .item:nth-child(1) {background: url("/common/images/icon-graphic-sub-coexisting-apply-kv-01.png") center/cover no-repeat;}
.sub-top-vis-area.apply-page.coexisting-biz .img-area .graphic-item-w .item:nth-child(2) {background: url("/common/images/icon-graphic-sub-coexisting-apply-kv-02.png") center/cover no-repeat;}
          /* 재단정보 > 재단소개 > 오시는길 */
.sub-top-vis-area.map-page .map-area {display: flex; justify-content: flex-end; margin-top: 120rem; clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%); transition: 1s clip-path cubic-bezier(0.62, 0, 0.43, 1); overflow: hidden;}
.sub-top-vis-area.map-page .map-area .map-div {position:relative; left: 100rem; width:1093rem; height: 100%; transition: 1s clip-path cubic-bezier(0.62, 0, 0.43, 1), 1s left cubic-bezier(0.62, 0, 0.43, 1);}
.sub-top-vis-area.map-page .map-area .map-div * {max-width: 100%;}
.sub-top-vis-area.map-page .map-area .map-div img {width: 100%; height: 100%; object-fit: cover; max-width: unset;}
.sub-top-vis-area.map-page.init-active .map-area {clip-path: polygon(507rem 0%, 100% 0%, 100% 100%, 507rem 100%);}
.sub-top-vis-area.map-page.init-active .map-area .map-div {left: 0;}

@media all and (max-width: 1023px) {
 /* 2024-05-23 수정 s */
  .inner .sub-top-vis-area {margin-bottom: 24rem;}
  .sub-top-vis-area {margin-bottom: 32rem; width: 100%;}
  .sub-top-vis-area .page-tit-area {width: -webkit-calc(100% - 40rem); width: calc(100% - 40rem); margin: 0 auto;}
  .sub-top-vis-area .page-tit-area .page-tit {font-size: 28rem; line-height: 150%; letter-spacing: -.04em;}
  .sub-top-vis-area.basic-page {margin-top: 250rem; margin-bottom: 48rem;}
  .sub-top-vis-area.basic-page.scroll-down .page-tit-area .page-tit{margin-left: 0;}
  .sub-top-vis-area.basic-page .img-area {margin-top: -147rem; width: 100%; height: 200rem; clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%); transition: clip-path .8s cubic-bezier(0.62, 0, 0.43, 1), margin-top .8s cubic-bezier(0.62, 0, 0.43, 1);}
  .sub-top-vis-area.basic-page .img-area .img {position: absolute; left: 0; right: 0; bottom: 0; width: 100vw; height: 200rem;}
  .sub-top-vis-area.basic-page .page-tit-area {width: 100%; }
  .sub-top-vis-area.basic-page .page-tit-area .page-tit {left: 20rem;}
  .sub-top-vis-area.basic-page.init-active .img-area {clip-path: polygon(200rem 0%, 100% 0%, 100% 100%, 200rem 100%);}
  .sub-top-vis-area.basic-page.scroll-down .img-area {height: 200rem; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
  /* //2024-05-23 수정 e */

  .sub-top-vis-area.apply-page {margin-top: -120rem; height: 309rem;} /* 신청하기 페이지 */
  .sub-top-vis-area.apply-page .page-tit-area {padding-top: 120rem;}
  .sub-top-vis-area.apply-page .page-tit-area .page-tit .for-move {transition-delay: 0.2s;}
  .sub-top-vis-area.apply-page .page-tit-area .apply-step-w {margin-top: 24rem;}
  .sub-top-vis-area.apply-page .page-tit-area .apply-step-w .for-move {transition-delay: 0.3s;}
  .sub-top-vis-area.apply-page .img-area .gray-bg {height: 309rem;}
  .sub-top-vis-area.apply-page .img-area .graphic-item-w {display: none;}

          /* 재단정보 > 재단소개 > 오시는길 */
  .sub-top-vis-area.map-page {margin-bottom: 48rem;}
  .sub-top-vis-area.map-page .map-area {height: 194rem; margin-top: 48rem; clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);}
  .sub-top-vis-area.map-page .map-area .map-div {width: 100%;}
  .sub-top-vis-area.map-page.init-active .map-area {clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)}
}
/* --------------------------------------------- Sub Top Visual - END  --------------------------------------------- */





/* --------------------------------------------- Sub Layout - START --------------------------------------------- */
.scroll-motion .for-motion {position:relative; top: 100rem; opacity: 0; transition: 1s top cubic-bezier(0.62, 0, 0.43, 1), 1s opacity cubic-bezier(0.62, 0, 0.43, 1);}
.scroll-motion.active .for-motion {top: 0; opacity: 1;}

.divide-con-area {position:relative; margin: 0 auto; width: 1600rem;}
.divide-con-area .right-con-area {margin-left: 507rem; width: 1093rem;}
.divide-con-area .right-con-area .scroll-motion:first-child .for-motion {transition-delay: .2s;}

.guide-info-area {margin: 40rem 0;}
.guide-info-area.wide-mg {margin: 80rem 0;}
.guide-info-area .for-motion, .guide-info-area:not(:has(.for-motion)) {display: flex; justify-content: space-between;}
.guide-info-area .for-motion .divide-box:first-child, .guide-info-area:not(:has(.for-motion)) .divide-box:first-child {padding-right: 15rem;}
.guide-info-area:last-child {margin-bottom: 0;}
.guide-info-area .divide-box > .btn-wrap + .exclamation-txt {margin-top: 24rem;} /* 버튼 하단에 정보문구 올 경우 */

.cont-sec-w .cont-sec {position: relative; margin-top: 120rem;}
.cont-sec-w .cont-sec.s-margin {margin-top: 96rem;} /* margin이 기본보다 작은 값일 때 추가 */
.cont-sec .for-motion {position: relative;}
.cont-sec .for-motion:before {content: ''; display:block; position: absolute; left: 0; top:-61rem; width:100%; height: 1px; background-color: #D9DDE0;}
.cont-sec-w:not(:has(.cont-sec > .for-motion)) .cont-sec:before {content: ''; display:block; position: absolute; left: 0; top:-61rem; width:100%; height: 1px; background-color: #D9DDE0;}
.cont-sec .sec-tit-area {position:relative; display: flex; justify-content: space-between; align-items: flex-start;}
.cont-sec .sec-tit-area:has(.noti-txt) {display: block;}
.cont-sec .sec-tit-area .noti-txt {margin-top: 16rem;}
.cont-sec .sec-tit-area .txt {margin-top: 16rem;}
.cont-sec .sec-tit-area .article-total-count{width:auto;}
.cont-sec .sec-tit-area .gray-txt {color: #9CA1A6;}
.cont-sec .sec-tit-area .gray-txt .key-txt {color: #06161E;}
.cont-sec .sec-tit-area .box-label {margin-right:16rem}
.cont-sec .sec-tit-area .tooltip-wrap + .box-label {margin-left: 15rem;}
.cont-sec .sec-con-area .sub-title {font-family: "Pretendard_SemiBold", sans-serif; font-size: max(18rem, 16px); line-height: 155%; letter-spacing: -0.36rem;}
.cont-sec .sec-con-area .inner-title {margin-bottom: 27rem;}
.cont-sec .sec-con-area .data-enter-form {margin-top: 40rem;}
/* .cont-sec .sec-con-area .data-enter-form .td .data-line-w .data-line .f-body2{color: #06161e;} */
.cont-sec .sec-con-area .paragraph {margin-top: 16rem;}
.cont-sec .sec-con-area .paragraph:first-child {margin-top: 0;}
.cont-sec .sec-con-area .paragraph-sec + .inner-con-box{margin-top:60rem;}
.cont-sec .sec-con-area .paragraph-sec + form{margin-top:60rem;}
.cont-sec .sec-con-area .img-area {margin-top: 40rem;}
.cont-sec .sec-con-area .img-area .img img {width:100%;}
.cont-sec .sec-con-area .img-sec {margin-top: 24rem;}
.cont-sec .sec-con-area .img-sec .img img {width:100%;}
.cont-sec .sec-con-area .img-sec .img.bdr {border: 1px solid #ECEEEF; border-radius: 2px; overflow: hidden;}
.cont-sec .sec-con-area .txt-sec {margin-top: 24rem;}
.cont-sec .sec-con-area .txt-sec .paragraph + .ul-txt-w {margin-top: 16rem;}
.cont-sec .sec-con-area .txt-sec .tit-txt-wrap .tit-txt-div{display:flex; align-items: center; margin-top:8rem;} 
.cont-sec .sec-con-area .txt-sec .tit-txt-wrap .tit-txt-div:first-child{margin-top:0;}
.cont-sec .sec-con-area .txt-sec .tit-txt-wrap .tit-txt-div .tit{margin-right:12rem;}
.cont-sec .sec-con-area .txt-sec .tit-txt-wrap .f-caption2{margin-top:16rem;}
.cont-sec .sec-con-area .info-sec {margin-top: 24rem;}
.cont-sec .sec-con-area .btn-sec {margin-top: 24rem;}
.cont-sec .sec-con-area .table-sec {margin-top: 40rem;}
.cont-sec .sec-con-area .article-sec {margin-top: 40rem;}
.cont-sec .sec-con-area .box-btn-area {margin-top: 40rem;}
.cont-sec .sec-con-area .guide-step-w + .box-btn-area {margin-top: 24rem;}
.cont-sec .sec-con-area .graphic-sec {margin-top: 40rem;}
.cont-sec .sec-con-area .graphic-sec-box {display:flex; justify-content: space-between;}
.cont-sec .sec-con-area .graphic-sec-box  .graphic-sec{width:517rem;}
.cont-sec .sec-con-area .list-sec {margin-top: 40rem;}
.cont-sec .sec-con-area .list-sec .btn-wrap {margin-top: 40rem;}
.cont-sec .sec-con-area .divide-flex-box {margin-top: 40rem;}
.cont-sec .sec-con-area .divide-flex-box.narrow-mt {margin-top: 24rem;}
.cont-sec .sec-con-area .divide-flex-box .f-caption2 {margin-top: 6rem;}
.cont-sec .sec-con-area .divide-flex-box .f-caption2:first-child {margin-top:0;}
.cont-sec .sec-con-area .category-list-w {display: grid; grid-template-columns: repeat(5, 167rem); gap: 8rem; margin-top: 24rem;}
.cont-sec .sec-con-area .category-list-w .category-list {display: flex; align-items: center; justify-content: center; width: 167rem; height: 167rem; background-color: #F5F6F7;}
.cont-sec .sec-con-area .category-list-w .category-list span {font-family: "Pretendard_Medium", sans-serif; color: #06161E; line-height: 160%; text-align: center;}
.cont-sec .sec-con-area .video-sec .video {width: 100%; height: 600rem;}
.cont-sec .sec-con-area .video-sec .video iframe {width: 100%; height: 100%;}
.cont-sec .grid-list-w {display: grid; grid-template-columns: repeat(2, 1fr); gap: 40rem; margin-top: 24rem;}
.cont-sec:first-child {margin-top: 0;}
.cont-sec:first-child .for-motion:before {display: none;}
.cont-sec-w:not(:has(.cont-sec > .for-motion)) .cont-sec:first-child:before {display: none;}
.cont-sec.no-border .for-motion:before {display: none;}
.cont-sec.no-border::before {display: none !important;}
@media all and (max-width: 1023px) {
  .divide-con-area {padding: 0 20rem; width: 100%;}
  .divide-con-area .right-con-area {margin-left: 0; width: 100%;}

  .guide-info-area {margin: 24rem 0;}
  .guide-info-area.wide-mg {margin: 40rem 0;}
  .guide-info-area .for-motion, .guide-info-area:not(:has(.for-motion)) {display:block;}
  .guide-info-area .divide-box + .divide-box {margin-top: 16rem; display: flex; justify-content: flex-end;}
  .guide-info-area .divide-box > .btn-wrap + .exclamation-txt {margin-top: 16rem;} /* 버튼 하단에 정보문구 올 경우 */
  .guide-info-area .for-motion .divide-box:first-child, .guide-info-area:not(:has(.for-motion)) .divide-box:first-child {padding-right: 0;}
  
  .cont-sec-w .cont-sec {margin-top: 104rem;}
  .cont-sec-w .cont-sec.s-margin {margin-top: 48rem;} /* margin이 기본보다 작은 값일 때 추가 */
  .cont-sec-w .cont-sec:first-child {margin-top: 0;}
  .cont-sec .for-motion:before {top:-57rem; left: -20rem; width: 100vw; height: 8rem; background-color: #F5F6F7;}
  .cont-sec-w:not(:has(.cont-sec > .for-motion)) .cont-sec:before {top:-57rem; left: -20rem; width: 100vw; height: 8rem; background-color: #F5F6F7;}
  .cont-sec .sec-tit-area:not(.non-block) {display: block;}/* non-block: pc/mobile 둘다 flex */
  .cont-sec .sec-tit-area .f-caption1 {margin-top: 8rem;}
  .cont-sec .sec-tit-area .noti-txt {margin-top: 8rem;}
  .cont-sec .sec-tit-area:not(.non-block) .btn-wrap {margin-top: 16rem;}
  .cont-sec .sec-tit-area .box-label{margin-right:8rem}
  .cont-sec .sec-tit-area .tooltip-wrap + .box-label {margin-left: 5rem;} /* 2024-08-14 추가 */
  .cont-sec .sec-con-area .inner-title {margin-bottom: 16rem;}
  .cont-sec .sec-con-area .inner-title .f-title2 {font-family: "Pretendard_Bold", sans-serif;}
  .cont-sec .sec-con-area .sub-title {font-size: 15rem; line-height: 170%; letter-spacing: -0.3rem;}
  .cont-sec .sec-con-area .data-enter-form {margin-top: 32rem;}
  .cont-sec .sec-con-area .data-enter-form.add-data {margin-top: 16rem;}
  .cont-sec .sec-con-area .data-enter-form:has(.row:first-child > .form-checkbox)  {margin-top: 24rem;} /* 첫 row 부분이 form-checkbox면 마진 값 변경 */
  .cont-sec .sec-con-area .data-enter-form .row:first-child:has( > .form-checkbox) + .row {margin-top: 32rem;}
  .cont-sec .sec-con-area .paragraph {margin-top: 8rem;}
  .cont-sec .sec-con-area .paragraph-sec + .inner-con-box{margin-top:48rem;}
  .cont-sec .sec-con-area .paragraph-sec + form{margin-top:48rem;}
  .cont-sec .sec-con-area .img-area {margin-top: 24rem;}
  .cont-sec .sec-con-area .img-area .img {height: 240rem;}
  .cont-sec .sec-con-area .img-area .img img {height: 100%; object-fit: cover;}
  .cont-sec .sec-con-area .txt-sec {margin-top: 16rem;}
  .cont-sec .sec-con-area .txt-sec .tit-txt-wrap .tit-txt-div{margin-top:6rem;}
  .cont-sec .sec-con-area .txt-sec .tit-txt-wrap .f-caption2{margin-top:12rem;}
  .cont-sec .sec-con-area .info-sec {margin-top: 16rem;}
  .cont-sec .sec-con-area .article-sec {margin-top: 24rem;}
  .cont-sec .sec-con-area .table-sec {margin-top: 24rem;}
  .cont-sec .sec-con-area .box-btn-area {margin-top: 16rem;}
  .cont-sec .sec-con-area .guide-step-w + .box-btn-area {margin-top: 32rem;}
  .cont-sec .sec-con-area .graphic-sec-box{flex-wrap:wrap;}
  .cont-sec .sec-con-area .graphic-sec {margin-top: 24rem;}
  .cont-sec .sec-con-area .list-sec {margin-top: 16rem;}
  .cont-sec .sec-con-area .list-sec .btn-wrap {margin-top: 48rem;}
  .cont-sec .sec-con-area .divide-flex-box {margin-top: 24rem;}
  .cont-sec .sec-con-area .divide-flex-box .f-caption2 {margin-top: 4rem;}
  .cont-sec .sec-con-area .category-list-w {grid-template-columns: repeat(5, 120rem); margin-top: 12rem;}
  .cont-sec .sec-con-area .category-list-w .category-list {padding: 8rem; width: 120rem; height: 120rem;}
  .cont-sec .sec-con-area .category-list-w .category-list span {font-size: 13rem;}
  .cont-sec .sec-con-area .video-sec .video {height: 400rem;}
  .cont-sec .grid-list-w {gap: 20rem; margin-top: 24rem;}
  .cont-sec.no-border {margin-top: 96rem;}
}
@media all and (max-width: 599px) {
  .cont-sec .sec-con-area .category-list-w {grid-template-columns: repeat(3, 1fr); gap: 8rem;}
  .cont-sec .sec-con-area .category-list-w:has(.category-list:nth-child(4)) {grid-template-columns: repeat(4, 1fr); gap: 5rem;}
  .cont-sec .sec-con-area .category-list-w .category-list {position: relative; width: 100%; height: auto;}
  .cont-sec .sec-con-area .category-list-w .category-list:after {content: ""; display: block; padding-bottom: 100%;}
  .cont-sec .sec-con-area .category-list-w .category-list span {position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}


  .cont-sec .sec-con-area .img-sec .img.slogan {height: 213rem;}
  .cont-sec .sec-con-area .img-sec .img.slogan img {height: 100%; object-fit: cover;}
  .cont-sec .sec-con-area .video-sec .video {height: 192rem;}
  .cont-sec .grid-list-w {grid-template-columns: repeat(1, 1fr); gap: 48rem; margin-top: 24rem;}
}
/* --------------------------------------------- Sub Layout - END --------------------------------------------- */





/* --------------------------------------------- 교육/세미나 - START --------------------------------------------- */
.training-sec {margin-top: 120rem;}
.training-list-w .for-motion {position:relative;}
.training-sec .training-list-w + .training-list-w {margin-top: 120rem;}
.training-sec .training-swiper-area {margin-top: 32rem;}
.training-sec .training-swiper-area .swiper-wrapper {transition-timing-function: linear !important;}
.training-sec .training-swiper-area .swiper-button-prev {top: -88rem;}
.training-sec .training-swiper-area .swiper-button-next {top: -88rem;}
.training-swiper-area {position: relative;}
.training-swiper-area .swiper-button-prev {top: 0; left: auto; right: 58rem; margin-top: 0;}
.training-swiper-area .swiper-button-next {top: 0; left: auto; right: 0; margin-top: 0;}
.training-swiper-area .swiper-slide {position:relative; overflow: hidden; margin-right: 40rem; width: 337rem;}
.training-swiper-area .swiper-slide:first-child {margin-left: 40rem;}
.training-swiper-area .swiper-slide:last-child {margin-right: 0;}
.training-swiper-area .swiper-slide:hover .hover-area {opacity:1;}
.training-swiper-area .swiper-slide:hover .hover-area .for-position {top:0; opacity:1;}
.training-swiper-area.swiper-role .swiper-slide:first-child {margin-left: 0;} /* swiper ver */
.sec-con-area > .training-swiper-area {margin-top: 43rem;}
.sec-con-area > .training-swiper-area + .training-swiper-area {margin-top: 64rem;}
.main-inner .training-swiper-area {min-height: 465rem;}

              /* slide 내부 스타일 */
.training-swiper-area .swiper-slide .img-area {position:relative; height: 210rem; margin-top: 0; border-radius: 2px; overflow: hidden; background: #ECEEEF url("/common/images/icon-logo-gray.svg") center/143rem no-repeat;}
.training-swiper-area .swiper-slide .img-area img {width:100%; height:100%; object-fit: cover;}
.training-swiper-area .txt-area {display: flex; flex-direction: column; justify-content: space-between; padding: 24rem 0;}
.training-swiper-area .txt-area .top-label-area {margin-bottom: 8rem;}
.training-swiper-area .txt-area .sort-label-area {margin-bottom: 12rem; flex-wrap: wrap;}
.training-swiper-area .training-name {width: 100%; height: max(72rem, 55px); font-family: "Pretendard_SemiBold", sans-serif; color: #06161E; font-size: max(24rem, 18px); line-height: 150%; letter-spacing: -0.48rem; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.training-swiper-area .date-info-w {margin-top: 4rem;}
.training-swiper-area .date-info-w .list {display: flex;}
.training-swiper-area .date-info-w .list .txt {position:relative; top: 1rem; margin-right: 8rem; color: #9CA1A6; font-size: max(14rem, 13px); line-height: 170%; letter-spacing: -0.28rem;}
.training-swiper-area .date-info-w .list .date {color: #06161E; font-size: max(14rem, 13px); line-height: 170%; letter-spacing: -0.28rem;}
.training-swiper-area .date-info-w .list .date .item {position:relative;}
.training-swiper-area .date-info-w .list .date .item + .item {margin-left: 11rem;}
.training-swiper-area .date-info-w .list .date .item::after {content: ''; display: block; position: absolute; right: -7rem; top: 7rem; width: 3rem; height: 3rem; border-radius: 50%; background-color: #C6CCD1;}
.training-swiper-area .date-info-w .list .date .item:last-child:after {display: none;}
.training-swiper-area .status-info-w {flex-wrap: wrap; align-items: center; margin-top: 16rem;}
.training-swiper-area .status-info-w .box-label {max-width: 100%;}
.training-swiper-area .status-info-w .box-label span{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

            /* hover시 노출되는 영역 */
.training-swiper-area .hover-area {position: absolute; left: 0; top:0; width:100%; height: 100%; background-color: #F5F6F7; opacity: 0; transition: .5s opacity ease; /* display: none !important; */}
.training-swiper-area .hover-area .sort-label-area {margin-bottom: 6rem;}
.training-swiper-area .hover-area .training-name {margin-bottom: 16rem; font-family: "Pretendard_Bold", sans-serif; color: #06161E; font-size: max(24rem, 18px); line-height: 150%; letter-spacing: -0.48rem;}
.training-swiper-area .hover-area .for-position {position:relative; top: 50rem; padding: 24rem; height: 100%; opacity: 0; transition: .6s top ease, .6s opacity ease;}
.training-swiper-area .hover-area .date-info-w {display:block; margin-top: 0; padding-top: 17rem; background: url("/common/images/icon-dash-border.png") 0 0/8px 1px repeat-x;}
.training-swiper-area .hover-area .date-info-w .list {display: flex; align-items: flex-start; margin-top: 12rem;}
.training-swiper-area .hover-area .date-info-w .list:first-child {margin-top: 0;}
.training-swiper-area .hover-area .date-info-w .list .tit {position:relative; top: 1rem; padding-right: 6rem; width: 54rem; color: #697278; font-size: max(14rem, 13px); line-height: 170%; letter-spacing: -0.28rem;}
.training-swiper-area .hover-area .date-info-w .list .txt {margin-right: 0; width:calc(100% - 54rem); font-family: "Pretendard_Regular", sans-serif; color: #06161E; font-size: max(14rem, 13px); line-height: 170%; letter-spacing: -0.28rem;}
.training-swiper-area .hover-area .status-info-w {margin-top: 18rem;}
.training-swiper-area .hover-area .btn-wrap {position: absolute; left: 24rem; bottom:24rem;}

          /* online 교육 */
.training-list-w.online .training-swiper-area .swiper-slide .img-area::before {content: ''; display:block; position: absolute; left: 0; bottom:0; width:100%; height: 80rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(0, 0, 0, 0.20) 100%);} /* 온라인 */
.training-list-w.online .training-swiper-area .swiper-slide .img-area::after {content: ''; display:block; position: absolute; left: 12rem; bottom: 12rem; width: 48rem; height: 48rem; background: url("/common/images/icon-video-play.svg") center/48rem no-repeat;}

          /* 리스트 형식 교육 목록 */
#wrap:not(.main) .training-swiper-area:not(.swiper-role) .swiper-wrapper {display: grid; row-gap: 41rem; column-gap: 41rem; grid-template-columns: 1fr 1fr 1fr;}
#wrap:not(.main) .training-swiper-area:not(.swiper-role) .swiper-slide {margin-right: 0;}
#wrap:not(.main) .training-swiper-area:not(.swiper-role) .swiper-slide:first-child {margin-left: 0;}
#wrap:not(.main) .training-swiper-area:not(.swiper-role) .date-info-w .list .date {margin: 0;}

@media all and (max-width: 1600px) {
  .training-swiper-area .swiper-slide{min-height: max(580rem, 415px);}
}

@media all and (max-width: 1023px) {
  .training-sec {margin-top: 0;}
  .training-sec .training-list-w + .training-list-w {margin-top: 48rem;}
  .training-sec .training-swiper-area {position:relative; left: -20rem; margin-top: 16rem; width: 100vw;}
  .training-sec .training-swiper-area .swiper-slide {width: 330rem;}
  .training-swiper-area .swiper-button-prev {display: none;}
  .training-swiper-area .swiper-button-next {display: none;}
  .training-swiper-area .swiper-slide {margin-right: 10rem; width: 170rem; min-height:0;}
  .training-swiper-area .swiper-slide:first-child {margin-left: 10rem;}
  .training-swiper-area .swiper-slide .status-info-w .status-txt {font-size: 12rem; line-height: 160%; letter-spacing: -0.24rem;}
  .main-inner .training-swiper-area {min-height: 375rem;}

              /* slide 내부 스타일 */
  .training-swiper-area .swiper-slide .img-area {height: 206rem; background-size: 76rem;}
  .training-swiper-area .swiper-slide .txt-area {padding: 12rem 0;}
  .training-swiper-area .training-name {/* height: 54rem; */ height: auto; font-size: 17rem; line-height: 160%; -webkit-line-clamp: 1;}
  .training-swiper-area .txt-area .sort-label-area {margin-bottom: 6rem;}
  .training-swiper-area .sort-info-w .training-name {height: 54rem; font-size: 15rem; line-height: 170%; letter-spacing: -0.3rem;}
  .training-swiper-area .date-info-w {display:block; margin-top: 12rem;}
  .training-swiper-area .date-info-w .list {display: flex;}
  .training-swiper-area .date-info-w .list .txt {display: inline; top: 0; margin-right: 3rem; font-size: 12rem; line-height: 160%; color: #697278;}
  .training-swiper-area .date-info-w .list .date {display: flex; font-size: 12rem; line-height: 160%;}
  .training-swiper-area .date-info-w .list .date .item:last-child {display: block;}
  .training-swiper-area .status-info-w {flex-wrap: wrap; }
  .training-swiper-area .status-info-w .box-label {display: flex;}

              /* hover시 노출되는 영역 */
  .training-swiper-area .hover-area {display: none;}

  .training-list-w:first-child .for-motion {margin-top: 48rem; padding-top: 56rem;}
  .training-list-w:first-child .for-motion::before {content: ''; display:block; position: absolute; left: -20rem; top:0; width: 100vw; height: 8rem; background-color: #F5F6F7;}
  .training-list-w.online .training-swiper-area .swiper-slide .img-area::before {height: 35rem;}
  .training-list-w.online .training-swiper-area .swiper-slide .img-area::after {width: 32rem; height: 32rem; left: 6rem; bottom: 6rem; background-size: 100%;}

  .sec-con-area > .training-swiper-area {margin-top: 24rem;}
  .sec-con-area > .training-swiper-area + .training-swiper-area {margin-top: 32rem;}

            /* 리스트 형식 교육 목록 */
  #wrap:not(.main) .training-swiper-area .swiper-container{padding:0 20rem; left:50%; transform:translateX(-50%); width:100vw;}
  #wrap:not(.main) .training-swiper-area .swiper-container .swiper-slide {width: 90%;}
  #wrap:not(.main) .training-swiper-area:not(.swiper-role) .swiper-wrapper {grid-template-columns: 1fr; row-gap: 20rem; column-gap: 0;}
  #wrap:not(.main) .training-swiper-area:not(.swiper-role) .swiper-wrapper .swiper-slide {width: 100%;}
}

            /* 교육/세미나 > 상세 */
.training-view-page .training-list {display: flex;}
.training-view-page .training-list .img-area {width: 350rem; height: 218rem; margin-top: 0; margin-right: 40rem; background: #ECEEEF url("/common/images/icon-logo-gray.svg") no-repeat center center / 130rem auto; border-radius: 2px; overflow: hidden;}
.training-view-page .training-list .img-area img {width: 100%; height: 100%; object-fit: cover;}
.training-view-page .training-list .txt-area {display: flex; align-items: flex-start; flex-direction: column; justify-content: space-between;}
.training-view-page .training-list:has(.img-area) .txt-area {max-width: -webkit-calc(100% - 390rem); max-width: calc(100% - 390rem);}
.training-confirm .training-view-page .training-list:has(.img-area) .txt-area {max-width: -webkit-calc(100% - 208rem); max-width: calc(100% - 208rem);}
.training-view-page .training-list .txt-area .sort-label-area {margin-bottom: 6rem;}
.training-view-page .training-list .txt-area .training-explain-txt {margin-top: 13rem; color: #06161E; font-size: max(14rem, 13px); line-height: 170%; letter-spacing: -0.28rem; word-break: break-all; word-wrap: break-word;}
.training-view-page .training-list .txt-area .top-line {max-width: 100%;}
.training-view-page .training-list .class-property-w {display: flex; flex-wrap:wrap}
.training-view-page .training-list .class-property-w .property-list {display: flex; align-items: center; position: relative; /*min-height: 32rem;*/ margin-right: 20rem; padding-right: 20rem; }
.training-view-page .training-list .class-property-w .property-list:after {content: ''; display: block; position: absolute; right: 0; top: 50%; width: 1px; height: 44rem; margin-top: -22rem; background-color: #ECEEEF;}
.training-view-page .training-list .class-property-w .property-list .txt span {display: inline-block; padding-left: 40rem; font-family: "Pretendard_Medium", sans-serif; color: #06161E; font-size: max(14rem, 13px); line-height: 32rem; letter-spacing: -0.28rem; background-size: 32rem; background-position: left center; background-repeat: no-repeat;}
.training-view-page .training-list .class-property-w .property-list.offline .txt span {background-image: url("/common/images/icon-offline.svg");}/* 집체교육 */
.training-view-page .training-list .class-property-w .property-list.online .txt span {background-image: url("/common/images/icon-online.svg");}/* 온라인교육 */
.training-view-page .training-list .class-property-w .property-list.onoffline .txt span {background-image: url("/common/images/icon-offlineonline.svg");}/* 집체+온라인교육 */
.training-view-page .training-list .class-property-w .property-list.time .txt span {background-image: url("/common/images/icon-time.svg");}/* 학습시간 */
.training-view-page .training-list .class-property-w .property-list.completion .txt span {background-image: url("/common/images/icon-completion.svg");}/* 수료여부 */
.training-view-page .training-list .class-property-w .property-list.education .txt span {background-image: url("/common/images/icon-education.svg");}/* 교육상태 */
.training-view-page .training-list .class-property-w .property-list.non-member .txt span {background-image: url("/common/images/icon-non-member.svg");}/* 비회원 가능 */
.training-view-page .training-list .class-property-w .property-list:last-child {margin-right: 0; padding-right: 0;}
.training-view-page .training-list .class-property-w .property-list:last-child:after {display: none;}

          /* 교육/세미나 > 상세 - 회차정보 */
.index-list-w {margin-top: 40rem;}
/* .index-list-w .no-data-area {margin-top: -32rem;} */
.index-list-w .list-item.available {margin-top: 72rem;}
.index-list-w .list-item {position: relative; margin-top: 40rem; border: 1px solid #D9DDE0;}
.index-list-w .list-item::before {content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background-color: #fff; z-index: 2;}
.index-list-w .list-item:first-child {margin-top: 0;}
.index-list-w .list-item .cont {padding: 40rem;}
.index-list-w .list-item .top-area {display: flex; justify-content: space-between; position: relative; width: 100%;}
.index-list-w .list-item .top-area > * {display: flex; align-items: center;}
.index-list-w .list-item .top-area .left  >* {margin-left:24rem;}
.index-list-w .list-item .top-area .left > *:first-child {margin-left:0;}
.index-list-w .list-item .cont-area > .btn-wrap:first-child {position: absolute; right: 40rem; top: 44rem;}
.index-list-w .list-item .cont-area > .btn-wrap:first-child > button + button {margin-left: 24rem;}
.index-list-w .list-item .cont-area > .btn-wrap .btn-set {column-gap: 24rem;}
.index-list-w .list-item .cont-area .info-list-w {display: flex; flex-wrap: wrap; row-gap: 24rem; margin-top: 53rem; margin-bottom: 24rem; padding-bottom: 24rem; border-bottom: 1px solid #F5F6F7;}
.index-list-w .list-item .cont-area .info-list-w .info-list {width: calc(20% + (24rem / 4)); min-height: 84rem; padding: 0 24rem; border-right: 1px solid #ECEEEF;}
.index-list-w .list-item .cont-area .info-list-w :is(.info-list:first-child, .info-list:nth-child(5n+1)) {width: calc(20% - 24rem); padding-left: 0;}
.index-list-w .list-item .cont-area .info-list-w .info-list:nth-child(5n) {padding-right: 0; border-right: 0;}
.index-list-w .list-item .cont-area .info-list-w .info-list .txt {margin-top: 8rem; color: #06161E;}
.index-list-w .list-item .cont-area .info-list-w .info-list .txt a {text-decoration: underline; text-underline-position: under;}
.index-list-w .list-item .cont-area .btn-wrap .btn-set.v-align-center a:last-child, .btn-wrap .btn-set.v-align-center button:last-child{margin-right:0;}
.index-list-w .list-item .available-label {display: none; position: absolute; left: -1px; bottom: 100%; height: max(34rem, 30px); z-index: 1;}
.index-list-w .list-item .available-label:after {content: ''; display: block; position: absolute; left: 1px; bottom: 2rem; width: 120%; height: 1px; background-color: #fff;}
.index-list-w .list-item .available-label span {position: relative; display: flex; align-items: flex-end; height: 100%; padding-left: 16rem; font-family: "Pretendard_Medium", sans-serif; font-size: max(16rem, 14px); color: #0064FF;}
.index-list-w .list-item .available-label span::before {content: ''; display: block; position: absolute; left: max(78rem, 65px); top: 0px; width: 32rem; height: 100%; background-color: #fff; border: 1px solid #0064FF; border-bottom: 1px solid #fff; border-left: 1px solid #fff; z-index: -1; border-radius: 2px; transform: skew(25deg) translate(30px, 0px);}
.index-list-w .list-item .available-label span::after {content: ''; display: block; position: absolute; left: 0; top: 0; width: 105%; height: 100%; background-color: #fff; border: 1px solid #0064FF; border-bottom: 0; border-right: 0; z-index: -1; border-radius: 2px 0 0 0;}
.index-list-w .list-item:not(.available) .cont > .btn-wrap:last-child .btn-solid {pointer-events: none;}
.index-list-w .list-item.accepting {border: 1px solid #0064FF;} /* available: 신청 가능한 회차, accepting: 접수중 */
.index-list-w .list-item.available .available-label {display: block;} /* available: 신청 가능한 회차, accepting: 접수중 */
.index-list-w:has(.list-item.available) {margin-top: 72rem;}
.index-list-w.divide {display: flex; flex-wrap: wrap; column-gap: 41rem; row-gap: 41rem;}
.index-list-w.divide:has(.list-item) {display: grid; align-items: flex-end; grid-template-columns: 1fr 1fr 1fr; row-gap: 0;}
.index-list-w.divide .list-item {margin-top: 40rem;}
.index-list-w.divide .list-item.available {margin-top: 72rem;}
.index-list-w.divide .list-item:is(:nth-child(1), :nth-child(2), :nth-child(3)) {margin-top: 0}
.index-list-w.divide .status-info-w {flex-wrap: wrap;}
.index-list-w.divide .list-item .cont-area .info-list-w{display:block; margin:35rem 0 40rem; padding-top:32rem; padding-bottom: 0; border-bottom:0; border-top:1px solid #ECEEEF;}
.index-list-w.divide .list-item .cont-area .info-list-w .info-list{margin-top:16rem; min-height:auto; width:100%; padding:0; border-right:0;}
.index-list-w.divide .list-item .cont-area .info-list-w .info-list:first-child {margin-top: 0;}
.index-list-w.divide .list-item .cont-area .btn-wrap{justify-content: flex-end;}
.index-list-w.divide .no-data-area{width:100%;}

        /* 교육/세미나 > 상세 - 학습내용(커리큘럼) */
.curriculum-div {margin-top: 40rem;}
.curriculum-div .day-list {margin-top: 28rem;}
.curriculum-div .day-list:first-child {margin-top: 0;}
.curriculum-div .day-list .tit-area {position: relative;}
.curriculum-div .day-list .tit-area:after {content: ''; display: block; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background-color: #06161E;}
.curriculum-div .day-list .tit-area .tit {display: inline-block; position: relative; padding-right: 32rem; background-color: #fff; z-index: 1;}
.curriculum-div .day-list .con-area {padding-left: 272rem;}
.curriculum-div .day-list .con-area .chapter-list {display: flex; margin-top: 48rem; padding-top: 24rem; border-top: 1px solid #D9DDE0;}
.curriculum-div .day-list .con-area .chapter-list:first-child {margin-top: 0; padding-top: 0; border-top: 0;}
.curriculum-div .day-list .con-area .chapter-list .ul-txt-w {width: 294rem; padding-right: 20rem;}
.curriculum-div .day-list .con-area .chapter-list .chapter-tit {width: 273rem; padding-right: 20rem;}
.curriculum-div .day-list .con-area .chapter-list .method {padding-left: 21rem; color: #06161E; font-size: max(18rem, 16px); line-height: 155%; letter-spacing: -0.36rem; border-left: 1px solid #ECEEEF;}

@media all and (max-width: 1350px) {
  .index-list-w.divide .list-item .top-area .group {display: block;}
  .index-list-w.divide .list-item .top-area .group .index-num {text-align: left;}
  .index-list-w.divide .list-item .top-area .group .status-info-w {margin-left: 0;}
}

@media all and (max-width: 1023px) {
              /* 교육/세미나 > 상세 */
  .training-view-page .training-list {display: block; position: relative;}
  .training-view-page .training-list .img-area {position: relative; left: -20rem; width: 100vw; height: 243rem; margin-right: 0; margin-bottom: 32rem; border-radius: 0;}
  .training-view-page .training-list:has(.img-area) .txt-area {max-width: unset;}
  .training-confirm .training-view-page .training-list:has(.img-area) .txt-area {max-width: unset;}
  .training-view-page .training-list .txt-area .sort-label-area {margin-bottom: 4rem;}
  .training-view-page .training-list .txt-area .training-explain-txt {margin-top: 12rem;}
  .training-view-page .training-list .txt-area .top-line {max-width: 100%;}
  .training-view-page .training-list .class-property-w {margin-top: 32rem; width: 100%;}
  .training-view-page .training-list .class-property-w .property-list {/* width: calc(100% / 3); */ min-height: 24rem; margin-right: 0; padding-left: 10rem; padding-right: 10rem;}
  .training-view-page .training-list .class-property-w .property-list:after {height: 24rem; margin-top: -12rem;}
  .training-view-page .training-list .class-property-w .property-list:first-child {padding-left: 0;}
  .training-view-page .training-list .class-property-w .property-list:last-child {padding-right: 0;}
  .training-view-page .training-list .class-property-w .property-list .txt span {padding-left: 30rem; font-size: 12rem; line-height: 24rem; background-size: 24rem;}

            /* 교육/세미나 > 상세 - 회차정보 */
  .index-list-w {margin-top: 24rem;}
  .index-list-w:has(.list-item.available) {margin-top: 48rem;}
  .index-list-w .list-item {margin-top: 16rem;}
  .index-list-w .list-item.available {margin-top: 48rem;}
  .index-list-w .list-item .cont {padding: 24rem;}
  .index-list-w .list-item .top-area .index-num {font-size: 20rem;}
  .index-list-w .list-item .cont-area > .btn-wrap:first-child {justify-content: flex-start; position: relative; right: auto; top: auto; margin-top: 24rem;}
  .index-list-w .list-item .cont-area .info-list-w {display: block; margin-top: 16rem; margin-bottom: 20rem; padding-bottom: 20rem;}
  .index-list-w .list-item .cont-area .info-list-w .info-list {display: flex; align-items: flex-start; width: 100%; min-height: auto; margin-right: 0; margin-top: 4rem; padding: 0; border-right: none;}
  .index-list-w .list-item .cont-area .info-list-w :is(.info-list:first-child, .info-list:nth-child(5n+1)) {width: 100%;}
  .index-list-w .list-item .cont-area .info-list-w .info-list .tit {flex-shrink: 0; margin-right: 4rem; /* width: 44rem; */}
  .index-list-w .list-item .cont-area .info-list-w .info-list .txt {margin-top: 0; width: 100%; text-align: right;}
  .index-list-w .list-item .cont-area .info-list-w + .btn-wrap .btn-solid{margin-top:0;}
  .index-list-w .list-item .cont-area > .btn-wrap .btn-set {column-gap: 12rem;}
  .index-list-w .list-item .available-label {top: -31rem; height: 31rem;}
  .index-list-w .list-item .available-label:after {bottom:0;}
  .index-list-w .list-item .available-label span {padding-left: 12rem; font-size: 13rem; line-height: 15rem;}
  .index-list-w .list-item .available-label span::before {left: 56%; height: 30rem;}
  .index-list-w.divide, .index-list-w.divide:has(.list-item) {display: block;}
  .index-list-w.divide .list-item {margin-top: 16rem !important; width:100%;}
  .index-list-w.divide .list-item.available {margin-top: 46rem !important;}
  .index-list-w.divide .list-item .cont-area .info-list-w{margin:20rem 0 48rem; padding-top: 20rem;}
  .index-list-w.divide .list-item .cont-area .info-list-w .info-list {margin-top: 4rem;}
  .index-list-w.divide .list-item .top-area .group {display: flex;}
  .index-list-w.divide .list-item .top-area .group .status-info-w {margin-left: 8rem;}

          /* 교육/세미나 > 상세 - 학습내용(커리큘럼) */
  .curriculum-div {}
  .curriculum-div .day-list {margin-top: 32rem;}
  .curriculum-div .day-list .con-area {padding-left: 61rem;}
  .curriculum-div .day-list .tit-area .tit {padding-right: 24rem; font-family: "Pretendard_Bold", sans-serif;}
  .curriculum-div .day-list .con-area .chapter-list {display: block; margin-top: 24rem; padding-top: 12rem;}
  .curriculum-div .day-list .con-area .chapter-list .ul-txt-w {margin-top: 8rem;}
  .curriculum-div .day-list .con-area .chapter-list .method {margin-top: 12rem; padding-left: 0; padding-top: 12rem; font-size: 14rem; border-left: 0; border-top: 1px solid #ECEEEF;}
}

        /* 교육/세미나 > 교육신청 */
.index-list-w .training-confirm:first-child {margin-top: 0;}
.training-confirm {margin-top: 40rem;}
.training-confirm .top-info {position: relative; padding: 40rem 40rem 32rem; border: 1px solid #D9DDE0; border-radius: 2px; border-bottom: 0; background: url("/common/images/icon-dash-border.png") left bottom / 8px 1px repeat-x;}
.training-confirm .top-info::before {content: ''; display: block; position: absolute; right: -6rem; bottom: -6rem; width: 10rem; height: 10rem; background-color: #fff; border-left: 1px solid #D9DDE0; border-bottom: 1px solid #D9DDE0; z-index: 1; transform: rotate(45deg);}
.training-confirm .top-info::after {content: ''; display: block; position: absolute; left: -6rem; bottom: -6rem; width: 10rem; height: 10rem; background-color: #fff; border-right: 1px solid #D9DDE0; border-top: 1px solid #D9DDE0; z-index: 1; transform: rotate(45deg);}
.training-confirm .sort-label-area .label span {font-size: max(14rem, 13px);}
.training-confirm .sort-label-area .label + .label:before {top: max(10rem, 9px);}
.training-confirm .training-view-page .training-list .img-area {flex-shrink: 0; width: 184rem; height: 114rem; margin-right: 24rem; background-size: 80rem auto;}
.training-confirm .training-view-page .training-list .txt-area {position:relative; flex-direction: row; align-items: stretch; width: 100%;}
.training-confirm .training-view-page .training-list .txt-area .sort-label-area {margin-bottom: 10rem;}
.training-confirm .training-view-page .training-list .txt-area .top-line {width: calc(75% - 66rem); /*width: 387rem;*/ padding-right: 24rem;} /* 2024-05-17 수정 */
.training-confirm .training-view-page .training-list:not(:has(.img-area)) .txt-area .top-line {flex-shrink: 0; width: calc(75% - 13rem); }
.training-confirm .training-view-page .training-list .txt-area .top-line + * {align-self: flex-start;}
.training-confirm .training-view-page .training-list .top-line + .status-info-w {flex-wrap: wrap; padding-left: 24rem;}
.training-confirm .training-view-page .training-list .top-line + .group {padding-left: 24rem;}
.training-confirm .training-view-page .training-list .txt-area .training-name {word-break: break-all; word-wrap: break-word;}
.training-confirm .training-view-page .training-list .txt-area .training-name a {position: relative; word-break: break-all; word-wrap: break-word;}
.training-confirm .training-view-page .training-list .txt-area .training-name a::after {content: ""; vertical-align: middle; position: relative; top: -2rem; display: inline-block; margin-left: 4rem;  width: 32rem; height: 32rem; background: url("/common/images/icon-arrow-right.svg") no-repeat center center / 100% auto; transition: .3s transform;}
.training-confirm .training-view-page .training-list .txt-area .training-name a:hover::after {transform: translateX(6rem);}
.training-confirm .training-view-page .training-list .txt-area .training-explain-txt {margin-top: 20rem;}
.training-confirm .training-view-page .training-list .class-property-w {display: grid; grid-template-columns: repeat(1, 1fr); width: calc(25% + 66rem); gap: 16rem; padding: 4rem 0 4rem 24rem;}
.training-confirm .training-view-page .training-list .class-property-w .property-list {display: block; margin-right: 0; padding-right: 0;}
.training-confirm .training-view-page .training-list .class-property-w .property-list:after {display: none;}
.training-confirm .training-view-page .training-list .class-property-w .property-list .txt span {padding-left: 32rem; line-height: 24rem; background-size: 24rem;}
        /* 아이템이 4개이상일 때 */
.training-confirm .training-view-page .training-list .class-property-w:has(.property-list:nth-child(4)) {display: grid; grid-template-columns: repeat(2, 1fr);}
.training-confirm .training-view-page .training-list .class-property-w:has(.property-list:nth-child(4)) .property-list:nth-child(1) {grid-column: 1; grid-row: 1;}
.training-confirm .training-view-page .training-list .class-property-w:has(.property-list:nth-child(4)) .property-list:nth-child(2) {grid-column: 1; grid-row: 2;}
.training-confirm .training-view-page .training-list .class-property-w:has(.property-list:nth-child(4)) .property-list:nth-child(3) {grid-column: 1; grid-row: 3;}
.training-confirm .training-view-page .training-list .class-property-w:has(.property-list:nth-child(4)) .property-list:nth-child(4) {grid-column: 2; grid-row: 1;}
.training-confirm .training-view-page .training-list .class-property-w:has(.property-list:nth-child(4)) .property-list:nth-child(5) {grid-column: 2; grid-row: 2;}
.training-confirm .training-view-page .training-list .class-property-w:has(.property-list:nth-child(4)) .property-list:nth-child(6) {grid-column: 2; grid-row: 3;}

.training-confirm .index-list-w {margin-top: 0;}
.training-confirm .index-list-w .list-item {border-top: 0;}
.training-confirm .index-list-w .list-item .top-area > * {margin-left: 24rem;}
.training-confirm .index-list-w .list-item .top-area > *:first-child {margin-left: 0;}
.training-confirm .index-list-w .list-item .top-area .left .index-num {font-size: max(18rem, 16px);}
.training-confirm .index-list-w .list-item .cont {padding-top: 32rem; padding-right: 47rem;}
.training-confirm .index-list-w .list-item .top-area {margin-bottom: 40rem;}
.training-confirm .index-list-w .list-item .cont-area > .btn-wrap:last-child {position: absolute; right: 40rem; top: 35rem;}
.training-confirm .index-list-w .list-item .cont-area > .btn-wrap:last-child > * + * {margin-left: 24rem;}
.training-confirm .index-list-w .list-item .cont:not(:has(.top-area)) .cont-area > .btn-wrap {display: inline-flex; position: unset; margin-top: 32rem;}
.training-confirm .index-list-w .list-item .info-list-w {margin-top: 0; margin-bottom: 0; padding-bottom: 0; border-bottom: 0;}
.training-confirm .index-list-w .list-item .info-list-w .info-list {width: calc(25% + (24rem / 3));}
.training-confirm .index-list-w .list-item .info-list-w .info-list:nth-child(4n) {padding-right: 0; border-right: 0;}
.training-confirm .index-list-w .list-item .info-list-w .info-list:nth-child(5n) {border-right: 1px solid #ECEEEF}
.training-confirm .index-list-w .list-item .info-list-w .info-list:nth-child(5n+1) {width: calc(25% + (24rem / 3)); padding: 0 24rem;}
.training-confirm .index-list-w .list-item .info-list-w :is(.info-list:first-child, .info-list:nth-child(4n+1)) {width: calc(25% - 24rem); padding-left: 0;}
.training-confirm .box-label.bigger {padding: 0 10rem;}
.training-confirm .box-label.bigger span {font-size: max(14rem, 13px);}

@media all and (max-width: 1023px) {
          /* 교육/세미나 > 교육신청 */
  .training-confirm {margin-top: 24rem;}
  .training-confirm .top-info {position: relative; padding: 20rem;}
  .training-confirm .sort-label-area .label span {font-size: 12rem;}
  .training-confirm .sort-label-area .label + .label:before {top: 8rem;}
  .training-confirm .training-view-page .training-list .img-area {position: absolute; left: auto; right: 0; top: 0; width: 80rem; height: 80rem; margin-right: 0; margin-bottom: 0; border-radius: 2px; background-size: 50rem auto;}
  .training-confirm .training-view-page .training-list .img-area img {height: 100%; object-fit: cover;}
  .training-confirm .training-view-page .training-list .txt-area {display: block;}
  .training-confirm .training-view-page .training-list .txt-area .sort-label-area {margin-bottom: 3rem;}
  .training-confirm .training-view-page .training-list .txt-area .group {margin-top: 4rem;}
  .training-confirm .training-view-page .training-list .txt-area .group .status-info-w {margin-top: 0;}
  .training-confirm .training-view-page .training-list .txt-area .top-line {width: 100%; padding-right: 100rem; border-right: 0;}
  .training-confirm .training-view-page .training-list:not(:has(.img-area)) .txt-area .top-line {width: 100%; padding-right: 0;}
  .training-confirm .training-view-page .training-list .top-line + .status-info-w {padding-left: 0;}
  .training-confirm .training-view-page .training-list .top-line + .group {padding-left: 0;}
  .training-confirm .training-view-page .training-list .txt-area .status-info-w {margin-top: 12rem;}
  .training-confirm .training-view-page .training-list .txt-area .training-name a::after {top: -2rem; margin-left: 2rem; width: 24rem; height: 24rem;}
  .training-confirm .training-view-page .training-list .txt-area .training-explain-txt {margin-top: 4rem; font-size: 12rem;}
  .training-confirm .training-view-page .training-list .class-property-w {grid-template-columns: repeat(2, 1fr); gap: 12rem; width: 100%; margin-top: 12rem; padding: 0; padding-right: 78rem;}
  .training-confirm .training-view-page .training-list .class-property-w .property-list {width: 100%; padding: 0;}
  .training-confirm .training-view-page .training-list .class-property-w .property-list .txt span {padding-left: 28rem;}
          /* 아이템이 4개이상일 때 */
  .training-confirm .training-view-page .training-list .class-property-w:has(.property-list:nth-child(4)) {display: grid; grid-template-columns: repeat(2, 1fr);}
  .training-confirm .training-view-page .training-list .class-property-w:has(.property-list:nth-child(4)) :is(.property-list:nth-child(1), .property-list:nth-child(2), .property-list:nth-child(3), .property-list:nth-child(4), .property-list:nth-child(5), .property-list:nth-child(6)) {grid-column: unset; grid-row: unset;}

  .training-confirm .index-list-w .list-item .cont {padding: 20rem;}
  .training-confirm .index-list-w .list-item .top-area {margin-bottom: 15rem;}
  .training-confirm .index-list-w .list-item .top-area .left {justify-content: space-between; width: 100%;}
  .training-confirm .index-list-w .list-item .info-list-w :is(.info-list, .info-list:first-child, .info-list:nth-child(4n+1)) {width: 100%; padding: 0;}
  .training-confirm .index-list-w .list-item .cont-area > .btn-wrap:last-child {justify-content: flex-start; position: relative; right: auto; bottom: auto; top: auto; margin-top: 20rem;}
  .training-confirm .index-list-w .list-item .cont:not(:has(.top-area)) .cont-area > .btn-wrap {margin-top: 20rem;}

  /* .cont-sec .sec-con-area .training-confirm + .btn-sec {margin-top: 16rem;} */
  .training-confirm + .btn-sec .btn-wrap .btn-set {width: 100%;}
  .training-confirm + .btn-sec .btn-wrap .btn-set button {width: calc(50% - 5rem);}
}

        /* 교육/세미나 > 교육신청 - 앵커영역 */
.anchor-btn-w {display: none; position: fixed; left: auto; top: 0; /* top: 100rem; */ width: 1093rem; height: 80rem; background-color: #fff; border-bottom: 1px solid #ECEEEF; z-index: 50;}
.anchor-btn-w .anchor-btn {position: relative; width: 100%;}
.anchor-btn-w .anchor-btn span {font-family: "Pretendard_Medium", sans-serif; color: #06161E; font-size: max(19rem, 17px); line-height: 155%; letter-spacing: -0.38rem;}
.anchor-btn-w .anchor-btn.active span {font-family: "Pretendard_SemiBold", sans-serif; color: #59B7E2;}
.anchor-btn-w .anchor-btn.active:after {content: ''; display: block; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background-color: #59B7E2;}
.anchor-btn-w.show {display: flex;}
@media all and (max-width: 1023px) {
  .anchor-btn-w {left: 0; width: 100vw; height: 60rem;}
  .anchor-btn-w .anchor-btn span {font-size: 15rem;}
}
/* --------------------------------------------- 교육/세미나 - END --------------------------------------------- */





/* --------------------------------------------- 교육신청 필터 filter - START --------------------------------------------- */
/* .outer-fix-btn {position: absolute; right: 0; top: -74rem; z-index: 1;} */
.outer-fix-btn {position: absolute; right: 0; bottom: calc(100% + 24rem); z-index: 1;}

.filter-open-btn {display: flex;}
.filter-open-btn span {padding-right: 40rem; white-space: nowrap; background: url("/common/images/icon-filter-btn.svg") right center / 32rem no-repeat;}
.filter-open-btn span b {display: inline-block; margin-left: 4rem; font-weight: normal;}
.filter-wrap {padding: 60rem 40rem; border: 1px solid #D9DDE0;}
.filter-popup {display: block; width: 1093rem; padding: 60rem 40rem; background-color: #fff; border: 1px solid #D9DDE0; border-top: 0;} /* 2025-02-27 display 수정 */
.filter-popup .for-center .btn-wrap {margin-top: 60rem;}
.filter-popup .filter-con-area .data-enter-form {margin-top: 0;}
.cont-sec-w:has(.filter-popup.opened) .filter-open-btn span {background-image: url("/common/images/icon-close-small.svg")}
@media all and (max-width: 1023px) {
  .outer-fix-btn {bottom: calc(100% + 32rem);}
  .outer-fix-btn .btn-solid.small {min-height: 40rem; padding: 7rem 28rem;}

  .filter-open-btn span {padding-right: 32rem; font-family: "Pretendard_Medium", sans-serif; font-size: 13rem; background: url("/common/images/icon-filter-btn-mobile.svg") right center / 24rem no-repeat;}

  .filter-popup {position: fixed; left: 0; top: 0; width: 100%; height: 100%; padding: 0; background-color: transparent; z-index: 200;}
  .filter-popup .for-flex {display: flex; align-items: flex-end; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; height: 100%; padding: 0; background-color: transparent; z-index: 200;}
  .filter-popup .for-flex .for-center {position: relative; top: 100%; display: flex; flex-direction: column; width: 100%; height: 80%; padding: 56rem 0 0 20rem; background-color: #fff; transform: translate(0, 0);border-radius:7rem 7rem 0 0;}
  .filter-popup .for-flex .for-center .filter-con-area {position: relative; height: 100%; padding-right: 20rem; padding-bottom: 30rem; overflow-y: auto; z-index: 2;}
  .filter-popup .for-flex .for-center .filter-con-area::-webkit-scrollbar {width:8px; background-color: #F5F6F7;}
  .filter-popup .for-flex .for-center .filter-con-area::-webkit-scrollbar-thumb {background-color: #C6CCD1;}
  .filter-popup .for-flex .for-center .filter-con-area::-webkit-scrollbar-track {width:8px;}
  .filter-popup .for-center .btn-wrap {position: relative; width: 100vw; margin-left: -20rem; margin-top: 0; margin-bottom: 0; padding: 16rem 20rem 32rem; border-top: 1px solid #ECEEEF;}
  .filter-popup .for-center .btn-wrap::before {content: ''; display: block; position: absolute; left: 0; top: -40rem; width: 100%; height: 40rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(0, 0, 0, 0.04) 100%); z-index: 1;}  
  .filter-popup .for-center .btn-wrap .btn-role-close {position: fixed; right: 20rem; top: 16rem; min-height: 32rem; padding: 0; background-color: transparent;}
  .filter-popup .for-center .btn-wrap .btn-role-close span {padding-right: 32rem; font-size: 14rem; line-height: 32rem; background: url("/common/images/icon-close-small.svg") right center / 32rem no-repeat;}
  .filter-popup .for-center .form-input.w-longer{width: 100%;}
  .filter-popup .for-center .opt-group {grid-template-columns: 1fr 1fr;}
  .cont-sec .sec-con-area .filter-popup .data-enter-form {margin-top: 24rem;}
}
/* --------------------------------------------- 교육신청 필터 filter - END --------------------------------------------- */





/* --------------------------------------------- list - START --------------------------------------------- */
/* 리스트 정보 */
        /* 총 수 */
.article-total-count {/*width: 104rem;*/ color: #B2B8BD;}
.article-total-count span {color: #06161E;}

        /* info-head */
.info-head {display: flex; justify-content: space-between; align-items: center; position:relative; height: 82rem; padding: 20rem 32rem; border: 1px solid #D9DDE0; border-radius: 2px;}
.info-head .form-input.srch-input {width: 370rem;}
.info-head .left, .info-head .right {display: flex; align-items: center; position: relative;}
.info-head .left .sort-select {position:relative; margin-left: 38rem; padding-left: 20rem;}
.info-head .left .sort-select::before {content: ''; display: block; position: absolute; left: 0; top: 10rem; width: 1px; height: 22rem; background-color: #D9DDE0;}
.info-head.no-bdr {height: auto; padding: 0; border: none;}
.cont-sec .trainings-list-w {margin-top: 40rem;}
.cont-sec .trainings-list-w .training-confirm:first-child {margin-top: 0;}
        /* 간격 */
.sec-tit-area ~ .sec-con-area .info-head {margin-top: 40rem;}
        /* 기본 -> pc: 64, mobile: 32 */
.cont-sec .info-head:not(.no-bdr) + *:not(.filter-popup, .table-sec) {margin-top: 64rem;}
.cont-sec .info-head:not(.no-bdr) + .filter-popup + * {margin-top: 64rem;}
.cont-sec .info-head:not(.no-bdr) + .tab-btn-area{margin:96rem 0 48rem;}
        /* 선x -> pc: 24, mobile: 16 */
.cont-sec .info-head.no-bdr + * {margin-top: 24rem;}

@media all and (max-width: 1023px) {
          /* 총 수 */
  .article-total-count {width: auto;}

          /* info-head */
  .info-head {flex-wrap: wrap; height: auto; padding: 0; border: none;}
  .info-head:has(.filter-open-btn) {padding-bottom: 17rem; border-bottom: 1px solid #D9DDE0;}
  .info-head .form-horizontal {width: 100%;}
  .info-head .form-input.srch-input {width: 100%; margin-top: 16rem;}
  .info-head .left .sort-select {margin-left: 18rem; padding-left: 10rem;}
  .info-head .left .sort-select::before {top: 2rem; height: 16rem;}
  .info-head .left .sort-select .form-select.txt-select{min-height:auto;}
  .cont-sec .trainings-list-w {margin-top: 24rem;}
  .cont-sec .info-sec + .trainings-list-w {margin-top: 16rem;}
          /* 간격 */
          /* 기본 -> pc: 64, mobile: 32 */
  .cont-sec .info-head:not(.no-bdr) + *:not(.filter-popup, .table-sec) {margin-top: 32rem;}
  .cont-sec .info-head:not(.no-bdr) + .filter-popup + * {margin-top: 32rem;}
  .cont-sec .info-head {margin-top: 32rem;}
          /* 기본/컨텐츠아이템 -> pc: 64, mobile: 16 */
  .cont-sec .info-head:not(.no-bdr) + .filter-popup + .index-list-w {margin-top: 16rem;}
  .cont-sec .info-head:not(.no-bdr) + .filter-popup + .trainings-list-w {margin-top: 16rem;}
  .cont-sec .info-head:not(.no-bdr) + .tab-btn-area{margin:48rem 0 36rem;}
          /* 선x -> pc: 24, mobile: 16 */
  .cont-sec .info-head.no-bdr + * {margin-top: 16rem;}
  .sec-tit-area ~ .sec-con-area .info-head {margin-top: 24rem;}
}


/* 리스트형 */
.article-list-w .list-item .txt-box .tit {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /*word-wrap: break-word; word-break: break-all;*/ transition: color .2s ease;}
.article-list-w .list-item:hover .txt-box .tit {color: #59B7E2;}

        /* 텍스트 리스트형 */
.article-list-w.txt-list .list-item:first-child {border-top: 1px solid #ECEEEF;}
.article-list-w.txt-list .list-item {display: flex; align-items: flex-start; padding: 32rem 0; border-bottom: 1px solid #ECEEEF;}
.article-list-w.txt-list .list-item .sub-info-wrap {width: 136rem; padding: 0 6rem; margin-top: 1rem;}
.article-list-w.txt-list .list-item .sub-info-wrap .info {color: #1E6B8E;}
.article-list-w.txt-list .list-item .sub-info-wrap + .txt-box {max-width: -webkit-calc(100% - 136rem); max-width: calc(100% - 136rem);}
.article-list-w.txt-list .list-item .txt-box {width: 100%;}
.article-list-w.txt-list .list-item .txt-box .sub-txt {margin-top: 12rem;}
.article-list-w.txt-list .list-item .txt-box .sub-txt span {color: #9CA1A6;}
.article-list-w.txt-list .list-item .type {width: 90rem; flex-shrink: 0;}
.article-list-w.txt-list .list-item .infos {width: 100%;}
.article-list-w.txt-list .list-item .infos dl {display: flex;}
.article-list-w.txt-list .list-item .infos dl ~ dl {margin-top: 12rem;}
.article-list-w.txt-list .list-item .infos dl dt {width: 98rem; flex-shrink: 0;}
.article-list-w.txt-list .list-item .infos dl dd {width: 100%;}
.article-list-w.txt-list .list-item a.hover:hover {text-decoration: underline;}
        /* 보드 형태일 땐, 첫 아이템 패딩탑/보더탑 제거 */
.board-list .article-list-w.txt-list .list-item:first-child {padding-top: 0; border-top: none;}
.tab-con-area .article-list-w.txt-list .list-item:first-child {padding-top: 0; border-top: none;}

        /* 박스 형태 리스트형 */
.article-list-w.box-list .list-item {display: flex; padding: 24rem 32rem; border: 1px solid #ECEEEF;}
.article-list-w.box-list .list-item ~ .list-item {margin-top: 16rem;}
.article-list-w.box-list .list-item .left {flex-shrink: 0; width: 268rem; margin-right: 40rem;}
.article-list-w.box-list .list-item .left .sort-label-area {margin-bottom: 4rem;}
.article-list-w.box-list .list-item .left .sort-label-area .label span {font-size: max(14rem, 13px); line-height: 170%;}
.article-list-w.box-list .list-item .right dl {display: flex;}
.article-list-w.box-list .list-item .right dl ~ dl {margin-top: 8rem;}
.article-list-w.box-list .list-item .right dl dt {flex-shrink: 0; width: 72rem; min-width: 50px;}
.article-list-w.box-list .list-item .right dl dd {color: #06161E;}

        /* 아코디언 리스트형 */
.article-list-w.accordion-st .list-item {border-bottom: 1px solid #ECEEEF;}
.article-list-w.accordion-st .list-item:first-child {border-top: 1px solid #ECEEEF;}
.article-list-w.accordion-st .list-item .acco-click-area {position:relative; display: flex; align-items: center; width: 100%; padding: 40rem 62rem 40rem 0;}
.article-list-w.accordion-st .list-item .acco-click-area:after {content: ''; display: block; position: absolute; right: 0; top: 40rem; width: 32rem; height: 32rem; background: url("/common/images/icon-lnb-arr.svg") center / 32rem no-repeat; opacity: 0.4; transform: rotate(0deg); transition: opacity .2s ease, transform .2s ease; transform-origin: center;}
.article-list-w.accordion-st .list-item .acco-click-area .sub-info-wrap {width: 80rem; padding: 0 6rem; margin: 3rem 56rem 0 0; text-align: center;}
/* .article-list-w.accordion-st .list-item .acco-click-area .sub-info-wrap span {word-break: keep-all; word-wrap: normal;} */
.article-list-w.accordion-st .list-item .acco-click-area .sub-info-wrap + .txt-box {max-width: -webkit-calc(100% - 136rem); max-width: calc(100% - 136rem);}
.article-list-w.accordion-st .list-item .acco-click-area .txt-box .tit {white-space: normal;}
.article-list-w.accordion-st .list-item .acco-hide-area {display: none; padding: 24rem 0 64rem 136rem;}            
.article-list-w.accordion-st .list-item .acco-hide-area:not(:has(.file-list-area ~ .attatched-file-area)) .attatched-file-area {margin-top: 48rem;}
.article-list-w.accordion-st .list-item:hover .acco-click-area:after {opacity: 1;}
.article-list-w.accordion-st .list-item.active .acco-click-area .txt-box .tit {color: #59B7E2;}
.article-list-w.accordion-st .list-item.active .acco-click-area:after {opacity: 1; transform: rotate(180deg);}
        /* 보드 형태일 때 */
.board-list .article-list-w.accordion-st .list-item:first-child {border-top: none;}
.board-list .article-list-w.accordion-st .list-item:first-child .acco-click-area {padding-top: 0;}
.board-list .article-list-w.accordion-st .list-item:first-child .acco-click-area:after {top: 0rem;}

        /* 아코디언(규정) 리스트형 */
        /* @ sub-info-wrap이 없을 때로 style을 지정, 이런 유형이 생길 경우 수정 필요 */
.policy-date {margin: 24rem 0 24rem; text-align: right;}
.article-list-w.accordion-st:not(:has(.sub-info-wrap)) .list-item .acco-hide-area {padding-left: 0;}
.article-list-w.accordion-st:not(:has(.sub-info-wrap)) .list-item .acco-click-area:after {top: 50%; margin-top: -16rem;}

        /* 아코디언 선 리스트형 */
.article-list-w.accordion-st:has(.data-enter-form) .list-item {border: none;}
.article-list-w.accordion-st:has(.data-enter-form) .list-item ~ .list-item {margin-top: -1px;}
.article-list-w.accordion-st:has(.data-enter-form) .list-item .acco-click-area {justify-content: space-between; padding: 30rem 112rem 30rem 48rem; border: 1px solid #D9DDE0; border-radius: 2px;}
.article-list-w.accordion-st:has(.data-enter-form) .list-item .acco-click-area:after {right: 48rem;}
.article-list-w.accordion-st:has(.data-enter-form) .list-item .acco-click-area .txt-box .tit {color: #697278;}
.article-list-w.accordion-st:has(.data-enter-form) .list-item .acco-hide-area {margin-top: -1px !important;}
.article-list-w.accordion-st:has(.data-enter-form) .list-item .acco-hide-area {padding: 60rem 48rem 40rem; border: 1px solid #D9DDE0; border-radius: 2px;}
.article-list-w.accordion-st:has(.data-enter-form) .list-item.active .acco-click-area {border-color: #9CA1A6;}
.article-list-w.accordion-st:has(.data-enter-form) .list-item.active .acco-click-area .txt-box .tit {color: #06161E;}
.article-list-w.accordion-st:has(.data-enter-form) .list-item.active .acco-hide-area {border-color: #9CA1A6;}
.article-list-w.accordion-st:has(.data-enter-form) .list-item.active {position: relative; z-index: 1;}
.article-list-w.accordion-st .data-enter-form:first-child {margin-top: 0;}
.article-list-w.accordion-st .data-enter-form .row {flex-direction: column;}
.article-list-w.accordion-st .data-enter-form .row ~ .row {margin-top: 80rem;}
.article-list-w.accordion-st .data-enter-form .row .th {width: 100%; margin-bottom: 24rem;}
.article-list-w.accordion-st .data-enter-form .row .th:has(.f-caption1) {display: flex; align-items: center; justify-content: space-between;}
.article-list-w.accordion-st .data-enter-form .row:has(.data-line:first-child .noti-txt-w) .th {margin-bottom: 8rem;}
.article-list-w.accordion-st .data-enter-form .row:has(.data-line:first-child .noti-txt-w) .data-line-w .data-line:has(.noti-txt-w) + .data-line {margin-top: 24rem;}
.article-list-w.accordion-st .btn-wrap {margin-top: 40rem;}
.article-list-w.accordion-st .data-line-w .btn-wrap {margin-top: 0;}

.article-list-w.accordion-st .list-item:not(:has(.acco-hide-area)) .acco-click-area:after {display: none;}

        /* 이미지 + 텍스트 카드 리스트형  */
.article-list-w.card-list {display: grid; row-gap: 24rem; column-gap: 40rem; grid-template-columns: 1fr 1fr 1fr; /* margin-top: 64rem */;}
.article-list-w.card-list .list-item {overflow:hidden; padding-bottom: 24rem;}
.article-list-w.card-list .list-item .txt-box {margin-top: 24rem;}
.article-list-w.card-list .list-item .txt-box .tit { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; white-space: normal;}
.article-list-w.card-list .list-item .txt-box .sub-txt {margin-top: 8rem;}
.article-list-w.card-list .list-item .img-box {width: 100%; height: 210rem; background: #ECEEEF url("/common/images/icon-logo-gray.svg") center/130rem no-repeat; border-radius: 2px; overflow: hidden;}
.article-list-w.card-list .list-item .img-box img {width: 100%; height:100%; object-fit: cover;}

        /* 텍스트 카드 리스트형 */
.article-list-w.txt-card-list {display: grid; gap: 40rem; grid-template-columns: repeat(3, 1fr);}
.article-list-w.txt-card-list:has(.no-data-area) {display:block;}
.article-list-w.txt-card-list .list-item {min-height: 296rem; padding: 32rem; border: 1px solid #ECEEEF; border-radius: 2px; overflow: hidden;}
.article-list-w.txt-card-list .list-item .txt-box .names .name {margin-bottom: 8rem;}
.article-list-w.txt-card-list .list-item .txt-box .infos {margin-top: 32rem}
.article-list-w.txt-card-list .list-item .txt-box .infos .info ~ .info {margin-top: 12rem;}
.article-list-w.txt-card-list .list-item .txt-box .infos .info {display: flex;}
.article-list-w.txt-card-list .list-item .txt-box .infos .info dt {width: 85rem; flex-shrink: 0;}
.article-list-w.txt-card-list .list-item .txt-box .infos .info dd {width: 100%;}

        /* 텍스트 + 배경 카드 리스트형  */
.article-list-w.txt-card-list:has(.bg) .list-item {position: relative; height: 386rem;}
.article-list-w.txt-card-list:has(.bg) .list-item .bg {position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; pointer-events: none;}
.article-list-w.txt-card-list:has(.bg) .list-item .bg img {width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease;}
.article-list-w.txt-card-list:has(.bg) .list-item:hover .bg img {transform: scale(102%);}
.article-list-w.txt-card-list:has(.bg) .list-item:hover .btn-text-icon[class*='-circle'] span:after {transform: translateX(6rem);}
.article-list-w.txt-card-list:has(.bg) .list-item .txt-box {position: relative;}
.article-list-w.txt-card-list:has(.bg) .list-item .txt-box .name {margin-bottom: 8rem;}
.article-list-w.txt-card-list:has(.bg) .list-item .txt-box .labels {margin-top: 12rem;}
.article-list-w.txt-card-list:has(.bg) .list-item:has(.position) .txt-box .labels {margin-top: 32rem;}
.article-list-w.txt-card-list:has(.bg) .list-item .txt-box .labels .box-label {background-color: #D9DDE0;}
.article-list-w.txt-card-list:has(.bg) .list-item .txt-box .btn-wrap {position: absolute; top: 0; right: 0; margin-top: 0;}

        /* 목차 리스트형 */
.sub-txt + .article-list-w.index-list {margin-top: 24rem;}
.article-list-w.index-list .list-item {display: flex; padding: 16rem 0;}
.article-list-w.index-list .list-item:first-child {padding-top: 0;}
.article-list-w.index-list .list-item:last-child {padding-bottom: 0;}
.article-list-w.index-list .list-item {display: flex;}
.article-list-w.index-list .list-item .txt-area {display: flex; align-items: center; width: 100%; min-width: 0;}
/* .article-list-w.index-list .list-item .txt-area .num {flex: 0; align-self: center; width: 20rem; min-width: 20px; margin-right: 30rem; text-align: center;} */
.article-list-w.index-list .list-item .txt-area .num {flex-shrink: 0; flex-grow: 0; align-self: center; width: auto; min-width: 20px; margin-right: 30rem; text-align: center;}
.article-list-w.index-list .list-item .txt-area .training {width: 100%; min-width: 0;}
.article-list-w.index-list .list-item .txt-area .training .dl {display: flex;}
.article-list-w.index-list .list-item .txt-area .training .dl ~ .dl {margin-top: 8rem;}
.article-list-w.index-list .list-item .txt-area .training .dl .dt {flex-shrink: 0; width: 64rem; min-width: 48px; margin-right: 8rem;}
.article-list-w.index-list .list-item .txt-area .training .dl .dt.w-longer {width:80rem;}
.article-list-w.index-list .list-item .txt-area .training .dl .dt.w-longest {width:112rem;}
.article-list-w.index-list .list-item .txt-area .training .dl .dd {color: #06161E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
/* .article-list-w.index-list .list-item .txt-area .training .dl .dd .box-label {margin-right: 8rem;} */
.article-list-w.index-list .list-item .img-area {flex-shrink: 0; width: 128rem; height: 72rem; margin-left: 40rem; border-radius: 2px; overflow: hidden;}
.article-list-w.index-list .list-item .img-area img {width: 100%; height: 100%; object-fit: cover;}
.article-list-w.index-list .list-item .btn-area {flex-shrink: 0; align-self: center; width: 142rem;}
.article-list-w.index-list .list-item .btn-area .btn-wrap .hyphen {padding-right: 35rem;}
.article-list-w.index-list .list-item .btn-area .btn-wrap {margin-top: 0; justify-content: flex-end;}
.article-list-w.index-list .list-item .btn-area .btn-wrap button {margin-right: 0;}
.article-list-w.index-list .list-item .img-area {position: relative;}
.article-list-w.index-list .list-item .img-area .status {position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; display: flex;  align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff; background-color: rgba(58, 183, 123, 0.6)}
.inner-con-box.evaluation .article-list-w.index-list{margin-top:40rem;}
.inner-con-box.evaluation .article-list-w.index-list .list-item .btn-area {width:auto;}
.inner-con-box.evaluation .article-list-w.index-list .list-item .btn-area .btn-wrap > *{margin-right:20rem;}
.inner-con-box.evaluation .article-list-w.index-list .list-item .btn-area .btn-wrap > *:last-child{margin-right:0;}

@media all and (max-width: 1023px) {
  /* 리스트형 */
  .article-list-w .list-item .txt-box {width: 100%; margin-left: 0;}
  .article-list-w .list-item .txt-box .tit {font-size: 15rem; line-height: 170%; letter-spacing: -0.3rem;}

          /* 텍스트 리스트형 */
  .article-list-w.txt-list .list-item {display: block; padding: 16rem 0;}
  .article-list-w.txt-list .list-item .sub-info-wrap {width: auto; padding: 0; margin: 0 0 8rem;}
  .article-list-w.txt-list .list-item .sub-info-wrap + .txt-box {max-width: unset;}
  .article-list-w.txt-list .list-item .txt-box .sub-txt {margin-top: 8rem;}
  .article-list-w.txt-list .list-item:has(.type) {display: flex;}
  .article-list-w.txt-list .list-item .type {width: 60rem;}
  .article-list-w.txt-list .list-item .infos dl ~ dl {margin-top: 8rem;}
  .article-list-w.txt-list .list-item .infos dl dt {width: 80rem;}

          /* 박스 형태 리스트형 */
  .article-list-w.box-list .list-item {padding: 20rem;}
  .article-list-w.box-list .list-item ~ .list-item {margin-top: 8rem;}
  .article-list-w.box-list .list-item .left {width: 140rem; margin-right: 12rem;}
  .article-list-w.box-list .list-item .left .sort-label-area {margin-bottom: 0;}
  .article-list-w.box-list .list-item .left .sort-label-area .label span {font-size: 12rem; line-height: 160%;}
  .article-list-w.box-list .list-item .right dl ~ dl {margin-top: 2rem;}
  .article-list-w.box-list .list-item .right dl dt {width: auto; min-width: unset; margin-right: 8rem;}

          /* 아코디언 리스트형 */
  .article-list-w.accordion-st .list-item .acco-click-area {display: block; padding:  16rem 42rem 16rem 0;}
  .article-list-w.accordion-st .list-item .acco-click-area .sub-info-wrap {width: auto; padding: 0; margin: 0 0 5rem 0; text-align: left;}
  .article-list-w.accordion-st .list-item .acco-click-area .sub-info-wrap + .txt-box {max-width: unset;}
  .article-list-w.accordion-st .list-item .acco-click-area:after {top: 42rem;}
  .article-list-w.accordion-st .list-item .acco-hide-area {padding: 6rem 0 40rem 0rem;}
          /* 보드 형태일 때 */
  .board-list .article-list-w.accordion-st .list-item:first-child .acco-click-area:after {top: 26rem;}
  
          /* 아코디언(규정) 리스트형 */
          /* @ sub-info-wrap이 없을 때로 style을 지정, 이런 유형이 생길 경우 수정 필요 */
  .policy-date {margin: 16rem 0;}
  .article-list-w.accordion-st:not(:has(.sub-info-wrap)) .list-item:first-child .acco-click-area {padding-top: 16rem;}
  .article-list-w.accordion-st:not(:has(.sub-info-wrap)) .list-item .acco-click-area:after {top: 50%; margin-top: -16rem;}
  .article-list-w.accordion-st:not(:has(.sub-info-wrap)) .list-item .acco-hide-area {padding-top: 8rem;}
          /* @ 공통 policy-box 사용 중, 일부 다른 부분 별도 처리 */
  .article-list-w.accordion-st:not(:has(.sub-info-wrap)) .list-item .acco-hide-area .policy-box .txt-tit2 {margin-bottom: 8rem;}
  .article-list-w.accordion-st:not(:has(.sub-info-wrap)) .list-item .acco-hide-area .policy-box .txt {margin: 8rem 0;}

          /* 아코디언 선 리스트형 */
  .article-list-w.accordion-st:has(.data-enter-form) .list-item .acco-click-area {display: flex; padding: 16rem 60rem 16rem 20rem;}
  .article-list-w.accordion-st:has(.data-enter-form) .list-item .acco-click-area:after {right: 20rem; width: 24rem; height: 24rem; margin-top: -12rem; background-size: 24rem auto;}
  .article-list-w.accordion-st:has(.data-enter-form) .list-item .acco-hide-area {padding: 30rem 20rem;}
  .article-list-w.accordion-st .data-enter-form .row .th:has(.f-caption1) {flex-direction: column-reverse; align-items: flex-start;}
  .article-list-w.accordion-st .data-enter-form .row:first-child .th .title + .f-caption1 {margin-bottom: 32rem;}
  .article-list-w.accordion-st .data-enter-form:has(.row:first-child .th .title + .f-caption1) {margin-top: 16rem;}
  .article-list-w.accordion-st .data-enter-form .row ~ .row {margin-top: 40rem;}
  .article-list-w.accordion-st .data-enter-form .row .th {margin-bottom: 16rem;}
  .article-list-w.accordion-st .data-enter-form .row .data-line-w .data-line .data-title {margin-bottom: 8rem;}
  .article-list-w.accordion-st .data-enter-form .row:has(.data-line:first-child .noti-txt-w) .data-line-w .data-line:has(.noti-txt-w) + .data-line {margin-top: 16rem;}
  .article-list-w.accordion-st .data-enter-form:first-child {margin-top: 0 !important;}

          /* 이미지 + 텍스트 카드 리스트형 */
  .article-list-w.card-list {grid-template-columns: 1fr 1fr; row-gap: 20rem; column-gap: 10rem;}
  .article-list-w.card-list .list-item {padding-bottom: 12rem;}
  .article-list-w.card-list .list-item .img-box {background-size: 80rem;}
  .article-list-w.card-list .list-item .txt-box {margin-top: 12rem;}
  .article-list-w.card-list .list-item .txt-box .sub-txt {margin-top: 4rem;}

          /* 텍스트 카드 리스트형 */
  .article-list-w.txt-card-list {grid-template-columns: repeat(2, 1fr); gap: 20rem;}
  .article-list-w.txt-card-list .list-item {min-height: auto; padding: 24rem;}
  .article-list-w.txt-card-list .list-item .txt-box {display: flex;}
  .article-list-w.txt-card-list .list-item .txt-box .names {width: 80rem; flex-shrink: 0; margin-right: 10rem;}
  .article-list-w.txt-card-list .list-item .txt-box .names .name {margin-bottom: 4rem;}
  .article-list-w.txt-card-list .list-item .txt-box .infos {width: 100%; margin-top: 0;}
  .article-list-w.txt-card-list .list-item .txt-box .infos .info ~ .info {margin-top: 6rem;}
  .article-list-w.txt-card-list .list-item .txt-box .infos .info dt {width: 56rem; margin-right: 10rem;}
  
          /* 텍스트 + 배경 카드 리스트형  */
  .article-list-w.txt-card-list:has(.bg) .list-item {height: 400rem;}
  .article-list-w.txt-card-list:has(.bg) .list-item .txt-box {display: block;}
  .article-list-w.txt-card-list:has(.bg) .list-item .txt-box .labels {margin-top: 8rem;}
  .article-list-w.txt-card-list:has(.bg) .list-item:has(.position) .txt-box .labels {margin-top: 24rem;}

          /* 목차 리스트형 */
  .sub-txt + .article-list-w.index-list {margin-top: 16rem;}
  .article-list-w.index-list .list-item .txt-area .training .dl .dt {min-width: unset;}
  .article-list-w.index-list .list-item .txt-area .training .dl .dt.w-longer {width: 64rem;}
  .article-list-w.index-list .list-item:has(.btn-area) .img-area {margin-left: 20rem;}
  .article-list-w.index-list .list-item .btn-area {width: 100rem;}

  .inner-con-box.evaluation .article-list-w.index-list .list-item .btn-area {margin-top:16rem;}
}
@media all and (max-width: 599px) {
          /* 텍스트 카드 리스트형 */
  .article-list-w.txt-card-list {grid-template-columns: repeat(1, 1fr); gap: 16rem;}
  
  /* 목차 리스트형 */
  .article-list-w.index-list .list-item {flex-wrap: wrap; padding: 12rem 0;}
  .article-list-w.card-list .list-item .img-box {height: 106rem;}
  .article-list-w.index-list .list-item .txt-area {width: calc(100% - 101rem);}
  .article-list-w.index-list .list-item .txt-area .num {margin-right: 10rem; min-width: unset;}
  .article-list-w.index-list .list-item .txt-area .training .dl {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;}
  .article-list-w.index-list .list-item .txt-area .training .dl ~ .dl {margin-top: 2rem;}
  .article-list-w.index-list .list-item .txt-area .training .dl .dt {width: auto; display: inline-block;}
  .article-list-w.index-list .list-item .txt-area .training .dl .dt.w-longest {width: auto;}
  .article-list-w.index-list .list-item .txt-area .training .dl .dd {white-space: unset; display: inline;}
  .article-list-w.index-list .list-item .img-area, .article-list-w.index-list .list-item:has(.btn-area) .img-area {width: 85rem; height: 48rem; margin-left: 16rem;}
  .article-list-w.index-list .list-item .btn-area {width: auto; margin-top: 8rem; padding-left: 32rem;}
}

/* 글 상세보기 */
.body-area .txt-wrap > * {max-width: 100%;}
.body-area .txt-wrap > pre {white-space: pre-wrap;}
.view-sec .title-area {padding-bottom: 40rem; margin-bottom: 80rem; border-bottom: 1px solid #06161E;}
.view-sec .title-area .info {color: #59B7E2; padding-bottom: 40rem;}
.view-sec .title-area .date {margin-top: 24rem; color: #697278;}
.view-sec .body-area .txt-wrap {color: #06161E;}
.view-sec .body-area .attatched-file-area {margin-top: 80rem;}
.answer-sec .title-area {margin-bottom: 64rem; }
.answer-sec .title-area .title {margin-bottom: 12rem;}
.answer-sec .title-area .date {color: #9CA1A6;}
.answer-sec .question-wrap {margin-bottom: 64rem;}
.answer-sec .question-wrap .title-area .title .box-label {margin: -4rem 16rem 0 0; vertical-align: middle;}
.answer-sec .question-wrap .attatched-file-area {margin-top: 48rem;}
.answer-sec .answer-wrap {padding: 60rem; background-color: #F5F6F7;}
.answer-sec .answer-wrap .title-area .title {position: relative;}
.answer-sec .answer-wrap .title-area .title:before {content: ""; position: absolute; left: -30rem; top: 13rem; width: 10rem; height: 10rem; border-left: 1px solid #06161E; border-bottom: 1px solid #06161E;}
.answer-sec .answer-wrap .body-area .attatched-file-area .btn-text-icon.download-bg {background-color: #ECEEEF;}
.answer-sec .answer-wrap .attatched-file-area,
.answer-sec .question-wrap .attatched-file-area {margin-top: 48rem;}
@media all and (max-width: 1023px) {
  .view-sec .title-area {padding-bottom: 32rem; margin-bottom: 48rem;}
  .view-sec .title-area .info {padding-bottom: 12rem; font-size: 13rem; line-height: 165%;}
  .view-sec .title-area .date {margin-top: 8rem;}
  .view-sec .body-area .attatched-file-area {margin-top: 48rem;}
  .answer-sec .title-area {margin-bottom: 32rem;}
  .answer-sec .title-area .title {margin-bottom: 8rem;}
  .answer-sec .answer-wrap {padding: 24rem 44rem 28rem;}
  .answer-sec .answer-wrap .title-area .title:before {top: 9rem;}
  .answer-sec .question-wrap {margin-bottom: 32rem;}
  .answer-sec .question-wrap .title-area .title .box-label {margin-right: 12rem;}
  .answer-sec .answer-wrap .title-area .title:before {top: 10rem; left: -20rem; width: 8rem; height: 8rem;}
  .answer-sec .answer-wrap .attatched-file-area,
  .answer-sec .question-wrap .attatched-file-area {margin-top: 24rem;}
}


/* 페이지 이동 */
.page-move {margin-top: 80rem; border-top: 1px solid #ECEEEF; border-bottom: 1px solid #D9DDE0;}
.page-move a {position: relative; display: flex; padding: 30rem 52rem 30rem 0; color: #06161E}
.page-move a ~ a {border-top: 1px solid #ECEEEF;}
.page-move a::after {content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 32rem; height: 32rem; background: url("/common/images/icon-page-arrow.svg") no-repeat center right / 32rem auto;}
.page-move a .status {margin-right: 32rem;}
.page-move a .tit {white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.page-move a:not(.has-article) {color: #9CA1A6;}
.page-move a:not(.has-article)::after {display: none;}
@media all and (max-width: 1023px) {
  .page-move {margin-top: 48rem;}
  .page-move a {padding: 16rem 24rem 16rem 0;}
  .page-move a::after {width: 24rem; height: 24rem; background-size: 24rem;}
  .page-move a .status { margin-right: 16rem;}
}


/* 첨부파일 영역 */
.attatched-file-area {display: flex; width: 100%; flex-direction: column;}
.attatched-file-area .download-bg ~ .download-bg {margin-top: 20rem;}
@media all and (max-width: 1023px) {
  /* .attatched-file-area {width: 100%;} */
  .attatched-file-area .download-bg ~ .download-bg {margin-top: 12rem;}

}
/* --------------------------------------------- list - END --------------------------------------------- */





/* --------------------------------------------- ETC - START --------------------------------------------- */
/* -- 에러페이지 & 사이트점검안내 & 정보업데이트안내  -- */
.etc-wrap {position: relative; width: 100%; height: 100vh; overflow: hidden; background: url() no-repeat center center / cover;}
.etc-wrap.err {background-image: url("/common/images/visual-error-page.jpg");}
.etc-wrap.site {background-image: url("/common/images/visual-siteinspection-page.jpg");}
.etc-wrap.infoup {background-image: url("/common/images/visual-login-page-infoupdate.jpg");}
.etc-wrap .scroll-area {position: relative; overflow-y: auto; height: 100%;}
.etc-wrap .etc-inner {position: relative; top: 30%; left: calc(100% - 667rem); width: 507rem; padding-bottom: 100rem;}
.etc-wrap .tit {margin-bottom: 40rem;}
.etc-wrap .info {margin-bottom: 20rem;}
.etc-wrap .txt ~ .txt {margin-top: 12rem;}
.etc-wrap dl {display: flex; margin-top: 80rem;}
.etc-wrap dl dt {flex-shrink: 0; margin-right: 12rem;}
.etc-wrap .btn-wrap {margin-top: 40rem;}
.etc-wrap.infoup .tit, .etc-wrap.infoup .txt {color: #F5F6F7;}

@media all and (max-width: 1280px) {
  .etc-wrap .etc-inner {left: calc(100% - 867rem); width: 707rem;}
}
@media all and (max-width: 1023px) {
  .etc-wrap.err {background-image: url("/common/images/visual-error-page-mobile.jpg"); background-position: center center;}
  .etc-wrap.site {background-image: url("/common/images/visual-siteinspection-page-mobile.jpg"); background-position: center top;}
  .etc-wrap.infoup {background-image: url("/common/images//visual-login-page-infoupdate-mobile.jpg"); background-position: center bottom;}
  .etc-wrap .etc-inner {/*top: 252rem*/ left: unset; width: 100%; padding: 0 20rem 100rem;}
  .etc-wrap .tit {margin-bottom: 32rem;}
  .etc-wrap .info {margin-bottom: 12rem;}
  .etc-wrap dl {display: block; margin-top: 48rem;}
  .etc-wrap dl dt {width: 49rem; margin-bottom: 8rem;}
  .etc-wrap .btn-wrap {margin-top: 24rem;}
}

/* 가로 모드일 때 */
.only-vertical-view {display: none;}
.only-vertical-view.on {display: block;}
.only-vertical-view {position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 999999; background: url("/common/images/visual-landscape-page-mobile.jpg") no-repeat center bottom / cover;}
.only-vertical-view .scroll-area {position: relative; overflow-y: auto; height: 100%;}
.only-vertical-view .cont-area {width: 100%; min-height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 40rem 0 40rem 120rem;}
.only-vertical-view .cont-area .tit {position: relative; padding-top: 56rem; margin-bottom: 32px;}
.only-vertical-view .cont-area .tit::before {content: ""; position: absolute; top: 0; left: 0; width: 48rem; height: 48rem; background: url("/common/images/icon-phone-rotate.svg") no-repeat center center / 100% auto;}

@media (orientation: landscape) and (pointer: coarse) {
  @media (max-height: 414px) and (max-width: 1023px) {
    body.vertical {overflow: hidden; height: 100%; min-height: 100%; touch-action: none;}
    /* .only-vertical-view.on {display: block;} */
  }
}

/* loading */
.loading-area {display: flex; align-items: center; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 1, 2, 0.60); z-index: 500;}
.loading-area .lottie-area {display: flex; justify-content: center;}
.loading-area .txt-area {margin-top: 32rem; text-align: center;}
.loading-area .txt-area .tit {font-family: "Pretendard_SemiBold", sans-serif; color: #fff; font-size: 18rem; line-height: 155%; letter-spacing: -0.36rem;}
.loading-area .txt-area .txt {margin-top: 4rem; font-family: "Pretendard_Medium", sans-serif; color: #76D5FF; font-size: 14rem; line-height: 170%; letter-spacing: -0.28rem;}
@media all and (max-width: 1023px) {
  .loading-area .txt-area {margin-top: 24rem;}
  .loading-area .txt-area .tit {font-size: 15rem; line-height: 170%; letter-spacing: -0.3rem;}
  .loading-area .txt-area .txt {font-size: 12rem; line-height: 160%; letter-spacing: -0.24rem;}
}
/* --------------------------------------------- ETC - END --------------------------------------------- */





/* --------------------------------------------- Policy - START --------------------------------------------- */
/* -- 개인정보처리방침 & 이용약관 -- */
.policy-page {margin-top: 40rem;}
.policy-page .form-select select {font-family: "Pretendard_Medium", sans-serif;}
.policy-page .policy-sec {padding: 80rem 0;}
.policy-page .policy-sec:last-child {padding-bottom: 0;}
.policy-page .policy-sec ~ .policy-sec {border-top: 1px solid #D9DDE0;}
.policy-page .policy-sec.no-bdr {border-top: none; padding-top: 0;}
.policy-page .policy-sec.no-bdr::before {display: none !important;}
.policy-box .sec-tit {margin-bottom: 40rem;}
.policy-box .sec-tit2 {margin-bottom: 24rem;}
.policy-box .txt-tit {margin: 24rem 0 16rem;}
.policy-box .txt {position: relative; margin: 16rem 0; color: #697278;/*word-wrap: break-word; word-break: break-all;*/}
.policy-box .num-txt {position: relative; padding-left: 20rem; text-indent: -20rem; color: #697278;}
.policy-box .num-txt .num {margin-right: 4rem;}
.policy-box .num-sub-txt {padding-left: 20rem; color: #697278;}
.policy-box .ul-txt-w {margin-top: 16rem;}
.policy-box .ul-txt-w .ul-txt-tit {margin-bottom: 16rem;}
.policy-box .ul-txt-w .ul-txt-list {padding-left: 10rem;}
.policy-box .ul-txt-w .ul-txt-list .ul-txt {margin-top: 0; font-size: max(18rem, 16px); line-height: 155%;}
.policy-box > *:first-child {margin-top: 0;}
.policy-box > *:last-child {margin-bottom: 0;}

@media all and (max-width: 1023px) {
  .policy-page {margin-top: 24rem;}
  .policy-page .policy-sec {padding: 48rem 0;}
  .policy-box .sec-tit {margin-bottom: 24rem;}
  .policy-box .sec-tit2 {margin-bottom: 16rem;}
  .policy-box .txt-tit {margin: 16rem 0 12rem;}
  .policy-box .txt {margin: 12rem 0;}
  .policy-box .ul-txt-w {margin-top: 16rem;}
  .policy-box .ul-txt-w .ul-txt-tit {margin-bottom: 12rem;}
  .policy-box .ul-txt-w .ul-txt-list .ul-txt {font-size: 14rem; line-height: 170%;}
  .policy-box > *:first-child {margin-top: 0;}

  .policy-page .policy-sec ~ .policy-sec {position: relative; border-top: none;}
  .policy-page .info-box::before {content: ''; display: block; position: absolute; left: -40rem; bottom: 0; width: 100vw; height: 8rem; background-color: #F5F6F7;}
  .policy-page .policy-sec ~ .policy-sec::before {content: ''; display: block; position: absolute; left: -40rem; top: 0; width: 100vw; height: 8rem; background-color: #F5F6F7;}
}

.agree-box .gray-bg-sec {max-height: 276rem; padding-right: 36rem; overflow-y: auto;}
.agree-box .gray-bg-sec .table-box .basic-table {border-color: #D9DDE0;}
.agree-box .gray-bg-sec .table-box .basic-table tr th,
.agree-box .gray-bg-sec .table-box .basic-table tr td {border-color: #D9DDE0;}
.agree-box .gray-bg-sec .table-box .basic-table tr th {background-color: #ECEEEF}
.agree-box .gray-bg-sec .table-box .basic-table tr {background-color: #fff;}
.agree-box .gray-bg-sec .table-box .basic-table tr .bdr {border-color: #D9DDE0;}
.agree-box .gray-bg-sec::-webkit-scrollbar{width: 6rem; height:100%; background: transparent;}
.agree-box .gray-bg-sec::-webkit-scrollbar-thumb{background: #9CA1A6;}
.paragraphs ~ .paragraphs {margin-top: 32rem;}
.paragraphs .tit {margin-bottom: 16rem; color: #06161E;}
.paragraphs .tit + .sub-tit {margin-top: 16rem;}
.paragraphs .sub-tit {margin: 24rem 0 8rem;}
.paragraphs .sub-tit:first-child {margin-top: 0;}
.paragraphs .txt {margin: 24rem 0;}
.paragraphs .txt:first-child {margin-top: 0;}
.paragraphs .txt:last-child {margin-bottom: 0;}
.paragraphs:has(.txt + .table-box) .txt {margin-bottom: 8rem;}
.paragraphs .list {display: block;}
.paragraphs .list ~ .list {margin-top: 4rem;}
.paragraphs .table-box {margin: 0 0 24rem;}
.paragraphs .num-txt {position: relative; padding-left: 15rem; text-indent: -15rem; color: #697278;}
.paragraphs .num-txt .num {margin-right: 2rem;}
.paragraphs .num-sub-txt {padding-left: 15rem;}
.terms-con .paragraphs .txt {margin: 8rem 0;}

@media all and (max-width: 1023px) {
  .agree-box .gray-bg-sec {padding-right: 30rem;}
  .paragraphs ~ .paragraphs {margin-top: 20rem;}
  .paragraphs .tit {margin-bottom: 8rem;}
  .paragraphs .tit + .sub-tit {margin-top: 8rem;}
  .paragraphs .sub-tit {margin: 12rem 0 6rem;}
  .paragraphs .txt {margin: 12rem 0;}
  .paragraphs:has(.txt + .table-box) .txt {margin-bottom: 6rem;}
  .paragraphs .table-box {margin: 0 0 12rem;}
  .paragraphs .list ~ .list {margin-top: 3rem;}
  .paragraphs .num-txt {padding-left: 13rem; text-indent: -13rem;}
  .paragraphs .num-sub-txt {padding-left: 13rem;}
  .terms-con .paragraphs .txt {margin: 6rem 0;}
}
/* --------------------------------------------- Policy - END --------------------------------------------- */





/* --------------------------------------------- Login 로그인 - START --------------------------------------------- */
.member .sub-top-vis-area {width: 100%; margin-bottom: 0;}
.member .inner-con-box {margin-top: 60rem;}

.member-main .page-init-motion {opacity: 0; transition: opacity 1s ease; transition-delay: 1.1s;}
.member-main .page-tit-area .page-tit {overflow: hidden;}
.member-main .page-tit-area .page-txt {color: #06161E; font-size: max(16rem, 14px); line-height: 160%; letter-spacing: -.02em; overflow: hidden;}
.member-main .page-tit-area .page-txt .for-move {transition-delay: .8s;}
.member-main .page-tit-area .for-move {display: inline-block; position:relative; top: 100rem; transition: top 1s ease;}
.member-main.init-active .page-tit-area .for-move {top: 0;}
.member-main.init-active .page-init-motion {opacity: 1;}

.member-half-box {display: flex; justify-content: space-between; margin-top: 80rem;}
.member-half-box .left {width: 370rem;}
.member-half-box .right {width: 600rem;}
.member-half-box .form-input {width: 100%;}
.member-half-box .form-checkbox {margin-top: 24rem; margin-bottom: 48rem;}
.member-half-box .btn-solid {width: 100%;}
.member-half-box .btn-wrap:last-child {flex-wrap: wrap; margin-top: 24rem; row-gap:8rem; column-gap: 20rem;}
.member-half-box .btn-wrap .btn-set:first-child .btn-text {position: relative;}
.member-half-box .btn-wrap .btn-set:first-child .btn-text:last-child {margin-left: 11rem;}
.member-half-box .btn-wrap .btn-set:first-child .btn-text:last-child:before {content: ''; pointer-events: none; display: block; position: absolute; left: -10rem; top: max(5rem, 5px); width: 1px; height: max(16rem, 14px);; background-color: #DFE1E4;}
.member-half-box .img-area {width: 600rem; height: 400rem; clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%); transition: 1s clip-path cubic-bezier(0.62, 0, 0.43, 1);} /* initial */ /* 로그인 : 이미지 높이 400 */
.member-half-box:has(.btn-list-w) .img-area {height: 480rem;} /* 회원가입 : 이미지 높이 480 */
.member-half-box .img-area .img {position:relative; left: 100rem; width:100%; height: 100%; transition: left 1s cubic-bezier(0.62, 0, 0.43, 1);}
.member-half-box .img-area .img img {width: 100%;}
.member-main.init-active .member-half-box .img-area {clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);} /* after load */
.member-main.init-active .member-half-box .img-area .img {left: 0;}

.member-half-box .btn-list-w .btn-list:first-child {padding-bottom: 64rem;}
.member-half-box .btn-list-w .btn-list:last-child {padding-top: 64rem; border-top: 1px solid #ECEEEF;}
.member-half-box .btn-list-w .btn-list .txt {margin-top: 12rem; font-size: max(14rem, 13px); line-height: 170%; letter-spacing: -0.28rem;}
.member-half-box .btn-list-w .btn-list .btn-wrap {margin-top: 48rem;}

.member .apply-step-w .for-move {margin-top: 56rem; top: 0; opacity: 1;}

@media all and (max-width: 1023px) {
  .member .inner-con-box {margin-top: 40rem;}
  .member-main .page-tit-area .page-txt {font-size: 13rem; line-height: 165%;}

  .member-half-box {display: block; margin-top: 40rem; padding: 0 24rem;}
  .member-half-box .left {width: 100%;}
  .member-half-box .right {display: none;}
  /* .member-half-box .btn-wrap .btn-set:first-child .btn-text-icon{margin-right:7rem;} */
  .member-half-box .btn-wrap .btn-set:first-child .btn-text:last-child {margin-left: 9rem;} 
  .member-half-box .btn-wrap .btn-set:first-child .btn-text:last-child:before {top: 5rem; height: 12rem;}
  .member-half-box .btn-wrap:last-child {margin-top: 16rem;} 

  .member-half-box .btn-list-w .btn-list .f-title2 {font-family: "Pretendard_Bold", sans-serif;}
  .member-half-box .btn-list-w .btn-list .txt {margin-top: 8rem; font-size: 12rem; line-height: 160%;}
  .member-half-box .btn-list-w .btn-list:first-child {padding-bottom: 48rem;}
  .member-half-box .btn-list-w .btn-list:last-child {padding-top: 48rem;}
  .member-half-box .btn-list-w .btn-list .btn-wrap {margin-top: 32rem;}

  .member .apply-step-w .for-move {margin-top: 32rem;}
}
/* --------------------------------------------- Login 로그인 - END --------------------------------------------- */





/* --------------------------------------------- agree 약관 동의 - START --------------------------------------------- */
.agree-terms-w .all-check-area .form-checkbox input + label {display: flex; align-items: center; height: 58rem; margin-bottom: 24rem; padding: 0 28rem 0 60rem; font-family: "Pretendard_SemiBold", sans-serif; font-size: max(18rem, 16px); color: #06161E; background-color: #ECEEEF; background: #ECEEEF url("/common/images/icon-checkbox-dark.svg") 28rem center / 22rem no-repeat;}/* 전체 약관 동의 */
.agree-terms-w .all-check-area .form-checkbox input:checked + label {font-family: "Pretendard_Medium", sans-serif; color: #06161E; background-color: #ECEEEF; background: #ECEEEF url("/common/images/icon-checkbox-checked.svg") 28rem center / 22rem no-repeat;}
.agree-terms-w .agree-list-w .list-item:first-child .acco-hide-area {display: block;}
.agree-terms-w .agree-list-w .list-item:hover .acco-click-area:after {opacity: 1;}
.agree-terms-w .agree-list-w .list-item:not(.marketing) .form-checkbox input + label,
.agree-terms-w .agree-list-w .list-item.marketing .acco-click-area .form-checkbox input + label {color: #06161E; background: url("/common/images/icon-checkbox-dark.svg") left center / 22rem no-repeat;}
.agree-terms-w .agree-list-w .list-item:not(.marketing) .form-checkbox input:checked + label,
.agree-terms-w .agree-list-w .list-item.marketing .acco-click-area .form-checkbox input:checked + label {background: url("/common/images/icon-checkbox-checked.svg") left center / 22rem no-repeat}
.agree-terms-w .agree-list-w .list-item .acco-click-area {position: relative; display: flex; align-items: center; height: 58rem; padding: 0 28rem;}
.agree-terms-w .agree-list-w .list-item .acco-click-area:after {content: ''; display: block; position: absolute; right: 28rem; top: 50%; margin-top: -16rem; width: 32rem; height: 32rem; background: url("/common/images/icon-lnb-arr.svg") center / 32rem no-repeat; opacity: 0.4; transform: rotate(0deg); transition: opacity .2s ease, transform .2s ease; transform-origin: center;}
.agree-terms-w .agree-list-w .list-item .acco-hide-area {display: none;/*  padding: 0 60rem; */}
.agree-terms-w .agree-list-w .list-item .acco-hide-area .terms-con {height: 220rem; padding: 20rem 28rem; overflow-y: auto; background-color: #f5f6f7;}
.agree-terms-w .agree-list-w .list-item .acco-hide-area .terms-con::-webkit-scrollbar {width: 4rem;}
.agree-terms-w .agree-list-w .list-item .acco-hide-area .terms-con::-webkit-scrollbar-thumb {border-radius: 2px; background-color: #9CA1A6;}
.agree-terms-w .agree-list-w .list-item .acco-hide-area .terms-con pre {white-space: normal;}
.agree-terms-w .agree-list-w .list-item .included-chk-area {display: flex; align-items: center; height: 58rem; padding: 0 0 0 28rem;}
.agree-terms-w .agree-list-w .list-item .included-chk-area .form-checkbox input + label {color: #697278;}
.agree-terms-w .agree-list-w .list-item .included-chk-area .form-checkbox + .form-checkbox {margin-left: 60rem;}
.agree-terms-w .agree-list-w .list-item.active .acco-click-area:after {opacity: 1; transform: rotate(180deg);}
@media all and (max-width: 1023px) {
  .agree-terms-w .all-check-area .form-checkbox input + label {height: 50rem; margin-bottom: 16rem; font-size: 15rem;}
  .agree-terms-w .agree-list-w .list-item:first-child .acco-hide-area {padding: 0;}
  .agree-terms-w .agree-list-w .list-item .acco-click-area {height: 50rem;}
  .agree-terms-w .agree-list-w .list-item .acco-click-area:after {width: 24rem; height: 24rem; background-size: 24rem;}
  .agree-terms-w .agree-list-w .list-item .acco-hide-area .terms-con {padding: 16rem;}
  .agree-terms-w .agree-list-w .list-item .included-chk-area {height: 50rem; padding-left: 28rem;}
  .agree-terms-w .agree-list-w .list-item .included-chk-area .form-checkbox + .form-checkbox {margin-left: 40rem;}
}
/* --------------------------------------------- agree 약관 동의 - END --------------------------------------------- */





/* --------------------------------------------- 재단정보 > 인사말 - START --------------------------------------------- */
.greeting-wrap {display: flex; justify-content: space-between;}
.greeting-wrap .txt-box {width: 586rem;}
.greeting-wrap .img-box {width: 410rem;}
.greeting-wrap .img-box .img {margin-bottom: 16rem; border-radius: 2px; overflow: hidden;}
.greeting-wrap .img-box .img img {width: 100%;}
/* motion */
.scroll-motion .for-motion .greeting-wrap .txt-box {position: relative; top: 40rem; opacity: 0; transition: 1s top cubic-bezier(0.62, 0, 0.43, 1), 1s opacity cubic-bezier(0.62, 0, 0.43, 1); transition-delay: .4s;}
.scroll-motion.active .for-motion .greeting-wrap .txt-box {top: 0; opacity: 1;}
@media all and (max-width: 1023px) {
  .greeting-wrap {position: relative; display: block;}
  .greeting-wrap .txt-box {width: 100%;}
  .greeting-wrap .txt-box .tabl-layout {display: block; padding-right: 270rem;}
  .greeting-wrap .img-box {position: absolute; top: 0; right: 0; width: 250rem; height: 270rem;}
  .greeting-wrap .img-box .img {margin-bottom: 0;}
  .greeting-wrap .img-box .img img {height: 100%; object-fit: cover;}
  .greeting-wrap .img-box .name {display: none;}
}
@media all and (max-width: 599px) {
  .greeting-wrap .txt-box .tabl-layout {padding-right: 0;}
  .greeting-wrap .txt-box .mob-layout {display: block; padding-right: 180rem;}
  .greeting-wrap .img-box {width: 170rem; height: 190rem;}
}
/* --------------------------------------------- 재단정보 > 인사말 - END --------------------------------------------- */





/* --------------------------------------------- 재단정보 > 연혁 - START --------------------------------------------- */
.year-box.fixed {position: fixed;}
.year-box.fixed-end {position: absolute; top: unset; bottom: 0;}

.history-area {display: flex; justify-content: space-between;}
.history-area .year-wrap .year-box .year-btn {display: block; text-align: left;}
.history-area .year-wrap .year-box .year-btn ~ .year-btn {margin-top: 16rem;}
.history-area .year-wrap .year-box .year-btn:not(.on) span {color: #D9DDE0; transition: color .2s ease;}
.history-area .year-wrap .year-box .year-btn span br {display: none;}
.history-area .history-wrap {width: 586rem;}
.history-area .history-wrap .history-item ~ .history-item {margin-top: 96rem;}
.history-area .history-wrap .history-item .year {padding-bottom: 24rem;}
.history-area .history-wrap .history-item .info-box .info ~ .info {margin-top: 24rem;}
.history-area .history-wrap .history-item .info-box .info {position: relative; display: flex; padding: 24rem 0; border-top: 1px solid #ECEEEF;}
.history-area .history-wrap .history-item .info-box .info .date {flex-shrink: 0; width: 100rem;}
.history-area .history-wrap .history-item .info-box .info .txts {width: 100%;}
.history-area .history-wrap .history-item .info-box .info .txts .txt ~ .txt {margin-top: 12rem;}

@media all and (max-width: 1023px) {
  .history-area .history-wrap {width: 500rem;}
  .history-area .history-wrap .history-item ~ .history-item {margin-top: 48rem;}
  .history-area .history-wrap .history-item .year {padding-bottom: 16rem;}
  .history-area .history-wrap .history-item .info-box .info {padding: 16rem 0;}
}

@media all and (max-width: 599px) {
  .history-area .year-wrap {width: 70rem;}
  .history-area .history-wrap {width: 230rem;}
  .history-area .year-wrap .year-box .year-btn span br {display: block;}
}
/* --------------------------------------------- 재단정보 > 연혁 - END --------------------------------------------- */





/* --------------------------------------------- 마이페이지 > 교육 사업 신청내역 - START --------------------------------------------- */
.progress-area .progress {position: relative; height: 6rem; border-radius: 100px; background-color: #ECEEEF;}
.progress-area .progress .progress-bar {position: absolute; left: 0; top: 0; bottom: 0; width: 0; height: 100%; background-color: #59B7E2; border-radius: 100px; transition: width 1s ease-in-out;}
.progress-area .progress-info {display: flex; justify-content: space-between; margin-top: 16rem;}
.progress-area .progress-info .txt {color: #697278;}
.progress-area .progress-info .progress-num {display: flex;}

.progress-list .list-item {display: flex; align-items: center; padding: 16rem 0 16rem 60rem; border: 1px solid #D9DDE0;}
.progress-list .list-item {margin-top: 12rem;}
.progress-list .list-item .txt-area {display: flex; align-items: center; width: 69%;}
.progress-list .list-item .txt-area .day {flex-shrink: 0; width: 80rem; min-width: 60px;}
.progress-list .list-item .txt-area .date {width: 100%;}
.progress-list .list-item .status-area {display: flex;}
.progress-list .list-item .status-area .status {position: relative;}
.progress-list .list-item .status-area .status.to {flex-shrink: 0; width: 83rem;}
.progress-list .list-item .status-area .status.off {padding-left: 40rem; margin-left: 88rem;}
.progress-list .list-item .status-area .status.off::after {content: ""; position: absolute; right: calc(100% + 10rem); top: calc(50% + 1px); transform: translateY(-50%); width: 68rem; height: 1px; border-top: 1px dashed #D9DDE0;}
.progress-list .list-item .status-area .status::before {content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 100%;}
.progress-list .list-item .status-area .status.to::before {left: 100%; background-color: #9CA1A6;}
.progress-list .list-item .status-area .status.off::before {right: 100%; background-color: #06161E;}
.progress-list .list-item .status-area .status .dt {margin-bottom: 2rem;}

.progress-sec {margin-top: 90rem;}
.progress-sec .progress-area + .progress-list {margin-top: 60rem;}

@media all and (max-width: 1023px) {
  .progress-area .progress-info {margin-top: 14rem;}
  .progress-list .list-item {padding: 20rem 0 20rem 30rem;}
  .progress-list .list-item .txt-area {width: 50%;}
}
@media all and (max-width: 599px) {
  .progress-list .list-item {padding: 16rem 0 16rem 20rem;}
  .progress-list .list-item .status-area {width: 34%;}
  .progress-list .list-item .txt-area {flex-shrink: 0; display: block; width: 102rem;}
  .progress-list .list-item .txt-area .day {width: auto; min-width: unset;}
  .progress-list .list-item .status-area {width: 100%;}
  .progress-list .list-item .status-area .status.to {width: 64rem;}
  .progress-list .list-item .status-area .status.off::after {width: 40rem;}
  .progress-list .list-item .status-area .status.off {padding-left: 24rem; margin-left: 60rem;}
  .progress-list .list-item .status-area .status .dt {margin-bottom: 0;}

  .progress-sec {margin-top: 85rem;}
}
/* --------------------------------------------- 마이페이지 > 교육 사업 신청내역 - END --------------------------------------------- */





/* --------------------------------------------- 마이페이지 > 근태체크 - START --------------------------------------------- */
.time-card-area {margin: 80rem 0;}
.time-card-area .title-area {margin-bottom: 40rem;}
.time-card-area .time-card-box-w {display: grid; grid-template-columns: 168rem 168rem 168rem auto; column-gap: 8rem; min-height: 110px;}
.time-card-area .time-card-box-w .time-card {min-width: 168rem; min-height: inherit; height: 168rem; padding-top: 24rem; text-align: center; background-color: #F5F6F7;}
.time-card-area .time-card-box-w .time-card .card-title {color: #06161E; font-size: max(18rem, 16px); line-height: 155%; letter-spacing: -0.36rem; border-radius: 2px;}
.time-card-area .time-card-box-w .time-card .day-count {margin-top: 12rem; font-family: "Pretendard_Bold", sans-serif; color: #06161E; font-size: 36rem; line-height: 145%; letter-spacing: -1.08rem;}
.time-card-area .time-card-box-w .time-card .day-count.zero {color: #C6CCD1;}
.time-card-area .time-card-box-w .time-card .biz-trip-w {display: flex; justify-content: center;}
.time-card-area .time-card-box-w .time-card .biz-trip-w .biz-trip-list {min-width: 130rem; padding: 0 30rem; border-right: 1px solid #ECEEEF;}
.time-card-area .time-card-box-w .time-card .biz-trip-w .biz-trip-list .info-txt {color: #697278; font-size: max(16rem, 14px); line-height: 160%; letter-spacing: -0.32rem;}
.time-card-area .time-card-box-w .time-card .biz-trip-w .biz-trip-list:last-child {border-right: 0;}
@media all and (max-width: 1023px) {
  .time-card-area {margin-top: 40rem; margin-bottom: 0;}
  .time-card-area .title-area {margin-bottom: 24rem;}
  .time-card-area .time-card-box-w {grid-template-columns: 1fr 1fr 1fr; column-gap: 10rem; row-gap: 10rem; min-height: unset;}
  .time-card-area .time-card-box-w .time-card {min-width: unset; height: 85rem; padding-top: 16rem;}
  .time-card-area .time-card-box-w .time-card:last-child {grid-column: 1 / span 3; height: 117rem;}
  .time-card-area .time-card-box-w .time-card .card-title {font-size: 13rem;}
  .time-card-area .time-card-box-w .time-card .day-count {margin-top: 0; font-size: 20rem;}
  .time-card-area .time-card-box-w .time-card .biz-trip-w .biz-trip-list {min-width: 25%; margin-top: 8rem; padding: 0 20rem;}
  .time-card-area .time-card-box-w .time-card .biz-trip-w .biz-trip-list .info-txt {font-size: 13rem;}
}


.attendance-area .option-row {margin-top: 10rem; padding: 28rem 40rem; border: 1px solid #D9DDE0; border-radius: 2px;transition: border .3s ease;}
.attendance-area .option-row:first-child {margin-top: 0; padding: 40rem 40rem 60rem;}
.attendance-area .option-row:first-child .data-enter-form {margin-top: 24rem; padding-top: 60rem; background: url("/common/images/icon-dash-border.png") 0 0/8px 1px repeat-x;}
.attendance-area .option-row:has(.form-radio input:checked) {border: 1px solid #9CA1A6;}
.attendance-area .option-row .data-enter-form .row {flex-wrap: wrap;}
.attendance-area .option-row .data-enter-form .row ~ .row {margin-top: 40rem;}
.attendance-area .option-row .data-enter-form .row .th .title {font-family: "Pretendard_Medium", sans-serif;}
.attendance-area .option-row .data-enter-form .row .td {width: auto;}
.attendance-area .option-row .data-enter-form .row .td:nth-child(2) {margin-right: 80rem;}
.attendance-area .option-row .etc-option-w .form-input {margin-left: 31rem; margin-top: 21rem;}
@media all and (max-width: 1023px) {
  .attendance-area {position:relative; margin-top: 60rem;}
  .attendance-area .option-row {padding: 26rem 24rem;}
  .attendance-area .option-row:first-child {padding: 24rem 24rem 32rem;}
  .attendance-area .option-row:first-child .data-enter-form {padding-top: 24rem;}
  .attendance-area .option-row .data-enter-form .row ~ .row {margin-top: 24rem;}
  .attendance-area .option-row .data-enter-form .row .td:nth-child(2) {margin-right: 0;}
}
/* --------------------------------------------- 마이페이지 > 근태체크 - END --------------------------------------------- */





/* --------------------------------------------- 마이페이지 > 수료증/확인증 인쇄 프린트 print - START --------------------------------------------- */
.print-popup {margin: 0 auto; width: 0; height: 0; padding:0; overflow: hidden;}
.print-popup .print-wrap {position: relative; height: 100%; padding: 100rem; text-align: center; border: 3px solid #59B7E2; border-radius: 2px; background: #fff url("/common/images/img-print-bg.svg") center center / 675rem no-repeat;}
.print-popup .print-wrap::before {content: ''; display: block; position: absolute; left: 50%; top: -29rem; width: 180rem; height: 58rem; margin-left: -90rem; padding: 0 12rem; background: #fff url("/common/images/icon-logo.svg") center center / 155rem no-repeat; z-index: 1;}
.print-popup .print-wrap .print-code {color: #06161E; font-size: max(24rem, 18px); line-height: 160%; text-align: left;}
.print-popup .print-wrap .print-title {margin-top: 62rem; font-family: "Pretendard_ExtraBold", sans-serif; color: #06161E; font-size: 80rem; line-height: 130%; letter-spacing: 80rem; text-align: center;}
.print-popup .def-list-w {margin-top: 100rem; margin-bottom: 100rem;}
.print-popup .def-list-w .def-list {display: flex;}
.print-popup .def-list-w .def-list .tit {width: 140rem; padding-right: 20rem; font-size: max(24rem, 18px); line-height: 150%; text-align: left;}
.print-popup .def-list-w .def-list .txt {font-size: max(24rem, 18px); line-height: 150%; text-align: left;}
.print-popup .print-con-txt {height: 290rem; font-family: "Pretendard_SemiBold", sans-serif; color: #06161E; font-size: 36rem; line-height: 160%; letter-spacing: -1.08rem;}
.print-popup .print-date {margin-top: 22rem; font-family: "Pretendard_Medium", sans-serif; color: #06161E; font-size: max(24rem, 18px); line-height: 150%; letter-spacing: -0.48rem; text-align: center;}
.print-popup .print-signature-area {position: relative; display: inline-flex; justify-content: center; margin-top: 100rem;}
.print-popup .print-signature-area .txt {position: relative; font-family: "Pretendard_ExtraBold", sans-serif; color: #06161E; font-size: 36rem; line-height: 150%; letter-spacing: 0.72rem; text-align: center; z-index: 2;}
.print-popup .print-signature-area img {position: absolute; right: -115rem; top: -45rem; width: 145rem; height: 142rem;} /* 2024-04-03 수정 */ 
@media print {
  html {font-size: .089vw;}  
  .print-popup {width: 100% !important; height: 100% !important; padding: 76rem 50rem;}

  @media (orientation: landscape) {
    html {font-size: .052vw;}
    .print-popup .def-list-w {margin-top: 70rem; margin-bottom: 50rem;}
    .print-popup .print-con-txt {height: 170rem;}
  }
}
/* --------------------------------------------- 마이페이지 > 수료증/확인증 인쇄 프린트 print - END --------------------------------------------- */




/* icon-infographic-arrow */
/* --------------------------------------------- 교육사업 > 교욱사업 소개, TRANS 인포그래픽 - START --------------------------------------------- */
.infographic {display: flex; justify-content: space-between; align-items: center; margin-top: 60rem;}
.infographic .txt-area {position: relative; display: flex;}
.infographic .txt-area::after {content: ""; position: absolute; left: calc(100% + 60rem); top: 50%; transform: translateY(-50%); width: 42rem; height: 44rem; background: url("/common//images/icon-infographic-arrow.svg") no-repeat center center / 100% auto;}
.infographic .txt-area .tit-box {width: 240rem; margin-right: 30rem; padding: 40rem; border-radius: 2px; background-color: #F5F6F7;}
.infographic .txt-area .tit-box .tit {font-size: 20rem; font-family: "Pretendard_Regular", sans-serif; color: #697278; line-height: 140%;}
.infographic .txt-area .tit-box .tit ~ .tit {margin-top: 32rem;}
.infographic .txt-area .tit-box .tit span {font-size: 24rem; font-family: "Pretendard_Medium", sans-serif; color: #06161E;}
.infographic .txt-area .txt-box {width: 374rem; padding: 58rem 40rem; border-radius: 2px; background-color: #ECF7FC;}
.infographic .txt-area .txt-box .txts ~ .txts {margin-top: 67rem;}
.infographic .txt-area .txt-box .txts {position: relative; padding-left: 36rem;}
.infographic .txt-area .txt-box .txts:before {content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: inline-block; width: 24rem; height: 24rem; background: url("/common/images/icon-checkcircle-checked.svg") no-repeat center center / 24rem 24rem;}
.infographic .txt-area .txt-box .txts .tit {display: none;}
.infographic .txt-area .txt-box .txts .txt {font-size: 16rem; font-family: "Pretendard_Medium", sans-serif; line-height: 160%;}
.infographic .circle-area .circle {display: flex; align-items: center; justify-content: center; width: 285rem; height: 285rem;  font-family: "Pretendard_Bold", sans-serif; font-size: 56rem; line-height: 140%; color: #fff; border-radius: 100%; letter-spacing: -.01em; background-color: #59B7E2;}
@media all and (max-width: 1023px) {
  .infographic {display: block; margin-top: 24rem}
  .infographic .txt-area::after {display: none;}
  .infographic .txt-area .tit-box {display: none;}
  .infographic .txt-area .txt-box .txts ~ .txts {margin-top: 32rem;}
  .infographic .txt-area .txt-box .txts:before {top: 1rem; transform: translateY(0);}
  .infographic .txt-area .txt-box .txts .tit {display: block; margin-bottom: 8rem; font-size: 18rem; font-family: "Pretendard_Regular", sans-serif; line-height: 140%;}
  .infographic .txt-area .txt-box .txts .tit span {font-size: 22rem; font-family: "Pretendard_Bold", sans-serif;}
  .infographic .txt-area .txt-box .txts .txt {font-size: 13rem; line-height: 165%;}
  .infographic .txt-area .txt-box {width: 100%; padding: 32rem 24rem}
  .infographic .circle-area .circle {width: 100%; height: 105rem; margin-top: 16rem; padding: 16rem 0; border-radius: 2px;}
}
/* --------------------------------------------- 교육사업 > 교욱사업 소개, TRANS 인포그래픽 - END --------------------------------------------- */