body {
	background: #FFFFFF;
	margin: 0px;
	padding: 0px;
	font-size: 16px;
	font-family: 'SourceHanSansCN-Heavy';
}

.flex-start {
	display: flex;
	justify-content: flex-start;
}

.flex-row {
	display: flex;
	flex-direction: row;
}

.flex-column {
	display: flex;
	flex-direction: column;
}

.flex-between {
	justify-content: space-between;
}

.flex-wrap {
	flex-wrap: wrap;
}

.flex-end {
	display: flex;
	justify-content: flex-end;
}

.flex-content {
	justify-content: center;
}

.flex-item {
	align-items: center;
}

.border-bottom {
	border-bottom: 1px solid #efefef;
}

.text-row {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ml5 {
	margin-left: 5px;
}

.ml10 {
	margin-left: 10px;
}

.ml15 {
	margin-left: 15px;
}

.ml20 {
	margin-left: 20px;
}

.ml25 {
	margin-left: 25px;
}

.ml35 {
	margin-left: 35px;
}

.ml80 {
	margin-left: 80px;
}

.ml90 {
	margin-left: 90px;
}

.mt10 {
	margin-top: 10px;
}

.mt5 {
	margin-top: 5px;
}

.mt12 {
	margin-top: 12px;
}

.mt15 {
	margin-top: 15px;
}

.mt20 {
	margin-top: 20px;
}

.mt25 {
	margin-top: 25px;
}

.mt30 {
	margin-top: 30px;
}

.mt50 {
	margin-top: 50px;
}

.ml90 {
	margin-left: 90px;
}

.pd25 {
	padding: 25px 0px;
}

.header {
	display: flex;
	position: relative;
	background: #FFFFFF;
	height: 80px;
	line-height: 80px;
	padding: 0px 305px 0px 295px;
	justify-content: flex-end;
	align-items: center;
}

.header-top {
	display: flex;
	height: 40px;
	background: #4f4f4f;
	line-height: 40px;
	color: #FFFFFF;
	padding: 0px 305px 0px 295px;
	align-items: center;
	justify-content: space-between;
	
}


.container {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.swiper-container {
	width: 100%;
	height: 700px;
}

.swiper-container-case {
	width: 1375px;
	height: 290px;
}

.swiper-container-case {
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	/* Fix of Webkit flickering */
	z-index: 1;
}


.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;

	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.div1 {
	position: relative;
}

.hvr-glow {
	border-radius: 10px;
	padding: 10px;
	cursor: pointer;
}

.div1-content {
	position: absolute;
	top: 110px;
	left: 255px;
}

button {
	width: 215px;
	height: 65px;
	font-size: 28px;
	color: #FFFFFF;
	cursor: pointer;
	border-radius: 40px;
	border: none;
	font-family: 'SourceHanSansCN-Regular';
}

button:hover {
	opacity: 0.7;
}

button:active {
	-webkit-transform: translateY(2px);
	-moz-transform: translateY(2px);
}

.bt-yellow {
	background: #ffb923;
}

@-webkit-keyframes yellowPulse {
	from {
		background-color: #ffc125;
		-webkit-box-shadow: 0 0 9px #333;
	}

	50% {
		background-color: #ffb515;
		-webkit-box-shadow: 0 0 18px #ffb515;
	}

	to {
		background-color: #ffb923;
		-webkit-box-shadow: 0 0 9px #333;
	}
}

.yellowBtn {
	-webkit-animation-name: yellowPulse;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes bluePulse {
	from {
		background-color: #02a6fd;
		-webkit-box-shadow: 0 0 9px #333;
	}

	50% {
		background-color: #00c2fd;
		-webkit-box-shadow: 0 0 18px #00c2fd;
	}

	to {
		background-color: #00a8fd;
		-webkit-box-shadow: 0 0 9px #333;
	}
}

.blueBtn {
	-webkit-animation-name: bluePulse;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: infinite;
}

.bt-blue {
	background: #00a8fd;
}

.text-gray-16 {
	font-size: 16px;
	color: #777777;
	font-family: 'SourceHanSansCN-Regular';

}

.text-gray-18 {
	font-size: 16px;
	color: #777777;
	font-family: 'SourceHanSansCN-Regular';

}

.text-white-24 {
	font-size: 16px;
	color: #FFFFFF;
	font-family: 'SourceHanSansCN-Regular';

}

.square {
	width: 10px;
	height: 10px;
	background: #ffbc31;
}

.round {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 110px;
	height: 110px;
	border-radius: 100%;
	background: #FFFFFF;
}

.tree {
	background: #32baea;
	position: absolute;
	height: 15px;
	width: 2px;
}


.blue-ellipse {
	background: #215ea8;
	opacity: 0.8;
	border-radius: 100px;
	padding: 20px 85px;
}

.blue-ellipse-text {
	background: #1e7efb;
	border-radius: 50px;
	font-size: 22px;
	padding: 3px 25px;
	font-family: 'SourceHanSansCN-Regular';
}

.box {
	position: relative;
	display: flex;
	cursor: pointer;
	width: 100%;
}

/* .box:hover {
	transform: scale(1.1, 1.1);
} */

.box-text {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	color: #FFFFFF;
	opacity: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #4f4f4f;


}

.box-text:hover {
	font-size:18px;
	opacity: 0.8;
	transform: scale(1.1, 1.1);
}

.footer {
	width: 100%;
	color: #ffffff;
	padding: 75px 0px 20px 0px;
	background: #1676bd;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	font-size: 16px;
	font-family: 'SourceHanSansCN-Regular';
}

.footer2 {
	width: 100%;
	height: 60px;
	color: #ffffff;
	background: #4e4e4e;
	position: fixed;
	bottom: 0px;
	left: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 16px;
	font-family: 'SourceHanSansCN-Regular';
}


.imgs {
	-webkit-animation: rotateVbtn 5s linear infinite 800ms 0 ease;
	-moz-animation: rotateVbtn 5s linear infinite 800ms 0 ease;
	-ms-animation: rotateVbtn 5s linear infinite 800ms 0 ease;
	animation: rotateVbtn 5s linear infinite 800ms 0 ease;
	-moz-animation: rotateVbtn 5s linear infinite;
	-webkit-animation: rotateVbtn 5s linear infinite;
	-o-animation: rotateVbtn 5s linear infinite;
	-ms-animation: rotateVbtn 5s linear infinite;
	animation: rotateVbtn 5s linear infinite;
}

@-webkit-keyframes rotateVbtn {
	0% {
		-webkit-transform: rotate(0);
		-moz-transform: rotate(0);
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0)
	}

	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@-webkit-keyframes flipOutYtest {
	from {
		-webkit-transform: perspective(1400px);
		transform: perspective(1400px);
	}

	40% {
		-webkit-transform: perspective(1400px) rotate3d(0, 1, 0, 60deg);
		transform: perspective(1400px) rotate3d(0, 1, 0, 60deg);
		opacity: 1;
	}

	50% {
		-webkit-transform: perspective(1400px) rotate3d(0, 1, 0, 90deg);
		transform: perspective(1400px) rotate3d(0, 1, 0, 90deg);
		opacity: 0;
	}

	to {
		-webkit-transform: perspective(1400px) rotate3d(0, 1, 0, 180deg);
		transform: perspective(1400px) rotate3d(0, 1, 0, 180deg);
		opacity: 0;
	}
}

.test {
	-webkit-animation: flipOutYtest 0.75s linear;
	animation: flipOutYtest 0.75s linear;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}


@-webkit-keyframes flipInYtest {
	from {
		-webkit-transform: perspective(1400px) rotate3d(0, 1, 0, -180deg);
		transform: perspective(1400px) rotate3d(0, 1, 0, -180deg);
		opacity: 0;
	}

	50% {
		-webkit-transform: perspective(1400px) rotate3d(0, 1, 0, -90deg);
		transform: perspective(1400px) rotate3d(0, 1, 0, -90deg);
		opacity: 0;
	}

	60% {
		-webkit-transform: perspective(1400px) rotate3d(0, 1, 0, -60deg);
		transform: perspective(1400px) rotate3d(0, 1, 0, -60deg);
		opacity: 1;
	}

	to {
		-webkit-transform: perspective(1400px);
		transform: perspective(1400px);
		opacity: 1;
	}
}

.test2 {
	-webkit-animation: flipInYtest 0.75s linear;
	animation: flipInYtest 0.75s linear;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.well-item {
	position: relative;
	display: flex;
	justify-items: center;
	align-items: center;
	cursor: pointer;
	padding: 0px 15px;
}

.correct {
	display: flex;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	justify-content: center;
	align-items: center;
}

.opposite {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	/* background: linear-gradient(90deg, #2AA8F3 0%, #067BFD 50%); */
}

.opposite-content {
	display: table;
	width: 100%;
	background-color: #D95E22;
}

.absolute1 {
	position: absolute;
	font-family: 'SourceHanSansCN-Regular';
	font-size: 20px;
	top: 360px;
	left: 20px;
}

.absolute2 {
	position: absolute;
	font-family: 'SourceHanSansCN-Regular';
	font-size: 20px;
	top: 185px;
	left: 60px;
}

.absolute3 {
	position: absolute;
	font-family: 'SourceHanSansCN-Regular';
	font-size: 20px;
	top: 40px;
	left: 215px;
}

.absolute4 {
	position: absolute;
	font-family: 'SourceHanSansCN-Regular';
	font-size: 20px;
	top: 40px;
	left: 445px;
}

.absolute5 {
	position: absolute;
	font-family: 'SourceHanSansCN-Regular';
	font-size: 20px;
	top: 195px;
	left: 630px;
}

.absolute6 {
	position: absolute;
	font-family: 'SourceHanSansCN-Regular';
	font-size: 20px;
	top: 360px;
	left: 660px;
}

.absolute7 {
	position: absolute;
	font-family: 'SourceHanSansCN-Bold';
	text-align: center;
	font-size: 28px;
	top: 365px;
	left: 320px;
}

.absolute8 {
	position: absolute;
	font-family: 'SourceHanSansCN-Regular';
	font-size: 20px;
	top: 360px;
	right: 25px;
}

.absolute9 {
	position: absolute;
	font-family: 'SourceHanSansCN-Regular';
	font-size: 20px;
	top: 195px;
	right: 65px;
}

.absolute10 {
	position: absolute;
	font-family: 'SourceHanSansCN-Regular';
	font-size: 20px;
	top: 35px;
	right: 230px;
}

.absolute11 {
	position: absolute;
	font-family: 'SourceHanSansCN-Regular';
	font-size: 20px;
	top: 35px;
	right: 475px;
}

.absolute12 {
	position: absolute;
	font-family: 'SourceHanSansCN-Regular';
	font-size: 20px;
	top: 165px;
	right: 635px;
}

.absolute13 {
	position: absolute;
	font-family: 'SourceHanSansCN-Regular';
	font-size: 20px;
	top: 360px;
	right: 675px;
}

.absolute14 {
	position: absolute;
	font-family: 'SourceHanSansCN-Bold';
	text-align: center;
	font-size: 28px;
	top: 370px;
	right: 320px;
}

.square {
	width: 10px;
	height: 10px;
	background: #ffbc31;
}

.round {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 110px;
	height: 110px;
	border-radius: 100%;
	background: #FFFFFF;
}

.gradient-bg {
	padding: 125px 0px 65px 0px;
	background: linear-gradient(360deg, #9ed4fa, #ffffff);
}

.div9 {
	background: url('../images/yunline_2_20.png');
	background-size: 100% 100%;
	padding: 150px 0px;
	color: #FFFFFF;

}



.imgs {
	-webkit-animation: rotateVbtn 5s linear infinite 800ms 0 ease;
	-moz-animation: rotateVbtn 5s linear infinite 800ms 0 ease;
	-ms-animation: rotateVbtn 5s linear infinite 800ms 0 ease;
	animation: rotateVbtn 5s linear infinite 800ms 0 ease;
	-moz-animation: rotateVbtn 5s linear infinite;
	-webkit-animation: rotateVbtn 5s linear infinite;
	-o-animation: rotateVbtn 5s linear infinite;
	-ms-animation: rotateVbtn 5s linear infinite;
	animation: rotateVbtn 5s linear infinite;
}

@-webkit-keyframes rotateVbtn {
	0% {
		-webkit-transform: rotate(0);
		-moz-transform: rotate(0);
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0)
	}

	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@font-face {
	font-family: 'SourceHanSansCN-Heavy';
	src: url('../SourceHanSansCN/SourceHanSansCN-Heavy.ttf');
}

@font-face {
	font-family: 'SourceHanSansCN-Medium';
	src: url('../SourceHanSansCN/SourceHanSansCN-Medium.ttf');
}

@font-face {
	font-family: 'SourceHanSansCN-Regular';
	src: url('../SourceHanSansCN/SourceHanSansCN-Regular.ttf');
}

@font-face {
	font-family: 'SourceHanSansCN-Bold';
	src: url('../SourceHanSansCN/SourceHanSansCN-Bold.ttf');
}

#containerMap {
	overflow: hidden;
	width: 400px;
	height: 400px;
	margin: 0;
	font-family: "微软雅黑";
}

.carder {
	width: 150px;
	background: #f0f0f0f0;
	border-radius: 5px;
	height: 150px;
}

.menu {
	width: 100%;
	display: flex;
	height: 50px;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.menu:hover {
	background: #cde7eb;
	color: #000000;
}

.menu-click {
	background: #34c4eb;
	border-right: 3px solid #29aeeb;
	color: #FFFFFF;
}

.hide-content {
	display: none;

}

.certificate {
	cursor: pointer;
}

.certificate:hover {
	transform: scale(1.5, 1.5);
}

.case-card {
	width: 100%;
	border-radius: 10px;
	padding: 10px;
	box-shadow: 0px 0px 10px #545454;
	color: #000000;
	font-family: 'SourceHanSansCN-Regular';
}

.introduceImg {
	position: absolute;
	top: 17px;
	left: 36px;
}
.img-scale{
	overflow: hidden;
}
.case-img:hover{
	transform: scale(1.2,1.2);
	
	
}