@charset "utf-8"; .main-box { padding-bottom: 0; } /*** 公共 ****/ .home-banner { width: 100%; height: 39.5em; position: relative; overflow: hidden; } .home-banner .imgs { position: absolute; top: 0; left: 0; width: 100%; background-repeat: no-repeat center; background-size: cover; } .home-banner .imgs.web { width: 100%; height: 100%; } .home-banner .swiper-pagination { left: 50%; bottom: -5.3em; transform: translateX(-50%); } .home-banner .swiper-pagination-bullet { width: .8em; height: .85em; margin: 0 .6em; background: no-repeat center; background-size: contain; background-image: url(/img/images/kong.svg); } .home-banner .swiper-pagination-bullet:first-child { margin-left: 0; } .home-banner .swiper-pagination-bullet:last-child { margin-right: 0; } .home-banner .swiper-pagination-bullet-active { opacity: 1; background-image: url(/img/images/shi.svg); } .home-banner .swiper-button-prev:after, .home-banner .swiper-button-next:after { content: ''; } .home-banner .home-btn-next, .home-banner .home-btn-prev { width: 1.1em; height: 1.9em; background: no-repeat; bottom: 7.75em; top: 50%; transform: translateY(-50%); } .home-banner .home-btn-next { left: auto; right: 4em; transform: rotate(180deg); background-image: url(/img/images/home-left.svg); } .home-banner .home-btn-prev { left: 4em; background-image: url(/img/images/home-right.svg); } .home-banner .global-inner-btn { height: auto; margin: 0 auto; margin-top: -150px; } .p-home .main-box { padding-top: 5.8em; } @media (max-width: 991.98px) { .home-banner { height: 7.8rem; margin-top: 1.2rem; } .home-banner .imgs.app { width: 100%; height: 7.8rem; } .home-banner .global-inner-btn { margin-top: -3.15rem; } .home-banner .home-btn-next, .home-banner .home-btn-prev { width: 1.1rem; height: .3rem; background: no-repeat; } .home-banner .home-btn-next { left: 1.6rem; background-image: url(/img/images/banner-right.svg); } .home-banner .home-btn-prev { left: .4rem; background-image: url(/img/images/banner-left.svg); } .home-banner .swiper-pagination { right: .4rem; bottom: -2.7rem; } .home-banner .swiper-pagination-bullet { width: .2rem; height: .2rem; } .p-home .main-box { padding-top: 1.14rem; } } .gswip-paging { position: absolute; top: 35.13%; left: 50%; width: 100%; text-align: center; opacity: 0; transform: translateX(-40%); } .gswip-paging .tit { font-size: 3em; font-weight: bold; color: #fff; text-align: center; text-shadow: 2px 1px 1px black; color: #fff; } .gswip-paging .doc { font-size: 1.4em; line-height: 1.5em; color: #fff; margin-top: 1.083em; margin-top: 1em; text-shadow: 2px 1px 1px black; color: #fff; } @media (max-width: 991.98px) { .gswip-paging { left: 0%; transform: translateX(0); padding: 0 .7rem; } .gswip-paging .tit { top: 30%; left: .4rem; margin-left: 0; font-size: .56rem; line-height: 1; } .gswip-paging .doc { font-size: .28rem; line-height: .42rem; margin-top: .75em; margin-left: 0; text-align: center; text-shadow: 0px 2px 0px 0px rgba(27, 33, 60, 0.5); } } .public-search { width: 60%; margin: 0 auto; margin-top: 1.65em; margin-bottom: 3.5em; } .public-search .public-area .nav-right { width: 100%; padding-left: 0; } .public-search .boxs { display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; } .public-search .boxs .left { width: 84.73%; height: 3.25em; } .public-search .boxs .left .search-input { width: 100%; height: 100%; font-size: .9em; padding-left: 1em; line-height: 1; color: #999; color: #666; background-color: #f0f2f5; } .public-search .boxs .left .search-input::-webkit-input-placeholder { color: #999; } .public-search .boxs .right { width: 15.27%; height: 3.25em; color: #fff; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; background-color: #064b84; } .public-search .boxs .right .box { width: 100%; height: 100%; font-size: .9em; line-height: 1; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; } .public-search .boxs .right .bi { width: .5em; height: .8em; margin-left: .7em; } .product-center .doc, .product-center .title { text-align: center; } .product-center .title { font-size: 1.6em; font-weight: bold; line-height: 1; color: #002d72; margin-bottom: .5em; } .product-center .doc { font-size: .9em; line-height: 1.66; color: #32373e; } .product-center .list { display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; margin: 0 -1.6em; } .product-center .item { padding: 0 1.6em; border-right: 1px solid #e0e5e9; } .product-center .item:last-child { padding-right: 0; border-right: 0; } .product-center .imgs { position: relative; width: 5em; height: 5em; margin-bottom: .65em; overflow: hidden; } .product-center img { width: 100%; height: 100%; object-fit: cover; } .product-center .docx { font-size: .8em; line-height: 1; text-align: center; } .product-center .swiper-pagination { bottom: -.7rem; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); } .product-center .swiper-pagination-bullet { width: .16rem; height: .16rem; margin: .1rem; background-color: #ccc; } .product-center .swiper-pagination-bullet-active { background-color: #064b84; } @media (max-width: 991.98px) { .public-search { width: 100%; margin: 0; margin-top: .41rem; margin-bottom: .7rem; } .public-search .public-area .nav-right { width: 100%; padding-left: 0; } .public-search .boxs .left { width: 78.46%; height: .8rem; } .public-search .boxs .left .search-input { width: 100%; height: 100%; font-size: .28rem; padding-left: .3rem; line-height: 1; } .public-search .boxs .right { width: 21.54%; height: .8rem; } .public-search .boxs .right .box { width: 100%; height: 100%; font-size: .32rem; line-height: 1; } .public-search .boxs .right .bi { width: .17rem; height: .27rem; margin-left: .19rem; } .product-center .doc, .product-center .title { text-align: center; } .product-center .title { font-size: .46rem; font-weight: bold; line-height: 1; color: #002d72; margin-bottom: .3rem; } .product-center .doc { font-size: .28rem; line-height: .46rem; } .product-center .list { display: flex; display: -webkit-flex; margin: 0 -1.6em; } .product-center .item { padding: 0 1.6em; border-right: 1px solid #e0e5e9; } .product-center .item:last-child { padding-right: 0; border-right: 0; } .product-center .imgs { position: relative; width: 5em; height: 5em; margin-bottom: .65em; overflow: hidden; } .product-center img { width: 100%; height: 100%; object-fit: contain; } .product-center .docx { font-size: .8em; line-height: 1; text-align: center; } .product-center-swiper { position: relative; overflow: hidden; } .product-center-swiper .item-slide { position: relative; } .product-center-swiper .item-slide::after { position: absolute; content: ''; top: 0; right: -.4rem; width: 1px; height: 100%; height: 1.6rem; background-color: #e0e5e9; } .product-center-swiper .box { width: 100%; height: 100%; border-right: 1px solid red; border-right: 0; } .product-center-swiper .item:last-child { padding-right: 0; border-right: 0; } .product-center-swiper .imgs { position: relative; width: 100%; height: 1rem; margin-bottom: .22rem; overflow: hidden; border-radius: 50%; } .product-center-swiper .docx { font-size: .26rem; line-height: .36rem; text-align: center; } } .technology { position: relative; margin-top: 7em; padding-bottom: 4em; } .technology .technology-bgk { position: absolute; bottom: 0; left: 0; width: 100%; height: 28.5em; background: no-repeat center; background-size: cover; } .technology .boxs { position: relative; } .technology .bgk { position: absolute; top: 0; right: 0; width: 64.0625%; height: 100%; z-index: 3; } .technology .bgk1 { width: 64.584%; width: 7.6%; background-color: red; background-color: #f0f2f5; opacity: .5; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 32% 100%); } .technology .bgk2 { width: 11.5%; background-color: blue; background-color: #f0f2f5; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 77.1% 100%); opacity: .3; } .technology .title { font-size: 1.6em; line-height: 1; font-weight: bold; text-align: center; color: #002d72; } .technology .boxs { margin-top: 1.8em; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; } .technology .left { width: 100%; width: 80.285%; max-width: 29.25em; margin-left: 0em; z-index: 2; } .technology .left .imgs { position: relative; width: 100%; height: 21em; overflow: hidden; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } .technology .left img { width: 100%; height: 100%; object-fit: cover; } .technology .right { width: 51.79%; margin-top: 1.5em; padding-left: 2.5em; z-index: 4; } .technology .right .title { font-size: 1.6em; line-height: 1; font-weight: bold; color: #002d72; } .technology .right .doc { font-size: .9em; line-height: 1.66; color: #333; margin-top: 0em; } .technology .right .biology { margin-top: 1.8em; } .technology .right .biology .list { display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; } .technology .right .biology .list .item { margin-right: 7.5em; margin-bottom: 1.75em; } @media (min-width: 1360px) and (max-width: 1660px) { .technology .right .biology .list .item { width: 30%; } } .technology .right .biology .list .item .box { font-size: 1em; font-weight: bold; line-height: 1; color: #333; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; } .technology .right .biology .list .item img { width: 1.1em; height: 1.1em; margin-right: .8em; } .technology .right .biology .list .item:nth-child(even) { margin-right: 0; } .technology .right .biology .list .item:nth-last-child(1), .technology .right .biology .list .item:nth-last-child(2) { margin-bottom: 0; } .technology .right .down { margin-top: 4.2em; } .technology .right .down .tit { font-size: 1em; font-weight: bold; color: #002d72; line-height: 1; margin-bottom: 1.2em; } .technology .right .down .item { display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; margin-bottom: .5em; } .technology .right .down .item:last-child { margin-bottom: 0; } .technology .right .down .docx { font-size: .8em; line-height: 1.75em; display: inline-block; } .technology .right .down .bi { width: .75em; height: .75em; margin-left: .9em; color: #002d72; } .technology .more-more { width: 9em; height: 1.9em; margin-top: 3.6em; background-color: #27aee5; } .technology .more-more .box { width: 100%; height: 100%; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between; font-size: .8em; color: #fff; padding: 0 2em; } .technology .more-more .box .bi { width: .75em; height: .75em; margin-left: .75em; } @media (max-width: 991.98px) { .technology { margin-top: 1.5rem; background-color: #f0f2f5; padding-top: .6rem; padding-bottom: 0; } .technology .boxs { position: relative; } .technology .bgk { display: none; } .technology .boxs { display: block; } .technology .left { width: 100%; max-width: 100%; margin-left: 0; z-index: 2; } .technology .left .imgs { position: relative; width: 100%; height: 5.2rem; overflow: hidden; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } .technology .left img { width: 100%; height: 100%; object-fit: cover; } .technology .right { width: 100%; margin-top: .75rem; padding-left: 0; padding-bottom: 1rem; z-index: 4; } .technology .right .title { font-size: .46rem; line-height: 1; } .technology .right .doc { font-size: .28rem; line-height: .46rem; margin-top: .38rem; } .technology .right .biology { margin-top: .49rem; } .technology .right .biology .list .item { width: 50%; margin-right: 1.48rem; margin-right: 0rem; margin-bottom: .53rem; } .technology .right .biology .list .item .box { font-size: .3rem; font-weight: bold; line-height: 1; } .technology .right .biology .list .item img { width: .33rem; height: .33rem; margin-right: .26rem; } .technology .right .biology .list .item:nth-child(even) { margin-right: 0; } .technology .right .biology .list .item:nth-last-child(1), .technology .right .biology .list .item:nth-last-child(2) { margin-bottom: 0; } .technology .right .down { margin-top: .82rem; } .technology .right .down .tit { font-size: .32rem; line-height: 1; margin-bottom: .37rem; } .technology .right .down .item { margin-bottom: .3rem; } .technology .right .down .item:last-child { margin-bottom: 0; } .technology .right .down .docx { font-size: .3rem; line-height: 1; } .technology .right .down .bi { width: .28rem; height: .25rem; margin-left: .13rem; color: #002d72; } } .new-news { margin-top: 3.9em; } .new-news .title { font-size: 1.6em; line-height: 1; font-weight: bold; text-align: center; color: #002d72; } .new-news .list { margin-top: 3.75em; } .new-news .list .box { display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between; } .new-news .list .item { padding: 2em 0; border-bottom: 1px solid #dedfe2; } .new-news .list .item:first-child { padding-top: 0; } .new-news .list .left { width: 18.334%; margin-right: 2.8em; } .new-news .list .left .imgs { position: relative; width: 11em; height: 7.5em; overflow: hidden; } .new-news .list .left img { width: 100%; height: 100%; object-fit: cover; } .new-news .list .right { width: 72.666%; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between; } .new-news .list .right .right-right { margin-left: 4.75em; margin-right: .55em; } .new-news .list .right .time { font-size: .7em; line-height: 1; color: #044482; margin-bottom: 2.14em; } .new-news .list .right .tit { height: 1em; font-size: 1em; line-height: 1; color: #333; font-weight: bold; margin-bottom: .65em; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } .new-news .list .right .doc { font-size: .8em; line-height: 1.375; color: #666; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .new-news .list .right .more { font-size: .8em; line-height: 1; color: #27aee5; white-space: nowrap; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; } .new-news .list .right .bi { width: .5em; height: .88em; margin-left: 3px; } .new-news .more-more { width: 9em; height: 1.9em; margin: 0 auto; margin-top: 2.5em; background-color: #27aee5; } .new-news .more-more .box { width: 100%; height: 100%; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; font-size: .8em; color: #fff; } .new-news .more-more .box .bi { width: .75em; height: .75em; margin-left: .75em; } @media (max-width: 991.98px) { .new-news { margin-top: 1.13rem; } .new-news .title { font-size: 1.6em; line-height: 1; font-weight: bold; text-align: center; color: #002d72; } .new-news .list { margin-top: .6rem; } .new-news .list .box { display: block; } .new-news .list .item { padding: .6rem 0; border-bottom: 1px solid #dedfe2; } .new-news .list .item:first-child { padding-top: 0; } .new-news .list .left { width: 100%; margin-right: 0em; } .new-news .list .left .imgs { position: relative; width: 100%; height: 4.4rem; overflow: hidden; } .new-news .list .right { display: block; margin-top: .48rem; } .new-news .list .right .right-right { margin-left: 0em; } .new-news .list .right .time { font-size: .28rem; line-height: 1; margin-bottom: .31rem; } .new-news .list .right .tit { height: .96rem; font-size: .32rem; line-height: .48rem; margin-bottom: .65em; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .new-news .list .right .doc { font-size: .28rem; line-height: .46rem; } .new-news .list .right .more { margin-top: .4rem; font-size: .28rem; line-height: 1; } .new-news .list .right .bi { width: .15rem; height: .26rem; margin-left: .17rem; } .new-news .more-more { width: 3rem; height: .6rem; margin: 0 auto; margin-top: .6rem; } .new-news .more-more .box { font-size: .28rem; color: #fff; } .new-news .more-more .box .bi { width: .22rem; height: .22rem; margin-left: .2rem; } } .about { margin-top: 5.25em; background-color: #f0f2f5; } .about .boxs { position: relative; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between; } .about .bgk { position: absolute; top: 0; left: 0; width: 64.0625%; height: 25em; } .about .bgk1 { width: 72.5%; background-color: red; background-color: #f0f2f5; clip-path: polygon(0% 0%, 100% 0, 92% 100%, 0 100%); z-index: 2; } .about .bgk2 { width: 73.75%; background-color: #f0f2f5; clip-path: polygon(0% 0%, 100% 0, 97.8% 100%, 0 100%); z-index: 2; opacity: .5; } .about .bgk3 { width: 75.835%; background-color: #f0f2f5; clip-path: polygon(0% 0%, 100% 0, 91.8% 100%, 0 100%); z-index: 2; opacity: .8; } .about .left { position: relative; max-width: 66.25%; z-index: 2; } .about .left .tit { font-size: 1.6em; font-weight: bold; line-height: 1; color: #002d72; margin-bottom: .65em; } .about .left .doc { font-size: .9em; line-height: 1.66; color: #32373e; } .about .right { width: 100%; margin-right: -18em; z-index: 1; } .about .right .imgs { position: relative; width: 100%; height: 25em; overflow: hidden; clip-path: polygon(5% 0%, 100% 0%, 100% 100%, 0% 100%); } .about .right .imgs img { width: 100%; height: 100%; object-fit: cover; } .about .list { max-width: 100%; margin-top: 2.3em; display: flex; display: -webkit-flex; } .about .item { color: #002d72; padding: 0 1.6em 0 2.3em; border-right: 1px solid #ccd5e1; } .about .item:first-child { padding-left: 0; } .about .item:last-child { padding-right: 0; border-right: 0; } .about .top { display: flex; display: -webkit-flex; align-items: baseline; -webkit-align-items: baseline; } .about .num { font-size: 1.9em; line-height: 1; font-weight: bold; color: #27aee5; } .about .unit { font-size: .8em; color: rgba(108, 146, 140, 0.8); } .about .docx { margin-top: .8125em; font-size: .75em; line-height: 1.375; color: rgba(50, 55, 62, 0.8); } .about .more { margin-top: 5.15em; } .about .more .box { font-size: .8em; line-height: 1; color: #27aee5; white-space: nowrap; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; } .about .bi { width: .5em; height: .88em; margin-left: 3px; } @media (max-width: 991.98px) { .about { margin-top: 1.2rem; padding-top: .84rem; background-color: #f0f2f5; } .about .boxs { display: block; } .about .bgk { display: none; position: absolute; top: 0; left: 0; width: 64.0625%; height: 25em; } .about .bgk1 { width: 72.5%; background-color: red; background-color: #f0f2f5; clip-path: polygon(0% 0%, 100% 0, 92% 100%, 0 100%); z-index: 2; } .about .bgk2 { width: 73.75%; background-color: #f0f2f5; clip-path: polygon(0% 0%, 100% 0, 97.8% 100%, 0 100%); z-index: 2; opacity: .5; } .about .bgk3 { width: 75.835%; background-color: #f0f2f5; clip-path: polygon(0% 0%, 100% 0, 91.8% 100%, 0 100%); z-index: 2; opacity: .8; } .about .left { position: relative; max-width: 100%; z-index: 2; } .about .left .tit { font-size: .46rem; font-weight: bold; line-height: 1; color: #002d72; margin-bottom: .65em; } .about .left .doc { font-size: .28rem; line-height: .46rem; color: #32373e; } .about .right { width: 100%; margin-right: -18em; margin-right: 0; z-index: 1; margin-top: .6rem; } .about .right .imgs { position: relative; width: 115%; height: 5rem; margin-left: -.5rem; overflow: hidden; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } .about .right .imgs img { width: 100%; height: 100%; object-fit: fill; } .about .list { max-width: 100%; margin-top: .52rem; display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; } .about .item { color: #002d72; padding: 0 1.6em 0 2.3em; border-right: 1px solid #ccd5e1; } .about .item:nth-child(1), .about .item:nth-child(2) { margin-bottom: .66rem; } .about .item:first-child { padding-left: 0; } .about .item:last-child { padding-right: 0; border-right: 0; } .about .item:nth-child(3) { padding-left: 0; } .about .item:nth-child(2) { border-right: 0; } .about .top { display: flex; display: -webkit-flex; align-items: baseline; -webkit-align-items: baseline; } .about .num { font-size: 1.9em; line-height: 1; font-weight: bold; color: #27aee5; } .about .unit { font-size: .8em; color: rgba(108, 146, 140, 0.8); } .about .docx { margin-top: .8125em; font-size: .26rem; line-height: 1.375; color: rgba(50, 55, 62, 0.8); } .about .more { margin-top: .8rem; } .about .more .box { font-size: .28rem; line-height: 1; } .about .bi { width: .22rem; height: .22rem; margin-left: .2rem; } } .new-news .list .item .right-left { transition: .3s; -webkit-transition: .3s; } @media (min-width: 991.98px) { .new-news .list .item img { transition: .3s; -webkit-transition: .3s; } .about .more:hover .box { color: #002d72; } .new-news .list .item:hover .tit { color: #002d72; } .new-news .list .item:hover img { transition: .3s; -webkit-transition: .3s; transform: scale(1.02); -webkit-transform: scale(1.02); } .new-news .list .item:hover .right-left { transition: .3s; -webkit-transition: .3s; transform: translateX(10px); -webkit-transform: translateX(10px); } .new-news .list .item:hover .right-right .time, .new-news .list .item:hover .right-right .more { color: #002d72; } .new-news .more-more { transition: .3s; -webkit-transition: .3s; } .new-news .more-more:hover { transition: .3s; -webkit-transition: .3s; background-color: #002d72; } .technology .right .down .item:hover .docx { color: #002d72; } .product-center .item .imgs { transition: .3s; -webkit-transition: .3s; } .product-center .item:hover .imgs { transition: .3s; -webkit-transition: .3s; transform: translateY(-10px); -webkit-transform: translateY(-10px); } .product-center .item:hover .docx { color: #002d72; } .technology .right .biology .list .item a .docx { transition: all .3s ease-out, right .2s ease-out; } .technology .right .biology .list .item:hover a .docx { transform: translateX(10px); transition: all .3s ease-out, right .2s ease-out; } .about .right img, .about .bgk2, .technology .bgk2, .technology .left img { transition: all .5s ease-out, right .5s ease-out; -webkit-transition: all .5s ease-out, right .5s ease-out; } .technology.active .left img { transform: scale(1.02); -webkit-transform: scale(1.02); transition: all .5s ease-out, right .5s ease-out; -webkit-transition: all .5s ease-out, right .5s ease-out; } .technology.active .bgk2 { transition: all .5s ease-out, right .5s ease-out; -webkit-transition: all .5s ease-out, right .5s ease-out; width: 13.5%; } .about.active .right img { transform: scale(1.02); -webkit-transform: scale(1.02); transition: all .5s ease-out, right .5s ease-out; -webkit-transition: all .5s ease-out, right .5s ease-out; } .about.active .bgk2 { transition: all .5s ease-out, right .5s ease-out; -webkit-transition: all .5s ease-out, right .5s ease-out; width: 75.1%; } } header .head-navlist .navitem:first-child::before { display: none; } .scaleUpDown { transition: .3s; -webkit-transition: .3s; transform: translateX(-50%); opacity: 1; } @media (max-width: 991.98px) { .scaleUpDown { transform: translateX(0%); } } .yd { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; } .video-js.vjs-paused .vjs-big-play-button { opacity: 0; } .vjs-poster { background-color: #f3fcfb; } .video-js { background-color: transparent; background-color: #f3fcfb; } .footer { background-color: #fff; }