div.rangeslider {
    box-sizing:content-box;
    height:1em;
    position:relative;
}
div.rangeslider *{
    box-sizing:content-box;
	border-radius:3px;
}
div.rangeslider div {
    position:absolute;
}
div.rangeslider .rangeouter, div.rangeslider .rangeinner {
    height:0.3em;
    margin:0.75em 0;
}
div.rangeslider .rangeouter {
    background:#ddd;
    width:100%;
}
div.rangeslider .rangeinner {
    background:#04B404;
    width:5em;
}
div.rangeslider .rangeselector {
    margin-left:-0.9em;
    border-radius:1em;
    height:1em;
    width:1em;
    background:#04B404;
    /* 5em - border (0.4em) - width/2 (0.5em) */
    left:4.1em;
    background-clip:padding-box;
    border:0.4em solid rgba(0, 0, 0, 0);
}

div.rangeslider.disabled .rangeinner, div.rangeslider.disabled .rangeselector {
    background-color:#777!important;
}

/* Colour Animations */
div.rangeslider .rangeouter, div.rangeslider .rangeinner, div.rangeslider .rangeselector {
    -webkit-transition: background-color 200ms linear;
    -moz-transition: background-color 200ms linear;
    -o-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
	cursor: pointer;
}
.progress-body .rangeslider .rangeselector{display:none;}

html, body {margin:0;padding:0; background: #000; height: 100%; box-sizing: border-box;}
div {box-sizing: border-box;}
button {cursor: pointer; border: 0; outline: none; margin-top:5px;}
a {text-decoration: none;}
.playerWrap, .playerLeft {height: 100%;}
.hp-contanier {width: 100%; height: 100%; margin: 0 auto; position: relative;}
.hp-body {position: relative; width: 100%; font-family: 'Nanum Gothic', sans-serif; overflow: hidden; height: 100%;}
.hp-video {width: 100%; height: 100%; margin: 0; padding: 0; display: table;}
#video_box {display: table-cell; vertical-align: middle; height: 100%;}
.control-body {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.hp-center {height: 60px; width: 310px; position: absolute; top: 50%; margin: -30px auto 0; display: table; left: 50%; margin-left: -160px; text-align: center;}
.hp-center button {display: inline-block; width: 50px; height: 60px; opacity: 0.3; position: relative;}
.hp-center button:hover {opacity: 1;}
.hp-center button.fast_left {background: url(https://play.xcdn.kr/common/fast-backward.svg) no-repeat center; background-size: 50px;}
.hp-center button.play_arrow {background: url(https://play.xcdn.kr/common/play_arrow-white.svg) no-repeat center; background-size: 80px; width: 200px;}
.hp-center button.pauseBtn {background: url(https://play.xcdn.kr/common/pause.svg) no-repeat center; background-size: 80px; width: 200px;}
.hp-center button.fast_right {background: url(https://play.xcdn.kr/common/fast-forward.svg) no-repeat center; background-size: 50px;}
.hp-left {height: 30px; width: 30px; position: relative; margin: -4px 4px -14px -12px; display: inline-block; float: left; z-index: 999; }
.hp-left button {display: inline-block; width: 20px; height: 20px; opacity: 1; position: relative;}
.hp-left button:hover {opacity: 1;}
.hp-left button.play_arrow {background: url(/vplayer/img/play_arrow-white.svg) no-repeat center; background-size: 26px; width: 20px; cursor: pointer; }
.hp-left button.play_arrow:hover {background: url(/vplayer/img/play_arrow-white_over.svg) no-repeat center; background-size: 26px; width: 20px; cursor: pointer; }
.hp-left button.pauseBtn {background: url(/vplayer/img/pause.svg) no-repeat center; background-size: 26px; width: 20px; cursor: pointer; }
.hp-left button.pauseBtn:hover {background: url(/vplayer/img/pause_over.svg) no-repeat center; background-size: 26px; width: 20px; cursor: pointer; }
.hp-bottom {position: absolute; width: 100%; height: 60px; bottom: 0px; left: 0;  background: rgba(0,0,0,0.4); }
.progress-body {padding: 0 20px; position: relative;}
.bottom-button { display:table;width: 100%;}
.bottom-button .left { display:table-cell; width: auto; padding-left: 25px; vertical-align: middle;}
.bottom-button .left .time {font-size: 13px; color: #ffffff; position: relative; display: inline-block; z-index: 999;}
.bottom-button .left .time span {color: #ffffff;}
.bottom-button .right {display:table-cell; width: 100px;  text-align: right; position: relative; padding-right: 15px; vertical-align: middle; z-index: 999;}
.tooltiptext {visibility: hidden; width: auto; background-color: #ffffff; color: #000000; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 110%; left: 50%; opacity: 0; transition: opacity 0.3s; font-size: 12px; white-space: nowrap;}
.tooltiptext::after {display:none; content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #ffffff transparent transparent transparent;}
.hp-center button:hover .tooltiptext, button.speed:hover .tooltiptext, button.repeat:hover .tooltiptext, button.full-screen:hover .tooltiptext, .time:hover .tooltiptext, .volume_down:hover .tooltiptext, .volume_up:hover .tooltiptext, .bottom-button button:hover .tooltiptext, .repeat-point.start .tooltiptext, .repeat-point.end .tooltiptext { visibility: visible; opacity: 0;}
.hp-bottom button:hover {color:#fe6723;}
.speedBox {display: inline-block; position: relative; bottom: 5px;}
button.speed {width: 43px; height: 20px; text-align: center; background: #1e1e1e; color: #ffffff; line-height: 20px; font-size: 12px; border-radius:4px;}
.select-speed {width: 43px; background: #1e1e1e; text-align: center; padding: 10px 0; position: absolute; bottom: 100%; display: none; border-radius:4px;}
.select-speed a {display: block; color: #fff; font-size: 12px;}
.select-speed a + a {margin-top: 16px;}
.select-speed a:hover, .select-speed a.active {color: #fe6723;}
button.repeat {width: 22px; height: 20px; background: url(https://play.xcdn.kr/common/repeat-w.png) no-repeat center; position: relative; top: 0; margin-left: 10px;}
button.repeat-start {width: 22px; height: 20px; background: url(https://play.xcdn.kr/common/repeat-lr.png) no-repeat center; position: relative; top: 3px; margin-left: 10px;}
button.repeat-end {width: 22px; height: 20px; background: url(https://play.xcdn.kr/common/repeat-r.png) no-repeat center; position: relative; top: 3px; margin-left: 10px;}
button.full-screen {width: 20px; height: 20px; background: url(/vplayer/img/fullscreen.svg) no-repeat center; background-size: 125%; position: relative; top: 0; margin-left: 10px;}
button.full-screen:hover {width: 20px; height: 20px; background: url(/vplayer/img/fullscreen_over.svg) no-repeat center; background-size: 125%; position: relative; top: 0; margin-left: 10px;}
button.fullscreen-exit {width: 20px; height: 20px; background: url(/vplayer/img/fullscreen-exit.svg) no-repeat center; background-size: 125%; position: relative; top: 0; margin-left: 10px;}
button.fullscreen-exit:hover {width: 20px; height: 20px; background: url(/vplayer/img/fullscreen-exit_over.svg) no-repeat center; background-size: 125%; position: relative; top: 0; margin-left: 10px;}
.rangeslider {cursor: pointer;}
.hp-volume {margin-left: 10px;  float: left; position: absolute; top: 30px; z-index:99; display: table; width: 100%;}
.hp-volume .table-cell {display: table-cell; width: auto; float: none;}
.hp-volume .table-cell:last-child {width: 235px;}
.hp-volume > div {display: block; vertical-align: middle;float: left;}
.hp-volume button {width: 20px; height: 20px; position: relative; /*top: 2px;*/}
.min-volume, .max-volume {width: 20px; height: 20px; position: relative; top: -1px; float: left;}
.volume_down {background: url(/vplayer/img/volume_down.svg) no-repeat center; background-size: 120%;}
.hp-volume button:hover{background: url(/vplayer/img/volume_down_over.svg) no-repeat center; background-size: 120%;}
.volume_up {background: url(https://play.xcdn.kr/common/volume_up.svg) no-repeat center; background-size: 100%;}
.volume-range {padding: 0 10px 0 8px; width:110px; float: left;}
.repeat-point {position: absolute; width: 4px; height: 4px; background: #ff9900; top: 14px; z-index: 1; border-radius: 50%;}
.repeat-point.start {left: 10%;}
.repeat-point.end {left: 50%;}
.overControl { width:100%;height:100%;}
.captureTool {position: absolute; top: 50%; text-align: center; margin-top: -11px; color: #fff; width: 100%;}

.msgBox {width: 100%; height: 100%; background: rgba(0,0,0,0.7); position: absolute; top: 0; left: 0; margin: 0;}
.msgBox div {width: 100%; text-align: center; position: absolute; color: #fff; top: 50%; margin-top: -50px;}
.pauseBox {width: 100%; height: 100%; background: rgba(0,0,0,0.7); position: absolute; top: 0; left: 0; margin: 0;}
.pauseBox div {width: 100%; text-align: center; position: absolute; color: #fff; top: 50%; margin-top: -50px;}
.pauseBox div button {padding: 5px 15px; font-weight: 700; white-space: nowrap;}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	#video_box {height: auto;}
}
@media (max-width: 480px) {
	.hp-bottom {bottom: 0;}
	.hp-center button.fast_left, .hp-center button.fast_right {background-size: 30px;}
	.hp-center button.play_arrow, .hp-center button.pauseBtn {background-size: 50px;}		
}
@media (max-width: 380px) {	
	.volume_down{display:none;}
}
@media (max-width: 340px) {	
	.hp-volume{display:none;}
}
.bookmarks {position: absolute;z-index: 999;width: 100%; background: #222; opacity: 0.5;}
.bookmarkAdd {color: #fff; font-size: 13px; font-weight: bold; cursor: pointer; vertical-align: middle; width: 100px; text-align: center; height: 42px; float:left; line-height: 42px;}
.bookmarkAdd:hover {color:#ff5252;}
.bookmarkBox {vertical-align: middle; width: auto; padding: 6px 10px 0px 10px; white-space:nowrap; overflow-x:scroll; scrollbar-width: thin; scrollbar-color: #555 #333;  scrollbar-arrow-color:#555; scrollbar-3dlight-color:#333; scrollbar-darkshadow-color:#333; scrollbar-face-color:#555; scrollbar-hightlight-color:#333; scrollbar-shadow-color:#333; scrollbar-track-color:#333;}
.bookmarkCell {display: inline-block; border:1px solid #666; padding:5px 10px; border-radius:30px;}
.goPosition {color: #fff; font-size: 12px; float: left; text-decoration: none;}
.bookmarkCell + .bookmarkCell {margin-left: 10px;}
.goPositionDel {display: block;width: 14px;height: 14px; color: #ddd;float: left;text-align: center;text-decoration: none;line-height: 12px;font-weight: bold;font-size: 13px;position: relative;top: 3px;left: 5px;}
.bookmark_save_img {position:relative; top:4px; padding-right:4px;}
.bookmarkBox::-webkit-scrollbar {height:4px; border-radius:10px;}
.bookmarkBox::-webkit-scrollbar-thumb {background-color: #555; border-radius:10px;}
.bookmarkCell:hover {background:#fff; border:1px solid #fff;}
.bookmarkCell:hover a {color:#000;}
a.goPositionDel:hover {color: #ff0000;}