/* pull-to-refresh 방지 */
html,body {overscroll-behavior-y: contain;}


#wrap {
    padding-bottom: 6.5rem;
}

/* 헤더 */
header {border-bottom: 1px solid #ddd;background-color: #fff;position: fixed;top: 0;left: 0;width: 100%;z-index: 99;}
header .logo_wrap {display: flex;justify-content: space-between;align-items: center;height: 6rem;padding: 0 2rem;position: relative;}
header .logo_wrap .myrabbit {width: 3rem;height: 3rem;}
header .logo_wrap .myrabbit img {width: 100%;}
header .logo_wrap .logo img {display: block;width:19rem;}
header .logo_wrap .menu img {display: block;width: 2.5rem;padding: 1.5rem 0;}
header .logo_wrap .prev {background: url("../img/prev.png") no-repeat 0 center/1rem; height: 4rem; width: 2.5rem;}
header .logo_wrap h1 {font-size: 2rem; font-weight: bold;color: 000;}
@media (max-width:310px){
    header .logo_wrap .myrabbit {display: none;}
    .head_wrap div {display: none;}
}

/* 햄버거메뉴 */
.sub_wrap {overflow-y: scroll;position: fixed;
    left: 100%;top: 0;
    z-index: 999;
    background: #fff;
    height: 100vh;width: 100%;
    transition: 0.5s cubic-bezier(0.23, 1, 0.320, 1);
}

.sub_wrap .head_wrap {display: flex;justify-content: space-between;align-items: center;padding:0 2rem;
    position: fixed;
    left:100%;top: 0;
    z-index: 1000; 
    background: #fff;
    height: 6rem; width: 100%; 
    border-bottom: 1px solid #ddd;
    transition: 0.5s cubic-bezier(0.23, 1, 0.320, 1);
}
.sub_wrap.on {left: 0;}
.sub_wrap.on .head_wrap {left: 0;}
.sub_wrap .head_wrap div {height: 3rem; width: 3rem;}
.sub_wrap .head_wrap > a > img {width: 19rem;height: 2rem;transform: translateY(.1rem);}
.sub_wrap .head_wrap .close {width: 2.5rem;height: 40%;background: url("../img/close.png") no-repeat center / 2rem;}




/* 햄버거메뉴 - 프로필 */
.profile {margin-top: 6rem; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.profile img {width: 7rem;margin:2rem 0 1rem 0 ;}
.profile a {border: 1px solid #ddd;padding: 1rem 1.5rem;font-size: 1.8rem;width: 50%; font-weight: 500; text-align: center;color: #222;}
.profile a.go_myrabbit em {color: #47bf47; font-size: inherit;}
.profile a.go_home {margin: .5rem 0 2rem 0;}


/* 햄버거메뉴 - 리스트 */
.menu_list_wrap {z-index: 999;}
.menu_list_wrap .item {border-top: .5rem solid #ddd;}
.menu_list_wrap .item p {font-weight: 900;font-size: 2rem;padding: 1.3rem; display: flex; align-items: center; color: #222;}
.menu_list_wrap .item p > img {width: 3rem; margin-right: .8rem;}
.menu_list_wrap .item ul li a {position: relative; font-size: 1.8rem;font-weight: bold; display: block;padding: 1rem 1rem 1rem 2rem;border-bottom: 1px solid #c2c2c2;letter-spacing: -.1rem;line-height: 1.4;}
.menu_list_wrap .item ul li:last-of-type a {border-bottom: none;}
.menu_list_wrap .item ul li a img {position: absolute; top: 50%; right:2rem; transform: translateY(-50%); height: 1.5rem;
}
.menu_list_wrap .square {border-top: .5rem solid #ddd;}
.menu_list_wrap .square p {font-weight: 900;font-size: 2rem;padding: 1.5rem 2rem;color: #222;}
.menu_list_wrap .square ul {display: flex; flex-wrap: wrap;gap: 1px; background-color: #ddd; border-top: #ddd;}
.menu_list_wrap .square ul li {width: calc((100% - 2px)/3); background-color: #f5f5f7;display: flex;justify-content: center; align-items: center; flex-direction: column;padding: 1rem 0;}
.menu_list_wrap .square ul li a {border-bottom: none; justify-content: center; text-align: center; flex-direction: column; font-size: 1.8rem; font-weight: bold;}
.menu_list_wrap .square ul li a img {display: block; width: 4rem; margin: 0 auto;padding-bottom: 1rem;}


/* page_title_wrap */
.page_title_wrap h1 {font-size: 0;}
.page_title_wrap h1 img {width: 100%;}


/* FOOTER */
footer {position: fixed;width: 100%;bottom: 0;background: #fff;z-index: 9;height: 6.5rem;box-shadow: 0 0 .1rem rgba(0, 0, 0, .3);}
footer ul {height: 100%;display: flex;justify-content: space-evenly;}
footer ul li {width: 25%;display: flex;align-items: center; position: relative;}
footer ul li a {display: flex;justify-content: center;align-items: center;flex-direction: column;text-align: center;width: 100%;height: 100%;line-height: 1.3;position: relative;color: #999;font-size: 1.4rem; font-weight: bold;}
footer ul li a img {width: 2.5rem;margin: .4rem 0;}
footer ul li.on a {color: #222;font-weight: bold;}