* {
    box-sizing: border-box
}

.navSticky_container {
    display: flex;
    align-items: center;
    position: fixed;
    height: 75px;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 9999
}

.navSticky_container:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    margin: auto;
    background: linear-gradient(to bottom,#374356 1%,#2d3544 100%);
    z-index: 1
}

.navSticky_item {
    font-size: 12px;
    color: #fff;
    flex: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 4;
    padding-bottom: 20px
}

.navSticky_item a {
    color: #fff;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-decoration: none
}

.navSticky_item i {
    position: relative;
    display: inline-block;
    width: 2.2em;
    height: 2.2em;
    margin-bottom: 2px;
    background-size: contain;
    top: 0;
    transition: .2s ease-in-out all
}

.navSticky_item.rule i {
    background-image: url(../images/icon_rule.svg)
}

.navSticky_item.index i {
    background-image: url(../images/icon_index.svg)
}

.navSticky_item.others i {
    background-image: url(../images/icon_others.svg)
}

.navSticky_item.active i {
    top: -8px
}

.navSticky_item.open.others ~ .navSticky2nd_mask {
    display: block
}

.navSticky_item.open.others ~ .navSticky2nd_wrapper {
    display: block
}

.navSticky_pose {
    width: 33.3%;
    position: absolute;
    height: 60px;
    top: -14px;
    background-image: url(../images/navigarion_mark.png);
    background-repeat: no-repeat;
    background-position: center top;
    z-index: 3;
    transition: .2s ease-in-out all
}

.navSticky_pose.index {
    left: 33.3%
}

.navSticky_pose.rule {
    left: 0
}

.navSticky_pose.others {
    left: 66.6%
}

.navSticky2nd_wrapper {
    display: none;
    position: absolute;
    bottom: 75px;
    width: 100%;
    z-index: 2
}

.navSticky2nd_container {
    width: 100%;
    border-radius: 8px 8px 0 0;
    background-color: #6C7076;
    padding: 12px 8px 20px;
    display: flex;
    align-items: center;
    /*justify-content:center;*/
    flex-wrap: wrap
}

.navSticky2nd_item {
    width: 33.3%;
    padding: 3px;
    font-size: 14px
}

.navSticky2nd_item a {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 2em;
    color: #374356;
    color: inherit;
    text-decoration: none;
    height: 32px
}

.navSticky2nd_item.active a {
    background-color: #f47c4d;
    color: #fff
}

.navSticky2nd_mask {
    display: none;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.6);
    margin: auto
}