.imgCard[data-v-c4b39fbb] {
    height: 456px;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0
}

.imgCard .text[data-v-c4b39fbb] {
    width: 517px;
    font-size: 20px;
    letter-spacing: 1px
}

.imgCard_out[data-v-c4b39fbb] {
    width: 220px;
    padding: 320px 0 0;
    transition: width .5s ease
}

.imgCard_out .title[data-v-c4b39fbb] {
    width: 100%;
    min-width: 200px;
    text-align: center
}

.imgCard_out .title div[data-v-c4b39fbb] {
    margin-top: 16px
}

.imgCard_out .text[data-v-c4b39fbb] {
    display: none
}

.imgCard_in[data-v-c4b39fbb] {
    width: 680px;
    padding: 56px 138px 65px 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: width .5s ease
}

.imgCard_in .title[data-v-c4b39fbb] {
    width: 100%;
    min-width: 200px;
    display: flex;
    align-items: center
}

.imgCard_in .title div[data-v-c4b39fbb] {
    margin-left: 16px
}

.imgCard_in .text[data-v-c4b39fbb] {
    display: block
}

.secondCard[data-v-c4b39fbb] {
    cursor: pointer;
    opacity: 0;
    width: 220px;
    height: 456px;
    padding: 36px 0;
    border-radius: 12px;
    transition: width .3s ease, background .3s ease
}

.secondCard .title[data-v-c4b39fbb] {
    font-size: 28px;
    padding: 0 0 18px;
    text-align: center;
    color: #fff;
    transition: all .3s ease
}

.secondCard_in[data-v-c4b39fbb] {
    width: 444px;
    transition: width .3s ease, background .3s ease
}

.secondCard_in .title[data-v-c4b39fbb] {
    font-size: 28px;
    padding: 0 24px 18px;
    color: #333;
    transition: all .3s ease
}

.product_box[data-v-c4b39fbb] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    border-radius: 4px;
    padding: 10px
}

.product_hov[data-v-c4b39fbb] {
    background: linear-gradient(94deg, #2c8fff 0%, #00a8ff 100.26%)
}