@charset "utf-8";
/* CSS Document */

/* ------------------------------
	Basic
------------------------------ */
* {-webkit-text-size-adjust:none; }
html { margin: 0px; padding: 0px; background:#fff;} 
body {  margin: 0px; padding: 0px; min-width: 980px; font-size: 12px; color: #333; margin: 0px; padding: 0px;}
body, input, textarea, select, option, label, td, th, div {font-family: Malgun Gothic, '맑은고딕', Dotum, '돋움', Gulim, Helvetica, Arial, sans-serif; }
div, p, a {  line-height: 140%;}
div, p, ol, ul, li, img, a, h1, h2, h3, h4, h5, h6, form, span, iframe, dl, dt, dd { margin: 0px; padding: 0px; }
div, ul, li, ol	{ list-style: none; text-align: left; }
form { margin: 0px; padding: 0px; }
img { border: 0px; }
label { cursor: pointer; }

div, ul, dl, ol {
	box-sizing: border-box; /* W3C */
	-o-box-sizing: border-box; /* Opera */
	-ms-box-sizing: border-box; /* Internet Explorer */
	-moz-box-sizing: border-box; /* Firefox */
	-webkit-box-sizing: border-box; /* Safari & Chrome */
}

legend, caption { display: none; }

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {display:inline-block;}   /* Hides from IE-mac s*/
* html .clearfix { height: 1%; }
.clearfix { display: block; } /* End hide from IE-mac */
.clear { clear:both; }


/* ------------------------------
	Link
------------------------------ */
a { cursor: pointer; }
a:link { color: #333333; text-decoration: none; }
a:visited { color: #333333;text-decoration: none; }
a:active { color: #333333;text-decoration: none; }
a:hover { color: #555555; text-decoration: underline; }

/* ------------------------------
	Paging
------------------------------ */
ul.pagelist li a { font-size:14px; text-decoration:none; }
ul.pagelist li a:hover { text-decoration:underline; }
ul.pagelist li a.page { padding-left:6px; padding-right:6px; }
ul.pagelist li a.select { font-size:16px; font-weight:bold; color:red; }
img {
	border: none;
	vertical-align: middle;
}

input {
	margin: 0;
	padding: 1px;
	vertical-align: middle;
	font-size:13px;
}

input[type=button] {
	margin: 0;
	padding: 1px;
	vertical-align: middle;
	font-size:13px;
}

select {
	margin: 1px;
	padding: 1px;
	vertical-align: middle;
	font-size:13px;
}

select option {
	background-color:#FFFFCC;
}

form {
	width:100%;
	height:100%;
	margin:0px;
	display:inline;
}

button.small {
	border: 1px solid #d3d3d3;
	background:url('../../admin/tool/_files/bg_btn.png') repeat-x top;
	margin: 1px;
	padding-top: 4px;
	padding-bottom: 4px;
	width: 26px;
	cursor: pointer;
}

button.small:hover {
	border: 1px solid #999999;
	background:url('../../admin/tool/_files/bg_btn-.png') repeat-x top;
	margin: 1px;
	padding-top: 4px;
	padding-bottom: 4px;
	width: 26px;
	cursor: pointer;
}

ul, li, ol { list-style: none; }

/* ------------------------------
	Layout
------------------------------ */
#wrap { width:100%; }
#container-top { width:100%; height:114px; border-bottom:3px solid #458bcf;}
#header { width:960px; height:114px; margin:0 auto;}
#container-body { width:100%; background-color:#f5f5f5;padding:0;margin:0;}
#container-body:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; *zoom:1;}
#container-body div.wrap { width:960px; margin:0 auto;}
#container-body div.left { float:left;width:772px;padding:0;margin:0;*margin-top:-1px;}
#container-body div.right {float:left;width:188px;padding:0;margin:0;*margin-top:-1px;}
#footer { clear:both; width:100%; height:70px;*height:80px;}
#footer div.wrap { width:960px; margin:0 auto;}

/* ------------------------------
	Logo
------------------------------ */
#header div.logo { float:left; width:143px; height:38px; padding:0px; margin-top:40px;}
#header div.logo ul.logo li a { display:block; width:143px; height:38px; text-decoration:none;background: url('../images/top/logo.gif') no-repeat;}
#header div.logo ul.logo li a span { position:absolute; z-index:-1; visibility:hidden; }
#header div.logo ul.logo li a:hover {background: url('../images/top/logo.gif') no-repeat;}

/* ------------------------------
	G.Navi
------------------------------ */
#header div.general {float:right; width:500px; height:15px;margin-top:8px;}
#header div.general ul.g2 {float:right;padding:0;}
#header div.general ul.g2 li {float:left;padding-left:18px;}
a.g2link:link { text-decoration: none; font-size:11px;}
a.g2link:visited { color:#666;text-decoration: none; font-size:11px;}
a.g2link:active { color:#666;text-decoration: none; font-size:11px;}
a.g2link:hover { color:#111;text-decoration: underline; font-size:11px;}

/* ------------------------------
	M.Navi
------------------------------ */
#header div.menu { float:right;*width:607px;height:15px;margin-top:28px;}
#header div.menu div.gnb { width:100%; height:15px;}
#header div.menu div.gnb ul.vtop { float:left; height:30px; margin:0;}
#header div.menu div.gnb ul.vtop li { float:left; font-size:14px; padding-left:80px; height:15px;}
#header div.menu div.gnb ul.vtop li.first {padding-left:0px;}
#header div.menu div.gnb ul.vtop li a { display:block; height:15px; text-decoration:none;color:#555;font-size:16px;}
#header div.menu div.gnb ul.vtop li a:visited,#header div.menu div.gnb ul.vtop li a:active, {color:#555;}
#header div.menu div.gnb ul.vtop li a:hover {color:#458bcf;}
#header div.menu div.gnb ul.vtop li a span { }
#header div.menu div.gnb ul.vtop li.p a.p { display:block; height:30px; text-decoration:none;color:#3e61b9;font-weight:bold;}

/* ------------------------------
	Submenu
------------------------------ */
#submenu {position:absolute; display:none; width:100%; height:200px; left:0; top:114px;*top:117px; z-index:40; text-align:center; background:#fff;opacity : 0.80;}
#submenu .wrap {position:relative;width:960px; height:154px; margin:0 auto;}
#submenu ul {margin-top:38px;}
#submenu ul.sm1 {float:left;margin-left:356px;*margin-left:353px;width:160px;}
#submenu ul.sm2 {float:left;width:150px;}
#submenu ul.sm3 {float:left;width:146px;}
#submenu ul.sm4 {float:left;width:140px;}
#submenu ul li {text-align:left;line-height:200%;}
#submenu ul li a { text-decoration:none; color:#555; }
#submenu ul li a:hover { text-decoration:underline; color:#555;font-weight:bold; }


/* ------------------------------
	Main Image
------------------------------ */
#main-view { width:100%; height:500px;}

#preview_box { float:left; width:100%; height:500px;}
#preview_contents {  float:left; display: block; width:100%; height:500px; list-style: none; overflow:hidden;}
#preview_contents li { float:left; width:100%; height:500px;  }

#preview_page {  float:left; height:4px;}
#preview_page a {
	float:left;
	background: url( '../images/m/off.gif') 0 0 no-repeat transparent;
	width: 193px;
	height: 14px;
	margin: 0 0 0 0;
	display: inline-block;
}
#preview_page a.selected {
	background: url( '../images/m/on.gif') 0 0 no-repeat transparent;
	cursor: default;
}
#preview_page a span { display: none; }

/* ---------------------------------------------
	Customer Notice	
------------------------------------------------ */
#middle-view {float:left;width:100%;padding:0;}
#middle-view div.customer { float:left; width:386px; height:245px; *margin-top:4px; background-color:#fff;}
#middle-view div.notice { float:left; width:386px; height:245px; *width:335px; *height:185px; *margin-top:4px; background-color:#fff;padding:60px 0 0 50px;border-left:1px solid #f5f5f5;}
#middle-view div.notice h4.tit-pt { width:286px; }
#middle-view div.notice span.more { float:right;*margin-top:-30px;}
#middle-view div.notice ul.txt {width:286px;margin-top:16px;}
#middle-view div.notice ul.txt li {background: url( '../images/m/bullet_dot.gif') 0 10px no-repeat;padding-left:5px;margin:8px 0 8px 0;}
#middle-view div.notice ul.txt li span.date { float:right; *margin-top:-16px;}
#middle-view div.notice ul.txt li a {color:#555;}

/* ---------------------------------------------
	Util
------------------------------------------------ */
#util ul li {float:left;margin-left:75px;}

/* ------------------------------
	product
------------------------------ */
h3.tit-pt {color:#944240;font-size:18px;font-weight:bold;}
h4.tit-pt {color:#944240;font-size:18px;font-weight:bold;}
h4.tit-p {color:#944240;font-size:14px;font-weight:bold;margin:22px 15px 30px 15px;line-height:140%;}
h4.tit-p span {color:#333333;}
h5.tit {color:#944240;font-size:12px;font-weight:bold;margin-bottom:12px;}
h5.tit span {color:#333333;font-size:11px;margin-left:10px;}
h4.tit {color:#944240;font-size:14px;font-weight:bold;}
h4.titblack {color:#393939;font-size:12px;font-weight:bold;}
h4.titline {color:#944240;font-size:14px;font-weight:bold;border-bottom:1px solid #dfdfdf;padding-bottom:17px;}

/* ------------------------------
	Footer
------------------------------ */
#footer div.address {clear:both; height:60px; padding:0 0 0 204px; background: url( '../images/f/logo.gif') 50px 5px no-repeat;*background: url( '../images/f/logo.gif') 50px 30px no-repeat;}
#footer div.address p.txt{margin-top:25px;}

/* ------------------------------
	Maring,Padding
------------------------------ */
.mt5 { margin-top:5px; }
.mt10 { margin-top:10px; }
.mt15 { margin-top:15px; }
.mt19 { margin-top:19px; }
.mt20 { margin-top:20px; }
.mt23 { margin-top:23px; }
.mt25 { margin-top:25px; }
.mt30 { margin-top:30px; }
.mt40 { margin-top:40px; }
.mt40 { margin-top:40px; }
.mt50 { margin-top:50px; }
.mt60 { margin-top:60px; }
.mt70 { margin-top:70px; }
.mt80 { margin-top:80px; }
.mt100 { margin-top:100px; }
.mt130 { margin-top:130px; }
.mt150 { margin-top:150px; }

.mb5 { margin-bottom:5px; }
.mb10 { margin-bottom:10px; }
.mb20 { margin-bottom:20px; }
.mb25 { margin-bottom:25px; }
.mb30 { margin-bottom:30px; }
.mb40 { margin-bottom:40px; }
.mb50 { margin-bottom:50px; }
.mb60 { margin-bottom:50px; }
.mb70 { margin-bottom:50px; }
.mb80 { margin-bottom:50px; }
.mb90 { margin-bottom:90px; }
.mb100 { margin-top:100px; }
.mb150 { margin-top:150px; }

.ml5 { margin-left:5px; }
.ml10 { margin-left:10px; }
.ml15 { margin-left:15px; }
.ml20 { margin-left:20px; }
.ml25 { margin-left:25px; }
.ml30 { margin-left:30px; }

/* ------------------------------
	Skip Menu
------------------------------ */
#skiptoContent {*height: 0px;_display:none;}
#skiptoContent a.skip {
	position: absolute;
	display: block;
	width: 100%;
	left: 0;
	text-align: center;
	top: -10000px;
	z-index: 500;
	font-size: 16px;
}

#skiptoContent a.skip:hover, #skiptoContent a.skip:focus, #skiptoContent a.skip:active {
	position: absolute; 
	top: 0; 
	padding: 10px; 
	font-weight:bold; 
	color:#fff; 
	background:#000;
}

@media only screen and (min-width:480px) { 
#submenu ul.sm1 {margin-left:346px;width:155px;}
#submenu ul.sm2 {width:160px;}
#submenu ul.sm3 {width:150px;}
#submenu ul.sm4 {width:140px;}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
#submenu ul.sm1 {margin-left:325px;width:160px;}
#submenu ul.sm2 {width:160px;}
#submenu ul.sm3 {width:157px;}
#submenu ul.sm4 {width:140px;}
}

@media only screen and (min-width : 1224px) {
#submenu ul.sm1 {float:left;margin-left:356px;*margin-left:353px;width:160px;}
#submenu ul.sm2 {float:left;width:150px;}
#submenu ul.sm3 {float:left;width:146px;}
#submenu ul.sm4 {float:left;width:140px;}
}