/* =================================
	Carousel CSS
================================= */

div.carousel {
	position:relative;
	width:900px;
	margin:0 auto;
}
div.carousel div.outer {
	position:relative;
	-webkit-transform: translateZ(0);
	margin:0 30px;
	height:500px;
	overflow:hidden;
}
div.carousel div.outer ul {
	position:absolute;
	display:table;
}
div.carousel div.outer ul.inner li {
	display:table-cell;
}
div.carousel div.outer ul.inner li > span,
div.carousel div.outer ul.inner li > span > a,
div.carousel div.outer ul.inner li > span > a img {
	display:block;
	width:850px;
	height:500px;
}
div.carousel div.outer ul.inner li > span {
	position:relative;
	background-color:#030303;
}
div.carousel div.outer ul.inner li > span > a {
	background-position:center top;
}
div.carousel div.outer ul.inner li > span > a img {
}

@media all and (min-width: 768px) {

div.carousel {
	margin-bottom:30px;
}

}

@media all and (max-width: 767px) {
div.carousel {
	position:relative;
    width: 300px;
	margin:0 auto;
}
div.carousel div.outer {
	position:relative;
	-webkit-transform: translateZ(0);
	margin:5px auto;
    height: 210px;
	overflow:hidden;
}



div.carousel div.outer ul.inner li > span,
div.carousel div.outer ul.inner li > span > a,
div.carousel div.outer ul.inner li > span > a img {
    margin: 10px auto;
    width: 300px;
    height: 180px;
    background-size: 300px 180px;
    display: block;
    background-repeat: no-repeat;
    background-position: center center;

}

div.carousel {margin-bottom:20px;}

}


/*	disc
============================== */

div.carousel ul.ctrl-disc {
	text-align:center;
	height:48px;
	/* background-color:hsla(0,0%,100%,0.5); */
}
div.carousel ul.ctrl-disc li {
	display:inline-block;
	width:24px;
	padding-top:16px;
}
div.carousel ul.ctrl-disc li a {
	display:inline-block;
	text-decoration:none;
	width:16px;
	height:16px;
	border: 1px solid hsla(240,3%,97%,0.6);
	background-color:#aec1de;
	border-radius:8px;
	text-indent:110%;white-space:nowrap;overflow:hidden;
}
div.carousel ul.ctrl-disc li a.now {
	background-color:#448af9;
}



/*	arrow
============================== */

div.carousel ul.ctrl-arrow {
}
div.carousel ul.ctrl-arrow li {
	position:absolute;
	top:0;
}
div.carousel ul.ctrl-arrow li.ctrl-lef {
	left:0;
}
div.carousel ul.ctrl-arrow li.ctrl-rig {
	right:0;
}
div.carousel ul.ctrl-arrow li a {
	display:block;
	background-image:url(../img/prevnext.png);
	background-repeat:no-repeat;
	width:30px;
	height:500px;
	/* background-color:hsla(0,0%,100%,0.2); */
	text-indent:110%;white-space:nowrap;overflow:hidden;
}
div.carousel ul.ctrl-arrow li.ctrl-lef a {
	background-position:left top;
}
div.carousel ul.ctrl-arrow li.ctrl-rig a {
	background-position:-30px 0;
}
div.carousel ul.ctrl-arrow li.ctrl-lef a:hover {
	background-position:-60px 0;
}
div.carousel ul.ctrl-arrow li.ctrl-rig a:hover {
	background-position:-90px 0;
}

@media all and (max-width: 767px) {
div.carousel ul.ctrl-arrow li a {display:none;}
}