html {
position: relative;
overflow-y: auto;
}
body {
width: 100%;
-moz-user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: none;
}
:root {
overflow-y: auto;
overflow-x: hidden;
}
:root body {
position: absolute;
}
@font-face {
font-family: "PangMenZhengDao";
src: url("../fonts/PangMenZhengDao-3.ttf") format("truetype");
}
.overhidden {
position: fixed;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
}
.swiper-btn {
position: absolute;
transform: translateY(-50%);
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 100px;
line-height: 100px;
z-index: 1;
cursor: pointer;
outline: none;
transition: all 0.4s;
color: #138de8;
}
.swiper-btn span {
font-size: 30px;
color: #fff;
}
.swiper-btn:hover {
background: #c9d3cd;
}
.space-over {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.space-list-over {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.space-p-over {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.block-link {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
z-index: 9;
}
.container {
width: 100%;
padding: 0 10rem;
}
.inner-header-icon {
display: none;
color: #fff;
height: 3.625rem;
font-size: 1.563rem;
text-align: center;
float: right;
width: 3.125rem;
position: relative;
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
-o-transition: background 0.5s;
transition: background 0.5s;
z-index: 3;
transform: scale(1.3);
/*第一条线旋转动画*/
/*第二条线淡入淡出动画动画*/
/*第三条线旋转动画*/
}
.inner-header-icon:hover {
background-color: rgba(255, 255, 255, 0.2);
cursor: pointer;
}
.inner-header-icon span {
position: absolute;
left: calc((100% - 1.563rem) / 2);
top: calc((100% - 1px) / 2);
width: 1.563rem;
height: 1px;
background-color: #138de8;
}
.inner-header-icon span:nth-child(1) {
transform: translateY(0.625rem) rotate(0deg);
}
.inner-header-icon span:nth-child(2) {
opacity: 0;
}
.inner-header-icon span:nth-child(3) {
transform: translateY(-0.625rem) rotate(0deg);
}
.inner-header-icon-click span {
background: #011d49;
}
.inner-header-icon-click span:nth-child(1) {
animation-duration: 0.5s;
animation-fill-mode: both;
animation-name: clickfirst;
}
.inner-header-icon-click span:nth-child(2) {
animation-duration: 0.5s;
animation-fill-mode: both;
animation-name: clicksecond;
}
.inner-header-icon-click span:nth-child(3) {
animation-duration: 0.5s;
animation-fill-mode: both;
animation-name: clickthird;
}
@keyframes clickfirst {
0% {
transform: translateY(0.625rem) rotate(0deg);
}
100% {
transform: translateY(0) rotate(45deg);
}
}
@keyframes clicksecond {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes clickthird {
0% {
transform: translateY(-0.625rem) rotate(0deg);
}
100% {
transform: translateY(0) rotate(-45deg);
}
}
.inner-header-icon-out span {
background: #ffffff;
}
.inner-header-icon-out span:nth-child(1) {
animation-duration: 0.5s;
animation-fill-mode: both;
animation-name: outfirst;
}
.inner-header-icon-out span:nth-child(2) {
animation-duration: 0.5s;
animation-fill-mode: both;
animation-name: outsecond;
}
.inner-header-icon-out span:nth-child(3) {
animation-duration: 0.5s;
animation-fill-mode: both;
animation-name: outthird;
}
@keyframes outfirst {
0% {
transform: translateY(0) rotate(-45deg);
}
100% {
transform: translateY(-0.625rem) rotate(0deg);
}
}
@keyframes outsecond {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes outthird {
0% {
transform: translateY(0) rotate(45deg);
}
100% {
transform: translateY(0.625rem) rotate(0deg);
}
}
#newBridge .icon-right-center {
left: 2px !important;
bottom: 10% !important;
right: auto !important;
top: auto !important;
}
.common_banner {
position: relative;
width: 100%;
height: 33.125rem;
overflow: hidden;
}
.common_banner > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.common_banner_text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.common_banner_text h3 {
font-size: 2rem;
color: #fff;
font-weight: normal;
margin-bottom: 2.5rem;
text-align: center;
}
.common_banner_text p {
font-size: 1rem;
color: #fff;
}
.common_pagination ul {
display: flex;
justify-content: center;
margin: 0 auto;
}
.common_pagination a {
display: flex;
justify-content: center;
align-items: center;
width: 2.5rem;
height: 2.5rem;
background-color: #fff;
font-size: 0.875rem;
color: #666;
margin: 0 0.875rem;
border-radius: 100%;
transition: all 0.35s;
}
.common_pagination a:hover {
color: #fff;
background-color: #ff5730;
}
.common_pagination a.page-num-current {
color: #ffffff;
background-color: #ff5730;
}
.common_pagination li {
display: flex;
}
.common_pagination li:first-child > a,
.common_pagination li:last-child > a {
width: 4.25rem;
height: 2.5rem;
border-radius: 1.25rem;
}
.common_detail_pagebtn {
padding: 0 0 6.25rem;
}
.common_detail_pagebtn .container {
display: flex;
justify-content: space-between;
}
.common_detail_pagebtn a {
display: flex;
max-width: 40%;
font-size: 1rem;
color: #333333;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
.common_detail_pagebtn a i {
display: flex;
justify-content: center;
align-items: center;
width: 1.25rem;
height: 1.25rem;
color: #333;
font-size: 0.75rem;
border: 1px solid #333;
border-radius: 50%;
box-sizing: border-box;
}
.common_detail_pagebtn a:hover {
color: #ff5730;
}
.common_detail_pagebtn a:hover i {
background-color: #ff5730;
color: #fff;
border: 1px solid #ff5730;
}
.common_detail_pagebtn a:first-child i {
transform: rotate(180deg);
margin-right: 1.25rem;
}
.common_detail_pagebtn a:last-child i {
margin-left: 1.25rem;
}
.bd {
padding-bottom: 11.375rem;
}
.popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 43.75rem;
height: 20rem;
z-index: 10;
}
.popup .gb {
position: absolute;
top: 2%;
right: 2%;
display: flex;
justify-content: center;
align-items: center;
width: 1.5rem;
height: 1.5rem;
}
.popup .gb:hover {
cursor: pointer;
}
.popup .gb i {
font-size: 1.5rem;
color: #fff;
}
.popup img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.infopopup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, 150%);
background: url("../images/infopopupbg.jpg") no-repeat center center;
background-size: cover;
width: 70%;
height: auto;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
opacity: 0;
z-index: 999;
transition: all 1s;
}
.infopopup.show {
transform: translate(-50%, -50%);
opacity: 1;
}
.infopopup .contentbx {
display: flex;
}
.infopopup .leftbx {
width: 58%;
padding: 1.875rem 1.25rem;
}
.infopopup .leftbx .md:not(:last-child) {
margin-bottom: 0.625rem;
}
.infopopup .leftbx .md h3 {
font-size: 1.5rem;
color: #fff;
font-weight: 400;
margin-bottom: 1.5rem;
}
.infopopup .leftbx .md > ul {
display: flex;
flex-wrap: wrap;
}
.infopopup .leftbx .md > ul li {
margin-right: 3rem;
margin-bottom: 1rem;
}
.infopopup .leftbx .md > ul li a {
font-size: 0.875rem;
color: #fff;
}
.infopopup .leftbx .md > ul li a:hover {
color: #ff5730;
}
.infopopup .leftbx .md_bd .listbx:not(:last-child) {
margin-bottom: 10px;
}
.infopopup .leftbx .md_bd .listbx h4 {
font-size: 1.25rem;
color: #fff;
font-weight: 400;
margin-bottom: 1rem;
}
.infopopup .leftbx .md_bd .listbx ul {
display: flex;
flex-wrap: wrap;
}
.infopopup .leftbx .md_bd .listbx ul li {
margin-right: 2rem;
margin-bottom: 1rem;
}
.infopopup .leftbx .md_bd .listbx ul li a {
font-size: 0.875rem;
color: #fff;
}
.infopopup .leftbx .md_bd .listbx ul li a:hover {
color: #ff5730;
}
.infopopup .rightbx {
position: relative;
width: 42%;
border: 0.375rem solid rgba(1, 29, 73, 0.2);
}
.infopopup .rightbx .gbbx {
position: absolute;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
width: 2.5rem;
height: 2.5rem;
background-color: rgba(1, 29, 73, 0.7);
}
.infopopup .rightbx .gbbx:hover {
cursor: pointer;
}
.infopopup .rightbx .gbbx i {
font-size: 1.5rem;
color: #fff;
}
.infopopup .rightbx_main {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
padding: 0 1.875rem;
background-color: #fff;
}
.infopopup .rightbx_main .hd {
margin-bottom: 3.125rem;
}
.infopopup .rightbx_main .hd h3 {
font-size: 1.75rem;
color: #000;
font-weight: 500;
}
.infopopup .rightbx_main .hd h3:not(:last-child) {
margin-bottom: 1.125rem;
}
.infopopup .rightbx_main .tel {
margin-bottom: 4rem;
}
.infopopup .rightbx_main .tel h4 {
font-size: 20px;
font-weight: 400;
color: #454545;
margin-bottom: 1rem;
}
.infopopup .rightbx_main .tel p {
font-size: 2.5rem;
color: #011d49;
font-weight: 600;
}
.infopopup .rightbx_main .btnbx {
display: flex;
}
.infopopup .rightbx_main .btnbx .btn {
width: 8.125rem;
height: 3rem;
}
.infopopup .rightbx_main .btnbx .btn a {
display: block;
width: 100%;
height: 100%;
font-size: 1.125rem;
text-align: center;
line-height: 3rem;
border: 1px solid #011d49;
box-sizing: border-box;
transition: all 0.4s;
}
.infopopup .rightbx_main .btnbx .btn a:hover {
background-color: #ff5730;
border-color: #ff5730;
color: #fff;
}
.infopopup .rightbx_main .btnbx .zx {
margin-right: 1.5rem;
}
.infopopup .rightbx_main .btnbx .zx a {
background-color: #011d49;
color: #fff;
}
.infopopup .rightbx_main .btnbx .weixinzx {
position: relative;
}
.infopopup .rightbx_main .btnbx .weixinzx a {
color: #011d49;
}
.infopopup .rightbx_main .btnbx .weixinzx .downdrop {
display: none;
position: absolute;
left: 50%;
bottom: 3.5rem;
transform: translateX(-50%);
width: 6.875rem;
height: 7.5rem;
}
.infopopup .rightbx_main .btnbx .weixinzx .downdrop img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.infopopup .rightbx_main .btnbx .weixinzx:hover .downdrop {
display: block;
}
.index_header {
position: relative;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 6.25rem;
z-index: 99;
transition: all 0.5s;
}
.index_header > .container {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
.index_header .logo {
display: block;
width: 14rem;
height: 3.375rem;
}
.index_header .logo img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.index_header_nav {
display: flex;
}
.index_header_nav li {
line-height: 2.5rem;
}
.index_header_nav li:not(:last-child) {
margin-right: 6.875rem;
}
.index_header_nav li > a {
position: relative;
color: #fefefe;
display: block;
font-size: 1.125rem;
}
.index_header_nav li > a:after {
content: "";
position: absolute;
left: 50%;
bottom: -0.125rem;
display: block;
width: 80%;
height: 0.125rem;
background: #fefefe;
transform: translateX(-50%) scale(0);
transition: transform 0.35s;
}
.index_header_nav li .downdrop {
position: absolute;
top: 6.25rem;
left: 0;
width: 100%;
height: 0;
overflow: hidden;
background-color: #fff;
transition: all 0.3s;
}
.index_header_nav li .downdrop ul {
display: flex;
align-items: center;
justify-content: flex-end;
height: 100%;
padding: 0 10rem;
opacity: 0;
transition: all 0.3s;
}
.index_header_nav li .downdrop ul li:not(:last-child) {
margin-right: 3.75rem;
}
.index_header_nav li .downdrop ul li a {
display: flex;
}
.index_header_nav li .downdrop ul li a p {
font-size: 1rem;
color: #333;
font-weight: bold;
}
.index_header_nav li .downdrop ul li a i {
font-size: 1.75rem;
color: #333;
margin-right: 0.875rem;
}
.index_header_nav li .downdrop ul li:hover a i {
font-weight: normal;
}
.index_header_nav li .downdrop ul li:hover a p {
color: #ff5730;
}
.index_header_nav li:hover .downdrop {
height: 6.25rem;
}
.index_header_nav li:hover .downdrop ul {
opacity: 1;
}
.index_header_nav li:hover > a {
font-weight: bold;
}
.index_header_nav li:hover > a::after {
transform: translateX(-50%) scale(1);
}
.index_header_nav li.active > a {
font-weight: bold;
}
.index_header:hover {
background: #171f38 !important;
}
.index_banner {
position: relative;
overflow: hidden;
width: 100%;
height: 100vh;
}
.index_banner_logo {
position: absolute;
top: 50%;
left: 25%;
transform: translate(-50%, -50%);
width: 19.5rem;
height: 6.125rem;
}
.index_banner_logo > img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.index_banner_text {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.index_banner_text1 {
right: 10%;
}
.index_banner_text1 h2 {
font-size: 3rem;
color: #fff;
font-weight: normal;
line-height: 5.125rem;
margin-bottom: 0.5rem;
letter-spacing: 1.5rem;
}
.index_banner_text2 {
left: 13%;
}
.index_banner_text2 h3 {
font-size: 1.875rem;
color: #fff;
font-weight: 400;
margin-bottom: 1.875rem;
}
.index_banner_text2 h3 span {
color: #ff0000;
font-weight: 700;
}
.index_banner_text2 h2 {
font-size: 3.375rem;
color: #fff;
margin-bottom: 1.875rem;
}
.index_banner_text2 p {
font-size: 1.75rem;
color: #fff;
}
.index_banner_text3 {
left: 13%;
max-width: 60%;
}
.index_banner_text3 h2 {
font-size: 3rem;
color: #fff;
margin-bottom: 1.875rem;
}
.index_banner_text3 p {
font-size: 1.5rem;
color: #fff;
margin-bottom: 3rem;
}
.index_banner_text3 ul {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.index_banner_text3 ul li {
display: flex;
justify-content: center;
align-items: center;
width: auto;
height: 3.75rem;
padding: 0 0.5rem;
border: 1px solid #fff;
margin-right: 1.5rem;
margin-bottom: 1.25rem;
}
.index_banner_text3 ul li img {
display: block;
max-width: 100%;
max-height: 70%;
object-fit: contain;
}
.index_banner_text4 {
left: 13%;
}
.index_banner_text4 h2 {
display: flex;
justify-content: center;
align-items: center;
font-size: 2.25rem;
color: #fff;
margin-bottom: 2rem;
}
.index_banner_text4 h2 .icon {
display: block;
width: 2.6875rem;
height: 2.75rem;
margin-right: 0.5rem;
}
.index_banner_text4 h2 .icon img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.index_banner_text4 h3 {
font-size: 2.5rem;
color: #fff;
text-align: center;
font-weight: 400;
margin-bottom: 2rem;
}
.index_banner_text4 a {
display: block;
width: 9.375rem;
height: 3.75rem;
font-size: 1.5rem;
color: #333;
text-align: center;
line-height: 3.75rem;
margin: 0 auto;
border-radius: 1.875rem;
background-color: #fff;
}
.index_banner_text6 {
right: 10rem;
width: 32%;
}
.index_banner_text6 h2 {
font-size: 4.25rem;
color: #fff;
line-height: 1.5em;
font-family: "PangMenZhengDao";
text-align: right;
font-weight: 400;
margin-bottom: 1.25rem;
}
.index_banner_text6 p {
font-size: 1.25rem;
color: #ececec;
line-height: 2.2em;
text-align: right;
}
.index_banner_text6 a {
display: block;
width: 9.375rem;
height: 2.875rem;
background-color: #fff;
border-radius: 1.4375rem;
margin-left: auto;
margin-top: 2.5rem;
font-size: 1rem;
color: #1d718d;
line-height: 2.875rem;
text-align: center;
}
.index_banner_swiper {
width: 100%;
height: 100%;
}
.index_banner_swiper .swiper-slide {
position: relative;
}
.index_banner_swiper .swiper-slide > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1);
transition: all 4s;
}
.index_banner_swiper .swiper-pagination {
display: flex;
flex-direction: column;
justify-content: center;
width: auto;
height: 100%;
left: 10rem;
}
.index_banner_swiper .swiper-pagination-bullet {
width: 0.625rem;
height: 0.625rem;
background: transparent;
opacity: 0.5;
border: 1px solid #fff;
margin: 0.5rem 0.25rem !important;
transition: all 0.3s ease 0s;
}
.index_banner_swiper .swiper-pagination-bullet-active {
opacity: 1;
transform: scale(1.1);
}
.index_banner .swiper-btn {
bottom: 3rem;
width: 3.375rem;
height: 3.375rem;
background: transparent;
border: 1px solid #fff;
border-radius: 50%;
overflow: hidden;
}
.index_banner .swiper-btn span {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
z-index: 3;
}
.index_banner .swiper-btn-prev {
right: 15rem;
transform: translateY(-50%) rotate(180deg);
}
.index_banner .swiper-btn-next {
right: 10rem;
}
.index_banner .swiper-btn:hover {
border: 1px solid #ff5730;
}
.index_banner .swiper-btn:hover span {
color: #ff5730;
}
.index_banner_M {
display: none;
}
.index_common_more {
display: block;
width: 18.75rem;
height: 3.75rem;
}
.index_common_more a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
font-size: 1.25rem;
color: #000;
letter-spacing: 0.625rem;
border: 2px solid #000;
}
.index_common_more a::after {
position: absolute;
content: "";
left: 50%;
bottom: -4px;
transform: translateX(-50%) scale(0);
width: 90%;
height: 2px;
background-color: #000;
transition: all 0.6s;
}
.index_common_more a i {
font-size: 1.5rem;
margin-right: 2.5rem;
}
.index_common_more:hover a::after {
transform: translateX(-50%) scale(1);
}
.index_service24 {
padding: 6.25rem 0;
}
.index_service24 h3 {
font-size: 2.25rem;
color: #333;
text-align: center;
margin-bottom: 5rem;
}
.index_service24 .listbx {
display: flex;
justify-content: space-between;
}
.index_service24 .listbx .item {
width: 23.75%;
aspect-ratio: 38/35;
padding: 2.5rem 1.625rem;
background: #ffffff;
box-shadow: 4px 6px 8px 0px rgba(0, 20, 23, 0.05);
box-sizing: border-box;
}
.index_service24 .listbx .item_iconbx {
display: flex;
justify-content: center;
width: 3.75rem;
height: 3.125rem;
margin-bottom: 2rem;
}
.index_service24 .listbx .item_iconbx svg {
width: 100%;
height: 100%;
object-fit: contain;
}
.index_service24 .listbx .item_text h4 {
font-size: 1.25rem;
color: #333;
font-weight: 700;
margin-bottom: 1.25rem;
}
.index_service24 .listbx .item_text p {
font-size: 0.875rem;
color: #666;
line-height: 1.6em;
}
.index_list24 {
padding: 5rem 0;
background: #f4f4f4;
}
.index_list24 .center {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 1.875rem;
grid-row-gap: 1.875rem;
}
.index_list24 .center .item {
position: relative;
}
.index_list24 .center .item img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
.index_list24 .center .item_text {
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
height: 100%;
padding: 4%;
}
.index_list24 .center .item_text h4 {
font-size: 1.875rem;
color: #fff;
font-weight: 700;
margin-bottom: 1.5rem;
}
.index_list24 .center .item_text p {
font-size: 1rem;
color: #fff;
line-height: 1.5em;
}
.index_list24 .center .item:first-child {
grid-area: 1 / 1 / 2 / 3;
}
.index_list24 .center .item:nth-child(2) {
grid-area: 1 / 3 / 2 / 6;
}
.index_list24 .center .item:nth-child(3) {
grid-area: 2 / 1 / 3 / 4;
}
.index_list24 .center .item:nth-child(4) {
grid-area: 2 / 4 / 3 / 6;
}
.index_creativity24 {
position: relative;
padding-top: 15.625rem;
background: url(../images/indexbg2.jpg) no-repeat center center;
background-size: cover;
}
.index_creativity24 img {
display: block;
max-width: 64%;
height: 30rem;
width: auto;
object-fit: contain;
margin: 0 auto;
}
.index_creativity24 .title {
position: absolute;
bottom: 14%;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
}
.index_creativity24 .title h3 {
font-size: 2.25rem;
color: #fff;
line-height: 1.8em;
text-align: center;
}
.index_creativity24 .list {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.index_creativity24 .list .item {
position: absolute;
display: flex;
flex-direction: column;
width: 16rem;
}
.index_creativity24 .list .item h4 {
font-size: 1.625rem;
color: #292929;
font-weight: 700;
margin-bottom: 1.25rem;
}
.index_creativity24 .list .item p {
font-size: 1rem;
color: #292929;
line-height: 1.7em;
}
.index_creativity24 .list .item:nth-child(1) {
bottom: 55%;
right: 60%;
align-items: flex-end;
}
.index_creativity24 .list .item:nth-child(1) p {
text-align: right;
}
.index_creativity24 .list .item:nth-child(2) {
bottom: 55%;
left: 60%;
}
.index_creativity24 .list .item:nth-child(3) {
bottom: 34%;
right: 73%;
align-items: flex-end;
}
.index_creativity24 .list .item:nth-child(3) p {
text-align: right;
}
.index_creativity24 .list .item:nth-child(4) {
bottom: 34%;
left: 73%;
}
.index_creativity24 .list .item:nth-child(5) {
bottom: 6%;
right: 79%;
align-items: flex-end;
}
.index_creativity24 .list .item:nth-child(5) p {
text-align: right;
}
.index_creativity24 .list .item:nth-child(6) {
bottom: 6%;
left: 79%;
}
.index_step24 {
padding: 6.25rem 0 5rem;
overflow: hidden;
}
.index_step24 h3 {
font-size: 2.25rem;
color: #111;
text-align: center;
font-weight: 700;
margin-bottom: 12.5rem;
}
.index_step24 .center {
position: relative;
width: 100%;
}
.index_step24 .center img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
.index_step24 .center .list {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.index_step24 .center .list .item {
position: absolute;
display: flex;
width: 18%;
height: auto;
}
.index_step24 .center .list .item em {
position: relative;
display: block;
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
background-color: #3873d7;
margin-top: 0.5rem;
}
.index_step24 .center .list .item em::after {
position: absolute;
left: 50%;
transform: translateX(-50%);
content: "";
display: block;
width: 0.125rem;
background-color: #3873d7;
}
.index_step24 .center .list .item_text {
flex: 1;
width: 0;
margin-left: 0.75rem;
}
.index_step24 .center .list .item_text h4 {
font-size: 1.625rem;
color: #000;
margin-bottom: 1.25rem;
}
.index_step24 .center .list .item_text p {
font-size: 0.875rem;
color: #333;
line-height: 1.6em;
}
.index_step24 .center .list .item:first-child {
left: 11%;
top: 27%;
}
.index_step24 .center .list .item:first-child em::after {
bottom: 0.75rem;
height: 5rem;
}
.index_step24 .center .list .item:nth-child(2) {
top: 0;
left: 34%;
}
.index_step24 .center .list .item:nth-child(2) em::after {
top: 0.75rem;
height: 8.5rem;
}
.index_step24 .center .list .item:nth-child(3) {
top: 57%;
left: 56%;
}
.index_step24 .center .list .item:nth-child(3) em::after {
bottom: 0.75rem;
height: 5.125rem;
}
.index_step24 .center .list .item:nth-child(4) {
top: 0;
left: 73%;
transform: translateY(-20%);
}
.index_step24 .center .list .item:nth-child(4) em::after {
top: 0.75rem;
height: 6.25rem;
}
.index_profile {
width: 100%;
height: 67.5rem;
padding-top: 5.25rem;
overflow: hidden;
}
.index_profile > .container {
height: 100%;
display: flex;
justify-content: space-between;
}
.index_profile_l {
position: relative;
width: 40.25%;
height: 100%;
}
.index_profile_l::after {
content: "";
display: block;
width: 38.125rem;
height: 28.875rem;
position: absolute;
left: -1.25rem;
bottom: 0;
background: url("../images/profilebg2.png") no-repeat center center;
background-size: contain;
z-index: -1;
}
.index_profile_l_hd {
display: flex;
flex-direction: column;
margin-bottom: 2rem;
width: 100%;
}
.index_profile_l_hd ul {
display: flex;
}
.index_profile_l_hd ul li {
display: flex;
align-items: flex-end;
}
.index_profile_l_hd ul li:not(:last-child) {
margin-right: 1.875rem;
}
.index_profile_l_hd ul li h2 {
font-size: 3rem;
color: #333;
}
.index_profile_l_hd ul li span {
font-size: 1.25rem;
color: #333;
}
.index_profile_l_hd ul li img {
display: block;
width: 1.25rem;
height: 1.25rem;
object-fit: contain;
}
.index_profile_l_hd em {
display: block;
width: 3rem;
height: 0.25rem;
background-color: #ff5730;
margin: 1.125rem 0 1.625rem;
}
.index_profile_l_hd h3 {
font-size: 1.875rem;
color: #333;
font-weight: normal;
}
.index_profile_l_bd {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 1.25rem;
margin-bottom: 5.375rem;
}
.index_profile_l_bd_item {
display: flex;
flex-direction: column;
align-items: center;
width: 48%;
padding: 1.875rem 0.625rem;
margin-bottom: 1.125rem;
background-color: #fff;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
transition: all 0.4s;
z-index: 3;
}
.index_profile_l_bd_item img {
display: flex;
width: 2rem;
height: 2rem;
object-fit: contain;
margin-bottom: 1.25rem;
}
.index_profile_l_bd_item h4 {
font-size: 1.125rem;
color: #333;
margin-bottom: 1.75rem;
}
.index_profile_l_bd_item p {
text-align: center;
line-height: 2rem;
font-size: 0.875rem;
}
.index_profile_l_bd_item:hover {
cursor: pointer;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
.index_profile_l_bottom {
display: flex;
flex-direction: column;
margin-bottom: 4.25rem;
}
.index_profile_l_bottom p {
font-size: 1.125rem;
color: #666;
margin-bottom: 2.625rem;
}
.index_profile_l_bottom .morebtn {
position: relative;
width: 12.5rem;
height: 3.75rem;
border: 1px solid #000;
box-sizing: border-box;
transition: all 1s linear 0s;
background-color: #fff;
}
.index_profile_l_bottom .morebtn a {
display: block;
width: 100%;
height: 100%;
font-size: 1.125rem;
color: #000;
font-weight: bold;
line-height: 3.75rem;
text-align: center;
transition: all 450ms linear 0s;
}
.index_profile_l_bottom .morebtn svg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 3.75rem;
}
.index_profile_l_bottom .morebtn svg rect {
fill: none;
stroke: #fff;
stroke-width: 1;
stroke-dasharray: 422, 0;
transition: all 450ms linear 0s;
}
.index_profile_l_bottom .morebtn:hover {
border: 0;
}
.index_profile_l_bottom .morebtn:hover a {
color: #000;
}
.index_profile_l_bottom .morebtn:hover rect {
stroke: #000;
stroke-width: 2;
stroke-dasharray: 12.5rem, 3.75rem;
stroke-dashoffset: 0;
-webkit-transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1);
}
.index_profile_r {
position: relative;
width: 51.625%;
height: 100%;
}
.index_profile_r .img1 {
display: block;
width: 87.2%;
height: auto;
object-fit: contain;
}
.index_profile_r .img2 {
display: block;
width: 76.3%;
height: auto;
object-fit: contain;
position: absolute;
right: 0;
bottom: 0;
}
.index_profile_r .img3 {
display: block;
width: 8.75rem;
height: 5rem;
object-fit: contain;
position: absolute;
left: 3%;
bottom: 4.75rem;
}
.index_service {
padding: 4.75rem 0 0;
width: 100%;
overflow: hidden;
}
.index_service_title h2 {
position: relative;
font-size: 3rem;
color: #333;
font-weight: normal;
margin-bottom: 2.75rem;
}
.index_service_title h2::after {
content: "";
display: block;
width: 3.125rem;
height: 0.75rem;
background: url("../images/icons/jiantou1.png") no-repeat center center;
background-size: contain;
position: absolute;
top: 50%;
left: 7rem;
transform: translateY(-50%);
}
.index_service_title p {
font-size: 1rem;
color: #333;
line-height: 2rem;
}
.index_service_website_img {
position: relative;
float: left;
width: 54%;
}
.index_service_website_img .websiteimg {
position: relative;
display: block;
width: 54.375rem;
height: 48.125rem;
object-fit: cover;
z-index: 3;
}
.index_service_website_img .websitebg {
position: absolute;
bottom: -10rem;
left: 0;
display: block;
width: 39.75rem;
height: 44.125rem;
object-fit: cover;
}
.index_service_website_text {
width: 38.635%;
float: right;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 2.5rem;
}
.index_service_website_text .text_content {
margin-bottom: 6.25rem;
}
.index_service_website_text .text_content h3 {
font-size: 2.25rem;
color: #333;
font-weight: normal;
margin-bottom: 3.625rem;
}
.index_service_website_text .text_content h3 span {
display: inline-block;
font-weight: bold;
font-family: "黑体";
margin-right: 1.25rem;
}
.index_service_website_text .text_content p {
font-size: 1rem;
color: #666;
line-height: 2.25rem;
margin-bottom: 2.5rem;
}
.index_service_website_text .text_content ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.index_service_website_text .text_content ul li {
width: 50%;
height: 2.5rem;
}
.index_service_website_text .text_content ul li i {
font-size: 1.25rem;
}
.index_service_website_text .text_content ul li a {
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 1rem;
color: #333;
width: 100%;
height: 100%;
padding-right: 5.625rem;
box-sizing: border-box;
}
.index_service_website_text .text_content ul li em {
display: block;
width: 0;
height: 1px;
margin: 0 0.25rem;
background-color: #333;
transition: all 0.5s;
}
.index_service_website_text .text_content ul li:hover a em {
width: 2.625rem;
}
.index_service_seo_text {
float: left;
display: flex;
flex-direction: column;
width: 45.25%;
padding: 6rem 0 0;
}
.index_service_seo_text .text_content {
width: 100%;
}
.index_service_seo_text .text_content h3 {
font-size: 2.25rem;
color: #333;
font-weight: normal;
margin-bottom: 3.625rem;
padding-left: 0.625rem;
}
.index_service_seo_text .text_content h3 span {
display: inline-block;
font-weight: bold;
font-family: "黑体";
margin-right: 1.25rem;
}
.index_service_seo_text .text_content > p {
font-size: 1rem;
color: #666;
line-height: 2.25rem;
padding-left: 1rem;
margin-bottom: 2.25rem;
}
.index_service_seo_text .text_content ul {
display: flex;
flex-direction: column;
margin-bottom: 3.75rem;
}
.index_service_seo_text .text_content ul li {
padding-left: 1.625rem;
height: 2.5rem;
}
.index_service_seo_text .text_content ul li p {
display: flex;
align-items: center;
height: 100%;
font-size: 1rem;
color: #333;
}
.index_service_seo_text .text_content ul li p img {
display: block;
width: 2.375rem;
height: 1.875rem;
object-fit: contain;
margin-right: 0.75rem;
}
.index_service_seo_text > .index_common_more {
margin-left: 1.25rem;
}
.index_service_seo_img {
float: right;
position: relative;
width: 48.625%;
padding-right: 6.875rem;
padding-bottom: 4.625rem;
}
.index_service_seo_img .seobg {
position: relative;
width: 41.5rem;
height: 39rem;
}
.index_service_seo_img .seobg.animate .seogoogle {
animation-name: seogoogleMove;
animation-duration: 2s;
}
.index_service_seo_img .seobg.animate .seoicon {
animation-name: seoiconMove;
animation-duration: 2s;
}
.index_service_seo_img .seobg.animate .seoyoutubi {
animation-name: seoyoutubiMove;
animation-duration: 2s;
}
.index_service_seo_img .seobg_img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
@keyframes seogoogleMove {
0% {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
}
100% {
top: 11%;
left: 18%;
opacity: 1;
}
}
.index_service_seo_img .seobg .seogoogle {
display: block;
width: 5.625rem;
height: 5.25rem;
object-fit: contain;
position: absolute;
top: 11%;
left: 18%;
}
@keyframes seoiconMove {
0% {
top: 50%;
right: 50%;
opacity: 0;
}
100% {
top: 0;
right: 0;
opacity: 1;
}
}
.index_service_seo_img .seobg .seoicon {
display: block;
width: 8.125rem;
height: 8.75rem;
object-fit: contain;
position: absolute;
top: 0;
right: 0;
}
@keyframes seoyoutubiMove {
0% {
bottom: 50%;
right: 50%;
opacity: 0;
}
100% {
bottom: 0;
right: 20%;
opacity: 1;
}
}
.index_service_seo_img .seobg .seoyoutubi {
display: block;
width: 5.875rem;
height: 5.75rem;
object-fit: contain;
position: absolute;
bottom: 0;
right: 20%;
}
.index_service_seo_img .seobg .seonum {
position: absolute;
bottom: 5%;
left: 9%;
width: 17.125rem;
height: 20.5rem;
}
.index_service_seo_img .seobg .seonum img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.index_service_seo_img .seobg .seonum .seonum_list {
position: absolute;
bottom: 18%;
left: 52%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
}
.index_service_seo_img .seobg .seonum .seonum_list li {
text-align: center;
}
.index_service_seo_img .seobg .seonum .seonum_list li:not(:last-child) {
margin-bottom: 1.25rem;
}
.index_service_seo_img .seobg .seonum .seonum_list li:first-child .num {
font-size: 1.125rem;
color: #0bba91;
}
.index_service_seo_img .seobg .seonum .seonum_list li:last-child .num {
font-size: 1.125rem;
color: #1a1a1a;
}
.index_service_seo_img .dian {
position: absolute;
bottom: 0;
right: 16.875rem;
width: 2rem;
height: 2rem;
background: #000;
border-radius: 100%;
overflow: hidden;
}
.index_service_seo_img .yuan {
position: absolute;
bottom: 2.25rem;
right: 3.375rem;
width: 6.25rem;
height: 6.25rem;
border-radius: 100%;
border: 2px solid #000;
overflow: hidden;
}
.index_service_intellectual_text {
float: right;
width: 39.75%;
padding: 10rem 0 6.25rem;
}
.index_service_intellectual_text .text_content {
width: 100%;
}
.index_service_intellectual_text .text_content h3 {
font-size: 2.25rem;
color: #333;
font-weight: normal;
margin-bottom: 3.625rem;
}
.index_service_intellectual_text .text_content h3 span {
display: inline-block;
font-weight: bold;
font-family: "黑体";
margin-right: 1.25rem;
}
.index_service_intellectual_text .text_content p {
font-size: 1rem;
color: #333;
line-height: 2rem;
margin-bottom: 2.25rem;
}
.index_service_intellectual_text .text_content ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.index_service_intellectual_text .text_content ul li {
display: flex;
flex-direction: column;
align-items: center;
}
.index_service_intellectual_text .text_content ul li img {
display: block;
width: 6rem;
height: 3.75rem;
object-fit: contain;
margin-bottom: 1rem;
}
.index_service_intellectual_text > .index_common_more {
margin: 3.75rem 1rem 0 auto;
}
.index_service_intellectual_img {
position: relative;
float: left;
width: 50%;
height: 37.375rem;
padding-top: 9.75rem;
padding-left: 0.875rem;
}
.index_service_intellectual_img .indexknow {
position: relative;
display: block;
width: 36.375rem;
height: 24.5rem;
object-fit: cover;
z-index: 2;
}
.index_service_intellectual_img .indexknowbg1 {
position: absolute;
top: 0;
right: 3.125rem;
display: block;
width: 17.875rem;
height: 17.875rem;
object-fit: contain;
z-index: 0;
}
.index_service_intellectual_img .indexknowbg2 {
position: absolute;
bottom: 0;
right: 3.75rem;
display: block;
width: 13.875rem;
height: 10.5rem;
object-fit: contain;
z-index: 4;
}
.index_service_intellectual_img .indexknowbg3 {
position: absolute;
top: 1.5rem;
left: -3.5rem;
display: block;
width: 16.75rem;
height: 10.5rem;
object-fit: contain;
z-index: 0;
}
.index_service_marketing_text {
float: left;
width: 42.125%;
padding-top: 6.875rem;
}
.index_service_marketing_text .text_content {
width: 100%;
}
.index_service_marketing_text .text_content h3 {
font-size: 2.25rem;
color: #333;
font-weight: normal;
margin-bottom: 3.625rem;
}
.index_service_marketing_text .text_content h3 span {
display: inline-block;
font-weight: bold;
font-family: "黑体";
margin-right: 1.25rem;
}
.index_service_marketing_text .text_content p {
font-size: 1rem;
color: #666;
line-height: 2rem;
}
.index_service_marketing_text > .index_common_more {
margin-left: 1.25rem;
margin-top: 8.75rem;
}
.index_service_marketing_img {
position: relative;
float: right;
width: 57.875%;
min-height: 51.875rem;
}
.index_service_marketing_img .marketing {
display: block;
width: 50.375rem;
height: 51.875rem;
object-fit: contain;
position: absolute;
top: 0;
right: 2.375rem;
z-index: 2;
}
.index_service_media {
padding-bottom: 5rem;
}
.index_service_media_text {
float: right;
width: 38%;
display: flex;
flex-direction: column;
padding-top: 2rem;
}
.index_service_media_text .text_content {
display: flex;
flex-direction: column;
}
.index_service_media_text .text_content h3 {
position: relative;
font-size: 2.25rem;
color: #333;
font-weight: normal;
margin-bottom: 3.625rem;
line-height: 3.75rem;
padding-right: 6.25rem;
}
.index_service_media_text .text_content h3 span {
display: inline-block;
font-weight: bold;
font-family: "黑体";
margin-right: 1.25rem;
}
.index_service_media_text .text_content p {
font-size: 1rem;
color: #666;
line-height: 2rem;
}
.index_service_media_text > .index_common_more {
margin: 5rem 1rem 0 auto;
}
.index_service_media_img {
position: relative;
float: left;
width: 50%;
}
.index_service_media_img .indexmediabg {
display: block;
width: 37.5rem;
height: 34.875rem;
object-fit: contain;
margin-left: 2.125rem;
}
.index_service_media_img .indexmedia2 {
position: absolute;
top: -7%;
right: 2%;
display: block;
width: 21.625rem;
height: 10.125rem;
object-fit: contain;
}
.index_service_media_img .indexmedia1 {
position: absolute;
bottom: 2%;
left: 2%;
display: block;
width: 21.625rem;
height: 10.125rem;
object-fit: contain;
}
.index_service_media_bottom {
display: flex;
justify-content: center;
margin-top: 3.875rem;
width: 100%;
}
.index_service_media_bottom img {
display: block;
width: 34.375rem;
height: 18.75rem;
object-fit: contain;
}
.index_service_media_bottom img:first-child {
margin-right: 2.125rem;
}
.index_case {
height: 67.5rem;
width: 100%;
background: url("../images/indexcasebg.png") no-repeat center center;
background-size: cover;
padding: 2.625rem 0 3.125rem;
overflow: hidden;
}
.index_case_title {
margin-bottom: 4.375rem;
}
.index_case_title h2 {
position: relative;
font-size: 3rem;
color: #333;
font-weight: normal;
margin-bottom: 2.75rem;
}
.index_case_title h2::after {
content: "";
display: block;
width: 3.125rem;
height: 0.75rem;
background: url("../images/icons/jiantou1.png") no-repeat center center;
background-size: contain;
position: absolute;
top: 50%;
left: 7rem;
transform: translateY(-50%);
}
.index_case_title p {
font-size: 1rem;
color: #333;
line-height: 2rem;
}
.index_case_content {
position: relative;
}
.index_case_content .container {
position: relative;
}
.index_case_content .swiper_bd {
position: relative;
}
.index_case_content_swiper {
position: relative;
width: 100%;
height: 38.75rem;
margin-bottom: 4.375rem;
}
.index_case_content_swiper .swiper-slide {
position: relative;
width: 100%;
height: 100%;
}
.index_case_content_swiper .swiper-slide .swiper_slide_content {
position: relative;
display: flex;
justify-content: flex-end;
}
.index_case_content_swiper .swiper-slide .swiper_slide_content .content_img {
display: block;
width: 95.875%;
height: 38.75rem;
}
.index_case_content_swiper .swiper-slide .swiper_slide_content .content_img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.index_case_content_swiper .swiper-slide .swiper_slide_content .content_text {
width: 100%;
display: flex;
flex-direction: column;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.index_case_content_swiper .swiper-slide .swiper_slide_content .content_text h3 {
position: relative;
width: 34rem;
line-height: 6.25rem;
font-size: 1.875rem;
color: #333;
padding-left: 1rem;
background-color: #fff;
margin-bottom: 2.5rem;
z-index: 9;
}
.index_case_content_swiper .swiper-slide .swiper_slide_content .content_text p {
position: relative;
width: 12.5rem;
line-height: 3.125rem;
font-size: 1.5rem;
text-align: center;
color: #ff5730;
background-color: #fff;
z-index: 9;
}
.index_case_content .swiper-btn {
bottom: -6.375rem;
width: 3.75rem;
height: 3.75rem;
background: #3a4874;
overflow: hidden;
}
.index_case_content .swiper-btn span {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
z-index: 3;
}
.index_case_content .swiper-btn-prev {
left: 4.125%;
transform: translateY(-50%) rotate(180deg);
}
.index_case_content .swiper-btn-next {
left: calc(4.125% + 4.375rem);
}
.index_case_content .swiper-btn:hover {
background-color: #171f38;
}
.index_case_content .swiper-btn:hover span {
color: #fff;
}
.index_case_content .swiper_desc {
position: absolute;
right: 5rem;
bottom: 2.125rem;
display: block;
width: 10rem;
height: 3.75rem;
background-color: #fff;
z-index: 3;
}
.index_case_content .swiper_desc > a {
display: block;
width: 100%;
height: 100%;
line-height: 3.75rem;
text-align: center;
font-size: 0.875rem;
color: #333;
}
.index_case_content .list_num {
position: absolute;
bottom: -2.625rem;
right: 10rem;
display: flex;
}
.index_case_content .list_num li p {
font-size: 1rem;
font-weight: bold;
}
.index_case_content .list_num li.active p {
color: #0a42ce;
}
.index_case_content .allcase {
position: relative;
width: 18.75rem;
height: 5.375rem;
margin: 0 auto;
background-color: #fff;
}
.index_case_content .allcase::after {
position: absolute;
top: 0;
right: 0;
display: block;
width: 7.25rem;
height: 5.375rem;
content: "";
background: url("../images/allcasebg.png") no-repeat top right;
background-size: contain;
z-index: 0;
}
.index_case_content .allcase > a {
position: relative;
display: block;
width: 100%;
height: 100%;
font-size: 1.25rem;
color: #000;
line-height: 5.375rem;
padding-left: 5.125rem;
background: transparent;
z-index: 1;
}
.index_case_content .allcase > a i {
margin-left: 4.75rem;
font-size: 1.25rem;
color: #fff;
}
.index_case_content .allcase:hover > a {
color: #ff5730;
}
.index_partner_list {
width: 100%;
overflow: hidden;
padding-bottom: 2.5rem;
}
.index_partner_list .container {
display: flex;
}
.index_partner_list_swiper {
padding-top: 1.25rem;
overflow: hidden;
}
.index_partner_list_swiper .swiper-wrapper {
transition-timing-function: linear;
}
.index_partner_list_swiper .swiper-wrapper .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}
.index_partner_list_swiper .swiper-wrapper .swiper-slide img {
display: block;
max-height: 13rem;
object-fit: contain;
}
.index_footer {
position: relative;
width: 100%;
height: 40.875rem;
background-color: #3f4041;
}
.index_footer_content {
position: absolute;
top: -11.375rem;
right: 0;
width: 91.67%;
height: 43.125rem;
background-color: #555657;
}
.index_footer_content .content_top {
display: flex;
justify-content: space-between;
}
.index_footer_content .content_top_l {
width: 50%;
padding-top: 8.5rem;
padding-left: 3.5rem;
}
.index_footer_content .content_top_l h3 {
font-size: 3rem;
color: #f9f9f9;
font-weight: normal;
margin-bottom: 4rem;
}
.index_footer_content .content_top_l p {
font-size: 1.25rem;
color: #eaeaea;
line-height: 2.5rem;
}
.index_footer_content .content_top_l span {
display: block;
width: 3.125rem;
height: 0.125rem;
background-color: #fff;
margin: 2.25rem 0 3.125rem;
}
.index_footer_content .content_top_l > a {
display: block;
width: 10rem;
height: 4.375rem;
background-color: #fff;
font-size: 1.25rem;
text-align: center;
line-height: 4.375rem;
color: #333;
}
.index_footer_content .content_top_r {
padding-top: 3.875rem;
padding-right: 10rem;
}
.index_footer_content .content_top_r .logo2 {
display: block;
width: 20.625rem;
height: 6.375rem;
margin-bottom: 3.625rem;
}
.index_footer_content .content_top_r .logo2 img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.index_footer_content .content_top_r .contact {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.index_footer_content .content_top_r .contact p {
font-size: 1rem;
color: #fff;
line-height: 2.5rem;
}
.index_footer_content .content_top_r .contact p span {
font-size: 1.125rem;
}
.index_footer_content .content_link {
margin-top: 7.5rem;
padding-left: 3.5rem;
}
.index_footer_content .content_link ul {
display: flex;
}
.index_footer_content .content_link ul li:not(:last-child) {
margin-right: 4.75rem;
}
.index_footer_content .content_link ul li > a {
font-size: 1rem;
color: #f6f6f6;
}
.index_footer_content .content_link ul li:hover > a {
color: #fff;
}
.index_footer_copyright {
width: 100%;
position: absolute;
bottom: 1.75rem;
margin-top: auto;
}
.index_footer_copyright .container {
display: flex;
justify-content: space-between;
}
.index_footer_copyright .copyright_l {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 3.125rem;
}
.index_footer_copyright .copyright_l p {
font-size: 1rem;
color: #d6d6d6;
}
.index_footer_copyright .copyright_r {
display: flex;
align-items: center;
}
.index_footer_copyright .copyright_r p {
font-size: 1rem;
color: #fff;
margin-right: 0.75rem;
}
.index_footer_copyright .copyright_r span {
display: block;
width: 1.75rem;
height: 1px;
background-color: #8c8c8d;
margin-right: 1.875rem;
}
.index_footer_copyright .copyright_r ul {
display: flex;
}
.index_footer_copyright .copyright_r ul li:not(:last-child) {
margin-right: 1.25rem;
}
.index_footer_copyright .copyright_r ul li a i {
color: #8c8c8d;
font-size: 1.125rem;
}
.index_side {
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
transition: all 0.4s;
z-index: 99;
}
.index_side li {
position: relative;
width: 5.75rem;
height: 5.25rem;
}
.index_side li:not(:last-child) {
margin-bottom: 0.25rem;
}
.index_side li > a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: #011d49;
}
.index_side li > a p {
font-size: 0.625rem;
color: #fff;
text-align: center;
}
.index_side li > a i {
font-size: 1.75rem;
color: #fff;
margin-bottom: 0.25rem;
}
.index_side li > a .icon {
width: 80%;
margin-bottom: 0.5rem;
}
.index_side li > a .icon img {
display: block;
max-width: 100%;
height: auto;
object-fit: contain;
margin: 0 auto;
}
.index_side li.sideToTop > a i {
display: block;
transform: rotate(-90deg);
}
.index_side li.sideToTop > a p {
font-size: 1rem;
}
.index_side li.wechat .downdrop {
display: none;
position: absolute;
top: -1rem;
right: 5.75rem;
width: 7.25rem;
height: 7rem;
}
.index_side li.wechat .downdrop img {
display: block;
width: 100%;
height: 100%;
}
.index_side li.wechat:hover .downdrop {
display: block;
}
.case_content {
padding-bottom: 9.625rem;
}
.case_content_nav {
height: 6.625rem;
}
.case_content_nav .container {
height: 100%;
}
.case_content_nav ul {
display: flex;
align-items: center;
height: 100%;
}
.case_content_nav ul li:not(:last-child) {
margin-right: 7.75rem;
}
.case_content_nav ul li > a {
position: relative;
display: block;
font-size: 1.25rem;
color: #000;
}
.case_content_nav ul li > a::after {
position: absolute;
bottom: -1.625rem;
left: 50%;
transform: translateX(-50%);
display: none;
width: 1.75rem;
height: 0.875rem;
background: url("../images/icons/sanjiao.png") no-repeat center center;
background-size: contain;
content: "";
}
.case_content_nav ul li.active > a,
.case_content_nav ul li:hover > a {
color: #ff5730;
}
.case_content_nav ul li.active > a::after,
.case_content_nav ul li:hover > a::after {
display: block;
}
.case_content_list {
display: flex;
flex-wrap: wrap;
margin-bottom: 2rem;
}
.case_content_list .item {
position: relative;
width: 33.33%;
}
.case_content_list .item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.case_content_list .item:hover {
cursor: pointer;
}
.case_content_list .item:hover figcaption {
z-index: 3;
background-color: rgba(0, 0, 0, 0.6);
}
.case_content_list .itemmore {
width: 100%;
display: none;
flex-wrap: wrap;
}
.case_content_list .itemmore.show {
display: flex;
}
.case_content_list .morebtn {
width: 18.75rem;
height: 5.375rem;
margin: 5.125rem auto 0;
background-color: #171813;
}
.case_content_list .morebtn a {
display: block;
width: 100%;
height: 100%;
line-height: 5.375rem;
padding-left: 5.25rem;
font-size: 1.25rem;
color: #fff;
}
.case_content_list .morebtn a i {
font-size: 1.25rem;
margin-left: 4.75rem;
}
.case_content_list .c4-izmir {
--border-margin: 1.875rem;
--primary-color: rgba(0, 0, 0, 0.7);
--image-opacity: 1;
border-radius: 0;
}
.case_content_list .c4-izmir::before,
.case_content_list .c4-izmir::after {
z-index: 9;
}
.case_content_list .c4-izmir figcaption {
z-index: 3;
background-color: rgba(0, 0, 0, 0);
}
.case_content_list .c4-izmir figcaption .c4-rotate-up-right {
display: flex;
flex-direction: column;
align-items: center;
}
.case_content_list .c4-izmir figcaption .c4-rotate-up-right h3 {
font-size: 2.625rem;
color: #fff;
margin-bottom: 2.375rem;
}
.case_content_list .c4-izmir figcaption .c4-rotate-up-right a i {
font-size: 2rem;
color: #fff;
}
.casesdetail_content_top {
position: relative;
padding: 7rem 0 7.875rem;
}
.casesdetail_content_top .bg {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: url("../images/casesdetailbg.png") no-repeat center center;
background-size: cover;
}
.casesdetail_content_top .container {
display: flex;
}
.casesdetail_content_top_l {
width: 50%;
}
.casesdetail_content_top_l .left_img {
float: left;
width: 31.75%;
height: 15.625rem;
margin-left: 1rem;
margin-top: 2.25rem;
}
.casesdetail_content_top_l .left_img img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.casesdetail_content_top_l .left_text {
float: right;
width: 62.5%;
padding-right: 1.5rem;
}
.casesdetail_content_top_l .left_text h3 {
font-size: 1.5rem;
color: #000;
}
.casesdetail_content_top_l .left_text em {
display: block;
width: 1.125rem;
height: 2px;
background-color: #ff5730;
margin: 0.625rem 0 1rem;
}
.casesdetail_content_top_l .left_text p {
font-size: 1.125rem;
color: #666;
line-height: 2.25rem;
}
.casesdetail_content_top_l .left_text > .sitelink {
display: block;
width: 8.125rem;
height: 3.125rem;
border: 1px solid #bdbdbd;
text-align: center;
line-height: 3.125rem;
font-size: 1rem;
color: #666;
margin-top: 3rem;
}
.casesdetail_content_top_r {
width: 50%;
z-index: 3;
padding: 0 5.125rem;
}
.casesdetail_content_top_r h3 {
font-size: 1.5rem;
color: #000;
}
.casesdetail_content_top_r em {
display: block;
width: 1.125rem;
height: 2px;
background-color: #ff5730;
margin: 0.625rem 0 2.375rem;
}
.casesdetail_content_top_r ul {
display: flex;
flex-wrap: wrap;
}
.casesdetail_content_top_r ul li {
width: 30%;
margin-bottom: 2.75rem;
}
.casesdetail_content_top_r ul li p {
position: relative;
font-size: 1.125rem;
color: #333;
padding-left: 0.875rem;
}
.casesdetail_content_top_r ul li p::before {
content: "";
display: block;
width: 0.25rem;
height: 0.25rem;
background-color: #000;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.casesdetail_content_bd {
padding: 0 0 10.125rem;
}
.casesdetail_content_bd img {
display: block;
max-width: 80%;
margin: 0 auto;
object-fit: contain;
box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.3);
}
.casesdetail_content .shangbiao_content img {
box-shadow: none;
}
.casesdetail_content .advabx {
margin: 2.5rem 0;
padding: 2.5rem 0 5rem;
background-color: #fafafa;
}
.casesdetail_content .advabx .title {
margin-bottom: 3rem;
}
.casesdetail_content .advabx .title h3 {
font-size: 2rem;
color: #333;
text-align: center;
}
.casesdetail_content .advabx .listbx {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 62.5rem;
margin: 0 auto;
}
.casesdetail_content .advabx .listbx > i {
display: block;
width: 32%;
height: 0;
}
.casesdetail_content .advabx .listbx .item {
display: flex;
flex-direction: column;
align-items: center;
width: 28%;
margin-bottom: 2rem;
}
.casesdetail_content .advabx .listbx .item_icon {
width: 6.875rem;
height: 6.875rem;
margin-bottom: 1.25rem;
}
.casesdetail_content .advabx .listbx .item_icon img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.casesdetail_content .advabx .listbx .item_text p {
font-size: 1.125rem;
color: #2b2b2b;
line-height: 1.5em;
text-align: center;
}
.casesdetail_content .yewubx {
padding: 3rem 0;
}
.casesdetail_content .yewubx .title {
margin-bottom: 3rem;
}
.casesdetail_content .yewubx .title h3 {
font-size: 2rem;
color: #333;
text-align: center;
}
.casesdetail_content .yewubx .intro p {
font-size: 1.25rem;
color: #333;
line-height: 1.7em;
text-align: center;
}
.service {
background: url(../images/service.png) no-repeat top left;
background-size: contain;
}
.service_content_title {
float: left;
width: 48%;
padding-left: 3.375rem;
margin-top: 8.5rem;
}
.service_content_title h2 {
position: relative;
font-size: 3rem;
color: #000;
line-height: 3.875rem;
margin-bottom: 2.25rem;
}
.service_content_title h2::before {
position: absolute;
top: 0;
left: -3.375rem;
content: "";
display: block;
width: 2rem;
height: 3.875rem;
background: url("../images/icons/titlebg.png") no-repeat center center;
background-size: cover;
}
.service_content_title p {
font-size: 1.25rem;
color: #333;
line-height: 2.625rem;
}
.service_content_item {
display: block;
position: relative;
width: 48%;
height: 31.25rem;
margin-bottom: 6.25rem;
overflow: hidden;
box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);
}
.service_content_item img {
display: block;
height: 100%;
width: auto;
object-fit: contain;
}
.service_content_item .mask {
display: flex;
flex-direction: column;
align-content: flex-start;
justify-content: center;
position: absolute;
top: 0;
right: 0;
width: 66.3%;
height: 100%;
padding-right: 1.25rem;
padding-left: 7.5rem;
background: url("../images/servicebg.png") no-repeat top right;
background-size: contain;
}
.service_content_item .mask h5 {
font-size: 1rem;
display: inline;
color: #333;
font-weight: normal;
line-height: 1.5rem;
text-decoration: underline;
margin-bottom: 1.5rem;
}
.service_content_item .mask h4 {
font-size: 1.5rem;
color: #000;
margin-bottom: 1.625rem;
}
.service_content_item .mask > p {
font-size: 1rem;
color: #666;
line-height: 2.125rem;
}
.service_content_item .mask > ul {
display: flex;
flex-wrap: wrap;
}
.service_content_item .mask > ul li {
margin-right: 2.125rem;
margin-top: 2rem;
}
.service_content_item .mask > ul li > p {
font-size: 1.125rem;
color: #333;
}
.service_content_item .mask > ul li:nth-child(3n) {
margin-right: 0;
}
.service_content_item .mask .casedesc {
display: block;
width: 2.5rem;
height: 0.75rem;
object-fit: contain;
position: absolute;
bottom: 1.325rem;
right: 1.25rem;
transition: all 0.4s;
}
.service_content_item .mask:hover h5 {
color: #ff5730;
}
.service_content_item .mask:hover .casedesc {
right: 0.5rem;
}
.service_content_item:nth-child(2) {
margin-top: 11.875rem;
}
.service_content_item:nth-child(3) {
margin-top: 7.5rem;
}
.service_content_item:nth-child(7) {
margin-bottom: 17.5rem;
}
.service_content_item:nth-child(even) {
float: right;
}
.service_content_item:nth-child(odd) {
float: left;
}
.service_content .lookservice {
float: left;
position: relative;
width: 18.75rem;
height: 5.375rem;
margin: 0 auto;
background-color: #fff;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}
.service_content .lookservice::after {
position: absolute;
top: 0;
right: 0;
display: block;
width: 7.25rem;
height: 5.375rem;
content: "";
background: url("../images/allcasebg.png") no-repeat top right;
background-size: contain;
z-index: 0;
}
.service_content .lookservice > a {
position: relative;
display: block;
width: 100%;
height: 100%;
color: #000;
font-size: 1.25rem;
line-height: 5.375rem;
padding-left: 5.125rem;
background: transparent;
z-index: 1;
}
.service_content .lookservice > a i {
margin-left: 4.75rem;
font-size: 1.25rem;
color: #fff;
}
.service_content .lookservice:hover > a {
color: #ff5730;
}
.cooperate_content {
padding: 5.25rem 0 7.25rem;
}
.cooperate_content_title {
padding-left: 3.25rem;
padding-bottom: 5rem;
}
.cooperate_content_title h2 {
position: relative;
font-size: 3rem;
color: #000;
line-height: 3.875rem;
margin-bottom: 2.25rem;
}
.cooperate_content_title h2::before {
position: absolute;
top: 0;
left: -3.375rem;
content: "";
display: block;
width: 2rem;
height: 3.875rem;
background: url("../images/icons/titlebg.png") no-repeat center center;
background-size: cover;
}
.cooperate_content_title p {
font-size: 1.25rem;
color: #333;
line-height: 2.625rem;
}
.cooperate_content_title > a {
display: block;
width: 10.5rem;
height: 3.125rem;
text-align: center;
line-height: 3.125rem;
font-size: 1rem;
color: #000;
margin-top: 2rem;
border: 0.25rem solid #000;
}
.cooperate_content_list_swiper {
width: 100%;
}
.cooperate_content_list_swiper .swiper-slide-content {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
}
.cooperate_content_list_swiper .swiper-slide-content .item {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 25%;
min-height: 6.625rem;
margin-bottom: 4rem;
cursor: pointer;
}
.cooperate_content_list_swiper .swiper-slide-content .item_before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.5s;
opacity: 1;
}
.cooperate_content_list_swiper .swiper-slide-content .item_before > img {
display: block;
max-width: 90%;
height: auto;
object-fit: contain;
opacity: 0.5 !important;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
.cooperate_content_list_swiper .swiper-slide-content .item_after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transform: rotateY(180deg);
transition: all 0.5s;
opacity: 0;
}
.cooperate_content_list_swiper .swiper-slide-content .item_after > img {
display: block;
max-width: 90%;
height: auto;
object-fit: contain;
}
.cooperate_content_list_swiper .swiper-slide-content .item:hover .item_before {
opacity: 0;
transform: rotateY(180deg);
}
.cooperate_content_list_swiper .swiper-slide-content .item:hover .item_after {
opacity: 1;
transform: rotateY(0);
}
.cooperate_content_list_swiper .swiper-pagination {
bottom: 0;
}
.cooperate_content_list_swiper .swiper-pagination .swiper-pagination-bullet {
width: 2.5rem;
height: 0.375rem;
margin: 0 0.938rem;
outline: none;
transition: all 0.5s;
background: #bdbdbd;
opacity: 1;
border-radius: 0;
}
.cooperate_content_list_swiper .swiper-pagination .swiper-pagination-bullet-active {
width: 2.5rem;
background: #ff5730;
opacity: 1;
}
.cooperate_content_steps {
padding: 6.25rem 0 3.75rem;
}
.cooperate_content_steps_title {
margin-bottom: 2.5rem;
}
.cooperate_content_steps_title h3 {
font-size: 1.875rem;
color: #333;
margin-bottom: 1.625rem;
text-align: center;
}
.cooperate_content_steps_title p {
font-size: 1.125rem;
color: #666;
text-align: center;
}
.cooperate_content_steps_desc {
position: relative;
width: 100%;
height: auto;
}
.cooperate_content_steps_desc::before {
content: "";
display: block;
width: 1.25rem;
height: 36.625rem;
background: url("../images/cooperatestepbg.png") no-repeat center center;
background-size: contain;
position: absolute;
top: 2.5rem;
left: 50%;
transform: translateX(-50%);
}
.cooperate_content_steps_desc .steps_item {
width: 47%;
margin-top: 4rem;
display: flex;
height: 7.25rem;
align-items: center;
}
.cooperate_content_steps_desc .steps_item_text h4 {
font-size: 1.25rem;
color: #333;
font-weight: normal;
margin-bottom: 1rem;
}
.cooperate_content_steps_desc .steps_item_text p {
font-size: 1.125rem;
color: #666;
}
.cooperate_content_steps_desc .steps_item:first-child {
margin-top: 0;
}
.cooperate_content_steps_desc .steps_item:nth-child(odd) {
float: left;
}
.cooperate_content_steps_desc .steps_item:nth-child(even) {
float: right;
justify-content: flex-end;
}
.cooperate_content_steps_desc .steps_item:nth-child(even) .steps_item_text {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.cooperate_content_diagnosis {
display: flex;
justify-content: space-between;
}
.cooperate_content_diagnosis_img {
width: 50%;
}
.cooperate_content_diagnosis_img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.cooperate_content_diagnosis_text {
display: flex;
flex-direction: column;
justify-content: center;
width: 50%;
padding-left: 2.5rem;
}
.cooperate_content_diagnosis_text h3 {
font-size: 2.125rem;
color: #000;
margin-bottom: 4.125rem;
}
.cooperate_content_diagnosis_text h3 span {
color: #ff5730;
}
.cooperate_content_diagnosis_text p {
font-size: 1.25rem;
color: #666;
margin-bottom: 4.375rem;
}
.cooperate_content_diagnosis_text .btn a {
border-bottom: 1px solid #333;
font-size: 1.125rem;
color: #333;
padding-bottom: 0.25rem;
}
.cooperate_content_diagnosis_text .btn a i {
font-size: 1.25rem;
margin-left: 0.625rem;
}
.cooperate_content_diagnosis_text .btn a:hover {
color: #ff5730;
}
.news {
background-color: #f4f4f4;
}
.news_content {
padding-bottom: 14rem;
}
.news_content_title {
display: flex;
padding-bottom: 4.125rem;
}
.news_content_title .title_content {
width: 50%;
padding-left: 3.25rem;
padding-top: 8.875rem;
}
.news_content_title .title_content h2 {
position: relative;
font-size: 3rem;
color: #000;
line-height: 3.875rem;
margin-bottom: 2.25rem;
}
.news_content_title .title_content h2::before {
position: absolute;
top: 0;
left: -3.375rem;
content: "";
display: block;
width: 2rem;
height: 3.875rem;
background: url("../images/icons/titlebg.png") no-repeat center center;
background-size: cover;
}
.news_content_title .title_content p {
font-size: 1.25rem;
color: #333;
line-height: 2.625rem;
}
.news_content_title .title_img {
position: relative;
width: 50%;
height: 35rem;
overflow: hidden;
}
.news_content_title .title_img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.news_content_title .title_img_desc {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
padding: 0 2.75rem;
flex-direction: column;
justify-content: center;
}
.news_content_title .title_img_desc span {
width: 5rem;
height: 2.25rem;
text-align: center;
line-height: 2.25rem;
font-size: 1.25rem;
color: #000;
background-color: #fff;
border-radius: 1.125rem;
margin-bottom: 2.875rem;
overflow: hidden;
}
.news_content_title .title_img_desc p {
font-size: 1.875rem;
color: #fff;
margin-bottom: 4.125rem;
}
.news_content_title .title_img_desc > a {
position: relative;
font-size: 1.25rem;
color: #fff;
}
.news_content_title .title_img_desc > a::after {
content: "";
display: block;
width: 4.125rem;
height: 0.125rem;
background-color: #fff;
position: absolute;
bottom: -0.75rem;
left: 0;
transform: scale(0);
transition: all 0.4s;
}
.news_content_title .title_img_desc > a:hover::after {
transform: scale(1);
}
.news_content_list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.news_content_list .item {
position: relative;
display: flex;
justify-content: space-between;
width: 49%;
min-height: 12.5rem;
margin-bottom: 3.75rem;
background-color: #fff;
transition: all 0.4s;
}
.news_content_list .item_time {
width: 18.5%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.news_content_list .item_time span {
font-size: 2.25rem;
color: #333;
font-weight: bold;
}
.news_content_list .item_time p {
font-size: 1.25rem;
color: #666;
}
.news_content_list .item_content {
width: 81.5%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding-right: 1.875rem;
}
.news_content_list .item_content h3 {
font-size: 1.5rem;
color: #000;
font-weight: normal;
margin-bottom: 1.25rem;
}
.news_content_list .item_content p {
font-size: 1rem;
color: #666;
line-height: 1.875rem;
margin-bottom: 1.25rem;
}
.news_content_list .item_content > a {
transition: all 0.4s;
}
.news_content_list .item_content > a i {
font-size: 1.875rem;
font-weight: bold;
transition: all 0.4s;
}
.news_content_list .item:hover {
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
}
.news_content_list .item:hover .item_time span,
.news_content_list .item:hover .item_time p {
color: #ff5730;
}
.news_content_list .item:hover .item_content > a {
transform: translateX(0.625rem);
}
.news_content_list .item:hover .item_content > a i {
color: #ff5730;
}
.newsdetail_content_title {
height: 8.5rem;
border-bottom: 1px solid #dbdbdb;
}
.newsdetail_content_title h3 {
font-size: 1.5rem;
color: #333;
text-align: center;
padding-top: 3.5rem;
margin-bottom: 1.5rem;
}
.newsdetail_content_title .time {
position: relative;
display: flex;
justify-content: center;
}
.newsdetail_content_title .time p {
font-size: 0.875rem;
color: #999;
}
.newsdetail_content_title .time p:first-child {
margin-right: 3.125rem;
}
.newsdetail_content_title .time .return {
position: absolute;
top: 0;
right: 0;
font-size: 0.875rem;
color: #999;
}
.newsdetail_content_title .time .return:hover {
color: #ff5730;
}
.newsdetail_content_bd {
padding: 4rem 0 15.875rem;
}
.newsdetail_content_bd p {
font-size: 1.125rem;
color: #666;
line-height: 2.5rem;
text-indent: 2em;
}
.newsdetail_content_bd p img {
display: block;
max-width: 90%;
height: auto;
margin: 0 auto;
object-fit: contain;
}
.newsdetail_content_bd h4 {
font-size: 1.125rem;
color: #666;
font-weight: normal;
margin-bottom: 1.375rem;
}
.contactus {
background: #f7f7f7;
}
.contactus_content_top {
display: flex;
padding-top: 7rem;
}
.contactus_content_top .top_text {
position: relative;
width: 50%;
}
.contactus_content_top .top_text_desc {
position: relative;
background-color: #f7f7f7;
padding: 0 1.5rem 6.875rem 0.875rem;
box-shadow: -2px 8px 10px 0px rgba(0, 0, 0, 0.02);
z-index: 3;
}
.contactus_content_top .top_text_desc h3 {
font-size: 2rem;
color: #000;
margin-bottom: 2.75rem;
}
.contactus_content_top .top_text_desc p {
font-size: 1rem;
color: #333;
line-height: 2.25rem;
}
.contactus_content_top .top_text_desc::after {
position: absolute;
bottom: 0;
right: 0;
content: "";
display: block;
width: 6.875rem;
height: 4.875rem;
background: url("../images/contactbg1.png") no-repeat center center;
background-size: contain;
}
.contactus_content_top .top_text::after {
content: "";
display: block;
width: 39.375rem;
height: 7.125rem;
background: url("../images/contactbg2.png") no-repeat center center;
background-size: contain;
position: absolute;
bottom: 2rem;
left: -10rem;
}
.contactus_content_top .top_img {
width: 50%;
height: 43.75rem;
overflow: hidden;
}
.contactus_content_top .top_img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.contactus_content_bd {
padding: 8.875rem 0 6.25rem;
}
.contactus_content_bd ul {
display: flex;
justify-content: space-between;
margin-bottom: 10.875rem;
}
.contactus_content_bd ul li {
display: flex;
align-items: center;
}
.contactus_content_bd ul li i {
font-size: 5rem;
margin-right: 1.625rem;
color: #333;
}
.contactus_content_bd ul li .item {
display: flex;
flex-direction: column;
}
.contactus_content_bd ul li .item span {
font-size: 1.5rem;
color: #666;
margin-bottom: 1.625rem;
}
.contactus_content_bd ul li .item p {
font-size: 1.5rem;
color: #333;
}
.contactus_content_bd ul li .item a {
font-size: 1.5rem;
color: #333;
}
.contactus_content_bd ul li .item a:hover {
color: #ff5730;
}
.contactus_content_bd .erweima {
display: flex;
flex-direction: column;
align-items: center;
}
.contactus_content_bd .erweima h3 {
font-size: 2rem;
color: #333;
font-weight: normal;
margin-bottom: 1rem;
}
.contactus_content_bd .erweima img {
display: block;
height: 18.75rem;
width: 18.75rem;
object-fit: contain;
}
.contactus_content_bd .erweima p {
font-size: 1.5rem;
color: #666;
line-height: 2.875rem;
}
.loadpage .common_header h2 {
font-size: 2.25rem;
color: #000;
text-align: center;
font-weight: 300;
}
.loadpage_why {
padding: 5rem 0 0;
}
.loadpage_why .common_header {
margin-bottom: 2.125rem;
}
.loadpage_why_content {
margin-bottom: 2.75rem;
}
.loadpage_why_content .container {
display: flex;
justify-content: space-between;
align-content: center;
}
.loadpage_why_content .textbx {
width: 50%;
padding-left: 1.5rem;
}
.loadpage_why_content .textbx .title {
margin-bottom: 2.5rem;
}
.loadpage_why_content .textbx .title h3 {
font-size: 2.25rem;
color: #000;
font-weight: 400;
margin-bottom: 1.5rem;
}
.loadpage_why_content .textbx .title h4 {
font-size: 1.5rem;
font-weight: 300;
line-height: 1.5em;
color: #000;
}
.loadpage_why_content .textbx .title em {
display: block;
width: 1.875rem;
height: 0.25rem;
background-color: #ccc;
margin-top: 0.75rem;
}
.loadpage_why_content .textbx .bdbx p {
font-size: 1rem;
color: #000;
font-weight: 300;
line-height: 2.5rem;
}
.loadpage_why_content .imgbx {
width: 50%;
height: auto;
}
.loadpage_why_content .imgbx img {
display: block;
width: 82.5%;
height: auto;
object-fit: contain;
margin: 0 auto;
}
.loadpage_why_list {
width: 100%;
height: 11rem;
background-color: #f6fafd;
}
.loadpage_why_list .container {
display: flex;
align-items: center;
height: 100%;
}
.loadpage_why_list .item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.loadpage_why_list .item_icon {
width: auto;
height: 4rem;
margin-right: 1.75rem;
}
.loadpage_why_list .item_icon img {
display: block;
width: auto;
height: 100%;
object-fit: contain;
}
.loadpage_why_list .item_text .num {
margin-bottom: 0.625rem;
}
.loadpage_why_list .item_text .num p {
font-size: 2.25rem;
color: #2660ff;
}
.loadpage_why_list .item_text .num p span {
font-size: 1rem;
}
.loadpage_why_list .item_text > p {
font-size: 1rem;
color: #000;
}
.loadpage_project {
padding: 5rem 0;
background: #f5f5f5;
}
.loadpage_project .common_header {
margin-bottom: 4.5rem;
}
.loadpage_project .bdbx {
display: flex;
justify-content: space-between;
}
.loadpage_project .bdbx .webbx {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 45%;
height: 37.5rem;
overflow: hidden;
background: #3984ff;
transition: all 0.6s;
}
.loadpage_project .bdbx .webbx:hover {
background: #fff;
}
.loadpage_project .bdbx .webbx:hover .textbx .title h3,
.loadpage_project .bdbx .webbx:hover .textbx .title h4 {
color: #3984ff;
}
.loadpage_project .bdbx .webbx:hover .textbx .icon .img1 {
opacity: 0;
}
.loadpage_project .bdbx .webbx:hover .textbx .icon .img2 {
opacity: 1;
}
.loadpage_project .bdbx .webbx:hover .desc {
opacity: 0;
}
.loadpage_project .bdbx .webbx:hover .bottombx span {
color: #3984ff;
left: 1.5rem;
}
.loadpage_project .bdbx .webbx:hover .mask {
opacity: 1;
}
.loadpage_project .bdbx .webbx .textbx {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 3.125rem 1.25rem 0 2.5rem;
}
.loadpage_project .bdbx .webbx .textbx .title h3 {
font-size: 1.5rem;
color: #fff;
font-weight: 400;
margin-bottom: 0.625rem;
}
.loadpage_project .bdbx .webbx .textbx .title h4 {
font-size: 1.5rem;
color: #fff;
font-weight: 300;
}
.loadpage_project .bdbx .webbx .textbx .icon {
position: relative;
width: 5.5625rem;
height: 4.75rem;
}
.loadpage_project .bdbx .webbx .textbx .icon img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0;
}
.loadpage_project .bdbx .webbx .textbx .icon .img1 {
opacity: 1;
}
.loadpage_project .bdbx .webbx .textbx .icon .img2 {
opacity: 0;
}
.loadpage_project .bdbx .webbx .bottombx {
display: flex;
justify-content: space-between;
padding: 0 4rem 0 1rem;
transition: all 0.4s;
}
.loadpage_project .bdbx .webbx .bottombx span {
position: relative;
left: 0;
transform: translateY(46%);
font-size: 10rem;
line-height: 10rem;
color: #fff;
font-weight: 700;
transition: all 0.4s;
}
.loadpage_project .bdbx .webbx .bottombx .btnbx {
display: flex;
justify-content: center;
align-items: center;
width: 2.75rem;
height: 2.75rem;
margin-top: 3rem;
border: 1px solid #fff;
border-radius: 50%;
}
.loadpage_project .bdbx .webbx .bottombx .btnbx i {
font-size: 1.5rem;
color: #fff;
}
.loadpage_project .bdbx .webbx .desc {
position: absolute;
top: 36%;
left: 0;
right: 0;
width: 100%;
padding: 0 12% 0 2.5rem;
z-index: 1;
opacity: 1;
transition: all 0.4s;
}
.loadpage_project .bdbx .webbx .desc p {
font-size: 1rem;
color: #fff;
line-height: 2rem;
font-weight: 300;
}
.loadpage_project .bdbx .webbx .mask {
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
width: 100%;
height: 100%;
padding-left: 15%;
padding-right: 18%;
background: transparent;
z-index: 2;
opacity: 0;
transition: all 0.4s;
}
.loadpage_project .bdbx .webbx .mask .links {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.loadpage_project .bdbx .webbx .mask .links a {
display: block;
height: 2.5rem;
font-size: 1.25rem;
color: #333;
line-height: 2.5rem;
padding: 0 1.5rem;
margin-right: 0.875rem;
margin-bottom: 0.875rem;
border: 1px solid #3984ff;
box-sizing: border-box;
transition: all 0.4s;
}
.loadpage_project .bdbx .webbx .mask .links a:hover {
background: #3984ff;
color: #fff;
}
.loadpage_project .bdbx .webbx .mask .links a:nth-child(4) {
height: 4.25rem;
font-size: 1.875rem;
color: #fff;
font-weight: 500;
padding: 0 6rem 0 1.125rem;
line-height: 4.25rem;
background: #3984ff;
}
.loadpage_project .bdbx .webbx .mask .links a:nth-child(4):hover {
background: #fff;
color: #3984ff;
}
.loadpage_project .bdbx .rightbx {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 55%;
padding-left: 1.25rem;
}
.loadpage_project .bdbx .rightbx .item {
position: relative;
width: 49%;
height: 18.125rem;
overflow: hidden;
}
.loadpage_project .bdbx .rightbx .item:hover .bottombx span {
left: 1.5rem;
}
.loadpage_project .bdbx .rightbx .item:hover .bottombx .btnbx {
background: #fff;
}
.loadpage_project .bdbx .rightbx .item:hover .bottombx .btnbx i {
color: #3984ff;
}
.loadpage_project .bdbx .rightbx .item .textbx {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 3.125rem 1.25rem 0 2.5rem;
}
.loadpage_project .bdbx .rightbx .item .textbx .title h3 {
font-size: 1.5rem;
color: #fff;
font-weight: 400;
margin-bottom: 0.625rem;
}
.loadpage_project .bdbx .rightbx .item .textbx .title h4 {
font-size: 1.5rem;
color: #fff;
font-weight: 300;
}
.loadpage_project .bdbx .rightbx .item .textbx .icon {
position: relative;
}
.loadpage_project .bdbx .rightbx .item .textbx .icon img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0;
}
.loadpage_project .bdbx .rightbx .item .textbx .icon .img1 {
opacity: 1;
}
.loadpage_project .bdbx .rightbx .item .textbx .icon .img2 {
opacity: 0;
}
.loadpage_project .bdbx .rightbx .item .bottombx {
display: flex;
justify-content: space-between;
padding: 0 1.375rem 0 0.5rem;
transition: all 0.4s;
}
.loadpage_project .bdbx .rightbx .item .bottombx span {
position: relative;
left: 0;
transform: translateY(46%);
font-size: 10rem;
line-height: 10rem;
color: #fff;
font-weight: 700;
transition: all 0.4s;
}
.loadpage_project .bdbx .rightbx .item .bottombx .btnbx {
display: flex;
justify-content: center;
align-items: center;
width: 2.75rem;
height: 2.75rem;
margin-top: 6rem;
border: 1px solid #fff;
border-radius: 50%;
transition: all 0.4s;
}
.loadpage_project .bdbx .rightbx .item .bottombx .btnbx i {
font-size: 1.5rem;
color: #fff;
transition: all 0.4s;
}
.loadpage_project .bdbx .rightbx .item:first-child,
.loadpage_project .bdbx .rightbx .item:nth-child(2) {
margin-bottom: 1.25rem;
}
.loadpage_project .bdbx .rightbx .item:first-child {
background: #f46301;
}
.loadpage_project .bdbx .rightbx .item:first-child .textbx .icon {
width: 3.625rem;
height: 3.8125rem;
}
.loadpage_project .bdbx .rightbx .item:nth-child(2) {
background: #fdb200;
}
.loadpage_project .bdbx .rightbx .item:nth-child(2) .textbx .icon {
width: 3.5rem;
height: 3.875rem;
}
.loadpage_project .bdbx .rightbx .item:nth-child(3) {
background: #2344a7;
}
.loadpage_project .bdbx .rightbx .item:nth-child(3) .textbx .icon {
width: 3.6875rem;
height: 3.8125rem;
}
.loadpage_project .bdbx .rightbx .item:nth-child(4) {
background: #2b52d3;
}
.loadpage_project .bdbx .rightbx .item:nth-child(4) .textbx .icon {
width: 3.3125rem;
height: 3.75rem;
}
.loadpage_adva {
padding: 2.5rem 0 0;
background: #f5f5f5;
}
.loadpage_adva .common_header {
margin-bottom: 3.625rem;
}
.loadpage_adva .bdbx {
padding: 4rem 0 5rem;
background: url("../images/loadpage-advabg.jpg") no-repeat center center;
background-size: cover;
}
.loadpage_adva .bdbx .container {
display: flex;
justify-content: space-between;
}
.loadpage_adva .bdbx .item {
width: 24.375%;
padding: 3.125rem 0.75rem 2rem;
background: #fff;
}
.loadpage_adva .bdbx .item_img {
width: 100%;
height: 12.5rem;
margin-bottom: 2rem;
}
.loadpage_adva .bdbx .item_img img {
display: block;
max-width: 100%;
height: 100%;
object-fit: contain;
margin: 0 auto;
}
.loadpage_adva .bdbx .item_text h4 {
font-size: 1.25rem;
color: #000;
font-weight: 400;
text-align: center;
margin-bottom: 1.875rem;
}
.loadpage_adva .bdbx .item_text .desc p {
font-size: 1rem;
color: #000;
font-weight: 300;
line-height: 2rem;
}
.loadpage_cases {
padding: 5rem 0;
background: #f5f5f5;
}
.loadpage_cases .common_header {
margin-bottom: 4.25rem;
}
.loadpage_cases .listbx {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.loadpage_cases .listbx > i {
display: block;
width: 24.375%;
}
.loadpage_cases .listbx .item {
position: relative;
width: 24.375%;
margin-bottom: 1.75rem;
}
.loadpage_cases .listbx .item_img {
position: relative;
width: 100%;
overflow: hidden;
}
.loadpage_cases .listbx .item_img:hover img {
transform: scale(1.1);
}
.loadpage_cases .listbx .item_img img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
transition: all 0.4s;
}
.loadpage_cases .listbx .item_text {
border: 1px solid #ededed;
border-top: 0;
padding-left: 1rem;
}
.loadpage_cases .listbx .item_text h4 {
font-size: 1.25rem;
color: #000;
font-weight: 300;
line-height: 3.125rem;
border-bottom: 1px solid #ededed;
}
.loadpage_cases .listbx .item_text .typebx {
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 1rem;
}
.loadpage_cases .listbx .item_text .typebx p {
font-size: 1rem;
color: #000;
font-weight: 300;
line-height: 2.5rem;
}
.loadpage_cases .listbx .item_text .typebx > i {
font-size: 1.5rem;
color: #000;
}