:root {



  --navBgColor: rgb(255 255 255);



  --opacitynavBgColor: rgba(223, 215, 194, 0);



  --navTextColor: #4f2a11;



  --navhoverColor: #a55724;



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



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



  --darkColor: #4f2a11;



  --titleColor: #4f2a11;



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



  --opacityFontColor: #4f2a11;



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



}







/* 



#home,#myCarousel{



  



  margin-top: 88px;



}*/



article>h3 span.afterline,



article>h3 span.beforeline {



  width: 0px;



}







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



}







/* .mainBg{



  background-color: var(--navBgColor);



  background-size: cover;



  background-attachment: fixed;



} */



.mainMask {



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



}







.banner-full {







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







b,



strong {



  font-size: larger;



}







/* .section:nth-child(odd) {



  background-color: rgb(255 223 232 / 42%);



} */







.newsTitle i {



  font-style: normal;



}




.btn_group .btn_a {
  width: 45%;
}

.btn_a {



  border: 2px solid rgb(62 62 62);



  border-radius: 15px;



}







.btn_a a {



  color: rgb(62 62 62);







}







.aboutFlex h6 {



  text-align: left;



  font-size: 19px;



  letter-spacing: 2px;



  margin-bottom: 50px;



  font-weight: 400;



}







.aboutText {



  padding-left: 80px;



}







.topLine {



  border-top: 5px solid #4f2a11;



  width: 120px;



  margin-bottom: 15px;



}







.trafficText img {



  filter: brightness(0.4)
}











#picture h3 {



  width: 100%;



  text-align: center;



  margin: 24px auto 48px;



  border-bottom: var(--mainBorder);



  padding-bottom: 30px;



}







/* #sns ul li {



  filter: brightness(0);



} */







.footer {



  background-color: #c1baa800;



}







.trafficArea {



  display: flex;



  flex-wrap: wrap;



}







#traffic article h3 {



  width: 100%;



}







.trafficText {



  display: block;



  text-align: left;



  font-size: 17px;



  line-height: 40px;



}







.trafficText,



.trafficMap {



  width: 45%;



  margin: 0 auto;



}







.trafficBtn a {



  font-weight: 700;



  margin-top: 24px;



  margin-left: 20px;



  border: 2px solid #4f2a11;



  padding: 5px;



  width: 100px;



  text-align: center;



  float: left;



  border-radius: 15px;



}







.trafficText li a:hover {



  color: rgb(255, 255, 255);



  background-color: #4f2a11;



  transition: 0.5s;



}







#copyright {



  background-color: rgb(255, 255, 255);



}



.join {



  text-align: center;



  color: #4f2a11;



  padding: 20px;



  border: 3px solid;



  transition: 0.5s;



}



.join:hover {



  background-color: #4f2a11;



  color: rgb(255, 255, 255);



  border: 2px solid #fff;



}



.aboutText p {



  text-align: justify;



}



.col-sm-5 img {



  box-shadow: 5px 5px 5px rgb(97, 97, 97);



}



.item1 {



  width: 50%;



  margin: auto;



}



/* 響應式選單*/



@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: 80%;



    margin: auto;



  }



  .join {



    font-size: 20px;



  }



  .category_img p {



    margin-left: 10px;



  }



  .category_Text h5 {



    margin-left: 10px;



  }



  .category_Text p {



    margin-left: 10px;



  }



  #logo {



    height: 52px;



    margin-top: 15px;



  }



  .topLine {



    margin-left: 20px;



  }







  .aboutFlex h6 {



    margin-left: 20px;



    margin-top: 20px;



  }



  .aboutText {



    padding-left: 0px;



  }







  .trafficArea {



    display: block;



  }







  .trafficText,



  .trafficMap {



    width: 85%;



    text-align: center;



  }







  .trafficBtn a {



    margin: 2em auto;



  }



}







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







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







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