/*320px布局*/
html{font-size: 100px;}
body{
	font-size: 0.24px;/*实际相当于24px*/
}
body{
    padding:0;
    margin:0;
        }
.kx-header {
	top: 0;
	position:fixed;
	background-color: rgba(0, 0, 0, 0.00001);
	}
@media only screen and (min-width: 768px) {
  .kx-header {
	position:fixed;
	top: 0;
    background-color: rgba(0, 0, 0, 0.1);
  }
}
@media only screen and (min-width: 1170px) {
.kx-header {
	position:fixed;
	top: 0px;
	left:0px;
	height: 80px;
	background-color: rgba(0, 0, 0, 0.1);
  }
   .kx-header.is-fixed {
	box-shadow: 0px 1px 5px #307ed2;
	background-color: #268ee3;
	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: #268ee3;
  }

}
/*about single*/
.banner-about {
	 height:400px; 
	 background-color:#268ee3; 
	 color:#fff; 
	 text-align:center;
	 }
.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 {
	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 (max-width: 768px){
	.content{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	}
	.content-detail { 
		padding: 0.0385714285714286rem 0.1514285714285714rem;
		}
	.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;
		}
}
#ul_container {
		margin:0px;
		padding:0px;
		position: absolute;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background-size: 100%;
		background-position: top;
		background-color: #f8d88f;
		background-image: url(images/bubbleadventure_bg.jpg);
		background-repeat: no-repeat;
	}
    #ul_container li { position: absolute; list-style: none;
	display:block;}
    .pic-icon {position: absolute;z-index:6;  left:1.1rem;top: 15%; width:1rem;
		-webkit-animation:fadeInDown 2s .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)}
		}
	.pic-icon img{width:1rem;}
    .pic-xiaoniao {position: absolute;z-index:5;left: 20%; top: 10%; width:0.15rem;
		-webkit-animation:bounceInLeft 2s .2s ease both;
		-moz-animation:bounceInLeft 2s .2s ease both;
		}
		@-webkit-keyframes bounceInLeft{
		0%{opacity:0;
		-webkit-transform:translateX(-2000px)}
		60%{opacity:1;
		-webkit-transform:translateX(30px)}
		80%{-webkit-transform:translateX(-10px)}
		100%{-webkit-transform:translateX(0)}
		}
		@-moz-keyframes bounceInLeft{
		0%{opacity:0;
		-moz-transform:translateX(-2000px)}
		60%{opacity:1;
		-moz-transform:translateX(30px)}
		80%{-moz-transform:translateX(-10px)}
		100%{-moz-transform:translateX(0)}
		}
	.pic-xiaoniao img{width:0.15rem;}
    .pic-rainbow {position: absolute;z-index:3;	right:-0.4rem;bottom:-0.2rem;width:1rem;
		-webkit-animation:fadeInUp2 1s .2s ease both;
		-moz-animation:fadeInUp2 1s .2s ease both;}
		@-webkit-keyframes fadeInUp2{
		0%{opacity:0;
		-webkit-transform:translateY(30px)}
		100%{opacity:1;
		-webkit-transform:translateY(0)}
		}
		@-moz-keyframes fadeInUp2{
		0%{opacity:0;
		-moz-transform:translateY(30px)}
		100%{opacity:1;
		-moz-transform:translateY(0)}}
	.pic-rainbow img{width:1rem;}
    .pic-qiqiu {position: absolute;z-index:4;  left: 2.2rem; top: 10%; width:0.8rem;
		-webkit-animation:wobble 1s .2s ease both;
		-moz-animation:wobble 1s .2s ease both;}
		@-webkit-keyframes wobble{
		0%{opacity:0;-webkit-transform:translateX(0%)}
		15%{opacity:1;-webkit-transform:translateX(-25%) rotate(-5deg)}
		30%{-webkit-transform:translateX(20%) rotate(3deg)}
		45%{-webkit-transform:translateX(-15%) rotate(-3deg)}
		60%{-webkit-transform:translateX(10%) rotate(2deg)}
		75%{-webkit-transform:translateX(-5%) rotate(-1deg)}
		100%{-webkit-transform:translateX(0%)}
		}
		@-moz-keyframes wobble{
		0%{opacity:0;-moz-transform:translateX(0%)}
		15%{opacity:1;-moz-transform:translateX(-25%) rotate(-5deg)}
		30%{-moz-transform:translateX(20%) rotate(3deg)}
		45%{-moz-transform:translateX(-15%) rotate(-3deg)}
		60%{-moz-transform:translateX(10%) rotate(2deg)}
		75%{-moz-transform:translateX(-5%) rotate(-1deg)}
		100%{-moz-transform:translateX(0%)}
		}
	.pic-qiqiu img{width:0.8rem;}
    .pic-sky {position: absolute;z-index:2;  left: 0x; top: -0.3rem;width:3.6rem;	left:-0.5rem;}
	.pic-sky img{width:4rem;}
	.pic-up {position: absolute;z-index:1;  left: 0x;bottom:  -0.02rem;width:3.6rem;	left:-0.1rem;		}
	.pic-up img{width:3.6rem;}
	.go1{
		z-index:22; 
		position: absolute;
		left:50%;
		top: 15%;
		margin-top:0.72rem;
		width: 0.5244444444444444rem;
		height: 0.1711111111111111rem;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 4px;
		margin-left:-0.55444rem;
		-webkit-animation:fadeInUp 2s .2s ease both;
		-moz-animation:fadeInUp 2s .2s ease both;}
		@-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)}
		}
	.go2{
		z-index:22; 
		position: absolute;
		left:50%;
		top: 15%;
		margin-top:0.72rem;
		width: 0.5244444444444444rem;
		height: 0.1711111111111111rem;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 4px;
		margin-left:0.03rem;
		-webkit-animation:fadeInUp 2s .2s ease both;
		-moz-animation:fadeInUp 2s .2s ease both;}
		@-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 img, .go2 img{
		width: 0.5244444444444444rem;
		height: 0.1711111111111111rem;
		}
	.go1:hover, .go2:hover{
		background-color: #ddd;}
	.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)
	{
		.pic-icon {position: absolute;z-index:6;  left:0.4rem;top: 10%; width:2.4rem;}
		.pic-icon img{width:2.4rem;}	
		.pic-qiqiu {position: absolute;z-index:4;  left: 0.7rem; top: 20%; width:1.8rem;}
		.pic-qiqiu img{width:1.8rem;}
		.pic-up {position: absolute;z-index:1;  left: 0x;bottom:  -0.02rem;width:3.6rem;	left:-0.1rem;}
		.pic-up img{width:3.6rem;}
		.go1{
			
			z-index:22; 
			position: absolute;
			left:50%;
			top:65%;
			width: 1.048888rem;
			height: 0.3422222rem;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 4px;
			margin-left:-0.5rem;
			margin-top:0.2rem;
			-webkit-animation:fadeInUp 2s .2s ease both;
			-moz-animation:fadeInUp 2s .2s ease both;}
			@-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)}
			}
		.go2{
			margin-top:0.rem;
			z-index:22; 
			position: absolute;
			left:50%;
			top:65%;
			width: 1.048888rem;
			height: 0.3422222rem;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 4px;
			margin-top:-0.3rem;
			margin-left:-0.5rem;
			-webkit-animation:fadeInUp 2s .2s ease both;
			-moz-animation:fadeInUp 2s .2s ease both;}
			@-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 img, .go2 img{
			width: 1.048888rem;
			height: 0.3422222rem;
			}
		.go1:hover, .go2:hover{
			background-color: #ddd;}
		.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:#dcaf49;
			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;
		}
		}
	}