@import url(reset.css);
/*@import url('swiper-bundle.min.css');*/
/*@import url('../fonts/font.css');*/
@import url('/static/style/fonts_new/font.css');

:root {
	--gnbBgHeight: 15.7rem;
}

*::before, *::after {box-sizing: border-box;}
li::marker {display: none !important;}
a:focus, button:focus, .swiper-pagination:focus {
	/*outline-offset: -0.4rem;*/
	/*outline: 0.2rem solid var(--primary-50);*/
	/*border-radius: var(--rd-1);*/
	transition: var(--transition-1) !important;
}
.active a:focus, .active:focus, .active button:focus, .active .swiper-pagination:focus {
	outline-color: var(--white);
}

@keyframes underline {
    0%   {transform: scaleX(0); transform-origin: bottom left; opacity: 0;}
    100% {transform: scaleX(1); opacity: 1;}
}

@keyframes slide-up {
  0% {transform: scaleY(0); transform-origin: bottom;}
  100% {transform: scaleY(1); transform-origin: bottom;}
}

@keyframes slide-down {
  0% {transform: scaleY(1); transform-origin: top;}
  100% {transform: scaleY(0); transform-origin: top;}
}

@keyframes noti {
    0%   {transform: scale(0); opacity: 1;}
    100% {transform: scale(1); opacity: 0;}
}

div::-webkit-scrollbar {width: 0.6rem;}
div::-webkit-scrollbar-thumb {background: var(--gray-20); border-radius: var(--rd-12);}

html {font-family: "Pretendard"; position: relative; width: 100%; height: 100%; font-size: 62.5%; color: var(--gray-90); font-weight: 300; word-break: keep-all; word-wrap: break-word; -webkit-tap-highlight-color: transparent;}
body {position: relative; padding-top: 0 !important; font-size: var(--fz-body-md); text-align: left !important;}
a {display: flex; align-items: center; height: 100%; color: var(--gray-90);}
button, input[type=submit], input[type=button] {overflow: visible; margin: 0; background-color: transparent; border: none; cursor: pointer; font: inherit;}
input[type=radio], input[type=checkbox] {position: absolute; left: 0; width: inherit; height: inherit; width: 0; height: 0;}
input[type=radio]:hover, input[type=checkbox]:hover, input[type=radio] + label:hover, input[type=checkbox] + label:hover {cursor: pointer;}
input[type=number] {padding-right: var(--spacer8) !important; text-align: right; appearance: none;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {appearance: none; margin: 0;}

.left {text-align: left!important; justify-content: flex-start !important;}
.center {text-align: center!important; justify-content: center !important;}
.right {text-align: right!important; justify-content: flex-end !important;}
.between {justify-content: space-between !important;}
.c-gray {color: var(--gray-60) !important;}
.c-red, .c-red li {color: #BD2C0F !important; margin: 0 var(--spacer1); font-weight: 400;}
.c-red li::before {filter: invert(28%) sepia(93%) saturate(3100%) hue-rotate(353deg) brightness(90%) contrast(97%);}
.c-red2, .c-red2 li {color: var(--red2) !important; margin: 0 var(--spacer1); font-weight: 400;}
.c-red3, .c-red3 li {color: #DC0E35 !important; margin: 0 var(--spacer1); font-weight: 400;}
.c-blue, .c-blue li {color: var(--primary-50) !important; margin: 0 var(--spacer1); font-weight: 500;}
.c-blue li {font-size: var(--fz-body-sm) !important; font-weight: 400;}
.c-blue .ico-info2::before {top: 0.3rem; background: url(/static/images/kosmes_new/img/ico_info2_b.svg); background-size: contain;}
.bold {color: var(--black) !important; font-weight: 500;}
.align-top2 {align-items: flex-start !important; padding-top: var(--spacer1);}

/* btn */
.btn {display: inline-flex; align-items: center; justify-content: center; position: relative; width: auto; min-width: fit-content; min-height: 4rem; padding: 0 var(--spacer3); background-color: var(--primary-50); border: 0.1rem solid var(--border); border-radius: var(--rd-6); font-size: var(--btn-fz-md); background-color: var(--white); color: var(--gray-90); transition: var(--transition-2); font-weight: 300; line-height: 1;}
.btn.sm {min-width: 4.5rem; min-height: 3rem; padding: 0 var(--spacer2);}
.btn.mds {min-height: 3.2rem;}/* @fix. md 클래스 사용중인 것 같아 mds 로 추가 */
.btn.lg {min-width: 10.5rem; min-height: 5rem; height: auto; padding: 0 var(--spacer6); border-radius: var(--rd-8); font-size: var(--btn-fz-md); font-weight: 500;}
.btn.xlg {min-width: 20rem; min-height: 5rem; padding: 0 var(--spacer6); border-radius: var(--rd-8); font-size: var(--btn-fz-md); font-weight: 500;}
.btn.wide {min-width: 20rem !important;}
.btn:focus {outline-offset: -0.4rem; background-color: var(--gray-10); outline-color: var(--gray-60);}
.btn:active {background-color: var(--gray-10);}

.btn.blue {background-color: var(--primary-1); border-color: var(--primary-50); color: var(--primary-50);}
.btn.blue:hover {background-color: var(--primary-5);}
.btn.blue:focus {outline-offset: -0.4rem; outline-color: var(--white);}
.btn.blue:active {background-color: var(--primary-10); border-color: var(--primary-50); color: var(--primary-70);}

.btn.primary {background-color: var(--primary-50); color: var(--white); border-color: var(--primary-50);}
.btn.primary:disabled {background: #B0BBC7; border-color: #B0BBC7; cursor: default;}
.btn.primary:focus {outline-color: var(--white);}
.btn.primary:active {outline-color: var(--white);}
a[class*=ico-]::after, button[class*=ico-]::after {content: ''; display: inline-flex; width: 1.8rem; height: 1.8rem; background-position: center; background-size: contain; background-repeat: no-repeat;}

em {font-style: normal;}
.c-primary {color: #256EF4 !important;}

.content {margin-top: var(--spacer20);}
.content:first-child {margin-top:0;}

.btn.red {background-color: var(--red); color: var(--white); border-color: var(--red);}
.btn.red:hover {background-color: var(--red2);}
.btn.red:focus {outline-offset: -0.4rem; outline-color: var(--white);}
.btn.red:active {background-color: var(--red2); border-color: var(--red);}

.btn.gray {background-color: var(--gray-30); border-color: var(--gray-50); color: var(--gray-70);}
.btn.gray:hover {background-color: var(--gray-20);}
.btn.gray:focus {outline-offset: -0.4rem; background-color: var(--gray-20); outline-color: var(--primary-50);}
.btn.gray:active {background-color: var(--gray-20);}

.btn.quick {min-height: 2rem; padding: var(--spacer2); border: 0; background-color: transparent; color: var(--white);}
.btn.quick::after {content: ''; display: block; min-width: 1.8rem; min-height: 1.8rem; margin-left: var(--spacer2); background: url(/static/images/kosmes_new/img/ico_arr_quick.svg) no-repeat;}
.btn.quick:focus {outline-color: var(--white);}

[class*=ico-] {position: relative; gap: var(--spacer1);}
[class*=ico-]::before, [class*=ico-]::after {content: ''; background-position: center; background-size: contain; background-repeat: no-repeat;}
.btn-txt {display: flex; align-items: center; border: 0; background-color: inherit; padding: 0 var(--spacerdefault2) !important; color: inherit;}
.btn-txt:focus {outline-offset: 0.2rem; outline: 0.2rem solid var(--primary-50);}
.btn-txt:hover {background-color: var(--secondary-5);}
.btn-txt:active {background-color: var(--secondary-10);}
.ico-go {position: relative;}
.ico-go::before, .ico-go::after {background-image: url(/static/images/kosmes_new/img/ico_go.svg);}
.ico-go-w::before, .ico-go-w::after {background-image: url(/static/images/kosmes_new/img/ico_go_w.svg);}
.ico-go-b::before, .ico-go-b::after {background-image: url(/static/images/kosmes_new/img/ico_go_b.svg);}
.ico-reset::before, .ico-reset::after {background-image: url(/static/images/kosmes_new/img/ico_refresh_16.svg);}
.ico-arr::after {width: 1.6rem !important; height: 1.6rem !important; background-image: url(/static/images/kosmes_new/img/ico_arrow_right.svg);}
.ico-arr-w::after {width: 1.6rem !important; height: 1.6rem !important; background-image: url(/static/images/kosmes_new/img/ico_arrow_right_w.svg);}
.ico-arr-down::after {background-image: url(/static/images/kosmes_new/img/ico_arrow_down.svg);}
.ico-logout::before, .ico-logout::after {background-image: url(/static/images/kosmes_new/img/ico_logout_16.svg);}
.ico-upload::before, .ico-upload::after {background: url(/static/images/kosmes_new/img/ico_file_upload.svg);}
.blue.ico-upload::before, .blue.ico-upload::after {filter: invert(45%) sepia(90%) saturate(3000%) hue-rotate(205deg) brightness(110%) contrast(98%);}
.ico-down {min-width: 8.2rem;}
.ico-down::after {width: 1.5rem !important; height: 1.4rem !important; margin-left: var(--spacer1); background: url(/static/images/kosmes_new/img/ico_down.svg);}
.ico-del {height: auto; text-indent: -9999px;}
.ico-del::after {width: 1.2rem !important; height: 1.2rem !important; background-image: url(/static/images/kosmes_new/img/ico_del1_20.svg);}
.ico-calcul {gap: var(--spacer2);}
.ico-calcul::after {width: 1.8rem !important; height: 2.3rem !important; background: url(/static/images/kosmes_new/img/ico_calcul.svg);}
.ico-pdf::before, .ico-pdf::after {width: 1.8rem !important; height: 2.3rem !important; background: url(/static/images/kosmes_new/img/ico_pdf.png);}
.ico-help {max-width: 2.2rem; background-image: url(/static/images/kosmes_new/img/ico_help_25.svg);}
.ico-danger {margin-top: var(--spacer5); padding-left: var(--spacer6) !important; color: var(--red) !important;}
.ico-danger::before {content: ''; position: absolute; top: 0.3rem; left: 0; min-width: 1.8rem; min-height: 1.8rem; background-image: url(/static/images/kosmes_new/img/ico_danger.svg);}

.btn-ico.ico-pw-visible {background-image: url(/static/images/kosmes_new/img/ico_pw_visible.svg);}
.btn-ico:focus {outline-offset: 0.4rem; outline: 0.2rem solid var(--primary-50);}
.btn-ico:hover, .btn-ico:active {background-color: inherit;}
.btn-ico[class*=ico-].sm {width: 2.4rem; height: 2.4rem; background-color: transparent;}
.btn.ico-del {width: 2.4rem; height: 2.4rem; padding: 0;}
.btn.ico-del::after {width: 1.5rem!important; height: 1.5rem !important; background: url(/static/images/kosmes_new/img/ico_del1_21.svg) no-repeat center center;}
.btn.ico-upload {padding: 0 var(--spacer4);}
.btn.ico-upload::before {content: ''; display: inline-flex; width: 1.6rem; height: 1.6rem; background-position: center; background-size: contain; background-repeat: no-repeat;}
.btn.ico-upload::after {content: none;}
.btn.ico-upload + .ico-info2 {padding-left: var(--spacer5);}
.btn.ico-upload + .ico-info2::before {top: 0.2rem; left: 0;}
.btn.sm.ico-down {min-width: 3.2rem; background: var(--white); border: 1px solid var(--border); border-radius: 4px;}
.btn.sm.ico-down::before {content: none;}
.btn.sm.ico-down::after {margin-left: 0;}

.btn:is(.pre, .pay) {padding: 0.5rem 1.2rem; text-indent: 0!important; font-size: var(--btn-fz-sm); line-height: 1.5;}
.btn:is(.pre, .pay)::after {content: ''; display: inline-block; width: 1.8rem; height: 1.8rem; background-size: contain !important;}
.btn.pre {color: var(--disabled); border-color: var(--disabled);}
.btn.pre::after {margin-left: 0.2rem; background: url(/static/images/kosmes_new/img/ico_pre.svg) no-repeat center center;}
.btn.pay {color: var(--primary-50); border-color: var(--primary-50);}
.btn.pay::after {margin-left: 0.4rem;  background: url(/static/images/kosmes_new/img/ico_pay.svg) no-repeat center center;}

.form-check-box, .radioBox {display: flex; align-items: center; gap: var(--spacer3) var(--spacer6) !important;}
.form-check, .radio {display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacer3) var(--spacer7);}

/* radio */
input[type=radio] ~ label, input[type=checkbox] ~ label {position: relative; display: inline-flex; align-items: center; min-width: auto; min-height: var(--rdo-size-md); padding-left: calc(var(--rdo-size-md) + var(--spacer2)) !important; font-size: var(--rdo-fz-md); line-height: var(--rdo-size-md);}
input[type=radio] ~ label::before, input[type=checkbox] ~ label::before {position: absolute; top: 0; left: 0; width: var(--rdo-size-md); height: var(--rdo-size-md); background-color: var(--white); border: 0.1rem solid var(--border); border-radius: var(--rd-full);}
input[type=radio] ~ label::before,
input[type=radio] ~ label::after, input[type=checkbox] ~ label::before {content: ''; display: block; transition: 0.15s cubic-bezier(0.4, 0, 0.23, 1);}
input[type=radio] ~ label::before,
input[type=radio] ~ label::after {z-index: 1;}
input[type=radio] ~ label::after, input[type=checkbox] ~ label::after {position: absolute; top: calc((var(--rdo-size-md) - var(--rdo-chk-md)) / 2); left: calc((var(--rdo-size-md) - var(--rdo-chk-md)) / 2); width: var(--rdo-chk-md); height: var(--rdo-chk-md); background-color: var(--white); border-radius: var(--rd-full);}
input[type=radio]:checked ~ label::before, input[type=checkbox]:checked ~ label::before {border-color: var(--primary-50);}
input[type=radio]:checked ~ label::after, input[type=checkbox]:checked ~ label::after {background-color: var(--primary-50);}
input[type=radio]:focus ~ label::before, input[type=checkbox]:focus ~ label::before {outline-offset: 0.2rem; /*outline: 0.2rem solid var(--primary-50);*/}

/* checkbox */
input[type=checkbox] ~ label::before {top: 50%; border-radius: var(--rd-3); transform: translateY(-50%); z-index: 1;}
input[type=checkbox] ~ label::before:hover {cursor: pointer;}
input[type=checkbox]:checked ~ label::before {background: var(--primary-50) url(/static/images/kosmes_new/img/ico_check_primary_checked.svg) no-repeat center; background-size: 1.1rem;}
input[type=checkbox]:checked ~ label::after {opacity: 1; transition-delay: 0.1s;}
input[type=checkbox]:disabled ~ label::before {background-color: var(--gray-30); border-color: var(--gray-40);}
input[type=checkbox]:disabled, input[type=checkbox]:disabled ~ label:hover {cursor: default;}
input.disabled {border: 0 !important; background-color: var(--gray-10);}

.error input {border-color: var(--red);}
.error input:focus {outline-color: var(--red);}
.error .form-tit .desc {color: var(--red) !important;}
.error .form-tit .desc::before {background-image: url(/static/images/kosmes_new/img/ico_point_error.svg) !important;}

input:not([type=radio], [type=checkbox]), select {position: relative; width: 100%; min-height: 4rem; padding: 0 var(--spacer4); border: 0.1rem solid var(--border); border-radius: var(--rd-6); font-family: inherit; color: var(--gray-90); transition: var(--transition-4); font-size: var(--fz-body-md);}
input:disabled, input[readonly], select:disabled, input:disabled ~ label::before, input:disabled ~ label::after {background-color: var(--gray-20); border-color: var(--border); color: var(--disabled);}
input:disabled:focus, input[readonly]:focus {outline: none;}
.form-control:focus {border-color: var(--primary-50); border-width: 2px; outline-color: var(--primary-50); transition: var(--transition-2)}
.form-control:placeholder-shown {display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.form-control[readonly] {background-color: var(--gray-10); border-color: var(--gray-40); color: var(--gray-50);}
.form-control[readonly]:focus {outline: none; border-width: 0.1rem;}
.form-control.md {height: 4.8rem; padding: 0 var(--input-px-md); border-radius: var(--input-rd-md); font-size: var(--input-fz-md);}
.form-control.right {text-align: right; padding-right: var(--spacer8);}
.form-control.right + span {position: absolute; top: 50%; right: var(--spacer3); transform: translateY(-50%);}

input[type=date], input[name="start_date"], input[name="end_date"] {appearance: none; background: var(--white) url(/static/images/kosmes_new/img/ico_calendar.svg) no-repeat calc(100% - 1.44rem) 46%; background-size: 2.3rem; font-size: var(--fz-body-sm);}
input[type=date]:disabled, input[name="start_date"]:disabled, input[name="end_date"]:disabled {background: var(--gray-20) url(/static/images/kosmes_new/img/ico_calendar_g.svg) no-repeat calc(100% - 1.44rem) 46%; background-size: 2.1rem;}
input[type=date]::-webkit-calendar-picker-indicator,
input[name="start_date"]::-webkit-calendar-picker-indicator,
input[name="end_date"]::-webkit-calendar-picker-indicator {background: none;}
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[name="start_date"]::-webkit-calendar-picker-indicator:hover,
input[name="end_date"]::-webkit-calendar-picker-indicator:hover {cursor: pointer;}
input[type=date]::-webkit-calendar-picker-indicator:focus,
input[name="start_date"]::-webkit-calendar-picker-indicator:focus,
input[name="end_date"]::-webkit-calendar-picker-indicator:focus {outline-offset: 0.2rem; outline-color: var(--primary-50);}
input[type=date]:hover, input[name="start_date"]:hover, input[name="end_date"]:hover {cursor: pointer;}

select {min-width: 9.5rem; padding-right: var(--spacer10); text-overflow: ellipsis; white-space: nowrap; background-image: url(/static/images/kosmes_new/img/ico_arrow_select.svg); background-color: var(--white); background-size: 1.7rem; background-repeat: no-repeat; background-position: center right var(--select-rn-lg); appearance: none;}
select:hover {cursor: pointer;}
select.sm {max-width: calc(35% - 6.4rem);}
select.md {max-width: calc(50% - 6.4rem);}
.form-wrap .sm {max-width: 25rem;}
.form-wrap .sm .align-row {align-items: center;}
[class^="align-"] .user-info-list .info > .space {position: absolute; bottom: 1rem; right: 0.5rem;}
[class^="align-"].sm {width: 33%;}
[class^="align-"].md, .form-wrap .md {max-width: 50%;}
[class^="align-"].lg {width: 100%;}

/* .form-wrap .tit .c-red {position: absolute; top: 0.2rem; right: -1.2rem; margin: 0;} */
.form-wrap:not(:last-of-type) {margin-bottom: var(--spacer20);}
.form-wrap:last-of-type {margin-bottom: 0;}
.form-wrap .info-list {gap: var(--spacer2); padding-bottom: var(--spacer3); border-bottom: 0.1rem solid var(--gray-20);}
.form-wrap .info-list > .tit {min-width: inherit;}
.form-wrap .info-list .tit ~ .tit {margin-top: var(--spacer3);}
.form-wrap .info-list:last-of-type {border: 0; padding-bottom: 0;}
.form-wrap .info-list li::before {top: 1.4rem; left: 0.2rem; width: 0.5rem; height: 0.1rem; background-color: var(--gray-70);}
.form-wrap .info-list li::after {display: none;}
.form-wrap [class*="-list"].sm {padding: 0; gap: var(--spacer1);}
.form-wrap [class*="-list"].sm .tit {padding: 0;}
.form-wrap [class*="-list"].sm li.flex {display: flex; align-items: center; gap: var(--spacer2);}
.form-wrap [class*="-list"].sm li {padding-left: var(--spacer4); font-size: var(--fz-body-sm); color: var(--gray-60); line-height: 1.8;}
.form-wrap [class*="-list"].sm li:last-of-type {margin-bottom: 0;}
.form-wrap [class*="-list"].sm li::before {top: 1.1rem; left: 0.5rem; width: 0.34rem; height: 0.3rem; border-radius: var(--rd-12); background-color: var(--gray-60);}
.form-wrap.flexbox {display: flex; align-items: flex-start; gap: var(--spacer6);}
.form-wrap.flexbox > div {flex: 0 1 auto; width:100%;}

.password-view {position: relative;}
.password-view .btn {min-width: inherit; border: 0;}
.password-view .form-control {padding-right: var(--spacer14);}
.password-view input[type=text] + .valid {right: 2rem;}
.password-view .valid,
.password-view .btn {position: absolute; top: 50%; right: 1.6rem; min-height: auto; transform: translateY(-52%);}
.password-view .valid {top: 49%; right: 4.8rem;}
.password-view.xsm {gap: 0 !important;}
.password-view.xsm .valid {right: 2rem;}

.form-group {display: flex; flex-direction: column; grid-column-gap: var(--spacer6); grid-row-gap: var(--spacer2); width: inherit;}
.form-group .form-tit {display: flex; align-items: baseline; position: relative; width: 100%; min-width: 7rem; color: var(--gray-90); font-size: var(--fz-title-sm); font-weight: 500;}
.form-group .form-tit label {display: flex; align-items: center; flex-wrap: wrap; position: relative;}
.form-group .form-tit > strong {margin: 0 var(--spacer1);}
.form-group .form-tit .desc {position: relative; margin-left: var(--spacer8); font-size: var(--fz-title-xsm); color: var(--gray-50);}
.form-group .form-tit .desc::before {content: ''; position: absolute; top: 0.4rem; left: -1.8rem; width: 1.3rem; height: 1.3rem; background: url(/static/images/kosmes_new/img/ico_point.svg) no-repeat; background-size: contain;}
.form-group .form-tit .valid {display: inline-block; vertical-align: text-top; margin-left: var(--spacer1); line-height: 0;}
.form-group .file-btn {justify-content: flex-start;}
.form-group .file-btn.center {justify-content: center;}
.form-group .file-btn .btn {min-width: 7rem;}

.quick-service {display: flex; align-items: center; justify-content: space-between; min-height: 7rem; padding: var(--spacer5) var(--spacer8); background: #8D3AEC url(/static/images/kosmes_new/img/ico_quick_service_bg.svg) no-repeat; border-radius: var(--rd-12); margin-bottom: var(--spacer5);}
.quick-service .tit {position: relative; min-width: fit-content; padding-left: var(--spacer18); font-size: var(--fz-title-xlg); font-weight: 500;}
.quick-service .tit::before {content: ''; position: absolute; top: 50%; left: 0; min-width: 7.4rem; min-height: 5.1rem; background: url(/static/images/kosmes_new/img/ico_quick_service.svg) no-repeat; background-size: contain; transform: translateY(-50%);}
.quick-service .desc {display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacer5); color: var(--white); font-weight: 300;}


.align-col {display: flex; flex-direction: column; gap: var(--spacer3) var(--spacer5); flex: 1 1 45%; position: relative;}
.align-col.result {padding-top: var(--spacer3) !important; border-top: 0.1rem solid var(--table-bd);}
.align-col .align-col {gap: var(--spacer1);}
.align-col.bt {gap: var(--spacer5); padding-top: 3rem; border-top: 1px solid var(--table-bd);}
.align-col.bt .btn-wrap {margin-bottom: 1rem;}
.align-col.bt .btn-wrap .btn {color: #8A949E; background: var(--white); border: 1px solid #B1B8BE;}
.align-col.bt .center .btn {padding: 0 var(--spacer5); border-radius: var(--rd-6);}
.align-col.bt .center .btn.off {color: #8A949E; background: var(--white); border: 1px solid #B1B8BE;}
.align-col.bt .center .btn.off + .form-wrap {display: none;}
.align-row {display: flex; align-items: center; gap: var(--spacer2); position: relative; width: 100%;}
.align-row .tit-s {min-width: 13rem; font-weight: 500; color: var(--gray-90);}
.align-row.var {gap: var(--spacer12);}
.align-row:first-of-type {min-height: 2.4rem;}
.align-row:last-of-type {/*min-height: inherit;*/}
.align-row .form-conts {display: grid; gap: var(--spacer2);}
.align-row .form-conts .form-conts {display: flex; align-items: center; gap: var(--spacer2);}
.align-row label {text-align: left; font-weight: 500;}
.align-row.form-check-box {align-items: center !important; min-height: 4rem;}


/* 서비스 구매 > 검색폼 */
.search-service {display: flex; flex-wrap: wrap; gap: var(--spacer4) var(--spacer20); padding: var(--spacer7) var(--spacer8); margin-bottom: var(--spacer3); background-color: var(--secondary-5); border-radius: var(--rd-12);}
.search-service ~ .tab {margin-bottom: 0;}
.search-service .align-row.form-check-box {min-height: 2.4rem;}
.search-service .align-col:nth-of-type(2n)::before {content: ''; position: absolute; left: -4rem; width: 0.1rem; height: 100%; border-left: 0.1rem dashed var(--secondary-7);}
.search-service .align-row label {min-width: 8rem;}
.search-service label {font-weight: 700;}
.search-service .align-col .align-col:nth-of-type(2n)::before {content: none;}
.search-service + .service-list-sch {margin-top: var(--spacer2); padding-top: 0; border-top: 0;}

.service-list-sch {border-top: 0.1rem solid var(--table-bd); padding-top: var(--spacer6); margin-bottom: var(--spacer3);}
.service-list-sch .page-cnt-wrap {display: flex; gap: var(--spacer3); align-items: center; }
.service-list-sch .page-cnt-wrap .align-row label {min-width: fit-content; margin-right: var(--spacer3);}
.service-list-sch .cnt-box {display: flex; gap: var(--spacer2); font-weight: 300; color: var(--disabled);}
.service-list-sch ul.cnt-box {gap: var(--spacer6);}
.service-list-sch .cnt-box strong {color: var(--gray-90); font-weight: 500;}
.service-list-sch .cnt-box li {position: relative; min-width: fit-content; color: var(--disabled); font-weight: 500;}
.service-list-sch .cnt-box li:not(:last-of-type)::after {content: ''; position: absolute; top: 0.4rem; right: -1.2rem; width: 0.1rem; height: 1.6rem; background-color: var(--gray-30);}
.service-list-sch .cnt-box li a {background: url(/static/images/kosmes_new/img/ico_arr_chk.svg) no-repeat center left; padding: 0 var(--spacer2) 0 var(--spacer5); color: var(--disabled);}
.service-list-sch .cnt-box li a:focus {outline-offset: 0.2rem;}
.service-list-sch .cnt-box li .active,
.service-list-sch .cnt-box li.active a {background: url(/static/images/kosmes_new/img/ico_arr_chk_on.svg) no-repeat center left; color: var(--gray-90);}

.service-li {display: flex;gap: var(--spacer3);}
.service-li > li {flex:1;display: flex; align-items: center; justify-content: space-between; padding: var(--spacer3) var(--spacer4);border-radius: var(--rd-8);background-color: #E2E9F0;}
.service-li span {display: block; position: relative; padding-left: var(--spacer3); font-weight: 500; color: #464C53; line-height: 1.2;}
.service-li span::after {content:'';display: block; position: absolute; left: 0; top: 0.9rem; width: 0.3rem; height: 0.3rem; border-radius: 50%; background-color: #708297;}
.service-li button {display: block; font-size: var(--fz-body-sm); line-height: 1.5; font-weight: 700; color: #256EF4; text-decoration:underline; text-underline-position:under; text-decoration-thickness:0.2rem;}
.service-li button:hover {background:none;}


/* 서비스 썸네일 리스트 */
.service-list {display: flex; height: 100%;}
.service-list ul {display: grid; grid-template-columns: repeat(auto-fit, minmax(30%, 1fr)); flex-wrap: wrap; gap: var(--spacer5); width: 100% !important;}
.service-list ul li {width: 100%; border: 0; line-height: 0;}
.service-list ul li a {width: 100%; border-radius: var(--rd-12);}
.service-list ul li a:focus {outline-offset: 0;}

.d-card {display: grid; gap: var(--spacer6); position: relative; width: 100%; height: 100%; min-height: 16rem; padding: var(--spacer12) var(--spacer6) var(--spacer5); border: 0.1rem solid var(--table-bd); border-radius: var(--rd-12); background-color: var(--white); transition: var(--transition-2);}
.d-card .img {width: 100%; height: 17rem; border-radius: var(--rd-8); background: url(/static/images/kosmes_new/img/bg_thumbnail.svg) no-repeat 100%; background-size: cover; overflow: hidden;}
.d-card .img img {height: 100%; object-fit: cover;}
.d-card [class^=c] {margin-bottom: 0;}
.d-card .c-title, .d-card .text {display: grid; gap: var(--spacer2);}
.d-card .c-title .c-tag {display: inline-flex; align-items: center; justify-content: center; position: absolute; top: -0.1rem; left: 2.4rem; width: fit-content; min-width: 7.6rem; min-height: 3.6rem; background-color: var(--gray-40); padding: var(--spacer1) var(--spacer2); border-radius:  0 0 var(--rd-8) var(--rd-8); font-size: var(--fz-body-sm); color: var(--white); font-weight: 500;}
.d-card .c-title .c-tag.green {background-color: #208531;}
.d-card .c-title .c-tag.green2 {background-color: #007F93;}
.d-card .c-title .c-tag.blue {background-color: #1854A8;}
.d-card .c-title .c-tag.purple {background-color: #754690;}
.d-card .c-title .c-tit, .d-card .c-title .c-category {display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; line-height: 1.3; min-height: 2rem; color: var(--disabled); font-size: var(--fz-body-sm);}
.d-card .c-title .c-tit {font-size: var(--fz-title-md); color: var(--gray-90); font-weight: 500;}
.d-card .c-txt, .main-sect .d-card .c-category {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 3.7rem; text-overflow: ellipsis; overflow: hidden; color: var(--gray-60); font-size: var(--fz-body-md);}
.d-card .c-tit, .main-sect .c-title a {margin-bottom: 0; color: var(--gray-90); font-weight: 700; font-size: var(--fz-title-md);}
.d-card .c-date {font-size: var(--fz-body-sm); color: var(--gray-60);}

.d-card .c-price {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacer2) var(--spacer4);}
.d-card .c-price * {font-family: 'Pretendard';}
.d-card .c-price .price {display: flex; align-items: center; gap: var(--spacer4); font-size: var(--fz-body-sm);}
.d-card .c-price .price * {position: relative; line-height: 1;}
.d-card .c-price .price dl {display: flex; align-items: center; gap: var(--spacer2); position: relative;}
.d-card .c-price .price b::after, .d-card .c-price .price :where(b, dl):not(:last-of-type)::after {content: ''; display: flex; position: absolute; top: 0.2rem; right: -0.8rem; width: 0.1rem; min-height: 1rem; background-color: var(--gray-40);}
.d-card .c-price .price dl dt {}
.d-card .c-price .price dl dd {color: var(--primary-50); font-weight: 500;}
.d-card .c-price .price dl dd span {font-weight: 500; color: #1E2124;}
.d-card .c-price .grade-box {display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacer1);}
.d-card .c-price .grade-box .star-box {min-width: 8rem;}
.d-card .c-price .grade-box .star-box, .d-card .c-price .grade-box .star {display: inline-flex; position: relative; height: 1.5rem; background: url(/static/images/kosmes_new/img/grade_star_yellow.svg) no-repeat; background-size: cover; overflow: hidden;}
.d-card .c-price .grade-box .star {width: 2rem; background-position: 0 -1.6rem; line-height: 0; background-size: 8rem; vertical-align: top;}
.d-card .c-price .grade-box .grade0-5 {width: 10%;}
.d-card .c-price .grade-box .grade1 {width: 20%;}
.d-card .c-price .grade-box .grade1-5 {width: 30%;}
.d-card .c-price .grade-box .grade2 {width: 40%;}
.d-card .c-price .grade-box .grade2-5 {width: 50%;}
.d-card .c-price .grade-box .grade3 {width: 60%;}
.d-card .c-price .grade-box .grade3-5 {width: 70%;}
.d-card .c-price .grade-box .grade4 {width: 80%;}
.d-card .c-price .grade-box .grade4-5 {width: 90%;}
.d-card .c-price .grade-box .grade5 {width: 100%;}
.d-card .c-price .date {color: var(--gray-50);}

/* 서비스 > 검색결과 */
.service-result {padding-top: var(--spacer20); text-align: center;}
.service-result .result {display: flex; align-items: center; justify-content: center; flex-direction: column;}
.service-result .result img {width: fit-content;}
.service-result .sch-result-tit {margin: var(--spacer8) 0 var(--spacer12); font-size: var(--fz-title-xlg); color: var(--primary-50); font-weight: 700;}
.service-result .desc {margin-bottom: var(--spacer12);}
.service-result .desc p {line-height: 1.8;}
.service-result .desc-box {display: flex; gap: var(--spacer16); padding: var(--spacer12); border-top: 0.1rem solid var(--gray-20);}
.service-result .desc-box img {width: fit-content; height: fit-content;}
.service-result .desc-list {display: grid; gap: var(--spacer2); width: auto; padding: 0;}
.service-result .desc-list li {width: fit-content; text-align: left;}
.service-result .desc-list li::before {left: 0;}
.service-result .weekRank {display: flex; gap: var(--spacer12); min-height: 15rem; padding: var(--spacer10); background-color: var(--secondary-5); border-radius: var(--rd-6);}
.service-result .weekRank ul {display: flex; flex-wrap: wrap; grid-column-gap: var(--spacer5); grid-row-gap: var(--spacer3);}
.service-result .weekRank .tit {min-width: 10rem; padding-top: var(--spacer1);}
.service-result .weekRank li {flex: 1 1 18%; max-width: 16rem;}
.service-result .weekRank li a {gap: var(--spacer2); color: var(--gray-60); font-weight: 300;}
.service-result .weekRank li .rnk-txt {display: -webkit-box; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; color: var(--gray-70); text-align: left;}
.service-result .weekRank li .num {display: flex; align-items: center; justify-content: center; min-width: 2.3rem; height: 2.3rem; border-radius: var(--rd-full); background-color: var(--white); border: 0.1rem solid var(--gray-60); font-weight: 500; font-size: var(--fz-body-xsm); line-height: 0;}



/* paging */
.paging {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--spacer2); width: 100%; margin-top: var(--spacer15);}
.paging .page-navi {display: inline-flex; align-items: center; justify-content: center; flex-direction: row; color: var(--gray-70); min-width: 6.2rem; height: 4rem;}
.paging .page-navi.prev {order: 1; padding: 0 var(--spacer2) 0 var(--spacer1);}
.paging .page-navi.prev::before {content: ''; display: inline-flex; align-items: center; justify-content: center; flex-direction: row; width: 2rem; height: 2.2rem; background-image: url(/static/images/kosmes_new/img/ico_page_arr_left.svg); background-repeat: no-repeat;}
.paging .page-navi.next {order: 3; padding: 0 var(--spacer1) 0 var(--spacer2);}
.paging .page-navi.next::after {content: ''; display: inline-flex; align-items: center; justify-content: center; flex-direction: row; width: 2rem; height: 2.2rem; background-image: url(/static/images/kosmes_new/img/ico_page_arr_right.svg); background-repeat: no-repeat;}
.paging .page-links {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; order: 2; gap: var(--spacer2);}
.paging .page-links .page-link {display: flex; align-items: center; justify-content: center; flex-direction: row; color: var(--gray-70); min-width: 4rem; height: 4rem;}
.paging .page-links .page-link.link-dot {background-image: url(/static/images/kosmes_new/img/ico_page_dot.svg); background-repeat: no-repeat; background-position: center;}
.paging .page-links .page-link.active {font-weight: 700; color: var(--white); border-radius: 6px; background-color: var(--primary-50);}
.paging .page-links .page-link.active:focus {outline-offset: 0.4rem;}


.swiper-navigation-wrap {display: flex; gap: var(--spacer3); position: absolute; top: -4rem; right: 3rem;}
.swiper-navigation-wrap .swiper-navigation {position: relative;}
.swiper-navigation-wrap .swiper-pagination {margin-top: 0;}
.swiper-navigation-wrap .swiper-pagination-fraction {display: flex; align-items: center; gap: var(--spacer2);}
.swiper-navigation-wrap .swiper-pagination-fraction .current {color: var(--gray-90); font-weight: 500;}
.swiper-navigation-wrap .swiper-pagination-fraction .divider {color: #B4C1D0;}
.swiper-navigation-wrap .swiper-pagination-fraction .total {color: var(--disabled);}
[class^=swiper-button-] {display: flex; align-items: center; justify-content: center; flex-direction: row; width: 7rem; height: 7rem; border-radius: var(--rd-full); border: 0.1rem solid #D1D1D1; background-color: var(--white);}
[class^=swiper-button-]::after {content: ''; width: 2.6rem; height: 2.6rem; background-repeat: no-repeat; font-size: 0 !important;}
.swiper-button-prev, .swiper-button-next {position: absolute; top: var(--swiper-navigation-top-offset, 44%); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-top: 0 !important; color: var(--swiper-navigation-color,var(--swiper-theme-color)); transform: translateY(-50%); background-image: none; z-index: 1;}
.swiper-button-prev:focus, .swiper-button-next:focus {border-radius: 100%;}
.swiper-button-prev {left: -4.2rem;}
.swiper-button-prev::after {background-image: url(/static/images/kosmes_new/img/ico_swiper_prev.svg); background-position: center; background-size: contain;}
.swiper-button-prev.swiper-button-disabled {background-color: var(--gray-10); opacity: 1;}
.swiper-button-prev.swiper-button-disabled::after {background-image: url(/static/images/kosmes_new/img/ico_swiper_prev_gray.svg);}
.swiper-button-next {right: -4.2rem;}
.swiper-button-next::after {background-image: url(/static/images/kosmes_new/img/ico_swiper_next.svg); background-position: center; background-size: contain;}
.swiper-button-next.swiper-button-disabled {background-color: var(--gray-10); opacity: 1;}
.swiper-button-next.swiper-button-disabled::after {background-image: url(/static/images/kosmes_new/img/ico_swiper_next_gray.svg);}
.swiper-button-stop::after {background-image: url(/static/images/kosmes_new/img/ico_swiper_stop.svg); filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(10%) contrast(100%);}
.swiper-button-play::after {background-image: url(/static/images/kosmes_new/img/ico_swiper_play.svg); filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(10%) contrast(100%);}

.swiper-button-prev.style2::after {background-image: url(/static/images/kosmes_new/img/ico_swiper_prev02.svg);}
.swiper-button-next.style2::after {background-image: url(/static/images/kosmes_new/img/ico_swiper_next02.svg);}
.swiper-button-stop.style2::after {background-image: url(/static/images/kosmes_new/img/ico_swiper_stop02.svg); background-position: center center;}
.swiper-button-play.style2::after {background-image: url(/static/images/kosmes_new/img/ico_swiper_play02.svg); background-position: 55% center;}
.swiper-button-play, .swiper-button-stop {position: absolute; top: -0.4rem; left: 0; width: 2.9rem; height: 2.9rem; background-color: #EAEAEA; border: 0;}

.swiper-pagination {display: flex; gap: var(--spacer2); align-items: center; justify-content: center; flex-direction: row; position: relative; top: auto; bottom: auto; min-height: 2rem; margin-top: var(--spacer9); z-index: 1;}
.swiper-pagination .swiper-pagination-bullet {width: 1.2rem; height: 1.2rem; border-radius: var(--rd-10); transition: var(--transition-1); background-color: #D0D0D0; opacity: 1;}
.swiper-pagination .swiper-pagination-bullet:focus {outline-offset: 0.3rem; outline-color: var(--primary-50);}
.swiper-pagination .swiper-pagination-bullet:hover {cursor: pointer;}
.swiper-pagination .swiper-pagination-bullet-active {width: 2.4rem; border-radius: 14rem; background-color: var(--gray-90); opacity: 1;}

.badge {display: inline-flex; align-items: center; justify-content: center; flex-direction: row; font-size: var(--fz-label-sm); color: var(--primary-60); height: 2.4rem; padding: 0 var(--spacer2); border-radius: 0.4rem; background-color: var(--primary-5);}
.badge.bg1 {color: var(--white); background-color: var(--primary-50);}
.btn-ico[class*=ico-] {width: 4rem; height: 4rem; min-height: inherit; background-repeat: no-repeat; background-size: contain; background-position: center;}
.btn-ico[class*=ico-].md {width: 2.4rem; height: 2.4rem;}

/* search */
.top-search {display: flex; align-items: center; justify-content: center; position: absolute; left: 0; right: 0; min-height: 23rem; background-color: #314173; transform: translateY(-101%); transition: var(--transition-3); opacity: 0; z-index: -1;}
.top-search.is-open {transform: translateY(0); opacity: 1; z-index: -1;}
.top-search .sch-wrap {display: grid; gap: var(--spacer5); width: 100%; max-width: 128rem; padding: 0 var(--spacer5);}
.top-search .sch-tit {display: flex; justify-content: space-between; position: relative; font-size: var(--fz-title-xlg); color: var(--white);}
.top-search .sch-tit span {line-height: 1;}
.top-search .sch-tit .sch-close {position: absolute; top: -1rem; right: 0; width: 3.6rem; height: 3.6rem; background: url(/static/images/kosmes_new/img/head_sch_close.svg) no-repeat; background-size: contain; text-indent: -9999px;}
.top-search .sch-form {display: grid; gap: var(--spacer5);}
.top-search .sch-form .sch {margin: var(--spacer8) 0 var(--spacer4);}
.top-search .sch-form .sch input[type=text] {width: 100%; height: 7rem; padding: var(--spacer6) var(--spacer9); border-radius: var(--rd-12); font-size: var(--fz-body-xlg); font-weight: 500; border: 0;}
.top-search .sch-form .sch input[type=text]:focus::placeholder {color: var(--white); transition: var(--transition-3);}
.top-search .sch-form .sch input[type=text]::placeholder { font-size: var(--fz-body-xlg);}
.top-search .sch-form .sch-tag {display: flex; flex-wrap: wrap; grid-column-gap: var(--spacer4);}
.top-search .sch-form .sch-tag dt {font-weight: 700; color: var(--white);}
.top-search .sch-form .sch-tag dd {display: flex; gap: var(--spacer4);}
.top-search .sch-form .sch-tag dd .tag {color: var(--yellow); font-weight: 500;}

.ico-sch {min-width: 2.2rem; min-height: 2.2rem; transform: translateY(0); background: url(/static/images/kosmes_new/img/head_sch_ico.svg) no-repeat 100%; background-size: contain; transform: translateY(-50%); color: inherit; border: 0; background-color: inherit; padding: 0 !important; text-indent: -9999px;}
.ico-sch-w::before {min-width: 2rem; min-height: 2rem; background: url(/static/images/kosmes_new/img/ico_arr_sch_w.svg) no-repeat center; background-size: 2rem;}
.ico-sch-w::after {display: none !important;}
.ico-sch::after {display: none;}
.sch {display: flex; position: relative;}
.sch .ico-sch {position: absolute; top: 50%; right: var(--spacer4);}
.sch .ico-sch::after {display: none;}

.sch-input {display: grid; gap: var(--spacer8) var(--spacer4); position: relative;}
.sch-input input[type=text] {width: 100%; min-height: 6.7rem; padding: var(--spacer2) var(--spacer9); border-radius: var(--rd-12); font-size: var(--fz-body-xlg); font-weight: 500; border: 0;}
.sch-input input[type=text]:focus::placeholder {color: var(--white); transition: var(--transition-3);}
.sch-input input[type=text]::placeholder { font-size: var(--fz-body-xlg);}
.sch-input .ico-sch {position: absolute; top: 50%; right: 3rem; width: 2.4rem; height: 2.4rem;}
.sch-tag {display: flex; flex-wrap: wrap; grid-column-gap: var(--spacer4);}
.sch-tag dt {font-weight: 700; color: var(--white);}
.sch-tag dd {display: flex; gap: var(--spacer4);}
.sch-tag dd .tag {color: var(--yellow);}


.hidden {overflow: hidden;}
.sr-only {position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;}
.hidden #allTopMenu, .hidden #header-top, .hidden #header .head-body, .hidden #header .head-gnb, .hidden #container, .hidden #footer, .hidden .top-search {padding-right: 1.7rem;}

.inner {position: relative; max-width: 128rem; width: 100%; padding: 0 var(--spacer4); margin: 0 auto; box-sizing: content-box;}
.index .inner {padding-top: var(--spacer23); padding-bottom: var(--spacer23);}
#skip-nav {display: none; position: fixed; top: 0; left: 0; width: 100%; text-align: center; background-color: var(--gray-90); z-index: 100;}
.hamburger {min-width: 2.3rem !important; width: auto !important; min-height: 1.6rem !important; transition: var(--transition-bez); z-index: 1;}
.hamburger a {position: relative; gap: var(--spacer1); width: 100%; min-height: 1.6rem; font-weight: 300; font-size: var(--fz-body-sm); color: var(--white); text-indent: -9999px;}
.hamburger a:focus {outline-offset: 0.4rem; border-radius: var(--rd-1);}
.hamburger span {display: flex; position: absolute; width: 100%; height: 2px; min-height: 2px; border-radius: calc(var(--rd-10)*10); background-color: var(--gray-90); transition: var(--transition-2);}
.hamburger .line1 {top: 0;}
.hamburger .line2 {top: 50%; right: 0; transform: scaleX(1) translateY(calc(-50% + 0.1px)); width: 1.4rem;}
.hamburger .line3 {bottom: 0;}
.hamburger.active .line1 {top: 0; transform: translate(0px, 7px) rotate(45deg);}
.hamburger.active .line2 {transform: translateY(-50%) scaleX(0); transform-origin: bottom left;}
.hamburger.active .line3 {transform: translate(0px, -7px) rotate(-45deg);}
.hamburger:not(.active) .sitemap {display: none;}

/* 사이트맵 */
.sitemap {display: flex; flex-direction: column; gap: var(--spacer12) var(--spacer8); position: fixed; top: 0; left: 0; width: 100%; min-height: 100vh; padding: var(--spacer10) var(--spacer15); background: var(--white); z-index: 10; overflow-x: hidden;}
.sitemap .inner {display: grid; gap: var(--spacer10); max-width: 140rem;}
.sitemap .tit-wrap {position: relative;}
.sitemap .tit-wrap .tit {width: 100%; text-align: center; font-size: var(--fz-title-xxxxlg); font-weight: 700; line-height: 1.5; color: var(--gray-90);}
.sitemap .btn-close {position: absolute !important; top: 2rem; right: 2rem; width: 1.5rem;}
.sitemap .btn-close::before {position: absolute; top: 50%; left: 50%; content: ' '; width: 5.6rem; min-height: 5.6rem; background: var(--primary-60); border-radius: var(--rd-4); transform: translateY(-50%) translateX(-50%);}
.sitemap .btn-close span {background-color: var(--white);}
.sitemap .hideMenu {display: flex; flex-wrap: wrap; gap: var(--spacer15) var(--spacer4); max-height: 80vh; padding: 0; overflow-y: scroll;}
.sitemap .hideMenu:not(.none) {display: none;}
.sitemap .hideMenu ul {display: flex; flex: 1 1 15%; flex-direction: column; align-items: flex-start; gap: var(--spacer7);}
.sitemap .hideMenu ul ul {gap: 0.4rem; margin-top: 1.2rem;}
.sitemap .hideMenu ul ul a {font-size: var(--fz-body-sm); line-height: 1.5; color: var(--disabled); font-weight: 300;}
.sitemap .hideMenu ul ul a::before {content: ''; display: inline-block; position: relative; top: 0; width: 0.3rem; height: 0.3rem; margin-right: 0.6rem; background: var(--disabled); border-radius: 5rem;}
.sitemap .hideMenu li {width: 100%; padding: 0 var(--spacer5);}
.sitemap .hideMenu li li, .sitemap .hideMenu li.tit {padding: 0;}
.sitemap .hideMenu li.tit a {display: flex; justify-content: center; align-items: center; min-height: 6rem; padding: 0 var(--spacer5); text-align: center; color: var(--primary-60); background: #F7F8F9; border-radius: var(--rd-8); font-size: var(--fz-title-md); line-height: 1.5; font-weight: 700;}
.sitemap .hideMenu a {height: auto; text-indent: 0; font-size: var(--fz-body-md); font-weight: 500; line-height: 1.3; color: var(--gray-90);}
.sitemap .hideMenu a span {position: static; display: flex; width: fit-content; min-width: fit-content; height: inherit; font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--disabled); background-color: transparent;}


/* #header-top > .toggle-head */
#allTopMenu {position: relative; background-color: var(--primary-80); z-index: 1;}
#allTopMenu .box {display: flex; justify-content: space-between; flex-wrap: wrap;}
#allTopMenu .box select {min-height: inherit;}
#allTopMenu .box a {justify-content: center; min-width: 5.4rem; padding: 0 var(--spacer3); color: var(--white); font-size: var(--fz-body-xsm);}
#allTopMenu .box a:focus {border-radius: 0; outline-offset: 0;}
#allTopMenu .box .left {display: flex; flex-wrap: wrap; min-height: 2.8rem;}
#allTopMenu .box .left .active {background-color: var(--primary-50);}
#allTopMenu .box .right {display: flex; align-items: center;}
#allTopMenu .box .right li {display: flex; align-items: center; height: 2rem;}
#allTopMenu .box .right li form {display: flex; height: inherit;}
#allTopMenu .box .change a {background-color: var(--primary-50); border: 0;}
#allTopMenu .box .form-select {height: inherit; border-radius: 0; font-size: var(--fz-body-xsm); background-position: center right var(--spacer3); background-size: 1.5rem 1.5rem; padding: var(--select-pd-sm); border: 0;}
#header-top {position: relative; background-color: var(--secondary-5); z-index: 1;}
#header-top .toggle-head {padding: 0 var(--spacer4);}
#header-top .toggle-head .inner {display: flex; align-items: center; flex-direction: row; flex-wrap: wrap; position: relative; gap: var(--spacer1) var(--spacer4); min-height: 3.2rem; padding-top: var(--spacer2); padding-left: 4.2rem; padding-bottom: var(--spacer2);}
#header-top .toggle-head .nuri-txt {display: flex; align-items: center; flex-direction: row; font-size: var(--fz-body-sm); line-height: 1; word-break: break-all;}
#header-top .toggle-head .nuri-txt::before {content: ''; display: inline-flex; position: absolute; left: var(--spacer4); width: 2.4rem; height: 1.6rem; margin-right: var(--spacer2); /*background: url(/static/images/kosmes_new/img/ico_flag_kr.svg) no-repeat center;*/ background-size: contain;}
#header-top .toggle-head .toggle-btn {font-size: var(--fz-body-sm); color: var(--secondary); height: auto;}
#header-top .toggle-head .toggle-btn::after {background-image: url(/static/images/kosmes_new/img/ico_arr_20_down_blue.svg); transition: var(--transition-2);}
#header-top .toggle-head.active .toggle-btn::after {transform: rotate(-180deg);}
#header-top .toggle-head.active ~ .toggle-body {display: block; height: 18.5rem; opacity: 1;}

#header-top .toggle-body {height: 0; transition: var(--transition-2); overflow: hidden; opacity: 0;}
#header-top .toggle-body::before {content: ''; display: flex; border-top: 0.1rem solid var(--secondary-10);}
#header-top .toggle-body .inner {padding-top: var(--spacer6); padding-bottom: var(--spacer6);}
#header-top .toggle-body .dl {display: flex; align-items: normal; flex-direction: column; gap: var(--spacer4); flex: 1;}
#header-top .toggle-body .dl .dt {display: flex; gap: var(--spacer2); align-items: center; font-weight: 500;}
#header-top .toggle-body .dl .dt::before {content: ''; display: inline-flex; width: 2rem; height: 2rem; /*background-image: url(/static/images/kosmes_new/img/head_ico_nuri.svg);*/}
#header-top .toggle-body .dl .dd {font-size: var(--fz-body-sm); color: var(--gray-70);}
#header-top .toggle-body .dl dd {padding-left: var(--spacer7);}

/* .header > util-menu */
#header .head-etc,
#header .head-etc .etc-ul {display: none; align-items: flex-start; justify-content: flex-end; flex-direction: row; gap: var(--spacer6);}
#header .head-etc .etc-ul .li {display: flex; align-items: center; flex-direction: row; position: relative;}
#header .head-etc .etc-ul .li:not(:first-child)::before {content: ''; display: inline-flex; position: absolute; left: -1.3rem; width: 0.1rem; height: 1.2rem; background-color: var(--gray-30);}

#header .drop-wrap {display: inline-flex; position: relative;}
#header .drop-wrap.zoom-drop .drop-menu {top: 100%; opacity: 1; pointer-events: visible;}
#header .drop-wrap .drop-menu {position: absolute; top: 0; left: 50%; z-index: 6; min-width: 15rem; padding: var(--spacer2); margin-top: var(--spacer4); border-radius: var(--rd-8); border: 0.1rem solid var(--gray-30); background-color: var(--white); box-shadow: var(--shadow-btm); transform: translateX(-50%); transition: 0.3s cubic-bezier(0.09, -0.6, 0.5, 2); opacity: 0; pointer-events: none;}
#header .drop-wrap .drop-menu::before {content: ''; display: inline-flex; position: absolute; left: 50%; bottom: 100%; width: 2rem; height: 1.2rem; background-image: url(/static/images/kosmes_new/img/ico_drop_arr.svg); transform: translateX(-50%);}
#header .drop-wrap .drop-menu .drop-list .item-link, .drop-wrap .drop-menu .drop-list .item-size {display: flex; align-items: center; justify-content: flex-start; flex-direction: row; gap: var(--spacer2); height: 4.8rem; padding: 0 var(--spacer2) !important; border-radius: var(--rd-6); font-size: var(--fz-label-sm);}
#header .drop-wrap .drop-menu .drop-btm-btn {display: flex; align-items: flex-start; justify-content: center; flex-direction: row; width: 100%; padding: var(--spacer2) var(--spacer4) 0; border-top: 0.1rem solid var(--gray-30);}
#header .drop-wrap .drop-menu .drop-btm-btn .btn {flex: 1;}
#header .drop-wrap .item-size::before {content: '가'; display: inline-flex; align-items: center; justify-content: center; flex-direction: row; flex-shrink: 0; font-size: var(--fz-body-md); line-height: 1; width: 2.5rem; height: 2.5rem; padding: 0 var(--spacer1); border-radius: var(--rd-4); border: 0.1rem solid var(--gray-30); background-color: var(--white);}
#header .drop-wrap .item-size.xsm::before {font-size: var(--fz-body-sm); width: 2.1rem; height: 2.1rem;}
#header .drop-wrap .item-size.sm::before {font-size: var(--fz-body-md); width: 2.4rem; height: 2.4rem;}
#header .drop-wrap .item-size.md::before {font-size: var(--fz-body-lg); width: 2.5rem; height: 2.5rem;}
#header .drop-wrap .item-size.lg::before {font-size: 2.1rem; width: 2.7rem; height: 2.7rem;}
#header .drop-wrap .item-size.xlg::before {font-size: 2.5rem; width: 3rem; height: 3rem;}
#header .drop-wrap .item-size.active {font-weight: 700; color: var(--secondary); background-color: var(--secondary-5);}
#header .drop-wrap .item-size.active::before {color: var(--white); background-color: var(--secondary);}


#wrap {position: relative; min-height: 100%;}
#wrap[class^=scroll] .header .header-in {position: relative; top: 0; left: 0; width: 100%;}
#wrap.scroll-up #header {transform: translateY(0%); /*border-bottom: 0.1rem solid var(--gray-30);*/}
#wrap.scroll-down #header {position: sticky; transform: translateY(-100%);}
.is-m-gnb #header {border-bottom: 0; z-index: 2;}
#header.is-open {z-index: 3;}
#header.is-open .head-gnb {border-bottom: 0.1rem solid var(--gray-30);}
#header.is-open + #container .grid-map {z-index: 0;}
#header.is-open .head-gnb::after {transform: translateY(0);}
#header.is-open .two-depth-wrap {display: none; width: 100%;}
#header.is-open .one-depth.active + .two-depth-wrap,
#header.is-open .li.active .two-depth-wrap {display: block;}
#header.is-open .li.active .two-depth {display: grid; opacity: 1;}
#header.is-open .li.active .two-depth::before {transform: translateY(0); z-index: 0;}
#header.is-open .li.active .two-depth::before {opacity: 1;}
#header .li.active .one-depth::before {transform: scaleX(1);}

#header {position: sticky; top: 0; left: 0; right: 0; transition: transform ease 0.4s 0.01s; border-bottom: 0.1rem solid var(--gray-30); z-index: 2;}
#header .head-body {display: flex; align-items: center; min-height: 10rem; background-color: var(--white);}
#header .head-body .inner {padding: 0 var(--spacer4);}
#header .head-body .btn-navi {display: inline-flex; align-items: center; flex-direction: column; justify-content: space-between; position: relative; gap: var(--spacer2); min-width: 6.3rem; width: fit-content; padding: var(--spacer3) var(--spacer1); font-size: var(--fz-body-md); font-weight: 500; color: var(--gray-90); line-height: 1;}
#header .head-body .btn-navi::before {content: ''; display: inline-flex; min-width: 2.3rem; min-height: 2.3rem; background-repeat: no-repeat; background-size: contain;}
#header .head-body .btn-navi:hover {border-radius: var(--rd-6); background-color: var(--secondary-5); transition: var(--transition-3);}
#header .head-body .btn-navi.sch::before {background-image: url(/static/images/kosmes_new/img/head_ico_navi_sch.svg);}
#header .head-body .btn-navi.login::before,
#header .head-body .btn-navi.ico-logout::before {min-width: 2.3rem; min-height: 2.3rem;}
#header .head-body .btn-navi.ico-logout::after {content: none;}
#header .head-body .btn-navi.login::before {background-image: url(/static/images/kosmes_new/img/head_ico_navi_login.svg);}
#header .head-body .btn-navi.logout::before {background-image: url(/static/images/kosmes_new/img/head_ico_ navi_login.svg); transform: rotate(-180deg);}
#header .head-body .btn-navi.share::before {background-image: url(/static/images/kosmes_new/img/head_ico_share.svg);}
#header .head-body .btn-navi.join::before {background-image: url(/static/images/kosmes_new/img/head_ico_navi_join.svg); width: 2rem;}
#header .head-body .btn-navi.user::before {background-image: url(/static/images/kosmes_new/img/head_ico_navi_user.svg);}
#header .head-body .btn-navi.my::before {background-image: url(/static/images/kosmes_new/img/head_ico_navi_my.svg);}
#header .head-body .btn-navi.m-all {display: none;}
#header .head-body .btn-navi.m-all::before {background-image: url(/static/images/kosmes_new/img/head_ico_navi_all.svg); min-width: 2.2rem; min-height: 2.2rem;}
#header .head-body .btn-navi .user-name {display: inline-flex; width: fit-content; line-height: 1;}
#header .head-body .btn-navi .user-name .name {color: var(--primary-50); line-height: 1;}
#header .head-body .head-in {display: flex; align-items: center; justify-content: space-between; gap: var(--spacer4);}
#header .head-body .logo {display: inline-flex; height: 5.3rem;}
#header .head-body .logo img {height: 100%;}
#header .head-body .right {display: inline-flex; flex-wrap: wrap; gap: var(--spacer4);}


/* #header > one-depth */
#header .head-gnb {position: relative; background-color: var(--white); border-top: 0.1rem solid var(--gray-30);}
#header .head-gnb > .inner {position: static;}
/*#header .head-gnb::after {content: ''; position: absolute; top: inherit; width: 100%; height: 100%; min-height: var(--gnbBgHeight); background-color: var(--white); z-index: -1; transform: translateY(-101%); transition: var(--transition-2);}*/
#header .gnb {display: flex; align-items: center; justify-content: space-between;}
#header .gnb > ul {display: flex; flex-wrap: wrap; align-items: center; flex-direction: row; gap: var(--spacer2) var(--spacer20);}
#header .li a {flex-direction: row; gap: var(--spacer1); position: relative; height: auto;}
#header .li a:focus {outline: 0; outline-offset: -0.2rem; outline-color: var(--primary-60); color: var(--primary-60);}
#header .li .arrow::after {content: ''; display: inline-flex; width: 2rem; height: 2rem; background: url(/static/images/kosmes_new/img/ico_arrow_down.svg) no-repeat center; background-size: contain;}
#header .one-depth {position: relative; width: max-content; min-height: 5.6rem; font-size: var(--fz-body-lg); font-weight: 500; color: var(--gray-90);}
#header .one-depth.done::after {content: none;}
#header .one-depth::before {content: ''; display: block; position: absolute; left: 0; right: 0; bottom: -0.1rem; height: 0.4rem; transform: scaleX(0); transform-origin: bottom left; background: var(--primary-50); transition: var(--transition-3);}
#header .one-depth::after {content: ''; display: block; margin-left: var(--spacer2); width: 1.4rem; height: 0.8rem; background: url(/static/images/kosmes_new/img/ico_arr_bottom.svg) no-repeat 94%;}
#header .one-depth:hover::before {animation: underline 0.3s ease; transform: scaleX(1);}
#header .one-depth:not(.active):hover {}

/* header > gnb > two-depth */
#header .two-depth-wrap {display: none; grid-template-columns: repeat(1 , 1fr); position: absolute; top: 5.7rem; left: 0; gap: var(--spacer5); width: inherit; min-height: var(--gnbBgHeight); padding: 0 var(--spacer5); background-color: var(--white);}

#header .two-depth-wrap .inner > li {display: flex; align-items: normal; flex: 1; width: 100%; min-height: 3rem; transition: var(--transition-3);}
#header .two-depth-tit {display: flex; min-width: 22rem; height: 100%; padding-top: var(--spacer10); font-size: var(--fz-title-xxlg);}
#header .two-depth-tit .btn-txt {display: inline-flex; height: auto; padding: 0 !important; font-size: var(--fz-title-md); font-weight: 500;  color: var(--white);}
#header .two-depth-tit.active a {color: var(--secondary); background-color: var(--white);}
#header .two-depth {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacer3) var(--spacer8); width: 100%; height: 100%; padding: var(--spacer10) 0 var(--spacer14) var(--spacer8);}
#header .two-depth::before {content: ''; position: absolute; top: 0; left: 22rem; width: 0.1rem; height: 100%; min-height: 15.7rem; background-color: var(--secondary-7); transition: var(--transition-2); opacity: 0;}
#header .two-depth li {width: 100%;}
#header .two-depth > li > a {flex-direction: row; gap: var(--spacer1); position: relative; min-height: 5rem; padding: 0 var(--spacer3); background: #F7F8F9 url(/static/images/kosmes_new/img/ico_swiper_next.svg) no-repeat 95%; border-radius: var(--rd-8); color: var(--gray-90); line-height: 1.4; font-size: var(--fz-title-sm); font-weight: 500;}
#header .two-depth a::before {display: none; content: ''; position: absolute; left: 1rem; width: 0.3rem; height: 0.3rem; background-color: var(--gray-90); border-radius: var(--rd-4);}
#header .two-depth a:focus {outline-offset: 0.2rem; outline-color: var(--primary-50);}
/* header > gnb > three-depth */
#header .three-depth {display: grid; gap: var(--spacer2); padding: var(--spacer5) var(--spacer4);}
#header .three-depth li {}
#header .three-depth a {color: var(--disabled);}


/* header > m-gnb */
#header .m-gnb-wrap {display: none; position: fixed; top: 0; right: -150%; width: 100%; height: 100%; transition: right ease 0.5s 0.1s; z-index: 10;}
#header .m-gnb-wrap.is-open {right: 0;}
#header .m-gnb-wrap.is-open::after {display: block; opacity: 1; z-index: -1;}
#header .m-gnb-wrap::after {display: none; content: ''; position: fixed; top: 0; right: 0; width: 100%; height: 100%; min-height: 100vh; background-color: rgba(0, 0, 0, 0.5); transition: opacity 0.5s 0.1s;}
#header .m-gnb-in {display: flex; align-items: normal; justify-content: flex-start; flex-direction: column; position: absolute; right: 0; top: 0; height: 100%; min-height: 100vh; background-color: var(--white);}
#header .m-gnb-head {display: flex; align-items: normal; justify-content: flex-start; flex-direction: column; position: sticky; top: 0; left: 0; padding: var(--spacer8) var(--spacer6) var(--spacer4);}
#header .m-gnb-head .m-gnb-top-etc {display: flex; align-items: center; justify-content: space-between; flex-direction: row;}
#header .m-gnb-head .m-gnb-top-etc .etc-ul {display: flex;}
#header .m-gnb-head .m-gnb-top-etc .etc-ul li {display: flex; align-items: center; justify-content: flex-start; flex-direction: row;}
#header .m-gnb-head .m-gnb-top-etc .etc-ul li:not(:first-child) {margin-left: var(--spacer4);}
#header .m-gnb-head .m-gnb-top-etc .etc-ul li:not(:first-child)::before {content: ''; display: inline-flex; width: 0.1rem; height: 1.6rem; margin-right: var(--spacer4); background-color: var(--gray-30);}
#header .m-gnb-head .m-gnb-top-etc .etc-ul li button {}
#header .m-gnb-head .ico-close {position: absolute; right: var(--spacer5); width: 2.4rem; height: 2.4rem; background-image: url(/static/images/kosmes_new/img/ico_close_24.svg);}
#header .m-gnb-head .m-gnb-login {display: inline-flex; align-items: center; justify-content: flex-start; flex-direction: row; gap: var(--spacer4);}
#header .m-gnb-head .m-gnb-login .name {font-weight: 500;}
#header .m-gnb-head .m-gnb-top-scroll {display: none; height: 0; overflow: hidden;}

#header .m-gnb-body.type1 {display: flex; align-items: normal; justify-content: flex-start; flex-direction: column; background-color: var(--white); border: 0;}
#header .m-gnb-body {display: flex; align-items: normal; justify-content: flex-start; flex-direction: column; flex: 1; position: relative; overflow-y: auto; scroll-behavior: smooth; border-top: 0.1rem solid var(--gray-20); background-color: var(--secondary-5);}
#header .m-gnb-body .m-gnb-menu {display: flex; align-items: normal; flex-direction: column; flex: 1; background-color: var(--white);}
#header .m-gnb-body .submenu .m-two-depth.active {display: block;}
#header .m-gnb-body .submenu .m-one-depth.active {color: var(--primary-50);}
#header .m-gnb-body .submenu .m-two-depth a.active {color: var(--primary-50);}
#header .m-gnb-body .submenu {}
#header .m-gnb-body .submenu .m-one-depth {display: flex; align-items: center; flex-direction: row; position: relative; padding: 0 var(--spacer6); height: 6.4rem; border-bottom: 0.1rem solid var(--gray-20);}
#header .m-gnb-body .submenu .m-one-depth::after {content: ''; position: absolute; top: 50%; right: 2.4rem; width: 1.4rem; height: 0.8rem; background: url(/static/images/kosmes_new/img/ico_arr_bottom.svg) no-repeat; transform: translateY(-50%); transition: var(--transition-1);}
#header .m-gnb-body .submenu.on .m-one-depth::after {transform: rotate(-180deg); top: 43%;}
#header .m-gnb-body .submenu .m-one-depth.no-submenu::after {display: none;}
#header .m-gnb-body .submenu .m-two-depth {display: none;}
#header .m-gnb-body .submenu .m-two-depth li:last-of-type {border-bottom: 0.1rem solid var(--gray-20);}
#header .m-gnb-body .submenu .m-two-depth li a {flex-direction: row; gap: var(--spacer1); position: relative; min-height: 4.3rem; padding: 0 var(--spacer6) 0 var(--spacer10); font-size: var(--fz-body-sm);}
#header .m-gnb-body .submenu .m-two-depth li a::before {content: ''; position: absolute; top: 1.9rem; left: var(--spacer7); width: 0.3rem; height: 0.3rem; border-radius: var(--rd-12); background-color: var(--gray-70);}
#header .m-gnb-body .submenu .m-two-depth li a:hover {background-color: var(--secondary-5);}
#header .m-gnb-body .submenu .m-two-depth li a:active {border-radius: var(--rd-6); background-color: var(--secondary-10); transition: var(--transition-2);}
#header .m-gnb-body .submenu .m-gnb-body-btm {display: flex; align-items: flex-start; flex-direction: column; gap: var(--spacer2); padding: var(--spacer4) var(--spacer6); border-top: 0.1rem solid var(--gray-20);}

#header .m-gnb-body .m-gnb-in.is-active .m-gnb-top-scroll {display: block;}
#header .m-gnb-body .m-gnb-in .m-gnb-head {border-bottom: 0.4rem solid var(--gray-20);}
#header .m-gnb-body .depth4-body {}
#header .m-gnb-body .depth4-body li {}
#header .m-gnb-body .depth4-body li a {padding: var(--spacer2) var(--spacer13); font-size: var(--input-fz-sm); color: var(--gray-60);}
#header .m-gnb-body .depth4-body li a::before {content: '+'; margin-right: var(--spacer1); font-weight: 300;}


/* container > breadcrumb */
#container {}
#container .head-title-wrap {position: relative; min-height: 7.8rem+*; background: url(/static/images/kosmes_new/img/head_title_bg.svg) no-repeat 100%; background-size: cover;}
#container form > .inner, #container > .inner {min-height: 50rem; padding: var(--spacer10) var(--spacer5) var(--spacer30);}
#container .in-between .contents .breadcrumb-wrap .breadcrumb {padding: 0;}

.breadcrumb-wrap {display: flex; justify-content: center; display: flex; align-items: flex-start; justify-content: center; flex-direction: row; position: absolute; top: 2rem; left: var(--spacer5); padding: 0; margin-bottom: var(--spacer10);}
.breadcrumb-wrap .breadcrumb {display: flex; align-items: center; flex-direction: row; gap: var(--spacer1); width: 100%; max-width: 130rem;}
.breadcrumb-wrap .breadcrumb li {display: inline-flex; align-items: center; flex-direction: row; gap: var(--spacer1); font-size: var(--fz-body-sm);}
.breadcrumb-wrap .breadcrumb li:first-of-type {gap: var(--spacer1);}
.breadcrumb-wrap .breadcrumb li:first-of-type::before {content: ''; display: inline-flex; align-items: center; flex-direction: row; width: 1.4rem; height: 1.4rem; background: url(/static/images/kosmes_new/img/ico_bread_home.svg) no-repeat; background-size: contain;}
.breadcrumb-wrap .breadcrumb li:not(:last-child)::after {content: ''; display: inline-flex; align-items: center; flex-direction: row; width: 1.5rem; height: 1.5rem; background: url(/static/images/kosmes_new/img/ico_arrow_right.svg) no-repeat; background-size: contain;}
.breadcrumb-wrap .breadcrumb li .txt {display: inline-flex; align-items: center; flex-direction: row; line-height: 1.1; /*border-bottom: 0.1rem solid var(--gray-50);*/}
.breadcrumb-wrap .breadcrumb li .txt:focus {outline-offset: 0.4rem; border-radius: var(--rd-1);}
.breadcrumb-wrap .breadcrumb li span.txt {color: var(--gray-90); border-color: var(--gray-90);}
.breadcrumb-wrap .breadcrumb .home a {display: none !important;}


/* container > title */
.page-title-wrap {display: flex; justify-content: center; align-items: center; min-height: 13.4rem;}
.page-title-wrap .h-tit {font-size: calc(var(--fz-heading-md) - 0.4rem); font-weight: 700; text-align: center; line-height: 1.3; text-align: center;}
.page-title-wrap .txt {display: flex; justify-content: center; align-items: center; margin: var(--spacer15) 0 var(--spacer2); color: var(--gray-70); text-align: center; font-size: var(--fz-body-lg);}
.page-title-wrap .txt strong {margin: 0 var(--spacer2);}
.page-title-info {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--spacer5); min-height: 12.2rem; padding: var(--spacer10); margin-bottom: calc(var(--spacer22) + 0.2rem); border-radius: var(--rd-12); border: 0.3rem solid var(--gray-10);}
.page-title-info .box .info {display: flex; flex-wrap: wrap; margin-bottom: var(--spacer2);}
.page-title-info .box .info dt {position: relative; min-width: 8rem;}
.page-title-info .box .info dt::after {content: ':'; margin: 0 var(--spacer1);}
.page-title-info .box .info dd {font-weight: 300;}
.page-title-info .box strong {color: var(--gray-60); font-weight: 300;}
.page-title-info .btn {background-color: var(--primary-50); border-color: var(--primary-50);}


/* popup */
.pop-wrap {display: grid; position: relative; width: 100%; max-height: inherit; height: auto;}
.pop-wrap .dim {display: block; z-index: 3;}
.pop-wrap .inner {width: 100%; min-height: inherit; height: auto; padding: 0 !important; box-shadow: var(--shadow-btm); overflow: hidden;}
.pop-wrap .component-box {min-height: inherit;}
.pop-wrap .swiper-button-prev, .pop-wrap .swiper-button-next {top: 47%; background-color: transparent !important; z-index: 10; border: 0;}
.pop-wrap .swiper-button-prev {left: -9rem;}
.pop-wrap .swiper-button-prev::after {width: 4rem; height: 4rem; background-image: url(/static/images/kosmes_new/img/ico_page_arr_next.svg); transform: rotate(-180deg);}
.pop-wrap .swiper-button-next {right: -9rem;}
.pop-wrap .swiper-button-next::after {width: 4rem; height: 4rem; background-image: url(/static/images/kosmes_new/img/ico_page_arr_next.svg);}
.pop-wrap .popupSwiper {max-width: 50rem; border-radius: 0; background-color: var(--white); overflow: visible; transform: translate(-50%, -50%); opacity: 1;}
.pop-wrap .popupSwiper .btn-wrap {display: flex; gap: 0; padding-top: 0; border-top: 0; background-color: transparent;}
.pop-wrap .popupSwiper .btn-wrap .btn {width: 100%; min-height: 4.4rem; height: inherit !important; border: 0; border-radius: 0 !important; background-color: #7B7B7B; color: var(--white);}
.pop-wrap .popupSwiper .btn-wrap .submit {background-color: #163074; font-weight: 700;}
.pop-wrap .popupSwiper li {border-radius: 0; border: 0;}
.pop-wrap .popupSwiper a {width: 100% !important; height: 100%; min-height: 43rem; max-height: 50rem; padding: var(--spacer2); background-color: var(--white);}
.pop-wrap .popup .swiper-pagination {position: absolute; top: -3rem; margin: 0; gap: var(--spacer1); color: var(--white);}
.pop-wrap .popup .swiper {overflow: hidden;}

/* .popup */
.popup {display: flex; flex-direction: column; position: fixed; top: 50%; left: 50%; width: 100%; max-width: 80rem; max-height: 82vh; transform: translate(-50%, 0); transition: all 0.2s 0.2s cubic-bezier(0.34, 0.01, 0.07, 1.5); transition-duration: 0.5s; /* gap: var(--spacer10); */ box-shadow: var(--shadow-btm2); border-radius: var(--rd-12); color: var(--gray-90); opacity: 0; z-index: -1; overflow: hidden;}
.popup .inner {background-color: var(--white);}
.popup .flx {padding: var(--spacer4);}
.popup input[type=radio] ~ label, .popup input[type=checkbox] ~ label {padding-left: var(--rdo-size-sm);}
.popup.alert {max-width: 44rem;}
.popup.alert .contact-box {min-height: 22rem;}
.popup.sm {max-width: 70rem;}
.popup.on {transform: translate(-50%, -50%); opacity: 1 !important; z-index: 3 !important;}
.popup h3.tit {display: flex; align-items: center; justify-content: space-between; position: relative; min-height: 5rem; padding: 0 var(--spacer5); background-color: var(--primary-50); font-weight: 500; font-size: var(--fz-body-lg); color: var(--white); line-height: 1.5;}
.popup .tit:not(h3.tit, li .tit) {color: var(--primary-70);}
.popup .tit .ico-del {gap: 0; width: 3.4rem; height: inherit; min-height: 3rem;}
.popup .tit .ico-del:hover {background-color: transparent;}
.popup .tit .ico-del::after {width: 1.8rem !important; height: 1.8rem !important; background-image: url(/static/images/kosmes_new/img/ico_del1_20_w.svg);}
.popup .tit .lg.ico-del {top: 0; width: 3.4rem !important; height: 3.4rem !important; gap: 0; z-index: 10;}
.popup .tit .lg.ico-del::after {width: 3.2rem !important; height: 3.2rem !important;}
.popup .tit-s {display: flex; align-items: center; justify-content: space-between; position: relative; padding: 0; padding-left: var(--spacer3); margin-bottom: var(--spacer3); font-weight: 500; font-size: var(--fz-title-md); color: var(--primary-50);}
.popup .tit-s + .tit-s {margin-top: 0 !important;}
.popup .tit-s::before {content: ''; position: absolute; top: 50%; left: 0; width: 0.6rem; height: 0.6rem; border-radius: var(--rd-6); background-color: var(--primary-50); transform: translateY(-50%);}
.popup .table-tit {display: flex; justify-content: center; align-items: center; min-height: 3.9rem; margin-bottom: calc(var(--spacer1) + 0.2rem); border-radius: var(--rd-20); background-color: #204C9A; color: var(--white); font-weight: 500;}

.popup .description {min-height: inherit; margin-bottom: 0;}
.popup .table {table-layout: auto; margin-bottom: 0 !important;}
.popup .table tr.active {background-color: var(--primary-5);}
.popup .table thead {/*position: sticky; top: -0.1rem; height: 5rem !important; z-index: 2;*/}
.popup .table tbody tr td .form-check {justify-content: center;}
.popup .table + .info-list {margin-top: var(--spacer1) !important;}
.popup .table .bg-red {background-color: #FFE9EA !important; color: var(--red); font-weight: 500;}
.popup .table .bg-blue {background-color: var(--primary-60) !important; color: var(--white);}
.popup .table .bg-gray {background-color: var(--secondary-5) !important; border: 0; color: var(--gray-90); font-weight: 500;}
.popup .table .sum {background-color: var(--secondary-5);}
.popup .table .tag-w {display: inline-flex; justify-content: center; align-items: center; width: 4rem; height: 2.2rem; padding: var(--spacer1); background-color: var(--white); border-radius: var(--rd-20); color: var(--primary-60); font-weight: 500;}
.popup .table .num-b {display: inline-flex; justify-content: center; align-items: center; width: 1.6rem; height: 1.6rem; margin: 0 var(--spacer1); background-color: var(--primary-60); border-radius: var(--rd-20); color: var(--white); font-size: 1.2rem; font-weight: 300;}
.popup .table tr th, .popup .table tr td {height: 4.4rem !important; padding: var(--spacer2); font-size: var(--fz-body-sm); color: var(--gray-90); font-weight: 300;}

.popup .file-form .c-red {position: static; transform: none;}
.popup .file-container {flex-direction: column;}
.popup .form-group .form-conts {position: relative;}
.popup .form-group .form-conts .cnt {top: 0.9rem;}
.popup .info-list {gap: 0 !important; font-size: var(--fz-body-sm);}
.popup .info-list .tit.none {background: transparent;}
.popup .info-list .between {display: flex; justify-content: space-between;}
.popup .info-list .c-red {margin-left: 0; font-size: var(--fz-body-sm);}
.popup .info-list li + .tit-s {margin-top: var(--spacer4); line-height: 1.4;}
.popup .search-wrap {display: grid; gap: var(--spacer5);}
.popup .search-wrap .sch {display: flex; gap: var(--spacer2);}
.popup .search-wrap .sch .form-control {padding-right: var(--spacer5);}
.popup .search-wrap .sch .form-control ~ .ico-sch {right: 1.3rem; width: 2rem; height: 2rem;}
.popup .search-wrap .sch .form-select {max-width: 13.2rem;}
.popup .info-list .pd2 {padding-left: var(--spacer7);}
.popup .contact-box {display: flex; flex-direction: column; gap: var(--spacer5); padding: var(--spacer5); width: 100%; min-height: 46rem; max-height: 69vh; background-color: var(--white); border: 1rem solid var(--white); border-bottom-width: 4rem; overflow-y: scroll;}
.popup .contact-box.bg .info-list li::before {content: none;}
.popup .contact-box dl {display: grid; gap: var(--spacer3);}
.popup .contact-box dl dt {display: flex; align-items: flex-end; justify-content: space-between; font-size: var(--fz-title-md); font-weight: 500;}
.popup .contact-box dl dt .file-total {font-size: var(--fz-body-md);}
.popup .contact-box dl dt .file-total .current {color: var(--primary-50);}
.popup .contact-box dl dd {}
.popup .contact-box .txt-cnt {display: flex; justify-content: flex-end; margin-top: var(--spacer2); font-size: var(--fz-body-sm); color: var(--gray-70);}
.popup .btn-box .btn {min-width: 8rem;}

.popup input[type=number] {max-width: 100%; min-width: auto !important; height: 3.4rem; border-radius: var(--rd-4);}
.popup .input-unit-wrap {position: relative;}
.popup .input-unit-wrap input {padding-right: var(--spacer8);}
.popup .number ~ .cnt {top: 50%; transform: translateY(-50%);}
.popup .page-btn-wrap {position: relative; margin: 0 !important; gap: var(--spacer1) var(--spacer4); padding: var(--spacer4) 0; border-top: 0.1rem solid #D9D9D9; background-color: var(--white); z-index: 1;}
.popup .btn-wrap {margin-top: 0;}
.popup .btn.lg {min-width: 7rem; min-height: 3.9rem; border-radius: var(--rd-4);}
.popup .btn.md {min-width: 5.5rem;}
.popup .form-select {height: 3.8rem; font-size: var(--fz-body-sm); border-radius: var(--rd-6);}

.popup .bg {display: flex; flex-direction: column; gap: var(--spacer10); justify-content: space-between; position: relative; min-height: 65rem; padding: var(--spacer7) var(--spacer4) var(--spacer8) var(--spacer7);}
.popup .ico-del::after {width: 1.2rem !important; height: 1.2rem !important;}
.popup .border-box {padding: var(--spacer6); padding-right: var(--spacer2); border: 0.1rem solid #dcdcdc;}
.popup .scroll {overflow-y: scroll;}
.popup .scroll-s {display: grid; max-height: 45rem; padding-right: var(--spacer2); overflow-y: scroll;}
.popup .download {vertical-align: text-top; border-bottom: 0.1rem solid var(--primary-20); color: var(--primary-20);}
.popup .btn.sm {font-size: var(--btn-fz-xsm);}
.popup input[type=checkbox] ~ label::before, input[type=checkbox] + span::before, input[type=checkbox] ~ a::before {width: 1.7rem; height: 1.7rem;}
/*.popup [class*="scroll"] td {width: 100%;}
.popup [class*="scroll"] td:hover {cursor: pointer;}*/

.pop-wrap.md .popup {min-width: 112rem; max-width: 112rem;}
.pop-wrap.md .scroll {padding: var(--spacer20); min-height: 70rem; max-height: 70rem; background-color: var(--gray-5); overflow-y: scroll;}
.pop-wrap.md .scroll .title {display: grid; grid-template-columns: 1fr 2.5fr 1fr; align-items: center; margin-bottom: var(--spacer6); border-radius: var(--rd-8); font-size: var(--fz-body-lg); box-shadow: var(--shadow-btm3); font-weight: 500; overflow: hidden;}
.pop-wrap.md .scroll .title span {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; max-width: 21rem; min-width: 21rem; min-height: 5.2rem; margin-bottom: 0; background-color: #DAE5EA;}
.pop-wrap.md .scroll .title .tit,
.pop-wrap.md .scroll .title .tit2 {font-size: var(--fz-body-md);}
.pop-wrap.md .scroll .title .info {max-width: 100%; background-color: var(--white);}
.pop-wrap.md .scroll .process {display: grid; gap: var(--spacer20);}
.pop-wrap.md .scroll .process li {display: flex; align-items: center; position: relative; min-height: 14.4rem; border-radius: var(--rd-8); font-size: var(--fz-body-lg); box-shadow: var(--shadow-btm3);}
.pop-wrap.md .scroll .process li:not(:last-of-type)::after {content: ''; position: absolute; left: 50%; bottom: -6.2rem; width: 4.8rem; height: 4.8rem; background: url(/static/images/kosmes_new/img/process_arr.svg) no-repeat; transform: translateX(-50%); background-size: contain;}
.pop-wrap.md .scroll .process li:nth-of-type(2n) .tit {background-color: #A5F1F6;}
.pop-wrap.md .scroll .process li dl {display: grid; grid-template-columns: 1fr 2.5fr 1fr; width: 100%; height: 100%; border-radius: var(--rd-8); background-color: var(--white); overflow: hidden;}
.pop-wrap.md .scroll .process li .tit,
.pop-wrap.md .scroll .process li .tit2 {display: flex; align-items: center; justify-content: center; width: 100%; max-width: 21rem; min-width: 21rem; min-height: 8rem; text-align: center; font-size: var(--fz-body-md);}
.pop-wrap.md .scroll .process li .tit {margin-bottom: 0; background-color: #A5DEF6;}
.pop-wrap.md .scroll .process li .tit2 {background-color: #E4F7FF;}
.pop-wrap.md .scroll .process li .info {display: flex; align-items: center; justify-content: center; width: 100%; padding: var(--spacer4); text-align: center; font-size: var(--fz-body-md);}
.pop-wrap.md .scroll .process li .info span {font-size: var(--fz-body-sm);}


.vouinfo h3.tit {display: flex; align-items: center; justify-content: space-between; min-height: 6rem; padding: 0 var(--spacer5) 0 var(--spacer10); background-color: var(--primary-50); font-weight: 700; font-size: var(--fz-body-xlg); color: var(--white); line-height: 1.5;}
.vouinfo h3.tit .ico-del {gap: 0; width: 3.4rem; height: 3rem;}
.vouinfo h3.tit .ico-del:hover {background-color: transparent;}
.vouinfo h3.tit .ico-del::after {width: 2rem !important; height: 2rem !important; background-image: url(/static/images/kosmes/ico_del1_20_w.svg);}
.vouinfo h3.tit .lg.ico-del {top: -1.4rem; width: 3.4rem !important; height: 3.4rem !important; gap: 0; z-index: 10;}
.vouinfo h3.tit .lg.ico-del::after {width: 3.2rem !important; height: 3.2rem !important;}
.vouinfo .tit-s {display: flex; align-items: center; justify-content: space-between; position: relative; padding: 0; padding-left: var(--spacer3); margin-bottom: var(--spacer3); font-weight: 500; font-size: var(--fz-title-md); color: var(--primary-50);}
.vouinfo .tit-s + .tit-s {margin-top: 0 !important;}
.vouinfo .tit-s::before {content: ''; position: absolute; top: 50%; left: 0; width: 0.6rem; height: 0.6rem; border-radius: var(--rd-6); background-color: var(--primary-50); transform: translateY(-50%);}
.vouinfo .table-tit {display: flex; justify-content: center; align-items: center; min-height: 3.9rem; margin-bottom: calc(var(--spacer1) + 0.2rem); border-radius: var(--rd-20); background-color: #204C9A; color: var(--white); font-weight: 500;}
.vouinfo .info-list {gap: 0 !important; font-size: var(--fz-body-xsm);}
.vouinfo .info-list .between {display: flex; justify-content: space-between;}
.vouinfo .info-list .c-red {margin-left: 0; font-size: var(--fz-body-sm);}
.vouinfo .info-list li + .tit-s {margin-top: var(--spacer4); line-height: 1.4;}

.vouinfo .table {table-layout: auto; margin-bottom: 0 !important;}
.vouinfo .table tr.active {background-color: var(--primary-5);}
.vouinfo .table thead {position: sticky; top: -0.1rem; height: 5rem !important; z-index: 2;}
.vouinfo .table + .info-list {margin-top: var(--spacer1) !important;}
.vouinfo .table .bg-red {background-color: #FFE9EA !important; color: #E71825; font-weight: 500;}
.vouinfo .table .bg-blue {background-color: var(--primary-60) !important; color: var(--white);}
.vouinfo .table .bg-gray {background-color: var(--secondary-5) !important; border: 0; color: var(--gray-90); font-weight: 500;}
.vouinfo .table .sum {height: 6rem !important; background-color: var(--secondary-5);}
.vouinfo .table .tag-w {display: inline-flex; justify-content: center; align-items: center; width: 4rem; height: 2.2rem; padding: var(--spacer1); background-color: var(--white); border-radius: var(--rd-20); color: var(--primary-60); font-weight: 500;}
.vouinfo .table .num-b {display: inline-flex; justify-content: center; align-items: center; width: 1.6rem; height: 1.6rem; margin: 0 var(--spacer1); background-color: var(--primary-60); border-radius: var(--rd-20); color: var(--white); font-size: 1.2rem; font-weight: 300;}
.vouinfo .table tr th {height: 3.9rem !important; padding: var(--spacer2); background-color: #DCE4EC; border: 0.1rem solid #99B0CB; border-left: 0; border-right: 0; font-size: var(--fz-body-sm);}
.vouinfo .table tr th + td {padding: var(--spacer4); text-align: left;}
.vouinfo .table tr th:not(:first-of-type) {border-left: 0.1rem solid #99B0CB;}
.vouinfo .table tr th:not(:last-of-type) {border-right: 0.1rem solid #99B0CB;}
.vouinfo .table tr:nth-of-type(2) th {height: 3.9rem !important; background-color: var(--secondary-5);}
.vouinfo .table tr td {height: 6rem !important; padding: var(--spacer2) var(--spacer1); background-color: var(--white); font-size: var(--fz-body-sm); color: var(--gray-90); font-weight: 300;}
.vouinfo .table.blue tr th {background-color: #CADDFF; font-size: var(--fz-body-sm);}
.vouinfo .table.blue tr td {background-color: #EFF5FF; height: 6rem !important;}
.vouinfo .table.blue tr th:not(:first-of-type) {border-left: 0.1rem solid #95ADD7;}
.vouinfo .table.blue tr td:not(:last-of-type) {border: 0.1rem solid #95ADD7;}


.voucher-swiper-in {overflow: hidden;}
.voucher-apply {display: flex; flex-wrap: wrap; gap: var(--spacer5);}
.voucher-apply li {position: relative; flex: 1 1 48.5%; transition: var(--transition-2); border-radius: var(--rd-30); box-shadow: var(--shadow-btm3); overflow: hidden;}
.voucher-apply li .quick-box {display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--spacer2); position: relative; height: 100%; padding: var(--spacer12) var(--spacer8) var(--spacer10) var(--spacer15); min-height: 34.3rem;}
.voucher-apply li .quick-box::after {content: ''; position: absolute; top: 50%; right: 1.5rem; min-width: 31rem; min-height: 27rem; background-image: url(/static/images/kosmes_new/img/main_voucher_img01.svg); background-repeat: no-repeat; background-size: contain; transform: translateY(-50%);}
.voucher-apply li .quick-box:focus {border-radius: var(--rd-30); outline-offset: -0.2rem; outline-color: var(--primary-50);}
.voucher-apply li:nth-of-type(1) .btn:hover {color: #004a5b;}
.voucher-apply li:nth-of-type(1) {background-color: #E5FAFF; border: 0.1rem solid #C9E8EF;}
.voucher-apply li:nth-of-type(1) .quick-box {color: #006980;}
.voucher-apply li:nth-of-type(1) .btn::before {background-color: #41DDFF;}
.voucher-apply li:nth-of-type(2) .btn:hover {color: #066722;}
.voucher-apply li:nth-of-type(2) {background-color: #FCFFEB; border: 0.1rem solid #E5EBC3;}
.voucher-apply li:nth-of-type(2) .quick-box { color: #007B23;}
.voucher-apply li:nth-of-type(2) .quick-box::after {background-image: url(/static/images/kosmes_new/img/main_voucher_img02.svg);}
.voucher-apply li:nth-of-type(2) .btn::before {background-color: #C7F50D;}

.voucher-apply li .top {display: grid; gap: var(--spacer2); margin-bottom: var(--spacer5); z-index: 1;}
.voucher-apply li .tit {display: grid; gap: 0; font-size: var(--fz-title-xxxxlg);}
.voucher-apply li .tit span {font-weight: 400; line-height: 1;}
.voucher-apply li .tit strong {font-weight: 900;}
.voucher-apply li .desc {max-width: 24rem; color: var(--gray-70);}
.voucher-apply li .btn-wrap {display: grid; gap: var(--spacer1);}
.voucher-apply li .btn {position: relative; height: auto; padding: 0 var(--spacer6) 0 var(--spacer11); background: transparent; border: 0; transition: var(--transition-2); font-weight: 500; z-index: 1;}
.voucher-apply li .btn:focus {border-radius: var(--rd-30); outline-offset: -0.2rem; outline-color: var(--primary-50);}
.voucher-apply li .btn::before {content: ''; position: absolute; left: 0; width: 100%; max-width: 3.7rem; min-height: 3.7rem; border-radius: var(--rd-30); background-color: var(--gray-20); transition: var(--transition-2); z-index: -1;}
.voucher-apply li .btn::after {content: ''; position: absolute; left: 1rem; min-width: 1.6rem; height: 1rem; background: url(/static/images/kosmes_new/img/ico_arr_next.svg) no-repeat 50%; transition: var(--transition-2); z-index: -1; background-size: contain;}
.voucher-apply li:hover, .voucher-apply li:hover:focus {transform: translateY(-1rem);}
.voucher-apply li .btn:hover::before {max-width: 100%;}
.voucher-apply li .btn:hover::after {left: 1.8rem;}


.satisLevel .check {display: flex; align-items: center; justify-content: space-between;}
.satisLevel .check span {display: inline-flex; align-items: center; justify-content: center; width: 3rem; min-height: 3rem; padding: 0 1.2rem; border: 0.1rem solid #B1B8BE; border-radius: var(--rd-6); font-size: var(--btn-fz-md); background-color: var(--white); color: var(--gray-90); transition: var(--transition-2); font-weight: 300; line-height: 1; font-size: var(--fz-body-sm);}
.satisLevel .check span.active {background: #246BEB; color: var(--white); border-color: #246BEB;}
.satisLevel .level {display: flex; align-items: center; justify-content: space-between; margin-top: 0.6rem;}
.satisLevel .level span:where(.left, .right) {padding: 0;}
.satisLevel .check.eth {gap: 0.6rem;}
.satisLevel .check.eth > span {flex: 1;}

.form-survey {display: grid;}
.form-survey tbody {counter-reset: number;}
.form-survey tbody tr {display: grid; gap: var(--spacer4);}
.form-survey tbody tr .satisLevel {display: grid; gap: var(--spacer1);}
.form-survey tbody tr .satisLevel .txt-cnt {display: flex; justify-content: flex-end; font-size: var(--fz-body-sm); font-weight: 300; color: var(--gray-70);}
.form-survey tbody tr .satisLevel .txt-cnt .c-blue {color: var(--primary-50);}
.form-survey tbody tr .tit {position: relative; padding-left: var(--spacer8); font-size: var(--fz-title-xsm); font-weight: 500;}
.form-survey tbody tr:not(:last-of-type) {padding-bottom: var(--spacer10); margin-bottom: var(--spacer10); border-bottom: 0.1rem solid #A7A7A7;}
.form-survey tbody tr:not(:last-of-type) .tit::before {content: counter(number); counter-increment: number; display: flex; justify-content: center; align-items: center; position: absolute; top: 0.3rem; left: 0; width: 2rem; height: 2rem; background-color: var(--gray-90); border: 0.1rem solid var(--gray-60); color: var(--white); font-size: var(--fz-title-sm); border-radius: 100%; font-weight: 500;}
.form-survey tbody tr:last-of-type .tit {padding-left: 0;}
.form-survey tbody tr:last-of-type .satisLevel {gap: var(--spacer1);}
.form-survey tbody tr .check {display: flex; justify-content: center;}
.form-survey tbody tr .check span {display: flex; justify-content: center; align-items: center; min-width: 5rem; min-height: 4.7rem; border: 0.1rem solid #4F4F4F; font-size: var(--fz-title-sm); font-weight: 500; cursor: pointer;}
.form-survey tbody tr .check span:not(:last-of-type) {border-right: 0;}
.form-survey tbody tr .check span:first-of-type {border-radius: var(--rd-8) 0 0 var(--rd-8);}
.form-survey tbody tr .check span:last-of-type {border-radius: 0 var(--rd-8) var(--rd-8) 0;}
.form-survey tbody tr .level {display: flex; justify-content: space-between; color: var(--gray-70); font-size: var(--fz-body-sm);}
.form-survey tbody tr .level span {display: inline-flex; justify-content: center; min-width: 10rem;}
.form-survey .textarea {font-family: 'Pretendard'; min-height: 15rem; border-radius: var(--rd-8); font-size: var(--fz-body-md);}
.form-survey.none tbody tr:not(:last-of-type) {padding-bottom: var(--spacer6); margin-bottom: 0; border-bottom: 0;}
.form-survey.none tbody tr:not(:last-of-type) .tit {padding-left: 0; line-height: 1;}
.form-survey.none tbody tr:not(:last-of-type) .tit::before {display: none;}


.quick-menu {position: fixed; right: 9rem; bottom: 5rem; transition: var(--transition-4); z-index: 1; opacity: 0;}
.quick-menu.on {bottom: calc(1rem + 5vw); width: auto; height: auto; opacity: 1;}
.quick-menu ul {display: flex; flex-direction: column-reverse; gap: calc(var(--spacer1)*2);}
.quick-menu ul li {}
.quick-menu ul li a {justify-content: center; min-width: 4.8rem; width: 4.8rem; height: 4.8rem; background-color: var(--primary-50); color: var(--white); border-radius: var(--rd-full); transition: all 0.3s ease-in-out; transition: var(--transition-2); font-size: var(--fz-body-sm);}
.quick-menu ul li a:hover {background-color: var(--primary-50);}
.quick-menu ul li.btn-location {z-index: 1;}

/** quick-btns **/
.quick-btns {position: fixed; right: 0; top: 25rem; transition: var(--transition-2); transform: translateX(12.7rem); z-index: 1;}
.quick-btns.active {transform: translateX(0);}
.quick-btns .btn {position: absolute; top: 50%; left: -3.1rem; min-width: 3.2rem; min-height: 4.6rem; transform: translateY(-50%); border-radius: var(--rd-20) 0 0 var(--rd-20); border-color: var(--table-bd); background-color: #F7F8F9; text-indent: -9999px;}
.quick-btns .btn::before {content: ''; position: absolute; left: 1.2rem; width: 2rem; height: 2rem; background: url(/static/images/kosmes_new/img/ico_swiper_next.svg) no-repeat; background-size: contain;}
.quick-btns .btn::after {content: ''; position: absolute; right: -0.2rem; width: 0.6rem; height: 100%; background-color: #F7F8F9;}
.quick-btns ul {display: flex; flex-direction: column; gap: var(--spacer4); padding: var(--spacer8) var(--spacer7); border: 0.1rem solid #d6e0eb; border-width: 0.1rem 0 0.1rem 0.1rem; border-radius: var(--rd-12) 0 0 var(--rd-12); background-color: #F7F8F9; box-shadow: var(--shadow-btm2);}
.quick-btns li button {outline-offset: 0.2rem;}
.quick-btns li button::before {content:''; display: block; width:6rem; height:6rem; margin:0 auto; border-radius: 50%; background-color: var(--white); background-repeat:no-repeat; background-position:center;}
.quick-btns li button.voucher::before {background-image:url(/static/images/kosmes_new/img/ico_quick_voucher.svg);}
.quick-btns li button.manual::before {background-image:url(/static/images/kosmes_new/img/ico_quick_manual.svg);}
.quick-btns li button.qna::before {background-image:url(/static/images/kosmes_new/img/ico_quick_manual.svg);}
.quick-btns li button.report::before {background-image:url(/static/images/kosmes_new/img/ico_quick_manual.svg);}
.quick-btns li span {display: block; width:7rem; margin: var(--spacer2) 0 0; font-size: 1.3rem; font-weight: 500; line-height: 1.2; color: #464C53;}


/* 파일첨부 */
.file {display: flex; align-items: center; grid-column-gap: var(--spacer4); grid-row-gap: var(--spacer7);}
.file.right {}
.file .agree-wrap .agree-check {}
.file .user-info-list .tit {width: auto;}
.file .form-group:nth-child(2n):last-of-type {border-bottom: 0.1rem solid var(--gray-20);}
.file .full {width: 100%; max-width: 100% !important; flex: auto; padding-left: 0 !important; padding-right: 0 !important;}
.file .full.agree-wrap {border-bottom: 0.1rem solid var(--gray-20); padding-bottom: var(--spacer7) !important;}
.file .file-form:last-of-type {max-width: calc(50% - 0.8rem);}
.file .file-form:first-of-type {max-width: 100%;}
.file .form-group .info-list {gap: var(--spacer1); margin-top: var(--spacer1);}
.file .form-group .info-list li {line-height: 1.5 !important;}
.file .tit {display: flex; align-items: center; justify-content: space-between; gap: var(--spacer5); width: 100%; padding: 0; font-weight: 500;}
.file .tit .btn {width: fit-content;}
.file .sm {width: auto !important;}
.file .btn-box {display: flex; flex-wrap: wrap; gap: var(--spacer2);}


/* fileform */
.file .form-check {flex-wrap: wrap; gap: var(--spacer3);}
.file-form {display: flex; flex-direction: column; width: 100%; min-height: 14.2rem; border: 0.1rem solid var(--table-bd);}
.file-form .category, .flx .tit, .file-form .file_prg {display: flex; min-width: calc(18rem + 4vw); max-width: 23rem; padding: var(--spacer2) 0 0 var(--spacer4); font-weight: 500; color: var(--gray-90); text-align: left;}
.file-form .category .c-red {position: relative; top: inherit; left: inherit; margin: 0; transform: none; color: var(--gray-90) !important; font-weight: 500; font-size: var(--fz-body-md);}
.file-form .category .c-red::after {content: '*'; margin: var(--spacer1) 0 0 var(--spacer1); color: #BD2C0F;}
.file-form .btn.ico-down {min-width: 2.5rem; gap: 0; padding: 0 var(--spacer1); text-indent: -9999px;}
.file-form > div {display: grid; gap: var(--spacer4); width: 100%;}
.file-form .c-red {width: max-content; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: var(--fz-body-sm);}
.file-form .file-container {display: flex; flex-direction: row; gap: var(--spacer3) !important; padding: var(--spacer4); position: relative; max-width: 100%; width: 100%;}
.file-form .file-container .file-container {padding: 0 !important;}
.file-form .file-container img {min-width: 1.6rem;}
.file-form .file-container:not(:last-of-type) {border-bottom: 0.1rem solid var(--table-bd);}
.file-form .file-container .align-row:last-of-type {justify-content: flex-end;}
.file-form .file-container .align-col .align-row:first-of-type {/*flex-direction: column-reverse;*/}
.file-form .file-container .align-col .align-row .align-row {gap: var(--spacer2) !important;}
.file-form .file-container .align-col, .file-form .file-container .align-col .align-row:first-of-type {position: static; gap: var(--spacer2) var(--spacer5); flex: auto;}
.file-form .file-container input[type=checkbox] ~ label::before {transform: translateY(-43%);}
.file-form .file-container .ico-del {width: max-content; min-width: 2rem; min-height: 2rem; gap: 0;}
.file-form .ico-upload {width: max-content; gap: var(--spacer1); padding: 0 var(--spacer3); font-size: var(--fz-body-md);}
.file-form .ico-upload::after {width: 1.5rem; height: 1.5rem; background: url(/static/images/kosmes_new/img/ico_file_upload.svg) no-repeat 100%; background-size: contain; margin-bottom: 0.2rem;}
.file-form .del {font-size: var(--fz-body-sm);}
.file-form .file-btn {display: flex; align-items: center; gap: var(--spacer3);}
.file-form .file-list.img {flex-direction: row; flex-wrap: wrap; gap: 1rem 2rem;}
.file-form .file-list li.right, .file-form .file-list .file-item.right {flex: 1;}
.file-form .file-list > div {display: flex; align-items: flex-start;}
.file-form.sec {min-height: auto;}
.file-form.sec > .file-container {border-bottom: 0;}
.file-form.sec .ico-del {margin-left: 1rem;}

/* 파일첨부(상세) */
.file-form.view {justify-content: center; max-height: inherit; min-height: 8rem; padding: var(--spacer3) var(--spacer6); background-color: var(--gray-5); border-radius: var(--rd-8); border: 0;}
.file-form.view .file-container {align-items: center; gap: var(--spacer4); padding: 0; background-color: transparent; border: 0; border-radius: var(--rd-8); border: 1px solid red;}
.file-form.view .file-list {flex-direction: row; flex-wrap: wrap; align-items: center; width: 100%; min-height: 5rem; gap: var(--spacer2) var(--spacer9);}
.file-form.view .file-list > div {display: flex; align-items: center; justify-content: flex-start; gap: var(--spacer2); position: relative; width: inherit; min-height: 5rem; padding: var(--spacer2) var(--spacer6) var(--spacer2) var(--spacer4); border: 0.1rem solid var(--table-bd); border-radius: var(--rd-6); font-size: var(--fz-body-md);}
.file-form.view .file-list li .file-filename, .file-form.view .file-list .file-item .file-filename {display: flex; align-items: flex-start; min-width: fit-content;}
.file-form.view ~ .page-btn-wrap {margin: var(--spacer5) 0 0;}

.file-list {display: flex; flex-direction: column; gap: var(--spacer1); width: 100%; max-height: 9.8rem; padding: var(--spacer1); overflow-y: scroll;}
.file-list::-webkit-scrollbar {width: 0.7rem; height: 0.3rem; background-color: transparent;}
.file-list::-webkit-scrollbar-thumb {background-clip: padding-box; background-color: var(--gray-20); border-radius: var(--rd-30);}
.file-list .btn.ico-down {justify-content: center; gap: 0; min-width: 2.4rem; min-height: 2.5rem; padding: 0 var(--spacer1); text-indent: -9999px;}
.file-list .btn.ico-down::after {margin-left: 0;}
.file-list .flex {display: flex; justify-content: space-between; width: 100%;}
.file-list li, .file-list .file-btn {gap: 0;}
.file-list li, .file-list .file-filename {display: flex; align-items: center; gap: var(--spacer1);}
.file-list li, .file-list .file-filename, .file-list .file-filename span {display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; color: var(--gray-70);}
.file-list li, .file-list .file-filename img {min-width: 1.6rem; height: 2rem;}
.file-list li, .file-list .file-filesize {min-width: fit-content;}
.file-list li, .file-list .btn {min-width: fit-content; gap: 0; border-radius: var(--rd-4);}
.file-list li, .file-list .ico-down {min-width: 2.6rem; max-height: 2.2rem; min-height: 2.2rem; padding: 0;}
.file-list li, .file-list .file-item {display: flex; align-items: center; gap: var(--spacer1) var(--spacer2); color: var(--gray-70);}
.file-list li, .file-list .file-item .ico-down::after {display: flex; gap: var(--spacer2); height: 1.2rem; margin: 0; overflow: visible;}
.file-list .file-item .ico-down {width: 1.3rem !important; text-indent: -9999px;}
.file-list input[type=checkbox] ~ label {padding-left: var(--spacer5) !important;}
.file-list.img .file-img {width: 8.8rem; height: 8.8rem;}
.file-list.img .file-img img {width: 100%; height: 100%;}
.file-list.bg .file-filename {padding: 0;}
.file-list.bg .file-filename::before {content: none;}

.file-filename {display: flex; align-items: center; gap: var(--spacer2); position: relative; text-align: left;}
.file-filename::before {display: none; position: absolute; top: 0.3rem; left: 0; content: ''; width: 1.6rem; height: 1.6rem; background: url(/static/images/kosmes_new/img/ico_file.svg) no-repeat center center; background-size: contain;}

.fileBox {display: flex; flex-direction: column;  gap: 2rem 5rem;}
.fileBox li, .fileBox .file-item {display: flex; align-items: center; gap: 1rem;}
.fileBox .file {gap: 0.6rem; line-height: 1.5; color: var(--gray-90); text-align: left;}
.fileBox .file::before {content: ''; display: block; min-width: 2.2rem; min-height: 2.2rem;}
.fileBox .file.hwp::before {background: url(/static/images/kosmes_new/img/ico_hwp.svg) no-repeat center center;}


.link-list {padding: var(--spacer2) 0 var(--spacer13);}
.link-list ul {display: flex; flex-wrap: wrap; gap: var(--spacer2) var(--spacer5);}
.link-list ul li {flex: 1 1 22%; border-radius: var(--rd-12); transition: var(--transition-2); overflow: hidden;}
.link-list ul li:hover, .link-list ul li:focus {transform: translateY(-1rem);}
.link-list ul li a {min-height: 7rem; justify-content: space-between; padding: var(--spacer2) var(--spacer5) var(--spacer2) var(--spacer8); background-color: var(--gray-5);}
.link-list ul li a span:first-of-type {display: flex; align-items: center; gap: var(--spacer4); position: relative; font-weight: 500;}
.link-list ul li a .tit::after {content: ''; display: inline-flex; width: 0.7rem; height: 0.9rem; background: url(/static/images/kosmes_new/img/foot_ico_quick_arr.svg) no-repeat 100%;}
.link-list:not(.voucher) ul li a .img {display: flex; justify-content: center; align-items: center; width: 6.8rem; height: 5.2rem;}
.link-list ul li a .img img {width: 100%; height: 100%;}
.link-list ul li a:focus {border-radius: var(--rd-12);}
.link-list.voucher {padding: 0;}
.link-list.voucher .inner {padding: 0 !important;}
.link-list.voucher ul {min-height: 8.9rem;}
.link-list.voucher ul li {font-size: var(--fz-title-lg);}
.link-list.voucher ul li a {padding: var(--spacer2) var(--spacer7) var(--spacer2) var(--spacer6);}
.link-list.voucher ul li a .tit::after {width: 2rem; height: 2rem; background: url(/static/images/kosmes_new/img/ico_swiper_next.svg) no-repeat; background-size: contain;}
.link-list.voucher ul li .cnt-box {display: flex; gap: 0; width: 100%;}
.link-list.voucher ul li .cnt-box .tit {justify-content: space-between; width: 100%; font-weight: 600;}
.link-list.voucher ul li .cnt-box .all-cnt {display: flex; gap: var(--spacer1); font-size: var(--fz-title-xxxxlg);}
.link-list.voucher ul li .cnt-box .all-cnt span {font-size: var(--fz-title-xxlg); font-weight: 300; line-height: 1;}
.link-list.voucher ul li:nth-of-type(1) a {background-color: #D5E7FF;}
.link-list.voucher ul li:nth-of-type(2) a {background-color: #D9F2F6;}
.link-list.voucher ul li:nth-of-type(3) a {background-color: #EAF6EC;}



.dim, .w-gnb-dim {display: none; position: fixed; top: 0; right: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4);}
.dim {z-index: 2;}
.w-gnb-dim {z-index: 2;}

#footer {display: flex; align-items: center; min-height: 15rem; position: relative; background-color: var(--gray-5); font-size: var(--fz-body-sm);}
#footer > .inner {display: flex; gap: var(--spacer4) var(--spacer16);}
#footer .f-logo {height: 3rem;}
#footer .f-logo img {height: 100%;}
#footer p {color: var(--gray-80); font-weight: 300;}
#footer .f-btm {display: flex; flex-direction: column; width: 100%; gap: var(--spacer1);}
#footer .f-btm .f-cnt {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; flex: 1;}
#footer .f-btm .f-link {margin-bottom: var(--spacer2);}
#footer .f-btm .f-link .f-menu {display: flex; flex-wrap: wrap; gap: var(--spacer1) var(--spacer11);}
#footer .f-btm .f-link .f-menu a::after {}
#footer .f-btm .f-link .f-menu a {font-weight: 500;}
#footer .f-btm .f-link .f-menu a:focus {outline-offset: 0.4rem;}
#footer .f-btm .f-link .f-menu .point {color: var(--primary-50); font-weight: 500;}
#footer .f-btm .f-info {display: flex; flex-wrap: wrap; gap: var(--spacer1) var(--spacer5);}
#footer .f-btm .info-cs p {font-size: var(--fz-body-xsm); color: var(--gray-60);}


/* title */
.main-tit-wrap {display: flex; align-items: center; flex-direction: row; gap: var(--spacer2); margin: var(--spacer23) 0 var(--spacer6);}
.main-tit-wrap .tit {font-size: var(--fz-title-xxxxlg); text-transform: uppercase;}
.main-sect .inner {display: flex; align-items: normal; justify-content: flex-start; flex-direction: column; position: relative; padding: var(--spacer15) 0;}
.main-sect.bg-blue {background-color: #F0F6FF;}
.main-sect.bg-gray {background-color: #FDFDFD; box-shadow: inset 0 -6px 6px -4px rgba(0, 0, 0, 0.06);}
.main-sect .tit-l {display: flex; align-items: center; justify-content: center; margin-bottom: var(--spacer5); font-size: var(--fz-title-xxxlg);}
.main-sect .tit-l span {font-weight: 300;}
.main-sect .d-card {box-shadow: var(--shadow-btm2);}

.main-sect.banner {}
.main-sect.banner .search {display: flex; justify-content: center; margin-bottom: var(--spacer10); text-align: center;}
.main-sect.banner .search .sch-form {display: grid; gap: var(--spacer2); max-width: 59.6rem; width: 100%;}
.main-sect.banner .search .sch-form .desc {font-size: var(--fz-title-md); font-weight: 500;}
.main-sect.banner .search .sch-form .sch-input {}
.main-sect.banner .search .sch-form .sch-input input {border: 0.2rem solid var(--primary-60); border-radius: var(--rd-40);}
.main-sect.banner .search .sch-form .sch-input input::placeholder {color: #94A9BE;}
.main-sect.banner .tit-l {flex-wrap: wrap; font-size: calc(var(--fz-title-xxxxlg) + 0.5rem);}

/* index > news */
.news-wrap {display: flex; gap: var(--spacer28);}
.news-wrap .news-in {display: flex; flex-direction: column; gap: var(--spacer2); width: 100%;}
.news-wrap .news-in .news-tit {display: flex; align-items: center;justify-content: space-between;}
.news-wrap .news-in .news-tit .tit {font-size: var(--fz-title-xxxlg); color: var(--gray-90);}
.news-wrap .news-in .news-tit .more {display: flex; align-items: center; gap: var(--spacer2); color: var(--gray-90); font-weight: 500;}
.news-wrap .news-in .news-tit .more a {font-size: var(--fz-title-sm);}
.news-wrap .news-in .news-tit a:focus {outline-offset: 0.4rem;}
.news-wrap .news-in .news-list {display: flex; flex-direction: column; gap: var(--spacer13); padding-top: var(--spacer8); border-top: 0.1rem solid var(--gray-30);}
.news-wrap .news-in .news-list .d-card {min-height: inherit; padding: 0; border: 0; box-shadow: none;}
.news-wrap .news-in .news-list .d-card .in {padding: 0; min-height: inherit;}
.news-wrap .news-in .news-list .d-card .in a:focus {outline-offset: 0.4rem;}


/* index > tab */
.tab {display: flex; position: relative; align-items: center; padding-bottom: 0.2rem; overflow-x: scroll; width: 100%; margin-bottom: var(--spacer15); overflow-x: scroll;}
/*.tab ~ .conts-area .tab-info .sec-tit-s:first-of-type {margin-top: var(--spacer10);}*/
.tab ~ .conts-area .tab-info .form-wrap:not(:first-of-type) .sec-tit-s {margin-top: 0;}
.tab::-webkit-scrollbar {height: 1.3rem;}
.tab::-webkit-scrollbar-thumb {background-clip: padding-box; border: 0.4rem solid transparent;}
.tab ul {display: flex; align-items: center; position: relative; width: 100%; height: 100%; border-radius: var(--rd-6) var(--rd-6) 0 0;}
.tab ul::after {content:''; display: none; position: absolute; left: 0; top: 100%; width: 100%; height: 0.2rem; background-color: var(--primary-60);}
.tab li {width: 100%; position: relative; border-bottom: 0.1rem solid var(--secondary-7); background-color: var(--secondary-1);}
.tab li a, .tab button {display: flex; align-items: center; justify-content: center; flex-direction: row; gap: var(--spacer2); position: relative; width: 100%; height: 100%; min-width: max-content; min-height: 4.8rem; padding: 0 var(--spacer8); border: 0.1rem solid var(--secondary-7); border-bottom: 0; border-radius: var(--rd-6) var(--rd-6) 0 0; transition: var(--transition-1); font-size: var(--fz-body-md); color: var(--disabled); font-weight: 500; line-height: 1.2;}
.tab li:not(.active) a, .tab li:not(.active) button {border-right: 0;}
.tab li:last-of-type a, .tab li:last-of-type button {border-right: 0.1rem solid var(--table-bd);}
.tab li a::before, .tab button::before {display: none; content: ''; position: absolute; bottom: 0; left: 50%; bottom: -0.2rem; width: 0; height: 0.4rem; background-color: var(--secondary); transition: var(--transition-4);}
.tab li {border-bottom: 0.2rem solid var(--primary-60);}
.tab .active a, .tab button.active {background: var(--white); border: 0.2rem solid var(--primary-60) !important; border-bottom: 0 !important; font-weight: 700; color: var(--primary-60);}
.tab .active::after {content:''; display: block; position: absolute; left: 0; bottom: -0.2rem; width: 100%; height: 0.2rem; background-color: var(--white);}
/*.tab .active a {background-color: var(--primary-60); color: var(--white);}*/

.tab li .service-name {position: relative;}
.tab li .service-cnt {font-weight: 500;}
.tab li .service-name::after {display: none; content: ''; position: absolute; top: 50%; right: -1rem; width: 0.1rem; height: 0.8rem; background-color: var(--secondary-20); transform: translateY(-50%);}


/* 탭 type2 */
.tab.ty02 {margin-bottom: var(--spacer10);}
.tab.ty02 ul::after {height: 0.1rem; background: var(--table-bd);}
.tab.ty02 li {flex: none; min-width: auto;}
.tab.ty02 button {border: 0; font-size: var(--fz-title-md); color: #6d7882; background: none;}
.tab.ty02 .active {color: var(--gray-90);}
.tab.ty02 .active::after {top: calc(100% - 0.3rem); height: 0.4rem; background-color: #1D56BC;}

.tab.line ul {flex-wrap: nowrap; background-color: transparent;}
.tab.line li {flex: 1 1 25%; width: 100%;}
.tab.line a {display: flex; position: relative; color: var(--gray-90);}
.tab.line a:focus {border-radius: 0;}
.tab.line a::before {display: none; content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 0.2rem; transition: 0.4s ease-in-out; background-color: var(--primary-20);}
.tab.line .active a {color: var(--white);}
.tab.line .active a::before {left: 0; bottom: -0.2rem; width: 100%; height: 0.4rem;}
.tab.none li a:hover {cursor: default;}
.tab.none li a:focus {outline: none;}
.tab.dev > div {display: block;}

.tab-cnts > div {display :none; min-height: 40rem;}
.tab-cnts > div.active {display: block;}
.tab-cnts .tit {display: flex; margin-bottom: 3.2rem; font-size: var(--fz-title-lg); font-weight: 500; line-height: 1.5; color: var(--gray-90);}
.tab-cnts td .tit {margin-bottom: 0; font-size: var(--fz-body-md); font-weight: 500; line-height: 1.2; text-align: left;}
.tab-cnts *:not(.tit) + .tit {margin-top: 8rem;}
.tab-info,
.conts-wrap.tab-info {display: none;}
.tab-info:first-of-type {display: flex;}

/* 결과 없음 */
.search-result {padding-top: var(--spacer20); text-align: center;}
.search-result .result {display: flex; align-items: center; justify-content: center; flex-direction: column;}
.search-result .result img {width: fit-content;}
.search-result .sch-result-tit {margin: var(--spacer8) 0 var(--spacer12); font-size: var(--fz-title-xlg); color: var(--gray-90); font-weight: 700;}
.search-result .desc {margin-bottom: var(--spacer10);}
.search-result .desc p {line-height: 1.8; color: var(--gray-80);}
.search-result .desc-box {display: flex; justify-content: center; gap: var(--spacer5) var(--spacer10); padding: var(--spacer12) 0 0; border-top: 0.1rem solid var(--gray-20);}
.search-result .desc-box img {width: fit-content; height: fit-content;}
.search-result .desc-list {display: grid; gap: var(--spacer2); width: auto; padding: 0;}
.search-result .desc-list li {width: fit-content; text-align: left; color: var(--gray-70);}
.search-result .desc-list li::before {top: 0.9rem; left: 0; background-color: var(--gray-70);}


/* index > slide > carousel-01 */
.voucher-swiper-in {width: 100%;}
.voucher-swiper-in .flex {display: flex; gap: var(--spacer6);}
.voucher-swiper-in .box {width: 100%; height: 100%; border-radius: calc(var(--rd-4)*5); background-color: var(--secondary5); min-height: 46.4rem; background-color: var(--gray-5); overflow: hidden;}
.voucher-swiper-in .left {position: relative; max-width: 84.4rem; height: 46.4rem;}

/* index > slide > carousel-02 */
.swiper img {background-image: url(/static/images/kosmes_new/img/bg_thumbnail.svg); background-size: cover; background-position: center center; line-height: 1.2;}
.swiper li {border: 0.1rem solid var(--table-bd); border-radius: var( --rd-12); overflow: hidden;}
.swiper img, .thumbSwiper img {width: 100%; height: 100%; font-size: var(--fz-body-xsm);}
.thumbSwiper img {object-fit: cover;}
.swiper-wrapper {display: flex; position: relative; width: 100%; height: 100%; z-index: 1; transition-property: transform; /*transition-timing-function: var(--swiper-wrapper-transition-timing-function,initial);*/ box-sizing: content-box;}
.swiper-wrapper .swiper-slide {flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform;}
.contents-wrap {display: flex; align-items: flex-start; justify-content: normal; flex-direction: row; gap: var(--spacer6); position: relative;}


/* login-form */
.login-form .desc {display: flex; justify-content: center; margin-bottom: var(--spacer10); text-align: center; color: var(--gray-70); font-size: var(--fz-title-md); font-weight: 500;}
.login-form .conts-wrap {display: flex; justify-content: center; width: 100%; padding: var(--spacer10) var(--spacer8); border-top: 1px solid var(--gray-30); border-bottom: 1px solid var(--table-bd);}
.login-form .align-row input {min-height: 5.6rem;}
.login-form .align-row {align-items: flex-start; flex-wrap: wrap; gap: var(--spacer6) var(--spacer25);}
.login-form .align-row > .align-col {gap: var(--spacer6) 0;}
.login-form .align-col::before {display: none;}
.login-form .align-col:first-of-type::after {content: ''; position: absolute; top: 0; right: -5rem; width: 0.1rem; height: 100%; background-color: var(--table-bd);}
.login-form .login {gap: var(--spacer5);}
.login-form .login .primary {min-height: 5.6rem; font-size: var(--fz-title-md);}
.login-form .login .align-row {justify-content: center; gap: var(--spacer5);}
.login-form .login .align-row li {position: relative;}
.login-form .login .align-row li:not(:last-of-type)::after {content: ''; position: absolute; top: 50%; right: -1.2rem; width: 0.1rem; height: 1.4rem; background-color: var(--table-bd); transform: translateY(-50%);}
.login-form .login-info-wrap {}
.login-form .info-list {gap: var(--spacer3);}
.login-form .info-list li {color: var(--gray-70);}

.chk-area {display: flex; flex-wrap: wrap; grid-column-gap: var(--spacer4); grid-column-gap: var(--spacer6); grid-row-gap: var(--spacer2);}
.chk-area.chk-column {flex-direction: column;}
.fieldset {display: flex; flex-direction: column; gap: var(--spacer6);}


/* join > step */
.step-wrap {display: flex; flex-direction: row; gap: var(--spacer2); margin-bottom: var(--spacer16);}
.step-wrap li {display: flex; align-items: center; justify-content: center; flex: 1; position: relative; min-height: 4.6rem; background-color: var(--table-bg); border: 0.1rem solid var(--table-bd); font-size: var(--fz-body-md); color: var(--disabled); font-weight: 500;}
.step-wrap li:first-of-type {border-radius: var(--rd-10) 0 0 var(--rd-10);}
.step-wrap li:last-of-type {border-radius: 0 var(--rd-10) var(--rd-10) 0;}
.step-wrap li:last-of-type::after {display: none;}
.step-wrap li:not(:first-of-type)::before {content: ''; position: absolute; left: -0.1rem; min-width: 1.7rem; min-height: 4.6rem; background: url(/static/images/kosmes_new/img/step_arrow2.svg) no-repeat; background-size: contain;}
.step-wrap li::after {content: ''; position: absolute; right: -1.72rem; min-width: 1.7rem; min-height: 4.6rem; background: url(/static/images/kosmes_new/img/step_arrow.svg) no-repeat 100%; background-size: cover; z-index: 1;}
.step-wrap li dl {display: flex; gap: var(--spacer5); position: relative;}
.step-wrap li dl::before {display: none; position: absolute; top: 0; left: 0; width: 2rem; height: 2rem; background-color: var(--gray-20); border: 0.1rem solid var(--gray-20); z-index: 1;}
.step-wrap li dl::before, .step-wrap > li > dl::after {display: none; content: ''; border-radius: var(--rd-full);}
.step-wrap li .step {position: relative;}
.step-wrap li .step::after {content: ''; position: absolute; top: 50%; right: -1.2rem; width: 0.4rem; height: 0.1rem; background-color: var(--disabled);}
.step-wrap li .step-tit {white-space: nowrap;}

.step-wrap .done {background-color: var(--secondary-20); color: var(--white);}
.step-wrap .done::before {background: url(/static/images/kosmes_new/img/step_arrow_done2.svg) no-repeat;}
.step-wrap .done::after {background: url(/static/images/kosmes_new/img/step_arrow_done.svg) no-repeat;}
.step-wrap .done .step::after {background-color: var(--white);}
.step-wrap .active {background-color: var(--primary-70); border: 0; color: var(--white);}
.step-wrap .active::after {right: -1.65rem; border-color: var(--primary-70); background: url(/static/images/kosmes_new/img/step_arrow_active.svg) no-repeat;}
.step-wrap .active::before {background: url(/static/images/kosmes_new/img/step_arrow2.svg) no-repeat;}
.step-wrap .active::before {/*display: none; content: ''; position: absolute; top: -0.8rem; left: -0.8rem; width: 3.6rem; height: 3.6rem; border-radius: 5rem; border: 0.8rem solid var(--primary-50); animation: noti 1.5s ease-out 0.4s infinite running; z-index: 1;*/}
.step-wrap .active dl::before {background-color: var(--white); border-color: var(--primary);}
.step-wrap .active dl::after {position: absolute; top: 0.4rem; left: 0.4rem; width: 1.2rem; height: 1.2rem; background: var(--primary) url(/static/images/kosmes_new/img/ico_step_active.svg) no-repeat center; background-size: contain; z-index: 1;}
.step-wrap .active .step::after {background-color: var(--white);}

.step-cover {padding: var(--spacer10) var(--spacer15);border-radius: var(--rd-12);background-color: var(--table-bg);}

.step-sm-li {display: flex; gap: var(--spacer4);}
.step-sm-li > li {flex: 1; display: flex; flex-direction: column; position: relative;}
.step-sm-li > li ~ li::before {content:'';display: block; position: absolute; right: 100%; top: 62%; width: var(--spacer4); height: 2rem; background:url(/static/images/kosmes_new/img/ico_step_arr.svg) no-repeat center; transform: translateY(-50%);}
.step-sm-li span {display: block; margin-bottom: var(--spacer1); font-size: 1.2rem; font-size:600; text-align:center; color: #708297;}
.step-sm-li p {flex:1;display: flex; align-items: center; justify-content: center; padding: var(--spacer3);border-radius: var(--rd-4); font-size: var(--fz-body-sm); font-weight: 500; line-height:1.24; text-align:center; color: #464C53;background-color: var(--white);}
.step-lg-li {display: flex; gap: var(--spacer7);}
.step-lg-li > li {flex:1;display: flex; align-items: center; justify-content: center; flex-wrap: wrap; position: relative; min-height:100px; padding: 0 var(--spacer2);border-radius: var(--rd-8);background: var(--white);}
.step-lg-li > li ~ li::before {content:'';display: block; position: absolute;right:100%; top:50%; width: var(--spacer7); height:2rem;background:url(/static/images/kosmes_new/img/ico_svc_arr.svg) no-repeat center; transform: translateY(-50%);}
.step-lg-li div {text-align:center;}
.step-lg-li button {display: block; margin:0 auto var(--spacer1); font-size: var(--fz-title-md); line-height:1.5; font-weight: 700; color: #256EF4; text-decoration:underline; text-underline-position:under; text-decoration-thickness:0.2rem;}
.step-lg-li button:hover {background:none;}
.step-lg-li p {font-size: var(--fz-body-sm); font-weight: 700; color: var(--gray-80);}
.step-xlg-li {display: flex;gap: var(--spacer15);}
.step-xlg-li > li {flex:0 1 auto;display: flex; justify-content: center; flex-wrap: wrap; position: relative; width:100%;}
.step-xlg-li > li ~ li::before {content:'';display: block; position: absolute; right:100%; top:0; width: var(--spacer15); height:20px; margin-top: var(--spacer6);background:url(/static/images/kosmes_new/img/ico_svc-pgr_arr.svg) no-repeat center;}
.step-xlg-li > li > div {width:100%;}
.step-xlg-li button {justify-content: center; width:100%; padding: var(--spacer6) var(--spacer2) !important;border-radius: var(--rd-8);background: var(--white); font-size: var(--fz-title-md); font-weight: 700; text-align:center; text-decoration:underline; text-underline-position:under; text-decoration-thickness:0.2rem; color: #3B547A;}
.step-xlg-li button.ready {background-color: #DFEFFF;}
.step-xlg-li button.ing {background-color: #E4DFFF;}
.step-xlg-li button.end {background-color: #E4EBF6;}
.step-xlg-li p {margin-top: var(--spacer3); font-weight: 500; text-align:center; color: var(--gray-80);}


/* join - step01 */
.sec-tit .step-now {display: flex; align-items: center; gap: var(--spacer7); margin-bottom: var(--spacer5); font-size: var(--fz-title-xxxxlg); color: var(--gray-90); font-weight: 700;}
.sec-tit .step-now strong {display: inline-flex; justify-content: center; align-items: center; position: relative; min-width: 6.7rem; min-height: 3.6rem; background-color: var(--primary-70); border-radius: var(--rd-6); font-size: var(--fz-title-lg); color: var(--white); font-weight: 500;}
.sec-tit .step-now strong::after {content: ''; position: absolute; top: 50%; right: -2rem; width: 0.8rem; height: 0.2rem; background-color: var(--primary-70); transform: translateY(-50%);}

.conts-area {display: flex; flex-direction: column; gap: var(--spacer10); width: 100%;}
.conts-wrap {display: flex; flex-direction: column; width: 100%; color: var(--gray-70);}
.conts-wrap > * {width: 100%;}
.conts-wrap .box {padding: var(--spacer10) 0;}

.description {display: flex; align-items: flex-start; gap: var(--spacer3) var(--spacer8); min-height: 8rem; margin-bottom: var(--spacer12); padding: var(--spacer8) var(--spacer10); border: 0.4rem solid var(--gray-10); border-radius: var(--rd-8); color: var(--gray-90); font-size: var(--fz-body-lg); line-height: 1.7;}
.description .ico-info {margin-top: 0.2rem;}
.description .ico-info2::before {top: 0.2rem;}
.description.login {justify-content: center; margin-bottom: var(--spacer5); border: 0; text-align: center;}
.description.login * {line-height: 1.8; color: var(--gray-70);}
.description.bg {margin: 0; background-color: var(--table-bg); border: 0;}
.description.bg + .description {margin-top: 2rem;}
.description.bg strong .c-blue {font-weight: 500;}
.description.white {display: flex; align-items: center; flex-wrap: wrap; min-height: 9.8rem; padding: var(--spacer5) var(--spacer10); background-color: var(--white); border: 0.3rem solid var(--gray-10); border-radius: var(--rd-12); font-size: var(--fz-body-md);}
.description * {font-size: var(--fz-body-md) !important;}
.description .desc-list {}
.description .desc-list li::before {background-color: var(--disabled);}
.description .tit {font-size: var(--fz-title-xlg); color: var(--gray-90);}
.description .more {display: flex; align-items: center; gap: var(--spacer2); color: var(--primary-50);}
.description .more a {font-size: var(--fz-title-sm);}
.description .align-row {align-items: flex-start;}
.description > .align-row {gap: var(--spacer3) var(--spacer20); align-items: flex-start; flex-wrap: wrap; font-size: var(--fz-body-md);}
.description .align-row .tit {position: relative; min-width: 16rem; padding-left: var(--spacer2); font-size: var(--fz-body-md); color: var(--disabled); font-weight: 500;}
.description .align-row .tit::before {content: ''; position: absolute; top: 1rem; left: 0; width: 0.3rem; height: 0.3rem; background-color: var(--disabled); border-radius: var(--rd-6);}
.description .align-row .info {display: flex; flex-wrap: wrap; gap: var(--spacer1) var(--spacer8); word-break: break-all;}
.description .align-row .info dl {display: flex; align-items: center; gap: var(--spacer1) var(--spacer4);}
.description .align-row .info dl dt {position: relative;}
.description .align-row .info dl dt::after {content: ':'; position: absolute; top: -0.1rem; right: -1rem;}
.description .align-row li {flex: 1 1 45%; align-items: flex-start; margin-bottom: 0;}


.ico-info {position: relative; padding-left: var(--spacer7); font-size: var(--fz-body-md); font-weight: 500;}
.ico-info2 {position: relative; min-width: fit-content; padding-left: var(--spacer5); font-size: var(--fz-body-sm); line-height: 1.4; font-weight: 500; color: var(--gray-70);}
.ico-info::before {content: ''; position: absolute; top: 0.2rem; left: 0; width: 1.9rem; height: 2.1rem; background: url(/static/images/kosmes_new/img/ico_info.svg) no-repeat; background-size: contain;}
.ico-info2::before {content: ''; position: absolute; top: 0.2rem; left: 0; width: 1.4rem; height: 1.4rem; background: url(/static/images/kosmes_new/img/ico_info2.svg) no-repeat; background-size: contain;}


.desc-list {}
.desc-list .none2,
.desc-list ~ .img-wrap + .desc-list .tit {margin-top: var(--spacer8);}
.desc-list {display: flex; flex-direction: column; gap: 0.6rem;}
.desc-list li {position: relative;  min-height: 2.5rem; padding-top: 0 !important; padding-left: var(--spacer4); text-align: left; line-height: 1.6;}
ol.desc-list li {padding-left: 0; font-weight: 500 !important; color: var(--gray-90) !important;}
ol.desc-list li::before {display: none;}
.desc-list li .c-blue:last-of-type {margin: 0;}
.desc-list li::before {content: ''; position: absolute; top: 1rem; left: 0.3rem; width: 0.4rem; height: 0.4rem; border-radius: var(--rd-6); background-color: var(--primary-50);}
.desc-list * {color: var(--gray-90);}
.desc-list strong {font-weight: 700;}
.desc-list li:last-of-type {margin-left: 0; margin-bottom: 0;}
.desc-list li.none {padding-left: 0;}
.desc-list li.none::before {display: none;}
.desc-list li.indent {padding-left: var(--spacer6);}
.desc-list li.indent::before {display: none;}
.desc-list li.indent strong {color: var(--primary-50);}
.desc-list li.indent strong::before {content: '*'; position: absolute; top: 0.35rem; left: var(--spacer3);}
.desc-list li.important {padding-left: var(--spacer4);}
.desc-list li.important strong {font-weight: 300;}
.desc-list li.important::before {content: '※'; position: absolute; top: -0.7rem; left: 0; width: 0; height: 0; font-size: var(--fz-title-xlg); font-weight: 300;}
.desc-list a {display: inline-flex;}
.desc-list b {font-weight: 500; line-height: 1.5; color: var(--gray-90);}
.desc-list li p {display: block; font-weight: 500;}
.desc-list li dl {display: flex; flex-wrap: wrap;}
.desc-list li dl dt {position: relative; min-width: fit-content; padding-right: 1.2rem;}
.desc-list li dl dt::after {content: ':'; position: absolute; top: -0.1rem; right: 0.5rem;}
.desc-list li dl dd {}
.desc-list li dl dd a {text-decoration: underline; word-break: break-all;}
.desc-list li.none.indent {padding-left: var(--spacer3);}
.desc-list.lg li {font-weight: 500; line-height: 1.5; color: var(--gray-90);}
.desc-list.lg li::before {top: 1rem;}
.desc-list.primary li::before {background-color: var(--primary-50);}

/* li-bullet */
.li-bullet > li {position: relative; margin-top: var(--spacer1); padding-left: var(--spacer3); font-weight: 500;}
.li-bullet > li:first-child {margin-top:0;}
.li-bullet > li::before {content:''; display: block; position: absolute; top: 1rem; left:0; width: 4px; height: 4px; border-radius: 50%; background-color: var(--primary-50);}
.li-bullet a {display: inline-block;}
.li-bullet a[href^="tel"] {font-weight: 500;}
.li-bullet a[target="_blank"] {color: #246BEB; text-decoration:underline; text-underline-position: under;}
.li-bullet.ty02 > li {font-weight: 500;}
.li-bullet.ty02 > li::before {background-color: #555;}


/* join - step02 */
.conts-wrap .agreement-scroll {width: 100%;}
.conts-wrap .agreement-scroll strong {}
.conts-wrap .agreement-scroll .scroll {max-height: 17rem; padding-right: var(--spacer7); overflow-y: scroll; font-size: var(--fz-body-md);}
.conts-wrap .agree-check {display: flex; flex-direction: column; justify-content: space-between; gap: var(--spacer5); padding-top: var(--spacer8);}
.conts-wrap .agree-check .align-row {width: auto; gap: var(--spacer8);}

/* join - step03 */
.business-num {display: flex; justify-content: center; align-items: center; margin-bottom: var(--spacer25);}
.business-num .align-row {max-width: 70rem;}
.business-num .align-row label {min-width: fit-content; margin-right: var(--spacer6); color: var(--gray-90);}
.business-num ~ .align-col {gap: 0;}
.business-num ~ .align-col::before {display: none;}
.business-num ~ .align-col .align-row:not(:first-of-type) {padding-top: var(--spacer6); margin-top: var(--spacer6); border-top: 0.1rem solid var(--table-bd);}
.business-num ~ .align-col .align-row:not(:first-of-type) .align-row {flex-wrap: wrap; gap: var(--spacer2)var(--spacer12);}
.business-num ~ .align-col .align-row:not(:first-of-type) .align-row p {position: relative;}
.business-num ~ .align-col .align-row:not(:first-of-type) .align-row p::before {content: ''; position: absolute; top: 50%; left: -2.4rem; width: 0.1rem; height: 3.6rem; background-color: var(--table-bd); transform: translateY(-50%);}

/* join - step04 */
.sec-tit.align-c {display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacer1);}
.sec-tit.align-c sub {line-height: 1.2;}
.sec-tit-wrap {display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacer5); padding-bottom: var(--spacer3);}
.sec-tit-wrap .lt,
.sec-tit-wrap .rt {display: flex; align-items: center; gap: var(--spacer3);}
.sec-tit-wrap .rt {justify-content:flex-end; margin-left:auto;}
.sec-tit-wrap .sec-tit {margin-bottom:0;}
.sec-tit-block {margin-bottom: var(--spacer5); padding: var(--spacer3) var(--spacer6); border-radius: var(--rd-8);background-color: var(--secondary-5); font-size: var(--fz-title-md); color: var(--gray-90);}

.sec-tit {display: flex; align-items: center; grid-row-gap: var(--spacer3); margin-bottom: var(--spacer6); font-size: var(--fz-title-xxlg); color: var(--gray-90);}
.sec-tit-s {display: flex; align-items: center; gap: var(--spacer1); min-height: 3.2rem; margin: var(--spacer10) 0 var(--spacer3); font-size: calc(var(--fz-title-xlg) + 0.3rem); color: var(--gray-90); line-height: 1.3;}
.sec-tit-s ~ .desc-list li {margin-bottom: var(--spacer4);}
.sec-tit-s ~ .desc-list li:last-of-type {margin-bottom: 0;}
.sec-tit-s + .file-form .file-container {gap: var(--spacer3) var(--spacer7) !important;}
.sec-tit-s .table-comment {flex: 1; margin: 0;}
.sec-tit-s span + .btn {margin-left: 1.6rem;}
.sec-tit-s .c-info {font-size: var(--fz-title-sm);}
.sec-tit-s.full {justify-content: space-between;}
.sec-tit-s.full .btn-wrap {display: flex; align-items: center; gap: var(--spacer2);}
.sec-tit-s.full .btn-wrap .btn {min-width: fit-content;}
.sec-tit-s.full .btn-wrap .ico-del {min-width: 4rem; min-height: 4rem; gap: 0; text-indent: -9999px;}
.sec-tit-s.full .btn-wrap .ico-del::after {width: 1.7rem !important; height: 1.7rem !important; background-size: contain;}
.sec-tit-s ~ .desc-list .desc-list {padding: 0 var(--spacer4);}
.sec-tit-s:first-of-type {margin-top: 0;}
.sec-tit-s > span:not(.btn-wrap) {display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacer1) var(--spacer2); position: relative;}
.sec-tit-s > span:not(.btn-wrap)::before {display: none; content: ''; position: absolute; top: 0.7rem; left: 0; width: 0.4rem; height: 1.7rem; background-color: var(--primary-50);}
.sec-tit-s .c-red {position: absolute; top: 0.3rem; right: -1.7rem;}
.sec-tit-s .right {font-size: var(--fz-body-sm); color: var(--red); text-align: right; line-height: 1.3;}
.sec-tit-xs {display: flex; align-items: center; min-height: 6.2rem; padding: var(--spacer2) var(--spacer6); background-color: var(--secondary-5); border-radius: var(--rd-8); font-size: var(--fz-title-md); color: var(--gray-90); font-weight: 700; line-height: 1.2;}
.sec-tit-xs ~ .desc-list {padding: var(--spacer5) !important; font-size: var(--fz-body-md);}
.sec-tit-xs ~ .table:not(:last-of-type) {margin-bottom: var(--spacer15);}

/* join - step05 */
.join-complete {display: flex; justify-content: center; margin-bottom: var(--spacer14);}
.join-complete .complete-wrap {display: flex; flex-direction: column; align-items: center; gap: var(--spacer7);}
.join-complete .complete-wrap .check-img {display: flex; justify-content: center; align-items: center; width: 8rem; height: 8rem; border-radius: 8rem; background-color: #EDF3FD;}
.join-complete .complete-wrap .info-wrap {display: flex; flex-direction: column; align-items: center; text-align: center;}
.join-complete .complete-wrap .info-wrap .info {font-size: var(--fz-title-xxlg);}
.join-complete .complete-wrap .info-wrap .info span {color: var(--gray-90);}
.join-complete .complete-wrap .info-wrap .info .user-id {color: var(--primary-50); font-weight: 500;}
.join-complete .complete-wrap .etc {color: var(--gray-80);}
.join-complete .complete-wrap .etc strong {color: var(--gray-90); font-weight: 500;}


.input-box {display: flex; flex-direction: column; align-items: normal; justify-content: flex-start; position: relative; width: 100%; padding: var(--spacer12); border: 0.1rem solid var(--input-bd); border-radius: var(--rd-8); color: var(--gray-90);}
.grid {}
.grid .table {position: relative;}
.grid .component:not(:last-of-type) .table::after {content: ''; position: absolute; top: 50%; right: -4rem; width: 1.9rem; height: 3.5rem; background: url(/static/images/kosmes_new/img/ico_arr_next_lg.svg) no-repeat; background-size: contain; transform: translateY(-50%);}
.grid .table thead ~ tbody tr td {vertical-align: middle !important;}
.grid .table thead ~ tbody tr td .desc-list {margin-bottom: 0;}
.grid .table tbody th + td {padding: var(--spacer6) var(--spacer8);}
.grid .table .desc-list li {color: #555;}
.grid .table .desc-list li::before {width: 0.3rem; height: 0.3rem; background-color: #555;}
.grid .desc-list li {font-weight: 400;}
.grid .desc-list li::before {width: 0.6rem; height: 0.2rem; background-color: var(--gray-90);}
.grid > .align-row {display: grid; align-items: flex-start; grid-template-columns: repeat(auto-fill, minmax(46%, 1fr)); gap: var(--spacer15);}
.input-box .component {display: flex; flex-direction: column; width: 100%;}
.input-box .sec-tit-s {font-size: var(--fz-title-lg);}
.input-box.line {border-left: 0; border-right: 0; border-radius: 0; border-color: var(--table-bd); padding: var(--spacer10) 0;}
.input-box.line > .align-col {max-width: 80%;}
.input-box.bg {border: 0; padding: var(--spacer8); background-color: var(--secondary-5);}
.input-box.checked {outline: 0.2rem solid var(--primary-50); border-color: transparent; transition: var(--transition-1);}
.input-box:last-of-type {margin-bottom: 0;}
.input-box .num-cnt {display: flex; align-items: center; position: absolute; top: var(--spacer4); right: var(--spacer2); font-style: normal; font-size: var(--fz-title-md); z-index: 1;}
.input-box .num-cnt .form-check {height: 2.2rem; margin-left: var(--spacer2);}
.input-box .num-cnt span {display: flex; justify-content: center; min-width: 2rem;}
.input-box .num-cnt .sub-cnt {position: relative; color: var(--primary-50); font-weight: 500;}
.input-box .num-cnt .sub-cnt::before {content: '추가정보'; position: absolute; top: 50%; left: -6rem; width: max-content; font-size: var(--fz-body-sm); color: var(--gray-90); transform: translateY(-50%);}
.input-box .num-cnt .all-cnt {position: relative;}
.input-box .num-cnt .all-cnt::before {content: '/'; position: absolute; top: 50%; left: -0.2rem; font-size: var(--fz-body-sm); transform: translateY(-50%);}
.m-pdt {padding-top: var(--spacer7) !important;}

.input-box .desc-list {gap: var(--spacer2);}
.input-box .desc-list li {font-size: var(--fz-body-md); color: var(--gray-90);}
.input-box .flx {padding: 0; border: 0;}
.input-box .flx .tit {width: 100%; max-width: none;}
.input-box .flx > ul > li {flex-direction: column;}

.input-box .align-col:nth-of-type(2n)::before {display: none;}
.input-box > .align-col {gap: var(--spacer8);}
.input-box .align-row {align-items: flex-start;}
.input-box .align-row .desc {padding-left: var(--spacer8); color: var(--gray-70);}
.input-box .align-row .desc.ico-info2 {padding-left: var(--spacer5);}
.input-box ~ .agree-check {flex-wrap: wrap; flex-direction: row; gap: var(--spacer3); padding: var(--spacer5) var(--spacer3); border-bottom: 0.1rem solid var(--table-bd); color: var(--gray-90);}
.input-box ~ .agree-check strong {width: 100%; font-size: var(--fz-body-sm);}

.iptBox {display: flex; align-items: center; gap: 1rem;}
.iptBox span.align-row {flex: 1;}
.iptBox span.ipt {flex: 1; padding-right: 4rem; text-align: right;}

.form-wrap.input-box-bd {margin-bottom: var(--spacer2);}
.input-box-bd {display: flex; align-items: normal; justify-content: flex-start; flex-direction: column; position: relative; width: 100%; border: 0.1rem solid var(--table-bd); margin-bottom: var(--spacer2); border-radius: var(--rd-6); color: var(--gray-90);}
.input-box-bd.mb80 {margin-bottom: var(--spacer20);}
.input-box-bd:last-of-type {margin-bottom: var(--spacer20);}
.input-box-bd .sec-tit-s {justify-content: space-between; padding: var(--spacer4) var(--spacer7); margin-bottom: 0; font-size: var(--fz-title-lg); font-weight: 700;}
.input-box-bd .sec-tit-s:focus {outline-color: var(--primary-50);}
.input-box-bd .sec-tit-s::after {content: ''; display: block; margin-left: var(--spacer2); width: 1.4rem; height: 0.8rem; background: url(/static/images/kosmes_new/img/ico_arr_bottom.svg) no-repeat 94%;}
.input-box-bd .sec-tit-s.active {margin-bottom: var(--spacer2);}
.input-box-bd .sec-tit-s.active::after {transform: rotate(-180deg);}
.input-box-bd .description {display: none; padding: 0 var(--spacer6) var(--spacer8); margin-bottom: 0; border: 0;}
.input-box-bd .description > .align-row {display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--spacer20); padding: var(--spacer4) 0 var(--spacer7);}
.input-box-bd .table-comment {padding: 0; margin: 0;}
.input-box-bd .md {max-width: 46%}
.input-box-bd .description ul li {position: relative; padding-top: var(--spacer4);}
.input-box-bd .description ul li:nth-child(-n+2) {padding-top: 0; margin: 0;}
.input-box-bd .description ul li:nth-child(2n)::before {position: absolute; top: 0; left: -4rem; content: ''; width: 1px; height: 100%; border-left: 0.1rem dashed var(--table-bd);}
.input-box-bd .description .table ul li {padding-top: 0 !important;}
.input-box-bd .description .table ul li:nth-child(2n)::before {display: none;}
.input-box-bd .description .table-comment li {margin: 0; padding-top: 0;}
.description ~ .input-box-bd .description ul li:nth-child(2n)::before {content: ''; position: absolute; display: block !important; top: 1rem; left: 0.3rem; width: 0.4rem; height: 0.4rem; border-radius: var(--rd-6);}


.possible, .impossible {display: flex; align-items: center; justify-content: center; min-height: 10rem; padding-left: var(--spacer5); font-size: var(--fz-title-xlg); background-color: var(--table-bg);}
.possible div, .impossible div {position: relative; font-size: var(--fz-title-lg); font-weight: 500; line-height: 1.5; color: var(--gray-90);}
.possible div::before, .impossible div::before {content: ''; position: absolute; top: 50%; left: -5rem; width: 3.5rem; height: 3.5rem; transform: translateY(-50%);}
.possible div, .impossible div {display: flex; align-items: baseline;}
.possible span, .impossible span {/* font-size: var(--fz-title-xxxlg); */ font-weight: 500;}
/* .possible {background-color: var(--primary-1);} */
.possible div::before {background: url(/static/images/kosmes_new/img/ico_possible_2.png) no-repeat 100%; background-size: contain;}
/* .impossible {background-color: var(--red-bg);} */
.impossible div::before {background: url(/static/images/kosmes_new/img/ico_impossible_2.png) no-repeat 100%; background-size: contain;}
.impossible span {margin: 0 var(--spacer2);}

.residentNum-wrap {display: grid; gap: var(--spacer2); padding: var(--spacer8) var(--spacer6); border-bottom: 0.1rem solid var(--table-bd);}
.residentNum-wrap .tit {margin-bottom: var(--spacer5);}
.residentNum-wrap .btn-wrap {display: flex; gap: var(--spacer2);}
.residentNum-wrap .btn-wrap .btn {gap: 0; min-width: 4rem; }
.residentNum-wrap .btn-wrap .white {min-width: 10rem;}
.residentNum-wrap .align-col {}
.residentNum-wrap .align-row {width: auto;}
.residentNum-wrap .align-row label {min-width: 12rem;}


.sub-tit {display: flex; align-items: center; height: 5rem; padding: 0 var(--spacer7); border-radius: var(--rd-8); background-color: var(--primary-5); color: var(--primary-80); font-weight: 500;}

.img-wrap {display: flex; justify-content: center; padding: var(--spacer10); border: 0.1rem solid var(--gray-20); margin-bottom: var(--spacer20);}
.img-wrap + .sec-tit {margin-top: var(--spacer20);}
.img-wrap:last-of-type {margin-bottom: 0;}


.info-list {display: grid; grid-row-gap: var(--spacer5); margin-top: var(--spacer10);}
.info-list .btn-wrap {display: flex; gap: var(--spacer3); margin-top: var(--spacer2);}
.info-list .btn-wrap::before {display: none;}
.info-list:first-of-type {margin-top: 0;}
.info-list:last-of-type {margin: 0;}
.info-list li {position: relative; padding-left: var(--spacer3); color: var(--gray-90); line-height: 1.8;}
.info-list li a {display: inline-flex; height: auto;}
.info-list li::before {content: ''; position: absolute; top: 1.2rem; left: 0; width: 0.2rem; height: 0.2rem; background-color: var(--primary-50); border-radius: var(--rd-12);}
.info-list p {color: var(--gray-90);}
.info-list strong span[class] {font-weight: 700;}
.info-list strong {color: var(--gray-90);}
.info-list strong + p {margin: 1rem 0 1.4rem 0;}
.info-list.decimal li::before {background-color: var(--gray-90);}
.info-list.txt strong {line-height: 1.9;}
.info-list.txt + .table {margin-top: var(--spacer2);}
.info-list.result {padding: var(--spacer10) !important; background-color: var(--table-bg); text-align: center;}
.info-list.result strong {font-size: var(--fz-title-md); font-weight: 700;}
.info-list.result .none:last-of-type {margin-top: var(--spacer6);}
.info-list.result .table thead th {background: #E2E9F0;}
.info-list .c-blue {font-weight: 300; line-height: 1.2;}
.info-list li.done {padding-left: 0;}
.info-list li.done::before {content: none;}


.info-list + .img-wrap {margin-bottom: 0;}
.info-list + .sec-tit {margin-top: var(--spacer20);}
.info-list + .file-form {padding-top: 0;}
.info-list .none {padding-left: 0;}
.info-list .none.pd::first-letter {font-size: var(--fz-body-xsm);}
.info-list .pd {padding-left: var(--spacer4);}
.info-list .pd .table {margin-bottom: 0;}
.info-list .pd .table ~ .table-comment {margin-bottom: var(--spacer6);}
.info-list .none::before {display: none;}
.info-list .info-list {margin-top: 0; margin-bottom: var(--spacer20);}
.info-list.txt ~ .info-list:last-child {margin-top: 0; margin-bottom: 0;}
.info-list dl {display: flex;}
.info-list .tit {position: relative; width: fit-content; min-width: max-content; margin: 0; padding-left: 0; padding-right: var(--spacer4); font-weight: 500; color: var(--gray-90);}
.info-list .tit::after {content: ':'; position: absolute; top: -0.1rem; right: 0.6rem;}
.info-list .tit.none::after {display: none;}
.info-list .tit.none2 {padding-left: var(--spacer3);}
.info-list .tit.none2::after {display: none;}
.info-list .info {display: flex; flex-wrap: wrap; gap: var(--spacer1); color: var(--gray-70);}
.info-list .list2 {display: grid; grid-row-gap: var(--spacer2); width: calc(100% - var(--spacer3)); margin-left: var(--spacer3); padding: var(--spacer4) var(--spacer5); background-color: var(--primary-5);}
.info-list .list2 li {position: relative; padding-left: var(--spacer3);}
.info-list .list2 li::before {content: ''; position: absolute; top: 1.5rem; left: 0; width: 0.5rem; height: 0.1rem; background-color: var(--gray-60);}
.info-li {display: flex; gap: var(--spacer1) var(--spacer10); flex-wrap: wrap; padding: var(--spacer3) 0; border-top: 0.1rem solid #A3B8CC; color: var(--gray-90);}
.info-li > li {display: flex; gap: var(--spacer2); flex:0 0 auto;}
.info-li > li span {word-break: break-all;}
.info-li strong {font-weight: 700;}

.box-indent {padding-left: var(--spacer6);}
.b-state {display:inline-block; width:6.5rem; padding: 0 var(--spacer2); line-height:2.4rem;border-radius: var(--rd-4); font-size: var(--fz-body-sm); text-align:center; color: #6d7882;background-color: #ebebeb;}
.b-state.blue {background-color: #E6F0FD; color: #2459A2;}

/* tag-li */
.tag-li {display: flex;gap: var(--spacer2) 1rem; flex-wrap: wrap; margin-bottom: var(--spacer10);}
.btn-tag {padding: var(--spacer2) var(--spacer3);border-radius: var(--rd-4);background:#f2f5f8; font-size: var(--fz-body-sm); font-weight: 500; color: #1E2124;}

/* 텍스트 */
.txt-li {color: var(--gray-70);}
.txt-li li {margin-top: var(--spacer1); line-height: 1.8;}
.txt-li li:first-child {margin-top:0;}
.txt-li.blk {color: var(--gray-90);}
.txt-li.mt02 {margin-top: var(--spacer3)}
.txt-sm-li {margin-top: var(--spacer3);}
.txt-sm-li:first-child {margin-top:0;}
.txt-sm-li > li {font-size: var(--fz-body-sm); margin-top: var(--spacer1);}
.txt-sm-li > li:first-child {margin-top:0;}
.txt-sm-li > li.flex {display: flex; align-items: center; gap: var(--spacer3);}
.txt-sm-li .ico-info2 {font-weight: 700;}
.txt-sm-li .ico-info2 strong {font-weight: 700;}

/* sep-li : separator_list */
.sep-li {display: flex;}
.sep-li li + li {position: relative; margin-left: var(--spacer3); padding-left: var(--spacer3);}
.sep-li li + li::after {content:'';display: block; position: absolute; left:0; top:50%; margin-top:-0.8rem; width:0.1rem; height:1.6rem;background-color: #d6e0eb;}

/* total-li */
.total-li {display: flex; align-items: center; gap: var(--spacer1);}
.total-li span {font-weight: 500; color: #6D7882;}
.total-li .total {font-weight: 500; color: #1E2124;}
.total-li .total strong {font-weight: 700;}

/* legend-li */
.legend-li li {display: flex; gap: var(--spacer2); margin-top: var(--spacer1); font-size: var(--fz-body-sm);}
.legend-li li:first-child {margin-top:0;}
.legend-li li::before {content:''; align-self:center;display: block; width:8px; height:8px;background-color: #999;}
.legend-li li.red::before {background-color: #D65C66;}
.legend-li li.skyblue::before {background-color: #AFCFF0;}
.legend-li li.blue::before {background-color: #4F8EFF;}
.legend-li span {font-size: var(--fz-body-sm); color: #464C53;}
.legend-li em {margin-left:auto; font-weight: 700; color: var(--gray-90);}

/* lbl-prd-li */
.lbl-prd-li {display: flex; gap: var(--spacer5); padding: var(--spacer5) var(--spacer8);border-radius: var(--rd-8);background-color: #EDF1F5;}
.lbl-prd-li > .name {flex-shrink:0; font-size: var(--fz-body-sm); font-weight: 700;}
.lbl-prd-li .prd-li {display: flex;gap: var(--spacer2); flex-wrap: wrap;}
.lbl-prd-li .prd-li > li {display: flex; justify-content: center; align-items: center; min-height: 3rem; padding: 0 var(--spacer5); border-radius: var(--rd-4); font-size: var(--fz-body-sm); background-color: var(--white);}
.lbl-ipt {display: flex; align-items: center; gap: var(--spacer2);}
.lbl-ipt label {flex-shrink:0; font-weight: 500; color: #6D7882;}


.page-btn-wrap {display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacer6); margin: var(--spacer17) 0 var(--spacer10);}
.page-btn-wrap:last-child {margin-bottom: 0;}
.page-btn-wrap .btn-wrap {display: flex; justify-content: center; flex-wrap: wrap; gap: var(--spacer3); width: 100%; position: relative;}
.page-btn-wrap.both {justify-content: space-between;}
.btn-wrap.left {display: flex; flex-wrap: wrap; gap: var(--spacer2) var(--spacer4); margin-bottom: var(--spacer8);}
.btn-wrap.right {display: flex; justify-content: flex-end; gap: var(--spacer2); margin-bottom: var(--spacer5);}
.btn-wrap.center {display: flex; justify-content: center; gap: var(--spacer2); margin-bottom: 0;}


/* 메뉴판 > 상세 @fix.250929 */
.menu-info-wrap {}
.menu-info-wrap .menu-slide-wrap {display: grid; grid-template-columns: 33rem 1fr; gap: var(--spacer5) var(--spacer17); margin-bottom: var(--spacer15);}
.menu-info-wrap .left-info {display: flex; flex-direction: column; gap: var(--spacer3);}
.menu-info-wrap .left-info .menuInfoSwiper {min-height: 25rem; max-height: 25rem;}
.menu-info-wrap .left-info .menuInfoSwiper .swiper-wrapper {padding: 0; background-size: cover; overflow: hidden;}
.menu-info-wrap .left-info .menuInfoSwiper .swiper-wrapper .swiper-slide {width: 100% !important; transition: var(--transition-2);}
.menu-info-wrap .left-info .thumbSwiper ul {display: flex; gap: var(--spacer2);}
.menu-info-wrap .left-info .thumbSwiper li {width: 4.8rem !important; height: 4.8rem; border-radius: var(--rd-6); }
.menu-info-wrap .left-info .thumbSwiper li a {width: 100%; height: 100%; background-size: cover; overflow: hidden;}
.menu-info-wrap .left-info .thumbSwiper li a:focus {outline-offset: 0.4rem;}

.menu-info-wrap .right-info .eyebrow {display: flex; gap: var(--spacer1); flex-wrap: wrap;}
.menu-info-wrap .right-info .c-tag-list span,
.menu-info-wrap .right-info .c-tag {display: flex; align-items: center; min-height: 2.8rem; flex-shrink:0; padding: 0 var(--spacer2); border-radius: var(--rd-4); line-height: 1.4; font-size: var(--fz-body-md);}
.menu-info-wrap .right-info .eyebrow .c-tag {color: #E60020; background-color: #FDF2F4;}
.menu-info-wrap .right-info .eyebrow .c-tag-list {display: flex; flex-wrap: wrap; gap: var(--spacer1);}
.menu-info-wrap .right-info .eyebrow .c-tag-list span {border: 0.1rem solid var(--table-bd); color: var(--gray-70);}
.menu-info-wrap .right-info .d-card {padding: 0; border-radius: 0; border: 0;}
.menu-info-wrap .right-info .d-card .in {width: 100%;}
.menu-info-wrap .right-info .d-card .in .text {display: flex; flex-direction: column; justify-content: space-between; gap: var(--spacer4); height: 100%;}
.menu-info-wrap .right-info .d-card .in .text .page-btn-wrap {margin-top: 0;}
.menu-info-wrap .right-info .d-card .in .tit-box {display: flex; flex-direction: column; gap: var(--spacer5); height: 100%; padding-bottom: var(--spacer5); border-bottom: 0.1rem solid var(--gray-30);}
.menu-info-wrap .right-info .d-card .in .tit-box .c-tit {font-size: var(--fz-heading-sm); font-weight: 700; line-height: 1.5;}
.menu-info-wrap .c-summary {padding-top: var(--spacer15);}
.menu-info-wrap .c-summary > .item {display: flex; gap: var(--spacer2); align-items: center;}
.menu-info-wrap .c-summary > .item + .item {margin-top: var(--spacer1);}
.menu-info-wrap .c-summary .name {display: block; width:80px; color: var(--disabled);}
.menu-info-wrap .c-summary .summary {flex: 1 0 auto;}
.menu-info-wrap .c-summary .summary > strong {color: #1E2124;}/* fontColor 확인 */
/*.menu-info-wrap .right-info .d-card .in .c-tit {font-size: var(--fz-body-xlg);}*/
.menu-info-wrap .c-summary .grade-box {display: flex; align-items: center; gap: var(--spacer2); font-size: var(--fz-body-sm);}
.menu-info-wrap .c-summary .grade-box .star-box {min-width: 8rem;}
.menu-info-wrap .c-summary .grade-box .star-box,
.menu-info-wrap .c-summary .grade-box .star {display: inline-flex; position: relative; height: 1.5rem; background: url(/static/images/kosmes_new/img/grade_star_yellow.svg) no-repeat; background-size: cover; overflow: hidden;}
.menu-info-wrap .c-summary .grade-box .star {background-position: 0 -1.6rem; line-height: 0; background-size: 8rem; vertical-align: top;}
.menu-info-wrap .c-summary .grade-box .grade0-5 {width: 10%;}
.menu-info-wrap .c-summary .grade-box .grade1 {width: 20%;}
.menu-info-wrap .c-summary .grade-box .grade1-5 {width: 30%;}
.menu-info-wrap .c-summary .grade-box .grade2 {width: 40%;}
.menu-info-wrap .c-summary .grade-box .grade2-5 {width: 50%;}
.menu-info-wrap .c-summary .grade-box .grade3 {width: 60%;}
.menu-info-wrap .c-summary .grade-box .grade3-5 {width: 70%;}
.menu-info-wrap .c-summary .grade-box .grade4 {width: 80%;}
.menu-info-wrap .c-summary .grade-box .grade4-5 {width: 90%;}
.menu-info-wrap .c-summary .grade-box .grade5 {width: 100%;}
.menu-info-wrap .right-info .page-btn-wrap.right .btn-wrap {align-items: flex-end; justify-content: flex-end;}
.menu-info-wrap .right-info .page-btn-wrap.center .btn-wrap {justify-content: center;}


/* table */
.table + .table, .table:not(.view, .list) ~ div .table {margin-top: var(--spacer5);}
.table-wrap.list + .table-wrap.list {margin-top: 6rem;}
.table {display: table; table-layout: fixed; font-size: var(--fz-body-md); color: var(--gray-70); text-align: center; margin-bottom: var(--spacer2);}
.table:last-of-type {margin-bottom: 0;}
.table thead {background-color: #EDF1F5; border-bottom: 0.1rem solid var(--table-bd);}
.table thead tr th {position: relative; height: 4rem; font-weight: 500; border: 0; line-height: 1; font-size: var(--fz-title-sm);}
.table thead tr th:last-of-type {border-right: 0;}
.table thead tr th.gray {background: var(--secondary-5);}
.table:not(.view) thead tr:nth-child(2n) th {border: 0.1rem solid var(--white); border-top: 0; border-bottom: 0; background-color: #E2E9F0 !important;}
.table:not(.view) thead tr:nth-child(3n) th {border: 0.1rem solid var(--white); border-bottom: 0; background-color: #ced8e3 !important;}
.table thead tr:nth-child(2n) th:first-of-type, .table thead tr:nth-child(3n) th:first-of-type {border-left: 0;}
.table thead tr:nth-child(2n) th:last-of-type, .table thead tr:nth-child(3n) th:last-of-type {border-right: 0;}
.table thead ~ tbody tr:first-of-type {border-top: 0;}
.table tbody tr th[rowspan] {padding-left: var(--spacer3);}
.table tbody tr :where(th, td):not(:first-of-type) {border: 0.1rem solid var(--table-bd); border-top: 0; border-bottom: 0;}
.table tbody tr th {font-weight: 500; border-right: 0.1rem solid var(--table-bd); background-color: var(--table-bg); color: var(--gray-90); line-height: 1.3;}
.table tbody tr th label {line-height: 1.3;}
.table tbody tr td {height: 6rem; background-color: var(--white);}
.table tbody tr td:first-of-type {border-right: 0.1rem solid var(--table-bd);}
.table tr {border-bottom: 0.1rem solid var(--table-bd);}
.table tr:first-of-type {border-top: 0.1rem solid var(--table-bd);}
.table th, .table td {flex-wrap: wrap; padding: var(--spacer2) var(--spacer3); color: var(--gray-90);}
.table tr td:last-of-type {border-right: 0 !important;}
.table tr td .form-check {justify-content: center; min-width: fit-content; gap: var(--spacer1);}
.table tr td .form-check .file-form {border: 0;}
.table tr td .form-check .file-form .file-container {padding: 0 0 var(--spacer2);}
.table tr td .form-check .file-form .file-btn {padding-top: var(--spacer3);}
.table .title:hover {cursor: pointer;}
.table td .tit {font-weight: 500;}
.table td .tit span {display: -webkit-box; -webkit-box-orient: vertical; position: relative; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; text-align: left; font-weight: 500;}
.table td .new span {padding-left: var(--spacer6);}
.table td .new span::after {content: 'N'; display: inline-flex; justify-content: center; align-items: center; position: absolute; top: 0.4rem; left: 0; min-width: 1.5rem; min-height: 1.5rem; background-color: var(--primary-50); border-radius: var(--rd-2); font-size: 1rem; color: var(--white); font-weight: 200; line-height: 1.5;}
.table td strong {color: var(--gray-90); font-weight: 700;}
.table td.cnt {position: static; transform: none;}
.table .form-check input[type=checkbox] ~ label {align-items: center;}
.table .cnt {position: absolute; top: 50%; right: 1.6rem; transform: translateY(-50%);}
.table .total {display: flex; align-items: center;}
.table th.left {text-align: left !important; padding-left: var(--spacer6);}
.table td.left {text-align: left !important; padding-left: var(--spacer3);}
.table.center {text-align: center !important;}
.table.left th {text-align: center !important;}
.table .table th, .table .table td, .description .table tbody th, .description .table tbody td {height: 4.4rem; padding-right: var(--spacer3);}
.table .center {text-align: center !important;}
.table .right {text-align: right !important; padding-right: var(--spacer6);}
.table .form-group .btn.blue.ico-upload, .table .form-group .btn.primary.ico-upload {width: fit-content; margin: auto;}
.table .finish {display: flex; align-items: center; justify-content: center; width: fit-content; min-width: 4rem; height: 2.4rem; padding: 0 var(--spacer2); margin: 0 auto; background-color: var(--primary-5); border-radius: var(--rd-4); color: var(--primary-60); font-size: var(--fz-body-xsm);}
.table td > *:where(input, select, button, .align-col, .align-row) {}
.table td .align-row.form-check-box, .table td .align-row.radioBox {flex-wrap: wrap;}

/* 신청받는 폼 */
.table.align-top td {vertical-align: top;}
.table:not(.form, .view) thead tr th:first-of-type {padding-left: var(--spacer2);}
/*.table:not(.view) thead tr:nth-child(2n) th {background-color: #E2E9F0 !important; border: 0.1rem solid var(--white); border-top: 0; border-bottom: 0;}
.table.form thead:not(:first-of-type) {position: relative;}
.table.form tbody:not(:last-of-type) {position: relative; border-bottom: 2rem solid var(--white);}
.table.form thead:not(:first-of-type)::before {content: ''; position: absolute; top: -1.1rem; right: 0; width: 100%; height: 0.1rem; background-color: var(--table-bd); z-index: 1;}*/
.table.form {text-align: left;}
.table.form .input-box {padding: 2rem 1rem 1rem 1rem; margin-bottom: 0; border: 0;}
.table.form .input-box + .page-btn-wrap {margin-top: 3rem; padding-top: 2rem; border-top: 0.1rem solid var(--table-bd);}
.table.form .input-box + .page-btn-wrap .btn-wrap {justify-content: flex-start; align-items: center;}

.table.form select {width: 100%;}
.table.form thead {/*height: 6rem;*/ border-top: 0.1rem solid var(--table-bd);}
.table.form thead tr th {height: inherit; padding: var(--spacer4) var(--spacer5);}
.table.form thead tr th:not(:first-of-type) {/*text-align: center;*/ border-left: 0.1rem solid var(--table-bd);}
.table.form thead .tit {display: inline-flex; align-items: center; flex-wrap: wrap; /* gap: var(--spacer3); */ position: relative; margin-bottom: var(--spacer2); font-size: 1.5rem; color: var(--gray-90);}
.table.form thead .tit:last-child {margin-bottom: 0;}
.table.form thead .desc-list {font-size: var(--fz-body-sm); font-weight: 300;}
.table.form thead .desc-list li:last-of-type {margin-bottom: var(--spacer3);}
.table.form thead .tit .ico-info2 {margin-left: 1.6rem;}
.table.form tbody tr :where(th, td):not(:first-of-type)/*, .table.form tbody tr td:first-of-type*/ {border-right: 0;}
.table.form th + td {vertical-align: middle;}
.table.form td .align-row {flex: 1 1 45%;}
.table.form td .align-row .tit {min-width: 14rem; padding-right: 0 !important; margin-bottom: 0 !important;}
.table.form td .align-row.form-check-box {min-height: inherit;}
.table.form td .align-col {gap: var(--spacer2); padding: var(--spacer1) var(--spacer2);}
.table.form td .align-col .tit {display: flex; align-items: flex-start; gap: var(--spacer2); margin-bottom: var(--spacer2); text-align: left; padding-right: var(--spacer12);}
.table.form td .align-col .tit .btn {position: absolute; right: 0;}
.table.form td .align-col .tit span {-webkit-line-clamp: 2;}
.table.form td .align-col .c-red {position: static; margin: 0; color: var(--red2); text-align: left; line-height: 1.5;}
.table.form td .align-col :where(.c-red, .c-blue) {font-weight: 500;}
.table.form td > .align-row {gap: var(--spacer2);}
.table.form td > .align-row label {min-width: 5.7rem;}

/* table : ty-list */
.table.list {position: relative; /*border-top: 0.1rem solid var(--gray-80);*/}
.table.list:last-of-type {margin-bottom: 0;}
.table.list thead th {/*height: 5rem;*/padding: var(--spacer2); text-align: center; /*color: #6D7882;*/ font-weight: 500;}
.talbe.list tbody tr {height: 8.4rem; border: 0;}
.table.list tbody tr:first-of-type {border-top: 0;}
.table.list tbody td {height:auto; padding: var(--spacer2); text-align: center; color: var(--gray-90); border-width: 1px 0 1px 0;}
.table.list tbody td time {color: #6d7882;}
.talbe.list tbody tr th, .table.list tbody tr td {vertical-align: middle; height: 7.4rem; border: 0; padding-top: 0; padding-bottom: 0;}
.table.list .cnt, .table .finished {text-align: -webkit-center;}
.table.list .finish.gray {min-width: 6rem; background-color: var(--gray-10); color: var(--gray-50);}
.table.list tbody tr.active {background-color: var(--primary-5);}
.table.list tbody tr:hover {cursor: pointer;}
.table.sm thead th {font-size: var(--fz-body-sm);}
.table.sm .bg-primary {background-color: #f0f6fc;}
.table.lg tbody td {height: 6rem !important;}

/* table - 상세 */
.txt-left {text-align: left;}
.conts-wrap + .conts-wrap .table.view {margin-top: var(--spacer20);}
.conts-wrap + .conts-wrap .table.view > thead tr {border-bottom: 0.1rem solid var(--table-bd);}
.conts-wrap + .conts-wrap .table.view .title-top .tit {min-height: 5.6rem; justify-content: center; background-color: var(--table-bg); padding: var(--spacer3); border-bottom: 0; font-size: var(--fz-title-sm); font-weight: 500;}
.conts-wrap + .conts-wrap .table.view .title-top .tit + .writer {border-top: 0;}
.conts-wrap + .content {margin-top: calc(var(--spacer5) + 0.2rem);}
.desc-wrap {border: 0; border-bottom: none !important;}
.desc-wrap:last-of-type {border-bottom: 0.1rem solid var(--table-bd) !important;}
.desc-wrap > td {padding: var(--spacer5) 0 !important;}
.desc-wrap > div {display: grid; min-height: 30rem; padding-bottom: var(--spacer10); text-align: left;}
.desc-wrap div {border-width: 0.1rem !important; margin: 0 !important; border-color: var(--table-bd) !important; word-break: break-all; font-weight: 300; line-height: 1.8;}
.desc-wrap .desc {white-space: pre-line;}
.desc-wrap .desc * {line-height: 2 !important;}
.desc-wrap .desc p, .desc-wrap .desc div {display: block; width: 100% !important; margin-bottom: var(--spacer2); white-space: normal !important; font-size: var(--fz-body-md);}
.desc-wrap + tr {border: 0;}
.desc-wrap + tr td {padding: 0 !important;}
.table.view td br {/*display: none;*/}
.table.view tbody tr td {height: 5rem;}
.table.view .table {margin-top: var(--spacer3) !important; margin-bottom: var(--spacer8); font-size: inherit !important;}
.table.view .table ~ p {margin: 0 !important;}
.table.view thead th {padding-top: 0; padding-bottom: 0; text-align: center;}
.table.view > thead {}
.table.view > thead > tr:nth-child(2n) th {background-color: #EDF1F5 !important;}
.table.view > thead > tr:first-of-type {border-top: 0; border-bottom-color: var(--input-bd);}
.table.view > thead ~ tbody > tr:first-of-type {border-bottom: 0.1rem solid var(--table-bd);}
.table.view > thead ~ tbody > tr:first-of-type + tr:last-of-type {border: 0;}
.table.view > thead ~ tbody > tr:first-of-type + tr:last-of-type td {padding: 0;}
.table.view > thead ~ tbody > tr:last-of-type {border-bottom: 0;}
.table.view > thead ~ tbody > tr:last-of-type td {padding: 0;}
.table.view > thead ~ tbody > tr:nth-last-of-type(2) {/*border-bottom: 0;*/}
.table.view > thead > tr > th {height: 5rem; padding: 0; text-align: center; /* background: var(--white); */}
.table.view > thead > tr > td {height: 5rem; background-color: var(--white) !important; text-align: left;}
.table.view > tbody > tr > {}
.table.view > tbody > tr > td {height: 5rem; text-align: left;}
.table.view > tbody > tr > td .table-comment {padding: 0;}
.table.view > tbody > tr > td .table td {text-align: center;}
.table.view > tbody > tr :where(th, td):not(:first-of-type) {border-bottom: 0.1rem solid var(--table-bd);}
.table.view .title-top {background-color: var(--white);}
.table.view .title-top .tit {display: flex; align-items: center; position: relative; min-height: 8rem; padding: var(--spacer3) 0; font-size: var(--fz-title-xxlg); color: var(--gray-90); font-weight: 700; line-height: 1.3; text-align: left; word-break: break-all; border-bottom-color: var(--input-bd);}
.table.view .title-top .tit::before {display: none; content: ''; position: absolute; top: 3.5rem; left: 0; border: solid transparent; border-left: 1.1rem solid var(--primary-50); border-top-width: 0.7rem; border-bottom-width: 0.7rem;}
.table.view .title-top .writer {display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacer3) var(--spacer8); min-height: 5.2rem; padding: var(--spacer3) 0; border-top: 0.1rem solid var(--input-bd);}
.table.view .title-top dl {display: flex; flex-wrap: wrap; gap: var(--spacer2) var(--spacer2); position: relative;}
.table.view .title-top dl.block {}
.table.view .title-top dl:not(:last-of-type)::after {content: ''; position: absolute; top: 50%; right: -1.7rem; width: 0.1rem; height: 1.4rem; background-color: var(--gray-40); transform: translateY(-50%);}
.table.view .title-top dl dt {position: relative; min-width: 3rem; width: max-content; font-weight: 500; text-align: left;}
.table.view .title-top dl dt::after {display: none; content: ':'; position: absolute; top: -0.12rem; right: -1.1rem;}
.table.view .title-top dl .btn-wrap {display: flex; flex-direction: column;}
.table.view .title-top dl .btn-wrap .btn {margin-top: var(--spacer2);}
.table.view .title-top dl dd {color: var(--gray-70); font-weight: 300; text-align: left;}
.table.view .title-top dl dd ul {}
.table.view .title-top dl dd ul li {text-align: left;}
.table.view .contents-wrap {display: block; height: auto; min-height: 25rem; padding: var(--spacer6) 0 var(--spacer16); border: 0; text-align: left; line-height: 2;}
.table.view .contents-wrap td {white-space: normal; border-bottom: 0.1rem solid var(--table-bd);}
.table.view .contents-wrap tr:first-of-type td {border-top: 0;}
.table.view .contents-wrap .desc {margin-bottom: var(--spacer5); line-height: 2.5; color: var(--gray-70);}

.table ~ .table-comment {display: grid; gap: var(--spacer1); margin-top: var(--spacer3); margin-left: 0; padding-left: 0; font-size: var(--fz-body-sm); color: var(--gray-90); font-weight: 300;}
.table ~ .table-comment ~ .table-comment {margin-top: var(--spacer3);}
.table ~ .table-comment + .sec-tit {margin-top: var(--spacer20);}
.table-comment {display: flex; flex-direction: column; flex-wrap: wrap; gap: var(--spacer1); padding-left: var(--spacer3); color: var(--gray-70);}
.table-comment:first-of-type {margin-top: var(--spacer3);}
.table-comment.bold {font-weight: 700; color: var(--gray-90) !important;}
.table-comment.right {text-align: right;}
.table-comment .ico-info2 {padding-left: var(--spacer5);}
.table-comment .ico-info2::before {left: 0;}
.table-comment .ico-info2 b {line-height: 1.5;}
.table-comment .ico-info2 ~ li {padding-left: var(--spacer5); font-size: var(--fz-body-sm);}
.table-comment a {display: inline-block; height: auto;}
.table-comment b {line-height: 2; font-weight: 500;}
.table-comment > li {font-size: var(--fz-body-sm);}
.table-comment > li .align-row {flex-wrap: wrap;}
.table-comment > li p {font-weight: 500;}

.emphasis-tr td, .emphasis-tr:hover td, .emphasis-tr td strong {background-color: var(--primary-50) !important; color: var(--white) !important;}
.admC010.none {margin-top: var(--spacer5);}
.select-td {background-color: #124796 !important; color: var(--white) !important;}

.view-prev-list {width: 100%; /*border-bottom: 0.1rem solid var(--gray-90);*/}
.view-prev-list td {padding: 0 !important;}
.view-prev-list li {display: flex; align-items: center; gap: var(--spacer2); width: 100%; border-bottom: 0.1rem solid var(--table-bd);}
.view-prev-list li:first-of-type {border-top: 0.1rem solid var(--table-bd);}
.view-prev-list li span {min-width: 5rem; font-weight: 500; color: var(--gray-90);}
.view-prev-list li .tit {display: flex; align-items: center; width: 100%; min-height: 6rem;}
.view-prev-list li .tit span {display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; text-align: left; color: var(--gray-70);}
.view-prev-list li .tit:focus {outline-offset: 0;}



/* 바우처 잔액 */
.main-sect .balance-wrap {margin-bottom: 0;}
.main-sect .balance-wrap + .table-wrap {margin-top: var(--spacer17);}
.balance-wrap {display: flex; /*grid-template-columns: 40rem 2fr;*/ gap: var(--spacer4); margin-bottom: var(--spacer20);}
.balance-wrap .user-info {flex-direction: row; padding: 0 !important; margin: 0 !important; border: 0 !important;}
.balance-wrap .user-info .profile {}
.balance-wrap .user-info .profile img {}
.balance-wrap .user-info .companyName {display: flex; flex-direction: column; gap: var(--spacer3);}
.balance-wrap .user-info .companyName .tag {display: inline-flex; width: fit-content; padding: 0 var(--spacer1); background-color: var(--primary-10); border-radius: var(--rd-4); font-size: var(--fz-body-sm); color: var(--primary-60);}
.balance-wrap .user-info .companyName .name {display: flex; align-items: center; gap: var(--spacer2); font-size: var(--fz-title-xlg); color: var(--gray-90); font-weight: 500; line-height: 1;}
.balance-wrap .user-info .companyName .text {}
.balance-wrap .user-info .companyName .setup {position: absolute; right: 3.2rem; bottom: 2.7rem;}
.balance-wrap .allStats {display: grid; width: 100%; max-width: 40rem; border-radius: var(--rd-12); background-color: var(--primary-10);}
.balance-wrap .voucherMoney {padding: var(--spacer10) var(--spacer7) var(--spacer9);}
.balance-wrap .voucherMoney {display: grid; align-items: center; gap: var(--spacer7);}
.balance-wrap .tit-box {display: flex; align-items: center; justify-content: space-between; gap: var(--spacer5); font-size: var(--fz-body-xlg); font-weight: 500; color: var(--gray-90);}
.balance-wrap .tit-box .tit {line-height: 1;}
.balance-wrap .tit-box .number {line-height: 1;}
.balance-wrap [class*="money"] .tit, .balance-wrap [class*="money"] .sum {min-width: fit-content; width: 100%; max-width: 9rem; padding-left: 0;}
.balance-wrap [class*="money"] .sum {display: flex; gap: var(--spacer1); font-weight: 500; color: var(--gray-90);}
.balance-wrap .money {display: grid; gap: var(--spacer2) 0; color: var(--gray-90);}
.balance-wrap .money li {display: flex; justify-content: space-between; position: relative; padding-left: var(--spacer6);}
.balance-wrap .money li::before {content: ''; position: absolute; top: 50%; left: 0; width: 1.6rem; height: 1.6rem; border-radius: var(--rd-20); background-color: var(--white); transform: translateY(-50%);}
.balance-wrap .money li.active::before {background-color: var(--primary-50);}
.balance-wrap .money li span:last-of-type {font-weight: 700;}
.balance-wrap .money2 {display: grid; gap: var(--spacer2); color: var(--gray-90);}
.balance-wrap .money2 li {display: flex; align-items: center; gap: var(--spacer2) var(--spacer8); position: relative;}
.balance-wrap .money2 li .statsBar {background-color: transparent;}
.balance-wrap .money2 li:nth-of-type(2) .statsBar span {background-color: var(--primary-80);}
.balance-wrap .money2 li:nth-of-type(3) .statsBar span {background-color: var(--primary-20);}

.balance-wrap .statsBar {display: block; background-color: var(--white); width: 100%; height: 2.4rem; position: relative; border-radius: var(--rd-20); overflow: hidden;}
.balance-wrap .statsBar.sm {height: 1.2rem !important;}
.balance-wrap .statsBar span {position: absolute; left: 0; top: 0; width: 70%; height: 100%; background-color: var(--primary-50); border-radius: var(--rd-20);}

.balance-wrap .myservice {display: grid; align-items: center; gap: var(--spacer7); max-height: 16.4rem; padding: var(--spacer6) var(--spacer7); background-color: var(--primary-20);}
.balance-wrap .grid-process {display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--spacer5) 0;}
.balance-wrap .grid-process li {display: grid; gap: var(--spacer1); justify-content: center; position: relative; text-align: center; font-size: var(--fz-title-sm);}
.balance-wrap .grid-process li:not(:last-of-type)::after {content: ''; position: absolute; top: 45%; right: -2.8rem; width: 1.6rem; height: 3.2rem; background: url(/static/images/kosmes_new/img/ico_arrow_right_w.svg) no-repeat 100%; background-size: contain;}
.balance-wrap .grid-process li .step {text-transform: uppercase; font-weight: 500; color: var(--white);}
.balance-wrap .grid-process li .tit {display: inline-flex; justify-content: center; align-items: center; min-width: 9rem; max-width: 9rem; min-height: 9rem; padding: var(--spacer2); border-radius: var(--rd-8); background-color: var(--white); color: var(--gray-80); font-weight: 500; text-align: center;}
.balance-wrap .grid-process li .on {background-color: var(--primary-50); color: var(--white);}

.balance-wrap .companyStats {display: flex; flex-direction: column; position: relative; width: 100%; min-height: 19rem; border-radius: var(--rd-12); background-color: var(--secondary-5); padding: calc(var(--spacer8) + 0.1rem) var(--spacer7) var(--spacer9);}
.balance-wrap .companyStats > * {padding-bottom: calc(var(--spacer7) + 0.2rem); margin-bottom: calc(var(--spacer7) + 0.2rem); border-bottom: 0.1rem solid var(--table-bd);}
.balance-wrap .companyStats ul:last-of-type {padding-bottom: 0; margin-bottom: 0; border-bottom: 0;}
.balance-wrap .companyStats .com-info {display: flex; align-items: center; justify-content: space-between; gap: var(--spacer2); padding-bottom: var(--spacer4); margin-bottom: var(--spacer4);}
.balance-wrap .companyStats .com-info .com-tit {display: flex; align-items: center; gap: var(--spacer1); width: 100%;}
.balance-wrap .companyStats .com-info .com-tit .tit {min-width: 12rem; margin-right: var(--spacer6); font-size: var(--fz-title-lg); color: var(--gray-90);}
.balance-wrap .companyStats .com-info .com-tit .tit ~ span:last-of-type {font-weight: 700; color: var(--gray-90);}
.balance-wrap .companyStats .grid-process {justify-content: center; gap: var(--spacer3) var(--spacer9);}
.balance-wrap .companyStats .grid-process li:not(:last-of-type)::after {top: 50%; width: 1.4rem; height: 2.8rem; background: url(/static/images/kosmes_new/img/ico_arrow_right_g.svg) no-repeat 100%; background-size: contain; transform: translateY(-50%);}
.balance-wrap .companyStats .grid-process:last-of-type {padding-bottom: 0; margin-bottom: 0; border-bottom: 0;}
.balance-wrap .companyStats .numberStats {display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacer5) var(--spacer16); padding-bottom: 0; margin-bottom: 0; border-bottom: 0; font-weight: 500; color: var(--gray-80);}
.balance-wrap .companyStats .numberStats li {display: flex; gap: var(--spacer12); position: relative; padding-left: var(--spacer5);}
.balance-wrap .companyStats .numberStats li::before {content: ''; position: absolute; top: 50%; left: 0.3rem; width: 0.5rem; height: 0.5rem; background-color: var(--gray-90); border-radius: var(--rd-20); transform: translateY(-50%);}

.balance-wrap .serviceStats li {display: grid; align-items: center; justify-content: center; align-items: center;}
.balance-wrap .serviceStats li a {display: grid; min-width: 12.5rem; max-width: 9rem; min-height: 9rem; border-radius: var(--rd-8); background-color: var(--white); color: var(--gray-80); font-weight: 500; text-align: center; overflow: hidden;}
.balance-wrap .serviceStats li a .tit {display: flex; flex-direction: column; align-items: center; max-width: 100%; min-height: 8.5rem; max-height: 8.5rem; border-bottom: 0.2rem solid var(--secondary-5); padding: 0; border-radius: 0; font-size: var(--fz-body-sm); }
.balance-wrap .serviceStats li a .tit img {width: 3.5rem; height: 3.2rem;}
.balance-wrap .serviceStats li a .num {display: flex; justify-content: center; align-items: center; max-height: 4.5rem; padding: var(--spacer2); font-size: var(--fz-title-xxxlg); color: var(--primary-60);}
.balance-wrap .serviceStats li a sub {display: flex; margin-top: calc(var(--spacer1) + 0.2rem); margin-left: var(--spacer1); font-size: var(--fz-body-sm); color: var(--gray-80);}

.component-box {display: grid; gap: var(--spacer8);}
.component .print {justify-content: space-between;}
.component .print a:focus {border-radius: var(--rd-full);}
.component .tit-l {display: flex; align-items: center; grid-column-gap: var(--spacer2); position: relative; min-height: 3.2rem; margin-bottom: var(--spacer5); font-size: var(--fz-title-lg); color: #213479;}
.component .tit-l span {display: flex; align-items: center; gap: var(--spacer2); position: relative;}
.component .tit-l span::before {content: ''; width: 1.7rem; height: 1.7rem; border-radius: var(--rd-full); border: 0.5rem outset #3659D3;}


.join-type {display: flex; justify-content: center; margin-top: 4rem;}
.join-type a {flex-direction: column; justify-content: center; width: 41rem; border: 1px solid #ddd; margin: 0 1rem; /*padding: 4rem 0;*/}
.join-type a dl {color: #333;}
.join-type a dl dt {font-size: 2rem; font-weight: 500;}
.join-type a dl dd {font-size: var(--fz-title-md); margin-top: 0.4rem;}
.join-type li.active a {border-color: #003994;}
.join-type li.active a dd {color: #003994;}
.join-type li a:hover {border: 1px solid #003994; olor: #003994;}
.join-type li a:hover dl {color: #003994;}

.login-step{display: flex; margin-top: 4rem; background: #FAFAFA; border: 1px solid #DDDDDD;}
.login-step li {font-size: 16px; display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 5.6rem;}
.login-step li a {justify-content: center; height: 100%; padding: 0 1rem; font-size: var(--fz-title-md);}
.login-step li:after{content: ""; height: 5.8rem; width: 2.2rem; background: url(/static/images/kosmes_new/img/ico-join.svg) no-repeat; display: flex; position: absolute; right:-2rem; top: 0; background-size:auto 100%;}
.login-step li.active{background-color: #2F436B; color: var(--white);}
.login-step li.active::after{background: url(/static/images/kosmes/ico-join-active.svg) no-repeat 100%; width: 2rem; height: 5.6rem; background-size: contain; right: -2rem ;}/* 22.12.12*/
.login-step li.active::before{content: ""; height: 5.8rem; width: 2.2rem; background: url(/static/images/kosmes_new/img/ico-join.svg) no-repeat; display: flex; position: absolute; left:-0.1rem; top: -0.1rem; bottom:-0.1rem; background-size: auto 100%;}
.login-step li:last-child{border: none;}
.login-step li:last-child::after{display: none;}
.login-step li:first-child::before{display: none;}
.login-step li b {margin-right: 0.4rem;}


/* blue */
.ico-info2.c-blue {font-weight: 500;}
.ico-info2.c-blue::before {filter: invert(29%) sepia(76%) saturate(3407%) hue-rotate(213deg) brightness(98%) contrast(87%);}
.ico-info2.c-red::before {filter: invert(20%) sepia(100%) saturate(2283%) hue-rotate(357deg) brightness(85%) contrast(93%);}
.ico-info2.align {display: inline-flex; align-items: center; margin-left: auto; text-align: left;}
.ico-info2.align::before {top: 0.7rem;}
.ico-info2 .btn-wrap {display: inline-flex; gap: var(--spacer1); margin-left: var(--spacer3);}

/* flx */
.flx {width: 100%; padding: var(--spacer7) var(--spacer10); border: 0.1rem solid var(--table-bd);}
.table + .flx {margin-top: 2rem;}
.flx + .flx {margin-top: 3rem;}
.flx > ul {display: flex; flex-direction: column; gap: 3rem;}
.flx > ul.alt {gap: 2rem;}
.flx .alt .fileBox {flex-direction: column; gap: 1rem 5rem;}
.flx > ul > li {display: flex; align-items: flex-start; gap: 1rem;}
.flx .tit {min-width: 10rem; max-width: 16rem; padding: var(--spacer2) 0 0 var(--spacer4);}
.flx .tit + div {flex: 1; display: flex; align-items: center;}
.flx .table-comment {gap: var(--spacer2); flex: 1; width: 100%; padding: 0;}

/* color */
:is(.c-blue2, .c-blue2 li) {color: var(--primary-50) !important;}
:where(b, strong) :is(.c-blue2, .c-blue2 li) {color: var(--primary-50) !important;}
:where(b, strong) :is(.c-red, .c-red li) {font-weight: 700;}

textarea {font-family: 'Pretendard'; width: 100% !important; min-height: 14rem; padding: var(--spacer3); line-height: 1.5; color: var(--gray-50); background-color: var(--white); border: 0.1rem solid var(--table-bd); border-radius: var(--rd-8); font-weight: 300; color: var(--gray-90); font-size: var(--fz-body-md);}


/* font-style */
.fs {font-size: var(--fz-title-sm); line-height: 1.5; color: var(--gray-90);}
.fs.md {font-size: var(--fz-title-md);}
.fs.lg {font-size: var(--fz-title-lg);}
.fs.xlg {font-size: var(--fz-title-xlg);}
.fs.xxlg {font-size: var(--fz-title-xxlg);}
.fs.xxxlg {font-size: 2.6rem;}
.fs.xxxxlg {font-size: var(--fz-title-xxxxlg);}

/* badge[badge Type01] */
.badge {display: inline-flex; width: auto; min-width: 3.5rem; min-height: 2.4rem; padding: 0.1rem 0.8rem; margin: auto; text-align: center; font-size: 1.2rem; line-height: 1.2; color: var(--white); background: #ACABAB; border: 0; border-radius: 0.4rem;}
.badge.lg {width: 6rem; padding: 0; letter-spacing: 0;}
.badge.pt {background: #4F9097;}
.badge.gray {background: #868686;}
.badge.orange {background: #DC984F;}
.badge.blue {background: #5D8CB0;}
.badge.lgray {background:#ACABAB}

/* qna */
.qnaTab .tab {padding: 0; margin: 0;}
.qnaTab-conts {width: 100%;}
.qnaTab-conts > ul {display: flex; flex-direction: column;}
.qnaTab-conts li {border-bottom: 0.1rem solid var(--table-bd);}
.qnaTab-conts .question a {display: flex; align-items: center; position: relative; gap: var(--spacer5); min-height: 9.6rem; padding: var(--spacer5);}
.qnaTab-conts .tit {position: relative; display: inline-flex; align-items: center; gap: var(--spacer5); font-size: var(--fz-title-lg); font-weight: 600; line-height: 1.4;}
.qnaTab-conts .tit::before {content: 'Q'; display: flex; justify-content: center; align-items: center; width: 3.6rem; height: 3.6rem; padding: 0 0.8rem; text-align: center; font-weight: 400; line-height: 1.5; color: var(--primary-60); background: var(--primary-5); border-radius: 0.6rem;}
.qnaTab-conts .down {position: absolute; top: 50%; right: 2rem; transform: translateY(-50%);}
.qnaTab-conts .answer {position: relative; /* min-height: 19rem; */ padding: var(--spacer6); padding-left: var(--spacer19); background-color: var(--secondary-1); border-top: 0.1rem solid var(--table-bd);}
.qnaTab-conts .answer table * {font-size: var(--fz-body-sm);}
.qnaTab-conts .answer table ~ br {display: none;}
.qnaTab-conts .answer br {display: none;}
.qnaTab-conts .answer br:first-of-type {display: block;}
.qnaTab-conts .answer br:nth-of-type(2n+1) {display: none;}
.qnaTab-conts .answer p * {/*white-space: pre-line;*/}
.qnaTab-conts .answer p:last-of-type {margin-bottom: 0;}
.qnaTab-conts .answer p h5,
.qnaTab-conts .answer p label {margin-bottom: var(--spacer5); font-size: var(--fz-title-md); font-weight: 700;}
.qnaTab-conts .answer label {display: block; margin-bottom: var(--spacer2);}
.qnaTab-conts .answer *:not(table, colgroup, thead, tbody, tr, th, td, label) {display: block; margin-bottom: var(--spacer2); font-weight: 400; line-height: 1.8; color: var(--gray-90);}
.qnaTab-conts .answer:before {content: '답변'; display: inline-block; position: absolute; top: 2.6rem; left: 2.8rem; font-weight: 700; color: var(--gray-90);}
.qnaTab-conts .active .answer {border: 0;}
.qnaTab-conts .active .down {transform: translateY(-50%) rotate(180deg);}


/* @add. 25.09.29 */
.detail-info {margin-bottom: var(--spacer18); padding: var(--spacer10); border: 0.4rem solid #EBEBEB; border-radius: var(--rd-12);}
.detail-info .row {position: relative; display:flex; align-items: flex-start; gap: 6rem; padding-top: var(--spacer4);}
.detail-info .row:first-child {padding-top: 0;}
.detail-info .item {flex: 1 1 calc(50% - 1rem); display: flex; align-items: flex-start;}
.detail-info .item:nth-child(2)::before {content: ' ';}
/* .detail-info .item:first-child {flex:0 0 385px;} */
.detail-info .row::before {position: absolute; top: 0; left: 48%; content: ' '; width: 0.1rem; height: 100%; border-left: 0.1rem dashed var(--secondary-7);}
.detail-info .item .tit {display: flex; position: relative; min-width: 14rem; padding-left: 8px; font-weight: 500; color: #6d7882;}
.detail-info .item .tit::before {content:''; display: block; position: absolute; left: 0; top: 1rem; width: 0.3rem; height: 0.3rem;  border-radius:50%; background:#6d7882;}
.detail-info .item .info {display: block; text-align: left; font-weight: 400; color: #1E2124;}
.detail-info .item .info .c-blue {margin: 0; font-weight: 400;}
.detail-info.ty02 .tit {width: 16rem;}
.detail-info.ty02 .item:first-child {flex: 0 0 45%;}



/* 연혁 */
.history-li > li {display: flex; align-items: center; position: relative; gap: var(--spacer3); margin-top: var(--spacer5); padding-left: var(--spacer6);}
.history-li > li::after {content:''; display: block; position: absolute; left: 0; top: 0.5rem; width: 12px; height: 12px;border-radius:50%;background-color: var(--secondary);z-index: 1;}
.history-li > li::before {content:''; display: block; position: absolute; left: 0.6rem; bottom: calc(100% - 12px); top: -3rem; width: 1px;background: var(--secondary-20);}
.history-li > li:first-child {margin-top:0;}
.history-li > li:first-child::before {content:none;}
.history-li .month {display: block; font-weight: 700; color: var(--secondary);}
.history-li .txt {display: block; color: var(--gray-70);}

/** 수행기관 신청 자격 **/
.li-tit-cnt > li {overflow:hidden;border:0.1rem solid var(--table-bd);border-radius: var(--rd-12);}
.li-tit-cnt .tit-box {padding: var(--spacer6) var(--spacer10); background-color: #EDF1F5;}
.li-tit-cnt .tit {font-weight: 700; color: #2d2d2d;}
.li-tit-cnt .cnt-box {padding: var(--spacer6) var(--spacer10);}
.li-tit-cnt + .txt-li {margin-top: var(--spacer4)}

/** 고객센터 **/
.info-box {margin-bottom: var(--spacer7);border:0.4rem solid #efefef;border-radius: var(--rd-8); padding: var(--spacer10) var(--spacer12);}
.info-box .li-bullet {display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacer2);}
.info-box .li-bullet li {margin:0;}

/* cert-info */
.cert-info {padding: var(--spacer9) var(--spacer12);border-radius: var(--rd-8);border:0.1rem solid var(--table-bd);}
.cert-info > div + div {margin-top: var(--spacer8); padding-top: var(--spacer8);border-top:0.1rem solid var(--table-bd);}
.cert-info .program-info {padding: 0 var(--spacer6);}
.cert-info .program-info::after {content:''; display: block; clear:both;}
.cert-info .program-info img {float:left; margin-right: var(--spacer6);}
.cert-info .program-info .info-txt {overflow:hidden; padding-left: var(--spacer6); border: solid var(--table-bd);border-width:0 0 0 0.1rem; font-size: 1.5rem;}
.cert-info .program-info .info-txt span {color: #E71825;}


/** 전체현황 - 기타 **/
/* states-li */
.states-li {display: grid; gap: var(--spacer2); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); padding: var(--spacer7); border-radius: var(--rd-12); background-color: #F7F8F9;}
.states-li button {width: 100%; min-height: 9.6rem; padding: 0 var(--spacer2); border-radius: var(--rd-8); background-color: #E4EBF6;}
.states-li .name {display: block; text-align: center; font-weight: 500; color: #3B547A;}
.states-li .count {display: block; margin-top: var(--spacer1); font-size: var(--fz-title-md); font-weight: 500; text-decoration: underline; text-underline-position: under; text-decoration-thickness: 0.2rem; color: #3B547A;}

.states-li .blue {background-color: #DFEFFF;}
.states-li .blue .name,
.states-li .blue .count {color: #005EA7;}
.states-li .red {background-color: #FDE0E0;}
.states-li .red .name,
.states-li .red .count {color: #D63D4A;}
.states-li .purple {background-color: #E4DFFF;}
.states-li .purple .name,
.states-li .purple .count {color: #4538D9;}


/* 전체 현황 */
.grid-li {display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--spacer18);}/* 100으로 나눈 기준 */
.grid-li .li {display: grid; flex: 1 1 30%; padding: var(--spacer6) var(--spacer7); border-radius: var(--rd-12); background-color: var(--table-bg);}
/*.grid-li .li-wallet {grid-column: span 2;}
.grid-li .li-service {grid-column: span 1;}
.grid-li .li-recently {grid-column: span 5;}*/

/* 전체바우처 */
.grid-li .li-voucher .tit {display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacer2);}
.grid-li .li-voucher .tit strong {flex-shrink:0; font-size: var(--fz-title-md); font-weight: 700;}
.grid-li .li-voucher .graph .txt {display: block; margin-bottom: var(--spacer2); font-size: var(--fz-body-sm); font-weight: 700; text-align: right; color: var(--gray-90);}
.grid-li .li-voucher .bar {display: flex;overflow:hidden; min-width:0; height:2.2rem; align-items: center;}
.grid-li .li-voucher .bar > span {display: block; height:100%;}
.grid-li .li-voucher .bar > span.red {background-color: #D65C66;}
.grid-li .li-voucher .bar > span.skyblue {background-color: #AFCFF0;}
.grid-li .li-voucher .bar > span.blue {background-color: #4F8EFF;}
.grid-li .li-voucher .legend-li {margin-top: var(--spacer8); padding-top: var(--spacer5); border-top:0.1rem solid var(--table-bd);}

/* 최근활동 */
.grid-li .li-recently .tit {display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacer2);}
.grid-li .li-recently .tit strong {flex-shrink:0; font-size: var(--fz-title-md); font-weight: 700;}
.grid-li .li-recently .list {border-top:0.1rem solid var(--table-bd);}
.grid-li .li-recently .list > li {display: flex; align-items: center; gap: var(--spacer3); padding: var(--spacer2);border-bottom:0.1rem solid var(--table-bd);}
.grid-li .li-recently .label {flex-shrink:0;display:inline-block; padding: 0 var(--spacer2);border-radius: var(--rd-4); font-size: var(--fz-body-sm); color: #6d7882;background:#E4EBF6;}
.grid-li .li-recently .title {flex:0 1 auto;display: block;overflow:hidden; font-size: var(--fz-body-sm); font-weight: 500; color: #1E2124; white-space:nowrap; text-overflow:ellipsis;}
.grid-li .li-recently .date {flex-shrink:0; margin-left:auto; font-size: var(--fz-body-sm); color: #464C53;}

/* 바우처 잔액 */
.grid-li .li-wallet .tit {display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacer3);}
.grid-li .li-wallet .tit strong {flex-shrink:0; font-size: var(--fz-title-md); font-weight: 700;}
.grid-li .li-wallet .tit span {font-size: var(--fz-title-md); font-weight: 500;}
.grid-li .li-wallet .tit em {font-weight: 700;}
.grid-li .li-wallet .bar {display: block;overflow:hidden; width:100%; height:1rem; margin-bottom: var(--spacer4);border-radius: var(--rd-12);background-color: #AFD0F0;}
.grid-li .li-wallet .bar-inner {display: block; width:0%; height:100%;border-radius: var(--rd-12);background-color: #D65C66;}
.grid-li .li-wallet .step-sm-li {margin-top: var(--spacer4); padding-top: var(--spacer4);border-top:0.1rem solid var(--table-bd);}

/* 서비스 현황 */
.grid-li .li-service .tit {display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacer3); min-width: max-content; margin-bottom: var(--spacer4); padding-bottom: var(--spacer3); border-bottom: 0.1rem solid var(--table-bd);}
.grid-li .li-service .tit .btns {display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacer1);}
.grid-li .li-service .tit .btns .btn {min-width: fit-content;}
.grid-li .li-service .service-li {margin-top: var(--spacer4);}


/** 통계차트 **/
.map-flt {padding: var(--spacer5) var(--spacer15) var(--spacer5) var(--spacer8);border-radius: var(--rd-8); background-color: #EDF1F5;}
.map-flt .flt-area {display: flex; gap: var(--spacer5); margin-top: var(--spacer6);}
.map-flt .flt-area:first-child {margin-top:0;}
.map-flt .flt-area select {max-width:32rem;}
.map-flt .name {flex-shrink:0; font-weight: 700; line-height:4rem;}

.inp-btn-li {display:grid; gap: var(--spacer2);grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); width:100%;}
.inp-btn-li label {display: block; position: relative; cursor:pointer;}
.inp-btn-li label span {display: flex; align-items: center; justify-content: center;gap:4px; height:4rem; padding: 0 var(--spacer4);border:0.1rem solid #CDD1D5; border-radius: var(--rd-8); background: var(--white); transition: all 0.3s;}
.inp-btn-li label span::before {content:''; ; width:0; height:2rem; margin-right:-0.4rem;background:url(/static/images/kosmes_new/img/ico_chk_box.svg) no-repeat center; transition: var(--transition-3);}
.inp-btn-li label input:checked + span {background-color: #EFF5FF; border-color: var(--primary-50); color: var(--primary-50);}
.inp-btn-li label input:checked + span::before {width: 2rem; margin-right: 0;}

/* 프로필 */
.grid-li .li-myinfo .top {display: flex; gap: var(--spacer3);}
.grid-li .li-myinfo .photo {position: relative; width:45px; height:45px;background-color: #ddd;}
.grid-li .li-myinfo .cnt .name {display: block; margin-bottom: var(--spacer1); font-size: var(--fz-title-md); font-weight: 700; color: var(--gray-90);}
.grid-li .li-myinfo .cnt .msg {margin-bottom: var(--spacer3);}

.grid-li .li-myinfo .info-quick {display:grid; grid-template-columns: repeat(5, 1fr); gap: var(--spacer1); margin-top: var(--spacer5); padding-top: var(--spacer5); border-top:0.1rem solid var(--table-bd);}
.grid-li .li-myinfo .info-quick button.gr2 {grid-column: span 2;}
.grid-li .li-myinfo .info-quick button.gr3 {grid-column: span 3;}
.grid-li .li-myinfo .info-quick button.gr5 {grid-column: span 5;}


/* line-bot */
.line-bot {margin-top: var(--spacer8); padding-top: var(--spacer3); border-top: 0.1rem solid var(--table-bd);}
.line-bot .btn-wrap {text-align: right;}


/* etc */
.chartbox {padding: var(--spacer6) var(--spacer8); border: 0.1rem solid #c6c6c6; border-radius: var(--rd-12);}

.login-form-area {display: flex; justify-content: center; width: 100%; min-height: 30rem; padding: var(--spacer5) var(--spacer8); border-top: 0.1rem solid var(--gray-30); border: 0.1rem solid var(--table-bd); border-left: 0; border-right: 0;}
.login-form-area form,
.login-form-area .login-wrap {display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 55rem;}
.login-form-area .login-wrap {gap: var(--spacer3);}
.login-form-area .login-wrap img {max-width: 12rem; margin: 0 auto;}
.login-form-area .login-info-wrap {width: 100%; padding: var(--spacer6) 0 var(--spacer6) var(--spacer14);}
.login-form-area .link-group {display: flex; justify-content: center; gap: var(--spacer5);}
.login-form-area .link-group li {position: relative;}
.login-form-area .link-group li:not(:last-of-type)::after {content: ''; position: absolute; top: 50%; right: -1rem; width: 0.1rem; height: 100%; max-height: 1.4rem; background-color: var(--gray-40); transform: translateY(-50%);}
.login-form-area .link-group .btn {border: 0;}
.login-form-area .link-group .btn.primary {min-height: 5.6rem;}

/* 사업신청 > 참여기업신청(일반) > step1 */
.agree-check p {font-weight: 500;}
.agree-check .chk-area input[type=radio] ~ label {font-weight: 500;}

/* 사업신청 > 참여기업신청(일반) > step3 */
#intelText {margin-bottom: var(--spacer20);}

/* 251029 - 13:10 추가 */
.b-state.green {background-color: #E3F5E1; color: #337F80;}

@media (max-width: 1200px) {

	.hidden #allTopMenu, .hidden #header-top, .hidden #header .head-body, .hidden #header .head-gnb, .hidden #container, .hidden #footer, .hidden .top-search {padding-right: 0;}

	.inner {padding-left: var(--spacer5) !important; padding-right: var(--spacer5) !important; box-sizing: border-box;}

	.ico-danger {padding-left: var(--spacer5) !important;}
	.ico-danger::before {min-width: 1.5rem; min-height: 1.5rem;}

	.form-select {width: 100%;}

	#header-top .toggle-head .inner {padding-left: var(--spacer7);}
	#header-top .toggle-head .nuri-txt::before {left: 0;}
	#header-top .toggle-head.active ~ .toggle-body {height: auto;}
	#header .one-depth {font-size: var(--fz-body-md);}
	#header .one-depth::after {margin-left: var(--spacer1); background-size: 1.1rem;}
	#header .two-depth {grid-template-columns: repeat(2, 1fr); gap: var(--spacer3); padding: var(--spacer5) 0;}
	#header .two-depth::before {left: 13.5rem;}
	#header .two-depth-tit {min-width: 15rem; font-size: var(--fz-title-md);}
	#header .two-depth > li > a {font-size: var(--fz-title-xsm);}
	#header .gnb > ul {gap: 0 var(--spacer14);}

	.sitemap .hideMenu ul {flex: 1 1 30%;}

	.top-search .sch-wrap {max-width: 100%; padding: 0 var(--spacer4);}
	.top-search .sch-wrap .sch-tit .sch-close {right: 0;}

	.tab ul {}
	.tab.line li {flex: 1 1 50%;}
	.tab.line li:nth-last-of-type(2) {border-left: 0;}
	.tab.line li:not(:nth-last-of-type(1), :nth-last-of-type(2)) {border-bottom: 0.1rem solid var(--table-bd);}

	.table.form td .align-col .tit {}
	.table .finish {min-width: inherit;}

	.step-wrap li {font-size: var(--fz-body-sm);}

	.page-title-wrap {gap: var(--spacer10);}

	.search-service {gap: var(--spacer4);}
	[class^="align-"].sm {width: 70%;}

	.align-col:nth-of-type(2n)::before {display: none;}
	.align-row label {min-width: fit-content;}

	.news-wrap {flex-wrap: wrap; gap: var(--spacer14) var(--spacer5);}

	.pop-wrap.md .popup {min-width: 90% !important;}
	.pop-wrap {min-height: auto;}

	#footer .f-logo {height: 3.2rem;}
	#footer .f-cnt {gap: var(--spacer8);}

	.login-form-area {flex-wrap: wrap;}
	.login-form-area .login-wrap {max-width: 100%; padding-right: 0;}
	.login-form-area .login-wrap::after {display: none;}
	.login-form-area .login-info-wrap {position: relative; width: 100%; margin-top: var(--spacer8); padding: var(--spacer8) 0 0; border-top: 0.1rem solid var(--gray-30);}

	.align-top {align-items: flex-start !important;}

	.detail-info .row {flex-direction: column; gap: var(--spacer5);}
	.detail-info .row::before {content: none;}
    .detail-info .item:first-child {flex: none;}

	.file-form .file-container .align-col, .file-form .file-container .align-col .align-row:first-of-type {flex-wrap: wrap; justify-content: flex-start;}

	.menu-info-wrap .menu-slide-wrap {gap: var(--spacer8);}

    .tab-cnts .tit {margin-bottom: 2rem;}
    .tab-cnts *:not(.tit) + .tit {margin-top: 4rem;}

}


@media (max-width: 640px) {

	body {font-size: var(--fz-body-sm);}
	.inner {padding-left: var(--spacer4) !important; padding-right: var(--spacer4) !important;}
	#container > .inner {padding: var(--spacer6) var(--spacer4) var(--spacer15);}
	#container form > .inner, #container > .inner {}
	a[class*=ico-]::after, button[class*=ico-]::after {width: 1.2rem !important; height: 1.2rem !important;}

	.form-check-box {flex-wrap: wrap; gap: var(--spacer2) var(--spacer5) !important;}

	.desktop-only {display: none;}
	.img-wrap {position: relative; min-height: 23rem; padding: 0;}
	.img-wrap .btn-zoom {position: absolute; right: var(--spacer3); bottom: var(--spacer3); width: 2.7rem; height: 2.7rem; background: url(/static/images/kosmes_new/img/ico_img_plus.svg) no-repeat 100%; background-size: contain;}
	.img-wrap .btn-zoom:focus {outline-offset: 0.2rem; border-radius: var(--rd-4);}
	.btn-txt:focus {outline-offset: 0.1rem;}

	.btn-ico[class*=ico-].sm {width: 1.8rem; height: 1.8rem;}
	.btn {min-width: inherit; min-height: var(--btn-h-xsm); padding: 0 var(--btn-px-xsm); font-size: var(--fz-body-xsm);}
	.btn:is(.pre, .pay) {border-color: var(--border);}
	:not(.page-btn-wrap) .btn.blue {min-width: 3rem; min-height: var(--btn-h-xsm); padding: 0 var(--spacer2); border-radius: var(--rd-4); font-size: var(--fz-body-xsm); white-space: nowrap;}
	.btn.sm {min-height: var(--btn-h-xxsm); font-size: var(--fz-body-xsm); border-radius: var(--rd-4);}
	.btn.lg {min-width: 10rem !important; min-height: var(--btn-h-sm) !important; padding: 0 var(--spacer3) !important; border-radius: var(--rd-6) !important; font-size: var(--fz-body-sm) !important;}
	.btn.quick {padding: var(--spacer1);}
	.btn.ico-upload::before {width: 1.3rem; height: 1.3rem;}
	.m-full {width: 100%; word-break: break-all;}
	.ico-down {min-width: 7.5rem;}

	#allTopMenu .inner {padding: 0 !important;}
	#allTopMenu .box a,	#allTopMenu .box .form-select {padding: var(--spacer1) var(--spacer3); font-size: var(--fz-body-xsm); line-height: 1.2;}
	#allTopMenu .box .form-select {padding-right: var(--spacer7); white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
	#allTopMenu .box .left {min-height: 2.4rem;}
	#allTopMenu .box .right {align-items: baseline;}
	#allTopMenu .box .right form {display: flex;}

	.breadcrumb-wrap {top: 1rem;}
	.breadcrumb-wrap .breadcrumb {display: none; gap: var(--spacer2);}
	.breadcrumb-wrap .breadcrumb li {display: none;}
	.breadcrumb-wrap .breadcrumb li.home, .breadcrumb-wrap .breadcrumb li:last-child {display: flex; font-size: var(--fz-body-xsm);}
	.breadcrumb-wrap .breadcrumb li.home::before {width: 0.9rem; height: 0.9rem;}
	.breadcrumb-wrap .breadcrumb li:not(:nth-child(2)):last-child::before {content: ''; order: 1; display: inline-flex; align-items: center; flex-direction: row; width: 1.6rem; height: 1.6rem; background: url(/static/images/kosmes_new/img/ico_bread_dot.svg) no-repeat; background-size: contain;}
	.breadcrumb-wrap .breadcrumb li:not(:nth-child(2)):last-child::after {content: ''; order: 2; display: inline-flex; align-items: center; flex-direction: row; width: 1rem; height: 1rem; background: url(/static/images/kosmes_new/img/ico_arrow_right.svg) no-repeat; background-size: contain;}
	.breadcrumb-wrap .breadcrumb li:not(:nth-child(2)):last-child .txt {order: 3;}
	.breadcrumb-wrap .breadcrumb li.home, .breadcrumb-wrap .breadcrumb li:last-child {gap: var(--spacer2);}

	.page-title-wrap {min-height: 8rem;}
	.page-title-wrap .h-tit {font-size: var(--fz-title-lg);}
	.page-title-wrap .txt {display: inline; margin-top: 0; font-size: var(--fz-body-md);}
	.page-title-wrap .txt strong {margin: 0;}

	.sec-tit {margin-bottom: var(--spacer3); font-size: var(--fz-title-md); line-height: 1.3;}
	.sec-tit.align-c {display: inline-block;}
	.sec-tit-s {padding: var(--spacer2) 0; margin: var(--spacer4) 0 0; font-size: var(--fz-title-sm) !important;}
	.sec-tit-s ~ .desc-list li {margin-bottom: 0;}
	.sec-tit-s ~ .desc-list li::before {top: 0.9rem;}
	.sec-tit-s + .info-li {padding-bottom: var(--spacer1);}
	.sec-tit-s + .table-comment {margin-top: 0;}
	.sec-tit-s .c-info {font-size: var(--fz-title-xsm); font-weight: 300;}
	.sec-tit-s > span:not(.btn-wrap) {gap: var(--spacer1);}
	.sec-tit-s.full .btn-wrap .ico-del {min-height: var(--btn-h-xsm);}
	.sec-tit-s.full ~ .table.form tr {display: inherit; border-top: 0.1rem solid var(--table-bd); border-bottom: 0.1rem solid var(--table-bd);}
	.sec-tit-xs {min-height: var(--btn-h-sm); border-radius: var(--rd-4); font-size: var(--fz-title-xsm);}
	.sec-tit .step-now {font-size: var(--fz-title-xlg);}
	.sec-tit .step-now strong {min-width: 5.5rem; min-height: 2.8rem; border-radius: var(--rd-4); font-size: var(--fz-title-sm);}

	.step-wrap {flex-wrap: wrap; gap: var(--spacer1); margin-bottom: var(--spacer8);}
	.step-wrap li {flex: 1 1 35%; min-height: 4rem; font-size: var(--fz-title-xsm); border-radius: 0 !important;}
	.step-wrap li::before {min-height: 4rem !important;}
	.step-wrap li::after {right: -1.5rem; min-height: 4rem; background-size: contain !important;}
	.step-wrap li:first-of-type::before {display: none; content: ''; position: absolute; left: -0.1rem; min-width: 1.7rem; min-height: 4rem; background: url(/static/images/kosmes_new/img/step_arrow2.svg) no-repeat; background-size: contain;}
	.step-wrap li:nth-of-type(2n)::after, .step-wrap li:nth-of-type(4n)::after,
	.step-wrap li:nth-of-type(3n)::before, .step-wrap li:nth-of-type(5n)::before {display: none;}
	.step-lg-li {flex-wrap: wrap;}

	.page-title-info {padding: var(--spacer5); margin-bottom: var(--spacer12);}

	.page-btn-wrap {margin: var(--spacer8) 0;}
	.page-btn-wrap + .sec-tit {margin-top: var(--spacer20);}
	.page-btn-wrap + .table-wrap {margin-top: var(--spacer10);}
    .page-btn-wrap .btn-wrap {justify-content: center !important; margin-top: 0;}
    .page-btn-wrap .btn-wrap .btn.md {min-height: var(--btn-h-sm);}

	.main-sect.banner .search .sch-form .sch-input input {min-height: 5.5rem; padding: var(--spacer2) var(--spacer5) !important; font-size: var(--fz-body-md);}
	.main-sect.banner .search .sch-form .sch-input input::placeholder {font-size: var(--fz-body-md);}
	.main-sect.banner .search .sch-form {gap: var(--spacer5);}

	.menu-info-wrap .menu-slide-wrap {grid-template-columns: 1fr; gap: var(--spacer5);}
	.menu-info-wrap .right-info .page-btn-wrap:last-child {margin: 0;}
	.menu-info-wrap .right-info .page-btn-wrap.right .btn-wrap {flex-wrap: nowrap; flex-direction: row-reverse; justify-content: flex-end !important; gap: var(--spacer2);}
	.menu-info-wrap .right-info .page-btn-wrap.right .btn-wrap .btn {min-width: fit-content !important;}
	.menu-info-wrap .right-info .d-card .in {padding: 0;}
	.menu-info-wrap .right-info .d-card .in .tit-box {gap: var(--spacer2);}
	.menu-info-wrap .right-info .c-tag-list span,
	.menu-info-wrap .right-info .c-tag {min-height: 2.2rem; font-size: var(--fz-body-xsm);}
	.menu-info-wrap .c-summary {padding-top: var(--spacer5);}

	.conts-wrap .agree-check {flex-wrap: wrap; gap: var(--spacer3); padding-top: var(--spacer4);}
	.conts-wrap .agreement-scroll .scroll {font-size: var(--fz-body-xsm);}
	.desc-wrap > div {min-height: 18rem;}
	.desc-wrap .desc p, .desc-wrap .desc div {font-size: var(--fz-body-sm);}
	.desc-wrap .desc * {line-height: 1.5 !important;}

	#allTopMenu {z-index: 1 !important;}
	#allTopMenu .box {border-bottom: 0.1rem solid var(--gray-30);}
	#wrap {}
	.is-m-gnb #header .header-in {border-bottom: 0;}
	.is-m-gnb #header {border-bottom: 0; z-index: 2; overflow: visible;}
	#header {overflow: hidden;}
	#header .head-gnb {display: none;}
	#header .head-gnb::after {transform: none;}
	#header .head-body {min-height: 6rem;}
	#header .head-body .inner {gap: var(--spacer1); padding: 0 var(--spacer4);}
	#header .head-body .logo {height: 2.6rem;}
    #header .head-body .logo a {line-height: 100%;}
	#header .head-body .head-in {align-items: flex-end; gap: 0; flex-wrap: wrap; min-height: auto;}
	#header .head-body .head-etc {display: none;}
	#header .head-body .btn-navi {min-width: fit-content; flex-direction: row; gap: 0; padding: 0; font-size: var(--fz-body-xsm);}
	#header .head-body .btn-navi:not(:first-child)::after {display: none;}
	#header .head-body .btn-navi.join {font-size: var(--fz-body-xsm);}
	#header .head-body .btn-navi.join::before,
	#header .head-body .btn-navi.login::before {display: none;}
	#header .head-body .btn-navi.sch {min-width: 1.9rem; min-height: 1.9rem; height: 0; white-space: nowrap; text-indent: -9999px;}
	#header .head-body .btn-navi.sch::before {min-width: 1.9rem; min-height: 1.9rem;}
	#header .head-body .btn-navi.m-all {display: flex; gap: 0; min-width: auto; height: 2rem; text-indent: -9999px;}
	#header .head-body .btn-navi.m-all::before {min-width: 1.9rem; min-height: 1.9rem;}
	#header .head-body .btn-navi.my {align-items: baseline; gap: 0;}
	#header .head-body .btn-navi.my::before {display: none;}
	#header .head-body .right {align-items: center; gap: var(--spacer3); margin: 0;}

	#header .m-gnb-wrap {display: block;}
	#header .m-gnb-wrap .m-gnb-in {width: 100%;}
	#header .m-gnb-head .ico-close {min-width: 2.2rem; min-height: 2.2rem; padding: var(--spacer2); text-indent: -9999px; background-size: 1.8rem; border: 0;}
	#header .m-gnb-head .m-gnb-login .name {font-weight: 500;}
	#header .m-gnb-body .submenu .m-two-depth li a {padding-left: var(--spacer9);}
	#header .m-gnb-body .submenu .m-two-depth li a::before {top: 2rem;}

	.login-form-area {min-height: 15rem; padding: var(--spacer5) 0;}
	.login-form-area .login-wrap img {max-width: 8rem;}

	/* input 640 */
	textarea {min-height: 14rem;}
	input:not([type=radio], [type=checkbox]), select {min-width: 6rem; min-height: var(--btn-h-xsm); padding: 0 var(--spacer2) !important; font-size: var(--fz-body-xsm); border-radius: var(--rd-4); line-height: 1.2;}
	input[type=number] {padding-right: var(--spacer6) !important;}
	select {padding-right: var(--spacer2) !important; background-image: url(/static/images/kosmes_new/img/ico_arrow_select.svg); background-size: 1.2rem; background-position: center right var(--spacer2);}
	select.sm {max-width: calc(35% - 3rem); width: 100% !important;}
	input[type=date], input[name="start_date"], input[name="end_date"] {background-size: 1.7rem; background-position: calc(100% - 0.8rem) 46%;}
	input[type=radio] ~ label, input[type=checkbox] ~ label {min-height: var(--rdo-size-sm); padding-left: calc(var(--rdo-size-sm) + var(--spacer2)) !important; font-size: var(--rdo-fz-sm);}
	input[type=radio] ~ label + span, input[type=checkbox] ~ label + span {font-size: var(--fz-body-xsm); text-align: left;}
	input[type=radio] ~ label::before, input[type=checkbox] ~ label::before {width: var(--rdo-size-sm); height: var(--rdo-size-sm); background-size: 0.9rem !important;}
	input[type=radio] ~ label::before {top: 0.2rem;}
	input[type=radio] ~ label::after {top: 0.6rem !important;}
	input[type=radio] ~ label::after, input[type=checkbox] ~ label::after {top: calc((var(--rdo-size-sm) - var(--rdo-chk-sm)) / 2); left: calc((var(--rdo-size-sm) - var(--rdo-chk-sm)) / 2); width: var(--rdo-chk-sm); height: var(--rdo-chk-sm);}

	.info-list.result {padding: var(--spacer5) !important;}
	.info-list.result strong {font-size: var(--fz-title-sm);}
	.info-list.result .none:last-of-type {margin: 0;}
	.info-list li {position: relative; padding-left: var(--spacer3); color: var(--gray-70); line-height: 1.8; font-size: var(--fz-body-sm);}
	.info-list .none {margin-bottom: var(--spacer2);}

	.d-card {gap: var(--spacer2); padding: var(--spacer7) var(--spacer4) var(--spacer3) var(--spacer4); border-radius: var(--rd-6) 0 var(--rd-6) 0; overflow: hidden;}
	.d-card .in {min-height: 20rem; padding: var(--spacer8) var(--spacer5);}
	.d-card .c-tit {font-size: var(--fz-title-xsm) !important;}
	.d-card .img {height: auto !important;}
	.d-card .c-txt,	.d-card .c-price *, .d-card .c-title .c-category {min-height: inherit; font-size: var(--fz-body-xsm); line-height: 1.3;}
	.d-card .c-title .c-tit, .d-card .c-title .c-category {max-height: 3.9rem; min-height: inherit; -webkit-line-clamp: 2;}
	.d-card .c-title, .d-card .text {gap: var(--spacer1);}
	.d-card .c-title .c-category {line-height: 1.5;}
	.d-card .c-title .c-tag {top: 0; left: -0.1rem; min-width: 4.8rem; min-height: 2.2rem; padding: 0 var(--spacer2); border-radius: 0 0 var(--rd-6) 0; font-size: calc(var(--fz-body-xsm) - 0.1rem); font-weight: 300;}
	.d-card .c-price {flex-direction: column; align-items: flex-start;}
	.d-card .c-price .grade-box {width: 100%;}
	.d-card .c-price .grade-box .star {background-position: 0 -1.5rem; height: 1.3rem; background-size: 7.2rem;}
	.d-card .c-price .grade-box .star-box {max-width: 7.2rem; min-width: inherit; width: 100%;}
	.d-card .c-price .price dl::before {left: -0.6rem;}
	.d-card .c-price .price b::after, .d-card .c-price .price :where(b, dl):not(:last-of-type)::after {top: 0.1rem;}
	.d-card .c-price .price dl {gap: var(--spacer1);}
	.d-card .c-date {font-size: var(--fz-body-xsm);}

	.news-wrap .news-in {gap: var(--spacer4);}
	.news-wrap .news-in .news-tit .tit {font-size: var(--fz-title-xlg);}
	.news-wrap .news-in .news-list {gap: var(--spacer7); padding-top: var(--spacer5);}

	.top-search {min-height: 16rem; padding: var(--spacer5) 0; background-color: var(--primary-80);}
	.top-search.is-open {padding: 0;}
	.top-search .sch-wrap .sch-form-wrap .sch input[type=text] {height: 4rem; padding: 0 var(--spacer4); border-radius: var(--rd-4);}
	.top-search .sch-wrap .sch-form-wrap .sch input[type=text]::placeholder {font-size: var(--fz-body-xsm); font-weight: 500;}
	.top-search .sch-wrap .sch-tit .sch-close {top: -0.4rem; width: 1.8rem; height: 1.8rem;}
	.top-search .sch-wrap .sch-form-wrap .sch-tag {padding-left: 0.2rem;}
	.top-search .sch-wrap .sch-form-wrap .sch-tag dl,
	.top-search .sch-wrap .sch-form-wrap .sch-tag dt,
	.top-search .sch-wrap .sch-form-wrap .sch-tag dd {font-size: var(--fz-body-xsm);}
	.top-search .sch-wrap .sch-form-wrap .sch {margin: var(--spacer4) 0 var(--spacer3);}
	.top-search .sch-wrap .sch-form-wrap .sch .ico-sch {width: 1.8rem; height: 1.8rem; right: var(--spacer4);}

	.tab {margin-bottom: 0; padding-bottom: 0;}
	div::-webkit-scrollbar, .tab::-webkit-scrollbar {width: 0.3rem; height: 0;}
	.tab ul {}
	.tab li, .tab button, .tab li a {width: 100%; height: auto; min-height: var(--btn-h-sm) !important; font-size: var(--fz-body-sm) !important; border-radius: 0; border: 0;}
	.tab li {flex: 1 1 50%; border-bottom: 0;}
	.tab li:last-of-type a, .tab li:last-of-type button {border-right: 0 !important;}
	.tab li:last-of-type a::after, .tab li:last-of-type button::after {display: none;}
	.tab li:not(.active) a::after, .tab li:not(.active) button::after {content: ''; bottom: 0; background-color: var(--primary-50);}
	.tab li a, .tab button {gap: var(--spacer1); padding: 0 var(--spacer3); font-size: var(--fz-body-xsm) !important; font-weight: 300;}
	.tab .active a, .tab button.active {border: 0 !important; font-weight: 500;}
	.tab.line {margin-bottom: var(--spacer5);}
	.tab.line li:nth-last-of-type(2) {border-bottom: 0;}
	.tab.line a {height: auto; border-width: 0.1rem;}

	.tab-btns ul {flex-wrap: wrap; flex: auto;}
	.tab-btns ul li {flex: 1 1 15%;}

	.tab-cnts {padding-top: var(--spacer5);}
	.tab-cnts .tit {font-size: var(--fz-title-sm);}

	.quick-btns {top: inherit; bottom: 8rem; transform: translateX(10.3rem);}
	.quick-btns ul {padding: var(--spacer5) var(--spacer4);}
	.quick-btns li button::before {width: 3.8rem; height: 3.8rem; background-size: 2.2rem;}


	.input-box-bd .description .align-row {flex-wrap: wrap;}
	.file-form {min-height: inherit;}
	.file-form .ico-upload {position: absolute; top: 1rem; right: 1rem; width: auto;}
	.file-form .category {max-width: 100%; padding: 0;}
	.file-form .file-container {flex-wrap: wrap;}
	.file-form .file-container .align-row {flex-wrap: wrap;}
	.file-form .file-container .align-row:last-of-type {justify-content: flex-start;}
	.file-form .file-container .align-col {gap: var(--spacer1);}
	.file-form .file-container .align-col .align-row:first-of-type {padding-left: var(--spacer1);}
	.file-form .file-container .align-col .align-row:first-of-type .align-row {padding-left: 0;}
	.file-form .file-list {}
	.file-form .file-list input[type=checkbox] ~ label {padding-left: var(--spacer5);}
	.file-form.view {padding: var(--spacer3);}
	.file-form.view .file-list {align-items: flex-start; padding: var(--spacer2);}

	.file-list::-webkit-scrollbar {width: 0.4rem;}

	.link-list ul {gap: var(--spacer2);}
	.link-list ul li {flex: 1 1 100%; font-size: var(--fz-title-xsm) !important;}
	.link-list ul li a {flex-direction: row-reverse; min-height: var(--btn-h-md); padding: 0 var(--spacer3) !important; font-weight: 500;}
	.link-list ul li a .img {min-width: 4rem; max-width: 4rem; width: inherit !important; height: 2.6rem !important;}
	.link-list ul li a span:first-of-type {width: 100%; justify-content: space-between;}
	.link-list.voucher ul li a {flex-direction: row;}

	.quick-menu {right: 3rem; bottom: 3rem;}
	.quick-menu ul li a {min-width: 4.5rem; width: 4.5rem; height: 4.5rem;}
	.quick-service {flex-wrap: wrap; gap: var(--spacer2); padding: var(--spacer4);}
	.quick-service .tit {padding-left: var(--spacer12); font-size: var(--fz-title-md);}
	.quick-service .tit::before {min-width: 5rem; min-height: 3.5rem;}
	.quick-service .desc {gap: var(--spacer2);}

	.qnaTab-conts .question a {min-height: 6.6rem; padding: 0 var(--spacer10) 0 0;}
	.qnaTab-conts .tit {font-size: var(--fz-title-xsm); line-height: 1.2;}
	.qnaTab-conts .tit::before {width: 2.8rem; height: 2.8rem;}
	.qnaTab-conts .answer {min-height: 10rem; padding: var(--spacer4);}
	.qnaTab-conts .answer *:not(th, td) {padding-left: 0;}
	.qnaTab-conts .answer:before {display: none;}
	.qnaTab-conts .answer table * {font-size: var(--fz-body-xsm);}
	.qnaTab-conts .table thead tr th {height: 3rem;}


	.search-service {padding: var(--spacer5) var(--spacer3); gap: var(--spacer2);}
	.search-service .m-col {flex-direction: column; gap: var(--spacer5);}
	.search-service .btn.primary {width: 100%;}
	.search-service .align-row label {min-width: 3rem;}
	.search-service ~ .tab {margin-bottom: var(--spacer5);}
	.search-service ~ .service-list-sch {margin-top: 0; margin-bottom: var(--spacer3);}
	.search-service + .service-list-sch .page-cnt-wrap {flex-wrap: nowrap; padding-top: 0;}
	.service-list-sch {padding-top: 0;margin-bottom: var(--spacer3);}
	.service-list-sch .page-cnt-wrap {flex-wrap: wrap; gap: var(--spacer2); padding-top: var(--spacer2);}
	.service-list-sch .page-cnt-wrap .align-row select {max-width: inherit;}
	.service-list-sch .page-cnt-wrap .align-row select.sm {max-width: 8rem;}
	.sch .ico-sch {min-width: 1.5rem; min-height: 1.5rem; right: var(--spacer3);}
	.sch-input .ico-sch {right: 2.4rem; width: 2rem; height: 2rem;}


	.popup, .voucher-apply li, .link-list ul li, .search-service, .file-form.view {border-radius: var(--rd-6);}

	.search-result,
	.search-result .desc-box {padding-top: var(--spacer5);}
	.search-result .result img {width: 6rem;}
	.search-result .desc-box img {display: none;}
	.search-result .sch-result-tit {margin: var(--spacer7) 0;}
	.search-result .desc-list {gap: var(--spacer1);}
	.search-result .desc-list li {padding-left: var(--spacer3); font-size: var(--fz-body-xsm) !important;}
	.search-result .desc-list li::before {top: 0.9rem; left: 0.6rem; width: 0.3rem; height: 0.3rem;}
	.search-result .desc {}

	.service-list ul {display: flex; flex-wrap: wrap; gap: var(--spacer2); grid-template-columns: 1fr; width: inherit !important;}
	.service-list ul li {flex: 1 1 47%; border-radius: 0;}
	.service-list ul .d-card .c-category {min-height: 3.2rem; max-height: 3.2rem; line-height: 1.3;}
	.service-list ul .d-card .c-price .price {gap: var(--spacer2) var(--spacer4); flex-wrap: wrap;}

	.align-col {gap: var(--spacer2); flex: 1 1 100%;}
	.align-row .tit-s {min-width: inherit;}

	.input-box {padding: var(--spacer4) var(--spacer1); border-left: 0; border-right: 0; border-radius: 0; border-color: var(--table-bd);}
	.input-box .grid .align-row {gap: 0; grid-template-columns: 1fr;}
	.input-box .grid .desc-list li::before {top: 1rem; left: 0.6rem; width: 0.4rem;}
	.input-box.line {padding: var(--spacer5) 0;}
	.input-box.bg {padding: var(--spacer5);}
	.input-box.line > .align-col {max-width: 100%;}
	.input-box .md {max-width: 100%;}
	.input-box .sm {width: 50%; max-width: 30rem; gap: var(--spacer2) !important; flex-wrap: nowrap !important;}
	.input-box .md .align-row,
	.input-box .sm .align-row {gap: var(--spacer2) !important; align-items: center; flex-wrap: nowrap !important;}
	.input-box .align-col {gap: var(--spacer2); flex: 1 1 100%;}
	.input-box > .align-col {gap: var(--spacer5);}
	.input-box .align-col > .align-row {gap: var(--spacer5); flex-wrap: wrap;}
	.input-box .align-col > .align-row .btn.blue {min-width: inherit;}
	.input-box .align-row .desc {font-size: var(--fz-body-xsm);}
	.input-box .desc-list {padding: var(--spacer2) 0 !important;}
	.input-box .num-cnt {top: 0.6rem; right: 0.5rem;}
	.iptBox {flex-wrap: wrap;}

	.input-box-bd .sec-tit-s {padding: var(--spacer3) var(--spacer4);}
	.input-box-bd:not(:last-of-type) {margin-bottom: var(--spacer2) !important;}
	.input-box-bd.mb80 {margin-bottom: var(--spacer15) !important;}
	.input-box-bd .description {padding: 0 var(--spacer4) var(--spacer4);}
	.input-box-bd .description .align-row {grid-template-columns: 1fr; gap: var(--spacer2) var(--spacer1); padding: 0;}
	.input-box-bd .description > .align-row {padding-top: var(--spacer3); padding-bottom: var(--spacer4);}
	.input-box-bd .md {max-width: 100%;}
	.input-box-bd .table-comment {margin-top: var(--spacer2);}

	.grid .component:not(:last-of-type) .table::after {display: none;}
	.grid .table thead ~ tbody tr td {padding: var(--spacer3);}
	.grid .table thead ~ tbody tr td .desc-list .none {display: none;}

	.possible, .impossible {min-height: 7rem; font-size: var(--fz-title-md);}
	.possible div::before, .impossible div::before {left: -3.5rem; width: 2.8rem; height: 2.8rem;}


	.residentNum-wrap {gap: var(--spacer6); padding: var(--spacer5) var(--spacer1);}
	.residentNum-wrap > .align-col > .align-row {flex-wrap: wrap;}
	.residentNum-wrap .table-comment {margin: 0; padding: 0;}

	.flx {padding: var(--spacer5);}
	.flx > ul {gap: var(--spacer5);}
	.flx > ul > li {flex-wrap: wrap;}
	.flx .table-comment {flex: 1 1 100%;}
	.flx .tit {max-width: 100%;}

	.lbl-prd-li {flex-wrap: wrap; gap: var(--spacer2); padding: 0; border-radius: 0; background-color: transparent;}
	.lbl-prd-li .prd-li {gap: var(--spacer1); padding: var(--spacer2); background-color: var(--table-bg);}
	.lbl-prd-li .prd-li > li {min-height: 2.4rem; padding: 0 var(--spacer2); border: 0.1rem solid var(--table-bd); font-size: var(--fz-body-xsm);}

	.content {margin-top: 0;}
	.detail-info {padding: 0; border: 0;}
	.detail-info .row {gap: var(--spacer2);}
	.detail-info.ty02 .item:first-child {flex: 1 1 100%;}
    .detail-info .item {gap: 0;}
	.detail-info .item .tit {min-width: 10rem; font-weight: 400;}
	.detail-info .item .tit::before {top: 0.8rem;}
    .detail-info .item .info {padding-left: var(--spacer6);}

	.description {flex-wrap: wrap; padding: var(--spacer4) var(--spacer2); border-left: 0; border-right: 0; border-radius: 0; margin-bottom: var(--spacer5);}
	.description .align-row .tit {min-width: 10rem;}
	.description * {font-size: var(--fz-body-sm) !important;}

	.table-wrap:not(.popup .table-wrap, .form-wrap) {overflow-x: scroll;}
	.table-wrap:not(.popup .table-wrap) .table:not(.desc-wrap .table, .view, .form) {width: 100%; min-width: 87rem; border-collapse: collapse;}
	.table {}
	.table ~ .table-comment {margin-left: 0;}
	.table ~ .table-comment + .sec-tit {margin-top: var(--spacer20);}
	.table ~ .table-comment ~ .table-comment {margin-top: var(--spacer3);}
	.table thead .btn.blue {position: absolute; top: 1rem; right: 1rem; min-height: var(--btn-h-xxsm);}
	.table .cnt {right: 1.2rem;}
	.table-comment {margin: var(--spacer2) 0; padding: 0;}
	.table-comment li {padding: 0 0 0 var(--spacer4) !important; margin: 0; font-size: var(--fz-body-xsm) !important; line-height: 1.7;}
	.table-comment li:not(.ico-info2) {padding-left: 0 !important;}
	.table td > *:where(input, select, .align-col, .align-row) {flex-wrap: wrap;}
	.table td > *:where(input, select, button, .align-col, .align-row) input:not([type=radio], [type=checkbox]), select {min-width: inherit;}

	.form-control.right {padding-right: var(--spacer7) !important;}
	.table tr {}
	.table tr th {}
	.table th, .table td {font-size: var(--fz-body-sm);}
	.table thead tr th, .table thead .tit {font-size: var(--fz-body-sm) !important;}
	.table tbody tr td {height: inherit; padding: var(--spacer2);}
	.table tbody tr td .form-check {justify-content: flex-start; flex-wrap: wrap;}
	.table .tit, .table-wrap .tit a {-webkit-line-clamp: 1; overflow: hidden;}
	.table .right {padding-right: var(--spacer3);}
	.table .finish {font-size: var(--fz-body-xsm) !important;}
	/*.table-wrap.list .table col {display: none;}
	.table-wrap.list .table tr {display: grid;}
	.table-wrap.list .table thead tr:first-of-type {border-bottom: 0;}
	.table-wrap.list .table thead tr {display: flex;}
	.table-wrap.list .table th, .table-wrap.list .table td {display: flex; align-items: center; justify-content: center; width: 100%; min-width: fit-content;}
	.table-wrap.list .table td {display: -webkit-box; padding: var(--spacer1) var(--spacer3); text-align: left !important; justify-content: flex-start !important; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
	.table-wrap.list .table td:first-of-type {border-left: 0.1rem solid var(--table-bd) !important;}
	.table-wrap.list .table td:last-of-type {border-right: 0.1rem solid var(--table-bd) !important;}*/

	.table.list {display: block;}
	.table.list .table thead {display: none;}
	.table.list thead {position: absolute; border:none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; width: 1px;}
	.table.list tbody {display: block; border-top: 0.1rem solid var(--table-bd);}
	.table.list tbody tr {display: flex; flex-direction: column; gap: var(--spacer1); position: relative; min-height: 8rem; padding: var(--spacer2) 0; border-bottom: 0.1rem solid var(--table-bd);}
	.table.list tbody td {display: flex; flex-wrap: nowrap; align-items: flex-start; gap: var(--spacer1); height: auto !important; padding: 0; text-align:left; color: var(--gray-60); font-weight: 400;}
	.table.list tbody td::before {content: attr(data-label); flex-shrink: 0; margin-right: auto; padding-right: var(--spacer5); color: #6D7882;}
	.table.list tbody td * {min-width: 3rem; margin: 0;}
	.table.list tbody td > a {display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
	.table.list tbody td br {display: none;}
	.table.lg tbody td {height: auto !important;}

	.table.form thead {display: block; height: inherit;}
	.table.form thead .desc-list {margin-bottom: 0;}
	.table.form colgroup col {width: 100% !important;}
	.table.form thead tr:first-of-type {border: 0;}
	.table.form thead tr th {padding: var(--spacer3);}
	.table.form tbody tr {display: grid; width: 100%; border: 0;}
	.table.form tbody tr:first-of-type th:first-of-type {border-top: 0.1rem solid var(--table-bd);}
	.table.form thead .desc-list li {font-size: var(--fz-body-xsm) !important;}
	.table.form thead .desc-list li:last-of-type {margin-bottom: 0;}
	.table.form col:first-of-type ~ col {display: none;}
	.table.form tr th {border-left: 0 !important; border-right: 0;}
	.table.form tr td {height: inherit; padding: var(--spacer3) !important; border-left: 0; border-right: 0 !important; border-bottom: 0.1rem solid var(--table-bd);}
	.table.form td .align-col .tit {align-items: flex-start; margin-bottom: 0;}
	.table.form td .align-col .tit .btn {position: static;}
	.table.form td .align-col .tit span + .btn {position: absolute; top: -0.2rem; right: -0.2rem; min-width: 3rem; min-height: 2rem;}
	.table.form td .align-row {min-width: fit-content; flex-wrap: wrap;}
	.table.form td .align-row .tit {min-width: fit-content;}
	.table.form td label + .align-row {flex-wrap: nowrap;}
	.table.form td .align-col {padding: 0;}
	.table.form td .align-col :where(.c-red, .c-blue) {margin: 0;}

	.table.view .title-top .tit {font-size: var(--fz-title-lg);}
	.table.view .title-top dl:not(:last-of-type)::after {height: 1rem;}

	.menu-info-wrap .menu-slide-wrap,
	.detail-info,
	.form-wrap:not(:last-of-type) {margin-bottom: var(--spacer8);}

	.desc-list {gap: 0; margin-bottom: var(--spacer3); font-size: var(--fz-body-sm) !important;}
	.desc-list li {font-size: var(--fz-body-sm) !important;}
	.desc-list li::before, .detail-info .item .tit::before {top: 0.8rem; width: 0.3rem; height: 0.3rem;}
	.desc-list li::before {left: 0.5rem;}
	.ico-info2::before {top: 0.4rem !important; width: 1.1rem; height: 1.1rem;}
	.ico-info2.align {align-items: flex-start;}
	.info-list li::before {top: 1rem; left: 0.3rem; width: 0.2rem; height: 0.2rem;}

	.paging {gap: var(--spacer5); margin-top: var(--spacer10);}
	.paging .page-links {width: 100%; order: 0; gap: 0; font-size: var(--fz-body-xsm);}
	.paging .page-links .page-link {min-width: 3rem; height: 3rem;}
	.paging .page-links .page-link.active {font-weight: 300;}
	.paging .page-navi.next {order: 2;}
	.paging .page-navi {min-width: 5rem; height: 3.4rem;}

	.pop-wrap .popup .swiper-pagination {top: -2.5rem;}
	.pop-wrap [class^=swiper-button-] {width: 4rem; height: 4rem;}
	.pop-wrap .swiper-button-prev {left: 0.5rem;}
	.pop-wrap .swiper-button-next {right: 0.5rem;}
	.pop-wrap .swiper-button-prev::after,
	.pop-wrap .swiper-button-next::after {width: 2.5rem; height: 2.5rem;}
	.pop-wrap .btn-wrap .btn {min-width: 6rem !important; min-height: var(--btn-h-xsm) !important;}
	.pop-wrap .popupSwiper a {min-height: inherit;}
	.pop-wrap .popupSwiper .btn-wrap .submit {font-weight: 500;}
	.popup {max-width: 95% !important; max-height: inherit; min-width: inherit; min-height: inherit;}
	.popup .tit-s {margin-bottom: var(--spacer1); font-size: var(--fz-title-xsm);}
	.popup h3.tit {min-height: 4rem; font-size: var(--fz-body-sm);}
	.popup .bg {min-height: inherit; padding: var(--spacer5) var(--spacer5) var(--spacer8);}
	.popup .tit .ico-del {position: absolute; top: 50%; right: var(--spacer3); width: inherit; min-width: 1.2rem; min-height: 1.2rem; transform: translateY(-50%);}
	.popup .tit .ico-del::after {width: 1.2rem !important; height: 1.2rem !important; background-size: contain;}
	.popup .tit .lg.ico-del {right: 2rem; min-width: 2.6rem !important; min-height: 2.6rem !important;}
	.popup .tit .lg.ico-del::after {width: 2rem !important; height: 2rem !important;}
	.popup .scroll {max-height: 46rem;}
	.popup .contact-box {min-height: inherit; max-height: 66vh; padding: var(--spacer1); border-bottom-width: 1rem;}
	.popup .contact-box dl {gap: var(--spacer1);}
	.popup .contact-box dl dt .file-total, .popup .contact-box .txt-cnt {font-size: var(--fz-body-xsm);}
	.popup .table tr th, .popup .table tr td {padding: var(--spacer1); font-size: var(--fz-body-xsm);}
    .popup .table.amount-form tr {display: grid; min-width: -webkit-fill-available; border-bottom: 1rem solid var(--white);}
    .popup .table.amount-form tr th, .popup .table.amount-form tr td {border-left: 0; border-right: 0;}
	.popup .input-unit-wrap input {padding-right: var(--spacer6) !important;}
	.popup .page-btn-wrap {padding: var(--spacer2) 0;}

	.main-sect .inner {padding: var(--spacer8) 0; overflow: hidden;}
	.main-sect .tit-l {margin-bottom: var(--spacer7); font-size: var(--fz-title-xlg);}
	.main-sect .d-card {box-shadow: none;}
	.main-sect.banner .tit-l {font-size: var(--fz-title-xxxlg);}
	.voucher-apply {gap: var(--spacer3);}
	.voucher-apply li {flex: 1 1 100%; box-shadow: none;}
	.voucher-apply li .top {margin-bottom: 0;}
	.voucher-apply li .desc {dn}
	.voucher-apply li .quick-box {min-height: 21rem; padding: calc(var(--spacer3) + 2vw) calc(var(--spacer2) + 3vw) calc(var(--spacer3) + 2vw);}
	.voucher-apply li .quick-box::after {top: inherit; right: 0; bottom: -1rem; min-width: calc(31rem / 1.8); min-height: calc(27rem / 1.8); transform: none;}
	.voucher-apply li .btn {padding-left: var(--spacer9); z-index: 1;}
	.voucher-apply li .btn::before {max-width: 3rem; min-height: 3rem;}
	.voucher-apply li .btn::after {min-width: 1.3rem; height: 0.9rem;}
	.voucher-apply li .tit {display: flex; align-items: center; gap: var(--spacer1); font-size: var(--fz-title-xxlg);}
	.voucher-swiper-in .swiper-button-prev, .voucher-swiper-in .swiper-button-next {top: -3.1rem; left: inherit; right: inherit; width: 2.6rem; height: 2.6rem;}
	.voucher-swiper-in .d-card {border: 0;}
	.voucher-swiper-in .swiper-button-next {left: 3rem;}
	.voucher-swiper-in [class^=swiper-button-]::after {width: 0.9rem; height: 0.9rem; background-size: contain;}
	.voucher-swiper-in .swiper-pagination {order: 1;}

	.swiper-pagination {margin-top: var(--spacer4);}
	.swiper-pagination .swiper-pagination-bullet {width: 1rem; height: 1rem;}

	.fs.xlg {font-size: var(--fz-title-md);}

	.sitemap .sitemap-list {display: flex; flex-wrap: wrap;}
	.sitemap .sitemap-list > li {flex-direction: column; flex: 1 1 51%;}
	.sitemap .one-depth {display: flex; align-items: center; max-width: 100%; min-height: 6rem; padding: var(--spacer3); border-right: 0; font-size: var(--fz-body-md);}
	.sitemap .list {display: flex; flex-wrap: wrap; gap: var(--spacer4); padding: var(--spacer2) var(--spacer3) var(--spacer7);}
	.sitemap .list .two-depth {gap: var(--spacer2); min-width: 18rem;}
	.sitemap .list .two-depth > li {padding-left: var(--spacer4);}
	.sitemap .list .two-depth > li > a::before {top: 0.5rem; left: 0.4rem; width: 0.3rem; height: 0.3rem;}
	.sitemap .list .three-depth {gap: var(--spacer1);}
	.sitemap .list .three-depth li {padding-left: var(--spacer3);}
	.sitemap .list .three-depth li a::before {top: 1rem; left: 0; width: 0.5rem;}

	.business-num ~ .align-col .align-row:not(:first-of-type) .align-row p::before {display: none;}

	.login-step {margin-top: 2.4rem;}
	.login-step li {font-size: 10px; position: relative; min-height: 4rem; height: auto;}
	.login-step li a {flex-direction: column; align-items: flex-start; justify-content: flex-start; font-size: 1.2rem; padding: 0.8rem; line-height: 1.8rem;}
    .login-step li:after {display: none;}
    .login-step li.active:before {display: none;}
    .login-step li b {align-self: flex-start;}
    .login-step li b + * {align-self: flex-start;}
    .login-step.center li{align-items: center;}

	.login-form .conts-wrap {padding: var(--spacer7) 0;}
	.login-form .desc {margin-bottom: var(--spacer5); font-size: var(--fz-title-xsm);}
	.login-form .info-list {gap: var(--spacer1);}
	.login-form .info-list li {line-height: 1.5;}
	.login-form .login .primary {min-height: var(--btn-h-sm); font-size: var(--fz-body-sm);}
	.login-form .login .align-row li:not(:last-of-type)::after {display: none;}
	.login-form .align-row input {min-height: var(--btn-h-sm);}
	.login-form .align-row > .align-col{gap: var(--spacer3) 0;}

	#footer > .inner {flex-wrap: wrap; padding: var(--spacer6) var(--spacer4);}
	#footer .f-logo {height: 2.4rem;}
	#footer .f-btm .f-link {margin-bottom: 0;}
	#footer .f-btm .f-link .f-menu {gap: 0 var(--spacer3);}
	#footer .f-btm .f-info {font-size: var(--fz-body-xsm);}

	.info-box .li-bullet {grid-template-columns: repeat(1,1fr); gap: var(--spacer1);}
	.cert-info .program-info {padding: 0;}
	.cert-info .program-info img {float:none; margin: 0 0 var(--spacer6);}
	.cert-info .program-info .info-txt {padding: var(--spacer6) 0 0; border-width: 0.1rem 0 0 0;}

}