@charset "UTF-8";
body{background-color: #272727;}
.flexbox{display: -ms-flexbox;display: -webkit-flex;display: flex;-ms-flex-direction: row;flex-direction: row;flex-wrap: nowrap;-webkit-box-pack: justify;-ms-flex-pack: justify;-webkit-justify-content: space-between;justify-content: space-between;}
.sticky_top{
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
}

.adv_content{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    z-index: 10000;
    background-color: #0000007d;
    overflow-x: hidden;
    overflow-y: auto;
}
.adv_content img{
    width: 100%;
    object-fit: cover;
}
.adv_content .btn{
    position: fixed;
    top: 50px;
    right: 20px;
}
.adv_content .info{
    width: 60px;
    height: 30px;
    line-height: 30px;
    border-radius: 30px;
    background-color: rgba(0, 0, 0, 0.3);
    text-align: center;
    color: #FFFFFF;
    font-size: 12px;
}
.advModal{
    position: fixed;
    top: 0;
    z-index: 10000;
    background-color: #0000007d;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
.advModal .adv_content{
    width: 500px;
    margin: 0 auto;
    position: relative;
}
.advModal .adv_content .btn{
    position: absolute;
    top: 50px;
    right: 20px;
    cursor: pointer;
}

header.header{
    background-color: #ffe114;
    width: 100%;
    height: 1em;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 9980;
    font-size: 1rem;
}
header.header div.wraper{
    position: relative;
    width: 100%;
    text-align: center;
}
header.header div.wraper div.title{
    font-size: .4em;
    line-height: 2.5em;
    height: 2.5em;
    display: block;
    font-weight: bold;
}
header.header div.ias{
    position: absolute;
    font-family: sooqfont;
    left: 0;
    top: 0;
    font-size: .5em;
    line-height: 2em;
    padding-left: .4em;
}
header.header div.rs{
    position: absolute;
    font-family: sooqfont;
    right: 0;
    top: 0;
    font-size: .5em;
    line-height: 2em;
    padding-right: .4em;
}

div#login_panel {
	top: 0;
	font-size: 1rem;
	width: 5.2em;
	padding: 0 .3em;
}
.main_content{
	font-size:1rem;
}

.main_content .banner {
	height: 4.2em;
	background-color: #2D2E35;
	left: 0;
	z-index: 9980;
}
.main_content .nav{
	background-color:#000;
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -ms-sticky;
	position: sticky;
	top: 1rem;
	left: 0;
	z-index: 9980;
	font-size: .25rem;
}
.main_content .nav .items {
	text-align: center;
	vertical-align: top;
	margin: auto;
}
.main_content .nav .items .item{
	display: block;
	text-align: center;
	width: 20%;
	margin: 0 .25em;
}
.main_content .nav .items .item a{
	font-size: 1em;
	line-height: 3em;
	display: block;
	color: #fff;
    white-space: nowrap;
}
.main_content .nav .items .item a.focus{
	color:#ffc34b;
}
.left-line { position: relative; }
.left-line:before{display: block;content: "";position: absolute;background-color: #555;width: 1px;height: 70%;left: -.25em;top: 15%;}


div#contents {
	min-height: 12rem;
	background-color: #ffffff;
}
div#contents .m_article{
    width: 100%;
    margin: 0;
    padding: .2rem;
}

div.live_box div.item{
	display: block;
	line-height: .88rem;
	font-size: .5rem;
	width: 7.1rem;
	margin-left: .2rem;
	color: #000;
}
div.live_box div.item span{
	/* font-size: .3rem; */
	font-weight: bold;
}
div#replay_box{font-size:1rem;padding-bottom: 1px;padding-top: 1px;}
div#replay_box div.video-item {
	line-height: .6em;
	width: 7.1em;
	height: 3.9em;
	margin: .3em auto;
}

div#player1 {
	width: 7.5rem;
}

#replay_box .item{position:relative;}
#replay_box .img {width: 7.1rem;height: 5.5rem;overflow:hidden;}
#replay_box .img img{width:100%;}
#replay_box .txt{float: right;width: 4rem;padding-top: .2rem;}

.contents .video-item .v-play {
	left: 3em;
	top: -.5em;
}

a#admin-link {
    position: absolute;
    top: 1.2em;
    right: 0;
    width: 1.1em;
    height: 1.1em;
    font-size: .8em;
    color: #e6e6e6;
}

div#live_box div.item a.link {
	color: #000;
	font-weight: bold;
}

.contents .video-item .v-play {
    width: .7em;
    height: .5em;
    top: -.2em;
    border-radius: .2em;
}

.contents .video-item .v-mask {
    position: absolute;
    width: 100%;
    height: 2.33em;
    bottom: 0;
    left: 0;
    z-index: 2;
    background: url('/static/mobile/images/shade.png') center center no-repeat;
    background-size: cover;
    box-sizing: border-box;
    padding: 0 .2em
}

.contents .video-item .v-head {
    width: 100%;
    bottom: .74em;
    line-height: .46em;
    padding: 0 .2em;
}

.contents .video-item .v-title {
    font-size: .34em;
}

.adv_ico_container{
    display:flex;
    justify-content: space-between;
    align-items: center;
}
.adv_ico_container a{
    width: 100%;
    height:auto !important;
    display: block;
    position: relative;
}
.adv_ico_container a > img{
    width: 100% !important;
    height: auto !important;
    vertical-align: bottom;
    display: block;
}

*{
    margin: 0;
    padding: 0;
}
a,a:hover{
    text-decoration: none;
    color: #000000;
}
.bd{
    width: 7.5rem;
    margin: auto;
}
.poster {
    position: relative;
    width: 100%;
}


.contents{
    width: 7.5rem;
    margin: auto;
    position: relative;
}
#page{
    height: 100%;
    width: 100%;
    max-width: 7.5rem;
    background-color: #f6f6f6;
    overflow-y: auto;
    overflow-x: hidden;
}
.list-group{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
}
.list-group-item {
    position: relative;
    display: block;
    padding: .2rem;
    background-color: #f6f6f6;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
}
.list-group-item:last-child{
    border-bottom: none;
    padding-bottom: 1.4rem;
}
.list-group-item.adv2{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
}
.list-group-item.adv2 .adv_ico_container{
    width: 49%;
}
.labels{
    font-size: small;
    line-height: .24rem;
    color: #767676;
}
.item_title{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: .32em;
    line-height: .42rem;
    text-align: justify;
    word-break: break-all;
    margin-bottom: .2rem;
}
.w-100{
    width: 100%;
}
.flex-between {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}
.content-wid {
    width: 68%;
}
.img-wid {
    width: 30%;
}
.v16-9 {
    width: 100%;
    padding-top: 56.25%;
    position: relative;
}
.v16-9-inner {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}
.main_content .fixedhack_ios_fixed_bottom {
    position: -webkit-fixed;
    position: -moz-fixed;
    position: -ms-fixed;
    position: fixed;
    width: 100%;
}
.mv-item{
    position: relative;
}
.mv-item .v-mask {
    position: absolute;
    width: 100%;
    height: 1.6em;
    bottom: 0;
    left: 0;
    z-index: 2;
    background: url(/static/mobile/images/shade.png) center center no-repeat;
    background-size: cover;
    box-sizing: border-box;
    padding: 0 .2em;
}
.mv-item .v-play{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mv-item .item_title{
    color: #ffffff;
    margin-bottom: 0;
}

@media (min-device-width: 812px) {
    body {
        line-height: 1.5;
        width: 100%;
        height: auto;
        background-color:transparent;
    }
    header.header{
        font-size: 60px;
    }
    .main_content {
        font-size:60px;
    }
    .main_content .banner{
        position:static;
        height: auto;
        background-image: url("/CIIF2023/images/bg.jpg");
        background-size: cover;
    }
    div#player1 {
        margin:auto;
    }
    .main_content .nav{
        position: relative;
        top: 0;
        font-size: 20px;
    }
    div#replay_box, div.live_box{font-size: 30px;width: 812px;margin: auto;}
    div#replay_box div.video-item{
        float:left;
        margin-left: 9px;
        width: 260px;
        height: 146.25px;
        
    }
    div.live_box div.item{font-size:26px;}
    div#replay_box:after {
        content: ".";
        display: block;
        height: 0;
        visibility: hidden;
        clear: both
    }
	.contents .video-item .v-title{
		font-size: 16px;
		line-height: 1.5em;
	}
	.contents .video-item .v-play{
		width: 60px;
		height: 35px;
	}
    .main_content .fixedhack_ios_fixed_bottom{
        position:static;
    }
    div#login_panel {font-size:60px;}
    #index_header {font-size: 30px;margin: auto;max-width: 812px;}
    .u_topbar{
        height: .8rem;
    }
    .u_topbar .u_llogo .icon_personal {
        width: .4rem;
        height: .4rem;
        margin-top: .12rem;
        left: .2rem;
        font-size: .4rem;
    }
    .u_topbar .u_logo {
        height: .6rem;
        font-size: 0.36rem;
    }
    .icon-logo {
        height: .5rem;
    }
    .u_topbar .u_rlogo .icon_seach {
        width: .4rem;
        height: .4rem;
        margin-top: .12rem;
        right: .2rem;
        font-size: .4rem;
    }
    .m_photoset .m_photoset_title,.m_article .m_article_info .m_article_title{font-size:26px;}
    .adv_ico_container a.full{width: 100% !important;float:none;}

    .main_content .nav .items.flexbox{
        width:812px;
    }
    .main_content .nav .items.flexbox .item{
        /* width: 50%; */
    }
    .mvDom .item_title{
        line-height: 0.26rem;
    }
    .mvDom.list-group {
        -ms-flex-direction: row;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .mvDom .list-group-item{
        width: 50%;
    }
    .mvDom .list-group-item:last-child {
        border-bottom: 1px solid rgba(0, 0, 0, .125);
        padding-bottom: .2rem;
    }
}
@media (min-width: 1200px) {
	div#contents,.main_content .adv_ico_container{
		width:100%;
		margin:auto;
	}
}
@media (max-width: 812px) {
    .mvDom.list-group {
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .mvDom .list-group-item{
        width: 100%;
    }
    .mvDom .list-group-item:last-child {
        border-bottom: none;
        padding-bottom: 2rem;
    }
}