@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;}
:root { --header-h: 96px; }
html { scroll-padding-top: var(--header-h); }
:is(section, div, article, main)[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: #EDE8F6; color:#6148AF; 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 {position: relative; overflow: hidden;}
.mainBanner img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 2s ease-in-out;}
.mainBanner img.active {opacity: 1; z-index: 2;}



/********** case *********/
.caseCnt1 {background:url('/img/mainCurriculum-001.jpg'); background-position:center center; background-size:cover;}
.caseCnt2 {background:url('/img/mainCurriculum-002.jpg'); background-position:center center; background-size:cover;}
.caseCnt3 {background:url('/img/mainCurriculum-003.jpg'); background-position:center center; background-size:cover;}
.caseCnt4 {background:url('/img/mainCurriculum-004.jpg'); background-position:center center; background-size:cover;}
.caseCnt5 {background:url('/img/mainCurriculum-005.jpg'); background-position:center center; background-size:cover;}
.caseCnt6 {background:url('/img/mainCurriculum-006.jpg'); background-position:center center; background-size:cover;}
.caseCnt1, .caseCnt2, .caseCnt3, .caseCnt4,
.caseCnt5, .caseCnt6 {aspect-ratio: 5 / 4; overflow: hidden; box-sizing: border-box;}
.caseCntLine {border:1px solid #fefefe;}
.case .caseGrid {display: flex; flex-wrap: wrap; justify-content: center; gap:0;}
.case .caseGrid .caseItem {flex: 0 0 33.3333%;}

/********* 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;}


/********** about ***********/
.aboutBanner {background:url('/img/subBanner-001.jpg'); background-position:center center; background-size:cover;}
.aboutCntLine {border-bottom:2px solid #EEEEF0;}
.aboutCntLine1 {border-right:1px solid #D9DADE;}
.aboutService {background: linear-gradient(to bottom, #342654, #26272B);}
.aboutServiceList {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));}

/********** reference_fasionshow ***********/
.referenceBanner {background:url('/img/subBanner-002.jpg'); background-position:center center; background-size:cover;}
.referenceBtnLine {border:1px solid #D9DADE; background:none;}
.referenceBtnLine2 {border:1px solid #D9DADE; background:none;}
.referenceBtnLine {border-right:none;}
.reference .active {background-color: #F5F8F7; color: #5D606C;}
.reference .swiper-button-prev {background: rgba(0,0,0,0.6); left: 0px;}
.reference .swiper-button-next {background: rgba(0,0,0,0.6); right: 0px;}
.reference .swiper-button-prev::after,
.reference .swiper-button-next::after {font-size: 18px; color: #fff;}
.brandlogoBoxLine {border: 1px solid #D9DADE; margin-left: -1px; margin-top: -1px; box-sizing: border-box;}
.reference .fashionShow,
.reference .brandmodel {display: none;}
.reference .tab-on {display: block;}
.brandlogoWrap {display: flex; flex-wrap: wrap;}
.brandlogoWrap .brandlogoItem {box-sizing: border-box; width: 25%;}

/********** curriculum ***********/
.curriculumBanner {background:url('/img/subBanner-003.jpg'); background-position:center center; background-size:cover;}
.curriculumGrid {display: flex; flex-wrap: wrap;}
.curriculumGrid img {width: calc(33.333% - 16px); height: auto; display: block;}
.curriculumGrid2 {display: flex; flex-wrap: wrap;}
.curriculumGrid2 img {width: calc(25% - 18px); height: auto; display: block;}
.curriculumGrid3 {display: flex; flex-wrap: wrap;}
.curriculumGrid3 img {width: calc(33.333% - 16px); height: auto; display: block;}

/********** gallery ***********/
.galleryBanner {background:url('/img/subBanner-004.jpg'); background-position:center center; background-size:cover;}
.inputLine {border:1px solid #D9DADE;}
.btnLine {border:1px solid #B8BAC1;}
.galleryListBtn {border:1px solid #D9DADE; background:none;}
.galleryBottomLine {border-bottom:2px solid #D9DADE;}
.galleryBtnLine {border:1px solid #D9DADE;}
.gallerynextprevBtn {border-top:1px solid #D9DADE; border-bottom:1px solid #D9DADE;}
.gallerynextBtn {border-bottom:1px solid #D9DADE;}
.gallerymainTxt div p img{width:100%;}
.galleryMainGrid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));}
.galleryMainItemLink {display: block; height: 100%; color: inherit; text-decoration: none;}
/********** gallery ***********/
.galleryBanner {
  background: url('/img/subBanner-004.jpg');
  background-position: center center;
  background-size: cover;
}

.galleryMainGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ✅ 카드 링크 전체 */
.galleryMainItemLink {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* ✅ background 이미지용 3:4 비율 고정 박스 */
.galleryThumb {
  width: 100%;
  padding-top: 133.3333%;   /* ✅ 3:4 비율 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}



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

/********* 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-006.jpg'); background-position:center center; background-size:cover;}
.contactBoxLine2 {box-shadow:0 0 8px #D9DADE;}
.input_base {background:#F7F8F8; border:1px solid #D9DADE;}
.text_base {background:#F7F8F8; border:1px solid #D9DADE;}
.policy_check input[type="checkbox"] {position: absolute; opacity: 0; pointer-events: none;}
.policy_check .checkImg {width: 20px; height: 20px; background: url('/img/chkOff.svg') no-repeat center center / contain; display: inline-block; margin-right: 12px;}
.policy_check input[type="checkbox"]:checked + .checkImg {background-image: url('/img/chkOn.svg');}

/*********** contactContactList ********/
.contactTbl tr {border-top:1px solid #D9DADE;}
.contactTbl tr:last-child {border-bottom:1px solid #D9DADE;}
.contactTbl td {border-right:1px solid #D9DADE;}
.contactTbl td:last-child {border-right:none;}

/*********** contactContactView ********/
.contactViewCnt {border-top:1px solid #D9DADE;}
.contactViewCnt:last-child {border-bottom:1px solid #D9DADE;}
.contactBtn {border:1px solid #D9DADE;}



/*********** modelContactWrite ********/
.modelBanner {background:url('/img/subBanner-005.jpg'); background-position:center center; background-size:cover;}
.modelBoxLine {box-shadow:0 0 8px #D9DADE;}
.input_base {background:#F7F8F8; border:1px solid #D9DADE;}
.text_base {background:#F7F8F8; border:1px solid #D9DADE;}
.policy_check input[type="checkbox"] {position: absolute; opacity: 0; pointer-events: none;}
.policy_check .checkImg {width: 20px; height: 20px; background: url('/img/chkOff.svg') no-repeat center center / contain; display: inline-block; margin-right: 12px;}
.policy_check input[type="checkbox"]:checked + .checkImg {background-image: url('/img/chkOn.svg');}

/*********** modelContactList ********/
.modelTbl tr {border-top:1px solid #D9DADE;}
.modelTbl tr:last-child {border-bottom:1px solid #D9DADE;}
.modelTbl td {border-right:1px solid #D9DADE;}
.modelTbl td:last-child {border-right:none;}

/*********** modelContactView ********/
.modelViewCnt {border-top:1px solid #D9DADE;}
.modelViewCnt:last-child {border-bottom:1px solid #D9DADE;}
.modelBtn {border:1px solid #D9DADE;}

/*********** auditionContactWrite ********/
.auditionBanner {background:url('/img/subBanner-005.jpg'); background-position:center center; background-size:cover;}
.auditionBoxLine {box-shadow:0 0 8px #D9DADE;}
.input_base {background:#F7F8F8; border:1px solid #D9DADE;}
.text_base {background:#F7F8F8; border:1px solid #D9DADE;}
.policy_check input[type="checkbox"] {position: absolute; opacity: 0; pointer-events: none;}
.policy_check .checkImg {width: 20px; height: 20px; background: url('/img/chkOff.svg') no-repeat center center / contain; display: inline-block; margin-right: 12px;}
.policy_check input[type="checkbox"]:checked + .checkImg {background-image: url('/img/chkOn.svg');}

/*********** auditionContactList ********/
.auditionTbl tr {border-top:1px solid #D9DADE;}
.auditionTbl tr:last-child {border-bottom:1px solid #D9DADE;}
.auditionTbl td {border-right:1px solid #D9DADE;}
.auditionTbl td:last-child {border-right:none;}

/*********** auditionContactView ********/
.auditionViewCnt {border-top:1px solid #D9DADE;}
.auditionViewCnt:last-child {border-bottom:1px solid #D9DADE;}
.auditionBtn {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;}