@charset "utf-8";
/*******************
** header 
********************/
header {position: fixed;top: 0;left: 0;width: 100%;background-color: transparent;transition: background-color 0.3s ease, box-shadow 0.3s ease;z-index: 100;}
header.active {background-color: #fff;}
header.active a {color:#26272B;}
header{border-bottom:1px solid #fff;}
.mainBannerVideo {object-fit:cover; object-position:center;}

/*******************
** mainBanner
********************/
.mainBannerTxt {top: 50%; left: 50%; transform: translate(-50%, -50%);}

/*******************
** aboutus
********************/

/*******************
** service
********************/
.btnSN {display: inline-flex;align-items: center;justify-content: flex-start;color: #222;background: none;border: none;cursor: pointer;transition: color .25s ease;}
.btnSN.active { color: #59AB3C; }
.btnSN .btnIcon {width: 28px; height: 28px;margin-right: 16px; opacity: 0; transform: scale(.9);transition: opacity .25s ease, transform .25s ease;}
.btnSN.active .btnIcon { opacity: 1; transform: scale(1); }
.serviceCntImgs img { transition: opacity .45s ease; }
.fade-out { opacity: 0 !important; }
.fade-in  { opacity: 1 !important; }
.serviceCntImg2 {bottom:0; left:-10%;}
.serviceCntImg3 {right:40px; top:40px;}
.serviceModal {position: fixed; inset: 0; z-index: 9999;display: none;}
.serviceModal.active { display: flex; align-items: center; justify-content: center; }
.serviceModalOverlay { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.serviceModalBox {position: relative; z-index: 1;background: #fff; width: min(820px, 92vw); max-height: 90vh;overflow-y: auto;}
.closeModal {position: absolute; top: 10px; right: 14px;width: 24px; height: 24px; border: 0; background: transparent; cursor: pointer;display: inline-flex; align-items: center; justify-content: center; padding: 0;}
.closeModal span {position: absolute; width: 24px; height: 2px; background: #333; border-radius: 1px; transition: background-color .25s ease;}
.closeModal span:first-child { transform: rotate(45deg); }
.closeModal span:last-child  { transform: rotate(-45deg); }
.closeModal:hover span { background: #000; }
.ytWrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
@supports not (aspect-ratio: 16 / 9) {
    .ytWrap { padding-top: 56.25%; }
    .ytWrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
  }
.ytWrap iframe { width: 100%; height: 100%; border: 0; }
.serviceCntImgs img { transition: opacity .35s ease; }
.fade-out { opacity: 0 !important; }
.fade-in  { opacity: 1 !important; }
.btnSN { display:inline-flex; align-items:center; background:none; border:none; cursor:pointer; transition:color .25s ease; color:#222; }
.btnSN.active { color:#59AB3C; }
.btnSN .btnIcon { width:28px; height:28px; margin-right:16px; opacity:0; transform:scale(.9); transition:opacity .25s, transform .25s; }
.btnSN.active .btnIcon { opacity:1; transform:scale(1); }
.serviceModalCloseBox {border-bottom:1px solid #D9DADE;}
.closeModal {top: 50%; transform: translate(-50%, -50%);}
.serviceCntTxt {bottom:20px; right:40px;}

/* 클릭 시 재생되는 짧은 진입 모션 */
.serviceCntImg2.main,
.serviceCntTxt {
  will-change: transform, opacity;
}

.kick-in {
  animation: svcPopIn .48s ease-out both;
}

@keyframes svcPopIn {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* =========================================================
   SERVICE 썸네일(통합 이미지) 1:1 비율 고정 - 기존 CSS에 덧붙임
   ========================================================= */

/* 1) .serviceCntImgs 자체를 정사각형 박스로 고정 */
.serviceCntImgs{
  aspect-ratio: 1 / 1;
  height: auto !important;     /* whp100 같은 유틸 높이 영향 차단 */
  min-height: 0 !important;    /* mhp300 같은 최소 높이 영향 차단 */
  overflow: hidden;
}

/* 2) 클릭 영역이 정사각형 박스를 꽉 채우도록 */
.serviceCntImgs .openModal{
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

/* 3) 통합 이미지(1장)가 정사각형에 꽉 차게 */
.serviceCntImgs .serviceCntImg1.combined{
  width: 100%;
  height: 100%;
  object-fit: cover;           /* 여백 없이 꽉 채움(일부 크롭 가능) */
  object-position: center;
}

/* 4) 화살표/타이틀 absolute 유지(기존 클래스 포지션과 호환) */
.serviceCntImgs .serviceCntImg3.arrow,
.serviceCntImgs .serviceCntTxt{
  position: absolute;
}

/* 5) aspect-ratio 미지원 브라우저 대비(선택이지만 안전하게 포함) */
@supports not (aspect-ratio: 1 / 1) {
  .serviceCntImgs{
    position: relative;
  }
  .serviceCntImgs::before{
    content:"";
    display:block;
    padding-top: 100%; /* 1:1 */
  }
  .serviceCntImgs .openModal{
    position:absolute;
    inset:0;
  }
}

/* =========================================================
   (선택) 기존 애니메이션 대상이 .serviceCntImg2.main 이었으면
   통합 이미지로도 같은 효과가 필요할 때 아래 추가
   ========================================================= */
.serviceCntImg1.combined{
  will-change: transform, opacity;
}

/* kick-in 애니메이션을 통합 이미지에도 적용하고 싶으면(선택) */
.serviceCntImg1.combined.kick-in{
  animation: svcPopIn .48s ease-out both;
}



/*******************
** partner
********************/
.partner {background-image:url('/img/partnerBg.jpg'); background-position:center; background-size:cover;}
.partnerCntBg {background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);}

/*******************
** history
********************/
/* 레일 */
#history .historyYears.wJs{
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:visible;
  gap:24px;
  -webkit-overflow-scrolling:touch;  /* iOS 네이티브 관성만 사용 */
  cursor:grab;
  user-select:none;
  scrollbar-width:none;
  touch-action: pan-x;                /* 수평 제스처 허용 */
  overscroll-behavior-x: contain;     /* 끝에서 튕기며 되돌아감 방지 */
}
#history .historyYears.wJs::-webkit-scrollbar{ display:none; }
#history .historyYears.wJs.is-dragging{
  cursor:grabbing;
  /* ← 기존에 넣었던 touch-action:none 은 제거! */
}

/* 스냅 완전 해제(혹시 다른 곳에서 준 값이 있더라도 무력화) */
#history .historyYears{ scroll-snap-type: none !important; }
#history .historyYears .yearBlock{ scroll-snap-align: none !important; }

/* 아이템은 연속 스크롤 형태 유지 */
#history .yearBlock{ flex:0 0 auto; min-width: clamp(320px, 80vw, 1080px); }

/* 필요 시 이미지 클릭 살리려면 pointer-events:none 삭제하세요 */
#history .historyYears.wJs img{
  -webkit-user-drag:none; user-select:none; pointer-events:none;
}


  
/*******************
** news
********************/
.newsGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "A A B"
      "A A B"
      "D E F"
      "G G H";
  }
.newsA { grid-area: A;}
.newsB { grid-area: B;}
.newsD { grid-area: D;}
.newsE { grid-area: E;}
.newsF { grid-area: F;}
.newsG { grid-area: G;}
.newsH { grid-area: H;}
.newsCard {background: linear-gradient(to bottom, #59AB3C, #7DC662) !important; background-size: cover !important; background-position: center !important; position: relative; overflow: hidden;}
.newsCard.hasBg {background-image: var(--card-bg) !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;}
.newsCard.hasBg::before {content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.25); pointer-events: none; z-index: 0;}
.newsCard .newsTit,
.newsCard .newsSubTxt { position: relative; z-index: 1;}
.newsArrow{--arrow-w: 56px; --line-h: 2px; --diag-w: 14px; --color: rgba(255,255,255,.95); bottom:32px; right:18px; position: absolute; width: var(--arrow-w); height: var(--line-h);}
.newsArrow::before{content:""; position:absolute; left:0; top:50%; width: calc(var(--arrow-w) - var(--diag-w)); height: var(--line-h); background: var(--color); transform: translateY(-50%);}
.newsArrow::after{content:""; position:absolute; right:0; top:50%; width: var(--diag-w); height: var(--line-h); background: var(--color); transform-origin: left center; transform: translateY(-50%) rotate(-135deg);}
.newsItem img { width: 100%; height: 100%; object-fit: cover; display: block; }
.newsTit {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-break: keep-all; }
.newsSubTxt {display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-break: keep-all; }


/*******************
** contact
********************/
#contact.contact {background-image:linear-gradient(to left, rgba(0,101,164,0) 0%, rgba(0,101,164,1) 100%), url('/img/contactBg.jpg');    background-position: 70% center; background-size:cover;}
/* 루트 */
.contactModal{
  display:none;
  position:fixed;
  inset:0;
  z-index:1100;             /* service 모달보다 위/아래 필요 시 조정 */
  align-items:center;
  justify-content:center;
}
.contactModal.is-active{ display:flex; }

/* 오버레이 */
.contactModalOverlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.6);
  z-index:1;
}

/* 박스 */
.contactModalBox{
  position:relative;
  background:#fff;
  width:90%;
  max-width:720px;
  border-radius:24px;
  overflow:hidden;
  z-index:2;
  animation:contactFadeInUp .35s ease;
  max-height: 90vh;
}
@keyframes contactFadeInUp{
  from{ opacity:0; transform:translateY(40px); }
  to  { opacity:1; transform:translateY(0); }
}

.contactModalCloseBar {border-bottom:1px solid #D9DADE;}
.contactModalClose{position:relative;
  width:24px; height:24px;
  border:0; background:transparent; cursor:pointer;}
.contactModalClose span{display:block; width:24px; height:2px; background:#000;
  position:absolute; top:50%; left:50%; transform-origin:center;}
.contactModalClose span:first-child{ transform:translate(-50%,-50%) rotate(45deg); }
.contactModalClose span:last-child { transform:translate(-50%,-50%) rotate(-45deg); }

.contactBoxLine {border:1px solid #D9DADE;}
.underLine {text-decoration: underline; text-decoration-color: #26272B; text-decoration-thickness: 1px; text-underline-offset: 2px;}
/* === 커스텀 체크박스 (이미지 기반) === */
#agreeCheck {
  appearance: none;          /* 브라우저 기본 체크박스 숨김 */
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  background: url('/img/chkOff.svg') no-repeat center / contain;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

/* 체크 상태일 때 이미지 교체 */
#agreeCheck:checked {
  background: url('/img/chkOn.svg') no-repeat center / contain;
}

/* label의 텍스트와 체크박스 간격 정렬 */
.agreeLabel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  line-height: 1.4;
}

/* 모바일 사이즈 대응 */
@media (max-width: 768px) {
  #agreeCheck {
    width: 20px;
    height: 20px;
  }
}

/*******************
** historyView
********************/
.historyIcon1 {border:6px solid #E7F7E1;}
.historyTitBLine {border-bottom:2px solid #D9DADE;}
.historyBLine {border-bottom:1px solid #D9DADE;}

/*******************
** login
********************/
.login {background-image:url('/img/partnerBg.jpg'); background-position:center; background-size:cover;}

/***********************
** contactList
***********************/
.contactLists th,
.contactLists td{border-top:1px solid #D9DADE; border-bottom:1px solid #D9DADE; border-right:1px solid #D9DADE;}
.contactLists{border-collapse: collapse;}
.contactLists th:last-child,
.contactLists td:last-child{border-right: 0;}
.contactLists td{vertical-align: middle; text-align: left;}
.borderleftno {text-align: center !important;}

/***********************
** contactView
***********************/
.contactView th,
.contactView td {border-top:1px solid #D9DADE; border-bottom:1px solid #D9DADE; border-right:1px solid #D9DADE;}
.contactView{border-collapse: collapse;}
.contactView th:last-child,
.contactView td:last-child{border-right: 0;}
.undLineTxt {text-decoration: underline;}
.contactListBtn {border:1px solid #D9DADE;}

/***********************
** newstList
***********************/
.caseBoxLine {border:1px solid #D9DADE;}
.caseGrid {display: grid; grid-template-columns: repeat(3, 1fr);gap: 24px;row-gap: 40px;}
@media (max-width: 1024px) {.caseGrid { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 767px) {.caseGrid { grid-template-columns: 1fr; }}
.caseItemLink { display:block; text-decoration:none; }
.caseItemImg  { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.newsTit1 {display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-break: keep-all; }
.newsSubTxt2 {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-break: keep-all; }


/***********************
** newstView
***********************/
.casemainTxt img{ width:100%; }
.casemainTxt > *:not(:first-child) img{ margin-top:48px; }
.caseBtnLine {border:1px solid #D9DADE;}
.newsTop {border-bottom:2px solid #26272B;}
.newsNav {border-top: 1px solid #D9DADE; border-bottom: 1px solid #D9DADE;}
.newsNav > .newsLine {border: 0;}
.newsNav > .newsLine + .newsLine {border-top: 1px solid #D9DADE;}
.newsMainTxt div,
.newsMainTxt img{width:100%;}