@charset "UTF-8";

:root {
    --color-pri-in: #ED1925;
    --color-pri: #ED1925;
    --color-second: #FF9A16;
    --color-thr: #F3B15B;
    --color-text: #15191E;
    --color-text-1: #2C0B07;
    --color-text-2: #39424E;
    --color-text-3: #65758B;
    --color-text-4: #FCAF17;
    --color-icon: #FF9A16;
    --color-tt: #FFE095;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-border: #D9D9D9;
    --color-bg: #F9F9F9;
    --color-bg-1: #FFAD43;
    --color-bg-2: #D8DCE3;
    --color-bg-3: rgba(253, 203, 111, 0.10);
    --color-bg-4: #FFEFDA;
    --border: #D8DCE3;
    --border-1: #FCAC16;
    --blur: blur(.4rem);
    --filter: brightness(0) saturate(100%) invert(23%) sepia(92%) saturate(5522%) hue-rotate(350deg) brightness(95%) contrast(94%);
    --filter-1: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%) hue-rotate(331deg) brightness(104%) contrast(100%);
    --filter-2: brightness(0) saturate(100%) invert(8%) sepia(9%) saturate(885%) hue-rotate(113deg) brightness(100%) contrast(95%);
    --color-linear: linear-gradient(101deg, #FFA318 -38.94%, #F6851C 44.05%, #F31F10 132.4%);
    --btn-linear-1: linear-gradient(94deg, #002DA1 -0.04%, #00126D 99.63%);
    --color-border-01: rgba(0, 0, 0, 0.1);
    --color-border-02: rgba(0, 0, 0, 0.2);
    --color-border-03: rgba(0, 0, 0, 0.3);
    --color-border-04: rgba(0, 0, 0, 0.4);
    --color-border-05: rgba(0, 0, 0, 0.5);
    --color-border-06: rgba(0, 0, 0, 0.6);
    --color-border-07: rgba(0, 0, 0, 0.7);
    --color-border-08: rgba(0, 0, 0, 0.8);
    --color-border-09: rgba(0, 0, 0, 0.9);
    --color-border-10: rgba(255, 144, 10, 0.10);
    --color-opa-white-01: rgba(255, 255, 255, 0.1);
    --color-opa-white-02: rgba(255, 255, 255, 0.2);
    --color-opa-white-03: rgba(255, 255, 255, 0.3);
    --color-opa-white-04: rgba(255, 255, 255, 0.4);
    --color-opa-white-05: rgba(255, 255, 255, 0.5);
    --color-opa-white-06: rgba(255, 255, 255, 0.6);
    --color-opa-white-07: rgba(255, 255, 255, 0.7);
    --color-opa-white-08: rgba(255, 255, 255, 0.8);
    --color-opa-white-09: rgba(255, 255, 255, 0.9);
    --shadow: 2px 4px 12px #00000014;
    --shadow-1: 0px 9px 0px #F3B15B;
    --shadow-2: rgba(0, 0, 0, 0.24) 0px 3px 8px
}

.pductdt {
    position: relative
}

@media screen and (min-width:801px) {
    .pductdt-col:nth-child(1) {
        width: calc(100% - 52rem)
    }

    .pductdt-col:nth-child(2) {
        width: 52rem
    }
}

@media screen and (min-width:1201px) {
    .pductdt-slider {
        position: sticky;
        top: 2rem
    }

    .pductdt-slider .swiper-wrapper {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 2rem
    }
}

@media screen and (max-width:800px) {
    .pductdt-slider {
        max-width: 60rem;
        margin: 0 auto
    }
}

.pductdt-img {
    width: 100%;
    border-radius: var(--dist24);
    background-color: #fffaec;
    position: relative;
    overflow: hidden
}

@media screen and (min-width:1200px) {
    .pductdt-img:hover .inner img {
        transform: translate(-50%, -50%) scale(1.05);
        -webkit-transform: translate(-50%, -50%) scale(1.05);
        -moz-transform: translate(-50%, -50%) scale(1.05);
        -ms-transform: translate(-50%, -50%) scale(1.05);
        -o-transform: translate(-50%, -50%) scale(1.05)
    }
}

.pductdt-img .inner {
    display: block;
    padding-top: calc((646 / 646) * 100%);
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%
}

.pductdt-img .inner img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    display: block;
    transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -ms-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
    -moz-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    -o-transform: translate(-50%, -50%) scale(1)
}

.pductdt-des {
    padding: var(--dist24);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 2.4rem
}

@media screen and (min-width:1201px) {
    .pductdt-des {
        position: sticky;
        top: 2rem
    }
}

.pductdt-des .mona-content li,
.pductdt-des .mona-content p {
    color: var(--color-text)
}

.pductdt-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: var(--dist20)
}

.pductdt-head .logo {
    width: 9.8rem
}

@media screen and (max-width:800px) {
    .pductdt-head .logo {
        width: 6rem
    }
}

.pductdt-head .logo img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    display: block
}

.pductdt-item:not(:last-child) {
    margin-bottom: var(--dist24)
}

.pductdt-ls {
    border: .1rem solid var(--border);
    background-color: var(--color-bg);
    border-radius: var(--dist16)
}

.pductdt-it {
    padding: var(--dist16) 1.2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: .8rem
}

.pductdt-it:not(:last-child) {
    border-bottom: .1rem solid var(--border)
}

.pductdt-it span {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.pductdt-it span:nth-child(2) {
    font-weight: 700
}

.pductdt-gr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1.2rem;
    width: 100%
}

@media screen and (min-width:601px) {
    .pductdt-gr .btn-main {
        width: 50%
    }
}

@media screen and (max-width:600px) {
    .pductdt-gr {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
}

.pductdt-inst {
    position: relative;
    padding: 0 var(--dist40) var(--dist80);
    border-radius: var(--dist24);
    overflow: hidden;
    border: var(--dist24) solid var(--color-sec);
    z-index: 1
}

.pductdt-inst::before {
    position: absolute;
    content: '';
    top: 4rem;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: var(--dist24);
    background-color: var(--color-pri);
    z-index: -1
}

.pductdt-inst .filter-link {
    --f-sz: clamp(1.7rem, calc(1.1rem + 0.75vw), 2rem);
    font-size: var(--f-sz);
    color: var(--color-text-3)
}

@media screen and (min-width:1200px) {
    .pductdt-inst .filter-link:hover {
        color: var(--color-white)
    }
}

.pductdt-inst .filter-link.active {
    color: var(--color-white)
}

.pductdt-inst-slider .swiper-pagination-bullet-active {
    background-color: var(--color-white)
}

@media screen and (max-width:900px) {
    .pductdt-inst-slider .swiper-btn {
        display: none !important
    }
}

.pductdt-inst-item {
    border-radius: var(--dist16);
    border: .1rem solid var(--border);
    background-color: var(--color-bg);
    padding: var(--dist20);
    height: 100%
}

.pductdt-inst-item .inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1.2rem;
    text-align: center
}

.pductdt-inst-item .img {
    width: 50%
}

.pductdt-inst-item .img img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    display: block
}

.pductdt-inst-item .txt {
    --f-sz: 1.4rem;
    font-size: var(--f-sz);
    font-weight: 700
}

@media screen and (max-width:800px) {
    .pductdt-inst-item .txt {
        --f-sz: 1.2rem
    }
}

.pductdt-dcor {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    z-index: -1;
    -webkit-transform: translate(-25%);
    transform: translate(-25%)
}

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

.pductrl {
    position: relative
}

.pductrl-wr {
    overflow: hidden
}

.pductrl::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    -webkit-transform: translateY(-30%);
    transform: translateY(-30%);
    background: url(../../assets/images/pductrl-bg.png) top center/cover no-repeat;
    z-index: -1
}

@media screen and (max-width:1000px) {
    .pductrl-slider {
        padding-bottom: 3rem
    }
}

.pductrl-slider .swiper {
    overflow: visible
}

@media screen and (min-width:1201px) {
    .pductrl-slider .swiper {
        padding-bottom: 6rem
    }
}

@media screen and (min-width:1201px) {
    .pductrl-slider .swiper-slide-active .pductrl-item {
        -webkit-transform: translateY(5rem);
        transform: translateY(5rem)
    }
}

.pductrl-slider .swiper-slide-active .pductrl-item .box-decor {
    background-color: var(--color-bg-1)
}

.pductrl-slider .swiper-slide-active .pductrl-item .box-decor::before {
    opacity: 1
}

.pductrl-slider .swiper-slide-active .pductrl-item .box-tt {
    color: var(--color-white)
}

@media screen and (max-width:900px) {
    .pductrl-slider .swiper-btn {
        display: none !important
    }
}

.pductrl-slider .swiper-pagination {
    bottom: 0 !important
}

.pductrl-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 2rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.pductrl-item .box {
    width: 100%
}

.pductrl-gr {
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.pductrl-gr .btn-main {
    -ms-flex-negative: 9;
    flex-shrink: 9;
    text-transform: capitalize
}

@media screen and (min-width:1201px) {
    .pductrl-gr .btn-main {
        width: calc(50% - .6rem)
    }
}

@media screen and (min-width:1201px) {
    .pductrl-gr .btn-main .txt {
        font-size: 1.4rem
    }
}

.products-btn {
    position: relative;
    height: 8rem;
    width: 19.7rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: .8rem;
    border-radius: 6rem;
    overflow: hidden;
    border: .2rem solid var(--border-1);
    --f-sz: clamp(1.7rem, calc(1.1rem + 0.75vw), 2rem);
    font-size: var(--f-sz);
    font-family: var(--font-pri);
    font-weight: 700;
    color: var(--color-pri);
    padding: 1.2rem 2.4rem;
    background-color: var(--color-bg-4);
    cursor: pointer
}

@media screen and (max-width:1200px) {
    .products-btn {
        height: 5rem;
        width: 15rem;
        padding: .8rem 1.6rem
    }
}

@media screen and (max-width:800px) {
    .products-btn {
        margin-left: auto
    }
}

@media screen and (min-width:1200px) {
    .products-btn:hover .icon img {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }
}

.products-btn .txt {
    margin-left: auto
}

.products-btn .dcor {
    position: absolute;
    bottom: -.2rem;
    width: 100%;
    left: 0;
    height: .4rem;
    background-color: var(--border-1)
}

@media screen and (max-width:1200px) {
    .products-btn .dcor {
        height: .2rem
    }
}

.products-btn .dcor:nth-child(1) {
    bottom: 1rem
}

@media screen and (max-width:1200px) {
    .products-btn .dcor:nth-child(1) {
        bottom: .8rem
    }
}

.products-btn .dcor:nth-child(2) {
    bottom: .4rem
}

@media screen and (max-width:1200px) {
    .products-btn .dcor:nth-child(2) {
        bottom: .3rem
    }
}

.products-btn .icon {
    position: absolute;
    top: -.4rem;
    left: -.4rem;
    width: 55%;
    -webkit-transform: translate(-15%, -20%);
    transform: translate(-15%, -20%);
    -webkit-transform-origin: top;
    transform-origin: top;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

@media screen and (max-width:1200px) {
    .products-btn .icon {
        width: 40%
    }
}

.products-btn .icon img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    display: block;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    -webkit-transform-origin: top left;
    transform-origin: top left
}

.products-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 1.6rem
}

@media screen and (min-width:801px) {
    .products-head {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
}

.products-head .filter-slider {
    margin: 0
}

@media screen and (max-width:800px) {
    .products-head .filter-slider {
        margin: 0 auto
    }
}

@media screen and (max-width:800px) {
    .products-head {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }
}

@media screen and (max-width:768px) {
    .products-col {
        width: 50%
    }
}

@media screen and (max-width:450px) {
    .products-col {
        width: 100%
    }
}

.pingre {
    position: relative
}

.pingre::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    -webkit-transform: translateY(-3%);
    transform: translateY(-3%);
    background: url(../../assets/images/pingre-bg.png) top center/cover no-repeat;
    z-index: -3
}

.pingre-decor {
    width: 100%;
    -webkit-transform: translateY(12%);
    transform: translateY(12%)
}

.pingre-decor img {
    width: 100%
}

.pingre-bdy {
    padding: 20rem 0 0
}

@media screen and (max-width:1200px) {
    .pingre-bdy {
        padding: 6rem 0 0
    }
}

@media screen and (min-width:601px) {
    .pingre-inner:nth-child(odd) .pingre-row {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse
    }
}

.pingre-inner:not(:last-child) {
    margin-bottom: var(--dist60)
}

.pingre-img {
    width: 100%;
    position: relative
}

.pingre-img .inner {
    display: block;
    padding-top: calc((589 / 659) * 100%);
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%
}

.pingre-img .inner img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    display: block
}

.pingre-des {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.pingre-des-inner {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 2rem
}

.pingre-des-inner .txt {
    max-width: 52rem;
    --f-sz: clamp(1.7rem, calc(1.1rem + 0.75vw), 2rem);
    font-size: var(--f-sz);
    font-weight: 500;
    color: var(--color-white)
}

.pingre-dcor {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 40%;
    -webkit-transform: translate(-55%, -8%);
    transform: translate(-55%, -8%)
}

@media screen and (max-width:1200px) {
    .pingre-dcor {
        display: none
    }
}

.pingre-dcor img {
    width: 100%;
    display: block;
    -o-object-fit: contain;
    object-fit: contain
}

@media screen and (max-width:600px) {
    .pingre-row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

@media screen and (max-width:600px) {
    .pingre-col {
        width: 100%
    }
}

.proceIn {
    position: relative
}

.proceIn-head .title {
    width: 64rem
}

.proceIn-bdy {
    padding-bottom: calc(557/1216 * 100%);
    position: relative
}

@media screen and (max-width:768px) {
    .proceIn-col {
        width: 50%
    }
}

.proceIn-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: var(--dist24);
    text-align: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media screen and (min-width:1201px) {
    .proceIn-item {
        padding: var(--dist20)
    }
}

.proceIn-item .tt {
    color: var(--color-pri);
    margin-bottom: .4rem
}

.proceIn-item .txt {
    --f-sz: 1.6rem;
    font-size: var(--f-sz);
    color: var(--color-text-3);
    font-weight: 500
}

@media screen and (max-width:800px) {
    .proceIn-item .txt {
        --f-sz: 1.4rem
    }
}

@media screen and (max-width:768px) {
    .proceIn-item .txt {
        color: var(--color-text)
    }
}

.proceIn-item .icon {
    --icon: 8rem;
    width: var(--icon);
    height: var(--icon);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media screen and (max-width:1200px) {
    .proceIn-item .icon {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
        --icon: 6rem
    }
}

.proceIn-item .icon img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    display: block
}

.proceIn-bg {
    position: absolute;
    bottom: 0;
    height: 100%;
    left: 0;
    width: 100%;
    z-index: -1;
    border-radius: var(--dist40);
    border: var(--dist16) solid var(--color-white);
    overflow: hidden
}

.proceIn-bg::before {
    position: absolute;
    content: '';
    inset: 0;
    z-index: 1;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(42.55%, #fff), color-stop(61.35%, rgba(255, 255, 255, 0)));
    background: linear-gradient(180deg, #fff 42.55%, rgba(255, 255, 255, 0) 61.35%)
}

@media screen and (max-width:768px) {
    .proceIn-bg::before {
        background: -webkit-gradient(linear, left top, left bottom, color-stop(42.55%, #fff), color-stop(81.35%, rgba(255, 255, 255, .5)));
        background: linear-gradient(180deg, #fff 42.55%, rgba(255, 255, 255, .5) 81.35%)
    }
}

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

.proces {
    position: relative;
    padding-top: var(--dist80)
}

.proces-bdy {
    position: relative
}

.proces-bdy::before {
    position: absolute;
    content: '';
    left: 0;
    width: 100%;
    bottom: 0;
    height: 110%;
    background-color: var(--color-bg-4);
    -webkit-mask-image: url(../../assets/images/proces-bg.png);
    mask-image: url(../../assets/images/proces-bg.png);
    -webkit-mask-position: top center;
    mask-position: top center;
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    z-index: -2
}

@media screen and (max-width:600px) {
    .proces-col {
        width: 100%
    }
}

.proces-inner {
    position: relative;
    -webkit-mask-image: url(../../assets/images/proces-bg.png);
    mask-image: url(../../assets/images/proces-bg.png);
    -webkit-mask-position: top center;
    mask-position: top center;
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    overflow: hidden;
    margin-bottom: -10rem;
    padding-bottom: 10rem
}

.proces-inner::before {
    position: absolute;
    content: '';
    inset: 0;
    background-color: var(--color-white);
    z-index: -4
}

@media screen and (max-width:600px) {
    .proces-inner {
        padding-bottom: 5rem;
        margin-bottom: -5rem
    }
}

.proces-inner:not(:first-child) {
    padding-top: 12rem
}

@media screen and (max-width:1200px) {
    .proces-inner:not(:first-child) {
        padding-top: 6rem
    }
}

@media screen and (max-width:600px) {
    .proces-inner:not(:first-child) {
        padding-top: 3rem
    }
}

.proces-inner:first-child {
    -webkit-mask-image: none;
    mask-image: none
}

@media screen and (min-width:601px) {
    .proces-inner:nth-child(odd) .proces-row {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse
    }
}

.proces-inner:nth-child(even) .proces-des {
    margin-left: auto
}

@media screen and (min-width:1401px) {
    .proces-inner:nth-child(even) .proces-img {
        margin-left: -8.8rem
    }
}

.proces-inner:nth-child(7n+1)::before {
    background-color: var(--color-bg-4)
}

.proces-inner:nth-child(7n+1) .proces-img {
    border-color: var(--color-bg-4)
}

.proces-inner:nth-child(7n+1) .proces-decor .decor {
    width: 50%;
    right: 0;
    bottom: 0;
    -webkit-transform: translate(-10%, 20%);
    transform: translate(-10%, 20%);
    z-index: -1
}

.proces-inner:nth-child(7n+2)::before {
    background-color: var(--color-pri)
}

.proces-inner:nth-child(7n+2) .proces-img {
    border-color: var(--color-pri)
}

.proces-inner:nth-child(7n+2) .proces-decor .decor {
    width: 15%;
    top: 0;
    right: 0;
    height: 100%;
    z-index: -1
}

@media screen and (max-width:1200px) {
    .proces-inner:nth-child(7n+2) .proces-decor .decor {
        display: none
    }
}

.proces-inner:nth-child(7n+2) .proces-des .tt {
    color: var(--color-tt)
}

.proces-inner:nth-child(7n+2) .proces-des .txt {
    color: var(--color-white)
}

.proces-inner:nth-child(7n+2) .proces-des .number {
    -webkit-text-stroke-color: var(--color-pri);
    color: var(--color-white)
}

.proces-inner:nth-child(7n+3)::before {
    background-color: var(--color-white)
}

.proces-inner:nth-child(7n+3) .proces-img {
    border-color: var(--color-white)
}

.proces-inner:nth-child(7n+3) .number {
    -webkit-text-stroke-color: var(--color-ưhite)
}

.proces-inner:nth-child(7n+3) .proces-decor .decor {
    width: 35%;
    top: 5%;
    left: 0
}

@media screen and (min-width:1401px) {
    .proces-inner:nth-child(7n+3) .proces-decor .decor {
        z-index: 1
    }
}

.proces-inner:nth-child(7n+4) .proces-decor .decor:nth-child(1) {
    width: 40%;
    left: 12%;
    bottom: 0;
    height: 100%;
    mix-blend-mode: soft-light;
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
    z-index: -1
}

.proces-inner:nth-child(7n+4) .proces-decor .decor:nth-child(2) {
    width: 15%;
    top: 0;
    left: 0;
    height: 100%;
    z-index: -1
}

.proces-inner:nth-child(7n+4)::before {
    background-color: var(--color-pri)
}

.proces-inner:nth-child(7n+4) .proces-img {
    border-color: var(--color-pri)
}

.proces-inner:nth-child(7n+4) .number {
    -webkit-text-stroke-color: var(--color-pri);
    color: var(--color-bg-4)
}

.proces-inner:nth-child(7n+4) .proces-des .tt {
    color: var(--color-tt)
}

.proces-inner:nth-child(7n+4) .proces-des .txt {
    color: var(--color-white)
}

.proces-inner:nth-child(7n+4) .proces-des .number {
    -webkit-text-stroke-color: var(--color-pri);
    color: var(--color-white)
}

.proces-inner:nth-child(7n+5)::before {
    background-color: var(--color-white)
}

.proces-inner:nth-child(7n+5) .proces-img {
    border-color: var(--color-white)
}

.proces-inner:nth-child(7n+5) .number {
    -webkit-text-stroke-color: var(--color-white)
}

.proces-inner:nth-child(7n+5) .proces-decor .decor {
    width: 100%;
    right: 0;
    bottom: 0;
    -webkit-transform: translate(10%, 10%);
    transform: translate(10%, 10%);
    z-index: -1
}

.proces-inner:nth-child(7n+6)::before {
    background-color: var(--color-bg-4)
}

.proces-inner:nth-child(7n+6) .proces-img {
    border-color: var(--color-white)
}

.proces-inner:nth-child(7n+6) .number {
    -webkit-text-stroke-color: var(--color-bg-4)
}

.proces-inner:nth-child(7n+6) .proces-decor .decor {
    width: 50%;
    left: 0;
    bottom: 0;
    -webkit-transform: translate(-10%, 30%);
    transform: translate(-10%, 30%);
    z-index: -1
}

.proces-inner:nth-child(7n) {
    overflow: visible
}

.proces-inner:nth-child(7n) .proces-decor .decor:nth-child(1) {
    width: 50%;
    right: 0;
    bottom: 0;
    -webkit-transform: translate(-15%, 0);
    transform: translate(-15%, 0);
    mix-blend-mode: soft-light;
    z-index: -1
}

.proces-inner:nth-child(7n) .proces-decor .decor:nth-child(2) {
    width: 16%;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1
}

.proces-inner:nth-child(7n)::before {
    background-color: var(--color-pri)
}

.proces-inner:nth-child(7n) .proces-img {
    border-color: var(--color-pri)
}

.proces-inner:nth-child(7n) .proces-des .tt {
    color: var(--color-tt)
}

.proces-inner:nth-child(7n) .proces-des .txt {
    color: var(--color-white)
}

.proces-inner:nth-child(7n) .proces-des .number {
    -webkit-text-stroke-color: var(--color-pri);
    color: var(--color-white)
}

.proces-decor .decor {
    position: absolute;
    z-index: -1
}

@media screen and (max-width:600px) {
    /* .proces-decor .decor {
        display: none
    } */
}

.proces-decor .decor img {
    height: 100%;
    width: 100%;
    display: block
}

.proces-img {
    margin: 3rem 0;
    width: calc(100% + 8.8rem);
    position: relative;
    overflow: hidden;
    border-radius: 100%;
    border: var(--dist16) solid var(--color-white)
}

@media screen and (max-width:1400px) {
    .proces-img {
        width: 100%
    }
}

@media screen and (max-width:1200px) {
    .proces-img {
        border-width: .4rem
    }
}

@media screen and (max-width:600px) {
    .proces-img {
        margin: 0 auto;
        width: 30rem
    }
}

.proces-img .inner {
    display: block;
    padding-top: calc((100 / 100) * 100%);
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%
}

.proces-img .inner img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block
}

.proces-des {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    gap: var(--dist80);
    max-width: 40rem
}

@media screen and (max-width:1200px) {
    .proces-des {
        max-width: 50rem;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

@media screen and (max-width:600px) {
    .proces-des {
        gap: 2rem;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        padding-bottom: 4rem;
        text-align: center;
        margin: 0 auto
    }
}

.proces-des-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: var(--dist20)
}

.proces-des-inner .tt {
    line-height: 130%
}

.proces-des-inner .txt {
    --f-sz: clamp(1.7rem, calc(1.1rem + 0.75vw), 2rem);
    font-size: var(--f-sz);
    font-weight: 500
}

.proces-des .number {
    font-weight: 700;
    line-height: 60%;
    color: var(--color-pri);
    font-family: var(--font-sec);
    --f-sz: clamp(10rem, calc(-18rem + 35vw), 24rem);
    font-size: var(--f-sz)
}

@media screen and (min-width:1201px) {
    .proces-des .number {
        --f-sz: clamp(13rem, calc(-61rem + 92.5vw), 50rem);
        font-size: var(--f-sz);
        -webkit-transform: translateY(30%);
        transform: translateY(30%);
        -webkit-text-stroke-width: 10px;
        -webkit-text-stroke-color: var(--color-bg-4)
    }
}