@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
/*font-family: 'Noto Sans KR', sans-serif;*/
@import url(https://fonts.googleapis.com/css?family=Exo+2:400,500,600);
/*font-family: 'Exo 2', sans-serif;*/

/* reset.css */
* { margin:0;  padding:0; }
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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,input,select,textarea,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
/*table, caption, tbody, tfoot, thead, tr, th, td,*/
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
	padding:0px;
	margin:0px;
	vertical-align:top
}
table, caption, tbody, tfoot, thead, tr, th, td,label { vertical-align: middle; }
h1, h2, h3, h4, h5, h6{font-size:100%;}
img, fieldset{border:0px;}
table{border-collapse:collapse;}
ul, ol, li{list-style:none;}
address, em{font-style:normal;}
li img, object{vertical-align:top;}
input, select, textarea, form img{vertical-align:middle;}
a{ outline:0; text-decoration:none; border:none; vertical-align: top;}
body { background-color: #e6e6e6;  }

header { background: #292929 url(../img/headerBg.jpg) repeat-y -32px -147px ; position: fixed;
width: 440px; height: 100%; top: 0; left: 0; }
section { margin-left: 448px; margin-top: 8px;  }

/*header*/
header h1 { position: absolute; top:30%; left: 60px; z-index: 2; }
header h1 a { display: block; }
header .btnGroup { position: absolute; top: 30%; left: 60px;  }
.btnGroup span { width: 35px; height:3px; background-color: #eee; display: block; margin-top: 120px; }
.btnGroup ul { margin-top: 10px;  }
.btnGroup ul li { float: left; text-indent: -9999px; margin-right: 25px; }
.btnGroup ul li:last-child { margin-right: 0; }
.btnGroup ul li a { display: block; height:18px; }
.btnGroup ul li .btn1 { background: url(../img/btn1.png) no-repeat left top; width: 35px; }
.btnGroup ul li .btn2 { background: url(../img/btn2.png) no-repeat left top; width: 81px; }
.btnGroup ul li .btn3 { background: url(../img/btn3.png) no-repeat left top; width: 39px; }
.btnGroup ul li .btn4 { background: url(../img/btn4.png) no-repeat left top; width: 108px; }
.btnGroup ul li a:hover { background-position: left bottom; }
.btnGroup ul li a.on { background-position: left bottom; }

header .footer { position: absolute; bottom:0; left:0; width: 100%; /*background: url(../img/footerBg.jpg) repeat-y -32px -147px; background-position: fixed; background-attachment: fixed;*/}
.footer>li {  overflow: hidden;}
.footer>li>a { display: block; height:30px; background-color: rgba(255,255,255,0.1); border-top: 1px solid #333; border-bottom: 1px solid #111; position: relative; }
.footer>li>a>img { display: block; opacity: 0.3; position: absolute; top:50%; left: 60px; margin-top: -8px; }
.footer>li>div { ; background-color: rgba(0,0,0,0.7); padding: 10px 10px 10px 60px; display: none; }
.snsBox ul { overflow: hidden; }
.snsBox ul li { float: left; margin-right:20px; }
.snsBox ul li a { display: block;  }
.snsBox ul li a img { display:  block; opacity: 0.4; transition: all 0.3s; }
.snsBox ul li a:hover img { opacity:0.9; }

.copyBox ul { overflow: hidden; }
.copyBox ul li { font: 10px/1.2 'Noto Sans KR',sans-serif; color:#eee; opacity: 0.4; }
.copyBox ul li a { font: 10px/1.2 'Noto Sans KR',sans-serif; color:#eee;  display: block;}
.copyBox ul li:nth-child(1) { margin-bottom: 5px; }
.copyBox ul li:nth-child(2) { float: left; margin-right:20px; }

/*section*/
.box1 { width: 664px; height: 384px; padding: 8px; float: left;}
.box2 { width: 324px; height: 384px; padding: 8px; float: left;}
.box3 { width: 324px; height: 184px; padding: 8px; float: left;}
.box4 { width: 664px; height: 184px; padding: 8px; float: left;}

.wrap>div>div { width: 100%; height: 100%; cursor: pointer; }

.box1-1 { background: url(../img/box1-1.jpg) no-repeat 0 0; }
.box1-2 { background: url(../img/box1-2.jpg) no-repeat 0 0; }
.box1-3 { background: url(../img/box1-3.jpg) no-repeat 0 0; }
.box2-1 { background: url(../img/box2-1.jpg) no-repeat 0 0; }
.box3-1 { background: url(../img/box3-1.jpg) no-repeat 0 0; }
.box3-2 { background: url(../img/box3-2.jpg) no-repeat 0 0; }
.box3-3 { background: url(../img/box3-3.jpg) no-repeat 0 0; }
.box3-4 { background: url(../img/box3-4.jpg) no-repeat 0 0; }
.box3-5 { background: url(../img/box3-5.jpg) no-repeat 0 0; }
.box3-6 { background: url(../img/box3-6.jpg) no-repeat 0 0; }
.box3-7 { background: url(../img/box3-7.jpg) no-repeat 0 0; }
.box3-8 { background: url(../img/box3-8.jpg) no-repeat 0 0; }
.box3-9 { background: url(../img/box3-9.jpg) no-repeat 0 0; }
.box3-10 { background: url(../img/box3-10.jpg) no-repeat 0 0; }
.box3-11 { background: url(../img/box3-11.jpg) no-repeat 0 0; }
.box3-12 { background: url(../img/box3-12.jpg) no-repeat 0 0; }
.box3-13 { background: url(../img/box3-13.jpg) no-repeat 0 0; }
.box3-14 { background: url(../img/box3-14.jpg) no-repeat 0 0; }
.box3-15 { background: url(../img/box3-15.jpg) no-repeat 0 0; }
.box3-16 { background: url(../img/box3-16.jpg) no-repeat 0 0; }
.box3-17 { background: url(../img/box3-17.jpg) no-repeat 0 0; }
.box3-18 { background: url(../img/box3-18.jpg) no-repeat 0 0; }
.box4-1 { background: url(../img/box4-1.jpg) no-repeat 0 0; }
.box4-2 { background: url(../img/box4-2.jpg) no-repeat 0 0; }


/*.header{width:470px; height:100%; float:left; background-color: pink; position:fixed; top:0px left:0px; z-index:10;}
.wrap{overflow:hidden; margin-left:490px; padding-top: 50px;}
.wrap>div{float:left;}
.box1{width:640px; height:400px; background:#eee;}
.box2{width:320px; height:400px; background:#ddd;}
.box3{width:320px; height:200px; background:#ccc;}
.box4{width:320px; height:200px; background:#bbb;}
.box5{width:640px; height:200px; background:#aaa;}
.box6{width:320px; height:200px; background:#999;}
.box7{width:320px; height:200px; background:#888;}
.box8{width:320px; height:200px; background:#777;}
.box9{width:640px; height:200px; background:#666;}
.box10{width:320px; height:200px; background:#555;}*/

/*sub*/
.subWrap { margin: 16px 16px 16px 456px; }
.subHeader { width: 100%; height: 155px; margin-bottom: 16px; position: relative; background: url(../img/ConHeaderBg.png) no-repeat right 0;  overflow: hidden;}
.subCon { width: 100%;  overflow: hidden;}

/*subHeader*/
.subHeader h2 { position: absolute; right: 30px; top: 50%; margin-top: -46.5px; }

/*subCon*/
.subConPic { width: 50%; float: left; padding-right: 8px; box-sizing: border-box;}
.subConPic img { width: 100%; }
.subConTxt { width: 50%; float: left; padding-left: 8px; box-sizing: border-box;}
.subConTxt h3 { font: 500 40px/1.3 'Exo 2',sans-serif; color: #444; border-bottom: 3px solid #444; margin-bottom: 20px;}
.subConTxt .ConTxtWrap { padding: 0 10px; }
.subConTxt .subt1 { font: 18px/1.4 'Noto Sans KR', sans-serif; color: #444; }
.subConTxt .subSpec { font: 16px/1.4 'Noto Sans KR', sans-serif; color: #444; text-align: right; margin: 20px 0;}
.subConTxt ul { font: 300 16px/1.4 'Noto Sans KR', sans-serif; color: #444; margin-top: 40px; margin-bottom: 40px;}
.subConTxt ul li { margin-bottom: 10px; padding-left:20px; background: url(../img/li_icon.png) no-repeat left 7px; }
.backBtn { overflow: hidden;  }
.backBtn a { display: block; float: right; width: 100px; height: 40px; border: 1px solid #444; color: #444; text-align: center; font: 300 16px/2.5 'Noto Sans KR', sans-serif; transition: all 0.5s;}
.backBtn a:hover { background-color: #fff; }



@media screen and (min-width:0px) and (max-width:1399px){
	.subConPic { width: 100%; text-align: center; clear:both; margin-bottom: 20px; padding-right: 0px;}
	.subConTxt { width: 100%; clear:both; }
}