.g-wrap{width: 6.4rem;background: rgb(22,22,24);height: 100%}
.g-wrap li{display: block;width: 6.4rem;height: 3.8rem;background: rgb(37,37,39);margin-bottom: .11rem;}
.g-wrap li img{width: 3.4rem;height: 3.8rem;float: left;}
.g-wrap .m-box{float: left;width: 3rem;height: 3.8rem;}
.g-wrap .m-box h3{font-size: .3rem;color: white;margin: .7rem .3rem 0 .3rem;}
.g-wrap .m-box p{font-size: .24rem;color: rgb(153,153,153);line-height: .35rem;margin: .25rem .3rem 0 .3rem;}
.m-more{color: white;margin: .56rem 0 0 0rem ;display: block;font-size: .18rem;font-family: Arial;opacity: .6;width: 1.16rem;text-align: center;}
.m-more .more_icon{ display: block; width: 1.16rem; height: .18rem; position: relative; margin: .01rem 0; }
.m-more .more_icon i{ display: block; width: 1.16rem; height: 1px; background: #ffffff; position: absolute; top: .09rem; }
.m-more .more_icon:after,
.m-more .more_icon:before{ display: block; content: ''; width: .12rem; height: 1px; background: #ffffff; position: absolute; }
.m-more .more_icon:before{ transform: rotate(45deg) !important; -webkit-transform: rotate(45deg); right: -.02rem; top: .05rem; }
.m-more .more_icon:after{ transform: rotate(-45deg) !important; -webkit-transform: rotate(-45deg); right: -.02rem; bottom: .04rem; }
.g-wrap li:active {background: rgb(176,21,28);}
.g-wrap li:active .m-box p{color: white;}
.g-wrap li:active .m-more{opacity: 1;color: white;}