html, body { font-size: 18px; overflow-x: clip; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; margin: 0; padding: 0; } a { color: #2d2e2f; outline: none; text-decoration: none; } a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: none; } a:active { text-decoration: none; } a:focus { text-decoration: none; } /* =================================================== */ .screen { width: 100%; height: 100vh; /* max-height: 930px; */ overflow: hidden; } .screen-bg { width: 100%; height: 100%; position: absolute; background: linear-gradient(180deg, rgb(19 75 159 / 67%) 30%, #ffffff00 75%); } .screen-text { width: 40rem; } .screen .swiper-button-next, .screen .swiper-button-prev { width: 2.5rem; height: 2.5rem; bottom: 12vh; top: unset; background-color: #00479d; } .screen .swiper-button-next.swiper-button-disabled, .screen .swiper-button-prev.swiper-button-disabled { opacity: 1; cursor: auto; pointer-events: none; background-color: unset; } .screen .swiper-button-next, .screen .swiper-button-prev { color: #fff; } .screen .swiper-button-next::after, .screen .swiper-button-prev::after { font-size: 1rem; } .screen .swiper-button-next { left: 48%; } .screen .swiper-button-prev { left: unset; left: 44%; } .screen .swiper-pagination { width: 10rem; bottom: 11vh; left: unset; right: 60%; color: #fff; font-size: 1.2rem; font-weight: 600; } .screen .swiper-pagination-current { font-size: 2rem; } .screen .swiper-pagination-custom { font-size: 2rem; } .screen .swiper-pagination-custom span { font-size: 1.2rem; display: inline-block; margin: 10px; } .screen .swiper-pagination-custom span.fu { line-height: 24px; display: inline-block; vertical-align: middle; overflow: hidden; } .screen .swiper-pagination-custom span.cur { font-size: 2rem; display: inline-block; } .block-name { z-index: 99; position: relative; font-size: 2.4rem; font-weight: 600; } .news { height: 683px; background-image: url(../img/bg-xw.png); background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; } .news-con { max-width: 1600px; height: 100%; padding: 0 0; } .news .block-name { width: 30%; color: #fff; top: 95px; } .news .news-ul { display: flex; background-color: unset; height: 625px; align-items: center; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; } .news .news-ul a { display: flex; width: 100%; height: 100%; } /*.news .news-ul ::before{ content: ''; position: fixed; display: block; } */ .news .news-li { /*flex: 1;*/ height: 100%; min-height: 10px; transition: 0.4s; color: #fff; text-align: justify; padding: 120px 2.5% 0 2.5%; box-sizing: border-box; /* width: 25%; */ } .news .news-li:hover { /* background-color: rgb(15, 55, 139); */ background: linear-gradient(180deg, rgb(11 72 148 / 20%)10%, rgba(15, 55, 139, 100%)90%); -webkit-transform: translate(0, 0); transform: translate(0, 0); } .news .news-li .news-data-1 { font-size: 1.4rem; margin-top: 85px; padding: 0 5px; transition: 0.2s; } .news .news-li .news-title { height: 3rem; font-size: 1rem; margin-top: 10px; padding: 0 5px; line-height: 1.5rem; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; transition: 0.4s; } .news .news-li .news-data-2 { display: none; font-size: 0.85rem; color: #8CC0FF; padding: 0 5px; line-height: 2rem; transition: 0.4s; } .news .news-li .news-img { display: none; margin-top: 5px; transition: 0.4s; width: 100%; height: 30%; } .news .news-li .news-in { font-size: 0.85rem; margin-top: 25px; color: #8CC0FF; padding: 0 5px; line-height: 1.4rem; overflow: hidden; -webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; /* transition: 0.4s; */ } .news-pagination { position: absolute; width: 55%; top: 70px; bottom: unset; right: 0; left: unset; border-top: 1px solid #fff; z-index: 99; } .news-pagination .swiper-pagination { width: 400px !important; right: 0; left: unset !important; top: 0; bottom: unset !important; display: flex; } .news-pagination .swiper-pagination-bullet { flex: 1; color: #fff; background-color: unset; opacity: 1; border-radius: 0; height: 2px; margin: 0 44px !important; } .news-pagination .swiper-pagination-bullet p { width: 94px; margin: 10px 0 0 -24px; } .news-pagination .swiper-pagination-bullet-active { background-color: #fff; color: #8CC0FF; } .news-pagination ul { width: 40% !important; right: 0; left: unset !important; top: 0; bottom: unset !important; } .news-more { display: none; } /* 脙漏脗拢脜陆脙搂脗聬脗麓 */ .w-accor { overflow: hidden; position: relative; top: -180px; } .w-accor ul, .w-accor li { padding: 0; margin: 0; list-style: none; } .w-accor ul { width: 100%; display: flex; justify-content: right; } .w-accor li { position: relative; overflow: hidden; float: left; } .w-accor .btn { color: #173F8F; text-align: center; line-height: 40px; display: block; width: 160px; height: 40px; border-radius: 10px; background-color: #fff; position: absolute; left: 388px; right: 0; top: 69px; bottom: 0; } .w-accor a.acc-logo { display: block; position: absolute; left: 67px; right: 0; top: 71px; bottom: 0; } .w-accor a.acc-logo img { margin: 0; } .company { position: relative; height: 860px; background-image: url(../img/bg-gk.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; } .company .block-name { left: 15%; top: 120px; } .company_pro { position: relative; left: 15%; top: 180px; text-indent: 2rem; line-height: 2; width: 480px; height: 163px; color: #0048A2; font-size: 18px; text-align: justify; } .company_more { position: relative; top: 236px; left: 15%; width: 160px; height: 40px; color: #fff; background-color: #0048A2; font-size: 16px; font-weight: 500; border-radius: 5px; text-align: center; line-height: 40px; letter-spacing: 2px; } .company_num { width: 96%; max-width: 1385px; position: relative; top: 345px; display: flex; margin: 0 auto; } .data_num { flex: 1; width: 338px; height: 133px; background: #fff; color: #0F378B; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-right: 10px; transition: .5s; } .data_num:hover { background: #0F378B; color: #fff; transform: translateY(-15px); transition: .5s; } .data_num .num_more { font-size: 45px; font-weight: 600; } .business { height: 900px; background-image: url(../img/bg-yw.png); background-repeat: no-repeat; background-size: cover; background-position: center; z-index: 99; } .business .block-name { left: 15%; top: 90px; } .business-con { position: relative; left: 15%; top: 128px; font-size: 18px; color: #0048A2; } .business-img { position: absolute; left: 50%; transform: translateX(-50%); top: 390px; width: 84%; max-width: 1406px; display: flex; flex-wrap: wrap; justify-content: space-between; justify-items: space-between; } .business-img-select { width: 49.5%; height: 320px; position: relative; background-size: 100% 300px; } .business-img-select div { height: 100%; } .business-img a { display: contents; } .business-img-li1 { position: relative; background: url(../img/01-bg-fang.png) no-repeat; background-position: left; margin-bottom: 15px; transition: all .3s; background-size: cover; } .business-img-li1:hover { border-top-left-radius: 58px; } .business-img-li1 div { width: 100%; background: url(../img/01logo-rongchang.png) no-repeat 20% 50%, linear-gradient(-65deg, transparent 42%, RGBA(0, 72, 162, 0.7) 0) right; transition: all 0.3s; } .business-img-li1 div:hover { background: url(../img/01logo-rongchang.png) no-repeat 50% 50%, RGBA(0, 72, 162, 1); border-top-left-radius: 58px; } .business-img-li1 img { position: absolute; width: 30%; top: 45%; left: 15%; } .business-img-li2 { position: relative; margin-bottom: 15px; background: url(../img/02-bg-fang.png) no-repeat; background-position: left; transition: all .3s; background-size: cover; } .business-img-li2:hover { border-top-right-radius: 58px; } .business-img-li2 div { width: 100%; background: url(../img/02logo-shengwu.png) no-repeat 20% 50%, linear-gradient(-65deg, transparent 42%, rgba(255, 120, 0, 0.7) 0) right; transition: all 0.3s; } .business-img-li2 div:hover { background: url(../img/02logo-shengwu.png) no-repeat 50% 50%, rgba(255, 120, 0, 1); border-top-right-radius: 58px; } .business-img-li2 img { position: absolute; width: 30%; top: 90px; left: 15%; } .business-img-li3 { position: relative; background: url(../img/03-bg-fang.png) no-repeat; background-position: right; transition: all 0.3s; background-size: cover; } .business-img-li3 div { width: 100%; background: url(../img/03logo-mabplex.png) no-repeat 80% 50%, linear-gradient(116deg, transparent 42%, RGBA(0, 150, 125, .7) 0) right; transition: all 0.3s; } .business-img-li3:hover { border-bottom-left-radius: 58px; } .business-img-li3 div:hover { background: url(../img/03logo-mabplex.png) no-repeat 50% 50%, RGBA(0, 150, 125, 1); border-bottom-left-radius: 58px; } .business-img-li3 img { position: absolute; width: 20%; top: 50%; transform: translateY(-50%); left: 62%; } .business-img-li4 { position: relative; background: url(../img/04-bg-fang.png) no-repeat; transition: all 0.3s; background-size: cover; } .business-img-li4 div { background: url(../img/04logo-yy.png) no-repeat 80% 50%, linear-gradient(116deg, transparent 42%, rgba(80, 30, 150, .7) 0) right; transition: all 0.3s; } .business-img-li4:hover { border-bottom-right-radius: 58px; } .business-img-li4 div:hover { background: url(../img/04logo-yy.png) no-repeat 50% 50%, rgba(80, 30, 150, 1); border-bottom-right-radius: 58px; } .business-img-li4 img { position: absolute; width: 20%; top: 50%; transform: translateY(-50%); left: 62%; } @keyframes fadeColor1 { 0% {} 100% { background-color: #0048A2; } } .fadeImg { position: absolute; top: 45% !important; left: 50% !important; transform: translateX(-50%) !important; } .product { height: 1050px; background-image: url(../img/bg-pd.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; } .product-con { top: 250px; width: 100%; max-width: 1920px; padding: 0 0; margin: 0 auto; position: relative; /* height: 100px; */ } .product-con .block-name { color: #fff; text-align: center; width: 100%; margin-right: auto; margin-left: auto; position: absolute; } .product-con .block-name p { margin-top: 10px; text-align: center; font-size: 1rem; font-weight: normal; } .product-pagination { position: absolute; width: 68%; max-width: 1600px; margin: 0 auto; top: 10px; bottom: unset; right: unset; left: 16%; border-top: 1px solid #8CC0FF; z-index: 99; } .product-pagination .swiper-pagination { width: 100% !important; right: unset !important; left: unset !important; top: 0; bottom: unset !important; display: flex; } .product-pagination .swiper-pagination-bullet { flex: 1; color: #8CC0FF; background-color: unset; opacity: 1; border-radius: 0; height: 2px; margin: 0 44px !important; } .product-pagination .swiper-pagination-bullet p { width: 94px; margin: 10px 0 0 -27px; } .product-pagination .swiper-pagination-bullet-active { background-color: #fff; color: #fff; } .swiper-product { top: 128px; } .pro-wapper { margin-top: 150px; } .pro-wapper a { display: contents; } .pro-wapper .swiper-slide { text-align: center; padding: 0 calc((100vw - 1100px) * .15); width: 800px; max-height: 320px; background-color: unset; } .pro-wapper .swiper-slide { opacity: 0.5; } .pro-wapper .swiper-slide img { border-top-right-radius: unset; transition: 1s; } .pro-wapper .swiper-slide-active { opacity: 1; } .pro-wapper .swiper-slide-active img { border-top-right-radius: 100px; transition: 1s; } .pro-wapper .swiper-slide a.pro-btn { color: #fff; text-align: center; line-height: 40px; display: block; width: 160px; height: 40px; border-radius: 10px; background-color: #0048A2; position: absolute; left: 10vw; bottom: 3vw; } .product-nextpre { width: 60%; height: 45px; position: absolute; z-index: 99; left: 50%; top: 66%; transform: translate(-50%, -50%); } .product-nextpre .product-btn-prev::after, .product-nextpre .product-btn-next::after { content: ""; } .product-nextpre .product-btn-prev, .product-nextpre .product-btn-next { width: 45px; height: 45px; content: ""; background: url(../img/swiper-button.png); background-size: contain; position: absolute; } .product-nextpre .product-btn-prev { transform: rotateY(180deg); } /* =================================================== */ .swiper .screen-text { z-index: 1; top: 35%; position: absolute; color: #fff; text-shadow: 6px 6px 4px #022b5e98; } .swiper-screen p { font-size: 1.6rem; font-weight: lighter; letter-spacing: 0.1rem; } @media screen and (max-width: 900px) { .screen { height: 25vh; margin-top: 50px; } .swiper-screen p { font-size: 0.6rem; } .swiper h1 { font-size: 1.4rem; } .screen .swiper-button-next, .screen .swiper-button-prev { display: none; width: 1.8rem; height: 1.8rem; bottom: 10vh; } .screen .swiper-button-next { right: 36%; left: unset; } .screen .swiper-button-prev { left: 36%; } .screen .swiper-pagination { display: block; left: 5%; right: unset; bottom: 5%; } .screen .swiper-pagination-custom span.cur { font-size: 1rem; line-height: 1rem; } .screen .swiper-pagination-custom span.fu { line-height: 1rem; vertical-align: middle; padding-top: 6px; margin: 3px; } .screen .swiper-pagination-custom span { font-size: 0.6rem; margin: 5px; vertical-align: bottom; } .news { height: 880px; background-image: url(../img/bg-xw-m.png); } .block-name { font-size: 1.4rem; top: 50px !important; margin-left: 0 !important; } .news .block-name { color: #333; width: 40%; } .news-con { height: 100%; } .news-pagination { width: 100%; border-top:unset; } .news-pagination .swiper-pagination-bullet { flex:none; width: 28%; height: 36px; line-height: 34px; border: 1px solid #fff; background-color: #0052cc; border-radius: 20px; margin: 0 0 !important; text-align: center; font-size: 16px; color: #fff; } .news-pagination .swiper-pagination-bullet-active { color: #fff; background-color: #002c8a; border-bottom: 1px solid #fff; box-shadow: 0px 0px 4px 2px #ffffff82; } .news-pagination .swiper-pagination-bullet p { width: auto; margin: auto; } .swiper-news { height: 750px; } .news .news-ul { top: 110px; height: 80%; flex-direction: column; } .news .news-li-first { height: 175px !important; background-color: #0c4085 !important; } .news .news-li { width: 100%; height: 130px; padding: 5% 4%; margin-top: 10px; z-index: 1; position: relative; overflow: hidden; border-radius: 5px; background-color: #e8eff5; /* box-shadow: #092662ed 2px 2px 4px 0px; */ } .news .news-li:hover { background: #e8eff5; } .news .news-li-first .news-in { margin: 0 !important; position: absolute; -webkit-line-clamp: 3 !important; top: 100px; color: #85bcff !important; float: unset !important; width: 92% !important; } .news .news-li .news-in { font-size: 12px; margin: 5px 0; color: #aaa; padding: 0; line-height: 20px; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; float: right; width: 73%; } .news .news-li-first .news-data-1 { left: 34%; width: 100px !important; padding: 0 3% !important; position: absolute; display: block !important; font-weight: normal !important; color: #fff !important; height: auto !important; } .news .news-li .news-data-1 { display: flex; float: left; margin-top: 0; font-size: 14px; font-weight: 600; color: #0d4998; width: 62px; height: 100%; flex-direction: column; justify-content: center; padding: 0 10px; } .news .news-li-first .news-data-1 span { display: none !important; } .news .news-li .news-data-1 span::after { content: ''; display: block; width: 32px; margin-top: 7px; border-bottom: 1px solid #0d4998; } .news .news-li .news-title { height: 2.4rem; font-size: 16px; line-height: 1.3rem; color: #333; margin: 0; padding: 0; float: right; width: 73%; } .news .news-li-first .news-title { height: 2.4rem; position: absolute; top: 41px; left: 34%; width: 62%; color: #fff !important; padding-left: 3%; } .news .news-li-first .news-img { display: block !important; width: 30% !important; height: 70px !important; left: 4%; border-radius: 4px; overflow: hidden; margin-top: 5% !important; } .news .news-li .news-img { display: none; transition: 0.4s; width: 99%; height: 100%; position: absolute; top: 0; z-index: -2; margin: 0; right: 0; } .news-pagination .swiper-pagination { width: 100% !important; justify-content: space-evenly; } .news .w-accor { display: none; } .news-more { position: absolute; display: block; bottom: 40px; left: 8%; width: 110px; height: 35px; line-height: 35px; border-radius: 8px; background-color: unset; color: #0045ad; font-weight: bolder; font-size: 14px; text-align: center; border: #0045ad 1px solid; } .company { height: auto; background-image: url(../img/bg-gk-m.jpg); background-repeat: no-repeat; background-size: contain; background-position: top; } .wrapper-con { padding: 0 0; width: 88%; height: 100%; } .company-con { padding: 40px 0; } .company .block-name { left: 2%; top: unset; } .company_pro { position: relative; top: 0; left: unset; line-height: 1.5rem; width: 100%; height: auto; font-size: 16px; text-indent: 2rem; margin: 137px auto 0 auto; /* padding: 10px; */ } .company_more { display: block; position: absolute; width: 110px; height: 36px; line-height: 36px; border-radius: 8px; background-color: unset; color: #0045ad; font-weight: bolder; font-size: 14px; text-align: center; border: #0045ad 1px solid; top: unset; bottom: 40px; left: 8%; } .company_num { width: 100%; top: 0; margin: 30px auto 80px auto; display: flex; flex-wrap: wrap; flex-direction: row; pointer-events: none; } .data_num { padding: 20px; text-align: center; flex: unset; height: 120px; margin-right: 0; width: 50%; border-top-right-radius: 20px; border-bottom-left-radius: 20px; box-shadow: 1px 1px 8px #aabbda; } .data_num:nth-child(1) { background: #0F378B; color: #fff; /* border-bottom: 1px #0a266152 dotted; */ } .data_num:nth-child(4) { background: #0F378B; color: #fff; /* border-left: 1px #0a266152 dotted; */ } .data_num>div { margin-bottom: 5px; font-size: 12px; } .data_num span { font-size: 14px; } .data_num .num_more { font-size: 26px; font-weight: unset; } .business { height: 455px; } .business .block-name { left: 0; top: unset; /* margin-top: 40px; */ margin-left: 0; } .business-con { width: 100%; left: 0; top: 74px; font-size: 16px; text-align: justify; } .business-img { left: 50%; top: 190px; width: 88%; height: 208px; } .business-img-select { height: 100px; position: relative; background-size: cover; margin-bottom: auto; } .business-img-select div { height: 100px; } .business-img-li1 { background-position: 80% center; } .business-img-li2 { background-position: 90% center; } .business-img-li3 { background-position: 19% center; } .business-img-li4 { background-position: 23% center; } .business-img-li1:hover { border-top-left-radius: 0; } .business-img-li1 div { background: url(../img/01logo-rongchang.png) no-repeat center, linear-gradient(0deg, transparent 0%, RGBA(0, 72, 162, .5) 0) right; background-size: 58%; border-top-left-radius: 0; } .business-img-li1 div:hover { background: url(../img/01logo-rongchang.png) no-repeat center, linear-gradient(0deg, transparent 0%, RGBA(0, 72, 162, .5) 0) right; background-size: 63%; border-top-left-radius: 0; } .business-img-li2:hover { border-top-right-radius: 0; } .business-img-li2 div { background: url(../img/02logo-shengwu.png) no-repeat center, linear-gradient(0deg, transparent 0%, rgba(255, 120, 0, 0.5) 0) right; background-size: 59%; } .business-img-li2 div:hover { background: url(../img/02logo-shengwu.png) no-repeat center, linear-gradient(0deg, transparent 0%, rgba(255, 120, 0, 0.5) 0) right; background-size: 64%; border-top-right-radius: 0; } .business-img-li3:hover { border-bottom-left-radius: 0; } .business-img-li3 div { background: url(../img/03logo-mabplex.png) no-repeat center, linear-gradient(0deg, transparent 0%, RGBA(0, 150, 125, .5) 0) right; background-size: 45%; } .business-img-li3 div:hover { background: url(../img/03logo-mabplex.png) no-repeat center, linear-gradient(0deg, transparent 0%, RGBA(0, 150, 125, .5) 0) right; background-size: 50%; border-bottom-left-radius: 0; } .business-img-li4:hover { border-bottom-right-radius: 0; } .business-img-li4 div { background: url(../img/04logo-yy.png) no-repeat center, linear-gradient(0deg, transparent 0%, rgba(80, 30, 150, .5) 0) right; background-size: 42%; } .business-img-li4 div:hover { background: url(../img/04logo-yy.png) no-repeat center, linear-gradient(0deg, transparent 0%, rgba(80, 30, 150, .5) 0) right; background-size: 47%; border-bottom-right-radius: 0; } .product { height: 380px; } .product-con { top: unset; min-height: unset; } .product-con .block-name p { font-size: 0.9rem; } .product-pagination .swiper-pagination-bullet { margin: 0 0 !important; } .product-pagination .swiper-pagination-bullet p { display: none; } .pro-wapper { margin-top: 50px; } .product-nextpre { margin-top: 10%; position: relative; width: 40%; } .pro-wapper .swiper-slide { width: 100%; height: 127px; } .pro-wapper .swiper-slide-active img { border-top-right-radius: 0; } .pro-wapper .swiper-slide a.pro-btn { line-height: 32px; width: 92px; height: 32px; border-radius: 12px; font-size: 16px; bottom: 18%; } .product-nextpre .product-btn-prev, .product-nextpre .product-btn-next { width: 35px; height: 35px; } }