.ft {
    background-color: #8d6a40;
    padding: 5%;
}

.ft hr {
    opacity: 0.2;
}

.ft>div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2%;
}

.ft1>h3 {
    font-size: max(48px, 2.526vw);
    color: #fff;
    line-height: 120%;
    letter-spacing: 2px;
}

.ft2>p {
    font-family: PingFang Regular;
    color: #fff;
    font-size: max(16px, 0.84vw);
    margin-bottom: 2%;
}


.ft2>div {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ft2>div>p {
    font-size: max(24px, 1.26315vw);
    color: #fff;
    line-height: 120%;
    letter-spacing: 2px;
}

.fu {
    display: flex;
    justify-content: space-between;
}

.fu>a {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 0 10px;
    cursor: pointer;
    position: relative;
}

.fuImg {
    width: 150%;
    max-height: 0;
    position: absolute;
    top: 0;
    transform: translateY(-120%);
    background-color: #fff;
    z-index: 2;
    transition: all 1s ease;
    border-radius: 5px;
    overflow: hidden;
}

/* .fuImg::before{
    content: '';
    width: 30px;
    height: 30px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%,-90%) rotate(45deg);
    background-color: #fff;
    z-index: -1;
} */

.fu>a:hover>.fuImg {
    max-height: 100px;
}

.f3 {
    margin-top: 2%;
    display: flex;
    justify-content: space-between;
}

.f3>div:first-child>h3 {
    color: #fff;
    font-size: max(24px, 1.25vw);
    margin-bottom: 4%;
    letter-spacing: 2px;
}

.f3>div:first-child>p {
    font-family: PingFang Regular;
    font-size: max(16px, 0.84vw);
    color: #fff;
}

.f3>div:last-child {
    width: 30%;
    display: flex;
    justify-content: space-between;
}

.f3>div:last-child>div:first-child,
.f3>div:last-child>div:last-child {
    display: flex;
    flex-direction: column;
}

.f3>div:last-child>div:first-child {
    margin-right: 5%;
}

.f3>div:last-child>div>a {
    color: #fff;
    letter-spacing: 1px;
    font-size: max(18px, 0.94vw);
}

.f3>div:last-child>div:last-child>a:nth-child(n+2) {
    font-family: PingFang Regular;
    font-size: max(16px, 0.84vw);
}


/* .f3>div:last-child>div:last-child>a:nth-child(1+n){
    font-size: max(16px, 0.84vw);
} */





.fb {
    padding: 1% 5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #a48157;
}

.fb>span {
    font-family: PingFang Regular;
    color: #fff;
    font-size: max(14px, 0.736vw);
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .f3>div:last-child {
        width: 100%;
        margin-top: 5%;
    }
}

@media (max-width:480px) {
    .ft2>div {
        width: 100%;
    }

    .ft1>h3 {
        font-size: max(28px, 2.526vw);
    }

    .ft>div {
        margin-bottom: 5%;
    }
}

@media (max-width:350px) {

    .ft2>div,
    .f3>div:last-child {
        flex-wrap: wrap;
    }

    .ft2>div>p {
        margin-bottom: 5%;
    }

    .fu {
        margin-left: auto;
    }
}