@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&family=Roboto:wght@100;300;400;500;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&display=swap');

body *{word-break:keep-all;}
*{margin: 0;padding: 0;}
html, body{font-size: 12px; color: #222; font-family: 'Noto Sans KR', sans-serif;
font-family: 'Roboto', sans-serif;}
h1,h2,h3,h4,h5,h6{font-size: 100%;}
ol,ul{list-style: none;}
a{text-decoration: none; color: inherit;}
img,video{vertical-align: bottom;}
address{font-style: normal;}
table{border-collapse: collapse;}
button{background: transparent; border: none;}
.serif{font-family: 'Cormorant Garamond', serif;}

#wrap{
    max-width: 100%;
/*    min-width: 1000px;*/
}


/*<header>--------------------------------------*/
#header{z-index: 50;}


#h_top{
/*     display: none;*/
    width: 100%;
    height: 70px;
    overflow: hidden;
    position: fixed;
    z-index: 1000;background: #fff;

    opacity: 1;
    animation: top 2s forwards;}



.top_logo{
    width: 100px;left: 50%;top: 50%;
    transform: translate(-50%,-50%);
    position: absolute;}
.top_logo a img{width: 100%;}

.home{
    width: 40px;
    height: 40px;
    left: 20px;
    top: 50%; transform: translateY(-50%);
    position: absolute;
    padding: 5.5px;
    box-sizing: border-box;
    line-height: 2;
    opacity: 0.8;
}
.home a{
    display: block;
}
.home a img{
    width: 100%;
}



/*<section>-------------------------------------*/

#main_menu{}



/****아이콘 픽스****/
#icon_fixed_wrap{}
.sns_icon{position: absolute;z-index: 1000;
    text-align: center;bottom: 4%; left: 2%;}
.sns_icon li{transition: 0.3s;
    width: 25px;cursor: pointer;}
.sns_icon li:hover{opacity: 0.5;}
.sns_icon li+li{margin-top: 30px;}
.sns_icon li img{width: 100%;}
.sns_icon li:nth-child(2) img,
.sns_icon li:nth-child(4) img{width: 65%;}




#menu_slide_wrap{
    z-index: 900;
    width: 100%;
    height: 100vh;
}

.main_menu{
    transform: rotate(-90deg) translateY(-208px);
    font-size: 1.2rem;width: 500px;
    height: 40px; top: 30%; color: #666;
    text-align: center;padding: 2% 0 0.5%;
    z-index: 1000;
    position: absolute;
}
.main_menu li{
    display: inline-block;cursor: pointer;
    line-height: 25px;
}
.main_menu li+li{margin-left: 5%;}


.select{border-bottom: 3px solid #333;color: #222;}
.basic{border: none;}



.menu_box{overflow: hidden;
    width: 100%;height: 100vh;}
.menu_box>div{
    height: 100vh; 
   width: 100%;overflow: hidden;
    position: absolute;right: 0;background:#fff;}

.menu_box>div a{
    position: absolute;opacity: 0;
    width: 23%;left: 9.4%;top: 15%;
    padding-bottom: 1%;}
.menu_box>div h2{
    font-size: 6rem;line-height: 1.2;}
.menu_box>div h4{
    font-size: 1.8rem;font-weight: normal;
    margin: 40px 0 10px;color: #444;}
.menu_box>div p{
    font-size: 1.2rem;line-height: 1.3;
    margin-bottom: 80px;width: 100%;color: #666;}
.menu_box>div h5{
    font-size: 2rem; font-weight: normal;
    letter-spacing: 2px;display: block;}

.menu_box>div .backlogo{
    width: 33%;
    position: absolute; z-index: 11;
    bottom: 0;left: 9.4%;
		opacity: 0;
}
.menu_box>div .backimg{
   position: absolute; width: 73.5%;
   bottom: 20%; display: block;right: 0;
    opacity: 0;

}

.menu_box>div .backimg>img{width: 100%;}
.menu_box>div .backlogo>img{width: 100%;}


.media_h2{display: none;}


.menu_1{ z-index: 5; }







@media screen and (max-width:1750px){



.main_menu{
    transform: rotate(-90deg) translateY(-208px);
    font-size: 1.2rem;width: 500px;
    height: 40px; top: 40%;
    text-align: center;padding: 2% 0 0.5%;
    z-index: 1000;
    position: absolute;
}


.menu_box>div{
   width: 100%;
    right: 0;}

.menu_box>div a{
    position: absolute;
    width: 23%;left: 7.8%;top: 15%;	
	}
	
	
.menu_box>div h5{font-size: 1.8rem;}
.menu_box>div .backlogo{
    width: 37%;left: 7.8%;}
.menu_box>div .backimg{
   width: 76%;}
     
    
}


@media screen and (max-width:1550px){


#h_top{display: block;}    

    
.headerbg{
    background: #fff;
    position: absolute;
    width: 100%;
    height: 200px;
}    
    
    
.sns_icon{
    text-align: center;bottom: auto;
    left: auto;right: 26.7px;
    top: 10.1%;
    }
.sns_icon li{width: 25px;}
.sns_icon li+li{margin-top: 25px;}
.sns_icon li img{width: 100%;}
.sns_icon li:nth-child(2) img,
.sns_icon li:nth-child(4) img{width: 65%;}

.main_menu{
    transform: rotate(-90deg) translateY(-208px);
    font-size: 1.2rem;width: 500px;
    height: 40px; top: 27%;
    padding: 1% 0 0.5%;}
.main_menu li{
    display: inline-block;
    line-height: 25px;
}
.main_menu li+li{margin-left: 5%;}

.menu_box>div{
   width: 100%; height: 100vh; bottom: 0;
    position: absolute;right: 0;}

.menu_box>div a{
    width: 100%;top: 10%;left: 0;
    text-align: center;opacity: 1;
    background: #fff;
}
.menu_box>div h2{
    font-size: 5rem;line-height: 1.2;}
.menu_box>div h4{
    font-size: 1.5rem;font-weight: normal;
    margin: 20px 0 5px}
.menu_box>div p{
    font-size: 1.1rem;line-height: 1.3;
    width: 50%;margin: auto;}
.menu_box>div h5{
    margin-top: 20px;
    font-size: 1.5rem;letter-spacing: 2px;}

.menu_box>div .backlogo{display: none;}
.menu_box>div .backimg{
   width: 60%;
   left: 46.7%;transform: translateX(-50%);}
.menu_box>div .backimg>img{width: 100%;}
.menu_box>div .backlogo>img{width: 100%;}


.full_h2{display: none;}
.media_h2{display: block;}   
 
}






@media screen and (max-width:1450px){
.menu_box>div .backimg{width: 65%;left: 46%;}}
@media screen and (max-width:1350px){
.menu_box>div .backimg{width: 70%;left: 46%;}}
@media screen and (max-width:1250px){
.menu_box>div .backimg{width: 75%;left: 46%;}}
@media screen and (max-width:1150px){
.menu_box>div .backimg{width: 80%;left: 46%;}}
@media screen and (max-width:1100px){
.menu_box>div .backimg{width: 85%;left: 46%;}}






@media screen and (max-width:965px){

.sns_icon{
    display: none;
    }


.main_menu{
    transform: rotate(0) translateY(0) translateX(-50%);overflow: hidden;
    font-size: 1.15rem;width: 100%;
    left: 50%;top: 10%;padding: 1% 0 0.5%;}

.main_menu li+li{margin-left: 3%;}


.menu_box>div{
   width: 100%;
    position: absolute;right: 0;}

.menu_box>div a{top: 18%;}
.menu_box>div h2{font-size: 4rem;}
.menu_box>div h4{
    font-size: 1.5rem;font-weight: normal;
    margin: 10px 0 5px}
.menu_box>div p{
    font-size: 1.1rem;line-height: 1.3;
    width: 70%;margin: auto;}
.menu_box>div h5{
    margin-top: 10px;font-size: 1.3rem;}


.menu_box>div .backimg{
   width: 90%;
   left: 45%;transform: translateX(-50%);}
    
    
    
}





@media screen and (max-width:840px){



.main_menu{
    font-size: 1.15rem;overflow: hidden;
    left: 50%;top: 11%;padding: 1% 0 0.5%;}


.menu_box>div a{top: 19%;}
.menu_box>div h2{font-size: 4rem;}
.menu_box>div h4{
    font-size: 1.4rem;margin: 25px 0 10px}
.menu_box>div p{
    font-size: 1.1rem;line-height: 1.3;
    width: 80%;margin: auto;}
.menu_box>div h5{
    margin-top: 25px;font-size: 1.3rem;}
  
}





@media screen and (max-width:740px){
.menu_box>div .backimg{
   width: 100%;
   left: 44.2%;transform: translateX(-50%);}  
}




@media screen and (max-width:650px){


.main_menu{
    font-size: 1.15rem;overflow: hidden;
    left: 50%;top: 12%;padding: 1% 0 0.5%;}

.menu_box>div{
   width: 100%;
    position: absolute;right: 0;}

.menu_box>div a{top: 23%;}
.menu_box>div h2{font-size: 4rem;}
.menu_box>div h4{
    font-size: 1.4rem;margin: 25px 0 10px}
.menu_box>div p{
    font-size: 1.1rem;line-height: 1.3;
    width: 90%;margin: auto;}
.menu_box>div h5{
    margin-top: 25px;font-size: 1.3rem;}

.menu_box>div .backimg{
   width: 100%;
   left: 44.2%;transform: translateX(-50%);}
   
}





@media screen and (max-width:600px){

/*
.sns_icon{
    text-align: center;bottom: auto;
    left: auto;right: 26.7px;
    top: 10.1%;
    }
*/

.main_menu{
    font-size: 1.15rem;overflow: hidden;
    left: 50%;top: 12%;padding: 1% 0 0.5%;}
.menu_box>div .backimg{
   width: 110%;
   left: 44%;transform: translateX(-50%);}
   
}




@media screen and (max-width:550px){

.main_menu{
    font-size: 1.15rem;overflow: hidden;
    left: 50%;top: 12%;padding: 1% 0 0.5%;}

.main_menu li+li{margin-left: 4%;}


.menu_box>div{
   width: 100%;
    position: absolute;right: 0;}

.menu_box>div a{top: 19%;}
.menu_box>div h2{font-size: 4rem;}
.menu_box>div h4{
    font-size: 1.4rem;margin: 20px 0 5px}
.menu_box>div p{
    font-size: 1.1rem;line-height: 1.3;
    width: 90%;margin: auto;}
.menu_box>div h5{
    margin-top: 20px;font-size: 1.3rem;}

.menu_box>div .backimg{
   width: 140%;
   left: 44%;transform: translateX(-50%);}
   
}


@media screen and (max-width:500px){

.sns_icon{display: none;}


.main_menu{
    font-size: 1.15rem;overflow: hidden;
    left: 50%;top: 10%;padding: 1% 0 0.5%;}

.main_menu li+li{margin-left: 5%;}

.menu_box>div a{top: 17%;}
.menu_box>div h2{font-size: 3rem;}
.menu_box>div h4{
    font-size: 1.2rem;margin: 15px 0 5px}
.menu_box>div p{
    font-size: 1.1rem;line-height: 1.3;
    width: 90%;margin: auto;}
.menu_box>div h5{
    margin-top: 20px;font-size: 1.3rem;}

.menu_box>div .backimg{
   width: 173%;left: 44%;}
    
.menu_box .menu_3 .backimg{left: 39%;}
.menu_box .menu_4 .backimg{left: 26%;}
.menu_box .menu_5 .backimg{left: 29%;}
   
}





    


@media screen and (max-width:450px){
/***공통영역***/
    
.top_logo{width: 80px;}
.home{width: 38px;height: 35px;left: 12px;}
#h_top{height: 60px;}


.main_menu{top: 13%;overflow: hidden;}
    


.menu_box>div a{top: 25%;}
.menu_box>div h2{font-size: 3rem;}
.menu_box>div h4{display: none;}
.menu_box>div p{display: none;}
.menu_box>div h5{
    margin-top: 3vw;font-size: 1.3rem;}

.menu_box>div .backimg{
   width: 165%;left: 44%;}
    
.menu_box .menu_3 .backimg{left: 39%;}
.menu_box .menu_4 .backimg{left: 26%;}
.menu_box .menu_5 .backimg{left: 29%;}
    

}