/*---- class ----*/
div.class_list {width:100%; margin:auto; overflow:hidden;}

div.class_div, 
div.class_info,
div.class_info dl {width:100%; max-width:1200px; height:400px;}

div.class_div {margin:auto;}

div.class_info {position:absolute; background:white; overflow:hidden;}
div.class_info dl {margin:auto;}
div.class_info dl dt,
div.class_info dl dd {width:calc(50% - 100px); margin:50px; float:left;}
div.class_info dl dt {height:300px; box-shadow:0 0 30px rgba(0,0,0,0.3);}
div.class_info dl dd {margin-top:75px;}

div.class_info ul {height:275px;}
div.class_info ul li {transform: skew(-0.03deg);}
div.class_info ul li:nth-of-type(1) {margin-bottom:10px; font-size:16px; font-family:"nanumB"; color:#f64949;}
div.class_info ul li:nth-of-type(2) {margin-bottom:20px; font-size:32px;}
div.class_info ul li:nth-of-type(3) {height:120px; margin-bottom:15px; font-size:16px; line-height:24px; word-break: keep-all;}
div.class_info ul li:nth-of-type(4) span {padding:15px 30px; font-size:16px; border-radius:50px; background:#f64949; color:white; font-family:"nanumB"; cursor:pointer;}

div.class_div div.piano dl dt {background:url(/assets/img/main_class_3.jpg) center center; background-repeat:no-repeat; background-size:cover;}
div.class_div div.guitar dl dt {background:url(/assets/img/main_class_4.jpg) center center; background-repeat:no-repeat; background-size:cover;}
div.class_div div.drums dl dt {background:url(/assets/img/main_class_5.jpg) center center; background-repeat:no-repeat; background-size:cover;}
div.class_div div.bass dl dt {background:url(/assets/img/main_class_6.jpg) center center; background-repeat:no-repeat; background-size:cover;}
div.class_div div.vocal dl dt {background:url(/assets/img/main_class_8.jpg) center center; background-repeat:no-repeat; background-size:cover;}
div.class_div div.rap dl dt {background:url(/assets/img/main_class_9.jpg) center center; background-repeat:no-repeat; background-size:cover;}
div.class_div div.compostition dl dt {background:url(/assets/img/main_class_1.jpg) center center; background-repeat:no-repeat; background-size:cover;}
div.class_div div.saxophone dl dt {background:url(/assets/img/main_class_7.jpg) center center; background-repeat:no-repeat; background-size:cover;}
div.class_div div.midi dl dt {background:url(/assets/img/main_class_2.jpg) center center; background-repeat:no-repeat; background-size:cover;}

@media (max-width:1500px) {
	div.class_div, 
	div.class_info,
	div.class_info dl {max-width:1190px;}
}

@media (max-width:1200px) {
	div.class_div, 
	div.class_info {width:100%;}

	div.class_div, 
	div.class_info
	div.class_info dl {height:350px;}

	div.class_info dl dt,
	div.class_info dl dd {width:calc(50% - 50px); margin:25px;}
	div.class_info dl dt {box-shadow:0 0 15px rgba(0,0,0,0.3);}
	div.class_info dl dd {margin-top:50px;}
}

@media (max-width:900px) {
	div.class_list {width:90%;}

	div.class_div, 
	div.class_info,
	div.class_info dl {height:635px;}
	div.class_info dl {width:100%; max-width:500px;}

	/*---- class ----*/
	div.class_info ul,
	div.class_info dl dd {height:250px;}
	div.class_info dl dt,
	div.class_info dl dd {width:calc(100% - 50px); max-width:550px;}
	div.class_info dl dt {border-radius:20px;}
	div.class_info dl dd {height:auto; margin-top:10px; text-align:center;}
}


@media (max-width:600px) {
	div.class_div, 
	div.class_info,
	div.class_info dl {height:630px;}

	/*---- class ----*/
	div.class_info ul,
	div.class_info dl dd {height:200px;}

	div.class_info ul li:nth-of-type(1) {font-size:14px;}
	div.class_info ul li:nth-of-type(2) {font-size:28px; margin-bottom:15px;}
	div.class_info ul li:nth-of-type(3) {font-size:14px; margin-bottom:25px; line-height:22px; height:130px;}
	div.class_info ul li:nth-of-type(4) span {font-size:14px; padding:10px 25px;}
}