/*文字飞舞背景*/
.textBcakground{
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: 10;
	left: 0px;
	top: 0px;
}

/*文字类*/
.textBcakground-text{
	color: #24F2FF;
	position: absolute;
	left: 50%;
	top: 50%;
}


.textBcakground-text.textBcakground-moveO{
	animation: textBcakground 2s linear;
    -moz-animation: textBcakground 2s linear;	/* Firefox */
    -webkit-animation: textBcakground 2s linear;	/* Safari 和 Chrome */
    -o-animation: textBcakground 2s linear;
    animation-iteration-count:infinite;
}

.textBcakground-text.textBcakground-moveT{
	animation: textBcakground 3.5s linear;
    -moz-animation: textBcakground 3.5s linear;	/* Firefox */
    -webkit-animation: textBcakground 3.5s linear;	/* Safari 和 Chrome */
    -o-animation: textBcakground 3.5s linear;
    animation-iteration-count:infinite;
}

/*侧栏文理选择*/
.subjectNav{
	width: 98px;
	height: 240px;
	position: absolute;
	right: 20px;
	top: 50%;
	margin-top: -120px;
}

/*文理科切换*/
.subjectTab{
	border:1px solid #01F0FF;
	margin: 0 1px;
	border-radius: 2px;
	overflow: hidden;
}

.subjectSelect{
	height: 32px;
	line-height: 32px;
	width: 46px;
	text-align: center;
	float: left;
	color: #01F0FF;
	font-size: 16px;
	cursor: pointer;
}

.subjectSelect.arts{
    border-left: 1px solid transparent;
}

.subjectSelect.science{
	border-left:1px solid #01F0FF;
}

.subjectSelect:hover,.subjectSelect.cur{
	color: #fff;
	background-color: rgba(1,240,255,0.6);
}

/*因素分析*/
.elementBox{
	margin-top: 22px;
}

.elementTitle{
	height: 39px;
	line-height: 39px;
	text-align: center;
	font-size: 16px;
	color: #01F0FF;
	display: block;
}

.elementList{
	height: 103px;
	width: 98px;
	background: url('../images/AIFA/elementBg.png') center center no-repeat;
	position: relative;
}

.elementList ul{
	overflow: hidden;
	padding: 6px 0;
	position: relative;
	z-index: 20;
}

.elementList ul li{
	height: 28px;
	line-height: 28px;
	font-size: 14px;
	color: #01F0FF;
	cursor: pointer;
	text-align: center;
	margin: 4px 0;
}

.elementList ul li.cur,.elementList ul li:hover{
	color: #fff;
}

.elementList-hoverBg{
	width: 98px;
	height: 28px;
	position: absolute;
	top: 10px;
	left: 0px;
	background: url('../images/AIFA/elementHover.png') center center no-repeat;
	z-index: 10;
}

/*内容开始*/
.AIFA-module{
	width: 600px;
	height: 560px;
	background: url('../images/AIFA/lineBg.png') center center no-repeat;
	margin: 0 auto;
}

.elementMain{
	width: 600px;
	height: 560px;
	position: relative;
}


/*气泡*/
.elementBubble{
	/* padding: 6px 6px; */
	border-radius: 100%;
	position: absolute;
	border: 1px solid transparent;
	cursor: pointer;
}

/*实体气泡主体*/
.bubbleBox{
	border-radius: 100%;
	background-image: -moz-radial-gradient(#54F5FF, #153A6A);
	/* background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(#54F5FF), to(#153A6A)); */
	text-align: center;
	/* box-shadow: 0px 0px 10px 0px rgba(1,1,1,0.75); */
	margin: 6% auto;
	display: table;
	vertical-align: middle;
	position: relative;
	z-index: 4;
	/* overflow: hidden; */
	background: url('../images/AIFA/bubbleBg.png') center center no-repeat;
	background-size: 100% 100%;
	width: 88%;
	height: 88%;
}

.elementBubble.orange .bubbleBox{
	background: url('../images/AIFA/bubbleBgO.png') center center no-repeat;
	background-size: 100%;
}

/*文字栏*/
.bubbleText{
	font-size: 16px;
	color: #153a6a;
	text-align: center;
	vertical-align: middle;
	display: table-cell;
	padding: 12px;
	position: relative;
	z-index: 10;
}

/*焦点光圈*/
.bubbleLight-hover{
	width: 100%;
	height:100%;
	position: absolute;
	top: 0px;
	left: 0px;
	opacity: 0;
	z-index: 5;
	/* padding: 7px; */
}

.bubbleLight{
	width: 100%;
	height:100%;
	background: url('../images/AIFA/bubbleLight.png') center center no-repeat;
	position: absolute;
	top: 0px;
	left:0px;
	z-index: 5;
	animation: bubbleLight 3s linear;
    -moz-animation: bubbleLight 3s linear;	/* Firefox */
    -webkit-animation: bubbleLight 3s linear;	/* Safari 和 Chrome */
    -o-animation: bubbleLight 3s linear;
    animation-iteration-count:infinite;
    background-size: 100%;
}

.elementBubble.orange .bubbleLight{
	background: url('../images/AIFA/bubbleLightO.png') center center no-repeat;
	background-size: 100%;
}

/*光斑波纹特效*/
.bubbleEffect{
	width: 100%;
	height:100%;
	position: absolute;
	top: 0px;
	left:0px;
	z-index: 12;
	opacity: 0;
	border-radius: 100%;
	overflow: hidden;
}

/*光斑*/
.faculaBox{
	width: 100%;
	height:100%;
	position: absolute;
	top: 0px;
	left:0px;
	background-size: 100%;
	background-position: center bottom;
	background-repeat: no-repeat;
	opacity: 0.4;
}

.faculaBox.faculaO{
	background-image: url('../images/AIFA/facula1.png');
	z-index: 3;
	animation: bubbleEffectF 3s linear;
	-moz-animation: bubbleEffectF 3s linear;	/* Firefox */
	-webkit-animation: bubbleEffectF 3s linear;	/* Safari 和 Chrome */
	-o-animation: bubbleEffectF 3s linear;
	animation-iteration-count:infinite;
}

.faculaBox.faculaT{
	background-image: url('../images/AIFA/facula2.png');
	z-index: 4;
	animation: bubbleEffectF 3s linear;
	-moz-animation: bubbleEffectF 3s linear;	/* Firefox */
	-webkit-animation: bubbleEffectF 3s linear;	/* Safari 和 Chrome */
	-o-animation: bubbleEffectF 3s linear;
	animation-iteration-count:infinite;
	animation-delay:2s;
	-webkit-animation-delay:2s;
}

/*波纹*/
.rippleBox{
	width: 100%;
	height:100%;
	position: absolute;
	top: 0px;
	left:0px;
	z-index: 3;
	background-size: 100%;
	background-position: center bottom;
	background-repeat: no-repeat;
	opacity: 0.4;
}

.rippleBox.rippleO{
	background-image: url('../images/AIFA/ripple1.png');
	z-index: 5;
	animation: bubbleEffectR 2s linear;
    -moz-animation: bubbleEffectR 2s linear;	/* Firefox */
    -webkit-animation: bubbleEffectR 2s linear;	/* Safari 和 Chrome */
    -o-animation: bubbleEffectR 2s linear;
    animation-iteration-count:infinite;
}

.rippleBox.rippleT{
	background-image: url('../images/AIFA/ripple2.png');
	z-index: 6;
	animation: bubbleEffectR 2s linear;
    -moz-animation: bubbleEffectR 2s linear;	/* Firefox */
    -webkit-animation: bubbleEffectR 2s linear;	/* Safari 和 Chrome */
    -o-animation: bubbleEffectR 2s linear;
    animation-iteration-count:infinite;
    animation-delay:1s;
    -webkit-animation-delay:1s;
}


/*数据展示*/
.dataDisplay{
	position: absolute;
	top: -25%;
	left: 70%;
	padding: 6px 12px;
	border: 1px solid #FF9C00;
	background-color: rgba(255,156,0,0.76);
	z-index: 12;
	opacity: 0;
	display: none;
}

.dataDisplay-text{
	color: #fff;
	font-size: 14px;
	line-height: 18px;
	display: block;
	word-break: keep-all;
	white-space: pre;
}

/*气泡hover*/
.elementBubble:hover{
	background-color: rgba(1,240,255,0.2);
	border-color: #01F0FF;
	z-index: 999!important;
}

.elementBubble.orange:hover{
	background-color: rgba(255,119,0,0.2);
	border-color: #ff7700;
}

.elementBubble:hover .bubbleLight-hover,.elementBubble:hover .bubbleEffect,.elementBubble:hover .dataDisplay{
	display: block;
	animation: bubbleHover 1s linear;
	-moz-animation: bubbleHover 1s linear;	/* Firefox */
	-webkit-animation: bubbleHover 1s linear;	/* Safari 和 Chrome */
	-o-animation: bubbleHover 1s linear;
	animation-fill-mode : both;
}


/*因素分析角标*/
.cornerMarkBox{
	width: 366px;
	overflow: hidden;
}

/*斜线*/
.obliqueLine{
	width: 50px;
	border-bottom: 1px dashed;
	margin-top: 31px;
}

/*直线*/
.straightLine{
	padding-top: 13px;
	display: block;
}

.straightLine-dashed{
	width: 80%;
	display: block;
	border-bottom: 1px dashed;
}

.straightLine-solid{
	width: 20%;
	border-bottom: 1px solid;
}

/*数字*/
.numberBox{
	background: url('../images/AIFA/corner_mark.png') no-repeat;
	width: 94px;
	height: 28px;
	text-align: center;
	line-height: 28px;
}

.numberNo{
	font-size: 12px;
	display: inline-block;
	height: 14px;
	line-height: 14px;
	width: 14px;
	border: 1px solid;
	border-radius: 14px;
}

.numberValue{
	display: inline-block;
	margin-left: 5px;
	font-size: 14px;
}


/*角标左右区分*/
/*左*/
.cornerMarkBox.leftCornerMark .obliqueLine{
	float: right;
	transform: rotate(45deg);
	-ms-transform: rotate(45deg);		/* IE 9 */
	-webkit-transform: rotate(45deg);	/* Safari and Chrome */
	-o-transform: rotate(45deg);		/* Opera */
	-moz-transform: rotate(45deg);		/* Firefox */
}

.cornerMarkBox.leftCornerMark .straightLine{
	margin-left: 96px;
	margin-right: 43px;
}

.cornerMarkBox.leftCornerMark .straightLine .straightLine-dashed{
	margin-left: 20%;
}

.cornerMarkBox.leftCornerMark .straightLine .straightLine-solid{
	float: left;
}

.cornerMarkBox.leftCornerMark .numberBox{
	float: left;
}

/*右*/
.cornerMarkBox.rightCornerMark .obliqueLine{
	float: left;
	transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);		/* IE 9 */
	-webkit-transform: rotate(-45deg);	/* Safari and Chrome */
	-o-transform: rotate(-45deg);		/* Opera */
	-moz-transform: rotate(-45deg);		/* Firefox */
}

.cornerMarkBox.rightCornerMark .straightLine{
	margin-right: 96px;
	margin-left: 43px;
}

.cornerMarkBox.rightCornerMark .straightLine .straightLine-dashed{
	margin-right: 20%;
}

.cornerMarkBox.rightCornerMark .straightLine .straightLine-solid{
	float: right;
}

.cornerMarkBox.rightCornerMark .numberBox{
	float: right;
}

/*角标颜色区分*/
.cornerMarkBox.colorRed *{
	color: #E20102;
	border-color: #E20102;
	background-position: 0px -97px;
}

.cornerMarkBox.colorGreen *{
	color: #03A00F;
	border-color: #03A00F;
	background-position: 0px -389px;
}

.cornerMarkBox.colorYellow *{
	color: #D3BA06;
	border-color: #D3BA06;
	background-position: 0px -194px;
}

.cornerMarkBox.colorOrangeO *{
	color: #E45B02;
	border-color: #E45B02;
	background-position: 0px 0px;
}

.cornerMarkBox.colorOrangeT *{
	color: #FF9C00;
	border-color: #FF9C00;
	background-position: 0px -291px;
}