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


body{

font-family: Helvetica, Arial, sans-serif;
line-height:1.7;
color:black;
text-align:center;

background-image: linear-gradient(
-225deg,
#ff7a18 0%,
#ffb347 50%,
#ff512f 100%
);

}

:lang(ko){
font-family:"Noto Sans KR", Helvetica, Arial, sans-serif;
}

.container{

max-width:900px;
margin:auto;
padding:140px 20px;

}


/* header */

.header{

position:fixed;
top:0;
width:100%;
backdrop-filter:blur(10px);

}

.nav{

max-width:900px;
margin:auto;

display:flex;
justify-content:space-between;
align-items:center;

padding:20px;

}

.logo img{
width:180px;
height:auto;
display:block;
}

.menu{

display:flex;
gap:24px;

}

.menu a{

text-decoration:none;
color:black;
font-size:14px;

}


/* hero */

.hero h1{

font-size:48px;
margin-bottom:5px;

}

.hero p{

opacity:.9;

}


/* section */

.section{

margin-top:150px;

}

.section h2{

margin-bottom:30px;

}


/* works */

.work-image{

width:900px;
max-width:900px;
margin:auto;
display:block;
}

.work-text h3{

font-size:14pt;
margin-bottom:10px;

}

.work-text p{

font-size:11pt;
max-width:600px;
margin:auto;

}


/* responsive */

@media (max-width:768px){

.nav{

flex-direction:column;
gap:10px;

}

.menu{

flex-wrap:wrap;
justify-content:center;
gap:14px;

}

.hero h1{

font-size:36px;

}

.container{

padding:120px 24px;

}

}