/* CSS Document */
        @media screen and (min-width: 2048px) {
            .clients-area {
                background-color: #fff;
            }
        }
    
        body {
            overflow-y: auto;
        }
    
        .clients-area {
            background-color: #fff;
        }
    
        .col-md-6 .row,
        .col-md-6 .row>* {
            padding: unset;
            margin: unset;
        }
    
    
        .mfp-counter {
            display: none;
        }
    
        /*
            .ads-slider .owl-item:nth-child(even) {
                padding-top: 80px;
            }
    */
    
        .videos-slider .owl-nav {
            color: #fff;
            font-size: 20px;
        }
    
        .blog-card {
            background: #161616;
            border: 1px solid #464646;
            border-radius: 10px;
            box-shadow: unset;
    
        }
    
        .blog-card .blog-img {
            padding: 0 0 25px 0;
        }
    
        .blog-card .content h3 {
            color: #fff;
            margin-bottom: 25px;
        }
    
        /*
            .blog-card .content .dw-btn {
                background: #fff;
                padding: 6px 40px;
                color: #333;
                border: 1px solid #464646;
                border-radius: 10px;
            }
    
            .blog-card .content .dw-btn:hover {
                color: #0071dc;
            }
    */
    
        #videos .blog-card:hover {
            transform: unset;
        }
    
        #videos .btn-outline-secondary {
            color: #fff;
            background: #0066cc;
        }
    
        #videos .btn-outline-secondary:hover {
            background: #0071dc;
            color: #fff;
        }
    
        #videos .form-control {
            border: 1px solid #6c757d;
        }
    
        #videos .responsive-tabs__list__item {
            border-radius: 8px;
        }
    
        #videos #tablist1-tab1 {
            padding: 10px 66px;
        }
    
        #videos #tablist1-tab2 {
            padding: 10px 32px;
        }
    
        #videos #tablist1-tab4 {
            padding: 10px 34px;
        }
    
        #videos .blog-card {
            border: 0px;
            background: unset;
        }
    
        #videos .blog-card .content h3 {
            font-size: 1rem;
            color: #333;
        }
    
        #videos .blog-card .content {
            padding: 10px;
            text-align: center;
        }
    
        #videos .blog-card .blog-img img {
            border-radius: 0px;
        }
    
        #portfolios .controls .btn {
            background: #eee;
            color: #333;
            border: 0px;
        }
    
        #portfolios .controls .btn {
            text-transform: capitalize;
        }
    
        #portfolios .btn-effect:after {
            background: rgba(0, 0, 0, 0.05)
        }
    
        #portfolios .controls .btn.active {
            background: #0066cc;
            color: #fff;
        }
    
        #portfolios .controls .controls .active {
            border-color: #0071dc;
            border: 0px;
        }
    
        .controls {
            max-width: 700px;
        }
    
        #portfolios .input-group.mb-3 .form-control {
            margin-bottom: 0px;
        }
    
        #portfolios {
            background: #fff;
        }
    
        #portfolios .shot-item p {
            color: #333;
            padding: 15px;
            font-size: 1rem;
        }
    
        #portfolios .btn-check:focus+.btn,
        #portfolios .btn:focus {
            box-shadow: 0 0 0 0 rgba(13, 110, 253, .25);
        }
    
        .play-area {
            position: absolute;
            z-index: 1;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    
        .dropdown .btn {
            text-transform: capitalize;
        }
    
        .build-area::before {
            background: #fff;
        }
    
        /*
            .form-control:focus ~.btn-outline-secondary {
                box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
            }
    */
        .line {
            position: relative;
            width: 70px;
        }
    
        .line::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            /* 设置边框长度为元素宽度的一半 */
            height: 4px;
            /* 设置边框宽度 */
            background-color: #3498db;
            /* 设置边框颜色 */
            border-radius: 2px;
        }
    
    
        .blog-img a,
        .blog-img img {
            width: 100%;
        }
    
        /*
            #portfolios .portfolio-item {
                padding: 10px 0px;
            }
    */
    
        .clients-area .owl-nav .owl-prev {
            left: 7%;
        }
    
        .clients-area .owl-nav .owl-next {
            right: 7%;
        }
    
        .ads-slider .clients-content a {
            width: 100%;
        }
    
        .section-title h2 {
            font-size: 40px;
            font-weight: 600;
            font-family: 'robotoregular', 'Open Sans', Microsoft YaHei, Tahoma, Helvetica, Arial, sans-serif;
        }
    
        .mfp-zoom-out-cur,
        .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
            cursor: default !important;
        }
    
    
        @media (min-width: 768px) {
            .row-cols-md-3 .col {
                flex: 0 0 auto;
                width: 50%;
            }
    
            .row-cols-md-3 .cols {
                flex: 0 0 auto;
                width: 33.333333333%;
            }
    
            .row-cols-md-3 .colt {
                flex: 0 0 auto;
                width: 25%;
            }
        }
    
        .play-area {
            position: absolute;
            z-index: 9;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    
        .row>* {
            padding-right: calc(var(--bs-gutter-x)/ 4);
            padding-left: calc(var(--bs-gutter-x)/ 4);
        }
    
        .video-content {
            position: relative;
            padding: 15px;
            padding-top: 8px;
            text-align: left;
            padding-left: 0px;
        }
    
        .video-content p {
            font-size: 1rem;
        }
    
        .video-content .video-title {
            padding-top: 2px;
            padding-bottom: 2px;
            font-weight: 600;
        }
    
        .video-content .video-time {
            font-size: 14px;
            color: #0066cc;
        }
    
        .video-content .dw-btn {
            position: absolute;
            bottom: 22px;
            right: 5px;
            background-color: transparent;
            padding: 0px 3px 3px 8px;
            color: #252525;
            /*            border: 1px solid #ccc;*/
            border-radius: 10px;
            font-size: 12px;
            font-weight: 600;
            line-height: 1.875;
        }
    
        .video-content .dw-btn i {
            font-size: 20px;
            position: relative;
            top: 5px;
        }
    
        .video-content .dw-btn:hover {
            color: #0071dc;
            /*            letter-spacing: .25px;*/
        }
    
        .play-area .play-on {
            width: 60px;
            height: 60px;
            /*
                color: #0071dc;
                background-color: #fff;
    */
            background: url(../image/icon-play.svg) no-repeat;
            text-align: center;
            font-size: 50px;
            line-height: 20px;
            border-radius: 50px;
            display: inline-block;
        }
    
        .play-area .play-on:hover {
            background-color: transparent;
            visibility: visible;
            opacity: 1;
            -webkit-transform: scale(1.2);
            -ms-transform: scale(1.2);
            -o-transform: scale(1.2);
            transform: scale(1.2);
        }
    
    
        .play-area .play-on i {
            left: 0;
            top: 0;
            z-index: 1;
            width: 100%;
            height: 100%;
            position: absolute;
            background: url(../image/icon-play.svg) no-repeat;
            background-size: auto 30%;
            background-position: center;
            visibility: visible;
            opacity: 0.8;
            -webkit-transition: opacity 150ms ease-in-out;
            -moz-transition: opacity 150ms ease-in-out;
            -ms-transition: opacity 150ms ease-in-out;
            -o-transition: opacity 150ms ease-in-out;
            transition: opacity 150ms ease-in-out;
            -webkit-transition: -webkit-transform 150ms ease-in-out;
            -moz-transition: -moz-transform 150ms ease-in-out;
            -o-transition: -o-transform 150ms ease-in-out;
            transition: transform 150ms ease-in-out;
            color: red;
        }
    
        .video-post-thumbnail {
            flex: 0 0 auto;
            max-width: none;
            max-height: 100%;
            position: relative;
            width: 100%;
            height: 201px;
        }
    
        .video-post:hover .play-btn-trigger,
        .play-btn-trigger.show {
            visibility: visible;
            opacity: 1;
            -webkit-transform: scale(1.2);
            -ms-transform: scale(1.2);
            -o-transform: scale(1.2);
            transform: scale(1.2);
        }
    
        .video-post {
            transition: 0.3s;
            position: relative;
        }
    
    
        .build-play-img,
        .build-play-img img {
            border-radius: 9px;
            width: 100%;
        }
    
    
        #videos .form-control:focus {
            box-shadow: unset;
            border: 1px solid #0066cc;
        }
    
    
        .video-card .preview-video {
            /*    display: none;*/
            width: 100%;
            height: auto;
            opacity: -0.15;
            /*    transition: opacity 0.5s ease;*/
        }
    
        .video-card .preview-img {
            /*    display: block;*/
            opacity: 1;
            width: 100%;
            height: auto;
            /*    transition: all 0.5s ease-in;*/
        }
    
        /*
    .video-card:hover .preview-video {
        display: block;
        opacity: 1; 
    }
    */
    
        /*
    .video-card:hover .preview-img {
        display: none; 
        transition: all 0.5s ease-out;
    }
    */
    
        /* 确保父容器设置尺寸限制 */
        .build-play-img {
            position: relative;
            width: 100%;
            /* 父容器占满宽度 */
            height: 0;
            padding-top: 52.4%;
            /* 高度与宽度比保持16:9（或根据需要调整） */
            overflow: hidden;
            /* 超出部分隐藏 */
            background-color: #000;
            /* 设置背景色避免空白区域 */
            margin-bottom: 0px;
        }
    
        /* 确保封面图片和视频适应父容器 */
        .build-play-img img,
        .build-play-img video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            /* 填满父容器宽度 */
            height: 100%;
            /* 填满父容器高度 */
            object-fit: cover;
            /* 确保内容裁剪，不变形 */
            z-index: 1;
            /* 确保图片和视频层级一致 */
        }
    
        /* 鼠标移入时的视频 */
        /*
    .video-card:hover .preview-video {
        z-index: 2; 
    }
    */
    
        /* 鼠标移入时隐藏图片 */
        /*
    .video-card:hover .preview-img {
        display: none;
    }
    */
    
        .card {
            background-color: transparent;
            border: 0px;
            -webkit-transition: 0.9s;
            -moz-transition: 0.9s;
            transition: 0.9s;
            border-radius: 9px;
            /*            padding-bottom: 15px;*/
        }
    
        .bx.bxs-download {
            color: #0066cc;
            padding-left: 10px;
            font-size: 1rem;
            cursor: pointer;
        }
