@charset "utf-8";

/* base */
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,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;border:0;outline:0;background:transparent;}
fieldset, img{border:0 none;}
dl, ul, ol, li{list-style:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;}
input, select, textarea, button{vertical-align:middle;}
button{border:0 none;background-color:transparent;cursor:pointer;}
address, caption, cite, code, dfn, em, strong, th, var{font-style:normal;font-weight:normal;}
legend, caption{visibility:hidden;height:0;width:0;font-size:0;}
hr{display:none;}
body, th, td, input, select, textarea, button{font-size:16px;color:#555;line-height:1;font-family: 'Noto Sans KR', sans-serif;} /* color값은 디자인가이드에 맞게사용 */
body {-webkit-text-size-adjust:none} /* 뷰표트 변환시 폰트크기 자동확대 방지 */
a{color:#333;text-decoration:none;}
a:active, a:hover{text-decoration:none;}
table{border-collapse:collapse;border-spacing:0;}

input[type='text'], input[type='password'], input[type='submit'], input[type='search']{-webkit-appearance:none;border-radius:0;}
input:checked[type='checkbox']{background-color:#666;-webkit-appearance:checkbox;}
button,input[type='button'], input[type='submit'], input[type='reset'],input[type='file']{-webkit-appearance:button;border-radius:0;}
input[type='search']::-webkit-search-cancel-button{-webkit-appearance:none;}

/* HTML5 RESET CSS Document */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address,
cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section,
summary, time, mark, audio, video{margin:0;padding:0;border:0;soutline:0;font-size:100%;font-weight:normal;vertical-align:baseline;background:transparent;-webkit-text-size-adjust:none;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block;}


/* float */
.fl_l{float:left !important;}
.fl_r{float:right !important;}
.clear_b{clear:both !important;}
.ofh{overflow:hidden !important;}

/* position */
.pab_l{position:absolute;left:0;}
.pab_r{position:absolute;right:0;}

/* align */
.txt_l{text-align:left !important;}
.txt_c{text-align:center !important;}
.txt_r{text-align:right !important;}
.txt-j{text-align:justify !important;}

/* none 시리즈 속성 정의 */
.bd_n{border:none !important;}
.bg_n{background:none !important;}
.dp_n{display:none !important;}
.mg_n{margin:0px !important;}
.pa_n{padding:0px !important;}

/* padding */
.pdt0{padding-top:0 !important;}
.pdb0{padding-bottom:0 !important;}
.pdt15{padding-top:15px !important;}
.pdt25{padding-top:25px !important;}
.pdt30{padding-top:30px !important;}
.pdb15{padding-bottom:15px !important;}
.pdl10{padding-left:10px !important;}
.pdl15{padding-left:15px !important;}
.pdl20{padding-left:20px !important;}
.pdl30{padding-left:30px !important;}
.pdl35{padding-left:35px !important;}
.pdl40{padding-left:40px !important;}

/* margin */
.mgt0{margin-top:0 !important;}
.mgt10{margin-top:10px !important;}
.mgt15{margin-top:15px !important;}
.mgt20{margin-top:20px !important;}
.mgt30{margin-top:30px !important;}
.mgt40{margin-top:30px !important;}
.mgt50{margin-top:50px !important;}
.mgt100{margin-top:100px !important;}
.mgt140{margin-top:140px !important;}
.mgl0{margin-left:0 !important;}
.mgr0{margin-right:0 !important;}
.mgb0{margin-bottom:0 !important;}
.mgb5{margin-bottom:5px !important;}
.mgb10{margin-bottom:10px !important;}
.mgb30{margin-bottom:30px !important;}
.mgb100{margin-bottom:100px !important;}
.mgr2{margin-right:2%!important;}

/* %넓이 */
.w20{width:20% !important;}
.w30{width:30% !important;}
.w40{width:40% !important;}
.w48{width:48% !important;}
.w50{width:50% !important;}
.w60{width:60% !important;}
.w70{width:70% !important;}
.w80{width:80% !important;}
.w100{width:100% !important;}

/* 이미지 auto */
.fx{display:block;max-width:100%;height:auto;}
.fxw{display:block;width:100%;height:auto;}
.pimg{display:block;}
.mimg{display:none;}

/* common */
*{margin:0;padding:0;}
html, body{width:100%;font-size: 16px;font-family: 'Noto Sans KR', sans-serif;word-break:keep-all;}

/* layout */
#wrap{position:relative;width:100%;min-height:100%;word-break:keep-all;}
#header{position:relative;width:100%;}
.container{margin:0 auto;}
#header .nav_wrap.main{position:fixed;/*padding:0 15%;*/width:100%;height:80px;z-index:100;box-sizing:border-box;background:none;}
#header h1{position:fixed;top:5px;left:10%;z-index:1000;}
#header h1.m{display:none;}
#header .s_banner_wrap{padding-top:80px;}
#header .s_banner_wrap.main{padding:0;}

.bg_pop_layer{display:none;position:fixed;left:0;top:0;z-index:3;width:100%;height:100%;opacity:0.6; filter:alpha(opacity=60);background:#000;}
.topFixBannerFixed {position: fixed;top:0px;width:100%;height:80px;z-index:100;background:#fff;}
.topFixBanner{background:#fff;}

@keyframes fadeInUp {
        0% {
            opacity: 0;
            transform: translate3d(0, -100%, 0);
        }
        to {
            opacity: 1;
            transform: translateZ(0);
        }
    }
 
    

.menubg{position:absolute;left:0;top:80px;width:100%;height:150px;background:#fff;box-shadow: 0 2px 5px rgba(0,0,0,.1);animation: fadeInUp .5s;}
#cssmenu{text-align: center;background:#fff;}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {margin: 0;padding: 0;border: 0;list-style: none;line-height: 1;display: block;position: relative;-webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box;}
#cssmenu:after,
#cssmenu > ul:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
#cssmenu #menu-button {display: none; border: 0; outline: 0}
#cssmenu {}
#cssmenu > ul{float:right;margin-right:10%;}
#cssmenu > ul > li {/*float: left;*/ display:inline-block;position:relative;width:150px;box-sizing:border-box;text-align:center;}
#cssmenu > ul > li > a {padding:32px 0;font-size:16px;letter-spacing:-0.03em;text-decoration: none;color: #7f7f7f;font-weight: 500;text-transform: uppercase;}
#cssmenu > ul > li:hover > a {color: #666;}
#cssmenu > ul > li.has-sub > a {padding-right: 30px;}
#cssmenu > ul > li.has-sub:hover > a:before {top: 23px;height: 0;}
#cssmenu ul > li > div{position:absolute;left:0;top:70px;/*width:100%;*/padding:0 0 50px;box-sizing:border-box;text-align:center;}
#cssmenu ul .smenu{width:100%;}
#cssmenu ul ul li {box-sizing:border-box;padding:10px 0;text-align:center;}

@keyframes fadeText {
        0% {
            opacity: 0;
            transform: translate3d(0, -100%, 0);
        }
        to {
            opacity: 1;
            transform: translateZ(0);
        }
    }
#cssmenu ul ul li a{color: #7f7f7f;font-size:15px; animation: fadeText .5s;}

#cssmenu li:hover > ul > li {height: 35px;}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {color: #666;}
#cssmenu ul ul li.has-sub > a:after {position: absolute;top: 16px;right: 11px;width: 8px;height: 2px;display: block;background: #dddddd;content: '';}
#cssmenu.align-right ul ul li.has-sub > a:after {right: auto;left: 11px;}
#cssmenu ul ul li.has-sub > a:before {position: absolute;top: 13px;right: 14px;display: block;width: 2px;height: 8px;background: #dddddd;content: '';-webkit-transition: all .25s ease;-moz-transition: all .25s ease;  -ms-transition: all .25s ease;-o-transition: all .25s ease;transition: all .25s ease;}
#cssmenu.align-right ul ul li.has-sub > a:before {right: auto;left: 14px;}
#cssmenu ul ul > li.has-sub:hover > a:before {top: 17px;height: 0;}
.smenu{display:none;}
.smenu.show{display:block;}



#container{padding-top:15px;}
#container .content.main{margin:0 auto;padding:100px 20% 0;box-sizing:border-box;line-height:1.6;word-break:keep-all;text-align:center;}
#container .content{margin:0 auto;padding:50px 20%;box-sizing:border-box;line-height:1.6;word-break:keep-all;text-align:center;}
#container .content h2{font-size:40px;color:#595757;line-height:1.4;margin:0 0 15px;}
#container .content .h2_sub span{display:block;font-size:18px;color:#646262;}
#container .content h3{font-size:25px;color:#595758;line-height:1.4;margin:0 0 15px;}
#container .content h3 span{border-bottom:1px solid #595758;padding:3px 20px;}

#footer{overflow:hidden;clear:both;padding:50px 20%;border-top:1px solid #d3d3d3;font-size:14px;background:#f2f2f2;}
#footer .logo_foot{text-align:center;}
#footer .copy{text-align:center;color:#808285;line-height:1.5;margin-top:15px;}
#footer .copy span{display:block;}


@media (max-width:1024px){ /* 767 */
	#header .nav_wrap {background:url(../images/common/bg_head.gif) 0 0 repeat-x;}
	#header .nav_wrap.main {background:#fff;}
	#header .search{right:30px;}
	#header .s_banner{margin:0 auto;width:100%;}
	#header .s_banner_wrap_m{display:none;padding-top:80px;}
	#header h1{position:fixed;width:150px;left:50%;margin-left:-75px;}

	#cssmenu {width:100%;margin-left:0;}
	#cssmenu ul {width:100%;display: none;}
	#cssmenu.align-center > ul {text-align: left;}
	#cssmenu ul li {width: 100%;border-top: 1px solid rgba(120, 120, 120, 0.2);}
	#cssmenu ul ul li{padding:15px 0;width:100%;}
	#cssmenu ul ul li,
	#cssmenu li:hover > ul > li {height: auto;}
	#cssmenu ul li a,
	#cssmenu ul ul li a {width: 100%;border-bottom: 0;}
	#cssmenu > ul > li {float: none;margin:0;text-align:left;}
	#cssmenu ul ul li a {padding-left: 25px;}
	#cssmenu ul ul ul li a {padding-left: 35px;}
	#cssmenu ul ul li a {color: #102964;background:url(../images/common/ico_dot.gif) 14px 50% no-repeat;font-size:14px;}
	#cssmenu ul ul li:hover > a,
	#cssmenu ul ul li.active > a {color: #ffffff;}
	#cssmenu ul ul,
	#cssmenu ul ul ul,
	#cssmenu.align-right ul ul {position: relative;left: 0;width: 100%;margin: 0;text-align: left;}
	#cssmenu > ul > li.has-sub > a:after,
	#cssmenu > ul > li.has-sub > a:before,
	#cssmenu ul ul > li.has-sub > a:after,
	#cssmenu ul ul > li.has-sub > a:before {display: none;}
	#cssmenu > ul > li:nth-child(1){margin-left:0;}
	#cssmenu ul > li > div{padding:0;}
	#cssmenu > ul > li > a {padding:15px;}
	#cssmenu #menu-button {display: block;width:50px;height:60px;margin-top:20px;margin-left:3%;color: #fff;cursor: pointer;font-size: 13px;text-transform: uppercase;font-weight: 500;}
	#cssmenu #menu-button:after {position: absolute;top: 18px;left: 50%;transform: translateX(-50%);display: block;height: 8px;width: 30px;border-top: 2px solid #666;border-bottom: 2px solid #666;content: '';}
	#cssmenu #menu-button:before {position: absolute;top: 8px;left: 50%;transform: translateX(-50%);display: block;height: 2px;width: 30px;background: #666;content: '';}
	#cssmenu #menu-button.menu-opened:after {top:18px;left:20%;border: 0;height: 2px;width:30px;background: #666;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);    -o-transform: rotate(45deg);transform: rotate(45deg);}
	#cssmenu #menu-button.menu-opened:before {top:18px;left:20%;background: #666;width:30px;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}
  #cssmenu #menu-button.menu-opened+ul{display: block;background:#fff;}
	#cssmenu #menu-button.menu-opened+ul a{color:#1e1e1e;}
  #cssmenu .submenu-button {/*position: absolute;z-index: 99;right: 0;top: 0;display: block;border-left: 1px solid rgba(120, 120, 120, 0.2);height: 46px;width: 46px;*/cursor: pointer;}
	#cssmenu .submenu-button.submenu-opened {}

  #cssmenu .submenu-button.submenu-opened +div{display: block; position: static;}
  #cssmenu .submenu-button.submenu-opened +div ul{display: block; background:#f0f0f0;padding:0 20px;}
  #cssmenu .submenu-button.submenu-opened +div ul li{float: none;background:#f0f0f0;text-align:left;}
	 #cssmenu .submenu-button.submenu-opened +div ul li:nth-child(1){border-top:0;}

	#cssmenu ul ul .submenu-button {height: 34px;width: 34px;}
	#cssmenu .submenu-button:after {position: absolute;top: 22px;right: 19px;width: 8px;height: 2px;display: block;background: #000;content: '';}
	#cssmenu ul ul .submenu-button:after {top: 15px;right: 13px;}
	#cssmenu .submenu-button.submenu-opened:after {background: #000;}
	#cssmenu .submenu-button:before {position: absolute;top: 19px;right: 22px;display: block;width: 2px;height: 8px;background: #000;content: '';}
	#cssmenu ul ul .submenu-button:before {top: 12px;right: 16px;}
	#cssmenu .submenu-button.submenu-opened:before {display: none;}
	#cssmenu li:hover > div {display: none}
#cssmenu > ul{margin-right:0;}
.menuw{display:none;}

	#container{}
	#container .content{margin:0 auto;padding:50px 30px;box-sizing:border-box;line-height:1.9;word-break:keep-all;}
	#container .content.main{padding:50px 10% 0;}

  
}




@media (max-width: 768px){
	#header .s_banner_wrap{display:none;}
	#header .s_banner_wrap_m{display:block;}

	#container .content h2{font-size:30px;color:#101010;line-height:1.4;}
#container .content h2 span{display:block;font-size:15px;color:#484848;}

	#footer{overflow:hidden;clear:both;padding:50px 5%;border-top:1px solid #d3d3d3;font-size:13px;}
	#footer .logo_foot{text-align:center;}
	#footer .logo_foot img{width:50%;}
	#footer .footer_link{overflow:hidden;width:310px;margin:0 auto;padding:15px 0 10px;}
	#footer .footer_link li:nth-child(1){background:none;}
	#footer .footer_link li{float:left;padding:0 10px;background:url("../images/common/line_foot.gif") 0 0.2em no-repeat;}
	#footer .footer_link li a{color:#3c3c3b;}
	#footer .copy{text-align:center;color:#808285;line-height:1.5;}
	#footer .copy span{display:block;}

}

@media (min-width:1024px){
	#header #navigation, #footer .copyright{}
	#header .s_banner_wrap_m{display:none;}
	#cssmenu > ul > li {/*float: left;*/margin:0}

}

@media (min-width:767px){


}

@media (min-width:1300px){

}




