@charset "utf-8";
/* CSS Document */
.index-banner .text-wrap{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	padding-top: 3rem;
	pointer-events: none
}
.index-banner .text-wrap .text-special{
	width: 100%;
	height: 100%;
	max-width: 1170px;
	margin: auto;
	position: relative;
}
.index-banner .text-wrap .animation-area{
	text-align: center;
	opacity: 0
}
.index-banner .text-wrap .text-special .animation-area{
	position: absolute;
}
.index-banner .text-wrap .animation-area.lt{
	left: 0;
	top: 6%;
	width: 15%
}
.index-banner .text-wrap .animation-area.rt{
	right: 0;
	top: 6%;
	width: 55%
}
.index-banner .text-wrap .animation-area.lb{
	left: 0;
	bottom: 20%;
	width: 26%
}
.index-banner .text-wrap .animation-area.rb{
	right: 0;
	bottom: 23%;
	width: 24%
}
.index-banner .text-wrap .animation-area.lt2{
	position: absolute;
	top: 22%;
	left: 10%;
	width: 7.7%
}
.index-banner .text-wrap .animation-area.lc2{
	position: absolute;
	top: 45%;
	left: 23%;
	width: 16%
}
.index-banner .text-wrap .animation-area.active{
	animation-name:load-move;
	animation-timing-function:linear;
	animation-iteration-count:forwards;
	opacity: 1
}
.index-banner .text-wrap .animation-area .logo{
	width: 13%
}
.index-banner .text-wrap .animation-area .text{
	font-size: 1.8rem;
	color: #00306E;
	font-weight: bold;
	margin-top: 1.8rem
}
.index-banner .text-wrap .animation-area .tips{
	background: #00306E;
	color: #fff;
	font-weight: bold;
	font-size: 1rem;
	display: inline-block;
	height: 2.2rem;
	line-height: 2.2rem;
	padding: 0 1.8rem;
	margin-top: 6rem
}
.index-banner .text-wrap .animation-area .article{
	font-size: 1.5rem;
	color: #00306E;
	margin-top: 1rem
}
.index-banner .swiper-pagination-bullet-active{
	background: #00306E
}
.index-banner .swiper-pagination-bullet{
	border-radius: 0;
	width: 5rem;
	height: 0.3rem
}
.index-banner .btn-more{
	position: absolute;
	bottom: 3.2rem;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.8rem;
	display: inline-block;
	color: #000;
	border-bottom: 1px solid transparent
}
.index-banner .btn-more:hover{
	color: #00306E;
	border-bottom: 1px solid #00306E
}
.index-area-2{
	background: #f3f3f3;
	padding: 5rem 15px;
}
.index-area2-content{
	text-align: center;
	margin-top: 4rem
}
.index-area2-content i{
	display: inline-block;
	width: 4rem;
	height: 4rem;
	background: #d0d0d0 url(../images/icon-index-1.png) no-repeat center;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
}
.index-area2-content:nth-of-type(2) i{
	background: #d0d0d0 url(../images/icon-index-2.png) no-repeat center;
}
.index-area2-content:nth-of-type(3) i{
	background: #d0d0d0 url(../images/icon-index-3.png) no-repeat center;
}
.index-area2-content h3{
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 4rem
}
.index-area2-content p{
	font-size: 1rem;
	line-height: 1.8rem
}
.index-area-3{
	padding: 7rem 15px 3rem
}
.container-index2{
	margin-top: 4rem
}
.container-index2 a{
	display: block;
	color: #333;
	position: relative;
}
.container-index2 a h3{
	position: absolute;
	top: 1.8rem;
	left: 2rem;
	font-size: 2.8rem;
	color: #fff;
	font-weight: bold;
}
.container-index2 p{
	font-size: 0.9rem;
	line-height: 1.7rem;
	margin-top: 1.5rem;
	height: 3.6rem;
	overflow: hidden;
}
.container-index2 .btn-more{
	margin-top: 3rem;
	font-size: 1rem
}
.index-area-3 .swiper-button-next, .index-area-3 .swiper-button-prev{
	top: -1rem;
	height: 2.6rem;
	background-size: auto 100%;
	outline: none
}
.index-area-3 .swiper-button-prev{
	background-image: url(../images/icon-arrow-index.png);
	left: auto;
	right: 3rem
}
.index-area-3 .swiper-button-next{
	right: 0;
	background-image: url(../images/icon-arrow-index.png);
	transform: rotate(180deg)
}
.more-special{
	display: inline-block;
	color: #fff;
	background: #00306E;
	font-size: 1rem;
	height: 2.4rem;
	line-height: 2.4rem;
	padding: 0 3rem;
	margin-top: 5rem
}
.more-special:hover{
	color: #fff;
	opacity: 0.8
}
.index-area-4{
	padding: 6rem 15px;
	background: #00306E;
}
.index-area-4 .common-title{
	margin-bottom: 4rem
}
.index-area-4 .details-content{
	padding-right: 2rem
}
.index-area-4 .details-content h4{
	color: #fff;
	font-size: 1rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.index-area-4 .details-content span{
	display: block;
	margin: 2rem auto 1rem;
	font-size: 1rem;
	color: #82c4ff
}
.index-area-4 .details-content p{
	font-size: 0.9rem;
	color: #fff;
	line-height: 1.8rem;
	height: 7.2rem;
	overflow: hidden
}
.index-area-4 .details-content a{
	display: block;
	color: #fff;
	font-size: 1rem;
	line-height: 1.3rem
}
.index-area-4 .details-content a:hover{
	text-decoration: underline !important
}
.index-area-4 .col-lg-6{
	padding-top: 2rem;
	padding-bottom: 2rem
}
.index-area-4 .col-lg-6:nth-of-type(1) ,.index-area-4 .col-lg-6:nth-of-type(2){
	border-bottom: 1px solid #4b8cc5;
	padding-bottom: 4rem
}
.index-area-4 .col-lg-6:nth-of-type(3) ,.index-area-4 .col-lg-6:nth-of-type(4){
	padding-top: 4rem
}
.index-area-4 .col-lg-6:nth-of-type(2n){
	border-left: 1px solid #4b8cc5;
}
.index-area-4 .col-lg-6:nth-of-type(2n) .details-content{
	padding-left: 2rem;
	padding-right: 0
}
.index-area-4 .shadow-area{
	width: 7rem;
	height: 7rem;
	line-height: 7rem;
	text-align: center;
	background: #00306E;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	transform: translate(-50%,-50%);
	border-radius: 100%;
}
.index-area-4 .shadow-area i{
	display: inline-block;
	width: 1rem;
	height: 1rem;
	background: #92bbdf;
	transform: rotate(45deg)
}
.index-area-5{
	padding: 6rem 15px 10rem
}
.index-area-5 .index-area5-content{
	background: url(../images/bg-index-1.png) no-repeat bottom;
	background-size: 100%;
	position: relative
}
.index-area-5 .container-index3{
	width: 45%
}
.index-area-5 .index-area5-content .pagination-index3{
	position: absolute;
	bottom: -4rem;
	left: 50%;
	transform: translateX(-50%)
}
.index-area-5 .index-area5-content .swiper-slide{
	min-height: 26rem
}
.index-area-5 .index-area5-content .swiper-slide a{
	display: block;
	text-align: center;
	color: #888;
	font-size: 1.2rem;
	margin: auto;
	font-style: italic;
	line-height: 2.2rem;
	padding-top: 10rem
}
.index-area-5 .swiper-pagination-bullet{
	width: 1.1rem;
	height: 1.1rem;
	position: relative;
	transform: rotate(10deg);
	background: #efefef;
	opacity: 1 !important;
	margin: 0 0.7rem !important;
	outline: none
}
.index-area-5 .swiper-pagination-bullet-active{
	background: #00306E;
}
.index-banner .pagination-index{
	bottom: 1.5rem
}
@media (max-width:800px){
	.index-banner .text-wrap{
		padding-top: 1rem
	}
	.index-banner .text-wrap .animation-area .text{
		font-size: 1.4rem;
		margin-top: 0.5rem
	}
	.index-banner .text-wrap .animation-area .tips{
		margin-top: 0.4rem
	}
	.index-banner .text-wrap .animation-area .article{
		font-size: 1rem;
		margin-top: 0.4rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.index-banner .btn-more{
		bottom: 1.6rem;
		border: none;
	}
	.index-banner .swiper-pagination-bullet{
		border-radius: 0;
		width: 2rem;
		height: 0.2rem
	}
	.index-banner .pagination-index{
		bottom: 0
	}
	.index-area-2{
		padding: 2rem 15px
	}
	.index-area2-content{
		margin-top: 1.5rem
	}
	.index-area-3 .swiper-button-next, .index-area-3 .swiper-button-prev{
		top: 47%;
		width: 2.6rem;
		background-color: rgba(255,255,255,.7);
	    border-radius: 100%;
	    padding: 0.3rem;
	    box-sizing: content-box;
	    background-size: auto 60%
	}
	.index-area-3 .swiper-button-next{
		right: 1.5rem;
		transform: rotate(180deg)
	}
	.index-area-3 .swiper-button-prev{
		right: auto;
		left: 1.5rem
	}
	.index-area-3{
		padding: 3rem 15px 2rem
	}
	.container-index2{
		width: 94%;
		margin: auto;
		margin-top: 2rem
	}
	.container-index2 .btn-more{
		margin-top: 1rem
	}
	.more-special{
		margin-top: 2rem
	}
	.index-area-4{
		padding: 3rem 15px
	}
	.index-area-4 .common-title{
		margin-bottom: 2rem
	}
	.index-area-4 .col-lg-6{
		border: none !important;
		padding: 15px !important;
		border-bottom: 1px solid #92bbdf !important
	}
	.index-area-4 .col-lg-6 .details-content{
		padding: 0 !important;
		margin: auto
	}
	.index-area-5{
		padding: 3rem 15px
	}
	.index-area-5 .container-index3{
		width: 90%
	}
	.index-area-5 .index-area5-content .swiper-slide a{
		padding-top: 3rem
	}
	.index-area-5 .index-area5-content .swiper-slide{
		min-height: 18rem
	}
	.index-area-5 .index-area5-content .pagination-index3{
		bottom: -1rem;
	}
	.index-area-4 .details-content p {
		max-height: 7.2rem;
		height: auto;
		margin-bottom: 2rem
	}
	.index-banner .text-wrap .animation-area.lt{
		left: 2%;
		top: 6%;
		width: 13%
	}
	.index-banner .text-wrap .animation-area.rt{
		right: 2%;
		top: 6%;
		width: 55%
	}
	.index-banner .text-wrap .animation-area.lb{
		left: 2%;
		bottom: 10%;
		width: 26%
	}
	.index-banner .text-wrap .animation-area.rb{
		right: 2%;
		bottom: 13%;
		width: 24%
	}
}