.index-swiper { width: 100%; height: calc(100vh - 80px); overflow: hidden; margin-top: 80px; margin-bottom: 0; } .index-swiper .swiper-slide { width: 100%; height: 100%; } .index-swiper .banner-swiper { position: relative; width: 100%; height: 100%; color: #fff; } .index-swiper .banner-swiper .swiper-slide { padding: 0 10%; } .index-swiper .banner-swiper .text-content { margin-top: 25vh; font-size: calc(18rem / 16); } .index-swiper .banner-swiper .text-content .b-title { margin: 25px 0; font-size: calc(48rem / 16); font-weight: bold; } .index-swiper .banner-swiper .more-btn { margin-top: 16vh; } .index-swiper .banner-swiper .more-btn a { transition: all .5s; } .index-swiper .banner-swiper .more-btn a:hover { background-color: #fff; color: #0a50a0; } .index-swiper .banner-swiper .more-btn a:hover::before { background-color: #0a50a0; } /* .index-swiper .banner-swiper .more-btn a { display: inline-block; padding: 20px 0; padding-left: 30px; padding-right: 60px; border: 1px solid #fff; font-size: 14px; color: #fff; } .index-swiper .banner-swiper .more-btn a::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 10px; background-color: #fff; } */ .index-swiper .banner-swiper .tips-scroll-content { position: absolute; bottom: 10vh; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; } .index-swiper .banner-swiper .tips-scroll-content .scroll-pic-content { position: relative; margin-right: 20px; } .index-swiper .banner-swiper .tips-scroll-content .scroll-dot-pic { position: absolute; top: 0; } .index-swiper .banner-swiper .banner-pagination .swiper-pagination-bullet { width: 5%; height: 5px; border-radius: 10px; background: #c1c1c1; opacity: .4; } .index-swiper .banner-swiper .banner-pagination { bottom: 4vh; } .index-swiper .banner-swiper .banner-pagination .swiper-pagination-bullet-active { position: relative; background: rgba(193, 193, 193, .5); opacity: 1; } .index-swiper .banner-swiper .banner-pagination .swiper-pagination-bullet-active::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #fff; border-radius: 10px; animation: paginationWidthAn 5s forwards linear; } .index-swiper .banner-swiper .banner-pagination.first-show .swiper-pagination-bullet-active::after { animation: paginationWidthAn 4s forwards linear; } .index-second-slide { position: relative; background: url('../images/bg_index_02.jpg') no-repeat center/cover; } .index-second-slide .line-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* background: url('../images/bg_index_line.png') no-repeat center/cover; */ } .index-second-slide .line-container svg { position: absolute; right: 0; /* height: 100%; */ width: 100%; } .index-second-slide .product-list { position: relative; width: 100%; height: 100%; } .index-second-slide .left-container { position: absolute; top: 0; left: 0; z-index: 3; display: flex; align-items: center; height: 100%; margin-left: 10%; } .index-second-slide .left-container .b-title { font-size: calc(48rem / 16); } .index-second-slide .left-container .more-btn { margin-top: 51px; } .index-second-slide .index-model { animation: modelFloatAn 3s linear infinite alternate-reverse; filter: drop-shadow(calc(1.042vw + 10px) calc(-1.042vw - 10px) calc(1.042vw + 10px) rgb(55, 73, 122)); } .index-second-slide .index-model a { position: relative; display: inline-block; width: 100%; height: 100%; color: #000; } .index-second-slide .index-model img { position: relative; width: 100%; } .index-second-slide .index-model .s-title { position: absolute; bottom: 10%; width: 100%; font-size: calc(24rem / 16); text-align: center; font-weight: bold; } .index-second-slide .index-model .serial-num.active { position: absolute; left: 10px; top: 10px; width: calc(1.563vw + 5px); height: calc(1.563vw + 5px); } .index-second-slide .index-model .serial-num.active::after { width: calc(0.521vw + 5px); } .index-second-slide .index-model-boss { position: absolute; top: 33%; right: 7%; width: 16.667vw; } .index-second-slide .index-model-1 { position: absolute; top: 5vh; left: 30%; width: 11.500vw; animation-delay: 1s; } .index-second-slide .index-model-2 { position: absolute; top: 25vh; right: 35%; width: 11.500vw; animation-delay: -1s; } .index-second-slide .index-model-3 { position: absolute; top: 45vh; left: 35%; /* width: 12.500vw; */ width: 11.500vw; animation-delay: -1.5s; } .index-second-slide .index-model-4 { position: absolute; /* top: 65vh; */ bottom: 2vh; left: 55%; width: 11.500vw; animation-delay: -2.3s; } .index-solution-container { display: flex; flex-direction: column; padding: 5vh 0; } .index-solution-container .b-title { margin-bottom: 3.125vw; font-size: calc(48rem / 16); text-align: center; color: #fff; } .index-solution-container .solution-swiper { /* flex: 1; */ width: 100%; } .index-solution-container .solution-swiper .swiper-slide { position: relative; display: flex; flex-direction: column; justify-content: space-between; /* height: 28.125vw; */ height: 55vh; padding: calc(1.563vw + 10px) calc(1.563vw + 20px); background-color: #d6dfec; border-radius: 30px; text-align: center; transition: all 1s; border-radius: 30px; overflow: hidden; } .index-solution-container .solution-swiper .swiper-slide.ani-slide { width: 40% !important; } /* .ani-slide-force{ transition: 0s !important; } .ani-slide-force *{ transition: 0s !important; } */ .index-solution-container .solution-swiper .swiper-slide.ani-slide .text-content { opacity: 0; } .index-solution-container .solution-swiper .swiper-slide.ani-slide .middle-pic { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 90%; height: 90%; } .index-solution-container .solution-swiper .swiper-slide.ani-slide .show-container { opacity: 1; } .index-solution-container .solution-swiper .swiper-slide .middle-pic img { transition: all 1s; } .index-solution-container .solution-swiper .swiper-slide.ani-slide .middle-pic img { opacity: 0; } .index-solution-container .solution-swiper .swiper-slide.ani-slide .serial-num { color: #fff; border-color: #fff; } .index-solution-container .solution-swiper .swiper-slide.ani-slide .serial-num::after { border-color: #fff; } .index-solution-container .solution-swiper .swiper-slide.ani-slide .middle-pic::before { background-image: url('../images/index_icon_border_left_gray.png'); } .index-solution-container .solution-swiper .swiper-slide.ani-slide .middle-pic::after { background-image: url('../images/index_icon_border_right_gray.png'); } .index-solution-container .solution-swiper .swiper-wrapper { padding-left: 10%; } .index-solution-container .solution-swiper .middle-pic { position: relative; display: flex; justify-content: center; align-items: center; width: 146px; height: 146px; margin: 0 auto; transition: width 1s, height 1s; } .index-solution-container .solution-swiper .middle-pic::after { content: ''; position: absolute; right: 0; top: 0; width: 23px; height: 23px; background: url('../images/index_icon_border_right_blue.png') no-repeat center/cover; } .index-solution-container .solution-swiper .middle-pic::before { content: ''; position: absolute; left: 0; bottom: 0; width: 23px; height: 23px; background: url('../images/index_icon_border_left_green.png') no-repeat center/cover; } .index-solution-container .solution-swiper .middle-pic img { max-width: 116.8px; max-height: 116.8px; } .index-solution-container .solution-swiper .text-content { font-weight: bold; transition: all 1s; } .index-solution-container .solution-swiper .text-content .cn-title { font-size: calc(24rem / 16); line-height: calc(35rem / 16); } .index-solution-container .solution-swiper .text-content .en-title { font-size: calc(12rem / 16); } .index-solution-container .solution-swiper .show-container { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; opacity: 0; transition: all 1s; } .index-solution-container .solution-swiper .show-container .show-text-content { margin-top: 1.563vw; color: #fff; font-weight: bold; } .index-solution-container .solution-swiper .show-container .show-text-content a.wfEditorMode { position: relative; z-index: 3; } .index-solution-container .solution-swiper .show-text-content .cn-title { font-size: calc(34rem / 16); } .index-solution-container .solution-swiper .show-text-content .en-title { margin-top: 10px; font-size: calc(16rem / 16); } .index-solution-container .solution-swiper .show-container .text-description { margin-top: 1.563vw; margin-bottom: 1.563vw; font-size: calc(16rem / 16); color: #fff; } .index-solution-container .solution-swiper .solution-bottom-container { position: absolute; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 10%; /* margin-top: calc(2.083vw + 20px); */ } .index-solution-container .solution-swiper .solution-bottom-container .num { font-size: calc(16rem / 16); color: #fff; } .index-solution-container .solution-swiper .solution-bottom-container .current-num { font-size: calc(72rem / 16); font-weight: bold; } .index-solution-container .solution-bottom-container .solution-pagination { flex: 1; position: relative; display: flex; margin: 0 10px; } .index-solution-container .solution-bottom-container .solution-pagination .swiper-pagination-bullet { flex: 1; height: 2px; border-radius: 0; background: #fff; } .index-solution-container .solution-bottom-container .solution-pagination .swiper-pagination-bullet-active { background: #fff; } .index-solution-container .solution-bottom-container .button-container { display: flex; } .index-solution-container .solution-swiper .index-solution-next, .index-solution-container .solution-swiper .index-solution-prev { position: relative; top: auto; bottom: 0; left: auto; right: auto; margin-top: 0; width: 58px; height: 58px; background-image: url('../images/swiper_arrow_white.png'); background-repeat: no-repeat; background-position: center; background-size: cover; } .index-solution-container .solution-swiper .index-solution-next { margin-left: 10px; transform: rotate(180deg); } .index-introduce { position: relative; } .index-introduce .ball-1 { position: absolute; top: 6vh; right: 20%; animation: ballAn 1.5s infinite ease-out alternate-reverse; } .index-introduce .ball-2 { position: absolute; bottom: 15vh; left: 35%; animation: ballAn 2s infinite ease-in alternate-reverse; } .index-introduce .bg-text { position: absolute; width: 80%; left: 50%; transform: translateX(-50%); margin-top: 3vh; } .index-introduce .bg-text img { width: 100%; } .index-introduce .b-title { margin-top: 5vh; font-size: calc(48rem / 16); text-align: center; } .index-introduce .main-container { position: relative; display: flex; justify-content: space-between; width: 100%; padding: 0 10%; margin-top: calc(2.083vw + 10px); margin-bottom: 0; } .index-introduce .main-container .left-content { display: flex; flex-direction: column; justify-content: center; width: 50%; } .index-introduce .main-container .left-content .text-content { width: 80%; } .index-introduce .main-container .left-content .s-title { margin-bottom: 1.563vw; font-size: calc(34rem / 16); font-weight: bold; } .index-introduce .main-container .left-content .text { margin-bottom: 3.125vw; font-size: calc(16rem / 16); line-height: calc(25rem / 16); text-align: justify; } .index-introduce .main-container .right-content { width: 50%; } .index-introduce .main-container .right-content img { width: 100%; } .index-introduce .bottom-container { position: relative; width: 80%; margin: 0 auto; margin-top: 5vh; } .index-introduce .certificate-swiper { width: 100%; padding: 10px 0; background-color: #fff; border-radius: 20px; overflow: hidden; } .index-introduce .certificate-swiper .swiper-slide { font-size: calc(16rem / 16); text-align: center; } .index-introduce .certificate-swiper .swiper-slide .pic { display: flex; justify-content: center; align-items: center; width: calc(4.167vw + 10px); height: calc(3.646vw + 10px); margin: 0 auto; } .index-introduce .certificate-swiper .swiper-slide .pic img { max-width: 100%; max-height: 100%; } .index-introduce .bottom-container .person-pic { position: absolute; top: 0; right: 0; transform: translateY(-100%); width: 25%; } .index-introduce .bottom-container .person-pic img { width: 100%; } .index-introduce .certificate-swiper .index-certificate-prev, .index-introduce .certificate-swiper .index-certificate-next { left: auto; right: auto; top: 50%; width: 58px; height: 58px; margin-top: 0; background-image: url('../images/swiper_arrow_gray.png'); background-repeat: no-repeat; background-size: cover; } .index-introduce .certificate-swiper .index-certificate-prev { left: 0; transform: translate(-50%, -50%); } .index-introduce .certificate-swiper .index-certificate-next { right: 0; transform: translate(50%, -50%) rotate(180deg); } .index-news { position: relative; display: flex; align-items: center; width: 100%; height: 100%; } .index-news .bg-text { position: absolute; width: 45%; top: 10vh; left: 3%; } .index-news .main-container { position: relative; z-index: 3; display: flex; width: 90%; margin-left: 10%; } /* .index-news .main-container .left-content { width: 30%; } */ .index-news .main-container .left-content .b-title { font-size: calc(48rem / 16); } .index-news .main-container .left-content ul { margin-top: calc(1.563vw + 5px); } .index-news .main-container .left-content ul li { margin-bottom: calc(1.042vw + 5px); } .index-news .main-container .right-content { position: relative; flex: 1; overflow: hidden; margin-left: 7%; } .index-news .main-container .swiper-slide { /* height: calc(22.917vw + 40px); */ height: 45vh; overflow: hidden; border-radius: 40px; transition: all 1s; } .index-news .main-container .swiper-slide a { position: relative; display: inline-flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; padding: 40px 35px; background-color: #dfe5ef; } .index-news .main-container .right-content .show-content { position: absolute; top: 40px; left: 35px; opacity: 0; display: flex; flex-direction: column; justify-content: space-between; height: calc(100% - 80px); color: #fff; transition: all 1s; } .index-news .main-container .show-content .time-content { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 80px; height: 80px; border: 1px solid #fff; border-radius: 20px; } .index-news .main-container .show-content .time-content .day { font-size: calc(24rem / 16); } .index-news .main-container .show-content .time-content .year_month { font-size: calc(16rem / 16); } .index-news .main-container .show-content .b-title { width: 80%; margin-top: 1.563vw; font-size: calc(30rem / 16); font-weight: bold; /* text-align: justify; */ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .index-news .main-container .right-content .text-content { transition: all 1s; } .index-news .main-container .right-content .title { margin-bottom: 1.563vw; font-size: calc(24rem / 16); color: #000; /* text-align: justify; */ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .index-news .main-container .right-content .text { font-size: calc(14rem / 16); color: #6c6f73; line-height: calc(25rem / 16); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } .index-news .main-container .right-content .time { margin-top: 2.083vw; font-size: calc(14rem / 16); } .index-news .main-container .right-content .bottom-content { display: flex; justify-content: space-between; align-items: center; } .index-news .main-container .right-content .bottom-content .type-text { color: #0a50a0; transition: all 1s; } .index-news .main-container .right-content .bottom-content .type-text::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: calc(0.208vw + 6px); background-color: #0a50a0; transition: all 1s; } .index-news .main-container .right-content .bottom-content .btn { width: calc(1.354vw + 12px); height: calc(1.354vw + 12px); transition: all 1s; } .index-news .main-container .right-content .bottom-content .btn img { width: 100%; height: 100%; } .index-news .main-container .swiper-slide.ani-slide { width: calc(42.708vw - 30px) !important; } .index-news .main-container .swiper-slide.ani-slide .text-content { opacity: 0; } .index-news .main-container .swiper-slide.ani-slide .btn { opacity: 0; } .index-news .main-container .swiper-slide.ani-slide a { background: url('../images/bg_index_news.png') no-repeat center/cover; } .index-news .main-container .swiper-slide.ani-slide .bottom-content .type-text { color: #fff; } .index-news .main-container .swiper-slide.ani-slide .show-content { opacity: 1; } .index-news .main-container .swiper-slide.ani-slide .bottom-content .type-text::before { background-color: #fff; } .index-news .main-container .swiper-slide.ani-slide .bottom-content.default-show { display: none; } .index-news .main-container .button-container { display: flex; margin-top: 1.563vw; } .index-swiper .swiper-button-next::after, .index-swiper .swiper-button-prev::after { content: ''; } .index-news .main-container .button-container .index-news-prev, .index-news .main-container .button-container .index-news-next { position: relative; left: auto; right: auto; top: 50%; width: 58px; height: 58px; margin-top: 0; background-image: url('../images/swiper_arrow_white.png'); background-repeat: no-repeat; background-size: cover; } .index-news .main-container .button-container .index-news-next { margin-left: 1.563vw; transform: rotate(180deg); } .index-swiper .swiper-slide.last-slide { height: auto; } .index-serve-container { width: 100%; padding: calc(3.542vw + 6px) 0; text-align: center; /* background: url('../images/bg_index_serve.jpg') no-repeat center/cover; */ } .index-serve-container .b-title { font-size: calc(48rem / 16); } .index-serve-container .text { margin-top: calc(0.521vw + 10px); font-size: calc(18rem / 16); } .index-serve-container .input-container { position: relative; display: inline-flex; justify-content: center; width: 60%; height: calc(1.667vw + 24px); margin-top: calc(1.563vw + 10px); } .index-serve-container .input-container input { /* width: 35%; */ flex: 1; padding-left: 5px; } .index-serve-container .input-container .telError { position: absolute; bottom: 0; left: 0; transform: translateY(120%); color: #ff0000; } .index-serve-container .input-container .sub-btn { display: flex; justify-content: center; align-items: center; padding: 0 calc(2.188vw + 14px); font-size: calc(18rem / 16); color: #0a50a0; border-left: 1px solid #0a50a0; background-color: #fff; } @media screen and (max-width: 1500px) { .index-second-slide .index-model .s-title { font-size: calc(18rem / 16); } .index-introduce .bottom-container { margin-top: 2vh; } .index-introduce .main-container .right-content { width: 40%; } } @media screen and (max-width: 960px) { .index-swiper { height: calc(100vh - 40px); } .index-swiper .banner-swiper .banner-pagination .swiper-pagination-bullet { width: 20%; } .index-swiper .banner-swiper .text-content { font-size: 16px; } .index-swiper .banner-swiper .more-btn { margin-top: 40px; } .index-second-slide .left-container { position: relative; align-items: flex-start; height: auto; margin-top: 50px; } .index-second-slide .line-container { position: absolute; top: 0; left: 0; } .index-second-slide .line-container svg { width: auto; height: 100%; } .index-second-slide .product-list { display: flex; flex-wrap: wrap; justify-content: space-between; width: 90%; height: auto; margin: 0 auto; margin-top: 40px; } .index-second-slide .index-model-1, .index-second-slide .index-model-2, .index-second-slide .index-model-3, .index-second-slide .index-model-4 { position: relative; top: auto; left: auto; right: auto; bottom: auto; width: calc(50% - 5px); } .index-second-slide .index-model .s-title { font-size: 16px; } .index-solution-container .solution-swiper { width: 90%; margin: auto; overflow: hidden; } .index-solution-container .solution-swiper .show-container .text-description { font-size: 14px; } .index-solution-container .solution-swiper .more-btn { margin-top: 30px; } .index-solution-container .solution-swiper .swiper-slide.ani-slide { width: 100% !important; } .index-solution-container .solution-swiper .solution-bottom-container { padding: 0 5%; margin-top: 30px; } .index-solution-container .solution-swiper .swiper-wrapper { padding-left: 0; } .index-introduce .main-container { flex-direction: column; } .index-introduce .main-container .left-content { width: 100%; } .index-introduce .main-container .left-content .text-content { width: 100%; } .index-introduce .main-container .left-content .text { font-size: 14px; line-height: 20px; } .index-introduce .bottom-container .person-pic { width: 45%; } .index-introduce .main-container .right-content { width: 100%; margin-top: 20px; } .index-news .main-container { flex-direction: column; width: 100%; margin-left: 0; } .index-news .main-container .left-content { margin-left: 10%; } .index-news .main-container .left-content ul { display: flex; } .index-news .main-container .left-content ul li { margin-right: 20px; font-size: 14px; line-height: 20px; } .index-news .main-container .right-content { width: 90%; margin: 0 auto; margin-top: 10px; } .index-news .main-container .show-content .time-content { width: 70px; height: 70px; } .index-news .main-container .right-content .text { font-size: 14px; } .index-news .main-container .swiper-slide.ani-slide { width: 100% !important; } .index-news .main-container .button-container { margin-top: 15px; } .index-news .main-container .show-content .b-title { margin-top: 10px; } .index-news .main-container .swiper-slide.ani-slide .bottom-content .type-text { font-size: 14px; } .index-serve-container .text { font-size: 14px; } .index-serve-container .input-container input { width: 50%; } .index-second-slide .index-model .serial-num.active { width: 25px; height: 25px; } .index-serve-container .input-container { width: 80%; height: 40px; } .index-serve-container .input-container .sub-btn { padding: 0 35px; } } @keyframes ballAn { from { transform: translateY(-10%); } to { transform: translateY(15%); } } @keyframes paginationWidthAn { from { width: 0; } to { width: 100%; } } @keyframes modelFloatAn { from { transform: scale(1); } to { transform: scale(.95) translateY(5%); } }