/* 头部*/ .header{ width: 100%; height: 1.5rem; /*background: red;*/ } .header .header-left{ width: 25%; height: 1.05rem; color: white; /* border: 1px solid green;*/ text-align: center; line-height: 1.05rem; } .header .header-center{ width: 50%; height: 1.2rem; /*border: 1px solid red;*/ /* background: url("../images/head.gif") no-repeat; background-size: 100% 100%;*/ position: relative; } .header .header-center .header-title{ text-align: center; color: #ffffff; font-size: .4rem; text-shadow: 0 0 .3rem #00d8ff; line-height: 1.05rem; } .header .header-img{ background: url("../images/head.gif") no-repeat center center; background-size: 100%; height: 100%; width: 100%; position: absolute; top: .4rem; } .header .header-right{ width: 25%; height: 1.05rem; /*border: 1px solid gold;*/ } .header .header-bottom{ width: calc(100% - .4rem); height: .16rem; background: url("../images/header.png") no-repeat; background-size: calc(100% - .2rem) 100%; padding: 0 .2rem; margin-left: .3rem; } /* 内容*/ .center{ padding: .1rem .2rem .1rem .2rem; } .center .center-left{ width: 35%; padding: .1rem; /* border: 1px solid red;*/ } .center .center-left .left-top{ width: 100%; height: 6.8rem; margin-bottom: .4rem; } .center .center-left .left-top h1{ color: white; font-size: .4rem; transform: rotateX(0deg); /*display: flex;*/ align-items: center; margin-bottom: 8px; position: relative; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; transform-origin: 50% 50%; /*transform: rotateX(0deg);*/ /*width: 100%;*/ transition: transform 500ms cubic-bezier(0.15, 0.52, 0.5, 0.9) 0s; /*height: 24px;*/ /*过渡效果*/ transition: all 1s; } /*.center .center-left .left-top h1:hover{ transform: rotateX(360deg); transition: all 2s; }*/ .title{ width: 90%; height: 0.3rem; /* border: 1px solid gold;*/ position: relative; top:.1rem; left: .25rem; color: white; padding-left: 0.12rem; line-height: 0.3rem; } .title:before{ width: 0.05rem; height: 0.25rem; top: 0.02rem; position: absolute; content: ""; background: #59ebe8; border-radius: 0.02rem; left: 0; } .top-list p{ font-size: .18rem; color: #029698; padding: .3rem; } .top-list li{ float: left; font-size: .2rem; color: #ffffff; width: 50%; height: .8rem; line-height: .8rem; padding: 0 .2rem; margin-bottom: .4rem; } .top-list li img{ margin: .1rem 0; display: block; float: left; line-height: .8rem; /*height: .8rem;*/ } .top-list li span{ display: block; float: left; padding-left: .2rem; line-height: .8rem; } .center .center-left .left-bottom{ width: 100%; height: 3.2rem; /*background: url("../images/panel.png") no-repeat; background-size: 100% 100%;*/ /*border: 0.01rem solid #217093;*/ } .center .center-left .bottom-b{ width: calc(100% - 0.2rem); height: 2.6rem; margin-left: 0.1rem; margin-top: 0.1rem; } .center .center-cen{ width: 65%; padding: .1rem; } .center .center-cen .cen-top{ width: 100%; height: 3.2rem; /*background: url("../images/a.png") no-repeat; background-size: 100% 100%;*/ /*border: 0.01rem solid #217093;*/ margin-bottom: .4rem; position: relative; } .center .center-cen .cen-top .top-title{ position: absolute; width: 60%; height: 2.2rem; /*border: 1px solid red;*/ left: .5rem; top:.5rem; } .center .center-cen .cen-top .top-title span{ font-size: .8rem; text-align: center; display: block; margin: 0 auto; line-height: 2.2rem; float: left; } .center .center-cen .cen-top .top-title li{ float: left; width: 50%; /*height: 1rem;*/ /*border: 1px solid green;*/ } .center .center-cen .cen-top .top-title li p, .center .center-cen .cen-top .top-title li span, .center .center-cen .cen-top .top-title li b{ color: #ffffff; } .center .center-cen .cen-top .top-title li b{ text-align: center; display: block; margin: .8rem auto 0 auto; float: left; } .center .center-cen .cen-top .top-title li p{ padding: .1rem; margin-left: .2rem; } .center .center-cen .cen-top .top-title li span{ text-align: center; display: inline-block; /*width: .35rem;*/ height: .45rem; /*background: #37a9ea;*/ margin-left: .3rem; line-height: .4rem; font-size: .5rem; margin-top: .6rem; } .datashuji{ position: absolute; margin-bottom: .1rem; bottom: .5rem; left: 20%; } .dataright{ position: absolute; margin-bottom: .1rem; bottom: .5rem; right: 5%; } .datashuji span,.dataright span{ font-size: .2rem !important; } .center .center-cen .cen-top .top-bottom{ width: 35%; height: 2.2rem; /*border: 1px solid red;*/ position: absolute; top:0.5rem; right: 0.1rem; padding: .2rem; /*overflow: hidden;*/ } .center .center-cen .cen-top .top-bottom span{ font-size: .8rem; text-align: center; display: block; margin: 0 auto; line-height: 2.2rem; } .center .center-cen .cen-bottom{ width: 100%; height: 6.8rem; } .center .center-cen .bottom-b{ width: calc(100% - 0.2rem); height: 6.4rem; margin-left: 0.1rem; margin-top: 0.1rem; } .gun{ /* width: 100%;*/ margin-top: .2rem; } .gun span{ display: block; float: left; height: .2rem; width: 25%; /*background: red;*/ /*margin: 15px 10px 10px 10px;*/ /*padding: 20px;*/ text-align: center; font-size: 0.14rem; font-weight: 600; color: #61d2f7; text-align: center; margin-bottom: .1rem; } #FontScroll{ width: 100%; height: 2.3rem; overflow: hidden; /*float: left;*/ margin-top: .1rem; /*margin: 0 5%;*/ /*margin-left: 50px;*/ /*background: gold;*/ } #FontScroll ul li{ height: .32rem; width: 100%; color: #ffffff; text-align: center; line-height: .32rem; /*border-bottom: 1px dashed #404040;*/ /*width:33.3%;*/ overflow: hidden; font-size: 0.14rem; /*border-bottom: 1px dashed #404040;*/ /*width:33.3%;*/ /*background: red; margin: 0 2%;*/ } /*#FontScroll ul li:nth-child(1){ !*background-color: #072951;*! box-shadow: -10px 0px 15px #034c6a inset, !*左边阴影*! 10px 0px 15px #034c6a inset; } #FontScroll ul li:hover{ box-shadow: -10px 0px 15px #034c6a inset, !*左边阴影*! 10px 0px 15px #034c6a inset; cursor: pointer; }*/ .fontInner span{ display:inline-block; /*float: left;*/ /*height: 20px;*/ width:24%; color: #ffffff; /*background: red;*/ } .fontInner span b{ display: inline-block; width: .2rem; height: .2rem; border-radius: 0.03rem; color: #ffffff; line-height: .2rem; }