/*头部*/ .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: 30%; padding: .1rem; /* border: 1px solid red;*/ } .center .center-left .left-top{ width: 100%; height: 1.8rem; margin-bottom: .4rem; /*background: url("../images/panel.png") no-repeat; background-size: 100% 100%;*/ /*transform-style: preserve-3d;*/ /* border: 0.01rem solid #217093; position: relative; overflow: hidden;*/ } .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{ margin-top: .3rem; padding-left: 2%; width: calc(100% - .2rem); } .top-list span{ display: inline-block; text-align: center; padding: 0px 3%; color: #08faf6; letter-spacing: 1px; } .top-list span p{ line-height: .3rem; color: #fff; } .center .center-left .left-cen{ width: 100%; height: 2.4rem; margin-bottom: .4rem; /*background: url("../images/panel.png") no-repeat; background-size: 100% 100%;*/ /*border: 0.01rem solid #217093;*/ } .center .center-left .left-cen .banner{ width: calc(100% - .2rem); height: calc(100% - .6rem); margin-left: .1rem; margin-top: .1rem; padding: .1rem; box-sizing: border-box; overflow: hidden; } .center .center-left .left-cen .banner ul{ /*width: calc(100% - .2rem) !important;*/ height: 100%; } .center .center-left .left-cen .banner li{ color: white !important; width: 6rem; float:left; height: 100%; margin-top: .1rem; } .center .center-left .left-cen .banner li .list{ color: white !important; width: 100%; float:left; height: 100%; } .center .center-left .left-cen .banner li .list .listTxt{ color: white !important; /*width: 80%;*/ float:left; height: 100%; } .center .center-left .left-cen .banner li .list .listTxt p{ color: #a9e2ff; font-size: 14px; line-height: 25px; } .center .center-left .left-cen .banner li .list .listImg{ color: white !important; /*width: 20%;*/ float:left; height: 100%; } .center .center-left .left-cen .banner li .list .listImg img{ width: .6rem; height: .6rem; } /*.center .center-left .left-cen .company .wodryRX0 span{ background: red; }*/ .center .center-left .left-bottom{ width: 100%; height: 3.2rem; margin-bottom: .4rem; /*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: 40%; padding: .1rem; } .center .center-cen .cen-top{ width: 100%; height: 6.8rem; /*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: 35%; height: 1.5rem; /*border: 1px solid red;*/ left: .5rem; top:.5rem; } .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 p{ padding: .1rem; } .center .center-cen .cen-top .top-title li span{ text-align: center; display: inline-block; width: .35rem; height: .45rem; background: #37a9ea; margin-left: .1rem; line-height: .4rem; font-size: .3rem; margin-top: .1rem; } .center .center-cen .cen-top .top-bottom{ width: 100%; height: 4.8rem; /*border: 1px solid red;*/ position: absolute; top:1.6rem; padding: .2rem; /*overflow: hidden;*/ } .center .center-cen .cen-bottom{ width: 100%; height: 3.2rem; /*border: 0.01rem solid #217093;*/ } .center .center-cen .bottom-b{ width: calc(100% - 0.2rem); height: 2.6rem; margin-left: 0.1rem; margin-top: 0.1rem; } .center .center-right{ width: 30%; padding: .1rem; } .center .center-right .right-top{ width: 100%; height: 3.2rem; margin-bottom: .4rem; /*border: 0.01rem solid #217093;*/ } .center .center-right .right-top .right-top-cent{ width: calc(100% - 0.2rem); height: 2.6rem; margin-left: 0.1rem; margin-top: 0.1rem; } .center .center-right .right-cen{ width: 100%; height: 3.2rem; margin-bottom: .4rem; /*border: 0.01rem solid #217093;*/ border:1px solid #0bc4e9; background: rgba(0,72,115,0.28); transition: all 1s; cursor: pointer; position: relative; } .center .center-right .right-cen .right-cen-cent{ width: calc(100% - 0.2rem); height: 2.6rem; margin-left: 0.1rem; margin-top: 0.1rem; } .center .center-right .right-bottom{ width: 100%; height: 3.2rem; /*border: 0.01rem solid #217093;*/ } .center .center-right .right-bottom .chat{ /* width: calc(100% - .2rem); height: calc(100% - .6rem); margin-top: .1rem; margin-left: .1rem; padding: .1rem;*/ width: calc(100% - 0.2rem); height: 2.6rem; margin-left: 0.1rem; margin-top: 0.1rem; /*overflow: hidden;*/ } .popup{ width: 0; height: 0; /*background: #061f3e;*/ background: rgba(25,127,170,.9); border: 1px solid #197faa; margin: 40px auto 0; box-shadow: 0px 0px 10px #197faa inset; position: absolute; top: 50%; left: 50%; z-index: 999; border-radius: 8px; display: block; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .popup .popupClose{ display: block; width: 44px; height: 44px; background: url(../images/s_ico3.png); background-size: 100 100%; position: absolute; top: -22px; right: -22px; display: none; transition: 0.3s; } .popup .popupClose:hover{ transform: rotate(180deg); }