@charset "UTF-8";
@media screen and (max-width: 767px) {
    .product {
        margin: 0 4.15%;
    }

    .thumbnail #proImg {
        width: 100%;
        height: 25vw;
    }

    .thumbnail .caption h3 {
        font-size: 1em;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .thumbnail .caption .proIntro {
        font-size: .8em;
        height: 5vw;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .thumbnail #proImg {
        width: 100%;
        height: 12.5vw;
    }

    .thumbnail .caption h3 {
        font-size: 1em;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .thumbnail .caption .proIntro {
        font-size: .8em;
        height: 5vw;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .thumbnail #proImg {
        width: 100%;
        height: 12.5vw;
    }

    .thumbnail .caption h3 {
        font-size: 1em;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .thumbnail .caption .proIntro {
        font-size: .8em;
        height: 5vw;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

@media (min-width: 1200px) {
    .thumbnail #proImg {
        width: 100%;
        height: 12.5vw;
    }

    .thumbnail .caption h3 {
        font-size: 1.3em;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .thumbnail .caption .proIntro {
        font-size: 1.3em;
        height: 5vw;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}