.page-spread-layout {
    .list-narrow-extend {
        display: none;
    }
}

.page-norrow-layout {
    .list-narrow-extend {
        display: block;
    }
}

.list-narrow-outer {
    position: fixed;
    height: 100%;
    top: 55px;
    // overflow:hidden;
    width: 50px;
    // @include transition((width .3s $Ease));
}

.list-narrow-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 97;
    display: block;

    .list-1st2-li {
        background: $C2;
        height: 44px;
        display: block;
        white-space: nowrap;
        text-indent: 66px;
        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 {
        &:hover {
          color: rgba(white, 1);
        }
        line-height: 44px;
        height: 44px;
        display: block;
        overflow: hidden;
        color: rgba(white, 1);

        font-family: $font-famliy;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 16px;
        .list-1st2-title {
            display: none;
        }
    }

    .list-spread {
        opacity: 1;
        min-width: 200px;
        // padding-right: 16px;

        @include transition((width .3s $Ease, text-indent .3s $Ease));

        .list-1st2-title {
            display: inline;
        }
        .list-2sd2-ul {
            li {
                height: 34px;
                text-indent: 30px;
                line-height: 34px;

            }
            li.shadow-bg {
              a {
                color: #fff !important;
              }
            }

            .ani-index-0 {
                @include subMenuTranslation(0.28s)
            }

            .ani-index-1 {
                @include subMenuTranslation(0.31s)
            }

            .ani-index-2 {
                @include subMenuTranslation(0.34s)
            }

            .ani-index-3 {
                @include subMenuTranslation(0.37s)
            }

            .ani-index-4 {
                @include subMenuTranslation(0.40s)
            }

            .ani-index-5 {
                @include subMenuTranslation(0.43s)
            }

            .ani-index-6 {
                @include subMenuTranslation(0.46s)
            }

            .ani-index-7 {
                @include subMenuTranslation(0.49s)
            }

            .ani-index-8 {
                @include subMenuTranslation(0.52s)
            }

            .ani-index-9 {
                @include subMenuTranslation(0.55s)
            }

            .ani-index-10 {
                @include subMenuTranslation(0.58s)
            }

            .ani-index-11 {
                @include subMenuTranslation(0.61s)
            }

            .ani-index-12 {
                @include subMenuTranslation(0.64s)
            }

            .ani-index-13 {
                @include subMenuTranslation(0.67s)
            }

            .ani-index-14 {
                @include subMenuTranslation(0.7s)
            }

            .ani-index-15 {
                @include subMenuTranslation(0.73s)
            }

            .ani-index-16 {
                @include subMenuTranslation(0.76s)
            }

            .ani-index-17 {
                @include subMenuTranslation(0.8s)
            }

            .ani-index-18 {
                @include subMenuTranslation(0.83s)
            }

            .ani-index-19 {
                @include subMenuTranslation(0.86s)
            }

            .ani-index-20 {
                @include subMenuTranslation(0.89s)
            }

            .ani-index-21 {
                @include subMenuTranslation(0.92s)
            }

            .ani-index-22 {
                @include subMenuTranslation(0.95s)
            }

            .ani-index-23 {
                @include subMenuTranslation(0.98s)
            }

            .ani-index-24 {
                @include subMenuTranslation(1.02s)
            }

            .ani-index-25 {
                @include subMenuTranslation(1.05s)
            }

            .ani-index-26 {
                @include subMenuTranslation(1.08s)
            }

            .ani-index-27 {
                @include subMenuTranslation(1.21s)
            }

            .ani-index-28 {
                @include subMenuTranslation(1.24s)
            }

            .ani-index-29 {
                @include subMenuTranslation(1.27s)
            }

            .ani-index-30 {
                @include subMenuTranslation(1.3s)
            }

            .ani-index-31 {
                @include subMenuTranslation(1.33s)
            }

            .ani-index-32 {
                @include subMenuTranslation(1.36s)
            }

            .ani-index-33 {
                @include subMenuTranslation(1.39s)
            }

            .ani-index-34 {
                @include subMenuTranslation(1.42s)
            }

            .ani-index-35 {
                @include subMenuTranslation(1.45s)
            }

            .ani-index-36 {
                @include subMenuTranslation(1.48s)
            }

            .ani-index-37 {
                @include subMenuTranslation(1.51s)
            }

            .ani-index-38 {
                @include subMenuTranslation(1.54s)
            }

            .ani-index-39 {
                @include subMenuTranslation(1.57s)
            }

            .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))
                }
            }

            .ani-index-20 {
                a {
                    color: $IE8Color06;
                    color: rgba(white, 0.6);
                    @include transition((color .2s $Ease .88s))
                }
            }

            .ani-index-21 {
                a {
                    color: $IE8Color06;
                    color: rgba(white, 0.6);
                    @include transition((color .2s $Ease .91s))
                }
            }

            .ani-index-22 {
                a {
                    color: $IE8Color06;
                    color: rgba(white, 0.6);
                    @include transition((color .2s $Ease .94s))
                }
            }

            .ani-index-23 {
                a {
                    color: $IE8Color06;
                    color: rgba(white, 0.6);
                    @include transition((color .2s $Ease .97s))
                }
            }

            .ani-index-24 {
                a {
                    color: $IE8Color06;
                    color: rgba(white, 0.6);
                    @include transition((color .2s $Ease 1s))
                }
            }

            .ani-index-25 {
                a {
                    color: $IE8Color06;
                    color: rgba(white, 0.6);
                    @include transition((color .2s $Ease 1.03s))
                }
            }

            .ani-index-26 {
                a {
                    color: $IE8Color06;
                    color: rgba(white, 0.6);
                    @include transition((color .2s $Ease 1.06s))
                }
            }

            .ani-index-27 {
                a {
                    color: $IE8Color06;
                    color: rgba(white, 0.6);
                    @include transition((color .2s $Ease 1.09s))
                }
            }

            .ani-index-28 {
                a {
                    color: $IE8Color06;
                    color: rgba(white, 0.6);
                    @include transition((color .2s $Ease 1.12s))
                }
            }

            .ani-index-29 {
                a {
                    color: $IE8Color06;
                    color: rgba(white, 0.6);
                    @include transition((color .2s $Ease 1.15s))
                }
            }

            .ani-index-30 {
                a {
                    color: $IE8Color06;
                    color: rgba(white, 0.6);
                    @include transition((color .2s $Ease 1.18s))
                }
            }

            .ani-index-31 {
                a {
                    color: $IE8Color06;
                    color: rgba(white, 0.6);
                    @include transition((color .2s $Ease 1.21s))
                }
            }

            .ani-index-32 {
                a {
                    color: $IE8Color06;
                    color: rgba(white, 0.6);
                    @include transition((color .2s $Ease 1.24s))
                }

            }

            .ani-index-33 {
                a {
                    color: $IE8Color06;
                    color: rgba(white, 0.6);
                    @include transition((color .2s $Ease 1.27s))
                }
            }

            .ani-index-34 {
                a {
                    color: $IE8Color06;
                    color: rgba(white, 0.6);
                    @include transition((color .2s $Ease 1.3s))
                }
            }

            .ani-index-35 {
                a {
                    color: $IE8Color06;
                    color: rgba(white, 0.6);
                    @include transition((color .2s $Ease 1.33s))
                }
            }

            .ani-index-36 {
                a {
                    color: $IE8Color06;
                    color: rgba(white, 0.6);
                    @include transition((color .2s $Ease 1.34s))
                }
            }

            .ani-index-37 {
                a {
                    color: $IE8Color06;
                    color: rgba(white, 0.6);
                    @include transition((color .2s $Ease 1.35s))
                }
            }

            .ani-index-38 {
                a {
                    color: $IE8Color06;
                    color: rgba(white, 0.6);
                    @include transition((color .2s $Ease 1.38s))
                }
            }

            .ani-index-39 {
                a {
                    color: $IE8Color06;
                    color: rgba(white, 0.6);
                    @include transition((color .2s $Ease 1.41s))
                }
            }
        }
    }

    .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: 147px;
        @include transition((top .3s $Ease .2s));
        background: #004f9e;
        li {
            display: block;
            overflow: hidden;
            background: $C2;
            background-color: rgba(0, 0, 0, 0.1);
            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;

            overflow: hidden;
            padding: 0 16px 0 0;
            text-overflow: ellipsis;
            color: rgba(255, 255, 255, 0.6) !important;

            font-family: $font-famliy;
            @include transition((color .3s $Ease));

            &:hover {
                color: $IE8Color095;
                color: rgba(white, 1) !important;
                @include transition((color .3s $Ease 0s !important));
            }
        }
    }

    .shadow-bg {
      a {
        background: rgba(0,0,0,0.2) !important;
      }
      // color: #fff !important;
      // background: rgba(0,0,0,0.2) !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-wrapper-ie-top {
    top: 40px !important;
}