@charset "UTF-8";
/*!
 * Bootstrap v5.1.1 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
.biboNav {
  display: flex;
  align-items: center;
  padding: 16px 0;
  justify-content: space-between;
  background: none;
}
@media (max-width: 576px) {
  .biboNav {
    background-color: #fff;
    flex-direction: row-reverse;
    position: fixed;
    padding: 0;
    z-index: 300;
    top: 0;
  }
  .biboNav h1, .biboNav .h1 {
    width: 600px;
  }
}

.biboLogo {
  display: flex;
  color: #212529;
  font-size: 1.75rem;
  align-items: center;
}
.biboLogo::before {
  content: "";
  display: block;
  background-image: url(../image/BIBIBOBO_logo.png);
  width: 60px;
  height: 60px;
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 8px;
}
@media (max-width: 576px) {
  .biboLogo {
    font-size: 1.25rem;
    justify-content: center;
  }
}

/* 選單線 */
.line {
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: block;
  padding: 16px;
  /* z-index: 2; */
  /* z-index: 100;
  position: static; */
}

.line .menu,
.line .menu::before,
.line .menu::after {
  background: #495057;
  content: "";
  display: block;
  margin-top: 14px;
  height: 2px;
  position: absolute;
  transition: background ease 0.3s, top ease 0.3s 0.3s, transform ease 0.3s;
  width: 24px;
}
@media (min-width: 575px) {
  .line .menu,
  .line .menu::before,
  .line .menu::after {
    display: none;
  }
}

.line .menu {
  left: 18px;
  top: 30%;
}

.line .menu::before {
  top: -5px;
}

.line .menu::after {
  top: 4px;
}

/* 點選選單變叉叉 */
#menu:checked + .line .menu {
  background: transparent;
}

#menu:checked + .line .menu::before {
  transform: rotate(45deg);
}

#menu:checked + .line .menu::after {
  transform: rotate(-45deg);
}

#menu:checked + .line .menu::before,
#menu:checked + .line .menu::after {
  top: 0;
  transition: top ease 0.3s, transform ease 0.3s 0.3s;
}

/*



// .dropdown {
//     // width: 60px;
//     // // height: 100vh;
//     // background: #FFF;
//     // box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
//     // padding-top: 60px;
//     // position: fixed;
//     z-index: 400;
//     // transition: all .6s;
//     // overflow: hidden;
// }

/*手機版選單未點擊隱藏
*/
.menu-list {
  display: flex;
}
@media (max-width: 576px) {
  .menu-list {
    display: none;
  }
  .phoneMenu-list{
    margin-top: 155%;
  }
}

#menu:checked ~ .phoneMenu-list {
  display: block;
  width: 100%;
  height: 100vh;
}

.phoneMenu-list {
  display: none;
  /* margin-top: 200%; */
  position: absolute;
  margin-left: -12px;
  font-size: 1.25rem;
}
.phoneMenu-list ul,
.phoneMenu-list li {
  padding: 0;
  margin: 0;
}
.phoneMenu-list .phoneMenuTitle {
  background-color: #009B10;
  font-size: 1.5rem;
  padding: 4px;
  padding-left: 14px;
  margin: 8px;
  margin-left: 16px;
  display: block;
  width: 94%;
  color: #fff;
}
.phoneMenu-list .phoneMenuBg {
  background-color: #fff;
  margin-left: 16px !important;
  width: 94%;
  border-radius: 20px;
  display: block;
  padding: 8px !important;
  margin: 8px 0;
}
.phoneMenu-list .phoneMenuBg li + li {
  border-top: 1px #9C9383 dashed;
}
.phoneMenu-list .phoneMenuBg li {
  padding: 4px !important;
}
.phoneMenu-list .phoneMenuBg a, .phoneMenu-list .phoneMenuBga {
  color: #9C9383;
  opacity: 0.8;
}
.phoneMenu-list::after {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  background-color: #9C9383;
  opacity: 0.9;
  z-index: -1;
}

/*隱藏核許框*/
input#menu {
  display: none;
}

.navList {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
@media (max-width: 576px) {
  .navList {
    justify-content: flex-start;
  }
}

.footBIBIBOBO .footBGcolor {
  background-color: #9C9383;
  padding: 20px 0;
  position: sticky;
    z-index: 10;
}
.footBIBIBOBO.pageFootBg::before {
  content: "";
  display: block;
  background-image: url(../image/pageFootBg.png);
  padding-top: 15%;
  z-index: -100;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  top: 36px;
}

.footBtnList {
  display: flex;
  justify-content: center;
  padding: 20px 0 0;
}
.footBtnList li + li {
  margin-left: 36px;
}
.footBtnList li a {
  display: block;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.footBtnList li a:hover {
  background-color: #495057;
}
.footBtnList .lineBtn a {
  background-image: url(../image/LINE-icon.png);
}
.footBtnList .facebook a {
  background-image: url(../image/facebook-icon.png);
}
.footBtnList .Email a {
  background-image: url(../image/Email-icon.png);
}

.footlist {
  text-align: center;
}
.footlist span,
.footlist a {
  font-size: 0.875em;
  color: white;
}