@charset "utf-8";


/* ========== 서브페이지 공통 ========== */
.sub_section{padding: 60px 0;}



/* ========== 기존 디자인 배너 ========== */
.banner_cpn{display: flex; justify-content: center; align-items: center; position: relative; width: 100%; box-sizing: border-box; min-height: 200px; padding: 1.8em var(--padding); overflow: hidden; background: url('../img/banner_bg.png') no-repeat center center, var(--deep-gradient); background-size: cover; animation: bgZoom 6s infinite ease-in-out;}
@keyframes bgZoom {
	0%, 100%	{background-size: 100%;}
	50%			{background-size: 105%;}
}

.banner_cpn .logo{transition: transform .5s ease; margin-right: auto;}
.banner_cpn .logo img{width: auto; height: 60px; filter: brightness(0) invert(1); animation: ripples 4s infinite linear; transform-origin: center center;}

/* 로고 흔들거림 효과 */
@keyframes ripples { 
  0%   {transform: translateY(0) rotate(0deg);}
  25%  {transform: translateY(-4px) rotate(2deg);}
  50%  {transform: translateY(0) rotate(0deg);}
  75%  {transform: translateY(4px) rotate(-2deg);}
  100% {transform: translateY(0) rotate(0deg);}
}

.banner_cpn .txt{position:relative; text-align:center;}
.banner_cpn .txt span{position:relative; display:inline-block; line-height:32px; font-weight:600; color:#fff; padding:0 0.7em; margin:0 2px; border-radius:6px; box-shadow:0 5px 8px rgba(0, 0, 0, 0.15); background:rgba(0, 0, 0, 0.2); overflow:hidden;}
.banner_cpn .txt span:last-child{background: var(--deep-bg);}
.banner_cpn .txt span::after{content: ''; position: absolute; top: 0; left: -60px; width: 60px; height: 100%; background: linear-gradient(90deg, #fff0 0%, #ffffff4d 50%, #fff0 100%); opacity: 1; animation: glass 4s linear infinite;}
@keyframes glass {
	0%, 70%		{left: -80px;}
	100%		{left: 100%;}
}

.banner_cpn .txt a{display: inline-flex; align-items: center; line-height: 40px; color: #fff; font-size: 17px; font-weight: 700; padding: 0 1.2em; margin-top: .6em; border-radius: 100px; gap: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); cursor: pointer; text-decoration: none; transition: background 0.3s, color .3s;}
.banner_cpn .txt a i{margin-left: 5px; display: inline-block; transition: transform 1s cubic-bezier(0.2, 0.9, 0.3, 1); will-change: transform; transform: translateX(0);}
.banner_cpn .txt a:hover i, .banner_cpn .txt a:focus i { transform: translateX(4px);}
.banner_cpn .tit{ position: relative; text-align: right; margin-left: auto;}
.banner_cpn .tit *{line-height: 1; color: #fff;}
.banner_cpn .tit p{position: relative; font-size: 21px; font-weight: 300; padding-bottom: 15px;}
.banner_cpn .tit p::after{content: ''; position: absolute; bottom: 7px; right: -4px; width: 80px; height: 2px; background: rgba(255, 255, 255, 0.3);}
.banner_cpn .tit strong{position: relative; width: auto; font-size: 42px; font-weight: 600; z-index: 11;}
.banner_cpn .tit strong .glass{position: absolute; left: 0; bottom: 0; width: 200px; height: 20px; width: 100%; background: transparent; overflow: hidden; margin-top: -10px; z-index: -1;}
.banner_cpn .tit strong .glass::after{content: ''; position: absolute; top: 0; left: -150px; width: 150px; height: 100%; background: linear-gradient(90deg, #fff1 0%, #fff5 50%, #fff1 100%); opacity: 1; animation: glass2 1.5s linear infinite;}
@keyframes glass2 {
	0%		{left:-150px}
	100%	{left:100%}
}



/* ========== 대출찾기 상단 ========== */
#headline_section{background-color: var(--pale-bg);}
#headline_section .flex{display: flex; gap: 30px;}

/* 서브 프리미엄 대출 광고 */
.headline_ad{flex: 1; min-width: 50%;}


/* 대출찾기 메뉴 */
.headline_menu{flex: 1; background-color: #fff; box-shadow: var(--box-shadow); border: var(--border-opacity); border-radius: 30px; padding: 30px;}
.headline_menu ul{display: grid; text-align: center; gap: 10px; font-size: 0.9rem; font-weight: 500;}
.headline_menu ul.area_menu{grid-template-columns: repeat(4,1fr);}
.headline_menu ul.product_menu{grid-template-columns: repeat(5,1fr);}

.headline_menu a{position: relative; display: flex; padding: 10px; align-items: center; justify-content: space-between; background-color: var(--gray-bg); color: #888; border-radius: 6px;}
.headline_menu a::before{display: block; width: 24px; aspect-ratio: 1/1; border-radius: 50%; content:""; transition-duration: 100ms; background-size: 70%; background-color: #adadad; background-repeat: no-repeat; background-position: center;}
.headline_menu a.on{background-color: var(--deep-color); color: #fff;}
.headline_menu a.on::before{background-color: var(--dark-color);}
.headline_menu a.on::after{content:''; position:absolute; top:-50%; left:-150%; width:80%; height:200%; background:linear-gradient( 90deg, transparent 0%, rgba(255,255,255,0.08) 20%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.08) 80%, transparent 100% ); transform:rotate(25deg); animation:shine 3s infinite;}


/* 대출찾기 메뉴 아이콘 변경 */
.area_menu a::before{background-image: url('../img/icon/tab_area.svg');}
.product_menu a::before{background-image: url('../img/icon/tab_product.svg');}
.custom_menu a::before{background-image: url('../img/icon/tab_product.svg');}



/* ========== 맞춤대출 찾기 상단 ========== */
#custom_section{background-color: var(--pale-bg);}

/* 기존 실시간 대출문의 */
.headline_menu ul.custom_menu{grid-template-columns: repeat(10,1fr);}
.headline_menu .tit{display: block; font-size: 1.2rem; font-weight: 600; color: #111; margin-bottom: 1rem;}


/* 검색 옵션 */
.filter_container{background-color: #fff; box-shadow: var(--box-shadow); border: var(--border-opacity); border-radius: 30px; padding: 30px;}
.filter_section + .filter_section{margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--border-color);}
.filter_title{display: block; font-size: 1.2rem; font-weight: 600; color: #111; margin-bottom: 1rem;}
.filter_count{font-size: 0.9rem; font-weight: 500; color: #888; margin-left: 0.5em;}
.filter_group, .filter_result{display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.9rem; font-weight: 500;}
.filter_btn, .filter_tag{padding: 0.7em 1em; border-radius: 6px; transition-duration: 100ms; white-space: nowrap; user-select: none;}

.filter_label{position: relative; cursor: pointer;}
.filter_label > input{position: absolute; opacity: 0; width: 0; height: 0;}
.filter_btn{display: block; background-color: var(--gray-bg); color: #888; }
.filter_label:hover .filter_btn{background: #adadad; color: #fff;}
.filter_input:focus-visible + .filter_btn{outline: 2px solid var(--main-color); outline-offset: 2px;}
.filter_input:checked + .filter_btn{background: var(--black-color); color: var(--main-color); font-weight: 500;}
.filter_label.disabled .filter_btn{opacity: 0.5; cursor: not-allowed; background: transparent; color: #888;}


/* 선택된 옵션 */
.filter_result_wrap{display: flex; align-items: center; justify-content: space-between; padding-top: 15px; padding-bottom: 15px; margin-top: 20px; border-top: 1px dashed var(--border-color);}
.filter_result{flex: 1;}
.no_choice{font-size: 1.2em; color: #888; font-weight: 400;}
.filter_tag{display: flex; gap: 0.5em; background-color: var(--deep-color); color: #fff;}
.filter_tag button:hover{cursor: pointer; opacity: 0.7;}
.filter_tag button:focus-visible{outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px;}


/* 초기화 버튼 + 검색 버튼 */
.filter_button_group{display: flex; gap: 10px; align-items: center;}
.btn_reset{display: flex; align-items: center; gap: 5px; padding: 10px; font-size: 0.9rem; color: #888;}
.btn_reset i, .btn_reset:hover i{color: var(--deep-color); transition-duration: 600ms;transform: rotate(-90deg);}

/* 초기화 버튼 */
.btn_reset:disabled{opacity: 0.5; cursor: default;}
.btn_reset:disabled i{color: inherit;}
.btn_reset:not(:disabled):hover i{transform: rotate(270deg);}


/* 검색 버튼 */
.btn_search{display: flex; align-items: center; justify-content: center; width: 40px; aspect-ratio: 1/1; border-radius: 50%; background-color: var(--black-color); color: #fff;}



/* ===== 맞춤대출 검색 결과 ===== */
.page_info{display: flex; align-items: center; justify-content: space-between;}
.total{display: flex; gap: 10px; align-items: center; color: #888; }
.total > p{font-size: 1.2em; font-weight: 600; color: #111;}
.total .small{display: block; font-size: 0.9em; padding-left: 10px; border-left: 1px solid var(--border-color);}

.search_bar{display: flex; gap: 10px; border-bottom: 2px solid #111; font-size: 0.9rem;}
.search_bar select, .search_bar input[type="text"]{padding: 10px 5px;}
.search_bar button{padding: 10px; font-size: 1.1em;}





/* ========== 대출 상세페이지 ========== */
.white_box{background-color: #fff; box-shadow: var(--box-shadow); border: var(--border-opacity); border-radius: 30px; padding: 50px 40px;}

#page_section{background-color: var(--gray-bg);}
.pg_content.white_box{padding: 0; overflow: hidden;}
.pg_content.white_box > div{padding: 40px;}
.pg_content.white_box > div + div{border-top: 1px solid var(--border-color);}

/* 대출상품 상단 */
#page_section .pg_top{padding-top: 60px; padding-bottom: 60px;}
.pg_top .keyword_wrap{max-width: 60%;}
.pg_title_box{font-size: 1.4rem;}
.pg_title_box .name{display: block; margin-bottom: 10px; color: #555;}
.pg_title_box .pg_title{display: block; font-size: 2.4em; line-height: 1.2; font-weight: 700; font-family: 'NanumHuman', sans-serif; color: var(--black-color);}
.pg_title_box .pg_title.color{color: var(--dark-color);}

.tip{padding: 10px 20px; background-color: var(--light-bg); color: var(--black-color); line-height: 1.6; border-radius: 6px; font-weight: 500; text-align: center;}
.tip .color{color: var(--dark-color); font-weight: 600;}


/* ===== 업체 정보 + 상품 정보 ===== */
.company_info, .product_info{display: grid; grid-template-columns: repeat(4,1fr); gap: 20px;}

dl.info{position: relative; color: #555; font-size: 0.9rem;}
dl.info dt{font-weight: 500; margin-bottom: 10px;}
dl.info dd{font-size: 1.4em; font-weight: 600; color: #222; line-height: 1.4; word-break: keep-all;}

/* 업체 정보 */
.company_info{align-items: center;}
.company_info .info{padding: 10px; padding-bottom: 20px; color: var(--dark-color); font-weight: 600;}
.company_info .info + .info{padding-left: 30px;}
.company_info .info + .info::before{content:""; display: block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 100px; background-color: var(--border-color);}

/* 상품 정보 */
.product_info .info{background-color: var(--gray-bg); padding: 30px; border-radius: 20px;}
.product_info .info.point{background: var(--pale-bg);}
.product_info .info.point::before{content:""; display: block; position: absolute; left: 0; right: 0; bottom: 0; top: 0; border: 2px solid var(--deep-color); border-radius: 20px;}
.product_info .info.point dd{color: #069131;}



/* ===== 부가 설명 ===== */
.pg_add .text{font-size: 1.2rem; line-height: 1.6; margin: 30px auto;}


/* ===== 하단 업체 정보 한번 더 출력 ===== */
dl.row{display: flex; padding: 10px 0; gap: 10px; line-height: 1.4;}
dl.row dt{width: 25%; font-weight: 600;}
dl.row dd{flex: 1;}

.pg_btm .text{display: grid; grid-template-columns: repeat(2,1fr);}
.pg_btm .text .point{font-size: 1.2em; font-weight: 600; color: var(--dark-color);}
.pg_btm .row{align-items: center;}

/* ===== 대출 상세페이지 하단 ===== */
.pg_notice{display: flex; gap: 30px; margin-top: 60px;}
.pg_notice > div{flex: 1;}
.pg_notice .white_box + .white_box{margin-top: 30px;}
.pg_notice .text{line-height: 1.6; font-size: 0.9rem; word-break: keep-all;}
.pg_notice .title_box + .text{padding-top: 20px; border-top: 1px solid var(--border-color);}
.pg_notice .text p + p{margin-top: 1em;}
.pg_notice .text .tip{margin-top: 30px;}
.pg_notice .text .red{display: block; color: #ff0000; font-weight: 600; text-decoration: underline;}

/* 대출 시 주의사항 */
.pg_notice .notice_01{height: stretch;}
.caution_list > li{display: flex; align-items: flex-start; gap: 10px;}
.caution_list > li .num{display: flex; width: 1.8em; aspect-ratio: 1/1; background-color: var(--black-color); color: var(--main-color); border-radius: 50%; align-items: center; justify-content: center; line-height: 1; font-size: 0.8em; font-weight: 600; margin-top: 0.2em;}
.caution_list > li > p{flex: 1;}
.caution_list > li + li{margin-top: 10px;}

/* 유의사항 */
.pg_notice .notice_02{background-color: #fffcce; border: 4px solid #ffee34; box-shadow: 0 0 16px rgb(255 243 78 / 60%);}

/* 자사 유의사항 */
.notice_03 img{display: block; height: 1.6em; margin-bottom: 20px;}


/* ===== 이전글 + 다음글 ===== */
.post_nav{display: flex; padding: 30px 0;}
.post_nav > *{flex: 1; padding: 30px; transition-duration: 400ms;}
.post_nav > * + *{text-align: right;}

.post_nav > a.prev:hover{transform: translateX(-20px);}
.post_nav > a.next:hover{transform: translateX(20px);}
.post_nav > a:hover .tit{color: var(--deep-color);}
.post_nav .no_post{opacity: 0.4;}


.post_nav span{display: block; margin-bottom: 10px; font-weight: 500; margin-bottom: 1em; color: #888;}
.post_nav .tit{font-size: 1.4em; font-weight: 600; color: #222; line-height: 1.4; word-break: keep-all; transition-duration: 100ms;}