/*
 Theme Name:page-builder-framework-child
 Theme URI: http://7g5.com/
 Description:  page-builder-framework-子主题
 Author: 七狗网
 Author URI:http://7g5.com/
 Template:  page-builder-framework
 Version:1.2.7
 Text Domain:  page-builder-framework-child
*/



.container {
width: 100%;
max-width: 720px;
}

/* 幻灯片容器 - 只有上方圆角 */
.slider {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
border-radius: 12px 12px 0 0;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
/* 硬件加速优化 */
transform: translateZ(0);
}

.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
animation: slideAnimation 15s infinite;
/* 每个幻灯片单独设置圆角 */
border-radius: 12px 12px 0 0;
/* 性能优化 */
will-change: transform, opacity;
backface-visibility: hidden;
}

.slide img {
width: 100%;
height: 100%;
object-fit: cover;
/* 图片本身设置圆角 */
border-radius: 12px 12px 0 0;
display: block;
}

/* 设置各个幻灯片的动画延迟 */
.slide:nth-child(1) {
animation-delay: 0s;
}

.slide:nth-child(2) {
animation-delay: 3s;
}

.slide:nth-child(3) {
animation-delay: 6s;
}

.slide:nth-child(4) {
animation-delay: 9s;
}

.slide:nth-child(5) {
animation-delay: 12s;
}

/* 添加遮罩层增强视觉效果 */
.slide::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.3) 100%);
pointer-events: none;
/* 遮罩层也设置圆角 */
border-radius: 12px 12px 0 0;
}

/* 优化幻灯片动画 - 确保圆角始终存在 */
@keyframes slideAnimation {
0% {
opacity: 0;
transform: scale(1.05);
border-radius: 12px 12px 0 0; /* 确保圆角始终存在 */
}
4% {
opacity: 0;
transform: scale(1.02);
border-radius: 12px 12px 0 0;
}
5% {
opacity: 1;
transform: scale(1);
border-radius: 12px 12px 0 0;
}
19% {
opacity: 1;
transform: scale(1);
border-radius: 12px 12px 0 0;
}
20% {
opacity: 1;
transform: scale(1);
border-radius: 12px 12px 0 0;
}
24% {
opacity: 0;
transform: scale(1.02);
border-radius: 12px 12px 0 0;
}
25% {
opacity: 0;
transform: scale(1.05);
border-radius: 12px 12px 0 0;
}
100% {
opacity: 0;
transform: scale(1.05);
border-radius: 12px 12px 0 0;
}
}

/* 悬停暂停功能 */
.slider:hover .slide {
animation-play-state: paused;
}

/* 说明文本区域 - 直角设计 */
.caption {
padding: 15px;
background: #2a475e;
border-radius: 0 0 0 0;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
border-top: 1px solid #2a475e;
}

.caption p {
color: #c7d5e0;
font-size: 14px;
line-height: 1.5;
text-align: left;
}

/* 响应式设计 */
@media (max-width: 768px) {
.slider {
height: 180px;
border-radius: 10px 10px 0 0;
}

.slide, 
.slide img,
.slide::after {
border-radius: 10px 10px 0 0; /* 移动端统一圆角 */
}

@keyframes slideAnimation {
0% {
opacity: 0;
transform: scale(1.05);
border-radius: 10px 10px 0 0;
}
4% {
opacity: 0;
transform: scale(1.02);
border-radius: 10px 10px 0 0;
}
5% {
opacity: 1;
transform: scale(1);
border-radius: 10px 10px 0 0;
}
19% {
opacity: 1;
transform: scale(1);
border-radius: 10px 10px 0 0;
}
20% {
opacity: 1;
transform: scale(1);
border-radius: 10px 10px 0 0;
}
24% {
opacity: 0;
transform: scale(1.02);
border-radius: 10px 10px 0 0;
}
25% {
opacity: 0;
transform: scale(1.05);
border-radius: 10px 10px 0 0;
}
100% {
opacity: 0;
transform: scale(1.05);
border-radius: 10px 10px 0 0;
}
}
}

@media (max-width: 480px) {
.slider {
height: 150px;
border-radius: 8px 8px 0 0;
}

.slide, 
.slide img,
.slide::after {
border-radius: 8px 8px 0 0; /* 小屏幕统一圆角 */
}

.caption {
padding: 12px;
}

.caption p {
font-size: 13px;
}

@keyframes slideAnimation {
0% {
opacity: 0;
transform: scale(1.05);
border-radius: 8px 8px 0 0;
}
4% {
opacity: 0;
transform: scale(1.02);
border-radius: 8px 8px 0 0;
}
5% {
opacity: 1;
transform: scale(1);
border-radius: 8px 8px 0 0;
}
19% {
opacity: 1;
transform: scale(1);
border-radius: 8px 8px 0 0;
}
20% {
opacity: 1;
transform: scale(1);
border-radius: 8px 8px 0 0;
}
24% {
opacity: 0;
transform: scale(1.02);
border-radius: 8px 8px 0 0;
}
25% {
opacity: 0;
transform: scale(1.05);
border-radius: 8px 8px 0 0;
}
100% {
opacity: 0;
transform: scale(1.05);
border-radius: 8px 8px 0 0;
}
}
}
		
	 /* 整体卡片样式 */	
.css-table {
width: 100%;
display: flex;
flex-direction: column;
border-radius: 8px;
overflow: hidden;
margin-bottom: 2px;
}

.table-row {
display: flex;
width: 100%;
}

.table-cell {
flex: 1;
text-align: left;
}

.content-row {
background-color: #1b2838;
}

/* 修改标题样式 - 完全取消内边距 */
.section-title {
color: #c7d5e0;
font-size: 1.1rem;
font-weight: 600;
margin: 0;
padding: 0 0 10px 0;
text-align: left;
}

/* 卡片样式 */
.card-container {
padding: 0;
width: 100%;
}

.card-grid {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 12px;
width: 100%;
padding: 0 0 15px 0;
}

.card-link {
text-decoration: none;
width: calc(33.333% - 8px);
display: block;
}

.card {
background-color: #2a475e;
border-radius: 6px;
padding: 10px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
text-align: left;
color: #c7d5e0;
display: flex;
flex-direction: column;
gap: 6px;
min-height: 95px;
width: 100%;
position: relative;
}

.card:hover {
transform: translateY(-2px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
background-color: #3c5a78;
}

.card-link:hover .card-title {
color: #66c0f4;
}

.card-header {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 2px;
}

.icon {
width: 22px;
height: 22px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
transition: transform 0.3s ease;
}

/* 单独设置图标颜色的类 */
.icon-baidu {
color: #288FEC;
}
.icon-kuake {
color: #288FEC;
}
.icon-gonglue {
color: #26B670;
}
.icon-yxfuli{
color: #F06C44;
}
.icon-chajian {
color: #29CAD1;
}
.icon-moddd {
color: #AEB1CD;
}
.icon-shuju {
color: #FF7F27;
}
.icon-shequ {
color: #00A8FF;
}
.icon-upzhu {
color: #F893A4;
}
.icon-meiti {
color: #F23D3D;
}
.icon-homeoo {
color: #CCCCCC;
}
.icon-steam {
color: #2A5E8D;
}

.icon-epic {
color: #DAE2E9;
}

.icon-playstation {
color: #50A3F0;
}
.icon-yxsd {
color: #ffffff;
}
.card-link:hover .icon {
transform: scale(1.1);
}

.card-title {
font-size: 13px;
font-weight: 600;
color: #c7d5e0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.3s ease;
margin: 0;
padding: 0;
}

.card-description {
font-size: 11px;
line-height: 1.3;
color: #c7d5e0;
overflow: visible;
white-space: normal;
display: block;
height: auto;
margin: 0;
padding: 0;
}

.external-link {
position: absolute;
top: 8px;
right: 8px;
color: #666;
font-size: 9px;
opacity: 0;
transition: opacity 0.3s ease;
}

.card-link:hover .external-link {
opacity: 1;
}

/* 平板设备 */
@media (max-width: 992px) {
.card-link {
width: calc(33.333% - 8px);
}
}

/* 手机设备 */
@media (max-width: 768px) {
.card-link {
width: calc(50% - 6px);
}

.card {
min-height: 95px;
}
}

/* 小手机设备 */
@media (max-width: 576px) {
.card-link {
width: calc(50% - 6px);
}

.card-grid {
justify-content: flex-start;
}

.card {
min-height: 95px;
}

.section-title {
padding: 0 0 10px 0;
}

.card-grid {
padding: 0 0 15px 0;
}
}
/* 首页简单设置 */
.wpbf-blog-layout-beside {border-radius: 8px
}
.footer-tags { 
display: flex; 
flex-wrap: wrap; 
gap: 5px; 
}
.footer-tags a {
background: #384E60;
padding: 3px 10px;
border-radius: 12px; 
font-size: 0.8rem; 
transition: background-color 0.2s;
}
.footer-tags a:hover {
background: #3c5a78;
cursor: pointer; 
}

/* 首页头部图片设置 */
.gallerysytu {
display: flex;
flex-wrap: wrap;
gap: 7px;
max-width: 720px;
width: 100%;
margin-bottom: 15px;
}

.cardsytu {
flex: 1 1 calc(25% - 6px);
background: #1b2838;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
}

.cardsytu:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0,0,0,0.5);
}

.imagesytu {
height: 90px;
position: relative;
}

.imagesytu a {
display: block;
width: 100%;
height: 100%;
}

.imagesytu img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.titlesytu {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 3px;
}

.titlesytu a {
color: #c7d5e0;
font-size: 14px;
text-align: center;
text-decoration: none;
display: block;
transition: color 0.3s;
text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.titlesytu a:hover {
color: #66c0f4;
}

@media (max-width: 600px) {
.cardsytu {
flex: 1 1 calc(50% - 4px);
}
}
/* h1标题颜色设置 */
h1 {color: #c7d5e0;font-weight: 700}

/* 搜索容器美化 */
.wpbf-menu-item-search .wpbf-menu-search{z-index:3;opacity:0;width:0;max-width:350px;margin-top:-17px;display:none;position:absolute;top:50%;right:0}
.wpbf-menu-item-search .wpbf-menu-search input[type=search]{
height:37px;
border: 2px solid #2a475e;
border-radius: 20px;
background: #3c5a78;
color: rgba(255, 255, 255, 0.7);
}
.wpbf-menu-item-search .wpbf-menu-search input[type="search"]::placeholder {
color: rgba(255, 255, 255, 0.7);
font-weight: 400 ;
}
/*分类搜索页h1边距调整*/
.page-title{margin-bottom:20px}
/*汉堡展开白线闪动调整*/
.wpbf-mobile-menu-container{background:#1b2838;display:none}

/* 搜索页面专用样式 */
.wpbf-search-results {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    background: #1b2838;
    color: #c7d5e0;
}

/* 内容区域背景 */
#content {
    background: #1b2838;
}

.wpbf-inner-content {
    background: #1b2838;
}

/* 搜索结果头部 */
.wpbf-search-results-header {
    padding: 20px 0;
    border-bottom: 1px solid #2a475e;
    margin-bottom: 1px;
}

.wpbf-search-results-info {
    font-size: 14px;
    color: #c7d5e0;
}

.wpbf-search-keyword {
    color: #66c0f4;
    font-weight: bold;
    margin-right: 10px;
}

.wpbf-search-count {
    color: #8f98a0;
}

/* 搜索结果列表 */
.wpbf-search-results-list {
    background: #1b2838;
}

.wpbf-search-result-item {
    padding: 15px 0;
    border-bottom: 1px solid #2a475e;
}

.wpbf-result-title {
    margin: 0 0 10px 0;
    font-size: 16px;
    line-height: 1.4;
}

.wpbf-result-title a {
    text-decoration: none;
    color: #c7d5e0;
}

.wpbf-result-title a:hover {
    color: #66c0f4;
}

.wpbf-result-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 12px;
    color: #8f98a0;
}

.wpbf-result-views,
.wpbf-result-comments {
    display: flex;
    align-items: center;
}

/* 标签样式 */
.wpbf-result-tags {
    display: flex;
    gap: 8px;
    margin-left: 10px;
}

.wpbf-tag {
    padding: 2px 8px;
    background: #2a475e;
    color: #66c0f4;
    border-radius: 3px;
    font-size: 11px;
    border: 1px solid #3c5a78;
    text-decoration: none;
}
/* 分页上外边距 */
.wpbf-search-pagination {
    margin-top: 10px;
}