@charset "utf-8";
/* CSS Document */

body {
  background: #f5f8f6 url(../images/hsj01.jpg) no-repeat center 0;
  overflow-x: hidden;
  color: #333;
  font: 18px/36px "Hiragino Sans GB", "MicroSoft YaHei", Arial, sans-serif;
  max-width: 100%;
  margin: 0 auto;
}

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 {
  blur: expression(this.onFocus=this.blur())
}

ul, li {
  list-style: none;
}

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

input {
  outline: 0;
}

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

:focus {
  outline: 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%;
  font-size: 1px;
  line-height: 0;
  visibility: hidden;
  overflow: hidden;
}

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

.pointer {
  cursor: pointer;
}

.btn {
  display: block;
  width: 253px;
  height: 66px;
  background: #3CD2E3;
  border-radius: 66px;
  background: linear-gradient( 90deg, #22B4DE, #3CD2E3, #3CD2E3, #22B4DE) repeat-x left / 300% 100%;
  box-shadow: 0 11px 24px rgba(0, 0, 0, 0.1);
  color: #fff;
  font-size: 24px;
  line-height: 66px;
  text-align: center;
  transition: background-position .5s;
}

.btn:hover {
  background-position: 100% center;
  color: #fff;
}

.hide, .onlymob {
  display: none;
}

/* 通用头部 */

.ht_top {
  width: 100%;
  overflow: hidden;
  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;
}

.banner h3 {
  padding: 132px 0 40px;
  height: 44px;
  color: #fff;
  font-size: 40px;
  font-weight: 400;
  line-height: 44px;
}

.banner h2 {
  height: 144px;
  /*background: url(../images/hsj02.png) no-repeat left;*/
  text-indent: -9999em;
  overflow: hidden;
}

.bfjc {
  background: url(../images/bfjc.png) no-repeat left;
}

.ybj {
  background: url(../images/yjh02.png) no-repeat left;
}

.hgxt {
  background: url(../images/hgxt02.png) no-repeat left;
}

.zhg {
  background: url(../images/zhg.png) no-repeat left;
}

.hsj {
  background: url(../images/hsj02.png) no-repeat left;
}

.swxt {
  background: url(../images/gsj02.png) no-repeat left;
}

.qxj {
  background: url(../images/qxj.png) no-repeat left;
}

.slxt {
  background: url(../images/slxt.png) no-repeat left;
}

.tjj {
  background: url(../images/tjj02.png) no-repeat left;
}

.tlga {
  background: url(../images/tlgaxt02.png) no-repeat left;
}

.wjb {
  background: url(../images/dczd02.png) no-repeat left;
}

.wldxz {
  background: url(../images/wldxz.png) no-repeat left;
}

.xfxt {
  background: url(../images/xfxt.png) no-repeat left;
}

.banner .btn {
  width: 340px;
  height: 64px;
  margin-top: 50px;
  box-shadow: none;
  border-radius: 64px;
  font-size: 32px;
  line-height: 64px;
}

.banner .btn:hover {
  background-position: left center;
}

.nav {
  margin-top: 70px;
  border-radius: 10px;
  overflow: hidden;
}

.nav a {
  display: block;
  float: left;
  height: 58px;
  padding: 0 7.65px;
  border-radius: 0;
  font-size: 20px;
  line-height: 58px;
  transition: all .5s;
  background: #fff;
}

.nav a:hover, .nav a.on {
  background: linear-gradient(90deg, rgb(254, 146, 13), rgb(254, 176, 92), rgb(254, 176, 92), rgb(254, 146, 13)) left center / 300% 100% repeat-x;
  box-shadow: 0 19px 28px rgba(152, 152, 152, 0.15);
  color: #6e5bdd;
}

.title {
  height: 60px;
  font-size: 54px;
  line-height: 60px;
  text-align: center;
}

.box01 {
  margin-top: 160px;
}

.videoBox {
  float: left;
  width: 550px;
  height: 370px;
  padding: 30px;
  margin-top: 85px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.04);
}

.videoBox iframe {
  width: 100%;
  height: 100%;
}

.box01 dl {
  float: right;
  width: 515px;
  margin-top: 100px;
}

.box01 dt {
  height: 24px;
  font-size: 24px;
  line-height: 24px;
  font-weight: 600;
  text-indent: -35px;
}

.box01 dt span {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 11px;
  background: #6e5bdd url(../images/hsj11.png) no-repeat center;
  border-radius: 100%;
  color: #fff;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  text-indent: 0;
  vertical-align: top;
}

.box01 dd {
  margin: 10px 0 10px;
  font-size: 16px;
  line-height: 25px;
}

.box02 {
  padding: 35px 0;
  margin: 80px auto 75px;
  background: #fff;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.06);
}

.box02 p {
  float: left;
  width: 855px;
  margin-left: 30px;
  font-size: 18px;
  line-height: 35px;
  text-align: justify;
}

.box02 p font {
  color: #6e5bdd;
  font-size: 24px;
}

.box02 .btn {
  float: right;
  margin-top: 50px;
  margin-right: 45px;
}

.bg03 {
  background: #a483ea;
  background: linear-gradient( 90deg, #a483ea, #4f45d4) no-repeat center / 2000px 100%;
}

.box03 {
  padding: 80px 0 100px;
  background: url(../images/hsj20.jpg) no-repeat top / 2000px 76px;
}

.box03 .title, .bg06 .title {
  color: #fff;
}

.box03 table {
  margin-top: 80px;
}

.box03 tr:first-child {
  background: #8D6EEB;
  background: linear-gradient( 90deg, #8D6EEB, #5145D4);
}

.box03 th, .box03 td {
  border: 1px solid rgba(114, 33, 217, .45);
  text-align: center;
}

.box03 th {
  height: 68px;
  color: #fff;
  font-weight: 400;
}

.box03 td {
  padding: 20px 0;
  background: #fff;
  line-height: 22px;
}

.box03 td .btn {
  width: 175px;
  height: 50px;
  margin: 0 auto;
  cursor: pointer;
  border-radius: 50px;
  line-height: 50px;
}

.box04 {
  padding-top: 110px;
  background: url(../images/hsj30.jpg) no-repeat top;
}

.des {
  position: relative;
}

.desRight {
  margin: 100px auto;
}

.desRight .bg {
  position: absolute;
  right: -60px;
  top: 5%;
  width: 783px;
  height: 625px;
  background: url(../images/hsj31.png) no-repeat center;
}

.des h4 {
  position: relative;
  height: 40px;
  font-size: 36px;
  line-height: 40px;
}

.des h4:before {
  content: "";
  position: absolute;
  top: -10px;
  width: 60px;
  height: 4px;
  background: #6E5BDD;
}

.desRight dl {
  width: 445px;
}

.des dt {
  margin-top: 10px;
}

.des dd {
  margin: 10px 0 20px;
  font-size: 16px;
  line-height: 28px;
  text-align: justify;
}

.desLeft {
  width: 475px;
  padding-left: 725px;
}

.desLeft .bg {
  position: absolute;
  left: -135px;
  top: 5%;
  width: 755px;
  height: 625px;
  background: url(../images/hsj32.png) no-repeat center;
}

.box05 {
  padding: 50px 0;
  margin: 80px auto 80px;
  background: #fff;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.06);
  line-height: 40px;
}

.box05 p {
  padding-left: 210px;
}

.box05 font {
  color: #6e5bdd;
  font-size: 24px;
  font-weight: 200;
}

.bg06 {
  padding-top: 105px;
  background: url(../images/hsj51.jpg) no-repeat top / 2000px 103%;
}

.box06 .des {
  width: 700px;
  margin: 55px auto 110px;
  color: #fff;
  line-height: 30px;
}

.box06 li {
  float: left;
  width: 270px;
  height: 245px;
  padding: 250px 45px 0;
  margin-right: 60px;
  background: #7d67e0 url(../images/hsj41.png) no-repeat center 40px;
  border-radius: 40px;
  color: #fff;
  line-height: 30px;
  text-align: justify;
  transition: transform .5s;
}

.box06 li:nth-child(2) {
  background-image: url(../images/hsj42.png);
}

.box06 li:nth-child(3) {
  margin-right: 0;
  background-image: url(../images/hsj43.png);
}

.box06 li:hover {
  transform: translateY(-10px);
}

.box07 {
  margin-top: 130px;
}

.box07 .btnbox {
  padding: 100px 0 100px;
}

.box07 a {
  display: block;
  float: left;
  width: 220px;
  margin: 0 25px 25px 0;
  background: #3acfe3;
  border-radius: 66px;
  box-shadow: 0 19px 28px rgba(62, 9, 212, 0.15);
  color: #fff;
  font-size: 30px;
  line-height: 66px;
  text-align: center;
}

.box07 a:nth-child(5n) {
  margin-right: 0;
}

.box07 a:hover, #goTop:hover {
  background: #23B5DE;
  background: linear-gradient( 90deg, #23B5DE, #3BD1E3);
  box-shadow: 0 11px 24px rgba(0, 0, 0, 0.1);
  color: #fff;
}

/* 固定下方预约 */

.bottom-fixed {
  position: fixed;
  width: 100%;
  height: 107px;
  background: #3E3E3E;
  z-index: 9;
  bottom: 0;
  left: 0;
  line-height: 107px;
  box-sizing: border-box;
  padding-top: 30px;
}

.bottom-fixed img {
  left: -90px;
  position: absolute;
  bottom: -80px;
}

.bottom-fixed .Width {
  padding-left: 220px;
  box-sizing: border-box;
  position: relative;
}

.bottom-fixed span {
  font-size: 30px;
  color: rgb(255, 255, 255);
  margin-right: 10px;
}

.bottom-fixed input, .bottom-fixed select {
  display: block;
  float: left;
  border-radius: 6px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.05);
  width: 119px;
  height: 49px;
  border: none;
  text-indent: 14px;
  font-size: 16px;
  margin-right: 5px;
  position: relative;
  color: #333;
}

.bottom-fixed input.ptBn {
  padding: 0;
  cursor: pointer;
  text-indent: 0;
}

.bottom_fixed input#fs {
  position: absolute;
  cursor: pointer;
  right: 0;
  top: 0;
  width: 120px;
  background: rgba(212, 0, 59, 4);
  margin-right: 0;
  z-index: 3;
  color: #fff;
  text-align: center;
  text-indent: 0;
  padding: 0;
}

.bottom_fixed {
  float: left;
  position: relative;
  margin-right: 5px;
  width: 250px;
}

.bottom_fixed input {
  width: 250px;
}

.getCodeBox {
  width: 109px;
}

.bottom-fixed select {
  text-indent: 0;
  padding-left: 14px;
  background-image: url(../images/arrow.png);
  background-position: 90% center;
  background-repeat: no-repeat;
  background-color: #fff;
}

.bottom-fixed button {
  border-radius: 6px;
  background-image: -moz-linear-gradient( -180deg, rgb(248, 32, 68) 0%, rgb(212, 0, 58) 100%);
  background-image: -webkit-linear-gradient( -180deg, rgb(248, 32, 68) 0%, rgb(212, 0, 58) 100%);
  background-image: -ms-linear-gradient( -180deg, rgb(248, 32, 68) 0%, rgb(212, 0, 58) 100%);
  line-height: 49px;
  text-align: center;
  color: #fff;
  width: 148px;
  height: 49px;
  border: none;
  font-size: 20px;
  position: relative;
  top: -5px;
  cursor: pointer;
}

.bottom-fixed button:hover {
  background: linear-gradient(180deg, #F72044, #D4003A);
}

::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #333;
}

:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #333;
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #333;
}

:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #333;
}

/* 通用底部 */

.footer {
  clear: both;
  position: relative;
  padding: 25px 0;
  background: #333;
  margin-bottom: 107px;
  text-align: center;
}

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

.footer p a {
  color: #fff;
  font-size: 14px;
}

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

.codeBox {
  display: none;
  position: fixed;
  right: 30px;
  top: 120px;
  width: 132px;
  padding: 30px 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.05);
}

#closeCode {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
  color: #ddd;
  font-size: 30px;
  line-height: 40px;
  text-align: center;
  vertical-align: middle;
}

#closeCode:hover {
  color: #6e5bdd;
}

.codeBox p {
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  word-break: break-all;
}

.codeBox p a:hover {
  color: #6e5bdd;
}

#pageCode img {
  display: block;
  width: 110px;
  height: 110px;
  margin: 10px auto;
}

#pageCode+p {
  display: none;
}

.codeBox .line {
  display: none;
  width: 100%;
  height: 1px;
  margin: 20px auto;
  background: #ececec;
}

#goTop {
  display: block;
  width: 105px;
  height: 34px;
  margin: 20px auto 0;
  background: #fff;
  border-radius: 34px;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
  font-size: 16px;
  line-height: 34px;
  text-align: center;
}

@media only all and (min-width:2000px) {
  body {
    background-size: 100% 897px;
  }
  .bg03, .bg06 {
    background-size: 100% 100%;
  }
  .box03 {
    background-size: 100% 476px;
  }
  .box04 {
    background-size: 100% 718px;
  }
}

@media only all and ( max-width:1600px) {
  .codeBox {
    right: 5px;
    padding: 20px 10px;
  }
}

@media only all and (max-width:1200px) {
  .onlymob {
    display: block;
  }
  html {
    font-size: 20px;
  }
  body {
    width: 18.75rem;
    background-size: 32rem auto;
    background-position: center 2rem;
    font: 0.7rem/1.2rem "Hiragino Sans GB", "\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53", Arial, sans-serif;
  }
  html, body {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .Width {
    width: 17.5rem;
  }
  .btn {
    width: 8rem;
    height: 1.8rem;
    border-radius: 1.8rem;
    font-size: .8rem;
    line-height: 1.8rem;
  }
  /* 隐藏元素 */
  .ht_top .topnav a:nth-child(n+2), .box03 th:last-child, .box03 tr:nth-child(2) td:last-child, .desRight .bg, .desLeft .bg, .box05 br, .footer p, .codeBox, .pc, .onlypc {
    display: none;
  }
  /* 通用头部 */
  .ht_top {
    line-height: 2.5rem;
    height: 2.5rem;
    background-size: auto 100%;
  }
  .ht_top .zt_top {
    width: 17.5rem;
    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;
    background-size: 100%;
  }
  .ht_top .topnav {
    font-size: 0.8rem;
    text-indent: -1000rem;
  }
  .ht_top .topnav a {
    padding: 0 0 0 0.3rem;
    text-indent: 0;
    float: right;
  }
  .banner h3 {
    padding: 2rem 0 .5rem;
    height: 1rem;
    font-size: .75rem;
    line-height: 1rem;
  }
  .banner h2 {
    height: 2.3rem;
    background-size: auto 100%;
  }
  .banner .btn {
    width: 7rem;
    height: 1.4rem;
    margin-top: .5rem;
    border-radius: 1.4rem;
    font-size: .7rem;
    line-height: 1.4rem;
  }
  .nav {
    margin-top: 2rem;
  }
  .nav a {
    height: 2.2rem;
    padding: 0 .5rem;
    margin: .2rem;
    border-radius: .5rem;
    font-size: .75rem;
    line-height: 2.2rem;
  }
  .title {
    height: 1.4rem;
    font-size: 1.1rem;
    line-height: 1.4rem;
  }
  .box01 {
    margin-top: 1.5rem;
  }
  .videoBox {
    float: none;
    width: 16.5rem;
    height: 11.1rem;
    padding: .5rem;
    margin-top: 1.5rem;
    border-radius: .5rem;
  }
  .box01 dl {
    float: none;
    width: 16rem;
    margin-top: 1rem;
    margin-left: 1.5rem;
  }
  .box01 dt {
    height: 1.2rem;
    font-size: .8rem;
    line-height: 1.2rem;
    text-indent: -1.5rem;
  }
  .box01 dt span {
    width: 1.2rem;
    height: 1.2rem;
    margin-right: .3rem;
    background-size: 100%;
    font-size: .6rem;
    line-height: 1.2rem;
  }
  .box01 dd {
    margin: .2rem 0 .4rem;
    font-size: .7rem;
    line-height: 1rem;
  }
  .box02 {
    padding: 1rem 0;
    margin: 2rem auto 2.5rem;
  }
  .box02 p {
    float: none;
    width: 15.5rem;
    margin: 0 auto;
    font-size: .7rem;
    line-height: 1.4rem;
  }
  .box02 p span {
    font-size: .9rem;
  }
  .box02 .btn {
    float: none;
    margin: .5rem auto 0;
  }
  .bg03, .box03, .box04 {
    background-size: 20rem auto;
  }
  .box03 {
    padding: 5rem 0 2rem;
  }
  .box03 table {
    margin-top: 1.5rem;
  }
  .box03 th, .box03 td {
    font-size: .6rem;
  }
  .box03 th {
    height: 1.8rem;
  }
  .box03 td {
    padding: .3rem .15rem;
    line-height: .8rem;
  }
  .box03>.btn {
    margin: .5rem auto 0;
  }
  .box04 {
    padding-top: 5rem;
  }
  .desRight {
    margin: 2.5rem auto;
  }
  .des h4 {
    height: 1.4rem;
    font-size: 1rem;
    line-height: 1.4rem;
  }
  .des h4:before {
    top: -.25rem;
    width: 1.75rem;
  }
  .desRight dl {
    width: 100%;
  }
  .des dt {
    margin-top: .2rem;
  }
  .des dd {
    margin: .2rem 0 .4rem;
    font-size: .7rem;
    line-height: 1.2rem;
  }
  .desLeft {
    padding-left: 0;
  }
  .desLeft h4 {
    text-align: right;
  }
  .desLeft h4:before {
    right: 0;
  }
  .box05 {
    width: 15.5rem;
    padding: 1rem;
    margin: 2.5rem auto 1rem;
    font-size: .7rem;
    line-height: 1.4rem;
    text-align: justify;
  }
  .box05 p {
    padding-left: 0;
  }
  .box05 span {
    font-size: .9rem;
  }
  .bg06 {
    padding-top: 8rem;
    background-size: 48rem 100%;
  }
  .box06 .des {
    width: 15rem;
    margin: 1rem auto;
    line-height: 1rem;
    text-align: center;
  }
  .box06 li {
    float: none;
    width: 11.5rem;
    height: auto;
    padding: .5rem .5rem .5rem 5.5rem;
    margin: 0 auto .5rem;
    background-size: 4.5rem auto;
    background-position: .5rem center;
    border-radius: .5rem;
    font-size: .65rem;
    line-height: 1rem;
  }
  .box06 li:nth-child(2) {
    padding: .5rem 5.5rem .5rem .5rem;
    background-position: 12.5rem center;
  }
  .box06 li:hover {
    transform: translateX(-.25rem);
  }
  .box07 {
    margin-top: 2rem;
  }
  .box07 .btnbox {
    padding: 1.5rem 0;
  }
  .box07 a {
    width: 4rem;
    height: 1.8rem;
    margin: 0 .5rem .5rem 0;
    border-radius: 1.8rem;
    font-size: .7rem;
    line-height: 1.8rem;
  }
  .box07 a:nth-child(5n) {
    margin-right: .5rem;
  }
  .box07 a:nth-child(4n) {
    margin-right: 0;
  }
  /* 通用底部 */
  .footer {
    height: 2.1rem;
    margin-bottom: 4.5rem;
    padding: 0;
    overflow: hidden;
    position: relative;
  }
  .footer p {
    display: none;
  }
  .footer:before {
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    content: "华图教育集团版权所有";
    width: 100%;
    height: 2.1rem;
    overflow: hidden;
    line-height: 2.1rem;
    font-size: 0.7rem;
    text-align: center;
  }
  .bottom-fixed .Width {
    padding-left: 0;
  }
  .bottom-fixed {
    line-height: 1;
    height: 4.5rem;
    text-align: center;
    padding-top: .1rem;
  }
  .bottom-fixed span {
    font-size: .7rem;
    display: block;
    width: 80%;
    line-height: 2.5rem;
    margin: 0 auto;
    text-align: center;
  }
  .bottom-fixed input, .bottom-fixed select, .bottom-fixed button {
    width: 4rem;
    height: 1.5rem;
    border-radius: 3px;
    font-size: .6rem;
    text-indent: 3px;
    margin: .2rem;
    top: 0;
    padding-left: .2rem;
    line-height: 1.5rem;
    margin-bottom: .5rem;
  }
  .bottom-fixed select {
    background-size: .7rem;
  }
  .bottom_fixed input#fs {
    position: absolute;
    cursor: pointer;
    right: 0;
    margin: 0;
    top: 0;
    width: 3.5rem;
    background: rgba(212, 0, 59.4);
    z-index: 3;
    color: #fff;
    text-align: center;
  }
  .bottom_fixed {
    float: left;
    position: relative;
    padding: 0;
    margin: .2rem;
    height: 1.5rem;
    width: 8rem;
  }
  .bottom_fixed input {
    margin: 0;
    box-sizing: border-box;
    width: 8rem;
  }
  .bottom-fixed img {
    display: none;
  }
}

/*通用移动端结束*/

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2) {
  /* 兼容iphone4/4s */
}

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2) {
  /* 兼容iphone5 */
}

@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2) {
  /* 兼容iphone6 */
}

@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2) {
  /* 兼容iphone6 Plus */
}