/*1-폰트연결-폰트어썸,사용폰트*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"); 
@import url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/variable/woff2/SUIT-Variable.css');

/*2-스타일 리셋*/
*{position: relative;padding: 0;margin: 0;}
video,img{width:100%;display: block;object-fit: cover;}
li{list-style: none;}
a{color: inherit;text-decoration: none;display: inline-block;}

/*3-글자관련 스타일*/
body{font-family: 'SUIT Variable', sans-serif; font-size: 14px;}
h1{font-size: 60px;font-weight: 100;text-transform: capitalize;line-height: 65px;}
h1 span{font-weight: 700;}
h2{font-size: 40px;font-weight: 100;text-transform: uppercase;opacity: 0.8;}
h2 span{font-weight: 700;}
h3{font-size: 30px;font-weight: 100;text-transform: uppercase;}
h3 span{font-weight: 700;}
h4{font-size: 18px;font-weight: 600;opacity: 0.8;text-transform: uppercase;}
h5{font-size: 14px;font-weight: 700;opacity: 0.7;text-transform: uppercase;}
h6{font-size: 14px;font-weight: 700;opacity: 0.4;text-transform: uppercase;}
p{font-size: 14px;line-height: 22px;opacity: 0.6;}
/*4-공통된스타일 : 컨테이너 너비, 버튼모양 */

.section-title{
    width:90%;max-width: 1300px;margin: 0 auto 40px;text-align: center;}
.container{ width:90%;max-width: 1300px;margin: 0 auto;}
.btn{
    display: inline-block;
    padding: 10px 30px;
    background-color: white;
    color: black;
    font-size: 14px;
    font-weight: 700;border-radius:20px ;
    border:none;outline: none;
}

/*5-해더 , 푸터*/

/*해더 관련스타일*/
header{
    position: fixed;top:0;left:0;z-index: 100;width:100%;}
header aside{background-color: rgb(255, 255, 255);height:30px;
display: flex;align-items: center;justify-content: center;
color:#666666;font-weight: 600;}
header .container{
    background-color: black;
    color:white;
    width:100%;max-width: 100%;
    padding: 0 30px; box-sizing: border-box;height: 80px;
    display: flex;align-items: center;justify-content: space-between;}
header .logo{width:170px}
header .menu{
    position: absolute;left:50%;transform: translate(-50%,0);
    display: flex;gap:40px;
    font-size: 15px;;
}
header .icon{position: absolute;right:100px; display: flex;}
header .icon img{width: 32px;}

header .ham{width:36px;height:36px;}
header .ham .bar{display: block;width:36px;height:1px;
background-color: white;
position: absolute;left:0;top:calc(50% - 0px)}
header .ham .bar1{transform: translate(0,-10px);}
header .ham .bar2{}
header .ham .bar3{transform: translate(0,10px);}

@media(max-width:1000px){
    header .menu{display: none;}
    header .icon{right:30px;}
    header .logo{position: absolute;left:50%;transform: translate(-50%,0);}
    header .ham{position: absolute; left:30px;}
}