@charset "UTF-8";
.mplayer-basic { box-sizing: border-box; display: inline-block; text-align: left; line-height: 1; background: #000; border: 1px solid #030303; position: relative; overflow: hidden; /* 센터 플레이 아이콘 */ }
.mplayer-basic * { box-sizing: border-box; }
.mplayer-basic .mp-media-el { height: 100%; }
.mplayer-basic .mp-media-el video { display: block; width: 100%; height: auto; outline: 0 none; }
.mplayer-basic .mp-media-el video::-webkit-media-controls { display: none; }
.mplayer-basic.mp-is-flexible { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.mplayer-basic.mp-is-flexible video { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.mplayer-basic.mp-is-fullscreen { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999999; }
.mplayer-basic.mp-is-fullscreen video { width: 100%; height: 100%; }
.mplayer-basic .mp-poster { width: 100%; height: 100%; background-size: cover; background-position: 50%; position: absolute; top: 0; left: 0; cursor: pointer; }
.mplayer-basic .mp-poster.mp-hide { display: none; }
.mplayer-basic .mp-media-el:after, .mplayer-basic .mp-poster:after { content: ''; box-sizing: border-box; display: block; width: 80px; height: 80px; margin: -40px 0 0 -40px; background: rgba(0, 0, 0, 0.4) url("img/ico-play-large.png") no-repeat 62% 50%; border-radius: 40px; box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); border: 1px solid rgba(0, 0, 0, 0.3); opacity: 0; position: absolute; top: 50%; left: 50%; -webkit-transition: all .2s; transition: all .2s; -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); }
.mplayer-basic:not(.mp-is-playing) .mp-media-el:after, .mplayer-basic:not(.mp-is-playing) .mp-poster:after { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
.mplayer-basic .mp-controls { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; font-size: 0; background: #030303; background: -webkit-linear-gradient(top, #212121 0%, #030303 100%); background: linear-gradient(to bottom, #212121 0%, #030303 100%); border-top: 1px solid #030303; position: absolute; bottom: 0; left: 0; -webkit-transition: all .4s .7s; transition: all .4s .7s; }
.mplayer-basic .mp-controls > * { vertical-align: top; box-shadow: inset -1px 1px 0 rgba(255, 255, 255, 0.1); }
.mplayer-basic .mp-controls > *:not(:last-child) { border-right: 1px solid #030303; }
.mplayer-basic.mp-is-playing .mp-controls { opacity: 0; bottom: -46px; }
.mplayer-basic.mp-is-playing.mp-is-active .mp-controls { opacity: 1; bottom: 0; -webkit-transition: all .4s .15s; transition: all .4s .15s; }
.mplayer-basic.mp-is-playing.mp-is-active-focus .mp-controls { opacity: 1; bottom: 0; -webkit-transition: none; transition: none; }
.mplayer-basic .mp-btn-play-puase { width: 50px; height: 45px; color: transparent; background: url("img/ico-play.png") no-repeat 50% 50%; border: 0 none; overflow: hidden; cursor: pointer; }
.mplayer-basic .mp-btn-play-puase.mp-is-paused { background-image: url("img/ico-pause.png"); }
.mplayer-basic .mp-slider { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; width: 100%; height: 11px; margin: 0 8px; position: relative; z-index: 1; }
.mplayer-basic .mp-slider:after { content: ''; box-sizing: content-box; display: block; width: 100%; height: 100%; padding: 0 8px; background: #222; border: 1px solid #030303; border-radius: 5px; box-shadow: 0 1px 0 #242424; position: absolute; top: 0; left: -8px; }
.mplayer-basic .mp-slider .mp-btn { display: block; width: 0; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; }
.mplayer-basic .mp-slider .mp-btn:before { content: ''; box-sizing: content-box; display: block; width: 100%; height: 100%; padding: 0 8px; background: #626f7d; background: -webkit-linear-gradient(top, #626f7d 0%, #4a5662 50%, #38414e 51%, #303a46 100%); background: linear-gradient(to bottom, #626f7d 0%, #4a5662 50%, #38414e 51%, #303a46 100%); border-radius: 5px; position: absolute; top: 1px; left: -8px; }
.mplayer-basic .mp-slider .mp-btn:after { content: ''; box-sizing: content-box; display: block; width: 22px; height: 22px; margin-right: -11px; background: url("img/ico-slider.png") no-repeat; position: absolute; top: -3px; right: 0; }
.mplayer-basic .mp-slider .mp-buffered { box-sizing: content-box; display: block; width: 0; height: 100%; margin-left: -7px; padding: 0 8px; background: #fff; border-radius: 5px; opacity: .2; position: absolute; top: 1px; left: 0; z-index: 1; }
.mplayer-basic .mp-progress-wrap { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; padding: 17px 15px 0; white-space: nowrap; }
.mplayer-basic .mp-progress-wrap .mp-progress { width: 100%; }
.mplayer-basic .mp-time-wrap { padding-left: 15px; line-height: 11px; font-family: tahoma; font-size: 9px; color: #8f8f8f; text-shadow: 0 1px 0 #030303; white-space: nowrap; }
.mplayer-basic .mp-volume-wrap { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100px; padding: 17px 15px 0; white-space: nowrap; }
.mplayer-basic .mp-volume-wrap .mp-volume { width: 50px; }
.mplayer-basic.mp-is-ios .mp-volume-wrap { display: none; }
.mplayer-basic .mp-btn-mute { width: 14px; height: 12px; margin-right: 3px; color: transparent; background: url("img/ico-volume.png") no-repeat; border: 0 none; overflow: hidden; cursor: pointer; }
.mplayer-basic .mp-btn-mute.mp-is-muted { background-image: url("img/ico-volume-off.png"); }
.mplayer-basic .mp-btn-fullscreen { width: 50px; height: 45px; color: transparent; background: url("img/ico-fullscreen.png") no-repeat 50% 50%; border: 0 none; overflow: hidden; cursor: pointer; }
.mplayer-basic .mp-btn-fullscreen.mp-is-fullscreen { background-image: url("img/ico-fullscreen-cancel.png"); }
.mplayer-basic.mp-is-audio { width: 100%; }
.mplayer-basic.mp-is-audio .mp-controls { opacity: 1; border-top: 0 none; position: relative; bottom: 0; }
.mplayer-basic.mp-is-ie9 .mp-controls { display: table; }
.mplayer-basic.mp-is-ie9 .mp-controls > * { display: table-cell; font-size: 0 !important; }
.mplayer-basic.mp-is-ie9 .mp-progress-wrap { font-size: 0; }
.mplayer-basic.mp-is-ie9 .mp-progress-wrap:after { content: ''; display: block; clear: both; }
.mplayer-basic.mp-is-ie9 .mp-progress { float: left; width: 70%; }
.mplayer-basic.mp-is-ie9 .mp-time-wrap { float: left; -webkit-transition: none !important; transition: none !important; }
.mplayer-basic.mp-is-ie9.mp-is-small .mp-time-wrap { display: none; }
.mplayer-basic.mp-is-ie9.mp-is-seeking .mp-time-wrap { display: block; }
.mplayer-basic.mp-is-ie9 .mp-volume-wrap { width: 20px !important; font-size: 0; }
.mplayer-basic.mp-is-ie9 .mp-volume { display: inline-block; vertical-align: top; }
.mplayer-basic.mp-is-ie9 .mp-btn-mute { display: inline-block; vertical-align: top; }
.mplayer-basic.mp-is-small .mp-media-el:after, .mplayer-basic.mp-is-small .mp-poster:after { -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); }
.mplayer-basic.mp-is-small:not(.mp-is-playing) .mp-media-el:after, .mplayer-basic.mp-is-small:not(.mp-is-playing) .mp-poster:after { -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6); }
.mplayer-basic.mp-is-small .mp-btn-play-puase { width: 33px; height: 33px; }
.mplayer-basic.mp-is-small .mp-progress-wrap { padding: 11px 10px 0; }
.mplayer-basic.mp-is-small .mp-time-wrap { display: none; width: auto; padding: 0; line-height: 1.2; text-align: center; font-size: 20px; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); position: absolute; bottom: 46px; left: 50%; }
.mplayer-basic.mp-is-small.mp-is-seeking .mp-time-wrap { display: block; }
.mplayer-basic.mp-is-small .mp-volume-wrap { width: 70px; padding: 11px 10px 0; }
.mplayer-basic.mp-is-small .mp-btn-mute { display: none; }
.mplayer-basic.mp-is-small .mp-btn-fullscreen { width: 33px; height: 33px; }