@charset 'utf-8';

/* recommend */
.recommend {
position:relative;
overflow-x:hidden;
background:#000;
border:solid #FFF;
border-width:1px 0;
margin-bottom:32px;
}
.recommend .slick-arrow {
position:absolute; top:0; bottom:0;
width:48px;
background:rgb(0,0,0,75%);
}
.recommend .slick-arrow:before {
position:absolute; left:calc(50% - 12px); top:calc(50% - 12px);
display:block;
width:24px; height:24px;
background:url('../img/arrow.png') no-repeat center center / cover;
content:'';
}
.recommend .slick-prev { left:0;}
.recommend .slick-next { right:0; transform:scaleX(-1);}
.recommend .item a { position:relative; display:block;}
.recommend .item img { display:block; width:192px; height:192px;}
.recommend .item div {
position:absolute; left:0; right:0; bottom:0;
background:linear-gradient(transparent,rgb(0,0,0,75%) 16px);
text-shadow:0 1px 1px #000;
padding:24px 8px 8px;
}
.recommend .item p:nth-child(1) { font-size:14px;}
.recommend .item p:nth-child(2) { font-size:12px; margin-top:4px;}
/* recommend */

/* schedule */
.schedule { padding:16px 32px;}
.schedule div {
background:rgb(0,0,0,50%);
border-radius:8px;
box-shadow:0 0 8px rgb(127,255,231,50%);
padding:12px; margin:0 auto;
}
@media screen and ( max-width:768px ){
.schedule { padding:16px;}
}

.schedule .item { display:flex; flex-wrap:wrap; align-items:center;}
.schedule .item li { font-size:14px; white-space:nowrap; overflow:hidden; padding:4px;}
.schedule .item >:nth-child(1) { width:calc(100% - (30em + 24px));}
.schedule .item >:nth-child(2) { width:calc(12em + 8px);}
.schedule .item >:nth-child(3) { width:calc( 6em + 8px);}
.schedule .item >:nth-child(4) { width:calc(12em + 8px);}
.schedule hr {
display:block;
height:2px;
border:none; border-top:solid 1px #064; border-bottom:solid 1px #0AC;
box-shadow:0 0 4px rgb(0,127,191,75%);
margin:4px;
}
.schedule .copy { display:flex; flex-wrap:wrap; justify-content:center; padding:4px;}
.schedule .copy li { font-size:10px; padding:4px; opacity:60%;}
@media screen and ( max-width:768px ){
.schedule .item li { font-size:12px; padding:4px;}
.schedule .item >:nth-child(1) { width:100%;}
.schedule .item >:nth-child(2) { width:40%;}
.schedule .item >:nth-child(3) { width:20%;}
.schedule .item >:nth-child(4) { width:40%;}
}
/* schedule */