.banner { background-color: #00549e; position: relative; z-index: 2; } .banner.fp-section-active .swiper-slide.animate .text .title .letter-ani, .banner.fp-section-active .swiper-slide.animate .text .slogan .letter-ani { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); min-width: 0.5em; } .banner.fp-section-active .swiper-slide.animate .text img { opacity: 1; visibility: visible; -webkit-transform: none; -ms-transform: none; transform: none; } .banner.fp-section-active .swiper-slide.animate:not(.swiper-slide-active) .text .title .letter-ani, .banner.fp-section-active .swiper-slide.animate:not(.swiper-slide-active) .text .slogan .letter-ani { opacity: 0; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .banner.fp-section-active .swiper-slide.animate:not(.swiper-slide-active) .text img { opacity: 0; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .banner:not(.fp-section-active) .swiper-slide.animate .text .title .letter-ani, .banner:not(.fp-section-active) .swiper-slide.animate .text .slogan .letter-ani { opacity: 0; transition-delay: 0s !important; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .banner:not(.fp-section-active) .swiper-slide .text .title .letter-ani, .banner:not(.fp-section-active) .swiper-slide .text .slogan .letter-ani { opacity: 0; transition-delay: 0s !important; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .banner:not(.fp-section-active) .swiper-slide .text img { opacity: 0; transition-delay: 0s !important; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .banner .kefuBtn { position: absolute; z-index: 3; bottom: 75px; right: 60px; width: 50px; height: 50px; background-color: #333; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; } @media screen and (max-width: 1920px) { .banner .kefuBtn { right: calc(60 / 1920 * 100vw); bottom: calc(75 / 1920 * 100vw); width: clamp(35px, calc(50 / 1920 * 100vw), 50px); height: clamp(35px, calc(50 / 1920 * 100vw), 50px); } } @media screen and (max-width: 750px) { .banner .kefuBtn { right: 0.3rem; bottom: 0.4rem; width: 0.7rem; height: 0.7rem; } } .banner .kefuBtn img { display: block; max-width: calc(40 / 50 * 100%); max-height: calc(40 / 50 * 100%); } .banner .kefuBtn span { position: absolute; left: 50%; bottom: 100%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); color: #333; font-size: calc(10 / 16 * 1em); white-space: nowrap; height: 25px; padding: 0 8px; background-color: #fff; -webkit-border-radius: 13px; -ms-border-radius: 13px; border-radius: 13px; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; } @media screen and (max-width: 750px) { .banner .kefuBtn span { height: 0.4rem; } } .banner .kefuBtn span::after { content: ''; position: absolute; left: 50%; top: 100%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 0; border: 4px solid; border-color: #fff transparent transparent transparent; } .banner .slider-bg-svg { position: absolute; left: 0; top: 0; } .banner .swiper .pagination { position: absolute; z-index: 9; bottom: 75px; left: 60px; } @media screen and (max-width: 1920px) { .banner .swiper .pagination { left: calc(60 / 1920 * 100vw); bottom: calc(75 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .banner .swiper .pagination { bottom: 0.4rem; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } } .banner .swiper .pagination.single { display: none; } .banner .swiper .pagination .control { color: #fff; font-size: calc(14 / 16 * 1em); cursor: pointer; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; } @media screen and (max-width: 750px) { .banner .swiper .pagination .control .pert { font-size: 0.2rem; } } .banner .swiper .pagination .control .icon-pause { display: block; } .banner .swiper .pagination .control .icon-play { display: none; } .banner .swiper .pagination .control .pause .icon-pause { display: none; } .banner .swiper .pagination .control .pause .icon-play { display: block; } .banner .swiper .swiper-pagination { position: static; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; } .banner .swiper .swiper-pagination .swiper-pagination-bullet { width: 5px; height: 5px; background-color: #fff; -webkit-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; opacity: 1; margin: 0 5px 0 0; -webkit-transition: 0.55s; -ms-transition: 0.55s; transition: 0.55s; } @media screen and (max-width: 750px) { .banner .swiper .swiper-pagination .swiper-pagination-bullet { width: 0.05rem; height: 0.05rem; margin: 0 0.05rem; } } .banner .swiper .swiper-pagination .swiper-pagination-bullet:last-child { margin-right: 0; } .banner .swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; width: 250px; } @media screen and (max-width: 1920px) { .banner .swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { width: clamp(40px, calc(250 / 1920 * 100vw), 250px); } } @media screen and (max-width: 750px) { .banner .swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 2.5rem; } } .banner .swiper .swiper-prev, .banner .swiper .swiper-next { color: #fff; font-size: calc(12 / 16 * 1em); position: absolute; z-index: 9; top: 50%; cursor: pointer; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 60px; height: 60px; background-color: rgba(255,255,255,0.3); -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; } @media screen and (max-width: 1920px) { .banner .swiper .swiper-prev, .banner .swiper .swiper-next { width: clamp(40px, calc(60 / 1920 * 100vw), 60px); height: clamp(40px, calc(60 / 1920 * 100vw), 60px); } } @media screen and (max-width: 750px) { .banner .swiper .swiper-prev, .banner .swiper .swiper-next { width: 0.8rem; height: 0.8rem; } } .banner .swiper .swiper-prev.swiper-button-disabled, .banner .swiper .swiper-next.swiper-button-disabled { background-color: rgba(255,255,255,0.1); cursor: default; } .banner .swiper .swiper-prev:not(.swiper-button-disabled):hover, .banner .swiper .swiper-next:not(.swiper-button-disabled):hover { color: #fff; background-color: #00549e; } .banner .swiper .swiper-prev { left: 60px; } @media screen and (max-width: 1920px) { .banner .swiper .swiper-prev { left: calc(60 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .banner .swiper .swiper-prev { left: 0.3rem; } } .banner .swiper .swiper-next { right: 60px; } @media screen and (max-width: 1920px) { .banner .swiper .swiper-next { right: calc(60 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .banner .swiper .swiper-next { right: 0.3rem; } } .banner .swiper .swiper-slide { height: 100vh; position: relative; overflow: hidden; /* &.prev { .bg, .bg_m { // clip-path: url(#slider-clipping) clip-path: circle(0% at 0% 50%) } } &.swiper-slide-next { .bg, .bg_m { clip-path: circle(0% at 100% 50%) } & + .swiper-slide { .bg, .bg_m { clip-path: circle(0% at 100% 50%) } & + .swiper-slide { .bg, .bg_m { clip-path: circle(0% at 100% 50%) } & + .swiper-slide { .bg, .bg_m { clip-path: circle(0% at 100% 50%) } } } } } &.tonext { .bg, .bg_m { clip-path: circle(200% at 100% 50%) @media screen and (max-width: 750px) { clip-path: circle(100% at 100% 50%) } } } &.toprev { .bg, .bg_m { clip-path: circle(200% at 0% 50%) @media screen and (max-width: 750px) { clip-path: circle(100% at 0% 50%) } } & + .swiper-slide { .bg, .bg_m { clip-path: circle(200% at 100% 50%) !important } } } */ } .banner .swiper .swiper-slide.swiper-slide-active .bg, .banner .swiper .swiper-slide.swiper-slide-active .bg_m { clip-path: circle(200% at 100% 50%); } .banner .swiper .swiper-slide.swiper-slide-prev .bg, .banner .swiper .swiper-slide.swiper-slide-prev .bg_m { clip-path: circle(200% at 100% 50%); } .banner .swiper .swiper-slide.swiper-slide-next { clip-path: circle(0% at 100% 50%); } .banner .swiper .swiper-slide:not(.swiper-slide-active) .text .slogan .letter-ani { opacity: 0; transition-delay: 0s !important; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .banner .bg, .banner .bg_m { height: 100%; background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover; -webkit-transform: matrix(1, 0, 0, 1, 0, 0); -ms-transform: matrix(1, 0, 0, 1, 0, 0); transform: matrix(1, 0, 0, 1, 0, 0); clip-path: circle(0% at 100% 50%); -webkit-transition: clip-path 2s ease-out; -ms-transition: clip-path 2s ease-out; transition: clip-path 2s ease-out; } .banner .bg { display: block; } @media screen and (max-width: 990px) { .banner .bg { display: none; } } .banner .bg_m { display: none; } @media screen and (max-width: 990px) { .banner .bg_m { display: block; } } .banner .text { color: #fff; position: absolute; left: 0; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @media screen and (max-width: 750px) { .banner .text { text-align: center; top: calc(280 / 1360 * 100vh); -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } } .banner .text.text_2 .title { font-size: 44px; } @media screen and (max-width: 1920px) { .banner .text.text_2 .title { font-size: clamp(20px, calc(44 / 1920 * 100vw), 44px); } } @media screen and (max-width: 750px) { .banner .text.text_2 .title { font-size: 0.36rem; } } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .banner .text.text_2 .title { font-size: clamp(20px, calc(44 / 1080 * 100vh), calc(44 / 1920 * 100vw)); } } .banner .text.text_2 .slogan { font-size: 120px; margin-bottom: 10px; } @media screen and (max-width: 1920px) { .banner .text.text_2 .slogan { font-size: clamp(60px, calc(120 / 1920 * 100vw), 120px); margin-bottom: calc(10 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .banner .text.text_2 .slogan { font-size: 0.6rem; margin-bottom: 0.1rem; } } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .banner .text.text_2 .slogan { font-size: clamp(60px, calc(120 / 1080 * 100vh), calc(120 / 1920 * 100vw)); margin-bottom: calc(10 / 1080 * 100vh); } } .banner .text .title { font-size: 36px; line-height: 1.1; margin-bottom: 10px; } @media screen and (max-width: 1920px) { .banner .text .title { font-size: calc(36 / 1920 * 100vw); margin-bottom: calc(10 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .banner .text .title { font-size: 0.36rem; margin-bottom: 0.1rem; } } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .banner .text .title { font-size: calc(36 / 1080 * 100vh); margin-bottom: calc(10 / 1080 * 100vh); } } .banner .text .slogan { font-size: 72px; font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; line-height: 1.1; margin-bottom: 30px; } @media screen and (max-width: 1920px) { .banner .text .slogan { font-size: calc(72 / 1920 * 100vw); margin-bottom: calc(30 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .banner .text .slogan { font-size: 0.6rem; line-height: calc(80 / 60); margin-bottom: 0.3rem; } } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .banner .text .slogan { font-size: calc(72 / 1080 * 100vh); margin-bottom: calc(30 / 1080 * 100vh); } } .banner .text img { max-height: 100px; max-width: 100%; } @media screen and (max-width: 1920px) { .banner .text img { max-height: calc(100 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .banner .text img { max-height: 0.65rem; } } .banner .text img:nth-child(1) { transition-delay: 0s; } .banner .text img:nth-child(2) { transition-delay: 0.1s; } .banner .text img:nth-child(3) { transition-delay: 0.2s; } .banner .text img:nth-child(4) { transition-delay: 0.3s; } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .banner .text img { max-height: calc(100 / 1080 * 100vh); } } .banner .text img { opacity: 0; visibility: hidden; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webkit-transition: 0.75s linear; -ms-transition: 0.75s linear; transition: 0.75s linear; } .index_mission { position: relative; background-image: url("../images/bg2.jpg"); background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover; } .index_mission.fp-section .circle_mask_box { opacity: 1; visibility: visible; } .index_mission.swiper-active-section .text .letter-ani, .index_mission.fp-completely .text .letter-ani { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .index_mission.swiper-active-section .circle_mask_box .text .letter-ani, .index_mission.fp-completely .circle_mask_box .text .letter-ani { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .index_mission.swiper-active-section .circle_mask_box .text .intro, .index_mission.fp-completely .circle_mask_box .text .intro { opacity: 1; visibility: visible; } .index_mission.swiper-active-section .circle_mask_box .box, .index_mission.active .circle_mask_box .box { clip-path: circle(0%); } .index_mission.swiper-active-section .bgslider, .index_mission.active .bgslider { opacity: 1; } .index_mission.swiper-active-section .bgslider .swiper-slide.swiper-slide-active .text, .index_mission.active .bgslider .swiper-slide.swiper-slide-active .text { display: block; } .index_mission.swiper-active-section .bgslider .swiper-slide.swiper-slide-active .text .letter-ani, .index_mission.active .bgslider .swiper-slide.swiper-slide-active .text .letter-ani { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .index_mission.swiper-active-section .bgslider .swiper-slide.swiper-slide-active .text .intro, .index_mission.active .bgslider .swiper-slide.swiper-slide-active .text .intro { opacity: 1; visibility: visible; font-size: 1.6rem; } @media screen and (max-width: 750px) { .index_mission.swiper-active-section .bgslider .swiper-slide.swiper-slide-active .text .intro, .index_mission.active .bgslider .swiper-slide.swiper-slide-active .text .intro { font-size: .21rem; } } .index_mission.shownotice .notice_list { opacity: 1; visibility: visible; } .index_mission .notice_list { position: absolute; z-index: 2; left: 60px; /* top: calc(420 / 1080 * 100vh); */ top: calc(320 / 1080 * 100vh); overflow: hidden; -webkit-transition: 1s; -ms-transition: 1s; transition: 1s; } @media screen and (max-width: 1920px) { .index_mission .notice_list { left: calc(60 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .index_mission .notice_list { left: 0.3rem; right: 0.3rem; top: calc(200 / 1080 * 100vh + 50px); } } .index_mission .notice_list .list_item { font-size: calc(18 / 16 * 1em); font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 400; padding: 10px 15px; height: 25px; display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline-flex; align-items: center; } @media screen and (max-width: 750px) { .index_mission .notice_list .list_item { font-size: 1em; padding: 0.15rem 0.3rem; /* height: 0.5rem; */ height: auto; line-height: 1.2; } } .index_mission .notice_list .swiper { height: 45px; background-color: rgba(38,97,163,0.15); -webkit-border-radius: 24px; -ms-border-radius: 24px; border-radius: 24px; } @media screen and (max-width: 750px) { .index_mission .notice_list .swiper { /* height: 0.8rem; */ height: auto; -webkit-border-radius: 0.4rem; -ms-border-radius: 0.4rem; border-radius: 0.4rem; } } .index_mission .circle_mask_box { position: absolute; z-index: 2; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; overflow-y: auto; opacity: 0; visibility: hidden; } .index_mission .circle_mask_box .bg, .index_mission .circle_mask_box .bg_m { height: 100%; background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover; } @media screen and (max-width: 750px) { .index_mission .circle_mask_box .bg { display: none; } } .index_mission .circle_mask_box .bg_m { display: none; } @media screen and (max-width: 750px) { .index_mission .circle_mask_box .bg_m { display: block; } } .index_mission .circle_mask_box .scroll { position: relative; z-index: 2; height: calc(100vh + 50px); /* @media (max-aspect-ratio: 1920/960) { height: 300vh } @media (min-aspect-ratio: 1920/960) { height: 300vw } */ } .index_mission .circle_mask_box .box { position: fixed; z-index: 2; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; clip-path: circle(52%); -webkit-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .index_mission .circle_mask_box .circle { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100vw; height: 100vw; border: 30px solid #fff; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; opacity: 0; } @media screen and (max-width: 1920px) { .index_mission .circle_mask_box .circle { border-width: calc(30 / 1920 * 100vw); } } @media (min-aspect-ratio: 1920/960) { .index_mission .circle_mask_box .circle { border-width: clamp(5px, calc(30 / 1080 * 100vh), 30px); } } .index_mission .circle_mask_box .text { text-align: center; position: absolute; left: 0; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @media screen and (max-width: 750px) { .index_mission .circle_mask_box .text { font-size: 0.27rem; } } .index_mission .circle_mask_box .text .title { color: #00549e; font-size: 30px; line-height: calc(50 / 30); margin-bottom: 25px; } @media screen and (max-width: 1920px) { .index_mission .circle_mask_box .text .title { font-size: clamp(16px, calc(30 / 1920 * 100vw), 30px); margin-bottom: calc(25 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .index_mission .circle_mask_box .text .title { font-size: 0.28rem; margin-bottom: 0.2rem; } } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .index_mission .circle_mask_box .text .title { font-size: clamp(16px, calc(30 / 1080 * 100vh), calc(30 / 1920 * 100vw)); margin-bottom: calc(25 / 1080 * 100vh); } } .index_mission .circle_mask_box .text .intro { font-size: 46px; line-height: calc(60 / 46); opacity: 0; visibility: hidden; -webkit-transition: 0.75s linear 1s; -ms-transition: 0.75s linear 1s; transition: 0.75s linear 1s; margin-bottom: 30px; } @media screen and (max-width: 1920px) { .index_mission .circle_mask_box .text .intro { font-size: clamp(20px, calc(46 / 1920 * 100vw), 46px); margin-bottom: calc(30 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .index_mission .circle_mask_box .text .intro { font-size: 0.36rem; margin-bottom: 0.3rem; } } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .index_mission .circle_mask_box .text .intro { font-size: clamp(20px, calc(46 / 1080 * 100vh), calc(46 / 1920 * 100vw)); margin-bottom: calc(30 / 1080 * 100vh); } } .index_mission .bgslider { position: relative; height: 100vh; overflow: hidden; z-index: 1; } .index_mission .bgslider .swiper-prev, .index_mission .bgslider .swiper-next { color: #fff; font-size: calc(12 / 16 * 1em); position: absolute; z-index: 9; top: 50%; cursor: pointer; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 60px; height: 60px; background-color: rgba(38,97,163,0.2); -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; -webkit-transition: 0.55s; -ms-transition: 0.55s; transition: 0.55s; } @media screen and (max-width: 1920px) { .index_mission .bgslider .swiper-prev, .index_mission .bgslider .swiper-next { width: clamp(40px, calc(60 / 1920 * 100vw), 60px); height: clamp(40px, calc(60 / 1920 * 100vw), 60px); } } @media screen and (max-width: 750px) { .index_mission .bgslider .swiper-prev, .index_mission .bgslider .swiper-next { width: 0.8rem; height: 0.8rem; } } .index_mission .bgslider .swiper-prev:hover, .index_mission .bgslider .swiper-next:hover { background-color: #00549e; } .index_mission .bgslider .swiper-prev.swiper-button-disabled, .index_mission .bgslider .swiper-next.swiper-button-disabled { background-color: rgba(38,97,163,0.1); cursor: default; } .index_mission .bgslider .swiper-prev { left: 60px; } @media screen and (max-width: 1920px) { .index_mission .bgslider .swiper-prev { left: calc(60 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .index_mission .bgslider .swiper-prev { left: 0.3rem; } } .index_mission .bgslider .swiper-next { right: 60px; } @media screen and (max-width: 1920px) { .index_mission .bgslider .swiper-next { right: calc(60 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .index_mission .bgslider .swiper-next { right: 0.3rem; } } .index_mission .bgslider .swiper-slide { height: 100vh; position: relative; /* &.swiper-slide-prev { .text { .text_intro { opacity 0 visibility hidden transform(translateY(-100%)) } } } */ } .index_mission .bgslider .swiper-slide.slide-first { clip-path: circle(100%); -webkit-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; opacity: 1 !important; z-index: 8; } .index_mission .bgslider .swiper-slide.slide-first:not(.swiper-slide-active) { clip-path: circle(0%); } .index_mission .bgslider .swiper-slide.animate .bg, .index_mission .bgslider .swiper-slide.animate .bg_m { -webkit-animation: scaleBigSmall 4s forwards ease-in-out; -ms-animation: scaleBigSmall 4s forwards ease-in-out; animation: scaleBigSmall 4s forwards ease-in-out; } .index_mission .bgslider .swiper-slide .bg, .index_mission .bgslider .swiper-slide .bg_m { height: 100%; background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover; } @media screen and (max-width: 750px) { .index_mission .bgslider .swiper-slide .bg { display: none; } } .index_mission .bgslider .swiper-slide .bg_m { display: none; } @media screen and (max-width: 750px) { .index_mission .bgslider .swiper-slide .bg_m { display: block; } } .index_mission .bgslider .swiper-slide .text { text-align: center; position: absolute; left: 0; right: 0; top: calc(660 / 1080 * 100vh); } .index_mission .bgslider .swiper-slide .text.first { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .index_mission .bgslider .swiper-slide .text .title { color: #00549e; font-size: 30px; font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; line-height: calc(50 / 30); margin-bottom: 25px; } @media screen and (max-width: 1920px) { .index_mission .bgslider .swiper-slide .text .title { font-size: clamp(16px, calc(30 / 1920 * 100vw), 30px); margin-bottom: calc(25 / 1920 * 100vw); } } @media screen and (max-width: 1440px) { .index_mission .bgslider .swiper-slide .text .title { font-size: 24px; } } @media screen and (max-width: 1280px) { .index_mission .bgslider .swiper-slide .text .title { font-size: 20px; } } @media screen and (max-width: 990px) { .index_mission .bgslider .swiper-slide .text .title { font-size: 18px; } } @media screen and (max-width: 750px) { .index_mission .bgslider .swiper-slide .text .title { font-size: 0.28rem; margin-bottom: 0.2rem; } } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .index_mission .bgslider .swiper-slide .text .title { font-size: clamp(24px, calc(30 / 1080 * 100vh), calc(30 / 1920 * 100vw)); margin-bottom: calc(25 / 1080 * 100vh); } } .index_mission .bgslider .swiper-slide .text .intro { font-size: 46px; font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; line-height: calc(60 / 46); opacity: 0; visibility: hidden; -webkit-transition: 0.75s linear 1s; -ms-transition: 0.75s linear 1s; transition: 0.75s linear 1s; margin-bottom: 30px; } @media screen and (max-width: 1920px) { .index_mission .bgslider .swiper-slide .text .intro { /* font-size: clamp(20px, calc(46 / 1920 * 100vw), 46px); */ font-size: clamp(16px, calc(36 / 1920 * 100vw), 36px); margin-bottom: calc(30 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .index_mission .bgslider .swiper-slide .text .intro { white-space: nowrap; font-size: 0.26rem; margin-bottom: 0.3rem; } } @media screen and (max-width: 750px) { .index_mission .bgslider .swiper-slide .text .intro .split { display: block; } } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .index_mission .bgslider .swiper-slide .text .intro { font-size: clamp(20px, calc(46 / 1080 * 100vh), calc(46 / 1920 * 100vw)); margin-bottom: calc(30 / 1080 * 100vh); } } .index_mission .bgslider .swiper-slide .text p { margin: 0; padding: 0; } @media screen and (max-width: 750px) { .index_mission .bgslider .swiper-slide .text .mhide { display: none; } } .index_advantage { position: relative; background-image: url("../images/bg2.jpg"); background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover; /* &.swiper-active-section, &.active { .bgslider { .swiper-slide { &.swiper-slide-active { .text { opacity: 1 visibility: visible // transform(translateY(0%)) } } } } } */ } .index_advantage.swiper-active-section .slogan_title .letter-ani, .index_advantage.fp-completely .slogan_title .letter-ani { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .index_advantage.swiper-active-section .advantage_list .item, .index_advantage.fp-completely .advantage_list .item { opacity: 1; visibility: visible; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .index_advantage.swiper-active-section .advantage_list .item:nth-child(2), .index_advantage.fp-completely .advantage_list .item:nth-child(2) { transition-delay: 0.35s; } .index_advantage.swiper-active-section .advantage_list .item:nth-child(3), .index_advantage.fp-completely .advantage_list .item:nth-child(3) { transition-delay: 0.55s; } .index_advantage.swiper-active-section .advantage_list .item:nth-child(4), .index_advantage.fp-completely .advantage_list .item:nth-child(4) { transition-delay: 0.75s; } .index_advantage.swiper-active-section .bgslider .swiper-slide.swiper-slide-active .text, .index_advantage.fp-completely .bgslider .swiper-slide.swiper-slide-active .text { opacity: 1; visibility: visible; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .index_advantage.swiper-active-section .bgslider .swiper-slide.swiper-slide-active .text .letter-ani, .index_advantage.fp-completely .bgslider .swiper-slide.swiper-slide-active .text .letter-ani { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .index_advantage:not(.fp-completely) .slogan_title .letter-ani { opacity: 0; transition-delay: 0s !important; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .index_advantage .slogan_title { color: #fff; font-size: 30px; font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; text-align: center; position: absolute; z-index: 2; left: 60px; top: calc(275 / 1080 * 100vh); } @media screen and (max-width: 1920px) { .index_advantage .slogan_title { font-size: clamp(16px, calc(30 / 1920 * 100vw), 30px); left: calc(60 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .index_advantage .slogan_title { font-size: 0.4rem; left: 0.3rem; top: calc(690 / 1360 * 100vh); } } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .index_advantage .slogan_title { font-size: clamp(16px, calc(30 / 1080 * 100vh), calc(30 / 1920 * 100vw)); top: calc(275 / 1080 * 100vh); } } .index_advantage .advantage_list { position: absolute; z-index: 2; left: 60px; bottom: calc(120 / 1080 * 100vh); display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-transform: translateX(calc(-100px + 35px)); -ms-transform: translateX(calc(-100px + 35px)); transform: translateX(calc(-100px + 35px)); } @media screen and (max-width: 1920px) { .index_advantage .advantage_list { left: calc(60 / 1920 * 100vw); } } @media screen and (max-width: 1024px) { .index_advantage .advantage_list { right: calc(60 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .index_advantage .advantage_list { left: 0.3rem; right: 0.3rem; bottom: calc(167 / 1360 * 100vh); -webkit-transform: none; -ms-transform: none; transform: none; justify-content: space-between; } } .index_advantage .advantage_list .item { color: #fff; text-align: center; opacity: 0; visibility: hidden; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webkit-transition: 0.55s linear; -ms-transition: 0.55s linear; transition: 0.55s linear; width: 200px; /* &:nth-child(1) { transition-delay: 1s } */ } @media screen and (max-width: 750px) { .index_advantage .advantage_list .item { font-size: 0.2rem; width: auto; } } .index_advantage .advantage_list .item:nth-child(1) .icon::before { -webkit-animation: loop1 7s linear infinite; -ms-animation: loop1 7s linear infinite; animation: loop1 7s linear infinite; } .index_advantage .advantage_list .item:nth-child(2) .icon::before { -webkit-animation: loop2 6s linear infinite; -ms-animation: loop2 6s linear infinite; animation: loop2 6s linear infinite; } .index_advantage .advantage_list .item:nth-child(3) .icon::before { -webkit-animation: loop3 8s linear infinite; -ms-animation: loop3 8s linear infinite; animation: loop3 8s linear infinite; } .index_advantage .advantage_list .item:nth-child(4) .icon::before { -webkit-animation: loop4 7s linear infinite; -ms-animation: loop4 7s linear infinite; animation: loop4 7s linear infinite; } .index_advantage .advantage_list .item .icon { width: 70px; height: 70px; display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: center; align-items: center; margin: 0 auto 10px; -webkit-transition: 0.55s; -ms-transition: 0.55s; transition: 0.55s; position: relative; } @media screen and (max-width: 1920px) { .index_advantage .advantage_list .item .icon { width: clamp(50px, calc(70 / 1920 * 100vw), 70px); height: clamp(50px, calc(70 / 1920 * 100vw), 70px); margin-bottom: calc(10 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .index_advantage .advantage_list .item .icon { width: 0.7rem; height: 0.7rem; margin-bottom: 0.1rem; } } .index_advantage .advantage_list .item .icon::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: #fff; -webkit-mask-image: url("../images/z60.png"); -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-animation: loop1 6s linear infinite; -ms-animation: loop1 6s linear infinite; animation: loop1 6s linear infinite; } .index_advantage .advantage_list .item .icon img { max-width: calc(50 / 70 * 100%); max-height: calc(50 / 70 * 100%); filter: brightness(0); } .index_advantage .advantage_list .item.active .icon::before { background-color: #00549e; -webkit-animation: none; -ms-animation: none; animation: none; } .index_advantage .advantage_list .item.active .icon img { filter: brightness(10000); } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .index_advantage .advantage_list { bottom: calc(120 / 1080 * 100vh); } } .index_advantage .bgslider { position: relative; z-index: 1; } .index_advantage .bgslider .swiper-slide { height: 100vh; position: relative; } .index_advantage .bgslider .swiper-slide.animate .bg, .index_advantage .bgslider .swiper-slide.animate .bg_m { -webkit-animation: scaleBigSmall 4s forwards ease-in-out; -ms-animation: scaleBigSmall 4s forwards ease-in-out; animation: scaleBigSmall 4s forwards ease-in-out; } .index_advantage .bgslider .swiper-slide.swiper-slide-prev .text { opacity: 0; visibility: hidden; } .index_advantage .bgslider .swiper-slide.swiper-slide-active .bg, .index_advantage .bgslider .swiper-slide.swiper-slide-active .bg_m { clip-path: circle(200% at 100% 50%); } .index_advantage .bgslider .swiper-slide.swiper-slide-prev .bg, .index_advantage .bgslider .swiper-slide.swiper-slide-prev .bg_m { clip-path: circle(200% at 100% 50%); } .index_advantage .bgslider .swiper-slide.swiper-slide-next { clip-path: circle(0% at 100% 50%); } .index_advantage .bgslider .swiper-slide .bg, .index_advantage .bgslider .swiper-slide .bg_m { height: 100%; background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover; -webkit-transform: matrix(1, 0, 0, 1, 0, 0); -ms-transform: matrix(1, 0, 0, 1, 0, 0); transform: matrix(1, 0, 0, 1, 0, 0); clip-path: circle(0% at 100% 50%); -webkit-transition: clip-path 2s ease-out; -ms-transition: clip-path 2s ease-out; transition: clip-path 2s ease-out; } @media screen and (max-width: 750px) { .index_advantage .bgslider .swiper-slide .bg { display: none; } } .index_advantage .bgslider .swiper-slide .bg_m { display: none; } @media screen and (max-width: 750px) { .index_advantage .bgslider .swiper-slide .bg_m { display: block; } } .index_advantage .bgslider .swiper-slide .text { color: #fff; position: absolute; left: 60px; top: calc(340 / 1080 * 100vh + 1em); opacity: 0; visibility: hidden; -webkit-transform: translateX(10%); -ms-transform: translateX(10%); transform: translateX(10%); -webkit-transition: 0.75s linear 1s; -ms-transition: 0.75s linear 1s; transition: 0.75s linear 1s; } @media screen and (max-width: 1920px) { .index_advantage .bgslider .swiper-slide .text { left: clamp(20px, calc(60 / 1920 * 100vw), 60px); } } @media screen and (max-width: 750px) { .index_advantage .bgslider .swiper-slide .text { left: 0.3rem; right: 0.3rem; top: calc(790 / 1360 * 100vh); } } @media (min-aspect-ratio: 1920/960) { .index_advantage .bgslider .swiper-slide .text { top: calc(340 / 1080 * 100vh + 1em); } } .index_advantage .bgslider .swiper-slide .text .title { color: #00549e; font-size: 40px; line-height: calc(50 / 40); margin-bottom: 10px; } @media screen and (max-width: 1920px) { .index_advantage .bgslider .swiper-slide .text .title { font-size: clamp(20px, calc(40 / 1920 * 100vw), 40px); } } @media screen and (max-width: 750px) { .index_advantage .bgslider .swiper-slide .text .title { font-size: 0.5rem; margin-bottom: 0.1rem; } } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .index_advantage .bgslider .swiper-slide .text .title { font-size: clamp(20px, calc(40 / 1080 * 100vh), calc(40 / 1920 * 100vw)); } } .index_advantage .bgslider .swiper-slide .text .intro { font-size: 46px; line-height: calc(60 / 46); margin-bottom: 30px; } @media screen and (max-width: 1920px) { .index_advantage .bgslider .swiper-slide .text .intro { font-size: clamp(16px, calc(46 / 1920 * 100vw), 46px); margin-bottom: calc(30 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .index_advantage .bgslider .swiper-slide .text .intro { font-size: 0.28rem; margin-bottom: 0.3rem; } } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .index_advantage .bgslider .swiper-slide .text .intro { font-size: clamp(16px, calc(46 / 1080 * 100vh), calc(46 / 1920 * 100vw)); margin-bottom: calc(30 / 1080 * 100vh); } } .index_solution { background-image: url("../images/bg2.jpg"); background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover; } .index_solution.swiper-active-section .hd > p, .index_solution.fp-completely .hd > p { opacity: 1; visibility: visible; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .index_solution.swiper-active-section .slogan_title .letter-ani, .index_solution.fp-completely .slogan_title .letter-ani { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .index_solution.swiper-active-section .picslider, .index_solution.fp-completely .picslider { opacity: 1; visibility: visible; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .index_solution:not(.fp-completely) .slogan_title .letter-ani { opacity: 0; transition-delay: 0s !important; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .index_solution .box { display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: center; width: calc(1340 / 1920 * 100vw); margin: 0 auto; margin-bottom: 80px; } @media screen and (max-width: 1920px) { .index_solution .box { margin-bottom: calc(80 / 1920 * 100vw); } } @media screen and (max-width: 990px) { .index_solution .box { display: block; } } @media screen and (max-width: 750px) { .index_solution .box { width: auto; margin-bottom: 0.4rem; } } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .index_solution .box { margin-bottom: calc(80 / 1080 * 100vh); } } .index_solution .hd { font-size: 30px; text-align: center; } @media screen and (max-width: 1920px) { .index_solution .hd { font-size: clamp(16px, calc(30 / 1920 * 100vw), 30px); } } @media screen and (max-width: 990px) { .index_solution .hd { text-align: center; margin-bottom: 20px; } } @media screen and (max-width: 750px) { .index_solution .hd { font-size: 0.32rem; margin-bottom: 0.3rem; } } .index_solution .hd > p { opacity: 0; visibility: hidden; -webkit-transform: translateX(10%); -ms-transform: translateX(10%); transform: translateX(10%); -webkit-transition: 0.35s linear; -ms-transition: 0.35s linear; transition: 0.35s linear; } .index_solution .hd .slogan_title { font-size: 60px; line-height: 1.1; font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; margin-top: 10px; } @media screen and (max-width: 1920px) { .index_solution .hd .slogan_title { font-size: clamp(20px, calc(60 / 1920 * 100vw), 60px); margin-top: calc(10 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .index_solution .hd .slogan_title { font-size: 0.5rem; margin-top: 0.1rem; } } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .index_solution .hd .slogan_title { font-size: clamp(20px, calc(60 / 1080 * 100vh), calc(60 / 1920 * 100vw)); } } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .index_solution .hd { font-size: clamp(16px, calc(30 / 1080 * 100vh), calc(30 / 1920 * 100vw)); } } .index_solution .solution_list { display: -ms-flexbox; display: -webkit-box; display: flex; } @media screen and (max-width: 990px) { .index_solution .solution_list { justify-content: space-between; } } @media screen and (max-width: 750px) { .index_solution .solution_list { font-size: 0.24rem; } } .index_solution .solution_list .item { width: 160px; text-align: center; } @media screen and (max-width: 1920px) { .index_solution .solution_list .item { width: calc(160 / 1920 * 100vw); min-width: 6em; } } @media screen and (max-width: 990px) { .index_solution .solution_list .item { width: auto; } } @media screen and (max-width: 750px) { .index_solution .solution_list .item { padding: 0 0.05rem; } } .index_solution .solution_list .item .icon { width: 50px; height: 50px; display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: center; align-items: center; margin: 0 auto 5px; } @media screen and (max-width: 1920px) { .index_solution .solution_list .item .icon { width: clamp(30px, calc(50 / 1920 * 100vw), 50px); height: clamp(30px, calc(50 / 1920 * 100vw), 50px); } } @media screen and (max-width: 750px) { .index_solution .solution_list .item .icon { width: 0.8rem; height: 0.8rem; } } .index_solution .solution_list .item .icon img { max-width: 100%; height: 100%; filter: brightness(0); -webkit-transition: 0.55s; -ms-transition: 0.55s; transition: 0.55s; } .index_solution .solution_list .item.active { color: #00549e; } .index_solution .solution_list .item.active .icon img { filter: none; } .index_solution .picslider { position: relative; z-index: 1; opacity: 0; visibility: hidden; -webkit-transform: translateX(10%); -ms-transform: translateX(10%); transform: translateX(10%); -webkit-transition: 0.75s linear; -ms-transition: 0.75s linear; transition: 0.75s linear; } .index_solution .picslider.enter .item, .index_solution .picslider.animating .item { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } .index_solution .picslider .swiper-prev, .index_solution .picslider .swiper-next { color: #fff; font-size: calc(12 / 16 * 1em); position: absolute; z-index: 9; top: 50%; cursor: pointer; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 60px; height: 60px; background-color: rgba(0,0,0,0.3); -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; -webkit-transition: 0.55s; -ms-transition: 0.55s; transition: 0.55s; } @media screen and (max-width: 1920px) { .index_solution .picslider .swiper-prev, .index_solution .picslider .swiper-next { width: clamp(40px, calc(60 / 1920 * 100vw), 60px); height: clamp(40px, calc(60 / 1920 * 100vw), 60px); } } @media screen and (max-width: 750px) { .index_solution .picslider .swiper-prev, .index_solution .picslider .swiper-next { width: 0.8rem; height: 0.8rem; } } .index_solution .picslider .swiper-prev.swiper-button-disabled, .index_solution .picslider .swiper-next.swiper-button-disabled { background-color: rgba(0,0,0,0.3); cursor: default; } .index_solution .picslider .swiper-prev:hover, .index_solution .picslider .swiper-next:hover { background-color: #00549e; } .index_solution .picslider .swiper-prev { left: -5%; } @media screen and (max-width: 750px) { .index_solution .picslider .swiper-prev { left: -2%; } } .index_solution .picslider .swiper-next { right: -5%; /* @media screen and (max-width: 1920px) { right calc(60/1920*100vw) } */ } @media screen and (max-width: 750px) { .index_solution .picslider .swiper-next { right: -2%; } } .index_solution .picslider .swiper { width: calc(1340 / 1920 * 100vw); margin: 0 auto; overflow: visible; } .index_solution .picslider .swiper .swiper-slide-active .item .text { opacity: 1; visibility: visible; } .index_solution .picslider .item { position: relative; -webkit-transition: 0.55s linear; -ms-transition: 0.55s linear; transition: 0.55s linear; } .index_solution .picslider .item .item_con { overflow: hidden; } .index_solution .picslider .item .item_con:hover .bg, .index_solution .picslider .item .item_con:hover .bg_m { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .index_solution .picslider .item .item_con:hover .text { color: #fff; } .index_solution .picslider .item .item_con:hover .text .icon img { filter: none; } .index_solution .picslider .item .bg, .index_solution .picslider .item .bg_m { padding-top: calc(580 / 1080 * 100vh); background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: 0.55s; -ms-transition: 0.55s; transition: 0.55s; } @media screen and (max-width: 750px) { .index_solution .picslider .item .bg { display: none; } } .index_solution .picslider .item .bg_m { display: none; } @media screen and (max-width: 750px) { .index_solution .picslider .item .bg_m { display: block; } } .index_solution .picslider .item .text { color: #333; position: absolute; left: 0; right: 0; bottom: 15px; padding: 20px 25px; background-image: linear-gradient(90deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.35) 30%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 100%); border-left: 1px solid rgba(255,255,255,0.25); -webkit-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; margin: 0 38px; opacity: 0; visibility: hidden; -webkit-transition: 0.55s linear; -ms-transition: 0.55s linear; transition: 0.55s linear; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; } @media screen and (max-width: 1920px) { .index_solution .picslider .item .text { margin: 0 calc(38 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .index_solution .picslider .item .text { left: 0.2rem; right: 0.2rem; bottom: 0.2rem; padding: 0.2rem 0.25rem; } } .index_solution .picslider .item .text .icon { height: 70px; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; margin-right: 10px; } @media screen and (max-width: 1920px) { .index_solution .picslider .item .text .icon { height: clamp(30px, calc(70 / 1920 * 100vw), 70px); } } @media screen and (max-width: 750px) { .index_solution .picslider .item .text .icon { height: 0.7rem; } } .index_solution .picslider .item .text .icon img { height: 100%; filter: brightness(0); -webkit-transition: 0.55s; -ms-transition: 0.55s; transition: 0.55s; } .index_solution .picslider .item .text .txtcon { flex: 1; } .index_solution .picslider .item .text .title { font-size: 40px; font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; line-height: 1.2; margin-bottom: 10px; } @media screen and (max-width: 1920px) { .index_solution .picslider .item .text .title { font-size: clamp(18px, calc(40 / 1920 * 100vw), 30px); } } @media screen and (max-width: 750px) { .index_solution .picslider .item .text .title { font-size: 0.36rem; margin-bottom: 0.1rem; } } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .index_solution .picslider .item .text .title { font-size: clamp(18px, calc(40 / 1080 * 100vh), calc(40 / 1920 * 100vw)); } } .index_solution .picslider .item .text .more { color: #fff; font-weight: 400; display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline-flex; align-items: center; } @media screen and (max-width: 750px) { .index_solution .picslider .item .text .more { font-size: 0.24rem; } } .index_solution .picslider .item .text .more i { font-size: calc(10 / 16 * 1em); margin-left: 10px; } .index_product { position: relative; background-image: url("../images/bg2.jpg"); background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover; } .index_product.swiper-active-section .proslider, .index_product.fp-completely .proslider { opacity: 1; visibility: visible; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .index_product.swiper-active-section .proslider .swiper-slide .picture, .index_product.fp-completely .proslider .swiper-slide .picture { opacity: 1; visibility: visible; } .index_product.swiper-active-section .proslider .swiper-slide.swiper-slide-active .tag, .index_product.fp-completely .proslider .swiper-slide.swiper-slide-active .tag { zoom: 1; opacity: 0.15; visibility: visible; } .index_product.swiper-active-section .proslider .swiper-slide.swiper-slide-active .text .letter-ani, .index_product.fp-completely .proslider .swiper-slide.swiper-slide-active .text .letter-ani { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } .index_product.swiper-active-section .proslider .swiper-slide.swiper-slide-active .picture, .index_product.fp-completely .proslider .swiper-slide.swiper-slide-active .picture { align-items: center; } .index_product.swiper-active-section .proslider .swiper-slide.swiper-slide-active .picture img, .index_product.fp-completely .proslider .swiper-slide.swiper-slide-active .picture img { transform-origin: 50% 50%; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); transition-delay: 1s; } .index_product .swiper-pagination { position: absolute; left: 60px; bottom: 55px; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; display: none; } @media screen and (max-width: 1920px) { .index_product .swiper-pagination { left: calc(60 / 1920 * 100vw); bottom: calc(55 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .index_product .swiper-pagination { left: 0; bottom: 1.5rem; justify-content: center; display: -ms-flexbox; display: -webkit-box; display: flex; } } .index_product .swiper-pagination .swiper-pagination-bullet { width: 5px; height: 5px; background-color: #333; -webkit-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; opacity: 1; margin: 0 5px 0 0; -webkit-transition: 0.55s; -ms-transition: 0.55s; transition: 0.55s; } @media screen and (max-width: 750px) { .index_product .swiper-pagination .swiper-pagination-bullet { width: 0.05rem; height: 0.05rem; margin: 0 0.05rem; } } .index_product .swiper-pagination .swiper-pagination-bullet:last-child { margin-right: 0; } .index_product .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; width: 60px; background-color: #00549e; } @media screen and (max-width: 1920px) { .index_product .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { width: clamp(30px, calc(60 / 1920 * 100vw), 60px); } } @media screen and (max-width: 750px) { .index_product .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 0.4rem; } } .index_product .proslider { position: relative; overflow: visible; opacity: 0; visibility: hidden; -webkit-transform: translateX(10%); -ms-transform: translateX(10%); transform: translateX(10%); -webkit-transition: 0.75s linear; -ms-transition: 0.75s linear; transition: 0.75s linear; } .index_product .proslider::before { content: ''; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 1150px; height: 1150px; border: 150px solid rgba(255,255,255,0.9); -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; opacity: 0.1; } @media screen and (max-width: 1920px) { .index_product .proslider::before { width: clamp(50%, calc(1150 / 1920 * 100vw), 1150px); height: clamp(50%, calc(1150 / 1920 * 100vw), 1150px); border-width: calc(150 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .index_product .proslider::before { width: calc(1150 / 750 * 100vw); height: calc(1150 / 750 * 100vw); border-width: 0.75rem; } } .index_product .proslider .swiper-prev, .index_product .proslider .swiper-next { color: #fff; font-size: calc(12 / 16 * 1em); position: absolute; z-index: 9; top: 50%; cursor: pointer; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 60px; height: 60px; background-color: rgba(0,0,0,0.5); -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; -webkit-transition: 0.55s; -ms-transition: 0.55s; transition: 0.55s; } @media screen and (max-width: 1920px) { .index_product .proslider .swiper-prev, .index_product .proslider .swiper-next { width: clamp(40px, calc(60 / 1920 * 100vw), 60px); height: clamp(40px, calc(60 / 1920 * 100vw), 60px); } } @media screen and (max-width: 750px) { .index_product .proslider .swiper-prev, .index_product .proslider .swiper-next { width: 0.8rem; height: 0.8rem; } } .index_product .proslider .swiper-prev.swiper-button-disabled, .index_product .proslider .swiper-next.swiper-button-disabled { background-color: rgba(0,0,0,0.3); cursor: default; } .index_product .proslider .swiper-prev:hover, .index_product .proslider .swiper-next:hover { background-color: #00549e; } .index_product .proslider .swiper-prev { left: 0; } .index_product .proslider .swiper-next { right: 0; } .index_product .proslider .swiper-prev-title, .index_product .proslider .swiper-next-title { color: #333; opacity: 0.7; font-size: 24px; position: absolute; top: 20px; -webkit-transition: 0.35s linear; -ms-transition: 0.35s linear; transition: 0.35s linear; } @media screen and (max-width: 1920px) { .index_product .proslider .swiper-prev-title, .index_product .proslider .swiper-next-title { font-size: clamp(16px, calc(24 / 1920 * 100vw), 24px); } } @media screen and (max-width: 750px) { .index_product .proslider .swiper-prev-title, .index_product .proslider .swiper-next-title { top: 0.2rem; font-size: 0.24rem; } } .index_product .proslider .swiper-prev-title.change, .index_product .proslider .swiper-next-title.change { opacity: 0; visibility: hidden; } .index_product .proslider .swiper-prev-title { left: 0; } .index_product .proslider .swiper-next-title { right: 0; } .index_product .proslider .swiper-slide { position: relative; display: -ms-flexbox; display: -webkit-box; display: flex; /* &.swiper-slide-active { .tag { zoom 1 opacity: .15 visibility: visible } .text { opacity: 1 visibility: visible transition-delay: 1.5s transform(none) .letter-ani { opacity: 1 transform(none) } } .picture { align-items: center transform(translateX(50%)) animate(ctol 1s forwards 1s) img { transform-origin: 50% 50% transform(scale(1)) transition-delay: 1s } } } */ } @media screen and (max-width: 750px) { .index_product .proslider .swiper-slide { display: block; } } .index_product .proslider .swiper-slide.swiper-slide-prev { justify-content: flex-end; } .index_product .proslider .swiper-slide.swiper-slide-prev .text { transition-delay: 0s; } .index_product .proslider .swiper-slide.swiper-slide-active { justify-content: center; } .index_product .proslider .swiper-slide.swiper-slide-active:hover .picture { -webkit-transform: translateX(-60%); -ms-transform: translateX(-60%); transform: translateX(-60%); transition-delay: 0s; } @media screen and (max-width: 750px) { .index_product .proslider .swiper-slide.swiper-slide-active:hover .picture { -webkit-transform: none; -ms-transform: none; transform: none; } } .index_product .proslider .swiper-slide.swiper-slide-active:hover .text { opacity: 1; visibility: visible; transition-delay: 0.35s; -webkit-transform: none; -ms-transform: none; transform: none; } @media screen and (max-width: 750px) { .index_product .proslider .swiper-slide.swiper-slide-active .text { opacity: 1; visibility: visible; } } .index_product .proslider .swiper-slide .tag { position: absolute; left: 50%; top: 50%; color: #fff; font-size: 400px; font-family: 'DIN-Black', 'Arial', 'Helvetica', 'sans-serif'; line-height: 1; font-style: italic; white-space: nowrap; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); zoom: 0; opacity: 0; visibility: hidden; -webkit-transition: 0.55s linear; -ms-transition: 0.55s linear; transition: 0.55s linear; } @media screen and (max-width: 1920px) { .index_product .proslider .swiper-slide .tag { font-size: calc(400 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .index_product .proslider .swiper-slide .tag { font-size: 2rem; } } .index_product .proslider .swiper-slide .text { width: 50%; opacity: 0; visibility: hidden; -webkit-transition: 0.55s linear; -ms-transition: 0.55s linear; transition: 0.55s linear; transition-delay: 0s; position: absolute; z-index: 1; left: 50%; top: 0; -webkit-transform: translateX(10%); -ms-transform: translateX(10%); transform: translateX(10%); } @media screen and (max-width: 750px) { .index_product .proslider .swiper-slide .text { width: auto; position: static; -webkit-transform: none; -ms-transform: none; transform: none; } } .index_product .proslider .swiper-slide .picture { width: 45%; height: 550px; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: flex-end; justify-content: center; -webkit-transform: none; -ms-transform: none; transform: none; opacity: 0; visibility: hidden; -webkit-transition: 0.55s; -ms-transition: 0.55s; transition: 0.55s; transition-delay: 0.35s; position: relative; z-index: 2; } @media screen and (max-width: 1920px) { .index_product .proslider .swiper-slide .picture { height: calc(550 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .index_product .proslider .swiper-slide .picture { width: auto; height: calc(550 / 960 * 100vw); } } .index_product .proslider .swiper-slide .picture img { display: block; max-width: 100%; max-height: 100%; -webkit-transform: scale(0.509090909090909); -ms-transform: scale(0.509090909090909); transform: scale(0.509090909090909); transform-origin: 50% 100%; -webkit-transition: 0.75s linear; -ms-transition: 0.75s linear; transition: 0.75s linear; } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .index_product .proslider .swiper-slide .picture { height: calc(550 / 1080 * 100vh); } } .index_product .proslider .swiper-slide .hd { display: -ms-flexbox; display: -webkit-box; display: flex; align-items: flex-end; line-height: 1; margin-bottom: 35px; } @media screen and (max-width: 1920px) { .index_product .proslider .swiper-slide .hd { margin-bottom: calc(35 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .index_product .proslider .swiper-slide .hd { margin-bottom: 0.3rem; } } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .index_product .proslider .swiper-slide .hd { margin-bottom: calc(35 / 1080 * 100vh); } } .index_product .proslider .swiper-slide .title { color: #00549e; font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; font-size: 56px; } @media screen and (max-width: 1920px) { .index_product .proslider .swiper-slide .title { font-size: clamp(24px, calc(56 / 1920 * 100vw), 56px); } } @media screen and (max-width: 750px) { .index_product .proslider .swiper-slide .title { font-size: 0.5rem; } } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .index_product .proslider .swiper-slide .title { font-size: clamp(24px, calc(56 / 1080 * 100vh), calc(56 / 1920 * 100vw)); } } .index_product .proslider .swiper-slide .intro { font-size: 34px; font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; border-left: 1px solid rgba(0,0,0,0.2); padding-left: 0.5em; margin-left: 0.5em; } @media screen and (max-width: 1920px) { .index_product .proslider .swiper-slide .intro { font-size: clamp(16px, calc(34 / 1920 * 100vw), 34px); } } @media screen and (max-width: 750px) { .index_product .proslider .swiper-slide .intro { font-size: 0.28rem; } } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .index_product .proslider .swiper-slide .intro { font-size: clamp(16px, calc(34 / 1080 * 100vh), calc(34 / 1920 * 100vw)); } } .index_product .proslider .swiper-slide .desc { font-size: 30px; padding-top: 50px; border-top: 1px solid rgba(0,0,0,0.2); margin-top: 35px; } @media screen and (max-width: 1920px) { .index_product .proslider .swiper-slide .desc { font-size: clamp(14px, calc(30 / 1920 * 100vw), 30px); padding-top: calc(50 / 1920 * 100vw); margin-top: calc(35 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .index_product .proslider .swiper-slide .desc { font-size: 0.24rem; padding-top: 0.3rem; margin-top: 0.3rem; } } .index_product .proslider .swiper-slide .desc dd { line-height: 1.2; position: relative; margin-bottom: 45px; } @media screen and (max-width: 1920px) { .index_product .proslider .swiper-slide .desc dd { margin-bottom: calc(45 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .index_product .proslider .swiper-slide .desc dd { margin-bottom: 0.3rem; } } .index_product .proslider .swiper-slide .desc dd:last-child { margin-bottom: 0; } .index_product .proslider .swiper-slide .desc dd::before { content: ''; width: 6px; height: 6px; background-color: rgba(0,0,0,0.4); -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; position: absolute; right: 100%; margin-right: 0.5em; top: 0.6em; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .index_product .proslider .swiper-slide .desc dd { margin-bottom: calc(45 / 1080 * 100vh); } } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .index_product .proslider .swiper-slide .desc { font-size: clamp(14px, calc(30 / 1080 * 100vh), calc(30 / 1920 * 100vw)); } } .index_product .proslider .swiper-slide .more { color: #00549e; font-size: calc(16 / 16 * 1em); font-weight: 400; display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline-flex; align-items: center; } @media screen and (max-width: 750px) { .index_product .proslider .swiper-slide .more { font-size: 0.24rem; } } .index_product .proslider .swiper-slide .more .ico { color: #fff; width: 32px; height: 32px; background-color: #00549e; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; margin-right: 8px; } @media screen and (max-width: 750px) { .index_product .proslider .swiper-slide .more .ico { width: 0.4rem; height: 0.4rem; margin-right: 0.08rem; } } .index_product .proslider .swiper-slide .more i { font-size: calc(10 / 16 * 1em); } @media screen and (max-width: 750px) { .index_product .proslider .swiper-slide .more i { font-size: 0.14rem; } } .index_about { position: relative; } .index_about.swiper-active-section .bgslider .swiper-slide.swiper-slide-active .text_intro, .index_about.fp-completely .bgslider .swiper-slide.swiper-slide-active .text_intro { opacity: 1; visibility: visible; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } .index_about.swiper-active-section .bgslider .swiper-slide.swiper-slide-active .intro_box, .index_about.fp-completely .bgslider .swiper-slide.swiper-slide-active .intro_box { opacity: 1; visibility: visible; -webkit-transform: none; -ms-transform: none; transform: none; transition-delay: 0.75s; } .index_about.swiper-active-section .letter-ani, .index_about.fp-completely .letter-ani { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .index_about:not(.fp-completely) .letter-ani { opacity: 0; transition-delay: 0s !important; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .index_about .bgslider { position: relative; z-index: 1; } .index_about .bgslider .list { color: #fff; display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: space-between; flex-wrap: wrap; } .index_about .bgslider .list .item { font-size: 18px; flex: 1; } @media screen and (max-width: 1920px) { .index_about .bgslider .list .item { font-size: calc(18 / 16 * 1em); } } @media screen and (max-width: 750px) { .index_about .bgslider .list .item { flex: none; width: 48%; text-align: center; font-size: 0.24rem; margin-bottom: 0.4rem; } } .index_about .bgslider .list .item:last-child { flex: none; border-right: 0; } @media screen and (max-width: 750px) { .index_about .bgslider .list .item:last-child { margin-bottom: 0; } } .index_about .bgslider .list .icon { width: 60px; height: 60px; display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: center; align-items: center; margin-bottom: 20px; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; } @media screen and (max-width: 1920px) { .index_about .bgslider .list .icon { width: clamp(40px, calc(60 / 1920 * 100vw), 60px); height: clamp(40px, calc(60 / 1920 * 100vw), 60px); margin-bottom: calc(20 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .index_about .bgslider .list .icon { width: 0.6rem; height: 0.6rem; margin-left: auto; margin-right: auto; margin-bottom: 0.2rem; } } .index_about .bgslider .list .icon img { max-width: 100%; max-height: 100%; } .index_about .bgslider .list .major { font-size: 56px; font-family: 'DIN-Medium'; line-height: 1; margin-bottom: 20px; display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline-flex; align-items: flex-end; } @media screen and (max-width: 1920px) { .index_about .bgslider .list .major { font-size: calc(56 / 1920 * 100vw); margin-bottom: calc(20 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .index_about .bgslider .list .major { font-size: 0.48rem; margin-bottom: 0.2rem; } } .index_about .bgslider .list .major .unit { font-size: 24px; font-size: calc(24 / 56 * 1em); line-height: 1.5; } .index_about .bgslider .swiper-slide { height: 100vh; position: relative; } .index_about .bgslider .swiper-slide .bg_video, .index_about .bgslider .swiper-slide .bg, .index_about .bgslider .swiper-slide .bg_m { height: 100%; background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover; } .index_about .bgslider .swiper-slide .bg_video video, .index_about .bgslider .swiper-slide .bg video, .index_about .bgslider .swiper-slide .bg_m video { width: 100%; height: 100%; object-fit: cover; } @media screen and (max-width: 750px) { .index_about .bgslider .swiper-slide .bg { display: none; } } .index_about .bgslider .swiper-slide .bg_m { display: none; } @media screen and (max-width: 750px) { .index_about .bgslider .swiper-slide .bg_m { display: block; } } .index_about .bgslider .swiper-slide .bg_video { position: relative; overflow: hidden; z-index: 1; } .index_about .bgslider .swiper-slide .bg_video::after { content: ''; position: absolute; z-index: 2; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,0.25); } .index_about .bgslider .swiper-slide .intro_box { position: absolute; z-index: 2; left: 60px; top: calc(300 / 1080 * 100%); opacity: 0; visibility: hidden; -webkit-transform: translateX(10%); -ms-transform: translateX(10%); transform: translateX(10%); -webkit-transition: 0.55s; -ms-transition: 0.55s; transition: 0.55s; } @media screen and (max-width: 1920px) { .index_about .bgslider .swiper-slide .intro_box { left: calc(60 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .index_about .bgslider .swiper-slide .intro_box { left: 0.3rem; top: calc(200 / 1080 * 100%); right: 0.3rem; text-align: center; } } .index_about .bgslider .swiper-slide .intro_box .title { color: #00549e; font-size: 46px; font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; line-height: 1.1; margin-bottom: 20px; } @media screen and (max-width: 1920px) { .index_about .bgslider .swiper-slide .intro_box .title { font-size: calc(46 / 1920 * 100vw); margin-bottom: calc(20 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .index_about .bgslider .swiper-slide .intro_box .title { font-size: 0.4rem; margin-bottom: 0.2rem; } } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .index_about .bgslider .swiper-slide .intro_box .title { font-size: clamp(20px, calc(46 / 1080 * 100vh), calc(46 / 1920 * 100vw)) 0; margin-bottom: clamp(10px, calc(20 / 1080 * 100vh), calc(20 / 1920 * 100vw)) 0; } } .index_about .bgslider .swiper-slide .intro_box .desc { color: #fff; font-size: 26px; line-height: calc(36 / 26); margin-bottom: 30px; } @media screen and (max-width: 1920px) { .index_about .bgslider .swiper-slide .intro_box .desc { font-size: clamp(14px, calc(26 / 1920 * 100vw), 26px); margin-bottom: calc(30 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .index_about .bgslider .swiper-slide .intro_box .desc { font-size: 0.24rem; margin-bottom: 0.3rem; } } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .index_about .bgslider .swiper-slide .intro_box .desc { font-size: clamp(14px, calc(26 / 1080 * 100vh), calc(26 / 1920 * 100vw)) 0; margin-bottom: clamp(10px, calc(30 / 1080 * 100vh), calc(30 / 1920 * 100vw)) 0; } } .index_about .bgslider .swiper-slide .text { color: #fff; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; border-top: 1px solid rgba(255,255,255,0.2); } .index_about .bgslider .swiper-slide .text_intro { padding: 40px 0 50px; opacity: 0; visibility: hidden; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); -webkit-transition: 0.55s linear; -ms-transition: 0.55s linear; transition: 0.55s linear; } @media screen and (max-width: 1920px) { .index_about .bgslider .swiper-slide .text_intro { padding: calc(40 / 1920 * 100vw) 0 calc(50 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .index_about .bgslider .swiper-slide .text_intro { padding: 0.4rem 0 0; } } .m_row { padding: 80px 0; background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover; background-attachment: fixed; overflow: hidden; } @media screen and (max-width: 1920px) { .m_row { padding: clamp(40px, calc(80 / 1920 * 100vw), 80px) 0; } } @media screen and (max-width: 750px) { .m_row { padding: 0.8rem 0; } } .m_about_us { background-color: #f4f9fd; text-align: center; } .m_about_us .m_text1 { font-size: 20px; padding: 20px 0; display: inline-block; position: relative; } @media screen and (max-width: 1920px) { .m_about_us .m_text1 { padding: calc(20 / 1920 * 100vw) 0; } } @media screen and (max-width: 1440px) { .m_about_us .m_text1 { font-size: 18px; } } @media screen and (max-width: 1280px) { .m_about_us .m_text1 { font-size: 16px; } } @media screen and (max-width: 1024px) { .m_about_us .m_text1 { font-size: 14px; } } @media screen and (max-width: 750px) { .m_about_us .m_text1 { font-size: 0.28rem; padding: 0; } } .m_about_us .m_text1::before, .m_about_us .m_text1::after { content: ''; width: 31px; height: 41px; background: url("../images/quot1.png") no-repeat center; -webkit-background-size: contain; -ms-background-size: contain; background-size: contain; position: absolute; } @media screen and (max-width: 1920px) { .m_about_us .m_text1::before, .m_about_us .m_text1::after { width: calc(31 / 1920 * 100vw); height: calc(41 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_about_us .m_text1::before, .m_about_us .m_text1::after { width: 0.15rem; height: 0.2rem; } } .m_about_us .m_text1::before { left: 0; top: 0; } @media screen and (max-width: 750px) { .m_about_us .m_text1::before { left: auto; right: 100%; } } .m_about_us .m_text1::after { background-image: url("../images/quot2.png"); left: 100%; bottom: 0; } .m_about_us .m_about_status { color: #7a9ebb; } @media screen and (max-width: 990px) { .m_about_us .m_about_status { text-align: center; } } .m_text1 { font-size: 18px; text-align: center; line-height: calc(40 / 18); } @media screen and (max-width: 1440px) { .m_text1 { font-size: 16px; } } @media screen and (max-width: 1280px) { .m_text1 { font-size: 14px; } } @media screen and (max-width: 1024px) { .m_text1 { font-size: 12px; } } @media screen and (max-width: 750px) { .m_text1 { font-size: 0.28rem; line-height: 1.75; } } .g_icon_list1 { display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: space-between; flex-wrap: wrap; } .g_icon_list1 .item { font-size: 18px; margin-bottom: 35px; } @media screen and (max-width: 1920px) { .g_icon_list1 .item { margin-bottom: calc(35 / 1920 * 100vw); } } @media screen and (max-width: 1440px) { .g_icon_list1 .item { font-size: 16px; } } @media screen and (max-width: 1280px) { .g_icon_list1 .item { font-size: 14px; } } @media screen and (max-width: 1024px) { .g_icon_list1 .item { font-size: 12px; } } @media screen and (max-width: 990px) { .g_icon_list1 .item { width: 48%; text-align: center; margin-bottom: 20px; } } @media screen and (max-width: 750px) { .g_icon_list1 .item { font-size: 0.24rem; margin-bottom: 0.4rem; } } .g_icon_list1 .item:last-child { flex: none; border-right: 0; } @media screen and (max-width: 750px) { .g_icon_list1 .item:last-child { margin-bottom: 0; } } .g_icon_list1 .item_line { border-right: 1px solid #d5dee8; margin-bottom: 20px; } @media screen and (max-width: 750px) { .g_icon_list1 .item_line { margin-bottom: 0.4rem; } } @media screen and (max-width: 990px) { .g_icon_list1 .item_line:nth-child(4n) { display: none; } } .g_icon_list1 .icon { width: 60px; height: 60px; display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: center; align-items: center; margin-bottom: 20px; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; } @media screen and (max-width: 1920px) { .g_icon_list1 .icon { width: clamp(40px, calc(60 / 1920 * 100vw), 60px); height: clamp(40px, calc(60 / 1920 * 100vw), 60px); margin-bottom: calc(20 / 1920 * 100vw); } } @media screen and (max-width: 990px) { .g_icon_list1 .icon { margin-left: auto; margin-right: auto; } } @media screen and (max-width: 750px) { .g_icon_list1 .icon { width: 0.6rem; height: 0.6rem; margin-bottom: 0.2rem; } } .g_icon_list1 .icon img { max-width: 100%; max-height: 100%; } .g_icon_list1 .major { color: #00549e; font-size: 56px; font-family: 'DIN-Medium'; line-height: 1; margin-bottom: 20px; display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline-flex; align-items: flex-end; } @media screen and (max-width: 1920px) { .g_icon_list1 .major { font-size: calc(56 / 1920 * 100vw); margin-bottom: calc(20 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .g_icon_list1 .major { font-size: 0.48rem; margin-bottom: 0.2rem; } } .g_icon_list1 .major .unit { font-size: 24px; font-size: calc(24 / 56 * 1em); line-height: 1.5; } .m_about_honor { position: relative; } .m_about_honor .picture { background-color: #333; } .m_about_honor .picture img { display: block; width: 100%; max-width: 1920px; max-height: 1080px; margin: 0 auto; } .m_about_honor .picture img.tbplat { display: block; } @media screen and (max-width: 750px) { .m_about_honor .picture img.tbplat { display: none; } } .m_about_honor .picture img.mobile { display: none; } @media screen and (max-width: 750px) { .m_about_honor .picture img.mobile { display: block; } } .m_about_honor .text .hd { position: absolute; left: 0; right: 0; top: 80px; } @media screen and (max-width: 1920px) { .m_about_honor .text .hd { top: clamp(40px, calc(80 / 1920 * 100vw), 80px); } } @media screen and (max-width: 750px) { .m_about_honor .text .hd { top: 1rem; } } .m_about_honor .text .tips { color: #fff; font-size: 18px; text-align: center; position: absolute; left: 0; right: 0; bottom: 60px; } @media screen and (max-width: 1920px) { .m_about_honor .text .tips { bottom: calc(60 / 1920 * 100vw); } } @media screen and (max-width: 1440px) { .m_about_honor .text .tips { font-size: 16px; } } @media screen and (max-width: 1280px) { .m_about_honor .text .tips { font-size: 14px; } } @media screen and (max-width: 1024px) { .m_about_honor .text .tips { font-size: 12px; } } @media screen and (max-width: 750px) { .m_about_honor .text .tips { font-size: 0.18rem; bottom: 1rem; } } .g_list1 { display: -ms-flexbox; display: -webkit-box; display: flex; flex-wrap: wrap; } .g_list1 .item { width: calc((100% - 140px) / 3); -webkit-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; overflow: hidden; position: relative; margin-right: 70px; margin-bottom: 40px; } @media screen and (max-width: 1920px) { .g_list1 .item { width: calc((100% - calc(140 / 1920 * 100vw)) / 3); margin-right: calc(70 / 1920 * 100vw); margin-bottom: calc(40 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .g_list1 .item { width: 100%; margin-right: 0; margin-bottom: 0.4rem; } } .g_list1 .item:nth-child(3n) { margin-right: 0; } .g_list1 .item:hover .picture img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .g_list1 .picture { height: 0; padding-top: calc(620 / 490 * 100%); background-color: $imgdBg; position: relative; overflow: hidden; } .g_list1 .picture img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transition: 0.55s; -ms-transition: 0.55s; transition: 0.55s; } .g_list1 .text { color: #00549e; line-height: 1.3; text-align: center; padding: 10px 45px; background-color: rgba(255,255,255,0.25); border-top: 1px solid rgba(255,255,255,0.5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); position: absolute; left: 0; right: 0; bottom: 0; } @media screen and (max-width: 1920px) { .g_list1 .text { padding: 10px calc(45 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .g_list1 .text { padding: 0.2rem 0.4rem; } } .g_list1 .text .title { font-size: 36px; height: 80px; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; } @media screen and (max-width: 1920px) { .g_list1 .text .title { font-size: calc(36 / 1920 * 100vw); height: calc(80 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .g_list1 .text .title { font-size: 0.32rem; height: 0.6rem; } } .g_list1 .text .title_en { font-size: 24px; } @media screen and (max-width: 1920px) { .g_list1 .text .title_en { font-size: calc(24 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .g_list1 .text .title_en { font-size: 0.2rem; } } .g_list2 .item { display: -ms-flexbox; display: -webkit-box; display: flex; background-color: #fff; margin-bottom: 30px; } @media screen and (max-width: 1920px) { .g_list2 .item { margin-bottom: calc(30 / 1920 * 100vw); } } @media screen and (max-width: 990px) { .g_list2 .item { display: block; } } @media screen and (max-width: 750px) { .g_list2 .item { margin-bottom: 0.2rem; } } .g_list2 .item.odd .text { order: 1; } .g_list2 .item.odd .picture { order: 2; } .g_list2 .item:hover .picture img { -webkit-transform: scale(1.02); -ms-transform: scale(1.02); transform: scale(1.02); } .g_list2 .item .text { flex: none; width: 560px; padding: 20px 55px; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; } @media screen and (max-width: 1920px) { .g_list2 .item .text { width: calc(560 / 1920 * 100vw); padding: 20px calc(55 / 1920 * 100vw); } } @media screen and (max-width: 990px) { .g_list2 .item .text { width: auto; } } @media screen and (max-width: 750px) { .g_list2 .item .text { padding: 0.3rem; } } .g_list2 .item .text .desc { font-size: 24px; text-align: center; line-height: calc(40 / 24); flex: 1; } @media screen and (max-width: 1920px) { .g_list2 .item .text .desc { font-size: clamp(14px, calc(24 / 1920 * 100vw), 24px); } } @media screen and (max-width: 750px) { .g_list2 .item .text .desc { font-size: 0.28rem; line-height: 1.75; } } .g_list2 .item .picture { flex: 1; background-color: $gray; overflow: hidden; } .g_list2 .item .picture img { display: block; width: 100%; -webkit-transition: 0.55s; -ms-transition: 0.55s; transition: 0.55s; } .g_list3 { display: -ms-flexbox; display: -webkit-box; display: flex; flex-wrap: wrap; } .g_list3 .item { width: calc((100% - 60px) / 3); margin-right: 30px; margin-bottom: 70px; } @media screen and (max-width: 1920px) { .g_list3 .item { width: calc((100% - calc(60 / 1920 * 100vw)) / 3); margin-right: calc(30 / 1920 * 100vw); margin-bottom: calc(70 / 1920 * 100vw); } } @media screen and (max-width: 990px) { .g_list3 .item { width: calc((100% - 30px) / 2); } } @media screen and (max-width: 750px) { .g_list3 .item { width: 100%; margin-right: 0; margin-bottom: 0.6rem; } } .g_list3 .item:nth-child(3n) { margin-right: 0; } @media screen and (max-width: 990px) { .g_list3 .item:nth-child(3n) { margin-right: calc(30 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .g_list3 .item:nth-child(3n) { margin-right: 0; } } @media screen and (max-width: 990px) { .g_list3 .item:nth-child(2n) { margin-right: 0; } } .g_list3 .con { color: #333; display: block; } .g_list3 .con:hover .picture img { -webkit-transform: scale(1.02); -ms-transform: scale(1.02); transform: scale(1.02); } .g_list3 .picture { height: 410px; background-color: #fff; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 15px; } @media screen and (max-width: 1920px) { .g_list3 .picture { height: clamp(200px, calc(410 / 1920 * 100vw), 410px); margin-bottom: clamp(10px, calc(15 / 1920 * 100vw), 15px); } } @media screen and (max-width: 750px) { .g_list3 .picture { height: 5rem; margin-bottom: 0.2rem; } } .g_list3 .picture img { display: block; max-width: 100%; max-height: 100%; -webkit-transition: 0.35s linear; -ms-transition: 0.35s linear; transition: 0.35s linear; } .g_list3 .text .title { color: #00549e; font-size: 26px; font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; text-overflow: ellipsis; overflow: hidden; margin-bottom: 5px; } @media screen and (max-width: 1920px) { .g_list3 .text .title { font-size: clamp(16px, calc(26 / 1920 * 100vw), 26px); } } @media screen and (max-width: 750px) { .g_list3 .text .title { font-size: 0.32rem; margin-bottom: 0.1rem; } } .g_list3 .text .tag { font-size: calc(18 / 16 * 1em); margin-bottom: 30px; } @media screen and (max-width: 1920px) { .g_list3 .text .tag { margin-bottom: clamp(15px, calc(30 / 1920 * 100vw), 30px); } } @media screen and (max-width: 750px) { .g_list3 .text .tag { margin-bottom: 0.3rem; } } .g_list3 .text .btn { color: #00549e; font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 400; display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline-flex; align-items: center; } .g_list3 .text .btn i { font-size: calc(12 / 16 * 1em); margin-left: 10px; } .g_list4 .item_con { display: block; } .g_list4 .item_con:hover .picture img { -webkit-transform: scale(1.02); -ms-transform: scale(1.02); transform: scale(1.02); } .g_list4 .item_con:hover .text .title { color: #00549e; } .g_list4 .picture { overflow: hidden; margin-bottom: 40px; } @media screen and (max-width: 1920px) { .g_list4 .picture { margin-bottom: calc(40 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .g_list4 .picture { margin-bottom: 0.2rem; } } .g_list4 .picture img { display: block; width: 100%; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; } .g_list4 .text { color: #333; border-bottom: 1px solid #d5dee8; } .g_list4 .text .date { font-size: calc(14 / 16 * 1em); margin-bottom: 15px; } @media screen and (max-width: 1920px) { .g_list4 .text .date { margin-bottom: calc(15 / 1920 * 100vw); } } .g_list4 .text .title { font-size: 36px; line-height: 1; margin-bottom: 25px; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; } @media screen and (max-width: 1920px) { .g_list4 .text .title { font-size: clamp(16px, calc(36 / 1920 * 100vw), 36px); margin-bottom: calc(25 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .g_list4 .text .title { font-size: 0.32rem; margin-bottom: 0.3rem; } } .g_list4 .text .desc { font-size: calc(18 / 16 * 1em); line-height: calc(30 / 18); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; margin-bottom: 25px; } @media screen and (max-width: 1920px) { .g_list4 .text .desc { margin-bottom: calc(25 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .g_list4 .text .desc { margin-bottom: 0.3rem; } } .g_list4 .text .btn { color: #00549e; display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline-flex; align-items: center; padding-bottom: 15px; border-bottom: 2px solid #00549e; } .g_list4 .text .btn i { font-size: calc(12 / 16 * 1em); margin-left: 10px; } .g_list5 .item { margin-bottom: 100px; } @media screen and (max-width: 1920px) { .g_list5 .item { margin-bottom: calc(100 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .g_list5 .item { margin-bottom: 0.4rem; } } .g_list5 .item_con { display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; } @media screen and (max-width: 750px) { .g_list5 .item_con { display: block; } } .g_list5 .item_con:hover .picture img { -webkit-transform: scale(1.02); -ms-transform: scale(1.02); transform: scale(1.02); } .g_list5 .item_con:hover .text .title { color: #00549e; } .g_list5 .item_con .left { flex: none; width: 480px; margin-right: 50px; } @media screen and (max-width: 1920px) { .g_list5 .item_con .left { width: clamp(250px, calc(480 / 1920 * 100vw), 480px); margin-right: calc(50 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .g_list5 .item_con .left { width: 100%; margin-right: 0; } } .g_list5 .item_con .picture { height: 0; padding-top: calc(340 / 480 * 100%); background-color: $gray; position: relative; overflow: hidden; } @media screen and (max-width: 750px) { .g_list5 .item_con .picture { margin-bottom: 0.2rem; } } .g_list5 .item_con .picture img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; } .g_list5 .item_con .text { color: #333; flex: 1; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; justify-content: space-between; } .g_list5 .item_con .text .date { font-size: calc(14 / 16 * 1em); margin-bottom: 15px; } @media screen and (max-width: 1920px) { .g_list5 .item_con .text .date { margin-bottom: calc(15 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .g_list5 .item_con .text .date { margin-bottom: 0.15rem; } } .g_list5 .item_con .text .title { font-size: 30px; line-height: 1; height: 2em; margin-bottom: 30px; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; } @media screen and (max-width: 1920px) { .g_list5 .item_con .text .title { font-size: clamp(16px, calc(30 / 1920 * 100vw), 30px); margin-bottom: calc(30 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .g_list5 .item_con .text .title { font-size: 0.32rem; height: auto; margin-bottom: 0.3rem; } } .g_list5 .item_con .text .desc { font-size: calc(18 / 16 * 1em); line-height: calc(30 / 18); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; text-overflow: ellipsis; overflow: hidden; } @media screen and (max-width: 750px) { .g_list5 .item_con .text .desc { margin-bottom: 0.3rem; } } .g_list5 .item_con .text .btn { color: #00549e; display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline-flex; align-items: center; } .g_list5 .item_con .text .btn i { font-size: calc(12 / 16 * 1em); margin-left: 10px; } .g_list6 .item { background-color: #fff; margin-bottom: 60px; } @media screen and (max-width: 1920px) { .g_list6 .item { margin-bottom: calc(60 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .g_list6 .item { margin-bottom: 0.6rem; } } .g_list6 .item:last-child { margin-bottom: 0; } .g_list6 .item.odd .item_con { -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .g_list6 .item_con { display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; } @media screen and (max-width: 750px) { .g_list6 .item_con { display: block; } } .g_list6 .item_con:hover .picture img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .g_list6 .item_con .right { flex: 1; } @media screen and (max-width: 750px) { .g_list6 .item_con .right { width: 100%; margin-right: 0; } } .g_list6 .item_con .picture { overflow: hidden; } @media screen and (max-width: 750px) { .g_list6 .item_con .picture { margin-bottom: 0.2rem; } } .g_list6 .item_con .picture img { display: block; width: 100%; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; } .g_list6 .item_con .text { color: #333; width: 550px; flex: none; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } @media screen and (max-width: 1920px) { .g_list6 .item_con .text { width: clamp(240px, calc(550 / 1920 * 100vw), 550px); } } @media screen and (max-width: 750px) { .g_list6 .item_con .text { width: auto; } } .g_list6 .item_con .text .text_con { padding: 45px 35px; flex: 1; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; justify-content: space-between; } @media screen and (max-width: 1920px) { .g_list6 .item_con .text .text_con { padding: calc(45 / 1920 * 100vw) calc(35 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .g_list6 .item_con .text .text_con { padding: 0.4rem 0.3rem; } } .g_list6 .item_con .text .top { height: 330px; background-color: #00549e; background-image: url("../images/bg3.png"); background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; justify-content: flex-end; } @media screen and (max-width: 1920px) { .g_list6 .item_con .text .top { height: calc(300 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .g_list6 .item_con .text .top { height: 3rem; } } .g_list6 .item_con .text .title { color: #fff; font-size: 40px; line-height: calc(48 / 40); padding: 0 35px; margin-bottom: 35px; } @media screen and (max-width: 1920px) { .g_list6 .item_con .text .title { font-size: clamp(16px, calc(40 / 1920 * 100vw), 40px); padding: 0 calc(35 / 1920 * 100vw); margin-bottom: calc(35 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .g_list6 .item_con .text .title { font-size: 0.32rem; padding: 0 0.3rem; margin-bottom: 0.3rem; } } .g_list6 .item_con .text .desc { font-size: calc(18 / 16 * 1em); line-height: calc(30 / 18); height: calc(5em * 30 / 18); overflow-y: auto; } @media screen and (max-width: 750px) { .g_list6 .item_con .text .desc { height: auto; margin-bottom: 0.3rem; } } .g_list6 .item_con .text .btn { color: #00549e; font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 400; display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline-flex; align-items: center; } .g_list6 .item_con .text .btn i { font-size: calc(12 / 16 * 1em); margin-left: 10px; } .m_contact_list { display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: -100px; } @media screen and (max-width: 1920px) { .m_contact_list { margin-bottom: calc(-100 / 1920 * 100vw); } } @media screen and (max-width: 990px) { .m_contact_list { display: block; } } @media screen and (max-width: 750px) { .m_contact_list { margin-bottom: 0; } } .m_contact_list .caption { padding-top: 10px; } .m_contact_list .list_item { width: calc((100% - 160px) / 2); margin-bottom: 150px; } @media screen and (max-width: 1920px) { .m_contact_list .list_item { margin-bottom: calc(150 / 1920 * 100vw); } } @media screen and (max-width: 990px) { .m_contact_list .list_item { width: 100%; } } @media screen and (max-width: 750px) { .m_contact_list .list_item { margin-bottom: 0.6rem; } } .m_contact_list .list_item:last-child { margin-bottom: 0; } .m_contact_list .list_item.odd .item_con { -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .m_contact_list .icon { color: #fff; font-size: 36px; width: 70px; height: 70px; background-color: #00549e; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: center; align-items: center; margin-bottom: 10px; } @media screen and (max-width: 1920px) { .m_contact_list .icon { font-size: clamp(20px, calc(36 / 1920 * 100vw), 36px); width: clamp(40px, calc(70 / 1920 * 100vw), 70px); height: clamp(40px, calc(70 / 1920 * 100vw), 70px); margin-bottom: calc(10 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_contact_list .icon { font-size: 0.36rem; width: 0.7rem; height: 0.7rem; margin-bottom: 0.1rem; } } .m_contact_list .hd { display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; } @media screen and (max-width: 1920px) { .m_contact_list .hd { margin-bottom: calc(20 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_contact_list .hd { margin-bottom: 0.2rem; } } .m_contact_list .title { font-size: 30px; font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; line-height: calc(36 / 30); } @media screen and (max-width: 1920px) { .m_contact_list .title { font-size: clamp(18px, calc(30 / 1920 * 100vw), 30px); } } @media screen and (max-width: 750px) { .m_contact_list .title { font-size: 0.36rem; } } .m_contact_list .btn { color: #777; font-size: calc(18 / 16 * 1em); font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 400; cursor: pointer; display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline-flex; align-items: center; } .m_contact_list .btn i { margin-right: 5px; } .m_contact_list .btn:hover { color: #00549e; } .m_contact_list dl { color: #777; display: -ms-flexbox; display: -webkit-box; display: flex; margin-bottom: 10px; } @media screen and (max-width: 750px) { .m_contact_list dl { margin-bottom: 0.1rem; } } .m_contact_list dl dt { flex: none; white-space: nowrap; } .m_contact_list dl dt i { margin-right: 5px; } @media screen and (max-width: 750px) { .m_contact_list dl dt i { margin-right: 0.1rem; } } .m_contact_list dl dd { flex: 1; } .m_contact_list dl a { color: #777; word-break: break-all; } .m_contact_list dl a:hover { color: #00549e; } .m_brand_business { text-align: center; position: relative; margin-top: 50px; margin-bottom: -120px; } @media screen and (max-width: 1920px) { .m_brand_business { margin-top: calc(50 / 1920 * 100vw); margin-bottom: calc(-120 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_brand_business { margin-top: 0; margin-bottom: -1.2rem; } } .m_brand_business .picture { width: 800px; display: inline-block; position: relative; } @media screen and (max-width: 1920px) { .m_brand_business .picture { width: calc(800 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_brand_business .picture { width: 80%; } } .m_brand_business .picture::before, .m_brand_business .picture::after { content: ''; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .m_brand_business .picture::before { width: calc(100% + 180px); height: calc(100% + 180px); background-image: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.5) 100%); -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } @media screen and (max-width: 1920px) { .m_brand_business .picture::before { width: calc(100% + calc(180 / 1920 * 100vw)); height: calc(100% + calc(180 / 1920 * 100vw)); } } .m_brand_business .picture::after { width: calc(100% + 560px); height: calc(100% + 560px); border: 30px solid #fff; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; opacity: 0.6; } @media screen and (max-width: 1920px) { .m_brand_business .picture::after { width: calc(100% + calc(560 / 1920 * 100vw)); height: calc(100% + calc(560 / 1920 * 100vw)); border-width: calc(30 / 1920 * 100vw); } } .m_brand_business .picture .bg img { -webkit-box-shadow: 0 45px 90px rgba(183,191,207,0.4); -ms-box-shadow: 0 45px 90px rgba(183,191,207,0.4); box-shadow: 0 45px 90px rgba(183,191,207,0.4); } @media screen and (max-width: 1920px) { .m_brand_business .picture .bg img { -webkit-box-shadow: 0 calc(45 / 1920 * 100vw) calc(90 / 1920 * 100vw) rgba(183,191,207,0.4); -ms-box-shadow: 0 calc(45 / 1920 * 100vw) calc(90 / 1920 * 100vw) rgba(183,191,207,0.4); box-shadow: 0 calc(45 / 1920 * 100vw) calc(90 / 1920 * 100vw) rgba(183,191,207,0.4); } } .m_brand_business .picture .line { position: absolute; left: 0; top: 0; } .m_brand_business .picture .line img { -webkit-animation: linescale 5s infinite; -ms-animation: linescale 5s infinite; animation: linescale 5s infinite; /* transform(scale(0)) animate(linescale 2s infinite) transform-origin: calc(643/802*100%) calc(420/802*100%) */ } .m_brand_business .picture .list i { width: 5px; height: 5px; background-color: #00549e; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; position: absolute; z-index: 2; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .m_brand_business .picture .list i:nth-child(4n) { -webkit-animation: dotscalealt 5s infinite; -ms-animation: dotscalealt 5s infinite; animation: dotscalealt 5s infinite; } .m_brand_business .picture .list i:nth-child(4n+1) { -webkit-animation: dotscalealt 5s infinite 1s; -ms-animation: dotscalealt 5s infinite 1s; animation: dotscalealt 5s infinite 1s; } .m_brand_business .picture .list i:nth-child(4n+2) { -webkit-animation: dotscalealt 5s infinite 2s; -ms-animation: dotscalealt 5s infinite 2s; animation: dotscalealt 5s infinite 2s; } .m_brand_business .picture .list i:nth-child(4n+3) { -webkit-animation: dotscalealt 5s infinite 3s; -ms-animation: dotscalealt 5s infinite 3s; animation: dotscalealt 5s infinite 3s; } .m_brand_business .picture .list i::before, .m_brand_business .picture .list i::after { content: ''; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: rgba(38,97,163,0.33); -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .m_brand_business .picture .list i::before { width: calc(100% + 4px); height: calc(100% + 4px); } .m_brand_business .picture .list i::after { width: calc(100% + 8px); height: calc(100% + 8px); } .m_brand_business .picture .list i.ct { width: 13px; height: 13px; left: calc(643 / 802 * 100%); top: calc(420 / 802 * 100%); -webkit-animation: none; -ms-animation: none; animation: none; } .m_brand_business .picture .list i.ct::before { width: calc(100% + 10px); height: calc(100% + 10px); } .m_brand_business .picture .list i.ct::after { width: calc(100% + 20px); height: calc(100% + 20px); } .m_brand_business .picture .list i.s1 { left: calc(60 / 802 * 100%); top: calc(240 / 802 * 100%); } .m_brand_business .picture .list i.s2 { left: calc(25 / 802 * 100%); top: calc(350 / 802 * 100%); } .m_brand_business .picture .list i.s3 { left: calc(143 / 802 * 100%); top: calc(543 / 802 * 100%); } .m_brand_business .picture .list i.s4 { left: calc(128 / 802 * 100%); top: calc(615 / 802 * 100%); } .m_brand_business .picture .list i.s5 { left: calc(213 / 802 * 100%); top: calc(193 / 802 * 100%); } .m_brand_business .picture .list i.s6 { left: calc(203 / 802 * 100%); top: calc(386 / 802 * 100%); } .m_brand_business .picture .list i.s7 { left: calc(265 / 802 * 100%); top: calc(230 / 802 * 100%); } .m_brand_business .picture .list i.s8 { left: calc(304 / 802 * 100%); top: calc(304 / 802 * 100%); } .m_brand_business .picture .list i.s9 { left: calc(288 / 802 * 100%); top: calc(380 / 802 * 100%); } .m_brand_business .picture .list i.s10 { left: calc(410 / 802 * 100%); top: calc(276 / 802 * 100%); } .m_brand_business .picture .list i.s11 { left: calc(410 / 802 * 100%); top: calc(425 / 802 * 100%); } .m_brand_business .picture .list i.s12 { left: calc(360 / 802 * 100%); top: calc(450 / 802 * 100%); } .m_brand_business .picture .list i.s13 { left: calc(378 / 802 * 100%); top: calc(510 / 802 * 100%); } .m_brand_business .picture .list i.s14 { left: calc(540 / 802 * 100%); top: calc(310 / 802 * 100%); } .m_brand_business .picture .list i.s15 { left: calc(550 / 802 * 100%); top: calc(464 / 802 * 100%); } .m_brand_business .picture .list i.s16 { left: calc(573 / 802 * 100%); top: calc(555 / 802 * 100%); } .m_brand_business .picture .list i.s17 { left: calc(650 / 802 * 100%); top: calc(150 / 802 * 100%); } .m_brand_business .picture .list i.s18 { left: calc(665 / 802 * 100%); top: calc(365 / 802 * 100%); } .m_brand_business .picture .list i.s19 { left: calc(705 / 802 * 100%); top: calc(353 / 802 * 100%); } .m_brand_business .picture .list i.s20 { left: calc(660 / 802 * 100%); top: calc(553 / 802 * 100%); } .m_brand_business .picture .list i.s21 { left: calc(715 / 802 * 100%); top: calc(580 / 802 * 100%); } .m_brand_business .picture img { position: relative; z-index: 2; display: block; max-width: 100%; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; margin: 0 auto; } .m_brand_business .text { position: absolute; z-index: 3; left: 0; right: 0; top: 0; } @media screen and (max-width: 750px) { .m_brand_business .text { position: relative; top: 0; margin-bottom: 0.6rem; } } .m_brand_business .text .desc { font-size: 26px; } @media screen and (max-width: 1920px) { .m_brand_business .text .desc { font-size: clamp(14px, calc(26 / 1920 * 100vw), 26px); } } @media screen and (max-width: 750px) { .m_brand_business .text .desc { font-size: 0.28rem; } } .m_brand_business .text .desc span { font-size: 2em; font-family: 'DIN-Medium'; } .m_brand_industry { display: -ms-flexbox; display: -webkit-box; display: flex; background-color: #fff; margin-bottom: 70px; } @media screen and (max-width: 1920px) { .m_brand_industry { margin-bottom: calc(70 / 1920 * 100vw); } } @media screen and (max-width: 990px) { .m_brand_industry { display: block; } } @media screen and (max-width: 750px) { .m_brand_industry { margin-bottom: 0.6rem; } } .m_brand_industry .left { width: 560px; flex: none; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } @media screen and (max-width: 1920px) { .m_brand_industry .left { width: calc(560 / 1920 * 100vw); } } @media screen and (max-width: 990px) { .m_brand_industry .left { width: auto; } } .m_brand_industry .top { height: 275px; } @media screen and (max-width: 1920px) { .m_brand_industry .top { height: calc(275 / 1920 * 100vw); } } @media screen and (max-width: 990px) { .m_brand_industry .top { height: auto; } } .m_brand_industry .top img { display: block; width: 100%; } .m_brand_industry .text { flex: 1; padding: 50px; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; } @media screen and (max-width: 1920px) { .m_brand_industry .text { padding: clamp(20px, calc(50 / 1920 * 100vw), 50px); } } @media screen and (max-width: 990px) { .m_brand_industry .text { padding-top: 40px; padding-bottom: 40px; } } @media screen and (max-width: 750px) { .m_brand_industry .text { padding: 0.6rem 0.4rem; } } .m_brand_industry .text .desc { font-size: 26px; line-height: calc(50 / 26); position: relative; padding-left: 35px; } @media screen and (max-width: 1920px) { .m_brand_industry .text .desc { font-size: clamp(14px, calc(26 / 1920 * 100vw), 26px); padding-left: calc(35 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_brand_industry .text .desc { font-size: 0.28rem; line-height: 1.75; padding-left: 1em; } } .m_brand_industry .text .desc::before, .m_brand_industry .text .desc::after { content: ''; width: 30px; height: 40px; background: url("../images/quot1.png") no-repeat center; -webkit-background-size: contain; -ms-background-size: contain; background-size: contain; position: absolute; opacity: 0.2; } @media screen and (max-width: 1920px) { .m_brand_industry .text .desc::before, .m_brand_industry .text .desc::after { width: calc(30 / 1920 * 100vw); height: calc(40 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_brand_industry .text .desc::before, .m_brand_industry .text .desc::after { width: 0.15rem; height: 0.2rem; } } .m_brand_industry .text .desc::before { left: 0; bottom: 100%; } .m_brand_industry .text .desc::after { background-image: url("../images/quot2.png"); right: 0; top: 100%; } .m_brand_industry .picture { flex: 1; background-color: $gray; overflow: hidden; } .m_brand_industry .picture img { display: block; width: 100%; -webkit-transition: 0.55s; -ms-transition: 0.55s; transition: 0.55s; } .m_brand_industry:hover .picture img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .m_brand_made { color: #fff; text-align: center; margin: 100px 0; } @media screen and (max-width: 1920px) { .m_brand_made { margin: calc(100 / 1920 * 100vw) 0; } } @media screen and (max-width: 990px) { .m_brand_made { margin: 1rem 0; } } .m_brand_made ul, .m_brand_made li { list-style: none; padding: 0; margin: 0; } .m_brand_made .tab_tit { font-size: 24px; font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; margin-bottom: 40px; } @media screen and (max-width: 1920px) { .m_brand_made .tab_tit { font-size: clamp(14px, calc(24 / 1920 * 100vw), 24px); margin-bottom: calc(40 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_brand_made .tab_tit { font-size: 0.28rem; margin-bottom: 0.4rem; } } .m_brand_made .tab_tit ul { display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline-flex; border-bottom: 1px solid #fff; } .m_brand_made .tab_tit ul li { height: 60px; margin-right: 110px; cursor: pointer; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; margin-bottom: -1px; } @media screen and (max-width: 1920px) { .m_brand_made .tab_tit ul li { height: clamp(40px, calc(60 / 1920 * 100vw), 60px); margin-right: calc(110 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_brand_made .tab_tit ul li { height: 1rem; } } .m_brand_made .tab_tit ul li:last-child { margin-right: 0; } .m_brand_made .tab_tit ul li.active { color: #00549e; font-size: 30px; border-bottom: 2px solid #00549e; } @media screen and (max-width: 1920px) { .m_brand_made .tab_tit ul li.active { font-size: clamp(16px, calc(30 / 1920 * 100vw), 30px); } } @media screen and (max-width: 750px) { .m_brand_made .tab_tit ul li.active { font-size: 0.32rem; } } .m_brand_made .text { font-size: 26px; line-height: 2; min-height: 360px; } @media screen and (max-width: 1920px) { .m_brand_made .text { font-size: clamp(14px, calc(26 / 1920 * 100vw), 26px); } } @media screen and (max-width: 750px) { .m_brand_made .text { font-size: 0.28rem; line-height: calc(40 / 26); } } .m_brand_made .tab_con_item { display: none; } .m_brand_made .tab_con_item.active { display: block; } .m_brand_research { display: -ms-flexbox; display: -webkit-box; display: flex; } @media screen and (max-width: 750px) { .m_brand_research { display: block; } } .m_brand_research .item { flex: none; width: 260px; margin-right: 10px; position: relative; cursor: pointer; -webkit-transition: 1s; -ms-transition: 1s; transition: 1s; } @media screen and (max-width: 1920px) { .m_brand_research .item { width: calc(260 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_brand_research .item { width: auto; margin-right: 0; margin-bottom: 0.1rem; } } .m_brand_research .item:last-child { margin-right: 0; } .m_brand_research .item.active { flex: 1; } @media screen and (max-width: 1024px) { .m_brand_research .item.active .text { display: block; } } @media screen and (max-width: 750px) { .m_brand_research .item.active .picture { padding-top: 4.2rem; } } .m_brand_research .item:hover .picture img { -webkit-transform: translate(-50%, -50%) scale(1.1); -ms-transform: translate(-50%, -50%) scale(1.1); transform: translate(-50%, -50%) scale(1.1); } .m_brand_research .picture { height: 680px; position: relative; overflow: hidden; } @media screen and (max-width: 1920px) { .m_brand_research .picture { height: clamp(300px, calc(680 / 1920 * 100vw), 680px); } } @media screen and (max-width: 750px) { .m_brand_research .picture { height: 0; padding-top: calc(260 / 1920 * 100vw); } } .m_brand_research .picture img { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: auto; height: 100%; -webkit-transition: 0.55s; -ms-transition: 0.55s; transition: 0.55s; } @media screen and (max-width: 750px) { .m_brand_research .picture img { width: 100%; height: auto; } } .m_brand_research .text { position: absolute; left: 0; right: 0; bottom: 0; color: #fff; font-size: 20px; padding: 30px 35px; } @media screen and (max-width: 1920px) { .m_brand_research .text { font-size: clamp(14px, calc(20 / 1920 * 100vw), 20px); padding: calc(30 / 1920 * 100vw) calc(35 / 1920 * 100vw); } } @media screen and (max-width: 1024px) { .m_brand_research .text { display: none; } } @media screen and (max-width: 750px) { .m_brand_research .text { font-size: 0.28rem; padding: 0.2rem 0.3rem; } } .m_brand_research .text .num { font-size: 44px; font-family: 'DIN-Medium'; } @media screen and (max-width: 1920px) { .m_brand_research .text .num { font-size: clamp(24px, calc(44 / 1920 * 100vw), 44px); } } @media screen and (max-width: 750px) { .m_brand_research .text .num { font-size: 0.5rem; } } .m_brand_lab { display: -ms-flexbox; display: -webkit-box; display: flex; background-color: #fff; margin-bottom: 70px; } @media screen and (max-width: 1920px) { .m_brand_lab { margin-bottom: calc(70 / 1920 * 100vw); } } @media screen and (max-width: 990px) { .m_brand_lab { display: block; } } @media screen and (max-width: 750px) { .m_brand_lab { margin-bottom: 0.6rem; } } .m_brand_lab .left { width: 560px; flex: none; } @media screen and (max-width: 1920px) { .m_brand_lab .left { width: calc(560 / 1920 * 100vw); } } @media screen and (max-width: 990px) { .m_brand_lab .left { width: auto; } } .m_brand_lab .picture { flex: 1; background-color: $gray; overflow: hidden; } .m_brand_lab .picture img { display: block; width: 100%; -webkit-transition: 0.55s; -ms-transition: 0.55s; transition: 0.55s; } .m_brand_lab .picture:hover img { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .m_brand_lab .picture .swiper { position: relative; } .m_brand_lab .picture .swiper .swiper-slide { overflow: hidden; } .m_brand_lab .picture .swiper .swiper-prev, .m_brand_lab .picture .swiper .swiper-next { color: #333; font-size: calc(12 / 16 * 1em); position: absolute; z-index: 9; top: 50%; cursor: pointer; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 60px; height: 60px; background-color: #fff; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; } @media screen and (max-width: 1920px) { .m_brand_lab .picture .swiper .swiper-prev, .m_brand_lab .picture .swiper .swiper-next { width: clamp(40px, calc(60 / 1920 * 100vw), 60px); height: clamp(40px, calc(60 / 1920 * 100vw), 60px); } } @media screen and (max-width: 750px) { .m_brand_lab .picture .swiper .swiper-prev, .m_brand_lab .picture .swiper .swiper-next { width: 0.8rem; height: 0.8rem; } } .m_brand_lab .picture .swiper .swiper-prev.swiper-button-disabled, .m_brand_lab .picture .swiper .swiper-next.swiper-button-disabled { background-color: rgba(255,255,255,0.5); cursor: default; } .m_brand_lab .picture .swiper .swiper-prev:not(.swiper-button-disabled):hover, .m_brand_lab .picture .swiper .swiper-next:not(.swiper-button-disabled):hover { color: #fff; background-color: #00549e; } .m_brand_lab .picture .swiper .swiper-prev { left: 50px; } @media screen and (max-width: 1920px) { .m_brand_lab .picture .swiper .swiper-prev { left: calc(50 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_brand_lab .picture .swiper .swiper-prev { left: 0.3rem; } } .m_brand_lab .picture .swiper .swiper-next { right: 50px; } @media screen and (max-width: 1920px) { .m_brand_lab .picture .swiper .swiper-next { right: calc(50 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_brand_lab .picture .swiper .swiper-next { right: 0.3rem; } } .g_list7 { display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 100%; } @media screen and (max-width: 990px) { .g_list7 { display: block; } } .g_list7 .item { font-size: 18px; padding: 20px 55px; border-bottom: 1px solid #d5dee8; flex: 1; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; } @media screen and (max-width: 1920px) { .g_list7 .item { font-size: clamp(14px, calc(18 / 1920 * 100vw), 18px); padding: 20px clamp(20px, calc(55 / 1920 * 100vw), 55px); } } @media screen and (max-width: 750px) { .g_list7 .item { font-size: 0.24rem; padding: 0.4rem; } } .g_list7 .item:last-child { border-bottom: 0; } .g_list7 .item .text { flex: 1; } .g_list7 .item .top { display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; justify-content: space-between; align-items: center; } .g_list7 .item .icon { height: 60px; display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: center; align-items: center; } @media screen and (max-width: 1920px) { .g_list7 .item .icon { height: clamp(40px, calc(60 / 1920 * 100vw), 60px); } } @media screen and (max-width: 750px) { .g_list7 .item .icon { height: 0.6rem; } } .g_list7 .item .icon img { display: block; max-width: 100%; max-height: 100%; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; } .g_list7 .item .num { color: #00549e; font-family: 'DIN-Medium'; line-height: 1; } .g_list7 .item .num span { font-size: 64px; } @media screen and (max-width: 1920px) { .g_list7 .item .num span { font-size: clamp(32px, calc(64 / 1920 * 100vw), 64px); } } @media screen and (max-width: 750px) { .g_list7 .item .num span { font-size: 0.64rem; } } .g_list7 .item .title { color: #00549e; font-size: 26px; margin-bottom: 5px; } @media screen and (max-width: 1920px) { .g_list7 .item .title { font-size: clamp(16px, calc(26 / 1920 * 100vw), 26px); } } @media screen and (max-width: 750px) { .g_list7 .item .title { font-size: 0.32rem; margin-bottom: 0.1rem; } } .g_list7 .item .desc { color: #666; } .m_search { text-align: center; padding: 130px 0 100px; border-top: 1px solid #d5dee8; border-bottom: 1px solid #d5dee8; } @media screen and (max-width: 1920px) { .m_search { padding: calc(130 / 1920 * 100vw) 0 calc(100 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_search { padding: 1.5rem 0 1rem; } } .m_search .caption { font-size: 50px; line-height: calc(60 / 50); margin-bottom: 40px; } @media screen and (max-width: 1920px) { .m_search .caption { font-size: clamp(20px, calc(50 / 1920 * 100vw), 50px); margin-bottom: calc(40 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_search .caption { font-size: 0.48rem; margin-bottom: 0.4rem; } } .m_search .form { display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: space-between; align-items: center; border: 1px solid #ccc; -webkit-border-radius: 35px; -ms-border-radius: 35px; border-radius: 35px; max-width: 870px; margin: 0 auto; } @media screen and (max-width: 1920px) { .m_search .form { max-width: calc(870 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_search .form { max-width: 100%; -webkit-border-radius: 0.4rem; -ms-border-radius: 0.4rem; border-radius: 0.4rem; } } .m_search .form .inp { font-size: calc(18 / 16 * 1em); display: block; height: 70px; } @media screen and (max-width: 1920px) { .m_search .form .inp { height: clamp(40px, calc(70 / 1920 * 100vw), 70px); } } @media screen and (max-width: 750px) { .m_search .form .inp { font-size: 0.28rem; height: 0.8rem; } } .m_search .form i { font-size: calc(20 / 16 * 1em); margin: 0 10px 0 25px; } @media screen and (max-width: 1920px) { .m_search .form i { margin: 0 calc(10 / 1920 * 100vw) 0 calc(25 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_search .form i { margin: 0 0.1rem 0 0.25rem; } } .m_search .form .inp { flex: 1; width: 100%; } .g_list8 { display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: space-between; flex-wrap: wrap; border-bottom: 1px solid #d5dee8; } @media screen and (max-width: 750px) { .g_list8 { display: block; } } .g_list8 .item { width: calc((100% - 190px) / 2); margin-bottom: 90px; } @media screen and (max-width: 1920px) { .g_list8 .item { width: calc((100% - calc(190 / 1920 * 100vw)) / 2); margin-bottom: calc(90 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .g_list8 .item { width: auto; margin-bottom: 0.6rem; } } .g_list8 .con { display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; } @media screen and (max-width: 750px) { .g_list8 .con { display: block; } } .g_list8 .con .left { flex: none; width: 325px; margin-right: 75px; } @media screen and (max-width: 1920px) { .g_list8 .con .left { width: calc(325 / 1920 * 100vw); margin-right: calc(75 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .g_list8 .con .left { width: auto; margin-right: 0; margin-bottom: 0.2rem; } } .g_list8 .con .picture { height: 0; padding-top: calc(230 / 325 * 100%); background-color: #fff; position: relative; overflow: hidden; } .g_list8 .con .picture img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; } .g_list8 .con .text { flex: 1; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; justify-content: space-between; color: #333; } .g_list8 .con .text .title { font-size: 26px; } @media screen and (max-width: 1920px) { .g_list8 .con .text .title { font-size: clamp(16px, calc(26 / 1920 * 100vw), 26px); } } @media screen and (max-width: 750px) { .g_list8 .con .text .title { font-size: 0.32rem; } } .g_list8 .con .text .tag { font-size: calc(18 / 16 * 1em); } .g_list8 .con .text .btn { color: #00549e; display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline-flex; align-items: center; } .g_list8 .con .text .btn i { font-size: calc(12 / 16 * 1em); margin-left: 10px; } .m_product_param { display: -ms-flexbox; display: -webkit-box; display: flex; } @media screen and (max-width: 750px) { .m_product_param { display: block; } } .m_product_param .left { flex: none; width: 745px; margin-right: 150px; overflow: hidden; } @media screen and (max-width: 1920px) { .m_product_param .left { width: calc(745 / 1920 * 100vw); margin-right: calc(150 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_product_param .left { width: 100%; margin-right: 0; margin-bottom: 0.4rem; } } .m_product_param .right { flex: 1; overflow: hidden; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .m_product_param .swiper { position: relative; } .m_product_param .swiper .swiper-prev, .m_product_param .swiper .swiper-next { color: #333; font-size: calc(12 / 16 * 1em); position: absolute; z-index: 9; top: 50%; cursor: pointer; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 60px; height: 60px; background-color: #f7f7f7; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; } @media screen and (max-width: 1920px) { .m_product_param .swiper .swiper-prev, .m_product_param .swiper .swiper-next { width: clamp(40px, calc(60 / 1920 * 100vw), 60px); height: clamp(40px, calc(60 / 1920 * 100vw), 60px); } } @media screen and (max-width: 750px) { .m_product_param .swiper .swiper-prev, .m_product_param .swiper .swiper-next { width: 0.8rem; height: 0.8rem; } } .m_product_param .swiper .swiper-prev.swiper-button-disabled, .m_product_param .swiper .swiper-next.swiper-button-disabled { opacity: 0.4; cursor: default; } .m_product_param .swiper .swiper-prev:not(.swiper-button-disabled):hover, .m_product_param .swiper .swiper-next:not(.swiper-button-disabled):hover { color: #fff; background-color: #00549e; } .m_product_param .swiper .swiper-prev { left: 15px; } @media screen and (max-width: 1920px) { .m_product_param .swiper .swiper-prev { left: calc(15 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_product_param .swiper .swiper-prev { left: 0.3rem; } } .m_product_param .swiper .swiper-next { right: 15px; } @media screen and (max-width: 1920px) { .m_product_param .swiper .swiper-next { right: calc(15 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_product_param .swiper .swiper-next { right: 0.3rem; } } .m_product_param .picture { height: 580px; overflow: hidden; display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: center; align-items: center; } @media screen and (max-width: 1920px) { .m_product_param .picture { height: calc(580 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_product_param .picture { height: 4.5rem; } } .m_product_param .picture img { display: block; max-width: 100%; max-height: 100%; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .m_product_param .picture:hover img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .m_product_param .tab { font-size: 20px; margin-bottom: 20px; display: -ms-flexbox; display: -webkit-box; display: flex; flex: none; } @media screen and (max-width: 1920px) { .m_product_param .tab { font-size: clamp(14px, calc(20 / 1920 * 100vw), 20px); margin-bottom: calc(20 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_product_param .tab { font-size: 0.32rem; margin-bottom: 0.6rem; justify-content: center; } } .m_product_param .tab .tab_li { cursor: pointer; line-height: 1; padding: 0 15px; border-right: 2px solid #333; } @media screen and (max-width: 750px) { .m_product_param .tab .tab_li { padding: 0 0.3rem; } } .m_product_param .tab .tab_li:first-child { padding-left: 0; } .m_product_param .tab .tab_li:last-child { border: 0; padding-right: 0; } .m_product_param .tab .tab_li.active { color: #00549e; } .m_product_param .text { flex: 1; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; justify-content: center; } @media screen and (max-width: 750px) { .m_product_param .text { text-align: center; } } .m_product_param .text .tag { font-size: 18px; font-size: calc(18 / 16 * 1em); margin-bottom: 10px; display: -ms-flexbox; display: -webkit-box; display: flex; flex-wrap: wrap; } @media screen and (max-width: 750px) { .m_product_param .text .tag { font-size: 0.24rem; justify-content: center; } } .m_product_param .text .tag span { padding: 2px 15px; border: 1px solid #e8e8e8; -webkit-border-radius: 20px; -ms-border-radius: 20px; border-radius: 20px; margin-right: 20px; } @media screen and (max-width: 1920px) { .m_product_param .text .tag span { margin-right: calc(20 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_product_param .text .tag span { padding: 0.05rem 0.3rem; -webkit-border-radius: 0.3rem; -ms-border-radius: 0.3rem; border-radius: 0.3rem; margin-right: 0.1rem; } } .m_product_param .text .tag span:last-child { margin-right: 0; } .m_product_param .text .title { color: #00549e; font-size: 50px; font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; } @media screen and (max-width: 1920px) { .m_product_param .text .title { font-size: clamp(20px, calc(50 / 1920 * 100vw), 50px); } } @media screen and (max-width: 750px) { .m_product_param .text .title { font-size: 0.48rem; } } .m_product_param .text .desc { font-size: 24px; } @media screen and (max-width: 1920px) { .m_product_param .text .desc { font-size: clamp(14px, calc(24 / 1920 * 100vw), 24px); } } @media screen and (max-width: 750px) { .m_product_param .text .desc { font-size: 0.32rem; } } .m_product_detail { text-align: center; border-bottom: 1px solid #d5dee8; } .m_product_detail img { max-width: 100%; display: block; margin: 0 auto; } .g_list3_promote { display: -ms-flexbox; display: -webkit-box; display: flex; flex-wrap: wrap; } .g_list3_promote .item { width: calc((100% - 30px) / 3); margin-right: 15px; margin-bottom: 40px; } @media screen and (max-width: 1920px) { .g_list3_promote .item { width: calc((100% - calc(60 / 1920 * 100vw)) / 3); margin-right: calc(15 / 1920 * 100vw); margin-bottom: calc(40 / 1920 * 100vw); } } @media screen and (max-width: 990px) { .g_list3_promote .item { width: calc((100% - 15px) / 2); } } @media screen and (max-width: 750px) { .g_list3_promote .item { width: 100%; margin-right: 0; margin-bottom: 0.4rem; } } .g_list3_promote .item:nth-child(3n) { margin-right: 0; } @media screen and (max-width: 990px) { .g_list3_promote .item:nth-child(3n) { margin-right: calc(15 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .g_list3_promote .item:nth-child(3n) { margin-right: 0; } } @media screen and (max-width: 990px) { .g_list3_promote .item:nth-child(2n) { margin-right: 0; } } .g_list3_promote .con { color: #333; display: block; } .g_list3_promote .con:hover .picture img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .g_list3_promote .picture { height: 530px; background-color: #fff; border: 1px solid #d5dee8; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 25px; } @media screen and (max-width: 1920px) { .g_list3_promote .picture { height: clamp(200px, calc(530 / 1920 * 100vw), 530px); margin-bottom: clamp(10px, calc(25 / 1920 * 100vw), 25px); } } @media screen and (max-width: 750px) { .g_list3_promote .picture { height: 5.3rem; margin-bottom: 0.2rem; } } .g_list3_promote .picture img { display: block; max-width: 100%; max-height: 100%; -webkit-transition: 0.35s linear; -ms-transition: 0.35s linear; transition: 0.35s linear; } .g_list3_promote .text .title { font-size: 36px; font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 400; line-height: 1; margin-bottom: 5px; } @media screen and (max-width: 1920px) { .g_list3_promote .text .title { font-size: clamp(16px, calc(36 / 1920 * 100vw), 36px); } } @media screen and (max-width: 750px) { .g_list3_promote .text .title { font-size: 0.32rem; margin-bottom: 0.1rem; } } .g_list3_promote .text .tag { color: #666; font-size: 24px; margin-bottom: 30px; } @media screen and (max-width: 1920px) { .g_list3_promote .text .tag { font-size: clamp(14px, calc(24 / 1920 * 100vw), 24px); margin-bottom: clamp(15px, calc(30 / 1920 * 100vw), 30px); } } @media screen and (max-width: 750px) { .g_list3_promote .text .tag { font-size: 0.28rem; margin-bottom: 0.3rem; } } .g_list3_promote .text .btn { color: #00549e; font-weight: 400; display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline-flex; align-items: center; } @media screen and (max-width: 750px) { .g_list3_promote .text .btn { font-size: 0.24rem; } } .g_list3_promote .text .btn i { font-size: calc(12 / 16 * 1em); margin-left: 10px; } .m_solution_thumbs { border-bottom: 1px solid #d5dee8; display: -ms-flexbox; display: -webkit-box; display: flex; } .m_solution_thumbs .item { flex: 1; font-size: 20px; } @media screen and (max-width: 1920px) { .m_solution_thumbs .item { font-size: calc(20 / 16 * 1em); } } @media screen and (max-width: 750px) { .m_solution_thumbs .item { font-size: 0.32rem; } } .m_solution_thumbs .item span { height: 110px; cursor: pointer; display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline-flex; align-items: center; } @media screen and (max-width: 1920px) { .m_solution_thumbs .item span { height: clamp(50px, calc(110 / 1920 * 100vw), 110px); } } @media screen and (max-width: 750px) { .m_solution_thumbs .item span { height: 1rem; } } .m_solution_thumbs .item.active { color: #00549e; } .m_solution_thumbs .item.active span { border-bottom: 3px solid #00549e; } .m_solution_box { padding: 80px 0; } @media screen and (max-width: 1920px) { .m_solution_box { padding: clamp(40px, calc(80 / 1920 * 100vw), 80px) 0; } } @media screen and (max-width: 750px) { .m_solution_box { padding: 0.8rem 0; } } .m_solution_box .swiper { overflow: visible; } .m_solution_box .swiper .swiper-slide { overflow: hidden; -webkit-transition: 0.55s ease-in-out; -ms-transition: 0.55s ease-in-out; transition: 0.55s ease-in-out; } .m_solution_box .swiper.enter .item, .m_solution_box .swiper.animating .item { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } .m_solution_box .item { color: #333; display: -ms-flexbox; display: -webkit-box; display: flex; background-color: #fff; overflow: hidden; -webkit-transition: 0.55s linear; -ms-transition: 0.55s linear; transition: 0.55s linear; } @media screen and (max-width: 990px) { .m_solution_box .item { display: block; } } .m_solution_box .item .text { flex: none; width: calc(560 / 1620 * 100%); padding: 45px; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; justify-content: space-between; } @media screen and (max-width: 1920px) { .m_solution_box .item .text { padding: calc(45 / 1920 * 100vw); } } @media screen and (max-width: 990px) { .m_solution_box .item .text { width: auto; } } @media screen and (max-width: 750px) { .m_solution_box .item .text { padding: 0.4rem; } } .m_solution_box .item .text .title { font-size: 50px; font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; margin-bottom: 40px; } @media screen and (max-width: 1920px) { .m_solution_box .item .text .title { font-size: calc(50 / 1920 * 100vw); margin-bottom: calc(40 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_solution_box .item .text .title { font-size: 0.48rem; margin-bottom: 0.2rem; } } .m_solution_box .item .text .desc { line-height: calc(36 / 16); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; text-overflow: ellipsis; overflow: hidden; margin-bottom: 40px; } @media screen and (max-width: 1920px) { .m_solution_box .item .text .desc { margin-bottom: calc(40 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_solution_box .item .text .desc { line-height: 1.75; margin-bottom: 0.3rem; } } .m_solution_box .item .text .btn { color: #00549e; font-weight: 400; display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline-flex; align-items: center; } .m_solution_box .item .text .btn i { font-size: calc(12 / 16 * 1em); margin-left: 10px; } .m_solution_box .item .picture { flex: 1; background-color: $gray; overflow: hidden; } @media screen and (max-width: 990px) { .m_solution_box .item .picture { width: auto; } } .m_solution_box .item .picture img { display: block; width: 100%; -webkit-transition: 0.35s ease-in-out; -ms-transition: 0.35s ease-in-out; transition: 0.35s ease-in-out; } .m_solution_box .item .picture:hover img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .m_solution_detail .hd { font-size: 20px; text-align: center; margin-bottom: 60px; } @media screen and (max-width: 1920px) { .m_solution_detail .hd { font-size: clamp(14px, calc(20 / 1920 * 100vw), 20px); margin-bottom: calc(60 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_solution_detail .hd { font-size: 0.28rem; margin-bottom: 0.6rem; } } .m_solution_detail .tab_thumbs { border-top: 1px solid #d5dee8; } .m_solution_detail .tab_thumbs .item { font-size: 20px; height: 60px; display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline-flex; align-items: center; border-top: 2px solid transparent; margin-top: -1px; cursor: pointer; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_thumbs .item { font-size: clamp(14px, calc(20 / 1920 * 100vw), 20px); height: clamp(50px, calc(60 / 1920 * 100vw), 60px); } } @media screen and (max-width: 1024px) { .m_solution_detail .tab_thumbs .item { margin-right: 10px; } } @media screen and (max-width: 750px) { .m_solution_detail .tab_thumbs .item { font-size: 0.28rem; height: 1rem; margin-right: 0.3rem; } } .m_solution_detail .tab_thumbs .item.active { color: #00549e; border-color: #00549e; } .m_solution_detail .tab_thumbs .item.active a { color: #00549e; } .m_solution_detail .tab_thumbs .item a { color: #333; height: 100%; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; } .m_solution_detail .tab_thumbs .swiper { overflow: visible; } .m_solution_detail .tab_thumbs .swiper .swiper-wrapper { display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: space-between; } .m_solution_detail .tab_thumbs .swiper .swiper-wrapper .swiper-slide { width: auto !important; } .m_solution_detail .tab_thumbs .swiper .swiper-wrapper .swiper-slide.active .item { color: #00549e; border-color: #00549e; } .m_solution_detail .tab_thumbs .swiper .swiper-wrapper .swiper-slide.active .item a { color: #00549e; } @media screen and (max-width: 750px) { .m_solution_detail .tab_thumbs .swiper .swiper-wrapper .swiper-slide:last-child .item { margin-right: 0; } } .m_solution_detail .tab_gallery { background: url("../images/bg2.jpg") no-repeat center; background-attachment: fixed; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover; padding-bottom: 100px; /* .gallery > .swiper-wrapper > .swiper-slide { opacity: 0 !important &.swiper-slide-visible { opacity: 1 !important } } */ } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery { padding-bottom: calc(100 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture { position: relative; max-width: 1920px; margin: 0 auto -30px; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture { margin-bottom: calc(-30 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .bg img { display: block; width: 100%; } .m_solution_detail .tab_gallery .picture .list .list_item { position: absolute; width: 30px; height: 30px; background-color: #00549e; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list .list_item { width: clamp(16px, calc(30 / 1920 * 100vw), 30px); height: clamp(16px, calc(30 / 1920 * 100vw), 30px); } } .m_solution_detail .tab_gallery .picture .list .list_item::before { content: '+'; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; font-size: calc(20 / 16 * 1em); font-family: Arial, Helvetica, sans-serif; line-height: 1; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border: 7px solid rgba(38,97,163,0.3); -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list .list_item::before { border-width: clamp(3px, calc(7 / 1920 * 100vw), 7px); } } @media screen and (max-width: 750px) { .m_solution_detail .tab_gallery .picture .list .list_item::before { font-size: 0.1rem; border-width: 0.04rem; } } .m_solution_detail .tab_gallery .picture .list .list_item::after { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%) scale(0.5); -ms-transform: translate(-50%, -50%) scale(0.5); transform: translate(-50%, -50%) scale(0.5); width: 100%; height: 100%; border: 14px solid rgba(38,97,163,0.3); -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-transition: 0.55s; -ms-transition: 0.55s; transition: 0.55s; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list .list_item::after { border-width: clamp(6px, calc(14 / 1920 * 100vw), 14px); } } @media screen and (max-width: 750px) { .m_solution_detail .tab_gallery .picture .list .list_item::after { border-width: 0.08rem; } } .m_solution_detail .tab_gallery .picture .list .list_item .imgs { position: absolute; left: 50%; top: 50%; width: 413px; opacity: 0; visibility: hidden; -webkit-transform: translateY(-100%) scale(0); -ms-transform: translateY(-100%) scale(0); transform: translateY(-100%) scale(0); -webkit-transition: 0.55s; -ms-transition: 0.55s; transition: 0.55s; transform-origin: 0% 100%; } .m_solution_detail .tab_gallery .picture .list .list_item:hover::before { content: '-'; } .m_solution_detail .tab_gallery .picture .list .list_item:hover::after { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .m_solution_detail .tab_gallery .picture .list .list_item:hover .imgs { opacity: 1; visibility: visible; -webkit-transform: translateY(-100%) scale(1); -ms-transform: translateY(-100%) scale(1); transform: translateY(-100%) scale(1); } .m_solution_detail .tab_gallery .picture .list.list_t1 .list_item.s1 { left: calc(1000 / 1920 * 100%); top: calc(380 / 1050 * 100%); } .m_solution_detail .tab_gallery .picture .list.list_t1 .list_item.s1 .imgs { width: 760px; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list.list_t1 .list_item.s1 .imgs { width: calc(760 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .list.list_t1 .list_item.s2 { left: calc(990 / 1920 * 100%); top: calc(315 / 1050 * 100%); } .m_solution_detail .tab_gallery .picture .list.list_t1 .list_item.s2 .imgs { width: 413px; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list.list_t1 .list_item.s2 .imgs { width: calc(413 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .list.list_t1 .list_item.s3 { left: calc(562 / 1920 * 100%); top: calc(664 / 1050 * 100%); } .m_solution_detail .tab_gallery .picture .list.list_t1 .list_item.s3 .imgs { width: 343px; left: auto; right: 50%; transform-origin: 100% 100%; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list.list_t1 .list_item.s3 .imgs { width: calc(343 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .list.list_t1 .list_item.s4 { left: calc(1195 / 1920 * 100%); top: calc(578 / 1050 * 100%); } .m_solution_detail .tab_gallery .picture .list.list_t1 .list_item.s4 .imgs { width: 483px; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list.list_t1 .list_item.s4 .imgs { width: calc(483 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .list.list_t2 .list_item.s1 { left: calc(1260 / 1920 * 100%); top: calc(325 / 1050 * 100%); } .m_solution_detail .tab_gallery .picture .list.list_t2 .list_item.s1 .imgs { width: 463px; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list.list_t2 .list_item.s1 .imgs { width: calc(463 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .list.list_t2 .list_item.s2 { left: calc(1000 / 1920 * 100%); top: calc(636 / 1050 * 100%); } .m_solution_detail .tab_gallery .picture .list.list_t2 .list_item.s2 .imgs { width: 491px; -webkit-transform: translateY(-50%) scale(0); -ms-transform: translateY(-50%) scale(0); transform: translateY(-50%) scale(0); transform-origin: 0% 50%; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list.list_t2 .list_item.s2 .imgs { width: calc(491 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .list.list_t2 .list_item.s2:hover .imgs { -webkit-transform: translateY(-50%) scale(1); -ms-transform: translateY(-50%) scale(1); transform: translateY(-50%) scale(1); } .m_solution_detail .tab_gallery .picture .list.list_t2 .list_item.s3 { left: calc(866 / 1920 * 100%); top: calc(315 / 1050 * 100%); } .m_solution_detail .tab_gallery .picture .list.list_t2 .list_item.s3 .imgs { width: 713px; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list.list_t2 .list_item.s3 .imgs { width: calc(713 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .list.list_t2 .list_item.s4 { left: calc(945 / 1920 * 100%); top: calc(533 / 1050 * 100%); } .m_solution_detail .tab_gallery .picture .list.list_t2 .list_item.s4 .imgs { width: 413px; -webkit-transform: translateY(0%) scale(0); -ms-transform: translateY(0%) scale(0); transform: translateY(0%) scale(0); transform-origin: 0% 0%; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list.list_t2 .list_item.s4 .imgs { width: calc(413 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .list.list_t2 .list_item.s4:hover .imgs { -webkit-transform: translateY(0%) scale(1); -ms-transform: translateY(0%) scale(1); transform: translateY(0%) scale(1); } .m_solution_detail .tab_gallery .picture .list.list_t2 .list_item.s5 { left: calc(675 / 1920 * 100%); top: calc(513 / 1050 * 100%); } .m_solution_detail .tab_gallery .picture .list.list_t2 .list_item.s5 .imgs { width: 345px; left: auto; right: 50%; transform-origin: 100% 100%; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list.list_t2 .list_item.s5 .imgs { width: calc(345 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .list.list_t3 .list_item.s1 { left: calc(870 / 1920 * 100%); top: calc(387 / 1050 * 100%); } .m_solution_detail .tab_gallery .picture .list.list_t3 .list_item.s1 .imgs { width: 900px; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list.list_t3 .list_item.s1 .imgs { width: calc(900 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .list.list_t3 .list_item.s2 { left: calc(855 / 1920 * 100%); top: calc(280 / 1050 * 100%); } .m_solution_detail .tab_gallery .picture .list.list_t3 .list_item.s2 .imgs { width: 491px; left: auto; right: 50%; transform-origin: 100% 100%; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list.list_t3 .list_item.s2 .imgs { width: calc(491 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .list.list_t3 .list_item.s3 { left: calc(1190 / 1920 * 100%); top: calc(745 / 1050 * 100%); } .m_solution_detail .tab_gallery .picture .list.list_t3 .list_item.s3 .imgs { width: 480px; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list.list_t3 .list_item.s3 .imgs { width: calc(480 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .list.list_t3 .list_item.s4 { left: calc(1260 / 1920 * 100%); top: calc(830 / 1050 * 100%); } .m_solution_detail .tab_gallery .picture .list.list_t3 .list_item.s4 .imgs { width: 310px; -webkit-transform: translateY(-60%) scale(0); -ms-transform: translateY(-60%) scale(0); transform: translateY(-60%) scale(0); transform-origin: 0% 60%; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list.list_t3 .list_item.s4 .imgs { width: calc(310 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .list.list_t3 .list_item.s4:hover .imgs { -webkit-transform: translateY(-60%) scale(1); -ms-transform: translateY(-60%) scale(1); transform: translateY(-60%) scale(1); } .m_solution_detail .tab_gallery .picture .list.list_t3 .list_item.s5 { left: calc(777 / 1920 * 100%); top: calc(592 / 1050 * 100%); } .m_solution_detail .tab_gallery .picture .list.list_t3 .list_item.s5 .imgs { width: 431px; left: auto; right: 50%; -webkit-transform: translateY(0%) scale(0); -ms-transform: translateY(0%) scale(0); transform: translateY(0%) scale(0); transform-origin: 100% 0%; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list.list_t3 .list_item.s5 .imgs { width: calc(431 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .list.list_t3 .list_item.s5:hover .imgs { -webkit-transform: translateY(0%) scale(1); -ms-transform: translateY(0%) scale(1); transform: translateY(0%) scale(1); } .m_solution_detail .tab_gallery .picture .list.list_t3 .list_item.s6 { left: calc(999 / 1920 * 100%); top: calc(211 / 1050 * 100%); } .m_solution_detail .tab_gallery .picture .list.list_t3 .list_item.s6 .imgs { width: 661px; -webkit-transform: translateY(0%) scale(0); -ms-transform: translateY(0%) scale(0); transform: translateY(0%) scale(0); transform-origin: 0% 0%; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list.list_t3 .list_item.s6 .imgs { width: calc(661 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .list.list_t3 .list_item.s6:hover .imgs { -webkit-transform: translateY(0%) scale(1); -ms-transform: translateY(0%) scale(1); transform: translateY(0%) scale(1); } .m_solution_detail .tab_gallery .picture .list.list_t3 .list_item.s7 { left: calc(797 / 1920 * 100%); top: calc(288 / 1050 * 100%); } .m_solution_detail .tab_gallery .picture .list.list_t3 .list_item.s7 .imgs { width: 446px; left: auto; right: 50%; -webkit-transform: translateY(0%) scale(0); -ms-transform: translateY(0%) scale(0); transform: translateY(0%) scale(0); transform-origin: 100% 0%; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list.list_t3 .list_item.s7 .imgs { width: calc(446 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .list.list_t3 .list_item.s7:hover .imgs { -webkit-transform: translateY(0%) scale(1); -ms-transform: translateY(0%) scale(1); transform: translateY(0%) scale(1); } .m_solution_detail .tab_gallery .picture .list.list_t4 .list_item.s1 { left: calc(420 / 1920 * 100%); top: calc(635 / 1050 * 100%); } .m_solution_detail .tab_gallery .picture .list.list_t4 .list_item.s1 .imgs { width: 341px; left: auto; right: 50%; transform-origin: 100% 100%; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list.list_t4 .list_item.s1 .imgs { width: calc(341 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .list.list_t4 .list_item.s2 { left: calc(545 / 1920 * 100%); top: calc(660 / 1050 * 100%); } .m_solution_detail .tab_gallery .picture .list.list_t4 .list_item.s2 .imgs { width: 382px; left: auto; right: 50%; -webkit-transform: translateY(0%) scale(0); -ms-transform: translateY(0%) scale(0); transform: translateY(0%) scale(0); transform-origin: 100% 0%; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list.list_t4 .list_item.s2 .imgs { width: calc(382 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .list.list_t4 .list_item.s2:hover .imgs { -webkit-transform: translateY(0%) scale(1); -ms-transform: translateY(0%) scale(1); transform: translateY(0%) scale(1); } .m_solution_detail .tab_gallery .picture .list.list_t4 .list_item.s3 { left: calc(1105 / 1920 * 100%); top: calc(440 / 1050 * 100%); } .m_solution_detail .tab_gallery .picture .list.list_t4 .list_item.s3 .imgs { width: 420px; -webkit-transform: translateY(0%) scale(0); -ms-transform: translateY(0%) scale(0); transform: translateY(0%) scale(0); transform-origin: 0% 0%; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list.list_t4 .list_item.s3 .imgs { width: calc(420 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .list.list_t4 .list_item.s3:hover .imgs { -webkit-transform: translateY(0%) scale(1); -ms-transform: translateY(0%) scale(1); transform: translateY(0%) scale(1); } .m_solution_detail .tab_gallery .picture .list.list_t4 .list_item.s4 { left: calc(1225 / 1920 * 100%); top: calc(305 / 1050 * 100%); } .m_solution_detail .tab_gallery .picture .list.list_t4 .list_item.s4 .imgs { width: 433px; -webkit-transform: translateY(0%) scale(0); -ms-transform: translateY(0%) scale(0); transform: translateY(0%) scale(0); transform-origin: 0% 0%; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list.list_t4 .list_item.s4 .imgs { width: calc(433 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .list.list_t4 .list_item.s4:hover .imgs { -webkit-transform: translateY(0%) scale(1); -ms-transform: translateY(0%) scale(1); transform: translateY(0%) scale(1); } .m_solution_detail .tab_gallery .picture .list.list_t4 .list_item.s5 { left: calc(888 / 1920 * 100%); top: calc(540 / 1050 * 100%); } .m_solution_detail .tab_gallery .picture .list.list_t4 .list_item.s5 .imgs { width: 532px; left: auto; right: 50%; -webkit-transform: translateY(-100%) scale(0); -ms-transform: translateY(-100%) scale(0); transform: translateY(-100%) scale(0); transform-origin: 100% 100%; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list.list_t4 .list_item.s5 .imgs { width: calc(532 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .list.list_t4 .list_item.s5:hover .imgs { -webkit-transform: translateY(-100%) scale(1); -ms-transform: translateY(-100%) scale(1); transform: translateY(-100%) scale(1); } .m_solution_detail .tab_gallery .picture .list.list_t5 .list_item.s1 { left: calc(1130 / 1920 * 100%); top: calc(245 / 1050 * 100%); } .m_solution_detail .tab_gallery .picture .list.list_t5 .list_item.s1 .imgs { width: 604px; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list.list_t5 .list_item.s1 .imgs { width: calc(604 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .list.list_t5 .list_item.s2 { left: calc(1355 / 1920 * 100%); top: calc(815 / 1050 * 100%); } .m_solution_detail .tab_gallery .picture .list.list_t5 .list_item.s2 .imgs { width: 418px; -webkit-transform: translateY(-50%) scale(0); -ms-transform: translateY(-50%) scale(0); transform: translateY(-50%) scale(0); transform-origin: 0% 50%; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list.list_t5 .list_item.s2 .imgs { width: calc(418 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .list.list_t5 .list_item.s2:hover .imgs { -webkit-transform: translateY(-50%) scale(1); -ms-transform: translateY(-50%) scale(1); transform: translateY(-50%) scale(1); } .m_solution_detail .tab_gallery .picture .list.list_t5 .list_item.s3 { left: calc(1295 / 1920 * 100%); top: calc(720 / 1050 * 100%); } .m_solution_detail .tab_gallery .picture .list.list_t5 .list_item.s3 .imgs { width: 454px; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list.list_t5 .list_item.s3 .imgs { width: calc(454 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .list.list_t5 .list_item.s4 { left: calc(870 / 1920 * 100%); top: calc(570 / 1050 * 100%); } .m_solution_detail .tab_gallery .picture .list.list_t5 .list_item.s4 .imgs { width: 295px; -webkit-transform: translateY(0%) scale(0); -ms-transform: translateY(0%) scale(0); transform: translateY(0%) scale(0); transform-origin: 0% 0%; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list.list_t5 .list_item.s4 .imgs { width: calc(295 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .list.list_t5 .list_item.s4:hover .imgs { -webkit-transform: translateY(0%) scale(1); -ms-transform: translateY(0%) scale(1); transform: translateY(0%) scale(1); } .m_solution_detail .tab_gallery .picture .list.list_t5 .list_item.s5 { left: calc(715 / 1920 * 100%); top: calc(408 / 1050 * 100%); } .m_solution_detail .tab_gallery .picture .list.list_t5 .list_item.s5 .imgs { width: 407px; left: auto; right: 50%; -webkit-transform: translateY(-100%) scale(0); -ms-transform: translateY(-100%) scale(0); transform: translateY(-100%) scale(0); transform-origin: 100% 100%; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list.list_t5 .list_item.s5 .imgs { width: calc(407 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .list.list_t5 .list_item.s5:hover .imgs { -webkit-transform: translateY(-100%) scale(1); -ms-transform: translateY(-100%) scale(1); transform: translateY(-100%) scale(1); } .m_solution_detail .tab_gallery .picture .list.list_t5 .list_item.s6 { left: calc(305 / 1920 * 100%); top: calc(450 / 1050 * 100%); } .m_solution_detail .tab_gallery .picture .list.list_t5 .list_item.s6 .imgs { width: 154px; left: auto; right: 50%; -webkit-transform: translateY(0%) scale(0); -ms-transform: translateY(0%) scale(0); transform: translateY(0%) scale(0); transform-origin: 100% 0%; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .list.list_t5 .list_item.s6 .imgs { width: calc(154 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .list.list_t5 .list_item.s6:hover .imgs { -webkit-transform: translateY(0%) scale(1); -ms-transform: translateY(0%) scale(1); transform: translateY(0%) scale(1); } .m_solution_detail .tab_gallery .picture .swiper-slide { height: 1080px; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; opacity: 0 !important; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .picture .swiper-slide { height: calc(1080 / 1920 * 100vw); } } .m_solution_detail .tab_gallery .picture .swiper-slide.swiper-slide-active { opacity: 1 !important; } .m_solution_detail .tab_gallery .picture img { display: block; max-width: 100%; max-height: 100%; } .m_solution_detail .tab_gallery .tag { text-align: center; background-color: rgba(255,255,255,0.25); border: 1px solid rgba(255,255,255,0.75); -webkit-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: -ms-flexbox; display: -webkit-box; display: flex; } @media screen and (max-width: 750px) { .m_solution_detail .tab_gallery .tag { flex-wrap: wrap; } } .m_solution_detail .tab_gallery .tag .tag_item { flex: 1; padding-bottom: 15px; } @media screen and (max-width: 750px) { .m_solution_detail .tab_gallery .tag .tag_item { flex: none; width: 20%; } } .m_solution_detail .tab_gallery .tag .img { height: 200px; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .tag .img { height: clamp(100px, calc(200 / 1920 * 100vw), 200px); } } @media screen and (max-width: 750px) { .m_solution_detail .tab_gallery .tag .img { height: 1rem; } } .m_solution_detail .tab_gallery .tag .img img { display: block; max-width: 100%; max-height: 100%; } .m_solution_detail .tab_gallery .tag .title { color: #333; font-size: 24px; } @media screen and (max-width: 1920px) { .m_solution_detail .tab_gallery .tag .title { font-size: clamp(14px, calc(24 / 1920 * 100vw), 24px); } } @media screen and (max-width: 750px) { .m_solution_detail .tab_gallery .tag .title { font-size: 0.16rem; } } .m_solution_detail .sy_tab_gallery { background: url("../images/bg2.jpg") no-repeat center; background-attachment: fixed; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover; display: -ms-flexbox; display: -webkit-box; display: flex; } @media screen and (max-width: 750px) { .m_solution_detail .sy_tab_gallery { display: block; } } .m_solution_detail .sy_tab_gallery .left { width: 700px; position: relative; flex: none; } @media screen and (max-width: 1920px) { .m_solution_detail .sy_tab_gallery .left { width: calc(700 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_solution_detail .sy_tab_gallery .left { width: auto; } } .m_solution_detail .sy_tab_gallery .left .bg { height: 820px; background-position: center; background-repeat: no-repeat; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover; position: relative; } @media screen and (max-width: 1920px) { .m_solution_detail .sy_tab_gallery .left .bg { height: clamp(500px, calc(820 / 1920 * 100vw), 820px); } } @media screen and (max-width: 750px) { .m_solution_detail .sy_tab_gallery .left .bg { height: 5rem; } } .m_solution_detail .sy_tab_gallery .left .bg .text { position: absolute; left: 0; right: 0; bottom: 0; color: #fff; padding: 60px; padding-left: clamp(20px, calc(150 / 1920 * 100vw), 150px); } @media screen and (max-width: 1920px) { .m_solution_detail .sy_tab_gallery .left .bg .text { padding: calc(60 / 1920 * 100vw); padding-left: clamp(20px, calc(150 / 1920 * 100vw), 150px); } } @media screen and (max-width: 1024px) { .m_solution_detail .sy_tab_gallery .left .bg .text { padding: calc(60 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_solution_detail .sy_tab_gallery .left .bg .text { padding: 0.4rem; } } .m_solution_detail .sy_tab_gallery .left .bg .text .title { font-size: 40px; font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; margin-bottom: 15px; } @media screen and (max-width: 1920px) { .m_solution_detail .sy_tab_gallery .left .bg .text .title { font-size: clamp(20px, calc(40 / 1920 * 100vw), 40px); margin-bottom: calc(15 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_solution_detail .sy_tab_gallery .left .bg .text .title { font-size: 0.4rem; } } .m_solution_detail .sy_tab_gallery .left .bg .text .desc { line-height: calc(30 / 16); } @media screen and (max-width: 750px) { .m_solution_detail .sy_tab_gallery .left .bg .text .desc { line-height: 1.5; } } .m_solution_detail .sy_tab_gallery .left .bg .swiper .swiper-slide { opacity: 0; visibility: hidden; } .m_solution_detail .sy_tab_gallery .left .bg .swiper .swiper-slide.swiper-slide-active { opacity: 1; visibility: visible; } .m_solution_detail .sy_tab_gallery .right { flex: 1; overflow: hidden; padding: 0 100px 0 80px; } @media screen and (max-width: 1920px) { .m_solution_detail .sy_tab_gallery .right { padding: 0 clamp(20px, calc(100 / 1920 * 100vw), 100px) 0 clamp(20px, calc(80 / 1920 * 80vw), 100px); } } @media screen and (max-width: 750px) { .m_solution_detail .sy_tab_gallery .right { padding: 0.4rem 0.2rem; } } .m_solution_detail .sy_tab_gallery .right .swiper { position: relative; } .m_solution_detail .sy_tab_gallery .right .swiper .swiper-prev, .m_solution_detail .sy_tab_gallery .right .swiper .swiper-next { color: #fff; position: absolute; z-index: 9; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 50px; height: 50px; background-color: rgba(0,0,0,0.2); -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; cursor: pointer; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; } @media screen and (max-width: 1920px) { .m_solution_detail .sy_tab_gallery .right .swiper .swiper-prev, .m_solution_detail .sy_tab_gallery .right .swiper .swiper-next { width: clamp(30px, calc(50 / 1920 * 100vw), 50px); height: clamp(30px, calc(50 / 1920 * 100vw), 50px); } } @media screen and (max-width: 750px) { .m_solution_detail .sy_tab_gallery .right .swiper .swiper-prev, .m_solution_detail .sy_tab_gallery .right .swiper .swiper-next { width: 0.6rem; height: 0.6rem; } } .m_solution_detail .sy_tab_gallery .right .swiper .swiper-prev.swiper-button-disabled, .m_solution_detail .sy_tab_gallery .right .swiper .swiper-next.swiper-button-disabled { cursor: default; background-color: rgba(0,0,0,0.2); } .m_solution_detail .sy_tab_gallery .right .swiper .swiper-prev:not(.swiper-button-disabled):hover, .m_solution_detail .sy_tab_gallery .right .swiper .swiper-next:not(.swiper-button-disabled):hover { color: #fff; background-color: #00549e; } .m_solution_detail .sy_tab_gallery .right .swiper .swiper-prev { left: 0; } .m_solution_detail .sy_tab_gallery .right .swiper .swiper-next { right: 0; } .m_solution_detail .sy_tab_gallery .right .swiper .swiper-slide { height: 820px; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; } @media screen and (max-width: 1920px) { .m_solution_detail .sy_tab_gallery .right .swiper .swiper-slide { height: clamp(500px, calc(820 / 1920 * 100vw), 820px); } } @media screen and (max-width: 750px) { .m_solution_detail .sy_tab_gallery .right .swiper .swiper-slide { height: 5rem; } } .m_solution_detail .sy_tab_gallery .right .swiper .swiper-slide img { display: block; max-height: 100%; max-width: 100%; } .m_honor_thumbs { border-bottom: 1px solid #d5dee8; margin-bottom: 80px; } @media screen and (max-width: 1920px) { .m_honor_thumbs { margin-bottom: calc(80 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_honor_thumbs { margin-bottom: 0.6rem; } } .m_honor_thumbs .swiper { padding: 0 60px; position: relative; } @media screen and (max-width: 1920px) { .m_honor_thumbs .swiper { padding: 0 calc(60 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_honor_thumbs .swiper { padding: 0 0.6rem; } } .m_honor_thumbs .swiper .swiper-slide { width: auto !important; } .m_honor_thumbs .swiper .swiper-slide.active .year { color: #00549e; border-color: #00549e; } .m_honor_thumbs .swiper .swiper-slide.swiper-slide-prev .year { opacity: 0.4; } .m_honor_thumbs .swiper .swiper-prev, .m_honor_thumbs .swiper .swiper-next { color: #999; position: absolute; z-index: 9; top: 0; height: 100%; width: 2em; background-color: #f1f8ff; cursor: pointer; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; } .m_honor_thumbs .swiper .swiper-prev.swiper-button-disabled, .m_honor_thumbs .swiper .swiper-next.swiper-button-disabled { cursor: default; opacity: 0.4; } .m_honor_thumbs .swiper .swiper-prev:hover, .m_honor_thumbs .swiper .swiper-next:hover { color: #00549e; } .m_honor_thumbs .swiper .swiper-prev { left: 0; } .m_honor_thumbs .swiper .swiper-next { right: 0; } .m_honor_thumbs .year { color: #999; font-size: 26px; height: 80px; border-bottom: 2px solid transparent; display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline-flex; align-items: center; cursor: pointer; } @media screen and (max-width: 1920px) { .m_honor_thumbs .year { font-size: clamp(14px, calc(26 / 1920 * 100vw), 26px); height: clamp(50px, calc(80 / 1920 * 100vw), 80px); } } @media screen and (max-width: 750px) { .m_honor_thumbs .year { font-size: 0.28rem; height: 1rem; } } .m_honor_gallery { display: none; } .m_honor_gallery.active { display: block; } .m_honor_gallery .list, .m_honor_gallery .box { padding-left: 50px; padding-top: 100px; border-left: 1px solid #d5dee8; position: relative; margin-bottom: 80px; margin-left: 5px; /* .list { .item { flexbox() margin-bottom: 40px @media screen and (max-width: 1920px) { margin-bottom calc(40/1920*100vw) } @media screen and (max-width: 750px) { margin-bottom .4rem } &:hover { .picture { img { transform(scale(1.1)) } } } } } */ } @media screen and (max-width: 1920px) { .m_honor_gallery .list, .m_honor_gallery .box { padding-top: calc(100 / 1920 * 100vw); padding-left: calc(50 / 1920 * 100vw); margin-bottom: calc(80 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_honor_gallery .list, .m_honor_gallery .box { display: block; padding-top: 1rem; padding-left: 0.3rem; margin-bottom: 0.6rem; } } .m_honor_gallery .list::before, .m_honor_gallery .box::before { content: ''; position: absolute; left: 0; top: 0; width: 7px; height: 7px; background-color: #00549e; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .m_honor_gallery .list:hover .text .title, .m_honor_gallery .box:hover .text .title { color: #00549e; } .m_honor_gallery .list .left, .m_honor_gallery .box .left { flex: none; width: 370px; } @media screen and (max-width: 1920px) { .m_honor_gallery .list .left, .m_honor_gallery .box .left { width: clamp(100px, calc(370 / 1920 * 100vw), 370px); } } @media screen and (max-width: 750px) { .m_honor_gallery .list .left, .m_honor_gallery .box .left { width: 100%; margin-bottom: 0.2rem; } } .m_honor_gallery .list .item, .m_honor_gallery .box .item { display: -ms-flexbox; display: -webkit-box; display: flex; margin-bottom: 80px; } @media screen and (max-width: 1920px) { .m_honor_gallery .list .item, .m_honor_gallery .box .item { margin-bottom: calc(80 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_honor_gallery .list .item, .m_honor_gallery .box .item { display: block; margin-bottom: 0.8rem; } } .m_honor_gallery .list .item:hover .picture img, .m_honor_gallery .box .item:hover .picture img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .m_honor_gallery .list .item:hover .date, .m_honor_gallery .box .item:hover .date { color: #00549e; font-size: 100px; } @media screen and (max-width: 1920px) { .m_honor_gallery .list .item:hover .date, .m_honor_gallery .box .item:hover .date { font-size: calc(100 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_honor_gallery .list .item:hover .date, .m_honor_gallery .box .item:hover .date { font-size: 0.6rem; } } .m_honor_gallery .list .cent, .m_honor_gallery .box .cent { flex: none; width: 360px; margin-right: 145px; } @media screen and (max-width: 1920px) { .m_honor_gallery .list .cent, .m_honor_gallery .box .cent { width: clamp(200px, calc(360 / 1920 * 100vw), 360px); margin-right: calc(145 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_honor_gallery .list .cent, .m_honor_gallery .box .cent { width: 100%; margin-right: 0; margin-bottom: 0.2rem; } } .m_honor_gallery .list .date, .m_honor_gallery .box .date { color: #999; font-size: 26px; line-height: 1; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; } @media screen and (max-width: 1920px) { .m_honor_gallery .list .date, .m_honor_gallery .box .date { font-size: clamp(14px, calc(26 / 1920 * 100vw), 26px); } } @media screen and (max-width: 750px) { .m_honor_gallery .list .date, .m_honor_gallery .box .date { font-size: 0.28rem; } } .m_honor_gallery .list .picture, .m_honor_gallery .box .picture { height: 0; padding-top: calc(260 / 360 * 100%); background-color: $gray; position: relative; overflow: hidden; } .m_honor_gallery .list .picture img, .m_honor_gallery .box .picture img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; } .m_honor_gallery .list .text .desc, .m_honor_gallery .box .text .desc { font-size: calc(18 / 16 * 1em); line-height: calc(40 / 18); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; text-overflow: ellipsis; overflow: hidden; } @media screen and (max-width: 750px) { .m_honor_gallery .list .text .desc, .m_honor_gallery .box .text .desc { font-size: 0.24rem; line-height: 1.75; margin-bottom: 0.3rem; } } .platbg { background-color: #00549e; background-image: url("../images/bg2.jpg"); background-repeat: no-repeat; background-position: center; background-attachment: fixed; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover; } .m_news_flexbox { display: -ms-flexbox; display: -webkit-box; display: flex; } @media screen and (max-width: 1024px) { .m_news_flexbox { display: block; } } .m_news_flexbox.fixside .side_con { position: fixed; top: 0; } .m_news_flexbox.fixsideb .side_con { position: absolute; bottom: 0; } .m_news_flexbox .side_section { flex: none; width: 480px; margin-right: 100px; position: relative; } @media screen and (max-width: 1920px) { .m_news_flexbox .side_section { width: clamp(180px, calc(480 / 1920 * 100vw), 480px); margin-right: calc(100 / 1920 * 100vw); } } @media screen and (max-width: 1024px) { .m_news_flexbox .side_section { width: auto; margin-right: 0; display: none; } } .m_news_flexbox .side_section .side_con { display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 100%; max-height: 100vh; } .m_news_flexbox .side_section .title { color: #00549e; font-size: 50px; font-weight: normal; margin-bottom: 40px; } @media screen and (max-width: 1920px) { .m_news_flexbox .side_section .title { font-size: calc(50 / 1920 * 100vw); margin-bottom: calc(40 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_news_flexbox .side_section .title { font-size: 0.4rem; margin-bottom: 0.4rem; } } .m_news_flexbox .side_section .code { color: #999; text-align: center; width: 340px; } @media screen and (max-width: 1920px) { .m_news_flexbox .side_section .code { width: clamp(120px, calc(340 / 1920 * 100vw), 340px); } } @media screen and (max-width: 750px) { .m_news_flexbox .side_section .code { width: 4rem; } } .m_news_flexbox .side_section .code img { width: 110px; height: 110px; } @media screen and (max-width: 750px) { .m_news_flexbox .side_section .code img { width: 1.2rem; } } .m_news_flexbox .side_section .page { color: #00549e; width: 340px; position: relative; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; text-align: center; margin-bottom: 20px; flex: 1; } @media screen and (max-width: 1920px) { .m_news_flexbox .side_section .page { width: clamp(120px, calc(340 / 1920 * 100vw), 340px); height: clamp(120px, calc(340 / 1920 * 100vw), 340px); margin-bottom: calc(20 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_news_flexbox .side_section .page { margin-bottom: 0.2rem; } } .m_news_flexbox .side_section .page .total { font-size: 24px; width: 20%; padding-right: 5%; } @media screen and (max-width: 1920px) { .m_news_flexbox .side_section .page .total { font-size: clamp(14px, calc(24 / 1920 * 100vw), 24px); } } @media screen and (max-width: 750px) { .m_news_flexbox .side_section .page .total { font-size: 1em; } } .m_news_flexbox .side_section .page .current { font-size: 50px; width: 25%; } @media screen and (max-width: 1920px) { .m_news_flexbox .side_section .page .current { font-size: clamp(20px, calc(50 / 1920 * 100vw), 50px); } } @media screen and (max-width: 750px) { .m_news_flexbox .side_section .page .current { font-size: 2em; } } .m_news_flexbox .side_section .page svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; fill: none; stroke: rgba(38,97,163,0.2); stroke-dasharray: 300%; transition: stroke-dashoffset 2s ease-in-out; stroke-dashoffset: 50%; } .m_news_flexbox .side_section .page .line { width: 1px; height: 100%; background-color: rgba(38,97,163,0.5); } .m_news_flexbox .side_section .page .line::before { content: ''; position: absolute; left: 50%; top: 0; width: 13px; height: 13px; background-color: #00549e; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .m_news_flexbox .side_section .page .line i { width: 100%; height: 0; background-color: #00549e; display: block; } .m_news_flexbox .main_section { flex: 1; } .bg_white { background-color: #fff; } .g_list4_v1 { display: -ms-flexbox; display: -webkit-box; display: flex; flex-wrap: wrap; justify-content: space-between; } .g_list4_v1 .item { width: calc(450 / 1030 * 100%); margin-bottom: 125px; } @media screen and (max-width: 1920px) { .g_list4_v1 .item { margin-bottom: calc(125 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .g_list4_v1 .item { width: 100%; margin-bottom: 0.6rem; } } .g_list4_v1 .item:nth-child(2n) { -webkit-transform: translateY(125px); -ms-transform: translateY(125px); transform: translateY(125px); } @media screen and (max-width: 1920px) { .g_list4_v1 .item:nth-child(2n) { -webkit-transform: translateY(calc(125 / 1920 * 100vw)); -ms-transform: translateY(calc(125 / 1920 * 100vw)); transform: translateY(calc(125 / 1920 * 100vw)); } } @media screen and (max-width: 750px) { .g_list4_v1 .item:nth-child(2n) { -webkit-transform: none; -ms-transform: none; transform: none; } } .g_list4_v1 .item:nth-last-child(2), .g_list4_v1 .item.page { margin-bottom: 0; } @media screen and (max-width: 750px) { .g_list4_v1 .item:nth-last-child(2), .g_list4_v1 .item.page { margin-bottom: 0.6rem; } } .g_list4_v1 .item.page { -webkit-transform: none; -ms-transform: none; transform: none; } .g_list4_v1 .item_con { color: #fff; display: block; position: relative; } .g_list4_v1 .item_con:hover .picture { -webkit-box-shadow: -10px 10px 30px rgba(0,0,0,0.2); -ms-box-shadow: -10px 10px 30px rgba(0,0,0,0.2); box-shadow: -10px 10px 30px rgba(0,0,0,0.2); } .g_list4_v1 .item_con:hover .picture img { -webkit-transform: scale(1.02); -ms-transform: scale(1.02); transform: scale(1.02); } .g_list4_v1 .picture { height: 0; padding-top: calc(300 / 450 * 100%); background-color: #00549e; overflow: hidden; position: relative; -webkit-transition: 0.35s linear; -ms-transition: 0.35s linear; transition: 0.35s linear; } .g_list4_v1 .picture img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; -webkit-transition: 0.35s linear; -ms-transition: 0.35s linear; transition: 0.35s linear; } .g_list4_v1 .text { position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid rgba(255,255,255,0.6); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .g_list4_v1 .text .title { font-size: 20px; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; text-overflow: ellipsis; overflow: hidden; overflow: hidden; height: 60px; line-height: 60px; padding: 0 15px; background-image: linear-gradient(0deg, rgba(38,97,163,0.5), rgba(38,97,163,0)); } @media screen and (max-width: 1920px) { .g_list4_v1 .text .title { font-size: clamp(14px, calc(20 / 1920 * 100vw), 20px); height: clamp(40px, calc(60 / 1920 * 100vw), 60px); line-height: clamp(40px, calc(60 / 1920 * 100vw), 60px); } } @media screen and (max-width: 750px) { .g_list4_v1 .text .title { font-size: 0.32rem; height: 0.8rem; line-height: 0.8rem; padding: 0 0.3rem; } } .g_list4_v1 .page { display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; } @media screen and (max-width: 750px) { .g_list4_v1 .page { justify-content: center; } } .g_list4_v1 .page a { color: #333; width: 60px; height: 60px; background: #fff; border: 3px solid #d5dee8; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; margin-right: 40px; -webkit-transition: 0.55s; -ms-transition: 0.55s; transition: 0.55s; } @media screen and (max-width: 1920px) { .g_list4_v1 .page a { width: clamp(40px, calc(60 / 1920 * 100vw), 60px); height: clamp(40px, calc(60 / 1920 * 100vw), 60px); margin-right: calc(40 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .g_list4_v1 .page a { width: 0.8rem; height: 0.8rem; margin: 0 0.1rem; } } .g_list4_v1 .page a:hover { color: #fff; background: rgba(38,97,163,0.2); border-color: transparent; } .m_product_detail_box .box { display: -ms-flexbox; display: -webkit-box; display: flex; width: 1620px; margin: 0 auto; } @media screen and (max-width: 1920px) { .m_product_detail_box .box { width: calc(1620 / 1920 * 100%); } } .m_product_detail_box .box .item { overflow: hidden; margin-bottom: 30px; margin-left: 30px; } @media screen and (max-width: 1920px) { .m_product_detail_box .box .item { margin-bottom: calc(30 / 1920 * 100vw); margin-left: calc(30 / 1920 * 100vw); } } .m_product_detail_box .box .item img { display: block; width: 100%; height: 100%; transition: all 0.3s ease-in-out; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } .m_product_detail_box .box .item:hover img { -webkit-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } .m_product_detail_box .box .left { width: calc(518 / 1620 * 100%); } .m_product_detail_box .box .left .item { margin-left: 0; } .m_product_detail_box .box .right { flex: 1; } .m_product_detail_box .box .right .row { display: -ms-flexbox; display: -webkit-box; display: flex; } .m_product_detail_box .box .right .row .item { flex: 1; } .m_product_detail_list { background-color: #eceff2; padding: 100px 0; } @media screen and (max-width: 1920px) { .m_product_detail_list { padding: calc(100 / 1920 * 100vw) 0; } } @media screen and (max-width: 750px) { .m_product_detail_list { padding: 1rem 0; } } .m_product_detail_list .head { font-size: 50px; font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; line-height: 1.1; margin-bottom: 70px; } @media screen and (max-width: 1920px) { .m_product_detail_list .head { font-size: calc(50 / 1920 * 100vw); margin-bottom: calc(70 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_product_detail_list .head { font-size: 0.48rem; margin-bottom: 0.4rem; } } .m_product_detail_list .list .item { display: -ms-flexbox; display: -webkit-box; display: flex; background-color: #fff; margin-bottom: 70px; } @media screen and (max-width: 1920px) { .m_product_detail_list .list .item { margin-bottom: calc(70 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_product_detail_list .list .item { display: block; margin-bottom: 0.4rem; } } .m_product_detail_list .list .item:last-child { margin-bottom: 0; } .m_product_detail_list .list .item:nth-child(2n) { -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .m_product_detail_list .list .item .text { text-align: center; line-height: 1.1; flex: none; width: clamp(30%, calc(550 / 1620 * 100%), 550px); padding: 45px; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; align-items: center; justify-content: center; } @media screen and (max-width: 1920px) { .m_product_detail_list .list .item .text { padding: calc(45 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_product_detail_list .list .item .text { width: auto; padding: 0.4rem; } } .m_product_detail_list .list .item .text .title { font-size: 50px; font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; margin-bottom: 20px; } @media screen and (max-width: 1920px) { .m_product_detail_list .list .item .text .title { font-size: calc(50 / 1920 * 100vw); margin-bottom: calc(20 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_product_detail_list .list .item .text .title { font-size: 0.48rem; margin-bottom: 0.2rem; } } .m_product_detail_list .list .item .text .tag { font-size: 32px; } @media screen and (max-width: 1920px) { .m_product_detail_list .list .item .text .tag { font-size: clamp(16px, calc(32 / 1920 * 100vw), 32px); } } @media screen and (max-width: 750px) { .m_product_detail_list .list .item .text .tag { font-size: 0.32rem; } } .m_product_detail_list .list .item .picture { flex: 1; overflow: hidden; background-color: #00549e; } @media screen and (max-width: 990px) { .m_product_detail_list .list .item .picture { width: auto; } } .m_product_detail_list .list .item .picture img { display: block; width: 100%; transition: all 0.3s ease-in-out; } .m_product_detail_list .list .item .picture:hover img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .m_product_param_con { border-top: 1px solid #e8e8e8; } .m_product_param_con .m_product_param_item { display: none; } .m_product_param_con .m_product_param_item.active { display: block; } .m_product_detIntro .row { display: -ms-flexbox; display: -webkit-box; display: flex; padding: 50px 0; border-bottom: 1px solid #e8e8e8; } @media screen and (max-width: 1920px) { .m_product_detIntro .row { padding: calc(50 / 1920 * 100vw) 0; } } @media screen and (max-width: 1440px) { .m_product_detIntro .row { padding: calc(25 / 1920 * 100vw) 0; } } @media screen and (max-width: 750px) { .m_product_detIntro .row { padding: 0.4rem 0; } } .m_product_detIntro .row:first-child { padding-top: 0; } .m_product_detIntro .row:last-child { border: 0; } .m_product_detIntro .row .caption { font-size: 32px; font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; width: 730px; text-align: center; flex: none; } @media screen and (max-width: 1920px) { .m_product_detIntro .row .caption { font-size: clamp(16px, calc(32 / 1920 * 100vw), 32px); width: clamp(100px, calc(730 / 1920 * 100vw), 730px); } } @media screen and (max-width: 750px) { .m_product_detIntro .row .caption { font-size: 0.28rem; width: 6em; } } @media (min-aspect-ratio: 1920/960) { .m_product_detIntro .row .caption { font-size: clamp(16px, calc(32 / 1080 * 100vh), calc(32 / 1920 * 100vw)); } } .m_product_detIntro .row .cont { font-size: 24px; } @media screen and (max-width: 1920px) { .m_product_detIntro .row .cont { font-size: clamp(14px, calc(24 / 1920 * 100vw), 24px); } } @media screen and (max-width: 750px) { .m_product_detIntro .row .cont { font-size: 0.2rem; } } @media (min-aspect-ratio: 1920/960) { .m_product_detIntro .row .cont { font-size: clamp(14px, calc(24 / 1080 * 100vh), calc(24 / 1920 * 100vw)); } } .m_product_detIntro .row .cont dl { display: -ms-flexbox; display: -webkit-box; display: flex; margin-bottom: 30px; } @media screen and (max-width: 1920px) { .m_product_detIntro .row .cont dl { margin-bottom: calc(30 / 1920 * 100vw); } } @media screen and (max-width: 1440px) { .m_product_detIntro .row .cont dl { margin-bottom: calc(15 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_product_detIntro .row .cont dl { margin-bottom: 0.2rem; } } @media (min-aspect-ratio: 1920/960) { .m_product_detIntro .row .cont dl { margin-bottom: calc(20 / 1080 * 100vh); } } .m_product_detIntro .row .cont dl:last-child { margin-bottom: 0; } .m_product_detIntro .row .cont dl.special dt { width: 280px; } @media screen and (max-width: 1920px) { .m_product_detIntro .row .cont dl.special dt { width: clamp(100px, calc(280 / 1920 * 100vw), 280px); } } @media screen and (max-width: 750px) { .m_product_detIntro .row .cont dl.special dt { width: 8em; } } .m_product_detIntro .row .cont dl.special dd dt { width: 220px; } @media screen and (max-width: 1920px) { .m_product_detIntro .row .cont dl.special dd dt { width: clamp(80px, calc(220 / 1920 * 100vw), 220px); } } @media screen and (max-width: 750px) { .m_product_detIntro .row .cont dl.special dd dt { width: 4em; } } .m_product_detIntro .row .cont dt { width: 8em; font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; flex: none; } .m_product_detIntro .row .cont dd { color: #666; flex: 1; overflow: hidden; } @media screen and (max-width: 1920px) and (min-aspect-ratio: 1920/960) { .m_product_detIntro .row { padding: clamp(10px, calc(50 / 1080 * 100vh), calc(50 / 1920 * 100vw)) 0; } } .m_about_vision { position: relative; } .m_about_vision .bg { position: relative; z-index: 1; } .m_about_vision .bg .swiper-prev, .m_about_vision .bg .swiper-next { color: #fff; font-size: calc(14 / 16 * 1em); position: absolute; z-index: 9; top: 50%; cursor: pointer; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 60px; height: 60px; border: 3px solid rgba(255,255,255,0.5); -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; } @media screen and (max-width: 1920px) { .m_about_vision .bg .swiper-prev, .m_about_vision .bg .swiper-next { width: clamp(40px, calc(60 / 1920 * 100vw), 60px); height: clamp(40px, calc(60 / 1920 * 100vw), 60px); } } @media screen and (max-width: 750px) { .m_about_vision .bg .swiper-prev, .m_about_vision .bg .swiper-next { font-size: calc(12 / 16 * 1em); width: 0.6rem; height: 0.6rem; } } .m_about_vision .bg .swiper-prev.swiper-button-disabled, .m_about_vision .bg .swiper-next.swiper-button-disabled { background-color: rgba(255,255,255,0.1); cursor: default; } .m_about_vision .bg .swiper-prev:not(.swiper-button-disabled):hover, .m_about_vision .bg .swiper-next:not(.swiper-button-disabled):hover { color: #fff; background-color: rgba(38,97,163,0.2); border-color: transparent; } .m_about_vision .bg .swiper-prev { left: 60px; } @media screen and (max-width: 1920px) { .m_about_vision .bg .swiper-prev { left: calc(60 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_about_vision .bg .swiper-prev { left: 0.3rem; } } .m_about_vision .bg .swiper-next { right: 60px; } @media screen and (max-width: 1920px) { .m_about_vision .bg .swiper-next { right: calc(60 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_about_vision .bg .swiper-next { right: 0.3rem; } } .m_about_vision .bg .swiper .swiper-slide { height: 960px; } @media screen and (max-width: 1920px) { .m_about_vision .bg .swiper .swiper-slide { height: calc(960 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_about_vision .bg .swiper .swiper-slide { height: 100vw; } } .m_about_vision .bg .swiper .swiper-slide.swiper-slide-active .bg, .m_about_vision .bg .swiper .swiper-slide.swiper-slide-active .bg_m { clip-path: circle(200% at 100% 50%); } .m_about_vision .bg .swiper .swiper-slide.swiper-slide-prev .bg, .m_about_vision .bg .swiper .swiper-slide.swiper-slide-prev .bg_m { clip-path: circle(200% at 100% 50%); } .m_about_vision .bg .swiper .swiper-slide.swiper-slide-next { clip-path: circle(0% at 100% 50%); } .m_about_vision .bg .swiper .swiper-slide:not(.swiper-slide-active) .text .slogan .letter-ani { opacity: 0; transition-delay: 0s !important; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .m_about_vision .bg .swiper .swiper-slide .bg, .m_about_vision .bg .swiper .swiper-slide .bg_m { height: 100%; background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover; -webkit-transform: matrix(1, 0, 0, 1, 0, 0); -ms-transform: matrix(1, 0, 0, 1, 0, 0); transform: matrix(1, 0, 0, 1, 0, 0); clip-path: circle(0% at 100% 50%); -webkit-transition: clip-path 2s ease-out; -ms-transition: clip-path 2s ease-out; transition: clip-path 2s ease-out; } @media screen and (max-width: 750px) { .m_about_vision .bg .swiper .swiper-slide .bg { display: none; } } .m_about_vision .bg .swiper .swiper-slide .bg_m { display: none; } @media screen and (max-width: 750px) { .m_about_vision .bg .swiper .swiper-slide .bg_m { display: block; } } .m_about_vision .text { position: absolute; z-index: 2; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .m_about_vision .text .desc { font-size: 46px; text-align: center; white-space: nowrap; line-height: calc(60 / 46); } @media screen and (max-width: 1920px) { .m_about_vision .text .desc { font-size: clamp(16px, calc(46 / 1920 * 100vw), 46px); } } @media screen and (max-width: 750px) { .m_about_vision .text .desc { font-size: 0.32rem; } } .m_about_mission { display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; background-image: url("../images/bg6.jpg"); background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover; position: relative; } @media screen and (max-width: 750px) { .m_about_mission { display: block; } } .m_about_mission .left { flex: 1; overflow: hidden; } @media screen and (max-width: 750px) { .m_about_mission .left { width: auto; } } .m_about_mission .right { width: 50%; flex: none; } @media screen and (max-width: 750px) { .m_about_mission .right { width: auto; } } .m_about_mission .right .swiper-ctrls { position: absolute; z-index: 9; left: calc(50% - 220px); right: 100px; bottom: 90px; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; } @media screen and (max-width: 1920px) { .m_about_mission .right .swiper-ctrls { left: calc(50% - clamp(100px, calc(220 / 1920 * 100vw), 220px)); right: calc(100 / 1920 * 100vw); bottom: calc(90 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_about_mission .right .swiper-ctrls { left: 0.3rem; right: 0.3rem; bottom: 0.4rem; } } .m_about_mission .right .progress { flex: 1; height: 1px; background-color: #fff; } .m_about_mission .right .progress i { width: 50%; height: 100%; display: block; background-color: #00549e; -webkit-transition: 1s; -ms-transition: 1s; transition: 1s; } .m_about_mission .right .pagination { color: #999; font-size: 30px; margin-left: 25px; width: auto; } @media screen and (max-width: 1920px) { .m_about_mission .right .pagination { font-size: clamp(14px, calc(30 / 1920 * 100vw), 30px); margin-left: calc(25 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_about_mission .right .pagination { font-size: 0.32rem; margin-left: 0.2rem; } } .m_about_mission .right .pagination .swiper-pagination-current, .m_about_mission .right .pagination .current { color: #00549e; font-size: 50px; } @media screen and (max-width: 1920px) { .m_about_mission .right .pagination .swiper-pagination-current, .m_about_mission .right .pagination .current { font-size: calc(50 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_about_mission .right .pagination .swiper-pagination-current, .m_about_mission .right .pagination .current { font-size: 0.5rem; } } .m_about_mission .right .btns { display: -ms-flexbox; display: -webkit-box; display: flex; } .m_about_mission .right .btns .swiper-prev, .m_about_mission .right .btns .swiper-next { color: #fff; font-size: calc(14 / 16 * 1em); cursor: pointer; width: 60px; height: 60px; border: 3px solid #fff; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; margin-left: 25px; } @media screen and (max-width: 1920px) { .m_about_mission .right .btns .swiper-prev, .m_about_mission .right .btns .swiper-next { width: clamp(40px, calc(60 / 1920 * 100vw), 60px); height: clamp(40px, calc(60 / 1920 * 100vw), 60px); margin-left: calc(25 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_about_mission .right .btns .swiper-prev, .m_about_mission .right .btns .swiper-next { font-size: calc(12 / 16 * 1em); width: 0.6rem; height: 0.6rem; margin-left: 0.2rem; } } .m_about_mission .right .btns .swiper-prev:first-child, .m_about_mission .right .btns .swiper-next:first-child { margin-left: 0; } .m_about_mission .right .btns .swiper-next { background-color: #00549e; border-color: #00549e; } .m_about_mission .picture { overflow: hidden; } .m_about_mission .picture .swiper-slide { height: 960px; } @media screen and (max-width: 1920px) { .m_about_mission .picture .swiper-slide { height: calc(960 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_about_mission .picture .swiper-slide { height: 100vw; } } .m_about_mission .picture .swiper-slide.swiper-slide-active .bg, .m_about_mission .picture .swiper-slide.swiper-slide-active .bg_m { clip-path: circle(200% at 100% 50%); } .m_about_mission .picture .swiper-slide.swiper-slide-prev .bg, .m_about_mission .picture .swiper-slide.swiper-slide-prev .bg_m { clip-path: circle(200% at 100% 50%); } .m_about_mission .picture .swiper-slide.swiper-slide-next { clip-path: circle(0% at 100% 50%); } .m_about_mission .picture .swiper-slide:not(.swiper-slide-active) .text .slogan .letter-ani { opacity: 0; transition-delay: 0s !important; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .m_about_mission .picture .swiper-slide .bg, .m_about_mission .picture .swiper-slide .bg_m { height: 100%; background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover; -webkit-transform: matrix(1, 0, 0, 1, 0, 0); -ms-transform: matrix(1, 0, 0, 1, 0, 0); transform: matrix(1, 0, 0, 1, 0, 0); clip-path: circle(0% at 100% 50%); -webkit-transition: clip-path 2s ease-out; -ms-transition: clip-path 2s ease-out; transition: clip-path 2s ease-out; } @media screen and (max-width: 750px) { .m_about_mission .picture .swiper-slide .bg { display: none; } } .m_about_mission .picture .swiper-slide .bg_m { display: none; } @media screen and (max-width: 750px) { .m_about_mission .picture .swiper-slide .bg_m { display: block; } } .m_about_mission .text { padding: 180px 90px; text-align: left; max-width: 690px; } @media screen and (max-width: 1920px) { .m_about_mission .text { padding: calc(180 / 1920 * 100vw) calc(90 / 1920 * 100vw); max-width: calc(690 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_about_mission .text { padding: 1rem 0.4rem; max-width: 100%; } } .m_about_mission .text .desc { font-size: 36px; line-height: calc(48 / 36); } @media screen and (max-width: 1920px) { .m_about_mission .text .desc { font-size: clamp(16px, calc(36 / 1920 * 100vw), 36px); } } @media screen and (max-width: 750px) { .m_about_mission .text .desc { font-size: 0.32rem; } } .m_about_history { background-image: url("../images/bg6.jpg"); background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover; } .m_about_history .gallery { position: relative; } .m_about_history .gallery .swiper-prev, .m_about_history .gallery .swiper-next { color: #fff; font-size: calc(14 / 16 * 1em); position: absolute; z-index: 9; top: 50%; cursor: pointer; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 60px; height: 60px; border: 3px solid rgba(255,255,255,0.5); -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; } @media screen and (max-width: 1920px) { .m_about_history .gallery .swiper-prev, .m_about_history .gallery .swiper-next { width: clamp(40px, calc(60 / 1920 * 100vw), 60px); height: clamp(40px, calc(60 / 1920 * 100vw), 60px); } } @media screen and (max-width: 750px) { .m_about_history .gallery .swiper-prev, .m_about_history .gallery .swiper-next { font-size: calc(12 / 16 * 1em); width: 0.6rem; height: 0.6rem; } } .m_about_history .gallery .swiper-prev.swiper-button-disabled, .m_about_history .gallery .swiper-next.swiper-button-disabled { background-color: rgba(255,255,255,0.1); cursor: default; } .m_about_history .gallery .swiper-prev:not(.swiper-button-disabled):hover, .m_about_history .gallery .swiper-next:not(.swiper-button-disabled):hover { color: #fff; background-color: rgba(38,97,163,0.2); border-color: transparent; } .m_about_history .gallery .swiper-prev { left: 60px; } @media screen and (max-width: 1920px) { .m_about_history .gallery .swiper-prev { left: calc(60 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_about_history .gallery .swiper-prev { left: 0.3rem; } } .m_about_history .gallery .swiper-next { right: 60px; } @media screen and (max-width: 1920px) { .m_about_history .gallery .swiper-next { right: calc(60 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_about_history .gallery .swiper-next { right: 0.3rem; } } .m_about_history .swiper_gallery { overflow: visible; margin: 90px 0; } @media screen and (max-width: 1920px) { .m_about_history .swiper_gallery { margin: calc(90 / 1920 * 100vw) 0; } } @media screen and (max-width: 750px) { .m_about_history .swiper_gallery { margin: 1rem 0; } } .m_about_history .swiper_gallery .swiper-slide { width: 455px; } @media screen and (max-width: 1920px) { .m_about_history .swiper_gallery .swiper-slide { width: clamp(300px, calc(455 / 1920 * 100vw), 455px); } } @media screen and (max-width: 750px) { .m_about_history .swiper_gallery .swiper-slide { width: 100%; } } .m_about_history .swiper_gallery .swiper-slide .item { padding-top: 140px; } @media screen and (max-width: 1920px) { .m_about_history .swiper_gallery .swiper-slide .item { padding-top: calc(140 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_about_history .swiper_gallery .swiper-slide .item { padding-top: 0; } } @media screen and (max-width: 750px) { .m_about_history .swiper_gallery .swiper-slide:first-child .item { padding-top: 0 !important; } } .m_about_history .swiper_gallery .swiper-slide.swiper-slide-active .item { padding-top: 50px; } @media screen and (max-width: 1920px) { .m_about_history .swiper_gallery .swiper-slide.swiper-slide-active .item { padding-top: calc(50 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_about_history .swiper_gallery .swiper-slide.swiper-slide-active .item { padding-top: 0; } } .m_about_history .swiper_gallery .swiper-slide.swiper-slide-next + .swiper-slide .item { padding-top: 0; } @media screen and (max-width: 750px) { .m_about_history .swiper_gallery .swiper-slide.swiper-slide-next + .swiper-slide .item { padding-top: 0; } } .m_about_history .swiper_gallery .item { width: 325px; max-width: 100%; -webkit-transition: 1s; -ms-transition: 1s; transition: 1s; } @media screen and (max-width: 1920px) { .m_about_history .swiper_gallery .item { width: calc(325 / 455 * 100%); } } @media screen and (max-width: 750px) { .m_about_history .swiper_gallery .item { width: 100%; } } .m_about_history .swiper_gallery .item:hover .picture { -webkit-transform: translateX(30px) scale(1.1); -ms-transform: translateX(30px) scale(1.1); transform: translateX(30px) scale(1.1); } @media screen and (max-width: 1920px) { .m_about_history .swiper_gallery .item:hover .picture { -webkit-transform: translateX(calc(30 / 1920 * 100vw)) scale(1.1); -ms-transform: translateX(calc(30 / 1920 * 100vw)) scale(1.1); transform: translateX(calc(30 / 1920 * 100vw)) scale(1.1); } } @media screen and (max-width: 750px) { .m_about_history .swiper_gallery .item:hover .picture { -webkit-transform: none; -ms-transform: none; transform: none; } } .m_about_history .swiper_gallery .picture { height: 0; padding-top: calc(190 / 325 * 100%); background-color: #00549e; overflow: hidden; position: relative; margin-left: 25px; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); margin-bottom: 20px; -webkit-transition: 0.35s ease-in-out; -ms-transition: 0.35s ease-in-out; transition: 0.35s ease-in-out; /* &:hover { img { transform(scale(1.1)) } } */ } @media screen and (max-width: 1920px) { .m_about_history .swiper_gallery .picture { margin-left: calc(25 / 1920 * 100vw); margin-bottom: calc(20 / 1920 * 100vw); -webkit-transform: translateX(calc(30 / 1920 * 100vw)); -ms-transform: translateX(calc(30 / 1920 * 100vw)); transform: translateX(calc(30 / 1920 * 100vw)); } } @media screen and (max-width: 750px) { .m_about_history .swiper_gallery .picture { padding-top: calc(190 / 300 * 100%); margin-left: 0; margin-bottom: 0.2rem; -webkit-transform: none; -ms-transform: none; transform: none; } } .m_about_history .swiper_gallery .picture img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; -webkit-transition: 0.35s ease-in-out; -ms-transition: 0.35s ease-in-out; transition: 0.35s ease-in-out; } .m_about_history .swiper_gallery .text .year { color: #00549e; font-size: 72px; } @media screen and (max-width: 1920px) { .m_about_history .swiper_gallery .text .year { font-size: clamp(24px, calc(72 / 1920 * 100vw), 72px); } } @media screen and (max-width: 750px) { .m_about_history .swiper_gallery .text .year { font-size: 0.6rem; } } .m_about_history .swiper_gallery .text .desc { font-size: 20px; } @media screen and (max-width: 1920px) { .m_about_history .swiper_gallery .text .desc { font-size: clamp(14px, calc(20 / 1920 * 100vw), 20px); } } @media screen and (max-width: 750px) { .m_about_history .swiper_gallery .text .desc { font-size: 0.24rem; } } .m_about_history .thumbs { display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; } @media screen and (max-width: 750px) { .m_about_history .thumbs { display: block; } } .m_about_history .thumbs .mark { color: #00549e; font-size: 24px; width: 350px; margin-right: 120px; } @media screen and (max-width: 1920px) { .m_about_history .thumbs .mark { font-size: clamp(16px, calc(24 / 1920 * 100vw), 24px); width: clamp(12em, calc(350 / 1920 * 100vw), 350px); margin-right: calc(120 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_about_history .thumbs .mark { font-size: 0.32rem; margin-right: 0; } } .m_about_history .thumbs .mark img { max-width: 100%; } .m_about_history .swiper_thumbs { flex: 1; padding-top: 5px; position: relative; margin-right: -150px; overflow: hidden; } @media screen and (max-width: 1920px) { .m_about_history .swiper_thumbs { margin-right: calc(-150 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_about_history .swiper_thumbs { margin-right: -0.3rem; display: none; } } .m_about_history .swiper_thumbs::before { content: ''; position: absolute; z-index: 2; left: 0; top: 0; width: 11px; height: 11px; background-color: #00549e; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .m_about_history .swiper_thumbs .progress { height: 1px; position: absolute; left: 0; right: 0px; } .m_about_history .swiper_thumbs .progress i { display: block; height: 100%; width: 50%; background-color: #00549e; -webkit-transition: 1s; -ms-transition: 1s; transition: 1s; } .m_about_history .swiper_thumbs .swiper { border-top: 1px solid rgba(255,255,255,0.5); } .m_about_history .swiper_thumbs .swiper .swiper-slide.active .year, .m_about_history .swiper_thumbs .swiper .swiper-slide.swiper-slide-active .year { color: #00549e; } .m_about_history .swiper_thumbs .year { color: #999; font-size: 18px; padding-top: 20px; -webkit-transition: 0.35s 0.55s; -ms-transition: 0.35s 0.55s; transition: 0.35s 0.55s; cursor: pointer; display: inline-block; } @media screen and (max-width: 1440px) { .m_about_history .swiper_thumbs .year { font-size: 16px; } } @media screen and (max-width: 1024px) { .m_about_history .swiper_thumbs .year { font-size: 14px; } } @media screen and (max-width: 750px) { .m_about_history .swiper_thumbs .year { font-size: 0.32rem; padding-top: 0.2rem; } } .m_OEM_row { position: relative; max-width: 1920px; margin: 0 auto; } .m_OEM_row .head { color: #00549e; font-size: 50px; font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; padding: 50px 60px; background-image: linear-gradient(to right, rgba(255,255,255,0.5), rgba(255,255,255,0.4), rgba(255,255,255,0.1), rgba(255,255,255,0)); } @media screen and (max-width: 1920px) { .m_OEM_row .head { font-size: calc(50 / 1920 * 100vw); padding: calc(50 / 1920 * 100vw) calc(60 / 1920 * 100vw); bottom: calc(60 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_OEM_row .head { font-size: 0.48rem; padding: 0.3rem; bottom: 0.4rem; } } .m_OEM_row .box { position: relative; z-index: 1; margin-bottom: 30px; } @media screen and (max-width: 1920px) { .m_OEM_row .box { margin-bottom: calc(30 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_OEM_row .box { margin-bottom: 1rem; } } @media screen and (max-width: 750px) { .m_OEM_row .waveline { display: none; } } .m_OEM_row .waveline img { width: 100%; display: block; } @media screen and (max-width: 750px) { .m_OEM_row .waveline img { height: 70vh; } } .m_OEM_row .waveline path { fill-rule: evenodd; stroke: #fff; stroke-width: 2px; stroke-linecap: butt; stroke-linejoin: miter; fill: none; } .m_OEM_row .swiper { position: absolute; left: 0; right: 0; top: 0; height: 100%; padding: 0 60px; overflow: visible; opacity: 0; visibility: hidden; -webkit-animation: fade 1s forwards 3s; -ms-animation: fade 1s forwards 3s; animation: fade 1s forwards 3s; } @media screen and (max-width: 1920px) { .m_OEM_row .swiper { padding: 0 calc(60 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_OEM_row .swiper { padding: 0 0.3rem; position: static; opacity: 1; visibility: visible; -webkit-animation: none; -ms-animation: none; animation: none; } } @media screen and (max-width: 750px) { .m_OEM_row .swiper .swiper-wrapper { display: block; } } .m_OEM_row .swiper .swiper-slide { position: relative; } @media screen and (max-width: 750px) { .m_OEM_row .swiper .swiper-slide { width: auto !important; } } .m_OEM_row .swiper .swiper-slide.active { z-index: 7; } .m_OEM_row .swiper .swiper-slide.active .item::before { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .m_OEM_row .swiper .swiper-slide.active .picture { width: 160px; height: 160px; border-color: #00549e; } @media screen and (max-width: 1920px) { .m_OEM_row .swiper .swiper-slide.active .picture { width: clamp(80px, calc(160 / 1920 * 100vw), 160px); height: clamp(80px, calc(160 / 1920 * 100vw), 160px); } } @media screen and (max-width: 750px) { .m_OEM_row .swiper .swiper-slide.active .picture { width: 1rem; height: 1rem; width: 1.4rem; height: 1.4rem; } } .m_OEM_row .swiper .swiper-slide.active .intro { -webkit-transform: translate(-50%, 80px); -ms-transform: translate(-50%, 80px); transform: translate(-50%, 80px); } @media screen and (max-width: 1920px) { .m_OEM_row .swiper .swiper-slide.active .intro { -webkit-transform: translate(-50%, clamp(40px, calc(80 / 1920 * 100vw), 80px)); -ms-transform: translate(-50%, clamp(40px, calc(80 / 1920 * 100vw), 80px)); transform: translate(-50%, clamp(40px, calc(80 / 1920 * 100vw), 80px)); } } @media screen and (max-width: 750px) { .m_OEM_row .swiper .swiper-slide.active .intro { -webkit-transform: translate(-50%, 0.5rem); -ms-transform: translate(-50%, 0.5rem); transform: translate(-50%, 0.5rem); -webkit-transform: none; -ms-transform: none; transform: none; } } .m_OEM_row .swiper .swiper-slide.active .num { opacity: 0.22; visibility: visible; } .m_OEM_row .swiper .swiper-slide.active .title { font-size: 16px; font-size: 1em; color: #00549e; padding-top: 1.5em; } @media screen and (max-width: 750px) { .m_OEM_row .swiper .swiper-slide.active .title { font-size: calc(18 / 16 * 1em); padding-top: 0; } } .m_OEM_row .swiper .swiper-slide.active .desc { opacity: 1; visibility: visible; } .m_OEM_row .swiper .item { text-align: center; position: relative; position: absolute; /* &:hover { &::before { zoom: 1 } .picture { width: 160px height: @width border-color: $mainColor @media screen and (max-width: 1920px) { width clamp(80px, calc(160/1920*100vw), 160px) height: @width } @media screen and (max-width: 750px) { width: 1rem height: @width } } .intro { transform(translate(-50%, 80px)) @media screen and (max-width: 1920px) { transform(translate(-50%, clamp(40px, calc(80/1920*100vw), 80px))) } @media screen and (max-width: 750px) { transform(translate(-50%, .5rem)) } } .num { visibility: visible } .title { font-size 16px font-size: 1em color: $mainColor padding-top 1.5em } .desc { opacity: 1 visibility: visible } } */ } @media screen and (max-width: 750px) { .m_OEM_row .swiper .item { position: static; margin-bottom: 0.4rem; } } .m_OEM_row .swiper .item.item_s1 { left: 90%; top: calc(370 / 615 * 100%); } .m_OEM_row .swiper .item.item_s2 { left: 65%; top: calc(10 / 615 * 100%); } .m_OEM_row .swiper .item.item_s3 { left: 53%; top: calc(175 / 615 * 100%); } .m_OEM_row .swiper .item.item_s4 { left: 40%; top: calc(335 / 615 * 100%); } .m_OEM_row .swiper .item.item_s5 { left: 20%; top: calc(535 / 615 * 100%); } .m_OEM_row .swiper .item.item_s6 { left: 15%; top: calc(535 / 615 * 100%); } .m_OEM_row .swiper .item.item_s7 { left: 25%; top: calc(555 / 615 * 100%); } .m_OEM_row .swiper .item::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); width: 282px; height: 282px; background: url("../images/circle.png") no-repeat center; -webkit-background-size: contain; -ms-background-size: contain; background-size: contain; -webkit-transition: 1s; -ms-transition: 1s; transition: 1s; } @media screen and (max-width: 1920px) { .m_OEM_row .swiper .item::before { width: clamp(140px, calc(282 / 1920 * 100vw), 282px); height: clamp(140px, calc(282 / 1920 * 100vw), 282px); } } @media screen and (max-width: 750px) { .m_OEM_row .swiper .item::before { width: 1.4rem; height: 1.4rem; display: none; } } .m_OEM_row .swiper .item .picture { width: 70px; height: 70px; background-color: #fff; border: 2px solid #fff; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; overflow: hidden; margin: 0 auto; -webkit-transition: 1s; -ms-transition: 1s; transition: 1s; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media screen and (max-width: 1920px) { .m_OEM_row .swiper .item .picture { width: clamp(35px, calc(70 / 1920 * 100vw), 70px); height: clamp(35px, calc(70 / 1920 * 100vw), 70px); } } @media screen and (max-width: 750px) { .m_OEM_row .swiper .item .picture { width: 0.5rem; height: 0.5rem; position: static; -webkit-transform: none; -ms-transform: none; transform: none; width: 1.4rem; height: 1.4rem; border-color: #00549e; } } .m_OEM_row .swiper .item .picture img { display: block; width: 100%; height: 100%; } .m_OEM_row .swiper .item .intro { white-space: nowrap; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, 40px); -ms-transform: translate(-50%, 40px); transform: translate(-50%, 40px); } @media screen and (max-width: 1920px) { .m_OEM_row .swiper .item .intro { -webkit-transform: translate(-50%, clamp(17px, calc(40 / 1920 * 100vw), 40px)); -ms-transform: translate(-50%, clamp(17px, calc(40 / 1920 * 100vw), 40px)); transform: translate(-50%, clamp(17px, calc(40 / 1920 * 100vw), 40px)); } } @media screen and (max-width: 750px) { .m_OEM_row .swiper .item .intro { -webkit-transform: translate(-50%, 0.25rem); -ms-transform: translate(-50%, 0.25rem); transform: translate(-50%, 0.25rem); position: static; -webkit-transform: none; -ms-transform: none; transform: none; } } .m_OEM_row .swiper .item .num { color: #00549e; font-size: 48px; font-family: 'DIN-Medium'; font-weight: bold; line-height: 1; position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; visibility: hidden; -webkit-transition: 1s; -ms-transition: 1s; transition: 1s; } @media screen and (max-width: 1920px) { .m_OEM_row .swiper .item .num { font-size: calc(48 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_OEM_row .swiper .item .num { font-size: 0.48rem; position: static; -webkit-transform: none; -ms-transform: none; transform: none; opacity: 0.22; visibility: visible; } } .m_OEM_row .swiper .item .title { font-size: 18px; font-size: calc(18 / 16 * 1em); font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; margin-bottom: 20px; -webkit-transition: 1s; -ms-transition: 1s; transition: 1s; } @media screen and (max-width: 1920px) { .m_OEM_row .swiper .item .title { margin-bottom: calc(20 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_OEM_row .swiper .item .title { margin-bottom: 0.2rem; color: #00549e; margin-top: -1em; margin-bottom: 0.1rem; } } .m_OEM_row .swiper .item .desc { font-size: 24px; line-height: calc(36 / 24); opacity: 0; visibility: hidden; -webkit-transition: 1s; -ms-transition: 1s; transition: 1s; } @media screen and (max-width: 1920px) { .m_OEM_row .swiper .item .desc { font-size: clamp(14px, calc(24 / 1920 * 100vw), 24px); } } @media screen and (max-width: 750px) { .m_OEM_row .swiper .item .desc { font-size: 0.28rem; opacity: 1; visibility: visible; } } .m_OEM_row .text { text-align: right; position: absolute; z-index: 2; right: 60px; top: 0; } @media screen and (max-width: 750px) { .m_OEM_row .text { position: static; padding: 0 0.4rem 0.4rem; } } .m_OEM_row .text .title { color: #00549e; font-size: 30px; } @media screen and (max-width: 1920px) { .m_OEM_row .text .title { font-size: clamp(16px, calc(30 / 1920 * 100vw), 30px); } } @media screen and (max-width: 750px) { .m_OEM_row .text .title { font-size: 0.36rem; } } .m_OEM_row .text .title .line { display: block; height: 30px; border-right: 2px solid #00549e; margin: 20px 0; overflow: hidden; } @media screen and (max-width: 1920px) { .m_OEM_row .text .title .line { height: clamp(10px, calc(30 / 1920 * 100vw), 30px); margin: calc(20 / 1920 * 100vw) 0; } } @media screen and (max-width: 750px) { .m_OEM_row .text .title .line { height: 0.3rem; margin: 0.2rem 0; } } .m_OEM_row .text .desc { font-size: 20px; line-height: 2; } @media screen and (max-width: 1920px) { .m_OEM_row .text .desc { font-size: clamp(14px, calc(20 / 1920 * 100vw), 20px); } } @media screen and (max-width: 750px) { .m_OEM_row .text .desc { font-size: 0.24rem; line-height: 1.5; } } .m_OEM_row .swiper-prev, .m_OEM_row .swiper-next { color: #333; font-size: calc(14 / 16 * 1em); position: absolute; z-index: 9; top: 50%; cursor: pointer; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 60px; height: 60px; background-color: #fff; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; opacity: 0; visibility: hidden; -webkit-animation: fade 1s forwards 3s; -ms-animation: fade 1s forwards 3s; animation: fade 1s forwards 3s; } @media screen and (max-width: 1920px) { .m_OEM_row .swiper-prev, .m_OEM_row .swiper-next { width: clamp(40px, calc(60 / 1920 * 100vw), 60px); height: clamp(40px, calc(60 / 1920 * 100vw), 60px); } } @media screen and (max-width: 750px) { .m_OEM_row .swiper-prev, .m_OEM_row .swiper-next { font-size: calc(12 / 16 * 1em); width: 0.6rem; height: 0.6rem; display: none; } } .m_OEM_row .swiper-prev:not(.swiper-button-disabled):hover, .m_OEM_row .swiper-next:not(.swiper-button-disabled):hover { color: #fff; background-color: #00549e; } .m_OEM_row .swiper-prev { left: 60px; } @media screen and (max-width: 1920px) { .m_OEM_row .swiper-prev { left: calc(60 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_OEM_row .swiper-prev { left: 0.3rem; } } .m_OEM_row .swiper-next { right: 60px; } @media screen and (max-width: 1920px) { .m_OEM_row .swiper-next { right: calc(60 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_OEM_row .swiper-next { right: 0.3rem; } } .m_article { color: $fc5; line-height: 1.5; } .m_article .hd h1 { color: #333; font-size: 46px; font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; padding-bottom: 30px; border-bottom: 1px solid #ddd; margin-bottom: 30px; } @media screen and (max-width: 1920px) { .m_article .hd h1 { font-size: clamp(20px, calc(46 / 1920 * 100vw), 46px); padding-bottom: calc(30 / 1920 * 100vw); margin-bottom: calc(30 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_article .hd h1 { font-size: 0.36rem; padding-bottom: 0.2rem; margin-bottom: 0.2rem; } } .m_article .hd .info { color: #999; margin-bottom: 40px; } @media screen and (max-width: 1920px) { .m_article .hd .info { margin-bottom: calc(40 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_article .hd .info { margin-bottom: 0.4rem; } } .m_article .bd { line-height: calc(30 / 16); margin-bottom: 40px; } @media screen and (max-width: 1920px) { .m_article .bd { margin-bottom: calc(40 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_article .bd { margin-bottom: 0.4rem; } } .m_article .bd img { max-width: 100%; } .m_article .fd { color: #999; text-align: center; } .m_article_box { display: -ms-flexbox; display: -webkit-box; display: flex; justify-content: space-between; } @media screen and (max-width: 750px) { .m_article_box { display: block; } } .m_article_box .main_box { width: 960px; flex: none; margin-right: 60px; } @media screen and (max-width: 1920px) { .m_article_box .main_box { width: calc(960 / 1200 * 100%); margin-right: calc(60 / 1200 * 100%); } } @media screen and (max-width: 750px) { .m_article_box .main_box { width: auto; margin-right: 0; } } .m_article_box .side_box { flex: 1; max-width: 180px; } @media screen and (max-width: 750px) { .m_article_box .side_box { max-width: 4rem; margin: 0.4rem auto; } } .m_article_box .side_box .code { color: #999; text-align: center; padding: 20px; background-color: #fff; } @media screen and (max-width: 1920px) { .m_article_box .side_box .code { padding: calc(20 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_article_box .side_box .code { padding: 0.3rem; } } .m_article_box .side_box .code img { display: block; width: 100%; max-width: 180px; margin: 0 auto; } @media screen and (max-width: 750px) { .m_article_box .side_box .code img { max-width: 100vw; } } .m_about_history_row { background-image: url("../images/bg1.jpg"); background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover; background-attachment: scroll; } @media screen and (max-width: 750px) { .m_about_history_row { background-attachment: fixed; } } .m_about_history_row .box { position: relative; max-width: 1920px; margin: 0 auto; } .m_about_history_row .gallery { position: relative; } .m_about_history_row .gallery .bg { height: 540px; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; margin-bottom: -540px; } @media screen and (max-width: 1920px) { .m_about_history_row .gallery .bg { height: calc(540 / 1920 * 100vw); margin-bottom: calc(-540 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_about_history_row .gallery .bg { height: 3rem; margin-bottom: -3rem; display: none; } } .m_about_history_row .gallery .bg img { display: block; width: 100%; } .m_about_history_row .gallery .swiper-prev, .m_about_history_row .gallery .swiper-next { color: #333; font-size: calc(14 / 16 * 1em); cursor: pointer; width: 60px; height: 60px; background-color: #fff; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline-flex; align-items: center; justify-content: center; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; margin-right: 30px; } @media screen and (max-width: 1920px) { .m_about_history_row .gallery .swiper-prev, .m_about_history_row .gallery .swiper-next { width: clamp(40px, calc(60 / 1920 * 100vw), 60px); height: clamp(40px, calc(60 / 1920 * 100vw), 60px); margin-right: calc(30 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_about_history_row .gallery .swiper-prev, .m_about_history_row .gallery .swiper-next { font-size: calc(12 / 16 * 1em); width: 0.6rem; height: 0.6rem; display: none; } } .m_about_history_row .gallery .swiper-prev.swiper-button-disabled, .m_about_history_row .gallery .swiper-next.swiper-button-disabled { background-color: rgba(255,255,255,0.4); cursor: default; } .m_about_history_row .gallery .swiper-prev:not(.swiper-button-disabled):hover, .m_about_history_row .gallery .swiper-next:not(.swiper-button-disabled):hover { color: #fff; background-color: #00549e; } @media screen and (max-width: 750px) { .m_about_history_row .gallery .swiper-wrapper { -webkit-transform: translate3d(0px, 0px, 0px) !important; -ms-transform: translate3d(0px, 0px, 0px) !important; transform: translate3d(0px, 0px, 0px) !important; display: block; } } .m_about_history_row .swiper_gallery { overflow: visible; } .m_about_history_row .swiper_gallery .swiper-slide { height: 540px; } @media screen and (max-width: 1920px) { .m_about_history_row .swiper_gallery .swiper-slide { height: calc(540 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_about_history_row .swiper_gallery .swiper-slide { height: auto; width: auto !important; } } .m_about_history_row .swiper_gallery .swiper-slide.active .year { font-size: 60px; left: 0%; bottom: calc(100% + 1em); } @media screen and (max-width: 1920px) { .m_about_history_row .swiper_gallery .swiper-slide.active .year { font-size: clamp(24px, calc(60 / 1920 * 100vw), 60px); } } @media screen and (max-width: 750px) { .m_about_history_row .swiper_gallery .swiper-slide.active .year { font-size: 0.6rem; } } .m_about_history_row .swiper_gallery .swiper-slide.active .picture { width: 86px; height: 86px; background: none; border: 15px solid rgba(38,97,163,0.1); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media screen and (max-width: 1920px) { .m_about_history_row .swiper_gallery .swiper-slide.active .picture { width: calc(86 / 1920 * 100vw); height: calc(86 / 1920 * 100vw); border-width: calc(15 / 1920 * 100vw); } } .m_about_history_row .swiper_gallery .swiper-slide.active .desc { opacity: 1; } .m_about_history_row .swiper_gallery .swiper-slide.swiper-slide-active .item { margin-top: 189px; } @media screen and (max-width: 1920px) { .m_about_history_row .swiper_gallery .swiper-slide.swiper-slide-active .item { margin-top: calc(189 / 1920 * 100vw); } } .m_about_history_row .swiper_gallery .swiper-slide.swiper-slide-active + .swiper-slide .item { margin-top: 223px; } @media screen and (max-width: 1920px) { .m_about_history_row .swiper_gallery .swiper-slide.swiper-slide-active + .swiper-slide .item { margin-top: calc(223 / 1920 * 100vw); } } .m_about_history_row .swiper_gallery .swiper-slide.swiper-slide-active + .swiper-slide + .swiper-slide .item { margin-top: 284px; /* .year { font-size 60px left: 0% bottom: calc(100% + 1em) @media screen and (max-width: 1920px) { font-size clamp(24px, calc(60/1920*100vw), 60px) } @media screen and (max-width: 750px) { font-size .6rem } } .picture { width: 86px height: @width background none border: 15px solid mainRgb(0.1) transform(translate(-50%, -50%)) @media screen and (max-width: 1920px) { width calc(86/1920*100vw) height: @width border-width calc(15/1920*100vw) } } .desc { opacity 1 } */ } @media screen and (max-width: 1920px) { .m_about_history_row .swiper_gallery .swiper-slide.swiper-slide-active + .swiper-slide + .swiper-slide .item { margin-top: calc(284 / 1920 * 100vw); } } .m_about_history_row .swiper_gallery .swiper-slide.swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide .item { margin-top: 266px; } @media screen and (max-width: 1920px) { .m_about_history_row .swiper_gallery .swiper-slide.swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide .item { margin-top: calc(266 / 1920 * 100vw); } } .m_about_history_row .swiper_gallery .swiper-slide.swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide .item { margin-top: 371px; } @media screen and (max-width: 1920px) { .m_about_history_row .swiper_gallery .swiper-slide.swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide .item { margin-top: calc(371 / 1920 * 100vw); } } .m_about_history_row .swiper_gallery .swiper-slide.swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide .item { margin-top: 291px; } @media screen and (max-width: 1920px) { .m_about_history_row .swiper_gallery .swiper-slide.swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide .item { margin-top: calc(291 / 1920 * 100vw); } } .m_about_history_row .swiper_gallery .swiper-slide.swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide .item { margin-top: 171px; } @media screen and (max-width: 1920px) { .m_about_history_row .swiper_gallery .swiper-slide.swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide .item { margin-top: calc(171 / 1920 * 100vw); } } .m_about_history_row .swiper_gallery .swiper-slide.swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide .item { margin-top: 148px; } @media screen and (max-width: 1920px) { .m_about_history_row .swiper_gallery .swiper-slide.swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide .item { margin-top: calc(148 / 1920 * 100vw); } } .m_about_history_row .swiper_gallery .swiper-slide.swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide .item { margin-top: 226px; } @media screen and (max-width: 1920px) { .m_about_history_row .swiper_gallery .swiper-slide.swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide .item { margin-top: calc(226 / 1920 * 100vw); } } .m_about_history_row .swiper_gallery .item { position: relative; display: inline-block; margin-top: 189px; -webkit-transition: 1s; -ms-transition: 1s; transition: 1s; } @media screen and (max-width: 1920px) { .m_about_history_row .swiper_gallery .item { margin-top: calc(189 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_about_history_row .swiper_gallery .item { display: none; } } .m_about_history_row .swiper_gallery .item .year { color: #00549e; font-size: 24px; font-style: italic; position: absolute; left: 50%; bottom: 100%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: 1s; -ms-transition: 1s; transition: 1s; } @media screen and (max-width: 1920px) { .m_about_history_row .swiper_gallery .item .year { font-size: clamp(14px, calc(24 / 1920 * 100vw), 24px); } } @media screen and (max-width: 750px) { .m_about_history_row .swiper_gallery .item .year { font-size: 0.28rem; } } .m_about_history_row .swiper_gallery .item .desc { opacity: 0; font-size: 26px; white-space: nowrap; text-align: center; position: absolute; left: 0%; top: calc(50% + 1em); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: 1s; -ms-transition: 1s; transition: 1s; } @media screen and (max-width: 1920px) { .m_about_history_row .swiper_gallery .item .desc { font-size: clamp(14px, calc(26 / 1920 * 100vw), 26px); } } @media screen and (max-width: 750px) { .m_about_history_row .swiper_gallery .item .desc { font-size: 0.24rem; } } .m_about_history_row .swiper_gallery .item .picture { width: 0; height: 0; background-color: #00549e; border: 5px solid #00549e; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; overflow: hidden; -webkit-transition: 1s; -ms-transition: 1s; transition: 1s; } .m_about_history_row .swiper_gallery .item .picture img { display: block; width: 100%; height: 100%; object-fit: cover; } .m_about_history_row .swiper_gallery .pop_intro { display: none; } @media screen and (max-width: 750px) { .m_about_history_row .swiper_gallery .pop_intro { display: block; padding: 0.3rem; background: url("../images/bg_h1.jpg") no-repeat center; border: 1px solid #fff; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover; -webkit-border-radius: 0.1rem; -ms-border-radius: 0.1rem; border-radius: 0.1rem; margin-bottom: 0.4rem; } } .m_about_history_row .swiper_gallery .pop_intro .picture { height: 0; padding-top: calc(300 / 480 * 100%); background-color: #00549e; -webkit-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; overflow: hidden; position: relative; margin-bottom: 35px; } @media screen and (max-width: 1920px) { .m_about_history_row .swiper_gallery .pop_intro .picture { margin-bottom: calc(35 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_about_history_row .swiper_gallery .pop_intro .picture { margin-bottom: 0.3rem; } } .m_about_history_row .swiper_gallery .pop_intro .picture img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; -webkit-transition: 0.35s ease-in-out; -ms-transition: 0.35s ease-in-out; transition: 0.35s ease-in-out; } .m_about_history_row .swiper_gallery .pop_intro .picture:hover img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .m_about_history_row .swiper_gallery .pop_intro .year { color: #00549e; font-size: 36px; font-style: italic; line-height: 1; margin-bottom: 20px; } @media screen and (max-width: 1920px) { .m_about_history_row .swiper_gallery .pop_intro .year { font-size: clamp(16px, calc(36 / 1920 * 100vw), 36px); margin-bottom: calc(20 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_about_history_row .swiper_gallery .pop_intro .year { font-size: 0.36rem; margin-bottom: 0.2rem; } } .m_about_history_row .swiper_gallery .pop_intro .desc { font-size: 22px; } @media screen and (max-width: 1920px) { .m_about_history_row .swiper_gallery .pop_intro .desc { font-size: clamp(14px, calc(22 / 1920 * 100vw), 22px); } } @media screen and (max-width: 750px) { .m_about_history_row .swiper_gallery .pop_intro .desc { font-size: 0.24rem; } } .m_about_history_row .swiper_gallery .pop_intro .desc dd { position: relative; margin-bottom: 10px; } .m_about_history_row .swiper_gallery .pop_intro .desc dd::before { content: ''; width: 4px; height: 4px; background-color: #333; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: 0.5em; } .m_about_history_row .show_detail_box { position: absolute; z-index: 2; right: clamp(20px, calc(150 / 1920 * 100vw), 150px); top: 0; bottom: 0; width: 480px; padding: 20px; background: url("../images/bg_h1.jpg") no-repeat center; border: 1px solid #fff; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover; -webkit-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } @media screen and (max-width: 1920px) { .m_about_history_row .show_detail_box { width: calc(480 / 1920 * 100vw); padding: calc(20 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_about_history_row .show_detail_box { display: none; } } .m_about_history_row .show_detail_box .picture { height: 0; padding-top: calc(300 / 480 * 100%); background-color: #00549e; -webkit-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; overflow: hidden; position: relative; margin-bottom: 35px; } @media screen and (max-width: 1920px) { .m_about_history_row .show_detail_box .picture { margin-bottom: calc(35 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_about_history_row .show_detail_box .picture { margin-bottom: 0.2rem; } } .m_about_history_row .show_detail_box .picture img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; -webkit-transition: 0.35s ease-in-out; -ms-transition: 0.35s ease-in-out; transition: 0.35s ease-in-out; } .m_about_history_row .show_detail_box .picture:hover img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .m_about_history_row .show_detail_box .year { color: #00549e; font-size: 36px; font-style: italic; line-height: 1; margin-bottom: 20px; } @media screen and (max-width: 1920px) { .m_about_history_row .show_detail_box .year { font-size: clamp(16px, calc(36 / 1920 * 100vw), 36px); margin-bottom: calc(20 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_about_history_row .show_detail_box .year { font-size: 0.36rem; margin-bottom: 0.2rem; } } .m_about_history_row .show_detail_box .desc { font-size: 22px; } @media screen and (max-width: 1920px) { .m_about_history_row .show_detail_box .desc { font-size: clamp(14px, calc(22 / 1920 * 100vw), 22px); } } @media screen and (max-width: 750px) { .m_about_history_row .show_detail_box .desc { font-size: 0.24rem; } } .m_about_history_row .show_detail_box .desc dd { position: relative; margin-bottom: 10px; } .m_about_history_row .show_detail_box .desc dd::before { content: ''; width: 4px; height: 4px; background-color: #333; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: 0.5em; } .g_list4_v2 .item { padding-bottom: 70px; border-bottom: 1px solid #d5dee8; margin-bottom: 50px; } @media screen and (max-width: 1920px) { .g_list4_v2 .item { padding-bottom: calc(70 / 1920 * 100vw); margin-bottom: calc(50 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .g_list4_v2 .item { padding-bottom: 0.4rem; margin-bottom: 0.4rem; } } .g_list4_v2 .item_con { color: #666; display: -ms-flexbox; display: -webkit-box; display: flex; } @media screen and (max-width: 750px) { .g_list4_v2 .item_con { -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } .g_list4_v2 .item_con:hover .date { color: #00549e; } .g_list4_v2 .item_con:hover .picture img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .g_list4_v2 .item_con:hover .title { color: #00549e; } .g_list4_v2 .date { font-family: Arial, Helvetica, sans-serif; width: 140px; -webkit-transition: 0.35s linear; -ms-transition: 0.35s linear; transition: 0.35s linear; } @media screen and (max-width: 1920px) { .g_list4_v2 .date { width: clamp(80px, calc(140 / 1920 * 100vw), 140px); } } @media screen and (max-width: 750px) { .g_list4_v2 .date { width: 0; display: none; } } .g_list4_v2 .date .day { font-size: 88px; line-height: 1; } @media screen and (max-width: 1920px) { .g_list4_v2 .date .day { font-size: clamp(40px, calc(88 / 1920 * 100vw), 88px); } } @media screen and (max-width: 750px) { .g_list4_v2 .date .day { font-size: 0.6rem; } } .g_list4_v2 .right { width: 360px; margin-left: 100px; } @media screen and (max-width: 1920px) { .g_list4_v2 .right { width: clamp(200px, calc(360 / 1920 * 100vw), 360px); margin-left: calc(100 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .g_list4_v2 .right { width: auto; margin-left: 0; } } .g_list4_v2 .picture { height: 0; padding-top: calc(190 / 360 * 100%); background-color: #00549e; -webkit-box-shadow: -10px 10px 30px rgba(0,0,0,0.2); -ms-box-shadow: -10px 10px 30px rgba(0,0,0,0.2); box-shadow: -10px 10px 30px rgba(0,0,0,0.2); overflow: hidden; position: relative; -webkit-transition: 0.35s linear; -ms-transition: 0.35s linear; transition: 0.35s linear; } @media screen and (max-width: 750px) { .g_list4_v2 .picture { margin-bottom: 0.2rem; } } .g_list4_v2 .picture img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; -webkit-transition: 0.35s linear; -ms-transition: 0.35s linear; transition: 0.35s linear; } .g_list4_v2 .text { flex: 1; } .g_list4_v2 .text .title { color: #333; font-size: 24px; font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; text-overflow: ellipsis; overflow: hidden; -webkit-transition: 0.35s; -ms-transition: 0.35s; transition: 0.35s; margin-bottom: 15px; } @media screen and (max-width: 1920px) { .g_list4_v2 .text .title { font-size: clamp(16px, calc(24 / 1920 * 100vw), 24px); margin-bottom: calc(15 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .g_list4_v2 .text .title { font-size: 0.32rem; margin-bottom: 0.1rem; } } .g_list4_v2 .text .desc { font-size: 18px; line-height: calc(30 / 18); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; } @media screen and (max-width: 1440px) { .g_list4_v2 .text .desc { font-size: 16px; } } @media screen and (max-width: 1280px) { .g_list4_v2 .text .desc { font-size: 14px; } } @media screen and (max-width: 750px) { .g_list4_v2 .text .desc { font-size: 1em; } } .m_honor_list { display: -ms-flexbox; display: -webkit-box; display: flex; flex-wrap: wrap; } @media screen and (max-width: 750px) { .m_honor_list { display: block; } } .m_honor_list .item { padding: 0 20px; width: calc((100% - 180px) / 4); background-color: #fff; border: 1px solid #d5dee8; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin-right: 60px; margin-bottom: 60px; } @media screen and (max-width: 1920px) { .m_honor_list .item { width: calc((100% - calc(180 / 1920 * 100vw)) / 4); padding: 0 calc(20 / 1920 * 100vw); margin-right: calc(60 / 1920 * 100vw); margin-bottom: calc(60 / 1920 * 100vw); } } @media screen and (max-width: 990px) { .m_honor_list .item { width: calc((100% - calc(60 / 1920 * 100vw)) / 2); } } @media screen and (max-width: 750px) { .m_honor_list .item { width: auto; padding: 0 0.2rem; margin-right: 0; margin-bottom: 0.4rem; } } @media screen and (max-width: 990px) { .m_honor_list .item:nth-child(2n) { margin-right: 0; } } .m_honor_list .item:nth-child(4n) { margin-right: 0; } .m_honor_list .item:hover .hd { color: #00549e; } .m_honor_list .item:hover .picture img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .m_honor_list .hd { font-size: calc(18 / 16 * 1em); font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: 600; -webkit-transition: 0.55s; -ms-transition: 0.55s; transition: 0.55s; padding: 20px 0; border-bottom: 1px solid #d5dee8; } @media screen and (max-width: 1920px) { .m_honor_list .hd { padding: calc(20 / 1920 * 100vw) 0; } } @media screen and (max-width: 750px) { .m_honor_list .hd { padding: 0.2rem 0; } } .m_honor_list .bd { padding: 30px 0; display: -ms-flexbox; display: -webkit-box; display: flex; } @media screen and (max-width: 1920px) { .m_honor_list .bd { padding: calc(30 / 1920 * 100vw) 0; } } @media screen and (max-width: 750px) { .m_honor_list .bd { padding: 0.3rem 0; } } .m_honor_list .bd .picture { flex: none; width: calc(175 / 310 * 100%); height: 245px; margin-left: 10px; display: -ms-flexbox; display: -webkit-box; display: flex; align-items: center; justify-content: center; overflow: hidden; } @media screen and (max-width: 1920px) { .m_honor_list .bd .picture { height: calc(245 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_honor_list .bd .picture { height: 2.45rem; } } .m_honor_list .bd .picture img { display: block; max-width: 100%; max-height: 100%; -webkit-transition: 0.55s; -ms-transition: 0.55s; transition: 0.55s; } .m_honor_list .bd .text { flex: 1; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; justify-content: space-between; } .m_honor_list .bd .text .desc { color: #666; } .m_honor_list .bd .text .date { font-size: calc(18 / 16 * 1em); color: #00549e; } .m_OEM_plat { overflow: hidden; } .m_OEM_plat .gallery { color: #66676d; font-size: 24px; text-align: center; margin-bottom: 100px; } @media screen and (max-width: 1920px) { .m_OEM_plat .gallery { font-size: clamp(16px, calc(24 / 1920 * 100vw), 24px); margin-bottom: calc(100 / 1920 * 100vw); } } @media screen and (max-width: 1440px) { .m_OEM_plat .gallery { margin-bottom: 0; } } @media screen and (max-width: 750px) { .m_OEM_plat .gallery { font-size: 1em; display: none; } } .m_OEM_plat .gallery .title { color: #333; font-size: 40px; } @media screen and (max-width: 1920px) { .m_OEM_plat .gallery .title { font-size: clamp(20px, calc(40 / 1920 * 100vw), 40px); } } @media screen and (max-width: 750px) { .m_OEM_plat .gallery .title { font-size: 0.4rem; } } .m_OEM_plat .gallery .desc { height: 3em; } @media screen and (max-width: 750px) { .m_OEM_plat .gallery .desc { height: auto; } } @media screen and (max-width: 750px) { .m_OEM_plat .gallery .swiper { display: block; } .m_OEM_plat .gallery .swiper .swiper-wrapper { display: block; } .m_OEM_plat .gallery .swiper .swiper-wrapper .swiper-slide { width: 100% !important; } .m_OEM_plat .gallery .swiper .swiper-wrapper .swiper-slide .text { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); margin-bottom: 0.4rem; } } .m_OEM_plat .gallery .swiper .swiper-slide .text { opacity: 0; visibility: hidden; -webkit-transform: translateY(10%); -ms-transform: translateY(10%); transform: translateY(10%); -webkit-transition: 1s; -ms-transition: 1s; transition: 1s; } .m_OEM_plat .gallery .swiper .swiper-slide.swiper-slide-active .text { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .m_OEM_plat .thumbs { height: 530px; position: relative; /* .list2 { width: 1060px height: @width radius(50%) position: relative z-index: 5 margin 0 auto margin-bottom -530px .item { color: #66676d text-align: center width: w = 240px height: h = 530px // background-color $white // background-color $mainColor // shadow(0 0 0 2px $mainColor inset) // border 2px solid $mainColor // radius(530px 0 0 0) transform-origin: 50% 100% clip-path polygon(0% 0%, 100% 0%, 50% 100%) // clip-path: padding-box path('M238.419,13.966 L118.207,534.14 L0.413,14.25 C0.413,14.25 57.767,0.313 116.823,0.348 C176.316,0.384 238.419,13.966 238.419,13.966 Z') // margin 0 auto position: absolute left: calc(50% - 120px) top: 0 trans(.55s) .item_con { width: 100% height: 100% background-color $mainColor clip-path circle(129% at 50% 100%) } .bg { width: calc(100% - 4px) height: calc(100% - 4px) background-color $white clip-path circle(120% at 50% 100%) margin 2px } } } */ } @media screen and (max-width: 1440px) { .m_OEM_plat .thumbs { -webkit-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); transform-origin: 50% 100%; margin-top: calc(-100 / 1920 * 100vw); } } @media screen and (max-width: 1024px) { .m_OEM_plat .thumbs { -webkit-transform: scale(0.55); -ms-transform: scale(0.55); transform: scale(0.55); margin-top: calc(-400 / 1920 * 100vw); } } @media screen and (max-width: 990px) { .m_OEM_plat .thumbs { -webkit-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); margin-top: calc(-450 / 1920 * 100vw); } } @media screen and (max-width: 750px) { .m_OEM_plat .thumbs { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); margin-top: 0; height: auto; } } @media screen and (max-width: 750px) { .m_OEM_plat .thumbs .circle { display: none; } } .m_OEM_plat .thumbs .circle .s2 { width: 110px; height: 110px; background-color: #b5b6b6; border: 12px solid #efefef; -webkit-box-shadow: 0 0 0 32px #00549e; -ms-box-shadow: 0 0 0 32px #00549e; box-shadow: 0 0 0 32px #00549e; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; position: absolute; z-index: 3; left: 50%; top: 100%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media screen and (max-width: 1024px) { .m_OEM_plat .thumbs .circle .s2 { -webkit-transform: scale(0.9) translate(-50%, -50%); -ms-transform: scale(0.9) translate(-50%, -50%); transform: scale(0.9) translate(-50%, -50%); transform-origin: 0% 0%; } } @media screen and (max-width: 990px) { .m_OEM_plat .thumbs .circle .s2 { -webkit-transform: scale(0.75) translate(-50%, -50%); -ms-transform: scale(0.75) translate(-50%, -50%); transform: scale(0.75) translate(-50%, -50%); } } @media screen and (max-width: 750px) { .m_OEM_plat .thumbs .circle .s2 { -webkit-transform: scale(0.65) translate(-50%, -50%); -ms-transform: scale(0.65) translate(-50%, -50%); transform: scale(0.65) translate(-50%, -50%); } } .m_OEM_plat .thumbs .circle .s1 { width: 370px; height: 370px; background-color: #efefef; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; position: absolute; z-index: 2; left: 50%; top: 100%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media screen and (max-width: 1024px) { .m_OEM_plat .thumbs .circle .s1 { -webkit-transform: scale(0.9) translate(-50%, -50%); -ms-transform: scale(0.9) translate(-50%, -50%); transform: scale(0.9) translate(-50%, -50%); transform-origin: 0% 0%; } } @media screen and (max-width: 990px) { .m_OEM_plat .thumbs .circle .s1 { -webkit-transform: scale(0.68) translate(-50%, -50%); -ms-transform: scale(0.68) translate(-50%, -50%); transform: scale(0.68) translate(-50%, -50%); } } @media screen and (max-width: 750px) { .m_OEM_plat .thumbs .circle .s1 { -webkit-transform: scale(0.65) translate(-50%, -50%); -ms-transform: scale(0.65) translate(-50%, -50%); transform: scale(0.65) translate(-50%, -50%); } } .m_OEM_plat .thumbs .circle .s1::before { content: ''; width: 0; height: 0; border: 10px solid; border-color: transparent transparent #efefef transparent; position: absolute; left: 0%; top: 50%; } .m_OEM_plat .thumbs .list { width: 1060px; height: 1060px; border: 2px solid #00549e; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; position: relative; z-index: 1; margin: 0 auto; margin-bottom: -530px; } @media screen and (max-width: 1024px) { .m_OEM_plat .thumbs .list { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); transform-origin: 0% 50%; } } @media screen and (max-width: 990px) { .m_OEM_plat .thumbs .list { -webkit-transform: scale(0.68); -ms-transform: scale(0.68); transform: scale(0.68); } } @media screen and (max-width: 750px) { .m_OEM_plat .thumbs .list { -webkit-transform: none; -ms-transform: none; transform: none; width: auto; height: auto; border: 0; -webkit-border-radius: 0; -ms-border-radius: 0; border-radius: 0; margin: 0; } } .m_OEM_plat .thumbs .list .item { color: #66676d; text-align: center; width: 240px; height: 530px; background-color: #fff; transform-origin: 50% 100%; clip-path: url("#pathSvg"); position: absolute; left: calc(50% - 120px); top: 0; -webkit-transition: 0.55s; -ms-transition: 0.55s; transition: 0.55s; } @media screen and (max-width: 750px) { .m_OEM_plat .thumbs .list .item { clip-path: none; position: static; width: auto; height: auto; background: none; -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; text-align: center; margin-bottom: 0.7rem; } } .m_OEM_plat .thumbs .list .item:nth-child(2n) { background-color: #f9f9f9; } @media screen and (max-width: 750px) { .m_OEM_plat .thumbs .list .item:nth-child(2n) { background: none; } } .m_OEM_plat .thumbs .list .item::after { content: ''; position: absolute; left: 50%; bottom: 180px; width: 0; height: 0; border-width: 18px 12px 18px 12px; border-style: solid; border-color: transparent transparent #efefef transparent; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; visibility: hidden; -webkit-transition: 0.55s opacity; -ms-transition: 0.55s opacity; transition: 0.55s opacity; } @media screen and (max-width: 750px) { .m_OEM_plat .thumbs .list .item::after { display: none; } } .m_OEM_plat .thumbs .list .item.active .num, .m_OEM_plat .thumbs .list .item.active .title { color: #00549e; } @media screen and (max-width: 750px) { .m_OEM_plat .thumbs .list .item.active .num, .m_OEM_plat .thumbs .list .item.active .title { color: transparent; } } .m_OEM_plat .thumbs .list .item.active .num { bottom: calc(220px * 530 / 600); } .m_OEM_plat .thumbs .list .item.active::after { opacity: 1; visibility: visible; bottom: calc(180px * 530 / 600); } .m_OEM_plat .thumbs .list .item.s1 { -webkit-transform: rotate(-77.14285714285714deg); -ms-transform: rotate(-77.14285714285714deg); transform: rotate(-77.14285714285714deg); } .m_OEM_plat .thumbs .list .item.s1 .bg { transform-origin: 55% 45%; -webkit-transform: translateX(-50%) rotate(77.14285714285714deg); -ms-transform: translateX(-50%) rotate(77.14285714285714deg); transform: translateX(-50%) rotate(77.14285714285714deg); } .m_OEM_plat .thumbs .list .item.s1 .num { -webkit-transform: rotate(77.14285714285714deg); -ms-transform: rotate(77.14285714285714deg); transform: rotate(77.14285714285714deg); } .m_OEM_plat .thumbs .list .item.s1.active { -webkit-transform: rotate(-77.14285714285714deg) scale(1.132075471698113); -ms-transform: rotate(-77.14285714285714deg) scale(1.132075471698113); transform: rotate(-77.14285714285714deg) scale(1.132075471698113); } .m_OEM_plat .thumbs .list .item.s1.active .num { -webkit-transform: rotate(77.14285714285714deg) scale(0.883333333333333); -ms-transform: rotate(77.14285714285714deg) scale(0.883333333333333); transform: rotate(77.14285714285714deg) scale(0.883333333333333); } .m_OEM_plat .thumbs .list .item.s2 { -webkit-transform: rotate(-51.42857142857143deg); -ms-transform: rotate(-51.42857142857143deg); transform: rotate(-51.42857142857143deg); } .m_OEM_plat .thumbs .list .item.s2 .bg { transform-origin: 65% 45%; -webkit-transform: translateX(-50%) rotate(51.42857142857143deg); -ms-transform: translateX(-50%) rotate(51.42857142857143deg); transform: translateX(-50%) rotate(51.42857142857143deg); } .m_OEM_plat .thumbs .list .item.s2 .num { -webkit-transform: rotate(51.42857142857143deg); -ms-transform: rotate(51.42857142857143deg); transform: rotate(51.42857142857143deg); } .m_OEM_plat .thumbs .list .item.s2.active { -webkit-transform: rotate(-51.42857142857143deg) scale(1.132075471698113); -ms-transform: rotate(-51.42857142857143deg) scale(1.132075471698113); transform: rotate(-51.42857142857143deg) scale(1.132075471698113); } .m_OEM_plat .thumbs .list .item.s2.active .num { -webkit-transform: rotate(51.42857142857143deg) scale(0.883333333333333); -ms-transform: rotate(51.42857142857143deg) scale(0.883333333333333); transform: rotate(51.42857142857143deg) scale(0.883333333333333); } .m_OEM_plat .thumbs .list .item.s3 { -webkit-transform: rotate(-25.714285714285715deg); -ms-transform: rotate(-25.714285714285715deg); transform: rotate(-25.714285714285715deg); } .m_OEM_plat .thumbs .list .item.s3 .bg { transform-origin: 75% 47%; -webkit-transform: translateX(-50%) rotate(25.714285714285715deg); -ms-transform: translateX(-50%) rotate(25.714285714285715deg); transform: translateX(-50%) rotate(25.714285714285715deg); } .m_OEM_plat .thumbs .list .item.s3 .num { -webkit-transform: rotate(25.714285714285715deg); -ms-transform: rotate(25.714285714285715deg); transform: rotate(25.714285714285715deg); } .m_OEM_plat .thumbs .list .item.s3.active { -webkit-transform: rotate(-25.714285714285715deg) scale(1.132075471698113); -ms-transform: rotate(-25.714285714285715deg) scale(1.132075471698113); transform: rotate(-25.714285714285715deg) scale(1.132075471698113); } .m_OEM_plat .thumbs .list .item.s3.active .num { -webkit-transform: rotate(25.714285714285715deg) scale(0.883333333333333); -ms-transform: rotate(25.714285714285715deg) scale(0.883333333333333); transform: rotate(25.714285714285715deg) scale(0.883333333333333); } .m_OEM_plat .thumbs .list .item.s4.active { -webkit-transform: scale(1.132075471698113); -ms-transform: scale(1.132075471698113); transform: scale(1.132075471698113); } .m_OEM_plat .thumbs .list .item.s4.active .num { -webkit-transform: scale(0.883333333333333); -ms-transform: scale(0.883333333333333); transform: scale(0.883333333333333); } .m_OEM_plat .thumbs .list .item.s5 { -webkit-transform: rotate(25.714285714285715deg); -ms-transform: rotate(25.714285714285715deg); transform: rotate(25.714285714285715deg); } .m_OEM_plat .thumbs .list .item.s5 .bg { transform-origin: 30% 45%; -webkit-transform: translateX(-50%) rotate(-25.714285714285715deg); -ms-transform: translateX(-50%) rotate(-25.714285714285715deg); transform: translateX(-50%) rotate(-25.714285714285715deg); } .m_OEM_plat .thumbs .list .item.s5 .num { -webkit-transform: rotate(-25.714285714285715deg); -ms-transform: rotate(-25.714285714285715deg); transform: rotate(-25.714285714285715deg); } .m_OEM_plat .thumbs .list .item.s5.active { -webkit-transform: rotate(25.714285714285715deg) scale(1.132075471698113); -ms-transform: rotate(25.714285714285715deg) scale(1.132075471698113); transform: rotate(25.714285714285715deg) scale(1.132075471698113); } .m_OEM_plat .thumbs .list .item.s5.active .num { -webkit-transform: rotate(-25.714285714285715deg) scale(0.883333333333333); -ms-transform: rotate(-25.714285714285715deg) scale(0.883333333333333); transform: rotate(-25.714285714285715deg) scale(0.883333333333333); } .m_OEM_plat .thumbs .list .item.s6 { -webkit-transform: rotate(51.42857142857143deg); -ms-transform: rotate(51.42857142857143deg); transform: rotate(51.42857142857143deg); } .m_OEM_plat .thumbs .list .item.s6 .bg { transform-origin: 40% 45%; -webkit-transform: translateX(-50%) rotate(-51.42857142857143deg); -ms-transform: translateX(-50%) rotate(-51.42857142857143deg); transform: translateX(-50%) rotate(-51.42857142857143deg); } .m_OEM_plat .thumbs .list .item.s6 .num { -webkit-transform: rotate(-51.42857142857143deg); -ms-transform: rotate(-51.42857142857143deg); transform: rotate(-51.42857142857143deg); } .m_OEM_plat .thumbs .list .item.s6.active { -webkit-transform: rotate(51.42857142857143deg) scale(1.132075471698113); -ms-transform: rotate(51.42857142857143deg) scale(1.132075471698113); transform: rotate(51.42857142857143deg) scale(1.132075471698113); } .m_OEM_plat .thumbs .list .item.s6.active .num { -webkit-transform: rotate(-51.42857142857143deg) scale(0.883333333333333); -ms-transform: rotate(-51.42857142857143deg) scale(0.883333333333333); transform: rotate(-51.42857142857143deg) scale(0.883333333333333); } .m_OEM_plat .thumbs .list .item.s7 { -webkit-transform: rotate(77.14285714285714deg); -ms-transform: rotate(77.14285714285714deg); transform: rotate(77.14285714285714deg); } .m_OEM_plat .thumbs .list .item.s7 .bg { left: 0%; top: -7%; transform-origin: 50% 47%; -webkit-transform: translateX(-50%) rotate(-77.14285714285714deg); -ms-transform: translateX(-50%) rotate(-77.14285714285714deg); transform: translateX(-50%) rotate(-77.14285714285714deg); } .m_OEM_plat .thumbs .list .item.s7 .num { -webkit-transform: rotate(-77.14285714285714deg); -ms-transform: rotate(-77.14285714285714deg); transform: rotate(-77.14285714285714deg); } .m_OEM_plat .thumbs .list .item.s7.active { -webkit-transform: rotate(77.14285714285714deg) scale(1.132075471698113); -ms-transform: rotate(77.14285714285714deg) scale(1.132075471698113); transform: rotate(77.14285714285714deg) scale(1.132075471698113); } .m_OEM_plat .thumbs .list .item.s7.active .num { -webkit-transform: rotate(-77.14285714285714deg) scale(0.883333333333333); -ms-transform: rotate(-77.14285714285714deg) scale(0.883333333333333); transform: rotate(-77.14285714285714deg) scale(0.883333333333333); } .m_OEM_plat .thumbs .list .item .bg { width: calc(530px - 120px); height: calc(530px - 120px); background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover; transform-origin: 50% 47%; -webkit-transition: 0.55s; -ms-transition: 0.55s; transition: 0.55s; position: absolute; left: 50%; top: 0%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } @media screen and (max-width: 750px) { .m_OEM_plat .thumbs .list .item .bg { width: auto; height: 2.9rem; position: static; -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; background-color: #fff; border: 1px solid #00549e; margin-bottom: 0.2rem; } } .m_OEM_plat .thumbs .list .item .bg img { display: none; } @media screen and (max-width: 750px) { .m_OEM_plat .thumbs .list .item .bg img { display: block; width: 100%; height: 100%; } } .m_OEM_plat .thumbs .list .item .num { color: #a8a8a8; font-size: 20px; position: absolute; left: 0; right: 0; bottom: 220px; -webkit-transition: 0.55s; -ms-transition: 0.55s; transition: 0.55s; } @media screen and (max-width: 750px) { .m_OEM_plat .thumbs .list .item .num { background: linear-gradient(to bottom, rgba(38,97,163,0.4), rgba(38,97,163,0)); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 0.94rem; font-weight: bold; line-height: 0.75; position: static; display: block; -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; } } .m_OEM_plat .thumbs .list .item .title { position: absolute; left: 0; right: 0; top: 20px; } @media screen and (max-width: 750px) { .m_OEM_plat .thumbs .list .item .title { color: #00549e !important; font-size: 0.3rem; position: static; margin-top: -0.55rem; } } .m_OEM_plat .thumbs .list .item .desc { display: none; } @media screen and (max-width: 750px) { .m_OEM_plat .thumbs .list .item .desc { display: block; color: #333; font-size: 0.24rem; margin-top: 0.1rem; } } .m_OEM_plat .thumbs .list .item.white .num, .m_OEM_plat .thumbs .list .item.white .title { color: #fff; } @media screen and (max-width: 750px) { .m_OEM_plat .thumbs .list .item.white .num, .m_OEM_plat .thumbs .list .item.white .title { color: transparent; } } .m_OEM_plat_slogan { text-align: right; position: absolute; z-index: 2; right: 60px; top: 0; } @media screen and (max-width: 990px) { .m_OEM_plat_slogan { position: static; text-align: center; margin-bottom: 40px; } } @media screen and (max-width: 750px) { .m_OEM_plat_slogan { position: static; padding: 0 0.4rem 0.4rem; margin-bottom: 0; } } .m_OEM_plat_slogan .title { color: #00549e; font-size: 30px; } @media screen and (max-width: 1920px) { .m_OEM_plat_slogan .title { /* font-size: clamp(16px, calc(30 / 1920 * 100vw), 30px); */ font-size: clamp(16px, calc(24 / 1920 * 100vw), 24px); } } @media screen and (max-width: 750px) { .m_OEM_plat_slogan .title { font-size: 0.36rem; } } .m_OEM_plat_slogan .title .line { display: block; height: 30px; border-right: 2px solid #00549e; margin: 20px 0; overflow: hidden; } @media screen and (max-width: 1920px) { .m_OEM_plat_slogan .title .line { height: clamp(10px, calc(30 / 1920 * 100vw), 30px); margin: calc(20 / 1920 * 100vw) 0; } } @media screen and (max-width: 990px) { .m_OEM_plat_slogan .title .line { width: 0; margin: calc(20 / 1920 * 100vw) auto; } } @media screen and (max-width: 750px) { .m_OEM_plat_slogan .title .line { height: 0.3rem; margin: 0.2rem auto; } } .m_OEM_plat_slogan .desc { font-size: 20px; line-height: 1.75; } @media screen and (max-width: 1920px) { .m_OEM_plat_slogan .desc { font-size: clamp(14px, calc(20 / 1920 * 100vw), 20px); } } @media screen and (max-width: 750px) { .m_OEM_plat_slogan .desc { font-size: 0.24rem; line-height: 1.5; } }