@charset "utf-8";

/* =========================== SUB */
#shSub{display:flex;align-items:center;justify-content:center;height:400px;margin:0 auto;padding-top:100px;background-image:url("../img/sub/sub_bg.jpg");background-repeat:no-repeat;background-size:cover;background-position:center}
#shSub .txt_area{padding-top:40px;color:#fff;text-align:center;font-family:'Pretendard'}
#shSub .txt_area p{margin-bottom:12px;font-size:38px;font-weight:700}
#shSub .txt_area div{display:flex;justify-content:center;align-items:center;font-size:16px;font-weight:500}
#shSub .txt_area div a{padding-top:3px}
#shSub .txt_area div svg{fill:#fff}
#shSub .txt_area div i{margin:0 20px;font-size:14px}
#shSub .sub_tit{display:none}

@media (max-width:1024px){
#shSub{height:350px}
#shSub .txt_area p{margin-bottom:8px;font-size:30px}
}
@media (max-width:768px){
#shSub{height:320px}
#shSub .txt_area p{font-size:28px}
#shSub .txt_area div{font-size:15px}
}
@media (max-width:580px){
#shSub{height:300px}
#shSub .txt_area p{margin-bottom:6px;font-size:26px}
}
@media (max-width:1200px){
#shSub{padding-top:80px}
}
@media (max-width:480px){
#shSub{height:100%;padding:20px 0;padding-top:80px;border-top:1px solid #e1e1e1;border-bottom:1px solid #e1e1e1;background:#fff}
#shSub .txt_area{display:none}
#shSub .sub_tit{display:block;font-size:16px;font-weight:700;font-family:'Pretendard'}
}

/* =========================== SNB */
#shSnb{display:flex;justify-content:center;margin:0 auto;background:var(--primary)}
#shSnb li+li{border-left:1px solid rgba(255,255,255,.15)}
#shSnb li a{display:block;min-width:160px;height:62px;padding:0 20px;font-size:17px;font-weight:500;line-height:62px;text-align:center;color:#fff;font-family:'pretendard'}
#shSnb li.on a{font-weight:600;color:var(--primary);background:#fff}
#sh_aside{position:relative;z-index:15;width:100%;font-family:'notokr-medium'}
#sh_aside_wrapper{position:relative;margin:0 auto;zoom:1}

/* 반응형 [s] */
@media (max-width:1024px){
#shSnb{display:none}
}
/* 반응형 [e] */

/* =========================== PAGE */
#greeting{font-size:15px;font-weight:400;line-height:1.8;letter-spacing:-.2px;color:#777;font-family:'Noto Sans KR'}
#greeting .tit_area{padding:0 0 40px 5%;font-size:38px;font-weight:100;line-height:1.35;letter-spacing:-.5px;color:#222}
#greeting .tit_area p{font-weight:600}
#greeting .img{height:420px;background:url(../img/sub/greeting_img.jpg) center no-repeat;background-size:cover}
#greeting .cont{padding:40px 0 0 25%}
#greeting .cont .pl{white-space:pre-line}
#greeting .cont .sign{margin-top:30px;font-weight:500;color:#222}
#greeting .cont .sign span{margin-left:20px;font-size:17px}

@media(max-width:1024px){
#greeting{padding:0px;font-size:14px;line-height:1.6}
#greeting .tit_area{padding:0;font-size:28px;line-height:1.4;color:#222;word-break:keep-all}
#greeting .img{height:200px;margin:15px 0}
#greeting .cont{padding:0}
#greeting .cont .sign{margin-top:20px}
#greeting .cont .sign span{margin-left:0;font-size:15px}
}
@media(max-width:768px){
#greeting .cont .pl{white-space:normal}
}
@media(max-width:480px){
#greeting .tit_area{font-size:22px}
}

/* =========================== SUB PAGE COMMON (endoscopy, ultrasound, checkup) */
.page-content { padding-top: 20px; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.sec { padding: 80px 0; }
.sec-gray { background: #f7f9fb; }
.sec + .sec { border-top: 1px solid #f0f0f0; }
.sec-gray + .sec, .sec + .sec-gray { border-top: none; }
.sec-head { margin-bottom: 40px; }
.sec-label { font-size: 15px; font-weight: 600; color: var(--primary, #35aebf); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; font-family: 'Pretendard'; }
.sec-title { font-size: 36px; font-weight: 700; line-height: 1.35; letter-spacing: -0.8px; color: #1a1a2e; font-family: 'Pretendard'; }
.sec-desc { font-size: 20px; color: #666; line-height: 1.8; margin-top: 12px; font-family: 'Pretendard'; }
.sub-title { font-size: 24px; font-weight: 700; color: #1a2d4a; margin-bottom: 16px; font-family: 'Pretendard'; }
.sub-nav { background: #fff; border-bottom: 1px solid #eee; position: sticky; top: 70px; z-index: 50; }
.sub-nav-inner { display: flex; gap: 0; max-width: 1280px; margin: 0 auto; overflow-x: auto; }
.sub-nav a { padding: 16px 28px; font-size: 17px; font-weight: 600; color: #888; white-space: nowrap; border-bottom: 2px solid transparent; transition: 0.2s; text-decoration: none; font-family: 'Pretendard'; }
.sub-nav a:hover, .sub-nav a.active { color: var(--primary, #35aebf); border-bottom-color: var(--primary, #35aebf); }

/* two-col layout */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.two-col-text h3 { font-size: 24px; font-weight: 700; color: #1a2d4a; margin-bottom: 14px; font-family: 'Pretendard'; }
.two-col-text p { font-size: 19px; color: #555; line-height: 1.8; margin-bottom: 12px; font-family: 'Pretendard'; }
.two-col-text ul { padding-left: 0; margin-top: 8px; list-style: none; }
.two-col-text li { font-size: 19px; color: #555; line-height: 1.75; padding-left: 18px; position: relative; margin-bottom: 6px; font-family: 'Pretendard'; }
.two-col-text li::before { content: ''; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary, #35aebf); }
.two-col-text li strong { color: #1a2d4a; }
.two-col-visual { display: flex; align-items: center; justify-content: center; height: 280px; background: linear-gradient(135deg, #f0fafb 0%, #e8f4f8 100%); border-radius: 20px; overflow: hidden; }
.two-col-visual i { font-size: 72px; color: var(--primary, #35aebf); opacity: 0.4; }
.two-col-visual img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }

/* info-box */
.info-box { margin-top: 32px; padding: 28px 32px; background: #f7f9fb; border-left: 4px solid var(--primary, #35aebf); border-radius: 0 12px 12px 0; }
.info-box h4 { font-size: 20px; font-weight: 700; color: #1a2d4a; margin-bottom: 14px; font-family: 'Pretendard'; }
.info-box ul { padding-left: 0; list-style: none; }
.info-box li { font-size: 18px; color: #555; line-height: 1.8; padding-left: 18px; position: relative; font-family: 'Pretendard'; }
.info-box li::before { content: ''; position: absolute; left: 0; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary, #35aebf); }
.info-box p { font-size: 18px; color: #555; line-height: 1.8; font-family: 'Pretendard'; }

/* feature cards */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-card { padding: 36px 28px; background: #fff; border: 1px solid #eee; border-radius: 16px; text-align: center; transition: 0.3s; }
.feature-card:hover { border-color: var(--primary, #35aebf); box-shadow: 0 6px 24px rgba(53,174,191,0.1); transform: translateY(-4px); }
.feature-icon { width: 64px; height: 64px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: #f0fafb; color: var(--primary, #35aebf); font-size: 28px; }
.feature-card:hover .feature-icon { background: var(--primary, #35aebf); color: #fff; }
.feature-card h3 { font-size: 22px; font-weight: 700; color: #222; margin-bottom: 10px; font-family: 'Pretendard'; }
.feature-card p { font-size: 18px; color: #666; line-height: 1.7; font-family: 'Pretendard'; }

/* process steps */
.process-steps { display: flex; gap: 0; margin-top: 32px; }
.process-step { flex: 1; text-align: center; padding: 28px 16px; position: relative; }
.process-step:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 8px solid var(--primary, #35aebf); border-top: 8px solid transparent; border-bottom: 8px solid transparent; opacity: 0.4; }
.step-number { width: 48px; height: 48px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary, #35aebf); color: #fff; font-size: 20px; font-weight: 700; }
.process-step h4 { font-size: 20px; font-weight: 700; color: #222; margin-bottom: 8px; font-family: 'Pretendard'; }
.process-step p { font-size: 17px; color: #666; line-height: 1.7; font-family: 'Pretendard'; }

/* checkup table */
.checkup-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 17px; font-family: 'Pretendard'; }
.checkup-table thead th { background: #1a2d4a; color: #fff; padding: 14px 16px; font-weight: 600; text-align: left; }
.checkup-table thead th:first-child { border-radius: 10px 0 0 0; }
.checkup-table thead th:last-child { border-radius: 0 10px 0 0; }
.checkup-table tbody td { padding: 14px 16px; border-bottom: 1px solid #eee; color: #555; }
.checkup-table tbody tr:hover { background: #f7f9fb; }
.checkup-table strong { color: #1a2d4a; font-weight: 700; }

/* CTA section */
.cta { text-align: center; padding: 80px 0; background: linear-gradient(135deg, var(--primary, #35aebf) 0%, #2d8a9a 100%); color: #fff; }
.cta h2 { font-size: 30px; font-weight: 700; margin-bottom: 10px; font-family: 'Pretendard'; }
.cta p { font-size: 16px; opacity: 0.8; margin-bottom: 32px; font-family: 'Pretendard'; }
.cta-btns { display: flex; gap: 12px; justify-content: center; }
.cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: 50px; font-size: 17px; font-weight: 600; transition: 0.2s; text-decoration: none; font-family: 'Pretendard'; }
.cta-btn.white { background: #fff; color: #1a2d4a; }
.cta-btn.ghost { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }

/* sub page responsive */
@media (max-width: 768px) {
    .sec { padding: 56px 0; }
    .sec-title { font-size: 24px; }
    .two-col { grid-template-columns: 1fr; gap: 32px; }
    .two-col-visual { height: 180px; }
    .feature-grid { grid-template-columns: 1fr; }
    .process-steps { flex-direction: column; gap: 8px; }
    .process-step:not(:last-child)::after { display: none; }
    .checkup-table { font-size: 13px; }
    .checkup-table thead th, .checkup-table tbody td { padding: 10px 8px; }
    .cta h2 { font-size: 22px; }
    .cta-btns { flex-direction: column; align-items: center; }
    .sub-nav-inner { padding: 0 16px; }
}