@charset "utf-8";
/* CSS Document */
body { background:#dd4257; overflow-x: hidden; max-width:100%;
  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 { 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;}
.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;  }

.mc{
    position:absolute; left:0; width:100%; height:100%; min-height:0; }
.snow-container{
    position:fixed; top:0; left:0; width: 100%;  height: 100%; z-index:2;
    pointer-events: none; }
.banner {
    position:relative; height:500px; padding-top:85px;
    background: url(../images/bg.jpg) no-repeat top;
    background-attachment: fixed; }
.banner .bg {
    position:absolute; left:0; bottom:0; width:100%; height:306px;
    background: url(../images/banner01.png) no-repeat bottom; }
.banner h2 {
    height:135px;
    background: url(../images/title.png) no-repeat center / contain;
    text-indent:-9999em; overflow: hidden; }
.banner h3 {
    width:690px; height:70px; margin: 50px auto 30px;
    background: #f9dba5; border-radius: 70px;
    color:#941d2d; font-size:36px; line-height: 70px; text-align: center; }
.banner p {
    color:#fff; font-size:40px; font-weight: 600; line-height: 40px; text-align: center; }

.title {
    height:50px;
    color:#fff; font-size: 48px; line-height: 50px; text-align: center; }
.mintitle {
    height:30px; margin-top: 20px;
    color:#fff; font-size: 24px; line-height: 30px; text-align: center; }

.bg01 {
    position:relative; width:1170px; padding:15px; margin:40px auto 60px; z-index:3;
    background: #fff; border-radius: 30px;
    background: #c4283e linear-gradient(-45deg, #fff 25%, transparent 25%, transparent 50%, #fff 50%, #fff 75%, transparent 75% ) repeat -15px / 50px 50px; }
.box01 {
    min-height:345px; padding:30px 35px;
    background: #fde3e6 url(../images/pic02.png) no-repeat 765px center; border-radius: 15px;
    font-size: 18px; line-height: 36px; }
.box01 img {
    display: inline-block; height:36px; vertical-align: middle; }
.box01 .btn {
    display: inline-block; width: 65px; height:30px; margin:3px 10px; vertical-align: middle;
    background:#cf3a29; border-radius:5px;
    color:#fff; line-height: 30px; text-align: center; }
.box01 .btn:hover { opacity: .9; }
.box01 .link {
    display: inline-block; height:36px;
    color:#cf3a29; }
.box01 .link:hover {
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 4'><path fill='none' stroke='#ff3300' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/></svg>") repeat-x 0 100%; background-size:auto 4px;
    animation:waveMove 1s infinite linear;}
@keyframes waveMove {
    from { background-position: 0 100%; }
    to { background-position:-20px 100%; }
}
.box01 h4 { margin-top: 40px; }
.box01 p { width:550px; }

.box02,
.box03 {
    position:relative; margin:50px auto 70px; z-index:3; }
.box02 li {
    float:left; width: 356px; height:155px; padding-top:75px; margin:0 65px 45px 0; overflow: hidden; cursor: pointer;
    background: url(../images/pic21.jpg) no-repeat center / cover; border-radius: 15px;
    text-align: center;
    transition:all .2s ease-out; }
.box02 li:hover {
    box-shadow: 0 2px 43px rgba(162, 32, 50, 0.58); }
.box02 li:nth-child(3n) { margin-right: 0; }
.box02 li:nth-child(n+2) { background-image:url(../images/pic22.jpg); }
.box02 li:nth-child(n+3) { background-image:url(../images/pic23.jpg); }
.box02 li:nth-child(n+4) { background-image:url(../images/pic24.jpg); }
.box02 li:nth-child(n+5) { background-image:url(../images/pic25.jpg); }
.box02 li:nth-child(n+6) { background-image:url(../images/pic26.jpg); }

.box022 {
    position:relative; margin:0px auto 70px; z-index:3; display:none;}
.box022 li {
    float:left; width: 360px; height:300px; margin:0 45px 45px 0; overflow: hidden; cursor: pointer; 
    text-align: center;
    transition:all .2s ease-out; }
.box022 li a { width:358px; height:286px;}	
.box022 li:nth-child(3n) { margin-right: 0; }


.box02 h4 {
    margin-bottom:15px;
    color:#fff; font-size:36px; line-height: 40px; }
.box02 p {
    color:#fdff54; font-size:30px; line-height: 36px; }

.box03 {
    display:none; }
.kcCon {
    overflow: hidden;
    background: #fff; border-radius:15px; }
.kcCon h4 {
    position:relative; height: 60px;
    background:#F9DBA5;
    color: #c0172f; font-size: 24px; font-weight: 400; line-height: 60px; text-align: center; }
.closeThis {
    display:block; position: absolute; right:0; width: 60px; height: 60px; cursor: pointer;
    background: url(../images/pic30.png) no-repeat center;
    transition:all .5s ease-out; }
.closeThis:hover { transform: rotate(180deg); }
.kcCon dl {
    position:relative; padding-top:30px; }
.kcCon dl:nth-child(2) { border-bottom:1px solid #f9dba5; }
.kcCon dt {
    position: absolute; left:0; top:0; width: 60px; height:100%;
    background: #fcf8f0; border-right:1px solid #f9dba5;
    font-size:24px; line-height:60px; text-align: center; writing-mode:tb-rl; }
.kcCon dd {
     margin-left:60px; }
.kcCon .book {
    float:left; width:360px; margin:0 10px 30px; }
.kcCon .book .pic {
    display:block; float:left; width: 150px; height: 150px; margin-right:15px; overflow: hidden;
    background:#fff; border:1px solid #e7e7e7; }
.kcCon .pic img {
    display:block; height: 100%; margin: 0 auto;
    transition:transform .5s ease-out; }
.kcCon .pic:hover img {
    transform:scale(1.05); }
.kcCon .book p {
    float:left; width:193px; height:72px; overflow: hidden;
    font-size: 16px; line-height: 24px; text-align: justify; }
.kcCon .book .price {
    float:left; height:20px; width:193px; margin:15px 0 9px;
    color:#999; font-size: 16px; line-height: 20px;  }
.kcCon .price span {
    display:inline-block; width: 4.5em;
    color:#F81200; }
.kcCon .btn {
    display:block; float:left; width: 116px; height: 34px;l
    background: #fff; border:1px solid #F81200; border-radius: 3px;
    color:#F81200; font-size:16px; line-height:34px; text-align: center;
    transition:background .2s ease-out; }
.kcCon .btn:hover {
    color:#fff; background: #F81200; }
.kcCon .online {
    float:left; width:302px; padding:12px; margin:0 0 30px 40px;
    border:1px solid #e7e7e7; }
.kcCon .online .pic {
    display:block; width:100%; height:170px; margin-bottom:15px; overflow: hidden;
    background:#fff; }
.kcCon .online .pic img { width:100%; }
.kcCon .online p {
    height:24px; overflow: hidden;
    font-size: 16px; line-height: 24px; white-space: nowrap; text-overflow: ellipsis; }
.kcCon .online .price {
    height:36px; margin-top:15px; overflow: hidden;
    color:#999; font-size: 16px; line-height: 36px;  }
.kcCon .online .btn { float:right; }

.box07 { margin:60px auto; z-index:3; }
.box07 a {
    position:relative; display:block; float:left; width:358px; height:325px; margin: 0 20px 20px 0; z-index: 3; padding-top:5px;
    background:#dd4257; border:1px solid #fff; border-radius:10px;
    color:#fff; line-height:44px; text-align: center;
    transition: all .2s; }
.box07 a:nth-child(9n) { margin-right: 0; }
.box07 a:hover {
    border-color:transparent;  background:#DD4257;  }

/* 通用底部 */
.footer {
    clear:both; position: relative; padding:30px 0;
    background:#333;
    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; }

@media only all and (max-width:1200px){
    .onlymob { display:block;}
    html{ font-size:20px; }
    body { width: 18.75rem;
        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) ,
    .box01 .tips br,
    .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(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:8rem; padding-top:1.375rem; margin-bottom: 1rem;
        background-image: url(../images/mbg.jpg);
        background-attachment: scroll;
        background-size: 100%; }
    .banner .bg {
        height:3.25rem;
        background-size:100% 100%; }
    .banner h2 { height:2.25rem; }
    .banner h3 {
        width:12rem; height:1.2rem; margin:.75rem auto .5rem;
        border-radius:1.2rem;
        font-size:.6rem; line-height:1.2rem; }
    .banner p {
        font-size:.65rem; line-height:.7rem; }

    .title {
        height:1.4rem;
        font-size: 1.3rem; line-height:1.4rem; }
    .mintitle {
        height:auto; width:16rem; margin:.5rem auto 0;
        font-size:.7rem; line-height:1rem; }

    .bg01 {
        width:16.5rem; padding:.5rem; margin:1.5rem auto 2.5rem;
        border-radius:1rem;
        background-size:1rem 1rem; }
    .box01 {
        min-height:0; padding:.5rem .5rem;
        background-position:center 9rem;
        background-size: auto 8rem;
        border-radius:.5rem;
        font-size:.7rem; line-height:1.2rem; }
    .box01 img { height:1.2rem; }
    .box01 .btn {
        width:3rem; height:1.2rem; margin:0 .25rem;
        border-radius:.25rem;
        font-size:.6rem; line-height: 1.2rem; }
    .box01 .link { height:1.2rem; }
    .box01 h4 { margin-top: 9rem; }
    .box01 p { width:100%; }
	.box01 p a { font-size:.7rem; }

    .box02,
    .box03 {
       margin:1rem auto 2.5rem; }
    .box02 li {
        width:8.25rem; height:4.5rem; padding-top:1.3rem; margin:0 1rem 1rem 0;
        border-radius:.5rem; }
    .box02 li:nth-child(3n) { margin-right:1rem; }
    .box02 li:nth-child(2n) { margin-right: 0; }
	
	.box022 {
       margin:1rem auto 2.5rem; display:block;}
    .box022 li {
        width:8.25rem; height:7.5rem; padding-top:1.3rem; margin:0 1rem 1rem 0.2rem;
        border-radius:.5rem; }
    .box022 li:nth-child(3n) { margin-right:.5rem; }
    .box022 li:nth-child(n) { margin-right: .5rem; }
    .box022 li:nth-child(2n) { margin-right: 0; }
	.box022 li a { width:7.6rem; height:7.0rem;}	
    .huodongtp { width:7.5rem; height:7.0rem;}
	.Map { display:none;}
    .box02 h4 {
        margin-bottom:.3rem;
        font-size:.95rem; line-height:1.42rem; }
    .box02 p {
        font-size:.7rem; line-height:1rem; }

    .kcCon { border-radius:.5rem; }
    .kcCon h4 {
        height:2rem;
        font-size:.8rem; line-height:2rem; }
    .closeThis {
        width: 2rem; height:2rem;
        background-size: 1rem; }
    .kcCon dl { padding-top:0; }
    .kcCon dt {
        position:relative; width:100%; height:1.6rem;
        border-right:none; border-bottom:1px solid #f9dba5;
        font-size:.7rem; line-height:1.6rem; writing-mode:lr-tb; }
    .kcCon dd {
        padding-top:.5rem; margin-left:0; }
    .kcCon .book {
        float:none; width:16.5rem; margin:0 auto .5rem; }
    .kcCon .book .pic {
        width:5rem; height:5rem; margin-right:.5rem; box-sizing: border-box; }
    .kcCon .book p {
        width:11rem; height:2.4rem; margin-bottom: .8rem;
        font-size:.65rem; line-height:1.2rem; }
    .kcCon .book .price {
        width:6rem; height:1.8rem; margin:0;
        font-size:.65rem; line-height:1.8rem;  }
    .kcCon .btn {
        float:right; width:5rem; height:1.8rem;
        border:none; background:#c0172f;
        color:#fff; font-size:.65rem; line-height:1.8rem; }
    .kcCon .online {
        float:none; width:16.5rem; padding:.5rem; margin:0 auto .5rem;
        box-sizing: border-box; }
    .kcCon .online .pic {
        height:8.5rem; margin-bottom:.5rem; }
    .kcCon .online p {
        height:1.2rem;
        font-size:.65rem; line-height:1.2rem; }
    .kcCon .online .price {
        height:1.8rem; margin-top:.5rem;
        font-size:.65rem; line-height:1.8rem; }

    .box07 { margin:1.5rem auto; }
    /* 通用底部 */
    .footer { height:2rem; padding:0; overflow:hidden; position:relative; }
    .footer p { display: none;}
    .footer:before {
        display:block; content:"华图教育集团版权所有"; position:absolute; left:0; top:0;
        width: 100%; height:2rem;  overflow:hidden;
        background:#333;
        color:#fff; font-size:.7rem; line-height:2rem;  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 */
}