@charset "utf-8";

/* 초기화 */
html {overflow-y:scroll}
body {margin:0;padding:0;font-size:0.75em;font-family:'Malgun Gothic', dotum, sans-serif;background:#fff}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Malgun Gothic', dotum, sans-serif}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family:'Malgun Gothic', dotum, sans-serif;font-size:1em}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}

textarea, select {font-family:'Malgun Gothic', dotum, sans-serif;font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}

*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

input[type=text],input[type=password], textarea {
-webkit-transition:all 0.30s ease-in-out;
-moz-transition:all 0.30s ease-in-out;
-ms-transition:all 0.30s ease-in-out;
-o-transition:all 0.30s ease-in-out;
outline:none;
}

input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus {
-webkit-box-shadow:0 0 5px #9ed4ff;
-moz-box-shadow:0 0 5px #9ed4ff;
box-shadow:0 0 5px #9ed4ff;
border:1px solid #558ab7 !important;
}

.placeholdersjs {color:#aaa !important}


/* ============================================================
   하나트랜스 통합 반응형 프레임 (PC/모바일 공용)
   ============================================================ */
body {font-size:16px; font-family:'Nanum Gothic','Malgun Gothic',dotum,sans-serif; color:#444; word-break:keep-all; background:#fff;}
img {max-width:100%; height:auto;}
.clearfix:after {content:""; display:block; height:0; clear:both; visibility:hidden;}
a {-webkit-transition:.3s; transition:.3s;}

/* 콘텐츠 폭 : 브라우저를 넓게 쓰는 레이아웃 (기존 1000px 고정 → 1600px 까지 확장) */
#conWrap {width:100%; max-width:1600px; margin:0 auto; padding:0 30px;}

/* ---------- 팝업레이어 (newwin.inc.php) ---------- */
#hd_pop {z-index:1000;position:relative;margin:0 auto;width:1600px;max-width:100%;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff;max-width:100%}
.hd_pops img {max-width:100%;height:auto}
.hd_pops_con {max-width:100%}
.hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject {background:#000;text-align:left}
.hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0}

/* ---------- 헤더 ---------- */
#header {position:relative; border-bottom:1px solid #e5e8ee;}
#hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden;}
#skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden;}

/* 로고 · 메뉴 · 우측버튼을 한 행에 stretch 정렬 (행 높이 = HD_ROW 80px)
   헤더는 폭 제한 없이 브라우저 전체를 쓴다 (로고는 화면 왼쪽 끝, 버튼은 오른쪽 끝) */
#header .hd_conwrap {position:relative; max-width:none; padding:0 40px; display:-webkit-flex; display:flex; -webkit-align-items:stretch; align-items:stretch; -webkit-justify-content:space-between; justify-content:space-between;}
/* 로고는 절대 줄어들지 않게 고정 (flex 압축 + 전역 img{max-width:100%} 때문에 가로로 찌그러졌었음) */
#header #logo {float:none; margin:0; padding:12px 0; line-height:0; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-flex:0 0 auto; flex:0 0 auto;}
#header #logo a {display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; text-decoration:none;}
#header #logo img {height:56px; width:auto; max-width:170px; object-fit:contain;}
/* 심볼 옆 회사명 (로고 이미지에는 글자가 없다). gap 대신 margin 을 써서 구형 브라우저에서도 간격이 유지된다 */
#header #logo .lg_name {display:inline-block; margin-left:12px; font-size:26px; font-weight:800; line-height:1; letter-spacing:-.03em; color:#304a8c; white-space:nowrap;}
#header #logo a:hover .lg_name {color:#0079cf;}
#header #gnb {float:none;}

/* 햄버거 버튼 (모바일 전용) */
/* 로고 행(패딩12+로고56+패딩12=80px) 기준 수직 중앙. 메뉴가 열리면 컨테이너가 늘어나므로 top:50% 대신 고정값 사용 */
#gnb_toggle {display:none; position:absolute; top:20px; right:15px; width:44px; height:40px; background:#304a8c; border:0; border-radius:4px; padding:9px 11px;}
#gnb_toggle span {display:block; height:3px; background:#fff; margin:4px 0; border-radius:2px;}

/* GNB (1depth 가로 메뉴, 행 전체 높이 채움) */
#gnb {position:static;}
#gnb > h2 {position:absolute;font-size:0;line-height:0;overflow:hidden;}
#gnb_1dul {margin:0; display:-webkit-flex; display:flex; height:100%;}
/* 메뉴 간격은 min-width 가 아니라 margin-right 로 준다.
   - 글자 사이 여백 = margin-right + 좌우 padding*2 로 항상 일정
   - 하위 패널은 이 여백까지 쓸 수 있으므로 짧은 메뉴(변압기) 아래에도 넓은 패널이 겹침 없이 들어간다
   - .gnb_1da / .gnb_2da / .gnb_3da 의 좌우 padding 은 같은 값을 유지해야 상·하위 글자 시작점이 일치한다 */
.gnb_1dli {float:none; position:relative; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; margin-right:70px;}
.gnb_1dli:last-child {margin-right:0;}
.gnb_1da {display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; height:100%; padding:0 12px; font-size:17px; font-weight:700; color:#222; text-decoration:none; white-space:nowrap;}
#gnb:hover .gnb_1dli:hover > .gnb_1da, .gnb_1da:hover {color:#0079cf;}

/* 2depth : 상위 메뉴 좌측(left:0)에 맞춰 펼침 */
.gnb_2dul {display:none; position:absolute; top:100%; left:0; min-width:100%; padding:20px 0 24px; z-index:5;}
.gnb_2da {display:block; padding:9px 12px; text-align:left; font-size:15px; color:#555; text-decoration:none; white-space:nowrap;}
.gnb_2da:hover {color:#0079cf; font-weight:700;}
#gnb:hover .gnb_2dul {display:block;}

/* 3depth : 메가 패널 안에서 상위 항목 아래 들여쓰기로 항상 함께 노출 */
.gnb_3dul {margin:2px 0 6px 12px; padding-left:10px; border-left:1px solid #e5e8ee;}
/* 3depth 는 줄바꿈 허용 : 긴 항목(PCBs관리대상기기)이 칼럼 폭을 밀어내지 않도록 함 */
/* 없어질 예정인 메뉴 (menu.config.php 의 'me_del'=>true) : 가운데 줄로 표시
   정리하기로 결정되면 menu.config.php 에서 해당 줄만 지우면 됩니다. */
.gnb_del > a {text-decoration:line-through; opacity:0.55;}
.gnb_del > a:hover {opacity:0.8;}

.gnb_3da {display:block; padding:5px 8px; text-align:left; font-size:14px; color:#888; text-decoration:none; white-space:normal; word-break:keep-all;}
.gnb_3da:before {content:"- "; color:#c3c9d4;}
.gnb_3da:hover {color:#0079cf;}

/* 메가 드롭다운 배경 : #gnb 내부에 두고 화면 전체폭으로 확장 (offset 기준 .hd_conwrap 은 뷰포트 중앙) */
#gnb_mega_bg {display:none; position:absolute; top:100%; left:50%; margin-left:-50vw; width:100vw; min-height:340px; background:#fff; border-top:1px solid #e5e8ee; box-shadow:0 10px 14px rgba(0,0,0,0.06); z-index:4;}
#gnb:hover #gnb_mega_bg {display:block;}

/* 우측 견적문의 버튼 (하나트랜스 브랜드 남색) */
#hd_util {float:none; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; margin-left:10px; -webkit-flex:0 0 auto; flex:0 0 auto;}
#hd_util .btn_quote {display:inline-block; padding:12px 18px; background:#304a8c; color:#fff; font-size:16px; font-weight:700; border-radius:4px; text-decoration:none; white-space:nowrap; box-shadow:0 2px 5px rgba(48,74,140,0.25);}
#hd_util .btn_quote:hover {background:#0079cf; box-shadow:0 2px 6px rgba(0,121,207,0.35);}

.gnb_empty {padding:0 20px; line-height:80px; color:#888;}
.gnb_empty a {color:#0079cf; text-decoration:underline;}

/* ---------- 콘텐츠 래퍼 ---------- */
#wrapper {}
#container {min-height:300px;}
/* #conWrap(id) 의 padding 을 이기도록 id+class 로 지정 (상하 여백 확보) */
#conWrap.sub_wrap {padding:55px 30px 65px;}
/* 한 화면에 다 담아야 하는 페이지($hana_sv_extra = 'sv_compact')는 위아래 여백을 줄인다 */
#conWrap.sub_wrap.sv_compact {padding:26px 30px 40px;}
/* 화면 끝까지 꽉 채우는 페이지($hana_sv_extra = 'sv_full') : 본문 폭 제한과 여백을 없앤다 (인사말) */
#conWrap.sub_wrap.sv_full {max-width:none; padding:0;}
#container_title {font-size:26px; font-weight:bold; color:#304a8c; margin-bottom:20px; padding-bottom:15px; border-bottom:2px solid #304a8c;}
#container_title span {display:block; line-height:1.3;}

/* ---------- 회사소개 등 콘텐츠 페이지 ----------
   본문 글줄은 너무 길면 읽기 어려우므로 컨테이너(1600px)보다는 좁게 유지한다 */
.company_page {max-width:1100px; margin:0 auto; color:#444;}

/* 인사말 */
/* 문장이 단어 중간에서 끊기지 않도록 (그누보드 리셋 p{word-break:break-all} 무력화) */
.company_page p, .company_page li {word-break:keep-all; overflow-wrap:break-word;}

/* 한 장의 패널 : 왼쪽 인사말 본문 + 오른쪽 사선으로 잘린 사진(/images/company/greet_visual2.jpg) */
.company_greeting {max-width:none;}
.company_greeting .greet_panel {position:relative; overflow:hidden; background:#f3f6fa; background:linear-gradient(100deg,#f7f9fc 0%,#eef2f8 55%,#e6ecf4 100%);}
/* 사진 : 왼쪽 가장자리를 사선으로 자르고, 경계 위에 반투명 흰 띠를 겹쳐 사진이 은은하게 비치도록 한다 */
.company_greeting .greet_visual {position:absolute; top:0; right:0; bottom:0; width:44%; -webkit-clip-path:polygon(22% 0,100% 0,100% 100%,0 100%); clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);}
.company_greeting .greet_visual img {display:block; width:100%; height:100%; object-fit:cover; object-position:40% 60%; -webkit-filter:saturate(0.45) brightness(1.03) contrast(0.95); filter:saturate(0.45) brightness(1.03) contrast(0.95);}
/* 컬러 사진의 색을 페이지 톤(회청색)에 맞춰 누른다 : 채도를 낮추고 옅은 남색을 곱해 덮는다 */
.company_greeting .greet_visual:before {content:""; position:absolute; top:0; right:0; bottom:0; left:0; z-index:1; background:rgba(40,70,130,0.18); mix-blend-mode:multiply;}
.company_greeting .greet_visual:after {content:""; position:absolute; top:0; bottom:0; left:0; right:0; z-index:2; background:linear-gradient(101deg,rgba(238,242,248,0.35) 0%,rgba(238,242,248,0) 30%);}
.company_greeting .greet_panel:after {content:""; position:absolute; top:0; bottom:0; left:56%; width:15.68%; z-index:1; background:rgba(255,255,255,0.5); -webkit-clip-path:polygon(61.7% 0,100% 0,38.3% 100%,0 100%); clip-path:polygon(61.7% 0,100% 0,38.3% 100%,0 100%); pointer-events:none;}

.company_greeting .greet_text {position:relative; z-index:2; width:56%; padding:60px 40px 54px 44px; padding-left:max(44px, calc(50vw - 720px)); box-sizing:border-box;}

.company_greeting .greet_eyebrow {display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; gap:12px; margin-bottom:14px; font-size:13px; font-weight:700; letter-spacing:2px; color:#4a5672;}
.company_greeting .greet_eyebrow:after {content:""; width:44px; height:1px; background:#8a96ad;}
.company_greeting .greet_headline {margin-bottom:22px; font-size:23px; font-weight:800; letter-spacing:-0.6px; color:#1f3a7a; line-height:1.5;}

.company_greeting .greet_body p {font-size:15.5px; line-height:1.75; margin-bottom:14px; color:#555;}
.company_greeting .greet_body p:last-child {margin-bottom:0;}

/* 맺음말 · 대표이사 · 서명 한 줄 */
.company_greeting .greet_sign {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-align-items:center; align-items:center; gap:0 26px; margin-top:26px;}
.company_greeting .greet_sign .sign_thanks {font-size:17px; font-weight:700; color:#1f3a7a;}
.company_greeting .greet_sign .sign_name {font-size:15px; color:#555; letter-spacing:1px;}
.company_greeting .greet_sign .sign_name strong {margin-left:8px; font-size:18px; font-weight:700; letter-spacing:4px; color:#1f3a7a;}
.company_greeting .greet_sign .sign_img {height:80px; width:auto;}

/* 제목이 2줄로 끝나도록 화면이 좁아지면 제목 글씨를 조금 줄인다 */
@media (max-width:1500px) {
    .company_greeting .greet_headline {font-size:21px;}
}

/* 1035px 이하 : 사진을 위로 올리고 본문은 아래 전체 폭으로 */
@media (max-width:1035px) {
    .company_greeting .greet_visual {position:relative; width:100%; height:260px; -webkit-clip-path:none; clip-path:none;}
    .company_greeting .greet_visual:after,
    .company_greeting .greet_panel:after {display:none;}
    .company_greeting .greet_text {width:100%; padding:30px 30px 28px;}
    .company_greeting .pc_br {display:none;}
}

@media (max-width:768px) {
    .company_greeting .greet_visual {height:190px;}
    .company_greeting .greet_text {padding:24px 18px 22px;}
    .company_greeting .greet_headline {font-size:19px; margin-bottom:16px;}
    .company_greeting .greet_body p {font-size:15px; line-height:1.75; margin-bottom:12px;}
    .company_greeting .greet_sign {gap:0 14px; margin-top:20px;}
    .company_greeting .greet_sign .sign_thanks {font-size:15px;}
    .company_greeting .greet_sign .sign_name {font-size:14px;}
    .company_greeting .greet_sign .sign_name strong {margin-left:6px; font-size:16px; letter-spacing:2px;}
}

/* 오시는길 */
.company_location {max-width:1400px;}
.company_location .loc_grid {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-align-items:stretch; align-items:stretch; gap:24px;}
.company_location .loc_info {-webkit-flex:1 1 58%; flex:1 1 58%; min-width:0; display:-webkit-flex; display:flex; -webkit-flex-direction:column; flex-direction:column;}
.company_location .loc_hours {-webkit-flex:1 1 34%; flex:1 1 34%; min-width:0; display:-webkit-flex; display:flex; -webkit-flex-direction:column; flex-direction:column;}
.company_location .loc_col > h3 {position:relative; padding-top:16px; margin-bottom:24px; font-size:26px; font-weight:700; color:#304a8c;}
.company_location .loc_col > h3:before {content:""; position:absolute; top:0; left:0; width:36px; height:4px; background:#304a8c; border-radius:2px;}

/* 주소 리스트 */
.company_location .loc_addr {border:1px solid #e5e8ee; border-radius:8px; padding:10px 22px; background:#fff;}
.company_location .loc_addr li {display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; padding:16px 0; border-bottom:1px solid #eef1f5;}
.company_location .loc_addr li:last-child {border-bottom:0;}
.company_location .loc_ic {-webkit-flex:0 0 auto; flex:0 0 auto; width:40px; height:40px; margin-right:14px; border-radius:50%; background:#304a8c; color:#fff; text-align:center; line-height:40px; font-size:16px;}
.company_location .loc_label {-webkit-flex:0 0 84px; flex:0 0 84px; font-weight:700; color:#222; font-size:16px;}
.company_location .loc_val {-webkit-flex:1 1 auto; flex:1 1 auto; color:#555; font-size:16px; line-height:1.6;}
.company_location .loc_val em {display:inline-block; min-width:52px; color:#304a8c; font-style:normal; font-weight:700; font-size:13px;}
.company_location .addr_line {display:block;}
.company_location .addr_line + .addr_line {margin-top:4px;}
.company_location .addr_copy {position:relative; margin-left:8px; padding:2px 7px; border:1px solid #cfd6e2; border-radius:4px; background:#f3f6fb; color:#5a6b8c; font-size:12px; line-height:1.4; cursor:pointer; vertical-align:middle;}
.company_location .addr_copy:hover {border-color:#304a8c; color:#304a8c; background:#eaf0fa;}
.company_location .addr_copy.copied {border-color:#00913a; color:#00913a; background:#e9f7ee;}
.company_location .addr_toast {display:inline-block; margin-left:8px; padding:2px 8px; background:#304a8c; color:#fff; font-size:12px; border-radius:4px; vertical-align:middle;}
.company_location .loc_val a {color:#555;}
.company_location .loc_val a:hover {color:#0079cf; text-decoration:underline;}

/* 지도 (좌측 컬럼의 남은 높이를 채워 우측 컬럼과 아래 끝을 맞춤) */
.company_location .loc_map {position:relative; margin-top:18px; border:1px solid #e5e8ee; border-radius:8px; overflow:hidden; -webkit-flex:1 1 auto; flex:1 1 auto; display:-webkit-flex; display:flex; -webkit-flex-direction:column; flex-direction:column;}
.company_location .loc_map iframe {display:block; width:100%; -webkit-flex:1 1 auto; flex:1 1 auto; height:auto; min-height:280px; border:0;}
.company_location .loc_map_more {display:block; padding:13px 0; background:#3a4a63; color:#fff; text-align:center; font-size:14px; text-decoration:none;}
.company_location .loc_map_more:hover {background:#304a8c;}
.company_location .loc_map_more i {margin:0 4px;}

/* 운영시간 카드 */
.company_location .hour_card {display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-flex:1 1 auto; flex:1 1 auto; padding:20px; margin-bottom:14px; border:1px solid #e5e8ee; border-radius:8px; background:#fff;}
.company_location .hour_ic {-webkit-flex:0 0 auto; flex:0 0 auto; width:52px; height:52px; margin-right:16px; border-radius:50%; background:#304a8c; color:#fff; text-align:center; line-height:52px; font-size:22px;}
.company_location .hour_txt strong {display:block; font-size:17px; color:#222; margin-bottom:6px;}
.company_location .hour_txt p {font-size:14.5px; color:#777; line-height:1.5;}
.company_location .loc_quote_btn {display:block; -webkit-flex:0 0 auto; flex:0 0 auto; margin-top:0; padding:18px 0; background:#1f2c4a; color:#fff; text-align:center; font-size:17px; font-weight:700; border-radius:8px; text-decoration:none;}
.company_location .loc_quote_btn i {margin-right:8px;}
.company_location .loc_quote_btn:hover {background:#304a8c;}

@media (max-width:768px) {
    .company_location .loc_info, .company_location .loc_hours {-webkit-flex:1 1 100%; flex:1 1 100%;}
    .company_location .loc_col > h3 {font-size:22px;}
    .company_location .loc_map {-webkit-flex:0 0 auto; flex:0 0 auto;}
    .company_location .loc_map iframe {-webkit-flex:0 0 auto; flex:0 0 auto; height:240px; min-height:0;}
    .company_location .loc_quote_btn {margin-top:14px;}
    .company_location .loc_addr li {-webkit-flex-wrap:wrap; flex-wrap:wrap;}
    .company_location .loc_label {-webkit-flex:0 0 auto; flex:0 0 auto; margin-right:10px;}
}

/* ---------- 절연유 교체 (/oil/service.php · flow.php · effect.php) ----------
   서비스 소개 · 교체 절차 · 교체 효과 세 페이지가 같은 디자인 규칙을 씁니다.
     상단 히어로(제목+문구+사진) → 섹션 제목(왼쪽 정렬 + 밑줄) → 본문 → 하단 문의배너
   색상 : 브랜드 남색(#16234a·#1b2c5c) + 포인트 파랑(#0079cf·#0f5fbd) + 안내 회색(#7a8398)
   사진 : 상단 대표이미지는 세 페이지 공통 /images/home/sub4.png (head.php 가 자동 적용)
          본문 사진은 페이지별로 /images/home/4-1.png(서비스 소개) · 4-2.png(교체 절차) · 4-3.png(교체 효과)
          (원본 비율 그대로 표시되므로 같은 이름으로 덮어쓰면 바로 반영됩니다) */
.oil_page {max-width:1240px;}

/* 상단 히어로 (service.php 전용) : 왼쪽 제목·문구 / 오른쪽 사진
   사진은 오른쪽 여백(-30px)까지 흘려보내 화면 끝에 닿게 합니다.
   사진 파일이 없으면 figure 가 지워지고 문구가 폭을 다 씁니다. */
.oil_page .oil_hero {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-align-items:center; align-items:center; gap:40px;}
.oil_page .oh_txt {-webkit-flex:1 1 420px; flex:1 1 420px; min-width:0;}
.oil_page .oh_tit {margin-bottom:20px; font-size:38px; font-weight:700; color:#16234a; letter-spacing:-1px; line-height:1.25;}
.oil_page .oil_lead {font-size:16px; line-height:1.9; color:#5a6478;}
.oil_page .oil_lead_sub {position:relative; margin-top:24px; padding:19px 24px 19px 26px; border-radius:0 10px 10px 0; background:#f3f7fc; font-size:14px; line-height:1.85; color:#6a7488;}
.oil_page .oil_lead_sub:before {content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:#0079cf;}
/* 사진은 본문 폭 안에 두어 좌우 여백을 같게 맞춘다 (밖으로 흘리면 오른쪽으로 치우쳐 보임) */
.oil_page .oh_img {position:relative; -webkit-flex:1 1 420px; flex:1 1 420px; min-width:0; margin:0; border-radius:14px; overflow:hidden; background:#eef2f8; box-shadow:0 12px 30px rgba(22,35,74,0.14);}
/* 원본 왼쪽의 빈 안개 영역을 덜어내어 작업자가 사진 가운데에 오도록 자른다 */
.oil_page .oh_img img {display:block; width:100%; height:420px; object-fit:cover; object-position:100% 50%;}
/* 안내 박스는 칸 폭에 맞춰 흐르게 (고정 줄바꿈 해제) */
.oil_page .oil_lead_sub br {display:none;}

/* 섹션 제목 : 왼쪽 정렬 + 전체 폭 밑줄 */
.oil_page .oil_sec {padding-top:76px;}
/* 페이지마다 섹션이 하나씩이므로 히어로 바로 아래 첫 섹션은 여백을 줄인다 */
.oil_page .oil_sec_first {padding-top:64px;}
/* 히어로가 없는 페이지(flow · effect)는 대표이미지 바로 아래에서 시작하므로 여백을 더 줄인다 */
.oil_page .oil_sec_first:first-child {padding-top:6px;}
.oil_page .oil_sec_head {margin-bottom:38px; padding-bottom:16px; border-bottom:1px solid #e3e9f2;}
.oil_page .oil_sec_tit {font-size:28px; font-weight:700; color:#16234a; line-height:1.3;}
/* 섹션 제목 앞 표시 : 번호 대신 짧은 파란 막대 (2026-10-06 변경)
   번호를 다시 쓰려면 각 페이지의 제목에 <em>01.</em> 을 넣으면 아래 em 스타일이 적용됩니다. */
.oil_page .oil_sec_tit:before {content:""; display:inline-block; width:5px; height:0.95em; margin:0 14px -0.1em 0; border-radius:3px; background:#0079cf; vertical-align:baseline;}
.oil_page .oil_sec_tit em {display:inline-block; margin-right:6px; font-style:normal; font-weight:800; color:#0079cf;}
/* 제목 오른쪽에 세로 구분선을 두고 설명을 한 줄로 붙이는 머리말 (밑줄 없음) */
.oil_page .oil_sec_head_row {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-align-items:center; align-items:center; margin-bottom:40px; padding-bottom:0; border-bottom:0;}
.oil_page .oil_sec_head_row .oil_sec_desc {position:relative; margin:0 0 0 20px; padding-left:20px; font-size:16px; line-height:1.6; color:#5a6478; word-break:keep-all;}
.oil_page .oil_sec_head_row .oil_sec_desc:before {content:""; position:absolute; left:0; top:2px; bottom:2px; width:1px; background:#c9d2e2;}

/* 01. 서비스 소개 : 왼쪽 설명 + 오른쪽 체크 카드 */
.oil_page .oil_cols {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-align-items:flex-start; align-items:flex-start; gap:40px;}
.oil_page .oil_main {-webkit-flex:1 1 520px; flex:1 1 520px; min-width:0;}
.oil_page .om_tit {margin-bottom:18px; font-size:21px; font-weight:700; color:#16234a; line-height:1.35;}
.oil_page .om_txt p {font-size:16px; line-height:1.9; color:#5a6478;}
.oil_page .om_txt p + p {margin-top:12px;}

/* 작업 범위 : 아이콘 카드 (설명문 아래 · 테두리 없이 한 줄 4칸) */
.oil_page .oil_feats {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:24px 10px; margin:34px 0 0; padding:0; list-style:none;}
.oil_page .oil_feats li {-webkit-flex:0 0 calc(25% - 7.5px); flex:0 0 calc(25% - 7.5px); min-width:0; text-align:center;}
.oil_page .oil_feats .ft_ic {display:block; width:42px; height:42px; margin:0 auto 11px; border-radius:50%; background:#eef5fd; color:#0f5fbd; font-size:18px; line-height:42px;}
.oil_page .oil_feats .ft_tit {display:block; font-size:12.5px; font-weight:600; line-height:1.55; color:#5f6a80;}

/* 점검이 필요한 경우 : 체크 카드 */
.oil_page .oil_side {-webkit-flex:1 1 380px; flex:1 1 380px; min-width:0; padding:32px 34px 34px; border:1px solid #e3e9f2; border-radius:14px; background:#fff; box-shadow:0 8px 24px rgba(22,35,74,0.06);}
.oil_page .os_tit {margin-bottom:8px; padding-bottom:18px; border-bottom:1px solid #eef2f8; font-size:19px; font-weight:700; color:#16234a; line-height:1.4;}
.oil_page .oil_check {margin:0; padding:0; list-style:none;}
.oil_page .oil_check li {position:relative; padding:13px 0 13px 30px; font-size:16px; line-height:1.65; color:#4a5570;}
.oil_page .oil_check li + li {border-top:1px solid #f1f5fa;}
.oil_page .oil_check li:before {content:"\f00c"; position:absolute; left:0; top:14px; width:19px; height:19px; border-radius:50%; background:#0079cf; color:#fff; font-family:FontAwesome; font-size:10px; line-height:19px; text-align:center;}

/* 서비스 소개 : 오른쪽 대표 사진 */
.oil_page .oil_photo {-webkit-flex:1 1 380px; flex:1 1 380px; min-width:0; margin:0;}
.oil_page .oil_photo img {display:block; width:100%; height:auto; border-radius:14px; box-shadow:0 8px 24px rgba(22,35,74,0.10);}
/* 서비스 소개 : 사진은 원본 비율(4:3) 그대로 크게, '서비스 소개' 제목 위부터 본문 끝까지 오른쪽 한 칸
   왼쪽 칸 = 제목(위에 붙음) + 본문(아래에 붙음) → 사진 위아래 끝과 맞춰짐 */
.oil_page .oil_cols_photo {-webkit-flex-wrap:nowrap; flex-wrap:nowrap; -webkit-align-items:center; align-items:center; gap:48px;}
.oil_page .oil_cols_photo .oil_main {-webkit-flex:1 1 0; flex:1 1 0; display:-webkit-flex; display:flex; -webkit-flex-direction:column; flex-direction:column;}
.oil_page .oil_cols_photo .om_txt p {line-height:1.85; word-break:keep-all;}
.oil_page .oil_cols_photo .om_txt p + p {margin-top:14px;}
.oil_page .oil_cols_photo .oil_photo {-webkit-flex:0 0 50%; flex:0 0 50%; max-width:620px;}
.oil_page .oil_cols_photo .oil_photo img {width:100%; height:auto;}

/* 서비스 소개 : 현장 사진 (왼쪽 큰 사진 1 + 오른쪽 작은 사진 4) */
.oil_page .oil_ref_grid {display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:14px; height:520px;}
.oil_page .oil_ref_grid .rf_item {position:relative; display:block; overflow:hidden; border-radius:12px; background:#f2f6fb; cursor:zoom-in;}
.oil_page .oil_ref_grid .rf_item:first-child {grid-row:1 / 3;}
.oil_page .oil_ref_grid img {display:block; width:100%; height:100%; -o-object-fit:cover; object-fit:cover; -webkit-transition:.3s ease; transition:.3s ease;}
.oil_page .oil_ref_grid .rf_item:hover img {-webkit-transform:scale(1.04); transform:scale(1.04);}
.oil_page .oil_ref_grid .rf_cap {position:absolute; left:12px; bottom:12px; padding:5px 12px; border-radius:20px; background:rgba(22,35,74,.82); color:#fff; font-size:13px; font-weight:600; line-height:1.5;}
.oil_page .oil_ref_grid .rf_cap em {margin-right:6px; font-style:normal; color:#8fb8ff;}

/* 서비스 소개 : 점검이 필요한 경우 (전체폭 카드 · 2열, 위→아래로 채움) */
.oil_page .oil_need_box {margin-top:40px; padding:32px 34px 30px; border:1px solid #e3e9f2; border-radius:14px; background:#fff; box-shadow:0 8px 24px rgba(22,35,74,0.06);}
.oil_page .oil_check_2col {display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(3, auto); grid-auto-flow:column; -webkit-column-gap:40px; column-gap:40px;}
.oil_page .oil_check_2col li {border-bottom:1px solid #f1f5fa;}
.oil_page .oil_check_2col li + li {border-top:0;}

/* 안내 문구 띠 */
.oil_page .oil_note {display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; gap:14px; margin-top:34px; padding:18px 26px; border-radius:10px; background:#f2f6fb; font-size:15px; line-height:1.7; color:#5b667e;}
.oil_page .oil_note .note_ic {-webkit-flex:0 0 auto; flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:#0079cf; color:#fff; font-size:12px; line-height:22px; text-align:center;}

/* 02. 교체 절차 : 사진이 들어간 단계 카드 (한 줄 4칸 → 7단계면 4 + 3, 둘째 줄은 가운데 정렬)
   카드 사이 여백에 화살표를 띄워 진행 방향을 보여줍니다.
   같은 줄 카드끼리 높이가 자동으로 맞춰지므로 설명 길이가 달라도 줄이 흐트러지지 않습니다. */
.oil_page .oil_steps {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:center; justify-content:center; -webkit-align-items:stretch; align-items:stretch; gap:50px 40px; margin:0; padding:0; list-style:none;}

/* 4칸 기준 : 카드 사이 간격 40px × 3 = 120px 을 뺀 나머지를 4등분 */
.oil_page .oil_step {position:relative; -webkit-flex:0 0 calc(25% - 30px); flex:0 0 calc(25% - 30px); max-width:calc(25% - 30px); min-width:0; padding:28px 20px 26px; border:1px solid #e6ecf5; border-radius:16px; background:#fff; box-shadow:0 6px 18px rgba(22,35,74,0.05); text-align:center;}
/* 단계 번호 : 남색 알약 배지 */
.oil_page .oil_step .st_no {display:inline-block; min-width:44px; margin-bottom:14px; padding:5px 13px; border-radius:100px; background:#16234a; color:#fff; font-size:15px; font-weight:800; letter-spacing:0.5px; line-height:1.25;}
.oil_page .oil_step .st_tit {display:block; margin-bottom:16px; font-size:18px; font-weight:700; color:#16234a; line-height:1.45; word-break:keep-all;}
/* 사진 : 3:2 비율 고정 (padding 비율 방식이라 구형 브라우저에서도 높이가 흐트러지지 않는다) */
.oil_page .oil_step .st_photo {position:relative; margin:0 0 18px; padding-top:66.66%; border-radius:10px; overflow:hidden; background:#eef1f6;}
.oil_page .oil_step .st_photo img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;}
/* 사진이 없는 단계는 기존 아이콘으로 대체 */
.oil_page .oil_step .st_ic {display:block; width:54px; height:54px; margin:0 auto 18px; border-radius:50%; background:-webkit-linear-gradient(top,#eaf3fd,#dce9f8); background:linear-gradient(160deg,#eaf3fd,#dce9f8); color:#0f5fbd; font-size:21px; line-height:54px;}
.oil_page .oil_step .st_desc {font-size:16px; line-height:1.75; color:#5a6478; word-break:keep-all;}

/* 카드 사이 화살표. 줄 끝(4번째)과 마지막 단계 뒤에는 붙이지 않는다 */
.oil_page .oil_step:after {content:"\f178"; position:absolute; top:50%; right:-31px; margin-top:-11px; font-family:FontAwesome; font-size:20px; line-height:22px; color:#1b3a86;}
.oil_page .oil_step:nth-child(4n):after, .oil_page .oil_step:last-child:after {display:none;}

/* 폐절연유 처리 안내 : 남색 패널 (왼쪽 사진 + 오른쪽 CASE 카드) */
.oil_page .oil_warn {position:relative; margin-top:56px; padding:48px 44px 44px; border-radius:16px; overflow:hidden; color:#fff; background:-webkit-linear-gradient(315deg,#0e1830,#1b2c5c); background:linear-gradient(135deg,#1b2c5c 0%,#0e1830 100%);}
/* 설비 도면 느낌의 옅은 격자 */
.oil_page .oil_warn:before {content:""; position:absolute; top:0; left:0; right:0; bottom:0; background-image:linear-gradient(rgba(255,255,255,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.05) 1px,transparent 1px); background-size:46px 46px;}
.oil_page .oil_warn > * {position:relative;}
.oil_page .oil_warn .warn_tit {margin-bottom:16px; font-size:25px; font-weight:700; color:#fff; text-align:center;}
.oil_page .oil_warn .warn_desc {font-size:15px; line-height:1.9; color:#a9b8d8; text-align:center;}
.oil_page .oil_warn .warn_body {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-align-items:stretch; align-items:stretch; gap:22px; margin-top:34px;}
.oil_page .oil_warn .warn_photo {-webkit-flex:0 1 380px; flex:0 1 380px; min-width:0; margin:0; border-radius:12px; overflow:hidden; background:#101a33;}
.oil_page .oil_warn .warn_photo img {display:block; width:100%; height:100%; min-height:300px; object-fit:cover;}
.oil_page .oil_warn .warn_cases {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-flex:1 1 520px; flex:1 1 520px; min-width:0; gap:22px;}
.oil_page .oil_warn .warn_case {position:relative; -webkit-flex:1 1 240px; flex:1 1 240px; min-width:0; padding:26px 26px 30px; border-radius:12px; background:#fff;}
.oil_page .oil_warn .wc_no {display:inline-block; margin-bottom:12px; padding:4px 11px; border-radius:4px; background:#0079cf; color:#fff; font-size:11px; font-weight:800; letter-spacing:1px;}
.oil_page .oil_warn .wc_tit {display:block; margin-bottom:11px; font-size:17px; font-weight:700; color:#16234a; line-height:1.4;}
.oil_page .oil_warn .warn_case p {font-size:14.5px; line-height:1.85; color:#61697d;}
/* 교체 절차 : CASE 박스를 사진 오른쪽에 위아래로 쌓아 빈 공간 줄이기 */
.oil_page .oil_warn .warn_body.is_stack .warn_photo img {min-height:240px;}
.oil_page .oil_warn .warn_body.is_stack .warn_cases {-webkit-flex-direction:column; flex-direction:column; -webkit-flex-wrap:nowrap; flex-wrap:nowrap; gap:16px;}
.oil_page .oil_warn .warn_body.is_stack .warn_case {-webkit-flex:1 1 auto; flex:1 1 auto; padding-top:22px; padding-bottom:22px;}
.oil_page .oil_warn .warn_body.is_stack .wc_no {margin-bottom:10px;}
.oil_page .oil_warn .warn_body.is_stack .wc_tit {margin-bottom:6px;}
.oil_page .oil_warn .warn_body.is_stack .warn_case p {line-height:1.75;}
.oil_page .oil_warn .wc_ic {position:absolute; right:22px; top:22px; width:38px; height:38px; border-radius:10px; background:#eef4fc; color:#0f5fbd; font-size:16px; line-height:38px; text-align:center;}
/* 관리대상기기란 : PCBs 안내 패널 전체를 촘촘하게 (패널 여백 · 문단 간격 · 기준 카드 축소, 카드 아이콘 없음) */
.device_page .oil_warn {margin-top:44px; padding:34px 40px 26px;}
.device_page .oil_warn .warn_tit {margin-bottom:10px; font-size:23px;}
.device_page .oil_warn .warn_desc {line-height:1.75;}
.device_page .dv_warn_lead {margin-top:12px; line-height:1.75;}
.device_page .dv_warn_sub {margin-top:26px; font-size:19px;}
.device_page .dv_warn_subdesc {margin-top:4px;}
.device_page .oil_warn .warn_body {margin-top:20px;}
.device_page .oil_warn .warn_cases {gap:14px;}
.device_page .oil_warn .warn_case {padding:16px 20px 18px;}
.device_page .oil_warn .wc_no {margin-bottom:8px;}
.device_page .oil_warn .wc_tit {margin-bottom:5px; padding-right:0; font-size:16px;}
.device_page .oil_warn .warn_case p {font-size:14px; line-height:1.65;}
.device_page .oil_warn .warn_foot {margin-top:18px; padding-top:14px;}
/* 관리대상기기란 : PCBs 안내 아래 '처리 전 확인할 기준' (노란 주의 배너 · CHECK 표시 + 핵심 단어 굵게) */
.device_page .dv_precheck {margin-top:20px; padding:22px 28px; border:1px solid #f4dfae; border-radius:14px; background:#fffaf0;}
.device_page .dv_precheck .pc_tag {display:inline-block; padding:2px 10px; border-radius:20px; background:#16234a; color:#ffc14d; font-size:11.5px; font-weight:800; letter-spacing:.5px; vertical-align:middle;}
.device_page .dv_precheck .pc_tit {display:inline; margin-left:8px; font-size:18px; font-weight:800; color:#16234a; vertical-align:middle;}
.device_page .dv_precheck p {margin:8px 0 0; font-size:15px; line-height:1.75; color:#5b5240; word-break:keep-all;}
.device_page .dv_precheck p strong {color:#16234a;}
.oil_page .oil_warn .warn_foot {margin-top:28px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.12); font-size:14px; line-height:1.7; color:#8f9dbd; text-align:center;}

/* 03. 교체 효과 : 한 줄 5칸 (세로 구분선) */
.oil_page .oil_effects {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin:0; padding:0; list-style:none;}
.oil_page .oil_effects li {-webkit-flex:1 1 200px; flex:1 1 200px; min-width:0; padding:8px 26px 10px; border-left:1px solid #e8edf5; text-align:center;}
.oil_page .oil_effects li:first-child {border-left:0;}
.oil_page .oil_effects .ef_ic {display:block; width:62px; height:62px; margin:0 auto 18px; border:1px solid #d9e5f4; border-radius:50%; background:#f6fafe; color:#0f5fbd; font-size:24px; line-height:60px;}
.oil_page .oil_effects .ef_tit {display:block; margin-bottom:6px; font-size:17px; font-weight:700; color:#16234a; line-height:1.45;}
.oil_page .oil_effects .ef_en {display:block; margin-bottom:14px; font-size:12px; font-weight:600; letter-spacing:0.08em; color:#0079cf; line-height:1.5;}
/* 효과 카드 : 아이콘 대신 상단 색상바로 구분 (1 파랑 · 2 청록 · 3 남색) */
.oil_page .oil_effects {gap:24px;}
.oil_page .oil_effects li, .oil_page .oil_effects li:first-child {position:relative; padding:34px 28px 30px; border:1px solid #e3e9f2; border-radius:12px; background:#fff; box-shadow:0 8px 24px rgba(22,35,74,0.05); overflow:hidden;}
.oil_page .oil_effects li:before {content:""; position:absolute; left:0; right:0; top:0; height:5px; background:#0079cf;}
.oil_page .oil_effects li:nth-child(3n+2):before {background:#0a9d8e;}
.oil_page .oil_effects li:nth-child(3n+3):before {background:#16234a;}
.oil_page .oil_effects li:nth-child(3n+2) .ef_en {color:#0a9d8e;}
.oil_page .oil_effects li:nth-child(3n+3) .ef_en {color:#16234a;}
.oil_page .oil_effects .ef_desc {font-size:14.5px; line-height:1.85; color:#7a8398;}

/* 문의 안내 배너 : 왼쪽 사진 + 문구 + 버튼 */
.oil_page .oil_cta {position:relative; display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-align-items:center; align-items:center; gap:40px; margin-top:70px; padding:0 48px; border-radius:16px; overflow:hidden; color:#fff; background:-webkit-linear-gradient(340deg,#16234a,#1b3a63 55%,#0f5f7a); background:linear-gradient(110deg,#16234a 0%,#1b3a63 55%,#0f5f7a 100%);}
/* 설비 도면 느낌의 옅은 격자 */
.oil_page .oil_cta:before {content:""; position:absolute; top:0; left:0; right:0; bottom:0; z-index:1; background-image:linear-gradient(rgba(255,255,255,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.05) 1px,transparent 1px); background-size:46px 46px;}

/* 배경사진을 넘긴 경우 (oil_cta_html($photo)) : 사진 위에 남색 그라데이션을 덮어
   왼쪽 문구와 오른쪽 버튼 자리는 어둡게, 가운데는 사진이 그대로 보이게 합니다. */
.oil_page .oil_cta_photo {min-height:330px;}
.oil_page .oil_cta .cta_bg {position:absolute; top:0; left:0; right:0; bottom:0; z-index:0; overflow:hidden;}
/* 사진을 조금 키우고 왼쪽으로 밀어, 인물이 배너 가운데(약 49~70%)에 오도록 맞춥니다 */
.oil_page .oil_cta .cta_bg img {display:block; width:115%; height:100%; margin-left:-19%; object-fit:cover; object-position:center 12%;}
.oil_page .oil_cta .cta_bg:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; background:-webkit-linear-gradient(left,#16234a 0,#16234a 30%,rgba(22,35,74,0.55) 42%,rgba(22,35,74,0.22) 56%,rgba(22,35,74,0.70) 70%,#16234a 80%); background:linear-gradient(90deg,#16234a 0,#16234a 30%,rgba(22,35,74,0.55) 42%,rgba(22,35,74,0.22) 56%,rgba(22,35,74,0.70) 70%,#16234a 80%);}
/* 사진을 가운데 칸(24.5%~74.5%)에만 맞춰 넣음 : 40.jpg 같은 설비 사진용 · 기기가 배너 정가운데(50%)에 오도록 배치 */
.oil_page .cta_photo_mid .cta_bg img {position:absolute; top:0; left:24.5%; width:50%; margin-left:0; object-position:center 40%;}
.oil_page .cta_photo_mid .cta_bg:after {background:-webkit-linear-gradient(left,#16234a 0,#16234a 26%,rgba(22,35,74,0.55) 38%,rgba(22,35,74,0.18) 50%,rgba(22,35,74,0.55) 62%,#16234a 74%); background:linear-gradient(90deg,#16234a 0,#16234a 26%,rgba(22,35,74,0.55) 38%,rgba(22,35,74,0.18) 50%,rgba(22,35,74,0.55) 62%,#16234a 74%);}

.oil_page .oil_cta .cta_body {position:relative; z-index:2; -webkit-flex:1 1 340px; flex:1 1 340px; min-width:0; padding:52px 0;}
.oil_page .oil_cta .cta_tit {display:block; font-size:27px; font-weight:700; letter-spacing:-0.5px; line-height:1.3; color:#fff;}
.oil_page .oil_cta .cta_desc {margin-top:14px; font-size:16px; line-height:1.85; color:#bacbdd;}
.oil_page .oil_cta .cta_act {position:relative; z-index:2; -webkit-flex:0 1 440px; flex:0 1 440px; min-width:0; padding:52px 0; text-align:right;}
.oil_page .oil_cta .cta_ask {font-size:16px; font-weight:600; line-height:1.75; color:#fff; word-break:keep-all;}
.oil_page .oil_cta .cta_btn {display:inline-block; margin-top:20px; padding:14px 34px; border-radius:999px; background:#fff; color:#16234a; font-size:16px; font-weight:700; text-decoration:none; box-shadow:0 6px 18px rgba(0,0,0,0.22);}
.oil_page .oil_cta .cta_btn:hover {background:#0079cf; color:#fff;}
.oil_page .oil_cta .cta_btn i {margin-left:9px;}


/* ============================================================
   관리대상기기 처리 (.device_page)
   ------------------------------------------------------------
   섹션 제목 · 본문 2단 · 체크리스트 · 안내띠 · 남색 패널 · 문의배너는
   절연유교체(.oil_page)의 것을 그대로 물려 씁니다.
   이 메뉴에만 필요한 부분(취급품목 · 처리절차 · 관련법규)만 아래에 둡니다.
   ============================================================ */

/* 섹션 도입 문구 · 중간 제목 */
/* 섹션 제목 아래 도입 문구 : 왼쪽 정렬 (처리절차 · 관련법규) */
.device_page .dv_lead {margin:0 0 40px; font-size:16px; line-height:1.9; color:#5a6478; text-align:left; word-break:keep-all;}
/* 처리절차 상단 (시안 D) : 왼쪽 글 + 핵심 정보 3칸 · 오른쪽 사진 */
.device_page .dv_flow_top {display:-webkit-flex; display:flex; -webkit-align-items:stretch; align-items:stretch; gap:44px; margin-bottom:56px;}
.device_page .dv_flow_top .ft_txt {-webkit-flex:1 1 0; flex:1 1 0; min-width:0; display:-webkit-flex; display:flex; -webkit-flex-direction:column; flex-direction:column; -webkit-justify-content:center; justify-content:center;}
.device_page .dv_flow_top .ft_eyebrow {margin:0 0 10px; font-size:13px; font-weight:800; letter-spacing:2px; color:#1f7ae0;}
.device_page .dv_flow_top .ft_tit {margin:0 0 14px; font-size:24px; font-weight:800; line-height:1.4; color:#16234a;}
.device_page .dv_flow_top .ft_desc {margin:0; font-size:15.5px; line-height:1.85; color:#5a6478; word-break:keep-all;}
.device_page .dv_flow_top .ft_stats {display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:24px;}
.device_page .dv_flow_top .ft_stats div {padding:16px 14px; border:1px solid #e6ecf5; border-radius:12px; background:#f7f9fc; text-align:center;}
.device_page .dv_flow_top .ft_stats b {display:block; margin-bottom:4px; font-size:22px; font-weight:800; color:#0f5fbd;}
.device_page .dv_flow_top .ft_stats span {font-size:13.5px; line-height:1.5; color:#5a6478;}
.device_page .dv_flow_top .ft_photo {-webkit-flex:0 0 42%; flex:0 0 42%; margin:0; border-radius:14px; overflow:hidden; box-shadow:0 8px 24px rgba(22,35,74,0.10);}
.device_page .dv_flow_top .ft_photo img {display:block; width:100%; height:100%; -o-object-fit:cover; object-fit:cover;}
.device_page .dv_sub_tit {margin:0 0 22px; font-size:21px; font-weight:700; color:#16234a; line-height:1.4;}
.device_page .dv_sub_tit_mt {margin-top:60px;}

/* ---------- 01. 관리대상기기란 ---------- */
/* 확인사항이 11개라 오른쪽 카드 안에서 2단으로 나눈다 */
.device_page .os_desc {margin:0 0 4px; font-size:14px; line-height:1.7; color:#7a8398;}
/* 관리대상기기란 : 오른쪽 확인사항 상자를 왼쪽 글 높이에 맞추고 내용은 세로 가운데 */
.oil_page .oil_cols_eq {-webkit-align-items:stretch; align-items:stretch;}
.oil_page .oil_cols_eq .oil_side {display:-webkit-flex; display:flex; -webkit-flex-direction:column; flex-direction:column; -webkit-justify-content:center; justify-content:center;}
.device_page .oil_check.dv_check_2col {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin-top:8px;}
.device_page .oil_check.dv_check_2col li {-webkit-flex:0 0 50%; flex:0 0 50%; max-width:50%; padding:10px 14px 10px 28px; box-sizing:border-box; font-size:14.5px;}
.device_page .oil_check.dv_check_2col li + li {border-top:0;}
.device_page .oil_check.dv_check_2col li:before {top:11px;}

/* 대표적인 관리대상기기 : 사진 카드 (한 줄 3칸 · 위아래 두 줄)
   사진은 /images/content/ 의 kind_*.* — device/_parts.php 의 $dv_kinds 에서 파일 이름을 정합니다.
   사진을 두 장 넣은 칸(.dk_wide)은 두 칸 폭을 차지하므로, 모든 사진이 같은 크기로 보입니다.
   사진 파일이 없을 때만 예비 아이콘(.dk_ic)이 표시됩니다.
   권장 사진 크기 : 가로 800 × 세로 600 (4:3) 이상 */
.device_page .dv_kinds {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:16px; margin:42px 0 0; padding:0; list-style:none;}
.device_page .dv_kinds li {-webkit-flex:0 0 calc(33.333% - 10.7px); flex:0 0 calc(33.333% - 10.7px); max-width:calc(33.333% - 10.7px); min-width:0; padding:16px 16px 18px; border:1px solid #e3e9f2; border-radius:14px; background:#fff; box-shadow:0 6px 18px rgba(22,35,74,0.05); box-sizing:border-box; text-align:center;}
/* 사진 두 장짜리 칸 : 두 칸 폭 (1칸 + 간격 + 1칸) */
.device_page .dv_kinds li.dk_wide {-webkit-flex:0 0 calc(66.666% - 5.3px); flex:0 0 calc(66.666% - 5.3px); max-width:calc(66.666% - 5.3px);}
/* 사진 : 4:3 비율 고정 (padding 비율 방식이라 구형 브라우저에서도 높이가 흐트러지지 않는다) */
.device_page .dv_kinds .dk_photo {position:relative; margin:0 0 14px; padding-top:75%; border-radius:10px; overflow:hidden; background:#f2f5f9;}
/* 두 칸 폭에서는 사진이 두 장 들어가므로 높이를 한 칸 기준(4:3)으로 맞춘다 */
.device_page .dv_kinds .dk_wide .dk_photo {padding-top:37.2%;}
.device_page .dv_kinds .dk_imgs {position:absolute; left:0; top:0; right:0; bottom:0; display:-webkit-flex; display:flex; gap:16px;}
.device_page .dv_kinds .dk_photo img {-webkit-flex:1 1 0; flex:1 1 0; min-width:0; width:100%; height:100%; object-fit:contain;}
.device_page .dv_kinds .dk_ic {display:block; width:54px; height:54px; margin:18px auto 20px; border-radius:50%; background:#eef5fd; color:#0f5fbd; font-size:21px; line-height:54px;}
.device_page .dv_kinds .dk_tit {display:block; font-size:15px; font-weight:700; line-height:1.5; color:#16234a; word-break:keep-all;}

/* PCBs 남색 패널 안의 추가 문단 */
.device_page .dv_warn_lead {max-width:920px; margin:22px auto 0; font-size:15px; line-height:1.9; color:#c3d0e8; text-align:center; word-break:keep-all;}
.device_page .dv_warn_sub {margin:38px 0 0; font-size:20px; font-weight:700; color:#fff; text-align:center;}
.device_page .dv_warn_subdesc {margin:10px 0 0; font-size:14px; line-height:1.8; color:#a9b8d8; text-align:center;}
.device_page .dv_warn_slogan {margin:0 0 12px; font-size:17px; font-weight:600; color:#7fd0ff; text-align:center;}
.device_page .dv_warn_slogan em {margin:0 8px; font-style:normal; color:rgba(255,255,255,0.35);}

/* 이런 경우 문의해 주세요 (남색 패널 안) */
.device_page .dv_asks_wrap {margin-top:22px; padding:18px 30px 16px; border:1px solid rgba(255,255,255,0.10); border-radius:12px; background:rgba(255,255,255,0.06);}
.device_page .dv_asks_tit {margin:0 0 8px; font-size:18px; font-weight:700; color:#fff; text-align:center;}
.device_page .dv_asks {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin:0; padding:0; list-style:none;}
.device_page .dv_asks li {-webkit-flex:0 0 50%; flex:0 0 50%; max-width:50%; padding:5px 16px 5px 0; box-sizing:border-box; font-size:15.5px; line-height:1.6; color:#dbe4f5; word-break:keep-all;}
.device_page .dv_asks li i {margin-right:10px; color:#5fb4ff;}

/* ---------- 02. 취급품목 ---------- */
/* 품목 바로가기 (3depth 메뉴와 같은 순서) */
.device_page .dv_tabs {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:center; justify-content:center; gap:10px; margin:0 0 40px; padding:0; list-style:none;}
.device_page .dv_tabs a {display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; padding:11px 20px; border:1px solid #dbe3ef; border-radius:100px; background:#fff; font-size:15px; font-weight:600; color:#3f4b64; text-decoration:none; -webkit-transition:.2s ease; transition:.2s ease;}
.device_page .dv_tabs a:hover {border-color:#0079cf; background:#0079cf; color:#fff;}
.device_page .dv_tabs .dt_no {margin-right:8px; font-size:12px; font-weight:800; letter-spacing:0.5px; color:#0079cf;}
.device_page .dv_tabs a:hover .dt_no {color:#fff;}

/* 품목 블록 */
.device_page .dv_item {margin-top:26px; padding:32px 34px 30px; border:1px solid #e3e9f2; border-radius:16px; background:#fff; box-shadow:0 6px 20px rgba(22,35,74,0.05);}
.device_page .dv_item:first-of-type {margin-top:0;}
.device_page .di_head {display:-webkit-flex; display:flex; -webkit-align-items:flex-start; align-items:flex-start; gap:20px; padding-bottom:22px; border-bottom:1px solid #eef2f8;}
.device_page .di_ic {-webkit-flex:0 0 auto; flex:0 0 auto; width:60px; height:60px; border-radius:14px; background:-webkit-linear-gradient(top,#eaf3fd,#dce9f8); background:linear-gradient(160deg,#eaf3fd,#dce9f8); color:#0f5fbd; font-size:24px; line-height:60px; text-align:center;}
.device_page .di_head_txt {min-width:0;}
.device_page .di_no {display:block; margin-bottom:6px; font-size:13px; font-weight:800; letter-spacing:1px; color:#0079cf;}
.device_page .di_tit {margin:0 0 9px; font-size:22px; font-weight:700; color:#16234a; line-height:1.35;}
.device_page .di_desc {margin:0; font-size:16px; line-height:1.8; color:#5a6478; word-break:keep-all;}
.device_page .di_body {padding-top:22px;}
.device_page .di_listtit {display:block; margin-bottom:14px; font-size:15px; font-weight:700; color:#16234a;}
.device_page .di_list {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:10px; margin:0 0 20px; padding:0; list-style:none;}
.device_page .di_list li {position:relative; -webkit-flex:0 0 auto; flex:0 0 auto; padding:9px 16px 9px 30px; border-radius:8px; background:#f4f7fb; font-size:15.5px; line-height:1.4; color:#41506e;}
.device_page .di_list li:before {content:"\f00c"; position:absolute; left:12px; top:50%; margin-top:-6px; font-family:FontAwesome; font-size:10px; line-height:12px; color:#0079cf;}
.device_page .di_foot {margin:0; padding-top:16px; border-top:1px dashed #e6ecf5; font-size:15px; line-height:1.8; color:#6b7385; word-break:keep-all;}

/* ---------- 03. 처리절차 : 한눈에 보기 (한 줄 3칸 · 카드 사이 화살표) ---------- */
.device_page .dv_sum_wrap {padding:40px 30px 44px; border:1px solid #e6ecf5; border-radius:16px; background:#f5f8fc;}
.device_page .dv_sum_wrap .dv_sub_tit {margin-bottom:18px; padding-bottom:16px; font-size:25px; text-align:center;}
/* 제목 아래 짧은 파란 줄 */
.device_page .dv_sum_wrap .dv_sub_tit {position:relative;}
.device_page .dv_sum_wrap .dv_sub_tit:after {content:""; position:absolute; left:50%; bottom:0; width:38px; height:3px; margin-left:-19px; background:#1f7ae0; border-radius:2px;}
.device_page .dv_sum_desc {margin:0 0 42px; font-size:15px; line-height:1.7; color:#7a8398; text-align:center; word-break:keep-all;}

/* 처리절차 한눈에 보기 : 6단계 지그재그
      01        03        05        ← 윗자리
           02        04        06   ← 아랫자리 (반 칸씩 밀려 내려감)
   7칸 격자에서 카드가 2칸씩 차지하고 한 칸씩 밀려 들어갑니다. 칸 사이 간격을 넓게 잡아
   카드가 서로 겹치지 않고, 그 여백을 점선 곡선과 파란 원 화살표가 잇습니다.
   격자를 못 쓰는 구형 브라우저에서는 아래 '한 줄 3칸' 배치가 그대로 쓰입니다. */
.device_page .dv_sum {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-align-items:stretch; align-items:stretch; gap:60px 40px; margin:0; padding:0; list-style:none;}
.device_page .dv_sum_item {position:relative; -webkit-flex:0 0 calc(33.333% - 27px); flex:0 0 calc(33.333% - 27px); max-width:calc(33.333% - 27px); min-width:0; padding:26px 26px 28px; border:1px solid #eef2f8; border-radius:18px; background:#fff; box-shadow:0 10px 26px rgba(22,35,74,0.07); box-sizing:border-box;}
/* 2026-10-29 : 박스 안 아이콘(.ds_ic)을 빼고, 번호 아래 바로 제목이 오도록 간격을 맞췄습니다 */
.device_page .ds_no {display:inline-block; min-width:44px; margin-bottom:14px; padding:5px 13px; border-radius:100px; background:#16234a; color:#fff; font-size:14px; font-weight:800; letter-spacing:0.5px; line-height:1.25; text-align:center;}
.device_page .ds_tit {display:block; margin-bottom:12px; font-size:18px; font-weight:700; color:#16234a; line-height:1.4; white-space:nowrap;}
.device_page .ds_desc {font-size:14.5px; line-height:1.7; color:#9aa2b1; word-break:keep-all;}

@supports (display:grid) {
    /* grid-auto-rows:1fr + align-items:stretch → 여섯 칸의 높이가 가장 큰 칸에 맞춰 모두 같아집니다 */
    .device_page .dv_sum {display:grid; grid-template-columns:repeat(7, 1fr); grid-auto-rows:1fr; -webkit-column-gap:5%; column-gap:5%; row-gap:56px; -webkit-align-items:stretch; align-items:stretch;}
    .device_page .dv_sum_item {max-width:none;}
    .device_page .dv_sum_item:nth-child(1) {grid-column:1 / span 2; grid-row:1;}
    .device_page .dv_sum_item:nth-child(2) {grid-column:2 / span 2; grid-row:2;}
    .device_page .dv_sum_item:nth-child(3) {grid-column:3 / span 2; grid-row:1;}
    .device_page .dv_sum_item:nth-child(4) {grid-column:4 / span 2; grid-row:2;}
    .device_page .dv_sum_item:nth-child(5) {grid-column:5 / span 2; grid-row:1;}
    .device_page .dv_sum_item:nth-child(6) {grid-column:6 / span 2; grid-row:2;}

    /* 단계 사이 연결 점선 : 카드 모서리에서 대각선으로 이어집니다.
       홀수(윗자리) → 짝수 : 오른쪽 아래로 / 짝수(아랫자리) → 홀수 : 오른쪽 위로 */
    .device_page .dv_sum_item:before {content:""; position:absolute; z-index:0; right:-1px; width:2px; height:96px;
        background:-webkit-repeating-linear-gradient(top,#b6c4d8 0,#b6c4d8 4px,transparent 4px,transparent 11px);
        background:repeating-linear-gradient(to bottom,#b6c4d8 0,#b6c4d8 4px,transparent 4px,transparent 11px);}
    .device_page .dv_sum_item:nth-child(2n+1):before {top:100%; -webkit-transform-origin:top center; transform-origin:top center; -webkit-transform:rotate(-38deg); transform:rotate(-38deg);}
    .device_page .dv_sum_item:nth-child(2n):before   {bottom:100%; -webkit-transform-origin:bottom center; transform-origin:bottom center; -webkit-transform:rotate(38deg); transform:rotate(38deg);}

    /* 파란 원 화살표 : 연결 점선이 시작되는 카드 오른쪽 아래 모서리에 정확히 겹칩니다 */
    .device_page .dv_sum_item:nth-child(2n+1):after {content:"\f178"; position:absolute; z-index:2; right:-18px; bottom:-18px; width:36px; height:36px; border-radius:50%; background:#1f7ae0; color:#fff; font-family:FontAwesome; font-size:15px; line-height:36px; text-align:center; box-shadow:0 5px 12px rgba(31,122,224,0.35); -webkit-transform:rotate(45deg); transform:rotate(45deg);}
    .device_page .dv_sum_item:nth-child(2n):after {display:none;}
    .device_page .dv_sum_item:last-child:before, .device_page .dv_sum_item:last-child:after {display:none;}
}

@media (max-width:1200px) {
    .device_page .dv_sum_item {padding:22px 20px 24px;}
    .device_page .ds_tit {font-size:16.5px;}
    .device_page .ds_desc {font-size:14px;}
}

@supports (display:grid) {
    @media (max-width:1200px) {
        .device_page .dv_sum {-webkit-column-gap:4%; column-gap:4%; row-gap:46px;}
        .device_page .dv_sum_item:before {height:80px;}
    }
}

/* 960px 이하 : 지그재그를 풀고 한 줄 2칸으로. 연결 표시는 감춥니다 (칸이 좁아 자리가 나오지 않습니다) */
@media (max-width:960px) {
    .device_page .dv_sum {display:-webkit-flex; display:flex; gap:20px;}
    .device_page .dv_sum_item:before, .device_page .dv_sum_item:after {display:none;}
}

/* ---------- 03. 처리절차 : 단계별 상세 (왼쪽 STEP 번호 + 오른쪽 카드) ---------- */
.device_page .dv_steps {margin:0; padding:0; list-style:none;}
.device_page .dv_step {position:relative; display:-webkit-flex; display:flex; -webkit-align-items:flex-start; align-items:flex-start; gap:26px; padding-bottom:28px;}
.device_page .dv_step:last-child {padding-bottom:0;}
/* 번호 아래로 이어지던 세로 연결선은 쓰지 않습니다.
   단계 카드가 접힌 상태에서는 카드가 낮아 선이 토막토막 끊겨 보이기 때문입니다.
   다시 쓰려면 아래 두 줄의 주석을 풀어주세요.
.device_page .dv_step:before {content:""; position:absolute; left:44px; top:126px; bottom:0; width:2px; background:#e0e7f2;}
.device_page .dv_step:last-child:before {display:none;}
*/
.device_page .dv_step {padding-bottom:14px;}
.device_page .dp_side {-webkit-flex:0 0 90px; flex:0 0 90px; text-align:center;}
.device_page .dp_no {display:block; padding:9px 0 11px; border-radius:10px; background:#16234a; color:#fff; font-size:19px; font-weight:800; line-height:1.1;}
.device_page .dp_no em {display:block; margin-bottom:4px; font-style:normal; font-size:10px; font-weight:700; letter-spacing:1.5px; color:#8fb0ff;}
/* 2026-10-29 : STEP 번호 아래 아이콘(.dp_ic)은 뺐습니다 */
/* 단계별 상세 안내 전체 묶음 : 한 번에 접었다 펼칩니다 */
.device_page .dv_steps_box {margin-top:60px; border:1px solid #e3e9f2; border-radius:14px; background:#fff; overflow:hidden;}
.device_page .dv_steps_head {position:relative; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; gap:14px; padding:22px 26px; cursor:pointer; list-style:none; -webkit-tap-highlight-color:transparent;}
.device_page .dv_steps_head::-webkit-details-marker {display:none;}
.device_page .dv_steps_head::marker {content:"";}
.device_page .dv_steps_head:hover {background:#f7f9fc;}
.device_page .dv_steps_box[open] .dv_steps_head {background:#f5f8fc; border-bottom:1px solid #eef2f8;}
.device_page .dv_steps_head .dv_sub_tit {-webkit-flex:1 1 auto; flex:1 1 auto; min-width:0; margin:0;}
.device_page .ds_count {-webkit-flex:0 0 auto; flex:0 0 auto; padding:5px 12px; border-radius:100px; background:#eef4fc; color:#0f5fbd; font-size:13px; font-weight:700;}
.device_page .dv_steps_head:hover:after {content:"단계별 내용을 보려면 클릭하세요"; position:absolute; right:120px; top:50%; z-index:3; padding:7px 13px; border-radius:7px; background:#16234a; color:#fff; font-size:13px; font-weight:600; line-height:1.3; white-space:nowrap; -webkit-transform:translateY(-50%); transform:translateY(-50%); box-shadow:0 6px 16px rgba(22,35,74,0.25);}
.device_page .dv_steps_box[open] .dv_steps_head:hover:after {content:"접으려면 클릭하세요";}
.device_page .dv_steps_box[open] .dv_steps_head .dp_arrow {-webkit-transform:translateY(2px) rotate(-135deg); transform:translateY(2px) rotate(-135deg); border-color:#0079cf;}
.device_page .dv_steps {padding:26px 26px 20px;}

/* 단계 카드 : 제목만 보이고 누르면 내용이 펼쳐집니다 (details/summary · 자바스크립트 없이 동작) */
.device_page .dp_body {-webkit-flex:1 1 auto; flex:1 1 auto; min-width:0; padding:0; border:1px solid #e6ecf5; border-radius:14px; background:#fff; box-shadow:0 4px 14px rgba(22,35,74,0.04); overflow:hidden;}
/* 제목줄 : 누르는 영역 */
.device_page .dp_head {position:relative; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; gap:14px; padding:20px 26px; cursor:pointer; list-style:none; -webkit-tap-highlight-color:transparent;}
.device_page .dp_head::-webkit-details-marker {display:none;}
.device_page .dp_head::marker {content:"";}
.device_page .dp_head:hover {background:#f7f9fc;}
.device_page .dp_box[open] .dp_head {background:#f5f8fc; border-bottom:1px solid #eef2f8;}
/* 마우스를 올리면 안내 말풍선 (펼친 뒤에는 문구가 바뀝니다) */
.device_page .dp_head:hover:after {content:"상세 내용을 보려면 클릭하세요"; position:absolute; right:44px; top:50%; z-index:3; padding:7px 13px; border-radius:7px; background:#16234a; color:#fff; font-size:13px; font-weight:600; line-height:1.3; white-space:nowrap; -webkit-transform:translateY(-50%); transform:translateY(-50%); box-shadow:0 6px 16px rgba(22,35,74,0.25);}
.device_page .dp_box[open] .dp_head:hover:after {content:"접으려면 클릭하세요";}
.device_page .dp_tit {-webkit-flex:1 1 auto; flex:1 1 auto; min-width:0; display:block; margin:0; font-size:19px; font-weight:700; color:#16234a; line-height:1.4; word-break:keep-all;}
/* 오른쪽 꺾쇠 : 펼치면 위를 향한다 */
.device_page .dp_arrow {-webkit-flex:0 0 auto; flex:0 0 auto; width:11px; height:11px; margin-right:4px; border-right:2px solid #8a94a6; border-bottom:2px solid #8a94a6; -webkit-transform:translateY(-3px) rotate(45deg); transform:translateY(-3px) rotate(45deg); -webkit-transition:.2s ease; transition:.2s ease;}
.device_page .dp_box[open] .dp_arrow {-webkit-transform:translateY(2px) rotate(-135deg); transform:translateY(2px) rotate(-135deg); border-color:#0079cf;}
/* 펼쳐지는 내용 */
.device_page .dp_inner {padding:22px 26px 24px;}
.device_page .dp_desc {margin:0; font-size:16px; line-height:1.9; color:#5a6478; word-break:keep-all;}
.device_page .dp_docs {margin-top:18px; padding:18px 20px 16px; border-radius:10px; background:#f4f7fb;}
.device_page .dp_docs_tit {display:block; margin-bottom:12px; font-size:14.5px; font-weight:700; color:#16234a;}
.device_page .dp_doclist {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:8px 10px; margin:0; padding:0; list-style:none;}
.device_page .dp_doclist li {position:relative; padding:6px 14px 6px 26px; border:1px solid #e3eaf5; border-radius:7px; background:#fff; font-size:15px; line-height:1.4; color:#4a5570;}
.device_page .dp_doclist li:before {content:"\f0da"; position:absolute; left:13px; top:6px; font-family:FontAwesome; font-size:11px; line-height:20px; color:#0079cf;}
.device_page .dp_note {margin:16px 0 0; padding-top:14px; border-top:1px dashed #e6ecf5; font-size:14.5px; line-height:1.75; color:#7a8398;}

/* ---------- 관련법규 : 법령 목록 (제목만 보이고 눌러서 펼침) ----------
   details/summary 태그를 써서 자바스크립트 없이 동작합니다. 첫 항목만 펼친 채로 시작합니다.
   아래 '법령 체계 · 상황별 기준 · 신고 확인사항' 스타일 중 .dv_fw 는 지금 쓰이지 않지만,
   그 구성으로 다시 바꿀 때를 위해 남겨두었습니다. (device/_backup/ 참고) */
.device_page .dv_laws {margin:0; padding:0; list-style:none;}
.device_page .dv_law {margin-top:14px; border:1px solid #e3e9f2; border-radius:14px; background:#fff; box-shadow:0 6px 20px rgba(22,35,74,0.05); overflow:hidden;}
.device_page .dv_law:first-child {margin-top:0;}
.device_page .dl_box {width:100%;}
/* 제목줄 : 누르는 영역 */
.device_page .dl_head {position:relative; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; gap:16px; padding:22px 26px; cursor:pointer; list-style:none; -webkit-tap-highlight-color:transparent;}
/* 마우스를 올리면 안내 말풍선이 뜹니다 (펼친 뒤에는 문구가 바뀝니다) */
.device_page .dl_head:hover:after {content:"상세 내용을 보려면 클릭하세요"; position:absolute; right:46px; top:50%; z-index:3; padding:7px 13px; border-radius:7px; background:#16234a; color:#fff; font-size:13px; font-weight:600; line-height:1.3; white-space:nowrap; -webkit-transform:translateY(-50%); transform:translateY(-50%); box-shadow:0 6px 16px rgba(22,35,74,0.25);}
.device_page .dl_box[open] .dl_head:hover:after {content:"접으려면 클릭하세요";}
.device_page .dl_head::-webkit-details-marker {display:none;}
.device_page .dl_head::marker {content:"";}
.device_page .dl_head:hover {background:#f7f9fc;}
.device_page .dl_box[open] .dl_head {background:#f5f8fc; border-bottom:1px solid #eef2f8;}
.device_page .dl_no {-webkit-flex:0 0 auto; flex:0 0 auto; margin:0; padding:4px 12px; border-radius:6px; background:#eef4fc; color:#0f5fbd; font-size:12px; font-weight:800; letter-spacing:1px;}
/* 2026-10-29 : 법령 제목 앞 아이콘(.dl_ic)은 뺐습니다 */
.device_page .dl_tit {-webkit-flex:1 1 auto; flex:1 1 auto; min-width:0; margin:0; padding:0; font-size:19px; font-weight:700; color:#16234a; line-height:1.4; word-break:keep-all;}
/* 오른쪽 꺾쇠 : 펼치면 위를 향한다 */
.device_page .dl_arrow {-webkit-flex:0 0 auto; flex:0 0 auto; width:11px; height:11px; margin-right:4px; border-right:2px solid #8a94a6; border-bottom:2px solid #8a94a6; -webkit-transform:translateY(-3px) rotate(45deg); transform:translateY(-3px) rotate(45deg); -webkit-transition:.2s ease; transition:.2s ease;}
.device_page .dl_box[open] .dl_arrow {-webkit-transform:translateY(2px) rotate(-135deg); transform:translateY(2px) rotate(-135deg); border-color:#0079cf;}
/* 펼쳐지는 내용 */
.device_page .dl_body {padding:24px 26px 26px;}
.device_page .dl_desc {margin:0; font-size:16px; line-height:1.9; color:#5a6478; word-break:keep-all;}
.device_page .dl_list {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:8px; margin:16px 0 0; padding:0; list-style:none;}
.device_page .dl_list li {position:relative; padding:8px 14px 8px 27px; border-radius:8px; background:#f4f7fb; font-size:15px; line-height:1.4; color:#41506e;}
.device_page .dl_list li:before {content:"\f00c"; position:absolute; left:11px; top:9px; font-family:FontAwesome; font-size:10px; line-height:14px; color:#0079cf;}
.device_page .dl_note {margin:16px 0 0; padding-top:14px; border-top:1px dashed #e6ecf5; font-size:14.5px; line-height:1.75; color:#7a8398;}

/* ---------- 04. 관련법규 ----------
   화면 구성 : 01 법령 체계(남색 조직도) → 02 상황별 확인 기준(표) → 03 신고·변경 확인사항
   이전 화면의 카드(.dv_laws / .dv_law)는 쓰지 않습니다. 옛 파일은 device/_backup/ 에 있습니다. */

/* 구역 머리말 */
.device_page .dv_eyebrow {margin:0 0 10px; font-size:12px; font-weight:800; letter-spacing:2px; color:#7fb2f0;}
.device_page .dv_eyebrow_dark {color:#0f5fbd;}
.device_page .dv_sect_tit {margin:0 0 10px; font-size:26px; font-weight:700; color:#16234a; line-height:1.35;}
.device_page .dv_sect_desc {margin:0 0 30px; font-size:15.5px; line-height:1.8; color:#7a8398; word-break:keep-all;}

/* 01. 법령 체계 : 남색 패널 안에 두 갈래 조직도 */
.device_page .dv_fw {position:relative; margin-top:10px; padding:44px 44px 48px; border-radius:16px; overflow:hidden; background:-webkit-linear-gradient(315deg,#0e1830,#1b2c5c); background:linear-gradient(135deg,#1b2c5c 0%,#0e1830 100%);}
.device_page .dv_fw:before {content:""; position:absolute; top:0; left:0; right:0; bottom:0; background-image:linear-gradient(rgba(255,255,255,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.05) 1px,transparent 1px); background-size:46px 46px;}
.device_page .dv_fw > * {position:relative;}
.device_page .dv_fw_tit {margin:0 0 12px; font-size:27px; font-weight:700; color:#fff; line-height:1.3;}
.device_page .dv_fw_desc {margin:0; font-size:15px; line-height:1.8; color:#a9b8d8; word-break:keep-all;}

/* 두 갈래로 갈라지는 연결선 (가운데 줄기 → 좌우 가지) */
.device_page .fw_tree {position:relative; display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:24px; margin-top:74px;}
.device_page .fw_tree:before {content:""; position:absolute; left:25%; right:25%; top:-30px; height:2px; background:rgba(255,255,255,0.22);}
.device_page .fw_tree:after {content:""; position:absolute; left:50%; top:-54px; width:2px; height:24px; margin-left:-1px; background:rgba(255,255,255,0.22);}
.device_page .fw_group {position:relative; -webkit-flex:1 1 380px; flex:1 1 380px; min-width:0; padding:24px 24px 26px; border:1px solid rgba(255,255,255,0.12); border-radius:14px; background:rgba(255,255,255,0.06);}
.device_page .fw_group:before {content:""; position:absolute; left:50%; top:-30px; width:2px; height:30px; margin-left:-1px; background:rgba(255,255,255,0.22);}
.device_page .fg_head {display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; gap:14px; margin-bottom:20px;}
.device_page .fg_ic {-webkit-flex:0 0 auto; flex:0 0 auto; width:44px; height:44px; border-radius:12px; background:rgba(127,178,240,0.18); color:#8fc2ff; font-size:18px; line-height:44px; text-align:center;}
.device_page .fg_tit {font-size:19px; font-weight:700; color:#fff; line-height:1.4;}
.device_page .fg_items {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:14px;}
.device_page .fg_item {-webkit-flex:1 1 200px; flex:1 1 200px; min-width:0; padding:18px 18px 20px; border-radius:10px; background:#fff;}
.device_page .fi_tit {display:block; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid #eef2f8; font-size:15.5px; font-weight:700; color:#0f5fbd; line-height:1.45; word-break:keep-all;}
.device_page .fi_desc {margin:0; font-size:14px; line-height:1.7; color:#7a8398; word-break:keep-all;}

/* 02. 상황별 확인 기준 : 표 */
.device_page .dv_cp {margin-top:70px;}
.device_page .dv_cp_wrap {overflow-x:auto; -webkit-overflow-scrolling:touch;}
.device_page .dv_cp_tbl {width:100%; min-width:720px; border-collapse:collapse; border-top:2px solid #16234a;}
.device_page .dv_cp_tbl thead th {padding:15px 20px; background:#16234a; color:#fff; font-size:15px; font-weight:700; text-align:left;}
.device_page .dv_cp_tbl tbody th, .device_page .dv_cp_tbl tbody td {padding:20px; border-bottom:1px solid #e3e9f2; font-size:15px; line-height:1.6; text-align:left; vertical-align:middle;}
.device_page .dv_cp_tbl tbody tr:nth-child(2n) {background:#f7f9fc;}
.device_page .dv_cp_tbl tbody th {font-weight:700; color:#16234a;}
/* 2026-10-29 : 표 구분 칸 아이콘(.cp_ic)은 뺐습니다 */
.device_page .cp_case {display:inline-block; vertical-align:middle; word-break:keep-all;}
.device_page .cp_law strong {display:block; font-size:15px; font-weight:700; color:#0f5fbd; line-height:1.5;}
.device_page .cp_law span {display:block; margin-top:3px; font-size:13.5px; color:#8a93a5;}
.device_page .cp_list {margin:0; padding:0; list-style:none;}
.device_page .cp_list li {position:relative; padding:3px 0 3px 14px; font-size:14.5px; line-height:1.7; color:#5a6478; word-break:keep-all;}
.device_page .cp_list li:before {content:""; position:absolute; left:0; top:14px; width:5px; height:5px; border-radius:50%; background:#0079cf;}

/* 03. 신고 · 변경 시 확인사항 : 왼쪽 사진 + 오른쪽 체크 목록 */
.device_page .dv_ck {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-align-items:center; align-items:center; gap:44px; margin-top:70px; padding:40px 44px; border:1px solid #e6ecf5; border-radius:16px; background:#f5f8fc;}
/* 왼쪽 사진 : 신고증명서 2장을 나란히. 세로로 긴 그림이라 높이를 제한해 오른쪽 글과 균형을 맞춘다.
   사진을 누르면 큰 그림 보기(.ht_viewer)가 열립니다. */
.device_page .dv_ck .ck_photos {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:14px; -webkit-flex:0 1 440px; flex:0 1 440px; min-width:0;}
.device_page .dv_ck .ck_shot {position:relative; -webkit-flex:1 1 190px; flex:1 1 190px; min-width:0; display:block; border:1px solid #e6ecf5; border-radius:10px; overflow:hidden; background:#fff; text-align:center; -webkit-transition:.2s ease; transition:.2s ease;}
.device_page .dv_ck .ck_shot:hover {border-color:#0079cf; box-shadow:0 8px 20px rgba(0,121,207,0.16);}
.device_page .dv_ck .ck_shot img {display:block; width:100%; height:auto;}
/* 오른쪽 아래 돋보기 표시 */
.device_page .dv_ck .ck_zoom {position:absolute; right:8px; bottom:8px; width:26px; height:26px; border-radius:50%; background:rgba(22,35,74,0.75); color:#fff; font-size:16px; font-weight:700; line-height:26px; text-align:center;}
.device_page .dv_ck .ck_shot:hover .ck_zoom {background:#0079cf;}
.device_page .dv_ck .ck_body {-webkit-flex:1 1 420px; flex:1 1 420px; min-width:0;}
.device_page .ck_list {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin:0; padding:0; list-style:none;}
.device_page .ck_list li {display:-webkit-flex; display:flex; -webkit-align-items:flex-start; align-items:flex-start; gap:10px; -webkit-flex:0 0 50%; flex:0 0 50%; max-width:50%; padding:9px 16px 9px 0; box-sizing:border-box; font-size:15px; line-height:1.6; color:#41506e; word-break:keep-all;}
.device_page .ck_list li i {-webkit-flex:0 0 auto; flex:0 0 auto; width:20px; height:20px; margin-top:1px; border-radius:50%; background:#0079cf; color:#fff; font-size:10px; line-height:20px; text-align:center;}

@media (max-width:1200px) {
    /* 폭이 좁아지면 화살표를 넣을 자리가 없으므로 화살표를 빼고 카드 간격을 좁힌다 (한 줄 4칸 유지) */
    .oil_page .oil_steps {gap:30px 20px;}
    .oil_page .oil_step {-webkit-flex:0 0 calc(25% - 15px); flex:0 0 calc(25% - 15px); max-width:calc(25% - 15px); padding:24px 16px 22px;}
    .oil_page .oil_step:after {display:none;}
    .oil_page .oil_step .st_tit {font-size:16.5px;}
    .oil_page .oil_step .st_desc {font-size:14px;}
    .oil_page .oil_effects li {-webkit-flex:0 0 calc(33.333% - 16px); flex:0 0 calc(33.333% - 16px);}
    /* 관리대상기기 : 요약 카드 화살표 제거 */
    .device_page .ds_tit {font-size:16.5px;}
    .device_page .ds_desc {font-size:14px;}
}

@media (max-width:960px) {
    /* 히어로 세로 배치 / 단계 카드 3칸 / 효과 3칸 유지 */
    .oil_page .oil_hero {gap:28px;}
    .oil_page .oh_tit {font-size:31px;}
    .oil_page .oh_img {-webkit-flex:1 1 100%; flex:1 1 100%;}
    .oil_page .oh_img img {height:300px;}
    .oil_page .oil_step {-webkit-flex:0 0 calc(33.333% - 13.4px); flex:0 0 calc(33.333% - 13.4px); max-width:calc(33.333% - 13.4px);}
    .oil_page .oil_effects {gap:16px;}
    .oil_page .oil_effects li, .oil_page .oil_effects li:first-child {-webkit-flex:0 0 calc(33.333% - 10.7px); flex:0 0 calc(33.333% - 10.7px); padding:30px 18px 26px;}
    .oil_page .oil_warn .warn_photo {-webkit-flex:1 1 100%; flex:1 1 100%;}
    .oil_page .oil_warn .warn_photo img {min-height:230px;}
    .oil_page .oil_cta {gap:30px; padding:0 30px;}
    .oil_page .oil_cta_photo {min-height:0;}
    .oil_page .oil_cta .cta_bg img {width:100%; margin-left:0; object-position:66% 14%;}
    .oil_page .cta_photo_mid .cta_bg img {left:40%; width:60%; object-position:center 40%;}
    .oil_page .oil_cta .cta_bg:after {background:-webkit-linear-gradient(left,#16234a 0,rgba(22,35,74,0.90) 52%,rgba(22,35,74,0.55) 100%); background:linear-gradient(90deg,#16234a 0,rgba(22,35,74,0.90) 52%,rgba(22,35,74,0.55) 100%);}
    .oil_page .oil_cta .cta_body {padding:38px 0 18px;}
    .oil_page .oil_cta .cta_act {-webkit-flex:1 1 100%; flex:1 1 100%; padding:0 0 38px; text-align:left;}
    .oil_page .oil_cta .cta_ask br {display:none;}
    /* 관리대상기기 : 요약 2칸 / 품목 · 법규 카드 여백 축소 */
    /* 좁은 화면에서는 한 줄 2칸으로 */
    .device_page .dv_sum_item {-webkit-flex:0 0 calc(50% - 10px); flex:0 0 calc(50% - 10px); max-width:calc(50% - 10px);}
    .device_page .dv_item {padding:26px 24px 24px;}
    .device_page .dv_fw {padding:34px 26px 36px;}
    .device_page .dv_ck {gap:28px; padding:28px 24px;}
}

@media (max-width:768px) {
    .oil_page .oh_tit {font-size:26px;}
    .oil_page .oil_lead {font-size:15px;}
    .oil_page .oil_lead_sub {padding:16px 18px; font-size:13.5px;}
    .oil_page .oh_img img {height:230px;}
    .oil_page .oil_sec {padding-top:52px;}
    .oil_page .oil_sec_first {padding-top:44px;}
    .oil_page .oil_sec_first:first-child {padding-top:2px;}
    .oil_page .oil_sec_head {margin-bottom:26px; padding-bottom:13px;}
    .oil_page .oil_sec_tit {font-size:23px;}
    .oil_page .oil_sec_tit:before {width:4px; margin-right:10px;}
    /* 좁은 화면에서는 설명을 제목 아래로 내리고 세로 구분선을 없앤다 */
    .oil_page .oil_sec_head_row {display:block; margin-bottom:28px;}
    .oil_page .oil_sec_head_row .oil_sec_desc {margin:9px 0 0; padding-left:0; font-size:14.5px;}
    .oil_page .oil_sec_head_row .oil_sec_desc:before {display:none;}
    .oil_page .oil_cols {gap:26px;}
    .oil_page .om_tit {font-size:19px;}
    .oil_page .oil_side {padding:24px 20px 26px;}
    .oil_page .oil_need_box {margin-top:26px; padding:24px 20px 22px;}
    .oil_page .oil_cols_photo {display:block;}
    .oil_page .oil_cols_photo .oil_photo {max-width:none; margin-top:26px;}
    .oil_page .oil_ref_grid {grid-template-columns:1fr 1fr; grid-template-rows:auto; gap:10px; height:auto;}
    .oil_page .oil_ref_grid .rf_item {aspect-ratio:4/3;}
    .oil_page .oil_ref_grid .rf_item:first-child {grid-row:auto; grid-column:1 / 3;}
    .oil_page .oil_ref_grid .rf_cap {left:8px; bottom:8px; padding:4px 10px; font-size:12px;}
    .oil_page .oil_check_2col {display:block;}
    .oil_page .oil_check_2col li:last-child {border-bottom:0;}
    .oil_page .os_tit {font-size:17px;}
    .oil_page .oil_check li {font-size:14px;}
    .oil_page .oil_feats li {-webkit-flex:0 0 calc(33.333% - 6.7px); flex:0 0 calc(33.333% - 6.7px);}
    .oil_page .oil_note {-webkit-align-items:flex-start; align-items:flex-start; padding:16px 18px; font-size:14px;}
    .oil_page .oil_note .note_ic {margin-top:2px;}
    /* 단계 카드 2칸 */
    .oil_page .oil_steps {gap:16px 14px;}
    .oil_page .oil_step {-webkit-flex:0 0 calc(50% - 7px); flex:0 0 calc(50% - 7px); max-width:calc(50% - 7px); padding:20px 14px 20px;}
    .oil_page .oil_step .st_no {min-width:40px; margin-bottom:11px; padding:4px 11px; font-size:14px;}
    .oil_page .oil_step .st_tit {margin-bottom:13px; font-size:15.5px;}
    .oil_page .oil_step .st_photo {margin-bottom:14px;}
    .oil_page .oil_step .st_desc {font-size:13.5px; line-height:1.7;}
    .oil_page .oil_warn {margin-top:44px; padding:32px 20px 30px;}
    .oil_page .oil_warn .warn_tit {font-size:21px;}
    .oil_page .oil_warn .warn_desc {font-size:14px;}
    .oil_page .oil_warn .warn_case {-webkit-flex:1 1 100%; flex:1 1 100%; padding:22px 20px 24px;}
    .oil_page.device_page .oil_warn {padding:26px 18px 20px;}
    .device_page .dv_precheck {padding:18px 18px;}
    .device_page .dv_precheck .pc_tit {font-size:16px;}
    .device_page .dv_precheck p {font-size:14px;}
    .device_page .dv_precheck p br {display:none;}
    .device_page .oil_warn .warn_case {padding:14px 16px 16px;}
    /* 효과 1칸 : 카드를 위아래로 나열 */
    .oil_page .oil_effects {gap:14px;}
    .oil_page .oil_effects li, .oil_page .oil_effects li:first-child {-webkit-flex:0 0 100%; flex:0 0 100%; padding:26px 20px 22px;}
    .oil_page .oil_effects .ef_ic {width:54px; height:54px; margin-bottom:14px; font-size:21px; line-height:52px;}
    .oil_page .oil_effects .ef_tit {font-size:16px;}
    .oil_page .oil_cta {margin-top:48px; gap:0; padding:0 20px;}
    .oil_page .oil_cta .cta_body {-webkit-flex:1 1 100%; flex:1 1 100%; padding:30px 0 0;}
    .oil_page .oil_cta .cta_tit {font-size:22px;}
    .oil_page .oil_cta .cta_desc {font-size:14px;}
    .oil_page .oil_cta .cta_act {padding:22px 0 34px;}
    .oil_page .oil_cta .cta_ask {font-size:14px;}
    .oil_page .oil_cta .cta_btn {padding:13px 30px; font-size:15px;}

    /* ---------- 관리대상기기 처리 : 모바일 ---------- */
    .device_page .dv_lead {margin-bottom:28px; font-size:14.5px; line-height:1.8;}
    .device_page .dv_flow_top {display:block; margin-bottom:36px;}
    .device_page .dv_flow_top .ft_tit {font-size:20px;}
    .device_page .dv_flow_top .ft_desc {font-size:14.5px;}
    .device_page .dv_flow_top .ft_stats {gap:8px;}
    .device_page .dv_flow_top .ft_stats div {padding:12px 6px;}
    .device_page .dv_flow_top .ft_stats b {font-size:18px;}
    .device_page .dv_flow_top .ft_stats span {font-size:12px;}
    .device_page .dv_flow_top .ft_photo {margin-top:24px;}
    .device_page .dv_flow_top .ft_photo img {height:auto;}
    .device_page .dv_sub_tit {font-size:18px;}
    .device_page .dv_sub_tit_mt {margin-top:44px;}
    /* 기기 카드 : 2칸 (사진 두 장짜리 칸은 한 줄 전체) */
    .device_page .dv_kinds {gap:10px; margin-top:30px;}
    .device_page .dv_kinds li {-webkit-flex:0 0 calc(50% - 5px); flex:0 0 calc(50% - 5px); max-width:calc(50% - 5px); padding:12px 12px 14px;}
    .device_page .dv_kinds li.dk_wide {-webkit-flex:0 0 100%; flex:0 0 100%; max-width:100%;}
    .device_page .dv_kinds .dk_wide .dk_photo {padding-top:36%;}
    .device_page .dv_kinds .dk_imgs {gap:10px;}
    .device_page .dv_kinds .dk_tit {font-size:14px;}
    /* 확인사항 · 문의 항목은 1단으로 */
    .device_page .oil_check.dv_check_2col li {-webkit-flex:0 0 100%; flex:0 0 100%; max-width:100%; padding:11px 0 11px 28px;}
    .device_page .oil_check.dv_check_2col li + li {border-top:1px solid #f1f5fa;}
    .device_page .dv_asks li {-webkit-flex:0 0 100%; flex:0 0 100%; max-width:100%; padding-right:0; font-size:14.5px;}
    .device_page .dv_asks_wrap {padding:16px 18px 14px;}
    .device_page .dv_asks_tit {font-size:16px;}
    .device_page .dv_warn_lead, .device_page .dv_warn_subdesc {font-size:13px;}
    .device_page .dv_warn_sub {font-size:18px;}
    .device_page .dv_warn_slogan {font-size:15px;}
    /* 품목 : 아이콘을 제목 위로 */
    .device_page .dv_tabs {gap:8px; margin-bottom:28px;}
    .device_page .dv_tabs a {padding:9px 15px; font-size:13.5px;}
    .device_page .dv_item {padding:22px 18px 22px;}
    .device_page .di_head {display:block;}
    .device_page .di_ic {width:50px; height:50px; margin-bottom:14px; font-size:20px; line-height:50px;}
    .device_page .di_tit {font-size:19px;}
    .device_page .di_desc, .device_page .di_foot {font-size:15px;}
    .device_page .di_list li {font-size:14.5px;}
    /* 요약 : 1칸 */
    .device_page .dv_sum_wrap {padding:24px 18px 26px;}
    .device_page .dv_sum {gap:14px;}
    .device_page .dv_sum_item {-webkit-flex:0 0 100%; flex:0 0 100%; max-width:100%; padding:20px 16px 20px;}
    .device_page .dv_sum_desc {margin-bottom:26px; font-size:14px;}
    .device_page .ds_tit {font-size:16px;}
    /* 단계별 상세 : 번호를 카드 위로 올리고 연결선 제거 */
    .device_page .dv_step {display:block; padding-bottom:18px;}
    .device_page .dv_step:before {display:none;}
    .device_page .dp_side {display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; margin-bottom:12px; text-align:left;}
    .device_page .dp_no {padding:7px 14px 8px; font-size:16px;}
    .device_page .dp_no em {display:inline; margin:0 6px 0 0; font-size:10px;}
    .device_page .dp_body {padding:0;}
    .device_page .dv_steps_box {margin-top:40px;}
    .device_page .dv_steps_head {gap:10px; padding:16px;}
    .device_page .dv_steps_head:hover:after {display:none;}
    .device_page .ds_count {padding:4px 10px; font-size:12px;}
    .device_page .dv_steps {padding:18px 14px 14px;}
    .device_page .dp_head {gap:10px; padding:15px 16px;}
    .device_page .dp_head:hover:after {display:none;}
    .device_page .dp_inner {padding:18px 16px 20px;}
    .device_page .dp_tit {font-size:17px;}
    .device_page .dp_desc {font-size:14px; line-height:1.85;}
    .device_page .dp_docs {padding:16px 16px 14px;}
    .device_page .dp_doclist li {font-size:14.5px;}
    /* 관련법규 : 법령 목록 */
    .device_page .dv_law {margin-top:10px;}
    .device_page .dl_head {gap:12px; padding:16px 16px;}
    .device_page .dl_head:hover:after {display:none;}
    .device_page .dl_tit {font-size:16.5px;}
    .device_page .dl_body {padding:18px 16px 20px;}
    .device_page .dl_desc {font-size:14px; line-height:1.85;}
    .device_page .dl_list li {font-size:14.5px;}
    /* (아래는 현재 쓰지 않는 새 구성용 스타일) */
    .device_page .dv_sect_tit {font-size:20px;}
    .device_page .dv_sect_desc {margin-bottom:22px; font-size:14px;}
    .device_page .dv_fw {padding:26px 18px 28px;}
    .device_page .dv_fw_tit {font-size:21px;}
    .device_page .dv_fw_desc {font-size:14px;}
    .device_page .dv_fw_desc br {display:none;}
    /* 좁은 화면에서는 갈래가 위아래로 쌓이므로 연결선을 감춥니다 */
    .device_page .fw_tree {gap:14px; margin-top:24px;}
    .device_page .fw_tree:before, .device_page .fw_tree:after, .device_page .fw_group:before {display:none;}
    .device_page .fw_group {padding:20px 18px 22px;}
    .device_page .fg_tit {font-size:17px;}
    .device_page .fg_item {-webkit-flex:1 1 100%; flex:1 1 100%;}
    .device_page .fi_desc br {display:none;}
    .device_page .dv_cp, .device_page .dv_ck {margin-top:48px;}
    .device_page .dv_cp_tbl tbody th, .device_page .dv_cp_tbl tbody td {padding:14px; font-size:14.5px;}
    .device_page .dv_ck {gap:22px; padding:22px 18px;}
    .device_page .dv_ck .ck_photos {-webkit-flex:1 1 100%; flex:1 1 100%;}
    .device_page .dv_ck .ck_shot img {max-height:300px;}
    .device_page .ck_list li {-webkit-flex:0 0 100%; flex:0 0 100%; max-width:100%; padding-right:0; font-size:14.5px;}
}


/* ============================================================
   변압기 (.trans_page)
   ------------------------------------------------------------
   섹션 제목 · 히어로 · 안내띠 · 문의배너 · 바로가기 탭은
   절연유교체(.oil_page)와 관리대상기기(.dv_tabs)의 것을 그대로 물려 씁니다.
   이 메뉴에만 필요한 부분(임대 · 판매 · 매입 · 제품소개)만 아래에 둡니다.
   아이콘은 쓰지 않고 선 · 여백 · 글자 굵기로만 구분합니다.
   상단 대표이미지 : /images/home/sub3.png (trans/_parts.php 에서 sv_m3 지정)
   ============================================================ */

/* 공통 : 도입 문구 · 중간 제목 */
.trans_page .tr_lead {margin:0 0 44px; font-size:16px; line-height:1.9; color:#5a6478; word-break:keep-all;}
.trans_page .tr_sub_tit {margin:0 0 20px; font-size:21px; font-weight:700; color:#16234a; line-height:1.4;}
.trans_page .tr_sub_tit_mt {margin-top:64px;}

/* 안내띠 : 아이콘 대신 왼쪽 파란 선 */
.trans_page .oil_note {border-left:3px solid #0079cf; border-radius:0 10px 10px 0;}

/* 히어로 오른쪽 : 네 페이지 바로가기 (번호 + 제목, 오른쪽 끝에 얇은 꺾쇠) */
.trans_page .tr_svc_links {-webkit-flex:1 1 380px; flex:1 1 380px; min-width:0; margin:0; padding:0; list-style:none; border-top:2px solid #16234a;}
.trans_page .tr_svc_links a {display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; gap:20px; padding:20px 8px 20px 4px; border-bottom:1px solid #e3e9f2; color:#16234a; text-decoration:none; -webkit-transition:.2s ease; transition:.2s ease;}
.trans_page .tr_svc_links a:after {content:""; -webkit-flex:0 0 auto; flex:0 0 auto; width:8px; height:8px; margin-right:4px; border-top:2px solid #9aa6b8; border-right:2px solid #9aa6b8; -webkit-transform:rotate(45deg); transform:rotate(45deg); -webkit-transition:.2s ease; transition:.2s ease;}
.trans_page .tr_svc_links a:hover {padding-left:12px; background:#f5f8fc;}
.trans_page .tr_svc_links a:hover:after {border-color:#0079cf;}
.trans_page .tr_svc_links .sl_no {-webkit-flex:0 0 auto; flex:0 0 auto; font-size:14px; font-weight:800; letter-spacing:1px; color:#0079cf;}
.trans_page .tr_svc_links .sl_txt {-webkit-flex:1 1 auto; flex:1 1 auto; min-width:0;}
.trans_page .tr_svc_links strong {display:block; font-size:18px; font-weight:700; line-height:1.35;}
.trans_page .tr_svc_links small {display:block; margin-top:3px; font-size:14px; color:#7a8398;}

/* ---------- 01. 임대 ---------- */
/* 서비스 항목 (한 줄 3칸) : 위쪽 짧은 파란 선 + 제목 */
.trans_page .tr_icards {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:16px; margin:0; padding:0; list-style:none;}
.trans_page .tr_icards li {position:relative; -webkit-flex:0 0 calc(33.333% - 10.7px); flex:0 0 calc(33.333% - 10.7px); max-width:calc(33.333% - 10.7px); min-width:0; padding:30px 26px 26px; border:1px solid #e3e9f2; border-radius:12px; background:#fff; box-sizing:border-box;}
.trans_page .tr_icards li:before {content:""; position:absolute; left:26px; top:-1px; width:32px; height:3px; background:#0079cf;}
.trans_page .tr_icards .ic_tit {display:block; font-size:17px; font-weight:700; line-height:1.55; color:#16234a; word-break:keep-all;}

/* 임대 쓰임새 카드 : 제목 아래 부제 (한 줄 4칸) */
.trans_page .tr_icards_sub li {-webkit-flex:0 0 calc(25% - 12px); flex:0 0 calc(25% - 12px); max-width:calc(25% - 12px);}
.trans_page .tr_icards .ic_sub {display:block; margin-top:8px; font-size:14.5px; line-height:1.6; color:#7a8398; word-break:keep-all;}

/* 임대 쓰임새 : 왼쪽에 설명 + 카드 3개(가로), 오른쪽에 설치 현장 사진(작게) */
/* 오른쪽 사진의 위아래를 왼쪽 내용(설명 + 박스)에 맞춘다 */
.trans_page .tr_use {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-align-items:stretch; align-items:stretch; gap:30px;}
.trans_page .tr_use_main {-webkit-flex:1 1 420px; flex:1 1 420px; min-width:0;}
.trans_page .tr_use_main {display:-webkit-flex; display:flex; -webkit-flex-direction:column; flex-direction:column;}
.trans_page .tr_use_main .tr_lead {margin-bottom:20px;}
.trans_page .tr_use_list {-webkit-flex:1 1 auto; flex:1 1 auto; gap:12px;}
/* 박스가 세로로 늘어나도 글이 가운데 오도록 */
.trans_page .tr_use_list li {display:-webkit-flex; display:flex; -webkit-flex-direction:column; flex-direction:column; -webkit-justify-content:center; justify-content:center; -webkit-flex:1 1 0; flex:1 1 0; max-width:none; min-width:0; padding:24px 14px;}
.trans_page .tr_use_list .ic_tit {font-size:15.5px;}
.trans_page .tr_use_list .ic_sub {margin-top:5px; font-size:13px;}
/* 오른쪽 사진 : 가로 400px 정도 */
.trans_page .tr_use_photo {position:relative; -webkit-flex:0 0 520px; flex:0 0 520px; -webkit-align-self:stretch; align-self:stretch; min-width:0; min-height:260px; margin:0; border:1px solid #e9eef6; border-radius:14px; overflow:hidden; background:#f5f8fc;}
/* 사진을 칸 안에 띄워서 채운다.
   이렇게 해야 사진의 원래 높이가 줄 높이에 끼어들지 않아, 왼쪽 내용과 위아래가 정확히 맞는다.
   (남는 부분은 가운데를 기준으로 잘림) */
.trans_page .tr_use_photo img {position:absolute; left:0; top:0; display:block; width:100%; height:100%; object-fit:cover;}

/* RENTAL PROCESS 머리말 */
.trans_page .tr_process_eyebrow {margin:64px 0 8px;}

/* 매매 품목 : 한 줄로 나열되는 칩 */
.trans_page .tr_items {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none;}
.trans_page .tr_items li {padding:11px 20px; border:1px solid #dbe3ef; border-radius:100px; background:#fff; font-size:16px; font-weight:700; line-height:1.4; color:#16234a; word-break:keep-all;}

/* 제품 사진 : 종류 이름 + 사진 2장 */
.trans_page .tr_gallery {margin-top:40px;}
.trans_page .tr_gallery .tg_tit {display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; gap:10px; margin-bottom:14px; font-size:17px; font-weight:700; color:#16234a;}
.trans_page .tr_gallery .tg_tit:before {content:""; width:6px; height:6px; border-radius:1px; background:#0079cf;}
.trans_page .tr_gallery .tg_imgs {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:16px;}
/* 한 줄에 최대 3장. 사진이 두 장이면 반씩, 한 장이면 칸 전체를 채웁니다 */
.trans_page .tr_gallery figure {-webkit-flex:1 1 calc(33.333% - 11px); flex:1 1 calc(33.333% - 11px); min-width:220px; margin:0; border:1px solid #e9eef6; border-radius:12px; overflow:hidden; background:#f5f8fc;}
.trans_page .tr_gallery img {display:block; width:100%; height:auto;}

/* ---------- 변압기란? (about.php) ---------- */
/* 중간 제목 아래 보조 설명 */
.trans_page .tr_sub_desc {margin:-8px 0 18px; font-size:15.5px; line-height:1.8; color:#7a8398; word-break:keep-all;}
/* 역할 카드 : 한 줄 3칸 */
.trans_page .tr_icards_3 li {-webkit-flex:0 0 calc(33.333% - 11px); flex:0 0 calc(33.333% - 11px); max-width:calc(33.333% - 11px);}
/* 변압기 내부 구조 : 유입식 · 몰드식을 좌우로 */
.trans_page .tr_struct {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:26px;}
.trans_page .tr_struct > .tr_gallery {-webkit-flex:1 1 calc(50% - 13px); flex:1 1 calc(50% - 13px); max-width:calc(50% - 13px); min-width:0; margin-top:0;}

/* 사진 묶음 안의 보조 설명 */
.trans_page .tr_gallery .tg_sub {margin:-8px 0 14px; padding-left:16px; font-size:14.5px; line-height:1.7; color:#7a8398; word-break:keep-all;}
/* 사진 묶음에서도 누르면 커지는 사진(.ck_shot)을 쓸 수 있게.
   한 줄에 최대 3장까지 나란히 놓이고, 두 장이면 반씩, 한 장이면 칸 전체를 채웁니다. */
.trans_page .tr_gallery .ck_shot {position:relative; display:block; -webkit-flex:1 1 calc(33.333% - 11px); flex:1 1 calc(33.333% - 11px); min-width:220px; border:1px solid #e9eef6; border-radius:12px; overflow:hidden; background:#f5f8fc; -webkit-transition:.2s ease; transition:.2s ease;}
/* 넓게 쓰는 사진 묶음 (개념도) : 한 장씩 가로 전체 */
.trans_page .tr_gallery_wide figure, .trans_page .tr_gallery_wide .ck_shot {-webkit-flex:1 1 100%; flex:1 1 100%; max-width:100%;}
/* 2장씩 보여주는 묶음 (도면) */
.trans_page .tr_gallery_half .ck_shot {-webkit-flex:1 1 calc(50% - 8px); flex:1 1 calc(50% - 8px);}
.trans_page .tr_gallery .ck_shot:hover {border-color:#0079cf; box-shadow:0 8px 20px rgba(0,121,207,0.16);}
.trans_page .tr_gallery .ck_shot img {display:block; width:100%; height:auto;}
.trans_page .tr_gallery .ck_zoom {position:absolute; right:10px; bottom:10px; width:28px; height:28px; border-radius:50%; background:rgba(22,35,74,0.75); color:#fff; font-size:17px; font-weight:700; line-height:28px; text-align:center;}
.trans_page .tr_gallery .ck_shot:hover .ck_zoom {background:#0079cf;}
/* 비교표 위 여백 */
.trans_page .tr_cmp_mt {margin-top:44px;}

/* 원리 : 3단계 */
.trans_page .tr_prin_steps {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:14px; margin:0 0 24px; padding:0; list-style:none;}
.trans_page .tr_prin_steps li {display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; gap:12px; -webkit-flex:1 1 280px; flex:1 1 280px; min-width:0; padding:18px 20px; border:1px solid #e3e9f2; border-radius:12px; background:#fff; font-size:16px; font-weight:600; line-height:1.5; color:#16234a; word-break:keep-all;}
.trans_page .tr_prin_steps .ps_no {-webkit-flex:0 0 auto; flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:#16234a; color:#fff; font-size:14px; font-weight:800; line-height:28px; text-align:center;}
.trans_page .tr_prin_desc {margin:0 0 30px; font-size:16px; line-height:1.9; color:#5a6478; word-break:keep-all;}

/* 원리 : 기호 설명 (한 줄 2칸) */
.trans_page .tr_symbols {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin:0; padding:0; list-style:none; border-top:2px solid #16234a;}
.trans_page .tr_symbols li {display:-webkit-flex; display:flex; -webkit-align-items:baseline; align-items:baseline; gap:16px; -webkit-flex:0 0 50%; flex:0 0 50%; max-width:50%; padding:11px 20px 11px 4px; box-sizing:border-box; border-bottom:1px solid #e3e9f2;}
.trans_page .tr_symbols li:nth-child(2n) {padding-left:24px; border-left:1px solid #eef2f8;}
.trans_page .tr_symbols .sy_mark {-webkit-flex:0 0 90px; flex:0 0 90px; font-family:'Times New Roman', serif; font-size:19px; font-style:italic; font-weight:700; color:#0f5fbd;}
.trans_page .tr_symbols .sy_mean {font-size:15px; color:#41506e; word-break:keep-all;}

/* 출처 표기 */
.trans_page .tr_source {margin-top:18px; font-size:13.5px; color:#9aa2b1;}
.trans_page .tr_source a {color:#7a8398; text-decoration:underline;}
.trans_page .tr_source a:hover {color:#0079cf;}

/* 제품 사진 : 한 줄에 네 품목. 사진 아래에 품목 이름을 적는다 (임대/매매/매입 화면)
   품목 수가 달라지면 칸이 알아서 나뉩니다. */
.trans_page .tr_photos {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:18px; margin:34px 0 0; padding:0; list-style:none;}
.trans_page .tr_photos li {-webkit-flex:1 1 calc(25% - 14px); flex:1 1 calc(25% - 14px); min-width:200px;}
.trans_page .tr_photos figure {margin:0; border:1px solid #e9eef6; border-radius:12px; overflow:hidden; background:#f5f8fc;}
.trans_page .tr_photos figure + figure {margin-top:10px;}
.trans_page .tr_photos img {display:block; width:100%; height:auto;}
.trans_page .tr_photos .tp_cap {display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; gap:9px; margin-top:12px; font-size:15.5px; font-weight:700; color:#16234a; word-break:keep-all;}
.trans_page .tr_photos .tp_cap:before {content:""; -webkit-flex:0 0 auto; flex:0 0 auto; width:7px; height:7px; border-radius:1px; background:#0079cf;}

/* 취급품목 : 하위 분류 + 제품 카드 (사진 → 명칭 → 설명)
   한 줄에 4개씩 놓이고, 사진이 없으면 '사진 준비 중' 자리만 표시됩니다. */
.trans_page .tr_sub + .tr_sub {margin-top:38px;}
.trans_page .tr_sub .sb_tit {display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; gap:9px; margin-bottom:16px; font-size:16.5px; font-weight:700; color:#16234a;}
.trans_page .tr_sub .sb_tit:before {content:""; -webkit-flex:0 0 auto; flex:0 0 auto; width:6px; height:6px; border-radius:1px; background:#0079cf;}
.trans_page .tr_prods {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:18px; margin:0; padding:0; list-style:none;}
.trans_page .tr_prods li {-webkit-flex:1 1 calc(25% - 14px); flex:1 1 calc(25% - 14px); min-width:200px; max-width:calc(25% - 14px);}
/* 사진 : 4:3 칸에 잘리지 않게 담는다 (제품 사진은 배경이 흰 경우가 많아 테두리만 둔다)
   한 제품에 사진이 여러 장이면 칸 안에서 나란히 나뉩니다. */
.trans_page .tr_prods .pr_photos {display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:8px; margin:0 0 12px;}
/* (flex 로 두면 사진 칸의 세로 비율이 칸 전체 폭을 기준으로 잡혀 사진이 길쭉해집니다) */
.trans_page .tr_prods .pr_photo {position:relative; margin:0; padding-top:75%; border:1px solid #e9eef6; border-radius:10px; overflow:hidden; background:#fff;}
/* 사진이 여러 장인 칸은 그만큼 넓게 (사진 크기는 다른 칸과 같게 유지) */
.trans_page .tr_prods li.pr_x2 {-webkit-flex:1 1 calc(50% - 9px); flex:1 1 calc(50% - 9px); max-width:calc(50% - 9px);}
.trans_page .tr_prods li.pr_x3 {-webkit-flex:1 1 calc(75% - 4.5px); flex:1 1 calc(75% - 4.5px); max-width:calc(75% - 4.5px);}
.trans_page .tr_prods li.pr_x4 {-webkit-flex:1 1 100%; flex:1 1 100%; max-width:100%;}
/* 사진이 여러 장일 때 이름은 가운데로 */
.trans_page .tr_prods li.pr_x2 .pr_name, .trans_page .tr_prods li.pr_x3 .pr_name, .trans_page .tr_prods li.pr_x4 .pr_name {text-align:center;}
.trans_page .tr_prods .pr_photo img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:contain;}
.trans_page .tr_prods .pr_empty {position:absolute; left:0; top:50%; width:100%; margin-top:-10px; font-size:13px; color:#aab2c0; text-align:center;}
.trans_page .tr_prods .pr_name {display:block; margin-bottom:8px; font-size:20px; font-weight:800; color:#16234a; letter-spacing:0.5px;}
.trans_page .tr_prods .pr_desc {margin:0; font-size:14px; line-height:1.75; color:#7a8398; word-break:keep-all;}

/* 품목 블록 안의 사진 줄 */
.trans_page .di_photos {margin-top:22px;}

/* 초대형변압기 : 한 줄에 2장 크게 */
.trans_page .tr_photos_big {margin-top:18px;}
.trans_page .tr_photos_big .tb_imgs {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:18px;}
.trans_page .tr_photos_big figure {-webkit-flex:1 1 calc(50% - 9px); flex:1 1 calc(50% - 9px); min-width:0; margin:0; border:1px solid #e9eef6; border-radius:12px; overflow:hidden; background:#f5f8fc;}
.trans_page .tr_photos_big img {display:block; width:100%; height:auto;}
.trans_page .tr_photos_big .tp_cap {display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; gap:9px; margin-top:12px; font-size:15.5px; font-weight:700; color:#16234a;}
.trans_page .tr_photos_big .tp_cap:before {content:""; -webkit-flex:0 0 auto; flex:0 0 auto; width:7px; height:7px; border-radius:1px; background:#0079cf;}
/* 사진 아래에 오는 '변압기 정보 확인' 과의 간격 */
.trans_page .tr_photos_big + .tr_sub_tit, .trans_page .tr_photos + .tr_sub_tit {margin-top:56px;}

/* 하단 서비스 요약 : 임대 · 매매 · 매입 3칸 */
.trans_page .tr_svc_sum {margin-top:76px; padding:40px 44px 44px; border:1px solid #e6ecf5; border-radius:16px; background:#f5f8fc; text-align:center;}
.trans_page .tr_svc_sum .dv_eyebrow {color:#0f5fbd;}
.trans_page .tr_svc_tit {margin:0 0 34px; font-size:25px; font-weight:700; color:#16234a; line-height:1.35;}
.trans_page .tr_svc_cols {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin:0; padding:0; list-style:none;}
.trans_page .tr_svc_cols li {-webkit-flex:1 1 220px; flex:1 1 220px; min-width:0; padding:6px 24px; border-left:1px solid #dfe6f0;}
.trans_page .tr_svc_cols li:first-child {border-left:0;}
.trans_page .tr_svc_cols .sv_tit {display:block; margin-bottom:12px; font-size:19px; font-weight:800; color:#0f5fbd;}
.trans_page .tr_svc_cols .sv_line {display:block; font-size:15.5px; line-height:1.8; color:#5a6478; word-break:keep-all;}

/* 이런 경우 (2단) : 글머리에 짧은 파란 선 */
.trans_page .tr_cases_wrap {margin-top:64px; padding:34px 36px 36px; border-radius:16px; background:#f5f8fc;}
.trans_page .tr_cases {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin:0; padding:0; list-style:none; border:1px solid #e3e9f2; border-radius:12px; background:#fff; overflow:hidden;}
.trans_page .tr_cases li {position:relative; -webkit-flex:0 0 50%; flex:0 0 50%; max-width:50%; padding:19px 22px 19px 44px; box-sizing:border-box; font-size:16px; line-height:1.65; color:#41506e; word-break:keep-all; border-top:1px solid #eef2f8;}
.trans_page .tr_cases li:before {content:""; position:absolute; left:22px; top:32px; width:12px; height:2px; background:#0079cf;}
.trans_page .tr_cases li:nth-child(-n+2) {border-top:0;}
.trans_page .tr_cases li:nth-child(2n) {border-left:1px solid #eef2f8;}

/* 진행 과정 (한 줄 5칸 · 위쪽 진행선) : 큰 숫자로 순서를 보여줌 */
.trans_page .tr_steps {display:-webkit-flex; display:flex; margin:0; padding:0; list-style:none;}
.trans_page .tr_step {position:relative; -webkit-flex:1 1 0; flex:1 1 0; min-width:0; padding:24px 20px 0 0; border-top:3px solid #dbe3ef;}
.trans_page .tr_step:first-child {border-top-color:#0079cf;}
.trans_page .tr_step + .tr_step {padding-left:20px; border-left:1px solid #eef2f8;}
.trans_page .tr_step .ts_no {display:block; margin-bottom:14px; font-size:13px; font-weight:800; letter-spacing:1.5px; color:#0079cf;}
.trans_page .tr_step .ts_tit {display:block; margin-bottom:10px; font-size:18px; font-weight:700; color:#16234a; line-height:1.4; word-break:keep-all;}
.trans_page .tr_step .ts_desc {font-size:15px; line-height:1.75; color:#5a6478; word-break:keep-all;}

/* ---------- 02. 판매 / 03. 매입 : 분류 칩 ---------- */
.trans_page .tr_groups {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:16px; margin:0;}
.trans_page .tr_groups .tg_item {-webkit-flex:0 0 calc(50% - 8px); flex:0 0 calc(50% - 8px); max-width:calc(50% - 8px); min-width:0; padding:20px 22px 22px; border:1px solid #e3e9f2; border-radius:12px; background:#fff; box-sizing:border-box;}
.trans_page .tr_groups .tg_wide {-webkit-flex:0 0 100%; flex:0 0 100%; max-width:100%;}
.trans_page .tr_groups dt {margin-bottom:12px; font-size:14px; font-weight:700; color:#7a8398;}
.trans_page .tr_groups dd {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:8px; margin:0;}
.trans_page .tr_groups .tg_chip {display:inline-block; padding:8px 16px; border-radius:100px; background:#eaf3fd; font-size:15.5px; font-weight:700; line-height:1.4; color:#16234a;}
.trans_page .tr_groups .tg_muted {background:#f0f3f7; color:#41506e;}

/* ---------- 02. 매매 : 제품 사양 확인 안내 (왼쪽 명판 사진 + 오른쪽 안내) ---------- */
.trans_page .tr_info {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-align-items:center; align-items:center; gap:40px; margin-top:44px; padding:36px 40px; border:1px solid #e6ecf5; border-radius:16px; overflow:hidden; background:#f4f7fb; color:#41506e;}
.trans_page .tr_info .ti_photo {-webkit-flex:0 0 380px; flex:0 0 380px; max-width:380px; margin:0; border:1px solid #e3e9f2; border-radius:12px; overflow:hidden; background:#fff;}
.trans_page .tr_info .ti_photo img {display:block; width:100%; height:auto;}
.trans_page .tr_info .ti_txt {-webkit-flex:1 1 380px; flex:1 1 380px; min-width:0;}
.trans_page .tr_info .ti_eyebrow {margin:0 0 8px; font-size:12px; font-weight:800; letter-spacing:2px; color:#0f5fbd;}
.trans_page .tr_info .ti_tit {margin:0 0 14px; font-size:23px; font-weight:700; color:#16234a; line-height:1.35;}
.trans_page .tr_info .ti_desc {margin:0 0 20px; padding-bottom:20px; border-bottom:1px solid #e3e9f2; font-size:15.5px; line-height:1.85; color:#5a6478; word-break:keep-all;}
.trans_page .tr_info .ti_note {display:-webkit-flex; display:flex; -webkit-align-items:flex-start; align-items:flex-start; gap:10px; margin:0; padding:15px 18px; border-radius:10px; background:#fff; border:1px solid #e3e9f2; font-size:15px; line-height:1.7; color:#41506e; word-break:keep-all;}
.trans_page .tr_info .ti_note:before {content:"!"; -webkit-flex:0 0 auto; flex:0 0 auto; width:21px; height:21px; margin-top:2px; border-radius:50%; background:#0079cf; color:#fff; font-size:13px; font-weight:800; line-height:21px; text-align:center;}
.trans_page .tr_info .ti_note em {font-style:normal; font-weight:700; color:#0f5fbd;}

/* ---------- 02. 판매 : 명판 예시 + 확인사항 ---------- */
/* 왼쪽 명판은 원래 크기 그대로 두고, 오른쪽 확인사항의 줄 간격을 줄여 높이를 맞춘다.
   남는 차이는 위아래로 나뉘도록 가운데 정렬한다. */
.trans_page .tr_plate_wrap {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-align-items:center; align-items:center; gap:40px;}
.trans_page .tr_plate_side {-webkit-flex:1 1 400px; flex:1 1 400px; min-width:0;}
.trans_page .tr_plate_main {-webkit-flex:1 1 500px; flex:1 1 500px; min-width:0;}
/* 금속 명판 느낌 : 이중 테두리 + 위쪽 리벳 두 개 */
.trans_page .tr_plate {padding:7px; border:2px solid #9aa6b8; border-radius:6px; background:-webkit-linear-gradient(top,#f4f6f9,#e1e6ed); background:linear-gradient(160deg,#f4f6f9,#e1e6ed); box-shadow:inset 0 1px 0 #fff, 0 10px 24px rgba(22,35,74,0.08);}
.trans_page .tr_plate .tp_in {position:relative; padding:16px 20px 10px; border:1px solid #9aa6b8; border-radius:3px;}
.trans_page .tr_plate .tp_in:before, .trans_page .tr_plate .tp_in:after {content:""; position:absolute; top:10px; width:9px; height:9px; border-radius:50%; background:#aab4c3; box-shadow:inset 0 1px 1px rgba(0,0,0,0.25);}
.trans_page .tr_plate .tp_in:before {left:10px;}
.trans_page .tr_plate .tp_in:after {right:10px;}
.trans_page .tr_plate .tp_head {margin-bottom:4px; padding-bottom:10px; border-bottom:1px solid #9aa6b8; font-family:Consolas, 'Courier New', monospace; font-size:12px; letter-spacing:4px; color:#4a5568; text-align:center;}
.trans_page .tr_plate .tp_head strong {display:block; margin-top:2px; font-family:'Malgun Gothic', dotum, sans-serif; font-size:16px; letter-spacing:0; color:#1a2540;}
.trans_page .tr_plate .tp_tbl {width:100%; border-collapse:collapse;}
.trans_page .tr_plate .tp_tbl th, .trans_page .tr_plate .tp_tbl td {padding:9px 4px; border-bottom:1px dotted #aab4c3; font-size:15px; line-height:1.4; text-align:left;}
.trans_page .tr_plate .tp_tbl tr:last-child th, .trans_page .tr_plate .tp_tbl tr:last-child td {border-bottom:0;}
.trans_page .tr_plate .tp_tbl th {width:44%; font-weight:400; color:#4a5568;}
.trans_page .tr_plate .tp_tbl td {font-family:Consolas, 'Malgun Gothic', monospace; font-weight:700; color:#1a2540;}
.trans_page .tp_cap {margin-top:10px; font-size:13.5px; line-height:1.6; color:#7a8398;}
.trans_page .tr_spec_lead {margin:0 0 16px; font-size:15.5px; line-height:1.7; color:#5a6478; word-break:keep-all;}
.trans_page .tr_speclist {margin:0; padding:0; list-style:none; border-top:2px solid #16234a;}
.trans_page .tr_speclist li {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-align-items:baseline; align-items:baseline; gap:3px 16px; padding:9px 4px; border-bottom:1px solid #e3e9f2;}
.trans_page .tr_speclist strong {-webkit-flex:0 0 180px; flex:0 0 180px; font-size:15.5px; font-weight:700; color:#16234a;}
.trans_page .tr_speclist span {font-size:14px; color:#7a8398;}
.trans_page .tr_spec_foot {margin-top:12px; font-size:14.5px; color:#5a6478;}

/* ---------- 03. 전기불용자재 매입 : 품목별 한 줄 (왼쪽 품목명 + 오른쪽 사진 최대 3장) ---------- */
.trans_page .tr_scrap {margin:0; padding:0; list-style:none;}
.trans_page .tr_scrap li {display:-webkit-flex; display:flex; -webkit-align-items:stretch; align-items:stretch; gap:20px; padding:18px; border:1px solid #e3e9f2; border-radius:12px; background:#fff; box-shadow:0 6px 18px rgba(22,35,74,0.05);}
.trans_page .tr_scrap li + li {margin-top:14px;}
.trans_page .tr_scrap .sc_head {-webkit-flex:0 0 190px; flex:0 0 190px; display:-webkit-flex; display:flex; -webkit-flex-direction:column; flex-direction:column; -webkit-justify-content:center; justify-content:center; padding:18px 20px; border-radius:8px; background:#16234a; box-sizing:border-box;}
.trans_page .tr_scrap .sc_no {display:block; margin-bottom:6px; font-size:12.5px; font-weight:800; letter-spacing:1px; color:#8fb8ff;}
.trans_page .tr_scrap .sc_tit {display:block; font-size:18px; font-weight:700; line-height:1.4; color:#fff; word-break:keep-all;}
.trans_page .tr_scrap .sc_photos {-webkit-flex:1 1 auto; flex:1 1 auto; min-width:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;}
.trans_page .tr_scrap .sc_photos figure {margin:0; overflow:hidden; border-radius:8px; aspect-ratio:4/3; background:#f5f8fc;}
.trans_page .tr_scrap .sc_photos img {display:block; width:100%; height:100%; -o-object-fit:cover; object-fit:cover; -webkit-transition:.3s ease; transition:.3s ease;}
.trans_page .tr_scrap .sc_photos figure:hover img {-webkit-transform:scale(1.05); transform:scale(1.05);}
.trans_page .tr_scrap .sc_empty {-webkit-flex:1 1 auto; flex:1 1 auto; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; margin:0; min-height:90px; border:1px dashed #d3dceb; border-radius:8px; background:#f8fafd; font-size:14px; color:#9aa3b5;}
@media (max-width:768px) {
    .trans_page .tr_scrap li {-webkit-flex-direction:column; flex-direction:column; gap:12px; padding:14px;}
    .trans_page .tr_scrap .sc_head {-webkit-flex:0 0 auto; flex:0 0 auto; -webkit-flex-direction:row; flex-direction:row; -webkit-align-items:center; align-items:center; -webkit-justify-content:flex-start; justify-content:flex-start; gap:10px; padding:12px 16px;}
    .trans_page .tr_scrap .sc_no {margin-bottom:0;}
    .trans_page .tr_scrap .sc_tit {font-size:16px;}
    .trans_page .tr_scrap .sc_photos {gap:8px;}
    .trans_page .tr_scrap .sc_empty {min-height:60px;}
}

/* ---------- 03. 매입 : 확인사항 (2단 목록) ---------- */
.trans_page .tr_checklist {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin:0; padding:0; list-style:none; border-top:2px solid #16234a;}
.trans_page .tr_checklist li {display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; gap:12px; -webkit-flex:0 0 50%; flex:0 0 50%; max-width:50%; padding:15px 20px 15px 4px; border-bottom:1px solid #e3e9f2; box-sizing:border-box; font-size:16px; font-weight:600; line-height:1.5; color:#16234a;}
.trans_page .tr_checklist li:nth-child(2n) {padding-left:24px; border-left:1px solid #eef2f8;}
.trans_page .tr_checklist em {margin-left:auto; padding:3px 10px; border-radius:100px; background:#eaf3fd; font-style:normal; font-size:12.5px; font-weight:700; white-space:nowrap; color:#0f5fbd;}
.trans_page .tr_check_foot {margin-top:18px; font-size:15px; line-height:1.8; color:#5a6478; word-break:keep-all;}

/* ---------- 04. 제품소개 ---------- */
/* 비교표 : 좁은 화면에서는 표만 가로로 밀어서 봅니다 */
.trans_page .tr_cmp_wrap {overflow-x:auto; -webkit-overflow-scrolling:touch;}
.trans_page .tr_cmp {width:100%; min-width:640px; border-collapse:collapse; border-top:2px solid #16234a;}
.trans_page .tr_cmp th, .trans_page .tr_cmp td {padding:16px 20px; border-bottom:1px solid #e3e9f2; font-size:16px; line-height:1.5; text-align:left; color:#41506e;}
.trans_page .tr_cmp thead th {background:#f5f8fc; font-size:15px; font-weight:700; color:#16234a;}
.trans_page .tr_cmp tbody th {font-weight:700; white-space:nowrap;}
.trans_page .tr_cmp tbody th a {color:#16234a; text-decoration:none; border-bottom:1px solid #c9d2e2;}
.trans_page .tr_cmp tbody th a:hover {color:#0079cf; border-bottom-color:#0079cf;}
.trans_page .tr_cmp .cmp_axis td {padding:9px 20px; background:#fafbfd; font-size:13px; font-weight:700; letter-spacing:1px; color:#0079cf;}
.trans_page .tr_tabs {margin:48px 0 34px;}

/* 제품 블록 : 왼쪽 사진(있을 때만) + 오른쪽 설명 */
.trans_page .tr_prod {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-align-items:flex-start; align-items:flex-start; gap:36px; margin-top:26px; padding:34px 36px 32px; border:1px solid #e3e9f2; border-radius:16px; background:#fff; box-shadow:0 6px 20px rgba(22,35,74,0.05);}
.trans_page .tr_prod .tp_photo {-webkit-flex:0 1 340px; flex:0 1 340px; min-width:0; margin:0; border-radius:12px; overflow:hidden; background:#eef1f6;}
.trans_page .tr_prod .tp_photo img {display:block; width:100%; height:auto;}
.trans_page .tr_prod .tp_body {-webkit-flex:1 1 460px; flex:1 1 460px; min-width:0;}
.trans_page .tr_prod .tp_head {padding-bottom:20px; border-bottom:1px solid #eef2f8;}
.trans_page .tr_prod .tp_head_txt {min-width:0;}
.trans_page .tr_prod .tp_kind {display:block; margin-bottom:4px; font-size:13px; font-weight:800; letter-spacing:1px; color:#0079cf;}
.trans_page .tr_prod .tp_tit {margin:0 0 6px; font-size:24px; font-weight:700; color:#16234a; line-height:1.3;}
.trans_page .tr_prod .tp_one {margin:0; font-size:16.5px; font-weight:600; line-height:1.6; color:#41506e; word-break:keep-all;}
.trans_page .tr_prod .tp_desc {margin:20px 0 0; font-size:16px; line-height:1.9; color:#5a6478; word-break:keep-all;}
.trans_page .tr_prod .tp_cols {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:18px; margin-top:22px;}
.trans_page .tr_prod .tp_col {-webkit-flex:1 1 280px; flex:1 1 280px; min-width:0; padding:18px 20px 16px; border-radius:10px; background:#f5f8fc;}
.trans_page .tr_prod .tp_col_tit {display:block; margin-bottom:10px; font-size:15px; font-weight:700; color:#16234a;}
.trans_page .tr_prod .tp_list {margin:0; padding:0; list-style:none;}
.trans_page .tr_prod .tp_list li {position:relative; padding:3px 0 3px 16px; font-size:15px; line-height:1.7; color:#41506e; word-break:keep-all;}
.trans_page .tr_prod .tp_list li:before {content:""; position:absolute; left:2px; top:14px; width:6px; height:2px; background:#0079cf;}
/* 확인사항은 짧은 낱말이라 칩으로 나열 */
.trans_page .tr_prod .tp_list_chip {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:8px;}
.trans_page .tr_prod .tp_list_chip li {padding:6px 13px; border:1px solid #e3eaf5; border-radius:7px; background:#fff; font-size:14.5px; line-height:1.4;}
.trans_page .tr_prod .tp_list_chip li:before {display:none;}
.trans_page .tr_prod .tp_avail {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-align-items:center; align-items:center; gap:6px; margin-top:20px;}
.trans_page .tr_prod .av_label {margin-right:6px; font-size:14px; color:#7a8398;}
.trans_page .tr_prod .av_badge {padding:4px 13px; border:1px solid #0079cf; border-radius:5px; font-size:14px; font-weight:700; color:#0079cf;}

@media (max-width:1200px) {
    .trans_page .tr_step .ts_tit {font-size:16.5px;}
    .trans_page .tr_step .ts_desc {font-size:14px;}
}

@media (max-width:960px) {
    .trans_page .tr_svc_links {-webkit-flex:1 1 100%; flex:1 1 100%;}
    .trans_page .tr_icards li, .trans_page .tr_icards_sub li {-webkit-flex:0 0 calc(50% - 8px); flex:0 0 calc(50% - 8px); max-width:calc(50% - 8px);}
    .trans_page .tr_svc_sum {padding:30px 24px 32px;}
    /* 진행 과정 : 세로 타임라인 */
    .trans_page .tr_steps {display:block;}
    .trans_page .tr_step, .trans_page .tr_step + .tr_step {padding:0 0 26px 24px; border-top:0; border-left:3px solid #dbe3ef;}
    .trans_page .tr_step:first-child {border-left-color:#0079cf;}
    .trans_page .tr_step:last-child {padding-bottom:4px;}
    .trans_page .tr_step .ts_no {margin-bottom:6px;}
    .trans_page .tr_step .ts_tit {margin-bottom:4px;}
    .trans_page .tr_prod {padding:26px 24px 24px;}
    .trans_page .tr_prod .tp_photo {-webkit-flex:1 1 100%; flex:1 1 100%;}
}

@media (max-width:768px) {
    .trans_page .tr_lead {margin-bottom:30px; font-size:14.5px; line-height:1.8;}
    .trans_page .tr_lead br, .trans_page .tr_spec_lead br {display:none;}
    .trans_page .tr_sub_tit {margin-bottom:16px; font-size:18px;}
    .trans_page .tr_sub_tit_mt {margin-top:46px;}
    .trans_page .tr_svc_links a {gap:14px; padding:16px 6px 16px 2px;}
    .trans_page .tr_svc_links strong {font-size:16px;}
    .trans_page .tr_svc_links small {font-size:13px;}
    .trans_page .tr_icards {gap:10px;}
    .trans_page .tr_icards li, .trans_page .tr_icards_sub li, .trans_page .tr_icards_3 li, .trans_page .tr_groups .tg_item {-webkit-flex:0 0 100%; flex:0 0 100%; max-width:100%;}
    .trans_page .tr_use {gap:16px;}
    .trans_page .tr_use_list li {-webkit-flex:1 1 100%; flex:1 1 100%; padding:16px 18px;}
    /* 좁은 화면 : 사진이 아래로 내려가므로 원래 비율 그대로 */
    .trans_page .tr_use_photo {position:static; -webkit-flex:1 1 100%; flex:1 1 100%; min-height:0;}
    .trans_page .tr_use_list {margin-top:0;}
    .trans_page .tr_use_photo img {position:static; height:auto;}
    .trans_page .tr_gallery .ck_shot, .trans_page .tr_gallery_half .ck_shot {-webkit-flex:1 1 100%; flex:1 1 100%; min-width:0;}
    .trans_page .tr_prin_steps li {-webkit-flex:1 1 100%; flex:1 1 100%; padding:14px 16px; font-size:15px;}
    .trans_page .tr_prin_desc {font-size:14.5px; line-height:1.85;}
    .trans_page .tr_symbols li, .trans_page .tr_symbols li:nth-child(2n) {-webkit-flex:0 0 100%; flex:0 0 100%; max-width:100%; padding:10px 4px; border-left:0;}
    .trans_page .tr_symbols .sy_mark {-webkit-flex:0 0 70px; flex:0 0 70px; font-size:17px;}
    .trans_page .tr_sub_desc {font-size:14.5px;}
    .trans_page .tr_process_eyebrow {margin-top:44px;}
    .trans_page .tr_items li {padding:9px 15px; font-size:14.5px;}
    .trans_page .tr_struct {gap:18px;}
    .trans_page .tr_struct > .tr_gallery {-webkit-flex:1 1 100%; flex:1 1 100%; max-width:100%;}
    .trans_page .tr_gallery {margin-top:30px;}
    .trans_page .tr_gallery figure {-webkit-flex:1 1 100%; flex:1 1 100%; min-width:0;}
    .trans_page .tr_svc_sum {margin-top:52px; padding:24px 18px 26px;}
    .trans_page .tr_svc_tit {margin-bottom:22px; font-size:20px;}
    .trans_page .tr_svc_cols li {-webkit-flex:1 1 100%; flex:1 1 100%; padding:16px 0; border-left:0; border-top:1px solid #dfe6f0;}
    .trans_page .tr_svc_cols li:first-child {border-top:0; padding-top:0;}
    .trans_page .tr_icards li {padding:22px 18px 18px;}
    .trans_page .tr_icards li:before {left:18px;}
    .trans_page .tr_icards .ic_tit {font-size:15.5px;}
    .trans_page .tr_cases_wrap {margin-top:46px; padding:24px 18px 22px;}
    .trans_page .tr_cases li, .trans_page .tr_checklist li {-webkit-flex:0 0 100%; flex:0 0 100%; max-width:100%;}
    .trans_page .tr_cases li {padding:15px 16px 15px 38px; font-size:14.5px;}
    .trans_page .tr_cases li:before {left:16px; top:27px;}
    .trans_page .tr_cases li:nth-child(2) {border-top:1px solid #eef2f8;}
    .trans_page .tr_cases li:nth-child(2n) {border-left:0;}
    .trans_page .tr_groups {gap:10px;}
    .trans_page .tr_groups .tg_item {padding:16px 16px 18px;}
    .trans_page .tr_groups .tg_chip {padding:7px 13px; font-size:14px;}
    .trans_page .tr_info {gap:22px; padding:24px 20px;}
    .trans_page .tr_info .ti_photo {-webkit-flex:1 1 100%; flex:1 1 100%; max-width:100%;}
    .trans_page .tr_info .ti_tit {font-size:20px;}
    .trans_page .tr_info .ti_desc {font-size:14.5px;}
    .trans_page .tr_info .ti_desc br {display:none;}
    .trans_page .tr_info .ti_note {font-size:14px;}
    .trans_page .tr_plate_wrap {-webkit-align-items:flex-start; align-items:flex-start; gap:26px;}
    .trans_page .tr_plate .tp_tbl th, .trans_page .tr_plate .tp_tbl td {font-size:14px;}
    .trans_page .tr_spec_lead {font-size:14.5px;}
    .trans_page .tr_speclist strong {-webkit-flex:1 1 100%; flex:1 1 100%; font-size:15px;}
    .trans_page .tr_speclist span {font-size:13.5px;}
    .trans_page .tr_checklist li, .trans_page .tr_checklist li:nth-child(2n) {padding:13px 4px; border-left:0; font-size:15px;}
    .trans_page .tr_check_foot {font-size:14px;}
    .trans_page .tr_cmp th, .trans_page .tr_cmp td {padding:13px 14px; font-size:14.5px;}
    .trans_page .tr_tabs {margin:34px 0 24px;}
    .trans_page .tr_prod {gap:20px; margin-top:18px; padding:22px 18px 22px;}
    .trans_page .tr_prod .tp_tit {font-size:20px;}
    .trans_page .tr_prod .tp_one {font-size:15px;}
    .trans_page .tr_prod .tp_desc {font-size:14.5px; line-height:1.85;}
    .trans_page .tr_prod .tp_col {-webkit-flex:1 1 100%; flex:1 1 100%; padding:16px 16px 14px;}
    .trans_page .tr_prod .tp_list li {font-size:14px;}
}


/* ---------- 레이어 팝업 (개인정보처리방침 등) ----------
   메인의 '개인정보처리방침 보기' 에서 씁니다. 다른 곳에서도 같은 틀을 가져다 쓸 수 있습니다. */
.ht_modal {display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:9998; padding:40px 20px; background:rgba(12,20,40,.72);}
.ht_modal.on {display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center;}
.ht_modal .hm_box {display:-webkit-flex; display:flex; -webkit-flex-direction:column; flex-direction:column; width:100%; max-width:760px; max-height:84vh; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 24px 60px rgba(0,0,0,.4);}
.ht_modal .hm_head {display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:space-between; justify-content:space-between; gap:16px; padding:20px 24px; border-bottom:1px solid #eef2f8;}
.ht_modal .hm_head strong {font-size:19px; font-weight:700; color:#16234a;}
.ht_modal .hm_close {width:36px; height:36px; padding:0; border:0; border-radius:50%; background:#f2f5fa; color:#5a6478; font-size:22px; line-height:34px; cursor:pointer;}
.ht_modal .hm_close:hover {background:#16234a; color:#fff;}
.ht_modal .hm_body {-webkit-flex:1 1 auto; flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:24px 26px; font-size:15px; line-height:1.9; color:#4a5570; word-break:keep-all;}
.ht_modal .hm_body h1, .ht_modal .hm_body h2, .ht_modal .hm_body h3, .ht_modal .hm_body h4 {margin:18px 0 8px; font-size:16.5px; font-weight:700; color:#16234a;}
.ht_modal .hm_body p {margin:0 0 10px;}
.ht_modal .hm_foot {padding:16px 24px 20px; border-top:1px solid #eef2f8; text-align:center;}
.ht_modal .hm_ok {min-width:140px; padding:13px 28px; border:0; border-radius:100px; background:#16234a; color:#fff; font-family:inherit; font-size:15px; font-weight:700; cursor:pointer;}
.ht_modal .hm_ok:hover {background:#0079cf;}
@media (max-width:768px) {
    .ht_modal {padding:20px 14px;}
    .ht_modal .hm_box {max-height:88vh;}
    .ht_modal .hm_head {padding:16px 18px;}
    .ht_modal .hm_head strong {font-size:17px;}
    .ht_modal .hm_body {padding:18px; font-size:14.5px;}
}

/* ---------- 큰 그림 보기 (사진을 누르면 화면 가운데에 크게 표시) ----------
   device/law.php 의 .ck_shot 에서 씁니다. 다른 페이지에서도 같은 틀을 가져다 쓸 수 있습니다. */
.ht_viewer {display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999; padding:40px 20px; background:rgba(12,20,40,0.88); text-align:center;}
.ht_viewer.on {display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center;}
.ht_viewer .hv_box {margin:0; max-width:100%; max-height:100%;}
.ht_viewer .hv_box img {display:block; max-width:100%; max-height:82vh; margin:0 auto; border-radius:6px; background:#fff; box-shadow:0 20px 50px rgba(0,0,0,0.45);}
.ht_viewer .hv_box figcaption {margin-top:14px; font-size:15px; color:#e3eaf9;}
.ht_viewer .hv_close {position:absolute; right:22px; top:18px; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,0.12); color:#fff; font-size:28px; line-height:40px; cursor:pointer;}
.ht_viewer .hv_close:hover {background:rgba(255,255,255,0.24);}

/* ---------- 서브페이지 대표이미지(비주얼) ----------
   임시 배경(그라데이션)이 깔려 있고, 아래 파일을 올리면 자동으로 교체됩니다.
     1depth 1번째 메뉴 → /images/sub/visual1.jpg
     2번째 → visual2.jpg  3번째 → visual3.jpg  4번째 → visual4.jpg  5번째 → visual5.jpg
   (이미지가 없으면 그라데이션 배경만 표시되므로 지금 상태로도 깨지지 않습니다) */
/* 원본 이미지 높이(200px)에 맞춤. 1920px 보다 좁으면 좌우가 잘리며 가운데가 유지됩니다 */
.sub_visual {position:relative; height:200px; background-color:#26365e; background-repeat:no-repeat; background-position:center center; background-size:cover; background-image:linear-gradient(135deg,#304a8c 0%,#1a2540 100%); color:#fff; text-align:center;}
.sub_visual:before {content:""; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(20,30,60,0.35);}
.sub_visual #conWrap {position:relative; z-index:2; height:100%; display:-webkit-flex; display:flex; -webkit-flex-direction:column; flex-direction:column; -webkit-justify-content:center; justify-content:center;}
.sub_visual h2 {font-size:38px; font-weight:700; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,0.35); line-height:1.2;}
.sub_visual .sv_path {margin-top:14px; font-size:13px; color:#d5def2;}
.sub_visual .sv_path a {color:#d5def2;}
.sub_visual .sv_path a:hover {color:#fff; text-decoration:underline;}
.sub_visual .sv_path span {margin:0 8px; color:#9fb0d4;}
.sub_visual .sv_path strong {color:#fff; font-weight:600;}
/* 한 화면에 다 담아야 하는 페이지($hana_sv_extra = 'sv_compact')용 낮은 대표이미지 */
.sub_visual.sv_compact {height:130px;}
.sub_visual.sv_compact h2 {font-size:28px;}
.sub_visual.sv_compact .sv_path {margin-top:10px;}

/* 1depth 메뉴별 대표이미지 : /images/home/sub1.png ~ sub6.png (원본 1920×200)
   sub1 회사소개 / sub2 관리대상기기 처리 / sub3 변압기
   sub4 절연유교체 / sub5 계약체결현황 / sub6 견적문의
   하위(2·3depth) 페이지는 속한 대메뉴의 이미지를 그대로 씁니다.
   메뉴에 걸리지 않는 페이지(sv_default)는 이미지 없이 위의 gradient 만 표시됩니다.
   뒤에 붙은 gradient 는 이미지를 못 불러왔을 때의 대비색입니다. */
.sub_visual.sv_m1 {background-image:url(/images/home/sub1.png), linear-gradient(135deg,#304a8c 0%,#1a2540 100%);}
.sub_visual.sv_m2 {background-image:url(/images/home/sub2.png), linear-gradient(135deg,#304a8c 0%,#1a2540 100%);}
.sub_visual.sv_m3 {background-image:url(/images/home/sub3.png), linear-gradient(135deg,#304a8c 0%,#1a2540 100%);}
.sub_visual.sv_m4 {background-image:url(/images/home/sub4.png), linear-gradient(135deg,#304a8c 0%,#1a2540 100%);}
.sub_visual.sv_m5 {background-image:url(/images/home/sub5.png), linear-gradient(135deg,#304a8c 0%,#1a2540 100%);}
.sub_visual.sv_m6 {background-image:url(/images/home/sub6.png), linear-gradient(135deg,#304a8c 0%,#1a2540 100%);}

/* 이미지 안에 이미 메뉴명이 그려져 있다면 아래 두 줄의 주석을 풀어 겹치는 글자를 감추세요.
.sub_visual h2 {position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);}
.sub_visual .sv_path {margin-top:0;}
*/

/* ============================================================
   메인 화면 (2026-10-17 개편)
   ------------------------------------------------------------
   구성 : 히어로 슬라이더 → 관리대상기기 → 제품소개(슬라이더)
          → 갤러리(파노라마) → 견적문의 → 주요거래처
   화면 내용은 theme/hanatrans/index.php 에 있습니다.
   이전 메인은 theme/hanatrans/_backup/index_20261017.php.bak 에 보관되어 있습니다.
   ============================================================ */

/* 공통 : 섹션 머리말 */
.mn_sec {padding:70px 0;}
.mn_eyebrow {margin:0 0 12px; font-size:13px; font-weight:800; letter-spacing:2px; color:#0079cf;}
.mn_tit {margin:0 0 12px; font-size:32px; font-weight:800; line-height:1.3; color:#16234a; letter-spacing:-0.5px;}
.mn_desc {margin:0; font-size:16px; line-height:1.8; color:#7a8398; word-break:keep-all;}
.mn_more {display:inline-flex; align-items:center; gap:12px; margin-top:26px; padding:13px 28px; border-radius:100px; background:#16234a; color:#fff; font-size:15px; font-weight:700; letter-spacing:1px; text-decoration:none;}
.mn_more:hover {background:#0079cf;}

/* ① 관리대상기기 (추가) : 왼쪽 글 + 오른쪽 카드 4개 */
#mnDevice {background:#fff;}
#mnDevice .dv_wrap {display:flex; flex-wrap:wrap; gap:40px; align-items:center;}
#mnDevice .dv_txt {flex:1 1 380px; min-width:0;}
#mnDevice .dv_cards {display:flex; flex-wrap:wrap; gap:16px; flex:1 1 560px; min-width:0; margin:0; padding:0; list-style:none;}
#mnDevice .dv_cards li {flex:1 1 calc(50% - 8px); min-width:200px;}
#mnDevice .dv_cards a {display:block; height:100%; padding:22px 22px 24px; border:1px solid #e3e9f2; border-radius:14px; background:#f7f9fc; color:#16234a; text-decoration:none; transition:.2s ease;}
#mnDevice .dv_cards a:hover {border-color:#0079cf; box-shadow:0 10px 26px rgba(0,121,207,.14); transform:translateY(-3px);}
#mnDevice .dc_no {display:block; margin-bottom:12px; font-size:12px; font-weight:800; letter-spacing:1px; color:#0079cf;}
#mnDevice .dc_tit {display:block; margin-bottom:8px; font-size:19px; font-weight:700;}
#mnDevice .dc_desc {margin:0; font-size:14.5px; line-height:1.7; color:#7a8398; word-break:keep-all;}
/* 처리절차 6단계 (2026-10-30 시안 A) : 번호 원 + 연결선, 마지막 단계만 파란 원 */
#mnDevice .dv_steps {display:flex; margin:50px 0 0; padding:0; list-style:none;}
#mnDevice .dv_steps li {position:relative; flex:1 1 0; min-width:0; padding:0 8px; text-align:center;}
#mnDevice .dv_steps li:before {content:""; position:absolute; top:27px; left:50%; width:100%; height:2px; background:#d6e2f2;}
#mnDevice .dv_steps li:last-child:before {display:none;}
#mnDevice .ds_no {position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border:2px solid #0079cf; border-radius:50%; background:#fff; color:#0079cf; font-size:15px; font-weight:800; box-sizing:border-box;}
#mnDevice .dv_steps li:last-child .ds_no {background:#0079cf; color:#fff;}
/* 마우스를 올리면 원 배경이 바뀜 (마지막 파란 원은 남색으로) */
#mnDevice .ds_no {-webkit-transition:.2s ease; transition:.2s ease;}
#mnDevice .dv_steps li:hover .ds_no {background:#0079cf; color:#fff; -webkit-transform:translateY(-3px); transform:translateY(-3px); box-shadow:0 8px 18px rgba(0,121,207,.25);}
#mnDevice .dv_steps li:last-child:hover .ds_no {border-color:#16234a; background:#16234a;}
#mnDevice .ds_tit {display:block; margin-top:14px; font-size:16px; color:#16234a; word-break:keep-all;}
#mnDevice .ds_desc {margin:6px 0 0; font-size:13.5px; line-height:1.6; color:#7a8398; word-break:keep-all;}

/* ② 취급품목 : 왼쪽 제목 + 오른쪽 제품 카드 3장 (번호 · 제목 · 설명 · 사진 · 버튼) */
#mnProduct {background:-webkit-linear-gradient(left,#fff 0,#f3f7fc 100%); background:linear-gradient(90deg,#fff 0,#f3f7fc 100%);}
#mnProduct .pd_wrap {display:flex; flex-wrap:wrap; gap:24px; align-items:stretch;}
/* 왼쪽 제목 영역 : 남색 바탕 + 흰 글씨 */
#mnProduct .pd_txt {flex:0 0 260px; max-width:260px; display:flex; flex-direction:column; justify-content:center; padding:34px 30px; border-radius:14px; background:#16234a; box-sizing:border-box;}
#mnProduct .pd_txt .mn_eyebrow {color:#8fb8ff;}
#mnProduct .pd_txt .mn_tit {font-size:36px; color:#fff;}
#mnProduct .pd_txt .mn_tit em {font-style:normal; color:#fff;}
#mnProduct .pd_txt .mn_desc {margin-bottom:0; font-size:15px; line-height:1.8; color:#c3d0e8; word-break:keep-all;}

#mnProduct .pd_cards {flex:1 1 600px; min-width:0; display:flex; gap:20px; margin:0; padding:0; list-style:none;}
#mnProduct .pd_card {flex:1 1 0; min-width:0; display:flex; flex-direction:column; padding:24px 20px 20px; border-radius:14px; background:#fff; box-shadow:0 10px 30px rgba(22,35,74,.08); box-sizing:border-box; transition:.25s ease;}
#mnProduct .pd_card:hover {box-shadow:0 16px 36px rgba(22,35,74,.14); transform:translateY(-4px);}
#mnProduct .pc_no {display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:13px; font-weight:800; letter-spacing:1px; color:#0079cf;}
#mnProduct .pc_no:after {content:""; width:24px; height:1px; background:#0079cf;}
#mnProduct .pc_tit {display:block; margin-bottom:8px; font-size:20px; font-weight:800; color:#16234a; word-break:keep-all;}
#mnProduct .pc_desc {margin:0 0 12px; min-height:3.4em; font-size:13.5px; line-height:1.7; color:#5a6478; word-break:keep-all;}
#mnProduct .pc_photo {display:flex; align-items:center; justify-content:center; height:150px; margin:0 0 16px;}
#mnProduct .pc_photo img {max-width:100%; max-height:150px;}
#mnProduct .pc_more {display:flex; align-items:center; justify-content:center; gap:10px; margin-top:auto; padding:11px 14px; border-radius:6px; background:#16234a; color:#fff; font-size:14px; font-weight:700; text-decoration:none; transition:.2s ease;}
#mnProduct .pd_card:hover .pc_more, #mnProduct .pc_more:hover {background:#0079cf; color:#fff;}

/* ③ 갤러리 (현장사진) : 가운데 사진이 크고, 양옆 사진이 비스듬히 뒤로 물러나는 파노라마 */
#mnGallery .gl_head {display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:26px;}
/* 2026-10-29 : 가운데 사진을 가로 · 세로 2/3 로 줄이고(폭 56% → 37.5%), 남는 양옆에 흐린 사진이 2장씩 보이게 했습니다.
   양옆 사진 위치 · 흐림 정도는 index.php 아래쪽 스크립트(갤러리)에서 정합니다. */
#mnGallery .gl_stage {position:relative; height:310px; margin-top:6px; -webkit-perspective:1400px; perspective:1400px; overflow:hidden;}
/* 사진 칸이 4:3 이 되도록 높이를 폭에 맞춘다 (사진 칸 폭 37.5% × 3/4 ≒ 28%) — 위아래 잘림 방지 */
@supports (aspect-ratio:1/1) {
    #mnGallery .gl_stage {height:auto; aspect-ratio:100 / 28; max-height:400px;}
}
#mnGallery .gl_slides {position:relative; width:100%; height:100%; margin:0; padding:0; list-style:none; -webkit-transform-style:preserve-3d; transform-style:preserve-3d;}
#mnGallery .gl_slides li {position:absolute; left:50%; top:0; width:37.5%; height:100%; margin-left:-18.75%;
    -webkit-transition:transform .9s ease, opacity .9s ease, -webkit-filter .9s ease; transition:transform .9s ease, opacity .9s ease, filter .9s ease;
    -webkit-backface-visibility:hidden; backface-visibility:hidden; will-change:transform, opacity;}
#mnGallery figure {position:relative; margin:0; width:100%; height:100%; border-radius:14px; overflow:hidden; background:#eef1f6; box-shadow:0 18px 44px rgba(22,35,74,.22);}
#mnGallery img {width:100%; height:100%; object-fit:cover;}
#mnGallery figcaption {position:absolute; left:0; right:0; bottom:0; padding:50px 24px 18px; background:linear-gradient(transparent,rgba(12,20,40,.82)); color:#fff; font-size:17px; font-weight:700; opacity:0; transition:opacity .4s ease;}
/* 가운데 사진에만 설명을 보여준다 */
#mnGallery .gl_slides li.on figcaption {opacity:1;}
#mnGallery .gl_slides li:not(.on) figure {cursor:pointer;}
/* 돋보기 : 가운데 사진에만 보이고, 누르면 원본이 크게 열립니다 */
#mnGallery .gl_zoom {display:none; position:absolute; right:18px; top:18px; z-index:5; width:46px; height:46px; border-radius:50%; background:rgba(12,20,40,.55); color:#fff; font-size:17px; line-height:46px; text-align:center; -webkit-transition:.2s ease; transition:.2s ease;}
#mnGallery .gl_slides li.on .gl_zoom {display:block;}
#mnGallery .gl_zoom:hover {background:#0079cf; -webkit-transform:scale(1.06); transform:scale(1.06);}
/* 좌우 단추와 점 */
#mnGallery .gl_btn {position:absolute; top:50%; z-index:20; width:48px; height:48px; margin-top:-24px; padding:0; border:0; border-radius:50%; background:rgba(12,20,40,.5); color:#fff; font-size:18px; cursor:pointer; transition:.2s ease;}
#mnGallery .gl_btn:hover {background:#0079cf;}
#mnGallery .gl_prev {left:12px;}
#mnGallery .gl_next {right:12px;}
#mnGallery .gl_dots {display:flex; justify-content:center; gap:9px; margin-top:18px;}
#mnGallery .gl_dots button {width:10px; height:10px; padding:0; border:0; border-radius:50%; background:#d7deea; cursor:pointer; transition:.2s ease;}
#mnGallery .gl_dots button.on {width:28px; border-radius:5px; background:#16234a;}

/* ③-1 인허가 사항 : 왼쪽 제목 + 오른쪽 허가증 (theme/hanatrans/parts/main_cert.php) */
#mnCert {background:#f5f8fc;}
#mnCert .ct_wrap {display:flex; align-items:center; gap:60px;}
#mnCert .ct_head {flex:0 0 340px; min-width:0;}
#mnCert .ct_head .mn_more {margin-top:30px;}
#mnCert .ct_grid {flex:1 1 0; min-width:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin:0; padding:0; list-style:none;}
#mnCert .ct_item a {display:block; text-decoration:none;}
#mnCert .ct_img {position:relative; display:flex; align-items:center; justify-content:center; height:300px; padding:18px; border:1px solid #e3e9f2; border-radius:12px; background:#fff; box-shadow:0 6px 18px rgba(22,35,74,.06); overflow:hidden; transition:.25s ease;}
#mnCert .ct_img img {max-width:100%; max-height:100%; box-shadow:0 2px 8px rgba(0,0,0,.12);}
#mnCert .ct_zoom {position:absolute; right:12px; bottom:12px; width:38px; height:38px; border-radius:50%; background:rgba(22,35,74,.75); color:#fff; font-size:15px; line-height:38px; text-align:center; opacity:0; transition:.25s ease;}
#mnCert .ct_item a:hover .ct_img {border-color:#0079cf; transform:translateY(-4px); box-shadow:0 14px 28px rgba(22,35,74,.14);}
#mnCert .ct_item a:hover .ct_zoom {opacity:1;}
#mnCert .ct_cap {margin-top:14px; text-align:center; font-size:15.5px; font-weight:600; color:#16234a; word-break:keep-all;}
#mnCert .ct_badge {display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:8px 16px; border-radius:100px; background:#fff; border:1px solid #d7e2f1; font-size:14px; color:#304a8c;}
#mnCert .ct_badge b {color:#16234a;}
@media (max-width:1100px) {
    #mnCert .ct_wrap {display:block;}
    #mnCert .ct_head {margin-bottom:30px;}
    #mnCert .ct_head .mn_more {margin-top:20px;}
}
@media (max-width:768px) {
    #mnCert .ct_grid {grid-template-columns:1fr 1fr; gap:14px;}
    #mnCert .ct_img {height:210px; padding:12px;}
    #mnCert .ct_cap {font-size:13.5px;}
}

/* ④ 견적문의 (문의 폼) */
/* 배경사진 : /images/home/inquiry_bg.jpg (바꾸려면 같은 이름으로 덮어쓰면 됩니다) */
#mnInquiry {position:relative; padding:0; background:#16234a url(/images/home/inquiry_bg.jpg) center center no-repeat; background-size:cover;}
/* 사진 위에 남색을 덮어 글자가 잘 읽히게 한다 */
#mnInquiry .iq_bg {position:absolute; left:0; top:0; right:0; bottom:0;
    background:-webkit-linear-gradient(left,rgba(14,26,58,.95) 0%,rgba(22,41,90,.88) 55%,rgba(28,54,116,.72) 100%);
    background:linear-gradient(90deg,rgba(14,26,58,.95) 0%,rgba(22,41,90,.88) 55%,rgba(28,54,116,.72) 100%);}
/* 왼쪽 안내와 오른쪽 입력폼의 위아래 끝을 맞춘다 */
#mnInquiry .iq_inner {position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:50px 60px; padding:56px 0;}
#mnInquiry .iq_txt {display:flex; flex-direction:column; justify-content:center; flex:1 1 360px; min-width:0; color:#fff;}
#mnInquiry .iq_bottom {margin-top:30px; padding-top:26px; border-top:1px solid rgba(255,255,255,.16);}
#mnInquiry .iq_txt .mn_tit {color:#fff;}
#mnInquiry .iq_txt .mn_desc {color:#c3d0e8;}
#mnInquiry .iq_tel {display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:30px 0 6px; font-size:17px; font-weight:700; color:#ffc14d;}
#mnInquiry .iq_tel b {font-size:27px; color:#fff; letter-spacing:0.5px;}
/* 연중무휴 강조 */
#mnInquiry .iq_always {padding:5px 14px; border-radius:100px; background:#ffc14d; color:#16234a; font-size:13.5px; font-weight:800; letter-spacing:0.5px;}
#mnInquiry .iq_time {margin:0; font-size:14.5px; color:#a9b8d8;}
/* 휴대전화 + 사진 안내 */
#mnInquiry .iq_mobile {display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:20px 0 8px; padding-top:18px; border-top:1px solid rgba(255,255,255,.16); font-size:16px; font-weight:700; color:#8fb8ff;}
#mnInquiry .iq_mobile b {font-size:23px; color:#fff; letter-spacing:0.5px;}
/* 대표번호 줄을 뺀 뒤 휴대전화가 맨 위에 오면 위 구분선은 없앰 */
#mnInquiry .iq_bottom .iq_mobile:first-child {margin-top:0; padding-top:0; border-top:0;}
#mnInquiry .iq_photo {margin:0; font-size:14.5px; line-height:1.8; color:#c3d0e8; word-break:keep-all;}
#mnInquiry .iq_photo em {font-style:normal; color:#ffc14d; font-weight:700;}
#mnInquiry .iq_form {display:flex; flex-direction:column; flex:1 1 560px; min-width:0;}
/* 문의내용 칸이 남는 높이를 채워 아랫단이 정확히 맞도록 */
#mnInquiry .fm_row_memo {align-items:stretch;}
#mnInquiry .fm_row_memo .fm_label {align-items:flex-start; padding-top:11px;}
#mnInquiry .fm_row_memo .fm_field {display:flex;}
#mnInquiry .fm_row {display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:9px;}
#mnInquiry .fm_label {flex:0 0 120px; display:flex; align-items:center; gap:10px; color:#fff; font-size:15.5px; font-weight:700; letter-spacing:2px;}
#mnInquiry .fm_label i {width:20px; text-align:center; color:#8fb8ff; font-size:16px;}
#mnInquiry .fm_field {flex:1 1 320px; min-width:0;}
#mnInquiry input[type=text], #mnInquiry textarea {width:100%; padding:11px 15px; border:0; border-radius:4px; background:#fff; font-family:inherit; font-size:15px; color:#333; box-sizing:border-box;}
#mnInquiry textarea {height:92px; min-height:92px; resize:vertical;}
/* 자동등록방지 : 입력칸 영역 */
#mnInquiry .fm_row_captcha .fm_field {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-align-items:center; align-items:center; gap:8px;}
#mnInquiry .fm_row_captcha #captcha {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-align-items:center; align-items:center; gap:8px;}
#mnInquiry .fm_row_captcha input[type=text] {width:auto; min-width:160px; padding:10px 14px;}
#mnInquiry .fm_row_captcha #captcha_info {font-size:13px; color:#a9b8d8;}
#mnInquiry .fm_row_captcha img {border-radius:4px;}
/* 관리자에게만 보이는 안내 */
#mnInquiry .fm_cap_off {padding:10px 14px; border:1px dashed rgba(255,255,255,.3); border-radius:6px; font-size:13.5px; line-height:1.6; color:#c3d0e8;}

#mnInquiry .fm_agree {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 14px; color:#dbe4f5; font-size:14.5px;}
#mnInquiry .fm_agree a {color:#a9b8d8; text-decoration:underline;}
#mnInquiry .fm_submit {width:100%; padding:14px; border:0; border-radius:4px; background:#0f1626; color:#fff; font-family:inherit; font-size:17px; font-weight:700; letter-spacing:6px; cursor:pointer;}
#mnInquiry .fm_submit:hover {background:#0079cf;}

@media (max-width:1200px) {
    .mn_sec {padding:56px 0;}
    .mn_tit {font-size:30px;}
    #mnProduct .pd_txt {flex:1 1 100%; max-width:none;}
    #mnProduct .pd_txt .mn_tit {font-size:32px;}
    #mnProduct .pd_txt .mn_desc br {display:none;}
    #mnProduct .pd_cards {flex:1 1 100%;}
    #mnDevice .dv_steps {flex-wrap:wrap; row-gap:28px;}
    #mnDevice .dv_steps li {flex:1 1 33.33%;}
    #mnDevice .dv_steps li:nth-child(3n):before {display:none;}
    #mnGallery .gl_stage {height:300px;}
    @supports (aspect-ratio:1/1) { #mnGallery .gl_stage {height:auto; aspect-ratio:100 / 34;} }
    #mnGallery .gl_slides li {width:45%; margin-left:-22.5%;}
}
@media (max-width:768px) {
    .mn_sec {padding:44px 0;}
    .mn_tit {font-size:23px;}
    .mn_desc {font-size:15px;}
    #conWrap {padding:0 20px;}
    #mnDevice .dv_wrap {gap:30px;}
    #mnDevice .dv_cards li {flex:1 1 100%; max-width:100%;}
    #mnDevice .dv_steps {margin-top:36px;}
    #mnDevice .dv_steps li {flex:1 1 50%;}
    #mnDevice .dv_steps li:before {display:none;}
    #mnProduct .pd_txt .mn_tit {font-size:26px;}
    #mnProduct .pd_cards {flex-direction:column; gap:16px;}
    #mnProduct .pc_desc {min-height:0;}
    #mnProduct .pc_photo {height:170px;}
    #mnProduct .pc_photo img {max-height:170px;}
    #mnGallery .gl_stage {height:260px;}
    @supports (aspect-ratio:1/1) { #mnGallery .gl_stage {height:auto; aspect-ratio:100 / 58;} }
    #mnGallery .gl_slides li {width:78%; margin-left:-39%;}
    #mnGallery figcaption {padding:40px 16px 14px; font-size:14px;}
    #mnGallery .gl_btn {width:38px; height:38px; margin-top:-19px; font-size:15px;}
    #mnGallery .gl_zoom {right:10px; top:10px; width:38px; height:38px; font-size:14px; line-height:38px;}
    #mnInquiry .iq_inner {gap:34px; padding:56px 0;}
    #mnInquiry .fm_label {flex:1 1 100%;}
}

/* ---------- 메인 슬라이더 ---------- */
#mainSlider {position:relative; width:100%; height:500px; overflow:hidden; background:#1a2540;}
#mainSlider .slides {position:relative; height:100%; margin:0; padding:0;}
#mainSlider .slides > li {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; -webkit-transition:opacity 1s; transition:opacity 1s;}
#mainSlider .slides > li.on {opacity:1;}
#mainSlider .slides > li > a, #mainSlider .slides > li > .sl_img {display:block; position:absolute; top:0; left:0; width:100%; height:100%;}
/* 히어로 버튼 : 견적문의 · 전화 */
#mainSlider .st_btns {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:12px; margin:28px 0 0;}
#mainSlider .st_btn {display:-webkit-inline-flex; display:inline-flex; -webkit-align-items:center; align-items:center; gap:10px; padding:15px 30px; border-radius:100px; font-size:16px; font-weight:700; text-decoration:none; -webkit-transition:.2s ease; transition:.2s ease;}
#mainSlider .st_btn_main {background:#0079cf; color:#fff; box-shadow:0 8px 20px rgba(0,121,207,.35);}
#mainSlider .st_btn_main:hover {background:#fff; color:#16234a;}
#mainSlider .st_btn_tel {border:1px solid rgba(255,255,255,.6); color:#fff; letter-spacing:.5px;}
#mainSlider .st_btn_tel:hover {background:rgba(255,255,255,.16);}
/* 슬라이드 이미지는 화면 폭에 꽉 차게 (1920px 고정 → 100%) */
#mainSlider .slides > li img {position:absolute; top:0; left:0; max-width:none; width:100%; height:500px; object-fit:cover;}

/* 슬라이드 문구 : 사진 위에 좌측 정렬. 사진이 밝아도 읽히도록 왼쪽에 어두운 그라데이션을 깐다 */
#mainSlider .slide_txt {position:absolute; top:0; left:0; right:0; bottom:0; z-index:3; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center;
    background:-webkit-linear-gradient(left, rgba(8,16,38,.74) 0%, rgba(8,16,38,.48) 45%, rgba(8,16,38,0) 80%);
    background:linear-gradient(90deg, rgba(8,16,38,.74) 0%, rgba(8,16,38,.48) 45%, rgba(8,16,38,0) 80%);}
/* min-width:0 이 없으면 flex 항목의 최소폭이 '가장 긴 단어' 기준이 되어 좁은 화면에서 글자가 화면 밖으로 넘친다 */
#mainSlider .slide_txt #conWrap {width:100%; min-width:0;}
/* word-break 은 그누보드 리셋의 p{word-break:break-all} 을 무력화 (영문이 단어 중간에서 잘리는 것 방지) */
#mainSlider .st_eyebrow {margin:0 0 15px; font-size:16px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:#8fb8ff; word-break:keep-all;}
#mainSlider .st_tit {margin:0; font-size:44px; font-weight:800; line-height:1.25; color:#fff; word-break:keep-all; text-shadow:0 2px 12px rgba(0,0,0,.4);}
#mainSlider .st_desc {margin:20px 0 0; font-size:18px; line-height:1.7; color:#e3eaf9; word-break:keep-all; overflow-wrap:break-word; text-shadow:0 1px 8px rgba(0,0,0,.4);}

/* 슬라이드가 바뀔 때 문구가 순서대로 떠오르는 효과.
   기본 상태를 '보임'으로 두고 애니메이션만 얹는다 — on 클래스가 붙지 않는 상황에서도 문구는 항상 보인다. */
@-webkit-keyframes st_up {from {opacity:0; -webkit-transform:translateY(20px);} to {opacity:1; -webkit-transform:none;}}
@keyframes st_up {from {opacity:0; transform:translateY(20px);} to {opacity:1; transform:none;}}
#mainSlider .slides > li.on .st_eyebrow {-webkit-animation:st_up .8s .25s both; animation:st_up .8s .25s both;}
#mainSlider .slides > li.on .st_tit {-webkit-animation:st_up .8s .4s both; animation:st_up .8s .4s both;}
#mainSlider .slides > li.on .st_desc {-webkit-animation:st_up .8s .55s both; animation:st_up .8s .55s both;}
#mainSlider .slides > li.on .st_btns {-webkit-animation:st_up .8s .7s both; animation:st_up .8s .7s both;}

#mainSlider .slide_bullets {position:absolute; left:0; right:0; bottom:20px; text-align:center; z-index:5;}
#mainSlider .slide_bullets button {width:14px; height:14px; margin:0 4px; padding:0; border-radius:50%; border:2px solid #304a8c; background:#8c8d8c; cursor:pointer;}
#mainSlider .slide_bullets button.on {background:#fff;}

/* 홈 공통 타이틀 */
h2.hometitle {font-size:45px; color:#304a8c; font-family:'Roboto Slab',serif; text-shadow:1px 1px 0 rgba(255,255,255,0.9);}
h2.hometitle small {display:block; font-size:14px; line-height:20px; color:#434343; font-weight:normal; text-shadow:1px 1px 0 rgba(255,255,255,0.9); margin-top:10px;}

/* Products : 제품군별 밴드 (좌측 설명 + 우측 제품 그리드) */
#products {padding:50px 0 0;}
/* 밴드는 배경이 화면 끝까지 깔려야 하므로 #conWrap 대신 안쪽 컨테이너를 따로 둔다 (id 중복 방지) */
#products .prod_inner {width:100%; max-width:1600px; margin:0 auto; padding:0 30px;}
#products .prod_title {text-align:center; padding-bottom:34px;}

#products .prod_band {padding:44px 0; border-top:1px solid #edeff3;}
#products .prod_band.is_alt {background:#f7f8fa;}   /* 짝수 밴드 배경 교차 (클래스는 index.php 에서 부여) */
#products .prod_band .prod_inner {display:-webkit-flex; display:flex; -webkit-align-items:flex-start; align-items:flex-start; gap:40px;}

#products .prod_band_head {-webkit-flex:0 0 250px; flex:0 0 250px; min-width:0;}
#products .prod_band_head .no {display:block; font-family:'Roboto Slab',serif; font-size:12px; letter-spacing:2px; color:#9aa3b5; margin-bottom:8px;}
#products .prod_band_head h3 {font-size:24px; line-height:1.3; color:#23376d; margin:0 0 10px; word-break:keep-all;}
#products .prod_band_head .en {display:block; font-family:'Roboto Slab',serif; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:#8a93a6; margin-bottom:12px;}
#products .prod_band_head p {font-size:13.5px; line-height:1.75; color:#666; margin:0 0 16px; word-break:keep-all;}
#products .prod_more {display:inline-block; font-size:13px; color:#304a8c; border:1px solid #304a8c; padding:7px 16px;}
#products .prod_more:hover {background:#304a8c; color:#fff;}

/* 제품 4열. 썸네일은 176px 고정이라 칸 안에서 가운데로 정렬한다 */
#products .prod_grid {-webkit-flex:1 1 0; flex:1 1 0; min-width:0; display:grid; grid-template-columns:repeat(4,1fr); gap:26px 20px; justify-items:center; text-align:center;}
#products a.product {display:block; position:relative; width:176px; margin:0;}
#products a.product div.cover {position:absolute; top:0; left:0; background:url(/images/home/product_round.png) no-repeat; width:176px; height:176px; z-index:2;}
#products a.product img {width:176px; height:176px; object-fit:cover;}
#products a.product p {font-size:14px; color:#333; margin-top:10px; word-break:keep-all;}
#products a.product:hover p {color:#304a8c;}
/* 등록된 제품이 없는 제품군 자리표시 */
.product_empty {grid-column:1 / -1; justify-self:stretch; margin:0; padding:44px 0; font-size:14px; color:#9aa0ab; background:#fafbfc; border:1px dashed #e2e5ea;}
.product_empty a {margin-left:6px; color:#304a8c; text-decoration:underline;}

/* Business */
#business {background:url(/images/home/business_bg.jpg) center center no-repeat; background-size:cover; text-align:center; padding:50px 0;}
/* 넓어진 컨테이너를 가득 채우도록 4등분 (기존 220px 고정폭 → flex) */
#business ul {display:-webkit-flex; display:flex; -webkit-justify-content:center; justify-content:center; margin-top:20px; padding:0; gap:20px;}
#business ul li {float:none; -webkit-flex:1 1 0; flex:1 1 0; min-width:0; max-width:340px; margin:0;}
#business ul li a {display:block;}
#business ul li figure img {display:block; width:100%;}
#business ul li figcaption {background:#fff; font-size:14px; color:#666; padding:10px 0;}

/* 공지 / 질문답변 / 고객센터 */
#cus_wrap {padding:30px 0;}
#cus_wrap #conWrap {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; align-items:stretch;}
.notice, .qna {-webkit-flex:1 1 0; flex:1 1 0; min-width:0; border:1px solid #ddd; border-right:0; min-height:230px; box-sizing:border-box;}
.customer {-webkit-flex:0 0 258px; flex:0 0 258px; background:#304a8c; padding:20px; box-sizing:border-box; overflow:hidden;}
.boardTitle {padding:20px;}
.boardTitle:after {content:""; display:block; clear:both;}
.boardTitle h3 {font-size:20px; color:#304a8c; float:left;}
.boardTitle a {display:block; float:right;}
.boardList {padding:0 20px 20px 20px;}
.boardList article:after {content:""; display:block; clear:both;}
.boardList article a.subject {display:block; float:left; max-width:74%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; color:#444; background:url(/images/home/dot.gif) left center no-repeat; padding-left:15px; line-height:28px;}
.boardList article span {display:block; float:right; font-size:12px; color:#666; line-height:28px;}
.boardList article a.answer {background:url(/images/home/reply.gif) left center no-repeat; padding-left:45px;}
.boardList article.empty {color:#888; padding:20px 0;}
.customer h3 {font-size:20px; color:#fff;}
.customer p.tel {background:#23376d; font-size:36px; color:#fff; text-align:center; margin:10px 0; padding:5px 0;}
.customer span {display:block; font-size:13px; color:#fff;}
.customer aside {display:block; font-size:13px; color:#bccaee; margin-top:10px;}

/* 주요거래처 롤링 */
#clients {padding:38px 0 42px; background:#f7f8fa; border-top:1px solid #e9ecf1;}
#clients .cl_head {display:-webkit-flex; display:flex; -webkit-align-items:baseline; align-items:baseline; -webkit-justify-content:space-between; justify-content:space-between; gap:12px; margin-bottom:22px;}
#clients .cl_head h2 {margin:0; font-size:20px; color:#304a8c; white-space:nowrap;}
#clients .cl_head h2 em {display:inline-block; margin-left:10px; font-style:normal; font-family:'Roboto Slab',serif; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:#9aa3b5;}
#clients .cl_more {font-size:13px; color:#666; white-space:nowrap;}
#clients .cl_more:hover {color:#304a8c;}

/* 좌우 끝을 배경색으로 흐리게 덮어 잘린 로고가 자연스럽게 사라지도록 */
#clients .cl_viewport {position:relative; overflow:hidden;}
#clients .cl_viewport:before, #clients .cl_viewport:after {content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none;}
#clients .cl_viewport:before {left:0; background:-webkit-linear-gradient(left, #f7f8fa, rgba(247,248,250,0)); background:linear-gradient(90deg, #f7f8fa, rgba(247,248,250,0));}
#clients .cl_viewport:after {right:0; background:-webkit-linear-gradient(right, #f7f8fa, rgba(247,248,250,0)); background:linear-gradient(270deg, #f7f8fa, rgba(247,248,250,0));}

/* 똑같은 한 벌(.cl_set)을 2벌 이어 붙이고 딱 한 벌(=-50%)만큼 밀어 무한 반복.
   이동량을 CSS 변수로 두면 구형 웹킷·인앱 브라우저에서 키프레임이 통째로 무시되므로 고정값을 쓴다.
   단축 속성에 기본 시간(40s)을 반드시 넣어야 인라인 스타일이 막힌 환경에서도 멈추지 않는다. */
#clients .cl_track {display:-webkit-flex; display:flex; width:-webkit-max-content; width:max-content; -webkit-animation:cl_roll 40s linear infinite; animation:cl_roll 40s linear infinite; -webkit-backface-visibility:hidden; backface-visibility:hidden; will-change:transform;}
#clients .cl_viewport:hover .cl_track {-webkit-animation-play-state:paused; animation-play-state:paused;}
#clients .cl_set {display:-webkit-flex; display:flex; margin:0; padding:0; list-style:none;}
#clients .cl_item {-webkit-flex:0 0 auto; flex:0 0 auto; margin:0 44px 0 0;}
#clients .cl_box {display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; width:200px; height:86px; padding:12px 18px; background:#fff; border:1px solid #e4e7ee; box-sizing:border-box;}
#clients .cl_box img {max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}
#clients .cl_box:hover {border-color:#304a8c;}
/* 로고 이미지가 없는 거래처는 이름을 박스에 담아 표시 */
#clients .cl_box.is_text span {font-size:15px; font-weight:500; color:#3c4658; line-height:1.4; text-align:center; word-break:keep-all;}
#clients .cl_box.is_text:hover span {color:#304a8c;}

@-webkit-keyframes cl_roll {from {-webkit-transform:translate3d(0,0,0);} to {-webkit-transform:translate3d(-50%,0,0);}}
@keyframes cl_roll {from {-webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0);} to {-webkit-transform:translate3d(-50%,0,0); transform:translate3d(-50%,0,0);}}

/* 관리자 전용 안내 */
#clients .cl_empty {margin:0; padding:26px 24px; background:#fff; border:1px dashed #d9dee8; font-size:14px; color:#6b7385; line-height:1.7;}
#clients .cl_empty b {color:#304a8c;}
#clients .cl_empty code {font-family:Consolas,monospace; font-size:13px; background:#eef0f4; padding:1px 5px;}
#clients .cl_empty_sub {display:block; margin-top:6px; font-size:12px; color:#a2a8b4;}
#clients .cl_empty_raw {display:block; margin-top:10px; padding:12px 14px; background:#f6f7f9; border:1px solid #e5e8ee; font-family:Consolas,monospace; font-size:12px; line-height:1.6; color:#55607a; white-space:pre-wrap; word-break:break-all; max-height:220px; overflow:auto;}

/* 움직임을 줄이도록 설정한 사용자에게는 롤링 대신 멈춘 목록으로 제공.
   index.php 의 $ht_client_force_motion 이 true 면 #clients 에 .cl_force 가 붙어 이 블록을 건너뛴다.
   가로 스크롤(overflow-x:auto)로 두면 스크롤바가 그대로 드러나 고장난 것처럼 보이므로 쓰지 않는다. */
@media (prefers-reduced-motion:reduce) {
    #clients:not(.cl_force) .cl_track {-webkit-animation:none; animation:none; width:auto; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:center; justify-content:center;}
    #clients:not(.cl_force) .cl_set {-webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:center; justify-content:center;}
    #clients:not(.cl_force) .cl_viewport {overflow:hidden;}
    #clients:not(.cl_force) .cl_viewport:before, #clients:not(.cl_force) .cl_viewport:after {display:none;}
    #clients:not(.cl_force) .cl_set[aria-hidden] {display:none;}
    #clients:not(.cl_force) .cl_item {margin:0 22px 18px 22px;}

    /* 박스 마우스오버 : 떠오르기·확대는 빼고 색과 그림자 변화만 남긴다 */
    .company_location .hour_card:hover,
    .company_location .hour_card:hover .hour_ic,
    .oil_page .oil_card:hover,
    .oil_page .oil_card:hover .oc_ic,
    .oil_page .oil_check li:hover,
    .oil_page .oil_check li:hover:before,
    .oil_page .oil_note:hover .note_ic,
    .oil_page .oil_step:hover,
    .oil_page .oil_step:hover .st_ic,
    .oil_page .oil_warn .warn_case:hover,
    .oil_page .oil_warn .warn_case:hover .wc_ic,
    .oil_page .oil_effects li:hover,
    .oil_page .oil_effects li:hover .ef_ic,
    #business ul li a:hover,
    #business ul li a:hover figure img,
    #products a.product:hover {-webkit-transform:none; transform:none;}
}

/* ---------- 푸터 ---------- */
footer#ft {clear:both;}
footer#ft section#footerBtn {background:#efefef;}
footer#ft section#footerBtn #conWrap {text-align:center;}
footer#ft section#footerBtn a {display:inline-block; background:url(/images/footer/bar.png) right center no-repeat; padding:0 15px; font-size:12px; color:#494949; line-height:40px;}
footer#ft section#footerBtn a:last-child {background:none;}
footer#ft section#footerBtn a:hover {color:#304a8c;}
footer#ft section#copyright {background:#36405b; padding:26px 0 30px 0;}
/* 로고 · 회사정보 · 전국 상담센터 를 한 줄에 배치 */
footer#ft section#copyright .ft_cols {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-align-items:flex-start; align-items:flex-start; gap:30px;}
/* 심볼은 원본 그대로 출력하고(filter/배경판 없음) 회사명만 흰색 텍스트로 얹어 어두운 배경과 대비시킨다 */
footer#ft section#copyright h2 {-webkit-flex:0 0 auto; flex:0 0 auto; margin:0; line-height:0; text-align:center;}
footer#ft section#copyright h2 img {height:64px; width:auto;}
footer#ft section#copyright h2 .ft_logo_name {display:block; margin-top:12px; font-size:21px; font-weight:700; line-height:1; letter-spacing:-.03em; color:#fff; white-space:nowrap;}
footer#ft section#copyright .ft_info {-webkit-flex:0 0 auto; flex:0 0 auto; min-width:0;}
footer#ft section#copyright p {margin:0; font-size:0; line-height:0;}
footer#ft section#copyright p span {display:inline-block; color:#fff; font-size:16px; line-height:27px;}

/* 허가번호 강조 (거래처가 가장 먼저 확인하는 정보) */
footer#ft section#copyright p.ft_license {margin-top:14px; padding-top:13px; border-top:1px solid rgba(255,255,255,.13); font-size:14px; line-height:1.5; color:#cfd8ee;}
footer#ft section#copyright p.ft_license i {margin-right:6px; color:#8fb0ff;}
footer#ft section#copyright p.ft_license strong {color:#fff; font-weight:700;}

/* 사이트맵 : 남는 가운데 공간을 채운다. 폭이 좁아지면 자동으로 줄바꿈 */
footer#ft .ft_sitemap {-webkit-flex:1 1 auto; flex:1 1 auto; min-width:0; display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:18px 14px;}
/* 5개 칼럼이 남는 폭을 똑같이 나눠 갖는다 (줄바꿈으로 한 칸만 아래로 떨어지는 것 방지) */
/* 칸 폭을 글자 길이에 맞춰 나눔 : 똑같이 나누면 긴 메뉴명(관리대상기기 처리)이 두 줄로 꺾임 */
footer#ft .ft_sm_col {-webkit-flex:1 1 auto; flex:1 1 auto; min-width:0;}
footer#ft .ft_sm_col .ft_sm_tit {display:block; margin-bottom:11px; font-size:14px; font-weight:700; color:#fff; word-break:keep-all; white-space:nowrap;}
footer#ft .ft_sm_col .ft_sm_tit:hover {color:#8fb0ff;}
footer#ft .ft_sm_col ul {margin:0; padding:0; list-style:none;}
footer#ft .ft_sm_col li a {display:block; padding:3px 0; font-size:13px; color:#aeb9d6; line-height:1.45; word-break:keep-all;}
footer#ft .ft_sm_col li a:hover {color:#fff; text-decoration:underline;}
/* copyright : 하단 중앙 정렬 */
footer#ft section#copyright .ft_copy {margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.13); text-align:center; font-size:11px; color:#9e9e9e; font-weight:300; text-transform:uppercase; letter-spacing:.5px;}

/* 전국 상담센터 */
footer#ft .ft_callcenter {-webkit-flex:0 0 auto; flex:0 0 auto; min-width:250px; padding:2px 0 2px 30px; border-left:1px solid rgba(255,255,255,.16);}
footer#ft .ft_callcenter h3 {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-align-items:center; align-items:center; gap:10px; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.2); font-size:16px; font-weight:700; color:#fff; letter-spacing:1px;}
/* 연중무휴 강조 (메인 견적문의와 같은 노란 알약) */
footer#ft .ft_always {padding:3px 11px; border-radius:100px; background:#ffc14d; color:#16234a; font-size:12.5px; font-weight:800; letter-spacing:0.5px;}
footer#ft .ft_callcenter ul {margin:0; padding:0; list-style:none;}
footer#ft .ft_callcenter li {display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; padding:5px 0;}
footer#ft .ft_callcenter .rg {-webkit-flex:0 0 54px; flex:0 0 54px; color:#aeb9d6; font-size:13px;}
footer#ft .ft_callcenter a {color:#fff; font-size:16px; font-weight:600; letter-spacing:.5px;}
footer#ft .ft_callcenter a:hover {color:#8fb0ff;}

#top_btn {position:fixed;bottom:20px;right:20px;width:50px;height:50px;line-height:46px;border:2px solid #304a8c;color:#304a8c;text-align:center;font-size:15px;z-index:90;background:rgba(255,255,255,0.7);border-radius:3px;}
#top_btn:hover {border-color:#304a8c;background:#304a8c;color:#fff;}

/* ============================================================
   박스 마우스오버 효과
   ------------------------------------------------------------
   페이지별 카드 · 목록 박스에 같은 규칙을 적용해 움직임을 통일합니다.
     · 카드   : 살짝 떠오르고(-4~6px) 그림자가 짙어지며 테두리에 파란기가 돕니다
     · 아이콘 : 카드에 올리면 함께 확대되거나 색이 진해집니다
     · 목록행 : 배경이 진해지고 오른쪽으로 조금 밀립니다
   움직임을 줄이도록 설정한 사용자에게는 이동·확대를 빼고 색 변화만 남깁니다
   (파일 아래쪽 prefers-reduced-motion 블록 참조)
   ============================================================ */

/* ---------- 오시는길 : 운영시간 카드 ---------- */
.company_location .hour_card {-webkit-transition:.25s ease; transition:.25s ease;}
.company_location .hour_ic {-webkit-transition:.25s ease; transition:.25s ease;}
.company_location .hour_card:hover {border-color:#c9d6ee; box-shadow:0 10px 24px rgba(31,44,74,0.1); -webkit-transform:translateY(-4px); transform:translateY(-4px);}
.company_location .hour_card:hover .hour_ic {background:#0079cf; -webkit-transform:scale(1.06); transform:scale(1.06);}

/* ---------- 절연유 교체 : 서비스 소개 2단 카드 ---------- */
.oil_page .oil_card {-webkit-transition:.25s ease; transition:.25s ease;}
.oil_page .oc_ic {-webkit-transition:.25s ease; transition:.25s ease;}
.oil_page .oil_card:hover {border-color:#cddcf1; box-shadow:0 12px 28px rgba(22,35,74,0.1); -webkit-transform:translateY(-4px); transform:translateY(-4px);}
.oil_page .oil_card:hover .oc_ic {-webkit-transform:translateY(-2px) scale(1.06); transform:translateY(-2px) scale(1.06);}

/* 체크 목록 한 줄 */
.oil_page .oil_check li {-webkit-transition:.2s ease; transition:.2s ease;}
.oil_page .oil_check li:before {-webkit-transition:.2s ease; transition:.2s ease;}
.oil_page .oil_check li:hover {background:#e6f0fb; -webkit-transform:translateX(4px); transform:translateX(4px);}
.oil_page .oil_check li:hover:before {background:#0a9d8e; -webkit-transform:scale(1.12); transform:scale(1.12);}
.oil_page .oil_card_need .oil_check li:hover {background:#e1f7f2;}

/* 안내 문구 띠 */
.oil_page .oil_note {-webkit-transition:.25s ease; transition:.25s ease;}
.oil_page .oil_note .note_ic {-webkit-transition:.25s ease; transition:.25s ease;}
.oil_page .oil_note:hover {border-color:#b7e4d8; background:#e5f6f1;}
.oil_page .oil_note:hover .note_ic {background:#0a9d8e; -webkit-transform:scale(1.06); transform:scale(1.06);}

/* ---------- 절연유 교체 : 단계 카드 ---------- */
.oil_page .oil_step {-webkit-transition:.25s ease; transition:.25s ease;}
.oil_page .oil_step .st_no, .oil_page .oil_step .st_ic, .oil_page .oil_step .st_tit {-webkit-transition:.25s ease; transition:.25s ease;}
.oil_page .oil_step:hover {border-color:#cddcf1; box-shadow:0 14px 30px rgba(22,35,74,0.13); -webkit-transform:translateY(-6px); transform:translateY(-6px);}
.oil_page .oil_step:hover .st_no {background:#0079cf;}
.oil_page .oil_step:hover .st_ic {background:-webkit-linear-gradient(top,#3d8fe0,#0f5fbd); background:linear-gradient(160deg,#3d8fe0,#0f5fbd); color:#fff; -webkit-transform:scale(1.06); transform:scale(1.06);}
.oil_page .oil_step:hover .st_tit {color:#0f5fbd;}
/* 카드가 떠오를 때 화살표는 제자리에 있어야 자연스럽다 (카드와 함께 6px 올라가는 것을 상쇄) */
.oil_page .oil_step:after {-webkit-transition:.25s ease; transition:.25s ease;}
.oil_page .oil_step:hover:after {-webkit-transform:translateY(6px); transform:translateY(6px);}

/* ---------- 절연유 교체 : 폐절연유 CASE 카드 ---------- */
.oil_page .oil_warn .warn_case {-webkit-transition:.25s ease; transition:.25s ease;}
.oil_page .oil_warn .wc_ic {-webkit-transition:.25s ease; transition:.25s ease;}
.oil_page .oil_warn .warn_case:hover {box-shadow:0 14px 30px rgba(0,0,0,0.3); -webkit-transform:translateY(-4px); transform:translateY(-4px);}
.oil_page .oil_warn .warn_case:hover .wc_ic {background:#0f5fbd; color:#fff; -webkit-transform:scale(1.06); transform:scale(1.06);}

/* ---------- 절연유 교체 : 효과 카드 (카드 이동은 앞쪽 규칙, 여기서는 안쪽 요소) ---------- */
.oil_page .oil_effects .ef_ic, .oil_page .oil_effects .ef_no, .oil_page .oil_effects .ef_tit {-webkit-transition:.25s ease; transition:.25s ease;}
.oil_page .oil_effects li:hover .ef_ic {background:-webkit-linear-gradient(top,#3d8fe0,#0f5fbd); background:linear-gradient(160deg,#3d8fe0,#0f5fbd); color:#fff; -webkit-transform:scale(1.06); transform:scale(1.06);}
.oil_page .oil_effects li:hover .ef_no {color:#bcd0ea;}
.oil_page .oil_effects li:hover .ef_tit {color:#0f5fbd;}

/* ---------- 메인화면 : 사업소개 4칸 ---------- */
#business ul li a {overflow:hidden; -webkit-transition:.25s ease; transition:.25s ease;}
#business ul li figure {overflow:hidden;}
#business ul li figure img {-webkit-transition:.4s ease; transition:.4s ease;}
#business ul li figcaption {-webkit-transition:.25s ease; transition:.25s ease;}
#business ul li a:hover {box-shadow:0 14px 30px rgba(0,0,0,0.3); -webkit-transform:translateY(-5px); transform:translateY(-5px);}
#business ul li a:hover figure img {-webkit-transform:scale(1.07); transform:scale(1.07);}
#business ul li a:hover figcaption {background:#304a8c; color:#fff;}

/* ---------- 메인화면 : 제품 썸네일 (테두리 이미지가 겹쳐 있어 카드 전체를 움직인다) ---------- */
#products a.product {-webkit-transition:.25s ease; transition:.25s ease;}
#products a.product:hover {-webkit-transform:translateY(-5px); transform:translateY(-5px);}

/* ============================================================
   반응형 브레이크포인트
   ============================================================ */
/* 푸터 : 한 줄에 로고+회사정보+사이트맵+상담센터가 다 들어가지 않는 폭에서는
   사이트맵을 아래 줄 전체폭으로 내린다 (칼럼이 눌려 글자가 깨지는 것 방지) */
@media (max-width:1400px) {
    footer#ft .ft_sitemap {-webkit-flex:1 1 100%; flex:1 1 100%; -webkit-order:3; order:3; margin-top:6px; padding-top:24px; border-top:1px solid rgba(255,255,255,.13);}
    footer#ft .ft_callcenter {-webkit-order:2; order:2; margin-left:auto;}
}

@media (max-width:1280px) {
    /* 화면이 좁아지면 헤더 여백과 메뉴 간격을 함께 줄인다 (간격은 계속 균일) */
    #header .hd_conwrap {padding:0 20px;}
    .gnb_1dli {margin-right:50px;}
    .gnb_1da {padding:0 10px; font-size:16px;}
    .gnb_2da {padding:8px 10px; font-size:13px;}
    .gnb_3dul {margin-left:10px; padding-left:8px;}
    .gnb_3da {padding:5px 6px; font-size:12px;}
    #hd_util {margin-left:8px;}
    #hd_util .btn_quote {padding:11px 16px; font-size:15px;}
}

@media (max-width:1024px) {
    #conWrap {padding:0 20px;}

    /* 슬라이드 문구 */
    #mainSlider .st_eyebrow {font-size:14px; letter-spacing:2px; margin-bottom:12px;}
    #mainSlider .st_tit {font-size:34px;}
    #mainSlider .st_desc {font-size:16px; margin-top:16px;}
    #mainSlider .st_btns {margin-top:22px;}
    #mainSlider .st_btn {padding:13px 24px; font-size:15px;}

    h2.hometitle {font-size:34px;}
    footer#ft section#copyright p span {margin-right:12px;}
    footer#ft .ft_sitemap {gap:14px 16px; padding-left:0;}
}

/* 가로메뉴(로고+메뉴+견적문의)가 들어갈 최소폭(약 1030px) 미만에서는 햄버거로 전환.
   head.php 의 isMobile() 기준값과 반드시 같은 값을 사용할 것 */
@media (max-width:1100px) {
    /* 헤더 : 햄버거 노출 (메뉴는 로고 아래로 떨어지므로 flex 해제, 메가패널 비활성) */
    #header .hd_conwrap {display:block; padding:0 15px;}
    #header #logo {display:block; margin:0; padding:12px 0;}
    #gnb_toggle {display:block; right:0;}
    .gnb_1dli {margin-right:0;}
    #gnb_mega_bg {display:none !important;}
    #header #gnb {float:none; clear:both;}
    #gnb_1dul {display:none; margin:0; height:auto; border-top:1px solid #e0e0e0;}
    #header.gnb_open #gnb_1dul {display:block;}
    .gnb_1dli {display:block; float:none; min-width:0; border-bottom:1px solid #eee;}
    .gnb_1da {display:block; line-height:48px; height:auto; padding:0 20px; font-size:16px;}
    .gnb_1da:hover, #gnb:hover .gnb_1dli:hover > .gnb_1da {background:#f4f7fc; color:#222;}
    /* 아코디언에서는 절대배치 해제 */
    .gnb_2dul {position:static; display:none !important; min-width:0; padding:0; box-shadow:none; background:#f7f7f7;}
    .gnb_1dli.gnb_2dopen .gnb_2dul {display:block !important;}
    .gnb_2da {padding:10px 30px; font-size:14px;}
    .gnb_3dul {margin:0 0 6px 40px; padding-left:10px; border-left:0;}
    .gnb_3da {padding:6px 0; font-size:13px;}

    /* 견적문의 버튼 : 열린 메뉴 하단에 전체폭으로 노출 */
    #hd_util {display:none; clear:both; margin-left:0;}
    #header.gnb_open #hd_util {display:block; padding:12px 15px; border-top:1px solid #e0e0e0;}
    #hd_util .btn_quote {display:block; text-align:center; border-radius:4px;}
}

@media (max-width:768px) {
    /* 슬라이더 : 문구가 들어가므로 220px 로는 좁아 높이를 키움 */
    #mainSlider {height:320px;}
    #mainSlider .slides > li img {width:100%; height:320px;}
    #mainSlider .slide_txt {background:-webkit-linear-gradient(left, rgba(8,16,38,.78) 0%, rgba(8,16,38,.62) 60%, rgba(8,16,38,.35) 100%);
        background:linear-gradient(90deg, rgba(8,16,38,.78) 0%, rgba(8,16,38,.62) 60%, rgba(8,16,38,.35) 100%);}
    #mainSlider .st_eyebrow {font-size:12px; letter-spacing:1.5px; margin-bottom:9px;}
    #mainSlider .st_tit {font-size:24px; line-height:1.35;}
    #mainSlider .st_desc {font-size:14px; line-height:1.6; margin-top:13px;}
    #mainSlider .st_desc br {display:none;}   /* 좁은 화면에서는 자연스럽게 줄바꿈 */
    #mainSlider .st_btns {gap:8px; margin-top:16px;}
    #mainSlider .st_btn {padding:11px 18px; font-size:13.5px;}

    /* Products : 설명 블록이 그리드 위로 올라가고 제품은 2열 */
    h2.hometitle {font-size:30px;}
    #products .prod_inner {padding:0 20px;}
    #products .prod_band {padding:34px 0;}
    #products .prod_band .prod_inner {display:block;}
    #products .prod_band_head {margin-bottom:22px;}
    #products .prod_band_head h3 {font-size:21px;}
    #products .prod_band_head p {margin-bottom:14px;}
    #products .prod_grid {grid-template-columns:repeat(2,1fr); gap:24px 16px;}
    #products a.product {width:140px;}
    #products a.product img {width:140px; height:140px;}
    #products a.product div.cover {width:140px; height:140px; background-size:140px 140px;}

    /* Business : 2열 */
    #business ul {-webkit-flex-wrap:wrap; flex-wrap:wrap; gap:10px;}
    #business ul li {-webkit-flex:0 0 48%; flex:0 0 48%; max-width:48%;}

    /* 주요거래처 : 박스를 줄이고 좌우 페이드도 좁게 */
    #clients {padding:30px 0 34px;}
    #clients .cl_item {margin-right:28px;}
    #clients .cl_box {width:160px; height:72px; padding:10px 14px;}
    #clients .cl_box.is_text span {font-size:13.5px;}
    #clients .cl_viewport:before, #clients .cl_viewport:after {width:40px;}

    /* 공지/QnA/고객센터 : 세로 스택 */
    #cus_wrap #conWrap {display:block;}
    .notice, .qna, .customer {width:100%; border-right:1px solid #ddd; margin-bottom:15px;}

    /* 푸터 : 로고 위 / 정보 아래로 스택. 사이트맵은 모바일에서 너무 길어지므로 숨김(상단 햄버거 메뉴로 대체) */
    footer#ft .ft_sitemap {display:none;}
    footer#ft section#copyright .ft_cols {display:block; text-align:center;}
    footer#ft section#copyright h2 {margin:0 0 18px;}
    footer#ft section#copyright h2 img {height:60px;}
    footer#ft section#copyright h2 .ft_logo_name {margin-top:10px; font-size:19px;}
    footer#ft section#copyright p {text-align:center;}
    footer#ft .ft_callcenter {display:inline-block; margin-top:24px; text-align:left; min-width:0; padding:20px 0 0; border-left:0; border-top:1px solid rgba(255,255,255,.16);}
    footer#ft .ft_callcenter h3 {text-align:center;}

    /* 서브페이지 : 폭이 넓은 게시판 표는 레이아웃을 깨뜨리지 않고 가로 스크롤 */
    .tbl_wrap {overflow-x:auto; -webkit-overflow-scrolling:touch;}
    .tbl_wrap table {min-width:480px;}
    #container_title {font-size:22px;}
    .sub_visual {height:150px;}
    .sub_visual h2 {font-size:26px;}
    .sub_visual .sv_path {margin-top:10px; font-size:12px;}
    #conWrap.sub_wrap {padding:38px 20px 50px;}
}

@media (max-width:480px) {
    h2.hometitle {font-size:24px;}
    #header #logo img {height:46px;}
    #header #logo .lg_name {margin-left:9px; font-size:21px;}
    #gnb_toggle {top:15px;}
    #products .prod_band {padding:28px 0;}
    #products .prod_band_head h3 {font-size:19px;}
    #products .prod_grid {gap:20px 10px;}
    #products a.product {width:120px;}
    #products a.product img {width:120px; height:120px;}
    #products a.product div.cover {width:120px; height:120px; background-size:120px 120px;}
    #business ul li {-webkit-flex:0 0 100%; flex:0 0 100%; max-width:100%;}
    #mainSlider {height:300px;}
    #mainSlider .slides > li img {height:300px;}
    #mainSlider .st_tit {font-size:20px;}
    #mainSlider .st_desc {font-size:13px; margin-top:11px;}
    #mainSlider .st_btns {margin-top:14px;}
    #mainSlider .st_btn {padding:10px 16px; font-size:13px;}
    .customer p.tel {font-size:30px;}
    .sub_visual {height:120px;}
    .sub_visual h2 {font-size:21px;}
}


/* 게시물 선택복사 선택이동 */
#copymove {}
#copymove .win_desc {text-align:center;display:block}
#copymove .tbl_wrap {margin:20px}
#copymove .win_btn {padding:0 20px 20px}
.copymove_current {float:right;background:#ff3061;padding:5px;color:#fff;border-radius:3px}
.copymove_currentbg {background:#f4f4f4}

/* 화면낭독기 사용자용 */
#hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}
.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

/* 본문 바로가기 */
#skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em}

/* ie6 이미지 너비 지정 */
.img_fix {width:100%;height:auto}

/* 캡챠 자동등록(입력)방지 기본 -pc */
#captcha {display:inline-block;position:relative}
#captcha legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
#captcha #captcha_img {height:40px;border:1px solid #898989;vertical-align:top;padding:0;margin:0}
#captcha #captcha_mp3 {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../../../img/captcha2.png') no-repeat;text-indent:-999px;border-radius:3px}
#captcha #captcha_reload {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../../../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px;border-radius:3px}
#captcha #captcha_key {margin:0 0 0 3px;padding:0 5px;width:90px;height:40px;border:1px solid #ccc;background:#fff;font-size:1.333em;font-weight:bold;text-align:center;border-radius:3px;vertical-align:top}
#captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em}

/* 캡챠 자동등록(입력)방지 기본 - mobile */
#captcha.m_captcha audio {display:block;margin:0 0 5px;width:187px}
#captcha.m_captcha #captcha_img {width:160px;height:60px;border:1px solid #e9e9e9;margin-bottom:3px;margin-top:5px;display:block}
#captcha.m_captcha #captcha_reload {position:static;margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../../../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px}
#captcha.m_captcha #captcha_reload span {display:none}
#captcha.m_captcha #captcha_key {margin:0;padding:0 5px;width:115px;height:29px;border:1px solid #b8c9c2;background:#f7f7f7;font-size:1.333em;font-weight:bold;text-align:center;line-height:29px;margin-left:3px}
#captcha.m_captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em}
#captcha.m_captcha #captcha_mp3 {width:31px;height:31px;background:url('../../../img/captcha2.png') no-repeat 0 0 ; vertical-align:top;overflow:hidden;cursor:pointer;text-indent:-9999px;border:none}

/* ckeditor 단축키 */
.cke_sc {margin:0 0 5px;text-align:right}
.btn_cke_sc {display:inline-block;padding:0 10px;height:23px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;line-height:1.9em;vertical-align:middle;cursor:pointer}
.cke_sc_def {margin:0 0 5px;padding:10px;border:1px solid #ccc;background:#f7f7f7;text-align:center}
.cke_sc_def dl {margin:0 0 5px;text-align:left;zoom:1}
.cke_sc_def dl:after {display:block;visibility:hidden;clear:both;content:""}
.cke_sc_def dt, .cke_sc_def dd {float:left;margin:0;padding:5px 0;border-bottom:1px solid #e9e9e9}
.cke_sc_def dt {width:20%;font-weight:bold}
.cke_sc_def dd {width:30%}

/* ckeditor 태그 기본값 */
#bo_v_con ul {display:block;list-style-type:disc;margin-top:1em;margin-bottom:1em;margin-left:0;margin-right:0;padding-left:40px}
#bo_v_con ol {display:block;list-style-type:decimal;margin-top:1em;margin-bottom:1em;margin-left:0;margin-right:0;padding-left:40px}
#bo_v_con li {display:list-item}

/* 버튼 */
a.btn,.btn {line-height:35px;height:35px;padding:0 10px;text-align:center;font-weight:bold;border:0;font-size:1.4em;
-webkit-transition:background-color 0.3s ease-out;
-moz-transition:background-color 0.3s ease-out;
-o-transition:background-color 0.3s ease-out;
transition:background-color 0.3s ease-out}

a.btn01 {display:inline-block;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;vertical-align:middle}
a.btn01:focus, a.btn01:hover {text-decoration:none}
button.btn01 {display:inline-block;margin:0;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none}
a.btn02 {display:inline-block;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none;vertical-align:middle}
a.btn02:focus, .btn02:hover {text-decoration:none}
button.btn02 {display:inline-block;margin:0;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none}

.btn_confirm {text-align:right} /* 서식단계 진행 */

.btn_submit {border:0;background:#3a8afd;color:#fff;cursor:pointer;border-radius:3px}
.btn_submit:hover {background:#2375eb}
.btn_close {border:1px solid #dcdcdc;cursor:pointer;border-radius:3px;background:#fff}
a.btn_close {text-align:center;line-height:50px}

a.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle}
button.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle}
.btn_cancel:hover {background:#aaa}
a.btn_frmline, button.btn_frmline {display:inline-block;width:128px;padding:0 5px;height:40px;border:0;background:#434a54;border-radius:3px;color:#fff;text-decoration:none;vertical-align:top} /* 우편번호검색버튼 등 */
a.btn_frmline {}
button.btn_frmline {font-size:1em}

/* 게시판용 버튼 */
a.btn_b01,.btn_b01 {display:inline-block;color:#bababa;text-decoration:none;vertical-align:middle;border:0;background:transparent}
.btn_b01:hover, .btn_b01:hover {color:#000}
a.btn_b02,.btn_b02 {display:inline-block;background:#253dbe;padding:0 10px;color:#fff;text-decoration:none;border:0;vertical-align:middle}
a.btn_b02:hover, .btn_b02:hover {background:#0025eb}
a.btn_b03, .btn_b03 {display:inline-block;background:#fff;border:1px solid #b9bdd3;color:#646982;text-decoration:none;vertical-align:middle}
a.btn_b03:hover, .btn_b03:hover {background:#ebedf6}
a.btn_b04, .btn_b04 {display:inline-block;background:#fff;border:1px solid #ccc;color:#707070;text-decoration:none;vertical-align:middle}
a.btn_b04:hover, .btn_b04:hover {color:#333;background:#f9f9f9}
a.btn_admin,.btn_admin {display:inline-block;color:#d13f4a;text-decoration:none;vertical-align:middle} /* 관리자 전용 버튼 */
.btn_admin:hover, a.btn_admin:hover {color:#ff3746}


/* 기본테이블 */
.tbl_wrap table {width:100%;border-collapse:collapse;border-spacing:0 5px;background:#fff;border-top:1px solid #ececec;border-bottom:1px solid #ececec} 
.tbl_wrap caption {padding:10px 0;font-weight:bold;text-align:left}
.tbl_head01 {margin:0 0 10px}
.tbl_head01 caption {padding:0;font-size:0;line-height:0;overflow:hidden}
.tbl_head01 thead th {padding:20px 0;font-weight:normal;text-align:center;border-bottom:1px solid #ececec;height:40px}
.tbl_head01 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head01 tfoot th, .tbl_head01 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center}
.tbl_head01 tbody th {padding:8px 0;border-bottom:1px solid #e8e8e8}
.tbl_head01 td {color:#666;padding:10px 5px;border-top:1px solid #ecf0f1;border-bottom:1px solid #ecf0f1;line-height:1.4em;height:60px;word-break:break-all}
.tbl_head01 tbody tr:hover td {background:#fafafa}
.tbl_head01 a:hover {text-decoration:underline}

.tbl_head02 {margin:0 0 10px}
.tbl_head02 caption {padding:0;font-size:0;line-height:0;overflow:hidden}
.tbl_head02 thead th {padding:5px 0;border-top:1px solid #d1dee2;border-bottom:1px solid #d1dee2;background:#e5ecef;color:#383838;font-size:0.95em;text-align:center;letter-spacing:-0.1em}
.tbl_head02 thead a {color:#383838}
.tbl_head02 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head02 tfoot th, .tbl_head02 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center}
.tbl_head02 tbody th {padding:5px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#fff}
.tbl_head02 td {padding:5px 3px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#fff;line-height:1.4em;word-break:break-all}
.tbl_head02 a {}

/* 폼 테이블 */
.tbl_frm01 {margin:0 0 20px}
.tbl_frm01 table {width:100%;border-collapse:collapse;border-spacing:0}
.tbl_frm01 th {width:70px;padding:7px 13px;border:1px solid #e9e9e9;border-left:0;background:#f5f8f9;text-align:left}
.tbl_frm01 td {padding:7px 10px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:transparent}
.wr_content textarea,.tbl_frm01 textarea,.form_01 textarea, .frm_input {border:1px solid #d0d3db;background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:5px;
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
}
.tbl_frm01 textarea {padding:2px 2px 3px}
.frm_input {height:40px}

.full_input {width:100%}
.half_input {width:49.5%}
.twopart_input {width:385px;margin-right:10px}
.tbl_frm01 textarea, .write_div textarea {width:100%;height:100px}
.tbl_frm01 a {text-decoration:none}
.tbl_frm01 .frm_file {display:block;margin-bottom:5px}
.tbl_frm01 .frm_info {display:block;padding:0 0 5px;line-height:1.4em}

/*기본 리스트*/
.list_01 ul {border-top:1px solid #ececec}
.list_01 li {border-bottom:1px solid #ececec;background:#fff;padding:10px 15px;list-style:none;position:relative}
.list_01 li:nth-child(odd) {background:#f6f6f6}
.list_01 li:after {display:block;visibility:hidden;clear:both;content:""}
.list_01 li:hover {background:#f9f9f9}
.list_01 li.empty_li {text-align:center;padding:20px 0;color:#666}

/*폼 리스트*/
.form_01 h2 {font-size:1.167em}
.form_01 li {margin-bottom:10px}
.form_01 ul:after,
.form_01 li:after {display:block;visibility:hidden;clear:both;content:""}
.form_01 .left_input {float:left}
.form_01 .margin_input {margin-right:1%}
.form_01 textarea {height:100px;width:100%}
.form_01 .frm_label {display:inline-block;width:130px}

/* 자료 없는 목록 */
.empty_table {padding:50px 0 !important;text-align:center}
.empty_list {padding:20px 0 !important;color:#666;text-align:center}

/* 필수입력 */
.required, textarea.required {background-image:url('../img/require.png') !important;background-repeat:no-repeat !important;background-position:right top !important}

/* 테이블 항목별 정의 */
.td_board {width:80px;text-align:center}
.td_category {width:80px;text-align:center}
.td_chk {width:30px;text-align:center}
.td_date {width:90px;text-align:center}
.td_datetime {width:135px;text-align:center}
.td_group {width:80px;text-align:center}
.td_mb_id {width:100px;text-align:center}
.td_mng {width:80px;text-align:center}
.td_name {width:100px;text-align:left}
.td_nick {width:100px;text-align:center}
.td_num {width:50px;text-align:center}
.td_numbig {width:80px;text-align:center}
.td_stat {width:60px;text-align:center}

.txt_active {color:#5d910b}
.txt_done {color:#e8180c}
.txt_expired {color:#ccc}
.txt_rdy {color:#8abc2a}

/* 새창 기본 스타일 */
.new_win {position:relative}
.new_win .tbl_wrap {margin:0 20px}
.new_win #win_title {font-size:1.3em;height:50px;line-height:30px;padding:10px 20px;background:#fff;color:#000;-webkit-box-shadow:0 1px 10px rgba(0,0,0,.1);
-moz-box-shadow:0 1px 10px rgba(0,0,0,.1);
box-shadow:0 1px 10px rgba(0,0,0,.1)}
.new_win #win_title .sv {font-size:0.75em;line-height:1.2em}
.new_win .win_ul {margin-bottom:15px;padding:0 20px}
.new_win .win_ul:after {display:block;visibility:hidden;clear:both;content:""}
.new_win .win_ul li {float:left;background:#fff;text-align:center;padding:0 10px;border:1px solid #d6e9ff;border-radius:30px;margin-left:5px}
.new_win .win_ul li:first-child {margin-left:0}
.new_win .win_ul li a {display:block;padding:8px 0;color:#6794d3}
.new_win .win_ul .selected {background:#3a8afd;border-color:#3a8afd;position:relative;z-index:5}
.new_win .win_ul .selected a {color:#fff;font-weight:bold}
.new_win .win_desc {position:relative;margin:10px;border-radius:5px;font-size:1em;background:#f2838f;color:#fff;line-height:50px;text-align:left;padding:0 20px}
.new_win .win_desc i {font-size:1.2em;vertical-align:baseline}
.new_win .win_desc:after {content:"";position:absolute;left:0;top:0;width:4px;height:50px;background:#da4453;border-radius:3px 0 0 3px}
.new_win .frm_info {font-size:0.92em;color:#919191}
.new_win .win_total {float:right;display:inline-block;line-height:30px;font-weight:normal;font-size:0.75em;color:#3a8afd;background:#f6f6f6;padding:0 10px;border-radius:5px}
.new_win .new_win_con {margin:20px 0;padding:20px}
.new_win .new_win_con:after {display:block;visibility:hidden;clear:both;content:""}
.new_win .new_win_con2 {margin:20px 0}
.new_win .btn_confirm:after {display:block;visibility:hidden;clear:both;content:""}
.new_win .win_btn {text-align:center}
.new_win .cert_btn {margin-bottom:30px;text-align:center}
.new_win .btn_close {padding:0 20px;height:45px;overflow:hidden;cursor:pointer}
.new_win .btn_submit {padding:0 20px;height:45px;font-weight:bold;font-size:1.083em}

/* 검색결과 색상 */
.sch_word {color:#fff;background:#ff005a;padding:2px 5px 3px;line-height:18px;margin:0 2px}

/* 자바스크립트 alert 대안 */
#validation_check {margin:100px auto;width:500px}
#validation_check h1 {margin-bottom:20px;font-size:1.3em}
#validation_check p {margin-bottom:20px;padding:30px 20px;border:1px solid #e9e9e9;background:#fff}

/* 사이드뷰 */
.sv_wrap {position:relative;font-weight:normal}
.sv_wrap .sv {z-index:1000;display:none;margin:5px 0 0;font-size:0.92em;background:#333;
-webkit-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2)}
.sv_wrap .sv:before {content:"";position:absolute;top:-6px;left:15px;width:0;height:0;border-style:solid;border-width:0 6px 6px 6px;border-color:transparent transparent #333 transparent}
.sv_wrap .sv a {display:inline-block;margin:0;padding:0 10px;line-height:30px;width:100px;font-weight:normal;color:#bbb}
.sv_wrap .sv a:hover {background:#000;color:#fff}
.sv_member {color:#333}
.sv_on {display:block !important;position:absolute;top:23px;left:0px;width:auto;height:auto}
.sv_nojs .sv {display:block}

/* 페이징 */
.pg_wrap {clear:both;float:left;display:inline-block}
.pg_wrap:after {display:block;visibility:hidden;clear:both;content:""} 
.pg {text-align:center}
.pg_page, .pg_current {display:inline-block;vertical-align:middle;background:#eee;border:1px solid #eee}
.pg a:focus, .pg a:hover {text-decoration:none}
.pg_page {color:#959595;font-size:1.083em;height:30px;line-height:28px;padding:0 5px;min-width:30px;text-decoration:none;border-radius:3px}
.pg_page:hover {background-color:#fafafa}
.pg_start {text-indent:-999px;overflow:hidden;background:url('../img/btn_first.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_prev {text-indent:-999px;overflow:hidden;background:url('../img/btn_prev.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_end {text-indent:-999px;overflow:hidden;background:url('../img/btn_end.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_next {text-indent:-999px;overflow:hidden;background:url('../img/btn_next.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_start:hover,.pg_prev:hover,.pg_end:hover,.pg_next:hover {background-color:#fafafa}

.pg_current {display:inline-block;background:#3a8afd;border:1px solid #3a8afd;color:#fff;font-weight:bold;height:30px;line-height:30px;padding:0 10px;min-width:30px;border-radius:3px}

/* cheditor 이슈 */
.cheditor-popup-window *, .cheditor-popup-window :after, .cheditor-popup-window :before {
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}

/* Mobile화면으로 */
#device_change {display:block;margin:0.3em;padding:0.5em 0;border:1px solid #eee;border-radius:2em;background:#fff;color:#000;font-size:2em;text-decoration:none;text-align:center}