/* ======== 페이지 헤더 ======== */
header {padding: 0 20px; position: fixed; top: 0; left: 0; width: 100%; height: 56px;  background-color: #fff !important; z-index: 3;font-family: 'Pretendard'; border-bottom: 1px solid #f1f1f1;}
header .hd_left {position: absolute; top: 50%; left: 20px; width: 34px; aspect-ratio: 1; transform: translateY(-50%); background: url(../img/back.png) no-repeat center/contain;}
header .hd_left.back-wh {position: absolute; top: 50%; left: 20px; width: 34px; aspect-ratio: 1; transform: translateY(-50%); background: url(../img/back_wh.png) no-repeat center/contain;}
header .hd_right {position: absolute; top: 50%; right: 20px; width: 18px; aspect-ratio: 1; transform: translateY(-50%);}
header .hd_tit {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
header .hd_tit span {font-size: 18px; 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.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;}

header.main-header { display: flex; align-items: center; justify-content: space-between; height: 70px; border-bottom: none;}
header .logo {width: 166px;}
header .hd-nav {display: flex;}
header .hd-nav li {width: 40px; height: 40px;}
header .hd-nav li.alarm {background: url(../img/alarm.png) no-repeat center/cover;}
header .hd-nav li.alarm.on {background: url(../img/alarm_on.png) no-repeat center/cover;}
header .hd-nav li.menu {background: url(../img/menu.png) no-repeat center/cover;}
header .hd_right.close {background: url(../img/close.png) no-repeat center/cover;}
.menu-wrap header .hd_left {position: absolute; top: 50%; left: 20px; width: 34px; aspect-ratio: 1; transform: translateY(-50%); background: url(../img/back_wh.png) no-repeat center/contain;}




/* ======== 바텀네비게이션 ======== */
.bt_nav {position: fixed; width: 100%; bottom: 0; left: 0; background-color: #fff; border-radius: 20px 20px 0 0; box-shadow: 2px -3px 4px rgba(0, 0, 0, .05); display: flex; padding: 20px;}
.bt_nav .nav_con {width: 25%; display: flex; flex-direction: column; align-items: center; gap: 13px;}
.bt_nav .nav_con i {width: 24px; height: 24px; display: block;}
.bt_nav .nav_con i.nav01 {background: url(../img/nav01.png) no-repeat center/contain;}
.bt_nav .nav_con.on i.nav01 {background: url(../img/nav01_on.png) no-repeat center/contain;}
.bt_nav .nav_con i.nav02 {background: url(../img/nav02.png) no-repeat center/contain;}
.bt_nav .nav_con.on i.nav02 {background: url(../img/nav02_on.png) no-repeat center/contain;}
.bt_nav .nav_con i.nav03 {background: url(../img/nav03.png) no-repeat center/contain;}
.bt_nav .nav_con.on i.nav03 {background: url(../img/nav03_on.png) no-repeat center/contain;}
.bt_nav .nav_con i.nav04 {background: url(../img/nav04.png) no-repeat center/contain;}
.bt_nav .nav_con.nav_my {position: relative;}
.bt_nav .nav_con.nav_my em {width: 24px; height: 24px;}
.bt_nav .nav_con.nav_my i {width: 60px; height: 60px; position: absolute; left: 50%; top: -33px; transform: translateX(-50%); z-index: 2;}
.bt_nav .nav_con.nav_my::after {content: ""; display: block; width: 80px; height: 80px; background-color: #fff; border-radius: 50%; position: absolute; left: 50%; top: -43px; transform: translateX(-50%); z-index: -1; box-shadow: 0 -3px 11px rgba(0, 0, 0, .1);}
.bt_nav .nav_con.nav_my::before {content: ""; display: block; width: 100%; height: 100%; background-color: #fff; position: absolute; top: -20px; left: 0; z-index: 1; border-radius: 0 20px 0 0;}

.bt_nav .nav_con span {font-size: 16px; color: #666; font-weight: 600;}
.bt_nav .nav_con.on span {color: #007DF2;}

/* ======== 인트로 ======== */

.intro {background-color: #007df2; height: 100vh; position: relative; display: flex; align-items: center; justify-content: center;}
.intro .in-logo {width: 217px;}
.intro .bt-logo {position: absolute; display: flex; flex-direction: column; gap: 5px; align-items: center; left: 50%; bottom: 50px; transform: translateX(-50%);}
.intro .bt-logo p {font-size: 16px; font-weight: bolder; color: rgba(255, 255, 255, .8); width: fit-content;}

/* -------- 380px -------- */
@media screen and (max-width: 380px) {
    .bt_nav .nav_con.nav_my::before {width: 137%; left: -16px;}
}