@charset "utf-8";
@font-face {
    font-family: 'FZXiaoBiaoSong';
    src: url('../fonts/FZXBSJW.TTF');
    src: url('../fonts/FZXBSJW--GB1-0.eot');
    src: url('../fonts/FZXBSJW--GB1-0.eot?#iefix') format('embedded-opentype'),
        url('../fonts/FZXBSJW--GB1-0.woff2') format('woff2'),
        url('../fonts/FZXBSJW--GB1-0.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
body{ background: url(../images/row1_bg.png) repeat center;}
.body_bg::before{ content: ''; width: 100%; height: 0; padding-bottom: 33.18%; background: url(../images/body_bg.png) no-repeat center top; background-size: 100% auto; position: absolute; top: 0; left: 0; z-index: -1;}
.swiper-slide{ max-width: unset; filter: brightness(1);}
.banner{ position: relative; z-index: 0; margin-top: 45rem; margin-left: 120rem; margin-right: 120rem; max-width: 1280rem; margin: 45rem auto 0;}
.bannerTil{ display: inline-block; line-height: 63rem; background: #e1be54; color: #fff; padding: 0 40rem; font-family: 'FZXiaoBiaoSong'; /* font-weight: bold; */
    position: absolute; left: 60rem; bottom: 106rem; z-index: 2;}
.bannerTil:hover{ color: rgba(255, 255, 255, 0.85);}
.banner .gp-img-responsive{ padding-bottom: 56.25%; position: relative;}
.banner .gp-img-responsive::before{ content: ''; display: block; width: 100%; height: 264rem;
    background-image: -moz-linear-gradient( 90deg, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0) 100%);
    background-image: -ms-linear-gradient( 90deg, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0) 100%);
    position: absolute; left: 0rem; bottom: 0rem; opacity: 0.66; z-index: -1;}
.banner .imgSwiper{ position: relative; z-index: 1; background: #fff;}
.banner .imgSwiper .swiper-slide{ z-index: 0; opacity: 0 !important;}
.banner .imgSwiper .swiper-slide.swiper-slide-active{ z-index: 1; opacity: 1 !important;}
.textSwiper .swiper-slide.swiper-slide-thumb-active .title{ color: rgba(255, 255, 255, 1);}
.banner .imgSwiper .title{ position: absolute; left: 60rem; bottom: 40rem; z-index: 1; color: #fff; line-height: 1; max-width: 70%;}
.banner .gp-img-responsive img:hover{ transform: scale(1); opacity: 1;}
.imgSwiper-button-prev, .imgSwiper-button-next{ position: absolute; top: 50%; transform: translateY(-50%); left: -84rem; z-index: 2; opacity: 0.5; transition: all 0.35s ease;
    width: 60rem; height: 60rem; border-radius: 50%; overflow: hidden; background: url(../images/imgprev.png) no-repeat center/cover; 
    box-shadow: 0px 20px 47.3px 7.7px rgba(0, 0, 0, 0.2);}
.imgSwiper-button-prev:hover, .imgSwiper-button-next:hover{ opacity: 1;}
.imgSwiper-button-next{ left: auto; right: -84rem; background: url(../images/imgnext.png) no-repeat center/cover;}

.swiper-button-disabled{ opacity: 0.7; cursor: no-drop;}
.imgSwiper-pagination{ display: inline-block; width: auto; position: absolute; left: calc(100% + 19rem); bottom: 40rem; white-space: nowrap; color: #b00c1d; font-size: 24rem; letter-spacing: -2rem;}
.swiper-pagination-current{ font-size: 30rem;}

.banner .open{ position: absolute; right: 0; top: 0; height: 100%; z-index: 1;}
.banner .open::before{ content: ''; display: block; width: 190rem; height: 100%;
    background-image: -moz-linear-gradient( 0deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 100%);
    background-image: -webkit-linear-gradient( 0deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 100%);
    background-image: -ms-linear-gradient( 0deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 100%);
    opacity: 0.55; position: absolute; right: 0; top: 0;
}
.banner .open span{ display: inline-block;width: 22rem; height: 27rem; background: url(../images/open.png) no-repeat center/cover;
    position: absolute; right: 30rem; top: 50%; transform: translateY(-50%); cursor: pointer; transition: all 0.35s ease;}
.banner .open.fadeToggle span{ animation: fadeToggle 1.5s ease infinite forwards; -webkit-animation: fadeToggle 1.5s ease infinite forwards;}
@keyframes fadeToggle {
    0%{ opacity: 1; transform: translateX(50%) translateY(-50%);}
    50%{ opacity: 0.6;}
    100%{ opacity: 0.1; transform: translateX(-50%) translateY(-50%);}
}
@-webkit-keyframes fadeToggle {
    0%{ opacity: 1; transform: translateX(50%) translateY(-50%);}
    50%{ opacity: 0.6;}
    100%{ opacity: 0.1; transform: translateX(-50%) translateY(-50%);}
}
.textSwiper{ background: rgba(0,0,0,0.45); padding: 37rem 20rem 50rem 60rem; position: absolute; top: 0; right: 0rem; bottom: 0; z-index: 2; width: 374rem;}
.close{ width: 22rem; height: 27rem; background: url(../images/close.png) no-repeat center/cover; cursor: pointer;
    -webkit-animation: passing 1s linear infinite; animation: passing 1s linear infinite;
    position: absolute; left: 6rem; top: 50%; transform: translateY(-50%);}
@-webkit-keyframes passing {
    0% {
        -webkit-transform: translateX(-6rem) translateY(-50%);
        transform: translateX(-6rem) translateY(-50%);
        opacity: 1
    }
    50%{ opacity: 0.6;}
    100% {
        -webkit-transform: translateX(50%) translateY(-50%);
        transform: translateX(50%) translateY(-50%);
        opacity: 0.1
    }
}
@keyframes passing {
    0% {
        -webkit-transform: translateX(-6rem) translateY(-50%);
        transform: translateX(-6rem) translateY(-50%);
        opacity: 1
    }
    50%{ opacity: 0.6;}
    100% {
        -webkit-transform: translateX(50%) translateY(-50%);
        transform: translateX(50%) translateY(-50%);
        opacity: 0.1
    }
}
.textSwiper .swiper-slide{ cursor: pointer;}
.textSwiper .title{ line-height: 30rem; color: rgba(255, 255, 255, 0.77); transition: all 0.2s ease;}
.textSwiper .date{ margin-top: 10rem; line-height: 1; font-family: 'Arial'; position: relative;}
.textSwiper .date::before{ content: ''; display: block; width: calc(100% - 80rem); height: 1rem; background: rgba(255, 255, 255, 0.2);
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.swiperOut{ overflow: hidden; max-height: 100%;}

.row1{ margin-top: 66rem; position: relative;}
.row1::before{ content: ''; display: block; width: 74rem; height: 702rem; background: url(../images/motto_bg1.png) no-repeat center/cover; position: absolute; top: 109rem; right: 60rem;}
.modeTil{ align-items: center; margin-bottom: 20rem;}
.modeTil .title{ color: #b00c1d; font-family: 'FZXiaoBiaoSong'; /* font-weight: bold; */ line-height: 1;}
.modeTil .more{ color: #999;}
/* 党建思政 */
.mode1, .mode2{ width: 50%;background: url(../images/mode1_bg.png) no-repeat center top; background-size: 100% 100%; padding: 60rem 40rem; box-sizing: border-box;}
.mode1{ border-right: 1px solid #faf5f5;}
.row1 .imgBox{ width: 345rem; flex-shrink: 0;}
.row1 .gp-img-responsive{ padding-bottom: 56.25%;}
.row1 .infoBox{ width: calc(100% - 365rem);}
.row1 .modeCon .title{ font-weight: bold; -webkit-line-clamp: 3; line-height: 30rem; transition: all 0.35s ease;}
.row1 .firstNew .title{ margin-top: 25rem; height: 90rem;}
.row1 .firstNew .date{ margin-top: 35rem; line-height: 1;}
.row1 .date{ color: #b00c1d; position: relative; line-height: 30rem;}
.row1 .date i{ margin-right: 10rem; font-size: 18rem;}
.firstNew{ border-top: 1rem solid rgba(0,0,0,0.06); border-bottom: 1rem solid rgba(0,0,0,0.06);}
.row1 ul a{ display: block; padding: 24rem 0; border-bottom: 1rem solid rgba(0,0,0,0.06);}
.row1 .modeCon ul .title{ padding-left: 19rem; font-weight: 400; position: relative;}
.row1 a:hover .title{ transform: translateX(8rem);}
.row1 ul .title::before{ content: ''; display: block; width: 4rem; height: 4rem; background: #b00c1d; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}

/* 教学科研 */
/* .mode2{ width: 50%;} */

/* 媒体北青 */
.row2{ padding: 46rem 0 88rem; position: relative;}
.row2::before{ content: ''; display: block; width: 100%; height: calc(100% + 60rem); background: url(../images/row2_bg.png) no-repeat center/cover; position: absolute; left: 0; bottom: 0; z-index: -1;}
.row2 .modeTil{ padding-bottom: 20rem; border-bottom: 1rem solid rgba(255, 255, 255, 0.16); margin-bottom: 0rem;}
.row2 .modeTil .title{ color: #fff;}
.row2 .modeTil .more{ color: rgba(255, 255, 255, 0.7);}
.mode3 ul{ margin: 0 -28rem;}
.mode3 li{ float: left; width: 20%; padding: 30rem 0 80rem; position: relative; z-index: 0;}
.mode3 li::before{ content: ''; display: block; width: calc(100% + 20rem); height: 0%; background: #b00c1d; box-shadow: 0rem 20rem 46.75rem 8.25rem rgba(0, 0, 0, 0.08);
    position: absolute; top: 0; left: 50%; transform: translateX(-50%); transition: all 0.35s ease; z-index: -1;}
.mode3 li::after{ content: ''; display: block; width: 1rem; height: 150rem; background: rgba(255, 255, 255, 0.16); position: absolute; right: 0; top: 80rem; z-index: -2;}
.mode3 li:hover::before{ height: 100%;}
.mode3 li a{ display: block; margin: 0 28rem;}
.mode3 .lable{ font-weight: bold;}
.mode3 .lable span{ display: inline-block; background: #d7a46c; line-height: 30rem; padding: 0 18rem; transition: all 0.35s ease; position: relative;}
.mode3 li:hover .lable span{ border-radius: 15rem; background: #e0c67e; color: #b00c1d;}
.mode3 .lable span::before{ content: ''; display: block; width: 4rem; height: 4rem; border-radius: 50%; background: #d7a46c; position: absolute; left: 10rem; top: 50%; transform: translateY(-50%);}
.mode3 li:hover .lable span::before{ background: #b00c1d;}
.mode3 ul .title{ line-height: 30rem; height: 90rem; -webkit-line-clamp: 3; margin-top: 18rem; text-align: justify;}

/* row3 */
.row3{ padding: 66rem 0; background: #faf5f5 url(../images/motto_bg2.png) no-repeat center left; background-position: 60rem center; position: relative;}
.row3::before{ content: ''; display: block; width: 366rem; height: 733rem; background: url(../images/row3_bg.png) no-repeat center/cover; position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 0;}
.row3 .gp-container{ position: relative; z-index: 1;}
.row3 .mode{ width: 32.4%; max-width: 486rem; background: #fff; padding: 30rem 40rem 48rem; }
.row3 .modeTil{ align-items: baseline;}
.row3 .gp-img-responsive{ padding-bottom: 56.25%; position: relative;}
.row3 .gp-img-responsive::before{ content: ''; display: block; width: 100%; height: 0rem; padding-bottom: 24.63%;
    background-image: -moz-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
    opacity: 0.7; position: absolute; bottom: 0; left: 0; z-index: 1;}
.row3 .mode > a{ display: block;}
.row3 .mode > a .title{ padding: 15rem 20rem 25rem; border: 1rem solid rgba(0, 0, 0, 0.06); font-weight: bold; box-sizing: border-box;}
.row3 .mode > a .title span{ line-height: 30rem; height: 60rem; transition: all 0.35s ease;}
.row3 .mode > a .title span:hover{ color: #b00c1d;}
.row3 .mode > a .date{ position: absolute; bottom: 20rem; left: 20rem; z-index: 1; color: #fff;}
.row3 .mode > a:hover .date{ color: rgba(255, 255, 255, 0.77);}
.row3 .mode > a .date .gp-f18{ font-weight: bold;}
.row3 ul a{ display: block; padding: 23rem 0; border-bottom: 1rem solid rgba(0, 0, 0, 0.06); transition: all 0.35s ease;}
.row3 ul .title{ line-height: 1; position: relative; padding-left: 14rem; transition: all 0.35s ease;}
.row3 ul a:hover{ transform: translateX(8rem);}
.row3 ul .title::before{ content: ''; display: block; width: 4rem; height: 9rem; background: url(../images/triangle_red.png) no-repeat center/cover; position: absolute; left: 0; top: 50%; transform: translateY(-50%);;}
.row3 ul .date{ line-height: 1; color: #999; font-weight: lighter; margin-left: 10rem;}
.mode4{ animation-delay: 0s;}
.mode5{ animation-delay: 0.2s;}
.mode6{ animation-delay: 0.4s;}

/* row4 */
.row4{ padding: 67rem 0 88rem; background: #fff url(../images/row4_bg.png) no-repeat center left; background-position: 0rem 63rem;}
.row4 .modeTil{ padding-bottom: 20rem; margin-bottom: 20rem; border-bottom: 1rem solid rgba(0, 0, 0, 0.06);}
.row4 ul{ margin: 0 -15rem;}
.row4 ul:first-child{ margin-bottom: 20rem;}
.row4 ul a{ display: block; margin: 0 15rem; position: relative;}
.row4 .gp-img-responsive{ padding-bottom: 56.25%; position: relative;}
.row4 .gp-img-responsive::before{ content: ''; display: block; width: 100%; height: 150rem;
  background-image: -moz-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
  opacity: 0.7; position: absolute; left: 0rem; bottom: 0rem; z-index: 1;
}
.row4 ul .title{ font-weight: bold; text-align: center; position: absolute; width: 85%; left: 50%; transform: translateX(-50%); bottom: 25rem; line-height: 1; color: #fff; z-index: 1;}
.row4 .video{ width: 38rem; height: 38rem; line-height: 38rem; border-radius: 50%; background: rgba(0,0,0,0.3); font-size: 28rem; text-align: center; color: #fff;
    position: absolute; top: 20rem; left: 20rem; z-index: 2; transition: all 0.35s ease-out;}
.row4 a:hover .video{ top: 50%; left: 50%; transform: translate3d(-50%,-50%,0);}

/* row5 */
.row5{ position: relative; padding-bottom: 68rem;}
.row5::before{ content: ''; /* display: block; */ background: #fff; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -2;}
.row5 .modeTil{ padding-bottom: 20rem; margin-bottom: 20rem; border-bottom: 1rem solid rgba(0, 0, 0, 0.06);}
.row5 .modeCon{ position: relative;}
.row5 .left{ width: 52.63%; flex-shrink: 0;}
.row5 .right{ width: 45.39%; flex-shrink: 0; overflow: hidden;}
.row5 .gp-img-responsive{ padding-bottom: 56.25%;}
.largeImg{ overflow: hidden;}
.largeText{ padding-bottom: 95rem; position: relative;}
.largeText .title{ color: #111; font-weight: bold; line-height: 1;}
.row5 .date{ color: #b00c1d; position: relative; margin-top: 25rem;}
.row5 .date i{ margin-right: 10rem; font-size: 15rem;}
.largeText-prev{ width: 54rem; height: 40rem; background: url(../images/prev-red.png) no-repeat center right; background-size: 81% auto;
    position: absolute; left: 0; bottom: 20rem;}
.largeText-prev::before{ content: ''; display: block; width: 40rem; height: 40rem; border-radius: 50%; background: #f0ebeb; position: absolute; left: 0; top: 0; z-index: -1; transition: all 0.35s ease;}
.largeText-next{ width: 54rem; height: 40rem; background: url(../images/next_red.png) no-repeat center left; background-size: 81% auto;
    position: absolute; right: 0; bottom: 20rem;}
.largeText-next::before{ content: ''; display: block; width: 40rem; height: 40rem; border-radius: 50%; background: #f0ebeb; position: absolute; right: 0; top: 0; z-index: -1; transition: all 0.35s ease;}
.largeText-prev:hover::before{ left: 100%; transform: translateX(-80%);}
.largeText-next:hover::before{ right: 100%; transform: translateX(80%);}
.smallList{ padding-top: 30rem;}
.smallList .title{ line-height: 20rem; margin-top: 20rem;}
.smallList .date{ line-height: 1; margin-top: 15rem;}
.smallList-pagination{ display: none;}

/* row6 */
.row6{ position: relative; padding: 30rem 0 76rem;}
.row6::before{ content: ''; display: block; width: 100%; height: 0; padding-bottom: 42.34%; background: url(../images/row6_bg.png) no-repeat center bottom; background-size: 100% 100%;
    position: absolute; bottom: 0; left: 0; z-index: -1;}
.row6 .modeTil{ padding-bottom: 20rem; margin-bottom: 20rem; border-bottom: 1rem solid rgba(0, 0, 0, 0.06);}
.row6 .modeTil::before{ content: ''; display: block; width: 590rem; height: 86rem; background: url(../images/motto_bg3.png) no-repeat center; background-size: 100% auto;
    position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1;}
.row6 .gp-img-responsive{ padding-bottom: 56.25%; position: relative; z-index: 0; background: #000;}
.row6 .gp-img-responsive img{ opacity: 0.66;}
.row6 .modeCon{ overflow: hidden;}
.mode9{ overflow: hidden;}
.story{ max-width: 500rem; margin: 0 auto;}
.story a{ filter: brightness(1); position: relative; transition: all 0.35s ease;}
.story .title{ position: absolute; bottom: 20rem; left: 50%; transform: translateX(-50%); width: 90%; color: #fff;}
.story .gp-img-responsive::before{ content: ''; display: block; width: 100%; height: 0; padding-bottom: 24%;
    background-image: -moz-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
    opacity: 0.7; position: absolute; bottom: 0; left: 0; z-index: 1;}
.story .swiper-slide-active img{ opacity: 1;}
.story-pagination{ display: none;}

/* row7 */
.row7{ background: #fff; padding: 86rem 0 90rem; position: relative;}
.mode10Til{ width: 240rem; flex-shrink: 0;}
.mode10 .modeTil{ padding-bottom: 15rem; margin-bottom: 0; border-bottom: 1rem solid rgba(0, 0, 0, 0.06); flex-direction: column; align-items: flex-start;}
.mode10 .modeTil .gp-f0{ font-size: 0;}
.mode10 .modeTil .title{ line-height: 40rem; }
.mode10 .modeCon{ width: calc(100% - 240rem); padding-left: 76rem;}
.mode10 ul{ margin: 0 -38rem;}
.mode10 ul li{  width: 33.33%;}
.mode10 li a{ display: block; padding: 40rem 33rem 25rem 72rem; box-sizing: border-box; margin: 0 38rem; border-radius: 0 60rem 0 60rem; text-align: center; position: relative; transition: all 0.35s ease;}
.mode10 li a:hover{ transform: translateY(-12rem);}
.mode10 li a::before{ content: ''; display: block; width: 32rem; height: 2rem; background: #e1be54; position: absolute; top: 76rem; left: 20rem;}
.mode10 li a .iconfont{ position: absolute; top: 40rem; left: 20rem; color: #fff;}
.mode10 .weChet{ background: url(../images/row7_bg1.png);}
.mode10 .weChet .iconfont{ font-size: 32rem;}
.mode10 .video{ background: url(../images/row7_bg2.png);}
.mode10 .video .iconfont{ font-size: 25rem;}
.mode10 .country{ background: url(../images/row7_bg3.png);}
.mode10 .country .iconfont{ font-size: 32rem;}
.mode10 .bqtv{ background: url(../images/row7_bg4.png);}
.mode10 .bqtv .iconfont{ font-size: 32rem;}
.mode10 .bqvideo{ background: url(../images/row7_bg5.png);}
.mode10 .bqvideo .iconfont{ font-size: 29rem;}
.mode10 .bqnewspaper{ background: url(../images/row7_bg6.png);}
.mode10 .bqnewspaper .iconfont{ font-size: 28rem;}
.mode10 .code{ max-width: 135rem; border: 8rem solid rgba(255, 255, 255, 0.55); margin: 0 auto; position: relative;}
.mode10 .gp-img-responsive::before{ content: ''; display: block; background: #fff; position: absolute; left: -3rem; top: -3rem; right: -3rem; bottom: -3rem; z-index: 0;}
.mode10 .gp-img-responsive{ padding-bottom: 100%; background: #fff; font-size: 0;}
.mode10 img{ position: relative; z-index: 1;}
.mode10 .codeImg{ display: inline-block; font-size: 0; margin-top: 16px;}
.mode10 ul:last-child{ margin-top: 50rem;}
.mode10 ul:last-child .code{ display: none;}
.mode10 ul:last-child li a{ height: 100%; border-radius: 0 40rem 0 40rem; padding: 0rem 33rem 0rem 72rem;}
.mode10 ul:last-child .codeImg{ padding: 12rem 0; box-sizing: border-box; margin-top: 0; height: 100%; position: relative;}
.mode10 ul:last-child li:nth-of-type(1) .codeImg,
.mode10 ul:last-child li:nth-of-type(3) .codeImg{ padding-top: 40rem;}
.mode10 ul:last-child .codeImg img{ vertical-align: middle;}


.row1::before{ z-index: -1;}
.mode1{ border-right: none; position: relative;}
.mode1::before{ content: ''; display: block; width: 2rem; height: 100%; background: #faf5f5; position: absolute; right: -1rem; bottom: 0; z-index: 1;}
.mode1::after{ content: ''; display: block; width: 1rem; height: 10%; background: #faf5f5; position: absolute; right: -1rem; bottom: 1rem; z-index: -1;}
.mode2{ width: 50%;}

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

@media screen and (max-width:1480px) {
    .mode1::before{ width: 2rem; bottom: 1rem;}
}

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

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

@media screen and (max-width:1200px) {
    .banner{ margin-left: 60rem; margin-right: 60rem;}
    .bannerTil{ bottom: 90rem;}
    .banner .imgSwiper .title{ max-width: 50%; font-size: 28rem; bottom: 30rem;}
    .imgSwiper-button-prev, .imgSwiper-button-next{ left: -50rem;}
    .imgSwiper-button-next{ left: auto; right: -50rem;}
    .imgSwiper-pagination{ left: calc(100% + 2rem); font-size: 20rem; letter-spacing: -3rem;}
    .swiper-pagination-current{ font-size: 24rem;}
    .textSwiper{ padding: 30rem 20rem 30rem 40rem;}
    .mode1, .mode2{ width: 50%; padding: 50rem 30rem;}
    .row2{ padding: 45rem 0 50rem;}
    .mode3 ul{ margin: 0 -15rem;}
    .mode3 li{ padding: 30px 0 50px;}
    .mode3 li a{ margin: 0 15rem;}
    .row3 .mode{ padding: 25rem 20rem 30rem;}
    .largeText{ padding-bottom: 40rem;}
    .largeText-prev, .largeText-next{ bottom: -10rem;}
    .row7{ padding: 50rem 0;}
    .mode10 .modeCon{ padding-left: 30rem;}
    .mode10 ul{ margin: 0 -15rem;}
    .mode10 li a{ margin: 0 15rem; height: 100%;}
    .body_bg:before{ padding-bottom: 46%; background-size: cover;}
    .imgSwiper-button-prev, .imgSwiper-button-next{ width: 45rem; height: 45rem;}
    
}

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

@media screen and (max-width:997px) {
    .textSwiper, .banner .open, .imgSwiper-pagination{ display: none;}
    .banner{ margin-top: 20rem; margin-left: 20rem; margin-right: 20rem;}
    .bannerTil{ line-height: 40rem; padding: 0 20rem; bottom: auto; top: 15rem; left: auto; right: 15rem;}
    .banner .imgSwiper .title{ max-width: 80%; font-size: 18rem; bottom: 25rem;}
    .imgSwiper-button-prev{ left: 10rem;}
    .imgSwiper-button-next{ right: 10rem;}
    .row1{ margin-top: 30rem;}
    .row1 > .flex{ flex-direction: column;}
    .mode1, .mode2{ width: 100%;}
    .row1 ul a{ padding: 15rem 0;}
    .mode3 li{ width: 33.33%;}
    .row3{ padding: 40rem 0;}
    .modeTil .title{ font-size: 24rem;}
    .row3 .gp-container{ flex-direction: column;}
    .row3 .mode{ width: 100%; max-width: unset; margin-bottom: 30rem;}
    .row3 .mode:last-child{ margin-bottom: 0;}
    .row3 .mode > a{ max-width: 480rem; margin: 0 auto;}
    .row3 .mode > a .title span{ height: auto;}
    .row3 ul a{ padding: 15rem 0;}
    .row4{ padding: 30rem 0;}
    .row4 ul:nth-last-of-type(1){ display: none;}
    .row4 ul li{ width: 50%; margin-bottom: 20rem;}
    .row5 .left, .largeText{ display: none;}
    .row5 .right{ width: 100%;}
    .row6 .modeTil::before{ width: 380rem;}
    .mode10{ flex-direction: column;}
    .mode10Til{ width: auto;}
    .mode10 .modeTil{border-bottom: none;align-items: center;}
    .mode10 .modeTil .title br{ display: none;}
    .mode10 .modeCon{ padding-left: 0; width: 100%;}
    .row4{ background-size: auto; background-position: left center;}
    .smallList-pagination{ display: block; text-align: center; margin-top: 10rem;}
    .story-pagination{ display: block; text-align: center; margin: 10rem;}
    .smallList-pagination .swiper-pagination-bullet,
    .story-pagination .swiper-pagination-bullet{ width: 10rem; height: 10rem;}

}

@media screen and (max-width:767px) {
    .mode10 ul{ margin: 0 -8rem;}
    .mode10 li a{ margin: 0 8rem;}
    .mode10 ul:last-child{ margin-top: 20rem;}
    .mode10 ul:last-child li a .iconfont{ top: 50%; transform: translateY(-50%);}
    .mode10 ul:last-child li a::before{ top: 50%; transform: translateY(20rem);}
    .mode10 ul:last-child li:nth-of-type(1) .codeImg, .mode10 ul:last-child li:nth-of-type(3) .codeImg{ padding-top: 30rem;}
}

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

@media screen and (max-width:540px) {
    .firstNew{ flex-direction: column;}
    .row1 .imgBox, .row1 .infoBox{ width: 100%;}
    .row1 .firstNew .title{ height: auto; margin-top: 15rem;}
    .row1 .firstNew .date{ margin: 10rem 0 20rem;}
    .mode3 li{ width: 50%; padding: 15px 0;}
    .row4 ul{ margin: 0;}
    .row4 ul li{ width: 100%;}
    .row4 ul a{ margin: 0;}
    .mode10 ul{ flex-wrap: wrap;}
    .mode10 ul li{ width: 50%; margin-bottom: 15rem;}
    .row6 .modeTil::before{ width: 50%;}
    .smallList{ padding-top: 0;}
}

@media screen and (max-width:414px) {
    .bannerTil, .imgSwiper-button-prev, .imgSwiper-button-next{ display: none;}
    .banner .imgSwiper .title{ left: 50%; transform: translateX(-50%); max-width: 90%;}
    .mode1, .mode2{ padding: 35rem 20rem;}
    .row1 ul a{ padding: 10rem 0;}
    .row2{ padding: 20rem 0;}
    .mode3 ul{ margin: 0;}
    .mode3 li{ width: 100%;}
    .mode3 li a{ margin: 0;}
    .mode3 ul .title{ height: auto;}
    .row3{ padding: 20rem 0;}
    .row3 .mode > a .title{ padding: 15rem;}
    .row5{ padding-bottom: 30rem;}
    .mode10 ul{ margin: 0;}
    .mode10 ul li{ width: 100%;}
    .mode10 ul a{ margin: 0;}
    .row7{ padding: 30rem 0;}
    
    .mode10 ul:last-child{ margin-top: 0rem;}
    .mode10 ul:last-child li:nth-of-type(1) .codeImg, .mode10 ul:last-child li:nth-of-type(3) .codeImg{ padding: 30rem 0;}
}

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