@charset "utf-8";
*{
box-sizing:border-box}
body{
margin:0;
font-family:SUIT,Pretendard,"Malgun Gothic",Arial,sans-serif;
color:#282828}
button,input,select{
font-family:inherit}
a{
color:inherit}
.content{
width:calc(100% - 100px);
max-width:1500px;
margin:auto}
.page-heading{
text-align:center;
padding-top:42px;
padding:42px 0 0;
}
.page-heading h1{
font-size:55px;
line-height:1.2;
letter-spacing:-1.4px;
margin:0 0 40px;
font-weight:800}
.page-heading nav{
display:flex;
justify-content:center;
gap:60px}
.page-heading nav a{
font-size:20px;
color:#aaa;
text-decoration:none;
position:relative;
padding-bottom:24px}
.page-heading nav a:hover{
color:#111}
.page-heading nav a.active{
color:#111;
font-weight:700}
.page-heading nav a.active:after{
content:"";
position:absolute;
width:7px;
height:7px;
background:#111;
border-radius:50%;
bottom:5px;
left:calc(50% - 3px)}
.page-body{
padding-top:135px;
padding-bottom:150px;
min-height:1330px}
h2{
font-size:38px;
line-height:1.4;
margin:0 0 20px;
font-weight:800;
letter-spacing:-1px}
.intro h2{
font-size:44px;
line-height:1.35;
margin-bottom:48px;
font-weight:800;
}
.intro p{
font-size:24px;
line-height:36px;
margin:0;
max-width:940px;
font-weight:500;
}
.steps-title{
text-align:center;
font-size:40px;
margin:190px 0 85px}
.steps{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:26px}
.step{
position:relative;
min-height:359px;
border:1px solid #e3e3e3;
border-radius:8px;
padding:35px 52px 35px;
background:#fff;
box-shadow:0 2px 14px #00000004}
.step-number{
font-size:70px;
line-height:1;
color:#d3e5ed;
font-weight:800;
}
.step-icon{
position:absolute;
right:55px;
top:28px;
width:113px;
height:113px;
border-radius:50%;
background:#f6f6f6;
display:flex;
align-items:center;
justify-content:center}
.step-icon img{
width:85px;
height:75px;
object-fit:contain}
.step h3{
font-size:28px;
margin:75px 0 20px;
font-weight:800;
}
.step p{
font-size:22px;
line-height:32px;
color:#777;
margin:0;
font-weight:500;
}
.sample .steps-title{
margin-top:165px}
.sample-notes{
margin:70px 0 0}
.sample-notes>div{
display:grid;
grid-template-columns:280px 1fr;
gap:5px;
margin-bottom:90px}
.sample-notes dt{
font-size:30px;
font-weight:700}
.sample-notes dd{
margin:0;
font-size:22px;
line-height:34px}
.contact-actions{
display:flex;
gap:38px;
max-width:1415px;
margin:60px auto 0;
padding:0;}
.contact-actions>*{
flex:1;
min-width:0;
min-height:116px;
border-radius:7px;
display:flex;
gap:28px;
align-items:center;
padding:15px 45px;
border:1px solid #e3e3e3;
text-decoration:none;
font-size:25px;
font-weight:700}
.contact-actions>* img{
width:70px;
height:70px;
object-fit:contain}
.contact-actions>*>span:last-child{
margin-left:auto;
font-size:35px;
font-weight:400}
.kakao-action{
background:#ffde00;
cursor:pointer}
.phone-action{
background:white;
color:#153f77}
.phone-action small{
display:block;
font-size:17px;
font-weight:400;
margin-bottom:8px}
.phone-action strong{
color:#282828;
font-size:28px;
font-weight:800;
}
.board-heading{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:40px;
margin-bottom:100px}
.board-heading p{
font-size:24px;
line-height:1.5;
margin:0}
.board-search{
display:flex;
align-items:center;
width:530px;
min-width:340px;
max-width:100%;
height:52px;
border:1px solid #dedede;
border-radius:40px;
padding:4px 8px 4px 30px;
gap:22px;}
.board-search select{
border:0;
background:white;
color:#454545;
width:110px;
font-size:18px;}
.board-search input{
border:0;
min-width:0;
width:100%;
font-size:18px;
background:transparent}
.board-search input::placeholder{
color:#aaa}
.board-search button{
flex:0 0 42px;
width:42px;
height:42px;
border:2px solid #153f77;
border-radius:50%;
background:white;
cursor:pointer;
padding:10px;}
.board-search svg{
width:100%;
height:100%;
fill:none;
stroke:#153f77;
stroke-width:1.8}
.board-list,table.downloads{
border-top:1px solid #888;
width:100%}
.notice-row{
border-bottom:1px solid #eee}
.notice-row summary{
display:flex;
align-items:center;
gap:75px;
list-style:none;
min-height:101px;
padding:24px 25px;
cursor:pointer;
font-size:24px}
.row-number{
color:#999;
font-size:18px}
.notice-row time{
margin-left:auto;
font-size:18px;
color:#888;
padding-right:110px}
.notice-body{
padding:30px 140px;
background:#f7f7f7;
font-size:22px}
.downloads{
border-collapse:collapse;
text-align:left}
.downloads th{
font-size:22px;
font-weight:500;
padding:18px 20px;
border-bottom:1px solid #ddd}
.downloads td{
font-size:23px;
padding:28px 20px;
border-bottom:1px solid #eee;
height:102px;
}
.downloads td.row-title{font-size:22px}
.downloads th:first-child{
width:245px}
.downloads th:last-child,.downloads td:last-child{
text-align:center;
width:250px}
.pdf-button{
border:1px solid #455774;
border-radius:5px;
background:white;
padding:11px 25px;
white-space:nowrap;
color:#283e65;
font-size:19px;
cursor:pointer;
font-weight:600;
}
.pagination{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
margin-top:80px;
color:#777;
font-size:20px}
.pagination [aria-current]{
border:1px solid #888;
padding:8px 16px}
.faq-row{
border-bottom:1px solid #eee}
.faq-row summary{
min-height:110px;
padding:25px;
display:flex;
gap:30px;
align-items:center;
list-style:none;
font-size:23px;
cursor:pointer}
.q,.a{
display:flex;
justify-content:center;
align-items:center;
border-radius:50%;
width:42px;
height:42px;
flex:0 0 42px;
font-size:19px;
color:white;
background:#111}
.a{
background:#174771}
.chevron{
width:10px;
height:10px;
border-right:1px solid;
border-bottom:1px solid;
transform:rotate(45deg);
margin-left:auto}
.faq-row[open] .chevron{
transform:rotate(225deg)}
.faq-answer{
display:flex;
gap:30px;
background:#f7f7f7;
padding:42px 25px 75px;
min-height:262px;
}
.faq-answer p{
font-size:22px;
line-height:36px;
margin:0;
color:#777}
.empty{
text-align:center;
padding:50px}
dialog{
max-width:calc(100% - 40px);
border:0;
border-radius:12px;
padding:30px;
box-shadow:0 10px 50px #0003}
dialog::backdrop{
background:#0005}
dialog button{
padding:10px 22px;
border:1px solid #aaa;
background:white;
border-radius:5px;
cursor:pointer}
summary::-webkit-details-marker{
display:none}
[hidden]{
display:none!important}
@media(max-width:1300px){
.step{
padding:30px}
.step-icon{
right:25px;
width:90px;
height:90px}
.step-number{
font-size:60px}
.step h3{
font-size:22px}
.step p br{
display:none}
.contact-actions>*{
font-size:20px;
padding:15px 20px;
gap:15px}
.phone-action strong{
font-size:20px}
.board-heading{
flex-wrap:wrap}
.board-search{
margin-left:auto}
.notice-row time{
padding-right:20px}
.board-heading{
margin-bottom:65px}
}
@media(max-width:900px){
.content{
width:calc(100% - 48px)}
.page-heading h1{
font-size:34px}
.page-body{
padding-top:85px;
padding-bottom:100px;
min-height:900px}
.steps{
grid-template-columns:1fr}
.step{
min-height:280px}
.step h3{
margin-top:45px}
.steps-title{
margin-top:100px}
.contact-actions{
flex-direction:column;
padding:0}
.sample-notes>div{
grid-template-columns:1fr;
gap:20px;
margin-bottom:50px}
.intro p br{
display:none}
.faq-answer p br{
display:none}
.notice-row summary{
gap:25px}
.downloads th:first-child{
width:auto}
.downloads th:last-child,.downloads td:last-child{
width:auto}
.downloads td{
font-size:16px}
.downloads td.row-title{font-size:15px}
.pdf-button{
padding:10px}
.board-heading p{
font-size:19px}
.intro h2{
font-size:26px}
}
@media(max-width:600px){
.page-heading{
padding-top:35px}
.page-heading h1{
font-size:30px;
margin-bottom:30px}
.page-heading nav{
gap:28px}
.page-heading nav a{
font-size:16px}
.page-body{
padding-top:65px}
h2{
font-size:30px}
.intro h2{
font-size:23px;
margin-bottom:35px}
.intro p{
font-size:16px;
line-height:1.8}
.steps-title{
font-size:28px;
margin:90px 0 40px}
.board-search{
width:100%;
min-width:0;
height:60px;
gap:10px;
padding-left:16px}
.board-search select{
font-size:14px;
width:75px}
.board-search input{
font-size:14px}
.board-search button{
width:45px;
height:45px;
flex-basis:45px}
.notice-row summary{
display:grid;
grid-template-columns:30px 1fr;
gap:10px 18px;
font-size:17px}
.notice-row time{
grid-column:2;
margin:0;
font-size:13px}
.notice-body{
padding:25px;
font-size:16px}
.downloads th,.downloads td{
padding:18px 8px;
font-size:13px}
.downloads td.row-title{font-size:12px}
.pdf-button{
font-size:11px;
padding:9px 6px}
.faq-row summary{
padding:22px 12px;
gap:15px;
font-size:16px}
.faq-answer{
padding:25px 12px;
gap:15px}
.faq-answer p{
font-size:16px;
line-height:1.8}
.q,.a{
width:32px;
height:32px;
flex-basis:32px;
font-size:16px}
.contact-actions>* img{
width:50px;
height:50px}
.contact-actions>*{
font-size:17px;
min-height:100px}
.phone-action strong{
font-size:18px}
.phone-action small{
font-size:13px}
}
/* Preserve complete icon bounds and wrap long button labels. */
.step-icon img{
display:block;
width:81px;
height:73px;
object-fit:contain;
max-width:calc(100% - 22px);
max-height:calc(100% - 22px)}
.contact-actions{
width:100%;
box-sizing:border-box}
.contact-actions>*{
overflow:visible}
.contact-actions>* img{
flex:0 0 70px;
width:70px;
height:70px;
object-fit:contain}
.contact-actions>*>span:nth-child(2){
min-width:0;
overflow-wrap:anywhere;
line-height:1.45}
.contact-actions>*>span:last-child{
flex:0 0 auto}
.phone-action strong{
display:block;
overflow-wrap:anywhere}
@media(max-width:1300px){
.contact-actions>* img{
flex-basis:60px;
width:60px;
height:60px}
}
@media(max-width:600px){
.contact-actions>*{
padding:15px;
gap:12px}
.contact-actions>* img{
flex-basis:50px;
width:50px;
height:50px}
.contact-actions>*>span:last-child{
font-size:26px}
.contact-actions>*{
font-size:16px}
.phone-action strong{
font-size:16px}
}

/* 시안별 시각 보정. 검색/펼침/버튼 이벤트와 HTML 구조는 유지합니다. */
@media(min-width:901px){
.notice .board-heading{margin-bottom:36px}
.notice-article{width:calc(100% - 100px);max-width:1500px;margin:0 auto;padding:48px 0 120px}
.notice-article h2{margin:0;padding:28px 0 18px;border-top:1px solid #222;font-size:28px;line-height:1.45;font-weight:700}
.notice-meta{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0;padding-bottom:18px;border-bottom:1px solid #e5e5e5;color:#888;font-size:15px}
.notice-view-body{padding:40px 0 48px;border-bottom:1px solid #e5e5e5;font-size:17px;line-height:1.8}
.notice-view-body p{margin:0}
.notice-list-back{display:flex;justify-content:flex-end;margin:28px 0 48px}
.notice-list-back a{display:inline-flex;align-items:center;justify-content:center;min-width:148px;padding:12px 28px;border:1px solid #222;border-radius:40px;text-align:center;transition:background .3s ease,color .3s ease,border-color .3s ease}
.notice-list-back a:hover{background:#173e75;border-color:#173e75;color:#fff}
.notice-pager{border-top:1px solid #e5e5e5}
.notice-pager a,.notice-pager p{display:grid;grid-template-columns:72px 20px minmax(0,1fr);gap:12px;align-items:center;margin:0;padding:18px 8px;border-bottom:1px solid #e5e5e5;color:#222}
.notice-pager a:hover{color:#173e75}
#container.downloads .board-search,.notice .board-search{margin-top:50px}
.faq .board-heading{margin-bottom:112px}
.contact-actions>*>img{padding-right:28px;border-right:1px solid #153f7733;box-sizing:content-box}
.kakao-action{background:#ffe21c}
.quote .page-body{min-height:1320px}
.sample .page-body{min-height:1600px}
}
.notice .page-body,#container.downloads .page-body,.faq .page-body{max-width:1280px}
.notice .board-heading h2,#container.downloads .board-heading h2,.faq .board-heading h2{font-size:34px}
.notice .board-heading,#container.downloads .board-heading,.faq .board-heading{margin-bottom:48px}
.notice-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:16px}
.board-count{margin:0;font-size:16px;font-weight:700;color:#222}
.board-count strong{font-weight:700;color:#222}
.notice .board-list{border-top:2px solid #222}
.notice .notice-row{display:flex;align-items:center;gap:14px;min-height:72px;padding:10px 28px 10px 6px;border-bottom:1px solid #ececec;font-size:23px;color:#222}
.notice-badge{flex:0 0 auto;padding:4px 11px;border-radius:20px;background:#1c2d59;color:#fff;font-size:12px;font-weight:600;line-height:1.4}
.notice .row-title{flex:1;min-width:0}
.notice .notice-row time,.notice .notice-arrow{flex:0 0 auto;margin:0;padding:0;font-size:15px;font-weight:400;line-height:1;color:#c5c5c5}
.notice .notice-row time{margin-right:48px}
.notice .notice-row:hover .row-title{color:#173e75}
.notice-pages{display:flex;align-items:center;justify-content:space-between;margin-top:36px}
.notice .pagination{margin:0;justify-content:flex-start;gap:16px;color:#c5c5c5;font-size:18px}
.notice .pagination [aria-current]{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0;border:1px solid #ddd;color:#222;background:#fff}
.page-fraction{display:flex;align-items:center;gap:8px;margin:0;color:#888;font-size:15px}
.page-fraction span{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;border:1px solid #ddd;color:#222}
@media(max-width:900px){
.notice-article{width:calc(100% - 48px);padding-top:32px}
.notice-article h2{font-size:22px}
}
@media(max-width:600px){
.notice-toolbar{flex-direction:column;align-items:stretch}
.notice .board-heading h2,#container.downloads .board-heading h2,.faq .board-heading h2{font-size:32px;font-weight:800}
.notice .notice-row{flex-wrap:wrap;gap:8px 12px}
.notice .row-title{flex:1 1 calc(100% - 70px)}
.notice .notice-row time{margin-left:auto}
}
#container.downloads .row-title{font-weight:700}
#container.downloads .board-search button,.notice .board-search button{background:#fff;border-color:#1c2d59}
#container.downloads .board-search button svg,.notice .board-search button svg{stroke:#1c2d59}
#container.downloads .board-search button:hover,.notice .board-search button:hover{background:#173e75;border-color:#173e75}
#container.downloads .board-search button:hover svg,.notice .board-search button:hover svg{stroke:#fff}
@media(max-width:900px){
.page-heading{padding:35px 24px 0}
.page-heading h1{font-size:38px}
.intro h2{font-size:28px}
.intro p{font-size:18px;line-height:29px}
.contact-actions>*{padding:18px 24px}
}
@media(max-width:600px){
.page-heading h1{font-size:32px}
.intro h2{font-size:24px}
.intro p{font-size:16px;line-height:1.8}
}
.step{
transition:opacity 1s ease,transform 1s ease,translate .4s ease,box-shadow .4s ease,border-color .4s ease}
.step:hover{
translate:0 -8px;
border-color:#c5d4e8;
box-shadow:0 18px 40px rgba(21,63,119,.12)}
.step-icon{
transition:background .4s ease,translate .4s ease}
.step:hover .step-icon{
background:#e8eef6;
translate:0 -2px}
.contact-actions>*{
transition:opacity 1s ease,transform 1s ease,translate .4s ease,box-shadow .4s ease}
.contact-actions>*:hover{
translate:0 -6px;
box-shadow:0 16px 34px rgba(21,63,119,.14)}
.contact-actions>*>span:last-child{
transition:translate .4s ease}
.contact-actions>*:hover>span:last-child{
translate:4px 0}
.notice-row summary,.faq-row summary{
transition:background-color .3s ease}
.notice-row summary:hover,.faq-row summary:hover{
background:#f4f7fb}
.downloads tbody tr{
transition:background-color .3s ease}
.downloads tbody tr:hover{
background:#f7f9fc}
.pdf-button{
transition:background .3s ease,color .3s ease,border-color .3s ease}
.pdf-button span{
display:inline-block;
color:inherit;
transition:translate .3s ease,color .3s ease}
.pdf-button:hover{
background:#173e75;
border-color:#173e75;
color:#fff}
.pdf-button:hover span{
color:#fff;
translate:0 3px}
.board-search button{
transition:background .3s ease,border-color .3s ease}
.board-search button:hover{
background:#173e75;
border-color:#173e75}
.board-search button:hover svg{
stroke:#fff}
.pagination a{
transition:color .3s ease}
.pagination a:hover{
color:#173e75}

/* 고객센터 공통 크기: 제목 28 / 안내 17 / 목록 17 / 답변 16 */
.page-heading h1{font-size:44px;font-weight:700}
.page-heading nav a{font-size:18px}
.notice .board-heading h2,#container.downloads .board-heading h2,.faq .board-heading h2{font-size:28px;font-weight:700;letter-spacing:-.6px}
.board-heading p{font-size:17px;line-height:1.7}
.notice .notice-row{font-size:17px;min-height:70px}
.faq-row summary{font-size:17px;min-height:80px;padding:22px 20px}
.faq-answer{padding:28px 20px 36px;min-height:0}
.faq-answer p{font-size:16px;line-height:1.85}
.q,.a{width:32px;height:32px;flex-basis:32px;font-size:15px}
.board-search select,.board-search input{font-size:15px}
.notice-article h2{font-size:24px}
.notice-view-body{font-size:16px;line-height:1.85}
.downloads th,.downloads td,.downloads td.row-title{font-size:16px;font-weight:400;height:auto;padding:22px 14px}
.downloads th:first-child{width:85px}.downloads th:last-child,.downloads td:last-child{width:140px}
.downloads .row-title a:hover{color:#173e75}
.downloads .row-date{font-size:14px;color:#888}
.attachment-list{margin-top:32px;padding-top:20px;border-top:1px solid #eee;font-size:15px}
@media(max-width:900px){.page-heading h1{font-size:36px}}
@media(max-width:600px){.page-heading h1{font-size:30px}.page-heading nav a{font-size:16px}.notice .board-heading h2,#container.downloads .board-heading h2,.faq .board-heading h2{font-size:24px}.board-heading p{font-size:16px}.notice .notice-row,.faq-row summary{font-size:16px}.faq-answer p{font-size:15px}.downloads th,.downloads td,.downloads td.row-title{font-size:14px;padding:18px 8px}.downloads th:first-child{width:36px}.downloads th:last-child,.downloads td:last-child{width:82px}.downloads .row-date{font-size:12px}}

/* 페이지 제목 1pt 증가. 안내 문장은 기존 크기 유지 */
.page-heading h1{font-size:calc(44px + 1pt)}
@media(max-width:900px){.page-heading h1{font-size:calc(36px + 1pt)}}
@media(max-width:600px){.page-heading h1{font-size:calc(30px + 1pt)}}
.page-heading nav a{font-size:calc(18px + 1pt)}
@media(max-width:600px){.page-heading nav a{font-size:calc(16px + 1pt)}}

/* 2차 메뉴 롤오버에도 활성 메뉴의 굵기를 유지 */
.page-heading nav a:hover,.page-heading nav a:focus-visible,.page-heading nav a.active:hover{font-weight:700}

/* 목록 이동 버튼: 논슬립 상세 기준 */
.notice-list-back{justify-content:center}
.notice-list-back a{min-width:0;min-height:54px;padding:14px 28px;border:1px solid #d4dce6;border-radius:5px;background:#fff;color:#173e75;font:inherit;font-size:16px;line-height:1.5;font-weight:400;text-decoration:none;transition:none;transform:none;box-shadow:none}
.notice-list-back a:hover,.notice-list-back a:focus-visible{background:#173e75;color:#fff;border-color:#173e75;font-weight:400;transition:none;transform:none}