@charset "utf-8";

/* ========== 메인 상단디자인 ========== */
#main > section + section{margin-top: 50px;}
#top_design > div + div{margin-top: 25px;}


/* ===== 00 메인상단 ===== */
#top_design.design_01{}

/* 01 메인슬라이드 */
.main_slide_wrap{position: relative; margin-bottom: 50px;}
.main_slide li{padding: 4.5em 0; background-repeat: no-repeat; background-position: center; background-size: cover; height: 340px;}
.slide_text > p{letter-spacing: -0.04em; color: #fff; text-shadow: 0px 0px 6px #1275b7d6;}
.slide_text > p > b{display: inline-block; font-weight: 900; background-clip: text; -webkit-background-clip: text; background-image:  linear-gradient(45deg, #ffc82b 40%, #ffda70 60%, #fbf6bc 65%, #ffda70 75%, #ffc82b 80%); color: transparent; animation: textclip 2.5s linear infinite; background-size: 300%; font-size: 1.2em; text-shadow: none;}
#top_list .swiper-wrapper{height: 100% !important;}

.slide_text > .slide_tit_01{font-size: 1.6rem;}
.slide_text > .slide_tit_02{font-size: 2.4rem; font-weight: 500; margin: 0.5rem 0;}
.slide_text > .slide_tit_03{font-size: 3rem; font-weight: 600;}

/* 숫자 카운트 */
.count_box{position: absolute; width: calc(100% - 40px); max-width: 560px; bottom: -0.5em; left: calc(50% - 620px); display: flex; z-index: 1; background-color: #fff; border-radius: 4em; padding: 10px; box-shadow: 0 0.25em 0.5em rgba(0,0,0,0.02);border: 1px solid #eee; margin: 0 auto;}
.count_box > ul{flex: 1; gap: 20px; margin: 0 30px; justify-content: space-between;}
.count_box li{text-align: right;}
.count_box li > span{display: inline-block; letter-spacing: -0.02em; font-size: 0.9rem; margin-bottom: 5px;}
.count_box .count_num{font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; color: var(--color-basic) }
.count_box a{display: flex; aspect-ratio: 1/1; align-items: center; padding: 20px; color: #fff; text-align: center; line-height: 1.2; border-radius: 50%; font-weight: 500; background-image: linear-gradient(40deg, var(--color-basic) 0%, var(--gradient-3) 200%);justify-content: center;}
/* 배너 + 지역검색 */
.top_ad_local{display: flex; gap: 10px;}

/* 배너 */
.top_ad_local > .top_ad_wrap{width: 60%;}
.top_ad_wrap .top_ad{height: 100%;}
.top_ad a{display: block; height: 100%;}
.top_ad a > img{display: block; width: 100%; height: 100%; object-fit: cover;}


/* 지역검색 */
.top_ad_local > .top_local{width: 40%;}
.top_local li {flex: 1;text-align: center; padding: 1rem; background-color: var(--gray); font-weight: 500; color: #666; border: 1px solid #eee;}
.top_local li:hover{cursor: pointer;}
.top_local li + li{border-left: none;}
.top_local li.on{background-color: #fff; color: var(--color-basic); border-bottom-color: transparent; font-weight: 600;}

.top_data{display: flex; align-items: center; height: calc(100% - 3em); padding: 1em; border: 1px solid #eee; border-top: none;}
.top_data .data_inner{width: 100%; display: none; line-height: 2em;}
.top_data .data_inner.on{display: block;}

.top_data .data_inner > a{display: inline-block; width: calc(20% - 5px); text-align: center;}
.top_data .data_inner > a:hover{font-weight: 600; color: var(--color-basic);}
.top_data .data_inner > a:nth-child(5n + 1)::before{display: none;}
.top_data .data_inner > a + a::before{float: left; content:"·"; display: block; clear: both; color: var(--color-basic); font-weight: 700; opacity: 0.5;}


/* ===== 01 메인상단 ===== */
#main #top_design{margin-top: 0;}
#top_design.design_02{}

/* 프리미엄 + 광고 + 실시간 */
#top_list{display: flex; gap: 10px; margin-top: 25px;}

/* 광고 */
.list_ad_wrap{width: 140px; margin-top: 2.5rem; overflow: hidden; z-index: 1;}
.list_ad_wrap li img, #wide_ad li img{display: block; width: 100%;}
#wide_ad{--swiper-navigation-color: #fff; --swiper-pagination-color: #fff}

/* 실시간 대출문의*/
.list_inq_wrap{width: calc(40% - 160px); z-index: 1;}
.list_inq{margin-top: 1rem; border: 1px solid #eee; background-color: #fff;}

.inq_1{padding: 1rem; background-color: var(--gray); border-bottom: 1px solid #eee;}
.inq_1 .sub_tit{display: block; text-align: center; line-height: 2rem;}
.inq_1 > form{position: relative; margin-top: 0.5rem;}
.inq_1 > form > input{width: 100%; background-color: #fff; padding-left: 1rem; padding-right: 2.5rem; border-radius: 1.5em; border: 2px solid var(--color-basic); font-size: 0.9rem;}
.inq_1 > form > button{position: absolute; right: 1em; top: 50%; transform: translateY(-50%); color: var(--color-basic); cursor: pointer;}

.inq_2{background-color: #fafafa; overflow: hidden;}
.inq_2 li{height: fit-content;}
.inq_2 li + li{border-top: 1px solid #eee;}
.inq_2 li.no_data{line-height: 60px; text-align: center; font-size: 13px; background: #fafafa; color: #999}
.inq_2 a{display: flex; justify-content: space-between; align-items: center;font-weight: 500; padding: 10px; background-color: #fff;}
.inq_2 a > span{display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background-color: #f1f1f1; border-radius: 50%; color: #999; font-size: 0.7rem;}
.inq_2 a > div{flex: 1; text-align: right;}
.inq_2 a > div > div{display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.inq_2 a > div > p{font-size: 0.8rem; color: #999; margin-top: 0.5rem; font-weight: 400;}
.inq_2 a > div > p > span + span::before{content:"｜"; display: inline-block; clear: both; margin: 0 2px; font-size: 0.8em; vertical-align: top; color: #ccc;}

/* ===== 03 스페셜 대출업체 ===== */
#special_store{background-color: var(--gray); padding: 2rem 0 3rem 0;}



/* ===== 06 실시간 현황 ===== */
#time_list{display: flex; gap: 2em;}
#time_list > div{flex: 1;}

.side_ad.design_01{transform: translateY(calc(340px + 3rem));}
.side_ad.design_02, .sticky.scroll .side_ad.design_01{transform: translateY(20px);}

.ul_time .list_info{width: initial; max-width:8em;}
.ul_time .list_info p{text-align: right;}
.live_cs_swiper.swiper{touch-action: pan-y !important; overscroll-behavior: contain;}


@media screen and (max-width: 1300px){
	.main_slide li{height: auto; padding-bottom: 12rem;}
	.slide_text{padding: 0 5%;}
	.count_box{left: 2.5%; margin-bottom: 3rem;}

	#top_list{flex-wrap: wrap; gap: 25px 10px;}
	.list_inq_wrap{width: calc(100% - 150px); order: 2;}
	.list_ad_wrap{order: 3;}
	.inq_2 {height: 385px}
}

@media screen and (max-width: 1280px){
	.top_ad_local, #special_store{padding-left: 16px; padding-right: 16px;}
}

@media screen and (max-width: 1080px){
	.main_slide li{background-size: auto 80%; background-position-x: 70%; background-position-y: top; }
	.main_slide_wrap{/* padding-bottom: 16px; */ margin-bottom: 0; background-color: var(--gray);}
	.slide_text > .slide_tit_01{font-size: 1.3rem;}
	.slide_text > .slide_tit_02{font-size: 2rem;}
	.slide_text > .slide_tit_03{font-size: 2.5rem;}
	.main_slide_wrap .swiper-pagination{top: 20px;}

	/* 숫자 카운트 */
	.count_box{left: 50%; transform: translateX(-50%); justify-content: center; gap: 10px; max-width: initial; margin-bottom: 0; padding: 0; border-radius: 0; background-color: transparent; border: none;}
	.count_box > ul{gap: 10px; background-color: #fff; padding: 25px 10px; border-radius: 20px; margin: 0;justify-content: space-around; box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.04);}
	.count_box li{text-align: center;}
	.count_box a{width: 25%; max-width: 200px; border-radius: 20px; aspect-ratio: initial;}


	/* 메인 지역 상품 검색 */
	.top_local{padding: 16px; background-color: var(--gray);}
	.top_local > div{margin: 0 auto; background-color: #fff; padding: 16px; border-radius: 20px; box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.04);}
	.top_local ul{justify-content: center; gap: 5px;}
	.top_local li{width: auto; padding: 10px 16px; font-size: 0.9rem; border: none; color: #999; border-radius: 10px;}
	.top_local li.on{background-color: var(--color-basic); color: #fff;}
	.top_data{border: none; height: auto; padding: 0; margin-top: 10px;}
	.top_data p > a{padding: 5px 0;}

	/* 스페셜 대출업체 */
	#top_list .ul_cube li{width: calc(33.333% - 6.7px);}
	#time_list{flex-wrap: wrap; gap: 50px; flex-direction: column;}

	.top_ad_local{flex-direction: column-reverse; gap: 0; padding: 0;}
	#top_design .top_ad_local > div, #time_list > div{width: 100%;}
}

@media screen and (max-width: 768px){
	.tit + .small_tit{display: block; margin-left: 0; margin-top: 10px;}
}

@media screen and (max-width: 540px){
	.top_local li{font-size: 12px;}

	/* 메인 실시간 대출문의 */
	.list_inq_wrap{width: 100%;}
	.list_ad_wrap{display: none;}
	.inq_2{height: 220px;}

	#top_list .ul_cube li{width: calc(50% - 5px);}
}

@media screen and (max-width: 475px){
	.main_slide li{background-size: auto 90%;}
	.slide_text > p > b{background-clip: initial; -webkit-background-clip: initial; padding: 2px 5px; color: #fff; font-size: 1em;}

	.top_data p > a{width: calc(25% - 3px); font-size: 0.9rem;}
	.top_data p > a:nth-child(5n + 1)::before{display: block;}
	.top_data p > a:nth-child(4n + 1)::before{display: none;}

	/* 숫자 카운트 */
	.count_box > ul{padding:15px 10px;}
	.count_box a{width:20%;}
	.count_box li > span{word-break: keep-all;}
	.count_box li > span{font-size: 0.8rem;}
	.count_box .count_num{font-size: 1.3rem;}
	.count_box a{font-size: 0.8rem; padding: 10px;}

}