:root {

  --navBgColor: #ffffff;

  --opacitynavBgColor: #ffffff;

  --navTextColor: #292F33;

  --navhoverColor: #274390;

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

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

  --darkColor: #274390;

  --titleColor: #32364b;

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

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

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

}



/* wilson ======= */





#nav-icon span {

  background: var(--darkColor);

}



#copyright {

  background-color: #292F33;

  font-weight: bold;

  color: white;

}



.navbar {

  background-color: white;

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

  transition: none;

  height: 100px;

}

.navbar-collapse ,.shop1688{

  margin-top: 5px;

}



#nav-icon span {

  background: var(--darkColor);

}



#logo{

  position: absolute;

  height: 100px;

  padding: 15px 0px 15px 60px;

}



#home,

#myCarousel {



  margin-top: 88px;

}







/* banner */

html,

body {

  position: relative;

  height: 100%;

}



body {

  background: #eee;

  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

  font-size: 14px;

  color: #000;

  margin: 0;

  padding: 0;

}



.banner {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 100%;

  height: 100%;

  /* // 透明度 0.6 的黑色半透明遮罩 */

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

  /* // 設置背景混和模式為相乘模式 */

  background-blend-mode: multiply;

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

  background-size: cover;

  background-position: center center;

}



.banner .about{

  top: 15%;

  text-align: center;

}

.banner .about h1{

  color: white;

  font-size: 56px;

  letter-spacing: 1.6px;

  margin-bottom: 15px;

}



.banner .about p{

  color: #edf2f4bf;

  font-size: 15px;

  font-weight: 200;

  letter-spacing: 1.2px;

  margin-bottom: 30px;

}



.banner .btn{

  background: #D90429;

  font-size: 17px;

  letter-spacing: 1px;

  opacity: 1;

  color: white;

  border-radius: 5px;

}



.banner .btn:hover{

  opacity: 0.3;

}



.clear{

  clear: both;

}





.mainMask {

  background-color: #c8d7ff44;

}





#sns ul li {

  filter: brightness(0);

}



.qrcode {

  width: 40%;

  margin: 20px auto;

}



.navbar-nav>li>a {

  letter-spacing: 4px;

  font-size: 17px;



}



article {

  margin: auto;

  padding: 100px 0px;

}



#about article{

  margin: auto;

  display: flex;

}



#about .compny h2{

  font-size: 36px;

  margin-bottom: 20px;

}



#about .compny p{

  color: rgb(74, 74, 74);

  font-size: 14px;

  line-height: 1.8;

  letter-spacing: 2px;

}





#about .compny{

  margin-top: 150px;

  padding-top: 0px;

  display: flex;

  flex-direction: column;

  width: 65%;

}



.aboutFlex{

  display: block;

  margin-left: 50px;

  width: 70%;

}



#about .aboutItem{

  width: 100%;

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

}



#news ul{

  display: flex;

  flex-wrap: wrap;

}



#news li{

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 60px 20px 60px 20px;

  width: 33.33333%;

}



#news img{

  width: 30%;

  margin-bottom: 50px;

}



#news h2{

  font-size: 36px;

  font-weight: 900;

  letter-spacing: 2px;

  color: white;

  margin-bottom: 30px;

}



#news p{

  text-align: center;

  font-size: 20px;

  letter-spacing: 1.4px;

  line-height: 1.8;

  width: 80%;

  color: white;

}



#news .pic1{

  background-color: rgba(223, 22, 22, 0.9);

  /* // 設置背景混和模式為相乘模式 */

  background-blend-mode: multiply;

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

  background-size: cover;

  background-position: center center;

}



#news .pic2{

  background-color: rgba(223, 186, 22, 0.9);

  /* // 設置背景混和模式為相乘模式 */

  background-blend-mode: multiply;

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

  background-size: cover;

  background-position: center center;

}



#news .pic3{

  background-color: #00a6e8ea;

  /* // 設置背景混和模式為相乘模式 */

  background-blend-mode: multiply;

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

  background-size: cover;

  background-position: center center;

}



#news .pic4{

  background-color: #3b545fea;

  /* // 設置背景混和模式為相乘模式 */

  background-blend-mode: multiply;

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

  background-size: cover;

  background-position: center center;

}



#news .pic5{

  background-color: #2B2D42;

  /* // 設置背景混和模式為相乘模式 */

  background-blend-mode: multiply;

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

  background-size: cover;

  background-position: center center;

}



#news .pic6{

  background-color: #8D99AE;

  /* // 設置背景混和模式為相乘模式 */

  background-blend-mode: multiply;

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

  background-size: cover;

  background-position: center center;

}



#picCategory article{

  width: 80%;

}



#picCategory .maintenance{

  display: flex;

  justify-content: center;

  width: 100%;

  margin-bottom: 50px;

}



#picCategory .maintenance-left{

  display: flex;

  flex-direction: column;

  font-size: 20px;

  width: 30%;

  margin-right: 50px;

}



#picCategory ul{

  display: flex;

  justify-content: space-between;

}



#picCategory li{

  width: 13%;

  display: flex;

  flex-direction: column;

}



#picCategory a{

  font-size: 18px;

  margin-bottom: 10px;

  width: 22%;

}



#picCategory img{

  margin-top: 10px;

  width: 100%;

}



#picCategory span{

  font-size: 24px;

  color: #00A8E8;

  font-weight: 900;

}



#picCategory h4{

  font-size: 32px;

  letter-spacing: 2px;

  color: #2B2D42;

  margin-bottom: 10px;

}



#picCategory p{

  font-size: 14px;

  font-weight: 300;

  color: #5c5e62;

}





#picCategory1{

  background-color: #5bafcf;

}



.item4{

  width: 20%;

}



#experience{

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

  background-size: cover;

  background-position: center center;

}



#experience .content{

  display: flex;

  justify-content: space-between;

}



#experience .home , .compny{

  padding: 20px 10px 20px 10px;

  display: flex;

  /* background: #8D99AE; */

  width: 40%;

}



#experience img{

  margin-right: 20px;

  width: 60px;

  height: 60px;

}



#experience li{

  text-align: justify;

  font-size: 18px;

  margin-bottom: 5px;

  font-weight: 400;

}



#experience .title{

  color: #1c5267;

  font-size: 22px;

  font-weight: 900;

}





#picCategory1 h3{

  color: white;

}



#picCategory1 h3::after{

  background-color: white;

}



#picCategory1 h3::before{

  background-color: white;

}



#picCategory1 .swiper-container{

  margin: auto;

  width: 100%;

  padding-top: 50px;

  padding-bottom: 50px;

}



#picCategory1 .swiper-slide{

  background-position: center;

  background-size: cover;

  width: 600px;

  height: 400px;

}



#picCategory1 .swiper-slide img {

  display: block;

  width: 100%;

}



#traffic .trafficText li{

  color: black;

  font-size: 18px;

  font-weight: 400;

  margin-bottom: 20px;

  border-bottom: none;

}



#traffic .trafficText p{

  color: #152961;

  font-size: 22px;

  font-weight: 900;

}



/* 響應式選單*/

@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: var(--navBgColor);

  }



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

    margin: 0 !important;

  }











  .collapse.in {

    display: block !important;

  }

}







/*響應式調整*/





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



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



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



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

  #about .compny{

    margin-top: 0px;

  }

}



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

  #logo{

    position: absolute;

    height: 100px;

    padding: 15px 0px 15px 0px;

  }



  .about1 {

    background: #292F33;

    display: inline-block;

    margin-left: 20px;

    padding: 50px 30px 150px 30px;

    position: relative;

    top: -300px;

    z-index: 100;

  }



  .about1 .line{

    width: 90px;

    border-bottom: 10px solid white;

    position: relative;

    left: -60px;

    top: -20px;

  }



  .about1 h1{

    font-family: 'Noto Serif TC', serif;

    margin-bottom: 20px;

    font-size: 30px;

    line-height: 1.3;

    color: white;

  }

  .about1 p{

    font-weight: 100;

    font-size: 10px;

    letter-spacing: 2px;

    line-height: 2.3;

    color: white;

  }



  .banner .about{

    width: 90%;

  }



  .banner .about h1{

    color: white;

    font-size: 20px;

    letter-spacing: 1.5px;

    margin-bottom: 15px;

  }



  .banner .about p{

    color: #edf2f4bf;

    font-size: 8px;

    font-weight: 200;

    letter-spacing: 1.2px;

    margin-bottom: 30px;

  }

  .catItem > a > img{

     width: 100%;

  }



  #about article{

    margin: auto;

    display: flex;

    flex-direction: column;

  }

  #about .compny h2{

  font-size: 36px;

  margin-bottom: 20px;

  }



  #about .compny p{

    color: rgb(74, 74, 74);

    font-size: 14px;

    line-height: 1.8;

    letter-spacing: 2px;

  }





  #about .compny{

    display: flex;

    flex-direction: column;

    padding-left: 0px;

    width: 100%;

  }



  .aboutFlex{

    width: 100%;

  }



  #about .aboutFlex{

    margin: auto;

  }



  #about .aboutItem{

    margin-top: 20px;

    width: 100%;

    background: #292F33;

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

  }

  

  #news li{

    width: 100%;

  }



  #picCategory article{

    width: 90%;

  }

  #picCategory .maintenance{

    display: flex;

    flex-direction: column;

    justify-content: center;

    width: 100%;

    margin-bottom: 50px;

  }



  #picCategory .maintenance-left{

    text-align: center;

    margin-bottom: 50px;

    line-height: 1.3;

  }



  #picCategory span{

    margin-bottom: 5px;

  }



  #picCategory a{

    text-align: center;

    font-size: 18px;

    margin-bottom: 10px;

    width: 100%;

  }



  #picCategory ul{

    display: flex;

    flex-direction: column;

    align-items: center;

    margin-bottom: none;

  }



  #picCategory li{

    text-align: center;

    width: 60%;

    margin-bottom: 50px;

  }



  #picCategory .maintenance-left{

    display: flex;

    flex-direction: column;

    font-size: 20px;

    width: 100%;

    margin-right: 50px;

  }



  #experience .content{

    display: flex;

    flex-direction: column;

  }



  #experience .home , .compny{

    padding: 20px 0px 20px 0px;

    display: flex;

    flex-direction: column;

    /* background: #8D99AE; */

    width: 100%;

  }



  #traffic article{

    width: 100%;

    padding-bottom: 0px;

  }



  #picCategory1 .swiper-container {

    margin: auto;

    width: 100%;

    padding-top: 50px;

    padding-bottom: 50px;

  }



  #picCategory1 .swiper-slide {

    background-position: center;

    background-size: cover;

    width: 100%;

    height: 100%;

  }



  #picCategory1 .swiper-slide img {

    display: block;

    width: 100%;

  }



  .item4{

  width: 100%;

}





  .sologan {

    font-size: 15px;

  }



  article>h3 {

    font-size: 32px;

  }



  .nav-justified>li {

    font-size: 12px;

  }

}



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



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