:root {

  /* --- font40以下 */
  --font12: clamp(12px, 0.12rem, 12px);
  --font14: clamp(12px, 0.14rem, 14px);
  --font15: clamp(12px, 0.15rem, 15px);
  --font16: clamp(13px, 0.16rem, 16px);
  --font17: clamp(13px, 0.17rem, 17px);
  --font18: clamp(14px, 0.18rem, 18px);
  --font20: clamp(15px, 0.2rem, 20px);
  --font22: clamp(16px, 0.22rem, 22px);
  --font24: clamp(17px, 0.24rem, 24px);
  --font26: clamp(18px, 0.26rem, 26px);
  --font28: clamp(18px, 0.28rem, 28px);
  --font30: clamp(20px, 0.3rem, 30px);
  --font32: clamp(20px, 0.32rem, 32px);
  --font34: clamp(22px, 0.34rem, 34px);
  --font36: clamp(22px, 0.36rem, 36px);
  --font38: clamp(24px, 0.38rem, 38px);
  /* --- font40 */
  --font40: clamp(23px, 0.4rem, 40px);
  --font42: clamp(24px, 0.42rem, 42px);
  --font44: clamp(24px, 0.44rem, 44px);
  --font46: clamp(25px, 0.46rem, 46px);
  --font48: clamp(26px, 0.48rem, 48px);
  /* --- font50 */
  --font50: clamp(28px, 0.5rem, 50px);
  --font52: clamp(28px, 0.52rem, 52px);
  --font54: clamp(28px, 0.54rem, 54px);
  --font56: clamp(28px, 0.56rem, 56px);
  --font58: clamp(29px, 0.58rem, 58px);
  /* --- font60 */
  --font60: clamp(30px, 0.6rem, 60px);
  --font62: clamp(31px, 0.62rem, 62px);
  --font64: clamp(31px, 0.66rem, 64px);
  --font66: clamp(31px, 0.66rem, 66px);
  /* --- font70以及以上 */
  --font70: clamp(32px, 0.7rem, 70px);
  --font72: clamp(32px, 0.72rem, 72px);
  --font74: clamp(32px, 0.74rem, 74px);
  --font80: clamp(32px, 0.8rem, 80px);
  --font100: 1rem;
  --font120: 1.2rem;
  --font160: 1.6rem;
  --font230: 2.3rem;
}

/* 公共字体 */
.font12 {
  font-size: var(--font12);
}
.font14 {
  font-size: var(--font14);
}
.font15 {
  font-size: var(--font15);
}
.font16 {
  font-size: var(--font16);
}
.font18 {
  font-size: var(--font18);
}
.font20 {
  font-size: var(--font20);
}
.font22 {
  font-size: var(--font22);
}
.font24 {
  font-size: var(--font24);
}
.font26 {
  font-size: var(--font26);
}
.font28 {
  font-size: var(--font28);
}
.font30 {
  font-size: var(--font30);
}
.font32 {
  font-size: var(--font32);
}
.font34 {
  font-size: var(--font34);
}
.font36 {
  font-size: var(--font36);
}
.font38 {
  font-size: var(--font38);
}
.font40 {
  font-size: var(--font40);
}
.font42 {
  font-size: var(--font42);
}
.font44 {
  font-size: var(--font44);
}
.font46 {
  font-size: var(--font46);
}
.font48 {
  font-size: var(--font48);
}
.font50 {
  font-size: var(--font50);
}
.font52 {
  font-size: var(--font52);
}
.font54 {
  font-size: var(--font54);
}
.font56 {
  font-size: var(--font56);
}
.font58 {
  font-size: var(--font58);
}
.font60 {
  font-size: var(--font60);
}
.font62 {
  font-size: var(--font62);
}
.font64 {
  font-size: var(--font64);
}
.font66 {
  font-size: var(--font66);
}
.font70 {
  font-size: var(--font70);
}
.font72 {
  font-size: var(--font72);
}
.font72 {
  font-size: var(--font74);
}
.font80 {
  font-size: var(--font80);
}
.font100 {
  font-size: var(--font100);
}
.font120 {
  font-size: var(--font120);
}
.font160 {
  font-size: var(--font160);
}
.font230 {
  font-size: var(--font230);
}
.progeasyType { gap: 20px; display: flex; margin: 63px auto 54px; justify-content: center;}
.progeasyType a { background: url(../images/new/modeType.png) center no-repeat; background-size: 100% 100%; border-radius: 6px; padding: 0 28px; display: block; transition: all .4s; color: #333333; font-size: 24px; line-height: 45px;}
.progeasyType a br { display: none;}
.progeasyType a:hover { color: #ba251d;}
.progeasyType a.cur { color: #ffffff; background: url(../images/new/ProgeasyAct.png) center no-repeat; background-size: 100% 100%;}
.progeasyType a.cur:nth-child(2) {background: url(../images/new/Progeasy16.png) center no-repeat; background-size: 100% 100%;}
.progeasyCont img { display: block; max-width: 100%;}
.progeasySwiper { margin: 40px auto;}
.progeasySwiper .swiper-pagination span { box-sizing: border-box; width: 10px; height: 10px; margin: 0 3px; opacity: 1; background: none; border: 1px solid #adadad;}
.progeasySwiper .swiper-pagination span.swiper-pagination-bullet-active { background: #000000; border: 1px solid #000000;}
.progeasySwiper .swiper-button-prev { left: 40px; border-radius: 50%; width: 58px; transition: all .4s; height: 58px; border: 1px solid #c8c8c8;}
.progeasySwiper .swiper-button-prev::after { font-size: 20px; color: #666666; transition: all .4s;}
.progeasySwiper .swiper-button-next { left: auto; right: 40px; border-radius: 50%; width: 58px; transition: all .4s; height: 58px; border: 1px solid #c8c8c8;}
.progeasySwiper .swiper-button-next::after { font-size: 20px; color: #666666; transition: all .4s;}
.progeasySwiper .swiper-button-prev:hover,.progeasySwiper .swiper-button-next:hover { background: #ba251d; color: #ffffff; border: 1px solid #ba251d;}
.progeasySwiper .swiper-button-prev:hover::after,.progeasySwiper .swiper-button-next:hover::after { color:#ffffff}
.progeasyCont { position: relative; margin-bottom: 45px;}
.progeasyLink { z-index: 2; padding:15px 0; gap: 7.5vw;position: sticky; left: 20px; bottom: 20px;width: calc(100% - 40px); margin: 0 auto; display: flex; justify-content: center; align-items: center;
background: rgba(255,255,255,.8); border-radius: 8px;}
.progeasyLink a { border: 1px solid #292225; color:#292225; padding: .12rem .42rem; border-radius: 6px; transition: all .4s; font-size:var(--font16); display: flex; align-items: center;}
.linkIcon { width: .37rem; margin-right: .12rem; position: relative;}
.linkIcon img { transition: all .4s; display: block; }
.linkIcon img:nth-child(2) { position: absolute; left: 0; top: 0; width: 100%; opacity: 0;}
.progeasyLink a:hover { border: 1px solid #ba251d; background: #ba251d; color: #ffffff;}
.progeasyLink a:hover img:nth-child(1) {filter: brightness(0) invert(1);}
/* .progeasyLink a:hover img:nth-child(2) { opacity: 1;} 
.progeasyLink a:hover { color: #ba251d;}*/
.stepCont { width: 1100px; margin: 0 auto;}
.stepPage { background: #fbfbfb; padding: 45px 0 35px;}
.stepTeach { background:#ffffff; padding: 35px 40px; border-radius: 8px;}
.stepTeach h2 { text-align: center; font-size: 24px; color: #333333; line-height: 1; margin-bottom: 20px;}
.stepSwiper img { display: block; width: 100%; border-radius: 10px;}
.stepSwiper .swiper-slide { position: relative;}
.stepSwiper video { width: 100%!important; height: auto!important;}
.videoCover { cursor: pointer; position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.videoCover img { width: 78px; margin-bottom: 15px;}
.videoCover p { color: #ffffff; font-size: 18px;}
.stepSwiper .swiper-pagination span { opacity: 1; background: #bfbfbf;}
.stepSwiper .swiper-pagination span.swiper-pagination-bullet-active { background: #ba251d;}
.teachList a { color: #333333; font-size: 20px; transition: all .4s; line-height: calc(1em + 10px); padding: 15px 0; display: flex; justify-content: space-between; align-items: center;}
.teachList li { border-top: 1px solid #dcdcdc;}
.stepTeach { margin-bottom: 20px;}
.downloadList { border-radius: 8px; margin-bottom: 20px; padding: 25px 35px 0; background: #ffffff;}
.teachList li:hover a { color: #ba251d;}
.downloadList h2 { color: #333333; font-size: 24px; margin-bottom: 15px;}
.teachList li img { transition: all .4s; filter: grayscale(100%); /* 为了浏览器兼容性可以加上： */ -webkit-filter: grayscale(100%);}
.stepSwiper { margin-bottom: 45px;}
.teachList li:hover img {filter: grayscale(0%); /* 为了浏览器兼容性可以加上： */ -webkit-filter: grayscale(0%);}
.teachList li p { max-width: calc(100% - 50px);}
.shoperCont h2 { margin-bottom: 85px; font-weight: normal; line-height: 1.333; text-align: center; font-size: 24px; color: #333333;}
.shoperCont { padding: 65px 0 105px;}
.mapBar { position: relative; width: 1317px; margin: 0 auto;}
.mapBar img { display: block; width: 100%;}
.positionAdd img { display: block; width: 22px;}
.positionAdd { position: absolute;}
.pos1 { position: absolute; left: 13.98%; top: 37.28%;}
.pos2 { position: absolute; left: 49.35%; top: 26.06%;}
.pos3 { position: absolute; left: 54.16%; top: 39.49%;}
.positionDesc { position: absolute; box-shadow: 0 0 10px rgba(0,0,0,0.2); background: #ffffff; border-radius: 10px; padding: 15px 20px; width: 365px; box-sizing: border-box;}
.positionDesc h3 { font-size: 18px; line-height: calc(1em + 10px);}
.positionDesc p { font-size: 16px; line-height: 28px; color: #333333;}
.positionDesc p a { color: #333333;}
.pos1 .positionDesc { left:36px; top: 0;}
.pos2 .positionDesc { left:36px; bottom: 0;}
.pos3 .positionDesc { left:36px; top: 17px;}
/**/
.jobSearch p{ text-align: center;}
.jobPage { padding-top: .6rem; padding-bottom: .35rem;}
.searchConts { display: flex; justify-content: space-between; border: 1px solid #dbdbdb; width: 5.9rem; border-radius: .08rem; margin: .3rem auto;}
.searchConts input { font-size: var(--font16); background: url(../images/new/jobSearch.png) .13rem center no-repeat; background-size: .18rem auto; text-indent: .39rem; flex: 1;}
.searchConts button { font-size: var(--font16); padding: 0 .11rem; line-height: 3; cursor: pointer; background: #313131; border-radius: .08rem; color: #ffffff; transition: all .4s;}
.searchConts button:hover { background: #ba251d;}
.jobFlex { display: flex; align-items: start; justify-content: space-between;}
.jobArea { width: 3.3rem; position: sticky;left: 0; top: 70px;}
.jobArea h2 { font-weight: normal; color: #333333; font-size: var(--font24); line-height: 1; margin-bottom: .1rem;}
.jobArea li { margin-bottom: .1rem;}
.jobArea li h3 { cursor: pointer; transition: all .4s; border-bottom: 1px solid #e5e5e5; font-size: var(--font18); line-height: 2; font-weight: normal; display: flex; justify-content: space-between; align-items: center;}
.jobArea li h3 i{ transform: rotate(180deg); background: url(../images/new/jobIcon3.png) center no-repeat; width: 12px; height: 7px; transition: all .4s;}
.jobArea li h3:hover { color: #ba251d;}
.jobArea dt a { display: block; line-height: 1; color: #666666; transition: all .4s; background: url(../images/new/jobIcon4.png) left center no-repeat;
padding-left: .16rem; font-size: var(--font18); padding: .5em 0 .5em .16rem;}
.jobArea dl { display: none; padding: .05rem 0;}
.jobArea li.cur h3 i { transform: rotate(0deg);}
.jobArea li.cur h3 { color: #ba251d;}
.jobArea dt a:hover,.jobArea dt.cur a  { color: #ba251d; background: url(../images/new/jobIcon5.jpg) left center no-repeat;}
.jobArea { padding-top: .3rem;}
.jobName {transition: all .3s; background: url(../images/new/jobIcon1.png) 20px center no-repeat; padding:16px 0 16px 54px;}
.jobName h2 { cursor: pointer; color: #000000; font-weight: normal; font-size: var(--font24); transition: all .4s;}
.jobName p {transition: all .4s; font-size: 14px; color: #666666;}
.jobTitle { cursor: pointer; margin-bottom: 15px; border-bottom: 1px solid #dddddd; display: flex; justify-content: space-between; align-items: center;}


.jobHidden { display: none; border-top: 1px solid #dddddd; padding: 20px 20px 0; margin-top: 20px;}
.jobTag { padding-left: 20px; line-height: 34px;}
.jobTag span { margin-right:.35rem; display: inline-block; font-weight: bold; font-size: var(--font18); color: #333333;}
.jobGood { justify-content: space-between; display: flex; align-items: center; border-top: 1px solid #dddddd; margin-top: 20px; padding: 15px 0 0;}
.jobChat { display: flex; align-items: center; gap: 20px;}
.jobChat span { font-size: 16px; display: block; padding: 0 20px; line-height: 36px; border-radius: 36px; background: #122a7d; color: #ffffff;}
.jobChat span a { color: #ffffff;}
.jobChat p { font-size: 16px; color: #333333;}
.jobList { width: calc(100% - 4.28rem);}
.jobList li .jobTitle.cur .jobName {background: url(../images/new/jobIcon2.png) 20px center no-repeat; padding:16px 0 16px 54px;}
.jobList li .jobTitle.cur .jobName h2,.jobList li.cur .jobName p,.jobList li:hover .jobName p,.jobList li:hover .jobName h2 { color:#ba251d ;}
.jobList li:hover .jobName,.jobList li.cur .jobName { background: url(../images/new/jobIcon2.png) 20px center no-repeat;}
.jobDesc p { font-size: var(--font16); color: #333333; line-height:30px;}
.jobGood p { font-size:  var(--font16); color: #333333;}
.jobGood span { color: #666666; font-size: 16px;}
.jobGood p a { color: #ba251d; text-decoration: underline;}
.jobList li { background: #fcfcfc; padding: .1rem .18rem .28rem; margin-bottom: 28px;}
.jobTitle .controlJob { transition: all .4s; position: relative; display: block; width: 13px; height: 13px;}
.jobTitle .controlJob:before { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; transform: translateY(-50%); background: #2c3443;}
.jobTitle .controlJob:after { content: ''; position: absolute; left: 50%; top: 0; height: 100%; width: 1px; transform: translateX(-50%); background: #2c3443;}
.jobGood .sendMail { line-height: calc(1em + .3rem); border-radius: calc(1em + .3rem); transition: all .4s; border: 1px solid #dcdcdc; display: flex; justify-content: center; align-items: center; padding: 0 .23rem; font-size: var(--font16); color: #666666;}
.jobGood .sendMail:hover { background: #ba251d; border: 1px solid #ba251d; color: #ffffff;}
.jobGood .sendMail:hover img {filter: brightness(0) invert(1);}
.jobGood .sendMail img { display: block; margin-right: .11rem; transition: all .4s; width: .24rem;}
.jobTitle.cur .controlJob  { transform: rotate(180deg);}
.jobTitle.cur .controlJob:after { display: none;}
.joinTitle { padding: 0 4%; text-align: center;}
.joinTitle h2 { line-height: 1.2; margin-bottom: .2rem; font-size: var(--font36); font-weight: normal; color: #333333;}
.joinTitle h2 span { display: inline-flex;background: linear-gradient(to right, #ba251d, #fd8e88); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.joinTitle p { font-size: var(--font18); color: #333333;overflow: hidden;
    line-height: 1.6;
    margin: 0 auto;
    margin-top: 2%;
    color: #333333;
    max-width: 1106px;}
.joinImg { position: relative; overflow: hidden; padding-top:50.46%}
.joinImg img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transition: all .8s;}
.joinEnter { margin: .5rem auto .7rem;}

.joinEnter li:hover img { transform: scale(1.1);}
.joinEnter ul { display: flex; justify-content: space-between;}
.joinEnter li { box-shadow: 0 5px 5px rgba(0,0,0,0.1); border-radius: .1rem; overflow: hidden; width: calc((100% - .8rem)/3);}
.joinEnter li p{ color: #333333; font-size: var(--font24); line-height: 3.17; transition: all .4s; text-align: center;}
.joinEnter li:hover p { color: #ffffff; background: #ba251d;}
.projectList ul { display: flex; justify-content: space-between;}
.projectList li { border-radius: .1rem; overflow: hidden; background: #ba251d; box-sizing:border-box; position: relative; width: calc((100% - 1.26rem)/4);}
.projectList li img { height: 100%; object-fit: cover; display: block; width: 100%; transition: all .8s;}
.projectList li p { transition: all .4s; font-weight: bold; font-size: var(--font24); position: absolute; text-align: center; bottom: .4rem; left: 0; width: 100%; text-align: center; color: #ffffff;}
.hiddenCont { transition: all .4s; position: absolute; left: 0; top: 50%; opacity: 0; transform: translateY(-0%); z-index: 2; width: 100%; padding: 0 .32rem; box-sizing: border-box;}
.hiddenCont h2 { text-align: center; color: #ffffff; font-size: var(--font24);}
.hiddenCont span { margin: .3rem 0 .4rem; line-height: 1.7777; font-size: var(--font18); color: #ffffff; display: block;}
.hiddenCont b { display: block; font-size: var(--font18); color: #ffffff; text-align: center; font-weight: normal;}
.growPage { padding-top: .65rem;}
.projectList { margin-top: .45rem;}
.projectTitle { text-align: center; font-size: var(--font30); margin-bottom: .6rem;}
.projectList li.on img { opacity: .5;}
.projectList li.on p { opacity: 0;}
.projectList li.on .hiddenCont { opacity: 1; transform: translateY(-50%);}
.studyList li { margin-bottom: .8rem; justify-content: space-between; align-items: center; display: flex;}
.studyText h2 {font-size: var(--font24); font-weight: normal; line-height: 1.1; margin-bottom: .3rem;}
.studyList li:nth-child(2n) { flex-direction: row-reverse;}
.studyImg { overflow: hidden; border-radius: .1rem; position: relative; width: 7.45rem;}
.studyImg img { display: block; width: 100%;}
.studyImg p { position: absolute; text-align: center; left: 0; width: 100%; bottom: .22rem; font-size: var(--font18); color: #ffffff;}
.studyText {width: calc(100% - 8.7rem);}
.studyList li:last-child { margin-bottom: 0;}
.studyText p {font-size: var(--font18); color: #333333; line-height: 1.6666;}
.studyList { margin-bottom: 1.6rem;}
.streetFlex { display: flex; background: #fcfcfc; justify-content: space-between; align-items: center;}
.streetImg { width: 63.3%;}
.streetImg img { display: block; width: 100%;}
.streetText {padding-left: .72rem; width: 36.7%;}
.streetText h2 { margin-bottom: .1rem; font-size: var(--font26); color: #000000; line-height: calc(1em + .2rem); font-weight: normal;}
.streetText p { font-size: var(--font18); line-height: 1.7777;}
.growStreet { margin-bottom: .65rem;}
.pictureFlex { gap: .1rem; display: flex; justify-content: space-between; flex-wrap: wrap;}
.picSlide { border-radius: .08rem; overflow:hidden; position: relative;}
.picSlide img { position: absolute; left: 0; top: 0; transition: all .8s; height: 100%; object-fit: cover; display: block; width: 100%;}
.picSlide:hover img { transform: scale(1.1);}
.picSlide:nth-child(1),.picSlide:nth-child(3) { padding-top:20.91%; width: 25.72%;}
.picSlide:nth-child(2) { width: 46.75%; padding-top: 20.91%;}
.picSlide:nth-child(4) { width: calc(46% - .05rem); padding-top:20.91%;}
.picSlide:nth-child(5) { width: calc(54% - .05rem); padding-top:20.91%;}
.picSlide::after { content: ''; z-index: 2; position: absolute; bottom: 0; left: 0; width: 100%; height: 64px; background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,1));}
.pictureSwiper { overflow: hidden; position: relative;}
.pictureSwiper .swiper-button-prev,.pictureSwiper .swiper-button-next { width: .56rem; height: .56rem; background: #ffffff; transition: all .4s; border-radius: 50%;}
.pictureSwiper .swiper-button-prev { background: url(../images/left.png) center no-repeat #ffffff; transition: all .4s; background-size: 100% auto;}
.pictureSwiper .swiper-button-next { background: url(../images/right.png) center no-repeat #ffffff; transition: all .4s; background-size: 100% auto;}
.pictureSwiper .swiper-button-prev:hover { background: url(../images/left_on.png) center no-repeat #ffffff; background-size: 100% auto;}
.pictureSwiper .swiper-button-next:hover { background: url(../images/right_on.png) center no-repeat #ffffff; background-size: 100% auto;}
.pictureFlex { margin-bottom: .65rem;}
.picSlide p { overflow: hidden;text-overflow: ellipsis;  white-space: nowrap;  z-index:3; position: absolute; text-align: center; left: 0; width: 100%; bottom: .22rem; font-size: var(--font18); color: #ffffff;}
.insideFlex { width: 1200px; margin: .55rem auto .75rem; max-width: 100%; display: flex; justify-content: space-between;}
.insideFlex ul { width: 5.3rem;}
.insideFlex li h2 { line-height: 1.1; margin-bottom: .1rem; font-size: var(--font24); color: #333333;}
.insideFlex li p { transition: all .4s; cursor: pointer; background: url(../images/new/insideIcon1.png) right center no-repeat; color: #333333; font-size: var(--font18); line-height: 1.7777;}
.insideFlex li { min-height: 1.25rem; margin-bottom: .5rem; border-bottom: 1px solid #b2b2b2; padding-bottom: .15rem;}
.insideDesc { transition: all .4s; border-radius: .12rem; overflow: hidden; padding: .72rem .25rem 0; width: calc(100% - 6.4rem); background-size: cover!important;}
.insideDesc h2 { line-height: 1; margin-bottom: .35rem; color: #ffffff; font-size: var(--font24);}
.insideDesc p { color: #ffffff; line-height: calc(1em + .1rem); font-size: var(--font16);}
.insideFlex li:last-child { margin: 0;}
.insideFlex li p.on { color: #ba251d; background: url(../images/new/insideIcon2.png) right center no-repeat;}
.dn { display: none;}
.noworriedList li { margin: 0; padding: .4rem 0; display: block;}
.noworriedList li:nth-child(2n) { background: #f7f7f7;}
.noworriedList li .flex-wrap{ align-items: center; display: flex; justify-content: space-between; flex-direction: row-reverse;}
.noworriedList li:nth-child(2n) .flex-wrap{ flex-direction: row;}
.noworriedList li h3 { font-weight: normal; font-size: var(--font30); line-height: 1.5; margin-bottom: .3rem;}
.noworriedList li .flex-wrap::after { display: none;}
.noworriedList { margin-bottom: .6rem;}
.growPage { padding: .8rem 0 1.2rem;}
.contactInfor { display: flex; justify-content: space-between;}
.contactTop { background: #f8f8f8;}
.contactMap { width: 50%; z-index: 1;}
.contactText { width: 50%; padding: 1rem .5rem;}
.contactText h2 { font-size: var(--font24); color: #333333; line-height:calc(1em + .1rem); margin-bottom:.35rem;}
.contactText p { margin-bottom: .3rem; font-size: var(--font18); color: #333333;}
.contactText p a { color: #333333; transition: all .4s;}
.contactText p a:hover { color: #ba251d;}
.contactText p:last-child { margin-bottom: 0;}
.contactInfor { margin-top: .4rem; background: #ffffff; border-radius: .14rem; overflow: hidden;}
.contactMap { border-radius: .14rem; overflow: hidden;}
.contactForm { padding: 1rem 0 1.45rem; background: url(../images/new/contactBg.jpg) center no-repeat; background-size: cover;}
.formCont { margin-top: .8rem;}
.formCont ul { display: flex; flex-wrap: wrap; gap:.3rem .44rem;}
.formCont li { background: #ffffff; border-radius: 8px; align-items: center; display: flex; justify-content: space-between; width: calc((100% - .88rem)/3); border: 1px solid #e8e8e8; padding: .08rem .2rem;}
.formCont li input { text-indent: .15rem; box-sizing: border-box; height: .35rem; flex: 1; font-size: var(--font16); color: #000000;}
.formCont li span { display: flex; align-items: center; width: 30px;}
.formCont li span img { display: block;}
.formCont li:last-child { padding: .15rem .2rem; align-items: flex-start; width: 100%;}
.formCont li p { color: #666666; font-size: var(--font16);}
.formCont li p i { font-style: normal; color: #f13300;}
.formCont li textarea { font-size: var(--font16); flex: 1; height: 1.1rem; box-sizing: border-box;}
.formCont button { display: block; color: #ffffff; font-size: var(--font16); margin: .42rem auto 0; border-radius: .48rem; background: #ba251d; width: 1.62rem; height: .48rem; transition: all .4s; cursor: pointer;}
.formCont button:hover { opacity: .8;}
.study { padding-top:clamp(30px,.5rem,50px);}
.bossPage { padding: clamp(30px,.7rem,70px) 0 clamp(30px,.5rem,50px);}
.needTitle h2 { transition: all .4s; text-align: center; font-size: var(--font30); color: #333333;}
.needList { margin-top:clamp(20px,.7rem,70px);}
.needList ul { display: flex; justify-content: space-between;}
.needList li { transition: all .4s; border-radius: 8px; position: relative; transition: all .4s; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; width: calc((100% - .9rem)/4); background: #f8f8f8;
height: clamp(160px,3rem,300px);}
.needIcon { margin-bottom: clamp(10px,.28rem,28px); display: flex; justify-content: center; align-items: center; height: clamp(34px,.68rem,68px);}
.needIcon img { display: block; max-height: 100%;}
.needList li p { padding-top: .1rem; transition: all .4s; font-size: var(--font18); line-height: calc(1em + .1rem); overflow: hidden;}
/* .needList ul li:hover p {padding-top: .1rem;height: calc(2em + .3rem); } */
.needList li span { transition: all .4s;  position: absolute; bottom: .28rem;}
.needList li span img { width: clamp(20px,.35rem,35px); transition: all .4s;}
.needList li:hover img {filter: brightness(0) invert(1);}
.needList li:hover { transform: translateY(-10px); box-shadow: 0 0 10px rgba(0,0,0,0.2); background: #ba251d;}
.needList li:hover p,.needList li:hover span,.needList li:hover h2 { color: #ffffff;}
.needList ul.on span { transform: translateY(10px); opacity: 0;}
.needTitle { margin-bottom: clamp(20px,.42rem,42px);}
.chatConts { margin-top: .4rem; display: flex; justify-content: space-between; background: url(../images/new/zhizhaoIcon10.jpg) left center no-repeat #f8f8f8; background-size: auto 100%; border-radius: .12rem; padding: .6rem 1rem .6rem 5.9rem;}
.chatDesc {padding-top: .45rem;}
.chatDesc p { font-size: var(--font20); color: #333333; line-height: 2;}
.chatList ul{ gap: .4rem; display: flex;}
.chatCode { margin-bottom: .25rem; background: #ffffff; width:2.6rem; padding: .18rem; border-radius: .12rem;}
.chatCode img { display: block; width: 100%;}
.chatList li p { color: #333333; font-size: var(--font20); text-align: center;}
.needList li h2 { transition: all .4s; font-size: var(--font24);}
.worriedPage { padding-top: clamp(30px,.7rem,70px);}
@media screen and (max-width:1440px) {
  .mapBar { max-width: 100%;}
  .shoperCont { max-width: 85%; margin: 0 auto;}
  .shoperCont h2 {font-size: 20px; margin-bottom: 65px;}
  .positionAdd { transform: translateY(-100%);}
  .progeasyType a { font-size: 20px;}
  .progeasyType { margin: 50px auto 40px;}
  .stepCont { max-width: 85%;}
  .videoCover img { width: 60px;}
  .videoCover p { font-size: 16px;}
  .stepTeach h2,.downloadList h2 { font-size: 20px;}
  .teachList li p { font-size: 18px;}
}
@media screen and (max-width:1280px) {
 .positionDesc p { font-size: 14px;}
 .shoperCont { width: 92%;}
 .positionDesc { width: 300px;}
 .shoperCont h2 { font-size: 18px; margin-bottom: 45px;}
 .stepTeach h2,.downloadList h2 { font-size: 18px;}
.progeasyType { margin: 40px auto 30px;}
.stepTeach { padding: 30px;}
.videoCover p { font-size: 14px;}
.videoCover img { margin-bottom: 10px;}
.teachList li p { font-size: 16px;}
}
@media screen and (max-width:1080px) {
	.stepTeach h2,.downloadList h2 { font-size: 16px;}
	.shoperCont h2 { font-size: 16px; margin-bottom: 30px;}
	.positionDesc { display: none;}
	.shoperCont { padding: 30px 0;}
	.positionAdd:hover { z-index: 4;}
	.positionAdd:hover .positionDesc { display: block; left: 50%; transform: translateX(-50%); top: 100%; bottom: auto;}
	.positionAdd.pos1 .positionDesc{ left: 0; transform: translateX(0);}
	.progeasyType { margin: 30px auto 20px;}
	.stepCont { max-width: 92%;}
	.stepPage { padding: 30px 0;}
	.stepTeach { padding: 20px;}
	.downloadList { padding: 20px 20px 0;}
	.videoCover img { width: 32px;}
	.teachList li p { font-size: 14px;}
	.teachList li img { width: 20px;}
	.formCont button { font-size: 14px; width: 120px; height: 32px; border-radius: 32px;}
	.growStreet { margin-bottom: 30px;}
}
@media screen and (max-width:780px) {
	.noworriedList li h3 { font-size: 16px;}
	.noworriedList li .flex-wrap{ flex-direction: column-reverse!important;}
	.chatDesc { text-align: center; margin-bottom: 20px;}
	.chatConts { padding: 20px; flex-direction: column; background: #f8f8f8;}
	.chatCode { padding: 10px; width: 100%;}
	.needList ul.on li p { padding-top: 10px; height: calc(2em + 10px + .2rem);}
	.needList ul { flex-wrap: wrap; gap:10px;}
	.needList li { width: calc(50% - 5px);}
	.pictureFlex { margin-bottom: 30px;}
	.shoperCont h2 { font-size: 15px;}
	.positionDesc p { font-size: 12px;}
	.positionAdd img { width: 12px; animation: topDownAni 1s infinite ease-in-out;}
	@keyframes topDownAni {
		0% { transform: translateY(3px);}
		50%{ transform: translateY(-3px);}
		100% { transform: translateY(3px);}
	}
	.progeasyType a { font-size: 14px; padding: 0 18px; line-height: 34px;}
	.progeasyLink a { font-size: 14px;}
	.linkIcon { width: 32px; margin-right: 10px;}
	.progeasyLink { padding:15px 0;}
	.downloadList { margin-bottom: 10px;}
	.stepTeach { margin-bottom: 10px;}
	.progeasyCont { margin-bottom: 0;}
	.progeasySwiper .swiper-button-next { left: auto; right: 4%;}
	.progeasySwiper .swiper-button-prev { left: 4%;}
	.progeasySwiper .swiper-button-next,.progeasySwiper .swiper-button-prev { width: 32px; height: 32px;}
	.progeasySwiper .swiper-button-next::after,.progeasySwiper .swiper-button-prev::after { font-size: 14px;}
	.projectList li p { bottom: 30px;}
	.progeasySwiper { margin: 10px auto;}
	.contactInfor { margin-top: 20px;}
	.growPage,.contactForm {padding-top: 30px; padding-bottom: 30px;}
	.contactInfor { flex-direction: column; padding: 20px;}
	.contactText { padding: 10px 0 0; width: 100%;}
	.contactMap { height: 200px; width: 100%;}
	.formCont li { margin-bottom: 10px; width: 100%;}
	.formCont li input {height: 32px;}
	.formCont li,.formCont li:last-child { padding:5px 10px;}
	.formCont li textarea { height: 100px;}
	.formCont { margin-top: 20px;}
	.joinTitle h2 { margin-bottom: 10px; font-size: 20px;}
	.joinEnter { margin-top: 20px;}
	.projectList { padding: 0 20px;}
	.projectList ul { overflow-x: auto; justify-content: start;}
	.projectList li { min-width: 50%; margin-right: 5px;}
	.hiddenCont span { line-height: 1.5;}
	.studyList li { padding:15px 0; margin-bottom: 0; flex-direction: column-reverse!important}
	.studyText { width: 100%;}
	.studyImg { width: 100%; margin-bottom: 20px;}
	.streetFlex { flex-direction: column-reverse;}
	.projectTitle { margin-bottom: 20px;}
	.streetImg { width: 100%; margin-bottom: 10px;}
	.streetText { width: 100%;}
	.streetText h2 { font-size: 16px;}
	.insideFlex { flex-direction: column-reverse;}
	.insideFlex ul { width: 100%;}
	.insideDesc { margin-bottom: 20px; width: 100%; height: 250px; border-radius: 10px; padding:40px 20px;}
	.insideFlex li { padding-bottom: 15px; margin-bottom: 15px;}
	.insideDesc p { line-height: 1.5;}
	.jobPage { padding-top: 30px; padding-bottom: 30px;}
	.joinEnter li { margin-bottom: 10px; border-radius: 10px; width: 100%;}
	.joinEnter ul { flex-wrap: wrap;}
	.joinEnter li p { font-size: 16px;}
	.searchConts { width: 100%;}
	.searchConts input { background-size: 14px auto; background-position: 10px center; text-indent: 30px;}
	.searchConts button { padding: 0 10px;}
	.jobFlex { flex-direction: column;}
	.jobArea { width: 100%;}
	.jobList { width: 100%;}
	.jobTag { padding-left: 0;}
	.jobGood { align-items: flex-start; flex-direction: column;}
	.jobGood .sendMail { margin-top: 10px; padding: 0 10px; line-height: 2.3;}
	.jobGood .sendMail img { min-width: 16px;}
	.jobHidden { padding: 20px 0 0;}
	.jobTag { line-height: 2;}
	.jobName { background-position: left center!important;}
	.jobArea h2 { margin-bottom: 10px;}
	.jobArea dt a { padding: 5px 0 5px 10px; background-size: 4px auto!important;}
	.jobArea li h3 { line-height: 3;}
	.jobList li { margin-bottom: 15px;}
	.jobName { padding-left: 32px;}
	.jobName h2 { font-size: 16px;}
	.needList ul li:hover p { padding-top: .2rem; height: calc(2em + .3rem); line-height: 1.5; height: auto;}
	.needList ul li p { padding-top: .2rem; height: calc(2em + .3rem); line-height: 1.5;  height: auto;}
	.progeasyLink { width: 100%;}
	.progeasyLink a{ padding: 4px 10px;}
	.stepSwiper { margin-bottom: 15px;}
	.progeasyType a br { display: block;}
	.progeasyType a { text-align: center; width: 49%; line-height: 1.25; padding: 3px 0;}
}