/* 引入字体 */ @font-face { font-family:"SourceHanSansSC-Regular"; src: url(../fonts/SourceHanSansSC-Regular.otf); } @font-face { font-family:"HelveticaExt-Normal"; src: url(../fonts/HelveticaExt-Normal.ttf); } @font-face { font-family:"SourceHanSansSC-Heavy"; src: url(../fonts/SourceHanSansSC-Heavy.otf); } /* 头部 */ .header{ height: 80px; background-color: #FFFFFF; position: fixed; left: 0; top: 0; z-index: 999; } .header .head{ display: flex; justify-content: flex-start; align-items: center; } /* logo */ .logo{ width: 198px; height: 78px; margin: 0 6px 0 60px; } .logo img{ width: 100%; } .logo span{ display: block; font-size: 18px; line-height: 1.5; opacity: .7; } /* 股票代码 */ .stock{ width: 120px; font-size: 14px; line-height: 1.5; color: #e65802; margin-right: 60px; margin-top: 8px; } /* 语言 */ .language{ display: flex; justify-content: space-between; align-items: center; width: 90px; height: 80px; padding: 0 5px; margin-right: 20px; position: relative; } .language-select{ text-align: center; height: 24px; font-size: 16px; line-height: 1.5; } .language-select>.select{ display: none; position: absolute; left: 0; top: 80px; background-color: #FFFFFF; width: 90px; padding: 10px 0; box-shadow: 0 0 10px rgba(3,133,197,.1); z-index: 999; } .language-select>.select ins{ display: block; font-size: 16px; line-height: 2; cursor: pointer; } .language img:first-child{ width: 25px; height: 25px; } .language img:last-child{ width: 11px; height: 7px; transition: all .6s; } .language img.open{ transform: rotateX(180deg); transition: all .6s; } /* 搜索 */ .search{ display: flex; justify-content: center; align-items: center; width: 88px; height: 80px; background-color: #0094da; cursor: pointer; } .search>span{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .search-son{ display: none; height: 76px; background-color: #FFFFFF; border-top: 1px solid #f4f4f4; position: fixed; left: 0; top: 80px; } .search-input{ display: flex; justify-content: space-between; align-items: center; width: 1080px; height: 75px; padding: 25px 0 18px; margin: 0 auto; } .search-input input{ height: 32px; padding: 0 13px; font-size: 15px; border: 0; border-left: 1px solid #c2c2c2; } .search-input img{ height: 23px; margin-right: 16px; } .search-btn{ font-size: 15px; line-height: 2; } /* 导航 */ .nav{ width: calc(100% - 642px); height: 80px; display: flex; justify-content: flex-start; } .nav>li{ height: 80px; margin-right: 40px; transition: all .6s; } .nav>li>a{ display: block; padding: 0 2px; line-height: 60px; margin-top: 10px; border-bottom: 2px solid #FFFFFF; transition: all .6s; } .nav>li.active>a{ border-bottom: 2px solid #0094da; transition: all .6s; } .nav>li:hover>a{ color: #0094da; transition: all .6s; } .nav>li.active:hover>a{ color: #262626; } /* 二级导航 */ .nav-sub{ display: none; } .nav>li:hover .nav-sub{ display: flex; justify-content: space-between; width: 100%; background-color: rgba(255,255,255,.9); position: fixed; top: 80px; left: 0; z-index: 999; } .nav-sub .sub-left{ width: 27%; padding: 20px 0 20px calc( 27% - 200px); background-color: rgba(219,222,226,.7); } .nav-sub .sub-left span{ display: block; width: 100%; line-height: 58px; padding: 0 12px; border-bottom: 1px solid #e9ecef; font-size: 20px; cursor: pointer; transition: all .6s; } .nav-sub .sub-left span.cur{ background-color: #2d5899; color: #FFFFFF; transition: all .6s; } .nav-sub .sub-right{ width: 73%; padding: 20px calc(73% - 1160px) 20px 80px; overflow: hidden; } .nav-sub .sub-right>span{ display: none; overflow: hidden; } .nav-sub .sub-right span>a{ width: 20%; font-size: 16px; line-height: 2.5; float: left; transition: all .6s; } .nav-sub .sub-right span>a ins{ padding: 5px 10px; border-radius: 8px; transition: all .6s; } .nav-sub .sub-right span>a:hover{ transition: all .6s; } .nav-sub .sub-right span>a:hover ins{ color: #FFFFFF; background-color: rgba(45,88,153,.8); transition: all .6s; } /* 二级导航 */ .nav-sub .sub-left-01{ width: 27%; padding: 20px 0 20px calc( 27% - 200px); background-color: rgba(219,222,226,.7); } .nav-sub .sub-left-01 span{ display: block; width: 100%; line-height: 58px; padding: 0 12px; border-bottom: 1px solid #e9ecef; font-size: 20px; cursor: pointer; transition: all .6s; } .nav-sub .sub-left-01 span.cur{ background-color: #2d5899; color: #FFFFFF; transition: all .6s; } .nav-sub .sub-right-01{ width: 73%; padding: 20px calc(73% - 1160px) 20px 80px; overflow: hidden; } .nav-sub .sub-right-01>span{ display: none; overflow: hidden; } .nav-sub .sub-right-01 span>a{ width: 20%; font-size: 16px; line-height: 2.5; float: left; transition: all .6s; } .nav-sub .sub-right-01 span>a ins{ padding: 5px 10px; border-radius: 8px; transition: all .6s; } .nav-sub .sub-right-01 span>a:hover{ transition: all .6s; } .nav-sub .sub-right-01 span>a:hover ins{ color: #FFFFFF; background-color: rgba(45,88,153,.8); transition: all .6s; } /* 二级导航 */ .nav-son{ display: none; } .nav>li:hover .nav-son{ display: block; width: 100%; padding: 20px calc(50% - 640px); background-color: rgba(255,255,255,.9); position: fixed; left: 0; top: 80px; z-index: 999; } .son-top{ font-family: 'SourceHanSansSC-Regular'; padding-top: 39px; background-image: url(../images/text.png); background-size: 385px 75px; background-repeat: no-repeat; background-position: left center; font-size: 36px; line-height: 1.5; margin-top: 20px; } .son-bottom{ display: flex; justify-content: flex-start; flex-wrap: wrap; margin: 28px 0 46px; } .son-bottom a{ width: 14.28%; font-size: 20px; line-height: 1.4; border-left: 3px solid #92a4bc; padding-left: 10px; margin-top: 20px; } .nav-bg{ display: none; } /* 手机端导航按钮 */ .head .head-btn{ display: none; width: 20px; float: right; position: relative; cursor: pointer; margin-top: 5px; z-index: 999;} .head .head-btn i{ display: block; width: 100%; height: 2px; float: left; background-color: #0094da; border-radius: 50px; transition: all .5s ease 0s; -webkit-transition: all .5s ease 0s; -moz-transition: all .5s ease 0s; } .head .head-btn i.bar-top{ margin-top: 0;} .head .head-btn i.bar-cen{ margin-top: 5px;} .head .head-btn i.bar-bom{ margin-top: 5px;} .head .head-btn.cur i{background-color: #0094da;} .head .head-btn.cur i.bar-cen{ opacity: 0;} .head .head-btn.cur i.bar-top{ -webkit-transform:rotate(45deg) translate(5px, 5px);transform:rotate(45deg) translate(5px, 5px);} .head .head-btn.cur i.bar-bom{ -webkit-transform: rotate(-45deg) translate(5px, -5px);transform: rotate(-45deg) translate(5px, -5px);} /* 轮播样式 */ .banner-swiper { overflow-x: hidden; height: 819px; position: relative; background-color: #FFFFFF; margin-top: 80px; } .banner-swiper .swiper-slide { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; } .banner-swiper .swiper-slide video{ width: 100%; height: 819px; } .banner-title{ width: 100%; color: #FFFFFF; position: absolute; left: 0; top: 36%; text-align: center; z-index: 1; } .banner-title h2{ width: 100%; font-family: "SourceHanSansSC-Heavy"; font-size: 56px; line-height: 1.2; font-weight: normal; text-transform: uppercase; } .banner-title p{ font-family: 'HelveticaExt-Normal'; font-size: 48px; } .banner-title span{ display: block; width: 40%; margin: 20px auto 0; font-size: 18px; line-height: 1.5; letter-spacing: 2px; text-transform: uppercase; } /* 分页器 */ .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: 27px; } /* 指示点默认样式 */ .banner-swiper .swiper-pagination-bullet { width: 20px; height: 20px; line-height: 20px; font-size: 16px; color: rgba(255,255,255,.6); background-color: rgba(0,0,0,0); border-radius: 0; margin: 0 12px; font-weight: bold; overflow: hidden; opacity: 1; } .banner-swiper .swiper-pagination-bullet-active{ width: 105px; background-color: rgba(0,0,0,0); color: rgba(255,255,255,1); } .banner-swiper .swiper-pagination-bullet-active>em{ display: block; float: left; } .banner-swiper .swiper-pagination-bullet>ins{ display: block; width: 0; height: 1px; margin-top: 9px; background-color: #FFFFFF; float: right; } .banner-swiper .swiper-pagination-bullet-active>ins{ width: 80px; transition: all .6s; } .banner-swiper .swiper-pagination-bullet:last-child ins{ float: left; } .banner-swiper .swiper-pagination-bullet:last-child em{ float: right; } /* 首页 */ /* 数据展示 */ .about-data-bg{ width: 100%; /* height: 221px; */ background-image: url(../images/about-bg.png); background-size: cover; } .about-data{ display: flex; justify-content: space-around; align-items: center; width: 100%; padding: 43px calc(50% - 760px); } .about-data>li{ width: 10%; } .about-data>li:nth-of-type(2){ width: 20%; } .about-data>li>span{ display: block; font-size: 16px; line-height: 1.5; color: #FFFFFF; } .about-data>li>p{ /* font-family: 'HelveticaExt-Normal'; */ font-size: 72px; font-weight: bold; line-height: 1.2; color: #FFFFFF; } .about-data>li>p span{ font-size: 26px; margin-left: 10px; font-weight: normal; } /* 关于我们 */ .about-body{ display: flex; justify-content: space-between; width: 100%; overflow: hidden; } .about-body>div{ width: 50%; } /* 视频轮播 */ .about-video-swiper { overflow-x: hidden; height: 529px; position: relative; background-color: #FFFFFF; } .about-video-swiper .swiper-slide { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; overflow: hidden; transform: all .8s; } /* 分页器 */ .about-video-swiper .swiper-pagination-bullets, .about-video-swiper .swiper-pagination-custom, .about-video-swiper .swiper-pagination-fraction{ height: 22px; color: #fff !important; bottom: 27px; } /* 指示点默认样式 */ .about-video-swiper .swiper-pagination-bullet{ width: 22px; height: 22px; background-color: rgba(255,255,255,0); border: 1px solid rgba(255,255,255,0); margin: 0 2px !important; cursor: pointer; opacity: 1; } .about-video-swiper .swiper-pagination-bullet>em{ display: block; width: 10px; height: 10px; margin: 5px; background-color: #FFFFFF; border-radius: 100%; } .about-video-swiper .swiper-pagination-bullet-active{ border: 1px solid rgba(255,255,255,1); } .about-video-swiper .icon-play{ width: 75px; height: 75px; position: absolute; left: calc(50% - 37px); right: calc(50% - 37px); cursor: pointer; } /* 视频弹窗 */ .video-list-bg{ width: 840px; height: 500px; position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 9998; display: none; } .video-list{ width: 840px; height: 490px; margin-top: -20px; border: 20px solid #003585; background-color: #ccc; border-radius: 20px; } .video-list>li{ display: none; } .video-list>li.show{ display: block; } .video-list video{ width: 800px; height: 450px; } .video-list-bg>.close-video{ display: block; width: 30px; height: 30px; padding: 4px; margin-left: calc(100% - 20px); border-radius: 100%; background-color: #FFFFFF; position: relative; z-index: 9999; } .video-list-bg>.close-video img{ width: 22px; height: 22px; } /* 介绍内容 */ .about-txt{ padding: 58px calc(50% - 740px) 0 70px; } .about-txt>h2{ font-size: 32px; line-height: 1.5; } .about-txt>p{ font-size: 15px; line-height: 2; color: #4a4a4a; margin: 26px 0 68px; text-align: justify; } .about-nav{ display: flex; align-items: center; } .about-nav>li{ width: 25%; text-align: center; } .about-nav>li img{ width: 43px; height: 43px; margin: 0 auto; -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); transition: all .6s; } .about-nav>li p{ font-size: 16px; line-height: 1.5; margin-top: 12px; transition: all .6s; } .about-nav>li:hover img{ transform: rotateY(360deg); -webkit-filter: grayscale(0); /* Chrome, Safari, Opera */ filter: grayscale(0); transition: all .6s; } .about-nav>li:hover p{ color: #003585; transition: all .6s; } /* 解决方案 */ .index-title{ color: #FFFFFF; text-align: center; } .index-title-black{ color: #262626; } .index-title h2{ font-size: 36px; line-height: 1.5; } .index-title span{ display: block; font-size: 22px; line-height: 1.5; margin-top: 7px; } .index-title span.span{ font-size: 26px; } .index-solution{ height: 760px; position: relative; overflow: hidden; } .index-solution .index-title{ position: absolute; top: 65px; left: 0; z-index: 2; } .index-solution-list{ position: absolute; top: 0; left: 0; z-index: 1; } .index-solution-list .solution-img{ height: 760px; } .index-solution-list .solution-img img{ width: 100%; min-height: 760px; } .index-solution-list>li{ display: none; position: relative; } .index-solution-list>li .solution-txt{ position: absolute; top: 290px; left: 50%; transform: translateX(-50%); color: #FFFFFF; z-index: 2; animation: myLeft .8s; } .solution-txt h3{ font-size: 32px; line-height: 1.5; } .solution-txt p{ width: 50%; font-size: 16px; line-height: 1.9; margin-top: 16px; } .solution-txt .more{ display: flex; justify-content: center; align-items: center; width: 168px; height: 50px; font-size: 14px; color: #e9e9e9; border: 1px solid #e7e4e2; border-radius: 25px; margin-top: 70px; cursor: pointer; transition: all .6s; } .solution-txt .more:hover{ color: #003585; border: 1px solid #003585; transition: all .6s; } .solution-txt .more>em:last-child{ display: flex; align-items: center; margin-left: 14px; } .solution-txt .more>em ins{ display: block; width: 4px; height: 4px; border-radius: 100%; background-color: #e7e4e2; transition: all .6s; } .solution-txt .more>em ins:nth-of-type(2){ width: 6px; height: 6px; margin: 0 4px; } .solution-txt .more:hover ins{ background-color: #003585; transition: all .6s; } /* 解决方案分类 */ .index-solution-nav{ height: 140px; background-color: rgba(0,53,133,.6); position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 1; } .solution-swiper-bg{ display: flex; justify-content: space-between; width: 100%; height: 140px; } .solution-nav-swiper{ width: 100%; } .index-solution-nav .swiper-slide{ cursor: pointer; } .index-solution-nav .swiper-slide>img{ width: 64px; height: 67px; margin: 20px auto 10px; transition: all .6s; } .index-solution-nav .swiper-slide>p{ font-size: 16px; line-height: 1.5; color: #FFFFFF; text-align: center; } .index-solution-nav .swiper-slide.cur{ background-color: #003585; } .index-solution-nav .swiper-slide:hover{ background-color: #003585; } .index-solution-nav .swiper-slide:hover img{ transform:rotateY(360deg); transition: all .6s; } .index-solution-nav .swiper-slide.cur:hover img{ transform:rotateY(0deg); } /* 三级应用 */ .index-solution-more{ height: 0; overflow: hidden; transition: all 1s linear; } .index-solution-more.active{ height: auto; padding: 10px 0 42px; transition: all .8s linear; } .solution-more-list li{ height: 0; overflow: hidden; transition: all .8s linear; } .solution-more-list li.show{ display: flex; align-items: center; flex-wrap: wrap; height: auto; transition: all .6s linear; } .solution-more-list li>span{ display: flex; align-items: center; width: 14%; height: 100px; margin-right: 3.2%; border-bottom: 1px solid #e1e1e1; font-size: 16px; cursor: pointer; } .solution-more-list li>span:nth-of-type(6n){ margin-right: 0; } .solution-more-list li>span img{ max-width: 32%; margin-right: 15px; transition: all .6s; } .solution-more-list li>span:hover{ color: #003585; } .solution-more-list li>span:hover img{ transform: scale(1.3); transition: all .6s; } .solution-more-btn{ display: flex; justify-content: center; align-items: center; width: 168px; height: 50px; font-size: 16px; border: 1px solid #bfbfbf; border-radius: 25px; margin: 40px auto 0; cursor: pointer; transition: all .6s; } .solution-more-btn:hover{ border: 1px solid #003585; color: #003585; transition: all .6s; } /* 服务流程 */ .index-service{ background-color: #f4f4f4; padding: 50px 0 58px; } .index-service-list{ display: flex; justify-content: flex-start; margin-top: 34px; } .index-service-list>li{ width: 11.1%; background-color: #FFFFFF; box-shadow: 0 0 14px rgba(205,205,205,.15); padding: 12px; margin-right: 1.6%; text-align: center; } .index-service-list>li:last-child{ margin-right: 0; } .index-service-list>li em{ font-family: impact; display: block; font-size: 30px; line-height: 1.2; color: #e8e8e8; text-align: left; transition: all .6s; } .index-service-list>li span{ display: flex; align-items: center; justify-content: center; width: 90px; height: 90px; margin: 0 auto; background-color: #d9e1ed; border-radius: 100%; overflow: hidden; transition: all .6s; } .index-service-list>li span>img{ -webkit-filter: grayscale(100%); filter: grayscale(100%); transition: all .6s; } .index-service-list>li h3{ font-size: 16px; line-height: 1.5; margin: 13px 0; transition: all .6s; } .index-service-list>li ins{ display: block; width: 23px; height: 3px; background-color: #003585; margin: 0 auto; } .index-service-list>li p{ font-size: 13px; line-height: 1.8; color: #767676; margin-top: 13px; } .index-service-list>li:hover em, .index-service-list>li:hover h3{ color: #003585; transition: all .6s; } .index-service-list>li:hover span{ background-color: #f4f4f4; transition: all .6s; } .index-service-list>li:hover span>img{ -webkit-filter: grayscale(0); filter: grayscale(0); transform: rotateY(360deg); transition: all .6s; } /* 新闻动态 */ .index-news { padding: 50px 0 60px; } .index-news-list{ display: flex; justify-content: space-between; align-items: flex-start; margin-top: 54px; } .index-news-first{ width: calc(36.3% - 55px); margin-top: 20px; } .index-news-img{ width: 100%; height: 332px; border-radius: 50px 0 50px 0; overflow: hidden; } .index-news-img img{ width: 100%; min-height: 332px; transition: all .6s; } .index-news-first:hover .index-news-img img{ transform: scale(1.2); transition: all .6s; } .index-news-txt{ margin-top: 27px; } .index-news-txt span{ font-size: 14px; line-height: 1.5; opacity: .7; } .index-news-txt h3{ font-size: 22px; font-weight: normal; line-height: 1.5; margin: 5px 0; color: #000; transition: all .6s; } .index-news-txt p{ font-size: 14px; line-height: 1.8; text-align: justify; opacity: .5; } .index-news-first .more{ display: flex; justify-content: flex-start; align-items: center; width: 100%; font-size: 14px; color: #003585; margin-top: 36px; } .index-news-first .more>em:last-child{ display: flex; align-items: center; margin-left: 14px; } .index-news-first .more>em ins{ display: block; width: 4px; height: 4px; border-radius: 100%; background-color: #003585; transition: all .6s; } .index-news-first .more>em ins:nth-of-type(2){ width: 6px; height: 6px; margin: 0 4px; } .index-news-first:hover h3{ color: #003585; transition: all .6s; } .index-news-item{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 63.7%; } .index-news-item a{ display: block; width: calc(50% - 30px); padding: 15px 0; border-bottom: 1px solid #e8e8e8; } .index-news-item a>span{ font-size: 14px; line-height: 1.5; opacity: .7; } .index-news-item a>h3{ height: 48px; font-size: 16px; line-height: 1.5; color: #000; font-weight: normal; margin-top: 5px; transition: all .6s; } .index-news-item a:hover h3{ color: #003585; transition: all .6s; } /* 尾部 */ .slogin{ padding: 100px 0 94px; background-image: url(../images/slogin-bg.png); background-size: cover; } .slogin img{ height: 146px; margin: 0 auto; } .slogin p{ width: 912px; margin: 34px auto 0; font-size: 24px; line-height: 1.5; text-align: center; color: #FFFFFF; } .foot-bg{ background-image: url(../images/foot-bg.png); background-repeat: no-repeat; background-position: left bottom; background-size: 100% auto; } .foot{ display: flex; justify-content: space-between; padding: 40px 0; border-bottom: 1px solid #dedede; } .foot li{ width: 12%; } .foot li:last-child{ width: 28%; } .foot li>strong, .foot li>span, .foot li>a{ display: block; font-size: 14px; line-height: 2.3; color: #343434; opacity: .8; transition: all .6s; } .foot li>strong{ opacity: 1; } .foot li>a:hover{ color: #003585; text-decoration: underline; transition: all .6s; } .foot-bottom{ display: flex; justify-content: space-between; align-items: center; padding: 32px 0; } .foot-left{ width: calc(100% - 192px); } .foot-left p{ font-size: 14px; line-height: 2.3; color: #343434; opacity: .8; } .foot-left p:first-child a{ margin-right: 28px; transition: all .6s; } .foot-left p:first-child a:hover{ color: #003585; text-decoration: underline; transition: all .6s; } .foot-left p:first-child a:last-child{ margin-right: 0; } .foot-left p:last-child a{ margin: 0 10px; } .foot-right{ display: flex; justify-content: space-between; width: 192px; height: 85px; } .foot-right img{ width: 85px; height: 85px; } /* 悬浮 */ .open-suspension{ width: 40px; height: 40px; background-color: #FFFFFF; box-shadow: 0 0 20px rgba(205,205,205,.5); border-radius: 6px; position: fixed; top: calc(50% - 248px); right: 6px; cursor: pointer; transition: all .6s; z-index: 999; } .open-suspension img{ height: 20px; margin: 10px auto; transform: rotateY(180deg); transition: all .6s; } .open-suspension.open img{ transform: rotateY(0); transition: all .6s; } .suspension{ width: 94px; position: fixed; top: 50%; right: -100px; transform: translateY(-50%); z-index: 998; transition: all .6s; } .suspension.show{ right: 6px; transition: all .6s; } .suspension li{ display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width: 94px; height: 94px; border-radius: 6px; background-color: #FFFFFF; box-shadow: 0 0 10px rgba(3,133,197,.1); margin-top: 8px; padding: 15px 0 8px; position: relative; cursor: pointer; } .suspension li img{ -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); transition: all .6s; } .suspension li:first-child{ margin-top: 0; } .suspension li p{ width: 100%; text-align: center; font-size: 14px; line-height: 1.5; } .suspension li>.txt{ display: none; width: 158px; background-color: #FFFFFF; border-radius: 6px; box-shadow: 0 0 10px rgba(3,133,197,.1); padding: 15px 22px; font-size: 14px; line-height: 2; position: absolute; top: 0; right: 96px; z-index: 999; transition: all .6s; } .suspension li>.txt img{ width: 100%; } .suspension li>.txt>span{ display: block; text-align: center; } .suspension li>em{ display: none; width: 9px; height: 16px; background-image: url(../images/icon-right.png); background-size: 9px 16px; position: absolute; top: 13px; left: -2px; z-index: 999; transition: all .6s; } .suspension li:hover{ background-color: #003585; transition: all .6s; } .suspension li:hover>p{ color: #FFFFFF; transition: all .6s; } .suspension li:hover>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; } .suspension li:hover .txt, .suspension li:hover em{ display: block; transition: all .6s; } /* 手机端底部 */ .wap-service{ display: none; } /* 关于我们 */ .pull-banner{ width: 100%; height: 580px; position: relative; margin-top: 80px; overflow: hidden; } .pull-banner>img{ width: 100%; min-height: 580px; } .pull-banner-title{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); animation: myLeft .8s; } .pull-banner-title h2{ font-size: 36px; line-height: 1.2; } .pull-banner-title p{ display: inline-block; height: 32px; border-bottom: 12px solid rgba(255,255,255,.5); font-size: 24px; line-height: 1.5; margin: 20px 0 24px; opacity: .8; } .pull-banner-title span{ display: block; font-size: 14px; line-height: 1.5; } .pull-nav{ display: flex; align-items: center; height: 80px; background-color: #FFFFFF; padding: 0 40px; border-bottom: 1px solid #e8e8f1; margin-top: -80px; position: relative; z-index: 1; } .pull-nav>a{ margin: 0 30px; font-size: 18px; line-height: 78px; } .pull-nav>ins{ width: 1px; height: 19px; background-color: #d7d7d7; } .pull-nav>a.active{ color: #003585; font-weight: bold; border-bottom: 2px solid #003585; } .pull-nav>a:first-of-type{ margin-left: 0; } .pull-nav>a:last-of-type{ margin-right: 0; } .pull-nav>ins:last-of-type{ display: none; } /* 三级分类 */ .nav-three-bg{ display: flex; padding: 0 40px; border-bottom: 1px solid #e8e8f1; background-color: #FFFFFF; } .nav-three-bg>span{ width: 102px; font-size: 18px; line-height: 80px; color: #003585; font-weight: bold; } .nav-three-swiper{ width: calc(100% - 102px); height: 80px; overflow: hidden; } .nav-three-swiper .swiper-slide{ width: auto; margin-right: 30px; } .nav-three-swiper .swiper-slide a{ font-size: 18px; line-height: 80px; } .nav-three-swiper .swiper-slide:last-child{ margin-right: 0; } .nav-three-swiper .swiper-slide a.active{ color: #003585; font-weight: bold; } /* 企业概况 */ .about-survey-bg{ background-color: #f4f4f4; } .about-survey{ background-color: #FFFFFF; } .about-survey-content{ display: flex; justify-content: space-between; align-items: center; padding: 40px; } .survey-txt{ width: 58%; } .survey-txt>h3{ font-size: 32px; line-height: 1.2; margin-bottom: 24px; } .survey-txt p{ font-size: 15px; line-height: 2; } /* 数据 */ .survey-data{ display: flex; justify-content: space-around; flex-wrap: wrap; width: calc(42% - 56px);; } .survey-data>li{ width: 55%; margin: 40px 0; } .survey-data>li:nth-of-type(odd){ width: 45%; } .survey-data>li>span{ display: block; font-size: 16px; line-height: 1.5; color: #003585; } .survey-data>li>span:last-of-type{ font-size: 14px; } .survey-data>li>p{ /* font-family: 'HelveticaExt-Normal'; */ font-size: 72px; line-height: 1.2; font-weight: bold; color: #003585; } .survey-data>li>p span{ font-size: 26px; margin-left: 10px; font-weight: normal; } .about-survey-img, .about-survey-img img{ width: 100%; } /* 发展历程 */ .about-course-bg { background-color: #f4f4f4; padding: 50px 0 20px; } .memorabili-txt{ padding: 0 88px; overflow: hidden; position: relative; margin-top: 20px; } .memorabili-txt .swiper-slide{ width: 39% !important; height: 128px; margin: 30px 0; margin-left: -22.4%; opacity: 1; cursor: pointer; transition: all .6s; } .memorabili-txt .swiper-slide:nth-of-type(7){ opacity: 0; transition: all .6s; } .memorabili-txt .swiper-slide strong{ display: block; margin-bottom: 10px; font-size: 20px; line-height: 2; } .memorabili-txt .swiper-slide p{ font-size: 15px; line-height: 1.6; font-weight: bold; } .memorabili-txt .swiper-slide:nth-of-type(2n){ margin-top: 182px; } .memorabili-txt .swiper-slide:nth-of-type(1){ margin-left: 0px ; } .memorabili-txt .swiper-slide em{ display: flex; width: 23px; height: 23px; background-color: rgb(104,104,104,0.08); border-radius: 100%; justify-content: center; align-items: center; position: absolute; bottom: -23px; left: 0; } .memorabili-txt .swiper-slide em ins{ display: block; width: 11px; height: 11px; background-color: #686868; border-radius: 100%; } .memorabili-txt .swiper-slide:nth-of-type(2n){ padding: 20px 0 0; } .memorabili-txt .swiper-slide:nth-of-type(2n) em{ top: -23px; bottom: auto; } .memorabili-txt .swiper-slide:hover em{ background-color: rgb(0,53,133,0.08); transition: all .6s; } .memorabili-txt .swiper-slide:hover em ins{ background-color: #003585; transition: all .6s; } .memorabili-txt .swiper-slide:hover strong, .memorabili-txt .swiper-slide:hover p{ color: #003585; transition: all .6s; } .memorabili-swiper .swiper-button-prev{ width: 51px; height: 51px; border-radius: 100%; background-color: #003585; margin-top: -25.5px; left: 0; background-image: url(../images/arrow-left.png); background-size: 20px 22px; } .memorabili-swiper .swiper-button-next{ width: 51px; height: 51px; border-radius: 100%; background-color: #003585; margin-top: -25.5px; right: 0; background-image: url(../images/arrow-right.png); background-size: 20px 22px; } .memorabili-txt .line{ width: calc(100% - 102px); height: 1px; background-color: #e3e3e3; position: absolute; left: 51px; top: 50%; } /* 制造实力 */ .strength-bg{ background-color: #f4f4f4; } .strength-img{ position: relative; } .strength-img>img{ width: 100%; } .strength-img>span{ display: block; width: 75px; height: 75px; border-radius: 100%; overflow: hidden; position: absolute; left: 50%; top: 50%; margin: -37.5px 0 0 -37.5px; } .strength-img>span img{ width: 75px; height: 75px; } .strength-content{ background-color: #FFFFFF; padding: 30px 40px 40px; margin-top: -60px; } .strength-txt{ margin-top: 46px; font-size: 15px; line-height: 2; text-align: justify; } /* 愿景使命 */ .vision-bg{ background-color: #f4f4f4; padding: 30px 0; } .vision{ padding-top: 30px; background-color: #FFFFFF; } .index-title p{ font-size: 15px; line-height: 1.5; margin-top: 10px; } .vision-list{ display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin-top: 40px; } .vision-list>li{ display: flex; justify-content: flex-start; align-items: center; width: 50%; height: 430px; overflow: hidden; } .vision-list>li .vision-txt{ position: relative; } .vision-list>li img{ width: 100%; min-height: 430px; transition: all .6s; } .vision-list>li .vision-txt p{ color: #FFFFFF; text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .vision-list>li .vision-txt p>strong{ display: block; font-size: 26px; line-height: 1.5; } .vision-list>li .vision-txt p>span{ display: block; font-size: 16px; line-height: 1.5; margin-top: 8px; } .vision-list>li:hover .vision-txt img{ transform: scale(1.2); transition: all .6s; } /* 荣誉资质 */ .honor-bg{ padding: 50px 0 68px; background-image: url(../images/honor-bg.jpg); background-size: cover; } .honor-list{ margin-top: 20px; position: relative; } .honor-swiper{ width: calc(100% - 80px); margin: 0 auto; overflow: hidden; position: relative; cursor: pointer; } .honor-swiper .swiper-slide{ display: flex; justify-content: flex-start; flex-wrap: wrap; position: relative; } .honor-swiper .swiper-slide .honor-item{ width: calc(20% - 16px); margin-right: 20px; margin-top: 20px; background-color: #FFFFFF; } .honor-swiper .swiper-slide .honor-item img{ width: 100%; } .honor-swiper .swiper-slide .honor-item p{ font-size: 14px; line-height: 1.7; text-align: center; opacity: .8; } .honor-swiper .swiper-slide .honor-item .honor-txt{ margin: 10px 0; } .honor-swiper .swiper-slide .honor-item:nth-of-type(5n){ margin-right: 0; } .honor-list .swiper-button-prev{ width: 51px; height: 51px; border-radius: 100%; background-color: #003585; margin-top: -25.5px; left: -30px; background-image: url(../images/arrow-left.png); background-size: 20px 22px; } .honor-list .swiper-button-next{ width: 51px; height: 51px; border-radius: 100%; background-color: #003585; margin-top: -25.5px; right: -30px; background-image: url(../images/arrow-right.png); background-size: 20px 22px; } /* 资质弹窗 */ .all-bg{ display: none; width: 100%; height: 100%; background-color: rgba(0,0,0,.7); position: fixed; left: 0; top: 0; z-index: 2; } .honor-list-other{ width: 600px; padding: 40px 80px; background-color: #FFFFFF; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-45%); z-index: 9; opacity: 1; } .honor-list-other.hide{ z-index: -2; opacity: 0; } .honor-other-swiper{ width: 100%; position: relative; overflow: hidden; } .honor-other-swiper .swiper-slide img{ width: 100%; } .honor-other-swiper .swiper-slide p{ font-size: 14px; font-weight: bold; text-align: center; margin-top: 10px; } .close-swiper{ display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; background-color: #0094da; position: absolute; right: -200px; top: 0; } .close-swiper img{ width: 27px; } .honor-list-other .swiper-button-prev{ width: 51px; height: 51px; border-radius: 100%; background-color: rgba(255,255,255,.6); margin-top: -25.5px; left: -130px; background-image: url(../images/arrow-left.png); background-size: 20px 22px; } .honor-list-other .swiper-button-next{ width: 51px; height: 51px; border-radius: 100%; background-color: rgba(255,255,255,.6); margin-top: -25.5px; right: -130px; background-image: url(../images/arrow-right.png); background-size: 20px 22px; } /* 社会责任 */ .social-bg{ background-color: #f4f4f4; padding: 40px 0; } .social{ background: #FFFFFF; padding: 36px 40px 40px; } .social-list{ display: flex; flex-wrap: wrap; width: 100%; margin-top: 30px; } .social-list>li{ display: flex; flex-direction: column-reverse; width: 32.5%; margin-right: 1.25%; margin-top: 10px; background-color: #f5f5f5; } .social-list>li:nth-of-type(3n){ margin-right: 0; } .social-list>li:nth-of-type(odd){ flex-direction: column; } .social-img{ width: 100%; height: 280px; overflow: hidden; } .social-img img{ width: 100%; min-height: 280px; } .social-txt{ height: 220px; padding: 30px; text-align: center; } .social-txt p{ font-size: 24px; line-height: 1.5; } .social-txt span{ font-size: 15px; line-height: 1.6; margin-top: 10px; opacity: .8; } /* 行业解决方案 */ .main{ background: #f4f4f4; } .pull-content{ background-color: #FFFFFF; } /* 分类查询 */ .classify{ display: flex; align-items: center; padding: 0 40px; height: 80px; border-bottom: 1px solid #e8e8f1; } .classify>span{ font-size: 18px; line-height: 2; margin-right: 35px; cursor: pointer; } .classify>span:last-child{ margin-right: 0; } .classify>span.active{ color: #003585; font-weight: bold; } /* 列表 */ .solution{ padding: 0 40px; } .solution-list{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .solution-list li{ width: calc(50% - 15px); padding: 35px 0; border-bottom: 1px solid #e8e8e8; cursor: pointer; } .solution-list li .img{ width: 100%; height: 280px; overflow: hidden; } .solution-list li .img img{ width: 100%; min-height: 280px; transition: all .6s; } .solution-list li .txt{ margin-top: 35px; } .solution-list li .txt h3{ padding: 0 3px; font-size: 24px; line-height: 1.5; font-weight: normal; transition: all .6s; } .solution-list li .more-btns{ padding: 0 3px; } .solution-list li .txt p{ padding: 0 3px; font-size: 14px; line-height: 1.8; margin: 15px 0 20px; text-align: justify; opacity: .7; } .solution-list li:hover{ background-color: #f4f4f4; } .solution-list li:hover h3{ color: #003585; transition: all .6s; } .solution-list li:hover .img img{ transform: scale(1.2); transition: all .6s; } .solution-list li:nth-last-of-type(1), .solution-list li:nth-last-of-type(2){ border: 0; } .more-btns{ display: flex; justify-content: flex-start; align-items: center; width: 100%; font-size: 14px; color: #003585; } .more-btns>em:last-child{ display: flex; align-items: center; margin-left: 14px; } .more-btns>em ins{ display: block; width: 4px; height: 4px; border-radius: 100%; background-color: #003585; transition: all .6s; } .more-btns>em ins:nth-of-type(2){ width: 6px; height: 6px; margin: 0 4px; } /* 分页 */ .page-list{ display: flex; justify-content: center; align-items: center; height: 42px; margin: 32px 0 35px; } .page-list a{ min-width: 42px; height: 42px; border-radius: 21px; border: 1px solid #e2e5e9; background-color: #FFFFFF; line-height: 40px; color: #707479; text-align: center; margin: 0 6px; transition: all .6s; } .page-list a.active{ background-color: #0094da; color: #FFFFFF; } .page-list a:first-child, .page-list a:last-child{ padding: 0 16px; } .page-list a:hover{ color: #0094da; transition: all .6s; } .page-list a.active:hover{ color: #FFFFFF; } .page-list>span{ margin: 0 6px; } /* 解决方案文章页 */ .pull-point{ display: flex; justify-content: flex-end; margin-top: 80px; font-size: 14px; line-height: 60px; color: rgba(38,38,38,.7); } .pull-point>a{ opacity: .7; } .pull-point>em{ margin: 0 5px; opacity: .7; } .solution-detail{ padding: 48px 40px 0; } .solution-detail h1{ font-size: 26px; line-height: 1.4; margin-bottom: 18px; color: #000000; } .detail-txt{ border-bottom: 1px solid #ebebeb; } .detail-txt p{ font-size: 15px; color: rgba(0,0,0,.8); line-height: 2; text-align: justify; } .detail-txt img{ width: 90%; margin: 20px auto; } /* 上下篇 */ .page{ display: flex; justify-content: space-between; align-items: center; padding: 16px 40px 30px; } .page>a{ display: flex; justify-content: flex-end; flex-wrap: wrap; width: calc(50% - 20px); font-size: 16px; line-height: 1.8; color: #000000; text-align: right; } .page>a:nth-of-type(1){ justify-content: flex-start; text-align: left; } .page>a span, .page>a p{ width: 100%; } .page>span, .page>span img{ width: 28px; } /* 相关方案 */ .relevant-case{ background-color: #FFFFFF; padding: 16px 40px; margin: 20px auto 40px; } .case-title{ display: flex; justify-content: space-between; align-items: center; height: 60px; border-bottom: 1px solid #ebebeb; } .case-title>strong{ font-size: 20px; line-height: 3; color: #003585; border-bottom: 2px solid #003585; } .case-title>a{ font-size: 15px; line-height: 2; color: #b2b2b2; } .relevant-case-list{ display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; margin: 18px 0 5px; } .relevant-case-list li{ display: flex; justify-content: space-between; align-items: center; width: calc(50% - 44px); } .relevant-case-list li>em{ width: 5px; height: 5px; border-radius: 100%; background-color: #003585; } .relevant-case-list li>a{ width: calc(100% - 11px); font-size: 16px; line-height: 2.5; color: #000; transition: all .6s; } .relevant-case-list li:hover>a{ color: #003585; transition: all .6s; } /* 客户案例 */ .pull-nav-other{ padding: 0; } .pull-nav-bg{ width: 100%; padding: 0 56px; position: relative; } .pull-nav-swiper{ width: 100%; height: 81px; overflow: hidden; position: relative; } ..pull-nav-swiper .swiper-wrapper{ justify-content: flex-start; } .pull-nav-swiper .swiper-slide{ display: flex; align-items: center; width: auto; } .pull-nav-swiper .swiper-slide>a{ margin: 0 30px; font-size: 18px; line-height: 78px; } .pull-nav-swiper .swiper-slide>ins{ width: 1px; height: 19px; background-color: #d7d7d7; } .pull-nav-swiper .swiper-slide>a.active{ color: #003585; font-weight: bold; border-bottom: 2px solid #003585; } .pull-nav-swiper .swiper-slide:last-of-type>ins{ display: none; } .pull-nav-bg .swiper-button-prev{ width: 56px; height: 80px; background-color: #ececec; background-image: url(../images/icon/icon-nav-left.png); background-repeat: no-repeat; background-size: 12px 21px; background-position: center; position: absolute; left: 0; top: 0; margin: 0; } .pull-nav-bg .swiper-button-next{ width: 56px; height: 80px; background-color: #ececec; background-image: url(../images/icon/icon-nav-right.png); background-repeat: no-repeat; background-size: 12px 21px; background-position: center; position: absolute; right: 0; top: 0; margin: 0; } .pull-nav-bg2{ padding: 0 10px; } .pull-nav-bg2 .swiper-button-prev, .pull-nav-bg2 .swiper-button-next{ display: none; } .case{ background-color: #FFFFFF; padding: 0 40px 36px; } .case-list{ display: flex; flex-wrap: wrap; width: 100%; } .case-list>li{ width: calc(33.3% - 24px); margin: 36px 36px 0 0; background-color: #f4f4f4; padding-bottom: 20px; } .case-list>li:nth-of-type(3n){ margin-right: 0; } .case-list>li span{ display: block; width: 100%; height: 270px; overflow: hidden; } .case-list>li span img{ width: 100%; min-height: 270px; transition: all .6s; } .case-list>li h3{ font-size: 22px; line-height: 1.5; color: #000000; margin-top: 15px; padding: 0 20px; transition: all .6s; } .case-list>li p{ font-size: 14px; line-height: 1.8; margin-top: 6px; padding: 0 20px; opacity: .7; } .case-list>li:hover img{ transform: scale(1.2); transition: all .6s; } .case-list>li:hover h3{ color: #003585; } /* 案例文章页 */ .case-detail{ padding: 48px 40px; } .case-detail h1{ font-size: 26px; line-height: 1.4; margin-bottom: 18px; color: #000000; } .case-detail .detail-txt{ border: 0; } .detail-swiper-bg{ display: flex; justify-content: flex-start; margin-top: 30px; width: 100%; } .case-swiper{ width: 836px; height: 560px; margin-left: 5.3%; position: relative; overflow: hidden; } .case-swiper .swiper-slide{ position: relative; } .case-swiper .swiper-slide img{ width: 100%; } .case-thumbnail-bg{ width: 176px; height: 560px; margin-left: 10px; position: relative; overflow-y: auto; } .case-thumbnail-swiper{ width: 100%; height: 508px; overflow: hidden; } .case-thumbnail-swiper .swiper-slide{ width: 100%; margin-bottom: 10px; height: 118px !important; overflow: hidden; } .case-thumbnail-swiper .swiper-slide span{ display: block; overflow: hidden; } .case-thumbnail-swiper .swiper-slide img{ width: 100%; height: 100%; } .case-thumbnail-swiper .swiper-slide-thumb-active{ padding: 2px; border: 2px solid #003585; } .case-thumbnail-swiper .swiper-slide-thumb-active span{ display: block; width: 100%; height: 100%; overflow: hidden; } .case-thumbnail-bg .swiper-button-prev, .case-thumbnail-bg .swiper-button-next{ width: 88px; height: 44px; background-color: #ececec; background-image: url(../images/icon/icon-nav-up.png); background-size: 21px 12px; background-repeat: no-repeat; background-position: center; top: auto; left: 0; bottom: 0; } .case-thumbnail-bg .swiper-button-next{ background-image: url(../images/icon/icon-nav-down.png); left: auto; right: 0; } .case-list-other{ margin: -12px 0 24px; } /* 产品中心 */ .product{ background-color: #FFFFFF; padding: 0 36px 36px; } .product-list{ display: flex; align-items: center; flex-wrap: wrap; } .product-list li{ width: calc(33.3% - 24px); padding: 20px; background-color: #f4f4f4; margin: 36px 36px 0 0; border: 1px solid #FFFFFF; transition: all .6s; } .product-list li:nth-of-type(3n){ margin-right: 0; } .product-list li>a{ display: block; padding-top: 16px; background-image: url(../images/icon/icon-arrow-01.png); background-size: 17px 16px; background-repeat: no-repeat; background-position: left top: ; position: all .8s; } .product-list li h2{ font-size: 22px; color: #000; line-height: 1.5; font-weight: normal; margin: 20px 0 10px; transition: all .6s; } .product-list li p{ font-size: 14px; line-height: 1.8; color: #000; text-align: justify; opacity: .85; transition: all .6s; } .product-list li:hover{ background-color: #FFFFFF; border: 1px solid #7f9ac2; transition: all .6s; } .product-list li:hover>a{ background-image: url(../images/icon/icon-arrow-02.png); position: all .8s; } .product-list li:hover h2, .product-list li:hover p{ color: #003585; opacity: 1; transition: all .6s; } /* 产品中心文章页 */ .product-detail{ display: flex; justify-content: space-between; background-color: #FFFFFF; padding: 40px; } .product-swiper-bg{ width: calc(50% - 20px); } .product-swiper{ width: 100%; height: 416px; margin-bottom: 5px; overflow: hidden; } .product-swiper .swiper-slide, .product-swiper .swiper-slide img{ width: 100%; } .product-thumbnail-bg{ width: 100%; height: 70px; padding: 0 40px; position: relative; } .product-thumbnail-swiper{ width: 100%; height: 70px; overflow: hidden; } .product-thumbnail-swiper .swiper-slide-thumb-active{ padding: 1px; border: 1px solid #003585; } .product-thumbnail-swiper .swiper-slide-thumb-active span{ display: block; width: 100%; height: 100%; overflow: hidden; } .product-thumbnail-swiper .swiper-slide img{ width: 100%; min-height: 70px; } .product-thumbnail-bg .swiper-button-prev, .product-thumbnail-bg .swiper-button-next{ width: 40px; height: 70px; background-color: #ececec; background-image: url(../images/icon/icon-nav-left.png); background-size: 12px 21px; background-repeat: no-repeat; background-position: center; top: auto; left: 0; bottom: 0; } .product-thumbnail-bg .swiper-button-next{ background-image: url(../images/icon/icon-nav-right.png); left: auto; right: 0; } .product-txt{ width: calc(50% - 20px); padding: 10px 0; } .product-txt>h1{ font-size: 26px; line-height: 1.5; color: #000; } .product-txt>p{ font-size: 15px; line-height: 2; color: #000; text-align: justify; opacity: .8; padding: 15px 0 20px; border-bottom: 1px solid #ebebeb; } .product-contact{ display: flex; justify-content: space-between; align-items: center; margin-top: 25px; } .product-contact>p{ display: flex; align-items: center; width: 50%; } .product-contact>p:first-child img{ height: 70px; margin-right: 10px; } .product-contact>p:last-child img{ height: 52px; margin-right: 10px; } .product-contact>p a>strong{ display: block; font-size: 24px; line-height: 1.5; color: #000; } .product-contact>p a>em{ display: block; font-size: 15px; line-height: 1.5; color: #000; opacity: .8; text-align: center; } .product-content{ background-color: #FFFFFF; padding: 0 40px 36px; margin-top: 20px; } .product-btns{ justify-content: flex-start; } .product-btns>span{ font-size: 20px; line-height: 3; border-bottom: 2px solid rgba(255,255,255,0); margin-right: 65px; cursor: pointer; } .product-btns>span:last-child{ margin-right: 0; } .product-btns>span.active{ color: #003585; border-bottom: 2px solid #003585; font-weight: bold; } .body-txt{ margin-top: 10px; } .body-txt>.txt-item{ display: none; } .body-txt p{ font-size: 15px; line-height: 2; text-align: justify; color: #000; opacity: .8; } .body-txt .img{ display: flex; justify-content: space-between; margin: 15px 0; } .body-txt .img img{ width: calc(50% - 10px); } /* 服务与支持 */ .service-bg{ background-color: #FFFFFF; padding: 40px; margin-bottom: 40px; } .service-list li{ display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .service-list li:nth-of-type(odd){ flex-direction:row-reverse } .service-list li>div{ width: 50%; } .service-list li .img{ overflow: hidden; } .service-list li img{ width: 100%; min-height: 327px; transition: all .6s; } .service-list li .txt{ padding: 0 35px; } .service-list li .txt h2{ font-size: 28px; line-height: 1.5; color: #000; margin-bottom: 10px; font-weight: normal; transition: all .6s; } .service-list li .txt p{ font-size: 15px; line-height: 1.7; text-align: justify; color: #000; opacity: .8; transition: all .6s; } .service-list li:hover img{ transform: scale(1.2); transition: all .6s; } .service-list li:hover .txt h2, .service-list li:hover .txt p{ color: #003585; transition: all .6s; } /* 下载中心 */ .service-dwon-bg{ background-color: #FFFFFF; padding: 11px 40px 35px; } .service-dwon-list{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .service-dwon-list li{ display: flex; justify-content: space-between; align-items: flex-end; width: calc(50% - 12px); padding: 20px 25px; background-color: #f3f3f3; margin-top: 24px; cursor: pointer; border: 1px solid #FFFFFF; transition: all .6s; } .down-txt{ width: calc(100% - 90px) } .down-txt h2{ font-size: 18px; line-height: 1.5; font-weight: normal; transition: all .6s; } .down-txt p{ font-size: 14px; line-height: 1.8; opacity: .8; margin-top: 8px; } .down-txt p>span{ margin-right: 15px; } .service-dwon-list li>a{ display: flex; justify-content: space-between; align-items: center; width: 80px; font-size: 14px; line-height: 1.8; color: #0094da; transition: all .6s; } .service-dwon-list li>a em{ width: 11px; height: 13px; background-image: url(../images/icon/icon-down.png); background-size: 11px 13px; transition: all .6s; } .service-dwon-list li:hover{ background-color: #FFFFFF; border: 1px solid #7f9ac2; transition: all .6s; } .service-dwon-list li:hover h2{ color: #003585; opacity: 1; transition: all .6s; } .service-dwon-list li:hover>a{ color: #003585; transition: all .6s; } .service-dwon-list li:hover>a em{ background-image: url(../images/icon/icon-down-01.png); transition: all .6s; } /* 新闻动态 */ .news-first{ display: flex; justify-content: space-between; background-color: #FFFFFF; padding: 40px; margin-top: -80px; } .news-left{ width: calc(50% - 30px); } .news-left .news-img{ width: 100%; height: 410px; overflow: hidden; } .news-left .news-img img{ width: 100%; min-height: 410px; transition: all .6s; } .news-txt{ margin-top: 12px; } .news-txt span{ font-size: 14px; line-height: 1.5; opacity: .7; } .news-txt h3{ font-size: 22px; font-weight: normal; line-height: 1.5; margin: 5px 0 8px; color: #000; transition: all .6s; transition: all .6s; } .news-txt p{ font-size: 14px; line-height: 1.8; text-align: justify; opacity: .5; margin-bottom: 30px; } .news-left:hover .news-img img{ transform: scale(1.2); transition: all .6s; } .news-left:hover .news-txt h3{ color: #003585; transition: all .6s; } .news-right{ width: 50%; } .news-right li{ padding: 15px 0; border-bottom: 1px solid #e8e8e8; } .news-right li:first-child{ padding-top: 3px; } .news-right li span{ display: block; font-size: 14px; line-height: 1.5; color: #000; margin-bottom: 10px; opacity: .7; } .news-right li h3{ font-size: 16px; line-height: 1.5; color: #000; transition: all .6s; } .news-right li:hover h3{ color: #003585; transition: all .6s; } /* 列表 */ .news-list{ padding: 0 40px; background-color: #FFFFFF; } .news-list li{ display: flex; justify-content: space-between; align-items: center; padding: 33px 0; border-bottom: 1px solid #e8e8e8; } .news-list li:last-child{ border-bottom: 0; } .news-list li .img{ width: 30%; height: 264px; overflow: hidden; } .news-list li .img img{ width: 100%; min-height: 264px; transition: all .6s; } .news-list li .txt{ width: calc(70% - 25px); } .news-list li .txt span{ display: block; font-size: 14px; line-height: 1.5; color: #000; margin-bottom: 10px; opacity: .7; } .news-list li .txt h3{ font-size: 22px; line-height: 1.5; color: #000; margin-bottom: 10px; font-weight: normal; transition: all .6s; } .news-list li .txt p{ font-size: 14px; line-height: 1.8; color: #000; text-align: justify; margin-bottom: 50px; opacity: .7; } .news-list li:hover .img img{ transform: scale(1.2); transition: all .6s; } .news-list li:hover .txt h3{ color: #003585; transition: all .6s; } /* 新闻动态文章页 */ .news-detail{ background-color: #FFFFFF; padding: 35px 40px 0; } .news-detail h1{ font-size: 26px; line-height: 1.5; } .detail-info{ display: flex; align-items: center; padding: 15px 0 20px; border-bottom: 1px solid #e8e8e8; } .detail-info span{ display: flex; align-items: center; font-size: 14px; line-height: 1.5; color: #525252; margin-right: 32px; opacity: .8; } .detail-info span:last-child{ margin-right: 0; } .detail-info span img{ width: 18px; margin-right: 5px; } .news-detail-txt{ padding: 30px 0 33px; } .news-detail-txt .img{ display: flex; justify-content: space-between; margin: 15px 0; } .news-detail-txt .img img{ width: calc(50% - 10px); } .news-detail .page{ padding: 16px 0 30px; } /* 推荐 */ .flag-list{ display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0; margin: 12px 0; } .flag-list li{ width: calc(50% - 15px); padding: 18px 0; border-bottom: 1px solid #e8e8e8; } .flag-list li span{ display: block; width: 14px; line-height: 1.5; color: #000; margin-bottom: 6px; opacity: .7; } .flag-list li h3{ font-size: 16px; line-height: 1.5; color: #000; font-weight: normal; transition: all .6s; } .flag-list li:hover h3{ font-weight: bold; color: #003585; transition: all .6s; } /* 职业发展 */ .idea-bg{ background-color: #f4f4f4; } .idea{ background-color: #FFFFFF; padding: 36px 40px 46px; } .idea li{ display: flex; justify-content: space-between; align-items: center; } .idea li:nth-of-type(odd){ flex-direction: row-reverse; } .idea li .img{ width: 50%; overflow: hidden; } .idea li .img img{ width: 100%; min-height: 327px; transition: all .6s; } .idea .txt{ width: 50%; padding: 0 43px; } .idea .txt h2{ font-size: 28px; line-height: 1.5; color: #000; font-weight: normal; margin-bottom: 12px; transition: all .6s; } .idea .txt p{ font-size: 15px; line-height: 2; color: #000; text-align: justify; opacity: .8; } .idea li:hover .img img{ transform: scale(1.2); transition: all .6s; } .idea li:hover .txt h2{ color: #003585; transition: all .6s; } /* 人才培养 */ .culture-bg{ background-color: #f4f4f4; padding: 45px 0 0; } .culture-bg .img-bg{ height: 454px; background-image: url(../images/culture-bg.jpg); background-size: cover; position: relative; } .culture-bg .img-bg .index-title{ position: absolute; top: 32%; left: 0; } .culture-bg .txt-bg{ display: flex; justify-content: space-between; align-items: center; flex-direction: row-reverse; background-color: #FFFFFF; padding: 40px 40px 44px; margin-top: -95px; position: relative; z-index: 1; } .txt-bg .img{ width: 50%; overflow: hidden; } .txt-bg .img img{ width: 100%; min-height: 327px; } .txt-bg .txt{ width: 50%; padding-right: 40px; font-size: 15px; line-height: 2; text-align: justify; opacity: .8; } /* 招聘职位 */ .recruit-bg{ background-color: #f4f4f4; padding: 45px 0 50px; } .recruit-list{ margin-top: 35px; } .recruit-list li{ height: auto; background-color: #FFFFFF; margin-bottom: 4px; } .recruit-list li .item{ display: flex; justify-content: space-between; height: 48px; padding: 0 40px; } .recruit-list li .item>span{ text-align: center; width: 20%; font-size: 15px; line-height: 48px; } .recruit-list li:first-child{ background-color: #003585; margin-bottom: 0; } .recruit-list li:first-child .item>span{ font-size: 18px; color: #FFFFFF; } .recruit-list li.active .item{ background-color: #30a3fa; color: #FFFFFF; } .recruit-list li .btns{ display: flex; justify-content: center; align-items: center; } .recruit-list li .item em{ width: 18px; height: 18px; border-radius: 100%; border: 1px solid #30a3fa; font-size: 12px; line-height: 14px; text-align: center; color: #30a3fa; cursor: pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } .recruit-list li.active .item em{ border: 1px solid #FFFFFF; color: #FFFFFF; } .recruit-list li .item>span:first-child{ text-align: left; text-indent: 40px; } .recruit-list li .txt{ height: 0; overflow: hidden; } .recruit-list li .txt.cur{ height: auto; padding: 20px 40px; font-size: 15px; line-height: 2; } .join-btn{ display: block; width: 210px; height: 46px; background-image: url(../images/icon/icon-zp.png); background-repeat: no-repeat; background-size: 210px 46px; font-size: 16px; line-height: 46px; text-align: center; color: #FFFFFF; margin: 15px auto 0; } /* 我要应聘 */ .join-bg{ background-color: #FFFFFF; padding: 40px; } .join-txt{ font-size: 24px; line-height: 1.8; text-align: center; color: #333; margin-top: 25px; opacity: .8; } .join-txt a{ color: #333; } /* 联系我们 */ .contact{ display: flex; justify-content: space-between; background-color: #FFFFFF; padding: 43px 40px; margin-top: -82px; position: relative; z-index: 1; } .contact-txt{ width: calc(50% - 25px); } .contact-txt li{ display: flex; align-items: center; height: 61px; border-bottom: 1px dashed #dcdcdc; color: #000; } .contact-txt li:last-child{ border: 0; } .contact-txt li a{ color: #000; } .contact-txt li>em{ display: flex; justify-content: center; align-items: center; width: 34px; height: 34px; border-radius: 100%; overflow: hidden; background-color: #003585; margin-right: 15px; } .map{ width: 50%; height: 326px; } /* 一对一定制 */ .from-bg{ background-image: url(../images/contact-bg.jpg); background-size: cover; padding: 56px 0 90px; margin-top: 56px; } .from-bg .index-title>p{ font-size: 16px; width: 658px; margin: 10px auto 0; } .from{ background-color: #FFFFFF; border-top: 5px solid #003585; padding: 44px 40px 40px; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{ font-size: 15px; color: #808080; } .input{ display: flex; justify-content: space-between; align-items: center; margin: 20px 0; } .input li{ width: calc(25% - 15px); height: 58px; padding: 0 14px; border: 1px solid #eaeaea; } .input li>input{ border: 0; background: none; line-height: 56px; font-size: 15px; } .input li:last-child{ display: flex; padding-right: 0; align-items: center; } .input li:last-child input{ width: calc(100% - 100px); } .input li:last-child img{ width: 100px; height: 56px; } .from textarea{ width: 100%; height: 176px; border: 1px solid #eaeaea; padding: 14px; font-size: 15px; line-height: 1.5; } .from-btn{ display: flex; align-items: center; justify-content: center; width: 205px; height: 61px; background-color: #003585; border-radius: 31px; font-size: 20px; color: #FFFFFF; margin: 30px auto 0; } /* 搜索页 */ .search-content{ margin-top: 176px; background-color: #FFFFFF; padding: 0 40px; } .search-list{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 26px 0;; } .search-list li{ display: flex; justify-content: flex-start; align-items: center; width: calc(50% - 23px); } .search-list li a{ font-size: 16px; line-height: 3.6; } .search-list li>em{ display: block; width: 4px; height: 4px; background-color: #262626; border-radius: 100%; margin-right: 8px; transition: all .6s; } .search-list li>a{ width: calc(100% - 12px); transition: all .6s; } .search-list li:hover a{ color: #003585; transition: all .6s; } .search-list li:hover em{ background-color: #003585; transition: all .6s; } /* 动画 */ @keyframes myLeft { from {left: 0;} to {left: 50%;} } @keyframes myUp { from {margin-top: 200px;} to {margin-top: 70px;} } @keyframes myHeightAuto { from {height: 0;} to {height: auto;} } @keyframes myHeight { from {height: auto;} to {height: 0;} } /* 响应式样式 */ @media screen and (max-width:1760px){ .logo{ margin-left: 30px; } .stock{ margin-right: 40px; } .nav{ width: calc(100% - 592px); } .nav>li{ margin-right: 38px; } .about-video-swiper{ height: 510px; } } @media screen and (max-width:1680px){ .nav>li{ margin-right: 30px; } .about-video-swiper{ height: 500px; } } @media screen and (max-width:1600px){ .w1690{ width: 100%; } .w1520{ width: 94%; } .nav>li{ margin-right: 22px; } .about-data{ padding: 43px 0; } .foot li{ width: 11%; } .foot li:last-child{ width: 34%; } .about-video-swiper{ height: 490px; } } @media screen and (max-width:1520px){ .nav>li{ font-size: 15px; margin-right: 18px; } .language{ font-size: 15px; } .about-txt{ padding: 58px 3% 0 70px; } .index-service-list>li{ padding: 12px 8px; } .about-video-swiper{ height: 480px; } } @media screen and (max-width:1440px){ .w1360{ width: 94%; } .nav>li{ margin-right: 10px; } .about-data>li>span{ font-size: 15px; } .index-service-list>li{ width: 11.625%; margin-right: 1%; } } @media screen and (max-width:1360px){ .stock{ width: calc(100% - 380px); } .header .head{ width: 100%; justify-content: space-between; align-items: center; } .head .head-btn{ display: block; margin: 0; margin-right: 30px; } .search{ width: 50px; height: 40px; margin-right: 20px; border-radius: 4px; } .search img{ height: 24px; } .logo img{ margin-top: 7px; } .head .nav{ display: block; width: 38vw; height: 100vh; background-color: #FFFFFF; position: fixed; padding-top: 80px; top: 0px; right: -38vw; z-index: 9999; transition: all .6s; } .head .nav.active{ right: 0; transition: all .6s; } .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 .6s; } .head .nav-bg.active{ display: block; opacity: 1; transition: all .6s; } .head .nav li{ margin: 0; padding: 0; height: auto; } .head .nav li>a{ width: 100%; font-size: 16px; margin: 0; padding: 0; line-height: 60px; text-align: center; } .head .nav li.active>a{ font-weight: normal; border: 0; background-color: #0094da; color: #FFFFFF; } /* 二级导航 */ .nav-sub{ display: none; } .nav>li:hover .nav-sub{ display: none; justify-content: space-between; flex-wrap: wrap; width: calc(100% - 38vw); background-color: rgba(255,255,255,.9); position: fixed; top: 50%; left: 0; transform: translateY(-50%); z-index: 999; } .nav-sub .sub-left{ display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; padding: 0; background-color: rgba(219,222,226,.7); } .nav-sub .sub-left span{ display: block; width: 33.3%; font-size: 15px; text-align: center; line-height: 50px; border-top: 1px solid #dedede; } .nav-sub .sub-left span.cur{ background-color: #2d5899; color: #FFFFFF; transition: all .6s; } .nav-sub .sub-right{ width: 62vw; padding: 10px 0; overflow: hidden; border-top: 1px solid #2d5899; } .nav-sub .sub-right>span{ display: none; overflow: hidden; } .nav-sub .sub-right span>a{ width: 33.3%; font-size: 14px; line-height: 3; text-align: center; } /* 二级导航 */ .nav-sub .sub-left-01{ display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; padding: 0; background-color: rgba(219,222,226,.7); } .nav-sub .sub-left-01 span{ display: block; width: 33.3%; font-size: 15px; text-align: center; line-height: 50px; border-top: 1px solid #dedede; } .nav-sub .sub-left-01 span.cur{ background-color: #2d5899; color: #FFFFFF; transition: all .6s; } .nav-sub .sub-right-01{ width: 62vw; padding: 10px 0; overflow: hidden; border-top: 1px solid #2d5899; } .nav-sub .sub-right-01>span{ display: none; overflow: hidden; } .nav-sub .sub-right-01 span>a{ width: 33.3%; font-size: 14px; line-height: 3; text-align: center; } /* 二级导航 */ .nav-son{ display: none; } .nav>li:hover .nav-son{ display: none; width: calc(100% - 38vw); padding: 0; background-color: rgba(255,255,255,.9); position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 999; } .son-top{ font-size: 30px; text-align: center; background-size: 300px 60px; background-position: center; padding-top: 20px; } .son-bottom{ display: flex; justify-content: flex-start; flex-wrap: wrap; padding: 0 18px; margin: 10px 0 30px; } .son-bottom a{ width: 33.3%; font-size: 14px; line-height: 1.8; border-left: 3px solid #92a4bc; padding-left: 6px; } .nav-bg{ display: none; } .about-data>li>p{ font-size: 60px; } .index-service-list{ flex-wrap: wrap; } .index-service-list>li{ width: 24.25%; margin-top: 1%; } .index-service-list>li:nth-of-type(4n){ margin-right: 0; } .foot li{ width: 10%; } .foot li:last-child{ width: 40%; } .service-list li .img{ height: 300px; } .service-list li img{ min-height: 300px; } .case-list>li span{ height: 230px; } .case-list>li span img{ min-height: 230px; } .service-list li .img{ height: 300px; } .service-list li img{ min-height: 300px; } .news-list li .img{ height: 240px; } .news-list li .img img{ min-height: 240px; } .idea li .img{ height: 300px; } .idea li .img img{ min-height: 300px; } .txt-bg .img{ height: 300px; } .txt-bg .img img{ min-height: 300px; } .vision-list>li{ height: 400px; } .vision-list>li img{ min-height: 400px; } .social-img{ height: 260px; } .social-img img{ min-height: 260px; } } @media screen and (max-width:1280px){ .case-list>li span{ height: 218px; } .case-list>li span img{ min-height: 218px; } .service-list li .img{ height: 280px; } .service-list li img{ min-height: 280px; } .news-list li .img{ height: 230px; } .news-list li .img img{ min-height: 230px; } .idea li .img{ height: 280px; } .idea li .img img{ min-height: 280px; } .txt-bg .img{ height: 280px; } .txt-bg .img img{ min-height: 280px; } .vision-list>li{ height: 380px; } .vision-list>li img{ min-height: 380px; } .social-img{ height: 230px; } .social-img img{ min-height: 230px; } .survey-data>li>p{ font-size: 60px; } .about-txt>p{ margin: 20px 0 40px; } .foot li>strong, .foot li>span, .foot li>a{ font-size: 13px; } .foot-left p{ font-size: 13px; } .index-news-item a>h3{ font-size: 15px; } .join-txt{ font-size: 22px; } } @media screen and (max-width:1200px){ .about-data>li>span{ font-size: 13px; } .about-data>li>p{ font-size: 56px; } .case-list>li span{ height: 210px; } .case-list>li span img{ min-height: 210px; } .service-list li .img{ height: 260px; } .service-list li img{ min-height: 260px; } .news-list li .img{ height: 220px; } .news-list li .img img{ min-height: 220px; } .idea li .img{ height: 260px; } .idea li .img img{ min-height: 260px; } .txt-bg .img{ height: 260px; } .txt-bg .img img{ min-height: 260px; } .vision-list>li{ height: 360px; } .vision-list>li img{ min-height: 360px; } .social-img{ height: 210px; } .social-img img{ min-height: 210px; } .join-txt{ font-size: 20px; } } @media screen and (max-width:1120px){ .about-data>li>p{ font-size: 48px; } .survey-data>li>p{ font-size: 48px; } } @media screen and (max-width:940px){ .about-data>li>p{ font-size: 46px; } .survey-data>li>p{ font-size: 46px; } .index-title p{ width: 90%; margin: 0 auto; } .slogin p{ width: 90%; font-size: 20px; } } @media screen and (max-width:780px){ .w1520, .w1360{ width: 100%; } .language, .suspension, .open-suspension{ display: none; } body{ padding-bottom: 60px; } /* 头部 */ .header{ height: 50px; background-color: rgba(255,255,255,1); } .header .head{ justify-content: space-between; width: calc(100% - 30px); margin: 0 auto; height: 50px; } .logo{ width: auto; height: 40px; margin: 0; } .logo img{ width: auto; height: 40px; margin: 0; } .search img{ height: 18px; } .stock{ width: 120px; font-size: 13px; margin-top: 0px; } .join-bg{ padding: 15px; } .join-txt{ font-size: 14px; } .head .head-btn{ display: block; margin: 0; } .head .nav{ display: block; width: 38vw; height: 100vh; background-color: #FFFFFF; position: fixed; padding-top: 50px; top: 0px; right: -38vw; z-index: 9999; transition: all .6s; } .head .nav.active{ right: 0; transition: all .6s; } .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 .6s; } .head .nav-bg.active{ display: block; opacity: 1; transition: all .6s; } .head .nav li{ margin: 0; padding: 0; height: auto; } .head .nav li>a{ width: 100%; font-size: 15px; margin: 0; padding: 0; line-height: 40px; text-align: center; } .head .nav li.active>a{ font-weight: normal; border: 0; background-color: #0094da; color: #FFFFFF; } /* 二级导航 */ .nav-sub{ display: none; } .nav>li:hover .nav-sub{ display: none; justify-content: space-between; flex-wrap: wrap; width: 62vw; background-color: rgba(255,255,255,.9); position: fixed; top: 50%; left: 0; transform: translateY(-50%); z-index: 999; } .nav-sub .sub-left{ display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; padding: 0; background-color: rgba(219,222,226,.7); } .nav-sub .sub-left span{ display: block; width: 50%; font-size: 15px; text-align: center; line-height: 40px; border-top: 1px solid #dedede; } .nav-sub .sub-left span:nth-of-type(1), .nav-sub .sub-left span:nth-of-type(2){ border-top: 0; } .nav-sub .sub-left span:nth-of-type(odd){ border-right: 1px solid #dedede; } .nav-sub .sub-left span.cur{ background-color: #2d5899; color: #FFFFFF; transition: all .6s; } .nav-sub .sub-right{ width: 62vw; padding: 0; overflow: hidden; border-top: 1px solid #2d5899; } .nav-sub .sub-right>span{ display: none; overflow: hidden; } .nav-sub .sub-right span>a{ width: 50%; font-size: 13px; text-align: center; } /* 二级导航 */ .nav-son{ display: none; } .nav>li:hover .nav-son{ display: none; width:calc(100% - 38vw); padding: 0; background-color: rgba(255,255,255,.9); position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 999; } .son-top{ font-size: 18px; text-align: center; background-size: 200px 40px; background-position: center; padding-top: 20px; } .son-bottom{ display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0 18px; margin: 10px 0 30px; } .son-bottom a{ width: 50%; font-size: 13px; line-height: 1.4; border-left: 3px solid #92a4bc; padding-left: 6px; } .nav-bg{ display: none; } /* banner */ .banner-swiper{ width: 100%; height: 300px; margin-top: 50px; } .banner-swiper .swiper-slide{ background-color: #f4f4f4; } .banner-swiper .swiper-slide video{ width: 100%; height: 300px; } .banner-title{ width: calc(100% - 30px); left: 20px; top: 25%; } .banner-title p{ font-size: 17px; } .banner-title h2{ font-size: 25px; margin-top: 5px; } .banner-title span{ width: 100%; font-size: 13px; } .banner-swiper .swiper-pagination-bullet{ font-size: 14px; } .about-data{ width: calc(100% - 30px); padding: 20px 0; } .about-data>li{ width: 18%; } .about-data-bg{ height: auto; } .about-data>li>p{ font-size: 25px; margin: 6px 0; } .about-data>li>span{ font-size: 12px; } .about-data>li>p span{ font-size: 16px; margin-left: 5px; } .about-data>li:nth-of-type(1), .about-data>li:nth-of-type(2){ width: 32%; } .about-body{ flex-wrap: wrap; } .about-body>div{ width: 100%; } .about-video-swiper{ height: 205px; } .about-video-swiper .swiper-pagination-bullets, .about-video-swiper .swiper-pagination-custom, .about-video-swiper .swiper-pagination-fraction{ bottom: 10px; } .about-video-swiper .icon-play, .about-video-swiper .icon-play img{ width: 50px; height: 50px; } .video-list-bg{ width: calc(100% - 30px); } .video-list{ width: 100%; height: 200px; border: 0; border-radius: 0; } .video-list video{ width: 100%; height: 200px; } .about-txt{ padding: 20px; } .about-txt>h2{ font-size: 20px; } .about-txt>p{ font-size: 14px; margin: 15px 0 30px; -webkit-line-clamp: 10; } .about-nav>li img{ width: 30px; height: 30px; } .about-nav>li p{ font-size: 14px; } .index-title h2{ font-size: 24px; } .index-title span{ font-size: 14px; } .index-title span.span{ font-size: 15px; } .index-solution{ height: 500px; } .index-solution .index-title{ top: 30px; } .index-solution-list{ width: 100%; } .index-solution-list>li .solution-txt{ width: calc(100% - 30px); top: 130px; } .solution-txt h3{ font-size: 18px; } .solution-txt p{ width: 100%; font-size: 14px; margin-top: 8px; text-align: justify; } .solution-txt .more{ width: 120px; height: 40px; margin-top: 30px; } .index-solution-nav{ height: 120px; } .solution-swiper-bg{ height: 120px; width: 100%; } .solution-nav-swiper{ overflow: hidden; } .index-solution-nav .swiper-slide{ width: auto; padding: 0 15px; min-width: 28%; } .index-solution-nav .swiper-slide>p{ font-size: 14px; } .index-solution-nav .swiper-slide>img{ width: 50px; height: 52px; } .index-service{ padding: 30px 0; } .index-service-list{ width: calc(100% - 30px); justify-content: space-between; flex-wrap: wrap; margin-top: 20px; } .index-service-list li{ width: calc(25% - 6px); margin-right: 0; margin-top: 12px; } .index-service-list>li p{ display: none; } .index-service-list>li span{ width: 50px; height: 50px; } .index-service-list>li span>img{ height: 25px; } .index-service-list>li em{ font-size: 20px; } .index-service-list>li h3{ font-size: 13px; margin: 8px 0; } .index-news{ padding: 30px 0; } .index-news-list{ width: calc(100% - 30px); margin-top: 20px; flex-wrap: wrap; } .index-news-first{ width: 100%; } .index-news-img{ height: 240px; } .index-news-first img{ min-height: 240px; } .index-news-txt{ margin-top: 15px; } .index-news-txt h3{ font-size: 18px; } .index-news-first .more{ margin-top: 12px; } .index-news-item{ width: 100%; } .index-news-item a{ display: flex; flex-direction: row-reverse; width: 100%; } .index-news-item a>span{ width: 80px; } .index-news-item a>h3{ width: calc(100% - 85px); font-size: 14px; -webkit-line-clamp:1; height: auto; } .slogin{ padding: 30px 0; } .slogin img{ height: 64px; } .slogin p{ width: calc(100% - 30px); font-size: 14px; } .foot-bottom{ width: calc(100% - 30px); padding: 15px 0; } .foot, .foot-left>p:first-child{ display: none; } .foot-left{ width: calc(100% - 110px); } .foot-left p{ font-size: 12px; } .foot-left p:last-child a{ margin-left: 0; } .foot-right{ width: 110px; height: auto; } .foot-right img{ width: 50px; height: 50px; } .pull-banner{ height: 280px; margin-top: 50px; } .pull-banner img{ min-height: 280px; } .pull-banner-title{ width: calc(100% - 30px); top: 40%; } .pull-banner-title h2{ font-size: 24px; } .pull-banner-title p{ font-size: 15px; margin: 10px 0; } .pull-nav{ height: 60px; margin-top: -60px; } .pull-nav-swiper{ height: 60px; } .pull-nav-swiper .swiper-slide>a{ margin: 0 20px; line-height: 58px; font-size: 15px; } .about-survey-content{ flex-wrap: wrap; padding: 20px 15px; } .survey-txt{ width: 100%; } .survey-txt>h3{ font-size: 20px; margin-bottom: 18px; } .survey-txt p{ font-size: 14px; text-align: justify; line-height: 1.8; } .survey-data{ width: 100%; } .survey-data>li>span{ font-size: 12px; } .survey-data>li>p{ font-size: 24px; margin: 5px 0; } .survey-data>li>p span{ font-size: 16px; margin-left: 3px; } .survey-data>li{ margin: 15px 0; width: 18%; } .survey-data>li:nth-of-type(1), .survey-data>li:nth-of-type(2){ width: 32%; } .survey-data>li>span:last-of-type{ font-size: 12px; } .about-course-bg{ padding: 20px 0; } .memorabili-txt .swiper-slide{ width: 100% !important; margin: 0; padding: 0; } .memorabili-txt{ padding: 0 80px; background-color: #FFFFFF; } .memorabili-txt .swiper-slide:nth-of-type(2n){ margin-top: 0; padding: 0; } .memorabili-txt .swiper-slide strong{ margin: 10px 0 0 0; } .memorabili-txt .swiper-slide p{ font-size: 14px; line-height: 2; } .memorabili-txt .line, .memorabili-txt .swiper-slide em{ display: none; } .memorabili-swiper .swiper-button-prev{ width: 40px; height: 40px; left: 10px; } .memorabili-swiper .swiper-button-next{ width: 40px; height: 40px; right: 10px; } .strength-img{ height: 210px; } .strength-img>img{ min-height: 300px; } .strength-content{ padding: 20px 15px; margin-top: 0; } .strength-txt{ margin-top: 15px; font-size: 14px; } .index-title span{ font-size: 16px; } .vision-bg{ padding: 20px 0; } .vision{ padding: 20px 15px; } .index-title p{ font-size: 14px; } .vision-list>li{ width: 100%; } .vision-list>li{ height: 210px; } .vision-list>li img{ width: 100%; min-height: 210px; } .vision-list>li .vision-txt p{ width: calc(100% - 30px); } .vision-list>li:nth-of-type(3){ transform: translateY(210px); } .vision-list>li:nth-of-type(4){ transform: translateY(-210px); } .honor-bg{ padding: 20px 0; } .honor-list{ display: none; } .honor-list-other.hide{ width: calc(100% - 100px); height: 100%; position: static; margin: 20px auto 0; z-index: 1; opacity: 1; } .honor-list-other{ padding: 20px; transform: none; } .honor-other-swiper{ width: 100%; } .honor-list-other .swiper-button-prev{ width: 40px; height: 40px; left: 5px; background-color: #003585; } .honor-list-other .swiper-button-next{ width: 40px; height: 40px; right: 5px; background-color: #003585; } .close-swiper{ display: none; } .social-bg{ padding: 20px 0; } .social{ padding: 20px 15px; } .social-list{ margin-top: 10px; flex-wrap: wrap; } .social-list>li{ width: 100%; flex-direction: column; } .social-img{ height: 228px; } .social-img img{ min-height: 228px; } .social-txt{ padding: 30px 40px; } .social-txt span{ font-size: 14px; } .social-txt p{ font-size: 20px; } .classify{ height: 60px; padding: 20px 15px; } .classify>span{ font-size: 15px; margin-right: 20px; } .pull-nav-bg2{ padding: 0; } .pull-nav-swiper .swiper-slide>a{ margin: 0 15px; } .pull-nav-bg .swiper-button-prev, .pull-nav-bg .swiper-button-next{ display: none; } .pull-nav-bg{ padding: 0px; } .case{ padding: 0 15px 15px; } .case-list{ justify-content: space-between; } .case-list>li{ width: calc(50% - 6px); margin: 15px 0 0 0; } .case-list>li span{ height: 110px; } .case-list>li span img{ min-height: 110px; } .case-list>li h3{ font-size: 16px; padding: 0 10px; margin-top: 8px; } .case-list>li p{ padding: 0 10px; -webkit-line-clamp: 2; } .case-detail{ padding: 15px; } .case-detail h1{ font-size: 18px; } .case-thumbnail-bg{ height: 186px; } .case-thumbnail-swiper{ height: 164px; } .case-thumbnail-swiper .swiper-slide{ height: 38px !important; margin-bottom: 3px; } .case-thumbnail-swiper .swiper-slide-thumb-active{ border: 1px solid #003585; padding: 1px; } .case-thumbnail-bg .swiper-button-prev, .case-thumbnail-bg .swiper-button-next{ width: 29px; height: 22px; background-size:10px 6px; } .case-swiper{ height: auto; } .solution{ padding: 0 15px; } .solution-list li{ width: calc(50% - 5px); padding: 15px 0; } .solution-list li:nth-of-type(odd), .solution-list li:nth-of-type(even){ padding-left: 0; padding-right: 0; } .solution-list li .img { height: 110px; } .solution-list li .img img{ min-height: 110px; } .solution-list li .txt{ margin-top: 10px; } .solution-list li .txt h3{ font-size: 15px; -webkit-line-clamp:2; } .solution-list li .txt p{ font-size: 14px; margin: 6px 0; } .more-btns{ font-size: 13px; } .page-list{ margin: 15px 0; } .page-list a{ min-width: 24px; height: 24px; line-height: 22px; font-size: 12px; margin: 0 3px; } .page-list a:first-child, .page-list a:last-child{ padding: 0 8px; } .pull-point{ padding: 0 15px; margin-top: 50px; font-size: 12px; line-height: 40px; display: -webkit-box; -webkit-line-clamp: 1; word-break: break-all; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; } .solution-detail{ padding: 15px 15px 0; } .solution-detail h1{ font-size: 18px; margin-bottom: 10px; } .pull-banner-title p{ height: 20px; } .detail-txt p{ font-size: 14px; } .detail-txt img{ max-width: 100%; width: auto; } .page{ padding: 10px 15px; flex-wrap: wrap; } .page>a{ width: 100%; justify-content: flex-start !important; text-align: left; font-size: 14px; margin: 5px 0; } .page>a>span{ opacity: .8; } .page>span{ display: none; } .relevant-case{ padding: 10px 15px; margin: 15px auto 20px; } .case-title{ height: 40px; } .case-title>strong{ font-size: 16px; line-height: 40px; } .case-title>a{ font-size: 14px; } .relevant-case-list li{ width: 100%; } .relevant-case-list li>a{ font-size: 14px; } .product{ padding: 0 15px 15px; } .product-list{ justify-content: space-between; } .product-list li{ width: calc( 50% - 6px); margin: 15px 0 0 0; padding: 10px; } .product-list li>a{ padding-top: 12px; background-size: 12px 11px; } .product-list li h2{ font-size: 16px; margin: 8px 0 5px; } .product-list li p{ line-height: 1.6; -webkit-line-clamp:4 } .product-detail{ padding: 15px; flex-wrap: wrap; } .product-swiper-bg{ width: 100%; } .product-swiper{ height: auto; } .product-thumbnail-bg{ padding: 0 25px; } .product-thumbnail-bg, .product-thumbnail-swiper{ height: 42px; } .product-thumbnail-bg .swiper-button-prev, .product-thumbnail-bg .swiper-button-next{ width: 20px; height: 42px; background-size: 8px 13px } .product-txt{ width: 100%; padding: 25px 0 0; } .product-txt>h1{ font-size: 18px; } .product-txt>p{ font-size: 14px; padding: 6px 0 10px; } .product-contact{ flex-wrap: wrap; margin-top: 15px; } .product-contact>p:first-child{ width: 60%; } .product-contact>p:first-child img{ height: 50px; margin-right: 4px; } .product-contact>p a>strong{ font-size: 15px; } .product-contact>p a>em{ font-size: 13px; } .product-contact>p:last-child{ width: 40%; } .product-contact>p:last-child img{ height: 50px; margin-right: 4px; } .product-content{ padding: 15px; } .product-btns>span{ font-size: 15px; line-height: 40px; margin-right: 20px; } .body-txt p{ font-size: 14px; } .body-txt .img img{ width: calc(50% - 6px); } .service-bg{ padding: 15px; } .service-list li{ flex-wrap: wrap; margin-top: 20px; } .service-list li:first-child{ margin-top: 0; } .service-list li>div{ width: 100%; } .service-list li .img{ height: 175px; } .service-list li img{ min-height: 175px; } .service-list li .txt{ padding: 0; } .service-list li .txt h2{ font-size: 20px; margin-top: 10px; font-weight: bold; } .service-list li .txt p{ font-size: 14px; } .service-dwon-bg{ padding: 15px; } .service-dwon-list li{ width: 100%; padding: 10px; margin-top: 15px; } .service-dwon-list li:first-child{ margin-top: 0; } .down-txt h2{ font-size: 16px; } .down-txt p{ font-size: 13px; } .service-dwon-list li>a{ font-size: 13px; } .news-first{ padding: 15px; margin-top: -60px; flex-wrap: wrap; } .news-left{ width: 100%; } .news-left .news-img{ height: 230px; } .news-left .news-img img{ min-height: 230px; } .news-txt h3{ font-size: 18px; } .news-txt p{ margin-bottom: 10px; } .news-right{ width: 100%; margin-top: 20px; } .news-right li{ border-top: 1px solid #e8e8e8; border-bottom: 0; } .news-right li:first-child{ padding-top: 15px; } .news-right li h3{ width: calc(100% - 70px); font-size: 14px; font-weight: normal; } .news-right li>a{ display: flex; justify-content: space-between; flex-direction: row-reverse; align-items: center; } .news-right li>a span{ width: 66px; font-size: 13px; margin-bottom: 0; } .news-list{ padding: 0 15px; } .news-list li{ padding: 15px 0; } .news-list li .img{ height: 80px; } .news-list li .txt{ width: calc(70% - 10px); } .news-list li .txt h3{ font-size: 15px; margin-bottom: 0; font-weight: bold; } .news-list li .txt p{ margin: 5px 0 0; line-height: 1.5; -webkit-line-clamp: 2; } .news-list li .txt span, .news-list li .txt .more-btns{ display: none; } .news-detail{ padding: 15px; } .news-detail h1{ font-size: 18px; } .detail-info{ padding: 10px 0; } .detail-info span{ font-size: 13px; margin-right: 10px; } .detail-info span img{ width: 15px; } .news-detail-txt{ padding: 15px 0; } .news-detail-txt .img{ margin: 10px auto; } .detail-txt .img img{ margin: 0 auto; } .news-detail .page{ padding: 15px 0 0; } .flag-list li{ width: 100%; } .flag-list li>a{ display: flex; justify-content: space-between; align-items: center; flex-direction: row-reverse; } .flag-list li>a span{ width: 66px; font-size: 13px; margin-bottom: 0; } .flag-list li h3{ width: calc(100% - 70px); font-size: 14px; } .idea{ padding: 15px; } .idea li{ flex-wrap: wrap; } .idea li:first-child{ margin-bottom: 20px; } .idea .txt{ width: 100%; padding: 0; margin-top: 15px; } .idea .txt h2{ font-size: 18px; font-weight: bold; margin-bottom: 8px; } .idea .txt p{ font-size: 14px; } .idea li .img{ width: 100%; height: 180px; } .idea li .img img{ min-height: 180px; } .culture-bg{ padding-top: 20px; } .culture-bg .img-bg{ height: 170px; } .culture-bg .img-bg .index-title{ top: 20px; } .culture-bg .txt-bg{ width: calc(100% - 30px); margin: -60px auto 0; padding: 10px 15px 15px; flex-wrap: wrap; flex-direction: column-reverse; } .txt-bg .txt{ width: 100%; padding: 0; } .txt-bg .img{ width: 100%; height: auto; margin-top: 10px; } .txt-bg .img img{ min-height: 0; } .recruit-list li .item{ align-items: center; padding: 8px 15px; height: auto; } .recruit-list li .item>span{ width: 24%; font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; word-break: break-all; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; } .recruit-list li:first-child .item>span{ line-height: 1.2; font-size: 13px; } .recruit-list li:first-child .item>span{ padding: 0 7%; } .recruit-list li:first-child .item>span:first-child{ padding: 0 20% 0 0; } .recruit-list li .item>span:first-child{ width: 30%; text-indent: 0; } .recruit-list li .item>span:nth-of-type(2), .recruit-list li .item>span:last-child{ padding: 0; width: 10%; } .recruit-list li .item em{ display: block; width: 16px; height: 16px; line-height: 12px; margin: 0 auto; } .recruit-bg{ padding: 15px 0; } .recruit-list{ margin-top: 20px; } .contact{ padding: 15px; margin-top: -60px; flex-wrap: wrap; } .contact-txt{ width: 100%; } .contact-txt p{ width: calc(100% - 40px); font-size: 14px; } .contact-txt p>a{ margin-right: 8px; } .contact-txt li>em{ margin-right: 0; } .contact-txt p>a:last-child{ margin-right: 0; } .contact-txt li{ justify-content: space-between; } .map{ width: 100%; height: 200px; margin-top: 15px; } .from{ padding: 15px; } .from-bg{ padding: 30px 15px; } .from-bg .index-title>p{ font-size: 14px; width: 100%; } .input{ flex-wrap: wrap; margin-bottom: 0; } .input li{ width: 100%; height: 50px; margin-bottom: 10px; } .input li>input{ line-height: 48px; font-size: 14px; } .input li:last-child input{ width: calc(100% - 90px); } .input li:last-child img{ width: 90px; height: 48px; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{ font-size: 14px; } .from-btn{ width: 160px; height: 46px; font-size: 16px; margin-top: 20px; } .search-content{ padding: 15px; margin-top: 126px; } .search{ width: 30px; height: 30px; margin-right: 10px; border-radius: 4px; } .search>img{ height: 16px; } .search-son{ justify-content: space-between; top: 50px; padding: 0 15px; border-bottom: 10px solid #f4f4f4; } .search-input{ width: 100%; padding: 0 0 15px; } .search-btn{ width: 60px; font-size: 14px; } .input{ margin-top: 0; } .search-list{ padding: 15px 0 0; } .search-list li{ width: 100%; } .search-list li a{ line-height: 2.6; font-size: 14px; } .solution-more-list li{ padding: 0 15px; } .solution-more-list li>span{ align-items: center; width: 48%; margin-right: 4%; font-size: 14px; height: 60px; } .solution-more-list li>span em{ height: 24px; display: -webkit-box; -webkit-line-clamp: 1; word-break: break-all; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; } .solution-more-list li>span:nth-of-type(2n){ margin-right: 0; } .solution-more-list li>span img{ max-width: 20%; } .nav-three-bg{ padding: 0 15px; height: 60px; } .nav-three-bg>span{ width: 75px; font-size: 15px; line-height: 60px; } .nav-three-swiper{ width: calc(100% - 75px); } .nav-three-swiper .swiper-slide{ margin-right: 20px; } .nav-three-swiper .swiper-slide a{ font-size: 15px; line-height: 60px; } /* 手机端底部 */ .wap-service{ display: flex; align-items: flex-end; width: 100%; height: 40px; background-color: #FFFFFF; box-shadow: 0 0 6px rgb(0 0 0 / 20%); border-radius: 30px 0 0 0; position: fixed; left: 0; bottom: 0; z-index: 9998; } .wap-service-left{ display: flex; justify-content: center; align-items: center; width: 35%; height: 40px; font-size: 14px; color: #333; } .wap-service-left img{ height: 18px; margin-right: 6px; } .wap-service-right{ display: flex; justify-content: center !important; align-items: center; width: 65%; height: 60px; background-color: #003585; border-radius: 50px 0 0 0; } .wap-service-right img{ height: 30px; margin-right: 6px; } .wap-service-right>p{ display: grid; color: #FFFFFF; } .wap-service-right>p span{ font-size: 14px; line-height: 1.5; } .wap-service-right>p em{ font-weight: bold; font-size: 17px; line-height: 1.2; } } @media screen and (max-width:414px){ } @media screen and (max-width:350px){ }