@charset "utf-8";
/* CSS reset */
.ui-mark{ width:100%; height:100%; background-color:#000; position:fixed;  _position:absolute; top:50px; left:84%; z-index:9; opacity:0.5;}
.name-mark{position:absolute;width:100%;height:60px;bottom:0;left:0;background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,0)),to(#000));background-image:-moz-linear-gradient(top,rgba(255,255,255,0),#000);background-image:-ms-linear-gradient(top,rgba(255,255,255,0),#000);background-image:linear-gradient(to bottom,rgba(255,255,255,0),#000);filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00000000', endColorstr='#FF000000');-ms-filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00000000', endColorstr='#FF000000');}

.wrapper{ left:0%;}
.M-left-close{ display:none;}

@media (max-width: 1024px) {
	/**********导航条由左侧滑动************/
	body>.ui-header .mb-nav-open{ left:0%; top:0; z-index:1001; -webkit-transition:left ease-in-out 0.25s; -moz-transition:left ease-in-out 0.25s; -o-transition:left ease-in-out 0.25s; -ms-transition:left ease-in-out 0.25s transition:left ease-in-out 0.25s; /*-webkit-animation:WrapperMoveLeft 0.5s ease-in-out;*/}
body> .ui-header .mb-nav-close{left:-100%; -webkit-transition:left ease-in-out 0.25s; -moz-transition:left ease-in-out 0.25s; -o-transition:left ease-in-out 0.25s; -ms-transition:left ease-in-out 0.25s transition:left ease-in-out 0.25s; /*-webkit-animation:WrapperMoveLeft 0.5s ease-in-out;*/}
	/******由左侧滑动*******/
	.M-left-open-wrap{ position:fixed; width:100%; height:100%; overflow-y:auto; background-color:#fff; top:0; left:-100%; z-index:102; opacity:1; display:block; -webkit-overflow-scrolling: touch;}
	.M-left-close{ margin:20px auto; width:96%; display:block;}
	.M-left-close a{ width:100%; text-align:center;}
	.Left-To-Right-Open{left:0%!important; -webkit-transition:left ease-in-out 0.25s; -moz-transition:left ease-in-out 0.25s; -o-transition:left ease-in-out 0.25s; -ms-transition:left ease-in-out 0.25s transition:left ease-in-out 0.25s; /*-webkit-animation:WrapperMoveLeft 0.5s ease-in-out;*/}
	.Left-To-Right-Close{ left:-100%; top:0; z-index:1001; -webkit-transition:left ease-in-out 0.25s; -moz-transition:left ease-in-out 0.25s; -o-transition:left ease-in-out 0.25s; -ms-transition:left ease-in-out 0.25s transition:left ease-in-out 0.25s; /*-webkit-animation:WrapperMoveLeft 0.5s ease-in-out;*/}
}



/************css3 animate**************************/

/*放大1.2倍并且顺时针2度*/
.move-scale-a *,.move-scale-a{ -webkit-transition:all 0.5s ease-in; -o-transition:all 0.5s ease-in; -moz-transition:all 0.5s ease-in; -ms-transition:all 0.5s ease-in; transition:all 0.5s ease-in;}
.move-scale-a:hover *,.move-scale-a:hover{ -webkit-transform:scale(1.2) rotate(2deg); -o-transform:scale(1.2) rotate(2deg); -moz-transform:scale(1.2) rotate(2deg); -ms-transform:scale(1.2) rotate(2deg); transform:scale(1.2) rotate(2deg);}

/*放大1.1倍*/
.move-scale-b *,.move-scale-b{-webkit-transition:all 0.5s ease-in; -o-transition:all 0.5s ease-in; -moz-transition:all 0.5s ease-in; -ms-transition:all 0.5s ease-in; transition:all 0.5s ease-in;}
.move-scale-b:hover *,.move-scale-b:hover{ -webkit-transform:scale(1.1, 1.1);-o-transform:scale(1.1, 1.1);-ms-transform:scale(1.1, 1.1);-moz-transform:scale(1.1, 1.1);transform:scale(1.1, 1.1);}

/*放大1.15倍*/
.move-scale-c *,.move-scale-c {
	box-shadow: 0 2px 4px rgba(0,0,0,.1);
	transition-property: transform, box-shadow, -webkit-filter;
	transition-duration: .35s;
	transition-timing-function: ease
}
.move-scale-c:hover *,.move-scale-c:hover {
	transform: scale(1.15);
	box-shadow: 0 20px 35px rgba(0,0,0,.2);
	transition-duration: .25s
}

/*360旋转*/
.rotate360{ /* 1st set of icons. Rotate them 360deg onmouseover and out */ 
-moz-transition: all 0.8s ease-in-out; 
-webkit-transition: all 0.8s ease-in-out; 
-o-transition: all 0.8s ease-in-out; 
-ms-transition: all 0.8s ease-in-out; 
transition: all 0.8s ease-in-out; 
}
.rotate360:hover{ /* 1st set of icons. Rotate them 360deg onmouseover and out */ 
-moz-transform: rotate(360deg); 
-webkit-transform: rotate(360deg); 
-o-transform: rotate(360deg); 
-ms-transform: rotate(360deg); 
transform: rotate(360deg);  

}
/*下划线动画*/
.underline {display: block; display:none\0; *display:none; position: relative; padding: 0; width: 100%; height: 1px; bottom: 35%; right: 0; background-color: #f63f3f; -webkit-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; -webkit-transform: scaleX(0); transform: scaleX(0); }
a:hover .underline {-webkit-transform: scaleX(1);transform: scaleX(1);}



/*******************************css3 Animation 动画*************************88*/
.rotate-Y:hover{ 
	-webkit-animation:rotateMoveY 1s ease-in 1;
	-o-animation:rotateMoveY 1s ease-in 1;
	-moz-animation:rotateMoveY 1s ease-in 1; 
	-ms-animation:rotateMoveY 1s ease-in 1;
	cursor:help;
}


.scale-b {
	-webkit-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
	-o-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
	-moz-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
	-ms-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.scale-b:hover {
	-webkit-transform: scale(1.1, 1.1);
	transform: scale(1.1, 1.1)
}
.rotatemoveX{}
.rotatemoveX:hover{
	display:block;
	-webkit-animation:rotateMoveX 1s linear 1;
	-moz-animation:rotateMoveX 1s linear 1;
	-o-animation:rotateMoveX 1s linear 1;
	-ms-animation:rotateMoveX 1s linear 1;
	animation:rotateMoveX 1s linear 1;
}

.fade-in,.fade-in:hover{
	display:block;
	-webkit-animation:fade-in 1s ease 1;
	-moz-animation:fade-in 1s ease 1;
	-o-animation:fade-in 1s ease 1;
	-ms-animation:fade-in 1s ease 1;
	animation:fade-in 1s ease 1;
}

.fade-out,.fade-out:hover{
	display:block;
	-webkit-animation:fade-out 1s ease 1;
	-moz-animation:fade-out 1s ease 1;
	-o-animation:fade-out 1s ease 1;
	-ms-animation:fade-out 1s ease 1;
	animation:fade-in out ease 1;
}
.fade-in-out,.fade-in-out:hover{
	display:block;
	-webkit-animation:fade-in-out 1s ease 1;
	-moz-animation:fade-in-out 1s ease 1;
	-o-animation:fade-in-out 1s ease 1;
	-ms-animation:fade-in-out 1s ease 1;
	animation:fade-in-out out ease 1;
}

.fade-in-down,.fade-in-down:hover{
	display:block;
	-webkit-animation:fade-in-down 1s ease 1;
	-moz-animation:fade-in-down 1s ease 1;
	-o-animation:fade-in-down 1s ease 1;
	-ms-animation:fade-in-down 1s ease 1;
	animation:fade-in-out down ease 1;
}
.fade-in-up,.fade-in-up:hover{
	display:block;
	-webkit-animation:fade-in-up 1s ease 1;
	-moz-animation:fade-in-up 1s ease 1;
	-o-animation:fade-in-up 1s ease 1;
	-ms-animation:fade-in-up 1s ease 1;
	animation:fade-in-out up ease 1;
}

.swing{
	-webkit-animation:swinging 10s ease-in-out 0s infinite;
	-moz-animation:swinging 10s ease-in-out 0s infinite;
	animation:swinging 10s ease-in-out 0s infinite;
	-webkit-transform-origin:50% 0;
	-moz-transform-origin:50% 0;
	transform-origin:50% 0;
}
.scale-a{ -webkit-animation:scaleAmove 0.5s ease-in-out 1; -moz-animation:scaleAmove 0.5s ease-in-out 1; -o-animation:scaleAmove 0.5s ease-in-out 1; -ms-animation:scaleAmove 0.5s ease-in-out 1; animation:scaleAmove 0.5s ease-in-out 1;}
/*rotate*/
@-webkit-keyframes rotateMoveX{
	0%{ transform:perspective(0px) rotatey(0px)}
	40%{ transform:perspective(300px) rotateX(25deg) scale(1.1);}
}
@-moz-keyframes rotateMoveX{
	0%{ transform:perspective(0px) rotatey(0px)}
	40%{ transform:perspective(300px) rotateX(25deg) scale(1.1);}
}
@-o-keyframes rotateMoveX{
	0%{ transform:perspective(0px) rotatey(0px)}
	40%{ transform:perspective(300px) rotateX(25deg) scale(1.1);}
}
@-ms-keyframes rotateMoveX{
	0%{ transform:perspective(0px) rotatey(0px)}
	40%{ transform:perspective(300px) rotateX(25deg) scale(1.1);}
}
@keyframes rotateMoveX{
	0%{ transform:perspective(0px) rotatey(0px)}
	40%{ transform:perspective(300px) rotateX(25deg) scale(1.1);}
}



@-webkit-keyframes fade-in {
	0% {
	display:none;
	opacity:0
	}
	1% {
	display:block;
	opacity:0
	}
	100% {
	display:block;
	opacity:1
	}
}
@-ms-keyframes fade-in {
	0% {
	display:none;
	opacity:0
	}
	1% {
	display:block;
	opacity:0
	}
	100% {
	display:block;
	opacity:1
	}
}
@keyframes fade-in {
	0% {
	display:none;
	opacity:0
	}
	1% {
	display:block;
	opacity:0
	}
	100% {
	display:block;
	opacity:1
	}
}

@-webkit-keyframes fade-out {
	0% {
	display:block;
	opacity:1
	}
	99% {
	display:block;
	opacity:0
	}
	100% {
	display:none;
	opacity:1
	}
}
@-ms-keyframes fade-out {
	0% {
	display:block;
	opacity:1
	}
	99% {
	display:block;
	opacity:0
	}
	100% {
	display:none;
	opacity:1
	}
}
@keyframes fade-out {
	0% {
	display:block;
	opacity:1
	}
	99% {
	display:block;
	opacity:0
	}
	100% {
	display:none;
	opacity:1
	}
}

@-webkit-keyframes fade-in-out {
	0% {
	opacity:0
	}
	50% {
	opacity:1
	}
	100% {
	opacity:0
	}
}
@-ms-keyframes fade-in-out {
	0% {
	opacity:0
	}
	50% {
	opacity:1
	}
	100% {
	opacity:0
	}
}
@keyframes fade-in-out {
	0% {
	opacity:0
	}
	50% {
	opacity:1
	}
	100% {
	opacity:0
	}
}
@-webkit-keyframes fade-in-down {
	0% {
	opacity:0;
	-webkit-transform:translate3d(0, -50%, 0);
	transform:translate3d(0, -50%, 0)
	}
	100% {
	opacity:1;
	-webkit-transform:none;
	transform:none
	}
}
@-ms-keyframes fade-in-down {
	0% {
	opacity:0;
	transform:translate3d(0, -50%, 0)
	}
	100% {
	opacity:1;
	-ms-transform:none;
	transform:none
	}
}
@keyframes fade-in-down {
	0% {
	opacity:0;
	-webkit-transform:translate3d(0, -50%, 0);
	transform:translate3d(0, -50%, 0)
	}
	100% {
	opacity:1;
	-webkit-transform:none;
	transform:none
	}
}
@-webkit-keyframes fade-in-up {
	0% {
	opacity:0;
	-webkit-transform:translate3d(0, 50%, 0);
	transform:translate3d(0, 50%, 0)
	}
	100% {
	opacity:1;
	-webkit-transform:none;
	transform:none
	}
}
@-ms-keyframes fade-in-up {
	0% {
	opacity:0;
	transform:translate3d(0, 50%, 0)
	}
	100% {
	opacity:1;
	-ms-transform:none;
	transform:none
	}
}
@keyframes fade-in-up {
	0% {
	opacity:0;
	-webkit-transform:translate3d(0, 50%, 0);
	transform:translate3d(0, 50%, 0)
	}
	100% {
	opacity:1;
	-webkit-transform:none;
	transform:none
	}
}
@-webkit-keyframes fade-in-down-desktop {
	0% {
	opacity:0;
	-webkit-transform:translate3d(0, -10%, 0);
	transform:translate3d(0, -10%, 0)
	}
	100% {
	opacity:1;
	-webkit-transform:none;
	transform:none
	}
}
@-ms-keyframes fade-in-down-desktop {
	0% {
	opacity:0;
	transform:translate3d(0, -10%, 0)
	}
	100% {
	opacity:1;
	-ms-transform:none;
	transform:none
	}
}
@keyframes fade-in-down-desktop {
	0% {
	opacity:0;
	-webkit-transform:translate3d(0, -10%, 0);
	transform:translate3d(0, -10%, 0)
	}
	100% {
	opacity:1;
	-webkit-transform:none;
	transform:none
	}
}

@-webkit-keyframes fade-in-up-desktop {
	0% {
	opacity:0;
	-webkit-transform:translate3d(0, 30%, 0);
	transform:translate3d(0, 30%, 0)
	}
	100% {
	opacity:1;
	-webkit-transform:none;
	transform:none
	}
}
@-ms-keyframes fade-in-up-desktop {
	0% {
	opacity:0;
	transform:translate3d(0, 30%, 0)
	}
	100% {
	opacity:1;
	-ms-transform:none;
	transform:none
	}
}
@keyframes fade-in-up-desktop {
	0% {
	opacity:0;
	-webkit-transform:translate3d(0, 30%, 0);
	transform:translate3d(0, 30%, 0)
	}
	100% {
	opacity:1;
	-webkit-transform:none;
	transform:none
	}
}

@-webkit-keyframes move-from-left {
	0% {
	-webkit-transform:translateX(-50px);
	-ms-transform:translateX(-50px);
	transform:translateX(-50px)
	}
	100% {
	-webkit-transform:translateX(0);
	-ms-transform:translateX(0);
	transform:translateX(0)
	}
}
@-ms-keyframes move-from-left {
	0% {
	-webkit-transform:translateX(-50px);
	-ms-transform:translateX(-50px);
	transform:translateX(-50px)
	}
	100% {
	-webkit-transform:translateX(0);
	-ms-transform:translateX(0);
	transform:translateX(0)
	}
}
@keyframes move-from-left {
	0% {
	-webkit-transform:translateX(-50px);
	-ms-transform:translateX(-50px);
	transform:translateX(-50px)
	}
	100% {
	-webkit-transform:translateX(0);
	-ms-transform:translateX(0);
	transform:translateX(0)
	}
}
@-webkit-keyframes shake {
	0% {
	-webkit-transform:translateX(0);
	-ms-transform:translateX(0);
	transform:translateX(0)
	}
	20% {
	-webkit-transform:translateX(-5px);
	-ms-transform:translateX(-5px);
	transform:translateX(-5px)
	}
	40% {
	-webkit-transform:translateX(5px);
	-ms-transform:translateX(5px);
	transform:translateX(5px)
	}
	60% {
	-webkit-transform:translateX(-5px);
	-ms-transform:translateX(-5px);
	transform:translateX(-5px)
	}
	80% {
	-webkit-transform:translateX(5px);
	-ms-transform:translateX(5px);
	transform:translateX(5px)
	}
	100% {
	-webkit-transform:translateX(0);
	-ms-transform:translateX(0);
	transform:translateX(0)
	}
}
@-ms-keyframes shake {
	0% {
	-webkit-transform:translateX(0);
	-ms-transform:translateX(0);
	transform:translateX(0)
	}
	20% {
	-webkit-transform:translateX(-5px);
	-ms-transform:translateX(-5px);
	transform:translateX(-5px)
	}
	40% {
	-webkit-transform:translateX(5px);
	-ms-transform:translateX(5px);
	transform:translateX(5px)
	}
	60% {
	-webkit-transform:translateX(-5px);
	-ms-transform:translateX(-5px);
	transform:translateX(-5px)
	}
	80% {
	-webkit-transform:translateX(5px);
	-ms-transform:translateX(5px);
	transform:translateX(5px)
	}
	100% {
	-webkit-transform:translateX(0);
	-ms-transform:translateX(0);
	transform:translateX(0)
	}
}
@keyframes shake {
	0% {
	-webkit-transform:translateX(0);
	-ms-transform:translateX(0);
	transform:translateX(0)
	}
	20% {
	-webkit-transform:translateX(-5px);
	-ms-transform:translateX(-5px);
	transform:translateX(-5px)
	}
	40% {
	-webkit-transform:translateX(5px);
	-ms-transform:translateX(5px);
	transform:translateX(5px)
	}
	60% {
	-webkit-transform:translateX(-5px);
	-ms-transform:translateX(-5px);
	transform:translateX(-5px)
	}
	80% {
	-webkit-transform:translateX(5px);
	-ms-transform:translateX(5px);
	transform:translateX(5px)
	}
	100% {
	-webkit-transform:translateX(0);
	-ms-transform:translateX(0);
	transform:translateX(0)
	}
}
@-webkit-keyframes spin {
	to {
	-webkit-transform:rotate(1turn)
	}
}
@keyframes spin {
	to {
	-webkit-transform:rotate(1turn);
	transform:rotate(1turn)
	}
}


@-webkit-keyframes swinging{
	0% { -webkit-transform: rotate(0); }
	5% { -webkit-transform: rotate(10deg); }
	10% { -webkit-transform: rotate(-9deg); }
	15% { -webkit-transform: rotate(8deg); }
	20% { -webkit-transform: rotate(-7deg); }
	25% { -webkit-transform: rotate(6deg); }
	30% { -webkit-transform: rotate(-5deg); }
	35% { -webkit-transform: rotate(4deg); }
	40% { -webkit-transform: rotate(-3deg); }
	45% { -webkit-transform: rotate(2deg); }
	50% { -webkit-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
	100% { -webkit-transform: rotate(0); }
}

@-moz-keyframes swinging{
	0% { -moz-transform: rotate(0); }
	5% { -moz-transform: rotate(10deg); }
	10% { -moz-transform: rotate(-9deg); }
	15% { -moz-transform: rotate(8deg); }
	20% { -moz-transform: rotate(-7deg); }
	25% { -moz-transform: rotate(6deg); }
	30% { -moz-transform: rotate(-5deg); }
	35% { -moz-transform: rotate(4deg); }
	40% { -moz-transform: rotate(-3deg); }
	45% { -moz-transform: rotate(2deg); }
	50% { -moz-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
	100% { -moz-transform: rotate(0); }
}

@keyframes swinging{
	0% { transform: rotate(0); }
	5% { transform: rotate(10deg); }
	10% { transform: rotate(-9deg); }
	15% { transform: rotate(8deg); }
	20% { transform: rotate(-7deg); }
	25% { transform: rotate(6deg); }
	30% { transform: rotate(-5deg); }
	35% { transform: rotate(4deg); }
	40% { transform: rotate(-3deg); }
	45% { transform: rotate(2deg); }
	50% { transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
	100% { transform: rotate(0); }
}


/*scale-a scaleAmove*/
@-webkit-keyframes scaleAmove {
	0% {-webkit-transform:scale(0.2);}
	100% {-webkit-transform:scale(1);}
}
@-moz-keyframes scaleAmove {
	0% {-webkit-transform:scale(0.2);}
	100% {-webkit-transform:scale(1);}
}
@-o-keyframes scaleAmove {
	0% {-webkit-transform:scale(0.2);}
	100% {-webkit-transform:scale(1);}
}
@-ms-keyframes scaleAmove {
	0% {-webkit-transform:scale(0.2);}
	100% {-webkit-transform:scale(1);}
}
@keyframes scaleAmove {
	0% {-webkit-transform:scale(0.2);}
	100% {-webkit-transform:scale(1);}
}

@-webkit-keyframes rotateMoveY{
	from{ transform:perspective(0px) rotateY(0px)}
	to{ transform:perspective(200px) rotateY(360deg);}
}
@-o-keyframes rotateMoveY{
	from{ transform:perspective(0px) rotateY(0px)}
	to{ transform:perspective(200px) rotateY(360deg);}
}
@-ms-keyframes rotateMoveY{
	from{ transform:perspective(0px) rotateY(0px)}
	to{ transform:perspective(200px) rotateY(360deg);}
}
@-moz-keyframes rotateMoveY{
	from{ transform:perspective(0px) rotateY(0px)}
	to{ transform:perspective(200px) rotateY(360deg);}
}
@keyframes rotateMoveY{
	from{ transform:perspective(0px) rotateY(0px)}
	to{ transform:perspective(200px) rotateY(360deg);}
}