@charset "utf-8";


#wrap{
font-family: 'PyeojinGothic';
background-color: #000;
overflow-y: scroll;
scroll-snap-type: y mandatory;
height: auto;
overflow: visible;
width: 100vw;
overflow-x: hidden; 
overflow-y: hidden;
    
}

.container{
width: 100%;
max-width: 1720px;
margin: 0 auto;
position: relative;
background-color: #000;
}

#contents_3 .container{
width: 100%;
max-width: 1110px;
margin: 0 auto;
position: relative;
background-color: #000;
}


/* nav[옆에버튼] */

.nav{
 position: fixed; left: 22px; top: 50%; transform: translateY(-50%);
  z-index: 900;
}
.nav .menu{
list-style: none; margin: 0; padding: 0; 

}
.nav .menu li{
display: flex;
align-items: center;
gap: 10px; /* 간격 */
position: relative;
padding-bottom: 20%;
}
.nav .menu li a{
width: 18px;
height: 18px;
background-color: #585757;
border-radius: 50%;
display: block;
position: relative;
transition: 0.3s ease;

}

/* 작은 안쪽 점 */
/* .nav .menu li a::after {
  content: "";
  width: 5px;
  height: 5px;
  background: #e9e9e9;
  border-radius: 50%;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
} */

.dot-line {
width: 30px;
height: 2px;
background: rgba(255,255,255,0.4);
display: inline-block;
transition: 0.3s ease;
opacity: 0;
}

/* 숫자 */
.dot-num {
font-size: 13px;
font-weight: 300;
color: #aaa;
transition: 0.3s ease;
opacity: 0;
}

/* 활성화(Active) 시 강조 */
.nav .menu li a.active {
background-color: #fff;
}

.nav .menu li a.active + .dot-line {
opacity: 1;
background: #fff;
}

.nav .menu li a.active + .dot-line + .dot-num {
opacity: 1;
color: #fff;
}

#header{
position: fixed; top:0; left:0; width:100%;
  padding: 10px 0;
  background: rgba(0, 0, 0, 0.4);
  transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
  z-index:1000;
     display:flex; align-items:center; justify-content: center;
   
    font-weight: 400;
}

/* 로고 */
/* h1.logo에 배경 이미지 지정 */
#header .logo {
  width: 160px;        /* 원하는 로고 가로 크기 */
  height: 60px;        /* 원하는 로고 세로 크기 */
  background-image: url('../images/logo_1.png'); 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 3%;

}

/* 내부 a를 블록 처리해서 h1 크기 그대로 가져가게 함 */
#header .logo a {
    
  display: block;
  width: 100%;
  height: 100%;
}


#header .nav_1{
 padding-top: 3%;
     
    padding-left:10%;
        
    
}
#header .nav_1 >ul{
   display:flex; align-items:center; gap: 12px;   margin:0; padding:0; list-style:none;
    
}
#header .nav_1 >ul> li{
  width: 150px;
height:auto; line-height:1;
text-align: center;
        
}
#header .nav_1 >ul> li> a{
     position:relative; display:inline-block;
  padding:8px 0;     /* 클릭 여백 */
  color:#faf7f7; transition:color .3s ease;
    
   
}

/* 섹션은 헤더 높이만큼 상단 여백 (부드럽게 겹치지 않게) */

#header .nav_1 ul li a::after {
  content: "";
  position:absolute; left:50%; bottom:-2px;
  width:0; height:2px; background:#cacaca;
  transform:translateX(-50%);
  transition:width .35s ease;
}

#header .nav_1 ul li a:hover::after {
  width: 80%; /* hover 시 선 길이 */
}

/* 활성 메뉴 밑줄 항상 표시 */
#header .nav_1 ul li a.active::after {
  width: 80%;
  background: #cacaca;
}

/* 헤더에 clearfix를 줘서 떠 있는 자식들 높이를 포함시킵니다 */
#header::after { content:""; display:block; clear:both; }

/* 활성 메뉴 색상 강조 */
#header .nav_1 ul li a.active {
  color: #c0c0c0;
}

#header.scrolled {
  background: rgba(0, 0, 0, 0.4); /* 반투명 블랙 */
  backdrop-filter: blur(6px);      /* 살짝 유리 느낌 */
}

/* 배너 */

#banner {
  position: relative;
  width: 100vw !important;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
/* 비디오 꽉 채우기 */
#banner video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  transform: translate(-50%, -50%);
  display: block;
}


/* 컨텐츠1_about */
#contents_1 {
  width: 100%;  
  height: 100vh;
  background: #000;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.contents_1 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

/* ABOUT 박스 왼쪽 위치 조정 */
.about-box {
  background: #fff;
  padding: 100px 100px;
  width: 800px;
  margin-left: 12vw;   /* ✔ 화면 왼쪽에서 약간 띄우는 핵심 포인트 */
  box-shadow: 0 15px 40px rgba(0,0,0,0.15);
  z-index: 10;

    opacity: 0;
  transform: translateX(-120px);
  transition: all 1s ease-out;
}

.about-box.show {
  opacity: 1;
  transform: translateX(0);
}
/* 메인타이틀 */

.about-box .about-title {
  font-size: 50px;
  margin-bottom: 25px;
  font-family: "GOUDOS";
  color: #B9B9B9;
  font-weight: 100;
}
/* 메인2 */

.about-box .headline {
  font-size: 23px;
  line-height: 1.6;
  margin-bottom: 25px;
  font-weight: 900;
  color: #843500; 
  
}
/* 설명 */

.about-box .desc {
  font-size: 18px;
  line-height: 1.8;
  font-weight: 500;
}

/* 오른쪽 이미지 */
.about-img {
  position: absolute;
  right: 0;
  top: 0;
  width: 50vw;      /* 이미지 영역 */
  height: 100vh;
}

.about-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  
}

/* 컨텐츠1번 스크롤효과 */

/* 이미지 등장 애니메이션 */
.scroll-img {
  opacity: 0;
  transform: translateX(80px);
  transition: all 1.2s ease-out;
}

.scroll-img.show {
  opacity: 1;
  transform: translateX(0);
}

/* 텍스트 공통 */
/* 2) 텍스트들이 순차 등장 */
.fade-item{
  opacity:0;
  transform:translateX(-40px);
  transition:all .8s ease-out;
}

.fade-item.show{
  opacity:1;
  transform:translateX(0);
}

/* 컨텐츠2_work */

#contents_2{
  width: 100%;
  height: inherit;
    height: auto !important;
}
#contents_2 .contents_2{
  
}
#contents_2 .contents_2 .contents_2_title{
  width: 100%;
  
  padding-top: 2%;
}
#contents_2 .contents_2 .contents_2_title .cont_2_title>h3{
  width: 100%;
  text-align: center;
   font-size: 60px;
  margin-bottom: 25px;
  font-family: "GOUDOS";
  color: #B9B9B9;
  font-weight: 100;
}
#contents_2 .contents_2 .contents_2_title .cont_2_sub{
  font-size: 18px;
  line-height: 1.8;
  font-weight: 500;
  text-align: center;
  color: #fff;
}

/* 컨텐츠2_사진영역 */

#contents_2 .contents_2 .con_2_box{
  padding-top: 3%;
  width: 100%;
}

#contents_2 .contents_2 .con_2_box>ul{
  display: flex;
  align-items: center;
  justify-content: center;
}
#contents_2 .contents_2 .con_2_box>ul>li{
  padding-left: 0.3%;
}

#contents_2 .contents_2 .con_2_box>ul>li>img{
  height: 80%;
}

/* 마우스 올렸을때 효과 */

/* li 박스 기본 스타일 */
.con_2_box ul li {
  position: relative;
  overflow: hidden;
}

/* 이미지 꽉 차게 */
.con_2_box ul li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 오버레이 전체 박스 */
.hover_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 20px;
  transition: 0.35s ease;
  pointer-events: none;
  color: #fff;
}

/* 타이틀 */
.hover_overlay h3 {
  position: absolute;
  top: 8%;
  left: 10%;
  font-size: 28px;
  opacity: 0;
 
  transition: 0.35s ease;
}

/* 서브 텍스트 */
.hover_overlay span {
   position: absolute;
  top: 25%;
   left: 10%;
  font-size: 19px;
  margin-bottom: 20px;
  opacity: 0;
   line-height: 1.5;
 
  transition: 0.35s ease;
}

._title {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  position: relative;
  margin-bottom: 14px;
}

._title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -60%;
  width: 300px;
  height: 2px;
  background-color: #fff;
  opacity: 0.9;
 
}



/* hover 효과 */
.con_2_box ul li:hover .hover_overlay {
  opacity: 1;
}

.con_2_box ul li:hover .hover_overlay h3,
.con_2_box ul li:hover .hover_overlay span {
  opacity: 1;
  transform: translateY(0);
}


/* 스크롤효과 */

.fade-item {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s ease, transform .8s ease;
}

.fade-item.show {
  opacity: 1;
  transform: translateY(0);
}

.fade-item:nth-child(1) { transition-delay: 0.1s; }
.fade-item:nth-child(2) { transition-delay: 0.5s; }
.fade-item:nth-child(3) { transition-delay: 1s; }
.fade-item:nth-child(4) { transition-delay: 1s; }



/* 컨텐츠3_포트폴리오 */

#contents_3{
    margin-top: 80px; /* 원하는 만큼 조절 가능 */
  width: 100%;
}

#contents_3 .contents_3{
    padding-top: 6%;

}

#contents_3 .contents_3 .contents_3_title{
  
  width: 100%;
  

}
#contents_3 .contents_3 .contents_3_title .cont_3_title>h3{
  width: 100%;
  text-align: center;
   font-size: 60px;
  margin-bottom: 25px;
  font-family: "GOUDOS";
  color: #B9B9B9;
  font-weight: 100;
}
#contents_3 .contents_3 .contents_3_title .cont_3_sub{
  font-size: 18px;
  line-height: 1.8;
  font-weight: 500;
  text-align: center;
  color: #fff;
}



/* 탭버튼 */

.tabs {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 30px;
  padding-top: 3%;
}

.tab-btn {
  padding: 7px 18px;
  border-radius: 20px;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: 0.3s;
  font-size: 15px;
}

.tab-btn.active {
  background: #fff;
  color: #000;
}

.work-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* ⭐ 두 개씩 배치 */
  gap: 0; /* 딱 붙게 */
  justify-content: center;
  margin: 40px auto 0;
   width: 100%;
  max-width: 1220px;
  margin: 0 auto;
}
.work-item {
  opacity: 1;
  transition: opacity 0.3s ease;
   cursor: pointer;
}

/* 이미지 크기 */
.work-item img {
 display: block;
  width: 100%;
  height: auto;
}




.work-item.hide {
  display: none !important; /* 공간 자체를 제거 */
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
  transition: 0.25s ease;
}

/* 필터 나타날 때 */
.work-item.show {
  opacity: 1;
  transform: scale(1);
  transition: opacity .35s ease, transform .35s ease;
}


/* 해시태그 영역 */
.overlay-tags {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.overlay-tags span {
  padding: 4px 10px;
  background: rgba(255, 255, 255, 1);
  border-radius: 14px;
  font-size: 13px;
  color: #000000;
  white-space: nowrap;
  transition: 0.25s;
}

.overlay-tags span:hover {
  background: rgba(255,255,255,0.3);
}

/* 더보기버튼 */

.load-more {
  display: block;
  margin: 40px auto 60px;
  padding: 10px 28px;
  background: #000;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

.load-more:hover {
  background: #fff;
  color: #000;
}


/* 마우스 올렸을때 효과 */

/* 부모 박스 */
.thumb-box {
  position: relative;
  overflow: hidden;
  display: block; /* a태그를 block으로 */
}

/* 이미지 */
.thumb-box img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}

/* 오버레이 */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transition: opacity 0.35s ease;
    pointer-events: none;
}

/* 텍스트 */
.overlay-title {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}

.overlay-year {
  color: #ddd;
  font-size: 16px;
  margin-top: 6px;
}

/* Hover 효과 */
.thumb-box:hover .overlay {
  opacity: 1;
}

.thumb-box:hover img {
  transform: scale(1.06);
}

/* 사진 라이트박스 */

/* 라이트박스 기본 비활성화 */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: .3s ease;
  z-index: 999999;
}

.lightbox.active {
  opacity: 1;
  visibility: visible;
}

.lightbox img {
  max-width: 85%;
  max-height: 85%;
  border-radius: 6px;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
  transform: scale(0.92);
  transition: transform .3s ease;
}

.lightbox.active img {
  transform: scale(1);
}

/* 닫기 버튼 */
.lightbox-close {
  position: absolute;
  top: 40px;
  right: 60px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
  font-weight: 300;
  user-select: none;
}

/* 이미지 슬라이드 네비게이션 */
.lightbox .img-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 56px;
  color: rgba(255,255,255,0.85);
  background: none;
  border: none;
  cursor: pointer;
  user-select: none;
  z-index: 10;
  transition: opacity .2s ease, transform .2s ease;
}

.lightbox .img-nav:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}

.lightbox .img-nav.prev {
  left: 40px;
}

.lightbox .img-nav.next {
  right: 40px;
}

@media (max-width: 768px) {

  .lightbox .img-nav {
    font-size: 36px;
  }

  .lightbox .img-nav.prev {
    left: 16px;
    right: auto;
  }

  .lightbox .img-nav.next {
    right: 16px;
    left: auto;
  }

  .lightbox-close {
    top: 20px;
    right: 20px;
    font-size: 32px;
  }
}

/* ==== VIDEO LIGHTBOX ==== */
.video-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: .3s ease;
  z-index: 999999;
}

.video-lightbox.active {
  opacity: 1;
  visibility: visible;
}

.video-wrapper {
  width: 80%;
  max-width: 1000px;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.video-lightbox iframe {
  width: 100%;
  height: 100%;
}

.video-close {
  position: absolute;
  top: 40px;
  right: 60px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
  user-select: none;
}

/* 움직이는 텍스트 */

.text-marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  padding: 35px 0;

  background: #000; /* 필요 시 변경 */
}

.line1{
  padding-top: 7%;
}

.marquee-track {
  display: inline-block;
  white-space: nowrap;
}

.marquee-track span {
  font-family: 'GOUDOS', serif;
  font-size: 52px;
  color: #fff;
  padding: 0 60px;
}

/* 1번 라인: 왼 → 오른쪽 */
.line1 .marquee-track {
  animation: marqueeLeft 22s linear infinite;
}

/* 2번 라인: 오른쪽 → 왼 */
.line2 .marquee-track {
  animation: marqueeRight 22s linear infinite;
}

/* 왼쪽 → 오른쪽 이동 */
@keyframes marqueeLeft {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* 오른쪽 → 왼쪽 이동 */
@keyframes marqueeRight {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* CONTENTS_4 */


#contents_4{
  width: 100%;
  padding-bottom: 5%;
 
}

#contents_4 .contents_4{
    padding-top: 6%;

}

#contents_4 .contents_4 .contents_4_title{
  
  width: 100%;
  

}
#contents_4 .contents_4 .contents_4_title .cont_4_title>h3{
  width: 100%;
  text-align: center;
   font-size: 60px;
  margin-bottom: 25px;
  font-family: "GOUDOS";
  color: #B9B9B9;
  font-weight: 100;
}
#contents_4 .contents_4 .contents_4_title .cont_4_sub{
  font-size: 18px;
  line-height: 1.8;
  font-weight: 500;
  text-align: center;
  color: #fff;
}

/* 로고정렬 */

.partner-logos {
  
  display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4열 고정 */
  gap: 80px 40px; /* 세로 80 / 가로 40 간격 */
  max-width: 1400px;
  margin: 0 auto;
   padding: 40px 16px; /* ← 모바일 안전 */
     box-sizing: border-box;
}

.logo-item {
 width: 100%;
  height: 180px; /* 로고 + 텍스트 포함 전체 높이 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 5px 10px;
}

/* 로고 이미지 박스 (모든 로고를 동일한 공간에 넣는 핵심) */
.logo-img-box {
  width: 160px;
  height: 90px; /* 모든 로고 이미지 프레임 높이 동일 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1% 1%;
}
.logo-item img {
 max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  opacity: .9;
}



.logo-item p {
 margin-top: 12px;
  font-size: 15px;
  color: #fff;
  white-space: nowrap;
}


/* contents_5 */

#contents_5{
  border-top: solid 0.5px #B8B8B8;
  width: 100%;
 padding-top: 10%;
 padding-bottom: 3%;
}

#contents_5 .contents_5{
    padding-top: 1%;

}

.cont_5_total{
     display: flex;
    justify-content: center; /* 가로 가운데 */
    align-items: center;     /* 세로 가운데 */
         /* 화면 전체 높이 채우기 */
    padding-top: 0;          /* 위에 남는 여백 제거 필요할 경우 */
}

.cont_5_loca{
  width: 50%;
  padding-left: 10%;
  text-align: center;
}

.cont_5_loca > span{
  color: #fff;
  display: block;
  font-size: 18px;
  padding-top: 1%;
  
}

.cont_5_loca > span >p{
  color: #cccccc;
  display: block;
  font-size: 12px;
  padding-top: 1%;
}

.cont_5_right{
  padding-left: 5%;
  width: 50%;
  line-height: 1.0;
   display: flex;
    flex-direction: column;
    align-items: center;  /* 내부 요소를 중앙으로 정렬 */
}

#contents_5 .contents_5 .contents_5_title{
  
  width: 100%;
  

}
#contents_5 .contents_5 .contents_5_title .cont_5_title>h3{
  width: 100%;
  text-align: left;
   font-size: 60px;
  margin-bottom: 25px;
  font-family: "GOUDOS";
  color: #B9B9B9;
  font-weight: 100;
}
#contents_5 .contents_5 .contents_5_title .cont_5_sub{
  font-size: 25px;
  line-height: 1.8;
  font-weight: 900;
  text-align: left;
  color: #fff;
}

/* 문의하기버튼 */

#contents_5 .contents_5 .cont_5_link{
  padding-top: 3%;
  width: 100%;
    padding-bottom: 5%;

  
}

#contents_5 .contents_5 .cont_5_link >a{
  width: 350px;
  height: 50px;
  background-color: #700000;
  color: #fff;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 20px;
  border: solid 1px #B8B8B8;
}

#footer{
   width: 100%;
   background-color: #171717;
   padding: 2% 2%;
}
#footer .footer{
  width: 100%;
  height: inherit;
   background-color: #171717;
 
}
#footer .footer .footer_title .footer_title >h3{
   width: 20%;
  text-align: left;
   font-size: 40px;

  font-family: "GOUDOS";
  color: #ffff;
  font-weight: 100;

}

#footer .footer .footer_title .footer_title li{}
#footer .footer .footer_title .footer_title li span{
  font-size: 15px;
}

#footer .footer .footer_title{
  width: 100%;
  color: #fff;
  line-height: 1.8;
  display: flex;
}

#footer .footer .footer_desc{ 
  width: 80%;
 
}

#footer .footer .footer_desc ul{ 
  
  width: 100%;
 
}

#footer .footer .footer_desc ul span{
  display: inline-block;
  width: 80%;
}

.footer_copy>p{
  text-align: left;
  color: #7E7E7E;
  padding-top: 0.5%;
  font-size: 11px;
}


/* 메뉴효과 */

html {
  scroll-behavior: smooth; /* 기본 스무스 스크롤 */

}


/* 옆사이드탑메뉴 */



/* ============= Floating Menu ============= */
/* Floating menu container */
.floating-menu {
    position: fixed;
    top: 80%;
    right: 1%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
}

/* 각 버튼(처음에는 아이콘 크기만 보임) */
.floating-menu .fm-btn {
    width: 55px;          /* 아이콘 크기 */
    height: 55px;
    background: rgba(0,0,0,0.7);
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    overflow: visible;     /* 확장 영역이 밖으로 나오게 해야함 */
}

/* 내부(inner)는 확장되는 영역 */
.floating-menu .fm-btn .inner {
    position: absolute;
    right: 0;                /* 확장 시 오른쪽 고정 */
    left: auto;              /* 왼쪽 기준 제거 */
    top: 0;
    height: 55px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 18px;
    padding-right: 12px;

    background: rgba(0,0,0,0.8);
    border-radius: 10px;

    width: 55px;
    transition: width 0.3s ease;
    white-space: nowrap;
}

/* 호버 시 확장 */
.floating-menu .fm-btn:hover .inner {
      width: 140px;  /* 왼쪽으로 확장됨 → 절대 화면 밖으로 안 나감 */            /* 오른쪽으로 펼쳐지는 길이 */
}

/* 아이콘 스타일 */
.floating-menu .fm-btn i {
    color: #fff;
    font-size: 22px;
}

/* 글자는 처음에 보이지 않게 */
.floating-menu .fm-btn span {
    color: white;
    opacity: 0;                /* 안보임 */
    transition: opacity .2s ease;
}

/* 확장될 때 텍스트 등장 */
.floating-menu .fm-btn:hover span {
    opacity: 1;
}


/* 스크롤효과_새로운버전 */
/* 📌 스크롤은 wrap만 움직이게 */
html, body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* 📌 wrap이 전체 화면 스크롤 담당 */
#wrap {
  height: 100vh;
  overflow-y: scroll;
}

/* 📌 snap 제거 (JS가 처리하므로 충돌 방지) */
section {
  scroll-snap-align: none !important;
}


/* 햄버거메뉴 */
/* 공통 변수(원하는 색상으로 바꿔도 OK) */
:root{
  --hdr-h: 72px;              /* 헤더 높이 */
  --drawer-w: 360px;          /* 드로어 너비 */
  --dim-bg: rgba(0,0,0,.45);  /* 딤 색상 */
  --line: #fff;               /* 햄버거 라인 색 */
}

/* 햄버거 버튼 기본 숨김(데스크톱) */
.hamburger{
  display:none; position:relative;
  width:44px; height:44px; margin-left:12px;
  background:transparent; border:0; cursor:pointer;
  z-index:1100;
}
.hamburger span{
  position:absolute; left:50%; width:24px; height:2px; background:var(--line);
  transform:translateX(-50%); transition:transform .3s ease, opacity .3s ease;
}
.hamburger span:nth-child(1){ top:14px; }
.hamburger span:nth-child(2){ top:21px; }
.hamburger span:nth-child(3){ top:28px; }
.hamburger.is-active span:nth-child(1){ transform:translateX(-50%) rotate(45deg) translateY(7px); }
.hamburger.is-active span:nth-child(2){ opacity:0; }
.hamburger.is-active span:nth-child(3){ transform:translateX(-50%) rotate(-45deg) translateY(-7px); }

/* 모바일 딤 */
.mobile-dim{
  position:fixed; inset:0; background:var(--dim-bg);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
  z-index:1090;
}
.mobile-dim.show{ opacity:1; pointer-events:auto; }

/* 모바일 드로어 */
.mobile-drawer{
  position:fixed; top:0; right:0; height:100dvh; width:var(--drawer-w);
  background:#111; color:#fff; transform:translateX(100%);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
  z-index:1105; display:flex; flex-direction:column;
  box-shadow:-8px 0 24px rgba(0,0,0,.25);
}
.mobile-drawer.open{ transform:translateX(0); }

.mobile-drawer .drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--hdr-h); padding:0 18px; border-bottom:1px solid rgba(255,255,255,.08);
}
.mobile-drawer .drawer-title{ font-size:25px; letter-spacing:.02em; opacity:.9; font-family: 'GOUDOS'; }
.mobile-drawer .drawer-close{
  background:transparent; border:0; color:#fff; font-size:22px; width:40px; height:40px; cursor:pointer;
}

.drawer-menu{ padding:14px 10px 28px; overflow:auto; -webkit-overflow-scrolling:touch; }
.drawer-menu li{ border-bottom:1px solid rgba(255,255,255,.06); }
.drawer-menu a{
  display:block; padding:18px 12px; font-size:18px; color:#f2f2f2; text-decoration:none;
}
.drawer-menu a:hover{ background:rgba(255,255,255,.06); }

/* 바디 스크롤 락 */
body.menu-open{ overflow:hidden; }

/* 배너가 콘텐츠를 덮지 않도록 기본값 */
#banner { position: relative; z-index: 1; }

/* 첫 섹션은 배너 위로 올라오게 */
#contents_1 { position: relative; z-index: 2; }

/* 만약 배너가 position: fixed/sticky 라면, 첫 섹션에 상단 여백 보정 */
#banner.is-fixed + #contents_1 { margin-top: var(--banner-height, 100vh); }




/* 마우스커서 효과 */

/* 기본 커서 숨기기 */
html, body {
  /* cursor: none; */
        overflow-x: hidden !important;
}

/* 원형 커서 */
/* 앞에서 즉시 따라오는 작은 점 */
.cursor-lead {
  position: fixed;
  width: 0px;
  height: 0px;
  background: white;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
}

/* 뒤에서 천천히 따라오는 큰 원 */
.cursor-trail {
  position: fixed;
  width: 40px;
  height: 40px;
  border: 2px solid white;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: top 0.30s ease-out, left 0.30s ease-in-out; 
}

.cursor-trail, .cursor-lead {
    mix-blend-mode: difference;
}

body {
    position: relative;
    overflow-x: hidden;
}

.cursor-lead,
.cursor-trail,
.cursor-project {
    pointer-events: none;
    overflow: hidden;
    max-width: 100vw;
    max-height: 100vh;
}


/* 포트폴리오 구간 마우스 커서변경 */

/* Project 전용 커서 */
.cursor-project {
  position: fixed;
  top: 0;
  left: 0;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #0c1a8c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  font-size: 14px;
  font-weight: 700;
  pointer-events: none;
 

  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.25s ease;
  z-index: 99999;
}

/* 기존 lead/trail 커서 숨길 준비 */
.cursor-lead, .cursor-trail {
  transition: opacity .25s ease;
}