@import url("moui.css");
body {background:#fafafa;color:#333;min-height:100vh;transition:all .3s;scroll-behavior:smooth;overflow-x:hidden;opacity:0;animation:pageFadeIn 1s forwards .2s;}
@keyframes pageFadeIn {0%{opacity:0;}100%{opacity:1;}}
.layui-container{ margin-top:4rem;}
.xm-nav {
    padding:1rem 3%;display:flex;justify-content:space-between;align-items:center;
    position:fixed;top:0;width:100%;z-index:999;
    height:3rem;
    background:transparent;
    transition:all 0.4s ease;
}
.xm-nav.scrolled {
    background:#fafafa;
    padding:.8rem 3%;
    box-shadow:0 2px 8px rgba(0,0,0,0.05);
}
.xm-nav .nav-logo {font-size:1.5rem;font-weight:700;letter-spacing:1px;color:#fff;transition:color 0.4s ease;}
.xm-nav.scrolled .nav-logo {color:#333;}
.xm-nav .nav-menu {display:flex;align-items:center;gap:2.5rem;}
.xm-nav .nav-menu a {color:#fff;text-decoration:none;font-size:.95rem;position:relative;transition:color 0.4s ease;}
.xm-nav .nav-menu a::after {content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:rgba(180,180,255,0.6);transition:width .3s ease;}
.xm-nav .nav-menu a:hover::after {width:100%;}
.xm-nav.scrolled .nav-menu a {color:#666666;}
.xm-nav.scrolled .nav-menu a:hover {color:#333333;}
.xm-nav .hamburger {display:none;border:none;background:transparent;font-size:1.4rem;cursor:pointer;color:#fff;transition:color 0.4s ease;}
.xm-nav.scrolled .hamburger {color:#333333;}
.xm-mask {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:998;opacity:0;visibility:hidden;transition:all .3s;backdrop-filter:blur(2px);}
.xm-mask.show {opacity:1;visibility:visible;}
.xm-mobile-sidebar {position:fixed;top:0;right:-100%;width:70%;max-width:300px;height:100vh;background:#fafafa;z-index:999;padding:2rem 1.5rem;display:flex;flex-direction:column;gap:.3rem;transition:all .3s;box-shadow:-3px 0 12px rgba(0,0,0,0.08);border-left:1px solid rgba(0,0,0,0.06);backdrop-filter:blur(12px);}
.xm-mobile-sidebar.show {right:0;}
.xm-mobile-sidebar .sidebar-close {align-self:flex-end;border:none;background:transparent;color:#666666;font-size:1.3rem;cursor:pointer;margin-bottom:1rem;transition:all .2s;}
.xm-mobile-sidebar .sidebar-close:hover {color:#333333;transform:rotate(90deg);}
.xm-mobile-sidebar .sidebar-link {color:#666666;text-decoration:none;font-size:1rem;padding:.7rem .9rem;border-radius:6px;display:block;}
.xm-mobile-sidebar .sidebar-link:hover {color:#333333;background:#eee;}
.xm-mobile-sidebar .sidebar-mode-btn {margin-top:auto;margin-bottom:8.5rem;align-self:flex-start;}
.xm-hero {padding:12rem 3% 6rem;text-align:center;position:relative;overflow:hidden;min-height:30vh;display:flex;flex-direction:column;justify-content:center;margin-bottom:16px}
.xm-hero .hero-bg-img {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1;}
.xm-hero .hero-title, .hero-sub {position:relative;z-index:4;}
.xm-hero .hero-title {font-size:4rem;font-weight:800;letter-spacing:4px;margin-bottom:1.5rem;text-shadow:0 2px 8px rgba(0,0,0,0.12);color:#fff;}
.xm-hero .hero-sub {font-size:1.3rem;color:#fff;max-width:600px;margin:0 auto;line-height:2;font-weight:500;text-shadow:0 1px 4px rgba(0,0,0,0.1);}

.bottomc {display: flex;align-items: center;text-align: center;margin:10px  0 0 0;}
.bottomc a{color:#aaa;}
.bottomc::before,.bottomc::after {content: '';flex: 1;}    

footer{background:#fff;color:#333;padding:15px 0 25px 0;}
.footer-container{width:90%;margin:0 auto;}
.footer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:10px;}
.footer-logo{font-size:18px;color:#2d3748;font-weight:600;letter-spacing:0.5px;}
.footer-nav{display:flex;gap:15px;}
.footer-nav a{color:#666;font-size:14px;position:relative;padding-bottom:3px;}
.friend-link{background:#fafafa;padding:10px;border-radius:8px;border:1px solid #f0f0f0;margin-bottom:10px;}
.friend-link-title{font-size:15px;color:#2d3748;margin-bottom:10px;font-weight:500;display:flex;align-items:center;}
.friend-link-title::before{content:"";width:3px;height:16px;background:var(--xm-color-1);margin-right:8px;border-radius:3px;}
.friend-link-list{display:flex;flex-wrap:wrap;gap:8px 10px;}
.friend-link-list a{font-size:13px;}
.footer-nav a:hover,.friend-link-list a:hover{color:var(--xm-color-1)}
.footer-bottom{text-align:center;font-size:12px;color:#888;line-height:1.6;}

.xm-post-item {background: #fff; border-radius: 8px; overflow: hidden; transition: all 0.3s ease;position: relative; border: 1px solid rgba(0,0,0,0.03);}
.xm-post-item:hover {transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,0.06);}
.xm-post-item .pic {position: relative; overflow: hidden; border-radius: 8px 8px 0 0;}
.xm-post-item .pic img {width: 100%; height: 100%; object-fit: cover; display: block; transition: all 0.3s ease;}
.xm-post-item:hover .pic img {transform: scale(1.02); filter: brightness(1.03);}
.xm-post-item .content {padding: 0.8rem;}
.xm-post-item .title,.xm-post-item .desc{display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;}
.xm-post-item .title {font-size: 0.9rem; color: #1d2129; margin-bottom: 0.4rem; font-weight: 600;line-height: 1.3; transition: color 0.3s ease;}
.xm-post-item:hover .title {color:var(--xm-color-1);}
.xm-post-item .desc {font-size: 0.75rem; color: #666c74; line-height: 1.5; margin-bottom: 0.5rem; -webkit-line-clamp: 2;}
.xm-post-item .meta {display: flex; justify-content: space-between; font-size: 0.7rem; color: #909399;align-items: center; padding-top: 0.4rem; border-top: 1px solid rgba(0,0,0,0.03);}
.xm-post-item .tag {position: absolute; top: 0.4rem; left: 0.4rem; z-index: 2;display: inline-flex; align-items: center; gap: 0.125rem;padding: 0.1rem 0.2rem; border-radius: 5px; font-size: 0.65rem; font-weight: 500;cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(2px);}
.xm-post-item .tag:hover {transform: scale(1.08); box-shadow: 0 2px 6px rgba(0,0,0,0.1);}
.xm-post-item .tag i{ color:#fff;}

.xm-post-1{display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.8rem;}
.xm-post-1 .xm-post-item {height: 100%;}
.xm-post-1 .xm-post-item .pic {height: 80px; border-radius: 8px 8px 0 0;}
.xm-post-1 .xm-post-item .desc {display: none;}
.xm-post-1 .xm-post-item .content {padding: 0.7rem;}
.xm-post-1 .xm-post-item .title {font-size: 0.85rem; margin-bottom: 0.3rem;}

.xm-post-2 {display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem;}
.xm-post-2 .xm-post-item {position: relative; height: 180px; border-radius: 8px;}
.xm-post-2 .xm-post-item .pic {height: 100%; border-radius: 8px;}
.xm-post-2 .xm-post-item .content {position: absolute; bottom:0; left:0; right:0; padding: 1rem 0.8rem 0.6rem;background: linear-gradient(transparent, rgba(0,0,0,0.75)); color:#fff;}
.xm-post-2 .xm-post-item .title {color:#fff; font-size: 0.9rem;}
.xm-post-2 .xm-post-item:hover .title {color:#fff; text-shadow: 0 1px 2px rgba(0,0,0,0.2);}
.xm-post-2 .xm-post-item .desc {color:#e5e7eb; -webkit-line-clamp:1; margin-bottom: 0.3rem; font-size: 0.72rem;}
.xm-post-2 .xm-post-item .meta {color:#d1d5db; border-top-color: rgba(255,255,255,0.1); padding-top: 0.3rem;}


.xm-post-3 {display: flex; flex-direction: column; gap: 0.8rem;}
.xm-post-3 .xm-post-item {display: flex; flex-wrap: wrap; gap: 0; border-radius: 8px;}
.xm-post-3 .xm-post-item .pic {flex: 1 1 80px;height: 5.3rem; border-radius: 0;}
.xm-post-3 .xm-post-item .content {flex: 4 1 80px;height: 5.3rem;display: flex; flex-direction: column; justify-content: flex-start;/*justify-content: cente; */padding: 0.4rem;}
.xm-post-3 .xm-post-item:nth-child(even) .pic {order: 2;}
.xm-post-3 .xm-post-item .title {font-size: 0.9rem; margin-bottom: .1rem; -webkit-line-clamp:2;}
.xm-post-3 .xm-post-item .desc {margin-bottom:0px;-webkit-line-clamp:1;}
.xm-post-3 .xm-post-item .meta {margin-top:auto}

.xm-post-4 {display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem;}
.xm-post-4 .xm-post-item{display: flex; gap: 0.6rem; padding: 0.6rem; border-radius: 8px; align-items: center;}
.xm-post-4 .xm-post-item .pic {flex: 0 0 55px; height: 55px; border-radius: 6px; overflow: hidden;}
.xm-post-4 .xm-post-item .pic .tag {display:none}
.xm-post-4 .xm-post-item .content {flex: 1; padding: 0;}
.xm-post-4 .xm-post-item .title {font-size: 0.88rem; margin-bottom: 0.2rem;-webkit-line-clamp: 1;}
.xm-post-4 .xm-post-item .desc {font-size: 0.72rem; margin-bottom: 0.3rem; -webkit-line-clamp: 1;}
.xm-post-4 .xm-post-item .meta {border-top: 1px solid rgba(0,0,0,0.03); padding-top: 0.3rem; margin:0; font-size: 0.68rem;}


.layui-laypage-post .layui-laypage-curr,
.layui-laypage-post a[data-page]{
 margin-right:10px;
 border-radius: 8px;
}
.layui-laypage-post .layui-laypage-curr .layui-laypage-em{
    background: var(--xm-color-1);    
    border-radius: 8px;
}
.layui-laypage-post .layui-laypage-count{
    margin-left:0px;
    background:#fff;
    padding:0px 4px;
    border-radius: 8px;
}
.layui-laypage-post a[data-page] i{
 font-size:12px
}


.article-meta {display: flex;flex-wrap: wrap;gap: 15px;font-size: 14px;color: #868e96;margin-bottom: 2px;padding:5px;background: #fafbfc;border: 1px solid #f1f3f5;}.article-meta span {display: flex;gap: 2px;white-space: nowrap;}
.article-copyright {background: #f5fafe;border: 1px solid #e8f4ff;border-radius: 8px;padding:10px;margin:0 8px 8px 8px;font-size: 14px;color: #495057;}.article-copyright h4 {font-size: 16px;font-weight: 600;color: var(--xm-color-1);margin-bottom: 6px;display: flex;align-items: center;gap: 8px;}.article-copyright h4::before {content: "©";}.article-copyright p {line-height: 1.6;margin-bottom: 0px;}.article-copyright p:last-child {margin-bottom: 0;}.article-copyright a {color: var(--xm-color-1);font-weight: 500;}.article-relative {display: flex;justify-content: space-between;flex-wrap: wrap;gap: 20px;padding:10px;border-top: 1px solid #f5f7fa;}.article-relative a {display: flex;flex-direction: column;gap: 5px;color: #495057;max-width: 45%;}.article-relative a:hover {color: #409eff;}.article-relative .label {font-size: 13px;color: #868e96;}.article-relative .title {font-size: 15px;font-weight: 500;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

@media (max-width:768px) {
    .xm-nav .nav-menu {display:none;}
    .xm-nav .hamburger {display:block;}
    .xm-hero {padding:8rem 3% 5rem;min-height:50vh;}
    .xm-hero .hero-title {font-size:2.8rem;letter-spacing:2px;}
    .xm-hero .hero-sub {font-size:1.1rem;}
    .xm-hero .hero-particle {background-size:30px 30px;background-position:0 0,15px 15px;}

}