/*
	ID : LAYOUT CSS
	WORK : Shinjunho
	NOTE : 레이아웃 / 공통 CSS
*/
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900);

/*browser reset*/
html, body{font-size:15px; font-family:'Noto Sans KR', sans-serif;}
html, body {width: 100%; height: 100%; }
body {word-wrap: break-word; word-break: break-all; text-size-adjust: none; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none;}
* { margin: 0; padding: 0; border: 0; outline: 0; -webkit-text-size-adjust:none;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ul,li,ol,dl,dt,dd {list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
table { border-collapse: collapse; border-spacing: 0; }
img, video { vertical-align: top; border:0;}
button { background: none; outline: none; border: none; cursor: pointer; background-color: transparent; border-radius: 0px; }
label { cursor: pointer; vertical-align: middle; }
input, select, textarea, button { font: inherit; color: inherit; vertical-align: middle; -webkit-border-radius:0; -webkit-appearance:none;}
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #f6f8f9 inset !important; } /*크롬에서 자동완성된 input의 노란색을 삭제*/
textarea { resize: none; }
a, a:hover, a:focus { color: inherit; text-decoration: none; }
i, em, address { font-style: normal; font-weight: normal; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, li, table, th, td,  form, address, pre, caption, cite, ode, dfn, var { font-style: normal; text-decoration: none; }
label img {pointer-events: none;} /* label 클릭불가 해결*/

/*layout set*/
.wrap {margin:0 auto; width:1000px; position:relative; }
.ellipsis {width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; display:inline-block;}/* 글줄임 */
section {position:relative; min-height:850px;}
section::after {content:""; display: block; clear: both;}

/* GNB */
nav {width:200px; min-height:900px; background:#fff; position:absolute; left:0px; top:0px; box-shadow:0px 0px 20px #eaeaea; line-height: 35px; z-index:10;}
nav h1 {width:100%; text-align:center; padding:43px 0px 40px 0px;}
nav > a {font-size:16px; font-weight:400; position:relative; display:block; letter-spacing:-1px; padding-left:40px; z-index:1;}
nav > a::before {content:""; width:195px; height:28px; left:-195px; top:4px; position:absolute; display:block; background:url("../images/layout/img_nav_bg.png") no-repeat center; z-index:-1;}
nav > a,
nav > a::before {-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;}
nav > a.active,
nav > a:hover{color:#fff; font-weight:500; text-shadow:2px 1px 1px rgba(0,0,0,0.2);}
nav > a.active::before,
nav > a:hover::before {left:0px}
nav .navBottom {position:absolute; top:545px; padding-left:40px;}
nav .navBottom .eft{ background:url("../images/layout/img_nav_eftbg.png") no-repeat left 13px; display:block; width:120px; height:37px; color:#909090; font-size:14px; font-weight:300;}
nav .navBottom .sns {text-align:center;}
nav .navBottom .sns a {display:inline-block; width:30px; height:30px; margin-top:27px;}
nav .navBottom .sns a:nth-child(2) {margin:0 11px;}
nav .navBottom .sns a.youtube {background:url("../images/layout/img_sns3.png") no-repeat;}
nav .navBottom .sns a.facebook {background:url("../images/layout/img_sns1.png") no-repeat;}
nav .navBottom .sns a.twiter {background:url("../images/layout/img_sns2.png") no-repeat;}
nav .navBanner {position:absolute; top:730px; overflow:hidden;}
nav .navBanner img {float:left;}
nav input[type="button"] {width:17px; height:14px; position:absolute; top:18px; left:2.5%; background:url("../images/layout/btn_menu.png") no-repeat center; background-size:100%; display:none;}

/* article */
article {position:relative; background:#f6f6f6; min-height:900px; margin-left:200px;}
/* main */
article.main div {margin:0 auto; width:1280px; height:1000px; position:relative; overflow:hidden;}
article.main div ul {position:absolute; overflow:hidden;}
article.main div ul.link img{-webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease;}
article.main div ul.link:hover img {transform: scale(1.04);}
article.main div .left1 {left:40px;} /*왼쪽부터*/
article.main div .left2 {left:363px;}
article.main div .left3 {left:690px;}
article.main div .left4 {left:1015px;}
article.main div .top1 {top:40px;} /* 위쪽부터 */
article.main div .top2 {top:345px;}
article.main div .top3 {top:648px;}

/* sub */
article.sub {padding:40px 100px; width:1280px;}
article.sub div.header {padding:65px 0 0 80px; height:285px; position:relative;}
article.sub div.header h1,
article.sub div.header h2 {font-weight:300; color:#fff;}
article.sub div.header h1 {font-size:64px; letter-spacing:-4px; line-height:65px; text-shadow:1px 1px 1px rgba(0,0,0,0.38);}
article.sub div.header h2 {font-size:18px; line-height:23px; margin-top:35px; text-shadow:1px 1px 1px rgba(0,0,0,0.19);}
article.sub div.header h1 .bold {font-weight:600;}
article.sub div.header h2 .bold {font-weight:600; color:#fdff60;}
article.sub div.header .mainimg {position:absolute; z-index: 1;}

article.sub div.content {padding:80px; background:#fff; letter-spacing:-0.5px; position:relative; word-break: keep-all;}
article.sub div.content+.content {padding:0px 80px;}
article.sub div.content ul {position:relative;}
article.sub div.content ul+ul {margin-top:60px;}
article.sub div.content .number {font-family: 'Roboto', sans-serif; font-size:32px; letter-spacing:-2px; position:relative; margin-bottom:40px;}
article.sub div.content .number::before {content:""; width:90px; height:3px; position:absolute; bottom:8px; left:-80px;}
article.sub div.content .conSubject{font-size:28px; font-weight:300; color:#494949;line-height:35px; letter-spacing:-3px; margin-bottom:55px;}
article.sub div.content .gray {color:#777; font-weight:300; font-size:16px;}
article.sub div.content .blackh1 {color:#333; font-size:20px; font-weight:600; margin-bottom:20px;}
article.sub div.content .bold {font-weight:500;}

/* sub type */
article.type1 div.header,
article.type1 div.content h2.number::before {background:#f2880a;}
article.type1 div.content .point {color:#f2880a;}
article.type1 div.header .mainimg {right:44px; top:65px;}
article.type1 div.content ul {width:510px;}
article.type1 div.content.floLleft {overflow:hidden;}
article.type1 div.content.floLleft ul {float:left; margin-bottom:100px; width:510px;}
article.type1 div.content.floLleft ul+ul {margin-top:0px;}
article.type1 div.content.floLleft ul:nth-child(odd) {margin-right:100px;}
article.type1 div.content.floLleft ul p {margin-top:20px;}

article.type2 div.header,
article.type2 div.content h2.number::before {background:#35b788;}
article.type2 div.content .point {color:#35b788;}
article.type2 div.header .mainimg {right:41px; top:41px;}
article.type2 div.content ul {width:470px;}
article.type2 div.content ul .bold {color:#333;}
article.type2 div.content ul .imgright {position:absolute; left:525px; top:80px;}

article.type3 div.header,
article.type3 div.content h2.number::before {background:#8e74c1;}
article.type3 div.content .point {color:#8e74c1;}
article.type3 div.header .mainimg {right:47px; top:187px;}
article.type3 div.content ul {width:400px;}
article.type3 div.content ul .imgright {position:relative; left:-80px; top:0px;}

article.type4 div.header,
article.type4 div.content h2.number::before {background:#00a7c0;}
article.type4 div.content .point {color:#00a7c0;}
article.type4 div.header .mainimg {right:92px; top:15px;}
article.type4 div.content ul {width:400px;}
article.type4 div.content ul.v1 {height:265px;}
article.type4 div.content ul.v1 .imgright {position:absolute; left:-80px; top:25px;}
article.type4 div.content ul.v2 {height:600px;}
article.type4 div.content ul.v2 .imgright {position:absolute; left:485px; top:0px;}

article.type5 div.header,
article.type5 div.content h2.number::before {background:#0d89b2;}
article.type5 div.content .point {color:#0d89b2;}
article.type5 div.header .mainimg {right:92px; top:15px;}
article.type5 div.content.floLleft {overflow:hidden; text-align:center;}
article.type5 div.content.floLleft ul {float:left; width:30%; padding:0 1.5%;}
article.type5 div.content.floLleft ul+ul {margin-top:0px;}
article.type5 div.content.floLleft ul h2 {font-size:80px; font-family: 'Roboto', sans-serif; letter-spacing:-8px; text-decoration: underline; margin-bottom:55px;}
article.type5 div.content.floLleft .conSubject {margin-bottom:35px;}
article.type5 div.content.floLleft ul .conText {color:#777; font-size:14px; font-weight:300;}

article.type5 div.content.info {overflow:hidden; padding-bottom:80px;}
article.type5 div.content.info ul {float:left; width:50%;}
article.type5 div.content.info ul+ul {margin-top:0px;}
article.type5 div.content.info ul h1 {font-size:26px; font-weight:500; color:#0d89b2; margin-bottom:53px;}
article.type5 div.content.info ul li {overflow:hidden; position:relative; padding-bottom:15px;}
article.type5 div.content.info ul li:last-child {padding-bottom: 0px;}
article.type5 div.content.info ul li * {font-size:16px; font-weight:300; float:left;}
article.type5 div.content.info ul.history li time {width:105px;}
article.type5 div.content.info ul.history li p {color:#777;}
article.type5 div.content.info ul.history li::before {content:""; width:1px; height:100%; background:#e2e2e2; position:absolute; top:0px; left:80px;}
article.type5 div.content.info ul.history li::after {content:""; width:7px; height:7px; background:#0d89b2; position:absolute; top:9px; left:77px; border-radius:7px;}
article.type5 div.content.info ul.contact li {padding-left:17px; position:relative;}
article.type5 div.content.info ul.contact li p {width:90px;}
article.type5 div.content.info ul.contact li a {padding:0 5px;}
article.type5 div.content.info ul.contact li a:hover {background:#0d89b2; color:#fff;}
article.type5 div.content.info ul.contact li::after {content:""; width:7px; height:7px; background:#0d89b2; position:absolute; top:8px; left:0px; border-radius:7px;}

article.type6 div.header,
article.type6 div.content h2.number::before {background:#739ad6;}
article.type6 div.content .point {color:#739ad6;}
article.type6 div.header .mainimg {right:92px; top:15px;}
article.type6 div.content ul {width:400px;}
article.type6 div.content ul .imgright {position:absolute; left:508px; top:0px;}
article.type6 div.content ul.v1 .imgright {position:absolute; left:540px; top:80px;}
article.type6 div.content ul.v2 {height:325px;}
article.type6 div.content ul.v2 .imgright {position:absolute; left:0px; top:180px;}

/* footer */
footer {background:#4f4f4f; color:#939393; text-align:center; font-weight:300; position:relative; z-index:20; font-size:14px; line-height:25px; min-width:1680px;}
footer .company {padding:35px 0; }
footer .company span {margin-right:14px;}
footer .company span.white {color:#fff;}
footer .copy {padding:30px 0; background:#444;}