@charset "utf-8";

/* ============================================================================
   P&F bio 악센트 레이어

   테마 08 의 구조와 레이아웃은 그대로 두고, 테마가 이미 쓰고 있는 클래스에만
   CI 색을 얹는다. 새 컴포넌트나 새 레이아웃을 만들지 않는다.

   기본색(--main-color)은 테마관리에서 CI 딥그린 #056839 로 설정되어 있으므로
   여기서는 다루지 않는다. 이 파일이 하는 일은 하나뿐이다 —
   테마가 검정으로 처리하던 강조부를 CI 골드로 바꿔 브랜드 인상을 만든다.

   골드를 쓰는 이유: 레거시 사이트는 크림 바탕에 포레스트그린 + 라임을 썼고
   골드는 전혀 쓰지 않았다. CI 의 나머지 절반인 골드를 시그니처로 세우면
   같은 초록 계열이어도 인상이 확실히 갈린다.
   ========================================================================== */


/* --- 버튼 : 검정 채움 → 딥그린 채움 + 골드 밑선 ------------------------- */
.gw-btn01 { border-color: rgba(5, 104, 57, .12); border-bottom: 3px solid var(--pnf-gold); }
.gw-btn01::before { background: var(--main-color); }
.gw-btn01:hover { border-color: var(--main-color); border-bottom-color: var(--pnf-gold); }

.gw-btn0102 { border-color: var(--main-color); background: var(--main-color); border-bottom: 3px solid var(--pnf-gold); }
.gw-btn0102:hover { background: var(--pnf-green-800); border-color: var(--pnf-green-800); border-bottom-color: var(--pnf-gold); }

.gw-btn03 { background: var(--pnf-green-050); color: var(--main-color); }

.gw-main-btn01 .gw-ico { color: var(--pnf-gold); }


/* --- 구분선 · 불릿 : 회색 → 골드 ----------------------------------------- */
.gw-sub-title-line:after { background: var(--pnf-gold); width: 2px; height: 34px; }
.gw-list01 > li:before { color: var(--pnf-gold); }
.dot { background: var(--pnf-gold); }


/* --- 섹션 라벨 밑에 골드 헤어라인 ---------------------------------------- */
.gw-sub-title02 { position: relative; display: inline-block; padding-bottom: 10px; }
.gw-sub-title02::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--pnf-gold); }


/* --- 표 머리 : CI 톤으로 ------------------------------------------------- */
.gw-table01 thead th,
.gw-table02 thead th { border-top: 2px solid var(--main-color); }


/* --- 탭 활성 표시선 ------------------------------------------------------ */
.gw-tabs > li > a.active { border-bottom-color: var(--pnf-gold); }


/* --- 딥그린 면(섹션 배경)용 보정 -----------------------------------------
   테마의 .gw-bg-f8 대신 딥그린 면을 쓰고 싶은 섹션에만 붙인다.
   글자색과 링크색을 함께 뒤집어 준다. */
.pnf-bg-deep { background: var(--pnf-green-900); color: #fff; }
.pnf-bg-deep .gw-sub-title,
.pnf-bg-deep .gw-sub-text,
.pnf-bg-deep h2, .pnf-bg-deep h3, .pnf-bg-deep h4, .pnf-bg-deep p { color: #fff; }
.pnf-bg-deep .gw-sub-title02 { color: var(--pnf-gold); }
.pnf-bg-deep .gw-sub-title02::after { background: var(--pnf-gold); }
.pnf-bg-deep .gw-btn01 { color: #fff; border-color: rgba(255, 255, 255, .22); }


/* --- 핵심기술 4패널 : 사진이 없을 때의 처리 ------------------------------
   테마는 이 패널을 배경사진 위 어두운 오버레이로 설계했다(.gw-img-box{height:100vh;
   background:#000}). 우리는 쓸 사진이 없어 이미지를 뺐고, 그대로 두면 검정 100vh
   블록 네 개가 남는다. 사진이 들어오기 전까지 딥그린 면으로 대신 세우고
   높이를 줄인다. 구조와 클래스는 건드리지 않는다.
   사진 확보 시 이 블록만 지우면 테마 원래 동작으로 돌아간다. */
#gw-theme08-main-service .gw-service-list .gw-list-item .gw-img-box {
    height: 460px;
    background: linear-gradient(160deg, var(--pnf-green-900) 0%, var(--pnf-green-700) 100%);
}
#gw-theme08-main-service .gw-service-list .gw-list-item + .gw-list-item .gw-img-box {
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .12);
}
#gw-theme08-main-service .gw-service-list .gw-list-item .gw-tit-box .gw-tit {
    position: relative;
    padding-bottom: 14px;
}
#gw-theme08-main-service .gw-service-list .gw-list-item .gw-tit-box .gw-tit::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 28px;
    height: 2px;
    margin-left: -14px;
    background: var(--pnf-gold);
}
#gw-theme08-main-service .gw-service-list .gw-list-item .gw-tit-box .gw-txt {
    color: rgba(255, 255, 255, .72);
}

@media screen and (max-width: 1024px) {
    #gw-theme08-main-service .gw-service-list .gw-list-item .gw-img-box { height: 300px; }
}


/* --- 메인 히어로 : 흰 글자 가독성 확보 ------------------------------------
   배너 사진의 왼쪽 위가 밝은 하늘이라 흰 카피가 묻힌다.
   사진 위에 딥그린 스크림을 얹어 대비를 만든다. 구조는 건드리지 않는다. */
#gw-theme-main-visual .slide-inner .bg { position: relative; }
#gw-theme-main-visual .slide-inner .bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(2, 54, 29, .82) 0%, rgba(2, 54, 29, .45) 45%, rgba(2, 54, 29, .12) 100%);
    pointer-events: none;
}
#gw-theme-main-visual .gw-main-visual-text-con { position: relative; z-index: 2; }


/* --- 테마 데모 사진이 배경으로 남아 있던 두 곳 ----------------------------
   about 은 추상 실버, quick 은 키보드 스톡 사진이라 회사와 무관하다.
   <img> 가 아니라 CSS 배경이어서 마크업 정리 때 함께 빠지지 않았다.
   우리 사진이 생기면 이 블록을 지우면 테마 원래 배경으로 돌아간다. */
#gw-theme08-main-about .gw-content {
    background: linear-gradient(135deg, var(--pnf-green-050) 0%, #fff 55%, var(--pnf-green-100) 100%);
}
#gw-theme08-main-quick .gw-quick-con {
    background-image: linear-gradient(115deg, var(--pnf-green-900) 0%, var(--pnf-green-700) 62%, var(--pnf-green-600) 100%);
}
#gw-theme08-main-quick .gw-quick-con .gw-tit,
#gw-theme08-main-quick .gw-quick-con .gw-txt { color: #fff; }

/* 스크롤 표시가 카피 위에 겹친다. 테마 데모보다 우리 문구가 한 줄 길어
   중앙에 놓인 표시와 충돌한다. 왼쪽 여백으로 물려 충돌만 해소한다. 오른쪽은 TOP 버튼 자리다. */
#gw-theme-main-visual .scroll { left: 40px; right: auto; transform: none; }

/* 히어로 보조 카피를 골드로.
   배너 스킨의 `... .gw-bottom-container > div` 가 타입 선택자를 포함해
   특이도가 더 높다. 같은 경로에 클래스를 붙여 이긴다. */
#gw-theme-main-visual .gw-main-visual-text-con .gw-bottom-container > div.gw-main-visual-text02 {
    color: var(--pnf-gold-300);
    font-weight: 600;
}