.left_bar{left: 0px; top: 80px; width: 234px; z-index: 999;}
.left_bar .role{top: 0; left: 14px;-webkit-transition: all .25s cubic-bezier(.7, .3, .1, 1);
  transition: all .25s cubic-bezier(.7, .3, .1, 1);}
.left_bar .ctx{left: 0; top: 122px;width: 173px;  height: 427px; background: url(../image/frame2_2.png) no-repeat; background-size: 100%; padding-top: 19px;     -webkit-transition: all .25s cubic-bezier(.7, .3, .1, 1);
  transition: all .25s cubic-bezier(.7, .3, .1, 1); color: #e18954;}
.left_bar .ctx .new_server{border-top: 1px solid #b7b7b7; padding-top: 8px;}
.left_bar .ctx .arrow{right: -23px; width: 24px; height: 64px; top: 50%; margin-top: -32px; background: url(../image/info.png) no-repeat; background-size: 600px 600px; background-position: 0 0;}
.left_bar.hide .ctx {left: -174px;}
.left_bar.hide .role{left: -127px;}
.left_bar.hide .ctx .arrow{background-position: right -65px; transform: none;}