:root {
    --header-height: 40px;
    --header-margin-bottom: 40px;
    --footer-height: 250px;

    --padding-horizontal: 16px;
}

/* body{background: #333;color: #eee;} */

/* header */
header{ z-index: 999; width: 100%;height: var(--header-height);display: flex;align-items: center;}
header .h_inner{position: fixed; height: var(--header-height); background: #313131; padding: 0 var(--padding-horizontal); width: 100%; display: flex;align-items: center;justify-content: space-between;}
header .logo{user-select: none; height: 20px;}
header .logo img{height: 100%;object-fit: contain;object-position: center;}
.ham_btn{cursor: pointer; width: 25px;height: 25px; display: flex;flex-direction: column;align-items: center;justify-content: space-evenly;}
.ham_btn span{box-shadow: 0 0 10px #00000027; transform-origin: center; position: relative;left: 0; transition: .2s; width: 100%;height: 3px;background: #666;border-radius: 20px;}
.ham_btn span:nth-child(2){background: #b1b1b1;}
.ham_btn:hover span:nth-child(2){left: 3px;}

/* ham menu */
.ham_bbx{opacity: 0; pointer-events: none; transition: .3s; position: fixed;width: 100vw;height: 100vh;top: 0;left: 0;z-index: 1000;}
.ham_bbx.on{opacity: 1;pointer-events: all;}
body:has(.ham_bbx.on){overflow: hidden;}
.ham_bbx .bg{width: 100%;height: 100%;z-index: 1;position: absolute;top: 0;left: 0;position: absolute;background: #00000033;}
.ham_bbx .ham_header{user-select: none; display: flex;align-items: center;justify-content: space-between;}
.ham_bbx .logo{height: 20px;display: flex;}
.ham_bbx .logo img{height: 100%;object-fit: contain;object-position: center;}
.ham_bbx .menu_bbx{box-shadow: 0 0 10px #00000020; transition: .3s; display: flex;flex-direction: column;gap: 20px; padding: 20px; z-index: 2; position: absolute;background: #fff;max-width: 100%; width: 300px; height: 100%;top: 0;right: -50px;}
.ham_bbx.on .menu_bbx{right: 0;}
.ham_bbx .menu_bx{height: 100%;overflow-y: auto; display: flex;flex-direction: column;user-select: none;}
.ham_bbx .menu{border-top: 1px solid #eee; padding: 10px 0; display: flex;align-items: center;gap: 10px;}
.ham_bbx .menu:first-child{border-top: none;}
.ham_bbx .menu .icon{width: 20px;height: 20px;}
.ham_bbx .menu .icon img{width: 100%;height: 100%;object-fit: contain;object-position: center;}
.ham_bbx .menu .txt{font-size: 16px;font-weight: 500;color: #333;}
/* .ham_bbx.on span:nth-child(1){top: 7px; left: 1px;transform: rotate(45deg);}
.ham_bbx.on span:nth-child(2){left: 10px;opacity: 0;}
.ham_bbx.on span:nth-child(3){top: -7px; transform: rotate(-45deg);} */

/* main */
main{}
.m_{width: 100%;min-height: calc(100vh - var(--header-height) - var(--header-margin-bottom) - var(--footer-height));}
.m_ .m_inner{width: 1200px;max-width: calc(100% - var(--padding-horizontal)*2);margin: 0 auto;}

/* footer */
footer{height: var(--footer-height);padding: 0 var(--padding-horizontal);}