@charset "utf-8";

/* 내용관리 */
#ctt { background:#fff; }
.ctt_admin { text-align:right; }
#ctt header h1 { position:absolute; font-size:0; line-height:0; overflow:hidden; }
#ctt_con { }
#ctt_con img { max-width:100%; height:auto; }
.ctt_img { text-align:center; }

.brand_intro { width:100%; line-height:1; text-align:center; font-size:16px; word-break:keep-all; overflow:hidden; }

.brand_sound { display:grid; grid-template-columns:1fr 1fr; width:100%; position:relative; }
.brand_sound_img { min-height:clamp(420px, 35vw, 640px); overflow:hidden; background-color:#010817; background-image:var(--brand-sound-bg); background-repeat:no-repeat; background-position:center center; background-size:cover; }
.sound_text { width:100%; max-width:1230px; padding:0 15px; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); text-align:left; color:#fff; pointer-events:none; }
.sound_text_inner { width:50%; }
.sound_text h3 { line-height:1.35; font-size:clamp(26px, 3vw, 42px); font-weight:700; letter-spacing:-0.04em; }
.sound_text h3::after { content:""; display:block; width:clamp(40px, 4vw, 70px); height:2px; margin:clamp(20px, 2.5vw, 34px) 0; background:rgba(255,255,255,0.75); }
.sound_text p { line-height:1.7; font-size:clamp(14px, 2.2vw, 20px); font-weight:300; color:rgba(255,255,255,0.88); letter-spacing:-0.02em; word-break:keep-all; }

.brand_feature_list { display:flex; flex-flow:column; justify-content:center; gap:clamp(30px, 4vw, 55px); width:90%; margin:0 auto; padding:clamp(50px, 6vw, 100px) 15px; background:#fff; text-align:left; }
.feature_item { display:flex; align-items:flex-start; gap:clamp(18px, 2vw, 28px); padding-bottom:clamp(30px, 4vw, 55px); border-bottom:1px solid #e0e0e0; }
.feature_item:last-child { padding-bottom:0; border-bottom:0; }
.feature_item .icon { flex:0 0 clamp(42px, 4vw, 62px); width:clamp(42px, 4vw, 62px); }
.feature_item .icon img { display:block; width:100%; }
.feature_item .txt { flex:1; min-width:0; }
.feature_item .txt strong { display:block; line-height:1.4; font-size:clamp(18px, 2.2vw, 26px); font-weight:700; color:#111; letter-spacing:-0.03em; }
.feature_item .txt p { margin-top:clamp(8px, 1.2vw, 14px); line-height:1.7; font-size:clamp(14px, 2.2vw, 18px); font-weight:300; color:#555; letter-spacing:-0.02em; word-break:keep-all; }

.brand_global { background-color:#0d3c66; background-image:var(--brand-global-bg); background-repeat:no-repeat; background-position:calc(75% + 150px) 35%; background-size:min(65vw, 1200px) auto; color:#fff; position:relative; transition:background 0.3s ease; overflow:hidden; }
.brand_global::before { content:""; width:100%; height:100%; background:linear-gradient(to bottom right, #06233f 5%, transparent 50%); position:absolute; left:0; top:0; z-index:0; pointer-events:none; }
.brand_global_inner { display:flex; align-items:center; width:100%; max-width:1230px; margin:0 auto; padding:clamp(60px, 8vw, 120px) 15px; position:relative; z-index:1; }
.global_text { width:48%; text-align:left; }
.global_text h3 { line-height:1.35; font-size:clamp(26px, 3.5vw, 46px); font-weight:700; color:#fff; letter-spacing:-0.04em; }
.global_text p { margin-top:clamp(18px, 2vw, 28px); line-height:1.7; font-size:clamp(14px, 2.2vw, 20px); font-weight:300; color:rgba(255,255,255,0.82); letter-spacing:-0.02em; word-break:keep-all; }
.global_count { display:flex; align-items:center; gap:clamp(30px, 4vw, 55px); margin-top:clamp(30px, 5vw, 80px); }
.count_item { display:flex; align-items:center; gap:10px; color:#fff; }
.count_icon { display:flex; align-items:center; justify-content:center; flex:0 0 clamp(40px, 3.5vw, 54px); width:clamp(40px, 3.5vw, 54px); height:clamp(40px, 3.5vw, 54px); font-size:clamp(28px, 2.5vw, 40px); color:#fff; opacity:0.95; }
.count_text { display:flex; flex-flow:column; align-items:flex-start; }
.count_text strong { line-height:1; font-size:clamp(40px, 4vw, 62px); font-weight:700; letter-spacing:-0.03em; }
.count_text em { margin-top:6px; font-size:clamp(13px, 1.4vw, 17px); font-style:normal; font-weight:300; color:rgba(255,255,255,0.86); }

.brand_lineup { background:#f5f6f8; padding:clamp(70px, 8vw, 120px) 15px; }
.contents_title { display:flex; flex-flow:column; align-items:center; justify-content:center; width:100%; max-width:1200px; margin:0 auto; text-align:center; }
.contents_title .tit { line-height:1.35; font-size:clamp(26px, 4vw, 46px); font-weight:700; color:#111; letter-spacing:-0.04em; }
.contents_title .tit span { color:#1d438a; }
.contents_title .txt { margin-top:clamp(10px, 1.5vw, 18px); line-height:1.7; font-size:clamp(14px, 2.2vw, 20px); font-weight:300; color:#777; letter-spacing:-0.02em; }

.lineup_list { display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(15px, 2vw, 24px); width:100%; max-width:1200px; margin:clamp(45px, 5vw, 75px) auto 0; }
.lineup_item {
	display:flex; flex-flow:column; align-items:center; min-height:clamp(310px, 25vw, 430px); padding:clamp(35px, 4vw, 55px) clamp(20px, 2.5vw, 35px); border:0; border-radius:clamp(8px, 1vw, 14px); background:#e7ebf1;
	font-family:inherit; text-align:center; cursor:pointer; transition:all 0.25s ease;
}
.lineup_item:hover { transform:translateY(-8px); box-shadow:0 18px 35px rgba(0,0,0,0.12); background:#dfe5ee; }
.lineup_item h4 { line-height:1.3; font-size:clamp(20px, 2.4vw, 30px); font-weight:700; color:#000; letter-spacing:-0.04em; }
.lineup_item h4 span { font-size:0.82em; font-weight:500; color:#1d438a; }
.lineup_item p { margin:clamp(10px, 1.5vw, 20px) auto; line-height:1.7; font-size:clamp(14px, 2.2vw, 18px); font-weight:300; color:#555; letter-spacing:-0.02em; word-break:keep-all; }
.lineup_img { display:flex; align-items:center; justify-content:center; width:clamp(120px, 12vw, 170px); height:clamp(120px, 12vw, 170px); margin-top:auto; border-radius:50%; background:#fff; }
.lineup_img img { display:block; max-width:90%; max-height:90%; object-fit:contain; }

.brand_more {
	display:flex; align-items:center; justify-content:center; width:100%; min-height:clamp(280px, 26vw, 430px); padding:clamp(60px, 7vw, 100px) 15px;
	background-color:#111; background-image:var(--brand-more-bg); background-repeat:no-repeat; background-position:center center; background-size:cover; position:relative; overflow:hidden;
}
.brand_more::before { content:""; width:100%; height:100%; background:rgba(0, 0, 0, 0.38); position:absolute; left:0; top:0; z-index:0; pointer-events:none; }
.brand_more_inner { display:flex; align-items:center; justify-content:center; width:100%; max-width:1200px; margin:0 auto; position:relative; z-index:1; }
.brand_more_text { width:100%; text-align:center; color:#fff; }
.brand_more_text h3 { line-height:1.35; font-size:clamp(26px, 4vw, 46px); font-weight:700; color:#fff; letter-spacing:-0.04em; }
.brand_more_btn {
	display:inline-flex; align-items:center; justify-content:center; gap:12px; min-width:clamp(170px, 16vw, 230px); height:clamp(42px, 3.5vw, 52px); margin-top:clamp(24px, 3vw, 42px); padding:0 clamp(22px, 2.5vw, 34px);
	border-radius:50px; background:#1d438a; font-size:clamp(14px, 1.4vw, 16px); font-weight:600; color:#fff; letter-spacing:-0.02em; transition:all 0.25s ease;
}
.brand_more_btn:hover { background:#142f62; color:#fff; }


/* 반응형 */
@media (max-width: 1200px){

	.brand_global_inner,
	.sound_text,
	.contents_title,
	.lineup_list,
	.brand_more_inner { width:90%; }

}

@media (max-width: 980px){

	.brand_sound { grid-template-columns:1fr; }
	.brand_sound_img { position:relative; }
	.sound_text_inner { width:100%; }

	.brand_global { height:clamp(500px, 110vw, 800px); background-position:center bottom -15vw; background-size:clamp(430px, 120vw, 850px) auto; }
	.brand_global_inner { justify-content:center; text-align:center; }
	.global_text { width:100%; text-align:center; }
	.global_count { justify-content:center; }

	.lineup_list { grid-template-columns:repeat(2, 1fr); max-width:760px; }

}

@media (max-width: 760px){

	.brand_sound_img { min-height:360px; background-position:center center; }
	.feature_item { gap:18px; }

	.global_count { gap:25px; }

	.brand_lineup { padding:70px 24px; }
	.lineup_item { min-height:auto; }

}

@media (max-width: 540px){

	.brand_sound_img { min-height:320px; }
	.feature_item { flex-flow:column; align-items:flex-start; }

	.count_text strong { font-size:clamp(28px, 8vw, 40px); }

	.brand_lineup { padding:60px 20px; }
	.lineup_list { grid-template-columns:1fr; max-width:420px; }

}

@media (max-width: 430px){

	.sound_text h3,
	.global_text h3,
	.contents_title .tit,
	.brand_more_text h3 { font-size:24px; }

	.lineup_item { padding:32px 20px; }

}