.divspace{
width:100%;
height:70px;
}

.acon1{
display:inline-block;
padding-top:6px;
padding-bottom:6px;
font-size:14px;
width:100%;
background-color:#4F9DD0;
background-color:#f1f1f1;
color:white;
color:#666666;
text-align:center;
border:1px solid #cccccc;
letter-spacing:1px;
font-family: verdana;
}





.a1{
display:inline-block;
padding-top:10px;
padding-bottom:10px;
font-size:16px;
padding-right:18px;
padding-left:18px;
letter-spacing:0.5px;
font-family: Noto Sans TC, sans-serif;
position:relative;
left:0px;
color:#222222;
top:0px;
}


.logoimg{
width:237px;
display:inline-block;
transition:0.3s;
}
.logoimg-back{
width:210px;
display:inline-block;
transition:0.3s;
}

.divlogo-back{
position:absolute;
left:0px;
top:-15px;
width:90%;
padding-top:30px;
padding-bottom:13px;
background-color:white;
text-align:center;
transition:0.3s;
box-shadow:0px 0px 6px #cccccc;
}

.divlogo{
position:absolute;
left:0px;
top:0px;
width:100%;
padding-top:20px;
padding-bottom:20px;
background-color:white;
text-align:center;
transition:0.3s;
box-shadow:0px 0px 6px #cccccc;
}


.td1{
display:table-cell;
vertical-align:middle;
width:320px;
position:relative;
left:0px;
top:0px;
}



.divlogo-back{
position:absolute;
left:0px;
top:-15px;
width:90%;
padding-top:30px;
padding-bottom:13px;
background-color:white;
text-align:center;
transition:0.3s;
box-shadow:0px 0px 6px #cccccc;
}

.divlogo{
position:absolute;
left:0px;
top:0px;
width:100%;
padding-top:20px;
padding-bottom:20px;
background-color:white;
text-align:center;
transition:0.3s;
box-shadow:0px 0px 6px #cccccc;
}

.td3{
display:table-cell;
vertical-align:middle;
width:100px;
text-align:right;
}


.td2{
display:table-cell;
vertical-align:middle;
padding-right:20px;
text-align:right;
}


.tr1{
display:table-row;
}

.table1-back{
display:table;
width:1200px;
margin:auto;
height:55px;
transition:0.5s;
}

.table1{
display:table;
width:1200px;
margin:auto;
height:70px;
transition:0.5s;
}

.divfix{
position:fixed;
left:0px;
top:0px;
width:100%;
z-index:17;
box-shadow:0px 0px 6px #cccccc;
background-color:rgba(255,255,255,1);
}






















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

.a1:hover .divlist1{
animation-name:show1;
animation-duration:0.3s;
animation-fill-mode:forwards;
animation-timing-function:ease-out;
}


.divlist1{
position:absolute;
left:0px;
top:-2000px;
width:180px;
padding-top:55px;
}
.divpadd_list1{
background-color:white;
box-shadow:0px 0px 6px #cccccc;
border-top:5px solid #4F9DD0;
}
.a11{
width:calc(100% - 15px);
display:block;
padding-left:15px;
text-align:left;
padding-top:6px;
font-size:16px;
color:#222222;
font-size:16px;
padding-bottom:6px;
border-bottom:1px solid #cccccc;
font-family: Noto Sans TC, sans-serif;
}



.pdmimg{
animation-name:pdmimg;
animation-delay:0.5s;
animation-fill-mode:forwards;
animation-duration:0.7s;
animation-timing-function:ease-out;
position:relative;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
top:20px;
}


.divposdm1{
position:absolute;
right:0px;
top:90px;
}

.ani_pdm{
animation-name:pdm;
animation-delay:1s;
animation-fill-mode:forwards;
animation-duration:0.7s;
animation-timing-function:ease-out;
position:relative;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
}

.divposdm{
position:absolute;
left:calc(50% - 600px);
top:50%;
transform:translateY(-50%);
}
.pdm{
width:100%;
margin:auto;

color:white;
font-weight:300;


padding:15px;
padding-left:20px;
padding-right:0px;
display:inline-block;
background-color:rgba(0,0,0,0.6);
font-size:21px;
line-height:1.6em;
letter-spacing:3px;
font-family: Noto Sans TC, sans-serif;
}

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



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




@keyframes dm1{
0%{
background-position:50% calc(0% - 60px);

}
100%{
background-position:50% 0%;
}
}


.divdm{
width:100%;
height:260px;
background-image:url(https://geonano.yida-design.com.tw/dmg1.jpg?e1=1);
background-position:50% calc(0% - 60px);
background-size:1920px auto;
background-color:#cccccc;
position:relative;
left:0px;
top:0px;
overflow:hidden;

background-position:50% calc(0% - 60px);

animation-delay:0.2s;
animation-name:dm1;
animation-duration:2s;
animation-fill-mode:forwards;
animation-timing-function:ease-out;
}
















.divcrumb{
width:1190px;
margin:auto;
font-size:15px;
text-align:right;
color:#666666;
padding-right:10px;
font-family:Microsoft JhengHei;
}
.divcrumb span{
font-family:poppins;
font-size:1.2em;
position:relative;
top:1px;
}

.divcrumb a{
color:#888888;
}






.pb1 code{
display:inline-block;
padding:8px;
padding-left:12px;
padding-right:12px;
margin-left:6px;
margin-right:6px;
font-size:1.1em;
line-height:1.2em;
background-color:#13344A;
}

.ab2 br{
display:none;
}


.ab2{
display:block;
width:calc(100% - 30px);
padding-bottom:6px;
color:white;
font-weight:300;
font-size:15px;
padding-left:30px;
font-family: Microsoft JhengHei;
}




.h3b1{
width:100%;
margin:auto;
font-size:19px;
letter-spacing:1px;
font-weight:300;
color:white;
padding-bottom:20px;
font-family: Noto Sans TC, sans-serif;
}
.h3b1:before{
content:"";
display:inline-block;
width:20px;
height:4px;
background-color:#00FFFF;
position:relative;
top:-3px;
margin-right:10px;
}

.brb1{
display:none;
} 

.brb2{
display:none;
} 

.divcopy{
width:100%;
background-color:#1D4F70;
text-align:center;
font-size:15px;
color:white;
padding-top:10px;
padding-bottom:10px;
}

.qrcode{
width:130px;
}

.ab1{
display:inline-block;
padding-left:0px;
padding-right:20px;
padding-bottom:6px;
font-size:15px;
color:white;
font-family: Microsoft JhengHei;
}

.pb1{
width:100%;
margin:auto;
color:white;
line-height:1.7em;
font-size:15px;
font-family:Microsoft JhengHei;
}

.pb1 span{
display:inline-block;
width:100%;
padding-top:10px;
}

.tableb1{
display:table;
width:1200px;
margin:auto;
}
.trb1{
display:table-row;
}

.tdb2{
display:table-cell;
vertical-align:top;
text-align:left;
}
.tdb21{
display:table-cell;
vertical-align:top;
text-align:left;

}



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


.tdb1{
display:table-cell;
vertical-align:top;
text-align:left;
width:250px;
padding-left:20px;
padding-right:50px;
}








.divbase_rec{
width:100%;
background-color:#24628A;
padding-top:50px;
padding-bottom:30px;
}


















.logom1{
height:30px;
position:relative;
left:-20px;
position:relative;
top:3px;
}

.tam1{
width:100%;
height:45px;
}
.tdm2{
text-align:center;
}
.tdm1{
width:50px;
text-align:center;
cursor:pointer;
}
.tdm1 span{
display:block;
width:30px;
height:2px;
margin:auto;
margin-top:4px;
margin-bottom:4px;
border-radius:6px;
background-color:#222222;
}

.divfix_m1{
position:fixed;
left:0px;
top:0px;
width:100%;
z-index:13;
display:none;
background-color:white;
box-shadow:0px 0px 6px #cccccc;
}







.divm1{
display:none;
}

.listm1{
background-image:url(https://geonano.yida-design.com.tw/icon_down.svg?n1);
background-repeat:no-repeat;
background-size:auto 0.9em;
background-position:calc(100% - 15px) 50%;
}

.am1{
display:block;
width:calc(100% - 15px);
padding-left:15px;
color:white;
font-size:16px;
padding-top:10px;
padding-bottom:10px;
font-family: Noto Sans TC, sans-serif;
font-weight:300;
}

.am3{
display:inline-block;
pading:6px;
padding-left:15px;
padding-right:15px;
background-color:#666666;
margin-left:15px;
letter-spacing:1px;
line-height:1em;
color:white;
font-size:15px;
padding-top:10px;
padding-bottom:10px;
font-family: poppins;
font-weight:300;
}

.am11{
display:block;
width:calc(100% - 15px);
padding-left:15px;
color:#222222;
background-color:white;
font-size:16px;
padding-top:10px;
padding-bottom:10px;
font-family: Noto Sans TC, sans-serif;
}


.aclose{
display:block;
width:calc(100% - 10px);
padding-left:10px;
background-color:#EEEEEE;
font-size:15px;
font-family:verdana;
padding-top:6px;
padding-bottom:6px;
margin-bottom:10px;
color:#222222;
}
.aclose img{
height:0.9em;
display:inline-block;
margin-right:6px;
position:relative;
top:1px;
transform:scaleX(-1);
}


.divback{
position:fixed;
left:0px;
top:0px;
width:100%;
height:100vh;
display:none;
background-color:rgba(255,255,255,0.7);
z-index:19;
}

.divfix_m3-open{
position:fixed;
left:0px;
top:0px;
width:230px;
height:100vh;
z-index:21;
background-color:#343A40;
transition:0.5s;
}

.divfix_m3-close{
position:fixed;
left:0px;
top:0px;
left:-240px;
width:230px;
height:100vh;
z-index:21;
background-color:#343A40;
transition:0.5s;
}





.parrow{
width:50px;
height:50px;
display:flex;
margin:auto;
background-color:#4F9DD0;
align-items:center;
justify-content:center;
border-radius:50%;
margin-bottom:30px;
}
.parrow img{
width:20px;
}


.h2root1{
width:100%;
margin:auto;
border-bottom:1px solid #cccccc;
font-weight:normal;
font-size:20px;
letter-spacing:2px;
text-align:center;
font-family: Noto Sans TC, sans-serif;
margin-bottom:30px;

}



.h2root1 span{
display:inline-block;
padding-left:20px;
padding-right:20px;
background-color:#f6f6f6;
position:relative;
top:10px;
}

.h2root{
width:100%;
margin:auto;
text-align:center;
font-size:28px;
padding-top:50px;
padding-bottom:10px;
font-weight:normal;
font-family: poppins;
}









.divfix_line{
position:fixed;
left:0px;
bottom:0px;
width:100%;
z-index:13;
display:none;
}
.divfix_line a{
display:block;
padding-top:10px;
padding-bottom:10px;

float:left;
color:white;
background-color:#1A3260;
text-align:center;
width:50%;
font-size:15px;
line-height:1em;
letter-spacing:0px;
font-family:  Microsoft JhengHei;
}

.divfix_quote{
position:fixed;
right:0px;
top:100px;
z-index:13;
}
.aquote{
display:block;
width:90px;
padding-left:20px;
padding-top:10px;
padding-bottom:10px;
line-height:1em;
background-color:#1A3260;
color:white;
font-weight:300;

margin-bottom:6px;
font-size:15px;
line-height:1em;
letter-spacing:0px;
font-family:  Microsoft JhengHei;

}









/*
home:::serv1
*/

.divpanel{
min-height:360px;
overflow:hidden;
padding-bottom:30px;
}


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

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



a{
text-decoration:none;
}

body{
padding:0px;
margin:0px;
height:100vh;
scroll-behavior: smooth;
background-color:#f6f6f6;
}


  /*

    font-family: Noto Serif TC, serif;
    
    font-family:arial,tahoma,verdana;
    font-family:georgia;
    font-family:courier new;
*/


html{
line-height:1.5em;
padding:0px;
scroll-behavior: smooth;
margin:0px;
font-size:16px;
font-family: Microsoft JhengHei;
background-color:#f6f6f6;
}

::selection {
background-color:#338FFF;
color:white;
}
::-moz-selection {
background-color:#338FFF;
color:white;
}



@keyframes kenburns {
    0% {
      opacity: 0;
    }
    5% {
      opacity: 1;
    }
    95% {
        transform: scale3d(1.5, 1.5, 1.5) ;
        animation-timing-function: ease-in;
        opacity: 1;
    }
    100% {
        transform: scale3d(2, 2, 2) ;
        opacity: 0;
    }
}


.text_overflow{
width:100px;
  overflow: hidden;
  text-overflow: ellipsis;
  
  display: -webkit-box;
   -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.text_overflow1{
 white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}




.servimg{
width:100%;
}



.ago{
display:inline-block;
padding-top:10px;
padding-bottom:10px;
padding-left:15px;
padding-right:15px;
background-color:#9D364C;
font-size:16px;
border-radius:4px;
margin-left:10px;
line-height:1em;
color:white;
display:none;
margin-bottom:10px;
font-family:Microsoft JhengHei;
}

.divspace2{
height:30px;
}


.pserv{
width:100%;
margin:auto;
font-size:15px;
color:#565555;
font-weight:400;
line-height:1.8em;
font-size:15px;
letter-spacing:1px;
font-family:Microsoft JhengHei;
}



.ulserv{
width:90%;
margin:0px;
margin-left:-20px;
font-size:16px;

color:#555555;
line-height:1.3em;
font-size:16px;
letter-spacing:1px;
font-family:Microsoft JhengHei;
}
.ulserv li{
padding-top:3px;
padding-bottom:3px;
}

.h3serv{
width:100%;
margin:auto;
font-weight:normal;
font-size:18px;
color:#0E6EB8;
color:#222222;
padding-bottom:10px;
letter-spacing:1px;
font-family: Noto Sans TC, sans-serif;
}

.divbody_serv{
width:calc(100% - 40px);
padding:20px;
display:block;
background-color:white;
}

.aserv3{
color:#111111;
border-bottom:2px solid #5CCDDA;
position:relative;
}
.aserv1{
color:#111111;
border-bottom:2px solid #cccccc;
}
.aserv:last-of-type{
border-bottom:0px solid #cccccc;
}
.aserv1:hover{
color:#222222;
border-bottom:2px solid #5CCDDA;
position:relative;
}

.divrec_serv a{
display:block;

width:calc(100% - 30px);
padding-left:30px;

font-family: Noto Sans TC, sans-serif;
font-size:16px;
line-height:1.3em;
padding-top:6px;
padding-bottom:6px;

}

.h2serv{
width:calc(100% - 10px);
margin:auto;
padding-left:10px;
font-weight:normal;
font-size:20px;
color:#222222;
text-align:left;
padding-top:30px;
padding-bottom:10px;
font-family: Noto Sans TC, sans-serif;
position:relative;
left:0px;
top:0px;
}
.h2serv:before{
content:"";
display:inline-block;
width:9px;
height:9px;
position:relative;
top:-2px;
margin-right:10px;
background-color:#0E6EB8;
}


.divrec_serv{
background-color:white;
padding-left:10px;
padding-right:10px;
width:calc(100% - 20px);
padding-bottom:20px;
box-shadow:0px 0px 6px #cccccc;
}

.tableserv{
display:table;
width:1200px;
margin:auto;
left:0px;

table-layout:fixed;
}
.trserv{
display:table-row;
}
.tdserv1{
display:table-cell;
vertical-align:top;
padding-left:10px;
width:210px;
padding-right:50px;
}
.tdserv2{
display:table-cell;
vertical-align:top;
}
















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


.sphome{
display:none;
}



.tdserv1{
width:170px;
}


}

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


.table1{
display:block;
width:100%;
table-layout:fixed;
}
.tr1{
display:block;
}
.divlogo{
position:relative;
width:300px;
display:inline-block;
padding-top:10px;
padding-bottom:10px;
margin:auto;
box-shadow:0px 0px 0px white;
}
.divlogo-back{
position:relative;
width:300px;
display:inline-block;
padding-top:10px;
top:0px;
padding-bottom:10px;
}
.td1{
display:block;
padding-right:0px;
padding-left:0px;
width:100%;
text-align:center;
padding-bottom:10px;
text-align:center;

}
.td2{
display:block;
padding-right:0px;
padding-left:0px;
width:calc(100% - 100px);
float:left;
text-align:center;
position:relative;
left:50px;
}
.td3{
display:block;
width:100px;
padding-right:0px;
padding-left:0px;
float:left;
}


.logoimg{
width:210px;
display:inline-block;
transition:0.3s;
}
.logoimg-back{
width:210px;
display:inline-block;
transition:0.3s;
}

.divfix{
position:relative;
left:0px;
top:0px;
}



}

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


.divspace{
height:0px;
}


}

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



.table1{
width:100%;
}
.table1-back{
width:100%;
}



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



.tableb1{
width:100%;
}


.div1200{
width:100%;
}

}

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


.a1{
padding-right:13px;
padding-left:13px;
}


}

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


.divposdm{
left:30px;
}


}

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


.divdm{
height:210px;
background-size:1650px auto;
}
.pdmimg{
width:660px;
}



}

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


.divposdm{
top:35%;
}


}

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


.divposdm{
top:50%;
}
.pdm{
padding:10px;
font-size:18px;
padding-right:0px;
padding-left:15px;
}

.divdm{
height:190px;
background-size:1560px auto;
}
.pdmimg{
width:560px;
}


.divposdm1{
right:-60px;
}



}

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


.divposdm{
left:20px;
}

.divposdm{
top:50%;
}
.pdm{
padding:10px;
font-size:16px;
padding-right:0px;
padding-left:15px;
letter-spacing:0px;
}

.divdm{
height:160px;
background-size:1360px auto;
}
.pdmimg{
width:460px;
}


.divposdm1{
right:-30px;
}



}

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


.divposdm{
left:20px;
}

.divposdm{
top:50%;
}
.pdm{
padding:10px;
padding-right:0px;
padding-left:15px;
letter-spacing:0px;
font-size:15px;
}

.divdm{
height:120px;
background-size:1100px auto;
}
.pdmimg{
width:320px;
}


.divposdm1{
right:-30px;
}




.ab2{
width:calc(100% - 60px);
padding-left:30px;
padding-right:30px;
}




.divbase_rec{
padding-top:30px;
padding-bottom:30px;
}




.logom1{
height:25px;
}


.divfix_m3-open{
width:190px;
}
.divfix_m3-close{
width:190px;
left:-200px;
}

.am1{
font-size:15.5px;
padding-top:7px;
padding-bottom:7px;
}



.h2root{
font-size:22px;
padding-top:30px;
padding-bottom:0px;
}

.parrow{
width:40px;
height:40px;
margin-bottom:20px;
}
.parrow img{
width:15px;
}

.h2root1{
font-size:18px;
margin-bottom:20px;
}




.divfix_quote{
display:none;
}

.divfix_line{
display:block;
}



.divspace2{
height:20px;
}

.h3serv{
font-size:17px;
padding-bottom:10px;
}




}

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


.ab2{
width:calc(100% - 0px);
padding-left:0px;
}



.ab1{
padding-left:10px;
padding-right:10px;
}


.tableb1{
display:block;
}
.trb1{
display:block;
}
.tdb1{
display:block;
padding-left:0px;
padding-right:0px;
margin:auto;
padding-bottom:20px;
text-align:center;
}
.tdb2{
display:block;
padding-left:0px;
padding-right:0px;
margin:auto;
text-align:center;
padding-bottom:20px;
}
.tdb21{
display:block;
padding-left:0px;
padding-right:0px;
margin:auto;
text-align:center;
padding-bottom:20px;
}
.tdb3{
display:block;
padding-left:0px;
padding-right:0px;
margin:auto;
text-align:center;
}

.pb1{
text-align:center;
}






.divspace{
height:45px;
}

.divfix_m1{
display:block;
}

.divfix{
display:none;
}




.divfix_quote{
top:auto;
bottom:0px;
}


}

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


.tdb3{
display:none;
}


}

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


.ab2 br{
display:inline;
} 


}

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


.brb1{
display:inline;
}


}

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


.brb2{
display:inline;
}


}

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


.divfix_quote{
top:130px;
}


}

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


.tableserv{
width:100%;
}


}

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


.tdserv1{
padding-right:30px;
}


}

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


.tdserv1{
padding-right:10px;
}



.tableserv{
display:block;
left:180px;
margin-left:-180px;
}
.tdserv1{
padding-left:0px;
}
.tdserv2{
padding-left:0px;
padding-right:0px;
}

.ago{
display:inline-block;
}


}