button,
input,
textarea {
    font-size: 16px;
}
.page-width {
    max-width: 1240px;
    margin: 0 auto;
}

#root {
    font-family: Roboto, sans-serif;

    @headerHeight: 71px;

    > #header {
        position: fixed;
        top: 0;
        width: 100%;
        height: @headerHeight;
        border-bottom: 1px solid #ececec;
        background-color: #fff;

        > .page-width {
            height: 100%;
            padding: 0 20px;

            > .logo {
                > img {
                    max-height: 70px;
                }
            }

            > .menu {
                height: 100%;
                > li {
                    height: 100%;
                    > a {
                        height: 100%;
                        color: #000;
                        padding: 0 20px;
                        font-weight: 500;
                        &:hover {
                            color: #ffb53b;
                        }
                    }
                }
            }
        }
    }

    > #center {
        margin-top: @headerHeight;
        > .banner {
            height: 320px;
            > .page-width {
                height: 100%;
                padding: 0 20px;
                > .not-found {
                    width: 36%;
                }

                > .not-found-desc {
                    width: 50%;
                    > .title {
                        font-size: 30px;
                        font-weight: 500;
                        color: #222;
                    }
                    > .desc {
                        font-size: 14px;
                        color: #777;
                    }
                    > .search {
                        width: 480px;
                        height: 40px;
                        margin-top: 28px;
                        border-radius: 3px;
                        overflow: hidden;

                        @inputWidth: 370px;
                        > input {
                            width: @inputWidth;
                            height: 100%;
                            border: none;
                            background-color: #e9ebec;
                            padding: 0 20px;
                        }
                        > button {
                            width: calc(100% - @inputWidth);
                            height: 100%;
                            border: none;
                            background: linear-gradient(
                                90deg,
                                #ffb53b,
                                #ff8108
                            );
                            color: #fff;
                            > img {
                                margin-right: 10px;
                            }
                        }
                    }
                }
            }
        }
        > .maypro {
            padding: 2.5% 0;
            background-color: #f2f2f2;
            > .title {
                font-size: 25px;
                font-weight: 500;
                color: #000;
            }
            > .page-width {
                margin-top: 30px;
                > .product {
                    height: 293px;
                    > .item {
                        width: 23%;
                        height: 100%;
                        background-color: white;
                        > a {
                            display: block;
                            width: 100%;
                            height: 100%;

                            @previewHeight: 250px;

                            > .preview {
                                height: @previewHeight;
                                overflow: hidden;
                                > img {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: contain;
                                    transition: transform 0.2s linear;
                                }
                            }

                            > .title {
                                height: calc(100% - @previewHeight);
                                padding: 3%;
                                border-top: 1px solid #e5e5e5;

                                > span {
                                    width: calc(100% - 50px);
                                    font-size: 14px;
                                    color: inherit;
                                }

                                > img {
                                    background-image: linear-gradient(
                                        90deg,
                                        #ffb53b,
                                        #ff8108
                                    );
                                    width: 25px;
                                    height: 25px;
                                    padding: 6px;
                                    object-fit: contain;
                                }
                            }
                        }

                        &:hover {
                            > a {
                                > .preview {
                                    > img {
                                        transform: scale(1.1);
                                    }
                                }
                                > .title {
                                    > span {
                                        color: #ffb53b;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        > .feedback {
            padding: 2.5% 0;
            > .title {
                font-size: 25px;
                font-weight: 500;
                color: #000;
            }
            > .page-width {
                margin-top: 30px;
                > .form {
                    height: 280px;

                    > input,
                    > textarea {
                        background-color: #f2f2f2;
                        border-radius: 3px;
                        border: none;
                        font-size: 14px;
                        border: 1px solid transparent;
                        &:focus {
                            border-color: #ffb53b;
                        }
                    }
                    > input {
                        width: 48%;
                        height: 44px;
                        padding: 0 20px;
                    }
                    > textarea {
                        width: 100%;
                        height: 165px;
                        padding: 20px;
                        resize: none;
                        font-family: inherit;
                    }
                    > button {
                        width: 170px;
                        height: 40px;
                        background-image: linear-gradient(
                            90deg,
                            #ffb53b,
                            #ff8108
                        );
                        color: white;
                        margin: 0 auto;
                        border: none;
                        border-radius: 3px;
                        > img {
                            margin-left: 10px;
                        }
                    }
                }
            }
        }
    }

    > #footer {
        height: 61px;
        background-color: #2e2e2e;
        > .desc {
            height: 100%;
            color: #b1b1b1;
            font-size: 14px;
        }
    }
}