.movieList{
    width: auto;
    max-width: 90%;
    margin: 0 auto 100px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 40px;
    row-gap: 40px;
}


.movieList a{background: #000; display: block;}
.movieList a:hover,
.movieList a:hover img{opacity: 1;}

.movieList li a{display: block; overflow: hidden; position: relative;}

.movieList li{ position: relative; }
.movieList li .thumb{ transition: all 0.3s ease;}
.movieList li .sideArea{width: 20%; position: absolute; right: 0; bottom: 0; pointer-events: none;}

.movieList li .startBtn{ width: 230px; height: 50px; background:#b7055f; position: absolute; bottom: 30px; left: 30px; overflow: hidden; text-align: right;padding-right: 20px;}
.movieList li .startIcon{ width: 40px; left: 10px;  top: 50%;transform: translate(0, -50%); position: absolute;transition: all 0.4s ease;}
.movieList li .startTxt{ width: 140px; top: 50%;transform: translate(0, -50%); position: absolute;right: 20px; }

.movieList li .whitebar{ 
    position: absolute; width: 10px; height: 100%; opacity: 1; background: #fff;top: 0; left: -100px;transform: skewX(-50deg);
}

.movieList li a:hover .whitebar{left: 0; width: 230px; opacity: 0; transition: all 0.5s ease;}
.movieList li a:hover .thumb{transform: scale(1.04); opacity: 0.8;}

.movieList a .borderArea{border: 5px solid #ccc; display: block; position: absolute; width: 100%; height: 100%;box-sizing: border-box; top: 0;transition: all 0.5s ease;}
.movieList a:hover .borderArea{border: 10px solid #b7055f;z-index: 10;}

.movieList h3{ color: #b7055f; padding-bottom: 10px; font-size: 20px;text-align: center;font-weight: 800;}

.movieList p.movName{ font-weight: bold;margin:10px 10px 0 10px;}
.movieList p.movTxt{margin: 10px 10px 0;}
.movieList li a:hover .startIcon{ transform: translate(0, -50%) scale(1.5); opacity: 0.5;}

@media(max-width:750px){

    .movieList{
        width: auto;
        max-width: 100%;
        margin: 0 auto 100px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        column-gap: 40px;
        row-gap: 40px;
    }
    .movieList h3{ font-size: 32px; text-align: left;line-height: 1.5em;}
    .movieList a .borderArea{border: 5px solid #b7055f;z-index: 10;}
    .movieList li .startBtn{ width: 280px; height: 70px; }
    .movieList li .startIcon{ width: 50px; }
    .movieList li .startTxt{ width: 180px;  }
    .movieList li .sideArea{width: 25%; }

}


/* ---------------------------------------------------------------------------------
common */



@media(max-width:750px){


}






@media(min-width:751px){


}





@media(max-width:750px){




}