/*Icon*/
/*tl icon*/
.tl{position:fixed;right:0.5%;top:16%;z-index:1000;}
/*mob icon*/
.mob{position:fixed;right:0.5%;top:24%;z-index:1000;}
/*line icon*/
.line{position:fixed;right:0.5%;top:32%;z-index:1000;}


@media(max-width:428px){
  .tl, .mob, .line{
    transform:scale(0.7);  }
}



/*body*/
.row [class^="col-"] {
  padding:10px;
}

body[data-type="fullpage"]:not(#managehome) #wrap > :not(:last-child) { margin-bottom: 0px; }

#bodyinhome #wrap{
  background:#efefef;
}

/*logo*/

 #logo img {
   padding: 0 16px 16px;
 }

@media only screen and (max-width: 767px) {
  #logo a img {
    margin: 0 auto;
  }
}


/*top*/
.navbar-nav > li > a {
    color: #fff;
}


.topnavbar .container {
  text-align: justify;
  font-size: 0;
  /*text-align: center;*/  
  padding-top:0px;
}

.topnavbar .container::after {
  content: "";
  display: inline-block;
  width: 100%;
}

.topnavbar {
  background-color: #fff;
  top:0px;
  position: relative;
  z-index:100;
  width:100%;
  padding: .6rem 0;
  height: 90px;
  box-shadow: 0 5px 5px rgba(228,228,228,0.15);
}


@media(max-width:600px){
   .topnavbar .container {
  text-align: center;
 }
}


/*nav*/
#nav ul li a {
    white-space: nowrap;
    color: #333;
    line-height: 1.3;
    font-weight: normal;
    padding: 10px 18px;
    font-size: 95%;
    border-right: 1px #888 dotted;
    transition:all 0.5s;
}

#nav ul li a:hover{
    color: #1580c3;
}

#nav ul li a span{transition:all 0.5s;}

#nav ul li a:hover span{border-top:2px solid #1580c3;padding-top:5px;}


#nav ul li.current a  {
    color: #1580c3;  
}



/*Banner*/
.swiper-container {
  height: auto !important;
}

#bodyinhome .swiper-wrapper,#bodyinhome .swiper-slide {
  height: 0 !important;
  padding-bottom: calc(800 / 1920 * 100%); /* 注意圖片高度與寬度要去掉單位 */
}


#bodyinpage .swiper-wrapper,#bodyinpage .swiper-slide {
  height: 0 !important;
  padding-bottom: calc(600 / 1920 * 100%); /* 注意圖片高度與寬度要去掉單位 */
  }

.swiper-slide {
  width: 100% !important;
}


@media(max-width:767px){
#bodyinpage .swiper-wrapper,#bodyinpage .swiper-slide {
  height: 0 !important;
  padding-bottom: calc(800 / 1400 * 100%); /* 注意圖片高度與寬度要去掉單位 */
  }
}


/*Index_1*/
#bodyinhome .fcol.fcol-1{
  background:url(https://static.iyp.tw/409843/files/0167c3a7-906f-45a9-b49d-51d80c14e2a9.jpg)no-repeat;
  background-position:top center;
  background-position: top 65% center;
  background-size: cover;
  min-height: 650px;
  display: flex;
  align-items: center;
  justify-content: center;
}


#bodyinhome .fcol.fcol-1 .container{
  padding:0px 40px;
}

.ab.row h1{
  font-size:32px;
  color:#037ec4;
  font-weight:bold;
}

.ab.row en{
  font-size:16px;
  border-bottom:2px solid #037ec4;
  padding-bottom:5px;
}

.ab.row .tt{
  margin-top:40px;
  font-size:16px;
  letter-spacing:0.1rem;
  line-height:1.7rem;
}


.ac.row{
  width: 200px;
  background: rgba(255,255,255,0.65);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -30%;
  margin-left: 3%;
}


.ab.row a {
  color: #fff;
}

@media(max-width:428px){
.ab.row h1{
  font-size:28px;
  color:#037ec4;
  font-weight:bold;
  }
}


/*手機版順序調整*/
@media(max-width:767px){
  .ab.row .col-md-7 {
    order: 1;
  }
  .ab.row .col-md-5 {
    order: 0;
  }
}


@media(max-width:767px){
  #bodyinhome .fcol.fcol-1 .container{
   background:rgba(255,255,255,0.35);
   padding:20px;
   
  }
}

/*button*/
.hbtn{
      padding:var(--btn-padding);
      border-radius:var(--btn-radius);
      border:0;
      cursor:pointer;
      color:#fff;
      font-weight:600;
      font-size:16px;
      line-height:1;
      text-decoration:none;

      /* fallback */
      background-color: var(--color-start);

      /* 做一個左右的 200% 寬的漸層 */
      background-image: linear-gradient(
        to right,
        var(--color-start) 0%,
        var(--color-start) 50%,
        var(--color-end)   50%,
        var(--color-end) 100%
      );
      background-size: 200% 100%; /* 水平兩倍寬 */
      background-position: left;  /* 初始顯示左側的起始色 */

      transition: background-position var(--transition-duration) var(--transition-ease),
                  transform 160ms cubic-bezier(.2,.9,.3,1),
                  box-shadow 160ms;
      box-shadow: 0 6px 18px rgba(35,130,237,0.14);
      -webkit-tap-highlight-color: transparent;
    }

    /* hover / focus */
    .hbtn:hover,
    .hbtn:focus{
      background-position: right; /* 顯示終點色 */
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(234,171,19,0.12);
      outline: none;
    }

    .hbtn:active{
      transform: translateY(0);
      box-shadow: 0 6px 14px rgba(0,0,0,0.08);
    }

    @media (prefers-reduced-motion: reduce){
      .hbtn{
        transition:none;
        transform:none;
      }
      .hbtn:hover,
      .hbtn:focus{
        background-position:right;
      }
    }



/*Index_2*/
#bodyinhome .fcol.fcol-2{
  background:#fff;
  min-height:400px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

#bodyinhome .fcol.fcol-2 .container{
  padding:0px 0px 60px;
  max-width:100%;
  width:100%;
}


@media(max-width:767px){
  .sr.row .col-2{
     flex: 1 0 100%;
     max-width: 100%;
  }
}

.sr.row .col-md-4{
  margin-top:-5%;
  position:relative:
  z-index:99999;  
}

.sr.row .col-md-3{
  margin-top:5%;
}


.sr.row h1{
  font-size:32px;
  color:#037ec4;
  font-weight:bold;
}

.sr.row en{
  font-size:16px;
  border-bottom:2px solid #037ec4;
  padding-bottom:5px;
}



.sr.row .tt {
  margin-top: 40px;
  font-size: 15px;
  letter-spacing: 0.1rem;
  line-height: 1.6rem;
  width:200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top:-7%;
  background: #e7e7e5;  
}

@media(max-width:767px){
.sr.row .tt {
  margin-top: 40px;
  font-size: 15px;
  letter-spacing: 0.1rem;
  line-height: 1.6rem;
  width: 200px;
  min-height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -7%;
  background: #e7e7e5;
  margin-left: 20px;  
 }
}


.sr.row .ac.row{
  width: 200px;
  background: rgba(74,160,230,0.65);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -20%;
  margin-left: 3%;
}


.sr.row a {
  color: #fff;
}



.card{
    position:relative;
    width:100%;
    /*height:240px;*/
    overflow:hidden;
    border-radius:0px;
    cursor:pointer;
    border-radius: 100px 10px 10px 10px;
  }

 
  .card img{
    width:100%;
    height:300px;
    object-fit:cover;
    opacity:0.9;                     /* 預設 90% 透明度 */
    transition: transform .5s ease, opacity .5s ease;
    border-radius: 100px 10px 10px 10px;
  }

  /* 黑色底 */
  .card::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:100%;
    background:rgba(45,106,196,0.45);    /* 黑色半透明 */
    pointer-events:none;
  }

  /* 文字層 */
.text-box{
    position:absolute;
    left:5%;
    bottom:20%;
    color:white;
    padding:10px;
    z-index:2;
  }

  .text-box h3{
    margin:0;
    font-size:28px;
    font-weight:700;
    padding-bottom: 2%;
  }

  .text-box li{
    margin:6px 0 0;
    font-size:16px;
    opacity:0.9;
    letter-spacing: 0.1rem;
    line-height:1.4rem;
  }

  .text-box p{
    margin:6px 0 0;
    font-size:14px;
    opacity:0.9;
  }

@media(max-width:600px){
 .text-box{
    position:absolute;
    left:5%;
    bottom:0%;
    color:white;
    padding:20px;
    z-index:2;
 }
  }

  /* 滑鼠滑過效果 */
  .card:hover img{
    transform: scale(1.08);         /* 放大 */
    opacity:0.6;                    /* 透明度 60% */
  }




/*Index_3*/
#bodyinhome .fcol.fcol-3{
  background-image: linear-gradient(to bottom, #fff 65%, #efefef 35%);
  padding: 50px 20px;
}  


.lic.row {
  background:#127dd4;
  padding:20px 25px;
  border-radius:75px 75px 10px 10px;
  min-height:50px;
}


.lic.row h1{
  font-size:32px;
  color:#fff;
  font-weight:bold;
}

.lic.row en{
  font-size:16px;
  border-bottom:2px solid #fff;
  padding-bottom:5px;
  color:#fff;
}

.lic.row img{
  border:3px solid #fff;
}


/*Index_4*/
#bodyinhome .fcol.fcol-4{
  background:url(https://static.iyp.tw/409843/files/2ea9392b-d09c-416c-b837-c1f1440271d1.jpg)no-repeat;
  background-position:top center;
  background-size:cover;

}  


#bodyinhome .fcol.fcol-4 .container{
  padding:40px 20px 60px;
}

.pro_containner .header{
text-align:center;
margin-bottom:22px;
}
.title{font-size:32px; color:var(--blue-1); font-weight:700;}
.subtitle{font-size:18px; color:#2b4368; margin-top:6px}

/* 流程卡片列 */
.steps{
display:grid;
grid-template-columns: repeat(5, 1fr);
gap:18px;
align-items:stretch;
margin-top: 4%;  
}

.step{
background:var(--card-bg);
border-radius:var(--radius);
padding:18px;
box-shadow:var(--shadow);
display:flex;
flex-direction:column;
gap:12px;
transition:transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s;
cursor:default;
min-height:170px;
}
.step:focus-within, .step:hover{
transform:translateY(-6px);
box-shadow:0 18px 40px rgba(11,63,214,0.12);
}
.icon-wrap{
width:56px; height:56px; border-radius:12px; display:inline-grid; place-items:center; background:#eeb01a;
flex-shrink:0;
color: #fff;
font-size: 30px;
font-weight: bold;
margin-top: -20px;
}
.step-head {
  display: inline-block;
  /*align-items: center;*/
  /*gap: 12px;*/
  text-align: center;
  margin-top: -15px;
}
.step-title{font-weight:700; color:var(--blue-1); font-size:20px;margin-top: 10px;}
.step-desc{font-size:16px; color:#425060; line-height:1.45;text-align: justify;}

@media(max-width:767px){
  .icon-wrap{
    margin-top: -10px;
  }
  }

/* step number badge */
.badge{
margin-left:auto;
background:var(--blue-2);
color:white;
font-weight:700;
width:28px; height:28px; display:inline-grid; place-items:center; border-radius:8px; font-size:13px;
}


/* Responsive */
@media (max-width:1080px){
.steps{grid-template-columns: repeat(3, 1fr);}
}
@media (max-width:720px){
.steps{grid-template-columns: 1fr;}
.step{flex-direction:row; align-items:center; padding:12px}
.step-desc{font-size:13px}
.step{min-height:72px}
}

/* small utility */
.muted{font-size:12px;color:#6b7a91}
a.cta{display:inline-block;margin-top:12px;padding:8px 14px;border-radius:10px;background:var(--blue-2);color:white;text-decoration:none;font-weight:700}


/*service*/
/* 圖片排一列 */
#light .gallery {
  display: grid;
  gap: 12px;
}
#light .gallery img {
  width: 100%;
  cursor: pointer;
  border-radius: 6px;
}

/* Lightbox 背景 */
#light .lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Lightbox 主圖 */
#lightbox-img {
  max-width: 80%;
  max-height: 80%;
  border-radius: 8px;
}

/* 關閉按鈕 */
#light .close {
  position: absolute;
  top: 25px;
  right: 40px;
  font-size: 40px;
  color: white;
  cursor: pointer;
}

/* 上一張／下一張按鈕 */
#light .nav {
  position: absolute;
  top: 50%;
  font-size: 50px;
  color: white;
  cursor: pointer;
  user-select: none;
}
#light .prev { left: 50px; }
#light .next { right: 50px; }



/*Index_5~6*/
#bodyinhome .fcol.fcol-5,
#bodyinhome .fcol.fcol-6{
  display:none;
}



/*service*/
.tag-wrap {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6欄 */
  gap: 12px 16px; /* 上下12px 左右16px */
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.tag {
  border: 2px solid #1e8bff;      /* 藍色邊框 */
  color: #000;                     /* 黑色文字 */
  padding: 8px 12px;
  border-radius: 30px;             /* 膠囊圓角 */
  text-align: center;
  font-size: 17px;
  background: #fff;
  white-space: nowrap;             /* 防止換行 */
}

/* ----------- RWD ----------- */
@media (max-width: 1200px) {
  .tag-wrap {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .tag-wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .tag-wrap {
    grid-template-columns: repeat(1, 1fr);
  }
}



.tag-wrap2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 6欄 */
  gap: 12px 16px; /* 上下12px 左右16px */
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* ----------- RWD ----------- */
@media (max-width: 1200px) {
  .tag-wrap2 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .tag-wrap2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .tag-wrap2 {
    grid-template-columns: repeat(1, 1fr);
  }
}



/*水電服務*/
@media(max-width:767px){
  .sys.row .col-md-4{
   flex:0 0 100%;
   max-width:100%; 
  }
}



/*Contact*/
@media(max-width:767px){
  .sys.row .col-md-8{
     flex: 0 0 100%;
     max-width: 100%;
  }
}



/*h1*/
.h1title h1{
  font-size: 1em;
  color: #037ec4;
}  


/*form*/
.mark{
  background:none;
}


/*footer*/
#foot-nav{
  display:none;
}


#footer{
  color: #333;
  background-color: #003578;
  border-radius: 250px 250px 0 0;
  padding: 15px;
}  

#footer-service {
  color: #fff;
}

@media(max-width:767px){
#footer{
  color: #333;
  background-color: #003578;
  border-radius: 0;
  padding: 15px;
  }
}  


@media(max-width:767px){
  #footer .container .col-3{
    flex:0 0 50%;
    max-width:50%;
  } 
}


@media(max-width:480px){
  #footer .container .col-3{
    flex:0 0 100%;
    max-width:100%;
  } 
}


.footer-content .contact-icon a {
    display: inline-block;
    vertical-align: middle;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #1e9ee1;
    margin-left: .5rem;
    margin-right: .5rem;
}

.footer-content .contact-icon a i {
  font-size: 2.5rem;
  color: #fff;
  line-height: 2;
}

.fa, .fas {
    font-weight: 900;
}




/*lice*/
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.item {
  text-align: center;
  margin-left:5px;
}

.item img {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 10px;
  display: block;
  cursor: pointer;
}

.item figcaption {
  color: #fff;
  font-size: 16px;
}


.gallery .item {
  text-align: center;
  width: 95%;
}


.gallery img {
  width: 95%;
  cursor: pointer;
  border-radius: 6px;
  display: block;
  margin-bottom: 6px;
}

.gallery figcaption {
  font-size: 15px;
  color: #fff;
}


.gallery img {
  width: 100%;
  cursor: pointer;
  border-radius: 6px;
  display: block;
  margin-bottom: 6px;
}

.gallery figcaption {
  font-size: 16px;
  color: #fff;
}

@media(max-width:428px){
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
 }
}


/*map*/
.responsive-16by9 {
    display: block;
    position: relative;
    height: 0;
    overflow: hidden;
    padding: 0;
    padding-bottom: 56.25%;
}
.responsive-16by9 iframe {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}