/*************************************************
프로젝트명 : 연합뉴스 홈페이지 (2024)
commnet : videojs 8.9.0 비디오, 오디오 스킨
*************************************************/

/* (임시 QA-R서버) */
@import url('video-8.9.0.css');

:root{
	/* ---- ##vid-skin11-****$$$ ---- */
	--vid-skin11-play01:url(../image/skin11_video_play01.svg); /* 재생 (.vjs-play-control) */
	--vid-skin11-play02:url(../image/skin11_video_play02.svg); /* 재생 (.vjs-big-play-button) */
	--vid-skin11-play03:url(../image/ico_video_play03.svg); /* 재생 (.btn-type030-toggle) */
	--vid-skin11-stop01:url(../image/skin11_video_stop01.svg); /* 정지 */
	--vid-skin11-stop02:url(../image/skin11_video_stop02.svg); /* 정지 */
	--vid-skin11-stop03:url(../image/skin11_video_stop02.svg); /* 정지 (.btn-type030-toggle) */
	--vid-skin11-prev01:url(../image/skin11_video_prev01.svg); /* 이전 */
	--vid-skin11-next01:url(../image/skin11_video_next01.svg); /* 다음 */
	--vid-skin11-fs01:url(../image/skin11_video_fullscreen01.svg); /* 풀스크린 ON */
	--vid-skin11-fs02:url(../image/skin11_video_fullscreen02.svg); /* 풀스크린 OFF */
	--vid-skin11-pip01:url(../image/skin11_video_pip01.svg); /* PIP */
	--vid-skin11-close01:url(../image/ico_close01.svg); /* 닫기 */

	/* --vid-skin11, --audio-skin11 공통 사용 */
	/* 무음 : 01,02 는 크기가 다름  */
	--vid-skin11-mute01:url(../image/skin11_video_mute01.svg);
	--vid-skin11-mute02:url(../image/skin11_video_mute02.svg);
	/* 사운드 1~5 : 01,02 는 크기가 다름  */
	--vid-skin11-vol01:url(../image/skin11_video_volume01.svg);
	--vid-skin11-vol02:url(../image/skin11_video_volume02.svg);

	/* ---- ##audio-skin11-****$$$ ---- */
	/* audio-skin1$ 공통 (audio-skin11,12)
	 - skin11, skin12는 개편시기에 작업되어 공통으로 사용되는 변수명도 있음 */
	--audio-skin11-play01:url(../image/skin11_audio_play01.svg); /* 재생 */
	--audio-skin11-play02:url(../image/skin11_audio_play02.svg); /* 재생 */
	--audio-skin11-stop01:url(../image/skin11_audio_stop01.svg); /* 정지 */
	--audio-skin11-stop02:url(../image/skin11_audio_stop02.svg); /* 정지 */
	--audio-skin11-stop03:url(../image/skin11_audio_stop03.svg); /* 정지 */
	--audio-skin11-playrate01:url(../image/skin11_audio_playrate01.svg); /* 재생 속도 */

	--audio-skin12-play01:url(../image/skin12_audio_play01.svg); /* 재생 */
	--audio-skin12-menu01:url(../image/skin12_audio_menu01.svg); /* 메뉴 */
	--audio-skin12-prev01:url(../image/skin12_audio_prev01.svg); /* 이전 */
	--audio-skin12-next01:url(../image/skin12_audio_next01.svg); /* 다음 */
}

/* =============== ####공통 ======================== */
[class*='vjs-'] [class*='vjs-']button{border:none;background-color:transparent;}

/* [대체텍스트] */
[class*='vid-skin'] .vjs-control-text,
[class*='vid-skin'] .vjs-volume-tooltip,
[class*='vid-skin'] .vjs-playback-rate-value,
[class*='audio-skin'] .vjs-control-text,
[class*='audio-skin'] .vjs-volume-tooltip,
[class*='audio-skin'] .vjs-playback-rate-value{overflow:hidden;display:inline-block;z-index:-1;width:1px;height:1px;border:none;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);}

/* =============== ####비디오 스킨 ======================== */
/* .vid-skin0$ 는 ASIS 서비스에 사용 중으로 .vid-skin1$ 부터 사용한다. */

/* ---- ##vid-skin11 : [본문] 영상 소재 ---- */
.vid-skin11{font-family:'Pretendard','Malgun Gothic','맑은 고딕',Gulim,'굴림',AppleSDGothicNeo-Regular,sans-serif;}
.vid-skin11.vjs-user-active.vjs-playing .btns-wrap12{display:inline-flex;}
.vid-skin11.vjs-user-inactive .btns-wrap12,
.vid-skin11 .btns-wrap12{display:none;}
.vid-skin11.vjs-has-started.vjs-paused .btns-wrap12{display:inline-flex;}

/* [포스터] | Poster
 * 영상 종료 후 포스터를 다시 노출할려면 .vjs-poster 를 사용해야 한다. */
.vid-skin11 .vjs-poster img{object-fit:cover;}
/* 포스터, 재생 버튼 재노출 : 영상 종료 */
.vid-skin11.vjs-has-started.vjs-paused.vjs-ended .vjs-poster,
.vid-skin11.vjs-has-started.vjs-paused.vjs-ended .vjs-big-play-button{display:block;}

/* [큰 재생 버튼] | Big Play Button */
.vid-skin11 .vjs-big-play-button{opacity:1;position:absolute;top:50%;left:50%;z-index:11;width:80px;height:80px;margin:0;border-radius:80px;background-color:rgba(255,255,255,0.7);text-align:center;vertical-align:middle;transform:translate(-50%, -50%);box-shadow:none;
transition:all 0.4s;cursor:pointer;}
.vid-skin11 .vjs-big-play-button:before{content:'';display:block;position:absolute;top:50%;left:50%;width:48px;height:48px;background-image:var(--vid-skin11-play02);transform:translate(-50%, -50%);}
.vid-skin11.vjs-controls-disabled .vjs-big-play-button,
.vid-skin11.vjs-has-started .vjs-big-play-button,
.vid-skin11.vjs-using-native-controls .vjs-big-play-button,
.vid-skin11.vjs-error .vjs-big-play-button{display:none;}
.vid-skin11 .vjs-big-play-button .vjs-icon-placeholder:before{display:none;}
/* hover/focus */
.vid-skin11:hover .vjs-big-play-button,
.vid-skin11 .vjs-big-play-button:focus{background-color:rgba(255,255,255,0.9);box-shadow:none;transition:all 0s;}

/* [로딩 아이콘] | 스피너 */
.vid-skin11 .vjs-loading-spinner{visibility:hidden;display:none;position:absolute;top:50%;left:50%;z-index:255;box-sizing: border-box;width:48px;height:48px;margin-left:-24px;border:4px solid rgba(255,255,255,0.2);border-radius:50%;border-bottom-color:#fff;
transform:translate(-50%, -50%);
animation:vjs-rotation01 1s linear infinite;}
.vid-skin11 .vjs-loading-spinner:before,
.vid-skin11 .vjs-loading-spinner:after{display:none !important;}

/* [타임라인 바] | Progress Bars */
.vid-skin11 .vjs-progress-control{overflow:hidden;position:absolute;top:-4px;left:0;box-sizing:border-box;width:calc(100% - 40px);height:4px;margin:0 20px;background-color:rgba(255,255,255,.1);font-size:0.3em;
transition:all 0.4s;}
.vid-skin11 .vjs-progress-control .vjs-progress-holder{height:4px;margin:0;}
.vid-skin11 .vjs-play-progress{position:absolute;top:0;left:0;height:4px;background:#fff;}
.vid-skin11 .vjs-load-progress,
.vid-skin11 .vjs-slider{height:4px;background-color: rgba(255,255,255,.3) !important;}
.vid-skin11 .vjs-control-text-loaded-percentage,
.vid-skin11 .vjs-progress-control:hover .vjs-mouse-display,
.vid-skin11 .vjs-time-tooltip,
.vid-skin11 .vjs-play-progress:before,
.vid-skin11 .vjs-load-progress div{display:none !important;}

/* [타임라인 핸들러] | Progress */
.vid-skin11 .vjs-seek-handle{width:4px;height:4px;}
.vid-skin11 .vjs-seek-handle:before{content:"";display:none;position:absolute;top:0;width:4px;height:4px;background:#039ff8;font-size:0;line-height:0;color:#039ff8;text-align:center;transform:none;text-shadow:none;}

/* [컨트롤 바] | Control Bars */
.vid-skin11 .vjs-control-bar{visibility:hidden;opacity:0;display:none;position:absolute;left:0;right:0;bottom:0;z-index:10;height:40px;background-color:transparent;color:#fff;}
.vid-skin11 .vjs-control-bar:before{content:'';opacity:0;display:block;position:absolute;left:0;bottom:0;z-index:1;width:100%;height:100px;background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 50%, #000 100%);transition:opacity 0.4s;}
.vid-skin11:before{content:'';opacity:0;display:block;position:absolute;left:0;bottom:0;z-index:1;width:100%;height:100%;background-color:rgba(0,0,0,0.4);transition:opacity 0.4s;}
.vid-skin11 .vjs-control-bar>.vjs-control{z-index:2;}
.vid-skin11.vjs-user-inactive .vjs-control-bar{display:none;}
.vid-skin11.vjs-user-active .vjs-control-bar{display:flex;}
.vid-skin11.vjs-has-started.vjs-paused .vjs-control-bar{display:flex;}
.vid-skin11.vjs-has-started.vjs-paused .vjs-control-bar:before{opacity:1;}
.vid-skin11.vjs-has-started.vjs-ended .vjs-control-bar{display:none;}
.vid-skin11.vjs-has-started.vjs-paused:before{opacity:1;}
.vid-skin11.vjs-has-started.vjs-user-active:before{opacity:1;}
/* 컨트롤 노출 : 영생 재생, 일시 정지 상태 */
.vid-skin11.vjs-playing::after{content:'';visibility:visible;opacity:1;transition:all 0.4s;}
.vid-skin11.vjs-has-started.vjs-playing .vjs-control-bar,
.vid-skin11.vjs-has-started.vjs-paused .vjs-control-bar{visibility:visible;opacity:1;transition:visibility 1s,opacity 1s;}

/* [컨트롤 > 재생/정지 버튼] | Play/Pause */
.vid-skin11 .vjs-icon-pause:before,
.vid-skin11 .vjs-play-control.vjs-playing .vjs-icon-placeholder:before,
.vid-skin11 .vjs-icon-play:before,
.vid-skin11 .vjs-play-control .vjs-icon-placeholder:before{display:none;}
.vid-skin11 .vjs-play-control{width:40px;height:40px;margin-left:12px;background-image:var(--vid-skin11-play01);background-size:32px auto;background-position:center center;background-repeat:no-repeat;cursor:pointer;}
.vid-skin11 .vjs-play-control::before{content:'';display:none;position:absolute;top:10px;left:9px;width:17px;height:17px;font-size:17px;line-height:17px;text-align:center;text-shadow:none;}
.vid-skin11 .vjs-play-control.vjs-playing{background-image:var(--vid-skin11-stop01);background-position:center center;}
.vid-skin11 .vjs-play-control.vjs-playing::before{content:'';display:none;position:absolute;top:10px;left:9px;width:17px;height:17px;font-size:17px;line-height:17px;text-align:center;text-shadow:none;}

/* [컨트롤 > 재생 시간] */
.vid-skin11 .vjs-time-control{display:flex;align-items:center;font-size:1em;line-height:100%;}
/* 시간 정보 영역
 - 진행 시간 : .vjs-current-time .vjs-current-time-display
 - 총 재생시간 : .vjs-duration .vjs-duration-display
 - 남은 시간 : .vjs-remaining-time .vjs-remaining-time-display */
.vid-skin11 .vjs-current-time,
.vid-skin11 .vjs-duration{display:flex;flex-shrink:0;align-items:center;min-width:40px;padding:0;font-size:13px;}
.vid-skin11 .vjs-current-time{padding-left:20px;}
.vid-skin11 .vjs-duration{padding-right:20px;}
.vid-skin11 .vjs-duration-display,
.vid-skin11 .vjs-current-time-display{display:flex;align-items:center;height:100%;font-size:13px;font-weight:500;}
.vid-skin11 .vjs-duration-display{opacity:0.8;}
.vid-skin11 .vjs-current-time:after,
.vid-skin11 .vjs-remaining-time{display:none;}
/* 구분선 */
.vid-skin11 .vjs-time-divider{display:block;min-width:0;padding:0 4px;font-size:12px;color:#fff;}
.vid-skin11 .vjs-time-divider div{height:100%;}
.vid-skin11 .vjs-time-divider span{opacity:0.8;display:flex;align-items:center;position:relative;top:-1px;height:100%;margin:0 5px;font-size:10px;font-weight:500;}

/* [볼륨 패널 > 볼륨 바] */
.vid-skin11 .vjs-volume-control .vjs-slider{background-color:rgba(255,255,255,.2);}
.vid-skin11 .vjs-volume-control .vjs-slider .vjs-volume-tooltip{display:none;}

/* [볼륨 패널 > 볼륨 바 > 볼륨 단계] */
.vid-skin11 .vjs-volume-level{position:absolute;top:0;left:0;width:100%;height:4px;background-color:#fff;}
/* 무음일 때 '볼륨 바' 진행을 0 으로 만든다 */
.vid-skin11 .vjs-vol-0 + .vjs-volume-control .vjs-volume-level{opacity:0;width:0 !important;}

/* [볼륨 패널 > 볼륨 버튼] */
.vid-skin11 .vjs-icon-volume-high:before,
.vid-skin11 .vjs-mute-control .vjs-icon-placeholder:before,
.vid-skin11 .vjs-icon-volume-mute:before,
.vid-skin11 .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before{display:none;}

/* 무음 토글 */
.vid-skin11 .vjs-mute-control{width:32px;height:100%;background-image:var(--vid-skin11-vol01);background-position:50% 50%;background-repeat:no-repeat;cursor:pointer;}
.vid-skin11 .vjs-mute-control.vjs-vol-0{background-image:var(--vid-skin11-mute01);}
.vid-skin11 .vjs-mute-control:before,
.vid-skin11 .vjs-volume-menu-button:before{content:"";display:none;position:absolute;top:14px;left:17px;width:18px;height:14px;}

/* [볼륨 패널] */
.vid-skin11 .vjs-volume-panel{display:flex;align-items:center;width:88px !important;height:100%;margin-right:12px;}
.vid-skin11 .vjs-volume-panel .vjs-volume-control{width:calc(100% - 32px);height:4px;margin-left:0;}
.vid-skin11 .vjs-volume-panel .vjs-volume-control .vjs-volume-bar{position:relative;width:100%;height:4px;margin:0;background-color:rgba(255,255,255,0.16);}
.vid-skin11 .vjs-volume-panel .vjs-volume-control .vjs-volume-level{position:relative;left:auto;bottom:auto;height:4px;background-color:#fff;}
.vid-skin11 .vjs-volume-panel .vjs-volume-control .vjs-volume-level:before{content:'';display:block;position:absolute;top:50%;right:-6px;width:12px;height:12px;border-radius:12px;background-color:#fff;transform:translateY(-50%);}
.vid-skin11 .vjs-volume-panel .vjs-volume-control .vjs-volume-bar .vjs-volume-tooltip{overflow:hidden;opacity:0;position:absolute;top:0;left:0;width:1px;height:1px;font-size:1px;}

.vid-skin11 .vjs-volume-panel .vjs-volume-horizontal{visibility:visible;opacity:1;display:block;}
.vid-skin11 .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,
.vid-skin11 .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
.vid-skin11 .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal,
.vid-skin11 .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal,
.vid-skin11 .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-horizontal,
.vid-skin11 .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal{display:flex;align-items:center;width:calc(100% - 32px);height:auto;margin:0;transition:none;}

.vid-skin11 .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,
.vid-skin11 .vjs-volume-panel.vjs-volume-panel-horizontal:active,
.vid-skin11 .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active{width:92px;transition:none;}

/* [배속 버튼 | Playback Rate ] */
.vid-skin11 .vjs-playback-rate{display:flex;justify-content:flex-end;position:absolute;top:0;right:100px;width:60px;height:40px;}
.vid-skin11 .vjs-playback-rate .vjs-playback-rate-value{display:flex;justify-content:flex-end;align-items:center;z-index:1;width:100%;height:100%;font-size:18px;clip:auto;clip-path:none;font-weight:500;letter-spacing:1.8px;text-align:right;}
/* 배속 리스트 */
.vid-skin11 .vjs-menu-button-popup .vjs-menu .vjs-menu-content{z-index:10;width:100px;max-height:356px;border-radius:4px;background-color:#fff;box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.20);}
.vid-skin11 .vjs-menu li{padding:0;font-size:15px;line-height:100%;font-weight:400;}
.vid-skin11 .vjs-menu li.vjs-menu-item:focus,
.vid-skin11 .vjs-menu li.vjs-menu-item:hover{background-color:transparent;}/* hover 시 배경 컬러 셋팅 */
.vid-skin11 .vjs-menu .vjs-menu-item-text{padding:10px;color:#444;}

/* [PIP 버튼 | Picture-in-Picture] */
.vid-skin11 .vjs-picture-in-picture-control{overflow:hidden;position:absolute;top:0;right:56px;width:32px;height:40px;background-image:var(--vid-skin11-pip01);background-size:24px auto;background-position:center center;background-repeat:no-repeat;}
.vid-skin11 .vjs-icon-picture-in-picture-enter:before,
.vid-skin11 .vjs-picture-in-picture-control .vjs-icon-placeholder:before,
.vid-skin11 .vjs-icon-picture-in-picture-exit:before,
.vid-skin11.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder:before{display:none;}

/* [확대/축소 버튼 | Fullscreen] */
.vid-skin11 .vjs-icon-fullscreen-enter:before,
.vid-skin11 .vjs-fullscreen-control .vjs-icon-placeholder:before{display:none;}
.vid-skin11 .vjs-fullscreen-control{display:flex;align-items:center;position:absolute;top:0;right:0;width:40px;height:100%;margin-right:12px;background-image:var(--vid-skin11-fs01);background-size:24px 24px;background-position:center center;background-repeat:no-repeat;cursor:pointer;}
.vid-skin11 .vjs-fullscreen-control:before{content:"";display:none;position:absolute;top:14px;left:17px;width:11px;height:11px;background:none;}
.vid-skin11.vjs-fullscreen .vjs-fullscreen-control{background-image:var(--vid-skin11-fs02);}
.vid-skin11.vjs-fullscreen .vjs-fullscreen-control:before{content:"";display:none;position:absolute;top:14px;left:17px;width:11px;height:11px;background:none;}

/* [볼륨 : 예외처리] */
html.safari .video-js .vjs-volume-control{display:none !important;}

/* =============== ####video-type$$ ======================== */
/* ---- ##video-type01 > vid-skin11 ---- */
/* (게시판) 영상 플레이어 */
.video-type01{position:relative;}
.video-type01 .video-con{overflow:hidden;display:block;position:relative;width:100%;height:0;padding-top:56.25%;}
.video-type01 .video-con>div.video-js{position:absolute;top:0;left:0;width:100%;height:100%;}
.video-type01 .btns-wrap12{display:none;position:absolute;top:50%;left:50%;z-index:11;width:auto;margin-top:-56px;transform:translate(-50%,50%);}


/* =============== ####오디오 스킨 ======================== */
/* .audio-skin0$ 는 ASIS 서비스에 사용 중으로 .audio-skin1$ 부터 사용한다. */

/* ---- ##audio-skin11 : [본문] 오디오 소재 ---- */
.audio-skin11{width:100%;height:100%;background-color:transparent;font-family:'Pretendard','Malgun Gothic','맑은 고딕',Gulim,'굴림',AppleSDGothicNeo-Regular,sans-serif;}
.audio-skin11 .vjs-tech{display:flex;align-items:center;flex-wrap:nowrap;box-sizing:border-box;width:100%;height:60px;padding-right:10px;}
.audio-skin11 .vjs-big-play-button{display:none;}

/* [타임라인 바] | Progress Bars */
.audio-skin11 .vjs-progress-control{position:relative;width:100%;height:24px;}
.audio-skin11 .vjs-progress-control .vjs-mouse-display{background-color:transparent !important;}
.audio-skin11 .vjs-play-progress{position:absolute;top:50%;left:0;width:100%;height:2px;background-color:#fff;transform:translateY(-50%);}
.audio-skin11 .vjs-progress-control .vjs-progress-holder{height:2px;}
.audio-skin11 .vjs-progress-control .vjs-progress-holder:before{content:'';display:block;position:absolute;top:50%;left:0;width:100%;height:2px;background-color:rgba(255,255,255,.1);transform:translateY(-50%);}
.audio-skin11 .vjs-slider:focus{text-shadow:none;box-shadow:none;}
.audio-skin11 .vjs-play-progress .vjs-time-tooltip,
.audio-skin11 .vjs-mouse-display .vjs-time-tooltip,
.audio-skin11 .vjs-progress-control:hover .vjs-mouse-display{display:none;}

/* [타임라인 핸들러] | Progress */
.audio-skin11 .vjs-play-progress:before{content:'';display:block;position:absolute;top:50%;right:-9px;width:18px;height:18px;border-radius:18px;background-color:#fff;transform:translateY(-50%);}
.audio-skin11 .vjs-play-progress:before:hover{transform:scale(1.1);}

/* [컨트롤 바] | Control Bars */
.audio-skin11 .vjs-control-bar{display:flex;align-items:center;box-sizing:border-box;width:100%;height:60px;padding-right:160px;background-color:transparent;}

/* [컨트롤 > 재생/정지 버튼] | Play/Pause */
.audio-skin11 .vjs-button>.vjs-icon-placeholder:before{display:none;}
.audio-skin11 .vjs-play-control{flex-shrink:0;width:40px;height:40px;background-image:var(--audio-skin11-play01);background-size:40px 40px;}
.audio-skin11.vjs-playing .vjs-play-control{background-image:var(--audio-skin11-stop02);}

/* [컨트롤 > 재생 시간] */
.audio-skin11 .vjs-current-time,
.audio-skin11 .vjs-duration{display:flex;flex-shrink:0;align-items:center;min-width:40px;padding:0;font-size:13px;}
.audio-skin11 .vjs-current-time{padding-left:20px;}
.audio-skin11 .vjs-duration{padding-right:20px;}
.audio-skin11 .vjs-remaining-time{display:none;}
/* 구분선 */
.audio-skin11 .vjs-time-divider{display:block;min-width:0;padding:0 4px;font-size:12px;color:#fff;}

/* [볼륨 패널 > 볼륨 바] */
.audio-skin11 .vjs-volume-bar{width:100%;height:4px;margin:0;background-color:rgba(255,255,255,0.16);}

/* [볼륨 패널 > 볼륨 버튼] */
/* 무음 토글 */
.audio-skin11 .vjs-mute-control{flex-shrink:0;width:32px;height:100%;background-image:var(--vid-skin11-vol01);background-size:12px 12px;background-position:50% 50%;background-repeat:no-repeat;}
.audio-skin11 .vjs-mute-control.vjs-vol-0{background-image:var(--vid-skin11-mute01);}

/* [볼륨 패널] */
.audio-skin11 .vjs-volume-panel{display:flex;align-items:center;position:absolute;top:0;right:62px;width:92px;height:100%;transition:none;}
.audio-skin11 .vjs-volume-panel .vjs-volume-control{visibility:visible;opacity:1;display:block;width:calc(100% - 32px);height:4px;margin-left:0;}
.audio-skin11 .vjs-volume-level{position:relative;left:auto;bottom:auto;height:4px;background-color:#fff;}
.audio-skin11 .vjs-volume-level:before{content:'';display:block;position:absolute;top:50%;right:-6px;width:12px;height:12px;border-radius:12px;background-color:#fff;transform:translateY(-50%);}

.audio-skin11 .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,
.audio-skin11 .vjs-volume-panel.vjs-volume-panel-horizontal:active,
.audio-skin11 .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active{width:92px;transition:none;}
.audio-skin11 .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,
.audio-skin11 .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
.audio-skin11 .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal,
.audio-skin11 .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal,
.audio-skin11 .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-horizontal,
.audio-skin11 .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal{display:flex;align-items:center;width:calc(100% - 32px);height:auto;margin:0;transition:none;}

/* [배속 버튼 | Playback Rate ] */
.audio-skin11 .vjs-playback-rate{position:absolute;top:50%;right:8px;z-index:10;width:44px;height:44px;background-image:var(--audio-skin11-playrate01);background-size:24px 24px;background-position:50% 50%;background-repeat:no-repeat;transform:translateY(-50%);}
/* 배속 리스트 */
.audio-skin11 .vjs-menu-button-popup .vjs-menu .vjs-menu-content{top:1.5em;bottom:auto;z-index:10;width:100px;max-height:356px;border-radius:4px;background-color:#fff;box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.20);}
.audio-skin11 .vjs-menu li{padding:0;font-size:15px;line-height:100%;font-weight:400;}
.audio-skin11 .vjs-menu li.vjs-menu-item:focus,
.audio-skin11 .vjs-menu li.vjs-menu-item:hover{background-color:transparent;}/* hover 시 배경 컬러 셋팅 */
.audio-skin11 .vjs-menu .vjs-menu-item-text{padding:10px;color:#444;}
.audio-skin11 .vjs-playback-rate .vjs-menu{left:-3em;}

/* [확대/축소 버튼 | Fullscreen] */
.audio-skin11 .vjs-fullscreen-control{display:none;}

/* 중형 프레임 : 768px ~ 1023px - 컨테이너영역720px */
@media only screen and (min-width:768px) and (max-width:1023px){
	/* 컨트롤바 : play, Pause 버튼 */
	.audio-skin11 .vjs-play-control{width:32px;height:32px;margin-right:10px;background-image:var(--audio-skin11-play02);background-size:32px 32px;}
	.audio-skin11.vjs-playing .vjs-play-control{background-image:var(--audio-skin11-stop03);}
	/* [컨트롤 > 재생 시간] */
	.audio-skin11 .vjs-time-divider,
	.audio-skin11 .vjs-duration{overflow:hidden;opacity:0;position:absolute;top:0;left:0;width:1px;height:1px;font-size:1px;}
	.audio-skin11 .vjs-current-time{position:absolute;top:0;right:94px;height:60px;padding-left:6px;line-height:60px;text-align:right;}
	/* [컨트롤 바] | Control Bars */
	.audio-skin11 .vjs-control-bar{padding-right:128px;}
	/* [볼륨 패널 > 볼륨 버튼] */
	/* 무음 토글 */
	.audio-skin11 .vjs-mute-control{width:40px;background-image:var(--vid-skin11-vol02);background-size:24px 24px;}
	.audio-skin11 .vjs-mute-control.vjs-vol-0{background-image:var(--vid-skin11-mute02);}
	/* [볼륨 패널] */
	.audio-skin11 .vjs-volume-panel{right:48px;width:40px !important;}
	.audio-skin11 .vjs-volume-panel.vjs-volume-control{overflow:hidden;opacity:0;position:absolute;top:0;left:0;width:1px;height:1px;font-size:1px;}
	.audio-skin11 .vjs-volume-panel.vjs-volume-control.vjs-hover,
	.audio-skin11 .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal{visibility:hidden;display:none;width:0;}
	.audio-skin11 .vjs-volume-panel .vjs-volume-control,
	.audio-skin11 .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal{visibility:hidden !important;display:none !important;}
	/* [배속 버튼 | Playback Rate ] */
	.audio-skin11 .vjs-playback-rate{right:8px;width:40px;}
}
/* 소형 프레임 : 767px 이하 - 컨테이너 영역 가변 */
@media only screen and (max-width:767px){
	/* 컨트롤바 : play, Pause 버튼 */
	.audio-skin11 .vjs-play-control{width:32px;height:32px;margin-right:10px;background-image:var(--audio-skin11-play02);background-size:32px 32px;}
	.audio-skin11.vjs-playing .vjs-play-control{background-image:var(--audio-skin11-stop03);}
	/* [컨트롤 > 재생 시간] */
	.audio-skin11 .vjs-time-divider,
	.audio-skin11 .vjs-duration{overflow:hidden;opacity:0;position:absolute;top:0;left:0;width:1px;height:1px;font-size:1px;}
	.audio-skin11 .vjs-current-time{position:absolute;top:0;right:94px;height:60px;padding-left:6px;line-height:60px;text-align:right;}
	/* [컨트롤 바] | Control Bars */
	.audio-skin11 .vjs-control-bar{padding-right:128px;}
	/* [볼륨 패널 > 볼륨 버튼] */
	/* 무음 토글 */
	.audio-skin11 .vjs-volume-panel .vjs-mute-control{width:40px;background-image:var(--vid-skin11-mute02);background-size:24px 24px;}
	.audio-skin11 .vjs-mute-control.vjs-vol-0{background-image:var(--vid-skin11-vol02);}
	/* [볼륨 패널] */
	.audio-skin11 .vjs-volume-panel{right:48px;width:40px !important;}
	.audio-skin11 .vjs-volume-panel.vjs-volume-control{overflow:hidden;opacity:0;position:absolute;top:0;left:0;width:1px;height:1px;font-size:1px;}
	.audio-skin11 .vjs-volume-panel.vjs-volume-control.vjs-hover,
	.audio-skin11 .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal{visibility:hidden;display:none;width:0;}
	.audio-skin11 .vjs-volume-panel .vjs-volume-control,
	.audio-skin11 .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal{visibility:hidden !important;display:none !important;}
	/* [배속 버튼 | Playback Rate ] */
	.audio-skin11 .vjs-playback-rate{width:40px;}
}

/* ---- ##audio-skin12 : [메인] 오디오 뉴스 ---- */
.audio-skin12{overflow:hidden;box-sizing:border-box;width:100%;height:100%;background-color:#374E8E;font-family:'Pretendard','Malgun Gothic','맑은 고딕',Gulim,'굴림',AppleSDGothicNeo-Regular,sans-serif;}
.audio-skin12 .vjs-tech{width:100%;height:100%;}

/* .audio-skin12 미사용 */
.audio-skin12 .vjs-big-play-button,
.audio-skin12.vjs-has-started .vjs-big-play-button,
.audio-skin12 .vjs-fullscreen-control,
.audio-skin12 .vjs-playback-rate,
.audio-skin12 .vjs-subtitles-button,
.audio-skin12 .vjs-captions-button,
.audio-skin12 .vjs-chapters-button{display:none !important;}

/* [로딩 아이콘] | 스피너 */
.audio-skin12 .vjs-loading-spinner{visibility:hidden;display:none;position:absolute;top:50%;left:50%;z-index:255;box-sizing:border-box;width:48px;height:48px;margin-left:-24px;border:4px solid rgba(255,255,255,0.2);border-radius:50%;border-bottom-color:#fff;
transform:translate(-50%, -50%);
animation:vjs-rotation01 1s linear infinite;}
.audio-skin12 .vjs-loading-spinner:before,
.audio-skin12 .vjs-loading-spinner:after{display:none;}

/* [타임라인 바] | Progress Bars vjs-progress-control */
.audio-skin12 .vjs-progress-control{position:absolute;top:157px;left:-10px;width:calc(100% + 20px);height:32px;padding:0 10px;padding-bottom:20px;}
.audio-skin12 .vjs-progress-control .vjs-mouse-display{background-color:transparent}
.audio-skin12 .vjs-progress-control:hover .vjs-mouse-display{display:none;}
.audio-skin12 .vjs-progress-control.vjs-progress-holder{height:2px;}
.audio-skin12 .vjs-slider{position:relative;top:0;background-color:rgba(255,255,255,0.3);}
.audio-skin12 .vjs-slider:focus{text-shadow:none;box-shadow:none;}
.audio-skin12 .vjs-load-progress{display:none;}
.audio-skin12 .vjs-play-progress{position:absolute;top:0;left:0;height:2px;border-radius:2px;background:#fff;}
.audio-skin12 .vjs-play-progress .vjs-time-tooltip,
.audio-skin12 .vjs-mouse-display .vjs-time-tooltip{display:none;}

/* [타임라인 핸들러] | Progress */
.audio-skin12 .vjs-seek-handle{position:absolute;top:-4px;width:12px;height:12px;border-radius:50%;background:#fff;
transform:scale(1);transition:transform 0.2s;}
.audio-skin12 .vjs-seek-handle:hover{transform:scale(1.25);}

/* [컨트롤 바] | Control Bars */
.audio-skin12 .vjs-control-bar{display:block;position:static;width:100%;background-color:transparent;}

/* [컨트롤 > 재생/정지 버튼] | Play/Pause */
.audio-skin12 .vjs-icon-pause:before,
.audio-skin12 .vjs-play-control.vjs-playing .vjs-icon-placeholder:before,
.audio-skin12 .vjs-icon-play:before,
.audio-skin12 .vjs-play-control .vjs-icon-placeholder:before,
.audio-skin12 .vjs-big-play-button .vjs-icon-placeholder:before{display:none;}

.audio-skin12 .vjs-play-control{overflow:hidden;position:absolute;left:50%;bottom:4px;z-index:10;box-sizing:border-box;width:48px;height:48px;margin-left:-24px;background-image:var(--audio-skin12-play01);cursor:pointer;
transform:scale(1);transition:transform 0.2s;}
.audio-skin12 .vjs-play-control:hover{transform:scale(1.2);}
.audio-skin12 .vjs-play-control.vjs-playing,
.audio-skin12 .vjs-play-control.vjs-paused{display:block;position:absolute;left:50%;bottom:4px;z-index:2;width:48px;height:48px;margin-left:-24px;background-size:100% 100%;
transform:scale(1);transition:transform 0.2s;}
.audio-skin12 .vjs-play-control.vjs-playing{background-image:var(--audio-skin11-stop01);}
.audio-skin12 .vjs-play-control.vjs-paused{background-image:var(--audio-skin12-play01);}
.audio-skin12 .vjs-play-control.vjs-playing:hover,
.audio-skin12 .vjs-play-control.vjs-paused:hover{transform:scale(1.2);}

/* [컨트롤 > 재생 시간] */
.audio-skin12 .vjs-time-control{font-size:13px;line-height:16px;color:#fff;letter-spacing:0;cursor:pointer;}
.audio-skin12 .vjs-duration{position:absolute;top:185px;right:0;height:20px;}
.audio-skin12 .vjs-current-time{position:absolute;top:185px;left:0;height:20px;padding:0 5px;}
.audio-skin12 .vjs-live-controls,
.audio-skin12 .vjs-duration,
.audio-skin12 .vjs-current-time,
.audio-skin12 .vjs-seek-to-live-control{display:block;}
.audio-skin12 .vjs-remaining-time,
.audio-skin12 .vjs-time-divider{display:none;}

/* [볼륨 패널 > 볼륨 바] */
.audio-skin12 .vjs-volume-bar{width:100%;height:4px;margin:0;background-color:rgba(255,255,255,0.16);}

/* [볼륨 패널 > 볼륨 버튼] */
.audio-skin12 .vjs-icon-volume-high:before,
.audio-skin12 .vjs-mute-control .vjs-icon-placeholder:before,
.audio-skin12 .vjs-icon-volume-mute:before,
.audio-skin12 .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before{display:none;}
/* 무음 토글 */
.audio-skin12 .vjs-mute-control{flex-shrink:0;width:24px;height:100%;background-image:var(--vid-skin11-vol01);background-size:12px 12px;background-position:50% 50%;background-repeat:no-repeat;}
.audio-skin12 .vjs-mute-control.vjs-vol-0{width:24px;;background-image:var(--vid-skin11-mute01);}

/* [볼륨 패널] */
.audio-skin12 .vjs-volume-panel{display:flex;align-items:center;position:absolute;top:0;left:4px;width:88px;height:24px;}
.audio-skin12 .vjs-volume-panel .vjs-volume-control{display:flex;align-items:center;width:calc(100% - 29px);height:4px;margin-left:4px;background:rgba(255,255,255,0.3);}
.audio-skin12 .vjs-volume-level{position:relative;left:auto;bottom:auto;height:4px;background-color:#fff;}
.audio-skin12 .vjs-volume-level:before{content:'';display:block;position:absolute;top:50%;right:-6px;width:12px;height:12px;border-radius:12px;background-color:#fff;transform:translateY(-50%);}

.audio-skin12 .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,
.audio-skin12 .vjs-volume-panel.vjs-volume-panel-horizontal:active,
.audio-skin12 .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active{width:88px;transition:none;}
.audio-skin12 .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,
.audio-skin12 .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
.audio-skin12 .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal,
.audio-skin12 .vjs-volume-panel .vjs-volume-control{visibility:visible;opacity:1;display:block;}
.audio-skin12 .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal,
.audio-skin12 .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-horizontal,
.audio-skin12 .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal{display:flex;align-items:center;width:calc(100% - 29px);height:auto;margin:0;margin-left:4px;transition:none;}
.audio-skin12 .vjs-volume-handle{position:absolute;top:-4px;width:12px;height:12px;border-radius:50%;background:#fff;
transform:scale(1);transition:transform 0.2s;}
.audio-skin12 .vjs-volume-handle:hover{transform:scale(1.25);}

@keyframes vjs-rotation01{
	0%{transform: rotate(0deg);}
	100%{transform: rotate(360deg);}
}

/* 대형 프레임 : 1024px ~ 1279px : 컨테이너영역980px */
@media only screen and (min-width:1024px) and (max-width:1279px){
	.audio-skin12 .vjs-current-time,
	.audio-skin12 .vjs-duration{top:172px;}
	.audio-skin12 .vjs-progress-control{top:140px;}
	.audio-skin12 .vjs-play-control.vjs-playing,
	.audio-skin12 .vjs-play-control.vjs-paused{bottom:0;}
}
/* 중형 프레임 : 768px ~ 1023px - 컨테이너영역720px */
@media only screen and (min-width:768px) and (max-width:1023px){
	.audio-skin12 .vjs-current-time,
	.audio-skin12 .vjs-duration{top:146px;}
	.audio-skin12 .vjs-progress-control{top:114px;}
	.audio-skin12 .vjs-play-control.vjs-playing,
	.audio-skin12 .vjs-play-control.vjs-paused{bottom:0;}
}
/* 소형 프레임 : 767px 이하 - 컨테이너 영역 가변 */
@media only screen and (max-width:767px){
	.audio-skin12 .vjs-current-time,
	.audio-skin12 .vjs-duration{top:150px;}
	.audio-skin12 .vjs-progress-control{top:118px;}
	.audio-skin12 .vjs-play-control.vjs-playing,
	.audio-skin12 .vjs-play-control.vjs-paused{bottom:0;}
}


/* =============== ####audio-type$$ ======================== */
/* ---- ##audio-type01 > vid-skin12 ---- */
/* [메인] 오디오 뉴스 */
.audio-type01{overflow:hidden;position:relative;box-sizing:border-box;width:270px;height:317px;padding:20px 20px 24px 20px;background-color:#374E8E;}
.audio-type01 .item-box01{position:relative;height:100%;}
.audio-type01 .tit-wrap{display:flex;justify-content:flex-start;position:absolute;top:67px;left:0;z-index:1;width:100%;height:97px;}
.audio-type01 .tit-news{overflow:hidden;display:-webkit-box;width:100%;max-height:81px;font-size:18px;line-height:1.5;font-weight:400;color:#fff;-webkit-line-clamp:3;-webkit-box-orient:vertical;}
.audio-type01 .audio-con{position:relative;width:calc(100% + 20px);height:100%;margin-left:-10px;padding:0;text-align:center;}
@media only screen and (min-width:1024px){
	.audio-type01 .tit-wrap .tit-news:hover{text-decoration:none;}
}

/* [컨트롤 > 재생 시간] */
/* ##btns-wrap12 */
.audio-type01 .btns-wrap12{justify-content:space-between;position:absolute;left:50%;bottom:4px;box-sizing:border-box;width:100%;height:48px;padding:0 33px;transform:translateX(-50%);}
.audio-type01 .btns-wrap12 [class*='btn-audio-']{display:block;width:48px;height:48px;background-size:48px auto;background-position:center;background-repeat:no-repeat;}
.audio-type01 [class*='btn-type033-']{position:absolute;z-index:2;}
.audio-type01 .btn-type033-open{top:-10px;right:-10px;}
.audio-type01 .btn-type033-close{top:0;right:0;}
/* 대형 프레임 : 1024px ~ 1279px : 컨테이너영역980px */
@media only screen and (min-width:1024px) and (max-width:1279px){

}
/* 대형 프레임 : 1024px ~ 1279px : 컨테이너영역980px */
@media only screen and (min-width:1024px) and (max-width:1279px){
	.audio-type01{width:221px;height:290px;padding:20px;}
	.audio-type01 .tit-wrap{top:44px;height:81px;}
	.audio-type01 .btns-wrap12{bottom:0;padding:0 8px;}
}
/* 중형 프레임 : 768px ~ 1023px - 컨테이너영역720px */
@media only screen and (min-width:768px) and (max-width:1023px){
	.audio-type01{/*width:344px;*/width:100%;height:260px;padding:20px 20px 22px;}
	.audio-type01 .tit-wrap{top:40px;height:54px;}
	.audio-type01 .tit-news{-webkit-line-clamp:2;max-height:54px;}
	.audio-type01 .btns-wrap12{bottom:0;padding:0 74px;}

}
/* 소형 프레임 : 767px 이하 - 컨테이너 영역 가변 */
@media only screen and (max-width:767px){
	.audio-type01{width:100%;height:258px;padding:16px 16px 20px;}
	.audio-type01 .tit-wrap{top:44px;height:54px;}
	.audio-type01 .tit-news{-webkit-line-clamp:2;max-height:54px;}
	.audio-type01 .btns-wrap12{bottom:0;width:164px;padding:0;}
}

/* ---- ##오디오 리스트 ---- */
.audio-list01{display:none;position:absolute;top:0;/*right:-999px;*/z-index:10;width:100%;height:100%;background-color:var(--ui-tag031);
transition:all ease-in-out 0.5s;}
.audio-list01.active{/*right:0;*/display:flex;z-index:10;}
.audio-list01.open{right:0;}
.audio-list01.close{right:-999px;}
.audio-list01 ul{overflow:hidden;max-height:100%;overflow-y:auto;}
.audio-list01 ul li{margin-top:4.25px;}
.audio-list01 ul li:first-of-type{margin-top:0;}
.audio-list01 ul li a,
.audio-list01 ul li button{display:block;box-sizing:border-box;width:100%;padding:10px 40px 10px 20px;border:none;background-color:var(--ui-tag031);font-size:13px;color:var(--font-color001);text-align:left;}
.audio-list01 ul li a .txt01,
.audio-list01 ul li button .txt01{overflow:hidden;display:-webkit-box;line-height:1.5;font-weight:400;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
.audio-list01 ul li.active a,
.audio-list01 ul li.active button{background-color:var(--ui-tag030);}
@media only screen and (min-width:1024px){
	.audio-list01 ul li a:hover,
	.audio-list01 ul li button:hover{background-color:var(--ui-tag030);}
}
/* 대형 프레임 : 1024px ~ 1279px : 컨테이너영역980px */
@media only screen and (min-width:1024px) and (max-width:1279px){
	.audio-list01 ul li{margin-top:2.5px;}
	.audio-list01 ul li a,
	.audio-list01 ul li button{padding:8px 40px 8px 12px;font-size:13px;}
}
/* 중형 프레임 : 768px ~ 1023px - 컨테이너영역720px */
@media only screen and (min-width:768px) and (max-width:1023px){
	.audio-list01{display:flex;align-items:center;}
	.audio-list01 ul{width:100%;}
	.audio-list01 ul li{margin-top:2.5px;}
	.audio-list01 ul li a,
	.audio-list01 ul li button{padding:12px 40px 12px 20px;font-size:13px;}
	.audio-list01 ul li button .txt01{-webkit-line-clamp:1;}
}
/* 소형 프레임 : 767px 이하 - 컨테이너 영역 가변 */
@media only screen and (max-width:767px){
	.audio-list01{display:flex;align-items:center;}
	.audio-list01 ul{width:100%;}
	.audio-list01 ul li{margin-top:0;}
	.audio-list01 ul li a,
	.audio-list01 ul li button{padding:12px 40px 12px 20px;font-size:13px;}
	.audio-list01 ul li button .txt01{-webkit-line-clamp:1;}
}