@charset "utf-8";
/* CSS Document */






#pageTitle .title {
	color: #46d2e6;
	font-size: 32px;
	font-weight: normal;
}
#pageTitle .title span {
	font-size: 48px;
}










/*****************************************************************************
depIndexList
 *****************************************************************************/
 
#depIndexList {
	margin: 0 auto;
	max-width: 1540px;
	line-height: 1;
}
#depIndexList ul {
	display: flex;
	justify-content: center;
}
#depIndexList li {
	width: 545px;
	margin: 0 calc((100% - 1090px)/3);
	overflow:hidden;
}
#depIndexList li.left {
	margin-right: 0;
}
#depIndexList li .box {
	position: relative;
}
#depIndexList li .bg {
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto;
	opacity: 0.6;
}
#depIndexList li .filter {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
#depIndexList li.left .filter {
	background: rgba(255,150,35,0.75);
}
#depIndexList li.right .filter {
	background: rgba(150,230,110,0.75);
}
#depIndexList li .inner {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	text-decoration: none;
	transition: opacity 0.5s ease;
	opacity: 0;
}
#depIndexList li.on .inner {
	opacity: 1;
}
#depIndexList li .name1 {
	font-size: 35px;
	color: #ffffff;
	padding: 30px 15px 0;
}
#depIndexList li.left .name1 {
	text-align: right;
}
#depIndexList li.right .name1 {
	text-align: left;
}
#depIndexList li .student {
	position: absolute;
	bottom: 0;
	z-index: 2;
	height: 75%;
	transition: all 0.5s ease;
}
#depIndexList li.left .student {
	right: -5px;
	text-align:right;
}
#depIndexList li.right .student {
	left: -5px;
	text-align:left;
}
#depIndexList li.left.on .student {
	right: 0;
}
#depIndexList li.right.on .student {
	left: 0;
}
#depIndexList li .student img {
	height: 100%;
	width: auto;
}
#depIndexList .box a {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 4;
	opacity:1;
	text-decoration: none;
}
#depIndexList li .box a .name2 {
	width: 100%;
	height: 100%;
	padding: 0 40px;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	text-align: center;
	color: #ffffff;
	opacity: 1;
	transition: opacity 0.5s ease;
}
#depIndexList li.on .box a .name2 {
	opacity: 0;
}
#depIndexList li .box a .name2 .sub {
	font-size: 16px;
}
#depIndexList li .box a .name2 .main {
	font-size: 35px;
	line-height: 1.1;
}
#depIndexList li .btn {
	position: absolute;
	top: 75%;
	width:64%;
	z-index:4;
	transition: all 0.6s ease 0.2s;
	opacity: 0;
	text-align:center;
}
#depIndexList li.left .btn {
	left: 7%;
}
#depIndexList li.right .btn {
	right: 7%;
}
#depIndexList li.on .btn {
	opacity: 1;
}




#depIndexList li .btn span {
	display: inline-block;
	border: 1px solid #ffffff;
	padding: 5px 20px;
	text-align: center;
	font-size: 16px;
	color: #ffffff;
	transition: all 0.3s ease;
	position:relative;
}
#depIndexList li  .btn span .fa {
	font-size: 13px;
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -6.5px;
	opacity: 0;
	transition: opacity 0.3s ease;
}
#depIndexList li .btn span:hover .fa {
	opacity: 1;
}
#depIndexList li .link {
	padding: 8px 0 2px;
}
#depIndexList li.left .link {
	text-align: right;
}
#depIndexList li.right .link {
	text-align: left;
}
#depIndexList li .link a {
	color:#646464;
	text-decoration:none;
}


@media screen and (max-width: 1200px) {
#depIndexList {
	margin: 0 auto;
	max-width: 86%;
}
#depIndexList li {
	width: 50%;
	margin: 0;
}
#depIndexList li:first-child {
	margin-right: 40px;
}
#depIndexList li .name1 {
	font-size: 25px;
}
}

@media screen and (max-width: 900px) {
#depIndexList ul {
	display: inherit;
}
#depIndexList li {
	width: 100%;
	margin: 0 0;
	max-width: 545px;
}
#depIndexList li:first-child {
	margin: 0 auto;
}
#depIndexList li.right {
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
}
#depIndexList li .box a .name2 {

	padding: 0 20px;
}
#depIndexList li.right .link {
	text-align: right;
}
}










/*****************************************************************************
achieve
 *****************************************************************************/
 
#depIndexList .achieve {
	position: absolute;
	top: 18%;
	width:64%;
	z-index:3;
}
#depIndexList li.left .achieve {
	left: 7%;
}
#depIndexList li.right .achieve {
	right: 7%;
}
#depIndexList .achieve .text {
	position:relative;
	z-index:1;
}
#depIndexList .achieve .text img {
	width:100%;
	height:auto;
}
#depIndexList .achieve .circle-wrap {
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
}
.circle-top,
.circle-btm {
	position:absolute;
	left:0;
	width: 100%;
	height: 50%;
	overflow:hidden;
}
.circle-top img,
.circle-btm img {
	width:100%;
	height:auto;
}
.circle-top {
	top:0;
}
.circle-btm {
	top:50%;
}
.circle-btm img {
	margin-top:-50%;
}
.circle-hidden,
.circle {
	width:100%;
	height:100%;
}
.circle-hidden {
	overflow:hidden;
}






/*rotate
---------------------------------*/
.circle-top .circle-hidden,
.circle-top .circle {
	transform-origin:50% 100%;
}
.circle-btm .circle-hidden,
.circle-btm .circle {
	transform-origin:50% 0;
}
.circle-hidden {
	transform:rotate(-180deg);
}
.circle {
	transform:rotate(-180deg);
}
.circle-top.show  .circle-hidden {
	transform:rotate(0);
	animation: rttHidden .5s;
}
.circle-top.show .circle {
	transform:rotate(-360deg);
	animation: rttCircle .5s;
}
.circle-btm.show .circle-hidden {
	transform:rotate(360deg);
	animation: rttHidden .5s;
}
.circle-btm.show .circle {
	transform:rotate(-360deg);
	animation: rttCircle .5s;
}



/*easing
---------------------------------*/
.left .circle-top.show .circle-hidden,
.left .circle-top.show .circle {
	animation-timing-function:ease-out;
}
.left .circle-btm.show .circle-hidden,
.left .circle-btm.show .circle {
	animation-timing-function:ease-in;
}
.right .circle-top.show .circle-hidden,
.right .circle-top.show .circle {
	animation-timing-function:ease-in;
}
.right .circle-btm.show .circle-hidden,
.right .circle-btm.show .circle {
	animation-timing-function:ease-out;
}



/*animation
---------------------------------*/
@keyframes rttHidden {
 0% {
 transform: rotate(-180deg);
}
 100% {
 transform: rotate(0);
}
}
@keyframes rttCircle {
 0% {
 transform: rotate(-180deg);
}
 100% {
 transform: rotate(-360deg);
}
}