/* ======== 페이지 헤더 ======== */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 55px;
  padding: 0 20px;
  background-color: transparent;
  z-index: 20;
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  align-items: center;
  background-color: #fff;
}
.header .hd-tit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.header .left {
  background: url(../img/back.png) no-repeat center/cover;
  width: 22px;
  height: 36px;
}
.header .left.no_left {
  background: none;
}

/* ======== 바텀네비게이션 ======== */
.bt_nav {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: #fff;
  box-shadow: 2px -3px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  padding: 0px 16px;
  z-index: 10;
}
.bt_nav .nav_con {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 15px 0;
}
.bt_nav .nav_con i {
  width: 25px;
  height: 25px;
  display: block;
}
.bt_nav .nav_con i.home {
  background: url(../img/nav1.png) no-repeat center/contain;
}
.bt_nav .nav_con.on i.home {
  background: url(../img/nav1_on.png) no-repeat center/contain;
}
.bt_nav .nav_con i.search {
  background: url(../img/nav2.png) no-repeat center/contain;
}
.bt_nav .nav_con.on i.search {
  background: url(../img/nav2_on.png) no-repeat center/contain;
}
.bt_nav .nav_con i.map {
  background: url(../img/nav3.png) no-repeat center/contain;
}
.bt_nav .nav_con.on i.map {
  background: url(../img/nav3_on.png) no-repeat center/contain;
}
.bt_nav .nav_con i.commu {
  background: url(../img/nav4.png) no-repeat center/contain;
}
.bt_nav .nav_con.on i.commu {
  background: url(../img/nav4_on.png) no-repeat center/contain;
}
.bt_nav .nav_con i.my {
  background: url(../img/nav5.png) no-repeat center/contain;
}
.bt_nav .nav_con.on i.my {
  background: url(../img/nav5_on.png) no-repeat center/contain;
}
.bt_nav .nav_con span {
  font-size: 12px;
  color: #777;
}
.bt_nav .nav_con.on span {
  color: var(--primary-color);
}
/* .bt_nav .nav_con.on {border-top: 2px solid #573CFA;} */

.pc-header {
  display: none;
}

/* -------- 320px -------- */
@media screen and (min-width: 320px) {
}