.video_mode{ display: block; width: 100%;background-color:#1b1b1c;margin: 0 auto; padding:0 200px;box-sizing: border-box;position:relative;overflow: hidden;}
/*-----影片-----*/
.video-container{ position: relative;width: 100%; padding-bottom: 60.25%;height: 0;overflow:hidden;}
.video-container iframe, .video-container object, .video-container embed {position: absolute;left: 0;width: 100%;height: 95%;padding-bottom: 56.25%;}
/*-----影片資訊-----*/
.bottom_layer{display: block;max-width: 1000px; margin: 0 auto; color: #fff;/*position: absolute;bottom:-200px;left:50%; margin-left: -500px;*/z-index:5;}
.bottom_layer strong{display: block; width: 200px; height: 40px; background-color:#8e56ce;text-align: center; line-height: 40px; border-radius: 5px 5px 0 0 ;margin: 0 auto;}
.bottom_layer:hover{bottom: 0;}
.close { display: block;  position: absolute;  right:5px;  top:20%;  width:32px;  height:32px;  opacity:0.5;z-index:10;}
.close:hover { opacity:1;}
.close:before, .close:after {  position: absolute;  left: 15px;  content:'';  height: 33px;  width: 2px;  background-color:#fff;}
.close:before {  transform: rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);}
.close:after {  transform: rotate(-45deg);-moz-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);}
.about_vidoe_content{display:flex;flex-wrap:wrap;justify-content: space-around; padding:20px; box-sizing: border-box;background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 52%, rgba(0,0,0,1) 99%, rgba(0,0,0,1) 100%);background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0.5) 52%,rgba(0,0,0,1) 99%,rgba(0,0,0,1) 100%);background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0.5) 52%,rgba(0,0,0,1) 99%,rgba(0,0,0,1) 100%);border-top:3px solid  #8e56ce;margin: 0 auto;}
.title{width:45%;font-weight:500;}
.title span{ color: #8e56ce;font-size: 1.25em;}
.title h2 a{ display: block; margin-left: 30px;font-size: 1.5em;padding:0 15px;box-sizing: border-box;color: #fff;}
.pic{display: block; width:150px;overflow: hidden;}
.pic img{width: 100%;}
.link a.odsg{color:white;}
.link{width:36%; box-sizing: border-box;margin-left: 20px;}
.link a.box{display: inline-block; padding:5px 15px;border:1px solid #fff;color: #fff;border-radius: 3px;margin:10px 10px 0 0;  }
.link a.box:hover{background-color: #009688;border-color: #009688;}
.subscrip i{margin-right: 5px;}
.subscrip .fa-youtube{ color: #ff0000;}
.subscrip .fa-heart{ color: #e43b7c;}
.subscrip a:hover{color:#ff0000;background-color:transparent;border-color:transparent;}
.subscrip a+a:hover{color:#e43b7c;}
.subscrip a.box{border:0;}
.subscrip{display: block;float: right;}
/*-----箭頭-----*/
.video_mode .arrow{box-shadow: 1px -1px 0 1px #fff inset;-webkit-box-shadow: 2px -2px #fff inset;top:40%;}
.Layout2024 .video_mode .arrow{top:30%;}
.video_mode .arrow-left{left:1%;margin-left: 0;}
.video_mode .arrow-right{right:1%;margin-right: 0;}
.video_mode .arrow-left:hover{left:1.5%;}
.video_mode .arrow-right:hover{right:1.5%;}


@media screen and (min-width:320px) and (max-width:1024px){
.video_mode{padding: 0;}
/*.bottom_layer:click{bottom: 0;}*/
.close{ opacity:1;}
}

@media screen and (min-width:320px) and (max-width:876px){
/*.bottom_layer{left:0%;margin-left:0px;bottom:-310px;}*/
.close {  top:15%;}
.about_vidoe_content{background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 52%, rgba(0,0,0,1) 99%, rgba(0,0,0,1) 100%);background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0.5) 52%,rgba(0,0,0,1) 99%,rgba(0,0,0,1) 100%);background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0.5) 52%,rgba(0,0,0,1) 99%,rgba(0,0,0,1) 100%);width: 100%; justify-content: flex-start;}
.title{width:100%;margin-bottom: 10px;margin-left: 0;}
.pic{margin-left: 45px;}
.video_mode .arrow{padding:30px;}
.Layout2024 .video_mode .arrow{top:20%;}
.video_mode .arrow-left{left:-2%;}
.video_mode .arrow-right{right:-2%;}
.video_mode .arrow-left:hover{left:-2%;}
.video_mode .arrow-right:hover{right:-2%;}
}

@media screen and (min-width:320px) and (max-width:735px){
/*.bottom_layer{bottom: -295px;}*/
.link{width:45%;}    
.pic{width:130px;}  

}

@media screen and (min-width:320px) and (max-width:595px){
/*.video-container{position: absolute;top: 0;bottom: 0;margin: auto;}*/
/*.bottom_layer{position: relative;bottom:-440px;}*/
.close {  top:10%;}
.about_vidoe_content{padding:20px;}
.title {text-align: center;}
.title h2 a{padding: 0;width:85%}
.pic{width:150px;margin: 0 auto;}    
.link{width:100%;text-align:center;}  
.subscrip{float:unset;}
.link a.box{padding:5px 7px;}
.video_mode .arrow{top:13%;padding:20px;}
.Layout2024 .video_mode .arrow{top:10%;}
.video_mode .arrow-left{left:-4%;}
.video_mode .arrow-right{right:-4%;}
.video_mode .arrow-left:hover{left:-4%;}
.video_mode .arrow-right:hover{right:-4%;}
}


@media screen and (min-width:320px) and (max-width:375px){
/*    .bottom_layer{bottom:-477px;}*/
}

@media screen and (min-width:320px) and (max-width:420px) {
/*    div.bottom_layer.hide {
        position: fixed;
        height: 43px;
        bottom: 0px;
    }*/
/*    .video-container {
        padding-bottom: 56.25%;
    }
    .video-container iframe, .video-container object, .video-container embed {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        padding-bottom: 56.25%;
    }*/
   /* div.video_mode {
        height: 65VH;
    }*/
    
}

@media screen and (min-width:421px) and (max-width:1024px) {
    /*div.bottom_layer.hide {
        position: fixed;
        height: 43px;
        bottom: 0px;
    }*/
   /* .video-container {
        padding-bottom: 56.25%;
    }
    .video-container iframe, .video-container object, .video-container embed {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        padding-bottom: 56.25%;
    }
    div.video-container {
        position:absolute;
        top: 0;
        bottom: 0;
        margin: auto;
    }*/
/*    div.video_mode {
        height: 80VH;
    }*/

   
}

a.close {
    display: block;
    position: absolute;
    right: 32px;
    top: 10px;
    width: 32px;
    height: 32px;
    opacity: 0.5;
    z-index: 10;
}
/*div.bottom_layer.show {
    position: fixed;
    bottom: 0px;
}*/
div.pic {
    height:155px;
    max-height:155px;
}