/* 引入字体 */ @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); } @font-face { font-family:"SourceHanSerifSC-Bold"; src: url(../fonts/SourceHanSerifSC-Bold.otf); } @font-face { font-family:"HelveticaNeueLT-BoldOutline"; src: url(../fonts/HelveticaNeueLT-BoldOutline.otf); } @font-face { font-family:"Helvetica"; src: url(../fonts/Helvetica.ttf); } @font-face { font-family:"HYa3gj"; src: url(../fonts/HYa3gj.ttf); } @font-face { font-family:"AlibabaSans-Light"; src: url(../fonts/AlibabaSans-Light.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; } /* 语言 */ .language{ display: flex; justify-content: space-between; align-items: center; width: 90px; height: 80px; padding: 0 5px; margin-right: 20px; } .language img:first-child{ width: 25px; height: 25px; } .language img:last-child{ width: 11px; height: 7px; } /* 搜索 */ .search{ display: flex; justify-content: center; align-items: center; width: 88px; height: 80px; background-color: #0094da; } /* 导航 */ .nav{ width: calc(100% - 642px); height: 80px; display: flex; justify-content: flex-start; } .nav>li{ height: 80px; margin-right: 40px; transition: all .8s; } .nav>li>a{ display: block; padding: 0 2px; line-height: 60px; margin-top: 10px; border-bottom: 2px solid #FFFFFF; transition: all .8s; } .nav>li.active>a{ border-bottom: 2px solid #0094da; transition: all .8s; } .nav>li:hover>a{ color: #0094da; transition: all .8s; } .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 .8s; } .nav-sub .sub-left span.cur{ background-color: #2d5899; color: #FFFFFF; transition: all .8s; } .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 .8s; } .nav-sub .sub-right span>a:hover{ color: #2d5899; transition: all .8s; } /* 二级导航 */ .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: #262626; 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: #262626;} .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-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 .8s; } .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; line-height: 1.2; color: #FFFFFF; } .about-data>li>p span{ font-size: 26px; margin-left: 10px; } /* 关于我们 */ .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-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 .8s; } .about-nav>li p{ font-size: 16px; line-height: 1.5; margin-top: 12px; transition: all .8s; } .about-nav>li:hover img{ transform: rotateY(360deg); -webkit-filter: grayscale(0); /* Chrome, Safari, Opera */ filter: grayscale(0); transition: all .8s; } .about-nav>li:hover p{ color: #003585; transition: all .8s; } /* 解决方案 */ .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: 26px; line-height: 1.5; margin-top: 7px; } .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>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; animation: myUp .8s; cursor: pointer; transition: all .8s; } .solution-txt .more:hover{ color: #003585; border: 1px solid #003585; transition: all .8s; } .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 .8s; } .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 .8s; } /* 解决方案分类 */ .index-solution-nav{ display: flex; justify-content: space-between; height: 140px; background-color: rgba(8,12,18,.7); position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 1; } .index-solution-nav li{ width: 100%; margin-right: 5px; cursor: pointer; } .index-solution-nav li:last-child{ margin-right: 0; } .index-solution-nav li>img{ width: 64px; height: 67px; margin: 20px auto 10px; transition: all .8s; } .index-solution-nav li>p{ font-size: 16px; line-height: 1.5; color: #FFFFFF; text-align: center; } .index-solution-nav li.cur{ background-color: #003585; } .index-solution-nav li:hover{ background-color: #003585; } .index-solution-nav li:hover img{ transform:rotateY(360deg); transition: all .8s; } .index-solution-nav li.cur:hover img{ transform:rotateY(0deg); } /* 三级应用 */ .index-solution-more{ height: 0; overflow: hidden; transition: all .8s; animation: myHeight .8s; } .index-solution-more.active{ height: auto; padding: 10px 0 42px; transition: all .8s; animation: myHeightAuto .8s; } .solution-more-list li{ display: none; } .solution-more-list li.show{ display: flex; align-items: center; flex-wrap: wrap; } .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 .8s; } .solution-more-list li>span:hover{ color: #003585; } .solution-more-list li>span:hover img{ transform: scale(1.3); transition: all .8s; } .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 .8s; } .solution-more-btn:hover{ border: 1px solid #003585; color: #003585; transition: all .8s; } /* 服务流程 */ .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 .8s; } .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 .8s; } .index-service-list>li span>img{ -webkit-filter: grayscale(100%); filter: grayscale(100%); transition: all .8s; } .index-service-list>li h3{ font-size: 16px; line-height: 1.5; margin: 13px 0; transition: all .8s; } .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 .8s; } .index-service-list>li:hover span{ background-color: #f4f4f4; transition: all .8s; } .index-service-list>li:hover span>img{ -webkit-filter: grayscale(0); filter: grayscale(0); transform: rotateY(360deg); transition: all .8s; } /* 新闻动态 */ .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(34% - 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 .8s; } .index-news-first:hover .index-news-img img{ transform: scale(1.2); transition: all .8s; } .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 .8s; } .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 .8s; } .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 .8s; } .index-news-item{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 66%; } .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 .8s; } .index-news-item a:hover h3{ color: #003585; font-weight: bold; transition: all .8s; } /* 尾部 */ .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; } .foot li>strong{ opacity: 1; } .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; } .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; } /* 关于我们 */ .pull-banner{ width: 100%; position: relative; } .pull-banner>img{ width: 100%; } .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; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); } .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; } /* 企业概况 */ .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: 50%; margin: 40px 0; } .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; color: #003585; } .survey-data>li>p span{ font-size: 26px; margin-left: 10px; } .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 .8s; } .memorabili-txt .swiper-slide:nth-of-type(7){ opacity: 0; transition: all .8s; } .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 .8s; } .memorabili-txt .swiper-slide:hover em ins{ background-color: #003585; transition: all .8s; } .memorabili-txt .swiper-slide:hover strong, .memorabili-txt .swiper-slide:hover p{ color: #003585; transition: all .8s; } .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{ margin-top: 40px; } .vision-list>li{ display: flex; justify-content: flex-start; align-items: center; } .vision-list>li:nth-of-type(2n){ flex-direction: row-reverse; } .vision-list>li>div{ width: 100%; height: 430px; overflow: hidden; } .vision-list>li>div img{ width: 100%; min-height: 430px; transition: all .8s; } .vision-list>li .vision-txt{ position: relative; } .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-img img{ transform: scale(1.2); transition: all .8s; } /* 动画 */ @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:1690px){ .w1690{ width: 94%; } } @media screen and (max-width:1580px){ } @media screen and (max-width:1440px){ } @media screen and (max-width:1340px){ } @media screen and (max-width:1280px){ } @media screen and (max-width:1180px){ } @media screen and (max-width:1080px){ } @media screen and (max-width:980px){ /* 头部 */ .header{ height: 70px; background-color: rgba(255,255,255,1); } .head{ width: 92%; height: 70px; } .logo h1{ font-size: 20px; } .logo span{ font-size: 13px; } .head .head-btn{ display: block; margin: 0; } .head .nav{ display: block; width: 38vw; height: 100vh; background-color: #FFFFFF; position: fixed; padding-top: 70px; top: 0px; right: -38vw; z-index: 999; transition: all .8s; } .head .nav.active{ right: 0; transition: all .8s; } .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 li{ margin: 0; padding: 0; height: auto; } .head .nav li>a{ width: 100%; font-size: 15px; margin: 0; padding: 0; line-height: 60px; text-align: center; } .head .nav li.active>a{ font-weight: normal; border: 0; color: #FFFFFF; } .pull-item li>a{ padding: 0 20px; font-size: 15px; } .pull-item-02 li>a{ padding: 0 15px; font-size: 14px; } .pull-item-03 li>a{ padding: 0 12px; font-size: 14px; text-align: center; } .banner-swiper{ width: 100%; height: 400px; margin-top: 70px; } .pull-item.pull-item-fixed{ top: 70px; } .memorabili{ padding: 30px 0 40px; } .memorabili-txt .swiper-slide{ width: 100% !important; margin: 0; padding: 0; } .memorabili-txt{ padding: 0; } .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-swiper .swiper-button-prev, .memorabili-swiper .swiper-button-next, .memorabili-txt .line, .memorabili-txt .swiper-slide em{ display: none; } .banner-title p{ font-size: 27px; } .pull-swiper{ height: 360px; } .index-news-information{ flex-wrap: wrap; } .index-news, .index-information{ width: 100%; } .index-information{ margin-top: 20px; } .index-about-bottom li p{ padding: 0 10%; } .news-list li, .news-list li:nth-of-type(3n){ width: 49%; margin-right: 2%; } .news-list li:nth-of-type(2n){ margin-right: 0; } .news>h1{ font-size: 22px; } .preview .swiper-slide{ height: 115px; overflow: hidden; } .preview .swiper-slide img{ min-height: 115px; } .preview .swiper-slide-thumb-active img{ min-height: 101px; } .enterprise-txt p{ padding: 0 15%; } .join-list li>div:nth-of-type(1){ padding: 10px 0 10px 20px; align-items: center; } .join-list li.active>div:nth-of-type(2){ padding: 0 10px 20px; } .join-list li>div:nth-of-type(1)>span{ display: -webkit-box; -webkit-line-clamp: 2; word-break: break-all; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; } .join-list li>div>span, .join-item-first>strong{ line-height: 1.8 !important; } } @media screen and (max-width:780px){ /* banner */ .banner-swiper{ width: 100%; height: 280px; margin-top: 70px; } .banner-title{ width: 80%; left: 10%; top: 28%; } .pull-banner-title{ top: 40%; } @keyframes pullBanner { from {top: 80%;} to {top: 40%;} } .banner-title h2{ font-size: 30px; } .banner-title p{ font-size: 16px; } .banner-title span{ font-size: 12px; } .index-news-information{ flex-wrap: wrap; margin-top: 25px; } .index-news-first{ padding: 10px; } .index-news{ width: 100%; flex-wrap: wrap; } .index-news-all{ margin-top: 12px; } .index-news>div{ width: 100%; } .left-img{ height: 254px; overflow: hidden; } .left-img img{ min-height: 254px; } .index-news-right{ margin-top: 20px; } .index-title ins{ font-size: 50px; } .index-title-item{ margin-bottom: 8px; } .index-title-item li{ font-size: 16px; } .index-news-first>a{ flex-wrap: wrap; } .index-news-first>a>div{ width: 100%; } .index-news-first{ height: auto; } .first-img{ width: 100%; height: 235px; margin-bottom: 15px; overflow: hidden; } .first-img img{ width: 100%; min-height: 235px; } .index-news-list li>a{ width: 83%; } .index-news-list li>a::before{ width: 4px; height: 4px; margin: 13px 6px 0 0 ; } .index-information{ width: 100%; margin-top: 15px; } .index-information-title, .index-information-list{ padding: 0 15px; } .index-business{ margin-top: 25px; height: 500px; } .index-business-list li{ height: 500px; } .index-business-list li img{ min-height: 500px; } .index-business-txt{ width: 86%; top: 13%; transform: translate(-50%,-10%); } .ndex-business-title h3{ font-size: 30px; } .ndex-business-title span{ font-size: 16px; } .index-business-item{ height: 70px; } .index-business-item li>img{ width: 30px; height: 30px; margin-top: 10px; } .index-business-item li>p{ font-size: 12px; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .index-about{ margin-top: 25px; padding: 10px; position: relative; margin-bottom: 25px; } .index-about-top{ flex-wrap: wrap; } .index-about-top>div{ width: 100%; } .index-about-right{ position: absolute; right: 10px; top: 20px; } .index-about-right img{ width: auto; height: 45px; } .form-top>span{ width: 100%; } .form-top>span input{ width: calc(100% - 115px); } .form-top>span em{ width: 110px; margin-top: 10px; } .corporate-name{ margin-top: 10px; } .index-about-left .more{ margin: 20px auto 0; } .index-about-bottom{ flex-wrap: wrap; margin-top: 10px; } .index-about-bottom>li{ width: 100%; margin: 10px 0; padding: 25px 0; } .index-about-bottom li p{ padding: 0 10%; } .foot{ flex-wrap: wrap; padding: 20px 10px; } .foot>div{ width: 100%; } .foot-left>p{ font-size: 13px; } .foot-left>p>span{ display: block; } .foot-left>span{ font-size: 13px; margin: 20px 0; } .links{ width: 100%; height: 36px; } .links .links-item{ top: 0; transform: translateY(-100%); } .links:hover .links-item{ height: auto; padding: 10px 15px; border-top: none; border-bottom: 1px solid rgba(255,255,255,.8); } .links p{ line-height: 36px; } .links p>img{ transform:rotate(180deg); -ms-transform:rotate(180deg); /* IE 9 */ -moz-transform:rotate(180deg); /* Firefox */ -webkit-transform:rotate(180deg); /* Safari 和 Chrome */ -o-transform:rotate(180deg); /* Opera */ } .links:hover p>img{ transform:rotate(0); -ms-transform:rotate(0); /* IE 9 */ -moz-transform:rotate(0); /* Firefox */ -webkit-transform:rotate(0); /* Safari 和 Chrome */ -o-transform:rotate(0); /* Opera */ } .foot-right{ max-width: 100%; } .follow{ margin-top: 20px; } .section{ padding: 25px 0; } .abstract-txt p, .speech-txt p{ margin-top: 15px; } .abstract-txt img{ max-width: 90%; margin: 30px auto; } .team-list .team-item{ width: 100%; margin: 0 0 20px 0; } .team-swiper{ padding-bottom: 30px; } .organization-img{ margin-top: 20px; } .organization-img img{ width: 98%; } .index-business-txt p{ font-size: 15px; line-height: 2; text-align: justify; } .pull-title h3{ font-size: 26px; } .pull-title span{ font-size: 14px; } .pull-item.pull-item-fixed{ top: 70px; } .news-list li, .news-list li:nth-of-type(3n){ width: 100%; margin-right: 0; } .news-img{ height: 238px; overflow: hidden; } .news-img img{ min-height: 238px; } .pase-size{ flex-wrap: wrap; justify-content: center; } .pase-size a{ width: 25px; line-height: 25px; font-size: 13px; margin: 0 3px; } .pase-size a:first-child, .pase-size a:last-child{ padding: 0 5px; } /* .pase-size a:nth-of-type(n+7){ display: none; } .pase-size a:last-child{ display: block; } */ .pull-swiper{ height: 240px; } .news>h1{ font-size: 18px; } .news-page{ flex-wrap: wrap; } .news-page>a{ width: 100%; margin: 5px 0; } .news-page>a ins, .news-page>a span{ display: none; } .page-title{ width: 100%; } .news-page>a:nth-of-type(1) p::before{ content: "上一篇:"; width: 80px; } .news-page>a:nth-of-type(2) p::before{ content: "下一篇:"; width: 80px; } .news-page .next{ justify-content: flex-start; } .news-page .next .page-title{ text-align: left; } .business-img{ flex-wrap: wrap; margin-bottom: 0; } .area-list li p{ margin-top: 12px; } .view{ width: 100%; } .preview{ width: 100%; margin: 10px 0 0 0; } .preview .swiper-wrapper{ flex-wrap: nowrap; } .preview .swiper-slide{ height: 84px; overflow: hidden; } .preview .swiper-slide img{ min-height: 84px; } .preview .swiper-slide-thumb-active img{ min-height: 74px; } .preview-arrow{ display: none; } .area-list li{ width: 100%; } .area-list li .more{ margin-top: 60px; } .area-list li{ padding: 30px 18px; } .area-list li:nth-of-type(odd){ background-color: #FFFFFF; } .area-list li:nth-of-type(even){ background-color: rgba(255,255,255,0); } .inspect-list li{ padding: 20px 10px; } .inspect-time{ width: 72px; padding-right: 10px; } .inspect-txt{ width: calc(100% - 90px); } .enterprise-list li{ flex-wrap: wrap; } .enterprise-list li>div{ width: 100%; } .inspect-list li:hover .inspect-img .inspect-list li:hover .inspect-txt{ display: none; } .enterprise-list{ margin-bottom: 0; } .news-bg{ padding-bottom: 30px; } .news-detail-bg{ padding-bottom: 0; } .news-page{ padding: 20px 0; margin-top: 25px; } .pase-size{ margin-top: 30px; } .enterprise-img{ height: 205px; } .enterprise-img img{ min-height: 205px; } .enterprise-txt{ height: auto; padding: 20px 0 5px; } .enterprise-txt p{ padding: 0 10%; } .team-list-other{ padding: 5px 10px 15px; } .team-style-swiper .swiper-slide p{ padding: 5px 10px; font-size: 14px; } .social-list-dxtc li{ margin-top: 30px; } .social-list-dxtc li>a{ flex-wrap: wrap; } .social-list-dxtc li>a>div{ width: 100%; } .social-img{ height: 238px; } .social-img img{ min-height: 238px; } .social-txt{ padding: 10px; } .social-txt h4{ font-size: 18px; } .social-txt p{ -webkit-line-clamp:3 } .guide-list li{ padding: 20px 10px; } .information-content{ flex-wrap: wrap; margin-bottom: 0; } .information-content>div{ width: 100%; } .information-img img{ width: 100%; margin-top: 30px; } .contact-content{ padding: 15px 10px; } .contact-top li{ display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 15px 10px; margin: 0; border: 0; } .contact-top li>span{ width: 50px; height: 50px; margin: 0; } .contact-top li>img{ margin-bottom: 8px; } .contact-top li>p{ width: calc(100% - 60px); font-size: 14px; text-align: justify; word-break: break-all; } .contact-top li:last-child{ margin-bottom: 12px; } .contact-top li:last-child>img{ margin: 0; } .contact-top li:last-child>p{ width: calc(100% - 115px); } .contact-map{ height: 200px; margin-top: 5px; } .form-top{ flex-wrap: wrap; } .form-top input{ width: 100%; margin-top: 10px; padding: 0 17px; } .form-top>input:nth-of-type(1), .form-top>input:nth-of-type(2), .form-top>input:nth-of-type(3){ width: 100%; } .contact-btn, .index-about-left .more{ background-color: #de0011; } .contact-btn{ width: 150px; height: 50px; } .join-list li>div:nth-of-type(1)>strong, .join-list li>div:nth-of-type(1)>span{ font-size: 13px; } .join-list li>div:nth-of-type(1)>strong:last-child, .join-list li>div:nth-of-type(1)>span:last-child{ width: 10%; } .join-list li>div:nth-of-type(1)>strong, .join-list li>div:nth-of-type(1)>span{ width: 22%; } .join-list li>div:nth-of-type(1){ padding: 10px 10px; align-items: center; } .join-list li>div>span, .join-item-first>strong{ line-height: 1.6 !important; } .news-page-other>a{ width: 100%; margin: 5px 0; } } @media screen and (max-width:414px){ .pull-item.pull-item-fixed{ width: 100%; } .pull-item-02 li>a{ padding: 0 8px; font-size: 14px; } .pull-item-03 li>a{ padding: 7px 12px; line-height: 22px; font-size: 15px; text-align: center; } } @media screen and (max-width:350px){ .pull-item-02 li>a{ padding: 0 6px; font-size: 13px; } .pull-item-03 li>a{ padding: 9px 8px; line-height: 20px; font-size: 14px; text-align: center; } .pase-size a{ width: 22px; line-height: 22px; } .social-img{ height: 230px; } .social-img img{ min-height: 230px; } .join-list li>div:nth-of-type(1)>strong:last-child, .join-list li>div:nth-of-type(1)>span:last-child{ width: 18%; } .join-list li>div:nth-of-type(1)>strong:first-child, .join-list li>div:nth-of-type(1)>span:first-child{ width: 38%; } .join-list li>div:nth-of-type(1)>strong, .join-list li>div:nth-of-type(1)>span{ font-size: 12px; } .index-title ins{ font-size: 42px; } .index-title p{ font-size: 16px; } .index-title-item li{ font-size: 13px; } .index-title-item li:last-child{ margin-left: 15px; } .corporate-name{ font-size: 22px; margin: 20px 0 10px; } }