body { font-family: 'Noto Sans TC','Microsoft JhengHei',Arial,sans-serif; font-weight: 300;overflow-x: hidden; 
  margin: 0; padding: 0; 	border: 0; background: var(--body-bg);
 box-sizing: border-box;letter-spacing: .1rem;position: relative;overflow: visible;}
body.is-active { overflow: hidden;}
html {font-size:16px;}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
 font-family: 'Noto Sans TC','Microsoft JhengHei',Arial,sans-serif;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol,ul{list-style: none;}

a{ text-decoration: none; text-decoration: none;  } a:hover{ text-decoration: none;}
.clear{clear: both;}
p{line-height: 1.8rem;}


:root{
 --body-bg:#1F2D3A;
 --link-color:#00b6b3;
 --link-color-hover:#23e8e5;

 --title-color:#AE883F;
 --text-color:#dce8f2;
}
.responsive-img{width: 100%;transition: all .3s ease-in;}

/* ----- 標題 start ----- */
.title{position: relative;margin: 0 0 30px;}
.title.center{text-align: center;}
.title.center .title-cn{justify-content: center;}

.title h2{font-weight: 500;position: relative;display: block;letter-spacing: 3px;font-size: 3rem;}
.title h2{color: var(--title-color);}
.title .title-cn{display: flex;align-items: center;}
.title .title-cn .title-line-img{background: url(../img/title-line-img.jpg);background-size: cover; width: 80px;height:5px;margin:  0 15px;}
.title .title-cn .title-line-img.alone{margin:  0 15px 0 0;}
.title .title-cn h4{color: var(--text-color);font-weight: 300;}








.nav-black { background-color: rgba(0, 0, 0, 0.5); position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -2; display: none;}
.nav-black.is-active { display: block; }


/* header start*/
header {position: relative; background: url(../img/bg-texture.jpg) right repeat-y;background-size: 60%;z-index: 1;height: 100vh;background-attachment: fixed;}
header.is-active {overflow: hidden;}
header .container {z-index: 999;}
header .container .logo {display: flex;align-items: center;padding: 20px 30px;}
header .container .logo h1{color: #fff;margin:0 0 0 15px ;}
header .container .logo-img{ width: 60px;}
header .container .header-content {display: flex;justify-content: space-between;align-items: center;}

header .container nav{z-index: 1}
header .container nav ul{display: flex;padding: 0;margin: 0;}
header .container nav ul li{text-align: center; height: 2rem;overflow: hidden;display: inline-block;width: 120px;}
header .container nav ul li a{display: block;color: var(--text-color);}
header .container nav ul li p{padding: 0;margin: 0;height: 2rem;transition: all .4s ease-in;font-size: 1.1rem;opacity:1;}
header .container nav ul li:hover p{transform: translateY(-2rem);}
header .container nav ul li:hover a{color: var(--title-color);}

header .container nav ul li.is-active a{color: var(--title-color);}
header .container nav ul li.is-active p{transform: translateY(-2rem);}

button.hamburger{display: none;}

header .header-banner {display: flex;position: relative;z-index: -99;}
header .header-banner .banner-text{position:absolute;transform: translate(-50%,-50%);left:52%;top:35%;}
header .header-banner .banner-text h2{font-size: 4rem;font-weight: 600;color: #fff;text-shadow: 0px 0px 10px rgba(31, 45, 58, 0.4);line-height: 6rem;}


/* banner */
header .header-banner .header-banner-img{width: 95%;height:95vh;}
/* header .header-banner .header-banner-img.index-banner{background: url('../img/index-banner-1.jpg') center;width: 95%;height:95vh;background-size: cover;} */
header .header-banner .header-banner-img .index-banner{width: 95%;height:90vh;background-color: #fff;background: url('../img/index-banner-1.jpg') center;background-size: cover;z-index: -1;animation: slider 44s linear infinite;visibility: hidden;  opacity: 0; position:absolute;}

header .header-banner .header-banner-img .index-banner:nth-child(1){background: url('../img/index-banner-1.jpg') center; animation-delay: 0s;background-size: cover;}
header .header-banner .header-banner-img .index-banner:nth-child(2){background: url('../img/index-banner-2.jpg') center; animation-delay: 11s;background-size: cover;}
header .header-banner .header-banner-img .index-banner:nth-child(3){background: url('../img/index-banner-3.jpg') center; animation-delay: 22s;background-size: cover;}
header .header-banner .header-banner-img .index-banner:nth-child(4){background: url('../img/index-banner-4.jpg') center; animation-delay: 33s;background-size: cover;}
@keyframes slider {
  0% {
   visibility: hidden;
   opacity: 0;
  }
  2.272727% {
   visibility: visible;
   opacity: 1;
  }
 
  25% {
   visibility: visible;
   opacity: 1;
  }
  27.272727%,
  100% {
   visibility: hidden;
   opacity: 0;
  }
}


header .header-banner .header-banner-img .container{margin: 0;position:absolute;right: 0;background-color: #fff;}
header .header-banner .scorll{color:var(--text-color);transform: rotate(-90deg);position: absolute;right: 1%;bottom: 15%;font-size: .8rem;}
header .header-banner .scorll::before{content: "";position: absolute;
 top: 10px;
 left: -72px;
 background: var(--text-color);
 width: 62px;
 height: 1px;
 animation: scrollPromotion 1.8s cubic-bezier(1,0,0,1) infinite;}

 @keyframes scrollPromotion
 {
   0%{transform:scale(0,1);transform-origin:100% 0}
   50%{transform:scale(1,1);transform-origin:100% 0}
   50.1%{transform:scale(1,1);transform-origin:0 0}
   100%{transform:scale(0,1);transform-origin:0 0}
 }




section {padding: 100px 0;}
section .content.white{color:var(--text-color);}
section .content h5{margin-bottom:15px;}

/* 關於我們 start*/
section#index-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#index-about::before{content:"";width:40%;height:60%; position: absolute;left:0px;top:40px; background-color: #45978B;z-index: -1;}
section#index-about .content-img {width: 100%;}






/* 服務項目 start*/
section#index-service{position: relative;}
section#index-service .card {cursor: pointer;overflow-y: hidden;border:none;min-height:450px; height: 450px; overflow: hidden;margin: 0 0 20px;}
section#index-service .card a{display: block;color:#333}
section#index-service .card .card-img{height: 220px;overflow: hidden;}
section#index-service .card .card-text{position: relative;  padding: 15px;top:-30px;}
section#index-service .card .card-text  .card-icon{width: 70px;margin: 0 0 15px;}

section#index-service .card:hover .card-img img{transform-origin: center;transform: scale(1.1);}
.card-icon-color{fill:#fff;transition: all .3s ease-in;}
section#index-service .card:hover .card-icon-color{fill:var(--link-color-hover);}


/* 工程實績 start*/
section#index-projects{position: relative;background: url(../img/bg-texture.jpg) left repeat-y;background-size: 60%;padding: 100px 0 50px; z-index: 1;background-attachment: fixed;}
section#index-projects::before{content:"";width:40%;height:60%; position: absolute;right:0px;top:40px; background-color: #F46036;z-index: -1;}
section#index-projects .content-img {width: 100%;}
section#index-projects .content {margin: 0 0 20px;}
section#index-projects .content ul {padding:0 ;}
section#index-projects .content ul li:first-child{margin:0;}
section#index-projects .content ul li{margin: 10px 0;}

/* 工程實績 owl*/
.owl-index-projects-all{width: 60%;position: absolute;top:30%;right: 0;}
.owl-index-projects-all .item{width: 100%;height: 390px;}
.owl-index-projects .owl-nav{ position:absolute; left:0; top:45%; width: 100%;}
.owl-index-projects .owl-nav .owl-prev,.owl-index-projects .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;}
.owl-index-projects:hover .owl-nav .owl-prev,.owl-index-projects:hover .owl-nav .owl-next{opacity: 1;} 
.owl-index-projects .owl-nav .owl-prev { left: 0px; top:0; }
.owl-index-projects .owl-nav .owl-next { right:5px; top:0; }
.owl-index-projects .owl-nav .owl-prev span ,.owl-index-projects .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);}
.owl-index-projects .owl-nav .owl-prev:focus { outline: 0; }


/* 戰略夥伴 start*/
section#index-parner{position: relative;background: url(../img/bg-texture.jpg) left repeat-y;background-size: 60%;padding:100px 0 100px;z-index: 0;background-attachment: fixed;}


/* 戰略夥伴 start*/
.owl-index-parner-all .item .card {overflow:hidden;height: 120px;position: relative;text-align: center;}
.owl-index-parner-all .item .card a{display: block;width: 100%;height: 100%;line-height: 120px;}
.owl-index-parner-all .item .card a h4{line-height: 120px;color: #333;}
.owl-index-parner-all .item .card a img{width: 60%; top: 50%; left: 50%; position: absolute; transform: translate(-50%,-50%);display: block;}
/* 戰略夥伴 owl*/
.owl-index-parner-all .owl-theme .owl-dots .owl-dot span{background-color: #fff  !important;transition: all .3s ease-in;opacity: .5;}
.owl-index-parner-all  .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {background-color: var(--link-color-hover) !important;opacity: 1;}
.owl-index-parner-all  .owl-theme .owl-nav.disabled + .owl-dots { margin-top:40px; }


/* footer start*/
footer{background-color: #374F66;color: rgb(229, 238, 240);}
footer .container{padding: 20px 15px 12px;}
footer h5{font-size: 1.1rem;font-weight:500 ;}



footer .info{display: flex;flex-direction: column;min-height: 100%;}
footer ul.footer-contact{display:flex;padding: 0;}
footer ul.footer-contact li{margin-right: 15px;font-size: .9rem;}


footer .footer-link ul{display: flex;padding: 0;justify-content: space-between;width: 80%;}
footer .footer-link ul li > a  {color: #b1d2d2;transition: all .3s ease-in;}
footer .footer-link ul li > a:hover  {color: #ffffff;}


footer .m-contact-content .community{display: flex;}
footer .m-contact-content .community .icon{width: 30px;margin: 0 15px 0 0;}
footer .m-contact-content .community a{color: var( --link-color);transition: all .3s ease-in;}
footer .m-contact-content .community a:hover{color: var( --link-color-hover);}



 footer .copyright{width: 100%;padding: 0px;background-color: #18222d;}
 footer .copyright{width: 100%;padding: 0px;background-color: #18222d;}
 footer .copyright .content {display: flex;justify-content: space-between;}
 footer .copyright .content p{color: #6a757d;font-size: .9rem;margin: 0;}
 
 footer .copyright .content a{color: var(--text-color);font-size: 1rem;display: block;transition: all .3s ease-in;}
 footer .copyright .content a:hover{color: #fff;}

@media (max-width: 1920px){



}

@media (max-width: 1199px) {


 /* footer start*/
 footer ul.footer-contact{flex-direction: column;}
}


@media (max-width:991px) {
 /* header start*/
 header { height: auto; }
 header > .container {margin: 0;padding: 0;max-width:100%;}

 header .container nav{margin-bottom:1rem ;width: 100%;position: absolute;background-color: #1F2D3A;top:-500px;width: 100%;transition: all .3s ease-in;opacity: 0;}
 header .container nav.is-active{top:60px;opacity: 1;}
 header .container nav ul{flex-direction:column;}
 header .container nav ul li{height: 6rem;overflow: visible;width: 100%;}

 header .container nav ul li.is-active p{transform: translateY(0rem);}
 header .container nav ul li a{border-bottom: 1px solid rgb(62, 70, 75);}
 header .container nav ul li p{display: inline-block; height: 6rem; font-size: 1.2rem;font-weight: 400; line-height: 6rem;margin: 0 2px;}
 header .container nav ul li:hover p{transform: translateY(0rem);}

 button.hamburger{display: block;}

 header .header-banner { transform: translateY(0rem); }
 header .header-banner .header-banner-img { width: 100%; height: 60vh; }
 header .header-banner .scorll { display: none; }

 header .header-banner .banner-text h2 { font-size: 3rem; line-height: 4rem; }

 /* 關於我們 start*/
 section#index-about::before{width:20%;height:60%;left:0px;top:40px;}

 /* 服務項目 start*/
 section#index-service .card .card-img { height: 140px; }
 section#index-service .card { min-height:400px; height:400px; }
 /* 工程實績 start*/
 section#index-projects::before { width: 20%; height:60%; right: 0px; top: 160px; }
 .owl-index-projects-all { width: 50%; }
 .owl-index-projects-all .item { height: 230px; }


 /* 戰略夥伴 start*/
 .owl-index-parner-all .item .card {overflow:hidden;height:100px;position: relative; }
 .owl-index-parner-all .item .card a h4{line-height: 100px;font-size: 1.2rem;}
 .owl-index-parner-all .item .card a{display: block;width: 100%;height: 100%;}
 .owl-index-parner-all .item .card a img{width: 80%; top: 50%; left: 50%; position: absolute; transform: translate(-50%,-50%);display: block;}

 /* footer start*/
 footer ul.footer-contact{flex-direction: column;}
 footer .footer-link ul{width: 100%;}

}



@media (max-width: 767px) {
 .container { max-width: 760px; }
 .title{margin: 30px 0;}
 section { padding:50px 0; }
 header .container nav ul li.is-active p { transform: translateY(0rem); }

 .big_btn{width: 70%;border-radius: 0.25rem;}


header .header-banner .header-banner-img .index-banner{width: 100%;height:65vh;}
 /* 關於我們 start*/
 section#index-about { padding: 50px 0; }
 section#index-about .content-img { margin: 20px 0 0; }
 section#index-about::before{width:45%;height:50%;left:0px;top:auto;bottom: 20px;}
 section#index-projects::before { width:45%; height:60%; right: 0px; top: 300px; }


 /* 服務項目 start*/
 section#index-service .card .card-img { height:230px; }
 section#index-service .card { min-height:auto; height:auto; }


 /* 工程實績 start*/
 section#index-projects{padding:50px 0;}

 /* 工程實績 owl*/

 .owl-index-projects-all { width: 100%; padding: 0 15px; top:auto; right: 0; bottom: -190px;z-index: 999; }


 

/* 戰略夥伴 start*/
 section#index-parner { padding: 200px 0 100px; }


  /* footer start*/

  footer .footer-link ul{display: none;}
  footer .m-contact-content{margin: 40px 0 0;}
  footer .copyright .content { flex-direction: column; }
  footer .copyright .content p span{ display: block; }
  footer .copyright .content a { margin: 20px 0 0; }
}

@media (max-width: 576px) {
 html {font-size:14px;}
 h5{font-size: 1.2rem;line-height: 1.8rem;}
 header .container .logo { padding: 10px 20px; }
 header .container .logo-img{ width: 40px;}
 header .container .header-content .logo h1{ font-size: 2rem; line-height: 3rem;}
 header .header-banner .banner-text h2 { font-size: 2.4rem; line-height: 3rem; }
 header .header-banner .banner-text { transform: translate(0,-50%); left: 0; }
 /* 關於我們 start*/
 section#index-about::before { height: 30%; left: 0px; bottom: -10px; }

 /* 工程實績 owl*/
 section#index-projects::before { width: 55%; height: 50%; right: 0px; top: 450px; }




 /* 戰略夥伴 start*/
 .owl-index-parner-all .item .card {height:80px; }
 .owl-index-parner-all .item .card a h4{line-height: 80px;}
 /* footer start*/

}