main .banner{
            margin-bottom: -205px;
        }
        main .banner .swp-box{
            position: relative;
        }
        main .banner .swp{
            height: 56vw;
            max-height: 1012px;
            
        }
        main .banner .lft{
            position: absolute;
            background: linear-gradient(269deg, rgba(17, 19, 25, 0) 1%, rgba(17, 19, 25, 0.02) 10%, rgba(17, 19, 25, 0.05) 18%, rgba(17, 19, 25, 0.12) 25%, rgba(17, 19, 25, 0.2) 32%, rgba(17, 19, 25, 0.29) 38%, rgba(17, 19, 25, 0.39) 44%, rgba(17, 19, 25, 0.5) 50%, rgba(17, 19, 25, 0.61) 57%, rgba(17, 19, 25, 0.71) 63%, rgba(17, 19, 25, 0.8) 69%, rgba(17, 19, 25, 0.88) 76%, rgba(17, 19, 25, 0.95) 83%, rgba(17, 19, 25, 0.98) 91%, rgb(17, 19, 25) 100%);
            width: 30%;
            height: 100%;       
            top: 0px;
        }
        main .banner .top{
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 120px;
            background-image: linear-gradient(179.5deg, rgba(17, 19, 25, 0.88) 0%, rgba(17, 19, 25, 0.89) 9%, rgba(17, 19, 25, 0.85) 17%, rgba(17, 19, 25, 0.79) 24%, rgba(17, 19, 25, 0.72) 31%, rgba(17, 19, 25, 0.64) 37%, rgba(17, 19, 25, 0.55) 44%, rgba(17, 19, 25, 0.45) 50%, rgba(17, 19, 25, 0.35) 56%, rgba(17, 19, 25, 0.26) 63%, rgba(17, 19, 25, 0.18) 69%, rgba(17, 19, 25, 0.11) 76%, rgba(17, 19, 25, 0.05) 83%, rgba(17, 19, 25, 0.01) 91%, rgba(17, 19, 25, 0) 100%);     
        }
        main .banner .rht{
            background: linear-gradient(90deg, rgba(17, 19, 25, 0) 1%, rgba(17, 19, 25, 0.02) 10%, rgba(17, 19, 25, 0.05) 18%, rgba(17, 19, 25, 0.12) 25%, rgba(17, 19, 25, 0.2) 32%, rgba(17, 19, 25, 0.29) 38%, rgba(17, 19, 25, 0.39) 44%, rgba(17, 19, 25, 0.5) 50%, rgba(17, 19, 25, 0.61) 57%, rgba(17, 19, 25, 0.71) 63%, rgba(17, 19, 25, 0.8) 69%, rgba(17, 19, 25, 0.88) 76%, rgba(17, 19, 25, 0.95) 83%, rgba(17, 19, 25, 0.98) 91%, rgb(17, 19, 25) 100%);
            width: 15%;
            height: 100%;
            top: 0px;
            right: 0px;
            position: absolute;
        }
        main .banner .btm{
            width: 100%;
            height: 30%;
            background-image: linear-gradient(rgba(17, 19, 25, 0) 2%, rgb(17, 19, 25) 94%);
            position: absolute;
            bottom: 0px;
        }
        main .banner .slide .item{
            opacity: 0;
            transition: opacity 1.2s cubic-bezier(0.83, 0.01, 0.22, 0.66);
        }
        main .banner .slide .item.active{
            opacity: 1;
        }
        main .banner .des{
            position: absolute;
            bottom: 360px;
            left: 0;
            z-index: 3;
            color: #fff;            
        }
        
        main .banner .des .item:nth-child(n + 2){
            position: absolute;
            top: 0;
            left: 0;
        }
        main .banner .des .name{
            font-size: 36px;
            font-weight: bold;
        }
        main .banner .des .type{
            margin-top: 48px;
            margin-bottom: 16px;
        }
        main .banner .des .type p{
            overflow: hidden;
            min-width: 40px;
            line-height: 24px;
            font-size: 14px;
            border-radius: 2px;
            background: #03b74d;
            margin-right: 8px;
            color: #000;
            text-align: center;
        }
        main .banner .des .type p span{
            display: inline-block;
            padding: 0px 8px;
        }
        main .banner .des .type p.other{
            color: rgb(236, 236, 236);    
            background-color: rgba(255, 255, 255, 0.2);
        }
        main .banner .des .type p.other span:first-child{
            background: #03b74d;
        }
        main .banner .des .dtl{
            font-size: 16px;
        }
        main .banner .des .dtl .score img{
            width: 14px;
            margin-right: 4px;
        }
        
        main .banner .des .dtl p{
            text-shadow:rgba(0,0,0,0.7) 1px 1px 0px
        }
        main .banner .des .dtl .score p{
            font-size: 16px;
            color:#03b74d;
        }
        main .banner .des .dtl i{
            width:2px;
            height: 12px;
            background: #fff;
            opacity: .2;
            margin:0px 8px;
        }
        main .banner .des .tags{
            margin: 12px 0 16px;
        }
        main .banner .des .tags p{
            padding:0px 6px;
            line-height: 20px;
            margin-right:8px;
            font-size: 13px;
            color:rgb(236,236,236);
            background:rgba(255,255,255,0.08);
            border-radius:2px;
        }
        main .banner .des .tags p:last-child{
            margin-right: 0px;
        }
        main .banner .des .intro{
            width: 525px;
            height: 72px;
            line-height: 24px;
            font-size: 16px;
        }

        main .banner .swp>.btn{
            position: absolute;
            top: 35%;
            cursor: pointer;
            width: 56px;
            opacity: .7;
            z-index: 5; 
        }
        main .banner .swp>.btn:hover{
            opacity: 1;
        }
        main .banner .swp>.btn img{
            width: 40%;
            filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 1));
        }
        main .banner .btn.next{
            left: calc(100% - 4px);
        }
        main .banner .btn.prev{
            right: calc(100% - 4px);
        }
        main .banner .btn.prev img{
            transform: translate(-50%,-50%) rotate(-180deg);
        }
        main .banner .play-collect{
            left: 0;
            bottom: 256px;
            z-index: 5;
        }
        main .banner .play-collect .btn{
            width: 60px;
            cursor: pointer;
        }
        main .banner .play-collect .collect img{
            width: 38%;
        }
        main .banner .pagination{
            position: absolute;
            z-index: 5;
            bottom: 256px;
            right: 0;
        }
        main .banner .pagination p{
            border-radius: 1.5px;
            width: 8px;
            height: 8px;
            transition: .3s .3s;
            background-color: rgba(255, 255, 255, 0.3);
        }
        main .banner .pagination p + p{
            margin-left: 8px;
        }
        main .banner .pagination .active{
            width: 16px;
            background: #fff;
        }
        
        


        main .media-info .txt .tags{
            margin: 8px 0;
        }
        main .media-info .txt .tags p{
            padding:2px 4px;
            margin-right:8px;
            font-size: 13px;
            color:rgb(236,236,236);
            background:rgba(255,255,255,0.08);
            border-radius:2px;
        }
        main .media-info .txt .tags p:last-child{
            margin-right: 0px;
        }
    
        

        main .ttl{
            font-size: 28px;
            font-weight: bold;
            color: #fff;
            line-height: 1;
        }
        main .media{
            position: relative;
            z-index: 2;
        }
        
        main .list-contain{
            position: relative;
        }
        main .list-contain .flip-btn{
            padding: 0 16px;
            width: 16px;   
            opacity: .5;
            box-sizing: content-box;            
        }
        main .list-contain .flip-btn:hover{
            opacity: 1;
        }
        main .list-contain .next{
            left: 100%;
        }
        main .list-contain .prev{
            right: 100%;
        }
        main .list-contain .prev img{
            transform: rotateY(180deg);
        }
        main .media .list-box{
            overflow: hidden;
            padding-top: 16px;
            padding-bottom: 40px;
        }
        main .media .list{
            margin-left: -16px;
            white-space:nowrap;
        }
        main .media .list.active{
            transition: .3s transform;
        }
        main .media .list .item{
            width: calc(12.5% - 16px);
            margin-left: 16px;
            flex-shrink: 0;
            position: relative;
        }
        main .media.star .list{
            margin-left: -30px;
        }
        main .media.star .list .item{
            width: calc(100% / 11 - 30px);
            margin-left: 30px;
            transition: 0.3s transform;            
        }
        main .media.star .list .item:hover{
            transform: scale(1.05);
            
        }
        main .media.star .list .item:hover .avatar{
            border: 2px solid #03b74d;
        }
        main .media.star .list .item .avatar{
            overflow: hidden;
        }
        main .media.star .list .item .name{
            color: #fff;
            text-align: center;
            margin-top: 14px;
            font-size: 16px;
        }
        main .media.star .list .item:hover .name{
            color: #03b74d;
        }

        main .media .list .item>.cover{
            border-radius:4px;
            overflow: hidden;
        }
        
        main .media .list .item>.cover::before{
            padding-bottom: 133.3%;
        }
        main .media .list .item>.cover .series{
            background: linear-gradient(0deg, rgba(10, 12, 15, 0.8) 0%, rgba(10, 12, 15, 0.74) 4%, rgba(10, 12, 15, 0.59) 17%, rgba(10, 12, 15, 0.4) 34%, rgba(10, 12, 15, 0.21) 55%, rgba(10, 12, 15, 0.06) 78%, rgba(10, 12, 15, 0) 100%);
            height: 60px;
            position: absolute;
            left: 0px;
            right: 0px;
            bottom: 0px;
        }
        main .media .list .item>.cover .series .t{
            font-size: 14px;
            position: absolute;
            left: 8px;
            right: 10px;
            bottom: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #fff;
        }
        main .cover .right-top{
            position: absolute;
            top:0;
            color:#000;
            right: 0;
            padding: 0px 6px;
            line-height: 20px;
            font-size: 12px;
            background: #03b74d;
            text-align: center;
            border-radius: 2px 4px;
        }
        main .cover .right-top span{
            font-weight: bold;
        }
        
        main .media .list .item>.txt{
            height: 40px;
            box-sizing: content-box;
            padding-top: 10px;
            font-size: 14px;
            border-bottom-left-radius:4px;
            border-bottom-right-radius:4px;
            overflow: hidden;
        }
        main .media .list .item>.txt .name{
            color: rgb(255, 255, 255);
            opacity: 0.8;
            font-weight: 500;
            font-size: 14px;
            
        }
        main .media .list .item:hover>.txt .name,
        main .media-info .txt .name:hover{
            color: #03b74d;
        }

        main .media-info{
            cursor: pointer;
            /* display: none; */
            /* display: block; */
            /* width: 282px; */
            color: #fff;
            z-index: 10;
            position: absolute;
            animation: .25s ease 0s 1 normal none running scaleMedia;
        }
        main .media-info .cover img{
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }
        main .media-info .cover::before{
            padding-bottom: 56%;
        }
        main .play-collect{
            position: absolute;
        }
        main .media-info .cover .play-collect{
            right: 0;
            bottom: 12px;
        }
        main .play-collect .btn,
        main .continue .list .item .cover .play{
            width: 40px;
            background: #03b74d;
        }
        main .play-collect .btn img,
        main .continue .list .item .cover .play img{
            width: 33.3%;
        }
        main .play-collect .play img,
        main .continue .list .item .cover .play img{
            margin-left: 2px;
        }
        main .play-collect .collect{
            margin: 0 12px;
            background: rgba(255,255,255,.75);
        }
        main .play-collect .btn.collect:hover{
            background: rgba(255,255,255,.95);
        }
        main .play-collect .collect img{
            width: 40%;
        }
        main .media-info .txt{    
            height: 258px;
            padding:0px 8px;
            background:rgb(26,28,34);
        }
        main .media-info .txt .name{
            font-size: 20px;
            line-height: 24px;
            padding-top: 12px;
            margin-bottom: 8px;
        }
        main .media-info .txt .num .score img{
            width: 12px;
            margin-right: 4px;
        }
        
        main .media-info .txt .num p{
            font-size: 14px;
            text-shadow:rgba(0,0,0,0.7) 1px 1px 0px;
        }
        main .media-info .txt .num .score p{
            font-size: 16px;
            color:#03b74d;
        }
        main .media-info .txt .num i{
            width:2px;
            height: 10px;
            background: #fff;
            opacity: .2;
            margin:0px 6px;
        }
        main .media-info .txt .tags{
            margin: 8px 0;
        }
        main .media-info .txt .tags p{
            padding:2px 4px;
            margin-right:8px;
            margin-bottom:6px;
            font-size: 13px;
            color:rgb(236,236,236);
            background:rgba(255,255,255,0.08);
            border-radius:2px;
        }
        main .media-info .txt .tags p:last-child{
            margin-right: 0px;
        }
    
        main .media-info .txt .des{
            font-size: 14px;
            line-height: 20px;
            height: 118px;
        }
        main .media-info .txt .des p{
            -webkit-line-clamp: 5;
        }
        main .media-info .txt .more{
            font-size: 14px;
            color: #03b74d;
            justify-content: flex-end;
        }
        main .media-info .txt .more img{
            width: 6px;
            margin-left: 4px;
        }

        @keyframes scaleMedia {
            0% {
                transform: scale(0.95);        
            }100% {
                transform: scale(1)
            }  
        }

        main .library{
            margin-bottom: 40px;
        }
        main .library .fluid{
            height: 36px;
            overflow: hidden;
        }
        main .library .fluid img{
            width: 16px;
            margin-right: 8px;
        }
        main .library .fluid a{
            font-size: 14px;
            height: 36px;
            margin-right: 12px;
            padding: 0px 17px;
            line-height: 36px;
            color: rgb(169, 169, 172);
            background: rgb(35, 37, 43);
            border-radius: 4px;
            white-space: nowrap;
        }
        main .library .fluid a:hover{
            color: #Fff;
        }

        
        
        main .continue .fluid-expand{
            overflow: hidden;
        }
        main .continue .fluid-expand>.flex{
            margin-left: -16px;            
        }
        main .continue .list .item{
            width: calc(50% / 3 - 16px);
            margin-left: 16px;
            cursor: pointer;
            flex-shrink: 0;
            transition: .3s ease transform;
        }
        main .continue .list .item:hover{
            transform: scale(1.05);
        }
        main .continue .list .item .cover{
            border-radius: 4px;
            overflow: hidden;   
        }
        main .continue .list .item .cover::before{
            padding-bottom: 56.25%;
        }
        main .continue .log{
            text-align: center;
            white-space: nowrap;
            transition: initial !important;
        }
        main .continue .log:hover{
            transform: scale(1.05);
        }
        main .continue .log .t{
            font-size: 16px;
            color: rgb(236, 236, 236);
        }
        main .continue .log .btn{
            max-width: 100%;
            min-width: 88px;
            padding: 10px 12px;
            margin-top: 16px;
            font-size: 14px;
            line-height: 14px;
            font-weight: bold;
            background: #03b74d;
            border-radius: 4px;
        }
        main .continue .log .btn:hover,
        main .play-collect .btn:hover,
        main .continue .list .item .cover .play:hover{
            background: #1cc749;    
        }
        main .continue .list .item .cover .progress{
            background-color: rgba(0, 0, 0, 0.2);
            height: 4px;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
        }
        main .continue .list .item .cover .progress .per{
            background-color: #03b74d;
            width: 0%;
            height: 100%;
        }
        main .continue .list .item .cover .play{
            position: absolute;
            right: 12px;
            bottom: 16px;
        }
        main .continue .list .item .txt{
            height: 40px;
            padding-top: 10px;
        }
        main .continue .list .item .txt .name{
            color: rgb(255, 255, 255);
            opacity: 0.8;
        }
        main .continue .list .item:hover .txt .name{
            color: #03b74d;
        }
        
        
        

        main>.ad{
            margin-bottom: 48px;            
            height: 100px;
        }

        main .foot{
            display: none;
            position: fixed;
            width: 100%;
            left: 0;
            top: 100%;
            transform: translateY(-80px);
            padding-top: 30px;
        }
        main .foot .box{
            width: 1180px;
            margin: 0 auto;
        }

        @media (max-width: 1808px) {
            main .banner .fluid{
                padding: 0px;
                width: 100%;
            }
            main .banner .rht{
                display: none;
            }
            main .banner .des,
            main .banner .play-collect{
                left: 64px;
            }
            main .banner .pagination{
                right: 64px;
            }
            main .banner .btn.next{
                right: 0;
                left: auto;
            }
            main .banner .btn.prev{
                left: 0;
                right: auto;
            }
        }
        
        @media (max-width: 1680px) {
            main .banner{
                margin-bottom: -15.5%;
            }
            main .banner .des{
                bottom: calc(32% + 24px + 3.5vw);
            }
            main .banner .des .type{
                margin-top: 24px;
                margin-bottom: 12px;
            }
            main .banner .des .type p{
                border-radius: 2px;
                margin-right: 8px;
                font-size: 14px;
                line-height: 20px;
            }
            main .banner .des .type p span{
                padding: 0px 6px;
            }
            main .banner .des .dtl .score p{
                font-size: 14px;
            }
            main .banner .des .tags{
                margin-bottom: 12px;
            }
            main .banner .des .intro{
                height: 42px;
                line-height: 21px;
                font-size: 14px;
                -webkit-line-clamp: 2;
            }
            main .banner .play-collect .btn{
                width: 3.51562vw;
            }
            main .banner .play-collect,
            main .banner .pagination{
                bottom: 32%;
            }
            main .banner .swp>.btn{
                width: 40px;
            }
            main .banner .btn.next{
                right: 10px;
            }
            main .banner .btn.prev{
                left: 10px;
            }
            main .banner .des .name{
                font-size: 32px;
            }
            main .banner .des .dtl{
                font-size: 14px;
            }
            main .banner .pagination p{
                width: 6px;
                height: 6px;
                border-radius: 1px;
            }
            main .banner .pagination p + p{
                margin-left: 6px;
            }
            main .banner .pagination .active{
                width: 12px;
            }
            

            
            main .ttl{
                font-size: 22px;
            }
            main .media .list .item{
                width: calc(50% / 3 - 16px);
            }
            main .media .list .item .cover .series .t{
                font-size: 12px;
            }
            main .list-contain .flip-btn{
                width: 13px;
            }

            main .continue .list .item{
                width: calc(25% - 16px);
            }
            main .play-collect .btn,
            main .continue .list .item .cover .play{
                width: 32px
            }
            main .media.star .list{
                margin-left: -18px;
            }
            main .media.star .list .item{
                width: calc(12.5% - 18px);
                margin-left: 18px;
            }
            
            main>.ad{
                margin-bottom: 40px;
            }
        }
        @media (min-width: 768px) and (max-width: 1679px) {
        
        }
        

        @media (max-width: 1023px){
            main .banner{
                margin-bottom: -8.59%;
            }
            main .banner .des{
                bottom: calc(18% + 52px);
            }
            main .banner .des .name{
                font-size: 3.125vw;
            }
            main .banner .des .type{
                margin-top: 16px;
            }
            main .banner .play-collect,
            main .banner .pagination{
                bottom: 18%;
            }

            main .media .list .item{
                width: calc(25% - 16px);
                transition: .3s transform;
            }
            main .media .list .item:hover{
                transform: scale(1.05);
            }

            main .library .fluid{
                height: 84px;
            }
            main .library .fluid a{
                margin-bottom: 12px;
            }

            main .continue .list .item{
                width: calc(100% / 3 - 16px);
            }

            main .media.star .list{
                margin-left: -16px;
            }
            main .media.star .list .item{
                width: calc(50% / 3 - 16px);
                margin-left: 16px;
            }

            main>.ad{
                margin-bottom: 36px;
            }
        }

        
        @media (min-width: 768px){
            #contn{
                padding-top: 0px;
            }
            
        }
        @media (max-width: 767px){
            main .banner{
                margin-bottom: 16px;
            }
            main .banner .swp>.btn,
            main .banner .play-collect,
            main .banner .des .item>*:nth-child(n + 4),
            main .banner .lft,
            main .continue .list .item .cover .progress{
                display: none;
            }
            main .banner .des .name{
                font-size: 20px;
            }
            main .banner .des{
                left: 13px;
                bottom: 15px;
            }
            main .banner .des .type{
                margin-top: 12px;
            }
            main .banner .des .type p{
                font-size: 12px;
                line-height: 18px;
                border-radius: 2px;
                min-width: 24px;
                margin-right: 6px;
            }
            main .banner .des .type p span{
                padding: 0 4px;
            }
            main .banner .des .dtl{
                font-size: 12px;
            }
            main .banner .des .dtl i{
                margin: 0 6px;
                height: 10px;
            }
            main .banner .pagination{
                right: 13px;
                bottom: 15px;
            }
            main .banner .pagination p{
                width: 3px;
                height: 3px;
                border-radius: .5px;
            }
            main .banner .pagination p + p{
                margin-left: 4px;
            }
            main .banner .pagination .active{
                width: 6px;
            }

            main .library{
                margin-bottom: 28px;
            }
            main .ttl{
                font-size: 20px;
            }

            main .fluid-expand{
                margin: 0px !important;
                padding-left: 0px !important;
                padding-right: 0px !important;
                padding-top: 12px;
            }
            main .media .list{
                margin-left: -8px !important;
            }
            main .media .list-box{
                padding-top: 12px;
                padding-bottom: 16px;
            }
            main .media .list .item{
                width: calc(100% / 3 - 8px);   
                margin-left: 8px !important;
            }
            main .media .list .cover .right-top{
                line-height: 14px;
                font-size: 12px;
                padding: 0px 4px;
                border-radius: 1px 2px;
            }
            main .list-contain .flip-btn{
                width: 10px;
                padding: 0 12px;
            }
            main .list-contain .next{
                left: calc(100% - 12px);
            }
            main .list-contain .prev{
                right: calc(100% - 12px);
            }

            main .continue .list .item{
                width: calc(50% - 8px);
            }
            main .continue .log .t{
                font-size: 12px;
            }
            main .continue .log .btn{
                margin-top: 8px;
                font-size: 13px;
                padding: 8px 12px;
            }
            
            main .media.star .list .item{
                width: calc(25% - 8px);
            }

            main>.ad{
                margin-bottom: 28px;
            }
        }
        @media (max-width: 480px){
            
            main .ttl{
                font-size: 15px;
            }

        }