.mainContentC{ float:left; width:calc(100% - 944px); margin:0 5px; height:100%; } .mainContentC_t{ height:678px; box-sizing: border-box; border:1px solid #5397F0; border-radius: 2px; background:url("../image/center-bg.jpg") 0 0 no-repeat; } .mainContentC_b{ height:calc(100% - 683px); box-sizing: border-box; border:1px solid #5397F0; border-radius: 2px; margin-top:5px; } .mainContentC_b_t{ height:40px; line-height:40px; box-sizing: border-box; border-bottom:1px solid #5397F0; } .mainContentC_b_b{ height:calc(100% - 40px); overflow-y: auto; } .mainContentC_b_b>table{ width:100%; height:100%; } .superli { width:100%; overflow: hidden; } .superli>ul{ display: flex; justify-content: space-between; height:100%; } .superli>ul>li{ width:171px; height:171px; text-align: center; line-height:171px; flex:1; background:url("../image/circle1.png") no-repeat center !important; background-size:cover; font-size:24px; position: relative; } .superli>ul>li:nth-child(1){ top:240px; left:30px; animation:xiaonei1 linear infinite 2s; } .superli>ul>li:nth-child(2){ top:120px; left:15px; animation:xiaonei2 linear infinite 2s; } .superli>ul>li:nth-child(3){ left:0px; animation:xiaonei3 linear infinite 2s; } .superli>ul>li:nth-child(4){ left:15px; animation:xiaonei3 linear infinite 2s; } .superli>ul>li:nth-child(5){ top:120px; right:0px; animation:xiaonei2 linear infinite 2s; } .superli>ul>li:nth-child(6){ top:240px; right:30px; animation:xiaonei1 linear infinite 2s; } @keyframes xiaonei1 { 0% { top:230px; } 50% { top:240px; } 100% { top:230px; } } @keyframes xiaonei2 { 0% { top:110px; } 50% { top:120px; } 100% { top:110px; } } @keyframes xiaonei3 { 0% { top:10px; } 50% { top:20px; } 100% { top:10px; } } .superli ul li:hover { transform:scale(1.1); transition:all 0.3s; } .superli ul li a { display:block; color:#fff; } .superli>div:first-child{ width:100%; display: flex; justify-content: space-around; margin-top:10px; } .superli>div>div{ width:166px; height:166px; } .superOut{ width:166px; height:166px; border:0px solid #fff; border-radius:50%; overflow:hidden; position:relative; background: url("../image/circle3.png") no-repeat center !important;; } .superin{ width:166px; height:0; line-height:166px; text-align: center; position:absolute; bottom:0; left:0; } .superin_num{ color:#fff; font-size:20px; line-height:1.5; font-weight:bold; position:absolute; top:50%; margin-top:-25px; text-align:center; width:100%; } .superin_num>span{ font-size:26px; } .superli>div:last-child{ width:263px; height:271px; line-height:300px; text-align: center; background: url("../image/center-logo.png") center center no-repeat; margin:0 auto; } .superli>div:last-child>p{ width:100%; float:left; font-size:30px; text-align: center; line-height:40px; } .superli>div:last-child>p:first-child{ margin-top:95px; } .superli>div:last-child>p>span:first-child{ font-size:30px } .superli>div:last-child>p>span:last-child{ font-size:16px; } .indexMapBg{ width:100%; height:314px; background:url("../image/map.png") no-repeat center !important; clear: both; margin-top:-50px; } .centerBg{ background:url("../image/circle2.png") no-repeat center !important; background-size:cover; } .mainContentC_b_t{ padding:0 10px; } .mainContentC_b_t>span:last-child{ float:right; }