body>.about-us {

    >.brief,
    >.why-us,
    >.factory,
    >.more {
        >.page-width {
            padding: 6rem 0;
        }
    }

    >.brief {
        background-color: var(--primaryColor);
        color: white;

        >.page-width {
            >.breadcrumb {
                margin-bottom: 2rem;
            }

            >.title {
                font-size: 5rem;
                font-weight: bold;
                padding-bottom: 1rem;
                border-bottom: var(--primaryBorder);
                margin-bottom: 3rem;
            }

            >.bottom {
                @rightWidth: 24rem;

                >.left {
                    width: calc(100% - @rightWidth - 15rem);
                    font-size: 1.1rem;
                    letter-spacing: 0.05rem;
                }

                >.right {
                    width: @rightWidth;

                    >video {
                        background-color: white;
                        width: 100%;
                        height: 15rem;
                        border-radius: 2rem;
                    }
                }
            }
        }
    }

    >.why-us {
        >.page-width {
            >.title {
                font-size: 2.8rem;
                margin-bottom: 3rem;
            }

            >.list {
                >.item {
                    width: calc((100% - 5rem) / 4);
                    height: 18rem;
                    background-color: #eff2f7;
                    border-radius: 1rem;
                    padding: 1.7rem;

                    >img {
                        @width: 3.5rem;
                        width: @width;
                        height: @width;
                        margin-bottom: 1rem;
                    }

                    >.title {
                        font-size: 1.3rem;
                        color: var(--primaryColor);
                        margin-bottom: 1rem;
                    }

                    >.describ {}
                }
            }
        }
    }

    >.factory {
        >.page-width {
            background-color: var(--primaryColor);
            background-position: center;
            background-size: cover;
            border-radius: 1rem;
            padding-left: 4rem;
            padding-right: 4rem;
            color: white;

            >.top-title {
                font-size: 0.8rem;
                font-weight: bold;
                color: #0097fe;
            }

            >.title {
                font-size: 2.8rem;
                margin-bottom: 3rem;
            }

            >.center {
                overflow-x: hidden;

                >.swiper-wrapper {

                    >.swiper-slide {
                        padding: 0 1rem;
                        height: 18rem;

                        >a {
                            display: block;
                            width: 100%;
                            height: 100%;
                            background-color: white;
                            border-radius: 1rem;
                            overflow: hidden;

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

            >.actions {
                padding: 0 0.5rem;
                margin-top: 2rem;

                >* {
                    >i {
                        position: static;
                        left: unset;
                        top: unset;
                        margin: 0;
                        @width: 2.5rem;
                        width: @width;
                        height: @width;
                        border: 0.125rem solid white;
                        border-radius: 50%;
                        color: white;

                        &+i {
                            margin-left: 0.5rem;
                        }

                        &:hover {
                            cursor: pointer;
                        }

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

    >.more {
        >.page-width {
            >.title {
                font-size: 2.8rem;
                margin-bottom: 3rem;
            }

            >.list {
                >.item {
                    width: calc((100% - 3rem) / 4);
                    height: 20rem;
                    border: var(--primaryBorder);
                    border-radius: 1rem;
                    overflow: hidden;

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

                        @imgHeight: 4.5rem;

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

                        >.info {
                            height: calc(100% - @imgHeight);
                            padding: 1.5rem 1rem;

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

                            >.describe {
                                color: #666;
                                font-size: 0.9rem;
                            }
                        }
                    }
                }
            }
        }
    }
}