@charset "UTF-8";


/*------------------  top  ------------------*/
body{
	

}
#wrapper{
	padding-bottom:20px;
}
#content{
	padding:50px 0 0;
	height:700px;
	text-align: center;
	background:#26220f;
}
#main{
	width:1100px;
	height:650px;
	margin:0 auto;
	position:relative;
}
#main ul,
#main li{
	display: block;
}
#main ul{
	position:relative;
}
#main li{
	position:absolute;
}
#main ul li ul li{
	display: block;	
	overflow: hidden;
	z-index:2;
	width:100%;
	        transition: width 1s cubic-bezier(.84, .43, 0, 1);
	     -o-transition: width 1s cubic-bezier(.84, .43, 0, 1);
	    -ms-transition: width 1s cubic-bezier(.84, .43, 0, 1);
	   -moz-transition: width 1s cubic-bezier(.84, .43, 0, 1);
	-webkit-transition: width 1s cubic-bezier(.84, .43, 0, 1);
}
#main ul li ul li img{
	        transition: transform 1s cubic-bezier(.55, 0, .48, 1);
	     -o-transition: transform 1s cubic-bezier(.55, 0, .48, 1);
	    -ms-transition: transform 1s cubic-bezier(.55, 0, .48, 1);
	   -moz-transition: transform 1s cubic-bezier(.55, 0, .48, 1);
	-webkit-transition: transform 1s cubic-bezier(.55, 0, .48, 1);
}
#main ul li ul li.hidden{
	width: 0;
	z-index:1;
	        transition: height 0s ease-in-out 0;
	     -o-transition: height 0s ease-in-out 0;
	    -ms-transition: height 0s ease-in-out 0;
	   -moz-transition: height 0s ease-in-out 0;
	-webkit-transition: height 0s ease-in-out 0;
}
#main ul li ul li.hidden img{
	        transform: translateX(-80%);
	     -o-transform: translateX(-80%);
	    -ms-transform: translateX(-80%);
	   -moz-transform: translateX(-80%);
	-webkit-transform: translateX(-80%);
	        transition: transform 0s ease-in-out 0;
	     -o-transition: transform 0s ease-in-out 0;
	    -ms-transition: transform 0s ease-in-out 0;
	   -moz-transition: transform 0s ease-in-out 0;
	-webkit-transition: transform 0s ease-in-out 0;
}
#main ul li ul li.p1{
	        transition-delay: 0.1s;
	     -o-transition-delay: 0.1s;
	    -ms-transition-delay: 0.1s;
	   -moz-transition-delay: 0.1s;
	-webkit-transition-delay: 0.1s;
}
#main ul li ul li.p2{
	        transition-delay: 0.2s;
	     -o-transition-delay: 0.2s;
	    -ms-transition-delay: 0.2s;
	   -moz-transition-delay: 0.2s;
	-webkit-transition-delay: 0.2s;
}
#main ul li ul li.p3{
	        transition-delay: 0.3s;
	     -o-transition-delay: 0.3s;
	    -ms-transition-delay: 0.3s;
	   -moz-transition-delay: 0.3s;
	-webkit-transition-delay: 0.3s;
}
#main ul li ul li.p4{
	        transition-delay: 0.4s;
	     -o-transition-delay: 0.4s;
	    -ms-transition-delay: 0.4s;
	   -moz-transition-delay: 0.4s;
	-webkit-transition-delay: 0.4s;
}
#p1{
	position:absolute;
	top:0;
	left:0;
	width:319px;
	height:322px;
	overflow: hidden;
}
#p1 ul{
	display: block;
	width:319px;
	height:322px;
	overflow: hidden;
}

#p2{
	position:absolute;
	top:0;
	left:325px;
	width:319px;
	height:322px;
	overflow: hidden;
}
#p2 ul{
	display: block;
	width:319px;
	height:322px;
	overflow: hidden;
}
#p3{
	position:absolute;
	top:0;
	left:650px;
	width:450px;
	height:322px;
	overflow: hidden;
}
#p3 ul{
	display: block;
	width:450px;
	height:322px;
	overflow: hidden;
}
#p4{
	position:absolute;
	top:328px;
	left:0;
	width:450px;
	height:322px;
	overflow: hidden;
}
#p4 ul{
	display: block;
	width:450px;
	height:322px;
	overflow: hidden;
}
#text{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 644px;
	height: 322px;
	background:url(../img/story/photo5.jpg) no-repeat;
}
#text img{
	margin-top:20px;
}