@charset "UTF-8";


#list{
	background:#000;
	color:#fff;
	height:auto;
}
#list .inner{
	font-size:14px;
	line-height:1.78;
	margin:0 auto;
	padding:100px 0 0;
	max-width:1220px;
}
#list h2{
	padding-left:20px;
    padding-bottom:0.8em;
}
#list p{
    padding-left:20px;
    font-size:22px;
    font-weight: bold;
    padding-bottom:1em;
    letter-spacing: 0.2em;
}

#list article{
	box-sizing:border-box;
	float:left;
	padding:0 20px 2em;
	width:25%;
	opacity: 0;
    -webkit-transform: translate(0,50px);
    -moz-transform: translate(0,50px);
    -ms-transform: translate(0,50px);
    -o-transform: translate(0,50px);
    transform: translate(0,50px);
}
#list .inner div article:nth-child(4n+1){
	clear:both;

}
#list h3{
	color:#cab977;
	font-size:16px;
	padding-top:10px;
	padding-bottom:.5em;
	line-height:1.2;
}
#list h3:before {
	font-size:20px;
	content:'■';
	display:inline-block;
	margin-right:.25em;
	line-height:1.2;
	vertical-align:bottom;
}
#list ul{
	font-weight:normal;
}
#list li span{
	display:block;
	text-align:right;
}


#list.active article {
    opacity: 1;
    -webkit-transform: translate(0,0px);
    -moz-transform: translate(0,0px);
    -ms-transform: translate(0,0px);
    -o-transform: translate(0,0px);
    transform: translate(0,0px);
    -webkit-transition: all .8s ease 0s;
    -moz-transition: all .8s ease 0s;
    -ms-transition: all .8s ease 0s;
    -o-transition: all .8s ease 0s;
    transition: all .8s ease 0s;
}

#list.active .inner div article:nth-child(1),
#list.active .inner div article:nth-child(2),
#list.active .inner div article:nth-child(3),
#list.active .inner div article:nth-child(4) {
    -webkit-transition-delay: .0s;
    -moz-transition-delay: .0s;
    -ms-transition-delay: .0s;
    -o-transition-delay: .0s;
    transition-delay: .0s;
}

#list.active .inner div article:nth-child(5),
#list.active .inner div article:nth-child(6),
#list.active .inner div article:nth-child(7),
#list.active .inner div article:nth-child(8) {
    -webkit-transition-delay: .4s;
    -moz-transition-delay: .4s;
    -ms-transition-delay: .4s;
    -o-transition-delay: .4s;
    transition-delay: .4s;
}

#list.active .inner div article:nth-child(9),
#list.active .inner div article:nth-child(10),
#list.active .inner div article:nth-child(11),
#list.active .inner div article:nth-child(12) {
    -webkit-transition-delay: .6s;
    -moz-transition-delay: .6s;
    -ms-transition-delay: .6s;
    -o-transition-delay: .6s;
    transition-delay: .6s;
}