@charset "UTF-8";

.wrap-movie {padding-left: 90px;}
.wrap-movie .subject {font-family: 'Dream Medium'; font-size: 32px; font-style: italic; line-height: 1.2; color: #fff;}
.box-movie {display: table; width: 100%; margin-top: 25px; table-layout: fixed;}
.box-movie .play {position: relative; display: table-cell; vertical-align: top;}
/* .box-movie .play::after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.35);} */
.box-movie .play a {display: block;}
.box-movie .play a:focus:focus-visible {overflow: hidden; margin: 2px;}
.box-movie .play .thumb {position: relative; background: rgba(0,0,0,.4);}
.box-movie .play .thumb img {display:block; height: 100%; position:relative; left:50%; transform:translate(-50%,0); max-width:none;}
.box-movie .play .slick-current .thumb img {z-index: 1;}
.box-movie .play .thumb .deco {position: absolute; left: 50%; top: 50%; z-index: 2; width: 94px; height: 66px; background: url('../images/ic-youtube.png') no-repeat center center; text-indent: -99999px; transform: translate(-50%, -50%);}
.box-movie .play .desc {overflow: hidden; padding: 21px 20px; background: #0043b2; font-family: 'Dream Medium'; font-size: 18px; text-align: center;  white-space: nowrap; text-overflow: ellipsis; color: #fff;}
.box-movie .play .desc span { position: relative;}
.box-movie .play .desc span::after {content: ''; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px; background: #fff; transition: 1s;}
.box-movie .play a:hover .desc span::after {width: 100%; transition: 1s;}
.box-movie .play-list {display: table-cell; width: 150px; padding-left: 40px; vertical-align: middle;}
.box-movie .play-list > button {display: inline-block; width: 100%; height: 40px; text-indent: -99999px;}
.box-movie .play-list li {cursor: pointer;}
.box-movie .play-list .prev {background: url('../images/btn-youtube-prev.png') no-repeat center top; transition: 1s;}
.box-movie .play-list .prev:hover {background-position: center bottom;}
.box-movie .play-list .next {background: url('../images/btn-youtube-next.png') no-repeat center bottom; transition: 1s;}
.box-movie .play-list .next:hover {background-position: center top;}
.box-movie .play-list .slider {padding: 27px 0;}
.box-movie .play-list .slider li {padding: 10px 0;}
.box-movie .play-list .slider a {display: block;}
.box-movie .play-list .slider .thumb {text-align: center;}
.box-movie .play-list .slider .thumb img {display: inline-block; opacity: .7; transition: 1s;}
.box-movie .play-list .slider .thumb img:hover {opacity: 1;}

.box-movie .play .ani {bottom: -100px; transition: bottom 1s, opacity 1s;}
.ani-on .box-movie .play .ani {bottom: 0;}
.ani-on .box-movie .play .ani1 {transition-delay: .8s;}
.ani-on .box-movie .play .ani2 {transition-delay: 1s;}
.ani-on .box-movie .play .ani3 {transition-delay: 1.2s;}
.ani-on .box-movie .play .ani4 {transition-delay: 1.4s;}

.box-movie .play-list .ani {bottom: -100px; transition: bottom 1s, opacity 1s;}
.ani-on .box-movie .play-list .ani {bottom: 0;}
.ani-on .box-movie .play-list .ani1 {transition-delay: .8s;}
.ani-on .box-movie .play-list .ani2 {transition-delay: 1s;}
.ani-on .box-movie .play-list .ani3 {transition-delay: 1.2s;}
.ani-on .box-movie .play-list .ani4 {transition-delay: 1.4s;}

@media all and (max-width: 1660px) {
    .wrap-movie {padding-left: 50px;}
}

@media all and (max-width: 900px) {
    .wrap-movie {padding-left: 0;}
    .wrap-movie .subject {margin-top: 25px; font-size: 26px;}
    .box-movie {margin-top: 16px;}
    .box-movie .play .thumb img {max-height: 330px;}
    .box-movie .play-list {width: 200px;}
    .box-movie .play-list .slider {padding: 47px 0;}
}

@media all and (max-width: 500px) {
    .wrap-movie {padding-bottom: 0;}
    .box-movie,
    .box-movie .play,
    .box-movie .play-list {display: block; width: 100%; padding-left: 0;}
    .box-movie {margin-top: 20px;}
    .wrap-movie .subject {margin-top: 20px; text-align: center;}
    .box-movie .play {padding-right: 0;}
    .box-movie .play .desc {padding: 13px 20px; font-size: 16px;}
    .box-movie .play .thumb img {width: 100%;}
    .box-movie .play-list {position: relative;}
    .box-movie .play-list .slider {padding: 30px 45px 0 45px;}
    .box-movie .play-list .slider li {padding: 05px ;}
    .box-movie .play-list > button {position: absolute; top: 28%; z-index: 10; width: 45px; height: 80px;}
    .box-movie .play-list .prev {left: 0px; background: url('../images/btn-youtube-prev2.png') no-repeat left center;}
    .box-movie .play-list .prev:hover {background-position: right center;}
    .box-movie .play-list .next {right: 0px; background: url('../images/btn-youtube-next2.png') no-repeat right center;}
    .box-movie .play-list .next:hover {background-position: left center;}
}