.index-header { width: 100%; position: absolute; top: 0; left: 0; height: 80px; z-index: 99; border-bottom: 1px solid rgba(255, 255, 255, 0.7); } .index-header .header img { width: 200px; height: 56px; } .index-header .header { display: flex; height: 80px; align-items: center; justify-content: space-between; } .index-header .header .nav { width: 62%; height: 80px; display: flex; align-items: center; padding: 0 5%; border-left: 1px solid rgba(255, 255, 255, 0.7); border-right: 1px solid rgba(255, 255, 255, 0.7); justify-content: space-between; } .index-header .header .nav .nav-item { width: 100%; display: flex; height: 80px; justify-content: center; text-align: center; align-items: center; position: relative; } .index-header .header .nav .nav-item > a { color: #fff; } .index-header .header .nav .nav-item .drop { width: 100%; padding: 0 15px; top: 70px; -webkit-box-shadow: .1rem .1rem .1rem 0 rgba(0,0,0,0.1); box-shadow: .1rem .1rem .1rem 0 rgba(0,0,0,0.1); z-index: 3; position: absolute; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0); transform: scaleY(0); transition: transform .3s; background: rgba(255, 255, 255, 1); border-radius: 10px; } .index-header .header .nav .nav-item .drop a { display: block; margin: 0 auto; height: 60px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); font-weight: 400; white-space: nowrap; } .index-header .header .nav .nav-item:hover .drop { display: block; -webkit-transform: scaleY(1); transform: scaleY(1) } .index-header .header .search { width: 8%; } .index-header .header .search span { color: #fff; } #banner { width: 100%; height: 100%; overflow: hidden; position: relative; transition: all .8s .2s; z-index: 2; } #banner img { width: 100%; } #banner .swiper-pagination { position: absolute; left: 10%; width: auto; bottom: 60px; } #banner .swiper-pagination-bullet { width: 10px !important; height: 10px !important; opacity: 1; border-radius: 50%; background: #fff; margin-right: 8px !important; } #banner .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: rgba(0, 160, 232, 1); } #banner .next { position: absolute; right: 10%; width: auto; width: 180px; bottom: 60px; } #banner .swiper-button-next, #banner .swiper-button-prev { /*position: absolute;*/ /*top: 50%;*/ transform: translateY(-50%); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff !important; width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 50%; font-size: 15px; opacity: 1; border-radius: 50%; border: 1px solid #00A0E8; background: #00A0E8; } #banner .swiper-button-next { right: 15px; } #banner .swiper-button-prev { left: 15px; } #banner .swiper-button-next.swiper-button-disabled, #banner .swiper-button-prev.swiper-button-disabled { opacity: 1; border: 1px dashed #fff; background: transparent; /*background-color: rgba(255, 255, 255, 0.8);*/ } #banner .swiper-button-next:after, #banner .swiper-button-prev:after { font-size: 15px; color: #fff; } .index-product { background-color: #fbfaff; padding: 100px 0; overflow: hidden; padding-bottom: 150px; background: url(../img/Rectangle1125.png) 0 0 no-repeat; background-size: 100% 850px; } .index-product .title { display: flex; align-items: center; justify-content: space-between; } .index-product .title .left { width: 35%; } .index-product .title .left .tt { font-weight: 700; font-size: 2em; margin-bottom: 15px; } .index-product .title .left .desc { font-size: 1.1em; color: #666666; line-height: 1.5em; } .index-product .title .nav { width: 63%; height: 100px; background-color: #fff; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05); border-radius: 20px 0px 20px 0px; } .index-product .title .nav .swiper-slide { display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; height: 80px; padding: 10px 0; transition: 0.5s ease; position: relative; } .index-product .title .nav .swiper-slide span { font-size: 25px; margin-bottom: 10px; transition: 0.5s ease; } .index-product .title .nav .swiper-slide p { color: #515C70; transition: 0.5s ease; } .index-product .title .nav .swiper-slide::after { content: ""; position: absolute; top: 10px; right: 0; height: 70px; width: 1px; border-left: 1px solid rgba(0, 0, 0, 0.1); } .index-product .title .nav .swiper-slide-thumb-active { background: #00A0E8; border-radius: 20px 0px 20px 0px; } .index-product .title .nav .swiper-slide-thumb-active span { color: #fff; } .index-product .title .nav .swiper-slide-thumb-active p { color: #fff; } .index-product .product { margin-top: 50px; position: relative; } .index-product .product .swiper-wrapper { position: relative; z-index: 4 !important; } .index-product .product .swiper-slide { transition: 300ms; transform: scale(0.92); background-color: #000; } .index-product .product .swiper-slide img { width: 100%; height: 400px; object-fit: cover; } .index-product .product .swiper-slide .text { position: absolute; bottom: 0; width: 50%; height: 181px; background: #FFFFFF; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1); border-radius: 0px 0px 0px 0px; bottom: -120px; left: 15%; display: flex; flex-direction: column; align-self: baseline; padding: 30px 50px; transition: 0.5s ease; opacity: 0; } .index-product .product .swiper-slide .text .bian { width: 60px; height: 2px; background: #00A0E8; border-radius: 0px 0px 0px 0px; position: absolute; left: -30px; top: 80px; } .index-product .product .swiper-slide .text .tit { font-size: 1.35em; font-weight: bold; margin-bottom: 12px; } .index-product .product .swiper-slide .text .desc { color: rgba(51, 51, 51, 0.7); font-size: 14px; line-height: 1.5em; overflow: hidden; /** 隐藏超出的内容 **/ word-break: break-all; text-overflow: ellipsis; /** 多行 **/ display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/ -webkit-line-clamp: 3; /** 显示的行数 **/ } .index-product .product .swiper-slide .text .more { /* position: absolute; bottom: 0; bottom: 00px; */ color: #00A0E8; font-size: 1.2em; display: flex; margin-top: 15px; align-items: center; } .index-product .product .swiper-slide .text .more span { transform: rotate(180deg); display: block; margin-left: 10px; font-size: 1.2em; } .index-product .product .swiper-slide-active, .swiper-slide-duplicate-active { transform: scale(0.92); } .index-product .product .swiper-slide-active .text, .swiper-slide-duplicate-active .text { opacity: 1; } .index-product .product .swiper-slide:hover .text { opacity: 0; } .index-product .product .swi-page { position: absolute; height: 100%; width: 50%; left: 25%; /* z-index: 3; */ top: 0; } .index-product .product .swi-page .swiper-button-next, .index-product .product .swi-page .swiper-button-prev { /*position: absolute;*/ /*top: 50%;*/ transform: translateY(-50%); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff !important; width: 50px !important; height: 50px !important; padding: 0 !important; border-radius: 50%; font-size: 15px; opacity: 1; border-radius: 50%; z-index: 9 !important; background: rgba(0, 0, 0, 0.5); } .index-product .product .swi-page .swiper-button-next { right: 15px; } .index-product .product .swi-page .swiper-button-prev { left: 15px; } .index-product .product .swi-page .swiper-button-next:after, .index-product .product .swi-page .swiper-button-prev:after { font-size: 15px; color: #fff; } .index-product .product .swi-page .swiper-pagination { position: absolute; width: 100px; left: 85%; bottom: -60px; font-family: "宋体"; font-weight: bold; font-size: 30px; color: #00A0E8; } .swiper-pagination-current { font-size: 60px; } .swiper-pagination-total { font-size: 30px; } .index-about { background-color: #F3F2EC; /* position: relative; */ background: url(../images/Rectangle960.png) 0 0 no-repeat; height: 850px; background-size: 100% 850px; display: flex; /*padding-bottom: 50px;*/ flex-wrap: wrap; justify-content: center; } .index-about .about { width: 100%; padding-top: 100px; height: 700px; padding-bottom: 50px; /*background: rgba(0, 74, 127, 0.8);*/ } .index-about .tt { font-weight: bold; color: #FFFFFF; font-size: 40px; text-align: center; } .index-about .xian { width: 30%; height: 0px; /*background: #FFFFFF;*/ margin: 50px auto; border-radius: 0px 0px 0px 0px; border: 2px solid; border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1; top: 0; left: -0px; } .index-about .content { /*text-align: justify;*/ color: #fff; line-height: 32px; } .index-about .content p { /*margin-bottom: 15px;*/ font-size: 18px; } .index-about .more { width: 163px; height: 52px; border-radius: 26px 26px 26px 26px; border: 1px solid #FFFFFF; display: flex; justify-content: center; align-items: center; margin: 50px auto; color: #fff; } .index-about .more p { margin-right: 20px; } .index-about .more span { font-size: 20px; } .numCount { /* height: 235px; */ position: relative; z-index: 2; margin-top: 80px; /* margin-top: -180px; */ } .numCount ul { display: flex; /* height: 235px; */ align-items: center; } .numCount li { width: 20%; text-align: center; border-right: 2px solid rgba(255, 255, 255, 0.2); } .numCount li:last-child { border: none; } .numCount li .item { margin: 0 10px; } .numCount li .numU { line-height: 1.3; margin-bottom: 15px; } .numCount li .numCX { font-size: 30px; font-weight: 700; color: #fff; } .numCount li .numU .unitC { font-size: 14px; line-height: 1.3; margin-left: 0.3em; color: #fff; font-weight: 700; } .numCount li .numU sup { vertical-align: top; } .numCount li .numU sub { vertical-align: baseline; } .numCount li .indc { font-size: 14px; color: rgba(255, 255, 255, 0.7); /* text-align: left; */ } .index-link { display: flex; flex-wrap: wrap; padding-bottom: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .index-link span { margin-bottom: 20px; color: rgba(0, 160, 232, 1); } .index-link a { margin-bottom: 20px; margin-right: 10px; color: rgba(0, 160, 232, 1); } .index-footer { background-color: #00a0e8; padding: 10px 0; padding-bottom: 0; } .index-footer .footer { display: flex; padding: 40px 0; justify-content: space-between; } .index-footer .footer .tt { font-weight: bold; font-size: 18px; color: #FFFFFF; margin-bottom: 30px; } .index-footer .footer a { display: block; color: rgba(255, 255, 255, 0.7); font-size:16px; margin-bottom: 20px; } .index-footer .footer .product-nav { width: 32%; position: relative; } .index-footer .footer .product-nav .pp{ color: rgba(255, 255, 255, 0.7); font-size:16px; margin-bottom: 20px; } .index-footer .footer .product-nav .logo{ margin-bottom: 20px; } .index-footer .footer .product-nav::after { content: ""; position: absolute; width: 0px; height: 100%; border: 1px solid; border-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1; top: 0; right: -0px; } .index-footer .footer .nav { width: 50%; display: flex; justify-content: space-between; } .index-footer .footer .footer-contact { width: 13%; position: relative; } .index-footer .footer .footer-contact .top { display: flex; flex-wrap: wrap; justify-content: center; } .index-footer .footer .footer-contact img { width: 100px; } .index-footer .footer .footer-contact .top .ts { font-size: 16px; text-align: center; color: rgba(255, 255, 255, 0.7); } .index-footer .footer .footer-contact .top p { font-size: 16px; margin-top: 15px; color: #FFFFFF; text-align: center; } .index-footer .footer .footer-contact::after { content: ""; position: absolute; width: 0px; height: 100%; border: 1px solid; border-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1; top: 0; left: -0px; } .bah { display: flex; align-items: center; justify-content: center; height: 44px; background: rgba(0, 0, 0, 0.2); } .bah a { margin: 0 40px; color: #FFFFFF; } /* 屏幕宽度至少为 1300px 时的样式 */ @media screen and (max-width: 1800px) { .index-footer .footer .product-nav { /*width: 15%;*/ } .index-footer .footer .nav { /*width: 42%;*/ } .index-footer .footer .footer-contact .top { } } @media screen and (max-width: 1700px) { .index-footer .footer .footer-contact .top .emw { /*margin-top: 20px !important;*/ /*margin-bottom: 20px;*/ } }