@charset "utf-8";

/********************
** common
********************/
.crop {
  opacity: 0;
  animation: cropBlink 1s infinite; /* 2초 주기로 반복 */
}

@keyframes cropBlink {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}
/********************
** header
********************/
/* 스크린리더용 숨김 텍스트 */
.srOnly{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.fixCounsel{left:0; right:0; bottom:0;z-index: 9999;}
.fixCounsel__policy{display:flex; align-items:center; gap:8px; flex:0 0 auto;}
.fixCounsel__policyLabel{ display:flex; align-items:center; gap:8px; cursor:pointer; font-size:14px; }
.fixCounsel__policyLink{ font-size:14px; color:#666; text-decoration:underline; }
#policyFix{ position:absolute; left:-99999px; }
#policyFix + label span{display:inline-block; width:20px; height:20px;background:url('/img/chkOff.svg') center center no-repeat; background-size:cover;}
#policyFix:checked + label span{background:url('/img/chkOn.svg') center center no-repeat; background-size:cover;}

.fixCounsel input::placeholder{color:#91949f}
.fixCounsel input[type="text"], .fixCounsel input[type="tel"]{border:1px solid #9a7b5c}

/********************
** index
********************/
/** mainBanner **/
.mainBanner .inner{background:url('/img/mainBg.jpg')center center; background-size:cover;}
.mainBannerSlider{top:0; left:5dvw; user-select: none;-webkit-user-select: none; /* Safari */ -moz-user-select: none;-ms-user-select: none;}
.mainBannerSlider1{margin-left:0 !important}
.mainBannerSlider2{margin-right:0 !important}
.mainBannerSlider .point{-webkit-text-fill-color: transparent;color: transparent !important;-webkit-text-stroke: 2px #2E5755;text-shadow: none !important;}
@supports not (-webkit-text-stroke: 1px #000) {
.mainBannerSlider .point{-webkit-text-fill-color: transparent;color: transparent !important;text-shadow: -1px -1px #2E5755, -1px 0 #2E5755, -1px 1px #2E5755,0 -1px #2E5755,   0 1px #2E5755,1px -1px #2E5755, 1px 0 #2E5755,  1px 1px #2E5755;}
}
.mainBannerSlider1 .swiper-wrapper,
.mainBannerSlider2 .swiper-wrapper{
  transition-timing-function: linear !important;
}
.mainBannerSlider p{white-space: nowrap; font-size:5.8vmin; writing-mode: vertical-rl;  text-orientation: mixed; transform: rotate(180deg) !important;}
.mainBannerBg1 {top:0;}
.mainBannerBg2 {bottom:0;}
.mainBanner .inner p{text-shadow:0 0 8px #e0d9c8}

/** mainIntro **/
.mainIntro{background:url('/img/aboutBg.jpg')center; background-size: cover; overflow:hidden}
.mainIntroCnt{background-image:url('/img/companyBelt.svg'); background-repeat:no-repeat; background-position-y: bottom; border:1px solid #2E5755}
.mainIntroImg1{left:0; bottom:0;}
.mainIntroImg2{bottom: 0;}

/** mainEdu **/
.mainEdu{background-image:url('/img/serviceBg.png'); background-size:cover; background-position:center; background-repeat:no-repeat; background-position-y: 20px; background-color:#000}
.mainEduCnt{border:1px solid #91949F}
.mainEduCnt1{background:url('/img/serviceImg-001.jpg')center center no-repeat; background-size:cover}
.mainEduCnt2{background:url('/img/serviceImg-002.jpg')center center no-repeat; background-size:cover}
.mainEduCnt3{background:url('/img/serviceImg-003.jpg')center center no-repeat; background-size:cover}
.mainEduCnt4{background:url('/img/serviceImg-004.jpg')center center no-repeat; background-size:cover}
.mainEduCntImg, .filterBg{top:0; left:0;}
.mainEduCnt2 .mainEduCntImg, .mainEduCnt4 .mainEduCntImg{right:0; left:initial}
.mainEduCntLabel{left:32px; top:32px}
.mainEdu .active{background:rgba(18,124,113,0.8)}
.mainEdu .active .mainEduCntLabel{color:#b5dad4}
.mainEduTuna{position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); transform-origin: 50% 100%; animation: rolypoly 3.6s ease-in-out infinite; will-change: transform;}
@keyframes rolypoly {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  12%  { transform: translate(-50%, -50%) rotate(-8deg); }
  24%  { transform: translate(-50%, -50%) rotate( 6deg); }
  36%  { transform: translate(-50%, -50%) rotate(-4deg); }
  48%  { transform: translate(-50%, -50%) rotate( 2.5deg); }
  60%  { transform: translate(-50%, -50%) rotate(-1.5deg); }
  72%  { transform: translate(-50%, -50%) rotate( 1deg); }
  84%  { transform: translate(-50%, -50%) rotate(-0.6deg); }
  92%  { transform: translate(-50%, -50%) rotate( 0.3deg); }
  100% { transform: translate(-50%, -50%) rotate( 0deg); }
}
@media (prefers-reduced-motion: reduce){.mainEduTuna{ animation: none; }}
/********************
** edu image swing (pivot: center center)
********************/
.mainEduImg {
  transform-origin: top center;   /* 중앙 고정점 */
  animation: eduSwing 2.4s ease-in-out infinite;
  will-change: transform;
  display: block;
}

@keyframes eduSwing {
  0%   { transform:  rotate(0); }
  50%  { transform:  rotate(4deg); }
  100% { transform:  rotate(0); }
}

/********************
** motion reduce (접근성)
********************/
@media (prefers-reduced-motion: reduce){
  .mainEduImg { animation: none; }
}



/** mainMenu **/
.mainMenu{background:url('/img/menu.jpg'); background-position:center; background-size:cover;}
.mainMenuBtn {border:1px solid #2E5755;}
.mainMenu { background:url('/img/menu.jpg') center/cover no-repeat; }
.mainMenu__tabs { gap:0; }
.mainMenuBtn { border:1px solid #2E5755; background:#fff; color:#2E5755; line-height:1; }
.mainMenuBtn + .mainMenuBtn { margin-left:-1px; }
.mainMenuBtn.is-active { background:#2E5755 !important; color:#F7F8F8 !important; }
.mainMenuBtn:focus-visible { outline:2px solid #2E5755; outline-offset:2px; }
.menuCard { width:auto; } /* 고정폭 제거 → Swiper의 spaceBetween=24 정확히 반영 */
.menuCard__media {width:100%; aspect-ratio:4/3; overflow:hidden;}
.menuCard__img {width:100%; height:100%; object-fit:cover; display:block; border:1px solid #2E5755;}
.mainMenu__sliderWrap { position:relative; --nav-top: 50%; } /* JS가 --nav-top을 업데이트 */
.mainMenuSwiper .swiper-wrapper { transition-timing-function: linear !important; }
.mainMenuNav {position:absolute; top:var(--nav-top); transform:translateY(-50%); width:64px; height:64px; display:flex; align-items:center; justify-content:center;z-index:10; background:none; border:0; padding:0;}
.mainMenuBtnPrevNext img{filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.25)); -webkit-filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.25));}
@media (max-width: 1200px){.mainMenuNav { width:44px; height:44px; }}
@media (max-width: 768px){.mainMenuNav { width:40px; height:40px; }}
.mainMenuBtnPrevNext {background:none;}
.mainMenuBtnPrevNext img{-webkit-filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.25));filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.25));}
.mainMenuPrev {top:30%; left:-32px; transform:translateY(-30%)}
.mainMenuNext {top:30%; right:-32px;transform:translateY(-30%)}
.menuBoxLine {border:1px solid #2E5755; box-shadow: 8px 8px 2px rgba(0,0,0,0.25);}

/** interior **/
.interior {background-image:url('/img/interiorBg.jpg'); background-position:center; background-size:cover;}
.interior__wrap { position: relative; }
.interiorSwiper { width: 100%; }
.interiorSwiper .swiper-wrapper { transition-timing-function: linear; }
.interior__img{width:100%;height:auto;object-fit: cover;display:block;}
.interior__counter{display:flex; align-items:center; justify-content:center; font-feature-settings: "tnum" 1, "lnum" 1; color: rgba(255,255,255,0.75);}
.interior__current, .interior__total{text-align: center;}
.interior--light .interior__counter{color: rgba(0,0,0,0.7);}
.interior--light .interior__divider{background: rgba(0,0,0,0.25);}
@media (max-width: 768px){.interior__divider{ width: 56px; }}

/** review **/
.review {background:url('/img/reviewBg.jpg'); background-position:center; background-size:cover;}
.reviewBgIcon {bottom:0; left:50%; transform:translateX(-50%)}
.review{background:url('/img/reviewBg.jpg') center/cover no-repeat;position: relative;}

.reviewSwiper .swiper-slide{height: auto; display: flex; }
.reviewCard{display: flex; flex-direction: column; height: 100%;}

/** marketing **/
.marketing__grid{display:grid;grid-template-columns:1fr 1fr;}
.ytWrap{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;}
.ytWrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
@media (max-width: 992px){ .marketing__grid{grid-template-columns:1fr;} }


/** mainPrice **/
#mainPrice{background:url('/img/priceBg.jpg')center center; background-size:cover}
.mainPrice .swiper .swiper-slide{font-size:4vmin}
.mainPrice .point {color: transparent;-webkit-text-stroke: 1px #F7F8F8;}

/* webkit-text-stroke를 지원하지 않는 브라우저 fallback */
@supports not (-webkit-text-stroke: 1px #000) {
.mainPrice .point {color: transparent;text-shadow:-1px -1px 0 #F7F8F8,-1px  0px 0 #F7F8F8,-1px  1px 0 #F7F8F8,0px -1px 0 #F7F8F8,0px  1px 0 #F7F8F8,1px -1px 0 #F7F8F8,
  1px  0px 0 #F7F8F8,1px  1px 0 #F7F8F8;}}
.mainPriceSlider1 .swiper-wrapper,
.mainPriceSlider2 .swiper-wrapper{transition-timing-function: linear !important;}
.mainPrice .swiper { overflow: hidden; }
.mainPrice .swiper-wrapper { display: flex; flex-wrap: nowrap; }
.mainPrice .swiper-slide {flex: 0 0 calc(100% / var(--visible, 8));white-space: nowrap;text-align: center;}
.mainPriceSlider1 .swiper-wrapper {  animation: mp-right var(--dur, 20s) linear infinite;  will-change: transform;}
.mainPriceSlider2 .swiper-wrapper {  animation: mp-left var(--dur, 20s) linear infinite;  will-change: transform;}
@keyframes mp-left  { from { transform: translateX(0);    } to { transform: translateX(-50%); } }
@keyframes mp-right { from { transform: translateX(-50%); } to { transform: translateX(0);    } }
@media (prefers-reduced-motion: reduce) {  .mainPriceSlider1 .swiper-wrapper,  .mainPriceSlider2 .swiper-wrapper { animation: none !important; }}

.mainPriceBg{background-image: linear-gradient(180deg, #FFFFFF 0%, #EEEEF0 100%);}
.PricefootBg {background-image: linear-gradient(to right, #94702D 0%, #6A3B1A 100%);}
.PricebodyLine td{border:1px solid #B8BAC1;}

/** mainFinal **/
.mainFinalImg{border:1px solid #F7F8F8}
.mainFinalSlider{bottom:0;left:0}
:root { --mf-col-h: 800px; }



.mainFinal{
  --bg: #f0ede4;                 /* 배경색 */
  --dot: rgba(0,0,0,.06);        /* 도트 색(투명도 조절) */
  --size: 8px;                   /* 타일 크기 (값 키우면 도트 간격 커짐) */
  --posX: -50%;                  /* 오프셋 X */
  --posY: -50%;                  /* 오프셋 Y */

  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 0.6px, transparent 0.6px);
  background-size: var(--size) var(--size);
  background-position: var(--posX) var(--posY);
}

.mainPriceBoxLine {box-shadow:0 4px 4px rgba(0,0,0,0.25);}



/* 컬럼 자체는 뷰포트 역할: 넘침 숨김 + 성능 힌트 */
.mainFinal .mainFinalLeft,
.mainFinal .mainFinalRight {
  position: relative;
  overflow: hidden;
  max-height: var(--mf-col-h);
}

/* 트랙(실제으로 움직이는 요소) — JS가 생성합니다 */
.mainFinal .mainFinalLeft .mfTrack,
.mainFinal .mainFinalRight .mfTrack {
  display: flex;
  flex-direction: column;
  gap: inherit;               /* 부모(.mainFinalLeft/Right)의 wg24 간격 계승 */
  will-change: transform;
}

/* 애니메이션 공통 */
.mainFinal .mainFinalLeft .mfTrack.is-marquee,
.mainFinal .mainFinalRight .mfTrack.is-marquee {
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: var(--marquee-duration, 30s);
}

/* 방향 지정: 좌는 위로, 우는 아래로 */
.mainFinal .mainFinalLeft .mfTrack.is-marquee { animation-name: mf-marquee-up; }
.mainFinal .mainFinalRight .mfTrack.is-marquee { animation-name: mf-marquee-down; }

/* 호버 시 일시정지 */
.mainFinal .mainFinalLeft:hover .mfTrack,
.mainFinal .mainFinalRight:hover .mfTrack { animation-play-state: paused; }

/* 키프레임: seam(원본 세트 높이)만큼 이동 */
@keyframes mf-marquee-up {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-1 * var(--marquee-seam, 1000px))); }
}
@keyframes mf-marquee-down {
  from { transform: translateY(calc(-1 * var(--marquee-seam, 1000px))); }
  to   { transform: translateY(0); }
}

/* 모션 민감 사용자 배려 */
@media (prefers-reduced-motion: reduce) {
  .mainFinal .mainFinalLeft .mfTrack,
  .mainFinal .mainFinalRight .mfTrack {
    animation: none !important;
    transform: none !important;
  }
}



/* 컨테이너 클리핑 */
.mainFinal .mainFinalSlider {
  overflow: hidden;
}

/* 트랙: JS로 생성해서 감싸는 부분 */
.mainFinal .mainFinalSlider .mfHTrack {
  display: flex;
  align-items: center;
  will-change: transform;
}

/* 자식(이미지) 줄바꿈 방지 */
.mainFinal .mainFinalSlider .mfHTrack > * {
  flex: 0 0 auto;
  position: relative; /* 겹치기용 left 오프셋 적용 가능 */
}

/* 애니메이션: 오른쪽(→)으로 이동 */
.mainFinal .mainFinalSlider .mfHTrack.is-marquee {
  animation: mf-x-right var(--marquee-x-duration, 30s) linear infinite;
}

/* 호버 시 일시정지 */
.mainFinal .mainFinalSlider:hover .mfHTrack {
  animation-play-state: paused;
}

/* 키프레임: -seam → 0 (→ 방향) */

@keyframes mf-x-right {
  from { transform: translateX(-892px); }
  to   { transform: translateX(0); }
}

/* 모션 민감 사용자 배려 */
@media (prefers-reduced-motion: reduce) {
  .mainFinal .mainFinalSlider .mfHTrack {
    animation: none !important;
    transform: none !important;
  }
}

/** contact **/
.mainContact{background:url('/img/contactBg.jpg')center center; background-size:cover}
.mainContactCnt{background:url('/img/counselContBg-001.jpg'); background-size:cover}
.mainContact hr{border:1px dashed #d9dade; border-width:1px 0 0 0 }
.mainContactForm {border:1px solid #26272B;}
.mainContactForm input, textarea, select{border:1px solid #91949F;}
#policy{left:-999999px}
#policy + label span{background:url('/img/chkOff.svg')center center no-repeat; background-size:cover;}
#policy:checked + label span{background:url('/img/chkOn.svg')center center no-repeat; background-size:cover;}

.mainContactFormLabel{left:50%; top:-40px; transform:translateX(-50%)}
/* 셀렉트 화살표 (arrow.svg 사용) */
.selectWrap { position: relative; }
.selectArrow {
  appearance: none;
  -webkit-appearance: none;
  background-image: url('/img/arrow.svg');
  background-repeat: no-repeat;
  background-position: right 12px center; /* 아이콘 위치 */
  background-size: 18px auto;             /* 아이콘 크기 */

}

/* 토글 버튼 active 상태 */
.btnToggle.is-active {
  background: #26272B !important;
  color: #F7F8F8 !important;
}

/* 키보드 포커스 접근성(선택) */
.selectArrow:focus-visible,
.btnToggle:focus-visible {
  outline: 2px solid #26272B;
  outline-offset: 2px;
}




/********************
** contactList
********************/
.contactTbl td{border:1px solid #d9dade}


/********************
** contactView
********************/
.contactViewCnt p:nth-child(1){border-top:1px solid #d9dade}
.contactViewCnt p:nth-child(2){border-top:1px solid #eeeef0}
.contactViewBox .contactViewCnt:nth-last-child(1) p:nth-child(1){border-bottom:1px solid #d9dade}
.contactViewBox .contactViewCnt:nth-last-child(1) p:nth-child(2){border-bottom:1px solid #eeeef0}
.contactBtn{border:1px solid #d9dade}


/********************
** policy
********************/
.policyTit{border-bottom:1px solid #26272b}

/********************
** login
********************/
.login{background:url('/img/serviceBg.jpg')center center no-repeat; background-size:cover}

/********************
** adminMenu
********************/
.adminMenu{box-shadow:0 0 8px rgba(0,0,0,0.25)}