@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.webp);

background-size:auto 100%;

background-position:50% 50%;

}



.divdm1{

width:100%;

height:330px;

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

background-size:auto 100%;

background-position:50% 50%;

}



.divdm2{

width:100%;

height:330px;

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

background-size:auto 100%;

background-position:50% 50%;

}











































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

}



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

}























.divqr{

margin-top:10px;

display:inline-block;

width:200px;

font-size:17px;

text-align:center;

margin-right:30px;

margin-left:30px;

color:#666666;

}

.divqr img{

width:100%;

}



.divcontact{

width:600px;

margin:auto;

text-align:center;

padding-bottom:30px;

}



.pcontact{

width:100%;

font-size:18px;

color:#333333;

line-height:1.6em;

}



.divcontact img{



}















.word_contact1{

width:275px;

height:62px;

margin:auto;

margin-bottom:30px;

background-size:100% auto;

margin-top:30px;

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

}







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





.divdm2{

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

}







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

height:150px;

}



.divdm2{

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

background-position:55% 50%;

height:150px;

}

.divdm3{

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

background-position:55% 50%;

height:150px;

}





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

}







.pcontact{

font-size:16px;

}

.divqr{

font-size:18px;

}





.word_contact1{

width:200px;

height:46px;

}





}



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





.table{

width:100%;



}



.table-back{

width:100%;

}





.div1200{

width:100%;

}



}



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

}





}



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





.divqr{

width:60%;

margin-left:0px;

margin-right:0px;

}





}



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





.divcontact{

padding-top:30px;

}







.word_contact1{

margin:auto;

}





}



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





.divcontact{

width:90%;

margin:auto;

}







}



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





.divqr{

width:42%;

margin-left:2%;

margin-right:2%;

}





}