@charset "utf-8";

:root{
	--main-color: #00ff4e;
	--deep-color: #1fcd54;
	--dark-color: #069131;
	--black-color: #111;

	--gray-bg: #f3f5f7;
	--pale-bg: #ecffdb;
	--light-bg: #d9ffb7;

	--box-shadow: 0 0 8px rgba(63, 63, 63, 0.06);
	--outer-glow: 0 0 8px rgba(0, 255, 78, 0.6);
	--border-opacity: 1px solid rgba(11, 60, 138, 0.06);
	--border-color: #e5e7eb;

	--gradient: linear-gradient(135deg, #7dffa4 0%, #00ff4e 45%, #00d944 75%, #009e30 100%);
	--deep-gradient: linear-gradient(270deg, #069131, #1fcd54);

	--padding: calc((100vw - 1400px)/2);
}

/* keyframes */
@keyframes glowPulse {
    0%, 100% {
		box-shadow: 0 0 6px rgba(166, 255, 191, 0.4);
    }
	50% {
		box-shadow: 0 0 8px rgba(166, 255, 191, 0.6), 0 0 16px rgba(0, 255, 78, 0.4);
	}
}

@keyframes shine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/*
:root{
	--main-color: #6366f1;
	--sub-color-1: #4f46e5;
	--sub-color-2: #4338ca;

	--title-color: #121212;
	--sub-text-color: #555555;
	--border-color: #e5e7eb;

	--mint-color-1: #23cdb4;
	--mint-color-2: #22a9a2;

	--orange-color: #ff8d28;

	--shadow-color: rgba(67, 56, 202, 0.4);

	--dark-bg: #18181a;
	--gray-bg: #f3f5f7;

	--box-shadow: 0 0 12px rgba(63, 63, 63, 0.08);
	--box-shadowY: 0 8px 8px rgba(63, 63, 63, 0.08);
	--small-shadow: 0 0 10px rgba(63, 63, 63, 0.04);
	--color-shadow: 0 0 10px rgba(67, 56, 202, 0.1);
	--border-opacity: 1px solid rgba(11, 60, 138, 0.06);

	--swiper-theme-color: #121212;
	--swiper-pagination-bullet-horizontal-gap: 8px;
	--swiper-pagination-bullet-size: 10px;

	--gradient: linear-gradient( 45deg, rgba(99, 102, 241, 1) 0%, rgba(139, 92, 246, 1) 50%, rgba(101, 135, 243, 1) 75%, rgba(74, 165, 241, 1) 100% );

}
*/

.blind, .sound_only{position: absolute; width: 1px; height: 1px; overflow: hidden;}
.container{width: calc(100% - 100px); max-width: 1400px; margin-left: auto; margin-right: auto;}
.container2{width: calc(100% - 116px); max-width: 1416px; margin-left: auto; margin-right: auto;}
.container2 .title_box{padding: 0 8px;}

/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff;}
.hd_pops img{max-width:100%}



/* ========== 애니메이션 ========== */
.wow + .wow{animation-delay: 200ms;}
.wow + .wow + .wow{animation-delay: 300ms;}
.wow + .wow + .wow + .wow{animation-delay: 400ms;}


/* ========== 헤더 ========== */
/* === 최상단 : 중개번호 + 상단 메뉴 === */
#header_top{padding: 10px 0; background-color: #242424; color: #fff;}
#header_top .container{display: flex; align-items: center; justify-content: space-between;}
.top_menu{display: flex; gap: 1em; text-align: center; font-size: 0.9rem; font-weight: 500;}
.company_license{font-size: 1.4rem; font-weight: 500;}

/* === 헤더 === */
#header{position: sticky; top: 0; background-color: #fff; border-bottom: 1px solid var(--border-color); padding: 10px 0; box-shadow: 0 0 12px rgba(63, 63, 63, 0.06); border-bottom: var(--border-opacity); z-index: 100;}
#header .container{display: flex; align-items: center; justify-content: space-between;}
#header nav > ul{display: flex;}

/* 로고 */
.logo{width: 230px;}
.logo img{display: block; max-width: 100%; height: 30px;}


/* 주 메뉴 */
.gnb{gap: 2em; font-weight: 500; font-size: 1.1rem;}


/* 회원 메뉴 */
#member_nav{width: 230px;}
.header_btns{gap: 10px; text-align: center; font-size: 0.9rem; font-weight: 600;}
.header_btns > li{flex: 1; border: 1px solid var(--black-color); background-color: #fff; color: var(--black-color); border-radius: 6px;}



.header_btns > li + li{background-color: var(--black-color); color: var(--main-color);}
.header_btns a{display: block; padding: 10px; line-height: 20px;}



/* ========== 푸터 ========== */
#footer{background-color: #444; color: #ddd; font-size: 0.9rem;}
#footer .container > div + div{border-top: 1px solid rgba(255,255,255,0.2);}

.f_top{display: flex; gap: 60px; padding: 60px 0;}
.f_top > div{flex: 1;}
.f_tit{font-size: 1.4em; line-height: 1; color: #fff; font-weight: 600; margin-bottom: 20px;}

.f_top .f_contact{flex: initial; width: 25%; line-height: 1.6;}
.f_contact > p + p{margin-top: 20px;}
.f_tel{font-size: 2.4em; font-weight: 600; color: #fff;}
.f_time{font-size: 1rem;}

.f_text{line-height: 1.8; text-align: justify;}
.f_text .txt + .txt{margin-top: 1em;}

.f_info{padding: 30px 0;}
.f_logo{width: 25%; max-width: 140px; margin-bottom: 20px;}
.f_logo img{display: block; width: 100%;}
.copy_text{display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0;}
.copy_text > span + span{padding-left: 10px; border-left: 1px solid rgba(255,255,255,0.2);}

.f_copy{display: flex; justify-content: space-between; padding: 20px 0;}
.f_menu{display: flex; gap: 20px;}








/* ========== 공통 ========== */
.color{color: var(--main-color);}
.bold{font-weight: 600;}


/* 타이틀 */
.title_box{display: flex; align-items: center; margin-bottom: 20px;}
.title_box .title{flex: 1; font-family: 'NanumHuman', sans-serif;}
.title{font-size: 1.6rem; font-weight: 700; color: #111;}
.title .color{color: var(--dark-color);}

/* 버튼 */
.btn{display: block; padding: 0.6em 0.8em; font-size: 0.9rem; border: 1px solid var(--border-color); border-radius: 6px; font-weight: 500; text-align: center;}
.btn_b01{background-color: var(--black-color); border-color: var(--black-color); color: var(--main-color);}

.btn_more{display: flex; gap: 0.5em; align-items: center; font-size: 0.9rem; font-weight: 500; color: #666;}
.btn_more::after{content:""; display: block; width: 0.8em; height: 0.8em; background: url('../img/icon/btn_more_arrow.svg') no-repeat center / contain; }

/* 키워드 */
.keyword_wrap{display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: 30px;}
.keyword{display: block; padding: 0.6em 1em; background-color: var(--light-bg); color: var(--dark-color); font-weight: 500; border-radius: 2em; font-size: 0.9rem;}



/* ========== 광고 공통 ========== */
/* ====== 대출 광고 ====== */
.ad_item{position: relative; border: 1px solid var(--border-color); text-align: center; line-height: 1.4; border-radius: 20px;box-shadow: var(--box-shadow); margin: 8px; overflow: hidden;}

.ad_item .thumb{position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; z-index: 1; color: #fff; background-size: cover; aspect-ratio: 3/2; background-color: var(--deep-color); gap: 10px; overflow: hidden;}

.ad_item .tit, .ad_item .sub_tit{display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all;}
.ad_item .tit{font-size: 1.4rem; font-weight: 600;}
.ad_item .sub_tit{font-size: 1.1rem; font-weight: 500;}

.ad_item .text{padding: 5px 0; background-color: #fff; height: stretch;}
.ad_item .tel{display: block; padding: 10px; font-size: 1.2em; font-weight: 500; transition-duration: 100ms;}
.ad_item .tel:hover{color: var(--deep-color);}
.ad_item .name{display: flex; gap: 10px; padding: 10px; justify-content: center; align-items: center; color: #333;}
.ad_item .area{padding: 0.4em 0.7em; font-size: 0.8em; line-height: 1.2; background-color: var(--black-color); color: var(--main-color); font-weight: 600; border-radius: 1em;}
.ad_item .tel + .name{padding-top: 0;}


/* 대출광고 라벨 */
.ad_item .label{position:absolute; top: 15px; right: -35px; width: 130px; text-align:center; padding:6px 0; background: var(--gradient); color: var(--black-color); font-size: 0.9rem; font-weight: 700; transform: rotate(45deg); box-shadow: 0 3px 10px rgba(0,0,0,0.2); z-index:10;}
.ad_item .label::before{content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100% ); animation: shine 3s infinite;}

/* HOT 뱃지별 컬러 */
.ad_item .label.hot{background: linear-gradient( 135deg, #ffb199 0%, #ff7b72 35%, #ff4d6d 70%, #ff1744 100% ); color: #fff;}
.ad_item .label.time{background: linear-gradient( 135deg, #b8f4ff 0%, #5be7ff 35%, #00cfff 70%, #008cff 100% ); color: #001a33;}
.ad_item .label.new{background: linear-gradient( 135deg, #f0b3ff 0%, #d977ff 35%, #b84dff 70%, #8b2cff 100% ); color: #fff;}
.ad_item .label.best{background: linear-gradient( 135deg, #fff0a3 0%, #ffd86b 35%, #ffb938 70%, #ff8a00 100% ); color: #3d2200;}


/* 광고 준비 중 */
.ad_none{position: relative; border: 1px solid var(--border-color); background-color: var(--gray-bg); text-align: center; line-height: 1.4; border-radius: 20px; overflow: hidden; color: #666; font-size: 1.2rem; box-shadow: var(--box-shadow); margin: 8px;}
.ad_none > a{display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 20px; gap: 30px;}
.ad_none img{display: block; max-width: 60%; opacity: 0.4;}
.ad_none .btn{position: absolute; left: 20px; right: 20px; bottom: 20px;}
.ad_none > p{padding-bottom: 10px;}


/* ====== 프리미엄 대출 광고 ====== */
.premium_swiper .swiper-slide {height: stretch;}
.premium_swiper .swiper-slide .ad_item, .premium_swiper .swiper-slide .ad_none{height: -webkit-fill-available;}
.premium_swiper .ad_item{border: 2px solid var(--main-color); animation: glowPulse 2s ease-in-out infinite;}
.premium_swiper .ad_item .thumb::before{position: absolute; left: 0; right: 0; bottom: 0; top: 0; background-color: rgba(0,0,0,0.4); content:""; display: block; z-index: -1;}


/* ====== 메인 등록업체 ====== */
.basic_list{display: grid; grid-template-columns: repeat(4,1fr); gap: 4px;}



/* ====== 대출업체 등록 현황 ====== */
/* 게시글 리스트 */
.ad_list, .board_list {border-top: 1px solid var(--border-color); margin-top: 30px;}
.ad_list .row, .board_list .row{display: flex; align-items: center; gap: 10px; font-weight: 500; padding: 10px 5px; border-bottom: 1px solid var(--border-color); min-height: 2.8em;}
.ad_list .subject, .ad_list .name, .board_list .subject{display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.ad_list a:hover, .board_list a:hover{background-color: var(--gray-bg); color: #666;}
.ad_list a:hover .area{background-color: #adadad; color: #fff;}

/* 줄광고 리스트 */
.ad_list .local{width: 3em;}
.ad_list .local .area{display: block; width: fit-content; margin: auto; padding: 0.4em 0.7em; font-size: 0.8em; line-height: 1.2;     background-color: var(--light-bg); color: var(--dark-color); font-weight: 600; border-radius: 1em;}
.ad_list .subject{flex: 1; text-align: left;}
.ad_list .limit{width: 7em; font-size: 0.9em; text-align: center;}
.ad_list .name{width: 7em; font-size: 0.9em; text-align: right;}


/* 일반 리스트 */
.board_list .subject{flex: 1; text-align: left;}
.board_list .date{width: 7em; font-size: 0.9em; text-align: right;}


/* 페이징 */
.paging{display:flex; justify-content:center; align-items:center; gap: 10px; margin: 40px auto;}
.paging a{display:flex; align-items:center; justify-content:center; min-width: 2em; aspect-ratio: 1/1; border-radius: 6px; color: #999; font-size:0.9rem; font-weight:500; transition-duration: 100ms;}
.paging a:hover{background: var(--gray-bg); color: var(--black-color);}
.paging a.active, .paging a[aria-current="page"]{background: var(--black-color); color: #fff; font-weight:600;}








/* ========== 하단 패밀리 사이트 ========== */
#family_section{padding: 20px 0;}
.family_swiper a{display: block;}
.family_swiper a > img{display: block; width: 100%; height: 100%; object-fit: cover;}