/* animation effect */
.fadeup{position:relative;opacity:0;top:130px;transition: all 2s cubic-bezier(0.18, 0.89, 0.43, 1.14) 0s;}
.fadeup-in{position:relative;opacity:1;top:0;transition: all 2s cubic-bezier(0.18, 0.89, 0.43, 1.14) 0s;}
@-webkit-keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
@-webkit-keyframes text-focus-in{0%{-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes text-focus-in{0%{-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}
@keyframes submenu{0% { transform:translateY(-15px); animation-delay:50s; opacity:0; }100% { transform:translateY(0); animation-delay:50s; opacity:1; }}


.wrapper{width:1400px; margin:0 auto;}
.wrap{width:1200px; margin:0 auto;}
body *{box-sizing:border-box; transition: 0.5s;}


#header{z-index:99; width:100%; height:80px; background:#fff; border-bottom:1px solid rgba(0,0,0,0.1); transition:0.5s}
#header .wrapper{position:relative; height:80px;}
#header:hover{transition:0.5s}
#header h1{position:absolute; left:0; top:25px;}
#header h1 a{display:block; width:140px; height:32px; background:url(../images/common/logo.svg) no-repeat 50% 0; background-size:100%; font-size:0}

#header .gnb{text-align:center;}
#header .gnb > li{position: relative; display:inline-block;}
#header .gnb > li > a{line-height:80px; display:block; padding:0 30px; font-size:16px; color:#222; font-weight:555}
#header .gnb > li > a:hover{color:#214986;}
#header .gnb > li > .sub_menu{display:none; position:absolute; left:-5%; top:80px; width:110% !important; background:#fff; z-index:99; animation: submenu 0.3s 1 linear;}
#header .gnb li:hover .sub_menu{display:block; }
#header .gnb .sub_menu{ background:#917d5c; animation: submenu 0.3s 1 linear; transition: ease all .2s; }
#header .gnb .sub_menu li a{display: block; padding:13px 0; background:#333; border-top: 1px solid #999; color:#fff; font-size:14px; text-align:center; transition:0.4s;}
#header .gnb .sub_menu li a:hover{color:#fff; background:#666}
#header .gnb .sub_menu li:first-child a{border-top:0;}

#header .area_util{position:absolute;top: 50%; right:0; transform: translateY(-50%); }
#header .area_util ul li{position:relative; float:left; padding:0 20px;}
#header .area_util ul li:before{content:''; position:absolute; display:block; left:0; top:3px; width:1px; height:13px; background:#b3b3b3;}
#header .area_util ul li:first-child:before{display:none;}
#header .area_util ul li a{color:#666; font-size:14px; height:18px; font-weight:400; vertical-align: top;}

/* mobile-menu */
.btn_menu{position:absolute; z-index:90; width:25px; height:20px; right:10px; top:29px;}
.btn_menu{display:none;}
.btn_menu span{display:block; width:24px; height:1px; background:#666; text-align:center;}
.btn_menu span:nth-child(1){margin-top:0;}
.btn_menu span:nth-child(2){margin-top:7px;}
.btn_menu span:nth-child(3){margin-top:7px;}

.menu_top p{margin-top:10px; color:#949494;}
#header .m_gnb_top h1{float:none; padding:20px; }
.m_area_util{margin:70px 0 20px 0; overflow:hidden;box-sizing:border-box;}
.m_area_util ul li{float:left; width: 48%; margin:0 1%}
.m_area_util a{display:inline-block; width:100%;  height:31px; box-sizing: border-box; padding:5px 0; margin:2px 0px; background:#f6f6f6; vertical-align:middle; color:#333; text-align:center; font-size:14px;}
.m_gnb{overflow-y:auto;position:fixed;top:0px;right:-100%;width:100%;height:100%;background:#fff;transition:all 0.5s ease-out 0s;z-index: 99;}
.m_gnb > ul > li > a{display:block; position:relative; padding:15px 25px; border-bottom:1px solid #ddd; color:#424242; transition:all 0.3s ease 0s;}
.m_gnb > ul > li > a.open:before{content:''; display:block; position:absolute; top:25px; right:10px; width:11px; height:7px; background:url(../images/main/menu_button.png) no-repeat 50% 0; transition:all 0.4s ease 0s; background-size:100%;}
.m_gnb > ul > li > a.active{}
.m_gnb > ul > li > a.active:before{transform:rotate(180deg);}
.m_gnb > ul > li > ul{display:none; background:#f8f8f8; }
.m_gnb > ul > li > ul > li{border-bottom:1px solid #ececec;}
.m_gnb > ul > li > ul > li > a{position:relative; display:block; padding:10px 0 10px 25px; font-size:13px; color:#4c4c4c; }
.m_gnb > ul > li > ul > li > a br{display:none;}
.m_gnb .btn_close{opacity: 0; display: block; position:absolute; top:30px; right:-100%; width:24px; height:23px; font-size:0px; transition:0.8s;}
.m_gnb.active{right:0px;}
.m_gnb.active .btn_close{opacity:1; right:15px;}
.m_gnb_top{box-sizing:border-box; background:#00469b;}
.m_gnb_top p{background:#ddd;}
.m_gnb > ul{margin-top:20px;}
.m_gnb .btn_close:before{content: ''; display:block; position:absolute; top:9px; left:0px;  width:100%; height:1px; background:#333; transform:rotate(45deg);}
.m_gnb .btn_close:after{content: ''; display:block; position:absolute; top:9px; left:0px; width:100%; height:1px; background:#333; bottom: 9px; transform:rotate(-45deg);}
.m_gnb p{padding:30px 20px; background:#004d82 url(../images/sub/lnb_bg.png) no-repeat 90% 80%; color:#fff;}

.cover{position: fixed;width: 100%;height:100%;left:0;top:0;background:rgba(0, 0, 0, 0.8);z-index: 9;display:none;}
.cover.active{display:block;}


/* footer */
footer{padding:40px 0; background:#ebebeb; text-align:center;}
footer p{color:#777}
footer ul li{display:inline-block; padding:0 10px;}
footer .wrapper > ul > li > a{color:#111; font-size:15px;}
footer address{margin:20px 0;}
footer address > div > span{position:relative; line-height:1.8; padding:0 10px; color:#555;}
footer address > div > span:before{content:''; position:absolute; top:4px; right:-2px; width:1px; height:11px; background:#707070}
footer address > div > span > a{color:#555 !important;}
footer address > div > span:last-child:before{display:none;}
@media screen and (max-width:1420px){
	.wrapper{width:96%;}

}

@media screen and (max-width:1240px){
	.wrap{width:96%;}
}

@media screen and (max-width:1024px){
	#header .gnb{display:none;}
	.btn_menu{display:block;}
	#header .area_util{right:20px}
}

@media screen and (max-width:767px){
	body, p, li, a, input, select {
		font-size: 14px;
		font-family: Sans-serif;
	}
	
	#header{height:60px;}
	#header .wrapper{height:60px;}
	#header h1{top:15px;}
	.btn_menu{top:20px;}
	#header .area_util ul li a{font-size:13px;}

	footer ul li{padding:0 5px;}
	footer .wrapper > ul > li > a{font-size:14px;}

}

@media screen and (max-width:420px){
	#header .area_util{display:none;}
}