@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Roboto);
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@font-face { font-family: 'Daum'; src: url('../font/daum_regular2.eot'); src: local('☺'), url('../font/daum_regular2.woff') format('woff'), url('../font/daum_regular2.ttf')  format('truetype') } 

body, td, th, form, input, select, textarea, input, div, p, span {
					margin: 0; padding: 0; font-size: 1em; font-family: dotum; font-weight: 500; color: #333; line-height: 150%; letter-spacing: -0.01em; }
body{ 
		position:relative; background: #fff; width: 100%; height: 100%; margin: 0; padding: 0 ;	overflow-x:hidden
 }
a:link			{ color: #000; text-decoration: none; }
a:visited		{ color: #000; text-decoration: none; }
a:active		{ color: #000; text-decoration: none; }
a:hover		{ color: #999; text-decoration: none; }
img			{ border: none; }
table			{ border-collapse: collapse; }
ul li			{ list-style: disc;}

/*=============HEADING=================*/
h1.logo		{ float: left; margin: 22px 0 0 0; padding: 0; background: url('../img/common/logo.png') no-repeat; }
h1.logo a		{ width: 186px; height: 57px; display: block;  text-indent: -99999px; }
h1.logo_foot		{ float: left; width: 176px; height: 45px; margin: 11px 220px 0 0; background: url('../img/common/logo_foot.png') no-repeat; }
h2		{ margin: 32px 0 0 0; padding: 0; text-align: center; font: bold 1.3em 'Daum'; color: #fff; letter-spacing: -1px; }
h3		{ width: 100%; height: 50px; margin: 0 0 60px 0; padding: 0; text-align: left; font: bold 2.5em 'Daum'; color: #dd005b; line-height: 62px; border-bottom: 2px solid #dd005b; }
h4		{ clear: both; display: inline-block; width:100%; margin: 0 0 8px 0; padding: 7px 0 0 16px; text-align: left; font: bold 1em 'Daum'; color: #1b4ebc; background: url('../img/prod/h4_bg.png') left top no-repeat; }
h5		{ margin: 0 0 6px 0; padding: 0; text-align: left; font: bold 1.2em 'roboto'; }
h5.sub_tit		{ float: left; width: 64px; margin: 30px 0 0 0; padding: 0; text-align: left;  padding: 6px 10px; font: bold 0.95em 'nanumgothic'; background: #666; color: #fff; }

/*=============COMMON================*/
#wrap		{ min-width: 990px; text-align: center; margin: 0; padding: 0; background: url('../img/common/menu_bg.png') top repeat-x; }
#m_wrap	{ min-width: 990px; text-align: center; margin: 0; padding: 0; background: url('../img/common/menu_mbg.gif') top repeat-x; }
#head		{ width: 990px; height: 123px; margin: 0 auto; padding: 0; }
#gnb		{ text-align: right; margin: 36px 0 0 0; padding: 0;  }
#gnb li		{ display: inline; margin: 0 0 0 20px; padding: 0; }
#gnb li a		{  margin: 0; padding: 23px 25px 0 0; font: 600 1em 'nanumgothic'; color: #666; letter-spacing: -0.01em; }
#gnb li a:hover, #gnb li a.hover		{ color: #000; background: url('../img/common/menu.png') right top no-repeat; }
.util		{ display: block; margin: 0; padding: 0; height: 20px; text-align: right; font: 0.7em 'roboto'; }
.util a		{ color: #666; margin: 0 0 0 12px; padding: 0; font-weight: 600; font-size: 1em; color: #fff; background: url('../img/common/util.gif') left center no-repeat; }
.bbs_wrap		{ display: inline-block; width: 775px; margin:0 0 200px 0; }
#sub_vis		{ width: 100%; height: 189px; background: url('../img/common/vis_text.png') center center no-repeat;  }

/*=============MAIN================*/
#vis		{ width: 990px; margin: 0 auto; }

	.thumb {
		display:block;
		width:165px;
		height:304px;
		position:relative;
		margin: 0;
		padding: 0;
		float:left;
	}
	
		.thumb-wrapper {
			display:block;
			width:100%;
			height:100%;
		margin: 0;
		padding: 0;
		}
	
		.thumb img {
			width:100%;
			height:100%;
			position:absolute;
			top: 0; left: 0;
			display:block;								
		margin: 0;
		padding: 0;
		}
		
		.thumb .thumb-detail {
			display:block;
			width:100%;
			height:100%;
			position:absolute;	left: 0;		
			background:#fff;
			font-family:arial;
			font-weight:bold;
			font-size:16px;		
		margin: 0;
		padding: 0;
		}
		
		.thumb .thumb-detail a {
			display:block;
			background: #666;
			width:100%;
			height:100%;
			text-transform:uppercase;
			font-weight:bold;	
		opacity: 0.8;
			position:absolute;	left: 0;	top: 230px;	
			color:#fff;z-index: 2000;
			text-decoration:none;		
			font-family: 'daum';
			letter-spacing:-1px;
			font-size: 1em;
		margin: 0;
		padding: 20px 0 0 0;
		}		
	
	/*
	* Without CSS3
	*/
	.thumb.scroll {
		overflow: hidden;
	}	
	
		.thumb.scroll .thumb-detail {
			bottom:-304px;
		}
	
	
	/*
	* CSS3 Flip
	*/	
	.thumb.flip {
		-webkit-perspective:800px;		
		   -moz-perspective:800px;
		    -ms-perspective:800px;		   		
		     -o-perspective:800px;
  		        perspective:800px;
	}
	
		.thumb.flip .thumb-wrapper {
			-webkit-transition: -webkit-transform 1s;
			   -moz-transition: -moz-transform 1s;
			    -ms-transition: -moz-transform 1s;
			     -o-transition: -moz-transform 1s;
			        transition: -moz-transform 1s;
			-webkit-transform-style: preserve-3d;
			   -moz-transform-style: preserve-3d;			
			    -ms-transform-style: preserve-3d;			
			     -o-transform-style: preserve-3d;			
					  transform-style: preserve-3d;			
		}
		
		.thumb.flip .thumb-detail {
			-webkit-transform: rotateY(-180deg);
			   -moz-transform: rotateY(-180deg);
			    -ms-transform: rotateY(-180deg);
			     -o-transform: rotateY(-180deg);
			        transform: rotateY(-180deg);			   			
		}
		
		.thumb.flip img,
		.thumb.flip .thumb-detail {
			-webkit-backface-visibility: hidden;
			   -moz-backface-visibility: hidden;
			    -ms-backface-visibility: hidden;
			     -o-backface-visibility: hidden;
			        backface-visibility: hidden;
		}
		
		.thumb.flip .flipIt {
			-webkit-transform: rotateY(-180deg);
			   -moz-transform: rotateY(-180deg);			
			    -ms-transform: rotateY(-180deg);			
			     -o-transform: rotateY(-180deg);			
			        transform: rotateY(-180deg);			
		}
	

#container		{ display: inline-block; width: 1064px; margin: 0 auto 50px auto; padding: 50px 0 0 0; background: url('../img/common/cont_bg.png') left top no-repeat;}	

/*=============SIDE================*/
.side_tit		{ margin: 0 0 30px 0; padding: 0; font: bold 1em 'Daum'; color: #d3b2bf; }
#side		{ float: left; display: inline-block; width: 148px; margin: 0 26px 0 40px; padding: 0; background: url('../img/common/side_bg.gif') no-repeat; }
#side ul		{ display: inline-block; width: 148px; margin: 0; padding: 0; border-bottom: 1px solid #611937;  }
#side ul	 li		{ display: block; width: 100%; margin: 0; padding: 0; list-style: none; text-align: left; line-height: 20px; border-bottom: 1px solid #555; }
#side ul	 li a		{ display: block; width: 142px; margin: 0; padding: 8px 0 6px 0; font: normal 0.8em 'daum'; color: #555; }
#side ul	 li a:hover, #side ul li a.hover	{ display: block; font: bold 0.8em 'daum'; color: #dd005b; background: url('../img/common/side_li.png') 8px right no-repeat; }

/*=============CONTENTS================*/
#contents		{ display: inline-block; width: 775px; margin: 0 0 70px 0; padding: 0; }
.prod_box		{ clear: both; height: 100%; width: 775px; display: inline-block; margin: 0 0 50px 0; padding: 0; }
.prod_box dl		{ float: left; width: 240px; margin: 0 9px; padding: 0; }
.prod_box dl dd		{ width: 240px; margin: 0 10px 0 0; font-size: 0.8em; font-family: 'nanumgothic';  border: 1px solid #333; border-bottom: 3px solid #2f63d5; }
.prod_box dl 	.prod_cont		{ width: 240px; margin: 0 10px 0 0; border: none;  text-align: center; font-size: 0.8em; font-family: 'nanumgothic';  color: #444; font-weight: 700; line-height: 120%; }
.prod_box dl dd	 img		{ padding: 20px; }
.prod13 img		{ height: 120px; }
.prod_pic		{ clear: both; display: block; border: 1px solid #555; margin: 0 0 15px 0; padding: 20px 0; }
.prod_pic2		{ float: left; width: 280px; border: 1px solid #555; margin: 0 0 15px 0; padding: 20px 0; }
.prod_pic3		{ float: left; width: 200px; border: none; margin: 0 0 15px 0; padding: 0; }
.dis1 		{ float: left; width: 450px; margin: 0 25px 0 0; font-size: 0.8em; font-family: 'nanumgothic'; text-align: justify; color: #333; line-height: 20px; }
.dis1 	span, .dis3 span		{ font: bold 1em 'nanumgothic'; border-bottom: 1px solid #333; }
.dis2 		{ float: left; width: 300px; font-size: 1em; text-align: left; line-height: 20px; font-size: 0.8em; }
.dis3		{ float: left; margin: 0; font-size: 0.8em; font-family: 'nanumgothic'; text-align: justify; color: #333; line-height: 20px; }
.list		{ margin: 0; padding: 13px 8px; background: #eff3fc; border: 1px solid #cecece; line-height: 20px;  }
.list li			{ margin: 0; padding: 0 0 0 10px; font: normal 0.95em 'nanumgothic'; list-style: none;line-height: 20px;  background: url('../img/prod/bull.gif') left 7px no-repeat; }
.list2		{ display: block; width: 465px; margin: 10px 0 0 0 ; padding: 0; line-height: 20px; }
.list2 li			{ margin:  0; padding: 0 0 0 10px; font: normal 0.75em 'nanumgothic'; line-height: 20px; text-align: left; list-style: none; letter-spacing: 0.01em; background: url('../img/prod/bull.gif') left 7px no-repeat;  }
.nissei		{ display: block; height: 100%; margin: 0 0 50px 0; }
.nissei li		{ float: left; margin: 0 10px; padding: 8px; border: 1px solid #333; }
.tit			{ text-transform: uppercase; width: 100%; text-align: left;  margin: 0; padding: 0; color: #1b4ebc; font: bold 0.9em 'daum'; border-bottom: 1px solid #333; }
.prod_box dl dt		{ text-transform: uppercase; text-align: left;  margin: 0; padding: 0 0 0 15px; color: #1b4ebc; font: bold 0.9em 'daum'; background: url('../img/prod/h4_bg.png') left top no-repeat; border-bottom: 1px solid #333; }
.sub_tit2		{  clear: both; margin: 0 0 10px 0; padding: 0; text-align: left; font: bold 0.95em 'nanumgothic'; color: #555; }
.list_wrap	{ float: left; width: 450px; text-align: left; margin: 0 0 0 30px; padding: 0; }
.clear		{ clear: both; width: 100%; margin:13px; }
.comp1		{  display: block; padding: 0 0 550px 0; color: #000; font-size: 0.95em; font-family: 'nanumgothic'; white-space: normal; text-align: center; line-height: 150%; background: url('../img/comp/comp1.gif') bottom no-repeat; }
.point1		{ color: #1b4ebc; font-size: 1.2em; font-weight: 800; font-family: 'nanumgothic'; }
.point2		{ color: #f37200; font-size: 1.1em; font-weight: 600; font-family: 'daum'; }
.map		{ margin: 20px 0; padding: 0; }
.map	li	{ margin: 0 0 10px 0; padding: 0; text-align: left; font-weight: 700; color: #444; font-size: 0.9em; font-family: 'nanumgothic'; list-style: none; } 
.map	li span		{ display: inline-block; width: 80px; text-align: center; margin: 0 10px 0 14px; padding: 5px; font-weight: 700; color: #fff; background: #672f92; font-family: 'nanumgothic'; }

/*=============FOOT================*/
.top		{ float: right; width: 775px; height: 25px; border-top: 1px solid #aaa; background: url('../img/common/top.png') center bottom no-repeat;}
.top a		{  float: right; margin: 0 340px 0 0; width: 92px; height: 25px; line-height: 0; text-indent: -99999em; }
#foot		{ clear: both; width: 100%; margin: 0; padding: 20px 0 10px 0 ; border: 1px solid #af919e; background: #fff; }
#foot_cont			{ width: 990px; margin: 0 auto; text-align: left; }
.addr		{ display: inline-block; height: 50px; margin: 0 0 20px 0; padding: 0; font-size: 0.7em; color: #555; }
.addr span		{ margin: 0 30px 0 0; color: #555; }
.copy		{ text-align: center; font-size: 0.75em; font-family: 'roboto'; color: #555; letter-spacing: 0; }