.video.layout2{padding-top:100px;background-color:#005bc5;position:relative;overflow:hidden;}
.video.layout2 .container{max-width:1430px;margin:0 auto;padding:0 15px;}
.video.layout2 .row{display:flex;flex-wrap:wrap;}
.video.layout2 .col-10{max-width:83.333%;padding:0 15px;}
.video.layout2 .title-box{text-align:center;margin:0 auto 50px;}
.video.layout2 .title-box h2{font-size:48px;font-weight:700;color:#fff;margin:0 0 10px;line-height:normal;}
.video.layout2 .title-box p{font-size:20px;line-height:normal;font-weight:500;color:#fff;margin:0;}
.video.layout2 .video-background{position:relative;width:100%;min-height:calc(100vh - 243px);overflow:hidden;}
.video.layout2 .video-background iframe{width:100%;height:100%;position:absolute;top:0;left:50%;transform:translateX(-50%);background-color:#000;}
.video.layout2 .video-controls{position:absolute;left:45px;right:45px;bottom:45px;display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:45px;z-index:2;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-bottom:10px;}
.video.layout2 .video-controls::-webkit-scrollbar{height:6px;}
.video.layout2 .video-controls::-webkit-scrollbar-track{background:#f1f1f1;}
.video.layout2 .video-controls::-webkit-scrollbar-thumb{background:#999;border-radius:4px;}
.video.layout2 .video-item{flex:0 0 calc(25% - 45px);max-width:calc(25% - 45px);opacity:0.4;transition:opacity 0.3s;position:relative;transition:all 0.3s ease-in-out;top:0;}
.video.layout2 .video-item:hover,.video.layout2 .video-item:focus,.video.layout2 .video-item.active{opacity:1;}
.video.layout2 .video-item .description-box{position:relative;cursor:pointer;padding-top:15px;white-space:normal;}
.video.layout2 .video-item .title-wrap{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;}
.video.layout2 .video-item .title-wrap .title{font-size:24px;font-weight:700;color:#fff;width:calc(100% - 35px);word-wrap:break-word;}
.video.layout2 .video-item .title-wrap .play-icon{width:30px;height:30px;cursor:pointer;opacity:0;visibility:hidden;transition:all 0.3s ease-in-out;}
.video.layout2 .video-item .title-wrap .play-icon img,.video.layout2 .video-item .title-wrap .play-icon svg{width:100%;height:100%;object-fit:contain;object-position:center;}
.video.layout2 .video-item.active .title-wrap .play-icon{opacity:1;visibility:visible;}
.video.layout2 .video-item .description-box .play-popup{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;}
.video.layout2 .video-item.active .description-box .play-popup{pointer-events:auto;}
.video.layout2 .video-item p{font-size:18px;font-weight:500;color:#fff;margin:0;}
.video.layout2 .progress-box{position:relative;}
.video.layout2 .progress-bar{height:10px;background:#fff;border-radius:20px;overflow:hidden;cursor:pointer;pointer-events:none;position:relative;}
.video.layout2 .progress-fill{width:0%;height:100%;background:#005bc5;transition:width 0.1s linear;position:absolute;left:0;top:0;}
.video.layout2 .video-overlay{width:100%;height:250px;background:linear-gradient(to bottom,rgba(0,0,0,0) 1%,rgba(0,0,0,1) 100%);position:absolute;left:0;bottom:0;z-index:1;}
.video-popup.layout2{display:none;position:fixed !important;top:0;left:0;width:100vw !important;height:100vh !important;background:rgba(0,0,0,0.8);z-index:999999 !important;justify-content:center;align-items:center;overflow:hidden !important;}
.video-popup.layout2 .video-popup-inner{position:relative;width:90%;max-width:700px;background:#fff;padding:30px 15px;border-radius:10px;top:50%;left:50%;transform:translate(-50%,-50%);position:absolute !important;}
.video-popup.layout2 iframe{width:100%;height:400px;}
.video-popup.layout2 .close-btn{position:absolute;top:0;right:0;font-size:28px;color:#fff;background:#000;width:30px;height:30px;padding:7px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;}
.video-popup.layout2 .close-btn img,.video-popup.layout2 .close-btn svg{width:100%;height:100%;object-fit:contain;object-position:center;}
.video-popup.layout2 .close-btn svg{pointer-events:none;}
.video.layout2 .video-item.active .progress-bar{pointer-events:auto;}

@media (max-width:1440px){
  .video.layout2{padding-top:70px;}
  .video.layout2 .video-box .image{min-height:565px;}
  .video.layout2 .title-box{margin-bottom:30px;}
  .video.layout2 .title-box h2{font-size:40px;}
  .video.layout2 .title-box p{font-size:18px;}
  .video.layout2 .video-background{min-height:calc(100vh - 188px);}
}
@media (max-width:1024px){
  .video.layout2{padding-top:50px;}
  .video.layout2 .title-box{max-width:100%;margin-bottom:20px;}
  .video.layout2 .title-box h2{max-width:100%;font-size:40px;margin-bottom:10px;line-height:normal;}
  .video.layout2 .title-box p{font-size:18px;}
  .video.layout2 .video-item{flex:0 0 calc(25% - 15px);max-width:calc(25% - 15px);padding-bottom:0;}
  .video.layout2 .video-item .title-wrap{margin-bottom:0;}
  .video.layout2 .video-item .title-wrap .title{font-size:20px;}
  .video.layout2 .video-item p{display:none;}
  .video.layout2 .video-controls{left:0;right:0;top:inherit;bottom:0;gap:20px;width:100%;padding:20px;}
  .video.layout2 .video-background{min-height:calc(100vh - 115px);}
  .video.layout2 .video-background iframe{height:70%;}
  .video.layout2 .progress-bar{height:5px;border-radius:5px;}
  .video.layout2 .video-overlay{height:200px;background:linear-gradient(to bottom,rgba(0,0,0,0) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 100%);}
  .video-popup.layout2 .video-popup-inner{max-height:90%;overflow:hidden;overflow-y:auto;}
  .video.layout2 .video-item:hover,.video.layout2 .video-item:focus{top:0;}
}
@media (max-width:767px){
  .video.layout2{padding-top:30px;}
  .video.layout2 .title-box h2{max-width:100%;font-size:30px;margin-bottom:10px;line-height:normal;}
  .video.layout2 .title-box p{max-width:100%;font-size:16px;}
  .video-popup.layout2 .video-popup-inner{padding:20px 10px;}
  .video-popup.layout2 .video-popup-inner iframe{height:180px;}
  .video-popup.layout2 .close-btn{width:24px;height:24px;font-size:24px;}
  .video.layout2 .video-controls{padding:10px;gap:10px;flex-wrap:nowrap;}
  .video.layout2 .video-item{flex:0 0 calc(50% - 5px);max-width:calc(50% - 5px);}
  .video.layout2 .video-overlay{height:120px;}
  .video.layout2 .video-item .title-wrap{margin-bottom:0;}
  .video.layout2 .video-item .title-wrap .title{width:calc(100% - 30px);}
  .video.layout2 .video-item .title-wrap .play-icon{width:24px;height:24px;}
  .video.layout2 .video-background{min-height:calc(100vh - 160px);}
}