@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::focus-inner {
	padding: 0;
	border: 0;
}


input::-webkit-input-placeholder {
	color: #5a5a5a;
	font-size: 18px;
}

input::-moz-placeholder {
	color: #5a5a5a;
	font-size: 18px;
}

input:-moz-placeholder {
	color: #5a5a5a;
	font-size: 18px;
}

input:-ms-input-placeholder {
	color: #5a5a5a;
	font-size: 18px;
}


.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; }
.hide , .onlymob { display: none; } */

.mobile-box {
	display: none;
}

/* 通用头部 */
.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: #333;
	text-align: center;
}

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

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

.footer p a {
	color: #fff;
}

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

body {
	background: #fff;
}

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

.teacherBox {
	width: 100%;
	height: 100%;
	background: #fff;
}

.bannerbox {
	width: 100%;
	height: 900px;
	position: relative;
	/* background: url(../images/banner.png) no-repeat center; */
	margin-bottom: 23%;
}

.bannerImg {
	width: 2000px;
	height: 900px;
}

.time-box {
	position: absolute;
	top: 47%;
	left: 35%;
	/* width: 420px;
	height: 270px; */
	width: 29.6%;
	height: 13.5%;
}

.time-title {
	margin-top: 9%;
	font-size: 30px;
	text-align: center;

}

.title-left {
	color: #8c7f93;
}

.title-right {
	color: #ffe403;
}

.time-bottom {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 7%;

}

.bottom-titile {
	font-size: 36px;
	color: #ffffff;
	margin-right: 18px;
}

.img-box-time {
	height: 102px;
	width: 85px;
	background: url(../images/banner1.png) no-repeat center;
	text-align: center;
	line-height: 102px;
	font-size: 80px;
	color: #413b44;
	margin-right: 8px;
}

.time-title-box {
	width: 1100px;
	height: 306px;
	background: url(../images/banner2.png) no-repeat center;
	position: absolute;
	bottom: -25%;
	left: 50%;
	margin-left: -550px;
	z-index: 2;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 40px;
	box-shadow: 0px 0px 40px 0px rgba(37, 0, 79, 0.2);
	border-radius: 25px;

}

.banner-img-box {
	position: absolute;
	bottom: -25%;
	left: 48%;
	margin-left: -500px;
	width: 1060px;
	height: 326px;
	z-index: 1;
	background: url(../images/banner3.png) no-repeat center;
}


.span-title {
	color: #782cfe;
	font-weight: 600;
}

.p-title-4 {
	font-size: 48px;
	color: #782cfe;
	font-weight: 700;
	margin-top: 22px;
}

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

.consult-img {
	width: 1100px;
	height: 399px;
	background: url(../images/zixun.jpg) no-repeat center;
	border-radius: 25px;
	box-shadow: 0px 0px 40px 0px rgba(37, 0, 79, 0.2);
	position: relative;
}


.right-jiao {
	position: absolute;
	right: -17px;
	top: -5%;
	z-index: 2;
	width: 176px;
	height: 148px;
}

.consult-left {
	float: left;
	width: 45%;
	padding-left: 5%;
}

.form-phone {
	height: 100px;
}

.consult-title-p {
	font-size: 26px;
	color: #5a5a5a;
	margin-top: 5%;
	margin-bottom: 7%;
}

.tip {
	color: #ec6060;
	font-size: 18px;
	margin-left: 20px;
}

.consult-title-p span {
	color: #782cfe;
}

.form-phone {
	height: 100px;
}

.form-phone input {
	/* width: 460px; */
	width: 96%;
	height: 57px;
	border: 1px solid #f7f7f7;
	background: #F7F7F7;
	padding-left: 20px;
	border-radius: 10px;
}

.form-code {
	display: flex;
	justify-content: space-between;
}

.form-code input {
	width: 220px;
	height: 62px;
	border: 1px solid #f7f7f7;
	background: #F7F7F7;
	border-radius: 10px;

}

#PhoneCode {
	padding-left: 20px;
}

.fs {
	font-size: 18px;
}

.form-btn {
	width: 460px;
	height: 70px;
	background-image: linear-gradient(90deg, #e45771 0%, #fdaa4a 100%), linear-gradient(#ffffff, #ffffff);
	background-blend-mode: normal, normal;
	box-shadow: 0px 0px 15px 0px rgba(199, 0, 0, 0.35);
	border-radius: 35px;
	border: 1px solid #e4e1e1;
	font-size: 20px;
	color: #fff;
	margin-top: 25px;
}

.consult-right {
	float: right;
	color: #fff;
	text-align: center;
	width: 49%;
}


.consult-right p:nth-child(1) {
	font-size: 24px;
	line-height: 60px;
	margin-bottom: 9%;
	margin-top: 3%;
}

.consult-right p:nth-child(2) {
	font-size: 60px;
	line-height: 56px;
	margin-bottom: 6%;
}

.consult-right ul li {
	width: 100%;
	display: flex;
	/* justify-content: center; */
	align-items: center;
	padding-left: 15%;
}

.consult-right ul li img {
	margin-right: 15px;
}

.consult-right ul li span:nth-child(2) {
	margin-right: 20px;
}

.welfare-box {
	display: flex;
	justify-content: center;
	height: 270px;
	margin-top: 5%;
	text-align: center;
}

.all-welfare {
	width: 525px;
	height: 267px;
	color: #fff;
	position: relative;

}

.welfare-left {
	background: url(../images/title-left.png) no-repeat center;
	margin-right: 50px;
}

.welfare-right {
	background: url(../images/title-right.png) no-repeat center;
}

.welfare-left p:nth-child(1),
.welfare-right p:nth-child(1) {
	font-size: 30px;
	position: absolute;
	top: 3%;
	left: 25%;
}

.welfare-left p:nth-child(2),
.welfare-right p:nth-child(2) {
	font-size: 26px;
	position: absolute;
	top: 33%;
	left: 25%;
}

.welfare-left p:nth-child(3),
.welfare-right p:nth-child(3) {
	font-size: 70px;
	position: absolute;
	top: 59%;
	left: 17%;
}

.head-box {
	margin-top: 4%;
	margin-bottom: 2%;
}

.all-title-box {
	width: 475px;
	height: 99px;
	position: relative;
	text-align: center;
	font-size: 42px;
	line-height: 99px;
	color: #782cfe;
}

.head-l {
	position: absolute;
	top: 0;
	left: 0;
}

.head-r {
	position: absolute;
	bottom: 0;
	right: 0;
}


.material-box ul li {
	width: 340px;
	height: 463px;
	background-color: #ffffff;
	box-shadow: 0px 0px 40px 0px rgba(37, 0, 79, 0.2);
	border-radius: 25px;
	text-align: center;
	float: left;
	margin-left: 40px;
}

.img-center-box {
	display: inline-block;
}

.material-top {
	width: 280px;
	height: 260px;
	background: url(../images/li-back.png)no-repeat center;
	margin-top: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.material-price span:nth-child(1) {
	font-size: 18px;
	color: #5a5a5a;
	text-decoration: line-through;
}

.material-price {
	margin-top: 30px;
	margin-bottom: 30px;
}

.material-price span:nth-child(2) {
	font-size: 24px;
	color: #782cfe;
	margin-left: 10px;
	font-weight: 600;
}

.material-btn {
	width: 280px;
	height: 50px;
	background-image: linear-gradient(90deg,
		#e45771 0%,
		#fdaa4a 100%);
	box-shadow: 0px 0px 10px 0px rgba(199, 0, 0, 0.35);
	border-radius: 25px;
	display: inline-block;
	line-height: 50px;
	font-size: 18px;
	color: #fff;
}

.videoBox {
	margin-top: 4%;
	margin-bottom: 3%;
}

.video-box {
	width: 1100px;
	height: 426px;
	background-color: #ffffff;
	box-shadow: 0px 0px 40px 0px rgba(37, 0, 79, 0.2);
	border-radius: 25px;
	margin-top: 8%;
	margin-bottom: 6%;
	position: relative;
}

.video-left {
	width: 685px;
	height: 600px;
	background: url(../images/video.png) no-repeat center;
	position: absolute;
	top: -24%;
	left: -3%;
}

.video-left P:nth-child(1) {
	position: absolute;
	top: 11%;
	font-size: 36px;
	color: #ffe405;
	left: 26%;
}

.video-left P:nth-child(2) {
	position: absolute;
	bottom: 29%;
	font-size: 30px;
	color: #fff;
	left: 22%;
}

.video-right {
	float: right;
	margin-top: 3%;
}

.video-info {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 473px;
	height: 60px;
}

.video-info-left {
	margin-right: 10px;
}

.video-info-left img {
	display: inherit;
}

.video-info-right {
	width: 350px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.info-box {
	text-align: center;
}

.info-box p:nth-child(1),
.info-box p:nth-child(2) {
	font-size: 24px;
	line-height: 54px;
}

.info-box p:nth-child(3) {
	font-size: 36px;
	color: #782cfe;
	font-weight: 600;
	line-height: 66px;
}

.city-box {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 4%;
}

.city_list {
	width: 87.5%;
}

.city-box ul li {
	width: 140px;
	height: 56px;
	line-height: 56px;
	float: left;
	/* margin: 20px; */
	font-size: 20px;
	background-color: #fff;
	border-radius: 10px;
	border: solid 1px #f0f0f2;
	text-align: center;
	margin-right: 20px;
	margin-bottom: 20px;
}


.city-box ul li:hover {
	cursor: pointer;
	background-image: linear-gradient(90deg,
		#e45771 0%,
		#fdaa4a 100%),
		linear-gradient(#ffff00,
		#ffff00);
	background-blend-mode: normal,
		normal;
	box-shadow: 0px 0px 10px 0px rgba(199, 0, 0, 0.35);
}

.city-box ul li:hover a {
	color: #fff;
}

.endBox {
	margin-top: 2%;
	padding-bottom: 4%;
}

.end-box {
	width: 1100px;
	height: 290px;
	background-color: #ffffff;
	box-shadow: 0px 0px 40px 0px rgba(37, 0, 79, 0.2);
	border-radius: 25px;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.end-box li {
	height: 210px;
	width: 320px;
	background: #ebddfc;
	border-radius: 20px;
}

@media (min-width:500px) and (max-width: 800px) {

	.welfare-left p:nth-child(1),
	.welfare-right p:nth-child(1) {
		font-size: 0.75rem;
		position: absolute;
		left: 25%;
		top: 0%;
	}
}

@@media (min-width: 801px) and (max-width:1199px) {

	.welfare-left p:nth-child(1),
	.welfare-right p:nth-child(1) {
		font-size: 0.75rem;
		position: absolute;
		left: 25%;
		top: 5%;
	}
}

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

	html {
		font-size: 20px;
	}

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

	/* 隐藏元素 */
	.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: #fff;
		font-size: .7rem;
		line-height: 2.4rem;
		text-align: center;
	}




	input::-webkit-input-placeholder {
		color: #5a5a5a;
		font-size: 0.6rem;
	}

	input::-moz-placeholder {
		color: #5a5a5a;
		font-size: 0.6rem;
	}

	input:-moz-placeholder {
		color: #5a5a5a;
		font-size: 0.6rem;
	}

	input:-ms-input-placeholder {
		color: #5a5a5a;
		font-size: 0.6rem;
	}

	.bannerbox {
		height: 20.5rem;
		margin-bottom: 2%;
	}

	.bannerImg {
		width: 18.75rem;
		height: 13rem;
	}

	.time-box {
		top: 24%;
	}

	.time-title {
		font-size: 0.6rem;
		line-height: 0.7rem;
		margin-top: 24%;
	}

	.bottom-titile {
		font-size: 0.6rem;
		margin-right: 0.45rem;
	}

	.img-box-time {
		height: 1.55rem;
		width: 1.125rem;
		line-height: 1.55rem;
		font-size: 1rem;
		margin-right: 0.2rem;
	}

	.time-title-box {
		width: 16rem;
		height: 7.65rem;
		margin-left: -8rem;
		bottom: 6%;
		left: 50%;
		line-height: 1rem;
		box-shadow: 0rem 0rem 1rem 0rem rgba(37, 0, 79, 0.2);
		border-radius: 0.625rem;
		font-size: .6rem;
	}

	.banner-img-box {
		width: 16rem;
		height: 8.15rem;
		bottom: 6%;
		left: 50%;
		margin-left: -8rem;
		border-radius: .7rem;
	}

	.p-title-4 {
		font-size: 1.2rem;
		margin-top: 0.55rem;
	}

	.consultBox {
		display: none;
	}

	.mobile-box {
		display: block;
		height: 20rem;
		width: 14rem;
		margin: auto;
	}

	.mobile-consult-left {
		width: 14rem;
		height: 9rem;
		border-radius: .3rem;
		font-size: .6rem;
		text-align: center;
		background-color: #fff;
		box-shadow: 0rem 0rem 1rem 0rem rgba(37, 0, 79, 0.2);
		margin-bottom: 10%;
	}

	.mobile-form-phone input {
		width: 70%;
		height: 1.4rem;
		padding-left: 0.5rem;
		border-radius: 0.25rem;
		border: 1px solid #f7f7f7;
		background: #F7F7F7;

	}


	.mobile-form-code input {
		width: 4.6rem;
		height: 1.4rem;
		border: 1px solid #f7f7f7;
		background: #F7F7F7;
		border-radius: 0.25rem;
		font-size: .65rem;
	}

	.mobile-form-code input:nth-child(1) {
		padding-left: 0.5rem;
	}


	.mobile-form-btn {
		width: 9rem;
		height: 1.5rem;
		background-image: linear-gradient(90deg,
			#e45771 0%,
			#fdaa4a 100%),
			linear-gradient(#ffffff,
			#ffffff);
		background-blend-mode: normal,
			normal;
		box-shadow: 0rem 0rem 0rem 0rem rgba(199, 0, 0, 0.35);
		border-radius: 1rem;
		border: 1px solid #f7f7f7;
		color: #fff;
		font-size: .7rem;
		margin-top: 2%;
	}

	.mobile-consult-right {
		width: 14rem;
		height: 10rem;
		background-image: linear-gradient(135deg, #a986f6 0%, #9e67ff 100%), linear-gradient(#ffffff, #ffffff);
		background-blend-mode: normal, normal;
		border-radius: 1rem;
		text-align: center;
		color: #fff;
	}

	.mobile-consult-title-p {
		font-size: .6rem;
		color: #5a5a5a;
		margin-bottom: 3%;
		padding-top: 3%;
	}

	.mobile-consult-title-p span {
		color: #782cfe;
	}

	.mobile-form-phone {
		height: 2rem;
	}

	.mobile-consult-right p:nth-child(1) {
		font-size: 0.6rem;
		line-height: 1.5rem;
		margin-bottom: 6%;
		padding-top: 3%;
	}

	.mobile-consult-right p:nth-child(2) {
		font-size: 1.5rem;
		line-height: 1.4rem;
		margin-bottom: 6%;
	}

	.mobile-consult-right ul li {
		display: flex;
		align-items: center;
		font-size: 0.6rem;
		line-height: 2rem;
		padding-left: 6%;
	}

	.mobile-consult-right ul li img {
		margin-right: 0.375rem;
	}

	.mobile-consult-right ul li span:nth-child(2) {
		margin-right: 0.5rem;
	}



	.welfare-box {
		height: 13.75rem;
		display: block;
		margin: auto;
		width: 14rem;
		margin-top: 7%;
	}

	.all-welfare {
		width: 14rem;
		height: 7rem;
	}

	.welfare-left {
		background: url(../images/title-left.png) no-repeat center;
		margin-right: 1.25rem;
		background-size: 100%;
	}

	.welfare-right {
		background: url(../images/title-right.png) no-repeat center;
		background-size: 100%;
		margin-top: 5%;
	}

	.welfare-left p:nth-child(1),
	.welfare-right p:nth-child(1) {
		font-size: 0.75rem;
		top: 1%;

	}

	.welfare-left p:nth-child(2),
	.welfare-right p:nth-child(2) {
		font-size: 0.65rem;

	}

	.welfare-left p:nth-child(3),
	.welfare-right p:nth-child(3) {
		font-size: 1.75rem;
	}

	.all-title-box {
		width: 11.875rem;
		height: 2.475rem;
		font-size: 1.05rem;
		line-height: 2.475rem;
		margin-top: 3%;
		margin-bottom: 3%;
	}

	.all-title-box p {
		font-size: .8rem;
	}


	.material-box ul li {
		width: 7.5rem;
		height: 12rem;
		box-shadow: 0rem 0rem 1rem 0rem rgba(37, 0, 79, 0.2);
		border-radius: 0.625rem;
		margin-left: 1rem;
		margin-bottom: .5rem;
	}

	.material-top {
		width: 6rem;
		height: 6.5rem;
		background: url(../images/li-back.png)no-repeat center;
		margin-top: 0.75rem;
	}

	.material-top img {
		width: 3rem;
		height: 4rem;
	}

	.material-price span:nth-child(1) {
		font-size: 0.45rem;
		text-decoration: line-through;
	}

	.material-price {
		margin-top: 0.1rem;
		margin-bottom: 0.1rem;
	}

	.material-price span:nth-child(2) {
		font-size: 0.6rem;
		margin-left: 0.25rem;

	}

	.material-btn {
		width: 6rem;
		height: 1.25rem;
		background-image: linear-gradient(90deg,
			#e45771 0%,
			#fdaa4a 100%);
		box-shadow: 0rem 0rem 0.25rem 0rem rgba(199, 0, 0, 0.35);
		border-radius: 0.625rem;
		display: inline-block;
		line-height: 1.25rem;
		font-size: 0.45rem;
		color: #fff;
	}


	.video-box {
		width: 16.5rem;
		height: 19.65rem;
		background-color: #fff;
		box-shadow: 0rem 0rem 1rem 0rem rgba(37, 0, 79, 0.2);
		border-radius: 0.625rem;
	}

	.video-left {
		width: 11rem;
		height: 10rem;
		background: url(../images/video.png) no-repeat center;
		background-size: 100%;
		position: absolute;
		top: 3%;
		left: 17%;
	}

	.video-left P:nth-child(1) {
		position: absolute;
		top: 7%;
		font-size: 0.6rem;
		left: 25%;
	}

	.video-left P:nth-child(2) {
		position: absolute;
		bottom: 34%;
		font-size: 0.65rem;
		left: 14%;
	}

	.video-right {
		float: none;
		margin-top: 3%;
		position: absolute;
		top: 56%;
		left: 12%;
	}

	.video-info {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 13rem;
		height: 1.1rem;
	}

	.video-info-left {
		margin-right: 0.25rem;
	}

	.video-info-left img {
		display: inherit;
		width: .7rem;
		height: .7rem;
	}

	.video-info-right {
		width: 11.75rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: .7rem;
	}

	.info-box {
		width: 15rem;
		margin: auto;
	}

	.info-box p:nth-child(1),
	.info-box p:nth-child(2) {
		font-size: 0.6rem;
		line-height: 1.35rem;
	}

	.info-box p:nth-child(3) {
		font-size: 0.9rem;

		line-height: 1.65rem;
	}

	.city-box {
		display: flex;
		justify-content: center;
		width: 17rem;
		margin: auto;
		margin-top: 1rem;
	}

	.city_list {
		width: 85.5%;
	}

	.city-box ul li {
		width: 3rem;
		height: 1.2rem;
		line-height: 1.4rem;
		font-size: 0.6rem;
		border-radius: 0.25rem;
		margin-right: 0.5rem;
		margin-bottom: 0.5rem;
	}

	.endBox {
		margin-top: 2%;
		padding-bottom: 4%;
	}

	.end-box {
		width: 15rem;
		height: 6.25rem;
		box-shadow: 0rem 0rem 1rem 0rem rgba(37, 0, 79, 0.2);
		border-radius: 0.625rem;

	}

	.end-box li {
		height: 3.25rem;
		width: 4rem;
		border-radius: 0.5rem;
	}


}