/*全局样式*/
* { margin:0 auto; padding:0; }
article, aside, dialog, footer, header, section, footer, nav, figure, menu { display:block }
body { font-family:"宋体", "Arial Narrow", HELVETICA; font-size:14px; color:#000000; }
ul, ol, li { list-style:none; }
img { border:0; display:block; }
em { font-style:normal; }
a { text-decoration:none; outline:none; color:#000000; }
/*基础样式*/
img { width:100%; }
/*静态样式*/
body { background-image:url(http://news.gog.cn/pic/003/016/677/00301667769_1e628aa8.png); background-repeat:no-repeat; background-position:top center; background-size:cover; width:100%; height:100%; overflow:hidden; }
#tl { position:absolute; width:15.1%; left:25.5%; top:4%; }
#tr { position:absolute; width:39.9%; right:25.4%; top:5.2%; }
#click { position:absolute; width:15.9%; left:57.8%; top:39.2%; z-index:10; }
#back { position:absolute; width:67.4%; left:16.3%; bottom:0;}
#show { position:absolute; width:67.4%; left:16.3%; bottom:0;}
#show .city { display:none; }
#show .city:first-child { display:block; }
/*动态样式：tl*/
@-ms-keyframes tl{
	from{  filter:alpha(opacity=0); -moz-opacity:0; opacity:0; top:-50%; }
	20%{  filter:alpha(opacity=100); -moz-opacity:1; opacity:1; top:7%; }
	50%{  filter:alpha(opacity=100); -moz-opacity:1; opacity:1; top:4%; }
	to{ }
}
@-moz-keyframes tl{
	from{  filter:alpha(opacity=0); -moz-opacity:0; opacity:0; top:-50%; }
	20%{  filter:alpha(opacity=100); -moz-opacity:1; opacity:1; top:7%; }
	50%{  filter:alpha(opacity=100); -moz-opacity:1; opacity:1; top:4%; }
	to{ }
}
@-o-keyframes tl{
	from{  filter:alpha(opacity=0); -moz-opacity:0; opacity:0; top:-50%; }
	20%{  filter:alpha(opacity=100); -moz-opacity:1; opacity:1; top:7%; }
	50%{  filter:alpha(opacity=100); -moz-opacity:1; opacity:1; top:4%; }
	to{ }
}
@-webkit-keyframes tl{
	from{  filter:alpha(opacity=0); -moz-opacity:0; opacity:0; top:-50%; }
	20%{  filter:alpha(opacity=100); -moz-opacity:1; opacity:1; top:7%; }
	50%{  filter:alpha(opacity=100); -moz-opacity:1; opacity:1; top:4%; }
	to{ }
}
@keyframes tl{
	from{  filter:alpha(opacity=0); -moz-opacity:0; opacity:0; top:-50%; }
	20%{  filter:alpha(opacity=100); -moz-opacity:1; opacity:1; top:7%; }
	50%{  filter:alpha(opacity=100); -moz-opacity:1; opacity:1; top:4%; }
	to{ }
}
#tl{
	-ms-animation:'tl' 5s ease-in-out 0s normal;
	-moz-animation:tl 5s ease-in-out 0s normal;
	-o-animation:'tl' 5s ease-in-out 0s normal;
	-webkit-animation:'tl' 5s ease-in-out 0s normal;
	animation:'tl' 5s ease-in-out 0s normal;
}	
/*动态样式：tr*/
@-ms-keyframes tr{
	from{  filter:alpha(opacity=0); -moz-opacity:0; opacity:0; right:-39.9%; }
	20%{ filter:alpha(opacity=0); -moz-opacity:0; opacity:0; right:-39.9%; }
	40%{  filter:alpha(opacity=100); -moz-opacity:1; opacity:1; right:25.4%; }
	to{ }
}
@-moz-keyframes tr{
	from{  filter:alpha(opacity=0); -moz-opacity:0; opacity:0; right:-39.9%; }
	20%{ filter:alpha(opacity=0); -moz-opacity:0; opacity:0; right:-39.9%; }
	40%{  filter:alpha(opacity=100); -moz-opacity:1; opacity:1; right:25.4%; }
	to{ }
}
@-o-keyframes tr{
	from{  filter:alpha(opacity=0); -moz-opacity:0; opacity:0; right:-39.9%; }
	20%{ filter:alpha(opacity=0); -moz-opacity:0; opacity:0; right:-39.9%; }
	40%{  filter:alpha(opacity=100); -moz-opacity:1; opacity:1; right:25.4%; }
	to{ }
}
@-webkit-keyframes tr{
	from{  filter:alpha(opacity=0); -moz-opacity:0; opacity:0; right:-39.9%; }
	20%{ filter:alpha(opacity=0); -moz-opacity:0; opacity:0; right:-39.9%; }
	40%{  filter:alpha(opacity=100); -moz-opacity:1; opacity:1; right:25.4%; }
	to{ }
}
@keyframes tr{
	from{  filter:alpha(opacity=0); -moz-opacity:0; opacity:0; right:-39.9%; }
	20%{ filter:alpha(opacity=0); -moz-opacity:0; opacity:0; right:-39.9%; }
	40%{  filter:alpha(opacity=100); -moz-opacity:1; opacity:1; right:25.4%; }
	to{ }
}
#tr{
	-ms-animation:'tr' 5s ease-in-out 0s normal;
	-moz-animation:tr 5s ease-in-out 0s normal;
	-o-animation:'tr' 5s ease-in-out 0s normal;
	-webkit-animation:'tr' 5s ease-in-out 0s normal;
	animation:'tr' 5s ease-in-out 0s normal;
}	
/*动态样式：click*/
@-ms-keyframes click{
	from{  filter:alpha(opacity=0); -moz-opacity:0; opacity:0; }
	30%{ filter:alpha(opacity=0); -moz-opacity:0; opacity:0; }
	70%{  filter:alpha(opacity=100); -moz-opacity:1; opacity:1; }
	to{ }
}
@-moz-keyframes click{
	from{  filter:alpha(opacity=0); -moz-opacity:0; opacity:0; }
	30%{ filter:alpha(opacity=0); -moz-opacity:0; opacity:0; }
	70%{  filter:alpha(opacity=100); -moz-opacity:1; opacity:1; }
	to{ }
}
@-o-keyframes click{
	from{  filter:alpha(opacity=0); -moz-opacity:0; opacity:0; }
	30%{ filter:alpha(opacity=0); -moz-opacity:0; opacity:0; }
	70%{  filter:alpha(opacity=100); -moz-opacity:1; opacity:1; }
	to{ }
}
@-webkit-keyframes click{
	from{  filter:alpha(opacity=0); -moz-opacity:0; opacity:0; }
	30%{ filter:alpha(opacity=0); -moz-opacity:0; opacity:0; }
	70%{  filter:alpha(opacity=100); -moz-opacity:1; opacity:1; }
	to{ }
}
@keyframes click{
	from{  filter:alpha(opacity=0); -moz-opacity:0; opacity:0; }
	30%{ filter:alpha(opacity=0); -moz-opacity:0; opacity:0; }
	70%{  filter:alpha(opacity=100); -moz-opacity:1; opacity:1; }
	to{ }
}
#click{
	-ms-animation:'click' 5s ease-in-out 0s normal;
	-moz-animation:click 5s ease-in-out 0s normal;
	-o-animation:'click' 5s ease-in-out 0s normal;
	-webkit-animation:'click' 5s ease-in-out 0s normal;
	animation:'click' 5s ease-in-out 0s normal;
}	
/*动态样式：back*/
@-ms-keyframes back{
	from{  filter:alpha(opacity=0); -moz-opacity:0; opacity:0; bottom:-50%; }
	40%{ filter:alpha(opacity=0); -moz-opacity:0; opacity:0; bottom:-50%;  }
	70%{  filter:alpha(opacity=100); -moz-opacity:1; opacity:1; bottom:0; }
	to{ }
}
@-moz-keyframes back{
	from{  filter:alpha(opacity=0); -moz-opacity:0; opacity:0; bottom:-50%; }
	40%{ filter:alpha(opacity=0); -moz-opacity:0; opacity:0; bottom:-50%;  }
	70%{  filter:alpha(opacity=100); -moz-opacity:1; opacity:1; bottom:0; }
	to{ }
}
@-o-keyframes back{
	from{  filter:alpha(opacity=0); -moz-opacity:0; opacity:0; bottom:-50%; }
	40%{ filter:alpha(opacity=0); -moz-opacity:0; opacity:0; bottom:-50%;  }
	70%{  filter:alpha(opacity=100); -moz-opacity:1; opacity:1; bottom:0; }
	to{ }
}
@-webkit-keyframes back{
	from{  filter:alpha(opacity=0); -moz-opacity:0; opacity:0; bottom:-50%; }
	40%{ filter:alpha(opacity=0); -moz-opacity:0; opacity:0; bottom:-50%;  }
	70%{  filter:alpha(opacity=100); -moz-opacity:1; opacity:1; bottom:0; }
	to{ }
}
@keyframes back{
	from{  filter:alpha(opacity=0); -moz-opacity:0; opacity:0; bottom:-50%; }
	40%{ filter:alpha(opacity=0); -moz-opacity:0; opacity:0; bottom:-50%;  }
	70%{  filter:alpha(opacity=100); -moz-opacity:1; opacity:1; bottom:0; }
	to{ }
}
#back{
	-ms-animation:'back' 5s ease-in-out 0s normal;
	-moz-animation:back 5s ease-in-out 0s normal;
	-o-animation:'back' 5s ease-in-out 0s normal;
	-webkit-animation:'back' 5s ease-in-out 0s normal;
	animation:'back' 5s ease-in-out 0s normal;
}	
/*动态样式：show*/
@-ms-keyframes show{
	from{  filter:alpha(opacity=0); -moz-opacity:0; opacity:0; -webkit-transform:scale(2,2); bottom:-100%; }
	70%{ filter:alpha(opacity=0); -moz-opacity:0; opacity:0; -webkit-transform:scale(2,2); bottom:-100%; }
	90%{ filter:alpha(opacity=100); -moz-opacity:1; opacity:1; -webkit-transform:scale(1,1); bottom:0%;  }
	to{ }
}
@-moz-keyframes show{
	from{  filter:alpha(opacity=0); -moz-opacity:0; opacity:0; -webkit-transform:scale(2,2); bottom:-100%; }
	70%{ filter:alpha(opacity=0); -moz-opacity:0; opacity:0; -webkit-transform:scale(2,2); bottom:-100%; }
	90%{ filter:alpha(opacity=100); -moz-opacity:1; opacity:1; -webkit-transform:scale(1,1); bottom:0%;  }
	to{ }
}
@-o-keyframes show{
	from{  filter:alpha(opacity=0); -moz-opacity:0; opacity:0; -webkit-transform:scale(2,2); bottom:-100%; }
	70%{ filter:alpha(opacity=0); -moz-opacity:0; opacity:0; -webkit-transform:scale(2,2); bottom:-100%; }
	90%{ filter:alpha(opacity=100); -moz-opacity:1; opacity:1; -webkit-transform:scale(1,1); bottom:0%;  }
	to{ }
}
@-webkit-keyframes show{
	from{  filter:alpha(opacity=0); -moz-opacity:0; opacity:0; -webkit-transform:scale(2,2); bottom:-100%; }
	70%{ filter:alpha(opacity=0); -moz-opacity:0; opacity:0; -webkit-transform:scale(2,2); bottom:-100%; }
	90%{ filter:alpha(opacity=100); -moz-opacity:1; opacity:1; -webkit-transform:scale(1,1); bottom:0%;  }
	to{ }
}
@keyframes show{
	from{  filter:alpha(opacity=0); -moz-opacity:0; opacity:0; -webkit-transform:scale(2,2); bottom:-100%; }
	70%{ filter:alpha(opacity=0); -moz-opacity:0; opacity:0; -webkit-transform:scale(2,2); bottom:-100%; }
	90%{ filter:alpha(opacity=100); -moz-opacity:1; opacity:1; -webkit-transform:scale(1,1); bottom:0%;  }
	to{ }
}
#show{
	-ms-animation:'show' 5s ease-in-out 0s normal;
	-moz-animation:show 5s ease-in-out 0s normal;
	-o-animation:'show' 5s ease-in-out 0s normal;
	-webkit-animation:'show' 5s ease-in-out 0s normal;
	animation:'show' 5s ease-in-out 0s normal;
}