/*─────────────────────────┐
	name: controller.css
	data: 2018.09.11
	tovsoft CD templete
└─────────────────────────*/

@charset "utf-8";
.videoWrap .closeBtn {
    position: absolute;
    top: 0;
    right: 0;
    width: 58px;
    height: 58px;
    border-radius: 0 0 0 50px;
    background: #a5826c url(../images/controller/btn_close_white.svg) 22px 10px/25px no-repeat;
    cursor: pointer;
    z-index: 10;
}
.videoWrap .closeBtn:hover {
    background-color: #f60;
}
/**************************************************/
.aniContainer .video {
	width: 100%;
	height: 100%;
	z-index: 100;
}
.mediaContainer.video .controller,
.mediaContainer.video video {
	visibility: hidden;
}
.mediaContainer.video.started .controller,
.mediaContainer.video.started video {
	visibility: visible;
}
.aniContainer .mediaSubContainer {
}
.aniContainer .mediaSubContainer:before {
	content: '';
	position: absolute;
	top: -82px;
	left: 0;
	width: 100%;
	height: 74px;
}

/* mediaContainer */
.mediaContainer.on { ; }
.mediaContainer.off { display: none; }
.mediaContainer {
	display: none;
	position: absolute;
	bottom: 0;
	left: 0;
	letter-spacing: 0;
}
.mediaContainer.audio {
	height: 48px;
	width: 100%;
}
[data-slides] .mediaContainer {
	width: 1170px;
	left: -56px;
}
	/* isPlay */
.isPlay .controller .playBtn { display: none; }
.isPlay .controller .pauseBtn { display: block; }
.isPlay .screenPlayBtn,
.isPlay .mediaThumbnail { display: none; }

.controller .playBtn,
.controller .pauseBtn,
.controller .stopBtn,
.controller .muteBtn {
	width: 35px;
	height: 36px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.controller .playBtn,
.controller .pauseBtn {
	margin: 0 20px 0 6px;
}
.controller .stopBtn {
	margin-right: 20px;
}
.controller .playBtn {
	background-image: url('../images/controller/icon_media_play.svg');
}
.controller .playBtn.hover {
	background-image: url('../images/controller/icon_media_play_hover.svg');
}
.controller .pauseBtn {
	display: none;
	background-image: url('../images/controller/icon_media_pause.svg');
}
.controller .pauseBtn.hover {
	background-image: url('../images/controller/icon_media_pause_hover.svg');
}
.controller .stopBtn {
	background-image: url('../images/controller/icon_media_stop.svg');
}
.controller .stopBtn.hover {
	background-image: url('../images/controller/icon_media_stop_hover.svg');
}
/* muteBtn*/
.controller .muteBtn {
	background-image: url('../images/controller/icon_media_mute.svg');
}
.controller .muteBtn.hover {
	background-image: url('../images/controller/icon_media_mute_hover.svg');
}
.controller .muteBtn.on {
	opacity: 0.5;
}
.controller {
	display: flex;
	align-items: center;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 48px;
	padding: 6px 22px 6px 32px;
	box-sizing: border-box;
	background: #EEDAC2;
}
.audio .controller {
	height: 100%;
}
.controller .handler {
	position: absolute;
	top: -5px;
	left: -10px;
	width: 32px;
	height: 18px;
	border-radius: 10px;
	background-color: #FFC808;
	cursor: pointer;
}
.controller .handleBar {
	position: relative;
	width: 73%;
	height: 10px;
	margin-right: 2%;
	border-radius: 8px;
	background-color: #fff;
	cursor: pointer;
}
.controller .handleBar .handleColorBar {
	width: 0;
	height: 100%;
	border-radius: inherit;
	background-color: #FFC808;
}

/* timer */
.controller .timeContainer {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #AF7C65;
}
.controller .timeContainer {
	width: 126px;
	color: #AE7C65;
	font-family: NotoB;
	font-size: 15px;
}
.controller .timeContainer .curTime {}
.controller .timeContainer .curTime:after {
	content: '';
	display: inline-block;
	width: 2px;
	height: 15px;
	margin: 0 8px;
	background-color: #DFCBB2;
}


/******************** video /********************/
.video .mediaThumbnail {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* controller */
.video.mediaContainer > video {
	max-width: 100%;
	max-height: 100%;
}

/* option */

/* caption */
.captionBtn.on {
	opacity: 1;
	cursor: pointer;
}
.captionBtn {
	opacity: 0.2;
}
.captionBtn {
	width: 30px;
	height: 30px;
	margin-left: 2%;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzBweCIgaGVpZ2h0PSIzMHB4IiB2aWV3Qm94PSIwIDAgMzAgMzAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMwIDMwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yMy41LDUuNXYxOWgtMTd2LTE5SDIzLjUgTTI2LjUsMi41aC0yM3YyNWgyM1YyLjVMMjYuNSwyLjV6Ii8+DQo8Zz4NCgk8cmVjdCB4PSI5LjUiIHk9IjguNSIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjExIiBoZWlnaHQ9IjIiLz4NCjwvZz4NCjxnPg0KCTxyZWN0IHg9IjkuNSIgeT0iMTMuNSIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjExIiBoZWlnaHQ9IjIiLz4NCjwvZz4NCjxnPg0KCTxyZWN0IHg9IjkuNSIgeT0iMTguNSIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjExIiBoZWlnaHQ9IjIiLz4NCjwvZz4NCjwvc3ZnPg0K) center no-repeat;
}
.captionContainer { display: none; }
.captionContainer.on {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 100%;
	height: 40px;
	bottom: 42px;
	background: rgba(0, 0, 0, .7);
}
.captionText {
	color: #fff;
	font-size: 16px;
}

/* fullScreenBtn */
.video .controller .fullScreenBtn {
	width: 30px;
	height: 30px;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNTBweCIgaGVpZ2h0PSI1MHB4IiB2aWV3Qm94PSIwIDAgNTAgNTAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iMjAsMiA3LDIgMiwyIDIsNyAyLDIwIDcsMjAgNywxMC41MzYgMTYuNDY0LDIwIDIwLDE2LjQ2NCAxMC41MzYsNyAyMCw3ICIvPg0KPHBvbHlnb24gZmlsbD0iI0ZGRkZGRiIgcG9pbnRzPSI0MywzMCA0MywzOS40NjUgMzMuNTM2LDMwIDMwLDMzLjUzNSAzOS40NjUsNDMgMzAsNDMgMzAsNDggNDMsNDggNDgsNDggNDgsNDMgNDgsMzAgIi8+DQo8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjQzLDIgMzAsMiAzMCw3IDM5LjQ2NSw3IDMwLDE2LjQ2NCAzMy41MzUsMjAgNDMsMTAuNTM2IDQzLDIwIDQ4LDIwIDQ4LDcgNDgsMiAiLz4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iMjAsMzMuNTM2IDE2LjQ2NSwzMCA3LDM5LjQ2NSA3LDMwIDIsMzAgMiw0MyAyLDQ4IDcsNDggMjAsNDggMjAsNDMgMTAuNTM1LDQzICIvPg0KPC9zdmc+DQo=) center no-repeat;
	background-size: 26px;
	cursor: pointer;
}