footer{
    background-color: #323232;
    color: #ffffff80;
    padding: var(--space-x-large) 13rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-x-large);
    font-size: var(--detail);
}
.f_top{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flogo img{
    height: 3rem;
}
.fsns img{
    height: var(--space-large);
}
.fsns{
    display: flex;
    gap: var(--space-large);
}
.f_bot{
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
.f_intro{
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--space-nomal);
    column-gap: var(--space-large);
}
.span{
    margin-right: var(--space-x-small);
}
.f_infor{
    padding: var(--space-large);
    display: flex;
    flex-direction: column;
    gap: var(--space-nomal);
    background-color: #434343;
}
.f_infor>h3{
    font-weight: 400;
}
address{
    display: flex;
    width: 50%;
    flex-wrap: wrap;
    gap: var(--space-nomal) var(--space-large);
}
.f_pol{
    display: flex;
    gap: var(--space-nomal) var(--space-large);
    flex-wrap: wrap;
}
@media(max-width:1400px){
    footer{
    padding: var(--space-x-large) var(--space-large);
    }
    
}
@media(max-width:768px){
    footer{
        padding: var(--space-x-large) var(--space-nomal);
    }
    .f_top{
        display: flex;
        flex-direction: column;
        gap: var(--space-large);
        align-items: flex-start;
    }
    .f_infor{
        padding: var(--space-large) var(--space-nomal);
        display: flex;
        flex-direction: column;
        gap: var(--space-nomal);
        background-color: #434343;
    }
    address{
        width: auto;
        gap: var(--space-nomal);
    }
    .f_intro{
        width: auto;
        column-gap: var(--space-nomal);
    }
    .f_pol{
    gap: var(--space-nomal);
    }
}
@media(max-width:394px){
    .flogo img{
        height: var(--space-large);
    }
    .fsns img{
        height: 1.5rem;
    }
}