/* ===== sub-banner ===== */
.sub-banner-wrap { width: 1800px; max-width: 100%; margin: 0 auto; }

/* banner card */
.sub-banner { position: relative; border-radius: 24px; overflow: hidden; padding: 60px 0 90px; background-color: #0D1B3E; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(rgba(5,18,56,0.78), rgba(5,18,56,0.78)), var(--banner-bg, none); background-size: 30px 30px, 30px 30px, 100% 100%, cover; background-position: 0 0, 0 0, 0 0, center; }

/* breadcrumb */
.sub-banner .breadcrumb { display: flex; align-items: center; gap: 11px; margin-bottom: 28px; }
.sub-banner .breadcrumb .breadcrumb-home img { width: 18px; height: 18px; display: block; }
.sub-banner .breadcrumb .breadcrumb-sep { display: flex; align-items: center; }
.sub-banner .breadcrumb .breadcrumb-sep img { width: 6px; height: 10px; display: block; }
.sub-banner .breadcrumb .breadcrumb-depth1 { font-size: 1.4rem; color: rgba(255,255,255,0.55); }
.sub-banner .breadcrumb .breadcrumb-current { font-size: 1.4rem; color: #57AEFF; font-weight: 600; }

/* text */
.sub-banner .sub-banner-title { font-family: 'S-CoreDream', sans-serif; font-size: 5.6rem; font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 14px; }
.sub-banner .sub-banner-eng { font-size: 1.4rem; font-weight: 700; color: #57AEFF; letter-spacing: 4px; margin-bottom: 30px; }
.sub-banner .sub-banner-desc { font-size: 2rem; color: rgba(255,255,255,0.75); line-height: 1.8; word-break: keep-all; }

/* tab */
.sub-tab { display: flex; justify-content: center; margin-top: -36px; position: relative; z-index: 10; }
.sub-tab .sub-tab-inner { display: inline-flex; border-radius: 50px; padding: 8px; gap: 4px; background: rgba(29, 35, 49, 0.87); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.1); }
.sub-tab .sub-tab-list { display: flex; list-style: none; margin: 0; padding: 0; gap: 4px; }
.sub-tab .sub-tab-list .sub-tab-item { width: 230px; }
.sub-tab .sub-tab-list .sub-tab-item .sub-tab-link { width: 100%; display: block; padding: 11px; text-align: center; border-radius: 50px; font-size: 1.7rem; font-weight: 500; color: #D6E4F9; white-space: nowrap; transition: background 0.2s, color 0.2s; }
.sub-tab .sub-tab-list .sub-tab-item.active .sub-tab-link { background: #fff; color: #111; font-weight: 700; }
.sub-tab .sub-tab-list .sub-tab-item:not(.active) .sub-tab-link:hover { color: rgba(255,255,255,0.9); }

/* ===== responsive ===== */
@media (min-width: 1920px) {
	.sub-banner-wrap { width: 100%; padding: 0 120px; }
}

@media (max-width: 1820px) {
	.sub-banner-wrap { padding: 0 20px; }
}

@media (max-width: 1280px) {
	.sub-banner { padding: 50px 0 100px; }
	.sub-banner .sub-banner-title { font-size: 4.8rem; }
}

@media (max-width: 768px) {
	.sub-banner-wrap { padding: 0 16px; }
	.sub-banner { padding: 40px 0 90px; border-radius: 18px; }
	.sub-banner .sub-banner-title { font-size: 3.8rem; }
	.sub-banner .sub-banner-eng { font-size: 1.2rem; letter-spacing: 2px; }
	.sub-banner .sub-banner-desc { font-size: 1.6rem; }
	.sub-banner .sub-banner-inner { padding: 0 25px; }
	.sub-tab .sub-tab-inner { display: flex; width: calc(100% - 32px); }
	.sub-tab .sub-tab-list { flex: 1; }
	.sub-tab .sub-tab-list .sub-tab-item { flex: 1; width: auto; }
	.sub-tab .sub-tab-list .sub-tab-item .sub-tab-link { padding: 10px 8px; font-size: 1.4rem; }
}

@media (max-width: 480px) {
	.sub-banner { padding: 40px 0; border-radius: 14px; }
	.sub-banner .breadcrumb { margin-bottom: 15px; gap: 6px; }
	.sub-banner .breadcrumb .breadcrumb-current,
	.sub-banner .breadcrumb .breadcrumb-depth1 { font-size: 1.1rem; }
	.sub-banner .breadcrumb .breadcrumb-home img { width: 14px; height: 14px; }
	.sub-banner .sub-banner-title { font-size: 2.7rem; }
	.sub-banner .sub-banner-desc { display: none; }
	.sub-banner .sub-banner-eng { margin-bottom: 0; font-size: 1rem; }
	.sub-tab { margin-top: 15px; width: 100%; }
	.sub-tab .sub-tab-inner { width: 100%; border-radius: 10px; padding: 4px; }
	.sub-tab .sub-tab-list .sub-tab-item .sub-tab-link { border-radius: 8px; padding: 12px 5px; font-size: 1.35rem; }
	.sub-tab .sub-tab-list .sub-tab-item.active .sub-tab-link { font-weight: 500; }
}