@charset "utf-8";
/*  */
body.no_ani .ham_btn,
body.no_ani .main_bbx,
body.no_ani aside,
body.no_ani aside .aside{transition: none;}
body.no_ani aside,
body.no_ani .main_bbx{display: none;}
/*  */
.main_bbx{ position: absolute;top: 0;right: 0; transition: .3s; width: calc(100% - var(--sidebar-width));display: flex; flex-direction: column; min-height: 100vh; }
main{display: flex;min-height: 100vh;}
/*  */
main .m_header{gap: 12px; background: #444; display: flex; width: 100%;height: var(--m_header-height);display: flex;align-items: center;justify-content: center;}
main .m_h_content{overflow: unset; position: relative; cursor: pointer; transition: .3s; margin: 0; height: auto; width: 24px; aspect-ratio: 1/1; border-radius: 50%; background: #333; color: var(--accent-color); display: flex;align-items: center;justify-content: center;}
main .m_h_content.view{width: 0;height: 0; overflow: hidden;}
main .m_h_content.on{background: #777;}
main .m_h_content:hover{ transform: scale(1.11);}
main .m_h_content i,
main .m_h_content svg{width: 14px;aspect-ratio: 1/1;}
main .m_h_content .x_btn{transition: .2s; overflow: hidden; position: absolute;z-index: 2;right: 5px;top: 5px;width: 0; aspect-ratio: 1/1; border-radius: 50%;background: #666;}
main .m_h_content .x_btn:hover{transform: scale(1.1);}
main .m_h_content:hover .x_btn{width: 10px;right: 0;top: 0;}
main .m_h_content .x_btn::after{content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(45deg); transform-origin: center; width: 6px;height: 1px;background: #fff;}
main .m_h_content .x_btn::before{content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(-45deg); transform-origin: center; width: 6px;height: 1px;background: #fff;}
main:has(.m_h_content:nth-of-type(1):last-of-type) .m_h_content .x_btn {display: none;}
main:has(.m_h_content:nth-of-type(2)) .m_h_content .x_btn {display: block;}
/*  */
main .main_bx{width: 100%; height: calc(100vh - var(--m_header-height)); position: relative;display: flex;overflow-y: auto;}
main .main_bx iframe{width: 100%;height: 100%;position: absolute; top: 0;left: 0; display: flex; pointer-events: none;opacity: 0;}
main .main_bx iframe.on{z-index: 9; pointer-events: all;opacity: 1;}
/*  */
aside{z-index: 99; transition: .3s; position: absolute; left: 0; width: var(--sidebar-width); height: 100vh;}
aside .aside{left: 0; transition: .3s; position: relative; width: var(--sidebar-width); height: 100%; background: #444;display: flex;flex-direction: column;}
aside .s_header{padding: 20px 0; width: 100%;display: flex;align-items: center; justify-content: space-evenly;}
aside .copyright{color: #fff;font-size: 9px;padding: 6px 0;font-weight: 300;letter-spacing: .4px;}
aside .copyright .copyright_icon{color: var(--primary-color);}
/*  */
aside .profile{z-index: 3; position: relative; width: calc(50% - 40px); display: flex;align-items: center;justify-content: space-evenly;}
aside .profile::after{z-index: 2; content: '';display: block;width: 100%;height: 100%;top: 5px;right: 5px;background: var(--primary-color);position: absolute;}
aside .profile::before{z-index: 2; content: '';display: block;width: 100%;height: 100%;top: -5px;right: -5px;background: var(--accent-color);position: absolute;}
aside .profile img{width: 100%;aspect-ratio: 1/1; position: relative; z-index: 3;}
aside .status_bx{}
aside .status_bx .title{font-size: 24px;font-weight: bold;color: #fff;}
aside .side_menu_bbx{overflow: auto; width: 100%;height: 100%;display: flex;flex-direction: column; align-items: center;justify-content: space-between;}
aside .side_menu_bbx ul{width: 100%; padding: 0 10px;gap: 4px;display: flex;flex-direction: column;}
aside .side_menu_bbx ul li{font-weight: bold; user-select: none; width: 100%;display: flex;padding: 12px;transition: .2s;color: #fff;display: flex;align-items: center;gap: 12px;border-radius: 6px; cursor: pointer;}
aside .side_menu_bbx ul li:hover{background: #555;}
aside .side_menu_bbx ul li.on{background: #555; pointer-events: none;}
aside .side_menu_bbx ul li .icon{width: 18px; aspect-ratio: 1/1;display: flex;align-items: center;justify-content: center;}
aside .side_menu_bbx ul li .icon svg{width: 100%;height: 100%;object-fit: contain; object-position: center;}
/*  */
.ham_btn{transition: .3s; cursor: pointer; position: absolute;top: 4px;right: 4px;width: 21px; aspect-ratio: 1/1; display: flex;flex-direction: column;justify-content: space-around;}
.ham_btn span{position: relative; left: 0; transition: .2s; width: 100%;height: 3px;background: #fff;} 
.ham_btn>div{display: flex;align-items: center;gap: 4px;}
.ham_btn>div span{}
.ham_btn:hover span:nth-child(2){left: -2px;}
body.ham aside{width: 0;}
body.ham aside .aside{left: calc(-1 * var(--sidebar-width)); opacity: 0;}
body.ham .ham_btn{right: -28px; opacity: 1;}
body.ham .main_bbx{width: 100%;}
/*  */
@media (max-width: 1200px) { 
    aside { width: 0; } 
    aside .aside { left: calc(-1 * var(--sidebar-width)); opacity: 0; } 
    .ham_btn { right: -28px; width: 24px; opacity: 1; } 

    body.ham aside { left: 0; width: var(--sidebar-width); } 
    body.ham aside .aside { left: 0; width: var(--sidebar-width); opacity: 1; } 
    body.ham .ham_btn { right: 4px; opacity: 1; } 
    body.ham .main_bbx { width: calc(100% - var(--sidebar-width)); } 
}
/*  */
@media (max-width: 800px) { 
    aside{position: absolute;width: 100%;pointer-events: none;}
    aside .aside{left: 0;width: 100%;}
    body.ham aside{width: 100%;}
    body.ham aside .aside{width: 100%; pointer-events: all;}
    .main_bbx{width: 100%;}
    body.ham .main_bbx{width: 100%;}

    .ham_btn{right: 4px;pointer-events: all;}
}