@charset "utf-8";
/*框架预览 CSS*/
.mkeBody{ background:#121212; margin: 0;}
.mkeHeadBox{ padding: 30px 10px; text-overflow: ellipsis; white-space: nowrap; margin: 0; color: #fff; text-align: center; overflow: hidden; border-bottom: 3px solid #666; box-shadow: inset 0 -2px 3px #000000; letter-spacing: 1px; font: 26px/26px "微软雅黑"; }
.mkeFooterBox{ padding: 25px 10px; text-overflow: ellipsis; margin: 0; color: #fff; font-size: 14px; line-height: 24px; text-align: center; overflow: hidden; border-top: 3px solid #666; box-shadow: inset 0 2px 3px #000000; }
.mkeContentBox{ background:#fff; padding: 0 ;/* height: 100vh; */ overflow: hidden;}
.mkeContentBox:after{height:0; clear:both;}
.mkeFooterBox p,.mkeFooterBox div{padding:0; margin:0; line-height:26px; font-size:14px;}
.mkeFooterBox a{color:#fff; white-space:nowrap}
.mkeButton{background:#F36; display:inline-block; text-decoration:none; width:102px; border-radius:0.3em; transition:all 0.3s ease}
.mkeButton:hover{ background: #FF1550; }
.mkeURL{font-size:24px;}
.mkeFooterBox .mKeBannerAD{ width: 728px; height: 90px; margin: 18px auto 0; }
.mkeFooterBox .mSmallKeBannerAD{display:none;}
@media only screen and (max-width:900px){
.mkeButton {display:block; margin:8px auto 0;}
}
@media only screen and (max-width:767px){
.mkeHeadBox{font-size:18px; padding:15px 10px;}
.mkeFooterBox p,.mkeFooterBox div{ line-height:24px; font-size:12px;}
.mkeURL{font-size:22px;}
.mkeFooterBox .mKeBannerAD{display:none;}
.mkeFooterBox .mSmallKeBannerAD{width:300px; height:250px; margin:18px auto 0; display:block;}
}
/*End*/

/*主要CSS*/

html, body {
	margin: 0 !important;
	padding: 0;
	height: 100%;
	min-height: 100%;
	font-family: Trebuchet, Arial, Helvetica;
	min-width: 1000px;
	/* overflow: hidden; */
}
body.mkeBody {
    overflow: hidden !important;
}

#pageContent {	
	position:relative;
	margin:0px auto;
	/* height: 154vh; */
	overflow: hidden;
	transform: translateY(-5vh);
}
#imgContainer {
	position: relative;
	z-index: 1;
	cursor: move;
	transform-origin: 0px 0px;
}

img#imageFullScreen {   
	width: 100%; max-width: 1000px; z-index: 0;
}

/*svg#svgmaps {transform: translate(-2px, 1px) scale(1) !important; }
g.svggroup {  transform: scale(.79);}*/

svg#svgmaps {transform: translate(0px, 0px) scale(1) !important; }
g.svggroup {  transform: scale(.532);}
path#svg_2 { transform: translate( -2px,-19px);}
path#svg_3 { transform: translateY(-16px); }
path#svg_4 { transform: translate(-7px,-27px);}
path#svg_5 { transform: translate(-9px,-11px);}

path#svg_6 { transform: translate(-9px,-11px);}
path#svg_7 { transform: translate(-12px,-15px);}

path#svg_8 { transform: translate(-10px, -5px);}
path#svg_9 { transform: translate(-13px, -7px);}
path#svg_10 { transform: translate(-17px, -15px);}
path#svg_11 { transform: translate( -18px,-25px); }
path#svg_12 { transform: translate( -18px,-25px); }
path#svg_13 { transform: translate( -18px,-25px); }


#hi { display: none;}


#positionButtonDiv {
	color: #FFFFFF;
	padding: 0;
	text-align: left;
	position: absolute;
	z-index: 35;
	right:2%;
	top:54vh;
	width: .58rem;
	height: .58rem;
}

.b-po { position: fixed !important; top: 15vh !important;}

#positionButtonDiv p:nth-child(1) {
	background:#004347;	
	width:100%;
	height: 100%;	
	position: relative;
	margin: 0;
}

#positionButtonDiv p:hover,
em#zoomInButton:hover,
em#zoomOutButton:hover { background-color:#ff8a00 ;}

em#zoomInButton {
    width: .4rem;
    height: .4rem;
    display: block;
    position: absolute;
    margin-top: 0;
    top: .8rem;
    right: 11%;
    background:#004347;
    font-size: .3rem;
    text-align: center;
	color: #fff;
    line-height: .4rem;
}

em#zoomOutButton {
    width: .4rem;
    height: .4rem;
    display: block;
    position: absolute;
	z-index: 1;
    margin-top: 0;
	right: 11%;
	top: 1.2rem;
	color: #fff;
    background: #004347;
    font-size: .32rem;
    text-align: center;
    line-height:.4rem;
}

em#zoomOutButton::before {
    content: "";
    width: 70%;
    height: auto;
    border-top: 1px rgba(255,255,255,.25) solid;
    position: absolute;
    top: 0;
    left: 15%;
}

#positionButtonDiv p:last-child {
	background:#004347;
	margin-top: .15rem;
}

#positionButtonDiv .positionButtonSpan img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	border: 0;
	width: 80%;
}
.positionMapClass area {cursor: pointer;background:#004347;}
.zoomButton {border: 0;	cursor: pointer;}
.zoomableContainer { }




.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: .18rem;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 10px;
}

.part {
	position: absolute;
	/* width: 6.8rem;
	height: 1.78rem; */
	width: 60%;
	height: 82vh;
	top: 50%;
	transform: translateY(-38%);
	/* height: 38vh; */
	/* transform: translateY(-17%); */
	left: 20%;
	background-color: transparent;
	border-radius: 10px;
	/* box-shadow: 0 5px 35px rgba(0,0,0,.15); */
	z-index: 8;
	padding: .25rem;
}

.part::after {
	content: "";
    position: absolute;
    top: 88%;
    left: 5%;
    width: 0;
    height: 0;
    border: .21rem transparent solid;
    border-left: .22rem #fff solid;
    transform: rotate(230deg);
	display: none;
}

.slideleft {
	/* width: 45%;
	height: 100%;
	float: left;
	margin-right: 3%;
	border-radius: 10px; */
	
	width: 74%;
	height: 5rem;
	/* float: left; */
	margin: auto;
	border-radius: 10px;
}

.txtright {
	width: 52%;
	margin: auto;
	height: 100%;
	text-align: center;
	color: #333;
	position: relative;
	z-index: 1;
	margin-top: .25rem;
	color: #fff;
}

.txtright h3,
.part h3 { 
	text-align: center;
	font-size: .28rem;
    font-weight: bold;
    padding: 0;
    margin: 0;
	color: #fff;
	margin-bottom: .2rem;
}

.txtright p {
	display: -webkit-box;
	font-size: .17rem;
	line-height: 1.8;
	/* height: .75rem;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical; */
}

.txtright a {
	display: inline-block;
	float: right;
	background-color:#003437 ;
	color: #fff;
	text-decoration: none;
	border-radius: 25px;
	line-height: 1.2;
	padding: .08rem .15rem;
	font-size: .14rem;
	display: none;
}

.swiper-button-prev::after,
.swiper-button-next::after { content: "";}

.swiper-button-prev,
.swiper-button-next {
	background-repeat: no-repeat;
	background-position: center;
	width: 1rem;
	height: 1rem;
	outline: none;
}

.swiper-button-prev {  top: 38%; left: -3%;right: auto;	background-image: url(../images/ban-pre-hover.png);}
.swiper-button-next { top: 38%; left: auto; right: 0; background-image: url(../images/ban-next-hover.png);}

.swiper-button-prev:hover {	background-image: url(../images/ban-pre.png);}
.swiper-button-next:hover {	background-image: url(../images/ban-next2.png);}



path:hover { fill:rgba(0,199,211,.8);}
text:hover  {cursor: pointer;}


#yuan {
	/* width: 1920px;
	height: 2736px; */
	width: 100vw;
	height: ;
	position: absolute; z-index: 1 !important;
	top: -10px;
	left: -6px;
	transform-origin: 0px 0px;
}



span.yuan {
    display: inline-block;
    width: .25rem;
    height: .25rem;
    border: 2px transparent solid;
    color: #fff;
    text-align: center;
    line-height: .25rem;
	position: absolute;
	z-index: 5;
	border-radius: 50%;
	cursor: pointer;
}

span.yuan:hover {
	background-color: #fff;
	color: #004347;
}



.dot2 { margin-left: 5.34rem;margin-top: 17.85rem; transition: all 0.7s ease-out 0s;}
.dot3 { margin-left: 3.84rem; margin-top: 16.70rem; transition: all 0.7s ease-out 0s;}

.dot5 {  margin-left: 6.91rem;margin-top:12.29rem; transition: all 0.7s ease-out 0s;}
.dot6 {  margin-left: 8.44rem; margin-top: 10.94rem; transition: all 0.7s ease-out 0s;}
.dot7 {  margin-left: 7.30rem; margin-top: 9.98rem; transition: all 0.7s ease-out 0s;}
.dot8 {  margin-left: 7.87rem; margin-top: 8.06rem; transition: all 0.7s ease-out 0s;}
.dot9 {  margin-left: 10.27rem; margin-top: 7.87rem; transition: all 0.7s ease-out 0s;}

.dot10 { margin-left:11.33rem; margin-top: 12.67rem; transition: all 0.7s ease-out 0s;}
.dot11 { margin-left: 9.60rem; margin-top:12.86rem; transition: all 0.7s ease-out 0s;}
.dot12 { margin-left: 11.90rem; margin-top: 15.55rem; transition: all 0.7s ease-out 0s;}
.dot13 { margin-left: 10.17rem; margin-top:15.55rem; transition: all 0.7s ease-out 0s;}



#slideView {
	height: 100vh;
	width: 100%;
	background-color: rgba(0,0,0,.8);
	position: fixed;	
	top: 0;
	left: 0;
	transform-origin: 0px 0px;	
	opacity: 0 ;
	z-index: -1;
}




/* #num1{  margin-left: 6.1rem;  margin-top: 17rem; transition: all 0.7s ease-out 0s; }
#num2{  margin-left: 4.90rem;  margin-top: 15.29rem; transition: all 0.7s ease-out 0s; }
#num3{  margin-left: 3.37rem;  margin-top: 14.18rem; transition: all 0.7s ease-out 0s; }
#num4{  margin-left: 5.5rem; margin-top: 13.29rem;transition: all 0.7s ease-out 0s; }

#num5{  margin-left: 6.45rem;  margin-top:9.70rem; transition: all 0.7s ease-out 0s; }
#num6{  margin-left: 8.00rem;  margin-top: 8.50rem; transition: all 0.7s ease-out 0s; }
#num7{ margin-left: 7.04rem;  margin-top: 7.44rem; transition: all 0.7s ease-out 0s; }
#num8{ margin-left: 7.21rem;  margin-top: 5.53rem; transition: all 0.7s ease-out 0s; }
#num9{  margin-left: 9.91rem;  margin-top: 5.37rem;transition: all 0.7s ease-out 0s; }

#num10{  margin-left:11.33rem;  margin-top: 10.09rem; transition: all 0.7s ease-out 0s; }
#num11{  margin-left: 9.13rem;  margin-top:10.27rem;transition: all 0.7s ease-out 0s; }
#num12{  margin-left: 11.63rem; margin-top: 13.31rem;transition: all 0.7s ease-out 0s; }
#num13{  margin-left: 9.17rem;  margin-top:13.55rem; transition: all 0.7s ease-out 0s; } */





.part .btn_close {
	width: .5rem;
	height: .5rem;
	
	background-image: url(../images/btn-close.png);
	background-repeat: no-repeat;
	background-position: center center;
	position: absolute;
	top: 0rem;
	right: 0.85rem;
	/* top: .25rem;
	right: .25rem; */
	background-size: .35rem;
	top: -.17rem;
	right: -.15rem;
	cursor: pointer;
}

.canves { 
	position: absolute; 
	top: 0; left: 0; 
	width: 100%; 
	height: 100vh; 
    z-index: -1; 
}






@media  screen and (max-width:768px)  {
	em#zoomInButton ,
	em#zoomOutButton{ width: 40px; height: 40px; line-height: 40px; font-size: 18px;}
	
	#positionButtonDiv {  width: 40px; height:50px;   top: 34vh;}
	
	em#zoomInButton {top:50px; right: 0%;}
	em#zoomOutButton {right: 0; top: 89px;}
	
	#pageContent { transform: translate(0,-2vh);}
	
	#imgContainer { max-width: 100%;}
	
	html, body { min-width: unset !important;}

	svg#svgmaps {
	    /*transform: translate(2px, 4px) scale(.25) !important;*/
	    transform: translate(-6px, -8px) scale(.4) !important;
	}

	path#svg_8 { transform: translate(-2px, 13px); }
	

	/* 地图轮播循环 */
	.sm_dot { display: block;}
	.part {
	    position: fixed;
	    width: 100%;
	    height: 80vh;
	    top: 50%;
		left: 50%;
	    transform: translate(-50%,-50%) !important;	   
	    background-color: transparent;
	    border-radius: 10px;
	    /* box-shadow: 0 5px 35px rgba(0,0,0,.15); */
	    z-index: 8;
	    padding: 35px 0;
	}
	
	.part .btn_close {
	    width: 35px;
	    height: 35px;
	    background-size: 29px;
	    top: 0;
	    right: 9%;
	    cursor: pointer;
	}
	
	.txtright h3, .part h3 { font-size: 22px; margin-bottom: 25px; }
	
	.slideleft {
	    width: 85%;
	    height: 183px;
	    margin-bottom: 35px;
	}
	
	.txtright { width: 80%; margin-top: 0; }
	.txtright p { font-size: 16px;}
	
	.swiper-button-prev, .swiper-button-next { width: 28px; height: 38px; }
	.swiper-button-prev { left: 0;}

}

/* ipad */
@media only screen and (width:768px) and (max-width:1024px) { 
	svg#svgmaps { transform: translate(-11px, -24px) scale(.8) !important; }

	path#svg_2 { transform: translate( -2px,-55px) !important; }
	path#svg_3 { transform: translateY(-54px) !important; }
}




@media  screen and (min-width:400px) and (max-width:545px)  { 
	svg#svgmaps {
	    transform: translate(-6px, -8px) scale(.43) !important;
	}
	
	path#svg_8 {
	    transform: translate(-10px, 9px);
	}
	
	path#svg_9 {
	    transform: translate(-22px, 2px);
	}
}


@media  screen and (min-width:440px) and (max-width:460px)  { 
	svg#svgmaps {
	    transform: scale(.43) !important;
	}	
}

/* mate30/40 */

@media  screen  and (width:400px)  { 
	svg#svgmaps {
	    transform: translate(0px,0px) scale(.407) !important;
	}
	
	path#svg_2 {
	    /* transform: translate( -2px,-14px); */
		transform: translate( -60px,-194px) scale(1.1);
	}
	
	path#svg_3 {
	    transform: translate( 0px , -20px);
	}
	
	path#svg_5 {
	    transform:translate(-23px,-60px) scale(1.027);
	}
	
	path#svg_13 {
	    transform: translate( -18px,-20px);
	}
	
}

@media screen and (max-width:360px) {
	svg#svgmaps {
    	transform: translate(-7px, -8px) scale(0.382) !important;
	}
	
	path#svg_5 {
	    transform:translate(-26px,-63px) scale(1.03);
	}
}


@media screen and (max-width:325px) {
	svg#svgmaps {
    	transform:  scale(.34) !important;
	}
}






/*@media screen and (width: 768px) {
	svg#svgmaps {
   		transform: translate(-6px, -8px) scale(.8) !important;
	}
}


@media  screen and (min-width:400px) and (max-width:545px)  { 
	svg#svgmaps {
	    transform: translate(-6px, -8px) scale(.43) !important;
	}
}*/

/* mate30/40 */
/*@media  screen and (max-width:440px)  { 
	svg#svgmaps {
	    transform: translate(6px, 9px) scale(.43) !important;
	}
}

@media  screen and (max-width:460px)  { 
	svg#svgmaps {
	    transform: translate(6px, 9px) scale(.43) !important;
	}
	
	path#svg_3 {  transform: translateY(9px);}
}

@media screen and (max-width:325px) {
	svg#svgmaps {
    	transform: translate(-6px, -8px) scale(.34) !important;
	}
}*/