@charset "utf-8";

@font-face {
    font-family: 'SpoqaHanSansNeo-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

*{margin: 0; padding: 0;}
li{list-style: none;}
a{text-decoration: none; display: block;}
img{border: none; display: block;}

section,header,footer,div,nav,h1,h2,h3,h4,p,li,a,address,span,label, input, button, table, tr, th, td{ font-family: 'Spoqa Han Sans Neo', 'sans-serif';  font-weight: 400; font-size: 14px; color: #333; font-style: normal;}

.more_btn{display: block; line-height: 40px; width: 200px; border: 1px solid #fff; color: #fff; margin: 0 auto; border-radius: 10px; transition-duration: 0.5s; text-align: center;}



#header{width: 100%; background-color: rgba(0,0,0,0); position: fixed; height: 100px; z-index: 10; transition-duration: 0.5s;}
#header.down{background-color: #fff;box-shadow : 0 1px 2px rgba(0,0,0,0.3)}
#header.down .header_inner .gnb>ul>li>a{color: #333;}
#header.down .header_inner .util>ul>li>a{color: #333;}
/* #wrap{overflow: hidden;}

/* pc */
@media screen and (min-width:1441px) {

.main_title{position: relative; font-size: 2.5vw; font-weight: 700;}
.con_title{position: relative; font-size: 1.8vw; font-weight: 700;}


    /* header */
#header{width: 100%; background-color: rgba(0,0,0,0); position: fixed; height: 100px; z-index: 10; transition-duration: 0.5s;}

#header .header_inner{position: relative; width: 90%; max-width: 1440px; display: flex; justify-content: space-between; margin: 0 auto;}
#header .header_inner .top_logo{position: absolute; top: 10px; left: 0;}
#header .header_inner .top_logo img{width: 100%;}

#header .header_inner .gnb{position: absolute; left: 50%; transform: translate(-50%);}
#header .header_inner .gnb>ul{display: flex;}
#header .header_inner .gnb>ul>li{position: relative;}
#header .header_inner .gnb>ul>li>a{line-height: 100px;width: 110px; text-align: center; font-size: 1.2em; font-weight: 500; color: #fff;}

#header .header_inner .gnb>ul>li>.sub_menu{position: absolute;background-color: #fff; width: 140px; padding: 20px; box-sizing: border-box; border-radius: 10px; box-shadow: 2px 2px 4px rgba(0,0,0,0.3); display: none;}
#header .header_inner .gnb>ul>li>.sub_menu a{line-height: 40px;}
#header .header_inner .gnb>ul>li>a:hover{color: #FFAA45;}
/* #header .header_inner .gnb>ul>li:hover .sub_menu{display: block;} */
#header .header_inner .gnb>ul>li .sub_menu a:hover{color: #FFAA45;}

#header .header_inner .gnb>ul>li>a::after{content: ''; position: absolute; left: 50%; top: 60px; transform: translate(-50%,0); width: 0%; height: 2px; background-color: #FFAA45; transition-duration: 0.5s;}
#header .header_inner .gnb>ul>li:hover>a::after{content: ''; position: absolute; left: 50%; top: 60px; transform: translate(-50%,0); width: 70%; height: 2px; background-color: #FFAA45;}
#header .header_inner .gnb>ul>li:nth-child(4)>a:hover::after{width: 90%;}
#header .header_inner .gnb>ul>li:nth-child(5)>a:hover::after{width: 90%;}

#header .header_inner .util{position: absolute; right: 0;}
#header .header_inner .util>ul{display: flex; align-items: center;}
#header .header_inner .util>ul>li{margin-left: 10px; position: relative;}
#header .header_inner .util>ul>li .menu_btn{position: relative;top: 2px; background: none; border: none; cursor: pointer;}
#header .header_inner .util>ul>li>a{line-height: 100px; color: #fff;}

.menu{position: fixed; right: -70%; top: 0; width: 60%; height: 100vh; background-color: rgba(255,255,255,1); display: block; z-index: 99;padding: 50px; box-sizing: border-box; border-left:4px solid #333 ;}

.menu .menu_gnb>ul{position:relative; display: flex; justify-content: space-between; padding: 20% 0;}
.menu .menu_gnb>ul>li{width: 24%;}
.menu .menu_gnb>ul>li>a{font-size: 1.8em; position: relative; font-weight: 700;}
.menu .menu_gnb>ul>li>a::after{content: ''; position: absolute; left: -2%; top: 30px; width: 100px; height: 2px; background-color: #FFAA45;}
.menu .menu_gnb>ul>li:nth-child(4)>a::after{width: 140px;}
.menu .menu_gnb>ul>li:nth-child(5)>a::after{width: 140px;}
.menu .menu_gnb>ul>li>ul{padding: 30px 0; display: none;}
.menu .menu_gnb>ul>li>ul a{line-height: 50px; font-size: 1.4em;}
.menu .menu_gnb>ul>li>ul a:hover{color: #FFAA45;}
.menu .menu_close{background: #fff; border: 4px solid #333; border-right: 4px solid #fff; position: absolute; left: 0; top: 50%; transform: translate(-50px,-50%); width: 50px; cursor: pointer;}
.menu .menu_close img{width: 100%;}


#footer{position: relative;  width: 100%; background-color: #444; z-index: 5;}
#footer .footer_inner{width: 90%; max-width: 1440px; margin: 0 auto; padding: 60px 0;}
#footer .footer_inner .footer_top a{color: #fff;}

#footer .footer_inner .footer_top{display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid #eee; padding-bottom: 10px;}
#footer .footer_inner .footer_top>ul{display: flex;}
#footer .footer_inner .footer_top>ul li{margin: 0 10px;}
#footer .footer_inner .footer_top .info_list li:first-child{margin:0 10px 0 0;}

#footer .footer_inner .footer_bottom{position: relative; display: flex; justify-content: space-between; margin-top: 20px;}
#footer .footer_inner .footer_bottom p{color: #aaa; margin-bottom: 10px;}
}










@media screen and (min-width:1201px) and (max-width:1440px) {

.main_title{position: relative; font-size: 3vw; font-weight: 700;}
.con_title{position: relative; font-size: 2vw; font-weight: 700;}


/* header */
#header{width: 100%; background-color: rgba(0,0,0,0); position: fixed; height: 100px; z-index: 10; transition-duration: 0.5s;}
#header .header_inner{position: relative; width: 90%; max-width: 1440px; display: flex; justify-content: space-between; margin: 0 auto;transition-duration: 0.5s;}
#header .header_inner .top_logo{position: absolute; top: 10px; left: 0;}
#header .header_inner .top_logo img{width: 100%;transition-duration: 0.5s;}

#header .header_inner .gnb{position: absolute; left: 50%; transform: translate(-50%);transition-duration: 0.5s;}
#header .header_inner .gnb>ul{display: flex;}
#header .header_inner .gnb>ul>li{position: relative;}
#header .header_inner .gnb>ul>li>a{line-height: 100px;width: 110px; text-align: center; font-size: 1.2em; font-weight: 500; color: #fff;}

#header .header_inner .gnb>ul>li>.sub_menu{position: absolute;background-color: #fff; width: 140px; padding: 20px; box-sizing: border-box; border-radius: 10px; box-shadow: 2px 2px 4px rgba(0,0,0,0.3); display: none;}
#header .header_inner .gnb>ul>li>.sub_menu a{line-height: 40px;}
#header .header_inner .gnb>ul>li>a:hover{color: #FFAA45;}
/* #header .header_inner .gnb>ul>li:hover .sub_menu{display: block;} */
#header .header_inner .gnb>ul>li .sub_menu a:hover{color: #FFAA45;}

#header .header_inner .gnb>ul>li>a::after{content: ''; position: absolute; left: 50%; top: 60px; transform: translate(-50%,0); width: 0%; height: 2px; background-color: #FFAA45; transition-duration: 0.5s;}
#header .header_inner .gnb>ul>li:hover>a::after{content: ''; position: absolute; left: 50%; top: 60px; transform: translate(-50%,0); width: 70%; height: 2px; background-color: #FFAA45;}
#header .header_inner .gnb>ul>li:nth-child(5)>a:hover::after{width: 90%;}
#header .header_inner .gnb>ul>li:nth-child(4)>a:hover::after{width: 90%;}

#header .header_inner .util{position: absolute; right: 0;}
#header .header_inner .util>ul{display: flex; align-items: center;}
#header .header_inner .util>ul>li{margin-left: 10px; position: relative;}
#header .header_inner .util>ul>li .menu_btn{background: none; border: none; cursor: pointer;}
#header .header_inner .util>ul>li>a{line-height: 100px; color: #fff;}


.menu{position: fixed; right: -70%; top: 0; width: 50%; height: 100vh; background-color: rgba(255,255,255,1); display: block; z-index: 99;padding: 50px; box-sizing: border-box; border-left:4px solid #333 ;}
.menu .menu_gnb>ul{position:relative; display: flex; flex-direction: column; justify-content: space-between;}
.menu .menu_gnb>ul>li{margin-bottom: 50px;}
.menu .menu_gnb>ul>li>a{font-size: 1.6em; position: relative; font-weight: 700;}
.menu .menu_gnb>ul>li>a::after{content: ''; position: absolute; left: -2%; top: 30px; width: 100px; height: 2px; background-color: #FFAA45;}
.menu .menu_gnb>ul>li:nth-child(5)>a::after{width: 140px;}
.menu .menu_gnb>ul>li:nth-child(4)>a::after{width: 140px;}
.menu .menu_gnb>ul>li>ul{padding: 10px 0; display: none;}
.menu .menu_gnb>ul>li>ul a{line-height: 40px; font-size: 1.2em;}
.menu .menu_gnb>ul>li>ul a:hover{color: #FFAA45;}
.menu .menu_close{background: #fff; border: 4px solid #333; border-right: 4px solid #fff; position: absolute; left: 0; top: 50%; transform: translate(-50px,-50%); width: 50px; cursor: pointer;}
.menu .menu_close img{width: 100%;}


#footer{position: relative;  width: 100%; background-color: #444; z-index: 5;}
#footer .footer_inner{width: 90%; max-width: 1440px; margin: 0 auto; padding: 60px 0;}
#footer .footer_inner .footer_top a{color: #fff;}

#footer .footer_inner .footer_top{display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid #eee; padding-bottom: 10px;}
#footer .footer_inner .footer_top>ul{display: flex;}
#footer .footer_inner .footer_top>ul li{margin: 0 10px;}
#footer .footer_inner .footer_top .info_list li:first-child{margin:0 10px 0 0;}

#footer .footer_inner .footer_bottom{position: relative; display: flex; justify-content: space-between; margin-top: 20px;}
#footer .footer_inner .footer_bottom p{color: #aaa; margin-bottom: 10px;}
}










@media screen and (min-width:801px) and (max-width:1200px) {
    
.main_title{position: relative; font-size: 3.6vw; font-weight: 700;}
.con_title{position: relative; font-size: 3vw; font-weight: 700;}


/* header */
#header{width: 100%; background-color: rgba(0,0,0,0); position: fixed; height: 80px; z-index: 10; transition-duration: 0.5s;}
#header .header_inner{position: relative; width: 90%; max-width: 1440px; display: flex; justify-content: space-between; margin: 0 auto;}
#header .header_inner .top_logo{position: absolute; top: 10px; left: 0;}
#header .header_inner .top_logo img{height: 60px;;}

#header .header_inner .gnb{display: none;}

#header .header_inner .util{position: absolute; right: 0;}
#header .header_inner .util>ul{display: flex; align-items: center;}
#header .header_inner .util>ul>li{margin-left: 10px; position: relative;}
#header .header_inner .util>ul>li .menu_btn{background: none; border: none; cursor: pointer;}
#header .header_inner .util>ul>li>a{line-height: 80px; color: #fff;}

.menu{position: fixed; right: -70%; top: 0; width: 50%; height: 100vh; background-color: rgba(255,255,255,1); display: block; z-index: 99;padding: 50px; box-sizing: border-box; border-left:4px solid #333 ;}

.menu .menu_gnb>ul{position:relative; display: flex; flex-direction: column; justify-content: space-between; padding: 20% 0}
.menu .menu_gnb>ul>li{margin-bottom: 50px;}
.menu .menu_gnb>ul>li>a{font-size: 1.6em; position: relative; font-weight: 700;}
.menu .menu_gnb>ul>li>a::after{content: ''; position: absolute; left: -2%; top: 30px; width: 100px; height: 2px; background-color: #FFAA45;}
.menu .menu_gnb>ul>li:nth-child(5)>a::after{width: 140px;}
.menu .menu_gnb>ul>li:nth-child(4)>a::after{width: 140px;}
.menu .menu_gnb>ul>li>ul{padding: 10px 0; display: none;}
.menu .menu_gnb>ul>li>ul a{line-height: 40px; font-size: 1.2em;}
.menu .menu_gnb>ul>li>ul a:hover{color: #FFAA45;}
.menu .menu_close{background: #fff; border: 4px solid #333; border-right: 4px solid #fff; position: absolute; left: 0; top: 50%; transform: translate(-50px,-50%); width: 50px; cursor: pointer;}
.menu .menu_close img{width: 100%;}


#footer{position: relative;  width: 100%; background-color: #444; z-index: 5;}
#footer .footer_inner{width: 90%; max-width: 1440px; margin: 0 auto; padding: 60px 0;}
#footer .footer_inner .footer_top a{color: #fff;}

#footer .footer_inner .footer_top{display: flex; justify-content: space-between; align-items: center; flex-direction: column; border-bottom: 1px solid #eee;}
#footer .footer_inner .footer_top>ul{display: flex; margin-bottom: 20px;}
#footer .footer_inner .footer_top>ul li{margin: 0 10px;}
#footer .footer_inner .footer_top .info_list li:first-child{margin:0 10px 0 0;}

#footer .footer_inner .footer_bottom{position: relative; display: flex; justify-content: space-between; align-items: center; flex-direction: column; margin-top: 20px;}
#footer .footer_inner .footer_bottom p{text-align: center; color: #aaa; margin-bottom: 10px;}
#footer .footer_inner .footer_bottom .footer_logo{margin-top: 30px;}
}









@media screen and (min-width:601px) and (max-width:800px) {
        
.main_title{position: relative; font-size: 4.4vw; font-weight: 700;}
.con_title{position: relative; font-size: 3.4vw; font-weight: 700;}


/* header */
#header{width: 100%; background-color: rgba(0,0,0,0); position: fixed; height: 80px; z-index: 10; transition-duration: 0.5s;}
#header .header_inner{position: relative; width: 90%; max-width: 1440px; display: flex; justify-content: space-between; margin: 0 auto;}
#header .header_inner .top_logo{position: absolute; top: 10px; left: 0;}
#header .header_inner .top_logo img{height: 60px;;}

#header .header_inner .gnb{display: none;}

#header .header_inner .util{position: absolute; right: 0;}
#header .header_inner .util>ul{display: flex; align-items: center;}
#header .header_inner .util>ul>li{margin-left: 10px; position: relative;}
#header .header_inner .util>ul>li .menu_btn{background: none; border: none; cursor: pointer;}
#header .header_inner .util>ul>li>a{line-height: 80px; color: #fff;}

.menu{position: fixed; right: -70%; top: 0; width: 50%; height: 100vh; background-color: rgba(255,255,255,1); display: block; z-index: 99;padding: 50px; box-sizing: border-box; border-left:4px solid #333 ;}

.menu .menu_gnb>ul{position:relative; display: flex; flex-direction: column; justify-content: space-between; padding: 20% 0}
.menu .menu_gnb>ul>li{margin-bottom: 50px;}
.menu .menu_gnb>ul>li>a{font-size: 1.6em; position: relative; font-weight: 700;}
.menu .menu_gnb>ul>li>a::after{content: ''; position: absolute; left: -2%; top: 30px; width: 100px; height: 2px; background-color: #FFAA45;}
.menu .menu_gnb>ul>li:nth-child(5)>a::after{width: 140px;}
.menu .menu_gnb>ul>li:nth-child(4)>a::after{width: 140px;}
.menu .menu_gnb>ul>li>ul{padding: 10px 0; display: none;}
.menu .menu_gnb>ul>li>ul a{line-height: 40px; font-size: 1.2em;}
.menu .menu_gnb>ul>li>ul a:hover{color: #FFAA45;}
.menu .menu_close{background: #fff; border: 4px solid #333; border-right: 4px solid #fff; position: absolute; left: 0; top: 50%; transform: translate(-50px,-50%); width: 50px; cursor: pointer;}
.menu .menu_close img{width: 100%;}


#footer{position: relative;  width: 100%; background-color: #444; z-index: 5;}
#footer .footer_inner{width: 90%; max-width: 1440px; margin: 0 auto; padding: 60px 0;}
#footer .footer_inner .footer_top a{color: #fff;}

#footer .footer_inner .footer_top{display: flex; justify-content: space-between; align-items: center; flex-direction: column; border-bottom: 1px solid #eee;}
#footer .footer_inner .footer_top>ul.sns_list{display: flex; margin-bottom: 20px;}
#footer .footer_inner .footer_top>ul.info_list{display: flex; margin-bottom: 20px; flex-wrap: wrap; justify-content:center; text-align: center;}
#footer .footer_inner .footer_top>ul.info_list li{margin: 10px 30px;}

#footer .footer_inner .footer_top>ul.sns_list li{margin: 0 10px;}

#footer .footer_inner .footer_bottom{position: relative; display: flex; justify-content: space-between; align-items: center; flex-direction: column; margin-top: 20px;}
#footer .footer_inner .footer_bottom p{text-align: center; color: #aaa; margin-bottom: 10px;}
#footer .footer_inner .footer_bottom .footer_logo{margin-top: 30px;}
}










@media screen and (max-width:600px) {
        
    .main_title{position: relative; font-size: 5.4vw; font-weight: 700;}
    .con_title{position: relative; font-size: 4vw; font-weight: 700;}
    
    
    /* header */
    #header{width: 100%; background-color: rgba(0,0,0,0); position: fixed; height: 80px; z-index: 10; transition-duration: 0.5s;}

    #header .header_inner{position: relative; width: 90%; max-width: 1440px; display: flex; justify-content: space-between; margin: 0 auto;}
    #header .header_inner .top_logo{position: absolute; top: 10px; left: 0;}
    #header .header_inner .top_logo img{height: 60px;;}
    
    #header .header_inner .gnb{display: none;}
    
    #header .header_inner .util{position: absolute; right: 0;}
    #header .header_inner .util>ul{display: flex; align-items: center;}
    #header .header_inner .util>ul>li{margin-left: 10px; position: relative;}
    #header .header_inner .util>ul>li .menu_btn{background: none; border: none; cursor: pointer;}
    #header .header_inner .util>ul>li>a{line-height: 80px; color: #fff;}
    
    .menu{position: fixed; right: -100%; top: 0; width: 80%; height: 100vh; background-color: rgba(255,255,255,1); display: block; z-index: 99;padding: 50px; box-sizing: border-box; border-left:4px solid #333 ;}
    
    .menu .menu_gnb>ul{position:relative; display: flex; flex-direction: column; justify-content: space-between; padding: 20% 0}
    .menu .menu_gnb>ul>li{margin-bottom: 50px;}
    .menu .menu_gnb>ul>li>a{font-size: 1.6em; position: relative; font-weight: 700;}
    .menu .menu_gnb>ul>li>a::after{content: ''; position: absolute; left: -2%; top: 30px; width: 100px; height: 2px; background-color: #FFAA45;}
.menu .menu_gnb>ul>li:nth-child(5)>a::after{width: 140px;}
.menu .menu_gnb>ul>li:nth-child(4)>a::after{width: 140px;}
    .menu .menu_gnb>ul>li>ul{padding: 10px 0; display: none;}
    .menu .menu_gnb>ul>li>ul a{line-height: 40px; font-size: 1.2em;}
    .menu .menu_gnb>ul>li>ul a:hover{color: #FFAA45;}
    .menu .menu_close{background: #fff; border: 4px solid #333; border-right: 4px solid #fff; position: absolute; left: 0; top: 50%; transform: translate(-50px,-50%); width: 50px; cursor: pointer;}
    .menu .menu_close img{width: 100%;}
    
    
    #footer{position: relative;  width: 100%; background-color: #444; z-index: 5;}
    #footer .footer_inner{width: 90%; max-width: 1440px; margin: 0 auto; padding: 60px 0;}
    #footer .footer_inner .footer_top a{color: #fff;}
    
    #footer .footer_inner .footer_top{display: flex; justify-content: space-between; align-items: center; flex-direction: column; border-bottom: 1px solid #eee;}
    #footer .footer_inner .footer_top>ul.sns_list{display: flex; margin-bottom: 20px;}
    #footer .footer_inner .footer_top>ul.info_list{display: flex; margin-bottom: 20px; flex-wrap: wrap; justify-content:center; text-align: center;}
    #footer .footer_inner .footer_top>ul.info_list li{margin: 10px 10px;}
    
    #footer .footer_inner .footer_top>ul.sns_list li{margin: 0 10px;}
    
    #footer .footer_inner .footer_bottom{position: relative; display: flex; justify-content: space-between; align-items: center; flex-direction: column; margin-top: 20px;}
    #footer .footer_inner .footer_bottom p{text-align: center; color: #aaa; margin-bottom: 10px;}
    #footer .footer_inner .footer_bottom .footer_logo{margin-top: 30px;}
    }