@charset "gb2312";
/* CSS Document */




body{
    font-size:0.16rem;
    line-height: 1.5;
}
.nav-r li.tel-icon{
    padding-left: 30px;
    background: url("http://img.360intedu.com/20201029/t-tel.png") no-repeat left center;
}
.nav>h1{
    position: absolute;
    left: -99999px;
}

.nav{
    padding: 5px 0;
    -webkit-box-shadow:  0 10px 10px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 10px 10px rgba(0,0,0,0.1);
    box-shadow: 0 10px 10px rgba(0,0,0,0.1)
}
.nav-cnt,.top-bg .top{
    max-width: 1200px;
    margin: 0 auto;
}
/**top-bg star**/
.top-bg{background-color:#3d3d3d;padding:5px 0;color: #999;}
.top{line-height: 34px;font-size:12px;}
.top .top-left{width: 70%;float: left}
.top .top-left a.a2{line-height: 20px;border-right:1px #888 solid;padding:0 8px;margin-right:8px;  }
.top .top-left a.a2{line-height: 20px;border-right:1px #888 solid;padding:0 8px;margin-right:8px; color: #999; }
.top .top-right{float: right;}
.top .top-right a{color: #999;margin-left: 1em}
.top .top-left span a{color:#999;}
/**top-bg end**/
/*nav begin*/
.logo{
    float: left;
    line-height:4.375 ;
}
.nav-r{
    width: 75%;
    float: left;
    font-size: 0.14rem;
    line-height:5em;
    margin-left: 5%;
}
.nav-r>li{
    width: 20%;
    padding-left:1.5%;
    float: left;
    height: 70px;
    position: relative;
    font-weight: 600;
}
.spot{
    display: block;
    font-size: 0.16rem;
    width: 0.375em;
    height: 0.375em;
    position: absolute;
    top:49%;
    left: 1%;
    content: " ";
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
}

.nav-menu{
    width:120%;
    display: none;
    overflow: hidden;
    background-color: #fff;
    border:1px solid #ddd;
    padding: 10px;
    position: absolute;
    top:60px;
    z-index: 9999;
}
.nav-menu>li{
    font-size: 0.14rem;
    height: 2.5em;
    line-height: 2.5;
    background: url(http://img.360intedu.com/20201029/li_img02.png) no-repeat left center;
    padding-left:10px;
}
.nav-menu > li a{
    font-weight: normal;
}
.moblie-nav{
    display: none;
    position: relative;
}
.moblie-nav .mobile-btn{
    margin-top: 15px;
    float: right;
    cursor: pointer;
}
.moblie-nav .spot{
    display: none;
}
.moblie-nav .mask{
    display: none;
    position: fixed;
    background-color: #000;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    top: 60px;
    left: 0;
    z-index: 1;
}
.moblie-nav .nav-r{
    position: absolute;
    top: 60px;
    right:-320px;
    background-color: #fff;
    min-width: 200px;
    width: auto;
    z-index: 99999;
    margin: 0 ;
    transition: right 1s;
}

.moblie-nav .nav-r > li{
    width: 220px;
    float: none;
    height:auto;
    line-height: 2.5;
    padding: 0 10px;
}
.moblie-nav .nav-r > li a{
    font-weight: normal;
}
.moblie-nav .nav-menu{
    position: inherit;
    top:0;
    padding-top:0 !important;
}
.moblie-nav .nav-menu > li{
    height: 2.5em;
    line-height: 2.5;
}
.nav-r a>i{
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    vertical-align: middle;
}
.nav-r .point-icon{
    border-top: 4px dashed;
    border-top: 4px solid \9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
.nav-r .point-icon-up{
    border-bottom: 4px dashed;
    border-bottom: 4px solid \9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.moblie-nav .nav-r i{
    float: right;
    margin-top: 15px;
    margin-right: 18px;
}
.moblie-nav .nav-r .point-icon{
    border-right: 4px dashed;
    border-right: 4px solid \9;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}
.moblie-nav .nav-r .point-icon-up{
    border-bottom:0;
    border-top: 4px dashed;
    border-top: 4px solid \9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
/*nav end*/


.banner-box{
    margin-bottom:3%;
}
.banner{
    width: 100%;
    min-height: 450px;
    max-width: 1200px;
    margin:0 auto;
}

.banner .banner-text{
    width: 40%;
    padding-top:7%;
    margin-left:3.5%;
    float: left;
}
.banner-text img{
    margin-bottom:5%;
}
.banner p{
    color:#fff;
    font-size:0.2rem;
}
.baoming-form{
    width:25%;
    background-color: #fff;
    float: right;
    padding:2% 2% 0;
    box-sizing: border-box;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    position: absolute;
    top:0;
    right: 8%;
    z-index: 999;
}
.baoming-form h3{
    font-size:0.18rem;
    text-align: center;
    margin-bottom:10px;
}
.baoming-form span{
    display: block;
    text-align: center;
    margin-bottom:10px;
    font-size:0.14rem;
}
.baoming-form .form-item {
    margin-bottom:20px;
}
.baoming-form .form-control{
    width: 100%;
    border:1px #999 solid;
    height: 35px;
    line-height: 35px;
    padding: 0px 15px;
    box-sizing: border-box;
    color:#a2988b;
}
.baoming-form select.form-control{
    padding:0 10px ;
}
.baoming-form select.age{
    width: 40%;
    float: left;
}
.baoming-form select.shi{
    width:55%;
    float: right ;
}
.baoming-form .btn{
    border: none;
    height:34px;
    line-height: 34px;
    background-color: #e9168b;
    color: #fff;
    cursor: pointer;
    font-size:0.16rem;
}

.baoming-form form p {
    padding-top: 0;
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 18px;
    color: #999;
}
.baoming-form form p input{
    margin-right: 8px;
}
.baoming-form form p a{
    color: #000;
    text-decoration: underline ;
}

.fullSlide .bd li a.bd-btn-moblie{
    display: none;
    max-width: 160px ;
    text-align: center;
    padding: 6px 12px;
    font-size: .3rem;
    line-height: 1.2;
    background-color: #ec008c;
    color: #fff;
    -webkit-border-radius: 1.2em;
    -moz-border-radius: 1.2em;
    border-radius: 1.2em;
    border: 1px solid #ec008c;
}
.fullSlide .bd li a.bd-btn-moblie:hover{
    color: #ec008c;
    background-color: #fff;
}

/*banner begin*/


.fullSlide {
    position: relative;
    margin-bottom:16px;
}
.fullSlide h1{
    position: absolute;
    left:-10000px;
}
.fullSlide .bd {
    margin: 0 auto;
    position: relative;
    z-index: 0;
    overflow: hidden;
}
.fullSlide .bd ul{
    width: 100% !important;
}
.fullSlide .bd li {
    min-height: 450px;
    width: 100% !important;
    overflow: hidden;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover !important;
}
.fullSlide .bd li>a{
    display: block;
    height: 450px;
}
.fullSlide .hd {
    width: 100%;
    position: absolute;
    z-index: 1;
    bottom: 10px;
    left: 0;
    height: 30px;
    line-height: 30px;
    text-align: center;
}
.fullSlide .hd ul li {
    cursor: pointer;
    display: inline-block;
    zoom: 1;
    width: 10px;
    height: 10px;
    margin: 0 7px;
    overflow: hidden;
    color:transparent;
    line-height: 99px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #fff;
}
.fullSlide .hd ul .on{
    background-color: #ff887f;
}
.fullSlide .prev, .fullSlide .next {
    display: block;
    position: absolute;
    z-index: 1;
    top: 50%;
    margin-top: -23px;
    left: 5%;
    z-index: 1;
    width: 32px;
    height: 64px;
    background: url(slide-arrow.png) 0px 0 no-repeat;
    cursor: pointer;
    display: none;
}
.fullSlide:hover .prev,.fullSlide:hover .next{
    display: block;
}
.fullSlide .next {
    left: auto;
    right: 5%;
    background-position: -52px 0;
}
.fullSlide .prev:hover {
    background-position: -104px 0;
}
.fullSlide .next:hover {
    background-position: -160px 0;
}
/*banner end*/


.main,.breadcrumbs{
    width:100%;
    margin: 0 auto 5%;
}
.main .content{
    width: 800px;
    margin: 0 auto;
}
.main h2{
    font-size: 26px;
    text-align: center;
    margin-bottom:15px;
}

.main01 h2{
    text-align: center;
}
.main01 p.dis,.main03 p.dis{
    width: 100%;
    margin: 0 auto 2%;
    color: #444;
}
.main01 .course-intro-list{
    padding: 5% 0;
}
.course-intro01{
    background: url("http://img.360intedu.com/20201029/bg-03.png") no-repeat right 5% center #F7932D;
}
.course-intro01 a{
    color: #F7932D;
}
.course-intro01 a:hover{
    color: #fff;
    background-color: #F7932D;
    border-color: #fff;
}
.course-intro02{
    background: url("http://img.360intedu.com/20201029/bg-04.png") no-repeat left 5% center #98CE37;
}
.course-intro02 a{
    color: #98CE37;
}
.course-intro02 a:hover{
    color: #fff;
    background-color: #98CE37;
    border-color: #fff;
}
.course-intro03{
    background: url("http://img.360intedu.com/20201029/bg-05.png") no-repeat right 5% center #CC72B3;
}
.course-intro03 a{
    color: #CC72B3;
}
.course-intro03 a:hover{
    color: #fff;
    border-color: #fff;
    background-color: #CC72B3;
}
.course-intro04{
    background: url("http://img.360intedu.com/20201029/bg-06.png") no-repeat left 5% center #43ACF2;
    background-size: 20%;
}
.course-intro04 a{
    color: #43ACF2;
}
.course-intro04 a:hover{
    color: #fff;
    background-color: #43ACF2;
    border-color: #fff;
}
.main01 .content {
    width:100%;
    padding: 0 5%;
    margin: 0 auto;
    color: #fff;
}

.course-intro-cnt img{
    margin-bottom: 10px;
	margin-left:0px;
}
.course-intro-cnt p{
    font-size: 24px;
    margin-bottom:15px;
    font-weight: 600;
	color:#fff;
}
.course-intro-cnt li{
    font-size: 16px;
    line-height: 25px;
    margin-bottom:10px;
}
.course-intro-cnt a {
    display: inline-block;
    font-size: 16px;
    padding: 5px 25px;
    line-height: 1.57;
    -webkit-border-radius: 1.57em;
    -moz-border-radius: 1.57em;
    border-radius: 20px;
    background-color: #fff;
    border: 1px solid #fff;
}
/*main01 end*/

.main02 .content-l{
    float: left;
    width: 50%;
}
.main02 .content-r{
    float: right;
    width: 50%;
    text-align: center;
}
.main02 h3 {
    margin-bottom: 15px;
    font-size: 28px;
}
.main02 h4 {
    font-size: 20px;
    margin-bottom: 15px;
    font-weight: normal;
}
.main02 p {
    color: #333;
    font-size: 16px;
    line-height: 25px;
}
/*main02 end*/
.main03 p.dis{
    text-align: center;
}
.main03 dl{
    float: left;
    width: 14%;
    text-align: center;
}
.main03 dl span{
    font-size: 16px;
    font-weight: bold;
}
.main03 dl p{
    font-size: 16px;
    margin-top:5px;
    color: #333;
}
.communicate-step1{
    color: #ea329d;;
}
.communicate-step2,.communicate-step6{
    color:#fc9500;
}
.communicate-step3,.communicate-step7{
    color:#43aef2;
}
.communicate-step4{
    color:#a3cd18;
}
.communicate-step5{
    color:#c476b3;
}
/*main03 end*/

.main04{
    padding:0.3rem 0;
    background: url("http://img.360intedu.com/20201029/bg-01.jpg");
	background-size:100%;
}
.main04 .content{
    margin-bottom: 2%;
}
.main04 .content a{
    float: left;
    width: 40%;
}
.main04 .content a img{width:100%;}
.main04 .content-text{
    float: right;
    width: 55%;
}
.content-text-center{
    text-align: center;
}
.main04 .content-text p{
    color: #333;
    font-size: 16px;
    line-height:25px;
    margin-bottom:10px ;
}

.form-bd .baoming-form{
    float: none;
    width:70%;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    padding:2%;
}
.form-bd-bg{
    max-width:1200px;
   background-color:#cc72b3;
    background-image: url(bd-img-02.png), url(bd-img-01.png);
    background-repeat: no-repeat ;
    background-position:  top right;
    background-size: 14% ,16%;
    padding:2% 0;
    margin:0 auto;
}
.form-bd-bg .form-bd{
    margin-bottom:0;
}
.form-bd-bg .baoming-form{
    margin:0;
}
.form-bd-bg .baoming-form .form-item{
    float: left;
    width: 48%;
    margin:0 1% 2%;
}
.adress-bg{
    background:url(bg-02.jpg) no-repeat center center;
}
.adress{
    margin-bottom:0;
    padding:4% 0;
}
.adress-cnt{
    width:55%;
}
.adress h2{
    text-align: left;
}
.adress p{
    margin-bottom:5%;
    color: #444;
}
.adress a{
    display: block;
    width: 230px;
    -moz-border-radius: 20px;
    -webkit-border-radius:20px;
    border-radius:20px;
    background-color: #cc72b3;
    color:#fff;
    height:40px;
    line-height: 40px;
    text-align: center;
}
.breadcrumbs{
    height: 40px;
    line-height: 40px;
    margin-bottom:1%;
    border-bottom:1px #dedede solid;
    font-size:12px;
}

/*news-bg begin*/
.news-bg{
    background: url("http://img.360intedu.com/20201029/news-bg.jpg") no-repeat left center;
}
.news-bg .m-news{
    width: 27%;
    float: right;
    padding: 2%;
    margin-right: 5%;
    background-color: rgba(255,255,255,.85);
    -webkit-box-shadow:0px 0px 5px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.2);
}
.m-news .news-title{
    margin-bottom: 4%;
}
.m-news h3{
    font-size: 20px;
    line-height: 24px;
    font-weight: normal;
    padding-left: 15px;
    border-left: 2px solid #CC72B3;
}
.m-news li{
    font-size: 14px;
    padding-left: 4%;
    background: url("http://img.360intedu.com/20201029/li_img.png") no-repeat left center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    line-height: 30px;
}
/*news-bg end*/



.lesson .lesson-cnt{
    float: left;
    width: 25%;
    font-size:12px;
}
.lesson h3{
    font-size:14px;
    position: relative;
    height: 30px;
    line-height: 30px;
    padding-left:15px;
}
.lesson h3 span{
    display: none;
}
.lesson h3:before{
    content: "";
    display: block;
    width: 6px;
    height:6px;
    background-color: #fc9500;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    left:0;
    top:12px;
}

.lesson .lesson-cnt02 h3:before{
   background-color: #c476b3;
}
.lesson .lesson-cnt03 h3:before{
    background-color: #38c8ac;
}
.lesson .lesson-cnt04 h3:before{
    background-color: #e2503e;
}

.lesson .lesson-cnt ul{
    padding:5% 5% 0;
}
.lesson .lesson-cnt li{
    height: 34px;
    line-height: 34px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/*footer begin*/
.copyright{ display:none; padding:1em 0em 1em; text-align:center;border-top:2px solid #CC72B3; margin:1.5em 0 2em;}
.copyright p{ margin:0 0.3em 0.3em; font-size:12px;}
.copyright p a{ margin-right:5px;}

.last{ display:none;width:100%; height:40px; line-height:40px; background:#CC72B3; position:fixed; z-index:99999; bottom:0px;}
.last ul li{color:#FFF; float:left; width:33%; height:40px; border-right:1px #fff solid; background:#CC72B3; text-align:center; display:block; overflow:hidden;}
.last ul li a { display:inline-block; height:40px; width:99.8%; color:#FFF;text-align:center; }
.last ul li a span { font-size:14px; font-weight:600;color:#FFF}
.last ul li span { font-size:14px; font-weight:600;color:#FFF}
/*footer end*/
@media only screen and (max-width:1200px){
    .main, .breadcrumbs,.main .content,.main01 p.dis, .main03 p.dis{
        width: 1024px;
    }

}
@media only screen and (max-width:1024px){
    .top-bg .top,.main, .breadcrumbs,.main .content,.main01 p.dis, .main03 p.dis{
        width: 95%;
        margin:0 2.5%;
    }
    .main04 .content{
        margin-bottom: 5%;
    }
    .main,.main01 p.dis, .main03 p.dis{
        margin-bottom:5%;
    }
    .banner-box .baoming-form{
        width: 30%;
        margin-right:3%;
    }
    .nav-r{
        float: right;
        margin-left: 2%;
    }

    .main01{
        width: 100%;
        margin: 0 auto 5%;
    }
    .main01 .content {
        width: 95%;
        margin: 0 2.5%;
        padding: 2% 0;
    }
    .nav-r > li:nth-last-child{
        display: inline-block;
        width: auto;
    }
    .nav-r > li:nth-last-child .nav-menu{
        right:0;
    }

}
@media only screen and (max-width:767px){
    body{
        overflow-x: hidden;
    }
    html {
        overflow-x:hidden;
    }

    .logo img{
        width: 100%;
    }
    .breadcrumbs,.top .top-right{
        display: none;
    }
    .nav-r > li{
        font-size: 0.16rem;
    }

    .moblie-nav,.moblie-nav .nav-r > li a{
        display: block;
    }
    .moblie-nav .nav-menu{
        background-color: #f4f4f4 !important;
        border: none !important;
        padding: 0;
    }
    .moblie-nav .mobile-btn{
        margin-top: 0.15rem;
    }
    .nav{
        padding: 5px 20px;
    }
    .main h2{
        font-size:0.24rem;
    }
    .fullSlide .bd li a.bd-btn-moblie{
        display: block;
    }
    .banner{
        min-height: inherit !important;
        height: auto;
    }

    .banner p{
        font-size:0.16rem;
    }
    .banner-box .baoming-form,.main01 .course-intro-list ul,.main04 .content a,.main02 .content-r{
        display: none;
    }
    .baoming-form{
        width: 95%;
        margin: 0 auto;
        position: inherit;
        float: inherit;
    }
    .course-intro-cnt p{
        font-size: .36rem;
    }
    .main01 .course-intro-list {
        background-size: 50%;
        padding: 4% 0;
    }
    .course-intro-cnt{
        width: 40%;
    }

    .main01 .course-intro04{
        background-size: 40%;
    }
    .course-intro01,.course-intro03{
        background-position: right 10% center;
    }
    .course-intro02,.course-intro04{
        background-position: left 10% center;
    }

    .main02 .content-l{
        text-align: center;
    }
    .main02 .content-l img{
        margin-bottom: 5%;
    }

    .main03 dl{
        width: 50%;
    }
    .main03 dl dt{
        width: 17%;
        margin-right: 3%;
        margin-bottom: 5%;
        float: left;
    }
    .main03 dl dd{
        width: 80%;
        float: left;
        text-align: left;
    }
    .main04{
        background: none;
    }


    .main02 .content-l,.main04 .content-text,.adress-cnt,.top .top-left{
        width: 100%;
    }
    .adress.main{
        margin: 0 2.5%;
    }
    .adress p{
        width: 57%;
    }

    .lesson .lesson-cnt:first-child{
        border-top:1px solid #ddd;
    }
    .lesson .lesson-cnt{
        border-bottom:1px solid #ddd;
    }
    .lesson .lesson-cnt li{
        font-size: 14px;
    }
    .lesson h3{
        font-size: 16px;
        height: 50px;
        line-height: 50px;
        cursor: pointer;
    }
    .lesson h3 span{
        display: block;
        float: right;
        margin-right: 2%;
    }
    .lesson h3::before{
        top:45%;
    }
    .lesson .lesson-cnt{
        width: 100%;
        margin-bottom:0%;
    }
    .lesson .lesson-cnt ul{
        padding: 0% 5% 3%;
    }

    .m-news .news-title{
        margin-bottom: 2%;
    }
    .news-bg .m-news{
        width: 92%;
        padding: 4%;
        margin: 0 auto;
    }
    .m-news li{
        float: left;
        width: 48%;
        padding-left: 2%
    }


    .scrotop span,.hand,#footer,#qiao-wrap,#QIAO_INVITE_CONTAINER,#QIAO_ICON_CONTAINER .qiao-icon-sector-inner{
        display:none !important;
    }
    #QIAO_INVITE_CONTAINER{
        width:0 !important;
        height:0 !important;
    }
    .copyright,.last{
        display:block;
    }
}
@media only screen and (max-width:600px){
    .main h2,.main02 h4,.course-intro-cnt p{
        font-size: 20px;
    }
    .main04 .content-text h3,.main03 dl span,.baoming-form h3{
        font-size: 16px;
    }
    .banner p,.adress a,.nav-r > li,.nav-menu > li,.adress p,.main03 dl p,.main01 p.dis,.main02 p,.main03 p.dis,.baoming-form span,.baoming-form .btn,.course-intro-cnt a{
        font-size: 14px;
    }
    .moblie-nav .mobile-btn{
        margin-top: 0.05rem;
    }
    .main04 .content-text p,.main04 .content-text-center p{
        font-size: 14px;
        line-height: 1.5;
    }

    .main03 dl{
        width:100%;
    }

    .lesson .lesson-cnt ul {
        padding: 0 2% 3%;
    }
    .lesson .lesson-cnt {
        margin-bottom: 2%;
    }

    .m-news li{
        width: 98%;
        padding-left: 2%
    }

}

@media only screen and (max-width:768px) and (max-width:321px) {
    .main h2,.baoming-form h3{
        font-size:.528rem;
        line-height: 1.57;
    }
    .main01 p.dis,.adress p,.baoming-form span,.baoming-form .btn{
        font-size: .335rem;
        line-height: 1.57;
    }
    .main02 .more a{
        font-size: .385rem;
    }

}