@charset "utf-8";

#video{margin: 0 auto;  }

#video>.display{margin: 100px auto; padding:0;background: #fff;box-shadow: 4px 3px 20px rgba(0,0,0,.016);}
#video>.display .select{ width: 30%; text-align: left; padding: 50px;box-sizing: border-box; }
#video>.display .select>.current{ display: none; font-size: 2rem; color: #154a9a;transition: all .35s;}
#video>.display .select>.dropdown{ background: rgba(255,255,255,.6); padding: 30px; text-align: left; }
#video>.display .select>.dropdown>ul{display: block;margin: 0 auto;}
#video>.display .select>.dropdown>ul>li{display: block;border-bottom: 1px solid #eee;}
#video>.display .select>.dropdown>ul>li:last-child{border-bottom: 0;}
#video>.display .select>.dropdown>ul>li>a{ position: relative; display: block;  padding: 10px 20px; font-size: 2rem; color: #333;transition: all .35s;}
#video>.display .select>.dropdown>ul>li>a:after{position: absolute;z-index: 1; left: 5px; top: 50%; width: 6px;height: 6px;background: #ccc;border-radius: 100%;transform: translateY(-50%); content: '';transition: all .35s;}
#video>.display .select>.dropdown>ul>li>a:hover{color: #00a687;}
#video>.display .select>.dropdown>ul>li>a:hover:after{background: #00a687;}
#video>.display .select>.dropdown>ul>li>a.active{color: #00a687; font-weight: bold;}
#video>.display .select>.dropdown>ul>li>a.active:after{background: #00a687;}

#video>.display .media{position: relative; width: 70%; text-align: center;}
#video>.display .media>a{position: absolute; z-index: 30; display: block; top:50%; left:50%; width: 100px; height: 100px; transform: translate(-50%, -50%); }
#video>.display .media>a>.icon{width: 100%; height: 100%; background:url("../img/play_button.png") center/contain no-repeat;}
#video>.display .media>a:before{position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:24px; height:24px; border-radius:50%; content:''; z-index: -1;}
#video>.display .media>a:after{position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:24px; height:24px; border-radius:50%; content:''; z-index: -1; }
#video>.display .media>a:before{animation:scale 2s ease-out infinite; background:#fff; opacity:0.5; animation-delay:0;}
#video>.display .media>a:after{animation:scale2 2s ease-out infinite; background:#fff; opacity:0.3; animation-delay:0;}
#video>.display .media>.img{ position: relative; text-align: center; margin: 0 auto; overflow: hidden;}
#video>.display .media>.img:after{position: absolute;z-index: 1; left: 0;top: 0;width: 100%;height: 100%; background: rgba(0,0,0,.6); content: ''; transition: all .35s;}
#video>.display .media>.img>img{ width: 100%;height: auto;transition: all .8s;}
#video>.display .media>.img:hover:after{background: rgba(0,0,0,0);}
#video>.display .media>iframe{ display: none; width: 100%;height: 700px; box-sizing: border-box;padding: 0 30px; background: #000; overflow: hidden; margin: 0 auto; }
#video>.display .media:hover .img>img{transform: scale(1.03);}



@keyframes scale{0%{transform:translate(-50%, -50%) scale(1); opacity:.9} 100%{transform:translate(-50%, -50%) scale(7); opacity:0;}}
@keyframes scale2{0%{transform:translate(-50%, -50%) scale(1); opacity:.9;} 100%{transform:translate(-50%, -50%) scale(10);opacity:0;}}









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


    #video>.display .select>.dropdown>ul>li>a{ font-size: 1.8rem; }


}

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

    #video>.display .select{ padding: 30px; }

    #video>.display .media>a>.icon{ background-size: 80px auto;}



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

    #video>.display .select{float: none;width: 100%;}
    #video>.display .select>.dropdown{padding: 20px;}
    #video>.display .select>.dropdown>ul>li>a{ padding: 10px 15px;  font-size: 1.6rem;}

    #video>.display .media{width: 100%;float:none;}
    #video>.display .media>a>.icon{ background-size: 70px auto;}

}


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


    #video>.display{margin: 50px auto;}
    #video>.display .select{ padding: 0; }

    #video>.display .media>a>.icon{ background-size: 50px auto;}

    @keyframes scale{0%{transform:translate(-50%, -50%) scale(1); opacity:.9} 100%{transform:translate(-50%, -50%) scale(5); opacity:0;}}
    @keyframes scale2{0%{transform:translate(-50%, -50%) scale(1); opacity:.9;} 100%{transform:translate(-50%, -50%) scale(6);opacity:0;}}

}