.header{
	-webkit-transform: translateZ(0) translateX(0) rotateY(0deg); /* reset transforms (Chrome bug) */
	transform: translateZ(0) translateX(0) rotateY(0deg);
	transition:all 300ms ease;
	/*overflow:scroll;*/
	overflow-x:hidden;
	opacity:1;
}
.header-clear{height:60px; opacity:0; transition:all 400ms ease;	}
.header-clear .fa-times{
	font-size:18px;
	width:60px;
	height:60px;
	text-align:center;
	line-height:60px;	
}
.animate .header{
	-webkit-transform: translateZ(0) translateX(0) translateY(-60px); /* reset transforms (Chrome bug) */
	transform: translateZ(0) translateX(0) translateY(-60px);
	opacity:0.5;
	transition:all 300ms ease;
}
.animate .header-clear{
	opacity:1;
	transition:all 400ms ease;	
}
@media (min-width:768px){
	.all-elements{
		background-color:#ccc;
	
	}
	
	#perspective{
		width:99%;
		overflow:visible;
		margin-left:0.5%;
	}
		
	.effect-airbnb {
		width:110%;
	}
	
	
	.perspective_container{
		background-color:#FFFFFF;
	}
	
	body{
		background-color:#eee;	
	}
	
}
.nav-item a{
	color:#CCC;
	font-family:"Microsoft YaHei",\5fae\8f6f\96c5\9ed1,arial,\5b8b\4f53;
	font-size:16px;	
	padding-bottom:10px;
	padding-top:10px;
	font-weight:400!important;
	transition:all 400ms ease!important;
}
.nav-item a:hover{
	color:#FFFFFF;	
	transition:all 400ms ease!important;
}
.nav-sub-item{
	padding-left:55px;	
	display:none;
}
.nav-sub-item a{
	font-size:12px;
	padding-bottom:10px;
	padding-top:10px;
	opacity:0.5!important;
}
.nav-icon{
	margin-right:20px;	
	font-size:17px;
	margin-top:2px;

	text-align:center;
	color:white;
}
.nav-icon-selected{
	position:absolute;
	left:0px;
	top:20px;	
	font-size:10px;
	color:#FFFFFF;
}
@media (min-width:768px){
	.nav-item a{
		font-size:16px;
		padding-top:10px;
		padding-bottom:10px;
	}
	
	.nav-sub-item a{
		padding-bottom:15px;
		padding-top:15px;
		font-size:14px;	
	}
	
	.outer-nav{
		top:48%!important;	
	}
}
html, body, .perspective {
	width: 100%;
	height: 100%;
}
.perspective{
	overflow:visible;	
	background: #aaa;
}
.perspective_container {
	background: #fff;
	min-height: 100%;
	position: relative;
	outline: 1px solid rgba(0,0,0,0);
	z-index: 10;
	-webkit-transform: translateZ(0) translateX(0) rotateY(0deg); /* reset transforms (Chrome bug) */
	transform: translateZ(0) translateX(0) rotateY(0deg);
}
.perspective_container::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0px;
	opacity: 0;
	background: rgba(0,0,0,0.2);
	/* the transition delay of the height needs to be synced with the perspective_container transition time */
	-webkit-transition: opacity 0.4s, height 0s 0.4s;
	transition: opacity 0.4s, height 0s 0.4s;
}
.wrapper {
	position: relative;
	/*overflow:scroll;*/
	overflow-x:hidden;
}
.component {
	margin: 0 auto;
	width: 60%;
	text-align: justify;
	font-size: 1.5em;
}
/* Modal view */
.perspective.modalview {
	position: fixed;
	-webkit-perspective: 1500px;
	perspective: 1500px;
}
.modalview .perspective_container {
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 100%;
	cursor: pointer;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.modalview .wrapper {
	-webkit-transform: translateZ(-1px); /* solves a rendering bug in Chrome on Windows */
}
.animate .perspective_container::after {
	opacity: 1;
	height: 101%;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}
/* Outer Nav */
.outer-nav {
	position: absolute;
	height: auto;
	top: 51%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	overflow:scroll;
	overflow-x:hidden;
	width:250px;
	height:90%;
	transition:all 500ms ease;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.outer-nav::-webkit-scrollbar { 
    display: none; 
}
.inner-nav{
	width:280px;
	overflow:hidden;
}
.inner-nav a{
	margin-bottom:0px;
	margin-top:0px;
	padding-left:23%;
	display:block;
	width:100%;
	text-decoration:none;
}
.outer-nav a {
	display: inline-block;
	white-space: nowrap;
	font-weight: 300;
	color: white;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.outer-nav a:hover {
	color: #FFFFFF;
}
.outer-nav a::before {
	display: inline-block;
	font-family:"Microsoft YaHei",\5fae\8f6f\96c5\9ed1,arial,\5b8b\4f53;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	margin-right: 10px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
/* Effect airbnb */
.effect-airbnb {
	/*background-image:url(../ky_img/bgp.png);
	background-size:cover;*/
}
@media (max-width:760px){
	.effect-airbnb .perspective_container {
		-webkit-transition: -webkit-transform 0.4s;
		transition: transform 0.4s;
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
	}
	
	.effect-airbnb.animate .perspective_container {
		-webkit-transform: translateZ(-100px) translateX(65%) rotateY(-45deg);
		transform: translateZ(-100px) translateX(65%) rotateY(-45deg);
	}
}
@media (min-width:761px){
	.effect-airbnb .perspective_container {
		-webkit-transition: -webkit-transform 0.4s;
		transition: transform 0.4s;
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
	}
	
	.effect-airbnb.animate .perspective_container {
		-webkit-transform: translateZ(-100px) translateX(17%) translateY(0%) rotateY(-45deg);
		transform: translateZ(-100px) translateX(17%) translateY(0%) rotateY(-45deg);
	}
	
}
.no-csstransforms3d .effect-airbnb.animate .perspective_container {
	left: 75%;
}
.effect-airbnb .outer-nav a {
	opacity: 0;
	-webkit-transform: translateX(-150px);
	transform: translateX(-150px);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
	transition: transform 0.4s, opacity 0.4s;
}
.effect-airbnb.animate .outer-nav a {
	opacity: 1;
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

/* =============================== */
/* ---- 底部菜单 ------------------ */
/* =============================== */
#menu{
	background-color: white;
	border-top:1px solid #ccc;
	width:100%;
	height:50px;
	position:fixed;
	bottom:0px;
	z-index:998;
	/*overflow: hidden;*/
}
#menu ul{
	margin:0 auto;
	width:100%;
	max-width:800px;
	height:100%;	/* 没有这个，li就不会占位 */
	background-color: #e7e2dd;
}
#menu ul li{
	position:relative;list-style: outside none none;
	cursor:pointer;
	color:#999;
	text-align: center;
	float:left;
	width:33.33%;
	height:100%;
	box-sizing:border-box;
	-moz-box-sizing:border-box;		/* Firefox */
	-webkit-box-sizing:border-box;	/* Safari */
	/*
	content-box（default）、border-box、padding-box,
	content-box：border和padding不计算入width之内
	padding-box：padding计算入width内
	border-box：border和padding计算入width之内，其实就是怪异模式了~
	*/
}

#menu ul li .item-wrap{
	padding-top:3px;
	position: absolute;
	width:100%;
	height:100%;
	z-index: 30;
	background-color: white;
}


/* 菜单文字 */
#menu ul li a b{
	font-size:12px;
	font-weight:normal;
	letter-spacing: 1px;
	margin-top:3px;
	/*color:#999;*/
}

/* 菜单图标 */
#menu ul li .icon {
  width: 25px;
  height: 21px;
  line-height: 21px;
  background-size: 50px auto;
  background-image: url("../images/bottom_nav_icon.png")!important;
  background-repeat:no-repeat;
  display:block;
  margin:0 auto;
  margin-top:3px;
}

#menu ul li .icon-homes {background-position: -0px 0px;}
#menu ul li .icon-information {background-position: -0px -25px;}	/* 消息 */
#menu ul li .icon-message {background-position: -0px -50px;}		/* 互动（回音壁）*/
#menu ul li .icon-book {background-position: -0px -75px;}
#menu ul li .icon-self {background-position: -0px -50px;}

#menu .active .icon-homes {background-position: -25px 0px;}
#menu .active .icon-information {background-position: -25px -25px;}	/* 消息 */
#menu .active .icon-message {background-position: -25px -50px;}		/* 互动（回音壁）*/
#menu .active .icon-book {background-position: -25px -75px;}
#menu .active .icon-self {background-position: -25px -50px;}

#menu .active{color:#5c668e!important;}

/* ==== 鼠标移入 ==== */
/*#menu ul li:hover .icon-home {background-position: -25px 0px;}
#menu ul li:hover .icon-information {background-position: -25px -25px;}
#menu ul li:hover .icon-message {background-position: -25px -50px;}
#menu ul li:hover .icon-book {background-position: -25px -75px;}
#menu ul li:hover .icon-self {background-position: -25px -100px;}

#menu ul li:hover{color:#e62f17;}*/

#menu ul li .sub-menu-wrap{
	position:absolute;
	left:50%;
	margin-left:-60px;
	border:1px solid #d0d0d0;
	width:100px;
	padding:0px 10px;
	height:auto;
	z-index:10;
	bottom:-300px;
	background-color: #FFF;
	border-radius:3px;
}

#menu ul li .sub-menu-wrap a{
	float:left;
	width:100%;
	height:40px;
	line-height:40px;
	color:#454545;
	border-bottom: 1px solid #d0d0d0;
}

#menu ul li .sub-menu-wrap a:last-child{
	border-bottom: 1px solid #fff;
}

.sub-menu-wrap .arrow{
	position:absolute;
	width:100%;
	height:12px;
	border:0px solid red;
	left:0px;
	bottom:-6px;
}
 
/*导航*/
.mynav{padding: 5px; font-size: 15px;}
.mynav .row{height: 7em; margin-bottom: 5px; display: box;display: -webkit-box; -webkit-box-orient:horizontal;box-orient:horizontal;}
.mynav .row .col{-webkit-box-flex:1;box-flex:1; box-sizing: border-box;height: 100%;border-left: 1px solid #fff; width: 33.3333%; float:left ;}
.mynav .row .col>a{display: block;position: relative; width: 100%; height: 50%; color: #fff; font-size: 1em; border-bottom: 1px solid #fff; text-align: center; line-height: 3.5em; text-shadow: 2px 2px 3px rgba(0,0,0,.3); overflow: hidden; box-sizing: border-box;}
.mynav .row .col:nth-child(1)>a{ border-top-left-radius: 5px; border-bottom-left-radius: 5px; height: 50%;}
.mynav .row:nth-child(1) .col:nth-child(1)>a:nth-child(1){border-bottom-left-radius: 0px;}
.mynav .row:nth-child(1) .col:nth-child(1)>a:nth-child(2){border-top-left-radius: 0px;}
.mynav .row:nth-child(2) .col:nth-child(1)>a:nth-child(1){border-bottom-left-radius: 0px;}
.mynav .row:nth-child(2) .col:nth-child(1)>a:nth-child(2){border-top-left-radius: 0px;}

.mynav .row:nth-child(3) .col:nth-child(1)>a{height: 50%;}
.mynav .row:nth-child(3) .col:nth-child(1)>a:nth-child(1){border-bottom-left-radius: 0px;}
.mynav .row:nth-child(3) .col:nth-child(1)>a:nth-child(2){border-top-left-radius: 0px;}
.mynav .row .col:last-child>a:nth-child(1){border-top-right-radius: 5px;}
.mynav .row .col:last-child>a:nth-child(2){border-bottom-right-radius: 5px;}
/*.mynav .row .col:nth-child(1)>a:nth-child(1):after{content: "";position: absolute;bottom: 1em;  left: 50%; background: url(../images/un_ico_home_v66.png) no-repeat;background-size: 104px 328px;}*/
.mynav .row:nth-child(1) .col>a{background-color: #01B468;}
.mynav .row:nth-child(2) .col>a{background-color: #6bbe48;}
.mynav .row:nth-child(3) .col>a{background-color: #ff7575;}
.mynav .row:nth-child(4) .col>a{background-color: #2e75e7;}
.mynav .row:nth-child(1) .col:nth-child(1)>a:nth-child(1):after{margin-left: -20px;width: 40px;height: 33px; background-position: 0 -130px; }
.mynav .row:nth-child(2) .col:nth-child(1)>a:nth-child(1):after{margin-left: -21px;width: 42px;height: 24px; background-position: -50px -122px; }
/*.mynav .row:nth-child(3) .col:nth-child(1)>a:nth-child(1):after{margin-left: -17px;width: 34px;height: 41px; background-position: -1px -181px; }*/
 
 li{list-style: outside none none;}
.head{ position:relative; width:100%; height:100px; margin-top:0;background-image: linear-gradient(to bottom, #adebcb 0%, #5fd9cb 100%);}
.head-img{ position:absolute; top:10px; left:10px; width:80px; height:80px; padding:0.04rem; border-radius:50px; background-color:#fff;}
.head-img img{ width:80px; height:80px;}
.head-dsb{ position:absolute; top:25px; left:120px;}
.head-dsb p{ font-size:17px; color:#fff; margin-bottom:0px;line-height: 20px;}
.dsb-id{ margin-top:10px;}

a{color:#000; border:0px; text-decoration: none;}
.ding{ width:100%; background:#f77722; height:40px;}
.huiyuan{width:60%;  text-align:center; height:40px; line-height:40px; color:#FFF; font-size:15px;}
.xia{ width:20%;  height:40px; line-height:40px; text-align:center;}
.huiyuanka{ width:100%; text-align:center; margin:10px auto;}
.chushi{width:100%; text-align:center; margin:10px auto; color:#333; font-size:15px;}
.kuang{margin:10px 10px ; border:#ccc 1px solid; height:auto; border-radius:5px; background:#f5f5f5;}
.kuang_1{margin:10px 10px; border:#ccc 1px solid; height:auto; border-radius:5px; background:#f5f5f5;}
.kuang_2{ margin:10px 10px; border:#ccc 1px solid; height:auto; border-radius:5px; background:#f5f5f5;}
.yue{ width:100%; height:50px; line-height:50px; margin:0px auto;background-color: white;}
.jifen{ width:100%; height:50px; line-height:50px; margin:0px auto;}

.tubiao{ width:20%; float:left; margin-top:5px; margin-left:10px; }
.yueyue{ width:35%; float:left; font-size:12px; }
.jiantou{ width:15%; float:right; margin-top:2px; }

.yue_1{width:45%; float:left; font-size:15px; margin-left:10px;}
.yue_11{width:40%; float:left; font-size:15px; margin-left:10px;}

.yue_2{width:30%; float:left; font-size:15px; margin-left:15px; color:#999;}
.yue_22{width:15%; float:left; font-size:15px; margin-left:15px; color:#090;}
.yue_222{width:15%; float:left; font-size:15px; margin-left:15px; color:#F00;}
.yue_2222{width:50%; float:left; font-size:15px; margin-left:15px; color:#090;}
.active{color:#5c668e!important;}
.jiantou i{ color:#ccc; font-size:28px; margin-top:0;}


div.search {padding: 0px 0;    margin-top: 10px;margin-bottom: 10px;}
.d7 input {
  width: 100%;
  height: 42px;
  padding-left: 15px;
  border-radius: 5px;
  border: 1px solid #eee;
  background:white;
  outline: none;
  position: relative;
 
}

.d7 button {
  width: 42px;
  height: 42px;
  background: none;
border: none;
  position: absolute;
  top: -2px;
  right: 0;
}
.d7 button:before{
  content: "\f002";
  font-family: FontAwesome;
  color: #324b4e;
}