@charset "utf-8";
.displaynone{display: none !important;}
html{background-color: #f7f7f7;}
#body{background-color: #f7f7f7;}

#wrap{width: 100%;max-width: 768px;margin: 0 auto;background-color: #fff;position: relative;box-shadow: 2px 2px 15px 0px rgba(0,0,0,0.1);}


/* header */
#header{position: fixed;top: 0;left: 0;right: 0;z-index: 1000;width: 100%;max-width: 768px;margin: 0 auto;background-color: #fff;}
#header .hd_inner{display: flex;align-items: center;justify-content: space-between;flex-wrap: nowrap;width: 100%;height: 80px;padding-left: 16px;padding-right: 16px;padding-bottom: 1px;position: relative;}
#header .hd_inner::after{content: '';display: block;width: 100%;height: 1px;background-color: #d9d9d9;position: absolute;left: 0;bottom: 0;right: 0;z-index: 99;}
#header #hd_logo{flex: 0 0 auto;}
#header #hd_logo > a{display: block;width: 160px;line-height: 0;}
#header #hd_logo > a > img{width: 100%;}

#header .member_util{flex: 0 0 auto;}
#header .member_util .btns_box{flex: 0 0 auto;display: flex;align-items: center;column-gap: 4px;}
#header .member_util .btns{flex: 0 0 auto;display: inline-flex;align-items: center;justify-content: center;height: 30px;padding: 0 10px;background-color: #fff;border: 1px solid #333;border-radius: 4px;}
#header .member_util .btns .btns_name{display: inline-block;font-size: 12px;font-weight: 400;line-height: 18px;color: #333;letter-spacing: -0.54px;}

#header .member_util .btns.btns_delete_token{background-color: #ed6726;border-color: #ed6726;}
#header .member_util .btns.btns_delete_token .btns_name{color: #fff;}

#header .member_util .btns.btns_extend_token{background-color: #1b9145;border-color: #1b9145;}
#header .member_util .btns.btns_extend_token .btns_name{color: #fff;}

#header .member_util .btns.btns_generate_token{background-color: #16469b;border-color: #16469b;}
#header .member_util .btns.btns_generate_token .btns_name{color: #fff;}

#header .member_util .time_display{flex: 0 0 auto;font-size: 16px;font-weight: 500;line-height: 24px;color: #333;}
@media (max-width: 600px){
    #header .hd_inner{height: 70px;padding-left: 10px;padding-right: 10px;}
    #header #hd_logo > a{width: 120px;}
    #header .member_util .btns{padding: 0 8px;}
}

/* containers */
#containers{width: 100%;min-height: calc(var(--wh) - var(--fth));padding-top: calc(var(--hdh) + 32px);padding-bottom: 48px;padding-left: 16px;padding-right: 16px;}
@media (max-width: 600px){
    
}


/* footer */
#footer{width: 100%;background-color: #f6f6f6;border-top: 1px solid #ddd;color: #333;}
#footer .ft_inner{padding: 32px 16px;box-sizing: border-box;}
#footer .ft_info_box{}
#footer .ft_info_line{display: flex;align-items: center;flex-wrap: nowrap;column-gap: 8px;}
#footer .ft_info_box .ft_info{font-size: 14px;font-weight: 400;line-height: 20px;color: #333;letter-spacing: -0.54px;}
#footer .ft_copyright{margin-top: 8px;font-size: 14px;font-weight: 400;line-height: 20px;color: #333;letter-spacing: -0.54px;}
#footer .admin_login_box{margin-top: 16px;}
#footer .admin_login_box .btns_adm{display: inline-block;height: 30px;padding: 0 16px;background-color: #333;border-radius: 8px;font-size: 12px;font-weight: 500;line-height: 30px;color: #fff;text-align: center;overflow: hidden;}