/* 引入字体 */ @font-face { font-family:"SourceHanSansCN-Medium"; src: url(../fonts/SourceHanSansCN-Medium.otf); } @font-face { font-family:"Roboto-Bold"; src: url(../fonts/Roboto-Bold.ttf); } .wap-show{ display: none; } /* 轮播样式 */ .banner-swiper { overflow-x: hidden; height: 575px; position: relative; background-color: #FFFFFF; } .banner-swiper .swiper-slide { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; } .banner-title{ color: #FFFFFF; position: absolute; left: 50%; bottom: 40%; transform: translateX(-50%); text-align: center; z-index: 1; } .banner-title h2{ width: 100%; font-family: "SourceHanSansCN-Medium"; font-size: 60px; line-height: 1.6; font-weight: normal; } .banner-title h2>span{ font-family: "Roboto-Bold"; font-size: 90px; line-height: 96px; background-image:-webkit-linear-gradient(90deg,#f6ab00,#FFFFFF); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin: 0 8px; /* text-shadow:rgba(0,0,0,0.16) 0 3px 7px; */ } .banner-title p{ display: flex; } .banner-title p strong{ font-size: 26px; line-height: 1.5; font-weight: normal; margin: 0 10px; } .banner-title p>em{ display: flex; align-items: center; } .banner-title p>em ins{ display: block; width: 140px; height: 1px; background-color: rgba(255,255,255,0.7); } .banner-title p>em span{ display: block; width: 9px; height: 9px; background-color: #FFFFFF; border-radius: 100%; } /* 分页器 */ .banner-swiper .swiper-container-horizontal>.swiper-pagination-bullets, .banner-swiper .swiper-pagination-custom, .banner-swiper .swiper-pagination-fraction{ font-size: 16px; font-weight: bold; color: #fff !important; bottom: 120px; } /* 指示点默认样式 */ .banner-swiper .swiper-pagination-bullet { width: 13px; height: 13px; background-color: #d5ddf5; margin: 0 6px !important; opacity: 1; } .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active{ background-color: #f6ab00; } /* 首页 */ .index-title{ text-align: center; } .index-title>h2{ font-size: 36px; line-height: 1.5; } .index-title>p{ font-size: 16px; line-height: 2; opacity: .8; } .compose-bg{ background-image: url(../imgs/compose-bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } .compose{ padding: 52px 0 60px; } .compose-list{ display: flex; flex-wrap: wrap; margin-top: 15px; } .compose-list li{ width: 31.8%; padding: 30px; background-color: #FFFFFF; margin-right: 2.3%; border-radius: 10px; text-align: center; margin-top: 2.3%; transition: all .6s; } .compose-list li:nth-of-type(3n){ margin-right: 0; } .compose-list li span{ display: block; margin-bottom: 18px; } .compose-list li span>img{ max-width: 80%; height: 88px; margin: 0 auto; } .compose-list li h3{ font-size: 18px; line-height: 2; transition: all .6s; } .compose-list li ins{ display: block; width: 34px; height: 2px; background-color: #1a73e8; margin: 5px auto 13px; transition: all .6s; } .compose-list li p{ font-size: 14px; color: #636363; line-height: 1.8; } .compose-list li:hover, .expand li:hover, .discern li:hover{ box-shadow: 0 0 21px 5px rgba(0,104,183,0.1); transition: all .6s; } .compose-list li:hover h3{ color: #1a73e8; transition: all .6s; } .compose-list li:hover ins{ background-color: #f6ab00; transition: all .6s; } .compose-list li:last-child{ display: flex; justify-content: center; align-items: center; } .compose-more{ text-align: center; } .compose-more img{ height: 15px; margin: 0 auto; } .compose-more strong{ display: block; font-size: 22px; line-height: 2; margin: 20px 0 12px; } .compose-more>a{ font-size: 14px; color: #1A73E9; line-height: 44px; padding: 0 50px; border: 1px solid #1A73E9; border-radius: 22px; } /* .compose-list li .compose-more>a:hover{ background-color: #f6ab00; border: 1px solid #f6ab00; color: #FFFFFF; transition: all .6s; } */ /* 芯片供货保障 */ .guarantee-bg{ padding-top: 44px; } .guarantee{ display: flex; justify-content: space-between; padding: 40px 0 43px; } .guarantee li{ width: 31.8%; } .guarantee li>a{ display: flex; justify-content: center; align-items: center; } .guarantee li:hover .guarantee-txt p{ color: #1A73E9; transition: all .6s; } /* 语音合成拓展 */ .expand-bg{ padding: 53px 0 60px; background-image: url(../imgs/expand-bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } .expand-bg .index-title, .case-bg .index-title{ color: #FFFFFF; } .expand, .discern{ display: flex; margin-top: 40px; } .expand li, .discern li{ width: 31.8%; padding: 20px 15px; background-color: #FFFFFF; border-radius: 10px; margin-right: 2.3%; } .expand li:nth-of-type(3n), .discern li:nth-of-type(3n){ margin-right: 0; } .expand li:hover{ box-shadow: 0 0 21px 5px rgba(198,198,198,0.2); transition: all .6s; } .expand-txt .more{ padding-top: 14px; border-top: 1px solid #f0f1f2; margin-top: 15px; overflow: hidden; } .expand-txt .more>a{ width: 105px; line-height: 36px; font-size: 13px; background-color: #efefef; border-radius: 18px; text-align: center; float: right; } .expand li:hover .more>a{ color: #FFFFFF; background-color: #1A73E8; } /* 语音识别 */ .discern-bg{ padding: 53px 0 60px; background-color: #f5f7fa; } .discern li{ padding: 20px 40px; text-align: center; box-shadow: 0 0 21px 5px rgba(198,198,198,0.2); } .discern li .discern-img{ margin-bottom: 20px; } .discern li .discern-img img{ margin: 0 auto; } .discern li ins, .case li ins{ margin: 5px auto 13px; } /* 语音解决方案 */ .case-bg{ padding: 53px 0 60px; background-image: url(../imgs/case-bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } .case{ display: flex; flex-wrap: wrap; margin-top: 15px; } .case li{ width: 23.275%; padding: 23px; background-color: #FFFFFF; margin: 2.3% 2.3% 0 0; border-radius: 10px; text-align: center; } .case li:nth-of-type(4n){ margin-right: 0; } .case li .case-img{ margin: 0 auto 15px; } /* 数据产品 */ .product-bg{ padding: 53px 0 60px; background-image: url(../imgs/product-bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } .product-item{ display: flex; justify-content: space-between; border: 1px solid #edeff2; border-radius: 10px 10px 0 0; margin-top: 45px; overflow: hidden; } .product-item li{ display: flex; justify-content: center; align-items: center; width: 100%; background-color: #FFFFFF; line-height: 55px; font-size: 18px; font-weight: bold; text-align: center; cursor: pointer; } .product-item li img{ height: 30px; margin-right: 12px; } .product-item li:nth-of-type(2){ border-left: 1px solid #edeff2; border-right: 1px solid #edeff2; } .product-item li.active{ background-color: #1a73e8; color: #FFFFFF; } .product-item li.active img{ -webkit-filter: invert(100%) grayscale(100%) brightness(1000%); -moz-filter: invert(100%) grayscale(100%) brightness(1000%); -ms-filter: invert(100%) grayscale(100%) brightness(1000%); -o-filter: invert(100%) grayscale(100%) brightness(1000%); filter: invert(100%) grayscale(100%) brightness(1000%); transition: all .6s; } .product-list{ padding: 20px 16px 20px 30px; background-color: #f4f6f7; border: 1px solid #edeff2; border-top: 0; border-radius: 0 0 10px 10px; overflow: hidden; } .product-list li{ display: none; } .product-list li.cur{ display: flex; justify-content: space-between; } .product-left{ width: calc(96% - 260px); display: flex; flex-wrap: wrap; } .product-left .product-describe{ width: 100%; display: flex; justify-content: space-between; } .product-describe .describe{ width:calc(100% - 120px); } .product-describe .more{ display: block; width: 105px; height: 36px; margin-top: 40px; font-size: 13px; line-height: 36px; text-align: center; background-color: #e5e5e5; border-radius: 18px; opacity: .8; } .product-describe h3, .product-txt h3{ font-size: 18px; line-height: 2; color: #1a73e8; } .product-describe ins, .product-txt ins{ display: block; width: 34px; height: 2px; background-color: #f6ab00; margin: 5px 0 13px; } .product-describe p, .product-txt p{ font-size: 14px; line-height: 1.8; } .product-sub-list{ width: 100%; display: flex; justify-content: space-between; margin-top: 50px; } .product-sub-list>div{ width: 29%; } .product-sub-list>div:last-child{ width: 25%; } .product-right{ width: 260px; border-radius: 10px; overflow: hidden; } .product-right img{ width: 260px; min-height: 100%; } /* 公司介绍 */ .about-bg{ padding: 53px 0 60px; background-image: url(../imgs/about-bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } .about{ margin-top: 35px; } .about span{ display: block; font-size: 16px; line-height: 1.8; text-align: center; margin-bottom: 20px; } .about-item{ width: 100%; display: flex; justify-content: center; margin-top: 40px; } .about-item li{ width: 17%; text-align: center; } .about-item li strong{ display: block; font-size: 34px; line-height: 1.5; color: #1a73e8; } .about-item li p{ font-size: 14px; line-height: 1.5; opacity: .8; } .about-item li:last-child{ width: 25%; } .about .more, .news-bg .more{ display: block; width: 144px; border: 1px solid #1a73e8; border-radius: 23px; margin: 50px auto 0; font-size: 16px; color: #1a73e8; text-align: center; line-height: 46px; } /* 公司动态 */ .news-bg{ padding: 53px 0 35px; background-color: #f5f7fa; } .news{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 15px; } .news li{ width: 48.85%; padding: 18px 20px; background-color: #FFFFFF; margin-top: 2.3%; } .news li>a{ display: flex; justify-content: space-between; } .news li .news-time{ width: 56px; } .news li .news-time strong{ display: block; font-size: 22px; line-height: 1.6; text-align: right; transition: all .6s; } .news li .news-time em{ display: block; font-size: 14px; line-height: 2; color: #5e5e5e; text-align: right; transition: all .6s; } .news li .news-txt{ width: calc(100% - 74px); } .news li .news-txt h3{ font-size: 18px; line-height: 2; font-weight: normal; transition: all .6s; } .news li .news-txt p{ font-size: 14px; line-height: 1.8; opacity: .7; } .news li:hover .news-txt h3{ color: #1a73e8; text-decoration: underline; } .news li:hover .news-time strong, .news li:hover .news-time em{ color: #1a73e8; transition: all .6s; } /* 产品展示页面 */ .pull-banner{ height: 574px; position: relative; } .pull-banner>img{ width: 100%; min-height: 574px; } .banner-content{ display: flex; justify-content: space-between; align-items: center; position: absolute; left: 50%; top:50%; transform: translate(-50%,-42%); } .banner-content .banner-txt{ width: calc(100% - 370px); color: #FFFFFF; } .banner-content .banner-txt strong{ display: block; font-size: 42px; line-height: 1.2; } .banner-content .banner-txt h1{ font-size: 48px; line-height: 1.5; } .banner-content .banner-txt p{ font-size: 22px; line-height: 1.5; margin-top: 10px; } .banner-content .banner-img img{ height: 370px; } /* 子导航 */ .product-nav{ background-color: #FFFFFF; } .product-nav-item{ display: flex; } .product-nav-item li{ font-size: 16px; line-height: 58px; margin-right: 60px; border-bottom: 2px solid #FFFFFF; cursor: pointer; } .product-nav-item li.active{ border-bottom: 2px solid #1a73e8; } .product-nav-item li:last-child{ margin: 0; } /* 标题 */ .pull-title{ text-align: center; } .pull-title h2{ display: flex; justify-content: center; align-items: center; } .pull-title h2>em{ display: inline-block; width: 77px; height: 24px; background-image: url(../imgs/icon/title-right.png); background-repeat: no-repeat; background-size: 100%; } .pull-title h2>em:first-child{ background-image: url(../imgs/icon/title-left.png); } .pull-title h2>p{ font-size: 36px; line-height: 1.5; font-weight: normal; margin: 0 14px; } .pull-title span{ display: block; font-family: arial; font-size: 18px; line-height: 1.8; opacity: .8; text-transform:uppercase; } .pull-title span.about-span{ font-size: 22px; margin-top: 4px; } .experience-bg{ padding: 50px 0; background-image: url(../imgs/product-bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } .experience{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 15px; } .experience li{ width: 48.85%; padding: 20px 20px 5px; background-color: #FFFFFF; margin-top: 2.3%; border-radius: 10px; box-shadow: 0 0 21px 6px rgba(198,198,198,0.2); } .experience-top{ display: flex; align-items: center; padding-bottom: 18px; } .experience-top .title-img img{ height: 38px; margin-right: 12px; } .experience-top .title-img img:first-child{ display: block; transition: all .6s; } .experience-top .title-img img:last-child{ display: none; transition: all .6s; } .experience-top h3{ font-size: 18px; line-height: 1.5; transition: all .6s; } .experience-top ins{ display: block; width: 34px; height: 2px; background-color: #1a73e8; margin-top: 5px; transition: all .6s; } .experience-txt{ display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-top: 1px solid #eaeaea; } .experience-txt>p{ width: calc(100% - 80px); font-size: 14px; line-height: 1.8; text-align: justify; } .experience-txt .experience-audio{ width: 50px; } .experience li:hover .experience-top h3{ color: #1a73e8; transition: all .6s; } .experience li:hover{ box-shadow: 0 0 21px 5px rgba(0,104,183,0.1); } .experience li:hover .experience-top ins{ background-color: #f6ab00; transition: all .6s; } .experience li:hover .experience-txt .experience-audio em{ } .experience li:hover .experience-top .title-img img:first-child{ display: none; transition: all .6s; } .experience li:hover .experience-top .title-img img:last-child{ display: block; transition: all .6s; } .experience-txt audio{ position: fixed; left: -100px; width: 0; height: 0; opacity: 0; } .experience-txt .play-btn{ display: block; width: 50px; height: 50px; background: none; border: 0; border-radius: 100%; background-image: url(../imgs/icon/icon-play.png); background-repeat: no-repeat; background-size: 35px 35px; background-position: top center; } .experience-txt .experience-audio em{ display: block; font-size: 12px; line-height: 2; margin-top: 35px; } .experience-txt .play-btn.active{ background-image: url(../imgs/icon/icon-suspend.png); } .experience-txt .play-btn.active em{ color: #1a73e8; } /* 功能介绍 */ .function-bg{ padding: 50px 0; } .function{ display: flex; margin-top: 40px; } .function li{ width: 31.8%; padding: 23px 20px; background-color: #f2f4f7; border-radius: 10px; margin-right: 2.3%; text-align: center; border: 1px solid #f2f4f7; cursor: pointer; } .function li:nth-of-type(3n){ margin-right: 0; } .function-img{ margin: 0 auto 12px; } .function-img span{ display: flex; align-items: center; } .function li ins{ margin: 5px auto 13px; } .function li:hover{ background-color: #FFFFFF; border: 1px solid #b1cff7; transition: all .6s; } .function li:hover p{ color: #262626; transition: all .6s; } /* 产品优势 */ .advantage-bg{ padding: 50px 0; background-image: url(../imgs/expand-bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } .advantage-bg .pull-title{ color: #FFFFFF; } .advantage{ display: flex; flex-wrap: wrap; margin-top: 20px; } .advantage li{ width: 31.8%; padding: 15px 20px; background-color: #FFFFFF; border-radius: 10px; margin: 2.3% 2.3% 0 0; border: 1px solid #f2f4f7; box-shadow: 0 0 21px 5px rgba(198,198,198,0.2); cursor: pointer; } .advantage li:nth-of-type(3n){ margin-right: 0; } .advantage-img span{ display: flex; align-items: center; } .advantage-img img{ margin: 0 auto; } .advantage li:hover p{ color: #262626; transition: all .6s; } /* 应用场景 */ .scene-bg{ padding: 50px 0; background-color: #f5f7fa; } .scene{ background-color: #FFFFFF; border-radius: 10px; border: 1px solid #edeff2; overflow: hidden; margin-top: 40px; } .scene-item{ display: flex; justify-content: space-between; border-bottom: 1px solid #edeff2;; } .scene-item li{ display: flex; justify-content: center; align-items: center; width: 16.8%; font-size: 18px; font-weight: bold; line-height: 56px; border-left: 1px solid #edeff2; transition: all .6s; cursor: pointer; } .scene-item li:first-child{ border: 0; } .scene-item li img{ height: 27px; margin-right: 10px; } .scene-item li.active{ background-color: #1a73e8; color: #FFFFFF; transition: all .6s; } .scene-item li.active img{ -webkit-filter: invert(100%) grayscale(100%) brightness(1000%); -moz-filter: invert(100%) grayscale(100%) brightness(1000%); -ms-filter: invert(100%) grayscale(100%) brightness(1000%); -o-filter: invert(100%) grayscale(100%) brightness(1000%); filter: invert(100%) grayscale(100%) brightness(1000%); transition: all .6s; } .scene-list{ padding: 30px; } .scene-list li{ display: none; } .scene-list li.cur{ display: flex; justify-content: space-between; align-items: center; } .scene-txt{ width: calc(100% - 320px); } .scene-txt h3{ font-size: 20px; line-height: 2; transition: all .6s; } .scene-txt ins{ display: block; width: 34px; height: 2px; background-color: #1a73e8; margin: 5px 0 13px; transition: all .6s; } .scene-txt p{ font-size: 14px; color: #262626; line-height: 1.8; } .scene-img{ width: 300px; height: 184px; border-radius: 10px; overflow: hidden; } .scene-img img{ width: 300px; min-height: 184px; } /* 产品定价 */ .price-bg{ padding-top: 50px; } .price{ display: flex; align-items: center; min-height: 340px; background-color: #FFFFFF; margin-top: 40px; border: 1px solid #edeff2; } .price img{ width: 100%; } .price>span{ margin-left: 9.3%; font-size: 15px; opacity: 0.5; } /* 开发者文档 */ .developer-bg{ padding: 50px 0; } .developer{ display: flex; flex-wrap: wrap; margin-top: 20px; } .developer li{ width: 31.8%; background-color: #FFFFFF; border: 1px solid #e7e7e7; padding: 25px; border-radius: 10px; margin: 2.3% 2.3% 0 0; } .developer li>a{ display: flex; align-items: center; } .developer li:nth-of-type(3n){ margin-right: 0; } .developer-img img{ height: 50px; margin-right: 25px; } .developer-img img:first-child{ display: block; transition: all .6s; } .developer-img img:last-child{ display: none; transition: all .6s; } .developer-txt h3{ font-size: 18px; } .developer-txt ins{ margin: 5px 0; } .developer-txt p{ font-size: 15px; } .developer li:hover{ border: 1px solid #FFFFFF; box-shadow: 0 0 21px 5px rgba(0,104,183,0.1); } .developer li:hover .developer-img img:first-child{ display: none; transition: all .6s; } .developer li:hover .developer-img img:last-child{ display: block; transition: all .6s; } /* 新闻中心 */ .pull-sub-nav{ height: 100px; background-color: #FFFFFF; box-shadow: 0 0 21px 5px rgba(120,120,120,0.1); margin-top: -50px; border-radius: 10px; position: relative; z-index: 1; } /* 子导航 */ .sub-nav-item{ display: flex; justify-content: center; } .sub-nav-item li{ display: flex; justify-content: center; flex-wrap: wrap; width: 66px; text-align: center; border-bottom: 2px solid #FFFFFF; cursor: pointer; } .news-nav-item li{ margin: 0 160px; } .sub-nav-item li p{ font-size: 16px; line-height: 2; margin: 8px 0; width: 100%; } .sub-nav-item li .nav-img{ margin-top: 17px; } .sub-nav-item li .nav-img img{ height: 33px; } .sub-nav-item li .nav-img img:first-child{ display: block; } .sub-nav-item li .nav-img img:last-child{ display: none; } .sub-nav-item li.active{ border-bottom: 2px solid #1a73e8; } .sub-nav-item li.active .nav-img img:first-child{ display: none; } .sub-nav-item li.active .nav-img img:last-child{ display: block; } .sub-nav-item li.active p{ color: #1a73e8; font-weight: bold; } /* 背景 */ .news-content-bg{ padding: 100px 0 55px; background-color: #f5f7fa; background-image: url(../imgs/news-bg.jpg); background-repeat: no-repeat; background-position: top center; background-size: 100% auto; } .news-list{ margin-top: 20px; } .news-list li{ width: 100%; padding: 20px; margin-top: 2%; background-color: #fcfdfe; } .news-list li>a{ display: flex; justify-content: space-between; } .news-list li .news-time{ width: 80px; height: 100px; padding-right: 15px; border-right: 1px solid #ebebeb; } .news-list li .news-time strong{ display: block; font-size: 30px; line-height: 1.6; text-align: right; margin-top: 11px; transition: all .6s; } .news-list li .news-time em{ display: block; font-size: 15px; line-height: 2; color: #5e5e5e; text-align: right; transition: all .6s; } .news-list li .news-txt{ width: calc(100% - 95px); } .news-list li .news-txt h3{ font-size: 22px; line-height: 2; font-weight: normal; transition: all .6s; } .news-list li .news-txt p{ font-size: 14px; line-height: 1.8; opacity: .7; } .news-list li:hover{ background-color: #FFFFFF; box-shadow: 0 0 8px 3px rgba(198,198,198,0.2); } .news-list li:hover .news-txt h3{ color: #1a73e8; } .news-list li:hover .news-txt p{ opacity: 1; } .news-list li:hover .news-time strong, .news-list li:hover .news-time em{ color: #1a73e8; transition: all .6s; } /* 分页 */ .page-list{ display: flex; justify-content: center; margin-top: 44px; } .page-list a{ width: 34px; margin: 0 3px; line-height: 34px; font-size: 16px; color: #737373; text-align: center; background-color: #FFFFFF; border-radius: 3px; box-shadow: 0 0 8px 3px rgba(177,177,177,0.13); } .page-list a:first-child, .page-list a:last-child{ width: auto; padding: 0 12px; } .page-list a.active{ background-color: #1a73e8; color: #FFFFFF; } /* 新闻详情页 */ .news-detail-bg{ padding: 35px 0; } .news-title h1{ font-size: 26px; line-height: 1.8; font-weight: normal; } .news-title p{ font-size: 14px; line-height: 2; padding: 14px 0; opacity: .7; border-bottom: 1px solid #e1e1e1; } .news-title p>span{ margin-right: 20px; } .news-detail-txt{ font-size: 14px; line-height: 2; margin-top: 12px; text-align: justify; } .news-detail-txt p{ text-indent: 2em; } .news-detail-txt img{ max-width: 100%; margin: 15px auto; } /* 上下篇 */ .page{ display: flex; justify-content: space-between; padding-top: 30px; border-top: 1px solid #e1e1e1; margin-top: 30px; } .page a{ width: 45%; font-size: 14px; line-height: 2; } .page a:nth-of-type(2){ width: 10%; text-align: center; color: #1a73e8; } .page a:last-child{ text-align: right; } /* 关于我们 */ .about-nav-item li{ margin: 0 97px; } .about-content-bg>div{ display: none; } .about-content-bg>div.cur{ display: block; } .about-content{ padding-top: 100px; } /* 公司简介 */ .synopsis{ padding-bottom: 50px; } /* 企业文化 */ .culture-bg{ padding: 35px 0 56px; background-image: url(../imgs/about-culture-bg.jpg); background-repeat: no-repeat; background-position: top center; background-size: cover; } .culture-bg .pull-title{ color: #FFFFFF; } .culture-item{ display: flex; margin-top: 40px; } .culture-item li{ width: 23.275%; margin-right: 2%; border-radius: 10px; overflow: hidden; background-color: #FFFFFF; box-shadow: 0 0 8px 3px rgba(198,198,198,0.2); } .culture-item li:nth-of-type(4n){ margin-right: 0; } .culture-img{ height: 146px; } .culture-img img{ width: 100%; min-height: 146px; } .culture-txt{ padding: 10px 20px; text-align: center; } .culture-txt h3{ font-size: 20px; line-height: 2; transition: all .6s; } .culture-txt ins{ display: block; width: 34px; height: 2px; background-color: #1a73e8; margin: 5px auto 10px; transition: all .6s; } .culture-txt p{ font-size: 14px; color: #636363; line-height: 1.8; } /* 发展历程 */ .history{ padding-top: 50px; } .history-top{ height: 10px; margin-top: 40px; background-image: url(../imgs/history-top-bg.jpg); background-repeat: no-repeat; background-size: 96px 10px; background-position: top center; } .history-item li{ width: calc(50% + 48px); height: 110px; margin: 0 0 0 calc(50% - 48px); background-image: url(../imgs/history-middle-right.jpg); background-repeat: no-repeat; background-size: 235px 100%; background-position: left top; } .history-item li:nth-child(odd){ margin: 0 calc(50% - 48px) 0 0; background-position: right top; background-image: url(../imgs/history-middle-left.jpg); text-align: right; } .history-item li:first-child{ background-image: url(../imgs/history-middle-01.jpg); } .history-item .history-time{ font-family: "SourceHanSansCN-Medium"; font-size: 35px; line-height: 1.2; padding: 0 0 0 113px; } .history-item .history-txt{ font-size: 14px; color: #636363; line-height: 1.8; margin-top: 20px; padding: 0 0 0 113px; } .history-item li:nth-child(odd) ins{ justify-content: flex-end; } .history-item li:nth-child(odd) .history-time, .history-item li:nth-child(odd) .history-txt{ padding: 0 113px 0 0; } .history-bottom{ height: 351px; background-image: url(../imgs/history-bottom-bg.jpg); background-repeat: no-repeat; background-size: 760px 351px; background-position: top center; } /* 公司荣誉 */ .honor-content, .contact-content, .join-content{ padding: 100px 0 55px; background-color: #f5f7fa; background-image: url(../imgs/news-bg.jpg); background-repeat: no-repeat; background-position: top center; background-size: 100% auto; } .honor-item-01{ display: flex; justify-content: center; margin: 40px 0 20px; } .honor-item-01 li{ width: 477px; margin: 0 37px; } .honor-item-01 .honor-img{ height: auto; background-image: url(../imgs/honor-01.png); background-repeat: no-repeat; background-size: 100% 100%; padding: 12px 10px; overflow: hidden; } .honor-item-01 .honor-img img{ width: 100%; min-height: 100%; } .honor-item-02{ display: flex; flex-wrap: wrap; justify-content: center; } .honor-item-02 li{ width: 300px; margin: 20px 33px 0; } .honor-item-02 .honor-img{ height: 421px; background-image: url(../imgs/honor-02.png); background-repeat: no-repeat; background-size: 100% 100%; padding: 10px; overflow: hidden; } .honor-item-02 .honor-img img{ width: 100%; min-height: 100%; } .honor-txt{ padding: 15px 10px; text-align: center; } .honor-txt p{ font-size: 16px; line-height: 1.5; } .honor-txt span{ font-size: 14px; line-height: 1.8; opacity: 0.7; } /* 联系我们 */ .contact, .company{ display: flex; justify-content: center; margin: 40px auto 60px; } .contact li, .company li{ width: 46.5%; padding: 10px; background-color: #FFFFFF; box-shadow: 0 0 8px 6px rgba(198,198,198,0.2); } .contact li:first-child, .company li:first-child{ margin-right: 4.4%; } .contact li .contact-txt{ display: flex; margin: 10px 0 25px; } .contact li .contact-txt span{ display: block; width: 146px; font-size: 26px; line-height: 1; padding: 16px 0; text-align: center; } .contact li .contact-txt p{ width: calc(100% - 146px); padding-left: 12px; font-size: 16px; line-height: 1.75; opacity: .7; border-left: 1px solid #dfdfdf; } .contact li .contactMap, .company li .companyMap{ width: 100%; height: 300px; } .company{ margin: 40px auto 0; } .company li .company-txt{ margin: 10px 0 15px; } .company li .company-txt span{ font-size: 26px; line-height: 1; } .company li .company-txt p{ font-size: 16px; line-height: 1.75; margin-top: 10px; opacity: .7; } /* 加入我们 */ .join-item{ display: flex; } .join-item li{ font-size: 22px; line-height: 1.8; border-bottom: 2px solid rgba(26,115,232,0); margin-right: 60px; opacity: .7; cursor: pointer; } .join-item li.active{ border-bottom: 2px solid rgba(26,115,232,1); opacity: 1; } .join-item li:last-child{ margin-right: 0; } .join-class{ background-color: #fbfdfe; margin-top: 15px; } .join-class li{ display: none; } .join-class li.cur{ display: flex; } .join-class li span{ display: block; font-size: 16px; margin: 0 22px; line-height: 3.375; cursor: pointer; } .join-class li span.active{ color: #1a73e8; font-weight: bold; } .join-list li{ display: none; } .join-list li.cur{ display: flex; justify-content: space-between; flex-wrap: wrap; } .join-list li .join-txt{ width: 48.85%; margin-top: 25px; padding: 20px; background-color: #fbfdfe; } .join-txt .join-title{ display: flex; justify-content: space-between; } .join-txt .join-title h2{ width: calc(100% - 85px); font-size: 22px; line-height: 1.2; font-weight: normal; } .join-txt .join-title span{ width: 80px; font-size: 14px; line-height: 1.5; opacity: .7; text-align: right; transition: all .6s; } .join-txt p{ font-size: 15px; line-height: 1.8; margin: 8px 0; transition: all .6s; } .join-txt .join-other{ font-size: 14px; line-height: 1.5; margin-top: 25px; opacity: .7; transition: all .6s; } .join-list li .join-txt:hover{ background-color: #FFFFFF; box-shadow: 0 0 8px 3px rgba(198,198,198,0.2); transition: all .6s; } .join-list li .join-txt:hover .join-title h2, .join-list li .join-txt:hover .join-title span, .join-list li .join-txt:hover p, .join-list li .join-txt:hover .join-other{ color: #1a73e8; transition: all .6s; } @media screen and (max-width:1600px){ .head{ width: 90%; } .banner-title p>em ins{ width: 110px; } } @media screen and (max-width:1440px){ .banner-swiper{ height: 560px; } .pull-banner{ height: 560px; } .pull-banner>img{ min-height: 560px; } .banner-title h2{ font-size: 50px; } .banner-title h2>span{ font-size: 80px; line-height: 90px; } .banner-title p strong{ font-size: 22px; } .banner-title p>em ins{ width: 100px; } } @media screen and (max-width:1280px){ .banner-swiper{ height: 540px; } .pull-banner{ height: 540px; } .pull-banner>img{ min-height: 540px; } .w1160{ width: 94% !important; } .head .nav li{ margin-left: 35px; } .banner-content .banner-txt{ width: calc(100% - 340px); } .banner-content .banner-img img{ height: 340px; } .banner-content .banner-txt h1{ font-size: 40px; } .banner-content .banner-txt strong{ font-size: 38px; } .banner-title p>em ins{ width: 90px; } .head .nav li:nth-of-type(2) .sub-nav{ left: -280px; } .head .nav li .sub-nav .sub-nav-list{ width: 280px; } } @media screen and (max-width:1180px){ .banner-swiper{ height: 520px; } .pull-banner{ height: 520px; } .pull-banner>img{ min-height: 520px; } .head .nav li{ margin-left: 30px; } .banner-content .banner-txt{ width: calc(100% - 300px); } .banner-content .banner-img img{ height: 300px; } .banner-content .banner-txt h1{ font-size: 38px; } .banner-content .banner-txt strong{ font-size: 36px; } .head .nav li{ margin-left: 25px; } .head .nav li>a{ font-size: 15px; } .banner-title h2>span{ font-size: 70px; line-height: 80px; } .banner-title h2{ font-size: 46px; } .banner-title p strong{ font-size: 19px; } .banner-title p>em ins{ width: 80px; } .about-nav-item { justify-content: space-around; } .about-nav-item li{ margin: 0; } .foot-ewm>div{ width: 100px; } .foot-ewm>div span{ width: 100px; height: 100px; } .foot-ewm>div img{ width: 100%; height: 100%; } } @media screen and (max-width:1080px){ .banner-swiper{ height: 500px; } .pull-banner{ height: 500px; } .pull-banner>img{ min-height: 500px; } .banner-content .banner-txt{ width: calc(100% - 280px); } .banner-content .banner-img img{ height: 280px; } .banner-content .banner-txt h1{ font-size: 36px; } .banner-content .banner-txt strong{ font-size: 34px; } .head .nav li{ margin-left: 15px; } .head .nav li>a{ font-size: 14px; } .banner-title h2>span{ font-size: 60px; line-height: 70px; } .banner-title h2{ font-size: 40px; } .banner-title p strong{ font-size: 17px; } .banner-title p>em ins{ width: 70px; } .developer li{ padding: 15px; } .developer-img img{ margin-right: 15px; } } @media screen and (max-width:980px){ .head{ width: 96%; } .banner-swiper{ height: 480px; } .pull-banner{ height: 480px; } .pull-banner>img{ min-height: 480px; } .banner-title h2>span{ font-size: 50px; line-height: 60px; } .banner-title h2{ font-size: 32px; } .banner-title p strong{ font-size: 15px; } .banner-title p>em ins{ width: 60px; } .banner-content .banner-txt{ width: calc(100% - 260px); } .banner-content .banner-img img{ height: 260px; } .banner-content .banner-txt h1{ font-size: 34px; } .banner-content .banner-txt strong{ font-size: 32px; } .news-list li .news-txt h3{ font-size: 18px; } .pull-title h2>p{ font-size: 32px; } .news-title h1{ font-size: 22px; } .links>p a{ font-size: 13px; } .foot p{ font-size: 13px; } .foot-ewm>div{ width: 90px; } .foot-ewm>div span{ width: 90px; height: 90px; } } @media screen and (max-width:900px){ body{ padding-top: 60px; } .w1160{ width: 94% !important; } /* 隐藏 */ .pc-show, .head .nav-bg, .head .phone, .side-nav{ display: none; } /* 显示 */ .wap-show{ display: block; } /* 头部 */ .header, .index-header{ height: 60px; background-color: rgba(255,255,255,1); border-bottom: 1px solid #E7E7E7; } .head{ width: 92%; height: 60px; } .head .logo img{ height: 30px; margin: 0; } .head .head-btn{ display: block; margin: 0; } .head .nav{ display: block; width: 50vw; height: 100vh; background-color: #FFFFFF; position: fixed; top: 0px; right: -50vw; z-index: 999; transition: all .8s; } .head .nav.active{ right: 0; transition: all .8s; } .head .nav .nav-logo{ display: block; width: 100%; height: 60px; padding: 10px 0; border-bottom: 1px solid #E7E7E7; } .head .nav-bg{ width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.5); position: fixed; top: 0; left: 0; z-index: 200; transition: all .8s; } .head .nav-bg.active{ display: block; opacity: 1; transition: all .8s; } .head .nav .nav-logo img{ height: 30px; margin: 5px 0 0 15px; } .head .nav li{ margin: 0; padding: 0; height: auto; } .head .nav li>a{ font-size: 14px; margin: 0; padding: 0 15px; line-height: 50px; } .head .nav li.active>a{ font-weight: normal; border: 0; color: #1a73e8; } .head .nav li:hover>a{ color: #262626; } .sub-nav .sub-nav-list dl>dt{ display: block; margin: 0; } .head .nav li .sub-nav{ width: 100%; flex-wrap: wrap; border: 0; left: -100%; top: 25px; } .head .nav li:nth-of-type(2) .sub-nav{ left: -100%; } .head .nav li:hover .sub-nav{ padding: 10px 0; border-top: 0; border-right: 1px solid #1A73E8; } .head .nav li .sub-nav .sub-nav-list{ border: 0; width: 100%; padding: 0 5px; } .head .nav li .sub-nav .sub-nav-img, .head .nav li .sub-nav .sub-nav-txt span, .head .nav li .sub-nav .sub-nav-tiile{ display: none; } .sub-nav .sub-nav-txt{ width: 100%; } .sub-nav-txt p{ font-size: 12px; line-height: 3; text-align: center; opacity: .7; } .head .nav li .sub-nav>a{ font-size: 13px; } .head .nav li .sub-nav>a.active{ background: none; } .developer li{ width: 49%; } .developer li:nth-of-type(3n){ margin-right: 2%; } .developer li:nth-of-type(2n){ margin-right: 0; } .scene-item li{ font-size: 16px; } .scene-item li img{ height: 24px; margin-right: 6px; } /* 尾部 */ footer{ padding: 30px 0 10px; } .foot-nav{ flex-wrap: wrap; } .foot-nav li,.foot-nav li:first-child{ width: 100%; margin-bottom: 15px; } .foot-nav li dl>dt{ display: flex; flex-wrap: wrap; } .foot-nav li dl>dd{ font-size: 15px; margin-bottom: 8px; } .foot-nav li dl>dt a{ font-size: 13px; margin-right: 10px; } .foot-nav li:last-child{ width: 100%; text-align: center; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); } .foot-nav li:last-child dl>dt{ display: flex; flex-wrap: wrap; justify-content: center; } .links{ height: 0; overflow: hidden; padding: 0; } .foot{ font-size: 13px; line-height: 1.8; margin-top: 10px; } .foot-ewm{ justify-content: center; } } @media screen and (max-width:768px){ /* banner */ .banner-swiper{ height: 240px; } .banner-swiper .swiper-container-horizontal>.swiper-pagination-bullets, .banner-swiper .swiper-pagination-custom, .banner-swiper .swiper-pagination-fraction, .banner-title ins{ display: none; } .banner-swiper .swiper-pagination-bullet{ width: 10px; height: 10px; } .banner-title{ width: 100%; } .banner-title h2{ font-size: 25px; line-height: 1.6; } .product-banner{ overflow: hidden; } .banner-title h2>span{ font-size: 38px; line-height: 50px; } .banner-title p strong{ font-size: 14px; } .banner-title p>em ins{ width: 20px; } .banner-title p{ justify-content: center; } .developer li:nth-of-type(3n){ margin-right: 0; } .compose-list li{ width: 100%; margin-right: 0; margin-top: 15px; } .compose,.discern-bg,.case-bg,.about-bg,.news-bg{ padding: 32px 0 40px; } .index-title{ padding: 0 4%; } .index-title>h2{ font-size: 30px; } .index-title>p{ font-size: 15px; line-height: 1.5; margin-top: 5px; } .guarantee-bg{ padding-top: 30px; } .guarantee{ flex-wrap: wrap; padding: 20px 0 40px; } .guarantee li{ width: 100%; margin-top: 15px; padding: 15px; box-shadow: 0 0 8px 3px rgba(198,198,198,0.2); } .guarantee li a{ justify-content: flex-start; align-items: center; } .pull-img{ margin: 0 12px 0 0; } .expand, .discern,.case{ flex-wrap: wrap; margin-top: 10px; } .expand li, .discern li{ width: 100%; margin-right: 0; margin-top: 15px; padding: 20px 10px; } .expand-img{ margin: 0 auto; } .expand-txt{ text-align: center; } .expand-txt ins{ margin: 5px auto 13px; } .case li{ width: 100%; margin-right: 0; margin-top: 15px; padding: 15px; } .discern li .discern-img,.case li .case-img{ margin-bottom: 8px; } .product-item li{ font-size: 15px; } .product-item li img{ height: 26px; margin-right: 8px; } .product-list{ padding: 10px; } .product-list li.cur{ flex-wrap: wrap; } .product-left{ width: 100%; } .product-right{ width: 100%; height: 200px; } .product-right img{ width: 100%; min-height: 200px; } .product-left .product-describe{ flex-wrap: wrap; } .product-describe .describe{ width: 100%; } .product-describe .more{ width: 80px; height: 30px; line-height: 30px; font-size: 12px; margin: 15px auto 0; } .product-sub-list{ flex-wrap: wrap; margin-top: 15px; } .product-sub-list>div,.product-sub-list>div:last-child{ width: 100%; padding: 15px 0; border-top: 1px dashed #dedede; } .about span{ font-size: 14px; text-align: justify; margin: 15px 0 10px; } .about-item{ flex-wrap: wrap; margin-top: 0; } .about-item li, .about-item li:last-child{ width: 50%; padding: 8px 0; } .about-item li strong{ font-size: 28px; } .about .more, .news-bg .more{ line-height: 40px; margin-top: 30px; } .news{ margin-top: 10px; } .news li{ width: 100%; } .news li .news-time strong{ font-size: 20px; } .news li .news-txt h3{ font-size: 16px; } /* 产品 */ .pull-banner{ height: 210px; } .pull-banner>img{ min-height: 210px; } .banner-content .banner-img img{ height: 100px; } .banner-content{ transform: translate(-50%,-50%); } .banner-content .banner-txt strong{ font-size: 20px; } .banner-content .banner-txt h1{ font-size: 24px; } .banner-content .banner-txt{ width: calc(100% - 100px); } .banner-content .banner-txt p{ font-size: 14px; } .product-nav-item{ justify-content: space-between; } .product-nav-item li{ font-size: 13px; line-height: 45px; margin: 0; } .pull-title h2>p{ font-size: 30px; } .pull-title h2>em{ width: 60px; height: 19px; } .pull-title span{ font-size: 15px; } .experience li{ width: 100%; padding: 10px 10px 0; margin-top: 15px; } .experience-bg,.function-bg,.advantage-bg,.scene-bg,.developer-bg{ padding: 30px 0; } .function{ flex-wrap: wrap; margin-top: 10px; } .function li,.advantage li{ width: 100%; padding: 10px; margin-right: 0; margin-top: 15px; } .function-img,.advantage-img{ margin: 0 auto; } .advantage-txt{ text-align: center; } .advantage-txt ins{ margin: 5px auto 13px; } .scene{ margin-top: 20px; } .scene-item{ flex-wrap: wrap; border-bottom: 0; } .scene-item li{ width: 33.33%; font-size: 14px; border-bottom: 1px solid #edeff2; } .scene-item li:first-child{ border-bottom: 1px solid #edeff2; } .scene-item li:nth-of-type(4){ border-left: 0; } .scene-item li img{ height: 16px; margin-right: 6px; } .scene-list{ padding: 10px; } .scene-list li.cur{ flex-wrap: wrap; } .scene-txt{ width: 100%; } .scene-img{ width: 100%; margin-top: 15px; } .scene-img img{ width: 100%; } .price-bg{ padding-top: 30px; } .price{ min-height: 210px; margin-top: 20px; } .developer li{ width: 100%; margin-right: 0; margin-top: 15px; } .developer{ margin-top: 10px; } /* 新闻 */ .pull-sub-nav{ height: 68px; margin-top: -34px; } .sub-nav-item li .nav-img{ margin-top: 8px; } .sub-nav-item li .nav-img img{ height: 24px; } .sub-nav-item li p{ font-size: 14px; margin: 3px 0; } .news-nav-item li{ margin: 0 30px; } .news-content-bg{ padding: 68px 0 35px; } .news-list li .news-time strong{ font-size: 26px; } .news-list li .news-time em, .news-list li .news-txt p{ font-size: 13px; } .news-list li{ padding: 10px; } .news-list li .news-time{ height: 84px; } .news-list li .news-txt h3{ font-size: 15px; } .news-list li .news-time{ width: 70px; } .news-list li .news-txt{ width: calc(100% - 82px); } .page-list{ margin-top: 35px; } .page-list a:nth-of-type(n+10){ display: none; } .page-list a:last-child{ display: block; } .page-list a{ width: 18px; height: 18px; font-size: 12px; line-height: 18px; } .page-list a:first-child, .page-list a:last-child{ padding: 0 4px; } .news-content-bg{ padding: 68px 0 30px; } .news-detail-bg{ padding-top: 30px; } .news-title h1{ font-size: 20px; } .page{ flex-wrap: wrap; padding-top: 20px; } .page a{ width: 100%; margin: 5px 0; } .page a:nth-of-type(2){ display: none; } .page a:last-child{ text-align: left; } /* 关于我们 */ .about-nav-item{ justify-content: space-around; } .about-nav-item li{ margin:0; } .about-content{ padding-top: 68px; } .culture-item{ flex-wrap: wrap; margin-top: 10px; } .culture-item li{ width: 100%; margin-right: 0; margin-top: 15px; } .culture-img{ overflow: hidden; height: 180px; } .culture-img img{ width: 100%; min-height: 180px; } .history-item .history-txt{ padding: 0 0 0 18px; } .history-item li:nth-child(odd) .history-txt{ padding: 0 18px 0 0; } .history-item li:nth-child(odd) .history-time{ padding: 0; text-align: left; } .history-item .history-time{ padding: 0; text-align: right; } .honor-content, .contact-content, .join-content{ padding: 68px 0 30px; } .honor-item-01{ flex-wrap: wrap; margin: 20px 0 10px; } .honor-item-01 li{ width: 100%; margin: 0 0 15px 0; } .honor-item-01 .honor-img{ height: auto; padding: 8px; } .honor-item-02{ justify-content: space-between; } .honor-item-02 li{ width: 49%; margin: 0; } .honor-item-02 .honor-img{ height: auto; padding: 6px; } .contact,.company{ flex-wrap: wrap; } .contact li, .company li{ width: 100%; } .contact li:first-child, .company li:first-child{ margin-bottom: 15px; margin-right: 0; } .contact li .contactMap, .company li .companyMap{ height: 220px; } .contact li .contact-txt{ margin: 10px 0; } .contact li .contact-txt span, .company li .company-txt span{ width: 98px; font-size: 18px; padding: 12px 8px 0 0; font-weight: bold; } .contact li .contact-txt p, .company li .company-txt p{ width: calc(100% - 98px); font-size: 13px; } .join-item li{ font-size: 18px; line-height: 2; margin-right: 40px; } .join-class li.cur{ justify-content: space-around; } .join-class li span{ margin: 0; } .join-list li .join-txt{ width: 100%; padding: 10px; } .join-txt .join-title h2{ font-size: 18px; } .join-txt p{ font-size: 14px; } .expand-txt .more>a{ margin: 0 auto; float: none; } } @media screen and (max-width:350px){ .culture-img{ height: 160px; } .culture-img img{ min-height: 160px; } .contact li .contactMap, .company li .companyMap{ height: 180px; } .news-title h1{ font-size: 17px; } .product-nav-item li{ font-size: 12px; } .banner-content .banner-txt strong{ font-size: 17px; } .banner-content .banner-txt h1{ font-size: 19px; } .banner-content .banner-txt p{ font-size: 12px; } .sub-nav-txt p{ display: block; overflow: hidden; white-space: nowrap; text-overflow:ellipsis; } .banner-swiper{ height: 210px; } .pull-banner{ height: 180px; } .pull-banner>img{ min-height: 180px; } }