.public_w{
    max-width: 1480;
    width: 85%;
    margin: 0 auto;
}

*{
    margin: 0;
    padding: 0;
}


.footer{
    width: 100%;
    background: url('../images/footer_bg1.png') no-repeat center center;
    background-size: 100% 100%;
    padding-top: calc(56px + 3rem);
    padding-bottom: calc(12px + 1.5rem);

    >.public_w{
        width: 85%;
        display: flex;
        flex-direction: column;
        /* border: 1px solid #000; */

        .footer1{
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-bottom: calc(28px + 3.5rem);

            .f1{
                display: flex;
                flex-direction: column;

                >img{
                    width: calc(115px + 5rem);
                }
                >ul{
                    display: flex;
                    margin-top: calc(10px + 1rem);

                    >li{
                        width: calc(15px + 1.5rem);
                        height: calc(15px + 1.5rem);
                        margin-right: calc(5px + 0.25rem);
                        position: relative;

                        >div{
                            width: calc(80px + 5rem);
                            height: calc(90px + 5rem);
                            position: absolute;
                            background: url('../images/ewm_bg.png') no-repeat center center;
                            background-size: 100% 100%;
                            left: 50%;
                            transform: translateX(-50%);
                            top: calc(15px + 1.5rem);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            opacity: 0;
                            transition: all 0.5s;

                            >img{
                                width: calc(48px + 5rem);
                                height: calc(48px + 5rem);
                            }
                        }
                        
                    }
                    >li:hover{
                        >div{
                            opacity: 1;
                        }
                    }
                    >li:nth-last-of-type(1){
                        margin-right: 0;
                    }
                }
            }
            .f2{
                display: flex;
                flex-direction: column;

                >p{
                    font-family: Gothic_bold;
                    font-size: calc(10px + 0.5rem);
                    color: #333333;
                    margin-bottom: calc(10px + 1.5rem);
                }
                >ul>li{
                    margin-bottom: calc(10px + 0.5rem);

                    >a{
                        font-family: CenturyGothic_Regular;
                        font-size: calc(10px + 0.3rem);
                        color: #333333;
                    }
                }
                >ul>li:nth-last-of-type(1){
                    margin-bottom: 0;
                }
            }
            .f3{
                width: 31.28%;
                display: flex;
                flex-direction: column;

                >p{
                    font-family: Gothic_bold;
                    font-size: calc(10px + 0.5rem);
                    color: #333333;
                    margin-bottom: calc(10px + 1.5rem);
                }
                >ul{
                    width: 100%;

                    >li{
                        display: flex;
                        margin-bottom: calc(10px + 1.25rem);

                        >p{
                            font-family: CenturyGothic_Regular;
                            font-size: calc(10px + 0.4rem);
                            color: #333333;
                            margin-left: calc(10px + 0.6rem);
                        }
                    }
                    >li:nth-last-of-type(1){
                        margin-bottom: 0;
                    }
                }
            }
            .f4{
                display: flex;
                flex-direction: column;

                >p{
                    font-family: Gothic_bold;
                    font-size: calc(10px + 0.5rem);
                    color: #333333;
                    margin-bottom: calc(10px + 1.5rem);
                }
                >div{
                    width: calc(82px + 5rem);
                    height: calc(82px + 5rem);
                    background: #FFFFFF;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    >img{
                        width: calc(48px + 5rem);
                    }
                }
            }
        }
        .footer2{
            width: 100%;
            border-top: 1px #D2D2D2 solid;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: calc(15px + 1.5rem);
            font-family: CenturyGothic_Regular;
            font-size: calc(10px + 0.4rem);
            color: #666666;
        }
    }
}






/* 回到顶部 */
.scrollBox{
    width: calc(26px + 1.5rem);
    height: calc(26px + 1.5rem);
    position: fixed;
    right: 15%;
    bottom: 5%;
    cursor: pointer;
    z-index: 10;

    >img{
        width: 100%;
    }
}



/* 右侧联系方式 */
.yclx{
    width: calc(20px + 3rem);
    background: #FFFFFF;
    box-shadow: 0px 0px 10px 0px rgba(97,119,139,0.2);
    border-radius: 4px;
    position: fixed;
    right: 15%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    justify-content: center;
    padding: 0 calc(10px + 0.25rem);
    transition: all 0.3s ease-in-out;
    opacity: 0;

    >ul{
        width: 100%;
        padding-top: 0.4rem;
        padding-bottom: 0.35rem;

        >li{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: calc(10px + 0.5rem) 0;
            cursor: pointer;
            position: relative;

            >div{
                width: calc(90px + 5rem);
                height: calc(80px + 5rem);
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: calc(17px + 2.5rem);
                background: url('../images/r_bg.png') no-repeat center center;
                /* background-size: 100% 100%; */
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                display: none;
                /* border: 1px solid #000; */

                >span{
                    font-family: CenturyGothic_Regular;
                    font-size: calc(10px + 0.4rem);
                    color: #333333;
                    margin-bottom: calc(10px + 1.5rem);
                }
                >p{
                    height: calc(14px + 1rem);
                    padding: 0 calc(10px + 0.9rem);
                    background: #00529D;
                    border-radius: calc(14px + 1rem);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-family: CenturyGothic_Regular;
                    font-size: calc(10px + 0.3rem);
                    color: #FFFFFF;
                }
                >img{
                    width: calc(48px + 5rem);
                }
            }
        }
        >li:nth-child(2){
            border-top: 1px solid #DCDCDC;
            border-bottom: 1px solid #DCDCDC;
        }
        >li:hover{
            >div{
                display: flex;
            }
        }
    }
}




@media screen and (max-width: 1100px){
    .footer{
        >.public_w{
            width: 85%;

            .footer1{
                width: 100%;
                flex-direction: column;

                .f1{
                    width: 100%;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-between;

                    >ul{
                        >li{
                            width: calc(10px + 7rem);
                        }
                    }
                }
                .f2{
                    display: none;
                }
                .f3{
                    width: 100%;
                    margin: calc(10px + 2rem) 0;
                }
            }
            .footer2{
                flex-direction: column;
            }
        }
    }
}