@charset "utf-8";
/* CSS Document */

.intem{text-align:center;}
.cssplayStack {position:absolute; width:750px; height:460px; margin:0 auto;}
.cssplayStack a {display:block; outline:0; position: absolute; left:135px; top:170px; width:480px; height: 280px; background:url(trans.gif); z-index:25;

-moz-transition: 0s 1s;

-ms-transition: 0s 1s;

-o-transition: 0s 1s;

-webkit-transition: 0s 1s;

transition: 0s 1s;

}
.cssplayStack a:active, .cssplayStack a:focus {z-index: 40;}

.cssplayStack a:active + a, .cssplayStack a:focus + a {z-index: 50;}

.cssplayStack a.a1 {z-index: 40;}

.cssplayStack a.a9:active, .cssplayStack a.a9:focus {z-index:30;}



.cssplayStack img {display:block; position:absolute; left:260px; top:160px; border:1px solid #fff; box-shadow:0 5px 10px rgba(0,0,0,0.7);

-moz-transition:1s;

-ms-transition: 1s;

-o-transition: 1s;

-webkit-transition: 1s;

transition: 1s;

}



.cssplayStack .p1,

.cssplayStack .a1:active ~ .p2,

.cssplayStack .a1:focus ~ .p2,

.cssplayStack .a2:active ~ .p3,

.cssplayStack .a2:focus ~ .p3,

.cssplayStack .a3:active ~ .p4,

.cssplayStack .a3:focus ~ .p4,

.cssplayStack .a4:active ~ .p5,

.cssplayStack .a4:focus ~ .p5,

.cssplayStack .a5:active ~ .p6,

.cssplayStack .a5:focus ~ .p6,

.cssplayStack .a6:active ~ .p7,

.cssplayStack .a6:focus ~ .p7,

.cssplayStack .a7:active ~ .p8,

.cssplayStack .a7:focus ~ .p8,

.cssplayStack .a8:active ~ .p9,

.cssplayStack .a8:focus ~ .p9,

.cssplayStack .a9:active ~ .p1,

.cssplayStack .a9:focus ~ .p1
/** pic1 */
{z-index:20; width:480px; margin-left:-240px; top:170px; left:300px; opacity:1; filter:alpha(opacity=100);}
/** left:375px; */


.cssplayStack .p2,

.cssplayStack .a1:active ~ .p3,

.cssplayStack .a1:focus ~ .p3,

.cssplayStack .a2:active ~ .p4,

.cssplayStack .a2:focus ~ .p4,

.cssplayStack .a3:active ~ .p5,

.cssplayStack .a3:focus ~ .p5,

.cssplayStack .a4:active ~ .p6,

.cssplayStack .a4:focus ~ .p6,

.cssplayStack .a5:active ~ .p7,

.cssplayStack .a5:focus ~ .p7,

.cssplayStack .a6:active ~ .p8,

.cssplayStack .a6:focus ~ .p8,

.cssplayStack .a7:active ~ .p9,

.cssplayStack .a7:focus ~ .p9,

.cssplayStack .a8:active ~ .p1,

.cssplayStack .a8:focus ~ .p1,

.cssplayStack .a9:active ~ .p2,

.cssplayStack .a9:focus ~ .p2
/** pic2 */
{z-index:18; width:350px; margin-left:-175px; top:130px; left:120px; opacity:0.9; filter:alpha(opacity=90);}
/** left:195px; */


.cssplayStack .p3,

.cssplayStack .a1:active ~ .p4,

.cssplayStack .a1:focus ~ .p4,

.cssplayStack .a2:active ~ .p5,

.cssplayStack .a2:focus ~ .p5,

.cssplayStack .a3:active ~ .p6,

.cssplayStack .a3:focus ~ .p6,

.cssplayStack .a4:active ~ .p7,

.cssplayStack .a4:focus ~ .p7,

.cssplayStack .a5:active ~ .p8,

.cssplayStack .a5:focus ~ .p8,

.cssplayStack .a6:active ~ .p9,

.cssplayStack .a6:focus ~ .p9,

.cssplayStack .a7:active ~ .p1,

.cssplayStack .a7:focus ~ .p1,

.cssplayStack .a8:active ~ .p2,

.cssplayStack .a8:focus ~ .p2,

.cssplayStack .a9:active ~ .p3,

.cssplayStack .a9:focus ~ .p3
/** Pic3 */
{z-index:17; width:300px; margin-left:-150px; top:100px; left:80px; opacity:0.8; filter:alpha(opacity=80);}
/** left:155px; **/


.cssplayStack .p4,

.cssplayStack .a1:active ~ .p5,

.cssplayStack .a1:focus ~ .p5,

.cssplayStack .a2:active ~ .p6,

.cssplayStack .a2:focus ~ .p6,

.cssplayStack .a3:active ~ .p7,

.cssplayStack .a3:focus ~ .p7,

.cssplayStack .a4:active ~ .p8,

.cssplayStack .a4:focus ~ .p8,

.cssplayStack .a5:active ~ .p9,

.cssplayStack .a5:focus ~ .p9,

.cssplayStack .a6:active ~ .p1,

.cssplayStack .a6:focus ~ .p1,

.cssplayStack .a7:active ~ .p2,

.cssplayStack .a7:focus ~ .p2,

.cssplayStack .a8:active ~ .p3,

.cssplayStack .a8:focus ~ .p3,

.cssplayStack .a9:active ~ .p4,

.cssplayStack .a9:focus ~ .p4
/** Pic4 */
{z-index:16; width:220px; margin-left:-110px; top:70px; left:125px; opacity:0.7; filter:alpha(opacity=70);}
/** left:200px; */


.cssplayStack .p5,

.cssplayStack .a1:active ~ .p6,

.cssplayStack .a1:focus ~ .p6,

.cssplayStack .a2:active ~ .p7,

.cssplayStack .a2:focus ~ .p7,

.cssplayStack .a3:active ~ .p8,

.cssplayStack .a3:focus ~ .p8,

.cssplayStack .a4:active ~ .p9,

.cssplayStack .a4:focus ~ .p9,

.cssplayStack .a5:active ~ .p1,

.cssplayStack .a5:focus ~ .p1,

.cssplayStack .a6:active ~ .p2,

.cssplayStack .a6:focus ~ .p2,

.cssplayStack .a7:active ~ .p3,

.cssplayStack .a7:focus ~ .p3,

.cssplayStack .a8:active ~ .p4,

.cssplayStack .a8:focus ~ .p4,

.cssplayStack .a9:active ~ .p5,

.cssplayStack .a9:focus ~ .p5
/** pic5 */
{z-index:15; width:180px; margin-left:-90px; top:50px; left:208px; opacity:0.6; filter:alpha(opacity=60);}
/** left:283px; */


.cssplayStack .p6,

.cssplayStack .a1:active ~ .p7,

.cssplayStack .a1:focus ~ .p7,

.cssplayStack .a2:active ~ .p8,

.cssplayStack .a2:focus ~ .p8,

.cssplayStack .a3:active ~ .p9,

.cssplayStack .a3:focus ~ .p9,

.cssplayStack .a4:active ~ .p1,

.cssplayStack .a4:focus ~ .p1,

.cssplayStack .a5:active ~ .p2,

.cssplayStack .a5:focus ~ .p2,

.cssplayStack .a6:active ~ .p3,

.cssplayStack .a6:focus ~ .p3,

.cssplayStack .a7:active ~ .p4,

.cssplayStack .a7:focus ~ .p4,

.cssplayStack .a8:active ~ .p5,

.cssplayStack .a8:focus ~ .p5,

.cssplayStack .a9:active ~ .p6,

.cssplayStack .a9:focus ~ .p6
/** pic6 */
{z-index:15; width:180px; margin-left:-90px; top:50px; left:392px; opacity:0.6; filter:alpha(opacity=60);}
/** left:467px;*/


.cssplayStack .p7,

.cssplayStack .a1:active ~ .p8,

.cssplayStack .a1:focus ~ .p8,

.cssplayStack .a2:active ~ .p9,

.cssplayStack .a2:focus ~ .p9,

.cssplayStack .a3:active ~ .p1,

.cssplayStack .a3:focus ~ .p1,

.cssplayStack .a4:active ~ .p2,

.cssplayStack .a4:focus ~ .p2,

.cssplayStack .a5:active ~ .p3,

.cssplayStack .a5:focus ~ .p3,

.cssplayStack .a6:active ~ .p4,

.cssplayStack .a6:focus ~ .p4,

.cssplayStack .a7:active ~ .p5,

.cssplayStack .a7:focus ~ .p5,

.cssplayStack .a8:active ~ .p6,

.cssplayStack .a8:focus ~ .p6,

.cssplayStack .a9:active ~ .p7,

.cssplayStack .a9:focus ~ .p7
/** pic7 */
{z-index:16; width:220px; margin-left:-110px; top:70px; left:475px; opacity:0.7; filter:alpha(opacity=70);}
/** left:550px */


.cssplayStack .p8,

.cssplayStack .a1:active ~ .p9,

.cssplayStack .a1:focus ~ .p9,

.cssplayStack .a2:active ~ .p1,

.cssplayStack .a2:focus ~ .p1,

.cssplayStack .a3:active ~ .p2,

.cssplayStack .a3:focus ~ .p2,

.cssplayStack .a4:active ~ .p3,

.cssplayStack .a4:focus ~ .p3,

.cssplayStack .a5:active ~ .p4,

.cssplayStack .a5:focus ~ .p4,

.cssplayStack .a6:active ~ .p5,

.cssplayStack .a6:focus ~ .p5,

.cssplayStack .a7:active ~ .p6,

.cssplayStack .a7:focus ~ .p6,

.cssplayStack .a8:active ~ .p7,

.cssplayStack .a8:focus ~ .p7,

.cssplayStack .a9:active ~ .p8,

.cssplayStack .a9:focus ~ .p8
/** pic8 */
{z-index:17; width:300px; margin-left:-150px; top:100px; left:520px; opacity:0.8; filter:alpha(opacity=80);}
/** left:595px; */


.cssplayStack .p9,

.cssplayStack .a1:active ~ .p1,

.cssplayStack .a1:focus ~ .p1,

.cssplayStack .a2:active ~ .p2,

.cssplayStack .a2:focus ~ .p2,

.cssplayStack .a3:active ~ .p3,

.cssplayStack .a3:focus ~ .p3,

.cssplayStack .a4:active ~ .p4,

.cssplayStack .a4:focus ~ .p4,

.cssplayStack .a5:active ~ .p5,

.cssplayStack .a5:focus ~ .p5,

.cssplayStack .a6:active ~ .p6,

.cssplayStack .a6:focus ~ .p6,

.cssplayStack .a7:active ~ .p7,

.cssplayStack .a7:focus ~ .p7,

.cssplayStack .a8:active ~ .p8,

.cssplayStack .a8:focus ~ .p8,

.cssplayStack .a9:active ~ .p9,

.cssplayStack .a9:focus ~ .p9
/** pic9 */
{z-index:18; width:350px; margin-left:-175px; top:130px; left:480px; opacity:0.9; filter:alpha(opacity=90);}
/** left:555px; */