@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%;

min-height:700px;


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;



}




.mobile{
display:none;
}

.areturn{
display:block;
width:100px;
padding-top:6px;
padding-bottom:6px;
text-align:center;
background-color:#996600;
font-size:16px;
border-radius:6px;
color:white;
margin-top:20px;

}







.divpn{
width:100%;
text-align:left;
}

.apn1{
display:inline;
font-size:17px;
color:#795135;
font-weight:bold;
margin-bottom:10px;
}

.pdate{
width:100%;
margin:auto;
font-size:18px;
color:#333333;

text-align:center;
margin-bottom:20px;
}

.h2news{
width:100%;
margin:auto;
color:#990000;
font-size:26px;
text-align:center;

padding-top:20px;
padding-bottom:20px;
}




.divtext img{
max-width:100%;
}

.divimg1_video{
width:100%;
position:relative;
left:0px;
top:0px;
margin:auto;
}

.divimg_video{
width:330px;
position:relative;
left:0px;
top:0px;
margin:auto;
}

.diviframe{
width:100%;
background-image:url(https://ssgw.yida-design.com.tw/mountain2.png);
background-size:934px 276px;
background-position:50% 100%;
margin-bottom:10px;
background-repeat:repeat-x;
}
.divimg_video img{
width:100%;
}
.divimg1_video img{
width:100%;
}
.divposvideo{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
}
.divposvideo iframe{
width:100%;
height:100%;
}











.divbody1{
width:1000px;
}

.imgv1{
width:45%;
margin-left:1.5%;
margin-right:1.5%;
}
.imgh1{
width:96%;
}
.divtext p{
font-size:18px;
color:black;
line-height:1.6em;
}
.divtext table{

color:black;
line-height:1.6em;
text-align:left;
}
.divtext td{
    font-size:18px;
padding-left:10px;
}




@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%;
}


.mobile{
display:block;
}
.desk{
display:none;
}
.areturn{
margin:auto;
}
.apn1{
padding-bottom:6px;

}
.divpn{
text-align:center;
padding-top:10px;
padding-bottom:10px;
}


}

@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;
}


}

@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;

}



}

@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;
}



.pdate{
font-size:16px;
}

.h2news{
font-size:20px;
font-weight:normal;
}

.pdate{
font-size:16px;
}




.apn1{
font-size:15px;
font-weight:normal;

}
.areturn{
font-size:15px;
}




.divimg_video{
width:100%;
}



.divtext p{
font-size:16px;
}
.divtext td{
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:860px) and (max-width:1200px){


.divbody1{
width:800px;
margin:auto;
}

.divpn{
text-align:center;
}


}

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


.divbody1{
width:660px;
margin:auto;
}


}

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


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


}