*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	bottom:
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

/* General Demo Style */
body {
	
	color: #868686;
	font-family: "微软雅黑"!important, Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    min-width: 320px;
}

a {
	color: #000;
	text-decoration: none;
}

a:hover{ text-decoration:none}

h1 span, h5 {
	font-size: 18px;
	display: block;
	font-style: italic;
	color: #997f5a;
	font-weight: 400;
	text-shadow: 0px 1px 1px #fff;
}

.wrapper {
	position: relative;
	max-width: 840px;
	width: 100%;
	margin: 0 auto;
}

/* Header Style */


.codrops-top a {
	padding: 0px 10px;
	letter-spacing: 1px;
	color: #333;
	display: inline-block;
}

.codrops-top a:hover {
	background: rgba(255,255,255,0.6);
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	float: left;
	display: block;
}

/* More examples buttons */




p.info {
	font-family: "Volkhov", serif;
	font-style: italic;
	color: #997f5a;
	padding: 20px;
	display: block;
	clear: both;
	text-align: center;
	width: 100%;
	max-wdith: 440px;
	margin: 0 auto;
}



.sb-slider {
	position: relative;
	/*overflow: hidden;*/
	width: 100%;
	list-style-type: none;
	padding: 0;
}

.sb-slider li {
	margin: 0;
	padding: 0;
	display: none;
}

.sb-slider li > a {
	outline: none;
}

.sb-slider li > a img {
	border: none;
}

.sb-slider img {
	max-width: 100%;
	display: block;
}

.sb-description {
	font-family:"微软雅黑";
	padding: 20px;
	bottom:0;
	left:0;
	z-index: 1000;
	position: absolute;
	background: #000;
	background: rgba(60,60,60, 0.4);
	line-height:12%;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);	
	opacity: 0;
	width:100%;
	height:12%;
	
}
.sb-description a,.sb-description a:hover{color:#fff; cursor:pointer}
/*.sb-description a:hover{ color:#CC3141}*/
.sb-slider li.sb-current .sb-description {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);	
	opacity: 1;
}

.sb-slider li.sb-current .sb-description:hover {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
	filter: alpha(opacity=99);	
	background: rgba(60,60,60, 0.7);
}

.sb-perspective {
	position: relative;
}

.sb-perspective > div {
	position: absolute;
	-webkit-backface-visibility : hidden;
	-moz-backface-visibility : hidden;
	-o-backface-visibility : hidden;
	-ms-backface-visibility : hidden;
	backface-visibility : hidden;
}

.sb-side {
	margin: 0;
	display: block;
	position: absolute;
	-moz-backface-visibility : hidden;
}
.sb-description h3 {
	font-size: 20px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

.nav-arrows {
	position: absolute; right: 0; top:0;
	width:19%; height:100%;
	background:rgba(121,121,121,0.8);

}

.nav-arrows .top_next {
	width: 100%;
	height: 35%;
	background:  
	url(../image/top.png) no-repeat center center;
	cursor: pointer;
	opacity: 0.5;
}
.nav-arrows .top_next:hover {
	opacity: 1;
}
.nav-arrows .bot_next {
	width: 100%;
	height: 35%;
	background:  
	url(../image/bot.png) no-repeat center center;
	cursor: pointer;
	opacity: 0.5;
}
.nav-arrows .bot_next:hover {
	opacity: 1;
}
.nav-arrows .date_01{ width:100%; height:30%; background:#c7313d; position:absolute; z-index:1200}
.nav-arrows .date_01 .spa_box{ float:left; color:#fff; height:100%; margin:5%;}
.nav-arrows .date_01 .to_spa{ display:block; font-size:16px; font-family:"MyriadPro";}
.nav-arrows .date_01 .bt_spa{ display:block; font-size:30px; font-family:"MyriadPro";}
.nav-arrows .date_01  .spa_box1{  float:left; font-size:50px; color:#fff; height:100%; margin:5%; font-family:"MyriadPro";}

.nav_arrows {
	width:100%; height:50px;
	background-color:#797979; display:none;
}

.nav_arrows .top_next {
	width: 20%;
	height: 100%;
	background:  
	url(../image/right.png) no-repeat center center;
	cursor: pointer;
	opacity: 0.5;
	float:left;
}
.nav_arrows .top_next:hover {
	opacity: 1;
}
.nav_arrows .bot_next {
	width: 20%;
	height: 100%;
	background:  
	url(../image/left.png) no-repeat center center;
	cursor: pointer;
	opacity: 0.5;
	float:left;
}
.nav_arrows .bot_next:hover {
	opacity: 1;
}
.nav_arrows .date_01{ width:60%; height:100%; background:#c7313d; float:left;}
.nav_arrows .date_01 .spa_box{ float:left; color:#fff; height:100%;}
.nav_arrows .date_01 .to_spa{ display:block; font-size:14px; font-family:"MyriadPro"; margin-top:18px; margin-right:15px; margin-left:15px;}
.nav_arrows .date_01 .bt_spa{ display:block; font-size:30px; font-family:"MyriadPro";}
.nav_arrows .date_01 .spa_box1{float:left; font-size:28px; color:#fff; height:100%; font-family:"MyriadPro"; margin-top:3px;}