body {
	background: #f7f8fb
}

.agreement-container .container-main .main-bgimg {
	width: 99vw;
	height: 30rem
}

.agreement-container .container-main .main-content {
	width: 100%;
	padding: 0 10rem
}

.agreement-container .container-main .main-content .main-content-title {
	cursor: pointer;
	margin: 1.5rem 0 1rem 0;
	padding: .875rem 1.625rem;
	color: #333;
	font-size: 1rem;
	background: #fff
}

.agreement-container .container-main .main-content .main-content-info {
	padding: 2.75rem;
	background: #fff
}

.agreement-container .container-main .main-content .main-content-info .content-info-title {
	color: #333;
	font-size: 1.25rem;
	font-weight: 600;
	text-align: center
}

.agreement-container .container-main .main-content .main-content-info .content-info-time {
	padding-top: 1.5rem;
	color: #999;
	font-size: .875rem;
	text-align: center
}

.agreement-container .container-main .main-content .main-content-info .content-info-box {
	padding-top: 2.5rem
}

.agreement-container .container-main .main-content .main-content-info .content-info-box .info-box-img {
	width: 20rem;
	height: 24rem
}

.agreement-container .container-main .main-content .main-content-info .content-info-box .info-box-txt {
	padding-top: 2.5rem;
	color: #333;
	font-size: 1rem
}

.agreement-container .container-main .main-content .main-content-info img {
	max-width: 100%;
	height: auto
}

.agreement-container .modal {
	overflow-x: auto;
	padding: 1rem 0!important
}

.agreement-container .modal .modal-dialog {
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 52rem;
	max-width: 100%;
	margin: 0;
	min-height: 100%
}

.agreement-container .modal .modal-dialog .modal-content {
	padding: 1.5rem 2rem;
	border-radius: .5rem;
	width: 16rem
}

.agreement-container .modal .modal-dialog .modal-content .modal-content-title {
	display: flex
}

.agreement-container .modal .modal-dialog .modal-content .modal-content-title .content-title-txt {
	flex: 1;
	color: #5a5b6e;
	font-size: 1rem;
	font-weight: 600
}

.agreement-container .modal .modal-dialog .modal-content .modal-content-title .content-title-img {
	width: 1.5rem;
	height: 1.5rem
}

.agreement-container .modal .modal-dialog .modal-content .modal-content-code {
	margin-top: 1rem;
	width: 100%;
	height: 11.25rem
}

.agreement-container .modal .modal-dialog .modal-content .modal-content-tap {
	text-align: center;
	margin-top: 1rem;
	color: #5a5b6e;
	font-size: 1rem;
	font-weight: 600
}

@media screen and (max-width:1700px) {
	.agreement-container .component-header {
		width: 99vw;
		background: linear-gradient(180deg,#90000a 0,rgba(144,0,10,0) 100%)
	}

	.agreement-container .component-header .header-normal .header-logo {
		margin: 2rem 12rem;
		width: 28rem;
		height: 4rem
	}

	.agreement-container .component-header .header-normal .header-divider {
		margin-bottom: .35rem;
		height: 1px;
		background: rgba(255,255,255,.25)
	}

	.agreement-container .component-header .header-normal .nav .nav-item {
		cursor: pointer
	}

	.agreement-container .component-header .header-normal .nav .nav-item a {
		display: inline-block;
		padding: .25rem 1.55rem;
		font-size: 1.25rem;
		color: #fff;
		transition: color .3s
	}

	.agreement-container .container-main .main-bgimg {
		width: 99vw;
		height: 26rem
	}

	.agreement-container .container-main .main-content {
		width: 100%
	}

	.agreement-container .container-main .main-content .main-content-title {
		margin: 1.5rem 0 1rem 0;
		padding: .875rem 1.625rem;
		color: #333;
		font-size: .875rem;
		background: #fff
	}

	.agreement-container .modal {
		overflow-x: auto;
		padding: 1rem 0!important
	}

	.agreement-container .modal .modal-dialog {
		display: flex;
		justify-content: center;
		align-items: center;
		min-width: 52rem;
		max-width: 100%;
		margin: 0;
		min-height: 100%
	}

	.agreement-container .modal .modal-dialog .main-content {
		width: 100%;
		padding: 0 10rem
	}

	.agreement-container .modal .modal-dialog .main-content .main-content-title {
		cursor: pointer;
		margin: 1.5rem 0 1rem 0;
		padding: .875rem 1.625rem;
		color: #333;
		font-size: 1rem;
		background: #fff
	}

	.agreement-container .modal .modal-dialog .main-content .main-content-info {
		padding: 2.75rem;
		background: #fff
	}

	.agreement-container .modal .modal-dialog .main-content .main-content-info .content-info-title {
		color: #333;
		font-size: 1.25rem;
		font-weight: 600;
		text-align: center
	}

	.agreement-container .modal .modal-dialog .main-content .main-content-info .content-info-time {
		padding-top: 1.5rem;
		color: #999;
		font-size: .875rem;
		text-align: center
	}

	.agreement-container .modal .modal-dialog .main-content .main-content-info img {
		max-width: 100%;
		height: auto
	}
}

@media screen and (max-width:767px) {
	.agreement-container .component-footer {
		margin: 0 -15px;
		padding: 0 15px;
		background: #90000a;
		width: 99vw
	}

	.agreement-container .component-footer .footer-nav {
		padding: 2rem 0 0 0
	}

	.agreement-container .component-footer .footer-nav .footer-nav-item {
		display: block;
		text-align: center;
		padding: 0
	}

	.agreement-container .component-footer .footer-nav .footer-nav-item .nav-item-img {
		width: 6rem;
		height: 6rem;
		margin: 0 auto;
		display: block
	}

	.agreement-container .component-footer .footer-nav .footer-nav-item .nav-item-txt {
		margin-top: 1rem;
		text-align: center;
		color: #fff;
		font-size: .75rem
	}

	.agreement-container .component-footer .footer-link {
		border-top: 1px solid rgba(141,146,156,.15);
		padding: .25rem 0 1rem
	}

	.agreement-container .component-footer .footer-link .link-title {
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.375rem;
		color: #5a5b6e;
		margin-top: .75rem
	}

	.agreement-container .component-footer .footer-link .link-list {
		flex: 1;
		display: flex;
		flex-wrap: wrap
	}

	.agreement-container .component-footer .footer-link .link-list a {
		margin-top: .75rem;
		padding-left: 2rem;
		font-size: 1rem;
		line-height: 1.375rem;
		color: #8d929c;
		transition: color .3s
	}

	.agreement-container .component-footer .footer-link .link-list a:hover {
		color: #4481eb
	}

	.agreement-container .component-footer .footer-info {
		border-top: 1px solid rgba(141,146,156,.15);
		padding: 1.5rem 0 1rem
	}

	.agreement-container .component-footer .footer-info .info-copyright .copyright {
		font-size: 1rem;
		line-height: 1.375rem;
		color: #5a5b6e
	}

	.agreement-container .component-footer .footer-info .info-copyright .link {
		margin-left: 1rem;
		font-size: 1rem;
		line-height: 1.375rem;
		color: #5a5b6e;
		transition: color .3s
	}

	.agreement-container .component-footer .footer-info .info-copyright .link .icon {
		margin-right: .5rem;
		width: 1.25rem;
		height: 1.25rem
	}

	.agreement-container .component-footer .footer-info .info-copyright .link:hover {
		color: #4481eb
	}

	.agreement-container .component-footer .footer-info .info-statistics .statistics-item {
		margin-left: 2.5rem
	}

	.agreement-container .component-footer .footer-info .info-statistics .statistics-item .item-icon {
		width: 1rem;
		height: 1rem
	}

	.agreement-container .component-footer .footer-info .info-statistics .statistics-item .item-text {
		margin-left: .5rem;
		font-size: 1rem;
		line-height: 1.375rem;
		color: #5a5b6e
	}

	.agreement-container .container-main .main-bgimg {
		width: 99vw;
		height: 12rem
	}

	.agreement-container .container-main .main-content {
		width: 100%;
		padding: 0 0 0 2rem
	}

	.agreement-container .container-main .main-content .main-content-title {
		cursor: pointer;
		margin: 1.5rem 0 1rem 0;
		padding: .875rem 1.625rem;
		color: #333;
		font-size: 1rem;
		background: #fff
	}

	.agreement-container .container-main .main-content .main-content-info {
		margin-bottom: 2rem;
		padding: 1rem;
		background: #fff
	}

	.agreement-container .container-main .main-content .main-content-info .content-info-title {
		color: #333;
		font-size: 1.15rem;
		font-weight: 600;
		text-align: center
	}

	.agreement-container .container-main .main-content .main-content-info .content-info-time {
		padding-top: 1.5rem;
		color: #999;
		font-size: .875rem;
		text-align: center
	}

	.agreement-container .container-main .main-content .main-content-info img {
		max-width: 100%;
		height: auto
	}

	.agreement-container .modal {
		overflow-x: auto;
		padding: 1rem 0!important
	}

	.agreement-container .modal .modal-dialog {
		display: flex;
		justify-content: center;
		align-items: center;
		min-width: 52rem;
		max-width: 100%;
		margin: 0;
		min-height: 100%
	}

	.agreement-container .modal .modal-dialog .modal-content {
		padding: 1.5rem 2rem;
		border-radius: .5rem;
		width: 16rem
	}

	.agreement-container .modal .modal-dialog .modal-content .modal-content-title {
		display: flex
	}

	.agreement-container .modal .modal-dialog .modal-content .modal-content-title .content-title-txt {
		flex: 1;
		color: #5a5b6e;
		font-size: 1rem;
		font-weight: 600
	}

	.agreement-container .modal .modal-dialog .modal-content .modal-content-title .content-title-img {
		width: 1.5rem;
		height: 1.5rem
	}

	.agreement-container .modal .modal-dialog .modal-content .modal-content-code {
		margin-top: 1rem;
		width: 100%;
		height: 11.25rem
	}

	.agreement-container .modal .modal-dialog .modal-content .modal-content-tap {
		text-align: center;
		margin-top: 1rem;
		color: #5a5b6e;
		font-size: 1rem;
		font-weight: 600
	}
}