@charset "UTF-8";

@font-face {
    font-family: 'Spoqa Han Sans Neo';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Spoqa Han Sans Neo';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
/* 평택 반도체 */
@font-face {
    font-family: 'PT Bandoche';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408@1.0/PTBandocheR.woff2')
        format('woff2');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'PT Bandoche';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408@1.0/PTBandocheB.woff2')
        format('woff2');
    font-weight: 700;
    font-style: normal;
}

/* 기본 설정들 */
html {
    font-size: 10px;
    overflow-x: hidden;
}

 /* 스크롤 동작은 막혀도 스크롤바는 유지됨 */
/* html.lenis-stopped {
    overflow-y: scroll !important;
} */

html * {
    word-break: keep-all;
}

.simplebar-track {
  border-radius: 10px;
}

.simplebar-scrollbar::before {
  background-color: var(--color-primary); 
  border-radius: 10px;
}

.simplebar-scrollbar.simplebar-visible:before {
  opacity: 1;
}

.simplebar-track.simplebar-horizontal {
  margin-top: 5px;
  height: 7px
}
.simplebar-track.simplebar-vertical {
  width: 7px
}

.footer .simplebar-track.simplebar-vertical {
  display: none;
}

html,
body {
    overflow-x: clip;
    font-weight: 400;
    font-family: 'Pretendard', "Noto Sans KR", sans-serif;
}

img,
p,
span,
strong,
h1,
h2,
h3,
h4,
h5,
h6 {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* aos overwrite */
[data-aos="fade-up"] {
    transform: translateY(20px);
}

.fw-700 { font-weight: 700 !important;}
.hidden { overflow: hidden;}

/* scroll down icon */
.group-scroll-down .ico-box { position: relative;}
.group-scroll-down .ico-box .rect { position: relative; width: 2.6rem; height: 4.4rem; margin: 0 auto; padding: .9rem 0 3.1rem; border-radius: 999em; background: #fff linear-gradient(transparent 0%, transparent 50%,  var(--color-gray7) 50%,  var(--color-gray7) 100%); background-size: 100% 200%; animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite;}
.group-scroll-down .ico-box .rect::before,
.group-scroll-down .ico-box .rect::after { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}
.group-scroll-down .ico-box .rect::before { width: calc(100% - 2px); height: calc(100% - 2px); background-color: #fff; border-radius: 999em;}
.group-scroll-down .ico-box .rect::after { width: .4rem; height: .4rem; border-radius: 50%; background-color: var(--color-gray7); animation: trackBallSlide 5s linear infinite;}
.group-scroll-down .scroll-down-txt { display: block; margin-top: 12px; color:var(--color-gray7); font-family: 'Raleway', sans-serif; font-size: 1.4rem; line-height: 1.2; letter-spacing: 2.8px; animation: colorText 5s ease-out infinite, nudgeText 5s ease-out infinite;}

@keyframes colorSlide { 
    0% { background-position: 0% 100%; }
    20% { background-position: 0% 0%; }
    21% { background-color: #fff; }
    29.99% { 
        background-color: var(--color-gray7);
        background-position: 0% 0%;
    }
    30% { 
        background-color: #fff;
        background-position: 0% 100%;
    }
    50% { background-position: 0% 0%; }
    51% { background-color: #fff; }
    59% { 
        background-color: var(--color-gray7);
        background-position: 0% 0%;
    }
    60% { 
        background-color: #fff;
        background-position: 0% 100%;
    }
    80% { background-position: 0% 0%; }
    81% { background-color: #fff; }
    90%, 100% { background-color: var(--color-gray7); }
}

@keyframes trackBallSlide {
    0% {
        opacity: 1;
        transform: scale(1) translateY(-10px);
    }
    6% { 
        opacity: 1;
        transform: scale(.9) translateY(2.5px);
    }
    14% {
        opacity: 0;
        transform: scale(.4) translateY(20px);
    }
    15%, 19% {
        opacity: 0;
        transform: scale(.4) translateY(-10px);
    }
    28%, 29.99% {
        opacity: 1;
        transform: scale(1) translateY(-10px);
    }
    30% {
        opacity: 1;
        transform: scale(1) translateY(-10px);
    }
    36% { 
        opacity: 1;
        transform: scale(.9) translateY(2.5px);
    }
    44% {
        opacity: 0;
        transform: scale(.4) translateY(20px);
    }
    45%, 49% {
        opacity: 0;
        transform: scale(.4) translateY(-10px);
    }
    58%, 59.99% {
        opacity: 1;
        transform: scale(1) translateY(-10px);
    }
    60% {
        opacity: 1;
        transform: scale(1) translateY(-10px);
    }
    66% { 
        opacity: 1;
        transform: scale(.9) translateY(2.5px);
    }
    74% {
        opacity: 0;
        transform: scale(.4) translateY(20px);
    }
    75%, 79% {
        opacity: 0;
        transform: scale(.4) translateY(-10px);
    }
    88%, 100% {
        opacity: 1;
        transform: scale(1) translateY(-10px);
    }
}

@keyframes nudgeMouse {
    0% { transform: translateY(0); }
    20% { transform: translateY(8px); }
    30% { transform: translateY(0); }
    50% { transform: translateY(8px); }
    60% { transform: translateY(0); }
    80% { transform: translateY(8px); }
    90% { transform: translateY(0); }
}

@keyframes nudgeText {
    0% { transform: translateY(0); }
    20% { transform: translateY(2px); }
    30% { transform: translateY(0); }
    50% { transform: translateY(2px); }
    60% { transform: translateY(0); }
    80% { transform: translateY(2px); }
    90% { transform: translateY(0); }
} 

@keyframes colorText { 
    21% { color: #fff; }
    30% { color:var(--color-gray7); }
    51% { color: #fff; }
    60% { color:var(--color-gray7); }
    81% { color: #fff; }
    90% { color:var(--color-gray7); }
}

/* ico */
.ico { display: block; aspect-ratio: 1 / 1; background-repeat: no-repeat; background-position: center center; background-size: 100% auto;}
.ico.ico-chk { width: 3.2rem; margin: 0 auto; background-image: url(/img/common/ico_checkbox_round_p.svg);}
.ico.ico-chk-p2 { width: 3.5rem; background-image: url(/img/common/ico_checkbox_round_p2.svg);}

/* font */
.fb { font-family: "Noto Sans KR"; font-weight: 600; font-style: bold;}
.tal { text-align: left !important;}
.sc-ttl:not(.f-orient) { font-size: 5rem; font-weight: 600; line-height: 1.3; letter-spacing: -2px;}
.f-orient { font-family: 'Oranienbaum', sans-serif;}
.f-noto-serif { font-family: "Noto Serif KR";}
.fw-500 { font-weight: 500 !important;}
.sc-ttl.f-orient { font-weight: 200; font-size: 5rem; line-height: 1; letter-spacing: -2px;}
.sub-ttl { font-size: 2.8rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.56px;}
.desc { margin-top: 2.4rem; font-size: 2rem; font-weight: 300; letter-spacing: -0.4px;}
.fs-lg { font-size: var(--fs-lg);}
.fs-md { font-size: var(--fs-md);}
.fs-sm { font-size: var(--fs-sm);}
.fs-xs { font-size: var(--fs-xs);}
.color-red { color: var(--color-error);}
.color-primary { color: var(--color-primary);}
.color-primary2 { color: var(--color-primary2);}
.color-primary3 { color: var(--color-primary3);}
.bg-gray { background: var(--color-graya3);}
.bg-blue01 { background: var(--color-blue2);}
.bg-blue02 { background: var(--color-blue3);}
.bg-red { background: var(--color-red2);}
.bg-green { background: var(--color-green2);}

.border-gray4 {border: 1px solid var(--color-gray4);}

/* display */
.d-flex { display: flex !important;}
.flex-row { flex-direction: row !important;}
.justify-start { justify-content: flex-start !important;}
.justify-center { justify-content: center !important;}

/* margin */
.mt-px08 { margin-top: .8rem !important;}

/* button */
.btn { display: flex; justify-content: center; align-items: center; width: fit-content; gap: 2.4rem; padding: 1rem; padding-left: 3.6rem; border-radius: 999em; font-size: 1.6rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.32px;}
.btn.btn-all { display: flex; align-items: center; gap: 0; position: relative; padding: 0; color: var(--color-graya3); font-size: 1.4rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.28px;}
.btn.btn-all::after { content: ''; width: 2rem; height: 2rem; background: url(/img/common/arw-right-m.svg) no-repeat center center / 100% auto;}
.btn-primary { background-color: #fff; border: 1px solid var(--color-gray3); color: var(--color-gray2); transition: .3s ease-in-out;}
.btn-primary:hover { border-color: var(--color-primary);}
.btn-mono { background: rgba(255, 255, 255, 0.30); border: 1px solid #fff; color: #fff; transition: .3s ease-in-out;}
.btn-mono:hover { border-color: var(--color-primary);}
.btn-black { background-color: var(--color-gray2); color: #fff;}
.btn .ico-arw-right { width: 5.4rem; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--color-gray3); padding: 1.5rem; background: url(/img/common/arw-right-w.svg) no-repeat center center / 2.4rem auto var(--color-primary); transition: .3s ease-in-out;}
.btn-mono .ico-arw-right { background: url(/img/common/arw-right-bk.svg) no-repeat center center / 2.4rem auto #fff;}
.btn-mono:hover .ico-arw-right { border-color: var(--color-primary); background-color: var(--color-primary); background-image: url(/img/common/arw-right-w.svg);}
.btn-more { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 14rem; padding: 1.6rem 2rem; gap: 1rem; border-radius: 1.6rem; border: 1px solid var(--color-gray3); text-align: center; font-size: 1.6rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.32px; transition: .3s ease-in-out;}
.btn-more:hover { border-color: var(--color-primary);}
.btn-more .ico { width: 1.8rem; aspect-ratio: 1/1; background: url(/img/common/ico-plus-bk.svg) no-repeat center center / 100% auto;}
.btn.disabled { border: 1px solid var(--color-gray3); background-color: var(--color-gray3); color: var(--color-graya3);}
.btn.disabled .ico-arw-right { border-color: var(--color-graya3); background-color: var(--color-graya3); background-image: url(/img/common/arw-right-w.svg);}
.btn-login { display: flex; justify-content: flex-start; align-items: center; gap: 8.65rem; width: 100%; padding: 0; border-radius: .8rem; overflow: hidden; color: #fff;}
.btn-login.naver { background-color: var(--color-green1);}
.btn-login.kakao { background-color: var(--color-yellow1);}
.btn-login.primary { background-color: var(--color-primary);}
.btn-login .ico { padding: 1.9rem; width: 6.6rem; height: 6.6rem; background-repeat: no-repeat; background-position: center center; background-size: 2.8rem auto;}
.btn-login.naver .ico { background-image: url(/img/common/ico-naver-w.svg); background-color: var(--color-green2);}
.btn-login.kakao .ico { background-image: url(/img/common/ico-kakao-bk.svg); background-color: var(--color-yellow2);}
.btn-login.primary .ico { padding: 0; background-image: url(/img/common/logo-sm-w.svg); background-size: 100% auto;}
.btn-login .txt { color: #FFF; font-size: 1.6rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.32px;}
.btn-login.kakao .txt { color: #381E1F;}
.btn-sm { min-width: 18rem; padding: 2rem 0;}
.btn-xm { min-width: 11rem; padding: 2.4rem 0;}
.btn.primary { background-color: var(--color-primary); color: #fff;}
.btn-outline { border-width: 1px; border-style: solid;}
.btn-outline.primary { background-color: #fff; border-color: var(--color-primary); color: var(--color-primary);}
.btn-submit { width: 100%; height: 6rem; margin-top: 6rem; padding: 1rem; border-radius: .8rem;}

/*input*/
.form-group { display: flex; align-items: center; gap: 1.2rem;}
.form-group.column { flex-direction: column; align-items: flex-start;}
.form-group.active + .caution {opacity: 0;}
.form-group + .form-group,
.caution + .form-group { margin-top: 1rem;}
.form-group .form-label { display: flex; width: 110px; min-width: 110px; padding: 10px 0; font-size: 16px; line-height: 1.3; letter-spacing: -0.32px; color: var(--color-gray2); word-break: break-all;}
.form-group .form-label .required { margin-left: 4px; color: var(--color-primary); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.32px;}
.form-group.column .form-label { padding: 0;}
.form-group .form-label.require::after { content: '*'; display: inline; margin-left: 0.1em; font-size: inherit; line-height: inherit; color: var(--color-danger);}
.form-group .form-box { display: flex; flex: 1; gap: .8rem; align-items: center; position: relative;}
.form-group.column .form-box { width: 100%;}
.form-group .form-txt { font-size: 16px; line-height: 1.125; color: #999; white-space: nowrap;}
.form-group + .caution {display:block;margin:10px 0 0 120px;font-size: 12px;color:var(--color-danger);transition: opacity 0.2s ease;}
.form-group .form-label.type02 { position: absolute; top: 50%; left: 2rem; width: 100%; padding: 0; color: var(--color-gray7); transform: translate(0, -50%); opacity: 1; transition: all .25s ease; user-select: none;}
.form-group.active .form-label.type02 { opacity: 0; transform: translate(0.2em, -50%);}

.form-control { display: flex; width: 100%; min-height: 6.7rem; align-items: center; padding: 2.4rem 2rem; border: 1px solid var(--color-gray4); border-radius: .8rem; background-color: #fff; font-size: 1.6rem; line-height: 1.2; color: var(--color-graya3); outline: none; transition: text-indent 0.45s;}
.form-control.error { border-color: var(--color-error);}
.sc-reserve .form_wrap .input_group input[type='text']:focus, 
.sc-reserve .form_wrap .input_group input[type='number']:focus, 
.sc-reserve .form_wrap .input_group select:focus,
.sc-reserve .form_wrap .input_group textarea:focus,
.form-control:focus { border-color: var(--color-primary); background-color: rgba(0, 162, 192, .1);}
.form-control::placeholder { transition: all .25s ease;}
.form-control:focus::placeholder { color: var(--color-gray2); transform: translate(0.2em);}
.form-control:disabled,
.form-control:read-only { background-color: #eee; cursor: not-allowed;}
.form-control.form-datepicker,
.form-control.form-timepicker { padding-right: calc(20px + 24px + 10px); background-position: right 20px center; background-size: 24px auto; background-repeat: no-repeat;}
.form-control.form-datepicker { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 14C12.1978 14 12.3911 13.9414 12.5556 13.8315C12.72 13.7216 12.8482 13.5654 12.9239 13.3827C12.9996 13.2 13.0194 12.9989 12.9808 12.8049C12.9422 12.6109 12.847 12.4327 12.7071 12.2929C12.5673 12.153 12.3891 12.0578 12.1951 12.0192C12.0011 11.9806 11.8 12.0004 11.6173 12.0761C11.4346 12.1518 11.2784 12.28 11.1685 12.4444C11.0586 12.6089 11 12.8022 11 13C11 13.2652 11.1054 13.5196 11.2929 13.7071C11.4804 13.8946 11.7348 14 12 14ZM17 14C17.1978 14 17.3911 13.9414 17.5556 13.8315C17.72 13.7216 17.8482 13.5654 17.9239 13.3827C17.9996 13.2 18.0194 12.9989 17.9808 12.8049C17.9422 12.6109 17.847 12.4327 17.7071 12.2929C17.5673 12.153 17.3891 12.0578 17.1951 12.0192C17.0011 11.9806 16.8 12.0004 16.6173 12.0761C16.4346 12.1518 16.2784 12.28 16.1685 12.4444C16.0586 12.6089 16 12.8022 16 13C16 13.2652 16.1054 13.5196 16.2929 13.7071C16.4804 13.8946 16.7348 14 17 14ZM12 18C12.1978 18 12.3911 17.9414 12.5556 17.8315C12.72 17.7216 12.8482 17.5654 12.9239 17.3827C12.9996 17.2 13.0194 16.9989 12.9808 16.8049C12.9422 16.6109 12.847 16.4327 12.7071 16.2929C12.5673 16.153 12.3891 16.0578 12.1951 16.0192C12.0011 15.9806 11.8 16.0004 11.6173 16.0761C11.4346 16.1518 11.2784 16.28 11.1685 16.4444C11.0586 16.6089 11 16.8022 11 17C11 17.2652 11.1054 17.5196 11.2929 17.7071C11.4804 17.8946 11.7348 18 12 18ZM17 18C17.1978 18 17.3911 17.9414 17.5556 17.8315C17.72 17.7216 17.8482 17.5654 17.9239 17.3827C17.9996 17.2 18.0194 16.9989 17.9808 16.8049C17.9422 16.6109 17.847 16.4327 17.7071 16.2929C17.5673 16.153 17.3891 16.0578 17.1951 16.0192C17.0011 15.9806 16.8 16.0004 16.6173 16.0761C16.4346 16.1518 16.2784 16.28 16.1685 16.4444C16.0586 16.6089 16 16.8022 16 17C16 17.2652 16.1054 17.5196 16.2929 17.7071C16.4804 17.8946 16.7348 18 17 18ZM7 14C7.19778 14 7.39112 13.9414 7.55557 13.8315C7.72002 13.7216 7.84819 13.5654 7.92388 13.3827C7.99957 13.2 8.01937 12.9989 7.98079 12.8049C7.9422 12.6109 7.84696 12.4327 7.70711 12.2929C7.56725 12.153 7.38907 12.0578 7.19509 12.0192C7.00111 11.9806 6.80004 12.0004 6.61732 12.0761C6.43459 12.1518 6.27841 12.28 6.16853 12.4444C6.05865 12.6089 6 12.8022 6 13C6 13.2652 6.10536 13.5196 6.29289 13.7071C6.48043 13.8946 6.73478 14 7 14ZM19 4H18V3C18 2.73478 17.8946 2.48043 17.7071 2.29289C17.5196 2.10536 17.2652 2 17 2C16.7348 2 16.4804 2.10536 16.2929 2.29289C16.1054 2.48043 16 2.73478 16 3V4H8V3C8 2.73478 7.89464 2.48043 7.70711 2.29289C7.51957 2.10536 7.26522 2 7 2C6.73478 2 6.48043 2.10536 6.29289 2.29289C6.10536 2.48043 6 2.73478 6 3V4H5C4.20435 4 3.44129 4.31607 2.87868 4.87868C2.31607 5.44129 2 6.20435 2 7V19C2 19.7956 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 22 5 22H19C19.7956 22 20.5587 21.6839 21.1213 21.1213C21.6839 20.5587 22 19.7956 22 19V7C22 6.20435 21.6839 5.44129 21.1213 4.87868C20.5587 4.31607 19.7956 4 19 4V4ZM20 19C20 19.2652 19.8946 19.5196 19.7071 19.7071C19.5196 19.8946 19.2652 20 19 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V10H20V19ZM20 8H4V7C4 6.73478 4.10536 6.48043 4.29289 6.29289C4.48043 6.10536 4.73478 6 5 6H19C19.2652 6 19.5196 6.10536 19.7071 6.29289C19.8946 6.48043 20 6.73478 20 7V8ZM7 18C7.19778 18 7.39112 17.9414 7.55557 17.8315C7.72002 17.7216 7.84819 17.5654 7.92388 17.3827C7.99957 17.2 8.01937 16.9989 7.98079 16.8049C7.9422 16.6109 7.84696 16.4327 7.70711 16.2929C7.56725 16.153 7.38907 16.0578 7.19509 16.0192C7.00111 15.9806 6.80004 16.0004 6.61732 16.0761C6.43459 16.1518 6.27841 16.28 6.16853 16.4444C6.05865 16.6089 6 16.8022 6 17C6 17.2652 6.10536 17.5196 6.29289 17.7071C6.48043 17.8946 6.73478 18 7 18Z' fill='%23878787'/%3E%3C/svg%3E");}
.form-control.form-timepicker { background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 8V12L15 15M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z' stroke='%23878787' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");}

/* select */
.form-select { position: relative; }
.form-select.show { z-index: 10; }
.form-select,
.form-select .form-btn { display: flex; width: 100%; min-height: 6.7rem; align-items: center; padding: 1.3rem 1.8rem; padding-right: calc(2.4rem + 1.8rem * 2); border: 1px solid var(--color-gray4); border-radius: .8rem; background-color: #fff; font-size: 1.6rem; line-height: 1.2; color: var(--color-graya3); outline: none; transition: text-indent 0.45s; background: url(/img/common/arw-bottom-bk.svg) no-repeat right 1.8rem center / 2.4rem auto #fff;}
.form-select .form-btn:focus { box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.55); }
.form-select .form-btn.active { color: #191919; }
.form-select .form-btn::after { content: ''; display: block; position: absolute; right: 13px; top: 50%; transform: translateY(-50%); width: 14px; height: 10px; background-position: center center; background-size: 100% auto; background-repeat: no-repeat; background-color: #191919; pointer-events: none; transition: transform .45s; }
.form-select.show .form-btn::after { transform: translateY(-50%) rotate(180deg); background-color: red;}
.option-area { position: absolute; z-index: 99999; left: 0; top: 100px; overflow-y: auto; transform: translateY(10px); width: 100%; max-height: 250px; padding: 7px 0; border-radius: 4px; background-color: #FFFFFF; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);}
.option-area:not(.show) { display: none;}
.option-area.top {transform: translateY(-10px);}
.option-area.active .option-list { display: block; }
.option-area .option-item .option-btn { display: flex; width: 100%; padding: 6px 13px; font-size: 14px; line-height: 1.285714; text-align: left; }
.option-area .option-item:hover .option-btn { background-color: #fafafa; }
.option-area .option-item.active .option-btn { background-color: #eee; }
.option-area .option-item.selected,
.option-area .option-item.active,
.option-area .option-item:focus { background-color: #ccc;}

.input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%;}
.input-group .input-group_txt { display: flex; align-items: center; padding: 10px 20px; background-color: #fff; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; line-height: 1.25; color: #666; text-align: center; white-space: nowrap;}
.input-group:focus-within .input-group_txt,
.input-group:focus-within .form-control { border-color: var(--focus-color);}
.input-group .form-control { position: relative; flex: 1 1 auto; width: 1%; min-width: 0;}
.input-group .input-group_txt:first-child, 
.input-group .form-control:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0;}
.input-group .input-group_txt:first-child ~ .input-group_txt,
.input-group .input-group_txt:first-child ~ .form-control { margin-left: -1px; border-radius: 0;}
.input-group .input-group_txt:last-child,
.input-group .form-control:last-child { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 6px !important; border-bottom-right-radius: 6px !important;}

/*checkbox*/
.fancy-txt-box { display: flex; justify-content: space-between; align-items: center;}
.fancy-txt-box .txt { color: var(--color-gray2); font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.32px;}
.fancy-img-box {display:inline-flex;}
.fancy-img-box input { position: absolute;left: -9999px;}
.fancy-img-box input ~ label > span { display: table-cell;transform:translateY(0.1em);vertical-align: top;padding-left:.4rem;color: #404040; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.3px;}
.fancy-img-box input + label { display: table; cursor: pointer;}
.fancy-img-box input + label:before {content:'';display:inline-block;width:20px;height:20px;background:url("/img/common/ico-checkbox.svg") no-repeat center / auto 100%;outline:none;vertical-align: top;}
.fancy-img-box input:checked + label:before {background-position:0 0;}
.fancy-img-box input:not(:checked) + label:before {background-position: -20px 0;}
.fancy-img-box input:focus-within + label {outline: 1px dashed #000;}

/* type = outline, square */
.fancy-area.type02 .fancy-img-box input ~ label > span { color: var(--color-graya3); font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -0.32px;}
.fancy-area.type02 .fancy-img-box input:checked + label > span { color: var(--color-primary);}
.fancy-area.type02 .fancy-img-box input + label,
.fancy-area.type03 .fancy-img-box input + label { display: flex; justify-content: center; align-items: center; width: 100%; padding: 2rem; border-radius: .8rem; border: 1px solid var(--color-graya3); gap: .8rem;}
.fancy-area.type02 .fancy-img-box input:checked + label { border-color: var(--color-primary);}
.fancy-area.type02 .fancy-img-box input + label:before,
.fancy-area.type03 .fancy-img-box input + label:before {background: url(/img/common/ico-checkbox-m.svg) no-repeat center center / 100% auto;}
.fancy-area.type02 .fancy-img-box input:checked + label:before {background: url(/img/common/ico-checkbox-p.svg) no-repeat center center / 100% auto;}
.fancy-area.type02 .fancy-img-box input:not(:checked) + label:before {background-position: center center;}

/* type = outline, rounded */
.fancy-area.type03 .fancy-img-box input + label { width: fit-content; padding: .6rem 1rem; border-radius: 999em; gap: 0.4rem; border-color: var(--color-gray7);}
.fancy-area.type03 .fancy-img-box input:checked + label { border-color: var(--color-primary); background-color: var(--color-primary);}
.fancy-area.type03 .fancy-img-box input ~ label > span { padding: 0; color: var(--color-gray7); font-size: 1.3rem; letter-spacing: -0.26px;}
.fancy-area.type03 .fancy-img-box input:checked + label:before { background: url(/img/common/ico-checkbox-w.svg) no-repeat center center / 100% auto;}
.fancy-area.type03 .fancy-img-box input:checked + label > span { color: #fff;}

/*radio*/
.fancy-area {display: flex; justify-content: center; gap: 4rem; margin-top: 2.4rem;}
.fancy-area.type02 { flex-direction: column; gap: 1.2rem;}
.fancy-ani-box {display:inline-flex;}
.fancy-ani-box input + label {position: relative;display: flex;align-items: center;gap:5px;}
.fancy-ani-box input + label > span {display: flex;justify-content: center;align-items: center;position:relative;width: 20px;height: 20px;background: transparent;border: 2px solid #000;border-radius: 50%;cursor: pointer;transition: all 250ms cubic-bezier(.4,.0,.23,1);}
.fancy-ani-box input + label > span:before {content: "";position: absolute;top:2px;left:5px;width:4px;height:8px;border-right: 2px solid #000;border-bottom: 2px solid #000;border-radius:2px;transform: rotate(45deg);}
.fancy-ani-box input:checked + label > span {border: 2px solid #00B96B;background:#00B96B;animation: bounce 200ms cubic-bezier(.4,.0,.23,1);}
.fancy-ani-box input:checked + label > span:before {border-right: 2px solid #fff;border-bottom: 2px solid #fff;}
.fancy-ani-box input:focus-within + label {outline: 1px dashed #000;}

/* form check,radio */
.form-check-list { display: flex; gap: 10px;}
.form-check { display: inline-block; position: relative;}
.form-check .form-check-input { position: absolute; 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;}
.form-check .form-check-txt { display: flex; flex-wrap: wrap; align-items: center; position: relative; font-size: 11px; line-height: 1.636363; color: #727272;  -ms-user-select: none;  -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none;}
.form-check .form-check-txt::before { content: ''; display: block; width: 20px; height: 20px; margin-right: 5px; background-position: left top; background-size: 100% auto; background-repeat: no-repeat;}
.form-check .form-check-input[type="checkbox"] ~ .form-check-txt::before { border-radius: 3px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='40' viewBox='0 0 20 40' fill='none'%3E%3Crect x='1' y='21' width='18' height='18' rx='3' fill='%23727272' stroke='%23727272' stroke-width='0.7'/%3E%3Cpath d='M14.2901 26.2551C14.4802 26.0897 14.7332 25.9982 14.9956 26C15.2581 26.0018 15.5095 26.0968 15.6968 26.2648C15.8841 26.4328 15.9927 26.6608 15.9996 26.9005C16.0066 27.1403 15.9113 27.3732 15.734 27.5501L10.3499 33.7044C10.2573 33.7955 10.1456 33.8686 10.0214 33.9194C9.89718 33.9702 9.76304 33.9975 9.62699 33.9998C9.49095 34.0021 9.35579 33.9793 9.22961 33.9328C9.10342 33.8863 8.9888 33.817 8.89259 33.729L5.32211 30.4656C5.22268 30.381 5.14293 30.2788 5.08761 30.1654C5.0323 30.0519 5.00256 29.9294 5.00016 29.8052C4.99776 29.681 5.02276 29.5577 5.07366 29.4425C5.12456 29.3273 5.20032 29.2227 5.29642 29.1348C5.39252 29.047 5.507 28.9778 5.63301 28.9312C5.75903 28.8847 5.89401 28.8619 6.02989 28.8641C6.16578 28.8662 6.29979 28.8934 6.42394 28.944C6.54808 28.9945 6.65981 29.0674 6.75246 29.1583L9.57808 31.7397L14.2645 26.2822C14.2729 26.2727 14.2819 26.2636 14.2915 26.2551H14.2901Z' fill='white'/%3E%3Crect x='1' y='1' width='18' height='18' rx='3' fill='white' stroke='%23727272' stroke-width='0.7'/%3E%3C/svg%3E"); }
.form-check .form-check-input[type="radio"] ~ .form-check-txt::before { border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='40' viewBox='0 0 20 40' fill='none'%3E%3Cg clip-path='url(%23clip0_73_807)'%3E%3Crect x='1' y='1' width='18' height='18' rx='9' fill='white' stroke='%23727272' stroke-width='0.7'/%3E%3Crect x='1' y='21' width='18' height='18' rx='9' fill='%23727272' stroke='%23727272' stroke-width='0.7'/%3E%3Cpath d='M14.2901 26.2551C14.4802 26.0897 14.7332 25.9982 14.9956 26C15.2581 26.0018 15.5095 26.0968 15.6968 26.2648C15.8841 26.4328 15.9927 26.6608 15.9996 26.9005C16.0066 27.1403 15.9113 27.3732 15.734 27.5501L10.3499 33.7044C10.2573 33.7955 10.1456 33.8686 10.0214 33.9194C9.89718 33.9702 9.76304 33.9975 9.62699 33.9998C9.49095 34.0021 9.35579 33.9793 9.22961 33.9328C9.10342 33.8863 8.9888 33.817 8.89259 33.729L5.32211 30.4656C5.22268 30.381 5.14293 30.2788 5.08761 30.1654C5.0323 30.0519 5.00256 29.9294 5.00016 29.8052C4.99776 29.681 5.02276 29.5577 5.07366 29.4425C5.12456 29.3273 5.20032 29.2227 5.29642 29.1348C5.39252 29.047 5.507 28.9778 5.63301 28.9312C5.75903 28.8847 5.89401 28.8619 6.02989 28.8641C6.16578 28.8662 6.29979 28.8934 6.42394 28.944C6.54808 28.9945 6.65981 29.0674 6.75246 29.1583L9.57808 31.7397L14.2645 26.2822C14.2729 26.2727 14.2819 26.2636 14.2915 26.2551H14.2901Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_73_807'%3E%3Crect width='20' height='40' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); }
.form-check .form-check-input:checked ~ .form-check-txt::before { background-position: left top 100%;}
.form-check .form-check-input:focus ~ .form-check-txt::before { outline: 2px solid rgba(0, 0, 0, .5);}

/* 검색바 */
.search-area { position: relative; width: 100%; max-width: 38rem;}
.search-area .form-control { min-height: 5.4rem; padding: 1.4rem 2.4rem; border-radius: 999em; border: 1px solid var(--color-gray3); color: var(--color-gray2);}
.search-area .btn { position: absolute; top: 50%; right: 2.4rem; width: 2.4rem; height: 2.4rem; padding: 0; border: none; background: url(/img/common/ico-search.svg) no-repeat center center / 100% auto; transform: translateY(-50%);}

/* 태그 */
.tag { display: block; width: fit-content; min-width: 8rem; padding: .6rem 0; border-radius: .6rem; color: #fff; text-align: center; font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.32px;}
.tag.tag-mono { background-color: var(--color-graya3);}
.tag.tag-primary { background-color: var(--color-primary);}

/* swiper */
.swiper-controller { gap: 1rem;}
.swiper-controller .btn-next,
.swiper-controller .btn-prev { width: 5.4rem; aspect-ratio: 1 / 1; border-radius: 50%; border: 1px solid var(--color-gray3); background: url(/img/common/arw-right-bk.svg) no-repeat center center / 2.4rem auto;}
.swiper-controller .btn-prev { background-image: url(/img/common/arw-left-bk.svg); /* transform: rotate(180deg); */}
.swiper-controller.fraction {  display: flex; justify-content: space-between; align-items: center; gap: 2.4rem; position: absolute; bottom: 2rem; left: 50%; z-index: 10;  padding: 1rem 2rem; border-radius: 999em; background: rgba(0, 0, 0, 0.30); color: #fff; transform: translateX(-50%);}
.swiper-controller.fraction .btn { flex-shrink: 0; width: 2.4rem; aspect-ratio: 1 / 1; padding: 0; border: none;}
.swiper-controller.fraction .btn-prev { background-image: url(/img/common/arw-left-w.svg); transform: rotate(0);}
.swiper-controller.fraction .btn-next { background-image: url(/img/common/arw-right-ws.svg);}
.fraction .swiper-pagination { position: static; font-family: Raleway; font-size: 2rem; font-weight: 500; line-height: 1; letter-spacing: -0.4px;}

/* tab */
.tab-menu { display: flex; width: 100%; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: center;}
.tab-list { --width: 0; --scaleX: 0; --left: 0; display: flex; position: relative; width: 100%; max-width: 74rem; transition: .3s ease-in-out;}
.tab-list.on { --scaleX: 1;}
.tab-list::before { content: ''; display: block; position: absolute; bottom: 0; left: calc(var(--left) * 1px); width: calc(var(--width) * 1px); height: 1.5px; transform: scale(var(--scaleX)); transform-origin: 50% 50%; background-color: var(--color-gray2);}
.tab-item a { display: flex; width: 13rem; padding: 1.4rem 3rem; justify-content: center; align-items: center; font-size: 1.8rem; font-weight: 500; letter-spacing: -0.36px; color: #a3a3a3; transition: .3s ease-in-out;}
.tab-item.active a,
.tab-item:hover a { color: var(--color-gray2);}
.con { display: none; margin-top: 1.7rem;}
.con.active { display: block;}

/* accordion */
.accordion-btn,
.list .link { display: flex; align-items: center; gap: 5.5rem; position: relative; width: 100%; padding: 4.6rem 0; transition: .4s ease-in-out;}
.accordion-btn:hover,
.list .link:hover { background-color: var(--bg-gray2);}
.accordion-btn::before,
.list .link::before { width: 6rem; color: #A3A3A3; text-align: center; font-family: "Spoqa Han Sans Neo"; font-size: 1.8rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.36px;}
.accordion-btn .ttl,
.list-ttl { flex: 1; font-size: 2rem; font-weight: 500; text-align: left; letter-spacing: -0.4px;}
.accordion-btn .ico { display: flex; justify-content: center; align-items: center; position: relative; width: 2.4rem; margin-right: 4.6rem; aspect-ratio: 1/1;}
.accordion-btn .ico::before,
.accordion-btn .ico::after { content: ''; display: block; position: absolute; top: 50%; left: 50%; background-color: var(--color-gray2); transform: translate(-50%, -50%);}
.accordion-btn .ico::before { width: 14px; height: 2px;}
.accordion-btn .ico::after { width: 2px; height: 14px; transition: .4s ease-in-out;}
.accordion-btn.active .ico::after { transform: translate(-50%, -50%) rotate(90deg);}
.accordion-cnt { display: none; padding: 3rem 10rem; background-color: var(--bg-green1);}
.accordion-cnt .txt { color: var(--color-primary3); font-size: 2rem; font-weight: 300; letter-spacing: -0.4px;}

/* floating */
.floating-area { position: fixed; bottom: 7rem; right: 8rem; z-index: 980; /* opacity: 0; visibility: hidden; */}
.floating-box { display: flex; flex-direction: column; gap: 1.2rem;}
.floating-item { position: relative; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);}
.floating-item .btn-floating { display: flex; flex-direction: column; gap: 0.4rem; justify-content: center; align-items: center; width: 7rem; height: 7rem; padding: 1rem; transition: .3s ease-in-out;}
.floating-item.quick .btn-floating { background-color: var(--color-primary); color: #fff;}
.floating-item.quick .btn-floating .ico { background-image: url(/img/common/ico-quick.svg);}
.floating-item.quick .btn-floating.open .ico { background-image: url(/img/common/ico-close-w.svg);}
.floating-item.quick .btn-floating.open .txt { height: 0; opacity: 0; visibility: hidden;}
.floating-item.boarding .btn-floating { background-color: var(--color-gray1); color: #fff;}
.floating-item.boarding .btn-floating:hover { background-color: #fff; color: var(--color-primary);}
.floating-item.boarding .btn-floating .ico { background-image: url(/img/common/ico-bording-w.svg);}
.floating-item.boarding .btn-floating:hover .ico { background-image: url(/img/common/ico-bording-p.svg);}
.floating-item.go-to-top .btn-floating { background-color: #fff; color: var(--color-gray2);}
.floating-item.go-to-top .btn-floating:hover { color: var(--color-primary);}
.floating-item.go-to-top .btn-floating .ico { background-image: url(/img/common/arw-ftop-bk.svg);}
.floating-item.go-to-top .btn-floating:hover .ico { background-image: url(/img/common/arw-ftop-p.svg);}
.floating-area .ico { width: 2.4rem; height: 2.4rem; background-repeat: no-repeat; background-position: center center; background-size: 100% auto; transition: .3s ease-in-out;}
.floating-area .txt { overflow: hidden; font-family: SUIT; font-size: 1.4rem; font-weight: 600; line-height: 1.2; white-space: nowrap;}
.floating-area .quick-list { display: flex; flex-direction: column; gap: 1.3rem; position: absolute; bottom: 100%; right: 0; transform: translateY(-1.7rem); pointer-events: none;}
.floating-area .quick-item .link-quick { display: flex; gap: 0.6rem; align-items: center; padding: 0.8rem 1.5rem; border-radius: 999em; border: 1px solid var(--color-primary2); background-color: #fff; opacity: 0; visibility: hidden; transform: translateY(50%); pointer-events: auto;}
.floating-area .quick-item .link-quick .ico-naver { background-image: url(/img/common/ico-naver-p.svg);}
.floating-area .quick-item .link-quick .ico-blog { background-image: url(/img/common/ico-blog-p.svg);}
.floating-area .quick-item .link-quick .ico-ig { background-image: url(/img/common/ico-ig-p.svg);}

.floating-bar { position: fixed; bottom: 0; left: 0; width: 100%; background-color: var(--color-primary); z-index: 999; opacity: 0; visibility: hidden;}
.floating-bar .quick-menu { padding: 1.3rem 2rem;}
.floating-bar .quick-list { display: flex;}
.floating-bar .quick-item { flex: 1; position: relative;}
.floating-bar .quick-item + .quick-item::before { content: ''; display: block; position: absolute; top: 50%; left: 0; width: 1px; height: 4.4rem; background-color: #fff; transform: translateY(-50%);}
.floating-bar .quick-item .link-quick { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.2rem; position: relative; padding: 0 1.4rem;}
.floating-bar .quick-item:first-of-type .link-quick { padding-left: 0;}
.floating-bar .quick-item:last-of-type .link-quick { padding-right: 0;}
.floating-bar .quick-item .link-quick .ico { width: 2rem; aspect-ratio: 1 / 1;}
.floating-bar .quick-item .link-quick .ico-naver { background-image: url(/img/common/ico-naver-w.svg);}
.floating-bar .quick-item .link-quick .ico-blog { background-image: url(/img/common/ico-blog-w.svg);}
.floating-bar .quick-item .link-quick .ico-ig { background-image: url(/img/common/ico-ig-w.svg);}
.floating-bar .quick-item .link-quick .ico-phone { background-image: url(/img/common/ico-phone-w.svg);}
.floating-bar .quick-item .link-quick .txt { font-size: 1.4rem; line-height: 1.2; letter-spacing: -0.56px; color: #fff;}

/*modal*/
.modal {display:block;position: fixed;top: 0;left: 0;/* overflow-y: auto; */width: 100%;height: 100%;z-index: 9000;opacity: 1;animation-timing-function: ease-out;animation-name: modal-open;background: rgba(0, 0, 0, 0.6);}
.modal-close {display:none;opacity: 0;}
.modal-close .modal-centered {transform: translate(0, 100px);}
.modal-centered {display: flex;justify-content: center;align-items: center;overflow: hidden;width: 100%;height: 100%;min-height: calc(100% - 100px);padding: 50px 0;box-sizing: border-box;}
.modal-box {position: relative;z-index: 100;width: 89%;max-width: 60rem;margin: auto;padding: 2rem 2rem 6rem;border-radius: 2rem;background-color: #fff;text-align: center;border-radius:10px;animation-timing-function: ease-out;animation-duration: 0.3s;animation-name: modal-inner;transform: translate(0, 0);transition: transform 0.3s ease-out;box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);}
.modal .modal-cnt {/*  max-width: 49rem; */ max-height: calc(80vh - 60px); margin: 4rem auto 0; padding: 0 2.7rem; /* overflow-y: auto; overflow-x: hidden; */}
.modal .modal-ttl { margin-bottom: 5rem; color: var(--color-gray1); font-size: 2.4rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.48px;}
.modal .util-area { display: flex; justify-content: center; align-items: center;}
.modal .util-area .link,
.modal .util-area .link::before { color: var(--color-graya3); font-size: 1.8rem; letter-spacing: -0.36px;}
.modal .util-area .link { display: flex; align-items: center; position: relative;}
.modal .util-area .link + .link::before { content: '|'; display: block; margin: 0 1.8rem; color: var(--color-gray4);}
.modal .btn-wrap {display:flex;gap:1.2rem;justify-content:center;margin-top: 5rem;}
.modal .btn-modal-close {display:block;width:2.4rem;height: 2.4rem;margin-left: auto;background: url(/img/common/ico-close-bk.svg) no-repeat center center / 100% auto;}
.modal .btn-sm { margin: 0 auto;}
.modal .btn-wrap .btn-sm { margin: 0;}
.modal * + .cnt-ttl { margin-top: 3rem;}
.modal .cnt-ttl { font-size: 2rem; font-weight: 500; line-height: 1.8; letter-spacing: -0.8px;}
.modal .cnt-desc { font-size: 1.6rem; line-height: 1.8; letter-spacing: -0.64px;}
.modal .txt-box { margin-top: 1.6rem; padding: 1.6rem 2rem; border-radius: 1rem; background-color: var(--bg-gray1); font-size: 1.5rem; font-weight: 300; line-height: 1.6; letter-spacing: -0.6px;}
.modal .tbl-wrap { overflow-y: hidden; overflow-x: auto;}
.modal .tbl { width: 100%; margin-top: 1.6em; min-width: 60rem;}
.modal .tbl th,
.modal .tbl td { border: 1px solid var(--color-gray4); padding: 2rem 1rem; vertical-align: middle; text-align: center; font-size: 1.5rem; font-weight: 300; line-height: 1.4; letter-spacing: -0.6px; border-collapse:collapse;}
.modal .tbl thead th { border-bottom: 0;}
.modal .tbl td p { margin-top: 1rem;}
.modal ul { margin-top: 1.6rem;}
.modal ul li { position: relative; padding-left: 2rem; font-size: 1.5rem; font-weight: 300; line-height: 1.6; letter-spacing: -0.6px;}
.modal ul li::before { content: ''; display: block; position: absolute; top: 10px; left: 8px;  width: 4px; height: 4px; border-radius: 50%; background-color: var(--color-gray2); }
.modal.type02 .modal-box { max-width: 50rem;}
.modal.type02 .modal-cnt { max-width: 39rem; padding: 0;}
.modal.type03 { background: none; text-align-last: left;}
.modal.type03 .modal-centered { justify-content: flex-end; align-items: flex-end; padding: 7rem 0;}
.modal.type03 .modal-box { max-width: 38rem; margin-right: 16.6rem; margin-bottom: 0; padding: 4rem 3.2rem; background-color: #DCF0EF;}
.modal.type03 .btn-modal-close { position: absolute; top: 4.5rem; right: 3.2rem;}
.modal.type03 .desc { margin-top: 2rem; font-size: 1.6rem; letter-spacing: -0.32px;}
.modal.type03 .form { margin-top: 2rem;}
.modal.type03 .form-group + .form-group { margin-top: 1rem;}
.modal.type03 .form-select { color: var(--color-gray7);}
.modal.type03 .form-select,
.modal.type03 .form-group .form-control { min-height: 5rem; padding: 1.3rem 1.8rem; border: none;}
.modal.type03 .fancy-area { gap: .6rem;}
.modal.type03 .modal-toggle { display: inline; text-decoration: underline; font-size: 1.3rem; color: var(--color-gray7);}
.modal.modal-lg * { text-align: left;}
.modal.modal-lg .modal-box { max-width: 90rem; padding: 4rem;}
.modal.modal-lg .modal-cnt { padding: 2rem 2rem 0 0; border-top: 1px solid var(--color-gray2);}
.modal.modal-lg .modal-ttl { margin-bottom: 3rem;}
.modal.modal-lg .btn-modal-close{ position: absolute; top: 2rem; right: 2rem;}
.modal.modal-sm .modal-box { max-width: 40rem; padding: 4rem 2rem;}
.modal.modal-sm .modal-cnt { margin: 0 auto; padding: 0;}
.modal.modal-sm .modal-ttl { margin-bottom: 4rem; font-size: 2rem; line-height: 1.5; letter-spacing: -0.4px;}

@keyframes modal-open {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes modal-inner {
    from {
        transform: translate(0, 100px);
    }
    to {
        transform: translate(0, 0);
    }
}

/* ir (Image Replacement) */
.blind { position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0, 0, 0, 0);}

/* 모바일,PC 버전 전환 */
.mob{ display: none;}
.pc{ display: block;}

.sticky { position: sticky; top: 0; height: 100vh;}
.inner { width: 100%; max-width: 164rem; margin: 0 auto; padding: 0 2rem;}
.inner.type02 { max-width: 133rem;}
.dot { position: relative; padding-left: 3rem;}
.dot::before { content: ''; display: block; position: absolute; top: 1.3rem; left: 1.3rem; width: .4rem; height: .4rem; border-radius: 50%; background-color: var(--color-gray2);}

@media screen and (max-width: 768px) {
    .mob{ display: block;}
    .pc{ display: none;}
}

@media screen and (min-width: 1921px) {
    html { font-size: 11px;}
}
/* @media screen and (min-width: 1601px) and (max-width: 1920px) {
    html { font-size: 10px;}
} */
@media screen and (min-width: 1441px) and (max-width: 1600px) {
    html { font-size: 9px;}
}
@media screen and (min-width: 1201px) and (max-width: 1440px) {
    html { font-size: 8.5px;}
}
@media screen and (min-width: 961px) and (max-width: 1200px) {
    html { font-size: 8px;}
}
@media screen and (min-width: 769px) and (max-width: 960px) {
    html { font-size: 7.5px;}
}

@media screen and (max-width: 1440px) {
    /* Common Typography */
    .sc-ttl:not(.f-orient),
    .sc-ttl.f-orient { font-size: 5.5rem; }
    .sub-ttl { font-size: 3.08rem; }
    .desc { font-size: 2.2rem; }

    /* Button */
    .btn { font-size: 1.76rem; }
    .btn-more { font-size: 1.76rem; }

    /* Tab */
    .tab-item a { font-size: 1.98rem; }

    /* Accordion */
    .accordion-btn::before,
    .list .link::before { font-size: 1.98rem; } 
    .accordion-btn .ttl,
    .list-ttl { font-size: 2.2rem; }
    .accordion-cnt .txt { font-size: 2.2rem; }
}

@media screen and (max-width: 960px) {
    /* Common Typography */
    .sc-ttl:not(.f-orient) { font-size: 6rem; }
    /* .sc-ttl.f-orient { font-size: 10.164rem; } */
    .sub-ttl { font-size: 3.388rem; }
    .desc { font-size: 2.42rem; }

    /* Button */
    .btn { font-size: 1.936rem; } 
    .btn-more { font-size: 1.936rem; }

    /* Tab */
    .tab-item a { font-size: 2.178rem; } 

    /* Accordion */
    .accordion-btn::before,
    .list .link::before { font-size: 2.178rem; }
    .accordion-btn .ttl,
    .list-ttl { font-size: 2.42rem; }
    .accordion-cnt .txt { font-size: 2.42rem; }
}

@media screen and (max-width: 768px) {
    .ico.ico-chk { width: 2.5rem;}
    .ico.ico-chk-p2 { width: 2.8rem;}

    .sub-page .dot { padding-left: 2.4rem;}
    .sub-page .dot::before { top: 1rem; left: 1rem;}

    /* font */
    .sc-ttl:not(.f-orient) { font-size: 2.8rem; letter-spacing: -1.12px;}
    .sc-ttl.f-orient { font-size: 2.8rem; letter-spacing: -.84px;}
    .sub-ttl { font-size: 2.2rem; letter-spacing: -0.44px;}
    .desc { margin-top: 1.4rem; font-size: 1.7rem; letter-spacing: -0.34px;}

    /* button */
    .btn { gap: 2rem; padding: .8rem; padding-left: 3rem; font-size: 1.4rem; letter-spacing: -0.28px;}
    .btn.btn-all { font-size: 1.2rem; letter-spacing: -0.28px;}
    .btn.btn-all::after { width: 1.6rem; height: 1.6rem;}
    .btn .ico-arw-right { width: 4.4rem; padding: 1.2rem; background-size: 2rem auto;}
    .btn-more { width: 4.4rem; padding: 1.2rem; border-radius: 1.2rem;}
    .btn-more .txt { display: none;}
    .btn-login { padding: 0; gap: 6rem; border-radius: .6rem;}
    .btn-login .ico { padding: 1.2rem; width: 4.4rem; height: 4.4rem; background-size: 1.8rem auto;}
    .btn-login .txt { font-size: 1.3rem; letter-spacing: -0.26px;}
    .btn-sm { min-width: 13.6rem; padding: 1.4rem 0; font-size: 1.3rem; letter-spacing: -0.26px;}
    .btn-xm { min-width: 6.6rem; padding: 1.6rem 0; font-size: 1.2rem; letter-spacing: -0.24px;}

    /* 검색바 */
    .search-area { max-width: unset;}
    .search-area .form-control { min-height: 4.4rem; padding: 1.2rem 2.4rem;}
    .search-area .btn { width: 2rem; height: 2rem;}

    /* 태그 */
    .tag { min-width: 5.3rem; padding: .3rem 0; border-radius: .4rem; font-size: 1.2rem; letter-spacing: -0.24px;}

    /* swiper */
    .swiper-controller { gap: .8rem;}
    .swiper-controller .btn-next,
    .swiper-controller .btn-prev { width: 4.4rem; background-size: 2rem auto;}
    .swiper-controller.fraction { gap: 2rem; padding: 1rem 1.6rem;}
    .swiper-controller.fraction .btn { width: 2rem;}
    .fraction .swiper-pagination { font-size: 1.6rem; letter-spacing: -0.33px;}

    /* tab */
    .tab-item a { width: fit-content; padding: 1.4rem 0; font-size: 1.6rem; letter-spacing: -0.32px;}

    /* accordion */
    .accordion-btn { gap: 1.2rem; padding: 2rem 1rem;}
    .list .link { gap: 1rem; padding: 2.5rem 1rem;}
    .accordion-btn::before  { width: 2rem; font-size: 1.5rem; letter-spacing: -0.3px;}
    .list .link::before { content: none;}
    .accordion-btn .ttl,
    .list-ttl { font-size: 1.6rem; letter-spacing: -0.32px;}
    .accordion-btn .ico { width: 2rem; margin-right: 0;}
    .accordion-btn .ico::before { width: 12px; height: 1.5px;}
    .accordion-btn .ico::after { width: 1.5px; height: 12px;}
    .accordion-cnt { padding: 2rem;}
    .accordion-cnt .txt { font-size: 1.6rem; letter-spacing: -0.32px;}

    /* Floating */
    .floating-area { bottom: 8.6rem; right: 2.2rem;}
    .floating-item { box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.30);}
    .floating-item .btn-floating { width: 5rem; height: 5rem;}
    .floating-area .ico { width: 1.8rem; height: 1.8rem;}
    .floating-area .txt { font-size: 1rem;}
    .floating-area .quick-item .link-quick { gap: 0.3rem; padding: 0.8rem;}

    /* 공통 */
    .inner { padding: 0 2rem;}
    .sticky { position: static; height: unset;}

    /*input*/
    .form-group { gap: .8rem;}
    .form-group + .form-group,
    .caution + .form-group { margin-top: 1rem;}
    .form-group .form-label { width: 110px; min-width: 110px; padding: 1px 0; font-size: 12px; letter-spacing: -0.24px;}
    .form-group .form-label .required { margin-left: 4px; color: var(--color-primary); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.32px;}
    .form-group.column .form-label { padding: 0;}
    .form-group .form-label.require::after { content: '*'; display: inline; margin-left: 0.1em; font-size: inherit; line-height: inherit; color: var(--color-danger);}
    .form-group .form-box { display: flex; flex: 1; gap: .8rem; align-items: center;}
    .form-group .form-txt { font-size: 16px; line-height: 1.125; color: #999; white-space: nowrap;}
    .form-group + .caution {display:block;margin:10px 0 0 120px;font-size: 12px;color:var(--color-danger);transition: opacity 0.2s ease;}

    .form-control { min-height: 4.6rem; padding: 1.6rem 1.4rem; border-radius: .6rem; font-size: 1.2rem;}

    /*checkbox*/
    .fancy-txt-box .txt { font-size: 1.2rem; letter-spacing: -0.24px;}
    .fancy-img-box input ~ label > span { padding-left:.2rem; font-size: 1.3rem; letter-spacing: -0.26px;}
    .fancy-area.type02 .fancy-img-box input ~ label > span { font-size: 12px; letter-spacing: -0.24px;}
    .fancy-area.type02 .fancy-img-box input + label { padding: 1.6rem; border-radius: .6rem; gap: .6rem;}
    .fancy-img-box input + label:before { width:1.6rem; height:1.6rem;}
    .fancy-img-box input:not(:checked) + label:before {background-position: -1.6rem 0;}

    /*modal*/
    .modal-box { padding: 2rem 2rem 4rem; border-radius: 1.4rem;}
    .type02 .modal-box { max-width: 50rem;}
    .modal.modal-sm .modal-box { max-width: 40rem; padding: 4rem 2rem;}
    .modal .modal-cnt { max-height: calc((var(--vh, 1vh) * 80) - 60px); margin: 1rem auto 0; padding: 0;}
    .modal .modal-ttl { margin-bottom: 3rem; font-size: 1.8rem; letter-spacing: -0.36px;}
    .modal.modal-sm .modal-ttl { margin-bottom: 2rem; font-size: 1.5rem; letter-spacing: -0.3px;}
    .modal .util-area .link,
    .modal .util-area .link::before { font-size: 1.3rem; letter-spacing: -0.26px;}
    .modal .util-area .link + .link::before { margin: 0 1.2rem;}
    .modal .btn-wrap { margin-top: 3rem;}
    .modal.type03 { display: none;}
    .modal .cnt-ttl { font-size: 1.6rem;}
    .modal .cnt-desc { font-size: 1.4rem;}
}

/* 기본 설정들 */

/* 비급여,개인정보 처리방침,환자의 의무와권리 */
.required_info_se {
    padding: 100px 0;
}

.required_info_se .cont_01 .tab_menu2 {
    display: flex;
    gap: 20px;
}

.sub_title-box h2 {
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    padding-bottom: 40px;
    line-height: 70px;
    font-family: 'Noto Sans KR', sans-serif;
    border-bottom: solid 1px #A9C9F2;
    margin-bottom: 20px;
}

.obligations-box h3 {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 30px;
    line-height: 40px;
    color: #A9C9F2;
    font-weight: 700;
    margin-bottom: 30px;
}

.required_info_se .cont_01 .tab_menu2 li {
    font-size: 20px;
    font-family: 'Noto Sans KR', sans-serif;
    line-height: 30px;
    font-weight: 500;
    color: #A9C9F2;
    border-bottom: none;
    cursor: pointer;
}

.required_info_se .cont_01 .tab_menu2 li:hover {
    border-bottom: solid 2px #A9C9F2;
}

.required_info_se .cont_01 .tab_menu2 li.on {
    color: #222;
    border-bottom: solid 2px #A9C9F2;
}

.w_1350 {
    max-width: 1350px;
    margin: 0 auto;
    width: 100%;
}

.obligations-box .small_text {
    font-size: 16px;
    line-height: 25px;
    color: #222;
    margin-bottom: 30px;
    font-family: 'Noto Sans KR', sans-serif;
}

.obligations-box h4 {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 22px;
    line-height: 30px;
    color: #222;
    font-weight: 600;
    margin-bottom: 20px;
}

.bg_layout {
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.25);
    background: #fff;
    padding: 5%;
    box-sizing: border-box;
}

.left_fixed_se {
    background: #ECF4FF;
}

@media screen and (max-width: 1350px) {
    .w_1350 {
        width: 90%
    }
}

@media screen and (max-width: 900px) {
    .subvs .bgtxt p {
        margin-bottom: 90px;
    }
}

@media screen and (max-width: 768px) {
    .required_info_se {
        padding: 50px 0;

    }

    .sub_title-box h2 {
        font-size: 30px;
        line-height: 40px;
        padding-bottom: 20px
    }

    .obligations-box h3 {
        font-size: 20px;
        line-height: 30px;
    }
}

.tab_container2 {
    margin-top: 40px;
}

.tab_container2 .table_1 table {
    width: 100%;
    border: solid 1px #A9C9F2;
}

.tab_container2 .table_1 table tr {}

.tab_container2 .table_1 table th {
    border: solid 1px #A9C9F2;
    padding: 10px 0;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    background-color: #A9C9F2;
    color: #ccc;
    font-family: 'Noto Sans KR', sans-serif;
}

.tab_container2 .table_1 table td {
    font-size: 16px;
    line-height: 20px;
    padding: 10px 0;
    border: solid 1px #A9C9F2;
    text-align: center;
    vertical-align: middle;
    font-weight: 500;
    color: #333;
    font-family: 'Noto Sans KR', sans-serif;
}

.obligations-box h3 {
    font-size: 30px;
    line-height: 40px;
    color: #333;
    font-weight: 700;
    margin-bottom: 30px;
}

.obligations-box h4 {
    font-size: 22px;
    line-height: 30px;
    color: #333;
    font-weight: 600;
    margin-bottom: 20px;
}

.obligations-box .small_text {
    font-size: 16px;
    line-height: 25px;
    color: #333;
    margin-bottom: 30px;
}

@media screen and (max-width: 768px) {
    .tab_container2 .table_1 table th {
        font-size: 16px;
        line-height: 20px;
    }

    .tab_container2 .table_1 table td {
        font-size: 14px;
        line-height: 20px;
        padding: 10px;

    }

    .required_info_se {
        padding-top: 50px 0;
    }

    .obligations-box h3 {
        font-size: 20px;
    }

    .obligations-box .small_text {
        font-size: 14px;
    }

    .obligations-box h4 {
        font-size: 18px;
    }
}