:root {



  --navBgColor: #231916;



  --opacitynavBgColor: #231916;



  --navTextColor: #ffffff;



  --navhoverColor: #fbcf07;



  --highLightColor: rgba(203, 125, 157, 1);



  --hoverColor: rgba(255, 255, 255, 1);



  --darkColor: #e1d8c6;



  --titleColor: #e9d7b3;



  --mainFontColor: rgba(255, 255, 255, 0.945);



  --opacityFontColor: rgba(255, 255, 255, 0.5);



  --mainBorder: 1.5px solid var(--opacityFontColor);



}







#nav-icon span {







  background: var(--darkColor);







}











.navbar {



  background-color: var(--opacitynavBgColor);



  /* box-shadow: 0px 2px 5px rgba(0,0,0,0.2); */



}







#nav-icon span {



  background: var(--darkColor);



}







/*



#home,#myCarousel{







  margin-top: 88px;



} */







body:before {



  content: '';



  display: block;



  position: fixed;



  left: 0;



  top: 0;



  width: 100%;



  height: 100%;



  z-index: -10;



  background: url(../img/bg01.jpg) no-repeat center center;



  -webkit-background-size: cover;



  -moz-background-size: cover;



  -o-background-size: cover;



  background-size: cover;



  padding-bottom: 20%;



}







.mainMask {



  background-color: rgba(29, 29, 29, 0.883);



}







.banner-full {







  background-image: url(../img/banner1.jpg)
}







.section:nth-child(odd) {



  background-color: #a7a7a79e;



}











.trafficText img {



  filter: brightness(1);



}



.trafficArea {
  margin-bottom: 70px;
}







#sns ul li {



  filter: brightness(1);



}

#sns .fb2 {
  background-image: url(../img/fb2.png);
  background-size: contain;
  background-position: center center;
}

#sns .fb3 {
  background-image: url(../img/fb3.png);
  background-size: contain;
  background-position: center center;
}





.footer {



  background-color: #363024;



}







.floatRightText,



.floatLeftText {



  background-color: #36302495;



  box-shadow: 5px 5px 8px rgba(78, 78, 78, 0.717);



}



.first,
.second img {



  box-shadow: 5px 5px 8px rgba(78, 78, 78, 0.717);



}



.small {



  text-align: center;



  opacity: 0.5;



  margin-bottom: 20px;



}



.listMenuItem {



  border-bottom: 0px;



}



article>h3 span.afterline {



  height: 0px;



}



article>h3 span.beforeline {



  height: 0px;



}



.aboutpic {



  position: fixed;



  top: 65%;



  left: 1.5%;



  cursor: pointer;



  z-index: 100;



}







.aboutpic img {



  width: 100px;



  animation: alarm 1s infinite;



}



.menuItem img {



  margin: auto;



  width: 70%;



  border-radius: 50%;



  border: 4px double #e9d7b3;



}



.btn_group .btn_a {



  width: 45%;



}



.roomText p b {



  font-size: 18px;



  color: #e9d7b3;



}



#sns .ubereats {



  background: url(../img/ubereats.svg);



  background-size: cover;



}


/*
#sns {



  display: none;



} */



.aboutText p {



  text-align: justify;



}



.roomText p {



  text-align: justify;



}



.trafficText li {



  font-size: 18px;



}



.newsText p {



  text-align: justify;



}



.newsItem img {



  border-radius: 4%;



  box-shadow: 3px 3px 8px rgb(255 228 166 / 53%);



  padding: 3px;



}



.footer_logo {



  width: 15%;



}

#copyright {
  background-color: #d4d4d4;
}

.item1 {
  margin: auto;
  width: 50%;
}

/* 響應式選單*/



@media (max-width:1200px) {



  #logo {



    width: 100%;



  }







  #home,



  #myCarousel {







    margin-top: 88px;



  }







  .navbar {



    background-color: var(--navBgColor) !important;



  }







  .navbar>.container-fluid .navbar-brand {



    margin-left: 0;



  }







  .navbar-brand>img {



    margin: auto;







  }







  .collapse {



    position: absolute;



    display: block;



    top: -1200%;



    margin: 0;



    left: 100%;



    width: 100%;



    min-height: 100vh;



    background-color: var(--navBgColor);



    transition: 0.5s;







  }







  .collapse.move {



    top: 0;



    left: 0;



    opacity: 1;



  }







  .shop1688 {



    left: 15px;



  }







  /* .navbar-collapse{



    background-color: var(--navBgColor);



  } */



  .navbar-header {



    float: none;







  }







  .navbar .container-fluid {



    padding: 0;



  }







  .container-fluid>.navbar-collapse {



    margin: 0;



  }







  .navbar-right {



    margin-right: 0;



  }







  .navbar-left,



  .navbar-right {



    float: none !important;



  }







  .navbar-toggle {



    display: block;



  }







  .navbar-fixed-top {



    top: 0;



    border-width: 0 0 1px;



  }







  .navbar-nav {



    text-align: center;



    float: none !important;



    margin-top: 100px;







  }







  .navbar-nav>li>a::after {



    content: '';



    width: 0%;



    height: 3px;



    background-color: var(--navhoverColor);



    margin: auto;



    margin-top: 5px;



    display: block;















  }







  .navbar-nav>li>a:hover::after {



    width: 5%;















    transition: 0.5s;



  }







  .navbar-nav>li {



    float: none;



  }







  .navbar-nav>li>a {



    padding-top: 10px;



    padding-bottom: 10px;







  }







}















/*響應式調整*/











@media screen and (max-width:1200px) {}







@media screen and (max-width:1024px) {}







@media screen and (max-width:991px) {}







@media screen and (max-width:770px) {
  .item1 {
    width: 100%;
  }



  .aboutpic {



    top: 44%;



    left: 2%;



  }



  .aboutpic img {



    width: 42px;



  }



  /* #sns {



    display: block;



  } */



  .top {



    width: 40px;



    height: 40px;



  }







}











@media screen and (max-width:576px) {



  .aboutText h6 {



    font-size: 22px;



  }







  article>h3 {



    font-size: 28px;



  }



}







@media screen and (max-width:414px) {}







@media screen and (max-width:375px) {}



@keyframes alarm {



  0% {



    transform: rotate(3deg);



  }







  25% {



    transform: rotate(0deg);



  }







  50% {



    transform: rotate(-3deg);



  }







  75% {



    transform: rotate(0deg);



  }







  100% {



    transform: rotate(3deg);



  }



}