/*产品与服务*/
.products-and-services-container {
    width: 100%;
    height: 700px;
    padding: 50px 10% 0 10%;
}

    .products-and-services-container > div {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        user-select: none;
    }

    .products-and-services-container > .products-and-services-title {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .products-and-services-container > .products-and-services-title > div {
            width: 50px;
            height: 3px;
            margin: 10px 0;
            border-radius: 5px;
            background-color: #5c96e3;
        }

    .products-and-services-container > .products-and-services-list {
        padding: 20px 10% 0;
        display: inline-flex;
        justify-content: space-between;
    }

        .products-and-services-container > .products-and-services-list > div {
            width: 22%;
            height: 400px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

            .products-and-services-container > .products-and-services-list > div > img {
                width: 90%;
                height: 90%;
                object-fit: cover;
                transition: transform 0.3s ease;
                border-radius: 15px;
            }

            .products-and-services-container > .products-and-services-list > div > div {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: #fff;
                font-size: 25px;
                font-weight: 200;
            }

            .products-and-services-container > .products-and-services-list > div:hover img {
                transform: scale(1.05);
            }

@media screen and (min-width:992px) and (max-width:1199px) {
    .products-and-services-container {
        width: 100%;
        height: 700px;
        padding: 50px 0 0 0;
    }

        .products-and-services-container > .products-and-services-list {
            padding: 20px 10% 0;
            display: inline-flex;
            justify-content: space-between;
        }

            .products-and-services-container > .products-and-services-list > div > div {
                font-size: 20px;
            }
}

@media screen and (min-width:768px) and (max-width:991px) {
    .products-and-services-container {
        width: 100%;
        height: 700px;
        padding: 50px 0 0 0;
    }

        .products-and-services-container > .products-and-services-list {
            padding: 20px 0 0 0;
            display: inline-flex;
            justify-content: space-between;
        }

            .products-and-services-container > .products-and-services-list > div > div {
                font-size: 20px;
            }
}

@media screen and (min-width:480px) and (max-width:767px) {
    .products-and-services-container {
        width: 100%;
        height: 700px;
        padding: 50px 0 0 0;
    }

        .products-and-services-container > .products-and-services-list {
            padding: 20px 0 0 0;
            display: inline-flex;
            justify-content: space-between;
        }
}

/*地图*/
.contact-container > .container > .form {
    margin: 40px 0 20px 0;
}

    .contact-container > .container > .form > form > div {
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -o-border-radius: 3px;
        float: left;
        background: #fff;
        margin-right: 1em;
        border: 1px solid #cbcbcb;
        display: inline-block;
        width: 35%;
    }

        .contact-container > .container > .form > form > div input[type="text"] {
            width: 85%;
            color: #a9a9a9;
            font-size: 0.9em;
            padding: 14px 14px 14px 0;
            border: none;
            outline: none;
            background: #fff;
        }

        .contact-container > .container > .form > form > div .name {
            background: url(../images/img-sprite.png) no-repeat 0px 0px;
            height: 25px;
            width: 25px;
            display: block;
            float: left;
            margin: 10px 0px 9px 10px;
        }

        .contact-container > .container > .form > form > div .mail {
            background: url(../images/img-sprite.png) no-repeat -25px 0px;
            height: 25px;
            width: 25px;
            display: block;
            float: left;
            margin: 10px 0px 9px 10px;
        }

    .contact-container > .container > .form input[type="submit"] {
        color: #fff;
        text-transform: uppercase;
        font-size: 1em;
        font-weight: 300;
        border: none;
        background: #ffbb42;
        padding: 14px 0px;
        width: 19%;
        outline: none;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -o-border-radius: 4px;
        -ms-border-radius: 4px;
    }

.contact-container > .container > .map {
    border-bottom: 1px solid #e3e7ec;
    margin-bottom: 3em;
    padding-bottom: 3em;
    position: relative;
}

    .contact-container > .container > .map img {
        width: 100%;
        vertical-align: middle;
    }

    .contact-container > .container > .map > .location {
        position: absolute;
        top: 70px;
        left: 400px;
    }

        .contact-container > .container > .map > .location > .address {
            background: #394b50;
            text-align: center;
            border-radius: 100%;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            -o-border-radius: 100%;
            -ms-border-radius: 100%;
            padding: 5em;
            margin-bottom: 2em;
            position: relative;
        }

            .contact-container > .container > .map > .location > .address a {
                color: #ffbb42;
                font-size: 0.95em;
                font-weight: 500;
                display: block;
                margin-top: 0.8em;
            }

            .contact-container > .container > .map > .location > .address > .locate {
                position: absolute;
                bottom: -17px;
                left: 130px;
            }

        .contact-container > .container > .map > .location > .bottom-logo {
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .contact-container > .container > .map > .location > .bottom-logo > img {
                width: 65px;
                height: 63px;
            }