.screen-advantages .copy-01 {
    left: 28px;
    top: 145px
}

.screen-advantages .copy-02 {
    left: 0;
    top: 350px
}

.screen-advantages .copy-03 {
    left: 92px;
    bottom: 12px
}

.screen-advantages .copy-04 {
    right: 92px;
    bottom: 12px
}

.screen-advantages .copy-05 {
    right: 0;
    top: 350px
}

.screen-advantages .copy-06 {
    right: 28px;
    top: 145px
}

.screen-process {
    background: #fff
}

.screen-process .screen-title {
    margin-bottom: 56px
}

.process-mosaic {
    height: 470px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr 1fr
}

.process-mosaic article {
    position: relative;
    overflow: hidden;
    background: #f3f3f3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    color: #171717
}

.process-mosaic .process-photo {
    padding: 0
}

.process-mosaic img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.process-mosaic h3 {
    margin: 0 0 18px;
    font-size: 21px
}

.process-mosaic p {
    margin: 0;
    line-height: 2;
    font-size: 13px
}

.process-mosaic .process-tone {
    background: #bc8d68;
    color: #fff
}

.process-mosaic article:nth-child(1) {
    grid-column: 1;
    grid-row: 2
}

.process-mosaic article:nth-child(2) {
    grid-column: 1;
    grid-row: 1
}

.process-mosaic article:nth-child(3) {
    grid-column: 2;
    grid-row: 1
}

.process-mosaic article:nth-child(4) {
    grid-column: 2;
    grid-row: 2
}

.process-mosaic article:nth-child(5) {
    grid-column: 3;
    grid-row: 2
}

.process-mosaic article:nth-child(6) {
    grid-column: 3;
    grid-row: 1
}

.process-mosaic article:nth-child(7) {
    grid-column: 4;
    grid-row: 1
}

.process-mosaic article:nth-child(8) {
    grid-column: 4;
    grid-row: 2
}

.process-mosaic article:nth-child(9) {
    grid-column: 5;
    grid-row: 2
}

.process-mosaic article:nth-child(10) {
    grid-column: 5;
    grid-row: 1
}

.process-mosaic .process-card {
    transition: transform .4s, filter .4s
}

.process-mosaic .process-card:hover {
    transform: scale(1.04);
    z-index: 2;
    filter: brightness(.78)
}

.process-mosaic .process-card .hover-copy {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    padding: 26px;
    background: #0009;
    color: #fff;
    opacity: 0;
    transition: opacity .35s
}

.process-mosaic .process-card:hover .hover-copy {
    opacity: 1
}

.screen-about {
    color: #fff
}

.screen-about:before {
    background-image: linear-gradient(#06100db8, #06100dc9), url(../images/hero-workshop.jpg)
}

.screen-about .screen-title {
    display: none
}

.about-stage {
    height: 550px;
    position: relative
}

.about-video {
    position: absolute;
    left: 0;
    bottom: 22px;
    width: 43%;
    height: 310px;
    background: linear-gradient(#0002, #0008), url(../images/workshop-detail.jpg) center/cover;
    display: grid;
    place-items: center
}

.about-video:before {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid #ffffff55
}

.about-video .play {
    position: static;
    transform: none
}

.about-copy {
    position: absolute;
    right: 0;
    top: 92px;
    width: 46%;
    padding: 38px 44px;
    background: #0b120dcc;
    border-left: 3px solid #bc8d68
}

.about-copy .eyebrow {
    color: #d9ab87;
    letter-spacing: 3px;
    font-size: 12px
}

.about-copy h2 {
    font-size: 30px;
    margin: 12px 0
}

.about-copy p {
    color: #e5e5e5;
    line-height: 2;
    margin: 0 0 20px
}

.about-copy a {
    display: inline-block;
    border: 1px solid #d6ac8b;
    color: #fff;
    padding: 8px 20px
}

.brand-strip {
    position: absolute;
    right: 0;
    bottom: 22px;
    width: 46%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid #ffffff44
}

.brand-strip span {
    padding-top: 14px;
    text-align: center;
    color: #d6d6d6;
    font-size: 12px
}

.screen-about .partner-row {
    display: none
}

.contact-stage {
    min-height: 590px;
    padding-top: 75px
}

.contact-stage .contact-title {
    text-align: center;
    font-size: 28px;
    margin: 0 0 45px
}

.contact-details {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
    gap: 20px
}

.contact-detail {
    padding: 18px 8px 26px;
    background: #18100c8c;
    border: 1px solid #ffffff22
}

.contact-detail img {
    width: 68px;
    height: 68px;
    margin: 0 auto 15px;
    filter: brightness(0) invert(1);
    opacity: .88
}

.contact-detail b,
.contact-detail span {
    display: block
}

.contact-detail b {
    font-size: 17px;
    margin-bottom: 8px
}

.contact-detail span {
    font-size: 13px;
    color: #ddd
}

.contact-map {
    height: 245px;
    margin-top: 28px;
    background: linear-gradient(#ffffff16, #ffffff16), url(../images/map-grid.svg) center/cover;
    border: 1px solid #ffffff33
}

.screen-contact .screen-title,
.screen-contact .home-contact {
    display: none
}

@media(max-width:900px) {
    .screen-advantages .orbit-copy {
        display: none
    }

    .process-mosaic {
        height: 420px;
        grid-template-columns: repeat(5, 44vw);
        overflow: auto
    }

    .process-mosaic article {
        padding: 20px
    }

    .process-mosaic article:nth-child(n) {
        grid-row: auto;
        grid-column: auto
    }

    .process-mosaic article:nth-child(odd) {
        grid-row: 2
    }

    .process-mosaic article:nth-child(even) {
        grid-row: 1
    }

    .process-mosaic h3 {
        font-size: 16px
    }

    .process-mosaic p {
        font-size: 11px
    }

    .about-stage {
        height: 570px
    }

    .about-video {
        left: 0;
        width: 74%;
        height: 235px;
        bottom: 30px
    }

    .about-copy {
        top: 55px;
        right: 0;
        width: 82%;
        padding: 24px
    }

    .about-copy h2 {
        font-size: 23px
    }

    .brand-strip {
        display: none
    }

    .contact-stage {
        padding-top: 55px;
        min-height: 0
    }

    .contact-stage .contact-title {
        font-size: 24px;
        margin-bottom: 24px
    }

    .contact-details {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px
    }

    .contact-detail {
        padding: 14px 8px
    }

    .contact-detail img {
              width: 43px;
        height: 26px;
    }

    .contact-detail span {
        font-size: 11px
    }

    .contact-map {
        height: 165px;
        margin-top: 12px
    }
}

.home-products a:after {
    content: "查看系列";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: #1b120b88;
    color: #fff;
    letter-spacing: 3px;
    opacity: 0;
    transition: opacity .35s
}

.home-products a img {
    transition: transform .55s ease
}

.home-products a span {
    transition: transform .35s, background .35s
}

.home-products a:hover:after {
    opacity: 1
}

.home-products a:hover img {
    transform: scale(1.09)
}

.home-products a:hover span {
    transform: translateY(-8px);
    background: #bc8d68e8
}

.home-news article {
    position: relative;
    overflow: hidden;
    transition: background .3s, transform .3s
}

.home-news article img {
    transition: transform .5s
}

.home-news article:after {
    content: "阅读更多 →";
    display: block;
    color: #bc8d68;
    opacity: 0;
    transform: translateY(10px);
    transition: .3s
}

.home-news article:hover {
    background: #fbf8f5;
    transform: translateY(-5px)
}

.home-news article:hover img {
    transform: scale(1.06)
}

.home-news article:hover:after {
    opacity: 1;
    transform: none
}

.about-stage {
    height: 575px
}

.about-video {
    top: 42px;
    bottom: auto;
    width: 49%;
    height: 445px;
    transition: background-image .45s, transform .45s
}

.about-video:hover {
    transform: translateY(-5px)
}

.about-copy {
    top: 92px;
    width: 44%
}

.brand-strip {
    width: 44%;
    bottom: 62px
}

.brand-strip button {
    border: 0;
    border-top: 2px solid transparent;
    background: none;
    padding: 14px 5px 0;
    color: #d6d6d6;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: .25s
}

.brand-strip button:hover,
.brand-strip button.active {
    border-top-color: #bc8d68;
    color: #fff
}

.about-copy h2,
.about-copy p,
.about-copy .eyebrow {
    transition: opacity .2s, transform .2s
}

.about-copy.switching h2,
.about-copy.switching p,
.about-copy.switching .eyebrow {
    opacity: .25;
    transform: translateY(6px)
}

@media(max-width:900px) {
    .about-stage {
        height: 570px
    }

    .about-video {
        top: auto;
        bottom: 30px;
        width: 74%;
        height: 235px
    }

    .about-copy {
        top: 55px;
        width: 82%
    }

    .brand-strip {
        display: none
    }
}

.brand-strip {
    display: grid
}

@media(max-width:900px) {
    .brand-strip {
        display: flex;
        right: 0;
        bottom: 0;
        width: 100%;
        overflow-x: auto
    }

    .brand-strip button {
        min-width: 100px;
        flex: 0 0 100px
    }
}

.about-copy {
    border-left: 0
}

.about-video.about-enter-left {
    animation: about-enter-left .5s both
}

.about-copy.about-enter-right {
    animation: about-enter-right .5s both
}

@keyframes about-enter-left {
    from {
        opacity: 0;
        transform: translateX(-42px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes about-enter-right {
    from {
        opacity: 0;
        transform: translateX(42px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.advantage-summaries p {
    display: none;
    margin: 0
}

.advantage-summaries p.active {
    display: block
}

.about-video {
    overflow: hidden
}

.about-image {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .45s
}

.about-image.active {
    opacity: 1
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.about-video .play {
    z-index: 2
}

.about-panel {
    display: none
}

.about-panel.active {
    display: block
}

.home-screen .reveal {
    opacity: 1;
    transform: none
}

.home-screen .reveal.visible>* {
    animation-fill-mode: both
}

.screen-products .screen-title {
    animation: fade-scale-in .65s .05s both
}

.screen-products .home-products>a {
    opacity: 0
}

.screen-products .home-products>a:nth-child(1) {
    animation: from-left-in .65s .12s both
}

.screen-products .home-products>a:nth-child(2) {
    animation: from-bottom-in .65s .22s both
}

.screen-products .home-products>a:nth-child(3) {
    animation: from-right-in .65s .32s both
}

.screen-advantages .advantage-intro {
    opacity: 0
}

.screen-advantages .advantage-orbit.visible .advantage-intro {
    animation: fade-scale-in .65s .1s both
}

.screen-advantages .advantage-orbit.visible .orbit {
    animation: orbit-pop-in .8s .2s both
}

.screen-advantages .advantage-orbit.visible .copy-01,
.screen-advantages .advantage-orbit.visible .copy-02,
.screen-advantages .advantage-orbit.visible .copy-03 {
    animation: from-left-in .7s both
}

.screen-advantages .advantage-orbit.visible .copy-01 {
    animation-delay: .2s
}

.screen-advantages .advantage-orbit.visible .copy-02 {
    animation-delay: .34s
}

.screen-advantages .advantage-orbit.visible .copy-03 {
    animation-delay: .48s
}

.screen-advantages .advantage-orbit.visible .copy-04,
.screen-advantages .advantage-orbit.visible .copy-05,
.screen-advantages .advantage-orbit.visible .copy-06 {
    animation: from-right-in .7s both
}

.screen-advantages .advantage-orbit.visible .copy-06 {
    animation-delay: .2s
}

.screen-advantages .advantage-orbit.visible .copy-05 {
    animation-delay: .34s
}

.screen-advantages .advantage-orbit.visible .copy-04 {
    animation-delay: .48s
}

.screen-process .screen-title {
    animation: fade-scale-in .65s .05s both
}

.process-mosaic.visible article {
    opacity: 0
}

.process-mosaic.visible article:nth-child(odd) {
    animation: from-left-in .65s both
}

.process-mosaic.visible article:nth-child(even) {
    animation: from-right-in .65s both
}

.process-mosaic.visible article:nth-child(1) {
    animation-delay: .08s
}

.process-mosaic.visible article:nth-child(2) {
    animation-delay: .16s
}

.process-mosaic.visible article:nth-child(3) {
    animation-delay: .24s
}

.process-mosaic.visible article:nth-child(4) {
    animation-delay: .32s
}

.process-mosaic.visible article:nth-child(5) {
    animation-delay: .4s
}

.process-mosaic.visible article:nth-child(6) {
    animation-delay: .48s
}

.process-mosaic.visible article:nth-child(7) {
    animation-delay: .56s
}

.process-mosaic.visible article:nth-child(8) {
    animation-delay: .64s
}

.process-mosaic.visible article:nth-child(9) {
    animation-delay: .72s
}

.process-mosaic.visible article:nth-child(10) {
    animation-delay: .8s
}

.screen-about .about-stage.visible .about-video {
    animation: from-left-in .75s .12s both
}

.screen-about .about-stage.visible .about-copy {
    animation: from-right-in .75s .26s both
}

.screen-about .about-stage.visible .brand-strip {
    animation: fade-up-soft .65s .48s both
}

.screen-contact .contact-stage.visible .contact-title {
    animation: fade-scale-in .65s .06s both
}

.screen-contact .contact-stage.visible .contact-detail {
    opacity: 0;
    animation: fade-up-soft .65s both
}

.screen-contact .contact-stage.visible .contact-detail:nth-child(1) {
    animation-delay: .16s
}

.screen-contact .contact-stage.visible .contact-detail:nth-child(2) {
    animation-delay: .28s
}

.screen-contact .contact-stage.visible .contact-detail:nth-child(3) {
    animation-delay: .4s
}

.screen-contact .contact-stage.visible .contact-detail:nth-child(4) {
    animation-delay: .52s
}

.screen-contact .contact-stage.visible .contact-map {
    animation: map-reveal .8s .62s both
}

@keyframes from-left-in {
    from {
        opacity: 0;
        transform: translateX(-48px) scale(.97)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes from-right-in {
    from {
        opacity: 0;
        transform: translateX(48px) scale(.97)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes from-bottom-in {
    from {
        opacity: 0;
        transform: translateY(34px) scale(.97)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes fade-up-soft {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes fade-scale-in {
    from {
        opacity: 0;
        transform: scale(.9)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes orbit-pop-in {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(.78) rotate(-8deg)
    }

    to {
        opacity: 1;
        transform: translateX(-50%) scale(1) rotate(0)
    }
}

@keyframes map-reveal {
    from {
        opacity: 0;
        clip-path: inset(0 50% 0 50%)
    }

    to {
        opacity: 1;
        clip-path: inset(0)
    }
}

.screen-hero .hero-copy {
    animation: fade-scale-in .8s .12s both
}

.screen-products .screen-title,
.screen-process .screen-title,
.screen-news .screen-title {
    opacity: 0
}

.screen-products .screen-title.visible,
.screen-process .screen-title.visible,
.screen-news .screen-title.visible {
    animation: fade-scale-in .65s .05s both
}

.screen-news .home-news article {
    opacity: 0
}

.screen-news .home-news.visible article:nth-child(1) {
    animation: from-left-in .65s .16s both
}

.screen-news .home-news.visible article:nth-child(2) {
    animation: from-bottom-in .65s .28s both
}

.screen-news .home-news.visible article:nth-child(3) {
    animation: from-right-in .65s .4s both
}

.screen-products .home-products>a {
    opacity: 0
}

.screen-products .home-products.visible>a:nth-child(1) {
    animation: from-left-in .65s .12s both
}

.screen-products .home-products.visible>a:nth-child(2) {
    animation: from-bottom-in .65s .22s both
}

.screen-products .home-products.visible>a:nth-child(3) {
    animation: from-right-in .65s .32s both
}

.screen-news .home-news article,
.screen-products .home-products>a {
    animation: none
}

.screen-process .process-mosaic {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 360px;
    margin: 0 auto;
    overflow: visible;
    padding: 20px 5%;
    gap: 0
}

.screen-process .process-mosaic article {
    display: none
}

.screen-process .process-mosaic .process-card {
    display: block;
    flex: 0 0 205px;
    height: 215px;
    padding: 0;
    border: 5px solid #fff;
    border-radius: 18px;
    box-shadow: 0 15px 30px #19110d22;
    overflow: visible;
    background: #fff;
    position: relative;
    transition: none;
    transform: none;
    filter: none
}

.screen-process .process-mosaic .process-card:nth-child(2) {
    z-index: 1;
    transform: rotate(-7deg)
}

.screen-process .process-mosaic .process-card:nth-child(4) {
    z-index: 2;
    margin-left: -22px;
    transform: rotate(3deg)
}

.screen-process .process-mosaic .process-card:nth-child(6) {
    z-index: 3;
    margin-left: -22px;
    transform: rotate(-2deg)
}

.screen-process .process-mosaic .process-card:nth-child(8) {
    z-index: 2;
    margin-left: -22px;
    transform: rotate(5deg)
}

.screen-process .process-mosaic .process-card:nth-child(10) {
    z-index: 1;
    margin-left: -22px;
    transform: rotate(-6deg)
}

.screen-process .process-mosaic .process-card img {
    height: 100%;
    border-radius: 13px;
    object-fit: cover
}

.screen-process .process-mosaic .process-card .hover-copy {
    display: none
}

.screen-process .process-mosaic .process-card:after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -54px;
    text-align: center;
    color: #303030;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    content: "";
    transform: rotate(0)
}

.screen-process .process-mosaic .process-card:nth-child(2):after {
    content: "01  优质皮料"
}

.screen-process .process-mosaic .process-card:nth-child(4):after {
    content: "02  优质搭扣"
}

.screen-process .process-mosaic .process-card:nth-child(6):after {
    content: "03  边缘打磨"
}

.screen-process .process-mosaic .process-card:nth-child(8):after {
    content: "04  精工车线"
}

.screen-process .process-mosaic .process-card:nth-child(10):after {
    content: "05  精细孔眼"
}

.screen-process .process-mosaic .process-card:hover {
    transform: rotate(0);
    filter: none;
    z-index: 4
}

.screen-process .process-mosaic:after {
    content: "VIEW ALL PROCESS";
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    padding: 7px 16px;
    border-radius: 3px;
    background: #222;
    color: #fff;
    font-size: 9px;
    letter-spacing: 1px
}

@media(max-width:900px) {
    .screen-process .process-mosaic {
        height: 310px;
        justify-content: flex-start;
        overflow: hidden;
        padding: 15px 8%;
    }

    .screen-process .process-mosaic .process-card {
        flex-basis: 145px;
        height: 160px
    }

    .screen-process .process-mosaic .process-card:nth-child(2) {
        margin-left: 0
    }

    .screen-process .process-mosaic .process-card:after {
        bottom: -40px;
        font-size: 12px
    }

    .screen-process .process-mosaic:after {
        bottom: -8px
    }
}