@charset "UTF-8";
:root {
    --white: #fff;
    --black: #111;
    --gray: #555;
    --dgray: #717171;
    --egray: #D9D9D9;
}
@font-face {
    font-family: "Pretendard";
    src: url("/_user/common/font/Pretendard-Thin.woff2") format("woff2");
    font-weight: 100;
    font-style: normal; }
@font-face {
    font-family: "Pretendard";
    src: url("/_user/common/font/Pretendard-ExtraLight.woff2") format("woff2");
    font-weight: 200;
    font-style: normal; }
@font-face {
    font-family: "Pretendard";
    src: url("/_user/common/font/Pretendard-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal; }
@font-face {
    font-family: "Pretendard";
    src: url("/_user/common/font/Pretendard-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal; }
@font-face {
    font-family: "Pretendard";
    src: url("/_user/common/font/Pretendard-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal; }
@font-face {
    font-family: "Pretendard";
    src: url("/_user/common/font/Pretendard-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal; }
@font-face {
    font-family: "Pretendard";
    src: url("/_user/common/font/Pretendard-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal; }
@font-face {
    font-family: "Pretendard";
    src: url("/_user/common/font/Pretendard-ExtraBold.woff") format("woff2");
    font-weight: 800;
    font-style: normal; }
@font-face {
    font-family: "Pretendard";
    src: url("/_user/common/font/Pretendard-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal; }

:root { --black: #111; --point-color: #02A959; --point-color2: #07419A;}

/* 색상코드 공통 e */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input, button, select, textarea {margin: 0; padding: 0; vertical-align: top;}
article, aside, details, figcaption, figure,
footer, header, menu, nav, section {display: block;}
label {cursor: pointer;}
input {-webkit-appearance: none;}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color: #aaa; font-size: 12px;}
input:-ms-input-placeholder, textarea::-ms-input-placeholder {color: #aaa; font-size: 12px;}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0 30px #fff inset; -webkit-text-fill-color: #555;}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {transition: background-color 5000s ease-in-out 0s;}
input.disabled {background: #f5f5f5;}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
/* Firefox */
input[type=number] {-moz-appearance: textfield;}
button, input {border-radius: 0;}
button {cursor: pointer;}
button:disabled {opacity: 0.5; pointer-events: none;}
button, input, select {vertical-align: middle; font-family: "Pretendard", sans-serif;}
body, input, select, textarea, button, table {border: none; background: none; font-size: 16px; color: #293A46; font-family: "Pretendard", sans-serif; font-weight: 400;}
select {appearance: none; -webkit-appearance: none; background: url("/_user/img/sub/icon_select_arrow.svg") 92% 50% no-repeat; border-radius: 0;}
select::-ms-expand {display: none;}
fieldset, img {border: 0;}
ol, ul {list-style: none;}
address, em {font-style: normal;}
a {text-decoration: none; color: #777; font-weight: 500;}
iframe {overflow: hidden; margin: 0; padding: 0; border: 0;}
fieldset {min-width: 0;}
table {border-collapse: collapse; border-spacing: 0; table-layout: fixed;}
h1, h2, h3, h4, h5, h6 {font-weight: bold; font-size: 100%; color: #333;}

.skip {width: 100%; height: 0; top: 0; left: 0;}
.skip a {display: block; overflow: hidden; position: absolute; top: 0; text-indent: -9999px;}
.skip a:focus, .skip a:active {display: block; position: absolute; top: 0; width: 100%; z-index: 9999; padding: 10px 0; font-size: 15px; line-height: 14px; text-indent: 0; text-align: center; color: #fff; background: #444;}

html, body {}
body {width: 100%; overflow-x: hidden; scroll-behavior: smooth;}
body {font-family: "Pretendard", sans-serif; ; font-size: 14px; letter-spacing: -0.7px; line-height: 1.5; word-break: break-all;}
body {top: 0 !important; overflow-x: hidden;}
section {overflow: hidden;}
.wrapper {min-width: 260px; position: relative; display: flex; flex-direction: column; min-height: 100%;}
.wrapper > * {flex-shrink: 0;}
.screen-out {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.indentate {text-indent: -11px; padding-left: 11px;}
.dimm {position: fixed; left: 0; top: 0; bottom: 0; opacity: 0; width: 100%; height: 0; background: rgba(0, 0, 0, 0.6); transition: opacity 0.3s;}
.dimm.on {opacity: 1; height: 100%; z-index: 1;}


.w-full {width: 100% !important;}
.block {display: block;}

/* flex */
.flex {display: flex;}
.flex-nowrap {flex-wrap: nowrap;}
.flex-wrap {flex-wrap: wrap; display: flex;}
.flex-row {flex-direction: row;}
.flex-col {flex-direction: column;}
.space-between {justify-content: space-between;}
.space-around {justify-content: space-around;}
.justify-center {justify-content: center !important;}
.justify-end {justify-content: flex-end;}
.baseline {align-items: baseline;}
.align-center {align-items: center;}

/*custom-scroll s*/
.custom-scroll::-webkit-scrollbar {width: 5px; height: 5px; padding-top: 15px;}
.custom-scroll::-webkit-scrollbar-track {background-color: #F3F4F5; border-radius: 10px; }
.custom-scroll.scroll-x-box::-webkit-scrollbar-track {background-color: #F3F4F5;}
.custom-scroll::-webkit-scrollbar-thumb {border-radius: 10px;background-clip: content-box; background-color: var(--black);}
f
@media screen and (min-width: 768px) {
    .custom-scroll::-webkit-scrollbar {width: 10px; }
}
@media screen and (min-width: 1024px) {
}
/*custom-scroll e*/

body.on {overflow: hidden;}
.point-color {color: #02A959 !important;}
.point-red {color: #D7373F !important;}
.mobhide, .webshow, .tabshow {display: none;}
.regular {font-weight: 300 !important;}
.medium {font-weight: 400 !important;}
.semibold {font-weight: 500 !important;}
.bold {font-weight: 700;}
.scroll-y {overflow-y: auto; -webkit-overflow-scrolling: touch;}
.scroll-x {overflow-x: auto; -webkit-overflow-scrolling: touch;}
.hidden {overflow: hidden;}
.max380 {max-height: 380px;}
.min500 {min-width: 500px;}
.min700 {min-width: 700px;}
.min900 {min-width: 900px;}
.max600 {max-width: 600px;}
.relative {position: relative;}
.tc {text-align: center !important;}
.tl {text-align: left;}
.tr {text-align: right;}
.pb0 {padding-bottom: 0 !important;}
.pt0 {padding-top: 0 !important;}
a.link {color: var(--point-color); font-weight: 400; text-decoration: underline; text-underline-offset: 2px;}
.noti-text {font-size: 13px; word-break: keep-all; letter-spacing: -0.26px;}
.sub-info {display: block; font-size: 14px; padding-top: 30px; text-align: center;}
@media screen and (max-width: 740px) {
    .table-wrap:last-of-type + .noti-text {margin-top: 15px;}
}
@media screen and (min-width: 768px) {
    .mobshow {display: none;}
    .tabshow {display: block;}
}
@media screen and (min-width: 1024px) {
    .sub-info {font-size: 15px; padding-top: 10rem;}
    .sub-info.pt-s {padding-top: 3rem;}
}
@media screen and (min-width: 1200px) {
    .webhide {display: none;}
    .mobhide, .webshow {display: inline-block;}
    .max380 {max-height: none;}
    .noti-text {font-size: 15px;}
}
/* color s */
.bg-white {background: var(--white);}
.white {color: var(--white);}
.black {color: var(--black);}
/* color e */

/* margin, padding */
.pt0 {padding-top: 0 !important;}
.pt10 {padding-top: 10px;}
.pt20 {padding-top: 20px;}
.pt30 {padding-top: 30px;}
.pt40 {padding-top: 40px;}
.pt50 {padding-top: 50px;}
.pb0 {padding-bottom: 0 !important;}
.pb10 {padding-bottom: 10px;}
.pb20 {padding-bottom: 20px;}
.pb30 {padding-bottom: 30px;}
.pb40 {padding-bottom: 40px;}
.pb50 {padding-bottom: 50px;}
.pl0 {padding-left: 0 !important;}
.pl10 {padding-left: 10px;}
.pl20 {padding-left: 20px;}
.pl30 {padding-left: 30px;}
.pl40 {padding-left: 40px;}
.pl50 {padding-left: 50px;}
.pr0 {padding-right: 0 !important;}
.pr10 {padding-right: 10px;}
.pr20 {padding-right: 20px;}
.pr30 {padding-right: 30px;}
.pr40 {padding-right: 40px;}
.pr50 {padding-right: 50px;}
.p15 {padding: 15px;}
.p20 {padding: 20px;}
.p30 {padding: 30px;}
.p40 {padding: 40px;}
.p50 {padding: 40px;}
.mt0 {margin-top: 0 !important;}
.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mt40 {margin-top: 40px;}
.mt50 {margin-top: 50px;}
.mb0 {margin-bottom: 0 !important;}
.mb10 {margin-bottom: 10px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}
.mb40 {margin-bottom: 40px;}
.mb50 {margin-bottom: 50px;}
.ml0 {margin-left: 0 !important;}
.ml10 {margin-left: 10px;}
.ml20 {margin-left: 20px;}
.ml30 {margin-left: 30px;}
.ml40 {margin-left: 40px;}
.ml50 {margin-left: 50px;}
.mr0 {margin-right: 0 !important;}
.mr10 {margin-right: 10px;}
.mr20 {margin-right: 20px;}
.mr30 {margin-right: 30px;}
.mr40 {margin-right: 40px;}
.mr50 {margin-right: 50px;}
.m15 {margin: 15px;}
.m20 {margin: 20px;}
.m30 {margin: 30px;}
.m40 {margin: 40px;}
.m50 {margin: 40px;}
.margin-top-auto {margin-top: auto;}

.table .bt-none {border-top: none !important;}
.table .bb-none {border-bottom: none !important;}

.line-4 {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;}

/*데이터 피커 s*/
.daterange-wrapper {display: flex; align-items: center; justify-content: center; white-space: nowrap; width: 100%;}
.daterange-wrapper > p , .daterange-wrapper > button {color: #fff; font-size: 12px; letter-spacing: -0.3px;}
.daterange-wrapper > button {width: 46px; height: 36px; background: #00287A; border-radius: 18px;}
.daterange-wrap #daterange { z-index: 1; width: 100%; height: 5.5rem; box-sizing: border-box; font-size: 12px;}
.daterange-wrap .date {display: flex; align-items: center;}
.date-button {display: flex; justify-content: center; align-items: center;}
.daterange-wrap .date , .daterange-wrap .time {position: relative;}
.daterange-wrap .time {max-width: 120px;}
.daterange-wrap .stime, .daterange-wrap .etime {margin-left: 5px;}
.date-wrap .date > input {width: 64px;}
.date-wrap .date > input[type="text"] , .date-wrap > em {color: #fff; font-size: 12px; letter-spacing: -0.3px;}
.date-wrap .date > input[type="text"]::placeholder {color: #fff; font-size: 12px; letter-spacing: -0.3px;}
.daterangepicker.show-calendar .ranges {margin-top: 0;}
.daterangepicker .drp-calendar.left , .daterangepicker .drp-calendar.right {padding: 20px 15px; box-sizing: border-box;}
.table-condensed > thead > tr:first-of-type .month {position: relative;}
.table-condensed > thead > tr:first-of-type .prev , .table-condensed > thead > tr:first-of-type .next {min-width: 32px; height: 32px; border: 1px solid #ddd; border-radius: 17px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; margin-bottom: 10px; position: absolute; top: 10px;}
.table-condensed > thead > tr:first-of-type .next {right: 15px;}
.daterangepicker select.monthselect , .daterangepicker select.yearselect {width: auto; font-size: 20px; font-weight: 500; color: #00287A; margin-right: 5px; position: absolute; top: 25%; left: 50%; transform: translate(-50%,-50%);}
.daterangepicker select.monthselect {left: 70%;}
.daterangepicker select.yearselect {left: 37%;}
.table-condensed > thead > tr:nth-of-type(2) {border-top: 1px solid #ddd !important;}
.table-condensed > thead > tr:nth-of-type(2) > th:first-of-type {color: #FF7575;}
.table-condensed > thead > tr:nth-of-type(2) > th:last-of-type {color: #10A0CF;}
.table-condensed > thead > tr:nth-of-type(2) > th , .table-condensed > tbody > tr > td {border: 1px solid #ddd !important;width: auto !important;}
.daterangepicker .drp-buttons {border-top: none !important;}
.daterangepicker.show-calendar .drp-buttons {justify-content: center;}
.daterangepicker .drp-selected {display: none;}
.daterangepicker .start-date.active:after  {position: absolute; content: ''; top: 0; right: -6px; width: 0; height: 0; border-bottom: 13px solid transparent; border-top: 13px solid transparent; border-left: 6px solid #0090DF;}
.daterangepicker .end-date.active:after {position: absolute; content: ''; top: 0; left: -6px; width: 0; height: 0; border-bottom: 13px solid transparent; border-top: 13px solid transparent; border-right: 6px solid #0090DF;}
.daterangepicker .start-date.end-date.active:after {opacity: 0;}
.daterangepicker {left: 50% !important; transform: translateX(-50%); z-index: 1;}
.daterangepicker .drp-calendar {max-width: none;}
.fc-time , .fc-title {display: none;}
.daterangepicker select.monthselect {font-weight: 700;}
.drp-calendar th span {display: none;}
.daterange-wrap input::placeholder {color: #333;}
.daterange-wrap {flex: 1; position: relative;}
.daterange-wrap img {position: absolute; right: 10px; top: 50%; transform: translateY(-50%);}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .daterange-wrapper {width: 290px;}
}
@media (min-width: 564px) {
    .daterangepicker {width: 55%;}

}
@media screen and (min-width: 1024px) {
    .daterangepicker {padding: 40px 50px 30px; margin-top: 20px; width: 640px;}
    .daterangepicker .drp-calendar {max-width: 270px;}
    .daterange-wrapper > p , .daterange-wrapper > button {font-size: 16px;}
    .daterange-wrapper > button {width: 91px; height: 50px; line-height: 50px; border-radius: 25px;}
    .daterange-wrap #daterange {font-size: 18px;}
    .daterange-wrap #daterange input::placeholder {font-size: 18px;}
    .daterange-wrap>div:before {width: 50px; height: 50px; right: -50px;}
    .daterange-wrap>div:after {width: 24px; height: 23px; right: -37px;}
    .date-wrap .date > input[type="text"] , .date-wrap > em {font-size: 16px; letter-spacing: -0.4px;}
    .date-wrap .date > input[type="text"]::placeholder {color: #fff; font-size: 16px; letter-spacing: -0.4px;}
    .daterange-wrap img {position: absolute; right: 20px;}
    .daterangepicker .drp-calendar.left , .daterangepicker .drp-calendar.right {min-width: 300px;}
    .daterangepicker .drp-calendar.left {padding: 0; margin-right: 40px;}
    .daterangepicker .drp-calendar.right {padding: 0;}
    .daterangepicker .drp-calendar.left .calendar-table {padding-right: 0;}
    .daterangepicker select.monthselect , .daterangepicker select.yearselect {font-size: 24px;}
    .table-condensed > thead > tr:first-of-type {height: 50px; position: relative;}
    .table-condensed > tbody {height: 260px;}
    .table-condensed > thead > tr:first-of-type .prev , .table-condensed > thead > tr:first-of-type .next {width: 34px; height: 34px;}
    .table-condensed > thead > tr:first-of-type .prev {left: 0; top: 0;}
    .table-condensed > thead > tr:first-of-type .next {right: 0; top: 0;}
    .daterangepicker.show-calendar .drp-buttons {padding-top: 25px; padding-bottom: 0;}
    .daterangepicker .start-date.active:after {right: -12px; border-bottom: 21.665px solid transparent; border-top: 21.665px solid transparent; border-left: 12px solid #0090DF;}
    .daterangepicker .end-date.active:after {left: -12px; border-bottom: 21.665px solid transparent; border-top: 21.665px solid transparent; border-right: 12px solid #0090DF;}
    .daterangepicker .drp-buttons .btn {width: auto; height: auto;}
    .daterangepicker .ranges, .daterangepicker .drp-calendar {float: left;}
}

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {
    @media screen and (min-width: 1024px) {
        .table-condensed > thead > tr:first-of-type .prev {left: 50px; top: 38px;}
        .table-condensed > thead > tr:first-of-type .next {right: 50px; top: 38px;}
    }
}}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (min-width: 1024px)  {
    .daterange-wrapper {width: 469px;}
    .table-condensed > tbody {height: 42px;}
    .table-condensed > thead > tr:first-of-type .prev {left: 50px; top: 20px;}
    .table-condensed > thead > tr:first-of-type .next {right: 50px; top: 20px;}
    .daterangepicker td.in-range::before {transform: none; height: 166%; top: 0;}
}

@media screen and (min-width: 1024px) {
    .result-table.type02 table tbody tr td, .result-table.type02 table thead tr th {width: 20%; padding: 18px 0; text-align: center;}
    .result-table.type02 table tbody tr td.date, .result-table.type02 table thead tr th.date {width: 13.5%; padding: 18px 0; text-align: center;}
    .result-table.type02 table tbody tr td.tit, .result-table.type02 table thead tr th.tit {width: 29%; padding: 18px 0; text-align: center; word-break: keep-all;}
}
fieldset {min-width: unset;}
.sub-top .tit {text-align: center; word-break: keep-all;}
@media screen and (min-width: 768px){
    .total-search-item .daterange-wrap {height: 48px; line-height: 48px;}
}
@media screen and (min-width: 1024px){
    .daterange-wrap #daterange::placeholder {font-size: 18px;}
}
/*데이터 피커 e*/

/* sub 공통 레이아웃 s */
html { font-size: 10px; }
em.bold {font-weight: bold;}
em.ex-bold {font-weight: 800;}
.point-color {color: var(--point-color) !important;}
.black {color: #111;}
.orange {color: #CC3A36;}
.sub-container-wrap {padding: 0 0 6rem; box-sizing: border-box;}
.sub-head-title {font-size: 3.6rem; padding-bottom: 15px; color: var(--black); letter-spacing: -2.16px;}
.contents {padding: 4rem 1.5rem 0; max-width: 148rem; box-sizing: border-box; margin: -2rem auto 0; border-radius: 2rem 2rem 0 0; background: #fff;}
.sub-contents {padding-bottom: 40px;}
.sub-contents:last-of-type {padding-bottom: 0;}
.sub-box {margin-bottom: 20px;}
.sub-box:last-of-type {margin-bottom: 0;}
.inner-title {font-size: 17px; color: var(--white);}
.inner-title-s {font-size: 15px; color: var(--black); font-weight: 400;}
.title-box {display: flex; align-items: center; gap: 0.5rem; padding-bottom: 15px;}
.title-box.type-line {border-bottom: 1px solid #E4E4E4; padding-bottom: 1rem; margin-bottom: 2rem;}
.title-box.type-center {justify-content: center; text-align: center;}
.sub-title {display: flex; align-items: center; font-size: 2.5rem; color: var(--black); font-weight: 700; word-break: keep-all;}
.sub-title.type-center {justify-content: center; text-align: center;}
.sub-title-m {text-align: center; font-size: 2.2rem; font-weight: 700; padding-bottom: 4rem;}
.sub-title-light {font-size: 2rem; font-weight: 500; padding-bottom: 1.5rem; color: var(--black);}
.sub-deco-title {font-size: 2.2rem; font-weight: 700; word-break: keep-all; color: var(--black); line-height: 1.7;}
.sub-deco-title em {position: relative; font-size: 3rem; color: var(--point-color); vertical-align: baseline; font-weight: 800;}
.sub-deco-title em.black {color: var(--black);}
.sub-deco-title em::before, .sub-deco-title em::after {content: ''; position: absolute; display: block; }
/*.sub-deco-title em.underline::before {width: 100%; height: 5rem; left: 0; bottom: 0; background: url("/_user/support/img/sub/deco-tit-line.svg") no-repeat center bottom / 100%; transform-origin: left center;transform: scaleX(0);}*/
.sub-deco-title .underline {position: relative;display: inline-block;--progress: 0;}
.sub-deco-title .underline::before {content: ""; position: absolute; left: 0; bottom: 0; width: calc(100% * var(--progress)); height: 5rem; background: url("/_user/support/img/sub/deco-tit-line.svg") no-repeat center bottom / 100%; transform-origin: left center;}
.sub-deco-title .underline.type-s::before {content: ""; position: absolute; left: 0; bottom: 0; width: calc(100% * var(--progress)); height: 5rem; background: url("/_user/support/img/sub/deco-tit-line-s.svg") no-repeat center bottom / 100%; transform-origin: left center;}
.sub-deco-title em.star::after {width: 2.2rem; height: 2.8rem; right: -1.7rem; top: -1.8rem; font-size: 3rem; color: var(--point-color); background: url("/_user/support/img/sub/deco-tit-star.svg") no-repeat center / contain;}
.sub-contents .text-box {font-size: 15px; color: var(--gray); letter-spacing: -0.3px; font-weight: 400;}
.sub-contents .text-box + .table-wrap {margin-top: 5px;}
.sub-contents + .btn-wrap, .sub-box + .btn-wrap {padding-top: 0;}
.sub-section + .sub-section {padding-top: 4rem;}
.sub-title-s {font-weight: 500; padding-bottom: 1rem; color: var(--black);}
.sub-deco-title-m {font-size: 2.5rem; line-height: 1.5; color: var(--black);}
.sub-deco-title-m .color {color: #7698E8;}
.sub-deco-title-s {text-align: center; font-size: 1.6rem; word-break: keep-all; max-width: 80%; margin: 0 auto; color: var(--black);}
.sub-container .sec-box {padding: 1.5rem; border-radius: 2rem; background: #fff; border: 1px solid #ECEDF0; box-shadow: 16px 20px 80px 0 rgba(0, 0, 0, 0.05);}
.btn-tooltip {display: inline-block; width: 3.5rem; height: 3.5rem; background: url("/_user/parents/img/sub/ico-tooltip.svg") no-repeat center / contain; transition: .3s;}
.btn.grad {box-shadow:5px 12px 20px rgba(0,0,0,.05);border-radius:1.5rem;background:linear-gradient(90deg,#55D7FF,#3081FF,#B4A5FF,#55D7FF);color:#fff;background-size:300% 100%;transition:.3s;}

@keyframes gradmove {0%{background-position:0 0;}100%{background-position:300% 0;}}

@media screen and (min-width: 768px){
    .contents {padding: 4rem 3rem;}
    .mob-br {display: none;}
    .btn-tooltip:hover {opacity: 0.8;}
    .btn.grad:hover {animation:gradmove 3s linear infinite;}
}
@media screen and (min-width: 1200px){
    .sub-container-wrap {position: relative; padding: 0 0 10rem;}
    .sub-container-wrap.bg::before {content:''; display: block; width: 110rem; height: 80rem; background: url("/_user/support/img/sub/bg-login.png") no-repeat center left / contain; position: absolute; top: 0; left: 0; z-index: -1;}
    .sub-container {display: flex; margin: 0 auto;}
    .contents-wrap {width: 100%;}
    .sub-head-title {font-size: 4rem; padding-bottom: 1rem;}
    .sub-contents {padding-bottom: 60px;}
    .sub-box {margin-bottom: 40px;}
    .contents {padding: 5rem 4rem 2rem; margin: 0 auto;}
    .inner-title {font-size: 18px;}
    .inner-title-s {font-size: 17px;}
    .title-box {align-items: baseline;}
    .title-box.type-line {padding-bottom: 2rem; margin-bottom: 4rem;}
    .title-box.type-line .sub-title {padding-bottom: 0;}
    .sub-title {font-size: 3.6rem; padding-bottom: 3rem;}
    .sub-title-m {font-size: 2.6rem; padding-bottom: 6rem;}
    .sub-title-s {font-size: 2.2rem; padding-bottom: 1.5rem;}
    .sub-title-light {font-size: 3rem;}
    .sub-deco-title {font-size: 4rem;}
    .sub-deco-title em {font-size: 6rem;}
    .sub-deco-title em.underline::before {height: 9rem;}
    .sub-deco-title-m {font-size: 3.6rem;}
    .sub-deco-title-s {font-size: 2.4rem;}
    .sub-contents .text-box {font-size: 18px; padding-bottom: 5px; word-break: keep-all;}
    .sub-contents .text-box:last-of-type {padding-bottom: 0;}
    .sub-contents .text-box + .table-wrap {margin-top: 10px;}
    .sub-contents .text-box + .table-wrap:last-of-type {padding-bottom: 0;}
    .sub-section + .sub-section {padding-top: 10rem;}
    .sub-section + .sub-section.top-s {padding-top: 6rem;}
    .sub-container .sec-box {padding: 4rem;}
    .btn.grad {min-width: 23.3rem;}
}
/* sub 공통 레이아웃 e */

/* 브래드크럼 s */
.breadcrumbs {display: flex; justify-content: center; padding-bottom: 3rem;}
.breadcrumb-item +.breadcrumb-item::before {content: ""; display: inline-block; width: 1.6rem; height: 1.2rem; margin-right: 8px; background: url("/_user/support/img/sub/ico-bread-arrow.svg") no-repeat center / contain;}
.breadcrumb-item, .breadcrumb-item a {display: flex; align-items: center; color: var(--gray); font-weight: 400; font-size: 1.4rem; padding-left: 8px;}
.breadcrumb-item a:first-of-type {padding-left: 0;}
.breadcrumb-item.active {font-weight: 500;}
@media screen and (min-width: 1200px) {
    .breadcrumbs {gap: 12px; padding-bottom: 6rem;}
    .breadcrumb-item, .breadcrumb-item a, .breadcrumb-item.active {font-size: 15px;}
    .breadcrumb-item +.breadcrumb-item::before {margin-right: 12px;}
}
/* 브래드크럼 e */

/* 버튼 모음 s*/
.btn-wrap {padding-top: 30px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px;}
.btn {width: auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; min-width: 12rem; min-height: 4.5rem; padding: 0 3rem; transition: all 0.3s; box-sizing: border-box; font-size: 1.7rem; word-break: keep-all; font-weight: 400; color: var(--gray); letter-spacing: 0;}
.btn.w-full {width: 100%;}
.btn-wrap .btn {height: 5.6rem; max-width: 50rem; border-radius: 1.5rem; font-size: 2rem;}
.btn.border {border: 3px solid var(--point-color); color: var(--point-color);}
.btn.shadow {box-shadow: 8px 8px 29px -4px rgba(0, 0, 0, 0.17);}
.btn.bg-color {background: #EFF5FF; color: var(--point-color); border: 1px solid #246BEB;}
.btn.border.blue {border-color: var(--point-color); color: var(--point-color);}
.btn.border.gray {border-color: var(--dgray);}
.btn.border.red {border-color: #D7373F; color: #D7373F;}
.btn.border.blue:hover {background-color: #F3F9FF;}
.btn.border.gray:hover {background-color: #E6E9F4; border-color: var(--gray); color: var(--black)}
.btn.border.red:hover {background-color: #BF161E1A;}
.btn.color {color: var(--white);}
.btn.color.point  {background-color: var(--point-color);}
.btn.color.blue  {background-color: var(--point-color);}
.btn.color.purple {background-color: #43425D;}
.btn.color.red {background-color: #D7373F;}
.btn.color.blue:hover  {background-color: #063F8B;}
.btn.color.purple:hover {background-color: #2F2E50;}
.btn.color.red:hover {background-color: #BF161E;}
.btn.border.blue.disabled {background-color: #F3F9FF; border-color: rgba(50, 116, 217, 0.6); color: rgba(50, 116, 217, 0.5);}
.btn.border.gray.disabled {background-color: rgba(242, 242, 242, 0.2); color: rgba(85, 85, 85, 0.5); border-color: var(--dgray);}
.btn.border.red.disabled {background-color: #FCF4F4; border-color: rgba(191, 22, 30, 0.2); color: rgba(215, 55, 63, 0.5);}
.btn.color.blue.disabled {background-color: rgba(50, 116, 217, 0.6);}
.btn.color.purple.disabled {background-color: #C1C0CA;}
.btn.color.red.disabled {background-color: rgba(215, 55, 63, 0.5);}
.btn.dashed {border: 1px dashed; background-color: var(--white); min-height: 36px;}
.btn.dashed.blue {border-color: var(--point-color); color: var(--point-color);}
.btn.dashed.red {border-color: #D7373F; color: #D7373F;}
.btn.dashed.grayblue {border-color: #43425D; color: #43425D;}
.btn.dashed.blue:hover, .btn.dashed.red:hover, .btn.dashed.grayblue:hover,
.btn.dashed.blue:focus, .btn.dashed.red:focus, .btn.dashed.grayblue:focus {border-style: solid;}
.btn.dashed.blue.disabled {background-color: #F3F9FF; border-style: dashed; color: rgba(50, 116, 217, 0.5);}
.btn-state {width: 100%; height: 100%; min-height: 36px; padding: 8px; font-size: 13px; text-align: center; letter-spacing: -0.6px; border-radius: 4px; box-sizing: border-box;}
.btn-state.ing {border: 1px dashed #4C76B6; color: #4C76B6; opacity: 1; cursor: auto;}
.btn-state.reserve {border: 1px solid #4C76B6; background-color: #4C76B6; color: var(--white);}
.btn-state.loan {border: 1px solid #1156A4; background-color: #1156A4; color: var(--white);}
.btn-state.smart {border: 1px solid #003A7A; background-color: #003A7A; color: var(--white);}
.btn-state.smart:disabled {opacity: 1; border: 1px dashed #003A7A; background: var(--white); color: #003A7A;}
.btn-state.delivery {border: 1px solid #007BA4; background-color: #007BA4; color: var(--white);}
.btn-state.interest {border: 1px solid #32445E; background-color: #32445E; color: var(--white);}
.btn-state.memo {border: 1px solid #02845C; background-color: #02845C; color: var(--white);}
.btn-state.delay {border: 1px solid #43425D; background-color: #43425D; color: var(--white);}
.btn-state.chk {border: 1px solid #D3D3D3; background-color: #fff; color: var(--gray);}
.btn-state.del {border: 1px solid #D7373F; background-color: #D7373F; color: var(--white);}
.btn-state.modi {background-color: #43425D; color: var(--white);}
.btn-state.modi:hover {background-color: #2F2E50;}

td .btn-state {max-width: 137px;}
@media screen and (min-width: 768px) {
    .btn {width: auto; height: 5.5rem;}
    .btn.border:hover {background: var(--point-color); color: #fff;}
    .btn:hover {opacity: 0.8;}
    .btn {border-radius: 7px; min-width: 180px; min-height: 65px; padding: 0 15px; font-size: 15px;}
}
@media screen and (min-width: 1200px) {
    .btn-wrap {padding-top: 40px;}
    .btn-state {font-size: 15px; min-height: 40px;}
    .btn.dashed {min-height: 40px;}
}
/* 버튼 e */

/* custom scroll s */
.custom-scroll-sub::-webkit-scrollbar {width: 5px; height: 15px;}
.custom-scroll-sub::-webkit-scrollbar-thumb {height: 10% !important; background: var(--point-color);border-radius: 0;}
.custom-scroll-sub::-webkit-scrollbar-track {background: #EBEBEB; border-radius: 0;}
/* custom scroll s */

.btn-top {position: fixed; right: 1rem; bottom: 2%; width: 5.5rem; height: 5.5rem; display: flex; justify-content: center; align-items: center; border-radius: 3rem; background: #1277D6;}
.btn-top::before {content: ""; width: 0.8rem; height: 0.8rem; border-top: 0.3rem solid #fff; border-right: 0.3rem solid #fff; transform: rotate(-45deg); position: absolute; top: 1.8rem;}
.btn-top::after {content: ""; width: 0.3rem; height: 1.6rem; background: #fff; position: absolute; top: 2rem;}
@media screen and (min-width: 1200px) {
    .btn-top {width: 8rem; height: 8rem; border-radius: 8rem;}
    .btn-top::before {display: none;}
    .btn-top::after {content: "TOP"; width: auto; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); background: transparent; color: #fff; font-size: 2rem;}
}

/* tab style s */
.tab-nav{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 1px solid #C1C1C1;
    background: #F8F8F8;
    margin-bottom: 20px;
}
.tab-nav>li{
    flex: 1;
    width: 100%;
    border-bottom: 1px solid #C1C1C1;
}
.tab-nav>li:last-child{
    border-bottom: none;
}
.tab-nav>li>a{
    display: block;
    text-align: center;
    padding: 10px;
    color: #111;
    font-size: 16px;
}
.tab-nav>li.on>a{
    color: #fff;
    background: #3F4FC0;
    letter-spacing: -1px;
}

@media screen and (min-width: 768px){
    .tab-nav{
        flex-direction: row;
        margin-bottom: 30px;
    }
    .tab-nav>li{
        flex: 1;
        width: 100%;
        border-right: 1px solid #C1C1C1;
        border-bottom: none;
    }
    .tab-nav>li:last-child{
        border-right: none;
    }
    .tab-nav>li>a{
        font-size: 15px;
    }
}
@media screen and (min-width: 1024px){

}
/* tab style e */