@charset "UTF-8";
body, html {
	height: 100%;
	width: 100%;
}
body {
	position: relative;
	-webkit-text-size-adjust: 100%;
	background-color: #fff;
}
.cast {
	font-size: 0;
}
.cast li {
	display: inline-block;
	font-size: 14px;
	width: 33.3%;
	vertical-align: top;
}
.cast li.w {
	width: 33.4%;
}
.cast li.sub {
	width: 100%;
}
.cast li img {
	width: 100%;
}
.cast :focus {
	outline: 0;
	background-color: #fff;
}
@media screen and (max-width : 767px) {
.cast {
	font-size: 0;
}
.cast li {
	width: 50%;
}
.cast li:first-child {
	width: 100%;
}
.cast li.w {
	width: 50%;
}
}
#trailer-wrapper {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #fff;
	z-index: 3;
}
#trailer-container {
	width: 960px;
	height: 540px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -270px 0 0 -480px;
}
#trailer-inner {
	position: relative;
	width: 100%;
	height: 100%;
}
#trailer {
	width: 100%;
	height: 100%;
	background: #000;
}
#trailer-wrapper .btn-close {
	position: absolute;
	top: 20px;
	right: 20px;
}
#trailer-nav {
	display: block;
	width: 100%;
	height: 33px;
	box-sizing: border-box;
	text-align: center;
	margin-top: 10px;
}
#trailer-nav li {
	width: 20%;
	display: inline-block;
	padding: 0 5px;
	box-sizing: border-box;
}
#trailer-nav a {
	display: block;
	border: 1px solid #cbcbcb;
	height: 33px;
	color: #b8b8b8;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}
#trailer-nav span {
	display: block;
	height: 33px;
	line-height: 30px;
	box-sizing: border-box;
	font-size: 14px;
	border: 2px solid #fff;
}
#trailer-nav .cur a, #trailer-nav a:hover {
	background: #bbebf7;
}
input[type="checkbox"].on-off + ul{
    height: 0;
    overflow: hidden;
}
input[type="checkbox"].on-off:checked + ul{
    height: 47px;
}