*{
        padding: 0;
        margin: 0;
    }
    html,body{
        height: 100%;
    }
    .wrap{
        width: 260px;
        height: 100%;
        background-color: #363a45;
    }
    .list h2{
        position: relative;
        background-color: #d0def9;
        text-align: center;
        font-size: 16px;
        color: #244fa1;
        transition: .5s;

    }
    .list{
        color:  #244fa1;
    }
    .list h2.on{
        background-color: #244fa1;
        color: #fff;
    }
    .list i{
        position: absolute;
        right: 10px;
        top: 16px;
        border: 8px solid transparent;
        border-left-color: #244fa1;/*triangle*/
        transform:rotate(0deg);
        transform-origin: 1px 8px;
        transition: .5s;
    }
    .list i.on{
        transform:rotate(90deg);
       border-left-color:#fff;
    }
    .hide{
        overflow: hidden;
        height: 0;
        transition: .5s;
    }
   
    .hide li>a{
		display:inline-block;
    	width:100%;
    	height:100%;
    }

    .hide li:hover{
        background: #244fa1 !important;
        
        color:#fff;
    }
    .hide li>a:hover{
    	background: #244fa1 !important;
		color:#fff;
    }