@charset "utf-8";
@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-display: swap;
    src: local('Pretendard Black'), url('/plugin/font/Pretendard/woff2/Pretendard-Black.woff2') format('woff2'), url('/plugin/font/Pretendard/woff/Pretendard-Black.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-display: swap;
    src: local('Pretendard ExtraBold'), url('/plugin/font/Pretendard/woff2/Pretendard-ExtraBold.woff2') format('woff2'), url('/plugin/font/Pretendard/woff/Pretendard-ExtraBold.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-display: swap;
    src: local('Pretendard Bold'), url('/plugin/font/Pretendard/woff2/Pretendard-Bold.woff2') format('woff2'), url('/plugin/font/Pretendard/woff/Pretendard-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-display: swap;
    src: local('Pretendard SemiBold'), url('/plugin/font/Pretendard/woff2/Pretendard-SemiBold.woff2') format('woff2'), url('/plugin/font/Pretendard/woff/Pretendard-SemiBold.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-display: swap;
    src: local('Pretendard Medium'), url('/plugin/font/Pretendard/woff2/Pretendard-Medium.woff2') format('woff2'), url('/plugin/font/Pretendard/woff/Pretendard-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-display: swap;
    src: local('Pretendard Regular'), url('/plugin/font/Pretendard/woff2/Pretendard-Regular.woff2') format('woff2'), url('/plugin/font/Pretendard/woff/Pretendard-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-display: swap;
    src: local('Pretendard Light'), url('/plugin/font/Pretendard/woff2/Pretendard-Light.woff2') format('woff2'), url('/plugin/font/Pretendard/woff/Pretendard-Light.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    font-display: swap;
    src: local('Pretendard ExtraLight'), url('/plugin/font/Pretendard/woff2/Pretendard-ExtraLight.woff2') format('woff2'), url('/plugin/font/Pretendard/woff/Pretendard-ExtraLight.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    font-display: swap;
    src: local('Pretendard Thin'), url('/plugin/font/Pretendard/woff2/Pretendard-Thin.woff2') format('woff2'), url('/plugin/font/Pretendard/woff/Pretendard-Thin.woff') format('woff');
}

@font-face {
    font-family: 'NotoSansKR';
    src: url('/plugin/font/NotoSansKR/NotoSans-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}

/* Light - 300 */
@font-face {
    font-family: 'NotoSansKR';
    src: url('/plugin/font/NotoSansKR/NotoSans-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}

/* Regular - 400 */
@font-face {
    font-family: 'NotoSansKR';
    src: url('/plugin/font/NotoSansKR/NotoSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

/* Medium - 500 */
@font-face {
    font-family: 'NotoSansKR';
    src: url('/plugin/font/NotoSansKR/NotoSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

/* Bold - 700 */
@font-face {
    font-family: 'NotoSansKR';
    src: url('/plugin/font/NotoSansKR/NotoSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

/* Black - 900 */
@font-face {
    font-family: 'NotoSansKR';
    src: url('/plugin/font/NotoSansKR/NotoSans-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}

html {
    scroll-behavior: smooth;
}

:root {
    --FontFamily            : NotoSansKR, sans-serif;
    --max-width              : 1400px;
    --vw-min: 360;
    --vw-max: 1380;
    --bp: calc((100vw - (var(--vw-min)*1px)) / (var(--vw-max) - var(--vw-min)));
    --bg1:#142a5e;
    --bg2:#e9f1f7;
    --bg3:#2367a8;
    --bg4:#25a3cb;
    --bg5:#001f50;
}

html, body {
    font-size:16px;
    height: 100%;
    font-weight: 400;
    font-family: var(--FontFamily);
}

body#stnBody {
    font-size:16px;
    font-size: clamp(15px, calc(15px + (18 - 15) * var(--bp)), 18px);
    line-height: 1.55;
    padding:0 0 0 0;
    margin:0 0 0 0;
    width:100%;
    height:100vh;
}

input[type=text],
input[type=password],
select { box-sizing: border-box; transition: all 0.3s; }
textarea { display: block; width: 100%; padding: 15px; background: #FFF; border: 1px solid #DDDFE1; border-radius: 10px; box-sizing: border-box; word-break: break-all; resize: none; transition: all 0.3s; font-family:inherit; }
input[type=text]:focus,
input[type=password]:focus,
select:focus,
textarea:focus { border-color: #135dba; outline: none;}
input::placeholder,
textarea::placeholder {
    font-family: var(--FontFamily);
    font-weight: 400;
    color:#999;
}
input:focus::placeholder {
    color:#333;
}

img.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

.stnInp { padding:0 .5rem; height: 35px; border:1px solid #DDDFE1; font-family: var(--FontFamily); border-radius: 10px 10px; }

input.stnInp[readonly]:hover,
input.stnInp[readonly] {
    color: #333;
    background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
    border-color: #DDDFE1;
}

.stnInp.required {
    border:1px solid red;
    position: relative;
}
.stnInp.required:after {
    content: '';
    width:10px;
    height:100%;
    position: absolute;
    top: 0;
    right:0;
}
input[type=text].required:focus,
input[type=password].required:focus,
select.required:focus,
textarea.required:focus { border-color:red; outline: none;}



.inp100 { width:100px; }
.inp200 { width:200px; }
.inp300 { width:300px; }
.inp500 { width:500px; }
.inp00 { width:100%; }
#loadingOverlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.95);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.loadingBar {
    width: 50%;
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
    position: relative;
}

.loadingBar::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 30%;
    background: #3498db;
    animation: loadingMove 1.5s infinite ease-in-out;
    border-radius: 4px;
}

@keyframes loadingMove {
    0% { left: -30%; }
    50% { left: 50%; }
    100% { left: 100%; }
}

.fs-10-12{ font-size: clamp(10px, calc(10px + (16 - 12) * var(--bp)), 12px); }
.fs-12-16{ font-size: clamp(12px, calc(12px + (16 - 12) * var(--bp)), 16px); }
.fs-14-18{ font-size: clamp(14px, calc(14px + (18 - 14) * var(--bp)), 18px); }
.fs-16-22{ font-size: clamp(16px, calc(16px + (22 - 16) * var(--bp)), 22px); }
.fs-18-24{ font-size: clamp(18px, calc(18px + (24 - 18) * var(--bp)), 24px); }
.fs-20-28{ font-size: clamp(20px, calc(20px + (28 - 20) * var(--bp)), 28px); }


.h1{ font-size: clamp(28px, calc(28px + (48 - 28) * var(--bp)), 48px); line-height:1.2; }
.h2{ font-size: clamp(24px, calc(24px + (36 - 24) * var(--bp)), 36px); line-height:1.25; }
.h3{ font-size: clamp(20px, calc(20px + (28 - 20) * var(--bp)), 28px); line-height:1.3; }

select.select {
    cursor: pointer;
    padding: 6px 10px 7px 10px; /* 여백으로 높이 설정 */
    font-family: inherit;  /* 폰트 상속 */
    background: url(https://t1.daumcdn.net/depo/datatrend/ico_check.png) no-repeat calc(100% - 10px) 50%; /* 네이티브 화살표 대체 */
    background-size: 12px;
    border: 1px solid #ccc;
    border-radius: 4px 4px; /* iOS 둥근모서리 제거 */
    -webkit-appearance: none; /* 네이티브 외형 감추기 */
    -moz-appearance: none;
    appearance: none;
    transition: all 0.3s;
    font-size: 14px;
}
select.select option {
    color: #333;
    background-color: #fff;
}
select.select:focus{ border-color: #135dba; outline: none;}


#detailModal {
    font-family: var(--FontFamily);
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0; top: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
}
#detailModal .tb {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
#detailModal .modal-content {
    background: white;
    border-radius: 8px;
    width: 80%;
    max-width: 700px;
    position: relative;
}

#detailModal .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background:#2f5fe3;
    border-radius: 8px 8px 0 0;
    padding:10px 20px;
    color:#FFF;
}
#detailModal .header > h3 {
    font-size: 1.125rem; font-weight: 500;
}
#detailModal .close-btn {
    font-size: 24px;
    cursor: pointer;
}
#detailModal div#modalBody {
    padding:20px;
    max-height: 60vh;
    overflow-y: auto;
}

    /* 툴바와 에디터 전체에 적용 */
.ql-toolbar.ql-snow,
.ql-container.ql-snow,
.ql-container .ql-editor {
    font-family: var(--FontFamily);
    font-size: 14px;       /* 필요시 */
    line-height: 1.6;      /* 필요시 */
}

/* placeholder도 같은 폰트 */
.ql-editor.ql-blank::before{
    font-family: var(--FontFamily);
}

/* 코드 블록은 가독성 위해 모노스페이스 유지 */
.ql-editor pre,
.ql-editor code{
    font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 100%;
}

.ql-align-right { text-align: right }
.ql-align-justify { text-align: justify }
.ql-align-center,
.txtCenter { text-align:center; }
.txtLeft { text-align:left !important; }


footer#stnFooterWrap {
    margin-top: 4rem;
}
footer#stnFooterWrap > section.stnFooterBg {
    background: #0C1632;
}
footer#stnFooterWrap article.stnFooterInfo {
    padding:.5rem 2rem;
    max-width:calc(var(--max-width) - 4rem);
    margin:0 auto;
}
footer#stnFooterWrap article.stnFooterInfo > div.stnFooterInfoLink {
    font-family: var(--FontFamily); display: flex; gap: 1rem;
}
footer#stnFooterWrap article.stnFooterInfo > div.stnFooterInfoLink > a {
    color:#FFF; text-decoration:none; font-size:.875rem; font-weight:400;
}
footer#stnFooterWrap > section.stnFooterBg2 {
    background: #f9f9f9;
}
footer#stnFooterWrap > section.stnFooterBg2 h3,
footer#stnFooterWrap > section.stnFooterBg2 h6,
footer#stnFooterWrap > section.stnFooterBg2 p { padding:0 0 0 0; margin:0 0 0 0; }
footer#stnFooterWrap > section.stnFooterBg2 > div.stnFooterInfo {
    padding:2rem 2rem;
    max-width:calc(var(--max-width) - 4rem);
    margin:0 auto;
    display: grid; grid-template-columns:repeat(3,minmax(0,1fr))
}
footer#stnFooterWrap > section.stnFooterBg2 > div.stnFooterInfo > article {
    color:#333; font-size:.875rem;
}
footer#stnFooterWrap > section.stnFooterBg2 > div.stnFooterInfo > article h6,
footer#stnFooterWrap > section.stnFooterBg2 > div.stnFooterInfo > article a {
    color:#333; text-decoration:none; font-size:.875rem;
}
footer#stnFooterWrap > section.stnFooterBg2 h3 { padding-bottom:.5rem; }
footer#stnFooterWrap > section.stnFooterBg2 div.form-group {
    display: flex; gap: 1rem;
}
footer#stnFooterWrap > section.stnFooterBg2 div.form-group > label { font-weight: 500; }
footer#stnFooterWrap > section.stnFooterBg3 {
    background: var(--bg5); color: #FFF; font-size:.875rem;
}
footer#stnFooterWrap > section.stnFooterBg3 > article {
    padding:0 2rem;
    max-width:calc(var(--max-width) - 4rem);
    margin:0 auto;
}
footer#stnFooterWrap > section.stnFooterBg3 > article.info {
    padding-top:1rem; padding-bottom:1rem; font-size:.875rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem;
}
footer#stnFooterWrap > section.stnFooterBg3 > article.copy {
    padding-bottom:1rem; font-size:.75rem;
}

#goTopBtn {
    position: fixed;
    bottom: 40px;
    right: 40px;
    display: none;
    z-index: 999;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: #333;
    color: white;
    cursor: pointer;
    padding: 12px 16px;
    border-radius: 1rem 1rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

#goTopBtn:hover {
    background-color: #555;
}
button#stnEstimateBtn {
    min-width:185px; font-weight: 400; margin-top: 10px;
}
img.escrow {
    height:15px; margin-top: 10px;
}


select.stnWrap {
    padding:0 2rem;
    max-width: var(--max-width);
    margin:0 auto;
    position:relative;
}





.chk_box { display: table; position: relative; padding-left: 25px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; top:0; font-size:.8125rem; color:#666; }
.chk_box input[type="checkbox"] { display: none; }
.chk_box > .on { width: 18px; height: 18px; background: #ddd; position: absolute; top:50%; transform: translateY(-50%); left: 0;  border-radius:4px 4px;  }
.chk_box input[type="checkbox"]:checked + .on { background: #000; }
.chk_box > .on:after { content: ""; position: absolute; display: none; }
.chk_box input[type="checkbox"]:checked + .on:after { display: block; }
.chk_box > .on:after { width: 6px; height: 12px; border: solid #fff; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; left: 6px; top: 0; }
.chk_box:hover { color:#000; }













@media (max-width: 599px) {

}

/* Fold / Flip */
@media (min-width: 600px) and (max-width: 767px) {

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {

}

/* Small Desktop / Laptop */
@media (min-width: 1025px) and (max-width: 1439px) {

}

/* Large Desktop / WQHD 이상 */
@media (min-width: 1440px) {

}