html {font-size: 62.5%;}
body { font-family: "Microsoft YaHei", "微软雅黑", "宋体", Arial; font-size: 1.4rem; font-size: 14px; color: #666; line-height: 26px; letter-spacing: .03em;}
ul, ol, li{ padding: 0; margin: 0; list-style: none;}
a{ color: #565656; text-decoration: none; outline: none;}
a:hover, a:active, a:focus{ text-decoration: none;}
label{ font-weight: normal;}
input{ font-family: "Microsoft YaHei", "微软雅黑", "宋体", Arial;}
h1, p{ margin: 0;}  img{ max-width: 100%;}
.pic{ text-align: center;}
.pic img{ width: 100%; height: 100%;}

.clearfix:after, .clearfixlist li:after, .form-group:after{ content:"\0020"; display:block; clear:both; height:0; font-size:0;}
.clearfix, .clearfixlist li, .form-group{ zoom:1;}
.clear{ clear:both; display:block;}
.show-xs{ display: none;}
.fl{ float: left;}
.fr, .fr-md{ float: right;}
.center{ text-align: center;}

.red{ color: #0ca8f5;} .bg-gray{ background: #f3f3f3;}
.rect-4{ -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;}
.circle{ -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%;}

.font-16{ font-size: 16px;}
.font-18{ font-size: 18px;}
.font-28{ font-size: 28px;}
.font-32{ font-size: 32px;}
.font-36{ font-size: 36px;}

.show-pad, .show-phone{ display: none;}
.block{ display: block;}
.mb-0{ margin-bottom: 0;}
.mb-5{ margin-bottom: 5px;}
.mt-5{ margin-top: 5px;}
.mt-15{ margin-top: 15px;}
.mb-15{ margin-bottom: 15px;}
.mb-10{ margin-bottom: 10px;} .mr-10{ margin-right: 10px;}
.mb-20{ margin-bottom: 20px;} .mt-20{ margin-top: 20px;} .mr-20{ margin-right: 20px;}
.mt-30{ margin-top: 30px;}
.mb-30{ margin-bottom: 30px;}
.mb-40{ margin-bottom: 40px;}

.pb-40{ padding-bottom: 40px;}

.vertical{ display: table-cell; vertical-align: middle;}
.text-ellipsis, .swiper-container .name{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}

.scroll-top{ position: fixed; z-index: 99; bottom: 28px; right: 38px; width: 48px; height: 48px; opacity:0; -webkit-transform:translateX(100%) rotate(360deg); transform:translateX(100%) rotate(360deg); transition:all .5s ease; background: url(../image/btn-scrollTop.png) no-repeat 0 0; background-size: 100% 100%;}
.scroll-top.rollIn{ opacity:1; -webkit-transform:translateX(0px) rotate(0deg); transform:translateX(0px) rotate(0deg); transition:all .5s ease;}


.fixedNav.navbar-collapse{ position:fixed; z-index:100000; top:0px; left:0px; width:100%; _position:absolute; _top:expression(eval(document.documentElement.scrollTop));}

.header{ position: fixed; z-index: 999; top: 0; left: 0; width: 100%;}
.header-top{ padding: 18px 0 8px;}
.logo{ width: 60px; text-align: center;}
.logo-relate{ height: 48px; padding-left: 15px; border-left: 1px solid #fff; margin: 6px 0 0 18px; font-size: 10px; line-height: 28px; color: #fff;}
.logo-relate .name{ font-size: 26px; line-height: 26px;}
.header-tel{ padding-left: 52px; line-height: 24px; color: #fff; background: url(../image/tel.png) no-repeat left top;}
.header-tel .tel{ font-size: 22px;}

.navbar-collapse{ position: relative;}
.navbar-nav{ float: none; width: 100%;}
.nav>li{ position: static; width: 11.11%; height: 56px; text-align: center;}
.nav>li>a{ display: inline-block; width: 100%; height: 56px; padding: 0; line-height: 56px; color: #fff; transition: all .2s ease-in-out;}
.nav>li.item1>a{ border-top-left-radius: 6px; -webkit-border-top-left-radius: 6px; -moz-border-top-left-radius: 6px; background: #b5cc1c;}
.nav>li.item2>a{ background: #ff7800;}
.nav>li.item3>a{ background: #ed3e01;}
.nav>li.item4>a{ background: #ca2282;}
.nav>li.item5>a{ background: #289cd5;}
.nav>li.item6>a{ background: #e67b11;}
.nav>li.item7>a{ background: #b5cc1c;}
.nav>li.item8>a{ background: #00d0c4;}
.nav>li.item9>a{ -webkit-border-top-right-radius: 6px; -moz-border-top-right-radius: 6px; border-top-right-radius: 6px; background: #8628d5;}
.nav>li.active>a, .nav>li>a:hover, .nav>li>a:focus, .nav>li.nav-hover>a{ z-index: 8; border: 1px solid #edf2f7; box-shadow: 0 0 12px 5px rgba(0,0,0,.18); -webkit-transform: scale(1.08); -moz-transform: scale(1.08); transform: scale(1.08);}

.dropdown-menu{ position: static; min-width: 138px; border-radius: 0; margin-left: -5px; background: rgba(255,255,255,.88);}
.dropdown-menu>li:last-child{ border-bottom: 0 none;}
.dropdown-menu>li>a{ line-height: 38px; color: #0b001e;}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus{ color: #0ca8f5; background: transparent;}


footer{ padding: 28px 0 12px; color: #fff; background: #2f383d;}
footer a{ display: block; padding: 0 6px; color: #fff; transition: all 0.5s ease-in-out;}
footer a:hover{ color: #fdca06;}
.footer .tel{ font-size: 26px; font-weight: bold; color: #fdca06;}
.footer .qrcode{ width: 162px;}
.footer-nav{ margin-bottom: 32px;}
.footer-nav li{ float: left; margin-right: 18px;}
.footer-nav dd{ line-height: 24px;}
.footer-nav .name{ margin-bottom: 12px; font-size: 16px; font-weight: normal;}
.footer-tel span{ display: block; line-height: 32px;}
.area-list{ margin: 0 18px;}
.copyright{ padding: 12px 0; font-size: 12px; color: #d9d9d9; text-align: center; background: #21262a;}


.carousel-mobile{ display: none;}
.carousel, .carousel-control, .carousel .item, .carousel .item img{ overflow: hidden;}
.carousel .item{ vertical-align: middle;}
.carousel .item img,.carousel-inner>.item>img, .carousel-inner>.item>a>img{ width: 100%; height: 100%;}
.carousel-caption{ z-index: 10;}
.carousel-caption p{ margin-bottom: 20px; font-size: 20px; line-height: 1.8;}
.carousel-indicators li, .carousel-indicators .active{ width: 40px; height: 3px; margin: 0 4px 0 0;}
.carousel-indicators li{ border: 0 none; background:#0ca8f5;}
.carousel-indicators .active{ background-color: #fff;}
.carousel .carousel-control{ background-repeat: no-repeat; background-size: 40px 72px;}
.carousel .left{ background-image: url(../image/control-left.png); background-position: left center;}
.carousel .right{ background-image: url(../image/control-right.png); background-position: right center;}


.more{ color: #fff001;}
.btn-confirm{ display: block; width: 100%; height: 48px; border-bottom: 2px solid #19ade9; margin: 0 auto 30px; line-height: 48px; color: #fff; text-align: center; background: #53c3f1;}
.btn-hollow{ display: block; width: 132px; height: 38px; border: 1px solid #311363; margin: 0 auto 18px; line-height: 36px; text-align: center; color: #311363;}

.title-wrap{ border-bottom: 1px solid #dbdbdb; margin-bottom: 68px; text-align: center;}
.title, .title span{ display: inline-block;}
.title span{ padding: 5px 48px; border-bottom: 3px solid #0ca8f5; margin-bottom: -2px; font-size: 20px; color: #111; background-position: right center;}
.title-en{ margin-bottom: -32px; font-size: 18px; font-weight: bold; line-height: 32px; text-transform: uppercase; color: #666;}

.mod{ padding: 32px 0;}
.mod-brief .detail{ margin-bottom: 8px;}
.mod-brief .info-wrap{ width: 38%;}
.mod-brief .pic{ width: 62%;}
.mod-brief .info{ padding: 0 36px 0 32px; color: #fff; background: #0ca8f5;}
.mod-brief .name{ padding-bottom: 16px; border-bottom: 1px solid #fff; margin-bottom: 15px; font-size: 20px;}
.mod-brief .txt{ margin-bottom: 18px;}
.mod-brief .btn-more{ float: right; padding: 4px 28px; color: #0ca8f5; font-size: 16px; background: #fff001;}
#carousel-outer{ width:100%; overflow: hidden;}
#inner01, #inner02{ float: left;}
.carousel-slide{ height: 100px; margin: 0 auto; overflow:hidden;}
.list-item{ float: left; width: 216px; height: 100px; margin: 0 4px;}
.list-item .pic{ position: relative; width: 100%; height: 100px;}
.list-item .vertical{ width: 216px; height: 100px;}

.mod-tutor .title-wrap{ margin-bottom: 88px;}
.tutor-list{ margin: 0 35px;}
.tutor-list li{ float: left; padding: 0 68px; margin: 0 2px 3px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; background: #8ec02e;}
.tutor-list a{ display: block; padding: 18px 0; font-size: 16px; color: #fff; text-align: center;}
.tutor-list span{ display: block;}
.tutor-list .icon{ display: none; width: 38px; height: 38px; margin: 0 auto;}
.tutor-list .item-pink{ background: #ff3c72;}
.tutor-list .item-purple{ background: #7956aa;}
.tutor-list .item-blue{ background: #00c9e3;}
.tutor-list .item-cyan{ background: #00cb9c;}
.tutor-list .item-orange{ background: #ff7800;}
.tutor-list li:hover{ height: 100px; margin-top: -38px;}
.tutor-list li:hover .icon{ display: block;}
.tutor-list2 li:nth-child(1), .tutor-list2 li:nth-child(4){ padding: 0 86px;}
.tutor-list3 li{ padding: 0 92px;}

.mod-teacher .title-wrap{ border-bottom: 0 none;}
.teacher-list{ padding: 8px 0; background: #fff;}
.teacher-list li{ float: left; width: 20%; line-height: 22px;}
.teacher-list a{ display: block; padding: 0 12px;}
.teacher-list .pic{ margin-bottom: 16px;}
.teacher-list .name{ width: 116px; padding: 4px 8px; margin-bottom: 8px; line-height: 18px; color: #fff; background: url(../image/bg-name.png) no-repeat 0 0;}
.teacher-list .name span{ display: block;}
.teacher-list .txt{ height: 88px; color: #888; overflow: hidden;}
.teacher-list a:hover .name{ color: #fff001;}
.teacher-list a:hover .txt{ color: #0ca8f5;}

.mod-news{ padding-bottom: 0;}
.mod-news .left{ float: left; position: relative; width: 45%;}
.mod-news .left .pic{ width: 100%;}
.mod-news .remark{ position: absolute; bottom: 0; left: 0; width: 100%; padding: 12px 26px; color: #fff; background: rgba(0,0,0, 0.68);}
.mod-news .remark .name{ margin-bottom: 4px; font-size: 18px;}
.mod-news .remark .txt{ height: 52px; overflow: hidden;}
.mod-news .right{ float: right; width: 54%;}
.mod-news .pics{ margin-bottom: 18px;}
.mod-news .pics .pic{ width: 48%;}
.mod-news .btn-more{ float: right; color: #20acea;}
.news-list li{ font-size: 16px; margin-bottom: 16px;}
.news-list a{ display: block; padding: 6px 12px; transition: all 0.38s ease; background: #ebebeb;}
.news-list .date{ float: right; width: 78px; font-size: 13px;}
.news-list .name{ float: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.news-list a:hover{ color: #fff; background: #0ca8f5;}

.mod-join{ padding-top: 32px;}
.mod-join .title-join{ margin-bottom: 30px;}
.mod-join .btn-confirm{ margin-top: 10px;}
.form-join li{ float: left; width: 33.3%; padding: 0 12px;}
.form-join li:nth-child(3n+1){ padding-left: 0;}
.form-join li:nth-child(3n){ padding-right: 0;}
.form-join .form-group{ position: relative; margin-bottom: 20px;}
.form-join .form-control{ height: 40px; padding-left: 68px; border: 1px solid #dadfe4;}
.form-join .control-label{ position: absolute; top: 8px; left: 8px; margin: 0; color: #aaa;}


.init{ margin-bottom: 18px;}
.init .title-wrap{ padding: 18px 0 6px; border-bottom: 1px solid #dbdbdb; margin-bottom: 18px;}
.init .title{ font-size: 18px; color: #0ca8f5; background: none;}
.crumb{ font-size: 12px; line-height: 20px;}
.init p{ margin-bottom: 8px;}
.crumb .icon-map{ display: inline-block; padding-left: 20px; background: url(../image/icon-map.png) no-repeat left center;}
.crumb, .crumb a{ color: #222;}
.crumb a:hover{ color: #0ca8f5;}

.aside a, .aside .name, .main .name{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.aside{ float: left; width: 28%;}
.aside .hd{ height: 32px; padding: 0 12px; border-left: 2px solid #0ca8f5; line-height: 32px; cursor: pointer; background: #eee;}
.aside .bd{ padding: 10px 0;}
.aside-list li{ float: left; width: 49%; margin-bottom: 5px; text-align: center;}
.aside-list li:nth-child(2n+1){ float: right;}
.aside-list a{ display: block; border: 1px solid #ddd; line-height: 28px;}
.aside-list a:hover{ border-color: #0ca8f5; color: #0ca8f5;}
.aside-mod2{ border: 1px solid #ddd; margin-bottom: 18px;}
.aside-mod2 .hd{ border: 0 none; border-bottom: 1px solid #ddd; background: transparent;}
.aside-mod2 .bd{ padding: 5px 12px;}
.aside-mod2 .name{ display: block; padding: 3px 0;}
.aside-mod2 .name:hover{ color: #0ca8f5;}
.main{ float: right; width: 70%;}

.init-about .flag, .init-about .pic{ margin-bottom: 12px;}
.init-about .flag{ font-size: 16px; text-align: center;}
.init-about .logo{ margin: 12px auto;}
.init-about .pic img, .news img{ width: auto; height: auto;}

.init-teacher .teacher-list li{ width: 25%;}
.init-teacher .teacher-list a{ padding: 0 8px 18px;}

.init-online .form-join li{ width: 50%;}
.init-online .form-join li:nth-child(3n), .init-online .form-join li:nth-child(3n+1){ padding: 0 12px;}
.init-online .form-join li:nth-child(2n+1){ padding-left: 0;}
.init-online .form-join li:nth-child(2n){ padding-right: 0;}

.init-contact .map{ margin-bottom: 24px;}
.contact-list li{ float: left; width: 33.3%; padding: 2px 0 2px 36px; margin-bottom: 18px; background: url(../image/init-contact.png) no-repeat 0 0;}
.contact-list .item-qq{ background-position: 0 -62px;}
.contact-list .item-name{ background-position: 0 -126px;}
.contact-list .item-email{ background-position: 0 -190px;}
.contact-list .item-area{ width: 66%; background-position: 0 -258px;}

.init-news{ padding-top: 0;}
.init-news .name{ font-size: 14px;}
.title-news{ margin-bottom: 8px; font-size: 18px; color: #222;}

.news{ padding-bottom: 28px;}
.news .subtitle{ padding-bottom: 8px; border-bottom: 1px dashed #c2c2c2; margin-bottom: 18px; color: #717171;}
.news .date span{ display: inline-block;}
.news .pic{ height: auto; margin-bottom: 12px; text-align: center;}
.news .info{ margin-bottom: 28px;}
.news-more{ margin-bottom: 18px;}
.news-more .caption{ border: 0 none; margin-bottom: 18px; font-size: 18px; color: #333;}
.news-more a{ display: block; height: 34px; line-height: 32px; color: #616161;}
.news-more .likename{ float: left; width: 82%;}
.news-more .date{ float: right; width: 18%; text-align: right;}
.news-pagination{ position: relative; padding: 10px 128px 10px 0; border-top: 1px dashed #999;}
.news-pagination a{ width: 68%; height: 26px; margin-bottom: 10px; font-size: 16px; color: #242424;}
.news-pagination span{ float: left; color: #616161;}
.news-pagination .btn-back{ position: absolute; top: 20px; right: 0; width: 115px; height: 38px; padding-left: 36px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; font-size: 16px; color: #fff; line-height: 38px; background: url(../image/icon-back.png) no-repeat 6px center #0ca8f5;}
.news-pagination .btn-back:hover{ color: #fff;}
.news-more a:hover, .news-pagination a:hover{ color: #0ca8f5;}


.pagination{ margin-top: 20px;}
.pagination, .pagination>li:first-child>a, .pagination>li:first-child>span, .pagination>li:last-child>a, .pagination>li:last-child>span{ -webkit-border-radius: 0; border-radius: 0;}
.pagination>li{ float: left; margin-right: 8px;}
.pagination>li>a, .pagination>li>span{ color: #9e9e9e;}
.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, 
.pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus,
.pagination>li>a:hover, .pagination>li>span:hover,
.pagination>li>a:focus, .pagination>li>span:focus
 { border-color: #0ca8f5; font-weight: bold; color: #fff; background-color: #0ca8f5;}


.bounce-to-right{ position: relative; vertical-align: middle;
  -webkit-transform: translateZ(0); transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden;
  backface-visibility: hidden; -moz-osx-font-smoothing: grayscale;
  -webkit-transition-property: color; transition-property: color;
  -webkit-transition-duration: 0.5s; transition-duration: 0.5s;
}
.bounce-to-right:before{ content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #ff3c72;
  -webkit-transform: scaleX(0); transform: scaleX(0);
  -webkit-transform-origin: 0 50%; transform-origin: 0 50%;
  -webkit-transition-property: transform; transition-property: transform;
  -webkit-transition-duration: 0.5s; transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;
}
.bounce-to-right.btn-confirm:before{ -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;}
.bounce-to-right:hover, .bounce-to-right:focus, .bounce-to-right:active{ color: #fff;}
.bounce-to-right:hover:before, .bounce-to-right:focus:before, .bounce-to-right:active:before{
  -webkit-transform: scaleX(1); transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

@media( max-width: 1200px){
  .scroll-top{ width: 48px; height: 48px;}

  .footer .qrcode{ width: 136px;}

  .title-wrap{ margin-bottom: 48px;}
  .mod-news .remark .name{ font-size: 14px;}
  .tutor-list li{ padding: 0 52px;}
  .tutor-list2 li:nth-child(1), .tutor-list2 li:nth-child(4){ padding: 0 62px;}
  .tutor-list3 li{ padding: 0 72px;}

  .contact-list li{ width: 50%; padding-left: 36px; margin-bottom: 12px;}
  .contact-list .item-area{ width: 100%;}
  .news{ padding-bottom: 12px;}
}

@media (max-width: 991px){   
    .footer-nav, .footer-tel{ text-align: center;}
    .footer-nav{ margin-bottom: 24px;}
    .footer-nav li{ width: 16.66%; margin: 0;}
    .footer-tel{ margin-bottom: 18px;}
    .footer-tel span{ display: inline-block;}
    .footer .qrcode{ float: left; margin-top: 12px;}
    .footer .col-md-5{ width: 430px; margin: 0 auto;}

    .btn-confirm{ margin-bottom: 8px;}
    .mod{ padding: 26px 0;}
    .mod-brief{ padding-bottom: 0;}
    .mod-brief .pic, .mod-brief .info-wrap{ float: none; width: 100%;}
    .mod-brief .info{ padding: 18px;}

    .tutor-list li{ padding: 0 30px;}
    .tutor-list2 li:nth-child(1), .tutor-list2 li:nth-child(4){ padding: 0 23px;}
    .tutor-list3 li{ padding: 0 44px;}
    .teacher-list a{ padding: 6px;}

    .form-join li{ padding: 0 6px;}
    .form-join .form-group{ margin-bottom: 12px;}

    .mod-news .pics{ margin-bottom: 10px;}
    .news-list li{ margin-bottom: 6px; font-size: 14px;}

    .init-teacher .teacher-list li{ width: 33.3%;}
    .init-online .form-join li{ width: 100%; padding: 0;}
    .init-online .form-join li:nth-child(3n), .init-online .form-join li:nth-child(3n+1){ padding: 0;}

    .mod-brief .btn-more{ font-size: 14px;}
}

@media (max-width: 767px){
    .hide-pad, .hide-sm, .aside-title .hide-sm{ display: none;}
    .show-pad{ display: block;}

    #online{ position: fixed; z-index: 9; bottom: 28px; width: 68%; height: 40px; margin: 0 16%; border-radius:80px; box-shadow: 0 5px 10px rgba(0,0,0,.1); background: rgba(243,243,243,.9);}
    #online a{ float: left; position: relative; width: 33.333%; height: 100%; font-size: 18px; color: #233876; line-height: 40px; text-align: center; background: url(../image/sprite-online.png) no-repeat center 10px; background-size: 18px 102px;}
    #online a:after{ content:"";position:absolute;right:0;height:100%;width:1px;background:rgba(255,255,255,.6);}
    #online a:last-child:after{ display:none}
    #online .ol-home{ background-position: center 12px;} 
    #online .ol-tel{ background-position: center -28px;} 
    #online .ol-qq{ background-position: center -72px;} 

    body{ padding-top: 56px;}
    .header{ position: fixed; top: 0; left: 0; z-index: 99; width: 100%; height: 56px; padding: 0 12px 0 6px; background: #fff;}
    .header-top{ float: left; padding: 0;}
    .header-top .container{ padding: 0;}
    .header-top .vertical{ display: block; height: auto;}
    .header .logo{ display: block; width: auto; height: 50px; margin-top: 3px; overflow: hidden;}
    .header .logo img{ height: 50px;}
    
    .nav-mask{ position: fixed; top: 0; left: 0; z-index: 9998; width: 100%; height: 100%; background: rgba(0,0,0,.38);}
    .navbar-toggle .icon-bar{ background-color: #0ca8f5;}
    .navbar-collapse{ position: fixed; z-index: 9999; left: auto; left: -50%; top: 0; width: 45%; padding: 0; text-align: center; box-shadow:3px 0px 7px rgba(0,0,0,0.55); -webkit-box-shadow:3px 0 7px rgba(0, 0, 0, 0.55); -moz-box-shadow:3px 0 7px rgba(0, 0, 0, 0.55); background: #fff;}
    .navbar-collapse .container{ padding: 0;}
    .navbar-nav{ margin: 20px 0;}
    .navbar-toggle{ padding: 8px; border: 1px solid #0ca8f5; margin-top: 12px; margin-right: 0;}
    .nav>li{ width: 100%; height: auto; background: none;}
    .navbar-nav>li>a{ height: 42px; line-height: 42px;}
    .nav>li.item1>a, .nav>li.item9>a{ -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; border-radius: 0;}

    .footer{ padding-bottom: 28px; font-size: 12px;}
    .scroll-top{ width: 38px; height: 38px;}
    .carousel .right, .carousel .left{ background-size: 32px;}

    .mod-tutor .title-wrap{ margin-bottom: 48px;}
    .teacher-list li{ width: 33.3%;}

    .tutor-list{ margin: 0;}
    .tutor-list li{ width: 19.6%; padding: 0; margin: 0 0.2% 3px;}
    .tutor-list2 li:nth-child(1), .tutor-list2 li:nth-child(4){ padding: 0;}
    .tutor-list2 li:nth-child(1){ width: 27.2%;}
    .tutor-list2 li:nth-child(4){ width: 32%;}
    .tutor-list3 li{ width: 24.6%;}

    .mod-news .left, .mod-news .right{ float: none;}
    .mod-news .left{ max-width: 480px; width: 100%; margin: 0 auto 18px;}
    .mod-news .right{ width: 100%;}

    .mod-join{ padding-top: 20px;}

    
    .aside, .main{ float: none;}
    .aside .caption{ position: fixed; z-index: 9; left: 6px; bottom: 28px; width: 48px; height: 48px; padding: 8px 4px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin-bottom: 0; cursor: pointer; transform: rotate(0deg); transition: all 0.5s ease-in-out; line-height: 16px; color: #fff; text-align: center; overflow: hidden; background: #0ca8f5;}
    .aside .caption.rotate{ transform: rotate(360deg);}
    .aside .caption .txt-china{ display: block; font-size: 14px; line-height: 20px; text-align: center;}
    .aside .aside-mod2{ display: none;}
    .aside .aside-navs{ display: none; position: fixed; z-index: 99; left: 68px; bottom: 38px; width: 180px; background: #fff;}
    .aside .hd{ border: 0 none; height: 36px; border-bottom: 1px solid #ddd; line-height: 36px;}
    .aside .bd{ display: none; padding: 8px;}

    .main{ width: 100%;}
    .contact-list li{ width: 100%; padding-left: 36px;}

    .pagination{ margin: 15px 0 0;}
    .pagination li{ margin-bottom: 8px;}
}

@media (max-width: 480px){
    .wrap-xs{ width: 100%; overflow: hidden;}
    .hide-xs, .carousel-computer{ display: none;}
    .show-phone, .carousel-mobile{ display: block;}
    .row{ margin: 0;}

    .scroll-top{ right: 8px;}

    .navbar-toggle{ padding: 6px; margin-top: 15px; margin-right: -4px;}
    .footer{ padding: 18px 0 12px;}
    .footer .col-md-7, .footer .col-md-5{ padding: 0;}
    .footer-nav{ margin-bottom: 12px;}
    .footer-nav li{ width: 33.3%; margin-bottom: 16px;}
    .footer-nav li:first-child{ display: none;}
    .footer-nav .name{ margin-bottom: 5px; font-size: 14px;}
    .footer .col-md-5{ width: auto;}
    .footer .area-list{ float: none; text-align: center;}
    .footer .qrcode{ float: none; margin: 16px auto 8px;}
    
    .copyright span{ float: none; display: block; margin: 0; text-align: center;}

    .carousel-indicators{ bottom: 0;}
    .carousel-indicators li, .carousel-indicators .active{ width: 18px; height: 2px;}
    .carousel-control{ display: none;}

    .container{ padding: 0 10px;}
    .title-wrap{ margin-bottom: 38px;}
    .title span{ font-size: 16px;}
    .title-en{ font-size: 14px;}
    
    .mod{ padding: 15px 0;}
    .mod-brief{ padding-bottom: 0;}
    .mod-brief .name{ padding-bottom: 12px; font-size: 16px;}

    .tutor-list li, .tutor-list2 li:nth-child(1), .tutor-list2 li:nth-child(4){ width: 49.6%;}

    .teacher-list li, .init-teacher .teacher-list li{ width: 50%;}

    .form-join li{ width: 100%; padding: 0;}
    .form-join .form-group{ margin-bottom: 12px;}
    .btn-purple{ width: 88%; margin-bottom: 20px;}
    .btn-hollow{ margin-bottom: 8px;}

    .form-wrap .name{ margin-bottom: 8px; font-size: 14px;}
    .form-wrap .bottom{ margin: 8px 0 0;}
    .form-group{ position: relative; margin-bottom: 12px;}
    .form-group .control-label, .form-group .form-control{ float: none; width: 100%;}
    .form-group .control-label{ margin-left: 0;}
    .form-group .tips{ position: absolute; top: 0; right: 4px; text-align: right;}
    .form-wrap .btns{ margin: 16px 0 0;}
    .form-wrap .btn{ float: left; width: 48%; height: 38px; line-height: 24px;}
    .form-wrap .btn-reset{ float: right;}

    .init .title-wrap{ margin-bottom: 12px;}
    .init .title .txt-china{ font-size: 16px; line-height: 20px;}
    .init .title .txt-en{ font-size: 12px; line-height: 18px;}
    .crumb{ padding-top: 4px;}

    .product-list li{ width: 100%;}

    .news-more .likename{ width: 68%;}
    .news-more .date{ width: 32%;}

    .news{ padding-bottom: 58px;}
    .news .title{ font-size: 20px;}
    .news .info{ margin-bottom: 20px;}
    .news-more, .news-more .caption{ margin-bottom: 10px;}
    .news-pagination{ padding: 10px 0 0;}
    .news-pagination a{ width: 100%; font-size: 15px;}
	  .news-pagination .btn-back{ top: auto; right: auto; left: 0; bottom: -60px;}
}

@media(max-width: 350px){
  .form-wrap .name{ font-size: 12px;}
}