.p-banner { } .p-index { background: #fff; } .page-header-init { background: none; } .p-banner .swiper-prev-area { width: 200px; height: 600px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .p-banner .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.5; pointer-events: inherit; } .p-banner .swiper-next-area { width: 200px; height: 600px; position: absolute; top: 0; right: 0; bottom: 0; right: 0; } /* .p-banner .swiper-next-area:hover { background:linear-gradient(270deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); opacity:0.23; } */ .p-index .p-banner .swiper-button-prev { display: none; background-image: ; width: 40px; height: 40px; left: 44px; background-size: 100% 100%; z-index: 200; } .p-index .p-banner .swiper-button-next { display: none; background-image: ; width: 40px; height: 40px; right: 44px; background-size: 100% 100%; z-index: 200; } .swiper-slide-video .mask { width: 100%; height: 100%; position: absolute; z-index: 50; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, 0.2); } .swiper-slide-video .before-load{ width: 100%; height: 100%; position: fixed; z-index: 102; display: flex; align-items: center; justify-content: center; background-color: rgba(14, 87, 162,0.9); } .swiper-slide-video .before-load img{ width: 214px; height: 214px; } .p-banner .swiper-slide { position: relative; width: 100%; height: 600px; background: #000; } .p-banner .swiper-img { background-size: contain; } .p-banner .swiper-img a { display: block; height: 100%; width: 100%; overflow: hidden; } .p-banner .swiper-slide-active .banner { height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; } .p-banner .swiper-slide-active .banner .inner { animation: showup 1s linear; background-position: center; background-size: cover; background-repeat: no-repeat; position: relative; left: 0; right: 0; top: 0; text-align: center; display: flex; justify-content: center; flex-direction: column; align-items: center; overflow: hidden; height: 100%; } .p-banner .swiper-slide-active .banner .inner img { width: 1920px; } @keyframes showup { 0% { top: 30px; opacity: 0; } 100% { top: 0; opacity: 1; } } .p-banner .swiper-slide-video { background-color: rgb(14, 40, 87); } .p-banner .swiper-slide h2 { position: absolute; top: 180px; height: 80px; width: 100%; font-size: 50px; font-weight: bold; letter-spacing: 10px; color: rgba(255, 255, 255, 1); line-height: 80px; text-align: center; z-index: 100; } .p-banner .swiper-slide .enh2 { letter-spacing: 4px; top: 220px; } .p-banner .swiper-slide h3 { position: absolute; top: 260px; height: 80px; width: 100%; font-size: 50px; font-weight: bold; letter-spacing: 5px; color: rgba(255, 255, 255, 1); line-height: 80px; text-align: center; z-index: 100; } .p-banner .swiper-slide video { display: block; width: 1920px; /* height: 600px; */ margin: 0 auto; position: absolute; left: 0; right: 0; } .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 32px; } .p-banner .swiper-pagination .swiper-pagination-bullet{ background-image: ; border-radius: unset; height: 6px; width: 13px; background-size: contain; background-color: transparent; } .p-brain { width: 100%; text-align: center; height: 837px; position: relative; overflow: hidden; background-color: #fff; } .p-brain h2 { position: absolute; top: 80px; z-index: 2; width: 100%; height: 60px; line-height: 60px; text-align: center; font-size: 32px; font-weight: 600; color: rgba(51, 51, 51, 1); } .p-brain-desc { position: absolute; top: 152px; height: 48px; font-size: 14px; line-height: 24px; color: #333; z-index: 2; width: 425px; left: 50%; transform: translatex(-50%); } .p-brain-anim{ width: 884px; height: 483px; margin: 0 auto; margin-top: 240px; position: relative; } .p-brain-anim svg{ position: relative; } .p-brain-anim .p-brain-anim-bg{ width: 100%; height: 100%; left: 0; top: 0; position: absolute; } .p-brain .p-brain-btn { bottom: 80px; position: absolute; width: 100%; } .p-iot { background-color: #0a2349; height: 664px; display: flex; justify-content: center; overflow: hidden; } .p-iot .p-iot-wrapper { max-width: 1400px; } .p-iot .p-iot-tabs { display: inline-block; width: 279px; } .p-iot .p-iot-tabs > .h2 { width: 269px; height: 80px; font-size: 24px; font-weight: 500; color: #ccc; line-height: 40px; margin-top: 75px; } .p-iot .p-iot-tabs > .enh2 { width: 280px; height: 80px; font-size: 23px; font-weight: 500; color: #ccc; line-height: 30px; margin-top: 75px; transform: translatey(-20px); /* margin-left: -10px; */ } .p-iot .p-iot-tabs ul { margin-top: 50px; } .p-iot .p-iot-tabs ul li { color: rgba(255, 255, 255, 0.3); padding: 11px 0; cursor: pointer; } .p-iot .p-iot-tabs ul li h3 { height: 60px; font-weight: bold; font-size: 0; line-height: 60px; /* margin-left: -10px; */ transition: margin-left 0.3s ease-out; } .p-iot .p-iot-tabs ul li h3 span { font-size: 32px; } .p-iot .p-iot-tabs ul li h3 img { width: 40px; height: 40px; display: none; } .p-iot .p-iot-tabs ul li .tabs-item-desc { font-size: 16px; color: rgba(236, 242, 248, 0.3); line-height: 22px; margin-bottom: 22px; /* margin-left: -10px; */ transition: margin-left 0.3s ease-out; } .p-iot .p-iot-tabs ul li.active { color: rgba(255, 255, 255, 1); } .p-iot .p-iot-tabs ul li.active h3, .p-iot .p-iot-tabs ul li.active .tabs-item-desc { margin-left: 10px; } .p-iot .p-iot-tabs ul li.active h3 img { display: inline-block; vertical-align: top; margin-top: 8px; margin-left: 4px; } .p-iot .p-iot-tabs .imgnone { display: none!important; } .p-iot .p-iot-tabs ul li.active .tabs-item-desc { color: rgba(236, 242, 248, 1); } .p-iot .p-iot-content { display: inline-block; width: 1030px; float: right; } .p-iot .p-iot-content .content-item { font-size: 0; display: none; } .p-iot-content .content-item .content-item-info { position: relative; display: inline-block; width: 50%; height: 332px; } .p-iot-content .content-item .content-item-info a { display: block; width: 100%; height: 100%; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; } .p-iot-content .content-item .content-item-info-tb { width: 100%; } .p-iot-content .content-item-info img { width: 100%; height: 100%; object-fit: contain; } .p-iot-content .content-item-info .content-item-desc { position: absolute; bottom: -45px; width: 100%; text-align: left; padding: 0 140px 0 50px; color: rgba(255, 255, 255, 1); transition: bottom 0.5s ease; } .p-iot-content .content-item-info .content-item-desc-left { padding: 0 90px 0 90px; } .p-iot-content .content-item-info .content-item-desc h4 { height: 40px; font-size: 20px; font-weight: 500; line-height: 40px; } .p-iot-content .content-item-info .content-item-desc p { height: 48px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; line-height: 24px; margin-top: 12px; text-align: left; opacity: 0.3; transition: opacity 0.5s ease; } .p-iot-content .content-item-info-tb .content-item-desc { padding: 0 140px 0 80px; } .content-item .content-item-info-tb .content-item-desc p { display: inline-block; width: 600px; } /* @media (hover: hover) { */ .p-iot-content .content-item-info:hover .content-item-desc { bottom: 24px; } .p-iot-content .content-item-info-tb:hover .content-item-desc { } .p-iot-content .content-item-info:hover .content-item-desc p { opacity: 1; } .p-news .news-container .news-item:hover .img { height: 136px; } .p-news .news-container .news-item:hover .content { height: 115px; } .p-news .news-container .news-item:hover .content .title { color: #0e57a2; } .p-news .news-container .news-item:hover .content .tags { display: flex; opacity: 1; flex-wrap: wrap; } /* } */ .p-example { height: 712px; padding: 80px 0; background-color: #f2f3f5; } .p-example-none{ display: none; } .p-example .p-example-wrapper { margin-top: 32px; width: 1160px; } .p-example .swiper-pagination { width: 380px; text-align: left; right: 60px; left: auto; bottom: 40px; } .p-example .swiper-pagination .swiper-pagination-bullet { border-radius: unset; width: 8px; height: 17px; background-color: rgba(255, 255, 255, 0.5); transform: skew(-10deg); margin: 0 175px 0 0; position: relative; } .p-example .swiper-pagination .swiper-pagination-bullet:last-child { margin: 0; } .p-example .swiper-pagination .swiper-pagination-bullet:last-child::before, .p-example .swiper-pagination .swiper-pagination-bullet:last-child::after { display: none; } .p-example .swiper-pagination .swiper-pagination-bullet:before, .p-example .swiper-pagination .swiper-pagination-bullet:after { content: ""; position: absolute; left: 8px; right: -175px; height: 1px; top: 8px; transform: skew(-10deg); background-color: rgba(255, 255, 255, 0.5); } .p-example .swiper-pagination .swiper-pagination-bullet:after { background-color: #fff; right: 0; } .p-example .swiper-pagination .swiper-pagination-bullet-active { background-color: #fff; } .p-example .swiper-pagination .swiper-pagination-bullet-active::before { background-color: rgba(255, 255, 255, 0.1); } .p-example .swiper-pagination .swiper-pagination-bullet-active:after { animation: pagination-bullet 3.5s linear; animation-fill-mode: forwards; } @keyframes pagination-bullet { 0% { right: 0; } 100% { right: -175px; } } .p-example h2 { height: 50px; font-size: 36px; font-weight: 600; color: rgba(10, 35, 73, 1); line-height: 50px; text-align: center; } .p-example .example-item { width: 1160px; height: 470px; margin: 0 auto; font-size: 0; background-color: #0a2349; } .p-example .example-item .example-item-img { display: inline-block; width: 670px; height: 470px; } .p-example .example-item .example-item-img img { width: 100%; height: 100%; } .p-example .example-item .example-item-desc { display: inline-block; width: 490px; vertical-align: top; padding: 56px 60px 0 50px; } .p-example .example-item-desc span { font-size: 16px; font-family: pingfangsc-regular, pingfang sc; font-weight: 400; color: rgba(255, 255, 255, 1); line-height: 28px; display: inline-block; margin: 16px 0; } .p-example .example-item-desc > img { width: 146px; height: 48px; } .p-example .example-item-desc a img { height: 24px; } .p-news { padding-top: 0px; padding-bottom: 172px; position: relative; } .p-news .news-container { display: flex; justify-content: space-between; z-index: 2; position: relative; margin-top: 40px; } .p-news .news-container .news-item { /* margin-right: 25px; */ width: 360px; background-color: #fff; overflow: hidden; } .p-news .news-container .news-item:last-child { margin-right: 0; } .p-news .news-container .news-item .img { height: 167px; background-position: center; background-size: cover; background-repeat: no-repeat; transition: all 0.3s; background-size: 100% auto; } .p-news .news-container .news-item .content { padding: 24px 32px 0 32px; height: 120px; transition: all 0.3s; } .p-news .news-container .news-item .content .title { font-size: 16px; font-weight: bold; color: rgba(51, 51, 51, 1); line-height: 28px; margin-bottom: 4px; height: 28px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: all 0.3s; } .p-news .news-container .news-item .content .date { font-size: 14px; color: rgba(153, 153, 153, 1); line-height: 24px; margin-bottom: 12px; } .p-news .news-container .news-item .content .tags { display: flex; flex-wrap: wrap; opacity: 0; transition:all 1s cubic-bezier(.18,.24,0,1.25) 0s; } .p-news .news-container .news-item .content .tags .tag { padding: 5px 12px; margin-right: 8px; margin-bottom: 8px; font-size: 12px; color: rgba(102, 102, 102, 1); line-height: 17px; text-shadow: 0px 0px 20px rgba(153, 153, 153, 0.27); background: rgba(248, 248, 248, 1); } .p-news .adv-container { background-position: center; background-size: cover; background-repeat: no-repeat; background-color: #0a2349; height: 390px; text-align: center; position: absolute; top: 178px; left: 0; right: 0; } .p-news .adv-container .img, .p-news .adv-container .mask, .p-news .adv-container .button { position: absolute; left: 0; right: 0; } .p-news .adv-container .img, .p-news .adv-container .mask { top: 0; bottom: 0; } .p-news .adv-container .img img { height: 100%; } .p-news .adv-container .mask { background: linear-gradient( 270deg, rgba(10, 35, 73, 1) 32%, rgba(10, 35, 73, 0) 50%, rgba(10, 35, 73, 1) 68% ); } .p-news .adv-container .button { bottom: 88px; margin: auto; } .p-contact { height: 330px; width: 100%; text-align: center; background-image: ; background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; overflow: hidden; } .p-contact h2 { padding-top: 80px; height: 45px; font-size: 32px; font-weight: 500; color: rgba(51, 51, 51, 1); line-height: 45px; box-sizing: content-box; transition: all 1s ease; } .p-contact .p-contact-info { height: 28px; font-size: 16px; color: rgba(102, 102, 102, 1); line-height: 28px; margin: 20px 0 32px; transition: all 2s ease; } .p-contact.active h2, .p-contact.active .p-contact-info, .p-contact .button { opacity: 1; } #progressbar { width: 80%; height: 50px; position: relative; margin: 50px 0 0 100px; } #progressbar div { width: 100%; height: 10px; position: absolute; top: 50%; left: 0; margin-top: -20px; border: 1px solid #ddd; background: #ccc; } #progressbar div span { position: absolute; display: inline-block; background: green; height: 10px; width: 25%; } #progressbar > span { position: absolute; top: 0; margin-top: -10px; width: 40px; height: 40px; border: 2px solid #ddd; border-radius: 50%; background: green; margin-left: -20px; color: #fff; } #progressbar > span:nth-child(1) { left: 0%; } #progressbar > span:nth-child(2) { left: 25%; background: green; } #progressbar > span:nth-child(3) { left: 50%; background: #ccc; } #progressbar > span:nth-child(4) { left: 75%; background: #ccc; } #progressbar > span:nth-child(5) { left: 100%; background: #ccc; } .mobile-p-iot { display: none; } .mobile-more-button, .mobile-example-item-img, .mobile-p-brain-anim-bg{ display: none!important; } /* 移动端 */ @media screen and (max-width:767px) { .pc{ display: none; } .pc-example-item-img, .pc-p-brain-anim-bg{ display: none!important; } .mobile-example-item-img, .mobile-p-brain-anim-bg { display: block!important; } .p-iot { display: none; } .p-banner .swiper-slide { height: 2.84rem; padding-top: 0.44rem; } .p-banner .swiper-slide video { width: 100vw; height: 2.44rem; margin-top: .44rem; } .p-banner .swiper-slide h2, .p-banner .swiper-slide h3 { display: none; } .p-banner .swiper-slide .swiper-img .inner img{ height: 2.4rem; width: 3.75rem; } /* 深度学习 简单开发 */ .p-brain { height: initial; padding: .48rem .24rem; background: #fff; } .p-brain h2 { top: .48rem; z-index: 2; width: calc(100% - .48rem); text-align: center; font-size: .2rem; font-family: pingfangsc-semibold,pingfang sc; font-weight: bold; color: rgba(51,51,51,1); line-height: .28rem; } .p-brain-desc { position: absolute; top: .92rem; font-size: .12rem; font-family:pingfangsc-regular,pingfang sc; font-weight:400; color:rgba(51,51,51,1); line-height: .2rem; width: calc(100% - .48rem); text-align: center; } .p-brain-video { position: absolute; top: 1.51rem; width: 1.72rem; height: 1.61rem; margin: 0 auto; } .p-brain .p-brain-video video { position: initial; width: 100%; height: 100%; object-fit: cover; left: initial; transition: initial; transform: initial; } .p-brain .p-brain-btn { position: static; width: calc(100% - .48rem); margin: .24rem auto 0; } /* 三大互联网 */ .mobile-p-iot { display: block; background:rgba(10,35,73,1); /* height: 5.61rem; */ padding: .48rem 0 0; position: relative; } .mobile-p-iot .active{ color:rgba(37,144,242,1); } .mobile-p-iot .active span { font-weight: bolder; } .mobile-p-iot .mobile-p-iot-title { font-size: .2rem; font-family:pingfangsc-semibold,pingfang sc; font-weight: 600; color:rgba(255,255,255,1); line-height: .28rem; padding: 0 .47rem 0 .48rem; margin-bottom: .16rem; } .mobile-p-iot-tabs { display: flex; justify-content: space-between; padding: 0 .4rem; } .mobile-p-iot-tab { width: .9rem; height: .76rem; display: flex; flex-direction: column; align-items: center; } .mobile-p-iot-tab i { font-size: .4rem; } .mobile-p-iot-tab { text-align: center; font-size: .14rem; font-family: pingfangsc-regular, pingfang sc; font-weight: 400; color: rgba(255, 255, 255, 1); line-height: .2rem; } .mobile-p-iot-content { margin-top: .24rem; } .mobile-content-item { display: flex; flex-wrap: wrap; } .mobil-content-item-init { display: none; } .mobile-content-item-info { display: inline-block; position: relative; width: 1.87rem; height: 1.84rem; } .mobile-content-item-title { position: absolute; bottom: .13rem; left: 0; right: 0; font-size: .14rem; font-family:pingfangsc-regular,pingfang sc; font-weight: 400; color: rgba(255,255,255,1); line-height: .24rem; text-align: center; } .mobile-content-item-info a{ display: block; width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; } .mobile-content-item:last-of-type .mobile-content-item-info{ width: 100vh; height: 1.84rem; } /* 合作案例 */ .p-example { padding: .48rem 0 0; height: initial; background:rgba(255,255,255,1); } .p-example h2 { font-size: .2rem; font-family:pingfangsc-semibold,pingfang sc; font-weight:600; color:rgba(51,51,51,1); line-height: .28rem; margin: 0 auto .24rem; height: initial; } .p-example .p-example-wrapper { margin-top: 0; width: calc(100% - .48rem); } .p-example .example-item .example-item-img { width: 100%; height: 1.74rem; position: relative; } .p-example .example-item .example-item-desc { width: 100%; vertical-align: top; padding: .36rem .24rem .48rem; background:linear-gradient(180deg,rgba(242,243,245,1) 0%,rgba(255,255,255,1) 100%); display: flex; flex-direction: column; align-items: center; height: initial; position: relative; z-index: 2; } .p-example .example-item-desc a { display: inline-block; height: .24rem; } .p-example .example-item-desc a img { position: absolute; bottom: .48rem; left: calc(50vw - .88rem); height: .24rem; } .p-example .example-item-desc > img { width: 1.2rem; height: .4rem; position: absolute; top: -.2rem; left: calc(50vw - .88rem); } .p-example .example-item { height: initial; background-color: initial; position: relative; } .p-example .example-item-desc span { display: inline-block; margin: 0 0 .24rem 0; font-size: .14rem; font-family:pingfangsc-regular,pingfang sc; font-weight:400; color:rgba(51,51,51,1); line-height: .24rem; height: 2.16rem; min-height: 2.16rem; } .p-example .swiper-pagination { display: none; } .p-example .mobile-swiper-pagination { display: block; } .p-news { padding: .48rem .24rem; background:rgba(242,243,245,1); } .card .card-title, .card-dark .card-title { font-size: .2rem; font-family: pingfangsc-semibold,pingfang sc; font-weight: 600; color: rgba(51,51,51,1); line-height: .28rem; } .p-news .news-container { display: flex; flex-direction: column; margin-top: .24rem; } .p-news .adv-container { display: none; } .p-news .news-container .news-item { margin: 0 0 .16rem; width: calc(100vw - .48rem); } .p-news .news-container .news-item .img { height: 1.4rem; } .p-news .news-container .news-item .content .title { overflow: hidden; text-overflow: ellipsis; white-space: initial; height: initial; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .16rem; font-family: pingfangsc-medium,pingfang sc; font-weight: bold; color: rgba(51,51,51,1); line-height: .28rem; margin-bottom: .04rem; } .p-news .news-container .news-item .content { padding: .24rem; /* height: initial; */ } .p-news .news-container .news-item .content .date { font-size: .14rem; font-family: pingfangsc-regular,pingfang sc; font-weight: 400; color: rgba(153,153,153,1); line-height: .24rem; margin: 0; } .button { display: block; width: 1.36rem; height: .4rem; line-height: .4rem; border-radius: .01rem; border: 1px solid rgba(14, 87, 162, 0.2); font-size: .14rem; font-family:pingfangsc-medium,pingfang sc; font-weight: 500; color: rgba(14,87,162,1); margin: 0 auto; } .mobile-more-button { margin: .08rem auto 0; } .p-contact { height: 2.19rem; padding: .48rem 0; display: flex; flex-direction: column; align-items: center; } .p-contact .p-contact-info { font-size: .14rem; font-family:pingfangsc-regular,pingfang sc; line-height: .28rem; margin: .08rem 0 .22rem; } .p-contact h2 { padding: 0; font-size: .18rem; font-weight: 600; font-family:pingfangsc-semibold,pingfang sc; color: rgba(51, 51, 51, 1); line-height: .25rem; } .swiper-slide-video, .brain-video{ display: none; } .p-brain-anim { width: calc(100vw - .48rem); height: 1.82rem; margin: 0 auto; margin-top: 1.1rem; position: relative; } .p-brain-anim-en { margin-top: 1.4rem; } .mobile-p-iot .mobile-p-iot-tabs .img-logo { display: inline-block; width: .61rem; height: .63rem; background-size: cover; } .mobile-p-iot-tab:first-of-type.active .img-logo { background-image: !important; } .mobile-p-iot-tab:nth-of-type(2).active .img-logo { background-image: !important; } .mobile-p-iot-tab:last-of-type.active .img-logo { background-image: !important; } .swiper-container-horizontal > .swiper-pagination-bullets { bottom: .11rem; line-height: 0; } .p-example .swiper-container-horizontal > .swiper-pagination-bullets { top: 1.3rem; height: .2rem; line-height: 0; z-index: 2; position: absolute; text-align: center; } .p-example .mobile-swiper-pagination .swiper-pagination-bullet{ background-image: ; border-radius: unset; height: 6px; width: 13px; background-size: contain; background-color: transparent; } /* 合作案例遮罩 */ .p-example .example-item .example-item-img::before{ content: ' '; position: absolute; top: 0; right: 0; left: 0; height: 1.74rem; z-index: 1; background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, #090909 100%); } .p-brain .enh2{ top: 0.35rem; } .enmobile-p-iot-tab{ height: auto; } }