.bannerBar { position: relative; } .bannerBar .group { height: calc(100vw * 940 / 1920); z-index: 1; } .bannerBar .swiper-slide { cursor: pointer; } .bannerBar .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } .bannerBar .swiper-slide img:nth-child(2) { display: none; } .bannerBar .dpwBar { position: absolute; left: 50%; transform: translateX(-50%); bottom: 40px; z-index: 2; } .bannerBar .page { font-size: 14px; color: #FFFFFF; line-height: 16px; width: 15%; } .bannerBar .page span { height: 2px; background: rgba(255, 255, 255, 0.2); display: block; margin-top: 12px; position: relative; } .bannerBar .page i { position: absolute; left: 0; top: 0; bottom: 0; background: #fff; } .bannerBar .pageSmall { display: none; width: 100%; } .bannerBar .pageSmall i { width: 20px; height: 2px; background: #F4F7FB; border-radius: 1px; opacity: 0.2; margin: 0 4px; } .bannerBar .pageSmall i.cur { background: #C9CACA; opacity: 1; } .bannerBar .control { } .bannerBar .prev { width: 34px; height: 34px; background: url(https://cdn-aliyun.nanlux.com/resource/img/prev.png) center center no-repeat; background-size: 34px auto; cursor: pointer; } .bannerBar .prev.has { background-image: url(https://cdn-aliyun.nanlux.com/resource/img/prev2.png); } .bannerBar .prev:hover { background-image: url(https://cdn-aliyun.nanlux.com/resource/img/prev3.png); } .bannerBar .next { width: 34px; height: 34px; background: url(https://cdn-aliyun.nanlux.com/resource/img/next.png) center center no-repeat; background-size: 34px auto; cursor: pointer; margin-left: 30px; } .bannerBar .next.has { background-image: url(https://cdn-aliyun.nanlux.com/resource/img/next2.png); } .bannerBar .next:hover { background-image: url(https://cdn-aliyun.nanlux.com/resource/img/next3.png); } .recommendBar { padding: 120px 0 60px 0; } .recommendBar .group { opacity: 0; } .recommendBar .group.show { opacity: 1; } .recommendBar .dpwBar { overflow: hidden; position: relative; } .recommendBar .swiper-slide { } .recommendBar .li { cursor: pointer; } .recommendBar .li:nth-child(2) { top: 0; } .recommendBar .li:nth-child(3) { bottom: 0; } .recommendBar .item { width: 100%; height: 0; position: relative; border-radius: 20px; overflow: hidden; } .recommendBar .item img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; object-fit: cover; background: #f7f7f7; } .recommendBar .tool { min-height: 180px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 80px 40px 30px 40px; } .recommendBar .name { font-size: 38px; font-weight: normal; color: #FFFFFF; line-height: 47px; height: 47px; } .recommendBar .info { font-size: 18px; font-family: FZLTZHJW--GB1-0, FZLTZHJW--GB1; font-weight: normal; color: #FFFFFF; line-height: 21px; min-height: 21px; letter-spacing: 1px; margin-top: 8px; padding-right: 120px; } .recommendBar .more { font-size: 14px; font-family: FZLTHJW--GB1-0, FZLTHJW--GB1; font-weight: normal; color: #bbb; line-height: 16px; position: absolute; right: 40px; bottom: 32px; padding-right: 31px; background: url(https://cdn-aliyun.nanlux.com/resource/img/more.png) right center no-repeat; background-size: 23px auto; } .recommendBar .li.big { float: left; width: 66.25%; } .recommendBar .li.big .item { padding-top: calc(100% * (700 / 1060)); } .recommendBar .li.big .tool { min-height: 300px; padding: 146px 80px 60px 80px; } .recommendBar .li.big .name { font-size: 48px; line-height: 60px; height: 60px; } .recommendBar .li.big .info { font-size: 28px; line-height: 35px; min-height: 35px; letter-spacing: 2px; } .recommendBar .li.big .more { font-size: 18px; line-height: 20px; right: 80px; bottom: 66px; } .recommendBar .li.small { width: 32.75%; position: absolute; right: 0; } .recommendBar .li.small .item { padding-top: calc(100% * (342 / 524)); } .recommendBar .li:hover .more { color: #00AFEC; background-image: url(https://cdn-aliyun.nanlux.com/resource/img/more2.png); } .recommendBar .page { height: 70px; margin-top: 20px; } .recommendBar .page span { font-size: 24px; font-weight: normal; color: #656B6F; line-height: 28px; position: relative; padding: 0 12px; } .recommendBar .page span:nth-child(2) { color: #231815; } .recommendBar .page span:nth-child(3)::before { content: ''; width: 1px; height: 20px; background: #E0E3E7; position: absolute; left: 0; top: 50%; margin-top: -10px; } .recommendBar .prev { width: 33px; height: 40px; background: url(https://cdn-aliyun.nanlux.com/resource/img/prev4.png) center center no-repeat; background-size: 100% auto; cursor: pointer; margin-right: 72px; } .recommendBar .prev:hover { background-image: url(https://cdn-aliyun.nanlux.com/resource/img/prev13.png); } .recommendBar .next { width: 33px; height: 40px; background: url(https://cdn-aliyun.nanlux.com/resource/img/next4.png) center center no-repeat; background-size: 100% auto; cursor: pointer; margin-left: 72px; } .recommendBar .next:hover { background-image: url(https://cdn-aliyun.nanlux.com/resource/img/next13.png); } .casesBar { position: relative; margin-top: 40px; } .casesBar .group { } .casesBar .swiper-slide { width: 62.5%; position: relative; } .casesBar .blur { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(18, 24, 29, 0.6); opacity: 0.6; backdrop-filter: blur(4px); z-index: 6; pointer-events: none; } .casesBar .swiper-slide-active .blur { opacity: 0; } .casesBar .media { position: relative; width: 100%; padding-top: calc(100% * (720 / 1200)); height: 0; } .casesBar .media img { width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0; z-index: 1; } .casesBar .media video { width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0; z-index: 2; } .casesBar .tool { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 3; } .casesBar .name { font-size: 40px; font-weight: normal; color: #FFFFFF; line-height: 45px; margin-top: 50px; text-align: center; } .casesBar .btn { font-size: 20px; font-family: FZLTHJW--GB1-0, FZLTHJW--GB1; font-weight: normal; color: #FFFFFF; line-height: 23px; letter-spacing: 1px; padding-right: 14px; background: url(https://cdn-aliyun.nanlux.com/resource/img/arrow3.png) right center no-repeat; background-size: 8px auto; cursor: pointer; margin-top: 20px; } .casesBar .btn:last-child { margin-left: 20px; } .casesBar .btn:hover { text-decoration: underline; } .casesBar .prev { position: absolute; z-index: 100; width: 50px; height: 50px; background: url(https://cdn-aliyun.nanlux.com/resource/img/prev5.png) center center no-repeat; background-size: 100% auto; cursor: pointer; left: 18.75%; top: 50%; margin-top: -25px; margin-left: 20px; } .casesBar .prev:hover { background-image: url(https://cdn-aliyun.nanlux.com/resource/img/prev6.png); } .casesBar .next { position: absolute; z-index: 100; width: 50px; height: 50px; background: url(https://cdn-aliyun.nanlux.com/resource/img/next5.png) center center no-repeat; background-size: 100% auto; cursor: pointer; right: 18.75%; top: 50%; margin-top: -25px; margin-right: 20px; } .casesBar .next:hover { background-image: url(https://cdn-aliyun.nanlux.com/resource/img/next6.png); } .casesBar .pageSmall { width: 100%; height: 2px; position: absolute; left: 0; bottom: 16px; right: 0; z-index: 666; overflow: hidden; } .casesBar .pageSmall i { width: 20px; height: 2px; background: #F4F7FB; border-radius: 1px; opacity: 0.2; margin: 0 4px; } .casesBar .pageSmall i.cur { background: #c9caca; opacity: 1; } .fastBar { position: relative; padding: 100px 0 72px 0; } .fastBar .list { padding-left: 220px; padding-top: 22px; } .fastBar .item { font-size: 20px; font-family: FZLTHJW--GB1-0, FZLTHJW--GB1; font-weight: normal; color: #656B6F; line-height: 23px; min-height: 23px; cursor: pointer; margin-bottom: 60px; position: relative; } .fastBar .item::before { content: ''; width: 0; height: 2px; background: #006FBC; position: absolute; left: -60px; top: 10px; } .fastBar .item.cur { color: #006FBC; } .fastBar .item.cur::before { transition: all 0.2s ease-out; width: 40px; } .fastBar .group { width: 68.96%; } .fastBar .swiper-slide { width: 72.96%; cursor: pointer; } .fastBar .img { position: relative; width: 100%; padding-top: calc(100% * (634 / 966)); height: 0; } .fastBar .img img { width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0; z-index: 1; } .fastBar .tool { background: #F3F5F7; padding: 38px 20px 34px 38px; } .fastBar .name { font-size: 22px; font-family: FZLTZHJW--GB1-0, FZLTZHJW--GB1; font-weight: normal; color: #231815; line-height: 26px; letter-spacing: 1px; text-align: center; } .fastBar .info { font-size: 16px; font-family: FZLTZHJW--GB1-0, FZLTZHJW--GB1; font-weight: normal; color: #006FBC; line-height: 30px; text-align: center; margin-top: 10px; } .fastBar .info span { padding-right: 18px; background: url(https://cdn-aliyun.nanlux.com/resource/img/arrow4.png) right center no-repeat; background-size: 18px auto; display: inline-block; max-width: calc(100% - 18px); } .mediaBar { padding-bottom: 100px; } .mediaBar .cap { padding: 40px 0 80px 0; font-size: 60px; font-family: FZLTDHJW--GB1-0, FZLTDHJW--GB1; font-weight: normal; color: #231815; line-height: 73px; letter-spacing: 3px; } .mediaBar .box { padding-top: calc(100% * (704 / 1600)); height: 0; position: relative; } .mediaBar .group { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .mediaBar .li { } .mediaBar .li:not(:first-child) { margin-left: 16px; } .mediaBar .item { position: relative; border-radius: 12px; overflow: hidden; height: calc(100% - 16px); cursor: pointer; margin-top: 16px; } .mediaBar .item.half { height: calc(50% - 16px); } .mediaBar .media { width: 100%; height: 100%; position: relative; } .mediaBar .media img { width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0; z-index: 1; } .mediaBar .media video { width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0; z-index: 2; } .mediaBar .tool { position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: 26px; z-index: 2; background: rgba(226, 227, 228, 0.12); opacity: 0; } .mediaBar .icon { width: 40px; height: 40px; object-fit: contain; } .mediaBar .name { font-size: 24px; font-weight: 600; color: #FFFFFF; line-height: 33px; } .mediaBar .item.hover .tool { opacity: 1; } .mediaBar .group[g="1"] .li { width: 100%; } .mediaBar .group[g="2"] .li { width: 50%; } .mediaBar .group[g="2"][hover="1-1"] .li[s="1"] { width: 60%; } .mediaBar .group[g="2"][hover="1-1"] .li[s="2"] { width: calc(40% - 16px); } .mediaBar .group[g="2"][hover="2-1"] .li[s="1"] { width: 40%; } .mediaBar .group[g="2"][hover="2-1"] .li[s="2"] { width: calc(60% - 16px); } .mediaBar .group[g="3"] .li[s="1"], .mediaBar .group[g="4"] .li[s="1"] { width: 37.5%; } .mediaBar .group[g="3"] .li[s="2"], .mediaBar .group[g="4"] .li[s="2"] { width: calc(24.75% - 16px); } .mediaBar .group[g="3"] .li[s="3"], .mediaBar .group[g="4"] .li[s="3"] { width: calc(37.75% - 16px); } .mediaBar .group[g="3"][hover="1-1"] .li[s="1"], .mediaBar .group[g="4"][hover="1-1"] .li[s="1"] { width: 40%; } .mediaBar .group[g="3"][hover="1-1"] .li[s="2"], .mediaBar .group[g="4"][hover="1-1"] .li[s="2"] { width: calc(23.5% - 16px); } .mediaBar .group[g="3"][hover="1-1"] .li[s="3"], .mediaBar .group[g="4"][hover="1-1"] .li[s="3"] { width: calc(36.5% - 16px); } .mediaBar .group[g="3"][hover="2-1"] .li[s="1"], .mediaBar .group[g="4"][hover="2-1"] .li[s="1"] { width: 30%; } .mediaBar .group[g="3"][hover="2-1"] .li[s="2"], .mediaBar .group[g="4"][hover="2-1"] .li[s="2"] { width: calc(36% - 16px); } .mediaBar .group[g="3"][hover="2-1"] .li[s="3"], .mediaBar .group[g="4"][hover="2-1"] .li[s="3"] { width: calc(34% - 16px); } .mediaBar .group[g="3"][hover="3-1"] .li[s="1"], .mediaBar .group[g="4"][hover="3-1"] .li[s="1"] { width: 37.5%; } .mediaBar .group[g="3"][hover="3-1"] .li[s="2"], .mediaBar .group[g="4"][hover="3-1"] .li[s="2"] { width: calc(24.75% - 16px); } .mediaBar .group[g="3"][hover="3-1"] .li[s="3"], .mediaBar .group[g="4"][hover="3-1"] .li[s="3"] { width: calc(37.75% - 16px); } .mediaBar .group[g="4"][hover="3-1"] .li[s="3"] .item[i="1"] { height: calc(61.36% - 16px); } .mediaBar .group[g="4"][hover="3-1"] .li[s="3"] .item[i="2"] { height: calc(38.64% - 16px); } .mediaBar .group[g="4"][hover="3-2"] .li[s="3"] .item[i="1"] { height: calc(38.64% - 16px); } .mediaBar .group[g="4"][hover="3-2"] .li[s="3"] .item[i="2"] { height: calc(61.36% - 16px); } .otherBar { background: #f3f5f7; } .otherBar .item { padding: 150px 0 62px 0; cursor: pointer; } .otherBar .item:nth-child(1) { background: url(https://cdn-aliyun.nanlux.com/resource/img/question.png) top 50px center no-repeat; background-size: 80px auto; } .otherBar .item:nth-child(2) { background: url(https://cdn-aliyun.nanlux.com/resource/img/servise.png) top 50px center no-repeat; background-size: 80px auto; } .otherBar .item:nth-child(3) { background: url(https://cdn-aliyun.nanlux.com/resource/img/email.png) top 50px center no-repeat; background-size: 80px auto; } .otherBar .cap { font-size: 24px; font-family: FZLTZHJW--GB1-0, FZLTZHJW--GB1; font-weight: normal; color: #231815; line-height: 29px; letter-spacing: 2px; text-align: center; } .otherBar .info em { font-size: 16px; font-family: FZLTHJW--GB1-0, FZLTHJW--GB1; font-weight: normal; color: #656B6F; line-height: 18px; text-align: center; margin-top: 20px; background: url(https://cdn-aliyun.nanlux.com/resource/img/arrow5.png) right center no-repeat; background-size: 18px auto; padding-right: 18px; } .otherBar .item:nth-child(1):hover { background-image: url(https://cdn-aliyun.nanlux.com/resource/img/question2.png); } .otherBar .item:nth-child(2):hover { background-image: url(https://cdn-aliyun.nanlux.com/resource/img/servise2.png); } .otherBar .item:nth-child(3):hover { background-image: url(https://cdn-aliyun.nanlux.com/resource/img/email2.png); } .otherBar .item:hover .info em { color: #006FBC; background-image: url(https://cdn-aliyun.nanlux.com/resource/img/arrow4.png); font-family: FZLTZHJW--GB1-0, FZLTZHJW--GB1; } .followBar { background: #2a2c2d; position: sticky; bottom: 0; z-index: 200; } .followBar .line { font-size: 16px; font-family: FZLTZHJW--GB1-0, FZLTZHJW--GB1; font-weight: normal; color: #FFFFFF; line-height: 30px; letter-spacing: 1px; height: 80px; position: relative; } .followBar input { background: #545657; font-size: 16px; font-family: FZLTXIHJW--GB1-0, FZLTXIHJW--GB1; font-weight: normal; color: #FFFFFF; line-height: 18px; letter-spacing: 1px; outline: none; border: 0; height: 44px; padding: 0 18px; width: 428px; margin-left: 20px; } .followBar input::-webkit-input-placeholder { color: #fff; } .followBar span { width: 50px; height: 44px; cursor: pointer; background: #545657 url(https://cdn-aliyun.nanlux.com/resource/img/to2.png) center center no-repeat; background-size: 46px auto; } .followBar em { position: absolute; right: 0; top: 50%; margin-top: -8.5px; font-size: 15px; font-family: FZLTZHJW--GB1-0, FZLTZHJW--GB1; font-weight: normal; color: #FFFFFF; line-height: 17px; height: 17px; letter-spacing: 1px; cursor: pointer; background: url(https://cdn-aliyun.nanlux.com/resource/img/close.png) right center no-repeat; background-size: 12px auto; padding-right: 20px; } /* PC兼容 */ @media screen and (min-width:769px) and (max-width:1660px) { .recommendBar { padding: 60px 0 0 0; } .recommendBar .dpwBar { padding-top: calc((100% - 120px) * (700 / 1600)); position: relative; } .recommendBar .tool { padding: 60px 20px 27px 20px; min-height: 150px; } .recommendBar .name { font-size: 30px; line-height: 36px; height: 36px; } .recommendBar .info { font-size: 14px; line-height: 18px; min-height: 18px; padding-right: 100px; } .recommendBar .more { font-size: 12px; background-size: 18px auto; padding-right: 26px; bottom: 29px; right: 20px; } .recommendBar .li.big { width: calc(66.25% - 8px - 60px); position: absolute; left: 60px; top: 0; bottom: 0; } .recommendBar .li.big .item { padding-top: 0; height: 100%; } .recommendBar .li.big .tool { padding: 120px 50px 37px 50px; min-height: 240px; } .recommendBar .li.big .name { font-size: 38px; line-height: 48px; height: 48px; } .recommendBar .li.big .info { font-size: 20px; line-height: 28px; min-height: 28px; padding-right: 120px; } .recommendBar .li.big .more { font-size: 16px; bottom: 39px; right: 50px; } .recommendBar .li.small { width: calc(33.75% - 8px - 60px); height: calc(50% - 8px); right: 60px; } .recommendBar .li.small .item { padding-top: 0; height: 100%; } .fastBar { padding: 80px 0 40px 0; } .fastBar .list { padding-left: 120px; } .fastBar .item { font-size: 18px; } .fastBar .tool { padding: 30px 2px 30px 20px; } .fastBar .name { font-size: 18px; line-height: 22px; } .fastBar .info { font-size: 14px; line-height: 20px; } .mediaBar { padding-bottom: 80px; } .mediaBar .cap { font-size: 46px; line-height: 52px; padding: 30px 0 40px 0; } .followBar em { right: 60px; } } @media screen and (min-width:769px) and (max-width:1200px) { .recommendBar { padding: 40px 0 0 0; } .recommendBar .dpwBar { padding-top: calc((100% - 80px) * (700 / 1600)); } .recommendBar .tool { padding: 40px 16px 22px 16px; min-height: 114px; } .recommendBar .name { font-size: 22px; line-height: 26px; height: 26px; } .recommendBar .info { font-size: 12px; line-height: 16px; min-height: 16px; } .recommendBar .more { bottom: 24px; } .recommendBar .li.big { width: calc(66.25% - 8px - 40px); left: 40px; } .recommendBar .li.big .tool { padding: 100px 30px 28px 30px; min-height: 194px; } .recommendBar .li.big .name { font-size: 30px; line-height: 36px; height: 36px; } .recommendBar .li.big .info { font-size: 16px; line-height: 20px; min-height: 20px; } .recommendBar .li.big .more { font-size: 14px; bottom: 30px; right: 30px; } .recommendBar .li.small { width: calc(33.75% - 8px - 40px); right: 40px; } .fastBar { padding: 40px 0 20px 0; } .fastBar .list { padding-left: 100px; } .fastBar .item { font-size: 16px; line-height: 20px; min-height: 20px; margin-bottom: 40px; } .fastBar .tool { padding: 20px 2px 20px 20px; } .fastBar .name { font-size: 16px; } .fastBar .info { font-size: 13px; } .mediaBar { padding-bottom: 60px; } .mediaBar .cap { font-size: 36px; line-height: 42px; padding: 20px 0 30px 0; } .followBar .line { -webkit-box-pack: start; box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } .followBar em { right: 40px; } } @media screen and (min-width:769px) and (max-width:1000px) { .followBar .line { -webkit-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; -webkit-box-align: start; box-align: start; -webkit-align-items: flex-start; align-items: flex-start; -webkit-box-pack: center; box-pack: center; -webkit-justify-content: center; justify-content: center; font-size: 12px; line-height: 14px; } .followBar input { margin-top: 6px; margin-left: 0; height: 38px; font-size: 14px; width: 380px; } .followBar span { position: absolute; left: 400px; top: 31px; height: 38px; } } /* H5兼容 */ @media screen and (max-width:768px) { .bannerBar .group { height: calc(100vw * 500 / 375); } .bannerBar .swiper-slide img:nth-child(1) { display: none; } .bannerBar .swiper-slide img:nth-child(2) { display: block; } .bannerBar .dpwBar { bottom: 16px; } .bannerBar .page { display: none; } .bannerBar .control { display: none; } .bannerBar .pageSmall { display: -webkit-box; display: box; display: -webkit-flex; display: flex; } .recommendBar { padding: 30px 0 0 0; } .recommendBar .swiper-slide { width: calc(100vw - 30px); padding: 0 5px; } .recommendBar .item { padding-top: calc(100% * (222 / 335)); border-radius: 8px; } .recommendBar .tool { min-height: 95px; padding: 26px 20px 18px 20px; } .recommendBar .name { font-size: 26px; line-height: 31px; height: 31px; } .recommendBar .info { font-size: 14px; line-height: 17px; min-height: 17px; margin-top: 4px; padding-right: 100px; } .recommendBar .more { font-size: 14px; color: #fff; line-height: 17px; position: absolute; right: 20px; bottom: 18px; padding-right: 24px; background: url(https://cdn-aliyun.nanlux.com/resource/img/more3.png) right center no-repeat; background-size: 16px auto; } .recommendBar .page { height: 36px; margin-top: 16px; } .recommendBar .page span { font-size: 14px; line-height: 16px; position: relative; padding: 0 8px; color: #b3b6b8; } .recommendBar .page span:nth-child(3)::before { height: 12px; margin-top: -6px; } .recommendBar .prev { width: 15px; height: 36px; background-image: url(https://cdn-aliyun.nanlux.com/resource/img/prev11.png); margin-right: 12px; } .recommendBar .next { width: 15px; height: 36px; background-image: url(https://cdn-aliyun.nanlux.com/resource/img/next11.png); margin-left: 12px; } .casesBar { margin-top: 20px; } .casesBar .group { height: calc(100vw * (500 / 375)); } .casesBar .swiper-slide { width: 100%; } .casesBar .media { padding-top: calc(100% * (500 / 375)); } .casesBar .tool { padding: 0 16px; } .casesBar .name { font-size: 28px; line-height: 32px; margin-top: 34px; } .casesBar .btn { font-size: 14px; line-height: 17px; padding-right: 12px; } .casesBar .btn:last-child { margin-left: 16px; } .casesBar .prev, .casesBar .next { display: none; } .casesBar .pageSmall { width: auto; height: auto; } .fastBar { padding: 40px 0; display: block; } .fastBar .list { padding-left: 16px; padding-top: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; white-space: nowrap; } .fastBar .list::-webkit-scrollbar { display: none; } .fastBar .item { font-size: 14px; font-family: FZLTHJW--GB1-0, FZLTHJW--GB1; font-weight: normal; color: #656B6F; line-height: 17px; min-height: 17px; margin-bottom: 0; display: inline-block; padding-bottom: 10px; } .fastBar .item:not(:first-child) { margin-left: 20px; } .fastBar .item:last-child { margin-right: 16px; } .fastBar .item::before { height: 2px; box-shadow: 0px 2px 4px 0px #A0E6FF; left: 50%; margin-left: -15px; bottom: 0; top: auto; } .fastBar .item.cur { font-size: 15px; font-family: FZLTZHJW--GB1-0, FZLTZHJW--GB1; font-weight: normal; color: #006FBC; line-height: 17px; } .fastBar .item.cur::before { width: 30px; } .fastBar .group { width: 100%; margin-top: 16px; } .fastBar .swiper-slide { width: 100%; padding: 0 16px; } .fastBar .img { padding-top: calc(100% * (225 / 343)); border-radius: 12px 12px 0px 0px; overflow: hidden; } .fastBar .tool { padding: 22px 16px 22px 16px; border-radius: 0px 0px 12px 12px; overflow: hidden; } .fastBar .name { display: none; } .fastBar .info { line-height: 19px; margin-top: 0; } .mediaBar { padding-bottom: 40px; } .mediaBar .cap { display: none; } .mediaBar .box { padding-top: 0; height: auto; padding: 0 16px; } .mediaBar .group { position: relative; display: block; overflow: hidden; } .mediaBar .li { float: left; } .mediaBar .li:not(:first-child) { margin-left: 0; } .mediaBar .item { box-shadow: none; border-radius: 8px; height: auto; margin-top: 0; } .mediaBar .media { position: absolute; left: 0; top: 0; z-index: 1; } .mediaBar .tool { padding: 0 10px 36px 10px; opacity: 1 !important; background: rgba(18, 24, 29, 0.4); -webkit-box-pack: end; box-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .mediaBar .icon { width: 16px; height: 16px; object-fit: contain; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 4px; position: absolute; left: 10px; bottom: 12px; } .mediaBar .name { font-size: 13px; font-family: FZLTZHJW--GB1-0, FZLTZHJW--GB1; font-weight: normal; color: #FFFFFF; line-height: 18px; max-height: 36px; -webkit-line-clamp: 2; } .mediaBar .item .tool::before { content: attr(data-txt); font-size: 11px; font-family: FZLTHJW--GB1-0, FZLTHJW--GB1; font-weight: normal; color: #FFFFFF; line-height: 16px; position: absolute; left: 32px; bottom: 12px; } .mediaBar .item .tool::after { content: ''; width: 16px; height: 16px; background: url(https://cdn-aliyun.nanlux.com/resource/img/dot.png) center center no-repeat; background-size: 3px auto; position: absolute; right: 10px; bottom: 10px; } .mediaBar .li[s="1"] .item { padding-top: calc(100% * (340 / 343)); } .mediaBar .li[s="2"] .name, .mediaBar .li[s="3"] .name, .mediaBar .li[s="4"] .name { -webkit-line-clamp: 1; } .mediaBar .group[g="2"] .li { width: 100% !important; } .mediaBar .group[g="2"] .li[s="2"] { margin-top: 8px; } .mediaBar .group[g="2"] .item { padding-top: calc(100% * (340 / 343)); } .mediaBar .group[g="3"] .li[s="1"] { width: 100%; } .mediaBar .group[g="3"] .li[s="2"] { width: calc(50% - 4px); } .mediaBar .group[g="3"] .li[s="3"] { width: calc(50% - 4px); } .mediaBar .group[g="3"] .li[s="2"], .mediaBar .group[g="3"] .li[s="3"] { margin-top: 8px; } .mediaBar .group[g="3"] .li[s="2"] .item, .mediaBar .group[g="3"] .li[s="3"] .item { padding-top: calc(100% * (260 / 154)); } .mediaBar .group[g="3"] .li[s="3"] { margin-left: 8px; } .mediaBar .group[g="4"] .li[s="1"] { width: 100%; } .mediaBar .group[g="4"] .li[s="2"] { width: calc(46.06% - 4px); } .mediaBar .group[g="4"] .li[s="3"] { width: calc(53.94% - 4px); position: absolute; top: calc((100vw - 32px) * (340 / 343)); right: 0; bottom: 0; } .mediaBar .group[g="4"] .li[s="2"], .mediaBar .group[g="4"] .li[s="3"] { margin-top: 8px; } .mediaBar .group[g="4"] .li[s="2"] .item { padding-top: calc(100% * (260 / 154)); } .mediaBar .group[g="4"] .li[s="3"] .item { height: calc(50% - 4px); } .mediaBar .group[g="4"] .li[s="3"] .item[i="2"] { margin-top: 8px; } .otherBar { background: #f3f5f7; } .otherBar .item { padding: 72px 0 24px 0; cursor: pointer; } .otherBar .item:nth-child(1) { background: url(https://cdn-aliyun.nanlux.com/resource/img/question3.png) top 24px center no-repeat; background-size: 36px auto; } .otherBar .item:nth-child(2) { background: url(https://cdn-aliyun.nanlux.com/resource/img/servise3.png) top 24px center no-repeat; background-size: 36px auto; } .otherBar .item:nth-child(3) { background: url(https://cdn-aliyun.nanlux.com/resource/img/email3.png) top 24px center no-repeat; background-size: 36px auto; } .otherBar .cap { font-size: 14px; font-family: FZLTZHJW--GB1-0, FZLTZHJW--GB1; font-weight: normal; color: #231815; line-height: 17px; letter-spacing: 1px; } .otherBar .info em { font-size: 11px; font-family: FZLTHJW--GB1-0, FZLTHJW--GB1; font-weight: normal; color: #656B6F; line-height: 13px; margin-top: 6px; background: url(https://cdn-aliyun.nanlux.com/resource/img/arrow5.png) right center no-repeat; background-size: 14px auto; padding-right: 14px; } .followBar { display: none; } } /* 英文 */ body.en { font-family: OpenSans !important; } body.en .mediaBar .cap { font-size: 50px; line-height: 68px; font-weight: bold; } body.en .otherBar .cap { font-weight: bold; } body.en .followBar .line { -webkit-box-pack: start; box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } /* 英文 - PC兼容 */ @media screen and (min-width:769px) and (max-width:1660px) { body.en .mediaBar .cap { font-size: 42px; line-height: 50px; } } @media screen and (min-width:769px) and (max-width:1200px) { body.en .mediaBar .cap { font-size: 32px; line-height: 40px; padding: 20px 0 30px 0; } body.en .followBar .line { -webkit-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; -webkit-box-align: start; box-align: start; -webkit-align-items: flex-start; align-items: flex-start; -webkit-box-pack: center; box-pack: center; -webkit-justify-content: center; justify-content: center; font-size: 12px; line-height: 14px; } body.en .followBar input { margin-top: 6px; margin-left: 0; height: 38px; font-size: 14px; width: 380px; } body.en .followBar span { position: absolute; left: 400px; top: 31px; height: 38px; } } /* 英文 - H5兼容 */ @media screen and (max-width:768px) { body.en .recommendBar .name { font-size: 22px; font-weight: bold; } body.en .recommendBar .info { font-size: 11px; } body.en .recommendBar .more { font-size: 11px; background-size: 13px auto; padding-right: 21px; } body.en .casesBar .name { font-size: 24px; font-weight: bold; margin-top: 26px; } body.en .casesBar .btn { font-size: 12px; margin-top: 4px; } body.en .fastBar .item { font-size: 12px; } body.en .fastBar .item:not(:first-child) { margin-left: 18px; } body.en .fastBar .item.cur { font-size: 13px; } body.en .fastBar .info { font-size: 14px; } body.en .mediaBar .name { font-size: 12px; } body.en .otherBar .dpwBar { display: block; } body.en .otherBar .item { padding: 18px 16px 18px 64px; position: relative; } body.en .otherBar .item:not(:first-child)::before { content: ''; position: absolute; left: 64px; right: 0; top: 0; background: #E0E3E7; height: 1px; } body.en .otherBar .item:nth-child(1), body.en .otherBar .item:nth-child(2), body.en .otherBar .item:nth-child(3) { background-position: 16px center; } body.en .otherBar .cap { text-align: left; font-size: 13px; font-weight: 600; } body.en .otherBar .info { display: block; margin-top: 2px; } } /* 西班牙文 */ body.sp { font-family: OpenSans !important; } body.sp .mediaBar .cap { font-size: 50px; line-height: 68px; font-weight: bold; } body.sp .otherBar .cap { font-weight: bold; } /* 西班牙文 - PC兼容 */ @media screen and (min-width:769px) and (max-width:1660px) { body.sp .mediaBar .cap { font-size: 42px; line-height: 50px; } } @media screen and (min-width:769px) and (max-width:1200px) { body.sp .mediaBar .cap { font-size: 32px; line-height: 40px; padding: 20px 0 30px 0; } body.sp .followBar .line { -webkit-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; -webkit-box-align: start; box-align: start; -webkit-align-items: flex-start; align-items: flex-start; -webkit-box-pack: center; box-pack: center; -webkit-justify-content: center; justify-content: center; font-size: 12px; line-height: 14px; } body.sp .followBar input { margin-top: 6px; margin-left: 0; height: 38px; font-size: 14px; width: 380px; } body.sp .followBar span { position: absolute; left: 400px; top: 31px; height: 38px; } } /* 西班牙文 - H5兼容 */ @media screen and (max-width:768px) { body.sp .recommendBar .name { font-size: 22px; font-weight: bold; } body.sp .recommendBar .info { font-size: 11px; } body.sp .recommendBar .more { font-size: 11px; background-size: 13px auto; padding-right: 21px; } body.sp .casesBar .name { font-size: 24px; font-weight: bold; margin-top: 26px; } body.sp .casesBar .btn { font-size: 12px; margin-top: 4px; } body.sp .fastBar .item { font-size: 12px; } body.sp .fastBar .item:not(:first-child) { margin-left: 18px; } body.sp .fastBar .item.cur { font-size: 13px; } body.sp .fastBar .info { font-size: 14px; } body.sp .mediaBar .name { font-size: 12px; } body.sp .otherBar .dpwBar { display: block; } body.sp .otherBar .item { padding: 18px 16px 18px 64px; position: relative; } body.sp .otherBar .item:not(:first-child)::before { content: ''; position: absolute; left: 64px; right: 0; top: 0; background: #E0E3E7; height: 1px; } body.sp .otherBar .item:nth-child(1), body.sp .otherBar .item:nth-child(2), body.sp .otherBar .item:nth-child(3) { background-position: 16px center; } body.sp .otherBar .cap { text-align: left; font-size: 13px; font-weight: 600; } body.sp .otherBar .info { display: block; margin-top: 2px; } }