/* ============================================================
   ADD-ON 19   (sub04 : 오시는길 / 진료시간)
   ------------------------------------------------------------
   · .sub_head 는 기존 구조/CSS 재사용
       - 이 페이지는 헤드 이미지(복도)를 화면 우측까지 블리드
       - .sub_box 없이, 아래 흰 콘텐츠(.info)가 검정 헤드 위로 겹침
   · 지도(.sub_map_wrap)는 기존 sub04.php 의 마크업/CSS 그대로 사용
   · 시안 기준 캔버스 1920 / inner 1500 → 기존 --u 단위 사용
   ============================================================ */

/* ---------- HEAD (sub04 전용 오버라이드) ---------- */
.sub04 .sub_head .inner{height:calc(1138 * var(--u));}
.sub04 .sub_head_img{right:calc(50% - 50vw);}
/*.sub04 .sub_copy:before{content:"";position:absolute;top:50%;right:calc(50% - 50vw);width:100vw;height:1px;background:rgba(255,255,255,.28);}*/

/* ============================================================
   .info : 검정 헤드 위로 겹치는 흰 콘텐츠 (inner 폭)
   ============================================================ */
.info{position:relative;z-index:2;}
.info .inner{background:#fff;padding:calc(78 * var(--u)) 0 calc(150 * var(--u));}

/* ---------- 진료시간 / 전화상담 (2단) ---------- */
.info_top{display:flex;}
.info_col{position:relative;flex:1 1 0;text-align:center;padding:0 calc(40 * var(--u));}
.info_col + .info_col:before{content:"";position:absolute;left:0;top:calc(24 * var(--u));bottom:calc(30 * var(--u));width:1px;background:#e3e3e3;}
.info_ico img{width:auto;height:calc(72 * var(--u));margin:0 auto;}
.info_tit{margin-top:calc(16 * var(--u));font-size:max(18px, calc(32 * var(--u)));font-weight:500;letter-spacing:-0.03em;color:#222;}

.hours_list{margin-top:calc(46 * var(--u));list-style:none;padding:0;}
.hours_list li{font-size:max(15px, calc(25 * var(--u)));font-weight:400;line-height:1.7;letter-spacing:-0.03em;color:#333;}
.hours_note{margin-top:calc(16 * var(--u));font-size:max(13px, calc(19 * var(--u)));letter-spacing:-0.03em;color:#999;}

.tel{margin-top:calc(30 * var(--u));font-size:max(28px, calc(58 * var(--u)));font-weight:400;letter-spacing:-0.01em;color:#1f1f1f;}
.tel_desc{margin-top:calc(20 * var(--u));font-size:max(13px, calc(19 * var(--u)));letter-spacing:-0.03em;color:#999;}
.talk{display:inline-block;margin-top:calc(26 * var(--u));}
.talk img{display:block;height:calc(52 * var(--u));width:auto;}

/* ---------- 오시는 길 + 주소 + 지도 ---------- */
.map_sec{margin-top:calc(96 * var(--u));text-align:center;}
.map_ico img{width:auto;height:calc(66 * var(--u));margin:0 auto;}
.map_tit{margin-top:calc(18 * var(--u));font-size:max(24px, calc(48 * var(--u)));font-weight:600;letter-spacing:-0.04em;color:#1f1f1f;}
.addr{margin-top:calc(34 * var(--u));font-size:max(16px, calc(28 * var(--u)));font-weight:400;letter-spacing:-0.03em;color:#333;}
.addr_en{margin-top:calc(12 * var(--u));font-size:max(12px, calc(18 * var(--u)));letter-spacing:0.01em;color:#9a9a9a;}
.sub04 .sub_map_wrap{margin-top:calc(84 * var(--u));}

/* ---------- 오시는 방법 (3단) ---------- */
.way{display:flex;margin-top:calc(168 * var(--u));}
.way_col{position:relative;flex:1 1 0;padding:0 calc(40 * var(--u));}
.way_col + .way_col:before{content:"";position:absolute;left:0;top:calc(6 * var(--u));bottom:calc(6 * var(--u));width:1px;background:#e3e3e3;}
.way_head{display:flex;align-items:center;justify-content:center;gap:calc(20 * var(--u));}
.way_ico img{}
.way_tit{font-size:max(17px, calc(29 * var(--u)));font-weight:500;letter-spacing:-0.03em;color:#222;}
.way_txt{margin-top:calc(40 * var(--u));text-align:center;font-size:max(14px, calc(21 * var(--u)));line-height:1.9;letter-spacing:-0.03em;color:#444;list-style:none;padding:0;}
.way_txt li{display:flex;justify-content:center;align-items:center;gap:calc(12 * var(--u));}
.way_txt b{font-weight:400;}
.subway_pill{display:inline-block;margin-right:calc(12 * var(--u));padding:calc(6 * var(--u)) calc(20 * var(--u));border:1px solid #e0b53d;border-radius:calc(30 * var(--u));font-size:max(13px, calc(19 * var(--u)));color:#c99a2e;}
.c_red{color:#e2483d;}
.c_blue{color:#3f6fd0;}
.c_green{color:#3a9b57;}

/* ============================================================
   ADD-ON 19 : responsive
   ============================================================ */
@media (max-width:1280px){
/*.sub04 .sub_head .inner{height:auto;padding-top:calc(1000 * var(--u));padding-bottom:0;}*/
/*sub04 .sub_head_img{top:calc(560 * var(--u));width:70%;}*/
.info .inner{padding:70px 20px 90px;}
.info_col{padding:0 20px;}
.tel{font-size:40px;}
.map_tit{font-size:34px;}
.way{margin-top:90px;}
}
@media (max-width:1000px){
.sub04 .sub_map_wrap{margin-top:50px;}
}
@media (max-width:768px){
.sub04 .sub_head .inner{height:auto;}
.info_top{flex-direction:column;gap:50px;}
.info_col{padding:0;}
.info_col + .info_col:before{display:none;}
.info_col + .info_col{border-top:1px solid #ececec;padding-top:50px;}
.hours_list{margin-top:24px;}
.tel{margin-top:16px;font-size:34px;}
.map_sec{margin-top:60px;}
.map_tit{font-size:28px;}
.way{flex-direction:column;gap:40px;margin-top:60px;}
.way_col{padding:0;}
.way_col + .way_col:before{display:none;}
.way_col + .way_col{border-top:1px solid #ececec;padding-top:40px;}
.way_txt li{flex-wrap:wrap;}
.way_ico img{width:30px;margin-right:5px;}
}
@media (max-width:480px){
.tel{font-size:28px;}
.map_tit{font-size:24px;}
.addr{font-size:15px;}
}