/*************************
 * Bottom Navigation Bar * 
 *************************/

 /* common */
 html{height: 100%;}
 .botnavi__mask{position:fixed; display:block; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,0.5); z-index: 101;}

 /* BNB */
 #bottom__navi{display: none; position: relative; width: 100%; height: 60px; background:#fff; position: fixed; bottom: 0; left: 0; border-top-left-radius: 16px; border-top-right-radius: 16px; box-shadow: 0 -5px 10px 0px rgba(0,0,0,0.3); z-index: 110; transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translateZ(0); transform: translateZ(0);}/* KDP-53472 240502 ���� */
 #bottom__navi._hide{transform: translateY(125%);}
 #bottom__navi .botnavi__menu{width: 100%; height: 100%; display: flex; justify-content: space-evenly; align-items: center; }/* KDP-53472 240429 ���� */
 #bottom__navi .botnavi__menu > li{flex: 0 0 auto; width: 20%; height:100%;;position: relative;display: flex; justify-content: center; align-items: center;}/* KDP-53472 240429 ���� */
 #bottom__navi .botnavi__menu > li a > img{display: inline-block; width: 23px;}/* KDP-53472 240502 ���� �߰� */
 #bottom__navi .botnavi__menu > li a{display: flex; flex-direction: column; justify-content: center; align-items: center;}
 #bottom__navi .botnavi__menu > li a > span{font-size: 11px; font-weight: 700; padding-top: 4px;}/* KDP-53472 240502 �����߰� */
 #bottom__navi .botnavi__menu > li.active > a > img{filter: invert(42%) sepia(93%) saturate(2569%) hue-rotate(197deg) brightness(100%) contrast(104%)}/* KDP-53472 240502 �߰� */
 #bottom__navi .botnavi__menu > li.active a > span{color: #2188FF;}/* KDP-53472 240502 �߰� */

 /* KDP-53472 240430 ���� */
  #bottom__navi.bnb_renewal{height: 66px;border-radius: 0;box-shadow: 0 0 8px 0px rgba(0,0,0,0.12);}/* KDP-53472 240502 �߰� */
  #bottom__navi.bnb_renewal .botnavi__menu > li .icon{width:18px;height:18px;}
  #bottom__navi.bnb_renewal .botnavi__menu > li .icon svg{width:100%;height:100%}
  #bottom__navi.bnb_renewal .botnavi__menu > li .icon.active{display: none;}
  #bottom__navi.bnb_renewal .botnavi__menu > li a > span{font-size: 11px; text-align: center ;padding-top: 10px;color:#666}/* KDP-53944 240507 ���� */
  
  #bottom__navi .botnavi__menu > li a .more__circle{position: relative; width: 44px; height: 44px; border-radius: 50%; background: #2188FF; overflow:hidden; margin-top:-22px} /* KDP-53472 240502 ���� */
  #bottom__navi .botnavi__menu > li a .more__circle .more__bar{position: absolute; top: 50%; left: 11px; width: 22px; height: 2px; background: #fff; transition: 1s cubic-bezier(0.19, 1, 0.22, 1); transform-origin:center;}
  #bottom__navi .botnavi__menu > li a .more__circle .bar01{}
  #bottom__navi .botnavi__menu > li a .more__circle .bar02{transform: rotate(90deg);}
  #bottom__navi .botnavi__menu > li a .more__circle.active{background: #2188FF;}
  #bottom__navi .botnavi__menu > li a .more__circle.active .bar01{transform: rotate(225deg);} 
  #bottom__navi .botnavi__menu > li a .more__circle.active .bar02{transform: rotate(-45deg);} 
  #bottom__navi .botnavi__menu > li a .botnavi__recent{overflow: hidden; width: 40px; height: 40px; border: 1px solid #ddd; border-radius: 6px;}
  #bottom__navi .botnavi__menu > li a .botnavi__recent img{width: 100%; height: 100%; display: block; object-fit: cover;}
  
  /* KDP-53472 240430 ���� */
  #bottom__navi.bnb_renewal .botnavi__menu > li.active a:after{content:'';position:absolute;top:0;left:50%;right:0;width:32px;height:3px;margin-left:-16px;border-radius:0 0 3px 3px;background:#000;}
  #bottom__navi.bnb_renewal .botnavi__menu > li.active a > span{font-weight: 700;}
  #bottom__navi.bnb_renewal .botnavi__menu > li.active .icon.default{display: none;}
  #bottom__navi.bnb_renewal .botnavi__menu > li.active .icon.active{display: block;}

  #bottom__navi .botnavi__menu > li.active a.button__more > span{color: #000;}
  #bottom__navi .botnavi__more{display: flex; align-items: center; position: absolute; top: -70px; left: 50%; width: auto; height: 57px; border-radius: 30px; background: #fff; transform: translateX(-50%); padding: 0 10px; visibility: hidden;}
  #bottom__navi .botnavi__more.active{top: -80px; visibility: visible; transition: 0.6s cubic-bezier(0.19, 1, 0.22, 1); background: #2188FF; }
  #bottom__navi .botnavi__more .more__list{display: flex; justify-content: space-between; align-items: center; width: 100%;}
  #bottom__navi .botnavi__more .more__list li{flex: 0 0 auto; display: flex; justify-content: center; align-items: center; padding: 0 8px;}
  #bottom__navi .botnavi__more .more__list li a{display: flex; flex-direction: column; justify-content: center; align-items: center;}
  #bottom__navi .botnavi__more .more__list li a img{display: inline-block; width: 23px;}
  #bottom__navi .botnavi__more .more__list li a > span{font-size: 11px; padding-top: 4px; white-space: nowrap; color: #fff}

@media all and (max-width:1279px) and (min-width: 768px) {
  #bottom__navi{display: block;}/* KDP-53472 240429 ���� */
  #bottom__navi .botnavi__menu{max-width: 85%; margin: 0 auto;}/* KDP-53472 240429 ���� */
  #bottom__navi .botnavi__menu > li a .more__circle{width: 44px; height: 44px;}
  #bottom__navi .botnavi__menu > li a .more__circle .more__bar{left: 11px; width: 22px; height: 2px;}
  #bottom__navi .botnavi__menu > li a .botnavi__recent{width: 40px; height: 40px; border-radius: 6px;}
  #bottom__navi .botnavi__more{top: -70px; left: 50%; height: 57px; border-radius: 30px; padding: 0 10px;}  
  #bottom__navi .botnavi__more .more__list li{padding: 0 16px;}
  #bottom__navi .botnavi__more .more__list li a img{width: 23px;}
  #bottom__navi .botnavi__more .more__list li a > span{font-size: 11px; padding-top: 6px;}
}

@media all and (max-width: 767px) {
 #bottom__navi{display: block;}/* KDP-53472 240429 ���� */
  #bottom__navi .botnavi__menu{width: 100%;}/* KDP-53472 240429 ���� */
  #bottom__navi .botnavi__menu > li a .more__circle{width: 44px; height: 44px;}
  #bottom__navi .botnavi__menu > li a .more__circle .more__bar{left: 11px; width: 22px; height: 2px;}
  #bottom__navi .botnavi__menu > li a .botnavi__recent{width: 40px; height: 40px; border-radius: 6px;}
  #bottom__navi .botnavi__more{top: -70px; left: 50%; height: 57px; border-radius: 30px; padding: 0 10px;}  
  #bottom__navi .botnavi__more .more__list li{padding: 0 10px;}
  #bottom__navi .botnavi__more .more__list li a img{width: 23px;}
  #bottom__navi .botnavi__more .more__list li a > span{font-size: 11px; padding-top: 4px;}
}

@media all and (max-width: 350px) {
 #bottom__navi .botnavi__menu > li a > span{font-size:10px}/* KDP-53472 240502 ���� �߰� */
 #bottom__navi .botnavi__more .more__list li{padding: 0 6px;}
 #bottom__navi .botnavi__more .more__list li a > span{font-size: 10px;}
 #bottom__navi .botnavi__menu > li a > img{width: 21px;}
}