/* CSS Document */

/*ÇбÞŽ¹æ*/
#classWrap{clear:both; padding:0; margin:0;}
#classWrap ul.classList{clear:both; padding:0; margin:0; width:100%; *zoom:1;}
#classWrap ul.classList:after {content:""; clear:both; display:block; height:0; visibility:none;}
#classWrap ul.classList li{width:100%; padding:0 0 20px 0; margin:0;}
#classWrap ul.classList li div.classBox{width:100%;}
#classWrap ul.classList li div.classBox div.classTop{font-size:2.167em;} 
#classWrap ul.classList li div.classBox div.classTop h4{font-weight:normal; .line-height:120%; font-family:NGB;}
#classWrap ul.classList li div.classBox div.classBody{width:100%; padding:0; margin:0;}
#classWrap ul.classList li div.classBox div.classBody ul{width:auto; border:1px solid;}
#classWrap ul.classList li div.classBox div.classBody ul li{border-top:1px solid #fff; border-bottom:1px solid; line-height:150%; background:url(../../images/class/class_dot.gif) no-repeat 15px 15px; padding:6px 0; position:relative;}
#classWrap ul.classList li div.classBox div.classBody ul li p{width:auto; padding:0 52px 0 25px;}
#classWrap ul.classList li div.classBox div.classBody ul li:first-child{border-top:none; border-top:0;}
#classWrap ul.classList li div.classBox div.classBody ul li.lastLi{border-bottom:0; border-bottom:none;}
#classWrap ul.classList li div.classBox div.classBody ul li span.classTit a{color:#4c4a46;}
#classWrap ul.classList li div.classBox div.classBody ul li span.goBtn{position:absolute; right:10px; top:50%; width:32px; height:16px; display:block; text-align:center; margin:-8px 0 0 0; padding:0;}
#classWrap ul.classList li div.classBox div.classBody ul li span.goBtn a{color:#ffffff; font-size:0.917em; line-height:16px; margin:0; padding:0; display:block;}


/*½ºÅ² º¯°æ -01 */
.class01 ul.classList li div.classBox div.classTop{height:52px; border-bottom:2px solid #d3c9ad;}
.class01 ul.classList li div.classBox div.classTop h4{padding:23px 0 0 10px; .padding-top:20px; color:#737272; font-style:italic;}
.class01 ul.classList li div.classBox div.classTop h4 span{color:#f78a1a;}
.class01 ul.classList li div.classBox div.classBody ul{border-color:#d3c9ad !important; background:#f2f1ef;}
.class01 ul.classList li div.classBox div.classBody ul li{border-bottom-color:#ada795 !important;}
.class01 ul.classList li div.classBox div.classBody ul li span.goBtn{background:url(../../images/class/class01_gobtn.gif) no-repeat}

	/*¹è°æ*/
	.class01 ul.classList li div.cls01 div.classTop{background:url(../../images/class/class01_bg0101.gif) no-repeat right top;}
	.class01 ul.classList li div.cls02 div.classTop{background:url(../../images/class/class01_bg0102.gif) no-repeat right top;}
	.class01 ul.classList li div.cls03 div.classTop{background:url(../../images/class/class01_bg0103.gif) no-repeat right top;}
	.class01 ul.classList li div.cls04 div.classTop{background:url(../../images/class/class01_bg0104.gif) no-repeat right top;}
	.class01 ul.classList li div.cls05 div.classTop{background:url(../../images/class/class01_bg0105.gif) no-repeat right top;}
	.class01 ul.classList li div.cls06 div.classTop{background:url(../../images/class/class01_bg0106.gif) no-repeat right top;}
	.class01 ul.classList li div.cls07 div.classTop{background:url(../../images/class/class01_bg0107.gif) no-repeat right top;}
	.class01 ul.classList li div.cls08 div.classTop{background:url(../../images/class/class01_bg0108.gif) no-repeat right top;}
	.class01 ul.classList li div.cls09 div.classTop{background:url(../../images/class/class01_bg0109.gif) no-repeat right top;}

/*½ºÅ² º¯°æ -02 */
.class02 ul.classList li div.classBox{
	overflow:hidden;
	border-radius:13px; -moz-border-radius:13px; -o-border-radius:13px; -webkit-border-radius:13px; -ms-border-radius:13px;
}
.class02 ul.classList li div.classBox div.classTop{height:auto;}
.class02 ul.classList li div.classBox div.classTop h4{padding:13px 0 15px 15px; .padding-top:15px; color:#fff;}

.class02 ul.classList li div.classBox div.classBody ul{border:none !important;border:0 !important; background:#faf8f0;}
.class02 ul.classList li div.classBox div.classBody ul li{border-bottom-color:#c8c5b7 !important;}
.class02 ul.classList li div.classBox div.classBody ul li span.goBtn{background:url(../../images/class/class02_gobtn.gif) no-repeat}

	/*¹è°æ*/
	.class02 ul.classList li div.cls01{border:1px solid #ffcc00;}
	.class02 ul.classList li div.cls02{border:1px solid #a8dc57;}
	.class02 ul.classList li div.cls03{border:1px solid #30b333;}
	.class02 ul.classList li div.cls04{border:1px solid #30b39c;}
	.class02 ul.classList li div.cls05{border:1px solid #00adee;}
	.class02 ul.classList li div.cls06{border:1px solid #6e9dde;}
	.class02 ul.classList li div.cls07{border:1px solid #906ace;}
	.class02 ul.classList li div.cls08{border:1px solid #c96bda;}
	.class02 ul.classList li div.cls09{border:1px solid #e46969;}
	

	.class02 ul.classList li div.cls01 div.classTop{background:#ffcc00 url(../../images/class/class02_bg0101.gif) no-repeat right center; border-bottom:2px solid #ffcc00;}
	.class02 ul.classList li div.cls02 div.classTop{background:#a8dc57 url(../../images/class/class02_bg0102.gif) no-repeat right center; border-bottom:2px solid #a8dc57;}
	.class02 ul.classList li div.cls03 div.classTop{background:#30b333 url(../../images/class/class02_bg0103.gif) no-repeat right center; border-bottom:2px solid #30b333;}
	.class02 ul.classList li div.cls04 div.classTop{background:#30b39c url(../../images/class/class02_bg0104.gif) no-repeat right center; border-bottom:2px solid #30b39c;}
	.class02 ul.classList li div.cls05 div.classTop{background:#00adee url(../../images/class/class02_bg0105.gif) no-repeat right center; border-bottom:2px solid #00adee;}
	.class02 ul.classList li div.cls06 div.classTop{background:#6e9dde url(../../images/class/class02_bg0106.gif) no-repeat right center; border-bottom:2px solid #6e9dde;}
	.class02 ul.classList li div.cls07 div.classTop{background:#906ace url(../../images/class/class02_bg0107.gif) no-repeat right center; border-bottom:2px solid #906ace;}
	.class02 ul.classList li div.cls08 div.classTop{background:#c96bda url(../../images/class/class02_bg0108.gif) no-repeat right center; border-bottom:2px solid #c96bda;}
	.class02 ul.classList li div.cls09 div.classTop{background:#e46969 url(../../images/class/class02_bg0109.gif) no-repeat right center; border-bottom:2px solid #e46969;}

/*½ºÅ² º¯°æ -03 */
.class03 ul.classList li div.classBox div.classTop{height:48px; border-bottom:2px solid #ababab;}
.class03 ul.classList li div.classBox div.classTop h4{padding:15px 0 0 60px; .padding-top:10px;  color:#595454; }
.class03 ul.classList li div.classBox div.classBody ul{border-color:#ababab !important; background:#f6f6f6;}
.class03 ul.classList li div.classBox div.classBody ul li{border-bottom-color:#ababab !important;}
.class03 ul.classList li div.classBox div.classBody ul li span.goBtn{background:url(../../images/class/class03_gobtn.gif) no-repeat}

	/*¹è°æ*/
	.class03 ul.classList li div.cls01 div.classTop{background:url(../../images/class/class03_bg0101.gif) no-repeat left top;}
	.class03 ul.classList li div.cls02 div.classTop{background:url(../../images/class/class03_bg0102.gif) no-repeat left top;}
	.class03 ul.classList li div.cls03 div.classTop{background:url(../../images/class/class03_bg0103.gif) no-repeat left top;}
	.class03 ul.classList li div.cls04 div.classTop{background:url(../../images/class/class03_bg0104.gif) no-repeat left top;}
	.class03 ul.classList li div.cls05 div.classTop{background:url(../../images/class/class03_bg0105.gif) no-repeat left top;}
	.class03 ul.classList li div.cls06 div.classTop{background:url(../../images/class/class03_bg0106.gif) no-repeat left top;}
	.class03 ul.classList li div.cls07 div.classTop{background:url(../../images/class/class03_bg0107.gif) no-repeat left top;}
	.class03 ul.classList li div.cls08 div.classTop{background:url(../../images/class/class03_bg0108.gif) no-repeat left top;}
	.class03 ul.classList li div.cls09 div.classTop{background:url(../../images/class/class03_bg0109.gif) no-repeat left top;}

/*½ºÅ² º¯°æ -04 */
.class04 ul.classList li div.classBox div.classTop{height:53px; line-height:53px; border-bottom:2px solid #447d78;}
.class04 ul.classList li div.classBox div.classTop h4{padding:0 0 0 60px; .padding-top:13px;  color:#fff; }
.class04 ul.classList li div.classBox div.classBody ul{border-color:#447d78 !important; background:#fff;}
.class04 ul.classList li div.classBox div.classBody ul li{border-bottom-color:#447d78 !important;}
.class04 ul.classList li div.classBox div.classBody ul li span.goBtn{background:url(../../images/class/class04_gobtn.gif) no-repeat}

	/*¹è°æ*/
	.class04 ul.classList li div.cls01 div.classTop{background:#72bbb4 url(../../images/class/class04_bg0101.gif) no-repeat left top;}
	.class04 ul.classList li div.cls02 div.classTop{background:#72bbb4 url(../../images/class/class04_bg0102.gif) no-repeat left top;}
	.class04 ul.classList li div.cls03 div.classTop{background:#72bbb4 url(../../images/class/class04_bg0103.gif) no-repeat left top;}
	.class04 ul.classList li div.cls04 div.classTop{background:#72bbb4 url(../../images/class/class04_bg0104.gif) no-repeat left top;}
	.class04 ul.classList li div.cls05 div.classTop{background:#72bbb4 url(../../images/class/class04_bg0105.gif) no-repeat left top;}
	.class04 ul.classList li div.cls06 div.classTop{background:#72bbb4 url(../../images/class/class04_bg0106.gif) no-repeat left top;}
	.class04 ul.classList li div.cls07 div.classTop{background:#72bbb4 url(../../images/class/class04_bg0107.gif) no-repeat left top;}
	.class04 ul.classList li div.cls08 div.classTop{background:#72bbb4 url(../../images/class/class04_bg0108.gif) no-repeat left top;}
	.class04 ul.classList li div.cls09 div.classTop{background:#72bbb4 url(../../images/class/class04_bg0109.gif) no-repeat left top;}

/*½ºÅ² º¯°æ -05 */
.class05 ul.classList li div.classBox div.classTop{height:39px; border-bottom:2px solid #ababab;}
.class05 ul.classList li div.classBox div.classTop h4{padding:3px 0 0 10px; color:#595454; }
.class05 ul.classList li div.classBox div.classTop h4 span{color:#f78a1a;}
.class05 ul.classList li div.classBox div.classBody ul{border-color:#ababab !important; background:#f6f6f6;}
.class05 ul.classList li div.classBox div.classBody ul li{border-bottom-color:#ababab !important;}
.class05 ul.classList li div.classBox div.classBody ul li span.goBtn{background:url(../../images/class/class05_gobtn.gif) no-repeat}

	/*¹è°æ*/
	.class05 ul.classList li div.cls01 div.classTop{background:url(../../images/class/class05_bg0101.gif) no-repeat right bottom;}
	.class05 ul.classList li div.cls02 div.classTop{background:url(../../images/class/class05_bg0102.gif) no-repeat right bottom;}
	.class05 ul.classList li div.cls03 div.classTop{background:url(../../images/class/class05_bg0103.gif) no-repeat right bottom;}
	.class05 ul.classList li div.cls04 div.classTop{background:url(../../images/class/class05_bg0104.gif) no-repeat right bottom;}
	.class05 ul.classList li div.cls05 div.classTop{background:url(../../images/class/class05_bg0105.gif) no-repeat right bottom;}
	.class05 ul.classList li div.cls06 div.classTop{background:url(../../images/class/class05_bg0106.gif) no-repeat right bottom;}
	.class05 ul.classList li div.cls07 div.classTop{background:url(../../images/class/class05_bg0107.gif) no-repeat right bottom;}
	.class05 ul.classList li div.cls08 div.classTop{background:url(../../images/class/class05_bg0108.gif) no-repeat right bottom;}
	.class05 ul.classList li div.cls09 div.classTop{background:url(../../images/class/class05_bg0109.gif) no-repeat right bottom;}


/*½ºÅ² º¯°æ -06 */
.class06 ul.classList li div.classBox div.classTop{height:56px; border-bottom:2px solid #e9e96f;}
.class06 ul.classList li div.classBox div.classTop h4{padding:20px 0 0 10px; color:#595454; }
.class06 ul.classList li div.classBox div.classBody ul{border-color:#e9e96f !important; background:#f9f9e1;}
.class06 ul.classList li div.classBox div.classBody ul li{border-bottom-color:#e9e96f !important;}
.class06 ul.classList li div.classBox div.classBody ul li span.goBtn{background:url(../../images/class/class06_gobtn.gif) no-repeat}

	/*¹è°æ*/
	.class06 ul.classList li div.cls01 div.classTop{background:url(../../images/class/class06_bg0101.gif) no-repeat right bottom;}
	.class06 ul.classList li div.cls02 div.classTop{background:url(../../images/class/class06_bg0102.gif) no-repeat right bottom;}
	.class06 ul.classList li div.cls03 div.classTop{background:url(../../images/class/class06_bg0103.gif) no-repeat right bottom;}
	.class06 ul.classList li div.cls04 div.classTop{background:url(../../images/class/class06_bg0104.gif) no-repeat right bottom;}
	.class06 ul.classList li div.cls05 div.classTop{background:url(../../images/class/class06_bg0105.gif) no-repeat right bottom;}
	.class06 ul.classList li div.cls06 div.classTop{background:url(../../images/class/class06_bg0106.gif) no-repeat right bottom;}
	.class06 ul.classList li div.cls07 div.classTop{background:url(../../images/class/class06_bg0107.gif) no-repeat right bottom;}
	.class06 ul.classList li div.cls08 div.classTop{background:url(../../images/class/class06_bg0108.gif) no-repeat right bottom;}
	.class06 ul.classList li div.cls09 div.classTop{background:url(../../images/class/class06_bg0109.gif) no-repeat right bottom;}


/*MOBILE MODE*/
@media only screen and (min-width:0) and (max-width:767px){

}

/*TABLET MODE*/
@media only screen and (min-width:768px) and (max-width:1023px){
	#classWrap ul.classList li{width:33%; float:left; padding-bottom:35px;}
	#classWrap ul.classList li:nth-child(3n+1){clear:both; float:left;}
	#classWrap ul.classList li div.classBox {width:95%;}
	#classWrap ul.classList li:nth-child(3n+1) div.classBox{margin:0  5% 0 0;}
	#classWrap ul.classList li:nth-child(3n+2) div.classBox{margin:0 auto;}
	#classWrap ul.classList li:nth-child(3n) div.classBox{margin:0 0 0 5%;}
	#classWrap ul.classList li div.classBox div.classBody ul li{width:100%; float:none;clear:both;}
}

/*PC MODE*/
@media only screen and (min-width:1024px){
	#classWrap ul.classList li{width:33%; float:left; padding-bottom:35px;}
	#classWrap ul.classList li:nth-child(3n+1){clear:both; float:left;}
	#classWrap ul.classList li div.classBox {width:95%;}
	#classWrap ul.classList li:nth-child(3n+1) div.classBox{margin:0  5% 0 0;}
	#classWrap ul.classList li:nth-child(3n+2) div.classBox{margin:0 auto;}
	#classWrap ul.classList li:nth-child(3n) div.classBox{margin:0 0 0 5%;}
	#classWrap ul.classList li div.classBox div.classBody ul li{width:100%; float:none;clear:both;}
}