/* =============================================================================
   mobile web 메인 
   ============================================================================= */

/* 3 이어하기 도트 애니메이션 키프레임 */
@keyframes mainContinueDots {
	0%, 80%, 100% { transform: translateY(0); opacity: 0.45; }
	40% { transform: translateY(-3px); opacity: 1; }
}

.mobile-main-wrap {
	.main-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		height: 52px;
		padding: 12px 20px;
		background: #fff;
		border-bottom: 1px solid #eee;
	}
	
	.main-header .layer-logo {
		width: 119px;
		height: 20px;
		background: url('../images_kiwi/main/logo_119x20.png') no-repeat;
		background-size: contain;
	}
	
	.main-header .btn-nav {
		width: 20px;
		height: 20px;
		background: url('../images_kiwi/icon/ico_nav_menu.svg') no-repeat center;
		background-size: 20px;
	}
	
	/* #contents 기본 패딩 (기존 main-new 유지) */
	.main-content.main-page {
		padding: 0 20px 32px !important;
	}
	
	/* ----- 1 공지 바 ----- */
	.main-notice {
		position: relative;
		z-index: 5;
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0 -20px;
		padding: 12px 20px;
		border-radius: 0;
		background: #f5f5f5;
		text-align: left;
	}
	
	.main-notice > .ico-img {
		display: flex;
		align-items: center;
		flex: 0 0 auto;
		width: 20px;
		height: 20px;
	}
	
	.main-notice > .ico-img img {
		vertical-align: top;
	}
	
	.main-notice .notice-roll-viewport {
		position: relative;
		flex: 1;
		height: 20px;
		overflow: hidden;
		min-width: 0;
	}
	
	.main-notice .notice-roll-track {
		margin: 0;
		padding: 0;
		list-style: none;
		transform: translateY(0);
	}
	
	.main-notice .notice-roll-track.is-animating {
		transition: transform 0.4s ease;
	}
	
	.main-notice .notice-roll-track li {
		height: 20px;
	}
	
	.main-notice .notice-roll-track .txt-label {
		display: block;
		font-size: 0.813rem;
		line-height: 22px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.main-notice .notice-roll-track a.txt-label {
		color: #666;
		text-decoration: none;
	}
	
	.main-notice-close {
		flex: none;
		width: 20px;
		height: 20px;
		border: 0;
		padding: 0;
		background: url('../images_kiwi/icon/btn_layer_close.svg') no-repeat center;
		background-size: 20px;
		cursor: pointer;
	}
	
	@media (prefers-reduced-motion: reduce) {
		.main-notice .notice-roll-track.is-animating {
			transition: none;
		}
	}
	
	/* ----- 2 메인 마케팅 배너 ----- */
	.main-hero {
		margin-top:24px;
	}
	
	.main-hero-inner {
		position: relative;
		min-height: 168px;
		padding: 24px 20px;
		border-radius: 16px;
		background: #ffbc00;
		box-shadow: 0 8px 16px 0 rgba(20, 20, 20, 0.12), 0 0 2px 0 rgba(20, 20, 20, 0.08);
		box-sizing: border-box;
	}
	
	.main-hero-info {
		position: relative;
		min-width: 0;
		padding:0 0 22px 0;
		
	}
	
	.main-hero-copy {
		margin: 0 0 8px;
		font-size: 1rem;
		font-weight: 500;
		line-height: 1.5;
		color: #141414;
	}
	
	.main-hero-title {
		font-size: 1.250rem;
		font-weight: 700;
		line-height: 1.45;
		color: #141414;
	}
	
	.main-hero-btn-wrap {
		position: relative;
	}
	
	.main-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		max-width: 100%;
		min-height: 48px;
		padding: 0 16px;
		border: 0;
		border-radius: 8px;
		font-size: 1rem;
		font-weight: 500;
		cursor: pointer;
		box-sizing: border-box;
	}
	
	.main-btn-white {
		background: #fff;
		color: #141414;
		box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
	}
	
	.main-hero-visual {
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 1;
		width: 56px;
		height: 80px;
	}
	
	.main-hero-visual img {
		display: block;
		width: 100%;
		height: auto;
		object-fit: contain;
	}
	
	/* ----- 3 이어하기 ----- */
	.main-continue {
		margin: -16px 0 20px;
		background-color: #fff1e9;
		padding: 24px 20px 11px;
		border-bottom-right-radius: 16px;
		border-bottom-left-radius: 16px;
	}
	
	.main-continue-link {
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding-right: 20px;
		font-size: 0.938rem;
		font-weight: 500;
		line-height: 23px;
		color: #666;
		text-decoration: none;
	}
	
	.main-continue-link::after {
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		width: 20px;
		height: 20px;
		content: '';
		background: url('../images_kiwi/icon/btn_arr_gray2.svg') no-repeat right center;
		background-size: 16px;
	}
	
	.main-continue-dots {
		display: inline-flex;
		align-items: center;
		gap: 3px;
		height: 12px;
		margin-right: 10px;
		padding:0 1px;
	}
	
	.main-continue-dots > span {
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background: linear-gradient(180deg, #FFD338 0%, #FBC000 100%);
		box-shadow: inset 0 0 1px 0 rgba(63, 112, 222, 0.5);
		animation: mainContinueDots 1.2s infinite ease-in-out;
	}
	
	.main-continue-dots > span:nth-child(2) { animation-delay: 0.2s; }
	.main-continue-dots > span:nth-child(3) { animation-delay: 0.4s; }
	
	/* ----- 4 퀵 링크 카드 ----- */
	.main-quicklinks {
		display: flex;
		flex-direction: column;
		gap: 20px;
		margin-bottom: 32px;
	}
	
	.main-qcard-arrow {
		position: relative;
		display: flex;
		align-items: flex-start;
		gap: 4px;
		padding: 19px 55px 19px 20px;
		border-radius: 16px;
		border: 1px solid #dcdcdc;
		background: #fff;
		text-decoration: none;
		color: inherit;
		box-sizing: border-box;
		padding-right: 32px;
		flex-direction: column;

		.main-qcard-copy {
			display: block;
			font-size: 0.938rem;
			font-weight: 700;
			color: #f46600;
			line-height: 1.532;
		}
		
		.main-qcard-title {
			display: block;
			font-size: 1.125rem;
			font-weight: 400;
			color: #141414;
			line-height: 1.445;
		}
	}
	
	.main-qcard-arrow::after {
		position: absolute;
		top: 50%;
		right: 20px;
		transform: translateY(-50%);
		width: 20px;
		height: 20px;
		content: '';
		background: url('../images_kiwi/icon/btn_arr_r.svg') no-repeat right center;
		background-size: 20px;
	}
	
	
	
	.main-qcard-external {
		position: relative;
		display: flex;
		align-items: center;
		gap: 8px;
		padding:12px 20px 12px 16px;
		background: rgba(255, 239, 185, 0.7);
		border-radius: 12px;

		.main-qcard-title {
			display: block;
			font-size: 0.938rem;
			font-weight: 500;
			color: #141414;
			line-height: 1.532;
		}
	}
	
	.main-qcard-external::after {
		content: '';
		position: absolute;
		right: 20px;
		top: 50%;
		width: 20px;
		height: 20px;
		margin-top: -10px;
		background: url('../images_kiwi/icon/direct link.svg') no-repeat center;
		background-size: 20px;
		@media (max-width: 360px) {
			background:none;
		}
	}
	
	.main-qcard-badge {
		flex: none;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		border: 1px solid #ffbc00;
		border-radius: 10px;
		background: #ffd338 url('../images_kiwi/icon/icon_app_icon.png') no-repeat center;
		background-size: 22px;
		box-shadow: 0 2px 8px 0 rgba(20, 20, 20, 0.10), 0 0 2px 0 rgba(20, 20, 20, 0.08);

	}
	
	/* ----- 5 추천상품 ----- */
	.main-recmd {
		margin-bottom: 32px;
	}
	
	.main-recmd-title {
		margin: 0 0 20px;
		font-size: 1.375rem;
		font-weight: 700;
		line-height: 1.455;
		color: #141414;
		span {
			font-weight: 500;
		}
	}
	
	.main-tabs {
		position: relative;
		margin: 0 -20px 16px;
		.main-tabs-inner {
			display: flex;
			align-items: center;
			gap: 6px;
			overflow-x: auto;
			padding: 0 20px;
			-webkit-overflow-scrolling: touch;
			scrollbar-width: none;
		}
		@media (max-width: 360px) {
			&::before {
				content: '';
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 20px;
				height: 100%;
				pointer-events: none;
				background: linear-gradient(90deg, #ffffff 50%, rgba(255, 255, 255, 0) 100%);
			}

			&::after {
				content: '';
				display: block;
				position: absolute;
				top: 0;
				right: 0;
				width: 20px;
				height: 100%;
				pointer-events: none;
				background: linear-gradient(270deg, #ffffff 50%, rgba(255, 255, 255, 0) 100%);
			}
		}
	}
	
	.main-tabs::-webkit-scrollbar {
		display: none;
	}
	
	.main-tab {
		flex: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 12px 16px;
		border: 0;
		border-radius: 999px;
		background: #ebebeb;
		font-size: 0.938rem;
		font-weight: 500;
		line-height: 1;
		color: #999;
		cursor: pointer;
		@media (max-width: 360px) {
			scroll-snap-align: start;
			scroll-snap-stop: normal;
		}
	}
	
	.main-tab.is-active {
		background: #ffbc00;
		color: #141414;
	}
	
	.main-recmd-panel {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	
	.main-recmd-panel[hidden] {
		display: none !important;
	}
	
	.main-recmd-placeholder {
		margin: 0 0 4px;
		font-size: 0.8125rem;
		line-height: 1.4;
		color: #888;
	}
	
	.main-pcard {
		display: block;
		padding: 15px 20px;
		border-radius: 16px;
		border: 1px solid #e5e5e5;
		background: #fff;
		text-decoration: none;
		color: inherit;
		box-sizing: border-box;
	}
	
	.main-pcard-text {
		flex: 1;
		min-width: 0;
	}
	
	.main-pcard-name {
		display: block;
		font-size: 1rem;
		font-weight: 500;
		line-height: 1.5;
		color: #141414;
		margin-bottom: 2px;
	}
	
	.main-pcard-desc {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 0.875rem;
		line-height: 1.572;
		color: #666;
		min-width: 0;
	}
	
	.main-pcard-thumb {
		flex: none;
		width: 48px;
		height: 48px;
	}
	
	.main-pcard-thumb img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	
	.main-pcard-meta {
		margin-top: 8px;
		display: block;
		font-size: 0.875rem;
		font-weight: 700;
		line-height: 1.572;
		color: #f46600;
		span {
			display: inline-block;
			font-size: 0.875rem;
			font-weight: 300;
			padding-right: 12px;
		}

		strong {
			display: inline-block;
			font-weight: 700;
			font-size: 0.875rem;
		}

	}
	
	.main-pcard-rate {
		font-size: 0.75rem;
		color: #888;
		line-height: 1.3;
	}
	
	.main-pcard-rate small {
		font-size: inherit;
		color: #aaa;
	}
	
	.main-pcard-limit {
		font-size: 0.875rem;
		font-weight: 800;
		color: #ff8a00;
	}

	.main-pcard-featured {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		padding:24px 20px;

		> .main-pcard-name {
			flex: 1 1 100%;
			width: 100%;
			max-width: 100%;
			box-sizing: border-box;
		}
		.main-pcard-text {
			flex:none;
			width: calc(100% - 48px);
		}
		.main-pcard-name {
			font-size: 1.250rem;
			line-height: 1.4;
			color: #141414;
			margin-bottom: 12px;
		}
		.main-pcard-desc {
			color: #141414;
			font-size: 0.938rem;
			font-weight: 300;
			span {font-weight: 500;font-size: 0.938rem;}
		}

		.main-pcard-meta {
			color: #141414;
			font-weight: 300;
			font-size: 0.938rem;
			margin-top: 2px;
			span {font-weight: 500;font-size: 0.938rem; padding-right:0;}
		}
	}
	.panel-loan .main-pcard-featured {
		background: #e0f3ff;
		border-color: #e0f3ff;
		.main-pcard-desc {
			span {color: #0066ff;}
		}
		.main-pcard-meta {
			span {color: #0066ff;}
		}
	}

	.panel-demand .main-pcard-featured {
		background: #ffefb9;
		border-color: #ffefb9;
		.main-pcard-desc {
			span {color: #f46600;}
		}
		.main-pcard-meta {
			span {color: #f46600;}
		}
	}

	.panel-deposit .main-pcard-featured {
		background: #ffdb9f;
		border-color: #ffdb9f;
		.main-pcard-desc {
			span {color: #f46600;}
		}
		.main-pcard-meta {
			span {color: #f46600;}
		}
	}

	.panel-installment .main-pcard-featured {
		background: #ddf0eb;
		border-color: #ddf0eb;
		.main-pcard-desc {
			span {color: #0066ff;}
		}
		.main-pcard-meta {
			span {color: #0066ff;}
		}
	}

	.panel-card .main-pcard-featured {
		background: #e6e5ff;
		border-color: #e6e5ff;
		.main-pcard-desc {
			span {color: #0066ff;}
		}
		.main-pcard-meta {
			span {color: #0066ff;}
		}
	}
	
	/* ----- 6 프로모션 Swiper ----- */
	.main-promo {
		margin: 0 -20px 16px;
		
	}
	
	.main-promo .swiper-slide {
		height: auto;
	}

	.promotion-swiper {
		padding: 0 20px 0;
	}

	.main-promo-slide {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 100px;
		padding: 20px 16px 34px;
		border-radius: 12px;
		text-decoration: none;
		color: inherit;
		box-sizing: border-box;
	}
	
	.main-promo-txt {
		display: flex;
		flex-direction: column;
		gap: 4px;
		min-width: 0;
	}
	
	.main-promo-t1 {
		font-size: 1.125rem;
		font-weight: 500;
		line-height: 1.455;
		color: #141414;
	}
	
	.main-promo-t2 {
		font-size: 0.875rem;
		font-weight: 500;
		line-height: 1.455;
		color: #666;
	}
	
	.main-promo-img {
		flex: none;
		width: 72px;
		height: 72px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.main-promo-img img {
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
	}
	
	.main-promo .swiper-pagination {
		bottom: 14px !important;

		text-align: left !important;
		padding-left: 32px !important;

	}
	
	.main-promo .swiper-pagination-bullet {
		background: rgba(0, 0, 0, 0.12);
		opacity: 1;
	}
	
	.main-promo .swiper-pagination-bullet-active {
		background: #7d6c59;
	}
	
	/* ----- §7 퀵 메뉴 ----- */
	.main-quickmenu {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
	}
	
	.main-qm {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		padding: 8px 0;
		text-decoration: none;
		color: #141414;
		font-size: 0.813rem;
		font-weight: 300;
		text-align: center;
	}
	
	.main-qm-ico {
		width: 40px;
		height: 40px;
		background-color: #fff;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 40px;
		box-sizing: border-box;
	}
	
	.main-qm-ico-cs {
		background-image: url('../images_kiwi/main/qm-ico-cs.png');
	}
	
	.main-qm-ico-branch {
		background-image: url('../images_kiwi/main/qm-ico-branch.png');
	}
	
	.main-qm-ico-member {
		background-image: url('../images_kiwi/main/qm-ico-member.png');
	}
	
	.main-qm-ico-notice {
		background-image: url('../images_kiwi/main/qm-ico-notice.png');
	}
	
	.main-qm-label {
		word-break: keep-all;
		line-height: 1.614;
	}

	#footer {
		padding:0 21px 36px 21px;
	}

}