.long-userinfo-box {
cursor: pointer;
display: flex;
align-items: center;
position: relative;
}

.long-userinfo-box ul {
background: white;
border-radius: 5px;
margin-top: 15px;
box-shadow: 0px 0px 5px rgba(1,1,1,0.3);
white-space: nowrap;
overflow: hidden;
}

.long-userinfo-box li {
padding: 8px 18px;
}

.long-userinfo-box li:hover {
color: #47a2ff;
background: #ecf5ff;
}

.long-userinfo-drop {
position: absolute;
top: 100%;
display: none;
}

.long-userinfo-box:hover .long-userinfo-drop {
display: unset;
}

.el-dropdown-box {
position: relative;
cursor: pointer;
margin-right: 0.5em;
z-index: 10;
}

.el-dropdown-menu {
position: absolute;
padding-top: 28px;
transform: translateX(-50%);
top: 10px;
display: none;
}

.el-dropdown-menu ul {
background-color: white;
padding: 8px;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
width: 260px;
}

.ling-dang-item {
padding: 6px 12px;
font-size: 14px;
white-space: nowrap;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}

.ling-dang-item:hover {
color: #009ee7;
}
/*.ling-dang-item::after{
content:'NEW';
color:white;
background-color:red;
font-size:10px;
padding:3px;
border-radius:4px;
}*/
.el-dropdown-box:hover .el-dropdown-menu {
display: unset;
}

.van-swipe-item {
cursor: pointer;
}

.container {
width: 80%;
margin: 20px auto;
}

.tab-nav {
display: flex;
border-bottom: 1px solid #ccc;
margin-bottom: 20px;
justify-content: space-between;
}

.tab-nav .tab {
    background-color: transparent;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}

    .tab-nav .tab.active {
        border-bottom: 2px solid #038dff;
        color: #038dff;
    }

.filter-checkbox {
margin-right: 10px;
}

.scene-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 20px;
}

.scene-card {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
background-color: #fff;
width: calc((100% - 160px) / 4);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: normal;
}

.scene-card .scene-button-container {
display:flex;
margin-top:10px;
}

.scene-card .scene-button-container .scene-button-detail {
width: 70%;
}

.scene-card .scene-button-container .scene-button-start {
width: 30%;
text-align:right;
}

.scene-card .scene-img {
margin-top:12px;
height: 160px;
text-align: center;
vertical-align: middle;
}

.scene-card img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
margin-bottom: 10px;
}

.scene-size {
font-size: 14px;
color: #666;
display:none;
}

.scene-title {
font-size:16px;
}

.no-more {
text-align: center;
color: #999;
margin-top: 20px;
}

.tdright {
text-align: right;
width: 33%
}

.detail_layer_container {
font-size:14px;
width:75%;
padding:3%;
margin:0 auto;
display:flex;
}

.detail_layer_container .detail_container_left {
width: 40%;
margin: 0 auto;
display: flex;
justify-content: center;
}

.detail_layer_container .detail_container_right {
width: 55%;
margin-left: 2%;
}

.detail_layer_container .detail_cover {
display: flex;
}

.detail_layer_container .detail_cover img {
object-fit: contain;
}

.detail_layer_container .detail_info {
margin-top: 12px;
display: flex;
}

.detail_layer_container .detail_info .detail_info_left {
}

.detail_layer_container .detail_info .detail_info_right {
}



.detail_container {
font-size: 14px;
width: 75%;
padding: 3%;
margin: 0 auto;
background-color:white;
display: flex;
}


.detail_container .detail_container_left {
width: 65%;
margin: 0 auto;
justify-content: center;
border-right: 1px solid #ececec;
padding-right:10px;
}

.detail_container .detail_container_right {
width: 30%;
margin-left: 2%;
}

.detail_container .detail_cover {
display: flex;
}

.detail_container .detail_cover img {
object-fit: contain;
}

.detail_container .detail_info {
margin-top: 12px;
display: flex;
}

.detail_container .detail_info .detail_info_left {
}

.detail_container .detail_info .detail_info_right {
}

.detail_container .rank_list {
width:100%;
margin:10px;
}

.detail_container .rank_list .rank_item {
display: flex;
border-bottom: solid 1px #ececec;
padding-bottom: 10px;
margin-top: 15px;
}

.detail_container .rank_list .rank_item .rank {
width:20%;
display:flex;
justify-content:center;
}

.detail_container .rank_list .rank_item .name {
width: 50%;
padding-left:10px;
}

.rank_face {
margin-left:10px;
}

.detail_container .rank_list .rank_item .score {
width: 30%;
align-content:center;
}

.rank_face {
border-radius:50%;
height:30px;
}

.rule_item_container {
width:100%;
background-color:white;
}

.rule_item_container .rule_item {
display:flex;
margin:15px;
border-bottom:solid 1px #ececec;
height:40px;
line-height:40px;
vertical-align:middle;
}

.rule_item_container .rule_item .rule_item_name {
width:45%;
margin-left:20px;
}

.rule_item_container .rule_item .rule_item_createdate {
width: 20%;
}

.rule_item_container .rule_item .rule_item_count {
width: 10%;
}

.rule_item_container .rule_item .rule_item_operate {
width: 24%;
display:flex;
}

.rule_item_list {
width: 100%;
background-color: white;
}

.rule_item_list .rule_item {
display:flex;
height:40px;
line-height:40px;
margin:10px;
border-bottom:solid 1px #ececec;
}

.rule_item_list .rule_item .rule_item_info {
width: 30%;
            
}

.rule_item_list .rule_item .rule_item_desc {
width: 50%;
}

.rule_item_list .rule_item .rule_item_btn {
width: 20%;
}

.rule_item_edit_container {
width:90%;
background-color:white;
padding:10px;
}

.rule_item_legend {
display: flex;
height: 40px;
line-height: 40px;
font-weight:bold;
}

.rule_item_edit {
display: flex;
height: 40px;
line-height: 40px;
}

.rule_item_edit .rule_item_title {
    width:30%;
}

.rule_item_edit .rule_item_value {
    width: 70%;
}

.rule_item_value .txt {
border: 1px solid #ccc;
padding: 10px 20px;
width: 88%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
font-size: 14px;
outline: none;
transition: box-shadow 0.3s ease;
}

.rule_item_value .slt {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
border: none;
color: #333;
padding: 10px 20px;
width: 100%;
font-size: 14px;
background-image: url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5 -5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
outline: none;
}



.rule_item_value .txt:focus {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}


.sub_scenes_container {
padding-top: 10px;
border-top: solid 1px #ECECEC;
font-size: 14px;
width: 75%;
padding: 3%;
margin: 0 auto;
background-color: white;
}

.sub_scenes_container .sub_scenes_item {
display: flex;
padding-top:10px;
padding-bottom:10px;
border-bottom:solid 1px #ECECEC;
width:100%;
}

.sub_scenes_container .sub_scenes_item .sub_scenes_name {
width:70%;
}

.sub_scenes_container .sub_scenes_item .sub_scenes_score {
width: 30%;
}

.sub_scenes_container .sub_scenes_item .sub_scenes_btns {
width: 20%;
}

.detail_subscene_layer_container {
padding:15px;
}

.detail_subscene_layer_container .detail_subscene_info {
margin-top: 12px;
display: flex;
}

.detail_subscene_layer_container .detail_subscene_info .detail_subscene_info_left {
width:30%;
}

.detail_subscene_layer_container .detail_subscene_info .detail_subscene_info_right {
width: 65%;
}


.detail_subscene_info_right .txt {
border: 1px solid #ccc;
padding: 10px 20px;
width: 88%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
font-size: 14px;
outline: none;
transition: box-shadow 0.3s ease;
}

.detail_subscene_info_right .slt {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
border: none;
color: #333;
padding: 10px 20px;
width: 100%;
font-size: 14px;
background-image: url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5 -5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
outline: none;
}



.detail_subscene_info_right .txt:focus {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}


.history_container {
width:80%;
margin:0 auto;
margin-top:20px;
}


.history_tab {
width: 80%;
margin: 0 auto;
margin-top: 20px;
display:flex;
}

.history_tab .history_left_tab {
    width: 70%;
    align-content:center;
}

.history_tab .history_right_tab {
width: 30%;
text-align:right;
}

table.gridtable {
font-family: verdana,arial,sans-serif;
font-size: 11px;
color: #333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
width: 100%;
}

table.gridtable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #dedede;
}

table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
}


.btn_download_starter {
position: fixed;
right: 0;
margin-right: calc(10% - 7em);
top: 20%;
cursor: pointer;
width: 6em;
padding: 6px;
border-radius: 6px;
text-align: center;
background: linear-gradient(0deg, #0c49d5, #009ee7 90%, #62b6ff);
color: #fff;
transition-duration: .4s;
font-size: 14px;
}

.matchresult_container {
width:70%;
margin: 20px auto;
}

.match_info_container {
width: 40%;
margin: 20px auto;
margin-top: 5%;
background-color: white;
padding-top: 10px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
}

.match_info_container .match_info_title {
text-align:center;
line-height:40px;
font-weight:bold;
font-size:16px;
}

.match_info_container .match_info_summary {
text-align: left;
line-height: 25px;
font-size: 14px;
margin-top: 10px;
}

.match_info_container .match_info_date {
text-align: center;
line-height: 25px;
font-size: 14px;
margin-top:10px;
}

.match_choose_container {
padding-top:10px;
padding-bottom:15px;
padding-left:10px;
padding-right:10px;
}

.match_choose_title {
text-align:center;
line-height:35px;
font-size:16px;
font-weight:bold;
}

.match_enter_btns {
display:flex;

}

.match_enter_btns .match_enter_btn {
flex:1;
background-color:#1a8dff;
width:50px;
height:50px;

}

.match_enter_btns .match_enter_btn img{
width:30px;
height:30px;
}

.video_top_container {
display:flex;
justify-content:space-between;
height:450px;
}

.video_top_container .video_top_container_left {
background-color: white;
padding: 16px 8px 0px;
margin-top: 12px;
border-radius: 5px;
width:75%;
}

.video_top_container .video_top_container_right {
    margin-left: 16px;
    background-color: white;
    padding: 16px 8px 0px;
    margin-top: 12px;
    border-radius: 5px;
    width: 24%;
}

.video_top_container .video_top_container_left .video_top_recommend_container {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.video_top_container .video_top_container_left .video_top_recommend_container .video_top_recommend_main {
    position:relative;
}


.video_top_container .video_top_container_left .video_top_recommend_container .video_top_recommend_slide {
margin-left:12px;
}

.video_top_container .video_top_container_left .video_top_recommend_container .video_top_recommend_slide .video_top_recommend_item {
    display: flex;
    margin-bottom: 6px;
    border-radius: 5px;
    padding-right: 5px;
    cursor:pointer;
}

    .video_top_container .video_top_container_left .video_top_recommend_container .video_top_recommend_slide .video_top_recommend_item .video_top_recommend_item_txt {
        margin-left: 8px;
        margin-top: 5px;
        width: 40%;
    }
.video_top_container .video_top_container_left .current_hot {
    border: 1px solid #037ADD;
    color: #037ADD;
}



.video_top_container .video_top_container_right .video_top_hot_item {
    display: flex;
    margin-bottom: 6px;
    cursor:pointer;
}



    .video_top_container .video_top_container_right .video_top_hot_item .video_top_hot_item_txt {
        margin-left: 8px;
        margin-top: 5px;
        width:40%;
    }


    .video_thumb_img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

.main_video_thubm_img {
vertical-align: top;
opacity: 1;
width: 100%;
height: 100%;
cursor:pointer;
}

.video_thumb_img_container {
width: 180px;
height: 120px;
}


.video_list_container {
display:flex;
justify-content:left;
flex-wrap:wrap;
margin-top:10px;
}


.video_list_container .video_item {
width: 31%;
background-color: #fff;
border-radius: 5px;
padding: 6px;
box-shadow: 0 0 3px #0000000d;
cursor: pointer;
overflow: hidden;
margin: 16px 0;
transition-duration: .5s;
margin-left:8px;
margin-top:0px;
}

.video_list_container .video_item .video_item_cover_container {
    position: relative;
}

.video_list_container .video_item .video_item_cover_container .video_item_cover {
    width: 100%;
    height: 100%;
    position: relative;
    display: inline-block;
    overflow: hidden;
}

    .video_list_container .video_item .video_item_cover_container .video_item_cover .video_item_cover_img {
        object-fit: cover;
        vertical-align: top;
        opacity: 1;
        width:100%;
        height:100%;
    }

    .video_list_container .video_item .video_item_cover_container .video_item_cover .video_item_play_btn {
        position: absolute;
        width: 16%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

 .video_item_info {
    position: absolute;
    bottom: 8px;
    left: 0px;
    right: 0px;
    padding: 5px 12px;
    color: white;
    background: linear-gradient(rgba(0, 0, 0, 0), rgb(0, 0, 0));
    font-size: 14px;
    display:inline-flex;
}

    .video_item_info .video_item_viewcount {
        text-align:left;
        width:50%;
        line-height:20px;
    }

 .video_item_info .video_item_duration {
        text-align: right;
        width: 50%;
        line-height:20px;
    }

    .video_list_container .video_item  .video_item_title {
        height:30px;
        line-height:30px;
        margin-top:5px;
    }

    .video_list_container .video_item .video_item_date {
        height: 30px;
        line-height: 30px;
        margin-top: 5px;
    }

.video_detail_container {

}

.video_detail_container .video_title {
    font-size:18px;
    font-weight:bold;
}

    .video_detail_container .video_viewcount {
        margin-top:10px;
    }

    .video_detail_container .video_player {
        margin-top: 10px;
        width: 100%;
        background-color: black;
        border-radius: 5px;
        box-shadow: rgb(148, 153, 160) 0px 0px 5px;
        height: 811px;
    }

.video_detail_container .video_vote {
    display:flex;
    margin-top:10px;
}

.video_reply_container .video_reply_head {
    font-size:18px;
    font-weight:bold;
}

.video_reply_container .video_reply_count {
    font-size: 18px;
    font-weight: bold;
    margin-left:5px;
}

.video_reply_content_container {
    display:flex;
    margin-top:15px;
}

    .video_reply_content_container .video_reply_content_left {
        
    }

    .video_reply_content_container .video_reply_content_right {
       margin-left:15px;
       width:100%;
    }

        .video_reply_content_container .video_reply_content_right .video_reply_content {
            width: 100%;
            height: 100px;
            resize: none;
            padding:8px 8px;
        }

        .video_reply_content_container .video_reply_content_right .btn_login {
            color: white;
            background-color: #038dff;
            border: none;
            width: 70px;
            height: 35px;
            border-radius: 5px;
        }

.video_reply_container .video_reply_list {
    margin-top:15px;
}

    .video_reply_container .video_reply_list .video_reply_item {
        display: flex;
        padding-bottom:10px;
        padding-top:10px;
    }

    .video_reply_container .video_reply_list  .video_reply_item:not(:first-child) {
        border-top: 1px solid #808080;
    }

    .video_reply_container .video_reply_list .video_reply_item .video_reply_item_left {
    }

            .video_reply_container .video_reply_list .video_reply_item .video_reply_item_left .reply_face {
                border-radius: 25px;
                height: 50px;
                width: 50px;
            }

        .video_reply_container .video_reply_list .video_reply_item .video_reply_item_right {
            margin-left: 15px;
            width: 100%;
        }


            .video_reply_container .video_reply_list .video_reply_item .video_reply_item_right .reply_nickname {
                color: #038dff;
            }


            .video_reply_container .video_reply_list .video_reply_item .video_reply_item_right .reply_content {
                margin-top:10px;
            }


            .video_reply_container .video_reply_list .video_reply_item .video_reply_item_right .reply_date {
                color: #808080;
                margin-top: 10px;
            }