/*青*/

/*------------------------------------*\
  ACCORDION
\*------------------------------------*/
.accordion{
	width:300px;
	overflow:hidden;
	list-style:none;
	margin-bottom:10px;
	background:#333;
}
.accordion li{
	float:left;
	width:25%;
	overflow:hidden;
	height:50px;
	-moz-transition:width 0.2s ease-out;
	-webkit-transition:width 0.2s ease-out;
	-o-transition:width 0.2s ease-out;
	transition:width 0.2s ease-out;
	-moz-transition-delay:0.15s;
	-webkit-transition-delay:0.15s;
	-o-transition-delay:0.15s;
	transition-delay:0.15s;
}
.accordion li p{
	margin:10px;
}
.accordion:hover li{
	width:10%;
}
.accordion li:hover{
	width:70%;
}
.sli01	{ background:#ccc; color:#000; }
.sli02	{ background:#999; color:#000; }
.sli03	{ background:#666; color:#fff;}
.sli04	{ background:#000; color:#fff;}

/*------------------------------------*\
  Malti Hover
\*------------------------------------*/


#multiHover {
	position: relative;
	overflow:hidden;
	width:300px;
	height:199px;

}
#multiHover span {
	position: absolute;
	width: 100%;
	height: 100%;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	font-size: 2em;
	transition: .3s linear;
	-webkit-transition: .3s linear;
	color:white;
	padding: 3%;
	opacity: 0;
}

#multiHover span:nth-child(1) {
	top: 0;
	left: 90%;
	background: hsla(0,70%,50%,0.6);
}
#multiHover span:nth-child(2) {
	top: -90%;
	left: 0;
	background: hsla(90,70%,50%,0.6);
}
#multiHover span:nth-child(3) {
	top: 0;
	left: -90%;
	background: hsla(180,70%,50%,0.6);
} 
#multiHover span:nth-child(4) {
	top: 90%;
	left: 0;
	background: hsla(270,70%,50%,0.6);
}

#multiHover span:hover { opacity: 1; }
#multiHover span:nth-child(odd):hover { left: 0; }
#multiHover span:nth-child(even):hover { top: 0; }