.page-spread-layout{
    .list-narrow-extend{
        display:none;
    }
}
.page-norrow-layout{
    .list-narrow-extend{
        display:block;
    }
}
.list-narrow-outer{
    position:fixed;
    top:95px;
    // overflow:hidden;
    height: auto!important;
    width:50px;
    bottom: 0;
    // @include transition((width .3s $Ease));
}

.list-narrow-wrapper{
	position: absolute;
    left: 0;
    top: 0;
    z-index: 8;
    display:block;
    .list-1st2-li{
    	background:$C2;
    	height:44px;
    	display:block;
        white-space: nowrap;
        text-indent:65px;
        position:relative;
    	width:50px;
        @include transition((width .3s $Ease,text-indent .3s $Ease));
    }
    .has-sub-list{
        @include transition((width .3s $Ease .2s,text-indent .3s $Ease));
    }
    .list-1st2-a{
    	line-height:44px;
        height:44px;
    	display:block;
        overflow: hidden;
        color:$IE8Color095;
        color:rgba(white,0.95);
        font-family:$font-famliy;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;

    }
    .list-spread{
        opacity: 1;
		width:168px;
		@include transition((width .3s $Ease,text-indent .3s $Ease));
        .list-2sd2-ul{
        	li{
        		height:34px;
                text-indent:30px;
                line-height:34px;
        	}
            .ani-index-0{@include transition((text-indent .2s $Ease .28s,line-height .2s $Ease .28s,height .2s $Ease .2s ,color .2s $Ease ,opacity .1s $Ease .28s))}
            .ani-index-1{@include transition((text-indent .2s $Ease .31s,line-height .2s $Ease .31s,height .2s $Ease .2s ,color .2s $Ease ,opacity .1s $Ease .31s))}
            .ani-index-2{@include transition((text-indent .2s $Ease .34s,line-height .2s $Ease .34s,height .2s $Ease .2s ,color .2s $Ease ,opacity .1s $Ease .34s))}
            .ani-index-3{@include transition((text-indent .2s $Ease .37s,line-height .2s $Ease .37s,height .2s $Ease .2s ,color .2s $Ease ,opacity .1s $Ease .37s))}
            .ani-index-4{@include transition((text-indent .2s $Ease .40s,line-height .2s $Ease .40s,height .2s $Ease .2s ,color .2s $Ease ,opacity .1s $Ease .40s))}
            .ani-index-5{@include transition((text-indent .2s $Ease .43s,line-height .2s $Ease .43s,height .2s $Ease .2s ,color .2s $Ease ,opacity .1s $Ease .43s))}
            .ani-index-6{@include transition((text-indent .2s $Ease .46s,line-height .2s $Ease .46s,height .2s $Ease .2s ,color .2s $Ease ,opacity .1s $Ease .46s))}
            .ani-index-7{@include transition((text-indent .2s $Ease .49s,line-height .2s $Ease .49s,height .2s $Ease .2s ,color .2s $Ease ,opacity .1s $Ease .49s))}
            .ani-index-8{@include transition((text-indent .2s $Ease .52s,line-height .2s $Ease .52s,height .2s $Ease .2s ,color .2s $Ease ,opacity .1s $Ease .52s))}
            .ani-index-9{@include transition((text-indent .2s $Ease .55s,line-height .2s $Ease .55s,height .2s $Ease .2s ,color .2s $Ease ,opacity .1s $Ease .55s))}
            .ani-index-10{@include transition((text-indent .2s $Ease .58s,line-height .2s $Ease .58s,height .2s $Ease .2s ,color .2s $Ease ,opacity .1s $Ease .58s))}
            .ani-index-11{@include transition((text-indent .2s $Ease .61s,line-height .2s $Ease .61s,height .2s $Ease .2s ,color .2s $Ease ,opacity .1s $Ease .61s))}
            .ani-index-12{@include transition((text-indent .2s $Ease .64s,line-height .2s $Ease .64s,height .2s $Ease .2s ,color .2s $Ease ,opacity .1s $Ease .64s))}
            .ani-index-13{@include transition((text-indent .2s $Ease .67s,line-height .2s $Ease .67s,height .2s $Ease .2s ,color .2s $Ease ,opacity .1s $Ease .67s))}
            .ani-index-14{@include transition((text-indent .2s $Ease .70s,line-height .2s $Ease .70s,height .2s $Ease .2s ,color .2s $Ease ,opacity .1s $Ease .70s))}
            .ani-index-15{@include transition((text-indent .2s $Ease .73s,line-height .2s $Ease .73s,height .2s $Ease .2s ,color .2s $Ease ,opacity .1s $Ease .73s))}
            .ani-index-16{@include transition((text-indent .2s $Ease .76s,line-height .2s $Ease .76s,height .2s $Ease .2s ,color .2s $Ease ,opacity .1s $Ease .76s))}
            .ani-index-17{@include transition((text-indent .2s $Ease .79s,line-height .2s $Ease .79s,height .2s $Ease .2s ,color .2s $Ease ,opacity .1s $Ease .79s))}
            .ani-index-18{@include transition((text-indent .2s $Ease .82s,line-height .2s $Ease .82s,height .2s $Ease .2s ,color .2s $Ease ,opacity .1s $Ease .82s))}
            .ani-index-19{@include transition((text-indent .2s $Ease .85s,line-height .2s $Ease .85s,height .2s $Ease .2s ,color .2s $Ease ,opacity .1s $Ease .85s))}
            
            .ani-index-0{a{color:$IE8Color06;color:rgba(white,0.6);@include transition((color .2s  $Ease .28s))}}
            .ani-index-1{a{color:$IE8Color06;color:rgba(white,0.6);@include transition((color .2s  $Ease .31s))}}
            .ani-index-2{a{color:$IE8Color06;color:rgba(white,0.6);@include transition((color .2s  $Ease .34s))}}
            .ani-index-3{a{color:$IE8Color06;color:rgba(white,0.6);@include transition((color .2s  $Ease .37s))}}
            .ani-index-4{a{color:$IE8Color06;color:rgba(white,0.6);@include transition((color .2s  $Ease .40s))}}
            .ani-index-5{a{color:$IE8Color06;color:rgba(white,0.6);@include transition((color .2s  $Ease .43s))}}
            .ani-index-6{a{color:$IE8Color06;color:rgba(white,0.6);@include transition((color .2s  $Ease .46s))}}
            .ani-index-7{a{color:$IE8Color06;color:rgba(white,0.6);@include transition((color .2s  $Ease .49s))}}
            .ani-index-8{a{color:$IE8Color06;color:rgba(white,0.6);@include transition((color .2s  $Ease .52s))}}
            .ani-index-9{a{color:$IE8Color06;color:rgba(white,0.6);@include transition((color .2s  $Ease .55s))}}
            .ani-index-10{a{color:$IE8Color06;color:rgba(white,0.6);@include transition((color .2s  $Ease .58s))}}
            .ani-index-11{a{color:$IE8Color06;color:rgba(white,0.6);@include transition((color .2s  $Ease .61s))}}
            .ani-index-12{a{color:$IE8Color06;color:rgba(white,0.6);@include transition((color .2s  $Ease .64s))}}
            .ani-index-13{a{color:$IE8Color06;color:rgba(white,0.6);@include transition((color .2s  $Ease .67s))}}
            .ani-index-14{a{color:$IE8Color06;color:rgba(white,0.6);@include transition((color .2s  $Ease .70s))}}
            .ani-index-15{a{color:$IE8Color06;color:rgba(white,0.6);@include transition((color .2s  $Ease .73s))}}
            .ani-index-16{a{color:$IE8Color06;color:rgba(white,0.6);@include transition((color .2s  $Ease .76s))}}
            .ani-index-17{a{color:$IE8Color06;color:rgba(white,0.6);@include transition((color .2s  $Ease .79s))}}
            .ani-index-18{a{color:$IE8Color06;color:rgba(white,0.6);@include transition((color .2s  $Ease .82s))}}
            .ani-index-19{a{color:$IE8Color06;color:rgba(white,0.6);@include transition((color .2s  $Ease .85s))}}
        }
    }
    .has-sub-list .sd-icon-after{
        display:none;
        opacity: 1!important;
        @include transition((opacity $Ease 0.3s))
    }
    .list-spread.has-sub-list .sd-icon-after{
        display:block;
    }
    .list-spread.has-sub-list .list-1st2-a{
        background-color: rgba(black, 0.1) !important;
    }
    .top-position{
         top:44px;
    }
    .bottom-position{
        bottom:44px;
    }
    .list-2sd2-ul{
        position: absolute;
        left: 53px;
        width: 115px;
        @include transition((top .3s  $Ease .2s));
    	li{
    		display:block;
            overflow:hidden;
            background:$C2;

            height:0;
            line-height:0;
            text-indent: 20px;
			@include transition((height .2s $Ease,opacity .2s $Ease,line-height .2s $Ease,text-indent .2s $Ease));
    	}
    	a{
    		display:block;
    		width:200px;            
            color:rgba(white,0);
            font-family:$font-famliy;
            @include transition((color .3s $Ease));
            &:hover{
                color:$IE8Color095;
                color:rgba(white,0.95)!important;
                @include transition((color .3s $Ease 0s!important));
            }
    	}
    }
    .shadow-bg{
        background:#004f9e!important;
    }
    .has-sub-list{
        .sd-icon-after{
            opacity: 0;
            -webkit-transform:rotateZ(-90deg);
            -moz-transform:rotateZ(-90deg);
            -ms-transform:rotateZ(-90deg);
            -o-transform:rotateZ(-90deg);
            transform:rotateZ(-90deg); 
        }
    }
     .no-sub-list{
        .sd-icon-after{
            display:none;
        }
    }
    
    .shadow-list-a ,.list-1st2-a{
            position: relative;
            &:before{
                position: absolute;
                display:block;
                content: '';
                background-color: rgba(0,0,0,0.2);
                width:0;
                height:0;
                left:50%;
                top:50%;
                opacity:1;
                // @include transition((width .3s $Ease,height .3s $Ease,left .3s $Ease,top .3s $Ease,opacity .35s $Ease));
            }
        }
    //一级波纹效果
    .bg-ripple.shadow-list-a, .no-sub-list.bg-ripple .list-1st2-a{
         &:before{
            width:250px;
            height:44px;
            left:0;
            top:0;
            opacity:0;
            @include transition((width .3s $Ease,height .3s $Ease,left .3s $Ease,top .3s $Ease,opacity .35s $Ease));
        }
    }
    
}
.list-narrow-static-extend {
    .list-1st2-li {
        height: 30px!important;
    }
    .list-1st2-a {
        height: 30px!important;
        line-height: 30px!important;
    }
}