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

body {
    font-family:Inter,Arial,Helvetica,sans-serif;
    background:#f1f3f5;
    color:#222
}

a {
    color:inherit;
    text-decoration:none
}

.nav {
    background:#fff;
    border-bottom:1px solid #eee
}

.nav-in {
    max-width:1180px;
    margin:auto;
    padding:22px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap
}

.menu {
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    align-items:center
}

.menu a {
    padding:10px 14px;
    font-weight:600;
    font-size:15px;
    text-transform:uppercase;
    border-radius:4px
}

.menu a.on {
    background:#0a84ff;
    color:#fff;
    text-transform:none
}

.search {
    display:flex;
    border:2px solid #0a84ff;
    border-radius:6px;
    overflow:hidden
}

.search input {
    border:0;
    padding:10px 14px;
    font-size:15px;
    width:190px;
    outline:0
}

.search button {
    background:#0a84ff;
    color:#fff;
    border:0;
    width:42px;
    font-size:16px
}

.wrap {
    max-width:1180px;
    margin:20px auto 50px;
    background:#fff;
    padding:20px
}

.post {
    display:flex;
    gap:20px;
    padding-bottom:20px;
    margin-bottom:20px;
    border-bottom:1px solid #e6e6e6
}

.post:last-of-type {
    border:0;
    margin:0
}

.thumb {
    width:230px;
    height:228px;
    flex-shrink:0
}

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

.badge {
    display:inline-block;
    background:#2ddba0;
    color:#fff;
    font-size:13px;
    padding:6px 10px;
    border-radius:4px;
    margin-bottom:10px
}

.badge.b2 {
    background:#1ec8d6
}

.post h2 {
    font-size:27px;
    line-height:1.2;
    margin-bottom:12px
}

.post h2:hover,.card h3:hover {
    color:#0a84ff
}

.meta {
    font-size:13px;
    color:#777;
    margin-bottom:14px
}

.excerpt {
    color:#444;
    line-height:1.7;
    font-size:17px
}

.pager {
    display:flex;
    gap:8px;
    justify-content:center;
    margin-top:28px
}

.pager a {
    padding:10px 16px;
    border:1px solid #ddd;
    border-radius:4px;
    font-weight:600
}

.pager a.on {
    background:#0a84ff;
    color:#fff;
    border-color:#0a84ff
}

.crumbs {
    font-size:13px;
    color:#888;
    padding:6px 4px 14px;
    border-bottom:1px solid #e6e6e6;
    margin-bottom:26px
}

.art h1 {
    font-size:36px;
    line-height:1.25;
    margin-bottom:16px
}

.art .meta a {
    color:#0a84ff;
    font-weight:700;
    margin-right:10px
}

.int {
    font-size:14px;
    font-weight:700;
    margin:18px 0 12px
}

.cards {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    margin-bottom:30px
}

.card {
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 1px 6px rgba(0,0,0,.15);
    background:#fff
}

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

.card h3 {
    font-size:17px;
    padding:12px;
    line-height:1.3
}

.art p {
    font-size:18px;
    line-height:1.8;
    color:#444;
    margin-bottom:22px
}

.video {
    aspect-ratio:16/9;
    background:#000;
    margin:10px 0 20px
}

.video iframe {
    width:100%;
    height:100%;
    border:0
}

.footer {
    background:#222;
    color:#aaa;
    text-align:center;
    padding:28px 20px;
    font-size:14px
}

.footer a {
    margin:0 10px
}

.vgrid {
    display:grid;
    grid-template-columns:1fr;
    gap:34px;
    margin:10px 0 30px
}

.vgrid .video {
    margin:0
}

.yml {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    margin:6px 0 30px
}

.yc {
    border-radius:10px;
    box-shadow:0 1px 6px rgba(0,0,0,.18);
    background:#fff;
    overflow:hidden;
    padding-bottom:14px
}

.yc .video {
    aspect-ratio:3/2;
    margin:0
}

.yc h3 {
    font-size:17px;
    line-height:1.3;
    padding:12px 12px 0;
    min-height:68px;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden
}

.yc .more {
    display:block;
    margin:22px 12px 0;
    padding-bottom:8px;
    border-bottom:1px solid #ddd;
    color:#5b4de0;
    font-size:15px
}

.yc .st {
    display:flex;
    gap:16px;
    padding:12px 12px 0;
    color:#777;
    font-size:15px
}

.yc .st span {
    display:flex;
    align-items:center;
    gap:6px
}

.yc svg {
    width:17px;
    height:17px;
    fill:#8a8f98
}

.sub {
    font-size:24px;
    margin:8px 0 12px;
    color:#222
}

.vlist .video {
    margin:0 auto 36px;
    max-width:720px;
    width:100%
}

.menu-btn {
    display:none;
    background:#0a84ff;
    color:#fff;
    border:0;
    border-radius:4px;
    padding:10px 16px;
    font-size:16px;
    font-weight:600;
    cursor:pointer
}

.pager {
    flex-wrap:wrap
}

h1,h2,h3 {
    overflow-wrap:anywhere
}

.sec {
    font-size:22px;
    font-weight:700;
    border-bottom:2px solid #222;
    padding-bottom:8px;
    margin:34px 0 20px
}

@media(max-width:760px) {
    .nav-in {
    padding:12px 15px
}

.menu-btn {
    display:block
}

.menu {
    display:none;
    order:3;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    border-top:1px solid #eee;
    margin-top:4px
}

.menu.open {
    display:flex
}

.menu a {
    padding:14px 8px;
    border-bottom:1px solid #f0f0f0;
    border-radius:0
}

.menu a.on {
    border-radius:4px;
    margin-top:6px
}

.search {
    flex:1;
    max-width:240px;
    margin-left:12px
}

.search input {
    width:100%;
    min-width:0
}

.excerpt {
    font-size:16px
}

.art p {
    font-size:17px
}

.yc h3 {
    min-height:0
}

.footer a {
    display:inline-block;
    margin:4px 8px
}

.yml {
    grid-template-columns:1fr
}

.vgrid {
    grid-template-columns:1fr
}

.post {
    flex-direction:column
}

.thumb {
    width:100%;
    height:220px
}

.cards {
    grid-template-columns:1fr
}

.art h1 {
    font-size:26px
}

.post h2 {
    font-size:22px
}

.search input {
    width:130px
}

.wrap {
    margin:10px
}

}