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: 微軟正黑體, Verdana,  Arial, Clean, Helvetica, sans-serif, Monotype Corsiva; font-size: 12px;}



.head {width:1150px;height:40px;line-height:40px;margin:0px;float:top;}
.head01 {width:300px;height:40px;line-height:40px;float:left;}
.head02 {width:810px;height:40px;line-height:40px;margin:0px;float:right;}
.head03 {width:1150px;height:35px;line-height:25px;margin:0px;float:top;}
.head02cell {float:right;height:25px;line-height:25px;color:#FFFFFF;font-size:11px;padding-bottom:1px;text-align:center;}
.countclass{float:right;width:300px;color:#FFFFFF;padding-top:10px;border:0px solid #ffffff;}
.fb-like{float:left;padding-top:0px;padding-left:15px;}
.fb-rootclass{float:left;padding-top:0px;padding-left:10px;}
.g-plusone{float:left;padding-top:0px;padding-left:30px;min-width:0px;}

.list1 {position: relative;line-height:25px; height:25px;text-align:right;z-index:1000000;}
.list2 {
  width:120px;
  line-height:25px;
  position:absolute;
  top:22px;
  left:-15px;
  list-style:none;
  display:none;
}
.list2s {
  width:120px;
  line-height:25px;
  position:absolute;
  top:22px;
  left:-22px;
  list-style:none;
  display:none;
}
.list3t {background:url('../icon/list_bkt_01.png');background-repeat:none;line-height:10px;}
.list3 {background:url('../icon/list_bk_01.png');background-repeat:repeat-y;line-height:30px;font-size:13px;vertical-align:middle;text-align:center;padding:0px;}

.subitemline { font-size:13px;color:#FFFFFF;line-height:25px;}
.subitemhead { height:25px;line-height:25px;float:left;}
.subitemsel { height:25px;line-height:25px;width:117px;float:left;background:url('../icon/item_bar_02.png');text-align:center;}
.subitemnow { height:25px;line-height:25px;width:117px;float:left;background:url('../icon/item_bar_01.png');color:#111133;text-align:center;}


/* WATCH MESSAGE*/
.watch_message { height:auto;max-height:270px;min-height:25px;width:250px;max-width:250px;min-width:200px;background:url('../icon/message_bk_02.png');display:block;clear:both;position:fixed;bottom:0px;right:5px;padding:5px;padding-bottom:0px;}

.watch_message .head_box {float:top;height:24px;max-height:24px;min-height:24px;width:250px;max-width:250px;min-width:200px;display:block;clear:both;line-height:24px;background:#ccddee;cursor: pointer;}
.watch_message .head_box .Lline {float:left;height:24px;max-height:24px;min-height:24px;width:100px;max-width:100px;min-width:100px;display:block;line-height:24px; text-align:left;}
.watch_message .head_box .Rline {float:right;height:24px;max-height:24px;min-height:24px;width:94px;max-width:94px;min-width:94px;display:block;line-height:24px;color:#aa3333;text-align:right;font-weight: bold;padding-right:6px;}

.watch_message .cont_box {float:top;height:auto;max-height:225px;min-height:143px;width:250px;max-width:250px;min-width:250px;display:block;clear:both;line-height:30px;background:#FFFFFF;overflow-x:hidden;overflow-y:scroll;display:none;margin-right:15px;}
.watch_message .cont_box .Aline {float:top;height:auto;max-height:70px;min-height:35px;width:234px;max-width:234px;min-width:234px;display:block;clear:both;line-height:30px;background:#FFFFFF;overflow:hidden;border-bottom:1px solid #cccccc;}
.watch_message .cont_box .Aline .Lline {float:left;height:auto;max-height:70px;min-height:35px;width:195px;max-width:195px;min-width:195px;display:block;line-height:17px;background:#FFFFFF;overflow:hidden;text-align:left;padding-left:10px;font-size:12px;}
.watch_message .cont_box .Aline .Rline {float:right;height:35px;max-height:70px;min-height:35px;width:25px;max-width:25px;min-width:25px;display:block;line-height:35px;background:#FFFFFF;overflow:hidden;border-left:1px dotted #cccccc;cursor: pointer;vertical-align:middle;margin-right:0px;}

.watch_message .tail_box {float:top;height:20px;max-height:20px;min-height:20px;width:250px;max-width:250px;min-width:250px;display:none;clear:both;background:#f0f0f0;}
.watch_message .tail_box .Lline {float:left;height:20px;max-height:20px;min-height:20px;width:25px;max-width:25px;min-width:25px;display:block;line-height:20px;color:#333333;text-align:left;font-weight: bold;padding-left:5px;cursor: pointer;}
.watch_message .tail_box .Cline {float:left;height:20px;max-height:20px;min-height:20px;width:190px;max-width:190px;min-width:190px;display:block;line-height:20px;color:#333333;text-align:center;vertical-align:middle;cursor: pointer;}
.watch_message .tail_box .Rline {float:right;height:20px;max-height:20px;min-height:20px;width:25px;max-width:25px;min-width:25px;display:block;line-height:20px;color:#333333;text-align:right;font-weight: bold;padding-right:5px;cursor: pointer;}
.watch_message .tail_box .msg_date{display:none;}

.watch_message .set_box {float:top;height:225px;max-height:225px;min-height:195px;width:250px;max-width:250px;min-width:250px;display:none;clear:both;background:#f0f0f0;}
.watch_message .set_box .page { float:top;height:195px;max-height:225px;min-height:195px;width:250px;max-width:250px;min-width:250px;display:none;clear:both;}
/* WATCH MESSAGE*/


/* IE*/
.frameclass {width:490px;margin-left:auto;margin-right:auto;position:absolute;border:3px solid #eeeeee;}
.headclass {width:490px;line-height:30px;background:#ccccff;text-align:center;}
.wdlineclass {width:490px;}
.wdnameclass  {width:70px;height:25px;line-height:25px;background:#ddddee;text-align:center;float:left;font-size:12px;border:1px solid #ddddee;}
.wdconlnclass {width:490px;}
.wdconfrclass  {width:70px;height:50px;text-align:center;float:left;font-size:12px;background:#ddeedd;border:1px solid #ddddee;}
.wdconticlass  {width:68px;height:16px;line-height:16px;text-align:left;float:top;font-size:12px;background:#ddeeee;}
.wdconmaclass  {width:68px;height:34px;text-align:center;float:top;font-size:12px;vertical-align: middle;display:table-cell;}
.calbutton { border: 1px dotted #ffffff; background-color:#ccccfa;font-size:12px; }
/* IE*/
/* safari 3+, chrome 1+, opera9+ */
body:nth-of-type(1) .frameclass {width:504px;margin-left:auto;margin-right:auto;position:absolute;border:3px solid #eeeeee;}
body:nth-of-type(1) .headclass {width:504px;line-height:30px;background:#ccccff;text-align:center;}
body:nth-of-type(1) .wdlineclass {width:504px;}
body:nth-of-type(1) .wdnameclass  {width:70px;height:25px;line-height:25px;background:#ddddee;text-align:center;float:left;font-size:12px;border:1px solid #ddddee;}
body:nth-of-type(1) .wdconlnclass {width:504px;}
body:nth-of-type(1) .wdconfrclass  {width:70px;height:50px;text-align:center;float:left;font-size:12px;background:#ddeedd;border:1px solid #ddddee;}
body:nth-of-type(1) .wdconticlass  {width:68px;height:16px;line-height:16px;text-align:left;float:top;font-size:12px;background:#ddeeee;}
body:nth-of-type(1) .wdconmaclass  {width:68px;height:34px;text-align:center;float:top;font-size:12px;vertical-align: middle;display:table-cell;}
body:nth-of-type(1) .calbutton { border: 1px dotted #ffffff; background-color:#ccccfa;font-size:12px; }
/* safari 3+, chrome 1+, opera9+ */

/* BTP */
.btp_info_block {position: absolute;top:0px;left:0px;z-index: 1110;background:rgba(0,0,0,0.6);width:1140px;;height:250px;display:none;color:#ffffff;}
.btp_info_block .btp_info_head {width:100%;height:39px;line-height:39px;font-size:20px;color:#ffffff;border-bottom:1px #ffffff solid;}
.btp_info_block .btp_info_cont {width:100%;height:210px;line-height:30px;font-size:20px;color:#ffffff;}
.btp_info_block .btp_info_cont .info_sta_head { width:100%;height:30px;line-heght:30px;float:top;text-align:left;font-size:18px;}
.btp_info_block .btp_info_cont .info_sta_cir {float:left;margin-top:10px;margin-left:34px;margin-right:34px;width:140px;height:140px;line-height:35px;border:10px #cccccc solid;border-radius:300px;-webkit-transition: 1s ease-in-out;}
.btp_info_block .btp_info_cont .info_sta_cir:hover { -webkit-transform: scale(1.1);}

/* Universiade */
.btp_info_block2 {position: absolute;top:0px;left:0px;z-index: 1110;background:rgba(0,0,0,0.6);width:1140px;;height:250px;display:none;color:#ffffff;}
.btp_info_block2 .btp_info_head {float:left;width:360px;height:100%;line-height:39px;font-size:20px;color:#ffffff;border-bottom:1px #ffffff solid;}
.btp_info_block2 .btp_info_cont {float:left;width:780px;height:166px;line-height:30px;font-size:20px;color:#ffffff;}
.btp_info_block2 .btp_info_cont .info_sta_head { float:top;width:100%;height:30px;line-heght:30px;float:top;text-align:cneter;font-size:15px;}
.btp_info_block2 .btp_info_cont .info_sta_cirblock {float:top;width:100%;height:136px;}
.btp_info_block2 .btp_info_cont .info_sta_cirblock .info_sta_cir {float:left;margin-top:10px;margin-left:20px;margin-right:20px;width:100px;height:100px;line-height:25px;font-size:16px;border:8px #cccccc solid;border-radius:300px;-webkit-transition: 1s ease-in-out;}
.btp_info_block2 .btp_info_cont .info_sta_cirblock .info_sta_cir:hover { -webkit-transform: scale(1.1);}
.btp_info_block2 .btp_info_cont .info_sta_ts { float:top;margin-left:30px;margin-right:20px;width:730px;height:80px;border-bottom:1px rgba(22,195,211,0.8) solid;z-index: 1120;}
.LT_TOWN_VECTOR { float:left;width:30px;height:30px;margin-right:0px;border:0px #888888 solid;font-size:25px;color:#cccccc;cursor:pointer; }
.LT_TOWN_VECTOR:hover {color:#00aeff;}

/* new area */
.btp_info_block3 {position: absolute;top:0px;left:0px;z-index: 1110;background:rgba(0,0,0,0.6);width:1140px;;height:290px;display:none;color:#ffffff;}
.btp_info_block3 .btp_info_head {float:left;width:360px;height:100%;line-height:39px;font-size:20px;color:#ffffff;border-bottom:1px #ffffff solid;}
.btp_info_block3 .btp_info_cont {float:left;width:780px;height:166px;line-height:30px;font-size:20px;color:#ffffff;}
.btp_info_block3 .btp_info_cont .info_sta_head { float:top;width:100%;height:30px;line-heght:30px;float:top;text-align:cneter;font-size:15px;}
.btp_info_block3 .btp_info_cont .info_sta_cirblock {float:top;width:100%;height:136px;}
.btp_info_block3 .btp_info_cont .info_sta_cirblock .info_sta_cir {float:left;margin-top:10px;margin-left:20px;margin-right:20px;width:100px;height:100px;line-height:25px;font-size:16px;border:8px #cccccc solid;border-radius:300px;-webkit-transition: 1s ease-in-out;}
.btp_info_block3 .btp_info_cont .info_sta_cirblock .info_sta_cir:hover { -webkit-transform: scale(1.1);}
.btp_info_block3 .btp_info_cont .info_sta_ts { float:top;margin-left:30px;margin-right:20px;margin-top:20px;width:730px;height:100px;border-bottom:1px rgba(22,195,211,0.8) solid;z-index: 1120;}

.btp_ptsel_block {
	position: absolute;top:0px;left:0px;z-index: 1011;width:50px;;height:50px;border-radius:50px;border:10px solid rgba(50,50,50,0.4);display:none;color:#ffffff;box-Shadow:0px 0px 10px 0px rgba(50,50,50,0.5);;
	-webkit-transition: 1s ease-in-out;
}
.btp_ptsel_block:hover {
	-webkit-transform: scale(1.2);
}

.btp_rainsta_block {position: absolute;top:10px;left:10px;z-index: 1010;width:14px;;height:14px;border-radius:50px;border:1px solid rgba(50,50,50,0.8);background:rgba(0,175,255,0.7);display:none;color:#ffffff;}

.btp_dbz_map {position: relative;top:0px;left:0px;z-index: 1000;width:100%;height:100%;display:block;}
/* BTP */


/* gauge rank */
.rank_info_block {margin-top:20px;width:1100px;;height:250px;display:none;color:#333333;}
.rank_info_block .rank_info_cont {width:100%;height:210px;line-height:30px;font-size:20px;color:#333333;}
.rank_info_block .rank_info_cont .info_sta_head { width:100%;height:50px;line-heght:50px;float:top;text-align:center;font-size:24px;}
.rank_info_block .rank_info_cont .info_sta_cir {float:left;margin-top:10px;margin-left:30px;margin-right:30px;width:130px;height:130px;line-height:30px;border:15px #cccccc solid;box-Shadow:0px 0px 10px 0px rgba(50,50,50,0.5);border-radius:300px;-webkit-transition: 1s ease-in-out;}
.rank_info_block .rank_info_cont .info_sta_cir:hover { -webkit-transform: scale(1.1);}

.rank_circle {
  width: 126px;
  height: 126px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.0) 33%, #ff3d00 100%);
  box-sizing: border-box;
  animation: rank_rotation 1s linear infinite;
  border:0px;
}
.rank_circle::after {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: #fff;
  border:0px;
}
@keyframes rank_rotation {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg)}
}
/* gauge rank */


/* typhoon */
.typh_circle_block {position: absolute;top:-100px;left:-100px;z-index: 1001;width:0px;;height:0px;border:0px #888888 solid;border-radius:200px;background:rgba(200,50,0,0.2);display:none;}
/* typhoon */

/* city town */
.counties {
  fill: none;
  stroke: #000000;
  stroke-linejoin: round;
}

.states {
  fill: none;
  stroke: #666666;
  stroke-linejoin: round;
}

.qpesums_grids {

  fill: none;
  stroke: none;
  stroke-linejoin: round;
}

.q0-9 { fill:rgb(255,255,255); }
.q1-9 { fill:rgb(248,243,153); }
.q2-9 { fill:rgb(253,213,161); }
.q3-9 { fill:rgb(251,131,156); }
.q4-9 { fill:rgb(239,96,251); }

.w0-2 { fill:rgb(255,255,255); }
.w1-2 { fill:rgba(184,94,213,0.8); }
.w2-2 { fill:rgba(251,131,156,0.8); }
.w3-2 { fill:rgba(248,243,153); }

.w0-3 { fill:rgb(255,255,255); }
.w1-3 { fill:rgb(248,243,153); }
.w2-3 { fill:rgb(246,187,111); }
.w3-3 { fill:rgb(251,131,156); }

.w0-4 { fill:rgb(255,255,255); }
.w1-4 { fill:rgb(248,243,153); }
.w2-4 { fill:rgb(251,185,113); }
.w3-4 { fill:rgb(244,107,136); }
.w4-4 { fill:rgb(221,106,216); }

//.w0-5 { fill:rgb(224,255,217); }
.w0-5 { fill:rgb(0, 159, 120,0.3); }
.w1-5 { fill:rgb(248,243,153); }
.w2-5 { fill:rgb(246,187,111); }
.w3-5 { fill:rgb(251,131,156); }


.wn0-4 { fill:rgba(255,255,255,0); }
.wn1-4 { fill:rgba(248,243,153,0); }
.wn2-4 { fill:rgba(244,107,136,0.3); }
.wn3-4 { fill:rgba(221,106,216,0.3); }

.wt0-1 { fill:rgba(221,106,216,0.6); stroke:#7700BB;}

.wc0-4 { fill:rgb(255,255,255); }
.wc1-4 { fill:rgb(248,243,153); }
.wc2-4 { fill:rgb(249,207,151); }
.wc3-4 { fill:rgb(244,107,136); }
.wc4-4 { fill:rgb(221,106,216); }

.ag0-3 { fill:rgb(210,248,210); }
.ag1-3 { fill:rgb(248,243,153); }
.ag2-3 { fill:rgb(251,131,156); }
.ag3-3 { fill:rgb(239,96,251); }

.r0-4 { fill:rgb(255,255,255); }
.r1-4 { fill:rgb(221,106,216); }
.r2-4 { fill:rgb(244,107,136); }
.r3-4 { fill:rgb(251,185,113); }
.r4-4 { fill:rgb(12,227,12); }

.w0-6 { fill:rgb(248,248,248); }
.w1-6 { fill:rgb(250,255,252); }
.w2-6 { fill:rgb(225,247,252); }
.w3-6 { fill:rgb(248,243,153); }
.w4-6 { fill:rgb(251,185,113); }
.w5-6 { fill:rgb(244,107,136); }
.w6-6 { fill:rgb(221,106,216); }

.w0-20 { fill:rgb(255,255,255); }
.w1-20 { fill:rgb(248,243,153); }
.w2-20 { fill:rgb(251,185,113); }
.w3-20 { fill:rgb(244,107,136); }
.w4-20 { fill:rgb(221,106,216); }
.w5-20 { fill:rgb(123,232,125); }
.w6-20 { fill:rgb(129,194,236); }
.w7-20 { fill:rgb(221,221,221); }

.c0-16{ fill:rgba(255,255,255,0);}
.c1-16{ fill:rgb(0,206,255);}
.c2-16{ fill:rgb(0,154,255);}
.c3-16{ fill:rgb(0,106,247);}
.c4-16{ fill:rgb(46,156,0);}
.c5-16{ fill:rgb(45,200,0);}
.c6-16{ fill:rgb(43,255,0);}
.c7-16{ fill:rgb(254,254,8);}
.c8-16{ fill:rgb(255,203,0);}
.c9-16{ fill:rgb(255,156,0);}
.c10-16{ fill:rgb(254,0,5);}
.c11-16{ fill:rgb(201,2,0);}
.c12-16{ fill:rgb(157,0,0);}
.c13-16{ fill:rgb(154,0,157);}
.c14-16{ fill:rgb(207,0,215);}
.c15-16{ fill:rgb(255,0,247);}

.d0-21{ fill:rgb(45,76,124);}
.d1-21{ fill:rgb(61,92,139);}
.d2-21{ fill:rgb(45,98,154);}
.d3-21{ fill:rgb(61,118,177);}
.d4-21{ fill:rgb(80,143,197);}
.d5-21{ fill:rgb(106,169,210);}
.d6-21{ fill:rgb(139,192,223);}
.d7-21{ fill:rgb(179,214,232);}
.d8-21{ fill:rgb(208,228,241);}
.d9-21{ fill:rgb(229,238,248);}
.d10-21{ fill:rgb(240,240,240);}
.d11-21{ fill:rgb(251,228,201);}
.d12-21{ fill:rgb(244,198,136);}
.d13-21{ fill:rgb(246,186,111);}
.d14-21{ fill:rgb(245,170,80);}
.d15-21{ fill:rgb(234,147,59);}
.d16-21{ fill:rgb(226,135,58);}
.d17-21{ fill:rgb(216,120,58);}
.d18-21{ fill:rgb(204,98,29);}
.d19-21{ fill:rgb(201,95,56);}
.d20-21{ fill:rgb(199,72,26);}

.sd0-21{ stroke:rgb(45,76,124);}
.sd1-21{ stroke:rgb(61,92,139);}
.sd2-21{ stroke:rgb(45,98,154);}
.sd3-21{ stroke:rgb(61,118,177);}
.sd4-21{ stroke:rgb(80,143,197);}
.sd5-21{ stroke:rgb(106,169,210);}
.sd6-21{ stroke:rgb(139,192,223);}
.sd7-21{ stroke:rgb(179,214,232);}
.sd8-21{ stroke:rgb(208,228,241);}
.sd9-21{ stroke:rgb(229,238,248);}
.sd10-21{ stroke:rgb(240,240,240);}
.sd11-21{ stroke:rgb(251,228,201);}
.sd12-21{ stroke:rgb(244,198,136);}
.sd13-21{ stroke:rgb(246,186,111);}
.sd14-21{ stroke:rgb(245,170,80);}
.sd15-21{ stroke:rgb(234,147,59);}
.sd16-21{ stroke:rgb(226,135,58);}
.sd17-21{ stroke:rgb(216,120,58);}
.sd18-21{ stroke:rgb(204,98,29);}
.sd19-21{ stroke:rgb(201,95,56);}
.sd20-21{ stroke:rgb(199,72,26);}

div.tooltip {	
    float:top;
    position:absolute;			
    text-align:center;			
    width:130px;
    line-height:20px;	
    min-height:55px;
    max-height:55px;	
    padding-top:3px;				
    font:14px sans-serif;		
    background:#666666;	
    border:0px;		
    border-radius:4px;			
    pointer-events:none;
	z-index:100;
}
div.tooltip:after {
  display:block;
  clear:both;
  float:top;
  box-sizing:border-box;
  font-size:10px;
  width:130px;
  height:18px;
  line-height:18px;
  padding-top:0px;
  color: rgba(150, 150, 150, 0.8);
  content: "\25BC";
  position:absolute;
  text-align:center;
  z-index:100;
}
/* city town */
div.tooltip2 {	
    float:top;
    position:absolute;			
    text-align:center;			
    width:130px;
    line-height:20px;	
    min-height:40px;
    max-height:40px;	
    padding-top:0px;				
    font:15px sans-serif;
    font-family:'Microsoft JhengHei',sans-serif;	
    background:#666666;	
    border:0px;		
    border-radius:7px;			
    pointer-events:none;
	z-index:100;
}
div.tooltip2:after {
  display:block;
  clear:both;
  float:top;
  box-sizing:border-box;
  font-size:10px;
  width:130px;
  height:15px;
  line-height:15px;
  padding-top:0px;
  color: rgba(50, 50, 50, 0.8);
  content: "\25BC";
  position:absolute;
  text-align:center;
  z-index:100;
}
div.tooltip3 {
    float:top;
    position:absolute;
    text-align:center;
    width:180px;
    line-height:20px;
    min-height:20px;
    max-height:20px;
    padding-top:3px;
    font:18px 'Microsoft JhengHei',sans-serif;
    font-weight:bold;
    background:none;
    color:#000000;
    border:0px;
    border-radius:4px;
    pointer-events:none;
    z-index:100;
}
/*citywarn*/
div.tooltip_city {	
    float:top;
    position:absolute;			
    text-align:center;			
    width:201px;
    line-height:20px;	
    min-height:72px;
    max-height:72px;	
    padding-top:4px;				
    font:18px sans-serif;
    font-family:'Microsoft JhengHei',sans-serif;		
    background:#333333;	
    border:0px;		
    border-radius:8px;			
    pointer-events:none;
	box-Shadow:0px 0px 5px 0px rgba(50,50,50,0.5);
	z-index:100;
}
div.tooltip_city:after {
  display:block;
  clear:both;
  float:top;
  box-sizing:border-box;
  font-size:15px;
  width:201px;
  height:18px;
  line-height:18px;
  padding-top:0px;
  color: rgba(50, 50, 50, 0.8);
  content: "\25BC";
  position:absolute;
  text-align:center;
  z-index:100;
}
/*citywarn*/