.tuandui_class{width:100%;height:50px;/*border-top:1px dotted #999;*/ border-bottom:1px dotted #999;line-height:50px;margin-top:40px;}
.tuandui_class ul{width:304px;height:50px;margin:auto;border-left:1px dotted #999;}
.tuandui_class li{width:150px;height:50px;float:left;list-style-type: none;border-right:1px dotted #999;text-align:center;}
.tuandui_class a{font-size:14px;color:#5a5a5a;}
.tuandui_class a:hover{color:#ffc527;}
.tuandui_class a.current{color:#ffc527;}

.tuandui_item{width:1300px;margin-bottom:0px;margin-top:30px;overflow-x:hidden;padding-top:15px;}
.tuandui_item dl{width:310px;float:left;margin-bottom:50px;}
.tuandui_item dt{width:256px;height:318px;/*background:url(/images/link_bg.jpg) no-repeat center center;*/margin-bottom:15px;position:relative;display: inline-block;perspective:300px;overflow:hidden;}
.tuandui_item a{display:block;width:256px;height:318px;border: 0px solid #ffc527;}
/*.tuandui_item a:hover img{display:none;}*/
.tuandui_item dd{width:256px;line-height:24px;text-align:center;font-size:16px;}



.picBox{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform-style: preserve-3d;
transform-origin: 50% 50% -128px;
animation: 200ms ease-out 0ms 1 normal forwards;
}

.show,
.hide{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
.hide{
    color:#fff;
    background-color:#000;
    text-align:center;
    line-height:180px;
    transform: translate3d(0,0,-1px);
    /* 3D空间内移动一个元素的位置 */
}


.in-top .hide,
.out-top .hide
 {
    transform-origin: 0% 100%;
    transform: translate3d(0, -100%, 0) rotate3d(1,0,0,90deg);
}
.in-top .picBox{
    animation-name: in-top;
    animation-play-state: running;
}
.out-top .picBox{
    animation-name: out-top;
    animation-play-state: running;
}
@keyframes in-top {
    from  {transform: rotate3d(0,0,0,0deg)}
    to    {transform: rotate3d(-1,0,0,90deg)}
} 

@keyframes out-top {
    from {transform: rotate3d(-1,0,0,90deg)}
    to   {transform: rotate3d(0,0,0,0deg)}
}
.in-right .hide,
.out-right .hide {
          transform-origin: 0% 0%;
          transform: translate3d(100%, 0, 0) rotate3d(0,1,0,90deg);
}
.in-right .picBox{
    animation-name: in-right;
    animation-play-state: running;
}
.out-right .picBox{
    animation-name: out-right;
    animation-play-state: running;
}
@keyframes in-right {
    from  {transform: rotate3d(0,0,0,0deg)}
    to    {transform: rotate3d(0,-1,0,90deg)}
}

@keyframes out-right {
    from  {transform: rotate3d(0,-1,0,90deg)}
    to    {transform: rotate3d(0,0,0,0deg)}
}

.in-bottom .hide,
.out-bottom .hide {
          transform-origin: 0% 0%;
          transform: translate3d(0, 100%, 0) rotate3d(-1,0,0,90deg);
}
.in-bottom .picBox{
    animation-name: in-bottom;
    animation-play-state: running;
}
.out-bottom .picBox{
    animation-name: out-bottom;
    animation-play-state: running;
}
@keyframes in-bottom {
    from  {transform: rotate3d(0,0,0,0deg)}
    to    {transform: rotate3d(1,0,0,90deg)}
}
@keyframes out-bottom {
    from  {transform: rotate3d(1,0,0,90deg)}
    to    {transform: rotate3d(0,0,0,0deg)}
}
.in-left .hide,
.out-left .hide {
          transform-origin: 100% 0;
          transform: translate3d(-100%,0,0) rotate3d(0,-1,0,90deg);
}
@keyframes in-left {
    from  {transform: rotate3d(0,0,0,0deg)}
    to    {transform: rotate3d(0,1,0,90deg)}
}
@keyframes out-left {
    from  {transform: rotate3d(0,1,0,90deg)}
    to    {transform: rotate3d(0,0,0,0deg)}
}
.in-left .picBox{
          animation-name: in-left;
          animation-play-state: running;
}
.out-left .picBox{
          animation-name: out-left;
          animation-play-state: running;
}