@charset "utf-8";
 
 body{
	background-color: #efefef;
	margin: 0px;
	padding: 0px;
	font-family: Arial, "微軟正黑體", "新細明體";
}
ul{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	}



.but_subScriptALL{
	border-radius: 20px;
	color: #FFF;
	background-color: #033;
	display: block;
	margin-top: 5px;
	margin-right: auto;
	margin-bottom: 5px;
	margin-left: auto;
	text-align: center;
	padding: 10px;
	box-sizing: border-box;
	text-decoration: none;
}
.but_subScriptALL{width: 330px;}
.but_subScriptALL:hover{
	background-color: #09C;
}

.select_tab{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #006;
	height: 50px;
	width: 100%;
	position: fixed;
	z-index: 10;
}
.select_tab li{
	box-sizing: border-box;
	line-height: 50px;
	float: left;
	height: 50px;
	width: 50%;
	text-align: center;
	}
.select_tab li a{
	text-decoration: none;
	display: block;
	font-size: 1.2em;
	color: #666;
	background-color: #FFF;
}
.select_tab li a.select{
	background-color: #006;
	color: #FFF;
}

.pane{
	 padding: 50px 0px; 
}
.alert_typelist{
	margin-right: auto;
	margin-left: auto;
	box-sizing: border-box;
	width:330px;
}
 .alert_typelist li{
	display: inline-block;
	float: left;
	margin:5px;
}
@media only screen and (min-width: 375px){.alert_typelist{width:330px;}.alert_typelist li{margin:5px;}.but_subScriptALL{width: 330px;}}
/* 768以上 ipad*/
@media only screen and (min-width: 768px){	.alert_typelist{width:510px;}.alert_typelist li{margin:10px;}.but_subScriptALL{width: 680px;}}
/*1000以上 retina 大螢幕*/
@media only screen and (min-width: 1000px){.alert_typelist{	width:510px;}.alert_typelist li{margin:10px;}.but_subScriptALL{width: 1020px;}} 
.alert_typelist a , .alert_typelist .subScript_Item{
	border-radius: 8px;
	width: 100px;
	height: 86px;
	background-color: #FFF;
	display: block;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: 0px -5px;
}
@media only screen and (min-width: 768px){	.alert_typelist a , .alert_typelist .subScript_Item{width: 150px;height:135px;background-position: 0px 0px;}}
.alert_typelist a img , .alert_typelist .subScript_Item img{
	width: 100%;
}	
.alert_typelist a .txt , .alert_typelist .subScript_Item .txt{
	border-bottom-left-radius:8px;
	border-bottom-right-radius:8px;
	position: absolute;
	background-color:rgba(0,0,0,0.7);
	text-align: center;
	display: block;
	width: 100%;
	bottom: 0px;
	padding: 5px 0px;
	color: #FFF;
	font-size: 0.6em;
}
@media only screen and (min-width: 768px){	.alert_typelist a .txt , .alert_typelist .subScript_Item .txt{padding: 8px 0px;font-size: 1em;}}
.alert_typelist a .number{
border-top-right-radius:8px;
border-bottom-left-radius:8px;
	box-sizing: border-box;
	position: absolute;
	font-size: 1em;
	color: #FFF;
	background-color: #F00;
	top: 0px;
	right: 0px;
	height: 30px;
	width: 30px;
	line-height: 30px;
	text-align: center;
}
 
.alert_typelist .subScript_Item .OK{
	display: none;
}
.alert_typelist .checkOK .OK{
	height: 86px;
	width: 100px;
	border-radius: 8px;
	background-color: rgba(0,0,0,0.7);
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	background-image: url(images/check_ok.png);
	background-repeat: no-repeat;
	background-size: 50%;
	background-position: center 10px;
}
@media only screen and (min-width: 768px){	.alert_typelist .checkOK .OK{height: 135px; width:150px;background-position: center 15px;}}
.alert_typelist .checkOK .OK span{
	border-top-left-radius:8px;
	color: #FFF;
	background-color: #12c78f;
	position: absolute;
	left: 0px;
	top: 0px;
	padding: 5px;
	font-size: 0.6em;
}
@media only screen and (min-width: 768px){	.alert_typelist .checkOK .OK span{font-size: 1em;}}
.alert_title{
	color: #FFF;
	background-image: linear-gradient( 135deg, #5EFCE8 0%, #736EFE 100%);
	line-height: 50px;
	height: 50px;
	font-size: 1.4em;
	text-align: center;
	margin: 0px;
	padding: 0px;
	position: fixed;
	width: 100%;
	z-index: 10;
}
a.but_goback{
	display: inline-block;
	height: 30px;
	width: 30px;
	position: absolute;
	left: 10px;
	top: 10px;
	background-image: url(images/but_goback.png);
	background-repeat: no-repeat;
	background-size: cover;
}
.alert_list{
	padding-top: 50px;
	font-size: 0.8em;
}
.alert_list li{
	padding: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #666;
}
.alert_list li:nth-child(even){
	background-color:#fff;
}

.alert_list li a{
	box-sizing: border-box;
	text-decoration: none;
	color: #333;
	display: block;
}
 
.alert_list li a .head{
	font-size: 1.2em;
	line-height: 30px;
	color: #006;
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #006;
}
.alert_list li a .head img{
	float: left;
}
.alert_list li a .time{
	margin-top: 10px;
	margin-bottom: 10px;
}
.alert_list li a .time span{
	color: #C00;
}
.alert_list li a .AreaDesc{
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #006;
	padding-left: 40px;
}
.alert_list li a .AreaDesc h4{
	padding: 5px;
	color: #333;
	display: inline-block;
	margin-top: 5px;
	margin-left: -40px;
	float: left;
}
.alert_list li a .AreaDesc p{
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #666;
	padding-left: 10px;
}

 
.alertpop{
	padding: 10px;
	line-height: 1.5em;
	font-family: Arial, "微軟正黑體", "新細明體";
	font-size: 1em;
	padding-top: 50px;
}
.alertpop div{border-radius: 10px;padding: 10px; margin:10px 0px; word-break:break-all;}
.alertpop div:nth-child(even){
	background-color: #FF9;
}
.alertpop div:nth-child(odd){background-color: #FFF;}

.alertpop .time span{
	color: #C00; 
}

.alertpop  div h4{
	font-size: 1.2em;
	font-weight: bold;
	color: #333;
	border-bottom: 1px dashed #333;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
}


.alert_area{
	background-image: url(images/alert_areaMAP.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: contain;
	width: 300px;
	height: 420px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 5%;
	position: relative; 
}
.alert_area a{
	border-radius: 50px;
	color: #FFF;
	background-color: #C00;
	position: absolute;
	box-sizing: border-box;
	padding: 1px 5px;
	text-decoration: none;
	font-size: 0.5em;
	box-sizing: border-box;
	}
 
.alert_area span{padding: 0px 5px;}

.alert_area .Label_Keelung{/* 基隆市*/top: 5px;right:10px;}
.alert_area .Label_NewTaipei{/* 新北市*/top: 53px;right:15px;} 
.alert_area .Label_Taipei{/* 臺北市*/top: 25px;right: 55px;} 
.alert_area .Label_Taoyuan{/* 桃園市*/top: 48px;right:90px;} 
.alert_area .Label_Hsinchu{/* 新竹縣*/top:75px;right:45px;} 
.alert_area .Label_HsinchuCity{/* 新竹市*/top: 68px;right:125px;} 
.alert_area .Label_Miaoli{/* 苗栗縣*/top: 100px;right: 120px;} 
.alert_area .Label_Taichung{/* 臺中市*/top: 140px;right: 130px;} 
.alert_area .Label_Nantou{/* 南投縣*/top: 180px;right: 70px;} 
.alert_area .Label_Changhua{/* 彰化縣*/top: 170px;right: 150px;} 
.alert_area .Label_Yunlin{/* 雲林縣*/top: 200px;right: 145px;} 
.alert_area .Label_Chiayi{/* 嘉義縣*/top: 230px;right: 80px;} 
.alert_area .Label_ChiayiCity{/* 嘉義市*/top: 230px;right: 170px;} 
 .alert_area .Label_Tainan{/* 臺南市*/top: 260px;right: 150px;} 
.alert_area .Label_Kaohsiung{/* 高雄市*/top: 310px;right: 160px;} 
.alert_area .Label_Pingtung{/* 屏東縣*/top:340px;right: 105px;} 
.alert_area .Label_Taitung{/* 臺東縣*/top: 270px;right: 25px;} 
.alert_area .Label_Hualien{/* 花蓮縣*/top: 150px;right:10px;} 
.alert_area .Label_Yilan{/* 宜蘭縣*/top: 95px;right: 5px;} 
 
.alert_area .Label_Lienchiang{/* 連江縣*/top:30px;left: 0px;} 
.alert_area .Label_Kinmen{/* 金門縣*/top: 110px;left: 10px;} 
.alert_area .Label_Penghu{/* 澎湖縣*/top: 200px;left:10px;} 
 
 
 
/* 768以上 ipad*/
@media only screen and (min-width: 700px){
.alert_area{
	width: 700px;
	height: 980px;
	margin-top: 0px;}	
	
.alert_area a{font-size: 1.5em;padding:5px;}
.alert_area .Label_Keelung{/* 基隆市*/top:15px;right: 30px;}
.alert_area .Label_NewTaipei{/* 新北市*/top: 125px;right:90px;} 
.alert_area .Label_Taipei{/* 臺北市*/top:65px;right: 130px;} 
.alert_area .Label_Taoyuan{/* 桃園市*/top:110px;right:210px;} 
.alert_area .Label_Hsinchu{/* 新竹縣*/top:200px;right:165px;} 
.alert_area .Label_HsinchuCity{/* 新竹市*/top:155px;right:285px;} 
.alert_area .Label_Miaoli{/* 苗栗縣*/top: 250px;right:280px;} 
.alert_area .Label_Taichung{/* 臺中市*/top: 320px;right:300px;} 
.alert_area .Label_Nantou{/* 南投縣*/top: 420px;right:210px;} 
.alert_area .Label_Changhua{/* 彰化縣*/top: 405px;right: 355px;} 
.alert_area .Label_Yunlin{/* 雲林縣*/top: 480px;right: 380px;} 
.alert_area .Label_Chiayi{/* 嘉義縣*/top:550px;right: 250px;} 
.alert_area .Label_ChiayiCity{/* 嘉義市*/top: 530px;right: 380px;} 
 .alert_area .Label_Tainan{/* 臺南市*/top: 630px;right:400px;} 
.alert_area .Label_Kaohsiung{/* 高雄市*/top: 720px;right:380px;} 
.alert_area .Label_Pingtung{/* 屏東縣*/top:780px;right: 280px;} 
.alert_area .Label_Taitung{/* 臺東縣*/top: 650px;right: 80px;} 
.alert_area .Label_Hualien{/* 花蓮縣*/top: 420px;right: 50px;} 
.alert_area .Label_Yilan{/* 宜蘭縣*/top: 200px;right: 10px;} 
 
.alert_area .Label_Lienchiang{/* 連江縣*/top:130px;left:50px;} 
.alert_area .Label_Kinmen{/* 金門縣*/top: 250px;left:50px;} 
.alert_area .Label_Penghu{/* 澎湖縣*/top: 480px;left:50px;} 

	}
	
/*1000以上 retina 大螢幕 */
@media only screen and (min-width:1000px){
.alert_area{
	margin-top:0px;
	width:1000px;
	height: 1400px;}	

.alert_area a{font-size: 1.5em;padding:8px;}
.alert_area .Label_Keelung{/* 基隆市*/top:35px;right:60px;}
.alert_area .Label_NewTaipei{/* 新北市*/top: 165px;right:125px;} 
.alert_area .Label_Taipei{/* 臺北市*/top:85px;right: 180px;} 
.alert_area .Label_Taoyuan{/* 桃園市*/top:160px;right:290px;} 
.alert_area .Label_Hsinchu{/* 新竹縣*/top:280px;right:260px;} 
.alert_area .Label_HsinchuCity{/* 新竹市*/top:245px;right:400px;} 
.alert_area .Label_Miaoli{/* 苗栗縣*/top: 350px;right:400px;} 
.alert_area .Label_Taichung{/* 臺中市*/top:460px;right:450px;} 
.alert_area .Label_Nantou{/* 南投縣*/top:600px;right:300px;} 
.alert_area .Label_Changhua{/* 彰化縣*/top:590px;right: 530px;} 
.alert_area .Label_Yunlin{/* 雲林縣*/top:680px;right: 540px;} 
.alert_area .Label_Chiayi{/* 嘉義縣*/top:780px;right: 380px;} 
.alert_area .Label_ChiayiCity{/* 嘉義市*/top:750px;right:540px;} 
 .alert_area .Label_Tainan{/* 臺南市*/top:900px;right:550px;} 
.alert_area .Label_Kaohsiung{/* 高雄市*/top:1050px;right:520px;} 
.alert_area .Label_Pingtung{/* 屏東縣*/top:1200px;right:400px;} 
.alert_area .Label_Taitung{/* 臺東縣*/top:940px;right:190px;} 
.alert_area .Label_Hualien{/* 花蓮縣*/top: 600px;right: 110px;} 
.alert_area .Label_Yilan{/* 宜蘭縣*/top: 300px;right: 70px;} 
 
 .alert_area span{padding: 0px 10px;}
.alert_area .Label_Lienchiang{/* 連江縣*/top:150px;left:50px;} 
.alert_area .Label_Kinmen{/* 金門縣*/top: 370px;left:50px;} 
.alert_area .Label_Penghu{/* 澎湖縣*/top: 700px;left:50px;} 

	}

a.alert_areaMAP{width: 100px;height:100px; background-size:cover;background-position: 0px 0px;}
a.alert_areaMAP span{
	border-top-right-radius:8px;
	border-bottom-left-radius:8px;
	color: #FFF;
	background-color: rgba(255,0,0,0.7);
	float: right;
	text-align: center;
	height: 30px;
	width: 30px;
	line-height: 30px;
}
@media only screen and (min-width: 768px){a.alert_areaMAP{width: 150px;height:150px;background-position: 0px 0px;}}

.typeMenu_selectbar{
	background-image: linear-gradient( 135deg, #ABDCFF 0%, #0396FF 100%);
	height:7px;
	width: calc(25% - 1px);
	position: absolute;
	left: 0%;
	bottom: 40px;
}
ul.typeMenu{	
	margin: 0px;
	padding: 0px;
	width: 100%;
	position: fixed;
	bottom: 0px;
	z-index: 9999;
}
ul.typeMenu li{
	text-align: center;
	float: left;
	width: 25%;
	line-height: 40px;
	box-sizing: border-box;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #FFF;
}
ul.typeMenu li a{
	color: #FFF;height: 40px;
	text-decoration: none;
	display: block;
	font-family: Arial, "微軟正黑體", "新細明體";
}

ul.typeMenu li:nth-child(1){background-image: linear-gradient( 135deg, #ABDCFF 0%, #0396FF 100%);}
ul.typeMenu li:nth-child(2){background-image: linear-gradient( 135deg, #CE9FFC 0%, #7367F0 100%);}
ul.typeMenu li:nth-child(3){background-image: linear-gradient( 135deg, #90F7EC 0%, #32CCBC 100%);}
ul.typeMenu li:nth-child(4){background-image: linear-gradient( 135deg, #81FBB8 0%, #28C76F 100%);border-style:none;}



.alertContent{
	padding: 10px;
	line-height: 1.5em;
	font-family: Arial, "微軟正黑體", "新細明體";
	font-size: 1em;
	padding-top: 50px;
}
.alertContent h3.title{text-align: center;font-size: 1.8em;margin-bottom: 5px;}
.alertContent h3.title small{display: block;font-size: 0.5em;color: #1671ED;}
.alertContent .time{background-color: #fff;padding: 10px;margin: 10px 0px;border-radius: 10px;} 
.alertContent .time span{
	color: #C00; 
}
 
.alertContent .Area{border-radius: 10px;background-color: #fbfbda;padding: 10px;}
.alertContent .Area h4{font-weight: 600;font-size: 1.2em;border-top:dashed 1px #ffaf14;margin: 5px 0px;padding-top: 10px;}
.alertContent .Area p{margin: 0px;color: #333;}