*{
  margin:0;
  padding:0;
}
#categories{
  overflow:hidden;
  width:95%;
  margin:0 auto;
}
#categories li{
  position:relative;
  list-style-type:none;
  width:24.3%; /* width:27.85714285714286%; */ /* = (100-2.5) / 3.5 */
  padding-bottom: 28.06%; /* padding-bottom: 32.16760145166612%; */ /* =  width /0.866 */
  float:left;
  overflow:hidden;
  visibility:hidden;
 
  -webkit-transform: rotate(-60deg) skewY(30deg);
  -ms-transform: rotate(-60deg) skewY(30deg);
  transform: rotate(-60deg) skewY(30deg);
  
}

#categories li:nth-child(1), #categories li:nth-child(2), #categories li:nth-child(3), #categories li:nth-child(4){
  
	margin-bottom: -6.9285714285%;
	
	-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	transform: translateX(50%) rotate(-60deg) skewY(30deg);
}

#categories li:nth-child(9), #categories li:nth-child(10), #categories li:nth-child(11), #categories li:nth-child(12) {

	margin-top: -6.9285714285%;
	margin-bottom: -6.9285714285%;
	
	-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	transform: translateX(50%) rotate(-60deg) skewY(30deg);
}

#categories li:nth-child(1){
	margin-left: 0.5%;
}
#categories li:nth-child(2){
	margin-left: 0.5%;
}
#categories li:nth-child(3){
	margin-left: 0.5%;
}

#categories li:nth-child(5){
	margin-top: 0.5%;
	margin-right: 0.5%;
	margin-left: 0.25%;
}
#categories li:nth-child(6){
	margin-top: 0.5%;
	margin-right: 0.5%;
}
#categories li:nth-child(7){
	margin-top: 0.5%;
	margin-right: 0.25%;
}
#categories li:nth-child(8){
	margin-top: 0.5%;
	margin-right: 0.5%;
	margin-left: 0.5%;
	margin-bottom: 0.5%;
}
#categories li:nth-child(9){
	margin-left: 0.5%;
}
#categories li:nth-child(10){
	margin-left: 0.5%;
}
#categories li:nth-child(11){
	margin-left: 0.75%;
}
#categories li:nth-child(13){
	margin-top: 0.5%;
	margin-left: 0.25%;
}
#categories li:nth-child(14){
	margin-top: 0.5%;
	margin-left: 0.5%;
	
}



#categories li *{
	position:absolute;
	visibility:visible;
}
#categories li > div{
	width:100%;
	height:100%;
	text-align:center;
	overflow:hidden;
	 
	-webkit-transform: skewY(-30deg) rotate(60deg);
	-ms-transform: skewY(-30deg) rotate(60deg);
	transform: skewY(-30deg) rotate(60deg);
	-webkit-backface-visibility:hidden;  
}


/* HEX CONTENT */
#categories div.hak_list_ys{
	background-color: #009de6
}

#categories div.hak_list_jcw{
	background-color: #7289ff
}

#categories div.hak_list_jg{
	background-color: #6e9dee
}

#categories div.hak_list_dd{
	background-color: #4980DE
}

#categories div.hak_list_yg{
	background-color: #2664CE
}

#categories div.hak_list_jh{
	background-color: #2664CE
}

#categories div.hak_list_dj{
	background-color: #7289ff
}

#categories div.hak_list_uj{
	background-color: #03a69c
}

#categories div.hak_list_br{
	background-color: #003CA3
}

#categories div.hak_list_hs{
	background-color: #009de6
}

#categories div.hak_list_dp{
	background-color: #7289ff
}

#categories ul.hak_list{
	text-align: center;
	width:100%;
	top:30%;	
	font-size:22px;
	font-family:'NanumSqR',sans-serif;
	color:#FFF;
}

#categories ul.hak_list button{
	text-align: center;
	width:100%;
	top:30%;	
	font-size:22px;
	font-family:'NanumSqR',sans-serif;
	color:#FFF;
}

#categories ul.hak_list li{
	width:43px;
	height:43px;
	-webkit-transform: none;
	-ms-transform: none;
	transform : none;
	position: relative;
	float:none;	
	display: inline-block;
	padding-top:10px;
	margin: -2px;
}

#categories ul.hak_list button{
	width:43px;
	height:43px;
	-webkit-transform: none;
	-ms-transform: none;
	transform : none;
	position: relative;
	float:none;	
	display: inline-block;
	/* padding-top:10px; */
	margin: 1px;
}

.class_info li.info_01{
	color: #FFF;
	font-size: 25px;
	padding-top: 10px;
	text-align: center;
}
.class_info li.info_02{
	color: #FFF;
	font-size: 25px;
	padding-top: 10px;
	text-align: center;
}

#categories ul.hak_list button.class_info1{
	background:url('../images/main/class_icon1.png')no-repeat 0 0;
}
#categories ul.hak_list button.class_info1 a:link{
	color:#FFF;
}
#categories button.class_info2{
	background:url('../images/main/class_icon2.png')no-repeat 0 0;
}
#categories button.class_info2 a:link{
	color:#FFF;
}

#categories ul.hak_list li.class_info1{
	background:url('../images/main/class_icon1.png')no-repeat 0 0;
}
#categories ul.hak_list li.class_info1 a:link{
	color:#FFF;
}
#categories li.class_info2{
	background:url('../images/main/class_icon2.png')no-repeat 0 0;
}
#categories li.class_info2 a:link{
	color:#FFF;
}
#categories li.class_info3{
	background:url('../images/main/class_icon3.png')no-repeat 0 0;color:#000;
}
#categories li.class_info4{
	background:url('../images/main/class_icon4.png')no-repeat 0 0;color:#000;
}

.hak_tit{
	width:100%;
	text-align:center;
	font-size:20px;
	font-family:'NanumSqB',sans-serif;
	color:#FFFFFF;
	bottom: 20%;
}
.class_section1{width:100%;overflow:hidden;display:block; padding:48px 0px 48px 0px}
@media screen and (max-width:640px){
	
	.class_info li.info_01{
		font-size: 13px;
		padding-top: 13px;
	}
	
	.class_info li.info_02{
		font-size: 13px;
		padding-top: 13px;
	}
	
	#categories ul.hak_list li{
		margin: 0px;
	}
	
	#categories ul.hak_list button{
		margin: 0px;
	}
	
	#categories ul.hak_list{
		width:100%;
	}
	
	#categories ul.hak_list button{
		width:27px;
		height:27px;
		padding-top:5px;
		font-size : 13px;
	}
		
	#categories ul.hak_list li{
		width:27px;
		height:27px;
		padding-top:5px;
		font-size : 13px;
	}
	
	.hak_tit{
		font-size:15px;
		
	}
	
	#categories ul.hak_list button.class_info1{
		background:url('../images/main/class_icon_m1.png')no-repeat 0 0;
		margin-bottom : 3px;
		margin-right : 2px;
	}
	#categories ul.hak_list button.class_info2{
		background:url('../images/main/class_icon_m2.png')no-repeat 0 0;
		margin-bottom : 3px;
		margin-left : 2px;
	}
	#categories button.class_info3{
		background:url('../images/main/class_icon_m3.png')no-repeat 0 0;color:#000;
		margin-bottom : 3px;
	}
	#categories button.class_info4{
		background:url('../images/main/class_icon_m4.png')no-repeat 0 0;color:#000;
		margin-bottom : 3px;
	}
	
	#categories ul.hak_list li.class_info1{
		background:url('../images/main/class_icon_m1.png')no-repeat 0 0;
	}
	#categories li.class_info2{
		background:url('../images/main/class_icon_m2.png')no-repeat 0 0;
	}
	#categories li.class_info3{
		background:url('../images/main/class_icon_m3.png')no-repeat 0 0;color:#000;
	}
	#categories li.class_info4{
		background:url('../images/main/class_icon_m4.png')no-repeat 0 0;color:#000;
	}
	
}
	
	
}