@charset "utf-8";

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

/* =========================================================
   Mission & Vision
========================================================= */
.vision_page { width:100%; background:#fff; overflow:hidden; position:relative; }
.vision_page .pc_only { display:block; }
.vision_page .section_label { display:block; margin-bottom:clamp(10px, 1vw, 16px); font-size:clamp(12px, 0.9vw, 15px); font-weight:700; line-height:1; color:#003cac; }
.vision_page .section_heading h2 { font-size:clamp(24px, 2.5vw, 38px); font-weight:700; line-height:1.4; color:#111; letter-spacing:-0.05em; word-break:keep-all; }
.vision_page .section_heading h2 strong { font-weight:700; color:#003cac; }

/* 미션 */
.mission_section { padding:60px 0 clamp(80px, 8vw, 140px); }
.mission_inner { display:flex; align-items:center; width:min(calc(100% - 60px), 1200px); min-height:clamp(400px, 60vw, 800px); margin:0 auto; position:relative; }
.mission_inner::before { content:''; width:calc(50vw + 48%); height:100%; border-radius:0 clamp(25px, 2vw, 40px) clamp(25px, 2vw, 40px) 0; background:#f1f6fc; position:absolute; top:0; right:20%; z-index:0; }
.mission_content { width:55%; position:relative; z-index:2; }
.mission_text { margin-top:clamp(50px, 5vw, 85px); }
.mission_text p { font-size:clamp(16px, 2vw, 24px); font-weight:400; line-height:1.65; color:#333; letter-spacing:-0.045em; word-break:keep-all; }
.mission_text p + p { margin-top:clamp(20px, 3vw, 40px); }
.mission_text strong { font-weight:700; color:#003cac; }
.mission_image { width:40%; aspect-ratio:3 / 4; margin-left:auto; border-radius:clamp(20px, 2vw, 35px); overflow:hidden; position:relative; z-index:2; }
.mission_image img { display:block; width:100%; height:100% !important; object-fit:cover; }

/* 비전 */
.vision_section { padding:0 0 clamp(140px, 15vw, 260px); position:relative; }
.vision_section::before { content:''; width:clamp(280px, 30vw, 560px); aspect-ratio:1 / 1; background-image:radial-gradient(circle, rgba(0,82,189,0.11) 0 clamp(2px, 0.2vw, 4px), transparent clamp(2.5px, 0.25vw, 5px)); background-size:clamp(12px, 1vw, 18px) clamp(12px, 1vw, 18px); -webkit-mask-image:radial-gradient(circle at left bottom, #000 0, transparent 70%); mask-image:radial-gradient(circle at left bottom, #000 0, transparent 70%); position:absolute; bottom:0; left:0; pointer-events:none; }
.vision_section::after { content:''; width:clamp(500px, 60vw, 1000px); aspect-ratio:3/2; background:url('./img/bg2.png') no-repeat right bottom / contain; position:absolute; right:0; bottom:0; transform:translate(20%, 45%); pointer-events:none; z-index:0; }
.vision_inner { display:flex; align-items:flex-start; gap:clamp(50px, 8vw, 125px); width:min(calc(100% - 60px), 1200px); margin:0 auto; position:relative; z-index:2; }
.vision_heading { flex:0 0 clamp(250px, 24vw, 350px); padding-top:clamp(10px, 1.5vw, 25px); }
.value_list { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); flex:1; gap:clamp(12px, 1.2vw, 20px); min-width:0; }
.value_card { display:flex; align-items:flex-end; width:100%; min-width:0; min-height:clamp(245px, 20vw, 310px); padding:clamp(25px, 2.3vw, 38px); border:1px solid #ddd; border-radius:clamp(18px, 1.5vw, 25px); background:#fff; color:#111; text-align:left; overflow:hidden; cursor:pointer; appearance:none; position:relative; isolation:isolate; transition:border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; }
.value_card::before { content:''; background-image:var(--value-image); background-repeat:no-repeat; background-position:center; background-size:cover; opacity:0; position:absolute; inset:0; z-index:-2; transform:scale(1.04); transition:opacity 0.35s ease, transform 0.6s ease; }
.value_card::after { content:''; background:linear-gradient(180deg, rgba(1,22,45,0.05) 15%, rgba(1,21,42,0.78) 100%); opacity:0; position:absolute; inset:0; z-index:-1; transition:opacity 0.35s ease; }
.value_card:focus-visible { outline:3px solid rgba(0,82,189,0.25); outline-offset:3px; }
.value_card.active { border-color:transparent; color:#fff; box-shadow:0 12px 28px rgba(20,43,70,0.15); }
.value_card.active::before { opacity:1; transform:scale(1); }
.value_card.active::after { opacity:1; }
.value_logo { width:clamp(125px, 12vw, 190px); opacity:0.8; position:absolute; top:clamp(22px, 2vw, 35px); right:clamp(20px, 2vw, 32px); transition:opacity 0.15s ease; }
.value_logo img { display:block; width:100%; }
.value_card.active .value_logo { opacity:0; }
.value_content { display:block; width:100%; position:relative; z-index:2; }
.value_title { display:inline-flex; align-items:center; min-height:clamp(32px, 2.8vw, 44px); font-size:clamp(16px, 1.4vw, 21px); font-weight:700; line-height:1.2; color:#003cac; transition:padding 0.5s ease, border-radius 0.3s ease, background-color 0.3s ease, color 0.3s ease; }
.value_description { display:block; margin-top:clamp(14px, 1.5vw, 24px); font-size:clamp(16px, 2vw, 24px); font-weight:500; line-height:1.55; color:#222; letter-spacing:-0.045em; word-break:keep-all; transition:color 0.3s ease; }
.value_card.active .value_title { padding:0 clamp(16px, 1.5vw, 24px); border-radius:100px; background:#003cac; color:#fff; }
.value_card.active .value_description { color:#fff; }

/* 반응형 */
@media (max-width:980px) {
	.mission_section { }
	.mission_inner { width:100%; padding:0 40px; }
	.mission_inner::before { width:70%; right:30%; }
	.mission_image { width:42%; }
	.vision_inner { gap:35px; }
	.vision_heading { flex-basis:185px; }
	.value_card { padding:20px; }
	.vision_section::after { display:none; }
}

@media (max-width:760px) {
	.vision_page .pc_only { display:none; }
	.mission_section { }
	.mission_inner { display:block; min-height:auto; padding:0; }
	.mission_inner::before { width:calc(100% - 30px); height:100%; border-radius:0 25px 25px 0; right:auto; left:0; }
	.mission_content { width:100%; padding:50px 30px; }
	.mission_text { width:95%; }
	.mission_text p { font-size:clamp(14px, 2.2vw, 17px); }
	.mission_image { display:none; }
	.vision_section { padding-bottom:120px; }
	.vision_inner { display:block; }
	.vision_heading { padding-top:0; }
	.value_list { margin-top:45px; }
	.value_card { min-height:240px; }
}

@media (max-width:540px) {
	.mission_section { }
	.mission_content { }
	.mission_text { margin-top:30px; }
	.vision_section { padding-bottom:145px; }
	.vision_inner { }
	.value_list { grid-template-columns:1fr; gap:14px; margin-top:35px; }
	.value_card { justify-content:center; min-height:150px; padding:24px 18px; text-align:center; }
	.value_card:hover { transform:none; }
	.value_logo { width:70px; }
	.value_title { justify-content:center; }
	.value_card.active { min-height:150px; }
	.vision_section::before { width:260px; height:360px; bottom:0; }
}