:root {


  --navBgColor: #857a5a;


  --opacitynavBgColor: #857a5a;


  --navTextColor: #f3e2da;


  --navhoverColor: rgb(255, 255, 255);


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


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


  --darkColor: #857868;


  --titleColor: #938576;


  --mainFontColor: #675d50;


  --opacityFontColor: #c6b597;


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


}





#nav-icon span {





  background: #fff;





}





.roomTitle h4 {


  font-size: 24px;


  color: #000000;


}





.line_n {


  text-decoration: line-through;


  color: rgb(124, 124, 124);


}





.roomTitle h3 {


  font-size: 16px;


  margin-top: -24px;


  text-align: right;


}





.service_mask {


  background-color: rgba(143, 142, 142, 0.26);


}





.aboutText h6 {


  line-height: 34px;


}





.aboutpic {


  position: fixed;


  top: 65%;


  left: 3%;


  cursor: pointer;


  z-index: 100;


}





.aboutpic img {


  width: 150px;


  animation: alarm 1s infinite;


}








.navbar {


  background-color: var(--opacitynavBgColor);


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


}








/*


#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/bg.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: #dfdad0;


}





.banner-full {





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





.section:nth-child(odd) {


  background-color: #f3f2ef;


}














.picFlex img {


  width: 46%;


  margin: 10px;


  float: left;


}





h5 small {


  color: rgb(240, 240, 240);


}





.hovereffect h2 {


  padding: 0em 0;


}





.overlay img {


  margin-top: 15px;


}





.trafficText img {


  filter: brightness(0.5);


}











.trafficText ul li {


  font-size: 18px;


}





#sns ul li {


  filter: brightness(0);


}





.footer {


  background-color: #b6ada4;


}





#copyright {


  background-color: #bdbab3;


  color: #000;


}





#picCategory p {


  width: 95%;


  margin: 0 auto 50px;


}





.floatRightText,


.floatLeftText {


  background-image: url(../img/bg01.jpg);


  background-size: cover;


  border: 0px;


  box-shadow: 5px 5px 10px rgba(49, 49, 49, 0.759);


}





.aboutText p {

  font-weight: 100;

  text-align: justify;


  color: #000;


}





.aboutText h6 {





  color: #7a1828;


}





article>h3 {


  text-shadow: 3px 2px 3px rgb(223, 223, 223);


}





.col-sm-7 img {


  box-shadow: 5px 5px 10px rgba(49, 49, 49, 0.759);


}





/* 響應式選單*/


@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) {





  .aboutFlex img {


    background-color: #d1e7d9;


    border-style: double;


    border-width: 10px;


    border-color: #FFF;





  }





  .floatRightText {


    background-color: #FFF;


  }





  .aboutpic {


    top: 32%;


    left: 1%;


  }





  .btn_group .btn_a {


    width: 40%;


  }





  .aboutpic img {


    width: 80px;


  }





  .roomTitle h3 {


    margin-top: 8px;


    text-align: right;


    font-size: 16px;


  }





  .mbslider .slick-next,


  .mbslider .slick-prev {


    top: 275px;


  }





}





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


  .hovereffect img {


    margin-bottom: 25px;


  }





  .overlay img {


    width: 18%;


  }


}





@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);


  }


}