@charset "UTF-8";
@media screen and (max-width:1920px) and (min-width:500px){
.headers1{
          display:flex;
          align-items: center;
          justify-content:flex-start;
          position: relative;  
          top:-870px;
          z-index:100;
          width:100%;
          margin-top:-5px;
          
}

}



header{background-color:rgb(43, 43, 43);z-index:3;
    display:flex;
    align-items: center;
    justify-content:flex-start;
    position:fixed;  
    top:-80px;
    z-index:99;
    width:100%;
    transition:.3s;
    height:200px;
    opacity:0;
}
@media screen and (max-width:850px) and (min-width:150px){
    header{background-color:rgb(43, 43, 43);z-index:3;
        display:flex;
        align-items: center;
        justify-content:flex-start;
        position:fixed;  
        z-index:99;
        width:100%;
        transition:.3s;
        height:270px;
        opacity:0;
        top:-85px;
    }
}    
 

.FB{color:rgb(218, 218, 218);padding-left:180px;}
@media screen and (max-width:1200px) and (min-width:150px){
    .FB{position: relative;
         top:-500px;
         
    }
}   
.FB:hover{color:rgba(148, 71, 219);transition:.5s;}
.IG{color:rgb(218, 218, 218);padding-left:45px;}

.IG:hover{color:rgba(148, 71, 219);transition:.5s;}
@media screen and (max-width:1200px) and (min-width:150px){
    .IG{position: relative;
         top:-500px;
         color: violet;
    }
}  
.FB1{color:rgb(218, 218, 218);padding-left:180px;}
@media screen and (max-width:850px) and (min-width:150px){
    .FB1{position: relative;
         top:-500px;
    }
}   
.FB1:hover{color:rgba(148, 71, 219);transition:.5s;}
.IG1{color:rgb(218, 218, 218);padding-left:45px;}
@media screen and (max-width:850px) and (min-width:150px){
    .IG1{position: relative;
         top:-500px;
    }
}   
.IG1:hover{color:rgba(148, 71, 219);transition:.5s;}
.FB2{color:rgb(218, 218, 218);padding-left:10px;}
.FB2:hover{color:rgba(148, 71, 219);transition:.5s;}
.IG2{color:rgb(218, 218, 218);padding-left:45px;}
.IG2:hover{color:rgba(148, 71, 219);transition:.5s;}
.bfree-img{width:40%;display: flex;justify-content: center;}
.free-img{display:flex;justify-content:flex-start;padding-top:40px;}
        
        


.aqw1{width:100%;
    display: flex;
    align-items: center;  
    justify-content: center;  
    padding-top:40px;
}        

@media screen and (max-width:550px) and (min-width:150px){
    .rd-navbar-nav{
    display: flex;
    flex-wrap: wrap;    
    align-items: flex-start;
    height:250px;
    width:300px;
    margin-top:-50px;
}


}
@media screen and (max-width:850px){
    .aqw{position: relative;
        top:-120px;
        
    }

}    
.aqw{height:100px;display:flex;
    align-items: center;
    width:100%;
    justify-content: center;
    padding-top:20px;
    
}
.bfree{height:120px;width:150px;margin-top:-4px;}

.free{width:150px;
      padding-top:35px;
         
}
.free img{height:120px;}
@media screen and (max-width:850px){
    .free img{height:100px;
              
              
    }
}


.about2{font-size:16px;color:white;font-family:Microsoft JhengHei;
    font-weight:bold;text-decoration:none;display:inline;
    padding-right:20px;    
}


.about2:hover{color: rgba(148, 71, 219);transition:.5s;}

.work2{font-size:16px;color:white;font-family:Microsoft JhengHei;
    font-weight:bold;
    text-decoration:none;display:inline;
    /* position:fixed;top:30px;left:60em; */
    padding:20px;
    
}
.work2:hover{color: rgba(148, 71, 219);transition:.5s;}

.ex2{font-size:16px;color:white;font-family:Microsoft JhengHei;
    font-weight:bold;text-decoration:none;display:inline;
     padding:20px;

}
.ex2:hover{color: rgb(148, 71, 219);transition:.5s;}
.about{font-size:16px;color:white;
        font-family:Microsoft JhengHei;
        font-weight:bold;
        text-decoration:none;
        display:inline;
        padding:20px;
    }
@media screen and (max-width:550px) and (min-width:150px){
        .about{font-size:16px;color:rgb(255, 255, 255);
            font-family:Microsoft JhengHei;
            font-weight:bold;
            text-decoration:none;
            display:inline-block;
            width:100%;
            position: relative;
            top:120px;
           
                                             
        }
    }    





.about1{font-size:16px;color:white;
        font-family:Microsoft JhengHei;
        font-weight:bold;
        text-decoration:none;
        display:inline;
          
    }
@media screen and (max-width:850px)and (min-width:200px){
    .about1{font-size:16px;color:white;
        font-family:Microsoft JhengHei;
        font-weight:bold;
        text-decoration:none;
        display:inline;  
        position:fixed;
        top:100px;
        left:20px;
        
    }

}    

.about1:hover{color: rgb(148, 71, 219);transition:.5s;}
.work{font-size:16px;color:white;
      font-family:Microsoft JhengHei;
      font-weight:bold;
      text-decoration:none;
      display:inline;
      padding:20px;}
      
.work1{font-size:16px;color:white;
       font-family:Microsoft JhengHei;
       font-weight:bold;
       text-decoration:none;
       display:inline;
    }
    @media screen and (max-width:850px)and (min-width:200px){
        .work1{font-size:16px;color:white;
            font-family:Microsoft JhengHei;
            font-weight:bold;
            text-decoration:none;
            display:inline;
            position:fixed;
            top:130px;
            left:20px;
             
        }
    }    
.work1:hover{color: rgb(148, 71, 219);transition:.5s;}
.ex{font-size:16px;color:white;
    font-family:Microsoft JhengHei;
    font-weight:bold;
    text-decoration:none;
    display:inline;
    padding:20px;
}

.ex1{font-size:16px;color:white;
     font-family:Microsoft JhengHei;
     font-weight:bold;
     text-decoration:none;
     display:inline;
     width:100%;
     
    }
     @media screen and (max-width:850px)and (min-width:200px){
        .ex1{font-size:16px;color:white;
            font-family:Microsoft JhengHei;
            font-weight:bold;
            text-decoration:none;
            display:inline-block;
            position:fixed;
            top:160px;
            left:20px;
            width:80px;
            
        }
    } 
.ex1:hover{color: rgb(148, 71, 219);transition:.5s;}


.icon-align-justify{opacity:0;display:inline}   


.tim{
    font-size:100px;
    color: aliceblue;
    font-family:fantasy;font-weight:bold;
    text-align: center;
    align-items: center;
    width:100%;
}
.firsttim{
display: flex;
justify-content: center;
height:856px;
background-image:url(../image/kaboompics_A\ trees\ under\ the\ starry\ sky.jpg);
align-items: center;



}



._{font-size:2vw;
   padding-bottom:20px;
    
}

.tis{
    color:aliceblue;
    font-family:sans-serif;font-size:1.2rem;line-height:28px;
    text-align: center;
    
}
#Exp{padding-top:200px;}
.ext{display: block;width: 100%;text-align: center;
    font-size:50px;font-family:sans-serif;
    font-weight: 700;
}
.tf{font-family:sans-serif;font-size:16px;color:#4d4d4d;width:100%;
    text-align: center;line-height:50px;
}
.ad{position: absolute;top:620px;left:595px;font-size:18px;
    color: aliceblue;font-family:sans-serif;
    }
.p-a-h-c{display: flex;width:100%;
    display: flex;
    flex-wrap: wrap;
    
}
@media screen and (max-width:550px) and (min-width:150px){
    .p-a-h-c{display: flex;width:100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }


}   
.myex{display:flex;
      width:100%;
      padding-bottom:200px;
      padding-top:50px;
      justify-content: center;
      }
 
.myex img{width:250px;}      
.mre{font-size:70px;font-family:sans-serif;font-weight:bold;
     color:white;width:100%;
     background-image:url(../image/800x533_1.jpg);
     text-align:center;
     display: block;
     height:480px;
     padding-top:150px; 
    }

/* @keyframes MoveToRight {
    from { top:-450px; }
    to { top:0px; }
} */
.my-expertise{opacity:0.5;transition:.8s;filter:blur(1.5px);
              display: flex;justify-content: center ;}


.my-expertise img{transform:scale(1,1);transition: all 1s ease-out;}
.my-expertise:hover{transform:scale(1.2,1.2);
                    opacity:1;
                    filter:blur(0px);
                    

}

.vm{font-family:sans-serif;font-size:15px;font-weight:550;
    text-align: center;
    display: inline-block;
    margin-top:80px;   
}
.vm>a{text-decoration: none;color:black;font-family:sans-serif;font-weight:600;
    background-color: white;padding:24px 50px;transition:.4s;}
.vm>a:hover{background-color:rgb(148, 71, 219);
            color: white;
}


.ps{font-size:45px;font-weight:600;
    display: inline-block;
    width:100%;
    text-align: center;
    padding-top:120px;
    font-family:sans-serif
}
.poke{display: flex;justify-content: center;padding-top:50px;}
@media screen and (max-width:550px) and (min-width:150px){
    .poke{display: flex;
        justify-content: center;
        padding-top:50px;
        
    }    
}


#wcb{display:flex;
     flex-wrap: wrap;
     justify-content: center;
     
}
.pok{display:flex;
    
    justify-content:center;
    width:430px;
    perspective:1000px;
    
}

.pok1{height:500px;width:400px;margin-right:-380px;margin-top:20px;opacity:0.3;z-index:1;
      transform:rotateY(180deg);transition:2s;}
.pok2{height:500px;width:400px;z-index:1;transition:2s;}
.pok:hover .pok2{transform: rotateY(180deg);opacity:0.3;}
.pok:hover .pok1{transform: rotateY(360deg);z-index:2;opacity:1;}
.ill{font-size:45px;font-weight:600;width:100%;text-align:center;padding-top:50px;font-family:sans-serif;}
.ai{padding-top:50px;
    width:100%;
    position: relative;
    margin-bottom:400px;
    
}
/* .pok3{width:100%;height:60vh;}
.pok4{width:100%;height:80vh;} */

.illsp{display: flex;
       flex-wrap: nowrap;
       justify-content: center;
       width: 100%;
}

/* .illsp3{margin-left: 500px;}
.illsp4{margin-left: 500px;} */
.illsp img{height:100%;}




.ai-ill{position: absolute;
}

.ai-ill .illsp1{width:480px;}
.ai-ill .illsp2{width:480px;}
.ai-ill .illsp3{width:480px;}
.ai-ill .illsp4{width:480px;}
.illsp div{          
     opacity: 0;
    filter: alpha(opacity=0);
    -webkit-animation: round 20s linear infinite;
            animation: round 20s linear infinite;

}

@-webkit-keyframes round {
    4% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 0 - 1秒 淡入*/
    }
    20% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 1- 5秒靜止*/
    }
    24% {
        opacity: 0;
        filter: alpha(opacity=0);
        /* 5-6秒淡出*/
    }
}
@keyframes round {
    4% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 0 - 1秒 淡入*/
    }
    20% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 1- 5秒靜止*/
    }
    24% {
        opacity: 0;
        filter: alpha(opacity=0);
        /* 5-6秒淡出*/
    }
}
/* .illsp div:nth-child(5){
    -webkit-animation-delay: 0s;
            animation-delay: 0s;


} */
.illsp div:nth-child(4){
    -webkit-animation-delay: 0s;
            animation-delay: 0s;

}
.illsp div:nth-child(3){
    -webkit-animation-delay: 5s;
            animation-delay: 5s;

}
.illsp div:nth-child(2){
    -webkit-animation-delay: 10s;
            animation-delay: 10s;

}
.illsp div:nth-child(1){
    -webkit-animation-delay: 15s;
            animation-delay: 15s;

}








.illsp img{width: 50%;}
#aboutME{background-color:#2b2b2b;
        height:600px;
        width:100%;
        margin-top:400px;
        margin-bottom:-105px;
        display:flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        
        
}
.about-me{
        
        width:50%;
        height:80%;
        justify-content: flex-end;
       /* background-color: chartreuse; */
        padding-top:50px;
        }



.AB-ME{
       text-align: center;
       display: flex;
       align-items:flex-start;
       height:50%;
       display:inline-block;
       display: flex;
       flex-wrap: wrap;
              

    }
 .am{color: white;
    width:100%;
    display: flex;
    align-items: center;
    font-family:微軟正黑體;
    font-size:3vw;
    font-weight:900;
    
    
    
} 
.am-1{color: white;
    font-family:微軟正黑體;
    font-size:0.9vw;
    text-align: left;
    line-height:24px;
    font-weight:600;
    width:100%;
    
    
    
}
.am-1 p{
        display: inline-block;
        word-wrap:break-word;
        width:100%;
        /* white-space:nowrap; */
        height:80%;
        display: flex;
        align-items: flex-end;
        
        
}
.am-1-2{color: white;
      font-family:微軟正黑體;
      font-size:0.9vw;
      text-align:left;
      line-height:24px;
      font-weight:600;
      display: block;
      width:100%;
      word-wrap:break-word;
      /* white-space:nowrap; */
      
} 

.vm2{
    display:inline-block;
    width:100%;
    height:60px;
    display: flex;
    align-items: center;
    font-family:sans-serif;
    font-size:15px;
}



.vm2>a{background-color:white;
        display: inline-block;
        height:100%;
        display: flex;
        align-items: center;
        width:170px;
        justify-content: center;
        font-family:sans-serif;
        font-weight:600;
        transition: .7s;
} 
.vm2 a:hover{background-color:rgb(148, 71, 219);color: white ;}
.view-more{

    width:100%;
     
}
@media screen and (max-width:630px){
    .view-more{
        
        width:100%;
        position: relative;
        top:80px 
    }
}

.myphoto{width:25%;
        height:75%;
        /* background-color: rgb(216, 129, 216); */
        box-shadow: 0px -15px 10px -10px #111;
        display: flex;
        justify-content: flex-start;
        padding-bottom:100px;
        margin-right:80px;
        
}
.myphoto img{width:75%;height:90%;object-fit: contain;             
}
.wp{ position: relative;
    text-align: center;
    top:300px;
    font-size:45px;font-weight:600;    
    font-family:sans-serif;   
        }
.webworks{display:flex;
          justify-content:center;
          padding-top:300px;
          margin-top:150px;
          width:100%;
        }
.webworks1{display:flex;
          flex-wrap:wrap;
          justify-content: center;
          align-items: center;
          margin-right:200px;
          border-radius:50%;
          
          
}

.webworks1:hover img{opacity:0.5;transition:.3s;filter:blur(1.5px);}
.webworks1:hover .w1{opacity:1;transform: translateY(50%);}
.w1{background-color: rgb(255, 255, 255);
    display:inline-block;
    position: absolute;
    opacity:0;
    transition:.5s;
    width:100px;
    height:100px;
    border-radius:50%;
}
.w1 p{font-family:sans-serif;
      text-align: center;
      padding-top:45px;
            }
.w2 p{font-family:sans-serif;
      padding-top:30px;
      text-align: center;                      }
.webworks img{border-radius:50%;}
.webworks2{ display:flex;
          flex-wrap:wrap;
          justify-content: center;
          align-items: center;
          border-radius:50%;
            
}
.webworks2:hover img{opacity:0.5;transition:.3s;filter:blur(1.5px);}
.webworks2:hover .w2{opacity:1;transform: translateY(50%);}
.w2{background-color: rgb(255, 255, 255);
    display:inline-block;
    position: absolute;
    padding:15px 30px;
    opacity:0;
    transition:.5s;
    width:100px;
    height:100px;
    border-radius:50%;
}
.end{background-color:#2b2b2bf6;width:100%;height:100%;
     display:flex;
     flex-wrap: wrap;
     margin-top:300px;
     padding-bottom:250px;
     justify-content: center;
     
}
.leaf-logo{
    display:flex;
    flex-wrap: wrap;
    width:100%;
    justify-content: center;
   
    
}

.le{width:300px;height:300px;}
           

.as{
    
    width:300px;
    height:180px;
    position: absolute;
    display:block;
    margin-top:50px;

}


#awe{
    width:100%;
    text-align: center;
    margin-top:-35px; 
}
.about3{font-size:16px;color:white;
    font-family:Microsoft JhengHei;
    font-weight:bold;
    text-decoration:none;
    display:inline;}
.works3{font-size:16px;color:white;
    font-family:Microsoft JhengHei;
    font-weight:bold;
    text-decoration:none;
    display:inline;}
.expertise3{font-size:16px;color:white;
    font-family:Microsoft JhengHei;
    font-weight:bold;
    text-decoration:none;
    display:inline;}    
   
#awe>a{text-decoration:none;color: white;transition:.5s;}
#awe a:hover{color:rgb(148, 71, 219);}

.bg{width:100%;}
.arr{color:rgb(255, 255, 255);padding:10px; 
}
.icon{position: relative;
      top:20px;
      left:30px;
}






/*.tim{position:absolute;top:28vh;left:450px;color: aliceblue;font-family:fantasy;font-weight:bold;font-size:7rem;box-sizing: border-box}*/
/*.we{position: absolute;top:340px;left:530px;font-size:7rem;color: aliceblue;font-family:fantasy;font-weight:bold;box-sizing: border-box;display: inline}*/