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; } }