* {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    padding: 0;
    color: #333;
    background: #fff
}

body {
    font-size: 14px;
    line-height: 1.8
}

a {
    color: #333;
    text-decoration: none;
    transition: .25s
}

a:hover {
    color: #a61c00
}

.container {
    width: 1200px;
    max-width: calc(100% - 30px);
    margin: auto
}

.header {
    height: 80px;
    background: url('../images/product-paper-fibers.png') center/cover;
    position: sticky;
    top: 0;
    z-index: 20
}

.header-inner {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.logo img {
    height: 62px;
    width: auto
}

.hot-line {
    position: absolute;
    right: 2%;
    top: 3px;
    color: #666;
    font-size: 13px
}

.hot-line strong {
    color: #a61c00
}

.nav ul {
    list-style: none;
    margin: 25px 0 0;
    padding: 0;
    display: flex
}

.nav li {
    position: relative
}

.nav>ul>li>a {
    display: block;
    padding: 8px 24px;
    /* border-bottom: 4px solid transparent; */
    color: #111
}

.nav>ul>li:hover>a,
.nav>ul>li.current>a {
    color: #a61c00;
    border-bottom-color: #a61c00
}

.nav li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    width: 168px;
    margin: 0;
    background: #ad7669;
    flex-direction: column;
    transform: translateX(-50%);
    box-shadow: 0 8px 18px rgba(55, 24, 12, .14)
}

.nav li:hover ul {
    display: flex
}

.nav li ul a {
    display: block;
    color: #fff;
    padding: 9px 14px;
    text-align: center
}

.nav li ul a:hover {
    background: #89584b
}

.nav-toggle {
    display: none;
    background: #1f1a18;
    color: #fff;
    border: 0;
    padding: 8px 12px;
    font-size: 20px
}

.hero {
    height: 585px;
    background: url('../images/banner-home.jpg') center/cover no-repeat;
    position: relative;
    border-bottom: 34px solid transparent;
    border-image: url('../images/ornament-long-divider.svg') 30 round
}

.hero-copy {
    padding-top: 195px;
    margin-left: 25px
}

.hero-copy h1 {
    margin: 0;
    color: #a61c00;
    font-size: 48px;
    font-weight: 400
}

.hero-copy h2 {
    margin: 5px 0;
    width: 245px;
    padding: 6px 14px;
    background: #a61c00;
    color: #fff;
    font-size: 16px;
    font-weight: 400
}

.hero-copy p {
    width: 470px;
    font-size: 13px
}

.dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    display: flex;
    gap: 18px
}

.dots i {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #a87543
}

.dots i:last-child {
    background: #6d2d1b
}

.section {
    padding: 55px 0
}

.section-title {
    text-align: center;
    font-size: 34px;
    font-weight: 400;
    margin: 0 0 28px
}

.section-title small {
    display: block;
    color: #a61c00;
    font-size: 15px;
    letter-spacing: 2px
}

.recommend {
    background: url('../images/product-paper-fibers.png') center/cover
}

.recommend-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 35px;
    align-items: start
}

.recommend-art img {
    width: 100%;
    max-height: 300px;
    object-fit: contain
}

.intro h2 {
    font-size: 32px;
    font-weight: 400;
    margin: 0
}

.intro p {
    color: #666
}

.line {
    width: 45px;
    border-top: 1px solid #333;
    margin: 16px 0 24px
}

.products {
    background: #f7f7f7
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px
}

.product-card {
    background: #fff;
    border: 1px solid #ddd
}

.product-card img {
    width: 100%;
    height: 180px;
    object-fit: cover
}

.product-card h3 {
    font-size: 15px;
    font-weight: 400;
    padding: 0 12px;
    margin: 8px 0
}

.product-card p {
    font-size: 12px;
    color: #999;
    padding: 0 12px;
    margin: 0 0 12px
}

.about-band {
    background: #3b0d04 url('../images/otis-redding.png');color:#ddd}.about-band .section-title{color:#fff;text-align:left}.about-band p{max-width:700px}.news-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 50px}.news-item{padding:15px 0;border-bottom:1px dashed #ddd;display:flex;justify-content:space-between}.news-item a{color:#780001}.footer{background:#360900 url(' ../images/otis-redding.png');color:#fff;margin-top:35px}.footer-main{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;padding:35px 0}.footer a{color:#fff}.footer h3{font-size:19px;font-weight:400;margin:0 0 12px}.footer p{margin:4px 0;color:#eee}.footer img{max-width:100px}.copyright{text-align:center;background:#290700;padding:10px;color:#eee;font-size:12px}.breadcrumb{background:#fafafa;border-bottom:1px dashed #ddd;padding:12px 20px;margin:0 0 35px}.page-content{padding:40px 0}.subnav{text-align:center;margin:10px auto 45px}.subnav a{display:inline-block;padding:10px 34px;border-top:1px solid #8f7166;border-bottom:1px solid #8f7166}.list-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:28px}.article{max-width:850px;margin:auto}.article h1{text-align:center;font-size:28px;font-weight:400;color:#780001}.article .date{text-align:center;color:#999}.article img{max-width:100%;display:block;margin:20px auto}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px}.contact-title{font-size:28px;color:#a61c00;font-weight:400}.form input,.form textarea{width:100%;padding:10px;border:1px solid #ddd;margin:7px 0 15px}.form button{background:#780001;color:#fff;border:0;padding:10px 35px}.jobs h2{font-weight:400;color:#780001;border-bottom:1px solid #ddd;padding-bottom:8px}.jobs p{margin:8px 0}
@media(max-width:1024px) {
            .header {
                height:66px
            }

            .header-inner {
                height:66px
            }

            .logo img {
                height:48px
            }

            .nav-toggle {
                display:block
            }

            .nav {
                position:fixed; top:0; right:-310px; width:290px; height:100vh; background:#fff; transition:.3s; padding-top:65px
            }

            .nav.active {
                right:0
            }

            .nav ul {
                display:block; margin:0
            }

            .nav>ul>li>a {
                border-bottom:1px solid #ddd; padding:12px 25px
            }

            .nav li ul {
                position:static; width:100%; background:#eee; transform:none; box-shadow:none
            }

            .nav li:hover ul {
                display:none
            }

            .nav li.open ul {
                display:block
            }

            .hot-line {
                display:none
            }

            .hero {
                height:390px
            }

            .hero-copy {
                padding-top:105px; margin-left:5%
            }

            .hero-copy h1 {
                font-size:30px
            }

            .hero-copy h2 {
                font-size:13px; width:190px
            }

            .hero-copy p {
                width:52%; font-size:11px
            }

            .section {
                padding:35px 0
            }

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

            .recommend-art {
                display:none
            }

            .product-grid, .list-grid {
                grid-template-columns:repeat(2, 1fr); gap:15px
            }

            .news-list {
                grid-template-columns:1fr
            }

            .footer-main {
                grid-template-columns:1fr; text-align:center
            }

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

            .breadcrumb {
                margin-bottom:20px
            }
        }

        @media(max-width:520px) {
            .container {
                max-width:calc(100% - 24px)
            }

            .hero {
                height:280px; border-bottom-width:20px
            }

            .hero-copy {
                padding-top:70px
            }

            .hero-copy h1 {
                font-size:22px
            }

            .hero-copy h2 {
                font-size:11px; width:150px; padding:2px 6px
            }

            .hero-copy p {
                display:none
            }

            .dots {
                bottom:8px
            }

            .dots i {
                width:11px; height:11px
            }

            .product-grid, .list-grid {
                grid-template-columns:1fr 1fr
            }

            .product-card img {
                height:130px
            }

            .section-title {
                font-size:27px
            }

            .subnav a {
                padding:7px 10px; font-size:12px
            }
        }

        .footer {
            width:100%; overflow:hidden
        }

        .footer-main {
            grid-template-columns:1.3fr 1fr 1fr; gap:70px; align-items:start; padding:35px 0 28px; min-height:155px
        }

        .footer-main>div {
            min-width:0
        }

        .footer-main>div:last-child {
            text-align:center
        }

        .footer img {
            display:block; width:100px; height:100px; object-fit:cover; margin:0 auto 8px
        }

        .copyright {
            line-height:1.5; min-height:38px
        }

        @media(max-width:1024px) {
            .footer-main {
                grid-template-columns:1fr; gap:18px; text-align:center; padding:26px 0 20px; min-height:0
            }

            .footer-main>div:last-child {
                padding-top:5px
            }

            .footer h3 {
                margin-bottom:5px
            }

            .footer img {
                width:84px; height:84px
            }
        }

        :root {
            --ink:#34211b; --red:#9e2d1c; --paper:#f7f3ed; --rule:#d9c9ba
        }

        body {
            color:var(--ink); background:#fffdf9
        }

        .header {
            box-shadow:0 1px 12px rgba(60, 25, 10, .08)
        }

        .logo img {
            filter:saturate(.88)
        }

        .nav>ul>li>a {
            letter-spacing:1px
        }

        .nav>ul>li.current>a {
            font-weight:600
        }

        .hero {
            box-shadow:inset 0 -18px 28px rgba(42, 18, 8, .1)
        }

        .hero-copy {
            max-width:520px; text-shadow:0 1px 0 rgba(255, 255, 255, .45)
        }

        .hero-copy h1 {
            letter-spacing:4px; text-shadow:0 1px 0 #f7eee3
        }

        .hero-copy h2 {
            box-shadow:4px 4px 0 rgba(120, 30, 10, .12); letter-spacing:1px
        }

        .section {
            position:relative
        }

        .section-title {
            letter-spacing:3px; color:var(--ink); position:relative; padding-bottom:18px
        }

        .section-title:after {
            content:""; position:absolute; bottom:0; left:50%; width:58px; height:2px; background:var(--red); transform:translateX(-50%)
        }

        .section-title small {
            letter-spacing:3px; opacity:.85; margin-top:2px
        }

        .recommend {
            background-color:#f4f0e9
        }

        .recommend-grid {
            gap:52px
        }

        .recommend-art {
            padding:20px 12px; border-right:1px solid rgba(125, 79, 49, .18)
        }

        .recommend-art img {
            opacity:.9; filter:sepia(.15)
        }

        .intro h2 {
            letter-spacing:3px; color:var(--ink)
        }

        .intro p {
            line-height:2.1; max-width:620px
        }

        .line {
            border-color:var(--red); height:2px; background:var(--red); border:0; margin:19px 0 27px
        }

        .product-grid {
            gap:26px
        }

        .product-card {
            border:0; box-shadow:0 5px 18px rgba(57, 25, 12, .08); transition:transform .3s, box-shadow .3s; background:#fffdfa; overflow:hidden
        }

        .product-card:hover {
            transform:translateY(-5px); box-shadow:0 10px 24px rgba(57, 25, 12, .16)
        }

        .product-card img {
            display:block; transition:transform .45s; filter:saturate(.9)
        }

        .product-card:hover img {
            transform:scale(1.04)
        }

        .product-card h3 {
            color:var(--ink); letter-spacing:1px; margin-top:13px
        }

        .product-card p {
            line-height:1.5
        }

        .products {
            background:#f2eee8
        }

        .subnav {
            position:relative; display:flex; justify-content:center; gap:0; margin:12px auto 48px; max-width:740px
        }

        .subnav:before, .subnav:after {
            content:""; flex:1; height:1px; background:var(--rule); align-self:center
        }

        .subnav a {
            border:0; border-bottom:2px solid transparent; padding:8px 25px; color:#6d5144; position:relative
        }

        .subnav a:hover, .subnav a:first-child {
            color:var(--red); border-bottom-color:var(--red)
        }

        .about-band {
            background-color:#3b0d04; box-shadow:inset 0 12px 26px rgba(0, 0, 0, .12), inset 0 -12px 26px rgba(0, 0, 0, .12)
        }

        .about-band .section-title:after {
            background:#e3b39a; left:0; transform:none
        }

        .about-band p {
            line-height:2.2; color:#e3d5cb
        }

        .news-list {
            gap:0 70px
        }

        .news-item {
            padding:18px 4px; border-bottom-color:#dfd2c9
        }

        .news-item a {
            font-size:15px; color:#633226
        }

        .news-item span {
            color:#a58d80; font-size:12px
        }

        .page-content {
            padding-top:34px
        }

        .breadcrumb {
            color:#876e61; background:#faf7f2; padding:13px 22px; border-bottom-color:#dbcbbf; box-shadow:0 2px 0 rgba(124, 72, 40, .03)
        }

        .page-content>.subnav {
            margin-top:25px
        }

        .list-grid {
            gap:30px
        }

        .article {
            background:#fffdfa; padding:25px 42px 40px; box-shadow:0 5px 22px rgba(57, 25, 12, .06)
        }

        .article h1 {
            letter-spacing:3px; color:var(--ink); padding-bottom:12px; border-bottom:1px solid var(--rule)
        }

        .article .date {
            font-size:12px; color:#a58d80
        }

        .article p {
            font-size:15px; line-height:2.25; color:#67534a
        }

        .article img {
            max-height:420px; object-fit:contain
        }

        .contact-grid {
            background:#fffdfa; padding:34px 42px; box-shadow:0 5px 22px rgba(57, 25, 12, .06)
        }

        .contact-title {
            letter-spacing:2px; color:var(--red); border-bottom:1px solid var(--rule); padding-bottom:12px
        }

        .contact-grid p {
            color:#67534a
        }

        .form label {
            display:block; color:#795f52
        }

        .form input, .form textarea {
            background:#fffdf9; border-color:#d8c8bc; outline:0; transition:border-color .2s, box-shadow .2s
        }

        .form input:focus, .form textarea:focus {
            border-color:var(--red); box-shadow:0 0 0 3px rgba(158, 45, 28, .08)
        }

        .form button {
            background:var(--red); letter-spacing:2px; padding:10px 38px; cursor:pointer; transition:background .2s, transform .2s
        }

        .form button:hover {
            background:#7e2115; transform:translateY(-1px)
        }

        .jobs {
            background:#fffdfa; padding:28px 42px; box-shadow:0 5px 22px rgba(57, 25, 12, .06)
        }

        .jobs h2 {
            letter-spacing:2px; color:var(--red); margin:0 0 16px; padding:10px 0; border-bottom:1px solid var(--rule)
        }

        .jobs p {
            color:#67534a; line-height:2.05
        }

        .footer {
            border-top:5px solid #5b1e12
        }

        .footer h3 {
            letter-spacing:2px
        }

        @media(max-width:1024px) {
            .recommend-art {
                border-right:0; border-bottom:1px solid rgba(125, 79, 49, .18); padding-bottom:8px
            }

            .subnav a {
                padding:8px 14px
            }

            .article, .contact-grid, .jobs {
                padding:24px 20px
            }

            .article p {
                font-size:14px
            }

            .news-list {
                gap:0
            }

            .footer {
                border-top-width:3px
            }
        }

        @media(max-width:520px) {
            .hero-copy h1 {
                letter-spacing:1px
            }

            .section-title {
                letter-spacing:2px
            }

            .subnav {
                margin-bottom:30px
            }

            .subnav a {
                padding:7px 8px; font-size:12px
            }

            .subnav:before, .subnav:after {
                display:none
            }

            .article, .contact-grid, .jobs {
                padding:20px 15px
            }

            .article h1 {
                font-size:23px; letter-spacing:1px
            }

            .article p {
                line-height:2
            }

            .contact-title {
                font-size:23px
            }

            .news-item {
                padding:14px 0
            }

            .news-item a {
                font-size:14px
            }

            .news-item span {
                font-size:11px
            }

            .page-content {
                padding-top:22px
            }
        }

.source-home {
    color: #444;
    background: #fff
}

.source-home .container {
    width: 1200px;
    max-width: calc(100% - 30px)
}

.source-home .header {
    height: 80px;
    background: #fff;
    box-shadow: none;
    position: relative
}

.source-home .header-inner {
    height: 80px
}

.source-home .logo img {

    max-height: 80px;
}

.source-home .nav ul {
    margin: 25px 0 0
}

.source-home .nav>ul>li>a {
    color: #333
}

.source-home .hot-line {
    right: 0
}

.home-hero {
    height: 550px;
    background: url('../images/banner-home.jpg') center/cover
}

.hero-content {
    padding-top: 165px
}

.hero-content h1 {
    margin: 0;
    color: #991d0e;
    font-size: 42px;
    font-weight: 400
}

.hero-content p {
    display: inline-block;
    margin: 10px 0;
    padding: 5px 14px;
    background: #a62513;
    color: #fff;
    font-size: 16px
}

.hero-content span {
    display: block;
    width: 390px;
    line-height: 2
}

.recommend-section {
    position: relative;
    overflow: hidden;
    padding: 35px 0 48px;
    background: url('../images/product-paper-fibers.png') center/cover
}

.recommend-section .recommend-inner {
    position: relative;
    width: 975px !important;
    max-width: calc(100% - 30px);
    margin: 0 auto
}

.recommend-heading {
    padding: 0 0 28px;
    text-align: center
}

.recommend-heading h2 {
    margin: 0 0 12px;
    font-size: 28px;
    font-weight: 400;
    color: #9e2d1c
}

.recommend-heading p {
    max-width: 680px;
    margin: 0 auto;
    color: #9e2d1c;
    text-align: center
}

.source-home .recommend-carousel {
    width: 1040px;
    max-width: 100%;
    height: 390px;
    margin: 24px auto 44px;
    overflow: visible
}

.source-home .recommend-carousel .depth-card {
    width: 260px;
    height: 330px;
    top: 20px
}

.home-products {
    min-height: 950px;
    padding: 40px 0 60px;
    background: url('../images/product-paper-fibers.png') center/cover
}

.home-title {
    text-align: center
}

.home-title h2 {
    margin: 0;
    font-size: 30px;
    font-weight: 400
}

.home-title p {
    margin: 0;
    color: #aa3120;
    letter-spacing: 2px
}

.home-subnav {
    display: flex;
    justify-content: center;
    margin: 85px 0 40px;
    border-top: 1px solid #cdb9a9;
    border-bottom: 1px solid #cdb9a9
}

.home-subnav a {
    padding: 12px 37px;
    color: #666;
    border-left: 1px solid #e0d3c8
}

.home-subnav a:last-child {
    border-right: 1px solid #e0d3c8
}

.home-subnav a:first-child {
    background: #9e2d1c;
    color: #fff
}

.home-product-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 34px 24px
}

.home-product-grid article {
    background: #fff;
    text-align: center
}

.home-product-grid img {
    display: block;
    width: 100%;
    height: 185px;
    object-fit: cover
}

.home-product-grid h3 {
    margin: 10px 0;
    font-size: 14px;
    font-weight: 400
}

.home-about {
    height: 417px;
    background: url('../images/banner-home.jpg') center/cover;
    color: #fff
}

.home-about-inner {
    display: flex;
    align-items: center;
    height: 100%
}

.home-about-inner>div {
    width: 620px
}

.home-about h2 {
    margin: 0 0 22px;
    font-size: 30px;
    font-weight: 400
}

.home-about p {
    line-height: 2.1
}

.home-about a {
    display: inline-block;
    margin-top: 22px;
    padding: 8px 31px;
    border: 1px solid #fff;
    color: #fff
}

.home-news {
    padding: 30px 0 40px
}

.home-news .home-title {
    padding-bottom: 45px
}

.news-layout {
    display: grid;
    grid-template-columns: 480px 1fr;
    gap: 54px
}

.news-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

.news-featured img {
    display: block;
    width: 100%;
    height: 125px;
    object-fit: cover
}

.news-featured h3 {
    margin: 9px 0 1px;
    font-size: 14px;
    font-weight: 400
}

.news-featured time,
.news-links time {
    font-size: 12px;
    color: #999
}

.news-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 36px
}

.news-links a {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed #ddd;
    color: #555;
    font-size: 13px
}

.more-news {
    display: block;
    width: 105px;
    margin: 28px auto 0;
    padding: 7px 0;
    border: 1px solid #bca79b;
    color: #865442;
    text-align: center
}

.source-footer {
    background: #360900 url('../images/product-paper-fibers.png') repeat;
    color: #fff
}

.footer-nav {
    display: flex;
    justify-content: center;
    padding: 19px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .16)
}

.footer-nav a {
    padding: 0 28px;
    border-right: 1px solid rgba(255, 255, 255, .18);
    color: #fff
}

.footer-nav a:last-child {
    border: 0
}

.footer-content {
    display: grid;
    grid-template-columns: 4fr 6fr 2fr;
    gap: 40px;
    padding: 28px 0
}

.footer-content p {
    margin: 2px 0;
    color: #fff
}

.footer-logo {
    display: block;
    width: 245px;
    height: 64px;
    object-fit: contain;
    object-position: left
}

.footer-search {
    padding-top: 15px
}

.footer-search form {
    display: flex;
    max-width: 430px
}

.footer-search input {
    flex: 1;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #b58a7b;
    background: transparent;
    color: #fff
}

.footer-search button {
    width: 42px;
    border: 1px solid #b58a7b;
    background: #a02d1d;
    color: #fff
}

.footer-search p {
    margin-top: 11px
}

.footer-qr {
    text-align: center
}

.footer-qr img {
    width: 86px;
    height: 86px
}

.source-copyright {
    padding: 10px;
    background: #290700;
    color: #fff;
    text-align: center;
    font-size: 12px
}

@media(max-width:1024px) {

    .source-home .header,
    .source-home .header-inner {
        height: 66px
    }

    .source-home .logo img {
        width: 205px;
        height: 58px
    }

    .home-hero {
        height: 390px
    }

    .hero-content {
        padding-top: 110px
    }

    .recommend-section {
        padding: 35px 0 45px
    }

    .recommend-section .recommend-inner {
        width: auto !important
    }

    .source-home .recommend-carousel {
        height: 340px;
        margin-bottom: 34px
    }

    .source-home .recommend-carousel .depth-card {
        width: 240px;
        height: 300px
    }

    .home-products {
        min-height: 0
    }

    .home-product-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .home-about {
        height: auto
    }

    .home-about-inner {
        min-height: 360px
    }

    .news-layout {
        grid-template-columns: 1fr
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center
    }

    .footer-logo,
    .footer-search form {
        margin: auto
    }
}

@media(max-width:520px) {
    .home-hero {
        height: 280px
    }

    .hero-content {
        padding-top: 68px
    }

    .hero-content h1 {
        font-size: 23px
    }

    .hero-content span {
        width: 260px;
        font-size: 12px
    }

    .source-home .recommend-carousel {
        height: 290px;
        margin: 20px auto 28px
    }

    .source-home .recommend-carousel .depth-card {
        width: 190px;
        height: 250px
    }

    .home-subnav {
        margin-top: 35px;
        flex-wrap: wrap
    }

    .home-subnav a {
        padding: 9px 12px;
        font-size: 12px
    }

    .home-product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px
    }

    .home-product-grid img {
        height: 145px
    }

    .news-featured {
        gap: 12px
    }

    .news-links {
        grid-template-columns: 1fr
    }

    .news-links a:nth-child(n+7) {
        display: none
    }

    .footer-nav {
        flex-wrap: wrap;
        gap: 10px
    }

    .footer-nav a {
        padding: 0 10px;
        font-size: 12px
    }

    .footer-content {
        gap: 18px
    }
}

.source-home .home-hero {
    background-image: url('../images/banner-home.jpg')
}

.source-home .home-products {
    background-image: url('../images/product-paper-fibers.png')
}

.source-home .home-about {
    background-image: url('../images/banner-product-03.jpg')
}

.source-home .hot-line {
    right: max(15px, calc((100vw - 1200px)/2));
}

.source-home .nav li ul.nav-submenu {
    margin: 0;
    top: 42px;
    z-index: 25;
}

.source-home .nav li ul.nav-submenu a {
    padding: 9px 14px;
    white-space: nowrap;
}

.source-home .home-about-inner{grid-template-columns:620px 1fr}.source-home .about-copy{width:620px}.depth-carousel{position:relative;height:276px;overflow:hidden}.depth-track{position:relative;width:100%;height:100%;perspective:900px}.depth-card{position:absolute;top:18px;left:50%;width:194px;height:230px;margin:0;overflow:hidden;border:5px solid rgba(255,255,255,.85);box-shadow:0 12px 28px rgba(0,0,0,.42);transition:transform .55s ease,opacity .55s ease,filter .55s ease;transform:translateX(-50%);opacity:0;filter:brightness(.7)}.depth-card img{display:block;width:100%;height:100%;object-fit:cover}.depth-card.is-active{z-index:4;transform:translateX(-50%) scale(1);opacity:1;filter:brightness(1)}.depth-card.is-left-1{z-index:3;transform:translateX(-175%) scale(.81);opacity:.8}.depth-card.is-right-1{z-index:3;transform:translateX(75%) scale(.81);opacity:.8}.depth-card.is-left-2{z-index:2;transform:translateX(-265%) scale(.63);opacity:.4}.depth-card.is-right-2{z-index:2;transform:translateX(165%) scale(.63);opacity:.4}.depth-control{position:absolute;top:50%;z-index:5;width:30px;height:48px;border:0;background:rgba(40,10,4,.48);color:#fff;font-size:30px;line-height:38px;cursor:pointer;transform:translateY(-50%)}.depth-control:hover{background:rgba(158,45,28,.85)}.depth-prev{left:0}.depth-next{right:0}@media(max-width:1024px){.source-home .home-about-inner{grid-template-columns:1fr;gap:25px;min-height:0;padding:48px 0}.source-home .about-copy{width:auto}.depth-carousel{width:500px;max-width:100%;margin:auto}}

.hero-swiper{position:relative;height:550px;overflow:hidden;background:#eee}.swiper-track,.swiper-slide{position:absolute;inset:0}.swiper-slide{opacity:0;clip-path:inset(0 100% 0 0);transform:scale(1.1);transition:opacity .18s ease,clip-path 1s cubic-bezier(.77,0,.18,1),transform 1.25s cubic-bezier(.22,.61,.36,1)}.swiper-slide img{display:block;width:100%;height:100%;object-fit:cover}.swiper-slide.is-current{z-index:1;opacity:1;clip-path:inset(0);transform:scale(1)}.swiper-slide.is-leaving{z-index:2;opacity:0;clip-path:inset(0);transform:scale(1.03)}.hero-swiper .hero-content{position:relative;z-index:3;padding-top:165px}.swiper-arrow{position:absolute;top:50%;z-index:4;width:42px;height:68px;border:0;background:rgba(67,23,14,.35);color:#fff;font-size:42px;line-height:48px;cursor:pointer;opacity:0;transform:translateY(-50%);transition:opacity .25s,background .25s}.hero-swiper:hover .swiper-arrow{opacity:1}.swiper-arrow:hover{background:rgba(158,45,28,.82)}.swiper-prev{left:24px}.swiper-next{right:24px}.swiper-pagination{position:absolute;bottom:24px;left:50%;z-index:4;display:flex;gap:10px;transform:translateX(-50%)}.swiper-pagination button{width:28px;height:4px;border:0;background:rgba(255,255,255,.55);cursor:pointer}.swiper-pagination button.active{background:#9e2d1c}@media(max-width:1024px){.hero-swiper{height:390px}.hero-swiper .hero-content{padding-top:110px}.swiper-arrow{opacity:1;width:32px;height:52px;font-size:32px}.swiper-prev{left:10px}.swiper-next{right:10px}}@media(max-width:520px){.hero-swiper{height:280px}.hero-swiper .hero-content{padding-top:68px}.swiper-pagination{bottom:12px}.swiper-pagination button{width:20px}}

.inner-source .inner-hero{height:320px}.inner-source .hero-content{padding-top:95px}.inner-main{padding:35px 0 70px}.source-breadcrumb{padding:13px 20px;border-bottom:1px dashed #ddd;background:#fafafa}.source-breadcrumb a{color:#8b3b2a}.intro-panel{padding:40px 0 25px}.intro-panel h1,.showcase h2,.source-article>h1,.contact-source h1{text-align:center;font-size:28px;font-weight:400}.intro-panel p{max-width:940px;margin:16px auto;line-height:2.1;color:#666}.showcase{padding-top:20px}.showcase .depth-carousel{width:760px;max-width:100%;margin:20px auto}.source-article{max-width:940px;margin:0 auto;padding:38px 44px;background:#fff}.source-article>h1{margin:0 0 30px;color:#8e2b1c}.source-article section{padding:20px 0;border-top:1px solid #e8ded6}.source-article h2{margin:0 0 12px;color:#8e2b1c;font-size:19px;font-weight:400}.source-article p{margin:8px 0;line-height:2;color:#666}.contact-source{display:grid;grid-template-columns:1fr 1fr;gap:70px;max-width:980px;margin:35px auto 0}.contact-source>section,.contact-source>form{padding:35px 40px;background:#fff}.contact-source h1{text-align:left;margin:0 0 25px;color:#8e2b1c}.contact-source p{margin:8px 0;color:#666}.contact-source img{display:block;width:120px;height:120px;margin:22px 0 5px}.contact-source label{display:block;color:#765b4f}.contact-source input,.contact-source textarea{display:block;width:100%;margin:7px 0 15px;padding:10px;border:1px solid #d8c8bc;background:#fffdf9}.contact-source button{padding:10px 36px;border:0;background:#9e2d1c;color:#fff}@media(max-width:1024px){.inner-source .inner-hero{height:240px}.inner-source .hero-content{padding-top:65px}.inner-main{padding:25px 0 45px}.source-article{padding:28px 22px}.contact-source{grid-template-columns:1fr;gap:22px;margin-top:25px}.contact-source>section,.contact-source>form{padding:26px 22px}}@media(max-width:520px){.inner-source .inner-hero{height:200px}.intro-panel{padding:28px 12px 12px}.intro-panel h1,.showcase h2,.source-article>h1,.contact-source h1{font-size:23px}.source-article{padding:22px 15px}.contact-source{gap:15px}.contact-source>section,.contact-source>form{padding:22px 16px}}
.inner-title{margin:44px 0 24px;text-align:center;color:#4b3024;font-size:30px;font-weight:400;letter-spacing:2px}.source-subnav{display:flex;justify-content:center;margin:0 0 42px;border-top:1px solid #cdb9a9;border-bottom:1px solid #cdb9a9}.source-subnav a{padding:11px 34px;border-left:1px solid #e0d3c8;color:#705b50}.source-subnav a:last-child{border-right:1px solid #e0d3c8}.source-subnav a.active,.source-subnav a:hover{background:#9e2d1c;color:#fff}.inner-product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 28px;padding-bottom:25px}.inner-product-grid article{overflow:hidden;background:#fff;text-align:center;box-shadow:0 2px 12px rgba(73,42,28,.08)}.inner-product-grid a{display:block}.inner-product-grid img{display:block;width:100%;height:220px;object-fit:cover;transition:transform .35s ease}.inner-product-grid article:hover img{transform:scale(1.04)}.inner-product-grid h3{margin:12px 0 14px;color:#4c3024;font-size:15px;font-weight:400}.source-news-list{max-width:920px;margin:0 auto}.source-news-list a{display:flex;justify-content:space-between;gap:30px;padding:14px 18px;border-bottom:1px dashed #d9cabb;color:#60483b}.source-news-list a:hover{color:#9e2d1c;background:#faf5ef}.source-news-list time{color:#a98a79;font-size:12px}.detail-date{text-align:center;color:#a58d80;font-size:12px}.product-detail>img,.news-detail>img{display:block;max-width:100%;max-height:420px;margin:22px auto;object-fit:contain}@media(max-width:1024px){.inner-title{margin-top:30px}.inner-product-grid{grid-template-columns:repeat(3,1fr);gap:20px}.inner-product-grid img{height:190px}.source-subnav{margin-bottom:30px}}@media(max-width:640px){.inner-title{font-size:24px;margin:26px 0 18px}.source-subnav{flex-wrap:wrap}.source-subnav a{padding:9px 13px;font-size:12px}.inner-product-grid{grid-template-columns:repeat(2,1fr);gap:14px}.inner-product-grid img{height:150px}.inner-product-grid h3{margin:8px 0 10px;font-size:13px}.source-news-list a{padding:12px 6px;font-size:13px}.source-news-list time{white-space:nowrap}.source-article{box-shadow:none}}

.showcase h2 {
  position: relative;
  display: table;
  margin-left: auto;
  margin-right: auto;
  padding: 0 70px;
}

.showcase h2::before,
.showcase h2::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 54px;
  height: 14px;
  background: #9e2d1c;
  -webkit-mask: url('../images/ornament-divider-gold.svg') center/contain no-repeat;
  mask: url('../images/ornament-divider-gold.svg') center/contain no-repeat;
}

.showcase h2::before {
  right: 0;
  transform: translateY(-50%);
}

.showcase h2::after {
  left: 0;
  transform: translateY(-50%) scaleX(-1);
}

@media (max-width: 1024px) {
  .showcase h2 {
    padding: 0 54px;
  }

  .showcase h2::before,
  .showcase h2::after {
    width: 40px;
    height: 11px;
  }
}

@media (max-width: 520px) {
  .showcase h2 {
    padding: 0 38px;
  }

  .showcase h2::before,
  .showcase h2::after {
    width: 28px;
    height: 9px;
  }
}

.source-home .home-hero{background-image:url('../images/banner-home.jpg')}.source-home .home-products{background-image:url('../images/product-paper-fibers.png');background-repeat:repeat;background-size:500px 300px}.source-home .home-about{background-image:url('../images/banner-product-03.jpg')}.about-carousel{width:1040px!important;height:390px!important;margin:34px auto 8px!important}.about-carousel .depth-card{top:12px;width:286px;height:350px}.about-carousel .depth-control{width:38px;height:58px;font-size:36px}.site-footer{margin-top:52px;background:#310c05;color:#ead5c2;border-top:3px solid #753020}.footer-shell{display:grid;grid-template-columns:1.4fr 1fr 1.25fr .75fr;gap:42px;padding:38px 0 34px}.footer-shell h2{margin:0 0 11px;color:#f4e5d8;font-size:16px;font-weight:400}.footer-shell p{margin:4px 0;color:#d9bba6;font-size:13px}.footer-company img{display:block;width:185px;height:50px;object-fit:contain;object-position:left;filter:brightness(0) invert(1)}.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:4px 22px}.footer-links h2{grid-column:1/-1}.footer-links a{color:#d9bba6;font-size:13px}.footer-links a:hover{color:#fff}.footer-mark{text-align:center}.footer-mark img{display:block;width:90px;height:90px;object-fit:cover;margin:0 auto 6px;filter:brightness(0) invert(1);opacity:.74}.footer-bottom{padding:11px 15px;background:#210501;color:#c9a995;text-align:center;font-size:12px}@media(max-width:1024px){.about-carousel{width:700px!important;height:340px!important}.about-carousel .depth-card{width:240px;height:300px}.footer-shell{grid-template-columns:1fr 1fr;padding:30px 0}.footer-mark{display:none}}@media(max-width:520px){.about-carousel{height:290px!important}.about-carousel .depth-card{width:190px;height:250px}.footer-shell{grid-template-columns:1fr;gap:20px;text-align:center}.footer-company img{margin:auto}.footer-links{justify-content:center}.site-footer{margin-top:35px}}
.source-home .source-footer{background:#310c05;background-image:none}.home-about{position:relative;background-position:center;background-size:cover}.home-about::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.62);z-index:0}.home-about-inner{position:relative;z-index:1}.home-about .about-copy{color:#34211b}.home-about .about-copy h2{color:#34211b}.home-about .about-copy p{color:#5d4a40}.home-about .about-copy a{border-color:#34211b;color:#34211b}.inner-main:has(.intro-panel){padding-top:48px}.inner-main:has(.intro-panel) .source-breadcrumb{margin-bottom:28px}.inner-main:has(.intro-panel) .intro-panel{padding-top:20px}.hero-swiper .hero-content{opacity:0;transform:translateY(22px);transition:opacity .35s ease,transform .55s ease}.swiper-slide.is-current .hero-content{opacity:1;transform:translateY(0);transition-delay:.3s}.swiper-slide.is-current .hero-content h1,.swiper-slide.is-current .hero-content p,.swiper-slide.is-current .hero-content span{animation:heroCopyIn .6s both}.swiper-slide.is-current .hero-content p{animation-delay:.12s}.swiper-slide.is-current .hero-content span{animation-delay:.22s}@keyframes heroCopyIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media(max-width:640px){.inner-main:has(.intro-panel){padding-top:28px}.inner-main:has(.intro-panel) .source-breadcrumb{margin-bottom:18px}}


.hero-swiper .swiper-slide .hero-content{position:relative;z-index:3;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.75)}.hero-swiper .swiper-slide .hero-content h1{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.78)}.hero-swiper .swiper-slide .hero-content p{color:#fff;background:rgba(125,32,18,.9);box-shadow:0 2px 8px rgba(0,0,0,.3)}.hero-swiper .swiper-slide .hero-content span{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.85)}

.hero-swiper .swiper-slide .hero-content{position:absolute;inset:0;z-index:3;width:min(1200px,calc(100% - 30px));max-width:none;height:100%;margin:auto;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;overflow:hidden}.hero-swiper .swiper-slide .hero-content>*{max-width:min(470px,100%);overflow-wrap:anywhere}.hero-swiper .swiper-slide .hero-content span{width:min(390px,100%)}@media(max-width:520px){.hero-swiper .swiper-slide .hero-content{width:calc(100% - 24px)}.hero-swiper .swiper-slide .hero-content>*{max-width:100%}.hero-swiper .swiper-slide .hero-content span{width:min(260px,100%)}}

.inner-source .showcase{padding-top:56px}.inner-source .showcase h2{margin-bottom:0}.inner-source .showcase .about-carousel{margin-top:42px!important}.source-news-list{max-width:840px;padding:0 0 42px}.news-page .source-subnav{margin:20px 0 60px}.source-news-list a{align-items:center;gap:0;padding:0 100px 0 0;min-height:42px;position:relative;font-size:13px;line-height:3}.source-news-list .news-column{flex:0 0 auto;color:#9e2d1c}.source-news-list .news-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:6px}.source-news-list time{position:absolute;right:0;top:0;color:#acacac;font-size:12px}@media(max-width:640px){.news-page .source-subnav{margin:15px 0 28px}.source-news-list{padding-bottom:28px}.source-news-list a{padding-right:84px;min-height:38px;font-size:12px}.source-news-list time{font-size:11px}}

.source-pagination{display:flex;justify-content:center;margin:38px 0 8px}.source-pagination .pagination{display:flex;align-items:center;gap:8px}.source-pagination .page-number,.source-pagination .prev-page,.source-pagination .next-page{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;box-sizing:border-box;border:1px solid #dbcbbf;color:#765b4f;background:#fff;font-size:14px;line-height:1;transition:background .2s ease,border-color .2s ease,color .2s ease}.source-pagination a:hover{border-color:#9e2d1c;color:#fff;background:#9e2d1c}.source-pagination .page-number.active{border-color:#9e2d1c;color:#fff;background:#9e2d1c}.source-pagination .prev-page svg,.source-pagination .next-page svg{display:block;width:15px!important;height:15px!important}@media(max-width:640px){.source-pagination{margin-top:28px}.source-pagination .pagination{gap:6px}.source-pagination .page-number,.source-pagination .prev-page,.source-pagination .next-page{width:30px;height:30px;font-size:12px}.source-pagination .prev-page svg,.source-pagination .next-page svg{width:13px!important;height:13px!important}}

.source-home::after {
    display: none !important
}

.home-title h2,
.recommend-heading h2,
.inner-title,
.intro-panel h1,
.showcase h2,
.source-article>h1 {
    position: relative;
    display: table;
    margin-left: auto;
    margin-right: auto;
    padding-left: 70px;
    padding-right: 70px
}

.home-title h2::before,
.recommend-heading h2::before,
.inner-title::before,
.intro-panel h1::before,
.showcase h2::before,
.source-article>h1::before,
.home-title h2::after,
.recommend-heading h2::after,
.inner-title::after,
.intro-panel h1::after,
.showcase h2::after,
.source-article>h1::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 54px;
    height: 14px;
    color: #b98a3c;
    background: url('../images/ornament-divider-gold.svg') center/contain no-repeat;
    transform: translateY(-50%)
}

.home-title h2::before,
.recommend-heading h2::before,
.inner-title::before,
.intro-panel h1::before,
.showcase h2::before,
.source-article>h1::before {
    right: 0;
    transform: translateY(-50%) scaleX(-1)
}

.home-title h2::after,
.recommend-heading h2::after,
.inner-title::after,
.intro-panel h1::after,
.showcase h2::after,
.source-article>h1::after {
    left: 0
}

.home-title h2::before,
.home-title h2::after {
    background: #9e2d1c;
    -webkit-mask: url('../images/ornament-divider-gold.svg') center/contain no-repeat;
    mask: url('../images/ornament-divider-gold.svg') center/contain no-repeat
}

.home-title h2::before {
    transform: translateY(-50%)
}

.home-title h2::after {
    transform: translateY(-50%) scaleX(-1)
}

.source-home .nav>ul>li:hover>a,
.source-home .nav>ul>li.current>a {
    border-bottom: 0
}

.ornament-divider {
    width: 100%;
    height: 34px;
    background: #b98a3c;
    -webkit-mask: url('../images/ornament-long-divider.svg') center/100% 100% no-repeat;
    mask: url('../images/ornament-long-divider.svg') center/100% 100% no-repeat;
    opacity: .72;
    pointer-events: none
}

.ornament-divider--light {
    background: #fff;
    opacity: .72
}

.source-subnav {
    position: relative
}

.source-subnav::before,
.source-subnav::after {
    content: "";
    position: absolute;
    top: 0;
    width: 42px;
    height: 12px;
    color: #b98a3c;
    background: url('../images/ornament-divider-gold.svg') center/contain no-repeat
}

.source-subnav::before {
    right: 0;
    transform: scaleX(-1)
}

.source-subnav::after {
    left: 0
}

.home-subnav {
    position: relative
}

/* .home-subnav::before {
    content: "";
    position: absolute;
    left: calc(50% - 360px);
    top: -10px;
    width: 28px;
    height: 28px;
    color: #b98a3c;
    background: url('../images/ornament-flame.svg') center/contain no-repeat;
    opacity: .45
} */

.contact-source h1 {
    position: relative
}

/* .contact-source h1::after {
    content: "";
    display: block;
    width: 38px;
    height: 22px;
    margin-top: 5px;
    color: #b98a3c;
    background: url('../images/ornament-flame.svg') center/contain no-repeat;
    opacity: .5
} */

.footer-mark {
    position: relative
}

.footer-mark::before {
    content: "";
    display: block;
    width: 58px;
    height: 42px;
    margin: 0 auto 8px;
    color: #9bb4d9;
    background: url('../images/ornament-grid-blue.svg') center/contain no-repeat;
    opacity: .45
}

.footer-mark img {
    display: none !important
}

.nav>ul>li>a::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    margin: 2px auto 0;
    background: #b98a3c url('../images/ornament-code.svg') center/12px no-repeat;
    transition: width .25s ease
}

.nav>ul>li:hover>a::after,
.nav>ul>li.current>a::after {
    width: 22px
}

@media(max-width:1024px) {
    .home-title h2,
    .recommend-heading h2,
    .inner-title,
    .intro-panel h1,
    .showcase h2,
    .source-article>h1 {
        padding-left: 54px;
        padding-right: 54px
    }

    .home-title h2::before,
    .recommend-heading h2::before,
    .inner-title::before,
    .intro-panel h1::before,
    .showcase h2::before,
    .source-article>h1::before,
    .home-title h2::after,
    .recommend-heading h2::after,
    .inner-title::after,
    .intro-panel h1::after,
    .showcase h2::after,
    .source-article>h1::after {
        width: 40px;
        height: 11px
    }

    .home-subnav::before {
        left: 8px
    }

    .source-subnav::before {
        right: 4px
    }

    .source-subnav::after {
        left: 4px
    }
}

@media(max-width:520px) {
    .home-title h2,
    .recommend-heading h2,
    .inner-title,
    .intro-panel h1,
    .showcase h2,
    .source-article>h1 {
        padding-left: 38px;
        padding-right: 38px
    }

    .home-title h2::before,
    .recommend-heading h2::before,
    .inner-title::before,
    .intro-panel h1::before,
    .showcase h2::before,
    .source-article>h1::before,
    .home-title h2::after,
    .recommend-heading h2::after,
    .inner-title::after,
    .intro-panel h1::after,
    .showcase h2::after,
    .source-article>h1::after {
        width: 28px;
        height: 9px
    }

    .source-subnav::before,
    .source-subnav::after {
        display: none
    }

    .home-subnav::before {
        left: 4px;
        top: -7px;
        width: 22px;
        height: 22px
    }
}

@media(prefers-reduced-motion:reduce) {

    .nav>ul>li>a::after {
        transition: none
    }
}

.module-reveal {
    opacity: 0;
    transform: translate3d(0, 34px, 0);
    transition: opacity .72s ease, transform .72s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--module-delay, 0ms);
    will-change: opacity, transform;
}

.module-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@media(prefers-reduced-motion:reduce) {
    .module-reveal,
    .module-reveal.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.source-home .home-products {
  background-color: transparent;
  background-image: none;
}

.source-home .site-footer,
.source-home .source-footer {
  background-color: #310c05;
  background-image: none;
}

.source-home .home-products {
  min-height: 0;
  padding: 40px 0 28px;
}

.source-home .home-subnav .home-tab {
  appearance: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 8px 25px;
  color: #6d5144;
  background: transparent;
  font: inherit;
  cursor: pointer;
  position: relative;
}

.source-home .home-subnav .home-tab:hover,
.source-home .home-subnav .home-tab.is-active {
  color: var(--red);
  border-bottom-color: var(--red);
}

.source-home .home-subnav .home-tab+.home-tab {
  border-left: 1px solid #e0d3c8;
}

.source-home .home-subnav .home-tab.is-active {
  background: #9e2d1c;
  color: #fff;
  border-bottom-color: #9e2d1c;
}

.source-home .home-product-panel {
  display: none;
}

.source-home .home-product-panel.is-active {
  display: block;
}

.source-home .home-product-grid {
  gap: 26px 24px;
}

.source-home .home-product-grid article {
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}

.source-home .home-product-grid article > a {
  display: block;
  overflow: hidden;
}

.source-home .home-product-grid article img {
  transition: transform .45s cubic-bezier(.2, .65, .25, 1);
}

.source-home .home-product-grid article h3 {
  position: relative;
  z-index: 1;
  transition: color .3s ease, transform .3s ease;
}

.source-home .material-craft {
  padding: 58px 0 64px;
  background: #f4efe8;
}

.source-home .material-craft .home-title {
  margin-bottom: 34px;
}

.material-craft-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: center;
}

.material-craft-copy {
  color: #6b5549;
  line-height: 1.9;
}

.material-craft-copy p {
  margin: 0 0 14px;
}

.material-craft-lead {
  color: #4b3024;
  font-size: 20px;
}

.material-craft-copy ul {
  display: grid;
  gap: 10px;
  margin: 22px 0 24px;
  padding: 0;
  list-style: none;
}

.material-craft-copy li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  border-bottom: 1px solid rgba(150, 116, 91, .24);
  padding-bottom: 8px;
}

.material-craft-copy li strong {
  min-width: 78px;
  color: #9e2d1c;
  font-weight: 400;
}

.material-craft-copy li span {
  font-size: 13px;
}

.material-craft-link {
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid #9e2d1c;
  color: #9e2d1c;
  transition: background .2s ease, color .2s ease;
}

.material-craft-link:hover {
  background: #9e2d1c;
  color: #fff;
}

.material-craft-images {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
  align-items: end;
}

.material-craft-images figure {
  margin: 0;
  overflow: hidden;
}

.material-craft-images figure:last-child {
  margin-bottom: 34px;
}

.material-craft-images img {
  display: block;
  width: 100%;
  height: 290px;
  object-fit: cover;
  transition: transform .45s ease;
}

.material-craft-images figure:last-child img {
  height: 220px;
}

.material-craft-images figure:hover img {
  transform: scale(1.04);
}

@media (max-width: 760px) {
  .material-craft-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .material-craft-images {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .source-home .material-craft {
    padding: 42px 0 48px;
  }

  .material-craft-lead {
    font-size: 18px;
  }

  .material-craft-copy li {
    gap: 8px;
  }

  .material-craft-copy li strong {
    min-width: 68px;
  }

  .material-craft-images img,
  .material-craft-images figure:last-child img {
    height: 170px;
  }
}

@media (hover: hover) {
  .source-home .home-product-grid article:hover,
  .source-home .home-product-grid article:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(72, 42, 28, .14);
  }

  .source-home .home-product-grid article:hover img,
  .source-home .home-product-grid article:focus-within img {
    transform: scale(1.045);
  }

  .source-home .home-product-grid article:hover h3,
  .source-home .home-product-grid article:focus-within h3 {
    color: var(--red);
    transform: translateY(-1px);
  }
}

.source-home .craft-process {
  padding: 58px 0 64px;
  background: #f7f3ed;
}

.source-home .craft-process .home-title {
  margin-bottom: 34px;
}

.source-home .craft-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 50px;
}

.source-home .craft-steps article {
  text-align: center;
  position: relative;
}

#toTop {
  cursor: pointer;
}

.source-home .craft-steps article:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 34%;
  right: -38px;
  width: 30px;
  color: #b78e78;
  font-size: 24px;
  line-height: 1;
  text-align: center;
  transform: translateY(-50%);
}

.source-home .craft-steps img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / .72;
  object-fit: cover;
  border: 6px solid #fff;
  box-shadow: 0 4px 16px rgba(72, 42, 28, .1);
}

.source-home .craft-steps h3 {
  margin: 14px 0 3px;
  color: #4b3024;
  font-size: 17px;
  font-weight: 400;
}

.source-home .craft-steps p {
  margin: 0;
  color: #75645b;
  font-size: 13px;
  line-height: 1.8;
}

.source-home .home-about {
  height: auto;
}

.source-home .home-about-inner {
  height: auto;
  min-height: 0;
  padding: 60px 0;
  gap: 40px;
  justify-content: center;
}

.source-home .home-about-inner>.about-copy {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

.source-home .home-about .about-copy {
  width: 430px;
  flex: 0 0 430px;
  text-align: center;
}

.source-home .home-about .about-copy h2 {
  display: inline-block;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid #9e2d1c;
}

.source-home .home-about .about-copy p {
  max-width: 520px;
  margin: 0 auto;
  line-height: 2.15;
}

.source-home .home-about .about-copy a {
  margin-top: 24px;
  padding: 9px 34px;
  border: 1px solid #34211b;
  transition: background .25s, color .25s;
}

.source-home .home-about .about-copy a:hover {
  background: #34211b;
  color: #fff;
}

.source-home .home-news .news-layout {
  display: block;
}

.source-home .home-news .news-links {
  max-width: 980px;
  margin: 0 auto;
}

.source-home .home-about .depth-carousel {
  width: 730px;
  height: 390px;
  flex: 0 0 730px;
  overflow: visible;
}

.source-home .home-about .depth-card {
  width: 260px;
  height: 330px;
  top: 20px;
}

@media (min-width: 1025px) {
  .source-home .home-about-inner {
    width: 1700px;
    max-width: calc(100% - 40px);
    flex-direction: row;
    align-items: center;
    gap: 90px;
  }

  .source-home .home-about .about-copy {
    width: 560px;
    flex-basis: 560px;
    text-align: center;
  }

  .source-home .home-about .depth-carousel {
    width: 1040px;
    flex-basis: 1040px;
  }
}

.hero-swiper .swiper-slide .hero-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: max(15px, calc((100% - 1200px) / 2));
  z-index: 3;
  width: min(470px, calc(100% - 30px));
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: 0;
  transform: translateY(-5%);
  pointer-events: none;
}

.hero-swiper {
  height: auto;
  min-height: 420px;
  aspect-ratio: 1920 / 500;
  background: #68402f;
}

.hero-swiper .swiper-slide {
  clip-path: inset(0);
  transition: opacity .85s ease, transform 1.1s cubic-bezier(.22, .61, .36, 1);
}

.hero-swiper .swiper-slide.is-current {
  opacity: 1;
  transform: scale(1);
}

.hero-swiper .swiper-slide.is-leaving {
  z-index: 2;
  opacity: 0;
  clip-path: inset(0);
  transform: scale(1.035);
}

@media (max-width: 1024px) {
  .hero-swiper {
    aspect-ratio: 16 / 6.5;
  }

  .source-home .home-about-inner {
    flex-direction: column;
    gap: 30px;
  }

  .source-home .home-about .about-copy {
    width: 100%;
    flex-basis: auto;
  }

  .source-home .home-about .depth-carousel {
    width: 700px;
    max-width: 100%;
    flex-basis: 340px;
  }

  .source-home .home-about .depth-card {
    width: 240px;
    height: 300px;
  }

  .source-home .craft-process {
    padding: 44px 0 50px;
  }

  .source-home .craft-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 34px 28px;
  }

  .source-home .craft-steps article:nth-child(2)::after {
    display: none;
  }

  .source-home .craft-steps article:nth-child(1)::after,
  .source-home .craft-steps article:nth-child(3)::after {
    right: -27px;
  }

  .source-home .home-subnav .home-tab {
    padding: 8px 14px;
  }

  .hero-swiper .swiper-slide .hero-content {
    padding-top: 0;
  }

  .hero-swiper {
    min-height: 0;
  }
}

@media (max-width: 520px) {
  .hero-swiper {
    aspect-ratio: 16 / 9;
  }

  .source-home .home-about .depth-carousel {
    height: 290px;
    flex-basis: 290px;
  }

  .source-home .home-about .depth-card {
    width: 190px;
    height: 250px;
  }

  .source-home .craft-process {
    padding: 36px 0 42px;
  }

  .source-home .craft-steps {
    grid-template-columns: 1fr 1fr;
    gap: 28px 22px;
  }

  .source-home .craft-steps article:nth-child(1)::after,
  .source-home .craft-steps article:nth-child(3)::after {
    right: -24px;
    font-size: 18px;
  }

  .source-home .craft-steps img {
    border-width: 4px;
  }

  .source-home .craft-steps h3 {
    margin-top: 9px;
    font-size: 15px;
  }

  .source-home .craft-steps p {
    font-size: 11px;
    line-height: 1.6;
  }

  .source-home .home-subnav .home-tab {
    padding: 7px 8px;
    font-size: 12px;
  }

  .hero-swiper .swiper-slide .hero-content {
    left: 12px;
    padding-top: 0;
    width: calc(100% - 24px);
  }

  .hero-swiper {
    min-height: 0;
  }
}

.source-home .recommend-detail {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin: 4px auto 0;
  color: #65483b;
  text-align: center;
}

.source-home .recommend-detail span {
  color: #9e2d1c;
  font-size: 12px;
  letter-spacing: .16em;
}

.source-home .recommend-detail strong {
  color: #4b3024;
  font-size: 17px;
  font-weight: 400;
}

.source-home .recommend-detail p {
  margin: 0;
  color: #7b6559;
  font-size: 13px;
}

.source-home .nav-hot-line {
  display: none;
}

@media (max-width: 520px) {
  .source-home .recommend-detail {
    display: block;
    margin-top: 0;
  }

  .source-home .recommend-detail span,
  .source-home .recommend-detail strong,
  .source-home .recommend-detail p {
    display: block;
  }

  .source-home .recommend-detail strong {
    margin: 5px 0;
    font-size: 16px;
  }

  .source-home .recommend-detail p {
    font-size: 12px;
  }
}

@media (max-width: 1024px) {
  .source-home .header {
    position: relative;
    z-index: 100;
    height: auto !important;
    padding: 10px 0;
  }

  .source-home .header-inner {
    box-sizing: border-box;
    height: auto !important;
    min-height: 48px;
    width: 100% !important;
    max-width: none !important;
    padding-right: 15px;
    padding-left: 15px;
    justify-content: space-between;
  }

  .source-home .logo img {
    max-height: 50px;
  }

  .source-home .hot-line {
    display: none !important;
  }

  .source-home .nav-hot-line {
    display: block;
    margin: 24px 24px 0;
    padding-top: 18px;
    border-top: 0;
    color: #796155;
    font-size: 12px;
    line-height: 1.7;
  }

  .source-home .nav-hot-line strong {
    display: block;
    color: #9e2d1c;
    font-size: 17px;
    letter-spacing: .04em;
  }

  .source-home .nav-toggle {
    position: absolute;
    top: 50%;
    right: 15px;
    z-index: 102;
    display: flex !important;
    width: 32px;
    height: 32px;
    margin-left: auto;
    border: 0;
    padding: 0;
    background: transparent !important;
    color: #6f3d2d;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
  }

  .source-home .nav-toggle:hover,
  .source-home .nav-toggle:focus-visible {
    background: transparent !important;
    color: #9e2d1c;
    outline: 1px solid rgba(158, 45, 28, .35);
    outline-offset: 2px;
  }

  .source-home .nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 101;
    box-sizing: border-box;
    width: min(86vw, 320px);
    height: 100dvh;
    padding: 76px 0 24px;
    overflow-y: auto;
    background: #fffdf9;
    box-shadow: -12px 0 30px rgba(48, 25, 16, .18);
    transform: translateX(100%);
    transition: transform .28s ease;
  }

  .source-home .nav.active {
    transform: translateX(0);
  }

  .source-home .nav>ul {
    display: block;
    margin: 0 !important;
    padding: 0;
  }

  .source-home .nav>ul>li {
    display: block;
  }

  .source-home .nav>ul>li>a {
    padding: 14px 24px;
    border-bottom: 1px solid #eadfd6;
    color: #4b3024;
  }

  .source-home .nav>ul>li>a::after {
    display: none;
  }

  .source-home .nav li ul,
  .source-home .nav li ul.nav-submenu {
    position: static;
    display: none;
    width: 100%;
    margin: 0 !important;
    padding: 0;
    transform: none;
    background: #f5eee8;
    box-shadow: none;
  }

  .source-home .nav li:hover>ul {
    display: none;
  }

  .source-home .nav li.open>ul {
    display: block;
  }

  .source-home .nav li ul a {
    padding: 11px 24px 11px 42px;
    border-bottom: 1px solid rgba(162, 124, 101, .16);
    color: #6d5144;
    text-align: left;
  }

  .source-home .nav li.current>a,
  .source-home .nav li.open>a {
    color: #9e2d1c;
  }
}

@media (prefers-reduced-motion: reduce) {
  .source-home .nav {
    transition: none;
  }

  .source-home .home-product-grid article,
  .source-home .home-product-grid article img,
  .source-home .home-product-grid article h3 {
    transition: none;
  }
}

html {
  max-width: 100vw;
  overflow-x: hidden;
}

body.source-home {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

body.source-home .header,
body.source-home .hero-swiper,
body.source-home .recommend-section,
body.source-home .home-products,
body.source-home .craft-process,
body.source-home .home-about,
body.source-home .home-news,
body.source-home .site-footer {
  width: 100%;
  max-width: 100vw;
}

.source-home .home-hero,
.source-home .home-about {
  background-image: none;
}

.source-home .home-about {
  background-position: center;
}

.contact-source {
  align-items: stretch;
  gap: 38px;
  max-width: 1050px;
}

.contact-source > .contact-info,
.contact-source > .contact-form {
  padding: 38px 42px;
  border: 1px solid #eadfd5;
  background: #fff;
}

.contact-source .contact-info {
  display: flex;
  min-height: 390px;
  flex-direction: column;
}

.contact-source h1 {
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eadfd5;
  color: #6f2117;
  font-size: 23px;
}

.contact-info-list {
  display: grid;
  gap: 12px;
}

.contact-info-list p {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 10px;
  margin: 0;
  line-height: 1.8;
}

.contact-info-list span {
  color: #8e2b1c;
}

.contact-qr {
  margin-top: auto;
  padding-top: 22px;
}

.contact-source .contact-qr img {
  width: 104px;
  height: 104px;
  margin: 0 0 7px;
}

.contact-source .contact-qr p {
  color: #8b7368;
  font-size: 13px;
}

.contact-form {
  display: flex;
  flex-direction: column;
}

.contact-form .contact-field {
  margin: 0 0 16px;
  color: #60463d;
  font-size: 14px;
}

.contact-form .contact-field em {
  margin-left: 3px;
  color: #a62e1e;
  font-style: normal;
}

.contact-form input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
.contact-form textarea {
  box-sizing: border-box;
  margin: 8px 0 0;
  padding: 11px 12px;
  border: 1px solid #dfd0c4;
  border-radius: 0;
  background: #fffdfa;
  color: #3d2b25;
}

.contact-form textarea {
  resize: vertical;
  min-height: 126px;
}

.contact-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 9px;
}

.contact-form button {
  align-self: flex-start;
  min-width: 132px;
  margin-top: 4px;
  padding: 11px 28px;
  background: #8e2b1c;
  cursor: pointer;
  transition: background .2s ease;
}

.contact-form button:hover,
.contact-form button:focus {
  background: #6f2117;
}

.form-message {
  min-height: 20px;
  margin: 12px 0 0 !important;
  font-size: 13px;
}

.form-message.success { color: #39734a; }
.form-message.error { color: #ad3323; }

@media (max-width: 1024px) {
  .contact-source { gap: 22px; }
  .contact-source > .contact-info,
  .contact-source > .contact-form { padding: 28px 24px; }
  .contact-source .contact-info { min-height: 0; }
  .contact-qr { margin-top: 26px; }
}

.source-home .home-about::before {
  background: rgba(249, 245, 239, .78);
}

.source-home .home-about-inner {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, .78fr);
  max-width: 1120px;
  padding: 68px 0;
  gap: 72px;
}

.source-home .home-about-inner > .about-copy {
  width: auto;
  max-width: none;
  margin: 0;
  text-align: left;
}

.source-home .home-about .about-copy h2 {
  display: block;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  color: #3f281f;
  font-size: 30px;
}

.source-home .home-about .about-copy p {
  max-width: 540px;
  margin: 0 0 14px;
  color: #5d4a40;
  line-height: 2;
}

.source-home .home-about .about-copy .about-lead {
  color: #9e2d1c;
  font-size: 17px;
}

.source-home .home-about .about-copy a {
  margin-top: 0;
  border-color: #9e2d1c;
  color: #9e2d1c;
}

.source-home .home-about .about-copy a:hover {
  background: #9e2d1c;
}

.about-visual {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 16px;
  align-items: end;
}

.about-visual figure {
  margin: 0;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(66, 39, 25, .16);
}

.about-visual figure:last-child {
  margin-bottom: 38px;
}

.about-visual img {
  display: block;
  width: 100%;
  height: 310px;
  object-fit: cover;
  transition: transform .45s ease;
}

.about-visual figure:last-child img {
  height: 224px;
}

.about-visual figure:hover img {
  transform: scale(1.04);
}

@media (max-width: 1024px) {
  .source-home .home-about-inner {
    grid-template-columns: 1fr;
    max-width: 720px;
    gap: 34px;
  }

  .about-visual {
    max-width: 620px;
  }
}

@media (max-width: 520px) {
  .source-home .home-about-inner {
    padding: 48px 0;
    gap: 26px;
  }

  .source-home .home-about .about-copy h2 {
    font-size: 25px;
  }

  .about-visual {
    gap: 10px;
  }

  .about-visual img,
  .about-visual figure:last-child img {
    height: 180px;
  }

  .about-visual figure:last-child {
    margin-bottom: 22px;
  }
}

.featured-cases {
  padding: 64px 0 76px;
  background: #efede8;
}

.featured-cases-shell {
  width: min(80vw, 1200px);
  margin: 0 auto;
}

.featured-cases-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.featured-cases-heading h2 {
  margin: 0;
  color: #34211b;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: .12em;
}

.featured-cases-heading p {
  margin: 0;
  color: #796b63;
  font-size: 14px;
}

.featured-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2.45 / 1;
  background: #29221e;
}

.featured-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.025);
  transition: opacity .55s ease, transform .7s ease, visibility .55s;
}

.featured-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  z-index: 1;
}

.featured-slide > a,
.featured-slide > img {
  display: block;
  width: 100%;
  height: 100%;
}

.featured-slide img {
  object-fit: cover;
}

.featured-slide::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, rgba(17, 15, 13, .05) 42%, rgba(17, 15, 13, .72) 100%);
}

.featured-caption {
  position: absolute;
  left: 42px;
  right: 42px;
  bottom: 34px;
  z-index: 2;
  color: #fff;
}

.featured-caption h3 {
  margin: 0 0 6px;
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 400;
  letter-spacing: .12em;
}

.featured-caption p {
  max-width: 650px;
  margin: 0;
  color: rgba(255, 255, 255, .86);
  font-size: 14px;
  line-height: 1.8;
}

.featured-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #292522;
}

.featured-tab {
  min-height: 84px;
  padding: 16px 20px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .18);
  background: transparent;
  color: #c9c0ba;
  text-align: left;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}

.featured-tab:last-child {
  border-right: 0;
}

.featured-tab strong,
.featured-tab span {
  display: block;
}

.featured-tab strong {
  margin-bottom: 4px;
  color: inherit;
  font-size: 15px;
  font-weight: 400;
}

.featured-tab span {
  overflow: hidden;
  color: rgba(255, 255, 255, .5);
  font-size: 11px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.featured-tab:hover,
.featured-tab.is-active {
  background: #655951;
  color: #fff;
}

.featured-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 40px;
  height: 64px;
  border: 0;
  background: rgba(26, 21, 18, .42);
  color: #fff;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity .25s ease, background .25s ease;
}

.featured-stage:hover .featured-arrow,
.featured-arrow:focus-visible {
  opacity: 1;
}

.featured-arrow:hover {
  background: rgba(158, 45, 28, .82);
}

.featured-prev {
  left: 16px;
}

.featured-next {
  right: 16px;
}

@media (max-width: 1024px) {
  .featured-cases-shell {
    width: min(90vw, 900px);
  }

  .featured-caption {
    left: 28px;
    right: 28px;
    bottom: 24px;
  }
}

@media (max-width: 640px) {
  .featured-cases {
    padding: 42px 0 48px;
  }

  .featured-cases-shell {
    width: calc(100% - 24px);
  }

  .featured-cases-heading {
    display: block;
    margin-bottom: 16px;
  }

  .featured-cases-heading h2 {
    font-size: 25px;
  }

  .featured-cases-heading p {
    margin-top: 6px;
    font-size: 12px;
  }

  .featured-stage {
    aspect-ratio: 1.25 / 1;
  }

  .featured-caption {
    left: 18px;
    right: 18px;
    bottom: 20px;
  }

  .featured-caption h3 {
    font-size: 22px;
  }

  .featured-caption p {
    font-size: 12px;
  }

  .featured-tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .featured-tab {
    min-height: 68px;
    padding: 12px 14px;
  }

  .featured-tab:nth-child(2) {
    border-right: 0;
  }

  .featured-tab:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, .18);
  }

  .featured-arrow {
    width: 32px;
    height: 48px;
    font-size: 28px;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .featured-slide,
  .featured-tab,
  .featured-arrow {
    transition: none;
  }
}