.banner ul{
    position: relative;
}
@media screen and (min-width: 1200px){

    .htmleaf-container{
        background: #FFFFFF;
        margin-top: 1px;
    }
    .banner{
        width: 100%;
        background: #FFFFFF;
        height: 600px;
        position: relative;

        overflow: hidden;
    }
    .mobile-banner{
        display:none;
    }

    .banner ul li{

        width: 100%;
        height: 600px;
        float: left;
        position: relative;
        background:  no-repeat center center;
           overflow: hidden;
    }
    .banner ol{

        background: #fff;
        position: absolute;
        left:0;

        /*margin-left: -45px;
        bottom: 32px;*/
        /*padding: 0 10px;*/

    }
    .banner ol li:nth-child(2){
        background: url("../style/nav2.png") no-repeat 0 0px;
        background-size: 45%;
        background-position: center;

    }
    .banner ol li:nth-child(3){
       background: url("../style/nav3.png") no-repeat 0 0px;
        background-size: 45%;
        background-position: center;

    }


    .banner ol li{
        width: 60px;
        height: 60px;
        float: left;
        margin: 5px 3px;
        /*border-radius:60px;*/
        cursor: pointer;
   background: url("../style/nav1.png") no-repeat 0 0px;
        background-size: 40%;
        background-position: center;
        position: relative;

    }

    .banner ol .current{

        width: 60px;
        height: 60px;
        float: left;
        margin: 5px 3px;
        border-radius:60px;
        cursor: pointer;

      background: url("../image/nav1-0.png") no-repeat 0 0px;
        background-size: 100%;
        background-position: center;


    }
    .current img{
        position: absolute;
        top: 0;
        width:63px;
    }
    .banner i{
        width: 58px;
        height: 120px;
        position: absolute;
        top: 50%;
        margin-top: -60px;
        cursor: pointer;
        border-radius: 5px;
        display: none;
    }
    .banner .left{
        left: 60px;
      
         background: url('../style/glyphicons-halflings-regular.eot') no-repeat 0 0px;
        background: red;
        display: block;
    }
    .banner .right{

 
        right: 60px;
        background: url('../style/glyphicons-halflings-regular.eot') no-repeat 0px -120px;
        background: red;
        display: block;
    }
    .banner .left:hover , .banner .right:hover{
        background-color: rgba(0, 0, 0, 0.31);
        display: block;
    }

    #oul>li{
        color: #fff;
        font-size: 14px;
    }
    .index-lunbo1{
        text-align: left;
        width: 1200px;
        height: 600px;

        margin: 0 auto;
        position: relative;

    }



    #notice_con>p:nth-child(3){
        width: 1010px;
    }
    .animate-title{
        width: 315px;
        height: 48px;
        position: absolute;
        left: 300px;
        z-index: 1;
        color: #f45153;
        font-size: 40px;
        top: 110px;

    }
    .animate-img01{
        width: 477px;
        height: 270px;
        background: url(../style/banner01.png) no-repeat center center;
        background-size: 87%;
        background-position-x: 17px;
        position: absolute;
        left: 80px;
        z-index: 1;
        top: -58px;
    }
    .animate-img03{
        width: 477px;
        height: 270px;
        background: url(../style/banner03.png) no-repeat center center;
        background-size: 87%;
        background-position-x: 17px;
        position: absolute;
        left: 50px;
        z-index: 1;
        top: -45px;
    }
    .banner .animate-img {
        width: 840px;
        height: 470px;


        float: right;
         background: url(../style/banner1.png) no-repeat center center;
        background-size: 95%;
        background-position-x: 17px;
        position: absolute;
        top: 24px;
        right: 0;
    }

    .banner .animate-img3 {
        width: 840px;
        height: 470px;
         background: url(../style/banner3.png) no-repeat center center;
        background-size: 66%;
        right: -100px;

        z-index: 1;
        top: 34px;
        position: absolute;
    }
    .banner .animate-img2 {
        width: 840px;
        height: 470px;
       background: url(../style/banner2.png) no-repeat center center;
        background-size: 85%;
        right: -7px;
        z-index: 1;
        top: 21px;
        position: absolute;
    }
    .animate-title3 {
        width: 538px;
        height: 270px;

        color:#999 ;

        position: absolute;
        top: 214px;

    }
    .animate-title3 p{
        float: right;
        padding-bottom: 12px;
        font-size: 18px;
    }
    .animate-title3 p:nth-child(0){
        font-size: 30px;
    }
    .animate-title3 p:nth-child(1){
        font-size: 24px;
    }
    .animate-title3 p:nth-child(1) span{
        font-size: 48px;
        color: #333;
        font-weight: 400;
    }
    .animate-title3 p:nth-child(2){
        font-size: 25px;
    }
    .index-lunbo2 .animate-title{
        left: 298px;
    }
    .animate-title4{
        width: 540px;
    }
    .changeimg{



        position: absolute;
        left: -85px;
        transform: translate(-50%,0);
        -webkit-transform: translate(-50%,0);
        -ms-transform: translate(-50%,0);
        -o-transform: translate(-50%,0);
        -moz-transform: translate(-50%,0);

 
        border-radius: 10px;
        width: 65px;
        height: 35px;
        bottom: -44px;

    }
    .changeimg img{
        width: 65px;

    }



    .banner_content {


        font-size: 16px;
        padding: 10px;
        position: absolute;
        bottom: 10px;
        z-index: 1;

        text-align: center;
        width: 100%;

    }
    .banner_content p:nth-child(1){
        width: 100%;
        height: 21px;
        left: 0px;
        top: 10px;
        position: absolute;
       background: url(../style/bannertouying.png);
        background-position: center;
        background-size: 13%;
        overflow: hidden;

    }
    .banner_content p:nth-child(2){
        width: 100%;
        height: 21px;
        left: 0px;
        top: 11px;
        position: absolute;
        background: url(../style/bannertouying2.png);
        background-position: center;
        background-size: 60%;
        background-repeat: no-repeat;

    }
    .banenrfoor {
        padding: 10px;
        position: absolute;
        left:34%;
        bottom:120px;
        width: 30%;

    }
    .banenrfoor li{
        float: left;
    }
}


@media (min-width: 767px)and (max-width: 1200px){
    html, body {
        overflow-x: hidden;
    }
    .htmleaf-containerP{
        background: #FFFFFF;
        margin-top: 1px;
    }
    .banner{
        /*    height: 215px;*/
        background: #fff;
        margin-top: 1px;
        position: relative;
    }
    .banner ul li{
        width: 100%;

        float: left;

    }


    .pc-banner{
        display:none;
    }
    .banner ol{

        background: #fff;
        position: absolute;
        left:0%;
        transform: translate(-50%,0);
        -webkit-transform: translate(-50%,0);
        -ms-transform: translate(-50%,0);
        -o-transform: translate(-50%,0);
        -moz-transform: translate(-50%,0);

        /*padding: 0 10px;*/
        border-radius: 10px;
    }
    .banner ol li:nth-child(2){
        background: url("../style/nav2.png") no-repeat 0 0px;
        background-size: 55%;
        background-position: center;

    }
    .banner ol li:nth-child(3){
        background: url("../style/nav3.png") no-repeat 0 0px;
        background-size: 55%;
        background-position: center;

    }
    .banner ol li{
        background: url("../style/glyphicons-halflings-regular.eot") no-repeat 0 0px;
        background-size: 55%;
        background-position: center;

    }


    .banner ol li{
        width: 2.8em;
        height: 2.8em;
        float: left;
        margin: 0px 2px;
        /*border-radius:60px;*/
        cursor: pointer;
        position: relative;


    }

    .banner ol .current{

        width: 3em;
        height:3em;
        float: left;
        margin: 0px 2px;

        cursor: pointer;

        background: url("../image/nav1-0.png") no-repeat 0 0px;
        background-size: 100%;
        background-position: center;


    }
    .banner i{
        width: 58px;
        height: 120px;
        position: absolute;
        top: 50%;
        margin-top: -60px;
        cursor: pointer;
        border-radius: 5px;
        display: none;
    }
    .banner .left{
        left: 60px;
        background: red;
        background: url('../style/glyphicons-halflings-regular.eot') no-repeat 0 0px;
        background: red;
        display: block;
    }
    .banner .right{

        background: red;
        right: 60px;
        background: url('../style/glyphicons-halflings-regular.eot') no-repeat 0px -120px;
        background: red;
        display: block;
    }
    .banner .left:hover , .banner .right:hover{
        background-color: rgba(0, 0, 0, 0.31);
        display: block;
    }

    #oul>li{
        color: #fff;
        font-size: 14px;
    }
    .banner ol li{
        position: relative;
    }
.changeimg img,.banner ol li img{
    width:3em;
    position: absolute;
    top: 0;
    left: 0;
}
    .changeimg img{
        top: 0;
    }

    .banner_content p:nth-child(2) {
        width: 100%;
        height: 21px;
        left: 0px;

        bottom: -7px;
        position: absolute;
        background: url(../style/bannertouying2.png);
        background-position: center;
        background-size: 95%;
        background-repeat: no-repeat;
    }

    .changeimg{

        position: absolute;
        left:-8em;
        bottom: -2em;
        width:3em;
        height:3em;

    bottom: -2.8em;
    }
    .banenrfoor {
        padding: 10px;
        position: absolute;
        left:34%;
        bottom:100px;
        width: 30%;

    }
    .banenrfoor li{
        float: left;
    }


}

@media screen and (max-width: 767px) {
    html, body {
        overflow-x: hidden;
    }
    .htmleaf-containerP{
        background: #FFFFFF;
        margin-top: 1px;
    }
    .banner{
        /*    height: 215px;*/
        background: #fff;
        margin-top: 1px;
        position: relative;
    }
    * .banner ul li{

        width: 100%;

        float: left;
        position: relative;
        /*height: 250px;*/
        /* background: url('../img/598617238755155038.jpg') no-repeat center center;
         background-size: 100%;*/

    }
    /*   .banner ul li:nth-child(1){
           background: url('../style/glyphicons-halflings-regular.eot') no-repeat center center;
           background-size: 100%;
           background-position: center;
       }*/

    .pc-banner{
        display:none;
    }
    .banner ol{

        background: #fff;
        position: absolute;
        left:6em;
        transform: translate(-50%,0);
        -webkit-transform: translate(-50%,0);
        -ms-transform: translate(-50%,0);
        -o-transform: translate(-50%,0);
        -moz-transform: translate(-50%,0);

        bottom: 1em;
        /*padding: 0 10px;*/
        border-radius: 10px;
    }
    .banner ol li:nth-child(2){
         background: url("../style/nav2.png") no-repeat 0 0px;
        background-size: 55%;
        background-position: center;

    }
    .banner ol li:nth-child(3){
       background: url("../style/nav3.png") no-repeat 0 0px;
        background-size: 55%;
        background-position: center;

    }
    .banner ol li{
         background: url("../style/nav1.png") no-repeat 0 0px;
        background-size: 55%;
        background-position: center;

    }


    .banner ol li{
        width: 1.8em;
        height: 1.8em;
        float: left;
        margin: 0px 2px;
        /*border-radius:60px;*/
        cursor: pointer;


    }

    .banner ol .current{

        width: 2em;
        height:2em;
        float: left;
        margin: 0px 2px;
        border-radius:1.5em;
        cursor: pointer;

         background: url("../image/nav1-0.png") no-repeat 0 0px;
        background-size: 100%;
        background-position: center;


    }
    .banner ol .current img , .changeimg img{

width: 2em;


    }

    .banner i{
        width: 58px;
        height: 120px;
        position: absolute;
        top: 50%;
        margin-top: -60px;
        cursor: pointer;
        border-radius: 5px;
        display: none;
    }
    .banner .left{
        left: 60px;
        background: red;
        background: url('../style/glyphicons-halflings-regular.eot') no-repeat 0 0px;
        background: red;
        display: block;
    }
    .banner .right{

        background: red;
        right: 60px;
        background: url('../style/glyphicons-halflings-regular.eot') no-repeat 0px -120px;
        background: red;
        display: block;
    }
    .banner .left:hover , .banner .right:hover{
        background-color: rgba(0, 0, 0, 0.31);
        display: block;
    }

    #oul>li{
        color: #fff;
        font-size: 14px;
    }

    .index-lunbo1{
        text-align: left;
        width: 100%;
        height: 194px;
        overflow: hidden;
        margin: 0 auto;
        position: relative;


    }


    #notice_con>p:nth-child(3){
        width: 1010px;
    }
    .animate-title{
        width: 39%;
        position: absolute;
        left: 28%;
        z-index: 1;
        color: #f45153;
        font-size: 16;
        top: 14%;

    }
    .animate-img01{
        width: 53%;
        height: 13%;
         background: url(../style/banner01.png) no-repeat center center;
        background-size: 99%;
        background-position-x: 17px;
        position: absolute;
        left: 0;
        z-index: 1;
        top: 4%;

    }
    .banner .animate-img {
        width: 73%;
        height: 42%;
        float: right;
  background: url(../style/banner1.png) no-repeat center center;
        background-size: 99%;
        background-position-x: 17px;
        position: absolute;
        top: 5%;
        right: 0;
    }

    .banner .animate-img3 {
        width: 840px;
        height: 470px;
        background: url(../style/banner3.png) no-repeat center center;
        background-size: 99%;

        z-index: 1;
        top: 5%;
        position: absolute;
    }
    .banner .animate-img2 {
        width: 840px;
        height: 470px;
       background: url(../style/banner2.png) no-repeat center center;
        background-size: 99%;
        top: 5%;
        z-index: 1;

        position: absolute;
    }
    .animate-title3 {
        width: 57%;


        color:#999 ;

        position: absolute;
        top: 27%;

    }
    .animate-title3 p{
        float: right;

        font-size:12px;
    }
    .animate-title3 p:nth-child(0){
        font-size: 2.5px;
    }
    .animate-title3 p:nth-child(1){
        font-size:12px;
    }
    .animate-title3 p:nth-child(1) span{

        font-size:16px;
        font-weight: 400;
        color: #333;
    }
    .animate-title3 p:nth-child(2){

        font-size:12px;



    }
    .animate-title3 p:nth-child(3){

        display: none;



    }

    .changeimg{

        position: absolute;
        left:0em;

        width:2em;
        height:2em;

        bottom: 0.8em;
    }


    .banenrfoor {
        padding: 10px;
        position: absolute;
        left:30%;
        bottom:0em;
        width: 70%;

    }
    .banenrfoor li{
        float: left;
    }
    .footen {
        display: inline-block;
        padding: 3px;
        position: absolute;
        left: 0;

       background: url("../style/footeren.png")no-repeat ;

        background-size: 100%;
        bottom: 5px;
        width: 100%;
        overflow: hidden;

    }

    .banner_content p:nth-child(2) {
        width: 100%;
        height: 21px;
        left: 0px;
        /* top: 11px; */
        bottom: -7px;
        position: absolute;
        background: url(../style/bannertouying2.png);
        background-position: center;
        background-size: 95%;
        background-repeat: no-repeat;
    }


}