.teeth {
    position: relative;
    object-fit: cover;
    z-index: -1;
    width: 100%;
}

.addBox {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 673px;
    border-radius: 17px;
    height: 185px;
    font-size: 5.293rem;
    color: #262626;
    margin-top: -92.5px;
    background-color: #fff;
}

/* 主页 */
section {
    .phone-top {
        display: none;
    }
    display: flex;
    color: #262626;
    margin-top: 92.5px;
    border-top: 1px solid #C9C9C9;

    .left {
        width: 320px;
        height: auto;
        font-size: 1.6rem;
        border-right: 1px solid #E3E3E3;

        .fixed {
            position: sticky;
            top: 0;
            width: 100%;
            height: auto;
            padding-left: 80px;
            padding-top: 67px;

            .intro {
                position: relative;
                top: 0;
                width: 35px;
                padding-bottom: 4px;
                border-bottom: 1px solid #C9C9C9;
            }

            .fixed-flag {
                display: flex;
                flex-wrap: wrap;
                padding-top: 40px;

                a {
                    border: 1px solid #BBB7AE;
                    border-radius: 5px;
                    padding: 11px 16px;
                    margin-right: 10px;
                    margin-bottom: 9px;
                }
            }
        }
    }

    .right {
        flex: 1;
        overflow: hidden;
        .li {
            display: flex;
            padding: 105px 0 105px 219px;
            border-bottom: 1px solid #E3E3E3;

            .picture {
                width: 30%;
                height: 288px;
                border-radius: 13px;
                overflow: hidden;
                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 13px;
                    transition: transform 0.3s ease;
                }
            }

            .message {
                padding-left: 82px;
                padding-top: 25px;

                .message-more {
                    font-size: 1.6rem;

                    .time {
                        position: relative;
                        color: #000000;

                        &::after {
                            position: absolute;
                            content: '';
                            top: 0;
                            left: 112px;
                            width: 1px;
                            height: 21px;
                            background-color: #D9D9D9;
                        }
                    }

                    i {
                        margin-left: 41px;
                    }

                    .num {
                        margin-left: 6px;
                        color: #000000;
                    }
                }

                .des {
                    color: #000000;
                    font-size: 2.4rem;
                    margin-top: 26px;
                }

                .detail {
                    display: flex;
                    align-items: center;
                    width: 241px;
                    height: 73px;
                    border: 1px solid #E5E5E5;
                    border-radius: 24px 0px 24px 0px;
                    margin-top: 84px;

                    span {
                        padding-left: 37px;
                    }

                    i {
                        padding-left: 92px;
                    }

                    
                }
            }
        &:hover {
            .picture img {
                transform: scale(1.1);
            }
            .detail {
                background-color: #89B137;

                span {
                    color: #ffffff;
                }

                i {
                    color: #ffffff;
                    transition: transform 0.3s ease;
                    transform: translateX(7px);
                }
            }
        }
    }
}
}
.paginations {
    user-select: none;
    height: 207px;
    display: flex;
    align-content: center;
    justify-content: center;
    nav{
        display: flex;
        align-items: center;
        .pagination{
            display: flex;
            align-items: center;
            justify-content: center;
            li{
                font-size: 20px;
                width: 53px;
                height: 53px;
                display: flex;
                align-items: center;
                justify-content: center;
                a{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 53px;
                    height: 53px;
                }
                .user-next{
                    margin-left: 15px;
                    color: transparent;
                    display: inline-block;
                    width: 0;
                    height: 0;
                    border-style: solid;
                    border-width: 15px 0 15px 20px;
                    border-color: transparent transparent transparent #A9A8AF;
                }
                .user-prev{
                    margin-right: 15px;
                    color: transparent;
                    display: inline-block;
                    width: 0;
                    height: 0;
                    border-style: solid;
                    border-width: 15px 20px 15px 0;
                    border-color: transparent #A9A8AF transparent transparent;
                }
            }
            .active{
                width: 53px;
                height: 53px;
                border-radius: 50%;
                background: #89B137;
                font-size: 20px;
                color: #FFF;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }

}

@media screen and (max-width:1600px) {
    .addBox {
        width: 555px;
        height: 160px;
        font-size: 4.2rem;
        color: #262626;
        margin-top: -80px;
    }
}

@media screen and (max-width:1280px) {
    section {
        .left {
            .fixed {
                padding-left: 30px;

            }
        }

        .right {
            padding: 0 40px;

            .li {
                padding: 40px 0;
            }
        }
    }
}

@media screen and (max-width:960px) {

    .addBox {
        width: 272px;
        height: 90px;
        font-size: 3.2rem;
        color: #262626;
        margin-top: -50px;
    }

    section {
        .left {
            display: none;
        }

        .right {
            padding: 0 40px;

            .li {
                padding: 40px 0;

                .message {
                    padding-left: 40px;

                    .detail {
                        margin-top: 40px;
                    }

                    .des {
                        font-size: 2rem;
                    }
                }
            }
        }
    }

    .pagination {
        height: 110px;
    }
}

@media screen and (max-width:560px) {

    .teeth,
    .addBox {
        display: none;
    }

    section {
        margin-top: 0;
        .phone-top {
            display: block;
            height: 240px;
            .descs {
                h2 {
                    font-size: 20px;
                }
                h3 {
                    padding-top: 10px;
                    font-size: 13px;
                    padding-bottom: 20px;
                    position: relative;
                    font-weight: lighter;
                    &::after {
                        content: '';
                        width: 120px;
                        height: 3px;
                        background: #89B137;
                        position: absolute;
                        left: 50%;
                        bottom: 0;
                        transform: translateX(-50%);
                    }
                }
            }
        }
        .left {
            display: none;
        }
        .right {
            padding: 0;
            .li {
                display: flex;
                flex-wrap: wrap;
                padding: 30px 0;
                .picture {
                    width: 100%;
                    overflow: hidden;
                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        object-position: center;
                    }
                }
                .message {
                    padding-left: 0;

                    .message-more {
                        display: none;
                    }
                    .des {
                        margin-top: 0;
                        font-size: 2rem;
                        font-weight: bold;
                    }
                    .detail{
                        width: 200px;
                        height: 60px;
                        display: flex;
                        padding: 0 30px;
                        justify-content: space-between;
                        span{
                            padding-left: 0;
                        }
                        i{
                            padding-left: 0;
                            color: #89B137;
                            
                        }
                    }
                }
            }
        }
    }
    section {
         .right {
             .li {
                &:hover {
                    .message {
                         .detail {
                            i {
                                
                                color: #ffffff;
                            }
                        }
                    }
                }
            }
        }
    }

    .paginations {
        height: 150px;
        nav {
             .pagination {
                li {
                   &:nth-child(2) {
                        margin-left: 15px;
                    }
                    &:nth-last-child(2) {
                        margin-right: 15px;
                    }
                    font-size: 15px;
                    .user-prev {
                        margin-right: 0;
                        position: relative;
                        width: 50px;
                        height: 50px;
                        background: #89B137;
                        border-radius: 50%;
                        border-style: none;
                        &::before {
                            position: absolute;
                            top: 50%;
                            left: 50%;  
                            transform: translate(-50%, -50%);
                            content: '<';
                            color: #fff;
                            font-size: 2.5rem;
                        }
                    }
                    .user-next {
                        margin-left: 0;
                        position: relative;
                        width: 50px;
                        height: 50px;
                        background: #89B137;
                        border-radius: 50%;
                        border-style: none;
                        &::before {
                            position: absolute;
                            top: 50%;
                            left: 50%;  
                            transform: translate(-50%, -50%);
                            content: '>';
                            color: #fff;
                            font-size: 2.5rem;
                        }
                    }
                }
                .active {
                    color: red;
                    font-size: 15px;
                    background: none;
                }
            }
        }
    }
    section {
        .phone-top {
            height: 180px;
            .imgs {
                height: 100%;
            }
        }
    }
    section {
        .right {
            flex: none;
            overflow: hidden;
            padding: 0;
            width: 100%;
            .li {
                padding: 30px 25px;
                .picture {
                    height: 260px;
                }
            }
        }
    }
}
@media screen and (max-width:480px) {
    section {
        & .right {
            & .li {
                & .message {
                    .detail {
                        width: 160px;
                    }
                }
            }
        }
    }
}