.top-img {
    width: 100%;
    height: 52.6rem;
}

.top-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.title-name {
    font-size: 3.2rem;
    color: #212121;
    font-weight: 600;
    text-align: center;
    margin-top: 6.8rem;
    line-height: 4.5rem;
}

.tag-content {
    font-size: 2.2rem;
    color: rgba(33, 33, 33, 0.74);
    text-align: center;
    margin-top: 1.4rem;
    line-height: 3rem;
    font-weight: 600;
}

.brand {
    position: relative;
}

.brand-div {
    width: 100%;
    height: 83.4rem;
    background: linear-gradient(274deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%);
    margin-top: 5.8rem;
    display: flex;
    justify-content: center;

}

.brand-div-content {
    width: 118.5rem;
}

.brand-div-content-title {
    text-align: center;
    font-size: 1.8rem;
    color: #212121;
    font-weight: 600;
    margin-top: 6.5rem;
}

.brand-div-content-content {
    text-align: left;
    font-size: 1.4rem;
    color: #080808;
    margin-top: 1.7rem;
}

.brand-div-content .imgs-div {
    display: flex;
    justify-content: space-between;
    margin-top: 4.9rem;
}

.img-div {
    width: 37.8rem;
    height: 44.4rem;
    border-radius: 2.2rem;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}


.img-div img {
    position: absolute;
    width: 37.8rem;
    height: 44.5rem;
    transition: transform 0.3s;
    transform-origin: 50% 50%;
}

.img-div:hover img {
    transform: scale(1.1);
}

.img-div-text {
    position: absolute;
    bottom: 0rem;
    left: 0rem;
    width: 100%;
    height: 19.5rem;
    background: linear-gradient(180deg, rgba(118, 105, 255, 0) 0%, #0D63F4 100%);
}

.img-div-text p {
    text-align: center;
    color: #FFFFFF;
    font-size: 1.4rem;
}

.img-div-text p:nth-child(1) {
    font-size: 1.6rem;
    margin-top: 8.2rem;
    line-height: 2.2rem;
}

.img-div-text p:nth-child(2) {
    font-size: 1.4rem;
    margin-top: 1.9rem;
    line-height: 2rem;
}

.img-div-text p:nth-child(3) {
    font-size: 1.4rem;
    line-height: 2rem;
}

.brand-div-content-bottom {
    width: 100%;
    display: flex;
}

.brand-div-content-bottom-content {
    width: 50%;
    height: 6.6rem;
    display: flex;
    flex-direction: row;
    margin-top: 5rem;
    align-items: flex-end;
    font-size: 1.4rem;
    color: #080808;
    line-height: 2rem;
}

.brand-div-content-bottom-icon {
    width: 6.6rem;
    height: 6.6rem;
    overflow: hidden;
    margin-left: 11.2rem;
    margin-right: 2.1rem;
}

.brand-div-content-bottom-icon>img {
    width: 200%;
    height: 100%;
    position: relative;
}

.brand-div-content-bottom-content-p2 {
    margin-top: 0.9rem;
}

.custom-div {
    margin-top: 6.8rem;
}

.custom-div-list {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.custom-div-item {
    width: 63rem;
    height: 53rem;
    border-radius: 2.2rem;
    overflow: hidden;
    background-color: red;
    margin: 0rem 1.3rem;
    color: #FFFFFF;
    font-weight: 600;
    position: relative;
}

.custom-div-item img {
    width: 100%;
    height: 100%;
    transition: transform 0.3s;
    transform-origin: 50% 50%;
}

.custom-div-item:hover img {
    transform: scale(1.1);
}

.custom-div-item-p1 {
    font-size: 2.6rem;
    position: absolute;
    left: 5rem;
    bottom: 10rem;
    transition: transform 0.3s;
}

.custom-div-item-p2 {
    font-size: 3.2rem;
    position: absolute;
    left: 5rem;
    bottom: 4rem;
    transition: transform 0.3s;
}

.custom-div-item-bottom {
    position: absolute;
    bottom: 0rem;
    width: 63rem;
    height: 22.8rem;
    transition: height 0.3s;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
}

.custom-div-item:hover .custom-div-item-bottom {
    height: 45.6rem;
}

.custom-div-item:hover .custom-div-item-p1,
.custom-div-item:hover .custom-div-item-p2 {
    transform: translateY(-10rem);
}


.product-div {
    width: 100%;
    height: 66.4rem;
    margin-top: 6.8rem;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%);
}

.product-div-list {
    width: 128rem;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: auto;
}

.product-div-item {
    width: 25%;
    height: 44.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.product-icon {
    width: 25.8rem;
    height: 25.8rem;
    /* height: 100%; */
    border-radius: 12.9rem;
    overflow: hidden;
    transition: height 0.3s;
    position: relative;
}

.product-icon img {
    width: 100%;
}

.product-div-item:hover>.product-icon {
    height: 100%;
}


.product-text {
    font-size: 1.8rem;
    color: #080808;
    line-height: 4.3rem;
    position: absolute;
    top: 35.2rem;
    display: flex;
    justify-content: center;
    transition: all 0.3s;
}

.product-text>p {
    font-weight: 400;
    transition: all 0.3s;
}

.product-div-item:hover>.product-text {
    transform: translateX(calc((100% - 32rem) / 2));
    top: 26.2rem;
}

.product-div-item:hover>.product-text>p:nth-of-type(1) {
    width: 5.4rem;
    font-weight: 600;
    transform: translateX(calc(16rem - 50%));
}

.product-div-item:hover>.product-text>p:nth-of-type(2) {
    font-weight: 600;
    transform: translateX(calc(10.2rem - 50%)) translateY(3.6rem);
}



.telated>.telated-div {
    width: 128rem;
    height: 35.8rem;
    background: #FFFFFF;
    box-shadow: 0px 0.2rem 2.4rem 0px rgba(146, 135, 239, 0.11);
    border-radius: 2.2rem;
    margin: 6.8rem auto 0rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.telated>.telated-div>.telated-li {
    margin-top: 1.7rem;
    font-size: 2rem;
    margin-left: 5.2rem;
    color: #2D2424;
}

.telated-li>.telated-li-span:nth-of-type(2):hover {
    text-decoration: underline;
    cursor: pointer
}

.telated-li>.telated-li-span:nth-of-type(1) {
    color: #4656FF;
}

.barrage-area {
    width: 100%;
    overflow: hidden;
    margin-top: 6.8rem;
}

.barrage-row {
    width: 100vw;
    display: flex;
    flex-direction: row;
    margin-bottom: 3rem;
    height: 9.6rem;
    overflow: hidden;
    position: relative;
}

.barrage-item {
    width: 50rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 1.3rem 5rem;
    background-color: #FFFFFF;
    border-radius: 4.8rem;
    margin-right: 3rem;
    position: absolute;
    left: 0rpx;
}

.barrage-item>img {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    margin-right: 2.5rem;
}

.barrage-item>span {
    font-size: 2rem;
    color: #2D2424;
}