@font-face { font-family: 'Conv_DINCondensedC'; src: url('../font/DINCondensedC.eot'); src: local('☺'), url('../font/DINCondensedC.woff') format('woff'), url('../font/DINCondensedC.ttf') format('truetype'), url('../font/DINCondensedC.svg') format('svg'); font-weight: normal; font-style: normal; } body { font-family: 'PingFang SC', "微软雅黑"; position: relative; } input[type="text"] { -webkit-appearance: none; } textarea { -webkit-appearance: none; } h1, h2, h3, h4, h5, h6, figure { font-weight: 400; } .img-full { width: 100% !important; height: 180px !important; object-fit: cover; } ::-webkit-selection { color: #fff; background: #009FE7; } ::-moz-selection { color: #fff; background: #009FE7; } ::selection { color: #fff; background: #009FE7; } .text-lowercase { text-transform: lowercase; } .text-uppercase, .initialism { text-transform: uppercase; } .text-capitalize { text-transform: capitalize; } a { color: #6E6E6E; text-decoration: none } a:focus, a:hover { color: #009FE7; transition: none } a.text-gray:hover { color: #6E6E6E } p { margin: 0 } dl, dd, ul, li { margin: 0; padding: 0; list-style: none } .fixed { z-index: 9999; } .bg-gray { background: #F7F7F7 } .bg-sub { background: #6e6e6e } .flz12 { font-size: 12px !important; } /* 标签 */ .tag { display: inline-block; transition: .5s } .tag.padding-small { padding: 3px 10px } .tag.padding { padding: 5px 12px } .tag.bg-none { padding: 0 } .tag.bg-white { background-color: #fff } .tag.bg-black { background-color: rgba(0, 0, 0, .3) } .tags { color: #009FE7 !important; border: 1px solid #009FE7 !important; background-color: unset; } /* 英文字体begin */ .Conv_DINCondensedC { font-family: "Conv_DINCondensedC"; } /* 英文字体end */ .mb5 { margin-bottom: 5px; } /* 行距 begin*/ .blank { height: 10px; line-height: 10px; clear: both; font-size: 0 } .blank-small { height: 20px; line-height: 20px; clear: both; font-size: 0 } .blank-middle { height: 30px; line-height: 30px; clear: both; font-size: 0 } .blank-big { height: 40px; line-height: 40px; clear: both; font-size: 0 } .blank-large { height: 80px; line-height: 80px; clear: both; font-size: 0 } /* 行距 end*/ /* .container-layout{max-width:99%;} */ .line-big { margin-left: -5px; margin-right: -5px } .line-big .x1, .line-big .x10, .line-big .x11, .line-big .x12, .line-big .x2, .line-big .x3, .line-big .x4, .line-big .x5, .line-big .x6, .line-big .x7, .line-big .x8, .line-big .x9, .line-big .xb1, .line-big .xb10, .line-big .xb11, .line-big .xb12, .line-big .xb2, .line-big .xb3, .line-big .xb4, .line-big .xb5, .line-big .xb6, .line-big .xb7, .line-big .xb8, .line-big .xb9, .line-big .xl1, .line-big .xl10, .line-big .xl11, .line-big .xl12, .line-big .xl2, .line-big .xl3, .line-big .xl4, .line-big .xl5, .line-big .xl6, .line-big .xl7, .line-big .xl8, .line-big .xl9, .line-big .xm1, .line-big .xm10, .line-big .xm11, .line-big .xm12, .line-big .xm2, .line-big .xm3, .line-big .xm4, .line-big .xm5, .line-big .xm6, .line-big .xm7, .line-big .xm8, .line-big .xm9, .line-big .xs1, .line-big .xs10, .line-big .xs11, .line-big .xs12, .line-big .xs2, .line-big .xs3, .line-big .xs4, .line-big .xs5, .line-big .xs6, .line-big .xs7, .line-big .xs8, .line-big .xs9 { position: relative; min-height: 1px; padding-right: 5px; padding-left: 5px } .line-large { margin-left: -15px; margin-right: -15px } .line-large .x1, .line-large .x2, .line-large .x3, .line-large .x4, .line-large .x5, .line-large .x6, .line-large .x7, .line-large .x8, .line-large .x9, .line-large .x10, .line-large .x11, .line-large .x12, .line-large .xl1, .line-large .xl2, .line-large .xl3, .line-large .xl4, .line-large .xl5, .line-large .xl6, .line-large .xl7, .line-large .xl8, .line-large .xl9, .line-large .xl10, .line-large .xl11, .line-large .xl12, .line-large .xs1, .line-large .xs2, .line-large .xs3, .line-large .xs4, .line-large .xs5, .line-large .xs6, .line-large .xs7, .line-large .xs8, .line-large .xs9, .line-large .xs10, .line-large .xs11, .line-large .xs12, .line-large .xm1, .line-large .xm2, .line-large .xm3, .line-large .xm4, .line-large .xm5, .line-large .xm6, .line-large .xm7, .line-large .xm8, .line-large .xm9, .line-large .xm10, .line-large .xm11, .line-large .xm12, .line-large .xb1, .line-large .xb2, .line-large .xb3, .line-large .xb4, .line-large .xb5, .line-large .xb6, .line-large .xb7, .line-large .xb8, .line-large .xb9, .line-large .xb10, .line-large .xb11, .line-large .xb12 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px } /* owl-carousel轮播插件 */ .owl-carousel .owl-dots { /* position: absolute; top: 50%; padding: 0; text-align: left; width: 20px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%) */ text-align: center; } .owl-carousel .owl-dots .owl-dot { display: inline-block; position: relative; vertical-align: middle } .owl-carousel .owl-dots .owl-dot span { width: 8px; height: 8px; margin: 0 5px; border-radius: 50%; background: #d3d3d3; display: inline-block; text-align: center; -webkit-transition: all ease .5s; -o-transition: all ease .5s; transition: all ease .5s } .owl-carousel .owl-dots .owl-dot.active span { width: 16px; height: 8px; background: #009FE7; border-radius: 20px } .owl-carousel .owl-nav i { font-size: 24px; color: #fff } .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev { background: #000; width: 42px; height: 42px; line-height: 48px; -webkit-transition: all ease .5s; -o-transition: all ease .5s; transition: all ease .5s; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); top: 50%; position: absolute; text-align: center; border-radius: 50%; opacity: 0 } .owl-carousel .owl-nav .owl-prev { background: #000; left: 20px; right: auto } .owl-carousel .owl-nav .owl-next { right: 20px } /* owl-carousel轮播插件 */ /* 首页轮播 */ .slides-arrow:hover .owl-nav .owl-next, .slides-arrow:hover .owl-nav .owl-prev { opacity: .3 } .slides-arrow.dot-center .owl-dots { position: relative; top: -30px; padding: 0; text-align: center; vertical-align: middle; display: inline-block; width: 100% } /* 首页业务板块 */ .business-hdbg { width: 100%; height: auto; position: relative; /* background: url(../images/24.jpg); background-size: 100% 100%; */ } .dot-disable .owl-dots { display: none; } .diy-videotop { /* height: 70px; */ } .business-hdbg .textaria { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .business-hdbg video { /* position: absolute; right: 0; bottom: 0; */ width: 100%; height: 100%; object-fit: fill; /* z-index: 0; */ -webkit-filter: grayscale(0); } .business-hdbg .slogan { color: #fff; /* padding-top: 80px; */ } .business-hdbg .slogan .small { font-size: 12px; opacity: 0.9; } .business-hdbg .slogan .big { font-size: 20px; font-weight: 600; } .bg-videobt { width: 100%; background-size: 100% 100%; position: relative; z-index: 2; } .line-business { margin-left: -10px; margin-right: -10px; } .business { position: relative; padding: 5px; display: flex; justify-content: space-between; } .business .sgl { padding: 5px; } .business .item img { width: 100%; border-radius: 2px; } /* 首页业务板块 */ /* 技术底座 */ .line-technology { margin-left: -10px; margin-right: -10px; } .technology { padding: 5px; } .technology .item { overflow: hidden; background: #fff; margin: 5px; padding-bottom: 10px; } .technology .item .img { width: 165px; height: 165px; margin: 0 auto; } .technology .item .img img { width: 100%; } .technology .item h2 { font-weight: 600; margin-top: 10px; transition: margin 0.1s linear; font-size: 16px; } .technology .item .info { opacity: 0.6; padding: 10px; } .technology .item .info span { display: inline-block; width: 46%; text-align: center; font-size: 12px; } .diy-padmove { width: 100%; overflow: hidden; } /* 技术底座 */ .diy-videobox { position: relative; } .diy-videobox .div-abtitle { width: 100%; z-index: 9; } .line-fangan { margin-left: -5px; margin-right: -5px; } .line-fangan .media-img { padding: 5px; } .quotation {} .quotation .quotation-head { line-height: 48px; padding-bottom: 10px; } .quotation .shares-data span { padding-right: 10px; } .quotation .quotation-body .text-small { margin-top: 10px; } .quotation .text-large { font-size: 56px; } .quotation .text-big { font-size: 18px; } .quotation .quotation-foot .x6 { padding-bottom: 20px; line-height: 28px; } /* 常用TAB */ .tab-normal .tab-head { border-radius: 0; font-size: 0; -webkit-text-size-adjust: none; width: 100%; } .tab-normal .tab .tab-nav li { display: inline-block; width: auto; text-align: center } .tab-normal .tab .tab-nav li a { background: #fff; color: #6e6e6e; border-radius: 30px; padding: 0px 15px; height: 36px; line-height: 36px; margin: 0 5px; display: block; border: 0; font-size: 14px; } .tab-normal .tab .tab-nav .active a { background: linear-gradient(-45deg, #FFD100, #ff9600); cursor: default; color: #fff; border-bottom: 0px solid #FD3C6B; } .tab-normal .tab .tab-nav .active { background: none } .tab-normal .tab .tab-nav .active a:hover { color: #FFF } .tab-normal .tab .tab-nav li a:focus { outline: none; } .tab-normal .tab .tab-nav li a:hover { background: linear-gradient(-45deg, #FFD100, #ff9600); color: #fff } .tab-normal .tab .tab-body { padding: 0; border-radius: 0; border-top: 0px solid #ff0000 } /* 常用TAB */ /* 首页产品 */ .carousel-pro .media { position: relative; -webkit-transition: .5s; transition: .5s; } .carousel-pro .media:hover { -webkit-transition: .5s; transition: .5s; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, .05); } .carousel-pro .button { background-color: #FFD100; transition: all .5s ease; box-shadow: 0 3px 8px 0px rgba(39, 39, 39, 0.26); } .carousel-pro .media:hover .button { color: #FFF; background-color: #009FE7; transition: all .5s ease; } .carousel-pro .media-body { padding: 10px 0 0 0 } .carousel-pro .media-body h2 { height: 48px } /* .carousel-pro:hover .owl-nav .owl-next,.carousel-pro:hover .owl-nav .owl-prev{opacity:.6} */ .carousel-pro.dot-center .owl-dots { position: relative; top: 20px; padding: 0; text-align: center; vertical-align: middle; display: inline-block; width: 100% } /* 首页产品 */ /* 首页关于我们 */ .home-about .about_data_area { display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } .home-about .about_data { padding: 30px 20px; cursor: pointer; } .home-about .about_data:hover { box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08); } .home-about .about_data .big { font-size: 28px; color: #00B0FF; font-weight: 500; position: relative; } .home-about .about_data .big .text-jia { position: absolute; top: 0; font-size: 20px; font-weight: 500; } .home-about { background-color: #F5FBFD; background-repeat: no-repeat; background-position: center 50%; background-size: cover } .home-about .padding-large { padding: 20px } .home-about h2 { position: relative; font-size: 20px; font-weight: 600; margin-bottom: 30px; word-break: break-all } .home-about h2:before { content: ''; display: block; position: absolute; background: #00A7F3; width: 30px; height: 3px; bottom: -15px; left: 0; } /* 首页关于我们 */ /* 首页解决方案 */ .solution .media-img { position: relative; overflow: hidden; margin: 5px; } .solution .media-img .mask { opacity: 0; z-index: 3; background: url(../images/solution-hover.png) no-repeat center center; width: 100%; height: 100%; position: absolute; bottom: 0; top: 0; left: 0; right: 0; transition: 0.3s; } .solution .media-img .mask .subtitle { padding: 25px } .solution .media-img .mask .more { position: absolute; bottom: 25px; right: 25px } .solution .media-img:hover .mask { z-index: 5; transition: 0.3s; opacity: 1; transform: scale(1.1); } .solution .media-img .linear-link { z-index: 1; opacity: 1; background: linear-gradient(to bottom, rgba(0, 0, 0, .2) 65%, rgba(0, 0, 0, .8) 100%); width: 100%; height: 100%; position: absolute; bottom: 0; top: 0; left: 0; right: 0; transition: 0.3s; } .solution .media-img .subtitle { padding: 0 10px; z-index: 3; width: 100%; bottom: 10px; left: 0; position: absolute; transition: 0.3s; } .solution .media-img .img-responsive { transition: all 0.2s; } /* .solution .media-img .img-responsive:hover{transform: scale(1.2);} */ .solution_bg { /* background: linear-gradient( 180deg, #4dbcf0 0%, rgba(0,159,231,0) 100%); */ background-image: url(../images/bg_555.jpg); background-size: 100% 100%; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; } .sub_jindian { text-align: left; } .sub_jindian li { display: inline-block; height: 42px; line-height: 42px; ; margin-right: 30px; cursor: pointer; font-size: 16px; } .sub_jindian li.active { border-bottom: 2px solid #009FE7; color: #009FE7; } /* 首页解决方案 */ .cases .owl-item .item a { width: 100%; height: 100%; overflow: hidden; display: block; } /* 首页新闻 */ .home-news-h .media-img { position: relative; } .home-news-h .media-img .post-title { background: rgba(0, 0, 0, .3); bottom: 0px; left: 0px; width: 100%; padding: 10px 10px 0 10px; position: absolute; color: #fff; transition: 0.5s; box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.06) } .home-news-h .media-img:hover .post-title { /* bottom: 20px; */ } .home-news-h .media-img .post-title h3 a { color: #333; font-size: 14px; font-weight: 600; display: block; } .home-news-h .button { margin-top: 1rem; width: 48px; font-size: 16px; background: #00A7F3; color: #fff } .home-news-h .media-img:hover .button { background: #009FE7; color: #fff; } .home-news-c .news-title { margin-top: 15px; margin-left: 15px } .home-news-c .news-title h2 a { font-size: 16px; margin-bottom: 10px; display: block } .home-news-c:hover .news-title h2 a { color: #009FE7 } /* 首页新闻 end */ /* 路径 */ .nav-bread { padding: 0; height: 50px; line-height: 50px; font-size: 0 } .nav-bread h2 { font-size: 18px; font-weight: 600 } .nav-bread a { color: #888888; font-size: 14px; display: inline-block; } .nav-bread a:hover { color: #009FE7 } .nav-bread a:after { content: ""; padding: 0 10px; background: url(../images/nav-bread.png) no-repeat center 50%; } .nav-bread a:last-child:after { content: ""; background: none; } /* 路径 */ /* 上下篇 */ .prenext-pro a.button { height: 50px; line-height: 50px; padding: 0 20px } .prenext-pro a.button:hover { background: #009FE7; color: #fff } .prenext-pro a.border { border: 1px solid #eee } /*分页 begin*/ .pagination li { margin: 0 3px; font-size: 14px; border: none; border-radius: 3px; } .pagination li a, .pagination li .disabled { border-radius: 3px; color: #6e6e6e; background: #fff; padding: 8px 12px; border: 1px solid #DCDCDC; } .pagination li.active a, .pagination li a:hover { background: #009FE7; color: #fff; border: 1px solid #009FE7; } .pagination li .current { background: #009FE7; color: #fff; border-radius: 3px; padding: 7px 11px; border: 1px solid #009FE7; display: inline-block; } /*分页 end*/ /* 标题样式-居中 */ .title-c { position: relative; } .title-c h3 { position: relative; font-size: 20px; text-transform: uppercase; margin: 0 auto; font-weight: 600 } .title-c .dan { width: 90%; margin: 0 auto; opacity: 0.6; font-size: 12px; text-align: center; } /* 标题样式-左 */ .title-l h2 { line-height: 28px; height: 28px; color: #333; position: relative; font-size: 18px; letter-spacing: 0; padding-left: 20px; margin-bottom: 10px; } .title-l h2:before { content: ''; display: block; position: absolute; width: 5px; height: 20px; top: 4px; background: #009FE7; left: 0 } .partners-banner { position: relative; overflow: hidden; display: flex; height: 83px; /* margin-bottom: 20px; */ } .partners-banner .slides-partners { display: flex; flex-shrink: 0; width: 100%; height: 100%; } .partners-banner .slides-partners .slides-wrapper { display: flex; flex-wrap: nowrap; flex-shrink: 0; } .partners-banner .slides-partners .slides-wrapper .slides-brand { width: 100px; height: 53px; margin-right: 45px; } .brandbox1 { width: 100%; } .partners-banner .slides-partners .slides-wrapper .slides-brand .brandbox1 img { width: 100%; height: 100%; } /* 下拉分类 */ .nav-tree { font-size: 0; height: 50px; line-height: 50px; } /*font-size:0去掉 display:inline-block间隔 */ .nav-tree li { position: relative; display: inline-block; } .nav-tree li a { color: #6E6E6E; display: block; padding: 0 15px; font-size: 16px; background: #fff; } .nav-tree li a.active, .nav-tree li a.cur { /* background: #; */ color: #ff9600 } .nav-tree li.focusa a { background: #fff; color: #009FE7; border-bottom-left-radius: 0px; border-bottom-right-radius: 0; } .nav-tree li ul:after { position: absolute; top: -8px; left: 50%; margin-left: -8px; display: inline-block; border-right: 8px solid transparent; border-bottom: 8px solid #fff; border-left: 8px solid transparent; content: ''; } .nav-tree li ul { top: 50px; left: 0; background: #fff; padding: 5px 0; z-index: 99; position: absolute; width: 100%; display: none; border-radius: 0px; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.03); } .nav-tree li ul li { display: block; width: 100%; text-align: left; padding: 5px 0 } .nav-tree li ul li.children a { font-size: 14px; background: #fff; border-radius: 0; box-shadow: none; display: block; color: #6e6e6e; line-height: 24px; height: 24px; } .nav-tree li ul li.children a.active, .nav-tree li ul li.children a:hover { color: #009FE7 } /* .nav-tree li ul li.children:first-child a{border-top-left-radius:0px;border-top-right-radius:0px;} .nav-tree li ul li.children:last-child a{border-bottom-left-radius:5px;border-bottom-right-radius:5px;} */ /* 下拉分类 */ /* 属性 */ .filter-box .padding-big { padding: 5px 15px } .filter-box dl { margin: 10px 0; } .filter-box dl dt { width: 100%; display: block; line-height: 20px; font-weight: normal; margin-bottom: 10px } .filter-box dl dd { width: 100%; display: block; position: relative; } .filter-nav ul li { margin: 0; display: block; float: left; width: auto; line-height: 20px; padding: 5px 0 } .filter-nav ul li a { margin: 0 10px 5px 0; padding: 2px 10px; cursor: pointer; display: block; color: #6E6E6E; transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; } .filter-nav ul li a:hover { color: #009FE7; } .filter-nav ul li a.active { color: #fff; background: #009FE7 } .filter-nav ul li b { font-weight: normal; } /* 分类导航移动端 */ .nav-x { height: 50px; padding: 10px 0 0 0; margin: 0; width: 100%; position: relative; z-index: 6; background: #F7F7F7 } .nav-x ul { clear: both; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, .05) } .nav-x li { float: none !important; width: 100%; } .nav-x li a { font-size: 16px; padding: 0; height: 50px; line-height: 50px; color: #009FE7; background: #fff; text-align: center; display: block; } .nav-x .menu-toggle { background: #009FE7; color: #fff } .nav-x .menu-toggle h3 { display: block; float: right; width: 50%; background: #fff; height: 50px; line-height: 50px; text-align: center; color: #6e6e6e; font-size: 14px; } .nav-x .menu-toggle button { background: #009FE7; z-index: 2; float: left; width: 50%; height: 50px; line-height: 50px; padding: 0; margin: 0; border: none; border-radius: 0; color: #fff; font-size: 18px; text-align: left; text-indent: 12px; } .nav-x .menu-toggle span { font-size: 14px; } .nav-x li a:hover, .nav-x li a.active { color: #fff; background: #009FE7 } /* 分类导航移动端 end*/ /* 新闻列表 */ .list-news { margin-bottom: 10px } .list-news .news { margin-top: 10px; margin-left: 15px; margin-right: 15px } .list-news .news h3 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; /* 设置最大显示行数 */ -webkit-box-orient: vertical; text-overflow: ellipsis; } .list-news .news h3 a { display: block; font-size: 16px; color: #333; margin-bottom: 5px } .list-news:hover h3 a { color: #009FE7 } /* 新闻列表 */ /* 纯文字列表 begin*/ .list-post-text li { padding: 5px 0; } .list-post-text li a { display: block; } .list-post-text li.dot a { padding-left: 15px; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .list-post-text li.dot:hover a:before { background: #009FE7; } /* 纯文字列表 end*/ /* 下载列表 */ .normal-list { min-height: 550px } .normal-list li { position: relative; display: block; line-height: 24px; background: #FFF; margin-bottom: 10px; transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; } .normal-list li a { display: block; padding: 15px 0 15px 30px; font-size: 16px; color: #333; transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; } .normal-list li span { color: #888888; position: absolute; right: 20px; top: 20px } .normal-list li:hover { background: #009FE7; color: #FFF; transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; } .normal-list li:hover a, .normal-list li:hover span { color: #FFF } .normal-list li.dot:hover a:before { background: #fff; } .normal-list li.dot a { position: relative } .normal-list li.dot a:before { content: ''; position: absolute; left: 15px; top: 25px; background: #ececec; width: 7px; height: 7px; border-radius: 50% } /* 下载详细页begin */ .download-detail { position: relative; z-index: 3 } .download-detail .button-big { padding: 15px 25px } /* 下载详细页end */ /* ===视频教程 beign*/ /* ====视频教程列表 begin*/ .video-list .media { -webkit-transition: .5s; transition: .5s; } .video-list .media:hover { box-shadow: 0 30px 50px rgba(229, 229, 229, .8) } .video-list .media-img { position: relative; overflow: hidden } .video-list .media-body .padding-big { padding: 20px } .video-list .media-body h2 { margin: 0 0 20px 0; overflow: hidden } .video-list .media a.play { opacity: .6; position: absolute; top: 50%; left: 50%; margin-left: -24px; margin-top: -24px; width: 48px; height: 48px; line-height: 48px; background: rgba(0, 0, 0, .6); z-index: 2; -webkit-transition: .5s; -o-transition: .5s; transition: .5s } .video-list .media .playtime { position: absolute; bottom: 10px; right: 10px; padding: 0 8px; height: 20px; line-height: 18px; background: rgba(0, 0, 0, .5); z-index: 2; -webkit-transition: .5s; -o-transition: .5s; transition: .5s } .video-list .media:hover a.collect, .video-list .media:hover a.play { opacity: 1; -webkit-transition: .5s; -o-transition: .5s; transition: .5s } .video-list .excerpt-info ul li.v2-1 { width: 50% } .video-list .excerpt-info ul li.v2-2 { width: 50%; } /* 视频教程列表 end*/ /* =====视频内容页 */ .video-detail .tab-head { border-radius: 0; font-size: 0; -webkit-text-size-adjust: none; padding-left: 15px; border-bottom: 1px solid #EFEFEF } .video-detail .tab .tab-nav li { display: inline-block; width: 33%; margin: 0 } /* .video-detail .tab .tab-nav li:last-child {margin-right:0px} */ .video-detail .tab .tab-nav li a { color: #616770; padding: 15px 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; display: block; line-height: 20px; font-weight: 500; border-radius: 0; font-size: 16px; text-align: center; } .video-detail .tab .tab-nav .active { border-radius: 0px; } .video-detail .tab .tab-nav .active a { margin-bottom: -1px; cursor: default; background: #FFF; border-bottom: 2px solid #009FE7; font-weight: 600 } .video-detail .tab .tab-nav li a, .video-detail .tab .tab-nav .active a:focus { outline: none; } .video-detail .tab .tab-body { border-radius: 0; border-top: solid 0px #ebebeb; padding: 25px } /* ======播放器 */ .jw-video-expense { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #616770; z-index: 1; display: none } .jw-video-expense .apply { position: absolute; left: 50%; margin-left: -176px; top: 50%; margin-top: -50px } .jw-video-expense .button { cursor: pointer } .video-period .price { font-size: 32px; margin-top: 5px } .video-buy-now { cursor: pointer; width: 130px; float: right } .video-free-now { width: 130px; padding: 10px 0; float: right } .video-title h1 { font-size: 24px; display: block; } .video-period-title { padding: 10px } .video-period-list { overflow: hidden; height: auto } .video-period-list li { height: 69px; width: 100%; border-bottom: 1px #433D3D solid; position: relative; text-align: left } .video-period-list li a { display: block; padding: 8px 10px 8px 35px } .video-period-list li a.cur { background: #2D2D2D; display: block; } .video-period-list li:hover { background: #2D2D2D; } .video-period-list li p { font-size: 14px; color: #888888; text-overflow: ellipsis; white-space: nowrap; overflow: hidden } .video-period-list li:before { content: ""; position: absolute; width: 20px; height: 13px; left: 10px; top: 15px; background: url(../images/video-ico.png) no-repeat; z-index: 4 } .video-period-list li .video-info { padding-top: 8px; position: relative; color: #616770 } .video-period-list li .video-info span { position: absolute; right: 0; width: 62px; text-align: right } .video-period-list li:last-child { border-bottom: none } .video-content-tit { padding: 5px 30px 0; line-height: 50px; border-bottom: 1px solid #ECEFF5 } .video-content-tit h2 { font-size: 18px; color: #434C5A; border-bottom: 1px solid #434C5A; display: block; width: 72px; margin-bottom: -1px } /* 播放器 end*/ /* 视频内容页end */ /* 视频教程 end*/ /* 横向左图右字列表 begin*/ .list-post-x .media.border { border: 0; border-bottom: 1px solid #ECEFF5; padding-bottom: 20px } .list-post-x .media img { transition: all .3s ease-out } .list-post-x .media .thumb-md { position: relative; max-width: 100px; overflow: hidden } .list-post-x .media .thumb-md .playtime { position: absolute; bottom: 5px; right: 5px; padding: 0 5px; height: 20px; line-height: 18px; background: rgba(0, 0, 0, .6); z-index: 3; -webkit-transition: .5s; -o-transition: .5s; transition: .5s } .list-post-x .media .thumb-md .playicon { position: absolute; bottom: 5px; left: 5px; width: 20px; height: 20px; line-height: 18px } .list-post-x .media:hover img { transition: all .3s ease-out; transform: scale(1.1) } .list-post-x .media.media-x .float-left { margin-right: 15px } .list-post-x .media.media-x .float-right { margin-left: 15px } .list-post-x .media.media-x .media-body { text-align: left; padding: 0 } .list-post-x .media a:hover { color: #434C5A } .list-post-x .media-body p { color: #888888; line-height: 22px } .list-post-x .media:last-child { margin-bottom: 0 } /* 横向上图下字列表 end * /* 内容 begin */ .article { overflow: hidden } .article .padding-large { padding: 20px } .article .post h1 { font-size: 20px; font-weight: 600; } .article .post h2 { font-size: 18px; font-weight: 600; margin: 10px 0 } .article .post h3 { font-size: 16px; font-weight: 600; margin: 10px 0 } .article .post hr { margin: 10px 0; height: 1px } .article .post strong { font-size: 16px; margin: 10px 0 } .article .post .ld-table { width: 100%; margin: 20px auto; padding-bottom: 40px; border: 1px solid #ccc; } .article .post .ld-table td { padding: 10px; border: 1px solid #ccc; } .article .post table { margin: 20px 0 } .article .post table th { background: #daf0fd; color: #fff; border: 1px solid #fff } .article .post table tr.ue-table-interlace-color-single { background: #daf0fd } .article .post p { font-size: 12px; line-height: 20px; margin-bottom: 10px } .article .post h4 { font-size: 12px; } .article .post img { max-width: 100% !important; height: auto !important; } .article .post a { text-decoration: none; } .article .post a:hover {} .article .post .text-right { text-align: right } .article .post ul li { padding: 0 0 5px 20px; position: relative; font-size: 16px } .article .post ul li p { line-height: 24px } .article .post ul li:before { content: ''; position: absolute; top: 8px; left: 0; background: #888888; width: 7px; height: 7px; border-radius: 50% } .article .post ol { padding: 10px 0 0 0 } .article .post ol.list-paddingleft-2 { position: relative } .article .post ol li { padding: 0; position: relative } .article .post ol li p { line-height: 26px; font-size: 16px; color: #888888 } .article .post .zt .lp .lbanner { float: none; width: 100%; } .article .post .zt .lp .proinfo { width: 100%; float: none; padding-top: 20px; } .article .post .zt .yybox { grid-template-columns: auto; } /* 内容 end */ /* 产品列表*/ .product-list .media { -webkit-transition: .3s; transition: .3s; } .product-list .media:hover { -webkit-transition: .3s; transition: .3s; box-shadow: 0 5px 20px 5px rgba(0, 0, 0, .05); } .product-list .media .media-body h2 { height: 46px; line-height: 22px } .product-list .media:hover .media-body h2 a { color: #009FE7; } .price-info ul li.v2-1 { width: 55% } .price-info ul li.v2-2 { width: 45%; } /*产品列表*/ /* 产品详细页begin */ .product-description .padding { padding: 10px } /* 产品详情TAB begin */ .product-overview .tab-head { border-radius: 0; font-size: 0; -webkit-text-size-adjust: none; width: 100%; border-bottom: 1px solid #EFEFEF } .product-overview .tab .tab-nav li { display: inline-block; width: 33%; } .product-overview .tab .tab-nav li a { margin-bottom: -1px; color: #6E6E6E; padding: 15px 0; display: block; line-height: 20px; border: 0; border-radius: 0; font-size: 18px; text-align: center; } .product-overview .tab .tab-nav .active { border-radius: 0px; } .product-overview .tab .tab-nav .active a { cursor: default; color: #009FE7; background: #FFF; border-bottom: 3px solid #009FE7; } .product-overview .tab .tab-nav li a, .product-overview .tab .tab-nav .active a:focus { outline: none; } .product-overview .tab .tab-body { padding: 0; border-radius: 0; border-top: solid 0px #ebebeb; } /* 产品详情TAB END */ /* 放大镜 begin */ #zoomimg { cursor: pointer; display: block } .pro-thumb .item img { border: 1px solid #ececec } .pro-thumb .item:hover img { border: 1px solid #009FE7 } .pro-thumb:hover .owl-nav .owl-prev, .pro-thumb:hover .owl-nav .owl-next { opacity: .6; } /* 放大镜 end */ /* 商品参数 */ .attribute li { position: relative; color: #666; line-height: 32px; } .attribute li:before { content: ''; position: absolute; left: 0px; background: #ccc; width: 6px; height: 6px; top: 11px; border-radius: 50%; } .attribute li span { color: #999 } /* 商品参数 end */ /* 商品详情 */ .content img { max-width: 100% !important; height: auto !important; } /* 商品详情 end */ /* 产品详细页end */ .job-list { transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; } .job-list:hover { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; } .job-list dt { font-weight: normal } /* 弹出层*/ .dialog { border-radius: 0; border: 0 solid #ebebeb; margin: 0 auto; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); } .dialog .dialog-head { font-size: 18px; border-bottom: 0; background: #FFF; color: #383838; border-radius: 0 } .dialog .dialog-head .close { float: right; line-height: 24px } .dialog .dialog-body { padding: 0 20px 30px 20px; } .dialog-body h3 { font-size: 20px; font-weight: 300; color: #333; margin-bottom: 10px } .dialog-body .form-group { padding-bottom: 20px } .dialog-body .input { height: 48px; line-height: 24px; padding: 0 12px; border: 1px solid #ebebeb; width: 100%; display: block; border-radius: 0px; -webkit-appearance: none; box-shadow: 0 0px 0px rgba(0, 0, 0, 0.0) inset; background: transparent; } .dialog-body .textarea { padding: 10px 12px; line-height: 24px; width: 100%; background: transparent; border: 1px solid #ebebeb; } .dialog-body .label { padding-bottom: 10px; display: block; line-height: 24px; } .dialog-body .label label { font-weight: 400; } .dialog-body select { padding: 0 30px 0 8px; color: #ADADAD; border-radius: 0px; width: 100%; height: 48px; line-height: 48px; border: solid 1px #ebebeb; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: url(../images/select-down.png) no-repeat right 50%; } .dialog-body .form-tips .dialog-body .input-help ul { border: solid 0px #ebebeb; background: #fff; padding: 5px 10px; box-shadow: 0 0 0 #fff; width: 150px; min-width: 150px; width: auto; _width: 150px; color: #EE3333; font-size: 12px } .dialog-body .input::-webkit-input-placeholder, .dialog-body .textarea::-webkit-input-placeholder { color: #6E6E6E; } .dialog-body .input:-moz-placeholder, .dialog-body .textarea:-moz-placeholder { color: #6E6E6E; } .dialog-body .input::-moz-placeholder, .dialog-body .textarea::-moz-placeholder { color: #6E6E6E; } .dialog-body .input:-ms-input-placeholder, .dialog-body .textarea:-ms-input-placeholder { color: #6E6E6E; } .dialog-body .input-group .addon { background-color: #fff; border: 0px solid #EBEBEB; border-radius: 0px; line-height: 1; padding: 0; text-align: center } .dialog-body .input-group .addon img { max-height: 50px } .diy-more { display: block; width: 148px; height: 48px; margin: 0 auto; } .diy-more img { width: 100%; height: 100%; } /* 弹出层 end*/ /* 联系我们begin */ .inside h2 { font-size: 20px; font-weight: 400; margin-bottom: 10px } .inside .contact hr { height: 1px; background: #F2F2F2 } .inside .contact .media { margin: 0; padding: 0 0 30px 0; } .inside .contact .media span { width: 24px; height: 24px; line-height: 30px; } .inside .contact .media i { font-size: 24px; } .inside .contact .media .media-body { padding: 0 0 0 10px; margin-top: 0px; } .inside .contact .media .media-body a, .inside .contact .media .media-body p { color: #333; } .inside .wx { border: 1px solid #ebebeb; padding: 20px 30px; } .home-contact { background: url(../images/bg_jdal.jpg); background-size: 100% 100%; } .home-contact .title { position: relative; width: 590px; float: right; text-align: left; } .home-contact .title h2 { font-size: 64px; line-height: 64px; padding-top: 25%; padding-right: 50px; padding-bottom: 30px; } .home-contact .title h2 span { color: #009FE7 } .home-contact .title a { font-size: 24px; text-decoration: none; border-bottom: 2px solid #009FE7; color: #FFF; } .home-contact .title a:hover { border-bottom: 0 solid #82CC37; } /*guestbook*/ .guestbook h2 { font-size: 24px; font-weight: 600; color: #515A6E; } .guestbook h5 { color: #515A6E; line-height: 40px; } .guestbook .form-group { padding-bottom: 20px } .guestbook .input { font-size: 16px; padding: 0 15px; height: 50px; line-height: 50px; width: 100%; display: block; -webkit-appearance: none; transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1) 0s; box-shadow: 0 0px 0px rgba(0, 0, 0, 0.0) inset; border: 1px solid #DCDEE2; } .guestbook .textarea { padding: 12px; line-height: 24px; width: 100%; font-size: 16px; background: #fff; border: 1px solid #DCDEE2; } .guestbook .label { display: block; line-height: 24px; } .guestbook .label label { font-weight: 400; } .guestbook .field { font-size: 16px } .guestbook select { font-size: 16px; padding: 0 35px 0 15px; width: 100%; height: 50px; line-height: 50px; border: 1px solid #DCDEE2; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: #fff url(../images/select-down.png) no-repeat right 50%; color: #666; } .guestbook .form-tips .guestbook .input-help ul { border: 0; background: #fff; padding: 5px 10px; box-shadow: 0 0 0 #fff; border-radius: 0 0 4px 4px; width: 150px; min-width: 150px; width: auto; _width: 150px; color: #EE3333; font-size: 12px } .guestbook .input::-webkit-input-placeholder, .guestbook .textarea::-webkit-input-placeholder { color: #666; font-size: 16px; } .guestbook .input:-moz-placeholder, .guestbook .textarea:-moz-placeholder { color: #666; font-size: 16px; } .guestbook .input::-moz-placeholder, .guestbook .textarea::-moz-placeholder { color: #666; font-size: 16px; } .guestbook .input:-ms-input-placeholder, .guestbook .textarea:-ms-input-placeholder { color: #666; font-size: 16px; } /* 联系我们end */ .channel-banner { height: 210px; position: relative; background-repeat: no-repeat; background-position: center center; background-size: cover; margin: 0; padding: 0; } .channel-banner .banner-info { position: absolute; top: 50%; margin-top: -25px; left: 0; right: 0; z-index: 3 } .channel-banner .banner-info h3 { font-size: 24px; font-weight: 600; position: relative; margin-bottom: 20px } .channel-banner .banner-info h3:before { left: 50%; margin-left: -15px; bottom: -10px; width: 30px; height: 3px; background: #009FE7; content: ''; display: block; position: absolute; } .channel-banner .banner-info p { font-size: 24px; } /* 底部地图版权 begin*/ footer { padding: 30px 0 80px 0; } /* 底部地图版权 end*/ /* 移动端快捷菜单 */ .blank50 { height: 50px; line-height: 50px; clear: both; } #m-b-bar { color: #FFF; width: 100%; height: 50px; position: fixed; bottom: 0; left: 0; z-index: 9; display: block; } #m-b-bar a { width: 100%; color: #F2F2F2; display: block; padding: 5px 0 0 0; line-height: 20px; font-size: 14px; } #m-b-bar a i { font-size: 18px; display: block; color: #fff; } /* 移动端快捷菜单 */ /* 内容详情图片自适应 */ .content img { max-width: 100%; height: auto !important; } /* 产品图集不显示放大效果 */ .product-description div.MagicZoomBigImageCont { display: none !important; } .slides-img .container, .slides-video .container { height: 100%; display: flex; /* 设置为flex布局 */ align-items: center; /* 水平居中对齐 */ } /* 关于我们模版 */ .four-technology { /* padding: 0 10px 0 10px; */ } .four-technology { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .four-technology.two { /* display: grid; grid-gap: 10px; grid-template-columns: 100% 100%; */ } .four-technology .item { width: 95%; /* height: 220px; */ margin-bottom: 20px; padding-bottom: 10px; border: 1px solid #B3D1FA; background: #E4F1FD; transition: all .5s ease; } .four-technology .item:hover { background: #C6E3FC; padding-top: 0px; } .four-technology .item img { width: 80px; height: 80px; } .radius-big2 { border-radius: 12px; } .three-bu { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .three-bu .item { /* height: 500px; */ margin-bottom: 20px; overflow: hidden; position: relative; } .three-bu .item img { object-fit: cover; width: 100%; } .three-bu .item .move { overflow: hidden; position: absolute; bottom: 0px; transition: all .5s ease; width: 100%; height: 155px; } /* .three-bu .item:hover .move{background: linear-gradient(180deg,rgba(0,0,0,0.00) 10%, rgba(0,0,0,.8) 94%); bottom: 0px;} */ .three-recognition { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .three-recognition .item { width: 95%; height: 420px; background: url(../images/recognition-bg.png); margin-bottom: 20px; } .three-recognition .item:hover { box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08); } .three-recognition .item ul li { background: url(../images/list_image.png) no-repeat left; background-size: 16px 16px; padding-left: 30px; line-height: 25px; } .about-main2 { height: 666px; width: 100%; overflow: hidden; } .about-main2 .quxian { width: 100%; } .about-main2 .licheng-bg { width: 100%; height: 100%; position: relative; } .about-main2 .licheng-bg .warper { height: 100%; } .about-main2 .licheng-bg img { height: 518px; position: absolute; bottom: 0px; left: 0; } .about-main2 .ny-title { padding-top: 20px; position: relative; } /* .about-main2 .licheng-content{width: 100%;height: 100%; position: relative;} */ .about-main2 .scale { width: 100%; height: 14px; position: absolute; background: url(../images/scale.png); background-size: 100% 100%; top: 284px; } /* .about-main2 .licheng-content .swiper-wrapper,.about-main2 .licheng-content .swiper-slide,.about-main2 .licheng-content ul{width: calc(100% - 20px);height: 100%;} */ /* .about-main2 .licheng-content ul li{width: 85%;float: left;} */ .swiper-wrapper { display: flex; margin-top: 30px; } .about-main2 .licheng-content .swiper-slide { flex: 1; } .about-main2 .licheng-content ul li a { display: block; width: 100%; position: relative; height: 280px } .about-main2 .licheng-content ul li .date { color: #333; font-size: 30px; } .about-main2 .licheng-content ul li h3 {} .about-main2 .licheng-content ul li.item1 .cl-line, .about-main2 .licheng-content ul li.item3 .cl-line, .about-main2 .licheng-content ul li.item5 .cl-line { margin-bottom: 30px; } .about-main2 .licheng-content ul li.item2 .cl-line, .about-main2 .licheng-content ul li.item4 .cl-line { margin-top: 36px; } .about-main2 .licheng-content ul li.item1 .cl-line:after, .about-main2 .licheng-content ul li.item3 .cl-line:after, .about-main2 .licheng-content ul li.item5 .cl-line:after { width: 10px; height: 10px; background-color: #333; display: block; content: ""; border-radius: 50%; text-align: center; vertical-align: middle; position: absolute; } .about-main2 .licheng-content ul li.item2 .cl-line:before, .about-main2 .licheng-content ul li.item4 .cl-line:before { width: 10px; height: 10px; background-color: #333; display: block; content: ""; border-radius: 50%; text-align: center; vertical-align: middle; position: absolute; } .about-main2 .licheng-content ul li .lc-left { position: absolute; left: 50%; top: 50px; margin-left: -34px; } .about-main2 .licheng-content ul li .cl-line { display: block; position: relative; left: 40px; } .about-main2 .licheng-content ul li .lc-right { position: absolute; width: 560px; height: 100%; display: table; } .about-main2 .licheng-content ul li.item5 .lc-right { width: 200px; } .about-main2 .licheng-content ul li.item2 .lc-right, .about-main2 .licheng-content ul li.item4 .lc-right { width: 100%; } .about-main2 .licheng-content ul li .lc-right .right-text { margin: 10px; padding: 20px; vertical-align: middle; background: rgba(255, 255, 255, .6); border-radius: 8px; height: 220px; } .about-main2 .licheng-content ul li.item1 a { top: 70px; } .about-main2 .licheng-content ul li.item1 .lc-left .cl-line:after { bottom: -22px; left: -7px; } .about-main2 .licheng-content ul li .lc-right .right-text h3 { font-size: 16px; } .about-main2 .licheng-content ul li .lc-right .right-text p { font-size: 12px; } .about-main2 .licheng-content ul li.item2 a { top: 63px; } .about-main2 .licheng-content ul li.item2 .lc-left .cl-line:before { top: 23px; left: -7px; } .about-main2 .licheng-content ul li.item2 .lc-right { top: 170px; } .about-main2 .licheng-content ul li.item3 a { top: 70px; } .about-main2 .licheng-content ul li.item3 .lc-left .cl-line:after { bottom: -22px; left: -7px; } .about-main2 .licheng-content ul li.item3 .lc-right {} .about-main2 .licheng-content ul li.item4 a { top: 203px; } .about-main2 .licheng-content ul li.item4 .lc-left .cl-line:before { top: 23px; left: -7px; } .about-main2 .licheng-content ul li.item4 .lc-right { top: 170px; } .about-main2 .licheng-content ul li.item5 a { top: 99px; } .about-main2 .licheng-content ul li.item5 .lc-left .cl-line:after { bottom: -22px; left: -7px; } .about-main2 .licheng-content ul li.item5 .lc-right { bottom: 170px; } .about-main2 .licheng-content .right-text h3 { font-size: 16px; margin-bottom: 10px; color: #333; font-weight: bold; } .about-main2 .licheng-content .right-text p { font-size: 14px; } .lc-swiper-btn { width: 100px; position: absolute; top: 34px; right: 10px; z-index: 2; } .lc-swiper-btn a { display: block; position: absolute; } .lc-swiper-btn .btn-prev { position: absolute; left: 15px; top: 50px; cursor: pointer; } .lc-swiper-btn .btn-next { position: absolute; right: 0; top: 50px; cursor: pointer; } .lc-swiper-btn .iconfont { font-size: 30px; } .post .x12 .advantage { display: grid; grid-gap: 10px; grid-template-columns: 100% 100%; } .ldwidth-video { /* background-color: #eaf5ff; */ border-radius: 16px; width: 100%; } .ldwidth-video video { width: 100%; height: 230px; border-radius: 16px; background-color: #000; box-shadow: 0px 5px 20px -5px rgba(0, 0, 0, 0.48); } /* 文字渐变样式(你上面用到的) */ .text-gradient { background: linear-gradient(159deg, #ffffff 36%, #00e1ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .btn-join { display: inline-flex; align-items: center; gap: 12px; padding: 4px 20px; font-size: 14px; color: #ffffff; /* 胶囊圆角 */ border-radius: 999px; background-color: #0f5b9c; /* 青蓝色外描边+发光,模拟图中淡青色外圈 */ box-shadow: 0 0 0 2px #40c8e8; text-decoration: none; transition: all 0.25s ease; } .btn-join img { width: 18px; height: 18px; } .btn-join:hover { background-color: #0b487c; box-shadow: 0 0 0 2px #58d4f0, 0 0 12px rgba(64, 200, 232, 0.45); } /* 产品卡片模块 */ /* ===== 外层:所有产品卡片的大网格 ===== */ .product-section { padding: 20px 0px; background-color: #f6fcff; } .section-title { text-align: center; font-size: 42px; color: #222; font-weight: 600; } .product-grid { display: grid; /* 原图是2列布局 */ grid-template-columns: 1fr 1fr; gap: 24px; } /* 第一个卡片【边缘压缩前端】跨2列 */ .product-card.card-colspan-2 { grid-column: 1 / -1; } /* ===== 卡片内部:产品图片横向排列,用flex,不是grid ===== */ .product-item-row { display: flex; justify-content: center; gap: 24px; } .product-item-row2 { display: flex; justify-content: center; gap: 24px; } /* 右侧垂直堆叠容器,内部两个卡片上下排列 */ .product-right-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 24px; } .product-card { background: linear-gradient(180deg, #EAF5FF 0%, #B9D8FE 100%); border-radius: 24px; padding: 20px; } .card-title { font-size: 28px; font-weight: bold; color: #111; margin: 0 0 8px; text-align: center; } .card-sub { font-size: 10px; color: #333; text-align: center; margin: 0 0 24px; } .product-item { text-align: center; } .product-img-wrap { height: 60px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; } .product-img-wrap img { max-width: 90%; max-height: 90%; object-fit: contain; } .product-name { font-size: 10px; color: #222; } /* 移动端 */ @media (max-width:768px) { .product-grid { grid-template-columns: 1fr; } .card-colspan-2 { grid-column: span 1; } .card-title { font-size: 22px; } } /* 合作权益模块 */ .cooperate-grid { display: grid; gap: 12px; } /* 合作权益卡片文字覆盖层 */ .cooperate-item { position: relative; border-radius: 16px; overflow: hidden; } .cooperate-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .cooperate-item-mask { position: absolute; inset: 0; /* ✅ 上下+水平居中 */ display: flex; flex-direction: column; justify-content: center; padding: 10px 12px; color: #fff; } .cooperate-tag { display: inline-block; font-size: 14px; font-weight: bold; } .cooperate-item-mask h4 { font-size: 18px; margin-bottom: 6px; font-weight: bold; } .cooperate-item-mask p { font-size: 10px; line-height: 1.55; opacity: 0.92; margin: 0; } /* 手机端自适应 */ @media (max-width: 768px) { .cooperate-item { height: 220px; } .cooperate-tag { font-size: 18px; font-weight: bold; } .cooperate-item-mask h4 { font-size: 18px; font-weight: bold; } .cooperate-item-mask p { font-size: 10px; } } .cooperate-tip { background: #E0EEFE; padding: 16px; border-radius: 12px; margin-top: 20px; color: #0B45AB; font-size: 12px; } .partner-section { background-color: #f6fcff; } .partner-title { text-align: center; font-size: 42px; color: #222; padding: 24px 0; font-weight: 600; } .partner-box { background: #4285f4; border-radius: 32px; padding: 40px 50px; color: #fff; } .partner-item { display: grid; grid-template-columns: 80px 180px 1fr; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.25); gap: 10px; } /* 最后一条取消底部分隔线 */ .partner-item:last-child { border-bottom: none; } .partner-icon { display: flex; align-items: center; justify-content: center; } .partner-icon img { width: 60px; height: 60px; } .partner-name { font-size: 16px; font-weight: 500; } .partner-desc { font-size: 12px; line-height: 30px; } .partner-join { text-align: center; padding: 4px 12px; background-color: #4285f4; border-radius: 99px; cursor: pointer; color: #fff; font-size: 10px; } /* 移动端适配 */ @media (max-width:768px) { .partner-title { font-size: 28px; } .partner-box { padding: 24px 20px; border-radius: 20px; } .partner-item { grid-template-columns: 40px 1fr; grid-template-rows: auto auto; gap: 10px; } .partner-icon { width: 36px; height: 36px; } .partner-name { font-size: 16px; } .partner-desc { font-size: 12px; grid-column: 1 / -1; } } .bandwidth-video { border-radius: 8px; margin: 10px auto; } .bandwidth-video #bandvideo { border-radius: 8px; } .bandwidth-video #recruitvideo { border-radius: 8px; } .bandwidth-box { display: flex; justify-content: space-between; align-items: flex-end; } .bandwidth-box .bandwidth-item { padding: 10px; background-color: #eaf5ff; color: #000; height: 83px; } .bandwidth-box .bandwidth-item p { color: #333; } .bandwidth-box .bandwidth-item .bandwidth-img img { height: 20px !important; } .bandwidth-box .active_band { background-color: #458AED; border-radius: 8px 8px 0 0 !important; color: #fff; height: 86px; } .bandwidth-box .active_band p { color: #fff; } .recruit-box { display: flex; justify-content: space-between; align-items: flex-end; } .recruit-box .recruit-item { padding: 10px; background-color: #eaf5ff; color: #000; height: 83px; cursor: pointer; } .recruit-box .recruit-item p { color: #333; } .recruit-box .recruit-item .recruit-img img { height: 20px !important; } .recruit-box .active_band { background-color: #458AED; border-radius: 8px 8px 0 0 !important; color: #fff; height: 86px; } .recruit-box .active_band p { color: #fff; } .vision-core { width: 28%; line-height: 24px; position: absolute; left: 37.5%; top: 15%; color: #fff; font-size: 16px; font-weight: 500; } .vision-core .vision-core-img { width: 42px !important; } .vision-core .vision-core-title { margin-top: 14px; font-size: 12px; } .vision-adv { padding: 50px 220px 0 120px; } .vision-tech { width: 80%; line-height: 30px; position: absolute; left: 8%; top: 12%; } .vision-tech .vision-tech-img { width: 48px; } .vision-tech .vision-tech-title { margin-top: 10px; font-size: 16px; font-weight: 600; } .vision-tech2 { width: 80%; line-height: 50px; position: absolute; left: 10%; top: 10%; } .vision-tech2 .vision-tech2-title { margin-top: 10px; font-size: 25px; font-weight: 500; } .vision-scene { padding: 0 12px; } .vision-scene h3 { font-size: 18px !important; } .vision-scene .p-text { font-size: 8px !important; } @media(max-width:760px) { .slides-img { height: 260px } .slogan .small { font-size: 12px; line-height: 20px; margin: 16px 0 0 0; opacity: 1; letter-spacing: 1.5px; } .slogan .big { font-size: 20px; letter-spacing: 1.5px; } .cockpit-video video { width: 100%; height: 420px; } } @media(min-width:760px) { .slides-img { height: 260px } .slogan .small { font-size: 12px; line-height: 20px; margin: 14px 0 0 0; opacity: 1; } .slogan .big { font-size: 20px; } .cockpit-video video { width: 100%; height: 420px; } } .cockpit-bu { display: flex; flex-direction: column; gap: 20px; } .cockpit-bu .item { overflow: hidden; position: relative; } .cockpit-bu .item img { object-fit: cover; width: 100%; } .cockpit-bu .item .move { overflow: hidden; position: absolute; bottom: -90px; transition: all .5s ease; width: 100%; height: 155px; background: linear-gradient(180deg, rgba(89, 120, 234, 0.00), #5978ea 60%); } .cockpit-bu .item .move p { color: #fff !important; } .cockpit-bu .item:hover .move { background: linear-gradient(180deg, rgba(89, 120, 234, 0.00), #5978ea 60%); bottom: 0px; } .cockpit { width: 100%; position: absolute; left: 0; bottom: 10%; color: #fff; font-size: 12px; } .page-wrapper { max-width: 1200px; } /* 顶部标签样式 */ .top-tabs { display: flex; justify-content: center; gap: 25px; margin-bottom: 30px; } .top-tab { cursor: pointer; color: #333; font-size: 14px; font-weight: 600; padding: 8px 0; } .top-tab.active { color: #2394FE; } /* 主体内容布局 */ .main-container { display: flex; background: #E8EEF0; padding: 5px; border-radius: 8px; flex-direction: column; } /* 左侧子导航 */ .left-subtabs { min-width: 180px; display: none; justify-content: center; gap: 10px; } .left-subtabs.active { display: flex; } .subtab-item { text-align: center; padding: 10px; margin-bottom: 8px; border-radius: 8px; cursor: pointer; transition: background 0.3s; color: #333; font-size: 10px; } .subtab-item.active { background: #CEE5EC; } /* 右侧内容区 */ .content-area { flex: 1; min-width: 0; } .content-item { display: none; } .content-item.active { display: block; } .content-item img { width: 100%; height: auto; border-radius: 4px; margin-bottom: 16px; } .content-desc { color: #666; font-size: 14px; line-height: 1.8; } .content-item video { width: 100%; height: 200px; background-color: #000; } .cockpit-box { display: flex; justify-content: center; gap: 24px; margin-bottom: 42px; flex-wrap: wrap; } .cockpit-item { width: 25%; height: 50px; background-color: #d6e6ec; border-radius: 10px; color: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; } .cockpit-item .title { font-size: 16px; font-weight: bold; margin-bottom: 5px } .cockpit-item .subtitle { font-size: 10px; font-weight: bold; } .cockpit-video video { width: 100%; height: 240px; } .cockpit2 { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 20px; font-weight: 500; } .cockpit-core-title { margin-top: 10px; line-height: 28px; letter-spacing: 1.2px; width: 80%; font-size: 10px; }