* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     background-color: #f7f7f5;
     /* color: #333; */
     /* line-height: 1.6; */
 }

 .container {
     max-width: 1200px;
     margin: 0 auto;
 }

 /* 主视频区域 */
 .main-video {
     width: 1000px;
     min-height: 623px;
     border-radius: 10px;
     overflow: hidden;
     position: relative;
     background-color: #ffffff;
     margin: auto;
     margin-top: 60px;
 }

 .main-video img {
     width: 1000px;
     height: 548px;
     border-radius: 10px 10px 0px 0px;
     box-sizing: border-box;
     display: block;
 }

 .main-video video {
     width: 1000px;
     height: 548px;
     border-radius: 10px 10px 0px 0px;
     box-sizing: border-box;
     display: block;
 }

 .play-btn {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 120px;
     height: 120px;
     background: rgba(0, 0, 0, 0.6);
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .play-btn img {
     width: 100%;
     height: 100%;
 }

 .play-btn:hover {
     background: rgba(0, 0, 0, 0.8);
     transform: scale(1.05) translate(-50%, -50%);
 }

 .play-btn svg {
     width: 65px;
     height: 49px;
     fill: white;
 }

 .video-title {
     width: 100%;
     min-height: 75px;
     background-color: #ffffff;
     padding: 23px 25px;
     font-weight: 500;
     font-size: 18px;
     color: #3C3E42;
 }

 /* 相关视频 */
 .section-title {
     font-weight: 700;
     font-size: 24px;
     color: #3D3D3D;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 20px;
     margin-top: 45px;
     margin-bottom: 20px;
 }
 .section-title span {
      color: #808180;
 }
 .section-title span:hover {
     color: #108CDA;
 }

 .section-title a {
     font-weight: 400;
     font-size: 14px;
     color: #808180;
     text-decoration: none;
     transition: color 0.2s;
 }

 .section-title a:hover {
     color: #0a66b8;
 }

 .related-videos {
     display: flex;
     gap: 16px;
     flex-wrap: wrap;
     margin-bottom: 25px;
 }

 .video-card {
     position: relative;
     width: 389px;
     height: 301px;
     border-radius: 10px;
     overflow: hidden;
     background: #ffffff;
     border: 1px solid #EAEAEA;
     box-sizing: border-box;
     /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); */
     transition: transform 0.2s ease;
 }

 .video-card:hover {
     transform: translateY(-4px);
 }

 .video-card img {
     width: 389px;
     height: 237px;
     border-radius: 10px 10px 0px 0px;
 }

 .video-card .play-icon {
     position: absolute;
     top: 40%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 59px;
     height: 59px;
     background: rgba(0, 0, 0, 0.6);
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
 }

 .video-card .play-icon svg {
     width: 28px;
     height: 21px;
     fill: white;
 }

 .video-card .play-icon img {
     width: 60px;
     height: 60px;
 }

 .video-card .title {
     padding: 12px;
     font-weight: 500;
     font-size: 16px;
     color: #3C3E42;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }

 /* 热门产品 */
 .popular-products {
     display: flex;
     gap: 9px;
     flex-wrap: wrap;
     margin-bottom: 40px;
     /* margin-top: 20px; */
 }

 .product-item {
     position: relative;
     /* flex: 1 1 calc(20% - 16px); */
     width: 231px;
     height: 365px;
     background: #FFFFFF;
     border-radius: 20px;
     overflow: hidden;
     /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); */
     transition: transform 0.2s ease;
 }

 .product-item:hover {
     transform: translateY(-4px);
 }

 .product-item .tag {
     position: absolute;
     width: 113px;
     height: 34px;
     background: #108CDA;
     color: white;
     font-size: 12px;
     text-align: center;
     line-height: 34px;
     border-radius: 7px;
     display: inline-block;
     top: 13px;
     left: 16px;
 }

 .product-item img {
     width: 231px;
     height: 231px;
     object-fit: cover;
 }

 .product-item .name {
     font-weight: 400;
     font-size: 18px;
     color: #3C3E42;
     margin-left: 16px;
     margin-top: 11px;
 }

 .product-item .desc {
     font-weight: 400;
     font-size: 14px;
     color: #808180;
     margin-left: 16px;
     margin-top: 9px;
 }
 .product-item .desc .spany2 {
     display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
 }

 .pages_box {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
     padding-bottom: 50px;
 }

 .pages_box .pages_start,
 .pages_box .pages_item {
     margin-right: 20px;
     padding: 10px 20px;
     border: 1px #e5e5e5 solid;
     background-color: #fff;
     border-radius: 10px;
 }

 .pages_box .pages_end {
     padding: 10px 20px;
     border: 1px #e5e5e5 solid;
     background-color: #fff;
     border-radius: 10px;
 }
  .product-item .view {
    position: absolute;
    top: 25%;
    left: 38%;
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.67);
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

 .product-item:hover .view {
    opacity: 1;
    pointer-events: auto;
}