.dialog-confirm .dialog-submit {
  border: none;
  background-color: #6f55c0;
  color: #fff;
  text-align: center;
  text-decoration: none; }
  .dialog-confirm .dialog-submit:hover {
    text-decoration: none;
    background-color: #8032f5; }
  .dialog-confirm .disabled.dialog-submit, .dialog-confirm .disabled.dialog-submit:hover {
    border: 1px solid #ddd;
    color: #999;
    background-color: #f8f8f8;
    cursor: not-allowed; }

.dialog-confirm .dialog-cancel {
  border: 1px solid #ddd;
  color: #666;
  text-align: center;
  text-decoration: none; }
  .dialog-confirm .dialog-cancel:hover {
    color: #6f55c0;
    border-color: #6f55c0;
    text-decoration: none; }
  .dialog-confirm .disabled.dialog-cancel, .dialog-confirm .disabled.dialog-cancel:hover {
    border: 1px solid #ddd;
    color: #999;
    background-color: #f8f8f8;
    cursor: not-allowed; }

.dialog-background {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 990;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.5);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000,endColorstr=#88000000); }

.dialog-section {
  opacity: 0;
  filter: alpha(opacity=0);
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 9999;
  padding: 0;
  margin: 0;
  background-color: #FFF;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); 
  max-width: 100%;
}

.dialog-body,
.dialog-imagelist {
  box-sizing: content-box;
  z-index: 1;
  min-width: 280px;
  height: 100%;
  padding: 10px;
  margin: 0;
  overflow: hidden;
  }
  .dialog-body.withNoPadding,
  .dialog-imagelist.withNoPadding {
    padding: 0; }
  .dialog-body.withNoMinWidth,
  .dialog-imagelist.withNoMinWidth {
    min-width: auto;
    min-width: 0; }

.dialog-body img {
  display: block;
  margin: 0 auto;
  vertical-align: top; }

.dialog-btnPrev,
.dialog-btnNext {
  position: absolute; }

.dialog-btnPrev,
.dialog-btnNext {
  top: 50%;
  z-index: 9;
  margin-top: -18px;
  width: 36px;
  height: 36px;
  overflow: hidden;
  font: 16px/36px 'Simsun';
  text-align: center;
  color: #fff !important;
  cursor: pointer;
  background-color: #7F7F7F;
  background-color: rgba(0, 0, 0, 0.5); }

.dialog-btnPrev {
  left: 0; }

.dialog-btnNext {
  right: 0; }

.dialog-disabled {
  cursor: not-allowed;
  background-color: rgba(0, 0, 0, 0.3);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#44000000,endColorstr=#44000000); }

.dialog-header {
  position: relative;
  width: auto;
  height: 39px;
  padding: 0 46px 0 16px;
  margin: 0;
  border-bottom: 1px solid #d9d9d9;
  font-size: 16px;
  line-height: 39px;
  white-space: nowrap;
  background-color: #e6e6e6;
  text-align: left;
  }
  .dialog-header + .dialog-body {
    padding-top: 10px;
    }
    .dialog-header + .dialog-body.withNoPadding {
      padding: 0; }

.dialog-close {
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
  }
  .dialog-close:before {
  content:"x";
  overflow:hidden;
  text-indent:-99px;
  display:block;
  height:14px;
  width:14px;
  margin: 12px 0 0 14px;
  background-image: url("icons-dialog.png");
  background-repeat: no-repeat;
  background-position: 0 -135px;
  }

#dialogTipBox .dialog-body {
  padding-top: 48px;
  padding-bottom: 48px; }
#dialogTipBox .dialog-msg {
  padding: 0;
  margin: 0;
  text-align: center; }
#dialogTipBox .dialog-msg-text {
  padding: 0;
  margin: 0;
  font-size: 16px; }
#dialogTipBox .i-success,
#dialogTipBox .i-warning,
#dialogTipBox .i-error {
  position: relative;
  display: inline-block;
  top: -2px;
  margin-right: 20px;
  width: 36px;
  height: 36px;
  vertical-align: middle;
  background-image: url("icons-dialog.png");
  background-repeat: no-repeat; }
#dialogTipBox .i-success {
  background-position: 0 0; }
#dialogTipBox .i-warning {
  background-position: 0 -45px; }
#dialogTipBox .i-error {
  background-position: 0 -90px; }

.dialog-confirm {
  box-sizing: content-box;
  position: relative;
  width: 235px;
  min-width: 235px;
  font-size: 0;
  text-align: left;
  margin: 0 auto; }
  .dialog-confirm.withCenter {
    text-align: center; }
  .dialog-confirm.withIcon, .dialog-confirm.withIconSuccess, .dialog-confirm.withIconWarning, .dialog-confirm.withIconError {
    padding-left: 54px; }
    .dialog-confirm.withIcon:before, .dialog-confirm.withIconSuccess:before, .dialog-confirm.withIconWarning:before, .dialog-confirm.withIconError:before {
      content: '';
      display: inline-block;
      vertical-align: middle;
      background-image: url("icons-dialog.png");
      background-repeat: no-repeat;
      position: absolute;
      left: 0;
      top: 0;
      width: 36px;
      height: 36px;
      background-position: 0 -45px; }
  .dialog-confirm.withIconSuccess:before {
    background-position: 0 0; }
  .dialog-confirm.withIconWarning:before {
    background-position: 0 -45px; }
  .dialog-confirm.withIconError:before {
    background-position: 0 -90px; }
  .dialog-confirm .dialog-msg {
    padding: 0;
    margin: 0;
    font-size: 16px;
    line-height: 32px; }
    .dialog-confirm .dialog-msg + .dialog-desc {
      margin-top: 10px; }
  .dialog-confirm .dialog-desc {
    padding: 0;
    margin: 0;
    font-size: 12px;
    line-height: 24px;
    margin-bottom: 20px; }
  .dialog-confirm .dialog-content {
    padding: 0;
    margin: 0;
    font-size: 12px;
    line-height: 24px;
    text-align: left; }
    .dialog-confirm .dialog-content + .dialog-buttonBox {
      text-align: center; }
  .dialog-confirm .dialog-buttonBox {
    overflow: hidden;
    padding: 0;
    margin: 24px 0 0 0; }
    .dialog-confirm .dialog-buttonBox a {
      margin-left: 15px; }
    .dialog-confirm .dialog-buttonBox a:first-child {
      margin-left: 0; }
  .dialog-confirm .dialog-submit,
  .dialog-confirm .dialog-cancel {
    display: inline-block; }
  .dialog-confirm .dialog-submit {
    width: 98px;
    height: 29px;
    font-size: 12px;
    line-height: 29px; }
  .dialog-confirm .dialog-cancel {
    box-sizing: content-box;
    width: 96px;
    height: 27px;
    font-size: 12px;
    line-height: 27px; }

.dialog-success-top {
  position: fixed;
  left: 50%;
  top: 0;
  z-index: 999;
  min-width: 400px;
  padding: 0;
  margin: 0;
  border-radius: 5px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  font-size: 16px;
  line-height: 46px;
  text-align: center;
  color: #fff;
  background-color: #4aac42; }
  .dialog-success-top .i-icon {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 26px;
    height: 18px;
    margin-right: 15px;
    background: url("icons-dialog.png") no-repeat 0 -180px; }

.dialog-warning-top {
  position: fixed;
  left: 50%;
  top: 0;
  z-index: 999;
  min-width: 400px;
  padding: 0;
  margin: 0;
  border-radius: 5px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  font-size: 16px;
  line-height: 46px;
  text-align: center;
  color: #fff;
  background-color: #ff4400; }

.tsr p{margin: 3px 0;padding: 0;border: 1px solid #f1f1f1;}
.tsr p:hover{background: #ffc;}
.relsth{color:#666;font-weight: 400;}
.tsr .dtlnk{display:block;width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: center;background: #f1f1f1;}
.tsr .relnks{display: block;width: 100%;overflow: auto;color:#666;/* text-overflow: ellipsis; */white-space: nowrap;text-align: center;padding: 3px;box-sizing: border-box;}
.tsr .dtlnk a{color:#000;font-weight: 800;display: inline-block;max-width: 50%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;vertical-align: bottom;}
.tsr .relnks a{color:#333;}
.tsr .relspbox .relResult{display: none;}
.tsr .relsth{cursor: pointer;}
.tsr .active.relspbox{border: 1px solid #ffc;padding: 3px;}
.tsr .active .relsth{background: #ffc;}
.tsr .active .relResult{display: block;}
.stbtns{text-align: center;margin-top: 10px;}
.stbtns a{*display:inline;display: inline-block;*zoom:1;width:28%;background: #006cba;color: #fff;border-radius: 5px;padding:3px;}
.stbtns a:hover{color: #ff0;}
#detailsBox .tsr{margin-top:10px;border: 1px solid #303c40;}
#detailsBox .tsr .dtlnk{background: #303c40;color:#fff;}
#detailsBox .tsr .dtlnk a{color:#fff;}

.redlistbox, #splnkbox {max-width:523px;}
#splnkbox .sepi, #spnodbox .sepi{display:none;}
.tsr .dtlnk{line-height: 32px;}
#spnodbox{position: relative;}
#detailsBox .tsr .relnks{overflow:visible;margin: 6px 0;}
#detailsBox .tsr .relnks a{padding: 8px 17px;border: 1px solid #303c40;margin-left:-1px;border-radius:3px;display: inline-block;line-height: 1em;}
#detailsBox .tsr p:hover{background:none;}
#detailsBox .tsr .relnks a:hover{background: #303c40;color:#fff;text-decoration:none;}
#spextbox{text-align: center;}
#spextbox>ul>li{margin:0 0 10px 0;border: 1px solid #ddd;height:100%;overflow: hidden;padding:10px;border-radius:5px;}
#spextbox dl{line-height: 2.2em;margin:3px auto;/* width:400px; */text-align: left;border-bottom:1px solid #ccc;}
#spextbox dt{display: inline-block;width: 150px;/* text-align: right; */font-weight:600;vertical-align: top;color: #1678b5;}
#spextbox dt a {color:#1678b5}
#spextbox dd{display: inline-block;width: 770px;}
#spextbox dl:last-child{border-bottom:0;}
#spextbox .redlistbox,#spextbox #spnodbox{max-width:523px;}
#spextbox .redlistbox li{border:0;padding: 3px 10px;border-right: 1px solid #c00;border-bottom: 1px solid #c00;margin: 0;}
.hotsobox{position:absolute;right:0;top:0;width:160px;margin-top: 5px;font-size: 13px;text-align: center;}
.htitem{background:#f00;color:#fff;text-align:center;border:1px solid #f00;font-size: 0;}
.htitem .htttl{float:left;width: 43%;background:#f00;color:#fff;line-height: 28px;font-size: 13px;}
.htitem .htdata{background:#fff;color:#f00;display: inline-block;height: 28px;padding: 0 3px;box-sizing: border-box;width: 57%;float: right;}
.htvalue{display: none;font-size: 13px;line-height: 28px;}
.htstar {
        display: inline-block;
        width: 80px;
        height: 16px;
        margin: 6px 0 2px;
        background-image: url('star.png');
        background-repeat: no-repeat;
        background-position: -80px 1px;
        position: relative;
    }
.htstar-fill {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background-image: url('star.png');
        background-repeat: no-repeat;
        background-position: 0;
        opacity: 1;
        width: 0%;
        overflow: hidden;
    }




.htimg {text-align:center;}
.htimg img{margin:0 auto;width:180px;height:180px;object-fit: cover;}

#starbox .hotsobox{position: relative;text-align: center;width:auto;margin-bottom: 10px;}
#starbox .htitem{width: 180px;margin:0 auto;}
#starbox .htitem .htttl{/* width: 80px; */}


.redlistbox{margin: 10px 0 0 0;border-top:1px solid #c00;border-left:1px solid #c00;box-sizing: border-box;}
.redlistbox li{line-height:24px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;box-sizing: border-box;padding:3px 10px;border-right:1px solid #c00;border-bottom:1px solid #c00;background: #fff;display: block;text-align: justify;text-align-last: justify;}
.redlistbox li a,.redlistbox li span{display: inline-block;text-align: left;text-align-last: left;overflow: hidden;text-overflow: ellipsis;vertical-align: middle;}
.redlistbox li.rlttl{text-align: center;text-align-last: center;background: #c00;color:#fff;}
.redlistbox li i{font-style:normal;}
.redlistbox li>a{width:43.5%;}
.redlistbox li.rlttl a{width:auto;color:#fff;}
.redlistbox li .catespan{color:#600;}
.redlistbox li .yearspan{color:#999;}
.redlistbox li .trendspan{color:#999;}

.redlistbox li .catespan[title=灭绝物种]{color: #222}
.redlistbox li .catespan[title=野外灭绝]{color: #333}
.redlistbox li .catespan[title=极危物种]{color: #700}
.redlistbox li .catespan[title=高危物种]{color: #900}
.redlistbox li .catespan[title=易危物种]{color: #b00}
.redlistbox li .catespan[title=低危物种]{color: #880}
.redlistbox li .catespan[title=近危物种]{color: #890}
.redlistbox li .catespan[title=无危物种]{color: #690}
.redlistbox li .catespan[title=数据缺乏]{color: #777}
.redlistbox li .catespan[title=暂未收录]{color: #666}

.redlistbox li .trendspan[title=减少]{color: #f00;font-size: 0;line-height: 0}
.redlistbox li .trendspan[title=减少]:before{content: "↓";font-size:12px;}
.redlistbox li .trendspan[title=增加]{color: #690;font-size: 0;line-height: 0}
.redlistbox li .trendspan[title=增加]:before{content: "↑";font-size:12px;}
.redlistbox li .trendspan[title=未知]{font-size: 0;line-height: 0}
.redlistbox li .trendspan[title=未知]:before{content: "－";font-size:12px;}
.redlistbox li .trendspan[title=无]{font-size: 0;line-height: 0}
.redlistbox li .trendspan[title=无]:before{content: "－";font-size:12px;}
.redlistbox li .trendspan[title=稳定]{color: #690;font-size: 0;line-height: 0}
.redlistbox li .trendspan[title=稳定]:before{content: "∽";font-size:12px;}


@media only screen and (max-width:800px) {
.dialog-section{top:auto;bottom:0;}
.redlistbox,#splnkbox,.hotsobox{margin-left: -105px;max-width: calc(100vw - 20px);overflow: hidden;}
#spnodbox,#spextbox .redlistbox{margin-left: -120px;}
#detailsBox .tsr .relnks{margin:1px 0;}
#detailsBox .tsr .relnks a{padding:3px 5px;}
#spextbox>ul>li{padding:5px}
#spextbox dl{width:calc(100vw - 12px);}
#spextbox dt{width:120px;}
#spextbox dd{width: calc(100vw - 132px);}
#starbox .hotsobox{margin: 10px auto;}
#starbox .htitem{/* width:auto; */}
.redlistbox li{max-width:calc(100vw - 15px);}
#spextbox .redlistbox li{max-width:calc(100vw - 2px);}
.redlistbox li>a{width:33%;}
.hotsobox{position:relative;width:auto;}
}

@media only screen and (max-width:359px) {
.dialog-body,
.dialog-imagelist {
  min-width: 300px;
  }  
}