@keyframes show1{

1%{
top:160px;
left:0px;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
}
100%{
top:90px;
left:0px;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}

}

.a3:hover .divserv{
animation-name:show1;
animation-duration:0.5s;
animation-fill-mode:forwards;
transition:0.3s;
top:0px;
}
.a1:hover .divserv{
animation-name:show1;
animation-duration:0.3s;
animation-fill-mode:forwards;
transition:0.5s;
}

.divserv{
position:absolute;
top:-1000px;
left:0px;
width:100%;
z-index:90;
background-color:white;
border:1px solid teal;
transition:0.5s;
}

.divserv a{
display:block;
width:100%;
padding-top:6px;
padding-bottom:6px;
text-decoration:none;
font-size:20px;
color:teal;
border-bottom:1px solid teal;
text-align:center;
}
.divserv a:hover{
    background-color:teal;
    color:white;
}

.ah1{
position:absolute;
left:0px;
font-size:20px;
top:100px;
text-decoration:none;
z-index:90;
}



.divlogo{
width:100%;
padding-top:30px;
padding-bottom:20px;
text-align:center;
display:none;
border-bottom:1px solid #cccccc;
}
.divlogo img{
height:42px;
}


.divspace{
display:none;
}



.br3{
display:none;
width:100%;
clear:both;
height:20px;
}
.br2{
display:none;
width:100%;
clear:both;
height:20px;
}

.divimgroot{
width:95%;
margin:auto;
text-align:center;
}
.divimgroot img{
display:block;
margin-top:20px;
position:relative;
top:0px;
left:-20px;
}








.divs1{
width:100%;
}
.as1{
display:inline-block;
padding:5px;
font-size:20px;
color:#333333;
padding-left:10px;
padding-right:10px;
}

.divs2{
width:98%;
padding-top:0px;
padding-bottom:10px;
background-color:white;

padding:2%;
border-radius:4px;
}
.divs2 a{
display:inline-block;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
font-size:18px;
color:white;
border-radius:10px;
text-decoration:none;
background-color:#333333;
margin-top:6px;
margin-right:6px;
}
.divs2 a:hover{
color:white;
background-color:teal;
}



.divnews{
width:95%;
padding-left:17px;
}



.an1{
display:block;
width:100%;
border-bottom:1px solid #cccccc;
color:#333333;
padding-top:10px;
padding-bottom:6px;
font-size:20px;
overflow:hidden;
white-space:nowrap;
text-decoration:none;

}



.an1 span{
color:#666666;
font-size:1em;
padding-right:10px;
}


.p1 b{
font-weight:bold;
color:teal;
font-size:1.2em;
}
.p1{
width:95%;
padding-left:17px;
font-size:20px;
color:#333333;
line-height:1.6em;
}

.divtext p{
width:95%;
padding-left:17px;
font-size:20px;
color:#333333;
line-height:1.6em;
}

.ul1{
width:90%;
margin:auto;
list-style-type:none;
}

.ul1 li{
font-size:20px;
color:#333333;
padding-bottom:5px;
}

.h21{
font-size:25px;
color:teal;
padding-left:6px;
}


.h2{
font-size:26px;
padding-left:16px;
width<:;
color:#f21f1f;
margin-top:46px;
font-weight:bold;
border-left:7px solid #f21f1f;
}

.h2_serv{
font-size:26px;
padding-left:16px;
color:teal;
margin-top:46px;
font-weight:bold;
line-height:1.3em;
}
.h2_serv br{
display:none;
}
.h3_serv{
font-size:26px;
padding-left:16px;
color:teal;
margin-top:46px;
font-weight:bold;
line-height:1.3em;
}
.h3_serv br{
display:none;
}




.tabler1{
display:table;
width:100%;
}
.trr1{
display:table-row;
}

.divleft{
width:210px;
display:table-cell;
overflow:hidden;
}
.divright{
display:table-cell;
overflow:hidden;
}












a{
text-decoration:none;
}







.divfix_line img{
height:0.9em;
display:inline-block;
padding-right:6px;
position:relative;
top:1px;
}

.divfix_line{
position:fixed;
left:0px;
bottom:0px;
z-index:33;
display:none;
width:100%;
}
.divfix_line a{
display:block;
width:50%;
float:left;
font-size:16px;
padding-top:6px;
padding-bottom:6px;
text-align:center;
background-color:#00AAAA;
color:white;
}



.table1{
display:table;
width:1000px;
margin:auto;
}





.tr1{
display:table-row;
}
.td1{
width:auto;
text-align:left;
display:table-cell;
}
.img1{
position:relative;
top:10px;
z-index:33;
width:313px;
}

.td3{
width:630px;
display:table-cell;
vertical-align:middle;
text-align:center;
position:relative;
left:0px;
top:0px;
}

.a1{
display:block;
width:20%;
float:left;
font-size:20px;
color:#056969;
padding-top:30px;
padding-bottom:30px;
text-decoration:none;
text-align:center;
position:relative;
left:0px;
top:0px;
cursor:pointer;
}

.a1:hover{
display:block;
width:20%;
float:left;
font-size:20px;
color:white;
padding-top:30px;
padding-bottom:30px;
text-decoration:none;
background-color:#006666;
text-align:center;
}

.a1 span{
font-size:14px;
display:block;
width:100%;
color:#cccccc;
}
.a3{
display:block;
width:20%;
float:left;
font-size:20px;
color:white;
padding-top:30px;
padding-bottom:30px;
text-decoration:none;
background-color:#006666;
text-align:center;
position:relative;
left:0px;
top:0px;
cursor:pointer;
}
.a3 span{
font-size:14px;
display:block;
width:100%;
color:white;
}

.divhead{
width:100%;
height:100px;
background-color:#f4f4f4;
border-bottom:1px solid #cccccc;
}




.br1{
width:90%;
height:1px;
clear:both;
}

.div1000{
width:1000px;
margin:auto;
}



.div1200{
width:1200px;
margin:auto;
}




html{
line-height:1.5em;
padding:0px;
margin:0px;
font-size:14px;
font-family: Microsoft JhengHei;
}

b{
font-weight:bold;
}

body{
position:relative;
padding:0px;
margin:0px;
min-height:100%;
}






.pbase{
width:100%;
margin:auto;
font-size:18px;
color:#333333;
line-height:1.5em;

}


.tdb1{
display:table-cell;
width:260px;

}
.tdb2{
display:table-cell;
text-align:left;

}

.tdb2 a{
display:inline-block;
padding-top:6px;
padding-bottom:6px;
width:60px;
background-color:#222222;
color:white;
margin-right:3px;
text-align:center;
font-size:16px;
border-radius:6px;
text-decoration:none;
margin-top:6px;
}
.tdb2 a:hover{
background-color:teal;
}

.tdb2 li{
font-size:18px;
color:#333333;
}

.tableb1{
display:table;
margin:auto;
width:1000px;

}







.trb1{
display:table-row;
}

.divbase{
width:100%;
border-top:1px solid #cccccc;
background-color:#f1f1f1;
padding-top:30px;
padding-bottom:30px;
min-height:260px;
}



@keyframes show{
0%{
left:-100%;
}
100%{
left:0%
}
}

.show{
animation-name:show;
animation-duration:0.5s;
animation-fill-mode:forwards;
}

.hide{
animation-name:hide;
animation-duration:0.5s;
animation-fill-mode:forwards;
}

@keyframes hide{
0%{
left:0%;
}
100%{
left:-100%
}
}

.divfixt1{
position:fixed;
left:0px;
top:0px;
z-index:99;
}

.am1{
display:block;
width:100%;
text-decoration:none;
font-size:18px;
color:#464646;
background-color:white;
padding-top:10px;
padding-bottom:10px;
text-indent:10px;
border-bottom:1px solid #cccccc;
}
.am1 span{
font-size:13px;
color:#cccccc;
}
.am3{
display:block;
width:100%;
text-decoration:none;
font-size:18px;
color:white;
background-color:teal;
padding-top:10px;
padding-bottom:10px;
text-indent:10px;
border-bottom:1px solid #cccccc;
}
.divback{
position:fixed;
left:0px;
top:0px;
z-index:39;
width:100%;
height:3000px;
background-color:white;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;
z-index:66;
display:none;
}

.divfix1{
position:fixed;
top:0px;
left:-100%;
width:60%;
height:3000px;
background-color:#f4f4f4;
z-index:69;
}



.divfix{
position:fixed;
top:0px;
left:0px;
background-color:#f4f4f4;
border-bottom:1px solid #cccccc;
width:100%;
height:40px;
display:none;
z-index:35;
}
.divfix a{
display:block;
width:100%;
padding-top:10px;
padding-bottom:10px;
text-align:center;
}
.divfix img{
height:20px;
position:relative;
top:1px;
width:50px;
}











.h11{
display:block;
font-size:34px;
color:#333333;
padding-top:120px;
font-weight:normal;
background-size:100% 100%;
text-align:center;

line-height:1.2em;
width:80%;
margin:auto;
}

.divdm{
position:relative;
top:0px;
left:0px;
width:100%;
min-height:240px;
background-color:#d7ffeb;
background-size:auto 100%;
background-repeat:no-repeat;
background-position:50% 50%;
border-bottom:1px solid #cccccc;
}









.divtext p{
font-size:15px;
}



@media screen and (min-width:1px) and (max-width:660px){

.divimgroot img{
left:0px;
}


.p1{
padding-left:0px;
margin:auto;
}



.tabler1{
display:block;
}
.trr1{
display:block;
}
.divleft{
width:100%;
display:block;
text-align:center;
}
.divright{
width:100%;
display:block;
text-align:center;
}

.h2{
display:inline-block;
clear:both;
text-align:center;
}

.h2_serv{
display:inline-block;
clear:both;
}
.{
display:inline-block;
clear:both;
}


.h3_serv{
display:inline-block;
clear:both;
}



.tableb1{
display:block;
}

.tdb1{
width:100%;
display:block;
}
.tdb2{
width:100%;
display:block;
text-align:center;
}
.trb1{
display:block;    
}
.pbase{
width:80%;
margin:auto;
text-align:center;
}

.tdb2 ul{
width:90%;
margin:auto;
position:relative;
left:-10px;
}



}

@media screen and (min-width:460px) and (max-width:660px){

.divimgroot img{
display:block;
float:left;
width:33.3%;
}
.br3{
display:block;
}

}

@media screen and (min-width:1px) and (max-width:460px){

.divimgroot img{
display:block;
float:left;
width:50%;
}
.br2{
display:block;
}


.h2{
margin-top:0px;
font-size:18px;
border-left:0px;
padding-right:16px;
font-weight:normal;
width:calc(100% - 32px);
background-color:#009999;
color:white;
padding-top:10px;
padding-bottom:10px;
margin-bottom:0px;
}

.h2_serv{
margin-top:0px;
font-size:18px;
border-left:0px;
font-weight:normal;
width:calc(100% - 32px);
padding-right:16px;
background-color:#006699;
color:white;
padding-top:10px;
padding-bottom:10px;
margin-bottom:0px;
}
.h2_serv br{
display:block;
}
.h3_serv{
margin-top:0px;
font-size:18px;
border-left:0px;
font-weight:normal;
width:100%;
background-color:#006699;
color:white;
padding-top:10px;
padding-bottom:10px;
margin-bottom:0px;
}
.h3_serv br{
display:block;
}
.ul1 li{
font-size:18px;
}

.h3_serv1{
margin-top:0px;
font-size:18px;
border-left:0px;
font-weight:normal;
width:100%;
background-color:teal;
color:white;
padding-top:10px;
padding-bottom:10px;
margin-bottom:0px;
}
.h2_serv1{
margin-top:0px;
font-size:18px;
border-left:0px;
font-weight:normal;
width:100%;
background-color:teal;
color:white;
padding-top:10px;
padding-bottom:10px;
margin-bottom:0px;
}
.p1{
font-size:18px;
line-height:1.8em;
}

.divtext p{
font-size:18px;
line-height:1.8em;
}

.divnews .an1{
font-size:18px;
line-height:1.5em;
color:#333333;
}

.an1 span{
display:none;
}

.h21{
font-size:18px;
}


.h11{
font-size:24px;
}


.divdm{
min-height:100px;
}
.h11{
padding-top:30px;
}


}

@media screen and (min-width:1px) and (max-width:830px){

.divnews{
padding-left:0px;
margin:auto;
}

}

@media screen and (min-width:660px) and (max-width:760px){

.divleft{
width:170px;
}


.tdb1{
width:220px;
}


}

@media screen and (min-width:420px) and (max-width:660px){

.ul1{
display:block;
margin:auto;
width:100%;
position:relative;
left:-36px;
}
.ul1 li{
display:block;
width:33%;
float:left;
border-bottom:1px solid #cccccc;
padding-top:6px;
padding-bottom:6px;
text-align:center;
}


}

@media screen and (min-width:1px) and (max-width:420px){

.ul1{
display:block;
margin:auto;
width:100%;
position:relative;
left:-36px;
}
.ul1 li{
display:block;
width:50%;
float:left;
border-bottom:1px solid #cccccc;
padding-top:6px;
padding-bottom:6px;
text-align:center;
}


}

@media screen and (min-width:1px) and (max-width:760px){


.divfix_line{
display:block;
}



.divlogo{
display:block;
}

.divhead{
display:none;
}
.divfix{
display:block;
}
.divspace{
display:block;
height:40px;
}


}

@media screen and (min-width:1px) and (max-width:1000px){


.table1{
width:100%;
}



.div1000{
width:100%;
}


.tableb1{
width:90%;
}

}

@media screen and (min-width:1px) and (max-width:850px){


.a1{
font-size:18px;
}
.a3{
font-size:18px;
}


}

@media screen and (min-width:1px) and (max-width:1200px){


.div1200{
width:100%;
}


}

@media screen and (min-width:460px) and (max-width:900px){

.h11{
font-size:30px;
}

}

@media screen and (min-width:760px) and (max-width:880px){




}

@media screen and (min-width:460px) and (max-width:760px){


.divdm{
min-height:180px;
}
.h11{
padding-top:80px;
}


}