html, body {
    overflow-x: hidden;

}
.service-item .sptext-1,.service-item .sptext-2,.service-item .sptext-3,.service-item .sptext-4,.service-item .sptext-5{
    position: relative;
    display: inline-block;
    overflow: hidden;

}
.service-item .sptext-1{

}
@media screen and (max-width:1280px) { 
    .service-item .sptext-1, .service-item .sptext-2, .service-item .sptext-3, .service-item .sptext-4, .service-item .sptext-5{
        /*display: none;*/
        line-height: 79px;
    }
}

.service-item .sptext-1,
.service-item .sptext-2,
.service-item .sptext-3,
.service-item .sptext-4,
.service-item .sptext-5{
  /*-webkit-text-stroke: 1px red;
  font-family: arial; color: green;*/
   /*text-shadow:  1px 1px #cac8c8,-1px -1px #cac8c8,1px -1px #cac8c8,-1px 1px #cac8c8;*/
   /*color: transparent ;
    -webkit-text-fill-color:transparent;   
    -webkit-text-stroke:1px #fff;*/
}

.service-item .sptext-1{
    /*color: transparent ;
    -webkit-text-fill-color:transparent;   
    -webkit-text-stroke:2px #fff;*/  
}


.service-item .sptext-2{
    color: transparent ;
    -webkit-text-fill-color:transparent;   
    -webkit-text-stroke:2px #eb6732;  
}
.service-item .sptext-3{
    color: transparent ;
    -webkit-text-fill-color:transparent;   
    -webkit-text-stroke:2px #009fe8;  
}
.service-item .sptext-4{
    color: transparent ;
    -webkit-text-fill-color:transparent;   
    -webkit-text-stroke:2px #000000;  
}
.service-item .sptext-5{
    color: transparent ;
    -webkit-text-fill-color:transparent;   
    -webkit-text-stroke:2px #ffe100;  
}

/*01*/
.service-item .sptext-1{
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-text-stroke: 2px #fff;
    background: linear-gradient(#fff 0 100%) right/0 no-repeat;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    transition: 1.5s linear;
}
/*02*/
.service-item .sptext-2{
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-text-stroke: 2px #eb6732;
    background: linear-gradient(#eb6732 0 100%) left/0 no-repeat;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    transition: 1.5s linear;
}
/*03*/
.service-item .sptext-3{
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-text-stroke: 2px #009fe8;
    background: linear-gradient(#009fe8 0 100%) right/0 no-repeat;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    transition: 1.5s linear;
}
/*03*/
.service-item .sptext-4{
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-text-stroke: 2px #000000;
    background: linear-gradient(#000000 0 100%) left/0 no-repeat;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    transition: 1.5s linear;
}
/*03*/
.service-item .sptext-5{
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-text-stroke: 2px #ffe100;
    background: linear-gradient(#ffe100 0 100%) right/0 no-repeat;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    transition: 1.5s linear;
}
.service-item:hover .sptext-1,
.service-item:hover .sptext-2,
.service-item:hover .sptext-3,
.service-item:hover .sptext-4,
.service-item:hover .sptext-5{
   background-size: 100%;
}
@media screen and (max-width:1280px) { 
    .service-item .sptext-1,
    .service-item .sptext-2,
    .service-item .sptext-3,
    .service-item .sptext-4,
    .service-item .sptext-5{
        display: none !important;
    }
}
/*
.service-item:hover .sptext-1::after{
    content: attr(text-data);
    position: absolute;
    top: 0;
    left: 0;
    background:#eb6732;
    -webkit-background-clip: text;
    color: transparent;
    animation: changeColor 1s linear;
}

.service-item:hover .sptext-2::after{
    content: attr(text-data);
    position: absolute;
    top: 0;
    left: 0;
    background:#eb6732;
    -webkit-background-clip: text;
    color: transparent;
    animation: changeColor 1s linear;
}
.service-item:hover .sptext-3::after{
    content: attr(text-data);
    position: absolute;
    top: 0;
    left: 0;
    background:#009fe8;
    -webkit-background-clip: text;
    color: transparent;
    animation: changeColor-r 1s reverse both;
}
.service-item:hover .sptext-4::after{
    content: attr(text-data);
    position: absolute;
    top: 0;
    left: 0;
    background:#000000;
    -webkit-background-clip: text;
    color: transparent;
    animation: changeColor 1s linear;
}
.service-item:hover .sptext-5::after{
    content: attr(text-data);
    position: absolute;
    top: 0;
    left: 0;
    background:#ffe100;
    -webkit-background-clip: text;
    color: transparent;
    animation: changeColor-r 1s reverse both;

}
@keyframes changeColor{
   0%{
        width: 0%;

    }
    100%{
        width: 100%;
    }
}

@keyframes changeColor-r{

    from{
        
        width: 0%;
    }
    to{
       
        width: 100%;
    }
    
}
*/        
/*
@keyframes changeColor-2{
            from{
                 width: 0%;
                right: 100px;
            }
            to{
                width: 100%;
                top: 0;
                
            }
        }
        */
        .title-box{

        }
        .title-box:after{

        }

        .about-img-box{
          position: relative; /*將整塊<div>當作基準位置*/
      }


      .about-img-box:before{
          z-index: 999;
          content: ""; /*沒用到仍然要寫，雙引號內容留空*/
          content: url('../images/about/about.jpg');
          width: 100%; /*設定長方形寬度*/
          height: 100%; /*設定長方形高度*/
          position: absolute; /*設定與<div>區塊的相對位置*/
          left: 0px; /*從<div>區塊左上角起算，與左邊距離為0，即靠左的意思*/
          top: 0; /*從<div>區塊左上角起算，與上方距離為100%時才開始產生這個長方形，因此長方形會在整塊*/

      }
      .about-img-box:hover:before{
          z-index: 999;
          content: ""; /*沒用到仍然要寫，雙引號內容留空*/
          content: url('../images/about/about.jpg');
          width: 100%; /*設定長方形寬度*/
          height: 100%; /*設定長方形高度*/
          position: absolute; /*設定與<div>區塊的相對位置*/
          left: 0px; /*從<div>區塊左上角起算，與左邊距離為0，即靠左的意思*/
          top: 0; /*從<div>區塊左上角起算，與上方距離為100%時才開始產生這個長方形，因此長方形會在整塊*/

      }
      .about-img-box img{
        transition: all .3s ease;
    }
    .about-img-box:hover img{
      opacity: .9;
      transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  } 

  .works-item-box{

  }
  .works-item-box .works-item{

  }
/*
.works-item-box .works-item-1:after{
    bottom: -10;
    animation: 3s infinite alternate slidein;
    }*/
    .works-item-box .works-item-1,
    .works-item-box .works-item-2,
    .works-item-box .works-item-3{
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
    }
    .works-item-box:hover .works-item-1:after{
        z-index: 999;
        content: "";
        
        border-bottom:15px solid #ea6731;/*橘*/
        width: 100%;
        height:10px;
        position: absolute;
        display: block;
        bottom: 0;
    }
    .works-item-box:hover .works-item-2:after{
        z-index: 999;
        content: "";
        border-bottom:15px solid #fde201;/*黃*/
        width: 100%;
        height:10px;
        position: absolute;
        display: block;
        bottom: 0;
    }
    .works-item-box:hover .works-item-3:after{
        z-index: 999;
        content: "";
        border-bottom:15px solid #019fe8;/*藍*/
        width: 100%;
        height:10px;
        position: absolute;
        display: block;
        bottom: 0;
    }
   
    .works-item-box:hover .works-item-4:after{
        z-index: 999;
        content: "";
        border-bottom:15px solid #fde201;/*黃*/
        width: 100%;
        height:10px;
        position: absolute;
        display: block;
        bottom: 0;
    }
    .works-item-box:hover .works-item-5:after{
        z-index: 999;
        content: "";
        border-bottom:15px solid #019fe8;/*藍*/
        width: 100%;
        height:10px;
        position: absolute;
        display: block;
        bottom: 0;
    }
    .works-item-box:hover .works-item-6:after{
        z-index: 999;
        content: "";
        
        border-bottom:15px solid #ea6731;/*橘*/
        width: 100%;
        height:10px;
        position: absolute;
        display: block;
        bottom: 0;
    }
    .works-item-box:hover .works-item-7:after{
        z-index: 999;
        content: "";
        border-bottom:15px solid #019fe8;/*藍*/
        width: 100%;
        height:10px;
        position: absolute;
        display: block;
        bottom: 0;
    }
    .works-item-box:hover .works-item-8:after{
        z-index: 999;
        content: "";
        
        border-bottom:15px solid #ea6731;/*橘*/
        width: 100%;
        height:10px;
        position: absolute;
        display: block;
        bottom: 0;
    }
    .works-item-box:hover .works-item-9:after{
        z-index: 999;
        content: "";
        border-bottom:15px solid #fde201;/*黃*/
        width: 100%;
        height:10px;
        position: absolute;
        display: block;
        bottom: 0;
    }
    
    


    footer{

    }
    footer .footer-form-box{
        height:550px;
        background: url(../images/footer/footer-img.jpg) center right no-repeat; 
        background-size: cover;
    }
    footer .footer-form{
        position: absolute;
        bottom: -225px;
        right: 40px;
    }
    @media screen and (max-width: 1550px) {
        footer .footer-form{
            position: absolute;
            bottom: -200px;
            right: 40px;
        }
    }
    @media screen and (max-width: 1280px) {
        footer .footer-form{
            position: absolute;
            bottom: -100px;
            right: 40px;
        }
    }
    @media screen and (max-width: 1024px) {
        footer .footer-form-box{
            height:auto;
            background:none;
        }
        footer .footer-form{
            position: relative;
            bottom:0;
        }

    }
    @media screen and (max-width: 768px) {
        footer .footer-form{
            right: 0;
        }
    }