@CHARSET "UTF-8";
@import url("font.css");

html, body{font-family:'NotoSansKR', "Malgun Gothic","맑은 고딕",helvetica,"Apple SD Gothic Neo",sans-serif;font-weight:300;letter-spacing:-1.5px;}
input[type=text], button, select, textarea{font-family:'NotoSansKR', "Malgun Gothic","맑은 고딕",helvetica,"Apple SD Gothic Neo",sans-serif;font-weight:300;-webkit-appearance: none;-webkit-border-radius: 0;}
button{cursor:pointer}
#skip{height:0}
#skip a{display:block;position:absolute;left:0;top:-100px;width:auto;height:1px;text-align:center;background-color:#2d5b79}
#skip a:focus,#skip a:active{padding:10px 20px;position:absolute;top:0;z-index:99999;height:25px;line-height:25px;color:#fff;font-size:20px;text-decoration:none}
a:focus{outline:#2d5b79 dotted thin}
.pc {display: none;}

.slick-vertical .slick-slide{border:0;}
strong,b{font-weight:bold}
#wrap{width:100%}
#gnbToggle{display:none}
#header{position:fixed;background:transparent;border-bottom:1px solid #493a30;width:100%;height:60px;overflow:hidden;transition:height 0.2s ease-in-out, background 0.2s ease-in-out;z-index:9998;}
#header > .inner-section{position:relative;height:60px;}
#header h1{width:112.5px;padding-top:15px;padding-left:15px;}
#header h1 .logo{display:block;width:100%;height:24.5px;font-size:0;background:url(../img/logo.png) no-repeat 0 0;background-size:contain;}
#gnb{position:absolute;top:105px;left:0;width:100%;}
#gnb .depth1 > li{border-bottom:1px solid #777;}
#gnb .depth1 > li > button{position:relative;display:block;width:100%;height:65px;padding:0 20px;font-size:25px;color:#493a30;line-height:65px;font-weight:900;text-align:left;background:transparent;border:0;outline:0;box-sizing:border-box;}
#gnb .depth1 > li > button:before{content:"";position:absolute;right:20px;top:30px;display:block;width:15px;height:8px;background:url(../img/icon_gnb_open.png) no-repeat 0 0;background-size:contain;transition:transform 0.1s;transform:rotate(-180deg)}
#gnb .depth2{display:none;padding:0 20px;border-top:1px solid #000;}
#gnb .depth2 > li{border-bottom:1px solid #e0e0e0}
#gnb .depth2 > li:last-child{border-bottom:0;}
#gnb .depth2 > li > a{position:relative;display:block;padding:0 20px;height:50px;line-height:50px;font-size:15px;font-weight:700;}
#gnb .depth1 > li.active > button{color:#0063d3}
#gnb .depth1 > li.active > button:before{transform:rotate(0deg)}
#gnb .depth1 > li.active .depth2{display:block}
#gnb .depth2 > li > a:after{display:none;content:"";position:absolute;top:23px;right:20px;width:4px;height:4px;background:#000;border-radius:50%;}
#gnb .depth2 > li.active > a:after{display:block}
#header .gnb-info{display:none}
#header .gnb-toggle{display:inline-block;position:absolute;right:15px;top:19px;width:27px;height:22px;cursor:pointer;z-index:999}
#header .gnb-toggle .btn-gnb{position:relative;top:50%;display:block;width:27px;height:2px;margin:0 auto;border:none;background:#000;font-size:0;}
#header .gnb-toggle .btn-gnb:before, #header .gnb-toggle .btn-gnb:after{position:absolute;top:0;left:50%;display:block;width:100%;height:2px;background:#000;content:"";transition:transform 0.35s;transform-origin:50% 0%;}
#header .gnb-toggle .btn-gnb:before{transform: translate(-50%, -10px);}
#header .gnb-toggle .btn-gnb:after{transform: translate(-50%, 10px);}
#gnbToggle:checked + #header .gnb-toggle .btn-gnb{background:transparent;}
#gnbToggle:checked + #header .gnb-toggle .btn-gnb:before{transform:translate(-45%, 0) rotate(45deg);background:#000}
#gnbToggle:checked + #header .gnb-toggle .btn-gnb:after{width:100%;transform:translate(-50%, 0) rotate(-45deg);background:#000}
#gnbToggle:checked + #header{height:100vh;background:#fff}
#gnbToggle:checked + #header > .inner-section{height:100vh;overflow-y:scroll}
#gnbToggle:checked + #header .gnb-util{display:block;}

@media all and (min-width:1024px) {
    .mb {display: none;}
    .pc {display: block;}
	#header{height:72px;border:none}
    #header:before{content:"";display:block;position:absolute;top:70px;left:0;width:100%;height:2px;background:#493a30;}
    #header > .inner-section{position:relative;max-width:1920px;height:70px;padding:0;margin:0 auto;box-sizing:border-box;}
	#header h1{position:absolute;left:30px;top:0;width:222px;padding-left:0;padding-top:10px;}
    #header h1 .logo{width:225px;height:49px;}
	#gnb{display:block;position:static;width:1600px;margin:0 auto;padding-top:25px;box-sizing:border-box;text-align:center;}
	#gnb .depth1 > li{display:inline-block;position:relative;width:180px;border:0;box-sizing:border-box;vertical-align:top;}  
    #gnb .depth1 > li:nth-of-type(2) {width: 200px;}
	#gnb .depth1 > li > button{position:relative;display:block;width:100%;height:20px;padding:0 13px;font-size:20px;line-height:20px;font-weight:700;border:0 !important}
	#gnb .depth1 > li > button:before{display:none}
    #gnb .depth1 > li:hover > button{color:#0063d3}
	#gnb .depth2{padding:0;border:0;display:block;position:static;width:auto;padding-top:45px;text-align:left;}
	#gnb .depth2:after{content:"";clear:both;display:block}
	#gnb .depth1 > li.group .depth2{margin-left:0}
	#gnb .depth2 > li{position:relative;height:20px;margin-bottom:35px;border:0}
	#gnb .depth2 > li > a{display:block;height:40px;padding:0 11px;font-size:15px;letter-spacing:-1.5px;line-height:40px;font-weight:300;transition:left 0.5s ease;background:none;border-radius:20px;}
    #gnb .depth2 > li > a:hover,
    #gnb .depth2 > li.active > a{color:#0063d3;font-weight:700;background:#e7f4fd}
    #gnb .depth2 > li.active > a:after{display:none;}
	#gnb .depth2 > li.mb{display:none;}
	#header.active #gnb .depth1 > li.active .depth2{display:block}
    #header .gnb-info{position:absolute;left:0;bottom:0;width:100%;}
    #header .gnb-info > .inner-section{position:relative;padding:0 100px 30px}
    #header .gnb-info .sns-list{position:absolute;right:20px;top:0px;z-index:10}
    #header .gnb-info .sns-list{text-align:right;}
    #header .gnb-info .sns-list li{display:inline-block;margin-left:8px}
    #header .gnb-info .sns-list li em{display:block;width:70px;height:70px;background:no-repeat 0 0;background-size:contain}
    #header .gnb-info .sns-list li em.blog{background-image:url(../img/sns_blog.png)}
    #header .gnb-info .sns-list li em.facebook{background-image:url(../img/sns_facebook.png)}
    #header .gnb-info .sns-list li em.instagram{background-image:url(../img/sns_instagram.png)}
    #header .gnb-info .sns-list li em.youtube{background-image:url(../img/sns_youtube.png)}
    #header .gnb-info .address-section{position:relative;padding-left:320px;}
    #header .gnb-info .address-section .org-logo{display:block;position:absolute;left:0;top:0;width:174px;height:39px;background:url(../img/mfds_logo_black.png) no-repeat 0 0;background-size:contain} 
    #header .gnb-info .address-section p{margin-bottom:10px;font-size:18px;line-height:28px;font-weight:200;color:#404040;opacity:0.5}
    #header .gnb-info .address-section .copy{margin:0;}
    
	#header .gnb-toggle{display:none;}
	#header.active{height:430px;background:#fff;}
    #header.active:before{background:#0063d3}

    #container{padding-top:0;}
}

#footer{padding:35px 25px 20px;background:#fff;}
#footer .inner-section{position:relative;}
#footer .logo{position:absolute;left:0;top:0;display:block;width:82px;height:41px;background:url(../img/mfds_logo.png) no-repeat center center;background-size:contain}
#footer .sns-list{margin-bottom:35px;text-align:right;}
#footer .sns-list li{display:inline-block;margin-left:8px}
#footer .sns-list li em{display:block;width:40px;height:40px;background:no-repeat 0 0;background-size:contain}
#footer .sns-list li em.blog{background-image:url(../img/sns_blog.png)}
#footer .sns-list li em.facebook{background-image:url(../img/sns_facebook.png)}
#footer .sns-list li em.instagram{background-image:url(../img/sns_instagram.png)}
#footer .sns-list li em.youtube{background-image:url(../img/sns_youtube.png)}
#footer .address-section p{font-size:12px;line-height:18px;opacity:0.8}
#scrollTop{display:block;position:fixed;right:20px;bottom:35px;width:32px;height:32px;font-size:0;background:url(../img/btn_top.png) no-repeat center center;border:0;background-size:contain;z-index:999;transition:all 0.5s ease;}
@media all and (min-width:1024px) {
    #footer{padding:70px 0;}
    #footer .inner-section{max-width:1300px;;margin:0 auto;}
    #footer .logo{left:0;top:0;width:190px;height:94px;}
    #footer .sns-list{position:absolute;right:0;top:0;z-index:99}
    #footer .sns-list li{margin-left:18px;}
    #footer .sns-list li em{width:56px;height:56px;}
    #footer .address-section{position:relative;padding-left:280px;}
    #footer .address-section .org-logo{position:absolute;left:0;top:0;width:174px;height:39px;}
    #footer .address-section p{font-size:20px;line-height:30px;font-weight:200;}
    #footer .address-section .copy{opacity:1}
    #scrollTop{right:10%;bottom:100px;/* margin-right:-695px; */width:64px;height:64px;}
}