/* 头部 */
.my-header{
  height: 137px;
  background: url('../images/top.png') center no-repeat;
  background-size: 100% 100%;
  padding: 0 60px;
  position: relative;
}
.my-header-top{
  height: 74px;
}
.my-header-top>div{
  flex: 1;
}
.nav-left{
  justify-content: left;
}
.nav-right{
  justify-content: right;
}
.nav-title1{
  font-size: 22px;
  color: #FFFFFF;
  margin-left: 25px;
  justify-content: left;
}
.nav-title-cen{
  font-size: 24px;
  color: #FFFFFF;
}
.nav-title2{
  float: right;
  width: 237px;
  line-height: 40px;
  text-align: center;
  color: #4774C5;
  margin-left: 25px;
  background: url('../images/nav-title2.png') no-repeat;
  background-size: 100% 100%;
}

/* 头部中间导航 */
.nav-btns>li{
  width: 170px;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  color: #6FA0FB;
  letter-spacing:10px;
  cursor: pointer;
  transition: color 0.3s;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.nav-btns>li:hover{
  color: #FFFFFF;
}
.nav-btns>.active{
  font-size: 20px;
  font-weight: bold;
  color: #FFFFFF;
}
.nav-btns>li:nth-child(1){
  background-image:url('../images/btn-zl.png');
}
.nav-btns>li:nth-child(1).active{
  background-image:url('../images/btn-zl-active.png') ;
}
.nav-btns>li:nth-child(2){
  width: 163px;
  background-image:url('../images/btn-all.png') ;
  background-position: right;
  text-indent: 12px;
}
.nav-btns>li:nth-child(2).active{
  background-image:url('../images/btn-all-active.png') ;
  background-position: right;
}
.nav-btns>li:nth-child(3){
  background-image:url('../images/btn-sb.png') ;
}
.nav-btns>li:nth-child(3).active{
  background-image:url('../images/btn-sb-active.png') ;
}
/* 头部中间标题 */
.nav-title{
  font-size: 30px;
  color: #8BC2FF;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.main{
  width: 95%;
  margin: 0 auto;
  display: flex;
  position: relative;
}

/* 公共部分 */
.content-cen{
  flex: 1;
}

.content-left,.content-right{
  width: 29%;
  position: relative;
  top: -20px;
}
.content-left>div,
.content-right>div,
#cen-2{
  margin-bottom: 30px;
  padding: 20px 25px;
  position: relative;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.left-nums,.right-nums{
  width: 100%;
  font-size: 66px;
  font-weight: bold;
  letter-spacing:8px;
  color: #99D7FF;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.left-1>.left-nums{
  bottom: 60px;
}
.left-1-active>.left-nums{
  bottom: 130px;
}
.right-nums{
  bottom: 48px;
}
.echa-label{
  color: #E0EFFF;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.echa-info{
  font-size: 14px;
  color: #FFFFFF;
}

/* 左侧 */
#left-title{
 line-height: 26px;
 height: 30px;
 margin-bottom: 0; 
 border-left: 13px solid #3092F6FF;
 padding: 0 0 0 23px;
 font-size: 26px;
 font-weight: bold;
 color: #8BC2FFFF;
}
.left-1{
  height: 190px;
  background-image: url('../images/left1.png') ;
}
.left-1-active{
  height: 314px;
  background-image: url('../images/left3.png') ;
}
#left-1>.echa-label{
  margin-top: 22px;
}
#left-2{
  height: 257px;
  background-image: url('../images/left2.png') ;
}

#left-3{
  height: 257px;
  background-image: url('../images/left2.png') ;
}
#left-3.left-3-active{
  height: 459px;
  background-image: url('../images/left4.png') ;
}

/* 中间 */
.content-cen>p{
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
.cen-title{
  color: #BDDAFB;
  margin: 20px 0 5px;
}
.cen-money{
  color: #ffffff;
}
.cen-money>span{
  font-size: 42px;
}
.cen-map{
  height: 490px;
  position: relative;
}
.cen-map-active{
  height: 80%;
}
.map-nav{
  position: absolute;
  left: 20px;
  z-index: 1;
}
.map-nav>span{
  color: #ffffff;
  cursor: pointer;
}
.map-nav>span:last-child>i{
 display: none;
}
#cen-2{
  height: 257px;
  margin:0 48px;
  background-image: url('../images/line-bg.png');
}

/* 右侧 */
#right-1{
  display: flex;
  padding: 20px 55px;
  height: 129px;
  background-image: url('../images/right1.png') ;
}

#right-1 .year-text{
  position: relative;
}
.year-text span{
  color: #E0EFFF;
  font-size: 38px;
  font-weight: bold;
}
.year-text .years{
  position: absolute;
  top: 60px;
  right: -20px;
  width: 132px;
  background-color: #3C6AB7;
  border: 2px solid #309EF2;
  z-index: 1;
  transition: display 2s;
}
.year-text .years-filter-default:before{
  box-sizing: content-box;
  width: 0px;
  height: 0px;
  position: absolute;
  top: -16px;
  right: 15px;
  padding: 0;
  border-bottom: 9px solid #3C6AB7;
  border-top: 9px solid transparent;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  display: block;
  content: '';
  z-index: 12;
}
.year-text .years-filter:before{
  box-sizing: content-box;
  width: 0px;
  height: 0px;
  position: absolute;
  top: -16px;
  right: 15px;
  padding: 0;
  border-bottom: 9px solid #4783DD;
  border-top: 9px solid transparent;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  display: block;
  content: '';
  z-index: 12;
}
.year-text .years:after{
  box-sizing: content-box;
  width: 0px;
  height: 0px;
  position: absolute;
  top: -18px;
  right: 15px;
  padding: 0;
  border-bottom: 9px solid #309EF2;
  border-top: 8px solid transparent;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  display: block;
  content: '';
  z-index: 10;
}
.years li{
  text-align: center;
  line-height: 43px;
  color: #E0EFFF;
  cursor: pointer;
}
.years li.active{
  background-color: #4783DD;
}

#right-1 .year-btn{
  width: 120px;
  line-height: 38px;
  text-align: center;
  background: url('../images/year-btn.png') no-repeat;
  background-size: 100% 100%;
  color: #E0EFFF;
  cursor: pointer;
}
.change-year-icon{
  width: 20px;
  height: 20px;
  background-size: cover;
  background-repeat: no-repeat;
  display: inline-block;
  margin-left: 18px;
}
.year-reduce{
  background-image: url('../images/arrow-top.png');
}
.year-add{
  background-image: url('../images/arrow-down.png');
}

#right-2{
  height: 139px;
  background-image: url('../images/right1.png') ;
  cursor: pointer;
}
#right-3{
  height: 139px;
  background-image: url('../images/right1.png') ;
  cursor: pointer;
}
#right-4{
  height: 257px;
  background-image: url('../images/left2.png') ;
}
#right-4.right-4-active{
  height: 347px;
  background-image: url('../images/right2.png') ;
}

.right-nums-1{
  color: #FFE199;
}
.right-nums-2{
  color: #67E452;
}


/* 
* 知识产权证券化大屏样式 
*/
.s .s-my-header{
  height: 94px;
  background: url('../images/s-top.png') center no-repeat;
}
/* 公共 */
.s #left-2{
  background: url('../images/s-2.png') no-repeat;
  background-size: 100% 100%;
}
.s .content-left>div,
.s .content-right>div,
.s #cen-2{
  margin-bottom: 40px;
}
#s-left-1,#s-right-1{
  padding: 40px 0 0;
}
.s-nums{
  width: 46%;
  height: 114px;
  border: 3px solid transparent;
  border-image:linear-gradient(to right,#37ACFE,#85B0FF,#2454d1) 1 10;
  background: rgba(0, 114, 231, 0.2)
}
.s-nums-1{
  height: 120px;
  border: none;
  background: url('../images/s-1.png') no-repeat;
  background-size: 100% 100%;
}
.s-nums .number-animate .number-animate-dom{
  width: 29px;
}
.s-nums .s-nums-label{
  padding: 14px;
  color: #FFFFFF;
}
.s-nums .s-nums-text{
  color: #FFFFFF;
}
.s .echa-label{
  font-size: 16px;
}
.s .echa-info{
  display: flex;
}

.s-tabs{
  cursor: pointer;
  border: none;
  border-radius: 4px;
  background-color: transparent;
  color: #DBF0FF;
  font-size: 14px;
  padding: 4px 6px;
}
.s-tabs.active{
  color: #FFFFFF;
  background-color: #1FA2FD;
}

/* 左侧 */
.s-left-nums,
.s-right-nums{
  font-size: 46px;
  font-weight: bold;
  letter-spacing:8px;
}
.s-nums .s-left-nums{
  color: #42DD8B;
}

/* 中间 */
.s .s-cen-title{
  color: #FF0000;
  font-size: 16px;
}
.s .cen-map{
  height: 471px;
}
.s .cen-map .echa-label{
  position: absolute;
  bottom: 36%;
  left: 6%;
  z-index: 99;
  font-size: 12px;
}
.s #cen-2{
  background-image: url('../images/s-3.png');
}

/* 右侧 */
.s .s-nums .s-right-nums{
  color: #FFF000;
}