.mask {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.canvas {
	width: 100%;
	height: 100%;
	position: absolute;
}

.slider {
	width: 100%;
	height: 100%;
	float: left;
	position: relative;
}

#banner .slider {
	text-align: center;
}

#banner .slider img {
	width: 100%;
	height: 100%;
	position: absolute;
}

#banner .slider span {	
	color: #fff;
	text-shadow: 0 0 15px rgba(0,0,0,0.75);
	font-size: 44px;
	font-weight: 300;
	position: relative;
	z-index: 1;
}

#banner .slider span div {
	width: calc(100% - 200px);
	width: -moz-calc(100% - 200px);
	width: -webkit-calc(100% - 200px);
	margin:0 auto;
}



.arrow_box {
	width: 100px !important;
	height: 50px;
	position: absolute;
	z-index: 1;
	bottom: 40px;
}

.arrow_box .arrow_left, .arrow_box .arrow_left_black, .arrow_box .arrow_right, .arrow_box .arrow_right_black  {
	cursor: pointer;
	width: 40px !important;
	height: 50px;
	background-color: rgba(0,0,0, 0.5);
	color: #fff;
	text-align: center;
}

.arrow_box .arrow_left {
	background-image: url('../images/banner/arrow_left.png');
	float: left !important;
}

.arrow_box .arrow_left_black {
	background-image: url('../images/banner/arrow_left_black.png');
	float: left !important;
	background-color: #ffc425;
}


.arrow_box .arrow_right {
	background-image: url('../images/banner/arrow_right.png');
	float: right !important
}

.arrow_box .arrow_right_black {
	background-image: url('../images/banner/arrow_right_black.png');
	float: right !important;
	background-color: #ffc425;
}