@import url("./common.css"); /* PC绔 */ .black_area { background-color: #000; height: 7.29vw; } .i_page { background-color: #000; } .i_page .part1 { position: relative; width: 100%; padding: 2.08vw 8.33vw; } .i_page .part1 .mask_box { height: 500vh; margin-bottom: 6.25vw; position: relative; } .i_page .part1 .img.m{ display: none; } .i_page .part1 .sticky { position: sticky; top: 9.38vw; width: calc(100vw - 16.67vw); height: calc(100vh - 9.38vw); margin: 0 auto; } .i_page .part1 .mask { position: absolute; top: 50%; left: 50%; /* transform: translate(-50%, -50%); */ width: 26.04vw; height: 18.75vw; z-index: 2; -webkit-mask-image: url(../img/lighting2.svg); -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; max-height: 2000vh; /* display: flex; align-items: center; justify-content: center; */ } .i_page .part1 .img { position: fixed; top: calc(50% + 4.69vw); left: 50%; transform: translate(-50%, -50%); width: calc(100vw - 16.67vw); height: calc(100vh - 9.38vw); } .i_page .part1 .img video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .i_page .part1 .txt { width: 66.56vw; margin: 0 auto; font-size: 0.22rem; line-height: 1.75; font-family: hr; color: #fff; text-align: center; } .i_page .part1 .txt span { color: #00aaeb; } .i_page .part2 { position: sticky; top: 0; height: 220vh; z-index: 2; } .i_page .part2 img { position: sticky; top: 9.08vw; width: 72.3vw; margin-left: 13.85vw; display: none; } .i_page .part2 img.act{ display: block; } .i_page .part3 { position: sticky; z-index: 3; height: 150vh; top: 0; } .i_page .part3 .box { position: relative; } .i_page .part3 .bg { width: 100vw; height: 100vh; transform: scale(0.81); } .i_page .part3 .video_area{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 50vw; height: 50vh; display: flex; align-items: center; justify-content: center; opacity: 0; transition: all .5s; } .i_page .part3 .video_area .icon{ width: 1.3rem; height: 1.3rem; position: relative; } .i_page .part3 .video_area img{ cursor: pointer; position: absolute; top: 0; left: 0; transition: all .5s; width: 100%; } .i_page .part3 .video_area .icon .act_img{ opacity: 0; } .i_page .part3 .video_area .icon:hover .comm_img{ opacity: 0; } .i_page .part3 .video_area .icon:hover .act_img{ opacity: 1; } .i_page .part3 .video_area:hover{ opacity: 1; } .i_page .part3 .txt { position: absolute; top: 31%; left: 8.33vw; z-index: 9; } .i_page .part3 .txt .tit { color: #00aaeb; font-size: 0.36rem; font-family: hm; margin-bottom: 1.2vw; } .i_page .part3 .txt .con { font-size: 0.52rem; font-family: hb; margin-bottom: 5.21vw; } .i_page .part3 .txt .more{ display: none; } .i_page .part4 { position: relative; z-index: 4; height: 150vh; background-color: #000; } .i_page .part4 .inner { position: sticky; top: 0; width: 100vw; height: 100vh; } .i_page .part4 .inner .mask { position: absolute; width: 100vw; height: 100vh; left: 50%; top: 50%; transform: translate(-50%, -50%); } .i_page .part4 .inner .imgs .img { display: none; width: 100vw; height: 100vh; } .i_page .part4 .inner .imgs .img.act { display: block; } .i_page .part4 .inner .txt { display: none; width: 20.83vw; height: 18.8vw; position: absolute; left: 7.29vw; top: 30%; /*transform: translateY(-50%);*/ } .i_page .part4 .inner .txt.act { display: block; } .i_page .part4 .inner .txt .tit { font-size: 0.52rem; margin-bottom: 2vw; font-family: hb; } .i_page .part4 .inner .txt .con { font-size: 0.22rem; font-family: hr; line-height: 1.75; } .i_page .part4 .inner .txt .con span { color: #00aaeb; } .i_page .part4 .inner .txt .more { position: absolute; bottom: 0; left: 0; } .i_page .part4 .inner .swiper{ display: none; } .i_page .part4 .inner .tab { position: absolute; bottom: 0; left: 0; width: 100%; padding: 0 7.29vw; display: flex; } .i_page .part4 .inner .tab .item { margin-right: 3.75vw; height: 5.21vw; border-top: 0.05vw solid rgba(255, 255, 255, 0.8); position: relative; width: 14.06vw; padding-top: 0.94vw; font-size: 0.18rem; font-family: hm; color: rgba(255, 255, 255, 0.5); cursor: pointer; } .i_page .part4 .inner .tab .item.act { color: rgba(255, 255, 255, 1); } .i_page .part4 .inner .tab .item:last-child { margin-right: 0; } .i_page .part4 .inner .tab .item::after { content: ""; position: absolute; left: 0; top: -0.1vw; width: 0%; height: 0.16vw; background-color: #fff; transition: all 0.5s; } .i_page .part4 .inner .tab .item:hover::after, .i_page .part4 .inner .tab .item.act::after { width: 100%; } .i_page .part5 { position: relative; z-index: 5; height: 700vh; background-color: #000; } .i_page .part5 .inner { position: sticky; top: 0; padding-top: 16.74vh; height: 100vh; /*width: 100vw;*/ /*overflow: hidden;*/ } .i_page .part5 .bg { position: absolute; top: 0; width: 65.63vw; left: 17.19vw; } .i_page .part5 .txt { position: relative; } .i_page .part5 .title { font-size: 0.52rem; font-family: hb; margin-bottom: 2.87vh; text-align: center; } .i_page .part5 .desc { font-size: 0.22rem; font-family: hr; margin-bottom: 5.09vh; text-align: center; } .i_page .part5 .more { margin: 0 auto 4.9vw; } .i_page .part5 .swiper{ display: none; } .i_page .part5 .list { position: absolute; bottom: 14.54vh; left: 9.64vw; display: flex; } .i_page .part5 .list .img { width: 26.3vw; height: 20.78vw; margin-right: 2.34vw; } .i_page .part5 .list .img:last-child { margin-right: 0; } .i_page .part5 .pages { position: absolute; bottom: 5vh; left: 50%; transform: translateX(-50%); display: flex; } .i_page .part5 .pages .item { width: 10px; height: 10px; opacity: 0.35; background-color: #fff; border-radius: 50%; margin-right: 18px; } .i_page .part5 .pages .item:last-child { margin-right: 0; } .i_page .part5 .pages .item.act { opacity: 1; } .i_page .part6 { position: relative; z-index: 5; padding-top: 15.74vh; height: 100vh; background: #000; padding-bottom: 5.63vw; } .i_page .part6 .title { font-size: 0.52rem; font-family: hb; margin-bottom: 2.87vh; text-align: center; } .i_page .part6 .desc { font-size: 0.22rem; font-family: hr; margin-bottom: 5.19vh; text-align: center; } .i_page .part6 .swiper { width: 62.29vw; height: 33.28vw; } .i_page .part6 .swiper .img { width: 100%; height: 100%; } .i_page .part6 .swiper .mask { position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); } .i_page .part6 .swiper .txt { position: relative; padding-top: 5vw; display: flex; flex-direction: column; align-items: center; text-align: center; } .i_page .part6 .swiper .txt.m{ display: none; } .i_page .part6 .swiper .txt .tit { font-size: 0.36rem; margin-bottom: 1.3vw; font-family: hb; } .i_page .part6 .swiper .txt .con { font-size: 0.18rem; margin-bottom: 2.08vw; line-height: 2; font-family: hr; opacity: 0.8; width: 80%; } .swiper_box { position: relative; } /* 鎸夐挳 */ .i_page .part6 .btn { width: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 14.58vw; z-index: 99; } .i_page .part6 .prev { height: 1.25vw; width: 0.99vw; background-image: url("../img/arr.svg"); background-size: cover; cursor: pointer; border-radius: 50%; box-shadow: 0 0 1.56vw rgba(0, 0, 0, 0.1); position: relative; } .i_page .part6 .prev::after { position: absolute; content: ""; top: 50%; transform: translateY(-50%); left: 0.26vw; width: 0; height: 0.1vw; background-color: #fff; border-radius: 0.1vw; transition: all 0.5s; } .i_page .part6 .prev:hover::after { width: 100%; } .i_page .part6 .next { height: 1.25vw; width: 0.99vw; background-image: url("../img/arr.svg"); background-size: cover; transform: rotate(180deg); cursor: pointer; border-radius: 50%; box-shadow: 0 0 1.56vw rgba(0, 0, 0, 0.1); } .i_page .part6 .next::after { position: absolute; content: ""; top: 50%; transform: translateY(-50%); left: 0.26vw; width: 0; height: 0.1vw; background-color: #fff; border-radius: 0.1vw; transition: all 0.5s; } .i_page .part6 .next:hover::after { width: 100%; } .i_page .part6 .swiper-pagination { bottom: 3.02vw; } .i_page .part6 .swiper-pagination-bullet { background-color: #fff; width: 0.52vw; height: 0.52vw; margin-right: 0.63vw; } .n_page { padding-top: 5.73vw; } .n_page .tab { display: flex; align-items: center; justify-content: center; margin-bottom: 3.13vw; } .n_page .tab .item { border: #ffffff 0.05vw solid; width: 11.82vw; height: 3.44vw; margin-right: 1.56vw; display: flex; align-items: center; justify-content: center; font-size: 1.04vw; font-family: hr; transition: all 0.5s; } .n_page .tab .item.act, .n_page .tab .item:hover { background-color: #00aaeb; border: transparent 0.05vw solid; } .n_page .tab .item:last-child { margin-right: 0; } .n_page .suggest { display: flex; justify-content: space-between; padding: 0 8.33vw; } .n_page .suggest .img { width: 45.57vw; height: 30.73vw; } .n_page .suggest .txt { width: 31.87vw; padding-top: 6.04vw; } .n_page .suggest .txt .title { font-size: 1.35vw; font-family: hb; margin-bottom: 0.83vw; } .n_page .suggest .txt .time { font-size: 0.83vw; font-family: hr; margin-bottom: 0.94vw; } .n_page .suggest .txt .con { font-size: 0.83vw; font-family: hl; opacity: 0.8; margin-bottom: 0.83vw; line-height: 2; } .n_page section { padding: 5.21vw 8.33vw 5.21vw; background-image: url("../img/nbg.png"); background-size: cover; } .n_page .list { display: flex; flex-wrap: wrap; } .n_page .list .item { width: 26.04vw; height: 28.54vw; margin-right: 2.4vw; margin-bottom: 1.98vw; } .n_page .list .item .img { width: 100%; height: 16.67vw; } .n_page .list .item:nth-child(3n) { margin-right: 0; } .n_page .list .item .txt { padding-top: 1.98vw; } .n_page .list .item .txt .tit { font-size: 1.04vw; font-family: hb; margin-bottom: 0.94vw; } .n_page .list .item .txt .time { font-size: 0.83vw; font-family: hr; margin-bottom: 0.94vw; } .n_page .list .item .txt .con { font-size: 0.83vw; font-family: hl; opacity: 0.8; margin-bottom: 0.83vw; line-height: 2; } .pagination { display: flex; justify-content: center; } .pagination .item { width: 2.6vw; height: 2.6vw; margin-right: 1.04vw; display: flex; align-items: center; justify-content: center; font-size: 0.94vw; font-family: dm; border-radius: 50%; border: 0.1vw solid #fff; transition: all 0.5s; } .pagination .item:last-child { margin-right: 0; } .pagination .item:hover, .pagination .item.act { background-color: #00aaeb; border: 0.08vw solid transparent; } .pagination .item i { display: block; width: 0.47vw; height: 0.73vw; background-size: 100% 100%; transition: all 0.5s; } .pagination .prev i { background-image: url(../img/pagl.svg); } .pagination .next i { background-image: url(../img/pagr.svg); } .nd_page { padding: 4.01vw 18.75vw 0; } .nd_page .title { font-size: 0.52rem; font-family: hb; margin-bottom: 1.88vw; } .nd_page .info { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.25vw; } .nd_page .time { font-size: 0.22rem; font-family: hr; color: #999999; } .nd_page .share > a { width: 0.32rem; height: 0.32rem; position: relative; margin-left: 0.22rem; margin-right: 0; } .nd_page .share > a a { position: absolute; top: 5%; left: 5%; width: 90%; height: 90%; z-index: 1; margin: 0; border: none; background-color: transparent; } .nd_page .share > a > img { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; } .nd_page .share > a > .act_img{ display: none; } .nd_page .share > a:hover > .act_img{ display: block; } .nd_page .share > a:hover > .comm_img{ display: none; } .social-share .icon-weibo:before, .social-share .icon-qq:before, .social-share .icon-wechat:before { opacity: 0 !important; } .social-share .social-share-icon{ line-height: 15px; opacity: 0; } .nd_page .content { padding: 2.86vw 0; border-top: 0.05vw solid rgba(168, 168, 168, 0.3); border-bottom: 0.05vw solid rgba(168, 168, 168, 0.3); } .nd_page .content p { font-size: 0.18rem; font-family: hr; line-height: 2; color: #a8a8a8; } .nd_page .content img { width: 100%; margin: 0.5rem 0; } .nd_page .nbottom { padding: 1.72vw 0 3.02vw; display: flex; justify-content: space-between; } .nd_page .nbottom .item { display: flex; flex-direction: column; } .nd_page .nbottom .item span { font-size: 0.22rem; font-family: hb; margin-bottom: 0.78vw; color: #a8a8a8; } .nd_page .nbottom .item a { font-size: 0.22rem; font-family: hm; color: #a8a8a8; transition: all 0.5s; } .nd_page .nbottom .item a:hover { color: #00aaeb; } .sea_page{ padding: 2rem 3rem 1rem; background-color:#000; color: #fff; } .sea_page .title{ font-size: 0.48rem; font-family: hb; margin-bottom: 0.5rem; text-align: center; } .sea_page form{ position: relative; } .sea_page form img{ position: absolute; left: 0.24rem; top: 50%; transform: translateY(-50%); width: 0.94vw; } .sea_page input{ width: 100%; height: 0.5rem; border: 1px solid #fff; padding-left: 0.5rem; background-color: transparent; color: #fff; } .tec_page .part { padding-top: 6.25vw; } .tec_page .title { font-size: 0.52rem; font-family: hb; margin-bottom: 0.52vw; text-align: center; } .tec_page .en { font-size: 0.22rem; font-family: gl; text-align: center; margin-bottom: 3.13vw; } .tec_page .part1 { height: 550vh; } .tec_page .part1.noswiper{ padding-top: 3.25vw; } /*.tec_page .part1.noswiper .top{*/ /* position: sticky;*/ /* top: 10.54vw;*/ /*}*/ .tec_page .part1.noswiper .inner { position: sticky; top: 10.54vw; height: 68vh; } .tec_page .part1 .inner { position: sticky; top: -16.21vw; height: 130vh; } .tec_page .part1 .swipers { display: flex; justify-content: space-between; padding-right: 8.33vw; } .tec_page .part1 .swiper_box { width: 61.41vw; height: 26.46vw; display: flex; justify-content: flex-start; overflow: hidden; margin-left: 9.58vw; } .tec_page .part1 .swiper1 { width: 20.83vw; height: 100%; } .tec_page .part1 .swiper1 .swiper-slide { width: auto; display: flex; align-items: end; } .tec_page .part1 .swiper1 .swiper-slide .img { width: 15.63vw; height: 19.38vw; transition: all 0.5s; } .tec_page .part1 .swiper1 .swiper-slide-active .img { width: 20.83vw; height: 26.46vw; } .tec_page .part1 .swiper2 { width: 17.19vw; height: 26.46vw; overflow: hidden; position: relative; } .tec_page .part1 .swiper2 .txt { padding-top: 5.89vw; display: none; } .tec_page .part1 .swiper2 .txt.act{ display: block; } .tec_page .part1 .swiper2 .tit { font-size: 0.3rem; font-family: hb; margin-bottom: 2.24vw; position: relative; color: #00aaeb; } .tec_page .part1 .swiper2 .tit::after { content: ""; position: absolute; bottom: 0; left: 0; width: 80%; height: 0.1vw; background-image: linear-gradient(90deg, #00aaeb, rgba(0, 170, 235, 0)); } .tec_page .part1 .swiper2 .con { font-size: 0.18rem; font-family: hl; opacity: 0.8; line-height: 1.75; } /* 鎸夐挳 */ .tec_page .part1 .btn { width: 3.8vw; position: absolute; left: 0; bottom: 1.56vw; display: flex; justify-content: space-between; z-index: 99; } .tec_page .part1 .prev { height: 1.25vw; width: 0.99vw; background-image: url("../img/arr.svg"); background-size: cover; cursor: pointer; border-radius: 50%; box-shadow: 0 0 1.56vw rgba(0, 0, 0, 0.1); position: relative; } .tec_page .part1 .next { height: 1.25vw; width: 0.99vw; background-image: url("../img/arr.svg"); background-size: cover; transform: rotate(180deg); cursor: pointer; border-radius: 50%; box-shadow: 0 0 1.56vw rgba(0, 0, 0, 0.1); position: relative; } .tec_page .part1 .prev::after { position: absolute; content: ""; top: 50%; transform: translateY(-50%); left: 0.26vw; width: 0; height: 0.1vw; background-color: #fff; border-radius: 0.1vw; transition: all 0.5s; } .tec_page .part1 .prev:hover::after { width: 100%; } .tec_page .part1 .next::after { position: absolute; content: ""; top: 50%; transform: translateY(-50%); left: 0.26vw; width: 0; height: 0.1vw; background-color: #fff; border-radius: 0.1vw; transition: all 0.5s; } .tec_page .part1 .next:hover::after { width: 100%; } .tec_page .part1 .swiper{ display: none; } .tec_page .part1 .list { position: absolute; bottom: 10.54vh; left: 9.64vw; display: flex; } .tec_page .part1 .list .img { width: 26.3vw; height: 20.78vw; margin-right: 2.34vw; } .tec_page .part1 .list .img:last-child { margin-right: 0; } .tec_page .part1 .pages { position: absolute; bottom: 5vh; left: 50%; transform: translateX(-50%); display: flex; } .tec_page .part1 .pages .item { width: 10px; height: 10px; opacity: 0.35; background-color: #fff; border-radius: 50%; margin-right: 18px; } .tec_page .part1 .pages .item:last-child { margin-right: 0; } .tec_page .part1 .pages .item.act { opacity: 1; } .tec_page .part2 { padding-bottom: 5.21vw; } .tec_page .part2 .item { display: flex; align-items: center; justify-content: start; padding: 6.25vw 0; margin-bottom: 1.56vw; } .tec_page .part2 .item:nth-child(2n - 1) { margin-right: 8.33vw; background-image: url("../img/tecbg1.png"); background-size: 100%; padding-left: 10.42vw; /*padding-right: 5.21vw;*/ } .tec_page .part2 .item:nth-child(2n) { margin-left: 8.33vw; background-image: url("../img/tecbg2.png"); background-size: 100%; flex-direction: row-reverse; /*padding-left: 5.21vw;*/ } .tec_page .part2 .item:last-child { margin-bottom: 0; } .tec_page .part2 .item .swiper_box { position: relative; } .tec_page .part2 .item .swiper { width: 50.63vw; height: 25.57vw; margin: 0; } .tec_page .part2 .item .img { width: 50.63vw; height: 25.57vw; } .tec_page .part2 .item .txt { width: 16.2vw; margin: 0 11.43vw 0 4.43vw; } .tec_page .part2 .item:nth-child(1) .txt{ margin: 0 4.43vw; } .tec_page .part2 .item .tit { font-size: 0.3rem; font-family: hb; margin-bottom: 2.24vw; position: relative; color: #00aaeb; } .tec_page .part2 .item .tit::after { content: ""; position: absolute; bottom: 0; left: 0; width: 80%; height: 0.1vw; background-image: linear-gradient(90deg, #00aaeb, rgba(0, 170, 235, 0)); } .tec_page .part2 .item .con { font-size: 0.22rem; font-family: hl; opacity: 0.8; line-height: 1.75; } .tec_page .part2 .item .con span { color: #00aaeb; } /* 鎸夐挳 */ .tec_page .part2 .btn { width: 54.84vw; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; justify-content: space-between; z-index: 99; } .tec_page .part2 .prev { height: 1.25vw; width: 0.99vw; background-image: url("../img/arr.svg"); background-size: cover; cursor: pointer; border-radius: 50%; box-shadow: 0 0 1.56vw rgba(0, 0, 0, 0.1); position: relative; } .tec_page .part2 .next { height: 1.25vw; width: 0.99vw; background-image: url("../img/arr.svg"); background-size: cover; transform: rotate(180deg); cursor: pointer; border-radius: 50%; box-shadow: 0 0 1.56vw rgba(0, 0, 0, 0.1); position: relative; } .tec_page .part2 .prev::after { position: absolute; content: ""; top: 50%; transform: translateY(-50%); left: 0.26vw; width: 0; height: 0.1vw; background-color: #fff; border-radius: 0.1vw; transition: all 0.5s; } .tec_page .part2 .prev:hover::after { width: 100%; } .tec_page .part2 .next::after { position: absolute; content: ""; top: 50%; transform: translateY(-50%); left: 0.26vw; width: 0; height: 0.1vw; background-color: #fff; border-radius: 0.1vw; transition: all 0.5s; } .tec_page .part2 .next:hover::after { width: 100%; } .a_page .part1 { padding: 6.77vw 8.33vw 0; } .a_page .part1 .tit { font-size: 0.2rem; font-family: hl; line-height: 2; text-align: center; margin-bottom: 3.13vw; } /*.a_page .part1 .tit span {*/ /* color: #00aaeb;*/ /*}*/ .a_page .part1 .video { display: flex; justify-content: center; } .a_page .part1 .img { width: 62.29vw; height: 29.58vw; display: flex; align-items: center; justify-content: center; position: relative; } .a_page .part1 .img .cover { background-color: rgba(0, 0, 0, 0.43); } .a_page .part1 .img img { position: relative; cursor: pointer; } .a_page .part2 { padding: 6.04vw 18.75vw; } .a_page .part2 .title { font-size: 0.52rem; font-family: hb; text-align: center; margin-bottom: 0.23rem } .a_page .part2 .desc { font-size: 0.22rem; font-family: hr; text-align: center; margin-bottom: 3.13vw; } .a_page .part2 .list .item { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 22.5vw; position: relative; margin-bottom: 1.25vw; opacity: 0.7; transition: all 0.5s; } .a_page .part2 .list .item:hover { opacity: 1; } .a_page .part2 .list .item::before { content: ""; position: absolute; width: 100%; height: 100%; background-image: linear-gradient(-90deg, #0e181c, rgba(14, 23, 27, 0)); } .a_page .part2 .list .item .txt { width: 26.04vw; position: relative; } .a_page .part2 .list .item .txt .tit { font-size: 0.22rem; font-family: hb; margin-bottom: 0.94vw; color: #00aaeb; } .a_page .part2 .list .item .txt .time { font-size: 0.18rem; font-family: hr; margin-bottom: 0.94vw; } .a_page .part2 .list .item .txt .con { font-size: 0.83vw; font-family: hl; opacity: 0.8; margin-bottom: 1.25vw; line-height: 2; height: 3.33vw; } .a_page .part2 .list .item .img { width: 26.04vw; height: 16.67vw; position: relative; } .a_page .part3 { height: 29.27vw; padding-top: 11.15vw; position: relative; overflow: hidden; } .a_page .part3::before { content: ""; height: 3.49vw; position: absolute; top: 0; width: 100%; left: 0; background-image: linear-gradient(#000000, rgba(0, 0, 0, 0)); } .a_page .part3::after { content: ""; height: 104.27vw; position: absolute; top: 100%; transform: translateY(-10.52vw); width: 100%; left: 0; background-image: linear-gradient(rgba(0, 5, 10, 0), #00aaeb); } .a_page .part3 .txt { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 2; } .a_page .part3 .tit { font-size: 0.52rem; margin-bottom: 1.2vw; font-family: hb; } .a_page .part3 .con { font-size: 0.22rem; margin-bottom: 2.29vw; font-family: hr; } .banner .swiper { height: 100%; } .banner.pad::after { content: ""; height: 13.39vw; position: absolute; bottom: 0; width: 100%; left: 0; background-image: linear-gradient(0deg, #000000, rgba(0, 0, 0, 0)); z-index: 2; } .banner.pad .txt { top: 45%; left: 8.33vw; transform: translateY(-50%); text-align: left; } /* 鎸夐挳 */ .banner .btn { width: 100%; position: absolute; left: 0; top: 45%; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 3.33vw; z-index: 99; } .banner .prev { height: 1.25vw; width: 0.99vw; background-image: url("../img/arr.svg"); background-size: cover; cursor: pointer; border-radius: 50%; box-shadow: 0 0 1.56vw rgba(0, 0, 0, 0.1); position: relative; } .banner .next { height: 1.25vw; width: 0.99vw; background-image: url("../img/arr.svg"); background-size: cover; transform: rotate(180deg); cursor: pointer; border-radius: 50%; box-shadow: 0 0 1.56vw rgba(0, 0, 0, 0.1); position: relative; } .banner .prev::after { position: absolute; content: ""; top: 50%; transform: translateY(-50%); left: 0.26vw; width: 0; height: 0.1vw; background-color: #fff; border-radius: 0.1vw; transition: all 0.5s; } .banner .prev:hover::after { width: 100%; } .banner .next::after { position: absolute; content: ""; top: 50%; transform: translateY(-50%); left: 0.26vw; width: 0; height: 0.1vw; background-color: #fff; border-radius: 0.1vw; transition: all 0.5s; } .banner .next:hover::after { width: 100%; } .p_page .part1 { padding: 9.01vw 7.29vw 6.61vw 0; } .p_page .part1 .inner { padding-left: 8.33vw; background-image: url("../img/p1bg.png"); background-size: cover; display: flex; justify-content: space-between; } .p_page .part1 .left { padding-top: 2.76vw; width: 29.69vw; } .p_page .part1 .left .tit { font-size: 0.52rem; font-family: hb; margin-bottom: 0.52vw; } .p_page .part1 .left .en { font-size: 0.22rem; font-family: gl; margin-bottom: 3.13vw; color: #a8a8a8; } .p_page .part1 .left .con { font-size: 0.18rem; font-family: hl; line-height: 2; } .p_page .part1 .list { column-count: 2; column-gap: 0; } .p_page .part1 .list .item { position: relative; display: flex; align-items: end; background-color: rgba(0, 170, 235, 0.1); backdrop-filter: blur(0.52vw); width: 20.78vw; height: 21.41vw; margin-bottom: 1.61vw; margin-right: 1.61vw; -webkit-column-break-inside: avoid; transition: all .5s; } .p_page .part1 .list .item:hover{ background-color: rgba(0, 170, 235, 0.4); } /*.p_page .part1 .list .item::after {*/ /* content: "";*/ /* position: absolute;*/ /* top: 0;*/ /* left: 0;*/ /*}*/ .p_page .part1 .list .item:nth-child(2n) { margin-right: 0; } .p_page .part1 .list .item .icon { position: absolute; top: 2.6vw; right: 2.6vw; width: 3.91vw; } .p_page .part1 .list .item:nth-child(1), .p_page .part1 .list .item:nth-child(4) { width: 20.78vw; height: 17.19vw; } .p_page .part1 .item .txt { padding-left: 2.81vw; } .p_page .part1 .item .tit { font-size: 0.3rem; font-family: hb; margin-bottom: 1.56vw; color: #00AAEB; } .p_page .part1 .item .con { font-size: 0.18rem; font-family: hr; color: #a8a8a8; line-height: 2; margin-bottom: 2.08vw; } .p_page .part2 { padding: 0 8.33vw 6.51vw; position: relative; overflow: hidden; } .p_page .part2 .list{ position: relative; z-index: 2; } .p_page .part2::after { content: ""; position: absolute; left: 0; bottom: -16.3vw; width: 100vw; height: 56.3vw; background-image: url("../img/p2bg.png"); background-size: 100%; } .p_page .part2 .item { display: flex; margin-bottom: 4.17vw; } .p_page .part2 .item:last-child { margin-bottom: 0; } .p_page .part2 .item .img { width: 37.4vw; height: 31.87vw; display: flex; align-items: center; justify-content: center; /*padding: 4.17vw;*/ background-color: rgba(14, 24, 28); margin-right: 6.25vw; } .p_page .part2 .item .img .limg{ width: 37.4vw; height: 31.87vw; } .p_page .part2 .item .txt { padding-top: 7.29vw; } .p_page .part2 .item .tit { font-size: 0.30rem; font-family: hb; margin-bottom: 1.56vw; color: #00aaeb; } .p_page .part2 .item .con { font-size: 0.18rem; font-family: hl; color: #fff; opacity: 0.8; width: 22.4vw; line-height: 2; margin-bottom: 2.08vw; } .pd_page .part1 { padding: 12.4vw 8.33vw 0; background-image: url("../img/pdbg1.png"); background-position: 0 11.41vw; background-size: 100%; } .pd_page .part1 .title { font-size: 0.52rem; font-family: hb; text-align: center; margin-bottom: 4.53vw; } .pd_page .part1 .inner { display: flex; justify-content: space-between; } .pd_page .part1 .left { width: 40.21vw; height: 41vw; background-color: rgba(112, 112, 112, 0.1); backdrop-filter: blur(1.56vw); padding: 5.73vw 5.21vw 0; border-radius: 0.52vw; position: relative; } .pd_page .part1 .left img { margin-bottom: 4.17vw; width: 100%; } .pd_page .part1 .left .name { font-size: 1.25vw; font-family: hb; text-align: center; position: absolute; bottom: 0.55rem; width: 100%; left: 0; } .pd_page .part1 .right { padding-top: 2.08vw; width: 38.75vw; position: relative; } .pd_page .part1 .right .item { margin-bottom: 3.28vw; width: 16.88vw; } .pd_page .part1 .right .item img { height: 2.76vw; margin-bottom: 1.15vw; } .pd_page .part1 .right .item .tit { font-size: 0.3rem; font-family: hm; margin-bottom: 0.83vw; color: #00aaeb; } .pd_page .part1 .right .item .con { font-size: 0.18rem; font-family: hl; opacity: 0.8; } .pd_page .part1 .right .img { width: 100%; height: 20.73vw; border-radius: 0.52vw; display: flex; flex-direction: column; align-items: center; position: absolute; bottom: 0; left: 0; background-color: rgba(112, 112, 112, 0.1); backdrop-filter: blur(1.56vw); padding-top: 2.08vw; } .pd_page .part1 .right .img img { height: 12.03vw; margin-bottom: 2.08vw; } .pd_page .part1 .right .name { font-size: 0.26rem; font-family: hb; text-align: center; } .pd_page .part2 { padding: 14.37vw 8.33vw 4.9vw; background-image: url("../img/pdbg2.png"); background-size: 100%; } .pd_page .part2 table { width: 100% !important; background-color: #0E181C; border: 1px solid rgba(112, 112, 112, .3); } .pd_page .part2 table tr { height: .7rem; line-height: .7rem; border-bottom: 1px solid rgba(112, 112, 112, .3); } .pd_page .part2 table tr:last-child { border-bottom: none; } .pd_page .part2 table tr td { border-right: 1px solid rgba(112, 112, 112, .3); font-size: 16px; width: 20.5%; } .pd_page .part2 table tr td * { font-size: 16px !important; color: #fff !important; } .pd_page .part2 table tr td:first-child * { font-size: 15px !important; } .pd_page .part2 table tr td:first-child { background-color: #091216; font-size: 15px; width: 18%; } .pd_page .part2 table tr td:last-child { border-right: none; } /* 閫傞厤 */ @media (max-width: 1680px) { } @media (max-width: 1480px) { } @media (max-width: 1440px) { } @media (max-width: 1366px) { } @media (max-width: 1280px) { } /* 绉诲姩绔 */ @media (max-width: 1024px) { .aside { display: none; } .i_page .part1{ padding: 0; height: 100vh; } .i_page .part1 .mask_box{ display: none; } .i_page .part1 .img.m{ display: block; height: 60vh; width: 100%; position: initial; transform: initial; } .i_page .part1 .txt { width: 100%; padding: 51px 20px ; } .i_page .part2{ height: 270vh; overflow: hidden; } .i_page .part2 img { top: 32vh; width: 136%; margin-left: -14%; max-width: fit-content; } .i_page .part3 .bg{ height: 95vw; transform: scale(1); } .i_page .part3 .txt{ width: 100%; height: calc(100vh - 95vw); position: initial; display: flex; flex-direction: column; align-items: center; justify-content: center; background-image: linear-gradient(rgba(255,255,255,0),rgba(0,0,0,0.8),rgba(0,0,0,1)); } .i_page .part3 .txt .con{ font-size: 23px; } .i_page .part3 .txt .more{ display: flex; } .i_page .part3 .video_area{ display: none; } .i_page .part4 .inner .tab { display: none; padding: 0 5% 20px; justify-content: space-between; } .i_page .part4 .inner .txt { width: 90%; height: auto; left: 5%; } .i_page .part4 .inner .swiper{ display: block; position: absolute; bottom: 35px; left: 0; width: calc(100% - 40px); margin: 0 20px; } .i_page .part4 .inner .swiper .item{ padding: 9px 0; border-top: 1px solid rgba(255,255,255,.8); text-align: center; transition: all .5s; } .i_page .part4 .inner .swiper .swiper-slide-active .item{ border-top: 2px solid rgba(255,255,255,1); } .i_page .part4 .inner .txt .more { position: relative; margin-top: 10px; } .i_page .part5 .inner { padding: 9vh 0 0; height: auto; } .i_page .part4 .inner .tab .item{ margin-right: 0; width: margin-right; } .i_page .part5{ height: auto; } .i_page .part5 .more{ margin-bottom: 65px; } .i_page .part5 .pages, .i_page .part5 .list{ display: none; } .i_page .part5 .swiper{ display: block; height: 57vw; margin-left: 20px; } .i_page .part5 .swiper .img{ width: 100%; height: 100%; } .i_page .part6 { padding: 8vh 0; height: auto; } .i_page .part6 .desc{ font-size: 16px; } .i_page .part6 .swiper_box{ padding-bottom: 80px; } .i_page .part6 .swiper { width: 90%; /*height: 350px;*/ height: auto; } .i_page .part6 .swiper .img{ height: 57vw; } .i_page .part6 .swiper .txt{ display: none; } .i_page .part6 .swiper .txt.m{ display: flex; width: 100%; margin: 0 auto; padding-top: 27px; } .i_page .part6 .swiper .txt .con{ margin-bottom: 45px; width: 100%; } .i_page .part6 .swiper-pagination-bullet { width: 10px; height: 10px; margin: 0 6px; } .p_page .part1 { padding: 30px 5%; } .p_page .part1 .inner { padding-left: 0; flex-wrap: wrap; } .p_page .part1 .left { width: 100%; padding-top: 0; } .p_page .part1 .list { margin-top: 20px; width: 100%; column-count: initial; display: flex; flex-wrap: wrap; justify-content: space-between; } .p_page .part1 .list .item, .p_page .part1 .list .item:nth-child(1), .p_page .part1 .list .item:nth-child(4) { width: 100%; height: 1.5rem; margin-right: 0; } .p_page .part1 .list .item .icon { width: .3rem; } .p_page .part1 .item .txt{ padding: 0 5%; } .p_page .part2 .item { flex-wrap: wrap; } .p_page .part2 .item .img { width: 100%; height: 2rem; margin-right: 0; } .p_page .part2 .item .img .limg { width: 100%; height: 100%; } .p_page .part2 .item .img .himgf { width: 70%; height: 70%; } .p_page .part2 .item .txt { margin-top: 20px; width: 100%; padding-top: 0; } .p_page .part2 .item .con { width: 100%; } .pd_page .part1 { padding: 30px 5%; } .pd_page .part1 .inner { flex-wrap: wrap; } .pd_page .part1 .left { width: 100%; height: 2.5rem; } .pd_page .part1 .right { width: 100%; padding-top: 20px; } .pd_page .part1 .right .item { width: 100%; margin-bottom: 20px; } .pd_page .part1 .right .item img { height: 30px; margin-bottom: 10px; } .pd_page .part1 .right .img { height: 1.5rem; position: relative; margin-top: 10px; } .pd_page .part1 .right .img img { height: 1rem; } .pd_page .part2 { padding: 10px 5%; overflow-x: auto; } .pd_page .part2 table { min-width: max-content; } .pd_page .part2 table tr{ line-height: 1; } .pd_page .part2 table tr td *{ height: 100%; display: flex; justify-content: center; align-items: center; } .tec_page { padding-top: 70px; } .tec_page .part1 { height: auto; } .tec_page .part1 .inner { top: 0; height: auto; position: static; } .tec_page .part1 .swipers { flex-wrap: wrap; padding: 0 5%; margin-bottom: 20px; } .tec_page .part1 .swiper_box { width: 100%; height: 1.5rem; margin-left: 0; } .tec_page .part1 .swiper1{ width: 100%; } .tec_page .part1 .swiper2 { width: 100%; height: auto; } .tec_page .part1 .swiper1 .swiper-slide { width: 32%; } .tec_page .part1 .swiper1 .swiper-slide .img, .tec_page .part1 .swiper1 .swiper-slide:hover .img { width: 100%; height: 100%; } .tec_page .en{ margin-bottom: 29px; } .tec_page .part1 .inner, .tec_page .part1.noswiper .inner{ height: auto; padding-bottom: 55px; } .tec_page .part1 .list { position: relative; bottom: 0; left: 0; display: none; } .tec_page .part1 .pages { position: relative; bottom: 0; left: 0; transform: translateX(0); display: none; } .tec_page .part1 .swiper{ display: block; height: 57vw; margin-left: 20px; } .tec_page .part1 .swiper .img{ width: 100%; height: 100%; } .tec_page .part2 { padding: 30px 0; } .tec_page .part2 .item { flex-wrap: wrap; padding: 20px; background-size: cover; } .tec_page .part2 .item:nth-child(2n - 1) { margin: 0; padding: 20px; background-size: cover; } .tec_page .part2 .item:nth-child(2n) { margin-left: 0; background-size: cover; } .tec_page .part2 .item .txt { width: 100%; margin: 0; } .tec_page .part2 .item:nth-child(1) .txt { margin: 0; } .tec_page .part2 .item .swiper_box { margin-top: 20px; width: 100%; } .tec_page .part2 .item .swiper { width: 100%; height: 2rem; } .tec_page .part2 .item .img { margin-top: 15px; width: 100%; height: 2rem; } .tec_page .part2 .btn{ position: initial; transform: initial; width: 56px; margin: 22px auto; } .tec_page .part2 .prev, .tec_page .part2 .next{ width: 17px; height: 22px; } .tec_page .part2 .prev::after, .tec_page .part2 .next::after{ display: none; } .a_page .part1 { padding: 30px 5%; } .a_page .part1 .img { width: 100%; height: 2rem; } .a_page .part2 { padding: 10px 5%; } .a_page .part2 .title{ margin-bottom: 10px; } .a_page .part2 .desc{ font-size: 16px; margin-bottom: 15px; } .a_page .part2 .list .item { flex-wrap: wrap; height: auto; margin-bottom: 10px; } .a_page .part2 .list .item .txt { width: 100%; padding: 20px 20px ; } .a_page .part2 .list .item .txt .con { height: 4em; } .a_page .part2 .list .item .himgf { width: 100%; height: 2rem; } .a_page .part2 .list .item .img { width: 100%; height: 100%; } .a_page .part3 { padding: .5rem 5%; height: auto; } .n_page { padding-top: 30px; } .n_page .tab{ margin-bottom: 20px; } .n_page .tab .item { width: max-content; height: max-content; padding: 5px 15px; } .n_page .suggest { flex-wrap: wrap; padding: 0 5%; } .n_page .suggest .img { width: 100%; height: 2rem; } .n_page .suggest .txt { width: 100%; padding-top: 20px; } .n_page section { padding: 20px 5%; } .n_page .list { flex-wrap: wrap; } .n_page .list .item { width: 100%; height: auto; margin-right: 0; margin-bottom: 15px; } .n_page .list .item .img { height: 2rem; } .n_page .list .item .txt { padding-top: 10px; } .pagination .item { width: 36px; height: 36px; border-width: 1px; margin-right: 10px; } .pagination .item i { width: 10px; height: 10px; } .nd_page { padding: 70px 5% 0; } .nd_page .share > a { margin-left: .1rem; } .nd_page .nbottom { padding: 10px 0; flex-wrap: wrap; } .nd_page .nbottom .item { width: 100%; margin-bottom: .2rem; } .nd_page .nbottom .item:last-child { margin-bottom: 0; } .p_page .part1 .left .tit, .pd_page .part1 .title, .tec_page .title, .a_page .part2 .title, .a_page .part3 .tit, .nd_page .title { font-size: 20px; } .i_page .part3 .txt .tit, .i_page .part4 .inner .txt .tit, .i_page .part5 .title, .i_page .part6 .title, .p_page .part1 .item .tit, .p_page .part2 .item .tit, .pd_page .part1 .right .item .tit { font-size: 23px; } .i_page .part6 .swiper .txt .tit, .p_page .part1 .left .en, .pd_page .part1 .left .name, .pd_page .part1 .right .name, .tec_page .part1 .swiper2 .tit, .tec_page .part2 .item .tit, .a_page .part2 .list .item .txt .tit, .n_page .tab .item, .n_page .suggest .txt .title, .n_page .list .item .txt .tit { font-size: 16px; } .i_page .part1 .txt, .i_page .part4 .inner .txt .con, .i_page .part5 .desc, .p_page .part1 .left .con, .p_page .part1 .item .con, .p_page .part2 .item .con, .pd_page .part1 .right .item .con, .tec_page .en, .tec_page .part1 .swiper2 .con, .tec_page .part2 .item .con, .a_page .part1 .tit, .a_page .part2 .list .item .txt .con, .a_page .part3 .con, .n_page .suggest .txt .con, .n_page .list .item .txt .con, .nd_page .content, .nd_page .content p, .nd_page .nbottom .item span, .nd_page .nbottom .item a { font-size: 14px; } .i_page .part4 .inner .tab .item, .i_page .part6 .swiper .txt .con, .a_page .part2 .list .item .txt .time, .n_page .suggest .txt .time, .n_page .list .item .txt .time, .pagination .item, .nd_page .time { font-size: 12px; } .i_page .part6 .btn, .black_area { display: none; } } @media (max-width: 960px) { } @media (max-width: 768px) { } @media (max-width: 414px) { } @media (max-width: 375px) { } @media (max-width: 320px) { }