@keyframes show{

1%{

top:0px;   

}  

100%{

top:40px;

}

}

@keyframes show-back{

1%{

top:0px;   

}  

100%{

top:30px;

}

}

.at1:hover .divlist11{



animation-name:show;

animation-duration:0.5s;

animation-fill-mode:forwards;



}

.at1-back:hover .divlist11{



animation-name:show-back;

animation-duration:0.5s;

animation-fill-mode:forwards;



}

.at3:hover .divlist11{



animation-name:show;

animation-duration:0.5s;

animation-fill-mode:forwards;



}

.at3-back:hover .divlist11{



animation-name:show-back;

animation-duration:0.5s;

animation-fill-mode:forwards;



}







.divlist11{

position:absolute;

left:-25px;

top:-3000px;

width:220px;

background-color:#f58422;

border-radius:4px;

box-shadow:3px 3px 3px #333333;

transition:0.5s;

}

.at11{

display:block;

font-size:18px;

color:white;

padding-top:10px;

padding-bottom:10px;

color:white;

text-align:center;

border-bottom:2px dotted white;

text-decoration:none;

}

.at11:hover{

background-color:#ff6600;

}





.divdm3{

width:100%;

height:330px;

background-image:url(https://jg.yida-design.com.tw/dms4.jpg?n1=3);

background-size:auto 100%;

background-position:50% 50%;

}



.divdm1{

width:100%;

height:330px;

background-image:url(https://jg.yida-design.com.tw/dms2.jpg?n1=1);

background-size:auto 100%;

background-position:50% 50%;

}



.divdm2{

width:100%;

height:330px;

background-image:url(https://jg.yida-design.com.tw/dms5.jpg?n1=2);

background-size:auto 100%;

background-position:50% 50%;

}



















































.pa1{

font-size:18px;

color:#333333;

line-height:1.8em;

padding-bottom:30px;

}



.h2a1{

font-size:26px;

color:#ff3300;

line-height:1.2em;

padding-top:0px;

padding-bottom:0px;

}

.h2a1 br{

display:none;

}





.tablen1{

width:1200px;

margin:auto;

display:table;

margin-top:50px;

vertical-align:top;

}

.trn1{

display:table-row;

}

.tdn1{



display:table-cell;

vertical-align:top;

padding-left:10px;

}

.tdn2{

width:380px;

padding-top:80px;

display:table-cell;

padding-left:60px;

vertical-align:top;

text-align:center;

}

.tdn2 img{

display:block;

width:95%;

margin:auto;

border:1px solid #cccccc;

padding:5px;

}























.logoimg{

width:212px;

transition:0.5s;

}

.logoimg-back{

width:160px;

transition:0.5s;

}





.divspace{

width:100%;

height:130px;

}



.divfix{

position:fixed;

left:0px;

top:0px;

width:100%;

background-color:white;

z-index:99;

transition:0.5s;

}



.divfix-back{

position:fixed;

left:0px;

top:0px;

width:100%;

background-color:white;

z-index:99;

box-shadow:3px 3px 3px #cccccc;

transition:0.5s;

}





.table{

display:table;

width:1200px;

margin:auto;

height:130px;

transition:0.5s;

}

.table-back{

display:table;

width:1200px;

margin:auto;

height:90px;

transition:0.5s;

}

.tr{

display:table-row;

}

.td1{

display:table-cell;

vertical-align:middle;

padding-top:10px;

padding-left:10px;

}

.td2{

width:850px;

display:table-cell;

vertical-align:middle;

padding-top:20px;

}

.at1{

display:block;

width:16%;

float:left;

padding-top:12px;

padding-bottom:12px;

text-align:center;

font-size:20px;

color:#333333;

text-decoration:none;

transition:0.5s;

position:relative;

left:0px;

top:0px;

}

.at1-back{

display:block;

width:16%;

float:left;

padding-top:6px;

padding-bottom:6px;

text-align:center;

font-size:16px;

color:#333333;

text-decoration:none;

transition:0.5s;

position:relative;

left:0px;

top:0px;

}



.at3{

display:block;

width:20%;

float:left;

padding-top:12px;

padding-bottom:12px;

text-align:center;

font-size:20px;

color:white;

background-color:#f58422;

text-decoration:none;

position:relative;

left:0px;

top:0px;

transition:0.5s;

position:relative;

left:0px;

top:0px;

}

.at3:after{

content:"";

position:absolute;

left:45%;

bottom:-5px;

width:15px;

height:15px;

background-color:#f58422;

transform:rotate(45deg);

transition:0.5s;



}

.at3-back{

display:block;

width:20%;

float:left;

padding-top:6px;

padding-bottom:6px;

text-align:center;

font-size:16px;

color:white;

background-color:#f58422;

text-decoration:none;

position:relative;

left:0px;

transition:0.5s;

top:0px;

}

.at3-back:after{

content:"";

position:absolute;

left:45%;

bottom:-5px;

width:15px;

height:15px;

background-color:#f58422;

transform:rotate(45deg);

transition:0.5s;

}





.basebr1{

width:100%;

clear:both;

display:none;

}



.divbaserec{

font-size:16px;

width:100%;

padding-top:10px;

padding-bottom:10px;

background-color:#222222;

text-align:center;

color:white;

}

.divbaserec br{

display:none;

}



.ulbase{

width:90%;

position:relative;

left:-10px;

}

.ulbase li{

color:white;

font-size:18px;

padding-top:6px;

padding-bottom:6px;

width:90%;

border-bottom:1px solid #666666;

}



.h3base{

font-size:24px;

font-weight:normal;

color:#db6b0a;

width:100%;

margin-top:0px;

}



.qrcode{

display:block;

width:130px;

border:4px solid #d86b0a;

}



.pbase{

font-size:18px;

color:white;

line-height:1.3em;

}



.pbase1{

font-size:18px;

color:white;

line-height:1.6em;

}



.logo2{

width:166px;

height:35px;

background-size:100% auto;

background-image:url(https://jg.yida-design.com.tw/logo2.png);

}



.tableb1{

display:table;

width:1100px;

margin:auto;

vertical-align:top;

}

.trb1{

display:table-row;

}

.tdb1{

width:220px;

 display:table-cell;  

 padding-left:10px;

 padding-right:10px;

 vertical-align:middle;

}

.tdb11{

 display:table-cell;  

 vertical-align:middle;

}

.tdb2{

width:190px;

 display:table-cell;  

 vertical-align:top;

}

.tdb3{

width:390px;

display:table-cell;

vertical-align:top;

}



.divbaseall{

width:100%;

background-color:#333333;

padding-top:30px;

padding-bottom:30px;

}





























.divre1{

position:relative;

width:100%;

left:0px;

top:0px;

}

.divpos1{

position:absolute;

left:0px;

top:0px;

}

.divpos1 img{

height:20px;

width:30px;

padding-top:10px;

padding-left:10px;

}



.logom1{

height:45px;

display:block;

margin:auto;

padding-bottom:20px;

padding-top:15px;





}



.divfix1{

position:fixed;

left:0px;

top:0px;

width:100%;

background-color:#f58422;

z-index:133;

height:70px;

display:none;

border-bottom:1px solid #cccccc;

}







.after{

position:relative;

left:0px;

top:0px;

}

.after:after{

content:"+";

position:absolute;

right:10px;

top:10px;

font-size:26px;

color:#ff6600;

}



.divback{

position:fixed;

left:0px;

top:0px;

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:140;

display:none;

}



.divfix3{

position:fixed;

left:-100%;

top:0px;

z-index:166;

width:60%;

height:3000px;

border-right:1px solid #cccccc;

background-color:white;



}



.af1{

display:block;

padding-top:10px;

padding-bottom:10px;

font-size:18px;

color:#333333;

text-align:center;

width:100%;

text-decoration:none;

border-bottom:1px solid #cccccc;

}



.af11{

display:block;

padding-top:6px;

padding-bottom:6px;

font-size:17px;

color:#333333;

text-align:center;

width:100%;

color:white;

background-color:#ff6600;

text-decoration:none;

border-bottom:1px solid #cccccc;

}





.divfixp1{

position:fixed;

left:0px;

bottom:0px;

width:100%;

display:none;

}





.line1{

background-color:#03b904;

}



.phone1{

background-color:#0099cc;

}



.divfixp1 a{

display:block;

width:50%;

float:left;

padding-top:10px;

padding-bottom:10px;

text-align:center;

text-decoration:none;

font-size:18px;

color:white;

}







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

font-family: Microsoft JhengHei;

}



.div1000{

width:1000px;

margin:auto;

}







strong{
color:#666666;
padding-left:3px;
padding-right:3px;
}








.word_about1{
width:275px;
height:62px;
margin-bottom:30px;
background-size:100% auto;
background-image:url(https://jg.yida-design.com.tw/word_about1.png);
}




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





.divdm2{

background-image:url(https://jg.yida-design.com.tw/dms51.jpg?n1=1);

}







.div1000{

width:100%;

}





}



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





.divdm1{

height:260px;



}



.divdm2{

height:260px;



}



.divdm3{

height:260px;



}





}



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





.divdm1{

background-image:url(https://jg.yida-design.com.tw/dms21.jpg?n1=4);

height:150px;

}



.divdm2{

background-image:url(https://jg.yida-design.com.tw/dms52.jpg?n1=3);

background-position:55% 50%;

height:150px;

}

.divdm3{

background-image:url(https://jg.yida-design.com.tw/dms41.jpg?n1);

background-position:55% 50%;

height:150px;

}





.pa1{

font-size:16px;

line-height:1.6em;

padding-bottom:0px;

}



.h2a1{

font-size:19.5px;

font-weight:normal;

padding-top:20px;

padding-bottom:10px;

}





.tablen1{

margin-top:20px;

}



.tdn2 img{

width:80%;  

}







.pbase{

font-size:16px;

}

.pbase1{

font-size:16px;

}

.h3base{

font-size:18px;

}

.divbaserec{

font-size:14px;

}



.ulbase{

width:85%;

}



.ulbase li{

font-size:16px;

}



.logo2{

width:120px;

height:25px;

}




.word_about1{
width:200px;
height:46px;
}



}



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





.tablen1{

width:100%;

}



.tdn2{

padding-left:10px;

}







.table{

width:100%;



}



.table-back{

width:100%;

}





.div1200{

width:100%;

}



}



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





.h2a1 br{

display:inline;

}





}



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







.tablen1{

display:block;

width:100%;

}

.trn1{

display:block;

}

.tdn1{

width:100%;

margin:auto;

padding-left:0px;

display:block;

}

.tdn2{

width:100%;

padding-left:0px;

margin:auto;

display:block;

padding-top:10px;

}



.h2a1{

width:90%;

margin:auto;



text-align:center;

}

.pa1{

width:90%;

margin:auto;

}



.word_about1{
margin:auto;
}



}



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





.h2a1{

padding-top:20px;

padding-bottom:20px;

}





.tdn2 img{

width:360px;

}





}



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





.td2{

width:700px;

}

.logoimg{

width:180px;

transition:0.5s;

}



}



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





.at1{

font-size:16px;

}

.at1-back{

font-size:16px;

}

.at3{

font-size:16px;

}

.at3-back{

font-size:16px;

}





}



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





.td2{

width:700px;

}





}



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





.divspace{

height:70px;

}







.tableb1{

display:block;

}

.trb1{

display:block;

}

.tdb1{

display:block;

width:100%;

padding-left:0px;

padding-right:0px;

text-align:center;

}



.h3base{

text-align:center;

}



.pbase{

text-align:center;

}

.pbase1{

text-align:center;

}



.logo2{

margin:auto;

}

.qrcode{

margin:auto;

}

.tdb11{

display:block;

width:100%;

}



.ulbase{

margin:auto;

text-align:center;

left:0px;

list-style-type:none;



}





.tdb2{

padding-top:30px;

display:block;



width:100%;

}

.tdb3{

padding-top:30px;

display:block;

width:100%;

}



.basebr1{

display:block;

}











.divfix{

display:none;

}

.divfix-back{

display:none;

}

.divfix1{

display:block;

}







.divfixp1{

display:block;

}





}



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





.divbaserec br{

display:inline;

}





}



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





.tdb11{

display:none;

}

.logo2{

margin:auto;

}

.tdb1{

width:140px;

text-align:center;

}

.tdb2{

width:90px;

}

.tdb3{

width:240px;

}





}



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





.tableb1{

width:100%;

}





}