*{

margin:0;

padding:0;

box-sizing:border-box;

}



html{

scroll-behavior:smooth;

scroll-snap-type:y proximity;

}



body{

background:#050505;

color:#fff;

font-family:

"Pretendard",

"Apple SD Gothic Neo",

Arial,

sans-serif;

overflow-x:hidden;

}







/* =====================
BACKGROUND
===================== */


.background{

position:fixed;

inset:0;

z-index:-10;

overflow:hidden;

background:#050505;

}




.soft-light{

position:absolute;

top:-150px;

left:50%;

width:900px;

height:500px;

transform:translateX(-50%);


background:

radial-gradient(

circle,

rgba(255,255,255,.18),

transparent 70%

);



filter:blur(100px);



animation:

softMove 12s ease-in-out infinite alternate;

}





@keyframes softMove{


0%{

opacity:.4;

transform:

translateX(-50%)
scale(1);

}



100%{

opacity:.8;

transform:

translateX(-50%)
scale(1.2);

}


}









/* =====================
AURORA
===================== */


.aurora{

position:fixed;

top:-300px;

width:500px;

height:1400px;

filter:blur(170px);

opacity:.15;

pointer-events:none;


transition:

transform 1.5s cubic-bezier(.22,1,.36,1);

}





.aurora-one{

left:5%;


background:

linear-gradient(

180deg,

rgba(150,90,255,.8),

transparent

);

}





.aurora-two{

right:5%;


background:

linear-gradient(

180deg,

rgba(70,255,190,.8),

transparent

);

}









/* =====================
STAR
===================== */


#star-container{

position:absolute;

inset:0;

}



.star{

position:absolute;

background:#fff;

border-radius:50%;


animation:

fallStar linear infinite;

}



@keyframes fallStar{


0%{

transform:

translateY(-30px);

opacity:0;

}



20%{

opacity:.8;

}



100%{

transform:

translateY(100vh);

opacity:0;

}


}









/* =====================
HEADER
===================== */


header{

position:fixed;

top:0;

left:0;

width:100%;


height:90px;


padding:0 70px;


display:flex;


align-items:center;


justify-content:space-between;


z-index:100;



background:transparent;

}



.brand{

display:flex;


align-items:center;


gap:15px;


font-size:13px;


letter-spacing:5px;

}





.mini-logo{

width:45px;

height:45px;

}





.mini-logo svg,
.main-logo svg,
.footer-logo svg{

width:100%;

height:100%;

}





.logo-ring{

fill:none;

stroke:#fff;

stroke-width:4;

stroke-linecap:round;

}





.logo-core{

fill:#fff;

}









nav a{


text-decoration:none;


color:white;


opacity:.55;


font-size:12px;


letter-spacing:4px;


margin-left:35px;



transition:.4s;


}





nav a:hover{


opacity:1;


color:#fff;


}
/* =====================
SIDE MENU
===================== */


.side-menu{

position:fixed;

left:45px;

top:50%;

transform:translateY(-50%);


display:flex;

flex-direction:column;

gap:28px;


z-index:90;

}





.side-menu a{


position:relative;


padding-left:25px;


color:#777;


text-decoration:none;


font-size:11px;


letter-spacing:4px;


transition:.5s;


}





.side-menu a::before{


content:"";


position:absolute;


left:0;


top:50%;


width:7px;


height:7px;


border-radius:50%;


background:#555;


transform:translateY(-50%);


transition:.5s;


}





.side-menu a.active{


color:white;


}





.side-menu a.active::before{


background:white;


box-shadow:

0 0 20px white;


transform:

translateY(-50%)

scale(1.7);


}









/* =====================
SECTION SNAP
===================== */


.hero,
.section{


scroll-snap-align:start;

}






.company-info{


scroll-snap-align:none;

}









/* =====================
HERO
===================== */


.hero{


height:100vh;


display:flex;


align-items:center;


justify-content:center;


position:relative;


text-align:center;


}





.hero-inner{


display:flex;


flex-direction:column;


align-items:center;


}





.main-logo{


width:200px;


height:200px;


margin-bottom:35px;


}




.hero h1{


font-size:90px;


font-weight:300;


letter-spacing:22px;


}





.hero h1 span{


display:block;


font-size:55px;


letter-spacing:35px;


margin-top:15px;


}





.hero-korean{


margin-top:45px;


font-size:22px;


line-height:2;


}





.hero-desc{


margin-top:20px;


color:#999;


line-height:2;


}





.hero-buttons{


display:flex;


gap:20px;


margin-top:50px;


}





.hero-buttons a{


width:170px;


height:55px;


display:flex;


align-items:center;


justify-content:center;



border:1px solid rgba(255,255,255,.3);



color:white;



text-decoration:none;



font-size:12px;



letter-spacing:4px;



transition:.5s;


}





.hero-buttons a:hover{


background:

linear-gradient(

120deg,

#fff,

#fff

);



color:#000;



box-shadow:

0 0 40px rgba(255,255,255,.3);



transform:

translateY(-10px)

scale(1.05);


}









.scroll{


position:absolute;


bottom:40px;


font-size:10px;


letter-spacing:8px;


color:#777;


}









/* =====================
SECTION
===================== */


.section{


min-height:100vh;


padding:150px 10%;


display:flex;


align-items:center;


justify-content:center;


flex-direction:column;


text-align:center;


}





.title{


font-size:12px;


letter-spacing:12px;


color:#777;


margin-bottom:40px;


}





.section h2{


font-size:55px;


font-weight:300;


letter-spacing:5px;


line-height:1.5;


}





.section>p{


margin-top:35px;


color:#999;


line-height:2;


}
/* =====================
GRID
===================== */


.cards,
.business-grid,
.project-grid,
.contact-grid{


display:grid;


gap:30px;


margin-top:70px;


}





.cards{


grid-template-columns:

repeat(3,300px);


}





.business-grid{


grid-template-columns:

repeat(4,260px);


}





.project-grid{


grid-template-columns:

repeat(3,300px);


}





.contact-grid{


grid-template-columns:

repeat(3,260px);


}









/* =====================
CARD PREMIUM
===================== */


.card,
.business-card,
.project-card,
.contact-card{


position:relative;


overflow:hidden;


padding:40px;



background:

rgba(255,255,255,.035);



border:

1px solid rgba(255,255,255,.15);



backdrop-filter:

blur(12px);



transition:

.7s cubic-bezier(.22,1,.36,1);


}





.card::before,
.business-card::before,
.project-card::before,
.contact-card::before{


content:"";


position:absolute;


top:0;


left:-150%;


width:70%;


height:100%;



background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.3),

transparent

);



transition:1s;


}





.card:hover::before,
.business-card:hover::before,
.project-card:hover::before,
.contact-card:hover::before{


left:170%;


}





.card:hover,
.business-card:hover,
.project-card:hover,
.contact-card:hover{


transform:

translateY(-12px);



background:

rgba(255,255,255,.08);


}









/* =====================
COLOR HOVER
===================== */



.card:nth-child(1):hover,
.business-card:nth-child(1):hover,
.project-card:nth-child(1):hover{


border-color:

rgba(190,120,255,.9);



box-shadow:

0 40px 100px rgba(180,90,255,.25);


}




.card:nth-child(2):hover,
.business-card:nth-child(2):hover,
.project-card:nth-child(2):hover{


border-color:

rgba(70,255,210,.9);



box-shadow:

0 40px 100px rgba(50,255,200,.25);


}




.card:nth-child(3):hover,
.business-card:nth-child(3):hover,
.project-card:nth-child(3):hover{


border-color:

rgba(255,190,90,.9);



box-shadow:

0 40px 100px rgba(255,170,70,.25);


}





.business-card:nth-child(4):hover{


border-color:

rgba(255,110,180,.9);



box-shadow:

0 40px 100px rgba(255,90,170,.25);


}









.contact-card:nth-child(1):hover{


border-color:#b87cff;


}



.contact-card:nth-child(2):hover{


border-color:#50ffd2;


}



.contact-card:nth-child(3):hover{


border-color:#ffd05a;


}



.contact-card:nth-child(4):hover{


border-color:#ff79b7;


}



.contact-card:nth-child(5):hover{


border-color:#7ca7ff;


}



.contact-card:nth-child(6):hover{


border-color:#aaff80;


}









.card h3,
.business-card h3,
.project-card h3{


font-size:28px;


font-weight:300;


letter-spacing:5px;


}





.card p,
.business-card p,
.project-card p{


margin-top:25px;


color:#999;


line-height:2;


font-size:14px;


}









/* =====================
REVEAL
===================== */


.reveal{


opacity:0;


transform:

translateX(-160px);



filter:

blur(8px);



transition:

1.4s cubic-bezier(.22,1,.36,1);


}




.reveal.show{


opacity:1;


transform:

translateX(0);



filter:

blur(0);


}
/* =====================
FOOTER
===================== */


.company-info{


min-height:700px;


padding:150px 10%;



display:flex;


align-items:center;


justify-content:center;


flex-direction:column;


text-align:center;


}





.footer-logo{


width:140px;


height:140px;


}





.company-info h2{


margin-top:40px;


font-size:42px;


font-weight:300;


letter-spacing:12px;


}





.company-info p{


margin-top:30px;


color:#999;


line-height:2;


}





.company-grid{


display:flex;


gap:100px;


margin-top:70px;


}





.company-grid h4{


font-size:12px;


letter-spacing:5px;


color:#777;


}





.copyright{


font-size:11px;


letter-spacing:4px;


}









/* =====================
MOUSE EFFECT SUPPORT
===================== */


.card,
.business-card,
.project-card,
.contact-card,
.hero-buttons a{


transform-style:preserve-3d;


will-change:transform;


}









/* =====================
MOBILE
===================== */


@media(max-width:1000px){



header{


padding:0 30px;


}



nav,
.side-menu{


display:none;


}





.hero h1{


font-size:45px;


}




.hero h1 span{


font-size:30px;


}





.section h2{


font-size:35px;


}





.cards,
.business-grid,
.project-grid,
.contact-grid{


grid-template-columns:1fr;


width:90%;


}





.company-grid{


flex-direction:column;


gap:40px;


}



}