@charset "utf-8";

@import url('basic.css'); /* 기본설정 */
@import url('setup.css'); /* 사이트 세부설정 */
/* @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); nanum gothic */

.wrap { position:relative; margin:0 auto; width:990px; *zoom:1; }
.wrap:after { content:""; display:block; clear:both; }

/* header */
#header { width:100%; height:184px; background:url('/assets/images/www/common/head_bg.jpg') repeat-x left top; }
#header div.top { width:100%; font-size:0; line-height:0; text-align:right; }
#header div.top a { display:inline-block; font-family:"NanumGothic", "Nanum Gothic"; font-size:11px; font-weight:bold; color:#ccc; line-height:33px; margin-right:12px; padding-right:13px; background:url('/assets/images/www/common/top_line.jpg') no-repeat right 12px; }
#header div.top a.on { color:#ff2f3f; margin-right:0; padding-right:0; background:none; }
#header h1 { overflow:hidden; width:100%; margin-top:15px; font-size:0; line-height:0; text-align:center; }
#header div.list { display:none; font-size:0; line-height:0; }

/* gnb */
#gnb { overflow:hidden; margin-top:16px; }
#gnb li { float:left; width:329px; font-family:"NanumGothic", "Nanum Gothic"; font-size:16px; font-weight:bold; text-align:center; border-right:1px solid #d4d4d4; }
#gnb li.first { width:328px; border-left:1px solid #ddd; }
#gnb li a { display:block; color:#403a39; line-height:39px; }
#gnb li a.on, #gnb li a:hover { color:#e30004; }

/* mobileMenu */
#mobileMenu { display:none; overflow-y:auto; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background:#fff; }
#mobileMenu div.top { position:relative; font-family:"NanumGothic", "Nanum Gothic"; font-size:16px; font-weight:bold; color:#d5001e; line-height:50px; padding-left:25px; }
#mobileMenu div.top div.close { position:absolute; width:auto; height:auto; top:13px; right:19px; font-size:0; line-height:0; margin:0; padding:0; background:none; }
#mobileMenu a { color:#555; }
#mobileMenu .gnb { border-top:1px solid #d0d0d0; }
#mobileMenu .gnb li { font-family:"NanumGothic", "Nanum Gothic"; font-size:15px; line-height:40px; border-bottom:1px solid #d0d0d0; font-weight:bold; background:#f5f5f5; }
#mobileMenu .gnb li a { padding-left:25px; }
#mobileMenu .gnb li .sub_gnb { display:none; }
#mobileMenu .gnb li.on { background:#d5001e url('/assets/images/www/common/mobile_bullet.png') no-repeat right 19px; border-bottom:none; }
#mobileMenu .gnb li.on a { color:#fff; }
#mobileMenu .gnb li.on .sub_gnb { display:block; background:#fff; }
#mobileMenu .gnb li.on .sub_gnb a { color:#000; }
#mobileMenu .gnb li.on .sub_gnb li { font-weight:normal; background:none; }
#mobileMenu .gnb li.on .sub_gnb li.on { background:#4c5154; }
#mobileMenu .gnb li.on .sub_gnb li.on a { color:#fff; }

/* main */
#main { width:100%; }
#main div.visual { position:relative; width:100%; font-size:0; line-height:0; }
#main div.visual img { width:100%; }
#main div.visual ul.onoff { position:absolute; bottom:50px; left:50%; margin-left:-20px; overflow:hidden; }
#main div.visual ul.onoff li { float:left; margin:0 4px; }
#main div.visual ul.onoff li a { display:block; width:10px; height:10px; border-radius:10px; background-color:#fff; border:1px solid #bdbdbd; }
#main div.visual ul.onoff li a.on, #main div.visual ul.onoff li a:hover { width:12px; height:12px; background-color:#e30004; border:none; }
#main ul.title { overflow:hidden; margin-top:30px; }
#main ul.title li { float:left; font-family:"NanumGothic", "Nanum Gothic"; font-size:20px; font-weight:bold; }
#main ul.title li.line { margin-left:20px; padding-left:20px; background:url('/assets/images/www/main/product_line.jpg') no-repeat left 3px; }
#main ul.title li.more { float:right; font-size:0; line-height:0; }
#main ul.title li a { display:block; color:#333; line-height:25px; }
#main ul.title li a.on, #main ul.title li a:hover { color:#e30004; }
#main ul.product { overflow:hidden; margin-top:17px; }
#main ul.product li { position:relative; float:left; margin-left:30px; font-size:0; line-height:0; }
#main ul.product li.first { margin-left:0; }
#main ul.product li div.bg { position:absolute; left:0; bottom:0; width:100%; background:url('/assets/images/www/main/product_bg.png') repeat left top; }
#main ul.product li div.bg div.name { margin:0 15px; font-family:"NanumGothic", "Nanum Gothic"; font-size:13px; color:#fff; line-height:34px; background:url('/assets/images/www/main/product_bullet.png') no-repeat right 10px; }
#main ul.content { overflow:hidden; margin-top:30px; padding-top:30px; border-top:1px solid #ddd; }
#main ul.content li { float:left; width:310px; min-height:243px; margin-left:30px; font-size:0; line-height:0; text-align:center; background-color:#f4f4f4; }
#main ul.content li.first { margin-left:0; }
#main ul.content li div.photo { border-bottom:2px solid #fff; }
#main ul.content li p.tit { margin-top:15px; font-family:"NanumGothic", "Nanum Gothic"; font-size:16px; font-weight:bold; color:#20272e; line-height:25px; }
#main ul.content li p.txt { margin:5px 10px 0 10px; font-family:"NanumGothic", "Nanum Gothic"; font-size:13px; color:#666; line-height:20px; }

/* contentsWrap */
#contentsWrap { overflow:hidden; width:990px; margin:30px auto 80px auto; }

/* snb */
#snb { float:left; width:190px; }
#snb h2 { font-family:"NanumGothic", "Nanum Gothic"; font-size:20px; color:#fff; line-height:60px; padding:10px 0 0 20px; }
#snb h2.company { background:url('/assets/images/www/company/h2_icon.png') no-repeat 120px bottom #d5001e; }
#snb h2.product { background:url('/assets/images/www/product/h2_icon.png') no-repeat 127px bottom #d5001e; }
#snb h2.customer { background:url('/assets/images/www/customer/h2_icon.png') no-repeat 120px bottom #d5001e; }
#snb ul.snb { border-left:1px solid #ddd; border-right:1px solid #ddd; border-bottom:2px solid #eee; }
#snb ul.snb li { font-family:"NanumGothic", "Nanum Gothic"; font-size:14px; border-bottom:1px solid #ddd; }
#snb ul.snb li a { display:block; padding-left:20px; color:#666; line-height:43px; }
#snb ul.snb li a.on, #snb ul.snb li a:hover { font-weight:bold; color:#e30004; background:url('/assets/images/www/common/snb_bullet.png') no-repeat 163px 17px #eee; }

/* contents */
#contents { float:left; width:750px; margin-left:50px; }
#contents div.locwrap { overflow:hidden; border-bottom:1px solid #ddd; }
#contents div.locwrap h3 { float:left; font-family:"NanumGothic", "Nanum Gothic"; font-size:30px; color:#333; line-height:69px; }
#contents div.locwrap div.location { float:right; margin-top:10px; font-family:"NanumGothic", "Nanum Gothic"; font-size:12px; color:#777; line-height:59px; padding-left:17px; background:url('/assets/images/www/common/home_icon.jpg') no-repeat left 25px; }
#contents div.ceo { margin-top:40px; font-size:0; line-height:0; }
#contents div.ceo img { width:100%; max-width:622px; }
#contents p.ceo { margin-top:20px; padding:28px; font-family:"NanumGothic", "Nanum Gothic"; font-size:14px; color:#505050; line-height:23px; background-color:#f8f8f8; }
#contents p.ceo em { display:inline-block; }
#contents p.ceo span { color:#303030; }
#contents p.ceo strong { margin-left:5px; font-size:18px; }
#contents div.wooshin { position:relative; width:100%; margin-top:40px; }
#contents div.wooshin div.logo { position:absolute; right:0; top:2px; font-size:0; line-height:0; }
#contents div.outline { margin-top:50px; font-size:0; line-height:0; }
#contents div.outline img { width:100%; }
#contents div.chart { margin-top:40px; font-size:0; line-height:0; border-top:2px solid #555; border-left:1px solid #ddd; border-right:1px solid #ddd; border-bottom:1px solid #ddd; }
#contents div.chart img { width:100%; }
#contents ul.tap { overflow:hidden; width:100%; margin-top:30px; }
#contents ul.tap li { float:left; width:374px; margin:10px 0 0 2px; font-family:"NanumGothic", "Nanum Gothic"; font-size:16px; text-align:center; }
#contents ul.tap li.first { margin-left:0; }
#contents ul.tap li.width1 { width:125px; }
#contents ul.tap li.width2 { width:123px; }
#contents ul.tap li.width3 { width:248px; }
#contents ul.tap li.width4 { width:249px; }
#contents ul.tap li a { display:block; color:#fff; line-height:39px; background-color:#777; }
#contents ul.tap li a.on, #contents ul.tap li a:hover { font-weight:bold; background:url('/assets/images/www/product/tap_bg.jpg') repeat left top; }
#contents ul.product { overflow:hidden; margin-top:10px; }
#contents ul.product li { float:left; width:228px; margin:30px 0 0 30px; padding-bottom:15px; border:1px solid #ddd; box-shadow:0 2px 2px rgba(0,0,0,0.1); }
#contents ul.product li.first { margin-left:0; }
#contents ul.product li div.img { font-size:0; line-height:0; }
#contents ul.product li div.img img { width:100%; }
#contents ul.product li p.name { margin-top:14px; font-family:"NanumGothic", "Nanum Gothic"; font-size:16px; font-weight:bold; color:#333; line-height:24px; text-align:center; }
#contents ul.product li p.tit { font-family:"NanumGothic", "Nanum Gothic"; font-size:14px; color:#888; line-height:24px; text-align:center; }
#contents ul.inquiry { overflow:hidden; margin-top:40px; padding:20px 0 18px 0; border-top:2px solid #555; border-left:1px solid #ddd; border-right:1px solid #ddd; border-bottom:1px solid #ddd; }
#contents ul.inquiry li { float:left; width:220px; margin-left:20px; font-family:"NanumGothic", "Nanum Gothic"; background:url('/assets/images/www/customer/line.jpg') no-repeat right top; }
#contents ul.inquiry li.last { width:248px; background:none; }
#contents ul.inquiry li div.tit1 { font-size:14px; font-weight:bold; color:#555; line-height:17px; padding-left:26px; background:url('/assets/images/www/customer/contact1.png') no-repeat left top; }
#contents ul.inquiry li div.tit2 { font-size:14px; font-weight:bold; color:#555; line-height:17px; padding-left:26px; background:url('/assets/images/www/customer/contact2.png') no-repeat left top; }
#contents ul.inquiry li div.tit3 { font-size:14px; font-weight:bold; color:#555; line-height:17px; padding-left:26px; background:url('/assets/images/www/customer/contact3.png') no-repeat left top; }
#contents ul.inquiry li p { margin-top:8px; font-size:16px; color:#190e0a; line-height:17px; }
#contents ul.location { overflow:hidden; margin-top:20px; }
#contents ul.location li { margin-top:10px; font-family:"NanumGothic", "Nanum Gothic"; font-size:14px; color:#666; line-height:20px; padding-left:30px; }
#contents ul.location li strong { color:#190e0a; }
#contents ul.location li.icon1 { background:url('/assets/images/www/customer/map_icon1.jpg') no-repeat left top; }
#contents ul.location li.icon2 { background:url('/assets/images/www/customer/map_icon2.jpg') no-repeat left top; }
#contents div.map { margin-top:30px; font-size:0; line-height:0; border:1px solid #ddd; }
#contents div.map img { width:100%; }
#contents div.bimg { margin-top:40px; font-size:0; line-height:0; border-top:2px solid #d5001e; border-left:1px solid #d0d0d0; border-right:1px solid #d0d0d0; border-bottom:1px solid #d0d0d0; }
#contents div.bimg img { width:100%; }
#contents ul.simg { overflow:hidden; width:100%; margin-top:20px; }
#contents ul.simg li { float:left; width:180px; margin-left:10px; font-size:0; line-height:0; }
#contents ul.simg li img { width:100%; }
#contents ul.simg li.first { margin:0; }
#contents ul.simg li a { display:block; border:1px solid #d0d0d0; }
#contents ul.simg li a.on, #contents ul.simg li a:hover { border:1px solid #555; }
#contents div.product2 { width:100%; font-family:"NanumGothic", "Nanum Gothic"; font-weight:bold; font-size:14px; color:#333; line-height:23px; padding:30px 0 10px 20px; text-align:left; vertical-align:top; }
#contents div.product2 p { font-family:"NanumGothic", "Nanum Gothic"; font-weight:normal; font-size:14px; color:#666; line-height:23px; padding-top:10px; text-align:left; }
#contents div.mimg { margin-top:40px; font-size:0; line-height:0; border-top:1px solid #d0d0d0; border-left:1px solid #d0d0d0; border-right:1px solid #d0d0d0; border-bottom:1px solid #d0d0d0; }
#contents div.mimg img { width:100%; }
#contents div.page { position:relative; width:100%; margin-top:40px; font-size:0; line-height:0; text-align:center; }
#contents div.page a { display:inline-block; margin:0 2px; padding:0 7px; font-size:14px; color:#666; line-height:23px; }
#contents div.page a img { margin:7px 0; vertical-align:top; }
#contents div.page a.on, #contents div.page a:hover { font-weight:400; color:#fff; background-color:#d5001e; }
#contents div.page a.mg1 { margin:0 10px 0 0; }
#contents div.page a.mg2 { margin:0 0 0 10px; }

/* footer */
#footer { width:100%; margin-top:30px; padding:30px 0; background-color:#f4f4f4; }
#footer div.flogo { float:left; font-size:0; line-height:0; }
#footer address { float:left; margin:11px 0 0 40px; padding-left:40px; font-family:"NanumGothic", "Nanum Gothic"; font-size:12px; font-style:normal; color:#888; line-height:21px; border-left:1px solid #bbb; }

@media screen and (max-width:990px) {
	.wrap { margin:0 auto; width:750px; }

	#gnb li { width:249px; }
	#gnb li.first { width:248px; }

	#main div.visual ul.onoff { bottom:30px; }
	#main ul.product li { width:23.5%; margin-left:2%; }
	#main ul.product li img { width:100%; }
	#main ul.content li { width:32%; margin-left:2%; }
	#main ul.content li div.photo img { width:100%; }

	#contentsWrap { width:750px; }
	#snb { width:190px; }
	#contents { width:520px; margin-left:40px; }
	#contents p.ceo em { display:inherit; }
	#contents div.wooshin div.logo { display:none; }
	#contents ul.tap li { width:49.5%; margin-left:1%; }
	#contents ul.tap li.width1 { width:16%; }
	#contents ul.tap li.width2 { width:15.8%; }
	#contents ul.tap li.width3 { width:32%; }
	#contents ul.tap li.width4 { width:32.9%; }
	#contents ul.product li { width:32%; margin:30px 0 0 2%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
	#contents ul.inquiry li { width:120px; }
	#contents ul.inquiry li.last { width:218px; }
	#contents ul.simg li { width:24.1%; margin-left:1.2%; }

	#footer div.flogo { display:none; float:none; font-size:0; line-height:0; }
	#footer address { float:none; margin:0; padding:0; text-align:center; border:none; }
}

@media screen and (max-width:768px) {
	.wrap { margin:0 15px; width:auto; }

	#header { height:123px; }
	#header h1 { margin-top:10px; text-align:left; }
	#header h1 img { height:70px; }
	#header div.list { display:block; position:absolute; top:63px; right:0; }

	#gnb { display:none; }

	#main div.visual ul.onoff { bottom:15px; }
	#main ul.product { margin-top:7px; }
	#main ul.product li { width:49%; margin:10px 0 0 2%; }
	#main ul.product li.first2 { margin-left:0; }
	#main ul.content { padding-top:10px; }
	#main ul.content li { width:100%; min-height:auto; margin:20px 0 0 0; padding-bottom:16px; }
	#main ul.content li p.txt { margin:5px 0 0 0 !important; }

	#contentsWrap { width:auto; margin:0 15px; }
	#snb { display:none; }
	#contents { width:100%; margin:0; }
	#contents ul.tap li.first2 { margin-left:0; }
	#contents ul.tap li.width1 { width:32.66666%; }
	#contents ul.tap li.width2 { width:32.66666%; }
	#contents ul.product li { width:48%; margin:30px 1% 0 1%; }
	#contents ul.product li.first { margin:30px 1% 0 1%; }
	#contents ul.inquiry li { width:97%; margin:0 0 20px 3%; }
	#contents ul.inquiry li.last { width:97%; margin:0 0 0 3%; }
	#contents div.page { margin-top:20px; }
	#contents div.page a { margin:0 2px; font-size:13px; line-height:22px; }
	#contents div.page img { margin:6px 0; }
	#contents div.page a.mg1 { margin:0 5px 0 0; }
	#contents div.page a.mg2 { margin:0 0 0 5px; }

	#footer div.flogo { display:none; float:none; font-size:0; line-height:0; }
	#footer address { float:none; margin:0; padding:0; text-align:center; border:none; }
}

@media screen and (max-width:480px) {
	.wrap { margin:0 10px; width:auto; }

	#contentsWrap { margin:0 10px; }
	#contents { width:100%; margin:0; }
	#contents div.locwrap div.location { display:none; }
}