@charset "utf-8";

.test_waku{
height:130px;
padding:10px;
margin:0px;
background-color:#FFF;
position:relative;
top:0px;
left:0px;
border-left:1px solid #AAA;
border-right:1px solid #AAA;
border-bottom:2px dotted #000;
}
.tw_stt{
border-top:1px solid #AAA;
}
.tw_end{
border-bottom:1px solid #AAA;
}
.tw_wl2{
border-bottom:2px solid #DDD;
}


.test_waku > h4{
width:50px;
height:15px;
line-height:15px;
text-align:center;
font-size:12px;
color:#030;
background:#DDD;
background:rgba(200,200,200,0.5);
padding:8px;
margin:0;
position:absolute;
top:0px;
right:0px;

z-index:50;
}


.pp{
-webkit-perspective:500px;
-moz-perspective:500px;
-ms-perspective:500px;
-o-perspective:500px;
perspective:500px;
}
.tfs_3d{
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
}

.t1tx{
position:absolute;
bottom:10px;
left:10px;
}

#trf_test_01{
position:relative;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
#trf_test_01_sub{
position:absolute;
}
#t_1:hover #trf_test_01{
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
}



#trf_test_02{
position:relative;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
#trf_test_02_sub{
position:absolute;
-webkit-transform: rotateY(60deg);
-moz-transform: rotateY(60deg);
-ms-transform: rotateY(60deg);
-o-transform: rotateY(60deg);
transform: rotateY(60deg);
}

#t_2:hover #trf_test_02{
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
}

#trf_test_03{
position:relative;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
#trf_test_03_sub{
position:absolute;
-webkit-transform: rotateY(60deg);
-moz-transform: rotateY(60deg);
-ms-transform: rotateY(60deg);
-o-transform: rotateY(60deg);
transform: rotateY(60deg);
}

#t_3:hover #trf_test_03{
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
}


#trf_test_04{
position:relative;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
#trf_test_04_sub{
position:absolute;
-webkit-transform: rotateY(-30deg) rotateZ(-30deg);
-moz-transform: rotateY(-30deg) rotateZ(-30deg);
-ms-transform: rotateY(-30deg) rotateZ(-30deg);
-o-transform: rotateY(-30deg) rotateZ(-30deg);
transform: rotateY(-30deg) rotateZ(-30deg);
}

#t_4:hover #trf_test_04{
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
}

#trf_test_04b{
position:relative;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
#trf_test_04_sub2{
position:absolute;
-webkit-transform: rotateY(-30deg) rotateZ(-30deg);
-moz-transform: rotateY(-30deg) rotateZ(-30deg);
-ms-transform: rotateY(-30deg) rotateZ(-30deg);
-o-transform: rotateY(-30deg) rotateZ(-30deg);
transform: rotateY(-30deg) rotateZ(-30deg);
}
#t_5:hover #trf_test_04b{
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
}

.c3_ofh{
overflow:hidden;
}