/* 上方banner */
header.inside-header {height: auto;}
header .header-banner .header-banner-img {width: 100%;height:40vh;-webkit-filter:brightness(.6);filter:brightness(.6);}
header .header-banner .header-banner-img.about-banner{background: url('../img/about-banner.jpg') center;background-size: cover;}
header .header-banner .header-banner-img.service-banner{background: url('../img/service-banner.jpg') center;background-size: cover;}
header .header-banner .header-banner-img.projects-banner{background: url('../img/projects-banner.jpg') center;background-size: cover;}
header .header-banner .header-banner-img.contact-banner{background: url('../img/contact-banner.jpg') center;background-size: cover;}

header .header-banner .inside-banner-text {position:absolute;transform: translate(-50%,-50%);left:50%;top:45%;text-align: center;text-shadow: 0px 0px 10px rgba(31, 45, 58, 0.4);}
header .header-banner .inside-banner-text  h2{font-size: 4rem;font-weight: 600;color: var(--title-color);text-shadow: 0px 0px 10px rgba(31, 45, 58, 0.4);line-height: 6rem;}
header .header-banner .inside-banner-text .title-cn{color: #fff;text-shadow: 0px 0px 10px rgba(31, 45, 58, 0.4);}



/* 關於我們 內頁 */
section#inside-about {position: relative;background: url(../img/bg-texture.jpg) right repeat-y;background-size: 60%;padding: 100px 0 50px;z-index: 0;background-attachment: fixed;}
/* section#inside-about::before{content:"";width:20%;height:15%; position: absolute;left:0px;top:18%; background-color: #45978B;z-index: -1;} */
section#inside-about::after{content:"";width:30%;height: 20%; position: absolute;right:10%;bottom:5%; background-color: #F46036;z-index: -2;}
section#inside-about h4{color: var(--text-color);}
section#inside-about .inside-content{color:  var(--text-color);margin: 0;}

/* section#inside-about .inside-content.text-center > h4{text-align: center;} */
section#inside-about .inside-content.text-center .title-line-img{background: url(../img/title-line-img.jpg);background-size: cover; width: 80px;height:5px;margin:  0 15px;}
section#inside-about .inside-content p{text-align: justify;}

section#inside-about ul.vision{border-left: 2px solid var(--text-color);color:  var(--text-color);position: relative;}
section#inside-about ul.vision li{margin: 40px 0;}
section#inside-about ul.vision li::before{content: ""; position: absolute;width: 20px;height: 20px;border-radius: 20px;background-color:  var(--body-bg);left:-10px;border: 4px solid var(--title-color);}
section#inside-about ul.vision li h5{color:var( --title-color)}

section#inside-about .card-all{display: flex;flex-wrap: wrap;justify-content: space-between;}
section#inside-about .card-all .card{width: 47%;margin: 20px 0;padding: 15px;color:#333;}
section#inside-about .card-all .card .icon{width:80px;margin: 0 0 10px;}

/* 企業願景沿革 */
section#inside-about .inside-content-vision{position: relative;margin: 50px 0;}
section#inside-about .inside-content-vision .photo{position: relative;width: 80%;}
section#inside-about .inside-content-vision .photo::after{position: absolute;content: "";bottom:-70%;right:-20%;
  background: url(../img/inside-about-photo-2.jpg);width: 70%;min-height: 120%;background-size: cover; }

/* 經營理念 */
section#inside-about .inside-content-philosophy{margin: 50px 0;}
section#inside-about .inside-content-philosophy .photo{transform: translate(-10%,25%);width: 110%;z-index: -1;position: relative;}



/* 服務項目 內頁*/
section#inside-service{position: relative;background: url(../img/bg-texture.jpg) right repeat-y;background-size: 60%;padding: 100px 0;z-index: 0;background-attachment: fixed;}
ul.sub-menu li{font-size: 1.1rem;color: #fff;margin: 20px 0 0;position: relative;cursor: pointer;transition: all .3s ease-in;}

ul.sub-menu li:first-child{margin: 0;}
ul.sub-menu li::before{content: "";position: absolute;width: 2px; opacity: 0;  background-color: var(--title-color);left: -10%;top:50%;height: 2px;transition: all .3s ease-in;transform: scaleX(0);}
ul.sub-menu li:hover:before{transform: scaleX(10);transform-origin:right; opacity: 1; }
ul.sub-menu li:hover {color: var(--title-color);}
ul.sub-menu li.is-active {color: var(--title-color);}

ul.sub-menu li.is-active:before{transform: scaleX(10);transform-origin:right; opacity: 1; } 
ul.sub-menu li a{color: #fff;transition: all .3s ease-in;display: block;}
ul.sub-menu li.is-active a{color: var(--title-color); } 


section#inside-service .card {background-color: #fff;overflow: hidden;display: flex;flex-direction:row;margin-bottom: 20px;}
section#inside-service .card .photo{width: 40%;height: auto;overflow: hidden;position: relative;overflow: hidden;background-size: cover;}
section#inside-service .card .photo img{ position: relative; top: 50%; left: 50%; display: block; width: 100%; min-height: 100%; transform:translate(-50%,-50%);}
section#inside-service .card .photo > .label{position: absolute;display: inline-block;bottom: 20px;left: 0;background-color: rgba(255, 255, 255, 0.8);padding: 8px 20px;}
section#inside-service .card .photo > .label h4{padding: 0;margin: 0;color: #000;}

section#inside-service .card .text {width: 60%;padding: 20px;display: flex;flex-direction: column;justify-content: space-between;}
section#inside-service .card .text ol ,section#inside-service .content-all .inside-content ol{    list-style:auto;padding: 0 0  0 25px;}
section#inside-service .card .text ol > li ,section#inside-service .content-all .inside-content ol > li{    margin: 5px 0;}
section#inside-service .content {display: none;}
section#inside-service .content.is-active{display: block;}


/* 服務項目 內頁單獨項目*/
section#inside-service.inside-service-bg::before { content: ""; width: 30%; height: 30%; position: absolute; right: 0px; top: 40px; background-color: #F46036; z-index: -1; }

section#inside-service .content-all .inside-content{color:var(--text-color);margin: 40px 0 0 0;}
section#inside-service .content-all .inside-content:first-child{margin:0 ;}
section#inside-service .content-all .inside-content hr{color: #fff;border: 1px solid rgba(255, 255, 255, 0.2);}
section#inside-service .content-all .inside-content > h5{margin-bottom: 20px;}
section#inside-service .content-all .inside-content .box{width: 100%;background-color: #fff;border-radius: 0.25rem;overflow: hidden;display: flex;margin: 0 0 30px;}
section#inside-service .content-all .inside-content .box .photo{width:40%;min-height: 200px;background-size: cover; overflow: hidden;overflow: hidden;background-size: cover;background-position: center;}
section#inside-service .content-all .inside-content .box .photo img{width: 100%;}
section#inside-service .content-all .inside-content .box .text{padding: 15px;width:60%;}
section#inside-service .content-all .inside-content .box .text p{color: #212529;}
section#inside-service .content-all .inside-content .box .text p span{color: #878787;}


/* 工程實績 內頁*/
section#inside-projects{position: relative;background: url(../img/bg-texture.jpg) right repeat-y;background-size: 60%;padding: 100px 0;z-index: 0;background-attachment: fixed;}

/* 工程實績 內頁*/
section#inside-projects .content-all .inside-content{color:var(--text-color);margin: 40px 0 0 0;}
section#inside-projects .content-all .inside-content:first-child{margin:0 ;}
section#inside-projects .content-all .inside-content hr{color: #fff;border: 1px solid rgba(255, 255, 255, 0.2);}
section#inside-projects .content-all .inside-content h5{margin-bottom: 20px;}
section#inside-projects .content-all .inside-content .box{width: 100%;background-color: #fff;min-height: 300px;border-radius: 0.25rem;overflow: hidden;margin: 20px 0;cursor: pointer;}
section#inside-projects .content-all .inside-content .box a{display: block;border: 1px solid rgba(0, 0, 0, 0);cursor: pointer;}
section#inside-projects .content-all .inside-content .box .photo{width: 100%;height: 220px;overflow: hidden;background-size: cover;background-position: center;position: relative;}



section#inside-projects .content-all .inside-content .box .photo .photo-bg{width: 100%;min-height: 100%;position: absolute;background-color: rgba(68, 131, 130, 0.6);transition: all .3s ease-in;opacity: 0;}
section#inside-projects .content-all .inside-content .box .photo .photo-bg i{position: absolute;transform: translate(-50%,-50%);left:50%;top:50%;font-size: 2rem;color: #fff;}
section#inside-projects .content-all .inside-content .box .photo img{width: 100%;}
section#inside-projects .content-all .inside-content .box:hover .photo .photo-bg{opacity: 1;}
section#inside-projects .content-all .inside-content .box .text{padding: 15px;}
section#inside-projects .content-all .inside-content .box .text p{color: #212529;}
section#inside-projects .content-all .inside-content .box .text h5{color: #212529;}
section#inside-projects .content-all .inside-content .box .place{color: #878787;}
section#inside-projects .content-all .inside-content .box .text p span{color: #878787;}
section#inside-projects .content-all .inside-content .box .text .label-text{background-color: #212529;color: #fff;display: inline-block;padding: 5px 10px;margin-bottom: 5px;}


section#inside-projects .inside-content .label{width: 100%;text-align: right;}


/* 下拉選單樣式 */
section#inside-projects .inside-content .label select{
   /*移除箭頭樣式*/
   appearance:none;
   -moz-appearance:none;
   -webkit-appearance:none;
    cursor: pointer;outline: none;color: #1F2D3A;background: url("../img/select-arrow.png") no-repeat 95% center transparent;
    background-color: #fff;  border:0px;outline: none;width:180px;height:34px;
    padding-left:10px;
    padding-right:40px;}

/*IE隱藏箭頭樣式*/
section#inside-projects .inside-content .label select::-ms-expand { display: none; }
section#inside-projects .inside-content .label select:focus{ box-shadow: 0 0 2px 2px var( --link-color);; }


/* 頁碼樣式 */

section#inside-projects .page-number{width: 100%;margin: 40px 0 0;}

section#inside-projects .page-number .pagination{justify-content: center;font-weight: 400;font-size: .8rem;}
section#inside-projects .page-number .pagination .page-item.disabled a{color: rgba(255, 255, 255, 0.2);}
section#inside-projects .page-number .pagination  .page-item  {margin: 0 5px;}
section#inside-projects .page-number .pagination  .page-item.active .page-link {
  background-color: #394d5c;
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
section#inside-projects .page-number .pagination  .page-item .page-link{  color:rgba(255, 255, 255, 1);border:1px solid #435461;background-color: transparent;transition: all .3s ease-in;}
section#inside-projects .page-number .pagination  .page-item .page-link:hover{
  background-color: rgba(67, 84, 97, 0.5);}




.outer { margin:0 auto; max-width:800px;width: 100%;}
#big-pic .item { background: #C9C9C9; padding: 120px 0px;border-radius: 3px;height: 400px;background-position: center;}
#sm-pic {margin: 20px 0;}
#sm-pic .item { background: #C9C9C9; border-radius: 3px; cursor: pointer; height:130px;background-size: cover;background-position: center;}
#sm-pic .owl-item{cursor: pointer;}
#sm-pic .owl-item.current{border: 2px solid var(--link-color-hover);}

.owl-theme .owl-nav [class*='owl-'] { -webkit-transition: all .3s ease; transition: all .3s ease; }
.owl-theme .owl-nav [class*='owl-'].disabled:hover { background-color: #D6D6D6; }
#big-pic.owl-theme { position: relative; }
#big-pic.owl-theme .owl-next, #big-pic.owl-theme .owl-prev { background:#333; width: 22px; line-height:40px; height: 40px; margin-top: -20px; position: absolute; text-align:center; top: 50%; }
#big-pic.owl-theme .owl-prev { left: 10px; }
#big-pic.owl-theme .owl-next { right: 10px; }
#sm-pic.owl-theme .owl-next, #sm-pic.owl-theme .owl-prev { background:#333; }




#sm-pic  .owl-nav{ position:absolute; left:0; top:35%; width: 100% ;z-index: 1;}
#sm-pic  .owl-nav .owl-prev,#sm-pic  .owl-nav .owl-next{ position: absolute; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out;  display: block; z-index: 1000; cursor: pointer;opacity: 0;}
#sm-pic:hover .owl-nav .owl-prev,#sm-pic:hover .owl-nav .owl-next{opacity: 1;} 
#sm-pic  .owl-nav .owl-prev { left: 0px; top:0%; }
#sm-pic  .owl-nav .owl-next { right:5px; top:0%; }
#sm-pic  .owl-nav .owl-prev span ,#sm-pic .owl-nav .owl-next span{ font-size: 3rem; color: #fff; position: absolute;transform: translate(-50%,-50%);transition: all .3s ease-in;width: 40px; background-color: rgba(0, 0, 0, 0.6);}
#sm-pic  .owl-nav .owl-prev:focus { outline: 0; }






/* 聯繫我們 */
section#inside-contact {position: relative;background: url(../img/bg-texture.jpg) right repeat-y;background-size: 60%;padding: 100px 0 100px;z-index: 0;background-attachment: fixed;}
/* section#inside-contact::before{content:"";width:40%;height:50%; position: absolute;left:0px;bottom:30%; background-color: #45978B;z-index: -1;} */
section#inside-contact .photo{width: 120%;}

section#inside-contact .form-content{background-color: #fff;padding:40px 20px;border-radius: .25rem;transform: translate(0,40px);}
section#inside-contact .form-content h5{margin: 0;}

form#contact-form {margin: 10px 0 0;}
form#contact-form .input-group {position: relative;display: flex; flex-wrap: wrap; align-items: stretch; width: 100%;}
form#contact-form .input-group input,form#contact-form .input-group textarea{
  width: 100%;
  margin: 10px 0;
  padding: 10px;
  font-size: .9rem;
  font-weight: 300;
  color: #333;
  border-radius: .1rem;
  border: 1px solid rgb(240, 240, 240);
  overflow: auto;
  background-color:#f2f2f2;
}
form#contact-form .input-group textarea{ height:180px; overflow: auto; resize: none; }
form#contact-form .input-group input:focus,form#contact-form .input-group textarea:focus{ outline:2px solid var(--link-color-hover); border: 1px solid transparent; }







@media (max-width: 1920px){

}

@media (max-width: 1199px) {

  /* 關於我們 內頁 */
  section#inside-about  .vision-content{margin: 100px 0 0;}
  

   section#inside-about::after{height: 15%; right:0%;bottom:5%;}
   section#inside-about .inside-content-philosophy .photo { transform: translate(-20%,30%); width: 140%; }

/* 聯繫我們 */
section#inside-contact .photo { width: 100%; }
section#inside-contact .form-content { transform: translate(0,0%); width: 96%;margin: 0 auto;display: block;position: relative;top:-15%}
section#inside-contact {padding: 100px 0 0;z-index: 0;background-attachment: fixed;}


}


@media (max-width: 991px) {
    /* 關於我們 內頁  */
    section#inside-about::after { height: 20%; right: 0%; bottom: 10%; width: 70%; }
    section#inside-about .inside-content-philosophy .photo { transform: translate(0%,0%); width: 100%; }
  
    /* 企業願景沿革 */
    section#inside-about .inside-content-vision .photo{position: relative;width: 70%;}
    section#inside-about .inside-content-vision .photo::after{position: absolute;content: "";bottom:-40%;right:-40%;
      background: url(../img/inside-about-photo-2.jpg);width: 70%;min-height: 120%;background-size: cover; }



  /* 工程實績 內頁*/
  .sub-menu-mb{padding: 0;margin: 0};



}


@media (max-width: 767px) {

  .content-all{margin: 40px 0 0;}





  /* 服務項目 內頁*/
  section#inside-service{padding: 0 0 100px;}
  ul.sub-menu {padding: 0;width: 100%;padding: 15px;background-color: var(--title-color);}
  ul.sub-menu li{ margin: 20px 0 0;color: #fff;text-align: center;} 
  ul.sub-menu li::before{display: none;}
  ul.sub-menu li:hover {color: rgb(82, 59, 33);}
  ul.sub-menu li.is-active{color:#fff; } 
  ul.sub-menu li a{color: #fff;}
  ul.sub-menu li.is-active a{color:#fff;font-size: 1.4rem;font-weight: 600; } 



  section#inside-service .card { display: flex; flex-direction: column; }
  section#inside-service .card .photo { width:100%; height: 400px;}
  section#inside-service .card .text { width: 100%; }
 
  /* 服務項目 內頁單獨項目*/
  section#inside-service.inside-service-bg::before { width: 80%; height: 30%; right: 0px; top:auto;bottom:0; } 
  section#inside-service .content-all .inside-content .box .photo{width:70%;background-size: cover;}
  /* 工程實績 內頁*/
  section#inside-projects{padding: 0 0 100px;}

  section#inside-projects .content-all .inside-content .box { min-height: 280px; }
  section#inside-projects .content-all .inside-content .box .photo{height:150px;}
  section#inside-projects .content-all .inside-content .box .text { padding: 10px; }
 
  /* 工程實績 單獨輪播*/
  #big-pic .item { height: 250px;}
  #sm-pic .item { height:100px;}
}


@media (max-width: 576px) {
 /* 關於我們 內頁  */
  section#inside-about{padding: 20px 0;}
  section#inside-about::after{height: 15%; right:0%;bottom:5%;}
  section#inside-about .card-all .card { width: 48%; margin: 11px 0;}


 /* 服務項目 內頁*/
  section#inside-service .card .photo { width:100%; height: 250px;}
  


  /* 工程實績 */


  /* 下拉選單樣式 */
  section#inside-projects .inside-content .label select{ /*移除箭頭樣式*/ width:auto;}

  section#inside-contact {padding: 50px 0 0;}



  /* 工程實績 單獨輪播*/
  #sm-pic .item { height:50px;}
  #sm-pic .owl-nav { top: 25%; }

  /* 聯繫我們 */
   section#inside-contact {padding: 20px 0 0;}
   section#inside-contact .photo { width: 100%; height: 200px;overflow: hidden;position: relative;}
   section#inside-contact .photo img{ position: absolute;top: -50%;}
}