@charset "utf-8";

/* CSS Document */
body {
	max-width: 100%;
	overflow-x: hidden;
	background: #f7f7f7;
	color: #333;
	font: 18px/36px "Hiragino Sans GB", "MicroSoft YaHei", Arial, sans-serif;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
fieldset,
legend,
button,
input,
select,
textarea,
th,
td {
	margin: 0;
	padding: 0;
}

img {
	border: none;
	max-width: 100%;
}

a {
	color: #333;
	text-decoration: none;
}

a:hover {color: #e4393c;
	text-decoration: none;
}

a,
area {
	blr: expression(this.onFocus=this.blur());
}

ul,
ol,
li {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	max-width: 100%;
}

input,
:focus {
	outline: 0;
}

input[type="button"],
input[type="submit"],
input[type="reset"] {
	-webkit-appearance: none;
	font-family: "Hiragino Sans GB", "MicroSoft YaHei", Arial, sans-serif;
}

input[type="button"],
input[type="submit"],
input[type="reset"],
select {
	-webkit-appearance: none;
	appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
}

input::focus-inner {
	padding: 0;
	border: 0;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.clearfix:after {
	display: block;
	content: '';
	clear: both;
}

.clearfix {
	zoom: 1;
}

.clear {
	height: 0;
	width: 100%;
	overflow: hidden;
	font-size: 1px;
	line-height: 0;
	visibility: hidden;
}

.Width {
	width: 1200px;
	margin: 0 auto;

}

/* 通用头部 */
.ht_top {
	position: relative;
	width: 100%;
	overflow: hidden;
	z-index: 2;
	background: #fafafa url(https://www.huatu.com/z/topfooter/images/nav_bg.gif) repeat-x 0 0;
	line-height: 41px;
}

.ht_top .zt_top {
	width: 1200px;
	height: 41px;
	margin: 0 auto;
}

.ht_top h1 {
	float: left;
}

.ht_top h1 a {
	float: left;
	width: 131px;
	height: 40px;
	overflow: hidden;
	background: url(https://www.huatu.com/z/topfooter/images/logo.gif) no-repeat;
	font-size: 12px;
	text-indent: -100em;
}

.ht_top .topnav {
	float: right;
	color: #333;
	font-size: 12px;
}

.ht_top .topnav a {
	padding: 0 8px;
}

.ht_top .topnav a:hover {
	color: #e4393c;
	text-decoration: underline;
}



/* 通用底部 */
.footer {
	clear: both;
	position: relative;
	padding: 30px 0;
	background: #fff;
	text-align: center;
}

.footer p {
	position: relative;
	z-index: 2;
	color: #333;
	font-size: 16px;
	line-height: 30px;
}

.footer p span {
	padding: 0 5px;
}

.footer p a {
	color: #333;
}

.footer p a:hover {
	color: #333;
}

.coreBox {
	width: 1200px;
	margin: auto;
}

.banner-box {
	width: 100%;
	height: 581px;
	position: relative;
	background: url(../images/banner.png) no-repeat top;
	background-size: 100%;
}

.banner-box p:nth-child(1) {
	position: absolute;
	top: 17%;
	left: 23%;
	font-size: 40px;
	color: #fff;

}

.banner-box p:nth-child(2) {
	position: absolute;
	top: 45%;
	left: 16%;
	font-size: 94px;
	color: #fff;
	font-weight: 600;

}

.head-box {
	width: 100%;
	text-align: center;
	margin-top: 3%;
	margin-bottom: 3%;
}

.contentBox {
	font-size: 48px;
	font-weight: 600;
}

.box-1,
.box-3 {
	height: 590px;
}

.box-1-left,
.box-1-right,
.box-3-left,
.box-3-right {
	height: 100%;
	width: 550px;
	box-shadow: -4px 3px 46px 0px rgba(218, 218, 218, 0.75);
	background: #fff;
	border-radius: 20px;
}

.info-title {
	font-size: 30px;
	color: #f9752b;
	margin-top: 30px;
	text-align: center;
}

.content-p {
	font-size: 18px;
	width: 470px;
	margin: auto;
	line-height: 28px;
	margin-top: 5%;
}

.content-p img {
	margin-top: 10%;
}



.box-1-l {
	width: 80%;
	margin-left: 7%;
	margin-top: 10%;
	overflow: hidden;

}

.box-1-l p {
	font-size: 18px;
}

.box-1-r {
	width: 82%;
	margin-top: 2%
}

.box-2 {
	height: 470px;
	box-shadow: -4px 3px 35px 0px rgba(255, 222, 0, 0.75);
	border-radius: 50px;
}

.box-2-left,
.box-2-right {
	width: 50%;
	height: 100%;
}

.box-2-left {
	background: #fff;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;

}

.box-2-right {
	background: #ff9908;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
}


.box-2-video {
	width: 495px;
	height: 229px;
	background: url(../images/beijing.jpg) no-repeat top;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 8%;
	position:relative;
}
.box-2-video img{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;}


.box-2-left p {
	font-size: 28px;
	margin-top: 3%;
	text-align: center;
}

.video-btn {
	width: 259px;
	height: 44px;
	background-image: linear-gradient(0deg,
		#fddb04 0%,
		#feea73 100%),
		linear-gradient(#fade35,
		#fade35);
	background-blend-mode: normal,
		normal;
	margin: auto;
	border-radius: 40px;
	text-align: center;
	line-height: 44px;
	border: 1px solid #fee342 !important;
}


.box-2-right p {
	color: #fff;
	text-align: center;
	margin-top: 8%;
}

.video-form {
	margin-left: 5%;
	width: 78%;
	margin-top: 3%;
}

.form-box span {
	color: #fff;
	display: inline-block;
	text-align: right;
	width: 100px;
}

.form-box {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 5%;
}

.form-box input {
	width: 260px;
	height: 44px;
	background-color: #fff;
	border-radius: 40px;
	border: 1px solid #fff;
	padding-left: 20px;
	font-size: 18px;
}

.info-li {
	width: 70%;
	margin: auto;
	margin-top: 5%;

}

.info-li p {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 47px;
	font-size: 18px;
}

.box-4 {
	background: url(../images/box-4.png) no-repeat;
	height: 140px;
	background-size: 100%;
	margin-top: 5%;
	margin-bottom: 5%;
	position: relative;
}

.box-4 span:nth-child(1) {
	position: absolute;
	top: 37%;
	left: 14%;
	font-size: 48px;
	color: #f98406;
}

.box-4 span:nth-child(2) {
	position: absolute;
	top: 36%;
	right: 25%;
	font-size: 36px;
	color: #fff;
}


.box-bottom {
	height: auto;
	width: 100%;
	background: #ffde00;
	padding-top: 2%;
}

.box-5 {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 30px;
}

.box-5-icon {
	width: 64px;
	height: 3px;
	background-color: #111317;
}

.box-6 {
	background: #ffc000;
	border-radius: 30px;
	overflow: hidden;
	width: 1160px;
	padding: 2%;
	margin-top: 2%;
}

.box-6 li {
	float: left;
	background: #fff;
	border-radius: 50px;
	text-align: center;
	margin-bottom: 3%;
	padding: 1px 47px;
	margin-right: .9%;
	margin-top: 2%;
}
.box-6 li:hover{background-color: #93820c}

.box-6 li:hover {
	cursor: pointer;
}

.pricetable {
	width: 100%;
	margin-top: 5%;
}

.pricetable th {
	background: #ffa800;
	color: #fff;
}

.pricetable tr th:first-child {
	border-top-left-radius: 15px;
}

.pricetable tr th:last-child {
	border-top-right-radius: 15px;
}

.pricetable tr td:last-child {
	color: red;
}

.pricetable th:nth-child(1),
.pricetable th:nth-child(6) {
	width: 15%;
}

.pricetable th:nth-child(2) {
	width: 20%;
}

.pricetable th:nth-child(3) {
	width: 30%;
}

.pricetable th:nth-child(4),
.pricetable th:nth-child(5) {
	width: 10%;
}

.pricetable td {
	text-align: center;
	background: #fff;
}



.pricetable th {
	border-right: 1px solid #FFDE00
}

.pricetable td {
	border-right: 1px solid #FFDE00;
	border-bottom: 1px solid #ffde00;
}

.box-8 {
	height: 150px;
	padding-bottom: 4%;
	background: url(../images/bottom.png) no-repeat;
	background-size: 100%;
	margin-top: 5%;
}

.box-moble {
	display: none;
}




.select-l,
.select-r {

	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
}

.select-l {
	width: 40%;
}

.select-r {
	width: 20%;
}

.select-box-all {
	width: 280px;
}

.select-box-all select {
	display: inline-block;
	vertical-align: middle;
	height: 44px;
	line-height: 44px;
	background: #fff;
	border: 0;
	box-sizing: border-box;
	border-radius: 30px;
	padding-left: 20px;
	font-size: 20px;
	color: #333;
	float: left;
	width: 45%;
}

.select-city {
	margin-left: 10%;
}

.code-input-box {
	position: relative;

}

.form-box .code-input-btn {
	width: 120px;
	background: #E2E2E2;
	border: solid #E2E2E2 2px;
	cursor: pointer;
	position: absolute;
	right: 9.5%;
	padding-left: 0px;
}

.content-box-all {
	background: url(../images/content-icon.jpeg) no-repeat center;
	background-size: 100% 54.9%;
}

.video-left-btn{
	margin-top: 13px;
}

.city-title-font{
	font-size: 30px;
	font-weight: 600;
}

@media only all and (max-width:1200px) {

	.box-moble {
		display: block;
	}

	.box-pc {
		display: none;
	}

	html {
		font-size: 20px;
	}

	body {
		width: 18.75rem;
		font-size: .7rem;
		line-height: 1.2rem;
	}

	html,
	body {
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	.Width {
		width: 17.5rem;
	}

	/* 隐藏元素 */
	.ht_top .topnav a:nth-child(n+2),
	.footer p,
	.pc,
	.onlypc {
		display: none;
	}

	/* 通用头部 */
	.ht_top {
		height: 2.5rem;
		background-size: auto 100%;
		line-height: 2.5rem;
	}

	.ht_top h1 a {
		height: 2.5rem;
		width: 7.5rem;
		background: url(https://www.huatu.com/images/2015css/images/mob_logo.png) no-repeat center / contain;
	}

	.ht_top .topnav {
		font-size: .8rem;
		text-indent: -1000rem;
	}

	.ht_top .topnav a {
		padding: 0 0 0 0.3rem;
		text-indent: 0;
		float: right;
		word-break: keep-all;
	}

	/* 通用底部 */
	.footer {
		position: relative;
		height: 2.4rem;
		padding: 0;
		overflow: hidden;
	}

	.footer:before {
		display: block;
		content: "华图教育集团版权所有";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 2.4rem;
		overflow: hidden;
		color: #333;
		font-size: .7rem;
		line-height: 2.4rem;
		text-align: center;
	}



	.coreBox {
		width: 17rem;
		margin: auto;
	}

	.banner-box {
		height: 10.25rem;
		background: url(../images/banner-m.png) no-repeat;
		background-size: 100%;
	}

	.banner-box p:nth-child(1),
	.banner-box p:nth-child(2) {
		display: none;
	}

	.box-1 {
		width: 17rem;
		height: 14rem;
		box-shadow: 0rem 0rem 1rem 0rem rgba(218, 218, 218, 0.75);
		position: relative;
		border-radius: .5rem;
	}

	.box-1-btn-1,
	.box-3-btn-1 {
		width: 5rem;
		height: 1rem;
		background-image: linear-gradient(0deg,
			#fc8d3a 0%,
			#ffde00 100%),
			linear-gradient(#f45e22,
			#f45e22);
		background-blend-mode: normal,
			normal;
		color: #fff;
		text-align: center;
		line-height: 1rem;
		border-radius: .5rem;
		position: absolute;
		top: -4%;
		left: 22%;
		font-size: .7rem;
	}

	.box-1-btn-1,
	.box-1-btn-2 {
		cursor: pointer;
	}

	.box-1-btn-2,
	.box-3-btn-2 {
		width: 5rem;
		height: 1rem;
		background-image: linear-gradient(0deg,
			#fc8d3a 0%,
			#ffde00 100%),
			linear-gradient(#f45e22,
			#f45e22);
		background-blend-mode: normal,
			normal;
		color: #333;
		text-align: center;
		line-height: 1rem;
		border-radius: .5rem;
		position: absolute;
		top: -4%;
		left: 54%;
		font-size: .7rem;
	}

	.contentBox {
		font-size: 0.6rem;
		font-weight: 600;
	}

	.box-1 {
		height: 8rem;
	}

	.box-1-right img {
		display: none;
	}

	.box-1-right {
		padding-top: 2%;
	}

	.box-1-left,
	.box-1-right,
	.box-3-left,
	.box-3-right {
		height: 100%;
		width: 13.75rem;
		box-shadow: -4px 3px 46px 0px rgba(218, 218, 218, 0.75);
		background: #fff;
		border-radius: 0.5rem;
	}



	.box-1-left,
	.box-1-right {
		width: 100%;
	}



	.box-1 .info-title,
	.box-3 .info-title {
		display: none;
	}

	.content-p {
		font-size: 0.6rem;
		width: 11.75rem;
		margin: auto;
		line-height: 0.7rem;
		margin-top: 5%;
	}

	.content-p img {
		margin-top: 10%;
	}

	.box-1-left img {
		display: none;
	}

	.box-1-right {
		display: none;
	}

	.box-1-l {
		width: 80%;
		margin-left: 7%;
		margin-top: 10%;
		overflow: hidden;

	}

	.box-1-l p,
	.box-1-r {
		font-size: 0.6rem;
	}

	.box-1-l {
		margin-top: 2%;
	}

	.box-1-r,
	.box-1-l {
		width: 46%;

	}

	.box-1-r,
	.box-1-l {
		float: left;
	}



	.box-2 {
		height: auto;
		box-shadow: -4px 3px 35px 0px rgba(255, 222, 0, 0.75);
		border-radius: 1.25rem;
		background: #ffde00;
		overflow: hidden;
	}

	.box-2-left,
	.box-2-right {
		width: 100%;
	}

	.box-2-left {
		float: none;
		background: transparent;
	}

	.box-2-right {
		background: #ff9908;
		float: none;
		background-image: linear-gradient(72deg, #ffc200 0%, #ffde00 100%);
		padding-bottom: 5%;
		margin-top: 6%;
	}



	.box-2-video {
		width: 12.375rem;
		height: 5.725rem;
		background-color: #84837e;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 8%;
	}

	.box-2-left p {
		font-size: 0.7rem;
		margin-top: 3%;
		text-align: center;
	}

	.video-btn {
		width: 6.475rem;
		height: 1.2rem !important;
		background-image: linear-gradient(90deg,
			#fe9601 0%,
			#ffb400 100%),
			linear-gradient(#fade35,
			#fade35);
		background-blend-mode: normal,
			normal;
		box-shadow: 0rem 0rem 0rem 0rem rgba(252, 231, 131, 0.75);
		margin: auto;
		border-radius: 1rem;
		text-align: center;
		line-height: 1.1rem;
	}


	.box-2-right p {
		color: #333;
		text-align: center;
		margin-top: 0%;
		font-size: .65rem;
		line-height: 1.4rem;
	}

	.video-form {
		margin-left: 5%;
		width: 78%;
		margin-top: 3%;
	}

	.form-box span {
		color: #333;
		display: inline-block;
		text-align: right;
		width: 3.5rem;
	}

	.form-box {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 8%;
	}

	.form-box input {
		width: 8.5rem;
		height: 1.1rem;
		border-radius: 1rem;
		padding-left: 0.5rem;
		font-size: 0.6rem;
	}

	.info-li {
		width: 80%;
		margin: auto;
		margin-top: 5%;
		font-size: 0.6rem;
	}

	.box-4 {
		background: url(../images/box-4.png) no-repeat;
		height: 140px;
		background-size: 100%;
		margin-top: 5%;
		margin-bottom: 5%;
		position: relative;
	}

	.box-3 {
		position: relative;
		height: 16rem;
	}

	.box-3-left,
	.box-3-right {
		width: 100%;
	}

	.box-3-right {
		display: none;
	}

	.box-4 {
		background: url(../images/box-4-m.png) no-repeat;
		width: 17rem;
		height: 4rem;
		background-size: 100%;
	}

	.box-4 span:nth-child(1) {
		display: none;
	}

	.box-4 span:nth-child(2) {
		position: absolute;
		top: 53%;
		right: 34%;
		font-size: 0.9rem;
		color: #fff;
	}


	.box-bottom {
		height: auto;
		width: 100%;
		background: #ffde00;
	}

	.box-5 {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.box-5-icon {
		width: 1.6rem;
		height: 3px;
		background-color: #111317;
	}

	.box-6 {
		background: transparent;
		border-radius: 0.75rem;
		overflow: hidden;
		width: 17rem;
		padding: 2%;
		margin-top: 2%;
	}

	.box-7 {
		display: none;
	}

	.box-6 li {
		float: left;
		background: #ffc000;
		color: #333;
		border-radius: 1.25rem;
		text-align: center;
		margin-bottom: 3%;
		padding: 1px 1.175rem;
		margin-right: 2.9%;
		margin-top: 2%;
	}

	.pricetable {
		width: 100%;
		margin-top: 5%;
	}

	.pricetable th {
		background: #ffa800;
		color: #fff;
	}

	.pricetable tr th:first-child {
		border-top-left-radius: 15px;
	}

	.pricetable tr th:last-child {
		border-top-right-radius: 15px;
	}

	.pricetable tr td:last-child {
		color: red;
	}

	.pricetable th:nth-child(1),
	.pricetable th:nth-child(6) {
		width: 15%;
	}

	.pricetable th:nth-child(2) {
		width: 20%;
	}

	.pricetable th:nth-child(3) {
		width: 30%;
	}

	.pricetable th:nth-child(4),
	.pricetable th:nth-child(5) {
		width: 10%;
	}

	.pricetable td {
		text-align: center;
		background: #fff;
	}



	.pricetable th {
		border-right: 1px solid #FFDE00
	}

	.pricetable td {
		border-right: 1px solid #FFDE00;
		border-bottom: 1px solid #ffde00;
	}

	.box-8 {
		height: 3.75rem;
		padding-bottom: 4%;
		background: url(../images/box-8-m.png) no-repeat;
		background-size: 100%;
		margin-top: 5%;
	}

	.select-box-all {
		width: 9rem;
	}

	.select-box-all select {
		display: inline-block;
		vertical-align: middle;
		height: 1.1rem;
		line-height: 1.1rem;
		background: #fff;
		border: 0;
		box-sizing: border-box;
		border-radius: 0.75rem;
		padding-left: 0.5rem;
		font-size: 0.5rem;
		color: #333;
		float: left;
		width: 45%;
	}

	.video-form .form-box .code-input-btn {
		right: 2.5%;
		height: 1.2rem;
		width: 4rem;

		background-image: linear-gradient(90deg, #fe9601 0%, #ffb400 100%), linear-gradient(#fade35, #fade35);

		border: 1px solid #f5f4f4;
	}

	.info-li p {

		line-height: 1.45rem;
		font-size: 0.65rem;
	}

	.content-box-all {
		background: transparent;
	}
	
	.video-left-btn{
		margin-top: 0.325rem;
	}


.city-title-font{
	font-size: 0.75rem;
	font-weight: 600;
}



}


}