@charset "utf-8";

body, input, textarea, select, button, table{font-family: "Wanted Sans",sans-serif; font-weight: 400; color: #333; line-height: 1;}
button, input[type="button"], input[type="submit"]{cursor: pointer}
.wrap{max-width: 1240px; margin: 0 auto;}
.hide{position: absolute; left: -9999px; top: 0;}
.none{display: none}
select, 
input[type="text"], 
input[type="password"], 
input[type="date"],
input[type="number"]{border: 1px solid #eee; padding: 0.5rem; background-color: #fbfbfb;}
select{padding-right: 2rem; background: #fbfbfb url("../img/selectArrow.svg") no-repeat calc(100% - 0.75rem) center/ 1rem;}
select:hover{cursor: pointer;}
textarea{display: block; width: 100%; border: 1px solid #eee; padding: 1rem; line-height: 1.25; resize: none;}
:hover{transition-duration: 100ms;}
:root{--swiper-theme-color: var(--color-basic);}
.sound_only {display: inline-block; position: absolute; top: 0; left: 0; margin: 0 !important; padding: 0 !important; font-size: 0; line-height: 0; border: 0 !important; overflow: hidden !important; }

/* =================== 대부중개D 솔루션 시작 =================== */
input {-webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0;}
input:disabled, select:disabled{color: #999}
input[type=checkbox]{width:1.2em; height:1.2em; border:1px solid #ddd; -webkit-border-radius:50%; moz-border-radius:50%; border-radius: 50%; vertical-align: middle; background-color: #fff;}
input[type=checkbox]:checked{content: ""; font-weight:600; color: #fff; background:#333 url('../img/check.png') no-repeat center;  background-size: 70%; border:1px solid #333;}
input[type=radio]{width:1em; height:1em; border:1px solid #ddd; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius: 50%; vertical-align: middle; background-color: #fff;}
input[type=radio]:checked{content: ""; font-weight:600; color: #fff; background:#fff url('../img/dot.png') no-repeat center / cover; border:1px solid #666;}
input[type=checkbox]:hover, input[type=submit]:hover, input[type=radio]:hover, label:hover{cursor: pointer;}
label > input[type=checkbox]{vertical-align: sub; margin-right: 0.5rem;}
label > input[type=radio]{margin-right: 0.5rem;}

body *::-webkit-scrollbar {width: 5px;}
body *::-webkit-scrollbar-track {background: transparent;}
body *::-webkit-scrollbar-thumb {background: #ddd; border-radius: 5px;}

/* 팝업레이어 */
#hd_pop br{display: none;}
#hd_pop {z-index:1001;position:relative;margin:0 auto;height:0; line-height: 0;}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid rgba(0,0,0,0.2);}

/* 대출 팝업 */
.hd_pops_con{height: auto !important;}
.pop_wrap {background: #fff; padding: 2em 1.5em !important; padding-bottom: 2em; font-size: 14px;}
.pop_title { padding-bottom: 1em; margin-bottom: 1em; border-bottom: solid 1px #333; }
.pop_title h4 {display: flex; align-items: flex-end; justify-content: space-between; line-height:1;font-size:1.8em; font-weight:800; letter-spacing: -0.05em;}
.pop_title h4 span {font-size: 0.5em;font-weight:400;color:#888;letter-spacing: -0.03em;}
.pop_wrap .point{color: var(--color-basic);; font-weight: 500;}
.pop_wrap .blue{color: blue;}
.pop_wrap .gry {color: #878787;}

.pop_wrap .num_list{font-size:1.05em;}
.pop_wrap .num_list li{position: relative; padding-left: 1.6rem; line-height: 1.2rem;}
.pop_wrap .num_list li::before{position: absolute; left: 0; width: 1.2rem; height: 1.2rem; line-height: 0.9rem; font-size: 11px; border-radius: 50%; border: 2px solid var(--color-basic); color: var(--color-basic); font-weight: 900; text-align: center; letter-spacing: -0.05em; content:""; display: block; clear: both; box-sizing: border-box;}
.pop_wrap .num_list li:nth-child(1)::before{content:"1";} 
.pop_wrap .num_list li:nth-child(2)::before{content:"2";} 
.pop_wrap .num_list li:nth-child(3)::before{content:"3";} 
.pop_wrap .num_list li:nth-child(4)::before{content:"4";} 
.pop_wrap .num_list li:nth-child(5)::before{content:"5";} 
.pop_wrap .num_list li:nth-child(6)::before{content:"6";} 
.pop_wrap .num_list li:nth-child(7)::before{content:"7";} 
.pop_wrap .num_list li:nth-child(8)::before{content:"8";} 
.pop_wrap .num_list li:nth-child(9)::before{content:"9";} 
.pop_wrap .num_list li:nth-child(10)::before{content:"10";} 
.pop_wrap .num_list li:nth-child(11)::before{content:"11";} 
.pop_wrap .num_list li:nth-child(12)::before{content:"12";} 
.pop_wrap .num_list li:nth-child(13)::before{content:"13";} 
.pop_wrap .num_list li:nth-child(14)::before{content:"14";}
.pop_wrap .num_list li + li{margin-top: 1em;}

.pop_wrap > p {line-height: 1.5;}
.pop_wrap > p.lg{font-size: 1.1em;}
.pop_wrap > p + p{margin-top: 20px;}
.pop_wrap strong.tit {display: block; font-size: 1.1em; font-weight: 600;}
.pop_wrap a{display:none;}

.hd_pops_footer {display: flex; position:relative; text-align: center;}
.hd_pops_footer button {flex: 1; padding: 10px 5px; font-size: 0.8em; font-weight: 500; background-color: #161616; color: #fff; transition-duration: 100ms; word-break: keep-all; line-height: 1.2;}
.hd_pops_footer button:hover{cursor: pointer; background-color: #222; color: #999;}
.hd_pops_footer button + button{border-left: 1px solid #444;}

@media screen and (max-width:1024px){

	/* 팝업 */
	#hd_pop{width:100%;top:-20px;}
	#hd_pop .hd_pops{width:50%;}
	#hd_pop .hd_pops:nth-child(1){margin:0;}
	#hd_pop .hd_pops:nth-child(2){margin:60px 0 0 0;}
	#hd_pop .hd_pops:nth-child(3){margin:40px 0 0 0;}
	#hd_pop .hd_pops:nth-child(4){margin:60px 0 0 0;}
	#hd_pop .hd_pops:nth-child(5){margin:80px 0 0 0;}
	.hd_pops_con{width: 100% !important;}
	.pop_wrap{font-size: 12px;}
	.pop_title h4 {font-size: 1.4em;text-align:center;}
	.pop_title h4 > span{display: none;}
	
	.pop_wrap .num_list{font-size:1em;}
	.pop_wrap .num_list li{padding-left:1rem;line-height: 1.2rem;flex:1;display:-webkit-box;text-overflow:ellipsis;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:1;word-break:break-all;}
	.pop_wrap .num_list li::before{top:2px;width:0.8rem;height:0.8rem;line-height:0.7rem;font-size:10px;border-width:1px;}
	.pop_wrap .num_list li + li{margin-top:0.5em;}	
	.pop_wrap .num_list li:nth-child(n+4){display:none}

	.pop_wrap a{display:inline-block;width:100%;line-height:1;text-align:center;color:#fff;padding:0.8em 0;margin-top:1em;background:var(--color-basic);}
	.pop_wrap i{font-style:normal;margin-left:5px}	
	
	.hd_pops_footer{flex-direction:column; }
	.hd_pops_footer button{width:100%;}
	.hd_pops_footer button + button{border-top:1px solid #444;}

}











/* 공통 */
.ul_group,
.box_group{display: flex; align-items: center;}
.ul_group.line{gap: 2em;}
.ul_group.line > li{position: relative;}
.ul_group.line > li + li::before{position: absolute; top: 50%; left: -1em; transform: translateY(-50%); width: 1px; height: 80%; background-color: #ddd; content:""; display: block; clear: both;}
.btn_box{display: flex; gap: 10px; justify-content: center; align-items: center;}
.white_box{background-color: #fff; border-radius: 20px; padding: 50px; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.04);}

.full{width: 100%}
.half{width: 50%}

.ctt_admin{position: relative;}
.ctt_admin > a{position: absolute; top: 40px; right: 15px; z-index: 1;}

.demo_info{font-size: 13px; color: #777;}
.demo_info.top{margin-top: 10px;}
.demo_info.bottom{margin-bottom: 10px;}

/* 표 형식 공통 */
.com_list > li{display: flex; align-items: center;}
.com_list > li + li{margin-top: 0.5rem;}
.com_list .c_tit{font-weight: 600; letter-spacing: -0.02em;}
.com_list .c_con{}

.require_dot{display: inline-block; width: 0.25em; height: 0.25em; border-radius: 50%; background-color: var(--color-basic); vertical-align: top; margin-left: 0.25rem;}

/* 애니메이션 적용 */
.blur{animation: blur 2.0s infinite;}

/* 타이틀 */
.tit_box{display: flex; align-items: center; justify-content: space-between; gap: 20px;}
.tit_box > div > .tit{display: inline-block;}

h2.tit{font-size: 1.5rem; font-weight: 600; letter-spacing: -0.04em;}
h2.tit > b{color: var(--color-basic);}
.tit + .small_tit{margin-left: 0.5rem;}

.sub_tit{font-size: 1.2rem; font-weight: 600; letter-spacing: -0.04em;}
.small_tit{font-size: 0.9rem; color: #999; letter-spacing: -0.02em;}

/* 버튼 */
.btn{display: block; border: 1px solid #eee; border-radius: 0.4rem; padding: 0.5rem; font-weight: 500; color: #666; font-size: 0.9rem; background: #fff; text-align: center; white-space: nowrap;}
.btn_b01{background-color: var(--color-basic); border-color: var(--color-basic); color: #fff;}
.btn_b03{background-color: #1a1a1a; border-color: #1a1a1a; color: #fff;}
.btn_b04{background-color: #fff; border-color: var(--color-basic); color: var(--color-basic);}
.btn:hover{color: var(--color-basic); border-color: var(--opacity-90); background-color: #fff; cursor: pointer;}
.btn.btn_b04:hover{background-color: #fbfbfb;}
.admin_btn{color: red; font-weight: 600;}
.mobile_btn{display: none;}

.btn_b01 .svg path{stroke: #fff; stroke-width: 2.5;}
.btn:hover .svg path{stroke: var(--color-basic);}

.btn_big{padding: 1rem; font-size: 1rem; min-width: 200px;}

.svg{width: 1rem; height: 1rem; vertical-align: bottom;}
.svg path{stroke: var(--color-basic); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;}

.plus_btn{display: block; width: fit-content;}
.plus_btn svg{display: block; width: 1.5rem; height: 1.5rem; }
.plus_btn svg path{fill: #333;}
.plus_btn:hover svg path{fill: var(--color-basic); transition-duration: 100ms;}

.label{display: inline-block; font-size: 0.9em; padding: 0.4em; border: 1px solid var(--opacity-90); border-radius: 0.4em; color: var(--color-basic); font-weight: 600; vertical-align: middle;}
.label.revers{background-color: var(--color-basic); color: #fff;}


/* 아이콘 */
.icon{width: 1.3em; vertical-align: text-bottom; margin-right: 0.5em;}
.icon_new{display: inline-block; font-size: 0.6rem; font-weight: 900; color: var(--color-basic); vertical-align: top; margin-left: 0.5em; animation: new 2000ms step-end infinite;}
.icon_comment{display: inline-block; font-size: 0.6rem; vertical-align: top; margin-left: 0.5em; border-radius: 50%; background-color: #1a1a1a; color: #fff; font-weight: 800; width: 0.85rem; height: 0.85rem; line-height: 0.85rem; text-align:center;}

/* 유틸바 : 중개번호, 즐겨찾기, 회원가입 */
#utilbar{border-bottom: 1px solid #eee; background-color: var(--gray); padding: 0.75em 0;}
#utilbar > div{display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; font-weight: 500;}

/* gnb */
.logo{width: 160px;}
.logo a{display: block;}
.logo a img{display: block; width: 100%;}

#gnb > section{border-bottom: 1px solid #eee; padding: 1em 0;}
#gnb > section > .wrap, .gnb_02 .wrap{display: flex; justify-content: space-between; align-items: center;}

.gnb_left{display: flex; gap: 2em; align-items: center;}
.search_box{display: flex; gap: 0.5em; width: 500px;}
.search_box .s_1{width: 60%;}
.search_box .s_2{width: 40%;}
.search_box .input_box{position: relative;}

.search_box .input_box.s_2::before{content: ''; position: absolute; left: 0; bottom: -13px; width: 100%; height: 15px; background: transparent}

.search_box .input_box .data_input{display: block; width: 100%; padding-right: 2.5em; padding-left: 1em; border-width: 2px; border-color: var(--color-basic); border-radius: 1.5em; height: 2.5em; line-height: 1.25; color: #666; font-size: 0.9em; background-color: #fff;}
.search_box .input_box .this_btn,
.search_box .input_box .compant_ser_list{position: absolute}
.search_box .input_box .compant_ser_list::before{content: ''; position: absolute; left: 0; top: -10px; width: 100%; height: 10px; background: red}
.search_box .input_box .this_btn{top: 50%; right: 1em; transform: translateY(-50%); color: var(--color-basic);}
.search_box .input_box .compant_ser_list{display: none; top: 42px; z-index: 1001; width: 100%; max-height: 300px; overflow: auto; padding: 14px; border: 1px solid var(--color-basic); border-radius: 10px; font-size: 14px; background: #fff;}
.search_box .input_box .compant_ser_list > li{cursor: pointer}
.search_box .input_box .compant_ser_list > li + li{margin-top: 10px; padding-top: 10px; border-top: 1px solid #ededed}
.search_box .input_box .compant_ser_list > li:hover{font-weight: 600; color: var(--color-basic)}

.gnb_02{position: relative; width: 100%; background-color: #fff; box-shadow: 0 0.25em 0.5em rgba(0,0,0,0.02); z-index: 1;}
.menu_wrap{border-bottom: 2px solid #eee;}
.menu_wrap > .wrap{padding: 1rem 0;}

.menu.left{gap: 2rem;}
.menu.right{gap: 1.5rem;}
.menu > li{position: relative; min-width: 80px; text-align: center;}
.menu > li::after{position: absolute; left: 50%; bottom: calc(-1rem - 3px); width: 0; height: 2px; background-color: var(--color-basic); content:""; display: block; clear: both; transform: translateX(-50%); transition-duration: 200ms;}

.menu > li.on a:not(.gra_ani){font-weight: 500; color: var(--color-basic);}
.menu > li.on::after{width: 100%;}

.sub_menu{display: none; position: absolute; top: 3rem; left: 0; right: 0;}
.sub_menu b{display: block; margin-bottom: 1rem;}
.sub_menu a{display: block; font-size: 0.9rem; padding: 0.25rem 0; word-break: keep-all; line-height: 1.2;}
.sub_menu a:hover{font-weight: 600;}
.sub_menu > ul{display: grid; grid-template-columns: repeat(2, 1fr);}
.sub_menu > ul a{display: block; font-size: 0.85rem; padding: 0.5rem 0;}
.sub_menu_bg{position: absolute; width: 100%; height: 0; background-color: var(--gray); z-index: -1; border-bottom: 1px solid #eee;box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05); transition-duration: 300ms;}

/* 마우스 올렸을때 */
.show .sub_menu{display: block; animation: dot 400ms linear;}
.show .sub_menu_bg{height: 220px;}

.menu > li:hover::after{width: 100%;}
.menu > li:hover > a:not(.gra_ani){font-weight: 500; color: var(--color-basic);}


/* 스크롤 내렸을때 */
.sticky{position: sticky; top: 0; z-index: 1000;}
.sticky.scroll .menu_wrap{border-bottom: 2px solid var(--color-basic) !important;}

.gra_ani{background: linear-gradient(to right, var(--gradient-3), var(--color-basic)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% auto; animation: moveGradient 3s linear infinite; font-weight: 700; padding: 0 0.15rem;}
.gra_ani i{margin-right: 0.25rem;}

/* 사이드 메뉴 */
.side_ad_wrap{position: relative;}
.side_ad{position: absolute; transform: translateY(20px); transition-duration: 200ms;}

.side_ad > ul > li{width: 160px; border-radius: 12px;}
.side_ad li + li{margin-top: 10px;}
.side_ad li.no_data{font-size: 13px; color: #666; text-align: center; padding: 10px 0;}
.side_ad a{display: block; text-align: center;}
.side_ad a > b{position: relative; display: block; padding: 12px; border-radius: 12px 12px 0 0; background-image:  linear-gradient(45deg, var(--color-basic) 40%, var(--gradient-1) 60%, var(--gradient-2) 65%, var(--gradient-1) 75%, var(--color-basic) 80%); animation: textclip 4s linear infinite; background-size: 300%; color: #fff; font-weight: 600; font-size: 0.9rem; text-align: center;}
.side_ad a > b::after{position: absolute; top: 50%; right: 10px; transform: translateY(-50%); display: block; clear: both; content:"\f105"; font-family: "Font Awesome 6 Free"; font-size: 0.8rem;}

.side_ad .ad_text{padding: 1rem 0.5rem; background-color: #fff; border-radius: 0 0 12px 12px; border: 1px solid #eee;}
.side_ad .ad_text > span{font-size: 0.9rem; margin-bottom: 0.5rem; font-weight: 500; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.side_ad .ad_text > p{font-weight: 600; color: var(--color-basic); line-height: 1.2; letter-spacing: -0.04em; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.side_ad .ad_text .btn{font-size: 0.8em; padding: 0.6em; margin-top: 0.5rem;}
.side_ad .ad_text .btn > i{margin-right: 5px;}

.side_ad.left{left: calc(-160px - 2rem);}
.side_ad.right{right: calc(-160px - 2rem);}

.side_history{background-color: #fff; overflow: hidden;}
.side_ad .history{padding: 0.75rem; 0.5rem;}
.side_ad .history a{display: -webkit-inline-box; max-width: calc(100% - 2rem); overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-size: 0.85rem; text-align: left; word-break: break-all;}
.side_ad .history li:hover a{text-decoration: underline;}
.side_ad .history .icon_new{font-size: 0.5rem; font-weight: 800;}
.side_ad .history .del_btn{display: block; width: 100%; margin-top: 10px; padding-top: 10px; border-top: 1px solid #ededed; text-align: center; font-size: 12px; color: #777; cursor: pointer}

.side_notice{border: 1px solid #eee; overflow: hidden;}
.side_notice .img{aspect-ratio: 4/3;}
.side_notice .img img{display: block; width: 100%; height: 100%; object-fit: cover;}
.side_notice p{padding: 1em 0.5rem; background-color: #fff; border-top: 1px solid #eee; font-size: 12px; line-height: 1.4; font-weight: 500;}
.side_notice p + p{background-color: var(--gray);}
.side_button{border: 1px solid #eee; padding: 1rem; background-color: #fff;}
.side_button a,
.side_button button{display: flex; justify-content: space-between; align-items: center; width: 100%;}
.side_button button{cursor: pointer;}
.side_button span{display: block; text-align: right; line-height: 1.2; font-size: 0.9rem; font-weight: 500;}
.side_button .svg{width: 1.75rem; height: 1.75rem;}


/* 고정 버튼 */
#fix_btn{position: fixed; bottom : 20px; right: 20px; z-index: 1;}
#fix_btn button{display: flex; width: 56px; height: 56px; border-radius: 24px; align-items: center; justify-content: center; background-color: #fff; box-shadow: rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.05) 0px 3px 6px, rgba(0, 0, 0, 0.1) 0 0 0; border: 1px solid #eee;}
#fix_btn button:hover{transform: scale(92%); transition-duration: 400ms; cursor: pointer; opacity: 0.9;}
#fix_btn button + button{margin-top: 5px;}

.chanel_btn{background-color: var(--color-basic); background-image: linear-gradient(40deg, var(--color-basic) 0%, var(--gradient-3) 150%);}
.chanel_btn img{display: block; width: 70%;}
.up_btn .svg{width: 1.5rem; height: 1.5rem;}

/* 하단 푸터 */
#tail{margin: 3rem auto;}
#tail .tit_box p{text-align: justify; line-height: 1.4;}
#tail .tit_box b{font-weight: 800; color: var(--color-basic);}
.family_swiper{margin-top: 1.5rem;}
.family_swiper a{display: block;}
.family_swiper a > img{display: block; width: 100%;}

.footer_menu_box{background-color: #1a1a1a; color: #fff;}
.footer_menu{display: flex; justify-content: space-between; align-items: center;}
.footer_menu > ul{gap: 0.5rem;}
.footer_menu a{display: block; padding: 1rem; font-size: 0.95rem;}
.footer_menu > a{border: 1px solid #999; border-style: none solid;}

#footer{padding-top: 2rem; padding-bottom: 2rem;}
#footer > section p{margin-top: 1rem; line-height: 1.5; font-size: 0.9rem; color: #999; text-align: justify;}
#footer > section p > span{display: block; margin-top: 1rem;}
#footer > section p b{font-weight: 600; color: var(--color-basic);}

.footer_top{display: flex; gap: 2rem;}
.footer_tit{font-size: 1.2rem; font-weight: 700; letter-spacing: -0.03em;}

.footer_top .footer_1{width: 25%}
.footer_top .footer_1 > div{display: flex; justify-content: space-between; font-size: 0.95rem; margin-top: 1rem;}
.footer_top .footer_1 > div > b{font-weight: 600; color: var(--color-basic);}
.footer_top .footer_1 > div > span{line-height: 1.5; text-align: right; font-weight: 500;}
.footer_top .footer_1 > a{display: block; font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; margin: 1rem 0; color: var(--color-basic);}
.footer_top .footer_2, .footer_top .footer_3{width: 37.5%}

.footer_bottom{margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #eee;}


/* 모바일 헤더 */
#mo_header{display: none;}
#mo_gnb{display: flex; justify-content: space-between; padding: 1rem; border-bottom: 1px solid #eee; background-color: #fff;}
#mo_gnb > button{font-size: 1.5rem;}
.sticky .mo_menu_wrap{display: none; background-color: #fff; overflow-x: scroll; -ms-overflow-style: none; scrollbar-width: none; border-bottom: 1px solid #eee; box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.25);}
.sticky .mo_menu_wrap::-webkit-scrollbar {display: none;}

/* 모바일 전체 메뉴 */
.mo_all_menu_wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  background-color: #fff;
  z-index: 10000;
  transform: translateX(-100%);
  transition: transform 0.4s;
}

.mo_all_menu_wrap.on {
  transform: translateX(0);
}


.mo_all_menu .top{position: sticky; top: 0; z-index: 1;}
.mo_all_menu .top > ul{display: flex; background-color: var(--color-basic); color: #fff; font-weight: 500; font-size: 0.9rem; border-top: 1px solid rgba(256,256,256,0.2); border-bottom: 1px solid #eee;}
.mo_all_menu .top > ul > li{flex: 1; text-align: center;}
.mo_all_menu .top > ul > li + li{border-left: 1px solid rgba(256,256,256,0.2);}
.mo_all_menu .top > ul > li > a{display: block; padding: 1em 0.5em; }
.user_info{display: flex; background-color: var(--color-basic); color: #fff; padding: 1.5rem 1rem; justify-content: space-between; align-items: center; gap: 1rem;}
.user_info > div{font-size: 1.2rem; font-weight: 600; line-height: 1.2;}
.user_info .pabicon{display: flex; align-items: center; justify-content: center;width: 20%; max-width: 40px; aspect-ratio: 1/1; background-color: #fff; border-radius: 50%;}
.user_info .pabicon img{display: block; width: 50%;}
.user_info .text{flex: 1; line-height: 1.3; font-size: 0.9rem;}
.user_info .text strong{display: block; font-size: 1.2em; font-weight: 600;}

.menu_close{font-size: 1.5rem; color: #fff;}

#gnb_1dul{}
#gnb_1dul > li{position: relative; border-bottom: 1px solid #eee;}
#gnb_1dul > li > a{display: block; padding: 1em;}
.gnb_btn{position: absolute; top: 0; right: 0; padding: 1em; color: var(--color-basic);}
.gnb_btn.on {transform: rotate(180deg); transition-duration: 400ms;}
.gnb_2dul{display: none; background-color: #fbfbfb; border-top: 1px solid #eee; font-size: 0.9rem; padding: 0 10px;}
.gnb_2dul > li + li{border-top: 1px solid #eee;}
.gnb_2dul > li > a{display: block; padding: 1rem 2px;}

.mo_menu{display: flex; gap: 0.5rem;}
.mo_menu a{display: block; padding: 1rem; white-space: nowrap; font-weight: 500;}

.mo_all_menu .btm{margin-top: 10px; font-weight: 500;}
.mo_all_menu .btm ul{color: #999; font-size: 0.85em;}
.mo_all_menu .btm ul a{display: block; padding: 10px;}


/* 모바일 검색창 */
.mo_search {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  background-color: #fff;
  z-index: 10000;
  transform: translateX(100%);
  transition: transform 0.4s;
}

.mo_search.on {
  transform: translateX(0);
}
.mo_search > button{position: absolute; top: 50px; left: 1rem; font-size: 1.5rem; color: #ddd;}
.mo_search > div{display: flex; height: 100%; flex-direction: column; justify-content: center; padding: 50px 16px; gap: 20px;}
.mo_search .tit{font-size: 1.8rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.04em;}
.mo_search .search_box {display: block; width: 100%;}
.mo_search .search_box > div.s_1{width: 100%;}
.mo_search .search_box > div.s_1 input{background-color: #fff; font-size: 1rem;}
.mo_search > div > p{color: #666; margin-bottom: 3vh; font-size: 0.9em;}



/* 모바일 푸터 */
#mo_footer, .mo_footer_menu_box, .mo_footer_top{display: none;}
.mo_footer_menu_box {border: 1px solid #eee; border-style: solid none;}
.mo_footer_menu{display: flex;}
.mo_footer_menu li{flex: 1; text-align: center;}
.mo_footer_menu li + li{border-left: 1px solid #eee;}
.mo_footer_menu li a{display: block; padding: 1rem; font-size: 0.9rem;}

/* 캡챠 자동등록(입력)방지 기본 -pc */
#captcha legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden; margin: 0 !important;}
#captcha{display: flex; flex-wrap: wrap; align-items: center; width: 100%; gap: 5px;}
#captcha_info{flex-basis: 100%; font-size: 0.9em; color: #666; word-break: break-all;}

#captcha img {height: 3em; border: 1px solid #eee; background-color: #fff;}
#captcha #captcha_mp3, #captcha #captcha_reload {margin:0; padding:0; width: 1.5em; height:1.5em; border:0; background:transparent; vertical-align:middle; overflow:hidden; cursor:pointer; text-indent:-999px;}
.captcha_input > img, .captcha_input > button{display: inline-block; margin-right: 0.25em;}
#captcha #captcha_mp3 {background:url('../img/member_audio.svg') no-repeat center / contain;}
#captcha #captcha_reload {background:url('../img/member_change.svg') no-repeat center / contain;}
#captcha input[type="text"]{width: 50%; max-width: 200px;}

#captcha_audio{width: 100%;}

.no_data > img{display: block; width: 60%; margin: 10px 0; max-width: 140px;}


/* ========================================== 공통 스타일 ========================================== */
/* 큐브형태 리스트 */
.ul_cube{display: flex; flex-wrap: wrap; margin-top: 20px; gap: 10px;}
.ul_cube li{position: relative; width: calc(25% - 7.5px); border: 1px solid #eee; background-color: #fff; transition-duration: 150ms;}
.ul_cube li:not(.no_data):hover{position: relative; transform: scale(1.05); z-index: 1; border-color: transparent;}
.ul_cube li:not(.no_data):hover::after{position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border: 2px solid var(--color-basic); content: ""; display: block; clear: both; z-index: -1;}
.ul_cube li.no_data{display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; background: #eee; color: #999; padding: 0.75rem;}
.ul_cube li.no_data .no_data_title{font-weight: 500; line-height: 1.3;}
.ul_cube li.no_data .ad_link{display: block; border: 1px solid var(--color-basic); border-radius: 0.4rem; padding: 0.6em; font-weight: 500; font-size: 13px; text-align: center; white-space: nowrap; width: 100%; margin-top: 0.5rem; background-color: var(--color-basic); color: #fff; transition-duration: 100ms;}
.ul_cube li.no_data .ad_link:hover{color: var(--color-basic); background-color: #fff;}
.ul_cube a{display: block; text-align: center;}
.ul_cube .img{aspect-ratio: 4/3; overflow: hidden;}
.ul_cube .img img{display: block; width: 100%; height: 100%; object-fit: cover;}
.swiper .ul_cube li:not(.no_data):hover{transform: initial; border-color: var(--color-basic);}
.swiper .ul_cube li:not(.no_data):hover::after{display: none;}
.swiper .ul_cube li:not(.no_data):hover .title{background-color: var(--color-basic); color: #fff;}
.swiper .ul_cube li:not(.no_data):hover .title > *{color: inherit;}





.ul_cube .title{padding: 1.75rem 0.75rem 0.75rem 0.75rem; border-bottom: 1px solid #eee; font-weight: 600; background-color: var(--gray); letter-spacing: -0.02em;}
.ul_cube .title b{color: var(--color-basic); line-height: 1.5;}
.ul_cube a > div > p{font-size: 0.9rem;}
.ul_cube a > div > p i{color: var(--color-basic);}
.ul_cube .text{padding: 0.75rem; line-height: 1.25em;}
.ul_cube .text > b{display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.25; height: 3.75em;}
.ul_cube .text > span{display: block; margin-top: 1rem; line-height: 1em;}
.ul_cube .name{display: flex; align-items: center; justify-content: space-between;padding: 0.75rem; border-top: 1px solid #eee; font-weight: 600;}
.ul_cube .name > span{color: #666;}
.ul_cube .img > img{display: block; width: 100%;}
.pro_list_icon{display:none;}

/* 큐브형태 리스트2 : 타이틀에 배경 들어감 */
.ul_cube.design_02 .title{position: relative; padding: 1.5rem 0.5rem; background-position: center; background-repeat: no-repeat; background-size: cover; color: #fff; z-index: 1;}
.ul_cube.design_02 .title::after{position: absolute; left: 0; right: 0; bottom: 0; top: 0; background-color: rgba(0,0,0,0.4); content: ""; display: block; clear: both; z-index: -1;}
.ul_cube.design_02 .title b{color: #fff;font-size:15px;letter-spacing:-0.02em;}

/* 배경 랜덤 */
#main_store .ul_cube.design_02 > li:nth-child(10n + 1) .title{background-image: url(../img/random_bg_1.jpg);}
#main_store .ul_cube.design_02 > li:nth-child(10n + 2) .title{background-image: url(../img/random_bg_2.jpg);} 
#main_store .ul_cube.design_02 > li:nth-child(10n + 3) .title{background-image: url(../img/random_bg_3.jpg);} 
#main_store .ul_cube.design_02 > li:nth-child(10n + 4) .title{background-image: url(../img/random_bg_4.jpg);} 
#main_store .ul_cube.design_02 > li:nth-child(10n + 5) .title{background-image: url(../img/random_bg_5.jpg);} 
#main_store .ul_cube.design_02 > li:nth-child(10n + 6) .title{background-image: url(../img/random_bg_6.jpg);} 
#main_store .ul_cube.design_02 > li:nth-child(10n + 7) .title{background-image: url(../img/random_bg_7.jpg);} 
#main_store .ul_cube.design_02 > li:nth-child(10n + 8) .title{background-image: url(../img/random_bg_8.jpg);} 
#main_store .ul_cube.design_02 > li:nth-child(10n + 9) .title{background-image: url(../img/random_bg_9.jpg);} 
#main_store .ul_cube.design_02 > li:nth-child(10n) .title{background-image: url(../img/random_bg_10.jpg);}
.pro_list_icon.mo{display:none}

/* 프리미엄 대출업체 */
.list_pre{width: 60%;}
.list_pre .ul_cube li{min-height: 230px}
.list_pre .ul_cube li:not(.no_data)::before{position: absolute; top: 0; left: 0; height: 1.9rem; aspect-ratio: 80/37; background-image: url("../img/label/premium_label_01.png"); background-position: center; background-size: contain; background-repeat: no-repeat; content:""; display: block; clear: both; animation: heartbeat 0.5s infinite alternate;}


/* ===== 03 스페셜 대출업체 ===== */
#special_store .ul_cube li.no_data{display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; background: #eee; color: #999; min-height: 266px;}


/* ===== 04 메인 대출업체 ===== */
#main_store .ul_cube li{width: calc(20% - 8px); min-height: 230px}
#main_store .ul_cube li.no_data{display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; background: #eee; color: #999}


/* ===== 05 긴배너 ===== */
#long_ad > div{width: 100%; height: 200px; background-position: center; background-repeat: no-repeat; background-size: cover; overflow: hidden;}
#long_ad img{display: block; max-width: 100%; margin: 0 auto; object-fit: cover;}


#long_ad .design_02{background-image: url("../img/long_ad_2_bg.jpg"); display: flex; justify-content: center; align-items: center; flex-direction: column;}
#long_ad .design_02 > div{display: flex; width: 100%; max-width: 1280px; font-weight: 500; gap: 10%; align-items: center;}
#long_ad .design_02 > div > *{flex: 1;}
#long_ad .design_02 b{display: inline-block; color: var(--color-basic); font-weight: 700;}
.long_left p{font-size: 1.2rem; text-align: center; margin-bottom: 1rem; letter-spacing: -0.02em; word-break: keep-all; line-height: 1.2;}
.long_left p > b{font-size: 1.2em;}
.long_right ul{margin-top: 0.5rem; font-size: 0.9em;}
.long_right ul li{display: inline-block; width: calc(20% - 2px); text-align: right; font-weight: 600;}
.long_right ul li b{margin-left: 0.25rem;}




/* ===== 06 실시간 현황 ===== */
.ul_time{border-top: 2px solid #ddd; margin-top: 1rem;}
.ul_time li,
.ul_news li{display: flex; align-items: center; justify-content: space-between; padding: 0.75em 0.25em; font-weight: 500;}
.ul_news li.no_data{opacity: 30%}
.ul_time li{border-bottom: 1px solid #eee;}
.ul_time li.no_data.list{padding: 20px 0; font-size: 0.9rem; color: #999;}
.ul_time li.no_data.block{justify-content: center; height: 300px; font-size: 14px; background: #fafafa; color: #999;}
.ul_time li > a {flex: 1; display: -webkit-inline-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; max-width: 80%;}
.ul_time li > span{width: 100px; text-align: right;}
.ul_time .label{margin-right: 0.5rem; margin-bottom: 2px; font-size: 0.7em;}
.ul_time .label + .label{margin-left: -0.5rem;}
.ul_time .list_info{display: flex; width: 20%; justify-content: space-between;}
.ul_time .list_info p{width: 110px; text-align: center;}
.ul_time .list_info .m_view{display: none;}
/* .ul_time .list_info p + p{text-align: right;} */



/* ===== 07 소식 / 공지사항 / 질문과 답변 / 고객센터 ===== */
#news_list{display: flex; gap: 0.5rem;}
#news_list > div{width: 33.333%; padding: 1.5rem;}
.ul_news{margin-top: 1rem;}
.ul_news li > a {flex: 1;}
.ul_news li > a > span{display: -webkit-inline-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; max-width: 80%;}

.news_left{background-color: var(--gray); border-radius: 1.5rem;}
.news_left .btn{font-size: 0.95rem; margin-top: 10px;}
.news_left .btn .svg{width: 1.25rem; height: 1.25rem; vertical-align: sub;}

.news_center{}
.news_center > div + div{padding-top: 1.75rem; margin-top: 1.25rem; border-top: 1px solid #eee}

.ul_icon{text-align: center; margin-top: 2rem;}
.ul_icon li{flex: 1; padding: 0 5px;}
.ul_icon li + li{border-left: 1px solid #eee;}
.ul_icon a {display: block;}
.ul_icon li:hover a{transform: scale(105%); transition-duration: 600ms;}
.ul_icon a > img{display: block; width: 80%; max-width: 48px; margin: 0 auto;}
.ul_icon a > span{display: block; margin-top: 1rem; font-weight: 600;}


/* 모달창 */
.color_1{color: var(--color-basic);}
.gray{color: #999;}
.round_num{display: block; width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid #000; line-height: 1.6; text-align: center; font-size: 0.6rem; font-weight: 800;}

.modal_wrap{display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 9999;}
.modal{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 2rem; width: calc(100% - 32px); max-width: 800px;}
.modal_notice{max-height: 60vh; overflow-y: scroll;}
.modal h2{margin-bottom: 20px;}
.modal_notice > p{position: relative; line-height: 1.3rem; font-weight: 500; padding-left: 1.5rem; text-align: justify; margin-bottom: 10px;}
.modal .round_num{position: absolute; left: 0; top: 0.1rem;}
.modal .gray{font-size: 0.85rem; font-weight: 400;}
.modal .close_btn:not(.fx){position: absolute; top: 20px; right: 20px;}
.modal .close_btn i{font-size: 1.8rem;}
.modal .close_btn:hover{cursor: pointer; color: var(--color-basic); transform: rotate(-90deg);}


/* 팝업 */
.popup_layer_has_inner{position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 9999;}
.popup_layer_has_inner .inner_wrapper{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 2rem; width: calc(100% - 32px); max-width: 800px;}
.popup_layer_has_inner .tit{margin-bottom: 20px;}
.popup_layer_has_inner .modal_notice{border-top: 2px solid #1a1a1a; border-bottom: 1px solid #eee;}
.popup_layer_has_inner dl.row{display: flex; padding: 0.5rem 0; gap: 0.5rem; align-items: center;}
.popup_layer_has_inner dl.row dt{width: 20%; font-weight: 600;}
.popup_layer_has_inner dl.row dd{flex: 1;}
.popup_layer_has_inner dl.row .flex{display: flex; gap: 0.5rem; align-items: center;}
.popup_layer_has_inner dl.row .flex > *{width: 100%;}
.popup_layer_has_inner dl.row .flex button{width: 100px;}
.popup_layer_has_inner .btn_box{margin-top: 2rem;}
.popup_layer_has_inner dl.row small{display: block; margin-top: 0.5rem; font-size: 0.85rem;}
.popup_layer_has_inner dl.row small > b{font-weight: 600; color: red;}
.popup_layer_has_inner .close_btn{position: absolute; top: 20px; right: 20px;}
.popup_layer_has_inner .close_btn i{font-size: 1.8rem;}
.popup_layer_has_inner .close_btn:hover{cursor: pointer; color: var(--color-basic); transform: rotate(-90deg);}
#demo_login_popup .inner_wrapper{max-width: 600px;}
#demo_login_popup .tit{text-align: center; font-size: 1.2rem; font-weight: 600; line-height: 1.4; margin: 1rem 0; word-break: keep-all;}
#demo_login_popup .btn_box{margin: 1rem 0;}


.new_win{}
.new_win .table_wrap{}
#win_title{font-size: 1.5rem; font-weight: 600; letter-spacing: -0.04em; padding: 25px 16px 0 16px;}
.new_win .table_wrap caption{text-align: left;  margin: 10px 16px 25px 16px;}
.new_win .table_wrap table{width: 100%; border-top: 2px solid var(--color-basic); font-size: 14px;}
.new_win .table_wrap table tr{border-bottom: 1px solid #eee;}
.new_win .table_wrap table tbody tr:nth-child(odd){background-color: #fbfbfb;}
.new_win .table_wrap table th{padding: 10px 0; text-align: center; vertical-align: middle;}
.new_win .table_wrap .empty_table{padding: 80px 0; color: #999;}
.new_win .table_wrap table th{font-weight: 600;}
.new_win .table_wrap table td > div{text-align: left;}

.new_win .table_wrap table .t_check{width: 30px;}
.new_win .table_wrap table td.t_title{display: flex; align-items: center;}
.new_win .table_wrap table td, .new_win .table_wrap table th {padding: 10px 0; text-align: center; vertical-align: middle;}
.new_win .win_btn{margin: 30px auto 60px auto;}
.new_win .copymove_current{display: inline-block; border: 1px solid #eee; border-radius: 0.4rem; padding: 6px 8px; font-weight: 500; color: #fff; font-size: 11px; background: var(--color-basic); text-align: center; white-space: nowrap;}


.new_win_wrap{background-color: var(--gray); padding: 50px 0;}
.new_win_box .tit{text-align: center; line-height: 1.2;}
.new_win_box .tit + p{text-align: center; line-height: 1.3; margin: 2rem auto;}
.new_win_box .com_list{max-width: 720px; border-bottom: 1px solid #eee; border-top: 2px solid #1a1a1a; padding: 0.5rem; margin: 2rem auto;}
.new_win_box .com_list .c_tit{width: 20%;}
.new_win_box .com_list .c_con{width: 80%;}
.new_win_box .com_list .c_con > div > p{display: none;}
.new_win_box .com_list .c_con input{width: 100%;}


/* 디자인 선택 가능 버튼 : 프로그램 작업 후 삭제 */
.loan_top .wrap, #main_store{position: relative;}
.design_btn{position: absolute; top: -1rem; right: 0; z-index: 1;}
.design_btn button{padding: 0.5rem; font-size: 0.8rem; border: 2px solid #000; background-color: #fbfbfb; border-radius: 50%; color: #000; font-weight: 600;}
.design_btn button:hover{cursor: pointer;}
.design_btn button:nth-of-type(1){background-color: #000; color: #fff;}

#main_store .design_btn{top: -2.5rem !important; right: 0 !important;}
#main .design_btn{top: 11rem; right: 1rem; z-index: 100;}




/* *************************************** 사이드바 *************************************** */
.lnb{width: 20%;}
.lnb h2.tit{margin-bottom: 1rem;}
.lnb .white_box{padding: 0; overflow: hidden; border: 1px solid var(--gray);}
.lnb .white_box + .white_box{margin-top: 1rem;}
.lnb .white_box a{display: block; padding: 1rem 1.5rem;}
.lnb .white_box > ul > li > a{font-weight: 500;}
.lnb ul > li > a{position: relative;}

.lnb_menu a > i{position: absolute; top: 50%; right: 1rem;transform: translateY(-50%); color: var(--color-basic); display: none;}
.lnb_menu li.on > a > i{display: block;}
.lnb_menu li.on > a{color: var(--color-basic); font-weight: 600 !important; background-color: #fbfbfb;}
.lnb_menu > li + li{border-top: 1px solid #eee;}

.lnb_sub{font-size: 0.9rem; border-top: 1px solid #eee;}
.lnb_sub > li + li{border-top: 1px dashed #eee;}
.lnb_sub > li > a::before{position: absolute; top: 50%; left: 1.5rem; transform: translateY(-50%); content:"·"; display: block; clear: both; color: var(--color-basic); font-weight: 950; z-index: 1;}
.lnb .lnb_sub a{position: relative; padding-left: 2.5rem;}

.lnb .lnb_quick a{display: flex; align-items: center; justify-content: space-between;}
.lnb_quick .img {position: relative; width: 2.5rem; aspect-ratio: 1/1;}
.lnb_quick .img img{position: absolute; top:0; left: 0; width: 100%; display: block;}

.lnb_menu > li:hover > a, .lnb_sub > li:hover > a, .lnb_quick li:hover a{color: var(--color-basic); font-weight: 600; transition-duration: 100ms;}
.lnb_quick li + li{border-top: 1px solid #eee;}
.lnb_quick a:hover .icon_up{opacity: 0; transition-duration: 100ms;}

.bo_wrap{width: 80%;}



/* 진행 상태 */
.progress{max-width: 720px; margin: 0 auto;}
.progress ul{display: flex; align-items: center; gap: 5px;}
.progress li{flex: 1; display: flex; align-items: center; gap: 1rem; color: #aaa; justify-content: center;}
.progress li.dot{flex: 0; justify-content: center; gap: 5px;}
.progress li.dot > span{display: block; width: 5px; height: 5px; border-radius: 50%; background-color: var(--color-basic); animation: dot 1s alternate linear infinite;}
.progress li.dot > span:nth-of-type(1){animation-delay: -0.3s}
.progress li.dot > span:nth-of-type(2){}
.progress li.dot > span:nth-of-type(3){animation-delay: 0.3s}

.progress li .svg{width: 2.5rem; height: 2.5rem; color: #ccc;}
.progress li .svg path{stroke: #ccc;}
.progress li.on{color: var(--color-basic);}
.progress li.on .svg, .progress li.on .svg path{color: var(--color-basic); stroke: var(--color-basic);}
.progress li .text{margin: 0 !important; font-size: 15px;}
.progress li .text b{font-size: 1.2em; display: block; font-weight: 800;}
.progress li .text span{display: inline-block; margin-top: 0.25rem; font-weight: 500;}




/* ==================== 대출이자 계산기 ==================== */
#loan_calculator .popup_title_box{display: flex; justify-content: space-between; align-items: center; padding:0 0 16px 0;border-bottom:1px solid #555}
#loan_calculator .popup_title_box .title{font-size: 25px;font-weight:600;letter-spacing:-0.08em;}
#loan_calculator .popup_title_box .close_btn{font-size: 18px;}

#loan_calculator .inner_wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(0, 0) !important;

	inset: 0;
	margin: auto;

	display: inline-block;    
	border: 1px solid #c8c8c8;
	overflow: hidden;
	border-radius: 16px;
	overflow: hidden;
	background-color: #fff;
	padding: 2rem;
	box-sizing: border-box;

	height:530px;         /* ✅ 자동 높이 설정 */
	min-height: unset;    /* ✅ 최소 높이 제한 해제 */
	max-height: 100vh;    /* ✅ 너무 커지지 않도록 화면 기준 제한 */
}
#loan_calculator .inner_wrapper.m2{height:710px}
#loan_calculator .inner_wrapper.m1{height:280px}
#loan_calculator .wri_inner_wrapper{padding:20px 0 0 0}
#loan_calculator .wri_input_box{}
#loan_calculator .wri_input_box > *{display: flex;justify-content:space-between;align-items: center}
#loan_calculator .wri_input_box > * + *{margin-top: 16px}
#loan_calculator .wri_input_box .tit{width: 75px !important;flex: 0 0 75px;}
#loan_calculator .wri_input_box .data_box{flex: 1;min-width: 0;}
#loan_calculator .wri_input_box .input_box{display: flex; align-items: center; position: relative; border-bottom: 1px solid #ededed;  text-align: right}
#loan_calculator .wri_input_box .input_box input[type="text"]{flex: 1; width: 100%;min-width: 0;border: none;}
#loan_calculator .wri_input_box .ex_btn_box{display: flex; gap: 0 5px; margin-top: 10px; text-align: center}
#loan_calculator .wri_input_box .ex_btn_box .this_btn{flex: 1; padding: 12px 0; border-radius: 5px; font-size: 13px; color: #777; background: #f1f1f1;}
#loan_calculator .wri_input_box .ex_btn_box .this_btn:hover{background: var(--color-basic); color: #fff}

#loan_calculator .wri_input_box .term_type_box{display: flex; gap: 0 10px}
#loan_calculator .wri_input_box .term_type_box .input_box{flex: 1}
#loan_calculator .wri_input_box .term_radio{width: 80px;}

#loan_calculator .wri_input_box .term_radio,
#loan_calculator .wri_input_box .repayment_box{display: flex; overflow: hidden; border: 1px solid #ededed; border-radius: 5px; text-align: center; font-size: 14px}

#loan_calculator .wri_input_box .term_radio > *,
#loan_calculator .wri_input_box .repayment_box > *{flex: 1}

#loan_calculator .wri_input_box .term_radio > * + *,
#loan_calculator .wri_input_box .repayment_box > * + *{border-left: 1px solid #ededed;}

#loan_calculator .wri_input_box .term_radio input[name="term_type_radio"]:checked ~ .this_btn,
#loan_calculator .wri_input_box .repayment_box input[name="repayment_radio"]:checked ~ .this_btn{font-weight: 600; background: var(--color-basic); color: #fff}

#loan_calculator .wri_input_box .term_radio .this_btn,
#loan_calculator .wri_input_box .repayment_box .this_btn{display: block; width: 100%; line-height: 39px; color: #999}

#loan_calculator .clear_btn_box{display: flex; gap: 0 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #ededed; text-align: center}
#loan_calculator .clear_btn_box .this_btn{flex: 1; padding: 16px 0; border-radius: 5px;}
#loan_calculator .clear_btn_box .reset{border: 1px solid #ededed}
#loan_calculator .clear_btn_box .clear{background: var(--color-basic); color: #fff}

#loan_calculator .clear_inner_wrapper{padding: 16px; border-top: 1px solid #ededed; background: #f1f1f1}
#loan_calculator .clear_inner_wrapper > *{padding: 16px; background: #fff}

#loan_calculator .clear_inner_wrapper .clear_info{line-height: 20px;}
#loan_calculator .clear_inner_wrapper .clear_info > * + *{}
#loan_calculator .clear_inner_wrapper .clear_info .highlight{margin-top: 16px; font-size: 18px;}
#loan_calculator .clear_inner_wrapper .detail_info{margin-top: 16px; padding-top: 16px; border-top: 1px solid #ededed}
#loan_calculator .clear_inner_wrapper .com_detail{}

#loan_calculator .clear_inner_wrapper .detail_1 > *,
#loan_calculator .clear_inner_wrapper .detail_2{display: flex; justify-content: space-between; align-items: center}

#loan_calculator .clear_inner_wrapper .detail_1 > * + *{margin-top: 10px}
#loan_calculator .clear_inner_wrapper .detail_1 .tit{}
#loan_calculator .clear_inner_wrapper .detail_1 .data{}

#loan_calculator .clear_inner_wrapper .detail_2{margin-top: 40px; padding-top: 14px; border-top: 1px solid #ededed;}
.ctct{display:none;}



@media screen and (max-width: 1650px){
	.side_ad_wrap {display: none;}
}

@media screen and (max-width: 1300px){
	/* === header 변경 === */
	#header, .sticky .gnb_02{display: none;}
	#mo_header{display: block;}
	.sticky .mo_menu_wrap{display: block;     box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.02);}
	#utilbar > div{display: block; text-align: center;}

	/* === footer 변경 === */
	.footer_top .footer_1{display: none;}
	.footer_top .footer_2, .footer_top .footer_3{width: 50%;}

	.list_pre{width: 100%;}
	.list_pre .ul_cube{margin-top: 1rem;}
	.list_pre .ul_cube li, #main_store .ul_cube li{min-height: 188px;}
	#special_store .ul_cube li.no_data{min-height: 130px;}
	.ul_cube li:not(.no_data):hover{transform: initial;}
		

	.lnb{width: 100%;}
	.lnb .mo_none{display: none;}
	.lnb .white_box{border: none; border-radius: 0;r}
	.lnb_menu{display: flex; font-size: 0.9em; background-color: #fbfbfb; border-bottom: 1px solid #eee; overflow-x: scroll; -ms-overflow-style: none; scrollbar-width: none;}
	.lnb_menu::-webkit-scrollbar {display: none;}

	.lnb_menu a > i, .lnb_menu li.on > a > i{display: none;}
	.lnb_menu li.on > a{background-color: transparent;}
	.lnb .white_box a{padding: 1rem; white-space: nowrap;}
	.lnb_menu > li + li{border-top: none;}

	.bo_wrap{width: 100%; padding-top: 25px; padding-left: 16px; padding-right: 16px;}
}

@media screen and (max-width: 1280px){
	/* .wrap{padding-left: 16px; padding-right: 16px;} */
	#tail .tit_box, .footer_top, .footer_bottom{padding-left: 20px; padding-right: 20px;}
	#long_ad > div{height: auto; max-height: 200px; aspect-ratio: 9/2;}
	#long_ad .design_01 img{width: 100%; height: 100%; object-fit: cover;}
	#long_ad .design_02{max-height: initial; aspect-ratio: initial; padding: 15px;}
	.long_left p{font-size: 1rem; margin-bottom: 10px;}
	.long_left p > b{font-size: 1em;}

	#news_list > div, #top_list, #main_store, #special_store, #time_list{padding-left: 16px; padding-right: 16px;}

	.modal{padding: 20px 1rem;}
	.modal .close_btn{top: 18px; right: 1rem;}
	.modal_notice{font-size: 0.9em;}

	.mobile_btn{display: block;}
	.new_win_wrap{padding-left: 16px; padding-right: 16px;}
}


@media screen and (max-width: 1080px){
	.logo{width: 30%; max-width: 120px;}
	#tail{background-color: #fbfbfb; margin: 0 auto; padding: 40px 0;}
	#footer{padding-top: 0;}
	.mo_footer_top {display: flex; background-color: #222; justify-content: center;}
	.mo_footer_top a{display: block; padding: 1rem; color: #fff; font-size: 0.9rem;}
	.footer_top{margin-top: 2rem;}
	.footer_menu_box{display: none;}
	.mo_footer_menu_box{display: block;}
	#footer > section p{font-size: 0.9rem;}
	#footer > section p br{display: none;}



	#special_store{margin-top: 0; padding-top: 50px; padding-bottom: 50px;}
	#special_store .ul_cube li, #main_store .ul_cube li{width: calc(33.333% - 6.7px);}
	#special_store .ul_cube .title, #main_store .ul_cube .title{padding: 1rem 10px 10px 10px;}

	#news_list > div{width: 100%;}
	#news_list{flex-wrap: wrap; gap: 0;}
	#news_list > div{ border-radius: 0; padding-top: 50px; padding-bottom: 50px;}
	#news_list .news_right{background-color: var(--gray);}


	.ul_time li{display: block;}
	.ul_time li > a{max-width: initial;}
	.ul_time li > a > .label{display: none;}
	.ul_time .list_info .m_view{display: block;}
	.ul_time .list_info{width: 100%; justify-content: flex-start; align-items: center; font-size: 0.9em; color: #999; margin-top: 5px; gap: 1rem; max-width: initial;}
	.ul_time .list_info p{position: relative; width: auto;}
	.ul_time .list_info p + p::before{position: absolute; top: 50%; left: -0.5rem; transform: translateY(-50%); width: 1px; height: 0.8em; background-color: #ddd; content: ""; display: block; clear: both;}
	.ul_time .list_info .color{color: var(--color-basic);}

	.side_con .ul_cube li{width: calc(33.333% - 6.7px);}
	.progress li{gap: 5px;}
	

	.loan_banner li .text > span,.ul_cube .text > span,.ul_cube .name > span,.ul_cube .name i{display:none !important;}
	.ul_cube .name{flex-direction:column;text-align:center;}

	.pro_list_icon.mo{display:flex;align-items:center;justify-content:space-between;gap:0 2px;font-weight:600;padding:2px;}
	.pro_list_icon.mo a{flex:1 1 0;display:inline-block;line-height:26px;font-size:0.85rem;text-align:center;color:#333;border:2px solid var(--color-basic);}
	.pro_list_icon.mo a:last-child{color:#fff;background:var(--color-basic);}
	.pro_list_icon.mo a:first-child i{font-size:0.74rem}


}

@media screen and (max-width: 768px){

	#loan_calculator .inner_wrapper,#loan_calculator .inner_wrapper.m2{height:480px;overflow:hidden;overflow-y:auto;}
	#loan_calculator .popup_title_box .title{font-size:20px;}
	#loan_calculator .wri_inner_wrapper > *,#loan_calculator .wri_inner_wrapper label{font-size:13px;}
	#loan_calculator .wri_inner_wrapper button{font-size:15px;}

	.btn{font-size: 12px;}
	.btn_big{font-size: 14px; min-width: 160px;}

	.ul_cube{gap: 5px; margin-top: 10px;}

	#tail .tit_box {font-size: 0.9rem; line-height: 1.2;}
	#tail .tit_box b{display: block; font-size: 1rem;}

	.footer_top{flex-direction: column;}
	.footer_top .footer_2, .footer_top .footer_3{width: 100%;}
	#footer > section p {font-size:0.8rem;}
	#fix_btn button{width: 42px; height: 42px; border-radius: 18px;}
	#fix_btn button + button{margin-top: 5px;}


	.progress li .text{font-size: 12px;}
	.progress li:not(.dot){flex-direction: column; gap: 8px; text-align: center;}
	.progress li.dot{gap: 3px;}
	.progress li.dot > span{width: 3px; height: 3px;}
	
}

@media screen and (max-width: 540px){
	/* 푸터 */
	#tail .tit_box{font-size: 0.8rem;}
	#tail{padding: 20px 0;}
	#tail .tit_box{gap: 10px; flex-direction: column;}
	#tail .tit_box .btn{width: 100%;}
	.family_swiper{margin-top: 20px;}
	.mo_footer_top a{padding: 1rem 5px; font-size: 0.8rem;}


	/* 공통 */
	.btn_box{gap: 5px;}
	.btn_box > li{flex: 1;}
	.btn{font-size: 11px;}
	.btn_big{width: 100%; flex: 1; font-size: 13px; min-width: initial;}
	h2.tit{font-size: 1.4rem;}
	
	.ul_cube .title{display:flex;flex-direction:column;justify-content:center;align-items:center;line-height:1.3;height:90px;}
	.ul_cube .title *{letter-spacing:-0.02em !important;font-size:13px !important;text-shadow:0 1px 1px #111;}
	.ul_cube .title b{font-size:14px !important;line-height:1}
	.ul_cube .title br{display:none;}
	.ul_cube .text{min-height:70px;}
	.ul_cube .text > span, .ul_time li, .ul_news li, #tail .tit_box b{font-size: 0.9rem;}
	.ul_cube a > div > p, .mo_footer_menu li a{font-size: 12px;}

	#special_store .ul_cube li,  #main_store .ul_cube li{width: calc(50% - 5px);}
	.ul_news  .m_none{display: none;}
	.ul_news li > a > span{max-width: calc(100% - 1rem);}

	.side_con .ul_cube li{width: calc(50% - 5px);}
	.progress li .svg{width: 30px; height: 30px;}
	.progress li .text{font-size: 11px;}

	.modal h2{margin-bottom: 10px; font-size: 1.2rem;}
	.modal .close_btn i{font-size: 1.4rem;}

	.popup_layer_has_inner dl.row{align-items: normal; flex-direction: column;}
	.popup_layer_has_inner dl.row dt{width: initial;}
}

@media screen and (max-width: 475px){
	.long_left p{font-size: 12px;}
	.long_right ul{font-size: 10px;}
	
	#loan_calculator .inner_wrapper{padding:1.2rem !important}
}


@media screen and (max-width: 360px){
	#loan_calculator .wri_input_box .tit{width:60px !important;flex: 0 0 60px;}
}