.about .about_foot h2 { font-size: 24px; font-weight: normal; margin-top: 22px; padding-bottom: 10px; position: relative; } .about .about_foot h2::before { content: ""; width: 70px; height: 1px; background: var(--themeColor); position: absolute; bottom: 0; left: 0; } .about .about_foot h3 { color: #999; font-size: 18px; line-height: 40px; font-weight: normal; margin-bottom: 36px; } .about .about_foot1 { display: flex; align-items: center; justify-content: space-between; margin: 100px auto; } .about .about_foot1 > div { width: 50%; } .about .about_foot1 > div:first-of-type { width: calc(50% - 80px); } /*.about .about_foot1 > div:first-of-type:hover h2,*/ /*.about .about_foot1 > div:first-of-type:hover h3,*/ /*.about .about_foot1 > div:first-of-type:hover p {*/ /* transition: all 1s;*/ /* color: var(--themeColor);*/ /*}*/ .about .about_foot1 > div:nth-of-type(2) { /*box-shadow: 0 20px 30px 0 rgba(207, 15, 25, 0.08);*/ overflow: hidden; } .about .about_foot1 > div:nth-of-type(2) img { width: 100%; transition: all 0.5s; } .about .about_foot1 > div:nth-of-type(2):hover img { scale: 1.1; } .about .about_foot1 p { font-size: 18px; font-family: hei; line-height: 2; } .about .about_foot2 { margin-bottom: 86px; } .about .about_foot2 .about_ditu { width: 100%; height: 500px; margin: 0 auto; margin-bottom: 150px; position: relative; background: url("/web/image/ditu.png") no-repeat; background-size: contain; background-position: center; overflow: hidden; } .about .about_foot2 .about_ditu #ex, .about .about_foot2 .about_ditu #exs { position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .about .about_foot2 .about_ditu #exs { opacity: 0.05; } .about .about_foot2 .about_ditu .ex_ul { position: absolute; width: 100%; top: 50%; left: 0; height: 100%; transform: translateY(-50%); display: flex; justify-content: start; overflow: hidden; } .about_ulul{ display: none; } .about .about_foot2 .about_ditu .ex_ul li { display: flex; flex-direction: column; justify-content: flex-end; /*transform: translateY(180%);*/ transition: all 0.5s; cursor: pointer; text-align: center; } .about .about_foot2 .about_ditu .ex_ul li:hover h6 { color: var(--themeColor); } .about .about_foot2 .about_ditu .ex_ul li:hover p { color: var(--themeColor); } .about .about_foot2 .about_ditu .ex_ul li:nth-child(2n) { /*transform: translateY(-100%);*/ flex-direction: column-reverse; } .about .about_foot2 .about_ditu .ex_ul li h6 { color: #000; font-size: 20px; font-weight: normal; } .about .about_foot2 .about_ditu .ex_ul li p { color: #666; font-size: 20px; white-space: nowrap; text-align: center; display: flex; justify-content: center; } .about .about_foot2 .about_ditu .ex_ul li:nth-child(1) { width: 10%; } .about .about_foot2 .about_ditu .ex_ul li:nth-child(2) { width: 15%; } .about .about_foot2 .about_ditu .ex_ul li:nth-child(3) { width: 15%; } .about .about_foot2 .about_ditu .ex_ul li:nth-child(4) { width: 10%; } .about .about_foot2 .about_ditu .ex_ul li:nth-child(5) { width: 35%; } .about .about_foot2 .about_ditu .ex_ul li:nth-child(6) { width: 20%; } .about .about_foot2 .about_ditu .ex_ul li:nth-child(1) p{ /*justify-content: flex-start;*/ } .about .about_foot2 .about_ditu .ex_ul li:nth-child(6) p{ justify-content: flex-end; } .about .about_foot2 .about_ditu .swiper-button-next, .about .about_foot2 .about_ditu .swiper-button-prev { color: var(--themeColor); } .about .about_foot2 .about_now { display: flex; justify-content: space-between; align-items: stretch; } .about .about_foot2 .about_now > div { width: calc(50% - 15px); padding: 30px 18px; padding-top: 10px; position: relative; display: flex; flex-direction: column; } .about .about_foot2 .about_now > div:first-of-type { background: #4C5056; } .about .about_foot2 .about_now > div:nth-of-type(2) { background: var(--themeColor); } .about .about_foot2 .about_now > div img { position: absolute; right: 18px; top: 0; transform: translateY(-50%); } .about .about_foot2 .about_now > div .about_now_head { display: flex; justify-content: start; align-items: center; font-size: 24px; color: #fff; line-height: 2; margin-bottom: 20px; } .about .about_foot2 .about_now > div .about_now_head h5 { font-weight: normal; opacity: 0.5; margin-left: 24px; } .about .about_foot2 .about_now > div .about_now_head h4 { font-weight: normal; } .about .about_foot2 .about_now > div p { font-size: 18px; padding: 10px 24px; background: rgba(255, 255, 255, 0.2); color: #fff; min-height: 180px; line-height: 2; flex: 1; /*overflow-x: auto;*/ } .about .manage_foot { position: relative; } .about .manage_foot1{ display: block; } .about .manage_foot2{ display: none; } .about .manage_foot img { width: 100%; } .about .manage_foot .manage_txt { position: absolute; left: 50%; /*top: 50%;*/ top: 60px; transform: translateX(-50%); } .about .manage_foot .manage_txt ul{ max-width: 50%; } .about .manage_foot .manage_txt h2, .about .manage_foot .manage_txt h3, .about .manage_foot .manage_txt h4, .about .manage_foot .manage_txt h5, .about .manage_foot .manage_txt h6, .about .manage_foot .manage_txt p { transition: all 0.5s; } .about .manage_foot .manage_txt h2:hover, .about .manage_foot .manage_txt h3:hover, .about .manage_foot .manage_txt h4:hover, .about .manage_foot .manage_txt h5:hover, .about .manage_foot .manage_txt h6:hover, .about .manage_foot .manage_txt p:hover { color: var(--themeColor); } .about .manage_foot .manage_txt .about_foot h2 { font-size: 30px; } .about .manage_foot .manage_txt ul li { display: flex; justify-content: flex-start; align-items: start; margin-bottom: 30px; } .about .manage_foot .manage_txt ul li > div { min-width: 100px; } .about .manage_foot .manage_txt ul li > div:first-of-type { margin-right: 40px; } .about .manage_foot .manage_txt ul li > div h4, .about .manage_foot .manage_txt ul li > div h5, .about .manage_foot .manage_txt ul li > div h6 { font-weight: normal; } .about .manage_foot .manage_txt ul li > div h4 { font-size: 24px; color: #333; margin-bottom: 20px; } .about .manage_foot .manage_txt ul li > div h5 { color: var(--themeColor); font-size: 14px; } .about .manage_foot .manage_txt ul li > div h6 { font-size: 20px; margin-bottom: 16px; } .about .manage_foot .manage_txt ul li > div p { font-size: 16px; max-width: 620px; line-height: 2; } .about .mass { padding: 90px 0; } .about .mass h2:hover, .about .mass h3:hover { transition: all 0.5s; color: var(--themeColor); } .about .mass .mass_head { margin-bottom: 30px; } .about .mass .mass_head h2 { font-size: 30px; } .about .mass .mass_cont { display: flex; } .about .mass .mass_cont ul { width: 50%; } .about .mass .mass_cont ul li { font-size: 18px; height: 100px; display: flex; align-items: center; padding-left: 45px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); transition: all 0.5s; } .about .mass .mass_cont ul li:last-of-type { border: 0; } .about .mass .mass_cont ul li .iconfont { display: none; margin-right: 10px; } .about .mass .mass_cont ul li:hover { background: var(--themeColor); color: #fff; } .about .mass .mass_cont ul li:hover .iconfont { display: block; } .about .mass .mass_cont > div { width: 50%; height: 500px; overflow: hidden; } .about .mass .mass_cont > div:hover img { scale: 1.1; } .about .mass .mass_cont > div img { transition: all 0.5s; width: 100%; height: 100%; object-fit: cover; } .about .tech { padding: 90px 0; } .about .tech h2:hover, .about .tech h3:hover { transition: all 0.5s; color: var(--themeColor); } .about .tech .tech_head { margin-bottom: 30px; } .about .tech .tech_head h2 { font-size: 30px; } .about .tech .tech_cont { display: flex; } .about .tech .tech_cont ul { width: 50%; } .about .tech .tech_cont ul li { font-size: 18px; height: 100px; display: flex; align-items: center; padding-left: 45px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); transition: all 0.5s; } .about .tech .tech_cont ul li:last-of-type { border: 0; } .about .tech .tech_cont ul li .iconfont { display: none; margin-right: 10px; } .about .tech .tech_cont ul li:hover { background: var(--themeColor); color: #fff; } .about .tech .tech_cont ul li:hover .iconfont { display: block; } .about .tech .tech_cont > div { width: 50%; height: 600px; position: relative; overflow: hidden; } .about .tech .tech_cont > div:hover .tech_img { scale: 1.1; } .about .tech .tech_cont > div .tech_img { width: 100%; height: 100%; transition: all 0.5s; object-fit: cover; } .about .tech .tech_cont > div .tech_icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .about .enterprise { margin-top: 90px; } .about .enterprise .enterprise_head { margin-bottom: 30px; } .about .enterprise .enterprise_head h2 { font-size: 30px; } .about .enterprise .enterprise_contet { font-size: 18px; line-height: 2; color: #333; } .about .enterprise .enterprise_contet .enter_swiper { overflow: hidden; margin-top: 40px; height: 500px; position: relative; --swiper-navigation-size: 20px; --swiper-navigation-color: #fff; } .about .enterprise .enterprise_contet .enter_swiper .swiper-wrapper { display: flex; align-items: center; } .about .enterprise .enterprise_contet .enter_swiper .swiper-button-prev, .about .enterprise .enterprise_contet .enter_swiper .swiper-button-next { width: 45px; height: 45px; border-radius: 50%; background: var(--themeColor); opacity: 0.3; transition: all 0.5s; } .about .enterprise .enterprise_contet .enter_swiper .swiper-button-prev:hover, .about .enterprise .enterprise_contet .enter_swiper .swiper-button-next:hover { opacity: 1; } .about .enterprise .enterprise_contet .enter_swiper .swiper-button-prev { left: 20px; } .about .enterprise .enterprise_contet .enter_swiper .swiper-button-next { right: 20px; } .about .enterprise .enterprise_contet .enter_swiper .swiper-slide { height: 400px; scale: 1; position: relative; z-index: 1; transition: all 0.5s; display: flex; justify-content: center; } .about .enterprise .enterprise_contet .enter_swiper .swiper-slide::before { content: ""; top: 0; left: 0; bottom: 0; right: 0; position: absolute; background: rgba(255, 255, 255, 0.7); } .about .enterprise .enterprise_contet .enter_swiper .swiper-slide img { height: 100%; width: 100%; object-fit: cover; } .about .enterprise .enterprise_contet .enter_swiper .swiper-slide.swiper-slide-active { z-index: 10; } .about .enterprise .enterprise_contet .enter_swiper .swiper-slide.swiper-slide-active::before { content: ""; background: transparent; } .about .enterprise .enterprise_contet .enter_swiper .swiper-slide.swiper-slide-active img { -webkit-transform: scale(1.2); transform: scale(1.2); width: auto; } .about .arra .arra_head h2 { font-size: 30px; } .about .arra .arra_ul { display: flex; justify-content: space-between; } .about .arra .arra_ul li { width: calc((100% - 60px) / 3); position: relative; } .about .arra .arra_ul li > img { width: 100%; } .about .arra .arra_ul li .arra_li { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; font-size: 18px; width: 80%; } .about .arra .arra_ul li .arra_li > div:first-of-type { display: flex; justify-content: center; align-items: center; } .about .arra .arra_ul li .arra_li img { margin-right: 25px; width: 40px; } .about .arra .arra_ul li .arra_li .arra_num { display: flex; align-items: flex-end; } .about .arra .arra_ul li .arra_li h4 { font-weight: normal; font-size: 50px; } .about .arra .arra_ul li .arra_li span { font-size: 28px; margin-bottom: 10px; margin-left: 15px; } .about .arra .arra_ditu { padding-top: 35px; display: flex; justify-content: center; transform: scale(1); transition: all 3s; position: relative; } .about .arra .arra_ditu .arra_img { position: absolute; z-index: 111; top: 50%; left: 50%; width: 100%; height: 500px; transform: translate(-50%, -50%); } .about .arra .arra_ditu .arra_img #map { position: absolute; height: 100%; width: 100%; top: 0; bottom: 0; right: 0; left: 0; } .about .arra .arra_ditu.fangda { transform: scale(1.5) translateY(500px); } @media screen and (max-width: 1550px) { .about .manage_foot .manage_txt { left: 50%; /*transform: translate(-50%, -50%);*/ } /*.manage_txts{*/ /* transform: translateX(-50%) !important;*/ /*}*/ .about .manage_foot .manage_txt .about_foot h2 { font-size: 26px; } .about .manage_foot .manage_txt .about_foot h3 { font-size: 14px; margin-bottom: 20px; } .about .manage_foot .manage_txt ul li { margin-bottom: 20px; } .about .manage_foot .manage_txt ul li > div h4 { font-size: 18px; margin-bottom: 15px; } .about .manage_foot .manage_txt ul li > div h6 { font-size: 16px; margin-bottom: 10px; } .about .manage_foot .manage_txt ul li > div p { font-size: 12px; line-height: 1.5; } .about .mass .mass_cont > div { height: 400px; width: auto; aspect-ratio: 1.5/1; } .about .mass .mass_cont .red { height: 80px; width: calc(100% - 400px * 1.5); } .about .mass .mass_cont ul { flex: 1; } .about .mass .mass_cont ul li { height: 80px; } .about .tech .tech_cont > div { height: 480px; width: auto; aspect-ratio: 1.2/1; } .about .tech .tech_cont .red { height: 80px; width: calc(100% - 480px * 1.2); } .about .tech .tech_cont ul { flex: 1; } .about .tech .tech_cont ul li { height: 80px; } } @media screen and (max-width: 1350px) { .about .about_foot2 .about_ditu .ex_ul li h6 { font-size: 16px; } .about .about_foot2 .about_ditu .ex_ul li p { font-size: 14px; } .about .arra .arra_ul li .arra_li { font-size: 16px; } .about .arra .arra_ul li .arra_li h4 { font-size: 36px; } .about .arra .arra_ul li .arra_li span { font-size: 24px; } .about .arra .arra_ditu img { width: 70%; } } @media screen and (max-width:600px){ .about .about_foot1{ margin: 30px auto; flex-direction: column; align-items: flex-start; } .about .about_foot1 > div{ width: 100% !important; } .about .about_foot h3{ line-height: 2; margin-bottom:15px; } .about .about_foot1 p{ line-height: 1.5; } .about .about_foot1 > div:first-of-type{ margin-bottom: 15px; } .about .about_foot2 .about_now{ flex-direction: column; } .about .about_foot2 .about_now > div{ width: 100%; } .about .about_foot2 .about_now > div:first-of-type{ margin-bottom: 30px; } .about .manage_foot img{ height: 100%; object-fit: cover; } .about .manage_foot1{ display: none; } .about .manage_foot2{ display: block; padding: 20px; } .about .manage_foot .manage_txt{ position: static; transform: none; } .about .manage_foot .manage_txt ul li{ flex-direction: column; } .about .manage_foot .manage_txt ul li > div:first-of-type{ margin-right: 0; margin-bottom: 20px; } .about .manage_foot .manage_txt ul li > div h4{ margin-bottom: 0; } .about .mass .mass_cont { display:flex; flex-direction: column; } .about .mass .mass_cont ul{ width: 100%; } .about .mass .mass_cont ul li{ padding:0 15px; height: 60px; } .about .mass .mass_head h2{ margin-top: 0px; } .about .mass{ padding: 30px 0; } .about .mass .mass_head{ margin-bottom: 15px; } .about .mass .mass_cont > div{ width: 100%; height: auto; } .about .tech .tech_cont { display:flex; flex-direction: column; } .about .tech .tech_cont ul{ width: 100%; } .about .tech .tech_cont ul li{ padding:0 15px; height: 60px; } .about .tech .tech_head h2{ margin-top: 0px; } .about .tech{ padding: 30px 0; } .about .tech .tech_head{ margin-bottom: 15px; } .about .tech .tech_cont > div{ width: 100%; height: auto; } .about .enterprise{ margin-top: 40px; } .about .enterprise .enterprise_head{ margin-bottom: 20px; } .about .enterprise .enterprise_contet{ font-size: 14px; line-height: 1.5; } .about .enterprise .enterprise_contet .enter_swiper{ height:260px ; } .about .enterprise .enterprise_contet .enter_swiper .swiper-slide{ height: 100%; } .about .arra .arra_ul{ flex-direction: column; } .about .arra .arra_ul li{ width: 100%; margin-bottom: 15px; } .about .arra .arra_ul li .arra_li{ font-size: 14px; } .about .arra .arra_ul li .arra_li img{ width: 30px; } .about .arra .arra_ul li .arra_li h4{ font-size: 32px; } .about .arra .arra_ul li .arra_li span{ margin-bottom: 5px; margin-right: 10px; } } @media(max-width: 900px){ .about .manage_foot img{ height: 60vh; object-fit: cover; } .banner{ height: auto; } }