html,
body {
position: relative;
height: 100vh;
overflow: hidden;
}
.swiper-container {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.swiper-pagination {
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-column-gap: 0.8rem;
-moz-column-gap: 0.8rem;
column-gap: 0.8rem;
}
.swiper-pagination-bullet {
position: relative;
width: 1.125rem;
height: 1.125rem;
background: url(../img/dot.png) no-repeat left top/cover;
opacity: 1;
}
.swiper-pagination-bullet-active {
background: url(../img/dot-active2.png) no-repeat left top/cover;
}
.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
right: 3.125rem;
}
.swiper-pagination-bullet-hover {
display: none;
}
.swiper-pagination-bullet:hover .swiper-pagination-bullet-hover {
position: absolute;
display: block;
right: 1.125rem;
top: 50%;
margin-top: -1.125rem;
color: #fff;
margin-right: 4px;
width: 100px;
line-height: 2.25rem;
background: rgba(0, 0, 0, 0.5);
text-align: center;
}
.swiper-pagination-bullet:hover .popper__arrow__right {
display: block;
}
.viewport-black .swiper-pagination-bullet-active {
background: url(../img/dot-active.png) no-repeat left top/cover;
}
/************************************************************************************************/
.bannar-box-img {
width: 100%;
height: 100vh;
vertical-align: top;
-o-object-fit: cover;
object-fit: cover;
}
/************************************************************************************************/
.service-box {
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
padding: 6.75rem;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
background: #f3f3f3;
}
.service-list {
-webkit-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 1.25rem;
/* height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; */
position: relative;
-o-background-size: cover !important;
background-size: cover !important;
/* opacity: 0.2; */
}
.service-bg {
width: 100%;
height: 100%;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.service-list img {
width: 7.5rem;
}
.service-list h2 {
font-size: 1.625rem;
color: #104691;
line-height: 2.875rem;
padding-top: 2.875rem;
}
.service-list h3 {
font-size: 0.75rem;
color: #104691;
line-height: 2.375rem;
/* padding-top: 20px; */
}
.service-list p {
padding: 0 1.25rem;
line-height: 1.75rem;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
color: #104691;
}
.service-list:hover .service-bg {
background-color: rgba(255, 255, 255, 0.8);
}
.service-list:hover .service-detail-box,
.service-list:hover h2,
.service-list:hover h3,
.service-list:hover img {
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
}
.service-detail-box {
height: 0;
min-height: 0;
max-height: 0;
overflow: hidden;
overflow-wrap: break-word;
}
.service-list:hover .service-detail-box {
height: auto;
min-height: 8.75rem;
max-height: 1000px;
}
.swiper-slide:nth-child(1) > .service-list {
background: url(../img/serbg01.jpg) no-repeat left top;
}
.swiper-slide:nth-child(2) > .service-list {
background: url(../img/serbg03.jpg) no-repeat left top;
}
.swiper-slide:nth-child(3) > .service-list {
background: url(../img/serbg02.jpg) no-repeat left top;
}
.swiper-slide:nth-child(4) > .service-list {
background: url(../img/serbg04.jpg) no-repeat left top;
}
.swiper-slide:nth-child(1) > .service-list:hover {
background: url(../img/serbg01-hover.jpg) no-repeat left top;
}
.swiper-slide:nth-child(2) > .service-list:hover {
background: url(../img/serbg03-hover.jpg) no-repeat left top;
}
.swiper-slide:nth-child(3) > .service-list:hover {
background: url(../img/serbg02-hover.jpg) no-repeat left top;
}
.swiper-slide:nth-child(4) > .service-list:hover {
background: url(../img/serbg04-hover.jpg) no-repeat left top;
}
/************************************************************************************************/
.hzhb-box {
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 100%;
padding: 6.75rem;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #f3f3f3;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.hzhb-box-tit {
z-index: 3;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-start;
-moz-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 16rem;
height: 55%;
position: relative;
}
.hzhb-box-tit h2 {
font-size: 2.125rem;
color: #0245a3;
}
.hzhb-box-tit h3 {
font-size: 1rem;
font-weight: 400;
color: #999;
}
.hzhb-box-tit .hzhb-more {
border: 1px solid #0245A3;
color: #0245A3;
}
.hzhb-list-box-scroll {
-webkit-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
flex: 1;
height: 35rem;
overflow: hidden;
position: relative;
}
.hzhb-list-box-wrap {
position: absolute;
left: 0;
top: 0;
right: -18px;
-webkit-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
flex: 1;
max-height: 35rem;
overflow-y: auto;
}
.hzhb-list-box {
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 1.25rem;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
/* align-content: center; */
}
.hzhb-list {
width: 21.125rem;
height: 7.5rem;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
/* border: 1px solid #dddddd; */
}
.hzhb-list img {
width: 100%;
height: 100%;
}
/************************************************************************************************/
.lxwm-box {
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 100%;
padding: 6.75rem;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(../img/ad-bg.jpg) no-repeat bottom left/cover;
}
.lxwm-form {
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
/* align-items: center; */
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
}
.lxwm-form-control:after {
content: "";
display: block;
width: 0;
height: 1px;
margin: 0 auto;
background-color: rgba(255, 255, 255, 0.3);
}
/************************************************************************************************/
.xwzx-box {
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 100%;
padding: 0 6.75rem;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(../img/pagebg.jpg) no-repeat bottom left/cover;
}
.xwzx-box .hzhb-box-tit {
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-start;
-moz-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
width: 16rem;
position: relative;
height: 55%;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.xwzx-box .hzhb-box-tit h2 {
color: #fff;
}
.xwzx-box .hzhb-box-tit h3 {
color: #fff;
}
.xwzx-img-box {
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
width: 38.75rem;
/* height: 21.25rem; */
/* border: 6px solid #f8f8f8; */
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #fff;
margin-right: 3.125rem;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.xwzx-img-box img {
width: 100%;
border: 6px solid #f8f8f8;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 21.25rem;
-o-object-fit: cover;
object-fit: cover;
}
.xwzx-img-box:hover img {
opacity: 0.8;
-o-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.xwzx-img-box h2 {
font-size: 1.25rem;
padding: 1.875rem 0;
color: #fff;
}
p.number {
font-size: 1.875rem;
font-family: Akzidenz-Grotesk BQ Condensed;
font-weight: bold;
color: #ffffff;
padding: 1.75rem 0;
}
.xwzx-list-box {
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
color: #fff;
}
.xwzx-list {
padding: 0.75rem 2rem 0.75rem 0.75rem;
background-color: rgba(255, 255, 255, 0.07);
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 0.5rem;
position: relative;
}
.xwzx-list:last-child {
margin-bottom: 0;
}
.xwzx-list:hover {
background-color: #fff;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.xwzx-list:hover h2 {
color: #0245a3;
}
.xwzx-list:hover .xwzx-detail {
color: rgba(2, 69, 163, 0.7);
}
.xwzx-list:hover .time {
color: rgba(2, 69, 163, 0.4);
}
.xwzx-list img {
width: 18.75rem;
height: 10.25rem;
}
.xwzx-hot {
width: 3rem;
height: 1.5rem;
background: #4289E8;
font-size: .875rem;
color: #FFFFFF;
line-height: 1.5rem;
text-align: center;
position: absolute;
top: 0;
right: 0;
}
.xwzx-more {
width: 7.5rem;
height: 3.125rem;
background: rgba(204, 204, 204, 0);
border: 1px solid #ffffff;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 0.875rem;
color: #fff;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
bottom: 0;
cursor: pointer;
}
.xwzx-more span {
padding-left: .5rem;
}
.xwzx-more img {
padding-left: 8px;
}
.xwzx-more:hover {
background: #fff;
color: #0245a3;
}
.xwzx-list-msg h2 {
/* color: #0245A3; */
font-size: 1rem;
padding-top: 1.25rem;
color: #fff;
width:22rem;
}
.xwzx-detail-box {
height: 3rem;
overflow: hidden;
overflow-wrap: break-word;
}
.xwzx-detail {
position: relative;
line-height: 1.5rem;
font-size: 0.875rem;
}
.xwzx-list-msg {
margin-left: 1.25rem;
}
.xwzx-list-msg .xwzx-detail {
color: rgba(255, 255, 255, 0.7);
}
.xwzx-list-msg h2 {
padding-bottom: 1.25rem;
}
.xwzx-list-msg p {
line-height: 1.5rem;
font-size: 0.875rem;
margin-top: 1.25rem;
color: rgba(255, 255, 255, 0.7);
}
.xwzx-img-box p {
padding-top: 1rem;
font-size: 0.875rem;
line-height: 1.5rem;
}
.xwzx-img-box p.number {
font-size: 1.875rem;
padding: 2rem 0 1.75rem 0;
position: relative;
}
.xwzx-img-box p.number::after {
content: ' ';
height: 1px;
background-color: #fff;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
.xwzx-list-msg .time {
line-height: 1.5rem;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.4);
}
.lxwm-box {
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
}
.lxwm-form {
width: 25rem;
}
.lxwm-map {
width: 38.0625rem;
height: 37.5rem;
}
.lxwm-form-control {
width: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.lxwm-form-control h2 {
font-size: 1.25rem;
padding-bottom: 1.625rem;
color: #fff;
}
.lxwm-form-control input,
.lxwm-form-control textarea {
background: transparent;
border: none;
padding: 1.25rem 0;
display: block;
}
.lxwm-box .xwzx-more {
position: relative;
margin-top: 3.125rem;
display: inline-block;
text-align: center;
line-height: 3.125rem;
}
.lxwm-box .error-box {
display: inline-block;
font-size: 0.875rem;
color: #ff7123;
padding-left: 30px;
}
.lxwm-msg .lxwm-msg-img {
width: 22.0625rem;
height: 2.625rem;
display: block;
padding-bottom: 2.1875rem;
}
.lxwm-msg {
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
color: #fff;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.lxwm-msg p {
font-size: 0.875rem;
padding-top: 1.5rem;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.lxwm-msg .number {
font-size: 2rem;
font-family: Akzidenz-Grotesk BQ Extra Conde;
font-weight: bold;
color: #ffffff;
padding-bottom: 2.5rem;
}
.lxwm-msg p img {
width: 1.25rem;
height: 1.25rem;
padding-right: 4px;
}
@media screen and (max-width: 817px) {
.footer-m p {
display: none;
}
.xwzx-box .hzhb-box-tit, .hzhb-box-tit {
order: 1;
bottom: 0;
height: 4rem;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
.xwzx-box .hzhb-box-tit h2,
.xwzx-box .hzhb-box-tit h3, .hzhb-box-tit h2,
.hzhb-box-tit h3 {
display: none;
}
.xwzx-box {
padding: 0 2rem;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding-top: 6rem;
padding-bottom: 5rem;
}
.xwzx-img-box {
width: 100%;
margin-right: 0;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: auto;
padding-bottom: 1rem;
flex: 1;
}
.xwzx-img-box img {
height: auto;
}
.xwzx-img-box h2 {
padding: 0.5rem 0;
}
.xwzx-img-box p.number {
padding: 0;
font-size: .875rem;
}
.xwzx-img-box p.number::after {
display: none;
}
.xwzx-list-box {
width: 100%;
flex: 2;
justify-content: space-evenly;
}
.xwzx-list {
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 2px;
}
.xwzx-list img {
width: 30%;
height: auto;
}
.xwzx-list-msg {
-webkit-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden;
}
.xwzx-list-msg h2 {
padding-bottom: 0.5rem;
padding-top: 0.5rem;
}
.xwzx-list-msg p {
margin-top: 0.2rem;
}
.hzhb-box {
padding: 6.75rem 0 5rem 0;
flex-direction: column;
}
.hzhb-list-box-scroll {
-webkit-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
flex: 1;
height: auto;
overflow: visible;
position: relative;
padding-top: 0;
overflow: hidden;
display: flex;
align-items: center;
}
.hzhb-list-box-wrap {
position: relative;
left: 0;
top: 0;
right: 0;
-webkit-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
flex: 1;
max-height: 100%;
overflow-y: visible;
}
.hzhb-list-box {
gap: 0;
-webkit-justify-content: space-evenly;
-moz-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
}
.hzhb-list {
width: 45%;
height: auto;
margin-bottom: 1rem;
}
.service-box {
padding: 6.75rem 1rem 5rem 1rem;
}
.index-gywm-swiper .swiper-slide-active .service-list .service-bg {
background-color: rgba(255, 255, 255, 0.8);
}
.index-gywm-swiper .swiper-slide-active .service-list .service-detail-box,
.index-gywm-swiper .swiper-slide-active .service-list h2,
.index-gywm-swiper .swiper-slide-active .service-list h3,
.index-gywm-swiper .swiper-slide-active .service-list img {
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
}
.index-gywm-swiper .swiper-slide-active .service-list .service-detail-box {
height: auto;
min-height: 8.75rem;
max-height: 1000px;
}
.swiper-slide:nth-child(1).swiper-slide-active > .service-list {
background: url(../img/serbg01-hover.jpg) no-repeat left top;
}
.swiper-slide:nth-child(2).swiper-slide-active > .service-list {
background: url(../img/serbg03-hover.jpg) no-repeat left top;
}
.swiper-slide:nth-child(3).swiper-slide-active > .service-list {
background: url(../img/serbg02-hover.jpg) no-repeat left top;
}
.swiper-slide:nth-child(4).swiper-slide-active > .service-list {
background: url(../img/serbg04-hover.jpg) no-repeat left top;
}
.swiper-pagination {
display: none !important;
}
.lxwm-box {
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 6.75rem 1rem 5rem 1rem;
}
.lxwm-box .hzhb-box-tit {
display: none;
}
.lxwm-box form {
flex: 1;
width: 100%;
}
.lxwm-box .lxwm-form {
width: 100%;
}
.lxwm-box .xwzx-more {
margin-top: 1rem;
}
.lxwm-map {
flex: 1;
height: 20rem;
width: 100%;
}
.lxwm-map img {
width: 100%;
height: 100%;
object-fit: cover;
}
.lxwm-msg {
flex: 1;
padding-top: 1rem;
width: 100%;
}
.lxwm-msg p {
padding-top: 0;
line-height: 150%;
}
.lxwm-msg .lxwm-msg-img {
padding-bottom: .75rem;
}
.lxwm-msg .number {
padding-bottom: 1rem;
font-size: 1rem;
}
}
@media screen and (max-height: 799px) and (max-width: 817px) {
.xwzx-img-box img {
height: -webkit-calc(100vh / 4.5);
height: -moz-calc(100vh / 4.5);
height: calc(100vh / 4.5);
}
.xwzx-img-box h2 {
padding: 4px 0;
}
.xwzx-detail-box {
height: 1.5rem;
}
.xwzx-img-box p.number {
padding: 0;
font-size: .875rem;
}
.lxwm-form-control h2 {
padding-bottom: 10px;
}
.lxwm-form-control input,
.lxwm-form-control textarea {
padding: 0.5rem 0;
}
.lxwm-map {
height: 12rem;
}
}
@media screen and (max-height: 620px) and (max-width: 817px) {
.xwzx-img-box img {
height: auto;
}
.xwzx-list:last-child {
display: none;
}
}
@media screen and (max-height: 590px) and (max-width: 817px) {
.xwzx-img-box img {
height: -webkit-calc(100vh / 4.5);
height: -moz-calc(100vh / 4.5);
height: calc(100vh / 4.5);
}
.xwzx-list:last-child {
display: none;
}
.lxwm-map {
height: auto;
position: absolute;
}
.lxwm-msg {
margin-top: 8rem;
}
}