@charset "utf-8";

.banner{ z-index: 0;}
.banner, .banner li{ position: relative;}
.banner .gp-img-responsive{ padding-bottom: 34.0625%;}
.banner .title{ width: 36%; position: absolute; bottom: 37px; left: 13.54%; color: #fff; text-shadow: 0px 0px 16px rgba(0, 0, 0, 0.44);}
.slick{ z-index: 0;}
.banner .slick-prev,
.banner .slick-next{
    width: 100px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    position: absolute;
    right: 0px;
    bottom: 0px;
    z-index: 1;
    border: 0px;
    color: #fff;
    background-color: #2c6cdb;
    font-size: 22px;
}
.banner .slick-prev{ right: 100px; background-color: #004599; color: #fdee1e;}
.slick-dots{ position: absolute; right: 33px; bottom: 50%; transform: translateY(50%); z-index: 1; display: flex; flex-direction: column;}
.slick-dots li{ width: 2px; height: 20px; background-color: rgba(0, 69, 153, 0.3); margin-top: 20px; transition: all 0,35s ease;}
.slick-dots li.slick-active{ background-color: #004599;}
.slick-dots button{ display: none;}

.content{
}
.row01{
    padding-top: 98px;
    background: url(../images/news_bg.png) no-repeat center top;
    padding-bottom: 110px;
}
.row01 .slick-list{ overflow: visible; overflow-x: clip;}

.channel{ display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap;}
.channelName{ color: #004599; padding-bottom: 19px; line-height: 1; position: relative;}
.channelName::before,.channelName::after{ content: ''; display: block; width: 160px; height: 2px; background-color: rgba(0, 0, 0, 0.1); position: absolute; left: 0px; bottom: 0px; background-origin: 0px;}
.channelName::before{ width: 44px; background-color: #5cb293;}
.more{ font-family: 'EB Garamond'; width: 137px; height: 40px; line-height: 40px; text-align: center; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 20px; position: relative;color: #999999; padding-left: 31px;}
.more::before{content: ''; display: block; width: 11px; height: 10px; background: url(../images/more_icon.png) no-repeat center; 
    position: absolute; left: 30%; top: 52%; transform: translateY(-50%) translateX(-50%);}

.mode01{ position: relative;}
.slickNewsArrow{ position: absolute; top: -95px; left: 350px; display: flex;}
.slickNewsArrow .slick-prev,.slickNewsArrow .slick-next{
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.06);
    text-align: center;
    font-size: 1.8rem;
    color: #004599;
}
.slickNewsArrow .slick-next{ margin-left: 10px;}

.slickNews{ position: relative; margin-top: 35px; margin-left: -40px; margin-right: -40px;}
.slickNews li a{ display: block; box-shadow: 0px 20px 50px 7.5px rgba(0, 0, 0, 0.06); margin: 0px 40px; background-color: #fff; padding: 9px; padding-bottom: 40px; border: 1px solid rgba(0, 0, 0, 0.1); transition: all 0.35s ease; position: relative;}
.slickNews li a::after{ content: ''; display: block; width: 44px; height: 1px; background-color: rgba(0, 0, 0, 0.1); position: absolute; bottom: 55px; right: 30px;}
/* .slickNews li:hover a{ transform: translateY(-10px);} */
.slickNews li:hover img{ transform: scale(1.03);}
.slickNews .title{ padding: 0px 20px; margin: 20px 0px 10px; color: #222; line-height: 1;}
.slickNews .summary{ padding: 0 20px; line-height: 1.3; height: 3.9em; margin-bottom: 10px;}
.date{
    background-color: rgba(0, 0, 0, 0.06);
    color: #004599;
    line-height: 1;
    display: inline-block;
    padding: 8px 30px;
    border-radius: 18px;
    padding-left: 48px;
    position: relative;}
.mode01 .date{ margin-left: 20px;}
.date::before{
    content: '';
    display: block;
    width: 14px;
    height: 15px;
    background: url(../images/date_icon.png) no-repeat center;
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-40%);
}

/* row02*/
.row02{ background: url(../images/research_bg.png) no-repeat center top; padding-top: 88px; padding-bottom: 70px;}
.row02 .channelName, .row02 .more{ color: #fff;}
.row02 .more{ border: 1px solid rgba(255, 255, 255, 0.1);}
.row02 .more::before{ background: url(../images/more_icon_white.png);}
.row02 .channelName::before{ background-color: #fdee1e;}
.mode02{ margin-top: 35px; margin-left: -10px; margin-right: -10px;}
.mode02 li{ margin-bottom: 30px;}
.mode02 a{ display: block; margin: 0px 10px; background-color: #f5f5fa; border-radius: 16px 0 0 16px; overflow: hidden;}
.mode02 .info{ padding: 26px 30px 0px;}
.mode02 .title{ margin-bottom: 18px; line-height: 1.4;}
.mode02 .date{ margin-top: 20px; margin-left: 0px; position: relative; }
.mode02 .date::after{ content: ''; display: block; width: 44px; height: 1px; background: #fff; position: absolute; top: -20px; left: 0px;}
.mode02 .img{/*  float: left; */ width: 275px; flex-shrink: 0; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 16px 0 0 16px;}
.mode02 .gp-img-responsive{ padding-bottom: 74.91%;}

/* row03 */
.mode03{ margin-top: 30px; margin-left: -40px; margin-right: -40px; margin-bottom: 100px;}
.mode03 a{min-height: 250px; display: block; padding: 25px 13px 34px; border-radius: 0 0 16px 16px; overflow: hidden; margin: 0 40px; background: url(../images/seminars_bg.png) no-repeat center/cover;}
.mode03 .img{ width: 140px; height: 140px; flex-shrink: 0; padding: 8px; margin-top: 8px; background-color: #fff; border-radius: 50%; overflow: hidden; margin-right: 20px;}
.mode03 .info{ padding-right: 23px;}
.mode03 .title{ height: 2.5em; overflow: clip; margin: 11px 0 0px; position: relative;}
.mode03 .img .gp-img-responsive{ padding-bottom: 100%;}
.mode03 .date{ display: block; margin-top: 20px; padding-left: 40px; background-color: initial; position: relative;}
.mode03 .line{ height: 1px; width: 100%; margin-top: 28px; background-color: rgba(0, 0, 0, 0.1); position: relative;}
.mode03 .line::after{ content: ''; display: block; width: 44px; height: 1px; background-color: #004599; 
    position: absolute; top: 0px; right: 0px;}
.mode03 .date span{ color: #999;}
.mode03 .gp-img-responsive{ border-radius: 50%;}
.mode03 .gp-img-responsive img{ width: calc(100% + 16px); max-width: unset; transform: translate3d(-8px, -8px, 0);}
.mode03 .date::before{ width: 30px; height: 30px; border-radius: 50%; background: url(../images/date_icon2.png) no-repeat center; background-color: rgba(0, 0, 0, 0.06);
    left: 0px; transform: translateY(-50%);}

/* mode04 */
.mode04{ padding: 10px 10px 35px; background: url(../images/about_bg.png) no-repeat center/cover; margin-bottom: 100px;}
.mode04 .lf{ width: 740px; flex-shrink: 0; margin-right: 40px;}
.mode04 .lf .gp-img-responsive{ padding-bottom: 55.1554%; margin-bottom: 29px;}
.aboutCESE{ line-height: 1; text-align: center; color: #004599;}
.mode04 .rt p{
    margin-top: 60px;
    padding-right: 30px;
    line-height: 1.778;
    max-height: 350px;
    overflow: hidden;
}

/* row04 */
.row04{ background-color: #f7f7f7; padding-top: 60px; padding-bottom: 90px;}
.indexLink{
    margin-left: -30px;
    margin-right: -30px;
    margin-top: 35px;
}
.indexLink a{
    display: block;
    margin: 0 30px;
    padding: 10px;
    background: #fff url(../images/link_icon.png) no-repeat;
    background-position: 100% 45%;
}
.indexLink .img{
    width: 218px;
    flex-shrink: 0;
}
.indexLink .name{ display: flex; align-items: center; padding-left: 20px; color: #004599;}
.indexLink .gp-img-responsive{ padding-bottom: 56.42%;}


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

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

@media screen and (max-width:1400px) {
  .banner .title{ left: 5%;}
}

@media screen and (max-width:1280px) {
    .mode04 .lf{ width: 640px;}
    .mode04 .rt p{ margin-top: 10px;}
    .indexLink .img{ width: 180px;}
    .indexLink{ margin-left: -20px; margin-right: -20px;}
    .indexLink a{ margin: 0 20px;}
    .row01, .row02, .row04{ padding-top: 30px; padding-bottom: 30px;}
    .mode03, .mode04{ margin-bottom: 30px;}
    .banner .slick-prev, .banner .slick-next{ display: none;}
    .banner .title{ width: 90%; font-size: 2.8rem;}
}

@media screen and (max-width:1200px) {
    .banner .slick-prev, .banner .slick-next{ width: 80px; height: 60px;}
    .banner .slick-prev{ right: 80px;}
    .slickNews{ margin-left: -15px; margin-right: -15px;}
    .slickNews li a{ margin: 0 15px;}
    .banner, .banner li{ z-index: 0;}
}

@media screen and (max-width:1100px) {
    .mode02 li{ width: 100%;}
    .mode03, .indexLink{ margin-left: -15px; margin-right: -15px;}
    .mode03 a, .indexLink a{ margin: 0 15px;}
    .indexLink .img{ width: 160px;}
    .indexLink .name{ padding-left: 10px;}
}
@media screen and (max-width:1080px) {
    .mode04{ display: block;}
    .mode04 .lf, .mode04 .rt{ width: 100%;}
    .mode04 .rt p{ max-height: unset;}
    .indexLink li{ width: 50%; margin-bottom: 10px;}
    .banner .title{ left: 3%;}
}
@media screen and (max-width:1024px) {
    
}

@media screen and (max-width:997px) {
    .slickNews li a::after{ display: none;}
    .mode03 li{ margin-bottom: 10px;}
    .mode03, .mode04{ margin-bottom: 10px;}
    .channelName{ font-size: 3.4rem;}
    .slickNews, .mode02, .mode03, .indexLink{ margin-top: 15px;}
}

@media screen and (max-width:767px) {
    .slickNewsArrow{ display: none;}
}

@media screen and (max-width:680px) {
    .indexLink li{ width: 100%;}
    .indexLink a{ background-size: cover;}
    .banner .title{ bottom: 15px; height: 1.2em; overflow: hidden;}
    .channelName{ font-size: 2.8rem;}
    .mode02 .img, .mode02 .info, .indexLink .img, .indexLink .name{ width: 100%;}
    .mode02 .info{ padding-bottom: 20px;}
    .mode03 .img{ margin: 0 auto;}
    .indexLink .name{ width: 100%; padding: 10px 0; justify-content: center}
}

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

@media screen and (max-width:479px) {
    .mode04 .rt p{ padding-right: 0px;}
    .more{ width: 100px;}
}

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