:root {
  --main-color: #00a0b6;
  --dark-main-color: #3C949A;
  --light-grey: #f1f1f1;
  --dark-grey: #545454;
  --star-color: #ffd700;
  --point-color: #FF6B64;
  --font-family: 'Nanum Barun Gothic', sans-serif;
  --tab-bar: #9E9E9E;
}

/* Tab Bar */
#tabBar {
  /* size */
  width: 100%;
  /* position */
  position: fixed;
  bottom: 0;
  /* background */
  background-color: #fff;
  /* box shadow */
  -webkit-box-shadow: 0px -4px 15px 2px rgb(0 0 0 / 10%);
  box-shadow: 0px -4px 15px 2px rgb(0 0 0 / 10%);
  /* padding */
  padding: 9px 0;
  /* z-index */
  z-index: 12000;
}

.tabBar_content {
  /* flex */
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* margin */
  margin: 0;
  /* list */
  list-style: none;
  /* padding */
  padding: 0;
}

.tabBar_content > li {
  /* size */
  width: 60px;
  /* position */
  position: relative;
}

.tabBar_content li a{
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


.mobile_tab_title {
  line-height: normal;
}

/* Non-Active */
:is(
    .tab_bar_home,
    .tab_bar_design,
    .tab_bar_community,
    .tab_bar_products,
    .tab_bar_myinfo
  )
  > a {
  /* font */
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: bold;
  color: var(--tab-bar);
  /* flex */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* Active */
:is(
    .tab_bar_home-active,
    .tab_bar_design-active,
    .tab_bar_community-active,
    .tab_bar_products-active,
    .tab_bar_myinfo-active,
    .tab_bar_gift-active,
    .tab_bar_diy-active    
  )
  > a {
  /* font */
  font-family: var(--font-family);
  font-size: 11px;
  color: var(--dark-main-color);
  font-weight: bold;
  /* flex */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* Icon style */
.tab_icon_style {
  /* size */
  width: 50px;
  height: 27px;
  /* margin */
  margin-top: 6px;
}

/* Home */
.tab_bar_home .home_icon {
  /* background */
  background: url(../img/icon/tab/home-off.png) no-repeat center/contain;
}

.tab_bar_home:hover .home_icon  {
  /* background */
  background: url(../img/icon/tab/home-on.png) no-repeat center/contain;
}
.tab_bar_home:hover a {
  color: var(--dark-main-color);
}

.tab_bar_home-active .home_icon {
  /* background */
  background: url(../img/icon/tab/home-on.png) no-repeat center/contain;
}

/* Design */
.tab_bar_design .design_icon {
  /* background */
  background: url(../img/icon/tab/design-off.png) no-repeat center/contain;
}
/* Design */
.tab_bar_design:hover .design_icon {
  /* background */
  background: url(../img/icon/tab/design-on.png) no-repeat center/contain;
}
.tab_bar_design:hover a {
  color: var(--dark-main-color);
}

.tab_bar_design-active .design_icon {
  /* background */
  background: url(../img/icon/tab/design-on.png) no-repeat center/contain;
}

/* Products */
.tab_bar_products .products_icon {
  /* background */
  background: url(../img/icon_omavmall.png) no-repeat center/contain;
}
.tab_bar_products:hover .products_icon {
  /* background */
  background: url(../img/icon_omavmall_on.png) no-repeat center/contain;
}
.tab_bar_products:hover a {
  color: var(--dark-main-color);
}

.tab_bar_products-active .products_icon {
  /* background */
  background: url(../img/icon_omavmall_on.png) no-repeat center/contain;
}

/* Community */
.tab_bar_community .community_icon {
  /* background */
  background: url(../img/icon/tab/community-off.png) no-repeat center/contain;
}
.tab_bar_community:hover .community_icon {
  /* background */
  background: url(../img/icon/tab/community-on.png) no-repeat center/contain;
}
.tab_bar_community:hover a {
  color: var(--dark-main-color);
}

.tab_bar_community-active .community_icon {
  /* background */
  background: url(../img/icon/tab/community-on.png) no-repeat center/contain;
}

/* My Info */
.tab_bar_myinfo .myinfo_icon {
  /* background */
  background: url(../img/icon/tab/mypage-off.png) no-repeat center/contain;
}
.tab_bar_myinfo:hover .myinfo_icon {
  /* background */
  background: url(../img/icon/tab/mypage-on.png) no-repeat center/contain;
}
.tab_bar_myinfo:hover a {
  color: var(--dark-main-color);
}

.tab_bar_myinfo-active .myinfo_icon {
  /* background */
  background: url(../img/icon/tab/mypage-on.png) no-repeat center/contain;
}

.tab_bar_gift .gift_icon {
  background: url(../img/art_icon.png) no-repeat center / contain;
}

.tab_bar_gift-active .gift_icon {
  background: url(../img/art_icon_on.png) no-repeat center / contain;
}

.tab_bar_diy .diy_icon {
  background: url(../img/diy_icon.png) no-repeat center / contain;
}

.tab_bar_diy-active .diy_icon {
  background: url(../img/diy_icon_on.png) no-repeat center / contain;
}

:is( .tab_bar_diy, .tab_bar_gift ) > a {
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: bold;
  color: var(--tab-bar);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* NEW CHATTING */
.tab_msg_mark{
    /* position */
    position: absolute;
    top: 0;
    right: 8px;
    /* size */
    width: 18px;
    height: 18px;
    /* display */
    display: flex;
    justify-content: center;
    align-items: center;
    /* background */
    background-color: var(--point-color);
    /* font */
    font-family: var(--font-family);
    font-weight: bold;
    font-size: 10px;
    color: #fff;
    /* border */
    border-radius: 50%;
}