.accordion {
    width: 1200px;
    overflow: hidden;
    height: 300px;
    margin: 30px auto 40px;
}

    .accordion ul li {
        background-repeat: no-repeat;
        float: left;
        width: 200px;
        height: 300px;
        cursor: default;
    }

        .accordion ul li.active {
            width: 600px;
        }

        .accordion ul li:first-child {
            width: 600px;
        }

        .accordion ul li a {
            display: block;
            height: 100%;
            width: 100%;
        }

            .accordion ul li a .txt {
                cursor: pointer;
                display: flex !important;
                justify-content: center;
                align-items: center;
                width: 160px;
                padding: 0 20px;
                height: 300px;
                background-color: #666;
            }

        .accordion ul li:nth-child(2) .txt {
            background-color: #f4d832;
        }

        .accordion ul li:nth-child(3) .txt {
            background-color: #d30009;
        }

        .accordion ul li:nth-child(4) .txt {
            background-color: #043381;
        }

        .accordion ul li a h1 {
            font-size: 18px;
            color: #fff;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .accordion ul li a p {
            font-size: 14px;
            color: #fff;
            line-height: 24px;
            margin-top: 10px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .accordion ul li.active a .txt {
            height: 150px;
            transition: all 0.3s linear;
        }

        .accordion ul li.active a h1 {
            font-size: 16px;
            transition: all 0.3s linear;
        }

        .accordion ul li.active a p {
            line-height: 22px;
            transition: all 0.3s linear;
        }