portal/css/hsbigdata.css

*{
    padding: 0;
    margin: 0;
    font-family: 微软雅黑;
}
.clearfix{
    zoom: 1;
}
.clearfix:after{
    content: "";
    display: block;
    height: 0;
    overflow: hidden;
    clear: both;
}
a{
    list-style: none;
    text-decoration: none
}
li{
    list-style: none;
}
body{
    background: url(../img/img_bj.png);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-color: #22272b;
}
.row{
    width: 1200px;
    margin: 0 auto;
}
.logo{
    display: block;
    margin: 0 auto;
    margin-top: 88px
}
.font{
    display: block;
    margin: 0 auto;
    margin-top: 20px
}
.mid{
    width: 978px;
    height: 310px;
    margin: 0 auto;
    margin-top: 70px
}
.mid-card0{
    width: 266px;
    float: left;
    margin-left: 90px;
}
.mid-card1{
    width: 266px;
    float: left;
    margin-left:356px
}
.mid-card2{
    width: 266px;
    float: left;
    margin-left:148px
}
.mid-card{
    width: 266px;
	height: 160px;
	background-color: #2d3236;
	box-shadow: 1.8px 2.4px 9px 1px 
		rgba(6, 14, 19, 0.28);
    border-radius: 13px;
    padding-top: 25px
}
.mid-card0:first-child{
    margin-left: 0
}
.yuan-wai{
    width: 96px;
	height: 96px;
    background-color: #53595b;
    border-radius: 50%;
    margin-left: 85px
}
.yuan-li{
    width: 78px;
    height: 78px;
    float: left;
    border-radius: 50%;
    margin: 9px;
}
.icon-1{
    background: url(../img/icon_pingtaiyewu.png) center no-repeat;
    background-color: #ee524f;
}
.icon-11{
    background: url(../img/icon_shujufuwu.png) center no-repeat;
    background-color: #e6c149;
}
.icon-12{
    background: url(../img/icon_xiaoxi.png) center no-repeat;
    background-color: #a0c936;
}
.icon-13{
    background: url(../img/icon_shujujiaohuan.png) center no-repeat;
    background-color: #3ad1b3;
}
.icon-2{
    background: url(../img/icon_yunxingjiankong.png) center no-repeat;
    background-color: #c447cf;
}
.icon-21{
    background: url(../img/icon_dashuju.png) center no-repeat;
    background-color: #c447cf;
}
.icon-3{
    background: url(../img/icon_paas.png) center no-repeat;
    background-color: #8c50d1;
}
.icon-4{
    background: url(../img/icon_fuwukaifa.png) center no-repeat;
    background-color: #04b7a2;
}
.icon-5{
    background: url(../img/icon_kaifang.png) center no-repeat;
    background-color: #0389d0;
}
.icon-6{
    background: url(../img/icon_gongxiang.png) center no-repeat;
    background-color: #7daa0f;
}
.icon-7{
    background: url(../img/icon_chengshijiankong.png) center no-repeat;
    background-color: #f3b139;
}
.icon-8{
    background: url(../img/icon_shuiwenyunxing.png) center no-repeat;
    background-color: #ee524f;
}
.mid-card p{
    text-align: center;
    margin-top: 20px;
    font-size: 18px;
    color: #e7e7e7
}
.rukou{
    width: 266px;
	height: 34px;
	background-color: #2d3236;
	box-shadow: 1.8px 2.4px 9px 1px 
		rgba(6, 14, 19, 0.28);
    border-radius: 8px;
    margin-top: 20px;
    position: relative;
}
.rukou-h{
    margin-top: 10px
}
.rukou p{
    font-size: 14px;
    color:#8a87f3;
    line-height: 34px;
    text-align: center;
    cursor: pointer;
}
.rukou p:hover{
    color:#c0bfeb
}
.rukou img{
    position: absolute;
    right: 12px;
    top:11.5px
}
.bottom{
    width: 100%;
    height: 300px;
    margin-top: 110px;
    overflow: hidden;
    overflow-x: auto;
    white-space: nowrap;
    background: url(../img/dibu.png);
    background-repeat: no-repeat;
    background-size: 1200px auto;
    background-position: 0 120px
}
.bottom-but{
    width: 120%;
}
.bottom-card0{
    position: relative;
    width: 175px;
    float: left;
    margin-left: 100px;
    height: 194px;
}
.big-card{
    width: 175px;
    height: 175px;
    cursor: pointer;
}
.little-card{
    width: 140px;
    height: 140px;
    border-radius: 12px;
    float: left;
    margin-top: 35px;
    margin-left: 17.5px;
}
.little-card1{
    background-image: linear-gradient(120deg, 
    #56aaee 0%, 
    #2e6cde 100%), 
linear-gradient(
    #e16d6d, 
    #e16d6d);
background-blend-mode: normal, 
    normal;
}
.little-card2{
    background-image: linear-gradient(120deg, 
		#5459db 0%, 
		#772ab4 100%), 
	linear-gradient(
		#e16d6d, 
		#e16d6d);
	background-blend-mode: normal, 
		normal;
}
.little-card3{
    background-image: linear-gradient(120deg, 
		#8f43db 0%, 
		#ae4774 100%), 
	linear-gradient(
		#e16d6d, 
		#e16d6d);
	background-blend-mode: normal, 
		normal;
}
.little-card4{
    background-image: linear-gradient(120deg, 
		#ab5e92 0%, 
		#b7763e 100%), 
	linear-gradient(
		#e16d6d, 
		#e16d6d);
	background-blend-mode: normal, 
		normal;
}
.little-card5{
    background-image: linear-gradient(120deg, 
        #bc7575 0%, 
		#dbb64c 100%), 
	linear-gradient(
		#e16d6d, 
		#e16d6d);
	background-blend-mode: normal, 
		normal;
}
.little-card img{
   width: 68px;
   height: 68px;
   margin-left: 36px;
   margin-top: 36px
}
.little-card:hover{
    transform: scale(1.25);
    margin-top: 17.5px
}
.little-card-active{
    transform: scale(1.25);
    margin-top: 17.5px
}
.bottom-card0 p{
    position: absolute;
    font-size: 22px;
    color: #1b2026;
    text-align: center;
    top: 20px;
    left: 30px;
}
.bottom-font{
    width: 120%;
}
.bottom-font ul li{
    font-size: 24px;
    color: #1b2026;
    float: left;
}
.bottom-font ul li:nth-child(1){
    margin-left: 112px
}
.bottom-font ul li:nth-child(2){
    margin-left: 105px
}
.bottom-font ul li:nth-child(3){
    margin-left: 90px
}
.bottom-font ul li:nth-child(4){
    margin-left: 122px
}
.bottom-font ul li:nth-child(5){
    margin-left: 141px
}
.bottom::-webkit-scrollbar{
     width:20px; 
     height:10px; 
     background:#d2d2d2; 
     border-radius:10px;
     /*外层轨道*/
}
.bottom::-webkit-scrollbar-thumb{ 
    display:block; 
    width:6px; 
    margin:0 auto; 
    border-radius: 10px; 
    background: linear-gradient(to right, #d27279 , #6456e0) /* 标准的语法 *//*内层轨道*/
}