@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/nanum-gothic-v13-korean_latin-regular.eot'); /* IE9 Compat Modes */
  src: local('NanumGothic'),
       url('../fonts/nanum-gothic-v13-korean_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/nanum-gothic-v13-korean_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/nanum-gothic-v13-korean_latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/nanum-gothic-v13-korean_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/nanum-gothic-v13-korean_latin-regular.svg#NanumGothic') format('svg'); /* Legacy iOS */
}
@import url(http://fonts.googleapis.com/earlyaccess/notosanssc.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

*{margin: 0; position: relative; box-sizing: border-box; font-family: 'Nanum Gothic', sans-serif;}
html, body{width: 100%; height: 100%; font-family: 'Nanum Gothic', sans-serif; font-size: 16px;}
a{text-decoration: none; color: #000;}
/*ul, li{list-style: none;}*/
img{vertical-align: bottom;}
.left{float: left;} .right{float: right;}
::selection{background-color: #FA7B14; color: #FFF;} /* µå·¡±× ½ºÅ¸ÀÏ º¯°æ */
*:focus { outline: none; }
input {border-radius: 0;}

/* header */
#header_wrap{width: 100%; position: fixed; top: 0; left: 0; z-index: 9999; background-color: #FFF; box-shadow: 0 0 15px #000;}
#header_wrap > header{width: 1200px; margin: 0 auto; padding: 10px 0; overflow: hidden;}

/* header logo */
#header_wrap > header > #img_wrap{float: left;}
#header_wrap > header > #img_wrap > .mini_logo{display: none; top: -2px;}
#header_wrap > header > #img_wrap > .mini_logo > img{height: 52px;}
#header_wrap > header > #welcome_shes{position: absolute; top: 153px;}
#header_wrap > header > #welcome_shes > h2{margin-bottom: 10px;}
#header_wrap > header > #welcome_shes > p{font-size: 13px; line-height: 22px;}

/* header  nav */
#header_wrap > header > nav{float: right;}
#header_wrap > header > .open_nav{background-repeat: no-repeat; background-position: bottom  right; background-image: url(../img/background/nav_background.jpg);}
#header_wrap > header > nav > ul > li{display: inline-block;  text-align: center;}
#header_wrap > header > nav > ul > li > a{font-weight: bold; font-size: 18px; padding: 0 20px; padding-top: 40px; padding-bottom: 20px; display: block; background-color: #FFF;}
/*#header_wrap > header > nav > ul > li > a{font-weight: bold; font-size: 18px; padding: 0 45px; padding-top: 40px; padding-bottom: 20px; display: block; background-color: #FFF;} */
#header_wrap > header > nav > ul > li > a > span{position: absolute; left: 0; bottom: -10px; width: 0; height: 2px; background-color: #009248;}
#header_wrap > header > nav > ul > li > .sub_menu{height: 0; overflow: hidden; transition: height 0.5s; text-align: center;}
#header_wrap > header > nav > ul > li > .open{height: 200px;}

#header_wrap > header > nav > ul > li > .sub_menu > li{padding-top: 10px; top: 20px; text-align: left; list-style-type: square; color : #666; font-size: 9px;}
#header_wrap > header > nav > ul > li > .sub_menu > li > a{display: block; font-size: 14px; width: 100%; color : #666;}

#header_wrap > header > nav > ul > li:hover > a > span{width: 100%;}
#header_wrap > header > nav > ul > li > .sub_menu > li > a:hover{color: #009248;}


/* header nav btn */
#header_wrap > header > #m_nav_btn_wrap{display: none; width: 30px; cursor: pointer; float: right; margin-right: 10px; top: 18px;}
#header_wrap > header > #m_nav_btn_wrap span{display: block; width: 100%; height: 2px; background-color: #000; margin-bottom: 5px;}
#header_wrap > header > #m_nav_btn_wrap span:nth-child(3){margin-bottom: 0;}

/* mobile nav */
#m_nav_wrap{position: fixed; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); z-index: 99999; display: block;}
#m_nav_wrap > #m_nav{position: absolute; width: 300px; height: 100%; background-color: #FFF; right: -300px; box-shadow: 0 0 30px rgba(0,0,0,0.65);}
#m_nav_wrap > #m_nav > .m_nav_close_btn{width: 30px; cursor: pointer; height: 25px; float: right; margin-top: 24px; margin-right: 10px; margin-bottom: 23px;}
#m_nav_wrap > #m_nav > .m_nav_close_btn > span{width: 100%; height: 2px; display: block; background-color: #000;}
#m_nav_wrap > #m_nav > .m_nav_close_btn > span:nth-child(1){transform: rotate(45deg); top: 11px;}
#m_nav_wrap > #m_nav > .m_nav_close_btn > span:nth-child(2){transform: rotate(-45deg); top: 9px;}

#m_nav_wrap > #m_nav > .m_mini_menu{clear: both;}

#m_nav_wrap > #m_nav > ul{width: 100%; list-style: none; padding: 0;text-align: center; }
#m_nav_wrap > #m_nav > ul > li{width: 100%;}
#m_nav_wrap > #m_nav > ul > li > span{display: block; padding: 20px 0; font-size: 18px; font-weight: bold; border-bottom: 1px solid #CDCDCD; cursor: pointer;}
#m_nav_wrap > #m_nav > ul > li > ul{overflow: hidden; transition: height 1s; list-style: none; padding: 0;}
#m_nav_wrap > #m_nav > ul > li > ul > li > a{display: block; padding: 10px 0; background-color: #FFF; font-size: 14px; border-bottom: 1px solid #CDCDCD; }

#m_nav_wrap > #m_nav > ul > .open > span{background-color: #323232; color: #FF9B2B; border: 0;}

/* main */
main{width: 100%;}
main > #main_top{width: 100%; height: 122px;}

/* footer menu */
#footer {position:relative; width:1200px; text-align:left; margin: 0 auto; padding-top:20px; overflow: hidden; margin-bottom: 30px;}

#footer h5 {float:left; width:100%;  font-size:1.3em; font-weight: normal; color:#121212; line-height:1.8em; margin-bottom:12px; border-bottom:1px solid #121212; font-family: 'Noto Sans KR', sans-serif;}
#footer .info {position:relative; float:left; width:200px; padding: 0;}
#footer .info li {display:block; float:left; width:100%; font-size: 0.83em; color:#888; line-height:20px; margin-bottom:3px;}
#footer .info li a {color:#888; font-weight: bold; font-family: 'Noto Sans KR', sans-serif;}

/* footer */
footer{width: 100%; padding: 20px 0; background-color: #141414; text-align: center; color: #FFF; font-size: 13px;}

/* top */
#top_btn{position: fixed; right: 15px; bottom: 15px; cursor: pointer; font-weight: bold; z-index: 9999; font-size: 12px; padding: 10px 12px 12px 12px; background-color: #323232; color: #FFF; border-radius: 50px; display: none;}

/* ie8 */
#ie8_notice{position: fixed; width: 100%; background-color: #f12b2b; padding: 15px; left: 0; bottom: 0; font-weight: bold; font-size: 14px; z-index: 99999; color: #FFF; display: none;}
#ie8_notice > a{float: right; color: #FFF; margin-left: 10px;}
#ie8_notice > a:hover{text-decoration: underline;}

@media(max-width : 1230px){
    #header_wrap > header{width: 100%;}
    #header_wrap > header > #img_wrap{width: 100%; text-align: center;}
    #header_wrap > header > nav{clear: both; width: 100%;}
    #header_wrap > header > nav > ul{padding-left: 0;}
    #header_wrap > header > nav > ul > li{width: calc(100%/6); display: block; float: left;}
    #header_wrap > header > nav > ul > li > a{padding:20px 0;}
    #header_wrap > header > #welcome_shes{display: none;}
    
    main > #main_top{height: 183px}
    
    #footer{width: 100%;}
    #footer .info{width: calc(100%/6);}
    #footer .info li{font-size: 0.85em;}
    #footer h5{font-size: 1em;}
}

@media (max-width : 915px){
}

@media (max-width : 765px){
    #header_wrap{box-shadow: none;}
    #header_wrap > header > #img_wrap{float: left; top: 2px; width: 200px; padding-left: 10px;}
    #header_wrap > header > #img_wrap > .big_logo{display: none;}
    #header_wrap > header > #img_wrap > .mini_logo{display: block; float: left;}
    #header_wrap > header > nav{display: none;}
    #header_wrap > header > #m_nav_btn_wrap{display: block;}
    
    main > #main_top{height: 72px;}
    
    #footer{display: none;}
    footer{margin-top: 30px;}
}