@charset "utf-8";

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

@keyframes cropBlink {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}
/********************
** header
********************/
header{left:0;top:0; border-bottom: 1px solid #91949f;}

/********************
** 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 #E70012;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 #E70012, -1px 0 #E70012, -1px 1px #E70012,0 -1px #E70012,   0 1px #E70012,1px -1px #E70012, 1px 0 #E70012,  1px 1px #E70012;}
}
.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;}

/** mainIntro **/
.mainIntro{background:url('/img/companyBg.jpg')bottom center no-repeat; background-size: cover;}
.mainIntroCnt{background-image:url('/img/companyBelt.svg'); background-repeat:repeat-x; background-position-y: bottom; background-color:rgba(0,0,0,0.6); border:1px solid #E70012}
.mainIntroImg1{left:0; top:30dvh}
.mainIntroImg2{left:50%; bottom:0; transform:translateX(-50%)}

/** mainEdu **/
.mainEdu{background-image:url('/img/serviceBg.png'); background-repeat:no-repeat; background-position-y: 20px; background-color:#000}
.mainEduCnt{border:1px solid #E70012}
.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}
.mainEduTuna{left:50%; top:50%; }

/** mainStore **/
.mainStore{background:url('/img/storeBg.jpg')center center }
.mainStorerBox{align-self: stretch;}
.mainStorerCnt{border:1px solid #E70012}
.mainStorerLabel{top:4px; left:50%; transform:translateX(-50%); border:1px solid #E70012; border-radius:50%}
.mainStorerDetail {background:url('/img/storeContBg.jpg')center center no-repeat; background-size:cover}
.mainStorerDetail hr{border:1px dashed #d2d2d3; border-width:1px 0 0 0}
.storeMap{left:0; top:50%; transform:translateY(-50%);background:transparent;}

.mainStore .mainStorerSwiper .swiper-wrapper {transition-timing-function: linear !important;}
.mainStore .mainStorerSwiper .swiper-slide {width: auto;}
.mainStore .mainStorerSwiper .swiper-wrapper{ align-items:stretch !important; } /* 행 높이 강제 */
.mainStore .mainStorerSwiper .swiper-slide{ display:flex; }                    /* 슬라이드가 내부카드 높이 받침 */
.mainStore .mainStorerSwiper .mainStorerBox{ height:auto; box-sizing:border-box; } /* JS가 나중에 100%로 채움 */


/** mainPrice **/
.mainPrice .swiper .swiper-slide{font-size:5.4vmin}
.mainPrice{ background-color:#000;background-image:url('/img/compareBg.jpg'); background-size:cover}
.mainPriceDetail{align-self: stretch;}

.mainPrice .point {color: #000;-webkit-text-stroke: 2px #E70012;}

/* webkit-text-stroke를 지원하지 않는 브라우저 fallback */
@supports not (-webkit-text-stroke: 1px #000) {
.mainPrice .point {color: #000;text-shadow:-1px -1px 0 #E70012,-1px  0px 0 #E70012,-1px  1px 0 #E70012,0px -1px 0 #E70012,0px  1px 0 #E70012,1px -1px 0 #E70012,
  1px  0px 0 #E70012,1px  1px 0 #E70012;}}

.mainPriceSlider1 .swiper-wrapper,
.mainPriceSlider2 .swiper-wrapper{transition-timing-function: linear !important;}
.mainPriceTblCnt p{border:1px solid #91949f; border-width:1px 1px 0 1px}
.mainPriceTblCnt2 p{border:0; border-width:0 0 1px 0}
.mainPriceTblCnt2 p{border-bottom:1px solid #91949f}

.mainPriceTblCnt1 p{border-width:1px 0 0 1px}
.mainPriceTblCnt3 p{border-width:1px 0 0 0px}
.mainPriceTblCnt2{box-shadow:0 0 16px rgba(0,0,0,0.3);border:1px solid #E70012}
.mainPriceCoinIcon1{left:-5dvw;top:0}
.mainPriceCoinIcon2{right:-5dvw;bottom:0}

.mainPrice .swiper { overflow: hidden; }
.mainPrice .swiper-wrapper { display: flex; flex-wrap: nowrap; }
.mainPrice .swiper-slide {flex: 0 0 calc(100% / var(--visible, 8));width: 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; }}

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

.mainFinalSlider .mainFinalSliderImg:nth-child(2){left:-128px}
.mainFinalSlider .mainFinalSliderImg:nth-child(3){left:-256px}
.mainFinalSlider .mainFinalSliderImg:nth-child(4){left:-380px}
.mainFinalSlider .mainFinalSliderImg:nth-child(5){left:-508px}
.mainFinalSlider .mainFinalSliderImg:nth-child(6){left:-636px}
.mainFinalSlider .mainFinalSliderImg:nth-child(7){left:-764px}
.mainFinalSlider .mainFinalSliderImg:nth-child(8){left:-892px}







/* 컬럼 자체는 뷰포트 역할: 넘침 숨김 + 성능 힌트 */
.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/counselBg.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{background:url('/img/counselContBg-002.jpg')center center no-repeat; background-size:cover}
.mainContactForm input[type="text"], .mainContactForm input[type="tel"]{border:1px solid #E70012;}
#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%)}



/********************
** 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/mainBanner.jpg')center center no-repeat; background-size:cover}

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