@charset "utf-8";

/* =================================================================
   1. [공통 레이아웃] 서브 페이지 기본 설정
   ================================================================= */
.sub-contents img { max-width: 100%; height: auto; }

.visual-fix-ratio {
    width: 100%;
    max-width: 800px;
    aspect-ratio: 5 / 3;
    margin: 0 auto 40px;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
.visual-fix-ratio img { width: 100%; height: 100%; object-fit: cover; display: block; }

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin-bottom: 30px;
    border-radius: 10px;
}
.video-container iframe,
.video-container object,
.video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* 서브 비주얼 (배너) */
.sub-visual {
    height: 450px;
    background: var(--navy) url('../img/sub_banner_bg.jpg') no-repeat center/cover;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    color: #fff; margin-top: 75px; position: relative;
}
.sub-visual::before { content: ''; position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); }
.sub-visual .sub-tit { position: relative; z-index: 10; text-align: center; }
.sub-visual h2 { font-size: 42px; font-weight: 800; margin-bottom: -5px; }
.sub-visual p { font-size: 18px; opacity: 0.9; font-weight: 300; letter-spacing: 0.5px; margin: 0 auto;}
.sub-visual .sub-tit .inf{font-size: 15px;}

/* 페이지별 배경 */
.us-page .sub-visual { background-image: url('../img/Generated\ Image\ December\ 18\,\ 2025\ -\ 10_38AM.png'); }
.global-page .sub-visual { background-image: url('../img/passport.png'); }
.about-page .sub-visual {background-image: url('../img/slide1.png');}
.consult-page .sub-visual{background-image: url('../img/consult.png');}
.niw-page .sub-visual{background-image: url('../img/Generated\ Image\ December\ 18\,\ 2025\ -\ 10_38AM.png');}

/* LNB (2차 메뉴바) */
.lnb-wrap { background: #fff; border-bottom: 1px solid #ddd; box-shadow: 0 4px 10px rgba(0,0,0,0.03); position: relative; z-index: 100; }
.lnb { display: flex; justify-content: center; width: 1200px; margin: 0 auto; }
.lnb li { position: relative; }
.lnb a { display: block; padding: 20px 15px; font-size: 15px; color: #777; border-bottom: 3px solid transparent; transition: 0.3s; font-weight: 500; white-space: nowrap; letter-spacing: -0.5px; }
.lnb a:hover, .lnb a.active { color: var(--navy); font-weight: 800; border-bottom-color: var(--navy); }

/* 서브 컨텐츠 공통 */
.sub-container { padding: 80px 0; min-height: 600px; }
.sub-contents { width: 1000px; margin: 0 auto; }

/* 타이틀 및 텍스트 */
.content-tit { font-size: 28px; color: var(--navy); border-bottom: 2px solid var(--navy); padding-bottom: 15px; margin-bottom: 30px; margin-top: 80px; font-weight: 800; }
.content-tit:first-child { margin-top: 0; }
.sub-tit-small { font-size: 20px; color: var(--navy); font-weight: 700; margin-bottom: 20px; text-align: center; display: block; }
.sub-txt { font-weight:500; font-size: 16px; color: #555; line-height: 1.4; margin-bottom: 20px; text-align: justify; }
.check-txt {font-size: 15px; line-height: 1.3; margin-top: -10px; margin-bottom: 20px;}
.check-list li { margin-bottom: 10px; padding-left: 20px; position: relative; font-size: 16px; color: #444; }
.check-list li::before { content: '✔'; position: absolute; left: 0; color: var(--gold); font-weight: bold;}

/* 공통 테이블 & 폼 */
.data-table { width: 100%; border-collapse: collapse; margin-bottom: 30px; table-layout: fixed; }
.data-table th { background: #f4f6f9; color: var(--navy); padding: 15px; border-top: 2px solid var(--navy); border-bottom: 1px solid #ddd; font-weight: 700; }
.data-table td { padding: 15px; border-bottom: 1px solid #eee; color: #444; text-align: center; line-height: 1.6; }

.form-table { width: 100%; border-top: 2px solid var(--navy); border-bottom: 1px solid #ddd; border-collapse: collapse; margin-bottom: 40px; }
.form-table th { background: #f9f9f9; color: var(--navy); font-weight: 700; text-align: left; padding: 20px; border-bottom: 1px solid #eee; width: 180px; vertical-align: middle; }
.form-table td { padding: 15px 20px; border-bottom: 1px solid #eee; color: #555; vertical-align: middle; }

.form-table input[type="text"],
.form-table input[type="tel"],
.form-table input[type="email"],
.form-table input[type="password"],
.form-table select { height: 45px; border: 1px solid #ddd; padding: 0 15px; font-size: 15px; width: 100%; max-width: 400px; border-radius: 4px; }

.form-table input[type="radio"],
.form-table input[type="checkbox"] { width: auto !important; height: auto !important; margin-right: 5px; vertical-align: middle; cursor: pointer; }
.form-table label { margin-right: 15px; cursor: pointer; display: inline-flex; align-items: center; }
.form-table textarea { width: 100%; height: 250px; border: 1px solid #ddd; padding: 15px; font-size: 15px; border-radius: 4px; resize: none; }

.btn-submit { background: var(--navy); color: #fff; border: none; padding: 18px 80px; font-size: 18px; font-weight: 700; border-radius: 4px; cursor: pointer; transition: 0.3s; margin-top: 60px; display: block; margin-left: auto; margin-right: auto; }
.btn-submit:hover { background: var(--gold); }
.file-box { display: flex; align-items: center; gap: 10px; }

/* =================================================================
   2. [US/Global Main] 메인 페이지 카드 스타일
   ================================================================= */
.us-intro-txt { font-size: 18px; color: #444; text-align: center; margin-bottom: 60px; line-height: 1.8; word-break: keep-all; }
.us-intro-txt span { color: var(--navy); font-weight: 700; }

.program-grid { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; }
.program-card { width: calc(50% - 15px); background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden; transition: 0.3s; position: relative; display: flex; flex-direction: column; }
.program-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); border-color: var(--navy); }
.card-head { height: 200px; background: #f4f6f9; position: relative; overflow: hidden; border-bottom: 1px solid #eee; }
.card-head img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.program-card:hover .card-head img { transform: scale(1.1); }
.card-head::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 3px; background: var(--gold); transition: 0.5s; z-index: 2; }
.program-card:hover .card-head::after { width: 100%; }
.card-body { padding: 30px; flex: 1; display: flex; flex-direction: column; }
.card-body h4 { font-size: 24px; font-weight: 700; color: var(--dark); margin-bottom: 15px; }
.card-body h4 span { font-size: 16px; color: var(--gold); font-weight: 500; margin-left: 5px; }
.card-body p { font-size: 15px; color: #666; line-height: 1.6; margin-bottom: 25px; flex: 1; word-break: keep-all;}
.btn-link { display: inline-block; padding: 10px 0; font-size: 15px; font-weight: 600; color: var(--navy); border-bottom: 1px solid #ddd; transition: 0.3s; width: fit-content; }
.program-card:hover .btn-link { color: var(--gold); border-bottom-color: var(--gold); }

.bottom-banner { margin-top: 80px; background: var(--navy); padding: 40px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; color: #fff; }
.bb-txt h3 { font-size: 24px; font-weight: 700; margin-bottom: 10px; }
.bb-btn { background: var(--gold); color: #fff; padding: 15px 40px; border-radius: 4px; font-weight: 700; transition: 0.3s; white-space: nowrap; }
.bb-btn:hover { background: #fff; color: var(--navy); }

/* =================================================================
   3. [EB-3 및 상세 페이지] 전용 스타일
   ================================================================= */
.eb-intro { display: flex; align-items: center; gap: 40px; margin-bottom: 80px; }
.intro-img { width: 45%; border-radius: 10px; overflow: hidden; box-shadow: 10px 10px 0 var(--gray); height: 280px; }
.intro-img img { width: 100%; display: block;}
.intro-txt { width: 55%; }
.intro-txt .content-tit { margin-top: 0; border: none; padding-bottom: 0; margin-bottom: 20px; }
.intro-txt p { font-size: 16px; color: #555; line-height: 1.6; margin-bottom: 20px; word-break: keep-all; }
.intro-txt .highlight { background: #f4f6f9; padding: 20px; border-radius: 8px; border-left: 5px solid var(--gold); font-weight: 700; color: var(--navy); }
.intro-txt .highlight p{font-size: 13px;font-weight: 500; }

.eb-card-grid { display: flex; gap: 20px; margin-bottom: 80px; }
.eb-card { flex: 1; background: #fff; border: 1px solid #bebebe; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: 0.3s; }
.eb-card:hover { transform: translateY(-5px); border-color: var(--navy); }
.card-top { background: var(--navy); padding: 20px; text-align: center; color: #fff; }
.type-badge { display: inline-block; background: var(--gold); padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; margin-bottom: 5px; }
.card-top h4 { font-size: 20px; font-weight: 800; margin: 0; }
.card-desc { padding: 20px; text-align: center; }
.card-desc p { height: 50px; display: flex; align-items: center; justify-content: center; font-size: 15px; margin-bottom: 15px; line-height: 1.4; }
.card-feat li { font-size: 14px; color: #666; padding: 5px 0; border-bottom: 1px solid #f5f5f5; }
.card-feat li i { color: var(--gold); margin-right: 5px; }

.benefit-wrap { display: flex; gap: 20px; margin-bottom: 30px; }
.benefit-item { flex: 1; background: #f9f9fb; padding: 30px 20px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px solid #eee; }
.benefit-item .icon-box { width: 60px; height: 60px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--navy); margin-bottom: 15px; box-shadow: 0 5px 10px rgba(0,0,0,0.05); }
.benefit-item dl dt { font-size: 18px; font-weight: 800; color: var(--navy); margin-bottom: 10px; }
.benefit-item dl dd { font-size: 14px; color: #555; line-height: 1.4; word-break: keep-all; }
.benefit-item strong {color: navy;}
.benefit-wrap p strong {color: navy;}

/* 밖으로 뺀 설명글 박스 디자인 */
.prem-info-box {
    margin-top: -15px;
    margin-bottom: 50px;     /* 다음 섹션과의 간격 */
    text-align: left;      /* 텍스트 가운데 정렬 */
    word-break: keep-all;    /* 단어 단위 줄바꿈 */
    line-height: 1.3;
    font-size: 12px;
}

.prem-info-box strong {
    color: var(--navy);
    font-weight: 500;
}


.qual-box { background: #fff; border: 1px solid #eee; padding: 30px; border-radius: 10px; margin-bottom: 80px; }
.check-list.two-col { display: flex; flex-wrap: wrap; }
.check-list.two-col li { width: 50%; box-sizing: border-box; padding-right: 20px; margin-bottom: 10px; }

.process-flow { display: flex; align-items: center; justify-content: space-between; background: #f9f9fb; padding: 30px; border-radius: 10px; margin-bottom: 80px; }
.step-item { text-align: center; width: 18%; position: relative; }
.step-num { width: 40px; height: 40px; border: 2px solid var(--navy); color: var(--navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; font-weight: 800; background: #fff; }
.step-item.final .step-num { background: var(--navy); color: #fff; }
.step-item strong { display: block; font-size: 16px; color: #333; margin-bottom: 5px; }
.step-item p { font-size: 13px; color: var(--gold); font-weight: 700; }
.step-arrow { color: #ccc; font-size: 20px; }

/* =================================================================
   4. [해외 시민권/바누아투/회사소개/상담 등 기타 스타일]
   ================================================================= */
.van-intro-wrap { margin-bottom: 80px; text-align: center; }
.van-main-tit { font-size: 40px; color: var(--navy); font-weight: 800; line-height: 1.2; margin-bottom: 15px; letter-spacing: 2px; }
.van-sub-desc { font-size: 18px; color: #555; margin-bottom: 40px; }
.van-visual-box { position: relative; width: 100%; max-width: 600px; aspect-ratio: 5 / 3; margin: 0 auto 40px; border-radius: 15px; overflow: hidden; box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.van-visual-box img { width: 100%; height: 100%; display: block; object-fit: cover; }
.country-info { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(10, 43, 94, 0.85); display: flex; justify-content: space-around; padding: 20px 0; backdrop-filter: blur(5px); }
.country-info div { color: #fff; text-align: center; font-size: 15px; font-weight: 500; }
.country-info div span { display: block; font-size: 12px; color: var(--gold); margin-bottom: 5px; font-weight: 400; opacity: 0.8; }
.van-txt-box { background: #f9f9fb; padding: 30px; border-radius: 10px; text-align: center; border: 1px solid #eee; }
.van-txt-box h4 { font-size: 20px; color: var(--navy); margin-bottom: 10px; font-weight: 700; }
.van-txt-box p { font-size: 16px; color: #555; line-height: 1.6; word-break: keep-all; }
.van-benefit-grid { display: flex; flex-wrap: nowrap; gap: 20px; margin-bottom: 80px; }
.van-b-item { flex: 1; background: #fff; border: 1px solid #e0e0e0; padding: 30px 20px; border-radius: 15px; text-align: center; transition: 0.3s; min-width: 0; }
.van-b-item:hover { border-color: var(--navy); transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.van-b-item i { font-size: 40px; color: var(--gold); margin-bottom: 20px; display: block; }
.van-b-item strong { display: block; font-size: 18px; color: var(--navy); margin-bottom: 10px; word-break: keep-all; }
.van-b-item p { font-size: 14px; color: #666; line-height: 1.4; word-break: keep-all; display: block; }
.van-price-wrap { display: flex; gap: 20px; justify-content: center; margin-bottom: 20px; align-items: flex-end; }
.price-card { width: 30%; background: #fff; border: 1px solid #ddd; border-radius: 10px; text-align: center; padding: 30px 20px; transition: 0.3s; position: relative; }
.price-card.recommended { border: 2px solid var(--navy); transform: scale(1.05); z-index: 2; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.rec-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; padding: 5px 15px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.p-head { font-size: 16px; color: #666; margin-bottom: 15px; font-weight: 600; }
.p-amount { font-size: 32px; color: var(--navy); font-weight: 800; margin-bottom: 5px; }
.p-amount-long { font-size: 27px; color: var(--navy); font-weight: 800; margin-bottom: 5px; line-height: 1.2; }
.p-desc { font-size: 14px; color: #888; }
.van-note { text-align: center; font-size: 13px; color: #999; margin-bottom: 80px; }
.condition-wrap { background: #f9f9fb; border: 1px solid #eee; border-radius: 10px; padding: 30px; margin-bottom: 40px; }
.condition-wrap .check-list li { margin-bottom: 12px; font-size: 16px; color: #444; }
.condition-wrap .check-list li strong { color: var(--navy); margin-right: 5px; }
.timeline-wrap { position: relative; max-width: 800px; margin: 0 auto 80px; padding-left: 50px; }
.timeline-wrap::before { content: ''; position: absolute; left: 15px; top: 10px; bottom: 10px; width: 2px; background: #e0e0e0; }
.tl-item { position: relative; margin-bottom: 40px; }
.tl-item:last-child { margin-bottom: 0; }
.tl-dot { position: absolute; left: -44px; top: 0; width: 20px; height: 20px; background: #fff; border: 4px solid var(--navy); border-radius: 50%; z-index: 2; }
.tl-item.final .tl-dot { background: var(--gold); border-color: var(--gold); }
.tl-content { background: #fff; padding: 25px; border-radius: 10px; border: 1px solid #eee; box-shadow: 0 5px 10px rgba(0,0,0,0.03); text-align: left; }
.tl-time { display: inline-block; background: #f0f4ff; color: var(--navy); font-size: 12px; padding: 3px 8px; border-radius: 4px; margin-bottom: 10px; font-weight: 700; }
.tl-content strong { display: block; font-size: 18px; color: #333; margin-bottom: 5px; }
.tl-content p { font-size: 14px; color: #666; margin: 0; }

.van-slider-wrap { margin-bottom: 80px; position: relative; padding: 0 40px; }
.case-img-box { width: 100%; height: 400px; border: 1px solid #eee; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; }
.case-img-box img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(1.0) contrast(1.0); }
.van-slider-wrap .swiper-button-next, .van-slider-wrap .swiper-button-prev { color: var(--navy); width: 30px; height: 30px; }
.van-slider-wrap .swiper-button-next::after, .van-slider-wrap .swiper-button-prev::after { font-size: 24px; font-weight: bold; }
.van-slider-wrap .swiper-pagination-bullet-active { background: var(--navy); }

.ceo-section, .staff-section { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; width: 100%; margin-bottom: 100px; }
.ceo-img, .staff-img-wrap { width: 100%; max-width: 800px; margin: 0 auto; }
.ceo-txt-wrap, .staff-msg { width: 100%; max-width: 800px; padding: 0; box-sizing: border-box; }
.ceo-slogan { text-align: center; margin-bottom: 30px; }
.ceo-msg p, .staff-msg span { text-align: justify; word-break: keep-all; }
.ceo-msg p strong {font-size: 20px; margin-top: 5px; margin-bottom:5px ;}
.ceo-sign { margin-top: 30px; }

.cert-grid { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 80px; }
.cert-card { width: calc(25% - 15px); background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; padding: 15px; text-align: center; transition: 0.3s; box-shadow: 0 5px 10px rgba(0,0,0,0.03); }
.cert-card:hover { transform: translateY(-5px); border-color: var(--navy); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.cert-img { width: 100%; aspect-ratio: 1 / 1.414; background: #f9f9fb; margin-bottom: 15px; overflow: hidden; border: 1px solid #eee; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.cert-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cert-name { font-size: 16px; color: var(--navy); font-weight: 700; margin: 0; letter-spacing: -0.5px; word-break: keep-all; }

.privacy-wrap { margin-bottom: 40px; border: 1px solid #ddd; border-radius: 4px; padding: 20px; background: #fff; }
.privacy-box { width: 100%; height: 150px; overflow-y: auto; background: #f9f9fb; padding: 15px; border: 1px solid #eee; font-size: 13px; color: #666; line-height: 1.6; margin-bottom: 15px; box-sizing: border-box; }
.privacy-box::-webkit-scrollbar { width: 8px; }
.privacy-box::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 4px; }
.privacy-box::-webkit-scrollbar-track { background-color: #f1f1f1; }
.privacy-check { text-align: right; font-size: 15px; color: var(--navy); font-weight: 600; }
.privacy-check input[type="checkbox"] { margin-right: 8px; transform: translateY(1px); }

.mo-only { display: none; }

/* =================================================================
   5. [EB-3 상세 페이지 추가 섹션 스타일 - 수정됨 (가로 배치)]
   ================================================================= */
.added-section-wrap { margin-bottom: 80px; border-bottom: 1px solid #eee; padding-bottom: 60px; }

/* [수정] 수속 기간 및 특징 박스 (가로 배치) */
.eb-feature-box { background: #f4f6fc; border-radius: 10px; padding: 30px; text-align: center; margin-bottom: 60px; border: 1px solid #e1e7f5; }
.eb-feature-box h3 { font-size: 20px; color: var(--navy); margin-bottom: 20px; font-weight: 800; }
/* 리스트 가로 배치 */
.eb-feature-box ul { display: flex; justify-content: center; gap: 40px; margin-bottom: 15px; flex-wrap: wrap; }
.eb-feature-box ul li { font-size: 16px; color: #333; margin-bottom: 0; position: relative; padding-left: 12px; font-weight: 600; }
.eb-feature-box ul li::before { content: '•'; position: absolute; left: 0; color: var(--navy); font-weight: bold; }
.eb-feature-box .caption { font-size: 13px; color: #888; line-height: 1.5; margin-top: 10px; }

/* 3대 핵심 전략 (기존 가로 배치 유지, 간격만 조정) */
.eb-strategy-sec { margin-bottom: 80px; text-align: center; }
.strategy-intro { font-size: 16px; line-height: 1.7; color: #555; margin-bottom: 40px; word-break: keep-all; }
.strategy-intro strong { color: var(--navy); }
.strategy-grid { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 40px; }
.strategy-item { flex: 1; background: #fff; padding: 0 10px; text-align: center; }
.s-icon { font-size: 45px; color: var(--navy); margin-bottom: 15px; height: 50px; display: flex; align-items: center; justify-content: center; }
.strategy-item h4 { font-size: 22px; font-weight: 800; color: var(--navy); margin-bottom: 10px; }
.strategy-item p { font-size: 15px; color: #666; line-height: 1.5; word-break: keep-all; }
.strategy-slogan { font-size: 18px; color: #333; padding: 25px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; width: 100%; font-weight: 500; line-height: 1.6; }
.strategy-slogan span { color: var(--navy); font-weight: 800; text-decoration: underline; text-underline-position: under; }

/* [수정] 체크포인트 박스 (3단 가로 배치) */
.eb-checkpoint-box { margin-top: 80px; text-align: center; }
.eb-checkpoint-box h3 { font-size: 26px; font-weight: 800; margin-bottom: 10px; color: #333; }
.cp-sub { font-size: 16px; color: #666; margin-bottom: 30px; line-height: 1.6; word-break: keep-all; }
.cp-content { background: #eef2f9; border-radius: 15px; padding: 40px; text-align: center; }
.cp-content h4 { font-size: 20px; color: var(--navy); margin-bottom: 30px; font-weight: 700; display: inline-block; }

/* 리스트를 가로 3단 그리드로 변경 */
.cp-list { display: flex; justify-content: space-between; gap: 15px; max-width: 100%; margin: 0 auto; text-align: center; }
.cp-list li { 
    flex: 1; 
    display: flex; 
    flex-direction: column; /* 아이콘 위, 텍스트 아래 */
    align-items: center; 
    justify-content: flex-start;
    gap: 15px; 
    background: #fff; 
    padding: 25px 15px; 
    border-radius: 10px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.03); 
    transition: 0.3s;
}
.cp-list li:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.08); }

.cp-list li i { font-size: 32px; color: #ccc; margin-bottom: 5px; }
.cp-list li i.fa-check-square { color: var(--navy); } 
.cp-list .txt { display: flex; flex-direction: column; width: 100%; }
.cp-list .txt strong { font-size: 18px; color: #333; margin-bottom: 8px; word-break: keep-all; }
.cp-list .txt span { font-size: 14px; color: #777; line-height: 1.4; word-break: keep-all; }
/* =================================================================
   [EB-3 접근 방식 섹션 스타일]
   ================================================================= */
   .eb-approach-sec {
    text-align: center;
    margin-bottom: 100px;
    padding-bottom: 60px;
    border-bottom: 1px solid #eee;
}

/* 제목 스타일 */
.eb-approach-sec h3 {
    font-size: 28px;
    font-weight: 800;
    color: #333;
    margin-bottom: 20px;
}

/* 상단 슬로건 */
.app-slogan {
    font-size: 18px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 50px;
}
/* 노란색 밑줄 효과 */
.highlight-line {
    font-weight: 700;
    color: #333;
    box-shadow: inset 0 -10px 0 rgba(255, 225, 0, 0.4); /* 형광펜 밑줄 */
}

/* 컨텐츠 영역 */
.app-content {
    max-width: 800px;
    margin: 0 auto 50px;
    text-align: left;
}
.txt-item {
    margin-bottom: 30px;
}
.txt-item strong {
    display: block;
    font-size: 18px;
    color: var(--navy);
    margin-bottom: 8px;
    font-weight: 700;
}
.txt-item p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    word-break: keep-all;
    padding-left: 5px;
}

/* [이미지 영역] */
.app-process-img {
    width: 100%;
    margin: 40px 0;
    border-radius: 10px;
    overflow: hidden;
    /* 이미지가 없을 때 영역 확보를 위해 배경색 지정 (선택사항) */
    background: #f9f9fb; 
}
.app-process-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* 하단 철학 문구 */
.app-footer {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
    font-weight: 500;
    background: #fdfdfd;
    padding: 30px;
    border-radius: 10px;
    border: 1px solid #eee;
    display: inline-block;
}
/* 노란색 배경 형광펜 효과 */
.highlight-bg {
    background-color: #fff5b1; /* 연한 노랑 */
    padding: 0 4px;
    font-weight: 800;
    color: #333;
}

/* =================================================================
   [미디어 섹션: 유튜브 & 슬라이드]
   ================================================================= */
/* 1. 유튜브 컨테이너 */
.media-section { margin-bottom: 80px; }
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 비율 유지 (중요) */
    height: 0;
    overflow: hidden;
    border-radius: 10px;
    background: #000;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.video-container iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

/* =================================================================
   2. [최종 수정] 이미지 슬라이드 (Swiper) - 버튼 오류 및 레이아웃 해결
   ================================================================= */
   .gallery-section { 
    margin-bottom: 100px; 
    position: relative; 
}

.swiper {
    width: 100%;
    /* 슬라이드가 넘치는 것을 막아줌 */
    overflow: hidden; 
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    /* 버튼이 슬라이드 안에 갇히지 않도록 설정 */
    position: relative; 
}

.swiper-wrapper {
    /* 기본 플렉스 설정 유지 */
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
}

.swiper-slide {
    /* [중요] width: auto; 삭제함 -> 자바스크립트 계산(3개씩 보이기)에 맡김 */
    flex-shrink: 0;
    display: block;
    height: 100%;
    position: relative;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 300px; /* 이미지 높이 통일 */
    object-fit: cover;
}

/* =================================================================
   [수정] 슬라이드 이미지 밝기 문제 해결 (강제 적용)
   ================================================================= */
   .swiper-slide img {
    filter: none !important;          /* 흐림/어두움 효과 제거 */
    -webkit-filter: none !important;  /* 구형 브라우저 호환 */
    opacity: 1 !important;            /* 투명도 100% (선명하게) */
    mask-image: none !important;      /* 마스크 제거 */
}

/* 혹시 이미지 위에 검은색 가림막(Overlay)이 있다면 제거 */
.swiper-slide::after,
.swiper-slide::before {
    display: none !important;
    background: none !important;
}

/* -----------------------------------------------------------------
   화살표 디자인 (배경 제거 & 클릭 문제 해결)
   ----------------------------------------------------------------- */
.swiper-button-next, .swiper-button-prev {
    /* [핵심] 버튼이 이미지보다 위에 오도록 순서(z-index)를 높임 */
    z-index: 100 !important; 
    cursor: pointer !important; /* 마우스 올리면 손가락 모양 */
    
    background: transparent !important; /* 배경 원 제거 */
    box-shadow: none !important;
    border: none !important;
    
    color: #999 !important;     /* 평소 색상 (회색) */
    width: 50px !important;     /* 클릭 영역 확보 */
    height: 100% !important;    /* 위아래 꽉 차게 */
    top: 0 !important;
    margin-top: 0 !important;
    
    opacity: 0;                 /* 평소엔 안 보임 */
    transition: all 0.3s ease;
}

/* 아이콘 크기와 두께 */
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 40px !important;
    font-weight: 100 !important;
}

/* 마우스 올렸을 때 반응 */
.gallery-section:hover .swiper-button-next,
.gallery-section:hover .swiper-button-prev {
    opacity: 0.5; /* 슬라이드 근처가면 살짝 보임 */
}

.swiper-button-next:hover, .swiper-button-prev:hover {
    opacity: 1 !important; /* 버튼 위에 올리면 진하게 */
    color: var(--navy) !important;
}

/* 위치 고정 */
.swiper-button-prev { left: 0 !important; }
.swiper-button-next { right: 0 !important; }


/* [모바일] 터치로 조작하므로 화살표 숨김 */
@media screen and (max-width: 768px) {
    .swiper-button-next, .swiper-button-prev { display: none !important; }
}


/* 모바일 대응 */
@media screen and (max-width: 768px) {
    .swiper-button-next, .swiper-button-prev { display: none; }
}

/* =================================================================
   [NEW] 왜 성공이민 MCC인가요? 섹션 스타일
   ================================================================= */
   .why-mcc-section {
    padding: 30px 0;
    text-align: center;
    color: #333;
}

/* 제목 중앙 정렬 커스텀 */
.content-tit.center-tit {
    text-align: center;
    border-bottom: none;
    font-size: 36px;
    margin-bottom: 50px;
}

.why-txt-wrap .main-desc {
    font-size: 18px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 40px;
    word-break: keep-all;
}

.why-txt-wrap .underline-text {
    border-bottom: 2px solid #333;
    font-weight: 600;
    padding-bottom: 2px;
}

.why-emphasis {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 50px;
}

/* 체크리스트 스타일 */
.why-check-list {
    display: inline-block; /* 중앙 정렬을 위해 인라인 블록 */
    text-align: left;      /* 내부 텍스트는 왼쪽 정렬 */
    margin: 0 auto;
    max-width: 700px;
}

.why-check-list li {
    font-size: 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.6;
    color: #333;
}

.why-check-list li i {
    font-size: 20px;
    color: #333;       /* 이미지처럼 검은색 체크 */
    margin-top: 5px;   /* 줄 간격에 맞춰 아이콘 위치 조정 */
}

.why-check-list li strong {
    font-weight: 700;
    color: #000;
}

/* 세로 선 디자인 */
.vertical-line {
    width: 1px;
    height: 80px;
    background: #ccc;
    margin: 60px auto;
}

/* 하단 메시지 영역 */
.why-bottom-msg h3 {
    font-size: 32px;
    font-weight: 800;
    color: #000;
    margin-bottom: 40px;
    line-height: 1.4;
    word-break: keep-all;
}

.why-bottom-msg p {
    font-size: 18px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 40px;
}

.why-bottom-msg .final-slogan {
    font-size: 20px;
    color: var(--navy);
    font-weight: 700;
    margin-bottom: 0;
}

.mo-break { display: none; } /* PC에선 줄바꿈 안 함 */


/* [모바일 반응형] */
@media screen and (max-width: 768px) {
    .content-tit.center-tit { font-size: 26px; margin-bottom: 30px; }
    
    .why-txt-wrap .main-desc { font-size: 15px; }
    .why-emphasis { font-size: 18px; margin-bottom: 30px; }
    
    .why-check-list { display: block; width: 100%; box-sizing: border-box; }
    .why-check-list li { font-size: 15px; }
    .why-check-list li i { font-size: 16px; margin-top: 3px; }
    
    .vertical-line { height: 50px; margin: 40px auto; }
    
    .why-bottom-msg h3 { font-size: 24px; }
    .mo-break { display: block; } /* 모바일에서 제목 자연스럽게 줄바꿈 */
    .why-bottom-msg p { font-size: 15px; }
    .why-bottom-msg .final-slogan { font-size: 16px; }
}

/* =================================================================
   [수정됨] 하단 배너 및 버튼 그룹 스타일
   ================================================================= */
   .bottom-banner { 
    margin-top: 80px; 
    background: var(--navy); 
    padding: 40px 50px; /* 좌우 여백 살짝 늘림 */
    border-radius: 8px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    color: #fff; 
}

.bb-txt h3 { 
    font-size: 24px; 
    font-weight: 700; 
    margin-bottom: 10px; 
    color: #fff;
}

/* 버튼들을 감싸는 그룹 (가로 배치) */
.bb-btn-group {
    display: flex;
    gap: 15px; /* 버튼 사이 간격 */
}

/* 버튼 공통 스타일 */
.bb-btn { 
    background: var(--gold); 
    color: #fff; 
    padding: 15px 30px; 
    border-radius: 4px; 
    font-weight: 700; 
    transition: 0.3s; 
    white-space: nowrap; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

/* 아이콘 간격 */
.bb-btn i {
    margin-right: 8px;
    font-size: 14px;
}

/* 호버 효과 */
.bb-btn:hover { 
    background: #fff; 
    color: var(--navy); 
    transform: translateY(-2px); /* 살짝 떠오르는 효과 */
}

/* (옵션) 전화 버튼 색상을 다르게 하고 싶다면 아래 주석 해제 */
/*
.bb-btn.call {
    background: #fff;
    color: var(--navy);
}
.bb-btn.call:hover {
    background: #ddd;
}
*/

/* [모바일 반응형] 화면 좁아지면 버튼 세로로 쌓기 */
@media screen and (max-width: 768px) {
    .bottom-banner { 
        flex-direction: column; 
        padding: 30px 20px; 
        text-align: center; 
        gap: 30px; 
    }
    
    .bb-btn-group {
        flex-direction: column; /* 세로 배치 */
        width: 100%;
        gap: 10px;
    }

    .bb-btn { 
        width: 100%; /* 버튼 꽉 차게 */
        box-sizing: border-box;
    }
}


/* =================================================================
   [Mobile Responsive] 모바일 반응형 통합
   ================================================================= */
@media screen and (max-width: 1024px) {
    .inner { width: 96%; }
    .sub-contents { width: 92%; margin: 0 auto; } 
    .lnb { width: 100%; }
}

@media screen and (max-width: 768px) {
    .header { height: 60px; padding: 0; }
    .header .inner { padding: 0 20px; justify-content: space-between; }
    .logo img { height: 24px; }
    .nav-toggle { display: block; background: none; border: none; font-size: 24px; color: var(--navy); cursor: pointer; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); z-index: 1002; }
    .lang-dropdown { right: 60px; top: 50%; transform: translateY(-50%); }
    .current-lang { padding: 4px 8px; font-size: 12px; }
    .gnb { position: fixed; top: 60px; left: 0; width: 100%; height: calc(100vh - 60px); background: #fff; display: none; padding: 0; border-top: 1px solid #eee; overflow-y: auto; }
    .gnb.active { display: block; }
    .gnb .main-menu { flex-direction: column; height: auto; gap: 0; }
    .gnb .main-menu > li { width: 100%; border-bottom: 1px solid #f5f5f5; }
    .gnb .main-menu > li > a { display: block; padding: 15px 20px; width: 100%; font-size: 16px; }
    .sub-menu { position: static; display: block; width: 100%; transform: none; box-shadow: none; border: none; background: #f8f9fa; padding: 10px 0; }
    .sub-menu li a { padding: 8px 40px; font-size: 14px; text-align: left; color: #666; }

    .sub-visual { height: 250px; margin-top: 60px; }
    .sub-visual h2 { font-size: 32px; }
    .sub-visual p { font-size: 14px; width: 90%; word-break: keep-all; line-height: 1.4; }
    .lnb-wrap { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    .lnb { width: max-content; display: flex; }
    .lnb a { padding: 15px 20px; font-size: 14px; }
    .sub-container { padding: 50px 0; }
    .sub-contents { width: 100%; padding: 0 20px; box-sizing: border-box; }
    .content-tit { font-size: 24px; margin-top: 40px; }
    .sub-tit-small { font-size: 18px; margin-bottom: 15px; }
    .sub-txt { font-size: 15px; text-align: left; } 
    .condition-wrap { padding: 20px; }
    .condition-wrap .check-list li { font-size: 14px; }

    .ceo-section { flex-direction: column; gap: 30px; }
    .ceo-img { width: 100%; margin: 0; height: auto; }
    .ceo-txt-wrap { padding-top: 0; }
    .ceo-slogan { font-size: 26px; word-break: keep-all; }
    .ceo-sign { margin-top: 30px; }
    .ceo-msg { margin-top: 30px;}
    .ceo-msg p strong {letter-spacing: -1.2px; margin-top: 10px;}
    
    .program-grid { flex-direction: row; flex-wrap: wrap; gap: 30px; }
    .program-card { width: calc(50% - 15px); margin-bottom: 10px; }
    .card-head { height: 120px; }
    .card-body { padding: 15px; }
    .card-body h4 { font-size: 15px; margin-bottom: 8px; letter-spacing: -0.5px; }
    .card-body h4 span { display: block; font-size: 11px; margin-top: 2px; margin-left: 0; }
    .card-body p { font-size: 12px; line-height: 1.3; margin-bottom: 10px; height: 48px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
    .btn-link { font-size: 12px; padding: 5px 0; }

    .global-page .program-grid { flex-direction: row; flex-wrap: wrap; gap: 10px; }
    .global-page .program-card { width: calc(50% - 5px); margin-bottom: 0; }
    .global-page .card-head { height: 120px; } 
    .global-page .card-body { padding: 15px; } 
    .global-page .card-body h4 { font-size: 15px; margin-bottom: 5px; }
    .global-page .card-body h4 span { display: block; font-size: 11px; margin-top: 2px; margin-left: 0; }
    .global-page .card-body p { font-size: 12px; line-height: 1.3; margin-bottom: 10px; height: 48px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
    .global-page .btn-link { font-size: 12px; padding: 5px 0; }

    .data-table { display: table; width: 100%; table-layout: fixed; white-space: normal; word-break: keep-all; }
    .data-table th, .data-table td { padding: 10px 4px; font-size: 13px; letter-spacing: -0.5px; height: auto; }
    .form-table, .form-table tbody, .form-table tr, .form-table th, .form-table td { display: block; width: 100%; }
    .form-table th { padding: 15px 0 5px 0; border-bottom: none; background: transparent; font-size: 15px; }
    .form-table td { padding: 0 0 20px 0; border-bottom: 1px solid #eee; }
    /* [수정] 모바일 입력창 폰트 확대 (16px 이상이어야 작게 안 보임 & 아이폰 자동확대 방지) */
    .form-table select,
    .form-table input, 
    .form-table textarea {
        font-size: 16px !important;       /* 글자 크기 16px로 고정 (무조건 적용) */
        height: 50px !important;          /* 높이도 50px로 키워서 터치하기 쉽게 */
        padding: 0 15px !important;       /* 내부 여백 확보 */
        line-height: 1.5 !important;      /* 줄 간격 넉넉하게 */
    }

    /* 드롭다운 눌렀을 때 나오는 옵션 글자들도 키움 */
    .form-table select option {
        font-size: 16px !important;
        padding: 10px;
    }
    .bottom-banner { flex-direction: column; padding: 10px 20px; text-align: center; gap: 20px; margin-top: 50px; }
    .bb-btn { width: 100%; }
    .side-widget { display: none; }

    .eb-intro { flex-direction: column; gap: 20px; }
    .intro-img { width: 100%; height: 200px; }
    .intro-img img { height: 100%; object-fit: cover; }
    .intro-txt { width: 100%; }
    .eb-card-grid { display: flex; flex-wrap: wrap; gap: 10px; }
    .eb-card { flex: none; width: calc(50% - 5px); }
    .eb-card .card-desc p { height: 40px; font-size: 13px; margin-bottom: 10px; }
    .benefit-wrap { display: flex; flex-wrap: wrap; gap: 10px; }
    .benefit-item { flex: none; width: calc(50% - 5px); padding: 20px 10px; }
    .benefit-item .icon-box { width: 45px; height: 45px; font-size: 18px; margin-bottom: 10px; }
    .benefit-item dl dt { font-size: 15px; }
    .benefit-item dl dd { font-size: 13px; }
    .check-list.two-col li { width: 100%; margin-bottom: 5px; }
    .process-flow { display: flex; flex-wrap: wrap; gap: 10px; padding: 15px; }
    .step-item { width: calc(50% - 5px); background: #fff; padding: 15px; border-radius: 8px; text-align: left; display: flex; align-items: center; gap: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
    .step-num { margin: 0; width: 30px; height: 30px; font-size: 12px; flex-shrink: 0; }
    .step-arrow { display: none; }
    .step-item strong { font-size: 14px; margin: 0; }
    .step-item p { display: none; }

    .van-main-tit { font-size: 28px; }
    .van-visual-box { height: auto; }
    .van-visual-box img { height: 250px; }
    .country-info { display: none; }
    .van-benefit-grid { display: flex; flex-wrap: nowrap !important; gap: 4px; }
    .van-b-item { flex: 1; width: 25%; padding: 12px 2px !important; min-width: 0; border-radius: 6px; }
    .van-b-item i { font-size: 20px !important; margin-bottom: 5px !important; }
    .van-b-item strong { font-size: 10px !important; line-height: 1.2; height: 24px; display: flex; align-items: center; justify-content: center; margin-bottom: 0; word-break: keep-all; }
    .van-b-item p { display: none !important; }

    .van-price-wrap { flex-direction: row; align-items: flex-end; gap: 5px; margin-top: 20px; }
    .price-card { width: 33.33%; transform: none !important; margin-bottom: 0; padding: 15px 2px; border-radius: 6px; }
    .p-head { font-size: 11px; margin-bottom: 5px; letter-spacing: -1px; white-space: nowrap; }
    .p-amount { font-size: 20px !important; line-height: 1.4; margin-bottom: 3px; letter-spacing: -0.5px; }
    .p-amount-long { font-size: 17px !important; line-height: 1.2; margin-bottom: 3px; letter-spacing: -0.5px; }
    .p-desc { font-size: 10px; letter-spacing: -0.5px; }
    .rec-badge { font-size: 10px; padding: 2px 6px; top: -12px; white-space: nowrap; }

    .timeline-wrap { padding-left: 30px; }
    .timeline-wrap::before { left: 9px; }
    .tl-dot { left: -28px; width: 16px; height: 16px; border-width: 3px; }

    .van-slider-wrap { padding: 0; }
    .case-img-box { height: 300px; }
    .van-slider-wrap .swiper-button-next, .van-slider-wrap .swiper-button-prev { display: none; }
    .mo-only { display: block; }
    
    .cert-grid { flex-wrap: wrap; gap: 10px; }
    .cert-card { width: calc(50% - 5px); padding: 10px; }
    .cert-name { font-size: 13px; }

    /* [NEW] EB-3 추가 섹션 모바일 대응 */
    /* 가로 배치된 리스트를 모바일에서는 세로로 돌림 */
    .eb-feature-box ul { flex-direction: column; gap: 10px; align-items: center; }
    .eb-feature-box h3 { font-size: 18px; }
    
    .strategy-grid { flex-direction: column; gap: 20px; }
    .strategy-item { padding: 20px; background: #f9f9fb; }
    .strategy-item h4 { font-size: 20px; margin-bottom: 10px; }
    .strategy-slogan { font-size: 15px; line-height: 1.5; word-break: keep-all; }

    .eb-checkpoint-box h3 { font-size: 22px; word-break: keep-all; }
    .cp-content { padding: 20px; }
    
    /* 3단 가로 카드를 모바일에서는 세로로 돌림 */
    .cp-list { flex-direction: column; gap: 15px; }
    .cp-list li { width: 100%; box-sizing: border-box; flex-direction: row; align-items: flex-start; text-align: left; }
    .cp-list li i { margin-bottom: 0; margin-top: 3px; font-size: 24px; }
    .cp-list .txt { align-items: flex-start; }
    .cp-list .txt strong { font-size: 15px; }
    .cp-list .txt span { font-size: 13px; }
    .eb-approach-sec h3 { font-size: 24px; }
    .app-slogan { font-size: 15px; }
    .txt-item strong { font-size: 16px; }
    .txt-item p { font-size: 14px; }
    .app-footer { font-size: 14px; padding: 20px; width: 90%; }
    .swiper-button-next,
    .swiper-button-prev {
        display: none; /* 모바일에서는 화살표 숨김 (터치로 조작) */
    }
}

/* =================================================================
   [최종 수정] NIW 전략 섹션 - SVG 라인 적용 (완벽 연결)
   ================================================================= */
   .niw-strategy-wrap {
    margin-bottom: 80px;
    text-align: center;
    padding: 0 10px;
}

.strategy-tit {
    font-size: 32px;
    font-weight: 800;
    color: #333;
    margin-bottom: 25px;
}
.strategy-tit .blue-point { color: var(--navy); }

.strategy-desc {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 50px;
    word-break: keep-all;
}

/* 도식화 레이아웃 (Flex) */
.criteria-diagram {
    display: flex;
    justify-content: center;
    align-items: center; /* 수직 중앙 정렬 */
    max-width: 900px;
    margin: 0 auto 50px;
}

/* 1. 파란 박스 */
.c-box {
    background: var(--navy);
    color: #fff;
    padding: 30px 40px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    z-index: 2;
    flex-shrink: 0;
    position: relative;
    height: auto;
}
.c-box strong {
    font-size: 20px;
    line-height: 1.4;
    display: block;
}

/* 2. [핵심] SVG 선 영역 */
.c-line-svg {
    width: 80px;        /* 선의 가로 길이 */
    height: 160px;      /* 리스트 전체 높이와 맞춤 */
    flex-shrink: 0;     /* 너비 고정 */
    margin: 0 -2px;     /* 박스와 선 사이 미세 공백 제거 */
}
.c-line-svg svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* 3. 오른쪽 리스트 */
.c-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 위, 중간, 아래 균등 배치 */
    height: 160px; /* SVG 높이와 동일하게 설정하여 선 끝점 일치시킴 */
    text-align: left;
    padding-left: 15px; /* 선과 글자 사이 간격 */
    margin: 0;
}

.c-list li {
    font-size: 18px;
    color: #333;
    font-weight: 500;
    display: flex;
    align-items: center;
    height: 40px; /* 각 항목의 높이 확보 */
}
/* 기존에 있던 가상요소(선) 코드들은 모두 삭제됨 */
.c-list li::before { content: none; }


/* 하단 설명 박스 */
.strategy-bottom p {
    font-size: 16px;
    color: #444;
    line-height: 1.8;
    background: #f9f9fb;
    padding: 20px;
    border-radius: 8px;
    display: inline-block;
}
.strategy-bottom strong { color: var(--navy); display: block; margin-bottom: 5px; }


/* [모바일 반응형] */
@media screen and (max-width: 768px) {
    .criteria-diagram { flex-direction: column; gap: 20px; }
    
    .c-line-svg { display: none; } /* 모바일에서는 선 숨김 */
    
    .c-list { 
        height: auto; 
        gap: 10px; 
        padding-left: 0; 
        text-align: center; 
        width: 100%;
    }
    .c-list li { 
        justify-content: center; 
        background: #f4f6fc; 
        padding: 15px; 
        border-radius: 5px; 
        height: auto;
        font-size: 15px;
    }
}

/* =================================================================
   [NEW] 왜 성공이민 MCC인가요? (디자인 최적화)
   ================================================================= */

/* 1. 섹션 전체 레이아웃 */
.why-mcc-section {
    padding-bottom: 30px;
    text-align: center;
}

.content-tit.center-tit {
    text-align: center;
    border-bottom: none;
    font-size: 34px;
    margin-bottom: 30px;
}

/* 2. 인트로 텍스트 */
.why-intro-text p {
    font-size: 18px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 50px;
    word-break: keep-all;
}
.why-intro-text strong {
    color: var(--navy);
    font-weight: 800;
    /* 텍스트 아래 은은한 밑줄 효과 */
    background: linear-gradient(to top, #eee 30%, transparent 30%);
}

/* 3. 강점 리스트 박스 */
.why-points-box {
    margin-bottom: 60px;
    display: flex;
    justify-content: center;
}

.why-points-box ul {
    display: flex;
    gap: 20px;
    justify-content: center;
    width: 100%;
    max-width: 1100px;
}

.why-points-box li {
    flex: 1;
    background: #fff;
    border: 1px solid #e5e5e5;
    padding: 30px 15px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: 0.3s;
}

.why-points-box li:hover {
    border-color: var(--navy);
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(10, 43, 94, 0.1);
}

.icon-circle {
    width: 60px;
    height: 60px;
    background: #f4f6fc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--navy);
    font-size: 24px;
    transition: 0.3s;
}
.why-points-box li:hover .icon-circle {
    background: var(--navy);
    color: #fff;
}

.why-points-box span {
    font-size: 16px;
    color: #333;
    font-weight: 700;
    line-height: 1.5;
    word-break: keep-all;
}

/* 4. 전문가 사진 영역 */
.expert-photo-wrap {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 80px;
}

.expert-img {
    width: 350px;
    height: 450px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    background: #f0f0f0;
}

.expert-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.expert-img:hover img {
    transform: scale(1.05);
}

/* 5. 하단 메시지 디자인 */
.why-closing .sub-head {
    font-size: 26px;
    font-weight: 800;
    color: #222;
    margin-bottom: 20px;
    line-height: 1.4;
}
.why-closing .sub-desc {
    font-size: 17px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 0;
}
.why-closing strong {
    color: var(--navy);
    font-weight: 800;
}

.divider-line {
    width: 1px;
    height: 60px;
    background: #ddd;
    margin: 50px auto;
}

.final-cta {
    font-size: 24px;
    font-weight: 800;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.5;
    word-break: keep-all;
}

.final-cta .gold-highlight {
    color: var(--navy);
    /* 텍스트 강조 (형광펜 효과) */
    background: linear-gradient(to top, #fff5b1 40%, transparent 40%);
}

.note-text {
    font-size: 14px;
    color: #999;
    margin-top: 15px;
}

/* [모바일 반응형] */
@media screen and (max-width: 768px) {
    .why-points-box ul {
        flex-wrap: wrap; /* 모바일에서 2줄로 배치 */
    }
    .why-points-box li {
        width: calc(50% - 10px); /* 한 줄에 2개씩 */
        flex: none;
        padding: 20px 10px;
    }
    .why-points-box span { font-size: 14px; }
    
    .expert-photo-wrap {
        flex-direction: column;
        align-items: center;
    }
    .expert-img {
        width: 100%;
        max-width: 320px;
        height: 380px;
    }
    
    .why-closing .sub-head { font-size: 22px; }
    .final-cta { font-size: 20px; }
}