body{
	text-align:center;
	margin:0;
	padding:0;
}

p,pre,li,dt,dd,th,td,label,textarea,h1,h2,h3,h4,h5,h6{
	font:15px Arial, Helvetica, sans-serif;
	letter-spacing:1px;
	color:#333333;
	text-align:left;
	word-break:break-all;
}

input[type="text"]{
	font:15px Arial, Helvetica, sans-serif;
	letter-spacing:1px;
	color:#333333;
	text-align:left;
}

p,pre,li,dt,dd,th,td,label,h4,h5,h6{ line-height:28px; }

h1,h2,h3,h4,h5,h6,th,dt{ font-weight:bold; }

h4,h5{ font-size:12px; }

p,pre,h5,h6,table,dl,dt,dd{ margin:15px auto; }

iframe{ margin:15px auto; }

form{ margin:0; }

a,label{
	color:#4f5f83;
	cursor:pointer;
	text-decoration:none;
}

a:hover,label:hover{
	color:#86aee9;
}

img{ border:none; }

table{
	width:100%;
	border-collapse:separate;
	border-spacing:2px;
}

td{
	padding:6px;
	background:none;
	border:solid 1px #f0f0f0;
}

th{
	text-align:center;
	background-color:#f3f3f3;
}

th span{
	color:red;
	font-weight:normal;
	margin-left:2px;
}

table ul{ margin:0 0 0 15px; }

ul{ margin:15px 0 15px 25px; padding:0; }

ol{ margin:15px 0 15px 30px; padding:0; }

textarea{ width:95%; }


.clear{ clear:both; }
.inline{ display:inline; }
.bold{ font-weight:bold; }
.red{ color:#cc0000; }
.green{ color:#007800; }
.blue{ color:#0000bb }
.gray{ color:#666666; }
#errmsg li{ color:#e00000; }
.big{
	font-size:50px;
	line-height:60px;
}

.checkbox div{
	height:20px;
	width:150px;
	float:left;
}


#head,#headmenu div,#topicpath,#body,#pagetop{
	margin:0 auto;
	width:1050px;
}


#head{
	height:90px;
}

#head h1,#head p{
	margin:5px 0;
}

h1{
	font-size:12px;
	font-weight:normal;
}

#head .logo{
	float:left;
}

#head .tel{
	float:right;
}


#headmenu{
	clear:both;
	height:75px;
	background:url(/img/common/headmenu/bg.png) repeat-x center center;
}

#headmenu div{
	height:75px;
	background:url(/img/common/headmenu/div.png) no-repeat center right;
}

#headmenu ul{
	margin:0;
	padding:0;
	list-style:none;
}

#headmenu li{
	float:left;
	height:75px;
	width:175px;
	margin:0;
	padding:0;
}

#headmenu a{
	text-align:center;
	height:73px;
	width:175px;
	line-height:63px;
	font-size:16px;
	font-weight:bold;
	color:#333333;
	display:block;
}

#headmenu li:hover{
	background-image:url(/img/common/headmenu/hover.png);
}

#headmenu a.index{ background-image:url(/img/common/headmenu/index.png); }
#headmenu a.instractor{ background-image:url(/img/common/headmenu/instractor.png); }
#headmenu a.lesson{ background-image:url(/img/common/headmenu/lesson.png); }
#headmenu a.about{ background-image:url(/img/common/headmenu/about.png); }
#headmenu a.contact{ background-image:url(/img/common/headmenu/contact.png); }
#headmenu a.bout{ background-image:url(/img/common/headmenu/bout.png); }

#headmenu a.instractor{
	letter-spacing:-0.5px;
}


#topimg{
	background:url(/img/common/topimg/bg.png) repeat center center;
	height:170px;
}

#topimg img{
	position:relative;
	top:8px;
}

#topicpath{
	margin-top:20px;
}


#body{
	padding:20px 0;
}


#left{
	float:left;
	width:240px;
}

#left dl{
	margin:0 0 30px 0;
}

#left dt{
	background:url(/img/common/left/dt.png) no-repeat center center;
	margin:20px 0 0;
	width:240px;
	height:40px;
	line-height:40px;
	color:white;
	font-size:18px;
	font-weight:normal;
	text-indent:40px;
	border:none;
}

#left dd{
	margin:0;
	padding:8px;
	background-color:#eeeeee;
}

#right{
	width:780px;
	float:right;
}

h2,h3{
	text-indent:44px;
	height:44px;
	line-height:40px;
	font-weight:normal;
	color:#005bac;
	background:url(/img/common/h2h3.png) no-repeat left center;
}

h2{
	margin:0 auto 10px;
	font-size:26px;
}

h3{
	margin:60px auto 20px;
	font-size:20px;
}

h4{
	margin:20px auto 10px auto;
	font-size:14px;
}


#fee th, #fee td{
	width:30%;
	text-align:center;
	padding:10px;
}

dl.lesson{
	background-color:#005bac;
	background-position:left 17px;
	background-repeat:no-repeat;
	padding:5px 5px 5px 80px;
	margin-bottom:40px;
}

dl.lesson dt, dl.lesson dd{
	color:white;
	margin:1px 0;
}

dl.lesson dt{
	font-size:20px;
	font-weight:bold;
}

dl.flow01{ background-image:url(/img/contents/lesson/01.png); }
dl.flow02{ background-image:url(/img/contents/lesson/02.png); }
dl.flow03{ background-image:url(/img/contents/lesson/03.png); }
dl.flow04{ background-image:url(/img/contents/lesson/04.png); }


#foot{
	clear:both;
	height:90px;
}

#pagetop{
	margin:0 auto;
	text-align:right;
	height:30px;
}

#copyright{
	text-align:center;
	margin:0 auto;
	height:60px;
	line-height:60px;
	color:white;
	background-color:#005bac;
}

#copyright a{
	color:white;
}

@media (min-width:641px){
	.smp{
		display:none;
	}
}

@media (max-width:640px){
	*{
		float:none !important;
	}
	img, iframe{
		max-width:300px;
	}
	#head,#headmenu div,#body,#pagetop{
		width:95%;
		height:auto;
	}
	h1{
		font-size:12px;
	}
	h1, #head .logo, #head .tel{
		float:none;
		text-align:center;
		margin:20px auto;
	}
	#headmenu,#headmenu div, #headmenu li, #headmenu a{
		float:none;
		background:none !important;
		height:auto;
		line-height:auto;
	}
	#headmenu ul{
		width:auto;
		margin:10px 0;
	}
	#headmenu li,#headmenu a{
		height:35px;
		line-height:35px;
		margin:12px auto;
		width:98%;
	}
	#headmenu a{
		display:block;
		font-weight:normal;
		font-size:15px;
		color:#4f5f83;
		text-align:left;
		border:dotted 2px #cccccc;
		text-indent:8px;
	}
	#headmenu a:hover{
		color:#86aee9;
	}
	#headmenu li:hover{
		background:none;
	}
	#topimg, #topicpath{
		display:none;
	}
	#body{
		padding:0;
		text-align:center;
	}
	#right{
		border-bottom:dashed 5px #005bac;
	}
	h2{
		font-size:18px;
		font-weight:bold;
		white-space:nowrap;
		overflow:hidden;
	}
	h3{
		font-size:15px;
		margin:20px auto 10px;
	}
	#left,#right{
		width:100%;
		padding:20px 0;
		margin:0 auto;
	}
	#left{
		width:240px;
	}
	#copyright{
		line-height:30px;
	}
}

@media (max-width:350px){
	img, iframe{
		max-width:250px;
	}
}

@media (max-width:300px){
	img, iframe{
		max-width:200px;
	}
}