@charset "utf-8";

/********** header **********/
/* 오버레이와 패널의 확실한 쌓임 순서 보장 */
#sideDim{position: fixed; inset: 0; z-index: 900;}
#gnbPanel{position: fixed; inset: 0 0 0 auto; max-width: 360px; width: 100%; z-index: 1000;}
#menuClose.panel-close{position: absolute; top: 12px; right: 16px; z-index: 1002; pointer-events: auto;}
.gnb-mobile{position: relative; z-index: 1001;}
.gnb-mobile .m-gnb,
.gnb-mobile .m-sub{position: relative;z-index: 1001;}
.gnb-desktop .has-sub > .sub-toggle::after,
.gnb-mobile  .has-sub > .sub-toggle::after{content: none !important; display: none !important; background: none !important;}
html { scroll-padding-top: var(--header-h); }
section[id] { scroll-margin-top: var(--header-h); }
header .has-sub > .sub {position: absolute; top: 100%; left: 0;background: #fff;box-shadow: 0 8px 20px rgba(0,0,8px,.25); visibility: hidden; transform: translateY(6px);transition: opacity .18s ease, transform .18s ease, visibility .18s;}
@media (hover: hover) and (pointer: fine) {
  header .has-sub:hover   > .sub,
  header .has-sub:focus-within > .sub { opacity: 1; visibility: visible; transform: translateY(0);}
}
header .has-sub > .sub a {display: block;white-space: nowrap;}
header .has-sub > .sub a:hover,
header .has-sub > .sub a:focus {background: #DFE8E5; color:#4E6A65; outline: none;}
.side-dim {inset: 0; background: rgba(0,0,0,.35);opacity: 0; visibility: hidden; transition: .2s ease;}
.side-panel {top: 0; right: 0; width: min(360px, 86vw); background: #fff; box-shadow: -4px 0 4px rgba(0,0,0,.25);transform: translateX(100%); transition: transform .25s ease;}
.panel-close {align-self: flex-end; background: transparent; border: none; font-size: 24px; line-height: 1; width: 24px; height: 24px; cursor: pointer;}
.menu-open .side-panel { transform: translateX(0); }
.menu-open .side-dim   { opacity: 1; visibility: visible; }
.no-scroll { overflow: hidden; touch-action: none; }
.m-gnb { list-style: none; margin: 8px 0 0; padding: 0; }
.m-gnb > li { border-bottom: 1px solid #eee; }
.m-gnb a, .m-gnb .sub-toggle {display: block; width: 100%; text-align: right;color: #222; background: none; border: none;}
.m-gnb .has-sub .sub-toggle { position: relative; }
.m-gnb .has-sub .sub-toggle::after {content: "▾";position: absolute; right: 8px; top: 50%; transform: translateY(-50%);}
.m-gnb .has-sub[aria-expanded="true"] .sub-toggle::after { content: "▴"; }
.hamburger {border: 0; background: transparent; cursor: pointer; }
.hamburger span, .hamburger span::before, .hamburger span::after {content: ""; position: absolute; left: 50%; transform: translateX(-50%);width: 24px; height: 2px; background: #222; transition: .2s ease;}
.hamburger span { top: 50%; }
.hamburger span::before { top: -8px; }
.hamburger span::after  { top:  8px; }
.sub {box-shadow:0 0 8px rgba(0,0,0,.25); margin-top:24px;}


/********** mainBanner **********/
.mainBanner {background:url('/img/mainBanner.jpg'); background-position:center center; background-size:cover;}
.txtShadow {text-shadow:0 0 8px rgba(0,0,0,.25);}
/********** business **********/
.businessCnt1 {background:url('/img/mainService-001.jpg'); background-position:center center; background-size:cover;}
.businessCnt2 {background:url('/img/mainService-002.jpg'); background-position:center center; background-size:cover;}
.businessCnt3 {background:url('/img/mainService-003.jpg'); background-position:center center; background-size:cover;}
.businessCnt4 {background:url('/img/mainService-004.jpg'); background-position:center center; background-size:cover;}
.businessCntLine {border:1px solid #F7F8F8;}


/********** Core **********/
.core {background:url('/img/mainCoreBg.jpg'); background-position:center center; background-size:cover;}
.coreCntLine {border-right:1px solid #71908A;}

/********** case *********/
.caseCnt1 {background:url('/img/mainCase-001.jpg'); background-position:center center; background-size:cover;}
.caseCnt2 {background:url('/img/mainCase-002.jpg'); background-position:center center; background-size:cover;}
.caseCnt3 {background:url('/img/mainCase-003.jpg'); background-position:center center; background-size:cover;}
.caseCnt4 {background:url('/img/mainCase-004.jpg'); background-position:center center; background-size:cover;}
.caseCnt5 {background:url('/img/mainCase-005.jpg'); background-position:center center; background-size:cover;}
.caseCnt6 {background:url('/img/mainCase-006.jpg'); background-position:center center; background-size:cover;}
.caseCnt7 {background:url('/img/mainCase-007.jpg'); background-position:center center; background-size:cover;}
.caseCnt8 {background:url('/img/mainCase-008.jpg'); background-position:center center; background-size:cover;}
.caseCnt1, .caseCnt2, .caseCnt3, .caseCnt4,
.caseCnt5, .caseCnt6, .caseCnt7, .caseCnt8 {
  aspect-ratio: 5 / 4;   /* ← 가로:세로 = 5:4 */
  overflow: hidden;       /* 내용 넘침 방지(선택) */
  box-sizing: border-box; /* 패딩 포함해도 레이아웃 안정화 */
}

/********* notice *********/
.noticeBoxLine {border:1px solid #91949F;}
.noticeCntLine {border-top:2px solid #91949F; border-bottom:2px solid #91949F;}
.noticeCntLine {display: grid;grid-template-columns: 1fr;}
.noticeCntLine .noticeCntLines {display: block; box-sizing: border-box; position: relative; }
.noticeCntLine .noticeCntLines[data-aos] {will-change: transform, opacity;}
.noticeCntLine a {border-bottom:1px solid #91949F;}
.noticeCntLine .noticeItem.is-last {border-bottom: none;}
  

/********* contact *********/
.contact {background:url('/img/contactBg.jpg'); background-position:center center; background-size:cover;}
.contactBoxLine {border:1px solid #F7F8F8;}


/******* company *********/
.companyMainBanner {background:url('/img/subBanner-001.jpg'); background-position:center center; background-size:cover;}
.introTableLinert {border:1px solid #D9DADE;}
.introTableLineth {border-right:1px solid #D9DADE;}

.sales {background:url('/img/companyBg.jpg'); background-position:center center; background-size:cover;}

.planLien {border-top:1px solid #D9DADE; border-bottom:1px solid #D9DADE;}
.planLienTop {border-top:2px solid #445D59;}

.organizationBoxline {border:2px solid #445D59; box-shadow:0 0 8px #BFD0CC;}
.leftLine {border-left:2px solid #71908A;}
.bottomLine {border-bottom:2px solid #71908A;;}

.wrap_controllers {display:none;}
.cont {display:none;}
.map {width:100% !important; height:100% !important;}
.wrap_map {width:100% !important; height:100% !important;}
.root_daum_roughmap {width:100%  !important; height:560px !important;}
.locationBoxline {border:1px solid #D9DADE;}


/********** bisiness ***********/
.bisinessBanner {background:url('/img/subBanner-002.jpg'); background-position:center center; background-size:cover;}
.bisinessCntLine {border-bottom:2px solid #EEEEF0;}

.bisinessService {background:url('/img/coreValueBg.jpg'); background-position:center center; background-size:cover;}

.bisinessadvantage {background: linear-gradient(to bottom, #303F3D, #394C4A);}

.bisinessProcessBoxLine {box-shadow: 0px 0px 4px rgba(0,0,0,.25);}

.processArrow { transform: rotate(-90deg);}

.bisinessProcessTxt {right:0; bottom:0;}
.bisinessServiceCntLine {box-shadow:0 0 4px rgba(0,0,0,.25);}
:root { --hdr: 96px; --anchor-extra: 48px; }
@media (max-width: 1200px) {
  :root { --hdr: 72px; --anchor-extra: 32px; }
}
[id^="area"] { scroll-margin-top: calc(var(--hdr) + var(--anchor-extra)); }
html { scroll-behavior: smooth; }
  

/********** case ***********/
.caseBanner {background:url('/img/subBanner-003.jpg'); background-position:center center; background-size:cover;}
/* 카테고리 버튼 보더 중복 방지 */
.caseFilter{
    /* 유틸에서 gap이 들어갈 수 있으니 반드시 0으로 */
    gap: 0 !important;
  
    /* 가장자리 클리핑 + 시작점 1px 패딩으로 음수 마진 보정 */
    padding-top: 1px;
    padding-left: 1px;
    overflow: hidden; /* 바깥으로 삐져나가는 보더 숨김 */
  }
  
  /* 각 카테고리 버튼 보더 정의 */
  .caseFilter .caseListBtn{
    border: 1px solid #D9DADE;     /* 원하는 라인 색상 */
    margin-top: -1px;              /* 위 이웃과 보더 겹치기 */
    margin-left: -1px;             /* 왼 이웃과 보더 겹치기 */
    /* 필요 시 모서리 둥근값은 0 권장 (겹칠 때 이음새 깔끔) */
    border-radius: 0;
    background-color: #fff;        /* 배경 지정(투명일 경우 겹침자리에서 색 겹침 이슈 방지) */
  }
  
  /* 활성(선택) 상태 강조 — 겹침 시에도 끊김 없이 보이도록 위로 올림 */
  .caseFilter .caseListBtn.active{
    position: relative;
    z-index: 1;                    /* 같은 줄/다른 줄 경계에서도 라인 끊김 방지 */
    border-color: #9EA3AE;         /* 강조 색상(예시) */
    background-color: #F5F8F7;     /* 톤 맞춰 조정 */
  }
  
  /* hover 시 라인만 진하게 (선택) */
  .caseFilter .caseListBtn:hover{
    border-color: #B7BBC3;
  }
  

/*********** login ***********/
.loginBg {background:url('/img/companyBg.jpg'); background-position:center center; background-size:cover;}
.loginBoxLine {border:1px solid #D9DADE;}

/*********** case ********/
.inputLine {border:1px solid #D9DADE;}
.btnLine {border:1px solid #B8BAC1;}
.caseListBtn {border:1px solid #D9DADE; background:none;}
.caseBottomLine {border-bottom:2px solid #D9DADE;}
.caseBtnLine {border:1px solid #D9DADE;}
.casenextprevBtn {border-top:1px solid #D9DADE; border-bottom:1px solid #D9DADE;}
.casenextBtn {border-bottom:1px solid #D9DADE;}
.casemainTxt div p img{width:100%;}

/********* notice ************/
.noticeBanner {background:url('/img/subBanner-004.jpg'); background-position:center center; background-size:cover;}
.noticeadminTable {border-top:2px solid #222; border-bottom:2px solid #222;}
.noticeadminTable tbody tr td {border-top:1px solid #D9DADE;}
.noticemainTxt div p img {width:100%;}
/* 첨부파일 리스트 */
.noticeFilesList { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.noticeFilesList li { margin: 0; }
.noticeFilesList li:first-child .fileItem { border-top: none; }

 
/* 긴 파일명 말줄임 */
.fileName { color: #111; }
.ellip-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 확장자별 컬러(선택) */
.fileBadge:where(:not(:empty)) { text-transform: uppercase; }
.fileBadge:where(:not(:empty)):is(.pdf, [data-ext="pdf"]) { background:#FEE2E2; color:#991B1B; }


/********** contact *************/
.contactBanner {background:url('/img/subBanner-005.jpg'); background-position:center center; background-size:cover;}
.contactBox {box-shadow: 0px 0px 8px #D9DADE;}
.contactBoxLine {border:1px solid #D9DADE;}
.contactBox input[type="checkbox"]{left:-9999px;}
.contactBox input[type="checkbox"] + label{cursor: pointer; }
.contactBox input[type="checkbox"] + label:before{width:20px; height:20px;  content:''; transition: ease-in-out 0.3s;
  margin-right:8px;background:url('/img/chkOff.svg')center center no-repeat; background-size:cover;display:block}
.contactBox input[type="checkbox"]:checked + label:before{background:url('/img/chkOn.svg')center center no-repeat;}
.underLine {text-decoration: underline;text-decoration-thickness: 1px;text-decoration-color: currentColor;text-decoration-skip-ink: auto;}
.contactStyleNo {border:none !important;}
.contactBgIcon {bottom:0;}
.onlineLists {border-top:1px solid #D9DADE; border-bottom:1px solid #D9DADE;}
.onlineLists tbody tr td{border-top:1px solid #D9DADE;}
.onlineLists tbody tr td + td{ border-left:1px solid #D9DADE; }
.onlineLists thead tr th + th{ border-left:1px solid #D9DADE; }

.onlineViews {border-top:1px solid #D9DADE; border-bottom:1px solid #D9DADE;}
.onlineViews tr th{border-top:1px solid #D9DADE;border-bottom:1px solid #D9DADE;}
.onlineViews tr td{border-top:1px solid #EEEEF0;border-bottom:1px solid #EEEEF0;}
.onlineViews tr td + td{ border-left:1px solid #EEEEF0; }
.onlineViews tr th + th{ border-left:1px solid #EEEEF0; }
.styleN {border:none; background:none;}
.onlineListBtn {border:1px solid #D9DADE;}


/*********** footer ********/
footer {border-top:1px solid #B8BAC1;}
#familySite {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  
    /* 셀렉트 박스 내부에 화살표 이미지를 배경으로 배치 */
    background-image: url("/img/arrow.svg");
    background-repeat: no-repeat;
    background-position: right 12px center; /* 박스 안쪽 우측 정렬 */
    background-size: 16px 16px;
  
    /* 텍스트가 화살표와 겹치지 않도록 우측 패딩 확보 */
    padding-right: 40px !important;
    line-height: 1.4;
  }
  
  /* 구형 IE/Edge 네이티브 화살표 숨김 */
  #familySite::-ms-expand { display: none; }
  
  /* 반응형 크기/간격 보정 */
  @media (max-width: 1199.98px) {
    #familySite {
      background-position: right 10px center;
      background-size: 14px 14px;
      padding-right: 34px !important;
    }
  }
  @media (max-width: 767.98px) {
    #familySite {
      background-position: right 8px center;
      background-size: 12px 12px;
      padding-right: 30px !important;
    }
  }
  
  /* 고대비 모드(일부 윈도우 환경)에서 배경이미지 숨김 → 텍스트 접근성 우선 */
  @media (forced-colors: active) {
    #familySite { background-image: none; }
  }
  

  /********* policy ************/
  .policyTp {border-bottom:1px solid #222;}