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

.lazy-done {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

div.mainCarousel {
	position:relative;
	/* background-color:hsla(0,0%,100%,0.5);
	cursor:pointer; */
}

div.mainCarousel div.outer {
	position:relative;
	/* width:100%; */
	/* background-color:hsla(0,0%,100%,0.5); */
	overflow:hidden;
	-webkit-transform: translateZ(0);
}

div.mainCarousel div.outer ul {
	position:absolute;
	display:table;
	/* width:100%; */
/*	left:50%;	*/
}

div.mainCarousel div.outer ul.inner li {
	display:table-cell;
/*	float:left;
	-webkit-box-shadow:0 0 16px -8px hsla(0,0%,0,0.5);
	box-shadow:0 0 16px -8px hsla(0,0%,0,0.5); */
}
div.mainCarousel div.outer ul.inner li > span,
div.mainCarousel div.outer ul.inner li > span > a > span,
div.mainCarousel div.outer ul.inner li > span > a,
div.mainCarousel div.outer ul.inner li > span > a img {
	display:block;
}
div.mainCarousel div.outer ul.inner li > span {
	position:relative;
	overflow:hidden;
	background-color:hsla(0,0%,100%,0.5);
}
div.mainCarousel div.outer ul.inner li > span > a,
div.mainCarousel div.outer ul.inner li > span > a.thumb > span {
	position:absolute;
}
div.mainCarousel div.outer ul.inner li > span > a.thumb {
	left:0;
	top:0;
	background-position:center top;
}
div.mainCarousel div.outer ul.inner li > span > a.thumb img {
/*	background-color:hsla(0,0%,100%,0.1); */
}

div.mainCarousel div.outer ul.inner li > span > a.btnPlayer {
	transition-property: bottom;
	transition-duration: 0.5s;
	transition-timing-function: ease-out;
	transition-delay: 0.5s;
	font-weight:bold;
	text-decoration:none;
	color:#000;
	background-color:#fc0;
	padding:0.5em 1em;
}
div.mainCarousel div.outer ul.inner li > span > a > span.caption {
	transition-property: bottom;
	transition-duration: 0.5s;
	transition-timing-function: ease-out;
	font-weight:bold;
	color:#fff;
	background-color:hsla(0,0%,0%,0.7);
	width:100%;
	bottom:-30%;
	line-height:1.25;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
div.mainCarousel div.outer ul.inner li.yes > span > a > span.caption {
	bottom:0;
}

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

div.mainCarousel {
	margin:0 30px;
	margin-bottom:30px;
}
div.mainCarousel div.outer {
	height:500px;
}

div.mainCarousel div.outer ul {
/*	margin-left:-352px; */
}

div.mainCarousel div.outer ul.inner li {
	padding-right:60px;
/*	margin-right:60px; */
}

div.mainCarousel div.outer ul.inner li > span,
div.mainCarousel div.outer ul.inner li > span > a.thumb,
div.mainCarousel div.outer ul.inner li > span > a.thumb img {
	width:980px;
	height:500px;
}

div.mainCarousel div.outer ul.inner li > span {
	-webkit-box-shadow:0 0 16px -8px hsla(0,0%,0,0.5);
	box-shadow:0 0 16px -8px hsla(0,0%,0,0.5);
}

div.mainCarousel div.outer ul.inner li > span > a.btnPlayer,
div.mainCarousel div.outer ul.inner li > span > a > span.caption {
	font-size:83%;
}

div.mainCarousel div.outer ul.inner li > span > a.btnPlayer:hover {
	background-color:#ff0;
}

div.mainCarousel div.outer ul.inner li > span > a.btnPlayer {
	right:10px;
	bottom:-100px;
}
div.mainCarousel div.outer ul.inner li.yes > span > a.btnPlayer {
	right:10px;
	bottom:10px;
}

div.mainCarousel div.outer ul.inner li > span > a > span.caption {
	padding:10px;
}

}

@media all and (max-width: 767px) {

div.mainCarousel {
/*	margin:0 10px; */
	margin-bottom:20px;
}
div.mainCarousel div.outer {
	height:163px;
}

div.mainCarousel div.outer ul.inner li {
	padding-right:0;
}

div.mainCarousel div.outer ul.inner li > span,
div.mainCarousel div.outer ul.inner li > span > a.thumb,
div.mainCarousel div.outer ul.inner li > span > a.thumb img {
	width:320px;
	height:163px;
}

div.mainCarousel div.outer ul.inner li > span > a.thumb {
	background-size:cover;
}

div.mainCarousel div.outer ul.inner li > span > a.btnPlayer,
div.mainCarousel div.outer ul.inner li > span > a > span.caption {
	font-size:75%;
}

div.mainCarousel div.outer ul.inner li > span > a.btnPlayer {
	right:6px;
	bottom:-80px;
}
div.mainCarousel div.outer ul.inner li.yes > span > a.btnPlayer {
	right:6px;
	bottom:6px;
}

div.mainCarousel div.outer ul.inner li > span > a > span.caption {
	padding:6px;
}

}






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

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

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

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

div.mainCarousel ul.ctrl-arrow {
	width:100%;
	position:absolute;
	left:0;
	top:0;
}
div.mainCarousel ul.ctrl-arrow li {
	position:absolute;
	top:0;
}
div.mainCarousel ul.ctrl-arrow li.ctrl-lef {
	left:50%;
/*	margin-left:-221px; */
	margin-left:-397px;
}
div.mainCarousel ul.ctrl-arrow li.ctrl-rig {
	right:50%;
/*	margin-right:-221px; */
	margin-right:-397px;
}
div.mainCarousel ul.ctrl-arrow li a {
	display:block;
	background-image:url(../img/maincarousel_prevnext.png);
	background-repeat:no-repeat;
	width:30px;
	height:163px;
	/* background-color:#fff; */
	text-indent:110%;white-space:nowrap;overflow:hidden;
}
div.mainCarousel ul.ctrl-arrow li.ctrl-lef a {
	background-position:left top;
}
div.mainCarousel ul.ctrl-arrow li.ctrl-rig a {
	background-position:-30px 0;
}
div.mainCarousel ul.ctrl-arrow li.ctrl-lef a:hover {
	background-position:-60px 0;
}
div.mainCarousel ul.ctrl-arrow li.ctrl-rig a:hover {
	background-position:-90px 0;
}

}
@media all and (max-width: 767px) {

div.mainCarousel div.outer ul.ctrl-arrow {
	display:none;
}

}








/*	cheker div
============================== */

div.mainCarousel div.jsChkCenter {
	position:absolute;
	left:50%;
	top:0;
	background-color:hsla(0,0%,0%,0.4);
	z-index:60;
}
@media all and (min-width: 768px) {
div.mainCarousel div.jsChkCenter {
	margin-left:-352px;
	width:10px;
	height:284px;
}
}
@media all and (max-width: 767px) {
div.mainCarousel div.jsChkCenter {
	margin-left:-160px;
	width:5px;
	height:129px;
}
}

div.mainCarousel div.jsChkCenter2 {
	position:absolute;
	right:50%;
	top:0;
	background-color:hsla(0,0%,0%,0.4);
	z-index:60;
}
@media all and (min-width: 768px) {
div.mainCarousel div.jsChkCenter2 {
	margin-right:-352px;
	width:10px;
	height:284px;
}
}
@media all and (max-width: 767px) {
div.mainCarousel div.jsChkCenter2 {
	margin-right:-160px;
	width:5px;
	height:163px;
}
}