@charset "utf-8";

* {font-family: "NanumSquare";}
header { }
header > div {width: 1200px; margin: 0 auto;}
header > div:after {content: ""; display: block; clear: both;}
header h1 {float: left; padding: 30px 0; }
header h1 a {display: block; font-size: 0; background:url(../img/index_logo_1.png) no-repeat; width: 223px; height: 48px;}
header nav {float: right;}
header nav > ul:after {content: ""; display: block; clear: both;}
header nav > ul > li {position:relative; float: left;}
header nav > ul > li > a {position: relative; display: inline-block; line-height: 120px; font-size: 17px; color: #595757; padding:0 40px; transition: all .4s; font-weight: bold;}
header nav > ul > li > a:hover {transform: scale(1.05);  }
header nav > ul > li > a.color {color:#0c8388; }
header nav > ul > li > a.on:after {content: ""; display: inline-block; position: absolute; left:50%; transform: translateX(-50%); bottom: 0px; border-width:10px; border-style:solid; border-color:transparent transparent #0c8388 transparent;}
header nav > ul > li ul {display: none; width: 100%; text-align: center; position: absolute; left: 50%; top: 145px; z-index: 60; transform: translateX(-50%);}
header nav > ul > li ul.on {display: block;}
header nav > ul > li ul li a {font-size: 15px; color: #fff; line-height: 35px; transition: all .4s; font-family: "Nanum Square"; letter-spacing: -2px;} 
header nav > ul > li ul li a:hover {color: #0c8388;}

footer {border-top: 1px solid #ededed; background: #f9f9f9; }
footer > div {width: 1200px; margin: 0 auto; padding:25px 0; text-align: center;}
footer > div h1 {display: inline-block; margin-bottom: 10px; font-size: 0; background: url(../img/index_logo_2.png) no-repeat; width: 152px; height: 33px;}
footer > div address {font-size: 13px; color: #333; line-height: 28px; font-weight: 500; font-style: normal;}
footer > div address span {display: inline-block; width: 1px; height: 10px; background:#333; margin: 0 4px; }

body.hidden {overflow:hidden;}
.txt_center {text-align: center;}

#menu {display: none; position: absolute; z-index: 50; width: 100%; height: 190px; background: url(../img/bg_index_menu.png) no-repeat rgba(0,0,0,0.05); border-top: 6px solid #0c8388;}
#menu > div {width: 1200px; margin: 0 auto;}

.visual img {width: 100%; height: 100%;}
.menubar {width: 100%; display: inline-block; background:#eeeeee; height: 50px; border-bottom: 1px solid #ddd; box-shadow: 0 1px 3px 1px rgba(0,0,0,0.1);}
.menubar > div {width: 1200px; margin: 0 auto;}
.menubar > div:after {content: ""; display: block; clear: both;}
.menubar > div > a {float: left; font-size: 0; background:url(../img/ico_sub11_home.png) center no-repeat; width:50px; height:50px; border-right: 1px solid #dddddd;}
.menubar > div > ul {float: left;}
.menubar > div > ul:after {content: ""; display: block; clear: both;}
.menubar > div > ul > li {float: left; border-right: 1px solid #ddd;}
.menubar > div > ul > li  > a {position: relative; width: 200px; font-size:15px; color: #666; display:block; padding: 0 17px; line-height: 50px;}
.menubar > div > ul > li  > a:after {content: ""; display: inline-block; background:url(../img/ico_sub11_down.png) no-repeat; width:16px; height: 8px; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);}
.menubar > div > ul > li > ul {display: none; background:rgba(238,238,238,0.9); padding: 15px 0; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; margin-left: -1px; position: relative; z-index: 10; }
.menubar > div > ul > li > ul.show {display: block;}
.menubar > div > ul > li > ul > li > a {display: block; padding: 0 20px; font-size:14px; color: #666; line-height: 34px; transition: all .3s;}
.menubar > div > ul > li > ul > li > a:hover {color: #0c8388;}
 /*회사소개*/
.sub1 > article {width: 1200px; margin: -4px auto 100px; background:url(../img/bg_sub11_conti1.png) right 0 top 0 no-repeat;}
.sub1 > article .conti1 {text-align: center;}
.sub1_h2 {display: inline-block; font-size:37px; color: #333; padding: 100px 0;}
.sub1_h2:before {content: ""; display: inline-block; width: 5px; height: 48px; background:#007d82; position: relative; top: 14px; margin-right: 25px;}
.sub1_1 .conti1 img {padding:70px 0;}
.sub1_2 .conti1 img {padding: 70px 0;}
.sub1_3 .conti1 img {padding: 70px 0 50px;}
.sub1_4 .conti1 iframe {width: 100%; height: 420px;}
.sub1_4 .conti1 {text-align: left !important;}
.sub1_4 .conti1 img {padding-top: 20px;}

/*제품소개*/
.sub2 > article {width: 1200px; margin: 0 auto; background: url(../img/bg_sub21_conti1.png) right 0 top 0 no-repeat;}
.sub2 > article .conti1 {text-align: center; padding-bottom: 200px;}
.sub2_h2 {display: inline-block; font-size:38px; color: #333; padding: 100px 0; }
.sub2_h2:before {content: ""; display: inline-block; width: 5px; height: 52px; background:#0091be; position: relative; top: 10px; margin-right: 25px;}
.sub2 .conti1 ul.imgs:after {content: ""; display: block; clear: both;}
.sub2 .conti1 ul.imgs li {float: left; padding:0 10px;}
.sub2 .conti1 ul.imgs li img {margin-bottom: 30px; }
.sub2 .conti1 ul.imgs li p {font-size: 18px; color: #333; font-weight: bold;} 
.sub2 .conti1 > img {width: 100%; height: 100%; padding-bottom: 50px;}

/*R&D*/
.sub3 > article {}
.sub3 > article .conti1 {padding-bottom: 100px;}
.sub3_h2 {width: 1200px; margin: 0 auto; display: block; font-size:38px; color: #333; padding: 100px 0;}
.sub3_h2:before {content: ""; display: inline-block; width: 5px; height: 52px; background:#0c74ae; position: relative; top: 10px; margin-right: 25px;}
.sub3_1 {width: 1200px; margin: 0 auto; background: url(../img/bg_sub31_conti1.png) right 0 top 0 no-repeat;}
.sub3_1 .conti1 {width: 1200px; margin: 0 auto; text-align: center;}
.sub3_1 .conti1 ul {text-align: left;}
.sub3_1 .conti1 ul:after {content: ""; display: block; clear: both;}
.sub3_1 .conti1 ul li {float: left; width: 20%; padding-bottom: 60px; }
.sub3_1 .conti1 ul li img {cursor: pointer;}
.sub3_1 .conti1 ul li p {text-align: center; display: block; padding-top: 20px; font-size: 15px; color: #333;}
/*이미지 확대*/
.sub3_1 .conti1 ul li .more {display: none; width: 100%; height: 100%; position: fixed; left: 0; top: 0; background: rgba(0,0,0,0.5); }
.sub3_1 .conti1 ul li .more img {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 550px; height: 780px;}
.sub3_2 .h3 {font-size: 20px; color: #333; display: block; text-align: center; }
.sub3_2 .h3:after {content: ""; display: block; width: 52px; height: 2px; background: #0071af; margin-top: 50px; position: relative; left: 50%; transform: translateX(-50%);}
.sub3_2.conti1 {width: 1200px; margin: 0 auto; background: url(../img/bg_sub31_conti1.png) right 0 top 0 no-repeat;}
.sub3_2.conti1 ul {display: flex; border:5px solid #b2d4e7; padding:40px 20px; margin-top: 30px;}
.sub3_2.conti1 ul li {flex: 1; }
.sub3_2.conti1 ul li h4 {font-size: 16px; color: #333; padding-bottom: 20px;}
.sub3_2.conti1 .conti1_1 {margin-bottom: 50px;}
.sub3_2.conti2 { background: url(../img/bg_sub32_conti2.jpg) no-repeat; padding: 70px 0 50px; text-align: center;}
.sub3_2.conti2 > div {width: 1200px; margin: 0 auto;}
.sub3_2.conti2 img {margin: 50px 0;}
.sub3_2.conti3 {background: #fff; padding: 75px 0 50px; text-align: center;}
.sub3_2.conti3 > div {width: 1200px; margin: 0 auto;}
.sub3_2.conti3 img {margin-top: 50px;}
.sub3_2.conti3 p {font-size: 16px; color: #333; line-height: 30px; padding: 50px 0; letter-spacing: -1px; display:none;}
.sub3_2.conti4 {background: url(../img/bg_sub32_conti4.jpg) no-repeat; padding: 100px 0; text-align: center;}
.sub3_2.conti4 > div {width: 1200px; margin: 0 auto;}
.sub3_2.conti4 ul {margin-top: 30px;}
.sub3_2.conti4 ul:after {content: ""; display: block; clear: both;}
.sub3_2.conti4 ul li {float: left; width: 33.3%; padding-bottom: 20px;}
.sub3_3 {width: 1200px; margin: 0 auto;background: url(../img/bg_sub31_conti1.png) right 0 top 0 no-repeat;}
.sub3_3 .conti1 {width: 1200px; margin: 0 auto; }
.sub3_3 .conti1 ul {display: flex;}
.sub3_3 .conti1 ul li {flex: 1; }

/*주요설비*/
.sub4 > .sub4_1 {width: 1200px; margin: 0 auto; background: url(../img/bg_sub41_conti1.png) right 0 top 300px no-repeat;}
.sub4 > .sub4_1.type2 {background: none;}
.sub4 > .sub4_2 {width: 1200px; margin: 0 auto; background: url(../img/bg_sub41_conti1.png) right 0 top 650px no-repeat;}
.sub4 > article .conti1 {text-align: center; padding-bottom: 400px;}
.sub4_h2 {display: inline-block; font-size:38px; color: #333; padding: 100px 0 50px; }
.sub4_h2:before {content: ""; display: inline-block; width: 5px; height: 52px; background:#7c975a; position: relative; top: 10px; margin-right: 25px;}
.sub4_h2 span {display: block; font-size: 16px; color: #333; font-weight: normal; margin-top: 20px; text-indent: 35px;}
.sub4_1 .conti2 .navig { border: 1px solid #ddd; margin-bottom: 50px;}
.sub4_1 .conti2 .navig li {border-bottom: 1px solid #ddd; }
.sub4_1 .conti2 .navig li:last-child {border-bottom: none;}
.sub4_1 .conti2 .navig li:after {content: ""; display: block; clear: both;}
.sub4_1 .conti2 .navig li h4 {float: left; font-size: 13px; color: #333; background: #fafafa; padding:10px; font-weight: normal;}
.sub4_1 .conti2 .navig li h4:after {content: ""; display: inline-block; background: url(../img/ico_sub531_up.png) no-repeat; width: 19px; height: 9px; margin-left: 60px;}
.sub4_1 .conti2 .navig li h4.next:after { background: url(../img/ico_sub531_down.png) no-repeat; }
.sub4_1 .conti2 .navig li a {display: block; height: 36px;}
.sub4_1 .conti2 .navig li a p {float: left; padding:10px; font-size: 12px;color: #666; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; /* 라인수 */ -webkit-box-orient: vertical; word-wrap:break-word; }
.sub4 .conti1 ul:after {content: ""; display: block; clear: both;}
.sub4_1 .conti1 ul li {float: left; width: 25%; padding: 0 10px;}
.sub4_1 .conti1 ul li > a {display: block; box-shadow:0 1px 1px 1px #dbdbdb;}
.sub4_1 .conti1 ul li .img img {width: 100%; height: 100%;}
.sub4_1 .conti1 ul li .txt {background: #fbfbfb; text-align: center; padding: 20px 0; height: 90px;}
.sub4_1 .conti1 ul li .txt p {font-size: 17px; color: #333; font-weight: bold;}
.sub4_1 .conti2 .title {background: #f5f5f5; border-top: 2px solid #7c975a; }
.sub4_1 .conti2 .title h3 { font-size: 16px; color: #333; line-height: 50px; text-indent: 10px; }
.sub4_1 .conti2 .title_sub {background: #fff; border-bottom: 1px solid #ddd; padding: 10px; }
.sub4_1 .conti2 .title_sub ul:after {content: ""; display: block; clear: both; }
.sub4_1 .conti2 .title_sub ul li {float: left;}
.sub4_1 .conti2 .title_sub ul li:after {content: "";display: block; clear: both;}
.sub4_1 .conti2 .title_sub ul li:last-child:before {background: none;}
.sub4_1 .conti2 .title_sub ul li:before {content: ""; display: inline-block; width: 1px; height: 11px; background: #777; margin: 0 10px; position: relative; top: 2px;}
.sub4_1 .conti2 .title_sub ul li h4 {float: left; padding-right: 4px; }
.sub4_1 .conti2 .title_sub ul li p {float: left;}
.sub4_1 .conti2 .ctt {padding: 100px 0; text-align: left;}
.sub4_1 .conti2 .ctt img {height: 195px;}
.sub4_2 .conti1 ul li {float: left; width: 33.3%; padding:20px 10px;}
.sub4_2 .conti1 ul li > div {box-shadow:2px 3px 3px 1px #4b4b4b;}
.sub4_2 .conti1 ul li > div img {width: 100%; height: 100%;}
.sub4_2 .conti2 {text-align: center; padding-bottom: 300px;}
.sub4_2 .conti2 h3 {font-size:28px; color: #333;display: inline-block; }
.sub4_2 .conti2 h3:after {content: ""; display: block; width: 52px; height: 2px; background: #7c975a; position: relative; left: 50%; transform: translateX(-50%); margin: 20px 0 50px;}
.sub4_1 .conti2 .btns a {display: inline-block; width:140px; height: 40px; background: #7c975a; line-height: 40px; text-align: center; font-size: 14px; color: #fff; margin-bottom: 100px; transition: all .4s;}
.sub4_1 .conti2 .btns a:hover {background: #fff; color: #7c975a; border:1px solid #7c975a; line-height: 38px;}

/*알림마당*/
.sub5 > article {width: 1200px; margin: 0 auto; background: url(../img/bg_sub51_conti1.png) right 0 top 0 no-repeat; }
.sub5_h2 {display: inline-block; font-size:38px; color: #333; padding: 100px 0 50px; }
.sub5_h2:before {content: ""; display: inline-block; width: 5px; height: 52px; background:#007d82; position: relative; top: 10px; margin-right: 25px;}
.sub5_1 .conti1 > p {font-size: 13px; color: #333; margin-bottom: 15px; text-align: left;}
.sub5_1 .conti1 > p span { color: #007d82; font-weight: bold; }
.sub5 .conti1 table { border-top: 3px solid #007d82; text-align: center;}
.sub5 .conti1 table tr {border-bottom: 1px solid #ddd;}
.sub5 .conti1 table thead tr {background: #f7f7f7; height: 40px; }
.sub5 .conti1 table thead th {font-size: 14px; color: #333; line-height: 40px; padding: 0; }
.sub5 .conti1 table tbody tr {background: #fff; padding: 10px 0;}
.sub5 .conti1 table tbody tr td {font-size: 13px; color: #333; margin: 20px 0;}
.sub5 .conti1 table tbody tr td.h3 {text-align: left; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; /* 라인수 */ -webkit-box-orient: vertical; word-wrap:break-word; }
.sub5 .conti1 table tbody tr td.h3 a {display: block;}
.sub5 .conti1 table tbody tr td.h3 a:hover {text-decoration: underline;}
.sub5 .conti1 table tbody tr td span {display: block; width: 44px; height: 20px; text-align: center; line-height: 20px; color: #fff; font-size: 11px; position: relative; left: 50%; top: 2px; transform: translateX(-50%); }
.sub5 .conti1 table tbody tr td span.ico1 {background: #b10026;}
.sub5 .conti1 table tbody tr td span.ico2 {background: #0147b0;}
.sub5 .conti1 .schbox {border:1px solid #ddd; background: #f3f3f3;  display: block;  padding: 20px 250px; margin-bottom: 100px; float:none; clear: both;;}
.sub5 .conti1 .schbox select {flex: none; width: 180px; vertical-align: middle; height: 45px; border:1px solid #ddd; margin-right: 10px; float: left;}
.sub5 .conti1 .schbox input { width: 400px; vertical-align: middle; height: 45px; border:1px solid #ddd; margin-right: 10px; padding:0 10px;}
.sub5 .conti1 .schbox button {flex: none; width: 43px; height: 43px; vertical-align: middle; font-size: 0; background: url(../img/ico_sub51_search.png) no-repeat;  background-size: 100% 100%; border:0;}
.sub5_1 .conti2 .title {background: #fff; border-top: 2px solid #007d82; }
.sub5_1 .conti2 .title .h3 { font-size: 16px; color: #333; line-height: 50px; text-indent: 10px; }
.sub5_1 .conti2 .title_sub { border-bottom: 1px solid #ddd; padding: 10px; }
.sub5_1 .conti2 .title_sub ul:after {content: ""; display: block; clear: both; }
.sub5_1 .conti2 .title_sub ul li {float: left;}
.sub5_1 .conti2 .title_sub ul li:after {content: "";display: block; clear: both;}
.sub5_1 .conti2 .title_sub ul li:before {content: ""; display: inline-block; width: 1px; height: 11px; background: #777; margin: 0 10px; position: relative; top: 2px;}
.sub5_1 .conti2 .title_sub ul li h4 {float: left; padding-right: 4px; }
.sub5_1 .conti2 .title_sub ul li p {float: left;}
.sub5_1 .conti2 .ctt {padding: 100px 0;}
.sub5_1 .conti2 .re_write {border-top: 1px solid #ddd;}
.sub5_1 .conti2 .re_write li {border-bottom: 1px solid #ddd; padding: 10px 10px 0;text-align: left; position: relative;}
.sub5_1 .conti2 .re_write li .h4 {font-size: 14px; color: #333; display: inline-block; padding: 0 5px 10px 0; font-weight: bold;}
.sub5_1 .conti2 .re_write li em {font-size: 12px; color: #999;}
.sub5_1 .conti2 .re_write li .btns {position: absolute; right: 10px; top: 10px;}
.sub5_1 .conti2 .re_write li .btns a {display: inline-block; width: 37px; height: 24px; font-size: 12px; color: #333; line-height: 22px; text-align: center; border:1px solid #ddd;}
.sub5_1 .conti2 .re_write li .txt {padding-bottom: 10px;}
.sub5_1 .conti2 .re_write li ul li {border-top: 1px solid #ddd;}
.sub5_1 .conti2 .re_write li ul li .h4:before {content: ""; display: inline-block; background: url(../img/ico_sub531_re.png) no-repeat; width: 53px; height: 21px; margin-right: 10px; position: relative; top: 5px;}
.sub5_1 .conti2 .re_write li ul li .txt {padding-left: 50px;}
.sub5_1 .conti2 .re_box {border-bottom: 1px solid #ddd; padding: 10px; height: 145px; position: relative; margin-bottom: 30px;}
.sub5_1 .conti2 .re_box textarea {width: 100%; height: 100%; border: 1px solid #ddd; padding-right: 100px; text-indent: 10px;}
.sub5_1 .conti2 .re_box a {font-size: 13px;color: #333; width: 70px; height: 65px; text-align: center; line-height: 65px; background: #eee; display: inline-block; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); border: 1px solid #ddd;}
.sub5_1 .conti2 .navig { border: 1px solid #ddd; }
.sub5_1 .conti2 .navig li {border-bottom: 1px solid #ddd; }
.sub5_1 .conti2 .navig li:last-child {border-bottom: none;}
.sub5_1 .conti2 .navig li:after {content: ""; display: block; clear: both;}
.sub5_1 .conti2 .navig li h4 {float: left; font-size: 13px; color: #333; background: #fafafa; padding:10px; font-weight: normal;}
.sub5_1 .conti2 .navig li h4:after {content: ""; display: inline-block; background: url(../img/ico_sub531_up.png) no-repeat; width: 19px; height: 9px; margin-left: 60px;}
.sub5_1 .conti2 .navig li h4.next:after { background: url(../img/ico_sub531_down.png) no-repeat; }
.sub5_1 .conti2 .navig li a {display: block; height: 36px;}
.sub5_1 .conti2 .navig li a p {float: left; padding:10px; font-size: 12px;color: #666; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; /* 라인수 */ -webkit-box-orient: vertical; word-wrap:break-word; }


/*페이징*/
.paging {text-align: center; margin: 50px 0; }
.paging a {width: 40px; height: 40px; border:1px solid #ddd; font-size: 12px; color: #666; text-align: center; line-height:38px; display: inline-block; transition: all .4s; }
.paging a:hover {color:#fff; background: #2a909a; }
.paging a.on {color:#fff; background: #2a909a; }