.page .container .banner img {
    width: 100%;
    display: block;
}

.page .container .wrap {
    width: 1200px;
    margin: auto;
    padding-top: 30px;
}

@media screen and (max-width: 1220px) {
    .page .container .wrap {
        width: 100%;
        padding: 30px 20px 0;
    }
}

.page .wrap .type {
    display: flex;
}

.page .wrap .type li {
    cursor: pointer;
    width: 160px;
    height: 50px;
    background: rgba(229, 229, 229, 1);
    text-align: center;
    line-height: 50px;
    font-size: 18px;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    text-align: center;
    margin-right: 60px;
}

.page .wrap .type li.active {
    background: #00A398;
    color: rgba(255, 255, 255, 1);
}

.page .wrap .list a {
    display: flex;
    padding-right: 40px;
    margin-top: 26px;
    padding: 30px 40px 30px 0;
    border-bottom: 1px dashed rgba(204, 204, 204, 1);
}

.page .wrap .list a .left {
    display: flex;
    flex-shrink: 0;
    border-right: 1px solid rgba(217, 217, 217, 1);
}

.page .wrap .list a:hover {
    padding-left: 30px;
    background: rgba(245, 245, 245, 1);
}

.page .wrap .list .left {
    display: flex;
    align-items: center;
    padding-right: 20px;
}

.page .wrap .list .img-box {
    width: 230px;
    height: 150px;
    margin-right: 26px;
}

.page .wrap .list .img-box img {
    width: 230px;
    height: 150px;
    display: block;
    object-fit: cover;
}

.page .wrap .list .date {
    font-size: 24px;
    font-weight: 400;
    line-height: 35px;
    color: rgba(102, 102, 102, 1);
}

.page .wrap .list .year {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: rgba(128, 128, 128, 1);
}

.page .wrap .list .content {
    display: flex;
    align-items: center;
    padding-left: 30px;
}

.page .wrap .list .title {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    color: rgba(51, 51, 51, 1);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.page .wrap .list .desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: rgba(102, 102, 102, 1);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.page .wrap .list .icon {
    width: 40px;
    height: 40px;
    background: url('../images/7.png') no-repeat center;
    background-size: 100% 100%;
    flex-shrink: 0;
    margin-left: 38px;
}

.page .wrap .list a:hover .title {
    color: rgba(0, 163, 152, 1);
}

.page .wrap .list a:hover .icon {
    background: url('../images/8.png') no-repeat center;
}

.mpage {
    min-height: 100vh;
    background: rgba(245, 245, 245, 1);
}

.mpage .type {
    display: flex;
    height: 0.78rem;
    background: #fff;
    padding-left: 0.5rem;
}

.mpage .type li {
    margin-right: 0.5rem;
    position: relative;
    font-size: 0.28rem;
    font-weight: 400;
    line-height: 0.78rem;
    color: rgba(36, 35, 35, 1);
}

.mpage .type li.active {
    color: rgba(19, 119, 255, 1);
}

.mpage .type li.active::after {
    content: '';
    display: block;
    width: 0.4rem;
    height: 0.04rem;
    border-radius: 0.02rem;
    background: rgba(19, 119, 255, 1);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.mpage .list {
    padding: 0.3rem;
}

.mpage .list li a {
    margin-bottom: 0.3rem;
    background: rgba(255, 255, 255, 1);
    display: flex;
    padding: 0.24rem;
}

.mpage .list li .img-box {
    flex-shrink: 0;
    margin-right: 0.22rem;
}

.mpage .list li .img-box img {
    width: 2.4rem;
    height: 1.57rem;
    display: block;
    object-fit: cover;
}

.mpage .list li .title {
    font-size: 0.3rem;
    font-weight: 400;
    line-height: 0.5rem;
    color: rgba(53, 53, 53, 1);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mpage .list li .time {
    margin-top: 0.1rem;
    font-size: 0.24rem;
    font-weight: 400;
    color: rgba(158, 158, 158, 1);
}