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

	URL		    : http://www.cosmicbreak.kr/
	Copyright : CyberStep
	Ver       : 1.0
	Name      : common.css
	File      : ALL

 -----------------------------------------
	NOTE
 -----------------------------------------


 -----------------------------------------
	INDEX
 -----------------------------------------
	00. Global
	01. H style
	02. Font
	03. Anchor
	04. Image
	05. Table
	06. List
	07. Form
		07-01. Input
		07-02. Select
		07-03. Textarea
	08. Iframe
	09. Position Style
		09-01. Center
		09-02. Text Align
		09-03. Float
		09-04. Margin
		09-05. Padding
	10. Parallel
	11. Clear
		11-01. clearfix hack
		11-02. clearfix hr
	12. Dummiy
	13. Box
	14. LogIn Box
		14-01. facebook_btn
		14-02. twitter_btn
	15. Border
	16. Width

	99. Images_preloader
		
********************************************/

/* ==========================================
	00. Global
========================================== */
body {
	color: #595959;
	font-size: 12px;
	line-height: 1.5;
}
html, body {
	width: 100%;
	height: 100%;
/*	background: url(/images/bg_layout.jpg) 0 0 #424242 repeat-x;
*/
	font-family: Helvetica,Arial,Verdana,PmingLiU,MingLiU, Sans-serif;
}

/* ==========================================
	01. H style
========================================== */
h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
}


/* ==========================================
	02. Font
========================================== */
.notice {
	color: #CC0000;
}
.error,
.red {
	font-weight: bold !important;
	color: #CC0000;
}
.white { color: #FFF !important;}
.small {
	font-size: 83% !important;
	line-height: 1.1em !important;
}
.big {
	font-size: 117% !important;
}
.bold {
	font-weight: bold !important;
}

/* ==========================================
	03. Anchor
========================================== */
a:link { color: #497923; }
a:visited { color: #FBF9BC; }
a:hover, a:focus, a:active { color: #C9C791; }

a,
button {
	text-decoration: none;
	outline: none;
	cursor:pointer;
}
a:hover { text-decoration: underline; }

a.press:active,
button.press:active { position:relative; top:1px; left:1px;}

a.img_anchor {
	display: block;
	outline: none;
	text-indent: -9999px;
	cursor: pointer;
	overflow:hidden;
}
.underline,
.underline a { text-decoration: underline; }
.no_underline,
.no_underline a { text-decoration: none; }
.no_underline:hover,
.no_underline a:hover { text-decoration: none; }

/* ==========================================
	04. Image
========================================== */
img { vertical-align: middle; }

/* ==========================================
	05. Table
========================================== */
table {
	width: 80%;
	font-size: 100%;
	border: #55899A solid 2px;
	text-align:left;
}
	table th {
		background-color: #62AFCD;
		text-transform: uppercase;
		font-weight: bold;
		color:#fff;
		text-align:center;
	}
	table td {
		background-color: #fff;
	}
	table td,
	table th {
		padding: 5px;
		border: #55899A solid 2px;
	}

.table_simple {
	width: 100%;
	padding: 20px;
	background: #ECF5FF;
	font-size: 100%;
}
	.table_simple table {
		border: none;
	}
	.table_simple th, 
	.table_simple td {
		background: none;
	}
	.table_simple td,
	.table_simple th {
		border: none;
	}

/* ==========================================
	06. List
========================================== */
ul, li { list-style-type: none; }
li {
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
}

.ul_basic, .ul_basic li { list-style-type: disc; }
.ul_basic li {
	list-style-position: inside;
	list-style-type: disc;
}

.ol_basic, .ol_basic li { list-style-type: decimal; }
.ol_basic li {
	list-style-position: inside;
	list-style-type: decimal;
}

/* ==========================================
	07. Form
========================================== */
form { display: inline; font-size: 100%; /* 12px */ }

	/*  07-01. Input
	===================================*/
	input,
	select,
	textarea {
		vertical-align: middle;
	}

	.input_txt {
		height: 1.7em;
		width: 15em;
		margin: 3px auto;
		background-color: #d1ebff;
		background-repeat: no-repeat;
		border: 1px solid #62a1d1;
		line-height: 2em;
	}
	.input_s_txt {
		height: 1.7em;
		width: 10em;
		margin: 3px auto;
		background-color: #ffffff;
		background-repeat: no-repeat;
		border: 1px solid #9a9e85;
		line-height: 2em;
	}
	.input_l_txt {
		height: 2em;
		width: 18em;
		margin: 1px auto;
		padding: 0px 5px;
		background-color: #d1ebff;
		background-repeat: no-repeat;
		border: 1px solid #62a1d1;
		line-height: 2em;
	}
	.input_txt:hover,
	.input_s_txt:hover,
	.input_l_txt:hover,
	.input_txt:focus,
	.input_s_txt:focus,
	.input_l_txt:focus,
	.input_txt:active,
	.input_s_txt:active,
	.input_l_txt:active {
		background-color: #fff;
	}
	.input_sub {
	}
	.input_btn {
	}
	
	/*  07-02. Select
	===================================*/
	select {
	}
	
	/*  07-03. Textarea
	===================================*/
	textarea {
	}
 
/* ==========================================
	08. Iframe
========================================== */



/* ==========================================
	09. Position Style
========================================== */
	/*  09-01. Center
	===================================*/
	.center {
		margin: auto;
		text-align: center;
	}
	
	/*  09-02. Text Align
	===================================*/
	.ac { text-align: center; }
	.ar {	text-align: right; }
	.al {	text-align: left;}
	
	/*  09-03. Float
	===================================*/
	.fr {	float: right; display: inline; }
	.fl {	float: left; display: inline; }
	
	/*  09-04. Margin
	===================================*/
	.mt00 { margin-top:  0px !important; }
	.mt05 { margin-top:  5px !important; }
	.mt10 { margin-top: 10px !important; }
	.mt15 { margin-top: 15px !important; }
	.mt20 { margin-top: 20px !important; }
	.mt25 { margin-top: 25px !important; }
	.mt30 { margin-top: 30px !important; }
	.mt35 { margin-top: 35px !important; }
	.mt40 { margin-top: 40px !important; }
	.mt45 { margin-top: 45px !important; }
	.mt50 { margin-top: 50px !important; }
	
	.mr00 { margin-right:  0px !important; }
	.mr05 { margin-right:  5px !important; }
	.mr10 { margin-right: 10px !important; }
	.mr15 { margin-right: 15px !important; }
	.mr20 { margin-right: 20px !important; }
	.mr25 { margin-right: 25px !important; }
	.mr30 { margin-right: 30px !important; }
	.mr35 { margin-right: 35px !important; }
	.mr40 { margin-right: 40px !important; }
	.mr45 { margin-right: 45px !important; }
	.mr50 { margin-right: 50px !important; }
	
	.mb00 { margin-bottom:  0px !important; }
	.mb05 { margin-bottom:  5px !important; }
	.mb10 { margin-bottom: 10px !important; }
	.mb15 { margin-bottom: 15px !important; }
	.mb20 { margin-bottom: 20px !important; }
	.mb25 { margin-bottom: 25px !important; }
	.mb30 { margin-bottom: 30px !important; }
	.mb35 { margin-bottom: 35px !important; }
	.mb40 { margin-bottom: 40px !important; }
	.mb45 { margin-bottom: 45px !important; }
	.mb50 { margin-bottom: 50px !important; }
	
	.ml00 { margin-left:  0px !important; }
	.ml05 { margin-left:  5px !important; }
	.ml10 { margin-left: 10px !important; }
	.ml15 { margin-left: 15px !important; }
	.ml20 { margin-left: 20px !important; }
	.ml25 { margin-left: 25px !important; }
	.ml30 { margin-left: 30px !important; }
	.ml35 { margin-left: 35px !important; }
	.ml40 { margin-left: 40px !important; }
	.ml45 { margin-left: 45px !important; }
	.ml50 { margin-left: 50px !important; }

	.ma00 { margin:  0px !important; }
	.ma05 { margin:  5px !important; }
	.ma10 { margin: 10px !important; }
	.ma15 { margin: 15px !important; }
	.ma20 { margin: 20px !important; }
	.ma25 { margin: 25px !important; }
	.ma30 { margin: 30px !important; }
	.ma35 { margin: 35px !important; }
	.ma40 { margin: 40px !important; }
	.ma45 { margin: 45px !important; }
	.ma50 { margin: 50px !important; }

	/*  09-05. Padding
	===================================*/
	.pt00 { padding-top:  0px !important; }
	.pt05 { padding-top:  5px !important; }
	.pt10 { padding-top: 10px !important; }
	.pt15 { padding-top: 15px !important; }
	.pt20 { padding-top: 20px !important; }
	.pt25 { padding-top: 25px !important; }
	.pt30 { padding-top: 30px !important; }
	.pt35 { padding-top: 35px !important; }
	.pt40 { padding-top: 40px !important; }
	.pt45 { padding-top: 45px !important; }
	.pt50 { padding-top: 50px !important; }
	
	.pr00 { padding-right:  0px !important; }
	.pr05 { padding-right:  5px !important; }
	.pr10 { padding-right: 10px !important; }
	.pr15 { padding-right: 15px !important; }
	.pr20 { padding-right: 20px !important; }
	.pr25 { padding-right: 25px !important; }
	.pr30 { padding-right: 30px !important; }
	.pr35 { padding-right: 35px !important; }
	.pr40 { padding-right: 40px !important; }
	.pr45 { padding-right: 45px !important; }
	.pr50 { padding-right: 50px !important; }
	
	.pb00 { padding-bottom:  0px !important; }
	.pb05 { padding-bottom:  5px !important; }
	.pb10 { padding-bottom: 10px !important; }
	.pb15 { padding-bottom: 15px !important; }
	.pb20 { padding-bottom: 20px !important; }
	.pb25 { padding-bottom: 25px !important; }
	.pb30 { padding-bottom: 30px !important; }
	.pb35 { padding-bottom: 35px !important; }
	.pb40 { padding-bottom: 40px !important; }
	.pb45 { padding-bottom: 45px !important; }
	.pb50 { padding-bottom: 50px !important; }
	
	.pl00 { padding-left:  0px !important; }
	.pl05 { padding-left:  5px !important; }
	.pl10 { padding-left: 10px !important; }
	.pl15 { padding-left: 15px !important; }
	.pl20 { padding-left: 20px !important; }
	.pl25 { padding-left: 25px !important; }
	.pl30 { padding-left: 30px !important; }
	.pl35 { padding-left: 35px !important; }
	.pl40 { padding-left: 40px !important; }
	.pl45 { padding-left: 45px !important; }
	.pl50 { padding-left: 50px !important; }

	.pa00 { padding:  0px !important; }
	.pa05 { padding:  5px !important; }
	.pa10 { padding: 10px !important; }
	.pa15 { padding: 15px !important; }
	.pa20 { padding: 20px !important; }
	.pa25 { padding: 25px !important; }
	.pa30 { padding: 30px !important; }
	.pa35 { padding: 35px !important; }
	.pa40 { padding: 40px !important; }
	.pa45 { padding: 45px !important; }
	.pa50 { padding: 50px !important; }

/* ==========================================
	10. Parallel
========================================== */
div.center {
	margin: auto;
	text-align: center;
}
ol.horizon_center li,
ul.horizon_center li {
	display: -moz-inline-box;
	display: inline-block;
	margin: 0px;
	/display: inline;
	/zoom: 1;
	/* /margin-left: 3px; */
	vertical-align: middle;
}
	ol.horizon_center li *,
	ul.horizon_center li * {
		float: left;
		display: inline;
	}

/* ==========================================
	11. Clear
========================================== */
.clr { clear: both; }

br.clr {
	clear: both;
	padding: 0px;
	margin: 0px;
	font-size: 0px; /* 0px */
	line-height: 0px;
}

	/*  11-01. clearfix hack
	===================================*/
	.clearfix:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
		line-height: 0px;
		}
	* html .clearfix             { zoom: 1; }
	*:first-child+html .clearfix { zoom: 1; }
	
	/*  11-02. clearfix hr
	===================================*/
	div.hr { clear: both; }   
	div.hr hr { display: none; } 


/* ==========================================
	12. Dummiy
========================================== */
.hide { display: none; }

/* ==========================================
	13. Box
========================================== */
.field {}
.area {}
.section {}
.group { position: relative; }
	.unit { padding: 10px 0 30px 0;}
		.part {}
			.point {}
			.tip { float: right; display: inline; }
			
	

/* ==========================================
	14. LogIn Box
========================================== */
#login_box{
	width:290px;
	margin:0 auto;
}
		
	/*  14-01. facebook_btn
	===================================*/
	#login_box #l_facebook_btn{
		background: url(/images/icon_facebook.png) no-repeat #a9c4ff;
		padding-left:37px;
		margin-right:10px;
		font-weight:700;
		color:#FFFFFF;
		margin-top: 5px;
		padding-right: 3px;
		width:130px;
		height:38px;
	} 
		#login_box #l_facebook_btn:hover{
			background: url(/images/icon_facebook_on.png) no-repeat #B9D3FF;
			color:#1b4ab6;
			border:2px solid #0F4094;
		}
	
		*+html #login_box #l_facebook_btn{
			height: 40px;
		}/*IE7*/

	/*  14-02. twitter_btn
	===================================*/
	#login_box #l_twitter_btn{
		background: url(/images/icon_twitter.png) no-repeat #97e3fc;
		height: 38px;
		padding-left: 38px;
		padding-right: 3px;
		font-weight:700;
		color:#FFFFFF;
		width:130px;
	}
		#login_box #l_twitter_btn:hover{
			background:url(/images/icon_twitter_on.png) no-repeat #B5EDFF;
			color: #009999;
			border:2px solid #23A7D3;
		}
	
		* html #login_box #l_twitter_btn{
			width: 110px;
			height: 40px;
			margin-left: 5px;
		}/*IE6*/
		
		*+html #login_box #l_twitter_btn{
			width: 110px;
			height: 40px;
			margin-left: 5px;
		}/*IE7*/

/* ==========================================
	15. border
========================================== */
.border { border:1px solid }

/* ==========================================
	16. width
========================================== */
.w_15 { width:15%}
.w_20 { width:20%}
.w_25 { width:25%}
.w_30 { width:30%}
.w_35 { width:35%}
.w_40 { width:40%}
.w_45 { width:45%}
.w_50 { width:50%}
.w_55 { width:55%}
.w_60 { width:60%}
.w_65 { width:65%}
.w_70 { width:70%}
.w_75 { width:75%}
.w_80 { width:80%}
.w_85 { width:85%}
.w_90 { width:90%}
.w_95 { width:95%}
.w_100 { width:100%}

/* ==========================================
	99. Images_preloader
========================================== */

#preloaded_images {
	width: 0px;
	height: 0px;
	display: inline;
		_background-image: url("/images/btn_start.png"); /*IE6*/
}