/**** 头部通用样式 ****/
    .page-sidebar-wrapper{
        position: fixed;
        background-color: #004f9e;
        height: 100%;
        left: 0px;
        top: 40px;
        float:left;
        z-index:99;
        font-size: 14px;
        padding-top:65px;
        padding-bottom: 60px;
        box-sizing:border-box;
        .list-outer-wrapper{
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            position:relative;
            z-index: 98;
        }
        .list-1st-ul{
            position: relative;
        }
        .static-list-wrapper {
            // .bg-highlight {
            //     background-color:rgba(29,134,240,0.1)!important;
            //     color:#1D86F0  !important; 
            // }
            // ul li:first-child a {
            //     border-top: 1px solid #104676;
            // }
            position: relative;
            .list-1st-li {
                .list-1st-a {
                    display: flex;
                    .sd-icon-before{
                        font-size: 18px;
                        margin: 6px 0 0 14px;
                        &::defore{
                            color: #99BBD7 !important
                        }
                    }
                    .text{
                        font-size: 13px;
                        height: 31px;
                        line-height: 33px;
                    }
                }
            }
        }
        .static-list-box{
            position: relative;
            z-index:100;
        .static-list-wrapper{
            background: #106ECC;
            width: 100%;
            position: relative;
            cursor: pointer;
            overflow: hidden;
            .fixed-list-1l{
                width: 200px;
                line-height: 31px;
                background: transparent;
                cursor: pointer;
                color: rgba(255, 255, 255, 0.7);
                height: 35px;
                font-size: 13px;
                .sd-icon-fixed{
                    margin-top: 6px;
                    text-align: center;
                    width: 24px;
                    height: 20px;
                    border-radius: 0 0 24px 24px;
                    margin-left: 12px;
                    -webkit-transition: color 0.3s linear, background-color 0.1s linear 0.2s;
                    -moz-transition: color 0.3s linear, background-color 0.1s linear 0.2s;
                    -ms-transition: color 0.3s linear, background-color 0.1s linear 0.2s;
                    -o-transition: color 0.3s linear, background-color 0.1s linear 0.2s;
                    transition: color 0.3s linear, background-color 0.1s linear 0.2s;
                }
                .sd-icon-fixed-add{
                    color: #33383D;
                    background-color: #fff;
                }
                &:hover{
                    color: rgba(255, 255, 255, 0.95);
                    -webkit-transition: color 0.3s linear, background-color 0.1s linear 0.2s;
                    -moz-transition: color 0.3s linear, background-color 0.1s linear 0.2s;
                    -ms-transition: color 0.3s linear, background-color 0.1s linear 0.2s;
                    -o-transition: color 0.3s linear, background-color 0.1s linear 0.2s;
                    transition: color 0.3s linear, background-color 0.1s linear 0.2s;
                }
            }
            .fixed-staic-list{
                background: #106ECC;
                .list-1st-a  {
                    background: rgb(16, 110, 204);
                }
            }
            .icon-fixed-click{
                background: #fff; 
                color: #33383d;
                -webkit-transition: color 0.3s linear, background-color 0.1s linear 0.2s;
                -moz-transition: color 0.3s linear, background-color 0.1s linear 0.2s;
                -ms-transition: color 0.3s linear, background-color 0.1s linear 0.2s;
                -o-transition: color 0.3s linear, background-color 0.1s linear 0.2s;
                transition: color 0.3s linear, background-color 0.1s linear 0.2s;
            }
            .icon-fixed{
                float: left;
            }
        }

        .open{
            opacity: 1 !important;
            .list-1st-a  {
                .text{
                    text-indent: 0px !important;
                    opacity: 1 !important;
                }
            }
        }
        .fixed-listMenushow{ 
            width: 200px;
            height: 0px;
            border-radius: 4px 4px 4px 0;
            background: url(../../../images/components/tita-sidebar/mainMenuBack.png) no-repeat;   
            overflow: hidden;
            text-indent: 35px;
            position: absolute;
            margin-left: 7px;
            top:0px;
            left:5px;
            opacity: 0;
            background-size: 145px 100%; 
            background-position: -4px;
            -webkit-transition: top 0.2s linear, line-height 0.2s linear, text-indent 0.2s linear, opacity 0.2s linear, color 0.2s linear;
            -moz-transition: top 0.2s linear, line-height 0.2s linear, text-indent 0.2s linear, opacity 0.2s linear, color 0.2s linear;
            -ms-transition: top 0.2s linear, line-height 0.2s linear, text-indent 0.2s linear, opacity 0.2s linear, color 0.2s linear;
            -o-transition: top 0.2s linear, line-height 0.2s linear, text-indent 0.2s linear, opacity 0.2s linear, color 0.2s linear;
            transition: top 0.2s linear, line-height 0.2s linear, text-indent 0.2s linear, opacity 0.2s linear, color 0.2s linear;
            .list-1st-li{
                width: 100%;
                .bg-highlight {
                    background-color:rgba(29,134,240,0.1)!important;
                    color:#1D86F0  !important; 
                }
                .list-1st-a {
                    height: 27px;
                    display: flex;
                    color: #33383D;
                    line-height: 27px;
                    margin:6px 0;
                    .sd-icon-before{
                        font-size: 15px;
                        margin: 6px 0 0 17px;
                        position: relative;
                        left: -37px;
                        &::defore{
                            color: #99BBD7 !important
                        }
                    }
                    &:hover{
                        color: #1D86F0
                    }
                    .text{
                        font-size: 12px;
                        height: 27px;
                        padding-left: 6px;
                        line-height: 29px;
                        max-width: 120px;
                    }
                }
            }
            &-bottomicon{
                position: absolute;
                display: inline-block;
                text-align: left;
                width: 30px;
                left: -30px;
                color: #33383D;
                font-size: 14px;
                bottom: 5px;
            }
        }
        .guanliBack{
            color:#4F73FF
        }
        .openSup{
            color:#0CC991
        }
        .guanliMess{
            color:#8475FF;
        }
        }
        .list-narrow-static-extend {
            .list-narrow-wrapper{
                bottom:0px;
                top: auto!important;
            }
           
        }
        .list-1st-li{
            width: 200px;
            line-height:44px;
            background:rgba(black,0);
            .list-1st-a{
                position:relative;
                z-index: 9;
                &:hover{
                    color:$IE8Color095;
                    color:rgba(white,0.95);
                    @include transition((color .3s $Linear,background-color .1s $Linear .2s));
                }
            }
        }
        .list-1st-a{
            display:block;
            width:100%;
            height:44px;
            cursor: pointer;
            color:$IE8Color06;
            color:rgba(white,0.7);
        }
        .sd-icon-before{
            display:block;
            float:left;
            width:18px;
            height:18px;
            margin-top: 13px;
            margin-left:15px;
            font-size: 16px; 
        }
        .text{
            display:block;
            float:left;
            padding-left:7px;
            font-family:$font-famliy;
            overflow: hidden;
            white-space: nowrap;
            // text-overflow: ellipsis;
            max-width: 60px;
        }
        .list-2sd-ul{
            background:#00508A\9;
            background: rgba(black,0.1);
        }
        .list-2sd-li{
            display:block;
            height:34px;
            line-height:34px;
            text-indent: 70px;
            font-family:$font-famliy;
            color:$IE8Color06;
            color:rgba(white,0.7); 
            position:relative;
            z-index:8;
            @include transition((color .3s $Linear ));
            &:hover{
                color:$IE8Color095;
                color:rgba(white,0.95);
                @include transition((color .3s $Linear ));
            }
        }
        //add this style to fix chrome53 z-index:-1 
        .bg-slider-region{
            position:absolute;
            z-index:6;
        }
        .bg-slider{
            width:200px;
            background-color:#004f9e;
            position:absolute;
            visibility:visible;
            opacity:1;
            left:0;
            z-index: -1;

            top:0;
            height:44px;
            
            -webkit-transform:translate3d(0,0,0);
            -moz-transform:translate3d(0,0,0);
            -ms-transform:translate3d(0,0,0);
            -o-transform:translate3d(0,0,0);
            transform:translate3d(0,0,0);

            // -webkit-transition:top 3s $Ease,height 3s $Ease ,-webkit-transform 3s $Ease;
            // -moz-transition:top 3s $Ease,height 3s $Ease ,-moz-transform 3s $Ease;
            // -ms-transition:top 3s $Ease,height 3s $Ease ,-ms-transform 3s $Ease;
            // -o-transition:top 3s $Ease,height 3s $Ease ,-ms-transform 3s $Ease;
            // transition:top 3s $Ease,height 3s $Ease ,transform 3s $Ease;

            -webkit-transition:top .3s $Ease,height .3s $Ease ,-webkit-transform .3s $Ease;
            -moz-transition:top .3s $Ease,height .3s $Ease ,-moz-transform .3s $Ease;
            -ms-transition:top .3s $Ease,height .3s $Ease ,-ms-transform .3s $Ease;
            -o-transition:top .3s $Ease,height .3s $Ease ,-ms-transform .3s $Ease;
            transition:top .3s $Ease,height .3s $Ease ,transform .3s $Ease;
        }
        .silder-hidden{
            opacity:0;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
        }
        .bg-highlight{
            background-color:rgba(0,0,0,.2);
            color:$IE8Color095;
            color:rgba(white,0.95);
            // @include transition((background-color 0s linear 0s!important))
        }
        .red-remind-count {
            display: none;
            min-width: 8px;
            max-width: 22px;
            padding: 0 5px;
            border-radius: 18px;
            background: #fe5042;
            margin-left: 5px;
            line-height: 14px;
            color: #fff;
            font: 12px/18px arial;
        }
        .sd-has-new-message {
            display: inline-block;
        }
        .red-remind{
            position: relative;
            top: -20px;
            left: 14px;
            width: 7px;
            height: 7px;
            background: #fe5042;
            overflow: hidden;
            color: #fff;
            -webkit-border-radius: 7px;
            -moz-border-radius: 7px;
            border-radius: 7px;
            display: none;
        }
        .new-tip{
            background: url(../../../images/components/iTalent-sidebar/svg/new-2.png) no-repeat;
            position: relative;
            top:-25px;
            left:6px;
            width: 25px;
            height: 18px;
            display: none;
        }
        .mult-new-tip{
            position: absolute;
            left: 40px;
            top: 0;
        }
        .sd-new-message{
            .red-remind{
                display: block !important;
            }
        }
        .sd-update-tip{
            .new-tip{
                display: block !important;
            }
        }
        .sd-icon-after{
            width:16px;
            height:16px;
            float: right;
            margin-right:10px;
            margin-top:14px;
            @include svgPath("icons-sys-arrowleftM7-nomal");
            background-image: url(../../../images/components/iTalent-sidebar/svg/ie-arrow-1.png)\9;
            background-position: 5px 2px;
            -webkit-transform:rotateZ(180deg);
            -moz-transform:rotateZ(180deg);
            -ms-transform:rotateZ(180deg);
            -o-transform:rotateZ(180deg);
            transform:rotateZ(180deg);
            @include transition(transform .3s $Ease);
        }
       .open{
            .sd-icon-after{
                 -webkit-transform:rotateZ(-90deg);
                -moz-transform:rotateZ(-90deg);
                -ms-transform:rotateZ(-90deg);
                -o-transform:rotateZ(-90deg);
                transform:rotateZ(-90deg);
                background-image: url(../../../images/components/iTalent-sidebar/svg/ie-arrow-2.png)\9;

            }
        }
    }
//宽屏样式
    .page-spread-layout{
        width:200px;
        @include transition((width .3s $Linear ));
        .text{
            text-indent:0px;
            opacity: 1;
            @include transition((text-indent .3s $Linear,opacity .3s $Linear ));
            max-width: 60px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        .list-2sd-li{
            overflow:hidden;
            text-indent: 35px;
            line-height: 0px;
            height:0;
            opacity:0;
            @include transition((height .2s $Linear,line-height .2s $Linear,text-indent .2s $Linear,opacity .2s $Linear,color .2s $Linear ));
        }
        .has-sub-list.open{
            .list-1st-a{
                background-color:#00508A\9;
                background-color:rgba(black,0.1);
                @include transition((background-color 0s $Ease,color .3s $Ease !important));
            }
            .list-2sd-li{
                text-indent: 46px;
                line-height:34px;
                height:34px;
                opacity:1;
            }
            .ani-item-0{ @include transition((text-indent .2s $Ease .08s,line-height .2s $Ease .08s,height .2s $Ease ,color .2s $Ease ,opacity .1s $Ease .08s))}
            .ani-item-1{ @include transition((text-indent .2s $Ease .11s,line-height .2s $Ease .11s,height .2s $Ease ,color .2s $Ease ,opacity .1s $Ease .11s))}
            .ani-item-2{ @include transition((text-indent .2s $Ease .14s,line-height .2s $Ease .14s,height .2s $Ease ,color .2s $Ease ,opacity .1s $Ease .14s))}
            .ani-item-3{ @include transition((text-indent .2s $Ease .17s,line-height .2s $Ease .17s,height .2s $Ease ,color .2s $Ease ,opacity .1s $Ease .17s))}
            .ani-item-4{ @include transition((text-indent .2s $Ease .20s,line-height .2s $Ease .20s,height .2s $Ease ,color .2s $Ease ,opacity .1s $Ease .20s))}
            .ani-item-5{ @include transition((text-indent .2s $Ease .23s,line-height .2s $Ease .23s,height .2s $Ease ,color .2s $Ease ,opacity .1s $Ease .23s))}
            .ani-item-6{ @include transition((text-indent .2s $Ease .26s,line-height .2s $Ease .26s,height .2s $Ease ,color .2s $Ease ,opacity .1s $Ease .26s))}
            .ani-item-7{ @include transition((text-indent .2s $Ease .29s,line-height .2s $Ease .29s,height .2s $Ease ,color .2s $Ease ,opacity .1s $Ease .29s))}
            .ani-item-8{ @include transition((text-indent .2s $Ease .32s,line-height .2s $Ease .32s,height .2s $Ease ,color .2s $Ease ,opacity .1s $Ease .32s))}
            .ani-item-9{ @include transition((text-indent .2s $Ease .35s,line-height .2s $Ease .35s,height .2s $Ease ,color .2s $Ease ,opacity .1s $Ease .35s))}
            .ani-item-10{ @include transition((text-indent .2s $Ease .38s,line-height .2s $Ease .38s,height .2s $Ease ,color .2s $Ease ,opacity .1s $Ease .38s))}
            .ani-item-11{ @include transition((text-indent .2s $Ease .41s,line-height .2s $Ease .41s,height .2s $Ease ,color .2s $Ease ,opacity .1s $Ease .41s))}
            .ani-item-12{ @include transition((text-indent .2s $Ease .44s,line-height .2s $Ease .44s,height .2s $Ease ,color .2s $Ease ,opacity .1s $Ease .44s))}
            .ani-item-13{ @include transition((text-indent .2s $Ease .47s,line-height .2s $Ease .47s,height .2s $Ease ,color .2s $Ease ,opacity .1s $Ease .47s))}
            .ani-item-14{ @include transition((text-indent .2s $Ease .50s,line-height .2s $Ease .50s,height .2s $Ease ,color .2s $Ease ,opacity .1s $Ease .50s))}
            .ani-item-15{ @include transition((text-indent .2s $Ease .53s,line-height .2s $Ease .53s,height .2s $Ease ,color .2s $Ease ,opacity .1s $Ease .53s))}
            .ani-item-16{ @include transition((text-indent .2s $Ease .56s,line-height .2s $Ease .56s,height .2s $Ease ,color .2s $Ease ,opacity .1s $Ease .56s))}
            .ani-item-17{ @include transition((text-indent .2s $Ease .59s,line-height .2s $Ease .59s,height .2s $Ease ,color .2s $Ease ,opacity .1s $Ease .59s))}
            .ani-item-18{ @include transition((text-indent .2s $Ease .62s,line-height .2s $Ease .62s,height .2s $Ease ,color .2s $Ease ,opacity .1s $Ease .62s))}
            .ani-item-19{ @include transition((text-indent .2s $Ease .65s,line-height .2s $Ease .65s,height .2s $Ease ,color .2s $Ease ,opacity .1s $Ease .65s))}
        }
    }
//窄屏样式
    .page-norrow-layout{
        width:50px;
        @include transition((width .3s $Linear ));
        .text{
            text-indent:30px;
            opacity: 0;
            @include transition((text-indent .3s $Linear,opacity .3s $Linear ));
        }
        .list-2sd-li{
            display:none;
        }
        .has-sub-list .bg-highlight.list-1st-a{
            &:hover{
                background-color: transparent!important;
            }
            background-color: transparent!important;
            @include transition((background-color .3s $Linear .3s ));
        }
        .list-1st-li .bg-highlight{
            background-color: transparent;
            @include transition((background-color .1s $Linear .3s ));
        }
    }

.page-sidebar-wrapper{ 
    .slimScrollBar{
        width:6px!important;
        @include transition((width .2s $Linear));
    }
    .slimScrollBar:hover{
        width:10px!important;
        @include transition((width .2s $Linear));
        right:3px!important;
    }
    .slimScrollRail{
        @include transition((width .2s $Linear));
    }
}
.page-sidebar-wrapper{
    .shadow-node-top{
        height:5px;
        position: absolute;
        top: 50px;
        width: 100%;
        z-index: 31;
    }
    .shadow-node-bottom{
        height:5px;
        width: 100%;
        position: absolute;
        display: none;
    }
    .bottom-shadow{
        display: none;
        box-shadow: 0 -2px 4px 0px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 -2px 4px 0px rgba(0, 0, 0, 0.2);
        // border-bottom: 1px solid #004170 \0;chrome不显示，ie显示，出现一道线，不好看，去掉
    }
    .top-shadow{
        box-shadow: 0 2px 4px 0px rgba(0,0,0,0.2);
        -webkit-box-shadow: 0 2px 4px 0px rgba(0,0,0,0.2);
        -moz-box-shadow: 0 2px 4px 0px rgba(0,0,0,0.2);
        border-top:1px solid #004170\0;
    }
}