@charset "UTF-8";
/*****************************************************************

Copyright C 그누위즈 테마 All rights reserved.
gnuwiz@naver.com & master@gnuwiz.com
본 페이지는 유료콘텐츠 그누위즈 테마 CSS입니다. 불법복제시 법적인 제제를 받으실 수 있습니다.
라이센스를 삭제하지 마세요. 라이센스 삭제시 불법 사용으로 간주될 수 있습니다.

******************************************************************/
.breadcrumb-container{place-content: center;gap:5px;}
.breadcrumb-container > li {position: relative;}
.breadcrumb-container > li:not(:first-child):before {font-family:xeicon;content: "\e93f";display: inline-block;margin-right: 5px;color: #9a9a9a}
.breadcrumb-container > li > a {color: rgba(255,255,255,0.8);}
.breadcrumb-container > li > a.active {color: #fff;}
#container_title {background: #f8f8f8;height:405px;}
#container_title .gw-sub-theme-visual > div{position: absolute;top:0;left:0;width: 100%;height:100%;}
#container_title .gw-sub-theme-title-container{display:flex;flex-direction:column;align-items:center;place-content:center;z-index:100;}
#container_title .gw-sub-theme-title {font-size: var(--main-title01);text-align: center;color:#fff;letter-spacing: -0.03em;font-weight: 500;}
.sub-theme-bg{height: 100%;}
.sub-theme-bg:before{content: "";display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.35);}
.sub-theme-bg > img {object-fit: cover;width: 100%;height: 100%;}
.gw-side-menu-container {position: absolute;bottom: -30px;left: 50%;transform: translateX(-50%);z-index: 200;}
.gw-side-menu-container > .gw-flex {place-content: center;}
[class*="gw-side-menu-depth"]{position: relative;}
[class*="gw-side-menu-depth"] > button{padding:0 5rem 0 2rem;background: var(--main-color);color:#fff;position:relative;z-index:1;text-align: center;width: 315px;height:68px;font-size:var(--main-text01); font-weight: 500;}
[class*="gw-side-menu-depth"] > button:after{font-family:xeicon;content: "\e937";color:#fff;font-size:1.5rem;transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);position: absolute;right: 20px;top: 50%;transform: translateY(-50%);}
.gw-side-menu-depth01:before { content: '\e93f'; font-family: xeicon; position: absolute;font-size: var(--main-title04); right: -1.2rem; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.3); z-index: 101;}
.gw-side-menu-depth01 > button{border-radius:3.5rem 0 0 3.5rem;transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);}
.gw-side-menu-depth02 > button{border-radius: 0 3.5rem 3.5rem 0;}
[class*="gw-side-menu-depth"] > ul {display:none;position: absolute;padding: 28px;padding-top:48px;width: 100%;top: 50%;border-bottom-left-radius:3.5rem;border-bottom-right-radius:3.5rem;background: rgba(246,246,246,0.7);box-shadow: 0 0 2rem 0 rgba(0,0,0,0.2);backdrop-filter:blur(5px);}
[class*="gw-side-menu-depth"] > ul > li:not(:last-child) {padding-bottom: 28px;}
[class*="gw-side-menu-depth"].on button:after{transform: translateY(-50%) rotate(180deg);}

@media screen and (max-width:768px){
    [class*="gw-side-menu-depth"]{display: block;width:calc(100vw - 20px);}
    [class*="gw-side-menu-depth"] > button{padding:0;width:calc(100vw - 20px);height: 60px;border-radius: 3.5rem;}
    [class*="gw-side-menu-depth"] > ul{padding-top: 40px;}
    .gw-side-menu-depth01{display: none;}
}

@media screen and (max-width:576px){
    #container_title{height: 250px;}
}

/* ------------------------------------------------------------------ *
 * 서브 위치 내비게이션 — 흰색 알약(pill) 디자인 (전 서브페이지 공통)
 * 회사소개 전용이던 UI를 사업분야·기술·고객지원 등 모든 서브페이지로 통일한다.
 * 기본(노란 바) 규칙 뒤에 와서 덮어쓴다.
 * ------------------------------------------------------------------ */
.gw-side-menu-container { bottom: -32px; }
.gw-side-menu-container > .gw-flex {
    overflow: visible;
    border: 1px solid #dedede;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(0,0,0,.10);
}
[class*="gw-side-menu-depth"] > button {
    width: 320px;
    height: 64px;
    padding-inline: 28px 52px;
    border-radius: 0;
    background: #fff;
    color: #111;
    font-size: 16px;
    font-weight: 700;
}
.gw-side-menu-depth01 > button,
.gw-side-menu-depth02 > button { border-radius: 0; }
.gw-side-menu-depth01 > button { border-radius: 12px 0 0 12px; }
.gw-side-menu-depth02 > button { border-radius: 0 12px 12px 0; }
.gw-side-menu-depth01 { border-right: 1px solid #dedede; }
.gw-side-menu-depth01::before { display: none; }
[class*="gw-side-menu-depth"] > button::after { color: var(--main-color); }
[class*="gw-side-menu-depth"] > ul {
    top: calc(100% - 8px);
    padding: 24px;
    border: 1px solid #dedede;
    border-radius: 0 0 12px 12px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 18px 34px rgba(0,0,0,.12);
    backdrop-filter: blur(12px);
}
[class*="gw-side-menu-depth"] > ul > li:not(:last-child) { padding-bottom: 18px; }
[class*="gw-side-menu-depth"] > ul a:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--main-color) 45%, #fff);
    outline-offset: 3px;
}

@media screen and (max-width:768px){
    .gw-side-menu-container { bottom: -30px; }
    .gw-side-menu-container > .gw-flex { border-radius: 12px; }
    .gw-side-menu-depth02 > button {
        width: calc(100vw - 20px);
        height: 60px;
        border-radius: 12px;
    }
    [class*="gw-side-menu-depth"] > ul { border-radius: 0 0 12px 12px; }
}

/* ------------------------------------------------------------------ *
 * 현재 위치 표시 — 색만으로 알리지 않는다
 * 노란 글자는 흰 배경 대비가 1.5:1 이라 색맹·저시력 화면에서 구별되지 않는다.
 * 굵기와 밑선을 함께 줘서 색을 못 보더라도 지금 어디에 있는지 읽히게 한다.
 * 현재 링크에는 aria-current="page" 가 붙는다(head.php).
 * (서브 비주얼의 빵부스러기는 2026-09-11 에 걷어 냈다 — 사이드 메뉴만 남는다)
 * ------------------------------------------------------------------ */
[class*="gw-side-menu-depth"] > ul a { color: #444; transition: color .2s ease; }
[class*="gw-side-menu-depth"] > ul a:hover { color: #111; }
[class*="gw-side-menu-depth"] > ul a.active {
    color: var(--pnf-green-700, #056839);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 2px;
}