480 lines
		
	
	
		
			14 KiB
		
	
	
	
		
			CSS
		
	
	
	
		
		
			
		
	
	
			480 lines
		
	
	
		
			14 KiB
		
	
	
	
		
			CSS
		
	
	
	
|  | * { | |||
|  |     padding: 0; | |||
|  |     margin: 0; | |||
|  |     box-sizing: border-box; | |||
|  | } | |||
|  | 
 | |||
|  | li, ol { | |||
|  |     list-style: none; | |||
|  | } | |||
|  | 
 | |||
|  | a { | |||
|  |     text-decoration: none; | |||
|  | } | |||
|  | 
 | |||
|  | @font-face { | |||
|  |     font-family: "方正大黑_GBK"; | |||
|  |     src: url("../font/方正大黑_GBK.eot?") format("eot"); | |||
|  |     src: url("../font/方正大黑_GBK.woff") format("woff"),url("../font/方正大黑_GBK.ttf") format("truetype"); | |||
|  | } | |||
|  | 
 | |||
|  | @font-face { | |||
|  |     font-family: "液晶数字"; | |||
|  |     src: url("../font/液晶数字.eot?") format("eot"); | |||
|  |     src: url("../font/液晶数字.woff") format("woff"),url("../font/液晶数字.ttf") format("truetype"); | |||
|  | } | |||
|  | 
 | |||
|  | ::-webkit-scrollbar { | |||
|  |     width: 5px; | |||
|  |     height: 5px; | |||
|  |     background-color: transparent; | |||
|  | } | |||
|  | 
 | |||
|  | ::-webkit-scrollbar-track { | |||
|  |     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); | |||
|  |     border-radius: 10px; | |||
|  |     background-color: #6b81d4; | |||
|  | } | |||
|  | 
 | |||
|  | ::-webkit-scrollbar-thumb { | |||
|  |     border-radius: 10px; | |||
|  |     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); | |||
|  |     background-color: #1843e2; | |||
|  | } | |||
|  | 
 | |||
|  |     ::-webkit-scrollbar-thumb:hover { | |||
|  |         border-radius: 5px; | |||
|  |         -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); | |||
|  |         background: rgba(0,0,0,0.4); | |||
|  |     } | |||
|  | 
 | |||
|  | html { | |||
|  |     scrollbar-face-color: #071857; | |||
|  |     scrollbar-highlight-color: #010a2c; | |||
|  |     scrollbar-3dlight-color: #010a2c; | |||
|  |     scrollbar-darkshadow-color: #010a2c; | |||
|  |     scrollbar-shadow-color: #071857; | |||
|  |     scrollbar-arrow-color: rgba(1,10,44,0.4); | |||
|  |     scrollbar-track-color: #071857; | |||
|  | } | |||
|  | 
 | |||
|  | html { | |||
|  |     font-size: 10vw; | |||
|  |     width: 100%; | |||
|  |     height: 100%; | |||
|  |     min-width: 1200px; | |||
|  |     font-family: Microsoft YaHei; | |||
|  |     line-height: 1; | |||
|  | } | |||
|  | 
 | |||
|  | @media screen and (max-width:1200px) { | |||
|  |     html { | |||
|  |         font-size: 120px; | |||
|  |     } | |||
|  | 
 | |||
|  |     ; | |||
|  | } | |||
|  | 
 | |||
|  | .ellipsis { | |||
|  |     overflow: hidden; | |||
|  |     text-overflow: ellipsis; | |||
|  |     white-space: nowrap; | |||
|  | } | |||
|  | 
 | |||
|  | .flexCenter { | |||
|  |     display: flex; | |||
|  |     align-items: center; | |||
|  |     justify-content: center; | |||
|  | } | |||
|  | 
 | |||
|  | .flexCenterV { | |||
|  |     display: flex; | |||
|  |     align-items: center; | |||
|  |     justify-content: center; | |||
|  |     flex-direction: column; | |||
|  | } | |||
|  | 
 | |||
|  | .sd-index4-body { | |||
|  |     background: #010817; | |||
|  |     background-image: url("../image/index4/bj.png"); | |||
|  |     background-position: center center; | |||
|  |     background-size: 100% 100%; | |||
|  |     background-repeat: no-repeat; | |||
|  | } | |||
|  | 
 | |||
|  | .sd-header { | |||
|  |     position: relative; | |||
|  |     width: 100%; | |||
|  |     height: .4375rem; | |||
|  |     padding: 0 .10417rem; | |||
|  |     background: url("../image/index4/header-bg.png") center center/100% 100% no-repeat; | |||
|  | } | |||
|  | 
 | |||
|  |     .sd-header .sd-header-title { | |||
|  |         position: absolute; | |||
|  |         top: .11458rem; | |||
|  |         left: 50%; | |||
|  |         transform: translate(-50%); | |||
|  |         font-size: .20833rem; | |||
|  |         color: #1AB1FF; | |||
|  |         white-space: nowrap; | |||
|  |         text-shadow: 0px 5px 0px rgba(5,63,152,0.5); | |||
|  |         font-weight: bold; | |||
|  |     } | |||
|  | 
 | |||
|  |     .sd-header .sd-header-top { | |||
|  |         position: relative; | |||
|  |     } | |||
|  | 
 | |||
|  |         .sd-header .sd-header-top .sd-header-top-left { | |||
|  |             position: absolute; | |||
|  |             left: .10417rem; | |||
|  |             top: .05208rem; | |||
|  |             color: #1ab1ff; | |||
|  |             display: flex; | |||
|  |             align-items: center; | |||
|  |         } | |||
|  | 
 | |||
|  |             .sd-header .sd-header-top .sd-header-top-left .sd-location-name { | |||
|  |                 margin-right: .09375rem; | |||
|  |             } | |||
|  | 
 | |||
|  |         .sd-header .sd-header-top .sd-header-top-right { | |||
|  |             position: absolute; | |||
|  |             top: .03646rem; | |||
|  |             right: 0; | |||
|  |         } | |||
|  | 
 | |||
|  |             .sd-header .sd-header-top .sd-header-top-right .sd-location-time { | |||
|  |                 font-size: .0625rem; | |||
|  |                 color: #B0E1FF; | |||
|  |             } | |||
|  | 
 | |||
|  | .disflex { | |||
|  |     display: flex; | |||
|  |     flex-direction: column; | |||
|  | } | |||
|  | 
 | |||
|  | body { | |||
|  |     height: 100%; | |||
|  | } | |||
|  | 
 | |||
|  |     body .sd-index4-body { | |||
|  |         height: 100%; | |||
|  |     } | |||
|  | 
 | |||
|  | .sd-body { | |||
|  |     flex: 1; | |||
|  |     height: auto; | |||
|  |     padding: .20833rem .20833rem .20833rem; | |||
|  |     display: flex; | |||
|  | } | |||
|  | 
 | |||
|  |     .sd-body .tit { | |||
|  |         width: 1.08333rem; | |||
|  |         height: .18229rem; | |||
|  |         font-size: .08333rem; | |||
|  |         color: #FFFFFF; | |||
|  |         background: url("../image/index4/tit.png") center center/100% 100% no-repeat; | |||
|  |         display: flex; | |||
|  |         align-items: center; | |||
|  |         justify-content: center; | |||
|  |         margin: 0 auto; | |||
|  |     } | |||
|  | 
 | |||
|  |     .sd-body .bg { | |||
|  |         background: rgba(3,39,109,0.1); | |||
|  |         border: 1px solid #03276D; | |||
|  |         box-shadow: inset 0px 0px .18229rem .01563rem rgba(3,39,109,0.6); | |||
|  |     } | |||
|  | 
 | |||
|  |     .sd-body .sd-content { | |||
|  |         width: 100%; | |||
|  |         height: 100%; | |||
|  |     } | |||
|  | 
 | |||
|  |     .sd-body .sdsec-wrap { | |||
|  |         height: 100%; | |||
|  |         margin-top: -.18229rem; | |||
|  |         padding-top: .18229rem; | |||
|  |         display: flex; | |||
|  |         align-items: center; | |||
|  |         justify-content: center; | |||
|  |     } | |||
|  | 
 | |||
|  |     .sd-body .sd-left { | |||
|  |         flex: 1; | |||
|  |     } | |||
|  | 
 | |||
|  |         .sd-body .sd-left.sd-l-wrap { | |||
|  |             display: flex; | |||
|  |             flex-direction: column; | |||
|  |             height: 100%; | |||
|  |         } | |||
|  | 
 | |||
|  |         .sd-body .sd-left .sbl-top, .sd-body .sd-left .sbl-bottom { | |||
|  |             background: rgba(3,39,109,0.1); | |||
|  |             border: 1px solid #03276D; | |||
|  |         } | |||
|  | 
 | |||
|  |         .sd-body .sd-left .sbl-top { | |||
|  |             height: .78125rem; | |||
|  |         } | |||
|  | 
 | |||
|  |             .sd-body .sd-left .sbl-top .sd-security-value { | |||
|  |                 height: .25521rem; | |||
|  |                 margin: .0625rem auto 0; | |||
|  |                 padding: 0 .02604rem; | |||
|  |                 text-align: center; | |||
|  |                 background: url("../image/index4/security-time-bg.png") center center/100% 100% no-repeat; | |||
|  |                 font-size: .15625rem; | |||
|  |                 color: #7ecef7; | |||
|  |                 font-family: "液晶数字"; | |||
|  |                 letter-spacing: .09896rem; | |||
|  |                 padding-top: .06771rem; | |||
|  |             } | |||
|  | 
 | |||
|  |         .sd-body .sd-left .sbl-bottom { | |||
|  |             flex: 1; | |||
|  |             margin: .15625rem 0 0; | |||
|  |             display: flex; | |||
|  |             flex-direction: column; | |||
|  |         } | |||
|  | 
 | |||
|  |             .sd-body .sd-left .sbl-bottom .content-fxgk { | |||
|  |                 flex: 1; | |||
|  |                 color: #fff; | |||
|  |                 display: flex; | |||
|  |                 flex-direction: column; | |||
|  |             } | |||
|  | 
 | |||
|  |                 .sd-body .sd-left .sbl-bottom .content-fxgk .sd-top-wrap { | |||
|  |                     height: 1.04167rem; | |||
|  |                     display: flex; | |||
|  |                     flex-wrap: wrap; | |||
|  |                     margin-top: .10417rem; | |||
|  |                 } | |||
|  | 
 | |||
|  |                     .sd-body .sd-left .sbl-bottom .content-fxgk .sd-top-wrap .stw-item-wrap { | |||
|  |                         width: 50%; | |||
|  |                         display: flex; | |||
|  |                         align-items: center; | |||
|  |                         justify-content: center; | |||
|  |                     } | |||
|  | 
 | |||
|  |                         .sd-body .sd-left .sbl-bottom .content-fxgk .sd-top-wrap .stw-item-wrap .stw-item { | |||
|  |                             width: 80%; | |||
|  |                             border-radius: .18229rem; | |||
|  |                             height: .41667rem; | |||
|  |                             margin-bottom: .10417rem; | |||
|  |                             display: flex; | |||
|  |                             flex-direction: column; | |||
|  |                             align-items: center; | |||
|  |                             justify-content: center; | |||
|  |                         } | |||
|  | 
 | |||
|  |                             .sd-body .sd-left .sbl-bottom .content-fxgk .sd-top-wrap .stw-item-wrap .stw-item.bg1 { | |||
|  |                                 background-color: #DF263D; | |||
|  |                             } | |||
|  | 
 | |||
|  |                             .sd-body .sd-left .sbl-bottom .content-fxgk .sd-top-wrap .stw-item-wrap .stw-item.bg2 { | |||
|  |                                 background-color: #F6A944; | |||
|  |                             } | |||
|  | 
 | |||
|  |                             .sd-body .sd-left .sbl-bottom .content-fxgk .sd-top-wrap .stw-item-wrap .stw-item.bg3 { | |||
|  |                                 background-color: #FFFF26; | |||
|  |                                 color: #333; | |||
|  |                             } | |||
|  | 
 | |||
|  |                             .sd-body .sd-left .sbl-bottom .content-fxgk .sd-top-wrap .stw-item-wrap .stw-item.bg4 { | |||
|  |                                 background-color: #28B4F2; | |||
|  |                             } | |||
|  | 
 | |||
|  |                             .sd-body .sd-left .sbl-bottom .content-fxgk .sd-top-wrap .stw-item-wrap .stw-item .num { | |||
|  |                                 font-size: .13542rem; | |||
|  |                                 margin-bottom: .05208rem; | |||
|  |                             } | |||
|  | 
 | |||
|  |                             .sd-body .sd-left .sbl-bottom .content-fxgk .sd-top-wrap .stw-item-wrap .stw-item .desc { | |||
|  |                                 font-size: .09375rem; | |||
|  |                             } | |||
|  | 
 | |||
|  |                 .sd-body .sd-left .sbl-bottom .content-fxgk .cf-list { | |||
|  |                     flex: 1; | |||
|  |                     padding: 0 .15625rem; | |||
|  |                 } | |||
|  | 
 | |||
|  |                     .sd-body .sd-left .sbl-bottom .content-fxgk .cf-list .l-wrap li { | |||
|  |                         font-size: .10417rem; | |||
|  |                         height: .15625rem; | |||
|  |                         line-height: .15625rem; | |||
|  |                     } | |||
|  | 
 | |||
|  |                     .sd-body .sd-left .sbl-bottom .content-fxgk .cf-list .news-list { | |||
|  |                         padding: 0; | |||
|  |                     } | |||
|  | 
 | |||
|  |                         .sd-body .sd-left .sbl-bottom .content-fxgk .cf-list .news-list .news-item { | |||
|  |                             display: block; | |||
|  |                             font-size: .07292rem; | |||
|  |                             color: #a4e1ff; | |||
|  |                             white-space: nowrap; | |||
|  |                             overflow: hidden; | |||
|  |                             text-overflow: ellipsis; | |||
|  |                             padding: .05208rem 0; | |||
|  |                         } | |||
|  | 
 | |||
|  |     .sd-body .sd-mid { | |||
|  |         flex: 1; | |||
|  |         margin: 0 .15625rem; | |||
|  |         color: #fff; | |||
|  |     } | |||
|  | 
 | |||
|  |         .sd-body .sd-mid .content { | |||
|  |             display: flex; | |||
|  |             flex-direction: column; | |||
|  |             justify-content: space-between; | |||
|  |             height: 100%; | |||
|  |             margin-top: -.18229rem; | |||
|  |             padding: .28646rem .15625rem .10417rem; | |||
|  |         } | |||
|  | 
 | |||
|  |             .sd-body .sd-mid .content .list { | |||
|  |                 flex: 1; | |||
|  |             } | |||
|  | 
 | |||
|  |                 .sd-body .sd-mid .content .list .l-wrap li { | |||
|  |                     font-size: .125rem; | |||
|  |                     height: .15625rem; | |||
|  |                     line-height: .15625rem; | |||
|  |                 } | |||
|  | 
 | |||
|  |             .sd-body .sd-mid .content .jump { | |||
|  |                 height: .26042rem; | |||
|  |                 font-size: .15625rem; | |||
|  |             } | |||
|  | 
 | |||
|  |     .sd-body .sd-right { | |||
|  |         flex: 1; | |||
|  |         color: #fff; | |||
|  |     } | |||
|  | 
 | |||
|  |         .sd-body .sd-right .content { | |||
|  |             display: flex; | |||
|  |             flex-direction: column; | |||
|  |             justify-content: space-between; | |||
|  |             height: 100%; | |||
|  |             margin-top: -.18229rem; | |||
|  |             padding: .28646rem .15625rem .10417rem; | |||
|  |         } | |||
|  | 
 | |||
|  |             .sd-body .sd-right .content .list { | |||
|  |                 flex: 1; | |||
|  |             } | |||
|  | 
 | |||
|  |                 .sd-body .sd-right .content .list .l-wrap li { | |||
|  |                     font-size: .125rem; | |||
|  |                     height: .15625rem; | |||
|  |                     line-height: .15625rem; | |||
|  |                 } | |||
|  | 
 | |||
|  |             .sd-body .sd-right .content .jump { | |||
|  |                 height: .26042rem; | |||
|  |                 font-size: .15625rem; | |||
|  |             } | |||
|  | 
 | |||
|  |     .sd-body .sd-right-new { | |||
|  |         margin-left: .15625rem; | |||
|  |         flex: 1.5; | |||
|  |         display: flex; | |||
|  |         flex-direction: column; | |||
|  |         color: #fff; | |||
|  |     } | |||
|  | 
 | |||
|  |         .sd-body .sd-right-new .sdr-top { | |||
|  |             flex: 1; | |||
|  |         } | |||
|  | 
 | |||
|  |         .sd-body .sd-right-new .sdr-bottom { | |||
|  |             flex: 1; | |||
|  |             margin-top: .15625rem; | |||
|  |         } | |||
|  | 
 | |||
|  |             .sd-body .sd-right-new .sdr-bottom .sd-output-box-wrap { | |||
|  |                 width: 100%; | |||
|  |                 height: 100%; | |||
|  |                 margin-top: -.18229rem; | |||
|  |                 padding-top: .18229rem; | |||
|  |             } | |||
|  | 
 | |||
|  |                 .sd-body .sd-right-new .sdr-bottom .sd-output-box-wrap .sd-output-box { | |||
|  |                     width: 100%; | |||
|  |                     height: 100%; | |||
|  |                 } | |||
|  | 
 | |||
|  |         .sd-body .sd-right-new .content { | |||
|  |             display: flex; | |||
|  |             justify-content: space-between; | |||
|  |             align-items: center; | |||
|  |             height: 100%; | |||
|  |             margin-top: -.18229rem; | |||
|  |             padding: 0rem .15625rem 0rem; | |||
|  |         } | |||
|  | 
 | |||
|  |             .sd-body .sd-right-new .content .list { | |||
|  |                 flex: 1; | |||
|  |             } | |||
|  | 
 | |||
|  |                 .sd-body .sd-right-new .content .list .l-wrap li { | |||
|  |                     font-size: .10417rem; | |||
|  |                     height: .15625rem; | |||
|  |                     line-height: .15625rem; | |||
|  |                 } | |||
|  | 
 | |||
|  |                 .sd-body .sd-right-new .content .list .news-list { | |||
|  |                     padding: 0; | |||
|  |                 } | |||
|  | 
 | |||
|  |                     .sd-body .sd-right-new .content .list .news-list .news-item { | |||
|  |                         display: block; | |||
|  |                         font-size: .07292rem; | |||
|  |                         color: #a4e1ff; | |||
|  |                         white-space: nowrap; | |||
|  |                         overflow: hidden; | |||
|  |                         text-overflow: ellipsis; | |||
|  |                         padding: .05208rem 0; | |||
|  |                     } | |||
|  | 
 | |||
|  |             .sd-body .sd-right-new .content .sd-video-item { | |||
|  |                 display: flex; | |||
|  |                 align-items: center; | |||
|  |                 justify-content: center; | |||
|  |                 flex-direction: column; | |||
|  |                 width: .57292rem; | |||
|  |                 height: .56771rem; | |||
|  |                 cursor: pointer; | |||
|  |                 background: url("../image/index4/video-num-bg.png") center center/100% 100% no-repeat; | |||
|  |             } | |||
|  | 
 | |||
|  |                 .sd-body .sd-right-new .content .sd-video-item + .sd-video-item { | |||
|  |                     margin-top: .13021rem; | |||
|  |                 } | |||
|  | 
 | |||
|  |                 .sd-body .sd-right-new .content .sd-video-item .sd-video-item-num { | |||
|  |                     font-size: .125rem; | |||
|  |                 } | |||
|  | 
 | |||
|  |                 .sd-body .sd-right-new .content .sd-video-item .sd-video-item-num--blue { | |||
|  |                     color: #1ab1ff; | |||
|  |                 } | |||
|  | 
 | |||
|  |                 .sd-body .sd-right-new .content .sd-video-item .sd-video-item-num--green { | |||
|  |                     color: #12cda2; | |||
|  |                 } | |||
|  | 
 | |||
|  |                 .sd-body .sd-right-new .content .sd-video-item .sd-video-item-desc { | |||
|  |                     margin-top: .04167rem; | |||
|  |                     font-size: .07292rem; | |||
|  |                     color: #1ab1ff; | |||
|  |                 } |