/*320px布局*/
html{font-size: 100px;}
body{
	font-size: 0.24px;/*实际相当于24px*/
}
body{
    padding:0;
    margin:0;
        }
.kx-header {
	top: 0;
	position:fixed;
}
.kx-header.is-fixed {
	background-color: rgba(120, 120, 120, 0.9);
	}
.kx-header { 
	background-color: rgba(0, 0, 0, 0.02);
	}
	 
@media only screen and (min-width: 768px) {
  .kx-header {
	position:fixed;
	top: 0;
    background-color: rgba(0, 0, 0, 0.02);
  }
   .kx-header.menu-is-open {
	box-shadow: 0px 0px 0px #999;
	position:fixed;
    /* add a background color to the header when the navigation is open */
	background-color: rgba(120, 133, 141, 0.3);
  }
}
@media only screen and (min-width: 1170px) {
.kx-header {
	-webkit-transition: background-color 1s;
	-moz-transition: background-color 1s;
	transition: background-color 1s;
	position:fixed;
	top: 0px;
	left:0px;
	height: 80px;
	background-color: rgba(0, 0, 0, 0.02);
  }
   .kx-header.is-fixed {
	box-shadow: 0px 1px 5px #666;
	position:fixed;
	top: 0px;
	left:0px; 
    /* when the user scrolls down, we hide the header right above the viewport */
  }
   .kx-header.is-visible {
	box-shadow: 0px 0px 0px #999;
	/* if the user changes the scrolling direction, we show the header */
	-webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
	position:fixed;
	top: 0px;
  }

}
/*about single*/
#container{
	height: 100%;
	 }
.banner-about {
	height: 100%;
	background-color: #78858d;
	text-align: center;
	background-image: url(../images/photogrid_bg.jpg);
	clear: both;
	background-position: 100% 100%;
	background-repeat: repeat;
	 }
.banner-text { 
	
	 display:inline-block;
	 _display:inline;
	 *zoom:1; 
	 vertical-align: middle;  
	 padding-top:108px;
	 }

.banner-text h1 { 
	font-size:60px; 
	font-weight:normal;
	}
.banner-text p { 
	padding:0 30px;
	line-height: 1.5em;
	font-size:20px;
	}
.about{
	margin:0px auto;
	width:100%;
	height: 100%;
	clear: both;
	}
.content{
	width:100%;
}
.content-detail{
	padding: 0.0685714285714286rem 0.2714285714285714rem;
	}
.detail-text  p, .detail-text {
	margin: 0 0 20px;
	color: #777;
	letter-spacing: 0.25px;
	font-size: 16px;
	line-height: 2em;
	font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: lighter;
}
.copyright {
	left: 0;
	bottom: 20px;
	width: 100%;
	text-align: center;
	font-size: 0;
}
.copyright a, .copyright span {
	margin: 0 7px;
	font-size: 12px;
	color: #a0a0a0;
}
@media only screen and (max-width: 768px){
	.content{
		width: 100%;
	}
	.content-detail {
	padding-top: 0.0385714285714286;
	padding-right: rem;
	padding-bottom: 0.151429px;
	padding-left: rem;
		}
	.banner-about {
		height: 100%;
		padding: 110px 0;
		}
	.banner-text{ 
		width:100%; 
		padding:0; 
		margin:0!important;
		}
	.banner-text h1 { 
		font-size:40px;
		}
	.banner-text p {
		font-size:18px; 
		padding:0 20px;
		}
}
@media only screen and (min-width: 768px) {
  
  .kx-secondary-nav li:hover {
	background-color: rgba(0, 0, 0, 0.16);
}
 .kx-primary-nav-trigger:hover {
	background-color: rgba(0, 0, 0, 0.16);}
} 

.he_3DFlipX{display:block;width:360px;height:240px;overflow:hidden;padding:0;margin:0;border:0;position:relative;box-sizing:border-box;-webkit-perspective:1700px;-moz-perspective:1700px;perspective:1700px;-webkit-perspective-origin:50% 50%;-moz-perspective-origin:50% 50%;perspective-origin:50% 50%}
.he_3DFlipX_inner{width:100%;height:100%;padding:0;margin:0;position:relative;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d}
.he_3DFlipX_inner div.he_3DFlipX_caption{position:absolute;top:0;left:0;padding:0;color:#fff;padding:0;margin:0;background:#fe7253;background-color:#fe7253;height:100%;width:100%;backface-visibility:hidden;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;transition:all .5s ease-in-out}
.he_3DFlipX_inner:hover > div.he_3DFlipX_caption{-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);transform:rotateX(180deg)}
.he_3DFlipX_inner > div h3,div p{max-width:100%;padding:0;margin:0;display:block;position:relative}
.he_3DFlipX_img{opacity:0;text-align:center;backface-visibility:hidden;-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);transform:rotateX(-180deg);-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;transition:all .5s ease-in-out}
.he_3DFlipX_inner:hover .he_3DFlipX_img{opacity:1;-webkit-transform:rotateX(0);-moz-transform:rotateX(0);transform:rotateX(0)}
.he_3DFlipX_caption h3{font-size:1.3em;font-weight:700;text-align:center;width:100%;position:absolute;top:25%;left:5px;margin:0;padding:0;color:#fff}
.he_3DFlipX_caption p{font-size:1em;text-align:center;width:100%;position:absolute;top:45%;left:5px;margin:0;padding:0;color:#fff}
.he_3DFlipX a{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;margin:0}
.he_3DFlipX_inner div#he_3DFlipX_caption1{
background::#333;background-color:#e51c23;}
.he_3DFlipX_inner div#he_3DFlipX_caption2{
background::#333;background-color:#e91e63;}
.he_3DFlipX_inner div#he_3DFlipX_caption3{
background::#333;background-color:#9c27b0;}



.he_3DFlipY{display:block;width:360px;height:240px;overflow:hidden;padding:0;margin:0;border:0;position:relative;box-sizing:border-box;cursor:pointer;-webkit-perspective:1700px;-moz-perspective:1700px;perspective:1700px;-webkit-perspective-origin:50% 50%;-moz-perspective-origin:50% 50%;perspective-origin:50% 50%}
.he_3DFlipY_inner{width:100%;height:100%;padding:0;margin:0;position:relative;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d}
.he_3DFlipY_inner > div.he_3DFlipY_caption{position:absolute;top:0;left:0;padding:0;padding:0;margin:0;background:#fe7253;color:#fff;height:100%;width:100%;backface-visibility:hidden;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;transition:all .5s ease-in-out}
.he_3DFlipY_inner:hover > div.he_3DFlipY_caption{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);transform:rotateY(180deg)}
.he_3DFlipY_inner > div h3,div p{max-width:100%;padding:0;margin:0;display:block;position:relative}
.he_3DFlipY_img{opacity:0;background-color:#fe7253;text-align:center;backface-visibility:hidden;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);transform:rotateY(-180deg);-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;transition:all .5s ease-in-out}
.he_3DFlipY_inner:hover .he_3DFlipY_img{opacity:1;-webkit-transform:rotateY(0);-moz-transform:rotateY(0);transform:rotateY(0)}
.he_3DFlipY_caption h3{font-size:1.3em;font-weight:700;text-align:center;width:100%;position:absolute;top:25%;left:5px;margin:0;padding:0;color:#fff}
.he_3DFlipY_caption p{font-size:1em;text-align:center;width:100%;position:absolute;top:45%;left:5px;margin:0;padding:0;color:#fff}
.he_3DFlipY a{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;margin:0}
.he_3DFlipY_inner > div#he_3DFlipY_caption4{
background::#333;background-color:#673ab7;}
.he_3DFlipY_inner > div#he_3DFlipY_caption5{
background::#333;background-color:#3f51b5;}
.he_3DFlipY_inner > div#he_3DFlipY_caption6{
background::#333;background-color:#5677fc;}
.he_3DFlipX_inner div#he_3DFlipX_caption7{
background::#333;background-color:#009688;}
.he_3DFlipX_inner div#he_3DFlipX_caption8{
background::#333;background-color:#259b24;}
.he_3DFlipX_inner div#he_3DFlipX_caption9{
background::#333;background-color:#ff9800;}


/*.bg11, .bg12, .bg13 { padding-top: 350px; font-size: 16px; color: #fff;}*/
	
	.bg12 {
		position: absolute;
		left: 0.4rem;
		bottom: 48%;
		box-sizing:border-box;
		-webkit-animation:fadeInDown 1s .3s ease both;
		-moz-animation:fadeInDown 1s .3s ease both;}
	@-webkit-keyframes fadeInDown{
		0%{opacity:0;
		-webkit-transform:translateY(-10px)}
		100%{opacity:1;
		-webkit-transform:translateY(0)}
	}
	@-moz-keyframes fadeInDown{
		0%{opacity:0;
		-moz-transform:translateY(-10px)}
		100%{opacity:1;
		-moz-transform:translateY(0)}
	}
	.bg12 img{
		width:1.3rem;
	}
	.bg13 {
		position: absolute;
		left: 64%;
		bottom: -0.5%;
		opacity: 0;
		transition: all 1s;
		height: auto;
		box-sizing:border-box;
		-webkit-animation:fadeInDown 1s .2s ease both;
		-moz-animation:fadeInDown 1s .2s ease both;}
	@-webkit-keyframes fadeInDown{
	0%{opacity:0;
	-webkit-transform:translateY(-40px)}
	100%{opacity:1;
	-webkit-transform:translateY(0)}
	}
	@-moz-keyframes fadeInDown{
	0%{opacity:0;
	-moz-transform:translateY(-40px)}
	100%{opacity:1;
	-moz-transform:translateY(0)}
	}
	.bg13 img{
		width: 0.8rem;}
	
	.bg11 { position: absolute; bottom: 48%; left:0px; width: 0.6rem;
		height: 0.2rem;   opacity: 0; transition: all 1s;
		-webkit-animation:fadeInUp 1s .2s ease both;
	-moz-animation:fadeInUp 1s .2s ease both;}
	@-webkit-keyframes fadeInUp{
	0%{opacity:0;
	-webkit-transform:translateY(40px)}
	100%{opacity:1;
	-webkit-transform:translateY(0)}
	}
	@-moz-keyframes fadeInUp{
	0%{opacity:0;
	-moz-transform:translateY(40px)}
	100%{opacity:1;
	-moz-transform:translateY(0)}
	}
	.go1 {
	position: absolute;
	left: 0.85rem;
	width: 0.6rem;
	height: 0.2rem;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 4px;
	margin-top: 0.23rem;
	}
	.go1 img{
		 width: 0.6rem;
		height: 0.2rem;
	}
	.go1 img:hover {
		width: 0.6rem;
		height: 0.2rem;
		background-color: #ddd;
		border-radius:4px;
	}
	.demo{width:360px; margin:20px auto 10px auto;}
	.box{float:left; width:420; height:260px;}
	.clear{clear:both}
	
	@media only screen and (min-width: 768px) {
		.demo{width:768px; margin:0px auto 10px auto;}
		.box{float:left; width:380px; height:260px;}
		.content-detail{
				padding: 0.1085714285714286rem 0rem;
				}
	}
	@media only screen and (min-width: 1200px) {
		.demo{width:1170px; margin:30px auto 10px auto;}
		.box{float:left; width:380px; height:260px;}
		
		.content-detail{
				padding: 0.0685714285714286rem 0rem;
				}
	}
	
	@media only screen and (min-width: 1300px) {
		.demo{width:1170px; margin:0px auto 10px auto;}
		.box{float:left; width:380px; height:260px;}
	}
	
	
	
	
	/*适配768分辨率以下，针对安卓，魅族，mate7,4 4s,5 5s,6,6
only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2), only screen and (device-height:568px) and (-webkit-min-device-pixel-ratio:2),  only screen and (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2), only screen and (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio: 3),  only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5),
*/
@media all and (orientation : portrait){  
	@media only screen and (max-width: 768px), only screen and (width: 1080px),only screen and (device-height: 480px) and (-webkit-device-pixel-ratio: 2), only screen and (device-height: 568px) and (-webkit-min-device-pixel-ratio:2),  only screen and (min-device-width : 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width : 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3),  only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-width: 1080px) and (-webkit-min-device-pixel-ratio: 2.5), only screen and (min-device-width: 1080px) and (-webkit-min-device-pixel-ratio: 3)
	{
		.demo{width:360px; margin:20px auto 10px auto;}
		.box{float:left; width:420; height:260px;}
		.clear{clear:both}
		.content-detail{
				padding: 0.00685714285714286rem 0rem;
				}
		.banner-about {
			height: 125%;
			color: #fff;
			text-align: center;
			background-image: url(../images/photogrid_bg.jpg);
			clear: both;
			background-position: 100% 100%;
		 }
		 .bg12 {
			position: absolute;
			left:13%;
			margin-right: 1.2rem;
			bottom: 70%;
			box-sizing:border-box;
			-webkit-animation:fadeInDown 1s .2s ease both;
			-moz-animation:fadeInDown 1s .2s ease both;}
			@-webkit-keyframes fadeInDown{
			0%{opacity:0;
			-webkit-transform:translateY(-40px)}
			100%{opacity:1;
			-webkit-transform:translateY(0)}
			}
			@-moz-keyframes fadeInDown{
			0%{opacity:0;
			-moz-transform:translateY(-40px)}
			100%{opacity:1;
			-moz-transform:translateY(0)}
			}
		 .bg12 img{
			width:2.4rem;
		 
		}
		.bg11{
			bottom: 70%;
			}
		.go1 {
			position: absolute;
			left: 1.6rem;
			width:1.2rem;	
 			height:0.4rem;
			margin-top:0.3rem;
			margin-left: -0.6rem;
			box-sizing:border-box;
			box-sizing:border-box;
			-webkit-animation:fadeInDown 1s .2s ease both;
			-moz-animation:fadeInDown 1s .2s ease both;}
		@-webkit-keyframes fadeInDown{
		0%{opacity:0;
		-webkit-transform:translateY(-40px)}
		100%{opacity:1;
		-webkit-transform:translateY(0)}
		}
		@-moz-keyframes fadeInDown{
		0%{opacity:0;
		-moz-transform:translateY(-40px)}
		100%{opacity:1;
		-moz-transform:translateY(0)}
		}
		.go1 img{
			width:1.2rem;	
			height:0.4rem
		}
		.go1 img:hover {
			width:1.2rem;	
			height:0.4rem;
			border-radius:4px;
		}
		
		.bg13 img{
			width: 2rem;}
		.bg13 {
			bottom: -27%;
			box-sizing:border-box;	
			margin-left: -1rem; 
			left: 50%;
			-webkit-animation:fadeInUp 1s .2s ease both;
			-moz-animation:fadeInUp 1s .2s ease both;}
			@-webkit-keyframes fadeInUp{
			0%{opacity:0;
			-webkit-transform:translateY(120px)}
			100%{opacity:1;
			-webkit-transform:translateY(0)}
			}
			@-moz-keyframes fadeInUp{
			0%{opacity:0;
			-moz-transform:translateY(120px)}
			100%{opacity:1;
			-moz-transform:translateY(0)}
			}
			
	}