SQ12345_Web/WebChart/css/index.css

/*
 公共初始化样式
 * */

body {
	margin: 0;
	padding: 0;
	font-size: 16px;
	-webkit-text-size-adjust: none;
	/*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;
}


/*.clearfix {
	zoom: 1;
	overflow: hidden;
}*/

.clearfix:after {
	content: " ";
	display: block;
	clear: both;
	height: 0;
}

a {
	text-decoration: none;
}


/*首页样式开始 */

#nav {
	width: 100%;
}

#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;
	/*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: 900px;
}

.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: initial;
}

.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: 39%;
	top: 8.8%;
	background-size: 100%;
}

.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;
}

.slide_left,
.slide_right {
	width: 25%;
}

.slide_middle {
	width: 50%;
}

.orderStatistic>.orderCon_middle {
	padding-top: 180px;
}

.orderStatistic>.orderCon_left {
	box-sizing: border-box;
	padding-left: 137px;
}

.orderStatistic>div>ul li {
	height: 100px;
	width: 235px;
	background: url(../img/num_frame.png) no-repeat center;
	background-size: 100%;
}

.slideCon_bg>div>ul li img {
	width: 80px;
	height: 80px;
	padding-left: 10px;
	padding-top: 10px;
	display: inline-block;
	vertical-align: middle;
}

.slideCon_bg>div>ul li .num_word {
	display: inline-block;
	vertical-align: middle;
	font-size: 14px;
	color: #02d0ee;
}

.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: 90%;
	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: 36%;
	left: 38%;
}

.quan_MQ {
	/* 民权*/
	top: 16%;
	left: 16%;
}

.quan_SX {
	/* 睢县*/
	top: 33%;
	left: 12%;
}

.quan_NL {
	/* 宁陵*/
	top: 31%;
	left: 25%;
}

.quan_LYQ {
	/* 梁园区*/
	top: 30%;
	left: 41%;
}

.quan_ZC {
	/* 柘城*/
	top: 59%;
	left: 24%;
}

.quan_YCX {
	/* 虞城*/
	top: 36%;
	left: 51%;
}

.quan_XYX {
	/*夏邑县*/
	top: 48%;
	left: 63%;
}

.quan_YCS {
	/*永城市*/
	top: 67%;
	left: 78%;
}

.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: 2%;
	right: 32%;
}

.txt_SX {
	/* 睢县*/
	top: 2%;
	right: 32%;
}

.txt_NL {
	/* 宁陵*/
	top: 2%;
	right: 32%;
}

.txt_LYQ {
	/* 梁园区*/
	top: 28%;
	right: 74%;
}

.txt_ZC {
	/* 柘城*/
	top: 0;
	right: 35%;
}

.txt_YCX {
	/* 虞城*/
	top: 0;
	right: 15%;
}

.txt_XYX {
	/* 夏邑县*/
	top: 0;
	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: initial;
	margin-top: 180px;
}

.orderSource>.source_left,
.orderSource>.source_right {
	margin-top: 204px;
	padding-top: initial;
}

.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;
}

.orderSource ul li {
	margin-bottom: 20px;
}

.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: initial;
}

.orderTtype_Con ul {
	margin: 105px 20px 0 20px;
	;
}

.orderTtype_Con ul li {
	float: left;
	background: url(../img/light_kuang1.png) no-repeat center;
	height: 536px;
	width: 15%;
	background-size: 100% 100%;
	padding-left: 39px;
	box-sizing: border-box;
	padding-top: 40px;
	margin-left: 20px;
}

.orderTtype_Con ul li.active {
	background: url(../img/light_kuang2.png) no-repeat center;
	background-size: 100% 100%;
	height: 545px;
	padding-top: 45px;
}

.orderType>.orderTtype_Con ul li img {
	/*width: 110px;
			    padding: 0px;
			    margin: 30px -9px 10px -9px;*/
	width: 90px;
	padding: 0px;
	margin: 25px -9px 7px -3px;
	height: 70px;
}

.typeWord {
	position: relative;
}

.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;
}

.typeWord_line {
	color: #c9d3ff;
	font-size: 14px;
	position: relative;
	width: 90px;
	text-align: center;
	margin-bottom: 23px;
}

.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: 90px;
	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: 75px;
	height: 75px;
	color: #00E9FF;
	font-size: 14px;
	text-align: center;
	line-height: 75px;
	font-weight: bold;
	background: url(../img/order_percent.png) no-repeat center;
	background-size: 100% 100%;
}

.persent_box {
	width: 85%;
	margin: 0 auto;
}

.persent_word {
	font-size: 14px;
	color: #c9d3ff;
	margin-top: 3px;
}


/*第四屏开始*/

.orderState .orderCon_left {
	padding-left: 140px;
}

.orderState .orderCon_right {
	margin-left: -68px;
}

.orderState>div>ul li {
	height: 105px;
	width: 310px;
	background: url(../img/stateNum_kuang.png) no-repeat center;
	background-size: 100% 100%;
	margin-top: 25px;
}

.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: 9px;
}

.orderState>div>ul li img {
	width: 50px;
	height: 62px;
	padding-left: 20px;
	padding-top: 19px;
}

.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: 45%!important;
	padding-top: 170px;
}

.trafficVolume .orderCon_right {
	width: 50%;
}

.trafficVolume .orderCon_right>div {
	width: 635px;
	height: 300px;
	background-size: 100% 100%;
}

.trafficVolume .orderCon_right>div.right_bottom {
	height: 315px;
	background-size: 100% 120%;
}

.right_top {
	background: url(../img/huawu_top1.png) no-repeat;
}

.right_bottom {
	background: url(../img/huawu_bottom.png) no-repeat;
}

.tagBox {
	width: 100%;
	height: 600px;
	margin: 0 auto;
	padding-left: 12%;
	margin-top: -60px;
}

.tagcloud {
	position: relative;
}

.tagcloud>div {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	color: #333;
	font-size: 16px;
	background: url(../img/kuang.png) no-repeat;
	background-size: 100% 100%;
	text-decoration: none;
	width: 136px;
	height: 176px;
}

.tag_title {
	text-align: center;
	font-size: 12px;
	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: 20px;
}

.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: 11px auto 8px;
}

.tagcloud>div .ts_count {
	text-align: center;
	color: #86f5ff;
}

.keyW_t {
	width: 197px;
	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: -22px;
}

.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: 16px;
	color: #00e9ff;
	border: 2px solid #00e9ff;
	border-radius: 2px;
	outline: none;
	padding: 2px 11px;
	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;
}