/* ----------CONTACT---------- */
.contact-info {
    max-width: var(--page-maxwidth);
    padding: 0 var(--page-padding);
    margin: 120px var(--page-margin);
    display: flex;
    flex-wrap: wrap;

    dl {
        flex-shrink: 0;
        padding: 40px;
        display: flex;
        gap: 40px;
        flex-direction: column;
        width: calc(33.33% - 80px);
        max-width: 100%;
        height: calc(480px - 80px);

        dt {
            line-height: 40px;
            font-size: 32px;
            color: #222;
            text-align: center;
            font-weight: 600;
            margin-bottom: 20px;
        }

        dd {}
    }

    dl:nth-child(odd) {
        background: #F5F5F5;
    }

    /*联系我们*/
    .contact-box {
        display: flex;
        gap: 0;
        justify-content: space-between;
        background: linear-gradient(135deg, #DDDDDD 0%, #F5F5F5 100%) !important;
    }

    /*客服热线*/
    .customer-box {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;

        dd {
            width: 80%;
            text-align: center;
        }

        strong {
            font-size: 36px;
            font-weight: 600;
            color: #222;
            line-height: 40px;
            height: 60px;
        }
    }

    /*发送邮件*/
    .mail-box {
        display: flex;

        button {
            width: 100%;
            height: 60px;
            box-sizing: border-box;
            color: #fff;
            font-size: 20px;
            background: #808080;
            display: flex;
            gap: 5px;
            flex-direction: row;
            flex-wrap: nowrap;
            align-content: center;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            img {
                height: 60%;
                width: auto;
            }
        }

        button:hover {
            background: #222;
        }
    }

    /*微信公众号*/
    .wxgzh-box {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;

        img {
            width: 280px;
            height: 280px;
        }
    }

    /*外媒频道*/
    .media-box {
        line-height: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;

        dd {
            width: 100%;
            display: grid;
            align-items: start;
            justify-content: space-between;
            justify-items: stretch;
            grid-template-columns: repeat(3, auto);
            gap: 0;

            a {
                display: flex;
                max-width: 100%;
                height: 140px;
                opacity: 0.5;
                justify-content: flex-start;
                flex-direction: column;
                align-items: center;
                transition: all .3s ease-in-out;

                img {
                    width: 60px;
                    height: 60px;
                }
            }

            a:hover {
                opacity: 1;
                transform: scale(1.1);
            }

            span {
                /* text-indent: 1000px; */
            }
        }
    }

    /*订阅邮件*/
    .subscription-box {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        div {
            display: flex;
            justify-content: center;
            width: 100%;
        }

        input {
            width: 100%;
            max-width: 320px;
            height: 50px;
            border: 1px solid #ddd;
            border-radius: 0;
            font-size: 20px;
            line-height: 40px;
            text-align: center;
            transition: all .3s ease-in-out;
        }

        input::placeholder {
            color: #ddd;
        }

        input:focus {
            border: 1px solid #808080;
            max-width: 480px;
        }

        button {
            width: 40%;
            min-width: 80px;
            height: 50px;
            line-height: 50px;
            background: #808080;
            border-radius: 0;
            color: #ffffff;
            font-size: 20px;
            cursor: pointer;
            margin-left: -1px;
            transition: all .3s ease-in-out;
        }

        button:hover {
            background: #222;
        }

    }

}


/*-----------------------------------1600-----------------------------------*/
@media screen and (max-width:1600px) {}



/*-----------------------------------1300-----------------------------------*/
@media screen and (max-width:1300px) {
    .contact-info {
        dl {
            width: calc(50% - 80px);
        }

        dl:nth-child(1),
        dl:nth-child(4),
        dl:nth-child(5) {
            background: #F5F5F5;
        }
        dl:nth-child(2),
        dl:nth-child(3),
        dl:nth-child(6) {
            background: none;
        }
    }
}



/*-----------------------------------1000-----------------------------------*/
@media screen and (max-width:1000px) {
    .contact-info {
        margin: 80px var(--page-margin);

        dl {
            width: calc(50% - 80px);
        }

        dl:nth-child(1),
        dl:nth-child(4),
        dl:nth-child(5) {
            background: #F5F5F5;
        }
        dl:nth-child(2),
        dl:nth-child(3),
        dl:nth-child(6) {
            background: none;
        }
    }
}


/*-----------------------------------750------------------------------------*/
@media screen and (max-width:750px) {
    .contact-info {
        dl {
            width: calc(100% - 80px);
            padding: 60px 40px;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            margin-bottom: -1px;
            height: auto;
        }

        dl:nth-child(1),
        dl:nth-child(3),
        dl:nth-child(5),
        dl:nth-child(2),
        dl:nth-child(4),
        dl:nth-child(6) {
            background: none!important;
        }
    }
}


/*-----------------------------------500------------------------------------*/
@media screen and (max-width:500px) {
    .contact-info {
        margin: 40px var(--page-margin);
    
        dl {
            width: calc(100% - 40px);
            padding: 40px 20px;
            gap: 20px;
    
            dt {
                font-size: 24px;
            }
        }
    }
}