﻿@charset "utf-8";
body {
	margin: 0px;
	padding: 0px;
	font-family: "\5FAE\8F6F\96C5\9ED1";
	font-size: 12px;
	color: #333;
	height: 100%;
}


/*mright*/

.map {
	position: relative;
	width: auto;
	margin: 0 auto;
}

.map a {
	color: #5b5a5a;
	font-size: 14px;
	text-decoration: none;
}

.map .city:hover .active {
	color: #fff !important;
}

.map .city1 {
	position: relative;
}

.citybg {
	position: absolute;
	display: none;
	z-index: 3;
	background-size: contain !important;
	transition: .5s;
}

.city a.active .citybg {
	display: block;
	z-index: 3;
}

.city a.active i {
	background-color: #e5e5e5;
	width: 15px;
	height: 6px;
	border-radius: 100%;
	position: absolute;
	top: 10px;
	left: -15px;
	visibility: visible;
	z-index: 0;
	transition: .5s;
	opacity: 1;
}

.city a.active em {
	display: block;
	width: 10px;
	height: 10px;
	background: #fff;
	position: absolute;
	border-radius: 50%;
	visibility: hidden;
	top: 5px;
	left: -15px;
	transition: .5s;
	opacity: 0;
}

.map .city:hover a.active em {
	visibility: visible;
	opacity: 1;
}

.map .city:hover a.active i {
	visibility: hidden;
	opacity: 0;
}

.city a.active em:before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -10px 0 0 -10px;
	animation: icon_1 2s linear infinite;
	-webkit-animation: icon_1 2s linear infinite;
}

.city a.active i:before {
	content: "";
	display: block;
	width: 15px;
	height: 19px;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(../images/H-img/map_ico7.png);
	position: absolute;
	bottom: 10px;
	left: 0;
	animation: icon_2 2s linear infinite;
	-webkit-animation: icon_2 2s linear infinite;
}

.map .city a.gz.active i:before {
	animation-delay: 500ms;
	-webkit-animation-delay: 500ms;
}

.map .city a.lz.active i:before {
	animation-delay: 600ms;
	-webkit-animation-delay: 600ms;
}

.map .city a.cc.active i:before {
	animation-delay: 700ms;
	-webkit-animation-delay: 700ms;
}

.map .city a.bj.active i:before {
	animation-delay: 800ms;
	-webkit-animation-delay: 800ms;
	background-image: url('../images/H-img/map_ico7-1.png');
}

.map .city a.nj.active i:before {
	animation-delay: 900ms;
	-webkit-animation-delay: 900ms;
}

.map .city a.wh.active i:before {
	animation-delay: 1000ms;
	-webkit-animation-delay: 1000ms;
}

.map .city a.cs.active i:before {
	animation-delay: 1100ms;
	-webkit-animation-delay: 1100ms;
}

.map .city a.cq.active i:before {
	animation-delay: 800ms;
	-webkit-animation-delay: 800ms;
}

@-webkit-keyframes icon_2 {
	0% {
		transform: translateY(0);
		-webkit-transform: translateY(0);
	}
	50% {
		transform: translateY(-5px);
		-webkit-transform: translateY(-5px);
	}
	100% {
		transform: translateY(0);
		-webkit-transform: translateY(0);
	}
}

@keyframes icon_2 {
	0% {
		transform: translateY(0);
		-webkit-transform: translateY(0);
	}
	50% {
		transform: translateY(-5px);
		-webkit-transform: translateY(-5px);
	}
	100% {
		transform: translateY(0);
		-webkit-transform: translateY(0);
	}
}

@-webkit-keyframes icon_1 {
	0% {
		transform: scale(0);
		-webkit-transform: scale(0);
	}
	50% {
		transform: scale(1.2);
		-webkit-transform: scale(1.2);
		opacity: 1;
	}
	100% {
		transform: scale(0);
		-webkit-transform: scale(0);
	}
}

@keyframes icon_1 {
	0% {
		transform: scale(0);
		-webkit-transform: scale(0);
	}
	50% {
		transform: scale(1.2);
		-webkit-transform: scale(1.2);
		opacity: 1;
	}
	100% {
		transform: scale(0);
		-webkit-transform: scale(0);
	}
}



/* 2023-04-03 CSS */
.map:after{content:""; width:146px; height:219px; background:url(../images/smap.png) no-repeat; position:absolute; right:0; bottom:0;transform: scale(0.6);transform-origin: right bottom;}
@media (max-width:1799px){
.map:after{transform: scale(0.42);}
}


.map a{ color:rgba(255,255,255,0);}
.map a.active{ color:#727ea2!important;}
.map .city:hover .active{ color:#727ea2!important;}
.map .city:hover a.active i{visibility:visible!important; opacity:1!important;}
.map .city:hover a.active em{visibility:hidden!important; opacity:0!important;}
.citybg{opacity:0!important; visibility:hidden!important;}
.map a.active.bj{ color:#b63737!important;}
.map .city:hover .active.bj{ color:#b63737!important;}
.section-2{ background:#F5F5F5!important;}