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



.banner {

    width: 100%;

    overflow: hidden;

    margin-top: 74px;

    position: relative;

}



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

    .banner {

        margin-top: 50px;

    }

}



.banner img {

    width: 100%;

    object-fit: cover;

}



.banner-words {

    position: absolute;

    left: 50%;

    top: 50%;

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

    color: #ffffff;

    text-align: center;

}



.banner-words h4 {

    font-size: 40px;

    animation: Hdown 1s ease-in-out both;

}



@keyframes Hdown {

    0% {

        transform: translateY(-30px);

    }

    100% {

        transform: translateY(0px);

    }

}



.banner-words p {

    font-size: 20px;

    margin-top: 6px;

    animation: Hup 1s ease-in-out both;

}



@keyframes Hup {

    0% {

        transform: translateY(30px);

    }

    100% {

        transform: translateY(0px);

    }

}



/* ---------------------------------require-box--------------------------------- */



.require-box {

    width: 100%;

    overflow: hidden;

    padding-bottom: 80px;

}



.require {

    width: 1200px;

    margin: 0 auto;

}



.require-matter {

    width: 100%;

    overflow: hidden;

    padding: 6px 6px;

}



.require-matter ul {

    margin-left: -1%;

}



.require-matter ul li {

    width: 24%;

    margin-left: 1%;

    height: 276px;

    float: left;

    -moz-box-shadow: 0 2px 10px 0 #cacaca;

    -webkit-box-shadow: 0 2px 10px 0 #cacaca;

    box-shadow: 0 2px 10px 0 #cacaca;

    text-align: center;

    margin-top: 16px;

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

}



.require-matter ul li h4 {

    font-size: 34px;

    font-weight: bold;

    margin-top: 60px;

}



.require-matter ul li i {

    display: block;

    width: 44px;

    height: 2px;

    margin: 0 auto;

}



.require-matter ul li p {

    font-size: 16px;

    overflow: hidden;

    display: -webkit-box;

    text-overflow: ellipsis;

    -webkit-line-clamp: 4;

    -webkit-box-orient: vertical;

    width: 84%;

    margin-left: 8%;

    line-height: 24px;

    margin-top: 36px;

}



.require-matter ul li:nth-child(1) {

    border-top: 3px solid #00a6d1;

}



.require-matter ul li:nth-child(1) h4 {

    color: #00a6d1;

}



.require-matter ul li:nth-child(1) i {

    background-color: #00a6d1;

}



.require-matter ul li:nth-child(1) p {

    color: #555555;

}



.require-matter ul li:nth-child(1):hover {

    background-color: #00a6d1;

}



.require-matter ul li:nth-child(1):hover h4 {

    color: #fff;

}



.require-matter ul li:nth-child(1):hover i {

    background-color: #fff;

}



.require-matter ul li:nth-child(1):hover p {

    color: #fff;

}



.require-matter ul li:nth-child(2) {

    border-top: 3px solid #b7d331;

}



.require-matter ul li:nth-child(2) h4 {

    color: #b7d331;

}



.require-matter ul li:nth-child(2) i {

    background-color: #b7d331;

}



.require-matter ul li:nth-child(2) p {

    color: #555555;

}



.require-matter ul li:nth-child(2):hover {

    background-color: #b7d331;

}



.require-matter ul li:nth-child(2):hover h4 {

    color: #fff;

}



.require-matter ul li:nth-child(2):hover i {

    background-color: #fff;

}



.require-matter ul li:nth-child(2):hover p {

    color: #fff;

}



.require-matter ul li:nth-child(3) {

    border-top: 3px solid #f7ab00;

}



.require-matter ul li:nth-child(3) h4 {

    color: #f7ab00;

}



.require-matter ul li:nth-child(3) i {

    background-color: #f7ab00;

}



.require-matter ul li:nth-child(3) p {

    color: #555555;

}



.require-matter ul li:nth-child(3):hover {

    background-color: #f7ab00;

}



.require-matter ul li:nth-child(3):hover h4 {

    color: #fff;

}



.require-matter ul li:nth-child(3):hover i {

    background-color: #fff;

}



.require-matter ul li:nth-child(3):hover p {

    color: #fff;

}



.require-matter ul li:nth-child(4) {

    border-top: 3px solid #ec6900;

}



.require-matter ul li:nth-child(4) h4 {

    color: #ec6900;

}



.require-matter ul li:nth-child(4) i {

    background-color: #ec6900;

}



.require-matter ul li:nth-child(4) p {

    color: #555555;

}



.require-matter ul li:nth-child(4):hover {

    background-color: #ec6900;

}



.require-matter ul li:nth-child(4):hover h4 {

    color: #fff;

}



.require-matter ul li:nth-child(4):hover i {

    background-color: #fff;

}



.require-matter ul li:nth-child(4):hover p {

    color: #fff;

}



/* ----------------------------------slogan-pic------------------------------------ */



.slogan-pic {

    width: 100%;

    overflow: hidden;

}



.slogan-pic img {

    width: 100%;

    object-fit: cover;

}



/* --------------------------------travel-box-------------------------------------- */



.travel-box {

    width: 100%;

    overflow: hidden;

    background-color: #f7f7f7;

    padding-bottom: 70px;

}



.travel {

    width: 1200px;

    margin: 0 auto;

}



.travel-matter {

    width: 100%;

}



.travel-total {

    width: 100%;

    overflow: hidden;

    margin-top: 20px;

}



.travel-total>div {

    float: left;

}



.travel-left {

    width: 19.3%;

    height: 157px;

    position: relative;

    text-align: center;

    overflow: hidden;

}



.travel-left img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.travel-left p {

    position: absolute;

    top: 50%;

    left: 0;

    transform: translate(0, -50%);

    width: 100%;

    font-size: 24px;

    color: #fff;

}



.travel-right {

    width: 80.7%;

    height: 157px;

    overflow: hidden;

}



.travel-right ul li {

    width: 23.2%;

    float: left;

    position: relative;

    border-radius: 10px;

    overflow: hidden;

    margin-left: 1.8%;

}



.travel-right ul li img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.travel-right ul li div {

    width: 100%;

    height: 100%;

    color: #fff;

    position: absolute;

    top: 0%;

    left: 0%;

    background-color: rgba(0, 0, 0, .55);

    text-align: center;

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

}



.travel-right ul li div p {

    font-size: 18px;

    width: 100%;

    margin-top: 68px;

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

}



.travel-right ul li div h4 {

    font-size: 13px;

    width: 100%;

    margin-top: 20px;

    opacity: 0;

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

}



.travel-right ul li:hover div {

    background-color: rgba(13, 183, 190, .8);

}



.travel-right ul li:hover h4 {

    opacity: 1;

}



.travel-right ul li:hover p {

    margin-top: 50px;

}



/* ---------------------------------dream-box------------------------------------- */



.dream-box {

    width: 100%;

    overflow: hidden;

    padding-bottom: 60px;

}



.dream {

    width: 1200px;

    margin: 0 auto;

}



.dream-matter {

    width: 100%;

}



.dream-matter ul li {

    float: left;

    width: 25%;

    text-align: center;

    height: 354px;

    border: 1px solid #fafafa;

}



.dream-matter ul li h4 {

    width: 180px;

    height: 180px;

    border-radius: 100%;

    margin: 0 auto;

    margin-top: 50px;

    border: 1px solid #f4f4f4;

    transition: all .6s ease-in;

}



.dream-matter ul li h4 img {

    width: 100%;

    height: 100%;

    object-fit: cover;

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

}



.dream-matter ul li p {

    font-size: 15px;

    color: #555555;

    width: 66%;

    margin-left: 17%;

    margin-top: 20px;

    line-height: 24px;

    overflow: hidden;

    display: -webkit-box;

    text-overflow: ellipsis;

    -webkit-line-clamp: 4;

    -webkit-box-orient: vertical;

}



.dream-matter ul li:hover h4 {

    transform: translateY(-10px);

}



.dream-matter ul li:hover img {

    transform: scale(1.06);

}



/* ---------------------------serve-box------------------------------------------- */



.serve-box {

    width: 100%;

    height: 584px;

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

    background-repeat: no-repeat;

    overflow: hidden;

}



.serve {

    width: 1200px;

    margin: 0 auto;

}



.serve-matter {

    width: 100%;

}



.serve-matter ul li {

    width: 16.6666%;

    float: left;

    height: 290px;

    overflow: hidden;

    position: relative;

    background-color: #fff;

    border: 2px solid #fbd787;

}



.serve-matter ul li h1 {

    width: 100%;

    height: 100%;

    overflow: hidden;

    opacity: 0;

}



.serve-matter ul li h1 img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.serve-icon {

    position: absolute;

    top: 0%;

    left: 0%;

    z-index: 9;

    width: 100%;

    text-align: center;

}



.serve-icon h5 {

    width: 92px;

    height: 92px;

    border-radius: 100%;

    margin: 0 auto;

    text-align: center;

    margin-top: 60px;

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

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

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

}



.serve-icon h5 i {

    display: inline-block;

    background-repeat: no-repeat;

}



.serve-icon p {

    font-size: 18px;

    color: #333333;

    margin-top: 30px;

}



.serve-matter ul li:hover {

    border: none;

}



.serve-matter ul li:hover h1 {

    opacity: 1;

}



.serve-matter ul li:hover h5 {

    border: 1px solid #fff;

    background-color: transparent;

    -moz-box-shadow: none;

    -webkit-box-shadow: none;

    box-shadow: none;

}



.serve-matter ul li:hover p {

    color: #fff;

}



.serve-ic1 {

    background-color: #01b3bb;

}



.serve-ic1 i {

    width: 41px;

    height: 41px;

    margin-top: 25.5px;

    background-image: url('../images/camp/server_ic1.png');

}



.serve-ic2 {

    background-color: #b7d331;

}



.serve-ic2 i {

    width: 51px;

    height: 25px;

    margin-top: 33.5px;

    background-image: url('../images/camp/server_ic2.png');

}



.serve-ic3 {

    background-color: #f7ac00;

}



.serve-ic3 i {

    width: 46px;

    height: 42px;

    margin-top: 25px;

    background-image: url('../images/camp/server_ic3.png');

}



.serve-ic4 {

    background-color: #fac03d;

}



.serve-ic4 i {

    width: 34px;

    height: 42px;

    margin-top: 25px;

    background-image: url('../images/camp/server_ic4.png');

}



.serve-ic5 {

    background-color: #00a6d1;

}



.serve-ic5 i {

    width: 50px;

    height: 43px;

    margin-top: 24.5px;

    background-image: url('../images/camp/server_ic5.png');

}



.serve-ic6 {

    background-color: #ec6900;

}



.serve-ic6 i {

    width: 36px;

    height: 43px;

    margin-top: 24.5px;

    background-image: url('../images/camp/server_ic6.png');

}



/* ---------------------------------teamwork-box------------------------------------- */



.teamwork-box {

    width: 100%;

    overflow: hidden;

    padding-bottom: 60px;

}



.teamwork {

    width: 1200px;

    margin: 0 auto;

}



.teamwork-matter {

    width: 100%;

    height: 440px;

    position: relative;

}



.teamwork-matter div {

    text-align: center;

    width: 200px;

    overflow: hidden;

    position: absolute;

}



.teamwork-matter h2 {

    font-size: 26px;

    font-weight: bold;

    color: #a4c13c;

}



.teamwork-matter p {

    font-size: 16px;

    color: #555555;

    line-height: 24px;

    margin: 20px 0 28px 0;

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

}



.teamwork-matter h4 {

    overflow: hidden;

    width: 49px;

    height: 49px;

    border-radius: 100%;

    background-repeat: no-repeat;

    margin: 0 auto;

}



.teamwork-ic1 {

    left: 0%;

    bottom: 0%;

}



.teamwork-ic1 h4 {

    background-image: url('../images/camp/flow_1.png');

}



.teamwork-ic2 {

    left: 16%;

    bottom: 14%;

}



.teamwork-ic2 h4 {

    background-image: url('../images/camp/flow_2.png');

}



.teamwork-ic3 {

    left: 34%;

    bottom: 30%;

}



.teamwork-ic3 h4 {

    background-image: url('../images/camp/flow_3.png');

}



.teamwork-ic4 {

    right: 32%;

    top: 20%;

}



.teamwork-ic4 h4 {

    background-image: url('../images/camp/flow_4.png');

}



.teamwork-ic5 {

    right: 16%;

    top: 10%;

}



.teamwork-ic5 h4 {

    background-image: url('../images/camp/flow_5.png');

}



.teamwork-ic6 {

    right: 0%;

    top: 0%;

}



.teamwork-ic6 h4 {

    background-image: url('../images/camp/flow_6.png');

}



.teamwork-matter div:hover p {

    margin: 10px 0 18px 0;

}



/* ------------------------calssroom-box---------------------------------- */



.classroom-box {

    width: 100%;

    overflow: hidden;

    padding-bottom: 60px;

    position: relative;

    background-color: #f8f8f8;

}



.classroom {

    width: 1200px;

    margin: 0 auto;

}



.classroom-matter {

    width: 100%;

    overflow: hidden;

}



.classroom-matter .swiper-container-classroom {

    width: 100%;

    position: relative;

}



.classroom-words {

    width: 100%;

    height: 287px;

    border-radius: 30px;

    overflow: hidden;

    position: relative;

    z-index: 33;

}



.classroom-words h4 {

    width: 100%;

    height: 100%;

    position: relative;

    overflow: hidden;

}



.classroom-words h4 img {

    width: 100%;

    height: 100%;

    object-fit: cover;

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

}



.classroom-words h4 img:hover {

    transform: scale(1.1);

}



.classroom-words p {

    width: 100%;

    position: absolute;

    left: 0;

    bottom: 0;

    font-size: 14px;

    color: #fafafa;

    background-color: rgba(0, 0, 0, .5);

    padding: 15px 0;

    text-align: center;

}



.swiper-classroom-prev {

    position: absolute;

    top: 60%;

    left: 15%;

    z-index: 9;

    cursor: pointer;

    transform: translate(0, -50%);

}



.swiper-classroom-prev h3 {

    width: 50px;

    height: 50px;

    text-align: center;

}



.swiper-classroom-prev h3 i {

    display: inline-block;

    width: 12px;

    height: 23px;

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

    background-repeat: no-repeat;

    margin-top: 13.5px;

}



.swiper-classroom-prev h3:hover {

    border-radius: 100%;

    border: 1px solid #333333;

}



.swiper-classroom-next {

    position: absolute;

    top: 60%;

    right: 15%;

    z-index: 9;

    cursor: pointer;

    transform: translate(0, -50%);

}



.swiper-classroom-next h3 {

    width: 50px;

    height: 50px;

    text-align: center;

}



.swiper-classroom-next h3 i {

    display: inline-block;

    width: 12px;

    height: 23px;

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

    background-repeat: no-repeat;

    margin-top: 13.5px;

}



.swiper-classroom-next h3:hover {

    border-radius: 100%;

    border: 1px solid #333333;

}



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



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



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



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



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

    .require {

        width: 94%;

        margin-left: 3%;

    }

    .travel {

        width: 94%;

        margin-left: 3%;

    }

    .travel-left {

        height: auto;

    }

    .travel-right ul li div p {

        margin-top: 46px;

    }

    .dream {

        width: 94%;

        margin-left: 3%;

    }

    .serve {

        width: 94%;

        margin-left: 3%;

    }

    .teamwork {

        width: 94%;

        margin-left: 3%;

    }

    .classroom {

        width: 94%;

        margin-left: 3%;

    }

    .classroom-words {

        height: 224px;

    }

    .classroom-box {

        padding-bottom: 100px;

    }

    .swiper-classroom-prev {

        top: auto;

        bottom: 0;

        left: 40%;

    }

    .swiper-classroom-next {

        top: auto;

        bottom: 0;

        right: 40%;

    }

}



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



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

    .banner-words h4 {

        font-size: 14px;

    }

    .banner-words p {

        font-size: 12px;

        margin-top: 4px;

    }

    .require-matter ul {

        margin-left: -2%;

    }

    .require-matter ul li {

        width: 48%;

        margin-left: 2%;

        height: 190px;

    }

    .require-matter ul li h4 {

        font-size: 22px;

        margin-top: 40px;

    }

    .require-matter ul li i {

        width: 32px;

    }

    .require-matter ul li p {

        font-size: 14px;

        line-height: 22px;

        margin-top: 16px;

    }

    .require-box {

        padding-bottom: 20px;

    }

    .travel-left {

        width: 99%;

        height: auto;

    }

    .travel-right {

        width: 100%;

        height: auto;

    }

    .travel-right ul li {

        width: 98%;

        margin-left: 0%;

        float: none;

        margin-top: 16px;

    }

    .travel-total {

        width: 50%;

        float: left;

    }

    .travel-left p {

        font-size: 18px;

    }

    .travel-right ul li div p {

        margin-top: 36px;

        font-size: 15px;

    }

    .travel-right ul li:hover p {

        margin-top: 26px;

    }

    .travel-box {

        padding-bottom: 32px;

    }

    .dream-matter ul li {

        width: 100%;

    }

    .dream-box {

        padding-bottom: 32px;

    }

    .serve-box {

        height: auto;

        background-image: none;

        background-color: #f7ac00;

        overflow: hidden;

        padding-bottom: 24px;

    }

    .serve-matter ul li {

        width: 50%;

        height: 200px;

    }

    .serve-icon h5 {

        width: 80px;

        height: 80px;

        margin-top: 26px;

    }

    .teamwork-matter div {

        width: 33.33333333333333%;

        position: static;

        float: left;

        margin-top: 20px;

    }

    .teamwork-matter h2 {

        font-size: 20px;

    }

    .teamwork-matter p {

        font-size: 12px;

        line-height: 18px;

        margin: 4px 0 6px 0;

        height: 36px;

        overflow: hidden;

        display: -webkit-box;

        text-overflow: ellipsis;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

    }

    .teamwork-matter {

        height: auto;

    }

    .teamwork-box {

        padding-bottom: 34px;

    }

    .teamwork-matter div:hover p {

        margin: 4px 0 6px 0;

    }



    .classroom-words {

        height: auto;

    }









    .swiper-classroom-prev {

        top: auto;

        bottom: 0;

        left: 30%;

    }

    .swiper-classroom-next {

        top: auto;

        bottom: 0;

        right: 30%;

    }

}