﻿
.banner{ width: 100%;}
.banner.showdiv .down{ transform: translateY(1px) translateX(-50%);}
.banner .swiper-slide{background-repeat: no-repeat;background-size: cover;background-position: center;}
.side{ width: 60px; padding: 10px 0; box-sizing: border-box; border-radius: 60px 0 0 60px; transition: width 0.35s ease; overflow: hidden;}
.side.open{ width: 170px; padding: 10px 0 10px 10px; overflow: visible; border-radius: 0; background: #960001;}
.side a{ line-height: 45px; white-space: nowrap;}
.side.open:before{ display: none;}
.side::before{ content: ''; display: block; border: 1px dashed #960001; border-radius: 60px 0 0 60px; background: #fff; 
    z-index: 1; position: absolute; top: 50%; transform: translateY(-50%); right: 0px; width: 60px; height: 120px; box-sizing: border-box; transition: all 0.35s ease;}
.side-m-close{ position: absolute; top: 50%; transform: translateY(-50%); right: 0; left: 10px; height: 100px; 
    background: url(../image/side_close_bg.png) no-repeat right center; background-size: 50px auto; z-index: 2; transition: all 0.35s ease;}
.side.open .side-m-close{ width: 0;}
.side.open .side-m-close{ background: #fff url(../image/side-close.png) no-repeat center/cover; width: 20px; height: 20px; top: -10px; left: auto; right: 0;}
.side-logo, .side ul, .goTop{ opacity: 0; max-width: 0; overflow: hidden; transition: opacity 0.2s ease;}
.side.open .side-logo, .side.open ul, .side.open .goTop{ opacity: 1 !important; max-width: 200px;}
@media(any-hover:hover){
    .side:hover{ width: 170px; padding: 10px 0 10px 10px; overflow: visible; border-radius: 0; background: #960001;}
    .side:hover:before{ display: none;}
    .side:hover .side-m-close{ width: 0;}
    .side:hover .side-logo, .side:hover ul, .side:hover .goTop{ opacity: 1 !important; max-width: 200px;}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
    /* IE10-specific styles go here */  
    .side:hover{ width: 170px; padding: 10px 0 10px 10px; overflow: visible; border-radius: 0; background: #960001;}
    .side:hover:before{ display: none;}
    .side:hover .side-m-close{ width: 0;}
    .side:hover .side-logo, .side:hover ul, .side:hover .goTop{ opacity: 1 !important; max-width: 200px;}
}

.content .modeTitle{ text-align: center; position: relative;}
.content .modeTitle::before{ content: ''; display: block; width: calc(50% - 90px); height: 35px; border: 1px solid #dcdcdc; border-bottom: none; border-right: none; box-sizing: border-box;
    position: absolute; left: 0; bottom: 8px; z-index: 1;}
.content .modeTitle::after{
    content: '';
    display: block;
    width: calc(50% - 90px);
    height: 35px;
    border: 1px solid #dcdcdc;
    border-bottom: none;
    border-left: none;
    box-sizing: border-box;
    position: absolute;
    right: 0;
    bottom: 8px;
    z-index: 1;
    }
.content .modeTitle a{ display: inline-block; background: transparent; padding: 0 30px; transition: all 0.35s ease;}
.content .modeTitle a:hover{ animation: animate2 4s infinite; -webkit-animation: animate2 4s infinite;}
.readmore{position:absolute;right:0;top: 6px;font-size: 16px;background: #fff !important;display: inline-block !important;z-index: 20;padding: 0 15px !important;}
.animate2.side_search { animation: animate2 5s infinite; -webkit-animation: animate2 5s infinite;}
@-webkit-keyframes animate2 {
    0%,20%,32%,40%,8% { -webkit-transform: translateY(0); transform: translateY(0)}
    16% { -webkit-transform: translateY(-30px); transform: translateY(-30px)}
    24% { -webkit-transform: translateY(-15px); transform: translateY(-15px)}
}
@keyframes animate2 {
    0%,20%,32%,40%,8% { -webkit-transform: translateY(0); transform: translateY(0) }
    16% { -webkit-transform: translateY(-30px); transform: translateY(-30px) }
    24% { -webkit-transform: translateY(-15px); transform: translateY(-15px) }
}
.content .modeTitle a:hover .ch{ color: #960001;}
.content .modeTitle a:hover .en{ color: #960001;}
.row05 .people .modeTitle a:hover .ch, .row05 .people .modeTitle a:hover .en{ color: #fff;}
.content .modeTitle span{ display: block;}
.content .modeTitle .ch{ color: #000; font-weight: bold; line-height: 33.6px;}
.content .modeTitle .en{ color: #444; line-height: 19px; margin-top: 5px; text-transform: uppercase;}

.row0711{ padding: 40px 0 60px; font-size: 0px;}
.row0711 .gp-container{overflow:hidden}
.row0711 img{ width: 100%;}
.row01 .news{ padding: 60px 0 0; font-size: 0;}
.row01 .left .info{ padding: 20px 30px 35px; box-sizing: border-box; background: url(../image/mode01_bg1.png) no-repeat center/cover; color: #fff; text-align: left; position: relative;}
.row01 .left .info::before{ content: ''; display: block; width: 42px; height: 21px; background: url(../image/mode01_triangle.png) no-repeat center/cover;
    position: absolute; left: 30px; bottom: 100%;}
.row01 .date{ position: relative; padding-left: 24px; line-height: 18px;}
.row01 .date i::before{ display: block; width: 16px; height: 16px; line-height: 16px; font-size: 18px;
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.row01 .left .date{ color: #e0c67e;}
.row01 .left .title{ line-height: 28px; margin-top: 15px;}
.row01 .left .summary{ line-height: 24px; margin-top: 11px;}
.row01 .topNew{ padding-left: 30px; text-align: left; box-sizing: border-box; background: url(../image/topnew_bg.png) no-repeat left bottom;}
.row01 .topNew .info{ width: calc(100% - 287px); padding-right: 30px; box-sizing: border-box;}
.row01 .topNew .img{ width: 287px; flex-shrink: 0;}
.row01 .topNew .gp-img-responsive::before{ content: ''; display: block; width: 0; height: 0;
    border-top: 21px solid transparent; border-right: 7.5px solid transparent;
    border-left: 21px solid #fff; border-bottom: 21px solid transparent;
    position: absolute; top: 23px; left: 0; z-index: 2;}
.row01 .topNew .date{ width: 128px; height: 32px; line-height: 32px; box-sizing: border-box; color: #a02226; border: 1px solid rgb(229, 229, 229); padding-left: 38px;}
.row01 .topNew .date i::before{ left: 15px;}
.row01 .topNew .title{ line-height: 28px; margin-top: 20px;}
.row01 .topNew .summary{ line-height: 26px;margin-top: 11px; color: #999;}
.row01 .right ul{ background: #faf8f5; padding: 30px 30px 5px;}
.row01 .right ul a{ display: block; line-height: 32px;}
.row01 .right ul .date{ display: block; width: 117px; height: 32px; line-height: 32px; color: #999; background: #fff; box-sizing: border-box; padding-left: 38px; position: relative;}
.row01 .right ul .date i::before{ width: 14px; height: 14px; font-size: 16px; left: 15px;}
.row01 .right ul li{ margin-bottom: 35px;}
.row01 .right ul li:last-child{ margin-block: 10px;}

.row0711 .gp-img-responsive{ padding-bottom: calc(150% / 4.46);}
.row0711 ul{ margin: 0 -21px;}
.row0711 a{ display: block; margin: 0 21px; transition: all 0.35s ease;}
.row0711 a:hover{ transform: translateY(-8px);}

.row02{ padding: 60px 0; font-size: 0;}
.row02 .modeCon{ box-shadow: none;}
.row02::before{ background: url(https://www.cueb.edu.cn/images/research_bg.png) no-repeat center/cover; background-attachment: fixed;}
.row02 .date{ text-align: center; color: #960001; font-size: 0; margin-bottom: 18px;}
.row02 .date span{ margin: 0 19px;}
.row02 .gp-img-responsive{ padding-bottom: 56.25%;}
.row02 .swiper{ position: relative;}
.white_cover{ position: relative;}
.row02 .white_cover::before,.row02 .white_cover::after{ content: ''; display: block; width: 220px; height: 100%; background: url(../image/white_hover.png) no-repeat center/cover;
    position: absolute; left: 0; top: 0; z-index: 2;}
.row02 .white_cover::after{ transform: rotateZ(180deg); left: auto; right: 0; }
.row02 .white_cover .swiper-slide a{ display: block; padding: 18px 34px 32px 38px; box-sizing: border-box; background: #fff;}
.row02 .white_cover .swiper-slide .title{ line-height: 28px; margin-top: 22px;}
.row02 .report{ margin-top: 30px; padding: 0; box-sizing: border-box; position: relative;}
.row02 .report .swiper{ background: #fff; padding: 10px 30px; padding: 10px; overflow: hidden;}
.row02 .report .img{ width: 98px; flex-shrink: 0;}
.row02 .report .gp-img-responsive{ padding-bottom: calc(133% / 0.98);}
.row02 .report .info{ width: calc(100% - 118px);}
.row02 .report .title{ font-weight: bold; line-height: 28px; margin-top: 20px;}
.row02 .report .summary{ line-height: 26px; color: #999; margin-top: 12px;}
.report-button-prev, .report-button-next{ display: none; width: 44px; background: #fbf8f5; height: 100%; position: absolute; left: 0; top: 0;}
.report-button-next{ left: auto; right: 0;}
.report-button-prev::before, .report-button-next::before{ position: absolute; text-align: center; width: 100%; top: 50%; transform: translateY(-50%); color: #960001; font-size: 18px;}

.row04{ margin-top: 80px;}
.row03{ margin-top: 0; padding-top: 80px; position: relative;/* min-height: 614px; */}
.row03 .left{ position: absolute; left: 0; top: 80px; padding: 50px 0 0 50px; box-sizing: border-box;}
.row03 .left .leftCon{ /* width: calc(100% - 50px); */width: 100%; max-width: 1000px; overflow: hidden; position: relative;}
.row03 .left .bg{ width: calc(100% - 50px); height: calc(100% - 50px); background: url(../image/bg_0714.png) no-repeat center/cover;
    position: absolute; top: 0px; left: 0px;}
.row03 .left .gp-img-responsive{ padding-bottom: 56.25%;}
.row03 .left .gp-img-responsive img:hover{ transform: scale(1);}
.row03 .left a{ display: block; position: relative;}
.row03 .left .img{ position: relative; width: 100%; height: unset;}
.row03 .left .swiper-pagination{ bottom: 10px; left: 50%; transform: translateX(-50%);}
.row03 .left .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{ width: 20px; height: 18px; background: url(../image/dots.png) no-repeat center/cover; box-shadow: none;}
.row03 .left .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active{ background: url(../image/data_dots2.png) no-repeat center/cover;}
.row03 .right{ float: right;}
.row03 .right .title{ font-size: 0;}
.row03 .right .summary{ color: #888; line-height: 26px; margin-top: 28px; margin-bottom: 5px;}
.row05{ margin-top: 0; padding-top: 80px;}
.row05::before{ top: 370px;}
.row05 .people{ margin-top: 0px; padding-top: 80px;}
.row05 .people .modeTitle::before, .row05 .people .modeTitle::after{ border-color: rgba(255, 255, 255, 0.35);}
.row0714{ padding-top: 60px; position: relative;}
.row0714::before{ content: ''; display: block; width: 50%; height: 100%; background: url(../image/study_bg.png) no-repeat center/cover;
    position: absolute; right: 0%; top: 0; z-index: -1;}
.row0714 .left,.row0714 .right{ width: calc(680% / 14.2);}
.row0714 .right{ padding-bottom: 40px;}
.row0714 .left .modeTitle .ch{ color: #750000;}
.row0714 .left .modeCon{ margin-top: 54px;}
.row0714 .left .date{ color: #960001; padding-left: 38px; width: 128px; height: 32px; line-height: 32px; border: 1px solid #c6b497; box-sizing: border-box; position: relative;}
.row0714 .left .date i{ position: absolute; left: 15px; top: 50%; transform: translateY(-50%);}
.firstNotice{ display: block; width: calc(100% - 10px); position: relative;}
.firstNotice a{ display: block; background: #fff; padding: 41px 42px 26px 40px; box-sizing: border-box; border: 1px solid #c6b497; position: relative; z-index: 1; transition: all 0.35s ease;}
.firstNotice:hover a{ transform: translateY(-8px);}
.firstNotice::before{ content: ''; display: block; width: 100%; height: 100%; background: #f4f1ed; position: absolute; right: -10px; bottom: -10px; z-index: -1;}
.firstNotice:hover::before{ z-index: -1;}
.row0714 .firstNotice .date{ position: absolute; top: -16px; left: 40px; background: #fff;}
.firstNotice .title{ font-weight: bold; color: #750000; line-height: 1;}
.firstNotice .summary{ color: #666666; line-height: 24px; margin-top: 16px;}
.row0714 .left .modeCon ul{ margin-top: 35px; overflow: hidden;}
.row0714 .left ul li{ margin-bottom: 34px;}
.row0714 .left ul li:last-child{ margin-bottom: 14px;}
.row0714 .left ul .date{ width: 90px; border-color: #960001; margin-right: 20px;}
.row0714 .left ul .title{ line-height: 32px; width: calc(100% - 110px); position: relative;}
.row0714 .left ul .title span{ display: block; width: 100%; color: #750000; transition: all 0.35s ease;}
.row0714 .left ul .title:hover span{ transform: translateY(-5px);}
.row0714 .left ul .title::before{ content: ''; display: block; width: 100%; height: 1px; border-bottom: 1px dashed #960001; position: absolute; bottom: -14px;}
.row0714 .right ul{ margin-top: 38px; position: relative;}
.row0714 .right ul::before{ content: ''; display: block; width: 1px; height: 100%; background: #e5e5e5; position: absolute; left: 10px; top: 0;}
.row0714 .right li{ padding-left: 32px; position: relative; line-height: 16px; margin-bottom: 35px; position: relative;}
.row0714 .right li:last-child{ margin-bottom: 0;}
.row0714 .right li::before{ content: ''; display: block; width: 17px; height: 28px; background: #f8f7f6 url(../image/study_li_icon.png) no-repeat center; background-size: 100% auto;
position: absolute; left: 0px; top: -3px;}
.row0714 .right li:hover::before{ font-family: 'iconfont'; content: '\e601'; font-size: 16px; line-height: 28px; color: #960001; background: none;}
.row0714 .right .title{ line-height: 20px; position: relative;}
.row0714 .right li:hover .title{ font-weight: bold;}
.row0714 .right .date{ color: #999; margin-top: 18px; padding-left: 20px; position: relative;}
.row0714 .right .addr{ color: #999; margin-top: 13px; padding-left: 20px; position: relative;}
.row0714 .right .peopel{ color: #999; margin-top: 13px; padding-left: 20px; position: relative;}
.row0714 .right i{ position: absolute; left: 0;}
.row0714 .right .date i::before{ color: #cab99f; font-size: 16px;}
.row0714 .right .addr i{ display: inline-block; width: 11px; height: 14px; background: url(../image/addr_icon.png) no-repeat center/cover;}
.row0714 .right .peopel i{ display: inline-block; width: 13px; height: 13px; background: url(../image/people_icon.png) no-repeat center/cover;}



.media .modeCon .title{ color: #222; max-height: 50px; font-weight: normal; width: calc(100% - 195px); padding-right: 20px; display: flex; display: -ms-flexbox; align-items: center;}
.row07{ margin-top: 0px; padding-top: 60px;}
.row07 > .flex{ flex-direction: column-reverse; font-size: 0;}
.row07 .left{ margin-top: 0px; padding-top: 100px;}

.service-pagination{ display: none;}
.white_cover-pagination{ display: none;}
.people-pagination{ display: none;}

/* 响应式样式 */
@media screen and (max-width:1680px){
    .row03 .right .summary{ margin-top: 10px; margin-bottom: 0;}
    .row03 .right .modeCon{ padding-top: 20px;}
}
@media screen and (max-width:1600px){
    .banner .title{ font-size: 30px;}
}

@media screen and (max-width:1480px) {
    .row01 .right ul li{ margin-bottom: 30px;}
    .row03 .right .modeCon a{ padding: 25px 0;}
    .matrix .modeCon ul{ margin: 0 -10px;}
    .matrix .modeCon a{ margin: 0 10px;}
    .row04 .modeCon .img img{ max-width: 50% !important;}
    .side a{ line-height: 40px;}
}

@media screen and (max-width:1400px) {
    .banner .title{ left: 50px;}
    .banner .more{ right: 50px;}
    .banner .swiper-pagination{ right: 110px;}
    .row01 .right ul li{ margin-bottom: 25px;}
    .row05 .people ul{ margin: 0 -10px;}
    .row05 .people .modeCon .a{ margin: 0 10px;}
    .row05 .people .info{ margin: 0 10px; padding: 15px;}
    .row05 .people .title{ margin-top: 15px;}
    .row05 .people .summary{ margin-top: 10px;}
    .row03 .right .modeCon{ padding-top: 0px;}
}

@media screen and (max-width:1280px) {
    .banner .title{ font-size: 24px; bottom: 40px;}
    .banner .swiper-pagination{ bottom: 30px;}
    .banner .more{ bottom: 40px;}
    .row03 .right .modeCon a{ padding: 20px 0;}
    .side ul{ padding: 40px 0; }
    .side a{ line-height: 35px;}
    .side-logo{ width: 85px; height: 85px; background-size: cover;}
}

@media screen and (max-width:1200px) {
    .row01 .right ul li{ margin-bottom: 15px;}
    .row02 .white_cover::before, .row02 .white_cover::after{ width: 140px; background-size: 100% auto;}
}

@media screen and (max-width:1100px) {
    .banner{ height: auto;}
    .banner .swiper{ position: relative; height: auto;}
    .banner .gp-img-responsive{ height: 0;}
    .banner .title{ font-size: 22px; left: 0px; bottom: 40px; width: 100%; padding: 7px 20px; box-sizing: border-box; text-align: center;}
    .banner .swiper-pagination{ display: inline-table; left: auto; bottom: 20px; right: calc(50% + 30px); transform: translateX(50%);}
    .banner .more{ bottom: 20px; right: calc(50% - 100px);}
    .banner .swiper-pagination span{ width: 6px; height: 6px;}
    .banner .swiper-pagination .swiper-pagination-bullet-active{ width: 17px; height: 17px;}
    .banner .swiper-slide::before{ height: 200px;}
    .banner .down{ display: none;}
    .news .modeCon{ flex-direction: column;}
    .row01 .news .left{ width: 100%;}
    .row01 .news .right{ width: 100%; margin-top: 20px;}
    .row0711 ul{ margin: 0 -6px;}
    .row0711 ul a{ margin: 0 6px;}
    .row02 .report .swiper{ padding: 10px;}
    .row0714 .flex{ flex-direction: column;}
    .row0714 .left, .row0714 .right{ width: 100%;}
    .row0714 .right{ margin-top: 30px;}
    .row04{ margin-top: 30px; padding-top: 0;}
    .row03 .left{ position: relative; width: 100% !important; top: 0; padding: 20px 0 0 30px;}
    .row03 .right{ float: none; width: 100%; padding-left: 0; margin-top: 20px;}
    .row03 .right .modeCon a::before{ width: 100%;}
    .row05{ padding-top: 40px;}
    .row05 .light .modeCon ul:last-child li{ width: 50%; margin-bottom: 10px;}
    .row05 .people{ padding-top: 40px;}
    .row05 .people ul li{ width: 50%;}
    .row05 .people .info{ box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.06); margin-bottom: 20px;}
    .row06{ padding-top: 40px;}
    .row06 > .flex{ flex-direction: column;}
    .media{ width: 100%;}
    .recruit{ width: 100%; padding-bottom: 40px;}
    .people .modeCon{ overflow: hidden;}
    .row02 .report{ padding: 0 40px;}
    .report-button-prev, .report-button-next{ display: block;}
    .row0714::before{ width: 100%;}
    .matrix .modeCon a.weibo{ margin-top: 0px;}
    .matrix .modeCon li{ margin-bottom: 20px;}
    .side a{ font-size: 17px;}

}
@media screen and (max-width:1024px) {
    /* .side{ display: none;} */
}

@media screen and (max-width:996px) {
    .service .modeCon a{ margin: 0 26px;}
    .recruit .modeCon a{ margin-bottom: 20px;}
    .row0711 ul li{ margin-bottom: 10px;}
    .row0711 ul a{/* margin: 0 auto; *//* max-width: 450px; */margin: 0 7px;}
    .row0711{ padding: 40px 0;}
    .row05 .light ul li{ width: 50%;}
    .matrix .modeCon { padding-right: 0px;}
    .matrix .modeCon li{ width: 100%;}
    .matrix .modeCon a.weibo{ padding-top: 0;}
    .matrix .modeCon{ display: flex; display: -webkit-flex; flex-direction: column-reverse; margin-top: 30px;}
    .matrix .matrixShare{ position: relative; text-align: center; margin-bottom: 20px;}
    .matrix .matrixShare > div{ display: inline-block; vertical-align: middle; margin-top: 0; margin: 0 5px;}
    .matrix .matrixShare .newspaper{ display: inline-block;}
}

@media screen and (max-width:767px) {
    .matrix .modeCon li, .matrix .modeCon li:last-child{ width: 100%; margin-bottom: 20px;}
    .matrix .modeCon a.weibo{ display: flex; display: -webkit-flex; flex-direction: column-reverse;}
    .matrix .modeCon .weibo .info{ border: 1px solid #eeded9;}
    .matrix{ padding-bottom: 20px;}
    .content .modeTitle::before,.content .modeTitle::after{ height: 15px;}
    .content .modeTitle .ch{ font-size: 24px; line-height: 1;}
    .content .modeTitle .en{ font-size: 12px; line-height: 1; margin-top: 6px;}
    .banner .down{ display: none;}
    .mouseMoble{ position: absolute; top: 20px; text-align: center; width: 100%;}
    .mouseMoble span{ display: inline-block; width: 14px; height: 19px; background: url(../image/mouse.png) no-repeat center/cover;
    animation: mouse 2s cubic-bezier(.15,.41,.69,.94) infinite;
    -webkit-animation: mouse 2s cubic-bezier(.15,.41,.69,.94) infinite;
    -moz-animation: mouse 2s cubic-bezier(.15,.41,.69,.94) infinite;
    transition: all 0.35 ease;}
    .row01 .news{ padding: 90px 0 0;}
    .row05 .light ul li{ width: 100%; margin-bottom: 10px;}
    .row05 .modeCon ul:last-child{ margin-top: 0;}
    .row05 .people .modeTitle .ch{ color: #000;}
    .row05 .people .modeTitle .en{ color: #444;}
    .content .media .modeTitle, .content .recruit .modeTitle{ text-align: center;}
    .content .media .modeTitle a{ padding-left: 30px;}
    .content .media .modeTitle::after, .content .recruit .modeTitle::before{ width: calc(50% - 90px);}
    .content .media .modeTitle::before, .content .recruit .modeTitle::after{ display: block;}
    .row04{ background-position: center;}
    .row04 .modeCon{ margin-left: 0; margin-right: 0; padding-bottom: 80px;}
    .row04 .modeCon::before{ top: 20%;}
    .row03{ padding-top: 0;}
    .row03 .left{ padding-left: 0;}
    .row03 .left .bg{ left: -20px; width: 100%; height: calc(100% - 20px);}
    .row03 .right .modeTitle{ display: none;}
    .row03 .right .modeCon{ padding-top: 0;}
    .row03 .right .modeCon li::before, .row03 .right .modeCon li::after{ width: 125px; height: 22px;}
    .row05 .light .video{ left: 15px;}
    .row05 .light .video::before{ font-size: 26px;}
    .row05 .light .title{ width: calc(100% - 100px); right: auto; left: 50px; bottom: 24px;}
    .row05::before{ height: 100%; background: url(../image/light_bg_m.png) no-repeat center/cover}
    .light .modeCon{ background: #fff; padding: 0 10px;}
    .row05 .people .modeTitle .ch, .row05 .people .modeTitle .en{ color: #fff;}
    .row05 .people ul{ margin: 0;}

    .row0711 .gp-container{padding: 0}
}

@media screen and (max-width:680px) {
    .row02 .white_cover::before, .row02 .white_cover::after{ display: none;}
    .row02 .white_cover .swiper-slide a{ padding: 18px 0 0;}
    .row04 .modeCon a{ margin: 0 30px;}
    .side:hover, .side.open{ width: 120px;}
    .side a{ font-size: 16px;}
}

@media screen and (max-width:540px) {
    .service .modeCon a{ margin: 0;}
    .row01 .topNew{ padding-left: 0; background-position: 524% bottom;}
    .row01 .topNew .img{ width: 160px;}
    .row01 .topNew .info{ width: calc(100% - 160px); padding-right: 20px;}
    .row04 .modeCon a{ margin: 0 20px;}
}

@media screen and (max-width:479px) {
    .banner .swiper-slide::before{ height: 100px;}
    .banner .swiper-slide::after{ height: 100px;}
    .service > div{ padding: 40px 0;}
    .service-pagination.swiper-pagination-bullets{ display: block; text-align: center; margin-top: 30px;}
    .service-pagination .swiper-pagination-bullet{ width: 20px; height: 18px; background: transparent; box-shadow: none; position: relative;}
    .service-pagination.swiper-pagination-bullets .swiper-pagination-bullet::before{ content: '\e602'; font-family: 'iconfont'; display: block; position: absolute; left: 0; top: 0; font-size: 18px; color: #fff;}
    .row01 .modeCon{ margin-top: 20px;}
    .row01 .left .info{ padding: 25px 20px 25px;}
    .row01 .right ul a{ display: flex; display: -ms-flexbox; flex-direction: column-reverse;}
    .row01 .right ul .date{ float: none;}
    .row01 .right ul .title{ word-wrap: break-word; white-space: pre-wrap; overflow: visible;}
    .row01 .date i::before{ font-size: 14px;}
    .row01 .topNew{ padding-bottom: 15px; background: url(../image/topNew_moble_bg.png) no-repeat right bottom;}
    .row01 .right ul{ margin-top: 0;}
    .row01 .topNew .gp-img-responsive{ position: relative;}
    .row01 .topNew .gp-img-responsive::before{ border-top: 15px solid transparent; border-right: 7.5px solid transparent;
        border-left: 15px solid #fff; border-bottom: 15px solid transparent;
        position: absolute; top: 15px; left: 0;}
    .row01 .right ul{ padding: 15px;}
    .row01 .right ul .title{ line-height: 26px;}
    .row01 .right ul .date{ width: 108px; height: 29px; line-height: 28px; padding-left: 30px; margin-top: 5px;}
    .row01 .right ul .date i::before{ font-size: 12px;}
    .gp-container, .gp-container-2{ padding-left: 0; padding-right: 0;}
    .row0711{ padding-top: 30px;}
    .row0714{ padding-top: 40px;}
    .row0714::before{ width: 100%;}
    .row02{ padding: 40px 0; position: relative;}
    .row02::before{ content: ''; display: block; width: 100%; height: 0; box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.3);}
    .row02 .modeCon{ margin-top: 10px;}
    .white_cover{ margin-bottom: 40px;}
    .white_cover-pagination{ display: block; text-align: center !important;}
    .white_cover-pagination .swiper-pagination-bullet{ box-shadow: none; width: 6px; height: 6px; border: 1px solid #960001; background: #fff; transition: all 0.35s ease;}
    .white_cover-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ background: #960001;}
    .row02 .report{ padding: 0 32px;}
    .report-button-prev, .report-button-next{ width: 32px;}
    .row0714 .left a{ position: relative; z-index: 1;}
    .row0714 .left .modeCon{ margin-top: 40px; }
    .row0714 .left .modeCon::before{ content: ''; display: block; width: 100%; height: 100%; background: #fff; position: absolute; left: 0; top: 0;}
    .firstNotice a{ padding: 30px 10px 20px 5px;}
    .row0714 .left .modeCon ul{ overflow: hidden;}
    .row0714 .left ul .title::before{ width: calc(100% + 120px); right: 0px;}
    .row0714 .right{ padding-top: 40px; position: relative;}
    .row0714 .right::before{ content: ''; display: block; width: calc(100% + 40px); height: 100%; background: #f8f7f6 url(../image/moble_right_bg.png) no-repeat center/cover; position: absolute; left: 50%; top: 0; transform: translateX(-50%);}
    .row04{ background-size: 100% auto;}
    .row05{ position: relative;}
    .row05::after{ content: ''; display: block; width: 100%; height: 80px; background: #faf8f5; position: absolute; bottom: 0; left: 0;}
    .row05 .people .info{ margin-top: -30px; padding-bottom: 50px; position: relative; z-index: 1;}
    .people-pagination{ display: block; text-align: center !important; position: relative; z-index: 10; left: 0 !important; bottom: 60px !important;}
    .people-pagination .swiper-pagination-bullet{ box-shadow: none; width: 6px; height: 6px; border: 1px solid #960001; background: #fff;}
    .people-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ background: #960001 !important;}
    .row06{ padding-top: 0;}
    .media .modeCon .lable{ width: 108px; height: 40px; line-height: 40px;}
    .media .modeCon .title{ width: calc(100% - 118px); padding-right: 0; line-height: 24px; height: 48px; align-items: flex-start;}
    .row04 .modeCon a{ margin: 0 10px;}
    .banner .title{ font-size: 17px;}
    .row01 .news{ padding: 50px 0 0;}
    .row01 .topNew .summary{ display: none;}
    .row03 .right .modeCon a{ display: flex; display: -ms-flexbox;}
    .row03 .ch{ flex-shrink: 0;}
    .row03 .en{ margin-left: 15px; white-space: nowrap; overflow: hidden;}
}

@media screen and (max-width:380px) {
    .row04 .modeCon::before{ top: 17%;}
}