/*自定义属性 颜色*/
:root {
    /* 网站主题色 */
    --web-theme-code: #08364E;
    --web-theme-rgba: 8, 54, 78;
    /* 网站背景色 */
    --web-backdrop-code: #EDE3CC;
    --web-backdrop-rgba: 237, 227, 204;
    /* 网站导航色 */
    --web-navbar-code: #FFFFFF;
    --web-navbar-rgba: 255, 255, 255;
    /* 网站文字色 */
    --web-textfont-code: #000000;
    --web-textfont-rgba: 0, 0, 0;
    /* 网站选项色 */
    --web-option-code: #FFFFFF;
    --web-option-rgba: 255, 255, 255;
    /* 网站着重色 */
    --web-stress-code: #08364E;
    --web-stress-rgba: 8, 54, 78;
    /* 网站标志色 */
    --web-logo-code: #FFBD80;
    --web-logo-rgba: 255, 189, 128;
    /* 网站免责声明色 */
    --web-disclaimer-code: #5E7C8B;
    --web-disclaimer-rgba: 94, 124, 139;
    /* 网站提示色 */
    --web-prompt-code: #666666;
    --web-prompt-rgba: 102, 102, 102;
    /* 链接悬停色 */
    --link-hover-code: #FF2626;
    --link-hover-rgba: 255, 38, 38;
    /* 链接访问色 */
    --link-visited-code: #813C85;
    --link-visited-rgba: 129, 60, 133;
    /* 链接特殊背景色 */
    --link-special-code: #a7a8bd;
    --link-special-rgba: 167, 168, 189;
    /* 按钮悬停色 */
    --button-hover-code: #FFBD80;
    --button-hover-rgba: 255, 189, 128;
    /* 榜单一背景色 */
    --ranking-one-code: #B36D61;
    --ranking-one-rgba: 179, 109, 97;

    /* 常用白色 */
    --common-white-code: #FFFFFF;
    --common-white-rgba: 255, 255, 255;
    /* 常用黑色 */
    --common-black-code: #000000;
    --common-black-rgba: 0, 0, 0;

    /* 系统警示色 */
    --system-warning-code: #C00000;
    --system-warning-rgba: 192, 0, 0;

    /* 自定义——龙葵紫 */
    --custom-longkuizi-code: #322F3B;
    --custom-longkuizi-rgba: 50, 47, 59;

    /* 首页课程表栏目背景色 */
    --index-coursecolumn-code: #581C12;
    --index-coursecolumn-rgba: 88, 28, 18;
    /* 首页课程表标题背景色 */
    --index-coursetitle-code: #A2513C;
    --index-coursetitle-rgba: 162, 81, 60;
    /* 首页课程表文字色 */
    --index-coursetext-code: #FFFFFF;
    --index-coursetext-rgba: 255, 255, 255;
    /* 搜索框背景色 */
    --search-frame-code: #C5464A;
    --search-frame-rgba: 197, 70, 74;
}

/* 液晶PC @media screen and (min-width: 1280px) */
/* 电脑PC @media screen and (min-width: 960px) and (max-width: 1280px) */
/* 平板端 @media screen and (min-width: 600px) and (max-width: 960px) */
/* 手机端 @media screen and (max-width: 600px) */

/*全局*/
* {
    padding: 0;
    margin: 0;
    -webkit-tap-highlight-color: transparent
}

/*网页*/
html {
    width: 100%;
    height: 100%;
    font-size: 10px;
    /* 设置 rem 单位比例 */
    background-color: rgba(var(--web-backdrop-rgba), 1);
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased
}

body {
    width: 100%;
    height: 100%;
    max-width: 2400px;
    color: rgba(var(--web-theme-rgba), 1);
    text-align: left;
    font-size: 1.60rem;
    padding: 0;
    margin: 0 auto;
}

/* 电脑PC */
@media screen and (min-width: 960px) and (max-width: 1280px) {
    html {
        font-size: 9.59px;
    }
}

/* 平板端 */
@media screen and (min-width: 600px) and (max-width: 960px) {
    html {
        font-size: 9.18px;
    }
}

/* 手机端 */
@media screen and (max-width: 600px) {
    html {
        font-size: 8.77px;
    }
}

/* 站位留白
    <div class="html_station_message"><!-- 站位留白--></div>
*/
.html_station_message {
    width: 100%;
    height: 2rem;
    overflow: hidden;
}

/* 超链接 样式*/
a {
    cursor: pointer;
    text-decoration: none;
    color: rgba(var(--web-theme-rgba), 1);
    color: var(--color);
    transition: color 0.3s ease-in-out;
    /* 过渡效果 */
    -webkit-transition: color 0.3s ease-in-out;
    /* Safari */
}

a:hover,
a:focus {
    text-decoration: none;
    color: rgba(var(--link-hover-rgba), 1);
}

/* 视频节目列表 悬浮样式*/
.vlist_style {
    overflow: hidden;
    transition: box-shadow 0.3s ease-in-out;
    /* 过渡效果 */
    -webkit-transition: box-shadow 0.3s ease-in-out;
    /* Safari */
}

.vlist_style:hover,
.vlist_style:focus {
    box-shadow: 0rem 0.2rem 0.6rem rgba(var(--web-theme-rgba), 1);
}

/* 控件 悬浮样式*/
.control_style {
    overflow: hidden;
    background-color: rgba(var(--web-option-rgba), 0.6);
    transition: box-shadow 0.3s ease-in-out;
    /* 过渡效果 */
    -webkit-transition: box-shadow 0.3s ease-in-out;
    /* Safari */
}

.control_style:hover,
.control_style:focus {
    box-shadow: 0rem 0.2rem 0.6rem rgba(var(--web-theme-rgba), 1);
}

/* 按钮 悬浮样式*/
.button_style {
    color: rgba(var(--web-theme-rgba), 1);
    font-weight: 700;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(var(--web-theme-rgba), 1);
    overflow: hidden;
    transition: color 0.3s ease-in-out;
    /* 过渡效果 */
    -webkit-transition: color 0.3s ease-in-out;
    /* Safari */
    transition: background-color 0.3s ease-in-out;
    /* 过渡效果 */
    -webkit-transition: background-color 0.3s ease-in-out;
    /* Safari */
    transition: box-shadow 0.3s ease-in-out;
    /* 过渡效果 */
    -webkit-transition: box-shadow 0.3s ease-in-out;
    /* Safari */
}

.button_style:hover,
.button_style:focus {
    color: rgba(var(--web-theme-rgba), 1);
    background-color: rgba(var(--web-option-rgba), 0.7);
    box-shadow: 0rem 0.2rem 0.6rem rgba(var(--web-theme-rgba), 1);
}

.button_style_yes,
.button_style_yes:hover,
.button_style_yes:focus {
    color: rgba(var(--common-white-rgba), 1);
    font-weight: 700;
    background-color: rgba(var(--web-stress-rgba), 1);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(var(--web-theme-rgba), 1);
    overflow: hidden;
}

/* 按钮图标样式 */
.iconsvg path {
    fill: rgba(var(--web-theme-rgba), 1);
}

/* 图标纯按钮样式 */
.icon_purebtn .iconsvg {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

.icon_purebtn:hover path,
.icon_purebtn:focus path {
    fill: rgba(var(--link-hover-rgba), 1);
}

/* 图标文本按钮样式 */
.icon_textbtn {
    color: rgba(var(--web-theme-rgba), 1);
    font-weight: 700;
    overflow: hidden;
    transition: color 0.3s ease-in-out;
    /* 过渡效果 */
    -webkit-transition: color 0.3s ease-in-out;
    /* Safari */
    transition: background-color 0.3s ease-in-out;
    /* 过渡效果 */
    -webkit-transition: background-color 0.3s ease-in-out;
    /* Safari */
    transition: box-shadow 0.3s ease-in-out;
    /* 过渡效果 */
    -webkit-transition: box-shadow 0.3s ease-in-out;
    /* Safari */
}

.icon_textbtn:hover,
.icon_textbtn:hover path,
.icon_textbtn:focus,
.icon_textbtn:focus path {
    color: rgba(var(--link-hover-rgba), 1);
    fill: rgba(var(--link-hover-rgba), 1);
}

/* 导航栏 */
#header {
    width: 100%;
    height: 5.2rem;
    max-width: 2400px;
    padding: 0.5rem 0;
    margin: 0px auto;
    left: 0px;
    top: 0px;
    z-index: 999;
}

.header_default {
    position: relative;
    background-color: rgba(var(--web-navbar-rgba), 1);
    box-shadow: 0px 0px 0.6rem rgba(var(--web-theme-rgba), 1);
}

.header_float {
    position: fixed;
    background: rgba(var(--web-navbar-rgba), 0) linear-gradient(rgba(var(--web-navbar-rgba), 0.6), rgba(var(--web-navbar-rgba), 0));
    box-shadow: rgba(var(--web-theme-rgba), 0) 0px 0px 0.6rem;
}

#head_occupy {
    width: 100%;
    height: 0rem;
    margin: 0;
    padding: 0;
}

#header span {
    text-decoration: none;
    color: rgba(var(--web-theme-rgba), 1);
}

#header span:hover,
#header span:focus {
    text-decoration: none;
    font-weight: 700;
    color: rgba(var(--web-theme-rgba), 1);
}

#header div.header_nav {
    width: 100%;
    height: 5rem;
    line-height: 5rem;
}

/* 文字Logo */
#header span.logo {
    float: left;
    width: auto;
    height: 5rem;
    margin-left: 12.5%;
    color: rgba(var(--web-logo-rgba), 1);
    font-weight: 700;
    font-size: 2.7rem;
    text-shadow: 0rem 0.2rem 0.4rem rgba(var(--web-stress-rgba), 1);
}

/* 导航栏按钮 */
#header .header_navbtn {
    float: right;
    width: auto;
    height: 5rem;
    margin-right: 12.5%;
    display: flex;
    align-items: center;
}

#header .header_navbtn .icon_purebtn {
    cursor: pointer;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
}

#header .header_navbtn .icon_purebtn+.icon_purebtn {
    margin-left: 1.3rem;
}

#header .header_navbtn #btn_menu {
    display: none;
}

/* 导航栏栏目 */
#header ul.header_navbar {
    float: right;
    width: auto;
    height: auto;
    margin: 0 1rem;
    list-style: none;
    white-space: nowrap;
}

#header ul.header_navbar li {
    float: left;
    font-size: 2.3rem;
    padding: 0 0.5rem;
    margin: 0 0.5rem;
    text-align: center;
}

#header ul.header_navbar .nav-barli-yes {
    font-weight: 700;
    background-image: linear-gradient(to bottom, rgba(var(--web-theme-rgba), 0.8), rgba(var(--web-theme-rgba), 0.8));
    background-repeat: no-repeat;
    background-size: 100% 0.3rem;
    background-position: bottom;
}

/* 正文内容 */
#container {
    width: 80%;
    height: auto;
    margin-left: 10%;
    margin-right: 10%;
    overflow: hidden;
}

/* 小于1480px特殊处理 */
@media screen and (max-width: 1480px) {
    #header ul.header_navbar li {
        width: 6.4rem;
        overflow: hidden;
    }
}

/* 小于1080px特殊处理 */
@media screen and (max-width: 1080px) {
    #header ul.header_navbar li {
        width: 4.2rem;
        overflow: hidden;
    }
}

/* 电脑PC */
@media screen and (min-width: 960px) and (max-width: 1280px) {
    #header span.logo {
        margin-left: 7.5%;
    }

    #header .header_navbtn {
        margin-right: 7.5%;
    }

    #container {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }
}

/* 平板端（含手机端） */
@media screen and (max-width: 960px) {
    #header {
        padding: 0.5rem 0;
        height: 5rem;
        overflow: hidden;
    }

    #header span.logo {
        margin-left: 5%;
    }

    #header .header_navbtn {
        margin-right: 5%;
    }

    #header .header_navbtn #btn_menu {
        display: block;
    }

    #header ul.header_navbar {
        background-color: rgba(var(--web-navbar-rgba), 1);
        margin-top: 1.5rem;
        border-top: solid 1px rgba(var(--web-theme-rgba), 1);
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }

    #header ul.header_navbar li {
        width: 46%;
        padding: 0;
        margin: 0 2%;
    }

    #container {
        width: 100%;
        margin: 0;
    }
}

/* 页脚栏*/
.footer {
    width: 98%;
    background-color: rgba(var(--web-navbar-rgba), 1);
    padding: 1rem 1% 3.5rem 1%;
    text-align: center;
    color: rgba(var(--web-theme-rgba), 1);
}

.footer .Return {
    height: 1rem;
    position: relative;
    top: -3rem;
}

.footer .Return #btn_top {
    display: inline-block;
    cursor: pointer;
    width: 3.6rem;
    height: 3.6rem;
    visibility: hidden;
}

.footer .Datetime {
    height: 1.6rem;
    position: relative;
    top: -0.6rem;
}

.footer .Links {
    font-size: 1.8rem;
}

.footer .Links .first {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}

.footer .Links .plus+.plus:before {
    padding-left: 0.5rem;
    content: " | ";
    padding-right: 0.5rem;
    opacity: 0.4;
}

/*免责声明*/
.footer .Disclaimers {
    margin-top: 1rem;
    font-size: 1.4rem;
    color: rgba(var(--web-disclaimer-rgba), 1);
}



/* 网站公告 滚动样式
    <div class="website_notice_rollcolumn">
        <span class="website_notice_rollcolumn_content">
            滚动公告内容
        </span>
    </div>
*/
.website_notice_rollcolumn {
    width: 100%;
    height: 3.9rem;
    background: linear-gradient(to top, rgba(var(--common-white-rgba), 0.9), rgba(var(--common-white-rgba), 0.5), rgba(var(--common-white-rgba), 0));
    position: fixed;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

.website_notice_rollcolumn .website_notice_rollcolumn_content {
    margin-top: 1.5rem;
    line-height: 2rem;
    display: inline-block;
    /* 文本块级元素转为内联块级 */
    white-space: nowrap;
    /* 不允许文本换行 */
    font-size: 1.8rem;
    /* 字体大小 */
    margin-right: 2rem;
    /* 右侧空隙，用于控制滚动速度 */
    animation: textScroll 20s linear infinite;
    /* 文本滚动动画 */
}

@keyframes textScroll {

    /* 初始状态 */
    0% {
        transform: translateX(100%);
    }

    /* 最终状态 */
    100% {
        transform: translateX(-100%);
    }
}

/* 网站公告 滚动样式 */



/* 推广图文 样式
    <div id="spread_imagetext">
        <img id="spread_imagetext_content" onclick="javascript:window.location.href=\'\';" src="">
        <img id="spread_imagetext_close" onclick="spread_imagetext_close()" src="">
    </div>
    <script> if (New_UserStorage.Local().get(\'spread_imagetext\') != \'false\') { document.getElementById(\'spread_imagetext\').style.display=\'inline-block\'; } function spread_imagetext_close() { New_UserStorage.Local().set(\'spread_imagetext\', \'false\'); document.getElementById(\'spread_imagetext\').style.display=\'none\'; } </script>
*/
#spread_imagetext {
    cursor: pointer;
    position: relative;
    display: none;
}

#spread_imagetext_close {
    cursor: pointer;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.6rem;
    height: 1.6rem;
}

/* 推广图文 样式 */


/* 项标题栏 样式一
        <div class="title_block_one">
            <span class="title">标题</span>
            <span class="tips">提示</span>
            <a class="more icon_purebtn" title="更多" href="更多链接" target="_blank">
                <img class="iconsvg" src="{$xinwu.index}/images/iconfont/iconfont_more.svg{:xw_static_cache('svg')}" onload="XINWUCMS.InjectSVG(this)">
            </a>
        </div>
*/
.title_block_one {
    display: flex;
    /* 垂直居中 */
    align-items: center;
    width: 100%;
    height: 5rem;
    margin-top: 1rem;
    color: rgba(var(--web-theme-rgba), 1);
    line-height: 5rem;
    white-space: nowrap;
    overflow: hidden;
}

.title_block_one .title {
    font-size: 2.3rem;
    font-weight: 700;
    padding: 0 1.5rem;
}

.title_block_one .tips {
    color: rgba(var(--web-prompt-rgba), 1);
    padding: 0 0.5rem;
}

.title_block_one .more {
    width: 3rem;
    height: 3rem;
    margin-left: auto;
    margin-right: 1.3rem;
    font-size: 0;
}

/* 手机端 */
@media screen and (max-width: 600px) {
    .title_block_one {
        margin-top: 0;
    }
}

/* 项标题栏 样式一 */


/* 列表标题栏 样式二
            <div class="title_block_two">
                <span class="title">播放：</span>
                <span>
                    <a class="title_block_two_yes" href="链接一" title="名称一">名称一</a>
                </span>
                <span>
                    <a href="链接二" title="名称二">名称二</a>
                </span>
                <a class="switchlist icon_purebtn" href="javascript:;" onclick="">
                    <img class="iconsvg" src="{$xinwu.index}/images/iconfont/iconfont_listcolumn.svg{:xw_static_cache('svg')}" onload="XINWUCMS.InjectSVG(this)">
                </a>
            </div>
*/
.title_block_two {
    display: flex;
    /* 垂直居中 */
    align-items: center;
    width: 100%;
    height: 5rem;
    line-height: 5rem;
    white-space: nowrap;
    overflow: hidden;
}

.title_block_two span {
    font-size: 2.0rem;
    padding-right: 0.6rem;
}

.title_block_two .title {
    font-size: 2.3rem;
    font-weight: 700;
    padding-left: 0.6rem;
    padding-right: 0rem;
}

.title_block_two .title_block_two_yes {
    font-size: 2.0rem;
    font-weight: 700;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    border-bottom: 0.3rem solid rgba(var(--web-theme-rgba), 0.8);
    padding-bottom: 0.3rem;

}

.title_block_two .switchlist {
    width: 3rem;
    height: 3rem;
    margin-left: auto;
    margin-right: 0.6rem;
    font-size: 0;
}

/* 列表标题栏 样式一 */


/* 位置路径 样式一
    <div class="position_one_route">
        <a href="">首頁</a>
        &ensp;\&ensp;<a href="">选项</a>
        &ensp;\&ensp;<a href="">默认</a>
    </div>
*/
.position_one_route {
    width: 100%;
    font-size: 1.8rem;
    line-height: 1.3;
    padding: 1.5rem 1rem;
    box-sizing: border-box;
}

/* 位置路径 样式一 */


/* 选项列表 样式一
    <div class="option_one_list">
        <a href="">
            <div class="option_term_name option_term_yes control_style">
                默认
            </div>
        </a>
        <a href="">
            <div class="option_term_name control_style">
                选项一
            </div>
        </a>
    </div>
*/
.option_one_list {
    font-size: 1.9rem;
    line-height: 5rem;
    padding: 0 1rem;
    box-sizing: border-box;
}

.option_one_list .option_term_name {
    padding-left: 1rem;
    padding-right: 1rem;
    color: rgba(var(--web-theme-rgba), 1);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 0.6rem;
    border-radius: 0.6rem;
}

.option_one_list .option_term_yes {
    color: rgba(var(--common-white-rgba), 1);
    background-color: rgba(var(--web-stress-rgba), 1);
    border-radius: 0.6rem;
}

/* 选项列表 样式一 */


/* 选项菜单 样式二
    <div class="option_two_column">
        <a href="">
            <div class="option_term_name option_term_yes control_style">
                默认
            </div>
        </a>
        <a href="">
            <div class="option_term_name control_style">
                选项一
            </div>
        </a>
    </div>
*/
.option_two_column {
    width: 100%;
    height: 5rem;
    font-size: 1.9rem;
    padding: 0.2rem 0;
    padding-left: 0.5rem;
    margin: 0.1rem 0;
    box-sizing: border-box;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    /* firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}

.option_two_column::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
}

.option_two_column a {
    display: inline-block;
    margin-right: 0.5rem;
}

.option_two_column .option_term_name {
    line-height: 4.6rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    color: rgba(var(--web-theme-rgba), 1);
    white-space: nowrap;
    overflow: hidden;
    border-radius: 0.6rem;
}

.option_two_column .option_term_yes {
    color: rgba(var(--common-white-rgba), 1);
    background-color: rgba(var(--web-stress-rgba), 1);
    border-radius: 0.6rem;
}

/* 选项菜单 样式二 */


/* 视频列表 基础样式 */
.video_base_item ._name {
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
}

.video_base_item ._type {
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
}

.video_base_item ._time {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    direction: rtl;
}

.video_base_item ._num {
    opacity: 0.7;
    filter: alpha(opacity=60);
    -webkit-filter: alpha(opacity=60);
    white-space: nowrap;
    overflow: hidden;
    color: rgba(var(--common-white-rgba), 1);
    background: rgba(var(--web-stress-rgba), 0.6);
    padding: 0.1rem 0.5rem;
    border-radius: 0.6rem;
}

.video_base_item ._brief {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 视频列表 基础样式 */


/* 视频列表 样式一

	<div class="video_one_list">
		<div class="video_one_item video_base_item vlist_style" id="video_one_item">
            <a href="视频链接" title="名称" target="_blank">
                <div class="videoi_one_img" id="videoi_one_img">
                    <img src="缩略图" alt="名称" />
                    <span class="_time">时间</span>
                    <span class="_num">集数</span>
                </div>
                <div class="videoi_one_info">
                    <span class="_name">名称</span>
                    <span class="_type">分类</span>
                </div>
            </a>
        </div>
    </div>
*/
.video_one_list {
    width: 100%;
    height: auto;
    margin-bottom: 2rem;
    overflow: hidden;
}

.video_one_item {
    float: left;
    width: 24%;
    text-align: center;
    margin: 0.5% 0.5%;
    overflow: hidden;
    border-radius: 0.6rem;
}

.video_one_item .videoi_one_img {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
}

.video_one_item .videoi_one_img img {
    width: 100%;
    height: 100%;
}

.video_one_item .videoi_one_img ._time {
    max-width: 98%;
    color: rgba(var(--common-white-rgba), 0.8);
    text-shadow: 1px 2px 3px rgba(var(--web-theme-rgba), 0.8);
    position: absolute;
    top: 0.5rem;
    left: 1.5%;
}

.video_one_item .videoi_one_img ._num {
    max-width: 98%;
    position: absolute;
    bottom: 0.5rem;
    right: 1.5%;
}

.video_one_item .videoi_one_info {
    position: relative;
    padding: 0.6rem 0.5rem 0.5rem 0.5rem;
    background: linear-gradient(to top, rgba(var(--web-option-rgba), 0.8), rgba(var(--web-option-rgba), 0.1));
}

.video_one_item .videoi_one_info span {
    line-height: 3rem;
    display: inline-block;
    overflow: hidden;
}

.video_one_item .videoi_one_info ._name {
    width: 100%;
    white-space: nowrap;
    text-shadow: 1px 2px 3px rgba(var(--common-white-rgba), 0.8);
}

.video_one_item .videoi_one_info ._type {
    display: none;
    width: 98.5%;
    color: rgba(var(--web-theme-rgba), 0.4);
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: 1.5%;
}

/* 电脑PC */
@media screen and (min-width: 960px) and (max-width: 1280px) {
    .video_one_item {
        width: 32.33%;
    }
}

/* 平板端 */
@media screen and (min-width: 600px) and (max-width: 960px) {
    .video_one_item {
        width: 48%;
        margin: 1% 1%;
    }
}

/* 手机端 */
@media screen and (max-width: 600px) {
    .video_one_item {
        width: 96%;
        margin: 1% 2%;
        position: relative;
        min-height: calc(3rem * 3);
    }

    .video_one_item .videoi_one_img {
        float: left;
        width: 40%;
        min-height: calc(3rem * 3);
    }

    .video_one_item .videoi_one_info {
        float: left;
        width: calc(60% - 1rem);
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
    }

    .video_one_item .videoi_one_info ._name {
        max-height: 6rem;
        font-size: 1.8rem;
        line-height: 3rem;
        white-space: normal;
    }

    .video_one_item .videoi_one_info ._type {
        display: block;
    }
}

/*视频列表 样式一*/

/* 视频列表 样式二

	<div class="video_two_list">
		<div class="video_two_item video_base_item vlist_style" id="video_two_item">
            <a href="视频链接" title="名称" target="_blank">
                <div class="videoi_two_img" id="videoi_two_img">
                    <img src="缩略图" alt="名称" />
                    <span class="_num">集数</span>
                </div>
                <div class="videoi_two_info">
                    <span class="_name">名称</span>
                    <span class="_time">时间</span>
                    <span class="_type">类型</span>
                </div>
            </a>
        </div>
    </div>
*/
.video_two_list {
    width: 100%;
    height: auto;
    margin-bottom: 2rem;
    overflow: hidden;
}

.video_two_item {
    float: left;
    width: 24%;
    text-align: left;
    margin: 0.5% 0.5%;
    overflow: hidden;
    border-radius: 0.6rem;
}

.video_two_item .videoi_two_img {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
}

.video_two_item .videoi_two_img img {
    width: 100%;
    height: 100%;
}

.video_two_item .videoi_two_img ._num {
    max-width: 98%;
    position: absolute;
    bottom: 0.5rem;
    right: 1.5%;
}

.video_two_item .videoi_two_info {
    position: relative;
    padding: 0 0.5rem 0.5rem 0.5rem;
    background: linear-gradient(to top, rgba(var(--web-option-rgba), 0.8), rgba(var(--web-option-rgba), 0.1));
}

.video_two_item .videoi_two_info span {
    display: inline-block;
    overflow: hidden;
}

.video_two_item .videoi_two_info ._name {
    width: 100%;
    height: 6rem;
    font-size: 1.8rem;
    line-height: 3rem;
    margin-bottom: 2.6rem;
}

.video_two_item .videoi_two_info ._time {
    max-width: 45%;
    color: rgba(var(--web-theme-rgba), 0.4);
    text-shadow: 1px 2px 3px rgba(var(--web-theme-rgba), 0.2);
    line-height: 2.6rem;
    position: absolute;
    bottom: 0.5rem;
    left: 4.5%;
}

.video_two_item .videoi_two_info ._type {
    max-width: 45%;
    color: rgba(var(--web-theme-rgba), 0.4);
    text-shadow: 1px 2px 3px rgba(var(--web-theme-rgba), 0.2);
    line-height: 2.6rem;
    position: absolute;
    bottom: 0.5rem;
    right: 4.5%;
}

/* 电脑PC */
@media screen and (min-width: 960px) and (max-width: 1280px) {
    .video_two_item {
        width: 32.33%;
    }
}

/* 平板端（含手机端） */
@media screen and (max-width: 960px) {
    .video_two_item {
        width: 48%;
        margin: 1% 1%;
    }
}

/*视频列表 样式二*/

/* 视频列表 样式三

	<div class="video_three_list">
        <a href="视频链接" title="名称" target="_blank">
		    <div class="video_three_item video_base_item vlist_style" id="video_three_item">
                <div class="videoi_three_img" id="videoi_three_img">
                    <img src="缩略图" alt="名称" />
                </div>
                <div class="videoi_three_info">
                    <span class="_name">名称</span>
                    <span class="_brief">简介</span>
                </div>
                <div class="videoi_three_other">
                    <span class="_time">时间</span>
                    <span class="_type">类型</span>
                </div>
            </div>
        </a>
    </div>
    <script>
    //此样式需配合js检测 窗口大于368px时 获取父控件item的高减缩略图img的高除2结果设置为缩略图img的外边距
    //还需js检测 窗口小于368px时 设置缩略图img的外边距为0
    </script>
*/
.video_three_list {
    width: 100%;
    height: auto;
    margin-bottom: 2rem;
    overflow: hidden;
}

.video_three_item {
    width: 96%;
    min-height: calc(3rem * 3);
    text-align: left;
    margin: 1% 2%;
    overflow: hidden;
    border-radius: 0.6rem;
    background: linear-gradient(to top, rgba(var(--web-option-rgba), 0.8), rgba(var(--web-option-rgba), 0.1));
    position: relative;
}

.video_three_item .videoi_three_img {
    float: left;
    width: 40%;
    height: auto;
    min-height: calc(3rem * 3);
    overflow: hidden;
}

.video_three_item .videoi_three_img img {
    width: 100%;
    height: 100%;
}

.video_three_item span {
    overflow: hidden;
    display: inline-block;
}

.video_three_item .videoi_three_info {
    float: left;
    width: 58%;
    line-height: 1.5;
    padding-left: 1%;
    padding-right: 1%;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 3rem;
}

.video_three_item .videoi_three_info ._name {
    width: 100%;
    font-size: 1.8rem;
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
    line-height: 3rem;
}

.video_three_item .videoi_three_info ._brief {
    width: 100%;
    color: rgba(var(--web-theme-rgba), 0.6);
    text-overflow: -o-ellipsis-lastline;
    display: -webkit-box;
    /*特别显示模式*/
    -webkit-line-clamp: 7;
    /*行数*/
    line-clamp: 7;
    -webkit-box-orient: vertical;
    /*盒子中内容竖直排列*/
}

.video_three_item .videoi_three_other {
    float: left;
    width: 58%;
    height: 3rem;
    line-height: 3rem;
    padding-left: 1%;
    padding-right: 1%;
    position: absolute;
    right: 0;
    bottom: 0;
}

.video_three_item .videoi_three_other ._time {
    float: left;
    max-width: 45%;
    color: rgba(var(--web-theme-rgba), 0.4);
    position: absolute;
    bottom: 0;
    left: 2.5%;
}

.video_three_item .videoi_three_other ._type {
    float: left;
    max-width: 45%;
    color: rgba(var(--web-theme-rgba), 0.4);
    position: absolute;
    bottom: 0;
    right: 2.5%;
}

@media screen and (max-width: 2108px) {
    .video_three_item .videoi_three_info ._brief {
        /*特别显示模式*/
        -webkit-line-clamp: 6;
        /*行数*/
        line-clamp: 6;
    }
}

@media screen and (max-width: 1808px) {
    .video_three_item .videoi_three_info ._brief {
        /*特别显示模式*/
        -webkit-line-clamp: 5;
        /*行数*/
        line-clamp: 5;
    }
}

@media screen and (max-width: 1508px) {
    .video_three_item .videoi_three_info ._brief {
        /*特别显示模式*/
        -webkit-line-clamp: 4;
        /*行数*/
        line-clamp: 4;
    }
}

@media screen and (max-width: 1208px) {
    .video_three_item .videoi_three_info ._brief {
        /*特别显示模式*/
        -webkit-line-clamp: 3;
        /*行数*/
        line-clamp: 3;
    }
}

@media screen and (max-width: 908px) {
    .video_three_item .videoi_three_info ._brief {
        /*特别显示模式*/
        -webkit-line-clamp: 2;
        /*行数*/
        line-clamp: 2;
    }
}

@media screen and (max-width: 708px) {
    .video_three_item .videoi_three_info ._brief {
        /*特别显示模式*/
        -webkit-line-clamp: 1;
        /*行数*/
        line-clamp: 1;
    }
}

/* 手机端 */
@media screen and (max-width: 600px) {
    .video_three_item .videoi_three_info ._brief {
        display: none;
    }
}

/*视频列表 样式三*/


/*视频榜单 样式一

    <div class="video_ranking_one">
        <div class="vranking_one_table">
            <div class="title_block_one">
                <span class="title">熱榜：</span>
            </div>
            <div class="vranking_one_list">
                <div class="vranking_one_item vlist_style">
                    <a href="视频链接" title="名称">
                        <span class="vranking_one_name">
                            <span class="vranking_one_key">序号</span>
                            <span class="vranking_one_heat">热度数</span>
                            &nbsp;视频名称
                            &ensp;<span class="vranking_one_num">共多少集</span>
                        </span>
                    </a>
                </div>
            </div>
        </div>
        <div class="vranking_one_table">
            <div class="title_block_one">
                <span class="title">熱榜：</span>
            </div>
            <div class="vranking_one_list">
                <div class="vranking_one_item vlist_style">
                    <a href="视频链接" title="名称">
                        <span class="vranking_one_name">
                            <span class="vranking_one_key">序号</span>
                            <span class="vranking_one_heat">热度数</span>
                            &nbsp;视频名称
                            &ensp;<span class="vranking_one_num">共多少集</span>
                        </span>
                    </a>
                </div>
            </div>
        </div>
        <div class="vranking_one_table">
            <div class="title_block_one">
                <span class="title">熱榜：</span>
            </div>
            <div class="vranking_one_list">
                <div class="vranking_one_item vlist_style">
                    <a href="视频链接" title="名称">
                        <span class="vranking_one_name">
                            <span class="vranking_one_key">序号</span>
                            <span class="vranking_one_heat">热度数</span>
                            &nbsp;视频名称
                            &ensp;<span class="vranking_one_num">共多少集</span>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
*/
.video_ranking_one {
    display: inline-block;
    width: 100%;
    height: auto;
    margin-bottom: 2rem;
    overflow: hidden;
}

.vranking_one_table {
    float: left;
    width: 33.3333%;
    margin-bottom: 2rem;
}

.vranking_one_table .vranking_one_list {
    width: 94%;
    margin-left: 1.5%;
    margin-right: 1.5%;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    padding-left: 1.5%;
    padding-right: 1.5%;
    border-radius: 0.6rem;
    background: linear-gradient(to bottom, rgba(var(--web-option-rgba), 0.3), rgba(var(--web-option-rgba), 0.1));
}

.vranking_one_table .vranking_one_list .vranking_one_item {
    height: 4rem;
    border-radius: 0.6rem;
    margin-bottom: 0.6rem;
}

.vranking_one_table .vranking_one_list .vranking_one_item .vranking_one_name {
    display: inline-block;
    width: 96%;
    line-height: 4rem;
    padding-left: 2%;
    padding-right: 2%;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.vranking_one_table .vranking_one_list .vranking_one_item .vranking_one_name .vranking_one_key {
    float: left;
}

.vranking_one_table .vranking_one_list .vranking_one_item .vranking_one_name .vranking_one_heat {
    opacity: 0.7;
    font-weight: 100;
    float: right;
}

.vranking_one_table .vranking_one_list .vranking_one_item .vranking_one_name .vranking_one_num {
    opacity: 0.7;
    font-weight: lighter;
}

.vranking_one_table .vranking_one_list .vranking_one_item:nth-child(1) {
    background: linear-gradient(to right, rgba(var(--ranking-one-rgba), 0.3), rgba(var(--common-white-rgba), 0.1));
}

.vranking_one_table .vranking_one_list .vranking_one_item:nth-child(1) .vranking_one_name {
    font-weight: 900;
}

.vranking_one_table .vranking_one_list .vranking_one_item:nth-child(2) {
    background: linear-gradient(to right, rgba(var(--ranking-one-rgba), 0.2), rgba(var(--common-white-rgba), 0.1));
}

.vranking_one_table .vranking_one_list .vranking_one_item:nth-child(2) .vranking_one_name {
    font-weight: 700;
}

.vranking_one_table .vranking_one_list .vranking_one_item:nth-child(3) {
    background: linear-gradient(to right, rgba(var(--ranking-one-rgba), 0.1), rgba(var(--common-white-rgba), 0.1));
}

.vranking_one_table .vranking_one_list .vranking_one_item:nth-child(3) .vranking_one_name {
    font-weight: 500;
}

/* 平板端 */
@media screen and (min-width: 600px) and (max-width: 960px) {
    .vranking_one_table {
        float: left;
        width: 50%;
    }
}

/* 手机端 */
@media screen and (max-width: 600px) {
    .vranking_one_table {
        float: none;
        width: 100%;
    }
}

/*视频榜单 样式一*/


/* 列表分页 样式一
        <div class="list_paging_one">
            <div class="page_tip">共10條數據&ensp;|&ensp;當前1/2頁</div>
            <div class="page_info">
                <a class="page_link control_style" href="" title="首頁">首頁</a>
                <a class="page_link control_style" href="" title="上頁">上頁</a>
                <a class="page_link page_current" href="javascript:;" title="第1頁">1</a>
                <a class="page_link control_style" href="" title="第2頁">2</a>
                <a class="page_link control_style" href="" title="下頁">下頁</a>
                <a class="page_link control_style" href="" title="尾頁">尾頁</a>

                <input class="page_input" type="text" placeholder="頁碼" id="page" autocomplete="off" style="width:40px">
                <button class="page_btn mac_page_go" type="button" data-url="" data-total="" data-sp="">跳轉</button>
            </div>
        </div>
*/
.list_paging_one {
    width: 100%;
    clear: both;
    overflow: hidden;
}

.list_paging_one .page_tip {
    width: 100%;
    margin-top: 1rem;
    text-align: center;
}

.list_paging_one .page_info {
    width: 100%;
    text-align: center;
    line-height: 2.2;
    margin-top: 1.6rem;
    margin-bottom: 1.6rem;
}

.list_paging_one .page_info .page_link {
    padding: 0.5rem 1rem;
    border-radius: 0.6rem;
    white-space: nowrap;
}

.list_paging_one .page_info .special_link {
    background-color: rgba(var(--link-special-rgba), 1);
}

.list_paging_one .page_info .page_current {
    color: rgba(var(--common-white-rgba), 1);
    font-weight: 700;
    background-color: rgba(var(--web-stress-rgba), 1);
}

.list_paging_one .page_info .page_input {
    padding: 0.3rem 1rem;
    border-radius: 0.6rem;
}

.list_paging_one .page_info .page_btn {
    padding: 0.3rem 1rem;
    border-radius: 0.6rem;
}

/* 列表分页 样式一 */


/*搜索框 样式一
    <form class="search_bar_one">
        <input type="text" placeholder="请输入您要搜索的内容...">
        <button type="submit"></button>
    </form>
*/
.search_bar_one {
    position: relative;
    width: 100%;
    max-width: 60rem;
    margin: 0 auto;
}

.search_bar_one * {
    box-sizing: border-box;
}

.search_bar_one input {
    width: 100%;
    height: 4.2rem;
    color: rgba(var(--web-theme-rgba), 1);
    padding-left: 1.3rem;
    padding-right: 4.6rem;
    border: 2px solid rgba(var(--search-frame-rgba), 1);
    border-radius: 0.6rem;
    background: transparent;
    top: 0;
    right: 0;
    outline: none;
}

.search_bar_one button {
    height: 4.2rem;
    width: 4.2rem;
    cursor: pointer;
    position: absolute;
    background: rgba(var(--search-frame-rgba), 1);
    border-radius: 0 0.6rem 0.6rem 0;
    width: 6rem;
    top: 0;
    right: 0;
    border: none;
    outline: none;
}

.search_bar_one button:before {
    content: "搜索";
    font-size: 1.9rem;
    color: rgba(var(--common-white-rgba), 1);
}

/*搜索框 样式一*/









/*弹出层*/
.mac_pop_bg {
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--common-black-rgba), 0.5);
}

.mac_pop {
    z-index: 100;
    display: none;
    border-radius: 0.6rem;
    width: 90% !important;
    max-width: 66rem;
    min-height: 0.5rem;
    height: auto !important;
    max-height: 95%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    padding: 1rem;
    background-color: rgba(var(--common-white-rgba), 1);
    box-shadow: 0 5rem 15rem 0 rgba(var(--common-black-rgba), .15);
}

.mac_pop .pop_top {
    height: 3.5rem;
    width: 100%;
    text-align: center;
}

.mac_pop .pop_top h2 {
    font-size: 2.0rem;
    font-family: "microsoft yahei";
    color: rgba(var(--web-theme-rgba), 1);
    display: inline-block;
    margin: 0 auto;
    font-weight: normal;
}

.mac_pop span.pop_close {
    display: none;
}

.mac_pop .bgPop {
    display: none;
    position: absolute;
    z-index: 129;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--common-black-rgba), .2);
}

.mac_pop .pop-msg {
    text-align: center;
}

.mac_pop_msg_bg {
    position: fixed;
    z-index: 129;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--common-black-rgba), .2);
}

.mac_pop_msg {
    z-index: 999;
    display: none;
    min-height: 2rem;
    max-height: 75rem;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    padding: 2.5rem;
    z-index: 130;
    border-radius: 0.6rem;
    background-color: rgba(var(--common-white-rgba), 1);
    box-shadow: 0 3px 18px rgba(var(--common-black-rgba), .5);
}

.mac_pop_msg .pop-msg {
    text-align: center;
}

/*报错*/
.mac_report {
    padding: 2rem 0;
}

.gbook_content {
    width: 98%;
    min-height: 12rem;
    padding: 0.5rem;
}

.gbook_form textarea,
.msg_code input:focus {
    outline: 0;
    border: 1px solid #f1f1f1;
    background: #f4f4f4;
    border-radius: 0.6rem;
}

.mac_report .msg_code {
    padding: 1.25rem 0 1.38rem 0;
}

.gbook_font .msg_code {
    display: none;
}

.mac_report .remaining-r,
.remaining_w {
    padding: 0 0.5rem;
    border: 1px solid #f4f4f4;
    background-color: #f4f4f4;
    width: 98%;
    line-height: 3rem;
    text-align: center;
    margin-bottom: 1.38rem;
    border-radius: 0.6rem;
}

.mac_report .msg_code input:focus,
.mac_report .msg_code input,
.gbook_form .verify {
    width: 60%;
    height: 5.5rem;
    padding: 0 0.25rem;
    border: 1px solid #f4f4f4;
    line-height: 1.125rem;
    background: #f4f4f4;
    border-radius: 0.6rem;
    vertical-align: middle;
}

.mac_report .msg_code img,
.gbook_form .comm-code {
    cursor: pointer;
    height: 5.5rem;
    margin-left: 2%;
    border: 1px solid #f4f4f4;
    margin-top: 0rem;
    width: 30%;
    border-radius: 0.6rem;
    vertical-align: middle;
}

.gbook_submit {
    float: none;
    width: 21%;
    height: 5rem;
    background: rgba(var(--web-theme-rgba), 1) !important;
    color: rgba(var(--common-white-rgba), 1);
    border: 1px solid rgba(var(--web-theme-rgba), 1) !important;
    display: block;
    cursor: pointer;
    border-radius: 0.6rem;
}