.divanimation{
display:none;
left:100px;
}


/*
top bottom left bottom
flipx flipy
zoom zoomleft zoomright zoomup zoomdown
bounce bounceleft bounceright bounceup bouncedown
rotate rotateleftup rotateleftdown rotaterightup rotaterightdown
speed tada shake band
text-zoomin
*/



.menu3{
position:relative;
width:70px;
height:70px;
border:1px solid #cccccc;
}

.menu3 span{
height:2px;
background-color:#222222;
}

.menu1{
position:relative;
width:70px;
height:70px;
border:1px solid #cccccc;
}

.menu1 span{
height:2px;
background-color:#222222;
}


.menu1 span:nth-of-type(1){
position:absolute;
width:50%;
left:25%;
top:calc(25% - 2px);
transition:0.3s;
}

.menu1  span:nth-of-type(2){
position:absolute;
width:50%;

left:25%;
top:calc(50% - 2px);
transition:0.3s;

}

.menu1 span:nth-of-type(3){
position:absolute;
width:50%;

left:25%;
top:calc(75% - 2px);
transition:0.3s;

}



.menu3 span:nth-of-type(1){
position:absolute;
width:50%;
height:2px;
background-color:#222222;
left:25%;
transform:rotate(45deg);
top:50%;

transition:0.3s;
}

.menu3 span:nth-of-type(2){
position:absolute;
width:50%;
height:2px;
background-color:#222222;
left:25%;
transform:rotate(45deg);
top:50%;
transition:0.3s;

}

.menu3 span:nth-of-type(3){
position:absolute;
width:50%;
height:2px;
background-color:#222222;
left:25%;
transform:rotate(-45deg);
top:50%;
transition:0.3s;

}





.menu5-left{
position:relative;
width:70px;
height:70px;
border:1px solid #cccccc;
}

.menu5-left span{
height:2px;
background-color:#222222;
}

.menu5-left span:nth-of-type(1){
position:absolute;
width:35%;
height:2px;
background-color:#222222;
left:25%;
transform-origin:left center;
transform:rotate(-45deg) translatey(-50%);
top:50%;
transition:0.3s;
}

.menu5-left span:nth-of-type(2){
position:absolute;
width:50%;
height:2px;
background-color:#222222;
left:25%;
transform:translatey(-50%);
top:50%;
transition:0.3s;

}


.menu5-left span:nth-of-type(3){
position:absolute;
width:35%;
height:2px;
background-color:#222222;
left:25%;
transform-origin:left center;
transform:rotate(45deg) translatey(-50%);
top:50%;
transition:0.3s;
}





.menu5-right{
position:relative;
width:70px;
height:70px;
border:1px solid #cccccc;
}

.menu5-right span{
height:2px;
background-color:#222222;
}

.menu5-right span:nth-of-type(1){
position:absolute;
width:35%;
height:2px;
background-color:#222222;
left:75%;
transform-origin:left center;
transform:rotate(-135deg) translatey(-50%);
top:calc(50% - 2px);
transition:0.3s;
}

.menu5-right span:nth-of-type(2){
position:absolute;
width:50%;
height:2px;
background-color:#222222;
left:25%;
transform:translatey(-50%);
top:50%;
transition:0.3s;

}


.menu5-right span:nth-of-type(3){
position:absolute;
width:35%;
height:2px;
background-color:#222222;
left:75%;
transform-origin:left center;
transform:rotate(135deg) translatey(-50%);
top:calc(50% - 2px);
transition:0.3s;
}



body{
background-color:#181B20;
}

[data-3d-rec]{
perspective:3000px;
transform-style: preserve-3d;
}

.divpanel{
}

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

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



a{
text-decoration:none;
cursor:pointer;
}

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








.atype3{
color:#00CCCC;
border:2px solid #00CCCC;
}
.atype1{
color:white;
}


.divtype{
width:calc(100% - 60px);
margin:auto;
padding-top:50px;
padding-bottom:40px;
text-align:center;
}
.divtype a{
display:inline-block;
padding-left:40px;
padding-right:40px;
padding-top:20px;
padding-bottom:20px;
font-size:28px;
font-family:Noto Sans TC;font-weight:400;
line-height:1.2em;
position:relative;
margin-bottom:0px;
}



.divurl{
width:calc(20% - 60px);
margin-left:30px;
margin-right:30px;
float:left;
margin-bottom:60px;
background-color:#333333;
float:left;
position:relative;
border-radius:10px;
box-shadow:2px 2px 6px rgba(0,0,0,0.2);
}

.divurl1 span{
display:inline-block;
width:100%;
color:rgba(255,,255,255,0.6) !important;
font-size:0.8em;
}

.divurl svg{
width:100%;
}

.divurl1{
display:inline-block;

font-size:19px;
color:white;
text-align:center;
line-height:1.4em;
position:absolute;
left:50%;
top:50%;
transform:translatex(-50%) translatey(-50%);
cursor:pointer;

font-family:Noto Sans TC;font-weight:400;
width:calc(100% - 40px);

}


.divurl_rec{
width:calc(1600px - 60px);
margin:auto;
}




































.divcenter{
text-align:center;

position:relative;
}
.across{
display:inline-flex;
font-size:28px;
width:56px;
height:56px;
align-items:center;
justify-content:center;
border-radius:50%;
background-color:#222222;
box-shadow:0px 0px 6px rgba(255,255,255,0.4);
color:rgba(255,255,255,0.4);
font-family:Nunito Sans;font-weight:600;
position:absolute;
right:-50px;
top:-50px;
}

.tau1{
width:100%;
font-size:16px;
padding-bottom:10px;
table-layout:fixed;
cursor:pointer;
border-bottom:1px solid rgba(255,255,255,0.1);
color:rgba(255,255,255,0.8);
}
.tdu1{
width:140px;
padding-right:10px;
font-family:Noto Sans TC;font-weight:400;
}
.tdu1 span{
display:inline-block;
}
.tdu2{
color:rgba(255,255,255,0.4);
font-family:poppins;
font-size:15px;
overflow:hidden;
}

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

.divtext_url{
overflow-y:auto;
max-height:calc(100vh - 160px);
}

.divpadd_url{
padding:30px;
min-height:40px;

}

.divfix_url{
position:fixed;
left:50%;
top:100px;
width:800px;
z-index:33;
display:none;
max-width:calc(100%  - 60px);
background-color:#222222;
transform:translatex(-50%);
box-shadow:0px 0px 6px rgba(0,0,0,0.6);
}

.pnodata{
width:100%;
margin:auto;
font-size:20px;
color:#cccccc;
padding-top:10px;
text-align:center;
}


















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


.divanimation{
left:0px;
}



.divurl1{
font-size:17px;
}


.divtype a{
font-size:19px;
padding-left:22px;
padding-right:22px;
padding-top:12px;
padding-bottom:12px;
}

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



.tdu1{
width:100px;
}

.divpadd_url{
padding:15px;
}
.tdu2{
font-size:15px;
}


.tau1{
font-size:16px;
}

.across{
font-size:20px;
width:39px;
height:39px;
right:-30px;
top:-40px;
}


.pnodata{
font-size:16px;
}

.divfix_url{
top:30px;
}



}

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

.div1200{
width:100%;
}


}

@media screen and (min-width:1500px) and (max-width:1660px){


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



}

@media screen and (min-width:1350px) and (max-width:1500px){


.divurl{
width:calc(20% - 40px);
margin-left:20px;
margin-right:20px;
margin-bottom:40px;
}

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



}

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


.divurl{
width:calc(20% - 20px);
margin-left:10px;
margin-right:10px;
margin-bottom:20px;
}

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



}

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


.divurl{
width:calc(25% - 40px);
margin-left:20px;
margin-right:20px;
margin-bottom:40px;
}

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



}

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


.divurl{
width:calc(25% - 20px);
margin-left:10px;
margin-right:10px;
margin-bottom:20px;
}

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



}

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


.divurl{
width:calc(33.3% - 40px);
margin-left:20px;
margin-right:20px;
margin-bottom:40px;
}

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



}

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


.divurl{
width:calc(33.3% - 20px);
margin-left:10px;
margin-right:10px;
margin-bottom:20px;
}

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



}

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


.divtype a{
font-size:24px;
padding-left:30px;
padding-right:30px;
padding-top:16px;
padding-bottom:16px;
}

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




.tdu1{
width:120px;
}

.divpadd_url{
padding:20px;
}

.tdu2{
font-size:15px;
}

.tau1{
font-size:16px;
}


.across{
font-size:26px;
width:50px;
height:50px;
right:-30px;
top:-40px;
}




}

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


.divtype a{
font-size:21px;
padding-left:25px;
padding-right:25px;
padding-top:16px;
padding-bottom:16px;
}

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



.tdu1{
width:110px;
}

.divpadd_url{
padding:20px;
}
.tdu2{
font-size:15px;
}


.tau1{
font-size:16px;
}

.across{
font-size:22px;
width:46px;
height:46px;
right:-30px;
top:-40px;
}



}

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


.divurl1{
font-size:18px;
}



}

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


.divurl{
width:calc(50% - 40px);
margin-left:20px;
margin-right:20px;
margin-bottom:40px;
}

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



}

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


.divurl{
width:calc(50% - 20px);
margin-left:10px;
margin-right:10px;
margin-bottom:20px;
}

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



}

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


.pnodata{
font-size:16px;
}



.divfix_url{
top:60px;
}



}