/*
 * 软件名称：MoePlayer
 * 版本:X3
 * 版权：MoePlayer 项目(fork 自 ckplayer, www.ckplayer.com)
 * 开源协议：MIT
 * 本文件由 npm run build 自动生成(src/css/base.css + 主题),请勿手动修改
 */
/*
 * MoePlayer 皮肤基础样式(base.css)
 * 功能：三个皮肤共用的全部结构样式 + 默认主题变量
 * 说明：所有颜色/主题相关值均为 CSS 自定义属性(--moe-*),定义在 .moeplayer 作用域上
 *      (右键菜单 .moeplayer-menu、错误框 .moeplayer-error 会被挂载到 body 下,故一并定义)
 *      各主题(src/css/themes/*.css)只需覆盖这些变量即可换肤
 * 图标：全部使用 SVG data-URI + CSS mask 实现,颜色跟随 --moe-icon-color,换肤零成本
 * 本文件不单独使用,由 scripts/build-css.js 与各主题拼接生成最终产物
 */

/*======================== 主题变量(默认值即默认皮肤) ========================*/
.moeplayer, .moeplayer-menu, .moeplayer-error{
	/* 主题色 */
	--moe-accent: #00a1d6;
	/* 图标颜色 */
	--moe-icon-color: rgba(255,255,255,.92);
	--moe-icon-hover: #00a1d6;
	/* 控制条文字颜色 */
	--moe-text-color: #FFF;
	--moe-text-hover: #00a1d6;
	/* 控制条背景(底部渐变:上透明下深色) */
	--moe-bar-bg: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
	/* 顶部栏背景与文字 */
	--moe-top-bar-bg: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0));
	--moe-top-bar-text: #FFF;
	/* 右侧栏背景 */
	--moe-right-bar-bg: rgba(0,0,0,.35);
	/* 进度条:轨道/缓冲/已播放/滑块 */
	--moe-progress-bg: rgba(255,255,255,.25);
	--moe-progress-buffer: rgba(255,255,255,.45);
	--moe-progress-play: var(--moe-accent);
	--moe-slider-color: var(--moe-accent);
	/* 音量条:轨道/已音量/面板背景 */
	--moe-volume-bg: rgba(255,255,255,.25);
	--moe-volume-play: var(--moe-accent);
	--moe-volume-panel-bg: rgba(0,0,0,.85);
	/* 弹层(倍速/字幕/清晰度列表等) */
	--moe-popup-bg: rgba(0,0,0,.85);
	--moe-popup-text: #FFF;
	--moe-popup-hover: var(--moe-accent);
	--moe-popup-shadow: 0 4px 16px rgba(0,0,0,.3);
	/* 浮层提示(message/tip/prompt 等,浮于视频上方,不随浅色主题变化) */
	--moe-overlay-bg: rgba(0,0,0,.85);
	--moe-overlay-text: #FFF;
	/* 右键菜单 */
	--moe-menu-bg: rgba(0,0,0,.85);
	--moe-menu-text: rgba(255,255,255,.75);
	--moe-menu-link: #FFF;
	--moe-menu-border: rgba(255,255,255,.08);
	/* 圆角与字体 */
	--moe-radius: 6px;
	--moe-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
	/* 尺寸 */
	--moe-bar-height: 48px;
	--moe-bar-height-full: 70px;
	--moe-btn-size: 48px;
	--moe-btn-size-full: 70px;
	--moe-icon-size: 22px;
	--moe-icon-size-full: 30px;
}

/*======================== 全局错误提示框 ========================*/
.moeplayer-error{
	position: fixed;
	z-index: 9999999;
	left: 10px;
	bottom: 10px;
	width: auto;
	height: 38px;
	line-height: 38px;
	padding: 0 .85rem;
	background: var(--moe-overlay-bg);
	border-radius: var(--moe-radius);
	color: var(--moe-overlay-text);
	font-size: 14px;
	font-family: var(--moe-font-family);
	white-space: nowrap;
}

/*======================== 播放器容器 ========================*/
.moeplayer{
	width: 100%;
	height: 100%;
	float: left;
	background: #000;
	overflow: hidden;
	font-family: var(--moe-font-family);
}
.moeplayer button, .moeplayer input{
	font-family: inherit;
}
.moeplayer .moe-main.moe-nocursor{
	cursor: none;
}
.moeplayer-smallwindow{
	position: fixed;
	z-index: 9999999;
	width: 420px;
	max-width: 100%;
	height: 266px;
	right: 10px;
	bottom: 10px;
}
.moeplayer .moe-main{
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #000;
	position: relative;
}
.moeplayer .moe-main .moe-video{
	width: 100%;
	height: 100%;
	overflow: hidden;
	position:absolute;
	z-index: 1;
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.moeplayer .moe-main .moe-video video,.moeplayer .moe-main .moe-video canvas{
	width: 100%;
	height: 100%;
}
.moeplayer .moe-main .moe-error{
	width: 100%;
	height: 80px;
	line-height: 35px;
    text-align: center;
    color: var(--moe-overlay-text);
    position:absolute;
    z-index: 70;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    overflow: hidden;
}
/*logo:默认无品牌水印,用户通过 logo 配置项传入自定义图片(JS 会插入 img)*/
.moeplayer .moe-main .moe-logo{
    position:absolute;
    right: 20px;
    top:20px;
    z-index: 400;
    background: none;
}
/*加载动画:CSS 圆弧旋转,不再使用图片*/
.moeplayer .moe-main .moe-loading{
	position:absolute;
	top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 80;
	width: 46px;
	height: 46px;
	box-sizing: border-box;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.3);
    border-top-color: #FFF;
    animation: moe-Circle .8s linear infinite;
	-webkit-animation: moe-Circle .8s linear infinite
}
/*中央大播放键:圆形半透明底 + 白色播放三角,hover 变主题色*/
.moeplayer .moe-main .moe-center-play{
	background: rgba(0,0,0,.45);
	border: none;
	border-radius: 50%;
	box-sizing:border-box;
	width: 80px;
	height: 80px;
	position: absolute;
	display: none;
    z-index: 90;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    cursor: pointer;
    transition: background-color .2s, width .2s, height .2s;
}
.moeplayer .moe-main .moe-center-play::before{
	content: '';
	position: absolute;
	inset: 0;
	background-color: #FFF;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7.5,6.2v11.6c0,.8,.9,1.3,1.6,.9l9.1-5.8c.6-.4,.6-1.4,0-1.8l-9.1-5.8c-.7-.4-1.6,.1-1.6,.9z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7.5,6.2v11.6c0,.8,.9,1.3,1.6,.9l9.1-5.8c.6-.4,.6-1.4,0-1.8l-9.1-5.8c-.7-.4-1.6,.1-1.6,.9z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: 50% 50%;
	mask-position: 50% 50%;
	-webkit-mask-size: 46%;
	mask-size: 46%;
}
.moeplayer .moe-main.moe-main-full .moe-center-play{
	width: 100px;
	height: 100px;
}
.moeplayer .moe-main .moe-center-play:hover{
	width: 100px;
	height: 100px;
	background: var(--moe-accent);
}
.moeplayer .moe-main.moe-main-full .moe-center-play:hover{
	width: 120px;
	height: 120px;
}
/*缓冲动画:CSS 圆弧旋转*/
.moeplayer .moe-main .moe-buffer{
	width: 38px;
	height: 38px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 3px solid rgba(255,255,255,.25);
	border-top-color: var(--moe-accent);
	position: absolute;
    z-index: 100;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: none;
    animation: moe-Circle .8s linear infinite;
	-webkit-animation: moe-Circle .8s linear infinite
}
.moeplayer .moe-main .moe-message{
    position: absolute;
    z-index: 240;
    left:5px;
    bottom: 78px;
    padding: 0 1rem;
    line-height: 30px;
    height: 30px;
    width: auto;
    min-width: 1px;
    border-radius: var(--moe-radius);
    background: var(--moe-overlay-bg);
    font-size: 14px;
    color: var(--moe-overlay-text);
    display: none;
    white-space:nowrap;
}
.moeplayer .moe-main .moe-message-right{
	left:auto;
	right: 5px;
}
.moeplayer .moe-main.moe-main-full .moe-message{
    font-size: 18px;
    bottom: 100px;
}
.moeplayer .moe-main .moe-tip{
    width: auto;
    height: auto;
    position: absolute;
    z-index: 230;
    display: none;
    margin-bottom: 1px;
}
.moeplayer .moe-main .moe-tip .moe-content{
    width: auto;
    height: auto;
    white-space: nowrap;
    min-width: 1px;
    background: var(--moe-overlay-bg);
    font-size: 14px;
    color: var(--moe-overlay-text);
    line-height: 32px;
    height: 32px;
    padding: 0 15px;
}
.moeplayer .moe-main .moe-tip .moe-content-float-auto{
	border-radius: var(--moe-radius);
	margin: auto;
}
.moeplayer .moe-main .moe-tip .moe-content-float-left{
	border-radius: var(--moe-radius);
	float: left;
}
.moeplayer .moe-main.moe-main-full .moe-tip .moe-content{
    font-size: 18px;
}
.moeplayer .moe-main .moe-tip .moe-triangle{
	width: 0px;
	height: 0px;
}
.moeplayer .moe-main .moe-tip .moe-triangle-auto{
	border-left: 8px solid transparent;
    border-top: 8px solid var(--moe-overlay-bg);
    border-right: 8px solid transparent;
    margin: auto;
}
.moeplayer .moe-main .moe-tip .moe-triangle-left{
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 8px solid var(--moe-overlay-bg);
    float: left;
    margin-top: 10px;
}
/*预览(缩略图)*/
.moeplayer .moe-main .moe-preview{
	position: absolute;
    z-index: 210;
    width: 100%;
    left:0;
    bottom: 64px;
    overflow: hidden;
    display: none;
}
.moeplayer .moe-main.moe-main-full .moe-preview{
    bottom: 86px;
}
.moeplayer .moe-main .moe-preview-load-img{
	position: absolute;
    z-index: 210;
    top:110%;
}
.moeplayer .moe-main .moe-preview .moe-preview-bg{
	position: absolute;
    z-index: 1;
    top:0;
	float: left;
	transition: .2s;
}
.moeplayer .moe-main .moe-preview .moe-preview-bg .moe-preview-img{
	background-repeat: no-repeat ;
	float: left;
}
.moeplayer .moe-main .moe-preview .moe-preview-frame{
	position: absolute;
    z-index: 2;
    top:0;
    left:-1000px;
	border:4px solid var(--moe-accent);
	border-radius: 2px;
	box-sizing:content-box;
}
.moeplayer .moe-main .moe-prompt-words{
	position: absolute;
    z-index: 220;
    width: 213px;
    line-height: 23px;
    font-size: 14px;
    color: var(--moe-overlay-text);
    background: var(--moe-overlay-bg);
    overflow: hidden;
    display: none;
    margin-bottom: 10px;
    border-radius: var(--moe-radius);
    -webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: .2s;
	animation-duration: .2s;
	-webkit-animation-name: moe-bounceIn;
	animation-name: moe-bounceIn;
}
.moeplayer .moe-main .moe-prompt-words .moe-prompt-content{
	padding: 5px;
}
.moeplayer .moe-main .moe-layer{
	position: absolute;
	z-index: 101;
}
.moeplayer .moe-main .moe-tempTime{
	position: absolute;
	z-index: 20;
	left:10px;
	bottom: 5px;
	display: none;
	font-size: 14px;
	line-height: 28px;
	color: var(--moe-overlay-text);
}

/*======================== 关于 ========================*/
.moeplayer .moe-main .moe-about{
	position: absolute;
	z-index: 200;
	width: 50%;
	max-width: 600px;
	min-width: 400px;
	left: 1rem;
	top: 1rem;
	background: var(--moe-overlay-bg);
	border-radius: var(--moe-radius);
	padding: 1rem 0;
	display: none;
}
.moeplayer .moe-main .moe-about ul{
	padding: 0;
	margin: 0;
}
.moeplayer .moe-main .moe-about ul li{
	list-style:none;
	color: var(--moe-overlay-text);
	font-size: 12px;
	line-height: 18px;
	height: 18px;
	padding: 0;
	margin: 0;
}
.moeplayer .moe-main .moe-about ul li .moe-about-title{
	width: 100px;
	text-align: right;
	float: left;
	padding-right: .5rem;
}
.moeplayer .moe-main .moe-about ul li .moe-about-content{
	width: auto;
	float: left;
}
.moeplayer .moe-main .moe-about .moe-about-bar{
	position: absolute;
	z-index: 1;
	top: 0;
    right: 0;
    width: 96px;
}
.moeplayer .moe-main.moe-main-full .moe-about .moe-about-bar{
    width: 140px;
}
/*关于-复制按钮图标*/
.moeplayer .moe-main .moe-about .moe-about-bar .moe-btn-about-copy{
	--moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5,15H4a2,2,0,0,1-2-2V4a2,2,0,0,1,2-2h9a2,2,0,0,1,2,2v1'/%3E%3C/svg%3E");
}
/*关于-关闭按钮图标*/
.moeplayer .moe-main .moe-about .moe-about-bar .moe-btn-about-close{
	--moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6,6l12,12M18,6L6,18'/%3E%3C/svg%3E");
}

/*======================== 截图显示容器 ========================*/
.moeplayer .moe-main .moe-screenshot{
	position: absolute;
	z-index: 220;
	width: auto;
	height: 144px;
	margin: auto !important;
	top: 0;
	bottom: 0;
	right: 55px;
	display: none;
}
.moeplayer .moe-main.moe-main-full .moe-screenshot{
	height: 210px;
	right: 77px;
}
.moeplayer .moe-main .moe-screenshot .moe-screenshot-img{
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
}
.moeplayer .moe-main .moe-screenshot .moe-screenshot-img img{
	height: 100%;
}
.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar{
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 36px;
	bottom: 5px;
	text-align: center;
}
.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-btn{
	display: inline-block;
    overflow: hidden;
    border: 0px solid transparent;
    border-radius: var(--moe-radius);
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    font-size: 14px;
    line-height: 30px;
    padding: 0px 15px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #fff;
    margin: 0 5px;
    transition: filter .2s, color .2s, background-color .2s;
}
.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-btn:hover{
	filter: brightness(1.15);
}
.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-btn:focus{
	outline:0;
}
.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-down{
    background-color: var(--moe-accent);
}
.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-close{
    background-color: rgba(96,96,96,.9);
    color: #fff;
}

/*======================== 广告 ========================*/
.moeplayer .moe-main .moe-yytf{
	position: absolute;
	z-index: 800;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
}
.moeplayer .moe-main .moe-yytf .moe-yytf-front-link{
	width: 100%;
	height: 100%;
	display: none;
	cursor: pointer;
}
.moeplayer .moe-main .moe-yytf .moe-yytf-front-picture{
	width: 100%;
	height: 100%;
	background: #000;
	display: none;
	text-align: center;
	line-height: 100%;
}
.moeplayer .moe-main .moe-yytf .moe-yytf-front-picture img{
	max-width: 100%;
	max-height: 100%;
	position: absolute;
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.moeplayer .moe-main .moe-yytf .moe-yytf-top{
	position: absolute;
	z-index: 3;
	top: 10px;
	right: 10px;
}

.moeplayer .moe-main .moe-yytf .moe-yytf-top div{
	float: right;
	margin-left: 10px;
	font-size: 14px;
	border-radius: 15px;
	background: var(--moe-overlay-bg);
	padding: 0px 10px;
	line-height: 30px;
	height: 30px;
	color: var(--moe-overlay-text);
}
.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-top div{
	font-size: 18px;
	border-radius: 20px;
	line-height: 40px;
	height: 40px;
}
.moeplayer .moe-main .moe-yytf .moe-yytf-top .moe-yytf-closetime{
	display: none;
}
.moeplayer .moe-main .moe-yytf .moe-yytf-top .moe-yytf-closead{
	cursor: pointer;
	display: none;
}

/*显示广告时的底部内容*/
.moeplayer .moe-main .moe-yytf .moe-yytf-bottom{
	position: absolute;
	z-index: 3;
	bottom: 10px;
	right: 10px;
}
/*显示广告时的底部按钮-共用(圆形半透明底 + SVG 图标)*/
.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-btn{
	background-color: var(--moe-overlay-bg);
	border: none;
	outline: none;
	width: 30px;
	height: 30px;
	cursor: pointer;
	border-radius: 50%;
	position: relative;
	padding: 0;
	transition: background-color .2s;
}
.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-btn{
	width: 40px;
	height: 40px;	
}
.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-btn::before{
	content: '';
	position: absolute;
	inset: 0;
	background-color: #FFF;
	-webkit-mask-image: var(--moe-icon);
	mask-image: var(--moe-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 16px;
	mask-size: 16px;
	transition: background-color .2s;
}
.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-btn::before{
	-webkit-mask-size: 20px;
	mask-size: 20px;
}
.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-btn:hover::before{
	background-color: var(--moe-icon-hover);
}
/*显示广告时的静音按钮*/
.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit{
	float: right;
	width: 30px;
	height: 30px;
	margin-left: 10px;
	overflow: hidden;
}
.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit{
	width: 40px;
	height: 40px;
}
.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-muted{
	--moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,9.5v5h3.5L13,19V5L7.5,9.5H4z' fill='black' stroke='none'/%3E%3Cpath d='M16,9a4.2,4.2,0,0,1,0,6'/%3E%3Cpath d='M18.4,6.6a7.6,7.6,0,0,1,0,10.8'/%3E%3C/svg%3E");
}
.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-exitmuted{
	--moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,9.5v5h3.5L13,19V5L7.5,9.5H4z' fill='black' stroke='none'/%3E%3Cpath d='M16,9.5l5.5,5.5M21.5,9.5L16,15'/%3E%3C/svg%3E");
}
/*显示广告时的全屏按钮*/
.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit{
	float: right;
	width: 30px;
	height: 30px;
	margin-left: 10px;
	overflow: hidden;
}
.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit{
	width: 40px;
	height: 40px;
}
.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-full{
	--moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5,4H4v4.5M15.5,4H20v4.5M8.5,20H4v-4.5M15.5,20h4.5v-4.5'/%3E%3C/svg%3E");
}
.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-exitfull{
	--moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,8.5h4.5V4M20,8.5h-4.5V4M4,15.5h4.5V20M20,15.5h-4.5V20'/%3E%3C/svg%3E");
}
/*广告查看详情按钮*/
.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-details{
	float: right;
	font-size: 14px;
	border-radius: 15px;
	background: var(--moe-overlay-bg);
	padding: 0 10px;
	color: var(--moe-overlay-text);
	line-height: 30px;
	height: 30px;
}
.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-details{
	font-size: 18px;
	border-radius: 20px;
	line-height: 40px;
	height: 40px;
}
.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-details a{
	color: var(--moe-overlay-text);
	text-decoration: none;
}
/*暂停广告容器*/
.moeplayer .moe-main .moe-pause-yytf{
	display: none;
	position:absolute;
	z-index: 800;
	max-width: 100%;
	max-height: 100%;
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto; 
}
.moeplayer .moe-main .moe-pause-yytf img{
	max-width: 100%;
	max-height: 100%;
}
/*暂停广告关闭按钮(圆形底 + × 图标)*/
.moeplayer .moe-main .moe-pause-close{
	position:absolute;
	z-index: 1;
	right: -15px;
	top:-15px;
	width: 30px;
	height: 30px;
	background-color: var(--moe-overlay-bg);
	border: none;
	outline: none;
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
	transition: background-color .2s;
}
.moeplayer .moe-main .moe-pause-close::before{
	content: '';
	position: absolute;
	inset: 0;
	background-color: #FFF;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7,7l10,10M17,7L7,17'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7,7l10,10M17,7L7,17'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 14px;
	mask-size: 14px;
}
.moeplayer .moe-main .moe-pause-close:hover{
	background-color: var(--moe-accent);
}

/*======================== 右键菜单(挂载在 body 下) ========================*/
.moeplayer-menu{
	width:120px;
	background: var(--moe-menu-bg);
	position: absolute;
	z-index: 9000;
	font-size:14px;
	font-family: var(--moe-font-family);
	border: 1px solid var(--moe-menu-border);
	border-radius: var(--moe-radius);
	box-shadow: var(--moe-popup-shadow);
	padding: 4px 0;
	display: none;
}
.moeplayer-menu .moe-li{
	color: var(--moe-menu-text);
	line-height: 32px;
	padding: 0 0 0 10px;
	cursor: pointer;
	transition: background-color .15s, color .15s;
}
.moeplayer-menu .moe-li:hover{
	background: rgba(127,127,127,.18);
	color: var(--moe-menu-link);
}
.moeplayer-menu .moe-li a{
	color: var(--moe-menu-link);
	text-decoration: none;
}
.moeplayer-menu .moe-underline{
	border-bottom: 1px solid var(--moe-menu-border);
}

/*======================== 控制栏 ========================*/
.moeplayer .moe-main .moe-bar{
	position:absolute;
	z-index: 260;
	left:0px;
	bottom:0px;
	width: 100%;
	height: var(--moe-bar-height);
	background: var(--moe-bar-bg);
	transition: 0.2s;
}
.moeplayer .moe-main.moe-main-full .moe-bar{
	height: var(--moe-bar-height-full);
}
.moeplayer .moe-main .moe-bar.moe-bar-out{
	bottom: -50px;
	transition: 0.2s;
}
.moeplayer .moe-main.moe-main-full .moe-bar.moe-bar-out{
	bottom: -80px;
	transition: 0.2s;
}

/*======================== 按钮公用样式(SVG mask 图标) ========================*/
.moeplayer .moe-main .moe-bar-btn{
	background-color: transparent;
	border: none;
	outline: none;
	width: var(--moe-btn-size);
	height: var(--moe-btn-size);
	cursor: pointer;
	position: relative;
	padding: 0;
	transition: transform .2s;
}
.moeplayer .moe-main.moe-main-full .moe-bar-btn{
	width: var(--moe-btn-size-full);
	height: var(--moe-btn-size-full);
}
/*图标层:颜色跟随 --moe-icon-color,形状由每个按钮的 --moe-icon 决定*/
.moeplayer .moe-main .moe-bar-btn::before{
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--moe-icon-color);
	-webkit-mask-image: var(--moe-icon);
	mask-image: var(--moe-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: var(--moe-icon-size);
	mask-size: var(--moe-icon-size);
	transition: background-color .2s;
}
.moeplayer .moe-main.moe-main-full .moe-bar-btn::before{
	-webkit-mask-size: var(--moe-icon-size-full);
	mask-size: var(--moe-icon-size-full);
}
.moeplayer .moe-main .moe-bar .moe-bar-btn:hover::before,
.moeplayer .moe-main .moe-right-bar .moe-bar-btn:hover::before,
.moeplayer .moe-main .moe-about .moe-bar-btn:hover::before{
	background-color: var(--moe-icon-hover);
}

/*======================== 按钮图标定义 ========================*/
/*播放*/
.moeplayer .moe-main .moe-btn-play{
	--moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8,5.2v13.6c0,.8,.9,1.3,1.6,.9l10.2-6.8c.6-.4,.6-1.4,0-1.8L9.6,4.3c-.7-.4-1.6,.1-1.6,.9z'/%3E%3C/svg%3E");
}
/*暂停*/
.moeplayer .moe-main .moe-btn-pause{
	--moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='6.8' y='5' width='3.6' height='14' rx='1'/%3E%3Crect x='13.6' y='5' width='3.6' height='14' rx='1'/%3E%3C/svg%3E");
}
/*刷新/重播*/
.moeplayer .moe-main .moe-btn-refresh{
	--moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.2,14.9a8.5,8.5,0,1,1-2-8.4L20.5,9'/%3E%3Cpolyline points='20.5,3.8,20.5,9,15.3,9'/%3E%3C/svg%3E");
}
/*音量(非静音)*/
.moeplayer .moe-main .moe-btn-muted{
	--moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,9.5v5h3.5L13,19V5L7.5,9.5H4z' fill='black' stroke='none'/%3E%3Cpath d='M16,9a4.2,4.2,0,0,1,0,6'/%3E%3Cpath d='M18.4,6.6a7.6,7.6,0,0,1,0,10.8'/%3E%3C/svg%3E");
}
/*音量(已静音)*/
.moeplayer .moe-main .moe-btn-exitmuted{
	--moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,9.5v5h3.5L13,19V5L7.5,9.5H4z' fill='black' stroke='none'/%3E%3Cpath d='M16,9.5l5.5,5.5M21.5,9.5L16,15'/%3E%3C/svg%3E");
}
/*全屏*/
.moeplayer .moe-main .moe-btn-full{
	--moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5,4H4v4.5M15.5,4H20v4.5M8.5,20H4v-4.5M15.5,20h4.5v-4.5'/%3E%3C/svg%3E");
}
/*退出全屏*/
.moeplayer .moe-main .moe-btn-exitfull{
	--moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,8.5h4.5V4M20,8.5h-4.5V4M4,15.5h4.5V20M20,15.5h-4.5V20'/%3E%3C/svg%3E");
}
/*网页全屏*/
.moeplayer .moe-main .moe-btn-webfull{
	--moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M10,14l4.5-4.5M14.5,13.2V9.5H10.8'/%3E%3C/svg%3E");
}
/*退出网页全屏*/
.moeplayer .moe-main .moe-btn-exitwebfull{
	--moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M14.5,9.5L10,14M10,10.3V14h3.7'/%3E%3C/svg%3E");
}
/*剧场模式*/
.moeplayer .moe-main .moe-btn-theatre{
	--moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Cpath d='M9,10l-2,2,2,2M15,10l2,2-2,2'/%3E%3C/svg%3E");
}
/*退出剧场模式*/
.moeplayer .moe-main .moe-btn-exittheatre{
	--moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Cpath d='M7,10l2,2-2,2M17,10l-2,2,2,2'/%3E%3C/svg%3E");
}
/*下一集*/
.moeplayer .moe-main .moe-bar-next{
	--moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6,5.7v12.6c0,.8,.9,1.2,1.5,.8l7.6-6.3c.5-.4,.5-1.2,0-1.6L7.5,4.9c-.6-.4-1.5,0-1.5,.8z'/%3E%3Crect x='16.4' y='5.5' width='2.6' height='13' rx='1'/%3E%3C/svg%3E");
}
/*截图*/
.moeplayer .moe-main .moe-btn-screenshot{
	--moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,8h2.6L8.8,5.5h6.4L17.4,8H20a1,1,0,0,1,1,1v9a1,1,0,0,1-1,1H4a1,1,0,0,1-1-1V9a1,1,0,0,1,1-1z'/%3E%3Ccircle cx='12' cy='13' r='3.2'/%3E%3C/svg%3E");
}
/*开启循环(当前处于循环状态)*/
.moeplayer .moe-main .moe-btn-loop-open{
	--moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5,4.5L20,8l-3.5,3.5'/%3E%3Cpath d='M20,8H9a4.5,4.5,0,0,0-4.5,4.5V13'/%3E%3Cpath d='M7.5,19.5L4,16l3.5-3.5'/%3E%3Cpath d='M4,16h11a4.5,4.5,0,0,0,4.5-4.5V11'/%3E%3C/svg%3E");
}
/*关闭循环(当前未循环,循环箭头中带 1)*/
.moeplayer .moe-main .moe-btn-loop-close{
	--moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5,4.5L20,8l-3.5,3.5'/%3E%3Cpath d='M20,8H9a4.5,4.5,0,0,0-4.5,4.5V13'/%3E%3Cpath d='M7.5,19.5L4,16l3.5-3.5'/%3E%3Cpath d='M4,16h11a4.5,4.5,0,0,0,4.5-4.5V11'/%3E%3Cpath d='M12.5,10v4M11.4,10.7l1.1-.7' stroke-width='1.6'/%3E%3C/svg%3E");
}
/*开启小窗口*/
.moeplayer .moe-main .moe-btn-smallwindows-open{
	--moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Crect x='12' y='12' width='6.5' height='4.5' rx='1' fill='black' stroke='none'/%3E%3C/svg%3E");
}
/*关闭小窗口*/
.moeplayer .moe-main .moe-btn-smallwindows-close{
	--moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Crect x='12' y='12' width='6.5' height='4.5' rx='1' stroke-width='1.5'/%3E%3C/svg%3E");
}

/*======================== 播放暂停按钮组 ========================*/
.moeplayer .moe-main .moe-bar .moe-bar-playandpause{
	float: left;
}

/*======================== 返回直播按钮 ========================*/
.moeplayer .moe-main .moe-bar .moe-btn-backlive{
	float: left;
	font-size: 16px;
	line-height: 28px;
	border-radius: var(--moe-radius);
	margin: 10px;
	border: 0px;
	background: var(--moe-accent);
	color: #FFF;
	cursor: pointer;
	padding: 0 8px;
	transition: filter .2s;
}
.moeplayer .moe-main.moe-main-full .moe-bar .moe-btn-backlive{
	font-size: 18px;
	line-height: 36px;
	margin: 17px 10px;
}
.moeplayer .moe-main .moe-bar .moe-btn-backlive:hover{
	filter: brightness(1.15);
}
.moeplayer .moe-main .moe-bar .moe-btn-backlive:focus{
	outline:0;
}
/*======================== 全屏按钮组 ========================*/
.moeplayer .moe-main .moe-bar .moe-bar-fullandexit{
	float: right;
}
.moeplayer .moe-main .moe-bar .moe-bar-fullandexit .moe-btn-exitfull{
	display: none;
}

/*======================== 网页全屏按钮组 ========================*/
.moeplayer .moe-main .moe-bar .moe-bar-webfullandexit{
	float: right;
}
.moeplayer .moe-main .moe-bar .moe-bar-webfullandexit .moe-btn-exitwebfull{
	display: none;
}

/*======================== 剧场模式按钮组 ========================*/
.moeplayer .moe-main .moe-bar .moe-bar-theatreandexit{
	float: right;
}
.moeplayer .moe-main .moe-bar .moe-bar-theatreandexit .moe-btn-exittheatre{
	display: none;
}

/*======================== 播放速度/字幕/清晰度(文字按钮) ========================*/
.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box,
.moeplayer .moe-main .moe-bar .moe-bar-track-box,
.moeplayer .moe-main .moe-bar .moe-bar-definition-box{
	float: right;
	height: var(--moe-bar-height);
	line-height: var(--moe-bar-height);
	position: relative;
	cursor: pointer;
}
.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playbackrate-box,
.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-track-box,
.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-definition-box{
	height: var(--moe-bar-height-full);
	line-height: var(--moe-bar-height-full);
}
.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate,
.moeplayer .moe-main .moe-bar .moe-bar-track-box .moe-bar-track,
.moeplayer .moe-main .moe-bar .moe-bar-definition-box .moe-bar-definition{
	height: 100%;
	padding: 0 10px;
	white-space:nowrap;
	font-size: 14px;
	color: var(--moe-text-color);
	transition: color .2s;
	-moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate,
.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-track-box .moe-bar-track,
.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-definition-box .moe-bar-definition{
	font-size: 18px;
}
.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate:hover,
.moeplayer .moe-main .moe-bar .moe-bar-track-box .moe-bar-track:hover,
.moeplayer .moe-main .moe-bar .moe-bar-definition-box .moe-bar-definition:hover{
	color: var(--moe-text-hover);
}
.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate-bg-box,
.moeplayer .moe-main .moe-bar .moe-bar-track-box .moe-bar-track-bg-box,
.moeplayer .moe-main .moe-bar .moe-bar-definition-box .moe-bar-definition-bg-box{
	width: auto;
	height: auto;
}
.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box:hover .moe-bar-playbackrate-bg-box,
.moeplayer .moe-main .moe-bar .moe-bar-track-box:hover .moe-bar-track-bg-box,
.moeplayer .moe-main .moe-bar .moe-bar-definition-box:hover .moe-bar-definition-bg-box{
	display: block;
}
/*列表切换弹层*/
.moeplayer .moe-main .moe-bar .moe-list-bg-box {
	background: rgba(0,0,0,.001);
	position: absolute;
	z-index: 1;
	bottom: 46px;
	display: none;
	-webkit-animation-duration: .2s;
	animation-duration: .2s;
	-webkit-animation-name: moe-bounceIn;
	animation-name: moe-bounceIn;
}
.moeplayer .moe-main.moe-main-full .moe-bar .moe-list-bg-box {
	bottom: 68px;
}
.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg{
	background: var(--moe-popup-bg);
	float: left;
	border-radius: var(--moe-radius);
	box-shadow: var(--moe-popup-shadow);
	padding: 6px;
	margin-bottom: 10px;
}
.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p{
	width: 100%;
	float: left;
	line-height: 32px;
	color: var(--moe-popup-text);
	text-align: center;
	font-size: 14px;
	background-color: rgba(0,0,0,0);
	border: 0px;
	border-radius: 4px;
	white-space:nowrap;
	cursor: pointer;
	transition: color .15s, background-color .15s;
}
.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p:hover{
	color: var(--moe-popup-hover);
	background: rgba(127,127,127,.15);
}
.moeplayer .moe-main.moe-main-full .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p{
	font-size: 18px;
	line-height: 36px;
}
.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p-focus{
	color: var(--moe-accent);
}
/*下一集按钮*/
.moeplayer .moe-main .moe-bar .moe-bar-next{
	float: left;
}

/*======================== 进度栏 ========================*/
.moeplayer .moe-main .moe-bar .moe-bar-progress{
	width: 100%;
	position:absolute;
	z-index: 1;
	height: 12px;
	top:-11px;
	transition: 0.2s;
}
.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg{
	width: 100%;
	background: var(--moe-progress-bg);
	margin-top: 4px;
	overflow: hidden;
	height: 4px;
	border-radius: 2px;
	transition: .2s;
	cursor: pointer;
}
.moeplayer .moe-main .moe-bar .moe-bar-progress:hover .moe-bar-progress-bg{
	height: 6px;
	margin-top: 3px;
}
.moeplayer .moe-main .moe-bar .moe-bar-progress:hover .moe-bar-progress-bg .moe-bar-progress-load,
.moeplayer .moe-main .moe-bar .moe-bar-progress:hover .moe-bar-progress-bg .moe-bar-progress-play,
.moeplayer .moe-main .moe-bar .moe-bar-progress:hover .moe-bar-progress-bg .moe-bar-progress-mouseline{
	height: 6px;
}
.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-load{
	float: left;
	width: 0px;
	background: var(--moe-progress-buffer);
	height: 4px;
	transition: .2s;
}
.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-play{
	width: 0px;
	background: var(--moe-progress-play);
	position: absolute;
	z-index: 1;
	height: 4px;
	transition: .2s;
	cursor: pointer;
}
.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-mouseline{
	width: 2px;
	background: rgba(255,255,255,.6);
	position: absolute;
	z-index: 2;
	display: none;
	height: 4px;
	cursor: pointer;
}
.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-prompt{
	background: #FFF;
	position: absolute;
	z-index: 3;
	border-radius: 50%;
	width: 10px;
	height: 10px;
	top:1px;
	transition: .2s;
}
.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-slider{
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	float: left;
	z-index: 4;
    left: 0px;
    cursor: pointer;
	width: 14px;
	height: 14px;
	top: -9px;
	background: var(--moe-slider-color);
	box-shadow: 0 1px 4px rgba(0,0,0,.5);
	transition: transform .15s, background-color .15s;
}
.moeplayer .moe-main .moe-bar .moe-bar-progress:hover .moe-bar-progress-slider{
	transform: scale(1.25);
}
.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg:hover .moe-bar-progress-mouseline{
	display: block;
}
/*控制栏隐藏时的细进度条*/
.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out{
	height: 2px;
	top:-2px;
	transition: .2s;
}
.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-bg,.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-load,.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-bg .moe-bar-progress-play{
	height: 2px;
	margin-top: 0;
	border-radius: 0;
	transition: .2s;
}
.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-slider{
	width: 14px;
	height: 2px;
	top: -2px;
	box-shadow: none;
	background: rgba(255,255,255,0);
	transition: .2s;
}
.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-bg .moe-bar-progress-prompt{
	height: 2px;
	top: 0;
	border-radius: 0;
	transition: .2s;
}
.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-slider-move .moe-bar-progress-play,.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-slider-move .moe-bar-progress-slider{
	transition: 0s;
}

/*======================== 音量调节栏 ========================*/
.moeplayer .moe-main .moe-bar .moe-bar-volumebox{
	float: right;
	width: var(--moe-btn-size);
	overflow-x: hidden;
}
.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox{
	width: var(--moe-btn-size-full);
}
/*默认状态-音量调节总外框*/
.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume{
	width: var(--moe-btn-size);
	height: 215px;
	background: rgba(0,0,0,.01);
	position: absolute;
	z-index: 1;
	bottom: 46px;
	display: none;
	overflow: hidden;
}
/*全屏状态-音量调节总外框*/
.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox .moe-bar-volume{
	width: var(--moe-btn-size-full);
	bottom: 68px;
}
/*默认状态-音量调节总外框-鼠标经过时样式*/
.moeplayer .moe-main .moe-bar .moe-bar-volumebox:hover .moe-bar-volume{
	display: block;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: .1s;
	animation-duration: .1s;
	-webkit-animation-name: moe-bounceIn;
	animation-name: moe-bounceIn;
}
/*共用状态-音量调节内部外框*/
.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volumex{
	width: 100%;
	height: 200px;
	float: left;
	background: var(--moe-volume-panel-bg);
	border-radius: var(--moe-radius);
	box-shadow: var(--moe-popup-shadow);
}
/*共用状态-音量调节顶部文字*/
.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-txt{
	width: 100%;
	height: 40px;
	line-height: 40px;
	color: var(--moe-popup-text);
	text-align: center;
	font-size: 1rem;
	float: left;
	overflow: hidden;
	-moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
/*共用状态-音量调节背景色*/
.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-bg{
	width: 6px;
	height: 140px;
	background: var(--moe-volume-bg);
	border-radius: 3px;
	overflow: hidden;
	cursor: pointer;
	margin: auto;
}
/*共用状态-音量调节前景色*/
.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-bg .moe-bar-volume-pp{
	width: 6px;
	height: 140px;
	background: var(--moe-volume-play);
	margin-top: 140px;
}
/*共用状态-音量调节拖动小按钮*/
.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-slider{
	width: 12px;
	height: 12px;
	background: #FFF;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0,0,0,.5);
	position: absolute;
	z-index: 1;
	top: 0px;
    left: 18px;
    cursor: pointer;
}
/*全屏状态-音量调节拖动小按钮*/
.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-slider{
    left: 29px;
}
/*默认状态-显示时间*/
.moeplayer .moe-main .moe-bar .moe-bar-time{
	float: left;
	line-height: var(--moe-bar-height);
	font-size: 14px;
	padding: 0 4px;
	color: var(--moe-text-color);
	-moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
/*全屏状态-显示时间*/
.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-time{
	float: left;
	line-height: var(--moe-bar-height-full);
	font-size: 18px;
	color: var(--moe-text-color);
}

/*======================== 右侧控制栏 ========================*/
.moeplayer .moe-main .moe-right-bar{
	position: absolute;
	z-index: 260;
	top: 0;
    right: 2px;
    bottom: 0;
    margin: auto !important;
	width: var(--moe-btn-size);
	height: 144px;
	background: var(--moe-right-bar-bg);
	border-radius: var(--moe-radius);
	transition: .2s;
}
.moeplayer .moe-main .moe-right-bar-hide{
	right: -48px;
	transition: .2s;
}
.moeplayer .moe-main.moe-main-full .moe-right-bar{
	width: var(--moe-btn-size-full);
	height: 210px;
}
.moeplayer .moe-main.moe-main-full .moe-right-bar-hide{
	right: -70px;
	transition: .2s;
}
/*截图按钮*/
.moeplayer .moe-main .moe-right-bar .moe-btn-screenshot{
	float: left;
}
/*小窗口按钮组*/
.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows{
	float: left;
}
.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows button{
	float: left;
}
.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-close{
	display: none;
}
/*循环按钮组*/
.moeplayer .moe-main .moe-right-bar .moe-right-bar-loop{
	float: left;
}
.moeplayer .moe-main .moe-right-bar .moe-right-bar-loop .moe-btn-loop-close{
	display: none;
}

/*======================== 顶部显示栏 ========================*/
.moeplayer .moe-main .moe-top-bar{
	position: absolute;
	z-index: 260;
	top: -36px;
	width: 100%;
	height: 36px;
	background: var(--moe-top-bar-bg);
	transition: .2s;
}
.moeplayer .moe-main .moe-top-bar-hide{
	top: -36px;
	transition: .2s;
}
.moeplayer .moe-main.moe-main-full .moe-top-bar{
	top: 0;
}
.moeplayer .moe-main.moe-main-full .moe-top-bar-hide{
	top: -36px;
	transition: .2s;
}
.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom{
	position: absolute;
	z-index: 260;
}
.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container{
	float: left;
	margin-left: 10px;
	margin-top: 9px;
	cursor: pointer;
}
.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left{
	float: left;
	width: 20px;
	height: 18px;
	border: 1px solid var(--moe-top-bar-text);
	box-sizing:content-box;
	transition: border-color .2s;
}
.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container:hover .moe-top-bar-zoom-left,
.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container.moe-top-bar-zoom-container-focus .moe-top-bar-zoom-left{
	border-color: var(--moe-accent);
}
.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container:hover .moe-top-bar-zoom-left div,
.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container.moe-top-bar-zoom-container-focus .moe-top-bar-zoom-left div{
	background: var(--moe-accent);
}
.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-right{
	float: left;
	font-size: 14px;
	color: var(--moe-top-bar-text);
	padding-left: 5px;
	transition: color .2s;
}
.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container:hover .moe-top-bar-zoom-right,
.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container.moe-top-bar-zoom-container-focus .moe-top-bar-zoom-right{
	color: var(--moe-accent);
}
.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left .moe-top-bar-zoom-button-50{
	width: 50%;
	height: 50%;
	background: var(--moe-top-bar-text);
	margin: 4.5px 25%;
	transition: background .2s;
}
.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left .moe-top-bar-zoom-button-75{
	width: 75%;
	height: 50%;
	background: var(--moe-top-bar-text);
	margin: 4.5px 12.5%;
	transition: background .2s;
}
.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left .moe-top-bar-zoom-button-100{
	width: 100%;
	height: 50%;
	background: var(--moe-top-bar-text);
	margin: 4.5px 0;
	transition: background .2s;
}
.moeplayer .moe-main .moe-top-bar .moe-top-bar-title{
	position: absolute;
	z-index: 1;
	top: 0px;
	width: 100%;
	height: 36px;
	line-height: 36px;
	text-align: center;
	font-size: 18px;
	color: var(--moe-top-bar-text);
	-moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.moeplayer .moe-main .moe-top-bar .moe-top-bar-time{
	float: right;
	height: 36px;
	line-height: 36px;
	font-size: 14px;
	color: var(--moe-top-bar-text);
	padding: 0 1rem 0;
	-moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

/*======================== 缓动效果 ========================*/
.moe-animate {
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: .3s;
	animation-duration: .3s;
}
.moe-animate-bouncein {
	-webkit-animation-name: moe-bounceIn;
	animation-name: moe-bounceIn;
}

@-webkit-keyframes moe-bounceIn {
	0% {
		opacity: 0;
		-webkit-transform: scale(.5);
		transform: scale(.5)
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@keyframes moe-bounceIn {
	0% {
		opacity: 0;
		-webkit-transform: scale(.5);
		-ms-transform: scale(.5);
		transform: scale(.5);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
	}
}
.moe-animate-bounceout {
	-webkit-animation-name: moe-bounceOut;
	animation-name: moe-bounceOut;
}

@-webkit-keyframes moe-bounceOut {
	0% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale(.5);
		transform: scale(.5);
	}
}

@keyframes moe-bounceOut {
	0% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale(.5);
		transform: scale(.5);
	}
}
.moe-animate-circle {
	animation: moe-Circle 1s linear infinite;
	-webkit-animation: moe-Circle 1s linear infinite
}

@-webkit-keyframes moe-Circle {
	0% {
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg)
	}
	25% {
		transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		-ms-transform: rotate(90deg)
	}
	50% {
		transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
		-ms-transform: rotate(180deg)
	}
	75% {
		transform: rotate(270deg);
		-webkit-transform: rotate(270deg);
		-ms-transform: rotate(270deg)
	}
	100% {
		transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg)
	}
}

@keyframes moe-Circle {
	0% {
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg)
	}
	25% {
		transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		-ms-transform: rotate(90deg)
	}
	50% {
		transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
		-ms-transform: rotate(180deg)
	}
	75% {
		transform: rotate(270deg);
		-webkit-transform: rotate(270deg);
		-ms-transform: rotate(270deg)
	}
	100% {
		transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg)
	}
}

/*
 * MoePlayer 主题:默认(default)
 * 深色渐变控制条 + 蓝色 accent(#00a1d6)
 * 只覆盖 .moeplayer 作用域上的 --moe-* 变量(结构样式见 base.css)
 * (右键菜单 .moeplayer-menu、错误框 .moeplayer-error 挂载在 body 下,需一并覆盖)
 */
.moeplayer, .moeplayer-menu, .moeplayer-error{
	--moe-accent: #00a1d6;
	--moe-icon-color: rgba(255,255,255,.92);
	--moe-icon-hover: #00a1d6;
	--moe-text-color: #FFF;
	--moe-text-hover: #00a1d6;
	--moe-bar-bg: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
	--moe-top-bar-bg: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0));
	--moe-top-bar-text: #FFF;
	--moe-right-bar-bg: rgba(0,0,0,.35);
	--moe-progress-bg: rgba(255,255,255,.25);
	--moe-progress-buffer: rgba(255,255,255,.45);
	--moe-volume-bg: rgba(255,255,255,.25);
	--moe-volume-panel-bg: rgba(0,0,0,.85);
	--moe-popup-bg: rgba(0,0,0,.85);
	--moe-popup-text: #FFF;
	--moe-menu-bg: rgba(0,0,0,.85);
	--moe-menu-text: rgba(255,255,255,.75);
	--moe-menu-link: #FFF;
	--moe-menu-border: rgba(255,255,255,.08);
}