* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:90px
}
body {
    margin:0;
    background:#f8f6ef;
    color:#183d3a;
    font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif
}
a {
    color:inherit;
    text-decoration:none
}
img {
    display:block;
    max-width:100%
}
button {
    font:inherit;
    cursor:pointer
}
.wrap {
    width:1200px;
    max-width:calc(100% - 48px);
    margin:auto
}
.qvmoa {
    position:sticky;
    top:0;
    z-index:20;
    background:#f8f6eff2;
    border-bottom:1px solid #dbe3d8;
    backdrop-filter:blur(12px)
}
.gtrix {
    width:1200px;
    max-width:calc(100% - 48px);
    min-height:76px;
    margin:auto;
    display:flex;
    align-items:center;
    gap:24px
}
.zbyqe {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:19px;
    font-weight:800
}
.zbyqe img {
    width:42px;
    height:42px;
    border-radius:12px;
    object-fit:cover
}
.zbyqe small {
    display:block;
    font-size:8px;
    color:#79908b;
    letter-spacing:1px;
    margin-top:3px
}
.rcnwu {
    display:flex;
    gap:18px;
    align-items:center;
    margin-left:auto;
    font-size:13px;
    font-weight:600
}
.rcnwu a {
    padding:27px 0
}
.rcnwu a:hover {
    color:#c35e3b
}
.bqvra {
    display:inline-flex;
    gap:8px;
    align-items:center;
    justify-content:center;
    padding:13px 18px;
    border-radius:8px;
    background:#e88755;
    color:#fff;
    font-size:12px;
    font-weight:800;
    white-space:nowrap
}
.lppxa {
    display:none
}
.hero {
    background:#183d3a;
    color:#f9f7ec;
    overflow:hidden
}
.heroTop {
    display:flex;
    justify-content:space-between;
    padding:19px 0;
    border-bottom:1px solid #4b7166;
    color:#9bb7aa;
    font-size:10px;
    letter-spacing:2px
}
.heroGrid {
    display:grid;
    grid-template-columns:1.02fr .98fr;
    min-height:610px;
    align-items:center
}
.heroCopy {
    padding:60px 55px 60px 0
}
.pill {
    display:inline-flex;
    gap:8px;
    align-items:center;
    padding:7px 11px;
    border:1px solid #7ea397;
    border-radius:20px;
    color:#d7e7d9;
    font-size:12px
}
.hero h1 {
    margin:25px 0 20px;
    font-size:22px;
    line-height:1.35;
    font-weight:500
}
.hero h1 em {
    display:block;
    margin-top:12px;
    color:#f5bd75;
    font-size:53px;
    line-height:1.22;
    font-style:normal;
    font-weight:800
}
.heroCopy>p {
    max-width:540px;
    color:#adc3b5;
    font-size:16px;
    line-height:1.95
}
.heroBtns {
    display:flex;
    gap:14px;
    margin-top:32px
}
.primary,.secondary {
    min-height:54px;
    padding:0 24px;
    border:1px solid #f5bd75;
    border-radius:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    font-weight:800
}
.primary {
    background:#f5bd75;
    color:#183d3a
}
.secondary {
    border-color:#66897d;
    color:#e5eee2
}
.primary i {
    font-size:21px
}
.heroFacts {
    display:flex;
    gap:30px;
    margin-top:38px
}
.heroFacts b,.heroFacts small {
    display:block
}
.heroFacts b {
    font-size:13px
}
.heroFacts small {
    margin-top:5px;
    color:#91afa0;
    font-size:10px
}
.heroVisual {
    position:relative;
    min-height:580px;
    padding:55px 0 35px;
    display:flex;
    align-items:center;
    justify-content:center
}
.visualCard {
    width:292px;
    padding:14px 14px 0;
    border:1px solid #88a89a;
    border-radius:20px;
    background:#f7f4e8;
    color:#183d3a;
    box-shadow:24px 20px 0 #e8875538;
    transform:rotate(3deg)
}
.vcHead,.vcFoot {
    height:42px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:10px
}
.visualCard img {
    width:100%;
    height:auto;
    aspect-ratio:262/460;
    object-fit:contain;
    border-radius:8px
}
.vcFoot {
    color:#6b8173
}
.vcFoot i {
    color:#5a9a77
}
.sticker,.quote {
    position:absolute;
    padding:12px;
    border:1px solid #183d3a;
    background:#f5bd75;
    color:#183d3a;
    font-size:11px;
    font-weight:800
}
.sticker {
    right:16px;
    top:75px;
    transform:rotate(8deg)
}
.quote {
    left:25px;
    bottom:76px;
    background:#aee2dc;
    line-height:1.5;
    transform:rotate(-7deg)
}
.show,.process,.reviews {
    padding:88px 0
}
.show {
    background:#f8f6ef
}
.feature {
    padding:88px 0;
    background:#e2eee2
}
.download {
    padding:88px 0;
    background:#f5bd75
}
.faq {
    padding:88px 0;
    background:#f8f6ef
}
.news {
    padding:88px 0;
    background:#dbeee9
}
.ndwke {
    margin-bottom:42px;
    text-align:center;
    font-size:32px;
    font-weight:800
}
.ndwke:after {
    content:"";
    display:block;
    width:35px;
    height:4px;
    margin:14px auto 0;
    border-radius:4px;
    background:#e88755
}
.kojds {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px
}
.nglib {
    margin:0;
    padding:9px;
    border:1px solid #dce4d7;
    border-radius:16px;
    background:#fff
}
.nglib>div {
    height:30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#9baf9b;
    font-size:10px
}
.nglib img {
    width:100%;
    height:auto;
    aspect-ratio:262/460;
    object-fit:contain
}
.nglib figcaption {
    padding:15px 4px 7px;
    display:flex;
    justify-content:space-between;
    font-size:13px
}
.nglib figcaption i {
    color:#e88755
}
.vtpym {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1px;
    background:#b9d1c5
}
.igcom {
    min-height:210px;
    padding:28px;
    background:#f8f6ef
}
.igcom>span {
    color:#9eb1a7;
    font-size:10px
}
.igcom>i {
    float:right;
    color:#4c947e;
    font-size:27px
}
.igcom>div {
    clear:both;
    padding-top:28px;
    font-size:18px;
    font-weight:800
}
.igcom p {
    margin:12px 0 0;
    color:#70877b;
    font-size:13px;
    line-height:1.85
}
.dlwrs {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px
}
.ksbia {
    padding:24px;
    border:1px solid #183d3a;
    border-radius:12px;
    background:#fff9eb
}
.ksbia>span {
    font-size:10px;
    color:#9b684d
}
.wdupq {
    display:block;
    margin:18px 0 9px;
    font-size:16px;
    font-weight:800;
    line-height:1.55;
    overflow-wrap:anywhere
}
.ksbia p {
    margin:0 0 20px;
    color:#7f7568;
    font-size:12px;
    line-height:1.7
}
.zcjex {
    display:flex;
    justify-content:space-between;
    padding:11px 13px;
    border-radius:7px;
    background:#e2eee2;
    color:#356759;
    font-size:12px;
    font-weight:700
}
.noupx {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px
}
.rqmpo {
    position:relative;
    padding:20px;
    border:1px solid #b9d1c5;
    border-radius:13px;
    background:#edf5eb
}
.rqmpo>b {
    display:grid;
    width:38px;
    height:38px;
    place-items:center;
    border-radius:50%;
    background:#183d3a;
    color:#f5bd75;
    font-size:11px
}
.rqmpo i {
    display:block;
    margin:25px 0 13px;
    color:#4c947e;
    font-size:25px
}
.rqmpo strong {
    font-size:16px
}
.rqmpo p {
    margin:10px 0 0;
    color:#70877b;
    font-size:12px;
    line-height:1.8
}
.umyqs {
    border-top:1px solid #dbe3d8
}
.owmza {
    border-bottom:1px solid #dbe3d8
}
.owmza summary {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:23px 0;
    cursor:pointer;
    list-style:none;
    font-size:16px;
    font-weight:700
}
.owmza summary::-webkit-details-marker {
    display:none
}
.owmza summary i {
    flex:0 0 auto;
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#e2eee2;
    color:#5b927d
}
.owmza[open] summary i {
    transform:rotate(45deg)
}
.owmza p {
    margin:0;
    padding:0 55px 24px 0;
    color:#788b7e;
    font-size:14px;
    line-height:1.9
}
.irxlo {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px
}
.morze {
    padding:25px;
    border:1px solid #b8d8cc;
    border-radius:14px;
    background:#f8f6ef
}
.morze>div {
    display:flex;
    justify-content:space-between;
    gap:12px;
    font-size:10px;
    color:#7c9687
}
.morze>div span {
    color:#c35e3b
}
.morze strong {
    display:block;
    margin:19px 0 10px;
    font-size:18px;
    line-height:1.6
}
.morze p {
    margin:0 0 20px;
    color:#6d8174;
    font-size:13px;
    line-height:1.85
}
.morze small {
    padding-top:14px;
    border-top:1px solid #d8e7dc;
    color:#8aa08f;
    font-size:10px
}
.lejpv {
    columns:3;
    column-gap:18px
}
.bfkzu {
    display:inline-block;
    width:100%;
    break-inside:avoid;
    margin-bottom:18px;
    padding:23px;
    border:1px solid #dce4d7;
    border-radius:14px;
    background:#fff
}
.bfkzu:nth-child(2n) {
    background:#f0f7ef
}
.rqojt {
    display:flex;
    align-items:center;
    gap:10px
}
.rqojt>span {
    width:35px;
    height:35px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#dcece0;
    color:#45735f;
    font-size:12px
}
.rqojt b,.rqojt time {
    display:block
}
.rqojt b {
    font-size:12px
}
.rqojt time {
    margin-top:4px;
    color:#9da99d;
    font-size:9px
}
.rqojt small {
    margin-left:auto;
    color:#a8b2a3;
    font-size:9px
}
.bfkzu p {
    margin:18px 0 0;
    color:#708176;
    font-size:14px;
    line-height:1.9
}
.thnqz {
    padding:43px 0 22px;
    background:#183d3a;
    color:#e6eee3
}
.lasqi {
    display:flex;
    align-items:center;
    gap:20px
}
.lasqi .kmxdu {
    color:#fff
}
.lasqi p {
    color:#9db3a4;
    font-size:12px
}
.lasqi .fwamq {
    margin-left:auto
}
.xuqst {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    margin:28px 0;
    color:#a8bcae;
    font-size:11px
}
.bcqle {
    padding-top:20px;
    border-top:1px solid #42665b;
    color:#819a8d;
    font-size:10px;
    display:flex;
    justify-content:space-between;
    gap:10px
}
@media(max-width:767px) {
    .wrap,.epqza {
        width:100%;
        max-width:calc(100% - 32px)
    }
    .gtrix {
        width:100%;
        max-width:none;
        padding:0 16px;
        min-height:65px
    }
    .zbyqe {
        font-size:17px
    }
    .zbyqe img {
        width:36px;
        height:36px
    }
    .lppxa {
        display:block;
        margin-left:auto;
        border:0;
        background:#e2eee2;
        width:38px;
        height:38px;
        border-radius:8px
    }
    .bqvra {
        padding:10px;
        font-size:0
    }
    .bqvra i {
        font-size:18px
    }
    .rcnwu {
        display:none;
        position:absolute;
        top:65px;
        left:0;
        right:0;
        padding:10px 16px;
        background:#f8f6ef;
        grid-template-columns:repeat(2,1fr);
        box-shadow:0 14px 25px #183d3a16
    }
    .rcnwu.open {
        display:grid
    }
    .rcnwu a {
        padding:12px;
        border-bottom:1px solid #e3e8dd;
        text-align:center
    }
    .heroTop {
        padding:16px 0;
        font-size:8px
    }
    .heroGrid {
        display:flex;
        flex-direction:column;
        min-height:0
    }
    .heroCopy {
        padding:46px 0 28px
    }
    .hero h1 {
        font-size:19px
    }
    .hero h1 em {
        font-size:38px
    }
    .heroCopy>p {
        font-size:14px
    }
    .heroBtns {
        display:flex;
        flex-direction:column;
        gap:12px
    }
    .primary,.secondary {
        width:100%
    }
    .heroFacts {
        gap:8px;
        margin-top:28px
    }
    .heroFacts span {
        flex:1;
        padding:8px;
        background:#254a43
    }
    .heroFacts small {
        font-size:8px
    }
    .heroVisual {
        width:100%;
        min-height:490px;
        padding:22px 0 48px
    }
    .visualCard {
        width:245px
    }
    .sticker {
        right:3px;
        top:35px
    }
    .quote {
        left:0;
        bottom:40px
    }
    .show,.process,.reviews,.feature,.download,.faq,.news {
        padding:62px 0
    }
    .ndwke {
        font-size:27px;
        margin-bottom:30px
    }
    .kojds {
        display:flex;
        overflow-x:auto;
        gap:14px;
        padding-bottom:12px;
        scroll-snap-type:x mandatory
    }
    .nglib {
        flex:0 0 78%;
        scroll-snap-align:start
    }
    .vtpym,.dlwrs,.noupx {
        grid-template-columns:1fr
    }
    .igcom {
        min-height:auto;
        padding:24px
    }
    .rqmpo {
        min-height:145px;
        display:grid;
        grid-template-columns:48px 1fr;
        column-gap:18px
    }
    .rqmpo>b {
        grid-row:1/4
    }
    .rqmpo i {
        margin:2px 0 9px
    }
    .rqmpo strong,.rqmpo p {
        grid-column:2
    }
    .irxlo {
        grid-template-columns:1fr
    }
    .morze {
        padding:22px
    }
    .lejpv {
        columns:1
    }
    .bfkzu {
        padding:22px
    }
    .lasqi {
        flex-wrap:wrap
    }
    .lasqi p {
        order:3;
        width:100%;
        margin:0
    }
    .lasqi .fwamq {
        margin-left:auto
    }
    .xuqst {
        gap:15px 20px
    }
    .bcqle {
        flex-direction:column
    }
}