html { height:100%; width:100%; margin: 0; padding:0;}
body { height:100%; width:100%; margin: 0; padding:0;}

a:link {text-decoration: none; color: #EEEEEE}
a:visited{text-decoration: none; color: #EEEEEE}
a:hover {text-decoration: underline; color: #FFFFFF}

BODY, TD, TR, P, UL, OL, LI, INPUT, SELECT, DL, DD, DT, FONT
{ font-family: 'Microsoft JhengHei', Verdana,  Arial, Clean, Helvetica, sans-serif, Monotype Corsiva; font-size: 15px;}


.messageframe {position:fixed;z-index:2500;left:0px;right:0px;bottom:70px;margin:0 auto;width:80%;height:40px;line-height:40px;color:#ffffff;font-size:15px;text-align:center;border-radius:50px;background:rgba(41,73,109,0.9);border:1px rgba(255,255,255,0.8) solid;box-Shadow:0px 2px 5px 0px rgba(50,5,50,0.6);-webkit-transition: 0.6s ease-in-out;display:none;}

.lbs_circle {position:fixed;z-index:1500;bottom:15px;right:15px;width:50px;height:50px;border-radius:50px;background:rgba(255,255,255,1);box-Shadow:0px 0px 5px 0px rgba(50,50,50,0.5);cursor:pointer;}
.ctd_circle {position:fixed;z-index:1500;bottom:15px;left:15px;width:50px;height:50px;border-radius:50px;background:rgba(255,255,255,1);box-Shadow:0px 0px 5px 0px rgba(50,50,50,0.5);cursor:pointer;}
.ctd_colorbar {position:fixed;z-index:1400;bottom:40px;left:0px;width:100%;height:30px;line-height:30px;color:#fff;text-align:center;opacity:0;-webkit-transition: 0.6s ease-in-out;display:none;}

.dbztitle {position:relative;top:-30px;left:calc(50% - 50px);width:98px;text-align:center;color:#fff;font-size:18px;border:1px #fff solid;border-radius:30px;background:rgba(0,0,0,0.5);display:none;}
.note_locname {position:fixed;z-index:1400;bottom:25px;left:0px;width:100%;height:30px;line-height:30px;color:#fff;font-size:13px;text-align:center;opacity:1;-webkit-transition: 0.6s ease-in-out;display:block;}

.alert_circle {position:fixed;z-index:1500;bottom:80px;right:15px;width:50px;height:50px;border-radius:50px;background:rgba(255,255,255,1);box-Shadow:0px 0px 5px 0px rgba(50,50,50,0.5);cursor:pointer;animation:alertcolor 1s infinite;display:none;}
@keyframes alertcolor {
    0% {background:radial-gradient(circle at 25px  0px, #ffff00 25%, #ffffff 50%);}
 12.5% {background:radial-gradient(circle at 43px  7px, #ffff00 25%, #ffffff 50%);}
   25% {background:radial-gradient(circle at 50px 25px, #ffff00 25%, #ffffff 50%);}
 37.5% {background:radial-gradient(circle at 43px 43px, #ffff00 25%, #ffffff 50%);}
   50% {background:radial-gradient(circle at 25px 50px, #ffff00 25%, #ffffff 50%);}
 62.5% {background:radial-gradient(circle at  7px 43px, #ffff00 25%, #ffffff 50%);}
   75% {background:radial-gradient(circle at  0px 25px, #ffff00 25%, #ffffff 50%);}
 87.5% {background:radial-gradient(circle at  7px  7px, #ffff00 25%, #ffffff 50%);}
  100% {background:radial-gradient(circle at 25px  0px, #ffff00 25%, #ffffff 50%);}
}
.alert_lgtcircle {position:fixed;z-index:1500;bottom:145px;right:15px;width:50px;height:50px;border-radius:50px;background:rgba(255,255,255,1);box-Shadow:0px 0px 5px 0px rgba(50,50,50,0.5);cursor:pointer;animation:alertlgtcolor 1s infinite;display:none;}
@keyframes alertlgtcolor {
    0% {background:radial-gradient(circle at 25px  0px, #ffc5df 25%, #ffffff 50%);}
 12.5% {background:radial-gradient(circle at 43px  7px, #ffc5df 25%, #ffffff 50%);}
   25% {background:radial-gradient(circle at 50px 25px, #ffc5df 25%, #ffffff 50%);}
 37.5% {background:radial-gradient(circle at 43px 43px, #ffc5df 25%, #ffffff 50%);}
   50% {background:radial-gradient(circle at 25px 50px, #ffc5df 25%, #ffffff 50%);}
 62.5% {background:radial-gradient(circle at  7px 43px, #ffc5df 25%, #ffffff 50%);}
   75% {background:radial-gradient(circle at  0px 25px, #ffc5df 25%, #ffffff 50%);}
 87.5% {background:radial-gradient(circle at  7px  7px, #ffc5df 25%, #ffffff 50%);}
  100% {background:radial-gradient(circle at 25px  0px, #ffc5df 25%, #ffffff 50%);}
}
.lbs_circle_icon {margin:5px;height:40px;}
.ctd_circle_icon {margin:5px;height:40px;}

.weatherinfo_block_cls {position:absolute;z-index:999;left:0px;top:8px;width:100%;height:40px;text-align:center;display:none;}
.weather_div_cls {margin:0 auto;width:320px;line-height:40px;font-size:26px;color:#ffffff;font-family:'Saira Semi Condensed','Microsoft JhengHei';text-shadow:0px 2px 4px #000000;overflow:visible;}
.weather_cvar_cls {float:left;margin-top:4px;margin-right:3px;height:30px;line-height:15px;font-size:14px;}
.weather_value_cls {float:left;font-size:26px;}
.weather_subvalue_cls {line-height:48px;float:left;font-size:15px;}
.wind_unit_cls {float:left;margin-left:2px;margin-top:8px;height:30px;line-height:10px;font-size:12px;}
.wind_upunit_cls {float:top;height:12px;border-bottom:1px #ffffff solid;}
.wind_dnunit_cls {float:top;height:12px;}
.wind_arrow_block {float:left;margin-top:3px;margin-left:3px;height:36px;width:36px;border:0px #ffffff solid;border-radius:40px;}
.wind_arrow_cls   {width:100%;height:100%;transform:rotate(45deg);-webkit-transition: 1s ease-in-out;}
.wind_arrow_north {position:relative;left:-2px;top:-55px;font-size:12px;}

.control_block_cls {position:absolute;z-index:1000;left:0px;top:18px;width:100%;height:30px;opacity:0;display:block;}
.maintimeline_cls {float:left;margin:0px;padding-left:0px;padding-right:0px;width:205px;height:30px;line-height:30px;border:1px #bbbbbb solid;border-radius:7px;color:#111111;background:#ffffff;box-Shadow:0px 0px 5px 0px rgba(50,50,50,0.5);}
.play_icon_circle_cls {float:right;margin-right:7px;width:30px;height:30px;line-height:30px;border:1px #bbbbbb solid;border-radius:8px;color:#555555;background:#ffffff;box-Shadow:0px 0px 5px 0px rgba(50,50,50,0.5);text-align:center;font-size:20px;cursor:pointer;}
.zoom_icon_circle_cls {float:left;margin-left:7px;width:30px;height:30px;line-height:30px;border:1px #bbbbbb solid;border-radius:8px;color:#555555;background:#ffffff;box-Shadow:0px 0px 5px 0px rgba(50,50,50,0.5);text-align:center;font-size:24px;font-weight:bold;cursor:pointer;}

.maindiv_cls {margin:0 auto;margin-top:0px;min-height:100vh;width:100%;background:#111111;min-height:30px;display:inline-block;}
.domain_parent_cls {margin:0px;margin-top:0px;width:100%;height:100vh;background:#111111;overflow:hidden;}
.domain_cls {position:relative;z-index:100;left:0px;top:0px;width:748px;height:578px;background-color:transparent;}
.domain_dbz_cls {position:relative;z-index:600;float:top;margin:0px;width:100%;height:100%;background-color:transparent;}
.domain_taiwan_cls {position:relative;z-index:700;top:-100%;float:top;margin:0px;width:100%;height:100%;background-color:transparent;}

.stop_service_cls {position:fixed;z-index:2500;left:20px;top:20px;width:calc(100% - 40px);height:calc(100% - 40px);background:rgba(0,0,0,0.6);color:#ffff00;border:1px #ffff00 solid;border-radius:15px;text-algin:center;display:none;}
.stop_service_cont_cls {margin:0 auto;margin-top:calc(50vh - 50px);width:100%;text-align:center;font-size:18px;line-height:30px;}
.first_start_cls {position:fixed;z-index:2501;left:0px;top:0px;width:100%;height:100%;background:rgba(0,0,0,0.6);color:#ffffff;text-algin:center;display:none;}
.welcome_title_cls {margin-top:100px;width:100%;text-align:center;font-size:20px;font-family:'Poiret One','Microsoft JhengHei',sans-serif;}
.welcome_cont_cls {margin-top:50px;width:100%;text-align:center;font-size:16px;font-family:'Poiret One','Microsoft JhengHei',sans-serif;}

.tip_block_cls {margin:0 auto;width:280px;height:150px;border:1px #ffff00 solid;border-radius:10px;background:rgba(0,0,0,0.6);}
.tip_title_cls {font-weight:bold;color:#ffff00;height:30px;line-height:30px;}
.tip_cont_cls {font-weight:bold;color:#ffff00;height:20px;line-height:30px;font-size:13px;color:#ffffff;}
.tip_icon_cls {font-weight:bold;color:#ffff00;height:20px;line-height:30px;}

@media screen and (min-width: 801px) {

   .messageframe {bottom:80px;margin:0 auto;width:70%;height:60px;line-height:60px;border-radius:60px;font-size:24px;-webkit-transition: 0.6s ease-in-out;display:none;}

   .lbs_circle {bottom:24px;right:24px;width:80px;height:80px;border-radius:80px;}
   .ctd_circle {bottom:24px;right:24px;width:80px;height:80px;border-radius:80px;}
   .alert_circle {bottom:128px;right:24px;width:80px;height:80px;border-radius:80px;animation:alertcolor 1s infinite;}
   @keyframes alertcolor {
      0% {background:radial-gradient(circle at 40px  0px, #ffff00 25%, #ffffff 50%);}
   12.5% {background:radial-gradient(circle at 69px  11px, #ffff00 25%, #ffffff 50%);}
     25% {background:radial-gradient(circle at 80px 40px, #ffff00 25%, #ffffff 50%);}
   37.5% {background:radial-gradient(circle at 69px 69px, #ffff00 25%, #ffffff 50%);}
     50% {background:radial-gradient(circle at 40px 80px, #ffff00 25%, #ffffff 50%);}
   62.5% {background:radial-gradient(circle at 11px 69px, #ffff00 25%, #ffffff 50%);}
     75% {background:radial-gradient(circle at  0px 40px, #ffff00 25%, #ffffff 50%);}
   87.5% {background:radial-gradient(circle at 11px 11px, #ffff00 25%, #ffffff 50%);}
    100% {background:radial-gradient(circle at 40px  0px, #ffff00 25%, #ffffff 50%);}
   }
   .alert_lgtcircle {bottom:232px;right:24px;width:80px;height:80px;border-radius:80px;animation:alertlgtcolor 1s infinite;}
   @keyframes alertlgtcolor {
      0% {background:radial-gradient(circle at 40px  0px, #ffc5df 25%, #ffffff 50%);}
   12.5% {background:radial-gradient(circle at 69px 11px, #ffc5df 25%, #ffffff 50%);}
     25% {background:radial-gradient(circle at 80px 40px, #ffc5df 25%, #ffffff 50%);}
   37.5% {background:radial-gradient(circle at 69px 69px, #ffc5df 25%, #ffffff 50%);}
     50% {background:radial-gradient(circle at 40px 80px, #ffc5df 25%, #ffffff 50%);}
   62.5% {background:radial-gradient(circle at 11px 69px, #ffc5df 25%, #ffffff 50%);}
     75% {background:radial-gradient(circle at  0px 40px, #ffc5df 25%, #ffffff 50%);}
   87.5% {background:radial-gradient(circle at 11px 11px, #ffc5df 25%, #ffffff 50%);}
    100% {background:radial-gradient(circle at 40px  0px, #ffc5df 25%, #ffffff 50%);}
   }
   .lbs_circle_icon {margin:8px;height:64px;}
   .ctd_circle_icon {margin:8px;height:64px;}

}