.guanbi{
	width:21px;
	position:absolute;
	right:20px;
	cursor:pointer;
	top:20px;
	
	height:21px;
	-webkit-transition:-webkit-transform 0.4s ease-out;-moz-transition: -moz-transform 0.4s ease-out;transition:transform 0.4s ease-out;
	
	}
	
	.guanbi:hover{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);transform:rotate(180deg);}
.container {
	background: #e74c3c;
	min-height: 100%;
}

.md-modal {
	position: fixed;
	top: 50%;
	left: 50%;


	height: auto;
	z-index: 2000;
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.md-show {
	visibility: visible;
}

.md-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 1000;
	opacity: 0;
	background-color: rgba(0,0,0,0.4);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show ~ .md-overlay {
	opacity: 1;
	visibility: visible;
}

/* Content styles */
.md-content {


	width:820px;
	height:580px;
	
	
	position: relative;
	padding:40px;
	background-color:#FFF;
	
	margin: 0 auto;
}



.ziliao{
	width:400px;
	margin-right:40px;
	float:left;}
	
	
	
		.ziliaozong{
			float:left;
			margin-bottom:25px;
		
		
		height:60px;
			display:none;
		float:left;
		border-bottom:#326eb7 solid 4px;
		font-size:36px;
		font-weight:bold;
		color:#326eb7;
		}
	
	
.ziliao2 input,.ziliao2 textarea{
		width:100%;
		height:50px;
		background-color:#f3f3f3;
		margin-top:20px;
		padding:0px 15px 0px 15px;
		outline:none;
		box-sizing:border-box;
		}

.ziliao2 textarea{
	padding-top:18px;
	}

.ziliao1{
	font-size:16px;
	font-weight:bold;float:left;
	}
	
.ziliao2{float:left; width:100%;}
.ziliao2 p{
	display:none;}
.ziliao3{
	width:100%;
	overflow:hidden;
	float:left;
	margin-top:20px;
	
	
	
	}
	
	.ziliao3-1{
		float:left;
		display:inline-block;    
    font-weight: bold;
	padding-left:20px;
		
		
		
		
		}
		
		.ziliao3-2{
			display:inline-block;
			float:left;
			}
			
			.ziliao3-2 input{
				outline:none;}
	
	.ziliao4{
		width:130px;	float:left;
		height:40px;
		border:#326eb7 solid 1px;
		text-align:center;
		margin-top:30px;
			margin-left:20px;
		
		
		}
		
		#tijiao{
			width:100%;
			height:100%;
			outline:none;    font-family: "Microsoft Yahei",Tahoma,Arial,sans-serif;
			border:none;font-size:20px;
			color:#326eb7;
		
		
			background:none;
			cursor:pointer;
			
			
			}
			
				#tijiao:hover{
					color:#fff;
					}
			
			.hvr-bounce-to-right {

  -webkit-transform: translateZ(0);
  overflow:hidden;background-color:#fff;
					
						display:block;
						
  transform: translateZ(0);
color:#fff;
  
  -moz-osx-font-smoothing: grayscale;

  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  
   
}
.hvr-bounce-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
 background: #326eb7;
 
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.hvr-bounce-to-right:hover:before,.hvr-bounce-to-right:focus:before,.hvr-bounce-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}










.jianshao{
	width:380px;
	float:left;
	overflow:hidden;}
	
	
	.jianshao1{
		
		height:60px;
		display:inline-block;
		float:left;
		border-bottom:#326eb7 solid 4px;
		font-size:36px;
		font-weight:bold;
		color:#326eb7;
		}
.jianshao2{
	float:left;
	width:100%;
	margin-top:25px;
	color:#444;
	font-size:28px;

	}

.jianshao3{
	width:100%;
	float:left;
	margin-top:50px;}
	.jianshao4{
		width:100%;
		font-size:16px;
		margin-top:20px;
		line-height:35px;
		float:left;
		overflow:hidden;}
/* Effect 13: 3D slit */
.md-effect-13.md-modal {
	-webkit-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300px;
}

.md-effect-13 .md-content {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translateZ(-3000px) rotateY(90deg);
	-moz-transform: translateZ(-3000px) rotateY(90deg);
	-ms-transform: translateZ(-3000px) rotateY(90deg);
	transform: translateZ(-3000px) rotateY(90deg);
	opacity: 0;
}

.md-show.md-effect-13 .md-content {
	-webkit-animation: slit .7s forwards ease-out;
	-moz-animation: slit .7s forwards ease-out;
	animation: slit .7s forwards ease-out;
}

@-webkit-keyframes slit {
	50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -webkit-animation-timing-function: ease-out;}
	100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; }
}

@-moz-keyframes slit {
	50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -moz-animation-timing-function: ease-out;}
	100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; }
}

@keyframes slit {
	50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;}
	100% { transform: translateZ(0) rotateY(0deg); opacity: 1; }
}


@media screen and (min-width:320px) and (max-width:399px) {
	
	
			.jianshao {
						display:none;}
						.ziliaozong{
							display:inline-block;}
						.ziliao {
							margin-right:0px;width:100%;overflow: hidden;
							float:none;}
							.ziliao4{
								margin-bottom:40px;}
							
							.md-content {
								padding: 20px;
								height: 400px;
								overflow:scroll;
								width:280px;}
}




	@media screen and (min-width: 400px) and (max-width:499px){
		
				.jianshao {
						display:none;}
						.ziliaozong{
							display:inline-block;}
						.ziliao {
							margin-right:0px;width:100%;overflow: hidden;
							float:none;}
							.ziliao4{
								margin-bottom:40px;}
							
							.md-content {
								padding: 0px;
								height: 500px;
								padding:20px;
								overflow:scroll;
								width:320px;}
	}
	
	
	
@media screen and (min-width: 500px) and (max-width:639px){
	
	
			.jianshao {
						display:none;}
						.ziliaozong{
							display:inline-block;}
						.ziliao {
							margin-right:0px;overflow: hidden;
							
							float:none;}
							.ziliao4{
								margin-bottom:40px;}
							
							.md-content {
								padding: 40px;
								height: 400px;
								overflow:scroll;
								width:420px;}
}



		@media screen and (min-width: 640px) and (max-width:767px){
			
						.jianshao {
						display:none;}
						.ziliaozong{
							display:inline-block;}
						.ziliao {
							margin-right:0px;overflow: hidden;
							float:none;}
							.ziliao4{
								margin-bottom:40px;}
							
							.md-content {
								padding: 40px;
								height: 500px;
								overflow:scroll;
								width:400px;}
			
			
		}
		
		
		

@media screen and (min-width: 768px) and (max-width:991px){
	
			 			.jianshao {
						display:none;}
						.ziliaozong{
							display:inline-block;}
						.ziliao {
							margin-right:0px;overflow: hidden;
							float:none;}
							.ziliao4{
								margin-bottom:40px;}
							
							.md-content {
								padding: 40px;
								height: 500px;
								overflow:scroll;
								width:400px;}
}




@media screen and (min-width: 868px) and (max-width:991px){


							 			.jianshao {
						display:none;}
						.ziliaozong{
							display:inline-block;}
						
							
						
						.ziliao {
							margin-right:0px;overflow: hidden;
							float:none;}
							
							.ziliao4{
								margin-bottom:40px;}
							
							.md-content {
								padding: 40px;
								height: 500px;
								overflow:scroll;
								width:400px;}
			}
			
			
		
		@media screen and (min-width: 992px)and (max-width:1199px){}
		
		
			@media screen and (min-width: 1200px)and (max-width:1399px){}
			
			@media screen and (min-width: 1400px)and (max-width:1499px){}
			
			@media screen and (min-width: 1500px)and (max-width:1630px){}
			
						@media screen and (min-width: 1631px){}