@charset "utf-8";
*{font-family:Roboto,Noto Sans KR,Nanum Gothic,나눔손글씨펜,Dotum,돋움,Tahoma,Geneva,sans-serif; }

/*	                                     all
 ================================================================================================ */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, p, dl, dt, dd, ol, ul, li, fieldset, form, label, legend
{box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; margin: 0; padding: 0; border: 0; vertical-align: baseline; word-wrap:break-word;word-break:keep-all;/* background: transparent; */}
html {-webkit-text-size-adjust: 100%;}
html, body {width:100%; -word-break:break-all;-ms-word-break:break-all; /* text-align:center; */ margin:0 auto; font-weight:300}
body, div {font-size:15px; color:#242424;}
select, input, textarea, button {font-size:15px; vertical-align: middle; color:rgba(0, 0, 0, 0.64);}
h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal;}
a{color:#242424;text-decoration:none;word-break:break-all; transition:all ease 0.3s;}
a:link,a:visited,a:hover,a:active,a:focus{text-decoration:none;}
input {padding: 0;margin: 0;}
table {border-collapse: collapse;border-spacing: 0;vertical-align: top;}
table th { font-size:16px;}
img,fieldset {border:0px;}
ul {list-style: none;}
legend, caption {width: 0; height: 0; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0;}
em {font-style:normal;}
img {max-width:100%;}



.Left{float:left;}
.Right{float:right;}
.Center{margin:0 auto; width:100%; max-width:1060px;}

#wrap{width:100%; min-width:320px; position:relative;  margin:0 auto;}
#header{width:100%; margin:0 auto; z-index:100; padding:0;}
.inner{width:100%; position:relative; margin-left:auto; margin-right:auto; max-width:1060px;}

/*	                                     header
 ================================================================================================ */
#header{z-index:1000;  transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;}
#header .inner{z-index:9999;}
#header .logo{position:absolute; top:15px; left:0; height:86px;}
#header .logo a{display:block;}


.h-box{height:100px; overflow:hidden; position:relative;}


/*	                                     menu
 ================================================================================================ */

.topNavWrap{width:100%; height:100px; position:absolute; top:0; overflow:hidden; z-index:888;} 
.topNavWrap.on{height:260px;background:rgba(255,255,255,0.6);}
.topNavWrap.on:before{width:100%;height:1px;content:'';position:absolute;left:0;bottom:0; background:rgba(255,255,255,1);}


#header .topNav{position:relative; margin:0 auto; padding:0; clear:both; max-width:1060px; width:100%;}     
#header .gnbNav{position:absolute; right:0; top:0; height:100px;z-index:9999999; width:70%}
#header .gnbNav .gnb{width:100%;overflow:hidden;clear:both;}
#header .gnbNav .gnb>li{float:left; margin:0; padding:0; width:25%}
#header .gnbNav .gnb>li>a>span{position:relative;display:block;}
#header .gnbNav .gnb>li>a>span:before{width:100%;height:3px;content:'';position:absolute;left:0;bottom:6px;-webkit-transition:-webkit-transform 0.2s;transition:transform 0.2s;-webkit-transform:scale3d(0, 1, 1);transform:scale3d(0, 1, 1);}
#header .gnbNav .gnb>li>a.on span:before{background-color:#f27e3c;-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1);}


#header .gnbNav .gnb>li>a{height:100px; line-height:100px; text-align:center; font-size:17px; font-weight: 500; display:block;  color:rgba(0,0,0,0.94); letter-spacing:-0.5px; padding:0 15px;} 
#header .gnbNav .gnb>li:hover{background:rgba(255,255,255,1); height:260px;}
#header .gnbNav .gnb>li:hover:before{width:100%;height:0px;content:'';position:absolute;left:0;bottom:0; }
#header .gnbNav .gnb>li>a:hover, #header .gnbNav .gnb>li>a:focus, #header .gnbNav .gnb>li>a.on{color:rgba(0,0,0,1);}
#header .gnbNav .gnb>li>ul{margin:25px 0;text-align:center; z-index:888}
#header .gnbNav .gnb>li>ul>li{}
#header .gnbNav .gnb>li>ul>li a{color:#000; display:block; font-size:15px; font-weight:300; padding-bottom:15px;}       
#header .gnbNav .gnb>li>ul>li a.on{color:#f27e3c;}
#header .gnbNav .gnb>li>ul>li>ul{margin-top:10px;}    
#header .gnbNav .gnb>li>ul>li>ul>li{margin-bottom:10px;}



/* fadeInRight */
@-webkit-keyframes fadeInRight {
	0% {opacity:0; -webkit-transform:translate3d(40px,0,0)}
	100% {opacity:1; -webkit-transform:translate3d(0px,0,0)}
}

@keyframes fadeInRight {
	0% {opacity:0; -webkit-transform:translate3d(40px,0,0)}
	100% {opacity:1; -webkit-transform:translate3d(0px,0,0)}
}