/*@import url(http://211.234.100.234/font/nanumgothic.css);*/
@import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css');


body {
	margin: 0;
	padding: 0;
	color: #999;
	font-family: 'Nanum Gothic', dotum, gulim, sans-serif;
	font-size: 12px;
	background: transparent;
}

ul,li 	{ list-style-type: none; text-decoration: none; outline: none; margin:0; padding:0; }

a, a:link, a:visited { font-weight: normal; text-decoration: none; selector-dummy: expression(this.hideFocus=true); background: transparent;  }
a:hover, a:select  { text-decoration: none; background: transparent; }

b { font-weight: bold; }

p { margin: 0 ; padding: 0;}

img { border: none; margin: 0; padding: 0; display: inline; }


.cleaner { clear: both }
.space5 { clear: both; padding-top:5px; }
.space15 { clear: both; padding-top:15px; }
.space25 { clear: both; padding-top:25px; }
.space35 { clear: both; padding-top:35px; }
.space45 { clear: both; padding-top:45px; }
.space55 { clear: both; padding-top:55px; }
.space65 { clear: both; padding-top:65px; }
.space75 { clear: both; padding-top:75px; }
.space85 { clear: both; padding-top:85px; }
.space95 { clear: both; padding-top:95px; }
.space10 { clear: both; padding-top:10px; }
.space20 { clear: both; padding-top:20px; }
.space30 { clear: both; padding-top:30px; }
.space40 { clear: both; padding-top:40px; }
.space50 { clear: both; padding-top:50px; }
.space60 { clear: both; padding-top:60px; }
.space70 { clear: both; padding-top:70px; }
.space80 { clear: both; padding-top:80px; }
.space90 { clear: both; padding-top:90px; }
.space100 { clear: both; padding-top:100px; }



/*=================================*/
/*========== Main Styles ==========*/
/*=================================*/


#wrapper {
	width: 100%;
	height: auto;
	background: transparent;
}

#calendar {
	width: 700px;
	height: 700px;
	position: relative;
	margin: 0 auto;
	display: block;
	padding-left:20px;
}

#calendar > .top_area {
	width: 700px;
	height: 50px;
	background: url('../img/black_twill.png') repeat;
	color: #ffffff;
	position: relative;
}

#calendar > .top_area ul li {
	height: 50px;
	position: relative;
	display: block;
	float: left;
	text-align: center;
	line-height: 50px;
}

#calendar > .top_area ul li.btn {
	width: 30px;
	height: 50px;
	position: relative;
	display: block;
	font-size: 30px;
	font-weight: bold;
	color: #eeeeee;	
}

#calendar > .top_area ul li.btn a {
	width: 30px;
	height: 50px;
	position: relative;
	display: block;
	font-size: 30px;
	font-weight: bold;
	color: #eeeeee;	
}

#calendar > .top_area ul li.btn a:hover {
	color: #f7941d;
}

#calendar > .top_area ul li.top_title {
	width: 640px;
	height: 50px;
	position: relative;
	display: block;
	font-size: 25px;
	font-weight: bold;
	color: #ffffff;
}

#calendar > .top_area ul li.top_title > .tt_year {
	width: 310px;
	float: left;
	display: block;
	text-align: right;
	padding-right: 10px;
}

#calendar > .top_area ul li.top_title > .tt_year select {
	width: 100px;
	height: 25px;
	display: inline;
	vertical-align: middle;
	margin-top: 12px;
	font-size: 16px;
	font-weight: bold;
	background: transparent;
	color: yellow;
}

#calendar > .top_area ul li.top_title > .tt_year option {
	color: #000000;
}

#calendar > .top_area ul li.top_title > .tt_month {
	width: 310px;
	float: left;
	display: block;
	text-align: left;
	padding-left: 10px;
}


#calendar > .top_area ul li.top_title input.hidden{ font-size: 25px; height: 50px; }

#calendar > .top_area ul li.top_title span {
	font-size: 33px;
	color: #ffffbc;
}

#calendar > .main_area {
	width: 700px;
	height: auto;
	background: transparent;
	position: relative;
	margin-top: 5px;
}

#calendar > .main_area > .main_head {
	width: 700px;
	height: 25px;
	background: url('../img/otis_redding.png') repeat;
	position: relative;
}

#calendar > .main_area > .main_head ul li {
	width: 100px;
	height: 25px;
	position: relative;
	float: left;
	color: #ffffff;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	line-height: 25px;
}

#calendar > .main_area > .main_contents {
	width: 700px;
	height: auto;
	background: transparent;
	position: relative;
}

#calendar > .main_area > .main_contents ul {
	width: 700px;
	height: 98px;
	background: transparent;
	position: relative;
	margin-top: 0px;
}

#calendar > .main_area > .main_contents ul li {
	width: 98px;
	height: 98px;
	position: relative;
	float: left;	
	background: url('../img/gray_jean.png') repeat;	
	text-align: center;
	font-weight: bold;
	line-height: 25px;
	margin-right: 2px;
	margin-top: 2px;
}

#calendar > .main_area > .main_contents ul li.default {
	background: url('../img/gray_jean.png') repeat;
}

#calendar > .main_area > .main_contents ul li.satday {
	background: url('../img/woven.png') repeat;
	width: 100px;
	margin-right: 0px;
}

#calendar > .main_area > .main_contents ul li.satday h1 {
	color: #ffffff;
}

#calendar > .main_area > .main_contents ul li.sunday {
	background: url('../img/blu_stripes.png') repeat;	
}

#calendar > .main_area > .main_contents ul li.sunday h1 {
	color: #777777;
}

#calendar > .main_area > .main_contents ul li.simai {
	width: 120px;
	margin-right: 0px;
}

#calendar > .main_area > .main_contents ul li h1 {
	width: 108px;
	height: 16px;
	line-height: 16px;
	text-align: left;
	font-size: 15px;
	padding-left: 10px;
	color: #333333;
}

#calendar > .main_area > .main_contents ul li h1 p.today {
	display: inline;
	background: #000000;
	color: #ffffff;
	padding: 2px 10px;
	border-radius: 8px;
	font-weight: bold;
	font-size: 16px;
}

#calendar > .main_area > .main_contents ul li p {
	width: 108px;
	height: 98px;
	text-align: left;
	font-size: 12px;
	padding-left: 15px;
	font-weight: normal
	color: #555555;
}


/*=================================*/
/*========== Small Styles ==========*/
/*=================================*/


#sm_wrapper {
	width: 100%;
	height: auto;
	background: transparent;
}

#sm_calendar {
	position: relative;
	margin: 0 auto;
	display: block;
}

#sm_calendar > .top_area {
	width: 100%;
	height: 20px;
	background: url('../img/black_twill.png') repeat;
	color: #ffffff;
	position: relative;
}

#sm_calendar > .top_area ul li {
	height: 20px;
	position: relative;
	display: inline;
	float: left;
	text-align: center;
	line-height: 20px;
}

#sm_calendar > .top_area ul li.btn {
	width: 10%;
	height: 20px;
	position: relative;
	display: block;
	font-size: 30px;
	font-weight: bold;
	color: #eeeeee;	
}

#sm_calendar > .top_area ul li.btn a {
	height: 20px;
	position: relative;
	display: block;
	font-size: 12px;
	font-weight: bold;
	color: #eeeeee;	
}

#sm_calendar > .top_area ul li.btn a:hover {
	color: #f7941d;
}

#sm_calendar > .top_area ul li.btn_r {
	width: 10%;
	float: right;
}

#sm_calendar > .top_area ul li.btn_r a {
	height: 20px;
	position: relative;
	display: block;
	font-size: 12px;
	font-weight: bold;
	color: #eeeeee;	
}

#sm_calendar > .top_area ul li.btn_r a:hover {
	color: #f7941d;
}



#sm_calendar > .top_area ul li.top_title {
	width: 80%;
	height: 20px;
	position: absolute;
	display: block;
	font-size: 10px;
	font-weight: bold;
	color: #ffffff;
	left: 20%;       /*년도와 달을 옮길떄는 여기를 수정해 주세요.*/	
}

#sm_calendar > .top_area ul li.top_title > .tt_year {
	width: 80px;
	float: left;
	display: block;
	text-align: right;
	padding-right: 5px;
}

#sm_calendar > .top_area ul li.top_title > .tt_year select {
	width: 60px;
	height: 18px;
	display: inline;
	vertical-align: middle;
	margin-top: 1px;
	font-size: 12px;
	font-weight: bold;
	background: transparent;
	color: yellow;
}

#sm_calendar > .top_area ul li.top_title > .tt_year option {
	color: #000000;
}

#sm_calendar > .top_area ul li.top_title > .tt_month {
	width: 50px;
	float: left;
	display: block;
	text-align: left;
	padding-left: 5px;
	font-size: 13px;
}


#sm_calendar > .main_area {
	width: 100%;
	height: auto;
	background: transparent;
	position: relative;
	margin-top: 1px;
}

#sm_calendar > .main_area > .main_head {
	width: 100%;
	height: 15px;
	background: url('../img/otis_redding.png') repeat;
	position: relative;
}

#sm_calendar > .main_area > .main_head ul li {
	width: 14%;
	height: 15px;
	position: relative;
	float: left;
	color: #ffffff;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	line-height: 15px;
}

#sm_calendar > .main_area > .main_contents {
	width: 101%;
	height: auto;
	background: transparent;
	position: relative;
}

#sm_calendar > .main_area > .main_contents ul {
	width: 100%;
	height: auto;
	background: transparent;
	position: relative;
}

#sm_calendar > .main_area > .main_contents ul li {
	width: 13.7%;
	height: 8%;
	position: relative;
	float: left;	
	background: url('../img/gray_jean.png') repeat;
	text-align: center;
	font-weight: bold;
	margin-right: 1.6px;
	margin-top: 1px;
	padding-bottom: 10px;
}

#sm_calendar > .main_area > .main_contents ul li.default {
	background: url('../img/gray_jean.png') repeat;
}

#sm_calendar > .main_area > .main_contents ul li.satday {
	background: url('../img/woven.png') repeat;	
}

#sm_calendar > .main_area > .main_contents ul li.satday h1 {
	color: #ffffff;
}

#sm_calendar > .main_area > .main_contents ul li.sunday {
	background: url('../img/blu_stripes.png') repeat;	
}

#sm_calendar > .main_area > .main_contents ul li.sunday h1 {
	color: #777777;
}

#sm_calendar > .main_area > .main_contents ul li.simai {
	width: 120px;
	margin-right: 0px;
}

#sm_calendar > .main_area > .main_contents ul li h1 {
	font-size: 12px;
	color: #333333;
	text-align: center;
}


#sm_calendar > .main_area > .main_contents ul li h1 a {	
	color: #ffffff;
	background: #1569bf;
	border-radius: 5px;
	padding: 2px 4px;
	font-weight: bold;
}



#sm_calendar > .main_area > .main_contents ul li h1 span {
	color: #f7941d;
}

#sm_calendar > .main_area > .main_contents ul li p {
	text-align: left;
	font-size: 12px;
	font-weight: normal
	color: #555555;
}

#sm_calendar01 {
	width: 210px;
	height: auto;
	margin: 0 auto;
	background: transparent;
}

#sm_calendar01 > .top_area {
	width: 210px;
	height: 22px;
	position: relative;
	display: block;
}

#sm_calendar01 > .top_area > .arrows {
	width: 40px;
	height: 22px;
	position: relative;
	float: left;
}

#sm_calendar01 > .top_area > .arrows ul li {
	width: 20px;
	height: 22px;
	float: left;
}

#sm_calendar01 > .top_area > .arrows ul li a {
	height: 22px;
	font-size: 12px;
	color: #9d7082;
	line-height: 22px;
}

#sm_calendar01 > .top_area > .arrows ul li a span {
	font-size: 12px;
	color: #77485b;
}

#sm_calendar01 > .top_area > .arrows ul li a:hover {
	font-weight: 700;
	color: #00bff3;
}

#sm_calendar01 > .top_area > .arrows ul li a:hover span {
	font-weight: 700;
	color: #00bff3;
}

#sm_calendar01 > .top_area > .ta_mid {
	width: 130px;
	height: 22px;
	position: relative;
	float: left;
	text-align: center;
}

#sm_calendar01 > .top_area > .ta_mid a {
	font-size: 13px;
	color: #000000;
	font-weight: bold;
	line-height: 22px;
	font-family: 'Nanum Gothic', sans-serif;
}

#sm_calendar01 > .top_area > .ta_mid a span {
	font-size: 13px;
	color: #2e3192;
	font-weight: bold;
}

#sm_calendar01 > .mid_area {
	width: 210px;
	height: 22px;
	position: relative;
	display: block;
	background: #eeeeee;
}

#sm_calendar01 > .mid_area ul li {
	width: 30px;
	height: 22px;
	float: left;
	display: inline;
	text-align: center;
}

#sm_calendar01 > .mid_area ul li a {
	font-size: 12px;
	color: #333333;
	line-height: 22px;
	font-family: 'Nanum Gothic', sans-serif;
}

#sm_calendar01 > .mid_area ul li a span {
	color: #ff0000;
}

#sm_calendar01 > .main_area {
	width: 210px;
	height: auto;
	position: relative;
	display: block;
}

#sm_calendar01 > .main_area ul li {
	width: 30px;
	height: 20px;
	float: left;
	display: inline;
	text-align: center;
	font-size: 12px;
	color: #666666;
	line-height: 20px;
	font-family: 'Nanum Gothic', sans-serif;
}

#sm_calendar01 > .main_area ul li span {
	color: #ff0000;
}

#sm_calendar01 > .main_area ul li span.today {
	color: #0665ba;
	font-weight: 700;
}