.cf-player,
.cf-player::before,
.cf-player::after {
    box-sizing: border-box;
}

.cf-player {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow:auto;
    background-color: #F1F5F9;
}

/* PC端添加12px圆角 */
.cf-player--pc {
    border-radius: 12px;
}

.cf-player__viewport {
    position: absolute;
    top: 0;
    left: 0;
}


.cf-player__mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: black;
    background: white;
}

.cf-player__mask__text {
    font-size: 16px;
    margin-left: 16px;
}

.cf-player--dark {
    background-color: #1D293D;
}

.cf-player--dark .cf-player__mask {
    color: white;
    background: black;
}

.cf-player--dark .cf-player__mask__text {
    color: white;
}

.cf-player__controls {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 50;
    pointer-events: none;
    width: 100%;
}

.cf-player__controls > * {
    pointer-events: auto;
}

/* ================================================================================================
   控件容器样式
   ================================================================================================ */

/* PC 端控件容器 */
.cf-player__controls--pc {
    padding: 8px;
}

/* iPad 端控件容器 */
.cf-player__controls--ipad {
    padding: 32px;
}

/* 移动端控件容器 */
.cf-player__controls--mobile {
    padding: 32px;
}


