@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;
}

.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;
}


#trf_test_01{
background-color:#00F;
font-size:12px;
text-align:center;
line-height:60px;
color:#FF0;
width:60px;
height:60px;
position:relative;
padding:10px;
margin:0px;
-webkit-transition:all 1s linear;
-moz-transition:all 1s linear;
-ms-transition:all 1s linear;
-o-transition:all 1s linear;
transition:all 1s linear;
}
.test_waku:hover > #trf_test_01{
-webkit-transform: skewX(30deg);
-moz-transform: skewX(30deg);
-ms-transform: skewX(30deg);
-o-transform: skewX(30deg);
transform: skewX(30deg);
}

#trf_test_01b{
background-color:#00F;
font-size:12px;
text-align:center;
line-height:60px;
color:#FF0;
width:60px;
height:60px;
position:absolute;
padding:10px;
margin:0px;
-webkit-transition:all 1s linear;
-moz-transition:all 1s linear;
-ms-transition:all 1s linear;
-o-transition:all 1s linear;
transition:all 1s linear;
}
.test_waku:hover > #trf_test_01b{
-webkit-transform: skewY(30deg);
-moz-transform: skewY(30deg);
-ms-transform: skewY(30deg);
-o-transform: skewY(30deg);
transform: skewY(30deg);
}

#trf_test_02{
background-color:#00F;
font-size:12px;
text-align:center;
line-height:60px;
color:#FF0;
width:60px;
height:60px;
position:relative;
padding:10px;
margin:0px;
-webkit-transition:all 1s linear;
-moz-transition:all 1s linear;
-ms-transition:all 1s linear;
-o-transition:all 1s linear;
transition:all 1s linear;
}
.test_waku:hover > #trf_test_02{
-webkit-transform: skewX(-30deg);
-moz-transform: skewX(-30deg);
-ms-transform: skewX(-30deg);
-o-transform: skewX(-30deg);
transform: skewX(-30deg);
}

#trf_test_02b{
background-color:#00F;
font-size:12px;
text-align:center;
line-height:60px;
color:#FF0;
width:60px;
height:60px;
position:absolute;
padding:10px;
margin:0px;
-webkit-transition:all 1s linear;
-moz-transition:all 1s linear;
-ms-transition:all 1s linear;
-o-transition:all 1s linear;
transition:all 1s linear;
}
.test_waku:hover > #trf_test_02b{
-webkit-transform: skewY(-30deg);
-moz-transform: skewY(-30deg);
-ms-transform: skewY(-30deg);
-o-transform: skewY(-30deg);
transform: skewY(-30deg);
}

.ckline:after{
position:absolute;
top:34px;
left:5px;
padding:0px;
margin:0px;
width:200px;
height:50px;
content:'';
border-top:1px dotted rgba(200,0,0,0.5);
border-bottom:1px dotted rgba(200,0,0,0.5);
}

.ckl1{
position:absolute;
top:5px;
left:42px;
padding:0px;
margin:0px;
width:33px;
height:120px;
border-left:1px dotted rgba(200,0,0,0.5);
border-right:1px dotted rgba(200,0,0,0.5);
}
.ckl2{
position:absolute;
top:5px;
left:142px;
padding:0px;
margin:0px;
width:33px;
height:120px;
border-left:1px dotted rgba(200,0,0,0.5);
border-right:1px dotted rgba(200,0,0,0.5);
}

#trf_test_03{
background-color:#00F;
font-size:12px;
text-align:center;
line-height:60px;
color:#FF0;
width:60px;
height:60px;
position:relative;
padding:10px;
margin:0px;
-webkit-transition:all 1s linear;
-moz-transition:all 1s linear;
-ms-transition:all 1s linear;
-o-transition:all 1s linear;
transition:all 1s linear;
}
.test_waku:hover > #trf_test_03{
-webkit-transform: skew(30deg,20deg);
-moz-transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg);
-o-transform: skew(30deg,20deg);
transform: skew(30deg,20deg);
}

#trf_test_03b{
background-color:#00F;
font-size:12px;
text-align:center;
line-height:60px;
color:#FF0;
width:60px;
height:60px;
position:absolute;
padding:10px;
margin:0px;
-webkit-transition:all 1s linear;
-moz-transition:all 1s linear;
-ms-transition:all 1s linear;
-o-transition:all 1s linear;
transition:all 1s linear;
}
.test_waku:hover > #trf_test_03b{
-webkit-transform: skewX(30deg) skewY(20deg);
-moz-transform: skewX(30deg) skewY(20deg);
-ms-transform: skewX(30deg) skewY(20deg);
-o-transform: skewX(30deg) skewY(20deg);
transform: skewX(30deg) skewY(20deg);
}

#trf_test_03c{
background-color:#00F;
font-size:12px;
text-align:center;
line-height:60px;
color:#FF0;
width:60px;
height:60px;
position:relative;
padding:10px;
margin:0px;
-webkit-transition:all 1s linear;
-moz-transition:all 1s linear;
-ms-transition:all 1s linear;
-o-transition:all 1s linear;
transition:all 1s linear;
}
.test_waku:hover > #trf_test_03c{
-webkit-transform: skew(30deg,20deg);
-moz-transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg);
-o-transform: skew(30deg,20deg);
transform: skew(30deg,20deg);
}
#trf_test_03d{
background-color:#00F;
font-size:12px;
text-align:center;
line-height:60px;
color:#FF0;
width:60px;
height:60px;
position:absolute;
padding:10px;
margin:0px;
-webkit-transition:all 1s linear;
-moz-transition:all 1s linear;
-ms-transition:all 1s linear;
-o-transition:all 1s linear;
transition:all 1s linear;
}
.test_waku:hover > #trf_test_03d{
-webkit-transform: skewY(20deg) skewX(30deg);
-moz-transform: skewY(20deg) skewX(30deg);
-ms-transform: skewY(20deg) skewX(30deg);
-o-transform: skewY(20deg) skewX(30deg);
transform: skewY(20deg) skewX(30deg);
}


.trf1_s3{
-webkit-perspective:100px;
-moz-perspective:100px;
-ms-perspective:100px;
-o-perspective:100px;
perspective:100px;
}


#trf_test_04{
background-color:#00F;
font-size:12px;
text-align:center;
line-height:60px;
color:#FF0;
width:60px;
height:60px;
position:relative;
padding:10px;
margin:0px;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-ms-transform: skew(30deg);
-o-transform: skew(30deg);
transform: skew(30deg);
}

#trf_test_04b{
background-color:#00F;
font-size:12px;
text-align:center;
line-height:60px;
color:#FF0;
width:60px;
height:60px;
position:absolute;
padding:10px;
margin:0px;
-webkit-transform: skewX(30deg);
-moz-transform: skewX(30deg);
-ms-transform: skewX(30deg);
-o-transform: skewX(30deg);
transform: skewX(30deg);
}

.tt4_ofh{overflow:hidden;}

#trf_test_05{
background-color:#00F;
font-size:12px;
text-align:center;
line-height:60px;
color:#FF0;
width:60px;
height:60px;
position:relative;
padding:10px;
margin:0px;
-webkit-transition:all 1s linear;
-moz-transition:all 1s linear;
-ms-transition:all 1s linear;
-o-transition:all 1s linear;
transition:all 1s linear;
}
.test_waku:hover > #trf_test_05{
-webkit-transform: skew(360deg);
-moz-transform: skew(360deg);
-ms-transform: skew(360deg);
-o-transform: skew(360deg);
transform: skew(360deg);
}
#trf_test_05b{
background-color:#00F;
font-size:12px;
text-align:center;
line-height:60px;
color:#FF0;
width:60px;
height:60px;
position:absolute;
padding:10px;
margin:0px;
-webkit-transition:all 1s linear;
-moz-transition:all 1s linear;
-ms-transition:all 1s linear;
-o-transition:all 1s linear;
transition:all 1s linear;
}
.test_waku:hover > #trf_test_05b{
-webkit-transform: skew(-180deg);
-moz-transform: skew(-180deg);
-ms-transform: skew(-180deg);
-o-transform: skew(-180deg);
transform: skew(-180deg);
}
#trf_test_05c{
background-color:#00F;
font-size:12px;
text-align:center;
line-height:60px;
color:#FF0;
width:60px;
height:60px;
position:relative;
padding:10px;
margin:0px;
-webkit-transition:all 5s linear;
-moz-transition:all 5s linear;
-ms-transition:all 5s linear;
-o-transition:all 5s linear;
transition:all 5s linear;
}
.test_waku:hover > #trf_test_05c{
-webkit-transform: skew(360deg);
-moz-transform: skew(360deg);
-ms-transform: skew(360deg);
-o-transform: skew(360deg);
transform: skew(360deg);
}
#trf_test_05d{
background-color:#00F;
font-size:12px;
text-align:center;
line-height:60px;
color:#FF0;
width:60px;
height:60px;
position:absolute;
padding:10px;
margin:0px;
-webkit-transition:all 5s linear;
-moz-transition:all 5s linear;
-ms-transition:all 5s linear;
-o-transition:all 5s linear;
transition:all 5s linear;
}
.test_waku:hover > #trf_test_05d{
-webkit-transform: skew(-180deg);
-moz-transform: skew(-180deg);
-ms-transform: skew(-180deg);
-o-transform: skew(-180deg);
transform: skew(-180deg);
}

#trf_test_06{
background-color:#00F;
font-size:12px;
text-align:center;
line-height:60px;
color:#FF0;
width:60px;
height:60px;
position:relative;
padding:10px;
margin:0px;
-webkit-transition:all 1s linear;
-moz-transition:all 1s linear;
-ms-transition:all 1s linear;
-o-transition:all 1s linear;
transition:all 1s linear;
}
.test_waku:hover > #trf_test_06{
-webkit-transform: skewX(89deg);
-moz-transform: skewX(89deg);
-ms-transform: skewX(89deg);
-o-transform: skewX(89deg);
transform: skewX(89deg);
}

#trf_test_06b{
background-color:#00F;
font-size:12px;
text-align:center;
line-height:60px;
color:#FF0;
width:60px;
height:60px;
position:absolute;
padding:10px;
margin:0px;
-webkit-transition:all 1s linear;
-moz-transition:all 1s linear;
-ms-transition:all 1s linear;
-o-transition:all 1s linear;
transition:all 1s linear;
}
.test_waku:hover > #trf_test_06b{
-webkit-transform: skewY(89deg);
-moz-transform: skewY(89deg);
-ms-transform: skewY(89deg);
-o-transform: skewY(89deg);
transform: skewY(89deg);
}
#trf_test_06c{
background-color:#00F;
font-size:12px;
text-align:center;
line-height:60px;
color:#FF0;
width:60px;
height:60px;
position:relative;
padding:10px;
margin:0px;
-webkit-transition:all 1s linear;
-moz-transition:all 1s linear;
-ms-transition:all 1s linear;
-o-transition:all 1s linear;
transition:all 1s linear;
}
.test_waku:hover > #trf_test_06c{
-webkit-transform: skew(45deg,45deg);
-moz-transform: skew(45deg,45deg);
-ms-transform: skew(45deg,45deg);
-o-transform: skew(45deg,45deg);
transform: skew(45deg,45deg);
}
#trf_test_06d{
background-color:#00F;
font-size:12px;
text-align:center;
line-height:60px;
color:#FF0;
width:60px;
height:60px;
position:absolute;
padding:10px;
margin:0px;
-webkit-transition:all 1s linear;
-moz-transition:all 1s linear;
-ms-transition:all 1s linear;
-o-transition:all 1s linear;
transition:all 1s linear;
}
.test_waku:hover > #trf_test_06d{
-webkit-transform: skewX(45deg) skewY(45deg);
-moz-transform: skewX(45deg) skewY(45deg);
-ms-transform: skewX(45deg) skewY(45deg);
-o-transform: skewX(45deg) skewY(45deg);
transform: skewX(45deg) skewY(45deg);
}