@charset "utf-8";
/* CSS Document */
body { font-family:"Hiragino Sans GB","MicroSoft YaHei",Arial,sans-serif; overflow-x: hidden;color:#333;}
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:#0d0d0d; 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"] {-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;position: relative;}
.hide { display:none;} .onlymob { display:none;}
.pointer { cursor:pointer;}
.ml480 { margin-left:620px; }


/* 通用头部 */
.ht_top {width: 100%;background: #fafafa url(https://www.huatu.com/z/topfooter/images/nav_bg.gif) repeat-x 0 0;line-height: 41px;overflow: hidden;}
.ht_top .zt_top { width: 1070px;height: 41px;margin: 0 auto;}
.ht_top h1 { float:left;}
.ht_top h1 a {float: left;width: 131px;height: 40px;overflow: hidden;text-indent: -100em;background: url(http://www.huatu.com/z/topfooter/images/logo.gif) no-repeat; font-size:12px;}
.ht_top .topnav {float: right; color:#0d0d0d; font-size:12px;}
.ht_top .topnav a {padding:0 8px;}
.ht_top .topnav a:hover { color:#e4393c; text-decoration:underline;}
@keyframes movef{
  0%{
    transform: translateX(-10px);
  }
  100%{
    transform: translateX(10px);

  }
}
@keyframes moves{
  0%{
    transform: translateX(25px);
  }
  100%{
    transform: translateX(-25px);

  }
}
.banner {
  position: relative;
  height:690px;
  color:#fff;
  background: url(../images/ban.jpg) top center no-repeat;
  overflow: hidden;
}
.banner p{
  font-size:44px;
  padding-top:158px;
  padding-bottom: 30px;
}
.banner h2{
  margin-left:-25px;
  text-shadow: 0px 0px 32px rgba(88, 56, 171, 0.61);
   margin-bottom: 30px;
}
.banner span{
  font-size:30px;
  display: block;
  width:324px;
  height:50px;
  line-height: 47px;
  border:1px solid #FAFAFD;
  border-radius: 5px;
  text-align: center;

}
.title{
  font-size:44px;
  padding-bottom: 54px;
  text-align: center;
  margin-bottom: 60px;
  background: url(../images/arr.png) bottom center no-repeat;
}
.lead-wrap{
  padding-top:60px;
  padding-bottom: 70px;
  background: #F2F9FF;
}
.lead-wrap .title{
  margin-bottom: 30px;
}
.lead-wrap p{
  line-height: 30px;
  text-align: center;
  font-size:16px;
}
.area-wrap{
  padding-top:112px;
  padding-bottom: 74px;
  background: #E5F0F6;
  overflow: hidden;
}

.area-wrap li{
  float:left;
  width: 161px;
  height:53px;
  background: -webkit-linear-gradient(45deg, #B330FC, #58ACFA);
  margin:0 5px 24px;
  border-radius: 7px;
  text-align: center;
  font-size:18px;
}
.area-wrap li:hover a{
   background: -webkit-linear-gradient(45deg, #B330FC, #58ACFA);
   color:#fff;
}
.area-wrap li a{
  display: inline-block;
  width:157px;
  height:49px;
  line-height: 49px;
  background: #E5F0F6;
  border-radius: 4px;
  position:relative;
  top:2px;
  margin:0 auto;

}
.area-wrap .form-wrap{
  width: 905px;
  height:477px;
  margin:0 auto;
   border-radius: 4px;
  background-image: -moz-linear-gradient( -176deg, rgb(89,172,250) 0%, rgb(182,45,255) 100%);
  background-image: -webkit-linear-gradient( -176deg, rgb(89,172,250) 0%, rgb(182,45,255) 100%);
  background-image: -ms-linear-gradient( -176deg, rgb(89,172,250) 0%, rgb(182,45,255) 100%);
}
.form-wrap input
{
  width:292px;
  height:50px;
  line-height:50px;
  font-size:16px;
  
}
.form-wrap select
{
  left:2px;
  line-height:50px;
  font-size:16px;
     text-indent: 12px;
    color:#4997d9;
}
.form-wrap input{
  border:none;
  position: relative;
  top:2px;
  left:2px;
}
.form-wrap .btn button{
  background: #5AABFA;
  font-size:24px;
  border:none;
  color:#fff;
}
.form-wrap input{
   text-indent: 12px;
    color:#4997d9;
}
input::-webkit-input-placeholder {
  color:#4997d9;
}
.left-form{
  width:378px;
  height:345px;
  padding-left:38px;
  padding-top: 15px;
  border-radius: 4px;
  background: linear-gradient(90deg,#BB54FF,#9884FC);
  margin-left:93px;
  position: relative;
  top:70px;
  box-sizing: border-box;
}
.left-form .list-div{
  margin-bottom: 12px;
  background: url(../images/ibg.png) no-repeat;
  background-size: 100% 100%;
  width:296px;
  height:54px;
   
}
.form-wrap .btn button{
  width:296px;
  height:54px;
  line-height: 54px;
  cursor: pointer;
}
.left-form .code{
  position: relative;
}
.left-form .code span{
  width:94px;
  height:44px;
  background: #E1E9FF;
  color:#4997d9;
  position: absolute;
  right:3px;
  top: 3px;
  text-align: center;
  line-height: 44px;
}
.form-wrap .right-intr{
  color:#fff;
  padding-top: 120px;
  padding-left:80px ;
}
.form-wrap .right-intr p{
  line-height: 30px;
  font-size: 16px;
}
.form-wrap .right-intr p.next-p{
  margin-bottom: 47px;
}
.form-wrap .right-intr h3{
  font-size:24px;
  margin-bottom: 13px;
  font-weight:normal;
}
.advantage-wrap{
  height: 630px;
  padding-top:105px;
  background: url(../images/bg01.jpg) center no-repeat;
  overflow: hidden;
}
.advantage-wrap .title{
  background: url(../images/warr.png) bottom center no-repeat;
  color:#fff;
}
.advantage-wrap li{
  width:438px;
  height:53px;
  border:1px solid #fff;
  border-radius: 4px;
  text-align: center;
  line-height: 53px;
  font-size:18px;
  color:#fff;
  margin-bottom: 22px;
  cursor: pointer;
  font-weight: 600;
}
.advantage-wrap ul li:nth-child(1){
  margin-left:382px;
  animation: movef 2s linear infinite alternate;
}
.advantage-wrap ul li:nth-child(2){
  margin-left:577px;
  animation: moves 2s linear .5s infinite alternate;
}
.advantage-wrap ul li:nth-child(3){
  margin-left:213px;
  animation: movef 2.5s linear infinite alternate;
}
.advantage-wrap ul li:nth-child(4){
  margin-left:508px;
  animation: moves 2s linear infinite alternate;
}
.advantage-wrap ul li:nth-child(5){
  margin-left:335px;
  animation: movef 1.5s linear infinite alternate;
}
.advantage-wrap ul li:hover{
  background: #fff;
  color:#8745d9;
}
.panel05{
  background: #E5F0F6;
  padding-top: 90px;
  padding-bottom: 104px;
  overflow: hidden;
}

.panel05 .left-box,.panel05 .right-box{
  width:600px;
  box-sizing: border-box;
}
.panel05 .right-box{
  padding-left:18px;
}
.left-list-box,.right-list-box{
  width:270px;
  float:left;
  
}
.left-list-box01,.right-list-box01{
  margin-right:40px;
}
.panel05 .list-box{
  margin-bottom: 35px;
  transition:all .3s; 
  cursor: pointer;
}
.panel05 .list-box:hover{
  transform: scale(1.08);
}
.panel05 .sucess{
  font-size:24px;
  font-weight:bold;
  padding:26px;
   color: #fff;
  background: -webkit-linear-gradient(90deg,#B42FFC,#5AABFA);
  border-radius: 7px 7px 0 0;
}
.panel05 .sucess span{
  position: relative;
  top:10px;
}
.panel05 strong{
  font-size:37px;
}
.panel05 em{
  font-size:18px;
  font-style: normal;
  margin-left:-5px;
}
.panel05 .intr-text{
  width:270px;
  background:#fff;
  font-size:16px;
  color:#8298a6;
  line-height: 34px;
  padding:0 24px;
 /* box-shadow: 0px 0px 30px #DBE8F0;*/
 box-shadow: 0px 0px 4px 0px rgba(92, 141, 168, 0.19);
  border-radius: 0 0 7px 7px;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(211, 228, 242);
  height:218px;
  padding-top:18px;
  box-sizing: border-box;
}

.panel05 dl{
  width: 270px;
  height: 317px;
  position: relative;
}
.panel05 dd img,.panel05 dl dt{
  width: 270px;
  height: 317px;
}
.panel05 dt{
  position: absolute;
  top:0;
  left: 0;
  font-size:16px;
  color:#fff;
  padding:0 35px;
  box-sizing: border-box;
}
.panel05 dl h3{
  padding-top:47px;
  text-align: center;
  font-size:24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #fff;
  margin-bottom: 26px;
}
.panel05 dt p{
  line-height: 34px;
}

.panel05 dl:hover dt{
  background: linear-gradient(90deg,#A63DD2,#4A86C4);
  border-radius: 3px;
  cursor: pointer;
  top:-10px;
   opacity: 0.769;
}

.bottom-list-box>img{
  display: block;
  width:60px;
  margin:0 auto 45px;
  transition: all .3s;
}
.bottom-list-box:hover img{
   transform: translateY(-10px);
}
.mob{
  display: none;
}


 .ewm-box {
  display: none;
  position: absolute;
  left: 0;
  top: 20px;
  width: 378px;
  height: 345px;
  background: url(../images/pic10.jpg) no-repeat right;
}

 .ewm-box .close-img {
  position: absolute;
  right: 5px;
  top: 5px;
  display: block;
  width: 34px;
  height: 34px;
  cursor: pointer;
}

 .ewm-box h4 {
  color: #fff;
  font-size: 18px;
  font-weight: normal;
  line-height: 24px;
  text-align: center;
}

.ewm-box h4 span {
  color: #e4ca4c;
}

#ewmBox {
  width: 140px;
  padding: 10px;
  margin: 12px auto 20px;
  background: #fff;
  border-radius: 10px;
}

#ewmBox img {
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

.ewm-box p {
  font-size: 16px;
  line-height: 20px;
  text-align: center;
}
.jhyBtn {
  width: 120px;
  height: 36px;
  background: #e3c94c;
  cursor: pointer;
  background: linear-gradient(115deg, #e3c94c, #f9e86e, #f9e86e, #e3c94c) repeat-x left /300% 100%;
  text-align: center;
  transition: background-position 0.5s;
  display: block;
  margin: 0 auto;
  border-radius: 36px;
  border: none;
  box-shadow: 0 8px 25px rgba(227, 201, 76, 0.2);
  font-size: 18px;
  line-height: 36px;
}


/* 通用底部 */
.footer { clear:both;text-align: center;padding:90px 0;position: relative;
  background:#CCD5DB; }
.footer p {line-height: 26px; color:#333; font-size:16px;position: relative;z-index: 2;}
.footer p a {color: #333; font-size:16px;}
.footer p span {padding: 0 5px; }



@media only all and (max-width:1080px){
  .onlymob { display:block;}
  html{ font-size:20px; }
  body { font: 0.7rem/1.2rem "Hiragino Sans GB","\5FAE\8F6F\96C5\9ED1","\9ED1\4F53",Arial,sans-serif; width: 18.75rem; margin: 0 auto; overflow-x: hidden;
    background-size: 200% 24rem; }
  html,body{  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  .Width {  width: 96%;  }
  .ml480 { margin-left:0; }
  /* 隐藏元素 */
  .ht_top .topnav a:nth-child(n+2) ,
  .footer p ,
  .pc,
  .onlypc,
  .banner .bg-text div:nth-child(9)
  ,.banner .bg-text div:nth-child(10),
  .ht_top .topnav
  {  display: none;  }
  .mob{
    display: block;
  }

  /* 通用头部 */
  .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 { 
    height:11rem; 
    background: url(../images/mban.jpg) top center no-repeat;
    background-size:100% 100%;
  }
  .banner .Width{
    padding-left:.5rem;
    box-sizing: border-box;
  }
  .banner p {
    font-size: 1.1rem;
    padding-top:2rem;
    padding-bottom: .75rem;
  }
  .banner h2{
    margin-bottom: .5rem;
    margin-left:-.25rem;
  }
  .banner h2 img{
    width:70%;
  }
  .banner span {
    font-size: .9rem;
    width: 8.5rem;
    height:1.25rem;
    line-height: 1.25rem;
   
  }
  .title,.lead-wrap .title{
    font-size:1.25rem;
    padding-bottom: 2.5rem;
    margin-bottom: 1rem;
  }
  .lead-wrap{
    padding:1.5rem 0;
  }
  .lead-wrap p{
    line-height: 1.1rem;
    font-size:.65rem;
    padding:0rem .5%;
  }
  .area-wrap{
    padding:1.5rem 0rem;
  }
  .area-wrap li {
    width:4rem;
    height:1.78rem;
    margin: 0 1.39% .5rem;
    border-radius: 7px;
    font-size: .65rem;
  }
  .area-wrap li a {
      display: inline-block;
      width: 3.8rem;
      height: 1.5rem;
      line-height: 1.5rem;
      top:.13rem;
      border-radius: 4px;
     
  }
  .area-wrap .form-wrap{
    width:100%;
    padding-bottom: 1rem;
    height:auto;
  }
  .left-form {
    width: 16rem;
    height:auto;
    padding-left:.65rem;
    padding-top:1rem;
    padding-bottom: 1rem;
    margin-left: 1rem;
    top:1rem;
    float:none;
  }
  .form-wrap .right-intr{
    padding-top:2rem;
    padding-left:0;
    float:none;
    text-align: center;
  }
  .form-wrap .right-intr p.next-p{
    margin-bottom: 1rem;
  }
  .left-form .list-div,.form-wrap .btn button,
  .form-wrap input{
    width:14.5rem;
    font-size:.7rem;
   
  }
  .form-wrap .btn button{
    font-size:1rem;
  }
  .advantage-wrap{
    height:auto;
    padding:1.5rem 0;
    background-size:cover;
  }
  .advantage-wrap li {
    width: 14rem;
    height: 1.25rem;
    line-height:1.25rem;
    font-size:.65rem;
    margin-bottom: .5rem;
  }
  .advantage-wrap ul li:nth-child(1){
    margin-left:1.9rem;
  }
  .advantage-wrap ul li:nth-child(2){
    margin-left:3.5rem;
  }
  .advantage-wrap ul li:nth-child(3){
    margin-left:1rem;
  }
  .advantage-wrap ul li:nth-child(4){
    margin-left:3rem;
  }
  .advantage-wrap ul li:nth-child(5){
    margin-left:1.5rem;
  }
  .panel05{
    padding:1.5rem 0;
  }
  .panel05 .Width{
    width: 94%;
  }
  .panel05 .left-box, .panel05 .right-box {
    width: 100%;
    margin-bottom: 1.5rem;
  }
  .panel05 .right-box{
    padding-left:0;
  }
  .left-list-box01, .right-list-box01{
    margin-right:.6rem;
  }
  .left-list-box, .right-list-box{
    width:8.5rem;
  }
  .panel05 .intr-text{
    width:8.5rem;
    font-size:.65rem;
    line-height: 1.1rem;
    padding:.5rem;
    height:8rem;
  }
  .panel05 .list-box02 .intr-text{
    height:8rem;
  }
  .panel05 .list-box{
    margin-bottom: 1rem;
  }
  .bottom-list-box>img{
    width:2rem;
    margin-bottom: 1rem;
  }
  .panel05 dd img, .panel05 dl dt{
    width:8.5rem;
    height:10rem;
    
  }
  .panel05 dl dt{
    padding:0 .5rem;
  }
  .panel05 dl h3 {
    padding-top:1rem;
    font-size:1rem;
    margin-bottom:.5rem;
  }
  .panel05 dt p{
    font-size:.65rem;
    line-height: 1.1rem;
  }
  .panel05 .sucess,.panel05 .list-box02 .sucess{
    font-size:.75rem;
    padding: .5rem;
  }
  .panel05 strong{
    font-size:1rem;
  }
  .panel05 .sucess span{
    top:.15rem;
  }
  .panel05 .list-box02{
    top:0;
  }
  .panel05 dl{
    width:8.5rem;
    height:10rem;
  }
  
  
   .ewm-box {
    width: 100%;
    position: initial;
    height: 16rem;
    padding-top: 1rem;
    background-size: cover;
    border-radius: .5rem;
  }

 .ewm-box .close-img {
    width: 1.5rem;
    height: 1.5rem;
  }

 .ewm-box h4 {
    /* font-size: 1rem; */
    line-height: 1.3rem;
  }

 .ewm-box h4 br:nth-child(2) {
    display: none;
  }

  #ewmBox {
    width: 8rem;
    padding: .3rem;
    margin: .5rem auto;
    background: none;
  }

  #ewmBox img {
    width: 6rem;
    height: 6rem;
    padding: .3rem;
    margin: 0 auto .2rem;
    background: #fff;
    border-radius: .25rem;
  }

 .ewm-box p {
    color: #fff;
    font-size: .7rem;
    line-height: 1rem;
  }
  
  
  /* 通用底部 */
  .footer { height:2.1rem; 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; padding:0; overflow:hidden;
    line-height:2.1rem; font-size:0.7rem; text-align: center; }

  .mobfixnav { bottom:.5rem; right:.5rem; }
  .mobfixnav a { width:3rem; height:1.6rem; padding:.7rem 0;
    font-size: .6rem; line-height:.8rem;  }
}