.wrap{max-width:1200px;margin:0 auto;position: relative;}



header {width:100%;position: absolute;height: 60px;line-height: 60px; z-index: 1000;transition:all 800ms;}
header #tnb .wrap{height:60px;}
header.active {background:#fff;}
header.active #tnb .logo a {}
header.active #tnb li.m1 {}
header.active #tnb li.m1 > a {color:#000;}
header.active #snb {}
header #tnb {}
header #tnb a{color:#fff;}
header #tnb .logo{float:left;padding-top:10px;position: relative;z-index: 999;}
header #tnb .logo a {transition:all 800ms; background: url(/images/logo.png) center center no-repeat; width: 154px; height: 44px; display: inline-block;}
header #tnb ul.m1 {float:left;display:block;margin-left:60px;}
header #tnb li.m1{display: inline-block;font-size:17px;position: relative;padding-right:30px; margin-right:30px;}
header #tnb li.m1 a{transition:all 800ms; display: block;}
header #tnb li.m1 a:hover{}
header #tnb li.m1 {}
header #tnb li.active a:before{}

header #tnb.pst li.m1:hover ul.m2,
header #tnb li.m1.show ul.m2 {opacity: 1; visibility: visible;}

header #tnb ul.m2 {display:block; position:absolute;text-align:left;background:rgba(28,32,37,0.95);padding:20px 25px;left:-32px;top:60px; width:210px; -webkit-transition: opacity .3s linear,visibility .3s linear; transition: opacity .3s linear, visibility .3s linear; opacity: 0; visibility: hidden;}

header #tnb li.m2 a {color:#fff;}


header #snb{display: none;position: fixed;z-index: 10;left:0;top:0;background: rgba(28,32,37,0.95);width:100%;height: 100%;line-height: 2.5;}

header #snb ul.m1 {max-width:100%;margin-top:100px;  }

header #snb ul.m1 li.m1{max-width:100%;width:100%;text-align:left;margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,0.3);padding-bottom:20px;}
header #snb>.wrap>ul.m1>li.m1 {font-size:25px;padding-bottom:14px;margin-bottom:8px;}
header #snb>.wrap>ul.m1>li.m1 a{ color:#fff;}
header #snb ul.m2 {}
header #snb li.m2 {width:auto;margin-right:20px;float:left;font-size:17px;line-height: 1.8;}
header #snb .m2 a{color:rgba(255,255,255,0.8); }

/**/
#site-lang {display:inline-block; position:absolute; right:32px; top:0; font-size: 15px;}
#site-lang a{ padding: 3px;}
#site-lang a.on{border-bottom: 2px solid #fff}


footer {}
footer .f_top{padding:15px 0 18px 0; border-top: 1px solid #ddd;}
footer .f_top .left_box{float:left;}
footer .f_top .left_box a{position: relative;margin-right:30px;}
footer .f_top .left_box a:after{position: absolute;right:-17px;top:5px;height:12px;width:1px;background: rgba(0,0,0,0.3);content: '';}
footer .f_top .left_box a:nth-child(2):after{display: none;}
footer .f_top .right_box{float:right;}
footer .f_top .right_box .inner{text-align:center;}
footer .f_top .right_box .inner a{float:left;  line-height: 0;}
footer .f_top .right_box .inner a img{padding:10px 20px; vertical-align: middle;}
footer .f_top .right_box .inner a > div{color:#333;}
footer .f_btm{background: #3c3c3c;padding:50px 0 60px 0;}
footer .f_btm .left_box{float:left;}
footer .f_btm .left_box .inner{}
footer .f_btm .left_box .inner .number{font-size:50px;font-weight: 700;color:#ef7c1b;margin-bottom:10px;}
footer .f_btm .left_box .inner .info{}
footer .f_btm .left_box .inner .info span{color:rgba(255,255,255,0.9);position: relative;margin-right:20px;font-weight: 300;}
footer .f_btm .left_box .inner .info span:after{position: absolute;right:-12px;top:5px;height:12px;width:1px;background: rgba(255,255,255,0.5);content: '';}
footer .f_btm .left_box .inner .info span.none_line:after{display: none;}
footer .f_btm .right_box{float:right;text-align: right;}
footer .f_btm .right_box .family{color:#fff;font-size:16px;width:220px;position: absolute;right:0;top:10px;cursor: pointer;}
footer .f_btm .right_box .family li{text-align: left;}
footer .f_btm .right_box .family li .inner{border-bottom: 2px solid rgba(255,255,255,0.6);padding: 10px 20px;position: relative;}
footer .f_btm .right_box .family li .inner span{}
footer .f_btm .right_box .family li .inner:after{position: absolute;right:20px;bottom:16px;background: url(/images/layout/family_arr.png) center center no-repeat;width:12px;height: 7px;content: "";}
footer .f_btm .right_box .family.on li .inner:after{-webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg);-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);transform: rotate(-180deg);transition-duration: 0.5s;}
footer .f_btm .right_box .family li .inner img{text-align: right;}

footer .f_btm .right_box .family li ul{display: none;}
footer .f_btm .right_box .family li ul{background: rgba(9,112,188,0.9);padding:15px 20px;width:100%;}
footer .f_btm .right_box .family li ul li{}
footer .f_btm .right_box .family li ul li a{line-height: 1.9;color:rgba(255,255,255,0.8);}

footer .f_btm .right_box .copy{color:rgba(255,255,255,0.3);font-weight: 600;}
footer .f_btm .right_box .copy img{margin:0 0 5px 0;}
footer .f_btm .right_box .copy div{}

.top_btn{position: absolute;right:30px;bottom:50px;width:50px;height:50px;background:#006dbb;border-radius:50%;}
.top_btn img{padding:20px 19px;}


#sbv{height:500px; background:url(/images/layout/subvisual_01.jpg) center center no-repeat;position: relative;}
.sbv-2{background:url(/images/layout/subvisual_02.jpg) center center no-repeat !important;}
.sbv-3{background:url(/images/layout/subvisual_03.jpg) center right no-repeat !important;}
.sbv-4{background:url(/images/layout/subvisual_04.jpg) center top no-repeat !important; }
#sbv .wrap {height:100%;}
#sbv .page-name{color:#fff; height:93px; padding-top:200px; text-shadow: 1px 0 2px rgba(0,0,0,0.3);}
#sbv .page-name .sub_tit{position: relative; padding-left:110px; }
#sbv .page-name .sub_tit:after{position: absolute; left:0; top:12px; content: ''; background: #fff; width:70px; height:1px; text-shadow: 1px 0 2px rgba(0,0,0,0.3);}
#sbv .page-name .tit{text-transform: uppercase; font-size:70px; font-weight: 700;}
#sbv_location {position:absolute; bottom:50px;}
#sbv_location a {padding-right:15px; margin-right:15px; color:#fff; font-weight:bold; position:relative;}
#sbv_location a.active {color:#ffb762;}
#sbv_location a::after {
    content:''; display:inline-block; background:rgba(255,255,255,0.5); width:1px; height:15px;
    position:absolute; right:0; top:3px;
}
#sbv_location a:last-child {margin-right:0; padding-right:0;}
#sbv_location a:last-child::after {display:none;}

@media (max-width: 1300px) {
    .wrap{width:95%;}
    header #tnb ul.m1{display: none;}
    
}
    

@media (max-width: 1140px) {
    footer{text-align: center; font-size:14px;}
    footer .f_top .left_box{float:none;}
    footer .f_top .left_box a:last-child{margin-right:0;}
    footer .f_top .left_box a:after{top: 3px;}
    footer .f_btm .left_box{float:none; padding-top:50px;}
    footer .f_btm .left_box .inner .info span:after{top: 3px; height: 11px;}
    footer .f_btm .right_box{float:none; text-align: center; margin-top: 0; font-weight: 400; }
    footer .f_btm .right_box .family{ top:0;left:0;right:0;margin:0 auto;}
    footer .f_btm .right_box .copy img{display: none;}
    footer .f_btm .right_box .copy div{display: inline-block;margin-top:20px;}

    .sbv-3{position: relative;}
    .sbv-3:after{position: absolute;left: 0; top:0; width: 100%; height: 100%; background: rgba(0,0,0,0.15); content: '';}
    #sbv .page-name{position: relative;z-index: 1;}
}

@media (max-width: 820px) {
    footer .f_top{height:auto; line-height: 1.4; padding-top: 20px}
    
    footer .f_top .right_box{float:none;display: block;border-top:1px solid #ddd;margin-top:16px;padding:5px 0 13px 0; }
    footer .f_top .right_box .inner{float:none; display: inline-block;}
    footer .f_top .right_box .inner a {padding: 0 7px;}
    footer .f_top .right_box .inner a img{padding:8px 4px;}
    footer .f_btm .left_box .inner .info span:after{display: none;}
    footer .f_btm .left_box .inner .number{font-size: 40px;}
}

@media (max-width: 767px) {
    
    #sbv{height: 360px; background-size: cover !important;}
    #sbv_location{display: none;}
    
    header #snb .m2 a{font-size: 15px; }
    
}
@media (max-width: 600px) {
    
    header #tnb .logo a {
        /*background: url(/images/logo_m.png) center center no-repeat; background-size:98px 28px; width: 98px; height: 28px;*/
    }
    
    #sbv .page-name .tit{font-size: 45px;}
    #sbv .page-name .sub_tit{padding-left:85px;}
    
    footer .f_btm .left_box .inner .info span{margin-right:10px;}
    
    footer .f_top .right_box{padding-top:0;}
    footer .f_top .right_box .inner{display: flex; justify-content: center; align-content: flex-start;flex-wrap: wrap; padding: 0 50px;}
    footer .f_top .right_box .inner a{flex:0 0 25%; padding: 10px 0;}
    
    .top_btn{display: none;}
}

@media (max-width: 430px) {
    footer .f_top .right_box .inner{padding: 0;}
    footer .f_top .right_box .inner a{width: 25%;}
}
/* ── 공통 헤더 (모든 페이지, 96px) ─────────────────────────────
   메인(.site-home)과 하위 페이지(.sub-layout = 메인이 아닌 모든 페이지)가 같은 헤더를 쓴다.
   로고 | 대메뉴(가운데) | 언어 · 전화. 1300 이하는 햄버거, 900 이하는 72px · 전화 숨김. */
:is(.site-home, .sub-layout) header { height: 96px; line-height: normal; border-bottom: 1px solid rgba(255,255,255,.18); }
:is(.site-home, .sub-layout) header #tnb .wrap { box-sizing: content-box; max-width: 1440px; width: auto; height: 96px; padding: 0 64px; display: flex; align-items: center; justify-content: space-between; }
:is(.site-home, .sub-layout) header #tnb .logo { float: none; padding: 0; flex: 1 1 0; display: flex; }
:is(.site-home, .sub-layout) header #tnb .logo a { display: block; }
:is(.site-home, .sub-layout) header #tnb ul.m1 { float: none; margin: 0; display: flex; gap: 64px; }
:is(.site-home, .sub-layout) header #tnb li.m1 { padding: 0; margin: 0; font-size: 17px; font-weight: 500; line-height: 96px; }
:is(.site-home, .sub-layout) header #tnb li.m1 > a:hover, .sub-layout header #tnb li.m1.active > a { text-decoration: underline; text-underline-offset: 10px; text-decoration-thickness: 2px; }
:is(.site-home, .sub-layout) header .tnb-util { flex: 1 1 0; display: flex; justify-content: flex-end; align-items: center; gap: 28px; }
:is(.site-home, .sub-layout) header #site-lang { position: static; display: flex; gap: 10px; font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 14px; letter-spacing: .02em; line-height: 1; }
:is(.site-home, .sub-layout) header #site-lang a { padding: 0; border: 0; opacity: .75; }
:is(.site-home, .sub-layout) header #site-lang a.on { font-weight: 700; opacity: 1; border: 0; }
:is(.site-home, .sub-layout) header #site-lang a + a::before { content: "/"; margin-right: 10px; opacity: .4; color: #fff; }
:is(.site-home, .sub-layout) header .tnb-tel { display: flex; align-items: center; gap: 8px; height: 44px; font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 16px; font-weight: 600; letter-spacing: .02em; color: #fff; }
:is(.site-home, .sub-layout) header .tnb-tel svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:is(.site-home, .sub-layout) header #site-map-toggle { display: none; right: 64px; }
@media (max-width: 1300px) {
    :is(.site-home, .sub-layout) header #tnb ul.m1 { display: none; }
    :is(.site-home, .sub-layout) header #site-map-toggle { display: block; }
    :is(.site-home, .sub-layout) header .tnb-util { margin-right: 44px; }
}
@media (max-width: 900px) {
    :is(.site-home, .sub-layout) header, :is(.site-home, .sub-layout) header #tnb .wrap { height: 72px; }
    :is(.site-home, .sub-layout) header #tnb .wrap { padding: 0 32px; }
    :is(.site-home, .sub-layout) header #site-map-toggle { right: 32px; }
    :is(.site-home, .sub-layout) header .tnb-tel { display: none; }
}
@media (max-width: 480px) {
    :is(.site-home, .sub-layout) header #tnb .wrap { padding: 0 20px; }
    :is(.site-home, .sub-layout) header #site-map-toggle { right: 20px; }
    :is(.site-home, .sub-layout) header .tnb-util { margin-right: 36px; }
}
/* 상단 비주얼 제목을 h1(또는 p) 로 바꿨다. 부트스트랩 기본 여백·줄높이를 원래 div 처럼 되돌린다 */
#sbv .page-name h1.tit, #sbv .page-name p.tit {margin: 0; line-height: inherit; font-family: inherit;}
/* 게시글 제목을 h1 로. 원래 div 모양(board.css .subject) 그대로 */
.bbs-view .bbs-view-header h1.subject {margin: 0; font-weight: inherit; line-height: inherit; font-family: inherit;}

/* 2뎁스 드롭다운 (공통 96px 헤더). 글자 시작점을 1뎁스 글자와 맞추고, 헤더 선 바로 아래에 붙인다. */
:is(.site-home, .sub-layout) header #tnb ul.m2 {top: 96px; left: -24px; min-width: 188px; width: auto; padding: 16px 24px 18px; background: rgba(22,32,43,.97); border-top: 2px solid #006dbb; line-height: 1; white-space: nowrap;}
:is(.site-home, .sub-layout) header #tnb li.m2 {display: block; font-size: 15px; font-weight: 400;}
:is(.site-home, .sub-layout) header #tnb li.m2 a {display: block; padding: 10px 0; color: rgba(255,255,255,.82); text-decoration: none;}
:is(.site-home, .sub-layout) header #tnb li.m2 a:hover,
.sub-layout header #tnb li.m2.active a {color: #fff; text-decoration: underline; text-underline-offset: 5px;}
/* 제품소개 펼침 목록 맨 끝 "제품 비교하기": 제품군 줄과 선으로 나누고 조금 진하게 (Partials/Header) */
:is(.site-home, .sub-layout) header #tnb li.m2--compare {margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.16);}
:is(.site-home, .sub-layout) header #tnb li.m2--compare a {color: #fff; font-weight: 700;}
header #snb li.m2--compare a {color: #fff; font-weight: 700;}

/* 머리말 오른쪽 "문의하기" 단추. 사이트의 목적(문의)이라 메뉴 글자와 다르게 색 단추로 둔다.
   900 이하는 머리말에서 빼고, 전체메뉴 맨 위(.snb-cta)와 떠 있는 문의하기 단추가 맡는다. */
:is(.site-home, .sub-layout) header .tnb-cta,
:is(.site-home, .sub-layout) header .tnb-cta:hover,
:is(.site-home, .sub-layout) header .tnb-cta:focus {height: 44px; padding: 0 20px; border-radius: 22px; background: #006dbb; color: #fff; display: inline-flex; align-items: center; font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none; transition: background .15s;}
:is(.site-home, .sub-layout) header .tnb-cta:hover {background: #00578f;}
:is(.site-home, .sub-layout) header .tnb-cta:focus-visible {outline: 2px solid #fff; outline-offset: 3px;}
@media (max-width: 900px) {
    :is(.site-home, .sub-layout) header .tnb-cta {display: none;}
}

/* 전체메뉴(1300 이하) 맨 위: 문의하기 · 전화 두 단추 */
header #snb .snb-cta {margin-top: 100px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; line-height: 1;}
header #snb .snb-cta + ul.m1 {margin-top: 28px;}
header #snb .snb-cta a,
header #snb .snb-cta a:hover,
header #snb .snb-cta a:focus {height: 52px; box-sizing: border-box; border-radius: 26px; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 16px; font-weight: 700; color: #fff; text-decoration: none;}
header #snb .snb-cta__go, header #snb .snb-cta__go:hover, header #snb .snb-cta__go:focus {background: #006dbb;}
header #snb .snb-cta__tel, header #snb .snb-cta__tel:hover, header #snb .snb-cta__tel:focus {border: 1px solid rgba(255,255,255,.4);}
header #snb .snb-cta svg {width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
header #snb .snb-cta a:focus-visible {outline: 2px solid #fff; outline-offset: 3px;}

/* 전역 글꼴: Noto Sans → Pretendard. 옛 CSS(default.css body, .btn, .clause-pages 등)가 Noto 를 직접 지정해 둔 곳도 덮는다. */
body, input, button, select, textarea, .btn, .btn-enw, .Noto-Sans-KR, .clause-pages li > ul > li, .popup-layer .popup-footer .custom-control-label {
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

/* 본문 바로가기: 키보드로 처음 Tab 을 누르면 나타난다 (_Layout 의 ViewData["skipTo"]) */
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 3000; padding: 12px 18px; background: #fff; color: #1c2025 !important; font-weight: 700; border: 2px solid #1c2025; text-decoration: none !important; }
.skip-link:focus { top: 16px; }

/* A/S 안내의 지역 드롭다운이 쓰던 sb-admin 테마 규칙 두 개. sb-admin-2.css(237KB) 를 통째로 빼면서 여기로 옮겼다 (2026-10-06) */
.dropdown .dropdown-menu { font-size: .85rem; line-height: 1.5; }
.dropdown.no-arrow .dropdown-toggle::after { display: none; }

/* ── 하위 페이지 상단 비주얼(#sbv, Partials/SubVisual) 줄이기 (캔버스 "하위 페이지 히어로 크기" 제안 A, 2026-10-06) ──
   500 → 360px(처음엔 제안대로 320 이었으나 작다는 말에 360). 글자 묶음(DONGKWANG · 제목 · 형제 메뉴)을 사진 아래쪽에 모은다. 사진은 테마(sbv-1~4) 위치 그대로 꽉 채운다.
   767 이하는 사진 220px + 사진 아래 흰 형제 메뉴 줄(전에는 숨겨서 휴대폰에서 옆 페이지로 갈 길이 없었다). */
#sbv { height: 360px; background-size: cover !important; }
#sbv .wrap { box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 34px; }
#sbv .page-name { height: auto; padding-top: 0; }
#sbv .page-name .sub_tit { padding-left: 78px; font-size: 14px; letter-spacing: .02em; }
#sbv .page-name .sub_tit:after { top: 50%; width: 56px; }
#sbv .page-name .tit, #sbv .page-name h1.tit, #sbv .page-name p.tit { margin-top: 8px; font-size: 52px; line-height: 1.15; }
#sbv_location { position: relative; z-index: 1; bottom: auto; margin-top: 26px; }
@media (max-width: 767px) {
    #sbv { height: 268px; } /* 사진 220 + 형제 메뉴 줄 48 */
    #sbv .wrap { position: static; padding-bottom: 76px; }
    #sbv .page-name .tit, #sbv .page-name h1.tit, #sbv .page-name p.tit { font-size: 40px; }
    #sbv_location { display: flex; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; margin: 0; padding: 0 20px; gap: 24px; overflow-x: auto; white-space: nowrap; background: #fff; border-bottom: 1px solid #e3e6ea; scrollbar-width: none; }
    #sbv_location::-webkit-scrollbar { display: none; }
    #sbv_location a, #sbv_location a:hover, #sbv_location a:focus { flex: none; height: 48px; margin: 0; padding: 0; display: flex; align-items: center; font-size: 15px; font-weight: 500; color: #333a42; text-shadow: none; text-decoration: none; }
    #sbv_location a::after { display: none; }
    #sbv_location a.active, #sbv_location a.active:hover, #sbv_location a.active:focus { color: #006dbb; font-weight: 700; box-shadow: inset 0 -3px 0 #006dbb; }
}
@media (max-width: 600px) {
    #sbv .page-name .tit, #sbv .page-name h1.tit, #sbv .page-name p.tit { font-size: 32px; }
    #sbv .page-name .sub_tit { padding-left: 56px; font-size: 12px; }
    #sbv .page-name .sub_tit:after { width: 40px; }
}