/* ======== 페이지 헤더 ======== */
header {padding: 30px 16px; border-bottom: 1px solid #f1f1f1; position: fixed; top: 0; left: 0; width: 100%;  background-color: #fff !important; z-index: 3;}
header .hd_left {position: absolute; top: 50%; left: 16px; width: 25px; aspect-ratio: 1; transform: translateY(-50%); background: url(../img/back2.png) no-repeat center/contain;}
header .hd_tit {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
header .hd_tit span {font-size: 16px; text-align: center; font-weight: 600;}
header .hd_tit i {display: block; width: 32px; aspect-ratio: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
header .hd_tit i.home {background: url(../img/tit-bg1.png) no-repeat center/contain;}
header .hd_tit i.match {background: url(../img/tit-bg02.png) no-repeat center/contain;}
header .hd_tit i.rank {background: url(../img/tit-bg3.png) no-repeat center/contain;}
header .hd_tit i.commu {background: url(../img/tit-bg4.png) no-repeat center/contain;}
header .hd_tit i.my {background: url(../img/tit-bg5.png) no-repeat center/contain;}
header .hd_tit i.alarm {background: url(../img/tit-bg6.png) no-repeat center/contain;}
header .hd_right {position: absolute; top: 50%; right: 16px; width: 25px; aspect-ratio: 1; transform: translateY(-50%);}
header .hd_right.close {background: url(../img/close.png) no-repeat center/contain;}
header .hd_right.setting {background: url(../img/admin2.png) no-repeat center/contain; width: 16px; height: 16px;}
header .hd_right.search {background: url(../img/search.png) no-repeat center/contain;}
header .hd_right.menu {background: url(../img/menu.png) no-repeat center/contain;}
header .hd_right.alarm {background: url(../img/alarm01.png) no-repeat center/contain;}
header .hd_right.alarm_on {background: url(../img/alarm01_on.png) no-repeat center/contain;}
header .hd_right.chat {background: url(../img/bar.png) no-repeat center/cover; width: 25px; height: 25px;}

header.no_left .hd_left {display: none;}
header.no_right .hd_right {display: none;}
header.no_both .hd_left, header.no_both .hd_right {display: none;}

.mb-n header {margin-bottom: 0;}

.wrap.profile header {margin-bottom: 0;}




/* ======== 바텀네비게이션 ======== */
.bt_nav {position: fixed; width: 100%; bottom: 0; left: 0; background-color: #f8f8f8; border-radius: 15px 15px 0 0; box-shadow: 2px -3px 4px rgba(0, 0, 0, .05); display: flex; padding: 15px 0;}
.bt_nav .nav_con {width: 20%; display: flex; flex-direction: column; align-items: center; gap: 4px;}
.bt_nav .nav_con i {width: 35px; height: 35px; display: block;}
.bt_nav .nav_con i.home {background: url(../img/nav_home.png) no-repeat center/contain;}
.bt_nav .nav_con.on i.home {background: url(../img/nav_home_on.png) no-repeat center/contain;}
.bt_nav .nav_con i.match {background: url(../img/nav_match.png) no-repeat center/contain;}
.bt_nav .nav_con.on i.match {background: url(../img/nav_match_on.png) no-repeat center/contain;}
.bt_nav .nav_con i.rank {background: url(../img/nav_rank.png) no-repeat center/contain;}
.bt_nav .nav_con.on i.rank {background: url(../img/nav_rank_on.png) no-repeat center/contain;}
.bt_nav .nav_con i.commu {background: url(../img/nav_commu.png) no-repeat center/contain;}
.bt_nav .nav_con.on i.commu {background: url(../img/nav_commu_on.png) no-repeat center/contain;}
.bt_nav .nav_con i.my {background: url(../img/nav_my.png) no-repeat center/contain;}
.bt_nav .nav_con.on i.my {background: url(../img/nav_my_on.png) no-repeat center/contain;}
.bt_nav .nav_con span {font-size: 12px; color: #828282;}
.bt_nav .nav_con.on span {color: #16854F;}