@charset "UTF-8";
body .video-wrap{
    height:auto
}
.vod-player,
.live-player {
    display: block;
    width: 100%;
    height:100%;
    position: relative;
    z-index: 2;
}
.youtube-player{
    padding-top:56.25%;
    position: relative;
}
.youtube-player iframe{
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}
.type-mini .youtube-player iframe{
    overflow: hidden;
    border-radius: 10px;
}
.type-mini .youtube-player,
.type-mini .vod-player,
.type-mini .live-player{
    position: fixed;
    right: 36px;
    bottom: 24px;
    padding-top:0;
    width: 400px;
    height: 225px;
    z-index: 99;
    font-size: 0;
    border-radius: 10px;
    overflow:hidden;
}
.type-mini .youtube-player{
    overflow:visible;
}
.lock .youtube-player,
.lock .vod-player,
.lock .live-player{
    position: static;
}
.type-mini .vjs-control-bar {
    padding: 8px 12px;
}
.type-mini .next-video-wrap .bottom-box{
    padding-top:22.25%;
}
.type-mini .youtube-rewind,
.type-mini .vjs-control-bar .pp-video-btn {
    margin: -24% 0 0 -94px;/* 220602 modify */
    width: 24px;
    height: 24px;
    background-size: 100%;
}
.type-mini .youtube-ff,
.type-mini .vjs-control-bar .ff-video-btn {
    margin: -24% 0 0 63px;/* 220602 modify */
    width: 24px;
    height: 24px;
    background-size: 100%;
}
.type-mini .vjs-playing .vjs-control-bar .vjs-play-control,
.type-mini .vjs-paused .vjs-control-bar .vjs-play-control,
.type-mini .stop-video .vjs-paused .vjs-control-bar .vjs-play-control {/* 220516 add */
    margin: -26% 0 0 -18px; /* 220516 modify */
    width: 35px;/* 220516 modify */
    height: 40px;/* 220516 modify */
    background-size: 35px 40px;/* 220516 modify */
}
.type-mini .youtube-fullsize,
.type-mini .vjs-fullscreen-control {
    right: 12px;
}
.type-mini .youtube-subscaps,
.type-mini .vjs-subs-caps-button .vjs-subs-caps-button,
.type-mini .vjs-control-bar .vjs-mute-control {
    display: none;
}

/*.type-mini .vjs-progress-control{*/
/*  padding:10px 0;*/
/*  height:24px;*/
/*}*/
.type-mini .vjs-mouse-display {
    margin-left: 10px;
}

.captionmenu-open .vod-player,
.captionmenu-open .live-player,
.stepmenu-open .vod-player,
.stepmenu-open .live-player {
    z-index: 999;
}

.captionmenu-open .vjs-control-bar,
.stepmenu-open .vjs-control-bar {
    display: block !important;
    opacity: 1 !important;
}

.player-wrap .video-js {
    height: auto;
}

.video-js .vjs-tech {
    position: static;
    height: auto;
}

.vjs-fullscreen .vjs-tech {
    width: 100%;
    height: 100%;
}

.video-js.vjs-ended .vjs-poster {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: auto 100%; /* 220225 modify */
    background-repeat: no-repeat; /* 220225 add */
    background-position: center; /* 220225 add */
}

.player-wrap .vjs-control-bar {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
}

.vod-player .ending-poster,
.ytb-player .ending-poster,
.live-player .ending-poster {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.type-model .video-js.vjs-ended .vjs-poster {
    display: none;
}

.poster .ending-poster {
    display: block;
}


/* video */
.vjs-loading-spinner {
    display: none;
}

.vjs-error-display {
    display: none;
}

.vjs-text-track-display {
    pointer-events: none;
}

.hmg-video-play-wrap .hmg-video .vjs-resize-manager {
    height: 0;
}

.hmg-video-play-wrap .hmg-video,
.hmg-video-play-wrap .hmg-video video {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background-color: #000 !important;
    font-size: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* 220524 add */
.component-video .hmg-video-play-wrap .hmg-video,
.component-video .hmg-video-play-wrap .hmg-video video {
    border-radius: 10px;
}
/* //220524 add */

@keyframes btn {
    0% {
        transform: scale(1);
        opacity: 0.5
    }
    50% {
        transform: scale(1.3);
        opacity: 1
    }
    100% {
        transform: scale(1.5);
        opacity: 0
    }
}
.miniplayer-close-btn{
    display: none;
}
.type-mini .miniplayer-close-btn{
    display: block;
    position: absolute;
    right:10px;
    top:10px;
    width:24px;
    height:24px;
    background:url("../images/videoicon/icn-close-black.svg") no-repeat center center;
    z-index: 11;
}
.hmg-video button {
    cursor: pointer;
}

.youtube-big-btn {
    display: none !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: -50px 0 0 -50px;
    width: 100px;
    height: 100px;
    border: none;
    opacity: 0;
    z-index: 9;
}

.vjs-big-play-button {
    display: none !important;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
    width: 100px;
    height: 100px;
    border: none;
    opacity: 0;
}

.youtube-big-btn.show1,
.vjs-big-play-button.show1 {
    display: block;
    background: url("../images/videoicon/pause-cue.svg") no-repeat center center;
    background-size: 100%;
    animation: btn 0.5s;
}

.youtube-big-btn.show2,
.vjs-big-play-button.show2 {
    display: block;
    background: url("../images/videoicon/play-cue.svg") no-repeat center center;
    background-size: 100%;
    animation: btn 0.5s;
}

.youtube-big-btn.show3,
.vjs-big-play-button.show3 {
    display: block;
    background: url("../images/videoicon/jump-cue-2.svg") no-repeat center center;
    background-size: 100%;
    animation: btn 0.5s;
}

.youtube-big-btn.show4,
.vjs-big-play-button.show4 {
    display: block;
    background: url("../images/videoicon/jump-cue-1.svg") no-repeat center center;
    background-size: 100%;
    animation: btn 0.5s;
}

.live-video-btn {
    padding-left: 17px;
    width: 32px;
    height: 24px;
    line-height: 24px;
    font-size: 15px;
    color: #fafafa;
    position: relative;
    vertical-align: top;
}

.live-video-btn:before {
    content: '';
    display: block;
    position: absolute;
    left: 7px;
    top: 10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #e63312;
}

.vjs-control-bar {
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 40px 36px;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    border: none;
    box-sizing: border-box;
}
.vjs-paused .vjs-control-bar,
.type-noopacity .vjs-control-bar{
    opacity: 1;
}
.vjs-control-bar .disabled {
    opacity: .3;
}

.show-control .vjs-control-bar,
.stop-video .vjs-control-bar {
    display: block;
    z-index: 11;
}

.stop-video.type-live .vjs-control-bar {
    z-index: auto;
}

.show-control .vjs-fullscreen .vjs-control-bar {
    opacity: 0;
}

.show-control .vjs-fullscreen .vjs-control-bar:hover {
    opacity: 1;
}

.show-control .vjs-text-track-cue {
    margin-top: -10%;
}

.show-control-bar .vjs-text-track-cue {
    margin-top: -10%;
}
.show-control-bar .vjs-control-bar{
    opacity: 1;
}
.vjs-slider {
    height: 3px;
    background: rgba(255, 255, 255, 0.25);
}

.vjs-progress-control {
    padding: 10px 0;
    height: 24px;
    box-sizing: border-box;
}

.vjs-progress-control .vjs-slider-bar {
    height: 3px;
    background: #007fa8;
    position: relative;
}

.vjs-progress-control .vjs-slider-bar .vjs-time-tooltip {
    display: none;
}

.vjs-slider-bar:after {
    content: '';
    display: none;
    position: absolute;
    right: -14px;
    top: -5px;
    width: 14px;
    height: 14px;
    background: #007fa8;
    border-radius: 50%;
}

.mobile-soundtab {
    display: none;
}

.vjs-progress-control:hover .vjs-slider-bar:after {
    display: none;
}

.vjs-progress-control:hover .vjs-mouse-display:after {
    content: '';
    display: block;
    position: absolute;
    right: -8px;
    top: -5px;
    width: 14px;
    height: 14px;
    background: #007fa8;
    border-radius: 50%;
}

.vjs-progress-control {
    cursor: pointer;
}

.vjs-mouse-display {
    display: none;
    position: absolute;
    margin-left: 35px;
    width: 1px;
    height: 3px;
    background: #000;
}

.vjs-progress-control:hover .vjs-mouse-display {
    display: block;
}

.vjs-mouse-display .vjs-time-tooltip {
    position: absolute;
    bottom: 25px;
    padding: 3px;
    color: #fff;
    font-size: 15px;
    z-index: 3
}

.vjs-slider .vjs-control-text {
    display: none;
}

.vjs-playing .vjs-control-bar .vjs-play-control {
    margin-right: 10px;
    width: 45px;
    height: 45px;
    background: url("../images/videoicon/icn-pause.svg") no-repeat center center;
    background-size: 50px 60px; /* 220516 modify */
    border: none;
}

.live-player .vjs-control-bar .vjs-play-control.vjs-playing,
.live-player .vjs-control-bar .vjs-play-control.vjs-paused {
    display: none;
    background: url("../images/videoicon/ic-stop.svg") no-repeat center center;
    background-size: 100%;
}

.stop-video .vjs-paused .vjs-control-bar .vjs-play-control {
    background: url("../images/videoicon/icn-replay.svg") no-repeat center center;
    background-size: 50px 60px; /* 220516 modify */
}

.stop-video .youtube-pause,
.stop-video .youtube-pause-btn,
.stop-video .ff-video-btn,
.stop-video .pp-video-btn{
    display: none !important;
}

.stop-video .youtube-play {
    display: inline-block !important;
    background: url("../images/videoicon/ic-replay.svg") no-repeat center center;
    background-size: 100%;
}

.stop-video .youtube-play-btn {
    display: inline-block !important;
    background: url("../images/videoicon/simple-replay.svg") no-repeat center center;
}

.vjs-control-bar .vjs-paused,
.vjs-control-bar .vjs-play-control {
    margin-right: 10px;
    width: 50px;/* 220516 modify */
    height: 60px;/* 220516 modify */
    background: url("../images/videoicon/icn-play.svg") no-repeat center center;
    background-size: 50px 60px;/* 220516 modify */
    border: none;
    vertical-align: top;
    /* -webkit-backdrop-filter: blur(30px);*/ /* 220516 delete */
    /* backdrop-filter: blur(30px); *//* 220516 delete */
    /* border-radius: 50%; *//* 220516 delete */
}

.vjs-control-bar .next-video-btn {
    margin-right: 10px;
    width: 45px;
    height: 45px;
    background: url("../images/videoicon/ic-next.svg") no-repeat center center;
    background-size: 100%;
    border: none;
}

.vjs-control-bar .prev-video-btn {
    margin-right: 10px;
    width: 24px;
    height: 24px;
    background: url("../images/videoicon/ic-prev.svg") no-repeat center center;
    background-size: 100%;
    border: none;
}

.vjs-control-bar .pp-video-btn {
    margin-right: 10px;
    width: 45px;
    height: 45px;
    background: url("../images/videoicon/ic-back.svg") no-repeat center/cover;
    background-size: 98%;
    border: none;
}

.vjs-control-bar .ff-video-btn {
    margin-right: 10px;
    width: 45px;
    height: 45px;
    background: url("../images/videoicon/ic-forward.svg") no-repeat center/cover;
    background-size: 98%;
    border: none;
}

.vjs-control-bar .play-video-btn {
    margin-right: 10px;
    width: 45px;
    height: 45px;
    background: url("../images/videoicon/ic-sm-play.svg") no-repeat 12px center;
    background-size: 100%;
    border: none;
    vertical-align: top;
}

.vjs-playing .vjs-control-bar .play-video-btn {
    margin-right: 10px;
    width: 45px;
    height: 45px;
    background: url("../images/videoicon/icn-pause.svg") no-repeat center center;
    background-size: 100%;
    border: none;
    vertical-align: top;
}

.vjs-paused .vjs-control-bar .play-video-btn {
    margin-right: 10px;
    width: 45px;
    height: 45px;
    background: url("../images/videoicon/icn-full-play.svg") no-repeat center center; /* 220516 modify */
    background-size: 100%;
    border: none;
    vertical-align: top;
}

.stop-video .vjs-paused .vjs-control-bar .play-video-btn {
    background: url("../images/videoicon/simple-replay.svg") no-repeat center center;
}

.vjs-control-bar .ff-video-btn .vjs-control-text,
.vjs-control-bar .pp-video-btn .vjs-control-text,
.vjs-control-bar .next-video-btn .vjs-control-text,
.vjs-control-bar .prev-video-btn .vjs-control-text,
.vjs-control-bar .vjs-playing .vjs-control-text,
.vjs-control-bar .vjs-paused .vjs-control-text,
.vjs-control-bar .vjs-mute-control .vjs-control-text,
.vjs-control-bar .vjs-current-time .vjs-control-text,
.vjs-control-bar .vjs-duration .vjs-control-text,
.vjs-subs-caps-button .vjs-menu .vjs-menu-content li .vjs-control-text,
.vjs-big-play-button .vjs-control-text {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.vjs-subs-caps-button .vjs-menu .vjs-menu-content li:last-of-type{display: none;}

.upcoming-replaybtn {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    background: url("../images/videoicon/replay-cue.svg") no-repeat;
    background-size: 100% 100%;
    text-indent: -9999px;
}

.layer-pop.type-next .upcoming-replaybtn {
    margin: -120px 0 0 -40px;
}

/* control center */
.youtube-play,
.youtube-pause,
.vjs-control-bar .vjs-paused,
.vjs-control-bar .vjs-play-control,
.vjs-playing .vjs-control-bar .vjs-paused,
.vjs-playing .vjs-control-bar .vjs-play-control {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50px;/* 220516 modify */
    height: 60px;/* 220516 modify */
    margin: -25% 0 0 -25px;/* 220602 modify */
    text-indent: -9999px;
}

/* 220524 add */
.component-col2 .component-video .vjs-control-bar .vjs-play-control {
    margin:-23% 0 0 -25px;
}
/* //220524 add */

.youtube-rewind,
.vjs-control-bar .pp-video-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 48px;
    height: 48px;
    margin: -25% 0 0 -190px;/* 220602 modify */
    background-size: 98%;
}

.youtube-ff,
.vjs-control-bar .ff-video-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 48px;
    height: 48px;
    margin: -25% 0 0 141px;/* 220602 modify */
    background-size: 98%;
}

.youtube-rewind:hover,
.youtube-ff:hover,
.vjs-control-bar .pp-video-btn:hover,
.vjs-control-bar .ff-video-btn:hover {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 70px;
}

.next-video-thumbnail {
    display: none;
    position: absolute;
    left: 36px;
    bottom: 84px;
    padding: 8px;
    width: 316px;
    height: 96px;
    background: #fff;
    text-align: left;
    z-index: 1;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    text-indent: 0;
}

.next-video-thumbnail img {
    float: left;
    margin-right: 8px;
    width: 142px;
    height: 80px;
}

.next-video-thumbnail .thumbnail-title {
    display: inline-block;
    margin-bottom: 8px;
    max-width: 150px;
    font-size: 14px;
    color: #111;
    font-weight: 500;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.next-video-thumbnail .thumbnail-text {
    display: inline-block;
    display: -webkit-box;
    margin: 0;
    width: 150px;
    height: 40px;
    line-height: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #111;
    font-size: 12px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

.prev-video-thumbnail {
    display: none;
    position: absolute;
    left: 36px;
    bottom: 84px;
    padding: 8px;
    width: 316px;
    height: 96px;
    background: #fff;
    text-align: left;
    z-index: 1;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    text-indent: 0;
}

.next-video-thumbnail-box {
    float: left;
    margin-right: 8px;
    width: 142px;
    height: 80px;
    position: relative;

    border-radius: 10px;
    overflow: hidden;
}

.prev-video-thumbnail img {
    width: 100%;
}

.next-video-thumbnail-time {
    display: inline-block;
    padding: 4px;
    position: absolute;
    right: 4px;
    bottom: 4px;
    background: rgba(0, 0, 0, 0.7);
    font-size: 12px;
    color: #fff;
    font-weight: 500;
}

.prev-video-thumbnail .thumbnail-title {
    display: inline-block;
    margin-bottom: 8px;
    max-width: 150px;
    font-size: 14px;
    color: #111;
    font-weight: 500;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.prev-video-thumbnail .thumbnail-text {
    display: inline-block;
    display: -webkit-box;
    margin: 0;
    width: 150px;
    height: 40px;
    line-height: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #111;
    font-size: 12px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

.vjs-control-bar .next-video-btn:hover .next-video-thumbnail {
    display: block;
}

.vjs-control-bar .prev-video-btn:hover .prev-video-thumbnail {
    display: block;
}

.vjs-control-bar .vjs-volume-panel {
    display: inline-block;
    margin-right: 14px;
}

.vjs-control-bar .vjs-mute-control {
    width: 45px;
    height: 45px;
    background: url("../images/videoicon/icn-sound.svg") no-repeat center center;
    background-size: 100%;
    border: none;
}

.vjs-control-bar .vjs-mute-control.vjs-vol-0 {
    background: url("../images/videoicon/icn-volum-off.svg") no-repeat center center;
    background-size: 100%;
}

.vjs-control-bar .vjs-volume-control {
    display: none;
}

.vjs-control-bar .vjs-volume-panel.vjs-hover .vjs-volume-control {
    display: inline-block;
    margin: 10px 0 0 14px;
    vertical-align: top;
}

.vjs-control-bar .vjs-volume-bar {
    width: 60px;
    height: 3px;
    background: rgba(255, 255, 255, 0.4);
}

.vjs-control-bar .vjs-volume-level {
    height: 3px;
    background: #007fa8;
    position: relative;
}

.vjs-control-bar .vjs-volume-level:before {
    content: '';
    display: block;
    position: absolute;
    right: -7px;
    top: -6px;
    width: 15px;
    height: 15px;
    background: #007fa8;
    border-radius: 50%;
}

.vjs-time-control {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    vertical-align: top;
    font-size: 14px;
    color: #fff;
}

.vjs-time-divider {
    margin: 0 3px;
}

.youtube-fullsize,
.vjs-fullscreen-control {
    position: absolute;
    right: 36px;
    display: inline-block;
    width: 45px;
    height: 45px;
    background: url("../images/videoicon/icn-fullscreen.svg") no-repeat center center;
    background-size: 100%;
    border: none;
    z-index: 10000;
}

.youtube-fullsize.full,
.vjs-fullscreen .vjs-fullscreen-control {
    background: url("../images/videoicon/ic-mini.svg") no-repeat center center;
}

.youtube-subscaps,
.vjs-subs-caps-button.vjs-control {
    position: absolute;
    right: 72px;
    display: inline-block;
}

.youtube-subscaps,
.vjs-subs-caps-button .vjs-subs-caps-button {
    width: 45px;
    height: 45px;
    background: url("../images/videoicon/icn-subtitle.svg") no-repeat center center;
    background-size: 100%;
    border: none;
}

.vjs-subs-caps-button .vjs-subs-caps-button.no-subs {
    background-image: url("../images/videoicon/ic-player-subtitle-off.svg");
}

.vjs-subs-caps-button .vjs-menu {
    display: none;
    position: absolute;
    right: -36px;
    bottom: 52px;
    width: 220px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

.captionmenu-open .vjs-control-bar {
    z-index: 111 !important;
}

.vjs-subs-caps-button[aria-expanded="true"] + .vjs-menu,
.vjs-subs-caps-button .vjs-menu.vjs-lock-showing {
    display: block;
    z-index: 99999;
}

.vjs-subs-caps-button .vjs-menu.vjs-hidden {
    display: none;
}

.vjs-subs-caps-button .vjs-menu .vjs-menu-content {
    margin: 0 0 20px 0;
    padding: 0;
    max-height: 275px;
    overflow: auto;
    z-index: 11;
    position: relative;
}

.vjs-subs-caps-button .vjs-menu .vjs-menu-content.sub-ul {
    overflow: hidden;
}

.horizon.vjs-subs-caps-button .vjs-menu .vjs-menu-content {
    max-height: 175px;
}

.vjs-subs-caps-button .vjs-menu .vjs-menu-content li {
    padding: 5px 20px;
    list-style: none;
    color: #131415;
    font-size: 17px;
    letter-spacing: -0.21px;
    position: relative;
}

.vjs-subs-caps-button .vjs-menu .vjs-menu-content li:hover {
    background: rgba(255, 255, 255, 0.2)
}
.vjs-subs-caps-button .vjs-menu .vjs-menu-content li:before {
    content: '';
    position: absolute;
    right: 20px;
    top: 6px;
    width: 24px;
    height: 24px;
    background: url("../images/videoicon/icn-radio-default.svg") no-repeat center center;
}
.vjs-subs-caps-button .vjs-menu .vjs-menu-content li.vjs-selected:before {
    background: url("../images/videoicon/icn-radio-selected.svg") no-repeat center center;
}

.vjs-subs-caps-button .vjs-menu .subs-title {
    margin: 20px auto 0 auto;
    padding: 0 20px 10px 20px;
    width: 100%;
    font-size: 17px;
    color: #131415;
    box-sizing: border-box;
    font-weight: 500;
}

.vjs-subs-caps-button .vjs-menu .subscap-closebtn {
    display: none;
}

.youtube-subscaps-list.vjs-subs-caps-button {
    position: absolute;
    right: 110px;
    z-index: 10001
}

.youtube-close-dom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.hmg-video-play-wrap.type-live .vjs-fullscreen-control {
    position: relative;
    right: auto;
    float: right;
}

.hmg-video-play-wrap {
    position: relative;
    z-index: 1;
}

.hmg-video-play-wrap .ultra4k-tag.show {
    position: absolute;
    right: 60px;
    top: 40px;
    width: 128px;
    height: 50px;
    line-height: 50px;
    font-size: 24px;
    font-weight: 500;
    color: #fafafa;
    text-align: center;
    background: rgba(0, 0, 0, 0.6);

}

.hmg-video-play-wrap.ytb-player {
    z-index: 1;
}

.top-box {
    margin-bottom: 12px;
    z-index: 1;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

.top-box em {
    color: #fff;
}

.type-mini .top-box {
    margin-bottom: 22px;
}

.type-mini .bottom-box {
    float: left;
    margin-right: 13px;
    width: 168px;
}

.next-video-info {
    margin-bottom: 12px;
    /*vertical-align: top;*/
}

.next-video-info .next-video-title {
    font-size: 17px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.type-mini .next-video-info .next-video-title {
    font-size: 14px;
    height: 48px;
    line-height: 24px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.next-btn-box {
    font-size: 0;
}

.type-mini .next-btn-box {
    clear: both;
}

.next-btn-box .cancel-btn {
    width: calc(50% - 4px);
    height: 45px;
    font-size: 14px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 25px;
}

.next-btn-box .next-btn {
    margin-left: 8px;
    width: calc(50% - 4px);
    height: 45px;
    font-size: 14px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 25px;
}

.next-video-info .next-video-name {
    display: inline-block;
    margin: 0 10px 10px 0;
    font-size: 15px;
    font-weight: 500;
    color: #007fa8;
}

.next-video-info .next-video-date {
    display: inline-block;
    margin: 0 0 10px 0;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    opacity: 0.8;
}

.next-video-info .next-video-time {
    display: inline-block;
    margin: 0 10px 10px 0;
    padding-left: 18px;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    opacity: 0.8;
    position: relative;
}

.next-video-info .next-video-time:before {
    content: '';
    display: block;
    position: absolute;
    left: 8px;
    top: 6px;
    width: 2px;
    height: 12px;
    background: #fff;
    opacity: 0.8;
}

.next-video-info .next-video-description {
    line-height: 28px;
    font-size: 20px;
    color: #fff;
    opacity: 0.6;
}

.next-video-auto {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 111;
}

.hmg-video-play-wrap.stop-video .next-video-auto {
    display: block;
}

.hmg-video-play-wrap .layer-pop {
    z-index: 20;
}

.next-video-auto img {
    width: 100%;
    position: absolute;
    left:0;
    top:0;
}

.next-video-auto .next-video-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    box-sizing: border-box;
}

.type-mini .next-video-auto .next-video-wrap {
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

.next-video-wrap .bottom-box {
    margin-bottom: 12px;
    padding-top:56.25%;
    border-radius: 10px;
    position: relative;
    overflow:hidden;;
}

.next-video-wrap .bottom-box .play-time {
    display: inline-block;
    padding: 0px 4px;
    position: absolute;
    right: 4px;
    bottom: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 12px;
    border-radius: 2px;
}

.next-video-wrap .ultra4k-tag {
    position: absolute;
    top: 10px;
    left: 261px;
    width: 33px;
    height: 23px;
    line-height: 23px;
    font-size: 13px;
    font-weight: 500;
    color: #fafafa;
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
}

.next-auto-cancel {
    margin-left: 20px;
    height: 50px;
    line-height: 50px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    vertical-align: top;
}

.next-auto-accept {
    padding: 13px 20px;
    height: 50px;
    border: 3px solid #007fa8;
    color: #007fa8;
    position: relative;
    font-weight: 500;
    background: none;
    overflow: visible;
}

.next-auto-accept span {
    font-weight: 500;
}

.next-auto-accept em {
    display: inline-block;
    width: 21px;
    font-weight: 500;
}

.next-auto-accept:before {
    content: '';
    display: block;
    position: absolute;
    left: -3px;
    bottom: -9px;
    width: calc(100% + 6px);
    height: 3px;
    background: #fff;
    opacity: 0.3;
}

.next-auto-accept:after {
    content: '';
    display: block;
    position: absolute;
    left: -3px;
    bottom: -9px;
    width: calc(100% + 6px);
    height: 3px;
    background: #007fa8;
    animation: loading 10s linear;
}

.vjs-control-bar .play-video-btn,
.youtube-play-btn,
.youtube-pause-btn,
.vjs-playing .vjs-control-bar .play-video-btn,
.vjs-paused .vjs-control-bar .play-video-btn,
.youtube-prev,
.vjs-control-bar .prev-video-btn,
.youtube-next,
.vjs-control-bar .next-video-btn,
.youtube-volume.on,
.youtube-volume.off,
.vjs-control-bar button.vjs-mute-control,
.vjs-control-bar button.vjs-menu-button-popup,
.youtube-subscaps,
.youtube-fullsize,
.youtube-fullsize.full,
.vjs-control-bar button.vjs-fullscreen-control {
    width: 24px;
    height: 24px;
    /*background-size: 40px 40px;*/
    vertical-align: top;
    text-indent: -9999px;
}

.vjs-control-bar .play-video-btn:hover,
.youtube-play-btn:hover,
.youtube-pause-btn:hover,
.vjs-playing .vjs-control-bar .play-video-btn:hover,
.vjs-paused .vjs-control-bar .play-video-btn:hover,
.youtube-prev:hover,
.vjs-control-bar .prev-video-btn:hover,
.youtube-next:hover,
.vjs-control-bar .next-video-btn:hover,
.youtube-volume.on:hover,
.youtube-volume.off:hover,
.vjs-control-bar button.vjs-mute-control:hover,
.vjs-control-bar button.vjs-menu-button-popup:hover,
.youtube-subscaps:hover,
.youtube-fullsize:hover,
.youtube-fullsize.full:hover,
.vjs-control-bar button.vjs-fullscreen-control:hover {
    /*background-color: rgba(0, 0, 0, 0.4);*/
    /*border-radius: 30px;*/
}

.ultra4k-tag {
    display: none;
}


.layer-pop {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    text-align: center;
    z-index: 9;
}

.layer-pop.open {
    display: block;
}

.layer-pop:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.layer-pop.live-end {
    position: absolute;
    z-index: 8
}

.layer-pop-box {
    display: inline-block;
    /* width: 560px; */
    vertical-align: middle;
}

.layer-pop.live-end .layer-pop-box {
    padding-bottom: 0 !important;
}

.layer-pop-box .layer-title {
    margin-bottom: 20px;
    line-height: 55px;
    font-size: 36px;
    color: #fff;
    font-weight: 500;
    letter-spacing: -1.08px;
}
.type-mini .layer-pop-box .layer-title{
    font-size:23px;
}
.layer-pop-box .layer-text {
    display: block;
    margin-bottom: 60px;
    font-size: 25px;
    line-height: 32px;
    color: #fff;
    font-family: 'HyundaiSansText', serif;
}

.layer-pop.live-end .layer-pop-box .layer-text {
    margin-bottom: 0;
}
.live-info-pop{
    position: absolute;
    left:136px;
    bottom:35px;
    padding:6px 12px;
    width:336px;
    background:rgba(0,0,0,0.8);
    border-radius: 10px;
    box-sizing: border-box;
    z-index: 99;
}
.live-info-pop .live-title{
    line-height:21px;
    font-size:13px;
    letter-spacing: -0.2px;
    color:#fff;
    font-weight:500;
}
.live-info-pop .live-text{
    font-size:12px;
    color:rgba(255,255,255,0.5);
    letter-spacing: -0.18px;
}
.youtube-thumbnail-box{
    position: absolute;
    left:0;
    top:0;
    z-index: 1;
    width:100%
}
.type-mini .youtube-thumbnail-box
{
    overflow: hidden;
    border-radius: 10px;
}
.youtube-thumbnail-box.type-hidden{
    display: none;
}
.youtube-thumbnail-box .youtube-play-btn{
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:50px;
    height:65px;
    background:url('../images/videoicon/icn-play.svg') no-repeat center center;
    background-size: 50px 65px; /* 220516 modify */
    /* 220516 delete
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    border-radius: 50%; */
}
/* 220516 add */
.type-mini .youtube-thumbnail-box .youtube-play-btn{
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:35px;
    height:40px;
    background:url('../images/videoicon/icn-play.svg') no-repeat center center;
    background-size: 35px 40px;
}
/* //220516 add */

.type-mini .youtube-player .miniplayer-close-btn{
    width:36px;
    height:36px;
    background:url("../images/videoicon/btn-miniplayer-close.svg") no-repeat center center;
    top: -44px;
    right: 0;
}
.youtube-thumbnail-box img{
    width:100%;
}
.detail-box .video__list-tit{
    display: block;
}

/* 220602 add : 전체화면 재생 위치 수정 */
.type-mini .vjs-fullscreen.vjs-playing .vjs-control-bar .vjs-play-control,
.type-mini .vjs-fullscreen.vjs-paused .vjs-control-bar .vjs-play-control,
.type-mini .vjs-fullscreen.stop-video .vjs-paused .vjs-control-bar .vjs-play-control {
    width: 50px;
    height: 60px;
    background-size: 50px 60px;
}
.type-mini .vjs-fullscreen .vjs-control-bar .ff-video-btn {
    width: 48px;
    height: 48px;
    background-size: 98%;
    margin-left:141px;
}
.type-mini .vjs-fullscreen .vjs-control-bar .pp-video-btn {
    width: 48px;
    height: 48px;
    background-size: 98%;
    margin-left:-190px;
}

.vjs-fullscreen .vjs-control-bar .vjs-playing,
.vjs-fullscreen .vjs-control-bar .vjs-paused,
.vjs-fullscreen .vjs-control-bar .vjs-play-control,
.vjs-fullscreen .vjs-control-bar .vjs-play-control.vjs-playing,
.vjs-fullscreen .vjs-control-bar .vjs-play-control.vjs-paused {
    top: -50vh;
    margin-top:0 !important;
    transform: translateY(70%);
    width: 50px;
    height: 60px;
    background-size: 50px 60px;
}
.vjs-fullscreen .vjs-control-bar .ff-video-btn,
.vjs-fullscreen .vjs-control-bar .pp-video-btn {
    top: -50vh;
    margin-top:0;
    transform: translateY(100%);
}
/* //220602 add */

@media screen and (min-width: 1400px){
    .video-wrap .youtube-player {
        padding-top: 0;
        max-height: 700px;
        height: 700px;
        background: #1f1f1f;
    }
    .type-mini .youtube-player{
        height:225px;
    }

    .video-wrap .youtube-player iframe {
        right: auto;
        bottom: auto;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 1244px;
    }
    .video-wrap.type-mini  .youtube-player iframe{
        width:100%;
    }
    .youtube-thumbnail-box{
        width:auto;
        height:100%;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
    }
    .youtube-thumbnail-box img{
        width:auto;
        height:100%;
    }
    .video-wrap{
        height:700px !important;
    }
    .hmg-video-play-wrap{
        height:100%;
    }
    .youtube-play, .youtube-pause,
    .vjs-control-bar .vjs-paused,
    .vjs-control-bar .vjs-play-control,
    .vjs-playing .vjs-control-bar .vjs-paused,
    .vjs-playing .vjs-control-bar .vjs-play-control{
        margin: -316px 0 0 -25px; /* 220516 modify */
    }
    .youtube-rewind, .vjs-control-bar .pp-video-btn{
        margin: -310px 0 0 -190px; /* 220602 modify */
    }
    .youtube-ff, .vjs-control-bar .ff-video-btn{
        margin: -310px 0 0 141px; /* 220602 modify */
    }
    
    /* 220524 add */
    .component-col2 .component-video .vjs-control-bar .vjs-play-control {
        margin:-23% 0 0 -25px;
    }
    /* //220524 add */

}
@media screen and (max-width: 1400px) {
    .vjs-text-track-display .vjs-text-track-cue {
        transform: translateY(-30px);
    }

    .vjs-text-track-display .vjs-text-track-cue > div {
        font-size: 24px !important;
        line-height: 1.3;
    }

}

@media screen and (max-width: 1023px) {
    .show-control-bar .vjs-text-track-cue {
        margin-top: -13%;
    }

    .youtube-control-box,
    .vjs-control-bar {
        padding: 0 30px 20px 30px;
    }

    .next-video-info {
        /*padding-left: 15px;*/
        /*width: 375px*/
    }

    .next-video-auto .next-video-wrap {
        padding: 0 30px;
    }

    .vjs-control-bar .vjs-play-control,
    .vjs-control-bar .vjs-paused,
    .vjs-control-bar .vjs-playing,
    .vjs-control-bar .next-video-btn,
    .vjs-control-bar .pp-video-btn,
    .vjs-control-bar .ff-video-btn,
    .vjs-control-bar .vjs-mute-control,
    .youtube-prev {
        display: inline-block;
    }

    .youtube-prev,
    .youtube-rewind,
    .youtube-ff,
    .youtube-next,
    .youtube-play-btn,
    .youtube-pause-btn,
    .youtube-volume.on,
    .youtube-volume.off,
    .youtube-fullsize,
    .youtube-fullsize.full,
    .youtube-subscaps {
        margin-right: 0;
        width: 60px;
        height: 60px;
    }

    .youtube-play,
    .youtube-pause,
    .youtube-stop {
        width: 60px;
        height: 60px;
        background-size: 100%;
        margin: -28% 0 0 -30px;
    }

    .upcoming-replaybtn {
        width: 60px;
        height: 60px;
        margin: -30px 0 0 -30px;
    }

    /* .vjs-control-bar .vjs-play-control.vjs-paused,
    .vjs-control-bar .vjs-play-control.vjs-playing,
    .vjs-subs-caps-button .vjs-subs-caps-button{width:60px;height:60px;margin: -28% 0 0 -30px;} */
    .vjs-control-bar .vjs-paused,
    .vjs-control-bar .vjs-play-control, .vjs-playing .vjs-control-bar .vjs-paused,
    .vjs-playing .vjs-control-bar .vjs-play-control {
        width: 50px; /* 220602 modify */
        height: 60px;
        margin: -28% 0 0 -25px;/* 220602 modify */
    }
    
    /* 220524 add */
    .component-col2 .component-video .vjs-control-bar .vjs-play-control {
        width:50px;
        height:60px;
        margin:-28% 0 0 -25px;
    }
    /* //220524 add */

    .configuratior-loop-video .vjs-control-bar .vjs-subs-caps-button,
    .confiquratior-video-box .vjs-control-bar .vjs-subs-caps-button {
        margin: 0 14px 0 0;
    }

    .youtube-subscaps,
    .vjs-subs-caps-button.vjs-control {
        right: 90px
    }

    .youtube-fullsize,
    .vjs-fullscreen-control {
        right: 30px;
        width: 60px;
        height: 60px;
    }

    /* .vjs-fullscreen-control{top:35px;}
    .live-player .vjs-fullscreen-control{top:0;} */
    .vjs-time-control {
        /*height: 60px;*/
        /*line-height: 60px;*/
    }

    .vjs-progress-control .vjs-slider-bar:after {
        display: block;
    }

    .vjs-progress-control .vjs-mouse-display:after {
        display: none
    }

    /* control center */
    .youtube-rewind,
    .vjs-control-bar .pp-video-btn {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 60px;
        height: 60px;
        margin: -28% 0 0 -150px;
    }

    .youtube-ff,
    .vjs-control-bar .ff-video-btn {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 60px;
        height: 60px;
        margin: -28% 0 0 90px;
    }
    .youtube-rewind:hover,
    .youtube-ff:hover,   
    .vjs-control-bar .ff-video-btn:hover,
    .vjs-control-bar .pp-video-btn:hover {
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: 60px;
    }

    /*  220516 button hover delete
    .vjs-control-bar .vjs-paused:hover
    .vjs-control-bar .vjs-playing:hover,
    */

    .vjs-control-bar .next-video-btn:hover .next-video-thumbnail {
        display: none;
    }

    .vjs-control-bar .prev-video-btn:hover .prev-video-thumbnail {
        display: none;
    }

    .youtube-control .next-video-thumbnail {
        display: none !important;
    }

    .youtube-control .prev-video-thumbnail {
        display: none !important;
    }

    .show-control .vjs-fullscreen .vjs-control-bar {
        opacity: 1;
    }

    /*.mobile-soundtab {*/
    /*  display: block;*/
    /*  position: absolute;*/
    /*  left: 15px;*/
    /*  top: 15px;*/
    /*  padding: 0 10px;*/
    /*  height: 40px;*/
    /*  border: 2px solid #007fa8;*/
    /*}*/
    .video-wrap{
        border-radius: 0 !important;
    }
    .mobile-soundtab.off {
        display: none;
    }

    .mobile-soundtab:before {
        content: '';
        display: inline-block;
        width: 30px;
        height: 38px;
        background: url("../images/videoicon/sound.svg") no-repeat center center;
        background-size: 100%;
        vertical-align: top;
    }

    .mobile-soundtab span {
        display: inline-block;
        line-height: 38px;
        font-weight: 500;
        color: #007fa8;
        font-size: 0;
        animation: soundtab 5s;
        word-break: break-all;
    }

    @keyframes soundtab {
        0% {
            opacity: 1;
            width: 110px;
            height: 38px;
            margin-left: 5px;
            font-size: 14px;
        }
        90% {
            opacity: 1;
            width: 110px;
            height: 38px;
            margin-left: 5px;
            font-size: 14px;
        }
        100% {
            opacity: 0;
            width: 0;
            height: 0;
            margin-left: 0;
            font-size: 0;
        }
    }

    .upcoming-next_vod .next_img {
        width: 240px;
    }

    .upcoming-next_vod .next_info {
        margin-left: 16px;
    }

    .upcoming-next_vod .next_info, .upcoming-next_vod .next_btnbox {
        margin-left: 16px;
    }

    .upcoming-next_vod .next_info .upcoming-next-title {
        font-size: 20px;
    }

    .upcoming-next_vod.type-outlink .next_info .upcoming-next-title {
        font-size: 25px;
    }

    .upcoming-next_vod .next_info .upcoming-next-description {
        margin: 0 0 30px 0;
        font-size: 30px;
    }

    .upcoming-next_vod.type-outlink .next_info .upcoming-next-description {
        height: 64px;
        font-size: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        word-wrap: break-word;
    }

    .upcoming-next_vod .basic-btn {
        font-size: 14px;
    }

    .layer-pop.type-next .upcoming-replaybtn {
        margin: -80px 0 0 -40px;
    }

    .vod-thumbnail .ultra4k-tag,
    .next-video-wrap .ultra4k-tag {
        width: 30px;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
    }

    /*.hmg-video-play-wrap .ultra4k-tag.show,*/
    /*.hmg-video-play-wrap.show-control .ultra4k-tag,*/
    /*.hmg-video-play-wrap.show-control-bar .ultra4k-tag*/
    .hmg-video-play-wrap .ultra4k-tag.show {
        right: 30px;
        top: 30px;
        width: 83px;
        height: 34px;
        line-height: 34px;
        font-size: 16px;
    }

    /* 220602 add : 전체화면 재생 위치 수정 */
    .vjs-fullscreen .vjs-control-bar .ff-video-btn,
    .vjs-fullscreen .vjs-control-bar .pp-video-btn {
        top: -50vh;
        margin-top:0;
        transform: translateY(70%);
    }
    /* //220602 add */
}

@media screen and (max-width: 767px) {
    .type-mini .youtube-player,
    .type-mini .vod-player,
    .type-mini .live-player {
        position: relative;
        left:auto;
        top:auto;
        bottom:auto;
        right:auto;
    }
    .type-mini .youtube-player{
        padding-top:56.25%;
    }
    .vjs-v7:active .vjs-thumbnail-holder {
        z-index: 10;
    }

    .youtube-big-btn,
    .vjs-big-play-button {
        display: none !important;
    }

    .youtube-control-box,
    .vjs-control-bar {
        padding: 0 20px 10px 20px;
    }

    .upcoming-replaybtn {
        width: 50px;
        height: 50px;
        margin: -25px 0 0 -25px;
    }

    .layer-pop.type-next .upcoming-replaybtn {
        margin: -90px 0 0 -25px;
    }

    .youtube-pause,
    .youtube-play,
    .youtube-stop,
    .vjs-control-bar .vjs-play-control,
    .vjs-control-bar .vjs-play-control.vjs-playing,
    .vjs-control-bar .vjs-play-control.vjs-paused,
    .vjs-control-bar .vjs-playing,
    .vjs-control-bar .vjs-paused {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 35px !important; /* 220602 modify */
        height: 40px !important;/* 220602 modify */
        margin: -26% 0 0 -17px;/* 220516 modify */
        background-size: 35px 40px !important;/* 220602 modify */
    }

    /* 220524 add */
    .component-col2 .component-video .vjs-control-bar .vjs-play-control {
        width:35px;
        height:40px;
        margin:-26% 0 0 -17px;
    }
    /* //220524 add */
    
    .type-mini .vjs-playing .vjs-control-bar .vjs-play-control,
    .type-mini .vjs-paused .vjs-control-bar .vjs-play-control {
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -26% 0 0 -17px;
        width: 35px;/* 220516 modify */
        height: 40px;/* 220516 modify */
        background-size: 35px 40px;/* 220516 modify */
    }
    .stop-video .vjs-paused .vjs-control-bar .vjs-play-control{
        background-size: 35px 40px; /* 220516 modify */
    }
    .youtube-prev,
    .vjs-control-bar .prev-video-btn {
        width: 40px;
        height: 40px;
        background: url('../images/videoicon/ic-next.svg') no-repeat center center;
        background-size: 30px 30px;
        transform: rotate(180deg);
    }

    .youtube-next,
    .vjs-control-bar .next-video-btn {
        width: 40px;
        height: 40px;
        background-size: 30px 30px;
    }

    .vjs-control-bar .play-video-btn {
        width: 40px;
        height: 40px;
        background-size: 30px 30px;
        background-position: 8px center;
    }

    .youtube-play-btn,
    .vjs-paused .vjs-control-bar .play-video-btn {
        margin-right: 0;
        width: 40px;
        height: 40px;
        background-size: 30px 30px;
        background-position: center;
    }


    .youtube-pause-btn,
    .vjs-control-bar .play-video-btn,
    .vjs-playing .vjs-control-bar .play-video-btn,
    .vjs-paused .vjs-control-bar .play-video-btn,
    .vjs-control-bar .prev-video-btn,
    .vjs-control-bar .next-video-btn,
    .vjs-control-bar button.vjs-mute-control,
    .vjs-control-bar button.vjs-menu-button-popup,
    .vjs-control-bar button.vjs-fullscreen-control {
        width: 24px;
        height: 24px;
        background-size: 24px 24px;
        margin-right: 0;
    }


    .youtube-volume.on,
    .youtube-volume.off {
        display: none !important;
    }

    .vjs-control-bar .vjs-mute-control {
        display: none;
    }

    .configuratior-loop-video .vjs-control-bar .vjs-mute-control,
    .confiquratior-video-box .vjs-control-bar .vjs-mute-control,
    .configuratior-loop-video .vjs-control-bar .vjs-subs-caps-button,
    .confiquratior-video-box .vjs-control-bar .vjs-subs-caps-button,
    .configuratior-loop-video .vjs-fullscreen-control,
    .confiquratior-video-box .vjs-fullscreen-control {
        display: inline-block;
        width: 30px;
        height: 30px;
        background-size: 100%;
    }

    .confiquratior-video-box .vjs-control-bar .vjs-subs-caps-button {
        margin: 0 14px 0 0;
    }

    .youtube-rewind,
    .youtube-ff,
    .vjs-control-bar .pp-video-btn,
    .vjs-control-bar .ff-video-btn {
        margin-right: 10px;
        width: 2.083em;
        height: 2.083em;
        background-size: 100%;
    }

    /* control center */
    .youtube-rewind,
    .vjs-control-bar .pp-video-btn {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 24px;
        height: 24px;
        margin: -24% 0 0 -89px; /* 220602 modify */
    }

    .youtube-ff,
    .vjs-control-bar .ff-video-btn {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 24px;
        height: 24px;
        margin: -24% 0 0 65px;/* 220602 modify */
    }

    .youtube-rewind:hover,
    .youtube-ff:hover,
    .vjs-control-bar .pp-video-btn:hover,
    .vjs-control-bar .ff-video-btn:hover {
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: 30px;
    }

    .vjs-time-control {
        height: 24px;
        line-height: 24px;
        font-size: 12px;
    }

    .youtube-subscaps,
    .vjs-subs-caps-button.vjs-control {
        right: 60px;
    }

    .youtube-subscaps,
    .vjs-subs-caps-button .vjs-subs-caps-button {
        width: 40px;
        height: 40px;
        background-size: 30px;
    }

    .youtube-fullsize,
    .youtube-fullsize.full,
    .vjs-fullscreen-control {
        right: 20px;
        width: 40px;
        height: 40px;
        background-size: 30px;
    }

    .youtube-fullsize.full,
    .vjs-fullscreen .vjs-fullscreen-control {
        background: url('../images/videoicon/ic-mini.svg') no-repeat center center;
        width: 40px;
        height: 40px;
        background-size: 30px;
    }

    .vjs-subs-caps-button .vjs-menu {
        position: fixed;
        top:51vw;
        left: auto;
        right:12px;
        bottom: auto;
        z-index: 3;
    }

    .new-vis-style .vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button .caption-closebtn {
        padding: 0 23px;
        width: 100%;
        height: 60px;
        color: #fff;
        font-size: 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        text-align: left;
        position: relative;
        z-index: 11;
    }

    .vjs-progress-control:hover .vjs-slider-bar:after {
        display: block;
    }

    .hmg-video-play-wrap.stop-video .next-video-auto {
        z-index: 11;
        background: #141414;
    }

    .hmg-video-play-wrap.stop-video.poster .next-video-auto {
        background: rgba(0, 0, 0, 0.75);
    }

    .next-video-auto .next-video-wrap {
        padding: 0 1.250em;
    }

    .next-video-auto .next-video-wrap {
        top:auto;
        left:auto;
        bottom: 20px;
        transform: translate(0,0);
        width:100%;
    }

    .next-video-auto .next-video-wrap .bottom-box {
        display: inline-block;
        margin-bottom: 16px;
        padding-top:22.25%;
        width:40%;
        font-size: 0;
    }

    .next-video-auto .next-video-wrap .top-box {
        margin-bottom: 16px;
        font-size: 14px;
    }

    .next-video-auto img {
        width: 100%;
    }

    .next-video-info {
        display: inline-block;
        padding-left: 10px;
        width: 50%;
        box-sizing: border-box;
        vertical-align: top;
    }

    .next-video-description {
        display: none;
    }

    .next-video-info .next-video-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        font-size:14px;
        line-height:24px;
        white-space: normal;
        max-height:48px;
    }

    .next-video-info .next-video-name {
        display: block;
        margin-bottom: 0.417em;
        font-size: 1.083em;
    }

    .next-video-info .next-video-date,
    .next-video-info .next-video-time {
        font-size: 1.083em;
    }

    .next-auto-accept {
        padding: 0.833em 0;
        width: calc(50% - 0.417em);
        height: 3.333em;
        font-size: 14px;
        background: none;
        border-color: #007fa8;
    }

    .top-box .basic-btn.type-outlink {
        width: calc(50% - 0.417em);
        height: 3.333em;
        background: none;
    }

    .next-auto-cancel {
        margin-left: 10px;
        width: calc(50% - 0.417em);
        height: 3.333em;
        line-height: 3.333em;
        font-size: 14px;
        border: 2px solid rgba(255, 255, 255, 0.5)
    }


    .vjs-subs-caps-button .vjs-menu .subs-title {
        position: relative;
        z-index: 11;
    }

    .vjs-subs-caps-button .vjs-menu .vjs-menu-content .vjs-menu-item-text {
        height: 30px;
        line-height: 30px;
        font-size: 15px;
    }

    .vjs-subs-caps-button .vjs-menu .vjs-menu-content .vjs-menu-item-text {
        height: 30px;
        line-height: 30px;
        font-size: 15px;
    }


    /*.caption_off .vjs-menu-item-text {*/
    /*  height: 0 !important;*/
    /*  line-height: 0 !important;*/
    /*  font-size: 0 !important;*/
    /*}*/

    .vjs-text-track-display .vjs-text-track-cue {
        transform: translateY(-15px);
    }

    .vjs-text-track-display .vjs-text-track-cue > div {
        display: inline-block !important;
        font-size: 12px !important;
        line-height: 1.3;
    }

    @keyframes subcap {
        0% {
            bottom: -100%;
        }
        100% {
            bottom: 0;
        }
    }

    .hmg-video-play-wrap .ultra4k-tag.show {
        right: 15px;
        top: 15px;
        width: 72px;
        height: 27px;
        line-height: 27px;
        font-size: 14px;
    }

    .basic-btn.type-outlink:before {
        left: 15px;
        width: 24px;
        height: 24px;
    }

    .next_vod.type-outlink {
        display: block;
    }

    .next_vod.type-outlink .next_img {
        display: inline-block;
        vertical-align: top;
    }

    .next_vod.type-outlink .next_info {
        display: inline-block;
    }

    .next_vod.type-outlink .next_btnbox.type-in {
        display: none;
    }

    .next_vod.type-outlink .next_btnbox.type-out {
        display: block;
        margin-top: 10px;
    }

    .next_vod.type-outlink .next_btnbox.type-out.type-multibtn {
        display: flex;
    }

    .next_vod.type-outlink .next_btnbox.type-out .basic-btn {
        padding: 0;
    }

    .next_vod.type-outlink .next_btnbox.type-out .basic-btn.type-outlink:before {
        position: static;
        display: inline-block;
        margin-right: 5px;
        padding: 0;
        vertical-align: middle;
        transform: none;
    }

    .horizon .next_vod.type-outlink .next_btnbox.type-out .basic-btn {
        max-width: 145px;
    }
    .layer-pop-box .layer-title{
        font-size:23px;
    }
    .live-info-pop{
        left:10px;
        width:80%;
    }

    .hmg-video-play-wrap .hmg-video,
    .hmg-video-play-wrap .hmg-video video{
        border-radius: 0;
    }
    
    /* 220524 add */
    .component-video .hmg-video-play-wrap .hmg-video,
    .component-video .hmg-video-play-wrap .hmg-video video {
        border-radius: 0;
    }
    /* //220524 add */
    
    .youtube-thumbnail-box .youtube-play-btn{
        width: 35px; /* 220516 modify */
        height: 40px; /* 220516 modify */
        background-size: 35px 40px; /* 220516 modify */
    }

    /* 220602 add : 전체화면 재생 위치 수정 */
    .vjs-fullscreen .vjs-control-bar .ff-video-btn,
    .vjs-fullscreen .vjs-control-bar .pp-video-btn {
        top: -50vh;
        margin-top:0;
        transform: translateY(135%);
    }
    /* //220602 add */
}


@media (orientation: portrait) and (max-width: 767px) {
    .step-all.vertical .timestamp-wrap {
        right: 95px;
        bottom: 20px;
        width: 30px;
        height: 30px;
    }

    .step-all.vertical .timestamp-wrap.type-nosub {
        right: 50px;
    }

    .configuratior-loop-video .vjs-control-bar .vjs-play-control {
        position: relative;
        left: auto;
        top: auto;
        margin: 0;
        width: 30px;
        height: 30px;
    }

    .configuratior-loop-video .btn_replay {
        margin-left: 20px;
        width: 30px;
        height: 30px;
    }
}

@media (orientation: portrait) {
    .youtube_wrap.open .youtube-play,
    .youtube_wrap.open .youtube-pause,
    .vjs-fullscreen .vjs-control-bar .vjs-paused,
    .vjs-fullscreen .vjs-control-bar .vjs-play-control,
    .vjs-fullscreen .vjs-playing .vjs-control-bar .vjs-paused,
    .vjs-fullscreen .vjs-playing .vjs-control-bar .vjs-play-control {
        position: absolute;
        left: 50%;
        top: -50vh;
        margin-top: 0;
        transform: translateY(70%);
    }

    .youtube_wrap.open .youtube-rewind,
    .vjs-fullscreen .vjs-control-bar .pp-video-btn {
        position: absolute;
        left: 50%;
        top: -50vh;
        margin-top: 0;
        transform: translateY(70%);
    }

    .youtube_wrap.open .youtube-ff,
    .vjs-fullscreen .vjs-control-bar .ff-video-btn {
        position: absolute;
        left: 50%;
        top: -50vh;
        margin-top: 0;
        transform: translateY(70%);
    }

}

/* 220602 add : 위치 이동 */
@media (orientation: portrait) and (max-width: 767px) {
    .youtube_wrap.open .youtube-pause,
    .youtube_wrap.open .youtube-play,
    .youtube_wrap.open .youtube-stop,
    .vjs-fullscreen .vjs-control-bar .vjs-play-control,
    .vjs-fullscreen .vjs-control-bar .vjs-play-control.vjs-playing,
    .vjs-fullscreen .vjs-control-bar .vjs-play-control.vjs-paused,
    .vjs-fullscreen .vjs-control-bar .vjs-playing,
    .vjs-fullscreen .vjs-control-bar .vjs-paused {
        position: absolute;
        left: 50%;
        top: -50vh;
        margin-top: 0;
        transform: translateY(70%);
    }

    .youtube_wrap.open .youtube-rewind,
    .vjs-fullscreen .vjs-control-bar .pp-video-btn {
        position: absolute;
        left: 50%;
        top: -48vh;
        margin-top: 0;
        transform: translateY(70%);
    }

    .youtube_wrap.open .youtube-ff,
    .vjs-fullscreen .vjs-control-bar .ff-video-btn {
        position: absolute;
        left: 50%;
        top: -48vh;
        margin-top: 0;
        transform: translateY(70%);
    }
}
/* //220602 add */

@media (hover: none) {
    .vjs-control-bar .play-video-btn:hover,
    .youtube-play-btn:hover,
    .youtube-pause-btn:hover,
    .vjs-playing .vjs-control-bar .play-video-btn:hover,
    .vjs-paused .vjs-control-bar .play-video-btn:hover,
    .youtube-prev:hover,
    .vjs-control-bar .prev-video-btn:hover,
    .youtube-next:hover,
    .vjs-control-bar .next-video-btn:hover,
    .youtube-volume.on:hover,
    .youtube-volume.off:hover,
    .vjs-control-bar button.vjs-mute-control:hover,
    .vjs-control-bar button.vjs-menu-button-popup:hover,
    .youtube-subscaps:hover,
    .youtube-fullsize:hover,
    .youtube-fullsize.full:hover,
    .vjs-control-bar button.vjs-fullscreen-control:hover {
        background-color: transparent;
    }
}

/* 추가영역 21.11.24 박민철 */

/* 플레이어 이전 영상 버튼 */
.prev-video-thumbnail img {
    float: left;
    margin-right: 8px;
    width: 142px;
    height: 80px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

/* 플레이어 바 색상 -> white */
.vjs-progress-control .vjs-slider-bar {
    height: 3px;
    background: #ffffff;
    position: relative;
}
.vjs-slider-bar:after {
    content: '';
    display: none;
    position: absolute;
    right: -14px;
    top: -5px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-radius: 50%;
}
.vjs-progress-control:hover .vjs-mouse-display:after {
    content: '';
    display: block;
    position: absolute;
    right: -8px;
    top: -5px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-radius: 50%;
}
.vjs-control-bar .vjs-volume-level {
    height: 3px;
    background: #ffffff;
    position: relative;
}
.vjs-control-bar .vjs-volume-level:before {
    content: '';
    display: block;
    position: absolute;
    right: -7px;
    top: -6px;
    width: 15px;
    height: 15px;
    background: #ffffff;
    border-radius: 50%;
}