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

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

/*3-글자관련 스타일*/
body{font-family: 'SUITE Variable', sans-serif; }
h1{font-size: 60px; font-weight: 100;}
h2 {font-size: 40px; font-weight: 700; text-align: center;}
h3{font-size: 30px; font-weight: 100;}
h4{font-size: 20px; font-weight: 600;}
h5{font-size: 20px; font-weight: 700;}
h6{font-size: 15px; font-weight: 700;}
p{font-size: 14px; line-height: 22px; opacity: 0.6;}
@media(max-width:1000px)
{h2{font-size: 30px;}}

/*4-공통된스타일 : 컨테이너 너비, 버튼모양*/
.section-title{width: 90%; max-width: 1300px; margin: 0 auto 50px; }
.container{ width: 90%; max-width: 1300px; margin: 0 auto;}
.btn{
display: inline-block;
background-color: black;
color: white;
font-size: 14px;
text-decoration: underline;
font-weight: 500; border-radius: 50px;
border: none; outline: none; width: 150px; height: 30px;}

/*5-해더,*/
header{position: fixed; top: 0; left: 0; z-index: 100; width: 100%; }

header aside{background-color: #61403e; height: 30px;
display: flex; align-items: center; justify-content: center; color: white; font-size: 14px;}

header .container
{background-color: white; width: 100%; max-width: 100%;
padding: 0 30px; box-sizing: border-box;
display: flex; align-items: center; justify-content: space-between;
height: 80px;}

header .menu{
position: absolute; left: 50%; transform: translate(-50%, 0);
display: flex; gap: 20px; }

img{width: 50px;}
header .icon{position: absolute; right: 100px; font-size: 20px; }

header .ham{ width: 36px; height: 36px;}
header .ham .bar{top: 50%; display: block; width: 25px; height: 2px; background-color: black;
position: absolute; left: 0; top: calc(50% -1px);}

header .ham .bar1{transform: translate(0, -10px);}
header .ham .bar3{transform: translate(0, 10px);}

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

/*6-푸터*/
footer{background-color: black; color: white;line-height: 30px;}
footer .container1{display: grid; grid-template-columns:1fr 1fr 1fr; gap:10px;}
footer .container2{display: grid; grid-template-columns:1fr 1fr;}
footer .container2{display: flex; gap: 10px;}
footer .row1{display: flex;}
footer .row1 .item{padding: 50px 60px;}
footer i{font-size: 25px; padding-top: 10px;}
footer .row1 .item:last-child{border-right: none;}
footer .row2{background-color: black; display: flex; align-items: left; justify-content:left; gap: 15px; padding-left: 20px; color: white; padding-bottom: 30px; font-size: 14px; font-weight: 300; line-height: 17px;}
.my-select {background-color:black; color: white; width: 100px; border: 1px solid white;
}

footer input{display: block;
        box-sizing: border-box;}
        input{background-color: black; border: 1px solid white; padding: 10px; width: 200px; color: white;}

        input::placeholder{color: rgb(80, 80, 80);} 
        input:focus::placeholder {color: white;} 

footer .container1 .btn1 {
background-color: white;
color: black;
font-size: 14px;
font-weight: 600;
border: none; outline: none; width: 20px; height: 35px;}
footer .item4 .container1{padding-bottom: 20px; padding-top: 10px;}

@media(max-width:800px)
{footer .row1{flex-direction: column; }
footer .row1 .item{width: 100%; width: 100%; padding: 20px 30px;}
footer .row1 .item1{display: 2;padding-bottom: 0px;}
footer .row1 .item2{order:2;}
footer .row1 .item3{order:1;}}