@charset "utf-8";
/* 2015-12-11 by gw8.kr */

/* reset */
html{width:100%; height:100%; min-height:100%; overflow-y:scroll}
body{width:100%; height:100%; min-height:100%;margin:0px;padding:0px;font-size:0.75em;font-family:'Noto Sans Korean','Malgun Gothic', dotum, sans-serif;background:#fff;color:#666;min-width:300px;word-break:keep-all;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, dl, dt, dd, img{margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6{font-size:1em;font-family:dotum}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block}
#hd ul, nav ul, #ft ul{margin:0;padding:0;list-style:none}
legend{margin:0;padding:0;}
label, input, button, select, img{vertical-align:middle}
input, button{margin:0;padding:0;font-family:dotum;font-size:1em}
button{cursor:pointer}
textarea, select{font-family:dotum;font-size:1em;color:#666;}
select{margin:0}p{margin:0;padding:0;word-break:break-all}
hr{display:none}
pre{overflow-x:scroll;font-size:1.1em}
a:link, a:visited{color:#666;text-decoration:none}
a:hover, a:focus, a:active{color:#333;text-decoration:underline}
.blind{position:absolute;left:-9999999px;top:-999999px;filter:Alpha(opacity=0);opacity:0.0;-moz-opacity:0.0; height:1px; width:1px;overflow:hidden;}
.clb{clear:both;}
a,area{blr:expression(this.onFocus=this.blur())}
a,input{outline:none;}
:focus{-moz-outline-style:none;}
button,
button:focus{outline:none;-moz-outline-style:none;}
div,section,p{word-break:keep-all;}

/* layout */
#header{position:absolute; left:0px; top:-999px;}

.btnNavOnOff{position:fixed; z-index:999999; right:0px; top:0px;}
.btnNavOnOff a{padding:20px;cursor:pointer;
				-webkit-transition-duration: 0.2s;-webkit-transition-timing-function: ease;transition-duration: 0.2s;transition-timing-function: ease;}
.btnNavOnOff a img{width:50px;}

a.btn_nav_open{display:block;}
a.btn_nav_close{display:none;}

#nav{position:fixed; right:0px; top:0px; z-index:99999;width:200px; height:100%; margin-right:-140px;}
#nav ul{padding:80px 0;overflow:auto;}
#nav ul li a{display:block; padding:0 28px; height:40px; line-height:40px; clear:both;}
#nav ul li a i {display:block; width:10px; height:40px; background:#ccc; margin-right:20px; float:left;
				-webkit-transition-duration: 0.2s;-webkit-transition-timing-function: ease;transition-duration: 0.2s;transition-timing-function: ease;filter:Alpha(opacity=30); opacity:0.3; -moz-opacity:0.3;}
#nav ul li a b {display:none; height:40px; line-height:40px; font-family:verdana; font-size:14px; float:left;}
#nav ul li a.on i{background:#5589e9;}
#nav ul li a:hover i{background:#2263da;}
#nav ul li.nav01 a i{border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;}
#nav ul li.nav05 a i{border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;}
#nav ul:hover li a i{filter:Alpha(opacity=100); opacity:1; -moz-opacity:1;
				-webkit-transition-duration: 0.2s;-webkit-transition-timing-function: ease;transition-duration: 0.2s;transition-timing-function: ease;}
#nav ul li a:link,
#nav ul li a:visited{color:#a9b3c5;}
#nav ul li a:hover,
#nav ul li a:active,
#nav ul li a:focus{color:#fff;}
#nav ul li.nav06{padding-left:35px;}

.nav_on{ background:#00153d; overflow:auto;}
.nav_on ul li a b {display:block;}
.hpix{width:100%;padding:40px 0; text-align:center; position:relative; overflow:hidden; height:auto; min-height:400px !important;}
.hpix h2,
#section05 h2{font-size:30px;}
.navOpenBg{width:100%; height:100%; position:fixed; left:0px; top:0px;margin-left:-100%; background:URL(../img/gw8_logo.png) no-repeat #3366cc; background-position: center center; background-size:10% auto; z-index:99998;filter:Alpha(opacity=80); opacity:0.8; -moz-opacity:0.8; text-align:center; line-height:100%; color:#fff; font-size:33px;background-attachment:fixed;}
.btn_down{display:block; position:absolute; left:50%; bottom:5px; margin-left:-20px;}
.btn_up{display:block; position:absolute; left:50%; top:5px; margin-left:-20px;}
.btn_down img,
.btn_up img{display:block;width:40px;-webkit-transition-duration: 0.2s;-webkit-transition-timing-function: ease;transition-duration: 0.2s;transition-timing-function: ease;}
.btn_down:hover img{-ms-transform: rotate(-15deg);-webkit-transform: rotate(-15deg);transform: rotate(-15deg);}
.btn_up:hover img{-ms-transform: rotate(15deg);-webkit-transform: rotate(15deg);transform: rotate(15deg);}
a:link.btn_down,
a:visited.btn_down,
a:hover.btn_down{color:#fff; font-weight:bold; font-family:verdana; font-size:13px; overflow:hidden;}
.btn_down b{display:block; padding:0 0 10px 0;}
#footer{position:fixed; right:20px; bottom:20px; text-align:right; color:#fff; font-family:verdana; font-size:10px; font-weight:bold; z-index:999990; background:URL(http://websiting.co.kr/img/footerbg.gif) no-repeat center center;filter:Alpha(opacity=50); opacity:0.5; -moz-opacity:0.5;}

#section01{background:URL(../img/sec01bg.gif) no-repeat center center #000e28; background-size:100% 100%; position:relative;}
#section02{background:#ffffff; padding-bottom:0px;}
#section03{background:#dddddd;}
#section04{background:URL(../img/sec04bg.gif) no-repeat center center #002c7c; background-size:100% 100%;}
#section05{background:URL(../img/sec05bg.gif) no-repeat center center #00163e; background-size:100% 100%;width:100%;padding:40px 0; text-align:center; position:relative; overflow:hidden;}

#section01 h2{font-family:'Noto Sans Korean','Malgun Gothic', dotum, sans-serif; font-size:16px; color:#fff; width:100%; position:absolute; left:0px; top:-60px; font-weight:normal;}
#section01 h2 strong{font-family: 'Nanum Myeongjo'; font-size:30px; color:#fff; display:block; margin:0 auto;}
#section01 div{position:absolute; left:0px; top:50%; margin-top:-300px; text-align:center; width:100%;}
#section01 div p{position:relative;}
#section01 div img{width:400px;-webkit-transition-duration: 0.2s;-webkit-transition-timing-function: ease;transition-duration: 0.2s;transition-timing-function: ease;}
#section01 div img:hover{-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);}

#section02 i{display:block; padding:30px 0 20px 0;}
#section02 i img{width:230px;}
#section02 h2{font-family: 'Nanum Myeongjo'; color:#001c50;}
#section02 p{width:90%; margin:0 auto; max-width:700px; font-size:16px; font-weight:normal; color:#999;}
#section02 p strong{font-family: 'Nanum Myeongjo';display:block; font-size:20px; padding:20px 0;}
#section02 .about{width:100%; padding:0px; text-align:center; background:URL(../img/sec01_02bg.jpg) repeat center center #001e4a; background-size:auto 100%; overflow:hidden; position:relative;background-attachment:fixed;}
#section02 .about u{display:block; width:400px; position:absolute; top:0px; left:50%; margin-left:-200px;}
#section02 .about u img{display:block; width:100%;}
#section02 .about div{width:400px; margin:0 auto; padding:65px 0 100px 0; overflow:hidden; color:#fff; font-size:13px;}
#section02 .about div .about_txt01{display:block; width:230px; float:left; text-align:right; height:220px;}
#section02 .about div .about_txt01 strong{display:block; font-size:26px; padding-bottom:5px; font-weight:200;}
#section02 .about div .about_txt01 strong b{font-size:2.0em; font-weight:500;}
#section02 .about div .about_txt02{display:block; width:240px; float:right; text-align:left;}

#section03 i{display:block; padding:30px 0 20px 0;}
#section03 i img{width:130px;}
#section03 h2{font-family: 'Nanum Myeongjo'; color:#001c50;}
#section03 h3{font-family: 'Nanum Myeongjo'; color:#002c7c; font-size:18px; padding:20px 0; width:80%; max-width:460px; margin:0 auto;}
#section03 p{width:90%; margin:0 auto; max-width:700px; font-size:16px; font-weight:normal; color:#999;}
#section03 p strong{font-family: 'Nanum Myeongjo';display:block; font-size:20px; padding:20px 0;}

.sec03dl{width:90%; max-width:980px; margin:0 auto; overflow:hidden;}
.sec03dl dl{width:33%; display:block; float:left;}
.sec03dl dl dt{padding:20px 0 10px 0;font-family: 'Nanum Myeongjo'; color:#002c7c; font-size:24px;}
.sec03dl dl dd{text-align:center;}
.sec03dl dl dd span{display:block; text-align:left; padding:20px 30px; font-size:14px; color:#333;}
.sec03dl dl dd img{width:70%; max-width:150px; filter:Alpha(opacity=30); opacity:0.3; -moz-opacity:0.3;-webkit-transition-duration: 0.2s;-webkit-transition-timing-function: ease;transition-duration: 0.2s;transition-timing-function: ease;}
.sec03dl dl:hover dd img{filter:Alpha(opacity=100); opacity:1; -moz-opacity:1;-webkit-transition-duration: 0.2s;-webkit-transition-timing-function: ease;transition-duration: 0.2s;transition-timing-function: ease;}

#section04{padding-bottom:60px;}
#section04 h2{font-family: 'Nanum Myeongjo'; color:#fff; padding:40px 0;}
#section04 h2 img{width:40px; vertical-align:middle;}
#section04 .pflist{overflow:hidden;}
#section04 .pflist figure {display:block; width:20%; overflow:hidden; float:left; margin:0px; padding:0px;}
#section04 .pflist figure  figcaption{display:none;}
#section04 .pflist figure a{display:block; width:100%; overflow:hidden; position:relative; z-index:1;}
#section04 .pflist figure i{display:block; width:100%;}
#section04 .pflist figure i img{display:block; width:100%;}
#section04 .pflist figure u{display:block; width:100%; height:100%; position:absolute; left:0px; top:0px; background:#e7e7e7; filter:Alpha(opacity=10); opacity:0.1; -moz-opacity:0.1;
							-webkit-transition-duration: 0.2s;-webkit-transition-timing-function: ease;transition-duration: 0.2s;transition-timing-function: ease;}
#section04 .pflist figure:hover u{filter:Alpha(opacity=100); opacity:1; -moz-opacity:1;
							-webkit-transition-duration: 0.2s;-webkit-transition-timing-function: ease;transition-duration: 0.2s;transition-timing-function: ease;}
#section04 .pflist figure u img{width:100%;-webkit-transition-timing-function: ease;transition-duration: 0.2s;transition-timing-function: ease;}
#section04 .pflist figure:hover u img{width:80%; margin:10% auto;-webkit-transition-timing-function: ease;transition-duration: 0.2s;transition-timing-function: ease;}
#section04 .pflist figure b{display:block; width:100%; position:absolute; left:0px; bottom:50%; padding:10px 0; margin-bottom:-20px; font-size:12px; color:#fff;
							-webkit-transition-duration: 0.2s;-webkit-transition-timing-function: ease;transition-duration: 0.2s;transition-timing-function: ease;}
#section04 .pflist figure:hover b{background:#001c50;padding:20px 0;  bottom:20px;
							-webkit-transition-duration: 0.2s;-webkit-transition-timing-function: ease;transition-duration: 0.2s;transition-timing-function: ease;}
#section04 .pflist figure b small{display:none;}
#section04 .pflist figure:hover b small{display:block; font-size:11px; font-weight:normal; color:#98a4b9; padding-top:10px;}

.sec04_pswp{width:100%; height:0px;display:block; overflow:hidden; background:#002c7c;position:relative;}
a.goToWEBsiting{display:block;margin:20px auto; height:50px; line-height:50px; width:80%; max-width:400px; border:3px solid #001d53; font-size:14px; font-weight:bold; color:#6989c5; clear:both;
							-webkit-transition-duration: 0.2s;-webkit-transition-timing-function: ease;transition-duration: 0.2s;transition-timing-function: ease;}
a:hover.goToWEBsiting{color:#fff; text-decoration:none;background:#000033; border:3px solid #000033;
							-webkit-transition-duration: 0.2s;-webkit-transition-timing-function: ease;transition-duration: 0.2s;transition-timing-function: ease;}

#section05 h2{font-family: 'Nanum Myeongjo'; color:#fff;}
#section05 i{display:block; padding:30px 0 20px 0;}
#section05 i img{width:130px;}
#section05 dl{width:80%; max-width:400px; margin:0 auto; overflow:hidden; padding-bottom:50px;}
#section05 dl dt{position:absolute; left:-9999px; top:-99999px;}
#section05 dl dd{position:relative; width:100%; padding-bottom:10px;}
#section05 dl dd label{display:block; text-align:left; font-size:14px; color:#fff; padding-bottom:5px;}
#section05 dl dd input.ipt{width:98%;padding:15px 0 15px 2%; background:#fff; border:0px;}
#section05 dl dd .txtar{width:96%; height:90px; background:#fff; padding:2%; border:0px;}

#section05 dl dd input.btn_submit{width:100%; height:40px; line-height:40px; background:#000; color:#fff; font-weight:bold; text-align:center; border:0px; cursor:pointer;}
#section05 dl dd input:hover.ipt,
#section05 dl dd textarea:hover{background:#ddeff5;}
#section05 dl dd input:focus.ipt,
#section05 dl dd textarea:focus{background:#c9ff90;}

.tag{width:70%; max-width:450px; text-align:left; margin:50px auto; position:relative; padding:0 0 0 60px;}
.tag u{display:block; position:absolute; left:0px; top:0px;}
.tag u img{width:46px;}
.tag span{display:inline-block; padding:3px;}

.tagsec5{width:70%; max-width:340px; text-align:left; margin:20px auto; position:relative; padding:0 0 0 60px;}
.tagsec5 u{display:block; position:absolute; left:0px; top:0px;}
.tagsec5 u img{width:46px;}
.tagsec5 span{display:inline-block; padding:3px;}
.tagsec5 span{color:#b3c0d8;display:inline-block; padding:3px;}

@media all and (max-width: 900px)
{
	.btnNavOnOff a img{width:20px;}
	#nav{width:160px;}
	#nav ul{padding-top:50px;}
	#nav ul li a i{width:4px;filter:Alpha(opacity=100); opacity:1; -moz-opacity:1;}

	#section01 div{margin-top:-200px;}
	#section01 div img{width:400px;}

	#section02 i img{width:60px;}

	#section03 i img{width:40px;}
	.sec03dl dl{width:100%; display:block; float:none; padding-bottom:20px; border-bottom:1px dashed #999;}
	.sec03dl dl dd img{width:80px;;}

	#section05 i img{width:40px;}
	#section05 h2{font-size:22px;}

	.hpix h2{font-size:22px;}
}

@media all and (max-height: 800px)
{
	#section01 div{margin-top:-200px;}
	#section01 div img{max-width:400px;}

	.navOpenBg{background-size:30% auto; background-position:30px 30px;}
}

@media all and (max-width: 800px)
{
	#section04 .pflist figure {width:33%;}
	#section04 .pflist figure b{font-size:12px;}
	#section04 .pflist figure:hover b{background:#001c50;padding:10px 0;}

	.navOpenBg{background:#3366cc; background-size:30% auto; background-position:30px 30px;}
}

@media all and (max-width: 700px)
{
	#section01{min-height:460px !important;}
	#footer{right:5px; bottom:5px;}

	#section01 h2{font-size:14px;}
	#section01 h2 strong{font-size:24px;}
	#section01 div{margin-top:-130px;}
	#section01 div img{width:260px;}

	#section02 p{font-size:12px; text-align:left;}
	#section02 p strong{font-size:14px;}

	#section02 .about u{ width:260px; margin-left:-130px;}
	#section02 .about div{width:300px;  padding:25px 0 60px 0; font-size:12px;}
	#section02 .about div .about_txt01{ width:170px; height:160px;}
	#section02 .about div .about_txt01 strong{font-size:20px;}
	#section02 .about div .about_txt02{width:180px;}
}

@media all and (max-width: 600px)
{
	#section04 .pflist figure {width:50%;}
}