/* .testFont { font-family:"Times New Roman"; font-size:2rem; } */
/* 共用 */
.title { color:#78b400; font-size:2rem; }
.mh3 { height:30px; }
.mh4 { height:40px; }
.mh6 { height:60px; }

.loading { background-color:#fff; position: fixed; top:0; left:0; width:100%; height:100%; z-index:10000; }
.loading img { width:100px; padding-top:30vh; }

.top { position: relative; }
.top .topbnr .bnr { width:100%; height:100vh; }

#product { padding-top:65px; padding-bottom:65px; }
.demo .pd { margin:15px 0px; }
.demo .pd .ran { position: relative; }
.demo .pd .mask { animation:showout .2s; position: absolute; left:0px; right:0px; top:0px; bottom:0px; background-color:#000; opacity: 0; }
.demo .pd .tit { animation:ttshowout .2s; position: absolute; top:10%; left:10%; right:10%; bottom:10%; text-align:left; color:#fff; font-size:2rem; opacity: 0; }
.demo .pd a { text-decoration: none; }
.demo .pd .ran:hover { cursor: pointer; }
.demo .pd .ran:hover .mask { animation:showin .2s; opacity: 0.5; }
.demo .pd .ran:hover .tit { animation:ttshowin .2s; opacity: 1; }



@keyframes showin {
    0% { opacity: 0; }
    100% { opacity: 0.5; }
}

@keyframes ttshowin {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes showout {
    0% { opacity: 0.5; }
    100% { opacity: 0; }
}

@keyframes ttshowout {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* amination area init */
/* .cont, .prod,.btmbnr, .newcont { transform:translateY(100px); opacity: 0; } */
.upslideAni { animation:upslide 2s; transform:translateY(0px); opacity: 1; }
/* animation */
@keyframes upslide {
    0% { transform:translateY(100px); opacity: 0; }
    100% { transform: translateY(0px); opacity: 1; }
}


@media (max-width:1199.98px){
    .iot .area:nth-child(1) > div { padding:60px; }
}

@media (max-width:1199.98px) and (min-width:992px){
    /* .top .topbnr .bnr { height:60vh; } */

}

@media (min-width:992px){
    
}

@media (max-width:991.98px){

}



@media (min-width:768px) and (max-width:991.98px){
    .title { font-size:1.75rem; }
    /* .top .topbnr .bnr { height:60vh; } */

}

/* 手機橫寬991.98內 banner全版 */
/* @media (max-width:991.98px) and (orientation: landscape){
    .top .topbnr .bnr { height:100vh; }
} */


@media (min-width:768px){

}

@media (max-width:767.98px){
    .demo .pd .tit { font-size:1.25rem; }
}


@media (max-width:575.98px){
    
}