@font-face {
    font-family: 'Poppins';
    src: url("../fonts/POPPINS-REGULAR.TTF");
}

@font-face {
    font-family: 'Poppins SemiBold';
    src: url("../fonts/POPPINS-SEMIBOLD.TTF");
}

@font-face {
    font-family: 'Poppins Medium';
    src: url("../fonts/POPPINS-MEDIUM.TTF");
}

* {
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
    outline: none;
    font-family: "Poppins", "PingFang SC", "Microsoft YaHei", sans-serif;
}

body {
    width: 100%;
    overflow-x: hidden;
    font-family: "Poppins", "PingFang SC", "Microsoft YaHei", sans-serif;
}

*, *::after, *::before {
    box-sizing: border-box;
}

img {
    object-fit: cover;
    vertical-align: middle;
}

img:not(.none) {
    max-width: 100%;
    max-height: 100%;
}

textarea {
    resize: none;
    font-family: inherit;
}

button {
    border: none;
    cursor: pointer;
}

.bezier .swiper-wrapper, .div_bezier {
    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1) !important;
}

table {
    border-collapse: collapse;
}

::-webkit-scrollbar {
    display: none;
    width: 0;
}

[data-lenis-prevent] {
    padding: 0 1.0416666667vw 0 0;
}

[data-lenis-prevent]::-webkit-scrollbar {
    width: 0.2083333333vw;
    display: block;
}

[data-lenis-prevent]::-webkit-scrollbar-thumb {
    background: #666;
}

[data-lenis-prevent]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

._scroll_y {
    position: fixed;
    top: 0;
    right: 0.15625vw;
    width: 0.3125vw;
    height: 100vh;
    z-index: 9999;
    border-radius: 0.5208333333vw;
}

._scroll_y div {
    width: 100%;
    height: 0;
    border-radius: 0.5208333333vw;
    background: black;
    opacity: 0;
    position: relative;
    transition: opacity 0.3s ease;
    cursor: grab;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 0.4rem;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

[data-wheel]::-webkit-scrollbar {
    width: 0.3645833333vw;
}

[data-wheel]::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 0.4rem;
}

[data-wheel]::-webkit-scrollbar-track {
    background-color: transparent;
}

html.lenis, html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

section {
    overflow: hidden;
}

section.unset {
    overflow: unset;
}

.lenis_scroll {
    height: 13.0208333333vw;
    overflow: hidden;
    overflow-y: scroll;
}

.lenis_scroll::-webkit-scrollbar-thumb {
    background: var(--color);
}

.lenis_scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}

.lenis_scroll::-webkit-scrollbar {
    width: 0.1041666667vw !important;
    display: block;
}

.common_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.parallax {
    width: 100%;
    height: 100%;
}

.header {
    position: fixed;
    top: 0.5208333333vw;
    left: 50%;
    height: 3.125vw;
    padding: 0 1.5625vw;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: 0.8s ease;
    border-radius: 1.5625vw;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(0.5208333333vw);
    transform: translateX(-50%);
    width: 53.125vw;
}

.header .logo {
    width: 2.1875vw;
}

.header .logo img {
    display: block;
    width: 100%;
    height: unset;
}

.header .nav {
    display: flex;
    gap: 2.6041666667vw;
    margin: 0 3.125vw 0 2.65625vw;
    height: 100%;
}

.header .nav .first {
    height: 100%;
}

.header .nav .first > a {
    display: flex;
    font-weight: 400;
    font-size: 0.8333333333vw;
    color: #FFFFFF;
    transition: 0.6s;
    align-items: center;
    height: 100%;
    white-space: nowrap;
}

.header .nav .first > a:hover {
    color: #596A40 !important;
}

.header .nav .first.on > a {
    color: #596A40 !important;
}

.header .language {
    display: flex;
    gap: 1.3541666667vw;
}

.header .language a {
    display: flex;
    align-items: center;
    gap: 0.2604166667vw;
}

.header .language a img {
    display: block;
    width: 1.25vw;
    height: unset;
}

.header .language a p {
    font-weight: 400;
    font-size: 0.8333333333vw;
    color: #FFFFFF;
    transition: 0.6s;
    white-space: nowrap;
}

.header .language a:hover p {
    color: #596A40 !important;
}

.header.on {
    width: 100%;
    border-radius: 0;
    top: 0;
}

.footer {
    background: #0C0C0C;
    padding: 1.3020833333vw 0 0;
    overflow: hidden;
}

.footer .zi {
    display: flex;
    align-items: center;
    width: max-content;
    animation: img_go 140s infinite linear;
    margin-bottom: 0.78125vw;
}

.footer .zi .flex {
    display: flex;
    align-items: center;
}

.footer .zi .flex p {
    font-family: 'Poppins SemiBold';
    font-weight: 600;
    font-size: 3.6458333333vw;
    color: #FFFFFF;
    line-height: 4.1666666667vw;
    margin-right: 1.5625vw;
}

.footer .zi .flex p span {
    font-family: 'Poppins SemiBold';
    color: #596A40;
}

.footer .footer_top {
    display: flex;
    border-top: 0.0520833333vw solid rgba(255, 255, 255, 0.2);
    border-bottom: 0.0520833333vw solid rgba(255, 255, 255, 0.2);
    width: 87.5vw;
    margin: 0 auto;
}

.footer .footer_top .r_box {
    width: 50%;
    border-left: 0.0520833333vw solid rgba(255, 255, 255, 0.2);
    padding: 3.59375vw 0 3.125vw 2.03125vw;
}

.footer .footer_top .r_box h5 {
    font-family: 'Poppins SemiBold';
    font-weight: 600;
    font-size: 1.25vw;
    color: #FFFFFF;
    margin-bottom: 0.78125vw;
}

.footer .footer_top .r_box form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5208333333vw;
}

.footer .footer_top .r_box form input {
    width: 13.5416666667vw;
    height: 2.6041666667vw;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 1.6145833333vw;
    border: none;
    padding: 0 1.5104166667vw;
    font-weight: 400;
    font-size: 0.9375vw;
    color: #FFFFFF;
}

.footer .footer_top .r_box form input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.footer .footer_top .r_box form textarea {
    width: 100%;
    height: 5.2083333333vw;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 1.6145833333vw;
    padding: 0.5729166667vw 1.5104166667vw;
    font-weight: 400;
    font-size: 0.9375vw;
    color: #FFFFFF;
    border: none;
}

.footer .footer_top .r_box form textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.footer .footer_top .l_box {
    width: 50%;
    padding: 2.2916666667vw 0 3.3333333333vw;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.footer .footer_top .l_box .flex {
    display: flex;
    align-items: center;
    gap: 2.65625vw;
}

.footer .footer_top .l_box .flex .logo {
    width: 4.0625vw;
}

.footer .footer_top .l_box .flex .logo img {
    display: block;
    width: 100%;
    height: unset;
}

.footer .footer_top .l_box .flex .nav {
    display: flex;
    align-items: center;
    gap: 2.6041666667vw;
}

.footer .footer_top .l_box .flex .nav a {
    display: block;
    font-weight: 400;
    font-size: 0.9375vw;
    color: #FFFFFF;
    transition: 0.6s;
}

.footer .footer_top .l_box .flex .nav a:hover {
    color: #596A40 !important;
}

.footer .footer_top .l_box .l_box_bottom h5 {
    font-weight: 400;
    font-size: 0.9375vw;
    color: #FFFFFF;
    opacity: 0.4;
    margin-bottom: 0.5208333333vw;
}

.footer .footer_top .l_box .l_box_bottom p {
    font-weight: 400;
    font-size: 0.8333333333vw;
    color: #FFFFFF;
    line-height: 1.3541666667vw;
}

.footer .footer_bottom {
    padding: 1.5104166667vw 6.25vw 1.6666666667vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer .footer_bottom .footer_bottom_l {
    font-weight: 400;
    font-size: 0.9375vw;
    color: #FFFFFF;
    opacity: 0.4;
}

.footer .footer_bottom .footer_bottom_r {
    display: flex;
    align-items: center;
    gap: 22.65625vw;
}

.footer .footer_bottom .footer_bottom_r a {
    display: block;
    font-weight: 400;
    font-size: 0.9375vw;
    color: #FFFFFF;
    opacity: 0.4;
    transition: 0.6s;
}

.footer .footer_bottom .footer_bottom_r a:hover {
    opacity: 1;
}

.footer .footer_bottom .footer_bottom_r .back_top {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6041666667vw;
    height: 2.6041666667vw;
    border-radius: 1.3020833333vw;
    border: 0.1041666667vw solid rgba(255, 255, 255, 0.2);
    transition: 0.6s;
    cursor: pointer;
}

.footer .footer_bottom .footer_bottom_r .back_top img {
    display: block;
    width: 0.78125vw;
    height: unset;
}

.footer .footer_bottom .footer_bottom_r .back_top:hover {
    background: #596A40;
    border: 0.1041666667vw solid #596A40;
}

@keyframes img_go {
    100% {
        transform: translateX(-50%);
    }
}

.common_button {
    position: relative;
    background: #596A40;
    height: 2.6041666667vw;
    border-radius: 1.6145833333vw;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 9.375vw;
    padding: 0 1.0416666667vw;
    overflow: hidden;
}

.common_button p {
    font-weight: 500;
    font-size: 1.0416666667vw;
    color: #FFFFFF;
    position: relative;
    z-index: 3;
}

.common_button p div {
    font-family: 'Poppins Medium';
}

.common_button p .fist:nth-child(2) {
    color: #596A40;
}

.common_button:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-radius: 100%;
    transform: translate(0, 100%);
    z-index: 1;
    transition: opacity 0.65s cubic-bezier(0.215, 0.61, 0.355, 1), border-radius 0s 0.65s, transform 0s 0.65s;
}

.common_button:hover:after {
    opacity: 1;
    border-radius: 0;
    transform: translate(0);
    transition: border-radius 0.65s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.65s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.common_top {
    padding: 8.6458333333vw 6.25vw 0;
}

.common_top .title {
    font-weight: 500;
    font-size: 4.6875vw;
    color: #000000;
    line-height: 4.6875vw;
}

.common_top .title .char {
    font-family: 'Poppins Medium';
}

.common_top .title .word {
    display: inline !important;
}

.common_top .title .line {
    display: inline !important;
}

.common_top .title span {
    color: #596A40;
    display: inline !important;
}

.common_top .control {
    display: flex;
    align-items: center;
    gap: 1.0416666667vw;
    margin: 1.9791666667vw 0 2.1354166667vw;
}

.common_top .control .item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2.0833333333vw;
    min-width: 6.25vw;
    height: 3.125vw;
    border-radius: 1.5625vw;
    border: 0.0520833333vw solid #C6C9C2;
    transition: 0.6s;
    font-weight: 400;
    font-size: 1.0416666667vw;
    color: #000000;
}

.common_top .control .item:hover, .common_top .control .item.on {
    background: #596A40;
    border: 0.0520833333vw solid #596A40;
    color: #FFFFFF;
}

.common_top .split_line {
    width: 100%;
    height: 0.0520833333vw;
    background: #D6D6D6;
}

.parallaxImg {
    overflow: hidden;
}

.parallaxImg img {
    display: block;
    width: 100%;
    height: calc(100% + 5.208333333vw);
    max-height: unset;
}

.common_page {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5625vw;
}

.common_page .page_item {
    font-weight: 400;
    font-size: 1.0416666667vw;
    color: #000000;
    transition: 0.6s;
    cursor: pointer;
}

.common_page .page_item:hover, .common_page .page_item.on {
    color: #596A40;
}

.common_page .turn_page {
    width: 2.1875vw;
    height: 2.1875vw;
    border-radius: 50%;
    border: 0.1041666667vw solid #C6C9C2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.6s;
}

.common_page .turn_page:nth-child(1) {
    transform: rotate(180deg);
}

.common_page .turn_page img {
    display: block;
    width: 0.8854166667vw;
    height: unset;
    transition: 0.6s;
}

.common_page .turn_page:hover {
    background: #596A40;
    border: 0.1041666667vw solid #596A40;
}

.common_page .turn_page:hover img {
    filter: brightness(0) invert(1);
}

.section_bottom {
    padding: 3.125vw 22.9166666667vw 6.25vw;
}

.section_bottom .title {
    font-family: 'Poppins SemiBold';
    font-weight: 600;
    font-size: 2.6041666667vw;
    color: #000000;
    text-align: center;
    margin-bottom: 1.5625vw;
}

.section_bottom form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5208333333vw;
}

.section_bottom form input {
    width: 17.7083333333vw;
    height: 2.6041666667vw;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 1.6145833333vw;
    border: none;
    padding: 0 1.5104166667vw;
    font-weight: 400;
    font-size: 0.9375vw;
    color: #000000;
}

.section_bottom form input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

.section_bottom form textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 1.6145833333vw;
    border: none;
    padding: 0.5729166667vw 1.5104166667vw;
    font-weight: 400;
    font-size: 0.9375vw;
    color: #000000;
}

.section_bottom form textarea::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

.section_bottom form button {
    margin: 35px auto 0;
}

.section_sample {
    padding: 6.25vw 6.25vw 0;
}

.section_sample .split_line {
    margin: 3.125vw 0 0;
    width: 100%;
    height: 0.0520833333vw;
    background: #D6D6D6;
}

.section_sample .title {
    font-family: 'Poppins SemiBold';
    font-weight: 600;
    font-size: 2.6041666667vw;
    color: #000000;
    margin-bottom: 2.0833333333vw;
}

.section_sample .list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.3541666667vw;
    margin-bottom: 2.7604166667vw;
}

.section_sample .list .item {
    height: 12.5vw;
    border-radius: 0.5208333333vw;
    overflow: hidden;
}

.section_sample .list .item img {
    display: block;
    width: 100%;
    height: 100%;
    transition: 3s;
}

.section_sample .list .item:hover img {
    transform: scale(1.1);
}

body {
    background: #F2F3F0;
}


@media screen and (max-width: 768px) {
    .header {
        width: 100% !important;
        top: 0 !important;
        height: 50px !important;
        border-radius: 0 !important;
        padding: 0 15px;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(10px);
    }

    .header .logo {
        width: 34px;
    }

    .header .nav {
        width: 100vw;
        height: 100vh;
        display: block;
        margin: 0;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 1);
        padding: 80px 15px 0;
        clip-path: inset(0 0 100% 0);
        transition: cubic-bezier(0.77, 0, 0.175, 1) 1.2s;
    }
    .header .nav.on {
        clip-path: inset(0 0 0% 0);
    }

    .header .nav .first {
        height: unset;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .header .nav .first > a {
        width: 100%;
        font-size: 14px;
        line-height: 60px;
    }

    .header .language {
        gap: 15px;
    }

    .header .language a p {
        font-size: 13px;
    }

    .header .language a img {
        display: none;
    }

    .header .language .menu {
        margin: 0 0 0 10px;
        cursor: pointer;
        position: relative;
        display: block !important;
    }

    .header .language .menu .show {
        width: 25px;
        height: 17px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .header .language .menu .show span {
        width: 100%;
        height: 1px;
        background: #fff;
        transition: .3s ease;
        transform-origin: left;
    }

    .header .language .menu .show span:first-child {
        transition-delay: .6s;
    }

    .header .language .menu .show span:nth-child(2) {
        transition-delay: .5s;
    }

    .header .language .menu .show span:nth-child(3) {
        transition-delay: .4s;
    }

    .header .language .menu .hide {
        position: absolute;
        width: 27px;
        height: 27px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .header .language .menu .hide:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 1px;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: #fff;
        transform: scaleX(0);
        transition: .3s ease;
        transform-origin: left;
    }

    .header .language .menu .hide:before {
        content: '';
        position: absolute;
        width: 1px;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: #fff;
        transform: scaleY(0);
        transition: .3s ease;
        transform-origin: top;
    }

    .header .language .menu.on .show span {
        transform: scaleX(0);
    }

    .header .language .menu.on .show span:nth-child(1) {
        transition-delay: 0s;
    }

    .header .language .menu.on .show span:nth-child(2) {
        transition-delay: .1s;
    }

    .header .language .menu.on .show span:nth-child(3) {
        transition-delay: .2s;
    }

    .header .language .menu.on .hide:after {
        transform: scaleX(1);
        transition-delay: .4s;
    }

    .header .language .menu.on .hide:before {
        transform: scaleY(1);
        transition-delay: .3s;
    }
    .parallax {
        transform: unset !important;
    }
    .parallaxImg img {
        height: 100% !important;
        transform: unset !important;
        margin-top: unset !important;
    }
    .footer {
        padding: 15px 0 0;
    }
    .footer .zi {
        margin-bottom: 15px;
    }
    .footer .zi .flex p {
        font-size: 24px;
        line-height: 1;
    }
    .footer .footer_top {
        width: calc(100% - 30px);
        display: block;
    }
    .footer .footer_top .r_box {
        width: 100%;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        padding: 30px 0;
    }
    .footer .footer_top .l_box {
        width: 100%;
        padding: 20px 0;
    }
    .footer .footer_top .l_box .flex {
        display: block;
        margin-bottom: 15px;
    }
    .footer .footer_top .l_box .l_box_bottom h5 {
        font-size: 15px;
        margin-bottom: 8px;
    }
    .footer .footer_top .l_box .l_box_bottom p {
        font-size: 12px;
        line-height: 1.4;
    }
    .footer .footer_top .l_box .flex .logo {
        width: 60px;
        margin: 0 0 20px;
    }
    .footer .footer_top .l_box .flex .nav {
        gap: 15px;
    }
    .footer .footer_top .l_box .flex .nav a {
        font-size: 12px;
    }
    .footer .footer_top .r_box h5 {
        font-size: 17px;
        margin-bottom: 15px;
    }
    .footer {
        position: relative;
    }
    .footer .footer_top .r_box form {
        gap: 10px;
    }
    .footer .footer_top .r_box form input {
        width: 100%;
        height: 40px;
        border-radius: 4px;
        padding: 0 10px;
        font-size: 13px;
    }
    .footer .footer_top .r_box form textarea {
        height: 150px;
        border-radius: 4px;
        padding: 10px;
        font-size: 13px;
    }
    .common_button {
        height: 36px;
        border-radius: 18px;
        padding: 0 15px;
    }
    .common_button p {
        font-size: 14px;
    }
    .footer .footer_top .r_box .common_button {
        margin: 10px 0 0;
    }
    .footer .footer_bottom {
        padding: 15px;
    }
    .footer .footer_bottom .footer_bottom_l {
        font-size: 12px;
    }
    .footer .footer_bottom .footer_bottom_r a {
        font-size: 12px;
    }
    .footer .footer_bottom .footer_bottom_r .back_top {
        position: absolute;
        top: 83px;
        right: 15px;
        width: 40px;
        height: 40px;
        border-radius: 20px;
    }
    .footer .footer_bottom .footer_bottom_r .back_top img {
        width: 10px;
    }
    .common_top {
        padding: 80px 15px 0;
    }
    .common_top .title {
        font-size: 22px;
        line-height: 1.2;
    }
    .common_top .control {
        margin: 20px 0;
    }
    .common_top .control .item {
        height: 40px;
        border-radius: 40px;
        padding: 0 15px;
        font-size: 14px;
    }
    .section_sample {
        padding: 60px 15px 0;
    }
    .section_sample .title {
        font-size: 22px;
        margin-bottom: 25px;
    }
    .section_sample .list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 30px;
    }
    .section_sample .list .item {
        height: 27vw;
        border-radius: 8px;
    }

    .common_page .turn_page {
        width: 36px;
        height: 36px;
    }
    .common_page .turn_page img {
        width: 12px;
    }
    .common_page .page_item {
        font-size: 13px;
    }
    .common_page {
        gap: 15px;
    }
    .section_sample .split_line {
        margin: 20px 0 0;
    }
    .section_bottom {
        padding: 60px 15px;
    }
    .section_bottom .title {
        font-size: 22px;
        margin-bottom: 25px;
    }
    .section_bottom form {
        gap: 15px;
    }
    .section_bottom form input {
        width: 100%;
        height: 46px;
        border-radius: 6px;
        padding: 0 10px;
        font-size: 14px;
    }
    .section_bottom form textarea {
        height: 150px;
        padding: 10px;
        font-size: 14px;
    }
}