:root{
    --bg-dark:#0c0c0e;
    --bg-dark-2:#141416;
    --gold:#e5a83c;
    --gold-2:#f0b94c;
    --white:#ffffff;
    --gray:#b7b7bb;
    --gray-2:#8a8a8f;
	--cream:#f7f5f1;
    --border:rgba(255,255,255,0);
	--rect-w: 300px;
	--rect-h: 400px;
	--line-color: #ffffff;
	--line-width: 1px
  }


  .site-header{position:fixed;height:120px;top:0;left:0;right:0; z-index:1000; display:flex;align-items:center; justify-content:space-between; padding:18px 24px;
    background:linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.2) 100%); transition:background .3s ease, box-shadow .3s ease; border-bottom:1px solid rgba(255,255,255,.1)}

  .site-header.scrolled { background:#0e0e10; box-shadow:0 1px 0 rgba(255,255,255,0.06), 0 6px 20px rgba(0,0,0,0.35);  }

  .logo{display:flex;align-items:center; gap:10px;}
  .logo-icon{width:80px; display:flex;align-items:center;justify-content:center; flex-shrink:0;}
  .logo-icon svg{width:100%;height:100%;}
  .logo-text{display:flex;flex-direction:column;line-height:1.15;}
  .logo-text .brand{ font-size:18px; font-weight:800; letter-spacing:0.5px; color:var(--white); }
  .logo-text .tagline{ font-size:10.5px; font-weight:500; letter-spacing:2px; color:var(--gold);}

  /* Desktop nav */

  .nav-desktop{ display:none; align-items:center;  gap:60px;padding-left:6vw}
  .nav-desktop a{ font-size:15px; font-weight:500;  color:var(--white);  letter-spacing:0.3px;  transition:color .2s ease; }
  .nav-desktop a.active, .nav-desktop a:hover{color:var(--gold);}

  .header-right {display:flex; align-items:center;}

  .phone-btn {display:none; align-items:center; gap:8px; background:var(--gold); color:#1a1305;  font-weight:700;  font-size:14px; padding:11px 20px; border-radius:6px; letter-spacing:0.3px;    white-space:nowrap;}
  .phone-btn svg{width:15px;height:15px;flex-shrink:0;}


  .test-btn{ display:none; align-items:center; gap:8px; background:#34a969; color:#eee;  font-weight:700;  font-size:14px; padding:11px 20px; border-radius:6px; letter-spacing:0.3px;    white-space:nowrap; }
  .test-btn svg{width:15px;height:15px;flex-shrink:0;}


  /* hamburger (mobile) */
  .menu-toggle{width:48px;height:48px;border:1.5px solid var(--border); border-radius:8px; display:flex;align-items:center;justify-content:center; color:black;flex-shrink:0;}
  .menu-toggle svg{width:20px;height:20px;}

  /* ---------- MOBILE MENU OVERLAY ---------- */
  .mobile-menu{position:fixed; inset:0; z-index:2000; background:linear-gradient(160deg,#141416 0%, #0c0c0e 60%); display:flex; flex-direction:column; transform:translateX(100%);  transition:transform .35s ease;}
  .mobile-menu.open{transform:translateX(0);}

  .mobile-menu-header{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid rgba(255,255,255,0.08);}



  .mobile-close{width:44px;height:44px; border:1.5px solid var(--border); border-radius:8px; display:flex;align-items:center;justify-content:center;  color:black;}
  .mobile-close svg{width:18px;height:18px;}

  .mobile-menu-list{  flex:1; padding-top:8px; }
  .mobile-menu-list li a{display:block; padding:20px 24px; font-size:19px;  font-weight:600;  color:var(--gray);  border-left:3px solid transparent; }
  .mobile-menu-list li a.active{color:var(--gold); background:rgba(255,255,255,0.04); border-left:3px solid var(--gold);}

  .mobile-phone-btn{display:flex; align-items:center;  justify-content:center;  gap:10px;  margin:16px 20px 28px;  background:var(--gold);  color:#1a1305; font-weight:700; font-size:17px;
    padding:16px;  border-radius:8px;}
  .mobile-phone-btn svg{width:17px;height:17px;}

    .mobile-test-btn{display:flex; align-items:center;  justify-content:center;  gap:10px;  margin:16px 20px 28px;  background:#34a969;  color:#eee; font-weight:700; font-size:17px;
    padding:16px;  border-radius:8px;}
  .mobile-test-btn svg{width:17px;height:17px;}

 /******mobile 수정*****/

  @media (max-width:1023px){
   .site-header{padding:18px 20px;;height:80px;}
   .mobile-menu-header{padding:18px 20px;height:80px;}
  .logo-text .brand{ font-size:14px; }
  .logo-text .tagline{ font-size:10px; }

   }


  /* ---------- DESKTOP BREAKPOINT ---------- */


  @media (min-width:1024px){
    .nav-desktop{display:flex;margin-left:-6vw;}
    .phone-btn{display:flex;}
    .menu-toggle{display:none;}
    .test-btn{display:flex;margin-right:10px;}
    .hero{
      padding:0 64px;
      justify-content:center;
      min-height:100vh;
    }
    .eyebrow{margin-bottom:26px;}
    .hero h1{font-size:64px;max-width:760px;}
    .hero p{font-size:16px;margin-top:22px;}
    .hero-actions{margin-top:36px;}
    .hero-stats{
      grid-template-columns:repeat(4,auto);
      gap:0;
      max-width:640px;
      margin-top:80px;
      padding-top:28px;
    }
    .stat{padding-right:48px;}
    .stat b{font-size:22px;}
  }

  /* ---------- 스크롤 데모용 하단 섹션 ---------- */
  .below-section{
    background:#f4f2ec;
    color:#111;
    padding:100px 24px;
  }
  .below-section h2{
    font-size:26px;
    font-weight:800;
    margin-bottom:16px;
  }
  .below-section p{
    color:#555;
    max-width:640px;
    line-height:1.7;
  }







/******************common sub************************/

.content {position:relative;min-height:80vh;width:100%;}
.container {min-height:70vh;}

/******************************video***********************/
  /* 영상을 담는 컨테이너 - 화면 전체를 차지 */
  .video-bg {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;overflow: hidden;z-index:1 !important;}

  /* 16:9 비율 유지하면서 화면을 꽉 채우도록 확대 + 중앙정렬 */
  .video-bg iframe {position: absolute;top: 50%;left: 50%;width: 100vw;height: 56.25vw;   /* 16:9 비율 기준 (100 / 16 * 9) */
    min-height: 100vh;min-width: 177.78vh; /* 16:9 비율 기준 (100 / 9 * 16) */
    transform: translate(-50%, -50%);pointer-events: none; /* 클릭/컨트롤 조작 막고 순수 배경으로만 사용 */
  }
  .vide-bg iframe {z-index:1 !important;}

  /* 검정 반투명 오버레이 */
  .overlay02 {position: fixed;top: 0;left: 0;width: 100%;height: 100%;min-height:100%;background-color: rgba(0, 0, 0,1);animation: fadeBg 1s ease forwards;z-index:2 !important;}

@keyframes fadeBg {
  from {background-color: rgba(0, 0, 0, 0.9)}
  to {background-color: rgba(0, 0, 0, 0.3)}
}


  .content h1 {font-size: 42px;font-weight: 700;letter-spacing: 1px;text-shadow: 0 2px 10px rgba(0,0,0,0.5)}

  ul li {color:black;}

/******************************main move*****************************/

  .video-wrap {z-index:-1 !important; position: relative;width: 100vw;height: 100vh; overflow: hidden;}
  .video-wrap video {z-index:-1 !important; position: absolute; top: 50%;left: 50%;min-width: 100%;min-height: 100%;width: auto;height: auto;
    transform: translate(-50%, -50%); object-fit: cover;}
	

.main {position:absolute;top:0;height:0;width:100%;max-width:100%;z-index:999 !important;height:100%;}
.stage {margin-top:50vh;position:relative;width:100%;max-width:100%;z-index:99 !important;;}




a .rect:hover .txt .en, a .rect:hover .txt .kr {color:var(--gold) !important;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);}

.rect .rect-bg {position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);;}
.rect:hover .rect-bg {background:rgba(0,0,0,.2);}



.r0  {background:url(/images/nbgm01.jpg) center center no-repeat;background-size:cover;  filter: opacity(93%);}
.r1  {background:url(/images/nbgm02.jpg) center center no-repeat; background-size:cover; filter: opacity(93%);}
.r2  {background:url(/images/nbgm03.jpg) center center no-repeat; background-size:cover;filter: opacity(93%);}
.r3  {background:url(/images/nbgm04.jpg) center center no-repeat; background-size:cover; filter: opacity(93%);}




  /* ===== 사각형 안의 텍스트===== */

  .txt {opacity: 0;color: #ffffff;text-align: center;animation: fade-up 0.8s ease forwards;animation-delay: 1.9s; /* 사각형 이동(1.8s) 끝난 직후 등장 */ }
  .en {font-size: 20px;font-weight:800;;color:#fff;margin-bottom: 14px;text-transform: uppercase;}
  .kr {font-size: 1em;color:#cccccc;}
  @keyframes fade-up {from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }






  /* ===== 사각형 크기/색 조절 ===== */

  .rect {position: absolute;top: 50%;width: var(--rect-w);height: var(--rect-h);border: var(--line-width) solid var(--line-color);transform: translate(-50%, -50%);opacity: 0;display: flex;flex-direction: column;justify-content: center;align-items: center;animation-fill-mode: forwards;animation-timing-function: ease-in-out;animation-duration: 1.8s;/*background:rgba(0,0,0,0.2);background: transparent;*/}


  /* r0: 왼쪽에서 새로 튀어나오는 사각형 (더 바깥쪽으로 이동) */
  @keyframes r0 {0%   { left: 50%;   opacity: 0; }
    5%   { left: 50%;   opacity: 1; }
    45%  { left: 37.5%; opacity: 1; }
    55%  { left: 37.5%; opacity: 1; }
    95%  { left: 12.5%; opacity: 1; }
    100% { left: 12.5%; opacity: 1; }
  }
  /* r1: 1차 분열된 왼쪽 사각형 - 37.5% 도착 후 위치 그대로 고정 */
  @keyframes r1 {0%   { left: 50%;   opacity: 0; }
    5%   { left: 50%;   opacity: 1; }
    45%  { left: 37.5%; opacity: 1; }
    100% { left: 37.5%; opacity: 1; }
  }
  /* r2: 1차 분열된 오른쪽 사각형 - 62.5% 도착 후 위치 그대로 고정 */
  @keyframes r2 {0%   { left: 50%;   opacity: 0; }
    5%   { left: 50%;   opacity: 1; }
    45%  { left: 62.5%; opacity: 1; }
    100% { left: 62.5%; opacity: 1; }
  }
  /* r3: 오른쪽에서 새로 튀어나오는 사각형 (더 바깥쪽으로 이동) */
  @keyframes r3 {0%   { left: 50%;   opacity: 0; }
    5%   { left: 50%;   opacity: 1; }
    45%  { left: 62.5%; opacity: 1; }
    55%  { left: 62.5%; opacity: 1; }
    95%  { left: 87.5%; opacity: 1; }
    100% { left: 87.5%; opacity: 1; }
  }

  .r0 { animation-name: r0; }
  .r1 { animation-name: r1; }
  .r2 { animation-name: r2; }
  .r3 { animation-name: r3; }



  /* ===== 모바일 반응형 (768px 이하) ===== */

  @media (max-width: 768px) {
    .stage { display: grid;  grid-template-columns: repeat(2, 1fr);  grid-template-rows: repeat(2, 1fr);  align-items: center;  justify-items: center;  gap: 20px;  padding: 20px; margin-top:0vh;margin-top:30vh;}
    .rect {  position: static; top: auto;  left: auto;  transform: none;  width: 150px;  height: 150px;  opacity: 0;  animation: mobile-appear 0.6s ease forwards;background:none !important; }
    .kr a {color:#fff !important;}

    @keyframes mobile-appear {  from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* 순서대로 하나씩: 위 2개(0.2s, 0.9s) -> 아래 2개(1.6s, 2.3s) */
    .rect:nth-of-type(1) { animation-delay: 0.2s; }
    .rect:nth-of-type(2) { animation-delay: 0.9s; }
    .rect:nth-of-type(3) { animation-delay: 1.6s; }
    .rect:nth-of-type(4) { animation-delay: 2.3s; }

    /* 각 사각형 안의 텍스트도 해당 사각형이 등장한 직후에 나타나도록 */
    .rect:nth-of-type(1) .txt { animation-delay: 0.9s; }
    .rect:nth-of-type(2) .txt { animation-delay: 1.6s; }
    .rect:nth-of-type(3) .txt { animation-delay: 2.3s; }
    .rect:nth-of-type(4) .txt { animation-delay: 3.0s; }
  }

a {color:#000;text-decoration:none;}



/*******************************SUB*********************************/


/*=====subtop=====*/


.subtop04 {background:url(/images/sub_bg03.jpg) right center no-repeat;height:40vh;min-height:400px;background-size:cover;}
.subtop04 .subtop-inner  .subtop-title {font-size:2em;padding-top:200px;font-weight:700;position:relative;}
.subtop04 .subtop-inner  .subtop-title::after {content:'';position:absolute;height:1px;background:rgba(255,255,255,.3);width:200px;bottom:0;left:calc(50% - 100px);}
.subtop04 .subtop-kr {position:relative;font-size:1.6em;color:var(--gold);font-weight:100;margin-top:30px;}



.subtop {position:relative;color:#fff;width:100vw;max-width:100%;}
.subtop .subtop-inner  .subtop-title {font-size:2em;padding-top:200px;font-weight:700;position:relative;}
.subtop .subtop-inner  .subtop-title::after {content:'';position:absolute;height:1px;background:rgba(255,255,255,.3);width:200px;bottom:0;left:calc(50% - 100px);}
.subtop .subtop-kr {position:relative;font-size:1.6em;color:var(--gold);font-weight:100;margin-top:30px;}


.subtop01 {background:url(/images/sub_bg01.jpg) right center no-repeat;height:40vh;min-height:400px;background-size:cover;}'
.subtop01 .subtop-inner  {font-size:2em;padding-top:200px;font-weight:700;position:relative;}



.bsubtop   {position:relative;color:#fff;width:100vw;max-width:100%;height:40vh;min-height:400px;background-size:cover;}
.bsubtop .subtop-inner  .subtop-title {font-size:2em;font-weight:700;position:relative;padding-top:200px;}
.bsubtop .subtop-inner  .subtop-title::after {content:'';position:absolute;height:1px;background:rgba(255,255,255,.3);width:200px;bottom:0;left:calc(50% - 100px);}
.bsubtop .subtop-kr {position:relative;font-size:1.6em;color:var(--gold);font-weight:100;margin-top:30px;}



@media  (max-width:768px) {
.subtop {height:30vh;}
.subtop .subtop-inner  .subtop-title {padding-top:120px;}
.bsubtop .subtop-inner  .subtop-title {padding-top:120px;}
.subtop04 .subtop-inner  .subtop-title {padding-top:120px;}
}




@media  (max-width:768px) {
.subtop {height:30vh;}
}


/*=====sub list=====*/

.image-grid {display: flex; flex-wrap: wrap; gap: 40px 25px;;  width: 100%;  max-width: 1200px;  margin: 0 auto;   }
.image-item { flex: 0 0 calc(33.25% - (30px * 2 / 3));  box-sizing: border-box;margin-bottom:30px;}
/* 3. 이미지 자체 비율 맞추기 */
.image-item img { width: 100%; height: auto; display: block; border-radius: 8px;  object-fit: cover;}



/*=====sub bg======*/
.cont {position:relative;width:100%;}

.cont-top {width:100%;;z-index:99 !important;text-align:center;position:relative;}
.cont-top h1 {color:#fff;margin-top:100px;font-size:2em;}
.cont-top h3 {font-weight:100;margin:20px 0 50px 0;}
.cont-top span {padding:10px;color:#fff;border:1px solid #fff;margin:30px;font-size:1.1em;min-width:150px;display:inline-block;}

 @media (max-width: 768px) {
.cont-top span {width:70%;margin:5px auto;}
.cont-top h1 {margin-top:0px}
.cont-top h3 {margin:10px 0 10px 0;}
  }




.list-img {position:relative;max-width:100%}
.list-img img {max-width:100%;}



/*============sub-company=============*/

   /* ==== MISSION ========= */
  .mission{padding:80px 24px;}
  .mission-inner{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:40px;}
  .mission-text p{line-height:1.8;margin-top:16px;max-width:520px;}
  .mission-image{position:relative}
  .mission-image img{width:100%;border-radius:4px;object-fit:cover;aspect-ratio:16/10;}
  .mission-badge{position:absolute;left:24px;bottom:-24px;background:var(--gold);color:#1a1305;padding:14px 22px;border-radius:4px;line-height:1.3;}
  .mission-badge b{display:block;font-size:24px;font-weight:800;}
  .mission-badge span{display:block;;font-weight:600;}

  @media (min-width:1024px)  {
  .mission-inner{  flex-direction:row;  align-items:center;  gap:64px;}.mission-text{flex:0 0 42%;}.mission-image{flex:1;}.section-title{font-size:34px;}
  }

  /* ===== HISTORY ====== */
  .history{background:var(--cream);padding:90px 24px 100px}
  .history-inner{max-width:1000px;margin:0 auto}
  .timeline{display:flex;flex-direction:column}
  .timeline-row{display:grid;grid-template-columns:48px 20px 1fr;align-items:center;column-gap:14px;padding:11px 0}
  .timeline-year{font-weight:800;color:var(--gold);text-align:right}
  .timeline-dot-wrap{display:flex;justify-content:center;position:relative;align-self:stretch}
  .timeline-dot-wrap::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(0,0,0,0.1)}
  .timeline-row:first-child .timeline-dot-wrap::before{top:50%;}
  .timeline-row:last-child .timeline-dot-wrap::before{bottom:50%;}
  .timeline-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);position:relative;z-index:1;margin-top:0;align-self:center}
  .timeline-content{background:#fff;border-radius:6px;padding:16px 20px;font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,0.04)}

  /* ===== CERTIFICATIONS ===== */
  .certs{padding:90px 24px 110px;}
  .certs-inner{max-width:1200px;margin:0 auto;}
  .cert-grid{display:grid;grid-template-columns: repeat(4, 1fr);gap:14px;}
  .cert-card{background:var(--card);border-radius:6px;padding:22px 22px;background:var(--cream);}
  .cert-year{font-size:12px;font-weight:700;color:var(--gold);letter-spacing:0.5px;margin-bottom:8px}
  .cert-name{font-size:16px;font-weight:800;margin-bottom:6px}
  .cert-desc{font-size:12.5px;color:var(--gray-light)}

  @media (max-width:768px){
  .cert-grid{grid-template-columns:repeat(2,1fr);}
  }


  /*******************board******************/
  
  @keyframes zoom-in {
    from { transform: scale(1); }
    to   { transform: scale(1.15); }
  }


.cont-box div {max-width: 100vw;}
.cont-box div div {border-radius:10px;overflow:hidden;;padding:15px;}
.cont-box div div p{padding:20px;}
.cont-box .fxwrap{background:rgba(255,255,255,.95);}
.cont-box .fxwrap:hover {background:rgba(255,255,255,.6);}
.cont-box div div img {border-radius:10px !important;overflow:hidden;}

.cont-box div div p .plist01 a {color:#fff !important;}
.cont-box div div p .plist02 {font-weight:800;font-size:1.1em;}
.cont-box div div p .plist03 {font-size:12px;font-weight:100;}
.cont-box div div p .plist04 {font-size:12px;font-weight:100;}

@media (max-width:1024px) {
.cont-box div div {padding:5px;}
.cont-box div div p{padding:5px;}
}

 .b-cont {width:1200px;margin:0 auto;min-height:400px;margin-top:0vh;}   


.sub02-bg {position: fixed; top: 0;left: 0;width: 100vw;height: 100vh;z-index: -1; background:url('/images/subbg02.jpg') center bottom no-repeat; background-size: cover; ; transform: scale(1);animation: zoom-in 10s ease-out forwards;}

.sub02-top {display:grid; grid-template-columns: repeat(3, 1fr); gap:2%; width:1250px;max-width:100%;color:white;margin: 0 auto;  justify-content: space-between;}
.sub02-top > div:nth-child(1) {background:var(--gold);}
.sub02-top > div:nth-child(2) {position:relative;}
.sub02-top > div:nth-child(2)::after {content:'';position:absolute;right:-30px;bottom:-50px;;width:150px;height:150px;background:url(/images/energy.png) center center no-repeat;background-size:cover;}
.sub02-top > div:nth-child(3) {background:rgba(0,0,0,.2)}
.sqc h2 {text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);}



.sub03-bg {position: fixed; top: 0;left: 0;width: 100vw;height: 100vh;z-index: -1; background:url('/images/subbg03.jpg') center bottom no-repeat; background-size: cover; ; transform: scale(1);animation: zoom-in 10s ease-out forwards;}

.sub03-top {display:grid; grid-template-columns: repeat(3, 1fr); gap:2%; width:1250px;max-width:100%;color:white;margin: 0 auto;  justify-content: space-between;}
.sub03-top > div:nth-child(1) {background:#00a738;}
.sub03-top > div:nth-child(2) {position:relative;}
.sub03-top > div:nth-child(2)::after {content:'';position:absolute;right:-30px;bottom:-50px;;width:150px;height:150px;background:url(/images/energy02.png) center center no-repeat;background-size:cover;}
.sub03-top > div:nth-child(3) {background:rgba(0,0,0,.5)}
.sqc h2 {text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);}




@media (max-width:1024px) {
 .b-cont {width:100%;max-width:100%;}   
 .sub02-top {grid-template-columns: 1fr;  gap:0%; width:100% !important;margin-bottom:50px;max-width:100%; }
 .sub02-top > div:nth-child(2) img {width:100%;margin:0 auto;}
 .sqc {max-width:100%;}
 .sub02-top > div:nth-child(2)::after {right:0px;top:0px;width:80px;height:80px;}

 .sub03-top {grid-template-columns: 1fr;  gap:0%; width:100% !important;margin-bottom:50px;max-width:100%; }
 .sub03-top > div:nth-child(2) img {width:100%;margin:0 auto;}
 .sqc {max-width:100%;}
 .sub03-top > div:nth-child(2)::after {right:0px;top:0px;width:80px;height:80px;}

}

.dot-list {position:relative;margin-bottom:10px;}
.dot-list:after {position:absolute;content:'▶';top:8px;left:-10px;font-size:6px;}


.fxwrap:hover img {
 transform: scale(1.03);transition: transform 1s ease;
}