@charset "utf-8";

.banner{ overflow: hidden; position: relative; z-index: 2; padding-bottom: 40px;}
.banner .gp-img-responsive{ padding-bottom: 48.958%;}
.banner a{ position: relative;}
.banner a::before{ content: ''; display: block; width: 100%; height: 280px; 
  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; top: 0px; left: 0px; z-index: 1;}
.banner .title{ position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); text-align: right;}
.banner .title span{ display: inline-block; width: 100%; max-width: 730px; background: #fff; 
  padding: 40px 60px 60px 50px; box-sizing: border-box; text-align: left;}
.banner:hover .gp-img-responsive img{transform:scale(1.01);opacity: 0.85;}

.banner > .gp-container{ position: absolute; left: 50%; transform: translateX(-50%); bottom: 112px; z-index: 10;}
.arrow{ }
.swiper-pagination{ left: 286px; bottom: 20px;}
.swiper-pagination .swiper-pagination-bullet{ width: 20px; height: 2px; background: rgba(255, 255, 255, 0.5); 
  margin-right: 16px; cursor: pointer; transition: all 0.35s ease;}
.swiper-pagination .swiper-pagination-bullet-active{ background: rgba(255, 255, 255, 1)}

.swiper-button{  position: relative; float: right;}
.swiper-button div{ width: 60px; height: 60px;}
.swiper-button-prev{ position: relative; width: 50px; height: 50px; border-radius: 50%; background: url(../images/prev.png) no-repeat center center; left: 200px;}
/* .swiper-button-next{ background: url(../images/next.png) no-repeat center center; right: 0px;} */

.content{ position: relative; z-index: 1; margin-top: -40px;}
.mode-title{ border-bottom: 1px solid rgba(0, 0, 0, 0.1); position: relative;}
.mode-til{ display: inline-block; line-height: 26px; color: #999999;
  position: relative;}
.mode-til:hover .en{ color: #999999;}
.mode-til .ch{ display: inline-block; color: #00843d; padding-bottom: 17px; position: relative;}
.mode-til .ch::after{ content: ''; display: block; width: 100%; height: 1px; background: #00843d; position: absolute; bottom: -1px; left: 0px;}
.mode-til .en{ display: inline-block; padding-left: 19px; line-height: 12px; text-transform: uppercase;}
.mode-more{ display: inline-block; color: #999999; padding-left: 34px; position: relative;}
.mode-more::before{ content: ''; display: block; width: 20px; height: 1px; background: rgba(0, 0, 0, 0.24);
  position: absolute; left: 0px; top: 9px;}


.row01{ background: url(../images/row01_bg.png) no-repeat center top; padding: 100px 0 90px;}
.row01 .mode{ width: 49.16%; padding: 40px 40px 54px; box-sizing: border-box; background: #fff; overflow: hidden;}
.row01 .first{ margin-top: 39px; position: relative;}
.row01 .first::after,
.row01 .mode li::after{ content: ''; display: block; width: 150%; height: 1px; background: rgba(0, 0, 0, 0.06);
  position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%);}
.row01 .first .img{ width: 225px; flex-shrink: 0;}
.row01 .first .infoBox{ width: calc(100% - 245px);}
.row01 .gp-img-responsive{ padding-bottom: 56%;}
.first .title{ line-height: 36px;}
.first .date{ color: #00843d; margin-top: 34px; line-height: 1; position: relative;}
.first .date::after{ content: ''; display: block; width: 4px; height: 4px; background: #00843d;
  position: absolute; right: 0px; top: 50%; transform: translateY(-505);}
.row01 .mode ul a{ display: block; padding: 30px 0; padding-left: 34px; position: relative;}
.row01 .mode ul a::before{ content: ''; display: block; width: 4px; height: 4px; background: #00843d; 
  position: absolute; left: 0px; top: 50%; transform: translateY(-50%);}
.row01 .mode li{ position: relative;}
.row01 .mode ul .title{ line-height: 16px;}
.row01 .mode ul .date{ line-height: 16px;}
.date{ color: #999;}

.mode02 .mode-til .ch::after,
.mode02 .first .date::after{ background: #fed900;}
.mode02 .first .date{ color: #fed900;}

/* row02 */
.row02{ padding-top: 109px;}
.row02 .gp-container{ position: relative;}
.tab .position{ justify-content: flex-start; align-items: flex-end; position: absolute; bottom: calc(100% - 43px); left: 14.67%; transition: all 0.35s ease;}
.til-list{ font-size: 0; align-items: flex-end;}
.tab .lable{ line-height: 34px; color: #999; margin-bottom: 7px; flex-shrink: 0;}
.boxTitle{ display: inline-block; color: #757575; font-size: 14px; line-height: 1; min-width: 127px; padding: 10px 0; box-sizing: border-box; text-align: center; cursor: pointer;
  border-radius: 17px; background: rgba(0, 0, 0, 0.04); margin-right: 10px; vertical-align: baseline; margin-bottom: 10px; transition: all 0.1s ease-in-out;}
.boxTitle.on{ background: #fff; border-radius: 0; padding: 19px 0 20px; font-size: 16px; color: #00843d; margin-bottom: -1px;
 border-top: 1px solid rgba(0, 0, 0, 0.06); border-left: 1px solid rgba(0, 0, 0, 0.06); border-right: 1px solid rgba(0, 0, 0, 0.06);}
.box-list{ position: relative;}
.box-list .box{ height: 0; overflow: hidden; display: block !important; color: #757575;
  line-height: 30px; padding-top: 0px; box-sizing: border-box;
  transform: translateY(70px); opacity: 0; transition: transform 0.3s ease, opacity 0.35s ease;}
.box-list .box.on{ overflow: visible; padding-top: 23px; transform: translateY(0); opacity: 1; height: auto;}
.box-list .box p{ margin-bottom: 30px; box-sizing: border-box;}
.box .imgList{ padding-left: 20px; padding-right: 20px; margin-left: -40px; margin-right: -40px; transition: all 0.35s ease;}
.box .imgList li{ width: 16.66%; float: left;}
.box .imgList a{ display: block; margin: 0 20px; }
.box .imgList .gp-img-responsive{ padding-bottom: 139.92%;}
.box .imgList .name{ height: 65px; line-height: 65px; text-align: center; box-shadow: 0px 20px 42.5px 7.5px rgba(0, 0, 0, 0.06);}
.box .textArea{ border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.box .meeting{ margin-left: -10px; margin-right: -10px;}
.box .meeting li{ width: 40%; margin-bottom: 20px; float: left;}
.box .meeting li:nth-last-of-type(1),
.box .meeting li:nth-last-of-type(2){ margin-bottom: 0;}
.box .meeting a{ display: block; margin: 0 10px; color: #444; line-height: 1; background: rgba(0, 0, 0, 0.04); padding: 20px 40px 30px; box-sizing: border-box;}
.box .meeting .title{ color: #222; margin-bottom: 30px;}
.box .meeting .addr{ margin-bottom: 20px;}
.box .meeting .theme{ margin-bottom: 20px;}
.box .meeting .date{ color: #444;}
.box .meeting .icon{ padding-left: 19px; position: relative;}
.box .meeting .icon::before{ content: ''; display: block; width: 10px; height: 2px; background: #c9ab00;
  position: absolute; left: 0px; top: 50%; transform: translateY(-50%);}


/* 科研简报 */
.row03{ position: relative; z-index: 4;}
.research{ position: relative; padding-top: 111px; justify-content: flex-start;}
.research .mode-title{ display: inline-block; border-bottom: none; position: unset; margin-right: 64px;}
.research .border{  width: 142px; height: 103px; box-sizing: border-box; line-height: 114px; border: 1px solid rgba(0, 0, 0, 0.1); text-align: center;
  position: absolute; right: 0px; top: 70px;}
.research .mode-more{ line-height: 20px;}
.research_con{ width: 74.06%;}
.research_con li{ align-items: center; border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
.research_con a{ display: block; width: calc(100% - 84px); padding: 30px 0 28px; position: relative;}
.research_con .title{ line-height: 1.2; position: relative; transition: color 0.35s ease;}
.research_con .title::before{ content: ''; display: block; width: 4px; height: 4px; background: #00843d;
  position: absolute; left: -19px; top: 50%; transform: translateY(-50%);}
.research_con .date{ font-size: 12px;}
.research_con .summary{ color: #999999; line-height: 20px; height: 0px; margin-top: 0px; overflow: hidden; position: relative; transition: all 0.35s ease;}
.research_con b{ color: #00843d; float: right; background: #fff; padding-left: 5px; position: absolute; bottom: 0; right: 0;}
.research_con .more{ width: 44px; height: 44px; margin-left: 40px;margin-top: 0px; flex-shrink: 0; position: relative; transition: all 0.35s ease;}
.research_con .more::before,
.research_con .more::after{ content: ''; display: block; width: 100%; height: 1px; background: rgba(0, 0, 0, 0.1);
  position: absolute; left: 0px; top: 50%;}
.research_con .more::after{ width: 1px; height: 100%; left: 50%; top: 0px;}
.research_con li.on{ align-items: flex-start;}
.research_con li.on .more{transform: rotateZ(45deg); margin-top: 15px;}
.research_con li.on .more::before,
.research_con li.on .more::after{ background: #00843d;}
.research_con li.on .summary{ margin-top: 16px; height: auto;}
.research_con li.on .title{ color: #00843d; font-weight: bold; position: relative;}
.research_con a::before{ content: ''; display: block; width: 4px; height: 4px; background: #00843d;
  position: absolute; left: -19px; top: 40px;}

/*  */
.row04{ background: url(../images/row03.png) no-repeat center top/cover; padding-bottom: 142px;
  padding-top: 280px; margin-top: -60px; position: relative;}
.row04::before{ content: ''; display: block; width: 100%; height: 166px; background: url(../images/row03_top.png) no-repeat top right; background-size: 100% auto;
  position: absolute; top: 0px; right: 0px; z-index: 3;}
.row04 .leftbg{ content: ''; display: block; width: 100%; height: 100%;
  background-color: rgb(0, 0, 0); opacity: 0.039;
  position: absolute; top: 0px; left: 0px; z-index: 2;}
.row04 > .gp-container{ position: relative; z-index: 3;}
.forum .latest{ width: 31.66%; padding: 99px 50px 0; box-sizing: border-box;}
.forum .latest .title{ color: #fff; font-weight: bold;}
.forum .right{ width: calc(100% - 31.66%); padding-left: 100px; box-sizing: border-box;}
.forum .left a{ display: block; padding: 43px 50px 67px 40px; background: #00843d; margin-top: 30px;}
.forum .left .theme,
.forum .left .speaker,
.forum .left .date,
.forum .left .addr{ color: #fff; font-size: 16px; line-height: 24px; padding-left: 56px; box-sizing: border-box; margin-bottom: 22px; position: relative;}
.forum .left .theme{ font-weight: bold; }
.forum .left .theme::before,
.forum .left .speaker::before,
.forum .left .date::before,
.forum .left .addr::before{ content: ''; display: block; width: 36px; height: 36px; background: url(../images/theme.png) no-repeat center/cover;
  position: absolute; left: 0px; top: 50%; transform: translateY(-50%);}
.forum .left .speaker::before{ background: url(../images/speaker.png) no-repeat center/cover;}
.forum .left .date::before{ background: url(../images/date.png) no-repeat center/cover;}
.forum .left .addr::before{ background: url(../images/addr.png) no-repeat center/cover;}
.forum .right ul{ margin-top: 36px; position: relative;}
.forum .right ul::before{ content: ''; display: block; width: 62px; height: 64px; background: url(../images/l.png) no-repeat center/cover;
  position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0);}
.forum .right li{ box-sizing: border-box;}
.forum .right li:nth-of-type(1){ border-right: 1px solid rgba(0, 0, 0, 0.06); border-bottom: 1px solid rgba(0, 0, 0, 0.06); padding-bottom: 40px;}
.forum .right li:nth-of-type(2){ padding-left: 50px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); padding-bottom: 40px;}
.forum .right li:nth-of-type(3){ border-right: 1px solid rgba(0, 0, 0, 0.06); padding-top: 40px;}
.forum .right li:nth-of-type(4){ padding-left: 50px; padding-top: 40px;}
.forum .right .theme{ line-height: 24px; height: 48px; padding-left: 56px; margin-bottom: 20px; position: relative; transition: color 0.35s ease;}
.forum .right li:hover .theme{ font-weight: bold; color: #00843d;}
.forum .right .speaker,
.forum .right .date,
.forum .right .addr{ color: #999; padding-left: 56px; line-height: 1; margin-bottom: 20px; position: relative;}
.forum .right .addr{ margin-bottom: 0; /* height: 2em; */}
.forum .right .theme::before,
.forum .right .speaker::before,
.forum .right .date::before,
.forum .right .addr::before{ content: ''; display: block; width: 36px; height: 36px; background: url(../images/theme_list.png) no-repeat center/cover;
  position: absolute; left: 0px; top: 50%; transform: translateY(-50%);}
.forum .right .speaker::before{ background: url(../images/speaker_list.png) no-repeat center;}
.forum .right .date::before{ background: url(../images/date_list.png) no-repeat center;}
.forum .right .addr::before{ background: url(../images/addr_list.png) no-repeat center;}



/* 响应式样式 */
@media screen and (max-width:1700px){
  .forum .right{ padding-left: 60px;}
}

@media screen and (max-width:1600px){
  .banner .title span{ padding: 20px 50px;}
  .research .mode-title{ margin-right: 30px;}
  .research .border{ width: 110px; height: 90px;}
  
}

@media screen and (max-width:1480px) {
  .row02{ padding-top: 60px;}
  .research{ padding-top: 60px;}
  .research .mode-title{ margin-right: 20px;}
  .research_con{ width: 70%;}
  .row04{ padding-top: 180px;}
  .forum .latest{ padding: 50px 30px 0; width: 40%;}
  .forum .left a{ margin-top: 10px; padding: 30px 20px;}
  .forum .right{ padding-left: 30px; width: 60%;}
  .row04{ padding-bottom: 80px;}
  .tab .position{ left: 16.5%;}
  .box .imgList{ margin-left: -10px; margin-right: -10px;}
  .box .imgList a{ margin: 0 10px;}
  .box .meeting li{ width: 50%;}
  
}

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

@media screen and (max-width:1240px) {
  .banner .title span{ font-size: 26px;}
  .row01{ padding: 80px 0 50px;}
  .row01 .mode{ padding: 30px 20px;}
  .research{ flex-direction: column;}
  .research_con{ width: 100%;}
  .research .border{ width: unset; height: unset; line-height: unset; border: unset;}
  .row04{ margin-top: -20px; padding-top: 140px;}
  .tab .position{ left: 20%;}
  .boxTitle{ min-width: 110px;}
}

@media screen and (max-width:1200px) {
  .tab .position{ position: unset; margin-top: 20px;}
  .boxTitle.on{ border-bottom: 1px solid rgba(0, 0, 0, 0.06); margin-bottom: 0;}
  .forum{ flex-direction: column;}
  .forum .latest{ width: 100%;}
  .forum .right{ width: 100%; margin-top: 30px; padding-left: 0;}
  .forum .right li:nth-of-type(1),
  .forum .right li:nth-of-type(3){ padding-right: 20px;}
  .forum .left .theme{ overflow: visible;}
  
}

@media screen and (max-width:1100px) {
  .row01{ background-size: 100% 100%;}
  .row01 > .flex{ flex-direction: column;}
  .row01 .mode{ width: 100%;}
  .mode02{ margin-top: 30px;}
  .banner > .gp-container{ width: 100%;}
  .swiper-button-prev{ left: 0;}
  .swiper-pagination{ left: 120px;}
  .banner .title{ left: 0px; transform: translateX(0);}
  .tab .position{ align-items: flex-start;}
  .til-list{ flex-wrap: wrap; justify-content: flex-start;}
  .row04{ margin-top: 10px;}
}
@media screen and (max-width:1024px) {
  
}

@media screen and (max-width:997px) {
  .forum .right li{ width: 50%;}
  .gp-container{ padding-left: 0; padding-right: 0px;}
  .banner a::before{ height: 180px;}
  .boxTitle{ margin-bottom: 20px;}
  .boxTitle.on{ margin-bottom: 10px;}
  .box .imgList{ margin-left: -5px; margin-right: -5px;}
  .box .imgList li{width: 25%; margin-bottom: 20px;}
  .box .imgList a{ margin: 0 5px;}
  
}

@media screen and (max-width:767px) {
  .forum .right li{ width: 100%;}
  .forum .right li:nth-of-type(1){ border-right: none; padding-bottom: 20px;}
  .forum .right li:nth-of-type(2){ padding-left: 0px; padding-top: 20px; padding-bottom: 20px;}
  .forum .right li:nth-of-type(3){ border-right: none; padding-top: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); padding-bottom: 20px;}
  .forum .right li:nth-of-type(4){ padding-left: 0; padding-top: 20px;}
  .forum .right ul::before{ display: none;}
  .row01{ padding-bottom: 0;}
  .row02{ padding-top: 20px;}
  .banner .title span{ font-size: 20px;}
  .forum .right li:nth-of-type(1),
  .forum .right li:nth-of-type(3){ padding-right: 0px;}
  .box .imgList li{width: 33.33%; min-width: unset;}
  .box .meeting a{ padding: 20px;}
}

@media screen and (max-width:680px) {
  .box-list .box p{ margin-bottom: 20px;}
}

@media screen and (max-width:540px) {
  .row01 .first{ flex-direction: column; padding-bottom: 20px;}
  .row01 .first .img, .row01 .first .infoBox{ width: 100%;}
  .first .date{ margin-top: 0px;}
  .row01 .mode ul a{ padding: 20px 0 20px 20px;}
  .box-list .box p{ float: none !important; /* text-align: center; */ margin: 0px auto 20px !important;}
  .box .imgList li{ width: 50%;}
  .box .meeting li{ width: 100%;}
  .box .meeting li:nth-last-of-type(1), .box .meeting li:nth-last-of-type(2){ margin-bottom: 20px;}

  
}

@media screen and (max-width:479px) {
  .research_con .more{ width: 35px; height: 35px; margin-left: 20px;}
  .research_con a{ width: calc(100% - 64px);}
  .row04{ padding-top: 80px;}
  .forum .latest{ padding: 40px 20px 0;}
  .forum .left .theme, .forum .left .speaker, .forum .left .date, .forum .left .addr{ padding-left: 45px;}
  .forum .right .speaker, .forum .right .date, .forum .right .addr{ padding-left: 45px;}
  .forum .right .theme{ padding-left: 45px;}
  .tab .position{ flex-direction: column;}
  .banner a::before{ height: 100px;}
  .banner > .gp-container{ display: none;}
  .banner .title span{ padding: 10px 20px;}
  .banner .title{ bottom: -50px;}
}

@media screen and (max-width:380px) {
  .box .imgList li{ width: 100%;}
}