@charset "UTF-8";

/* detail */
.css-detail-tvod {
    width: 24vw !important;
    max-width: calc(100% / 4) !important;
}

@media only screen and (min-width: 768px) {
    .top-container .package-list-area .package-list-wrapper {
        margin-top: 0px;
        padding-top: 20px;
        margin-bottom: 0px;
        padding-bottom: 0px;
    }

    .css-detail-tvod > .package-detail-area {
        display: block;
    }

    .css-detail-tvod {
        width: 24vw !important;
        max-width: calc(100% / 8) !important;
    }

}

@media only screen and (max-width: 767px) {
    .top-container .package-list-area .package-list-wrapper {
        margin-top: 0px;
        padding-top: 20px;
        margin-bottom: 0px;
        padding-bottom: 20px;
    }

    .css-detail-tvod > .package-detail-area {
        display: none !important;
    }

    .css-detail-tvod {
        max-width: calc(100% / 4) !important;
    }
}

.css-vod-a {
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0px; 
    position: relative;
    background: #fff;
    width: 100%;
    display: block;
}

.css-vod-a > .package-image {
    position: relative;
    line-height: 0;
}

.css-vod-a > .package-image > .css-vod-i {
    width: 100%;
    opacity: 1;
}

#recommend-detail-tvod .package-list .package-detail-area,
#recommend-detail-non-tvod .package-list .package-detail-area {
    display: none !important;
}
.css-vod-detail-a {
    display: none !important;
}


/* top */
@media only screen and (min-width: 768px) {
    .css-tvod > a > p > img {
        opacity: 1 !important;
        width: 167px !important;
    }
    .css-tvod > .package-detail-area {
        height: 44px;
   }
}
@media only screen and (max-width: 767px) {
    .css-tvod > a > p > img {
        opacity: 1 !important;
        width: 108px !important;
    }
}