/* 
	Theme Name: Modown Lite
	Theme URL: http://www.mobantu.com/7191.html
	Description: WordPress资源下载主题
	Author: 模板兔
	Author URI: http://www.mobantu.com
	Version: 9.71
*/
/* ============================================  
   CSS 公共变量定义
   说明：以下变量为全站公共可复用参数
   --theme-color 和 --theme-color2 在主题后台设置
   ============================================ */
:root {
    /* 主题色（已在后台设置，此处引用） */
    
    /* 文字颜色 */
    --text-primary: #636e72;
    --text-secondary: #95a5a6;
    --text-tertiary: #b2bec3;
    --text-white: #ffffff;
    
    /* 背景颜色 */
    --bg-white: #ffffff;
    --bg-gray-50: #f8f9fa;
    --bg-gray-100: #f1f2f6;
    --bg-gray-200: #e8ecf1;
    --bg-gray-300: #dfe4ea;
    --bg-green-50: #f1f8e9;
    --bg-green-100: #e8f5e9;
    --bg-yellow-50: #fff9c4;
    --bg-yellow-100: #fffde7;
    
    /* 边框颜色 */
    --border-light: #cfd8dc;
    --border-lighter: #e8f5e9;
    --border-transparent: transparent;
    
    /* 强调色 */
    --accent-green: #81c784;
    --accent-green-light: rgba(129, 199, 132, 0.1);
    --accent-green-transparent: rgba(129, 199, 132, 0);
    --accent-green-border: rgba(129, 199, 132, 0.7);
    --accent-blue: #64b5f6;
    --accent-blue-dark: #42a5f5;
    --accent-yellow: #ffe082;
    --accent-yellow-dark: #ffb74d;
    --accent-weixin: #81c784;
    --accent-weibo: #ef5350;
    --accent-qq: #64b5f6;
    
    /* 阴影 */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
    --shadow-green: 0 4px 14px rgba(129, 199, 132, 0.3);
    --shadow-green-lg: 0 6px 20px rgba(129, 199, 132, 0.4);
    --shadow-blue: 0 4px 14px rgba(100, 181, 246, 0.3);
    --shadow-blue-lg: 0 6px 20px rgba(100, 181, 246, 0.4);
    --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
    
    /* 圆角 */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 15px;
    --radius-full: 50%;
    --radius-pill: 20px;
    
    /* 间距 - 内边距 */
    --space-xs: 4px;
    --space-sm: 6px;
    --space-md: 8px;
    --space-lg: 10px;
    --space-xl: 12px;
    --space-2xl: 14px;
    --space-3xl: 16px;
    --space-4xl: 20px;
    --space-5xl: 24px;
    
    /* 间距 - 外边距 */
    --margin-xs: 4px;
    --margin-sm: 8px;
    --margin-md: 12px;
    --margin-lg: 16px;
    --margin-xl: 20px;
    --margin-2xl: 24px;
    --margin-3xl: 40px;
    
    /* 字号 */
    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 13px;
    --text-md: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 20px;
    --text-3xl: 22px;
    --text-4xl: 24px;
    --text-5xl: 36px;
    --text-6xl: 48px;
    
    /* 尺寸 */
    --size-icon-sm: 16px;
    --size-icon-md: 20px;
    --size-icon-lg: 24px;
    --size-icon-xl: 48px;
    --size-avatar: 36px;
    --size-avatar-lg: 40px;
    --size-avatar-xl: 60px;
    
    /* 页面宽度 */
    --container-max: 1340px;
    
    /* 动画时间 */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}
/* ============================================  
   新Banner样式
   ============================================ */
/* Banner外层容器 */
.banner {
    position: relative;
    width: 100%;
    height: 300px; /* 可自行调整高度 */
    overflow: hidden;
    /* 马卡龙淡蓝色渐变背景+动画效果 */
  background: linear-gradient(-135deg, #89CFF0, #ACE1AF, #89CFF0);
  background-size: 200% 200%;
  animation: moveGradient 8s ease infinite;
    border-radius:0 0 15px 15px; /* 圆角更适合儿童网站 */
}

@keyframes moveGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 通用圆形样式 */
.banner .circle {
    position: absolute;
    background-color: rgba(189, 252, 201, 0.6); /* 浅绿色半透明 */
    border-radius: 50%;
    animation: float 8s ease-in-out infinite;
}

/* 给不同圆形设置大小、位置、动画延迟，实现随机效果 */
.banner .circle1 {
    width: 60px;
    height: 60px;
    top: 20%;
    left: 10%;
    animation-duration: 7s;
    animation-delay: 0s;
}
.banner .circle2 {
    width: 100px;
    height: 100px;
    top: 60%;
    left: 25%;
    animation-duration: 10s;
    animation-delay: 1s;
}
.banner .circle3 {
    width: 40px;
    height: 40px;
    top: 30%;
    left: 70%;
    animation-duration: 6s;
    animation-delay: 2s;
}
.banner .circle4 {
    width: 80px;
    height: 80px;
    top: 70%;
    left: 85%;
    animation-duration: 9s;
    animation-delay: 3s;
}
.banner .circle5 {
    width: 50px;
    height: 50px;
    top: 15%;
    left: 50%;
    animation-duration: 8s;
    animation-delay: 1.5s;
}

/* 圆形浮动关键帧动画：上下+左右随机移动 */
@keyframes float {
    0% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(30px, -30px) scale(1.1);
    }
    100% {
        transform: translate(0, 0) scale(1);
    }
}

/* 中间文字区域，适配手抄报网站 */
.banner .banner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 36px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    z-index: 10;
    text-align: center;
}

/* 保持原Banner内容的响应式布局 */
.banner .container {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-bottom: 30px;
}

/* 调整Banner文字颜色为白色 */
.banner h2,
.banner p,
.banner .search-form input,
.banner .search-form button,
.banner .banner-btn {
    color: #fff !important;
}

/* 调整搜索框样式 */
.banner .search-form {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    padding: 10px;
    backdrop-filter: blur(10px);
}

.banner .search-input {
    background: rgba(255, 255, 255, 0.9);
    color: #333 !important;
    border-radius: 20px;
}

/* 调整按钮样式 */
.banner .banner-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid #fff;
    border-radius: 25px;
    padding: 10px 25px;
    transition: all 0.3s ease;
}

.banner .banner-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/*顶部多功能组件波浪*/
.parallax{fill:var(--bg-gray-50)}.parallax > use{animation:move-forever 30s cubic-bezier(0.55,0.5,0.45,0.5) infinite}.parallax > use:nth-child(1){animation-delay:-2s;animation-duration:7s;opacity:0.5}.parallax > use:nth-child(2){animation-delay:-3s;animation-duration:10s;opacity:0.6}.parallax > use:nth-child(3){animation-delay:-4s;animation-duration:13s;opacity:0.7}.parallax > use:nth-child(4){animation-delay:-5s;animation-duration:20s;opacity:1}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}100%{transform:translate3d(85px,0,0)}}@media (max-width:767px){.parallax{display:none}}

.footer-widgets .title {
    margin-bottom: 6px;
    font-weight: 400;
    font-size: 28px;
    color: var(--text-primary);
}

/* ============================================
   手抄报分享组件样式
   ============================================ */


/* ============================================
   手抄报标签样式
   ============================================ */

/* 当前文章标签区域 */
.scb-post-tags {
    display: flex;
    gap: var(--space-lg);
}

.tags-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-primary);
}

.tags-title .icon {
    color: var(--theme-color);
    font-size: var(--text-lg);
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.tag-item {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-2xl);
    background: var(--bg-gray-50);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    color: var(--text-secondary);
    font-size: var(--text-md);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.tag-item:hover {
    background: var(--bg-green-50);
    border-color: var(--theme-color);
    color: var(--theme-color);
    transform: translateY(-2px);
}

/* 热门标签云 */
.scb-all-tags {
    margin-top: var(--space-xl);
}

.tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.tag-cloud-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg);
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.tag-cloud-item:hover {
    background: var(--bg-green-50);
    border-color: var(--theme-color);
    color: var(--theme-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.tag-cloud-item .tag-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--space-xs);
    background: var(--bg-gray-100);
    border-radius: var(--radius-pill);
    font-size: 10px;
    color: var(--text-tertiary);
    transition: all var(--transition-fast);
}

.tag-cloud-item:hover .tag-count {
    background: var(--theme-color);
    color: var(--text-white);
}

/* 标签大小类 */
.tag-cloud-item.tag-sm {
    font-size: var(--text-xs);
}

.tag-cloud-item.tag-md {
    font-size: var(--text-sm);
}

.tag-cloud-item.tag-lg {
    font-size: var(--text-base);
    font-weight: 500;
}

/* 响应式适配 */
@media (max-width: 768px) {
    .scb-post-tags {
        padding: var(--space-xl);
    }
    
    .tags-cloud {
        gap: var(--space-xs);
    }
    
    .tag-cloud-item {
        padding: 2px var(--space-sm);
        font-size: var(--text-xs);
    }
}

/* 暂无标签提示 */
.no-tags {
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    text-align: center;
    padding: var(--space-xl);
}

.footer-widget ul li {
	margin-top: 5px;
	font-size: 14px;
}

.widget-bottom-logo .footer-logo img {
    max-height: 100px;
    max-width: 220px;
}

.footer-widget:nth-child(2) {
	width: calc(16% - 20px);
}

.footer-widget:nth-child(3) {
	width: calc(24% - 20px);
}

.footer-widget .footer-widget-content ul li {
	margin-top: 0px;
	width: 50%;
	float: left;
	text-align: center;
}

.footer-widget .footer-widget-content p {
	line-height: 22px;
}

.ewm-wz {
	width: 100%;
	line-height: 28px !important;
	height: 28px !important;
	font-size: 14px;
}

.footer-widget .footer-widget-content ul {
	margin-left: -10px;
}

#footer-animal {
	position:relative;
	margin-top: 20px;
}
#footer-animal:before {
	content:'';
	position:absolute;
	bottom:0;
	width:100%;
	height:35px;
	background:url(https://www.easxp.com/style/img/footer_zoo_line.webp) repeat center/auto 100%;
	box-shadow:0 4px 7px rgba(0,0,0,.15)
}
.animal {
	position:relative;
	height: 120px;
	margin:0 auto;
	padding-bottom: 5px;
	display:block
}

.article-shares{
    margin-left: 30px;
    
}

/* ============================================  
   版权声明样式
   ============================================ */
.article-copyright {
	position: relative;
	margin: 30px auto 30px auto;
	width: 90%;
	padding: 0px;
}

.biaoti {
	position: absolute;
	top: -15px;
	color: #fff;
	padding: 3px 10px;
	left: 40%;
	width: auto;
	text-align: center;
	background-color: var(--theme-color);
	border-radius: 20px;
	font-size: 1.2em;
}

.article-copyright p {
	padding: 5px 8px 0px 5px;
	font-size: 0.95em;
	line-height: 22px;
	margin: 0px;
}

.info-list {
	border-radius: 5px;
	border: 1px dashed var(--theme-color);
	padding: 20px 15px 15px 15px;
}

.article-copyright .btn-info{
    margin-right: 8px
}