/* ----------------------------banner------------------------------ */



.banner {

    width: 100%;

    height: auto;

    overflow: hidden;

    position: relative;

    margin-top: 74px;

}



@media all and (max-width:900px) {

    .banner {

        margin-top: 50px;

    }

}



.banner .swiper-container-banner {

    width: 100%;

    position: relative;

}



.swiper-container-banner .swiper-slide {

    overflow: hidden;

    position: relative;

}



.swiper-container-banner .swiper-slide img {

    width: 100%;

    object-fit: cover;

    transform: matrix(1.1, 0, 0, 1.1, 0, 0);

    -webkit-transition: all 0.4s ease 1.2s;

    -moz-transition: all 0.4s ease 1.2s;

    -ms-transition: all 0.4s ease 1.2s;

    -o-transition: all 0.4s ease 1.2s;

    transition: all 0.4s ease 1.2s;

}



.swiper-container-banner .swiper-slide-active img {

    transition-delay: 0.4s !important;

    transform: matrix(1, 0, 0, 1, 0, 0);

    -webkit-transition: all 5s ease;

    -moz-transition: all 5s ease;

    -ms-transition: all 5s ease;

    -o-transition: all 5s ease;

    transition: all 5s ease;

}



.swiper-container-banner .swiper-pagination-bullet {

    width: 10px;

    height: 10px;

    background: transparent;

    border: 1px solid #fff;
    opacity: 1;
    
}



.swiper-container-banner .swiper-pagination-bullet-active {
    
    background: #fff;
    opacity: 1;
}







/* ----------------------------------------------------------------------------------------- */

.invent-box{

    width: 100%;

    overflow: hidden;

    padding-bottom: 50px;

    padding-top: 6px;

}

.invent{

    width: 1200px;

    margin: 0 auto;

}

.invent-words{

    width: 100%;

    overflow: hidden;

    text-align: center;

}

.invent-words p{

    font-size: 14px;

    color: #888888;

    width: 70%;

    margin-left: 15%;

    line-height: 24px;

}

.invent-matter{

    width: 100%;

    overflow: hidden;

    padding: 36px 0 10px 0;

}

.invent-matter ul{

    margin-left: -1.833333333%;

}

.invent-matter ul li{

    width: 31.5%;

    height: 335px;

    overflow: hidden;

    float: left;

    margin-left: 1.833333333%;

    background-color: #f4f6f8;

}

.invent-matter ul li img{

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: all 1s ease-in-out;

}

.invent-matter ul li img:hover{

    transform: scale(1.1);

}









/* ------------------------------------teaching-box----------------------------------------------------- */

.teaching-box{

    width: 100%;

    background-color: #fcfcfc;

    overflow: hidden;

    padding-bottom: 60px;

}

.teaching{

    width: 1200px;

    margin: 0 auto;

}

.teaching-matter{

    width: 100%;

    overflow: hidden;

}

.teaching-matter .swiper-container-teaching{

    width: 100%;

    position: relative;

    padding-bottom: 60px;

}

.teaching-pic{

    width: 100%;

    height: 393px;

    overflow: hidden;

}

.teaching-pic img{

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: all 1s ease-in-out;

}

.teaching-pic img:hover{

    transform: scale(1.1);

}

.teaching-matter .swiper-pagination{

    bottom: 0;

}

.swiper-container-teaching .swiper-pagination-bullet {
    background: transparent;
    border: 1px solid #b3b3b3;
    opacity: 1;
}

.swiper-container-teaching .swiper-pagination-bullet-active {

    opacity: 1;

    background: #b3b3b3;


}













/* ----------------------------------suit-box------------------------------------------------------- */

.suit-box{

    width: 100%;

    overflow: hidden;

    padding-bottom: 60px;

    position: relative;

}

.suit{

    width: 1200px;

    margin: 0 auto;

    position: relative;

}

.suit-words{

    width: 100%;

    overflow: hidden;

    text-align: center;

}

.suit-words p{

    font-size: 14px;

    color: #888888;

    width: 70%;

    margin-left: 15%;

    line-height: 24px;

}

.suit-matter{

    width: 100%;

    overflow: hidden;

    padding-top: 40px;

}



.suit-matter .swiper-container-suit{

    width: 100%;

    position: relative;

}

.suit-pic{

    width: 100%;

    height: 280px;

    overflow: hidden;

}

.suit-pic img{

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: all 1s ease-in-out;

}

.suit-pic img:hover{

    transform: scale(1.1);

}



.swiper-suit-prev {

    position: absolute;

    top: 70%;

    left: -6%;

    z-index: 9;

    cursor: pointer;

    transform: translate(0, -50%);

}



.swiper-suit-prev h3 {

    width: 50px;

    height: 50px;

    text-align: center;

}



.swiper-suit-prev h3 i {

    display: inline-block;

    width: 12px;

    height: 23px;

    background-image: url('../images/public/click_left.png');

    background-repeat: no-repeat;

    margin-top: 13.5px;

}



.swiper-suit-prev h3:hover {

    border-radius: 100%;

    border: 1px solid #333333;

}



.swiper-suit-next {

    position: absolute;

    top: 70%;

    right: -6%;

    z-index: 9;

    cursor: pointer;

    transform: translate(0, -50%);

}



.swiper-suit-next h3 {

    width: 50px;

    height: 50px;

    text-align: center;

}



.swiper-suit-next h3 i {

    display: inline-block;

    width: 12px;

    height: 23px;

    background-image: url('../images/public/click_right.png');

    background-repeat: no-repeat;

    margin-top: 13.5px;

}



.swiper-suit-next h3:hover {

    border-radius: 100%;

    border: 1px solid #333333;

}

















/* ------------------------------------progra-box----------------------------------------------------- */

.progra-box{

    width: 100%;

    overflow: hidden;

    background-color: #fcfcfc;

    padding-bottom: 60px;

}

.progra{

    width: 1200px;

    margin: 0 auto;

}

.progra-words{

    width: 100%;

    overflow: hidden;

    text-align: center;

}

.progra-words p{

    font-size: 14px;

    color: #888888;

    width: 70%;

    margin-left: 15%;

    line-height: 24px;

}

.progra-matter{

    width: 100%;

    overflow: hidden;

    padding: 40px 6px 6px 6px;

}

.progra-matter>div{

    float: left;

    height: 352px;

}

.progra-left{

    width: 33.75%;

    background-color: #fff;

    border: 1px solid #f3f3f3;

    border-radius: 16px;

    text-align: center;

    position: relative;

    overflow: hidden;

}

.progra-left:hover{

    -moz-box-shadow: 0 4px 10px 0px #f3f3f3;

    -webkit-box-shadow: 0 4px 10px 0px #f3f3f3;

    box-shadow: 0 4px 10px 0px #f3f3f3;

}

.progra-left img{

    position: absolute;

    object-fit: cover;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

}



.progra-center{

    width: 26.6%;

    background-color: #fff;

    border: 1px solid #f3f3f3;

    border-radius: 16px;

    text-align: center;

    position: relative;

    overflow: hidden;

    margin-left: 1.4%;

    padding: 20px 36px;

}

.progra-center:hover{

    -moz-box-shadow: 0 4px 10px 0px #f3f3f3;

    -webkit-box-shadow: 0 4px 10px 0px #f3f3f3;

    box-shadow: 0 4px 10px 0px #f3f3f3;

}

.progra-center img{

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.progra-right{

    width: 36.85%;

    margin-left: 1.4%;

    text-align: center;

    position: relative;

    overflow: hidden;

}

.progra-right ul{

    margin-top: -16px;

    margin-left: -4.1%;

}

.progra-right ul li{

    width: 45.9%;

    height: 168px;

    overflow: hidden;

    border-radius: 16px;

    float: left;

    margin-left: 4.1%;

    margin-top: 16px;

}

.progra-right ul li img{

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: all .6s ease-in-out;

}

.progra-right ul li img:hover{

    transform: scale(1.1);

}







/* -----------------------------series-box------------------------------------------------------------ */

.series-box{

    width: 100%;

    overflow: hidden;

    padding-bottom: 60px;

}

.series{

    width: 1200px;

    margin: 0 auto;

}

.series-matter{

    width: 100%;

}

.series-matter ul{

    font-size: 0;

    text-align: center;

}

.series-matter ul li{

    display: inline-block;

    width: 296px;

    height: 410px;

    overflow: hidden;

    margin: 0 10px;

}

.series-matter ul li img{

    width: 100%;

    height: 100%;

    object-fit: cover;transition: all .8s ease-in-out;

}

.series-matter ul li img:hover{

    transform: scale(1.1);

}





/* ---------------------------------------------------------------- */

/* ---------------------------------------------------------------- */



/* -------------------------PC端--------------------------- */



@media all and (max-width:1380px) {

    .swiper-suit-next {

        top: auto;

        bottom: 0;

        right: 40%;

    }

    .swiper-suit-prev {

        top: auto;

        bottom: 0;

        left: 40%;

    }

    .suit-box .swiper-container-suit{

        padding-bottom: 100px;

    }

    .suit-box {

        padding-bottom: 60px;

    }

}



@media all and (max-width:1280px) {

    .invent {

        width: 94%;

        margin-left: 3%;

    }

    .teaching {

        width: 94%;

        margin-left: 3%;

    }

    .teaching-pic {

        height: 300px;

    }

    .invent-matter ul li {

        height: 280px;

    }

    .suit {

        width: 94%;

        margin-left: 3%;

    }

    .suit-pic {

        height: 220px;

    }

    .progra {

        width: 94%;

        margin-left: 3%;

    }

    .series {

        width: 94%;

        margin-left: 3%;

    }

    .series-matter ul li {

        width: 33.333333333%;

        margin: 0 0;

    }

}





/* ------------------------手机端-------------------------- */



@media all and (max-width:900px) {

    .invent-words p {

        font-size: 12px;

        width: 100%;

        margin-left: 0%;

        line-height: 22px;

    }

    .invent-matter ul li {

        height: auto;

    }

    .invent-matter {

        padding: 18px 0 10px 0;

    }

    .invent-box {

        padding-bottom: 16px;

    }

    .teaching-pic {

        height: auto;

    }

    .teaching-box {

        padding-bottom: 30px;

    }

    .suit-words p {

        font-size: 12px;

        width: 100%;

        margin-left: 0%;

        line-height: 22px;

    }

    .suit-pic {

        height: auto;

    }

    .swiper-suit-next {

        right: 30%;

    }

    .swiper-suit-prev {

        left: 30%;

    }

    .progra-words p {

        font-size: 12px;

        width: 100%;

        margin-left: 0%;

        line-height: 22px;

    }

    .progra-left {

        width: 100%;

    }

    .progra-center {

        width: 100%;

        margin-top: 16px;

    }

    .progra-right {

        width: 100%;

        margin-top: 16px;

    }

    .progra-right ul li {

        height: 120px;

    }

    .progra-matter>div {

        float: left;

        height: 274px;

    }

    .progra-box {

        padding-bottom: 20px;

    }

    .series-matter ul li {

        width: 100%;

        height: auto;

        margin-top: 16px;

    }

    .series-box {

        padding-bottom: 34px;

    }





}