@charset "utf-8";
/**
 * Created by sxz on 19/8/31.
 */

 .gcDetailInfo{ width:100%; position: relative; z-index: 0; overflow: hidden; margin-bottom: 40px }
 .gcDetailInfo  .blurBg{ position: absolute; z-index: 1; left: -30%; top:-30%; width:160%; height: 160%; opacity: 0.7;
    -webkit-filter: blur(70px);
    -moz-filter: blur(70px);
    -ms-filter: blur(70px);
    -o-filter: blur(70px);
    filter: blur(70px);
    /*filter: url(blur.svg.blurImg); */
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='60');/* IE6~IE9*/
    filter:alpha(opacity=8)/*ie9以下半透明*/}
 .gcDetailInfo .mask-lay{ position: absolute; z-index: 2; width:100%; height: 100%; background:rgba(0,0,0,.4) }

.dtl-top-info{ position: relative; z-index: 3; padding:30px 0; }
.dtl-top-info .breadNav{ margin-bottom: 5px;height: 30px; line-height: 30px }
.dtl-top-info .breadNav .itms{ float: left; }
.dtl-top-info .breadNav .itm{ font-size: 12px; color: rgba(255,255,255,.5); line-height: 30px }
.dtl-top-info .breadNav .itm:hover{ color: rgba(255,255,255,1) }
.dtl-top-info .breadNav .itms span{ font-size: 12px; color: rgba(255,255,255,.25);margin:0 10px; }

.dtl-top-info .T{ font-size: 36px; line-height: 45px; color: #fff; margin-bottom: 10px }

.dtl-top-info .gcNum{ height: 30px;  color: rgba(255,255,255,.5); line-height: 30px; font-size: 12px }
.dtl-top-info .share{ height: 30px; line-height: 30px; display:inline-block; margin-left: 40px }
.dtl-top-info .share a{ display: inline-block; width:20px; height: 30px; line-height: 30px; margin-left: 8px }
.dtl-top-info .share img{ display: inline-block; width:20px; height: 20px; opacity: .5 }
.dtl-top-info .share a:hover img{ opacity: 1; transition: all .2s }
.dtl-top-info .gcNum .gcNum-fl{ background:rgba(0,0,0,.1); border-radius: 25px; float: left; height: 30px;padding: 0 10px;}

.dtl-top-info .gcNum .entTab{ float: right; font-size: 12px; display: inline-block; height: 20px; line-height: 20px;  border-radius: 25px; padding: 0 8px 0 5px; font-size: 12px; color: #fff; background:rgba(0,0,0,.1);margin:5px 0 5px 0; }
.dtl-top-info .gcNum .entTab:hover{ color: #fff; font-weight: bold;  transiton:all .3s;  }
.dtl-top-info .gcNum .entTab img{ display: inline-block;margin:4px 5px 5px 0; width: 10px; height: 10px }

.byShows li{ float: left; line-height: 30px; height: 30px; width: 400px; margin-right: 30px; border-bottom: 1px dotted rgba(0,0,0,.25); font-size: 12px; color: #fff;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}
.byShows li .byKey{ float: left; color: rgba(255,255,255,.25); display:inline-block; height: inherit; line-height: inherit; width:100px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}
.byShows li em{ float: left; display: inline-block; width:300px; height: inherit; line-height: inherit;white-space: nowrap; overflow: hidden;text-overflow: ellipsis; }

/*.byShows{ display:flex; }*/
.byShows{ }
.byShows{ column-count:2; column-gap:30px;margin: 0 auto}
/*.photosinge{ margin-bottom:20rpx; }*/

.byShows dl{ width: 300px; margin-right: 30px; margin-bottom: 10px; float: left; padding-left: 100px; font-size: 12px; position: relative; break-inside:avoid; border-bottom: 1px dotted rgba(0,0,0,.15) }
.byShows dt{ position: absolute; left: 0; top:0; width: 100px; line-height: 18px; color: rgba(255,255,255,.25) ; margin-bottom: 10px}
.byShows dd{ line-height: 18px; min-height: 18px; display:block; color: #fff ; margin-bottom: 10px}


.dtlDesc{ width:860px; margin-bottom: 30px }
.gcTitle2{ position: relative; padding-left: 15px; height: 70px; line-height: 70px }
.gcTitle2 .icon-red{ position: absolute; left: 0; top:50%; margin-top:-9px; display: inline-block; width:4px; height: 18px; background:#cc2929; }
.gcTitle2 em{ display: inline-block; font-size: 20px; color: #000; font-weight: bold; }
.dtlDesc .txt{ line-height: 30px; text-indent: 2em;}

.gcList{ width:860px; }
.gcList .showTabs{ height: inherit; line-height: inherit; }
.gcList .showTabs a{ display: inline-block;  padding: 0 0 0 10px }
.gcList .showTabs img{ display: inline-block; width:14px; height: 14px; opacity: .5 }
.gcList .showTabs a:hover img{ opacity: .7 }
.gcList .showTabs a.active img{ opacity: 1 }
.gcListShow{ margin-bottom: 30px }
.gcListShow .listType1{ width:860px }
.gcListShow .listType1 ul{ width:870px; }
.gcListShow .listType1 li{ position: relative; float: left; transition: all .3s; width:280px; height: 185px; border-radius: 10px; margin:0 10px 10px 0; }
.gcListShow .listType1 li:hover{ transform: translateY(-3px); transition: all .3s }
.gcListShow .listType1 li .img{ width:inherit; height: inherit; box-shadow: 0 5px 10px -5px rgba(0,0,0,.1); border-radius: 5px }
.gcListShow .listType1 li:hover .img{box-shadow: 0 5px 10px -5px rgba(0,0,0,.2)}
.gcListShow .listType1 li .btn-type{ position: absolute; z-index: 1; right: 5px; bottom:5px; background:rgba(0,0,0,.5); border-radius: 5px; text-align: center; line-height: 28px; display: inline-block; width:30px; height: 30px; cursor: pointer; }
.gcListShow .listType1 li .btn-type:hover{ transform: scale(1.03); transition: all .2s }

.gcListShow  .listType2{ width:860px; overflow: hidden; }
.gcListShow  .listType2 .itm{ width:860px; margin-bottom: 40px }
.gcListShow  .listType2 .itm .img{ position: relative; width:inherit; height: auto; margin-bottom: 10px; border-radius: 10px; overflow: hidden; }
.gcListShow  .listType2 .itm .img img{ display: block; width:inherit; height: auto }
.gcListShow  .listType2 .itm .img .btn-type{ position: absolute; z-index: 1; right: 5px; bottom:5px; background:rgba(0,0,0,.5); border-radius: 5px; text-align: center; line-height: 28px; display: inline-block; width:30px; height: 30px; cursor: pointer; }
.gcListShow  .listType2 .itm .img .btn-type img{ display: inline-block; width:14px; height: 14px }
.gcListShow  .listType2 .itm .img .btn-type:hover{ transform: scale(1.05); transition: all .2s }
.gcListShow  .listType2 .itm .txt{ line-height: 25px; color: #000 }

.gcListShow  .listType2 .itm .vdo{ width:860px; height: 530px; text-align: center; background:#000; border-radius: 10px; overflow: hidden; margin-bottom: 10px  }
.gcListShow  .listType2 .itm .vdo video{ display:block; width:inherit; height: inherit; }

.gcListShow  .listType2 .ado{ width:860px; height: 535px; margin-bottom: 10px; border-radius: 10px; overflow: hidden }
.gcListShow  .listType2 .ado .adoBg{ position: relative; width:inherit; height: 484px }
.gcListShow  .listType2 .ado .adoBg .bg{ display: block; width:inherit; height: inherit; }
.gcListShow  .listType2 .ado .adoBg .ado-rotate{ position: absolute; left: 385px; top:196px; display: block; width:90px; height: 90px;background-image: url(img/ado-rotate-116.png) center no-repeat; background-image: -webkit-image-set(url(../img/ado-rotate-116.png) 1x,url(../img/ado-rotate-232.png) 2x); background-size: 90px}
.gcListShow  .listType2 .ado .adoBg .ado-rotate.run{ transform: rotate(360deg); -webkit-animation: rotate 10s infinite linear; -moz-animation:rota 20s infinite linear}
@-webkit-keyframes rotate{
    0%{  
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    
    100%{
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg) }
}

/*.gcListShow  .listType2 .ado .adoBox{ height: 50px; background:#222; display: block }*/
.gcListShow  .listType2 .ado .adoBox{ height: 50px; background:#eef0f1; display: block }
.gcListShow  .listType2 .ado .adoBox audio{ display: block; width:860px; height: 50px; outline: none}

.gcListShow  .listType2 .ado .opt{ height: 50px; background:#222; display: block; padding:0 10px;}
.gcListShow  .listType2 .ado .opt .btn-play{ display: block; width:40px; height: 50px; line-height: 50px; float: left; background:url(../img/icon-play-14.png) center no-repeat; background-size: 14px auto }
.gcListShow  .listType2 .ado .opt .btn-play:hover{ transform: scale(1.1); transition: all .2s }
.gcListShow  .listType2 .ado .opt .btn-play.btn-pause{  background:url(../img/icon-play-14.png) center no-repeat; background-size: 14px auto} /*缺图*/

.gcListShow  .listType2 .ado .percentBar{ position: relative; display: block; margin:21px 25px 21px 15px; float: left;width:675px; height: 8px; background:rgba(255,255,255,.2); border-radius: 25px }
.gcListShow  .listType2 .ado .percentBar .in{ position: absolute; display: block; left: 0; top:0; height: inherit; background:rgba(255,255,255,1); border-radius: 25px }
.gcListShow  .listType2 .ado .time{ display: block; float: left; font-size: 12px; height: 50px; line-height: 50px; color: #fff; font-family: Arial }
.gcListShow  .listType2 .ado .btn-voice{ display: block; width:40px; height: 50px; line-height: 50px; float: right; background:url(../img/icon-voice-18.png) center no-repeat; background-size: 14px auto}
.gcListShow  .listType2 .ado .btn-voice:hover{  transform: scale(1.1); transition: all .2s }

.gcListShow .listType3{ width:860px }
.gcListShow .listType3 li{ position: relative; padding-left: 110px; height: 60px; margin-bottom:20px }
.gcListShow .listType3 li .img{ position: absolute; left: 0; top:0; width:90px; height: 60px; border-radius: 10px; box-shadow: 0 5px 10px -5px rgba(0,0,0,.1); }
.gcListShow .listType3 li:hover .img{ box-shadow: 0 5px 10px -5px rgba(0,0,0,.2); } 
.gcListShow .listType3 li .btn-type{ position: absolute; z-index: 1; left: 50%; top:50%; margin-left: -15px; margin-top:-15px; background:rgba(0,0,0,.5); border-radius: 5px; text-align: center; line-height: 28px; display: inline-block; width:30px; height: 30px; cursor: pointer; }
.gcListShow .listType3 li .btn-type:hover{ transform: scale(1.03); transition: all .2s } 
.gcListShow .listType3 li .txt{ padding-top:5px; line-height: 24px; height: 48px; overflow: hidden; color: #000 }

.dtl-RInner{ position: absolute; z-index: 2; margin:0 auto; top:150px; left: 50%; margin-left: -600px; width:1200px;  }
.dtl-RInner .dtl-R{ position: absolute; top:0; right: 0; width:300px; border-radius: 10px 10px 10px 10px; }
.dtl-RInner .userT{ margin-bottom: 30px; padding:0 20px 20px; width:260px; border-radius: 10px; background:#fff;  box-shadow: 0 5px 15px rgba(0,0,0,.2); overflow: hidden;}
.dtl-RInner .userT .top{ margin-bottom: 10px; position: relative; height: 50px; padding: 20px 0 20px 60px; border-bottom: 1px solid #eee; border-radius: 10px 10px 0 0;}
.dtl-RInner .userT .top .img{ position: absolute; left: 0; top:20px; width:50px; height: 50px; border-radius: 25px; overflow: hidden; }
.dtl-RInner .userT .top .img a{ display: inline-block; width:50px; height: 50px }
.dtl-RInner .userT .top .img img{ display: block; width:inherit; height: inherit; }
.dtl-RInner .userT .top .t{ padding-top: 5px; margin-bottom: 3px; font-size: 16px; color: #000; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dtl-RInner .userT .top .t a:hover{ color: #cc2929 }
.dtl-RInner .userT .top .subT{ font-size: 12px; color: #999 }
.dtl-RInner .userT .top .subT a{ display: inline-block; }
.dtl-RInner .userT .top .subT a:hover{ font-weight: bold; transition: all .2s }
.dtl-RInner .userT .top .subT a.btn-followed{ color: #999 }
.dtl-RInner .userT .top .subT a.btn-followed:hover{ color: #666 !important }
.dtl-RInner .userT .gcTitle2{ height: 50px; line-height: 50px; font-size: 16px }

.dtl-RInner .hotPub li{ margin-bottom: 10px; }
.dtl-RInner .hotPub li .tit a{ display: block; font-size: 12px; color: #000; line-height: 18px; max-height: 36px; overflow: hidden; }
.dtl-RInner .hotPub li .tit a:hover{ color: #cc2929 }
.dtl-RInner .hotPub li .num{ color: #999; font-size: 12px; line-height: 18px }
.dtl-RInner .btn-more{ display: block; height: 36px; font-weight: bold; line-height: 36px; text-align: center; color: #fff; background:#cc2929; border-radius: 5px }
.dtl-RInner .btn-more:hover{ color: #fff }

.dtl-RInner .R-Opts a{ display: block; float: left; width:143px; height: 38px; line-height: 38px; text-align: center; border:1px solid #eee; background:#fff; border-radius: 25px; margin:0 10px 10px 0; color: #666; }
.dtl-RInner .R-Opts a.opt-zan,.dtl-RInner .R-Opts a.opt-jb{ margin-right: 0 }
.dtl-RInner .R-Opts a img.grey{ display: inline-block; opacity: .7; margin-right: 8px }
.dtl-RInner .R-Opts a img.red{ display: none }
.dtl-RInner .R-Opts a span{ color: #999; font-size: 12px }
.dtl-RInner .R-Opts a:hover em{ color: #000 }
.dtl-RInner .R-Opts a:hover img{ opacity: 1 }

.dtl-RInner .R-Opts a.opt-zt-3{ font-size: 12px }
.dtl-RInner .R-Opts a.opt-zt-3:hover,.dtl-RInner .R-Opts a.opt-zt-1:hover{ opacity: .7; cursor: default; }

.dtl-RInner .R-Opts a.checked img.grey{ display: none }
.dtl-RInner .R-Opts a.checked img.red{ display: inline-block; margin-right: 8px}
.dtl-RInner .R-Opts a.checked em{ color: #cc2929 }

/*.dtl-RInner-r{ position: absolute; z-index: 2; margin:0 auto; top:150px; left: 50%; margin-left: -600px; width:1200px;  }*/
.dtl-RInner-r{ float: right  }

.dtl-RInner-r .dtl-R{ position: absolute; top:0; right: 0; width:300px; border-radius: 10px 10px 10px 10px; }
.dtl-RInner-r .userT{ margin-bottom: 30px; padding:0 20px 20px; width:260px; border-radius: 10px; background:#fff;  box-shadow: 0 5px 15px rgba(0,0,0,.2); overflow: hidden;}
.dtl-RInner-r .userT .top{ margin-bottom: 10px; position: relative; height: 50px; padding: 20px 0 20px 60px; border-bottom: 1px solid #eee; border-radius: 10px 10px 0 0;}
.dtl-RInner-r .userT .top .img{ position: absolute; left: 0; top:20px; width:50px; height: 50px; border-radius: 25px; overflow: hidden; }
.dtl-RInner-r .userT .top .img a{ display: inline-block; width:50px; height: 50px }
.dtl-RInner-r .userT .top .img img{ display: block; width:inherit; height: inherit; }
.dtl-RInner-r .userT .top .t{ padding-top: 5px; margin-bottom: 3px; font-size: 16px; color: #000; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dtl-RInner-r .userT .top .t a:hover{ color: #cc2929 }
.dtl-RInner-r .userT .top .subT{ font-size: 12px; color: #999 }
.dtl-RInner-r .userT .top .subT a{ display: inline-block; }
.dtl-RInner-r .userT .top .subT a:hover{ font-weight: bold; transition: all .2s }
.dtl-RInner-r .userT .top .subT a.btn-followed{ color: #999 }
.dtl-RInner-r .userT .top .subT a.btn-followed:hover{ color: #666 !important }
.dtl-RInner-r .userT .gcTitle2{ height: 50px; line-height: 50px; font-size: 16px }

.dtl-RInner-r .hotPub li{ margin-bottom: 10px; }
.dtl-RInner-r .hotPub li .tit a{ display: block; font-size: 12px; color: #000; line-height: 18px; max-height: 36px; overflow: hidden; }
.dtl-RInner-r .hotPub li .tit a:hover{ color: #cc2929 }
.dtl-RInner-r .hotPub li .num{ color: #999; font-size: 12px; line-height: 18px }
.dtl-RInner-r .btn-more{ display: block; height: 36px; font-weight: bold; line-height: 36px; text-align: center; color: #fff; background:#cc2929; border-radius: 5px }
.dtl-RInner-r .btn-more:hover{ color: #fff }

.dtl-RInner-r .R-Opts a{ display: block; float: left; width:143px; height: 38px; line-height: 38px; text-align: center; border:1px solid #eee; background:#fff; border-radius: 25px; margin:0 10px 10px 0; color: #666; }
.dtl-RInner-r .R-Opts a.opt-zan,.dtl-RInner .R-Opts a.opt-jb{ margin-right: 0 }
.dtl-RInner-r .R-Opts a img.grey{ display: inline-block; opacity: .7; margin-right: 8px }
.dtl-RInner-r .R-Opts a img.red{ display: none }
.dtl-RInner-r .R-Opts a span{ color: #999; font-size: 12px }
.dtl-RInner-r .R-Opts a:hover em{ color: #000 }
.dtl-RInner-r .R-Opts a:hover img{ opacity: 1 }

.dtl-RInner-r .R-Opts a.opt-zt-3{ font-size: 12px }
.dtl-RInner-r .R-Opts a.opt-zt-3:hover,.dtl-RInner .R-Opts a.opt-zt-1:hover{ opacity: .7; cursor: default; }

.dtl-RInner-r .R-Opts a.checked img.grey{ display: none }
.dtl-RInner-r .R-Opts a.checked img.red{ display: inline-block; margin-right: 8px}
.dtl-RInner-r .R-Opts a.checked em{ color: #cc2929 }

.dtl-rside{ float: right;  width: 300px }
.dtl-rside .userItm{ padding:30px 10px 0 90px; position: relative; width:198px; height: 68px; margin:0 0 20px 0; border:1px solid #eee; border-radius: 10px }
/*.userList li:hover{ border:1px solid #cc2929; transition: all .2s }*/
.dtl-rside .userItm .img{ position: absolute; left: 20px; top:50%; margin-top:-30px; width:60px; height: 60px; border-radius: 50px }
.dtl-rside .userItm .img img{ display: inline-block; width:60px; height: 60px; border-radius: 50px }
.dtl-rside .userItm .tit{ font-size: 16px; color: #000; line-height: 20px }
.dtl-rside .userItm .tit a{ display: block; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.dtl-rside .userItm .tit a:hover{ color: #cc2929 }
.dtl-rside .userItm .info{ font-size: 12px; color: #999; line-height: 20px }
.dtl-rside .userItm .icon-follow{ position: absolute; right: 0; top:0; display: inline-block;padding:0 5px 0 18px; height: 20px; border-radius: 0 8px 0 8px; font-size: 12px; color: #fff; background:#cc2929 url(../img/icon-add-10-10.png) 5px center no-repeat; background-size: 10px 10px }
.dtl-rside .userItm .icon-followed{ position: absolute; right: 0; top:0; display: inline-block; padding:0 5px 0 20px;height: 20px; border-radius: 0 10px 0 10px; font-size: 12px; color: #999; background:#eee url(../img/icon-right-11.png) 5px center no-repeat; background-size: 11px 8px   }

.userStu{border:1px solid #eee; border-radius: 10px; margin-bottom: 20px; padding-bottom: 10px}
.userStu .userItm{ border:none;margin-bottom: 0 }
.userStu .line{ position: relative; height: 1px; background: #eee; margin: 0 20px 20px }
.userStu .line em{ position: absolute; left: 50%; margin-left: -35px; top:-10px; font-size: 12px; color: #999; display:inline-block; width: 70px; height: 20px; line-height: 20px; text-align: center; background: #ffff }
.userStu .newest{ margin:0 20px; }
.userStu .newest li{ height: 20px; margin-bottom: 10px; }
.userStu .newest li a{ display:block; position: relative; padding-left: 25px; font-size: 12px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis }
.userStu .newest li a i{ display:inline-block; position: absolute; left: 0; top:2px; width: 16px; height: 16px; text-align: center; line-height: 16px; font-size: 12px; color: #fff; font-family: Arial; font-style: normal; background: #ff6600; border-radius: 50px }
.userStu .desc{ font-size: 12px; line-height: 20px; color: #999; padding:0 20px 10px; }

.dtl-rside .R-Opts a{ display: block; float: left; width:143px; height: 38px; line-height: 38px; text-align: center; border:1px solid #eee; background:#fff; border-radius: 10px; margin:0 10px 10px 0; color: #666; }
.dtl-rside .R-Opts a.opt-zan,.dtl-rside .R-Opts a.opt-jb{ margin-right: 0 }
.dtl-rside .R-Opts a img.grey{ display: inline-block; opacity: .7; margin-right: 8px }
.dtl-rside .R-Opts a img.red{ display: none }
.dtl-rside .R-Opts a span{ color: #999; font-size: 12px }
.dtl-rside .R-Opts a:hover em{ color: #000 }
.dtl-rside .R-Opts a:hover img{ opacity: 1 }

.dtl-rside .R-Opts a.opt-zt-3{ font-size: 12px }
.dtl-rside .R-Opts a.opt-zt-3:hover,.dtl-RInner .R-Opts a.opt-zt-1:hover{ opacity: .7; cursor: default; }

.dtl-rside .R-Opts a.checked img.grey{ display: none }
.dtl-rside .R-Opts a.checked img.red{ display: inline-block; margin-right: 8px}
.dtl-rside .R-Opts a.checked em{ color: #cc2929 }

.dtl-rside .sideR-list{ margin-bottom: 10px }
.dtl-rside .sideR-list .tit{ line-height: 70px; height: 70px; font-size: 20px; font-family: 'Microsoft YaHei'; font-weight: bold; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.dtl-rside .sideR-list li{  position: relative; height: 70px; margin-bottom: 15px; padding-left: 115px }
.dtl-rside .sideR-list li .img{ position: absolute; left: 0; top:0; width: 105px; height: 70px; border-radius: 5px; overflow:hidden; background: #f7f7f7 url(../img/logo-small-grey.png) center no-repeat; background-size: 40px }
.dtl-rside .sideR-list li .img:hover{ transform: translateY(-2px); transition: all .3s }
.dtl-rside .sideR-list li .img a{ display:block; width: inherit; height: inherit; background: #f7f7f7 url(../img/logo-small-grey.png) center no-repeat; background-size: 40px}
.dtl-rside .sideR-list li .name{ margin-bottom: 5px }
.dtl-rside .sideR-list li .name a{ font-size: 12px; line-height: 20px; height: 40px; display:block; overflow-y: hidden }
.dtl-rside .sideR-list li .num{ font-size: 12px; color: #999 }

.dtl-rside .sideR-list .teamTit{ color: #cc2929; white-space: normal; }
.dtl-rside .sideR-list .teamTit i{ display:inline-block; border-radius: 50px; width: 24px; height: 24px; background: #cc2929; color: #fff; font-size: 16px; font-style: normal; text-align: center; line-height: 24px }
.dtl-rside .sideR-list .teamTit .name{ display:inline-block; width: 210px; height: 24px; line-height: 24px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; vertical-align: middle; }
.dtl-rside .sideR-list .teamTit .num{ font-size: 12px; color: #999; font-weight: normal; }

/*详情页播放弹层*/
.dtl-Dio{ position: fixed; width:100%; height: 100%; z-index: 2000 }
.dtl-Dio .mask{ position: fixed; left: 0; top:0; z-index: 30; width:100%; height: 100%; background:rgba(0,0,0,.5); }
.dtl-Dio .dioCnt{ position: fixed; z-index: 31;  background:#fff; }

@media screen and (max-width:1400px){
.dtl-Dio .dioCnt{ left:50px; top:50px; right:50px; bottom:50px; }
}
@media screen and (min-width:1401px){
.dtl-Dio .dioCnt{ left:150px; top:150px; right:150px; bottom:150px; }
}

.dtl-Dio .dioCnt .showImgs{ width:900px; height: 600px; float: left; }
.showDtlInfo{ padding: 20px; width:260px; position: absolute;right:0; top:0; bottom:0; background: #fff }
.showDtlInfo .tit{ height: 30px; line-height: 30px; margin-bottom: 10px }
.showDtlInfo .tit .num{ font-size: 18px; color: #999; display: inline-block; font-family: Arial }

.showDtlInfo .tit .btn-close{ display: inline-block; float: right; width:30px; height: 30px; background: url(../img/icon-close-14.png) center no-repeat; }
.showDtlInfo .info{ height: calc(100% - 40px); overflow-y: auto; }
.showDtlInfo .info .desc{ font-size: 14px; line-height: 24px; margin-bottom: 20px }
.showDtlInfo .info li{ position: relative; padding-left: 80px; height: 30px; line-height: 30px; font-size: 12px; border-bottom: 1px dotted #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.showDtlInfo .info li .key{ position: absolute; left: 0; top:0; display: inline-block; width:80px; height: 30px; line-height: 30px; text-align: left; color: #999; overflow:hidden; }

.dtlShowImgs{ position: absolute; left:0; top:0; bottom:0; right:300px; background:#000;  }

/*图片放大*/
#imgContainer{ position: absolute; left:0; top:0; bottom:0; right:0; overflow:hidden;  }  
#positionBtnDiv {background: rgb(58, 56, 63);background: rgba(58, 56, 63, 0.8);border: solid 1px #100000;color: #fff;padding: 8px;text-align: left;position: absolute;right:20px;bottom:20px;}
.zoomBtn {border: 0; cursor: pointer;}

.dtlShowVdo{ position: absolute; left:0; top:0; bottom:0; right:300px; background:#000;  }
.dtlShowVdo .vdoBox{ position: absolute;width:100%; height:100%}
.dtlShowVdo .vdoBox video{ display: block; width:100%; height: 100% }

.dtlShowAdo{ position: absolute; left:0; top:0; bottom:0; right:300px;  overflow: hidden }
.dtlShowAdo .adoBg{ position: absolute; left:0; top:0; bottom:50px; right:0; overflow:hidden; }
.dtlShowAdo .adoBg .bg{ position: absolute; left:0; top:0; bottom:0; right:0; background:#f2f2f2 url(../img/ado-bg-440.jpg) center no-repeat; background-size:550px 440px}
.dtlShowAdo .adoBg .ado-rotate{ position: absolute; left: 50%; top:50%; margin-left:-58px; margin-top:-58px; z-index: 33; display: block; width:116px; height: 116px; background-image: url(img/ado-rotate-116.png) center no-repeat; background-image: -webkit-image-set(url(../img/ado-rotate-116.png) 1x,url(../img/ado-rotate-232.png) 2x);}
.dtlShowAdo .adoBg .ado-rotate.run{ transform: rotate(360deg); -webkit-animation: rotate 10s infinite linear; -moz-animation:rota 20s infinite linear}
.dtlShowAdo .adoBox{ position: absolute; left:0; bottom:0; right:0; height: 50px; background:#eef0f1; display: block } 
.dtlShowAdo .adoBox audio{ display: block; width:100%; height: 50px }

/*弹层 举报*/
.gc-diolog{ position: relative; z-index: 100; }
.gc-diolog .mask{ position: fixed; z-index: 40; left: 0; top:0; width:100%; height: 100%; background: rgba(0,0,0,.5) }
.gc-diolog .gcDio-cnt{ position: fixed; z-index: 41; left: 50%; margin-left: -330px; top:50%; width: 580px; padding: 30px 40px 40px; background: #fff; border-radius: 10px }
.gc-diolog .gcDio-cnt .tit{ margin-bottom: 10px; line-height: 40px; font-size: 24px }
.gc-diolog .gcDio-cnt .btn-close{ position: absolute;right: 0; top:0; z-index: 42; width:50px; height: 50px; background:url(../img/icon-close-14.png) center no-repeat; opacity: .7}
.gc-diolog .gcDio-cnt .btn-close:hover{ opacity: 1 }
.gc-diolog .dioForm{}
.gc-diolog .dioForm .itm{ margin-bottom: 10px}
.gc-diolog .dioForm .itm .lbl{ height: 30px; line-height: 30px }
.gc-diolog .dioForm .itm .lbl em{ display: inline-block; height: inherit; line-height: inherit; font-size: 12px; color: #666 }
.gc-diolog .dioForm .itm .ipt,.gc-diolog .dioForm .itm .ipt .sel{ width:578px; height: 38px; border:1px solid #ddd; border-radius: 5px }
.gc-diolog .dioForm .itm .ipt input{ display: inline-block; width:578px; height: 20px; padding: 9px 0; text-indent: 10px;  border:none; outline: 0; border-radius: 5px; background: #f7f7f7 }
.gc-diolog .dioForm .itm .sel select{display: inline-block; width:578px;height: 38px; background:none; border-radius: 5px}
.gc-diolog .dioForm .itm .ipt input:focus,.gc-diolog .dioForm .itm .sel select{ background: none }
.gc-diolog .tips{ font-size: 12px; color: #666; line-height: 24px }
.gc-diolog .btns .btn-cancle{ display: inline-block; height: 40rpx; line-height: 40rpx; padding: 0 30px;  color: #666 }
.gc-diolog .btns .btn-cancle:hover{ color: #cc2929 }
.gc-diolog .infoTips{ position: relative; z-index: 45; float: right; height: 30px; width:30px; line-height: 30px; text-align: right; }
.gc-diolog .infoTips .icon-tips{ opacity: .4 }
.gc-diolog .itm .infoTips .tipsAlert{ position: absolute; z-index: 46; top:15px; right: 35px; padding: 10px; width:200px; line-height: 18px; font-size: 12px; color: #fff; background:#000; text-align: left; border-radius: 10px 0 10px 10px }
.gc-diolog .itm .infoTips .tipsAlert .icon-arrow{ position: absolute; top:0; right: -10px; width:13px; height: 15px; display:inline-block; background: url(../img/icon-arrow-right-13.png) center no-repeat; background-size: 100% }
.gc-diolog .itm .txtArea{ width:578px; height: 78px; border:1px solid #ddd; border-radius: 5px }
.gc-diolog .itm .txtArea textArea{ display: inline-block; width:558px; height: 58px; padding: 10px 10px;  background:none; border:none; outline: 0; background: #f7f7f7; border-radius: 5px  }
.gc-diolog .itm .txtArea textArea:focus{ background: none }
.diolog-jb-cnt .itm label{ line-height: 25px }
.diolog-jb-cnt .itm .rdo{ margin-right: 10px; vertical-align: auto; }

.gc-diolog-ent .dioForm .itm .ipt{ position: relative; border-top:none; border-right: none; border-left: none; border-radius: 0 }
.gc-diolog-ent .dioForm .itm .ipt input{ text-indent: 40px; background: none }
.gc-diolog-ent .dioForm .itm .ipt .icon-search{ position: absolute; left: 0; top:0; width: 40px; height: 40px; border-radius: 10px 0 0 10px; background: url(../img/icon-search-12.png) center no-repeat; background-size: 14px }

.gc-diolog-ent .createEnt{ height: 50px; line-height: 50px;}
.gc-diolog-ent .createEnt a{ display:block; height: inherit; line-height: inherit; font-size: 16px; color: #000; font-weight: bold; }
.gc-diolog-ent .createEnt a .fr{ display:inline-block; margin:20px 0 20px; }
.gc-diolog-ent .createEnt a:hover{ color: #cc2929 }

.gc-diolog-ent .entList{ max-height: 280px; overflow-y: auto }
.gc-diolog-ent .entList li{ margin-bottom: 10px }
.gc-diolog-ent .entList li .name{ font-size: 14px; color: #000; line-height: 24px;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-diolog-ent .entList li .num{ font-size: 14px; color: #999; line-height: 24px;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-diolog-ent .entList li a:hover .name,.gc-diolog-ent .entList li a:hover .num{ color: #cc2929 }

.gc-diolog-apply-cnt .itm label input{ margin-right: 8px }

.dtl-Dio-safe .loading{ position: absolute; left: 0; top:0; text-align: center; width:1200px; height: 600px; line-height: 600px; font-size: 18px; color: #999; border-radius: 5px; background: #fff }
.dtl-Dio-safe .loading img{width: 40px; height:auto; margin-right: 10px}

.noPermission-gc{ padding:50px 0; font-size: 18px; font-weight: bold; text-align: center; }
.noPermission-gc .in{ position: relative; padding-left: 45px; display:inline-block; text-align: left; }
.noPermission-gc .in .icon-warn{ position: absolute; left: 0; top:0; }
.noPermission-gc p{ font-weight: normal }
.noPermission-gc a{ text-decoration: underline;}
.showLstPanels{ position: relative; }
.showLstPanels .noPermission-mask{ position: absolute; left: 0; top:0; z-index: 100; width: 100%; height: 100%;background:rgba(255,255,255,.5); }

/*fr*/
.gcfj{width:860px}
.attUl{}
.attUl li{display:block; line-height:50px; height:50px; overflow:hidden}
.attUl li a{float:left; display:block; width:420px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left:50px; font-weight:bold}
.attUl li span{display:block; float:right; text-align:right; width:110px; font-size:12px; color:#999}
.attUl li.attDoc a{background:url(../img/ico_doc.png) no-repeat center left}
.attUl li.attXls a{background:url(../img/ico_xls.png) no-repeat center left}
.attUl li.attPpt a{background:url(../img/ico_ppt.png) no-repeat center left}
.attUl li.attZip a{background:url(../img/ico_zip.png) no-repeat center left}
.attUl li.attImg a{background:url(../img/ico_img.png) no-repeat center left}
.attUl li.attOther a{background:url(../img/ico_other.png) no-repeat center left}
.attUl li.attPdf a{background:url(../img/ico_pdf.png) no-repeat center left}

.gcWrap .bqsm{ margin-bottom:10px; padding:10px; line-height: 30px; font-size: 12px; border-top:1px solid #eee}
.gcWrap .ckzl{ padding:10px; line-height: 30px; font-size: 12px; background:#f7f7f7; border-radius: 5px;}