*{box-sizing: border-box}

html{height: 100%}
body{overflow: hidden;height: 100%}
a{display: block}

header{position: fixed;width: 100%;height: 60px;left: 0;top: 0;transition: all .5s ease;
border-bottom: 3px solid #503396;padding-top: 18px;background: #f2f2f2;z-index: 100;}
header:hover{height: 80px;padding-top: 28px}
header .wrapHead{float: left;width: 33.333%;text-align: center}
header .wrapHead:nth-child(3){font-size: .8em}
header .wrapHead li{display: inline-block;margin: 0 20px;font-weight: 600;color: #666}
header .wrapHead li.on{color: #503396}
header .logo{margin-left: 20px}

.slideContainer{width: 25%;margin-left: -25%;height: 100%}
.slideWrap{width: 2000%;height: 100%;position: relative;margin-top: 60px;display: flex;
background: #eee;flex: 2}
.slide{min-width: 5%;height: 100%;position: relative;
background: url(../02_21/img/list_bg.jpg)repeat-y center top}
.mainImg{position: relative;height: 56.764vh;overflow: hidden;cursor: pointer;animation: bgsizeback .2s linear forwards;
background-size: contain;background-repeat: no-repeat;background-position: center center}
.mainImg a{width: 100%;height: 100%}
.inbox{position: absolute;width: 100%;height: 70px;bottom: -70px;transition: all .2s ease;
background: rgba(54,31,102,.5);color: #fff;text-align: center;padding-top: 2.8%}
.inbox span{display: inline-block;padding: 10px;border: 2px solid #fff}
.slide:hover .mainImg{animation: bgsize .2s linear forwards}
.slide:hover .inbox{bottom: 0}
@keyframes bgsizeback {
    0%{background-size: 105%}
    100%{background-size: 100%}
}
@keyframes bgsize {
    0%{background-size: 100%}
    100%{background-size: 105%}
}
.mainImg1{background-image: url(../02_21/img/movie_1.jpg)}
.mainImg2{background-image: url(../02_21/img/movie_2.jpg)}
.mainImg3{background-image: url(../02_21/img/movie_3.jpg)}
.mainImg4{background-image: url(../02_21/img/movie_4.jpg)}
.mainImg5{background-image: url(../02_21/img/movie_5.jpg)}
.mainImg6{background-image: url(../02_21/img/movie_6.jpg)}
.mainImg7{background-image: url(../02_21/img/movie_7.jpg)}
.mainImg8{background-image: url(../02_21/img/movie_8.jpg)}
.mainImg9{background-image: url(../02_21/img/movie_9.jpg)}
.mainImg10{background-image: url(../02_21/img/movie_10.jpg)}
.mainImg11{background-image: url(../02_21/img/movie_11.jpg)}
.mainImg12{background-image: url(../02_21/img/movie_12.jpg)}
.mainImg13{background-image: url(../02_21/img/movie_13.jpg)}
.mainImg14{background-image: url(../02_21/img/movie_14.jpg)}
.mainImg15{background-image: url(../02_21/img/movie_15.jpg)}
.mainImg16{background-image: url(../02_21/img/movie_16.jpg)}
.mainImg17{background-image: url(../02_21/img/movie_17.jpg)}
.mainImg18{background-image: url(../02_21/img/movie_18.jpg)}
.mainImg19{background-image: url(../02_21/img/movie_19.jpg)}
.mainImg20{background-image: url(../02_21/img/movie_20.jpg)}
.slide img{width: 100%;}
a.prev,a.next,a.move{position: fixed;bottom: 5%;}
a.prev{left: 5%}
a.next{right: 5%}
a.move{left: 48%;background: url(../02_21/img/btn_play_on.png)no-repeat left top;
width: 40px;height: 40px}
a.move.on{background: url(../02_21/img/btn_play_off.png)no-repeat left top}

.age12{background: url(../02_21/img/bg_age.png)no-repeat 0 -440px}
.age15{background: url(../02_21/img/bg_age.png)no-repeat 0 -659px}
.age19{background: url(../02_21/img/bg_age.png)no-repeat 0 -220px}
.age00{background: url(../02_21/img/bg_age.png)no-repeat 0 -0}
.content{padding-left: 20px;padding-top: 20px}
.title{padding-left: 40px;margin-bottom: 20px}
.list{line-height: 1.5;width: 90%;}

@media screen and (min-width:460px) and (max-width:1200px){
.slideContainer{width: 34%;margin-left: -34%}
header .wrapHead{width: 50%;min-width: 50%;text-align: left}
header .wrapHead:nth-child(1){width: 35%;min-width: 35%}
header .wrapHead:nth-child(3){display: none}
}
@media screen and (max-width:460px){
.slideContainer{width: 100%;margin-left: -100%}
header .wrapHead{width: 50%;}
header .wrapHead:nth-child(1){width: 100%;}
header .wrapHead:nth-child(2){display: none}
header .wrapHead:nth-child(3){display: none}
}