:root{



  --navBgColor:#FFF;



  --opacitynavBgColor:#FFF;



  --navTextColor:#654127;



  --navhoverColor:#AB8265;



  --highLightColor:rgba(38,43,157,1);



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



  --darkColor:#AB8265;



  --titleColor:#654127;



  --mainFontColor:rgba(30,30,30,1);



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



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



}



h1{

    color: var(--titleColor);

    text-align: center;

    margin-bottom: 60px;

}



article > h2{

  font-size: 36px;

  color: var(--titleColor);

  text-align: center;

  margin-bottom: 60px;

}





#nav-icon span{

  background: var(--darkColor);

}











.navbar{

	background-color:transparent;

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

}









#home,#myCarousel{







  margin-top: 88px;



}





.mainBg{





  background-size: cover;



  background-attachment: fixed;



}



body:before {



  content: "";



  display: block;



  position: fixed;



  left: 0;



  top: 2.3cm;



  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%;



}



 .section:nth-child(odd){



  background-color:#edd6c6;



}



.mainMask{



  background-color: #ffffffd2;



}



.banner-full{







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







}



.aboutText h2{

  color: var(--titleColor);

  text-align: center;

  margin-bottom: 30px;

}



  

.aboutText h4{



  text-align: center;



  font-size: 25px;



  letter-spacing: 2px;



}



.aboutText p{



  text-align: center;



  font-size: 15px;



  letter-spacing: 2px;



}

.benefitText h2,

.benefitText p{

  text-align: left;

  }

.roomTitle h4{



  letter-spacing: 2px;



}







.listMenuArea li{

  width: 100%;

  text-align: center;

}

#sns ul li{



  filter: brightness(0);



  border-bottom: none;



}









#sns {



  position: sticky;



  bottom: 0 ;



  left: 0 ;



  width: 100%;



  background-color: #c8c8c8;



}







#sns ul {



  display: flex;



  /* width: 100%; */



  justify-content: space-evenly;







}



.qrcode{



  width: 32%;



  margin: auto;



}







.newsTitle a{



  /* right: -76%;

   */



   text-align: end;



  top: -22px;



  color:#736356;



 }







 #copyright {



  background-color: #3d3d3d;



  text-align: center;



  font-size: 12px;



  padding: 5px 0;

color:#FFF;

}























/* 響應式選單*/



@media (max-width:1200px) {



  #logo{



    width: 100%;



  }



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



    margin-left: 0;



  }



  .navbar-brand > img{



    margin: auto;







  }



  .shop1688{



    left: 15px;



  }



  .navbar-nav{



    text-align: center;



  }



.navbar .container-fluid{



  background-color: rgba(255,255,255,1);



}



    .navbar-header {



      float: none;







  }







  .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-collapse.collapse {



      display: none!important;



      padding-bottom: 20px;



  }



  .navbar-nav {



      float: none!important;



      margin-top: 0px;



      border-top: 1px solid rgba(0,0,0,0.5);



  }



  .navbar-nav>li {



      float: none;



  }



  .navbar-nav>li>a {



      padding-top: 10px;



      padding-bottom: 10px;







  }



  .collapse.in{



      display:block !important;



  }







  .navbar-nav > li > a {



    color: #736356;



}



  article > h2{

    font-size: x-large;



    color: var(--titleColor);



    text-align: center;



    margin-bottom: 60px;

}



  article > h3 {



    font-size: x-large;



    color: var(--titleColor);



    text-align: center;



    margin-bottom: 60px;

  }

}











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



  .sologan {



    font-size: 99%;



  }







    .newsTitle a {



      right: 1px;



      top: -2px;



      color: #736356;



  }







  .aboutItem {



    width: 100%;

  

  }





  .item3 {



    width: 100%;



    padding: 0;



  }







  .slick-slide img {



    width: 100%;



  }















}



























/*響應式調整*/











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







}



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







}



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







}



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



  #logo{

    padding: 15px 15px;

  }



}



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







}



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







}



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







}