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

}





















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

}













/*

dm31.jpg?n1=2

*/

.mobile{

width:100%;

display:none;

}







.divdm{

width:100%;

margin:auto;

height:480px;

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

background-size:auto 100%;

background-position:50% 50%;



height:520px;

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

background-size:100% 100%;

background-position:50% 0px;

position:relative;

left:0px;

top:0px;

}







.divdmpos{

position:absolute;

left:0px;

top:0px;

width:100%;

height:100%;



background-color:white;

-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=20);filter:alpha(opacity=20);-moz-opacity:0.2;-khtml-opacity:0.2;opacity:0.2;

text-align:center;

}

.divdmpos1{

position:absolute;

left:0px;

bottom:10px;

width:100%;



text-align:center;

}







.divdm1{

padding-top:0px;

padding-bottom:0px;

width:100%;

height:auto;

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

background-size:auto 130%;

background-position:50% 50%;

position:relative;

left:0px;

top:0px;

}





.divdmposm{

position:absolute;

left:0px;

top:0px;

width:100%;

height:100%;



background-color:white;

-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);filter:alpha(opacity=40);-moz-opacity:0.4;-khtml-opacity:0.4;opacity:0.4;

text-align:center;

}



.divdmposm1{

position:absolute;

left:0px;

bottom:90px;

width:100%;



text-align:center;

}

.divdmposm1 img{

width:80%;

}



.h1root span{
display:inline-block;
}


.h1root{
width:calc(100% - 40px);
padding-left:20px;
padding-right:20px;
margin:auto;
font-size:28px;
color:white;
font-weight:normal;
line-height:1.2em;
text-align:center;
padding-top:30px;
padding-bottom:30px;
background-color:#F58422;
background-image:linear-gradient(to right,#F58422,#F58422);
margin-bottom:50px;
}







.h2root{
width:100%;
margin:auto;
font-size:32px;
color:#222222;
font-weight:normal;
line-height:1.1em;
text-align:center;
padding-bottom:20px;
}
.h2root:after{
content:attr(data-word);
display:inline-block;
width:100%;
font-family:arial;

color:#F58422;
font-size:24px;
}







.br13{

width:100%;

clear:both;

}

.br12{

width:100%;

clear:both;

display:none;

}



















.divshow{

width:100%;

padding-top:20px;

padding-bottom:10px;

background-color:#f1f1f1;

border-top:1px solid #cccccc;

border-bottom:1px solid #cccccc;

}



.divshow1{

float:left;

width:31%;

margin-left:1%;

margin-right:1%;

position:relative;

left:0px;

top:0px;

overflow:hidden;

margin-bottom:30px;

}

.divshow1 img{

width:100%;

}

.divshow3{

position:absolute;

bottom:0px;

left:0px;

text-align:center;

width:100%;

font-size:16px;

color:white;

background-color:black;

-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8;

}

.divshow3 a{

display:block;

width:100%;

color:white;

text-decoration:none;

padding-top:10px;

padding-bottom:10px;

}



.word_per{

width:189px;

height:52px;

margin:auto;

margin-bottom:30px;

margin-top:50px;

background-size:100% auto;

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

}



.divshow{

width:100%;



}





















.divline1{

width:100%;

height:1px;

background-color:#cccccc;

margin-bottom:30px;

}



.word_about{

width:187px;

height:57px;

margin:auto;

margin-top:30px;

margin-bottom:30px;

background-size:100% auto;

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

}



.p_about{

width:calc(1100px - 60px);

margin:auto;

font-size:17px;

color:#333333;

line-height:1.6em;

}



.divabout{

width:100%;

min-height:300px;

text-align:center;

padding-bottom:60px;

padding-top:30px;

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

}





























.br2{

width:100%;

clear:both;

display:none;

}



.p1serv{

width:120px;

margin:auto;

text-align:left;

font-size:17px;

color:#333333;

line-height:1.6em;

padding-top:20px;

}



.divserv img{

width:100%;

}



.divserv{

width:23%;



margin-left:1%;

margin-right:1%;

float:left;

background-color:white;

}



.h3s1{

font-weight:normal;

font-size:22px;

color:#333333;

text-align:center;

padding-top:20px;

width:100%;

margin:auto;

padding-bottom:20px;

border-bottom:1px solid #cccccc;

}



.word_serv{

width:121px;

height:52px;

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

margin:auto;

margin-bottom:30px;

margin-top:50px;

background-size:100% auto;

}





.divspace_faq{
height:20px;
}
.divtext_faq ul{
width:calc(100% - 20px);
margin:0px;
margin-left:-20px;
font-size:15.5px;
color:#222222;
color:#464646;
line-height:1.4em;
}
.divtext_faq p{
width:100%;
margin:auto;
font-size:16px;
color:#222222;
color:#464646;
line-height:1.4em;
}

.divtext_faq{
padding-left:32px;
display:none;
}

.divfaq_rec{
width:calc(1200px - 60px);
margin:auto;
}

.pfaq{
border:1px solid #dddddd;
border-left:12px solid #F58422;
width:calc(100% - 52px);
margin:0px;
cursor:pointer;
padding-right:20px;
padding-left:20px;
padding-top:12px;
padding-bottom:12px;
line-height:1.2em;
color:#333333;
font-size:17px;
margin-bottom:10px;
}

.divfaq_rec{

}










.divmap1_rec{
width:calc(1200px - 60px);
margin:auto;
}

.divmap_rec{
padding-top:30px;
padding-bottom:30px;
background-color:#f1f1f1;
}
.divtext_map  b{
color:#FF3366;
}

.divtext_map ul{
max-width:calc(100% - 40px);
width:740px;
margin:auto;
position:relative;
left:-20px;
font-size:16px;
color:#222222;
text-align:left;
list-style-type:none;
color:#333333;

line-height:1.4em;
}

.divtext_map li{
padding-top:3px;
padding-bottom:3px;
border-bottom:1px solid #dddddd;
}


.divtext_map p{
width:100%;
text-align:center;
margin:auto;
font-size:17px;
color:#222222;
color:#222222;
line-height:1.4em;
}












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

}







.divdm{

height:360px;

}







.divserv{

width:45%;

margin-left:2.5%;

margin-right:2.5%;

float:left;

padding-bottom:20px;

margin-bottom:20px;

}











.br2{

display:block;

}





.divfaq_rec{
width:calc(100% - 60px);
}

.pfaq{
width:calc(100% - 38px);
padding-right:15px;
padding-left:15px;
padding-top:10px;
border-left:8px solid #F58422;
font-size:16px;
padding-bottom:10px;
line-height:1.2em;
}

.divtext_faq{
padding-left:22px;
}



.divmap1_rec{
width:calc(100% - 60px);
}

.divtext_map p{
font-size:16px;
}



}



@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:460px){





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

}





.h1root{
font-size:20px;
padding-top:20px;
padding-bottom:20px;
}



.h2root{
font-size:26px;
}

.h2root:after{
font-size:20px;
}







.divshow1{

width:80%;

float:none;

margin:auto;

margin-bottom:20px;

}



.divshow{

padding-bottom:10px;

}







.word_per{

width:140px;

height:39px;

margin-bottom:0px;

margin-top:10px;

}







.word_about{

width:120px;

height:37px;

width:140px;

height:43px;

margin-bottom:20px;

margin-top:0px;

}



.p_about{

font-size:16px;

}





.divline1{

margin-bottom:20px;

}







.word_serv{

width:90px;

height:39px;

margin-bottom:0px;

margin-top:10px;

}



.h3s1{

text-align:center;

font-size:18px;

padding-top:12px;

padding-bottom:12px;

}



.p1serv{

padding-top:10px;

font-size:16px;

}





.divtext_faq ul{
font-size:15px;
}
.divtext_faq p{
font-size:15.5px;
}



}



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





.tableb1{

width:100%;

}





}



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





.div1000{

width:100%;

}





}



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





.divdm{

display:none;

}



.mobile{

display:block;

}







}



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





.divdmpos1 img{

width:80%;

}





}



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



.h1root{
font-size:26px;
padding-top:22px;
padding-bottom:22px;
}



}



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



.h1root{
font-size:24px;
padding-top:18px;
padding-bottom:18px;
}



}



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





.br13{

display:none;

}

.br12{

display:block;

}

.divshow1{

width:48%;

margin-left:1%;

margin-right:1%;

}





}



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



.word_per{

margin-bottom:10px;

margin-top:20px;

}



.word_about{

margin-bottom:10px;

margin-top:20px;

}



}



@media screen and (min-width:660px) and (max-width:1160px){





.p_about{

width:calc(100% - 100px);

margin:auto;

}





}



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





.p_about{

width:calc(100% - 60px);

margin:auto;

}





}



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



.divfaq_rec{
width:calc(100% - 100px);
}



.divmap1_rec{
width:calc(100% - 100px);
}



}