@charset "utf-8";






#movie{
    /* opacity: 0; */
    /* filter: blur(16px); */
    transition-duration: 1000ms;
    transition-timing-function: linear;
    transition-property: opacity;
 }

 body.activeMovie #movie{
    opacity: 1;
    /* filter: blur(0px); */
    transition-delay: 1000ms;
 }


@media print,
screen and (min-width: 813px) {

    
   

    #movie{
        padding-top: 160px;
        padding-bottom: 1px;
        
    }
   
    

    #movie .inner{
        position: relative;
        width: 788px;
        margin-left: auto;
        margin-right: auto;
    }


    #movie .item{
        position: relative;
        margin-bottom: 168px;
     }

     #movie .item h2{
        font-size: 20px;
        line-height: 1.35em;
        color: #fff;
     }

     #movie .item .shoulder{
        display: flex;
     }
     #movie .item .shoulder span{
         display: block;
         font-size: 84px;
         line-height: 1em;
         font-weight: 600;
         color: #fff;
         letter-spacing: 0.05em;
     }

     #movie .item .bar{
         position: absolute;
         width: 1px;
         height: 100%;
         background-color: #fff;
     }



     #movie .item .thumb a{
        display: block;
        width: calc(1576px / 2);
        height: calc(520px / 2);
        position: relative;
    }

    #movie .item .thumb a .image{
        display: block;
        background-size: cover;
        background-position: center center;
        width: calc(1576px / 2);
        height: calc(520px / 2);
        border-radius: 10px;
        overflow: hidden;
        position: relative;
    }

    #movie .item .thumb a .white{
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255,255,255,0.2);
    }

     #movie .item .thumb a .cover{
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,127,178,0.5);
        opacity:0;
        transition-duration: 400ms;
        transition-timing-function: ease;
        transition-property:opacity ;
    }

    #movie .item .thumb a:hover .cover{
        opacity:1;
    }


    #movie .item .thumb a .arrow{
        background-image: url(../img/movie_play.svg);
        background-size: 20px 15px;
        background-repeat: no-repeat;
        background-position: center center;
        display: block;
        position: absolute;
        left: calc(50% - 53px);
        top: calc(50% - 53px);
        width: 106px;
        height: 106px;
        background-color: #fff;
        border-radius: 100%;
        transform:scale(1);
        pointer-events: none;
        transition-duration: 400ms;
        transition-timing-function: ease;
        transition-property:transform ;
    }

    #movie .item .thumb a:hover .arrow{
        transform:scale(1.1);
    }

    #movie .item .thumb a .circle{
        display: block;
        position: absolute;
        border: 1px #fff solid;
        border-radius: 100%;
        width: 418px;
        height: 418px;
        left: calc(50% - 418px / 2 );
        top: calc(50% - 418px / 2 );
        transform:scale(0);
        pointer-events: none;
        transition-duration: 400ms;
        transition-timing-function: ease;
        transition-property:transform ;
    }

    #movie .item .thumb a:hover .circle{
        transform:scale(1);
    }

    #movie .item .thumb a .text{
        display: block;
        font-size: 24px;
        color: #fff;
        line-height: 1em;
        position: absolute;
        left: calc(50% + 100px);
        top: calc(50% - 0.5em);
        font-weight: 600;
        transform:translateX(-20px);
        opacity:0;
        pointer-events: none;
        transition-duration: 400ms;
        transition-timing-function: ease;
        transition-property:transform,opacity;
    }

    #movie .item .thumb a:hover .text{
        transform:translateX(0px);
        opacity:1;
    }


     #movie .item1 .bar{
        left: -30px;
        top: 0;
     }


     #movie .item1 .thumb{
        margin-top: 40px;
     }

     #movie .item1 .thumb a .image{
        background-image: url(../img/movie_thumb_1.jpg);
    }



     #movie .item2 .title{
        text-align: right;
        margin-top: 40px;
     }
     #movie .item2 .shoulder{
        justify-content: flex-end;
     }
     #movie .item2 .bar{
        right: -30px;
        bottom: 0;
     }
     #movie .item2 .thumb a .image{
        background-image: url(../img/movie_thumb_2.jpg);
    }

}



@media only screen and (max-width: 812px) {

 
   
    
    #movie{
        /* background-image: url(../img/movie_back.jpg);
        background-size: cover;
        background-position: center center; */
        padding-top: 16vw;
        padding-bottom: 4vw;
    }

    #movie .inner{
        position: relative;
        margin-left: 6vw;
        margin-right: 6vw;
    }


    #movie .item{
        width: calc(72vw);
        margin-left: auto;
        margin-right: auto;
        position: relative;
        margin-bottom: 12vw;
     }

     #movie .item h2{
        font-size: 12px;
        line-height: 1.35em;
        color: #fff;
     }

   
     
     #movie .item .shoulder span{
         display: block;
         font-size: 48px;
         line-height: 1em;
         font-weight: 600;
         color: #fff;
         letter-spacing: 0.05em;
     }

     #movie .item .bar{
         position: absolute;
         width: 1px;
         height: 100%;
         background-color: #fff;
     }



     #movie .item .thumb a{
        display: block;
        width: calc(72vw);
        height: calc(72vw / 564 * 280);
        position: relative;
        margin-left: auto;
        margin-right: auto;
    }

    #movie .item .thumb a .image{
        display: block;
        background-size: cover;
        background-position: center center;
        width: calc(72vw);
        height: calc(72vw / 564 * 280);
        border-radius: 10px;
        overflow: hidden;
        position: relative;
    }


    #movie .item .thumb a .white{
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255,255,255,0.2);
    }


     #movie .item .thumb a .cover{
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,127,178,0.5);
    }


    #movie .item .thumb a .arrow{
        background-image: url(../img/movie_play.svg);
        background-size: 2vw calc(2vw / 20 * 26 );
        background-repeat: no-repeat;
        background-position: center center;
        display: block;
        position: absolute;
        left: calc(50% - 8vw);
        top: calc(50% - 8vw);
        width: 16vw;
        height: 16vw;
        background-color: #fff;
        border-radius: 100%;
    }

    #movie .item .thumb a .circle{
        display: block;
        position: absolute;
        border: 1px #fff solid;
        border-radius: 100%;
        width: 45vw;
        height: 45vw;
        left: calc(50% - 45vw / 2 );
        top: calc(50% - 45vw / 2 );
        transform:scale(0);
        pointer-events: none;
        transition-duration: 600ms;
        transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */
        transition-property:transform ;
    }

    #movie .item .thumb a.scIn.move .circle{
        transform:scale(1);
    }

    #movie .item .thumb a .text{
        display: block;
        font-size: 3vw;
        color: #fff;
        line-height: 1em;
        position: absolute;
        left: calc(50% + 12vw);
        top: calc(50% - 0.5em);
        font-weight: 600;
    }


     #movie .item1 .bar{
        left: -6vw;
        top: 0;
     }


     #movie .item1 .thumb{
        margin-top: 40px;
     }

     #movie .item1 .thumb a .image{
        background-image: url(../img/movie_thumb_1.jpg);
    }



     #movie .item2 .title{
        text-align: right;
        margin-top: 40px;
     }
     #movie .item2 .shoulder{
         align-items: flex-end;
        justify-content: flex-end;
     }
     #movie .item2 .bar{
        right: -6vw;
        bottom: 0;
     }
     #movie .item2 .thumb a .image{
        background-image: url(../img/movie_thumb_2.jpg);
    }


    
}