@charset "utf-8";
/**
 * Created by sunJia on 2025/06/05.
 * @Description: Index Style
 */
.gp-position{position: relative;z-index: 1;}
.wrapbanner{overflow: hidden;position: relative;box-sizing: border-box;z-index: 2;}
/* .wrapbanner::before{content: '';display: block;background: url(../images/banner_line.png) no-repeat top center/100% auto;position: absolute;left: 0;right: 0;top: 0;height: 40px;z-index: -1;} */

.banner{position: relative;}
.banner a{display:block;position:relative;/* mask: url(../images/banner_mask.png) no-repeat top center/100% 100%; */}
/* .banner a::before{content: '';display: block;position: absolute;left: 0;top: 0;bottom: 0;width: 10.4%;left: 0;background: linear-gradient(270.00deg, rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.4));z-index: 2;}
.banner a::after{content: '';display: block;position: absolute;right: 0;top: 0;bottom: 0;width: 10.4%;right: 0;background: linear-gradient(90.00deg, rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.4));z-index: 2;} */

.banner .gp-img{/* padding-bottom: 100vh; */padding-bottom: 41.67%;position: relative;}
.banner .gp-img::before{content: '';display: block;opacity: 1;height: 100%;position: absolute;left: 0;right: 0;bottom: 0;z-index: 2;
	background: rgba(32, 36, 45, 0.25);pointer-events: none;
}
.banner .gp-img video,.banner .gp-img img{width:100%;height: 100%;position: absolute;left: 0;top: 0;object-fit: cover;}
.banner .gp-img video{width:100%;height: auto;position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
/* .banner .swiper-slide-active .gp-img{animation:scaleBig 10s linear 0s 1 both;transform-style:preserve-3d}
@-webkit-keyframes scaleBig{
	0%{transform:scale(1)}
	100%{transform:scale(1.1)}
}
@keyframes scaleBig{
	0%{transform:scale(1)}
	100%{transform:scale(1.1)}
} */
.banner .title{ position: absolute;bottom: 19.78vh; right: 50%;transform: translateX(50%);z-index: 3;
	color: #fff; font-family: '微软雅黑', 'Microsoft YaHei'; font-weight: bold;}
.banner .title span{ max-width: 9.5rem;}
.banner .readMore{ position: absolute;}
.readMore{ position: absolute;bottom: 6.04vh; right: 50%;transform: translateX(50%);z-index: 3;}
.readMore .box{ display: flex;display: -webkit-flex;display: -ms-flexbox; align-items: center;justify-content: center;overflow: hidden;
	padding: 0.18rem 0 0.17rem; border-radius: 0.1rem;border: 1px solid #ececec;max-width: 1.9rem;background: rgba(255, 255, 255, .4);}
.readMore span{ color: #222; font-weight: bold;margin-right: 0.25rem;}
.readMore i{ display: inline-block;width: 0.26rem;height: 0.26rem; border-radius: 50%;
	background: #222 url(../images/arrow-white.svg) no-repeat center;background-size: 0.15rem auto;}
.readMore .box:hover i{ animation: arrowRun 3s infinite}

.wrapbanner .arrow{width: 4rem;height: 4rem;text-align: center;background: center/100% auto no-repeat;cursor: pointer;transition: all ease-in-out .3s;-ms-transition: all ease-in-out .3s;-moz-transition: all ease-in-out .3s;-webkit-transition: all ease-in-out .3s;-o-transition: all ease-in-out .3s;position: relative;position: absolute;top: 50%;transform: translateY(-50%);z-index: 10;
	display: none;}
.wrapbanner .arrow svg{width: 100%;height: 100%;}
.wrapbanner .prev{left: 5rem;background-image: url(../images/banner_prev.png);}
.wrapbanner .next{right: 5rem;background-image: url(../images/banner_next.png);}

.banner .swiper-pagination{font-size: 0;text-align: right;left: auto;right: 50%;bottom: 0.7rem;transform: translateX(50%);width: 100%;}
.banner .swiper-pagination .swiper-pagination-bullet{width: 0.16rem;height: 0.16rem;opacity: 1;border-radius: 0.08rem;margin: 0 0.045rem;
	background: #c8d5c2;position: relative; overflow: hidden;transition: all 0.3s ease-in-out;}
.banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background: #4ea235; width: 0.32rem;}
/* .banner .swiper-pagination .swiper-pagination-bullet::before{
	content: '';display: block;width: 100%;height: 100%;background: #fff;border-radius: 0;opacity: 1;
	position: absolute;left: 0;top: 0;transform: translateX(-100%);z-index: 1;
} */
.banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before{animation: paginationAnimation 5s linear;}
@keyframes paginationAnimation{
	0%{transform: translateX(-100%);}
	100%{transform: translateX(0%);}
}

/* NEWS ROOM */
.mode01{ position: relative; padding: 0.4rem 0 0; background: url(../images/great-wall.png) no-repeat left bottom;}
.newsRoom{ }
.modeTil{ position: relative; text-align: center;z-index: 1;}
.modeTil a:hover{ color: #222;}
.modeTil .title{ line-height: 1; text-transform: uppercase;}
.modeTil .title span{ position: relative;z-index: 1;}
.modeTil .title span::before{ content: '';display: block;width: 0.37rem;height: 0.37rem;border-radius: 50%;background: #58b33e;
	position: absolute;top: -0.02rem;left: -0.1rem;z-index: -1;}
.modeTil .titleLine{ color: transparent;position: absolute; bottom: -0.02rem;right: 50%;transform: translateX(50%);z-index: -1;text-wrap: nowrap;}
@supports (text-stroke: 1px #e0e0e0) or (-webkit-text-stroke: 1px #e0e0e0) {
  .modeTil .titleLine {
    -webkit-text-stroke: 1px #e0e0e0;
    text-stroke: 1px #e0e0e0;
  }
}
@supports not ((text-stroke: 1px #e0e0e0) or (-webkit-text-stroke: 1px #e0e0e0)) {
  .modeTil .titleLine {
    text-shadow: 
      -1px -1px 0 #e0e0e0,
       1px -1px 0 #e0e0e0,
      -1px  1px 0 #e0e0e0,
       1px  1px 0 #e0e0e0;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.modeTil .titleLine {
		text-shadow: 
		-1px -1px 0 #e0e0e0,
		1px -1px 0 #e0e0e0,
		-1px  1px 0 #e0e0e0,
		1px  1px 0 #e0e0e0;
	}
}
.mode01Link{ display: block; margin-left: auto; width: 3.03rem;line-height: 0.37rem;padding-left: 0.49rem;color: #fff;
	background: url(../images/mode01-link-bg.png) no-repeat left center/auto 100%; border-radius: 0.18rem; overflow: hidden;}
.mode01Link:hover{ color: #fff;}
.mode01Link i{ display: inline-block; width: 0.2rem; height: 0.2rem; margin-left: 0.1rem;
	background: url(../images/post-ico.png) no-repeat center/cover; background-position: 50% 50%;}
.mode01Link:hover i{animation: mode04Link 3s infinite;}
.mode01 .modeCon{ margin-top: 0.3rem; position: relative;}
.mode01 .arrows{ width: 0.38rem; height: 0.6rem; background: url(../images/news-arrow.svg) no-repeat center; background-size: 100% 100%;
	position: absolute; top: calc(50% + 0.04rem);transform: translateY(-50%);z-index: 2; opacity: 0;}
.mode01 .modeCon:hover .arrows{ opacity: 1;}
.mode01 .prev{ left: -0rem;transform: translate3d(calc(-100% - 0.5rem), -50%, 0);}
.mode01 .next{ right: -0rem;transform: translate3d(calc(100% + 0.5rem), -50%, 0) rotateY(180deg);}
.newsSwiper{overflow: hidden; padding-bottom: 0.53rem; padding-right: 0.2rem; margin-right: -0.2rem;}
.mode01 ul{}
.mode01 li a{ display: block;}
.mode01 li a:hover{ color: #222;}
.mode01 li .gp-img-responsive{ padding-bottom: 66.45%; border-radius: 0 0 0 0.35rem;}
.mode01 li .info{ position: relative;box-shadow: 2.677px 2.973px 13.76px 2.24px rgba(0, 0, 0, 0.1);border-radius: 0 0 0.35rem 0;
	width: calc(100% - 0.48rem);margin-right: 0;margin-left: auto; padding: 0.35rem 0.3rem; box-sizing: border-box;
	background: url(../images/news-bg.png) no-repeat bottom right;background-size: 100% auto;}
.mode01 a .tag{ width: 0.75rem; border-radius: 0.23rem 0 0 0; overflow: hidden; position: absolute;left: 0;bottom: 100%;z-index: 1;}
.mode01 a .tag i{ display: block; background: #58b33e; font-size: 0;}
.mode01 a .title{ line-height: 1.2; height: 3.6em;}
.mode01 a .summary{ color: #737373; line-height: 1.33; margin-top: 0.2rem;}
.mode01 a .readMore{ position: relative; bottom: 0;right: auto;transform: none;margin-top: 0.24rem;}
.mode01 img:hover{ opacity: 1;}
.mode01 a .box{ position: relative; background: #fff; transition: all 0.35s ease-in-out;}
.mode01 a .box::before{ content: '';display: block;width: 0%;height: 100%;background: #58b33e;
	position: absolute;left: 0;top: 0;z-index: -1;transition: all 0.25s ease-in-out;}
.mode01 a:hover .box{ background: transparent;}
.mode01 a:hover .box::before{ width: 100%;}
.mode01 a:hover .box span{ color: #fff;}
.mode01 a .readMore i{}
.mode01 a:hover .readMore i{ width: 0.42rem; background: url(../images/cloud.svg) no-repeat center;background-size: 100% auto;animation: none;
	background-position-x: -150%;}

/* DATABASE */
.mode02{ position: relative; padding: 0.65rem 0 0.7rem; background: #f6f6f6; overflow: hidden;}
.mode02 .modeCon{ margin-top: 0.4rem;}
.mode02 ul{ flex-wrap: wrap; margin: 0 -0.12rem;}
.mode02 li a{ position: relative; display: block;margin: 0 0.12rem; overflow: hidden;}
.mode02 li .title{position: relative; color: #fff; width: 100%; line-height: 1; margin-top: 0.4rem;}
.mode02 li a > .title{ position: absolute;bottom: 0;left: 0;z-index: 1; padding: 0 0.35rem; width: 100%;padding-bottom: 0.28rem;}
.mode02 li a:hover > .title{transition: all 0.1s ease-in-out; opacity: 0;}
.mode02 .gp-img-responsive{ padding-bottom: 133.71%; position: relative;}
.mode02 .gp-img-responsive::before{ content: '';display: block;width: 100%;padding-bottom: 37.08%;
	background-image: -moz-linear-gradient( 90deg, rgb(30,32,29) 0%, rgba(30,32,29,0.74) 26%, rgba(100,100,100,0) 100%);
	background-image: -webkit-linear-gradient( 90deg, rgb(30,32,29) 0%, rgba(30,32,29,0.74) 26%, rgba(100,100,100,0) 100%);
	background-image: -ms-linear-gradient( 90deg, rgb(30,32,29) 0%, rgba(30,32,29,0.74) 26%, rgba(100,100,100,0) 100%);
	position: absolute;left: 0;bottom: 0;z-index: 1;}
.mode02 li .mask{height: 100%;position: absolute;left: 0;right: 0;top: 0;z-index: 1;transform: translateY(-0.3rem);
	/* background: url(../images/data-bg.png) no-repeat center/cover; */text-align: center; opacity: 0;z-index: -1;transition: all 0.15s ease-in-out, opacity 0.15s ease-in-out 0.1s;}
.mode02 li a:hover .mask{ opacity: 1; z-index: 1;transform: translateY(0rem);}
.mode02 li .mask::before{ content: ''; display: block;width: 100%; height: 100%;background: rgba(208, 105, 55, 0.7);
	position: absolute;top: 0;left: 0;z-index: -1;}
.mode02 li .iconBox{ width: 50%; font-size: 0; background: url(../images/data-ico-bg.png) no-repeat center;background-size: auto 100%;margin: 0.5rem auto 0;}
.mode02 li .title i{ width: 0.2rem;height: 0.2rem; background: #fff;
	position: absolute; right: calc(50% - 0.1rem);top: calc(100% + 0.2rem);z-index: 1;}
.mode02 li .title i::before,
.mode02 li .title i::after{ content: '';display: block;height: 0.1rem;width: 2px;background: #d06937;
	position: absolute;top: calc(50% - 0.05rem);right: calc(50% - 1px);z-index: 1;}
.mode02 li .title i::after{ transform: rotateZ(90deg);}

/* initiatives */
.mode03{ padding: 0.5rem 0; overflow: hidden;}
.mode03 .left{ width: 43.07%;}
.mode03 .imgBox{ position: relative;padding-top: 0.24rem;}
.mode03 .imgBox::before{ content: '';display: block;width: 2.83rem;height: 2.17rem;background: url(../images/coco-ico.png) no-repeat center/cover;
	position: absolute;right: -1.75rem;bottom: -0.3rem;z-index: -1;}
.mode03 .greenIco{ width: 3.86rem;height: 3.86rem;border-radius: 0 50% 50% 50%;background: #58b33e;
	position: absolute;top: 0;left: 0;z-index: -1;}
.mode03 .yellowIco{ width: 1.42rem; height: 1.42rem;background: #edc145; border-radius: 70% 0 70% 0;
	position: absolute; right: -0.6rem; top: 0.8rem;z-index: 1;}
.mode03 .yellowIco::before{ content: '';display: block;width: 1.21rem;height: 1.36rem;background: url(../images/leaf02.png) no-repeat center/cover;
	position: absolute;left: 0px;top: -0.4rem;z-index: 1;}
.mode03 .otherIco{ width: 1.53rem;height: 1.41rem;background: url(../images/leaf01.png) no-repeat center/cover;
	position: absolute;left: 0.28rem;bottom: 0.3rem;z-index: 1;}
.mode03 .imgList{ position: relative;}
.mode03 .imgList .gp-img-responsive{ display: none; z-index: -1; position: relative;
	transform: none;transition: all 0.5s ease-in-out;}
.mode03 .imgList .gp-img-responsive img{ position: absolute; height: 100%;width: auto;max-width: unset; min-width: 100%;
	top: 0;right: 50%;transform: translateX(50%);z-index: 1;}
.mode03 .imgList .on{ /* animation: scaleShow 0.5s ease-out forwards 0s; */ display: block;}
@keyframes scaleShow {
	from {transform: scale(0.9);opacity: 0.3;}
	to {transform: scale(1);opacity: 1;}
}
.mode03 .img{ position: relative; max-width: 86.19%; margin-right: 0;margin-left: auto;}
.mode03 .gp-img-responsive{ padding-bottom: 100%; border-radius: 50%; background: transparent;}
.mode03 .gp-img-responsive img:hover{ opacity: 1;}
.mode03 .right{ width: 44%; padding-top: 0.4rem;}
.textLeft{ text-align: left;}
.mode03 .right .modeTil{ display: inline-block;}
.mode03List{ padding-top: 0.1rem;}
.mode03List li:last-child a{ background: none;}
.mode03List a{ position: relative; display: block;line-height: 1.2; padding: 0.22rem 0;
	background: linear-gradient(90deg, #d1d1d1 0%, #d1d1d1 33.33%, transparent 33.33%, transparent 100%);
	background: -webkit-linear-gradient(0deg, #d1d1d1 0%, #d1d1d1 33.33%, transparent 33.33%, transparent 100%);
	background: -moz-linear-gradient(0deg, #d1d1d1 0%, #d1d1d1 33.33%, transparent 33.33%, transparent 100%);
	background-size: 4px 1px;
	background-repeat: repeat-x;
	background-position: bottom left;
	z-index: 1;}
.mode03List a:hover{ background: transparent; color: #222;}
.mode03List a::before{ content: '';display: block;left: -0.2rem; top: -0.02rem;right: -0.2rem;bottom: 0;position: absolute;z-index: -1;opacity: 0;
	background: #fff;border-radius: 0 0 0.35rem 0;box-shadow: 2.677px 2.973px 13.76px 2.24px rgba(0, 0, 0, 0.1);transition: all 0.2s ease-in-out;}
.mode03List a:hover::before{ opacity: 1;}
.mode03List a span{ height: 2.4em;}

/* JOIN  US */
.mode04{ position: relative; padding: 0.8rem 0 1.28rem;}
.mode04::before{ content: '';display: block;width: 4.46rem;height: 5.45rem;background: url(../images/rice.png) no-repeat top right/cover;
	position: absolute;left: 0;bottom: 0;z-index: -1;max-width: 100%;}
.mode04::after{ content: '';display: block;width: 5.7rem;height: 10.17rem;background: url(../images/tree.png) no-repeat top right/cover;
	position: absolute;right: 0;bottom: 2rem;z-index: -1;}
.mode04 .left{ width: 42.4%; position: relative;}
.mode04 .modeTil{ display: inline-block;}
.mode04Link{ position: absolute;top: 0;right: 0;z-index: 1;width: 1.42rem;
	line-height: 0.37rem;border-radius: 0.18rem; overflow: hidden; padding-left: 0.48rem;color: #fff;
	background: url(../images/post-bg.png) no-repeat left center/ auto 100%;}
.mode04Link:hover{ color: #fff;}
.mode04Link i{ display: inline-block;width: 0.2rem;height: 0.2rem; margin-left: 0.1rem;
	background: url(../images/post-ico.png) no-repeat center/cover;background-position: 50% 50%;}
.mode04Link:hover i{ animation: mode04Link 3s infinite;}
@keyframes mode04Link {
  0% {
      background-position: center center;
  }
  7% {
      background-position: 0.2rem -0.2rem;
  }
  7.1% {
      background-position: -0.2rem 0.2rem;
  }
  14% {
      background-position: center center;
  }
}
.mode04 .joinUsArea{position: relative; border-radius: 0.2rem; height: 0.6rem;line-height: 0.6rem;
	background: #f6f6f6;margin-top: 0.45rem;justify-content: space-between;}
.mode04 .joinUsArea .before{ content: '';display: block;width: 33.33%;height: 100%;border-radius: 0.2rem;background: #4cae47;
	position: absolute;top: 0;left: 0;z-index: 0;transition: all 0.25s ease-in-out; opacity: 0;}
.mode04 .joinUsArea.hover .before{ opacity: 1;}
.mode04 .joinUsArea a{ position: relative; display: flex;display: -ms-flexbox; align-items: center; /* width: 33.33%; */
	padding-left: 3.17%;padding-right: 3.17%; z-index: 2;}
.mode04 .joinUsArea a:hover{ color: #fff;}
.mode04 .joinUsArea a:last-child{ padding-right: 0.35rem;}
.mode04 .joinUsArea[class*="active"] a{ color: #222;}
.mode04 .joinUsArea a[class*="active"]:hover{ color: #fff;}
.mode04 .joinUsArea.active1 .before{ left: 50%;transform: translateX(-50%);}
.mode04 .joinUsArea.active2 .before{ left: 100%;transform: translateX(-100%);}
.mode04 .joinUsArea a::before{ color: #8b8f99;font-size: 0.2rem;font-weight: normal; line-height: 1;order: 1;
	/* position: absolute;top: 50%;right: 18%;transform: translateY(-50%); */transition: all 0.25s ease-in-out;}
.mode04 .joinUsArea a:hover::before{ color: #fff;}
.mode04 .joinUsArea[class*="active"] .active:hover::before{ color: #fff;}
.mode04 .joinUsArea[class*="active"] a::before{ color: #8b8f99;}
.mode04 .joinUsArea a i{ display: inline-block;width: 0.33rem; height: 100%;
	background: url(../images/posts-black.svg) no-repeat center; background-size: 100% auto;
	vertical-align: bottom;margin-right: 3.17%;transition: all 0.25s ease-in-out; }
.mode04 .joinUsArea a:first-child i{ background: url(../images/register-black.svg) no-repeat center/100% auto;}
.mode04 .joinUsArea[class*="active"] a:nth-of-type(1) i,
.mode04 .joinUsArea a:nth-of-type(1) i{ background: url(../images/register-black.svg) no-repeat center/100% auto;}
.mode04 .joinUsArea[class*="active"] .active:nth-of-type(1):hover i,
.mode04 .joinUsArea a:nth-of-type(1):hover i{ background: url(../images/register-white.svg) no-repeat center;}
.mode04 .joinUsArea a:nth-of-type(2) i{ background: url(../images/apply-black.svg) no-repeat center;background-size: 100% auto;}
.mode04 .joinUsArea .active:nth-of-type(2) i{ background: url(../images/apply-black.svg) no-repeat center/100% auto;}
.mode04 .joinUsArea a:nth-of-type(2):hover i{ background: url(../images/apply-white.svg) no-repeat center;}
.mode04 .joinUsArea a:nth-of-type(3) i{ background: url(../images/posts-black.svg) no-repeat center;background-size: 100% auto;}
.mode04 .joinUsArea a:nth-of-type(3):hover i{ background: url(../images/posts-white.svg) no-repeat center;}
.mode04 .boxList{ margin-top: 0.3rem;}
/* .mode04 .boxList ul{ display: none;} */
/* .mode04 .boxList ul.on{ display: block;} */
.mode04 .boxList a{ padding: 0.32rem 0.3rem 0.22rem;padding-left: 0; box-sizing: border-box}
.mode04 .boxList a:hover{ box-shadow: 2.677px 2.973px 13.76px 2.24px rgba(0, 0, 0, 0.1);background: #fff;}
.mode04 .boxList .iconBox{ width: 20.79%; transition: all 0.2s ease-in-out; background-position: center;}
.mode04 .iconBox i{ display: block;width: 0.5rem;height: 0.5rem;line-height: 0.5rem;border-radius: 50%;font-style: normal;text-align: center;
	margin: 0 auto; box-shadow: 2.677px 2.973px 13.76px 2.24px rgba(0, 0, 0, 0.1);}
.color-4155c6{ color: #4155c6;}
.color-d06937{ color: #d06937;}
.mode04 a:hover .iconBox .color-4155c6{ color: #fff; background: #4155c6;}
.mode04 a:hover .iconBox .color-d06937{ color: #fff; background: #d06937;}
/* .mode04 a:hover .iconBox i{ display: none;} */
/* .mode04 a:hover .iconBox { background: url(../images/fei-ico.png) no-repeat center;} */
/* .mode04 .box:last-child a:hover .iconBox{ background: url(../images/fei-ico2.png) no-repeat center;} */
.mode04 .textInfo{ color: #737373; width: calc(100% - 20.79%); line-height: 1.89;}
.mode04 .textInfo .title{ color: #222; line-height: 1;}

.mode04 .right{ width: 48.67%;}
.mode04 .tilList{ border-radius: 0 0.42rem 0 0.42rem; overflow: hidden;}
.mode04 .tilList li:first-child .flex{ align-items: flex-end;}
.mode04 .tilList li:last-child .flex{ flex-direction: row-reverse;}
.mode04 .tilList .item{ width: 50%; color: #fff;}
.mode04 .tilList li:first-child .item,
.mode04 .tilList li:last-child .item:first-child{ padding: 0.9rem 0.5rem 0.3rem; box-sizing: border-box;background: url(../images/joinus-bg1.png) no-repeat center/cover;}
.mode04 .tilList li:first-child .item:last-child{ background: url(../images/joinus-bg3.png) no-repeat center/cover;}
.mode04 .tilList li:last-child .item:first-child{background: url(../images/joinus-bg2.png) no-repeat center/cover;padding: 0.9rem 0.5rem 0.1rem;}
.mode04 .tilList .label{ line-height: 1; padding-top: 0.3rem; position: relative;}
.mode04 .tilList .label::before{ content: '';display: block;width: 0.46rem; height: 0.02rem;background: #fff;
	position: absolute; left: 0;top: 0;z-index: 1;transition: all 0.3s ease-in-out;}
.mode04 .tilList .item:hover .label::before{ width: 0.8rem;}
.mode04 .tilList .tabMore{display: block;color: #fff;margin-top: 0.95rem;margin-top: 0.8rem;position: relative;}
.mode04 .tilList .tabMore span{ position: absolute;top: calc(50% - 0.1rem);left: 0.8rem;line-height: 1;}
.mode04 .tilList .gp-img-responsive{ padding-bottom: 94.79%; border-radius: 0 0.4rem 0 0;}
.mode04 li:last-child .gp-img-responsive{ border-radius: 0 0 0 0.4rem; border-radius: 0;}





/* Responsive style */
@media screen and (max-width:1800px){
	.mode04 .tilList .item:first-child{ padding: 0.7rem 0.5rem;}
	.mode04 .joinUsArea a::before{ right: 10%;}
	.mode04 .joinUsArea a i{ margin-right: 0.15rem;}
}

@media screen and (max-width:1700px){
	.mode04 .tilList .item:first-child{ padding: 0.65rem 0.4rem;}
	.mode04 .tilList .tabMore{ margin-top: 0.3rem;}
}

@media screen and (max-width:1580px){
    .mode01 .arrows{ transform: translate3d(calc(-80% - 0.5rem), -50%, 0);}
    .mode01 .next{ transform: translate3d(calc(80% + 0.5rem), -50%, 0) rotateY(180deg);}
    .mode04 .joinUsArea a{ padding-left: 2.8%; padding-right: 2.8%;}
    .mode04 .joinUsArea a i{ margin-right: 0.1rem;}
}

@media screen and (max-width:1480px){
  .mode04 .joinUsArea a i{ margin-right: 0.1rem; width: 0.28rem;}
  .mode04 .joinUsArea a::before{ right: 6%;}
}

@media screen and (max-width:1320px){
  .mode04 .joinUsArea a{ padding-left: 2%; padding-right: 2%;}
}

@media screen and (max-width:1280px){
	/* .mode01 .prev{ right: calc(100% + 0.1rem);}
	.mode01 .next{ left: calc(100% + 0.1rem);} */
	.mode01 .prev{ left: -0rem;transform: translate3d(calc(-100% - 0.2rem), -50%, 0);}
	.mode01 .next{ right: -0rem;transform: translate3d(calc(100% + 0.2rem), -50%, 0) rotateY(180deg);}
}

@media screen and (max-width:1240px){
	.mode04{ overflow: hidden;}
	.mode04 .tilList .item:first-child{ padding: 0.6rem 0.4rem;}
	.mode04 .tilList .tabMore img{ max-height: 0.6rem;}
	.mode04 .tilList .tabMore span{ left: 0.65rem;}
}

@media screen and (max-width:1100px){
  /* .mode01 .arrows{ width: 0.3rem; height: 0.5rem;} */
  .mode01 .next{ left: calc(100% + 0.05rem);}
  .mode01 .prev{ right: calc(100% + 0.05rem);}
}

@media screen and (max-width:1080px){
    .mode01 .prev{ left: -0rem;transform: translate3d(calc(-100% - 0rem), -50%, 0);}
	.mode01 .next{ right: -0rem;transform: none; left: auto;}
    .newsSwiper{ padding-right: 0;}
}

@media screen and (max-width:998px){
	.mode01 .modeCon{ margin-top: 0.4rem;}
	.mode01 .arrows{ display: none;}
	.newsSwiper{ margin: 0; padding-right: 2rem;}
	.mode02 .modeCon{ margin-top: 0.2rem;}
	.mode02 ul{ margin: 0 -0.1rem;}
	.mode02 .modeCon li{ width: 50%; margin-top: 0.2rem;}
	.mode02 li a{ margin: 0 0.1rem;}
	.mode02 .gp-img-responsive{ padding-bottom: 33.33%;position: relative;}
	.mode02 .gp-img-responsive img{ position: absolute;width: 100%;top: 50%;left: 0;transform: translateY(-50%);z-index: 1;}
	.mode02 .gp-img-responsive::before{ padding-bottom: 20.83%;z-index: 2;
	background-image: -moz-linear-gradient( 90deg, rgb(30,32,29) 0%, rgba(30,32,29,0.74) 26%, rgba(100,100,100,0) 100%);
	background-image: -webkit-linear-gradient( 90deg, rgb(30,32,29) 0%, rgba(30,32,29,0.74) 26%, rgba(100,100,100,0) 100%);
	background-image: -ms-linear-gradient( 90deg, rgb(30,32,29) 0%, rgba(30,32,29,0.74) 26%, rgba(100,100,100,0) 100%);}
	.mode02 li a > .title{ z-index: 3;}
	.mode04::after{ bottom: 0rem;}

}

@media screen and (max-width:996px){
	.banner .title{ width: 100%;max-width: 5.5rem; right: auto;left: 0;transform: none;bottom: 0.2rem; margin: 0;padding-left: 0.2rem;box-sizing: border-box;}
	.banner .title span{ font-size: 0.3rem;}
	.banner .readMore{ right: auto;left: 0;transform: none;display: none;}
	.banner .gp-img{ padding-bottom: 46.86%;}
	.banner .swiper-pagination{ bottom: 0.3rem;}
	.mode01 li .gp-img-responsive{ border-radius: 0 0 0 0.45rem;}
	.mode04 .modeCon{ overflow: visible;}
	.mode04 .left{ width: 48%;}
	.mode04 .joinUsArea a{ padding-left: 0.1rem;}
	.mode04 .joinUsArea a:last-child{ padding-right: 0.1rem;}
	.mode04 .joinUsArea a::before{ right: 0;}
	.mode04 .joinUsArea{ flex-wrap: wrap; height: auto;}
	.mode04 .joinUsArea a i{ width: 0.25rem; margin-right: 0.06rem;}
    .mode04 .tilList{ border-radius: 0 0.3rem 0 0.3rem;}
	.mode04 .tilList li:first-child .item,
	.mode04 .tilList li:last-child .item:first-child{ padding: 0.6rem 0.2rem 0.3rem;	}
	.mode04 .tilList .tabMore img{ max-height: 0.5rem;}
	.mode04 .tilList .tabMore span{ left: 0.5rem;}
  
}

@media screen and (max-width:768px){
	.mode01Link{ line-height: 0.34rem;font-size: 0.2rem; padding-left: 0.4rem; margin: 0.1rem auto 0;}
	.mode01 .modeCon{ margin-top: 0.3rem;}
  .mode02 li a > .title{ font-size: 0.2rem;}
  .mode03 .modeCon{ flex-direction: column;align-items: center;}
  .mode03 .left, .mode03 .right{ width: 100%;}
  .mode03 .imgBox{ padding-left: 0.44rem;padding-right: 0.55rem;max-width: 86.19%; margin: 0 auto;}
  .mode03 .img{ margin-left: 0;max-width: unset;}
  .mode03 .textLeft{ text-align: center;}
  .mode03 .imgBox{ margin-top: 0.2rem;}
  .mode04{ padding-top: 0; padding-bottom: 0.2rem;}
  .mode04 .modeTil{ text-align: center;}
  .mode04 .modeCon{ flex-direction: column-reverse;}
  .mode04 .left, .mode04 .right{ width: 100%;}
  .mode04 .left{ display: flex;display: -webkit-flex;display: -ms-flexbox;flex-direction: column; align-items: center;}
  .mode04 .boxList{ order: 0;}
  .mode04 .joinUsArea{ width: 100%; margin-top: 0.2rem;}
  .mode04 .joinUsArea a i{ width: 0.35rem;}
  .mode04 .joinUsArea a::before{ right: 10%;}
  .mode04 .tilList{ margin-top: 0.2rem; display: flex;display: -webkit-flex;display: -ms-flexbox;
    width: 100%; border-radius: 0;}
  .mode04 .tilList .tabTitle{ width: auto; flex: 1; }
  .mode04 .tilList .item{ width: 30vw;}
  .mode04 .tilList li:last-child .flex{justify-content: flex-end;}
  .mode04 .tilList li:last-child .item:last-child{ display: none;}
  .mode04 .tilList .item:first-child{display: block;}
  .mode04 .tilList .label{ font-size: 0.2rem;}
  .mode04 .tilList li:first-child .item,
  .mode04 .tilList li:last-child .item:first-child{
    padding: 0.3rem 0.15rem 0.3rem;
  }
  .mode04 .boxList{ width: 100%;}
  .mode04::after{ display: none;}
  .mode04{ overflow: visible;}
  .mode04Link{ position: relative;margin-left: auto;}

}

@media screen and (max-width:580px){
  .mode02 .modeCon li{ width: 100%;}
}

@media screen and (max-width:491px){
	.banner .title{ max-width: 3rem;}
	.banner .title span{ font-size: 0.16rem;}
	.banner .swiper-pagination{ bottom: 0.2rem;}
	.banner .swiper-pagination .swiper-pagination-bullet{ width: 4.8px; height: 4.8px;margin: 0 1.5px;}
	.banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ width: 9.6px;}
	.modeTil .title{ font-size: 0.24rem;}
	.modeTil .titleLine{ font-size: 0.32rem; bottom: -1px;}
	.modeTil .title span::before{ width: 0.185rem;height: 0.185rem; top: 0px;left: -6px;}
	.mode01{ padding: 0.4rem 0;}
	.mode01 .modeCon{ margin-top: 0.2rem;}
	.newsSwiper{ padding-right: 0; padding-bottom: 0;}
	.mode01 li .info{ padding: 0.25rem 0.2rem;}
	.mode01 a .title{ font-size: 0.14rem;}
	.mode01 a .summary{ font-size: 0.12rem; margin-top: 0.15rem;}
	.mode01 a .readMore{ margin-top: 0.15rem;}
	.readMore{ font-size: 0.12rem;}
	.readMore .box{ max-width: 1.24rem; padding: 0.07rem 0;}
	.readMore span{ margin-right: 0.1rem;}
	.mode01 a .box{ background: #58b33e;}
	.mode01 a .box span{ color: #fff;}
	.mode01 a .readMore i{ width: 0.28rem; background: url(../images/cloud.svg) no-repeat center;background-size: 100% auto;animation: none;}
	.mode01 li .gp-img-responsive{ border-radius: 0 0 0 0.25rem;}
	.mode01 li .info{ width: calc(100% - 0.25rem);}
	.mode02{ padding: 0.3rem 0;}
	.mode02 .modeCon{ margin-top: 0.1rem;}
	.mode02 .modeCon li{ margin-top: 0.1rem;}
	.mode02 li a > .title{ margin-top: 0; padding: 0 0.2rem 0.2rem;}
	.mode03{ padding: 0.3rem 0;}
	.mode03 .greenIco{ width: 1.9rem; height: 1.9rem;}
	.mode03 .yellowIco{ width: 0.7rem; height: 0.7rem; right: 0;}
	.mode03 .yellowIco::before{ width: 0.6rem; height: 0.68rem; background-size: 100% auto; top: -0.2rem;}
	.mode03 .otherIco{ width: 0.78rem;height: 0.71rem;left: 0.11rem;bottom: 0.14rem;}
	.mode03 .imgBox::before{ width: 1.3rem;height: 1.09rem; background-size: 100% auto; right: -0.4rem;bottom: 0;}
	.mode03 .imgBox{ padding-top: 0.1rem;}
	.mode03 .right{ padding-top: 0;}
	.mode03List{ padding-top: 0;}
	.mode03List a{ font-size: 0.14rem;padding: 0.15rem;}
	.mode04 .joinUsArea{line-height: 0.4rem; font-size: 0.12rem;}
	.mode04 .joinUsArea a i, .mode04 .joinUsArea a:nth-of-type(1) i{
		width: 0.18rem;height: 0.19rem;background-size: 100% auto; vertical-align: middle;
		margin-right: 0.06rem;
	}
	.mode04 .joinUsArea a::before{ font-size: 0.16rem;}
	.mode04 .tilList{ width: 100%;/* flex-direction: column; */}
	/* .mode04 .tilList li .flex{ flex-direction: column;} */
    .mode04 .tilList li:first-child{ width: 66.66%;}
    .mode04 .tilList li:last-child{ width: 33.33%;}
    .mode04 .tilList li:first-child .item{ width: 50%;}
    .mode04 .tilList .tabTitle{ flex: unset;}
	.mode04 .tilList li{ width: 50%;}
	.mode04 .tilList .item{ width: 100%;}
	.mode04 .tilList li:first-child .item,
	.mode04 .tilList li:last-child .item:first-child{ padding: 0.2rem 0.15rem;}
	.mode04 .tilList .label{ font-size: 0.14rem; height: auto; padding-top: 0.15rem;}
	.mode04 .tilList .item:first-child{ padding: 0.2rem 0; padding-left: 0.25rem;}
	.mode04 .tilList .tabMore{ margin-top: 0.1rem;}
	.mode04 .tilList .tabMore img{ height: 0.3rem;}
	.mode04 .tilList .tabMore span{ font-size: 0.12rem; left: 0.33rem;top: 0.1rem;}
	.mode04 .boxList{ margin-top: 0.2rem;}
	.mode04 .boxList a{ padding: 0.15rem 0.1rem;}
	.mode04 .boxList .iconBox{ width: 15%;}
	.mode04 .textInfo{ width: 85%;}
	.mode04 .iconBox i{ width: 0.3rem; height: 0.3rem;line-height: 0.3rem; font-size: 0.2rem; }
	.mode04 a:hover .iconBox{ background-size: 0.5rem auto;}
	.mode04 .joinUsArea a{ font-size: 0.12rem; padding: 0 0.06rem;}
	.mode04Link{ width: 1.2rem; padding-left: 0.38rem; line-height: 0.3rem;
        font-size: 0.18rem; line-height: 0.3rem; padding-left: 0.35rem; margin: 0.1rem auto 0;}
	.mode04Link i{ vertical-align: baseline; height: 0.16rem; background-size: auto 100%;}
	.mode04 .joinUsArea{ margin-top: 0.1rem;}
	
	.mode01Link i{ vertical-align: middle;}
	
}

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

@media screen and (max-width:414px){
	.mode01{ padding: 0.3rem 0;}
	.mode01 li .info{ padding: 0.1rem 0.15rem;}
	.mode03 .imgBox{ padding-left: 0;padding-right: 0; max-width: 2,78rem; margin: 0 auto;}
	.mode03 .greenIco{ width: 57.4%;}
	.mode03 .otherIco{ width: 21%; background-size: 100% auto;}
	.mode03 .yellowIco{ width: 21.2%; height: 21%;top: 20%;}
}

@media screen and (max-width:370px){
  .mode04 .tilList .item:first-child{ padding: 0.3rem 0.1rem;}
  .mode04 .tilList .tabMore{ margin-top: 0.1rem;}
  .mode04 .boxList a{ padding-left: 0.1rem;}
  .mode01 a .tag{ width: 0.6rem;}
  .mode04 .joinUsArea{ padding: 0 0.08rem;}
  .mode04 .joinUsArea a{ padding: 0;}
  .mode04 .joinUsArea a i,
  .mode04 .joinUsArea a:nth-of-type(1) i{ width: 0.14rem;}
  .mode04 .joinUsArea a::before{ right: 0; width: 0.1rem;}
  .mode04 .tilList .label{ line-height: 1.25;}
  .mode04 .joinUsArea a i, .mode04 .joinUsArea a:nth-of-type(1) i{ margin-right: 0.05rem;}
  .mode04 .tilList li:first-child .item, .mode04 .tilList li:last-child .item:first-child{ padding: 0.1rem 0.08rem;}
  .mode04 .tilList .label{ padding-top: 0.1rem;}
  
}