@charset "utf-8";

@import url('//fonts.googleapis.com/earlyaccess/jejumyeongjo.css');

@font-face {
    font-family: 'YeogiOttaeJalnanGothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/JalnanGothic.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

#hd { border-bottom:1px solid #ededed; }

/* 공통 */
.section { background:#fff; position:relative; }
.inner {  width:100%; max-width:1200px; margin:0 auto; padding:clamp(50px, 10vw, 150px) 0; text-align:center; }
.full { width:100%; line-height:1; margin:0 auto; padding:0 15px; text-align:center; }
.flex_wrap { display:flex; }
.input_box { width:100%; height:40px; padding:0 10px; border:1px solid #ddd; border-radius:5px; }
.input_btn { display:flex; align-items:center; justify-content:center; height:40px; border-radius:5px; }
.text-ellipsis { display:table; table-layout:fixed; width:100%; position:relative; }
.text-ellipsis > * { display:table-cell; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; position:relative; }
.text-ellipsis > *:focus { min-width:fit-content; line-height:1; padding:10px; border:2px solid #000068; background:#fff; position:absolute; left:50%; transform:translate(-50%, -50%) scale(1); z-index:10; cursor:text; }
.page_header { margin-bottom:clamp(25px, 5vw, 50px); }
.page_title { font-family:'GMarketSans'; font-size:clamp(30px, 3.5vw, 40px); font-weight:bold; color:#000068; text-align:center; letter-spacing:-0.05em; word-break:keep-all; }



.faq_section .inner { max-width:1230px; padding:clamp(150px, 20vw, 200px) 15px; }

.faq_page { width:100%; margin: 0 auto;}

.faq_header { margin-bottom:clamp(25px, 5vw, 50px); }
.faq_title { font-family:'GMarketSans'; font-size:clamp(30px, 3.5vw, 40px); font-weight:bold; color:#000068; text-align:center; letter-spacing:-0.05em; word-break:keep-all; }

/* Controls */
.faq_controls { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:20px; padding:15px; border:1px solid #ddd; border-radius:12px; background:#fff; }
.faq_search { display:flex; gap:5px; align-items:center; width:50%; }
.faq_input { flex:1; height:40px; padding:0 10px; border:1px solid #ddd; border-radius:5px; font-size:14px; outline:none; }
.faq_input:focus { border-color: #000068; }
.faq_filters { display:flex; flex-wrap:wrap; gap:5px; }
.faq_chip { height:35px; padding:0 20px; border:1px solid #ddd; border-radius:999px; background:#fff; font-size:14px; color:#333; letter-spacing:-0.05em; cursor:pointer; }
.faq_chip.active{ border-color:#000068; background:#000068; color:#fff; font-weight:700; }
.faq_actions{ display:none; gap:8px; justify-content:flex-end; }
.faq_btn{ height:40px; padding:0 15px; border:1px solid transparent; background:#000068; color:#fff; border-radius:5px; font-size:12px; font-weight:bold; cursor:pointer; }
.faq_btn.outline{ background:#fff; color:#000068; }

/* List */
.faq_list{ border:1px solid #e6e6e6; border-radius:12px; overflow:hidden; }
.faq_item + .faq_item{ border-top: 1px solid #f0f0f0; }
.faq_q { display:flex; align-items:center; gap:10px; width:100%; height:70px; padding:15px; border:0; background:transparent; cursor:pointer; text-align:left; }

.faq_badge { display:flex; align-items:center; justify-content:center; flex:0 0 auto; height:30px; padding:0 15px; border-radius:999px; font-size:12px; font-weight:bold; background:#f3f4ff; color:#000068; border:1px solid #d9dbff; }

.faq_q_text { flex:1; font-size:16px; font-weight:bold; color:#222; line-height:1.3; }

/* icon (chevron) */
.faq_icon { width:18px; height:18px; position:relative; flex:0 0 auto; }
.faq_icon::before,
.faq_icon::after{ content:""; position:absolute; top:50%; width:10px; height:2px; background:#555; }
.faq_icon::before{ left:1px; transform:translateY(-50%) rotate(45deg); }
.faq_icon::after{ right:1px; transform: translateY(-50%) rotate(-45deg); }

.faq_q[aria-expanded="true"] .faq_icon { transform: rotate(180deg); }

/* Answer */
.faq_a{ display:none; padding:0 16px 16px;}
.faq_a_inner{ line-height:1.7; padding:15px 20px; border:1px solid #eee; border-radius:10px; background:#fafafe; color:#333; font-size:14px; text-align:left; }
.faq_empty{ padding:40px 16px; text-align:center; color:#666; font-size:14px; }




.guide_section .inner { max-width:1230px; padding:clamp(150px, 20vw, 200px) 15px; }

.guide_section .step_wrap { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; padding:clamp(20px, 3.5vw, 50px); background:#eff2fa; border-radius:10px; }
.guide_section .step_wrap li { display:flex; flex-flow:column; align-items:center; flex-grow:1; width:calc((100% - 60px)/4); }
.guide_section .step_wrap li .step_num { display:flex; align-items:center; justify-content:center; width:70%; height:clamp(30px, 3.5vw, 40px); background:#3673c2; border-radius:200px; font-size:clamp(12px, 1.4vw, 16px); font-weight:500; color:#fff; position:relative; }
.guide_section .step_wrap li .step_box { display:flex; flex-flow:column; align-items:center; justify-content:center; width:100%; aspect-ratio:1/1; margin-top:clamp(20px, 3vw, 40px); border:2px solid #3673c2; border-radius:10px; background:#fff; position:relative; }
.guide_section .step_wrap li .step_box::before { content:''; height:clamp(20px, 3vw, 40px); border-left:1px dashed #3673c2; position:absolute; top:clamp(-40px, -3vw, -20px); left:50%; transform:translateX(-50%);}
.guide_section .step_wrap li .step_box::after { content:''; width:10px; aspect-ratio:1/1; border-radius:50%; background:#3673c2; position:absolute; top:0; left:50%; transform:translate(-50%, -50%); }
.guide_section .step_wrap li .step_box .icon { width:clamp(20px, 3vw, 40px); }
.guide_section .step_wrap li .step_box .icon img { width:100%; }
.guide_section .step_wrap li .step_box .tit { width:100%; margin-top:clamp(5px, 1vw, 15px); font-size:clamp(18px, 2vw, 25px); font-weight:bold; color:#3673c2; word-break:keep-all; }
.guide_section .step_wrap li .step_box .txt { width:85%; line-height:1.5; margin-top:clamp(5px, 1vw, 15px); font-size:clamp(12px, 1.5vw, 18px); word-break:keep-all; }

.guide_section .guide_box { display:flex; align-items:center; margin-top:100px; position:relative; }
.guide_section .guide_box::before { content:''; width:100%; height:60%; border-radius:10px; background:#eff2fa; position:absolute; }
.guide_section .guide_box .img_wrap { display:flex; justify-content:center; width:55%; }
.guide_section .guide_box .img_wrap .guide_img { width:50%; }
.guide_section .guide_box .img_wrap .guide_img img { width:100%; }
.guide_section .guide_box .text_wrap { flex:1; padding:0 clamp(10px, 1.5vw, 25px); text-align:left; }
.guide_section .guide_box .text_wrap .tit { display:flex; align-items:center; width:100%; padding-left:12%; font-size:clamp(20px, 3vw, 40px); font-weight:bold; color:#3673c2; position:relative; }
.guide_section .guide_box .text_wrap .tit::before { content:''; display:flex; width:10%; aspect-ratio:1/1; background:url('./img/guide/logo_symbol.png') no-repeat center center / contain; position:absolute; left:0; }
.guide_section .guide_box .text_wrap .txt { line-height:1.5; margin-top:clamp(15px, 2vw, 30px); font-size:clamp(14px, 1.8vw, 22px); font-weight:500; color:#333; word-break:keep-all; }
.guide_section .guide_box .text_wrap .txt span { color:#3673c2; }






/* 반응형 */
@media (max-width: 1450px){
	
}

@media (max-width: 1250px){

}

@media (max-width: 1200px){

}

@media (max-width: 980px){

}

@media (max-width: 870px){
	.faq_controls { flex-flow:column; }
	.faq_search,
	.faq_filters { width:100%; }
}

@media (max-width: 760px){
	.guide_section .step_wrap li { width:calc((100% - 20px)/2); }
	.guide_section .step_wrap li .step_box .icon { width:clamp(20px, 5vw, 80px); }
	.guide_section .step_wrap li .step_box .tit { margin-top:clamp(5px, 2vw, 15px); font-size:clamp(14px, 4vw, 25px); }
	.guide_section .step_wrap li .step_box .txt { margin-top:clamp(5px, 2vw, 15px); font-size:clamp(9px, 3vw, 18px); }

	.guide_section .guide_box { flex-flow:column-reverse; }
	.guide_section .guide_box .img_wrap { width:90%; }
	.guide_section .guide_box .text_wrap { width:90%; padding:0; padding-bottom:10px; }
	.guide_section .guide_box .text_wrap .tit { font-size:clamp(20px, 4vw, 40px); }
	.guide_section .guide_box .text_wrap .txt { font-size:clamp(12px, 3vw, 22px); }
}

@media (max-width: 650px){

}

@media (max-width: 540px){

}

@media (max-width: 430px){
	.guide_section .guide_box .img_wrap { flex-flow:column; align-items:center; }
	.guide_section .guide_box .img_wrap .guide_img { width:90%; }
}

@media (max-width: 320px){
	
}