/* ========== 側邊主框架 ========== */
 .app_menu {
    position: fixed;
    top: 100px;
    left: 0;
    width: 120px;
    /* min-width: 120px; */
    height: calc(100vh - 100px);
    background: #fff;
    /* color: #048080; */
    z-index: 500;
    overflow-y: auto;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    padding: 24px 7px 128px;
    box-sizing: border-box;
    transition: all .5s ease;
}

.app_menu::-webkit-scrollbar {
    display: none;
}

.user_nav_group {
    display: none;
}

.nav_group {
    width: 100%;
}

.nav_group+.nav_group {
    margin-top: 24px;
    border-top: 1px solid #ccc;
    padding-top: 16px;
}

.nav_group .nav_title {
    margin-bottom: 16px;
    padding-left: 8px;
    color: #6a6a6a;
}

.nav_group li {
    width: 100%;
    height: 32px;
    border-radius: 4px;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.menu_list li:not(.menu_sub) a {
    display: block;
    height: 100%;
    padding-left: 8px;
    padding-right: 8px;
    /* line-height: 1.8; */
    color: #6a6a6a;
}

.menu_list li a.menu_disabled {
    color: #bebebe;
}

.menu_list li:not(.menu_sub):hover {
    background-color: var(--main-primary-color);
    box-shadow: 0 3px 6px 0 rgba(53, 155, 155, 0.16);
}

.menu_list li:not(.menu_sub).active {
    background-color: var(--main-primary-color);
    box-shadow: var(--primary-box-shadow);
}

.menu_list li:hover a,
.menu_list li.active a {
    color: #fff;
}

.menu_list li .menu_title {
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    word-spacing: 28px;
}

.menu_list li .menu_title::before {
    content: "";
    margin-right: 8px;
    width: 16px;
    height: 16px;
}

.menu_list .menu_home .menu_title::before {
    content: url("../../../../images/components/menu/aside_menu/ic_home_gy_16.svg");
}

.menu_list .menu_accountbooks .menu_title::before {
    content: url("../../../../images/components/menu/aside_menu/ic_accountbooks_gy_16.svg");
}

.menu_list .menu_subpoena .menu_title::before {
    content: url("../../../../images/components/menu/aside_menu/ic_subpoena_gy_16.svg");
}

.menu_list .menu_funds .menu_title::before {
    content: url("../../../../images/components/menu/aside_menu/ic_funds_gy_16.svg");
}

.menu_list .menu_assets .menu_title::before {
    content: url("../../../../images/components/menu/aside_menu/ic_assets_gy_16.svg");
}

.menu_list .menu_reports .menu_title::before {
    content: url("../../../../images/components/menu/aside_menu/ic_reports_gy_16.svg");
}

.menu_list .menu_labors .menu_title::before {
    content: url("../../../../images/components/menu/aside_menu/ic_labors_gy_16.svg");
}

.menu_list .menu_salarys .menu_title::before {
    content: url("../../../../images/components/menu/aside_menu/ic_salary_gy_16.svg");
}

.menu_list .menu_returns .menu_title::before {
    content: url("../../../../images/components/menu/aside_menu/ic_returns_gy_16.svg");
}

.menu_list .menu_subjects .menu_title::before {
    content: url("../../../../images/components/menu/aside_menu/ic_subjects_gy_16.svg");
}

.menu_list .menu_setting .menu_title::before {
    content: url("../../../../images/components/menu/aside_menu/ic_setting_gy_16.svg");
}

.menu_list .menu_module .menu_title::before {
    content: url("../../../../images/components/menu/aside_menu/ic_module_gy_16.svg");
}

.menu_list .menu_module.menu_disabled .menu_title::before {
    content: url("../../../../images/components/menu/aside_menu/ic_module_dis_16.svg");
}

.menu_list .menu_record .menu_title::before{
    content: url("../../../../images/components/menu/aside_menu/ic_record_b_16.svg");
}

.menu_list .menu_buy .menu_title::before{
    content: url("../../../../images/components/menu/aside_menu/ic_buy_b_16.svg");
}

.menu_list li:not(.menu_record):hover .menu_title::before,
.menu_list li:not(.menu_record).active .menu_title::before {
    filter: brightness(0) invert(100%);
}

.menu_reference li {
    margin-bottom: 16px;
}

.menu_reference a {
    display: inline-block;
    width: 100%;
}

.menu_list li.menu_sub {
    border-radius: 8px;
}

.menu_list li.menu_sub a{
    width: 100%;
    padding: 6px 8px;
}

.menu_list li.menu_sub a:active {
    transform: scale(0.98);
}

/* 購買 */
.menu_list li.menu_record a{
    background-color: #ffe607;
    color: #285ee4;
    border: 1px solid #ffe607;
}

.menu_list li.menu_record a:hover{
    background-color: #ecd400;
    border-color: #ecd400;
}

.menu_list li.menu_record a:active{
    background-color: #d2bd00;
    border-color: #d2bd00;
}

.menu_list li.menu_record.active a {
    background-color: #ecd400;
    color: #285ee4;
    border-color: #ecd400;
}

/* 訂閱紀錄 */
.menu_list li.menu_buy a:hover{
    background-color: #285ee4;
    border-color: #285ee4;
}

.menu_list li.menu_buy a:active{
    background-color: #2e4a8f;
    border-color: #2e4a8f;
}

.menu_list li.menu_buy.active a {
    background-color: #285ee4;
    color: #fff;
    border-color: #285ee4;
}

.nav_reference_group {
    display: none;
}

.nav_group.nav_reference_group li {
    height: 72px;
    margin-bottom: 24px;

}

.nav_group.nav_reference_group li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #6a6a6a;
}


.fixed_aside_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 120px;
    height: 128px;
    background: #fff;
    z-index: 505;
    padding: 0 7px 24px;
    transition: all .5s ease;
}

.fixed_aside_footer .nav_group {
    padding-top: 24px;
    border-top: 1px solid #ccc;
}

.fixed_aside_footer .nav_group li{
    margin-bottom: 16px;
}


@media screen and (max-width:1280px) {

    .nav_reference_group {
        display: block;
    }

    .notify-count .count {
        right: 28px;
    }
}

@media screen and (max-width:1024px) {
     .app_menu {
        position: fixed;
        left: -180px;
        width: 180px;
    }

    .open .app_menu {
        left: 0px;
    }

    .fixed_aside_footer {
        position: fixed;
        left: -180px;
        width: 180px;
    }

    .open .fixed_aside_footer {
        left: 0px;
    }

    .notify-count .count {
        right: 56px;
    }

    .user_nav_group {
        display: block;
    }

    .user_nav_group .menu_user {
        margin-bottom: 24px;
        border-bottom: 1px solid #ccc;
        padding-bottom: 16px;
        position: relative;
    }

    .menu_user_content {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: var(--main-primary-color);
        cursor: pointer;

    }

    .menu_user_content .user_name {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        /* flex-wrap: nowrap; */
    }

    .menu_user_content .user_name::after {
        content: url("../../../../images/components/btn_type/slk_down_b_30.svg");
        display: inline-block;
        transform: rotate(0deg);
        transition: transform 0.3s ease; 
    }

    .menu_user_content.active .user_name::after {
        transform: rotate(180deg);
    }

    .navbar-dropdown_mobile {
        width: 160px;
        /* max-width: 130px;
        width: 100%; */
        position: absolute;
        right: 0;
        background: #fff;
        border: 2px solid var(--main-primary-color);
        border-radius: 8px;
        box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.25);
        display: none;
        z-index: 1;
        overflow: hidden;
    }

    .navbar-dropdown_mobile li a {
        display: block;
        color: var(--main-primary-color);
        font-size: 18px;
        font-weight: bold;
        padding: 12px 8px;
    }

    .navbar-dropdown_mobile li+li {
        border-top: 1px solid var(--main-primary-color);
    }

    .navbar-dropdown_mobile li:hover,
    .navbar-dropdown_mobile li.active {
    background: #ddd;
    }

    .navbar-dropdown_mobile li:first-child:hover,
    .navbar-dropdown_mobile li:first-child.active{
    border-radius: 6px 6px 0 0;
    }

    .navbar-dropdown_mobile li:last-child:hover,
    .navbar-dropdown_mobile li:last-child.active{
        border-radius: 0 0 6px 6px;
    }
}