/*320px布局*/
html{font-size: 100px;}
body{
	font-size: 0.24px;/*实际相当于24px*/
	background-image: url(../images/weather_bg.png);
	background-size:100%100%;
}
body{
    padding:0;
    margin:0;
        }
 body {
                overflow: hidden;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #background {
				z-index: -999;
                width: 100%;
                height: 100%;
            }
.kx-header {
	top: 0;
	position:fixed;
}
.kx-header { 
	background-color: rgba(255, 255, 255, 0.02);
	}
#background{
	}
.kx-secondary-nav li:hover {
	
	background-color:#f3c325;
	
}.kx-primary-nav-trigger:hover {
  background-color:#f3c325;
  
}
.copyright {
	position: absolute;
	top: 100%;
	margin-top:-30px;
	z-index:40;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 0;
}
.copyright a, .copyright span {
	margin: 0 7px;
	font-size: 12px;
	color:  rgba(255, 255, 255, 0.5);
}
.copyright a:hover{
	color: #FFF;
	}
@media only screen and (min-width: 768px) {
  .kx-header {
	position:fixed;
	top: 0;
    background-color: rgba(255, 255, 255, 0.02);
  }
}
@media only screen and (min-width: 1170px) {
.kx-header {
	position:fixed;
	top: 0px;
	left:0px;
	height: 80px;
	background-color: rgba(255, 255, 255, 0.02);
  }
   .kx-header.is-fixed {
	box-shadow: 0px 1px 5px #307ed2;
	background-color:rgba(243, 195, 37, 0.5);
	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;
  }
  .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(243, 195, 37, 0.5);
  }

}
/*about single*/
#container{
	height: 100%;
	 }
.banner-about {
	height: 100%;
	background-color: #68345a;
	color: #fff;
	text-align: center;
	background-image: url(../images/musicmadman.jpg);
	clear: both;
	background-position: center top;
	 }
.banner-text { 
	 display:inline-block;
	 _display:inline;
	 *zoom:1; 
	 vertical-align: middle;  
	 padding-top:108px;
	 }
.banner-text { 
	width:738px;
	}
.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:auto; 
		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;
		}
}
.bg13{
	z-index: 1;
	position: absolute;
	left: 50%;
	margin-left: -150px;
	margin-top: -50px;
	top: 20%;
	width:300px;
	height:300px;
	-webkit-animation:rotateOut 8s infinite linear ;
	-moz-animation:rotateOut 8s .2s ease both;}
	@-webkit-keyframes rotateOut{
	0%{-webkit-transform:rotate(0);
	opacity:1}
	100%{-webkit-transform:rotate(-360deg);
	opacity:1}
	}
	@-moz-keyframes rotateOut{
	0%{-moz-transform:rotate(0);
	opacity:1}
	100%{-moz-transform:rotate(-360deg);
	opacity:1}
	}
.bg13 img{
	width:300px;
	height:300px;}
.bg12{
	z-index: 1;
	position: absolute;
	left: 50%;
	width:440px;
	height:120px;
	margin-left: -220px;
	margin-top: 50px;
	top:50%;
	-webkit-animation:fadeInDown 2s .2s ease both;
	-moz-animation:fadeInDown 1s .2s ease both;}
	@-webkit-keyframes fadeInDown{
	0%{opacity:0;
	-webkit-transform:translateY(-140px)}
	100%{opacity:1;
	-webkit-transform:translateY(0)}
	}
	@-moz-keyframes fadeInDown{
	0%{opacity:0;
	-moz-transform:translateY(-140px)}
	100%{opacity:1;
	-moz-transform:translateY(0)}
	}
.bg12 img{
	width:440px;
	height:120px;}
.go1{
	z-index: 1;
	position: absolute;
	left: 50%;
	top:50%;
	width: 236px;
	height: 77px;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 4px;
	margin-top: 30px;
	margin-left: -118px;
	-webkit-animation: fadeInUp 2s .2s ease both;
	-moz-animation: fadeInUp 2s .2s ease both;
	margin-top: 180px;
}
	@-webkit-keyframes fadeInUp{
	0%{opacity:0;
	-webkit-transform:translateY(30px)}
	100%{opacity:1;
	-webkit-transform:translateY(0)}
	}
	@-moz-keyframes fadeInUp{
	0%{opacity:0;
	-moz-transform:translateY(30px)}
	100%{opacity:1;
	-moz-transform:translateY(0)}
	}

.go1:hover{
	background-color: #ddd;}
@media only screen and (max-height: 680px){
	.bg13{
	z-index: 1;
	position: absolute;
	left: 50%;
	margin-top: 0px;
	margin-left: -0.25rem;
	top: 20%;
	width:0.5rem;
	height:0.5rem;
	}
.bg13 img{
	width:0.5rem;
	height:0.5rem;}
	
.bg12{
	z-index: 1;
	position: absolute;
	left: 50%;
	top: 20%;
	margin-left: -0.5rem;
	margin-top: 0.55rem;
	width:1rem;
	height:0.25rem;
}
.bg12 img{
	width:1rem;
	height:0.25rem;}
.go1{
	z-index: 1;
	position: absolute;
	left: 50%;
	width: 0.4rem;
	height: 0.1255rem;
	top: 20%;
	margin-left: -0.2rem;
	margin-top: 0.88rem;
}
.go1 img{
	width: 0.4rem;
	height: 0.1225rem;
	}
}
.ad, .ad a, .ad img{
	opacity:0;
	display: none;
	}
	@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)
	{
	#background{
		 opacity:0;
		 display:none;
			}
	.bg13{
		z-index: 1;
		position: absolute;
		left: 50%;
		margin-top: 0.2rem;
		margin-left: -0.8rem;
		top: 12%;
		width:1.6rem;
		height:1.6rem;
		}
	.bg13 img{
		width:1.6rem;
		height:1.6rem;}
		
	.bg12{
		z-index: 1;
		position: absolute;
		left: 50%;
		top: 25%;
		margin-left: -1.2rem;
		margin-top: 1.3rem;
		width:2.4rem;
		height:0.6rem;}
	.bg12 img{
		width:2.4rem;
		height:0.6rem;}
	.go1{
		z-index: 1;
		position: absolute;
		left: 50%;
		width: 1.2rem;
		height: 0.4rem;
		top: 25%;
		margin-left: -0.6rem;
		margin-top: 2.0rem;
	}
	.go1 img{
		width: 1.2rem;
		height: 0.4rem;
		}
	.kx-header {
		position: absolute;
		top: 35px;
	}
	.kx-primary-nav h2 {
		margin-left:0px;
	}
	.ad{
		opacity:1;
		display:block;
		text-align:center;
		top:0px;
		z-index:101;
		display:block;
		position:absolute;
		background:#131313;
		width:3.2rem;
		height:35px;
		}
	.ad a{
		display:block;
		opacity:1;
	}
	.ad img{
		display:block;
		text-align:center;
		opacity:1;
		height:35px;
		width:295px;
		margin:auto;
	}
		}}