.swiper { position: relative; width: 100%; height: 50vw; user-select: none; /* background-color: #ffffff00; */ } .swiper .swiper-slide img{ width: 100%; /* height: 99%; */ } .swiper .swiper-scrollbar{ /* 轨道 */ background-color: rgba(255, 255, 255, 0.35) !important; height: 0.15625vw !important; bottom: 4vw !important; width: 15.625vw !important; left: 8.333333vw !important; } .swiper .swiper-scrollbar-drag{ /* 滑块 */ background-color: #fff !important; } .swiper .swiper-pagination{ /* 分页器 */ left: 8.333333vw !important; bottom: 4vw !important; text-align: left !important; } .swiper-pagination-bullet{ background-color: rgba(255, 255, 255) !important; width: 5vw !important; height: 0.17vw !important; border-radius: 1px !important; opacity: var(--swiper-pagination-bullet-opacity, .3) !important; } .swiper-pagination-bullet-active{ background-color: #fff !important; opacity: var(--swiper-pagination-bullet-opacity, 1) !important; } .header-pc{ display: block; } .header-mobile{ display: none; } .about{ display: flex; flex-wrap: wrap; margin-top: 8.333333vw; } .about-up-left{ width: 57%; font-size: 0px; } .about-up-left img:nth-child(1){ width: 63%; margin-bottom: 8vw; } .about-up-left img:nth-child(2){ width: 37%; } .about-up-right{ width: 43%; } .about-up-text{ margin-left: 8vw; margin-right: 6.25vw; } .about-up-text p:nth-child(1){ font-size: 1.25vw; color: #333; font-weight: 400; text-align: right; margin-bottom: 4vw; } .about-up-text p:nth-child(2){ font-size: 1.5625vw; color: #f8a000; font-weight: 400; margin-bottom: 1vw; } .about-up-text p:nth-child(3){ font-size: 1.35vw; color: #333; font-weight: 400; margin-bottom: 4vw; } .about-up-text p:nth-child(4){ font-size: 0.833333vw; color: #333; font-weight: 400; margin-bottom: 5.5vw; line-height: 1.5625vw; } .info-btn{ display: flex; width: 12.916667vw; border-bottom: 1px solid #000; justify-content: space-between; align-items: center; padding-bottom: 12px; font-size: 16px; } .info-btn .iconfont{ font-size: 1.041667vw; } .info-btn:hover{ border-bottom: 1px solid #f8a000; } .about-down-left{ margin-top: 110px; width: 43%; display: flex; flex-direction: column; justify-content: space-around; align-items: center; } .about-down-text{ width: 70%; } .about-down-text .text-p-1{ color: #333; font-size: 0.833333vw; line-height: 1.5625vw; } .about-down-left .number-text{ display: flex; justify-content: space-between; align-items: center; } .number-option span{ font-size: 2.5vw; font-weight: bold; } .number-option p{ font-size: 16px; } .about-down-right{ position: relative; margin-top: 110px; width: 57%; display: flex; justify-content: center; align-items: center; } .play-btn{ position: absolute; z-index: 5; width: 8.5vw; height: 5.333333vw; border: 1px solid #fff; background-color: #ffffff56; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all .3s; border-radius: 5px; } .play-btn div{ border-top: 1.135417vw solid #00000000; border-right: none; border-bottom: 1.135417vw solid #00000000; border-left: 1.9vw solid #fff; transition: all .3s; } .play-btn:hover{ border: 1px solid #f8a000; } .play-btn:hover div{ border-left: 1.9vw solid #f8a000; } .about-down-right video{ position: relative; width: 100%; } #videomain{ width: 100%; height: 35.5vw; background-color: #000; display: none; } .about-down-right img{ position: relative; width: 100%; } .history{ position: relative; width: 100%; margin-top: 8.3333vw; } .history img{ position: relative; width: 100%; } .history .main{ position: absolute; z-index: 10; width: 100%; height: 100%; } .history .main p:nth-child(1){ width: 87.5%; margin: 9vw auto ; font-size: 1.5625vw; font-weight: bold; color: #ffffff; } .orange-drop{ background-color: #f8a000; width: 0.8vw; height: 0.8vw; border-radius: 50%; margin: 5px auto; } #gallery{ width: 100%; height: 4.733728vw; overflow: hidden; user-select: none; } #gallery .swiper-slide{ display: flex; justify-content: center; align-items: center; color: #ffffffb1; font-size: 1.5625vw; transition: all .3s; font-weight: 700; /* cursor: pointer; */ } #gallery .swiper-slide-active{ color: #fff; font-size: 2.5vw; } #thumbs{ user-select: none; width: 100%; overflow: hidden; margin: 0px auto; text-align: center; } #thumbs .swiper-slide{ display: flex; justify-content: center; align-items: center; } #thumbs .swiper-slide p{ /* width: 350px; */ width: 14.6vw; display: flex; justify-content: center; align-items: center; color: #ffffffc7; font-size: 16px; font-weight: 400; margin: 2vw auto; } .technology{ display: flex; flex-direction: column; justify-content: space-around; color: #fff; margin-top: 3.645833vw; } .technology-up{ position: relative; width: 57.291667vw; margin-top: 4.6875vw; margin-left: 36.458333vw; } .technology-up img{ position: relative; width: 100%; } .technology-up-text{ z-index: 10; position: absolute; width: 100%; } .technology-up-text h1{ font-size: 1.5625vw; font-weight: 400; margin-top: 6.25vw; margin-left: 9.545455%; } .technology-up-text p{ font-size: 16px; margin-top: 10px; margin-left: 9.545455%; } /* ----- */ .technology-down{ position: relative; width: 57.291667vw; margin-top: 4.6875vw; margin-left: 6.25vw; } .technology-down img{ position: relative; width: 100%; } .technology-down-text{ z-index: 10; position: absolute; width: 100%; } .technology-down-text h1{ font-size: 1.5625vw; font-weight: 400; margin-top: 6.25vw; margin-left: 9.545455%; } .technology-down-text p{ font-size: 16px; margin-top: 10px; margin-left: 9.545455%; } .shopping{ position: relative; background-color: #f8f8f8; padding: 5.208333vw 0px; margin-top: 8.333333vw; } .shopping-main{ position: relative; width: 87.5vw; margin: 0px auto; padding: 3.571429vw 0px; background-color: #fff; display: flex; align-items: center; } .shopping-text{ width: 26%; display: flex; justify-content: space-around; align-items: center; flex-direction: column; } .shopping-text img{ width: 12.5vw; margin-bottom: 3.125vw; } .shopping-text button{ width: 9vw; height: 3.125vw; border-radius: 1.5vw; border: none; background-color: #000; color: #fff; font-size: 0.9375vw; font-weight: 500; cursor: pointer; transition: all .3s; } .shopping-text button:hover{ color: #f8a000; } .shopping-img{ position: relative; font-size: 0px; width: 70%; } .shopping-img img{ position: relative; width: 100%; } .icon-gouwuche{ font-size: 0.9375vw; margin-right: 8px; } .news{ position: relative; display: flex; flex-direction: column; justify-content: space-around; align-items: center; padding-bottom: 6.25vw; } .new-title h1{ margin-top: 7.5vw; margin-bottom: 4.5vw; font-weight: 400; font-size: 1.875vw; } .news-info{ margin-bottom: 2.447917vw; display: flex; justify-content: space-between; width: 87.5vw; } .news-item{ position: relative; width: 21vw; cursor: pointer; } .news-item .imgcon{ font-size: 0px; position: relative; width: 100%; transition: all .3s; overflow: hidden; } .news-item img{ position: relative; width: 100%; transition: all 1s; } .news-item img:hover{ transform: scale(1.05); } .news-item div:nth-child(2){ display: inline-block; padding: 0px 10px; border: 1px solid #f8a000; color:#f8a000; border-radius: 20px; margin: 0.625vw 0px; font-size: 0.625vw; } .content{ font-size: 0.7375vw; /* font-weight: 600; */ margin-bottom: 12px; cursor: pointer; } .news-info a{ transition: none; margin: 0px auto; } .news-info a .content span{ border-bottom: 1px solid #f8a10000; transition: all .3s; } .news-info a:hover .content span{ border-bottom: 1px solid #f8a000; } .time{ font-size: 0.729167vw; color: #727272; } .news-btn .seemore{ width: 12vw; height: 2.5vw; display: flex; justify-content: center; align-items: center; border: 1px solid #858585; border-radius: 5px; transition: all .3s; font-size: 0.833333vw; } .seemore:hover{ color: #fff; background-color: #f8a000; border: 1px solid #f8a000; } .contact{ position: relative; background-color: #f8f8f8; padding-top: 4.166667vw; } .wihte-div{ position: absolute; height: 5.208333vw; width: 100%; bottom: 0; background-color: #fff; } .contact-main{ position: relative; width: 87.5vw; font-size: 0; margin: 0px auto; } .contact-main img{ position: relative; width: 100%; } .contact-text{ position: absolute; z-index: 10; width: 40%; margin-left: 30%; margin-right: 30%; height: 100%; color: #fff; } .contact-text p:nth-child(1){ font-size: 1.875vw; text-align: center; margin-top: 4.791667vw; font-weight: bold; } .contact-text p:nth-child(2){ font-size: 0.9375vw; text-align: center; margin-top: 1.15vw; margin-bottom: 1.354167vw; } .input-text{ height: 2.5vw; font-size:16px; box-shadow: none; outline: none; /* background: #f8f8ff; */ /* color: #f8a000; */ border-radius: 0.520833vw; border: 2px solid rgba(255, 255, 255, 0.6); background-color: rgba(0, 0, 0, 0.3); color:rgba(255, 255, 255, 0.8); padding-left: 1.354167vw; width: 100%; } textarea{ font-family: microsoft yahei !important; padding-top: 0.833333vw; padding-left: 1.354167vw; border-radius: 0.520833vw !important; font-size: 16px !important; width: 100%; } input::-webkit-input-placeholder{ color:rgba(255, 255, 255, 0.8); } input::-moz-placeholder{ color:rgba(255, 255, 255, 0.8); } input:-moz-placeholder{ color:rgba(255, 255, 255, 0.8); } input:-ms-input-placeholder{ color:rgba(255, 255, 255, 0.8); } textarea::-webkit-input-placeholder{ color:rgba(255, 255, 255, 0.8); } textarea::-moz-placeholder{ color:rgba(255, 255, 255, 0.8); } textarea:-moz-placeholder{ color:rgba(255, 255, 255, 0.8); } textarea:-ms-input-placeholder{ color:rgba(255, 255, 255, 0.8); } textarea{ outline: none; resize: none; border-radius: 5px; border: 2px solid rgba(255, 255, 255, 0.6); background-color: rgba(0, 0, 0, 0.3); color: #fff; } .form-item{ width: 46%; margin-top: 1.145833vw; } .textarea-item{ width: 100%; } .form-list{ display: flex; flex-wrap: wrap; justify-content: space-between; } .submit{ width: 9vw; height: 2.6vw; border-radius: 1.354167vw; border: none; background-color: #f8a000; color: #fff; cursor: pointer; margin: 1.666667vw auto 0; display: block; font-size: 0.729167vw; transition: all .3s; } .submit:hover{ border-radius: 5px; } @media (max-width: 1440px) { .about-up-text p:nth-child(4){ font-size: 14px; } .about-down-text .text-p-1{ font-size: 14px; } .info-btn{ font-size: 14px; } .number-option p{ font-size: 14px; } .technology-up-text p{ font-size: 14px; } .technology-down-text p{ font-size: 14px; } .news-item div:nth-child(2){ font-size: 14px; } .content{ font-size: 14px; } .time{ font-size: 14px; } #thumbs .swiper-slide p{ font-size: 14px; } .news-btn .seemore{ font-size: 14px; } .contact-text p:nth-child(2){ font-size: 14px; } .shopping-text button{ font-size: 14px; } .submit{ font-size: 14px; } .input-text{ font-size:14px; } textarea{ font-size: 14px !important; } } @media (max-width: 996px) { .swiper{ height: 100vh; } .swiper .swiper-slide img{ object-fit: cover; height: 100%; } .swiper .swiper-scrollbar{ height: 0.53vw !important; width: 40vw !important; bottom: 13.333333vw !important; left: 30vw !important; } .swiper .swiper-pagination{ /* 分页器 */ left: 0 !important; bottom: 13.333333vw !important; display: flex; justify-content: center; } .swiper-pagination-bullet{ width: 10vw !important; height: 0.7vw !important; } .header-pc{ display: none; } .header-mobile{ display: block; } /* ---------------------------- */ .about{ flex-direction: column; margin-top: 16vw; } .about-up-text{ margin: 0px 5vw; } .about-up-left{ order: 1; width: 100%; } .about-up-right{ order: 2; width: 100%; margin-top: 13vw; } .about-down-right{ width: 100%; order: 3; margin-top: 16.483516vw; } .about-down-left{ margin-top: 15.384615vw; width: 100%; order: 4; } .about-up-text p:nth-child(1){ font-size: 3vw; } .about-up-text p:nth-child(2){ font-size: 4.4vw; margin-top: 8.791209vw; } .about-up-text p:nth-child(3){ font-size: 4vw; margin-top: 4.4vw; } .about-up-text p:nth-child(4){ line-height: 6vw; margin-top: 13vw; font-size: 3vw; } .info-btn{ width: 41vw; margin-top: 18.681319vw; font-size: 3vw; } .info-btn .iconfont{ font-size: 3vw; } .play-btn{ width: 15.384615vw; height: 9.89011vw; } .play-btn div{ border-top: 1.8vw solid #00000000; border-bottom: 1.8vw solid #00000000; border-left: 3.5vw solid #fff; } #videomain{ height: 62.4vw; } .about-down-text{ width: 90%; } .about-down-text .text-p-1{ line-height: 6vw; font-size: 3vw; } .about-down-left .number-text{ margin-top: 12vw; } .number-option span{ font-size: 6vw; } .number-option p{ font-size: 3vw; } .history{ margin-top: 16vw; height: 106.593407vw; } .history img{ height: 100%; object-fit: cover; } .history .main p:nth-child(1){ font-size: 4.4vw; margin-top: 12vw; } .mobile-swiper-layout{ display: flex; align-items: center; } .orange-drop{ order: 1; width: 2.857143vw; height: 2.857143vw; margin-left: 10.7vw; } #gallery{ height: 75vw; width: 17.582418vw; order: 2; } #thumbs{ width: 60vw; order: 3; text-align: left; } #thumbs .swiper-wrapper{ align-items: center; } #thumbs .swiper-slide p{ font-size: 3vw; width: 95%; margin: 0px; } #gallery .swiper-slide{ font-size: 4.5vw; justify-content: left; } #gallery .swiper-slide-active{ font-size: 6vw; } .technology{ margin-top: 10vw; } .technology-up{ margin: 4.6875vw auto; width: 90vw; height: 40vw; } .technology-up-text p{ font-size: 3vw; } .technology-down-text p{ font-size: 3vw; } .technology-down{ margin: 4.6875vw auto; width: 90vw; height: 40vw; } .technology-up img{ height: 100%; object-fit: cover; } .technology-down img{ height: 100%; object-fit: cover; } .technology-up-text h1{ font-size: 5vw; margin-top: 13vw; } .technology-down-text h1{ font-size: 5vw; margin-top: 13vw; } .shopping-main{ flex-direction: column; } .shopping-text{ width: 33vw; } .shopping-text img{ width: 100%; margin-top: 8vw; } .shopping-text button{ font-size: 3vw; width: 27vw; height: 8.125vw; border-radius: 6vw; } .shopping-img{ width: 85%; margin-top: 10vw; margin-bottom: 7vw; } .icon-gouwuche{ font-size: 3vw; } .new-title h1{ font-size: 5vw; margin-top: 17vw; margin-bottom: 7.8vw; } .news-info{ flex-wrap: wrap; margin-bottom: 4.5vw; } .news-item{ width: 77vw; margin-bottom: 8vw; } .news-item div:nth-child(2){ font-size: 3vw; margin-top: 4vw; margin-bottom: 2.5vw; } .time{ font-size: 3vw; } .content{ font-size: 3.5vw; margin-bottom: 2.6vw; } .news-btn .seemore{ width: 50vw; height: 11.5vw; font-size: 3.3vw; } .news{ padding-bottom: 13vw; } .contact{ padding-top: 7vw; } .contact-main{ height: 105vw; } .contact-main img{ height: 100%; object-fit: cover; } .wihte-div{ height: 8.5vw; } .contact-text{ width: 88%; margin-left: 6%; margin-right: 6%; } .form-item{ width: 92%; } .contact-text p:nth-child(1){ font-size: 5vw; margin-top: 9.733333vw; } .contact-text p:nth-child(2){ font-size: 3vw; } .input-text{ height: 9vw; border-radius: 1.333333vw; border: 1px solid rgba(255, 255, 255, 0.6); padding-left: 5vw; margin-top: 2.266667vw; font-size: 3vw; } textarea{ padding-top: 3vw; padding-left: 5vw; border-radius: 1.333333vw !important; font-size: 3vw !important; margin-top: 2.266667vw !important; border: 1px solid rgba(255, 255, 255, 0.6); } .submit{ width: 30vw; height: 10vw; border-radius: 5vw; margin-top: 5vw; font-size: 3vw; } }