body>.home {
    @paddingTop: 12rem;

    .section-head-style {
        >.title {
            font-size: 2.2rem;
            font-weight: bold;
            margin-bottom: 2rem;
        }

        >.description {
            font-size: 1.2rem;
            line-height: 1.8rem;
            margin-bottom: 3.5rem;
        }
    }

    @keyframes arrow-movement {
        0% {
            left: 0%;
        }

        49% {
            left: 100%;
        }

        50% {
            left: -100%;
        }

        100% {
            left: 0%;
        }
    }

    .animation-right-arrow {
        @width: 2.6rem;
        width: @width;
        height: @width;
        background-color: var(--primaryColor);
        border-radius: 50%;
        overflow: hidden;
        color: white;
        font-size: 1.3rem;

        &::before,
        &::after {
            position: relative;
        }
    }

    >.banner {

        >.layui-carousel {
            height: 59rem;
            background-color: var(--primaryColor);

            >.carousel-container {
                >.carousel-item {
                    >* {
                        position: relative;
                        display: block;
                        height: 100%;

                        >a {
                            display: block;
                            width: 100%;
                            height: 100%;
                            background-color: var(--primaryColor);

                            >img,
                            >video {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        >.brief {
                            position: absolute;
                            top: 0%;
                            padding-top: @paddingTop;
                            left: 0%;
                            width: 100%;
                            height: 100%;
                            color: white;
                            letter-spacing: 0.1rem;
                            pointer-events: none;

                            >.page-width {
                                margin-bottom: 9rem;

                                >* {
                                    margin-bottom: 0.5rem;
                                }

                                >.title {
                                    color: white;
                                    font-size: 4.5rem;
                                    font-weight: bold;
                                    line-height: 1.3;
                                }

                                >.sub-title {
                                    color: white;
                                    font-size: 1.5rem;
                                    margin-top: 2rem;
                                }

                                >.more {
                                    display: inline-block;
                                    background-image: linear-gradient(to right, var(--primaryColor2), var(--primaryColor4));
                                    color: white;
                                    border: none;
                                    padding: 0.8rem 3rem;
                                    border-radius: 3rem;
                                    margin-top: 3rem;
                                    pointer-events: all;

                                    &:hover {
                                        opacity: 0.9;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    >.partner {
        background-color: #f2f2f2;
        padding: 3.5rem 0;

        >.swiper {
            opacity: 0;
            @edgeWidth: 10%;
            mask-image: linear-gradient(to right, transparent 0%, black @edgeWidth, black calc(100% - @edgeWidth), transparent 100%);

            >.swiper-wrapper {
                height: 100px;

                >.swiper-slide {

                    >.img {
                        width: 100%;
                        height: 100%;
                        overflow: hidden;

                        >img {
                            width: 100%;
                            height: 100%;
                            transition: all 0.25s ease-in-out;
                        }
                    }

                    &:hover {

                        >.img {
                            >img {
                                transform: scale(1.05);
                            }
                        }
                    }
                }
            }
        }

    }

    >.chanllenge {
        background-color: white;

        >.page-width {
            padding: 5rem 0;

            .section-head-style();

            >.swiper {
                opacity: 0;

                >.list {

                    >.item {
                        // padding: 0.75rem;
                        height: auto;

                        >a {
                            display: block;
                            height: 100%;

                            @imgHeight: 15rem;

                            >.img {
                                width: 100%;
                                height: @imgHeight;
                                overflow: hidden;

                                >img {
                                    width: 100%;
                                    height: 100%;
                                }
                            }

                            >.bottom {
                                height: calc(100% - @imgHeight);
                                padding: 1.5rem;
                                background-color: #f2f2f2;

                                >.title {
                                    font-size: 1.4rem;
                                    font-weight: bold;
                                    margin-bottom: 1rem;
                                }

                                >.sub-title {
                                    margin-bottom: 1rem;
                                }

                                >i {
                                    .animation-right-arrow();
                                }
                            }

                            &:hover {
                                >.img {
                                    >img {
                                        transition: all 0.5s;
                                        transform: scale(1.05);
                                    }
                                }

                                >.bottom {
                                    >i {

                                        &::before,
                                        &::after {
                                            position: relative;
                                            animation: arrow-movement 0.25s ease-in-out;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

            }
        }
    }

    >.service {
        background-color: white;

        >.page-width {
            padding: 5rem 0 10rem;
            .section-head-style();

            >.service {
                position: relative;

                >.swiper {
                    opacity: 0;
                    @edgeWidth: 10%;

                    >.swiper-wrapper {
                        height: max(35rem, 31vw);

                        >.swiper-slide {
                            padding: 0.5rem;

                            >.cube {
                                display: block;
                                height: 100%;

                                @imgHeight: 11rem;

                                >.img {
                                    width: 100%;
                                    height: @imgHeight;
                                    overflow: hidden;

                                    >img {
                                        width: 100%;
                                        height: 100%;
                                        transition: all 0.25s ease-in-out;
                                    }
                                }

                                >.bottom {
                                    background-color: #f5f5f5;
                                    height: calc(100% - @imgHeight);
                                    padding: 0 1rem;

                                    >.title {
                                        font-size: 1.2rem;
                                        font-weight: bold;
                                    }
                                }
                            }

                            &:hover {
                                >.cube {
                                    >.img {
                                        >img {
                                            transform: scale(1.05);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                >.swiper-button-prev,
                >.swiper-button-next {
                    @width: 3rem;
                    width: @width;
                    height: @width;
                    font-size: 1rem;
                    top: 50%;
                    transform: translateY(-50%);
                    margin-top: 0;
                    border: 1px solid var(--primaryColor);
                    color: var(--primaryColor);
                    border-radius: 50%;
                    transition: all 0.25s ease-in-out;
                    font-size: 1.5rem;

                    &::after {
                        display: none;
                        width: 100%;
                        height: 100%;
                        font-size: inherit;
                    }
                }

                >.swiper-button-prev {
                    left: calc(100% - 3rem - 2rem - 3rem);
                    top: -3rem;
                }

                >.swiper-button-next {
                    top: -3rem;
                }

                &:hover {

                    >.swiper-button-prev,
                    >.swiper-button-next {
                        opacity: 1;
                    }

                }
            }
        }
    }

    >.abilities {
        background-color: #f2f2f2;

        >.page-width {
            padding: 5rem 0 10rem;

            .section-head-style();

            >.list {
                >.item {
                    width: calc(100% / 4);
                    padding: 0 2rem;

                    >img {
                        width: 100%;
                        height: 10rem;
                        margin-bottom: 1.5rem;
                    }

                    >.title {
                        font-size: 1.2rem;
                        font-weight: bold;
                    }

                    >.sub-title {
                        line-height: 1.8;
                        font-size: 0.95rem;
                        color: #666;
                    }
                }
            }
        }
    }

    >.download {
        background-color: white;

        >.page-width {
            padding: 8rem 0 4rem;

            >.top {
                position: relative;

                .section-head-style();

                >.more {
                    position: absolute;
                    right: 0%;
                    top: 50%;
                    transform: translateY(-50%);
                    padding: 1rem 1.5rem;
                    border: 1px solid var(--primaryColor);
                    color: var(--primaryColor);
                    border-radius: 3rem;
                    font-weight: bold;
                }
            }

            >.list {

                >.item,
                >.fill-item {
                    width: calc((100% - 3rem) / 3);
                    margin-bottom: 1.5rem;
                }

                >.item {
                    >a {
                        display: block;
                        height: 100%;
                        padding: 1.5rem;
                        background-color: #f5f5f5;

                        >.title {
                            font-size: 1.3rem;
                            font-weight: bold;
                            margin-bottom: 2rem;
                        }

                        >.bottom {
                            >span {
                                font-size: 1.1rem;
                                font-weight: bold;
                            }

                            >i {
                                .animation-right-arrow();
                            }
                        }

                        &:hover {
                            >.bottom {
                                >i {

                                    &::before,
                                    &::after {
                                        position: relative;
                                        animation: arrow-movement 0.25s ease-in-out;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    >.blog {
        background-color: white;

        >.page-width {

            padding: 4rem 0 8rem;

            >.top {
                position: relative;

                .section-head-style();

                >.more {
                    position: absolute;
                    right: 0%;
                    top: 50%;
                    transform: translateY(-50%);
                    padding: 1rem 1.5rem;
                    border: 1px solid var(--primaryColor);
                    color: var(--primaryColor);
                    border-radius: 3rem;
                    font-weight: bold;
                }
            }

            >.list {

                >.item,
                >.fill-item {
                    width: calc((100% - 3rem) / 3);
                    margin-bottom: 1.5rem;
                }

                >.item {
                    >a {
                        display: block;
                        height: 100%;
                        padding: 1.5rem;
                        background-color: #f5f5f5;

                        >.title {
                            font-size: 1.3rem;
                            font-weight: bold;
                            margin-bottom: 2rem;
                        }

                        >.bottom {
                            >span {
                                font-size: 1.1rem;
                                font-weight: bold;
                            }

                            >i {
                                .animation-right-arrow();
                            }
                        }

                        &:hover {
                            >.bottom {
                                >i {

                                    &::before,
                                    &::after {
                                        position: relative;
                                        animation: arrow-movement 0.25s ease-in-out;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}