/* 公共初始化样式 * */ body { margin: 0; padding: 0; height:100%; width:100%; font-size: 16px; -webkit-text-size-adjust: none; background: url(../img/waikuang.png) no-repeat; background-size:cover; /*overflow-x: hidden;*/ /* background: -webkit-radial-gradient(circle, #12266a, #000221); */ /* Safari 5.1 - 6.0 */ /* background: -o-radial-gradient(circle, #12266a, #000221); */ /* Opera 11.6 - 12.0 */ /* background: -moz-radial-gradient(circle, #12266a, #000221); */ /* Firefox 3.6 - 15 */ /* background: radial-gradient(circle, #12266a, #000221); */ /* 标准的语法(必须放在最后) */ font-family: "微软雅黑"; } ul, li { margin: 0; padding: 0; } li { list-style-type: none; } img { border: 0; } p { margin: 0; padding: 0; } /* .orderTtype_Con div.active{ border:2px solid red; } */ .nav_middle{ } /* .clearfix ul li.img_cente{ width:100%; height:50px; line-height: 40px; font-size: 38px; font-weight: bold; color:#FFFFFF; text-align: center; } */ .clearfix:after { content: " "; display: block; clear: both; height: 0; } a { text-decoration: none; } #save_ssss{ margin-left: 10px; color:#00E9FF; font-size:12px; border:2px solid #00E9FF; } /*首页样式开始 */ #nav { width:100%; height:50px; line-height: 50px; font-size: 38px; font-weight: bold; color:#FFFFFF; text-align: center; } #nav>div { float: left; } #nav .nav_left, .nav_right { width: calc((100% - 1200px) / 2); height: 84px; /*background: -webkit-linear-gradient(left, transparent, #104d9a); background: -o-linear-gradient(left, transparent, #104d9a); background: -moz-linear-gradient(left, transparent, #104d9a); background: linear-gradient(to right, transparent, #104d9a);*/ /*border: 2px solid #0eb4ea; border-right: 0; border-left: 0;*/ /*position: relative;*/ } /*#nav .nav_left:before{ position: absolute; right: 0; content: ""; width: 13px; height: 84px; border-width: 32px 18px 52px 42px; border-style: solid; border-color: transparent #070f3a transparent transparent; }*/ .nav_middle { width: 1200px; margin: 0 auto; background: url(../img/waihuan.png) no-repeat center; background-size:100% 100%; /*min-width: 1220px;*/ } #nav>div>img { display: block; width: 100%; height: 84px; } .nav_middle>ul li { float: left; } .nav_middle>ul li { width: 13%; /*width: 160px;*/ } .nav_middle>ul li:nth-of-type(3) { width: 48%; /*width: 560px;*/ } .nav_middle>ul li img { display: block; width: 100%; } #wrap { /*width: 80%;*/ margin: 0 auto; /*height: calc(100vh - 195px);*/ width: 1500px; max-width: 1500px; margin: 0 auto; height: 1000px; } .swiper-container { padding-bottom: 35px; } .swiper-container, .swiper-slide { height: 100%; width: 100%!important; } .swiper-pagination-bullet { width: 48px!important; height: 48px!important; opacity: 1!important; background: url(../img/paginat.png) no-repeat; vertical-align: middle; } .swiper-pagination-bullet-active { height: 73px!important; width: 73px!important; background: url(../img/paginat_active.png) no-repeat; animation: 20s infinite radar_pagination linear; -webkit-animation: 5s infinite radar_pagination linear; } @keyframes radar_pagination { 0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); } 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); } } @-webkit-keyframes radar_pagination { 0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); } 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); } } .swiper-button-next, .swiper-button-prev { width: 51px; height: 20px; bottom: 35px!important; top: auto; } .swiper-button-prev { left: 35%; z-index: 999; background: url(../img/go_prev.png) no-repeat; } .swiper-button-next { right: 35%; background: url(../img/go_next.png) no-repeat; } .swiper-slide>div { width: 100%; position: relative; } .slideCon_bg { background: url(../img/slide_bg1.png) no-repeat; height: 100%; width: 100%; background-size: 100% 100%; } .slide_title { position: absolute; height: 2.8rem; width: 26rem; left: 44%; top: 8.8%; background-size: 100%; font-size: 24px; font-weight: 700; color: #ffffff; } .slide_title1 { /*background: url(../img/slide_title1.png) no-repeat;*/ } .slide_title2 { /*background: url(../img/slide_title2.png) no-repeat;*/ left: 42%; } .slide_title3 { /*background: url(../img/slide_title3.png) no-repeat;*/ left: 45%; } .slide_title4 { /*background: url(../img/slide_title4.png) no-repeat;*/ left: 43%; } .slide_title5 { /*background: url(../img/slide_title5.png) no-repeat;*/ left: 46%; } /*首页第一屏*/ .slideCon_bg>div{ float: left; box-sizing: border-box; padding-top: 140px; } /* .slideCon_bg div.oneRog{ box-sizing: border-box; } */ .slideCon_bg .twotimeWarp { float: left; box-sizing: border-box; padding-top: 40px; margin-left: 130px; } /* .oneRog{ padding-top: 260px; } */ .slide_left, .slide_right { width: 25%; } .slide_middle { width: 50%; } .slide_middle_first{ width: 75%; margin-left: -5%; } .orderStatistic>.orderCon_middle { padding-top: 180px; } .orderStatistic>.orderCon_left { box-sizing: border-box; padding-left: 137px; } .orderStatistic>div>ul li { height: 120px; width: 250px; margin-top: 27px; background: url(../img/num_frame.png) no-repeat center; background-size: 100%; position: relative; } .orderStatistic>div>ul li div { font-size:12px; color:#fff; margin-left: 27px; } .slideCon_bg>div>ul li img { width: 50px; height: 50px; padding-left: 37px; padding-top: 25px; display: inline-block; vertical-align: middle; } .slideCon_bg>div>ul li .num_word { display: inline-block; vertical-align: middle; font-size: 14px; color: #02d0ee; margin-top: 20px; } .slideCon_bg>div>ul li .num_word span:nth-of-type(2) { color: #fff; margin-right: 10px; } .slideCon_bg>div>ul li .num_word span:nth-of-type(3) { color: #fdcf2f; font-size: 18px; } /*雷达样式开始*/ .radar { /*background: -webkit-radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), -webkit-repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), -webkit-linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), -webkit-linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);*/ background: -webkit-radial-gradient(center, rgba(3, 248, 255, 0.5) 0%, rgba(32, 255, 77, 0) 5%), -webkit-repeating-radial-gradient(rgba(32, 255, 77, 0) 0%, rgba(32, 255, 77, 0) 23%, #00f9ff 23.6%, rgba(32, 255, 77, 0) 23.9%); ; /*background: radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);*/ background: radial-gradient(center, rgba(3, 248, 255, 0.5) 0%, rgba(32, 255, 77, 0) 5%), repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 23%, #20ff4d 23.6%, rgba(32, 255, 77, 0) 23.9%), linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%); width: 500px; height: 500px; max-height: 500px; max-width: 500px; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 0.2rem solid #01f8ff; box-shadow: 0 0 35px #01f8ff; overflow: hidden; } .radar_inner { width: 100%; height: 100%; } .radar_inner::before, .radar_inner::after { content: ' '; display: block; position: absolute; width: 100%; height: 4%; background: url(../img/heng_line.png) no-repeat center; top: 50%; left: 0; background-size: cover; margin-top: -2%; } .radar_inner::after { transform: rotate(90deg); } .radar:before { content: ' '; display: block; position: absolute; border-radius: 50%; /*animation: blips 5s infinite;*/ width: 100%; height: 4%; animation-timing-function: linear; animation-delay: 1.4s; } .radar:after { content: ' '; display: block; background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #00f9ff 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); } 100% { transform: rotate(360deg); } } /*波点出现消失动画开始*/ @keyframes blips { /*14% { background: linear-gradient(0deg, transparent 24%, rgba(140, 147, 166, 0.51) 25%, rgba(140, 147, 166, 0.51) 26%, transparent 27%, transparent 74%, rgba(140, 147, 166, 0.51) 75%, rgba(140, 147, 166, 0.51) 76%, transparent 77%, transparent); } 14.0002% { background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%); } 25% { background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%); } 26% { background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%); opacity: 1; } 100% { background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%); opacity: 0; }*/ 0% { box-shadow: 0px 0 3px 8px #1f6cb9; } 30% { box-shadow: 0 0 3px 4px #1f6cb9; } 70% { box-shadow: 0 0 3px 6px #1f6cb9; } 100% { /*box-shadow: 0 0 35px rgba(24, 61, 101, 0.81);*/ box-shadow: 0px 0 3px 8px #1f6cb9; } } /*波点出现消失动画结束*/ #radarBox { width: 550px; height: 550px; max-height: 550px; max-width: 550px; margin: 0 auto; border-radius: 50%; position: relative; background: url(../img/waihuan.png) no-repeat; background-size: contain; } /*雷达样式结束*/ .map_bg { /*background: url(../img/map.png) no-repeat center;*/ background-size: 66%; position: relative; } @keyframes OutOpcity { 0% { opacity: 1; } 20% { opacity: 0.8; } 40% { opacity: 0.5; } 65% { opacity: 0.2; } 100% { opacity: 0; } } @-webkit-keyframes OutOpcity { 0% { opacity: 1; } 20% { opacity: 0.8; } 40% { opacity: 0.5; } 65% { opacity: 0.2; } 100% { opacity: 0; } } .OutOpcity { -webkit-animation-name: OutOpcity; animation-name: OutOpcity /*animation: 10s infinite OutOpcity ease; -webkit-animation: 10s infinite OutOpcity ease;*/ } @keyframes showTxt { 0% { opacity: 0; } 40% { opacity: 0.5; } 65% { opacity: 0.8; } 100% { opacity: 1; } } @-webkit-keyframes showTxt { 0% { opacity: 0; } 40% { opacity: 0.5; } 65% { opacity: 0.8; } 100% { opacity: 1; } } .showTxt { -webkit-animation-name: showTxt; animation-name: showTxt } .quanbg { width: 80px; height: 80px; border-radius: 50%; position: relative; cursor: pointer; } .quanbg .quan { width: 100%; height: 100%; position: absolute; left: 0; top: 0; border-radius: 50%; box-sizing: border-box; display: inline-block; } .quanbg .quan1 { border: 1px solid #eb972c; opacity: 0.08; margin: 0%; width: 100%; height: 100%; } .quanbg .quan2 { border: 1px solid #eb972c; opacity: 0.2; margin: 13%; width: 74%; height: 74%; } .quanbg .quan3 { border: 1px solid #eb972c; opacity: 0.5; margin: 28%; width: 44%; height: 44%; } .quanbg .quan4 { background: #eb972c; margin: 42%; width: 16%; height: 16%; box-shadow: 0 0 30px rgba(255, 255, 255, 0.83); } .quanbg .quan1b { opacity: 0; } .quanbg .quan2b { opacity: 0; } .quanbg .quan3b { opacity: 0; } .quanbg .quan1a { animation: 3s infinite animation2_quan1 ease; -webkit-animation: 3s infinite animation2_quan1 ease; } .quanbg .quan2a { animation: 3s infinite animation2_quan2 ease; -webkit-animation: 3s infinite animation2_quan2 ease; } .quanbg .quan3a { animation: 3s infinite animation2_quan3 ease; -webkit-animation: 3s infinite animation2_quan3 ease; } .quanbg .quan1b { animation: 3s 1.5s infinite animation2_quan1 ease; -webkit-animation: 3s 1.5s infinite animation2_quan1 ease; } .quanbg .quan2b { animation: 3s 1.5s infinite animation2_quan2 ease; -webkit-animation: 3s 1.5s infinite animation2_quan2 ease; } .quanbg .quan3b { animation: 3s 1.5s infinite animation2_quan3 ease; -webkit-animation: 3s 1.5s infinite animation2_quan3 ease; } .quanbg .quan4 { animation: 1.5s infinite animation2_quan4 ease-out; -webkit-animation: 1.5s infinite animation2_quan4 ease-out; } .quanbg:hover .quan1a { animation: 2s infinite animation2_quan1a ease; -webkit-animation: 2s infinite animation2_quan1a ease; } @keyframes animation2_quan1 { 0% { transform: scale(0.8); opacity: 0; -webkit-transform: scale(0.8); } 60% { opacity: 0.08; } 80% { transform: scale(1); opacity: 0; -webkit-transform: scale(1); } 100% { transform: scale(1); opacity: 0; -webkit-transform: scale(1); } } @-webkit-keyframes animation2_quan1 { 0% { transform: scale(0.8); opacity: 0; -webkit-transform: scale(0.8); } 60% { opacity: 0.08; } 80% { transform: scale(1); opacity: 0; -webkit-transform: scale(1); } 100% { transform: scale(1); opacity: 0; -webkit-transform: scale(1); } } @keyframes animation2_quan2 { 0% { transform: scale(0.8); opacity: 0; -webkit-transform: scale(0.8); } 40% { opacity: 0.2; } 80% { transform: scale(1); opacity: 0; -webkit-transform: scale(1); } 100% { transform: scale(1); opacity: 0; -webkit-transform: scale(1); } } @-webkit-keyframes animation2_quan2 { 0% { transform: scale(0.8); opacity: 0; -webkit-transform: scale(0.8); } 40% { opacity: 0.2; } 80% { transform: scale(1); opacity: 0; -webkit-transform: scale(1); } 100% { transform: scale(1); opacity: 0; -webkit-transform: scale(1); } } @keyframes animation2_quan3 { 0% { transform: scale(0.8); opacity: 0; -webkit-transform: scale(0.8); } 20% { opacity: 0.5; } 80% { transform: scale(1); opacity: 0; -webkit-transform: scale(1); } 100% { transform: scale(1); opacity: 0; -webkit-transform: scale(1); } } @-webkit-keyframes animation2_quan3 { 0% { transform: scale(0.8); opacity: 0; -webkit-transform: scale(0.8); } 20% { opacity: 0.5; } 80% { transform: scale(1); opacity: 0; -webkit-transform: scale(1); } 100% { transform: scale(1); opacity: 0; -webkit-transform: scale(1); } } @keyframes animation2_quan4 { 0% { box-shadow: 0 0 0 rgba(255, 255, 255, 0.2); } 30% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); } 70% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); } 100% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); } } @-webkit-keyframes animation2_quan4 { 0% { box-shadow: 0 0 0 rgba(255, 255, 255, 0.2); } 30% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); } 70% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); } 100% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); } } .quanbgBox { position: absolute; } .quan_SYQ { /* 睢阳区*/ top: 40%; left: 41%; } .quan_MQ { /* 民权*/ top: 5%; left: 26%; } .quan_SX { /* 睢县*/ top: 27%; left: 21%; } .quan_NL { /* 宁陵*/ top: 22%; left: 32%; } .quan_LYQ { /* 梁园区*/ top: 22%; left: 40%; } .quan_KFQ { /* 开发区*/ top: 33%; left: 46%; } .quan_ZC { /* 柘城*/ top: 51%; left: 30%; } .quan_YCX { /* 虞城*/ top: 24%; left: 52%; } .quan_XYX { /*夏邑县*/ top: 42%; left: 60%; } .quan_YCS { /*永城市*/ top: 57%; left: 69%; } .txt { color: #FFF; font-size: 16px; width: 100px; display: inline-block; text-align: right; position: absolute; right: 88%; } .txt_SYQ { /* 睢阳区*/ right: 36%; bottom: -14%; } .txt_MQ { /* 民权*/ top: 67%; right: 20%; } .txt_SX { /* 睢县*/ top: 65%; right: 32%; } .txt_NL { /* 宁陵*/ top: 68%; right: 32%; } .txt_LYQ { /* 梁园区*/ top: 62%; right: 22%; } .txt_KFQ { /* 开发区*/ top: 59%; right: 16%; } .txt_ZC { /* 柘城*/ top: 64%; right: 19%; } .txt_YCX { /* 虞城*/ top: 67%; right: 15%; } .txt_XYX { /* 夏邑县*/ top: 73%; right: 15%; } .txt_YCS { /*永城市*/ top: 30%; right: 77%; } /*第二屏开始*/ .source_middle .map_bg { background: url(../img/source_tree.png) no-repeat center; height: 550px; background-size: contain; } .orderSource .source_middle { padding-top: 0; margin-top: 180px; } .orderSource>.source_left, .orderSource>.source_right { margin-top: 204px; padding-top: 0; } .orderSource>.source_left { padding-left: 150px; } .orderSource>.source_right { margin-left: -42px; } .source_right ul li, .source_left ul li { position: relative; } .source_left ul li>div, .source_right ul li>div { float: left; } .source_kuang { background: url("../img/source1.png") no-repeat; width: 265px; height: 125px; background-size: 100% 100%; } .pbout { display: inline-block; vertical-align: middle; width: 72px; height: 86px; padding-top: 12px; margin-left: 15px; } .line_wrap { width: 160px; position: absolute; z-index: 0; background-color: transparent; left: 278px; } .source_right .line_wrap { left: -105px; top: 12px; } .source_left .line_wrap { transform: rotateY(180deg); } .line_wrap svg { width: 100%; background-color: transparent; } .one_line { width: 173px; height: 66px; background: url(../img/one_line.png) no-repeat left center; } .two_line { width: 88px; height: 48px; background: url(../img/two_line.png) no-repeat left center; } .three_line { width: 89px; height: 150px; background: url(../img/three_line.png) no-repeat left center; } .four_line { width: 149px; height: 281px; background: url(../img/four_line.png) no-repeat left center; background-size: contain; } .oneLeft_line { left: 273px; top: 14px; } .source_right .oneRight_line { left: -187px; } .twoLeft_line { left: 282px; top: 14px; } /*.twoRight_line{ left: 282px; top: 14px; }*/ .threeLeft_line { top: -88px; left: 275px; } .source_right .threeRight_line { top: -86px; left: -106px; } .fourLeft_line { top: -208px; left: 265px; } .source_right .fourRight_line { top: -214px; left: -150px; } .line:before, .line:after { content: ' '; display: block; position: absolute; background: #0478f6; border-radius: 50%; width: 10px; height: 10px; box-shadow: 0px 0 3px 6px #05529e; position: absolute; } .line:before { top: -2px; left: -15px; } .line:after { top: 43px; left: 90px; } .line.oneLeft_line:before { top: 8px; left: -10px; } .line.oneLeft_line:after { top: 47px; left: 171px; } .line.oneRight_line:before { top: 9px; left: -9px; } .line.oneRight_line:after { top: 46px; left: 174px; } .line.threeLeft_line:after { top: 143px; left: 85px; } .line.fourLeft_line:after { top: 274px; left: 133px; } .line.threeRight_line:after { top: 144px; } .line.fourRight_line:after { top: 274px; left: 133px; } @font-face { font-family: DigifaceWide; src: url('../font/DIGIFAW.TTF'); } .percent_box { color: #fff; font-size: 12px; text-align: center; display: inline-block; vertical-align: middle; position: relative; /*margin-top: 16px; margin-left: 22px; padding-top: 6px; padding-left: 4px;*/ } .percent_box>div { height: 72px; width: 70px; position: absolute; } .percent_word { color: #00e9ff; top: 20px; } .percent_word p:first-child { font-size: 18px; font-family: "DigifaceWide"; color: #fff!important; } .percent_out { background: url(../img/percent_out.png) no-repeat center; /*margin-top: 16px; margin-left: 22px; padding-top: 6px; padding-left: 4px; background-size: 100%;*/ /*height: 72px; width: 70px;*/ animation: 20s infinite earth_quan1 linear; -webkit-animation: 20s infinite earth_quan1 linear; } .percent_in { /*height: 65px; width: 65px;*/ background: url(../img/percent_1.png) no-repeat center; /*background-size: 100%;*/ /*color: #fff;*/ /*text-align: center; font-size: 10px; color: #00e9ff;*/ animation: 20s infinite earth_quan2 linear; -webkit-animation: 20s infinite earth_quan2 linear; } .source_kuang .num_word { padding-top: 25px; color: #fff!important; font-size: 18px!important; margin-left: 15px; } .source_kuang .num_word span:first-child { margin-right: 15px; } .source_kuang .num_word span:last-child, .typeWord { color: #ecbc16!important; font-size: 22px; } /*第三屏开始*/ .slideCon_bg.orderType { /*background: url(../img/orderType_bg.png) no-repeat;*/ height: 100%; background-size: 100% 100%; } .orderType .orderTtype_Con { width: 86%; margin: 0 auto; float:none; } .orderTtype_Con ul { margin: 30px 20px 0 20px; } .orderTtype_Con ul li { float: left; background: url(../img/light_kuang1.png) no-repeat center; height: 320px; width: 14.8%; background-size: 100% 100%; padding-left: 10px; box-sizing: border-box; padding-top: 10px; margin-top: 20px; margin-left: 4%; } .orderTtype_Con ul li.active { background: url(../img/light_kuang2.png) no-repeat center; background-size: 100% 100%; height: 320px; /* padding-top: 85px; */ width:15.5%; } /* .orderTtype_Con .outibt div.active { border:3px solid red; } */ .orderType>.orderTtype_Con ul li img { /*width: 110px; padding: 0px; margin: 30px -9px 10px -9px;*/ width: 90px; padding: 0px; margin: 25px -9px 7px 38px; height: 70px; } .typeWord { width:169px; text-align: center; position: relative; margin-top:30px; } .typeWord .typeWordNum { color: rgb(201, 211, 255); font-weight: 700; } /*.typeWord:before { position: absolute; display: block; content: ""; height: 4px; width: 80%; background: -webkit-linear-gradient(right, #45a6f3, transparent);*/ /* Safari 5.1 - 6.0 */ /*background: -o-linear-gradient(right, #45a6f3, transparent);*/ /* Opera 11.1 - 12.0 */ /*background: -moz-linear-gradient(right, #45a6f3, transparent);*/ /* Firefox 3.6 - 15 */ /*background: linear-gradient(to right, #45a6f3, transparent);*/ /* 标准的语法(必须放在最后) */ /*bottom: -13px; left:10%; }*/ .typeWord_line { color: #c9d3ff; font-size: 14px; position: relative; width: 166px; text-align: center; margin-top: 18px; } .typeWord_line:before { position: absolute; content: ""; height: 2px; width: 100%; background: -webkit-linear-gradient(left, transparent, #fff, transparent); Safari 5.1 - 6.0 background: -o-linear-gradient(left, transparent, #fff, transparent); Opera 11.1 - 12.0 background: -moz-linear-gradient(left, transparent, #fff, transparent); Firefox 3.6 - 15 background: linear-gradient(to right, transparent, #fff, transparent); /*标准的语法(必须放在最后)*/ border-radius: 20%; left: 0; bottom: -10px; } .order_count { color: #00e9ff; font-size: 16px; font-weight: bold; width: 166px; text-align: center; } .persent_kuang { /*width: 55px; height: 56px; color: #00E9FF; font-size: 14px; text-align: center; line-height: 55px; font-weight: bold; background: url(../img/order_percent.png) no-repeat center;*/ width: 70px; height: 70px; color: #00E9FF; font-size: 10px; text-align: center; margin-left: 35px; line-height: 70px; font-weight: bold; background: url(../img/order_percent.png) no-repeat center; background-size: 100% 100%; } .persent_box { width: 85%; margin: 25px auto 0 auto; } .persent_word { font-size: 14px; color: #c9d3ff; margin: 3px 0 0 40px; } /*第四屏开始*/ .orderState .orderCon_left { padding-left: 140px; } .orderState .orderCon_right { margin-left: -68px; } .orderState>div>ul li { height: 90px; width: 310px; background: url(../img/stateNum_kuang.png) no-repeat center; background-size: 100% 100%; margin-top: 15px; } .orderState>div>ul li.active { background: url(../img/stateNum_kuang1.png) no-repeat center; background-size: 100% 100%; } .orderState>div>ul li .num_word { font-size: 18px; font-weight: bold; color: #fff; position: relative; margin-left: 15px; top: 0px; } .orderState>div>ul li img { width: 50px; height: 55px; padding-left: 20px; padding-top: 17px; } .orderState>div>ul li .num_word>p { width: 75px; } .orderState>div>ul li .num_word p, .orderState>div>ul li .num_word>div { display: inline-block; vertical-align: middle; } .earth_box { width: 500px; height: 500px; position: relative; margin: 0 auto; margin-top: 65px; } .earth_box>div { height: 100%; width: 100%; position: absolute; } .earth_box>div.earth_quan1 { background: url(../img/earth_quan1.png) no-repeat center; animation: 20s infinite earth_quan1 linear; -webkit-animation: 20s infinite earth_quan1 linear; } .earth_box>div.earth_quan2 { background: url(../img/earth_quan2.png) no-repeat center; animation: 20s infinite earth_quan2 linear; -webkit-animation: 20s infinite earth_quan2 linear; } .earth_box>div.earth_quan3 { background: url(../img/earth_quan3.png) no-repeat center; animation: 20s infinite earth_quan1 linear; -webkit-animation: 20s infinite earth_quan1 linear; } .earth_box>div.earth { background: url(../img/earth.png) no-repeat center; animation: 50s infinite earth_quan2 linear; -webkit-animation: 50s infinite earth_quan2 linear; } @keyframes earth_quan1 { 0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); } 100% { transform: rotate(-360deg); -webkit-transform: rotate(-360deg); } } @-webkit-keyframes earth_quan1 { 0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); } 100% { transform: rotate(-360deg); -webkit-transform: rotate(-360deg); } } @keyframes earth_quan2 { 0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); } 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); } } @-webkit-keyframes earth_quan2 { 0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); } 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); } } /*第五屏开始*/ .trafficVolume>div { width: 35%!important; padding-top: 170px; } .trafficVolume .orderCon_right { width: 50%; } .trafficVolume .orderCon_right .right_top,.trafficVolume .orderCon_right .right_bottom{ width: 635px; height: 300px; background-size: 100% 100%; } .trafficVolume .orderCon_right>div.right_bottom { height: 315px; background-size: 100% 120%; } .right_bottom { background: url(../img/huawu_bottom.png) no-repeat; } .tagBox { width: 100%; height: 600px; margin: 0 auto; padding-left: 12%; margin-top: -60px; margin-left: 35px; } .tagcloud { /* overflow: hidden; */ margin-left: 50px; margin-top: 30px; /* height:666px; */ overflow: auto; height: 666px; overflow-x:hidden; /* overflow-y: hidden; */ } /* .aacdu{ margin-top: 12px; } */ .tagcloud>div { float: left; display: block; color: #333; font-size: 13px; text-decoration: none; /* background: -webkit-linear-gradient(left, #0c54c917, #0b54c9, #0c54c917); background: -o-linear-gradient(left, #0c54c917, #0b54c9, #0c54c917); background: -moz-linear-gradient(left, #0c54c917, #0b54c9, #0c54c917); background: linear-gradient(to right, #0c54c917, #0b54c9, #0c54c917); */ background:#0057A7; /* box-shadow:1px 1px 1px #0059AD; */ border:1px solid #0059AD; width: 460px; height: 267px; margin: 10px; } .tagcloud_bj{ /* background: url(../img/kuang.png) no-repeat; */ background-size: 100% 100%; } .tagcloud_bjShine{ /* background:url(../img/kuang_Shine.png) no-repeat; */ background-size: 100% 100%; } .backg_cor{ background:#005499; } .backg_cor_bg{ background:#001C68; } .table_box table:first-child{ color: #FFFFFF; margin-bottom: 0px; } .keyBottom_left{ margin-left: 129px; margin-top: 50px; } .table_box_key{ width: 700px; height: 510px; background:url(../img/key_bj.png) no-repeat; background-size: 100% 100%; padding: 10px; color: #00E9FF; } .table_box_key table thead tr td{ font-size: 14px; line-height: 32px; } .table_box_key table tbody tr td{ color: #27B723; } .table_box_key table tbody tr td:first-child{ color: #00e9ff; } .table_box_key table tbody tr td:last-child{ color: #f05964; } .table>tbody>tr>td{ border-top: 1px solid #3160a2; } .tag_title { /* text-align: center; */ font-size: 16px; line-height: 23px; height: 23px; color: #fff; width: 100%; /* background: -webkit-linear-gradient(left, #0c54c917, #0b54c9, #0c54c917); background: -o-linear-gradient(left, #0c54c917, #0b54c9, #0c54c917); background: -moz-linear-gradient(left, #0c54c917, #0b54c9, #0c54c917); background: linear-gradient(to right, #0c54c917, #0b54c9, #0c54c917); */ /* margin-top: 7px; */ } .tag_title .danhao{ display:inline-block; width:100px; text-align: center; /* background: red; */ } .tag_title .Yichin{ color:#27B723; margin-left: 130px; } .tag_title .Wentimo{ display: inline-block; width:332px; } .tag_title .washpa{ padding-bottom: 30px; } .tagcloud>div .imgs { width: 76px; height: 76px; /* line-height: 250px; */ /* background: url(../img/center_circle.png) no-repeat; */ overflow: hidden; color: #cd9d0f; font-size: 14px; font-weight: bold; text-align: center; line-height: 76px; margin: 20px auto 8px; z-index: -1; } .tagcloud>div .ts_count { text-align: center; color: #86f5ff; } .keyW_t { width: 210px; height: 55px; background: url(../img/side5_kuang.png) no-repeat center; background-size: 100% 100%; color: #fff; font-size: 16px; text-align: center; line-height: 55px; margin: 0 auto; position: relative; top: -34px; left: 21px; } .keyW_t:before, .keyW_t:after { content: ""; background: url(../img/right_line.png) no-repeat; width: 20px; height: 58px; position: absolute; top: -27px; } .keyW_t:before { right: -13px; } .keyW_t:after { transform: rotateY(180deg); left: -13px; } /*首页样式结束 */ /*话务量详情*/ .phone_top { height: 420px; background: url(../img/jd_bg1.png) no-repeat center; background-size: 100% 100%; position: relative; } .legend_bar { position: relative; position: relative; top: 23px; margin-left: 15px; } .legend_bar .col-line { display: inline-block; height: 20px; width: 2px; background: #00e9ff; position: relative; vertical-align: text-top; margin-right: 14px; } .title_word { color: #fff; font-size: 16px; } .legend_bar .col-line:before, .legend_bar .col-line:after { content: ""; height: 12px; width: 2px; background: #00e9ff; position: absolute; top: 5px; } .legend_bar .col-line:before { left: -4px; } .legend_bar .col-line:after { left: 4px; } .times, .selects { z-index: 9999; position: relative; background: #114a97; height: 21px; color: #00e9ff; border: 2px solid #00e9ff; border-radius: 2px; outline: none; padding: 2px 11px; vertical-align: middle; margin-left: 16px; } #times3 { z-index: 9999; position: relative; background: #114a97; height: 16px; color: #00e9ff; border: 2px solid #00e9ff; border-radius: 2px; outline: none; padding: 2px 35px; vertical-align: middle; margin-left: 16px; } .time_box { color: #00e9ff; font-size: 14px; position: relative; margin-right: 30px; } .time_box:before { position: absolute; right: 12px; top: 7px; z-index: 9999999; content: ""; height: 0; width: 0; border-top: 10px solid #00e9ff; border-right: 7px solid transparent; border-left: 7px solid transparent; } .phone_top { width: 100%; margin-bottom: 16px; } .phone_bottom>div { height: 400px; padding: 0; }