/*body CSS*/
html,body { height: 100%;}
html { -ms-overflow-style: none;
    overflow: auto;}




body{ margin: 0px; font-size: 16px; font-family: 'Noto Sans KR',sans-serif; }
.div-main-fixed-player { width: 30%; position: fixed; right: 20px; z-index: 20; top: 50%; border-radius: 10px; overflow: hidden; display: none;transform: translateY(-50%);  cursor: pointer;}
.div-live-notice{ width: 100%; height: 20px; background-color: #D7063A; font-size: 12px; color: #ffffff; text-align: center;}
.div-live-notice a { text-decoration: none; color: #ffffff;}

/*scroll button*/
.btn-goto-top { width: 40px; height: 40px; position: fixed; right: 20px; bottom: 50px; background-color: #ececec; z-index: 40; border: 1px solid #cccccc; font-size: 12px; text-align: center; line-height: 330%; border-radius: 30px; display: none; cursor: pointer;}
.btn-goto-help { width: 40px; height: 40px; position: fixed; left: 20px; bottom: 50px; background-color: #ececec; z-index: 40; border: 1px solid #cccccc; font-size: 12px; text-align: center; line-height: 330%; border-radius: 30px; display: none; cursor: pointer;}
.btn-goto-top img { width: 100%;}
.btn-goto-help img { width: 100%;}

/*scroll style*/
::-webkit-scrollbar { width: 5px; } 
::-webkit-scrollbar-track { background-color:#444444; } 
::-webkit-scrollbar-thumb { background: #222222; } 
::-webkit-scrollbar-thumb:hover { background: #ececec; cursor: grab; } 
::-webkit-scrollbar-thumb:active { background: #ececec; } 
::-webkit-scrollbar-button { display: none; } 

/*clear fix*/
.div-clear-fix { width: 100%; clear: both; height: 1px;}

/*visual div*/
.div-main-visual { width: 100%; border-bottom: 1px solid #222222;}
.swiper-slide img { width: 100%; display: block;}
.div-main-title { font-size: 23px; width: 100%; text-align: center;font-weight: 700; color: #ffffff; margin-top: 40px;}
.div-sub-title { font-size: 12px; width: 100%; text-align: center; color: #444444; }

/*main layout*/

.div-main { width: 1200px; position: relative; margin: auto;}
.div-vod-list-wrap { width: 100%; margin-top: 20px; margin-bottom: 20px;}
.div-vod-list { width: 25%; min-height: 150px;  float: left; cursor: pointer; margin-top: 20px; }
.div-vod-innerbox { width: 95%; position: relative; margin: auto; border:1px solid #cccccc; border-radius: 15px; overflow: hidden; padding-bottom: 10px;display: block; background-color: #ffffff;}
.div-vod-pic { width: 100%; border-bottom: 1px solid #cccccc; clear: both; overflow: hidden;}
.div-vod-pic img { width: 100%; display: block;}
.div-vod-title { width: 95%;font-size: 0.85rem;  color: #444444; word-break: break-all; height: 57px; overflow: hidden; text-overflow: ellipsis;
    white-space: normal;  text-align: left; word-wrap: break-all; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin: auto; font-weight: 700;}

.div-vod-section { width: 95%; height: 40px; margin: auto; font-size: 12px; line-height: 40px; font-weight: 700; color: #444444;}
.div-vod-view-count { width: 95%; height: 30px; margin: auto; color: #444444; font-size: 14px;}
.div-vod-auth { width: 95%; height: 30px; margin: auto;font-size: 0.8rem; font-weight: 500; color: #444444; margin-top: 20px;}
.div-tag-view { position: absolute; right: 15px;}

.vp-player-layout { margin: 0; padding: 0; }

.main-btn-cat-wrap{  text-align: center; background-color: #ffffff; width: 1200px; margin: auto; border-radius: 15px; padding-bottom: 20px;  padding-top: 10px;}
.main-btn-cat{ width: 70px; display: inline-block; margin-right: 10px; cursor: pointer;}
.main-btn-cat img { width: 100%;}
.main-btn-cat2{ width: 70px; display: inline-block; margin-right: 10px; cursor: pointer;}
.main-btn-cat2 img { width: 100%;}

@media screen and (max-width: 1200px) { 
    .div-main{width: 100%;}
    .div-vod-list { width: 50%;}
    .main-btn-cat-wrap { width: 95%; margin: auto;}

}

@media screen and (max-width: 500px) { 
    .div-main{width: 100%;}
    .div-vod-list { width: 100%;}
    .div-main-fixed-player  { width: 60%;}
}