.name_mem{
color:#44ABD8;
}

.login_no{
display:none;
}
.login_yes{
display:none;
}
.divcoderec{
background-color:#FF3366;
}
.ac11{
display:block;
padding-top:3px;
padding-bottom:3px;
font-size:15px;
text-align:left;
color:white;
border-bottom:1px dotted white;
}
.ac11 span{
display:inline-block;
padding-left:10px;
padding-right:10px;
}
.ac1:hover .divcodec1{
animation-name:show;
animation-duration:0.5s;
animation-fill-mode:forwards;
}
.divcodec1{
position:absolute;
left:0px;
top:-3000px;
width:130px;
z-index:36;
padding-top:40px;
}





.areg{
display:inline-block;
font-size:14px;
color:#666666;
border:1px solid #cccccc;
padding-top:6px;
padding-bottom:6px;
line-height:1em;
border-radius:10px;
width:70px;
text-align:center;
background-image:linear-gradient(to bottom,white,#f1f1f1);
margin-right:4px;
}

.divcodeall span{
display:inline-block;
padding-left:10px;
padding-bottom:6px;
}
.divcodeall{
width:360px;
margin:auto;
font-size:15px;
color:#666666;
}
.divcode{
width:100%;
background-color:#FF3366;
text-align:center;
border-radius:15px;


/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffa84c+0,ff7b0d+100;Orange+3D */
background: #ffa84c; /* Old browsers */
background: -moz-linear-gradient(top, #ffa84c 0%, #ff7b0d 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffa84c 0%,#ff7b0d 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffa84c 0%,#ff7b0d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 ); /* IE6-9 */


}
.ac1{
display:inline-block;
width:100px;

padding-top:12px;
text-align:center;
font-size:18px;
padding-bottom:12px;
color:white;
text-align:center;
position:relative;
left:0px;
top:0px;
}






.divlist1{
position:absolute;
left:0px;
top:-3000px;
width:100%;
padding-top:50px;
z-index:33;
}

@keyframes show{
0%{
top:-60px;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
}
100%{
top:0px;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
}

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


.divlist1 a{
display:block;
width:100%;
padding-top:10px;
padding-bottom:10px;
color:white;
font-size:16px;
text-align:left;
line-height:1.2em;
border-bottom:1px solid #cccccc;
}
.divlist1 a span{
display:inline-block;
padding-left:10px;
padding-right:10px;
}

.divlistrec{
width:100%;
background-color:#1D4A9F;
}




.a1{
display:block;
width:130px;
padding-top:15px;
padding-bottom:15px;
color:white;
font-size:18px;
float:left;
position:relative;
left:0px;
top:0px;
text-align:center;
transition:0.5s;
position:relative;
left:0px;
top:0px;
}
.a1:after{
content:"";
position:absolute;
right:-1px;
top:10px;
width:1px;
height:30px;
border-left:1px dotted white;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;
}


.divlistall_rec{
width:100%;
background-color:#1D4A9F;
transition:0.5s;
height:57px;

}

.divlistall{
width:100%;
background-color:#1D4A9F;
transition:0.5s;
border-bottom:5px solid #D6E26C;
}
.divlistall-back{
position:fixed;
left:0px;
top:0px;
width:100%;
background-color:#1D4A9F;
transition:0.5s;
z-index:11;
border-bottom:5px solid #D6E26C;
}
.divlist{
width:1200px;
margin:auto;
text-align:center;
}











.table1{
display:table;
width:1200px;
margin:auto;
height:175px;

}
.tr1{
display:table-row;
}
.td1{
display:table-cell;
width:539px;

vertical-align:bottom;
}
.logoimg{
position:relative;
top:5px;
width:100%;
}
.td2{
display:table-cell;
vertical-align:middle;
}

.divfix{

width:100%;
background-image:url(https://tspem.yida-design.com.tw/back2.jpg);
background-repeat:repeat-x;
}













.divlogo{
width:100%;
display:none;
background-image:linear-gradient(to bottom,white,#E2F0FB);
}
.logom1{
display:block;
margin:auto;
width:330px;
padding-top:20px;
}




.divposm1{
position:fixed;
left:0px;
top:0px;
padding:5px;
display:none;
z-index:46;
}
.icon_list{
display:block;
width:40px;
height:35px;
background-image:url(https://tspem.yida-design.com.tw/icon_list.png);
background-repeat:no-repeat;
background-position:50% 50%;
background-size:50% 50%;
border:3px solid #52B600;
border-radius:50%;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8;
background-color:white;
}



.divrem1{
width:100%;
position:relative;
left:0px;
top:0px;
text-align:right;
margin-bottom:-10px;
}
.divrem1 img{
padding:6px;
}


.divm3{
background-color:#f1f1f1;
display:none;
}



.am11{
display:block;
width:100%;
font-size:15px;
color:#666666;
padding-top:6px;
padding-bottom:6px;
border-bottom:1px dotted #cccccc;
position:relative;
left:0px;
top:0px;
text-align:center;
}

.am1{
display:block;
width:100%;
font-size:16px;
color:#666666;
padding-top:10px;
padding-bottom:10px;
border-bottom:1px dotted #cccccc;
position:relative;
left:0px;
top:0px;
text-align:center;
}

.list:after{
content:"+";
position:absolute;
right:5px;
top:8px;
font-size:25px;
font-weight:bold;
color:#518525;
}


.divback{
position:fixed;
left:0px;
top:0px;
width:100%;
height:3000px;
z-index:49;
background-color:white;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8;
display:none;
}

.divfixm3{
position:fixed;
left:-70%;
top:0px;
height:3000px;
width:60%;
z-index:49;
background-color:white;
}


.pdm1{
display:inline-block;
background-color:#006666;
color:white;
font-size:24px;
text-align:center;
padding:15px;
letter-spacing:1px;
border-radius:10px;
}

.divdm{
text-align:center;
width:100%;
display:flex;
justify-content:center;
align-items:center;
background-image:url(https://tspem.yida-design.com.tw/back1.jpg);
background-size:1920 auto;
background-position:50% 200px;
height:180px;
}




.divcrumb img{
height:1.6em;
position:relative;
top:5px;
padding-right:5px;
}





.divcrumb{
width:1200px;
margin:auto;
font-size:15px;
color:#666666;
padding-top:6px;
padding-bottom:20px;
background-color:white;
}
.divcrumb a{
color:#888888;
display:inline-block;
margin-left:3px;
margin-right:3px;
}
.divcrumb span{
display:inline-block;
padding-left:10px;
}



.divb3{
display:inline-block;
width:460px;
}

.ab1{
display:block;
width:25%;
float:left;
padding-top:6px;
color:white;

font-size:16px;
text-align:center;
padding-bottom:6px;

}


.pb1{
width:100%;
margin:auto;
padding-top:10px;
padding-bottom:10px;
text-align:left;
color:white;
font-size:16px;
line-height:1.6em;
}

.divbaseall{
width:100%;
background-color:#1D4A9F;
border-top:7px solid #D6E26C;
}





















.tableb1{
display:table;
width:1200px;
margin:auto;
padding-top:30px;
padding-bottom:30px;
}
.trb1{
display:table-row;
}
.tdb1{
display:table-cell;
width:285px;
vertical-align:top;
padding-left:10px;
padding-right:50px;
}
.logob1{
width:100%;
}
.tdb2{
display:table-cell;
vertical-align:top;
width:260px;

}
.tdb3{
display:table-cell;
vertical-align:top;
text-align:right;
}



.pmess1{
width:100%;
margin:auto;
font-size:15px;
color:#333333;
text-align:center;
padding-top:50px;
padding-bottom:50px;
}



.imgc1{
width:290px;
display:block;
margin:auto;
}



.ull1{
font-size:14px;
color:#888888;
margin:0px;
margin-left:-20px;
margin-bottom:0px;
margin-top:10px;
}
.ull1 li{
}

.asubl1{
display:block;
width:100%;
padding-top:6px;
padding-bottom:6px;
background-color:#009999;
color:white;
font-size:16px;
border-radius:4px;
margin-top:6px;
text-align:center;
}

.pbar{
width:100%;
font-size:18px;
margin:auto;
text-align:center;
padding-top:15px;
padding-bottom:15px;
color:#666666;
border-radius:6px 6px 0px 0px;

background-color:#f6f6f6;
border-bottom:1px solid #cccccc;
position:relative;
left:0px;
top:0px;
letter-spacing:2px;
}
.divposcross{
position:absolute;
right:10px;
top:10px;
}
.pmeml1{
width:100%;
padding-top:10px;
padding-bottom:10px;
font-size:15px;
color:#666666;
margin:auto;
text-align:center;
}
.pmeml1 a{
color:teal;
display:inline-block;
padding-left:3px;
padding-right:3px;
}

.divpadd_mem{
padding:10px;
padding-top:0px;
}

.tameml1{
width:100%;
font-size:16px;
color:#666666;
}
.tdmeml1{
width:100px;
text-align:center;
background-color:#f1f1f1;
}

.tameml1 input[type=text]{
width:100%;
height:25px;
border:1px solid #cccccc;
}



.divlogin{
position:fixed;
left:0px;
top:0px;
width:420px;
display:none;
z-index:44;
background-color:white;
border-radius:6px;
}



.divlogin1{
position:fixed;
left:0px;
top:0px;
display:none;
width:330px;
background-color:#f6f6f6;
z-index:44;
border-radius:6px;
}



.imgmess{
width:180px;
display:block;
margin:auto;
padding-top:10px;
padding-bottom:15px;
}
.pmesstext{
width:100%;
margin:auto;
font-size:18px;

color:#666666;
text-align:center;
padding-bottom:10px;
}

.pmessa1{
width:100%;
margin:auto;
color:#888888;
font-size:14px;
border-radius:6px 6px 0px 0px;
padding-top:6px;
padding-bottom:6px;
border-bottom:1px solid #cccccc;
}
.pmessa1 span{
display:inline-block;
padding-left:10px;
}



.divbackl1{
position:fixed;
left:0px;
top:0px;
width:100%;
z-index:39;
height:3000px;
display:none;
background-color:black;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);filter:alpha(opacity=40);-moz-opacity:0.4;-khtml-opacity:0.4;opacity:0.4;
}
.divlogin{

}



.divfix_mem{
position:fixed;
left:0px;
bottom:0px;
width:100%;
z-index:38;
display:none;
}





.m1{
background-color:#36B25C;
color:white;
}

.m2{
background-color:#FF3366;
color:white;
}

.m3{
background-color:#0066CC;
color:white;
}
.m4{
color:#0066CC;
background-color:white;
}
.ame1{
display:block;
width:50%;
float:left;
font-size:17px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
}



.temload{
display:none;
}

.divloadt1{
width:100%;
text-align:center;
padding-top:30px;
}
.aload{
display:block;
padding-top:10px;
font-size:16px;
color:#666666;
text-align:center;
margin-top:-35px;
}



.pmessroot{
font-size:15px;
color:#666666;
width:100%;
margin:auto;
padding-bottom:6px;
padding-top:6px;
}
.space1{
display:inline-block;
padding-left:10px;
}


.divpage select{
width:40px;
height:35px;
text-align:center;
margin-left:3px;
margin-right:3px;
border:1px solid #cccccc;
border-radius:6px;
background-color:white;
position:relative;

}

.divpage1{
width:100%;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
}

.divpage{
width:100%;


text-align:center;
font-size:15px;
color:#666666;
}
.ppage{
font-size:15px;
text-align:center;
color:#666666;
}

.apage{
display:inline-block;
padding-top:10px;
padding-bottom:10px;
width:80px;
font-size:14px;
line-height:1em;
text-align:center;
color:#666666;
border-radius:6px;
border:1px solid #cccccc;
margin-right:3px;
background-image:linear-gradient(to bottom,white,#f1f1f1);
}

.brpage{
width:100%;
clear:both;
height:5px;
display:none;
}
.brpage1{
width:100%;
clear:both;
height:5px;
display:none;
}








.divlinet1{
width:100%;
border-top:1px solid #cccccc;
margin-bottom:30px;
clear:both;
display:none;
}
.divlinet1 div{
width:95px;
height:5px;
background-color:#1D4A9F;
margin:auto;
position:relative;
top:-2.5px;
}



.h2root{
width:100%;
font-size:22px;
margin:auto;
padding-top:30px;
padding-bottom:10px;
display:none;
color:#1D4A9F;
text-align:center;
letter-spacing:1px;
font-weight:normal;
}
.h2root span{
display:inline-block;
width:100%;
font-size:16px;
color:#999999;
}




.divprec{
display:inline-block;

background-color:white;
border-radius:10px;
margin-top:30px;
text-align:left;
}

.divpanel{

text-align:left;

width:100%;
min-height:550px;
overflow:hidden;
}

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

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



body{
padding:0px;
margin:0px;
}

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

/*
background-image:linear-gradient(to bottom,#FDEACC,white);
*/
font-family: Microsoft JhengHei;
}

a{
text-decoration:none;
cursor:pointer;
}










.afile{
display:block;
width:100px;
padding-top:6px;
padding-bottom:6px;
text-align:center;
color:#666666;
text-align:center;
font-size:15px;
border:1px solid #cccccc;
border-radius:6px;
background-image:;inear-gradient(to bottom,white,#f1f1f1);
}
.datebr{
display:none;
}
.ptext{
width:600px;
margin:0px;
font-size:16px;
line-height:1.6em;
color:#666666;
}

.spman{
display:inline-block;
padding-right:6px;
}

.tap11:nth-child(even){
background-color:#f6f6f6;
}

.tap11:nth-child(odd){
background-color:white;
}

.tap11{
width:100%;
font-size:16px;
color:#666666;
border-bottom:1px solid #cccccc;
}
.tdp11{
width:130px;
text-align:right;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
}

.tdp12{
padding-top:10px;
padding-bottom:10px;
}







.h2root1 span{
display:inline-block;
padding-left:60px;
}
.h2root1{
width:100%;
margin:auto;
font-size:26px;
padding-top:30px;
padding-bottom:20px;
color:#1D4A9F;

text-align:left;
}




.divrec{
width:260px;
margin:auto;
}
.ptop{
width:100%;
margin:auto;
font-size:15px;
color:white;
background-color:#1D4A9F;
text-align:center;
padding-top:6px;
padding-bottom:6px;
border-radius:6px;
margin-bottom:10px;
}



.ap1{
display:block;
width:100%;
font-size:16px;
color:#666666;
padding-top:10px;
line-height:1.6em;
padding-bottom:10px;
border-bottom:3px double #cccccc;
}
.ap1 span{
display:inline-block;
padding-left:10px;
}

















.tablep1{
display:table;
width:100%;
border-top:1px solid #cccccc;
min-height:550px;
}
.trp1{
display:table-row;
}
.tdp1{
width:460px;
display:table-cell;
vertical-align:top;
padding-top:30px;
border-right:1px solid #cccccc;
}
.tdp2{
display:table-cell;
vertical-align:top;
padding-top:20px;
}



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


.divcodeall{
width:300px;
}
.ac1{
width:80px;
font-size:17px;
}



.divlistall_rec{

height:108px;    
   
}
.a1{
display:inline-block;
width:14%;
}



.td1{
width:460px;
}

.table1{
height:150px;
}


}

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


.table1{
width:100%;
}

.divlist{
width:100%;
}



.div1200{
width:100%;
}

}

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


.divlistall_rec{
display:none;
}



.table1{
display:none;
}
.divlistall{
display:none;
}



.table1{
display:none;
}
.divlistall{
display:none;
}
.divlogo{
display:block;
}
.divposm1{
display:block;
}
.divlistall-back{
display:none;
}


.divdm{
display:none;
}



.divcrumb{
padding-bottom:6px;
}



.divfix_mem{
display:block;
}



.divlinet1{
display:block;
}
.h2root{
display:block;
}


}

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


.a1{
display:block;
float:left;
width:11%;
}


}

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


.logom1{
width:260px;
}


}

@media screen and (min-width:350px) and (max-width:380px){


.logom1{
width:235px;
}


}

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


.logom1{
width:210px;
}


}

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


.divrem1 img{
width:40px;
}




.divlogin{
width:95%;
}
.tdmeml1{
width:60px;
}
.tameml1{
font-size:15px;
}




.pmesstext{
font-size:17px;
}
.imgmess{
width:120px;
}



.ame1{
padding-top:6px;
padding-bottom:6px;
font-size:16px;
}



.divpage1{
display:block;
}

.brpage{
display:block;
}



.tap11{
font-size:15px;
}




.h2root1{
font-size:20px;
}



.ap1{
font-size:15px;
line-height:1.2em;
}


}

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


.am1{
text-align:left;
}
.am1 span{
display:inline-block;
padding-left:15px;
padding-right:10px;
}


.imgc1{
width:180px;
}



.tdp11{
width:80px;
}


}

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


.divcrumb{
width:100%;

}



.tableb1{
width:100%;
}


}

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


.divb3{
width:100%;
}



}

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

.ab1{
width:33.3%;
}

}

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

.ab1{
width:50%;
}

}

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

.ab1{
width:33.3%;
}

}

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

.ab1{
width:50%;
}

}

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


.tableb1{
display:block;
}
.trb1{
display:block;
}

.tdb1{
display:block;
width:100%;
text-align:center;
margin:auto;
padding-left:0px;
padding-right:0px;
}
.tdb2{
display:block;
margin:auto;
padding-top:20px;
}
.tdb3{

padding-top:20px;
display:block;
}


}

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


.logob1{
width:260px;
}


}

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



.logob1{
width:190px;
}



}

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

.tdb2{
width:90%;
margin:auto;
}


.brpage1{
display:block;
}

}

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

.tdb3{
width:360px;
margin:auto;
}

}

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

.tdb3{
width:95%;
margin:auto;
}

}

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


.divlogin1{
width:95%;
}


}

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


.apage{
padding-top:8px;
padding-bottom:8px;
font-size:13px;
width:60px;
}


}

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


.divprec{
display:block;
border-radius:0px;
margin:0px;
width:100%;
overflow:hidden;
}



}

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


.ptext{
width:100%;
}


.h2root1 span{
padding-left:30px;
}

}

@media screen and (min-width:600px) and (max-width:1240px){


.tdp11{
width:100px;
}


}

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

.desk{
display:none;
}

.h2root1 span{
padding-left:0px;
}
.h2root1{
text-align:center;
}




.ap1{
line-height:1.2em;
padding-top:6px;
padding-bottom:6px;
}


.tablep1{
display:block;
}
.trp1{
display:block;
}
.tdp1{
display:block;
padding-left:0px;
width:100%;
border-right:0px;
padding-right:0px;
}
.tdp2{
display:block;
padding-left:0px;
padding-right:0px;
width:100%;
}


}

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


.tdp1{
width:300px;
}


}

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


.tdp1{
width:260px;
}
.divrec{
width:80%;
}



}

@media screen and (min-width:440px) and (max-width:860px){


.divrec{
width:390px;
}



}

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


.divrec{
width:90%;
}


}