anqingfbs/.svn/pristine/ce/ceaa2e86dac67cafdbccf6b2c9a90d9ce2d0beaf.svn-base

body,
html {
	width: 100%;
	height: 99%;
	margin: 0;
	padding: 0;
	background-image:url(../../img2/bg.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	font-size: 16px;
}

.top {
	display: flex;
	height: 9%;
	width: 100%;
	align-items: center;
	justify-content: center;
}

.title {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 80px;
	letter-spacing: 0.125rem;
	width: 50%;
	text-indent: 0%;
	background: linear-gradient(to top, #FFFFFF 0%, #cacaca 50%, #F0F5FD 100%);
	-webkit-background-clip: text;
	color: transparent; /* 或者使用一个与背景颜色相似的颜色以确保在不支持该特性的浏览器中可读 */
	-webkit-text-fill-color: transparent;
	font-weight: bold;
}
.date {
	display: flex;
	width: 30%;
	color: #ffffff;
	align-items: center;
	justify-content: end;
	letter-spacing: 2px;
	text-indent: 15px;
}

.map-container {
	position: relative;
	height: 88%;
}

.sidebar {
	position: absolute;
	top: 0;
	height: 100%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* 水平居中内容 */
	padding: 20px;
	/* 内边距 */
}

.left {
	left: 0;
	width: 20%;
}

.bkbg{
	width: 18vw;
	height: 9vh;
	background-image: url(../../img2/bkbg.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.zbkbg{
	width: 18vw;
	height: 9vh;
	background-image: url(../../img2/zbkbg.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.bkbg >span {
	color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4%;
    margin-left: 25%;
    font-size: 40px;
    letter-spacing: 0.2rem;
}

.zbkbg >span {
	color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
    margin-top: 4%;
    margin-right: 25%;
	font-size: 40px;
	letter-spacing: 0.2rem;
}

.left1{
	margin-top: 22%;
	margin-left: 20%;
}

.left2{
    margin-top: 15%;
    margin-left: 0%;
}

.left3{
	margin-top: 10%;
	margin-left: -15%;
}

.left4{
	margin-top: 10%;
	margin-left: 5%;
}

.center {
	position: absolute;
	top: 0;
	height: 100%;
	z-index: 2;
	left: 20%;
	width: 60vw;
}

.center1{
	position: absolute;
	top: 15%;
	width: 100%;
	height: 10%;
}

.center1-main{
	position: absolute;
	width: 3vw;
    height: 8vh;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.center1-main >span {
	color: #ffffff;
	display: flex;
	margin-top: -40px;
	justify-content: center;
	font-size: 40px;
}

.yuan{
	left: 33.5%;
	background-image: url(../../img2/yuan.png);
}

.wang{
	top:45%;
	left: 42%;
	background-image: url(../../img2/wang.png);
}

.he{
	top:45%;
	left: 52%;
	background-image: url(../../img2/he.png);
}

.chu{
	left: 61%;
	background-image: url(../../img2/chu.png);
}

.center2{
	position: absolute;
	top: 39%;
	width: 100%;
	height: 10%;
}

.center2-main{
    position: absolute;
    width: 3vw;
    height: 8vh;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.center2-main >span {
	color: #ffffff;
	display: flex;
	margin-top: -40px;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 40px;
}

.dy{
	left: 24%;
	background-image: url(../../img2/secondBg.png);
}

.zy{
	top:70%;
	left: 38%;
	background-image: url(../../img2/secondBg.png);
}

.zn{
	top:76%;
	left: 56%;
	background-image: url(../../img2/secondBg.png);	
}

.yl{
	left: 70%;
	background-image: url(../../img2/secondBg.png);
}

.center3{
	position: absolute;
	top: 69%;
	width: 100%;
	height: 10%;
}

.center3-main{
	position: absolute;
	width: 5vw;
	height: 12vh;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.center3-main >span {
	color: #ffffff;
	display: flex;
	margin-top: -40px;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 40px;
}

.fd{
	left: 9%;
	background-image: url(../../img2/fd.png);
}

.sd{
	top:110%;
	left: 19%;
	background-image: url(../../img2/sd.png);
}

.gf{
	top:162%;
	left: 32%;
	background-image: url(../../img2/gf.png);
}

.cn{
	top:175%;
	left: 45.5%;
	background-image: url(../../img2/cn.png);
}

.fh{
	top:160%;
	left: 60%;
	background-image: url(../../img2/fh.png);
}

.dw{
	top:117%;
	left: 72%;
	background-image: url(../../img2/dw.png);
}

.dc{
	left: 82.5%;
	background-image: url(../../img2/dc.png);
}

.right {
	right: 0;
	width: 20%;
}