*{margin:0;padding:0;box-sizing:border-box;}

html {
    scroll-behavior:smooth;
}

html, body {
  margin:0;
  padding:0;
  background: #141414;
}

body{
 background:#141414;
 font-family:'Pretendard',sans-serif;
 color:#fff;
 overflow-x:hidden;
 font-weight:300;
 letter-spacing: -0.02em;
 padding-bottom:100px;
}

body::before{
 content:"";
 position:fixed;
 inset:0;
 background:#141414;
 z-index:-1;
}
.container{
 width:1440px;
 margin:0 auto;
}

/* HEADER */
header{padding:60px 0 30px;background: none;}
header h1 {visibility:hidden;width:0;height:0;position:fixed;top:0;left:0;}
.header-inner{
 display:flex;
 justify-content:space-between;
 align-items: center;

}
.logo{
    width:180px;
    font-size:30px;
    letter-spacing:2px;
    font-weight:600;
    position:relative;
    z-index:1002;
    cursor: pointer;
    overflow: hidden;
}

.logo img {
  width:100%;
  max-width: 100%;
  height: auto;
  display: block;
}

nav {
  margin-left:auto;
  padding-right:50px;
}

nav a{
  position:relative;
  display:inline-block;
  padding-bottom:6px;
  margin-left:40px;
  color:#fff;
  text-decoration:none;
  font-size:20px;
  font-weight:600
}

nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:100%;
  height:3px;
  background:#fff;

  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.5s cubic-bezier(.25,.1,.25,1);
}

nav a:hover::after{
  transform:scaleX(1);
}

/* HERO */
.hero{margin-top:120px;}
.hero h1{
 font-family:'Playfair Display',serif;
 font-size:100px;
 line-height:120%;
}
.hero p{
 margin-top:30px;
 font-size:25px;
 line-height:150%;
 line-height:auto;
 color:#BDBDBD;
}

/* Header */
.toggle-wrap{
  position:relative;
  width:140px;
  height:60px;
  background:#222;
  border-radius:999px;
  padding:5px;
  cursor:pointer;
  user-select:none;
  zoom:0.6
}

.toggle-slider{
  position:absolute;
  top:5px;
  left:5px;
  width:65px;
  height:50px;
  background:#3A00CE;
  border-radius:999px;
  transition:0.3s;
}

.toggle-wrap.active .toggle-slider{
  left:70px;
}

.toggle-text{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 15px 0 22px;
  font-weight:bold;
  color:#fff;
  font-size:18px;
}

/* Arrow */
.scroll-wrap{
 margin-top:200px;
 text-align:center;
opacity: 0.6;
 transition:ease-in-out 0.3s;
}
.scroll-wrap:hover{
 opacity:1;
}
.scroll-wrap img {
    width:107px;
 cursor: pointer;
}

/* Gray Boxes */
.gray-center{
 padding-top:120px;
 display:flex;
 justify-content:center;
}
.gray-right{
 padding-top:150px;
 display:flex;
 justify-content:flex-end;
}
.gray-box{
 width:1200px;
 height:600px;
}
.gray-box img {
    width:100%;
    height:100%;
    object-fit:cover;
}
.img-wrap{
  overflow:hidden;
  position:relative;
}

.img-wrap img{
  width:100%;
  display:block;
  transition:transform 0.6s cubic-bezier(.22,.61,.36,1);
}

.img-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.15);
  opacity:0;
  transition:opacity 0.4s ease;
}

.img-wrap:hover img{
  transform:scale(1.08);
}

.img-wrap:hover::after{
  opacity:1;
}
/* WHAT SECTION */
.what-small{
 margin-top:240px;
 font-size:22px;
}

.what-area{
 position:relative;
 margin-top:40px;
}

.blue-bar{
 position:absolute;
 left:50%;
 transform:translateX(-50%) !important;
 top:160px;
 width:1204px;
 height:117px;
 background:#3A00CE;
 z-index:1;
 margin:0 auto;
}

.what-content{
 position:relative;
 z-index:2;
}

.what-left h2{
 font-family:'Playfair Display',serif;
 font-size:90px;
 line-height:100px;
}

.what-right{
 margin-top:120px;
 font-size:25px;
 line-height:150%;
 text-align: right;
}

/* SECTION */
.section-head{margin-top:240px;}
.section-head h3{
 font-family:'Playfair Display',serif;
 font-size:90px;
 line-height:100px;
 margin: 50px 0 50px;
}
.section-sub{margin-top:10px;margin-bottom:50px;font-size:45px;font-weight:500;}
.section-desc{margin-top:20px;font-size:25px;color:#BDBDBD;line-height:150%}

.item{
 padding:100px 0;
 border-bottom:2px solid #3A3A3A;
 overflow:hidden;
}
.item h4{float:left;font-size:40px;}
.item p{
 float:right;
 text-align:right;
 font-size:20px;
 line-height:150%;
 color:#CFCFCF;
 padding-top:100px;
}

.non-line {border-bottom:0}

/* ============================= */
/* Scroll Reveal Effect */
/* ============================= */

.reveal-line{
 opacity:0;
 transform:translateY(40px);
 transition: all 0.8s cubic-bezier(0.22,1,0.36,1);
}

.reveal-line.active{
 opacity:1;
 transform:translateY(0);
}

/* ============================= */
/* Premium Hamburger Menu */
/* ============================= */

.hamburger{
 display:none;
 width:30px;
 height:22px;
 flex-direction:column;
 justify-content:space-between;
 cursor:pointer;
 z-index:1001;
 position:relative;
 margin-left:0
}

.hamburger span{
 display:block;
 height:3px;
 background:#fff;
 border-radius:2px;
 transition:all 0.4s cubic-bezier(0.22,1,0.36,1);
}

/* 햄버거 → X 애니메이션 */
.hamburger.active span:nth-child(1){
 transform:translateY(9px) rotate(45deg);
}

.hamburger.active span:nth-child(2){
 opacity:0;
}

.hamburger.active span:nth-child(3){
 transform:translateY(-9px) rotate(-45deg);
}



.scroll-top{

  position:fixed;
  right:40px;
  bottom:40px;
  width:48px;
  height:48px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.08);
  color:#fff;
  font-size:18px;
  cursor:pointer;

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  opacity:0;
  visibility:hidden;
  transform:translateY(20px);

  transition:all 0.4s cubic-bezier(.22,.61,.36,1);
  z-index:999;
}

.scroll-top.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.scroll-top:hover{
  background:rgba(255,255,255,0.15);
}

/* RESPONSIVE */
/* ============================= */
/* 1300px 이하 */
/* ============================= */
@media (max-width:1300px){

 .container{
  width:90%;
 }

 .gray-box{
  width:95%;
  height:520px;
 }

 .blue-bar{
  width:95%;
 }

 .hero h1{
  font-size:80px;
 }

 .section-head h3{
  font-size:70px;
  line-height:80px;
 }

}



/* ============================= */
/* 1079px 이하 */
/* ============================= */
@media (max-width:1079px){

 header{
  padding:40px 0 20px;
position: fixed;
top: 0;
left: 0;
right: 0;
background: #141414;
z-index: 1000;
 }

 
 nav{
  position:fixed;
  top:-100%;
  left:0;
  width:100%;
  height:100vh;
  background:rgba(20,20,20,0.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  transition:all 0.6s cubic-bezier(0.22,1,0.36,1);
  z-index:1000;
 }

 nav.active{
  top:0;
 }

 nav a{
  font-size:28px;
  margin:20px 0;
 }

 .hamburger{
  display:flex;
 }

 .header-inner{
  align-items:center;
 }

 .hero{
  margin-top:80px;
 }

 .hero h1{
  font-size:64px;
  line-height:74px;
 }

 .hero p{
  font-size:20px;
 }

 .gray-box{
  height:450px;
 }

 .what-left h2{
  font-size:60px;
  line-height:70px;
 }

 .section-sub{
  font-size:32px;
 }

 .section-desc{
  font-size:22px;
 }

 .item {
    margin-top:0
 }

 .item h4{
  font-size:28px;
 }

 .item p{
  font-size:18px;
  padding-top:40px;
 }

}


/* ============================= */
/* PC Fixed Header */
/* ============================= */

@media (min-width:797px){

  header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    background:rgba(20,20,20,0);
    backdrop-filter:blur(0px);
    -webkit-backdrop-filter:blur(0px);
    transition:background 0.4s ease,
               backdrop-filter 0.4s ease,
               padding 0.4s ease;
  }

  header.scrolled{
    background:rgba(20,20,20,0.85);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    padding:30px 0 20px;
  }

  body{
    padding-top:140px; /* 헤더 높이 확보 */
  }

}

/* ============================= */
/* 797px 이하 */
/* ============================= */
@media (max-width:797px){
 body {
    padding-top:100px
 }
 
 nav a{
  margin-left:0;
  margin-right:20px;
 }

 .hero h1{
  font-size:42px;
  line-height:50px;
 }

 .hero p{
  font-size:18px;
 }

 .gray-box{
  height:350px;
 }

 .blue-bar{
  height:50px;
  top:55px;
 }

 .what-left h2{
  font-size:40px;
  line-height:48px;
 }

 .section-head h3{
  font-size:40px;
  line-height:48px;
 }

 .section-sub{
  font-size:24px;
 }

 .section-desc{
  font-size:18px;
 }
.gray-right {
    padding-top:100px;
}
 .item{
  padding:40px 0;
 }

 .scroll-wrap {
  margin-top: 100px;
 }

 .scroll-wrap img {
  width:70px;
 }
}

/* ============================= */
/* 500px 이하 */
/* ============================= */
@media (max-width:500px){

 body{
  padding:100px 20px 100px;
 }

 header{
  padding:25px 0px;
 }

 .logo{
  font-size:22px;
z-index: 1001; 
}
 .logo img {
  width:80%;
 }


 nav a{
  font-size:16px;
 }

 .hero{
  margin-top:60px;
 }

 .hero h1{
  font-size:32px;
  line-height:40px;
 }

 .hero p{
  font-size:16px;
 }

 .scroll-wrap{
  margin-top:120px;
 }

 .gray-box{
  height:260px;
 }

 .what-small{
  margin-top:140px;
  font-size:16px;
 }

 .what-left h2{
  font-size:30px;
  line-height:38px;
 }

 .what-right{
  font-size:16px;
  margin-top:40px;
 }

 .section-head{
  margin-top:140px;
 }

 .section-head h3{
  font-size:30px;
  line-height:36px;
 }

 .section-sub{
  font-size:18px;
 }

 .section-desc{
  font-size:16px;
 }

 .item h4{
  font-size:20px;
 }

 .item p{
  font-size:14px;
  padding-top:20px;
 }

}