@keyframes top{

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

@keyframes left{
0%{
left:0px;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
100%{
left:0%;    
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
}
.top{
animation-name:top;
animation-duration:1s;
animation-fill-mode:forwards;
position:relative;
left:0px;
top:0px;
}
.left{
animation-name:left;
animation-duration:1s;
animation-fill-mode:forwards;
position:relative;
left:0px;
top:0px;
}

.time1{
animation-delay:0.1s;
}
.time2{
animation-delay:0.2s;
}
.time3{
animation-delay:0.3s;
}
.time4{
animation-delay:0.4s;
}
.time5{
animation-delay:0.5s;
}
.time6{
animation-delay:0.6s;
}
.time7{
animation-delay:0.7s;
}

.time8{
animation-delay:0.8s;
}

.time9{
animation-delay:0.9s;
}

.time10{
animation-delay:1s;
}


.divlist1_rec{



}

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

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

.a1:hover .divlist1{
animation-name:show;
animation-duration:0.5s;
animation-fill-mode:forwards;
background-image:url(https://ssgw.yida-design.com.tw/back1.jpg);
}

.divlist1{
position:absolute;
left:0px;
top:-3000px;
width:100%;
border-radius:6px;
box-shadow:1px 1px 3px #222222;
padding-top:60px;
z-index:13;

}

.a11:hover span{
padding-left:15px;
color:#990000;

transition:0.5s;
}
.a11{
display:block;
width:100%;
padding-top:6px;
padding-bottom:6px;
font-size:17px;
color:#111111;
text-align:left;
border-bottom:2px solid #333333;
transition:0.5s;
}
.a11 span{
display:inline-block;
padding-left:10px;
transition:0.5s;
}



.br2{
width:100%;
height:1px;
clear:both;
}

.a1:hover:after{
content:url(https://ssgw.yida-design.com.tw/redline.png);
position:absolute;
left:0px;
bottom:0px;
width:100%;
z-index:13;
text-align:center;
}

.list1:after{
content:url(https://ssgw.yida-design.com.tw/redline.png);
position:absolute;
left:0px;
bottom:0px;
width:100%;
z-index:13;
text-align:center;
}

.hide1{
display:none;
}

.a1{
display:inline-block;
width:130px;
text-align:center;

padding-top:20px;
padding-bottom:20px;
position:relative;
left:0px;
top:0px;
}

.listimg{
position:relative;
left:0px;
top:0px;
z-index:15;
}


.divfix{
position:relative;
left:0px;
top:0px;
width:100%;
text-align:center;
}











.divcrumb{
font-size:16px;
color:black;
padding-top:30px;
padding-bottom:10px;
}
.divcrumb a{
color:#990000;
font-weight:bold;
}



.logoimg1{
display:none;
margin:auto;
}

.topline{
width:100%;
height:36px;
clear:both;
background-image:url(https://ssgw.yida-design.com.tw/topline.jpg);
}

.divbody{
width:1200px;
}

.table1{
display:table;
width:100%;
}
.tr1{
display:table-row;
}
.td1{
display:table-cell;
vertical-align:top;
width:320px;
text-align:center;
padding-top:150px;
}
.td2{
display:table-cell;
padding-top:60px;
vertical-align:top;
}





























.divfixm1{
position:fixed;
right:3px;
top:3px;
display:none;
z-index:11;
}
.divfixm1 img{
width:40px;
padding:3px;
border-radius:50%;
box-shadow:1px 1px 3px #222222;
}





.divm1{

}

.divrem1{
position:relative;
left:0px;
top:0px;
text-align:right;
}
.divrem1 span{
display:inline-block;
padding-right:6px;
padding-top:6px;
}
.divrem1 img{
width:25px;
}

.logoimgm1{
display:block;
width:130px;
margin:auto;
padding-top:0px;
padding-bottom:0px;
}

.am11{
display:block;
width:100%;
padding-top:6px;
padding-bottom:6px;
color:black;
border-bottom:1px solid #cccccc;
position:relative;
left:0px;
top:0px;
color:white;
background-image:linear-gradient(to left,#990000,#6F0000);
font-size:16px;
}

.am11 span{
display:inline-block;
padding-left:20px;
}
.am1{
display:block;
width:100%;
padding-top:6px;
padding-bottom:6px;
color:black;
border-bottom:2px solid #cccccc;
position:relative;
left:0px;
top:0px;
color:black;
font-size:17px;
}
.list:after{
content:"+";
position:absolute;
right:10px;
top:4px;
font-size:22px;
font-weight:bold;
color:#990000;
}
.am1 b{
font-weight:normal;
display:inline-block;
padding-right:2px;
}

.am1 span{
display:inline-block;
padding-left:10px;
}

.divback{
position:fixed;
left:0px;
top:0px;
width:100%;
height:3000px;
background-color:black;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;
z-index:33;
display:none;
}
.divfixm3{
position:fixed;
left:-70%;
top:0px;
height:3000px;
width:60%;
background-image:url(https://ssgw.yida-design.com.tw/back1.jpg);
z-index:36;
}





.ab1{
display:inline-block;
padding:6px;
background-color:#790000;
color:white;
font-size:16px;
border-radius:6px;
margin-bottom:6px;
}

.h3b1{
width:100%;
margin:auto;
color:white;

padding-top:20px;
padding-bottom:6px;
font-size:19px;

}

.pb1{
width:100%;
margin:auto;
color:white;
line-height:1.6em;
font-size:16px;
}

.divbaseall{
width:100%;
background-color:#4A1717;
padding-top:20px;
padding-bottom:20px;
}
.tableb1{
display:table;
width:1200px;
margin:auto;
}
.trb1{
display:table-row;
}
.tdb1{
display:table-cell;
vertical-align:top;
width:122px;
text-align:left;
padding-left:10px;
padding-right:100px;
}
.tdb2{
display:table-cell;
vertical-align:top;
width:280px;
padding-top:20px;
}
.tdb3{
display:table-cell;
vertical-align:top;
width:265px;
padding-right:40px;
padding-top:20px;

}

.tdb4{
display:table-cell;
vertical-align:top;
text-align:center;
padding-top:20px;
padding-right:10px;
}




















.pagebr{
width:100%;
clear:both;
display:none;
}

.divpage{
width:100%;
font-size:18px;
color:black;
letter-spacing:0.5px;
text-align:left;
padding-top:10px;
padding-bottom:10px;
}
.divpage a{
display:inline-block;
padding-top:3px;
padding-bottom:3px;
padding-left:10px;
padding-right:10px;
font-size:15px;
font-weight:normal;
border-radius:6px;
margin-right:2px;
}
.page1{
background-color:white;
color:#996600;
}
.page3{
background-color:#996600;
color:white;
}













.divfix_line{
position:fixed;
left:0px;
bottom:0px;
width:100%;
display:none;
}

.divfix_line a{
display:block;
width:50%;
float:left;
padding-top:6px;
padding-bottom:6px;
text-align:center;
background-color:#38539B;
color:white;
font-size:17px;

}





.f11{
width:250px;
height:460px;
}

.divfix_face{
position:fixed;
right:-255px;
top:100px;
}
.taf1 td{
vertical-align:top;
}
.tdf1 img{
width:40px;
}







.divpanel{
width:100%;


overflow:hidden;
}

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

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



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

a{
text-decoration:none;
}
html{

line-height:1.5em;
padding:0px;
margin:0px;
color:#666666;
font-size:16px;
background-image:url(https://ssgw.yida-design.com.tw/back.jpg);
font-family: Microsoft JhengHei;



}




.aload{
display:block;
width:100%;
text-align:center;
color:black;
font-size:18px;
}

.load1{
display:block;
margin:auto;
}

.divdate{
min-height:110px;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
}

.divd1{
width:100%;
text-align:center;
padding-top:10px;
}


.ad1{
color:white;
line-height:1.2em;
padding-top:6px;
padding-bottom:6px;
background-color:#990000;
font-size:16px;
display:inline-block;
border-radius:6px;
width:80px;
text-align:center;
margin-bottom:5px;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
}
.ad1 span{
font-size:0.6em;
}

.pc1 br{
display:none;
}

.pc1{
font-size:22px;
color:#A80000;
margin:0px;
width:100%;
text-align:center;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
display:inline-block;
margin-bottom:20px;
}

.tadate{
width:100%;
color:#774B22;
font-size:22px;
text-align:center ;
}
.tadate td{
width:14.2%;
}
.tadate a{
background-color:#990000;
color:white;
display:flex;
width:36px;
height:36px;
justify-content:center;
align-items:center;
border-radius:50%;
margin:auto;
}

.tadate1{
width:100%;
color:#774B22;
font-size:22px;
text-align:center ;
padding-top:10px;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
padding-bottom:3px;
margin-bottom:3px;
}
.tadate1 td{
width:14.2%;

}


.tables1{
display:table;
width:0px;
height:356px;
table-layout:fixed;
}
.trs1{
display:table-row;
}
.tds1{
display:table-cell;
width:52px;
background-image:url(https://ssgw.yida-design.com.tw/scroll1.png);
background-repeat:no-repeat;

}
.tds2{
display:table-cell;
background-repeat:repeat-x;
background-position:50% 30px;
background-size:100% 276px;
padding-left:10px;
overflow:hidden;
padding-right:10px;
background-image:url(https://ssgw.yida-design.com.tw/scroll2.png);
}
.tds3{
display:table-cell;
width:53px;
background-image:url(https://ssgw.yida-design.com.tw/scroll3.png);
background-repeat:no-repeat;

}

.scroll1{
width:52px;
height:356px;
background-image:;
}







.spandate{
padding-top:6px;
padding-bottom:6px;
padding-left:6px;
padding-right:6px;
display:inline-block;
border-radius:6px;
color:#990000;
background-image:url(https://ssgw.yida-design.com.tw/back1.jpg);
}

.h2t1{
width:100%;
margin:auto;
padding-top:20px;
padding-bottom:10px;
color:#990000;
font-size:26px;
}

.at1{
display:block;
width:100%;
padding-top:6px;
padding-bottom:6px;
font-size:18px;
color:black;

}

.at2{
display:block;
width:100%;
border-bottom:1px solid #999933;
padding-top:9px;
padding-bottom:3px;
font-size:18px;
color:black;


}

.tablet1{
display:table;
width:1100px;
padding-top:30px;
}
.trt1{
display:table-row;
}
.tdt1{
display:table-cell;
vertical-align:top;
width:550px;
padding-left:10px;
padding-right:30px;
}
.tdt2{
display:table-cell;
vertical-align:top;
padding-right:10px;
}



























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

.divact{
width:31%;
margin-left:1%;
margin-right:1%;
float:left;
margin-bottom:20px;
}
.divimg_act{
position:relative;
width:100%;
}
.divimg_act img{
width:100%;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
}
.divposact{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background-size:100% auto;
transition:0.5s;
background-position:0px 50%;
border-radius:4px;
background-image:url(https://ssgw.yida-design.com.tw/test3.jpg);
}
.divposword{
position:absolute;
left:0px;
bottom:0px;
width:100%;
padding-top:20px;
padding-bottom:10px;
color:white;
font-size:18px;
color:white;

text-align:center;
background-image:linear-gradient(to bottom,  rgba(255, 255, 255, 0) 0%, black 95%);
}
.hover1:hover .divposact{
background-size:130% auto;
transition:0.5s;
background-position:0px 50%;
}

.h2act{
width:100%;
margin:auto;
padding-top:30px;
padding-bottom:20px;
color:#990000;
font-size:26px;
text-align:center;
}















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




.divfix{
border-bottom:1px solid #990000;
border-top:5px solid #990000;
text-align:center;
}



.table1{
display:block;
}
.tr1{
display:block;
}
.td1{
display:none;
}
.td2{
width:100%;
display:block;
padding-top:0px;
}








.tableb1{
width:100%;
}




.div1200{
width:100%;
}


.divact_rec{
width:100%;
}


}

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


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


}

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


.divcrumb{
display:none;
}



.divfix{
display:none;
}
.divfixm1{
display:block;
}

.topline{
display:none;
}



.tableb1{
display:block;
}
.trb1{
display:block;
}
.tdb1{
display:block;
padding-left:0px;
padding-right:0px;
padding-top:0px;
width:100%;
text-align:center;
}
.tdb2{
display:block;
padding-left:0px;
padding-right:0px;
padding-top:0px;

padding-top:20px;
}
.tdb3{
display:block;
padding-left:0px;
padding-right:0px;
padding-top:0px;

text-align:center;
padding-top:20px;
}
.tdb4{
display:block;
padding-left:0px;
padding-right:0px;
padding-top:0px;
padding-top:20px;
width:100%;
text-align:center;
padding-bottom:30px;
}

.logob1{
width:65px;
}

.faceb1{
width:120px;
}



.pagebr{
display:block;
}



.divfix_face{
top:60px;
right:-255px;
}



.tablet1{
padding-top:0px;
}


}

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


.divbody{
width:100%;
}


}

@media screen and (min-width:1400px) and (max-width:1520px){


.td1{
width:260px;
}


}

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


.td1{
width:180px;
}
.logoimg{
width:110px;
}

}

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


.logoimg1{
width:300px;
display:block;
padding-top:20px;
padding-bottom:20px;
}


}

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


.logoimg1{
width:230px;
display:block;
padding-top:20px;
padding-bottom:10px;
}


}

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


.logoimg1{
width:200px;
display:block;
padding-top:20px;
padding-bottom:20px;

}



}

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


.logoimg1{
width:180px;
display:block;
padding-top:25px;
padding-bottom:20px;

}




.tdt1{
width:110%;
margin-left:-5%;
}


}

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


.tdb1{
padding-right:50px;
}


}

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


.tdb4{
display:none;
}
.tdb3{
width:auto;
}

}

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


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


}

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


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



}

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


.tdb2{
width:230px;
margin:auto;
}


}

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


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



}

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


.pb1{
font-size:15px;
}



.divpage{
font-size:16px;
}



.divfix_line a{
font-size:16px;
padding-top:3px;
padding-bottom:3px;
}



.tadate{
font-size:18px;
}
.tadate1{
font-size:18px;
}

.ad1{
width:60px;
font-size:15px;
}
.pc1{
font-size:18px;
}

.tds2{
padding-left:6px;
padding-right:6px;
}


.h2t1{
font-size:22px;
font-weight:normal;
}

.at1{
font-size:17px;
}
.at2{
font-size:17px;
}




.h2act{
font-size:22px;
font-weight:normal;
}

.divposword{
font-size:16px;
}


}

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


.divpage{
text-align:center;
}


}

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


.divfix_face{
display:none;
}
.divfix_line{
display:block;
}



.divfix_face{

}


}

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


.pc1{
margin-bottom:0px;
position:relative;

}
.pc1 br{
display:inline;
}


}

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


.tablet1{
width:100%;
}


}

@media screen and (min-width:970px) and (max-width:1050px){


.tdt1{
width:500px;
}


}

@media screen and (min-width:770px) and (max-width:970px){

.tdt1{
width:60%;
}

}

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


.tablet1{
display:block;
}
.trt1{
display:block;
}
.tdt1{
display:block;
padding-left:0px;
padding-right:0px;
}
.tdt2{
display:block;
padding-left:0px;
padding-right:0px;
}
.tdt3{
display:block;
}

.h2t1{
text-align:center;
}

.at1{
text-align:center;
}


}

@media screen and (min-width:530px) and (max-width:770px){


.tdt2{
width:460px;
margin:auto;
}



.tdt1{
width:80%;
margin:auto;
}


}

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


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


}

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


.tdt1{
width:98%;
margin:auto;
}


}

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


.divact{
width:48%;
}


}

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


.divact{
width:460px;
margin:auto;
float:none;
margin-bottom:20px;
}


}

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


.divact{
width:90%;
margin:auto;
float:none;
margin-bottom:20px;
}


}