.wrapper{width:1200px; margin:0 auto;}

/* 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 bounce{0%, 15%, 38%, 60%, 75% {transform: translateY(0);}30%{transform: translateY(10px);}45%{transform: translateY(5px);}}
@keyframes bounce2{0%, 60% {transform: translateY(0);}20%, 80%{transform: translateY(4px);} 40%, 100%{transform: translateY(-2px);}}

.ani{position:relative; opacity:0; transition: all 0.8s ease-out 0s; transform:translate(0,20px);}
.ani.is-animate{opacity:1; transform:translate(0,0);}

.slideleft.is-animate{opacity: 1 !important;transform:translateX(0);}
.slideleft{opacity: 0 !important;transform:translateX(-80px);transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);}

.slideRight.is-animate{opacity: 1 !important;transform:translateX(0);}
.slideRight{opacity:0;transform: translateX(80px);transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);}

.slidedown.is-animate{opacity:1; transform:translateY(0);}
.slidedown{opacity:0;transform: translateY(-100px);transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);}

.slideUp.is-animate{opacity:1; transform:translateY(0);}
.slideUp{opacity:0;transform:translateY(80px);transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);}

.slideFirst{opacity:0;position:relative;animation: firstAni 0.8s ease 0s forwards;}
.slideFirstUp{opacity:0; position:relative;animation:firstAniUp 1.3s ease 0s forwards;}
.slideFirstRight{opacity:0; position:relative;animation:slideFirstRight 1.3s ease 0s forwards;}

@keyframes firstAni{
	0%{opacity:0; transform:translateX(-80px); transition:cubic-bezier(0.165, 0.84, 0.44, 1);}
	100%{opacity:1; transform:translateX(0); transition:cubic-bezier(0.165, 0.84, 0.44, 1);}
}
@keyframes firstAniUp{
	0%{opacity:0; transform:translateY(80px); transition:cubic-bezier(0.165, 0.84, 0.44, 1);}
	100%{opacity:1; transform:translateY(0); transition:cubic-bezier(0.165, 0.84, 0.44, 1);}
}
@keyframes slideFirstRight{
	0%{opacity:0; transform:translateX(80px); transition:cubic-bezier(0.165, 0.84, 0.44, 1);}
	100%{opacity:1; transform:translateX(0); transition:cubic-bezier(0.165, 0.84, 0.44, 1);}
}
@keyframes submenu{
	0% { transform:translateY(-15px); animation-delay:50s; opacity:0; }
	100% { transform:translateY(0); animation-delay:50s; opacity:1; }
}

.delay-100{transition-delay:100ms !important;}
.delay-150{transition-delay:150ms !important;}
.delay-200{transition-delay:200ms !important;}
.delay-250{transition-delay:250ms !important;}
.delay-300{transition-delay:300ms !important;}
.delay-350{transition-delay:350ms !important;}
.delay-400{transition-delay:400ms !important;}
.delay-450{transition-delay:450ms !important;}
.delay-500{transition-delay:500ms !important;}
.delay-600{transition-delay:600ms !important;}
.delay-700{transition-delay:700ms !important;}

.ani_delay-100{animation-delay:100ms;}
.ani_delay-150{animation-delay:150ms;}
.ani_delay-200{animation-delay:200ms;}
.ani_delay-300{animation-delay:300ms;}
.ani_delay-350{animation-delay:350ms;}
.ani_delay-400{animation-delay:400ms;}
.ani_delay-500{animation-delay:500ms;}
.ani_delay-600{animation-delay:600ms;}



body *{box-sizing:border-box;}
#header{position:absolute; z-index:99; width:100%; height:90px; transition:0.5s}
#header .wrapper{position:relative;height: 90px;}
#header:hover{transition:0.5s}
#header .inr{position:relative; width:1680px; margin:0 auto;}
#header h1{position:absolute; left:0; top:50%;transform: translateY(-50%);}
#header h1 a{display:block;width:200px; aspect-ratio: 200/28; background:url(/images/brand/logo.png) no-repeat 50% 0;background-size:100%;font-size:0;}

#header .gnb{text-align:right;}
#header .gnb > li{position: relative; display:inline-block;}
#header .gnb > li > a{line-height:90px; display:block; padding:0 30px; font-size:16px; color:#fff;}
#header .gnb > li > .sub_menu{display:none; position:absolute; left:0; top:80px; width:100%; padding:15px 0; background:#142e52; border-radius:5px; 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; border-radius:10px;}
#header .gnb .sub_menu li a{display: block; padding:4px 0;color:#fff; font-size:15px; text-align:center; transition:0.4s;}
#header .gnb .sub_menu li a:hover{color:#ccc;}
#header .gnb .sub_menu li:first-child a{border-top:0;}


/* mobile-menu */
.mobile_header{background:#008790; color:#333; text-align:center; padding:35px 0 10px 0;}
.btn_menu{position:absolute; z-index:90; width:25px; height:20px; right:20px; top:27px;}
.btn_menu{display:none;}
.btn_menu span{display:block; width:24px; height:2px; background:#fff; 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:120px;}
.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:80px 0; background:#070707; color:#999; text-align: center; font-weight:300}
#footer ul li{display:inline-block; padding-right:15px}
#footer ul li a{color:#fff;}
#footer address{margin:25px 0 15px 0}
#footer address span{padding-right:15px;}
#footer address a{color: inherit;}


@media all and (max-width:1280px){
	.wrapper{width:96%;}

}


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

@media screen and (max-width:767px){
	.wrapper{width:94%;}

	body, p, li, a, input, select {
		font-size: 14px;
		font-family: Lexend;
	}

	#header,
	#header .wrapper{height:60px;}
	#header h1 a{width:150px;}

	.btn_menu{top:24px; right:10px;}
	.btn_menu span{width:19px;}
	.btn_menu span:nth-child(3),
	.btn_menu span:nth-child(2){margin-top:4px;}

	#footer{padding:40px 0}
	#footer address span{display:inline-block;}

}