@charset "UTF-8";


#diagram{
	background: url(../img/common2/bg-ko.gif);
	background-attachment: fixed;
	color:#fff;
	height: auto;
}
#diagram img{
	display: block;
	margin:0 auto;
	opacity: 0;
	-webkit-transform: translate(0px,30px);
	   -moz-transform: translate(0px,30px);
	    -ms-transform: translate(0px,30px);
	     -o-transform: translate(0px,30px);
	        transform: translate(0px,30px);
}
#diagram h2{
	color:#fff;
	text-align: center;
	opacity: 0;
	-webkit-transform: translate(0px,20px);
	   -moz-transform: translate(0px,20px);
	    -ms-transform: translate(0px,20px);
	     -o-transform: translate(0px,20px);
	        transform: translate(0px,20px);
}
#diagram .inner{
	padding-top:100px;
	padding-bottom:60px;
}

#diagram.active img{
	opacity: 1;
	-webkit-transition: all .5s ease-out .3s;
	   -moz-transition: all .5s ease-out .3s;
	    -ms-transition: all .5s ease-out .3s;
	     -o-transition: all .5s ease-out .3s;
	        transition: all .5s ease-out .3s;
	-webkit-transform: translate(0px,0px);
	   -moz-transform: translate(0px,0px);
	    -ms-transform: translate(0px,0px);
	     -o-transform: translate(0px,0px);
	        transform: translate(0px,0px);
}
#diagram.active h2{
	opacity: 1;
	-webkit-transition: all .5s ease-out ;
	   -moz-transition: all .5s ease-out ;
	    -ms-transition: all .5s ease-out ;
	     -o-transition: all .5s ease-out ;
	        transition: all .5s ease-out ;
	-webkit-transform: translate(0px,0px);
	   -moz-transform: translate(0px,0px);
	    -ms-transform: translate(0px,0px);
	     -o-transform: translate(0px,0px);
	        transform: translate(0px,0px);
}