﻿/*globe*/
*{margin:0;padding:0;border:0}
html,body,h1,h2,h3,h4,h5,h6,p,br,form,input,button,textarea,select,fieldset,blockquote,ul,ol,li,dl,dt,dd,pre,a{margin:0;padding:0;border:0;font-family:Arial,Helvetica,sans-serif;font-size:10px;color:#666;text-decoration:none;}
ul{ list-style:none;}
 
/* 头部 */
 
  .topHeader, .topHeader01>div ,.Header>div,.Header01>div{ display: -webkit-flex;display: flex; justify-content:space-between; align-items:center ; background-color:lime; height:40px; width:100%;
           -webkit-align-items:center; 
           }

.Header01>div>ul,.topHeader>ul{max-width:64%;display: -webkit-flex;display: flex; justify-content:space-between; align-items:center ; }
.Header01>div>ul>li,.topHeader>ul>li{ margin-left:8px;}



.topHeader>div:first-child,.Header>div>div:first-child,.Header01>div>div:first-child,.topHeader01>div>div:first-child{ width:18%;   height: 40px;display: flex; justify-content: center;align-items: center;}
.topHeader>div:first-child  img,.Header>div>div:first-child  img,.Header01>div>div:first-child  img,.topHeader01>div>div:first-child  img{ width: auto; height: auto; max-height:40px;max-width:100%; }
.topHeader>h1,.Header>div>h1,.Header01>div>div:nth-child(2),.topHeader01>div>h1{ width:64%; text-align:center; vertical-align:middle; font-size:1.6em; font-weight:bold;}
 
.topHeader>div:last-child,.Header>div>div:last-child,.Header01>div>div:last-child,.topHeader01>div>div:last-child{ width:15%;}
  
  
   
 
 
  
/*头部菜单*/  
 
#topNav{width: 96%; margin:10px auto;overflow:hidden; }
.topMenu{  height:30px;width: 100%;position: relative; }
   .topMenu li{ width:auto; max-width:34%; margin:0 10px; text-align:center; }
  .topMenu a{ font-size:1.6em;  line-height:30px;}

 
 
 /*面包屑*/
 .mbx{ border-top:solid 1px #DCDCDC;border-bottom:solid 1px #DCDCDC; padding:10px 5px; margin-bottom:10px;color:#777777;display: -webkit-flex;display: flex;}
  .mbx>li{ position:relative; font-size:1.4rem; margin-right:15px;}
   .mbx>li:not(:last-child):after{ position:absolute; content:"/";  right:-10px; top:0px;}
 
   .mbx li a,.mbx li{font-size:1em;}
 
   
   
   
   /*网页描述*/
.listMs{width:100%; margin:30px auto;}
.ms{ line-height:20px; letter-spacing:2px; font-size:1.3em; width:96%; margin:0 auto;}
   
    /*关联导航*/
 
 
.xiangguan{width:90%;   min-height:20px; border:solid 1px #CDCDCD;
 border-radius:15px; background-color:#E9FFD7;  margin:30px auto;

 padding:10px; position:relative;box-shadow: 5px 5px rgba(0, 0, 0, .2);}
 .xgTitle{font-size:1.8em; font-weight:bold; padding:5px;position:absolute; top:-15px; left:100px; background-color:#EDEDED; border-radius:10px;color:Red;}
 

 .citys{ padding:2px;justify-content:space-between;display: -webkit-flex;display: flex;min-height:32px; width:98%;align-items:center; flex-wrap:wrap;}
   .citys>li{ display:inline-block; margin:8px auto;  min-width:22%; width:auto; }
  .citys>li>a{  font-size:1.2em; text-align:center;}
 
  
   
   
   
   /*底部内容-1  */
footer,.ewmShow{margin:0 auto;width:100%; height:360px; background-color:#1190A1; position:relative;}
.footer,.ewmOn{margin: auto;width:100%; height:360px; background-color:#1190A1;display: -webkit-flex;display: flex; justify-content:space-between;-webkit-align-items:center;
	align-items:center;flex-wrap:wrap; 
 }
 .ewmShow{ background-color:#CBFFA6; position:absolute; left:0; top:0; z-index:999;height:360px; }
   .ewmOn{ background-color:#CBFFA6; height:360px;}

 
 
.footer>div{ width:32%; height:150px; margin:0 auto;}
.footer>div:nth-child(1),.footer>div:nth-child(2),.footer>div:nth-child(4){  border-right:solid 1px #E8C8E0;}
.footer>div:nth-child(3)>span:first-child{ margin-top:5px;}
.footer>div:nth-child(4){ width:33%;}

.footer>div:not(:nth-child(4)){display: -webkit-flex;display: flex;-webkit-align-items:center;align-items:center;flex-wrap:wrap;}
.footer>div:nth-child(5){ width:65%;height:150px; align-content:flex-start;}
 .lianxi *{color:White; font-size:1.5em;width:100%; margin-bottom: 18px;}
  .lianxi .ewm-qun{color:lime;  cursor:pointer; line-height:18px; letter-spacing:2px;}
.footer>div:nth-child(4)>div:first-child{display: flex;justify-content:space-around;display: -webkit-flex; height:80px;}
.footer>div:nth-child(4)>div:first-child>img{ width:100px; height:80px; border-radius:5px;} 
.footer>div:nth-child(4)>div:last-child{ width:100%; line-height:20px;  margin-top:10px; color:white; text-align:center; font-size:1.5em; font-weight:bold;} 
.footer>div:nth-child(4)>div:last-child a{ line-height:20px;  margin-top:10px;   color:white; text-align:center; font-size:1.5em; font-weight:bold;} 

	
.xinxi>span{ color:lime; font-weight:bold; font-size:1.6em; width:100%;text-indent:0.2em; padding:2px;}
.xinxi>a{ color:white;width:100%; text-indent:1em; font-size:1.3em;}





 .ewmCity,.ewm{border-radius:5px; background-color:#C2D5FC; height:320px; width:100%;box-shadow: 5px 5px rgba(0, 0, 0, .1);box-sizing:border-box; padding:8px;}
 .ewm{display: -webkit-flex;display: flex; justify-content:space-around;-webkit-align-items:center;}
 
  .ewm>img{ height:96%; width:auto;}
 
 
  .ewmCity{display: -webkit-flex;display: flex; justify-content:space-around;-webkit-align-items:center;flex-wrap:wrap;}
  .ewmCity>span{ padding:2px 3px ;background-color:#ECE9D8; border-radius:3px;box-shadow: 1px 1px rgba(0, 0, 0, .2); cursor:pointer; margin:5px; font-size:20px;}
  
  .ewmXz{color:Red; font-weight:bold;}
  
 .ewmOff{ display:none;}


.gb{ display:inline-block; height:20px; line-height:20px;  background-color:#7cfc00; font-weight:bold; letter-spacing:3px;
     width:40px; border:solid 1px red; border-radius:0 0 0 10px; padding:8px; text-align:justify; text-align:center;
     position:absolute; right:0; top:0; color:White;
     
     }
     
     
     



/*=================================================================================*/


.WxEwmQun
{
	
	position:fixed; right:2px; bottom:200px;   z-index:1000;
  display:block;
/* text */
	text-decoration: 		none;
 
	font-weight: 			bold;
	text-shadow: 			rgba(255,255,255,.5) 0 1px 0;
	-webkit-user-select: 	none;
	-moz-user-select: 		none;
	user-select: 			none;
	
	
/* layout */
	padding: 				.5em .6em .4em .6em;
	margin: 				.5em;
	display: 				inline-block;
 
	
	-webkit-border-radius: 	8px;
	-moz-border-radius: 	8px;
	border-radius: 	8px;
	
/* effects */
	border-top: 		1px solid rgba(255,255,255,0.8);
	border-bottom: 		1px solid rgba(0,0,0,0.1);
	
	background-image: 	-webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(noise.png);
	background-image: 	-moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(noise.png);
	background-image: 	gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(noise.png);
 
	-webkit-transition: background .2s ease-in-out;
	-moz-transition: 	background .2s ease-in-out;
	transition: 		background .2s ease-in-out;
	
/* color */
	color: 				#A740FF;
	background-color: 	hsl(0, 0%, 75%);
	
	-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
						hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
						rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	-moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
						hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
						rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	box-shadow:		 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
						hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
						rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}
 
 
 
/* -------------- icon -------------- */
.WxEwmQun:before {
	font: 			1.4em/0 ;
	content: 		attr(data-icon); /* gets the icon value from the custom data attribute and puts it infront of the button label */
	margin-right: 6px;
	color:Red;
}
 
 
 
 
.WxEwmQun .pink {
	color: 				hsl(340, 100%, 30%) !important;
	background-color: 	hsl(340, 100%, 75%);
	-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	-moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	box-shadow: 		inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}
.WxEwmQun .pink:hover { 	background-color: hsl(340, 100%, 83%); }
 
 
 
 
/* -------------- States -------------- */
 
.WxEwmQun:hover {
	background-color: 	hsl(0, 0%, 83%);
}
 
 
 
.WxEwmQun:active {
	background-image: 	-webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
	background-image: 	-moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
	background-image: 	gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
 
	-webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ 
							rgba(0,0,0,0.4) 0 .1em 1px, /* border */
							rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
	-moz-box-shadow: 	inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ 
							rgba(0,0,0,0.4) 0 .1em 1px, /* border */
							rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
	box-shadow: 		inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ 
							rgba(0,0,0,0.4) 0 .1em 1px, /* border */
							rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
 
	-webkit-transform: 	translateY(.2em);
	-moz-transform: 	translateY(.2em);
	transform: 			translateY(.2em);
}
 
.WxEwmQun:focus {
	outline: none;
	color: rgba(254,255,255,0.9) !important;
	text-shadow: rgba(0,0,0,0.2) 0 1px 2px;
}
 
 
 
 
/* -------------- Materials -------------- */
 
.WxEwmQun.glossy:after{
	content: 	"";
	position: 	absolute; 
    width: 		90%;
    height: 	60%;
    top: 		0;
    left: 		5%;    
    
    -webkit-border-radius: 	.5em .5em 1em 1em / .5em .5em 2em 2em;    
    -moz-border-radius: 	.5em .5em 1em 1em / .5em .5em 2em 2em;
    border-radius: 			.5em .5em 1em 1em / .5em .5em 2em 2em;
    
    background-image: 		-webkit-gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ),
    							color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) );	
    background-image: 		-moz-linear-gradient(left, rgba(255,255,255,.55), rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%, rgba(255,255,255,.5) );	
    background-image: 		gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ),
    							color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) );	
}
.WxEwmQun.glossy:active:after
 { opacity: .6; }
 

/* skew */
.skew { 
	border-top: 			none; 
	padding-right: 			1em;
	padding-left: 			0.8em;	
	-webkit-border-radius: 	5em 1em / 5em 1em;  
	-moz-border-radius: 	5em 1em / 5em 1em;  
	border-radius: 			5em 1em / 5em 1em;  
}
.skew.glossy:after { 	
	left: 10%;
	-webkit-border-radius: 	7em 1em / 5em 1em;
	-moz-border-radius: 	7em 1em / 5em 1em;
	border-radius: 			7em 1em / 5em 1em;
}







/*=================================================================================*/


 
  /* max-width: 780px */

@media screen and (max-width: 780px) 
{
	
 .topHeader>h1, .topHeader>div{font-size:2.4em;}
 .Header01>div>ul>li>a,.topHeader>ul>li>a {font-size:2em;}
 
  .mbx{ font-size:2rem;}
  .mbx>li{font-size:2rem; margin-right:1em; }
 
   .mbx>li:not(:last-child):after{ content:"/"; font-size:2rem; right:-15px; top:0px;}
 
 
 .ms{ line-height:2.2em; font-size:2.2em;  }
 .citys>li>a{  font-size:2em; }
  .topHeader>div>a{ margin:0 2px; font-size:1.8rem;}
}
    /* max-width: 435px */

@media screen and (max-width: 435px) 
{
	  .mbx li a,.mbx li{font-size:1.7rem;}
 .topHeader>h1, .topHeader>div{font-size:1.8em;}
 .Header01>div>ul>li>a,.topHeader>ul>li>a {font-size:1.6em;}
  .topHeader>div>a{ margin:0 2px; font-size:1.3rem;}
 .ms{   font-size:1.5em;  }

}
   
   
 /* max-width: 415px */

@media screen and (max-width: 415px) 
{
	  .mbx li a,.mbx li{font-size:1.6rem;}
 
 .topHeader>h1, .topHeader>div{font-size:1.8em;}
 .Header01>div>ul>li>a,.topHeader>ul>li>a {font-size:1.6em;}
   .topHeader>div>a{ margin:0 2px; font-size:1.4rem;}
    .citys>li>a{  font-size:1.5em; }
  .topMenu>a{font-size:1.5em;  }
  .xinxi>span{font-size:1.4em; }
 .xinxi>a{  font-size:1.4em;}
.footer>div:nth-child(4)>div:last-child{ font-size:1.5em; } 
.ms{   font-size:1.5em;  }

 .lianxi *{ font-size:1.4em;}
 
 
 
}
/* max-width: 375px */

@media screen and (max-width: 375px) {
   .mbx li a,.mbx li{font-size:1.6rem;}
  .topHeader>div>a{ margin:0 2px; font-size:1.3rem;}
   .citys>li>a{  font-size:1.4em; }
.lianxi>span,.lianxi>a{font-size:1.4em;}
 .topHeader>div:nth-child(2){font-size:1.4em;}
.footer>div:nth-child(4)>div:last-child{ font-size:1.4em; } 
}
  /* max-width: 360px */

@media screen and (max-width: 360px) {
   .citys>li>a{  font-size:1.3em; }
.footer>div:nth-child(4)>div:last-child,.lianxi>span,.lianxi>a{font-size:1.3em;}
 .moreCity li { margin:0 4px;}
  .topHeader>div>a{ margin:0 2px; font-size:1.2rem;}
}
/* max-width: 325px */

@media screen and (max-width: 325px) 
{
	
	
	.topHeader>h1, .topHeader>div{font-size:1.5em;}
 .Header01>div>ul>li>a,.topHeader>ul>li>a {font-size:1.3em;}
 .topHeader>div>a{ margin:0 2px; font-size:1.2rem;}
 .moreCity li { margin:0 2px; font-size:0.8rem;}
  .Header>div>h1{  font-size:0.8rem;}
  .topHeader>div:last-child,.Header>div>div:last-child{ width:15%;}
.lianxi>span,.lianxi>a{font-size:1.2em;}
 .topMenu>a{font-size:1.4em;  }
 
 .xinxi>span{font-size:1.2em; }
 .xinxi>a{  font-size:1.2em;}
.footer>div:nth-child(4)>div:last-child{ font-size:1.0em; } 

  .topHeader>div:nth-child(3) { width:17%; }   
 .mbx{ font-size:1.2rem;}
   .mbx li a,.mbx li{font-size:1.4rem;}
 
   .mbx>li:not(:last-child):after{ content:"/"; font-size:1.4rem; right:-5px; top:0px;}
}
  
  
  
  