:root {
    --header-height: 40px;
    --header-margin-bottom: var(--header-height);
    --footer-height: 40px;

    --padding-horizontal: 16px;
}

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

/* header */
header{ z-index: 9999; width: 100%;height: var(--header-height);display: flex;align-items: center;}
header .h_inner{backdrop-filter: 5px; z-index: 9999; position: fixed; height: var(--header-height); background: transparent; 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(--footer-height));}
.m_ .m_inner{width: 1200px;max-width: calc(100% - var(--padding-horizontal)*2);margin: 0 auto;}

/* footer */
footer{z-index: 9; position: relative; height: var(--footer-height);padding: 0 var(--padding-horizontal);}
footer .f_inner{height: 100%; display: flex; flex-wrap: wrap; align-items: center;justify-content: space-evenly; gap: 5px;}
footer .f_inner .p_t_bx{display: flex;align-items: center;gap: 10px;font-size: 14px; font-weight: 600;position: relative;}
footer .f_inner .p_t_bx a{position: relative;}
footer .f_inner .p_t_bx a::after{transition: .2s; content: ''; height: 2px; width: 0%; background: #808080; position: absolute; bottom: -2px; left: 50%; z-index: -1;}
footer .f_inner .p_t_bx a:hover::after{width: 100%;left: 0;}
footer .copyright{text-align: center;font-size: 12px;font-weight: 600;}

@media (max-width: 600px){
    /* footer{margin-top: 30px;} */
}

/* terms */
.terms_bx{word-break: keep-all;margin-bottom: 80px;}
.terms_bx .h1{font-size: 40px;font-weight: 600; margin-bottom: 80px;}
.terms_bx .h2{font-size: 24px;font-weight: 500;margin-top: 40px;}
.terms_bx .h3{font-size: 16px;font-weight: 400;margin-top: 20px;line-height: 1.4;}