.bottom {
    font-size: 14px;
    width: 100%;
    /* height: 300px; */
    height: max-content;
    color: #999;
    position: relative;
    box-sizing: border-box;
    padding-top: 400px;
    line-height: normal;
}

.bottom>.bottom-main {
    background-color: #9c266e;
    z-index: 1;
    position: relative;
    /*边框从左往右线性渐变（仅支持矩形）*/
    border-top: solid 10px;
    border-image: linear-gradient(to right, #f6b236, #f8c76b, #f6b236) 1 1 stretch;
}

.bottom>.bg {
    width: 100%;
    height: 380px;
    position: absolute;
    top: 0;
    left: 0;

    /*背景图片*/
    background: transparent url("../images/bottom/bg.jpg") no-repeat center bottom/ cover;
    z-index: 0;
}

.bottom .container {
    z-index: 1;
    position: relative;
    margin: auto;
    max-width: calc(100% - 80px);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 30px 0;
    padding-bottom: 10px;

}

[isMobile] .bottom .container {
    max-width: calc(100% - 40px);

}

.bottom .container .top {
    margin: auto;
    width: 1200px;
    box-sizing: border-box;
    /* border-bottom: 1px solid #ffffff99; */
    margin-bottom: 30px;
    padding-bottom: 30px;
    /*边框从左往右线性渐变（仅支持矩形）*/
    border-bottom: solid 1px;
    border-image: linear-gradient(to right, transparent, white, transparent) 1 1 stretch;

    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;



}

.bottom .container .top>.right {
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 440px);
}

.bottom .container .top>.right b {
    display: block;
    margin-bottom: 10px;
}

.bottom .container .top>.right .row1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

[isMobile] .bottom .container .top {
    margin-top: 20px;

}

.bottom .container .top ul {
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 100%;
}

.bottom .container .top ul .v-line::after {
    content: "|";
    font-size: 12px;
    box-sizing: border-box;
    padding: 0 40px;
    color: #666;
    pointer-events: none;
}

.bottom .container .top ul li:last-of-type .v-line::after {
    display: none;
}

.bottom .container .top ul li {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.bottom .container .top ul li[active] span {
    color: white;
}

.bottom .container .top ul li span {
    cursor: pointer;
    transition: 0.2s;
}

.bottom .container .top ul li span:hover {
    color: white;
}


.bottom .container .bt {
    line-height: normal;
    box-sizing: border-box;
    margin: auto;
    width: 100%;
    height: max-content;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: baseline;
    color: white;

}

.bottom .container .bt .poweredBy {
    transition: .2s;
    border-radius: 8px 0;
    background-color: white;
    color: #9c266e;
    box-sizing: border-box;
    border: 1px solid #9c266e;
    padding: 0 10px;
    padding-bottom: 1px;
    line-height: normal;
    margin-left: 10px;
}

.bottom .container .bt .poweredBy:hover {
    opacity: 0.618;
    border-color: white;
    color: white;
    background-color: transparent;


}

.bottom .container .bt .poweredBy:active {
    transform: translate(1px, 1px);
    opacity: 0.618;
}

/* 所有超链接------------------------------------- */

.bottom .container a:not(:has(.poweredBy)) {
    box-sizing: border-box;
    padding-bottom: 3px;
    border-bottom: 1px dashed transparent;
    transition: .2s;
}

.bottom .container a:hover {
    border-bottom-color: white;
}

.bottom .container a:active {
    transform: translate(1px, 1px);
    opacity: 0.618;
}

/* 友情链接---------------------------------------- */
.bottom .container .mid {
    color: white;
    margin: auto;
    width: 1200px;
    box-sizing: border-box;
    padding-bottom: 30px;
    margin-bottom: 30px;
    /*边框从左往右线性渐变（仅支持矩形）*/
    border-bottom: solid 1px;
    border-image: linear-gradient(to right, transparent, white, transparent) 1 1 stretch;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bottom .container .mid .friendship-link {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    align-content: flex-start;
    width: max-content;
}

.bottom .container .mid .friendship-link label {}

.bottom .container .mid .friendship-link ul {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

.bottom .container .mid .friendship-link ul li {
    transition: .2s;
    cursor: pointer;
    margin-right: 10px;
}

.bottom .container .mid .friendship-link ul li:hover {
    color: white;
}

.bottom .container .mid .friendship-link ul li:last-of-type {
    margin-right: 0;
    margin-bottom: 0;
}

/* ---------------------------------------- */

.bottom .container .arrow-up {
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background-color: #E6A23C;
    position: absolute;
    right: 0;
    top: -20px;
    transition: 0.2s;
    cursor: pointer;
    color: white;
}

[isMobile] .bottom .container .arrow-up {
    top: -30px;
}

.bottom .container .arrow-up img {
    width: 20px;
    height: 20px;
    object-position: center;
    object-fit: contain;
}

.bottom .container .arrow-up:hover {
    background-color: #B44883;
}

.bottom .container .arrow-up:hover img {
    animation: sg-animate-arrow-up 0.5s linear 1 forwards;
}

@keyframes sg-animate-arrow-up {
    0% {
        opacity: 1;
        transform: translateY(0%);
    }

    50% {
        opacity: 0;
        transform: translateY(-50%);
    }

    51% {
        opacity: 0;
        transform: translateY(50%);
    }

    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

.bottom .container .arrow-up:active {
    background-color: #9c266e;
}

[isMobile] .bottom,
[isMobile] .bottom .container {
    height: revert;
    padding-top: 20px;
}

[isMobile] .bottom .container .top ul li span {
    font-family: AlimamaFangYuanTiVF-Thin;
}

[isMobile] .bottom .container .top ul li .v-line::after {
    font-family: AlimamaFangYuanTiVF-Thin;
    padding: 0 10px;
}

[isMobile] .bottom .container .bt {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

[isMobile] .bottom .container .bt>* {
    font-family: AlimamaFangYuanTiVF-Thin;
    font-size: 14px;
    margin-bottom: 10px;
    font-weight: 300;
}

/* 友情链接---------------------------------------- */

[isMobile] .bottom .container .mid .friendship-link label {
    margin-bottom: 10px;
}

[isMobile] .bottom .container .mid .friendship-link {
    display: flex;
    align-items: center;
    margin-top: 10px;
    font-size: 18px;
}

[isMobile] .bottom .container .mid .friendship-link ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    align-content: flex-start;
}

[isMobile] .bottom .container .mid .friendship-link ul li {
    margin-right: 20px;
    margin-bottom: 10px;
}

/* ---------------------------------------- */

[isMobile] .bottom .container .bt .right {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

[isMobile] .bottom .container .bt .right .ewm {
    margin: 0 20px;
}

[isMobile] .bottom .container .bt .right .ewm p {
    font-family: AlimamaFangYuanTiVF-Thin;
    font-size: 12px;
}

[isMobile] .bottom .container .poweredBy {
    margin: auto;
}

/* 移动端------------------------------------- */
[isMobile] .bottom {
    padding-top: 0;
    margin-top: 0;
}

[isMobile] .bottom .bg {
    position: relative;
    width: 100vw;
    height: calc(100vw/4);
}

[isMobile] .bottom .container * {
    font-family: AlimamaFangYuanTiVF-Thin;
}

[isMobile] .bottom .container .top {
    width: 100%;
    flex-direction: column;
    height: revert;
}

[isMobile] .bottom .container .top>.right {
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

[isMobile] .bottom .container .top>.right>* {
    margin-bottom: 10px;
}

[isMobile] .bottom .container .top>.right>*:last-of-type {
    margin-bottom: 0;
}

[isMobile] .bottom .container .top>.right .row1 {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
}

[isMobile] .bottom .container .top>.right b {
    margin-bottom: 0;
    margin-right: 10px;
    white-space: nowrap;
}

[isMobile] .bottom .container .top>.right .row1>div {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

[isMobile] .bottom .container .top>.right .row1>div:last-of-type {
    margin-bottom: 0;
}

[isMobile] .bottom .container .top>.right .row2 {
    display: flex;
    align-items: center;
}

[isMobile] .bottom .container .mid {
    width: 100%;
}