@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:15px; 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 img {height:56px; width:auto; max-width:170px; object-fit:contain;}
#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관리대상기기)이 칼럼 폭을 밀어내지 않도록 함 */
.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;}
#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;}

.company_greeting .greet_headline {font-size:23px; font-weight:600; color:#304a8c; line-height:1.6; margin-bottom:30px; padding-bottom:26px; border-bottom:1px solid #e5e8ee;}
.company_greeting .greet_headline strong {font-weight:800;}
.company_greeting .greet_body p {font-size:16px; line-height:1.95; margin-bottom:20px; color:#555;}
.company_greeting .greet_body .greet_thanks {font-weight:700; color:#304a8c; margin-top:24px;}
.company_greeting .greet_sign {display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:flex-end; justify-content:flex-end; gap:16px; margin-top:44px; padding-top:30px;}
.company_greeting .greet_sign .sign_name {font-size:16px; color:#333; letter-spacing:1px;}
.company_greeting .greet_sign .sign_name strong {font-size:19px; font-weight:700; letter-spacing:4px; color:#111;}
.company_greeting .greet_sign .sign_img {height:70px; width:auto;}

@media (max-width:768px) {
    .company_greeting .greet_headline {font-size:19px; line-height:1.55;}
    .company_greeting .greet_body p {font-size:15px; line-height:1.85;}
    .company_greeting .greet_sign {gap:10px;}
    .company_greeting .greet_sign .sign_img {height:56px;}
    .company_greeting .greet_sign .sign_name {font-size:14px;}
    .company_greeting .greet_sign .sign_name strong {font-size:17px; 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:15px;}
.company_location .loc_val {-webkit-flex:1 1 auto; flex:1 1 auto; color:#555; font-size:15px; 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:13.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) ----------
   서비스 소개 · 교체 절차 · 교체 효과를 한 페이지에 담고 메뉴는 각 섹션으로 연결됩니다.
   색상 : 브랜드 남색(#16234a·#304a8c) + 포인트 파랑(#0079cf) + 점검/친환경 청록(#10b3a3) */
.oil_page {max-width:1240px;}

/* 인트로 */
.oil_page .oil_intro {text-align:center;}
.oil_page .oil_lead {font-size:25px; font-weight:700; color:#16234a; line-height:1.55;}
.oil_page .oil_lead_sub {margin-top:16px; font-size:16px; color:#6b7488; line-height:1.8;}

/* 섹션 제목 : 가운데 정렬 + 아래 두 칸 밑줄 */
.oil_page .oil_sec {padding-top:80px;}
/* 페이지마다 섹션이 하나씩이므로 탭 바로 아래 첫 섹션은 여백을 줄인다 */
.oil_page .oil_sec_first {padding-top:54px;}
.oil_page .oil_sec_tit {margin-bottom:38px; font-size:30px; font-weight:700; color:#16234a; text-align:center;}
.oil_page .oil_sec_tit em {font-style:normal; color:#0079cf;}
.oil_page .oil_sec_tit:after {content:""; display:block; width:58px; height:3px; margin:16px auto 0; border-radius:2px; background:-webkit-linear-gradient(left,#0079cf 0,#0079cf 24px,transparent 24px,transparent 34px,#0079cf 34px,#0079cf 58px); background:linear-gradient(90deg,#0079cf 0,#0079cf 24px,transparent 24px,transparent 34px,#0079cf 34px,#0079cf 58px);}

/* 01. 서비스 소개 : 2단 카드 */
.oil_page .oil_cols {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-align-items:stretch; align-items:stretch; gap:24px;}
.oil_page .oil_card {-webkit-flex:1 1 440px; flex:1 1 440px; min-width:0; padding:32px 34px 34px; border:1px solid #e8edf5; border-radius:14px; background:#fff; box-shadow:0 6px 20px rgba(22,35,74,0.05);}
.oil_page .oil_card_main {background:-webkit-linear-gradient(top,#f4f8fe 0%,#fdfeff 65%); background:linear-gradient(180deg,#f4f8fe 0%,#fdfeff 65%);}
.oil_page .oc_head {display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; gap:16px; margin-bottom:22px;}
.oil_page .oc_ic {-webkit-flex:0 0 auto; flex:0 0 auto; width:56px; height:56px; border-radius:16px; color:#fff; font-size:23px; line-height:56px; text-align:center;}
.oil_page .ic_blue {background:-webkit-linear-gradient(315deg,#0f5fbd,#3d8fe0); background:linear-gradient(135deg,#3d8fe0,#0f5fbd); box-shadow:0 6px 14px rgba(15,95,189,0.28);}
.oil_page .ic_teal {background:-webkit-linear-gradient(315deg,#0a9d8e,#2ecbb8); background:linear-gradient(135deg,#2ecbb8,#0a9d8e); box-shadow:0 6px 14px rgba(10,157,142,0.26);}
.oil_page .oc_head h4 {font-size:22px; font-weight:700; color:#16234a; line-height:1.35;}

/* 사진 + 설명문 (사진 파일이 없으면 설명문이 카드 폭을 다 쓰도록 figure 를 제거합니다) */
.oil_page .oc_body {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:20px;}
.oil_page .oc_photo {-webkit-flex:0 1 42%; flex:0 1 42%; min-width:200px; margin:0; border-radius:10px; overflow:hidden; background:#eef2f8;}
.oil_page .oc_photo img {display:block; width:100%; height:auto;}
.oil_page .oc_txt {-webkit-flex:1 1 260px; flex:1 1 260px; min-width:0;}
.oil_page .oc_txt p {font-size:15px; line-height:1.85; color:#5a6478;}
.oil_page .oc_txt p + p {margin-top:10px;}

/* 체크 목록 */
.oil_page .oil_check {margin-top:22px;}
.oil_page .oil_check li {position:relative; padding:11px 14px 11px 40px; border-radius:8px; background:#f2f7fd; font-size:15px; line-height:1.6; color:#41506b;}
.oil_page .oil_check li + li {margin-top:8px;}
.oil_page .oil_check li:before {content:"\f00c"; position:absolute; left:14px; top:50%; margin-top:-9px; width:18px; height:18px; border-radius:50%; background:#10b3a3; color:#fff; font-family:FontAwesome; font-size:9px; line-height:18px; text-align:center;}
.oil_page .oil_card_need .oil_check li {background:#f1fbf8;}
/* 점검이 필요한 경우 : 2단으로 나열 */
.oil_page .oil_check_grid {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:8px;}
.oil_page .oil_check_grid li {-webkit-flex:1 1 250px; flex:1 1 250px; min-width:0;}
.oil_page .oil_check_grid li + li {margin-top:0;}

/* 안내 문구 띠 */
.oil_page .oil_note {display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; gap:15px; margin-top:26px; padding:20px 26px; border:1px solid #d8f0ea; border-radius:12px; background:#edf9f6; font-size:15px; line-height:1.7; color:#3d6b64;}
.oil_page .oil_note .note_ic {-webkit-flex:0 0 auto; flex:0 0 auto; width:38px; height:38px; border-radius:10px; background:#10b3a3; color:#fff; font-size:17px; line-height:38px; text-align:center;}

/* 02. 교체 절차 : 단계 카드 (한 줄 4칸) */
.oil_page .oil_steps {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:46px 34px; margin:0; padding:0; list-style:none;}
.oil_page .oil_step {position:relative; -webkit-flex:0 0 calc(25% - 25.5px); flex:0 0 calc(25% - 25.5px); min-width:0; padding:34px 22px 28px; border:1px solid #e8edf5; border-radius:14px; background:#fff; box-shadow:0 6px 18px rgba(22,35,74,0.05); text-align:center;}
.oil_page .oil_step .st_no {position:absolute; top:-17px; left:50%; margin-left:-17px; width:34px; height:34px; border-radius:50%; background:#16234a; color:#fff; font-size:13px; font-weight:800; line-height:34px; letter-spacing:0.5px;}
.oil_page .oil_step .st_ic {display:block; width:74px; height:74px; margin:4px auto 16px; border-radius:22px; background:-webkit-linear-gradient(top,#eaf3fd,#dbe9f9); background:linear-gradient(160deg,#eaf3fd,#dbe9f9); color:#0f5fbd; font-size:29px; line-height:74px;}
.oil_page .oil_step .st_label {display:block; font-size:12px; font-weight:800; letter-spacing:2px; color:#0079cf;}
.oil_page .oil_step .st_tit {display:block; margin:8px 0 11px; font-size:17px; font-weight:700; color:#16234a; line-height:1.4;}
.oil_page .oil_step .st_desc {font-size:14px; line-height:1.75; color:#6b7488;}
/* 같은 줄 카드 사이의 화살표 (줄 첫 칸 앞에는 붙이지 않음) */
.oil_page .oil_step:before {content:"\f105"; position:absolute; top:50%; left:-24px; margin-top:-12px; width:14px; font-family:FontAwesome; font-size:22px; line-height:1; color:#c2cede; text-align:center;}
.oil_page .oil_step:nth-child(4n+1):before {display:none;}

/* 폐절연유 처리 안내 */
.oil_page .oil_warn {position:relative; margin-top:58px; padding:46px 44px 48px; 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:"\f043"; position:absolute; right:44px; top:8px; font-family:FontAwesome; font-size:150px; line-height:1; color:rgba(255,255,255,0.05);}
.oil_page .oil_warn .warn_tit {position:relative; margin-bottom:14px; font-size:25px; font-weight:700; color:#fff; text-align:center;}
.oil_page .oil_warn .warn_tit i {margin-right:9px; color:#5fd3c4;}
.oil_page .oil_warn .warn_desc {position:relative; font-size:15px; line-height:1.85; color:#b9c6e2; text-align:center;}
.oil_page .oil_warn .warn_cases {position:relative; display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:22px; margin-top:32px;}
.oil_page .oil_warn .warn_case {display:-webkit-flex; display:flex; gap:18px; -webkit-flex:1 1 340px; flex:1 1 340px; min-width:0; padding:26px 28px; border-radius:12px; background:#fff;}
.oil_page .oil_warn .wc_ic {-webkit-flex:0 0 auto; flex:0 0 auto; width:52px; height:52px; border-radius:14px; background:#eef4fc; color:#0f5fbd; font-size:21px; line-height:52px; text-align:center;}
.oil_page .oil_warn .wc_body {-webkit-flex:1 1 auto; flex:1 1 auto; min-width:0;}
.oil_page .oil_warn .wc_no {display:inline-block; margin-bottom:9px; padding:3px 10px; 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:9px; font-size:17px; font-weight:700; color:#16234a; line-height:1.4;}
.oil_page .oil_warn .warn_case p {font-size:14px; line-height:1.8; color:#5a6478;}

/* 03. 교체 효과 : 한 줄 3칸 */
.oil_page .oil_effects {display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:22px;}
.oil_page .oil_effects li {position:relative; -webkit-flex:0 0 calc(33.333% - 14.7px); flex:0 0 calc(33.333% - 14.7px); min-width:0; padding:32px 30px 30px; border:1px solid #e8edf5; border-radius:14px; background:#fff; box-shadow:0 6px 18px rgba(22,35,74,0.05); -webkit-transition:.25s; transition:.25s;}
.oil_page .oil_effects li:hover {border-color:#cddcf1; box-shadow:0 10px 26px rgba(22,35,74,0.1); -webkit-transform:translateY(-3px); transform:translateY(-3px);}
.oil_page .oil_effects .ef_no {display:block; font-size:34px; font-weight:800; line-height:1; color:#dbe4f2; letter-spacing:1px;}
.oil_page .oil_effects .ef_ic {position:absolute; right:26px; bottom:26px; width:56px; height:56px; border-radius:16px; background:-webkit-linear-gradient(top,#eaf3fd,#dbe9f9); background:linear-gradient(160deg,#eaf3fd,#dbe9f9); color:#0f5fbd; font-size:23px; line-height:56px; text-align:center;}
.oil_page .oil_effects .ef_tit {display:block; margin:12px 0 10px; font-size:19px; font-weight:700; color:#16234a; line-height:1.4;}
.oil_page .oil_effects .ef_desc {padding-right:74px; font-size:14px; line-height:1.8; color:#6b7488;}

/* 문의 안내 */
.oil_page .oil_cta {position:relative; margin-top:72px; padding:56px 30px 58px; border-radius:16px; overflow:hidden; text-align:center; color:#fff; background:-webkit-linear-gradient(340deg,#0d7c86 0%,#155a86 42%,#16234a 100%); background:linear-gradient(110deg,#0d7c86 0%,#155a86 42%,#16234a 100%);}
/* 설비 도면 느낌의 옅은 격자 */
.oil_page .oil_cta:before {content:""; position:absolute; top:0; left:0; right:0; bottom:0; background-image:linear-gradient(rgba(255,255,255,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.06) 1px,transparent 1px); background-size:46px 46px;}
.oil_page .oil_cta .cta_tit, .oil_page .oil_cta .cta_desc, .oil_page .oil_cta .cta_ask, .oil_page .oil_cta .cta_btn {position:relative;}
.oil_page .oil_cta .cta_tit {display:block; font-size:30px; font-weight:700; color:#fff; letter-spacing:-0.5px;}
.oil_page .oil_cta .cta_desc {margin-top:16px; font-size:16px; line-height:1.8; color:#c3d5e4;}
.oil_page .oil_cta .cta_ask {margin-top:20px; font-size:17px; font-weight:700; color:#fff;}
.oil_page .oil_cta .cta_btn {display:inline-block; margin-top:28px; padding:16px 48px; border-radius:999px; background:#fff; color:#16234a; font-size:17px; 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-right:9px;}

@media (max-width:1200px) {
    /* 단계 카드 3칸 */
    .oil_page .oil_step {-webkit-flex:0 0 calc(33.333% - 22.7px); flex:0 0 calc(33.333% - 22.7px);}
    .oil_page .oil_step:nth-child(4n+1):before {display:block;}
    .oil_page .oil_step:nth-child(3n+1):before {display:none;}
}

@media (max-width:960px) {
    /* 단계 카드 2칸 / 효과 카드 2칸 */
    .oil_page .oil_step {-webkit-flex:0 0 calc(50% - 17px); flex:0 0 calc(50% - 17px);}
    .oil_page .oil_step:nth-child(3n+1):before {display:block;}
    .oil_page .oil_step:nth-child(2n+1):before {display:none;}
    .oil_page .oil_effects li {-webkit-flex:0 0 calc(50% - 11px); flex:0 0 calc(50% - 11px);}
}

@media (max-width:768px) {
    .oil_page .oil_lead {font-size:20px; line-height:1.5;}
    .oil_page .oil_lead_sub {font-size:15px;}
    .oil_page .oil_sec {padding-top:56px;}
    .oil_page .oil_sec_first {padding-top:40px;}
    .oil_page .oil_sec_tit {margin-bottom:28px; font-size:24px;}
    .oil_page .oil_card {padding:24px 20px 26px;}
    .oil_page .oc_ic {width:48px; height:48px; border-radius:14px; font-size:20px; line-height:48px;}
    .oil_page .oc_head h4 {font-size:19px;}
    .oil_page .oc_photo {-webkit-flex:1 1 100%; flex:1 1 100%;}
    .oil_page .oil_check li {font-size:14px;}
    .oil_page .oil_note {-webkit-align-items:flex-start; align-items:flex-start; padding:18px 18px; font-size:14px;}
    /* 단계 카드 1칸 : 화살표는 감춘다 */
    .oil_page .oil_steps {gap:38px 0;}
    .oil_page .oil_step {-webkit-flex:1 1 100%; flex:1 1 100%;}
    .oil_page .oil_step:before {display:none;}
    .oil_page .oil_warn {margin-top:44px; padding:32px 20px 34px;}
    .oil_page .oil_warn:before {right:10px; font-size:110px;}
    .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:20px;}
    .oil_page .oil_effects li {-webkit-flex:1 1 100%; flex:1 1 100%; padding:26px 22px 24px;}
    .oil_page .oil_effects .ef_desc {padding-right:0;}
    .oil_page .oil_effects .ef_ic {position:static; display:block; margin-top:16px;}
    .oil_page .oil_cta {margin-top:52px; padding:40px 20px 42px;}
    .oil_page .oil_cta .cta_tit {font-size:23px;}
    .oil_page .oil_cta .cta_desc {font-size:15px;}
    .oil_page .oil_cta .cta_ask {font-size:16px;}
    .oil_page .oil_cta .cta_btn {padding:14px 38px; font-size:16px;}
}

/* ---------- 서브페이지 대표이미지(비주얼) ----------
   임시 배경(그라데이션)이 깔려 있고, 아래 파일을 올리면 자동으로 교체됩니다.
     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;}

/* 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;}
*/

/* ---------- 메인 슬라이더 ---------- */
#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 {display:block; position:absolute; top:0; left:0; width:100%; height:100%;}
/* 슬라이드 이미지는 화면 폭에 꽉 차게 (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 .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)을 여러 개 이어 붙이고 딱 한 벌만큼 밀어 무한 반복 (--cl-shift 는 index.php 에서 계산) */
#clients .cl_track {display:-webkit-flex; display:flex; width:-webkit-max-content; width:max-content; -webkit-animation:cl_roll linear infinite; animation:cl_roll linear infinite;}
#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; -webkit-filter:grayscale(100%); filter:grayscale(100%); opacity:.72; transition:opacity .25s, filter .25s;}
#clients .cl_box:hover {border-color:#304a8c;}
#clients .cl_box:hover img {-webkit-filter:none; filter:none; opacity:1;}
/* 로고 이미지가 없는 거래처는 이름을 박스에 담아 표시 */
#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:translateX(0);} to {-webkit-transform:translateX(var(--cl-shift, -50%));}}
@keyframes cl_roll {from {transform:translateX(0);} to {transform:translateX(var(--cl-shift, -50%));}}

/* 관리자 전용 안내 */
#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;}

/* 움직임을 줄이도록 설정한 사용자에게는 롤링 대신 가로 스크롤로 제공 */
@media (prefers-reduced-motion:reduce) {
    #clients .cl_track {-webkit-animation:none; animation:none; width:auto;}
    #clients .cl_viewport {overflow-x:auto; -webkit-overflow-scrolling:touch;}
    #clients .cl_set[aria-hidden] {display:none;}

    /* 박스 마우스오버 : 떠오르기·확대는 빼고 색과 그림자 변화만 남긴다 */
    .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;}
footer#ft section#copyright h2 img {height:84px; width:auto;}
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:15px; 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 0; flex:1 1 0; 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;}
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 {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_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;}

/* ---------- 절연유 교체 : 폐절연유 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;}

    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;}   /* 좁은 화면에서는 자연스럽게 줄바꿈 */

    /* 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:78px;}
    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;}
    #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;}
    .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}