:root {



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



  --opacitynavBgColor: rgba(255, 255, 255, 0);



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



  --navhoverColor: #2070b9;



  --highLightColor: rgb(203, 189, 125);



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



  --darkColor: #2f2f2f;



  --titleColor: #dfa02b;



  --mainFontColor: rgb(46, 46, 46);



  --opacityFontColor: rgb(139 132 132);



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



}







.btn_a a:hover {



  background-color: #dfa02b;



}







.menu-item,
.menu-open-button {



  background: #098ed3;





}







#about h4 {



  text-align: center;



  margin-bottom: 80px;



  letter-spacing: 2px;



  font-weight: 300;



  line-height: 1.6;



}







.aboutText h6 {



  line-height: 1.4;



  text-align: left;



}















.aboutText p {



  font-size: 16px;



  font-weight: 400;



  letter-spacing: 1.2px;



  text-align: justify;



  line-height: 28px;



}







.aboutFlex2 {



  margin: 50px 0px;



}







.aboutFlex2 .floatimg {



  width: 40%;



  top: 150px;



}







.aboutFlex2 .col-sm-5 {



  width: 50%;



}







.aboutFlex3 {







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



  -webkit-background-size: cover;



  -moz-background-size: cover;



  -o-background-size: cover;



  background-size: cover;



  ;



}







.aboutFlex3 .floatLeftText {



  left: 0px;



}







.aboutFlex3 .col-sm-5 {



  width: 100%;



}







#about h2 {



  text-align: center;



  opacity: 0.8;



  margin-bottom: 75px;



  font-size: 20px;



  letter-spacing: 2px;



  font-weight: 200;



  top: -50px;



}







#about2 article {



  width: 100%;



  padding: 0px;



}







#choose {



  background-color: rgb(233, 228, 219);



}







#choose .content {



  display: flex;



  justify-content: space-between;



  align-items: center;



}







#choose .content2 {



  display: flex;



  flex-direction: column;



  justify-content: center;



}











#choose .content2 .choosePic {



  margin: 0 auto;



  width: 100%;



}







#choose .content2 .chooseText {



  width: 100%;



  display: flex;



}







#choose .chooseText {



  text-align: left;



  width: 45%;



}







#choose .text h5 {



  margin-bottom: 20px;



}







#choose .choosePic {



  width: 45%;



}







#choose h3 {



  font-size: 36px;



  color: #dfa02b;



  margin-bottom: 65px;



}







#choose h3 span {



  font-size: 14px;



  color: #c7ab78;



}











#choose h4 {



  font-size: 22px;



  margin-bottom: 10px;



  color: rgb(49, 49, 49);



}







#choose h5 {



  width: 70%;



  margin-bottom: 50px;



  font-size: 14px;



  letter-spacing: 1.5px;



  line-height: 20px;



  color: rgba(108, 100, 90, 0.612);



}







#choose p {



  font-size: 16px;



  letter-spacing: 1.6;



  line-height: 26px;



  margin-bottom: 30px;



  color: rgb(50, 50, 50);



  font-weight: 300;



}







#choose .swiper-slide {



  padding: 0px 5px;



  display: flex;



  flex-direction: column;



  background: none;



}







#choose .slide2 {



  flex-direction: row;



  justify-content: space-between;



  align-items: flex-start;



  flex-wrap: wrap;



}







#choose .title {



  width: 100%;



}







#choose .title h5 {



  width: 100%;



}











#choose .text {



  width: 33.33%;



  padding: 0px 30px;



  display: flex;



  flex-direction: column;



  align-items: center;



}







#choose .step {



  width: 100%;



}







#choose .step ul {



  display: flex;



  justify-content: space-between;



}







#choose .text2 {



  width: 25%;



  padding: 0px 30px;



  display: flex;



  flex-direction: column;



  align-items: center;



}







#choose a {



  display: inline-block;



  color: rgb(50, 50, 50);



}







#choose a:hover {



  color: #dfa02b;



}







#choose .text h5 {



  width: 100%;



}







#choose .text p {



  text-align: justify;



}







#choose .text .choosePic {



  margin-bottom: 20px;



}











.item2 {



  width: 50%;



}







/* swiper */



.swiper-container {



  width: 100%;



  height: 100%;



}















.swiper-slide {



  text-align: center;



  font-size: 18px;



  background: #fff;







  /* Center slide text vertically */



  display: -webkit-box;



  display: -ms-flexbox;



  display: -webkit-flex;



  display: flex;



  -webkit-box-pack: center;



  -ms-flex-pack: center;



  -webkit-justify-content: center;



  justify-content: center;



  -webkit-box-align: center;



  -ms-flex-align: center;



  -webkit-align-items: center;



  align-items: center;



}







.swiper-slide img {



  display: block;



  width: 100%;



  height: 100%;



  object-fit: cover;



}







/* swiper */







.serviceArea {



  display: flex;



  justify-content: center;



}











#news .item2 a {



  box-shadow: 0px 0px 5px black;



}







#news .item2 a:hover {



  box-shadow: 0px 0px 10px black;



}







.bottom {



  display: flex;



}







.bottom .btn_a {



  margin-right: 10px;



}







#menu article {



  display: flex;



  flex-direction: column;



  align-items: center;



}







#menu .item3 h4,



li {



  color: rgb(34, 34, 34);



}







#menu .bottom {



  margin: 0 auto;



}







#menu a {



  padding: 10px 20px;



  border: 1px solid black;



  color: black;



  display: inline-block;



  margin-top: 50px;



  font-size: 20px;



}







#menu a:hover {



  background-color: #dfa02b;



  border: 0px;



  color: white;



}







.menuArea {



  display: flex;



  justify-content: space-around;



  width: 100%;



}







.item3 {



  width: 30%;



}







.item4 {



  width: 20%;



}







.listMenuArea {



  margin-bottom: 50px;



}







.listMenuArea a {



  display: inline-block;



}







.listMenuItem li {



  color: rgb(59, 59, 59);



  width: 100%;



}















#video {



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



  -webkit-background-size: cover;



  -moz-background-size: cover;



  -o-background-size: cover;



  background-size: cover;



}







.videoArea p {



  text-align: justify;



  letter-spacing: 1.4px;



  line-height: 1.4;



}















.navbar {



  background-color: var(--opacitynavBgColor);



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



}







/* 



#home,#myCarousel{



  



  margin-top: 88px;



} */







.mainBg {





  background-size: cover;



  background-attachment: fixed;



}







.mainMask {



  background-color: rgba(231, 231, 231, 0.561);



}







.banner-full {







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







.section:nth-child(odd) {



  background-color: #fff
}







.category_Text h5 {



  font-size: 28px;



}







.category_Text span {



  font-size: 20px;



}















.listMenuItem a {



  color: #dfa02b;



}











#sns ul li {



  filter: brightness(0);



}







.footer {



  background-color: #ffffff;



}







.footer_logo {



  width: 10%;







}







.footer {



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



  align-items: flex-start;



}







.footer li {



  color: white;



}







.footer_text a {



  display: inline-block;



}







.floatRightText,



.floatLeftText {



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



}







/* 響應式選單*/



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







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



  .aboutFlex2 .floatimg {



    width: 90%;



    margin-top: 20px;



  }







  .aboutFlex2 .col-sm-5 {



    width: 100%;



  }











  .item2 {



    width: 100%;



  }







  .serviceArea {



    flex-direction: column;



  }







  .listMenuArea h4 {



    font-size: 20px;



    line-height: 1.6;



  }







  .menuArea {



    flex-wrap: wrap;



  }







  .item3 {



    width: 70%;



  }







  .item4 {



    width: 80%;



  }







  .aboutText p {



    letter-spacing: 0.6px;



  }







  .aboutText h6 {



    font-size: 22px;



  }







  #choose .content {



    flex-direction: column;



  }







  #choose .chooseText {



    width: 90%;



  }







  #choose .choosePic {



    width: 90%;



  }







  #choose .text .choosePic {



    width: 50%;



  }







  #choose .text {



    width: 48%;



    padding: 0px;



  }







  #choose .text2 {



    width: 50%;



  }







  #choose .step ul {



    flex-wrap: wrap;



  }







  #choose p {



    font-size: 14px;



    line-height: 24px;



  }







  #choose h3 {



    font-size: 24px;



    margin-bottom: 40px;



  }







  #choose h5 {



    width: 80%;



  }







  .footer>div {



    width: 80%;



  }







  .footer li {



    text-align: left;



  }







  article>h3 {



    font-size: 28px;



  }







  .newsTitle h4 {



    font-size: 18px;



  }



}







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







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