body {
  background: #000B43; /* fallback color */
  background: -webkit-linear-gradient(top, #000B43 0%, #00051F 100%);
  background: -moz-linear-gradient(top, #000B43 0%, #00051F 100%);
  background: -o-linear-gradient(top, #000B43 0%, #00051F 100%);
  background: linear-gradient(to bottom, #000B43 0%, #00051F 100%);
  padding:2rem;
  display: flex; justify-content: flex-start; align-items: stretch; gap:2rem;
  flex-wrap: nowrap;
}

/* 3번 슬라이드가 활성화될 때 body에 적용될 스타일 */

/* body.slide-active-1 {
    background-image: url(../img/slide-03.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
} */

body.slide-active-2 {
    background-image: url(../img/slide-02.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

body.slide-active-3 {
    background-image: url(../img/slide-03.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* 게이지 애니메이션 일시정지를 위한 클래스 */
/* .gauge.pause {
    animation-play-state: paused;
} */

/*사이드 메뉴 */
aside {width:100%; position: fixed; top:2rem; z-index: 99; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;  max-width: 30rem;  height: calc(100% - 4rem);  border-radius: 1.5rem;  padding:2rem; flex-shrink: 0; transition: all 0.4s cubic-bezier(.23,1,.32,1); background-color: rgba(0,0,0,0.3);  border-radius: 1.5rem;   backdrop-filter: blur(10px);    -webkit-backdrop-filter: blur(10px);  /* Safari 지원용 */   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); transition: all 0.4s cubic-bezier(.23,1,.32,1); gap:2rem; }
aside .open-button {position: absolute;  width:4rem; height: 10rem;  z-index: 5; top:7rem; right:-4rem;  transform: translateY(-50%);  background-color: #08236E; border-radius: 0 1.5rem 1.5rem 0; cursor: pointer; transition: all 0.4s;}
aside .open-button:hover {background-color: #0081CC; }
aside .logo-wrap {background-color: #fff; border-radius: 1.5rem; height: 10rem; flex-shrink: 0;}
aside .logo-wrap:hover {background-color: #f9f9f9;}
aside .logo-wrap img {width:100%; max-width: 19.6rem;}
aside nav { width: 100%; height: 100%;    position: relative;   
  -webkit-mask-image: linear-gradient(
      to bottom,            /* 그라데이션 방향: 위에서 아래로 */
      #000B43 0%,              /* 시작 (위): 불투명 */
      #000B43 calc(100% - 5rem), /* 끝에서 50px 위까지: 불투명 */
      transparent 100%      /* 끝 (아래): 완전 투명 */
    );
    mask-image: linear-gradient(
      to bottom,
      #000B43 0%,
      #000B43 calc(100% - 5rem),
      transparent 100%
);
overflow-y:hidden;
} 
aside nav ul .menu-name {color:rgba(255,255,255,0.5); cursor:text;  }
aside nav ul li {font-size:1.4rem; ; font-weight: 200; color:rgba(255,255,255,1); position: relative; line-height: 1; padding:1rem; cursor: pointer; border-radius: 5rem; } 
aside nav ul li:hover:not(.menu-name):not(.active) {background-color: rgba(255,255,255,0.1);}
aside nav ul li::after {content:''; position: absolute; opacity: 0; top:50%; transform: translateY(-50%); width:0.8rem; height:0.8rem; background-color: #0081CC; border-radius: 50%;}

/*슬라이드의 네비게이션*/
aside #menu .swiper-wrapper { padding-bottom: 2rem;}
aside #menu .swiper-wrapper .swiper-slide {height: auto; position: relative; width:calc(100% - 2rem); font-weight: bold; text-align: center;}
aside #menu .swiper-wrapper .swiper-slide.depth {margin-top:3rem;}
aside #menu .swiper-wrapper .swiper-slide.depth::before {content:''; position: absolute; top:-2rem; left:0; font-size:1.6rem; color:rgba(255,255,255,0.7);}
aside #menu .swiper-wrapper .swiper-slide.depth#depth-01::before {content:'About Us';}
aside #menu .swiper-wrapper .swiper-slide.depth#depth-02::before {content:'Products';}
aside #menu .swiper-wrapper .swiper-slide.depth#depth-03::before {content:'Support';}
aside #menu .swiper-wrapper .swiper-slide.swiper-slide-thumb-active {color:#0081CC; font-weight: bold;}
aside #menu .swiper-wrapper .swiper-slide.swiper-slide-thumb-active::before {font-weight: 200;}
aside #menu .swiper-scrollbar {right:0;}
aside #menu .swiper-scrollbar-drag {background-color: rgba(255,255,255,1); }
aside #menu .swiper-scrollbar-vertical {background-color: rgba(255,255,255,0.3);}


/*브레드 크럼 */
.breadcrumb { width: 100%; }
.breadcrumb>li {position: relative; font-size:1.6rem; color:rgba(255,255,255,0.3);  }
.breadcrumb>li>a {color:rgba(255,255,255,0.5);}
.breadcrumb>li:last-child>a {color:rgba(255,255,255,0.8); font-weight: bold;}
.breadcrumb>li:last-child::before {display: none;}
/* .breadcrumb>li::before {content:'/'; position: absolute; right: 0.5rem; font-size:1.6rem; color:rgba(255,255,255,0.3);} */
.breadcrumb>li.catch {float: right; padding-top:0.3rem; padding-bottom: 0.3rem; text-align: right; display: inline-block; color:rgba(255,255,255,0.7); text-align: right;border-top:1px solid rgba(255,255,255,0.3); border-bottom:1px solid rgba(255,255,255,0.3); margin-bottom: 1rem;}
.breadcrumb>li.catch span { padding:0.25rem 1rem; font-size: 1.4rem;}
.breadcrumb>li.catch span:last-child {border-right:0;}

.contact-menu { border-top:1px solid rgba(255,255,255,0.1); padding-top:2rem; flex-shrink: 0;}
.contact-menu ul {display: flex; justify-content: flex-start; gap:1rem; align-items: flex-start; font-size:1.3rem; margin-bottom: 2rem; flex-wrap: wrap;}
.contact-menu ul li {flex-basis: 100%; max-width: 100%;}
.contact-menu .flex li:first-child {flex-shrink: 0;  font-weight: bold;}
/* .contact-menu .flex {flex-wrap: nowrap;} */

/*메인 */
main {width:100%; overflow: hidden; padding-left:32rem; transition: all 0.4s;}
main.on {padding:0;}
aside.off {transform: translateX(-32rem);}
.open-button.off {height: calc(100% - 30rem); top:50%;}
.open-button.off>img {transform: rotate(-180deg); transition: all 0.4s;}

.inner-content {padding-bottom: 3rem; }

/*슬라이드*/
#main-slide {height: 100%; position: relative; overflow: hidden; transform: translateZ(0);}

#main-slide .swiper-wrapper,
#main-slide .swiper-slide {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 1; /* 모든 슬라이드를 기본 z-index 1로 설정 */
    visibility: hidden;
    opacity: 1;
    transition: all 0.4s cubic-bezier(.23,1,.32,1);
    /* display: none; */
}
#main-slide .swiper-slide .breadcrumb {opacity: 0;}
#main-slide .swiper-slide .inner {opacity: 0;}

#main-slide .swiper-slide.swiper-slide-active {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    visibility: visible;
    opacity: 1 !important; /* 기본적으로 모든 슬라이드를 투명하게 */
}

#main-slide .swiper-slide-active .breadcrumb {opacity: 1; }
#main-slide .swiper-slide-active .inner {opacity: 1;}



/* 크로스페이드 효과를 사용할 때 부드러운 전환을 위한 설정 */
#main-slide.swiper-fade .swiper-slide {
    pointer-events: none; /* 전환 중인 슬라이드 클릭 방지 */
    transition-property: opacity;
}

#main-slide.swiper-fade .swiper-slide-active {
    pointer-events: auto; /* 활성화된 슬라이드만 클릭 가능하도록 설정 */
}

/*슬라이드의 네비게이션*/
#main-slide .navigation {position: absolute; justify-content: space-between; overflow: hidden; border-radius: 1.5rem; height: 6rem; bottom:0; z-index: 1; background-color: rgba(255,255,255,0.1);     backdrop-filter: blur(10px);    -webkit-backdrop-filter: blur(10px);  /* Safari 지원용 */   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);      /* 뒷배경 블러 처리 */ align-items: stretch; }
#main-slide .navigation::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px; /* 테두리 두께 */
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.01));
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  pointer-events: none;
}

#main-slide .navigation .gauge {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background-color: #08236E; /* 파란색 */
    animation: fillGauge 5s linear forwards; /* Added 'paused' */
}

#main-slide .swiper-slide {overflow: hidden; padding:4rem; height:calc(100% - 8rem); overflow-y: auto; webkit-mask-image: linear-gradient(
    to bottom,            /* 그라데이션 방향: 위에서 아래로 */
    #000B43 0%,              /* 시작 (위): 불투명 */
    #000B43 calc(100% - 3rem), /* 끝에서 50px 위까지: 불투명 */
    transparent 100%      /* 끝 (아래): 완전 투명 */
  );
  mask-image: linear-gradient(
    to bottom,
    #000B43 0%,
    #000B43 calc(100% - 3rem),
    transparent 100%
  ); 

}
.swiper-slide>.inner {width:100%; height: 100%;}
.inner>div {width: 100%;}


#main-slide .navigation .gauge.pause {
  animation-play-state: paused;
}


@keyframes fillGauge {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

/*언어 버튼 */
.lang-wrap { padding:0.5rem 1rem; border-radius: 1rem; overflow: visible; margin-bottom: 1rem; }
.lang-wrap .active {color:#fff; }


#main-slide .navigation>.content {cursor: pointer; z-index: 1;}
#main-slide .navigation>.content>img {z-index: 2;}
#main-slide .navigation>.content:hover>img {opacity: 0.7;}
#main-slide .navigation>.content.pause>.play-icon {display: none;}
#main-slide .navigation>.content.pause.play>.pause-icon {display: none;}
#main-slide .navigation>.content.pause.play>.play-icon {display: block;}
#main-slide .navigation>.content.swiper-button-disabled>img {opacity: 0.3;}


/*슬라이드 1 */
#slide-01 .text-wrap {padding: 2rem 5rem;}
#slide-01 #overview {margin-top:3rem; margin-bottom: 5rem; justify-content: flex-start; gap:2rem;}
#slide-01 #overview li:last-child {border-right:0;}
#slide-01 #overview li:hover {background-color: #006dbb;}
#slide-01 #overview li img  {border-radius: 1rem;  overflow: hidden; width: 100%; height: 100%;}
#slide-01 #overview h4 {line-height: 1.2;}


/*슬라이드1*/
#slide-01 .flex-2ea>.content:last-child {position: relative;}
/* #slide-01 .flex-2ea>.content:last-child p {color:#fff; text-align: center;  width:100%; position: absolute; top:90%; left:50%; transform: translate(-50%,-50%); font-size:1.6rem; font-weight: bold; letter-spacing: 5px;} */


/*슬라이드2*/
#slide-02 .flex-3ea  {max-width: 100rem; margin: 0 auto; gap:2rem;  align-items: stretch;}
#slide-02 .flex-3ea .content {padding:1rem; }
#slide-02 .flex-3ea .content h4 {margin-bottom: 0.6rem;}
#slide-02 .flex-3ea .content p {font-weight: 200;}
#slide-02 .flex-3ea .content .img-wrap>img {width: 100%;}
#slide-02 .flex-3ea .content .text-wrap {padding-top:1rem; padding-bottom: 1rem;}

/*슬라이드3*/
#slide-03 .flex-3ea  {max-width: 100rem; margin: 0 auto; gap:2rem;  align-items: stretch;}
#slide-03 .flex-3ea .content {padding:1rem; }
#slide-03 .flex-3ea .content h4 {margin-bottom: 0.6rem;}
#slide-03 .flex-3ea .content p {font-weight: 200;}
#slide-03 .flex-3ea .content .img-wrap>img {width: 100%;}
#slide-03 .flex-3ea .content .text-wrap {padding-top:1rem; padding-bottom: 1rem;}

#slide-03 .flex-5ea {gap:2rem; align-items: stretch; margin-bottom: 4rem;}
#slide-03 .profile-wrap { transition: all 0.4s cubic-bezier(.23,1,.32,1); flex-direction: column; overflow: hidden; border-radius: 1.5rem; bottom:0; z-index: 1; background-color: rgba(255,255,255,0.1); backdrop-filter: blur(10px);   -webkit-backdrop-filter: blur(10px);  -webkit-backdrop-filter: blur(10px);  /* Safari 지원용 */   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); opacity: 0.6; padding:3rem; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
#slide-03 .profile-wrap:hover {opacity: 1;}
#slide-03 .profile-wrap:hover h4 {color:#0081CC !important;}
#slide-03 .profile-wrap::before {content: "";
  position: absolute;
  inset: 0;
  padding: 1px; /* 테두리 두께 */
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.01));
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  pointer-events: none;}
#slide-03 .flex-5ea .profile-wrap .img-wrap {width: 100%; flex-shrink: 1; margin-bottom: 1rem; }
#slide-03 .flex-5ea .profile-wrap .img-wrap img {width: 100%; border-radius: 50%; overflow: hidden;}
#slide-03 .flex-5ea .profile-wrap .text-wrap {width: 100%; }



/*슬라이드4*/
#slide-04 .inner>div {width: 100%; gap:2rem;}
#slide-04 .map-wrap {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 1:1 비율 유지 */
  overflow: hidden;
  border-radius: 2rem;
}

.map-wrap iframe,
.map-wrap #map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#slide-04 .text-wrap {padding:8rem;}
#slide-04 table tr td {padding:1.5rem 2rem;}
#slide-04 table tr td p { word-wrap: break-word;      /* 오래된 브라우저 대응 */
  overflow-wrap: break-word;  /* 최신 표준 */
  white-space: normal;        /* 줄바꿈 허용 */}