@charset "utf-8";

/* 배너 이미지 교체 후 안 바뀌면 아래 숫자만 1 올린 뒤 저장 (브라우저 이미지 캐시) */
/* banner-img-ver: 1 */

/* 메인 배너 색상 (PC 배경 fallback + 4번 MO 시안) */
:root {
	--banner-01-bg: #00297d;
	--banner-02-bg: #73c3ff;
	--banner-03-bg: #efece2;
	--banner-04-bg: #5045f5;
	--banner-04-accent: #e6e6fa;
	--banner-04-text: #1a1a9e;
	--banner-04-btn-ghost: #ffffff;
	--banner-04-btn-ghost-hover: #f5f5f5;
	--banner-04-btn-mint: #00ffc2;
	--banner-04-btn-mint-hover: #00e8be;
	--banner-01-btn-blue: #006af5;
	--banner-01-btn-blue-hover: #0959c1;
	--banner-01-btn-mint: #00a5b4;
	--banner-01-btn-mint-hover: #018f9c;
	--banner-02-btn: #0330bf;
	--banner-02-btn-hover: #103dcb;
	--banner-03-btn: #e3e9ff;
	--banner-03-btn-hover: #eff8ff;
	--banner-03-text: #104b68;
}

.banner_01,
.banner_02,
.banner_03,
.banner_04 {
	position: relative;
	width: 100%;
	height:340px;
	padding: 0;
	background-repeat: no-repeat;
	background-position: center top;
	/* background-size: 100% 100%; */
	margin-bottom: 0;
}

/* background-image는 HTML style 또는 관리자 배너이미지 URL로 지정 (CSS는 fallback) */
.banner_01 { background-color: var(--banner-01-bg); background-image: url('/files/images/main/banner_01.png?v=1'); }
.banner_02 { background-color: var(--banner-02-bg); background-image: url('/files/images/main/banner_02.png?v=1'); }
.banner_03 { background-color: var(--banner-03-bg); background-image: url('/files/images/main/banner_03.png?v=1'); }
.banner_04 { background-color: var(--banner-04-bg); background-image: url('/files/images/main/banner_04.png?v=1'); margin-bottom: 0; }

/* Swiper — div 배경 배너 (img 없음) */
.bannerWrap.swiper .banner.banner-bg-only,
.bannerWrap.swiper .banner.banner-bg-only .banner-contents-html {
	width: 100%;
	position: relative;
}
.bannerWrap.swiper .banner.banner-bg-only .banner-contents-html > .banner_01,
.bannerWrap.swiper .banner.banner-bg-only .banner-contents-html > .banner_02,
.bannerWrap.swiper .banner.banner-bg-only .banner-contents-html > .banner_03,
.bannerWrap.swiper .banner.banner-bg-only .banner-contents-html > .banner_04 {
	width: 100%;
}


.banner_01_cta, 
.banner_02_cta,
.banner_03_cta,
.banner_04_cta{
	position: absolute;
	left: 50%;
	bottom: 34px;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	padding: 0 16px;
}

.banner_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 118px;
	height: 42px;
	padding: 0 16px;
	border-radius:10px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	text-decoration: none;
	gap: 8px;
	white-space: nowrap;
}

.banner_btn__ico {
	font-family: 'Material Symbols Outlined';
	font-size: 20px;
	font-weight: normal;
	line-height: 1;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.banner_btn__ico--arrow {
	margin-left: auto;
	flex-shrink: 0;
}

.banner_btn:hover{
    transform: scale(1.01);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.banner_01_btn--ghost{
    background: var(--banner-01-btn-blue);
    color: #fff !important;
	
}
.banner_01_btn--ghost:hover {
	background: var(--banner-01-btn-blue-hover);
	
}
.banner_01_btn--mint{
    background: var(--banner-01-btn-mint);
	color: #ffffff !important;
}
.banner_01_btn--mint:hover {
    background: var(--banner-01-btn-mint-hover);
}

.banner_01_btn--roadmap {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.55);
	color: #ffffff !important;
	min-width: 200px;
}

.banner_02_btn{
	background: var(--banner-02-btn);
    color: #ffffff !important;
}
.banner_02_btn:hover {
	background: var(--banner-02-btn-hover);
}

.banner_03_btn{
    background: var(--banner-03-btn);
    color: var(--banner-03-text) !important;
    font-weight: 600;
    font-size: 18px;
}
.banner_03_btn:hover {
	background: var(--banner-03-btn-hover);
}

.banner_04_btn--ghost {
	background: var(--banner-04-btn-ghost);
	color: var(--banner-04-text) !important;
    font-weight: 600;
    font-size: 18px;
}

.banner_04_btn--ghost .banner_btn__txt,
.banner_04_btn--ghost .banner_btn__ico {
	color: var(--banner-04-text) !important;
}

.banner_04_btn--ghost:hover {
	background: var(--banner-04-btn-ghost-hover);
}

.banner_04_btn--mint {
	background: var(--banner-04-btn-mint);
	color: var(--banner-04-text) !important;
    font-weight: 600;
    font-size: 18px;
}

.banner_04_btn--mint .banner_btn__txt,
.banner_04_btn--mint .banner_btn__ico {
	color: var(--banner-04-text) !important;
}

.banner_04_btn--mint:hover {
	background: var(--banner-04-btn-mint-hover);
}

/* 모바일 — 4개 배너 (::before로 높이 확보, CTA absolute 겹침 방지) */
@media screen and (max-width: 834px) {
	#wrap {
		overflow-x: hidden;
	}

	.banner_01,
	.banner_02,
	.banner_03,
	.banner_04 {
		display: block;
		clear: both;
		position: relative;
		width: 100%;
		max-width: 100%;
		height: auto !important;
		min-height: 0;
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 0;
		padding: 0;
		box-sizing: border-box;
		overflow: hidden;
		background-size: 100% auto;
		background-position: center top;
		background-repeat: no-repeat;
	}

	/* 높이용 스페이서(자식이 absolute만 있을 때 본문 높이 0 방지) */
	.banner_01::before,
	.banner_02::before,
	.banner_03::before,
	.banner_04::before {
		content: '';
		display: block;
		width: 100%;
	}

	/* MO 이미지 700×500 */
	.banner_01::before,
	.banner_02::before,
	.banner_03::before,
	.banner_04::before {
		padding-top: 71.428571%;
	}

	.banner_01 {
		background-color: var(--banner-01-bg);
		background-image: url('/files/images/main/banner_01_mo.png?v=1');
	}

	.banner_02 {
		background-color: var(--banner-02-bg);
		background-image: url('/files/images/main/banner_02_mo.png?v=1');
	}

	.banner_03 {
		background-color: var(--banner-03-bg);
		background-image: url('/files/images/main/banner_03_mo.png?v=1');
	}

	.banner_04 {
		background-color: var(--banner-04-bg);
		background-image: url('/files/images/main/banner_04_mo.png?v=1');
	}

	.banner_04 + #sub-container {
		clear: both;
		position: relative;
	}

	.banner_01_cta,
	.banner_02_cta,
	.banner_03_cta,
	.banner_04_cta {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 28px;
		z-index: 2;
		transform: none;
		width: 100%;
		max-width: 100%;
		padding: 0 16px;
		box-sizing: border-box;
	}

	/* 1번 — 가운데 묶음 + 로딩 점과 간격 */
	.banner_01_cta {
		bottom: 46px;
	}

	/* 4번 — 로딩 점 위, 버튼은 1~3번보다 약간 아래 */
	.banner_04_cta {
		bottom: 34px;
	}

	.banner_01 .banner_btn:hover,
	.banner_02 .banner_btn:hover,
	.banner_03 .banner_btn:hover,
	.banner_04 .banner_btn:hover {
		transform: scale(1.01);
	}

	.banner_01 .banner_01_btn--roadmap {
		display: none !important;
	}

	.banner_01 .banner_01_cta {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 8px;
		width: 100%;
	}

	.banner_01 .banner_btn,
	.banner_02 .banner_btn,
	.banner_03 .banner_btn,
	.banner_04 .banner_btn {
		min-width: 0;
		height: 34px;
		padding: 0 8px;
		font-size: 16px;
		font-weight: 600;
		gap: 4px;
		box-sizing: border-box;
	}

	.banner_01 .banner_btn {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
		height: 30px;
		padding: 0 12px;
		font-size: 13px;
		font-weight: 600;
		gap: 4px;
		border-radius: 999px;
	}

	.banner_01 .banner_btn .banner_btn__ico:not(.banner_btn__ico--arrow) {
		font-size: 16px;
	}

	.banner_02 .banner_btn {
		padding-left: 18px;
		padding-right: 18px;
	}

	.banner_04_cta {
		gap: 6px;
	}

	.banner_04 .banner_btn {
		flex: 1 1 calc(50% - 3px);
		max-width: calc(50% - 3px);
	}

	.banner_01 .banner_btn__ico--arrow,
	.banner_02 .banner_btn__ico--arrow,
	.banner_03 .banner_btn__ico--arrow,
	.banner_04 .banner_btn__ico--arrow {
		display: none !important;
	}

	.banner_01 .banner_btn .banner_btn__ico:not(.banner_btn__ico--arrow),
	.banner_02 .banner_btn .banner_btn__ico:not(.banner_btn__ico--arrow),
	.banner_03 .banner_btn .banner_btn__ico:not(.banner_btn__ico--arrow),
	.banner_04 .banner_btn .banner_btn__ico:not(.banner_btn__ico--arrow) {
		font-size: 15px;
	}

	.banner_01_btn--roadmap {
		min-width: 0;
	}
}