@charset "utf-8";
/* CSS Document */

html{font-size:100%; max-width:100%; margin:0 auto; overflow-x:hidden;}
/* 全局样式 ------------------------------------------------------------------*/
body ,div, h1, h2, h3, h4, p, dl, dd, ol, ul, li, form, fieldset, input, button, textarea{ margin:0; padding:0; box-sizing:border-box; font-family:"Microsoft YaHei";}
th, td{ margin:0; padding:0; font-family:"Microsoft YaHei";}
html{ -webkit-text-size-adjust:none; word-wrap:break-word; margin:0; padding:0;}
h1, h2, h3, h4{ font-size:100%; font-weight:normal;}
ol, ul{ list-style:none;}
fieldset, img{ border:0;}
cite, em, s, i, b{ font-style:normal;}
input, button, textarea, select{ font-size:100%;}
body, input, button, textarea, select, option{ font-size:normal;}
a, input, textarea{ text-decoration:none; outline:0; font-weight:normal; font-family:"Microsoft YaHei";}
li, img, label, input{ vertical-align:middle;}
body{ font-size:.24rem; font-family:helvetica,arial; width:100%; max-width:7.5rem; margin:0 auto; overflow-x:hidden; background:#100c0b;}
input:focus{ outline:none;}
textarea,select,input{ -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; appearance:none;}

/*公用样式*/
.left{ float:left;}
.right{ float:right;}
.clear{ clear:both;}
.clear0{ clear:both; font-size:0px; height:0px; overflow:hidden;}
.hidden{ display:none;}

.wrap{ width:7.5rem; margin:0 auto;}

/*header*********************************************************************/
.header{ background:#1b1a1e; border-bottom:1px solid #977c5c;}
.logo{ padding:.3rem 0 .25rem 0; text-align:center;}
.logo img{ width:5.5rem; height:1.4rem;}

.main{ padding:0 .1rem .1rem .1rem;}
.titc{ height:.6rem; line-height:.6rem; font-size:.25rem; color:#00bcd4; padding-left:.35rem; position:relative;}
.titc:before{ content:""; display:block; position:absolute; left:0; top:50%; margin-top:-.12rem; width:.28rem; height:.24rem;}
.tit1:before{ background:url(../../images/ico1.png) left center no-repeat; background-size:100%;}
.tit1 img{ float:right; margin-top:.2rem; height:.2rem; width:1.79rem;}
.tit2:before{ background:url() left center no-repeat; background-size:100%;}
.tit3:before{ background:url() left center no-repeat; background-size:100%;}
.tit4:before{ background:url() left center no-repeat; background-size:100%;}
.tit5:before{ background:url() left center no-repeat; background-size:100%;}
.tit6:before{ background:url() left center no-repeat; background-size:100%;}
.tit7:before{ background:url() left center no-repeat; background-size:100%;}
.tit8:before{ background:url() left center no-repeat; background-size:100%;}

.browser{ background:#1b1a1e; border:1px solid #977c5c; border-radius:.08rem; overflow:hidden; padding:.2rem .1rem .2rem .1rem;}
.browser:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; font-size:0; overflow:hidden;}
.browser li{ float:left; width:100%; text-align:center;}
.browser li a{ display:inline-block;}
.browser li img{ width: 100%;  height: 100%; display: block; margin: 0 auto;}
.browser li em{ display:block; font-size:.25rem; color:#ffffff; line-height:.38rem;}
.browser li p{ font-size:.2rem; color:#ffe0b8; line-height:.3rem; font-weight:bold;}

.tool_list{ background:#1b1a1e; border:1px solid #977c5c; border-radius:.08rem; overflow:hidden; padding:.02rem 0 .35rem 0;}
.tool_list:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; font-size:0; overflow:hidden;}
.tool_list li{ float:left; width:3.27rem; height:.96rem; background:url(/css-js/bg1.png) 0 0 no-repeat; background-size:100%; margin:.38rem 0 0 .25rem;}
.tool_list li a{ display:block; width:3.2rem; height:.88rem; line-height:.28rem; text-align:center; font-size:.2rem; color:#100c0b;}
.tool_list li a img{ vertical-align:middle; margin-right:.1rem; position:relative; top:-.02rem; height:.24rem;}

/*拼接css
/* pannel */
/* pannel */
.stui-pannel{ position: relative; margin-top: 8px; border-radius: 5px; background-color: #fff; border: 1px solid #eee; box-shadow: 0 1px 2px #eee;}
.stui-pannel-bd{ padding: 10px;}
.stui-pannel__head{ padding: 10px 20px; line-height: 25px; border-bottom: 1px solid #eee;}
.stui-pannel__head .title{ margin: 0;}
.stui-pannel__menu li{ border-bottom: 1px solid #eee;}
.stui-pannel__menu li:last-child{ border-bottom: 0;}
.stui-pannel__menu li a{ display: block; padding: 10px 20px; font-weight: bold; color: #f2990d;}
.stui-pannel__menu li a:hover,.stui-pannel__menu li.active a:hover{ background-color: #f2990d; color: #fff;}
.stui-pannel__menu li.active a{ background-color: #f5f5f5;}
.stui-pannel__menu li a .count{ padding: 2px 8px; border-radius: 4px; background-color: #f2990d; font-size: 12px; color: #fff;}
.stui-pannel__menu li a:hover .count{ background-color: #ae6600;}

/* vodlist */
.stui-vodlist li{ padding: 10px; float: left; width: 20%;}
.stui-vodlist__thumb{ position: relative; display: block; padding-top: 70%; background: url(load.gif) no-repeat; background-position: 50% 50%; background-size: cover; border-radius: 5px;}
.stui-vodlist__thumb.active{ padding-top: 50%; background: url(load_w.gif) no-repeat; background-position: 50% 50%; background-size: cover;}
.stui-vodlist__thumb:hover .play{ display: block;}
.stui-vodlist__detail .title{ font-size: 14px; margin-bottom: 0; width:100%; height: 40px; line-height: 18px; overflow:hidden;}
.stui-vodlist__detail .sub{ margin-bottom: 0; font-size: 12px; color: #999;}

/* page */
.stui-page{ margin-bottom: 20px;}
.stui-page li{display:inline-block;margin-left:10px}
.stui-page li .num,.stui-page li a{display:inline-block;padding:5px 15px;border-radius: 4px; background-color: #fff; border: 1px solid #eee;}
.stui-page li.active a,.stui-page li.disabled a{ background-color: #f2990d; border: 1px solid #f2990d; color: #fff;}

/* embed */
.embed-responsive{position:relative;display:block;overflow:hidden;padding:0;height:0}
.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}
.embed-responsive-16by9{padding-bottom:56.25%}
.embed-responsive-4by3{padding-bottom:75%}

/* more */
.margin-0{ margin: 0 !important;}
.padding-0{ padding: 0 !important;}
.pull-left{ float: left !important;}
.pull-right{ float: right !important;}
.hide,.visible-lg, .visible-md, .visible-sm, .visible-xs, .visible-mi{ display: none !important;}
.stui-foot{ margin: 20px 0; padding: 20px; background-color: #fff; border: 1px solid #eee; border-radius: 5px; text-align: center; color: #999;}

        .browseo {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 5px; /* 图片之间的间距 */
         
background:#1b1a1e; 
border:1px 
solid #977c5c; 
border-radius:.08rem; 
overflow:hidden; 
padding:.15rem 0 .15rem 0;
        }

        .browseo li {
            width: calc(50% - 5px); /* 每行两张图片，减去间距的一半 */
            box-sizing: border-box;
            padding-top: 5px; /* 图片上方保留30px空位 */
        }

        .browseo li a {
            display: block;
            text-decoration: none;
            color: inherit;
        }

        .browseo li img {
            width: 95%;
            height: 40% ;
            object-fit: cover; /* 保持图片比例并填充指定尺寸 */
            display: block;
            margin: 0 auto; /* 图片居中 */
        }
        .browseo li em
        { display:block; 
        font-size:.25rem; 
        color:#ffffff; 
        line-height:.35rem;   
        }
        
        .browseo li span {
            display: block;
            text-align: center;
            margin-top: 5px;
        }