@charset "utf-8";
@import './font.css';

/********** RESET **********/

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, 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, hr, textarea, input[type=text], input[type=radio], input[type=checkbox], input[type=button], input[type=image], input[type=password], input[type=reset], input[type=submit], input[type=email], input[type=color], input[type=date], input[type=datetime],input[type=datetime-local], input[type=month], input[type=number], input[type=range], input[type=search], input[type=tel], input[type=time], input[type=url], inpuyt[type=week] {margin:0; padding:0; border:0; font:inherit;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
ol, ul, li {list-style:none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content:"";	content:none;}
table {border-collapse:collapse; border-spacing:0;}
hr {display:none;}
textarea {overflow:auto}
caption, figcaption {display:none;} 
em, address {font-style:normal;}
label {cursor:pointer;}
legend {position:absolute; top:0; left:0; width:0; height:0; overflow:hidden; visibility:hidden; font-size:0; line-height:0;} /* for screen reader */
:focus {outline:0 none;}
a {color:inherit;}
a:link {text-decoration:none; color:inherit;}
a, button {background:none; border:0 none; cursor:pointer;}

/********** COMMON **********/

html {width:100%; height:100%;}
body {position:relative; width:100%; height:100%; min-width:1000px; min-height:100%; letter-spacing:-0.05em;}
body, input, textarea, select {font:400 15px/1.0 "Montserrat", "Spoqa Han Sans", sans-serif; color:#666;}

.msg_sound_only, .sound_only {display:inline-block !important; position:absolute; top:0; left:0; margin:0 !important; padding:0 !important; font-size:0; line-height:0; border:0 !important; overflow:hidden !important;} /* 그누보드 곳곳에 사용중 */

#login-indicator {width:100%; height:30px; padding-left:30px; background:linear-gradient(to right, #fe985a, #fe5a88); box-sizing:border-box;}
#login-indicator:after {display:block; clear:both; content:"";}
#login-indicator p {float:left; height:30px; font:700 12px/30px "NanumSquare"; color:#fff;}
#login-indicator a {display:block; float:right; width:100px; height:30px; background:#333; text-align:center; font:700 12px/30px "NanumSquare"; color:#fff;}

/********** HEADER **********/

header {position:relative; width:100%; min-width:1000px; height:120px;}
header h1 {position:absolute; left:40px; top:40px; line-height:0;}
header h2 {position:absolute; right:40px; top:52px; line-height:0;}
header nav {padding-top:40px;}
header nav ul {width:332px; margin:0 auto;}
header nav ul:after {display:block; clear:both; content:"";}
header nav ul li {position:relative; float:left; width:110px;}
header nav ul li.on:after {display:block; position:absolute; left:50%; top:-15px; width:10px; height:10px; margin-left:-5px; background:#111; border-radius:5px; content:"";}
header nav ul li + li {margin-left:1px;}
header nav ul li + li:before {display:block; position:absolute; left:-1px; top:10px; width:1px; height:20px; background:#ccc; content:"";}
header nav ul li a {display:block; width:110px; height:40px; text-align:center; font:700 22px/40px "NanumSquare"; letter-spacing:-0.1em; color:#111;}

/********** FOOTER **********/

footer {position:relative; width:100%; height:160px; padding-top:50px; text-align:center; border-top:1px solid #e1e1e1;}
footer h1 {width:auto; font-size:15px; font-weight:700;}
footer address {width:auto; padding-top:40px; font-size:12px; line-height:1.5; letter-spacing:0.2em;}

/********** CONTENTS **********/

#main {}
#main div.top {width:100%; min-width:1000px; height:707px; background:url("../img/main/top-man.png") left bottom no-repeat; border-top:1px solid #e1e1e1;}
#main div.top div.inner {position:relative; width:100%; height:100%; background:url("../img/main/top-fence.png") center bottom no-repeat;}
#main div.top div.inner p {position:absolute;}
#main div.top div.inner p:first-child {top:130px; left:50%; margin-left:-254px; line-height:0;}
#main div.top div.inner p:nth-child(2) {top:330px; left:50%; margin-left:-25px; font:700 16px/1 "NanumSquare"; color:#999;}
#main div.top div.inner p:nth-child(3) {top:360px; left:50%; margin-left:-25px; font:800 16px/1 "NanumSquare"; color:#111; letter-spacing:11.5px;}
#main div.mid {width:100%; min-width:1000px;}
#main div.mid:after {display:block; clear:both; content:"";}
#main div.mid div {float:left; width:50%; height:500px; background-position:center center; background-repeat:no-repeat;}
#main div.mid div:first-child {background-image:url("../img/main/basics.png");}
#main div.mid div:nth-child(2) {background-image:url("../img/main/passion.png");}
#main div.mid div:nth-child(3) {background-image:url("../img/main/faith.png");}
#main div.mid div:nth-child(4) {background-image:url("../img/main/leap.png");}
#main div.mid div p {text-align:center; color:#fff;}
#main div.mid div p:first-child {padding-top:220px; font:800 48px/1 "Montserrat"; letter-spacing:10px;}
#main div.mid div p:nth-child(2) {padding-top:20px; font:700 16px/1.5 "NanumSquare";}
#main div.btm {width:100%; min-width:1000px; height:643px; background:url("../img/main/customer.png") center top no-repeat;}
#main div.btm p {padding-top:280px; font:800 48px/1 "Montserrat"; letter-spacing:20px; text-align:center; color:#fff;}

#content {position:relative;}

#content > div.top {position:relative; width:100%; height:480px; background-position:center center; background-size:cover;}
#content.company > div.top {background-image:url("../img/company/visual.png");}
#content.product > div.top {background-image:url("../img/product/visual.png");}
#content.customer > div.top {background-image:url("../img/customer/visual.png");}
#content > div.top p {width:auto; padding-top:210px; text-align:center; color:#fff; font:800 60px/1 "Montserrat"; letter-spacing:1em;}
#content > div.top p span {letter-spacing:0;}

#content nav {position:absolute; left:50%; top:420px; width:1000px; height:60px; margin-left:-500px;}
#content nav ul:after {display:block; clear:both; content:"";}
#content nav ul li {float:left; background:rgba(0,0,0,0.6);}
#content.company nav ul li {width:165px;}
#content.product nav ul li {width:165px;}
#content.product nav ul li.w140 {width:140px !important;}
#content.product nav ul li.w113 {width:113px !important;}
#content.product nav ul li.w100 {width:100px !important;}
#content.customer nav ul li {width:499px;}
#content nav ul li.on {background:#fff;}
#content nav ul li + li {margin-left:2px;}
#content nav ul li a {display:block; width:100%; height:100%; text-align:center; font:400 20px/60px "NanumSquare"; color:#fff; letter-spacing:-0.1em;}
#content nav ul li.on a {color:#111;}

#content article {position:relative; width:1000px; margin:0 auto; padding-bottom:80px;}
#content article.adhere {padding:0;}
#content article > h1 {width:auto; height:60px; padding-top:60px; text-align:center; font:300 42px/1 "NanumSquare"; letter-spacing:-0.1em; color:#111;}
#content article > h2 {width:auto; height:50px; text-align:center; font:400 16px/1 "Montserrat", "NanumSquare"; letter-spacing:0.5em; color:#ccc; border-bottom:1px solid #ccc;}
#content article > h1 span, #content article h2 span {letter-spacing:0;}
#content article > h2 + * {margin-top:50px;}
#content article > h3 {font:700 24px/1.2 "NanumSquare"; letter-spacing:-0.1em; color:#111;}
#content article div.container {position:relative; width:100%;}
#content article div.container:after {display:block; clear:both; content:"";}
#content article p.hr {width:100%; height:100px; margin:80px 0; border:0 none; background-position:center center; background-repeat:no-repeat;}

#content.company p.headline {position:relative; font:400 36px/1.2 "Nanum Myeongjo"; letter-spacing:-0.1em; color:#111; z-index:10;}

#content.company div.container.greetings.first {height:400px; margin-top:-50px; padding-top:100px; background:url("../img/company/greetings-01.png") right 20px no-repeat; z-index:0;}
#content.company div.container.greetings.second {height:483px; margin-top:-30px; padding:30px 0 0 500px; background:url("../img/company/greetings-02.png") left top no-repeat;}
#content.company div.container.greetings p.text {line-height:1.8;}
#content.company div.container.greetings p.text span {font:400 20px/1 "Nanum Myeongjo"; letter-spacing:-0.1em;}
#content.company div.container.greetings p.text span strong {padding-left:10px; font-size:30px; font-weight:400;}

#content.company div.container.overview {margin-top:50px;}
#content.company div.container.overview + .overview {margin-top:80px;}
#content.company div.container.overview h3 {float:left;}
#content.company div.container.overview ul {float:right; width:850px;}
#content.company div.container.overview ul li + li {margin-top:30px;}
#content.company div.container.overview ul li dl:after {display:block; clear:both; content:"";}
#content.company div.container.overview ul li dl dt {float:left; width:200px; height:200px; border-radius:100px; background-color:#000; background-position:center center; background-repeat:no-repeat; text-indent:-9999px;}
#content.company div.container.overview ul li:first-child dl dt {background-image:url("../img/company/overview-01.png");}
#content.company div.container.overview ul li:nth-child(2) dl dt {background-image:url("../img/company/overview-02.png");}
#content.company div.container.overview ul li:nth-child(3) dl dt {background-image:url("../img/company/overview-03.png");}
#content.company div.container.overview ul li:nth-child(4) dl dt {background-image:url("../img/company/overview-04.png");}
#content.company div.container.overview ul li dl dd {float:right; width:600px; padding-top:50px; line-height:1.5;}
#content.company div.container.overview ul li:nth-child(3) dl dd {padding-top:60px;}
#content.company div.container.overview .list_safety{display:flex;float:right;width:850px;padding-top:20px;justify-content:space-between}
#content.company div.container.overview .list_safety .item{width:420px;box-sizing:border-box;padding:15px;border:1px solid #666;border-radius:10px}
#content.company div.container.overview .list_safety .item .tit{display:block;font-size:27px;color:#000;text-align:center}
#content.company div.container.overview .list_safety .item .text_box{margin-top:20px;font-size:16px;color:#333;line-height:24px}
#content.company div.container.overview table {float:right; width:850px; border-top:1px solid #e1e1e1;}
#content.company div.container.overview table th {width:100px; border-bottom:1px solid #e1e1e1; font-weight:700;}
#content.company div.container.overview table td {padding:15px; border-bottom:1px solid #e1e1e1; line-height:1.5;}
#content.company div.container.overview table dl {float:left; width:50%;}
#content.company div.container.overview table dl:nth-child(3) {width:100%; margin-top:20px;}
#content.company div.container.overview table dl dt {height:30px; font-weight:700;}
#content.company div.container.overview table dl dt span {font-size:13px; font-weight:400; color:#999; letter-spacing:0;}
#content.company div.container.overview table dl dd {}
#content.company p.hr {background-image:url("../img/company/overview-hr.png");}

#content.company div.container.history {margin-top:50px; background:url("../img/company/history-01.png") right bottom no-repeat;}
#content.company div.container.history ul {padding-bottom:80px; background:url("../img/company/history-line.png") left top repeat-y;}
#content.company div.container.history ul li + li {margin-top:50px;}
#content.company div.container.history dl:after {display:block; clear:both; content:"";}
#content.company div.container.history dl dt {float:left; width:200px; padding-left:50px; background:url("../img/company/history-mark.png") left 10px no-repeat; font:200 30px/1 "Montserrat";}
#content.company div.container.history dl dd {float:right; width:700px; line-height:1.5;}

#content.company div.container.bizarea {margin-top:50px;}
#content.company div.container.bizarea + .bizarea {margin-top:80px;}
#content.company div.container.bizarea h3 {float:left;}
#content.company div.container.bizarea ul {float:right; width:850px;}
#content.company div.container.bizarea ul li + li {margin-top:30px;}
#content.company div.container.bizarea ul li dl:after {display:block; clear:both; content:"";}
#content.company div.container.bizarea ul li dl dt {float:left; width:200px; height:130px; padding-top:70px; border-radius:100px; background:#000; text-align:center; font-size:24px; color:#fff;}
#content.company div.container.bizarea ul li dl dt span {font-size:15px; color:#999;}
#content.company div.container.bizarea ul li dl dd {float:right; width:600px; padding-top:60px; line-height:1.5;}
#content.company div.container.bizarea ul li:nth-child(2) dl dd {padding-top:90px;}
#content.company div.container.bizarea table {float:right; width:850px; border-top:1px solid #e1e1e1;}
#content.company div.container.bizarea table th {height:50px; background:#333; color:#fff; font-weight:400;}
#content.company div.container.bizarea table td {height:50px; border-bottom:1px solid #e1e1e1; text-align:center;}
#content.company div.container.bizarea table dl {float:left; width:50%;}
#content.company div.container.bizarea table dl:nth-child(3) {width:100%; margin-top:20px;}
#content.company div.container.bizarea table dl dt {height:30px; font-weight:700;}
#content.company div.container.bizarea table dl dd {}
#content.company p.hr {background-image:url("../img/company/bizarea-hr.png");}

#content.company div.container.organization {height:550px; margin-top:50px; background:url("../img/company/organization-chart.png") left top no-repeat;}
#content.company div.container.organization p {position:absolute; height:38px; padding-top:22px; text-align:center;}
#content.company div.container.organization > p:first-child {left:400px; top:0; width:200px;}
#content.company div.container.organization > p:nth-child(2) {left:400px; top:90px; width:200px;}
#content.company div.container.organization > ul > li:first-child > p {left:10px; top:250px; width:200px;}
#content.company div.container.organization > ul > li:first-child > ul > li > p {left:60px; top:370px; width:100px;}
#content.company div.container.organization > ul > li:first-child > ul > li > ul > li:first-child > p {left:0; top:490px; width:100px;}
#content.company div.container.organization > ul > li:first-child > ul > li > ul > li:nth-child(2) > p {left:120px; top:490px; width:100px;}
#content.company div.container.organization > ul > li:nth-child(2) > p {left:237px; top:250px; width:200px;}
#content.company div.container.organization > ul > li:nth-child(2) > ul > li:first-child > p {left:227px; top:370px; width:100px;}
#content.company div.container.organization > ul > li:nth-child(2) > ul > li:nth-child(2) > p {left:347px; top:370px; width:100px;}
#content.company div.container.organization > ul > li:nth-child(3) > p {left:563px; top:250px; width:200px;}
#content.company div.container.organization > ul > li:nth-child(3) > ul > li:first-child > p {left:493px; top:370px; width:100px;}
#content.company div.container.organization > ul > li:nth-child(3) > ul > li:first-child > ul > li:first-child > p {left:433px; top:490px; width:100px;}
#content.company div.container.organization > ul > li:nth-child(3) > ul > li:first-child > ul > li:nth-child(2) > p {left:553px; top:490px; width:100px;}
#content.company div.container.organization > ul > li:nth-child(3) > ul > li:nth-child(2) > p {left:613px; top:370px; width:100px;}
#content.company div.container.organization > ul > li:nth-child(3) > ul > li:nth-child(3) > p {left:733px; top:370px; width:100px; height:43px; padding-top:17px;}
#content.company div.container.organization > ul > li:nth-child(4) > p {left:790px; top:250px; width:200px;}

#content.company div.map {height:400px; margin-top:50px;}
#content.company div.location {margin-top:30px;}
#content.company div.location.factory {padding-bottom:100px; /*background:url("../img/company/location-01.png") right bottom no-repeat;*/}
#content.company div.location ul li {padding:10px 0;}

#content.product article.index h3 {padding-top:80px; font:100 60px/1.1 "Montserrat"; text-align:center; letter-spacing:10px;}
#content.product article.index h3 strong {font-weight:700; letter-spacing:67px; color:#999;}
#content.product article.index h3 span {letter-spacing:0;}
#content.product article.index ul {width:700px; margin:50px auto 0;}
#content.product article.index ul:after {display:block; clear:both; content:"";}
#content.product article.index ul li {float:left; width:300px; height:300px; margin:25px;}
#content.product article.index ul li a {display:block; width:300px; height:160px; padding-top:140px; border-radius:150px; text-align:center; font:200 30px/1.1 "Montserrat"; color:#fff; background-position:center center; background-size:100%; transition:all .5s;}
#content.product article.index ul li.fence a {background-image:url("../img/product/index-01.png");}
#content.product article.index ul li.soundproof a {background-image:url("../img/product/index-02.png");}
#content.product article.index ul li.guard a {background-image:url("../img/product/index-03.png");}
#content.product article.index ul li.bridge a {background-image:url("../img/product/index-04.png");}
#content.product article.index ul li.sign a {background-image:url("../img/product/index-05.png");}
#content.product article.index ul li.earthquake a {background-image:url("../img/product/index-06.png");}
#content.product article.index ul li a:hover {background-size:118%;}
#content.product article.index ul li.fence a:hover {background-image:url("../img/product/index-01-over.png");}
#content.product article.index ul li.soundproof a:hover {background-image:url("../img/product/index-02-over.png");}
#content.product article.index ul li.guard a:hover {background-image:url("../img/product/index-03-over.png");}
#content.product article.index ul li.bridge a:hover {background-image:url("../img/product/index-04-over.png");}
#content.product article.index ul li.sign a:hover {background-image:url("../img/product/index-05-over.png");}
#content.product article.index ul li.earthquake a:hover {background-image:url("../img/product/index-06-over.png");}

#content.product div.btn-wrap {position:absolute; top:50px; width:1000px; height:80px;}
#content.product div.btn-wrap.fixed {position:fixed; top:50px; left:0; right:0; width:1000px; margin:0 auto;}
#content.product div.btn-wrap button {position:absolute; width:80px; height:80px; text-indent:-9999px; transition:all 0.3s;}
#content.product div.btn-wrap button.prev {left:0; background:url("../img/product/btn-prev-strong.png");}
#content.product div.btn-wrap button.next {right:0; background:url("../img/product/btn-next-strong.png");}
#content.product div.btn-wrap.fixed button.prev {left:-100px;}
#content.product div.btn-wrap.fixed button.next {right:-100px;}

#content.product ul.info {border-top:1px solid #e1e1e1;}
#content.product ul.info li {border-bottom:1px solid #e1e1e1;}
#content.product ul.info li dl {padding:15px 0;}
#content.product ul.info li dl:after {display:block; clear:both; content:"";}
#content.product ul.info li dl dt {float:left; width:110px; text-align:center; font:700 15px/1.5 "NanumSquare"; letter-spacing:-0.1em; color:#111;}
#content.product ul.info li dl dd {float:left; width:890px; line-height:1.5;}

#content.product p.prd.image {margin-top:50px;}

#content.customer table.bbs-list {width:100%;}
#content.customer table.bbs-list thead th {height:50px; background:#333; color:#fff; font-weight:400;}
#content.customer table.bbs-list tbody th {height:50px; border-bottom:1px solid #e1e1e1; font-weight:400;}
#content.customer table.bbs-list tbody td {height:50px; padding-left:20px; border-bottom:1px solid #e1e1e1;}