.bigPic div h3 {font:"微軟正黑體" 20px/1.4em ;color:#FFF;position: absolute;top: 0;text-shadow: #000 3px 3px 3px }
.bigPic > div {position: relative;}
.bright{-webkit-filter: brightness(70%); filter: brightness(70%);}
.abc{width: 800px;height: 100px;box-shadow: 5px 5px 0px #000;border-radius: 20px;}
.introPic { position:absolute;top:15%;right:10%;background:rgba(0,0,0,0.6);font:15px/1.4 "微軟正黑體" ;color:#FFF;width: 74%;padding: 2% 2%;display: none;text-align: left;letter-spacing: 0.5px;}
.introPic .hotSpotPic {background: #FFF;color:#be0000;font:bold 15px/1.4 "微軟正黑體" ;margin: 5px 2.5px;padding: 1px;}
.introPicName {color:#ffb400;}

.nameCity{position: absolute;width:34px;font:bold 24px/1 "微軟正黑體";background: rgba(0,0,0,0.8);border-radius: 0 20px 20px 0;left:0;z-index: 50;top: 25%; color:#fff100;padding: 20px 0;}

@media only screen and (max-width: 1500px) {
.introPic{top:10%;right:3%;font:14px/1.4 "微軟正黑體" ;width: 86%;padding: 1% 1%;}
.introPic .hotSpotPic{font:bold 14px/1.4 "微軟正黑體";}
.nameCity{position: absolute;width:28px;font:bold 20px/1 "微軟正黑體";background: rgba(0,0,0,0.8);border-radius: 0 20px 20px 0;left:0;z-index: 50;top: 25%; color:#fff100;padding: 10px 0;}
}


@media only screen and (max-width:960px) {
.introPic{top:8%;right:3%;font:13px/1.4 "微軟正黑體" ;width: 86%;padding: 1% 1%;}
.introPic .hotSpotPic{font:bold 13px/1.4 "微軟正黑體";}
}

@media only screen and (max-width: 768px) {

.introPic{top:22%;right:10%;font:14px/1.2em "微軟正黑體" ;width: 80%;padding: 2% 2%;}
.nameCity{position: absolute;width:100%;font:bold 20px/1.2 "微軟正黑體";background: rgba(255,255,255,0.8);border-radius: 0;left:0;z-index: 50;; color:#000;padding: 10px 0;top: 0;height: 41px;}
}


@media only screen and (max-width: 540px) {
.introPic {top:15%;right:5%;width: 90%;padding: 1% }
.nameCity{width:100%;font:bold 16px/1 "微軟正黑體";padding: 7px 0;height: 30px;}
}


@media only screen and (max-width: 400px) {	
.nameCity{width:100%;font:bold 16px/1 "微軟正黑體";padding: 5px 0;height: 25px;}
.introPic{font:13px/1.2 "微軟正黑體" ;top:12%;}

}