:root { --max-width: 1440px; } * { padding: 0; margin: 0; box-sizing: border-box; } html, body { width: 100%; overflow-x: hidden; } a { color: inherit; text-decoration: none; } ul, li, ol { list-style: none; } .clearfix { zoom: 1; } .mobile-header { width: 100%; height: 72px; background: #ffffff; } .mobile-header .main { height: 100%; padding-inline: 20px; display: flex; align-items: center; justify-content: space-between; } .mobile-header .main .mobile-logo { width: auto; } .mobile-header .main .mobile-logo img { display: block; width: 100%; } .mobile-header .main .mobile-menu { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; } .mobile-header .main .mobile-menu .btn { position: relative; width: 35px; height: 3px; background: #e1e0e0; } .mobile-header .main .mobile-menu .btn::after { content: ""; position: absolute; left: 0; top: -8px; width: 35px; height: 3px; background: #e1e0e0; } .mobile-header .main .mobile-menu .btn::before { content: ""; position: absolute; left: 0; bottom: -8px; width: 35px; height: 3px; background: #e1e0e0; } .mobile-nav { position: fixed; z-index: 9999; top: 0; left: 0; width: 0; height: 0; } .mobile-nav .main { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 1; display: none; } .mobile-nav .list { position: fixed; top: 0; right: -57vw; padding-top: 20px; width: 57vw; height: 100%; background: #fff; z-index: 2; } .mobile-nav .list .clear { height: 26px; margin-right: 20px; margin-bottom: 32px; } .mobile-nav .list .clear img { display: block; float: right; width: 26px; } .mobile-nav .list .item { width: 100%; height: 50px; line-height: 50px; padding-left: 20px; font-size: 16px; color: #000000; } .mobile-nav .list .item a { display: flex; align-items: center; justify-content: flex-start; width: 100%; font-size: 16px; font-weight: 700; } .mobile-nav .list .item a img { display: block; width: 23px; margin-right: 21px; } .mobile-nav .list .item.active, .mobile-nav .list .item:hover { color: #00479c; } .foot-detail { background: url("/skin/images/m-foot-bg.png") no-repeat center; background-size: cover; margin-top: -13.3333333333vw; } .foot-detail .main { padding-top: 19.7333333333vw; padding-inline: 20px; } .foot-detail .foot-nav { display: flex; align-items: center; justify-content: space-between; padding: 4vw 0; } .foot-detail .foot-nav .item { display: block; width: fit-content; color: #ffffff; font-size: 1.8666666667vw; } .foot-detail .info { display: flex; align-items: center; justify-content: space-between; padding: 2.6666666667vw 0; border-top: #d8d8d8 1px solid; border-bottom: #d8d8d8 1px solid; } .foot-detail .info .separate { text-align: center; width: 20%; color: #ffffff; font-size: 1.8666666667vw; flex-shrink: 0; } .foot-detail .info .address, .foot-detail .info .phone, .foot-detail .info .email { display: flex; align-items: center; justify-content: center; } .foot-detail .info .address img, .foot-detail .info .phone img, .foot-detail .info .email img { width: 1.8666666667vw; margin-right: 1.7333333333vw; } .foot-detail .info .address .txt, .foot-detail .info .phone .txt, .foot-detail .info .email .txt { color: #ffffff; font-size: 1.8666666667vw; } .foot-detail .info .phone { flex-shrink: 0; } .foot-detail .bottom { margin-top: 2.6666666667vw; padding-bottom: 2.6666666667vw; display: flex; align-items: flex-start; justify-content: space-between; } .foot-detail .bottom .copyright { font-size: 1.6vw; color: #ffffff; } .foot-detail .bottom .record { margin-top: 2vw; display: flex; font-size: 1.6vw; color: #ffffff; } .foot-detail .bottom .record img { display: block; width: 2vw; height: 2vw; margin-right: 10px; } .foot-detail .bottom .qrcode { color: #ffffff; font-size: 1.6vw; } .foot-detail .bottom .qrcode img { display: block; margin: auto; margin-bottom: 1.3333333333vw; width: 7.2vw; } .foot-product-library { width: 100%; padding: 0.6666666667vw 0; background: #01479d; display: flex; justify-content: center; align-items: center; } @media all and (max-width: 500px) { .foot-product-library { display: block; } } .foot-product-library .text { color: #fefefe; font-size: 20px; margin-right: 31px; } @media all and (max-width: 500px) { .foot-product-library .text { text-align: center; } } .foot-product-library .button { width: 160px; height: 37px; background: #16b4b9; display: flex; justify-content: center; align-items: center; } @media all and (max-width: 500px) { .foot-product-library .button { margin: 2vw auto auto; } } .foot-product-library .button .icon { display: block; width: 18px; } .foot-product-library .button .text { font-weight: 600; font-size: 17px; color: #fefefe; margin-right: 15px; padding-right: 15px; border-right: 1px #fff solid; } .ue-content a { color: #059aff; } .ue-content video { width: 100%; height: 100%; } .ue-content blockquote { font: 14px/22px normal helvetica, sans-serif; margin-top: 10px; margin-bottom: 10px; margin-left: 50px; padding: 10px 10px 10px 15px; border-left: 3px solid #ccc; background-color: #f1f1f1; } .ue-content p { margin: 5px 0; margin-bottom: 1em; } .ue-content table { margin-bottom: 10px; border-collapse: collapse; display: table; } .ue-content td, .ue-content th { padding: 5px 10px; border: 1px solid #ddd; } .ue-content .ue-table-interlace-color-double { background-color: #f7faff; } .ue-content .ue-table-interlace-color-single { background-color: #fcfcfc; } .ue-content img { display: block; width: auto; margin: 0 auto; } @media all and (max-width: 425px) { .ue-content img { width: 100%; } } .slide-article .main { display: flex; justify-content: space-between; align-items: flex-end; margin: auto; padding: 4vw 20px; max-width: var(--max-width); width: 100%; } .slide-article .main .en { display: none; position: relative; padding: 0 30px; color: #e4e4e4; font-size: 37px; height: 1em; vertical-align: bottom; line-height: 0.5em; margin-right: 24px; border-right: 1px solid #3f69bd; white-space: nowrap; } .slide-article .main .en:first-letter { font-size: 76px; } .slide-article .main .en:before { content: ""; width: 1px; height: 100px; position: absolute; bottom: 0; left: 0; background: #3f69bd; } .slide-article .main .name { font-size: 4vw; white-space: nowrap; color: #676767; width: 100%; } .slide-article .main .icon { width: 4.6666666667vw; height: 4.6666666667vw; border-radius: 50%; flex: none; } .slide-article .main .icon img { width: 100%; height: 100%; display: block; } .page-banner { height: 500px; display: flex; justify-content: center; align-items: center; } .page-banner .search { display: flex; justify-content: flex-end; align-items: center; width: 510px; height: 58px; font-size: 24px; color: #fff; margin-top: 275px; background: #213b62; border-radius: 1000px; border: 1px solid #fff; } .page-banner .search .to-search { width: 24px; height: 24px; margin-right: 25px; background: transparent; border: transparent; } .page-banner .search .to-search img { display: block; width: 100%; } .page-banner .search .input { background: transparent; width: 320px; height: 100%; line-height: 58px; color: #fff; border: 0; box-shadow: none; } .page-banner .search .input:focus { outline: 0; } .page-banner .search .input::placeholder { color: #fff; } @media all and (max-width: 1024px) { .page-banner { display: none; } } .product { --color: #375fae; } @media all and (max-width: 1440px) { .product { width: calc(100% - 80px); margin: auto; } } .product .tabs { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 30px; } .product .tabs-item { font-weight: 700; font-size: 22px; text-align: center; border-bottom: 2px solid transparent; cursor: pointer; margin-right: 50px; padding-top: 10px; padding-bottom: 7px; } .product .tabs-item:last-child { margin-right: 0; } .product .tabs-item.active { border-bottom: 2px solid var(--color); color: var(--color); } @media all and (max-width: 1024px) { .product .tabs { overflow: hidden; overflow-x: auto; } .product .tabs-item { font-size: 18px; white-space: nowrap; } } .product .section { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin-bottom: 35px; } .product .section-item { background: #f7f7f7; padding: 8px 17px; font-size: 16px; color: #6c6c6c; margin-right: 20px; margin-bottom: 20px; cursor: pointer; border-radius: 3px; transition: all 0.25s; border-bottom: 2px transparent solid; } .product .section-item.active { color: var(--color); border-bottom: 2px var(--color) solid; } .product .section-item:hover { color: #fff; background: var(--color); } @media all and (max-width: 425px) { .product .section { justify-content: space-between; } .product .section-item { width: 49%; margin-right: 0; } .product .section-item a { display: block; width: 100%; white-space: nowrap; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; } } .product .list { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .product .list-item { border: 1px solid #f0f0f0; text-align: center; background: #f9f9f9; width: 23%; margin-bottom: 35px; cursor: pointer; } .product .list-item .icon { display: block; width: 100%; height: 230px; object-fit: cover; } .product .list-item .name { line-height: 60px; font-size: 16px; background: #fff; white-space: nowrap; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .product .list-item.plac { opacity: 0; visibility: hidden; margin-bottom: 0; } @media all and (max-width: 1024px) { .product .list-item { width: 30%; } } @media all and (max-width: 425px) { .product .list-item { width: 100%; } } .product-detail { padding-inline: 20px; margin-bottom: 15vw; } .product-detail .top { display: flex; align-items: flex-start; justify-content: space-between; } .product-detail .top img { display: block; width: 40%; } .product-detail .info { width: 55%; } .product-detail .info-title { font-size: 3.2vw; } .product-detail .info .note { font-size: 2.4vw; color: #999999; margin-top: 1.3333333333vw; } .product-detail .info .model { font-size: 2.4vw; color: #999999; margin-top: 1.3333333333vw; } .product-detail .info a { display: block; margin-top: 6.2666666667vw; font-size: 3.2vw; color: #ffffff; background: #00479c; line-height: 5.3333333333vw; padding-inline: 2vw; width: fit-content; } .product-detail .bottom { margin-top: 8vw; box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.08); } .product-detail .bottom .cate { height: 13.3333333333vw; border-bottom: 1px #dcdcdc solid; margin-bottom: 6.6666666667vw; padding-left: 2.6666666667vw; display: flex; align-items: center; cursor: pointer; } .product-detail .bottom .cate .item { padding: 0 2.6666666667vw; margin-right: 4vw; height: 100%; line-height: 13.3333333333vw; font-size: 2.1333333333vw; color: #282828; } .product-detail .bottom .cate .item.active { color: #004ea2; border-bottom: 1px #004ea2 solid; } .product-detail .bottom .content { padding: 0 45px 45px; } .case-kehu { background: #f8f8f8; } .case-kehu .main { max-width: var(--max-width); width: 100%; margin: auto; display: flex; align-items: flex-start; padding-top: 8vw; padding-bottom: 8.8vw; } .case-kehu .main .aside { display: none; width: 235px; flex: none; color: #fff; font-size: 30px; line-height: 1; padding: 15px 30px; background: #3f69bd; border-bottom: 2px solid #c6b385; position: relative; z-index: 2; } .case-kehu .main .aside:before { content: ""; width: 0; height: 0; position: absolute; top: 0; bottom: 0; right: -20px; margin: auto; border-left: 20px solid #3f69bd; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .case-kehu .wrap { height: 46.6666666667vw; overflow: hidden; } .case-kehu .right { padding: 5.6vw 5.8666666667vw 3.0666666667vw; background: #fff; } .case-kehu .content { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; flex: 1; overflow: hidden; } .case-kehu .content .item { border: 1px solid #d0d0d0; text-align: center; padding-top: 1.3333333333vw; width: 45%; border-radius: 3px; margin-bottom: 3.3333333333vw; } .case-kehu .content .item.plac { opacity: 0; visibility: hidden; margin-bottom: 0; padding: 0; border: none; } .case-kehu .content .item .image { width: 13.3333333333vw; height: 13.3333333333vw; display: block; margin: auto; } .case-kehu .content .item .name { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; line-height: 5.3333333333vw; font-size: 1.8666666667vw; color: #020202; } .case-list { padding-top: 48px; padding-bottom: 48px; background: #f8f8f8; } .case-list .main { max-width: var(--max-width); width: 100%; margin: auto; background: #fff; padding: 5.3333333333vw 4vw 6.6666666667vw; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .case-list .main .item { border: 1px solid #dddddd; width: 45%; margin-bottom: 3.3333333333vw; border-radius: 5px; cursor: pointer; overflow: hidden; } .case-list .main .item .image { width: 100%; display: block; } .case-list .main .item .name { line-height: 8vw; color: #3a3a3a; font-size: 2.9333333333vw; width: 90%; border-bottom: 1px solid #ddd; margin: auto; white-space: nowrap; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .case-list .main .item .tip { font-size: 2.2666666667vw; color: #3a3a3a; line-height: 8vw; width: 90%; margin: auto; white-space: nowrap; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .case-list .main .item.plac { opacity: 0; visibility: hidden; margin-bottom: 0; } .case-detail { width: calc(100% - 40px); margin: 11.2vw auto auto; } .case-detail .info { padding-bottom: 7.4666666667vw; border-bottom: 1px #cfcfcf solid; } .case-detail .info .title { font-weight: 400; color: #252525; font-size: 4vw; text-align: center; margin-bottom: 6.9333333333vw; white-space: nowrap; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .case-detail .info .dd { font-size: 2.9333333333vw; color: #676767; } .case-detail .info .dd .date { padding-left: 5.6vw; position: relative; } .case-detail .info .dd .date:before { content: ""; position: absolute; width: 3.6vw; height: 3.6vw; left: 0; top: 0; background: url("/skin/sub_pages_images/date-icon.png") center no-repeat; background-size: cover; } .case-detail .info .dd .note { display: block; margin-left: 0; margin-top: 2vw; } .case-detail .swiper-container { width: 100%; padding-top: 12vw; padding-bottom: 6.6666666667vw; } .case-detail .swiper-slide { background-position: center; background-size: cover; width: 40vw; height: 40vw; } .case-detail .content { margin-top: 16vw; margin-bottom: 12vw; } .news-page-main { padding-inline: 20px; } .news-page-list .item { display: flex; align-items: center; justify-content: space-between; padding: 20px 0 30px 40px; width: 100%; background: #f5f5f5; margin-bottom: 20px; } .news-page-list .item .info { width: 75%; } .news-page-list .item .info .title { line-height: 40px; color: #333; font-size: 17px; } .news-page-list .item .info .date { overflow: hidden; line-height: 32px; color: #999; font-size: 14px; margin: 0 auto 4px; } .news-page-list .item .info .subtitle { padding-left: 20px; height: 53px; line-height: 28px; color: #777; font-size: 15px; text-align: justify; border-left: 1px solid #dfdfdf; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .news-page-list .item .right-to { width: 140px; height: 123px; display: flex; align-items: center; justify-content: center; border-left: 1px solid #dfdfdf; } .news-page-list .item .right-to svg { width: 40px; height: 40px; fill: #6d6d6d; } .news-detail { width: calc(100% - 40px); margin: 12vw auto; } .news-detail .info .title { text-align: center; font-weight: 400; color: #252525; font-size: 4vw; line-height: 5.3333333333vw; margin-bottom: 4.6666666667vw; } .news-detail .info .dd { line-height: 2.6666666667vw; color: #aaa; font-size: 2vw; text-align: center; margin: 2.6666666667vw auto; padding: 0 0 1.3333333333vw; border-bottom: 1px dashed #dfdfdf; } .news-detail .info .dd .note { display: block; margin-left: 0; } .about-page .about-page-content { background: #fcfcfc; } .about-page .about-page-content .main { max-width: 1320px; width: 100%; margin: auto; } @media all and (max-width: 1440px) { .about-page .about-page-content .main { width: calc(100% - 80px); margin: auto; } } .about-page .about-page-content .slide-article { background: transparent; } .about-page .about-page-content .about-page-content-header { width: 100%; display: block; margin-bottom: 67px; } .about-page .about-page-content .note { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 100px; } .about-page .about-page-content .note img { width: 185px; margin-left: 58px; margin-right: 70px; flex: none; } .about-page .about-page-content .note .note-details .head { font-size: 28px; font-weight: 700; padding-left: 43px; padding-bottom: 40px; padding-top: 40px; position: relative; z-index: 2; } .about-page .about-page-content .note .note-details .head:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 116px; height: 112px; background: url("../static/images/opacity-about@2x.png") no-repeat; background-size: 100%; z-index: -1; } .about-page .about-page-content .note .note-details .note-content { color: #3d3d3d; font-size: 16px; line-height: 1.8; text-indent: 2em; } @media all and (max-width: 1024px) { .about-page .about-page-content .note img { display: none; } } @media all and (max-width: 425px) { .about-page .about-page-content .note .note-details .head { font-size: 21px; padding-bottom: 15px; } .about-page .about-page-content .note .note-details .head:before { width: 85px; } .about-page .about-page-content .note .note-details .note-content { font-size: 15px; } } .about-page .about-page-head { text-align: center; font-size: 40px; line-height: 60px; position: relative; z-index: 1; } .about-page .about-page-head:after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; left: 0; margin: auto; background: #fcfcfc; } .about-page .about-page-head:before { content: ""; position: absolute; left: 0; right: 0; margin: auto; width: 360px; height: 60px; z-index: -2; box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.3); border-radius: 100%; } @media all and (max-width: 768px) { .about-page .about-page-head:before { width: 335px; } } @media all and (max-width: 425px) { .about-page .about-page-head { font-size: 30px; line-height: 50px; } .about-page .about-page-head:before { width: 323px; height: 48px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3); } } .about-page .renzheng-list { display: flex; justify-content: space-between; align-items: center; margin-top: 100px; padding-bottom: 60px; } .about-page .renzheng-list .item img { height: 120px; display: block; margin-bottom: 30px; } .about-page .renzheng-list .item .name { font-size: 20px; color: #171717; } @media all and (max-width: 768px) { .about-page .renzheng-list .item img { height: 100px; } .about-page .renzheng-list .item .name { font-size: 15px; text-align: center; } } @media all and (max-width: 425px) { .about-page .renzheng-list { display: block; margin-top: 35px; } .about-page .renzheng-list .item { margin-bottom: 20px; text-align: center; } .about-page .renzheng-list .item img { margin: auto auto 30px; height: 190px; } } .about-page .about-honor { max-width: 1320px; width: 100%; margin: auto; padding-bottom: 70px; position: relative; } .about-page .about-honor .swiper-button-prev { left: -60px; } .about-page .about-honor .swiper-button-next { right: -60px; } .about-page .about-honor .swiper-slide { display: flex; justify-content: space-between; align-items: center; } .about-page .about-honor .swiper-slide .item { width: 100%; height: 360px; object-fit: cover; } .about-page .about-honor .swiper-slide .item.plac { height: 0; } @media all and (max-width: 1440px) { .about-page .about-honor { width: calc(100% - 80px); margin: auto; } .about-page .about-honor .swiper-button-prev { display: none; } .about-page .about-honor .swiper-button-next { display: none; } } @media all and (max-width: 1024px) { .about-page .about-honor .swiper-slide .item { display: block; width: 100%; height: 100%; object-fit: cover; } } .about-page .about-hezuo { max-width: 1320px; width: 100%; margin: auto; background: url("../static/images/baozhang-bg@2x.png") no-repeat top center/cover; padding-top: 47px; padding-bottom: 35px; } .about-page .about-hezuo .about-page-head:after { background: #ffffff; margin: auto; width: 700px; } .about-page .about-hezuo .message { font-size: 23px; color: #3d3d3d; padding-top: 40px; margin-bottom: 76px; text-align: center; } .about-page .about-hezuo .list { display: flex; justify-content: center; align-items: flex-start; } .about-page .about-hezuo .list .item { display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 0 30px; border-right: 1px solid #c3c3c3; } .about-page .about-hezuo .list .item:last-child { border-right: none; } .about-page .about-hezuo .list .item img { display: block; width: 85px; height: 85px; object-fit: contain; } .about-page .about-hezuo .list .item .name { line-height: 100px; font-size: 23px; color: #3d3d3d; } .about-page .about-hezuo .list .item .tip { color: #3d3d3d; font-size: 16px; } @media all and (max-width: 768px) { .about-page .about-hezuo .list { display: block; } .about-page .about-hezuo .list .item { margin-top: 25px; border: none; } } @media all and (max-width: 768px) { .about-page .about-hezuo .message { font-size: 20px; margin-bottom: 30px; } .about-page .about-hezuo .list .item .name { line-height: 70px; } } @media all and (max-width: 425px) { .about-page .about-hezuo .message { font-size: 12px; } .about-page .about-hezuo .list .item .tip { font-size: 15px; } } .about-page .qiye-list { max-width: 1320px; width: 100%; margin: auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-bottom: 85px; } .about-page .qiye-list .item { width: 24%; border-bottom: 1px solid #e4e4e4; text-align: center; margin-bottom: 35px; cursor: pointer; } .about-page .qiye-list .item.plac { opacity: 0; visibility: hidden; margin-bottom: 0; } .about-page .qiye-list .item img { width: 100%; height: 225px; object-fit: cover; display: block; } .about-page .qiye-list .item .name { line-height: 55px; font-size: 16px; color: #676767; } @media all and (max-width: 1440px) { .about-page .qiye-list { width: calc(100% - 80px); margin: auto; } } @media all and (max-width: 768px) { .about-page .qiye-list .item { width: 47%; margin-bottom: 30px; } } @media all and (max-width: 425px) { .about-page .qiye-list .item { width: 100%; } } .contact-page { padding-inline: 20px; } .contact-page .info-card { margin-top: 40px; margin-bottom: 40px; display: flex; align-items: center; border-left: 1px solid #dfdfdf; border-top: 1px solid #dfdfdf; } .contact-page .item { width: calc(100% / 3); overflow: hidden; margin: 0; padding: 40px 20px 20px; border-right: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; } .contact-page .item img { display: block; width: 130px; height: 130px; overflow: hidden; margin: 0 auto 20px; } .contact-page .item .txt { color: #797979; font-size: 14px; text-align: center; margin: 0 auto 10px; } .contact-page .item .data { height: 60px; line-height: 30px; color: #333; font-size: 16px; text-align: center; } .contact-page .wechat { width: 100%; margin: 0 auto 40px; padding: 60px 0; background: url("/skin/sub_pages_images/NyContact_ewmbg.jpg") no-repeat center; background-size: cover; } .contact-page .wechat img { display: block; width: 160px; margin: 30px auto 0; } .contact-page .txt1 { line-height: 40px; color: #fff; font-size: 32px; text-align: center; } .contact-page .txt2 { line-height: 30px; color: #fff; font-size: 16px; text-align: center; } .contact-page .contact-map { max-width: 1320px; width: 100%; margin: auto; height: 400px; margin-bottom: 150px; } .profile { padding-bottom: 100px; } .profile .profile-swiper .swiper-slide img { display: block; width: 100%; } .profile .intro { padding-top: 9.2vw; } .profile .intro .top { margin-bottom: 5.7333333333vw; display: flex; align-items: center; justify-content: center; column-gap: 2.6666666667vw; } .profile .intro .top img { display: block; width: 4vw; } .profile .intro .top .txt { font-size: 30px; font-weight: 700; } .profile .intro .data img { display: block; width: 100%; } .profile .intro .data .bottom { padding: 10.1333333333vw 9.3333333333vw 18.6666666667vw; background: #f7f4f4; } .profile .intro .data .bottom .title { font-size: 4vw; margin-bottom: 8.4vw; } .profile .intro .data .bottom .info { font-size: 1.8666666667vw; color: #8f8f8f; line-height: 4vw; } .profile .intro .data .bottom .info p { text-indent: 2em; margin-bottom: 0.6666666667vw; } .profile .contact { background: #f9f9f9; padding-top: 6.8vw; padding-bottom: 10.2666666667vw; } .profile .contact .top { margin-bottom: 12.5333333333vw; display: flex; align-items: center; justify-content: center; column-gap: 2.6666666667vw; } .profile .contact .top img { display: block; width: 4vw; } .profile .contact .top .txt { font-size: 30px; font-weight: 700; } .profile .contact .swiper-slide { margin-top: 1.3333333333vw; margin-bottom: 2.1333333333vw; width: 49.8666666667vw; padding: 4.9333333333vw 0 0; background: #ffffff; box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16); } .profile .contact .swiper-slide img { margin: auto; display: block; width: 23.7333333333vw; } .profile .contact .swiper-slide .title { margin-top: 2.6666666667vw; margin-bottom: 1.0666666667vw; font-size: 24px; font-weight: 700; text-align: center; } .profile .contact .swiper-slide .info { margin-bottom: 3.8666666667vw; color: #8f8f8f; font-size: 2.4vw; text-align: center; } .profile .contact .swiper-slide .bt { width: 100%; height: 9.4666666667vw; background: #f1f1f1; font-size: 18px; display: flex; align-items: center; justify-content: center; } .profile .main { padding-top: 10.5333333333vw; width: 90%; margin: auto; overflow: hidden; } .profile .main .tab { position: relative; margin-bottom: 9.0666666667vw; height: 7.3333333333vw; background: #b3b2b2; display: flex; align-items: center; } .profile .main .tab .tab-item { position: relative; width: 50%; display: flex; align-items: center; justify-content: center; font-size: 4vw; font-weight: 700; color: #ffffff; z-index: 2; } .profile .main .tab .bg { position: absolute; left: 0; top: 0; width: 50%; height: 100%; background: #00479c; z-index: 1; transition: all 0.5s ease; } .profile .main .data-list { position: relative; left: -100%; width: calc((100% * 2) + 10px); padding-left: 0.6666666667vw; display: flex; align-items: flex-start; justify-content: space-between; transition: all 0.5s ease; } .profile .main .data-list .video-list, .profile .main .data-list .cases-list { width: 90.6666666667vw; } .profile .main .data-list .video-list .item, .profile .main .data-list .cases-list .item { background: #ffffff; width: 88.6666666667vw; margin-bottom: 2.6666666667vw; padding: 3.0666666667vw 4.6666666667vw 1.8666666667vw 4.2666666667vw; display: block; box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.302); } .profile .main .data-list .video-list .item .name, .profile .main .data-list .cases-list .item .name { color: #160908; font-size: 2.2666666667vw; margin-bottom: 0.8vw; } .profile .main .data-list .video-list .item .subtitle, .profile .main .data-list .cases-list .item .subtitle { color: #9d9e9f; font-size: 1.7333333333vw; margin-bottom: 6.4vw; } .profile .main .data-list .video-list .item .bottom, .profile .main .data-list .cases-list .item .bottom { display: flex; align-items: center; justify-content: space-between; } .profile .main .data-list .video-list .item .bottom .date, .profile .main .data-list .cases-list .item .bottom .date { color: #d0d1d4; font-size: 1.6vw; } .profile .main .data-list .video-list .item .bottom .detail, .profile .main .data-list .cases-list .item .bottom .detail { display: flex; align-items: center; color: #d0d1d4; font-size: 1.6vw; } .profile .main .data-list .video-list .item .bottom .detail img, .profile .main .data-list .cases-list .item .bottom .detail img { margin-left: 4px; width: 1.4666666667vw; } .profile-detail { width: calc(100% - 40px); margin: 12vw auto; } .profile-detail .info .title { text-align: center; font-weight: 400; color: #252525; font-size: 4vw; line-height: 5.3333333333vw; margin-bottom: 4.6666666667vw; } .profile-detail .info .dd { line-height: 2.6666666667vw; color: #aaa; font-size: 2vw; text-align: center; margin: 2.6666666667vw auto; padding: 0 0 1.3333333333vw; border-bottom: 1px dashed #dfdfdf; } .profile-detail .info .dd .note { display: block; margin-left: 0; } .detail-paginate { padding: 65px 86px 210px; font-size: 18px; color: #676767; border-top: 1px #cfcfcf solid; display: flex; align-items: flex-start; justify-content: space-between; } .detail-paginate .list { padding: 0 52px; border-left: 1px #cfcfcf solid; border-right: 1px #cfcfcf solid; } .detail-paginate .list .icon { display: block; margin: auto auto 13px; width: 25px; } .detail-paginate .list a { margin: 13px auto auto; } .detail-paginate .text { margin-bottom: 13px; } @media all and (max-width: 768px) { .detail-paginate { display: block; padding: 65px 0; } .detail-paginate .list { display: block; border: none; padding: 0; margin: 15px 0; } .detail-paginate .list .icon { margin: auto auto 5px 5px; } } .paginate { display: flex; justify-content: center; align-items: center; } .paginate .item { width: 25px; height: 25px; display: flex; justify-content: center; align-items: center; cursor: pointer; margin: 0 5px; } .paginate .item.active, .paginate .item:hover { background: #004ea2; color: #fff; } .paginate .page-num { width: 25px; height: 25px; display: flex; justify-content: center; align-items: center; cursor: pointer; margin: 0 5px; } .paginate .page-num.page-num-current, .paginate .page-num:hover { background: #004ea2; color: #fff; } .topSwiper img { display: block; width: 100%; } .home-product { padding-top: 5.6vw; padding-inline: 20px; } .home-product .top .head { display: flex; align-items: center; justify-content: center; } .home-product .top .head img { display: block; width: 16px; } .home-product .top .head .title { font-size: 20px; font-weight: 700; margin-inline: 20px; } .home-product .top .search { position: relative; margin: auto; margin-top: 4.9333333333vw; width: 100%; height: 4.9333333333vw; } .home-product .top .search input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: #00479c 1px solid; border-radius: 11.7333333333vw; padding-left: 4.5333333333vw; font-size: 1.6vw; text-align: center; } .home-product .top .search button { position: absolute; top: 0; right: 0; width: 4.9333333333vw; height: 4.9333333333vw; background: url("/skin/images/icon10.png") no-repeat center #00479c; background-size: 2.8vw; color: #ffffff; font-size: 1.8666666667vw; border: none; text-align: center; border-radius: 50%; } .home-product .product-list { margin-top: 4.9333333333vw; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 3.7333333333vw; } .home-product .product-list .item { display: block; background: #f4f4f4; width: 48%; padding: 7px 7px 3.2vw; border-radius: 3.4666666667vw 3.4666666667vw 0 0; } .home-product .product-list .item .img { width: 100%; height: 25.6vw; overflow: hidden; border-radius: 3.4666666667vw; } .home-product .product-list .item .img img { display: block; width: 100%; object-fit: contain; object-position: center center; } .home-product .product-list .item .name { margin-top: 2.5333333333vw; margin-bottom: 3.0666666667vw; font-size: 3.2vw; white-space: nowrap; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; text-align: center; } .home-product .product-list .item .buttons { display: flex; align-items: center; justify-content: center; column-gap: 2.1333333333vw; } .home-product .product-list .item .buttons .button { padding: 4px 13px; font-size: 12px; color: #ffffff; background: #00479c; border: transparent 1px solid; } .home-product .product-list .item .buttons .to-detail { border: 1px solid #00479c; background: #ffffff; color: #00479c; } @media all and (max-width: 415px) { .home-product .product-list { display: block; } .home-product .product-list .item { width: 100%; margin-bottom: 10px; } .home-product .product-list .item .img { height: 53.3333333333vw; } } .home-about { margin-top: 12.2666666667vw; padding-inline: 20px; } .home-about .left { width: 100%; background: url("/skin/images/about-bg-icon.png") no-repeat left top; background-size: 48.9333333333vw 50.6666666667vw; padding-top: 34vw; } .home-about .left .note { display: flex; align-items: center; justify-content: space-between; } .home-about .left .note .item { padding-left: 4vw; border-left: #dedbdb 1px solid; } .home-about .left .note .item .name { font-size: 2.6666666667vw; font-weight: 700; margin-bottom: 1.7333333333vw; color: #00479c; } .home-about .left .note .item .detail { font-size: 1.8666666667vw; line-height: 2.4vw; color: #000000; margin-bottom: 0.6666666667vw; } .home-about .left .content { margin-top: 4vw; margin-bottom: 3.2vw; font-size: 3.2vw; line-height: 3.2vw; color: #000000; } .home-about .left .buttons { width: 100%; display: flex; align-items: center; justify-content: space-between; } .home-about .left .buttons .button { width: 23%; padding: 7px 0; background: #eae9e9; font-size: 2.9333333333vw; line-height: 3.8666666667vw; text-align: center; } .home-about .left .buttons .button.active { background: #00479c; color: #ffffff; } .home-about .right { margin-top: 3.2vw; } .home-about .right img { display: block; width: 100%; height: auto; } .home-news { margin-top: 3.7333333333vw; padding-top: 8.8vw; padding-bottom: 16.6666666667vw; padding-inline: 20px; } .home-news .main { margin-top: 4.2666666667vw; background: url("/skin/images/news-bg.png") no-repeat center; background-size: cover; } .home-news .list { padding-inline: 4vw; padding-bottom: 6.6666666667vw; } .home-news .item { display: block; width: 100%; padding: 3.7333333333vw 2vw 2.2666666667vw; display: flex; align-items: center; column-gap: 4.9333333333vw; border-bottom: #858282 1px solid; } .home-news .item .title { width: 83%; font-size: 3.2vw; color: #3d3d3d; margin-bottom: 1.8666666667vw; white-space: nowrap; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .home-news .item .date { width: fit-content; } .home-news .item .date .day { font-size: 3.4666666667vw; font-family: Microsoft YaHei-Bold, Microsoft YaHei; font-weight: 700; color: #3d3d3d; line-height: 4.5333333333vw; text-align: center; } .home-news .item .date .ym { font-size: 2.1333333333vw; font-family: Microsoft YaHei-Regular, Microsoft YaHei; font-weight: 400; color: #01479d; line-height: 2.8vw; } .home-title .title { font-size: 4vw; font-family: Microsoft YaHei-Bold, Microsoft YaHei; font-weight: 700; color: #000000; line-height: 5.3333333333vw; letter-spacing: 6px; text-align: center; } .home-title .detail { font-size: 2.1333333333vw; font-family: Microsoft YaHei-Regular, Microsoft YaHei; font-weight: 400; color: #000000; line-height: 2.8vw; letter-spacing: 3px; text-align: center; margin-top: 1.8666666667vw; margin-bottom: 7px; } .home-title .icon { width: 5.0666666667vw; margin: auto; } .home-title .icon img { display: block; width: 100%; }