* { margin: 0; padding: 0; box-sizing: border-box; list-style: none; } html, body { font-family: "寰蒋闆呴粦", arial, helvetica, sans-serif; font-size: 14px; border: 0; outline: none; color: #b5e0ff; } .clearfix:after { display: block; clear: both; content: ""; visibility: hidden; height: 0; } a { text-decoration: none; } .clearfix { zoom: 1; } .fl { float: left; } .fr { float: right; } html { height: 100%; } body { width: 100%; height: 100%; overflow: hidden; background: url(../img/bg.jpg) no-repeat; background-size: 100% 100%; } ::-webkit-scrollbar { width: 6px; background-color: #17327e; border-radius: 3px; } /* 婊氬姩鏉℃粦鍧� */ ::-webkit-scrollbar-thumb { border-radius: 3px; background: #496bc9; } .ml-10 { margin-left: 10px; } /* 澶撮儴 */ .header { width: 100%; height: 136px; background: url(../img/topperbg.png) top center no-repeat; background-size: 100% 100%; position: absolute; z-index: 2; } .logo { width: 463px; height: 52px; position: absolute; top: 22px; left: 50%; margin-left: -231px; } .menu { width: 100%; height: 70px; padding: 0 26px; } .menu li.menu_fl { width: 198px; height: 70px; float: left; transform: skewX(45deg); border-left: 1px solid #166099; position: relative; } .menu li.menu_fr { width: 198px; height: 70px; float: right; border-right: 1px solid #166099; position: relative; transform: skewX(-45deg); } .menu li a { height: 70px; display: block; margin: 0 auto; line-height: 70px; color: #79c6fe; font-size: 22px; text-decoration: none; text-align: center; } .menu li.menu_fl a { transform: skewX(-45deg); } .menu li.menu_fr a { transform: skewX(45deg); } .menu li:hover, .menu li.selected { background: #0b2b5e; box-shadow: rgba(118, 197, 253, 0.8) 0px 0px 6px inset; } .menu li a img { vertical-align: middle; display: inline-block; margin-right: 10px; } /* 鐢ㄦ埛 */ .dropbtn { width: 26px; height: 44px; cursor: pointer; display: block; } .dropdown { position: absolute; right: 10px; top: 25px; display: inline-block; } .dropdown-content { display: none; position: absolute; border: 1px solid #155895; width: 120px; background: rgba(3, 25, 102, 0.9); right: 0; border-radius: 4px; } .dropdown-content span { overflow: hidden; width: 0px; height: 0px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #031966; top: -7px; font-size: 0; right: 7px; position: absolute; } .dropdown-content a { color: black; line-height: 36px; text-decoration: none; display: block; color: #b5e0ff; padding: 0 14px; } .dropdown-content a img { vertical-align: middle; display: inline-block; margin-right: 10px; } .dropdown-content a:hover { background-color: #0b2b5e } .dropdown:hover .dropdown-content { display: block; } /* 棣栭〉鍐呭 */ #wrapper { width: 100%; height: 100%; padding-top: 80px; position: relative; } .sy-row1 { height: 52px; padding: 0 20px; } /* 澶╂皵 */ .weather { width: 600px; height: 52px; line-height: 52px; font-size: 16px; color: #B5E0FF; } .time { width: 200px; height: 52px; line-height: 52px; font-size: 16px; } /* 閫氱煡鍏憡 */ .sy-tzgg { width: 80px; height: 52px; line-height: 52px; margin-right: 20px; font-size: 16px; position: absolute; right: 457px; top: 75px; } .sy-tzgg-icon { width: 30px; height: 32px; margin-top: 10px; line-height: 32px; position: relative; } .sy-tzgg-icon img { vertical-align: middle; display: inline-block; } .sy-tzgg-icon span { width: 14px; height: 14px; border-radius: 50%; background: #ff7200; line-height: 14px; font-size: 12px; color: #FFFFFF; text-align: center; position: absolute; top: 0; right: 0; } /* 鍗曚綅 */ .unit { width: 362px; height: 52px; background: url(../img/unit.png) no-repeat; padding-left: 60px; line-height: 52px; font-size: 18px; color: #b5e0ff; } .unit img { vertical-align: middle; display: inline-block; margin-right: 10px; } .sy-content { width: 100%; height: calc(100% - 5px); /* padding: 0 20px; */ padding-top: 10px; } .sy-left, .sy-right { width: 22.34%; height: 100%; } .sy-middle { width: 55.32%; height: 100%; padding: 0 20px; } .index-con1 { width: 100%; height: calc(33.33% - 20px); margin-bottom: 20px; } .index-title { width: 100%; height: 40px; background: url(../img/index-titbg.png) center no-repeat; text-align: center; font-size: 20px; color: #01c1ff; line-height: 40px; font-weight: 500; z-index: 1; position: relative; } .index-con1a { width: 100%; height: calc(100% - 21px); position: relative; background: url(../img/index-conbg.png) no-repeat; background-size: 100% 100%; margin-top: -21px; padding: 15px; padding-top: 36px; } .index-con1a span.border-span { display: block; position: absolute; width: 10px; height: 10px; } .index-con1a span.top-left { top: 0; left: 0; border-top: 2px solid #01c1ff; border-left: 2px solid #01c1ff; } .index-con1a span.top-right { top: 0; right: 0; border-top: 2px solid #01c1ff; border-right: 2px solid #01c1ff; } .index-con1a span.bottom-left { bottom: 0; left: 0; border-bottom: 2px solid #01c1ff; border-left: 2px solid #01c1ff; } .index-con1a span.bottom-right { bottom: 0; right: 0; border-bottom: 2px solid #01c1ff; border-right: 2px solid #01c1ff; } /* 瀹炴柦瀹夊叏鎸囨暟 */ .sy-ssaqzs { width: 100%; height: 100%; } .dunpai { height: 45.4%; font-size: 20px; color: #00f9ff; line-height: 100%; } .dunpai_img { width: 50%; height: 100%; text-align: right; padding-right: 30px; } .dunpai_img img { height: 100%; vertical-align: middle; display: inline-block; } .dunpai_fen { width: 50%; height: 100%; padding-top: 8%; } .dunpai_fen span.fenshu { font-size: 54px; padding-right: 20px; } .sy-ssaqzs1 { width: 100%; height: 37.3%; margin-top: 8%; } .sy-ssaqzs1 ul { width: 100; height: 100%; margin-right: -10px; } .sy-ssaqzs1 li { width: calc(25% - 10px); height: 100%; margin-right: 10px; border: 1px solid #2a64a7; text-align: center; font-size: 16px; float: left; display: block; padding: 8px 0; } .sy-ssaqzs1 li h5 { height: 50%; font-size: 16px; font-weight: normal; } .sy-ssaqzs1 li h3 { height: 50%; font-size: 24px; font-weight: normal; line-height: 100%; } /* 浠婃棩鍊肩彮 */ .sy-jrzbl { width: 41%; height: 100%; } .sy-jrzbl img { width: 100%; height: 100%; } .sy-jrzbr { width: calc(59% - 20px); height: 100%; margin-left: 20px; } .sy-jrzbr1 { height: 20%; line-height: 250%; border-bottom: 1px dotted#2c58c6; } .sy-jrzbr1 span { font-weight: bold; color: #01c1ff; } /* 瀹夊叏妫�鏌� */ .sy-tab-wrapper { width: 100%; height: 100%; } .sy-tab-menu { width: 345px; height: 34px; border: 1px solid #2a64a7; margin: 0 auto; border-radius: 6px; overflow: hidden; } .sy-tab-menu li { color: #b5e0ff; text-align: center; cursor: pointer; z-index: 0; float: left; width: 114px; border-right: 1px solid #2a64a7; line-height: 32px; font-size: 16px; } .sy-tab-menu li:last-child { border: 0; } .sy-tab-menu li:hover { color: #FFFFFF; font-weight: bold; background: #244298; box-shadow: rgba(106, 148, 254, 0.6) 0px 0px 6px inset; } .sy-tab-menu li.sy-active { color: #FFFFFF; font-weight: bold; background: #244298; box-shadow: rgba(106, 148, 254, 0.6) 0px 0px 6px inset; } .sy-tab-menu li.active:hover { color: #06d8f3; } .sy-tab-content { margin-top: 16px; height: calc(100% - 50px); overflow: hidden; } .sy-tab-content>.sy-tab-aq { width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; } /* 宸℃煡寮傚父 */ .sy-ycxc { width: 100%; height: 100%; overflow: auto; } .sy-ycxc table { width: 100%; } .sy-ycxc table tr { height: 40px; } .sy-ycxc table tr.shen { background: #173077; } .sy-ycxc table tr td { line-height: 40px; text-align: left; padding: 0 5px; } .sy-ycxc table tr td img { vertical-align: middle; display: inline-block; } .ysfb5d2d { color: #fb5d2d; } .ys23b531 { color: #23b531; } .ysffff00 { color: #ffff00; } /* 鐏伀鍣� */ .sy-mhq { width: 100%; height: 100%; background: url(../img/mhq.png) bottom center no-repeat; background-size: auto 100%; padding: 0 15px; padding-top: 20%; } .sy-mhql { width: 80px; height: 60px; text-align: center; } .sy-mhql h3 { font-size: 30px; font-weight: normal; } .sy-mhql h5 { font-size: 16px; font-weight: normal; } .yse9ab1d { color: #e9ab1d; } .ys00d8ff { color: #00d8ff; } /* 瀹炴椂鎶ヨ淇℃伅 */ .sy-bjxx { width: 100%; height: 100%; } .sy-bjxx li { min-height: 50px; border-bottom: 1px dashed #0765a6; padding:14px 5px; /*line-height: 50px;*/ } .sy-bjxx li span { font-size: 18px; margin-right: 10px; } .ysfb5d2d { color: #fb5d2d; } /* 闅愭偅澶勭疆 */ .sy-yhbz { width: 46.15%; height: 100%; padding-right: 15px; background: url(../img/yhcz-line.png) right center no-repeat; } .sy-yhzz { width: 48.72%; height: 100%; padding-right: 10px; } /* 涓棿鍥剧墖鏁堟灉 */ .sy-pic { height: 50.87%; } /* 璁惧鏁版嵁婊氬姩 */ .scrollbox { width: 120px; height: 100%; overflow: hidden; } #scrollDiv { width: 120px; height: calc(100% - 101px); overflow: hidden; } .sy-sbzs { height: 70px; width: 120px; padding: 6px 10px; border: #134d93 solid 1px; background: rgba(0,30,106,0.7); margin-bottom: 10px; } /*杩欓噷鐨勯珮搴﹀拰瓒呭嚭闅愯棌鏄繀椤荤殑*/ #scrollDiv li { height: 70px; width: 120px; padding: 6px 10px; border: #134d93 solid 1px; background: rgba(0,30,106,0.7); margin-bottom: 10px; } .scroll1{ height: 28px; line-height: 28px; text-align: center; } .scroll1-zs{ color: #00F9FF; font-size: 20px; } .scroll1-bj{ color: #fe4e00; font-size: 20px; } .scroltit { height: 20px; line-height: 20px; border: #134d93 solid 1px; background: rgba(0,30,106,0.7); } .scroltit .updown { width: 100%; margin: 0 auto; height: 18px; display: block; } #but_up { background: url(../img/up.png) center center no-repeat ; text-indent: -9999px } .sy-picxg{ width: calc(100% - 120px); padding: 0 10px; height: 100%; position: relative; } /* 姘存尝 */ @keyframes warn { 0% { transform: scale(0); opacity: 0.0; } 25% { transform: scale(0); opacity: 0.1; } 50% { transform: scale(0.1); opacity: 0.3; } 75% { transform: scale(0.5); opacity: 0.5; } 100% { transform: scale(1); opacity: 0.0; } } @-webkit-keyframes "warn" { 0% { -webkit-transform: scale(0); opacity: 0.0; } 25% { -webkit-transform: scale(0); opacity: 0.1; } 50% { -webkit-transform: scale(0.1); opacity: 0.3; } 75% { -webkit-transform: scale(0.5); opacity: 0.5; } 100% { -webkit-transform: scale(1); opacity: 0.0; } } .pulse { position: absolute; width: 680px; height: 290px; left: 100px; top: 10%; background: rgba(16,111,225,1); /* background: rgba(14,71,140,1); */ -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; opacity: 0; -webkit-animation: warn 2s ease-out; -moz-animation: warn 2s ease-out; animation: warn 2s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* 妞渾杞ㄨ抗 */ @keyframes animX{ 0% {left: 0px;} 100% {left: 720px;} } @keyframes animY{ 0% {top: 0px;} 100% {top: 290px;} } @keyframes scale { 0% { transform: scale(0.8) } 50% { transform: scale(1) } 100% { transform: scale(0.8) } } .pic-icon1{ animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -5s infinite alternate, animY 10s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate, scale 20s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate; } .pic-icon2 { animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -8.333s infinite alternate, animY 10s cubic-bezier(0.36, 0, 0.64, 1) -3.333s infinite alternate, scale 20s cubic-bezier(0.36, 0, 0.64, 1) -3.333s infinite alternate; } .pic-icon3 { animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -11.666s infinite alternate, animY 10s cubic-bezier(0.36, 0, 0.64, 1) -6.666s infinite alternate, scale 20s cubic-bezier(0.36, 0, 0.64, 1) -6.666s infinite alternate; } .pic-icon4 { animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -14.999s infinite alternate, animY 10s cubic-bezier(0.36, 0, 0.64, 1) -9.999s infinite alternate, scale 20s cubic-bezier(0.36, 0, 0.64, 1) -9.999s infinite alternate; } .pic-icon5 { animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -18.332s infinite alternate, animY 10s cubic-bezier(0.36, 0, 0.64, 1) -13.332s infinite alternate, scale 20s cubic-bezier(0.36, 0, 0.64, 1) -13.332s infinite alternate; } .pic-icon6 { animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -21.665s infinite alternate, animY 10s cubic-bezier(0.36, 0, 0.64, 1) -16.665s infinite alternate, scale 20s cubic-bezier(0.36, 0, 0.64, 1) -16.665s infinite alternate; } /* 闆疯揪*/ .radar { width: 35vw; height: 35vw; max-height: 35vw; max-width: 35vw; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; } .leida{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(../img/leida.png) center 40% no-repeat; } .radar:before { content: ' '; display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; animation: blips 5s infinite; animation-timing-function: linear; animation-delay: 1.4s; } /* .radar:after { content: ' '; display: block; background-image: linear-gradient(44deg, rgba(106, 159, 218, 0) 50%, #6a9fda 100%); width: 50%; height: 50%; position: absolute; top: 0; left: 0; animation: radar-beam 5s infinite; animation-timing-function: linear; transform-origin: bottom right; border-radius: 100% 0 0 0; } */ @keyframes radar-beam { 0% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } } @keyframes blips { 14% { background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #0e6cdb 30%, rgba(255, 255, 255, 0) 100%); } 14.0002% { background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #0e6cdb 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #0e6cdb 30%, rgba(255, 255, 255, 0) 100%); } 25% { background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #0e6cdb 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #0e6cdb 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #0e6cdb 30%, rgba(255, 255, 255, 0) 100%); } 26% { background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #0e6cdb 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #0e6cdb 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #0e6cdb 30%, rgba(255, 255, 255, 0) 100%); opacity: 1; } 100% { background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #0e6cdb 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #0e6cdb 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #0e6cdb 30%, rgba(255, 255, 255, 0) 100%); opacity: 0; } } .anqy{ width: 303px; height: 236px; background: url(../img/anqy.png) no-repeat; top: 10%; left: 327px; position: absolute; padding-top: 120px; color: #FFFFFF; font-size: 30px; text-align: center; font-weight: bold; } .anqy span{ font-size: 24px; } .pic-icon { width: 100%; height: 100%; position: absolute; top: -30px; left: 31px; } .pic-icon li.pici{ width: 150px; height: 150px; background: url(../img/pic-iconbg.png) center 82% no-repeat; display: block; } .pici1{ width: 100%; height: 100%; } .pici2{ width: 100%; height: 20px; line-height: 20px; font-size: 18px; color: #FFFFFF; } .pic-icon1{ position: absolute; top: -30px; right: 20%; } /* .pic-icon11{ background: url(../img/pic-icon1.png) top center no-repeat; } .pic-icon li:active .pic-icon11{ background: url(../img/pic-icon1a.png) top center no-repeat; } */ .pic-icon12{ position: absolute; top: 80%; left: 0; padding-left: 65%; } .pic-icon2{ position: absolute; top: 20%; right: 1%; } /* .pic-icon21{ background: url(../img/pic-icon2.png) top center no-repeat; } .pic-icon li:active .pic-icon21{ background: url(../img/pic-icon2a.png) top center no-repeat; } */ .pic-icon22{ position: absolute; top: 80%; left: 0; padding-left: 65%; } .pic-icon3{ position: absolute; top: 60%; right: 24%; } /* .pic-icon31{ background: url(../img/pic-icon3.png) top center no-repeat; } .pic-icon li:active .pic-icon31{ background: url(../img/pic-icon3a.png) top center no-repeat; } */ .pic-icon32{ position: absolute; top: 80%; left: 0; padding-left: 65%; } .pic-icon4{ position: absolute; top: 60%; left: 24%; } /* .pic-icon41{ background: url(../img/pic-icon4.png) top center no-repeat; } .pic-icon li:active .pic-icon41{ background: url(../img/pic-icon4a.png) top center no-repeat; } */ .pic-icon42{ position: absolute; top: 80%; left: 0; padding-left: 10%; } .pic-icon5{ position: absolute; top: 20%; left: 1%; } /* .pic-icon51{ background: url(../img/pic-icon5.png) top center no-repeat; } .pic-icon li:active .pic-icon51{ background: url(../img/pic-icon5a.png) top center no-repeat; } */ .pic-icon52{ position: absolute; top: 80%; left: 0; padding-left: 10%; } .pic-icon6{ position: absolute; top: -30px; left: 20%; } /* .pic-icon61{ background: url(../img/pic-icon6.png) top center no-repeat; } .pic-icon li:active .pic-icon61{ background: url(../img/pic-icon6a.png) top center no-repeat; } */ .pic-icon62{ position: absolute; top: 80%; left: 0; padding-left: 0; } #box1,#box2{cursor:pointer;} .red{color:#ff4800;} /* 鍙充笅瑙掗鑹� */ .sy-picys{ width: 60px; height: 90px; position: absolute; right: 0; bottom: 0; } .sy-picys li{ width: 100%; height: 30px; line-height: 30px; } .sy-picys li span{ width: 18px; height: 10px; margin-right: 10px; margin-top: 10px; border-radius: 2px; display: block; } .bg00f9ff{ background: #00f9ff; } .bgff4800{ background: #ff4800; } .bg949595{ background: #949595; }