:root {


  --navBgColor: #cae0e9;


  --opacitynavBgColor: #e2ebee;


  --navTextColor: rgb(69, 69, 69);


  --navhoverColor: rgb(115, 155, 149);


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


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


  --darkColor: #04244a;


  --titleColor: #000000;


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


  --opacityFontColor: #7c4040;


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


}





#nav-icon span {





  background: var(--darkColor);





}





article>h3 span.beforeline,


article>h3 span.afterline {


  display: none;


}





.roomTitle h4 {

  font-size: 22px;
  color: #000000;
  text-align: right;

}





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


}





.btn_group .btn_a {


  width: 40%;


}





.aboutText h6 {


  line-height: 34px;


}





.aboutText p {


  text-align: center;


  font-size: 16px;


  line-height: 28px;


  letter-spacing: 1.6px;


}





.floatLeftText {


  padding: 75px;


}





.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); */


}





#nav-icon span {


  background: var(--darkColor);


}





/* 


#home,#myCarousel{


  


  margin-top: 88px;


} */





.mainBg {


  background-color: var(--navBgColor);


  background-size: cover;


  background-attachment: fixed;


}





.mainMask {


  background-color: rgba(0, 0, 0, 0);


}





.banner-full {





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





.section:nth-child(odd) {


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


  background-size: cover;


  background-position: center;


}














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


}





#team {


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


  background-size: cover;


  background-position: center;


}





#team h3 {


  color: white;


}





.teamArea {


  display: flex;


  justify-content: space-around;


}





.teamItem {


  width: 20%;


}





.teamItem p {


  font-size: 18px;


  line-height: 30px;


  letter-spacing: 1.6px;


  color: white;


}





.trafficText img {


  filter: brightness(0.4)
}











.trafficText ul li {


  font-size: 16px;


  line-height: 30px;


  letter-spacing: 1px;


}





.trafficText ul {


  padding-right: 20px;


  padding-left: 20px;


}





.traffic2 ul {


  width: 50%;


  text-align: left;


  padding: 0px 70px;


}





.traffic2 img {


  width: 15%
}





#sns ul li {


  filter: brightness(0);


}





.footer {


  background-color: #81a4c2;


}





.footer li {


  text-align: center;


  margin-top: 20px;


}





#copyright {


  background-color: #bdbab3;


  color: #000;


}





#picCategory p {


  width: 100%;


  margin: 0 auto 50px;


}





/* 響應式選單*/


@media (max-width:1200px) {


  #logo {


    width: 100%;


    height: 60px;


    margin-top: 20px;


  }





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





  }





  .teamArea {


    flex-direction: column;


    align-items: center;


  }





  .teamItem {


    width: 50%;


    margin-bottom: 50px;


  }





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


  }





  #traffic article {


    padding-bottom: 0px;


  }





  .traffic2 ul {


    width: 100%;


    text-align: center;


    padding: 0px 30px;


    padding-bottom: 30px;


    margin-bottom: 30px;





  }





  .traffic3 {


    margin-top: -30px;


    padding-top: 30px;


    border-top: var(--mainBorder);


  }





  .footer>div {


    width: 100%;


  }





  .footer_logo img {


    width: 60%;


    margin: 0 auto;


  }





  .footer h1 {


    font-size: 24px;


  }





}





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


  .hovereffect img {


    margin-bottom: 25px;


  }





  .overlay img {


    width: 18%;


  }





  .floatRightText,


  .floatLeftText {


    padding: 40px;


  }





  .floatRightText,


  .floatLeftText {


    background-color: white;


  }


}





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


  }


}