@charset "utf-8";
*{box-sizing: border-box; font-family: 'Noto Sans KR'; }

#header{height:100%;position: fixed;padding:60px 40px 0px;bottom:0;top:0;left:0;overflow-y:scroll;box-shadow: 0 0 15px rgba(0,0,0,0.05);background: #fff;transition: 0.5s;display: block;-ms-overflow-style: none;scrollbar-width: none;font-family: 'Josefin Sans','Noto Sans KR';z-index: 9999;width: 320px;}
#header::-webkit-scrollbar {display: none;}

#header h1{text-align: center;margin-bottom: 60px;padding:0 10px;display: block;width:100%;}
#header h1 .logo_img{height:119px;background: url(../img/logo.png)no-repeat 50% 50%;background-size: cover;width:119px;margin:auto;}
#header h1 a{color:#333;display: block;}
#header h1 a p{font-weight: 700;font-size:30px;line-height:1.5em;}
#header h1 a span{margin-top:0;font-size:12px;color:#888;line-height:1.5em;letter-spacing: 2px;}

#header .gnb{margin-bottom:60px;}
#header .gnb > li{}
#header .gnb > li.on > a{color:#d4d4d4;}
#header .gnb > li > a{display: block;padding:15px 0 12px 0;border-bottom:1px solid #ececec;font-size:16px;font-weight: 400;line-height:1.5em;color:#888;transition: all .3s ease-in-out;position: relative;}
#header .gnb > li > a.open span:after{content: '+';position: absolute;right:20px;}
#header .gnb > li:hover > a.open span:after{content: '-';position: absolute;right:20px;}
#header .gnb > li:hover > a span{color:#d4d4d4;}

#header .gnb > li > a > .ko{display: none;font-family: 'Noto Serif KR';font-size:15px;font-weight: 500;letter-spacing: 2px;}
#header .gnb > li:hover > a > .ko{display: block;}
#header .gnb > li:hover > a > .en{display: none;}

#header .gnb .depth2{display: none;}
#header .gnb .depth2 li a{margin:12px 0 0;padding:0 0 6px 15px;display: block;font-size:14px;color:#888;letter-spacing: 2px;}
#header .gnb .depth2 li:last-child a{border-bottom:1px solid #ececec;}

#header .gnb .depth2 li:hover a{color:#d4d4d4;}

#header .add{padding:20px 0px;color:#888;line-height:1.4em;}
#header .add p { font-size:13px !important; }
#header .add .add_l{margin-bottom:8px;}
#header .add .add_l a{color:#333;}
#header .add .add_l a:hover{text-decoration: none;}
#header .add h6{font-size:12px;margin-top:15px;}
#header .add .add_l a.who{transition: all .2s ease-out;}
#header .add .add_l a.who:hover{color: #ff5a53;}
/*footer*/

#footer{width:100%;height:200px;background: #d4d4d4;}
#footer .footer_in{padding:60px 15px 40px;width:100%;height:100%;color:#4e4e4e ;text-align: center;}
#footer .footer_in h2{font-size:30px;line-height:40px;}
#footer .footer_in h3{font-size:14px;letter-spacing: 1px;line-height:24px;margin-bottom:14px;}
#footer .footer_in p{line-height:22px;font-size:11px;}
/*모바일 헤더*/

#m_header{display: none;}
#m_logo h1{text-align: center;display: block;position: fixed;left:30px;top:30px;z-index: 999;}
#m_logo h1 .logo_img{height:46px;background: url(../img/m_logo.png)no-repeat 50% 50%;background-size: cover;width:200px;float:left;}
#m_logo h1 a{display: block;}
#m_logo{display: none;}

#m_menu{position: fixed;right:30px;top:30px;z-index: 999;width:46px;height:46px;cursor: pointer;background: rgba(255,255,255,.9);border-radius: 30%;box-shadow: 0px 1px 3px rgba(145,156,180,.7);display: none;}
#m_menu .m_btn{width:100%;height:100%;background: url(../img/menu.png)no-repeat 50% 50%;background-size: cover;transition: all .4s ease-in-out;}
#m_menu .m_btn.on{width:100%;height:100%;background: url(../img/close.png)no-repeat 50% 50%;background-size: cover;}

.m_cover{position: fixed;background: #000;left:0;top:0;right:0;bottom:0;width:100%;height:100%;z-index: 10;display: none;opacity: .4;}

#m_header{height:100%;position: fixed;padding:60px 30px 0px;bottom:0;top:0;left:-275px;overflow-y:scroll;background: rgba(255,255,255,1);transition: 0.5s;display: none;;-ms-overflow-style: none;scrollbar-width: none;font-family: 'Josefin Sans','Noto Sans KR';z-index: 9999;width: 275px;}
    
#m_header.on{left:0;box-shadow: 0 0 30px rgba(0,0,0,0.05);}
    
#m_header::-webkit-scrollbar {display: none;}

#m_header h1{text-align: center;margin-bottom: 60px;padding:0 20px;display: block;width:100%;}
#m_header h1 .logo_img{height:140px;background: url(../img/logo.png)no-repeat 50% 50%;background-size: cover;width:119px;margin:auto;}
#m_header h1 a{color:#333;display: block;}
#m_header h1 a p{font-weight: 700;font-size:30px;line-height:1.5em;}
#m_header h1 a span{margin-top:0;font-size:12px;color:#888;line-height:1.5em;letter-spacing: 2px;}

#m_header .gnb{margin-bottom:60px;}
#m_header .gnb > li{}
#m_header .gnb > li.on > a{color:#5c7798;}
#m_header .gnb > li > a{display: block;padding:15px 0 12px 0;border-bottom:1px solid #ececec;font-size:16px;font-weight: 400;line-height:1.5em;color:#888;transition: all .3s ease-in-out;position: relative;}
#m_header .gnb > li > a.open span:after{content: '+';position: absolute;right:20px;font-family: 'Josefin Sans';font-weight: 400;font-size:16px;width:8px}
#m_header .gnb > li.on > a.open span:after{content: '-';position: absolute;right:20px;font-family: 'Josefin Sans';font-weight: 400;font-size:22px;}
#m_header .gnb > li.on > a span{color:#5c7798;}
#m_header .gnb > li.at > a span{color:#5c7798;}

#m_header .gnb > li > a > .ko{display: block;font-family: 'Noto Serif KR';font-size:15px;font-weight: 500;letter-spacing: 2px;}
#m_header .gnb > li > a > .en{display: none;}
#m_header .gnb > li.on > a > .ko{display: block;}
#m_header .gnb > li.on > a > .en{display: none;}
#m_header .gnb > li.at > a > .ko{display: block;}
#m_header .gnb > li.at > a > .en{display: none;}

#m_header .gnb .depth2{display: none;}
#m_header .gnb .depth2 li a{margin:12px 0 0;padding:0 0 6px 15px;display: block;font-size:14px;color:#888;letter-spacing: 2px;}
#m_header .gnb .depth2 li:last-child a{border-bottom:1px solid #ececec;}

#m_header .gnb .depth2 li:hover a{color:#5c7798;text-decoration: underline;}

#m_header .add{padding:20px 0px;font-size:13px;color:#888;line-height:1.4em;}
#m_header .add .add_l{margin-bottom:8px;}
#m_header .add .add_l a{color:#333;}
#m_header .add .add_l a:hover{text-decoration: none;}
#m_header .add h6{font-size:12px;margin-top:15px;}
#m_header .add .add_l a.who{transition: all .2s ease-out;}
#m_header .add .add_l a.who:hover{color: #ff5a53;}


/*태블릿 화면*/
@media (max-width:1240px){
    /*헤더*/
    #header{display: none;}
    #m_header{display: block;}
    #m_header h1 { padding: 0px; }
    
    #m_logo h1 { top: 15px; left: 17.5px }
    #m_logo h1 a .logo_img{background: url(../img/m_logo.png)no-repeat 50% 50%;width:200px;height:44px;}
    
    #m_logo{display: block;}
    #m_menu{display: block;top:20px;right:20px;width:36px;height:36px;}
    
}
@media (max-width:767px){
    body.on{overflow: hidden;}
    #m_header{width:77%;left:-77%;}
    #m_header.on{}
    #m_header .add{padding:20px 0px;}
    #m_header .add .add_l{font-size:13px;}
    
    #m_logo h1{left:17.5px;top:15px;z-index: 999;}
    #m_logo h1 a .logo_img{background: url(../img/m_logo.png)no-repeat 50% 50%;width:165px;height:47px;}

    .m_cover.on{display: block;}
    
    #footer{height:auto;}
    #footer .footer_in{padding:30px 0 20px;}
}