/*폰트연결*/
@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');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200..900&display=swap');


/*리셋*/
*{padding: 0;margin: 0;position: relative;}
img{display: block;object-fit: cover;}
video{display: block;object-fit: cover;width: 100%;height: 100%;}
li{list-style: none;}

/*폰트설정*/
body{font-family: 'SUIT Variable', sans-serif;}
h1{font-size: 80px;font-weight: 900;text-transform: uppercase;}
h2{
    font-size: 35px;font-weight: 100;word-break: keep-all;line-height: 45px;
    opacity: 0.6;
}
h2 span{
    
}
h3{font-size: 16px;opacity: 0.6;font-weight: 600;}
h4{font-size: 16px;text-transform: uppercase;opacity: 0.8; font-weight: 700;}
h6{font-size: 13px;opacity: 0.6;text-transform: uppercase;font-weight: 800;letter-spacing: 1px;margin-bottom: 8px;}
p{font-size: 14px;line-height: 22px;opacity: 0.6;}

@media(max-width:800px){
    h1{font-size: 30px;}
    h2{font-size: 25px;}
    h6{font-size: 12px;}
}



/*공통스타일*/
section{
    padding-top:100px;padding-bottom:100px;
    box-sizing: border-box;
}
.section-title{ 

    width:90%; max-width:1200px; margin:0 auto 30px;
}
.section-title h2{max-width: 800px;}
.container{ 

    width:90%; max-width:1200px; margin:0 auto;
}
.sns{
    display: flex; flex-wrap: wrap;
    gap:20px;text-transform: uppercase; font-size: 12px;}
    .top-btn{
        position: fixed;
        right:30px;bottom:30px;
        z-index: 100;
        background-color: #174143;
        color:white;
        width:60px;height:60px;
        border-radius: 50%;
        display: flex;align-items: center;justify-content: center;
    }
/*해더부분 스타일*/

header{
    /*background-color:rgba(255,255,255,0.7) ;*/
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0) 70%);
    /*border-bottom:1px solid #eeeeee;*/
    position: fixed;width:100%;box-sizing: border-box;
    top:0;left:0;z-index: 100;
    /*backdrop-filter: blur(30px);*/
    color:white;

}
header .container{
    height: 100px;
    display: flex;
    justify-content:space-between ;
    align-items:center ;
    font-size: 14px;
}
header .logo img{width: 130px}
header .menu{
    display: flex;gap:20px;
    text-transform: uppercase;font-size: 14px;
    font-weight: 700;
}
header .ham{display: none;}
@media(max-width:800px){
    header .container{height: 60px}
    header .menu{display: none;}
    header .ham{display: block;}
    header .logo img{width: 80px}
}


/*메인 이미지*/
.main{

    height:100vh;
    /*화면 높이만큼==100vh , 화면 높이의 반만큼==50vh*/
    display: flex;align-items: center;justify-content: center;
    text-align: center;color:white;
}
.main video{position: absolute;top:0;left:0;filter: brightness(0.7);z-index: -1;}
.main .text{}
.main .text h1{}
.main .text p{font-size: 22px; margin-bottom: 50px;}
.main .btn{
    font-weight: 800;
    background-color: white;
    width: 180px;
    margin: 0 auto;
    color:#174143;height: 50px;
    display: flex;align-items: center;justify-content: center;border-radius: 30px;
}


/*1*/
.section1{background-color: #EEEEEE;}
.section1 .section-title{}
.section1 .section-title h2{}
.section1 .container{}
.section1 .container h2{color:#CD2C58;margin-bottom: 10px;}
.section1 h2{margin-bottom: 20px;}




/*2*/
.section2{}
.section2 .filter{
    display: flex;justify-content: center; margin-bottom: 30px;flex-wrap: wrap;}
.section2 .filter .btn{font-size: 12px;font-weight:700;
    text-transform: capitalize;color:#666666;
    padding: 8px 20px; border-radius: 20px;}
.section2 .filter .active{
    background-color:#758A93 ;color:white;}
.section2 .container{
    display: grid;grid-template-columns: repeat(3,1fr);gap:30px;
}
.section2 .item img{width:100%;
aspect-ratio: 1;}

.section2 .more-btn{
    width: 180px;height:60px;
    margin: 50px auto;
    text-align: center;
     background-color:#758A93 ;color:white;
     display: flex;align-items: center;justify-content: center;
     border-radius: 50px;
}
@media(max-width:800px){
    .section2 .container{
        grid-template-columns: repeat(2,1fr);
    }
}



/*3*/
.section3{background-color:#EEEEEE ;}
.section3 .container{
    display: grid;grid-template-columns: repeat(3,1fr);gap:30px;
}
.section3 .item{background-color: white;padding: 30px;}
.section3 .item img{margin-bottom: 0px;max-width: 70px;}
.section3 h4{margin-bottom: 10px;}

@media(max-width:800px){
    .section3 .container{
        grid-template-columns: repeat(2,1fr);
    }
}
@media(max-width:500px){
    .section3 .container{
        grid-template-columns: repeat(1,1fr);
    }
}

/*44444444444444444*/
.section4{
    background-color:#758A93 ;
    color:white;}
.section4 .cont1{margin-bottom: 40px;}
.section4 .cont1 .item{
    border-bottom:1px solid rgba(255,255,255,0.3);height:50px;
    display: flex;align-items: center;}
.section4 .cont1 .item p{ width:10%; text-transform: capitalize;}

.section4 .cont2{display: flex;}
.section4 .cont2 .item{width:33.3%}
.section4 .cont2 .item h4{margin-bottom:8px;}
.section4 .cont2 .item p{}

@media(max-width:800px){
    .section4 .cont1 .item{
        display:block; height: auto; padding: 20px 0;
    }
    .section4 .cont1 .item p{width: auto;}

    .section4 .cont2{display: block; }
    .section4 .cont2 .item{width: auto;margin-bottom: 30px;}

}



/*5555*/
.section5{padding: 0; background-color: #C4A484;

}
.section5 .container{
    width:100%; max-width:100%;
    display: grid; grid-template-columns: repeat(4,1fr);gap:1px;
}
.section5 .item{
    background-color: #EDEAE8;height:300px;
    display: flex;align-items: center;justify-content: center;
}
.section5 .item img{
}
@media(max-width:800px){
    .section5 .container{
         grid-template-columns: repeat(2,1fr);
    }
    .section5 .item{
      aspect-ratio: 1;height:auto}

}


.section6{background-color:#758A93; color:white;}
.section6 .container{display: flex;gap:50px;}
.section6 .item{width:50%;}
.section6 .left{display: grid;grid-template-columns: 1fr 1fr;
gap:10px;}
.section6 .left .box{}
.section6 .left .box3{grid-column: 2 span;height:200px}
.section6 .left .box4{grid-column: 2 span;}

.section6 .right{}
.section6 .right .box{
    display: flex;align-items: center;gap:20px;margin-bottom: 30px;}
.section6 .right .icon{
    width:60px;height:60px;background-color: white;color:#C4A484; border-radius: 50%;
    display: flex;align-items: center;justify-content: center;
}
.section6 .right .text{}


@media(max-width:800px){
    .section6 .container{flex-direction: column;}
    .section6 .item{width: auto;}
    .section6 .left{grid-template-columns: 1fr;}
    .section6 .left .box{grid-column: auto;}
}



input,textarea{
    display: block;
    box-sizing: border-box;
    outline: none;
    border:none;
    padding: 10px;
    width: 100%;height: 100%;
    background-color: rgba(0,0,0,.2);
    color:white;
}
input::placeholder,
textarea::placeholder{color:rgba(255,255,255,0.5);font-family: 'SUIT Variable', sans-serif;font-size: 14px;}
input:focus,textarea:focus{
    border:1px solid pink
}
button{
    background-color: white;
    border: none;
    padding: 10px;
    display: block;
    width: 100%;
    border-radius: 5px;
    color:#C4A484;font-weight: 700;letter-spacing: 2px;
}