@import url(yzui.css);

/* index.html */
body.active {
	overflow-x: hidden;
	overflow-y: hidden;
}

@media (max-width:1200px) {
	.navbar-toggle {
		display: none;
		cursor: pointer;
		position: absolute;
		top: 57px;
		right: 15px;
		margin-left: 18px;
		z-index: 1000;
		width: 24px;
		height: 24px;
		float: right;
		background-color: transparent;
		border: 0;
		display: block;
		margin-top: -32px;
	}

		.navbar-toggle span {
			margin-top: 10px
		}

			.navbar-toggle span, .navbar-toggle span:before, .navbar-toggle span:after {
				position: absolute;
				display: block;
				width: 24px;
				height: 2px;
				cursor: pointer;
				content: '';
				background-color: #000;
				border-radius: 1px;
				-webkit-transition: all .4s cubic-bezier(0.19,1,.22,1);
				-o-transition: all .4s cubic-bezier(0.19,1,.22,1);
				transition: all .4s cubic-bezier(0.19,1,.22,1)
			}

				.navbar-toggle span:before {
					top: -7px
				}

				.navbar-toggle span:after {
					bottom: -7px
				}

		.navbar-toggle.drawer-open span, .navbar-toggle.drawer-open span::before, .navbar-toggle.drawer-open span::after {
			background: #000;
		}

		.navbar-toggle.drawer-open span {
			background: rgba(0, 0, 0, 0);
		}

			.navbar-toggle.drawer-open span:before {
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
				left: 0px;
				top: 0px;
			}

			.navbar-toggle.drawer-open span:after {
				-webkit-transform: rotate(-45deg);
				transform: rotate(-45deg);
				left: 0px;
				top: 0px;
			}
}

.header {
	position: relative;
}

	.header .top {
		transition: all .5s;
		z-index: 999;
		text-align: right;
		line-height: 48px;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: rgba(234,239,247,0.3);
		height: 48px;
	}

		.header .top a {
			font-size: 12px;
			letter-spacing: 2px;
			color: #333333;
			margin-left: 70px;
		}

			.header .top a:nth-child(1) {
				padding-left: 28px;
				background: url('../images/t-i-01.png') no-repeat left center;
			}

			.header .top a:nth-child(2) {
				padding-left: 28px;
				background: url('../images/t-i-02.png') no-repeat left center;
			}

	.header .tops {
		transition: all .5s;
		z-index: 999;
		text-align: right;
		line-height: 48px;
		top: 0;
		left: 0;
		width: 100%;
		background: rgba(234,239,247,1);
		height: 48px;
	}

		.header .tops a {
			font-size: 12px;
			letter-spacing: 2px;
			color: #333333;
			margin-left: 35px;
		}

			.header .tops a:nth-child(1) {
				padding-left: 28px;
				background: url('../images/t-i-01.png') no-repeat left center;
			}

			.header .tops a:nth-child(2) {
				padding-left: 28px;
				background: url('../images/t-i-02.png') no-repeat left center;
			}

	.header.active .top {
		background: rgba(234,239,247,1);
	}

.shubiao {
	position: absolute;
	left: 50%;
	margin-left: -13px;
	bottom: 30px;
	z-index: 999;
	animation: dong 1.5s infinite;
}

.header.active .shubiao {
	display: none;
}

@keyframes dong {
	0% {
		transform: translate(0px, 0px);
	}

	50% {
		transform: translate(0px, -10px);
	}

	100% {
		transform: translate(0px, 0px);
	}
}

.header .bot {
	z-index: 999;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100px;
	transition: all .5s;
}

	.header .bot.active {
		position: fixed;
		left: 0;
		top: 48px;
	}

.header.active .bot {
	background: #fff;
}

.header .bot .logo {
	height: 100px;
	line-height: 100px;
}

	.header .bot .logo img {
		vertical-align: middle;
	}

.header .bot .nav li {
	float: left;
	margin-left: 28px;
	height: 100px;
	line-height: 100px;
}

	.header .bot .nav li a {
		font-size: 18px;
		letter-spacing: 2px;
		color: #333333;
	}

	.header .bot .nav li:hover a, .header .bot .nav li.active a {
		color: #164397;
	}

.header .bots {
	z-index: 999;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100px;
	transition: all .5s;
}

	.header .bots.active {
		position: fixed;
		left: 0;
		top: 48px;
		background: #fff;
	}

	.header .bots .logo {
		height: 100px;
		line-height: 100px;
	}

		.header .bots .logo img {
			vertical-align: middle;
		}

	.header .bots .nav li {
		float: left;
		margin-left: 28px;
		height: 100px;
		line-height: 100px;
	}

		.header .bots .nav li a {
			font-size: 18px;
			letter-spacing: 2px;
			color: #333333;
		}

		.header .bots .nav li:hover a, .header .bot .nav li.active a {
			color: #164397;
		}

@media (min-width:1200px) {
	.banner .banner-pagination {
		width: 2% !important;
		right: 250px !important;
		left: auto !important;
		bottom: 35% !important;
	}

		.banner .banner-pagination .swiper-pagination-bullet {
			position: relative;
			opacity: 1 !important;
			font-size: 16px;
			color: #e5e5e5;
			letter-spacing: 2px;
			padding-right: 260px !important;
			margin: 19px 0 !important;
			width: auto !important;
			height: auto !important;
			background: none !important;
		}

		.banner .banner-pagination .swiper-pagination-bullet-active {
			color: #164397;
		}

		.banner .banner-pagination .swiper-pagination-bullet i {
			position: absolute;
			left: 25px;
			top: 10px;
			display: block;
			width: 253px;
			height: 1px;
			background-color: transparent;
		}

		.banner .banner-pagination .swiper-pagination-bullet-active i {
			background: #eaeff7;
		}
}

.banner .swiper-slide {
	background-size: auto 100% !important;
}

.imported .item {
	width: 50%;
	position: relative;
}

	.imported .item a {
		display: block;
		width: 100%;
		height: 100%;
	}

	.imported .item .tex {
		position: absolute;
		left: 0;
		top: 50%;
		margin-top: -48px;
		width: 100%;
		text-align: center;
		font-size: 36px;
		letter-spacing: 4px;
		color: #000000;
	}

	.imported .item .img {
		overflow: hidden;
	}

		.imported .item .img img {
			transition: all .5s;
		}

	.imported .item:hover .img img {
		transform: scale(1.1);
	}

.title .tex p {
	color: #fff;
}

	.title .tex p:nth-child(1) {
		font-size: 50px;
	}

	.title .tex p:nth-child(2) {
		width: 154px;
		height: 1px;
		background-color: #fff;
		margin: 5px 0 5px;
	}

	.title .tex p:nth-child(3) {
		font-size: 40px;
	}

.title .more {
	margin-top: 79px;
}

	.title .more a {
		color: #fff;
		letter-spacing: 2px;
		font-size: 16px;
		line-height: 30px;
		display: block;
		width: 118px;
		height: 32px;
		border: solid 1px #cccccc;
		text-align: center;
		margin: 0;
	}

		.title .more a:hover {
			color: #fff;
			border: 1px solid #164397;
			background: #164397;
		}


.about {
	border: 0px solid #fff;
	border-bottom: 0px solid #000;
	padding: 17% 0 14%;
}

	.about .title {
		width: 40%;
		padding-left: 15%;
	}

	.about .list {
		color: #fff;
		width: 60%;
		padding-right: 2%;
	}

		.about .list .top li {
			float: left;
			width: 33.33%;
		}

			.about .list .top li:nth-child(1) {
				margin-left: 0;
			}

			.about .list .top li i {
				display: block;
				font-style: normal;
				font-size: 64px;
			}

			.about .list .top li p:nth-child(2) {
				font-size: 20px;
				font-weight: bold;
				margin-top: 30px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

		.about .list .bot {
			font-size: 16px;
			line-height: 30px;
			letter-spacing: 2px;
			text-align: justify;
			margin-top: 77px;
		}

.news {
	border: 0;
}

	.news .title .tex p {
		color: #333;
	}

		.news .title .tex p:nth-child(2) {
			background: #333;
		}

	.news .title .more a {
		color: #666;
		border: 1px solid #ccc;
	}

		.news .title .more a:hover {
			color: #fff;
			border: 1px solid #164397;
			background: #164397;
		}

.news {
	padding: 0;
}

	.news .title {
		padding-top: 15%;
	}

	.news .list li {
		float: left;
		width: 33.33%;
		border-left: 1px solid #eeeeee;
	}

		.news .list li a {
			display: block;
			width: 100%;
			height: 100%;
			padding: 15% 21px 10% 22px;
		}

			.news .list li a .t-01 {
				font-size: 66px;
				letter-spacing: 7px;
				color: #b5b5b5;
				margin-bottom: 40%;
			}

			.news .list li a .t-02 p:nth-child(1) {
				letter-spacing: 1px;
				color: #b5b5b5;
				margin-bottom: 7px;
			}

			.news .list li a .t-02 p:nth-child(2) {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				font-size: 18px;
				line-height: 27px;
				letter-spacing: 2px;
				color: #333333;
			}

		.news .list li:hover a .t-02 p:nth-child(2) {
			color: #164397;
		}

		.news .list li a .t-02 p:nth-child(4) {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
			font-size: 12px;
			line-height: 23px;
			letter-spacing: 1px;
			color: #b5b5b5;
		}

		.news .list li a .t-02 .img {
			margin: 35px 0 45px;
			overflow: hidden;
		}

		.news .list li a .more {
			font-size: 12px;
			color: #333333;
			margin-top: 40%;
		}

			.news .list li a .more img {
				margin-left: 4px;
				position: relative;
				top: 3px;
				transition: all .5s;
			}

		.news .list li a .t-02 .img img {
			transition: all .5s;
		}

@media (min-width:1200px) {
	.news .list li:hover a .t-02 .img img {
		transform: scale(1.1);
	}

	.news .list li:hover a .more img {
		margin-left: 15px;
	}
}

.footer {
	background: url('../image/f-bg.jpg') no-repeat center center;
	background-size: 100% 100%;
}

	.footer .top {
		padding: 135px 0 162px;
		border-bottom: 1px solid #cccccc;
	}

		.footer .top .f-nav li {
			float: left;
			margin-right: 82px;
		}

			.footer .top .f-nav li dt {
				font-size: 20px;
				color: #333;
				letter-spacing: 2px;
			}

			.footer .top .f-nav li dd {
				margin-top: 24px;
			}

				.footer .top .f-nav li dd a {
					color: #646464;
					letter-spacing: 2px;
					font-size: 16px;
				}

				.footer .top .f-nav li dd:hover a {
					color: #164397;
				}

				.footer .top .f-nav li dd:nth-child(2) {
					margin-top: 28px;
				}

		.footer .top .code .tex {
			font-size: 16px;
			letter-spacing: 2px;
			color: #666666;
			margin-left: 14px;
		}

			.footer .top .code .tex p {
				margin-top: 12px;
			}

				.footer .top .code .tex p a {
					color: #666;
				}

				.footer .top .code .tex p:nth-child(1) {
					margin-top: 0;
				}

	.footer .bot {
		font-size: 16px;
		padding: 29px 0 24px;
		color: #333;
		letter-spacing: 1px;
	}

		.footer .bot .b-left p:nth-child(2) {
			margin-top: 15px;
		}

		.footer .bot .b-right {
			margin-top: 30px;
		}

@media (min-width:1200px) and (max-width:1500px) {
	.container {
		width: 100%;
		margin: 0 auto;
	}
}