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

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;}
.llm_circle {position:fixed;z-index:1500;bottom:75px;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;}
.llmq_circle{float:right;margin-right:5px;margin-top:5px;width:40px;height:40px;background:#378;border-radius:50px;}

.llm_answer {position:fixed;z-index:1500;bottom:75px;left:15px;width:calc(100% - 30px);height:50%;border-radius:25px;background:rgba(255,255,255,0.8);-webkit-transition:0.6s ease-in-out;overflow:hidden;display:none;}
.llm_inbar {float:right;margin-right:3px;width:calc(100% - 100px);height:100%;}
.llm_title {float:top;width:100%;height:20px;line-height:20px;font-size:15px;font-weight:bold;color:#395B77;}
.llm_inrequest {float:top;width:calc(100% - 5px);height:25px;border:0px;border-bottom:1px #395B77 dashed;background: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;}
.llm_circle_icon {margin:2px;height:46px;}

.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:325px;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;}

.answerblk {margin-left:10px;width:calc(100% - 20px);min-height:100%;line-heihgt:20px;text-align:justify;font-size:18px;}
.answercls::-webkit-scrollbar { width:3px;background:#eee;border-radius:0px;}
.answercls::-webkit-scrollbar-track { width:3px;background: #ccc;border-radius:10px; }
.answercls::-webkit-scrollbar-thumb { width:3px;background: #888;border-radius:10px; }

.loader {
  width: 48px;
  height: 48px;
  position: absolute;
  z-index:1500;
  left: calc(50% - 24px);
  bottom: 150px;
  color:#fff;
  display:none;
}
.loader::before , .loader::after{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50% , -50%);
  width: 48em;
  height: 48em;
  background-image:
    radial-gradient(circle 10px, rgba(255,255,100,0.7) 100%, transparent 0),
    radial-gradient(circle 10px, rgba(255,255,100,0.7) 100%, transparent 0),
    radial-gradient(circle 10px, rgba(255,255,100,0.7) 100%, transparent 0),
    radial-gradient(circle 10px, rgba(255,255,100,0.7) 100%, transparent 0),
    radial-gradient(circle 10px, rgba(255,255,100,0.7) 100%, transparent 0),
    radial-gradient(circle 10px, rgba(255,255,100,0.7) 100%, transparent 0),
    radial-gradient(circle 10px, rgba(255,255,100,0.7) 100%, transparent 0),
    radial-gradient(circle 10px, rgba(255,255,100,0.7) 100%, transparent 0);
  background-position: 0em -18em, 0em 18em, 18em 0em, -18em 0em,
                       13em -13em, -13em -13em, 13em 13em, -13em 13em;
    background-repeat: no-repeat;
  font-size: 0.5px;
  border-radius: 50%;
  animation: blast 1s ease-in infinite;
}
.loader::after {
  font-size: 1px;
  background: rgba(255,255,100,0.7);
  animation: bounce 1s ease-in infinite;
}

@keyframes bounce {
  0% , 100%{ font-size: 0.75px }
  50% { font-size: 1.5px }
}
@keyframes blast {
  0% , 40% {
    font-size: 0.5px;
  }
  70% {
    opacity: 1;
    font-size: 4px;
  }
   100% {
     font-size: 6px;
    opacity: 0;
  }
}


.loader_mic {
  width: 50px;
  height: 50px;
  display: inline-block;
  position: relative;
}
.loader_mic::after,
.loader_mic::before {
  content: '';
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px dotted #E11;
  position: absolute;
  left: 0;
  top: 0;
  animation: animloader_mic 2s linear infinite;
}
.loader_mic::after {
  animation-delay: 1s;
}

@keyframes animloader_mic {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@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;}
   .llm_circle {bottom:118px;right:24px;width:80px;height:80px;border-radius:80px;}
   .llmq_circle {bottom:118px;right:24px;width:70px;height:70px;border-radius:70px;}

   .llm_answer {bottom:118px;right:24px;border-radius:40px;font-size:20px;}
   .llm_inbar  {width:calc(100% - 170px);}
   .llm_title  {height:30px;line-height:30px;font-size:20px;}
   .llm_inrequest {height:37px;line-height:37px;font-size:26px;}

   @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;}
   .llm_circle_icon {margin:8px;height:64px;}

}