/**
██   ██ ██    ██ ██████  ██  ██████ ███    ███ ███████ 
██   ██ ██    ██ ██   ██ ██ ██      ████  ████ ██      
███████ ██    ██ ██   ██ ██ ██      ██ ████ ██ ███████ 
██   ██ ██    ██ ██   ██ ██ ██      ██  ██  ██      ██ 
██   ██  ██████  ██████  ██  ██████ ██      ██ ███████ 
            ===========================================
 * @Sign
================================
        Keep calm and get rich.
                    Is the best huudi.
 */
 html, body {
	overflow-x: hidden;
	font-size:13px;
    color: #333;
	background-color:#fff;
    margin:0;
    font-family: Microsoft YaHei, Helvetica, '宋体', Tahoma, Arial, "5b8b4f53", sans-serif;
}
form, h1, h2, h3, h4, h5, h6,th {
	font-weight:400;
	font-size:13px;
}
form, h1, h2, h3, h4, h5, h6, ul, ol, dl, dt, dd {
	margin:0;
	padding:0;
	list-style:none;
}
a {
 	color:#333;
    text-decoration:none;
  	font-size:13px;
}
a:hover {
 	color:#3577ce;
}
.hu-l {
	float:left
}
.hu-r {
	float:right
}
/*
.hu-text-left{text-align:left}
.hu-text-right{text-align:right}*/
.hu-text-center{text-align:center;}
.hu-white-space{white-space:nowrap}
.hu-text-color{color:#337ab7}
/*清除浮动*/
.hu-clearfix:after,.hu-clearfix:before{display:table;content:" "}
.hu-container{
  margin-right:auto;
  margin-left:auto
}
/* 头部 */
.hu-header {
	overflow-y:auto;
    margin:10px 0px 10px 0;
	overflow:hidden;
  	width:100%;
}
.hu-header .hu-logo {
	float: left;
	overflow: hidden;
	width: 45%;
	padding: 5px 0;
	white-space: nowrap;
}
.hu-header .hu-logo a {
	display: inline-block;
	padding: 10px 20px;
	font-size: 18px;
	font-weight: 600;
	font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
	color: #fff;
	background: linear-gradient(135deg, #00868B 0%, #006666 100%);
	border-radius: 8px;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	transition: all 0.3s ease;
	text-shadow: 0 1px 2px rgba(0,0,0,0.2);
	position: relative;
	overflow: hidden;
}
.hu-header .hu-logo a::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
	pointer-events: none;
}
.hu-header .hu-logo a:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
	color: #fff;
}
.hu-header .hu-search {
	overflow:hidden;
	width:55%;
}
.hu-header .hu-search .hu-size{
	font-size:11px;
  	float:right;
    text-align:right
}
/* 搜索栏样式优化 */
.hu-search {
    position: relative;
    width: 55%;
    margin: 10px 0;
}

.hu-searchbar-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
}

.hu-search-input {
    width: 100%;
    height: 40px;
    padding: 0 15px;
    border: 2px solid #00868B;
    border-radius: 20px;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.hu-search-input:focus {
    outline: none;
    border-color: #006666;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.hu-search-button {
    position: absolute;
    right: 5px;
    height: 34px;
    padding: 0 20px;
    background-color: #00868B;
    color: #fff;
    border: none;
    border-radius: 17px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hu-search-button:hover {
    background-color: #006666;
    transform: translateY(-1px);
}

/* 友情链接标题样式优化 */
.hu-title-link {
    background: linear-gradient(135deg, #8B658B 0%, #6B4C6B 100%);
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    margin: 20px 0;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}

/* 站长推荐标题样式 - 绿色系 */
.hu-title-master-recommend {
    background: linear-gradient(135deg, #008B45 0%, #006B33 100%);
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    margin: 20px 0;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}

/* 极品链接标题样式 - 橙色系 */
.hu-title-quality-links {
    background: linear-gradient(135deg, #FF8C00 0%, #FF6B00 100%);
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    margin: 20px 0;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}

/* 热搜词汇标题样式 - 蓝色系 */
.hu-title-hot-search {
    background: linear-gradient(135deg, #1E90FF 0%, #0066CC 100%);
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    margin: 20px 0;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}

.hu-title-link::before,
.hu-title-master-recommend::before,
.hu-title-quality-links::before,
.hu-title-hot-search::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

.hu-title-link strong,
.hu-title-master-recommend strong,
.hu-title-quality-links strong,
.hu-title-hot-search strong {
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* 热搜词汇标题样式 */
.hu-title.hu-title-link[style*="background-color:#00868B"] {
    background: linear-gradient(135deg, #00868B 0%, #006666 100%) !important;
    color: #fff;
    padding: 10px 18px;
    border-radius: 6px;
    margin: 15px 0;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    position: relative;
    overflow: hidden;
}

.hu-title.hu-title-link[style*="background-color:#00868B"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

.hu-title.hu-title-link[style*="background-color:#00868B"] strong {
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    letter-spacing: 1px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .hu-title.hu-title-link[style*="background-color:#00868B"],
    .hu-title.hu-title-master-recommend,
    .hu-title.hu-title-quality-links,
    .hu-title.hu-title-hot-search {
        padding: 8px 14px;
        font-size: 15px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hu-title.hu-title-link[style*="background-color:#00868B"],
    .hu-title.hu-title-master-recommend,
    .hu-title.hu-title-quality-links,
    .hu-title.hu-title-hot-search {
        padding: 9px 16px;
    }
}

@media (min-width: 1025px) {
    .hu-title.hu-title-link[style*="background-color:#00868B"],
    .hu-title.hu-title-master-recommend,
    .hu-title.hu-title-quality-links,
    .hu-title.hu-title-hot-search {
        padding: 10px 20px;
        font-size: 16px;
    }
}

/* 站长推荐内容区域样式 - 绿色系 */
.hu-tags-box-master-recommend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 15px 0;
    padding: 15px;
    background: linear-gradient(135deg, #f0fff0 0%, #e6ffe6 100%);
    border-radius: 8px;
    border: 1px solid #90EE90;
}

/* 极品链接内容区域样式 - 橙色系 */
.hu-tags-box-quality-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 15px 0;
    padding: 15px;
    background: linear-gradient(135deg, #fff8f0 0%, #fff0e6 100%);
    border-radius: 8px;
    border: 1px solid #FFA500;
}

/* 热搜词汇内容区域样式 - 蓝色系 */
.hu-tags-box-hot-search {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 15px 0;
    padding: 15px;
    background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
    border-radius: 8px;
    border: 1px solid #87CEEB;
}

/* 内联链接容器样式 */
.hu-inline-links {
    text-align: center;
    padding: 10px;
    line-height: 2;
}

/* 通用内容区域样式 */
.hu-tags-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 15px 0;
    padding: 0 10px;
}

.hu-tags {
    display: inline-block;
    width: 100%;
    margin: 0;
    vertical-align: top;
}

.hu-label2 {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.hu-web_list.hu-tips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    gap: 10px;
}

.hu-web_list.hu-tips a {
    display: inline-block;
    padding: 8px 16px;
    margin: 0;
    background-color: #f7f7f7;
    color: #333;
    border-radius: 20px;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-align: center;
    line-height: 1.4;
    border: 1px solid #eee;
}

.hu-web_list.hu-tips a:hover {
    background-color: #00868B;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,134,139,0.25);
    border-color: #00868B;
}

@media (max-width: 768px) {
    .hu-web_list.hu-tips a {
        padding: 6px 12px;
        font-size: 12px;
        flex-grow: 1;
        flex-basis: calc(33.333% - 10px);
    }
    
    .hu-tags-box,
    .hu-tags-box-master-recommend,
    .hu-tags-box-quality-links,
    .hu-tags-box-hot-search {
        margin: 10px 0;
        padding: 10px;
    }
    
    .hu-web_list.hu-tips {
        gap: 8px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hu-web_list.hu-tips a {
        padding: 7px 14px;
        flex-basis: calc(25% - 10px);
    }
    
    .hu-web_list.hu-tips {
        gap: 10px;
    }
}

@media (min-width: 1025px) {
    .hu-web_list.hu-tips a {
        padding: 8px 16px;
        flex-basis: calc(20% - 10px);
    }
    
    .hu-web_list.hu-tips {
        gap: 10px;
    }
}

/* 新的导航菜单样式 - 按行显示分类 */
.hu-nav-container {
    background: linear-gradient(135deg, #006666 0%, #00868B 100%);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    overflow: hidden;
    margin: 10px 0;
    position: relative;
}

.hu-nav-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

.hu-nav-row {
    display: block;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.hu-nav-row:last-child {
    border-bottom: none;
}

.hu-nav-category {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px 15px;
    position: relative;
    z-index: 1;
}

.hu-nav-main-link {
    display: inline-block;
    padding: 8px 16px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    background: rgba(255,255,255,0.1);
    margin-right: 15px;
    margin-bottom: 5px;
    position: relative;
    overflow: hidden;
}

.hu-nav-main-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

.hu-nav-main-link:hover {
    background: rgba(255,255,255,0.2);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

.hu-nav-main-link.hu-focu {
    background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 100%);
    font-weight: 700;
}

.hu-nav-submenu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
}

.hu-nav-sub-link {
    display: inline-block;
    padding: 6px 12px;
    margin: 2px 6px 2px 0;
    color: rgba(255,255,255,0.9);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
}

.hu-nav-sub-link:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    border-color: rgba(255,255,255,0.2);
}

/* 响应式导航菜单样式 */
@media (max-width: 768px) {
    .hu-nav-container {
        margin: 8px 0;
        border-radius: 6px;
    }

    .hu-nav-category {
        padding: 6px 12px;
        flex-direction: column;
        align-items: flex-start;
    }

    .hu-nav-main-link {
        padding: 6px 12px;
        font-size: 14px;
        margin-right: 0;
        margin-bottom: 5px;
        width: auto;
        min-width: 120px;
    }

    .hu-nav-submenu {
        margin-top: 5px;
        width: 100%;
        justify-content: flex-start;
    }

    .hu-nav-sub-link {
        padding: 4px 8px;
        font-size: 12px;
        margin: 2px 4px 2px 0;
        flex-shrink: 0;
    }
}

@media (max-width: 480px) {
    .hu-nav-category {
        padding: 5px 8px;
    }

    .hu-nav-main-link {
        padding: 5px 10px;
        font-size: 13px;
        margin-bottom: 4px;
    }

    .hu-nav-submenu {
        margin-top: 4px;
    }

    .hu-nav-sub-link {
        padding: 3px 6px;
        font-size: 11px;
        margin: 2px 3px 2px 0;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hu-nav-category {
        padding: 7px 14px;
    }

    .hu-nav-main-link {
        padding: 7px 14px;
        font-size: 14px;
        margin-right: 12px;
    }

    .hu-nav-sub-link {
        padding: 5px 10px;
        font-size: 12px;
    }
}

@media (min-width: 1025px) {
    .hu-nav-category {
        padding: 8px 15px;
    }

    .hu-nav-main-link {
        padding: 8px 16px;
        font-size: 15px;
        margin-right: 15px;
    }

    .hu-nav-sub-link {
        padding: 6px 12px;
        font-size: 13px;
    }
}

.hu-title {
    margin:0px 0 15px;
    position: relative;
    padding: 12px 15px;
    color: #333;
    font-size: 15px;
    font-weight: 600;
    background-color: #f5f5f5;
    border-radius: 6px;
}

.hu-title>li{display:inline-block}
.hu-title>li+li:before{
    content:"\2022";padding:0 5px
}

.hu-title .hu-r a{
    display: inline-block;
    padding: 3px 8px;
    background-color: rgba(0,0,0,0.1);
    border-radius: 15px;
    font-size: 12px;
    color: #333;
    transition: all 0.3s ease;
}

.hu-mac_pages1 {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.hu-mac_pages1 .hu-page_tip {
    display: inline-block;
    margin: 0 5px;
    font-size: 13px;
    color: #666;
}

.hu-mac_pages1 .hu-page_link1 {
    display: inline-block;
    padding: 8px 15px;
    margin: 0 3px;
    background-color: #f5f5f5;
    color: #333;
    border-radius: 5px;
    font-size: 13px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.hu-mac_pages1 .hu-page_link1:hover {
    background-color: #00868B;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.hu-mac_pages1 .hu-page_current1 {
    display: inline-block;
    padding: 8px 15px;
    margin: 0 3px;
    background-color: #00868B;
    color: #fff;
    border-radius: 5px;
    font-size: 13px;
    position: relative;
}

.hu-mac_pages1 .hu-page_current1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

@media (max-width: 768px) {
    .hu-mac_pages1 .hu-page_link1 {
        padding: 6px 12px;
        font-size: 12px;
        margin: 0 2px;
    }
    
    .hu-mac_pages1 .hu-page_tip {
        font-size: 12px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hu-mac_pages1 .hu-page_link1 {
        padding: 7px 14px;
    }
}

@media (min-width: 1025px) {
    .hu-mac_pages1 .hu-page_link1 {
        padding: 8px 16px;
    }
}

.hu-wrap{width:100%;max-width:1260px;min-width:320px;padding:0;margin:0 auto; position:relative; overflow:hidden;font-size:13px;}
.hu-wrap h1{font-size:13px}

.hu-links {
    margin:10px 0;
}

.hu-link {
    margin:10px 0;
}

.hu-links li{
    padding:5px 5px 5px 0;
    font-size:12px;
    display:inline-block;
}

.hu-juse{color:#1570ef}
.hu-red{font-weight:800;color:red}
.hu-footer{
    margin-top:15px;
    background-color: #f5f5f5;
    padding: 20px 0;
    color: #333;
    font-size: 12px;
    text-align: center;
}

.hu-media {
    margin-bottom:15px;
}

.hu-media ul{
    overflow:hidden
}

.hu-media li {
    float:left;
    width:16.66666666666667%;
    height:90px;
    margin-bottom:5px
}

.hu-media li img {
    width:100%;
    height:90px
}

.hu-media .hu-media-info dt{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.hu-media .hu-media-info .hu-playurl2{
    margin-bottom:5px
}

.hu-media .hu-media-info .hu-playurl2 a{
    display:inline-block;
    padding:0 5px;
    margin-right:5px;
    margin-bottom:5px;
    height:24px;
    line-height:24px;
    background:#eee;
    color:#666
}

.hu-playurl{
	margin-bottom:15px
}
.hu-playurl dt{
	margin:10px 0
}
.hu-playurl dd{
	overflow:hidden
}
.hu-playurl dd a{
	display:inline-block;
	padding:5px 10px;
	margin-right:5px;
	margin-bottom:5px;
	background:#eee;
	color:#666
}

.hu-title3 {
    background-color:#00868B!important;
    height:36px;
    line-height:36px;
}

.hu-pic {
    overflow: hidden;
    width: 100%;
    margin-bottom: 25px;
}

.hu-pic ul {
    margin: 0 -8px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.hu-pic li {
    float: none;
    width: 100%;
    height: auto;
    padding: 0;
    position: relative;
    background-color: transparent;
    transition: transform 0.3s ease;
}

.hu-pic li:hover {
    transform: translateY(-3px); /* 适中悬停效果 */
}

.hu-vertical-cover {
    position: relative;
    height: 0;
    padding-bottom: 62.5% !important; /* 16:10宽高比，让封面更大更清晰 */
    overflow: hidden;
    border-radius: 8px;
    background-color: #f5f5f5;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    aspect-ratio: 16/10; /* 16:10比例，让封面更高更清晰 */
}

.hu-vertical-cover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    z-index: 1;
}

.hu-pic li a {
    display: block;
    text-decoration: none;
}

.hu-pic li a:hover .hu-vertical-cover img {
    transform: scale(1.08); /* 调整缩放比例，适合16:10宽图比例 */
}

/* 视频缩略图信息样式优化 - 适配16:10宽图比例 */
.hu-vertical-cover .hu-thumbnail-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 45px 12px 10px 12px; /* 增加上边距，适配更高的封面 */
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 100%);
    color: #fff;
    z-index: 3;
    pointer-events: none;
}

.hu-vertical-cover .hu-video-name {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 5px 0;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    word-wrap: break-word;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

.hu-vertical-cover .hu-video-episode {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    margin: 0;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}

.hu-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.hu-pic li a:hover .hu-video-overlay {
    opacity: 1;
}

.hu-video-overlay i {
    font-size: 42px;
    color: #fff;
    background-color: rgba(0,134,139,0.8);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    transform: scale(0.8);
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.hu-pic li a:hover .hu-video-overlay i {
    transform: scale(1);
}

.hu-vertical-cover .hu-video-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #00868B 0%, #006666 100%);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    z-index: 5;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: inline-block;
    max-width: 80%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* 视频列表响应式调整 - 优化手机端显示 */
@media (max-width: 1200px) {
    .hu-pic ul {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    }
}

@media (max-width: 992px) {
    .hu-pic ul {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .hu-vertical-cover {
        padding-bottom: 66.67% !important; /* 3:2比例，在中等屏幕上让封面更高 */
    }
}

@media (max-width: 768px) {
    .hu-pic ul {
        grid-template-columns: repeat(4, 1fr); /* 平板端使用4列，最大化内容展示 */
        gap: 6px; /* 极致减少间距 */
        margin: 0 -2px; /* 最小外边距 */
        padding: 0; /* 移除内边距 */
    }

    .hu-vertical-cover {
        padding-bottom: 60% !important; /* 略微调整比例，优化视觉效果 */
        border-radius: 4px; /* 更紧凑的圆角 */
        box-shadow: 0 2px 6px rgba(0,0,0,0.06); /* 更轻的阴影 */
    }

    .hu-vertical-cover .hu-thumbnail-info {
        padding: 25px 4px 4px 4px; /* 极致压缩内边距 */
    }
    
    .hu-vertical-cover .hu-video-name {
        font-size: 11px; /* 平板端压缩字体 */
        font-weight: 600; /* 增加字重提升可读性 */
        margin-bottom: 1px;
        line-height: 1.1;
    }

    .hu-vertical-cover .hu-video-episode {
        font-size: 9px; /* 进一步压缩剧集信息 */
        opacity: 0.9; /* 轻微透明增强层次感 */
    }

    .hu-video-overlay i {
        font-size: 24px; /* 压缩播放图标 */
        width: 36px;
        height: 36px;
        line-height: 36px;
    }

    .hu-vertical-cover .hu-video-badge {
        font-size: 9px; /* 压缩徽章 */
        padding: 2px 4px; /* 减少内边距 */
        top: 4px;
        right: 4px;
    }
}

@media (max-width: 576px) {
    .hu-pic {
        margin-bottom: 8px; /* 极致减少底部间距 */
    }

    .hu-pic ul {
        grid-template-columns: repeat(3, 1fr); /* 手机端使用3列，最大化展示 */
        gap: 4px; /* 极致间距 */
        margin: 0 -2px; /* 极小外边距 */
        padding: 0;
    }

    .hu-vertical-cover {
        padding-bottom: 58% !important; /* 微调比例，优化视觉 */
        border-radius: 3px; /* 更紧凑圆角 */
        box-shadow: 0 1px 4px rgba(0,0,0,0.04); /* 极轻阴影 */
    }

    .hu-vertical-cover .hu-thumbnail-info {
        padding: 20px 3px 3px 3px; /* 极致压缩内边距 */
    }
    
    .hu-vertical-cover .hu-video-name {
        font-size: 10px; /* 极致压缩字体 */
        font-weight: 600; /* 增强可读性 */
        margin-bottom: 0px; /* 最小边距 */
        line-height: 1.0; /* 紧凑行高 */
        letter-spacing: -0.01em; /* 微调字间距 */
    }

    .hu-vertical-cover .hu-video-episode {
        font-size: 8px; /* 极致压缩剧集信息 */
        opacity: 0.85; /* 增强层次感 */
        margin-top: 1px; /* 微小上边距 */
    }

    .hu-video-overlay i {
        font-size: 20px; /* 极致压缩播放图标 */
        width: 30px;
        height: 30px;
        line-height: 30px;
    }
}

@media (max-width: 360px) {
    .hu-pic {
        margin-bottom: 6px; /* 绝对最小底部间距 */
    }

    .hu-pic ul {
        grid-template-columns: repeat(3, 1fr); /* 小屏也使用3列，最大化展示 */
        gap: 3px; /* 绝对最小间距 */
        margin: 0 -1px; /* 绝对最小外边距 */
        padding: 0;
    }

    .hu-vertical-cover {
        padding-bottom: 56% !important; /* 略微扁平化，适应小屏 */
        border-radius: 2px; /* 最小圆角 */
        box-shadow: 0 1px 3px rgba(0,0,0,0.03); /* 极轻阴影 */
    }

    .hu-pic li {
        margin-bottom: 4px; /* 最小列表项间距 */
    }

    .hu-vertical-cover .hu-thumbnail-info {
        padding: 18px 2px 2px 2px; /* 绝对最小内边距 */
    }

    .hu-pic li:hover {
        transform: translateY(-1px); /* 最小悬停位移 */
    }

    .hu-vertical-cover .hu-video-name {
        font-size: 9px; /* 绝对最小字体 */
        font-weight: 600;
        margin-bottom: 0px;
        line-height: 0.95; /* 紧凑到极致 */
        letter-spacing: -0.02em; /* 微调字间距 */
    }

    .hu-vertical-cover .hu-video-episode {
        font-size: 7px; /* 绝对最小剧集字体 */
        opacity: 0.8;
        margin-top: 1px;
    }

    .hu-video-overlay i {
        font-size: 18px; /* 绝对最小播放图标 */
        width: 26px;
        height: 26px;
        line-height: 26px;
    }

    .hu-vertical-cover .hu-video-badge {
        font-size: 7px; /* 绝对最小徽章 */
        padding: 1px 3px;
        top: 2px;
        right: 2px;
    }
}

/* 超极致优化 - 为极小屏幕打造完美体验 */
@media (max-width: 320px) {
    .hu-pic ul {
        grid-template-columns: repeat(2, 1fr); /* 超小屏使用2列，保持可读性 */
        gap: 2px; /* 极致间距 */
        margin: 0 0px;
    }

    .hu-vertical-cover {
        padding-bottom: 54% !important; /* 进一步扁平化 */
        border-radius: 1px;
    }

    .hu-vertical-cover .hu-thumbnail-info {
        padding: 16px 1px 1px 1px; /* 极致压缩 */
    }

    .hu-vertical-cover .hu-video-name {
        font-size: 8px; /* 极致小字体 */
        line-height: 0.9;
    }

    .hu-vertical-cover .hu-video-episode {
        font-size: 6px; /* 极致小剧集字体 */
    }

    .hu-video-overlay i {
        font-size: 16px;
        width: 22px;
        height: 22px;
        line-height: 22px;
    }

    .hu-vertical-cover .hu-video-badge {
        font-size: 6px;
        padding: 1px 2px;
        top: 1px;
        right: 1px;
    }
}

/* 移动端悬停效果优化 - 减少性能消耗 */
@media (hover: none) and (pointer: coarse) {
    .hu-pic li:hover {
        transform: none; /* 触摸设备禁用悬停效果 */
    }
}

/* 极致性能优化 - 减少重绘 */
.hu-pic li {
    will-change: transform; /* 预声明变换属性 */
    backface-visibility: hidden; /* 减少闪烁 */
    -webkit-backface-visibility: hidden;
}

.hu-bt20{
    margin-top: 20px;
}

.hu-bg20{
    margin-bottom: 20px;
}

.hu-mycate {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px;
    margin: 15px 0;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    width: 100%;
    box-sizing: border-box;
}

.hu-mycate a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background-color: #fff;
    color: #333;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    min-width: 80px;
    text-align: center;
    width: auto;
    height: auto;
    float: none;
    margin: 0;
}

.hu-mycate a:hover {
    background-color: #00868B;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-color: #00868B;
}

.hu-mycate a[style*="background-color: #0450b9"] {
    background: linear-gradient(135deg, #00868B 0%, #006666 100%) !important;
    color: #fff !important;
    border-color: #00868B !important;
    position: relative;
    overflow: hidden;
    font-weight: 600;
}

.hu-mycate a[style*="background-color: #0450b9"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

@media (max-width: 768px) {
    .hu-mycate {
        padding: 10px;
        gap: 8px;
    }
    
    .hu-mycate a {
        padding: 6px 12px;
        font-size: 13px;
        min-width: 70px;
        width: calc(33.33% - 8px);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hu-mycate a {
        padding: 7px 14px;
        width: calc(20% - 10px);
    }
}

@media (min-width: 1025px) {
    .hu-mycate a {
        padding: 8px 16px;
        width: calc(10% - 10px);
    }
}

.hu-picdetail img{
    max-width: 100%;
}

.hu-footer-container {
    background-color: #f8f9fa;
    padding: 20px 0;
    margin-top: 30px;
}

.hu-footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.hu-footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 20px;
}

.hu-footer-section {
    flex: 1;
    min-width: 200px;
    margin: 10px;
}

.hu-footer-section h3 {
    color: #333;
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: 600;
}

.hu-footer-section p {
    color: #666;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 8px;
}

.hu-footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.hu-footer-bottom p {
    color: #666;
    font-size: 12px;
    line-height: 1.5;
}

/* 播放器容器样式 */
.hu-player-container {
    margin: 0 0 20px 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    background-color: #000;
    position: relative;
}

.hu-player-container .hu-huudi {
    width: 100%;
    aspect-ratio: 16/9;
    position: relative;
}

/* 针对不支持aspect-ratio的浏览器提供回退方案 */
@supports not (aspect-ratio: 16/9) {
    .hu-player-container .hu-huudi {
        height: 0;
        padding-bottom: 56.25%; /* 16:9 比例 */
    }
    
    .hu-player-container .hu-huudi iframe,
    .hu-player-container .hu-huudi video,
    .hu-player-container .hu-huudi object,
    .hu-player-container .hu-huudi embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* 播放器响应式调整 */
@media (max-width: 480px) {
    .hu-player-container {
        border-radius: 6px;
        box-shadow: 0 3px 8px rgba(0,0,0,0.15);
        margin: 0 0 15px 0;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .hu-player-container {
        margin: 0 0 15px 0;
    }
}

/* 友情链接样式优化 - 调整手机端布局 */
.hu-huob {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    margin: 20px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.hu-huob a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background-color: #fff;
    color: #333;
    border-radius: 20px;
    font-size: 14px;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    min-width: 100px;
    text-align: center;
    margin-bottom: 0;
}

.hu-huob a:hover {
    background-color: #00868B;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-color: #00868B;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .hu-huob {
        gap: 10px;
        padding: 15px;
    }
    
    .hu-huob a {
        padding: 8px 10px;
        font-size: 13px;
        min-width: auto;
        width: calc(50% - 10px);
        margin-bottom: 0;
        flex-grow: 1;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hu-huob {
        gap: 8px;
        padding: 12px;
    }
    
    .hu-huob a {
        padding: 6px 8px;
        font-size: 12px;
        width: calc(33.33% - 8px);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hu-huob {
        gap: 10px;
    }
    
    .hu-huob a {
        padding: 7px 14px;
        width: calc(25% - 10px);
    }
}

@media (min-width: 1025px) {
    .hu-huob {
        gap: 12px;
    }
    
    .hu-huob a {
        padding: 8px 16px;
        width: auto;
    }
}

/* 面包屑导航样式优化 */
.hu-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 15px;
    margin: 15px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    position: relative;
}

.hu-breadcrumb li {
    display: inline-flex;
    align-items: center;
    margin-right: 5px;
    color: #666;
    font-size: 14px;
}

.hu-breadcrumb li:first-child {
    color: #00868B;
    font-weight: 500;
}

.hu-breadcrumb li:last-child {
    margin-right: 0;
    color: #333;
    font-weight: 600;
}

.hu-breadcrumb li a {
    color: #00868B;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 14px;
}

.hu-breadcrumb li a:hover {
    color: #006666;
    text-decoration: underline;
}

.hu-breadcrumb li:after {
    content: '›';
    margin: 0 8px;
    color: #aaa;
    font-size: 16px;
}

.hu-breadcrumb li:last-child:after {
    display: none;
}

.hu-breadcrumb li strong {
    font-weight: 600;
    color: #333;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .hu-breadcrumb {
        padding: 10px;
    }
    
    .hu-breadcrumb li {
        font-size: 13px;
    }
    
    .hu-breadcrumb li a {
        font-size: 13px;
    }
    
    .hu-breadcrumb li:after {
        margin: 0 5px;
        font-size: 14px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hu-breadcrumb {
        padding: 12px;
    }
}

@media (min-width: 1025px) {
    .hu-breadcrumb {
        padding: 15px 20px;
    }
}

/* 分类页面标题样式 */
.hu-category-header {
    margin: 20px 0 10px 0;
    position: relative;
    padding-left: 15px;
    border-left: 4px solid #00868B;
}

.hu-category-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
    display: flex;
    align-items: center;
}

.hu-category-header h2 i {
    margin-right: 8px;
    color: #00868B;
    font-size: 20px;
}

@media (max-width: 768px) {
    .hu-category-header {
        margin: 15px 0 8px 0;
        padding-left: 10px;
    }
    
    .hu-category-header h2 {
        font-size: 16px;
    }
    
    .hu-category-header h2 i {
        font-size: 18px;
    }
}

/* 视频详情页样式优化 */
.hu-video-detail-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
}

.hu-video-detail-container .hu-video-cover {
    flex: 0 0 300px;
    max-width: 300px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    position: relative;
    margin-bottom: 0;
}

.hu-video-detail-container .hu-video-cover img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    transition: all 0.3s ease;
    object-fit: cover;
}

.hu-video-detail-container .hu-video-cover:hover img {
    transform: scale(1.02);
}

.hu-video-detail-container .hu-video-info {
    flex: 1;
    min-width: 300px;
    position: static;
    background: none;
    padding: 0;
    color: #333;
}

.hu-video-detail-container .hu-video-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.4;
}

.hu-video-detail-container .hu-video-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.hu-video-detail-container .hu-video-meta-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #666;
}

.hu-video-detail-container .hu-video-meta-item i {
    margin-right: 5px;
    color: #00868B;
}

.hu-video-detail-container .hu-video-description {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 20px;
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #00868B;
}

.hu-video-detail-container .hu-video-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.hu-video-detail-container .hu-play-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: linear-gradient(135deg, #00868B 0%, #006666 100%);
    color: #fff;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer;
    text-decoration: none;
}

.hu-video-detail-container .hu-play-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.hu-video-detail-container .hu-play-button i {
    margin-right: 8px;
    font-size: 18px;
}

.hu-video-detail-container .hu-alternate-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background-color: #fff;
    color: #00868B;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid #00868B;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    cursor: pointer;
    text-decoration: none;
}

.hu-video-detail-container .hu-alternate-button:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.hu-video-detail-container .hu-alternate-button i {
    margin-right: 8px;
    font-size: 18px;
}

.hu-video-detail-container .hu-video-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.hu-video-detail-container .hu-video-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background-color: #f0f0f0;
    color: #333;
    border-radius: 20px;
    font-size: 13px;
    transition: all 0.3s ease;
}

.hu-video-detail-container .hu-video-tag:hover {
    background-color: #00868B;
    color: #fff;
}

/* 列表页视频信息样式 - 重命名为 thumbnail-info，避免冲突 */
.hu-vertical-cover .hu-thumbnail-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    color: #fff;
    z-index: 2;
}

@media (max-width: 768px) {
    .hu-video-detail-container {
        flex-direction: column;
    }
    
    .hu-video-detail-container .hu-video-cover {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 15px;
    }
    
    .hu-video-detail-container .hu-video-title {
        font-size: 18px;
    }
    
    .hu-video-detail-container .hu-play-button, 
    .hu-video-detail-container .hu-alternate-button {
        width: 100%;
        font-size: 15px;
    }
    
    .hu-vertical-cover .hu-thumbnail-info {
        padding: 12px 10px;
    }
}

/* 视频列表样式 */
.hu-pic {
    overflow: hidden;
    width: 100%;
    margin-bottom: 25px;
}

.hu-pic ul {
    margin: 0 -8px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.hu-pic li {
    float: none;
    width: 100%;
    height: auto;
    padding: 0;
    position: relative;
    background-color: transparent;
    transition: transform 0.3s ease;
}

.hu-pic li:hover {
    transform: translateY(-3px); /* 适中悬停效果 */
}

.hu-vertical-cover {
    position: relative;
    height: 0;
    padding-bottom: 177.78%; /* 9:16比例 */
    overflow: hidden;
    border-radius: 8px;
    background-color: #f5f5f5;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.hu-vertical-cover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    z-index: 1;
}

.hu-pic li a {
    display: block;
    text-decoration: none;
}

.hu-pic li a:hover .hu-vertical-cover img {
    transform: scale(1.1);
}

/* 视频缩略图信息样式 */
.hu-vertical-cover .hu-thumbnail-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    color: #fff;
    z-index: 3;
    pointer-events: none;
}



.hu-vertical-cover .hu-video-episode {
    font-size: 12px;
    color: #ccc;
    margin: 0;
}

.hu-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 50%);
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

.hu-video-overlay i {
    font-size: 42px;
    color: #fff;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
}

.hu-pic li a:hover .hu-video-overlay i {
    opacity: 1;
    transform: scale(1);
}

.hu-vertical-cover .hu-video-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0,0,0,0.7);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    z-index: 5;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: inline-block;
    max-width: 80%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* 视频列表响应式调整 */
@media (max-width: 1200px) {
    .hu-pic ul {
        grid-template-columns: repeat(5, 1fr);
        gap: 15px;
    }
}

@media (max-width: 992px) {
    .hu-pic ul {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .hu-pic ul {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    
    .hu-vertical-cover .hu-thumbnail-info {
        padding: 12px 10px;
    }
    
    .hu-vertical-cover .hu-video-name {
        font-size: 13px;
    }
    
    .hu-video-overlay i {
        font-size: 36px;
        width: 60px;
        height: 60px;
        line-height: 60px;
    }
}

@media (max-width: 576px) {
    .hu-pic ul {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .hu-vertical-cover .hu-thumbnail-info {
        padding: 10px 8px;
    }
    
    .hu-vertical-cover .hu-video-name {
        font-size: 12px;
        margin-bottom: 3px;
    }
    
    .hu-vertical-cover .hu-video-episode {
        font-size: 11px;
    }
    
    .hu-vertical-cover .hu-video-badge {
        padding: 3px 8px;
        font-size: 11px;
        top: 8px;
        right: 8px;
    }
    
    .hu-video-overlay i {
        font-size: 32px;
        width: 50px;
        height: 50px;
        line-height: 50px;
    }
}

@media (max-width: 360px) {
    .hu-pic ul {
        gap: 6px;
    }
}

.hu-bt20{
    margin-top: 20px;
}

.hu-bg20{
    margin-bottom: 20px;
}

.hu-mycate {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px;
    margin: 15px 0;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    width: 100%;
    box-sizing: border-box;
}

.hu-mycate a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background-color: #fff;
    color: #333;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    min-width: 80px;
    text-align: center;
    width: auto;
    height: auto;
    float: none;
    margin: 0;
}

.hu-mycate a:hover {
    background-color: #00868B;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-color: #00868B;
}

.hu-mycate a[style*="background-color: #0450b9"] {
    background: linear-gradient(135deg, #00868B 0%, #006666 100%) !important;
    color: #fff !important;
    border-color: #00868B !important;
    position: relative;
    overflow: hidden;
    font-weight: 600;
}

.hu-mycate a[style*="background-color: #0450b9"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

@media (max-width: 768px) {
    .hu-mycate {
        padding: 10px;
        gap: 8px;
    }
    
    .hu-mycate a {
        padding: 6px 12px;
        font-size: 13px;
        min-width: 70px;
        width: calc(33.33% - 8px);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hu-mycate a {
        padding: 7px 14px;
        width: calc(20% - 10px);
    }
}

@media (min-width: 1025px) {
    .hu-mycate a {
        padding: 8px 16px;
        width: calc(10% - 10px);
    }
}

.hu-picdetail img{
    max-width: 100%;
}

.hu-footer-container {
    background-color: #f8f9fa;
    padding: 20px 0;
    margin-top: 30px;
}

.hu-footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.hu-footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 20px;
}

.hu-footer-section {
    flex: 1;
    min-width: 200px;
    margin: 10px;
}

.hu-footer-section h3 {
    color: #333;
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: 600;
}

.hu-footer-section p {
    color: #666;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 8px;
}

.hu-footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.hu-footer-bottom p {
    color: #666;
    font-size: 12px;
    line-height: 1.5;
}

/* 播放器容器样式 */
.hu-player-container {
    margin: 0 0 20px 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    background-color: #000;
    position: relative;
}

.hu-player-container .hu-huudi {
    width: 100%;
    aspect-ratio: 16/9;
    position: relative;
}

/* 针对不支持aspect-ratio的浏览器提供回退方案 */
@supports not (aspect-ratio: 16/9) {
    .hu-player-container .hu-huudi {
        height: 0;
        padding-bottom: 56.25%; /* 16:9 比例 */
    }
    
    .hu-player-container .hu-huudi iframe,
    .hu-player-container .hu-huudi video,
    .hu-player-container .hu-huudi object,
    .hu-player-container .hu-huudi embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* 播放器响应式调整 */
@media (max-width: 480px) {
    .hu-player-container {
        border-radius: 6px;
        box-shadow: 0 3px 8px rgba(0,0,0,0.15);
        margin: 0 0 15px 0;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .hu-player-container {
        margin: 0 0 15px 0;
    }
}

.hu-pic2 {
    margin-bottom:15px
}

.hu-pic2 ul{
    overflow:hidden
}

.hu-pic2 li {
    float:left;
    width:16.66666666666667%;
    height:215px;
    padding:0 5px;
    margin-bottom:10px;
    text-align:center;
}

.hu-news h1{font-size:1.15rem;font-weight:799}
.hu-news .hu-source{font-size:10px;color:#666}
.hu-news h1,.hu-news .hu-source{text-align:center}
.hu-pianyi li,.hu-ranking-list li{line-height: 2.4;border-bottom: 1px #e8e8e8 solid;}

.hu-play-t{
    width:100%;
    overflow:hidden;
    background:#f8f8f8;
    height:36px;
    line-height:36px;
    padding:0 10px;
    color:#222;
    font-size:13px;
    border-top:0;
    border-radius:3px 3px 0 0;
}

.hu-play-t .hu-l a,.hu-play-t .hu-r a{
    display:inline-block;
    padding:0 7px;
    font-size:13px;
    color:#000;
    background:#eee;
    border-radius:3px;
    text-align:center;
}

.hu-play_t {width:100%;overflow:hidden;background:#000;padding:0px 0;font-size:13px;color:#fff;}
.hu-play_t .hu-l{	float:left;padding-top:2px;}
.hu-play_t .hu-r{	float:right;}
.hu-play_t a{padding-left:5px;font-size:13px;color:#fff;}
.hu-play_t .hu-r a{
    display:inline-block;
    padding:0 8px 0 2px;
    font-size:13px;
    color:#fff
}

#hu-bofang_box { 
    width: 100%;
    position: relative; 
    margin: 0 auto;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    aspect-ratio: 16/9;
    height: auto !important;
    max-height: 700px;
}

.hu-logo strong{color:#ffbc00}
.hu-vodlist_l{padding:0 5px}
.hu-tab{margin-top: 5px;}
.hu-tab button{border-radius: 5px;}

.hu-btn-active{background: #0450b9!important;}

*{box-sizing:border-box}

@media (max-width:360px) {
    .hu-header .hu-logo a{font-size:12px;line-height: 3;}
    .hu-tab button{font-size:10px;width:18.8%}
    .hu-nav dd a,.hu-links a{font-size:12px!important;}
}

@media (max-width:998px){.hu-wenzhang .hu-content img{width:100%}}
@media (min-width:480px){.hu-container{width:480px}}
@media (min-width:760px){.hu-container{width:760px}}
@media (min-width:960px){
     .hu-nav {
        padding: 0;
     }
    .hu-container{width:960px}
    .hu-input-text{padding: 0 5px;}
    .hu-mac_search{margin-left:-37px}
    .hu-wenzhang .hu-content img {max-width: 100%}
    .hu-tab button{width:5.25%}
}

@media (min-width:1200px){.hu-container{width:1200px}}

@media (max-width:479px) {
    .hu-container{margin-right:10px;margin-left:10px}
}

@media (max-width:480px) {
    #hu-bofang_box {
        aspect-ratio: 16/9;
        border-radius: 6px;
        box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    }
}

@media (min-width:481px) and (max-width: 768px) {
    #hu-bofang_box {
        aspect-ratio: 16/9;
    }
}

@media (min-width:769px) and (max-width: 1024px) {
    #hu-bofang_box {
        aspect-ratio: 16/9;
    }
}

@media (min-width:1025px) {
    #hu-bofang_box {
        aspect-ratio: 16/9;
    }
}

/* 竖屏设备特殊处理 */
@media (max-width: 480px) and (orientation: portrait) {
    #hu-bofang_box {
        max-height: 300px;
    }
}

@media (min-width:480px) and (max-width:759px){}
@media (min-width:760px) and (max-width:959px){.hu-side,.hu-hidden-lg,.hu-hidden-sm,.hu-top-right{display:none!important}}
@media (min-width:960px){.hu-hidden-lg{display:none!important}}

@media (max-width:480px){.hu-visible-xs{display:block!important}}
@media (min-width:480px) and (max-width:759px){.hu-visible-sm{display:block!important}}
@media (min-width:760px) and (max-width:959px){.hu-links,.hu-link{display:block!important}}
@media (min-width:960px){.hu-links,.hu-link{display:block!important}}

/* clean */
@media screen and (max-width:750px){
    body > a:nth-last-of-type(3){max-height:70px!important;}
    body > a:nth-last-of-type(2){max-height:70px!important;}
    body > a:nth-last-of-type(1){max-height:70px!important;}
    body > a:nth-last-of-type(0){max-height:70px!important;}
    body > span:nth-last-of-type(1) div{max-height:70px;top:0px!important;}
    body > span:nth-last-of-type(0) div{max-height:70px;top:0px!important;}
    body > span:nth-last-of-type(1){max-height:70px!important;}
    body > span:nth-last-of-type(0){max-height:70px!important;}
}

/* Top text banner */
.hu-text-top {
    background-color: #006666;
    padding: 10px 15px;
    color: #fff;
    text-align: center;
    font-size: 13px;
    margin-bottom: 15px;
    border-radius: 6px;
}

.hu-toptext {
    padding:10px;
}

.hu-footlink {
    width:100%;
}

.hu-bads {
    width: 100%;
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 6px;
    margin: 15px 0;
    text-align: center;
}

.hu-tads {
    width: 100%;
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 6px;
    margin: 15px 0;
    text-align: center;
}

.hu-col-md-6{
    width:50%;
    float: left;
}

.hu-photo-one {
    position: relative;
    display: block;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 15px;
}

.hu-photo-two {
    position: relative;
    display: inline-block;
    border-radius: 8px;
    overflow: hidden;
    width: 85px;
    height: 85px;
    margin: 6px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    vertical-align: top;
    flex-shrink: 0;
}

.hu-photo-two:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.hu-photo-two a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.hu-photo-two img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.hu-photo-two:hover img {
    transform: scale(1.05);
}

.hu-photo-name {
    display: block;
    padding: 8px 5px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: #333;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-top: 1px solid #dee2e6;
}

/* 图标容器样式 */
.hu-icon-container {
    margin: 20px 0;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.hu-icon-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
}

.hu-leftd {
    position: fixed;
    top: 54%;
    transform: translateY(-50%);
    width: 120px;
    left: 0;
    z-index: 9999;
}

.hu-rightd {
    position: fixed;
    top: 54%;
    transform: translateY(-50%);
    width: 120px;
    right: 0;
    z-index: 9999;
}

.hu-close_btn {
    position: absolute;
    right: 0;
    top: 0;
    height: 20px;
    line-height: 20px;
    width: 40px;
    background: #f00;
    text-align: center;
}

.hu-close_r {
    background: orange;
    color: red;
    border-radius: 12px;
    line-height: 20px;
    text-align: center;
    height: 20px;
    width: 20px;
    font-size: 18px;
    padding: 1px;
}

.hu-close_r::before {
    content: "\2716";
}

.hu-close_r {
    top: -10px;
    right: -10px;
    position: absolute;
}

.hu-close_l {
    background: orange;
    color: red;
    border-radius: 12px;
    line-height: 20px;
    text-align: center;
    height: 20px;
    width: 20px;
    font-size: 18px;
    padding: 1px;
}

.hu-close_l::before {
    content: "\2716";
}

.hu-close_l {
    top: -10px;
    left: -10px;
    position: absolute;
}

.hu-closebox1 {
    text-align: center;
    display: inherit;
    background-color: #0600031c;
    color: #fff;
    padding: 4px 0;
    display: block;
}

.hu-closebox2 {
    text-align: center;
    display: inherit;
    background-color: #0600031c;
    color: #fff;
    padding: 4px 0;
    display: block;
}

.hu-closebox3 {
    text-align: center;
    display: inherit;
    background-color: #0600031c;
    color: #fff;
    padding: 4px 0;
    display: block;
}

.hu-closebox4 {
    text-align: center;
    display: inherit;
    background-color: #0600031c;
    color: #fff;
    padding: 4px 0;
    display: block;
}

/* 图标模块响应式设计 - 统一尺寸比例 */
/* 大屏幕电脑端 (>1280px) */
@media screen and (min-width: 1281px) {
    .hu-photo-two {
        width: 85px;
        height: 85px;
        margin: 6px;
    }
    .hu-photo-two img {
        border-radius: 8px;
    }
}

/* 中等屏幕电脑端 (981px-1280px) */
@media screen and (max-width:1280px) {
    .hu-footlink {
        width: 10%
    }
    .hu-photo-two {
        width: 80px;
        height: 80px;
        margin: 6px;
    }
    .hu-photo-two img {
        border-radius: 8px;
    }
}

/* 小屏幕电脑端/大平板 (769px-980px) */
@media screen and (max-width:980px) {
    .hu-bads {
        width: 100%;
    }
    .hu-tads {
        width: 100%;
    }
    .hu-toptext {
        display: block;
    }
    .hu-footlink {
        width: 16.5%
    }
    .hu-photo-two {
        width: 75px;
        height: 75px;
        margin: 5px;
    }
    .hu-photo-two img {
        border-radius: 8px;
    }
}



/* 平板端 (577px-750px) */
@media screen and (max-width:750px) {
    .hu-text-top {
        font-size: 12px;
        padding: 1px 3px;
    }
    .hu-bads {
        width: 100%;
    }
    .hu-tads {
        width: 100%;
    }
    .hu-photo-two {
        width: 70px;
        height: 70px;
        margin: 4px;
    }
    .hu-footlink {
        width: 24%
    }
    .hu-photo-two img {
        border-radius: 6px;
    }
    .hu-duilian {
        display: none;
    }
    .hu-aas img {
        height: 50px !important;
        width: 100% !important;
    }
    .hu-aas .hu-bigimg {
        height: 78px !important;
    }
    .hu-leftd {
        width: 90px !important;
    }
    .hu-rightd {
        width: 90px !important;
    }
    .hu-bottomads img {
        height: 55px !important;
    }
    .hu-topads img {
        height: 55px !important;
        margin-top: 10px;
    }
    .hu-photo-name {
        font-size: 11px;
        padding: 6px 3px;
    }
}

/* 大手机端 (481px-576px) */
@media screen and (max-width:576px) {
    .hu-photo-two {
        width: 65px;
        height: 65px;
        margin: 3px;
    }
    .hu-photo-two img {
        border-radius: 5px;
    }
    .hu-photo-name {
        font-size: 10px;
        padding: 5px 2px;
    }
    .hu-icon-container {
        padding: 15px;
        margin: 15px 0;
    }
}

/* 小手机端 (<480px) */
@media screen and (max-width:480px) {
    .hu-photo-two {
        width: 60px;
        height: 60px;
        margin: 2px;
    }
    .hu-photo-name {
        font-size: 9px;
        padding: 4px 2px;
    }
    .hu-icon-container {
        padding: 10px;
        margin: 10px 0;
        border-radius: 8px;
    }
}

.hu-col6 {
    position: relative;
    min-height: 1px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.hu-row6 {
    display: flex;
    flex-wrap: wrap;
}

@media screen and (max-width:750px) {
    .hu-col6 {
        width: 100% !important;
    }
}

@media (min-width: 768px) {
    .hu-col6 {
        width: 100%;
    }
}

.hu-label2 a {
    align-items: center;
    background-color: #fff;
    border-radius: 4px;
    color: #333;
    display: inline-flex;
    font-size: 0.95rem;
    height: 2em;
    justify-content: center;
    line-height: 1.5;
    padding-left: .75em;
    padding-right: .75em;
    white-space: nowrap;
    margin-bottom: 3px;
    margin-right: 3px;
    border: 1px solid #00868B;
    cursor: pointer;
}

.hu-linkfont{
    cursor: pointer;
    color: inherit;
    display: inline-block;
    border: 2px solid #8B658B;
    padding: 2px;
    margin: 2px;
    width: 10.48%;
    text-align: center;
}

/* 内联链接样式 - 用于站长推荐、极品链接、热搜词汇 */
.hu-inline-link{
    cursor: pointer;
    color: inherit;
    display: inline-block;
    border: 2px solid #008B45;
    padding: 4px 8px;
    margin: 4px 6px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 6px;
    background: rgba(255,255,255,0.8);
    text-decoration: none;
    min-width: 80px;
}

.hu-inline-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    text-decoration: none;
}

/* 站长推荐内联链接 */
.hu-inline-link-master {
    border-color: #008B45;
    color: #008B45;
}

.hu-inline-link-master:hover {
    background-color: #008B45;
    color: #fff;
}

/* 极品链接内联链接 */
.hu-inline-link-quality {
    border-color: #FF8C00;
    color: #FF8C00;
}

.hu-inline-link-quality:hover {
    background-color: #FF8C00;
    color: #fff;
}

/* 热搜词汇内联链接 */
.hu-inline-link-hot {
    border-color: #1E90FF;
    color: #1E90FF;
}

.hu-inline-link-hot:hover {
    background-color: #1E90FF;
    color: #fff;
}

.hu-label3 a {
    padding: 1px 4px !important;
    border-radius: 1px;
    margin: 2px;
    line-height: 20px !important;
    border-right: unset !important;
    border-bottom: 1px solid !important;
    color: #3a88e9;
    font-size: 14px;
    cursor: pointer;
    display:inline-block;
}

@media screen and (max-width: 430px){
    .hu-logo a img {
        max-width: 180px;
        width: 100%;
    }
}

@media screen and (max-width: 390px){
    .hu-logo a img {
        max-width: 180px;
        width: 100%;
    }
}

@media screen and (max-width:750px){
    .hu-linkfont{
        font-size: 12px;
        width: 31.3%;
    }

    .hu-inline-link{
        font-size: 12px;
        padding: 3px 6px;
        margin: 3px 4px;
        min-width: 70px;
    }

    .hu-inline-links {
        padding: 8px;
        line-height: 1.8;
    }
    
    .hu-container22 {
        position: unset;
    }
}

.hu-headline h1, .hu-headline h2 {
    direction: unset;
}

.hu-list-playlists .hu-item, .hu-list-models .hu-item, .hu-list-sponsors .hu-item, .hu-list-channels .hu-item, .hu-list-categories .hu-item, .hu-list-albums .hu-item, .hu-list-albums-images .hu-item, .hu-list-videos .hu-item, .hu-list-videos-screenshots .hu-item {
    width: 25%;
}

.hu-sidebar+.hu-main-container .hu-list-videos .hu-item, .hu-sidebar+.hu-main-container .hu-place~.hu-item:nth-of-type(-n+7), .hu-place~.hu-item:nth-of-type(-n+7), .hu-member-menu+.hu-main-container-user .hu-list-videos .hu-item, .hu-member-menu+.hu-main-container-user .hu-list-playlists .hu-item, .hu-list-playlists .hu-item, .hu-list-videos .hu-item {
    width: 48%;
}

.hu-masterhavora2{
    font-size: 12px;
}

/* 懒加载图片样式优化 */
img.lazy, img.hu-lazy {
    transition: opacity 0.3s ease-in-out;
    will-change: opacity; /* 优化动画性能 */
}

img.lazy.loading, img.hu-lazy.loading {
    opacity: 0.7;
    filter: blur(1px);
}

img.lazy.loaded, img.hu-lazy.loaded {
    opacity: 1;
    filter: none;
}

img.lazy.error, img.hu-lazy.error {
    opacity: 0.5;
    filter: grayscale(50%);
}

/* 针对不同分辨率的优化 */
@media (max-width: 768px) {
    img.lazy, img.hu-lazy {
        /* 在移动设备上减少模糊效果，提升性能 */
        transition: opacity 0.2s ease-in-out;
    }
}

/* 预加载提示样式 */
.lazy-loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid #00868B;
    border-radius: 50%;
    animation: lazy-spin 1s linear infinite;
    z-index: 10;
}

@keyframes lazy-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}