// PC版
@media screen and (min-width: 768px) {
    .phone {
        display: none !important;
    }
    .banner {
        padding-top: 30px;
        background: #f5f5f5;
        padding-bottom: 30px;
		
		.outer-container {
		  width: 42%;
		  margin-right: 13px;
		
		  .inner-container {
			float: left;
		    background-color: black;
		    width: calc(~"50% - 6.5px"); 
			height: calc(~"50% - 6.5px"); 
		    box-sizing: border-box;
		    position: relative;
			
			
		
		    a {
		      width: 100%;
			  height: 100%;
		      background: #f8f8f8;
		      position: absolute;
		      color: #000;
		      text-decoration: none;
			  .img {
			    width: 100%;
			    height: 100%;
			    position: relative;
				background: #000000;
			    overflow: hidden;
			  	img {
			  		width: 100%;
			  		height: 100%;
					
			  		opacity: 0.2;
			  		}
			    }
			  
			  .overlay {
			    position: absolute;
			    top: 0;
			    left: 0;
			    width: 100%;
			    height: 100%;
			    background-color: rgba(0, 0, 0, 0.7);
			    color: white !important;
			    text-align: center;
			    padding: 10px;
			    opacity: 0;
			    transition: opacity 1s ease;
			    box-sizing: border-box;
			  
			    .imgContent {
			      text-align: center;
			      height: 100%;
				  display: flex;
				  flex-direction: column;
				  justify-content: center;
				  line-height: 1.4;
			  
			      p {
					color: #fff;
			        flex: 0;
			        margin: 0;
			        font-weight: bold;
			        font-size: 1.155vw;
			      }
			    }
			  }
		
		      &:after {
		        content: "";
		        width: 19%;
		        height: 30%;
		        background: url("../../img/play2.png") no-repeat center center;
		        background-size: 100% 100%;
		        position: absolute;
		        top: 50%;
		        left: 50%;
		        transform: translate(-50%, -50%);
		        z-index: 1;
		        opacity: 1;
		        transition: opacity 1s ease;
		      }
		    }
			
			
			&:hover {
			  .overlay {
			    opacity: 1;
			  }
			
			  a:after {
			    opacity: 0;
			  }
			}
		
		    &:nth-child(1) {
			  margin-right: 6.5px;
		      margin-bottom: 13px;
		    }
		
		    &:nth-child(2) {
		      margin-bottom: 13px;
		      margin-left: 6.5px;
		    }
			&:nth-child(3) {
			  margin-right: 6.5px;
			}
		
		    &:nth-child(4) {
		      margin-left: 6.5px;
		    }
		  }
		}
		
		.button-container {
		  width: 17%;
		  display: flex;
		  flex-wrap: wrap;
		
		  .inner2-container {
		    background-color: #DA0300;
		    box-sizing: border-box;
		    width: 100%;
			height: calc(~"50% - 6.5px"); 
			.imgzhibo {
			  width: 100%;
			  height: 100%; 
			  display: flex;
			  justify-content: center;
			  align-items: center;
				img {
				width:32%;
				height: 41.8%;
				transform-style: preserve-3d; 
				transition: transform 1s !important; 
				}
				&:hover img{
				  animation: rotate-180-then-reset linear 1s forwards;
				}
				
				@keyframes rotate-180-then-reset {
				  50% {
				    transform: rotateY(180deg);
				  }
				  100% {
				    transform: rotateY(0deg);
				  }
				}
			}
			.imgzhuanti {
			  width: 100%;
			  height: 100%; 
			  background: url("../../img/btn4.png") no-repeat center center;
			  display: flex;
			  justify-content: center;
			  align-items: center;
				img {
				width:40.6%;
				height: 33.5%;
				transform-style: preserve-3d; 
				transition: transform 1s !important;
				}
				&:hover img{
				  animation: rotate-180-then-reset linear 1s forwards;
				}
				
				@keyframes rotate-180-then-reset {
				  50% {
				    transform: rotateY(180deg);
				  }
				  100% {
				    transform: rotateY(0deg);
				  }
				}
			}
		
		    &:nth-child(1) {
		      margin-bottom: 13px;
		    }
		
		  }
		}
		#new-banner {
			width: 43%;
			aspect-ratio: 16 / 10;
			margin-right: 13px;
		    .swiper-slide {
		        width: 100%;
		        position: relative;
		        border-radius: 0px;
		        overflow: hidden;
				.img{
					width: 100%;
					height: 100%;
					img {
					    width: 100%;
						height: 100%;
					}
				}
				.banner_txt {
				  position: absolute;
				  left: 0;
				  right: 0;
				  z-index: 1;
				  bottom: 0;
				  height: 63px;
				  padding-left: 5%;
				  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.6),  rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7));
				  display: flex;
				  align-items: center;
				  span {
				    color: #fff;
				    font-size: 20px;
				  }
				}
		        
			}
			.swiper-slide{
				a{
					position: absolute;
					width: 100%;
					height: 100%;
				}
			}
			.swiper-pagination{
			        bottom: 19px;
			        width: auto;
			        left: auto;
			        right: 3%;
			       }
			
			.swiper-pagination .swiper-pagination-bullet{
			      margin: 0 5px;
				  width: 11px;
				  height: 11px;
			      background-color: #fff;
			      opacity: unset;
			  
			}
			.swiper-pagination-bullet-active {
			    background: #FF1818 !important;
			    width: 27px !important;
			    border-radius: 6px;
			}
			
			
		}
		
	 
		
	

		
		
		
		
		
		
		
		
		
		
        .left {
			background-color:#000100;
            display: block;
            width: 77.8%;
            height: 580px;
            img{
                height: 100%;
                width: 100%;
                object-fit: contain;
            }
        }
		
		
		
		
        .right {
            width: 22.2%;
            height:580px;
            .item {
                cursor: pointer;
                background: url("../../img/banner_bg_01.jpg")#3e3e3e;
                width: 100%;
                height: 90.8px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                padding: 18px 24px;  
                a{
                    color: #fff;
                    font-size: 16px;
                    text-decoration: none;
					&:nth-child(2){
				
			         color: red;
			
					}
                }
            }
            .active {
                background: #C90000;
            }
            .type {
				
                width:100%;
                height: 126px;
                display: flex;
                &-txt{
                    flex: 1;
                    background: url("../../img/banner_bg_03.jpg");
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-flow: column;
                    a{
                        font-size: 24px;
                        color: #FFFFFF;
                        line-height: 56px;
                    }
                }
            }
        }
    }

    .nav-titles {
        padding-top: 56px;
        .item {
            display: block;
            color: #000;
            text-decoration: none;
            margin-left: 4px;
            cursor: pointer;
            padding: 0 46px;
            width: 190px;
            height: 50px;
            padding-top: 10px;
            text-align: justify;
            border-radius: 3px;
            background: #dfdfdf;
            font-size: 23px;
            i {
                display: inline-block;
                width: 100%;
            }
            &:nth-child(1) {
                margin-left: 0;
            }
        }
        .active {
            color: #fff;
            background: #C90000;
        }
    }
    .title-border {
        &::before {
            content: "";
            width: 100%;
            height: 3px;
            background: #dfdfdf;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    }
    .body-list {
        padding-top: 34px;
        &>div{
            display: none;
        }
        .item {
            margin-bottom: 22px;
            display: inline-block;
            width: 19%;
            background: #f8f8f8;
            position: relative;
            color: #000;
            text-decoration: none;
            
            .img{
                width: 100%;
				aspect-ratio: 16 / 11;
                // height: 206px;
                overflow: hidden;
                &::after {
                    content: "";
                    width: 13.2%;
                    height: 19.3%;
                    background: url("../../img/play.png") no-repeat center center;
                    background-size: 100% 100%;
                    position: absolute;
                    bottom: 10px;
                    left: 10px;
                    z-index: 1;
                }
            }
            img {
				background-color: #000;
                width: 100%;
                height: 100%;
                object-fit: scale-down;
            }
            &:hover {
                .img{
                    img{
                        transform: scale(1.1);
                    }
                }
            }
            margin-right: 0.5%;
            &:nth-child(5n) {
                margin-right: 0;
            }
			&:nth-child(5n+1) {
			    margin-left: 1.1%;
			}
            .title {
                // padding: 0 20px;
                // font-size: 16px;
                // text-overflow: ellipsis;
				width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                // display: -webkit-box;
				white-space: nowrap;
                // -webkit-line-clamp: 1;
                // -webkit-box-orient: vertical;
				padding: 0 20px;
				font-size: 17px;
				margin-top: 12px;
            }
            .time {
               padding: 8px 19px 19px 19px;
                .left {
                    color: #a7a7a7;
                    font-size: 14px;
                }
                .right {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    img {
                        // width: 20px;
                        width: auto;
                        height: 10px;
                        object-fit: fill;
                        margin-right: 4px;
                    }
                    font-size: 16px;
                    color: #ff680b;
                }
            }
        }
    }
    .list04{
        display: block !important;
        .item{
            position: relative;
            .img{
                width: 100%;
                height: 206px;
                overflow: hidden;
                &::after {
                    display: none;
                }
            }
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            &:hover {
                img{
                    transform: scale(1.1);
                }
            }
            
        }
    }
}

// 手机
@media screen and (max-width: 768px) {
    .banner {
        height: 304px;
        background: #000000;
        padding: 10px 0;
        .swiper-container {
            height: 186px;
            .swiper-slide {
                width: 332px;
                position: relative;
                border-radius: 4px;
                overflow: hidden;
                .item{
                    display: block;
                }
                img {
                    width: 100%;
                }
                .title {
                    position: absolute;
                    left: 10px;
                    bottom: 10px;
                    z-index: 10;
                    font-size: 14px;
                    color: #fff;
                }
                .page {
                    position: absolute;
                    bottom: 10px;
                    right: 30px;
                    color: #fff;
                    span {
                        font-size: 18px;
                        color: red;
                    }
                    font-size: 9px;
                }
            }
        }

        .type {
            margin: 10px 24px;
            padding-bottom: 12px;
            height: 97px;
            display: flex;
            &-txt{
                flex: 1;
                background-color: #800000;
                display: flex;
                border-top: 2px solid #da0300;
                justify-content: center;
                align-items: center;
                a{
                    padding: 0 12px;
                    height: 51px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 21px;
                    color: #FFFFFF;
                    line-height: 33px;
                    background-color: #DA0300;
                    text-decoration: none;
                    &:last-child{
                        margin-left: 12px;
                    }
                }
            }
            img{
                height: 100%;
            }
        }
		.type_new {
		    margin: 10px 8px;
		    padding-bottom: 12px;
		    height: 97px;
		    display: flex;
		    &-txt{
		        flex: 1;
		        // background-color: #800000;
		        display: flex;
		        // border-top: 2px solid #da0300;
		        justify-content: center;
		        align-items: center;
		        a{
		            padding: 0 12px;
		            width: 47%;
					height: 76px;
		            display: flex;
		            justify-content: center;
		            // align-items: center;
		            font-size: 17px;
		            color: #FFFFFF;
					font-weight: bold;
		            line-height: 56px;
		            // background-color: #DA0300;
		            text-decoration: none;
					.icons_zhibo{
						max-width: 29%;
						height: 70%;
					    margin-top: 4px;
						margin-left: 14%;
						object-fit: contain;
					}
					.zhibo_title{
						margin-left: 7%;
						 color: #FFFFFF;
					}
					.icons_zhuanti{
						max-width: 37%;
						max-height: 85%;
						margin-left: 5%;
						object-fit: contain;
					}
					.zhuanti_title{
						margin-left: 7%;
						 color: #FFFFFF;
					}
		            &:last-child{
		                margin-left: 18px;
		            }
		        }
		    }
			img{
			        height: 100%;
			    }
			}
    }
    .body-list {
        padding: 12px;
        background: #f8f8f8;
        display: flex;
        flex-direction: column;
        align-items: center;
        .item {
            font-size: 18px;
            width: 100%;
			background-color: #fff;
            margin-top: 17px;
            margin-left: auto;
            margin-right: auto;
            display: block;
            box-shadow: 0 0 10px 0 #aaaaaa;
            position: relative;
            overflow: hidden;
            border-radius: 5px;
            color: #000;
            text-decoration: none;
            .img{
                width: 100%;
                height: 206px;
                overflow: hidden;
                &::after {
                    content: "";
                    width: 59px;
                    height: 59px;
                    background: url("../../img/play.png") no-repeat center center;
                    background-size: 100% 100%;
                    // background-color: #000;
                    position: absolute;
                    top: 130px;
                    left: 9px;
                    z-index: 1;
                }
            }
            
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            &:hover {
                img{
                    transform: scale(1);
                }
            }
            .title {
                padding: 0 20px;
                font-size: 17px;
                margin-top: 12px;
                text-overflow: ellipsis;
                -moz-text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
            .time {
                padding: 0 20px;
                padding-bottom: 10px;
                .left {
                    font-size: 14px;
                    color: #a7a7a7;
                }

                .tag {
                    width: 59px;
                    height: 21px;
                    font-size: 13px;
                    color: #fff;
                    text-align: center;
                    line-height: 21px;
                    background: #bf0614;
                    border-radius: 3px;
                }
            }
        }
    }
    .zx {
        font-size: 18px;
        padding: 22px;
        padding-bottom: 0;
        background: #f8f8f8;
    }
    .spzt {
        background: none;
        height: 180px;
    }
}