@charset "utf-8";

.banner{ margin-top: 20px; overflow: hidden; border-radius: 20px; position: relative; z-index: 0; }
.banner .gp-img-responsive{ padding-bottom: 41.68%; background: #fff; border-radius: 20px; overflow: hidden;}
.banner img:hover{ transform: scale(1); opacity: 1;}
.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 .text{ width: 100%; font-size: 65px; line-height: 62px; color: #FBE5E5; text-transform: uppercase; text-align: center; font-weight: bold;
  position: absolute; top: 15.77%; left: 50%; transform: translateX(-50%); z-index: 1;
  animation: bannerShow 0.5s ease;}
.banner .text .more{ display: inline-block; font-size: 14px; width: 121px; height: 40px; line-height: 40px; border-radius: 20px; padding-left: 29px;
  border: 1px solid #fff; box-sizing: border-box; text-align: left; color: #fff;
  position: absolute; bottom: -104px; left: 50%; transform: translateX(-50%);}
.banner .text .icon-right:before{ position: absolute; right: 20px; font-weight: bold;}
@keyframes bannerShow { 0%{ opacity: 0; transform: translateX(200%);} 100%{ opacity: 1; transform: translateX(-50%);}}
@keyframes -ms-bannerShow { 0%{ opacity: 0; transform: translateX(200%);} 100%{ opacity: 1; transform: translateX(-50%);}}
@keyframes -webkit-bannerShow { 0%{ opacity: 0; transform: translateX(200%);} 100%{ opacity: 1; transform: translateX(-50%);}}
@keyframes -moz-bannerShow { 0%{ opacity: 0; transform: translateX(200%);} 100%{ opacity: 1; transform: translateX(-50%);}}
/* .banner .text .more::before{ content: ''; display: block; width: 4px; height: 6px; background: url(../images/banner_more.png) no-repeat center right; background-size: auto 100%;
  position: absolute; right: 0px; top: 50%; transform: translateY(-50%); z-index: 1;} */
.swiper{ border-radius: 20px; overflow: hidden;}

.content{ position: relative; z-index: 1; }
.mode-title{ position: relative; width: 268px; flex-shrink: 0;}
.mode-til{ line-height: 26px; color: #999999;
  position: relative;}
.mode-til:hover .en{ }
.mode-til .en{ font-size: 37px; color: #A83A42; line-height: 45px; text-transform: uppercase;}
.mode-til .ch{ color: #A83A42; font-size: 17px; line-height: 22px; font-weight: bold; position: relative;}
.mode-more{ display: block; width: 108px; height: 40px; line-height: 40px; padding-left: 14px; border: 1px solid #FBE5E5; border-radius: 20px; 
  color: #A83A42; font-family: 'Montserrat';
  text-transform: uppercase; font-weight: bold; margin-top: 27px; box-sizing: border-box; position: relative;}
.mode-more::before{ position: absolute; right: 24px;}
.date{ font-family: 'Arial';}

.row01{ }
.notice{ width: 90.9%; margin: 0 auto; padding: 60px 54px 64px 80px; border-radius: 20px; overflow: hidden; box-sizing: border-box;
  margin-top: -46px; background: #fff;}
.notice .modeCon{ /* width: calc(100% - 268px); */ margin: 0 -27.5px;}
.notice .modeCon li{ border-right: 1px solid #FBE5E5; box-sizing: border-box;}
.notice .modeCon li:last-child{ border-right: none;}
.notice .modeCon a{ display: block; margin: 0 27.5px; padding-left: 7px; transition: all 0.35s ease;}
.notice .modeCon a:hover{ transform: translateY(-8px);}
.notice .modeCon .title{ font-size: 17px; line-height: 28px; height: 56px; font-weight: bold;}
.notice .modeCon .date{ font-size: 15px; width: 109px; height: 28px; line-height: 28px; text-align: center; margin-top: 40px; border-radius: 14px; background: #A83A42; color: #fff;}
.notice .mode-more:hover{ transition: all 0.35s ease; color: #fff; background: #A83A42;}

/* row02 */
.row02{ padding-top: 24px;}
.row02 .gp-container{ padding-left: 94px; box-sizing: border-box; border-radius: 20px; background: #A83A42;}
.news{ box-sizing: border-box; padding: 52px 0 66px; overflow: hidden;}
.row02 .mode-title{ width: 100%; align-items: flex-start; padding-right: 69px; box-sizing: border-box;}
.news .mode-til .en,
.news .mode-til .ch,
.news .mode-more{ color: #fff; margin-top: 0;}
.news .modeCon{ margin-top: 50px;}
.news .modeCon a{ display: block; background: #fff; border-radius: 20px; padding: 53px 41px 56px;}
.news .modeCon .date{ font-size: 15px; width: 109px; height: 28px; line-height: 28px; text-align: center; /* margin-top: 40px; */ border-radius: 14px; background: #A83A42; color: #fff;}
.news .modeCon .title{ font-size: 17px; line-height: 28px; height: 84px; font-weight: bold; margin-top: 25px; -webkit-line-clamp: 3;}
.news .modeCon .summary{ font-size: 15px; line-height: 25px; height: 50px; margin-top: 30px;}
.news .modeCon .img{ border-radius: 8px; overflow: hidden; margin-top: 45px;}
.news .modeCon .gp-img-responsive{ padding-bottom: 53.03%;}
.news .swiper-slide{ width: 24.42% !important;}


/* row03 */
.row03{ padding-top: 90px; overflow: hidden; max-width: 1920px; margin: 0 auto;}
.row03 > .gp-container{}
.comprehensive{ padding-left: 94px; box-sizing: border-box;}
.comprehensive .left{ width: 395px; flex-shrink: 0; position: relative;}
.comprehensive .til-list{ border-top: 1px solid #FBE5E5; overflow: hidden; width: 100%; padding-bottom: 10px; margin-bottom: -10px;
  position: absolute; bottom: 0; left: 0;}
.comprehensive .mode-til .ch, .comprehensive .mode-til .en{ color: #7B1D1F;}
.comprehensive .right{ width: calc(100% - 450px); min-height: 700px;}
.comprehensive .boxTitle,
.comprehensive .til-list .more{ width: 50%; float: left; height: 98px; line-height: 98px; padding-left: 13px; 
  box-sizing: border-box; font-weight: bold; flex-direction: column; justify-content: center; position: relative;}
.comprehensive .boxTitle:nth-of-type(odd)::before{ content: ''; display: block; width: 300%; height: 1px; background: #FBE5E5; 
  position: absolute; bottom: 0; left: 0;}
.comprehensive .boxTitle::after{ content: ''; display: block; width: 0px; height: 15px; border-radius: 7.5px; background: #A83A42;
  position: absolute; bottom: -7.5px; left: 0px; transition: all 0.35s ease;}
.comprehensive .boxTitle.on::after{ width: 157px;}
.comprehensive .boxTitle .ch,
.comprehensive .til-list .more .ch{ line-height: 22px; font-size: 17px; color: #707070;}
.comprehensive .boxTitle .en,
.comprehensive .til-list .more .en{ line-height: 18px; font-size: 14px; color: #707070; margin-top: 5px; text-transform: uppercase;}
.comprehensive .boxTitle.on .ch,
.comprehensive .boxTitle.on .en{ transition: color 0.35s ease; color: #A83A42;}
.comprehensive .box{ display: none; padding: 70px 0 60px 88px; box-sizing: border-box; position: relative;}
.comprehensive .box::before{ content: ''; width: 200%; height: 100%; background: #7B1D1F; border-radius: 20px;
  position: absolute; left: 0px; top: 0px; z-index: -1;}
.comprehensive .box ul{ margin-top: 30px; justify-content: flex-start;}
.comprehensive .box li{ margin-right: 145px;}
.comprehensive .box li:last-child{ margin-right: 0;}
.comprehensive .box a{ display: block; padding-left: 22px; position: relative;}
.comprehensive .box a::before{ content: ''; display: block; width: 4px; height: 100%; border-radius: 2px; background: #fff;
  position: absolute; left: 0; top: 0;}
.comprehensive .gp-img-responsive{ padding-bottom: 40.73%; border-radius: 8px; overflow: hidden;}
.comprehensive .box .num{ font-size: 37px; line-height: 45px;}
.comprehensive .box .ch{ font-size: 17px; font-weight: bold; line-height: 22px; margin-top: 14px;}
.comprehensive .box .en{ font-size: 14px; line-height: 18px; margin-top: 5px;}


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

@media screen and (max-width:1600px){
  .row02 .gp-container, .comprehensive{ padding-left: 60px;}
  .comprehensive .right{ min-height: 580px;}
  .comprehensive .box li{ margin-right: 40px;}
}

@media screen and (max-width:1480px) {
  .banner .text{ font-size: 45px; line-height: 45px;}
  .mode-til .en{ font-size: 34px; line-height: 40px;}
  .news .modeCon a{ padding: 40px 30px;}
  .notice{ padding: 50px 40px;}
  .notice .mode-title{ width: 180px;}
  .news .modeCon{ margin-top: 30px;}
  .comprehensive .right{ min-height: 520px;}
  .comprehensive .box{ padding: 50px 0 50px 50px;}
  .comprehensive .boxTitle, .comprehensive .til-list .more{ height: 80px; line-height: 80px;}
}

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

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

@media screen and (max-width:1200px) {
  .banner .text{ top: 10%;}
  .banner .text .more{ bottom: -65px;}
  .comprehensive .right{ width: calc(100% - 420px); min-height: 450px;}
  .comprehensive .box{ padding: 30px 0 20px 30px; }
}

@media screen and (max-width:1100px) {
  .notice{ width: 100%; margin-top: 30px; margin-bottom: 40px; padding: 40px 20px; box-shadow: 0 0 16px 3px rgba(168, 58, 66, 0.04);}
  .mode-til .en{ font-size: 30px; line-height: 34px;}
  .notice .modeCon{ margin: 0 -15px;}
  .notice .modeCon a{ margin: 0 15px; padding-left: 0;}
  .row02 .gp-container, .comprehensive{ padding-left: 40px;}
  .row03{ padding-top: 3.125rem;}
  .comprehensive{ padding-left: 0;}
  .comprehensive{ flex-direction: column; padding-left: 0;}
  .comprehensive .left, .comprehensive .right{ width: 100%;}
  .comprehensive .boxTitle, .comprehensive .til-list .more{ width: 25%;}
  .comprehensive .til-list{ margin: 20px 0; position: relative; top: 0; left: 0;}
  .comprehensive .box{ padding: 50px 0 50px 30px;}
  .comprehensive .box li{ margin-right: 25px;}
  .comprehensive .box li{ margin-right: 50px;}


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

@media screen and (max-width:997px) {
  .banner{ margin-top: 0px;}
  .banner .text{ font-size: 38px; line-height: 38px;}
  .notice{ flex-direction: column; padding: 20px;}
  .notice .mode-title{ width: unset; margin-bottom: 20px;}
  .notice .mode-til{ display: inline-block;}
  .notice .mode-more{ display: inline-block; float: right;}
  .notice .modeCon li{ width: 50%; margin-bottom: 20px;}
  .notice .modeCon li:nth-of-type(even){ border-right: none}
  .row02 .gp-container{ padding: 0 30px;}
  .row02 .mode-title{ padding-right: 0;}
  .news .swiper-slide{ width: 33.3% !important;}
  .comprehensive .boxTitle, .comprehensive .til-list .more{ width: 33.3%;}
  .comprehensive .box li{ width: 33.3%; margin-right: 0;}
  .comprehensive .box .num{ font-size: 34px; line-height: 30px;}
  .row02{ padding-top: 0;}
}

@media screen and (max-width:767px) {
  .banner .text{ font-size: 24px; line-height: 24px;}
  .banner .text .more{ width:100px; height: 30px; line-height: 30px; padding-left: 15px;}
  .banner .text .icon-right:before{ right: 10px;}
  .comprehensive .box ul{ flex-wrap: wrap;}
  .comprehensive .box li{ width: 50%; margin-bottom: 20px;}
  .notice .modeCon .date{ margin-top: 20px;}
  .news{ padding: 30px 0;}
  .news .modeCon a{ padding: 20px;}
  .comprehensive .box{ padding: 30px 0 20px 30px;}
  .comprehensive .right{ min-height: unset;}
}

@media screen and (max-width:680px) {
  .banner .text .more{ bottom: -45px;}
  .news .swiper-slide{ width: 50% !important;}
  .mode-til .en{ font-size: 24px; line-height: 30px;}
  .mode-more{ width: 100px; height: 30px; line-height: 30px;}
  .mode-more::before{ right: 15px;}
  .comprehensive .box .num{ font-size: 30px; line-height: 30px;}
  .comprehensive .box .ch{ margin-top: 10px;}
}

@media screen and (max-width:540px) {
  .gp-container, .gp-container-2{ padding-left: 0; padding-right: 0px;}
  .banner .text .more{ display: none; animation: unset;}
  .notice .modeCon li{ width: 100%; padding-bottom: 10px; margin-bottom: 10px; border-right: none; border-bottom: 1px solid #FBE5E5;}
  .comprehensive .boxTitle, .comprehensive .til-list .more{ width: 50%;}
  .comprehensive .box li{ width: 100%;}
  .notice .modeCon .title{ height: unset;}
  
}

@media screen and (max-width:479px) {
  .news .swiper-slide{ width: 100% !important;}
  .row02 .gp-container{ padding: 0 15px;}
  .banner .text{ font-size: 20px; line-height: 20px;}
  .news .modeCon .title{ margin-top: 15px;}
  .news .modeCon .summary{ margin-top: 15px;}
  .news .modeCon .img{ margin-top: 20px;}
  .notice{ margin-bottom: 20px;}
}

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