@charset "utf-8";
.banner{ position: relative; z-index: 1; overflow: hidden;}
.banner .swiper-slide{ max-width: unset; filter: none;}
.banner .gp-img-responsive{ padding-bottom: 48.8%;}
.swiper-container-horizontal > .swiper-pagination-bullets{ position: absolute; bottom: 30rem; left: 50%; transform: translateX(-50%); width: auto; z-index: 2;}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{ width: 200rem; height: 10rem; margin: 0 15rem; background: #fff; border-radius: 0; opacity: 1; position: relative;}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet::before{ content: ''; display: block; width: 0%; height: 100%; background: #7c0000;
    position: absolute; top: 0; left: 0; z-index: 1; transition: all 0.35s linear;}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet-active::before{ transition: all 4s linear; width: 100%;}

.modeTil{ overflow: hidden;}
.modeTil a{ display: inline-block; color: #111; line-height: 36rem;}
.modeTil .title{ position: relative;}
.modeTil .title::before{ content: ''; display: block; width: 1rem; height: 100%; background: #d9d2cb; position: absolute; top: 0; right: -30rem;}
.modeTil .title::after{ content: ''; display: block; width: 1165rem; height: 1rem; background: #d9d2cb; position: absolute; left: calc(100% + 30rem); top: 50%; transform: translateY(-50%);}
.modeTil .more{ color: #7c0000; background: #f7f4f1; line-height: 32rem; padding-left: 37rem; padding-right: 18rem; margin-top: 2rem; border: 1px solid #d9d2cb; border-radius: 16rem; position: relative; z-index: 1;}
.modeTil .more::before{ content: ''; display: block; width: 14rem; height: 14rem; background: url(../images/index_more.png) no-repeat center;
    position: absolute; left: 18rem; top: 50%; transform: translateY(-50%);}
.gp-img-responsive{ padding-bottom: 56.25%; transition: all 1s ease;}
a:hover .gp-img-responsive{ background-size: 110% auto !important;}
.row1{ padding: 60rem 0 80rem; background: #f7f4f1;}
.row1 .modeCon{ margin-top: 40rem;}
.row1 .title{ transition: all 0.35s ease;}
.row1 a:hover .title{ color: #7c0000;}
.row1 .left{ width: 680rem; flex-shrink: 0;}
.row1 .left .infoBox{ padding: 30rem 30rem 40rem; background: #fff url(../images/enname-icon.png) no-repeat right bottom; }
.row1 .left .title{ line-height: 1;}
.row1 .left .summary{ line-height: 24rem; color: #666; margin-top: 14rem; -webkit-line-clamp: 3;}
.row1 .left .date{ color: #7c0000; line-height: 1; margin-top: 12rem; font-family: 'Optima';}
.row1 .right{ width: 700rem; flex-shrink: 0;}
.row1 .right li{ margin-bottom: 30rem;}
.row1 .right li:last-child{ margin-bottom: 0rem;}
.row1 .right a{ align-items: center; transition: all 0.5s ease;}
.row1 .right a:hover{ transform: translateX(10rem);}
.row1 .right .img{ width: 310rem; flex-shrink: 0;}
.row1 .right .infoBox{ flex: 1; background: #fff url(../images/enname-icon1.png) no-repeat right bottom; padding: 24rem 30rem;}
.row1 .right .title{ line-height: 56rem; color: #333; height: 56rem;}
.row1 .right .title span{ line-height: 28rem;}
.row1 .right .date{ margin-top: 15rem; line-height: 1; color: #7c0000; font-family: 'Optima';}

.row2{ padding: 80rem 0; overflow: hidden;}
.row2 .gp-container{ position: relative;}
.row2 .left{ width: 830rem;}
.introTil{ max-width: 450rem; line-height: 90rem; background: #7c0000; color: #fff; padding-left: 60rem;
    clip-path: polygon(0 0,100% 0,405rem 90rem,0rem 90rem);
    -webkit-clip-path: polygon(0 0,100% 0,405rem 90rem,0rem 90rem);}
.introCon{ line-height: 38rem; color: #333; margin-top: 50rem; transition: all 0.35s ease;}
.row2 .left:hover .introCon{ transform: translateY(-8rem); color: #7c0000;}
.introMore{ position: relative; z-index: 1; margin-top: 30rem; display: inline-block; line-height: 36rem; padding: 0 20rem; border: 1px solid #7c0000; color: #7c0000; transition: all 0.35s ease;}
.introMore::before{ content: ''; display: block; width: 0%; height: 100%; background: #7c0000; position: absolute; left: 0; top: 0; z-index: -1; transition: all 0.35s ease;}
.row2 .left:hover .introMore{ color: #fff;}
.row2 .left:hover .introMore::before{ width: 100%;}
.row2 .right{ width: 520rem; font-size: 0;}
.motto{ position: absolute; bottom: 0; left: 0; width: 100%; padding-bottom: 11.27%; z-index: -1;}
.motto::before{ content: ''; display: block; width: 100%; padding-bottom: 11.27%; background: #ecc1c1; position: absolute; top: 0; left: 100%;}

.row3{ background: url(../images/teach_bg.png) no-repeat center/cover; padding: 80rem 0 120rem;}
.row3 .modeCon{ margin: 50rem -20rem 0; }
.row3 .modeCon li:nth-of-type(even){ transform: translateY(40rem);}
.row3 .modeCon a{ display: block; margin: 0 20rem; transition: all 0.35s ease;}
.row3 .modeCon a:hover{ transform: translateY(-10rem)}
.row3 .infoBox{ padding: 0 10rem;}
.row3 .whiteBg{ background: #fff; padding: 15rem 20rem 30rem;}
.row3 .modeCon .title{ color: #333; line-height: 28rem; height: 56rem;}
.row3 .summary{ color: #666; line-height: 24rem;}
.row3 .date{ color: #7c0000; font-family: 'Optima'; margin-top: 10rem; line-height: 1;}



/* 响应式样式 */
@media screen and (max-width:1600px){
    
}

@media screen and (max-width:1480px) {
    
}

@media screen and (max-width:1400px) {
    
}

@media screen and (max-width:1280px) {
    .row3 .modeCon{ margin: 40rem -10rem 0;}
    .row3 .modeCon a{ margin: 0 10rem;}
}

@media screen and (max-width:1200px) {
    .row1, .row2{ padding: 40rem 0;}
    .row1 .left{ width: 49%;}
    .row1 .right{ width: 49%;}
    .row2 .left{ width: calc(100% - 530rem);}
    .row3{ padding: 40rem 0 80rem;}
    .modeTil .title::after{ width: 1050rem;}
    .row1 .right li{ margin-bottom: 20rem;}
}

@media screen and (max-width:1100px) {
    
}
@media screen and (max-width:1024px) {
    
}

@media screen and (max-width:997px) {
    .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{ width: 80rem; height: 4rem; margin: 0 10rem;}
    /* .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet-active::before{ width: 60%;} */
    .row1 .modeCon{ flex-direction: column;}
    .row1 .left{ width: 100%; margin-bottom: 20rem;}
    .row1 .right{ width: 100%;}
    .row2 .right{ max-width: 400rem;}
    .introTil{ display: inline-block; line-height: 60rem; font-size: 26rem; max-width: auto; padding: 0 30rem; clip-path: none;}
    .introCon{ margin-top: 20rem; line-height: 28rem;}
    .introMore{ margin-top: 10rem;}
    .row2 .left{ width: calc(100% - 420rem);}
    .row3{ padding: 30rem 0 10rem;}
    .row3 .modeCon li{ width: 50%; margin-bottom: 20rem;}
    .row3 .modeCon li:nth-of-type(even){ transform: translateY(0);}
    .row3 .infoBox{ padding: 0 5rem;}
    .row3 .whiteBg{ padding: 10rem;}
    .row3 .summary{ line-height: 20rem;}
    .modeTil .title{ font-size: 30rem;}
    .row1 .modeCon{ margin-top: 20rem;}
}

@media screen and (max-width:767px) {
    .row1 .left .infoBox{ padding: 20rem;}
    .row2 .gp-container{ padding-bottom: 25rem;}
    .row2 .gp-container > .flex{ flex-direction: column;}
    .row2 .left{ width: 100%;}
    .row2 .right{ display: none;}
    .introMore{ position: absolute; top: 0; right: 0;}
    .row2 .gp-container{ padding-bottom: 0;}
    .motto{ position: relative;}
    .motto::before{ display: none;}
    .row3 .modeCon{ margin: 20rem -10rem 0;}
    
    
}

@media screen and (max-width:680px) {
    .row1 .right .infoBox{ padding: 20rem 15rem;}
}

@media screen and (max-width:540px) {
    .swiper-container-horizontal > .swiper-pagination-bullets{ bottom: 10rem;}
    .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{ width: 8rem; height: 8rem; border-radius: 50%; margin: 0 5rem; overflow: hidden;}
    .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet::before{ transition: all 0.35s ease;}
    .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet-active::before{ width: 100%;}
    .row1 .right a{ flex-direction: column;}
    .row1 .right .img, .row1 .right .infoBox{ width: 100%;}
    .row3 .modeCon li{ width: 100%;}
    .row3 .whiteBg{ padding: 15rem 10rem;}
}

@media screen and (max-width:414px) {
    .row1, .row2{ padding: 30rem 0;}
    .row2 .gp-container{ padding-bottom: 0rem;}
    .introMore{ margin-top: 5rem;}
    .motto{ position: relative; margin-top: 5rem;}
    .modeTil .title{ font-size: 24rem;}
    .introTil{ font-size: 22rem; padding: 0 20rem; line-height: 45rem;}
    .modeTil .title::before{ right: -20rem;}
    .modeTil .title::after{ right: -20rem;}
    .row1 .right .title{ height: auto;}

}

@media screen and (max-width:320px) {
    
}