@charset "gb2312";
/* CSS Document */
body { font:12px/24px "Hiragino Sans GB","MicroSoft YaHei",Arial,sans-serif; background:#fbfbfb; overflow-x: hidden;}
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; color:#333; }
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"] {-webkit-appearance: none;}
:focus { outline: none; }
.mr0 { margin-right: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;}
.hide { display:none;} .onlymob { display:none;}
.pointer { cursor:pointer;}

/* 通用头部 */
.ht_top {width: 100%;background: #fafafa url(../images/nav_bg.gif) repeat-x 0 0;line-height: 41px;overflow: hidden;}
.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;text-indent: -100em;background: url(../images/logo.gif) no-repeat; font-size:12px;}
.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;}

.boxbg01 { position: relative; }
.boxbg01 .icon01 { position: absolute; left:50%; top:-420px; width:1083px; height:832px; margin-left:-1560px; z-index: -1;
  background:url(../images/banner01.png) no-repeat right bottom; }
.boxbg01 .icon02 { position: absolute; left:50%; top:-40px; width:1037px; height:551px; z-index: -1;
  background:url(../images/banner02.png) no-repeat left bottom; }
.boxbg01 .title { padding-top:152px; height: 305px; }
.boxbg01  .t01 { display:block; line-height: 100px; position: relative;
  color:#00c97b; font-size: 90px; font-weight: 800; }
.boxbg01 .t01:before{ content: attr(text); position: absolute; z-index:1;
  color:#04bcb1;
  -webkit-mask:linear-gradient(to right, #00c97b, transparent ); }
.boxbg01 .t02 { display:block; line-height: 60px;
  color:#828282; font-size:40px; font-weight:400; }

.box01 li { float:left; width: 290px; height: 328px; padding:30px 30px 0; margin-right:75px ;
  background:#fff; border-radius: 15px; box-shadow: 0 0 21px rgba(5, 0, 0, 0.1);
  font-size:18px ; line-height: 30px; text-align: justify;
  transition:transform .5s ease-out; }
.box01 li:hover { transform: translateY(-5px); }
.box01 li.mr0 { margin-right: 0; }
.box01 li img { display: block; width: 240px; height: 100px; margin-bottom: 30px; }

.boxbg02 { position: relative; padding:70px 0; background:url(../images/bg.jpg) no-repeat center 110px;  }
.mainTit { width:320px; height:91px; margin:0 auto 55px;
  background:url(../images/titlebg.png) no-repeat right bottom;
  font-size: 44px; line-height:91px; text-align: center;  }
.box02 { margin-bottom:60px; background:url(../images/pic10.png) no-repeat 100px 37px; }
.box02 li { float:left; width:88px; margin-right:97px;
  font-size:20px; text-align: center; line-height:20px; }
.box02 li.mr0 { margin-right: 0;}
.box02 li i { display:block; width:74px; height: 74px; margin-bottom: 15px;
  border-width: 7px; border-style: solid; border-radius:100%;
  transition:transform .3s ease-out; }
.box02 li .icon01 { background:#8f9cfd url(../images/pic11.png) no-repeat center; border-color:#c5cbfc; }
.box02 li .icon02 { background:#8fb7fd url(../images/pic12.png) no-repeat center; border-color:#c5d9fc; }
.box02 li .icon03 { background:#8fd0fd url(../images/pic13.png) no-repeat center; border-color:#c5e5fc; }
.box02 li .icon04 { background:#77defc url(../images/pic14.png) no-repeat center; border-color:#b9ecfc; }
.box02 li .icon05 { background:#8ae1d9 url(../images/pic15.png) no-repeat center; border-color:#c2eeea; }
.box02 li .icon06 { background:#b3f1cc url(../images/pic16.png) no-repeat center; border-color:#d7f6e3; }
.box02 li .icon07 { background:#ffe69b url(../images/pic17.png) no-repeat center; border-color:#fdf0cb; }
.box02 em { font-style: normal; font-size: 16px; line-height: 20px; }
.box02 li:hover i { transform:scale(1.05); }

.box03 { position: relative; margin-bottom:60px; }
.box03 .icon { position: absolute; left:50%; top:50%; width:130px; height:130px; margin-left:-65px; margin-top: -65px;
  background:url(../images/pic20.png) no-repeat right bottom; }
.box03 .con { float:left; width:460px; height: 325px;
  box-shadow: 0 0 21px rgba(5, 0, 0, 0.1); }
.box03 .leftcon { padding:0 100px 0 40px;
  background:#fff url(../images/pic21.png) no-repeat 512px 260px; border-radius: 15px 0 0 15px; }
.box03 .rightcon { padding:0 40px 0 100px;
  background:#fff url(../images/pic22.png) no-repeat 518px 25px; border-radius: 0 15px 15px 0; }
.box03 h4 { padding-top:20px; font-size: 34px; font-weight: 400; line-height:70px; }
.box03 .leftcon h4 { color:#f4c610; }
.box03 .rightcon h4 { color:#3ec9a6; }
.box03 p { font-size:18px; line-height: 30px; }

.box04 { position: relative; height: 400px; margin-bottom:60px; overflow: hidden;
  background:#fff; box-shadow: 0 0 21px rgba(5, 0, 0, 0.1); border-radius: 15px; }
.box04 h4 { height:60px; cursor: pointer;
  background:#e3e3e3;
  color:#999; font-size: 22px; font-weight: 400; line-height: 60px; text-align: center; }
.box04 h4 span { display: block; float: left; width: 33.33333333%; height: 60px;
  transition:all .3s ease-out; }
.box04 h4 span:hover,
.box04 h4 span.on { background:#3ad8c2; color:#fff;
  background: linear-gradient( 28deg, rgb(58,216,194) 0%, rgb(94,237,158) 100%); }
.box04 .con { padding:40px 40px 0;
  font-size: 18px; line-height: 30px; }
.box05 { position: relative; width:1120px; padding:40px; margin-bottom:60px; overflow: hidden;
  background:#fff; box-shadow: 0 0 21px rgba(5, 0, 0, 0.1); border-radius: 15px;
  font-size: 18px; line-height: 30px; }

.box06 li { float:left; width: 350px; height: 220px; margin-right:75px;
  background:url(../images/pic31.png) no-repeat center; border-radius: 15px;
  font-size: 34px; line-height: 44px; text-align: center;
  transition:transform .5s ease-out; }
.box06 li:hover { transform: translateY(-5px); }
.box06 .list02 { background:url(../images/pic32.png) no-repeat center;}
.box06 .list03 { margin-right: 0; background:url(../images/pic33.png) no-repeat center; }
.box06 li a { display:block; width: 100%; height: 88px; padding:66px 0; color: #fff; }

.box07 { margin-top:55px; }
.box07 h4 { font-size: 24px; font-weight: 400; text-align: center; line-height: 85px; }
.box07 .pic { width:274px; height: 274px; padding:15px; margin:0 auto;
  background:url(../images/pic34.png) no-repeat center; }
.box07 .pic img { display: block; width: 244px; height: 244px; padding:15px;
  background: #fff; box-shadow: 0 0 21px rgba(5, 0, 0, 0.1); }

  /* 通用底部 */
.footer { clear:both;text-align: center;padding:30px 0;position: relative;
  background:#333; }
.footer p {line-height: 26px; color:#fff; font-size:14px;position: relative;z-index: 2;}
.footer p a {color: #fff; font-size:14px;}
.footer p span {padding-bottom: 0px; padding-left: 5px; padding-right: 5px; padding-top: 0px}

@media (min-width:2000px) {
  .boxbg02 { background-size: 100% 90%; }
}

@media only all and (max-width:1200px){
  .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; }
  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 { 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(../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; }

  .boxbg01 { width:18.75rem; overflow: hidden; }
  .boxbg01 .icon01 { top:-3rem; width:10rem; height:6rem; margin-left:-17rem;
    background-size:contain; }
  .boxbg01 .icon02 { left:10.5rem; top:-.5rem; width:15rem; height:8rem;
    background-size:contain; }
  .boxbg01 .title { padding-top:2rem; height:5rem; }
  .boxbg01  .t01 { line-height: 1.6rem; font-size:1.4rem;}
  .boxbg01 .t02 { line-height:1.2rem; font-size:.8rem; }

  .box01 li { float:none; width:16rem; height:auto; padding:.75rem; margin:0 auto .5rem;
    font-size:.7rem; line-height:1.2rem;  }
  .box01 li.mr0 { margin-right:auto; }
  .box01 li img { float:left; width:auto; height:2.2rem; margin:0 .2rem 0 0; }

  .boxbg02 { padding:1.5rem 0; background-size: 150%;  }
  .mainTit { width:10rem; height:3rem; margin-bottom:1rem;
    background-size:auto 100%;
    font-size:1.5rem; line-height:2.7rem; }

  .box02 { margin-bottom:1.5rem; background:none; }
  .box02 li { width:2.24rem; margin-right:.3rem;
    font-size:.6rem; line-height:.7rem; }
  .box02 li.mr0 { margin-right: 0;}
  .box02 li i { width:1.84rem; height:1.84rem; margin-bottom:.3rem;
    border-width:.2rem; }
  .box02 li .icon01 ,
  .box02 li .icon02 ,
  .box02 li .icon03 ,
  .box02 li .icon04 ,
  .box02 li .icon05 ,
  .box02 li .icon06 ,
  .box02 li .icon07 { background-size:.8rem auto; }
  .box02 em { font-size:.55rem; line-height:.7rem; }

  .box03 { margin-bottom:1.5rem; }
  .box03 .icon { width:4rem; height:4rem; margin-left:-2rem; margin-top: -2rem;
    background-size:contain; }
  .box03 .con { width:16.5rem; height:8rem; }
  .box03 .leftcon { padding:.5rem .5rem 1.5rem; border-radius: 15px 15px 0 0;
    background-size:1.5rem; background-position:15rem 1rem; }
  .box03 .rightcon { padding:1.5rem .5rem .5rem; border-radius: 0 0 15px 15px;
    background-size:1.5rem; background-position:4rem 1rem; }
  .box03 h4 { padding-top:.3rem; font-size:.9rem; line-height:1.5rem; }
  .box03 p { font-size:.7rem; line-height:1rem; }



  .box04 { height:17rem; margin-bottom:1.5rem; }
  .box04 h4 { height:1.8rem;
    font-size:.75rem; line-height:1.8rem; }
  .box04 h4 span { height:1.8rem; }
  .box04 .con { padding:.5rem;
    font-size: .7rem; line-height:1.2rem; }
  .box05 { width:16.5rem; padding:.5rem; margin-bottom:1.5rem;
    font-size: .7rem; line-height:1.2rem; }

  .box06 li { width:5.5rem; height:5.9rem; margin-right:.5rem;
    background-size:100% 100%;
    font-size: 1rem; line-height:1.3rem; }
  .box06 .list02 { background-size:100% 100%; }
  .box06 .list03 { margin-right: 0; background-size:100% 100%; }
  .box06 li a { height:3.9rem; padding:1rem 0;  }

  .box07 { margin-top:1rem; }
  .box07 h4 { font-size:.8rem; line-height:3rem; }
  .box07 .pic { width:8.8rem; height:8.8rem; padding:.4rem;
    background-size:contain; }
  .box07 .pic img { width:8rem; height:8rem; padding:.4rem; }

  /* 通用底部 */
  .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; }
}


/*通用移动端结束*/

@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 */
}