@charset "utf-8";

/* layout */
body { background:#fff; }
#wrap { position:relative; min-width:320px !important; padding-top:100px; }

/* header */
header,
header * { z-index:1000; }
header { position:fixed; top:0px; left:0; width:100%; height:100px; }
header.main { position:absolute; }
header.sub { background:#002a55; }
header #header { position:relative; box-sizing:border-box; margin:0 auto; }
header #header h1 { position:absolute; top:20px; left:40px; }
header #header h2 { position:absolute; top:30px; left:235px; }
header #header h1 a { display:block; width:180px; height:60px; }
header.main #header h1 a { background: url('../images/common/mpm_mi.png')  no-repeat 0 0; }


header.sub #header h1 a { background:url('../images/common/mpm_mi.png') no-repeat 0 0; }
header #header h2 a { font-family:'scdream_heavy'; font-size:30px; color:#001326; letter-spacing:-2px; }
header.sub  #header h2 a { color:#fff; }
header #header a i { overflow:hidden; display:block; position:fixed; top:-1000px; left:0; width:1px; height:1px;}

/* navigation */
#nav { text-align:center; }
#nav h3,
#nav .util .sns li a i,
#nav p button i { overflow:hidden; display:block; position:fixed; top:-1000px; left:0; width:1px; height:1px; }
#nav p { display:none; }
#nav .gnb ul { overflow:hidden; }
#nav .util li { display:inline-block; vertical-align:middle; padding-left:20px; }
#nav .util li a { display:block; height:25px; text-indent:-5000px; }
header.main .util li a { background:url('../images/common/util.png') no-repeat; }
header.sub .util li a { background:url('../images/common/util.png') no-repeat; }
header.main .util .home { background-position:0 0 !important; width:26px; }
#nav .util .home { background-position:-100px 0; width:26px; }
#nav .util .sns_f { background-position:-200px 0; width:11px; }
#nav .util .sns_t { background-position:-300px 0; width:21px; }
#nav .util .sns_b { background-position:-400px 0; width:40px; }
#nav .util .sns_y { background-position:-500px 0; width:30px; }
#nav .util .sns_i { background-position:-600px 0; width:25px; }
@media all and (max-width:1330px) and (min-width:1025px){	
	header #header h1 { top:28px; left:20px; }
	header #header h2 { top:30px; left:150px; }
	header.main #header h1 a,
	header.sub #header h1 a { background-size:100% ; width:120px; height:40px; }
	header #header h2 a { font-size:26px; }
	#nav .gnb li a { font-size:18px !important; padding:35px 15px 0 15px !important; }
	}
@media all and (min-width:1025px) {	
       .main .gnb { display:none; }	
	#nav .gnb li { display:inline-block; }
	#nav .gnb li a { display:block; font-weight:bold; font-size:22px; padding:30px 20px 0 20px; color:#fff; } 
	#nav .gnb li a:hover, #nav .gnb li a:focus, #nav .gnb li a.active { color:#7db5ee; }
	header.main #nav .gnb li a { color:#000; }	
	#nav .util { position:absolute; top:35px; right:40px; }
	}
@media all and (max-width:1024px) {
	#wrap { padding-top:80px; }
	header { height:80px; }
	header #header h1 { top:20px; left:20px; }
	header #header h2 { top:22px; left:150px; }
	header.main #header h1 a,
	header.sub #header h1 a { background-size:100%; width:120px; height:40px; }
	header #header h2 a { font-size:26px; }
	
	#nav { text-align:right; }
	#nav p { display:inline-block; padding:28px 20px 0 0;}
	#nav p button { display:block; width:32px; height:23px; background:url('../images/common/btn_gnb.png') no-repeat 0 0; }
	header.sub #nav p button { background-position:0 -50px; }
	#nav > div { box-sizing:border-box; display:none; position:fixed; top:0; left:0; width:100%; height:100%; padding-right:50px; background:url('../images/common/bg_nav.png'); }
	#nav > div .open { position:relative; top:0; left:-100%; width:100%; height:100%; padding:0; background:rgba(0, 42, 85, 0.95); }
	#nav > div .open .gnb { padding-bottom:40px;  }
	#nav > div .open .gnb li { text-align:center; }
	#nav > div .open .gnb li a { display:block; font-size:30px; line-height:2.5; color:#fff; border-bottom:1px solid #17487a; }
	#nav ul li a.on,
	#nav ul li a:hover,
	#nav ul li a:focus { color:#7db5ee; }
	#nav .util { text-align:center; padding-top:40px; }
	#nav .util li { padding:0 8px;}
	#nav .util .home { background-position:-100px 0; width:26px; }
	}
@media all and (max-width:600px) {
	#wrap { padding-top:60px; }
	header { height:60px; }
	header #header h1 { top:10px; left:10px; }
	header #header h2 { top:16px; left:140px; }
	header #header h2 a { font-size:20px; }
	#nav p { padding:18px 10px 0 0; }
	#nav > div .open .gnb li a { font-size:20px; }
	#nav .util { padding-top:20px; }
	}


/* footer */

#footer { width:100%; box-sizing:border-box; height:120px; padding:30px 40px 0 40px; text-align:left; word-break:keep-all; background:#404144;  position:relative;  bottom:0; }
#main_footer #footer { width:100%; box-sizing:border-box; height:120px; padding:30px 40px 0 40px; text-align:left; word-break:keep-all; background:#404144; position:fixed; bottom:0; }
#footer h1 { display:none; }
#footer address span { display:block; }
#footer address * { font-size:16px; line-height:1.8em; color:#fff;  }
#footer address strong { font-weight:bold; }
#footer .f_link { position:absolute; top:30px; right:40px; }
#footer .btn_arrow { display:inline-block; border:1px solid #6d6d6d; background:url('../images/common/f_arrow_w.png') no-repeat 90% 50%; color:#fff; padding:10px 60px 12px 20px; margin-left:10px; }
#footer .btn_arrow:hover { border-color:#fff;  background:url('../images/common/f_arrow_w.png')  no-repeat 90% 50%; }


@media all and (max-width:1330px){	
        #main_footer #footer { width:100%; box-sizing:border-box; height:150px; padding:30px 40px 0 40px; text-align:left; word-break:keep-all; background:#404144 ;position:relative; bottom:0; }
	#footer address * { font-size:14px; }
	#footer .btn_arrow { padding:8px 30px 10px 10px; font-size:14px; background-position:95% 50%; }
	}
@media all and (max-width:1024px) {
	#footer { text-align:center; height:auto; padding:20px; }
	#footer .f_link { position:relative; top:0; right:0; margin-top:20px; }
	#footer .btn_arrow { margin:4px; padding:4px 30px 6px 10px; }
	}
@media all and (max-width:600px) {
	#footer address * { font-size:12px; line-height:1.4em; }

    }