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

* { word-break: break-all;}
*::before, *::after {box-sizing: border-box;}
li::marker {display: none !important;}

a:focus, button:focus, .swiper-pagination:focus {
	outline-offset: -0.2rem;
	outline: 2px solid var(--primary-50);
	border-radius: var(--btn-rd-lg);
	transition: var(--transition-1) !important;
}


div::-webkit-scrollbar {width: 0.6rem;}
div::-webkit-scrollbar-thumb {background: var(--gray-30); 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: 400; word-break: keep-all; word-wrap: break-word; -webkit-tap-highlight-color: transparent;}
body {position: relative; font-size: var(--fz-body-md);}
a {color: var(--gray-90);}
.left {justify-content: flex-start !important;}
.center {justify-content: center !important;}

.right {justify-content: flex-end !important;}
.c-gray {color: var(--gray-60) !important;}
.c-red {color: var(--red) !important; margin: 0 var(--spacer1); font-weight: 400;}
.c-red2 {color: var(--red2) !important;}
.c-blue {color: var(--information) !important; margin: 0 var(--spacer1); font-weight: 600;}
.bold {color: var(--black) !important; font-weight: 600;}
.align-top2 {align-items: flex-start !important; padding-top: var(--spacer1);}

textarea {width: 100% !important; min-height: 17rem; max-height: 20rem !important; padding: var(--spacer4) !important;}
textarea.lg {max-height: 30rem !important;}
input[type=number] {text-align: right; padding-right: var(--spacer1); color: var(--gray-60);}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {width: 1rem; margin-right: 2rem; appearance: none;}
select, textarea::placeholder,
input[type=text]::placeholder,
input[type=password]::placeholder,
input[type=email]::placeholder,
input[type=tel]::placeholder {color: var(--gray-50); font-size: var(--fz-body-sm);}
input[type=password]::placeholder {color: var(--gray-50);}
input[type=tel], input[type=number], input[type=date], input[type=text], input[type=password], select {border-radius: var(--rd-4); font-size: var(--fz-body-sm); color: var(--gray-90);}
button, input[type=submit], input[type=button] {overflow: visible; margin: 0; background-color: transparent; border: none; cursor: pointer; font: inherit;}
button:hover {background-color: var(--secondary-5); transition: var(--transition-1);}
button:active {background-color: var(--secondary-10); transition: var(--transition-2);}

input[type=radio], input[type=checkbox] {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;}
label {cursor: pointer;}
li a {display: flex; height: 100%;}

.table-wrap.list tbody tr:hover {background-color: var(--primary-5);}
.info-text {margin-bottom: var(--spacer2); font-size: var(--fz-body-md); line-height: 1.5;}
.info-text ~ .table-wrap .input-box .form-group {gap: var(--spacer2); padding: 0; border: 0;}
.info-text ~ .table-wrap .table {margin-top: var(--spacer5); margin-bottom: 0;}
.info-text ~ .table-wrap .table input {min-width: inherit !important; width: 100% !important;}
.info-text ~ .table-wrap .btn-wrap {gap: var(--spacer1); justify-content: center !important; margin: var(--spacer10) 0 var(--spacer15);}
.info-text ~ .table-wrap .btn-wrap .btn {min-width: 18rem; min-height: 5.6rem; background-color: #EFF5FF; color: #246BEB;}
.info-text ~ .table-wrap .btn-wrap .btn-primary {background-color: #246BEB; color: var(--white);}

/* radio */
.form-check-box {display: flex; align-items: center;}
.form-check-box .form-group {flex-direction: row;}
.form-check {display: flex; align-items: center; gap: var(--spacer3) var(--spacer1);}
.form-check input[type=radio] ~ label {position: relative; display: inline-flex; min-width: auto; min-height: var(--rdo-size-md); padding-left: calc(var(--rdo-size-md) + var(--spacer2)); font-size: var(--rdo-fz-md); line-height: var(--rdo-size-md);}
.form-check input[type=radio] ~ label:before {position: absolute; top: 0; left: 0; width: var(--rdo-size-md); height: var(--rdo-size-md); background-color: var(--white); border: 1px solid var(--gray-60); border-radius: var(--rd-full);}
.form-check input[type=radio] ~ label:before,
.form-check input[type=radio] ~ label:after {content: ''; display: block; transition: 0.15s cubic-bezier(0.4, 0, 0.23, 1);}
.form-check input[type=radio] ~ label:before,
.form-check input[type=radio] ~ label:after {z-index: 1;}
.form-check input[type=radio] ~ 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);}

.form-check.lg > [type=radio] ~ label {font-size: var(--rdo-fz-lg); line-height: var(--rdo-size-lg); min-height: var(--rdo-size-lg); padding-left: calc(var(--rdo-size-lg) + var(--spacer2));}
.form-check.lg > [type=radio] ~ label::before {width: var(--rdo-size-lg); height: var(--rdo-size-lg);}
.form-check.lg > [type=radio] ~ label::after {top: calc((var(--rdo-size-lg) - var(--rdo-chk-lg)) / 2); left: calc((var(--rdo-size-lg) - var(--rdo-chk-lg)) / 2); width: var(--rdo-chk-lg); height: var(--rdo-chk-lg);}
.form-check input[type=radio]:checked ~ label:before {border-color: var(--primary);}
.form-check input[type=radio]:checked ~ label:after {background-color: var(--primary);}
.form-check input[type=radio]:focus ~ label:before {outline-offset: 0.4rem; outline: 0.2rem solid var(--primary-50);}


/* checkbox */
.check-list-wrap {display: grid; gap: var(--spacer10); padding: var(--spacer10); margin-bottom: var(--spacer8); background-color: var(--white); border: 0.1rem solid var(--gray-20); border-left: 0; border-right: 0;}
.check-list-wrap .check-list {display: flex; flex: 1; gap: var(--spacer4); margin-bottom: var(--spcaer10);}
.check-list-wrap .check-list .tit {display: flex; position: relative; width: 100%; padding-left: var(--spacer3); font-size: var(--fz-title-md); font-weight: 600;}
.check-list-wrap .check-list .tit::before {content: ''; position: absolute; top: 0.8rem; left: 0; width: 0.3rem; height: 1.3rem; background-color: var(--primary-50);}
.check-list-wrap .check-list .form-group {position: relative; flex: 1; grid-column-gap: var(--spacer4); grid-row-gap: var(--spacer6);}
.check-list-wrap .check-list .form-group .form-conts {display: grid; grid-template-columns: repeat(8, 1fr); grid-column-gap: var(--spacer6); grid-row-gap: var(--spacer5);}
input[type=checkbox] ~ label, input[type=checkbox] + span, input[type=checkbox] ~ a {position: relative; display: inline-flex; align-items: center; width: max-content; min-width: 2rem; min-height: var(--rdo-size-md); padding-left: calc(var(--rdo-size-md) + var(--spacer2)); font-size: var(--rdo-fz-md); line-height: var(--rdo-size-md); color: var(--gray-90);}
input[type=checkbox] ~ label::before, input[type=checkbox] + span::before, input[type=checkbox] ~ a::before {position: absolute; top: 50%; left: 0; width: 1.8rem; height: 1.8rem; background-color: var(--white); border: 0.1rem solid var(--gray-60); border-radius: var(--rd-4); transform: translateY(-50%); z-index: 1;}
input[type=checkbox] ~ label::before:hover, input[type=checkbox] + span::before:hover {cursor: pointer;}
input[type=checkbox] ~ label::after, input[type=checkbox] + span::after, input[type=checkbox] ~ a::after {position: absolute; top: calc((var(--chk-size-lg) - var(--chk-primary-chk-md)) / 2); left: calc((var(--chk-size-lg) - var(--chk-primary-chk-md)) / 2); width: var(--chk-primary-chk-sm); height: var(--chk-primary-chk-sm); /* background: url(/static/images/kosmes/ico_check_primary_checked.svg) no-repeat 0 0; */ background-size: contain; z-index: 1; opacity: 0;}
input[type=checkbox] ~ label::before, input[type=checkbox] ~ label::after, input[type=checkbox] ~ span::before, input[type=checkbox] ~ a::before {content: ''; display: block; transition: 0.15s cubic-bezier(0.4, 0, 0.23, 1);}
input[type=checkbox]:checked ~ label::before, input[type=checkbox]:checked + span::before, input[type=checkbox]:checked ~ a::before {border-color: var(--primary-50); background: var(--primary-50) url(/static/images/kosmes/ico_check_primary_checked.svg) no-repeat center; background-size: 59% 56%;}
input[type=checkbox]:checked ~ label::after, input[type=checkbox]:checked + span::after, input[type=checkbox]:checked ~ a::after {opacity: 1; transition-delay: 0.1s;}
input[type=checkbox]:focus ~ label::before, input[type=checkbox]:focus + span::before, input[type=checkbox]:focus ~ a::before {outline-offset: 0.4rem; outline: 0.2rem solid var(--primary-50);}
input[type=checkbox]:disabled ~ label::before, input[type=checkbox]:disabled + span::before, input[type=checkbox]:disabled ~ a::before {background-color: var(--gray-30); border-color: var(--gray-40);}


.error .form-control {border-color: var(--red);}
.error .form-control:focus {outline-color: var(--red);}
.error .form-tit .desc {color: var(--red) !important;}
.error .form-tit .desc::before {background-image: url(/static/images/kosmes/ico_point_error.svg) !important;}
.form-control, .form-date {position: relative; width: 100%; height: 3.8rem; padding: 0 var(--input-px-md); background-color: var(--white); border: 0.1rem solid var(--gray-50); border-radius: var(--rd-4); font-family: inherit; color: var(--gray-90); transition: var(--transition-4);}
.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-date {min-width: 18.5rem; font-size: var(--input-fz-md); appearance: none; background: var(--white) url(/static/images/kosmes/ico_calendar.svg) no-repeat calc(100% - 1.44rem) 46%; background-size: 2rem;}
.form-date::-webkit-calendar-picker-indicator {background: none;}
.form-date::-webkit-calendar-picker-indicator:focus {outline-offset: 0.2rem; outline-color: var(--primary-50);}
.form-date::-webkit-calendar-picker-indicator:hover {cursor: pointer;}


.form-select {min-width: 14.5rem; width: 100%; height: 3.8rem; padding: var(--select-pd-md); background-color: var(--white); background-image: url(/static/images/kosmes/ico_arrow_select.svg); background-repeat: no-repeat; background-position: center right var(--select-rn-lg); border: 0.1rem solid var(--gray-50); font-family: inherit; opacity: 1; appearance: none;}
.form-select:hover {cursor: pointer;}
.form-select[disabled] {background-color: var(--gray-30); border-color: var(--gray-40); color: var(--gray-60);}
.form-date:focus,
.form-select:focus {border-color: var(--primary-50); border-width: 2px; outline-color: var(--primary-50);}
.form-select[disabled]:focus {border-color: var(--gray-70);}
.form-select.sm {max-width: calc(25% - 6.4rem);}
.form-select.md {max-width: calc(50% - 6.4rem);}

.form-wrap:not(:last-of-type) {margin-bottom: var(--spacer20);}
.form-wrap .form-group {padding: var(--spacer7) 0; grid-row-gap: var(--spacer6);}
.form-wrap .flex {display: grid; grid-template-columns: 2.1fr 3fr; grid-column-gap: var(--spacer15); grid-row-gap: var(--spacer8);}
.form-wrap .tit .c-red {position: absolute; top: 0.2rem; right: -1.2rem; margin: 0;}
.form-wrap .form-group:not(:last-of-type) {border-bottom: 0.1rem solid var(--gray-20);}
.form-wrap .form-group.addr {border-bottom: 0;}
.form-wrap .table {margin-bottom: 0;}
.form-wrap .form-group .col {display: grid; grid-template-columns: 1fr;}
.form-wrap .form-group .tit-s {display: flex; align-items: center; position: relative; min-width: 15rem; padding-left: var(--spacer3); color: var(--gray-70);}
.form-wrap .form-group .tit-s.md {min-width: 16rem;}
.form-wrap .form-group .tit-s + .form-conts .tit-s {display: flex; align-items: center; min-width: 11rem; padding: 0; color: var(--gray-90);}
.form-wrap .form-group .tit-s + .form-conts .tit-s::before {display: none;}
.form-wrap .form-group .tit-s::before {content: ''; position: absolute; top: 50%; left: 0; width: 0.4rem; height: 0.4rem; border-radius: var(--rd-12); background-color: var(--gray-50); transform: translateY(-50%);}
.form-wrap .form-group .tit span {position: relative;}
.form-wrap .form-group .tit .c-red {/*top: 0.2rem; right: -1.2rem;*/}
.form-wrap .form-group .info-list .c-red {position: static !important; margin-left: var(--spacer1);}
.form-wrap .form-group .tit::before {display: none;}
.form-wrap .form-group .table-tit {display: flex; grid-template-columns: 0.55fr 1fr 1fr 1fr 1fr; gap: var(--spacer3); width: 100%; margin: var(--spacer4) 0 var(--spacer5);}
.form-wrap .form-group .table-tit ~ .user-info-list .sm {min-width: inherit;}
.form-wrap .form-group .table-tit .col {display: flex; align-items: center; justify-content: center; gap: 0; width: 100%; text-align: center;}
.form-wrap .form-group .table-tit .col:first-of-type {justify-content: flex-start; max-width: 12rem;}
.form-wrap .form-group .col2 {grid-template-columns: 0.5fr 1fr 1fr 1fr 1fr;}
.form-wrap .form-group .col3 {grid-template-columns: 0.6fr 2fr 1fr 1fr;}
.form-wrap .form-group .col3.table-tit {display: grid;}
.form-wrap .form-group .col3 ~ .user-info-list .tit-s br {display: none;}
.form-wrap .form-group .col3 ~ .user-info-list:last-of-type .limit {margin-right: var(--spacer3);}
.form-wrap .form-group .col4 {grid-template-columns: 1fr 1fr 0.4fr 1fr;}
.form-wrap .form-group .col5 {grid-template-columns: 1.1fr 1fr 1fr 1fr 1fr;}
.form-wrap .form-group.agree-wrap {display: flex; gap: var(--spacer10) !important;}
.form-wrap .form-group.agree-wrap strong {position: static; margin: 0 var(--spacer1); font-size: var(--fz-body-sm); font-weight: 400;}
.form-wrap .form-group.agree-wrap .agree-check {gap: var(--spacer7); padding-left: var(--spacer2);}

.form-wrap .agree-wrap2 {display: grid; gap: var(--spacer3);}
.form-wrap .form-group .agree-check {grid-column-gap: var(--spacer10); grid-row-gap: var(--spacer3); padding: 0;}
.form-wrap .form-group .agree-check .tit {display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacer3); position: relative; width: fit-content; padding: 0; padding-right: var(--spacer3);}
.form-wrap .form-group .agree-check .tit + .info-list {margin-top: var(--spacer2); padding: 0;}
.form-wrap .form-group .agree-check .tit + .info-list li:last-of-type {margin-bottom: 0;}
.form-wrap .form-group .agree-check .page-btn-wrap {margin: var(--spacer5) 0 var(--spacer8);}
.form-wrap .form-group .agree-check .right {display: flex; justify-content: space-between !important; width: 100% !important; padding-right: 0 !important;}
.form-wrap .form-group .agree-check input.right {padding-right: var(--spacer8) !important; color: var(--gray-60);}
.form-wrap .form-group .expect {text-align: right; font-size: var(--fz-title-md);}
.form-wrap .form-group .expect .total-sum {font-size: var(--fz-title-xlg); color: var(--primary-50);}

.form-wrap .info-list {gap: var(--spacer5); 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-group {display: flex; flex-direction: column; grid-column-gap: var(--spacer6); grid-row-gap: var(--spacer2); width: inherit;}
.form-group .flex {display: flex; align-items: center; gap: var(--spacer2); width: 100%;}
.form-group .grid .form-conts .form-conts {display: flex; justify-content: flex-end; width: 100%;}
.form-group .grid .tit-s {padding-left: 0 !important; color: var(--gray-90) !important;}
.form-group .grid .tit-s::before {display: none;}
.form-group .grid .flex {display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacer5); text-align: right;}
.form-group .form-tit + .form-conts {gap: 0;}
.form-group .form-tit + .form-conts.xsm {grid-column-gap: var(--spacer2);}
.form-group .form-conts {display: flex; align-items: center; gap: var(--spacer3); position: relative; min-width: auto; width: 100%;}
.form-group .form-conts .limit-box {display: flex; align-items: center; justify-content: flex-end;}
.form-group .form-conts .limit-box .all {width: auto;}
.form-group .form-conts .limit-box .form-conts {align-items: center;}
.form-group .form-conts .limit-box .form-conts input {min-width: inherit !important;}
.form-group .form-conts .limit-box .form-conts + .form-conts {width: auto; min-width: 13rem;}
.form-group .form-conts .limit-box .form-conts + .form-conts .limit + .cnt {top: -1px; right: 0.5rem;}
.form-group .form-conts .form-date {max-width: 17rem; max-width: 100%;}
.form-group .form-conts label {display: flex; align-items: center; min-width: 10.7rem;}
.form-group .form-conts .ex {min-width: max-content;}
.form-group .form-control:placeholder-shown {display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; font-size: var(--fz-body-md);}
.form-group .form-conts.btn-ico-wrap .form-control {padding-right: var(--spacer14);}
.form-group .form-conts.btn-ico-wrap .valid, .form-group .form-conts.btn-ico-wrap .btn {min-height: auto;}
.form-group .form-conts.btn-ico-wrap .ico-pw-visible {position: absolute; top: 50%; right: 1.2rem; transform: translateY(-50%);}
.form-group .form-conts.btn-ico-wrap .valid {right: 5rem;}
.form-group .form-conts.btn-ico-wrap.xsm {gap: 0 !important;}
.form-group .form-conts.btn-ico-wrap.xsm .valid {position: absolute; right: 1.5rem;}
.form-group .link-group {display: flex; align-items: center; justify-content: center; flex-direction: row;}
.form-group .link-group > li + li {position: relative; margin-left: var(--spacer4); padding-left: var(--spacer4);}
.form-group .link-group > li + li::before {content: ''; position: absolute; top: 50%; left: 0; width: 0.1rem; height: 1.4rem; background-color: var(--gray-30); transform: translateY(-50%);}

.form-group.row .form-conts {flex-direction: row; gap: var(--spacer3);}
.form-group.row .form-conts.sm .form-select {max-width: 14rem;}
.form-group.row .form-conts .space {display: flex; align-items: center;}
.form-group.full {width: 100%; padding-left: 0 !important;}
.form-group.full:last-of-type {gap: var(--spacer2);}
.form-group.full.addr {grid-row-gap: var(--spacer2);}
.form-group.full .xsm {max-width: 38.5rem;}
.form-group.full .form-control {max-width: 100%;}
.form-group.lg {width: 100%; max-width: 56rem;}
.form-group.md {width: 100%; max-width: 49.4rem;}
.form-group.sm:not(:last-of-type) {width: auto;}

.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: 600;}
.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); font-weight: 400;}
.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/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 .form-conts .form-control {font-weight: 300;}
.form-group .form-conts .form-control::placeholder {font-size: var(--fz-body-sm);}
.form-group .form-conts .cnt {display: flex; align-items: center; position: absolute; top: 2px; right: 1.5rem; min-height: -webkit-fill-available; font-size: var(--fz-body-sm);}

.form-group .chk-area {align-items: center;}
.form-group .chk-area .sm {max-width: 16rem;}
.form-group .chk-area .tit-s {min-width: 15rem; padding-left: var(--spacer4);}
.form-group .chk-area .tit-s span {display: inline-flex; align-items: center; }
.form-group .chk-area .c-blue {font-weight: 400; font-size: var(--fz-body-sm);}
.form-group .chk-area .form-conts {align-items: normal; width: 100%;}
.form-group .chk-area .form-conts .limit {display: flex; align-items: center; width: max-content;}
.form-group .chk-area .form-conts .form-conts .form-control {max-width: 100%;}
.form-group .btn.sm {min-width: auto;}
.form-group .md {max-width: 25rem;}
.form-group .txt {display: flex; align-items: center; justify-content: center; width: 100%; min-height: 4rem; padding: 0 var(--spacer4); border: 0.1rem solid var(--gray-40); border-radius: var(--rd-8); color: var(--gray-50); font-size: var(--fz-body-md); background-color: var(--gray-10); line-height: 0;}
.form-group .txt.num {justify-content: flex-end;}
.form-group .txt.num.right {justify-content: flex-end !important; padding-right: var(--spacer9) !important;}

.search-service {display: grid; gap: var(--spacer4); padding: var(--spacer5) var(--spacer8); margin-bottom: var(--spacer22); background-color: #EDF1F5; border-radius: var(--rd-12);}
.search-service .left {display: grid; grid-template-columns: 1fr; gap: var(--spacer6);}
.search-service .right {}
.search-service .right label {justify-content: flex-end;}
.search-service .form-conts label {font-weight: 700;}
.search-service .search-list {display: grid; grid-template-columns: 1.48fr 1fr; gap: var(--spacer6);}
.search-service.full .search-list {grid-template-columns: 1fr 1fr;}
.search-service.full .search-list li:nth-of-type(2n+1) label {justify-content: flex-start;}
.search-service.full .search-list li:nth-of-type(2n+2) label {justify-content: flex-end;}
.search-service.full .search-list:first-of-type {grid-template-columns: auto;}

.search-service .search-info {/*display: grid; grid-template-columns: 3fr 0.5fr;*/display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--spacer6); padding-top: var(--spacer4); border-top: 0.1rem solid var(--gray-30);}
.search-service .search-info .left {display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacer5);}
.search-service .search-info .left .txt {color: var(--gray-80); font-size: var(--fz-body-sm); font-weight: 400;}
.search-service .search-info .left .txt span {display: block; color: var(--gray-80); font-size: var(--fz-body-md);}
.search-service .search-info .right {display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap: var(--spacer2);}
.search-service .search-info .right .btn {min-width: 8rem;}

.service-list-sch {}
.service-list-sch .page-cnt {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; margin-bottom: var(--spacer3);}
.service-list-sch .page-cnt .table-comment {display: flex; gap: var(--spacer1); justify-content: flex-end; justify-self: end; margin-top: 0; padding-left: 0;}
.service-list-sch .page-cnt .page-cnt-wrap {display: flex; align-items: center; gap: var(--spacer11);}
.service-list-sch .page-cnt .page-cnt-wrap .state-cnt {min-width: fit-content;}
.service-list-sch .page-cnt .page-cnt-wrap .state-cnt + div {display: flex; align-items: center; min-width: fit-content;}
.service-list-sch .page-cnt .page-cnt-wrap .state-cnt .cnt-box {display: flex; gap: var(--spacer2); position: relative; font-weight: 700;}
.service-list-sch .page-cnt .page-cnt-wrap .state-cnt .cnt-box::after {content: ''; position: absolute; top: 0.4rem; right: -2.4rem; width: 0.1rem; height: 1.6rem; background-color: var(--gray-30);}
.service-list-sch .page-cnt .page-cnt-wrap .state-cnt .cnt-box .all-cnt {display: block;}
.service-list-sch .page-cnt .page-cnt-wrap .state-cnt .cnt-box strong {font-weight: 400;}
.service-list-sch .page-cnt .page-cnt-wrap label {margin-right: var(--spacer1); font-weight: 700;}
.service-list-sch .page-cnt .page-cnt-wrap label:hover {cursor: default;}
.service-list-sch .page-cnt .page-cnt-wrap .form-select {min-width: 6rem; max-width: 6rem; height: var(--select-h-xsm); padding: 0; padding-left: var(--spacer1); border-radius: 0; font-size: var(--fz-body-md); background-position: 4.2rem 0.6rem; background-size: 1.5rem; border: none; color: var(--gray-90);}
.service-list-sch .page-cnt .form-conts {display: flex; align-items: flex-end; justify-content: flex-end; height: fit-content;}
.service-list-sch .page-cnt .form-conts .form-control {max-width: 36rem;}
.service-list-sch .page-cnt .form-conts .form-control ~ .ico-sch {top: 50%; right: var(--spacer4); width: 2rem; height: 2rem;}

.popup .search-service {max-width: 65rem;}
.popup .search-service .left {max-width: 60rem;}

/* 서비스 썸네일 리스트 */
.service-list {height: 100%; margin-bottom: var(--spacer10);}
.service-list ul {display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--spacer6);}
.service-list ul li {line-height: 0;}
.service-list ul li a {width: 100%; border-radius: var(--rd-12);}
.service-list .d-card {display: grid; justify-content: stretch; gap: var(--spacer6); width: 100%; padding: var(--spacer8) var(--spacer6); border: 0.1rem solid var(--gray-40); border-radius: var(--rd-12);}
.service-list .d-card .img {width: 100%; height: 21rem; border-radius: var(--rd-8); background: url(/static/images/kosmes/bg_thumbnail.svg) no-repeat 100%; background-size: cover; overflow: hidden;}
.service-list .d-card .img:focus,
.service-list .d-card .img img:focus {outline: none;}
.service-list .d-card .img img {height: 100%; object-fit: cover;}
.service-list .d-card .in {padding: 0; min-height: inherit;}
.service-list .d-card .in .text {gap: var(--spacer4);}
.service-list .d-card .in [class^=c] {margin-bottom: 0;}
.service-list .d-card .in .c-tag {display: inline-flex; align-items: center; width: fit-content; min-height: 2.4rem; background-color: var(--primary-5); padding: var(--spacer1) var(--spacer2); border-radius: var(--rd-4); font-size: var(--fz-body-sm); font-weight: 400; color: var(--primary-60);}
.service-list .d-card .in .c-tit {-webkit-line-clamp: 2; line-height: 1.5; min-height: 5.7rem; text-align: left;}
.service-list .d-card .in .price {font-size: var(--fz-body-md);}
.service-list .d-card .in .flex {display: flex; justify-content: space-between;}
.service-list .d-card .in .grade-box {display: flex; align-items: center; gap: var(--spacer2);}
.service-list .d-card .in .grade-box .star-box {width: 11rem;}
.service-list .d-card .in .grade-box .star-box,
.service-list .d-card .in .grade-box .star {display: inline-flex; position: relative; height: 2.2rem; background: url(/static/images/kosmes/grade_star_yellow.svg) no-repeat; overflow: hidden;}
.service-list .d-card .in .grade-box .star {width: 2rem; background-position: left bottom; line-height: 0; vertical-align: top;}
.service-list .d-card .in .grade-box .grade0-5 {width: 10%;}
.service-list .d-card .in .grade-box .grade1 {width: 20%;}
.service-list .d-card .in .grade-box .grade1-5 {width: 30%;}
.service-list .d-card .in .grade-box .grade2 {width: 40%;}
.service-list .d-card .in .grade-box .grade2-5 {width: 50%;}
.service-list .d-card .in .grade-box .grade3 {width: 60%;}
.service-list .d-card .in .grade-box .grade3-5 {width: 70%;}
.service-list .d-card .in .grade-box .grade4 {width: 80%;}
.service-list .d-card .in .grade-box .grade4-5 {width: 90%;}
.service-list .d-card .in .grade-box .grade5 {width: 100%;}
.service-list .d-card .in .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;}
.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); font-weight: 400; 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: 600; 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%;}
.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/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/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/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;}




/* btn */
.btn {display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; width: auto; min-height: 3.8rem; padding: 0 var(--btn-px-md); background-color: var(--primary-50); border: 1px solid var(--primary-50); border-radius: var(--btn-rd-sm); font-size: var(--fz-body-md); color: var(--white); font-weight: 300; line-height: 1; cursor: pointer; white-space: nowrap; transition: var(--transition-2);}
.btn:hover {background-color: var(--primary-60); border-color: var(--primary-60);}
.btn:focus {outline-offset: -0.4rem; outline: 2px solid rgba(255, 255, 255, 0.9); transition: none;}
.btn:active {background-color: var(--primary-70); border-color: var(--primary-70);}

.btn.red {background-color: var(--red); color: var(--white); border-color: var(--red); font-weight: 400;}
.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.red2 {background-color: var(--red3); color: var(--red4); border-color: var(--red); font-weight: 400;}
.btn.red2:hover {background-color: var(--red3);}
.btn.red2:focus {outline-offset: -0.4rem; outline-color: var(--white);}
.btn.red2:active {background-color: var(--red3); border-color: var(--red4);}

.btn.blue {background-color: var(--primary-5); color: var(--primary-60); font-weight: 400;}
.btn.blue:hover {background-color: var(--primary-10);}
.btn.blue:focus {outline-offset: -0.4rem; outline-color: var(--primary-50);}
.btn.blue:active {background-color: var(--primary-20); border-color: var(--primary-60); color: var(--primary-70);}
.btn.blue2 {background-color: transparent; border-color: var(--primary-40); color: var(--primary-50); font-weight: 400;}
.btn.blue2:hover {background-color: var(--primary-5);}

.btn.navy {background-color: var(--primary-80); border-color: var(--primray-80); color: var(--white); font-weight: 400;}
.btn.navy:hover {background-color: var(--primary-70);}
.btn.navy:focus {outline-offset: -0.4rem; outline-color: var(--white);}

.btn.navy2 {background-color: var(--primary-70); border-color: var(--primray-70); color: var(--white); font-weight: 400;}
.btn.navy2:hover {background-color: var(--primary-60);}
.btn.navy2:focus {outline-offset: -0.4rem; outline-color: var(--white);}

.btn.white {background-color: var(--white); border-color: var(--gray-90); color: var(--gray-90); font-weight: 400;}
.btn.white:hover {background-color: var(--gray-10);}
.btn.white:focus {outline-offset: -0.4rem; background-color: var(--gray-10); outline-color: var(--primary-50);}
.btn.white:active {background-color: var(--gray-10);}

.btn.gray {background-color: var(--gray-30); border-color: var(--gray-50); color: var(--gray-70); font-weight: 400;}
.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-lg {min-width: 12.5rem; height: var(--btn-h-lg); font-size: var(--fz-body-lg);}


[class*=ico-] {position: relative;}
[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/ico_go.svg);}
.ico-go-w::before, .ico-go-w::after {background-image: url(/static/images/kosmes/ico_go_w.svg);}
.ico-go-b::before, .ico-go-b::after {background-image: url(/static/images/kosmes/ico_go_b.svg);}
.ico-reset::before, .ico-reset::after {background-image: url(/static/images/kosmes/ico_refresh_16.svg);}
.ico-arr::after {width: 1.6rem !important; height: 1.6rem !important; background-image: url(/static/images/kosmes/ico_arrow_right.svg);}
.ico-arr-w::after {width: 1.6rem !important; height: 1.6rem !important; background-image: url(/static/images/kosmes/ico_arrow_right_w.svg);}
.ico-arr-down::after {background-image: url(/static/images/kosmes/ico_arrow_down.svg);}
.ico-logout::before, .ico-logout::after {background-image: url(/static/images/kosmes/ico_logout_16.svg);}
.btn-ico.ico-pw-visible {background-image: url(/static/images/kosmes/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;}
.ico-upload::before, .ico-upload::after {background: url(/static/images/kosmes/ico_file_upload.svg);}
.ico-down {align-items: baseline; min-width: 8.2rem;}
.ico-down::after {width: 1.5rem !important; height: 1.4rem !important; margin-left: var(--spacer1); background: url(/static/images/kosmes/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/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/ico_calcul.svg);}
.ico-pdf::before, .ico-pdf::after {width: 1.8rem !important; height: 2.3rem !important; background: url(/static/images/kosmes/ico_pdf.png);}
.ico-help {background-image: url(/static/images/kosmes/ico_help_24.svg);}
.btn-ico[class*=ico-].sm {width: 2.4rem; height: 2.4rem;}

.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/ico_danger.svg);}


.btn.md {min-height: 4.4rem; padding: 0 var(--btn-px-md); border-radius: var(--btn-rd-md); font-size: var(--btn-fz-md); white-space: inherit;}
.btn.md .none {display: none;}
.btn.sm {min-height: 3.8rem;padding: 0 var(--btn-px-sm); border-radius: var(--btn-rd-sm); font-size: var(--btn-fz-sm);}
.btn.xsm {display: inline-flex; align-items: center; min-height: 3.2rem; padding: 0 var(--btn-px-xsm); border-radius: var(--btn-rd-xsm); font-size: var(--btn-fz-xsm);}
.btn.primary:active {background-color: var(--primary-70); border-color: var(--primary-70);}
.btn.primary:hover {background-color: var(--primary-60); border-color: var(--primary-60);}
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;}
/*.sm[class*=ico-]::before, .btn-txt.sm[class*=ico-]::after {width: 2rem; height: 2rem;}
.xsm[class*=ico-]::before, .btn-txt.xsm[class*=ico-]::after {width: 1.6rem; height: 1.6rem;}*/

[class^=swiper-button-] {display: flex; align-items: center; justify-content: center; flex-direction: row; width: 7.8rem; height: 7.8rem; border-radius: var(--rd-full); border: 0.1rem solid var(--gray-20); 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, 50%); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color,var(--swiper-theme-color)); transform: translateY(-50%); background-image: none;}
.swiper-button-prev:focus, .swiper-button-next:focus {border-radius: 100%;}
.swiper-button-prev {left: -11rem;}
.swiper-button-prev::after {background-image: url(/static/images/kosmes/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/ico_swiper_prev_gray.svg) !important;}
.swiper-button-next {right: -11rem;}
.swiper-button-next::after {background-image: url(/static/images/kosmes/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/ico_swiper_next_gray.svg) !important;}
.swiper-button-stop::after {background-image: url(/static/images/kosmes/ico_swiper_stop.svg);}
.swiper-button-play::after {background-image: url(/static/images/kosmes/ico_swiper_play.svg);}

.swiper-button-prev.style2::after {background-image: url(/static/images/kosmes/ico_swiper_prev02.svg);}
.swiper-button-next.style2::after {background-image: url(/static/images/kosmes/ico_swiper_next02.svg);}
.swiper-button-stop.style2::after {background-image: url(/static/images/kosmes/ico_swiper_stop02.svg); background-position: center center;}
.swiper-button-play.style2::after {background-image: url(/static/images/kosmes/ico_swiper_play02.svg); background-position: 55% center;}


.swiper-indicator {display: flex; align-items: center; justify-content: center; margin-top: var(--spacer5);}
.swiper-pagination {display: flex; align-items: center; justify-content: center; flex-direction: row; position: relative; top: auto; bottom: auto; z-index: 1;}
.swiper-pagination-bullet {width: 1rem !important; height: 1rem !important; margin: 0 var(--spacer1); background-color: var(--gray-90); border-radius: var(--rd-10);}
.swiper-pagination-bullet:focus {outline-offset: 0.3rem; outline-color: var(--primary-50);}
.swiper-pagination-bullet:hover {cursor: pointer;}
.swiper-pagination-bullet.swiper-pagination-bullet-active {width: 4.2rem; border-radius: 14rem; background-color: var(--primary); 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);}
.btn-ico {color: inherit; border: 0; background-color: inherit; padding: 0 !important;}
.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;}

.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 #header .two-depth-wrap, .hidden #container, .hidden #footer, .hidden .top-search {padding-right: 1.7rem;}

.inner {max-width: 128rem; width: 100%; padding: 0 var(--spacer4); margin: 0 auto;}
.index .inner {padding-top: var(--spacer15) !important; padding-bottom: var(--spacer15) !important;}
#skip-nav {display: none; position: fixed; top: 0; left: 0; width: 100%; text-align: center; background-color: var(--gray-90); z-index: 100;}
.hamburger {position: relative; 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: 200; 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(--black); transition: var(--transition-2);}
.hamburger .line1 {top: 0;}
.hamburger .line2 {top: 50%; right: 0; transform: scaleX(1) translateY(calc(-50% + 0.1px)); width: 1.5rem;}
.hamburger .line3 {bottom: 0;}
.hamburger.on .line1 {top: 0; transform: translate(0px, 7px) rotate(45deg);}
.hamburger.on .line2 {transform: translateY(-50%) scaleX(0); transform-origin: bottom left;}
.hamburger.on .line3 {transform: translate(0px, -7px) rotate(-45deg);}


/* #header-top > .toggle-head */
#allTopMenu {background-color: var(--primary-80);}
#allTopMenu .box {display: flex; justify-content: space-between; flex-wrap: wrap;}
#allTopMenu .box a {display: flex; align-items: center; justify-content: center; min-width: 5.4rem; padding: 0 var(--spacer2); color: var(--white); font-size: var(--fz-body-sm);}
#allTopMenu .box a:focus {border-radius: 0; outline-offset: 0;}
#allTopMenu .box .left {display: flex; flex-wrap: wrap; min-height: 3.4rem;}
#allTopMenu .box .left .active {background-color: var(--primary-50);}
#allTopMenu .box .right {display: flex; align-items: center; gap: 0 var(--spacer3);}
#allTopMenu .box .right li {display: flex; align-items: center; height: 2.2rem;}
#allTopMenu .box .change a {height: auto; background-color: var(--primary-50); border: 0;}
#allTopMenu .box .form-select {height: inherit; border-radius: 0; font-size: var(--fz-body-sm); background-position: center right var(--spacer3); background-size: 1.5rem 1.5rem; padding: var(--select-pd-sm); border: 0;}
#allTopMenu .btn-ico[class*=ico-].sm {width: 2rem; height: 2rem;}

#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/ico_flag_kr.svg) no-repeat center;*/ background-size: contain;}
#header-top .toggle-head .toggle-btn {font-size: 1.4rem; color: var(--secondary); height: auto;}
#header-top .toggle-head .toggle-btn::after {background-image: url(/static/images/kosmes/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: 700;}
#header-top .toggle-body .dl .dt::before {content: ''; display: inline-flex; width: 2rem; height: 2rem; /*background-image: url(/static/images/kosmes/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 */
#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 {transform: translateY(-100%);}

/* header > gnb > two-depth */
#header {position: sticky; top: 0; left: 0; right: 0; transform: translateY(0%); transition: transform ease 0.4s 0.01s; z-index: 2; border-bottom: 0.1rem solid var(--gray-30);}
#header.is-open {z-index: 2;}
#header.is-open + #container .grid-map {z-index: 0;}
#header.is-open .head-gnb::after {transform: translateY(var(--twoDepthTop));}
#header.is-open .li.on > .two-depth {display: grid; opacity: 1;}
#header.is-open .li.on > .two-depth::before {transform: translateY(0); z-index: 0;}


#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: 0 0.4rem 1.2rem 0 rgba(0, 0, 0, 0.12); 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/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);}

#header .head-body {background-color: var(--white); border-bottom: 0.1rem solid var(--gray-30);}
#header .head-body .inner {display: flex; align-items: normal; flex-direction: column; gap: var(--spacer1); padding: 0 var(--spacer4);}
#header .head-body .btn-navi {display: inline-flex; align-items: center; justify-content: space-between; position: relative; gap: var(--spacer2); padding: var(--spacer3) var(--spacer3); font-size: var(--fz-body-md); font-weight: 700; color: var(--gray-90); line-height: 1;}
#header .head-body .btn-navi::before {content: ''; display: inline-flex; min-width: 2.2rem; min-height: 2.2rem; background-repeat: no-repeat; background-size: contain;}
#header .head-body .btn-navi:not(:first-child)::after {content: ''; position: absolute; left: -0.4rem; width: 0.1rem; height: 1.1rem; background-color: var(--gray-40);}
#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/head_ico_navi_sch.svg);}
#header .head-body .btn-navi.login::before {background-image: url(/static/images/kosmes/head_ico_navi_login.svg);}
#header .head-body .btn-navi.logout {gap: var(--spacer1);}
#header .head-body .btn-navi.logout::before {background-image: url(/static/images/kosmes/head_ico_navi_login.svg); transform: rotate(-180deg);}
#header .head-body .btn-navi.share::before {background-image: url(/static/images/kosmes/head_ico_share.svg);}
#header .head-body .btn-navi.join::before {background-image: url(/static/images/kosmes/head_ico_navi_join.svg); width: 2rem;}
#header .head-body .btn-navi.my {gap: var(--spacer1);}
#header .head-body .btn-navi.my::before {background-image: url(/static/images/kosmes/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/head_ico_navi_all.svg); min-width: 2.2rem; min-height: 2.2rem;}
#header .head-body .btn-navi .user-name {display: inline-flex; color: var(--primary-50); font-weight: 700;}
#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: 4.8rem;}
#header .head-body .logo img {height: 100%;}
#header .head-body .right {display: inline-flex; flex-wrap: wrap; gap: var(--spacer2); margin-left: auto; margin-top: var(--spacer10);}



/* #header > one-depth */
#header .head-gnb {background-color: var(--white);}
#header .head-gnb::after {content: ''; position: absolute; top: inherit; width: 100%; min-height: 27rem; background-color: var(--primary); z-index: -1; transform: translateY(-101%); transition: var(--transition-2);}
#header .gnb {display: flex; align-items: center; flex-direction: row; position: relative;}
#header .li {width: 100%; position: relative;}
#header .li a {align-items: center; flex-direction: row; gap: var(--spacer2); height: auto;}
#header .li .arrow::after {content: ''; display: inline-flex; width: 2rem; height: 2rem; background: url(/static/images/kosmes/ico_arrow_down.svg) no-repeat center; background-size: contain;}
#header .li .one-depth {width: max-content; height: 5.2rem; margin-left: var(--spacer8); font-size: var(--fz-body-md); padding: var(--spacer1) var(--spacer2); border-bottom: var(--spacer1) solid transparent; font-weight: 700; color: var(--gray-90);}
#header .li .one-depth:not(.active):hover {color: var(--secondary); border-color: var(--primary-50); background-color: var(--white);}
#header .li .one-depth.active {color: var(--gray-90); background-color: var(--secondary-10);}
#header .li .one-depth.active::after {transform: rotate(-180deg);}
#header .li:first-of-type li {width: max-content; padding: 0 !important; border: 0 !important;}
#header .li:first-of-type .one-depth {margin-left: 0;}
#header .li:first-of-type .two-depth-wrap {padding-left: 0 !important;}
#header .li:not(:first-of-type) .two-depth-wrap > li::before {content: ''; position: absolute; top: 0; left: 0; width: 0.1rem; height: 100%; background-color: var(--gray-015);}

/* header > gnb > two-depth */
#header .two-depth-wrap {display: none; position: absolute; top: calc(100% + 2.3rem); grid-template-columns: repeat(1 , 1fr); gap: var(--spacer5); width: inherit; min-height: 22rem; padding: 0 2vw !important;}
#header .two-depth-wrap a:hover {background-color: transparent;}
#header .two-depth-wrap a:focus {outline-color: var(--white);}
#header .two-depth-wrap > li {display: flex; align-items: normal; flex-direction: column; flex: 1; gap: var(--spacer2); width: 100%; height: auto; min-height: 3rem; transition: var(--transition-3); color: var(--white);}
#header.is-open {z-index: 2;}
#header.is-open .head-gnb::after {transform: translateY(0);}
#header.is-open .head-gnb .two-depth-wrap {display: grid; opacity: 1;}

#header .two-depth-wrap .two-depth-tit .btn-txt {display: inline-flex; height: auto; padding: 0 !important; font-size: var(--fz-title-md); font-weight: 700;  color: var(--white);}
#header .two-depth-wrap .two-depth-tit.active a {color: var(--secondary); background-color: var(--white);}
#header .two-depth-wrap .two-depth {display: grid; gap: var(--spacer2); width: max-content;}
#header .two-depth-wrap .two-depth a {display: inline-flex; align-items: center; flex-direction: row; gap: var(--spacer1); position: relative; padding: 0 var(--spacer3); border-radius: 0.8rem; font-weight: 300; color: var(--white); line-height: 1.4;}
#header .two-depth-wrap .two-depth a::before {content: ''; position: absolute; left: 0; width: 0.3rem; height: 0.3rem; background-color: var(--white); border-radius: var(--rd-4);}


#header .two-depth .type1 {grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: var(--spacer10) var(--spacer14);}
#header .two-depth .type1 li {display: flex; align-items: normal; flex-direction: column; padding: 0;}
#header .two-depth .type1 li .tit {font-size: var(--fz-body-lg); font-weight: 700;}
#header .two-depth .type1 li .tit a {height: 4rem; padding: 0 var(--spacer2);}
#header .two-depth .type1 li .txt {color: var(--gray-70); padding: var(--spacer4) var(--spacer2) 0; margin-top: var(--spacer1); border-top: 0.1rem solid var(--gray-30);}
#header .two-depth .type1 {padding: var(--spacer4) 0 var(--spacer10); border: 0;}
#header .two-depth .type1 .submenu-in {display: flex; align-items: normal; flex-direction: column; gap: var(--spacer4); padding: 0;}


/* search */
.top-search {display: flex; align-items: center; justify-content: center; position: absolute; left: 0; right: 0; min-height: 28rem; background-color: var(--blue); 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 {width: 100%; max-width: 128rem; padding: 0 19.6rem;}
.top-search .sch-wrap .sch-tit {display: flex; justify-content: space-between; position: relative; font-size: var(--fz-title-xlg); color: var(--white); font-weight: 400;}
.top-search .sch-wrap .sch-tit span {line-height: 1;}
.top-search .sch-wrap .sch-tit .sch-close {position: absolute; top: -3rem; right: -18rem; width: 3.6rem; height: 3.6rem; background: url(/static/images/kosmes/head_sch_close.svg) no-repeat; background-size: contain;}
.top-search .sch-wrap .sch-form-wrap {}
.top-search .sch-wrap .sch-form-wrap .sch-input {margin: var(--spacer8) 0 var(--spacer4);}
.top-search .sch-wrap .sch-form-wrap .sch-input 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: 700; border: 0;}
.top-search .sch-wrap .sch-form-wrap .sch-input input[type=text]:focus::placeholder {color: var(--white); transition: var(--transition-3);}
.top-search .sch-wrap .sch-form-wrap .sch-tag {display: flex; flex-wrap: wrap; grid-column-gap: var(--spacer4);}
.top-search .sch-wrap .sch-form-wrap .sch-tag dt {font-weight: 700; color: var(--white);}
.top-search .sch-wrap .sch-form-wrap .sch-tag dd {display: flex; gap: var(--spacer4);}
.top-search .sch-wrap .sch-form-wrap .sch-tag dd .tag {color: var(--yellow); font-weight: 700;}


/* m-search */
.sch-input {display: flex; position: relative;}
.sch-input .form-control {padding: 0 var(--spacer12) 0 var(--spacer4);}
.sch-input .form-control ~ .ico-sch {width: 2.4rem; height: 2.4rem;}
.sch-input .ico-sch {position: absolute; top: 50%; right: var(--spacer9); width: 2.7rem; height: 2.7rem; transform: translateY(0); background: url(/static/images/kosmes/head_sch_ico.svg) no-repeat 100%; background-size: contain; text-indent: -9999px; transform: translateY(-50%);}
.sch-input .ico-sch::after {display: none;}
.selected-ranks div {display: flex; align-items: center; gap: var(--spacer1) var(--spacer2);}
.selected-ranks div .tit {display: flex; min-width: 4.8rem; margin-bottom: 0;}

/* header > m-gnb */
#header .m-gnb-wrap {display: none; position: fixed; top: 0; right: -100%; 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; min-width: 40rem; 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/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; border-left: 0.1rem solid var(--gray-20); 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); font-weight: 700; height: 6.4rem; border-bottom: 0.1rem solid var(--gray-20);}
#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 {display: flex; align-items: center; 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 > .inner {min-height: 75rem; padding: var(--spacer5) var(--spacer4) var(--spacer30);}
#container .in-between .contents .breadcrumb-wrap {}
#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; padding: 0; margin-bottom: var(--spacer10);}
.breadcrumb-wrap .breadcrumb {display: flex; align-items: center; flex-direction: row; gap: var(--spacer2); width: 100%; max-width: 130rem; padding: 0 var(--spacer1);}
.breadcrumb-wrap .breadcrumb li {display: inline-flex; align-items: center; flex-direction: row; gap: var(--spacer3); font-size: var(--fz-body-sm);}
.breadcrumb-wrap .breadcrumb li:first-of-type {gap: var(--spacer2);}
.breadcrumb-wrap .breadcrumb li:not(:last-child)::after {content: ''; display: inline-flex; align-items: center; flex-direction: row; width: 1rem; height: 1rem; background: url(/static/images/kosmes/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:last-of-type .txt {border-bottom: 0; font-weight: 700;}
.breadcrumb-wrap .breadcrumb li span.txt {color: var(--gray-90); border-color: var(--gray-90);}
.breadcrumb-wrap .breadcrumb .home::before {content: ''; display: inline-flex; align-items: center; flex-direction: row; width: 1.2rem; height: 1.2rem; background: url(/static/images/kosmes/ico_bread_home.svg) no-repeat; background-size: contain;}


/* container > title */
.page-title-wrap {display: flex; align-items: normal; flex-direction: column; margin-bottom: var(--spacer16);}
.page-title-wrap .h-tit {font-size: var(--fz-heading-sm); 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; font-weight: 700;}
.page-title-info .box .info dt::after {content: ':'; margin: 0 var(--spacer1);}
.page-title-info .box .info dd {font-weight: 400;}
.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);}

/* rank */
.rank-list {display: flex; align-items: center; margin-bottom: var(--spacer10);}
.rank-list dt {display: flex; align-items: center; justify-content: center; width: 12.6rem; height: 3.8rem; margin-right: var(--spacer5); border-radius: var(--rd-4); border: 0.1rem solid var(--gray-20);}
.rank-list dd.list {}
.rank-list dd ol {display: flex; gap: var(--spacer5); counter-reset: number;}
.rank-list dd ol li {display: flex; align-items: center; gap: var(--spacer1); position: relative;}
.rank-list dd ol li:first-of-type a {color: var(--primary-50);}
.rank-list dd ol li:first-of-type::before {background-color: var(--primary-50); color: var(--white);}
.rank-list dd ol li::before {content: counter(number); counter-increment: number; display: flex; justify-content: center; align-items: center; width: 2.2rem; height: 2.2rem; font-size: var(--fz-body-sm); font-weight: 600; background-color: #EDF1F5; border: 0.1rem solid var(--gray-06); color: var(--gray-06); border-radius: 100%; line-height: 0;}
.rank-list dd ol li a {font-weight: 700;}


/* .popup */
.popup {position: fixed; top: 50%; left: 50%; min-width: 70rem; max-width: 80rem; min-height: 70rem; transform: translate(-50%, 0); transition: all 0.3s 0.2s cubic-bezier(0.34, 0.01, 0.07, 1.5); transition-duration: 0.8s; display: flex; flex-direction: column; /* gap: var(--spacer10); */ background-color: var(--white); border-radius: var(--rd-12); color: var(--gray-90); opacity: 0; z-index: -1;}

.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; min-height: 5rem; padding: 0 var(--spacer5) 0 var(--spacer7); background-color: var(--primary-50); border-radius: var(--rd-12) var(--rd-12) 0 0; font-weight: 700; font-size: var(--fz-body-lg); color: var(--white); line-height: 1.5;}
.popup h3.tit .btn-txt {}
.popup h3.tit .ico-del {gap: 0; width: 3.4rem; min-height: 3rem;}
.popup h3.tit .ico-del:hover {background-color: transparent;}
.popup h3.tit .ico-del::after {width: 1.6rem !important; height: 1.6rem !important; background-image: url(/static/images/kosmes/ico_del1_20_w.svg);}
.popup h3.tit .lg.ico-del {top: -1.4rem; width: 3.4rem !important; height: 3.4rem !important; gap: 0; z-index: 10;}
.popup h3.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: 700; 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 .info-list {gap: 0 !important; font-size: var(--fz-body-xsm);}
.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 .form-date {min-width: auto; height: auto; padding: 0; border: 0; margin-left: var(--spacer1); line-height: 1;}*/
.popup .table .form-check input[type=checkbox] ~ label {padding-left: var(--spacer5); font-weight: 300;}
.popup .table .form-check input[type=checkbox]:checked ~ label:after {}
.popup .table .file-container .form-check input[type=checkbox] ~ label {display: none; padding-left: 0;}
.popup .search-wrap {display: grid; gap: var(--spacer5);}
.popup .search-wrap .sch-input {display: flex; gap: var(--spacer2);}
.popup .search-wrap .sch-input .form-control {padding-right: var(--spacer5);}
.popup .search-wrap .sch-input .form-control ~ .ico-sch {right: 1.3rem; width: 2rem; height: 2rem;}
.popup .search-wrap .sch-input .form-select {max-width: 13.2rem;}
.popup .mb {margin-bottom: var(--spacer6);}
.popup .info-list .pd2 {padding-left: var(--spacer7);}
.popup .contact-box {display: flex; flex-direction: column; gap: var(--spacer7); padding: var(--spacer10);}
.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: 600;}
.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 .contact-box .txt-cnt .input-cnt {display: flex; gap: var(--spacer1); margin-right: var(--spacer1); color: var(--primary-50);}

.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 img {width: 1.6rem !important; height: 1.6rem !important; margin-top: 0 !important; margin-bottom: 0.3rem !important;}
.popup .table + .info-list {margin-top: var(--spacer1) !important;}
.popup .table .bg-red {background-color: #FFE9EA !important; color: #E71825; font-weight: 500;}
.popup .table .bg-blue {background-color: var(--primary-60) !important; color: var(--white);}
.popup .table .bg-gray {background-color: #EDF1F5 !important; border: 0; color: var(--gray-90); font-weight: 500;}
.popup .table .sum {height: 6rem !important; background-color: #EDF1F5;}
.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: 100;}
.popup .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);}
.popup .table tr th + td {padding: var(--spacer4); text-align: left;}
.popup .table tr th:not(:first-of-type) {border-left: 0.1rem solid #99B0CB;}
.popup .table tr th:not(:last-of-type) {border-right: 0.1rem solid #99B0CB;}
.popup .table tr:nth-of-type(2) th {height: 3.9rem !important; background-color: #EDF1F5;}
.popup .table tr td {height: 4.8rem !important; padding: var(--spacer2) var(--spacer1); /*background-color: var(--white);*/ font-size: var(--fz-body-sm); color: var(--gray-90); font-weight: 300;}
.popup .table.blue tr th {background-color: #CADDFF; font-size: var(--fz-body-sm); font-weight: 400;}
.popup .table.blue tr td {background-color: #EFF5FF; height: 6rem !important;}
.popup .table.blue tr th:not(:first-of-type) {border-left: 0.1rem solid #95ADD7;}
.popup .table.blue tr td:not(:last-of-type) {border: 0.1rem solid #95ADD7;}

.popup input[type=number] {max-width: 100%; min-width: auto !important; height: 3.4rem; border-radius: var(--rd-4);}
.popup .price {display: grid; gap: var(--spacer1);}
.popup .price li {display: flex; align-items: center; flex-wrap: wrap; grid-column-gap: var(--spacer1); min-height: 2.55rem;}
.popup .price li dl {display: flex; align-items: center; grid-column-gap: var(--spacer1); position: relative; padding: 0 var(--spacer2); color: var(--gray-60);}
.popup .price li dl::before {content: '['; position: absolute; top: -0.2rem; left: 0; color: var(--gray-90);}
.popup .price li dl::after {content: ']'; position: absolute; top: -0.2rem; right: 0; color: var(--gray-90);}
.popup .price li dl dt {font-size: var(--fz-title-xsm); font-weight: 500;}
.popup .price li dl dd {font-size: var(--fz-title-xsm); font-weight: 700;}
.popup .price li .sbc {color: var(--primary-50);}
.popup .price li .totalSum dt {font-weight: 700;}
.popup .price li .totalSum {color: var(--gray-90);}
.popup .page-btn-wrap {margin: 0 !important; gap: var(--spacer4);}
.popup .btn-wrap {margin-top: 0;}
.popup .btn-lg {min-width: 9.1rem; height: 4.8rem;}
.popup .form-select {height: 3.8rem; font-size: var(--fz-body-sm); border-radius: var(--rd-6);}
.popup .form-control, .form-date {height: 3.8rem; border-radius: var(--rd-6);}

.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: 700; 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: 1;}
.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: #EDF1F5 !important; border: 0; color: var(--gray-90); font-weight: 500;}
.vouinfo .table .sum {height: 6rem !important; background-color: #EDF1F5;}
.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: 100;}
.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: #EDF1F5;}
.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); font-weight: 400;}
.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;}

/* 기존 팝업 css */
.popup .pop-wrap.lg {max-width: 80rem;}
.modal, .modal2 {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--black); opacity: 0.6; z-index: 1;}
.reMessage {position: absolute; left: 0; top: 50%; transform: translateX(45%) translateY(-50%); padding: var(--spacer5) var(--spacer9); background: var(--white); text-align: center; z-index: 1;}
.reMessage p {font-size: var(--fz-body-md); line-height: 1.5;}
.popup.wide {min-width: 85rem; max-width: 100rem; gap: 0;}
.popup.wide2 {max-width: 80rem; gap: 0;}
.popup h3 {font-size: var(--fz-body-sm);}
.popup h3 span {margin-left: 10px;}
.popup h3 img {float: right; margin-top: var(--spacer1); margin-right: var(--spacer3); cursor: pointer;}
.popup h4 {font-size: var(--fz-body-md); font-weight: bold; color: var(--primary-70);}
.popup .ng-scope {font-size: var(--fz-body-sm); color: var(--gray-70); font-weight: 300; line-height: 1.9 !important;}
.popup h4.ng-scope {font-size: var(--fz-title-sm); font-weight: 600; color: #003675;}
.tR.ng-scope {text-align: right !important;}
h4.ng-scope {font-size: var(--fz-title-md); font-weight: 600; color: #003675;}
.ng-scope {text-align: left; line-height: 2 !important;}
.ng-scope .table:last-of-type {margin-bottom: 0;}
.ng-scope .table .active {background-color: transparent; font-weight: 400;}
.ng-scope .popTable {}
.ng-scope .file-container {display: grid; gap: var(--spacer2); font-size: var(--fz-body-sm);}
.ng-scope .file-container input[type=checkbox] ~ label {gap: var(--spacer2); padding-left: 0; font-size: var(--fz-body-sm);}
.ng-scope .file-container input[type=checkbox] ~ label::before {width: 1.6rem; height: 1.6rem; left: var(--spacer2);}
.ng-scope .file-container .submit {display: flex; gap: var(--spacer2);}
.ng-scope .file-container .submit button {min-width: 10rem; padding: var(--spacer2); border: 0.1rem solid var(--gray-30); border-radius: var(--rd-4);}
.ng-scope .file-container .submit .upload {background-color: var(--primary-50); color: var(--white); border: 0;}
.ng-scope .file-container .file-list {display: grid; gap: var(--spacer2);}
.ng-scope .file-container .file-list > div {display: flex; align-items: center; gap: var(--spacer2); position: relative;}
.ng-scope .file-container .file-list .file-filename {min-width: auto; background-color: var(--primary-5); border: 0.1rem solid var(--gray-30); padding: var(--spacer1) var(--spacer2); border-radius: var(--rd-2); font-size: var(--fz-body-sm);}
.ng-scope th {border: 0 !important; background-color: #EDF1F5 !important; font-size: var(--fz-body-md); text-align: center; font-weight: 500 !important;}
.ng-scope td {min-height: 5.2rem; /*padding: var(--spacer4);*/ text-align: left; color: var(--gray-70);}
.serviceTxt > .ng-scope:nth-of-type(2n) {margin-top: var(--spacer1); margin-bottom: var(--spacer10); font-size: var(--fz-body-sm); color: var(--gray-70); font-weight: 400; text-align: left;}
.serviceTxt > .ng-scope:nth-of-type(2n) + .ng-scope > p {margin-bottom: var(--spacer5); line-height: 1.9 !important; color: var(--gray-70); font-weight: 400; text-align: left; font-size: var(--fz-body-sm);}
.serviceTxt h4 {display: flex; justify-content: flex-start; align-items: center; margin-top: var(--spacer5); padding-bottom: var(--spacer4); border-bottom: 0.1rem solid var(--gray-40);}
.serviceTxt h4 + .ng-scope {padding: var(--spacer4); padding-top: 0; text-align: left;}
.serviceTxt h4 + .ng-scope p {font-size: var(--fz-body-sm); color: var(--gray-70); font-weight: 300; line-height: 1.9 !important;}
.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 .file-form .file-btn {gap: 0;}*/
.popup .ico-del::after {width: 1.2rem !important; height: 1.2rem !important;}
.popup .border-box {position: relative; padding: var(--spacer6); padding-right: var(--spacer2); border: 0.1rem solid #dcdcdc; overflow: hidden;}
.popup .border-box .file-list .file-filename {height: 3rem; padding-left: var(--spacer7);}
.popup .scroll {gap: var(--spacer8) 0; width: 100%; max-height: 50rem; padding-right: var(--spacer2); overflow-y: scroll;}
.popup .scroll-s {max-height: 45rem; padding-right: var(--spacer2); overflow-y: scroll;}
.popup .scroll-s input[type=checkbox] ~ label {padding-left: 0;}
.popup .scroll thead tr:first-child th {border-top: 0.1rem solid #95ADD7;}
.popup .scroll tbody tr:last-child td {border-bottom: 0;}
.popup .scroll2 {width: 100%; max-height: 35rem; overflow-y: scroll; border-bottom: 0.1rem solid var(--gray-20);}
.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;}

.form-survey {display: grid;}
.form-survey .form-check input[type=radio] ~ label {font-size: var(--rdo-fz-sm);}
.form-survey .tit-l {min-height: 3.6rem; padding: 0 var(--spacer4); background-color: var(--secondary-5); margin-bottom: 0 !important; border-radius: var(--rd-6); font-size: var(--fz-body-md) !important; color: var(--primary-60) !important; font-weight: 600;}
.form-survey tbody tr {display: grid; gap: var(--spacer4); counter-reset: number;}
.form-survey tbody tr .satisLevel {display: grid; gap: var(--spacer1);}
.form-survey tbody tr td:not(:last-of-type) .satisLevel {padding-bottom: var(--spacer4); border-bottom: 0.1rem dashed var(--gray-40);}
.form-survey tbody tr .satisLevel .chk-area {grid-column-gap: var(--spacer9); padding-left: var(--spacer8);}
.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: 600;}
.form-survey tbody tr:not(:last-of-type) {padding-bottom: var(--spacer5); margin-bottom: var(--spacer5);}
.form-survey tbody tr .tit-num {/* content: counter(number); counter-increment: number; */ display: inline-flex; justify-content: center; align-items: center; position: absolute; top: 0.2rem; left: 0.7rem; width: 1.8rem; height: 1.8rem; background-color: var(--gray-90); color: var(--white); font-size: var(--fz-body-xsm); border-radius: 100%; font-weight: 400;}
.form-survey tbody tr:first-of-type {border-bottom: 0;}
.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: 600; 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: 0; bottom: 5rem; transition: var(--transition-4); z-index: 1; opacity: 0;}
.quick-menu.on {bottom: calc(2rem + 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 {display: flex; align-items: center; justify-content: center; min-width: 5.4rem; width: 5.4rem; height: 5.4rem; background-color: var(--gray-80); color: var(--white); 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 a:focus {border-radius: 0;}
.quick-menu ul li.btn-location {z-index: 1;}



.file {display: flex; flex-wrap: wrap; grid-column-gap: var(--spacer4); grid-row-gap: var(--spacer7);}
.file .agree-wrap .agree-check {}
.file .user-info-list .tit {width: auto;}
.file .form-group {gap: var(--spacer3) !important; flex: 1 1 48.5%; padding: 0 !important; padding-bottom: var(--spacer7) !important;}
.file .form-group:last-of-type {padding-top: 0 !important; padding-bottom: 0 !important; border-bottom: 0; max-width: calc(50% - 0.8rem);}
.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: 700;}
.file .tit .btn {width: fit-content;}
.file .sm {width: auto !important;}
.file .btn-box {display: flex; flex-wrap: wrap; gap: var(--spacer2);}


.file .form-check {flex-wrap: wrap; gap: var(--spacer3);}
.file-form {display: flex; flex-direction: column; align-items: center; gap: var(--spacer2); flex: 1 1 33%; min-height: 14.2rem; padding: var(--spacer5) var(--spacer4); border-radius: var(--rd-4); background-color: var(--gray-5); border: 0.1rem solid var(--gray-40);}
.file-form > div {display: grid; gap: var(--spacer4); width: 100%;}
.file-form .file-form {padding: 0; border: 0; background-color: transparent;}
.file-form .c-red {width: max-content; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: var(--fz-body-sm); font-weight: 400;}
.file-form .file-container {display: flex; position: relative; width: 100%; min-height: 8rem; background-color: var(--gray-10); z-index: 1;}
.file-form .file-container .txt {width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--gray-50); font-weight: 300; text-align: center; background-color: transparent; border: 0; z-index: 0;}
.file-form .file-container .ico-del {width: max-content; min-width: 2rem; min-height: 2rem; gap: 0;}
.file-form .ico-upload {width: max-content; flex-direction: row-reverse; gap: var(--spacer1); padding-left: var(--spacer4); font-size: var(--fz-body-md);}
.file-form .ico-upload::after {width: 1.5rem; height: 1.5rem; background: url(/static/images/kosmes/ico_file_upload.svg) no-repeat 100%; background-size: contain; margin-bottom: 0.2rem;}
.file-form .file-btn {display: flex; align-items: center; gap: var(--spacer3);}
.file-form .file-filesize {min-width: fit-content;}

.file-form .image-file .file-list {flex-direction: row; flex-wrap: wrap;}
.file-form .file-list {display: flex; flex-direction: column; gap: var(--spacer2); width: 100%; max-height: 7.2rem; padding: var(--spacer3) var(--spacer2); overflow-x: hidden; overflow-y: scroll;}
.file-form .file-list input[type=checkbox] ~ label {padding-left: 0;}
.file-form .file-list .flex {display: flex; justify-content: space-between; width: 100%;}
.file-form .file-list > div {display: flex; align-items: center; justify-content: space-between; gap: var(--spacer2); width: 100%; font-size: var(--fz-body-sm); color: var(--gray-70);}
.file-form .file-list > .file2-image {display: inline-flex; justify-content: flex-start; position: relative; width: auto;}
.file-form .file-list > .file2-image .img-delete {display: flex; justify-content: center; align-items: center; position: absolute; top: -0.4rem; right: -0.5rem; width: 1.6rem; height: 1.6rem; border-radius: var(--rd-full); background-color: var(--primary-50); color: var(--white); font-size: 12px;}
.file-form .file-list > .file2-image .img-delete:hover {cursor: pointer;}
.file-form .file-list > div .file2-thumbnail {max-height: 5.8rem;cursor: pointer;}
.file-form .file-list > div .file-btn {display: flex; align-items: center;}
.file-form .file-list > div .file-filename {display: -webkit-box; width: 100%; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; color: var(--gray-70); font-weight: 400; font-size: var(--fz-body-sm);}
/*.file-form .file-list > div .file-filesize {min-width: 7rem;}*/
.file-form .del {min-height: 3.7rem; padding: 0 var(--btn-px-sm); border-radius: var(--btn-rd-sm); font-size: var(--btn-fz-xsm);}

.file-form .upload-list {display: flex; flex-wrap: wrap; gap: var(--spacer2); width: 100%; margin-top: var(--spacer5);}
.file-form .upload-list li {display: flex; align-items: center; gap: var(--spacer4); min-height: 5rem; padding: var(--spacer2) var(--spacer4); border-radius: var(--rd-6); border: 0.1rem solid var(--gray-40);}
.file-form .upload-list .flex {display: flex; justify-content: space-between; gap: 0; width: 100%;}
.file-form .upload-list .ico-down {min-width: 8.3rem;}
.file-form .upload-list .file-size {font-size: var(--fz-body-sm);}

tr .file-form.view {gap: var(--spacer6) var(--spacer2); padding: 0 var(--spacer4);}
tr .file-form.view:last-of-type {margin-bottom: 0;}
.file-form.view {align-items: flex-start; min-height: inherit; max-height: inherit; height: auto; margin-bottom: var(--spacer5); background-color: transparent; padding: 0; border: 0 !important; border-radius: 0;}
.file-form.view .file-container {flex-direction: column; gap: var(--spacer4); min-height: inherit; background-color: transparent;}
.file-form.view .file-list {flex-direction: row; flex-wrap: wrap; width: auto; gap: var(--spacer1); max-height: inherit; padding: 0; overflow-y: visible;}
.file-form.view .file-list > div {display: flex; align-items: center; justify-content: flex-start; gap: var(--spacer2); position: relative; width: inherit; min-height: 3.6rem; padding: var(--spacer2) var(--spacer6) var(--spacer2) var(--spacer3); border: 0.1rem solid var(--gray-30); border-radius: var(--rd-6); background-color: var(--white); font-size: var(--fz-body-sm);}
.file-form.view .file-list > div .flex {display: flex; align-items: center; gap: var(--spacer2);}
.file-form.view .file-list > div .file-filename {width: auto; overflow: visible;}
.file-form.view .file-list > div .file-filename img {width: 2rem !important; margin: 0; margin-bottom: 0 !important;}
.file-form.view .file-list > div .file-filesize {min-width: 11rem; text-align: right; line-height: 0;}
.file-form.view .btn {min-height: 3.8rem;}
.file-form.view .btn.ico-del {min-height: 1.9rem;}
.file-form.view + .info-list {margin-top: 0;}
.file-form.sm {padding: 0;}
.file-form.sm .file-list {display: grid; gap: var(--spacer2);}
.file-form.sm .file-list > div {min-height: 2rem; font-size: var(--fz-body-sm);}
.file-form.sm .file-list > div .flex {flex-wrap: nowrap;}


.pop-wrap.md .popup {min-width: 92rem; max-width: 92rem;}
.pop-wrap.md .scroll {padding: var(--spacer12); 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: 4px 4px 8px 0px rgba(0, 0, 0, 0.08); font-weight: 700; overflow: hidden;}
.pop-wrap.md .scroll .title span {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; 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(--spacer10);}
.pop-wrap.md .scroll .process li {display: flex; align-items: center; position: relative; min-height: 12.4rem; border-radius: var(--rd-8); font-size: var(--fz-body-lg); font-weight: 700; box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.08);}
.pop-wrap.md .scroll .process li:not(:last-of-type)::after {content: ''; position: absolute; left: 50%; bottom: -3.8rem; width: 3.8rem; height: 3.8rem; background: url(/static/images/kosmes/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%; min-width: 21rem; min-height: 8rem; text-align: center; font-weight: 700; 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-sm); font-weight: 400;}
.pop-wrap.md .scroll .process li .info span {font-size: var(--fz-body-sm);}



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

.foot-quick {display: flex; align-items: center; min-height: 16.6rem; padding: var(--spacer5) 0; background-color: var(--primary);}
.foot-quick .inner {display: flex; padding-top: 0;}
/*
.foot-quick .inner .link {display: inline-flex; align-items: center; justify-content: space-between; flex-direction: row; gap: var(--spacer2); position: relative; max-width: 25.6rem; width: 100%; height: 5.4rem; padding: 0 var(--spacer6); border-right: 0.1rem solid var(--gray-30);}
.foot-quick .inner .link:first-child {border-left: 0.1rem solid var(--gray-30);}
.foot-quick .inner .none {padding: 0;}
.foot-quick .inner .plus {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; padding: 0 var(--spacer6);}
.foot-quick .inner .plus::after {content: ''; display: inline-flex; flex-shrink: 0; width: 1.6rem; height: 1.6rem; background: url(/static/images/kosmes/foot_ico_plus.svg) no-repeat center; background-size: contain; transition: 0.1s ease-in-out;}
.foot-quick .inner .plus.active::after {transform: rotate(45deg);}
.foot-quick-sub {position: absolute; left: -1px; bottom: 0; width: calc(100% + 2px); height: 0; transition: 0.3s cubic-bezier(0.09, -0.6, 0.5, 2); opacity: 0; overflow: hidden; z-index: 10;}
.foot-quick-sub.active {height: auto; bottom: 5.5rem; opacity: 1;}
.foot-quick-sub li {border: 0.1rem solid var(--gray-30); border-bottom: 0;}
.foot-quick-sub li a {display: flex; align-items: center; min-height: 4.4rem; padding: 0 var(--spacer6); font-size: var(--fz-body-sm); background-color: var(--white);}
*/

.foot-quick .link-list {display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%;}
.foot-quick .link-list li a {gap: var(--spacer7); padding: var(--spacer5) var(--spacer2); font-size: var(--fz-body-sm); color: var(--white);}
.foot-quick .link-list li a:hover,
.foot-quick .link-list li a:focus {background-color: transparent;}
.foot-quick .link-list li a:focus {outline-color: var(--white);}
.foot-quick .link-list li a dl {display: flex; flex-direction: column; gap: var(--spacer4);}
.foot-quick .link-list li a dl dt {font-size: var(--fz-body-lg); line-height: 1; font-weight: 700;}
.foot-quick .link-list li a dl dd {line-height: 1.3; font-weight: 300;}

#footer {position: relative; background-color: var(--gray-80);}
#footer .f-logo {height: 3.1rem;}
#footer .f-logo img {height: 100%;}
#footer > .inner {display: flex; align-items: normal; flex-direction: column; gap: var(--spacer4); padding-top: var(--spacer10); padding-bottom: var(--spacer11);}
#footer .f-cnt {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; flex: 1;}
#footer .f-cnt .f-link {}
#footer .f-cnt .f-link .f-menu {display: flex; flex-wrap: wrap; gap: var(--spacer11);}
#footer .f-cnt .f-link .f-menu a {color: var(--white);}
#footer .f-cnt .f-link .f-menu a:focus {outline-color: var(--white); outline-offset: 0.4rem;}
#footer .f-cnt .f-link .f-menu .point {color: var(--warning); font-weight: 700;}

#footer .f-btm {display: flex; flex-direction: column; padding-top: var(--spacer5); border-top: 0.1rem solid var(--gray-70);}
#footer .f-btm .f-info {display: flex; flex-wrap: wrap; gap: var(--spacer5);}
#footer p {color: var(--gray-40); font-weight: 300;}


/* title */
.main-tit-wrap {display: flex; align-items: center; flex-direction: row; gap: var(--spacer2); margin: var(--spacer19) 0 var(--spacer5);}
.main-tit-wrap .tit {font-size: var(--fz-title-xxxxlg); text-transform: uppercase; color: #3659D3;}
.main-sect.bg-blue {background-color: #E7EFFD;}
.main-sect .inner {display: flex; align-items: normal; justify-content: flex-start; flex-direction: column; position: relative;}

/* index > news */
.news-wrap {display: flex; gap: var(--spacer34);}
.news-wrap .news-in {display: flex; flex-direction: column; gap: var(--spacer4); width: 100%;}
.news-wrap .news-in .news-tit {display: flex; justify-content: space-between;}
.news-wrap .news-in .news-tit .tit {font-size: var(--fz-title-xlg); color: var(--gray-90);}
.news-wrap .news-in .news-tit .more {display: flex; align-items: center; gap: var(--spacer2); color: var(--primary-50);}
.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(--spacer5); padding-top: var(--spacer6); border-top: 0.1rem solid var(--gray-30);}
.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;}
.news-wrap .news-in .news-list .d-card .c-txt {-webkit-line-clamp: 2;}
.news-wrap .news-in .news-list .d-card .text {flex-direction: row; justify-content: space-between; gap: var(--spacer2); width: 100%;}
.news-wrap .news-in .news-list .d-card .text .c-tit {margin-bottom: 0; font-size: var(--fz-title-sm); font-weight: 400; line-height: 1.2;}
.news-wrap .news-in .news-list .d-card .text .c-tit .blue {min-height: 2.2rem; padding: var(--spacer1) var(--spacer2); border-radius: var(--rd-20); background-color: #E5EEFF; font-size: var(--fz-body-xsm); color: #4C6488;}
.news-wrap .news-in .news-list .d-card .c-date {min-width: fit-content; font-size: var(--fz-body-sm); color: var(--gray-60); line-height: 1.5;}

.conts-wrap .description .tit {font-size: var(--fz-title-xlg); color: var(--gray-90);}
.conts-wrap .description .more {display: flex; align-items: center; gap: var(--spacer2); color: var(--primary-50);}
.conts-wrap .description .more a {font-size: var(--fz-title-sm);}

/* index > tab */
.tab {width: 100%; margin-bottom: var(--spacer6);}
.tab ul {display: flex; flex-wrap: wrap; align-items: stretch; position: relative; width: 100%;}
.tab li {flex: 1; width: 100%;}
.tab li:first-of-type .btn-tab {border-radius: var(--rd-12) 0 0 var(--rd-12);}
.tab li:last-of-type .btn-tab {border-radius: 0 var(--rd-12) var(--rd-12) 0;}
.tab li, .tab .btn-tab, .tab li a {display: inline-flex; align-items: center; justify-content: center; flex-direction: row; position: relative; width: 100%; height: var(--tab-h-full); font-size: var(--tab-fz-full); white-space: nowrap; color: var(--gray-70); font-weight: 700; transition: var(--transition-4); font-size: var(--tab-fz-line);}
.tab li .btn-tab, .tab li a {padding: 0 var(--tab-px-line); background-color: var(--white); border: 0.1rem solid var(--white);}
.tab li a::before {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:nth-child(2) .btn-tab li:focus, .tab li:nth-child(2) a:focus {border-radius: 0 !important;}
.tab .active .btn-tab {background-color: var(--primary); color: var(--white);}
.tab .active .btn-tab:before {position: absolute; left: 0; width: 100%;}

.tab.line {/*margin-bottom: var(--spacer25);*/ margin-bottom: var(--spacer9);}
.tab.line a {position: relative; height: 7rem; border-bottom: 0.2rem solid var(--gray-30);}
.tab.line a:focus {border-radius: 0;}
.tab.line a::before {content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 0.2rem; background-color: var(--secondary); transition: 0.4s ease-in-out; background-color: var(--secondary);}
.tab.line .active a {color: var(--secondary);}
.tab.line .active a::before {left: 0; bottom: -0.2rem; width: 100%; height: 0.4rem;}

.tab.line p {position: relative; height: 7rem; border-bottom: 0.2rem solid var(--gray-30);width: 100%;text-align: center;padding-bottom: 5.5rem;padding-top: 1.4rem;}
.tab.line p:focus {border-radius: 0;}
.tab.line p::before {content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 0.2rem; background-color: var(--secondary); transition: 0.4s ease-in-out; background-color: var(--secondary);}

.tab.typeB ul {display: flex;}
.tab.typeB li {background-color: var(--primary-5);}
.tab.typeB li:first-of-type {border-radius: var(--rd-8) 0 0 var(--rd-8);}
.tab.typeB li:last-of-type {border-radius: 0 var(--rd-8) var(--rd-8) 0;}
.tab.typeB li a {gap: var(--spacer1); position: relative; min-height: 5.2rem; background-color: transparent; border: 0; font-weight: 400; color: var(--primary-80); font-size: var(--fz-body-md); font-weight: 400;}
.tab.typeB li a img {display: none;}
.tab.typeB li:not(:last-of-type)::after {content: ''; position: absolute; right: 0; width: 0.1rem; height: 1.7rem; background-color: var(--primary-20);}
.tab.typeB li a .service-name {font-size: var(--fz-body-lg); font-weight: 600;}
.tab.typeB li a .service-cnt {display: flex; line-height: 1;}
.tab.typeB .active::after {display: none;}
.tab.typeB .active a {background-color: var(--white); border: 0.1rem solid var(--primary-50); border-radius: var(--rd-8) !important; color: var(--primary-50);}
.tab.none li a:hover {cursor: default;}
.tab.none li a:focus {outline: none;}

/* index > slide > carousel-01 */
.contents-swiper-in {width: 100%;}
.contents-swiper-in .flex {display: flex; gap: var(--spacer6);}
.contents-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;}
.contents-swiper-in .left {position: relative; max-width: 84.4rem; height: 46.4rem;}
.contents-swiper-in .left .swiper-indicator {display: flex; align-items: center; justify-content: center; gap: var(--spacer1); position: absolute; left: 4.1rem; bottom: 3.3rem; width: 15.3rem; height: 4rem; background-color: rgba(255, 255, 255, 0.25); border-radius: var(--rd-20); z-index: 1;}
.contents-swiper-in .left .swiper-indicator .swiper-pagination {display: flex; gap: var(--spacer1); width: 5.7rem; margin-top: 0; color: var(--white); font-size: var(--fz-body-sm); font-weight: 400;}
.contents-swiper-in .left .swiper-indicator .swiper-pagination span {height: 2rem;}
.contents-swiper-in .left .swiper-indicator .swiper-pagination span:first-of-type {font-weight: 700;}
.contents-swiper-in .left .swiper-indicator .swiper-navigation {display: flex;}
.contents-swiper-in .left .swiper-indicator .swiper-navigation .swiper-button-play {display: none;}
.contents-swiper-in .left .swiper-indicator .swiper-controller {}
.contents-swiper-in .left .swiper-indicator .swiper-controller button {position: relative;}
.contents-swiper-in .left .swiper-indicator button:focus {outline-color: var(--white);}
.contents-swiper-in .left .swiper-indicator button,
.contents-swiper-in .left .swiper-indicator [class^=swiper-button-] {position: static; width: 2rem; height: 2rem; margin: 0; background-color: transparent; border: 0; transform: translateY(0);}
.contents-swiper-in .left .swiper-indicator [class^=swiper-button-]::after {width: 2rem; height: 2rem; background-size: auto;}
.contents-swiper-in .left .mainTopSwiper01 {display: flex; align-items: normal; justify-content: flex-start; flex-direction: column; position: relative; height: 100%; z-index: 1;}
.contents-swiper-in .left .mainTopSwiper01 .swiper {width: 100%; height: 100%;}
.contents-swiper-in .left .mainTopSwiper01 .swiper-slide {position: relative; transition: var(--transition-3);}
.contents-swiper-in .left .mainTopSwiper01 .swiper-slide::after {content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.25); z-index: 1;}
.contents-swiper-in .left .mainTopSwiper01 .swiper-slide .img {height: 100%;}
.contents-swiper-in .left .mainTopSwiper01 .swiper-slide .img img {width: 100%; height: 100%; object-fit: cover;}
.contents-swiper-in .left .mainTopSwiper01 .title {position: absolute; left: 4.5rem; bottom: 13.7rem; font-size: var(--fz-title-xxxlg); font-weight: 600; line-height: 1.5; color: var(--white); z-index: 2;}
.contents-swiper-in .right {position: relative; max-width: 41.1rem;}
.contents-swiper-in .right .swiper-pagination {position: absolute; top: 2rem; right: 2rem; height: 2rem; margin-top: 0; z-index: 1;}
.contents-swiper-in .right .swiper-pagination .swiper-pagination-bullet {background-color: var(--white); opacity: 1;}
.contents-swiper-in .right .swiper-pagination .swiper-pagination-bullet-active {background-color: var(--white); opacity: 0.3;}
.contents-swiper-in .right .mainTopSwiper02 {height: 34.4rem;}
.contents-swiper-in .right .mainTopSwiper02 .swiper-slide {position: relative; padding: var(--spacer12) var(--spacer9); background-color: #2E78FF;}
.contents-swiper-in .right .mainTopSwiper02 .swiper-slide:nth-child(2) {background-color: var(--point-20);}
.contents-swiper-in .right .mainTopSwiper02 .swiper-slide:nth-child(2) .title {color: var(--gray-80);}
.contents-swiper-in .right .mainTopSwiper02 .swiper-slide::after {content: ''; position: absolute; right: 1rem; bottom: 0; width: 37.6rem; height: 17.4rem; background: url(/static/images/kosmes/main_top_right_slide01.svg) no-repeat; background-size: contain;}
.contents-swiper-in .right .title {color: #DBFF00;}
.contents-swiper-in .right .title .txt {font-size: var(--fz-title-xxxlg); margin-bottom: var(--spacer3); font-weight: 800; line-height: 1.2;}
.contents-swiper-in .right .title .hashtag {max-width: 17rem; font-weight: 700;}
.contents-swiper-in .right .btn-box {display: flex; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;}
.contents-swiper-in .right .btn-box a {display: flex; align-items: flex-start; justify-content: center; flex-direction: column; width: 100%; height: 12rem; padding: 0 var(--spacer10); color: var(--white);}
.contents-swiper-in .right .btn-box a:focus,
.contents-swiper-in .right .btn-box a:active {outline-color: var(--white);}
.contents-swiper-in .right .btn-box a:first-child {background-color: var(--blue);}
.contents-swiper-in .right .btn-box a:last-child {background-color: #3659D3;}
.contents-swiper-in .right .btn-box a span {}
.contents-swiper-in .right .btn-box a b {display: inline-flex; position: relative; width: fit-content; font-size: calc(var(--fz-title-xlg) + 0.3rem);}
.contents-swiper-in .right .btn-box a b::after {content: ''; position: absolute; top: 50%; right: -3rem; width: 1rem; height: 1.8rem; background: url(/static/images/kosmes/ico_arrow_right_w.svg) no-repeat 100%; transform: translateY(-50%);}

.contents-swiper-in .voucher-process {display: flex; flex-direction: column; gap: var(--spacer2); position: absolute; top: 0; right: -12.2rem; width: 8.5rem; height: 8.5rem; border-radius: var(--rd-full);}
.contents-swiper-in .voucher-process span {text-align: center; color: #451C71; font-weight: 700; line-height: 1.2;}


/* index > slide > carousel-02 */
.swiper img, .thumb-swiper img {width: 100%; height: 100%; object-fit: cover; font-size: var(--fz-body-xsm);}
.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 {display: block; 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;}
.contents-wrap02 {height: auto !important; padding: var(--spacer16) var(--spacer4) 0 !important; text-align: left;}
.contents-wrap02 .ico-danger {font-weight: 400;}
.contents-wrap02 .ico-danger::before {top: 0.1rem;}
.contents-wrap02 .service-list {margin-bottom: var(--spacer5);}
.contents-wrap02 .service-list .d-card .in .c-tit {min-height: inherit; -webkit-line-clamp: 1;}
.contents-wrap .contents-list {display: flex; align-items: normal; justify-content: space-between; flex-direction: column; gap: var(--spacer10); flex: 1; overflow: hidden;}
.contents-wrap .contents-list .contents-swiper-in {position: relative; width: 100%; max-width: inherit;}
.contents-wrap .contents-list .swiper-wrapper {/*gap: var(--spacer6);*/}
.contents-wrap .contents-list .swiper-wrapper li {min-width: 31%;}
.contents-wrap .swiper-slide a {display: flex; background-color: var(--white); border-radius: var(--rd-20); overflow: hidden;}
.contents-wrap .d-card {}
.contents-wrap .d-card .img {width: 100%; flex-shrink: 0; height: 22.5rem; background-repeat: no-repeat; background-position: center; background-color: var(--gray-40); overflow: hidden;}
.contents-wrap .d-card .img img {width: 100%; height: inherit; object-fit: cover;}
.contents-wrap .d-card .im.i1 {background-color: #E5E2EF; /*background-image: url(/static/images/kosmes/main_ico_bag_S.svg);*/}
.d-card {display: flex; align-items: normal; justify-content: flex-start; flex-direction: column; width: 100%; height: 100%; background-color: var(--white); border-radius: var(--rd-20);}
.d-card .in {display: flex; align-items: normal; justify-content: flex-start; flex-direction: column; gap: var(--spacer6); flex: 1; min-height: 20rem; padding: var(--spacer10);}
.d-card .img img {width: 100%;}
.d-card .text {display: flex; align-items: normal; justify-content: flex-start; flex-direction: column;}
.d-card .c-tag {font-size: var(--fz-title-sm); font-weight: 600; line-height: 1; color: var(--red); margin-bottom: var(--spacer2);}
.d-card .c-tit {font-size: var(--fz-title-md); font-weight: 600; line-height: 1; margin-bottom: var(--spacer6); display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.d-card .c-txt {color: var(--gray-70); display: -webkit-box; min-height: 5.2rem; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--gray-60);}
.d-card .c-btn {margin-top: auto;}



/* login-form */
.login-form {}
.login-form-area {display: flex; width: 100%; padding: var(--spacer10) var(--spacer8); border-top: 1px solid var(--gray-30); border-bottom: 1px solid var(--gray-30);}
.login-form-area .login-wrap {position: relative; width: 100%; max-width: 60.7rem; padding-right: var(--spacer14);}
.login-form-area .login-wrap input,
.login-form-area .login-wrap .btn-lg {height: 4.8rem;}
.login-form-area .login-wrap .form-conts {gap: var(--spacer2);}
.login-form-area .login-wrap .form-conts.btn-ico-wrap::before,
.login-form-area .login-wrap .form-conts.btn-ico-wrap::after {display: none;}
.login-form-area .login-wrap .form-conts.btn-ico-wrap .btn {min-width: 12.5rem !important; font-size: var(--fz-body-md) !important;}
.login-form-area .login-wrap .form-conts.btn-ico-wrap .form-control {width: 100% !important;}
.login-form-area .login-wrap::after {content: ''; position: absolute; top: 0; right: 0; width: 0.1rem; height: 100%; background-color: var(--gray-30);}
.login-form-area .login-info-wrap {width: 100%; padding: var(--spacer6) 0 var(--spacer6) var(--spacer14);}
.login-form-area.typeB {justify-content: center; padding: 0; border: 0;}
.login-form-area.typeB .login-wrap {max-width: 55rem; padding-right: 0;}
.login-form-area.typeB .login-wrap::after {display: none;}

.chk-area {display: flex; 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 */
@keyframes noti {
    0%   {transform: scale(0); opacity: 1;}
    100% {transform: scale(1); opacity: 0;}
}
.step-wrap {display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: row; margin-bottom: var(--spacer16);}
.step-wrap > li {flex: 1; position: relative; font-size: var(--fz-body-sm);}
/*.step-wrap > li:last-of-type > dl {padding-right: 0;}
.step-wrap > li:last-of-type > dl::before {left: inherit; right: 0;}*/
.step-wrap > li:last-of-type::after {display: none;}
.step-wrap > li::after {content: ''; position: absolute; top: 1rem; left: 0; width: 100%; height: 0.1rem; background-color: var(--gray-40);}
.step-wrap > li > dl {display: flex; flex-direction: column; position: relative; padding-top: var(--spacer8); padding-right: var(--spacer8);}
.step-wrap > li > dl::before {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 {content: ''; border-radius: var(--rd-full);}
.step-wrap > li .step {color: var(--gray-70);}
.step-wrap > li .step-tit {font-weight: 700; white-space: nowrap;}

.step-wrap > li.done > dl::before {width: 1.6rem; height: 1.6rem; margin-top: 0.2rem; border: 0; background-color: var(--secondary);}
.step-wrap > li.done > dl::after {position: absolute; top: 0.4rem; left: 0.2rem; z-index: 2; width: 1.2rem; height: 1.2rem; background: url(/static/images/kosmes/ico_check_8.svg) no-repeat; background-position: center; background-size: contain; z-index: 1;}
.step-wrap > li.active::before {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 > li.active > dl::before {background-color: var(--white); border-color: var(--primary);}
.step-wrap > li.active > dl::after {position: absolute; top: 0.4rem; left: 0.4rem; width: 1.2rem; height: 1.2rem; background: var(--primary) url(/static/images/kosmes/ico_step_active.svg) no-repeat center; background-size: contain; z-index: 1;}



/* join - step01 */
.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;}
.conts-wrap .box:first-of-type {padding-top: 0;}
.conts-wrap .box:last-of-type {padding-bottom: 0;}
.conts-wrap .box:not(:last-of-type) {border-bottom: 0.1rem solid var(--gray-20);}
.conts-wrap .description {margin-bottom: var(--spacer20); padding: var(--spacer10); background-color: #EDF1F5; border-radius: var(--rd-12); color: var(--gray-90); font-size: var(--fz-body-lg); line-height: 1.7;}
.conts-wrap .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);}
.conts-wrap .description .btn-wrap {display: flex; gap: var(--spacer1); margin-top: var(--spacer5);}
.conts-wrap .description.wrap {display: block; padding: var(--spacer10); margin-bottom: var(--spacer10);}
.conts-wrap .description.white + .sec-tit {margin-top: 0;}
.conts-wrap .description + .sec-tit {margin-top: var(--spacer10);}
.conts-wrap .description .c-red {font-size: var(--fz-body-md); font-weight: 700;}
.conts-wrap .description .c-red.fz-md {font-size: var(--fz-body-lg);}
.conts-wrap .description .link {text-decoration-line: underline;}
.desc-list {}
.desc-list .tit {margin-bottom: var(--spacer4); font-weight: 800;}
.desc-list ul {display: flex; flex-direction: column; gap: var(--spacer2);}
.desc-list ul:not(:last-of-type) {margin-bottom: var(--spacer8); padding-bottom: var(--spacer8); border-bottom: 0.1rem solid var(--gray-20);}
.desc-list li {position: relative; padding-left: var(--spacer3); font-weight: 400;}
.desc-list li::before {content: ''; position: absolute; top: 1.1rem; left: 0.3rem; width: 0.3rem; height: 0.3rem; border-radius: var(--rd-6); background-color: var(--gray-70);}
.desc-list * {color: var(--gray-70);}
.desc-list li.indent {padding-left: var(--spacer6);}
.desc-list li.indent::before {display: none;}
.desc-list li.indent strong {color: var(--primary-50); font-size: var(--fz-body-sm); font-weight: 400;}
.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: 400;}
.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: 200;}
.desc-list li dl {display: flex; flex-wrap: wrap;}
.desc-list li dl dt {position: relative; 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;}
.tab-info {display: none;}
.tab-info:first-of-type {display: flex;}

/* join - step02 */
.conts-wrap .agreement-scroll {padding: var(--spacer4); border: 0.1rem solid var(--gray-40); border-radius: var(--rd-12);}
.conts-wrap .agreement-scroll strong {}
.conts-wrap .agreement-scroll .scroll {height: 17.6rem; overflow-y: scroll;}
.conts-wrap .agree-check {display: flex; justify-content: space-between; padding: var(--spacer5) var(--spacer4) var(--spacer5) var(--spacer2);}


/* join - step03 */
.conts-wrap .flex {display: flex; flex-wrap: wrap; gap: var(--spacer12);}
.conts-wrap .flex p:not(.price):not(.grade-box) {position: relative; font-size: var(--fz-body-sm); font-weight: 400; color: var(--gray-70);}
.conts-wrap .flex p:not(.price):not(.grade-box)::before {content: ''; position: absolute; top: 0.5rem; left: -2.4rem; width: 0.1rem; height: 3.6rem; background-color: var(--gray-40);}
.conts-wrap .flex p strong {margin-right: var(--spacer1); font-weight: 400;}
.conts-wrap .business-num {display: flex; align-items: center; gap: var(--spacer5); padding: var(--spacer15) 0 var(--spacer5);}
.conts-wrap .business-num label {font-weight: 600; color: var(--gray-90);}
.conts-wrap .business-num input {max-width: 38.3rem;}


/* join - step04 */
.conts-wrap .conts-wrap {}
.sec-tit.align-c {display: flex; align-items: center; flex-wrap: wrap;}
.sec-tit {grid-row-gap: var(--spacer3); margin-bottom: var(--spacer8); font-size: var(--fz-title-xxlg); color: var(--gray-90);}
.sec-tit:first-of-type {margin-bottom: var(--spacer5); margin-top: var(--spacer10);}
.sec-tit:first-of-type + .form-wrap {margin-top: var(--spacer20);}
.sec-tit sub {display: inline-flex; margin-left: var(--spacer2); font-size: var(--fz-title-md); font-weight: 400; line-height: 1;}
.sec-tit ~ .table:last-of-type {margin-bottom: 0;}
.sec-tit + .info-list {margin-top: 0;}
.sec-tit:first-of-type + .sec-tit-s {margin-top: var(--spacer15);}
.sec-tit-m {display: flex; flex-wrap: wrap; align-items: center; grid-row-gap: var(--spacer2); grid-column-gap: var(--spacer4); margin-top: var(--spacer19); margin-bottom: var(--spacer5); font-size: var(--fz-title-xlg); color: var(--gray-90);}
.sec-tit-m .btn-wrap {display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacer2);}
.sec-tit-m .btn-wrap .btn {min-width: fit-content;}
.sec-tit-m span {line-height: 1;}
.sec-tit-s {display: flex; align-items: center; grid-column-gap: var(--spacer2); min-height: 3.2rem; margin-bottom: var(--spacer4); font-size: var(--fz-title-lg); color: var(--gray-90);}
.sec-tit-s > span {position: relative; padding-left: var(--spacer4);}
.sec-tit-s > span::before {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); font-weight: 400; text-align: right; line-height: 1.3;}
.sec-tit-s:not(:first-of-type) {margin-top: var(--spacer5);}
.sec-tit-s:not(:first-of-type):last-of-type {margin-top: var(--spacer5);}
.sec-tit-s.none {margin-top: 0;}
.sec-tit-s.none + .user-info {margin-bottom: 0;}
.sec-tit-s.full {align-items: flex-end; justify-content: space-between; flex-wrap: wrap;}
.sec-tit-s.full ~ .input-box:not(:first-of-type) {padding-top: var(--spacer8); padding-bottom: var(--spacer9);}
.sec-tit-s .btn-wrap {display: flex; align-items: flex-end; gap: var(--spacer2);}
.sec-tit-s .btn-wrap .right {margin-right: var(--spacer3);}
.sec-tit-s .btn-wrap::before {display: none;}
.sec-tit-s .btn-wrap .btn {height: var(--btn-h-sm);}
.sec-tit-s .btn-wrap .btn.xsm {height: var(--btn-h-xsm);}
.sec-tit .step-now {display: block; margin-bottom: var(--spacer5); font-size: var(--fz-body-md); color: var(--gray-70); font-weight: 400;}
.sec-tit .step-now strong {color: var(--primary-50); font-weight: 700;}
.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; margin-bottom: var(--spacer5);}


.input-box {display: flex; align-items: normal; justify-content: flex-start; flex-direction: column; position: relative; width: 100%; margin-bottom: var(--spacer5); padding: var(--spacer10); border: 0.1rem solid var(--gray-40); border-radius: var(--rd-12); color: var(--gray-90);}
.input-box .user-info-list .table {margin-bottom: 0;}
.input-box ~ .input-box:first-of-type {margin-bottom: 0;}
.input-box ~ .input-box:not(:last-of-type) {margin-bottom: var(--spacer5);}
.input-box + .sec-tit-s {margin-top: var(--spacer5);}
.input-box.checked {outline: 0.2rem solid var(--primary-50); border-color: transparent; transition: var(--transition-1);}
.input-box:last-child {margin-bottom: 0;}
.input-box:last-child .indent:last-of-type {margin-bottom: 0 !important;}
.input-box .num-cnt {display: flex; align-items: center; position: absolute; top: var(--spacer4); right: var(--spacer8); font-style: normal; font-size: var(--fz-title-md); z-index: 1;}
.input-box .num-cnt + .form-group {padding: 0;}
.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; font-weight: 400;}
.input-box .num-cnt .sub-cnt {position: relative; color: var(--primary-50); font-weight: 700;}
.input-box .num-cnt .sub-cnt::before {content: '추가정보'; position: absolute; top: 0.35rem; left: -6rem; width: max-content; font-size: var(--fz-body-sm); font-weight: 400; color: var(--gray-90);}
.input-box .num-cnt .all-cnt {position: relative;}
.input-box .num-cnt .all-cnt::before {content: '/'; position: absolute; top: 0.3rem; left: -0.2rem; font-size: var(--fz-body-sm);}
.m-pdt {padding-top: var(--spacer7) !important;}

.input-box .box-tit1 {margin-bottom: var(--spacer6); font-size: var(--fz-title-lg); color: var(--gray-90); line-height: 1.5;}
.input-box .box-tit1 strong {margin-right: var(--spacer1); color: var(--primary-50);}
.input-box .box-cnt {display: grid; grid-template-columns: 1fr; gap: var(--spacer9); padding: var(--spacer3) 0;}
.input-box .box-sec {display: flex; align-items: normal; justify-content: flex-start; grid-column-gap: var(--spacer7); grid-row-gap: var(--spacer9);}
.input-box .box-sec .chk-area {min-height: 4.6rem;}
.input-box ~ .agree-check {padding: var(--spacer8) 0 var(--spacer4); color: var(--gray-90);}
.input-box .form-group:first-of-type {padding-top: 0;}
.input-box .form-group:last-of-type {padding-bottom: 0;}
.input-box .box-sec:last-of-type .form-group:last-of-type {padding-bottom: 0; border-bottom: 0;}

.possible, .impossible {display: flex; align-items: center; justify-content: center; min-height: 10rem; font-size: var(--fz-title-xlg);}
.possible div, .impossible div {position: relative;}
.possible div::before, .impossible div::before {content: ''; position: absolute; top: 0.6rem; left: -5rem; width: 3.5rem; height: 3.5rem;}
.possible div, .impossible div {display: flex; align-items: baseline;}
.possible span, .impossible span {font-size: var(--fz-title-xxxlg); font-weight: 700;}
.possible {background-color: var(--primary-1);}
.possible div::before {background: url(/static/images/kosmes/ico_possible.png) no-repeat 100%; background-size: contain;}
.impossible {background-color: var(--red-bg);}
.impossible div::before {background: url(/static/images/kosmes/ico_impossible.png) no-repeat 100%; background-size: contain;}
.impossible span {margin: 0 var(--spacer2);}


.residentNum-wrap {padding: var(--spacer8) var(--spacer6); background-color: var(--gray-5);}
.residentNum-wrap .tit {margin-bottom: var(--spacer5);}
.residentNum-wrap .form-group {flex-direction: row; flex-wrap: wrap; grid-row-gap: var(--spacer3);}
.residentNum-wrap .form-group:not(:last-of-type) {justify-content: center; padding: 2rem 0; border-bottom: 0.1rem dashed var(--gray-30);}
.residentNum-wrap .form-group:first-of-type {padding-top: 0;}
.residentNum-wrap .form-group.left {justify-content: flex-start;}
.residentNum-wrap .form-group .form-conts {display: flex; align-items: center; width: fit-content; border-bottom: 0;}
.residentNum-wrap .form-group .form-conts .form-conts {flex-wrap: nowrap; width: -webkit-fill-available;}
.residentNum-wrap .form-group .form-conts .form-control {min-width: auto;}
.residentNum-wrap .form-group .form-conts label {display: flex; align-items: center; min-width: 15rem;}
.residentNum-wrap .btn-wrap {display: flex; gap: var(--spacer2);}
.residentNum-wrap .btn-wrap .btn {min-height: 4.8rem;}
.residentNum-wrap .info-list .btn {}



.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: 700;}
.user-info {display: flex; flex-direction: column; gap: var(--spacer7); margin-bottom: var(--spacer20); padding: var(--spacer10); border-radius: var(--rd-12); border: 0.1rem solid var(--gray-40);}
.user-info > .form-group:first-of-type {padding-top: 0;}
.user-info .form-group {padding-top: 0;}
.user-info .form-group:last-of-type {padding-top: 0; padding-bottom: 0; border-bottom: 0;}
.user-info:last-of-type {margin-bottom: 0;}
.user-info.row {display: grid;}
.user-info strong {color: var(--gray-90);}
.user-info-list {display: flex !important; flex: 1; gap: var(--spacer2) var(--spacer5);}
.user-info-list .tit {display: flex; align-items: center; min-width: 15rem; color: var(--gray-90); font-weight: 500; font-size: var(--fz-body-md);}
.user-info-list .tit-wide {display: flex; align-items: center; min-width: 25rem; color: var(--gray-90); font-weight: 500; font-size: var(--fz-body-md);}
.user-info-list .tit sub {display: block; margin-top: var(--spacer2); font-size: var(--fz-body-xsm); color: var(--gray-70); font-weight: 400;}
.user-info-list .tit label,
.user-info-list .tit span {position: relative;}
.user-info-list .tit.right {padding-right: var(--spacer3);}
.user-info-list .info {display: flex; flex-wrap: wrap; align-items: center; grid-column-gap: var(--spacer14); width: 100%; color: var(--gray-70);}
.user-info-list .info.xsm {max-width: 15rem;}
.user-info-list .info.sm {/*max-width: 32rem;*/}
.user-info-list .info.lg {max-width: 50rem;}
.user-info-list .info.full {width: 100%;}
.user-info-list .info dl {display: flex; flex-wrap: wrap; align-items: center;}
.user-info-list .info dl dt {position: relative; margin-right: var(--spacer4); color: var(--gray-90); font-weight: 500;}
.user-info-list .info dl dt::after {content: ':'; position: absolute; top: -0.1rem; right: -1rem;}
.user-info-list .info dl dd {}
.user-info-list .preline {white-space: pre-line;}
.user-info-list .text {flex-wrap: nowrap; width: auto; grid-column-gap: var(--spacer2);}
.user-info-list .text input[type=text] {width: auto; border: none;}


.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 {display: grid; gap: var(--spacer2); position: relative; padding-left: var(--spacer3); color: var(--gray-70); 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.4rem; height: 0.4rem; background-color: var(--primary-50); border-radius: var(--rd-12);}
.info-list strong {color: var(--gray-90);}
.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(--spacer8) !important; background-color: var(--primary-1);}
.info-list .c-blue {font-weight: 400; line-height: 1.5;}

.table + .info-list {margin-top: var(--spacer10);}
.table ~ .info-list li:last-of-type {margin-bottom: var(--spacer2);}
.table + .sec-tit {margin-top: var(--spacer20);}
.table + .info-list {margin-top: var(--spacer10) !important;}
.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: 600; 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);}

.table ~ .table-comment {display: flex; margin-top: var(--spacer2); color: var(--gray-70);}
.table ~ .table-comment ~ .table-comment {margin-top: var(--spacer2);}
.table ~ .table-comment + .sec-tit {margin-top: var(--spacer20);}
.table-comment {padding-left: var(--spacer3); color: var(--gray-70); font-weight: 400;}
.table-comment:first-of-type {margin-top: var(--spacer3);}
.table-comment.bold {font-weight: 700; color: var(--gray-90) !important;}
.user-leave {display: flex; justify-content: flex-end; align-items: center; margin-top: var(--spacer4); color: var(--gray-60); text-decoration: underline;}


/* join - step05 */
.join-complete {display: flex; justify-content: center; padding: var(--spacer15) var(--spacer3); border: 0.1rem solid var(--gray-20); border-left: 0; border-right: 0;}
.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); font-weight: 400;}
.join-complete .complete-wrap .info-wrap .info .user-id {color: var(--primary-50); font-weight: 700;}
.join-complete .complete-wrap .etc {color: var(--gray-80); font-weight: 400;}
.join-complete .complete-wrap .etc strong {color: var(--gray-90); font-weight: 700;}


.page-btn-wrap {display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacer6); margin: var(--spacer18) 0;}
.page-btn-wrap:last-child {margin: var(--spacer25) 0; 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;}


/* 사이트맵 */
.sitemap {border-top: 0.2rem solid var(--gray-90);}
.sitemap a:hover {background-color: transparent;}
.sitemap .two-depth a:focus {outline-offset: 0.4rem;}
.sitemap .sitemap-list {display: grid;}
.sitemap .sitemap-list > li {display: flex; border-bottom: 0.1rem solid var(--gray-20);}
.sitemap .one-depth {display: inline-flex; width: 100%; height: auto; min-width: 20.5rem; max-width: 20.5rem; min-height: 8.2rem; padding: var(--spacer6) var(--spacer5); font-size: var(--fz-body-xlg); font-weight: 700; border-right: 0.1rem solid var(--gray-20);}
.sitemap .list {display: grid; grid-template-columns: 1fr 1.3fr 1.1fr 1fr; gap: var(--spacer7); width: 100%; padding: var(--spacer7) var(--spacer7);}
.sitemap .list .two-depth {display: flex; flex-direction: column; gap: var(--spacer5); width: max-content;}
.sitemap .list .two-depth > li {position: relative; padding-left: var(--spacer1); line-height: 1;}
.sitemap .list .two-depth > li > a {font-size: var(--fz-body-lg); font-weight: 600; line-height: 1;}
.sitemap .list .two-depth > li > a::before {content: ''; position: absolute; top: 0.6rem; left: -1rem; width: 0.5rem; height: 0.5rem; background-color: var(--gray-90); border-radius: var(--rd-18);}
.sitemap .list .three-depth {display: flex; flex-direction: column; gap: var(--spacer2);}
.sitemap .list .three-depth li {position: relative; padding-left: var(--spacer4);}
.sitemap .list .three-depth li a {}
.sitemap .list .three-depth li a::before {content: ''; position: absolute; top: 1.3rem; left: 0.4rem; width: 0.6rem; height: 0.1rem; background-color: var(--gray-90);}


/* 메뉴판 > 상세 */
.menu-info-wrap {}
.menu-info-wrap .menu-slide-wrap {display: grid; grid-template-columns: 1fr 2fr; gap: var(--spacer10); margin-bottom: var(--spacer20); padding: var(--spacer10); border: 0.1rem solid var(--gray-40); border-radius: var(--rd-12);}
.menu-info-wrap .menu-slide-wrap .left-info {display: flex; flex-direction: column; gap: var(--spacer10); max-width: 36.8rem;}
.menu-info-wrap .menu-slide-wrap .left-info .menuInfoSwiper {min-height: 27.8rem; max-height: 27.8rem;}
.menu-info-wrap .menu-slide-wrap .left-info .menuInfoSwiper .swiper-wrapper {border-radius: var( --rd-12); background: url(/static/images/kosmes/bg_thumbnail.svg) no-repeat center 100%; background-size: cover; overflow: hidden;}
.menu-info-wrap .menu-slide-wrap .left-info .menuInfoSwiper .swiper-wrapper .swiper-slide {width: 100% !important; transition: var(--transition-2);}
.menu-info-wrap .menu-slide-wrap .left-info .thumbSwiper ul {display: flex; gap: var(--spacer4);}
.menu-info-wrap .menu-slide-wrap .left-info .thumbSwiper li {width: 8rem !important; height: 8rem;}
.menu-info-wrap .menu-slide-wrap .left-info .thumbSwiper li a {display: flex; width: 100%; height: 100%; border-radius: var(--rd-6); background: var(--gray-10) url(/static/images/kosmes/bg_thumbnail.svg) no-repeat center 100%; background-size: cover; overflow: hidden;}
.menu-info-wrap .menu-slide-wrap .left-info .thumbSwiper li a:focus {outline-offset: 0.4rem;}
.menu-info-wrap .menu-slide-wrap .right-info .d-card {padding: 0; border-radius: 0; border: 0;}
.menu-info-wrap .menu-slide-wrap .right-info .d-card .in .c-tag-list {display: flex; flex-wrap: wrap; gap: var(--spacer1);}
.menu-info-wrap .menu-slide-wrap .right-info .d-card .in .c-tag-list span {display: flex; align-items: center; min-height: 3.2rem; padding: 0 var(--spacer3); border: 0.1rem solid var(--gray-40); border-radius: var(--rd-20);}
.menu-info-wrap .menu-slide-wrap .right-info .d-card .in .text {gap: var(--spacer5);}
.menu-info-wrap .menu-slide-wrap .right-info .d-card .in .tit-box {display: grid; gap: var(--spacer5); padding-bottom: var(--spacer6); border-bottom: 0.1rem solid var(--gray-30);}
.menu-info-wrap .menu-slide-wrap .right-info .d-card .in .tit-box .btn {display: inline-flex; position: relative; width: max-content; height: 3.2rem; padding: 0 var(--spacer3) 0 var(--spacer7); font-size: var(--fz-body-sm);}
.menu-info-wrap .menu-slide-wrap .right-info .d-card .in .tit-box .btn::before {content: ''; position: absolute; left: 1rem; width: 1.2rem; height: 1.2rem; background: url(/static/images/kosmes/btn_ico_sch.svg) no-repeat;}
.menu-info-wrap .menu-slide-wrap .right-info .d-card .in .tit-box .price {display: flex; gap: var(--spacer2); color: var(--gray-70);}
.menu-info-wrap .menu-slide-wrap .right-info .d-card .in .tit-box .price b {color: var(--gray-90); font-weight: 800;}
.menu-info-wrap .menu-slide-wrap .right-info .d-card .in .grade-box .star-box {width: 13.2rem;}
.menu-info-wrap .menu-slide-wrap .right-info .d-card .in .grade-box .star-box,
.menu-info-wrap .menu-slide-wrap .right-info .d-card .in .grade-box .star {background-image: url(/static/images/kosmes/grade_star_blue.svg);}
.menu-info-wrap .menu-slide-wrap .right-info .d-card .in .grade-box .star {height: 2rem;}
.menu-info-wrap .menu-slide-wrap .right-info .d-card .in .grade-box .grade {color: var(--gray-70); font-weight: 400;}
.menu-info-wrap .menu-slide-wrap .right-info .d-card .in .c-tit {font-size: var(--fz-body-xlg);}
.menu-info-wrap .menu-slide-wrap .right-info .page-btn-wrap {margin: 0;}
.menu-info-wrap .menu-slide-wrap .right-info .page-btn-wrap.right .btn-wrap {justify-content: flex-end;}
.menu-info-wrap .menu-slide-wrap .right-info .page-btn-wrap.center .btn-wrap {justify-content: center;}

.menu-info-wrap .detail-conts {}
.menu-info-wrap .detail-conts .user-info {gap: var(--spacer8); margin-bottom: var(--spacer10); padding: var(--spacer10) var(--spacer7); border: 0;}
.menu-info-wrap .detail-conts .user-info.txt {gap: var(--spacer2); color: var(--gray-70); line-height: 2;}
.menu-info-wrap .detail-conts .user-info.txt li {line-height: 1.9;}
.menu-info-wrap .detail-conts .user-info .user-info-list {gap: var(--spacer10);}
.menu-info-wrap .detail-conts .user-info .user-info-list .info {display: flex; gap: var(--spacer1);}


/* table */
/* .table-wrap .table:last-of-type {margin-bottom: 0;} */
.table {display: table; table-layout: fixed; text-align: center; font-size: var(--fz-body-sm);}
.table:last-of-type {margin-bottom: var(--spacer20);}
.table thead {height: 6rem; background-color: var(--secondary-5); border-bottom: 0.1rem solid var(--secondary-30);}
.table thead tr {}
.table thead tr + tr {background-color: var(--secondary-7);}
.table thead tr th {height: 6rem; padding: var(--spacer2);}
.table thead ~ tbody tr:first-of-type {border-top: 0;}
.table tbody tr {border-bottom: 0.1rem solid var(--gray-30);}
.table tbody tr:first-of-type {border-top: 0.1rem solid var(--gray-30);}
.table tbody tr th, .table tbody tr td {height: 4.4rem; padding: var(--spacer3) var(--spacer4);}
.table tbody tr th:not(:first-of-type), .table tbody tr td:not(:first-of-type) {border: 0.1rem solid var(--gray-30); border-top: 0; border-bottom: 0;}
.table tbody tr th:first-of-type {border-right: 0.1rem solid var(--gray-30); color: var(--gray-90);}
.table tbody tr td:first-of-type {border-right: 0.1rem solid var(--gray-30);}
.table tbody tr td:last-of-type {border-right: 0;}
.table tbody tr td img {width: 4.6rem !important; margin-top: var(--spacer3);}
.table tr .form-check {justify-content: center;}
.table .tit {display: contents;}
.table .tit,
.table .tit a {display: -webkit-box; -webkit-box-orient: vertical; /*overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1;*/ text-align: left; font-weight: 600;}
.table .form-check input[type=checkbox] ~ label {min-width: inherit; align-items: center; padding-left: 0;}
.table td strong {color: var(--gray-90);}
.table td .br {display: block;}
.table .bg_total {background-color: var(--gray-10);}
.table .active {background-color: #f6fafd; color: #0c6cb4; font-weight: 600;}
.table .tag {display: inline-flex; justify-content: center; align-items: center; min-width: max-content; min-height: 2.4rem; padding: 0 var(--spacer2); background-color: var(--primary-5); border-radius: var(--rd-4); color: var(--primary-60); font-size: var(--fz-body-sm);}

.table-wrap.list {padding: 0; margin-bottom: var(--spacer30);}
.table-wrap.list:last-of-type {margin-bottom: 0;}
.table-wrap.list .table {border-top: 0.1rem solid var(--gray-80);}
.table-wrap.list .table:last-of-type {margin-bottom: 0;}
.table-wrap.list .table thead {height: 6rem; border-bottom-color: var(--gray-30);}
.table-wrap.list tr td input[type=checkbox] ~ label, 
.table-wrap.list tr td input[type=checkbox] + span, 
.table-wrap.list tr td input[type=checkbox] ~ a {min-width: inherit; padding-left: 0;}
.table-wrap.list tbody tr td {height: 6rem; border: 0;}
.table-wrap.list tbody tr .company {text-align: left;}
.table-wrap.list tbody tr .view {text-align: center !important;}
.table-wrap.list .cnt, .table-wrap.list .finished {text-align: -webkit-center;}
.table-wrap.list .finish {display: flex; align-items: center; justify-content: center; width: max-content; min-width: 4.2rem; height: 2.4rem; background-color: var(--primary-5); border-radius: var(--rd-4); color: var(--primary-60); font-size: var(--fz-body-sm); font-weight: 400;}
.table-wrap.list .finish.gray {min-width: 6rem; background-color: var(--gray-10); color: var(--gray-50);}

.table-wrap.list tbody tr td.category1 {text-align: center;}
.table-wrap.list tbody tr.active {background-color: var(--primary-5);}
.table-wrap.list tbody tr:hover {cursor: pointer;}


/* table - 상세 */
.txt-left {text-align: left;}
.txt-cancel {text-decoration: line-through;}
.table-wrap.view {padding: 0;}
.table-wrap.view .form-check input[type=checkbox] ~ label {padding-left: var(--spacer5);}
.table-wrap.view .form-check input[type=checkbox] ~ .file-filename img {margin-bottom: 0.2rem !important;}
.table-wrap.view tbody tr:last-of-type td:last-of-type {padding: 0;}
.table-wrap.view tbody tr {border: 0;}
.table-wrap.view > .table, .table-wrap.view > .table > tr {border: 0;}
.table-wrap.view > .table > thead {background-color: transparent; border-bottom: 0;}
.table-wrap.view .table thead th {border: 0;}
.table-wrap.view .table-wrap, .table-wrap.view .table thead th {padding: 0;}
.table-wrap.view .table-wrap tr td {border: 0.1rem solid var(--gray-30); border-left: 0;}
.table-wrap.view .table-wrap tr td:last-of-type {border-right: 0; border-left: 0.1rem solid var(--gray-30);}
.table-wrap.view .title-top {padding: var(--spacer7) 0 var(--spacer5); border-top: 0.1rem solid var(--gray-80); background-color: var(--gray-5);}
.table-wrap.view .title-top:last-of-type {border-bottom: 0.1rem solid var(--gray-30); background-color: var(--white);}
.table-wrap.view .title-top .tit {display: flex; align-items: center; position: relative; min-height: 5.6rem; padding-left: var(--spacer5); font-size: var(--fz-title-xlg); font-weight: 700; line-height: 1.4;}
.table-wrap.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-wrap.view .title-top .writer {display: flex; align-items: center; flex-wrap: wrap; grid-column-gap: var(--spacer8); grid-row-gap: var(--spacer3); min-height: 4rem; padding: 0 var(--spacer5);}
.table-wrap.view .title-top dl {display: flex; flex-wrap: wrap; grid-column-gap: var(--spacer6); grid-row-gap: var(--spacer2); position: relative;}
.table-wrap.view .title-top dl.block {}
.table-wrap.view .title-top dl:not(:last-of-type)::after {content: ''; position: absolute; top: 0.55rem; right: -1.7rem; width: 0.1rem; height: 1.4rem; background-color: var(--gray-40);}
.table-wrap.view .title-top dl dt {position: relative; min-width: 3rem; width: max-content; font-weight: 700; text-align: left;}
.table-wrap.view .title-top dl dt::after {content: ':'; position: absolute; top: -0.12rem; right: -1.5rem;}
.table-wrap.view .title-top dl .btn-wrap {display: flex; flex-direction: column;}
.table-wrap.view .title-top dl .btn-wrap .btn {margin-top: var(--spacer2);}
.table-wrap.view .title-top dl dd {color: var(--gray-70); font-weight: 300; text-align: left;}
.table-wrap.view .title-top dl dd ul {}
.table-wrap.view .title-top dl dd ul li {text-align: left;}
.table-wrap.view .contents-wrap {display: block; height: auto; min-height: 25rem; padding: var(--spacer8) var(--spacer3) var(--spacer16); text-align: left; white-space: pre-line; line-height: 2;}
.table-wrap.view .contents-wrap td {white-space: normal;}
.table-wrap.view .contents-wrap tr:first-of-type td {border-top: 0;}
.table-wrap.view .contents-wrap .contents {line-height: 2;}
.table-wrap.view .user-info-list {background-color: var(--gray-5); padding: var(--spacer4); border-radius: var(--rd-4);}
.table-wrap.view .user-info-list .tit {min-width: 10rem; border-right: 0;}

.view-prev-list {width: 100%;  border-bottom: 0.1rem solid var(--gray-90);}
.view-prev-list li {display: flex; align-items: center; width: 100%; min-height: 6.4rem;}
.view-prev-list li:not(:last-of-type) {border-bottom: 0.1rem solid var(--gray-40);}
.view-prev-list li dl {display: flex; gap: var(--spacer4);}
.view-prev-list li dl dt {min-width: 5rem; font-weight: 700; color: var(--gray-90);}
.view-prev-list li dl dd {}
.view-prev-list li a {display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; text-align: left; color: var(--gray-60);}
.view-prev-list li a:focus {outline-offset: 0.4rem;}


@media (max-width: 1200px) {


	.inner {}
	.is-m-gnb {overflow: hidden;}

	.form-select {width: 100%; min-width: inherit;}

	#allTopMenu .box .right li {height: -webkit-fill-available;}

	#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 .gnb {gap: var(--spacer2);}
	#header .two-depth {width: calc(26.7rem/1.2);}
	#header .m-gnb-wrap .m-gnb-in {min-width: 50%;}
	#header .head-body .inner {padding-top: var(--spacer5); padding-bottom: var(--spacer5);}

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

	.contents-wrap02 {padding-left: 0 !important; padding-right: 0 !important;}
	.contents-list .swiper-button-prev, .contents-list .swiper-button-next {display: none;}
	.ico-danger {padding-left: var(--spacer5) !important;}
	.ico-danger::before {min-width: 1.5rem; min-height: 1.5rem;}

	.tab.typeB ul {flex-wrap: wrap;}
	.tab.typeB ul li {flex: 1 1 33%;}
	.tab.typeB li:first-of-type {border-radius: var(--rd-8) 0 0 0;}
	.tab.typeB li:nth-of-type(3) {border-radius: 0 var(--rd-8) 0 0;}
	.tab.typeB li:nth-of-type(4) {border-radius: 0 0 0 var(--rd-8);}
	.tab.typeB li:nth-of-type(3n)::after {display: none;}

	.search-service .right label {justify-content: flex-start;}
	.search-service .search-list {grid-template-columns: auto !important;}
	.service-list-wrap {}
	.service-list ul {grid-template-columns: repeat(2, 1fr);}

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

	.check-list-wrap .check-list .form-group .form-conts {display: flex; flex-wrap: wrap;}
	.check-list-wrap .check-list .form-group .form-conts .form-check {min-width: 22%;}

	.contents-swiper-in .flex {flex-wrap: wrap;}
	.contents-swiper-in .box {height: auto; min-height: inherit;}
	.contents-swiper-in .left {max-width: 100%;}
	.contents-swiper-in .right {max-width: 100%;}
	.contents-swiper-in .right .title .txt {font-size: calc((var(--fz-title-xxxxlg) + 0.3rem)/1.5);}
	.contents-swiper-in .right .mainTopSwiper02 .swiper-slide::after {bottom: 11rem;}
	.contents-swiper-in .voucher-process  {top: inherit; bottom: -8rem; right: 0; width: 6rem; height: 6rem; z-index: 1;}
	.contents-swiper-in .voucher-process span:last-of-type {display: none;}


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

	.pop-wrap.md .popup {min-width: 90%;}
	.popup.wide, .popup.wide2 {min-width: 90%;}
	.pop-wrap {min-height: auto;}
	.pop-wrap.md {min-width: 100%;}
	.pop-wrap.md .scroll {padding: var(--spacer10) var(--spacer6);}
	.pop-wrap.md .scroll .title {grid-template-columns: 1fr 2.3fr;}
	.pop-wrap.md .scroll .title .tit2 {border-top: 0.1rem solid var(--gray-40); order: 2;}
	.pop-wrap.md .scroll .title .info {grid-row: 1/3; grid-column-end: 3;}
	.pop-wrap.md .scroll .title span {max-width: 100%;}
	.pop-wrap.md .scroll .process li .tit,
	.pop-wrap.md .scroll .process li .tit2 {max-width: 100%; padding: 0 var(--spacer2); font-size: var(--fz-body-md);}
	.pop-wrap.md .scroll .process li .info {grid-row: 1/3; grid-column-end: 3; order: 3;}
	.pop-wrap.md .scroll .process li .tit2 br {display: none;}
	.pop-wrap.md .scroll .process li dl {grid-template-columns: 1fr 2.3fr;}
	.popup .scroll-s {max-height: 30rem;}


	#footer .f-logo {height: 3.2rem;}
	#footer .f-cnt {gap: var(--spacer8);}
	#footer .f-btm {padding: var(--spacer8) var(--spacer4) 0; margin: 0 -1.6rem;}


	.login-form-area {flex-wrap: wrap;}
	.login-form-area .login-wrap {max-width: 100%; padding-right: 0;}
	.login-form-area .login-wrap input, .login-form-area .login-wrap .btn-lg {height: 3.8rem;}
	.login-form-area .login-wrap .form-conts.btn-ico-wrap .btn  {font-size: var(--fz-body-sm) !important;}
	.login-form-area .login-wrap .form-group .md {max-width: fit-content;}
	.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);}

	.conts-wrap .flex {grid-template-columns: repeat(2, 1fr);}
	.conts-wrap .flex p::before {display: none;}
	.conts-wrap .business-num label {min-width: 11rem;}
	.conts-wrap .input-box .form-group.sm .form-control {max-width: 100%; min-width: inherit;}
	.conts-wrap .agree-check {flex-wrap: wrap; gap: var(--spacer3);}
	.conts-wrap .agree-check .br {display: none;}
	
	.sec-tit-s.full ~ .input-box:not(:first-of-type) {padding-left: var(--spacer8); padding-right: var(--spacer8);}
	.input-box {padding: var(--spacer8);}
	.input-box .num-cnt {top: var(--spacer6); right: var(--spacer6);}

	.user-info {padding: var(--spacer8);}
	.user-info .tit {min-width: 14rem;}
	.user-info-list .tit sub.none {display: inline;}

	.form-wrap .form-group .tit-s, .form-wrap .form-group .col .tit-s {min-width: 13rem; font-size: var(--fz-body-sm);}

	.form-check {flex-wrap: wrap;}

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


	.form-wrap .info-list {gap: var(--spacer3);}
	.form-wrap .form-group {padding: var(--spacer6) var(--spacer2);}
	.form-wrap .form-group:not(:last-of-type) {display: flex;}
	.form-wrap .form-group .agree-check {grid-row-gap: var(--spacer4);}
	.form-wrap .form-group .table-tit {grid-template-columns: 2.5fr 1.5fr;}
	.form-wrap .form-group .table-tit .col:first-of-type {display: none;}
	.form-wrap .form-group .table-tit ~ .grid .form-conts {flex-wrap: wrap; gap: var(--spacer2);}
	.form-wrap .form-group .table-tit ~ .grid .form-conts .form-conts {flex: 1 1 49%;}
	.form-wrap .form-group .table-tit .col br {display: none;}
	.form-wrap .form-group .col2 ~ .user-info-list .form-conts {flex-wrap: wrap; flex: 1 1 48%;}
	.form-wrap .form-group .col3 {grid-template-columns: 2fr 1fr 1fr;}
	.form-wrap .form-group .col3 ~ .user-info-list {display: flex; flex-wrap: wrap; gap: var(--spacer2);}
	.form-wrap .form-group .col3 ~ .user-info-list .tit-s {margin-bottom: var(--spacer2);}
	.form-wrap .form-group .col3 ~ .user-info-list {margin-bottom: var(--spacer3);}
	.form-wrap .form-group .col3 ~ .user-info-list > .form-conts {display: grid; grid-template-columns: 2fr 0.8fr 0.8fr;}
	.form-wrap .form-group .col3 ~ .user-info-list .form-conts {max-width: inherit;}
	.form-wrap .form-group .col4 .col:first-of-type {display: flex;}
	.form-wrap .form-group .col4 {grid-template-columns: 1fr 1fr;}
	.form-wrap .form-group .col4 .col:first-of-type {justify-content: center; max-width: inherit;}
	.form-wrap .form-group .col4 ~ .user-info-list .form-conts {flex-wrap: wrap; flex: 1 1 48%;}


	/* 1200px */
	.form-group {min-width: inherit;}
	.form-group .sm {min-width: inherit;}
	.form-group .btn.sm {max-width: fit-content;}
	.form-group.lg {max-width: inherit;}
	.form-group .form-tit {flex-wrap: wrap;}
	.form-group .form-tit .desc {margin-left: 0; padding-left: var(--spacer7);}
	.form-group .form-tit .desc::before {top: 0.45rem; left: 1.2rem; width: 1.2rem; height: 1.2rem;}
	.form-group .chk-area {}
	.form-group .chk-area .form-conts {flex: 1 1 48%;}
	.form-group .flex .chk-area .form-conts {flex: initial;}
	.form-group .agree-check.col.flex .form-conts {flex-wrap: nowrap; width: auto;}
	.form-group .chk-area > .form-conts {display: flex; flex-wrap: wrap;}
	.form-group .md {max-width: calc(50% - var(--spacer2));}
	.form-group .txt {justify-content: flex-start; min-width: 14rem; font-size: var(--fz-body-sm);}

	.residentNum-wrap .form-group {flex-wrap: nowrap; align-items: flex-end;}
	.residentNum-wrap .form-group .form-conts {flex-wrap: wrap;}

	.conts-wrap .input-box .box-sec {flex-wrap: wrap;}

	.sitemap .list {grid-template-columns: repeat(2, 1fr);}

	.menu-info-wrap .menu-slide-wrap .left-info {max-width: 100%;}
	.menu-info-wrap .menu-slide-wrap .left-info .menuInfoSwiper {max-height: 40rem;}
	.menu-info-wrap .menu-slide-wrap .left-info .thumbSwiper li {width: 100% !important; max-width: calc((100% / 4) - var(--spacer3));}
	.menu-info-wrap .menu-slide-wrap {grid-template-columns: auto;}

}


@media (max-width: 640px) {
	
	
	.desktop-only{display: none;}
	.img-wrap {position: relative; min-height: 10rem; padding: var(--spacer3);}
	.img-wrap .btn-zoom {position: absolute; right: var(--spacer3); bottom: var(--spacer3); width: 2.7rem; height: 2.7rem; background: url(/static/images/kosmes/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;}
	a[class*=ico-]::after, button[class*=ico-]::after {width: 1.2rem !important; height: 1.2rem !important;}
	
	.contents-wrap .contents-list {}
	.contents-list .swiper-button-prev, .contents-list .swiper-button-next {display: flex;}
	.contents-list .swiper-navigation .swiper-button-prev.style2::after {background-image: url(/static/images/kosmes/ico_swiper_prev.svg);}
	.contents-list .swiper-navigation .swiper-button-next.style2::after {background-image: url(/static/images/kosmes/ico_swiper_next.svg);}
	.swiper-button-prev, .swiper-button-next {width: 4.8rem; height: 4.8rem; top: 55%; z-index: 1;}
	.swiper-button-prev {left: 1rem;}
	.swiper-button-next {right: 1rem;}

	.btn-ico[class*=ico-] {}
	.btn {min-height: 4rem; padding: 0 var(--btn-px-md); font-size: var(--fz-body-sm);}
	.btn.xsm {min-height: var(--btn-h-xxsm); font-size: var(--fz-body-xsm); border-radius: var(--rd-4);}
	.btn.md {height: auto; min-height: var(--btn-h-sm); font-size: var(--fz-body-sm);}
	.btn-lg {min-width: 8.4rem; height: var(--btn-h-sm); font-size: var(--fz-body-sm) !important;}
	.m-full {width: 100%; word-break: break-all;}

	#allTopMenu .inner {padding: 0;}
	#allTopMenu .box a,	#allTopMenu .box .form-select {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;}
	
	
	.paging {flex-direction: column-reverse;}
	.paging .page-links {max-width: 80%; order: 3; 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: 400;}
	.paging .page-navi.next {order: 2;}
	.paging .page-navi {min-width: 5rem; height: 3.4rem; font-size: var(--fz-body-sm);}

	.inner {padding-top: var(--spacer4);}
	.hidden #allTopMenu, .hidden #header-top, .hidden #header .head-body, .hidden #header .head-gnb, .hidden #header .two-depth-wrap, .hidden #container, .hidden #footer, .hidden .top-search {padding-right: 0;}
	.sec-tit-m {font-size: var(--fz-title-lg);}

	.is-m-gnb #header {overflow: visible;}
	#wrap.scroll-up #header .header-in {border-bottom: 0;}
	#header {overflow: hidden;}
	#header .head-gnb {display: none;}
	#header .head-gnb::after {transform: none;}
	#header.is-open .head-gnb::after {}
	#header .head-body .inner {padding-top: var(--spacer4); padding-bottom: var(--spacer4);}
	#header .head-body .logo {height: 2.7rem;}
    #header .head-body .logo a {line-height: 100%;}
	#header .head-body .head-in {align-items: flex-end; grid-column-gap: 0; min-height: auto;}
	#header .head-body .head-etc {display: none;}
	#header .head-body .btn-navi {gap: var(--spacer2); font-size: var(--fz-body-sm); padding: 0;}
	#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.logout {line-height: 0;}
	#header .head-body .btn-navi.join::before,
	#header .head-body .btn-navi.login::before {display: none;}
	#header .head-body .btn-navi.logout::before {width: 1.8rem; height: 1.8rem; background-size: inherit;}
	#header .head-body .btn-navi.sch {display: inline-block; width: 1.9rem; height: 1.9rem; white-space: nowrap; overflow: hidden;}
	#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; 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 {gap: var(--spacer1) 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 {width: 2rem; height: 2rem;}
    #header .m-gnb-head .m-gnb-login {font-size: var(--fz-body-sm);}
	#header .m-gnb-head .m-gnb-login .name {font-size: var(--fz-body-sm); font-weight: 500;}
	#header .m-gnb-body .submenu .m-one-depth {font-size: var(--fz-body-sm);}
	#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;}


	#footer > .inner {gap: var(--spacer8); padding: var(--spacer8) var(--spacer4) !important;}
	#footer .f-logo {height: 2.4rem;}
	#footer .f-cnt {flex-direction: column; gap: var(--spacer5);}
	#footer .f-cnt .f-info {flex-direction: column; gap: var(--spacer4); font-size: var(--fz-body-sm);}
	#footer .f-cnt .f-link .f-menu {gap: var(--spacer4); font-size: var(--fz-body-xsm);}
	#footer .f-cnt .f-link .link-go {gap: var(--spacer4);}
	#footer .f-cnt .f-link .link-go .btn-txt {font-size: var(--fz-body-sm); height: auto; padding: 0;}
	#footer .f-btm {flex-direction: column; font-size: var(--fz-body-xsm);}
	#footer .f-btm .f-info {gap: var(--spacer2);}
	#footer .f-btm .f-btm-text {flex-direction: column; align-items: flex-start; width: 100%;}
	#footer .f-btm .f-btm-text .f-menu {gap: var(--spacer4) var(--spacer6);}
	#footer .f-btm .f-btm-text .f-menu a {font-size: var(--fz-body-sm); height: auto; padding: 0;}
	#footer .f-btm .f-btm-ban .ban-txt {line-height: 1.1; word-break: break-all;}

	.foot-quick {padding: var(--spacer4) var(--spacer6);}
	.foot-quick .link-list li {width: 100%;}
	.foot-quick .link-list li a {position: relative; flex-direction: column; gap: 0; padding: var(--spacer5) 0;}
	.foot-quick .link-list li a .img {position: absolute; top: 1.6rem; left: 0; width: 1.8rem;}
	.foot-quick .link-list li a dl dt {padding-left: var(--spacer7); font-size: var(--fz-body-md);}
	.foot-quick .link-list li a dl dd br {display: none;}
	.foot-quick .inner {flex-direction: column; padding: 0 !important;}
	.foot-quick .inner .link {font-size: var(--fz-body-sm); max-width: inherit; min-height: 4.8rem; padding: 0 var(--spacer4); border: 0;}
	.foot-quick .inner .link:first-child {border: 0;}
	.foot-quick .inner .link:not(:first-child) {border-top: 0.1rem solid var(--gray-30);}
	.foot-quick .inner .none {flex-direction: column; gap: 0; height: auto; padding: 0;}
	.foot-quick .inner .plus {min-height: 5.4rem; padding: 0 var(--spacer4);}
	.foot-quick-sub {position: static;}

	.login-form-area {padding: var(--spacer10) 0;}
	.login-form-area .login-wrap .form-conts.btn-ico-wrap .btn {min-width: 9.5rem !important;}
	.login-form .form-group {border-bottom: 0; padding-bottom: 0;}
	.login-form-area .login-info-wrap {font-size: var(--fz-body-sm);}
    .login-form .form-group .md {max-width: 100%;}


	/* input 640 */
	textarea {min-height: 14rem;}
	input[type=tel], input[type=number], input[type=date], input[type=text], input[type=password], select, .form-date, .form-select, .form-control {height: var(--input-h-sm); font-size: var(--fz-body-sm); border-radius: var(--input-rd-sm);}
	.form-date, input[type=tel] {max-width: inherit;}
	.form-date {min-width: inherit;}

	.file .form-check:first-of-type input[type=radio] ~ label {min-width: 6rem;}
	.form-check:first-of-type input[type=radio] ~ label {min-width: 7.8rem;}
	.form-check:last-of-type input[type=radio] ~ label {min-width: 6.5rem;}
	.form-check input[type=checkbox] ~ label {min-height: auto; padding-left: 3rem; font-size: var(--rdo-fz-sm); min-width: inherit;}
	.form-check input[type=radio] ~ label {padding-left: calc(var(--rdo-size-sm) + var(--spacer2)); font-size: var(--rdo-fz-sm); min-width: inherit;}
	.form-check input[type=checkbox] ~ label::before, .form-check input[type=radio] ~ label::before {position: absolute; left: 0.7rem; width: var(--rdo-size-sm); height: var(--rdo-size-sm);}
	.form-check input[type=checkbox] ~ label::after, .form-check input[type=radio] ~ label::after {width: var(--rdo-chk-sm); height: var(--rdo-chk-sm); top: calc((var(--rdo-size-sm) - var(--rdo-chk-sm)) / 2); left: 4px;}
	.form-check.lg > [type=radio] ~ label {padding-left: calc(var(--rdo-size-md) + var(--spacer2)); font-size: var(--rdo-fz-md);}
	.form-check.lg > [type=radio] ~ label::before {top: 3px; left: 3px; width: var(--rdo-size-md); height: var(--rdo-size-md);}
	.form-check.lg > [type=radio] ~ label::after {top: calc((var(--rdo-size-lg) - var(--rdo-chk-md)) / 1.7); left: calc((var(--rdo-size-lg) - var(--rdo-chk-md)) / 1.7); width: var(--rdo-chk-md); height: var(--rdo-chk-md);}
	.form-select.sm, .form-select.md {max-width: 100%;}
	.form-check input[type=checkbox]:focus ~ label:before, .form-check input[type=radio]:focus ~ label:before {outline-offset: 0.2rem;}
	.item .chk-area {flex-wrap: wrap;}
	.item .form-check input[type=radio] ~ label {min-width: auto; gap: var(--spacer1); padding-left: 0;}


	.info-list li {font-size: var(--fz-body-sm);}
	.info-list .none {margin-bottom: var(--spacer2);}
	.box-sec .form-group {border-bottom: 0; padding: 0;}

	.input-box {padding: var(--spacer5) var(--spacer2) var(--spacer6); border-left: 0; border-right: 0; border-radius: 0;}
	.conts-wrap .input-box:not(:first-of-type) {margin-top: 0; padding: var(--spacer6) var(--spacer2); /*border-top: 0; border-left: 0; border-right: 0; border: 0;*/  border-radius: 0; font-size: var(--fz-body-sm);}
	.input-box .form-group:last-of-type {gap: var(--spacer3);}
	.input-box .form-group .ex {font-size: var(--fz-body-xsm);}
	.input-box .num-cnt {right: 1.2rem; font-size: var(--fz-body-sm);}
	.input-box .num-cnt .sub-cnt::before {top: 0;}
	.input-box .num-cnt .all-cnt::before {top: 0;}
	.input-box .num-cnt + .form-group {padding: var(--spacer5) 0;}
	.input-box .num-cnt + .box-cnt:first-of-type {padding: 0 0 var(--spacer5) 0;}
	.input-box .num-cnt .form-check input[type=checkbox] ~ label {padding-left: 0;}
	.input-box .num-cnt .form-check input[type=checkbox] ~ label::before {position: static;}
	.input-box .box-cnt {gap: var(--spacer6); padding-top: var(--spacer6); padding-bottom: 0;}
	.input-box .box-cnt:last-of-type {padding-top: 0; padding-bottom: 0; border-top: 0;}
	.input-box .box-sec {gap: var(--spacer6);}
	.input-box .box-sec .chk-area {min-height: inherit;}
	.input-box ~ .agree-check p {line-height: 1.9;}
	.input-box strong.c-red {right: 0.6rem;}
	.input-box.bg-white .form-group {}
	.m-pdt {padding-top: var(--spacer14) !important;}

	.form-box {/*padding: var(--spacer7) var(--spacer2);*/}
	.form-box.pd0 {padding: 0;}
	.form-box.pd0 .chk-area .form-conts {grid-template-columns: 1fr;}
	.form-box .form-group {border-bottom: 0;}

	.form-wrap:not(:last-of-type) {margin-bottom: var(--spacer20);}
	.form-wrap .box {padding-bottom: 0 !important;}
	.form-wrap .flex {grid-template-columns: auto; gap: var(--spacer8);}
	.sec-tit-s .c-red, .form-wrap .tit .c-red {position: relative; top: 0.3rem; right: -0.2rem;}
	.form-wrap [class*="-list"].sm {gap: var(--spacer3);}
	.form-wrap [class*="-list"].sm li {align-items: flex-start; flex-wrap: wrap; line-height: 1.5;}
	.form-wrap [class*="-list"].sm li::before {top: 0.9rem !important;}
	.form-group .grid {display: block;}
	.form-group .grid .flex {grid-template-columns: 1fr !important;}

	.form-group .sm[class*=form-] {width: 100% !important;}
	.form-wrap .agree-wrap2 {grid-row-gap: var(--spacer5);}
	.form-wrap .form-group.agree-wrap {/*padding: var(--spacer6) 0 !important;*/}
	.form-wrap .form-group.agree-wrap:last-of-type {padding-bottom: 0 !important;}
	.form-wrap .form-group.agree-wrap, .form-wrap .form-group.agree-wrap .agree-check.col {grid-row-gap: var(--spacer8) !important;}
	.form-wrap .form-group.agree-wrap .agree-check {gap: var(--spacer3); padding: 0;}
	.form-wrap .form-group.agree-wrap .m-flex {flex-direction: row; grid-row-gap: var(--spacer1);}
	.form-wrap .form-group.agree-wrap .m-flex li {padding-left: 0;}
	.form-wrap .form-group.agree-wrap .m-flex li::before {display: none;}
	.form-wrap .form-group.agree-wrap .m-flex .chk-area {flex-wrap: nowrap; justify-content: flex-end; gap: var(--spacer4);}
	.form-wrap .form-group.agree-wrap .info-list:last-of-type {padding-bottom: 0;}
	.form-wrap .form-group.agree-wrap .info-list li:last-of-type {margin-bottom: 0;}
	.form-wrap .form-group.agree-wrap .info-list.sm li {font-size: var(--fz-body-xsm);}
	.form-wrap .form-group .agree-check {flex-direction: column;}
	.form-wrap .form-group .agree-check .tit {justify-content: space-between; flex-wrap: nowrap; grid-row-gap: var(--spacer1); width: 100%; padding-right: 0;}
	.form-wrap .form-group .agree-check .page-btn-wrap {margin: 0; order: 1;}
	.form-wrap .form-group .agree-check.col {gap: var(--spacer5); padding: 0;}
	.form-wrap .form-group .agree-check.col .tit {order: 0; width: auto;}
	.form-wrap .form-group .agree-check.col .tit-s {width: 100%;}
	.form-wrap .form-group .agree-check.col .tit-s br {display: none;}
	.form-wrap .form-group .agree-check.col .form-conts {max-width: inherit; font-size: var(--fz-body-sm);}
	.form-wrap .form-group .agree-check.col .form-conts .txt {font-size: var(--fz-body-xsm);}
	.form-wrap .form-group .agree-check.col .form-conts .form-control {max-width: inherit;}
	.form-wrap .form-group .agree-check .tit.right {width: fit-content; flex-wrap: wrap; order: 1;}
	.form-wrap .form-group .agree-check .chk-area {flex-wrap: wrap; grid-row-gap: var(--spacer2); grid-column-gap: var(--spacer4);}
	.form-wrap .form-group .agree-check .chk-area:last-of-type {order: 2;}
	.form-wrap .form-group .agree-check.flex .form-conts,
	.form-wrap .form-group .agree-check.flex .form-conts .form-conts {flex-wrap: nowrap;}
	.form-wrap .form-group .agree-check.flex .tit-s {width: auto;}
	.form-wrap .form-group .agree-check.flex > .form-conts > .form-conts {width: 100%;}

	.form-wrap .form-group .expect {font-size: var(--fz-title-md); text-align: center;}
	.form-wrap .form-group .expect .total-sum {display: block; font-size: var(--fz-title-lg);}
	.form-wrap .form-group .table-tit {display: none; flex-wrap: wrap;}
	.form-wrap .form-group .table-tit ~ .user-info-list .form-conts {align-items: center; justify-content: flex-end;}
	.form-wrap .form-group .table-tit ~ .user-info-list .form-conts .form-control {min-width: fit-content; max-width: 100%;}
	.form-wrap .form-group .table-tit ~ .user-info-list .form-conts .form-conts::before {display: block; position: absolute; left: var(--spacer2); font-size: var(--fz-body-sm); z-index: 1;}
	.form-wrap .form-group .table-tit ~ .user-info-list .form-conts .form-conts:nth-of-type(1)::before {content: '2021년';}
	.form-wrap .form-group .table-tit ~ .user-info-list .form-conts .form-conts:nth-of-type(2)::before {content: '2022년';}
	.form-wrap .form-group .table-tit ~ .user-info-list .form-conts .form-conts:nth-of-type(3)::before {content: '2023년';}
	.form-wrap .form-group .table-tit ~ .user-info-list .form-conts .form-conts:nth-of-type(4)::before {content: '분야별 평균';}
	.form-wrap .form-group .table-tit ~ .grid {display: grid; gap: var(--spacer5); grid-template-columns: 1fr;}
	.form-wrap .form-group .table-tit ~ .grid:not(:last-of-type) {padding-bottom: var(--spacer5); border-bottom: 0.1rem solid var(--gray-30);}
	.form-wrap .form-group .table-tit ~ .grid .form-conts {flex: 1 1 48%; gap: var(--spacer3); font-size: var(--fz-body-sm);}
	.form-wrap .form-group .col2 ~ .user-info-list {display: grid; grid-template-columns: 1fr;}
	.form-wrap .form-group .col2 ~ .user-info-list > .form-conts {display: grid; grid-template-columns: 1fr 1fr;}
	.form-wrap .form-group .col2 ~ .user-info-list .form-conts::before,
	.form-wrap .form-group .col3 ~ .user-info-list .form-conts::before,
	.form-wrap .form-group .col4 ~ .user-info-list .form-conts::before {display: none !important;}
	.form-wrap .form-group .col3 ~ .user-info-list .form-conts:first-of-type {width: 100%;}
	.form-wrap .form-group .col3 ~ .user-info-list .limit-box {display: flex; flex-wrap: nowrap;}
	.form-wrap .form-group .col3 ~ .user-info-list > .form-conts {display: flex;}
	.form-wrap .form-group .col4 ~ .user-info-list > .form-conts {display: grid; grid-template-columns: 1fr 2fr;}
	.form-wrap .form-group .col4 ~ .user-info-list .form-conts input,
	.form-wrap .form-group .col4 ~ .user-info-list .form-conts select {}
	.form-wrap .form-group:first-of-type {padding: 0;}
	.form-wrap .form-group:last-of-type {border-bottom: 0; padding-left: 0; padding-right: 0;}
	.form-wrap .form-group:not(:last-of-type) {padding-left: 0; padding-right: 0; padding-bottom: var(--spacer5);}


	.form-group {display: grid; grid-row-gap: var(--spacer3); width: 100%; padding-bottom: var(--spacer5); border-bottom: 0.1rem solid var(--gray-30);}
	.form-group.full:last-of-type {padding-bottom: 0;}
	.form-group .form-group {padding: 0;}
	.form-group .link-group .btn.md {max-width: max-content; font-size: var(--fz-body-xsm);}
	.form-group .link-group > li + li {margin-left: var(--spacer2); padding-left: var(--spacer2);}
	.form-group .chk-area .form-conts {/*grid-template-columns: auto;*/}
	.form-group .chk-area .limit-box .form-conts {flex-wrap: nowrap;}
	.form-group .form-tit,
	.form-group .form-tit label {font-size: var(--fz-body-sm);}
	.form-group .form-tit + .form-conts.xsm .btn.blue {min-width: inherit;}
	.form-group .form-tit .desc {padding-left:0; font-size: var(--fz-body-xsm);}
	.form-group .form-tit .desc::before {display: none;}
	.form-group .form-conts  {flex-wrap: wrap; gap: var(--spacer2);}
	.form-group .form-conts .form-control {min-width: inherit; max-width: 100%;}
	.form-group .form-conts .cnt {margin-left: 0;}
	.form-group .form-conts .ex {padding-left: var(--spacer2); font-size: var(--fz-body-sm);}
	.form-group .form-conts .form-date {min-width: auto;}
	.form-group .form-conts .limit-box .form-conts + .form-conts {max-width: inherit; min-width: 11rem; justify-content: flex-start;}

	.form-group .chk-area {gap: var(--spacer3); min-height: inherit; /*border: 2px solid green;*/}
	.form-group .chk-area:not(:last-of-type) {}

	.form-group.row .form-conts {/*flex-direction: column;*/}
	.form-group.row .form-conts .form-conts.sm {flex-direction: column; gap: 0;}
	.form-group.row .form-conts label {justify-content: flex-start; min-width: max-content; font-size: var(--fz-body-sm);}
	.form-group.row .form-conts.right {flex-direction: column; align-items: flex-start;}
	.form-group.row .form-conts.col label {align-items: flex-start;}
	.form-group.row .form-conts.col .form-conts {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacer2);}
	.form-group.row .form-conts.sm .form-select {max-width: 100%;}
	.form-group.md {max-width: 100%;}
	.form-group.full .xsm {flex-wrap: nowrap; max-width: 100%;}
	.form-group.full .form-control {max-width: 100%; width: 100% !important;}
	.form-group.full .form-tit .desc::before {left: 0.3rem;}
	.form-group.full.addr {border-bottom: 0; padding-right: 0 !important; padding-bottom: 0;}
	.form-group.full.addr .xsm {max-width: 21rem;}

	.user-info .form-group {padding: 0 0 var(--spacer7);}
	.user-info .form-group:last-of-type {padding-bottom: 0; /*border: 2px solid blue;*/}
	.user-info-list {display: grid !important; grid-template-columns: 1fr; flex: auto; width: -webkit-fill-available;}
	.user-info:first-of-type .user-info-list {display: grid; grid-template-columns: 0.2fr 2fr;}
	.user-info-list.nowrap {grid-template-columns: 0.1fr 1fr !important;}
	.user-info-list.nowrap .text {flex-wrap: nowrap; justify-content: flex-end;}
	.user-info-list.nowrap .text input[type=text] {text-align: right !important;}
	.user-info-list .tit {min-width: 11.5rem; font-size: var(--fz-body-sm);}
	.user-info-list .tit sub {display: inline;}
	.user-info-list .info .btn.xsm {width: max-content;}
	.user-info-list .info.sm {max-width: inherit;}
	.info-list li::before {top: 1.1rem !important;}
	.info-list .btn-wrap {padding-left: 0;}

	.form-wrap .form-group .tit-s, .form-wrap .form-group .col .tit-s {min-width: 11.5rem;}
	.form-wrap .form-group .tit span {display: inline-block;}
	.user-info-list .info {flex-direction: column; align-items: normal; gap: var(--spacer2); font-size: var(--fz-body-sm); font-weight: 300;}
	.user-info-list .info dl {position: relative; padding-left: var(--spacer2);}
	.user-info-list .info dl:not(:last-of-type) {margin-right: 2rem;}
	.user-info-list .info dl::before {content: ''; position: absolute; top: 1.1rem; left: 0; width: 0.3rem; height: 0.3rem; background-color: var(--gray-90);}
	.user-info-list .info dl dt {}
	.user-info-list .text {flex-direction: row; align-items: baseline; gap: var(--spacer1); font-size: var(--fz-body-sm);}
	.user-info-list .text .form-conts {width: auto;}
	.user-info-list .text input[type=text] {height: auto; text-align: left !important;}

	.file-form {min-height: 12.5rem; padding: var(--spacer2);}
	.file-form .file-container {min-height: 7rem;}
	.file-form .c-red {width: 80%; font-size: var(--fz-body-xsm); text-align: center; line-height: 1;}
	.file-form .file-container .ico-del {height: 1.5rem;}
	.file-form .file-list {max-height: 7rem; padding-top: var(--spacer2);}
	.file-form .file-list > div .file-btn {gap: var(--spacer1);}
	.file-form .file-list > div .file-filename {height: -webkit-fill-available; margin-left: 0; text-align: left; font-size: var(--fz-body-xsm); line-height: 1.8;}
	.file-form .file-list > div input[type=checkbox] ~ label {padding-left: 0;}
	.file-form .file-list > div input[type=checkbox] ~ label::before, .file-form .file-list > div input[type=radio] ~ label::before {position: static; margin-top: var(--spacer4);}
	.user-info-list.form-check .file-form .file-list > div input[type=checkbox] ~ label::before, .user-info-list.form-check .file-form .file-list > div input[type=radio] ~ label::before {position: static; margin-top: calc(var(--spacer2) + 0.2rem);}
	/*.file-form .file-list > div .file-filesize {min-width: 6.6rem;}*/
	.file-form .file-filesize {font-size: var(--fz-body-xsm); text-align: right;}
	.file-form .file-filename ~ .file-btn {gap: 0;}
	.file-form .file-filename ~ .file-btn .btn {gap: 0; min-width: inherit !important; min-height: inherit;}
	.file-form .file-btn .btn {gap: var(--spacer1); min-height: 2.6rem; min-width: 5rem !important; padding: 0 var(--spacer2); border-radius: var(--rd-2); font-size: var(--fz-body-xsm);}
	.file-form .ico-upload::after {width: 1.2rem;}

	.file-form .upload-list li {width: 100%; min-height: auto; padding: var(--spacer2) var(--spacer2) var(--spacer2) var(--spacer3); font-size: var(--fz-body-xsm);}
	.file-form .upload-list .ico-down {align-items: center; min-width: 7rem;}
	.file-form .upload-list .file-size {font-size: var(--fz-body-xsm);}

	.file-form.view {padding: 0 !important; margin: 0; gap: var(--spacer2);}
	.file-form.view .file-list {grid-template-columns: 1fr;}
	.file-form.view .file-list > div {gap: var(--spacer1); width: 100%; min-height: 2.8rem; padding: 0 var(--spacer3); font-size: var(--fz-body-sm); border-radius: 0;}
	.file-form.view .file-list > div .file-filename {margin-left: 0;}
	.file-form.view .file-list > div .flex {gap: var(--spacer1);}
	.file-form.view .file-list > div .file-filename {overflow: hidden;}
	.file-form.view .file-list > div .file-filesize {min-width: 5rem;}
	.file-form.view .file-list .form-check > div {displayy: flex; align-items: center; width: 100%;}

	.view-prev-list li {min-height: 4.4rem;}

	.file {grid-row-gap: var(--spacer5);}
	.file .tit {flex-wrap: wrap;}
	.file .form-group {display: block; padding-bottom: var(--spacer6) !important;}
	.file .form-group:last-of-type, .file .form-group:nth-last-of-type(2) {padding-bottom: var(--spacer6) !important;}
	.file .form-group:last-of-type {display: flex; gap: var(--spacer3); max-width: 100%; padding-bottom: 0 !important;}
	.file .form-group.full:last-of-type {display: grid; gap: var(--spacer10); padding-left: 0; padding-right: 0;}
	.file .form-group .btn.sm {height: auto; min-height: 2.6rem; font-size: var(--fz-body-xsm);}
	.file .file-form:last-of-type {max-width: 100%; padding-bottom: var(--spacer3);}
	
	.form-survey tbody tr .tit-num {top: 0;}
	.form-survey tbody tr .satisLevel .chk-area {flex-wrap: wrap; padding-left: 0;}
	.form-survey .form-check input[type=checkbox] ~ label, .form-survey .form-check input[type=radio] ~ label {padding-left: var(--spacer8);}
	.form-survey .form-check input[type=checkbox] ~ label::before, .form-survey .form-check input[type=radio] ~ label::before {top: 0.2rem;}
	.form-survey .form-check input[type=checkbox] ~ label::after, .form-survey .form-check input[type=radio] ~ label::after {top: 0.6rem; left: 1.1rem;}
	

	.possible, .impossible {min-height: 8rem; font-size: var(--fz-title-md);}
	.possible span, .impossible span {font-size: var(--fz-title-lg);}
	.possible div::before, .impossible div::before {left: -2.4rem; width: 2rem; height: 2rem;}

	.residentNum-wrap .form-group {flex-wrap: wrap; grid-row-gap: var(--spacer3);}
	.residentNum-wrap .form-group .form-conts label {font-size: var(--fz-body-sm);}
	.residentNum-wrap .form-group:last-of-type {padding-top: var(--spacer5); padding-bottom: 0 !important;}
	.residentNum-wrap .btn-wrap {flex-wrap: wrap;}
	.residentNum-wrap .btn-wrap .btn {min-height: 3.2rem; font-size: var(--btn-fz-xsm);}
	.residentNum-wrap .tit {font-size: var(--fz-body-sm);}


	.main-tit-wrap .tit {font-size: var(--fz-title-xxlg);}
	.main-sect .inner {padding-top: var(--spacer8) !important; padding-bottom: var(--spacer10) !important;}

	.d-card .in {min-height: 17rem; padding: var(--spacer8) var(--spacer5);}
	.d-card .c-tit {margin-bottom: var(--spacer2) !important; font-size: var(--fz-title-sm) !important;}
	.d-card .img {height: auto !important;}
	.d-card .c-txt {min-height: inherit; font-size: var(--fz-body-sm); line-height: 1.7;}

	.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 input[type=text] {height: 4rem; padding: 0 var(--spacer4); border-radius: var(--rd-4); font-size: var(--fz-body-sm);}
	.top-search .sch-wrap .sch-form-wrap .sch-input 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-tit span {font-size: var(--fz-body-sm);}
	.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-input {margin: var(--spacer4) 0 var(--spacer3);}
	.top-search .sch-wrap .sch-form-wrap .sch-input .ico-sch {width: 1.8rem; height: 1.8rem; right: var(--spacer4);}

	.selected-ranks {font-size: var(--fz-body-xsm);}


	#container > .inner {padding: var(--spacer6) var(--spacer4) var(--spacer15);}


	.tab li, .tab .btn-tab, .tab li a {height: auto; min-height: var(--tab-h-fill) !important; font-size: var(--fz-body-sm) !important;}
	.tab.typeB li a .service-name {font-size: var(--fz-body-sm);}

	.tab.line {margin-bottom: var(--spacer12);}
	.tab.line a {height: auto; border-width: 0.1rem;}
	.tab.full .btn-tab {height: var(--tab-h-fill) !important; font-size: var(--tab-px-fill) !important;}
	.tab.typeB ul {}
	.tab.typeB ul li {flex: 1 1 50%;}
	.tab.typeB li:not(:nth-child(2n+1))::after {display: none;}
	.tab.typeB li:nth-child(3)::after {display: block;}
	.tab.typeB li:nth-of-type(2) {border-radius: 0 var(--rd-8) 0 0;}
	.tab.typeB li:nth-of-type(3),
	.tab.typeB li:nth-of-type(4) {border-radius: 0;}
	.tab.typeB li:nth-of-type(5) {border-radius: 0 0 0 var(--rd-8);}

    .contents-wrap .d-card .img {min-height: 17rem;}
    .contents-list .d-card .c-txt {min-height: 7.2rem;}
	.contents-swiper-in .voucher-process {top: 2rem; right: 2rem; bottom: inherit; width: 5.4rem; height: 5.4rem;}
	.contents-swiper-in .left {height: 28rem;}
	.contents-swiper-in .left .mainTopSwiper01 .title {left: var(--spacer5); bottom: var(--spacer24); font-size: var(--fz-title-lg); line-height: 1.3;}
	.contents-swiper-in .left .swiper-indicator {left: var(--spacer5); bottom: var(--spacer5); width: 14rem; height: 3.2rem;}
	.contents-swiper-in .left .swiper-indicator .swiper-pagination {width: 6rem; gap: var(--spacer1); font-size: var(--fz-body-xsm);}
    .contents-swiper-in .left .swiper-indicator [class^=swiper-button-]::after {width: 1rem; height: 1rem;}
	.contents-swiper-in .right .mainTopSwiper02 {height: 30rem;}
	.contents-swiper-in .right .mainTopSwiper02 .swiper-slide {padding: var(--spacer9) var(--spacer7);}
	.contents-swiper-in .right .mainTopSwiper02 .swiper-slide::after {width: 22rem; right: 0; bottom: 2rem;}
	.contents-swiper-in .right .btn-box a {height: 10rem; padding: 0 var(--spacer5);}
	.contents-swiper-in .right .btn-box a b {font-size: var(--fz-title-lg);}
	.contents-swiper-in .right .title .txt {font-size: var(--fz-title-xlg);}
	.contents-swiper-in .right .title .hashtag {max-width: 15rem; font-size: var(--fz-title-xsm);}
	.contents-swiper-in .right .title .hashtag span {line-height: 1;}

	.breadcrumb-wrap {margin-bottom: var(--spacer15);}
	.breadcrumb-wrap .breadcrumb {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/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/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);}

	.search-service {padding: var(--spacer8) var(--spacer4); margin-bottom: var(--spacer15);}
	.search-service .form-conts label {font-size: var(--fz-body-sm);}
	.search-service .left {gap: var(--spacer4) var(--spacer6);}
	.search-service .search-list {gap: var(--spacer4);}
	.search-service .search-list .form-conts {justify-content: flex-start !important; gap: var(--spacer2);}
	.search-service .search-list .form-date {font-size: var(--fz-body-xsm);}
	.search-service .search-info { padding-top: 0; border-top: 0;}
	.search-service .search-info .left .btn {min-height: var(--btn-h-xsm); padding: 0 var(--btn-px-sm); font-size: var(--fz-body-xsm);}
	.search-service .search-info .left .txt {font-size: var(--fz-body-xsm);}
	.search-service .search-info .left .txt span {margin-bottom: var(--spacer2); font-size: var(--fz-body-sm);}
	.search-service .search-info .right {width: 100%; justify-content: center !important;}
    .search-service.full ~ .table-wrap.list tr {height: 7.6rem;}
	.search-service.full .search-list:first-of-type {border: 0; padding: 0;}

	.service-list-sch .page-cnt {grid-template-columns: 1fr; gap: var(--spacer2); margin-bottom: var(--spacer2);}
	.service-list-sch .page-cnt .table-comment {margin-top: 0 !important;}
	.service-list-sch .page-cnt .page-cnt-wrap {flex-wrap: wrap; gap: 0 var(--spacer5); font-size: var(--fz-body-sm);}
	.service-list-sch .page-cnt .page-cnt-wrap .state-cnt .cnt-box::after {top: 0.4em; right: -1.1rem; height: 1rem;}
	.service-list-sch .page-cnt .page-cnt-wrap .state-cnt .cnt-box strong {display: flex; align-items: center;}
	.service-list-sch .page-cnt .page-cnt-wrap .form-select {font-size: var(--fz-body-sm);}
	.service-list-sch .page-cnt .form-conts {justify-content: flex-start;}
	.service-list-sch .page-cnt .form-conts .form-control {max-width: 100%;}
	.service-list-sch .page-cnt .form-conts .form-control ~ .ico-sch {width: 1.6rem; height: 1.6rem; background-size: 95% 100%;}
	.service-list {}
	.service-list ul {grid-template-columns: auto;}
	.service-list ul li {}
	.service-list ul li .d-card .img {height: 15rem !important; font-size: var(--fz-body-xsm);}
	.service-list .d-card {padding: var(--spacer5);}
	.service-list .d-card .in .text {gap: var(--spacer2);}
	.service-list .d-card .in .c-tit {min-height: inherit; margin-bottom: 0 !important; font-size: var(--fz-title-xsm) !important;}
	.service-list .d-card .in .flex {align-items: flex-end; font-size: var(--fz-body-xsm);}
	.service-list .d-card .in .grade-box .star-box, .service-list .d-card .in .grade-box .star {}
	.service-list .d-card .in .c-tag {min-height: 2.2rem; padding: var(--spacer1) var(--spacer2); font-size: var(--fz-body-xsm);}
	.service-list .d-card .in .grade-box {align-items: flex-end;}

	.service-result .desc {text-align: left; font-size: var(--fz-body-sm);}
	.service-result .desc-box {flex-direction: column; align-items: center; gap: var(--spacer5); padding: var(--spacer10) var(--spacer2); text-align: left;}
	.service-result .desc-list {font-size: var(--fz-body-sm);}
	.service-result .sch-result-tit {font-size: var(--fz-title-lg);}
	.service-result .weekRank {flex-direction: column; padding: var(--spacer10) var(--spacer5);}
	.service-result .weekRank ul {gap: var(--spacer5);}
	.service-result .weekRank li {flex: 1 1 30%;}

	.news-wrap {flex-wrap: wrap; gap: var(--spacer9);}
	.news-wrap .news-in {gap: var(--spacer3);}
	.news-wrap .news-in .news-tit {align-items: center; padding: 0 var(--spacer2);}
	.news-wrap .news-in .news-tit .tit {font-size: var(--fz-title-lg);}
	.news-wrap .news-in .news-list {padding: var(--spacer6) var(--spacer2);}
	.news-wrap .news-in .news-list:last-of-type {padding-bottom: 0;}
	.news-wrap .news-in .news-list .d-card .text {gap: var(--spacer2); padding: 0;}
	.news-wrap .news-in .news-list .d-card .text .c-tit {margin-bottom: 0 !important; font-size: var(--fz-title-xsm) !important; line-height: 1.5;}
	.news-wrap .news-in .news-list .d-card .text .c-tit .blue {min-height: 1.8rem; padding: var(--spacer1) var(--spacer2);}
	.news-wrap .news-in .news-list .d-card .c-txt {font-size: var(--fz-body-sm); line-height: 1.7;}
    .news-wrap .news-in .news-tit .more {font-size: var(--fz-body-xsm);}
    .news-wrap .news-in .news-tit .more img {height: 2.4rem;}

	.page-title-wrap {margin-bottom: var(--spacer12);}
	.page-title-wrap .h-tit {font-size: var(--fz-heading-xsm);}
	.page-title-wrap .txt {display: inline; margin-top: 0; font-size: var(--fz-body-md);}
	.page-title-wrap .txt strong {margin: 0;}

	.page-step {padding: 0;}
	.step-wrap {flex-wrap: wrap; grid-row-gap: var(--spacer4);}
	.step-wrap > li > dl {padding-top: var(--spacer7);}


	.conts-wrap .box:last-of-type {padding-bottom: var(--spacer10);}
	.conts-wrap .box:not(:last-of-type) {padding: var(--spacer6) 0;}
	.conts-wrap .box > .flex {gap: var(--spacer4);}
	.conts-wrap .business-num + .page-btn-wrap {margin-bottom: var(--spacer8);}
	.conts-wrap .description {padding: var(--spacer7) var(--spacer5); margin-bottom: var(--spacer15); border-radius: var(--rd-6); font-size: var(--fz-body-sm); line-height: 1.9;}
	.conts-wrap .description.white {display: inline; padding: var(--spacer3) var(--spacer5); font-size: var(--fz-body-sm);}
	.conts-wrap .description .c-red.fz-md {font-size: var(--fz-body-md);}
	.conts-wrap .agree-check {font-size: var(--fz-body-sm);}
	.conts-wrap .agreement-scroll {padding-right: var(--spacer3);}
	.conts-wrap .agreement-scroll .scroll {font-family: auto; padding-right: var(--spacer2); font-size: var(--fz-body-xsm);}
	.desc-list li, .desc-list li dl, .desc-list .tit {font-size: var(--fz-body-sm);}

	.page-title-info {padding: var(--spacer5); margin-bottom: var(--spacer12);}
	
	.pop-wrap {height: auto !important;}
	.popup {min-width: 90%; max-width: 95% !important; min-height: inherit; max-height: inherit; border-radius: var(--spacer4);}
	.popup.on {gap: var(--spacer6);/* padding-top: var(--spacer6);*/}
	.popup .bg {min-height: inherit; padding: var(--spacer3) var(--spacer5) var(--spacer8);}
	.popup .bg div {width: 100% !important;}
	.popup .tit {align-items: center; justify-content: center; margin-bottom: var(--spacer2); font-size: var(--fz-body-md); line-height: 1.2;}
	.popup h3.tit {position: relative; min-height: 4.4rem; margin-bottom: var(--spacer5); font-size: var(--fz-body-md);}
	.popup .tit-s {font-size: var(--fz-body-sm);}
	.popup .tit .ico-del {position: absolute; top: 50%; right: var(--spacer3); width: 2.2rem; height: 2.2rem; transform: translateY(-50%);}
	.popup .tit .ico-del::after {width: 2.2rem !important; height: 2.2rem !important;}
	.popup .tit .lg.ico-del {top: 2.4rem; right: 2rem; width: 2.6rem !important; height: 2.6rem !important;}
	.popup .tit .lg.ico-del::after {width: 2rem !important; height: 2rem !important;}
	.popup .contact-box {max-height: 46rem; padding-right: var(--spacer2); overflow-y: scroll;}
	.popup .contact-box dl {gap: var(--spacer1);}
	.popup .contact-box dl dt {font-size: var(--fz-body-sm);}
	.popup .contact-box dl dt .file-total, .popup .contact-box .txt-cnt {font-size: var(--fz-body-xsm);}
	.popup .form-conts .form-group {padding-bottom: 0; border: 0;}
    .popup .price {gap: var(--spacer3);}
	.popup .price li {gap: 0;}
	.popup .price li dl dt,
	.popup .price li dl dd {font-size: var(--fz-body-xsm);}
	.popup .table tr th, .popup .table tr td {padding: var(--spacer1) var(--spacer2); font-size: var(--fz-body-xsm);}
	.popup .table .form-check input[type=checkbox] ~ label {gap: var(--spacer2); padding-left: 0;}
    .popup .table.amount-form {}
    .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 .form-group .form-conts .form-control {font-size: var(--fz-body-xsm);}
	.popup .form-group .form-conts .cnt {}


	.pop-wrap.md {min-width: 100%; min-height: auto;}
	.pop-wrap.md .popup {}
	.pop-wrap.md .scroll {min-height: auto; max-height: 50rem; padding: 0; padding-right: var(--spacer2); padding-bottom: var(--spacer6); background-color: transparent;}
	.pop-wrap.md .scroll .title {display: none;}
	.pop-wrap.md .scroll .title .info {grid-column-end: inherit;}
	.pop-wrap.md .scroll .title .tit2 {order: 3; border-top: 0;}
	.pop-wrap.md .scroll .title span {min-width: auto;}
	.pop-wrap.md .scroll .process {gap: var(--spacer10); padding-right: var(--spacer2); padding-left: var(--spacer4);}
	.pop-wrap.md .scroll .process li:not(:last-of-type)::after {bottom: -3.5rem; width: 2.8rem; height: 2.8rem;}
	.pop-wrap.md .scroll .process li {font-size: var(--fz-body-md);}
	.pop-wrap.md .scroll .process li dl {grid-template-columns: auto;}
	.pop-wrap.md .scroll .process li .tit {order: 1; min-height: 4rem; font-size: var(--fz-body-sm);}
	.pop-wrap.md .scroll .process li .tit br {display: none;}
	.pop-wrap.md .scroll .process li .tit2 {order: 3; min-height: 4rem; font-size: var(--fz-body-sm);}
	.pop-wrap.md .scroll .process li .info {grid-row: auto; grid-column-end: 2; padding: var(--spacer3); font-size: var(--fz-body-xsm); order: 2;}
	.pop-wrap.md .scroll .process li .info br {}
	.pop-wrap.md .scroll .process li .info span {font-size: var(--fz-body-xsm);}

	.quick-menu ul li a {min-width: 4.5rem; width: 4.5rem; height: 4.5rem;}



	.rank-list {flex-wrap: wrap; gap: var(--spacer5); margin-bottom: var(--spacer5); font-size: var(--fz-body-sm);}
	.rank-list dt {width: 100%; margin-right: 0;}
	.rank-list dd ol li::before {width: 1.8rem; height: 1.8rem; font-size: var(--fz-body-xsm);}

	.page-btn-wrap {margin: var(--spacer12) 0 0;}
	.page-btn-wrap + .sec-tit {margin-top: var(--spacer20);}
	.page-btn-wrap:last-child {margin-top: var(--spacer20); margin-bottom: var(--spacer10);}
	.page-btn-wrap + .table-wrap {margin-top: var(--spacer10);}
    .page-btn-wrap .btn-wrap {margin-top: 0;}
    .page-btn-wrap .btn-wrap .btn.md {min-height: var(--btn-h-md);}

	.sec-tit:first-of-type + .form-wrap {margin-top: var(--spacer10);}
	.sec-tit .step-now {margin-bottom: var(--spacer2);}
	.sec-tit sub {font-size: var(--fz-title-xsm); line-height: 1.4;}
	.conts-wrap .sec-tit {margin-top: var(--spacer15); margin-bottom: var(--spacer4); font-size: var(--fz-title-md); line-height: 1.3;}
	.conts-wrap .sec-tit-s {flex-wrap: wrap; gap: var(--spacer1); margin-bottom: var(--spacer2); line-height: 1.5; font-size: var(--fz-title-sm);}
	.conts-wrap .sec-tit:first-of-type {margin-top: 0;}
	.conts-wrap .sec-tit-s .c-blue:first-of-type {margin: 0;}
	.conts-wrap .sec-tit-s + .input-box > .form-group:first-of-type {padding-top: 0; /*padding: var(--spacer6) 0; padding-top: 0;*/}
	.conts-wrap .sec-tit-s:not(:first-of-type) {margin-top: var(--spacer14);}
	.conts-wrap .sec-tit-s .btn-wrap .btn {position: static; height: auto; min-height: var(--btn-h-xsm); padding: 0 var(--btn-px-xsm);}
	.conts-wrap .sec-tit-s .btn-wrap .btn:first-of-type {right: 7rem;}
	.sec-tit-s {position: relative;}
	.sec-tit-s > span::before {top: 0.4rem;}
	.sec-tit-s .btn-wrap {position: static; padding-left: 0;}
	.sec-tit-s .right {text-align: left;}
	.sec-tit-s + .input-box .box-sec:first-of-type {padding-top: var(--spacer5);}
	.sec-tit-s + .input-box:nth-of-type(3) .box-sec:first-of-type {padding-top: 0;}
	.sec-tit-s.full ~ .input-box:not(:first-of-type) {margin-bottom: 0; padding: 0;}
	.sec-tit-s.full ~ .input-box:not(:last-of-type) {border-bottom: 0; margin-bottom: 0;}

	.check-list-wrap {grid-row-gap: var(--spacer6); padding: var(--spacer8) 0 var(--spacer6);}
	.check-list-wrap .check-list .tit {display: flex; align-items: center; justify-content: center; min-height: 3.4rem; padding: 0; background-color: var(--gray-10); font-size: var(--fz-title-xsm);}
	.check-list-wrap .check-list .tit::before {display: none;}
	.check-list-wrap .check-list .form-group {grid-row-gap: var(--spacer3);}
	.check-list-wrap .check-list .form-group:last-of-type {padding-bottom: 0; border-bottom: 0;}
	.check-list-wrap .check-list .form-group .form-conts {grid-template-columns: repeat(3, 1fr); grid-row-gap: var(--spacer4); padding: var(--spacer2);}
	.check-list-wrap .check-list .form-group .form-conts .form-check {min-width: auto;}
	.check-list-wrap .form-check input[type=checkbox] ~ label {padding-left: var(--spacer6);}


	.form-wrap .info-list:first-of-type {padding-top: 0;}
	.form-wrap .info-list:last-of-type {/*padding-bottom: var(--spacer5);*/}
	.info-list + .input-box {padding: var(--spacer6) var(--spacer2);}
	.info-list {grid-row-gap: var(--spacer2);}
	.info-list strong br {display: none;}
	.info-list .pd {padding-left: var(--spacer3); line-height: 1.4;}
	.info-list .pd .table ~ .table-comment {margin-bottom: 0;}
	.info-list .c-blue {line-height: inherit;}
	.info-list .info {gap: 0;}
	.info-list.result {padding: var(--spacer6) var(--spacer4) !important; font-size: var(--fz-body-sm);}

	.join-complete .complete-wrap .check-img {width: 6rem; height: 6rem;}
	.join-complete .complete-wrap .check-img img {width: 3rem; height: 4rem;}
	.join-complete .complete-wrap .info-wrap .info {font-size: var(--fz-title-lg);}
	.join-complete .complete-wrap .etc {font-size: var(--fz-body-sm);}

	.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 {font-size: var(--fz-body-sm);}
	.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;}
	.sitemap .list .three-depth li a {font-size: var(--fz-body-sm);}


	.input-box > .form-group .tit {font-size: var(--fz-title-xsm);}
	.input-box > .form-group .tit br {display: none;}
	.input-box > .form-group:first-of-type {grid-row-gap: var(--spacer6);}
	.user-info {gap: var(--spacer8); padding: var(--spacer5) var(--spacer2); margin-bottom: var(--spacer9); border-radius: 0; border-left: 0; border-right: 0;}
	.user-info:first-of-type .user-info-list {grid-template-columns: 1fr;}
	.user-info.row .flex {grid-template-columns: auto;}
	.user-info-list {display: grid; gap: var(--spacer2);}
	.menu-info-wrap .menu-slide-wrap {gap: var(--spacer6); padding: 0; border: 0; margin-bottom: var(--spacer5);}
	.menu-info-wrap .menu-slide-wrap .left-info {gap: var(--spacer5);}
	.menu-info-wrap .menu-slide-wrap .left-info .menuInfoSwiper {max-height: 24rem;}
	.menu-info-wrap .menu-slide-wrap .left-info .thumbSwiper ul {gap: var(--spacer2);}
	.menu-info-wrap .menu-slide-wrap .left-info .thumbSwiper li {max-width: calc((100% / 3.95) - var(--spacer2)); height: 5.8rem;}
	.menu-info-wrap .menu-slide-wrap .right-info .d-card .in .text {padding: 2rem 0 0; border-top: 0.1rem solid var(--gray-50);}
	.menu-info-wrap .menu-slide-wrap .right-info .d-card .in .c-tit {-webkit-line-clamp: 3; margin-bottom: 0 !important; font-size: var(--fz-body-md) !important;}
	.menu-info-wrap .menu-slide-wrap .right-info .d-card .in .c-tag-list {gap: var(--spacer1);}
	.menu-info-wrap .menu-slide-wrap .right-info .d-card .in .c-tag-list span {min-height: 2.2rem; font-size: var(--fz-body-xsm);}
	.menu-info-wrap .menu-slide-wrap .right-info .d-card .in .tit-box .btn {min-height: 1.8rem; padding: 0 var(--spacer2) 0 var(--spacer6); font-size: var(--fz-body-xsm);}
	.menu-info-wrap .menu-slide-wrap .right-info .d-card .in .grade-box .grade {font-size: var(--fz-body-sm);}
	.menu-info-wrap .detail-conts .user-info {gap: var(--spacer8); padding: var(--spacer6) var(--spacer2); font-size: var(--fz-body-sm);}
	.menu-info-wrap .detail-conts .user-info.txt li {position: relative; padding-left: var(--spacer3); line-height: 1.7;}
	.menu-info-wrap .detail-conts .user-info.txt li::before {content: ''; position: absolute; top: 1.2rem; left: 0; width: 0.5rem; height: 0.1rem; background-color: var(--gray-60);}
	.menu-info-wrap .detail-conts .user-info .user-info-list {gap: var(--spacer2);}
	.menu-info-wrap .detail-conts .user-info .user-info-list .info {flex-wrap: wrap;}


	.table {}
	.table:last-of-type {maRgin-bottom: 0;}
	.table thead {height: 4rem;}
	.table .form-check input[type=checkbox] ~ label::before, .table .form-check input[type=radio] ~ label::before {position: static;}
	.table ~ .table-comment {padding-left: var(--spacer2); margin-left: 0;}
	.table ~ .table-comment + .sec-tit {margin-top: var(--spacer20);}
	.table ~ .table-comment ~ .table-comment {margin-top: var(--spacer3);}
	.table-comment {margin-top: var(--spacer2); font-size: var(--fz-body-xsm);}
	.table-comment:first-of-type {margin-top: var(--spacer2) !important;}
	.user-leave {font-size: var(--fz-body-sm);}

	.drtr-tbody{width:338px !important;}
	.table th, .table td {font-size: var(--fz-body-xsm);}
	.table tbody tr td.center2 {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
	.table tbody tr th, .table tbody tr td {padding: var(--spacer2);}
	.table .anchor-tr .title {padding-right: var(--spacer24);}
	/* .table-wrap {padding: 0 0 var(--spacer14);} */
	.table-wrap:last-of-type {padding-bottom: 0;}
	
	.info-text {font-size: var(--fz-body-sm);}
	.info-text ~ .table-wrap .table {display: grid; margin-top: var(--spacer5);}
	.info-text ~ .table-wrap .table tr {display: grid; border: 0;}
	.info-text ~ .table-wrap .table tr th {padding-bottom: 0; color: var(--gray-90);}
	.info-text ~ .table-wrap .table tr th, .info-text ~ .table-wrap .table tr td {height: inherit; border: 0; text-align: left;}
	.info-text ~ .table-wrap .table tr td input[type=text], .info-text ~ .table-wrap .table tr td input[type=password] {width: 100% !important;}
	.info-text ~ .table-wrap .btn-wrap .btn {min-width: 17rem; min-height: 4.2rem;}
	.table .tit, .table-wrap .tit a {-webkit-line-clamp: 1; overflow: hidden;}
	.table-wrap.list {margin-bottom: var(--spacer10);}
	.table-wrap.list .table {display: block;}
	.table-wrap.list .table thead {display: none;}
	.table-wrap.list tbody {display: block; width: 100%;}
	.table-wrap.list tbody tr {display: block; position: relative; width: 100%; height: 10rem; border-bottom: 0.1rem solid var(--gray-30);}
	.table-wrap.list tbody tr td {display: block; position: absolute; padding: 0; height: auto; font-size: var(--fz-body-xsm); color: var(--gray-60);}
	.table-wrap.list tbody tr td::before {display: none; content: ''; position: absolute; top: 0.4rem; left: -1.6rem; width: 0.1rem; height: 1.1rem; background-color: var(--gray-40);}
	.table-wrap.list tbody tr .cnt::after {display: none; content: ''; position: absolute; top: 0.5rem; right: -0.6rem; width: 0.1rem; height: 1.2rem; background-color: var(--gray-40);}
	.table-wrap.list tbody tr .cnt {left: 1rem; bottom: 1rem; width: 100%; max-width: 3.2rem; color: var(--gray-60);}
	.table-wrap.list tbody tr .cnt::before {display: none;}
	.table-wrap.list tbody tr .title {top: 1.2rem; left: 0; width: 100%; height: auto; padding: 0 var(--spacer3); font-size: var(--fz-body-sm); font-weight: 500; color: var(--gray-90);}
	.table-wrap.list tbody tr .title::before {display: none;}
	.table-wrap.list tbody tr .title + .date::before {display: none;}
	.table-wrap.list tbody tr .tit a {width: 100%; padding: 0 var(--spacer15) 0 0; font-size: var(--fz-body-md);}
	.table-wrap.list tbody tr .form-check {top: 1.7rem; left: 0.9rem; bottom: inherit;}
	.table-wrap.list tbody tr .form-check2 {top: inherit; left: 1rem; bottom: 0.8rem;}
	.table-wrap.list tbody tr .col:nth-of-type(3),
	.table-wrap.list tbody tr .company {top: 1rem; left: 1.5rem; bottom: inherit; line-height: 1; font-weight: 500; color: var(--gray-90);}
	.table-wrap.list tbody tr .col:nth-of-type(3)::before,
	.table-wrap.list tbody tr .col:nth-of-type(7),
	.table-wrap.list tbody tr .company::before {display: none;}
	.table-wrap.list tbody tr .company + .date::before {display: none;}
	.table-wrap.list tbody tr .date + .date::before {display: none;}
	.table-wrap.list tbody tr .col:nth-of-type(4),
	.table-wrap.list tbody tr .col:nth-of-type(8),
	.table-wrap.list tbody tr .company2 {left: 5rem; bottom: 1rem; text-overflow: ellipsis; max-width: 40vw; overflow: hidden; white-space: nowrap;}
	.table-wrap.list tbody tr .name {top: 1rem;left: 21.5rem;bottom: inherit; line-height: 1; font-weight: 500; color: var(--gray-90);text-overflow: ellipsis; max-width: 40vw; overflow: hidden; white-space: nowrap;}
	.table-wrap.list tbody tr .col:nth-of-type(7) {left: 15rem; max-width: 20vw;}
	.table-wrap.list tbody tr .col:nth-of-type(8) {left: inherit; right: 11rem; max-width: 23vw;}
	.table-wrap.list tbody tr .col:nth-of-type(4)::before,
	.table-wrap.list tbody tr .company2::before {display: none;}
	.table-wrap.list tbody tr .col:nth-of-type(6),
	.table-wrap.list tbody tr .status {top: 1rem; right: 1.5rem; bottom: inherit; line-height: 1;}
	.table-wrap.list tbody tr .col:nth-of-type(6)::before,
	.table-wrap.list tbody tr .status::before {display: none;}
	.table-wrap.list tbody tr .check {left: 1.2rem; bottom: 1.2rem;}
	.table-wrap.list tbody tr .check::before {display: none;}
	.table-wrap.list tbody tr .writer {left: 7.2rem; bottom: 1rem;}
	.table-wrap.list tbody tr .writer + .date::before {display: none;}
	.table-wrap.list tbody tr .region {left: 4.5rem; bottom: 1rem;}
	.table-wrap.list tbody tr .price {left: 1.2rem; bottom: 1rem;}
	.table-wrap.list tbody tr .price::before {display: none;}
	.table-wrap.list tbody tr .region:last-of-type {left: 1.2rem;}
	.table-wrap.list tbody tr .region:last-of-type::before {display: none;}
	.table-wrap.list tbody tr .category1 {display: none;}
	.table-wrap.list tbody tr .category2 {display: none;}
	.table-wrap.list tbody tr .category3 {right: 9.8rem; bottom: 1rem; max-width: 35%; display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; text-align: right;}
	.table-wrap.list tbody tr .col:last-of-type,
	.table-wrap.list tbody tr .date {right: 1.2rem; bottom: 1rem;}
	.table-wrap.list tbody tr .drtr-date {right: 1.2rem; bottom: 1rem;}
	.table-wrap.list tbody tr .date:last-of-type::before {display: none;}
	.table-wrap.list tbody tr .end-date {display: none;}
	.table-wrap.list tbody tr .none {display: none;}
	.table-wrap.list tbody tr .finished {right: 1.2rem; top: 1.4rem;}
	.table-wrap.list tbody tr .finished::before {display: none;}
	.table-wrap.list tbody tr .finished .finish {padding: 0 var(--spacer1); font-size: var(--fz-body-xsm);}
	.table-wrap.list tbody tr .view {display: none;}
	.table-wrap.list tbody tr .download {display: none;}
	.table-wrap.list .finish {height: 2rem; font-size: var(--fz-body-xsm);}
	.table-wrap.list .title-center {top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%);}
	.table-wrap.list .title-center::before {display: none;}
	
	.table-wrap.view .user-info-list {padding: var(--spacer5);}
	.table-wrap.view .user-info-list .tit {padding: 0;}
	.table-wrap.view .user-info-list th, .table-wrap.view .user-info-list td {height: inherit; border-right: 0;}
	.table-wrap.view > .table > tbody > tr:last-of-type td:last-of-type {padding: 0;}
	.table-wrap.view .table-wrap {font-size: var(--fz-body-sm);}
	.table-wrap.view .contents-wrap {padding: 0;}
	.table-wrap.view .contents-wrap .contents {font-size: var(--fz-body-sm);}
	.table-wrap.view .title-top {display: flex; flex-direction: column; gap: var(--spacer3); padding: var(--spacer5) var(--spacer3);}
	.table-wrap.view .title-top dl {grid-column-gap: var(--spacer3); grid-row-gap: var(--spacer1);}
	.table-wrap.view .title-top dl::after {display: none;}
	.table-wrap.view .title-top dl:not(:last-of-type)::after {top: 0.5rem; height: 1.2rem;}
	.table-wrap.view .title-top dl dt::after {right: -0.8rem;}
	.table-wrap.view .title-top dl dd ul {display: grid; gap: var(--spacer2);}
	.table-wrap.view .title-top dl dd ul li {position: relative; padding-left: var(--spacer2);}
	.table-wrap.view .title-top dl dd ul li::before {content: ''; position: absolute; top: 1rem; left: 0; width: 0.4rem; height: 0.1rem; background-color: var(--gray-60);}
	.table-wrap.view .title-top .tit {min-height: 6rem; padding: 0; font-size: var(--fz-title-lg); line-height: 1.7;}
	.table-wrap.view .title-top .tit::before {display: none;}
	.table-wrap.view .title-top .writer {padding: 0; font-size: var(--fz-body-sm);}

	.ico-down {min-width: 7.5rem;}

}




/*20250127 차종헌 리스트 페이지 엑셀다운버튼 css 추가 +.service-list-sch .page-cnt에서 grid-template-columns: 1fr 1fr(기존)-> 1fr auto(수정) */
.ico-excel {align-items: baseline; min-width: 8.2rem;}
.ico-excel::after {width: 1.5rem !important; height: 1.4rem !important; margin-left: var(--spacer1); background: url(/static/images/kosmes/ico_exel.png);}
.ico-delete {align-items: baseline; min-width: 8.2rem;}
.ico-delete::after {width: 1.5rem !important; height: 1.4rem !important; margin-left: var(--spacer1); background: url(/static/images/kosmes/ico_del.png);}

.popup td.form-check { display: flex; align-items: center; justify-content: center; min-height: 70px;}
dd.space {display: flex; align-items: center;}
.form-group .user-info-list .cnt {display: flex; align-items: center; margin-left: 5px; }
/* .form-date.sm {max-width: 5rem;} */


/*20250211 차종헌 faq 페이지 css 추가*/
.qnaTab-conts .head {border-top: 1px solid #919cac;}
/* .qnaTab-conts .head:last-child {border-bottom: 1px solid #919cac;} */
.qnaTab-conts .head .question {padding: 12px 30px 12px 8px;}
.qnaTab-conts .head .question .title {position: relative; padding-right: var(--spacer8); font-size : 1.6rem; font-weight: 500;}
.qnaTab-conts .head .question .title .btn {position: absolute; top: 50%; right: 7.2rem; transform: translateY(-50%); background-color: var(--white);}
.qnaTab-conts .head .question a {display: block; clear: both; overflow: hidden;}
.qnaTab-conts .head .question img {float: left;}
.qnaTab-conts .head .question .down {display: inline-block; float: right; margin-top: 1rem; transform: rotate(-180deg); transition: 0.4s; width: 1.5rem !important;}
.qnaTab-conts .head .question.active .down {transform: rotate(0deg); transition: 0.4s;}
.qnaTab-conts .head .answer {display: none; position: relative; padding: 19px 56px; background-color: #eff5ff; word-break: break-all; }
.qnaTab-conts .head .answer td {position: static; vertical-align: text-top; padding-left: 17.5%; color: var(--gray-90) !important; font-weight: 400; line-height: 1.8;}
.qnaTab-conts .head .answer .answerconts {line-height: 2.2;}

/* 바우처 */
.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; min-width: fit-content; padding: 0 var(--spacer1); background-color: var(--primary-10); border-radius: var(--rd-4); font-size: var(--fz-body-xsm); 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: 700; line-height: 1;}
.balance-wrap .user-info .companyName .text {display: flex; flex-wrap: wrap; gap: var(--spacer2);}
.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(--spacer7) var(--spacer7) var(--spacer9);}
.balance-wrap .voucherMoney {display: grid; align-items: center; gap: var(--spacer5);}
.balance-wrap .tit-box {display: flex; align-items: center; justify-content: space-between; gap: var(--spacer5); font-size: var(--fz-body-xlg); font-weight: 700; color: var(--gray-90);}
.balance-wrap .tit-box + .statsBar {border-radius: var(--rd-20); overflow: hidden;}
.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: 600; 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(--spacer5); font-size: var(--fz-body-sm);}
.balance-wrap .money li:first-of-type::before {background-color: var(--primary-50);}
.balance-wrap .money li::before {content: ''; position: absolute; top: 47%; left: 0; width: 1.2rem; height: 1.2rem; 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 .price {font-size: var(--fz-body-lg); font-weight: 500; line-height: 1;}
.balance-wrap .money2 {display: grid; gap: var(--spacer2); color: var(--gray-90);}
.balance-wrap .money2 li {display: flex; justify-content: space-between; align-items: center; gap: var(--spacer2) var(--spacer8); position: relative;}
.balance-wrap .money2 li tr {display: flex;}
.balance-wrap .money2 li:nth-of-type(3n) tr {border-radius: var(--rd-20); overflow: hidden;}
.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 .money2 li:nth-of-type(4) .statsBar span {background-color: var(--primary-10);}

.balance-wrap .statsBar {display: block; position: relative; background-color: #fff; width: 100%; height: 1.8rem; border-radius: var(--rd-20);}
.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);}
.balance-wrap .statsBar span.round {position: absolute; left: 0; top: 0; width: 70%; height: 100%; background-color: var(--primary-50);}

.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/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: 700; 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(--spacer7);}
.balance-wrap .companyStats > * {padding-bottom: calc(var(--spacer7) + 0.2rem); margin-bottom: calc(var(--spacer7) + 0.2rem); border-bottom: 0.1rem solid var(--gray-40);}
.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 .setup .btn {display: inline-flex; align-items: center; min-height: 3.2rem; padding: 0 var(--btn-px-xsm); border-radius: var(--btn-rd-xsm); font-size: var(--btn-fz-xsm);}
.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); font-size: var(--fz-title-md);}

.balance-wrap .companyStats .grid-process {display: flex; justify-content: space-between; justify-content: center; gap: var(--spacer3) var(--spacer9);}
.balance-wrap .companyStats .grid-process li {display: grid; gap: var(--spacer1); justify-content: center; position: relative; text-align: center; font-size: var(--fz-title-sm);}
.balance-wrap .companyStats .grid-process li .step {text-transform: uppercase; font-weight: 500; color: var(--white);}
.balance-wrap .companyStats .grid-process li .tit {display: inline-flex; justify-content: center; align-items: center; min-width: 9rem; min-height: 9rem; padding: var(--spacer2); background-color: var(--white); color: var(--gray-80); font-weight: 700; text-align: center;}
.balance-wrap .companyStats .grid-process li .date {display: flex; align-items: center; justify-content: center; min-height: 4rem;}
.balance-wrap .companyStats .grid-process li .on {background-color: var(--primary-50);color:var(--white);}
.balance-wrap .companyStats .grid-process li:not(:last-of-type)::after {content: ''; position: absolute; top: 50%; width: 1.4rem; height: 2.8rem; right: -2.8rem; transform: translateY(-50%); background: url(/static/images/kosmes/ico_arrow_right_g.svg) no-repeat 100%; background-size: contain;}
.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(--spacer2) var(--spacer16); padding-bottom: 0; margin-bottom: 0; border-bottom: 0; font-weight: 700; color: var(--gray-80);}
.balance-wrap .companyStats .numberStats li {display: flex; gap: var(--spacer5) !important; 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: 700; 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); font-weight: 400;}

.balance-wrap .myservice {display: grid; align-items: center; gap: var(--spacer7); max-height: 17.4rem; padding: var(--spacer6); background-color: var(--primary-20);}
.balance-wrap .myservice .grid-process {flex-wrap: nowrap; gap: var(--spacer10);}
.balance-wrap .myservice .grid-process li {justify-content: normal; width: 100% !important;}
.balance-wrap .myservice .grid-process li .tit {display: flex; max-width: 100%;}
.balance-wrap .companyStats .myservice {display: grid; align-items: center; gap: var(--spacer7); max-height: 16.4rem; border-radius: var(--rd-12); margin-top: var(--spacer5) !important; padding: var(--spacer6) var(--spacer7); background-color: var(--primary-20); border: 0;}
.balance-wrap .companyStats .myservice .grid-process li::after {top: 60%; width: 1.6rem; height: 3.2rem; background: url(/static/images/kosmes/ico_arrow_right_w.svg) no-repeat 100%; background-size: contain;}


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

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

.service-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);}
.service-balance-wrap .grid-process {display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--spacer5) 0;}
.service-balance-wrap .grid-process li {display: grid; gap: var(--spacer1); justify-content: center; position: relative; text-align: center; font-size: var(--fz-title-sm);}
.service-balance-wrap .grid-process li:not(:first-of-type, :last-of-type)::after {content: ''; position: absolute; top: 45%; right: -2.6rem; width: 1.6rem; height: 3.2rem; background: url(/static/images/kosmes/ico_arrow_right_w.svg) no-repeat 100%; background-size: contain;}
.service-balance-wrap .grid-process li .step {text-transform: uppercase; font-weight: 500; color: var(--white);}
.service-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: 700; text-align: center;}

.service-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(--spacer9) var(--spacer9);}
.service-balance-wrap .companyStats > * {padding-bottom: calc(var(--spacer7) + 0.2rem); margin-bottom: calc(var(--spacer7) + 0.2rem); border-bottom: 0.1rem solid var(--gray-40);}
.service-balance-wrap .companyStats ul:last-of-type {padding-bottom: 0; margin-bottom: 0; border-bottom: 0;}
.service-balance-wrap .companyStats .com-info {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--spacer2); padding-bottom: var(--spacer4); margin-bottom: var(--spacer4);}
.service-balance-wrap .companyStats .com-info .com-tit {display: flex; justify-content: space-between; align-items: center; gap: var(--spacer1); width: 100%;}
.service-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);}
.service-balance-wrap .companyStats .com-info .com-tit .tit ~ span:last-of-type {font-weight: 700; color: var(--gray-90); font-size: var(--fz-title-md);}
.service-balance-wrap .companyStats .grid-process {justify-content: flex-start;  gap: var(--spacer3) var(--spacer9);}
.service-balance-wrap .companyStats .grid-process li:not(:first-of-type, :last-of-type)::after {top: 50%; width: 1.4rem; height: 2.8rem; background: url(/static/images/kosmes/ico_arrow_right_g.svg) no-repeat 100%; background-size: contain; transform: translateY(-50%);}
.service-balance-wrap .companyStats .grid-process:last-of-type {padding-bottom: 0; margin-bottom: 0; border-bottom: 0;}
.service-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: 700; color: var(--gray-80);}
.service-balance-wrap .companyStats .numberStats li {display: flex; gap: var(--spacer12); position: relative; padding-left: var(--spacer5);}
.service-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%);}


.service-balance-wrap .serviceStats li {display: grid; align-items: center; justify-content: center; align-items: center;}
.service-balance-wrap .serviceStats li a {display: grid; align-items:center; min-width: 12.5rem; max-width: 9rem; min-height: 9rem; padding: 0 1rem; border-radius: var(--rd-8); background-color: var(--white); color: var(--gray-80); font-weight: 700; text-align: center; overflow: hidden;}
.service-balance-wrap .serviceStats li:first-of-type a {background-color: var(--primary-5);border: 1px solid var(--primary-50);}
.service-balance-wrap .serviceStats li a .tit {display: flex; flex-direction: column; align-items: center; gap: var(--spacer1); 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); }
.service-balance-wrap .serviceStats li a .tit img {width: 3.5rem; height: 3.2rem;}
.service-balance-wrap .serviceStats li a .num {display: flex; justify-content: center; align-items: center; max-height: 4.5rem;min-height: 4.5rem; padding: var(--spacer2); font-size: var(--fz-title-xxxlg); color: var(--primary-60);}
.service-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); font-weight: 400;}
.service-balance-wrap .serviceStats li a .date {display: flex; justify-content: center; align-items: center; font-size: var(--fz-body-sm); font-weight: 500;}

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

.content-print {display: inline-flex; justify-content: space-between; flex-wrap: wrap; gap: var(--spacer2); margin-left: auto; margin-top: -50px;}
.content-print:focus {border-radius: var(--rd-full);}
.popup-content-print {justify-content: space-between;}
.popup-content-print{display: inline-flex;flex-wrap: wrap;gap: var(--spacer2);}
.popup-content-print a:focus {border-radius: var(--rd-full);}

.join-type {display: flex; justify-content: center; gap: var(--spacer3); margin-top: 4rem;}
.join-type a {display: flex; align-items: center; justify-content: center; gap: var(--spacer10); width: 100%; min-height: 13rem; border-radius: var(--rd-12); border: 1px solid #C6C6C6; /*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: 1.8rem; margin-top: 0.4rem;}
.join-type a .txt-box {display: grid; gap: var(--spacer1);}
.join-type a .dt-join {font-size: var(--fz-title-lg); font-weight: 600; line-height: 1;}
.join-type a .img {width: 5.6rem !important; height: 4.7rem;}
.join-type li {display: grid; align-items: center; position: relative; width: 100%;}
.join-type li.active a {background-color: #003675; color: var(--white); border: 0;}
.join-type li.active a:hover {color: var(--white);}
.join-type li.active a dd {color: #003994;}
.join-type li > .img {position: absolute; top: 1rem; right: 1rem; width: 3.2rem !important; margin-left: 0 !important;}
.join-type li > .img:hover {cursor: pointer;}
.join-type li a:hover {border: 1px solid #003994; color: #003994;}
.join-type li a:hover dl {color: #003994;}

.login-step{display: flex; background: #EDF1F5; border-radius: var(--rd-12); overflow: hidden;}
.login-step li {font-size: 16px; display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 5.6rem; font-weight: 600;}
.login-step li a {display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 1rem; font-size: 1.8rem; color: #fff;}
.login-step li:after{content: ""; height: 5.8rem; width: 2.9rem; background: url(/static/images/kosmes/ico-join.svg) no-repeat; display: flex; position: absolute; right: -2.7rem; top: -0.1rem; background-size:auto 100%; z-index: 1;}/* 22.12.12*/
.login-step li.active{background-color: #B4C4D6;}
.login-step li.active::after{background: url(/static/images/kosmes/ico-join-active.svg) no-repeat 100%; width: 3.2rem; height: 5.8rem; background-size: contain; right: -2.6rem ;}/* 22.12.12*/
.login-step li.active::before{display: none !important; content: ""; height: 5.8rem; width: 2.2rem; background: url(/static/images/kosmes/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;}

.num-st {font-size: 1.2rem;}
.tag-wrap-position {position: relative; min-width: fit-content;}
.tag-wrap-position span{display: inline-flex; align-items: center; min-height: 2.4rem; padding: calc(var(--spacer1) + 0.1rem) var(--spacer2); background-color: var(--primary-5); border-radius: var(--rd-4); line-height: 1.2; color: var(--primary-60); font-size: var(--fz-body-sm);}
.tag-wrap {min-height: 17.6rem; padding: var(--spacer7); border: 0.1rem solid #C6C6C6; border-radius: var(--rd-12);}
.tag-wrap ul {display: flex; flex-wrap: wrap; gap: var(--spacer2);}
.tag-wrap li, .tag-wrap li a {display: inline-flex; align-items: center; min-height: 2.4rem; padding: calc(var(--spacer1) + 0.1rem) var(--spacer2); background-color: var(--primary-5); border-radius: var(--rd-4); line-height: 1.2; color: var(--primary-60); font-size: var(--fz-body-sm);}
.tag-wrap-position-perform {}
.tag-wrap-position-perform .down {display: inline-block; float: right; margin-top: 7px; margin-left: 0.5rem; transform: rotate(-180deg); transition: 0.4s; width: 15px;}
.tag-wrap-position-perform .down:hover {cursor: pointer;}
.tag-wrap-position-perform.active .down {transform: rotate(0deg); transition: 0.4s;}
.tag-wrap-position-perform .bizwrap{width:180px; position: absolute; top: 100%; right: 0; background: white; border: 1px solid #ccc; padding: 10px; z-index: 1;}

.form-check .file-checkbox + label + .file-filename {padding-left: var(--spacer1);}
.form-check .file-checkbox + label + .file-filename::before {content: none;}


/* 금액 input 원 추가 */
.number-wrapper {position: relative;}
.number-wrapper input {padding-right: var(--spacer8);}
.number-wrapper::after {content: "원"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; font-weight: 500;}
/* 비율 input 원 추가 */
.rate-wrapper {position: relative;}
.rate-wrapper input {padding-right: var(--spacer8);}
.rate-wrapper::after {content: "%"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; font-weight: 500;}

/* 캘린더 - btn 수정 */
.fc-toolbar-chunk > div {display: flex; align-items: center; gap: var(--spacer1);}
.fc-toolbar-chunk .btn-group {display: flex; gap: var(--spacer1); max-width: 4rem;}
.fc-toolbar-chunk .fc-toolbar-title {margin: 0 var(--spacer5) !important;}
.fc-toolbar button {background-color: #f5f5f5; background-image: -moz-linear-gradient(top,#fff,#e6e6e6); background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6)); background-image: -webkit-linear-gradient(top,#fff,#e6e6e6); background-image: -o-linear-gradient(top,#fff,#e6e6e6); background-image: linear-gradient(to bottom,#fff,#e6e6e6); background-repeat: repeat-x; border-color: #e6e6e6 #e6e6e6 #bfbfbf; border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25); color: #333; text-shadow: 0 1px 1px rgba(255,255,255,.75); box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);}
    

@media (max-width: 1200px) {

	.balance-wrap {flex-wrap: wrap;}
	.balance-wrap .allStats {max-width: inherit;}
	.balance-wrap .user-info .companyName {width: 100%;}
	.balance-wrap .companyStats .com-info {flex-wrap: wrap;}
	.balance-wrap .companyStats .grid-process {flex-wrap: wrap;}
	.balance-wrap .myservice .grid-process {flex-wrap: nowrap;}
	.balance-wrap .companyStats .myservice .grid-process li::after {right: -3.5vw;}
	.balance-wrap .companyStats .grid-process li:not(:last-of-type)::after {right: -3rem;}
	.search-service.full .search-list li:nth-of-type(2n+2) label {justify-content: flex-start;}
}


@media (max-width: 640px) {

	#header .head-body {border-bottom: 0;}
	
	.balance-wrap {}
	.balance-wrap ~ .table-wrap .table .tag {position: absolute; top: 6rem; left: 1rem;}
	.balance-wrap .user-info {flex-direction: row-reverse;}
	.balance-wrap .user-info .companyName .setup {position: static;}
	.balance-wrap .user-info .companyName .name {font-size: var(--fz-title-lg);}
	.balance-wrap .statsBar.sm {height: 1rem !important;}
	.balance-wrap .companyStats .com-info .com-tit {flex-wrap: wrap;}
	.balance-wrap .companyStats .com-info .setup .btn {position: absolute; top: 1.4rem; right: 1.4rem;}
	.balance-wrap .companyStats .numberStats {gap: var(--spacer2); margin-bottom: 1rem;}
	.balance-wrap .companyStats .numberStats li {justify-content: space-between; width: 100%;}
	.balance-wrap .companyStats .grid-process {justify-content: flex-start; gap: var(--spacer3) var(--spacer9);}
	.balance-wrap .companyStats .grid-process li:not(:last-of-type)::after {right: -4.5vw; width: 1.2rem; height: 2.8rem; background-size: contain;}
	.balance-wrap .companyStats .grid-process li .tit {min-width: 7rem; min-height: 7rem;}
	.balance-wrap .companyStats .grid-process li .date {min-height: 3rem;}
	
	.service-balance-wrap [class*="money"] .tit, .balance-wrap [class*="money"] .sum {justify-content: flex-end;}
	.service-balance-wrap .companyStats {padding: var(--spacer7);}
	.service-balance-wrap .serviceStats li:first-of-type {max-width: 100%;}
	.service-balance-wrap .serviceStats li a .num {align-items: baseline; min-height: 3rem; font-size: var(--fz-title-lg);}
	.service-balance-wrap .serviceStats li a .tit {min-height: 6.5rem;}
	.service-balance-wrap .serviceStats li a .tit img {width: 2rem; height: 1.7rem;}
	
	.qnaTab-conts .head .question {display: flex; align-items: center; height: 6.6rem !important;}
	.qnaTab-conts .head .question .title {top: inherit; font-size: var(--fz-body-sm);}
	.qnaTab-conts .head .question .down {display: none;}
	.qnaTab-conts .head .question .title .btn {right: -2rem;}
	.qnaTab-conts .head .question.active + .answer {display: inline-table !important;}
	.qnaTab-conts .head .question .c-gray {min-width: fit-content; margin-left: 0;}
	.qnaTab-conts .head .question .cnt {display: none; top: 1.3rem; left: 3.6rem; bottom: inherit; font-size: var(--fz-body-sm);}
	.qnaTab-conts .head .answer td {padding: var(--spacer5); margin: 0; font-weight: 400; font-size: calc(var(--fz-body-sm) - 0.1rem);}
	
	.login-step {flex-wrap: wrap; margin-top: 0;}
	.login-step li {font-size: var(--fz-body-xsm); position: relative; min-height: 4rem; height: auto;}
	.login-step li a {display: flex; 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;}

	.join-msg {margin-top: 6rem; font-size: 2rem;}
	.join-type {flex-direction: column;}
	.join-type a {justify-content: flex-start; gap: var(--spacer5); margin: 0; padding: 0 2.5rem; min-height: 10rem;}
	.join-type a .img {width: 4rem !important; height: auto;}
	.join-type a .dt-join {font-size: var(--fz-title-sm);}
	.join-type a .dd-join {font-size: var(--fz-body-xsm);}
	.join-type a dl {color: #333; margin-left: 1.5rem; text-align: left;}
	.join-type a dl dt {font-size: 1.8rem; font-weight: 500;}
	.join-type a dl dd {font-size: 1.4rem; margin-top: 0.4rem;}
	.join-type li > .img {width: 2.4rem !important;}
	
	.vouinfo .table-tit {padding: var(--spacer2); font-size: var(--fz-body-xsm); line-height: 1.4;}
	
	.content-print{margin-top: -85px;}
	
	.fc .fc-toolbar {flex-wrap: wrap;}
	.fc .fc-toolbar.fc-header-toolbar {position: relative; gap: var(--spacer1) 0; margin-bottom: var(--spacer3) !important;}
	.fc .fc-toolbar-title {font-size: var(--fz-title-md) !important;}
	.fc-toolbar button {min-height: 2.8rem; font-size: var(--fz-body-xsm) !important;}
	.fc-toolbar-chunk {display: flex; width: 100%;}
	.fc-toolbar-chunk:nth-of-type(1) {order: 3;}
	.fc-toolbar-chunk:nth-of-type(2) {justify-content: center;}
	.fc-toolbar-chunk:nth-of-type(3) {justify-content: flex-end; position: absolute; bottom: 0; right: 0;}
	.fc-toolbar-chunk .btn-group {max-width: inherit;}

}

/*loading bar*/
#loading-overlay {position: fixed; top: 0; left: 0;	width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; display: flex; justify-content: center; align-items: center;}
.loading-box {display: flex; flex-direction: column; align-items: center; background: white; padding: 30px 40px; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.15);}
.loading-msg {margin-top: 15px; font-size: 16px; color: #333; font-weight: bold;}
.spinner {border: 8px solid #eee; border-top: 8px solid #3498db; border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite;}

.popup .watermark {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-30deg);
	width: 100%;
	height: 100%;
	color: rgba(0, 0, 0, 0.1);
	white-space: nowrap;
	pointer-events: none;
	background: url(/static/images/kosmes/kosme_logo.png) repeat;
	z-index: -1;
	opacity: 0.05;
}
	
@keyframes spin {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}


/* 인쇄 전용 워터마크 스타일 */
@media print {
	
	.popup .watermark {
		display: block;
	}
	body {
		-webkit-print-color-adjust: exact; /* Chrome/Safari에서 투명도 유지 */
		print-color-adjust: exact;
	}
}