.about-block{position:relative;z-index:2;}
.about-block .h1{font-weight:bold;}
.about-block .txt{line-height:2;}

.subject-box{display:flex;}

.subject-box .subject-outer{position:relative;width:328px;height:328px;}
.subject-box .subject-outer:before,
.subject-box .subject-outer:after {
	position:absolute;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;
	margin:auto;
	content:'';
	border-radius:50%;
	border:1px solid #FFF;
	z-index:0;
	pointer-events:none;
}
.subject-box .subject-outer:before{animation:subjectline 1.8s ease infinite;}
.subject-box .subject-outer:after{animation:subjectline2 1.6s ease-out infinite;}

.subject-img{position:relative;width:100%;height:100%;}
.subject-imgitem .img{
	width:328px;
	height:328px;
	margin:0px auto;
	border-radius:100%;
	overflow:hidden;
	box-shadow:0px 0px 25px 0px rgba(33,33,33,0.08);
}
.subject-imgitem .img img{width:100%;max-width:100%;height:auto;}
.subject-imgitem .imghover{border-radius:100%;overflow:hidden;}

.subject-txt-listbox{position:relative;z-index:2;counter-reset:num;}

.subject-txt-item{display:block;margin-bottom:50px;}
.subject-txt-listbox .subject-txt-item:nth-child(2){margin-left:50px;}
.subject-txt-listbox .subject-txt-item:nth-child(3){margin-left:-50px;margin-bottom:0px;}

.subject-txt-box{display:flex;}

.subject-txt-item .icon{
	width:104px;
	height:104px;
	background:#FFF;
	border-radius:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
}
.subject-txt-item .icon:before,
.subject-txt-item .icon:after{
	position:absolute;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;
	margin:auto;
	content:'';
	border-radius:50%;
	z-index:0;
	pointer-events:none;
}
.subject-txt-item .icon:before{
	background-color:#FFF;
	box-shadow:0px 0px 19px 0px rgba(22,22,22,0.1);
}
.subject-txt-item .icon:after{
	background-color:rgba(255,255,255,0.4);
	animation:subjecticon 1.5s ease infinite;
}

.subject-txt-item .icon .bi{font-size:50px;color:#0078C8;position:relative;z-index:3;}
.subject-txt-item .icon .num{
	position:absolute;
	left:-5px;
	top:0px;
	color:#0078C8;
	font-size:26px;
	font-weight:bold;
	line-height:1.23;
	z-index:2;
}
.subject-txt-item .icon .num:after{
	counter-increment:num;
	content:counter(num)'';
}

.subject-txt-item .txt{width:calc(100% - 104px);padding-left:50px;}

.subject-txt-item .h5{font-weight:bold;color:#0078C8;max-width:100%;height:auto;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.subject-txt-item .desc{color:#000;max-width:100%;height:auto;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

@media (min-width:992px) and (max-width:1199px){
	.subject-box{padding:100px 100px;}
}
@media (min-width:768px) and (max-width:991px){
	.subject-box{padding:50px 50px;}
}
@media (max-width: 767px) {
	.subject-box{flex-wrap:wrap;padding:50px 50px;}
	.subject-box .subject-outer{width:200px;height:200px;margin:0px auto 50px;}
	.subject-imgitem .img{width:200px;height:200px;}
	.subject-txt-listbox .subject-txt-item:nth-child(2){margin-left:0px;}
	.subject-txt-listbox .subject-txt-item:nth-child(3){margin-left:0px;}
}

@media (max-width: 575px) {
	.subject-box{padding:50px 0px;}
	.subject-txt-box{flex-wrap:wrap;}
	.subject-txt-item .txt{width:100%;padding-left:0px;}
	.subject-txt-item .icon{margin:0px auto 30px;}
}

@-webkit-keyframes subjectline{
	0%{
		-webkit-transform:scale(1, 1);
		transform:scale(1, 1);
	}
	50%{
		opacity:0.8;
	}
	100%{
		-webkit-transform:scale(1.6);
		transform:scale(1.6);
		opacity:0;
	}
}
@keyframes subjectline{
	0%{
		-webkit-transform:scale(1, 1);
		transform:scale(1, 1);
	}
	50%{
		opacity:0.8;
	}
	100%{
		-webkit-transform:scale(1.6);
		transform:scale(1.6);
		opacity:0;
	}
}


@-webkit-keyframes subjectline2{
	0%{
		-webkit-transform:scale(1, 1);
		transform:scale(1, 1);
	}
	50%{
		opacity:0.8;
	}
	100%{
		-webkit-transform:scale(1.9);
		transform:scale(1.9);
		opacity:0;
	}
}
@keyframes subjectline2{
	0%{
		-webkit-transform:scale(1, 1);
		transform:scale(1, 1);
	}
	50%{
		opacity:0.8;
	}
	100%{
		-webkit-transform:scale(1.9);
		transform:scale(1.9);
		opacity:0;
	}
}


@-webkit-keyframes subjecticon{
	  0%{
		-webkit-transform:scale(1, 1);
		transform:scale(1, 1);
	  }
	  50%{
		opacity:1;
	  }
	  100%{
		-webkit-transform:scale(1.35);
		transform:scale(1.35);
		opacity:0;
	  }
}
@keyframes subjecticon{
	0%{
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
	}
	50%{
		opacity:1;
	}
	100%{
		-webkit-transform: scale(1.35);
		transform: scale(1.35);
		opacity:0;
	}
}